:root{
  --blue:#1A2B3C;     /* Azul oscuro */
  --silver:#C0C0C0;   /* Plateado   */
  --text:#f3f6fa;
  --muted:#a8b1ba;
  --bg:#0f1b28;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --radius: 16px;
  --header-h: 64px;   /* altura de referencia; se recalcula en JS */
}

/* Reset mínimo */
*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* Offset global para anclas bajo header sticky */
html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
}

/* Si se usa scrollIntoView en algún lado */
section{ scroll-margin-top: calc(var(--header-h) + 8px); }

/* Fondo base */
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background: linear-gradient(180deg, var(--bg) 0%, var(--blue) 100%);
}

/* Barra de progreso de scroll */
.scrollbar{
  position:fixed; top:0; left:0; height:4px; width:0%;
  background: var(--silver);
  z-index:9999;
  box-shadow: var(--shadow);
}

/* Header / Nav */
header{
  position:sticky; top:0; z-index:999;
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--blue) 80%, transparent);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav{
  max-width: 1100px; margin:0 auto; padding: 14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);
  font-weight: 700; letter-spacing:.5px;
}
.brand-mark{
  width:12px; height:12px; border-radius:50%; background:var(--silver);
  box-shadow: 0 0 0 4px rgba(192,192,192,.15);
}
.brand-logo{ display:block; height:120px; width:auto }
.menu{
  display:flex; gap:6px; align-items:center; list-style:none; margin:0; padding:0;
}
.menu a{
  color:var(--text); text-decoration:none; padding:10px 14px; border-radius:10px;
  transition: all .2s ease;
}
.menu a:hover{ background: rgba(255,255,255,.08) }
.menu a.active{
  background: var(--silver); color:#111; font-weight:700;
  box-shadow: var(--shadow);
}
.burger{
  display:none; background:transparent; color:var(--text);
  border:1px solid rgba(255,255,255,.3); padding:8px 10px; border-radius:10px; cursor:pointer;
}

@media (max-width: 840px){
  .brand-logo{ height:28px }
  .burger{display:inline-block}
  .menu{
    position:absolute; left:0; right:0; top:calc(var(--header-h));
    background: color-mix(in srgb, var(--blue) 85%, transparent);
    flex-direction:column; align-items:stretch; display:none;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .menu.open{ display:flex }
  .menu a{ padding:14px 20px }
}

/* Secciones: espacios verticales coherentes */
section{
  min-height: 100svh; display:grid; place-items:center;
  padding-block: clamp(64px, 8vw, 110px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Ajuste fino: el hero respira más arriba */
#inicio{ padding-top: calc(-150px + var(--header-h)); }
#servicios{ padding-top: calc(-150px + var(--header-h)); }

/* Ajuste fino: “Nosotros” y “Misión” */
#nosotros{
  padding-top: calc(48px + var(--header-h));
  scroll-margin-top: calc(var(--header-h) + 4px);
}
#mision{ scroll-margin-top: calc(var(--header-h) - 12px); }

.container{ max-width:1100px; width:100% }
.card{
  background: rgba(26,43,60,.55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(20px, 3vw, 36px);
}
h1,h2{ margin:0 0 14px }
h1{ font-size: clamp(40px, 6vw, 68px); line-height: 1.05 }
h2{ font-size: clamp(28px, 4vw, 40px) }
p{ color: var(--muted); font-size: clamp(16px, 1.6vw, 18px); line-height: 1.7; margin: 10px 0 0 }
.lead{ color: var(--text); font-size: clamp(18px, 2vw, 22px) }
.accent{ color: var(--silver) }

/* Botones */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:12px 18px; margin-top:18px;
  border-radius: 999px; border: 1px solid var(--silver);
  color:#111; background: var(--silver); text-decoration:none; font-weight:700;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow) }
.btn.alt{ background: transparent; color: var(--silver) }
.actions{ display:flex; gap:10px; flex-wrap:wrap }

/* Grid util */
.grid{ display:grid; gap:16px; grid-template-columns: repeat(12, 1fr) }
.col-6{ grid-column: span 6 }
.col-4{ grid-column: span 4 }
@media (max-width: 900px){
  .col-6, .col-4{ grid-column: 1 / -1 }
}

/* Tarjetas pequeñas */
.feature{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; padding:18px;
}
.highlight{ outline:2px solid var(--silver) }
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background: var(--silver); color:#111; font-weight:700; font-size:12px; letter-spacing:.5px;
  margin-bottom: 50px;
}

/* Formulario */
.form label{ display:block; margin:16px 0 6px }
.form input, .form textarea{
  width:100%; padding:12px; border-radius:10px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.2); color:#fff;
}
.muted-list{ margin:0; padding-left:18px; color:var(--muted) }

/* Animaciones de revelado */
.reveal{ opacity:0; transform: translateY(18px); transition: all .6s ease }
.reveal.visible{ opacity:1; transform: translateY(0) }

/* ===== Parallax background por sección ===== */
.parallax{ position: relative; z-index: 0; overflow: hidden }
.parallax::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(10,15,20,.55), rgba(10,15,20,.35));
}
.parallax__bg{
  position:absolute; left:0; top:-20%;
  width:100%; height:140%;
  background-size: cover; background-position: center;
  transform: translateY(0) scale(1.1);
  will-change: transform;
  z-index: -2;
}

/* Footer */
footer{ text-align:center; color:var(--muted); padding:40px 16px }