/* ============================================================
   ECUADOR AEROSPACE INDUSTRIES · demo Suárez Media · oct 2026
   Sistema: placa de datos aeronáutica. Saira Condensed + IBM Plex.
   Grafito #0e1116 · hueso #f2efe8 · amarillo bandera #f5c400
   ============================================================ */

:root{
  --ink:#0e1116;
  --ink-2:#161b22;
  --bone:#f2efe8;
  --bone-2:#e7e2d6;
  --amarillo:#f5c400;
  --azul:#1b3fab;
  --rojo:#ce2b1e;
  --gris:#8b9099;
  --linea:rgba(14,17,22,.18);
  --linea-luz:rgba(242,239,232,.16);
  --display:"Saira Condensed",sans-serif;
  --texto:"IBM Plex Sans",sans-serif;
  --mono:"IBM Plex Mono",monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--texto);
  background:var(--bone);
  color:var(--ink);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* ---------- tipografía ---------- */
h1,h2,h3,.disp{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.95;
}
h1{font-size:clamp(44px,7.5vw,104px)}
h2{font-size:clamp(34px,5vw,64px)}
h3{font-size:clamp(22px,2.6vw,30px);font-weight:600}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
.codigo{
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;
  color:var(--gris);text-transform:uppercase;
  display:flex;align-items:center;gap:14px;margin-bottom:18px;
}
.codigo::after{content:"";flex:1;height:1px;background:var(--linea)}
.oscuro .codigo{color:#9aa3af}
.oscuro .codigo::after{background:var(--linea-luz)}
.codigo .tick{color:var(--amarillo)}

/* ---------- barra superior ---------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,3vw,36px);height:64px;
  background:rgba(14,17,22,0);
  transition:background .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
.topbar.solida{background:rgba(14,17,22,.96);border-color:var(--linea-luz)}
.marca{display:flex;align-items:center;gap:12px}
.marca img{height:34px;width:auto}
.marca span{
  font-family:var(--display);font-weight:600;font-size:17px;
  letter-spacing:.06em;color:var(--bone);text-transform:uppercase;line-height:1;
}
.menu{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)}
.menu a{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone);
  padding:6px 2px;border-bottom:2px solid transparent;transition:border-color .2s,color .2s;
}
.menu a:hover{border-color:var(--amarillo)}
.menu a.activa{border-color:var(--amarillo);color:var(--amarillo)}
.menu .cta{
  background:var(--amarillo);color:var(--ink);padding:10px 18px;
  border-bottom:none;font-weight:600;transition:transform .15s,background .2s;
}
.menu .cta:hover{background:#ffd41f;transform:translateY(-1px)}
.burger{display:none;background:none;border:1px solid var(--linea-luz);color:var(--bone);
  font-size:20px;padding:6px 12px;cursor:pointer}

/* ---------- héroe ---------- */
.heroe{
  position:relative;min-height:92vh;display:flex;align-items:flex-end;
  background:var(--ink);color:var(--bone);overflow:hidden;
}
.heroe .fondo{
  position:absolute;inset:0;background-size:cover;background-position:center;
  animation:zoomlento 18s ease-out forwards;filter:saturate(.92);
}
@keyframes zoomlento{from{transform:scale(1.12)}to{transform:scale(1)}}
.heroe .velo{
  position:absolute;inset:0;
  background:linear-gradient(10deg,rgba(14,17,22,.94) 18%,rgba(14,17,22,.45) 55%,rgba(14,17,22,.25) 100%);
}
.heroe .wrap{position:relative;z-index:2;padding-bottom:64px;padding-top:140px;width:100%}
.heroe h1{max-width:13ch}
.heroe h1 .amarillo{color:var(--amarillo)}
.heroe .baja{
  max-width:560px;margin-top:22px;font-size:18px;color:#d8d4c9;
}
.acciones{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  padding:15px 26px;border:1px solid transparent;transition:transform .15s,background .2s,color .2s,border-color .2s;
}
.btn.lleno{background:var(--amarillo);color:var(--ink);font-weight:600}
.btn.lleno:hover{background:#ffd41f;transform:translateY(-2px)}
.btn.borde{border-color:rgba(242,239,232,.5);color:var(--bone)}
.btn.borde:hover{border-color:var(--amarillo);color:var(--amarillo)}
.btn.tinta{border-color:var(--ink);color:var(--ink)}
.btn.tinta:hover{background:var(--ink);color:var(--bone)}
.hero-datos{
  position:relative;z-index:2;margin-top:48px;
  display:flex;gap:0;border-top:1px solid var(--linea-luz);flex-wrap:wrap;
}
.hero-datos div{
  flex:1;min-width:150px;padding:16px 18px 2px 0;
}
.hero-datos .mono{color:#9aa3af}
.hero-datos strong{
  display:block;font-family:var(--display);font-weight:600;
  font-size:26px;color:var(--bone);text-transform:uppercase;
}

/* ---------- cinta corrediza ---------- */
.cinta{
  background:var(--amarillo);color:var(--ink);overflow:hidden;white-space:nowrap;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
}
.cinta .tren{
  display:inline-flex;gap:0;animation:correr 36s linear infinite;padding:12px 0;
}
.cinta span{
  font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  padding:0 26px;border-right:1px solid rgba(14,17,22,.35);
}
@keyframes correr{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- secciones ---------- */
.bloque{padding:clamp(64px,9vw,120px) 0}
.oscuro{background:var(--ink);color:var(--bone)}
.oscuro h2,.oscuro h3{color:var(--bone)}
.crema{background:var(--bone)}
.hueso2{background:var(--bone-2)}

.cabeza{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.cabeza p{color:#555c66;max-width:46ch}
.oscuro .cabeza p{color:#aab2bd}

/* ---------- fila de valor (por qué local) ---------- */
.filas{border-top:1px solid var(--linea)}
.oscuro .filas{border-top-color:var(--linea-luz)}
.fila{
  display:grid;grid-template-columns:90px 1fr 1.4fr;gap:26px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--linea);
}
.oscuro .fila{border-bottom-color:var(--linea-luz)}
.fila .num{font-family:var(--mono);font-size:13px;color:var(--gris);letter-spacing:.15em}
.fila h3{margin:0}
.fila p{color:#555c66;margin:0}
.oscuro .fila p{color:#aab2bd}

/* ---------- flota ---------- */
.nave{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);
  align-items:stretch;margin-bottom:clamp(48px,6vw,88px);
}
.nave.invertida{direction:rtl}
.nave.invertida>*{direction:ltr}
.nave .foto{position:relative;overflow:hidden;min-height:340px}
.nave .foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.nave .foto:hover img{transform:scale(1.04)}
.nave .foto .sello{
  position:absolute;left:0;bottom:0;background:var(--ink);color:var(--amarillo);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:8px 14px;
}
.nave .ficha{display:flex;flex-direction:column;justify-content:center}
.nave .ficha>p{color:#555c66;margin:16px 0 8px;max-width:50ch}
.oscuro .nave .ficha>p{color:#aab2bd}
.placa{
  margin-top:22px;border:1px solid var(--linea);
}
.oscuro .placa{border-color:var(--linea-luz)}
.placa .celda{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--linea);
}
.oscuro .placa .celda{border-bottom-color:var(--linea-luz)}
.placa .celda:last-child{border-bottom:none}
.placa .celda .mono{color:var(--gris)}
.placa .celda b{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:17px;letter-spacing:.02em}

/* ---------- rejilla de aplicaciones ---------- */
.rejilla{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);
}
.oscuro .rejilla{background:var(--linea-luz);border-color:var(--linea-luz)}
.campo{
  background:var(--bone);padding:26px 22px;min-height:170px;
  display:flex;flex-direction:column;gap:10px;position:relative;
  transition:background .25s;
}
.oscuro .campo{background:var(--ink-2)}
.campo:hover{background:var(--bone-2)}
.oscuro .campo:hover{background:#1c232d}
.campo .mono{color:var(--gris)}
.campo h3{font-size:20px}
.campo p{font-size:14.5px;color:#555c66;line-height:1.5}
.oscuro .campo p{color:#9aa3af}
.campo.destacado{outline:2px solid var(--amarillo);outline-offset:-2px}

/* ---------- galería operación ---------- */
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.galeria figure{overflow:hidden;position:relative}
.galeria img{width:100%;height:380px;object-fit:cover;transition:transform .7s ease}
.galeria figure:hover img{transform:scale(1.05)}
.galeria figcaption{
  position:absolute;left:0;bottom:0;right:0;
  background:linear-gradient(transparent,rgba(14,17,22,.85));
  color:var(--bone);font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;padding:26px 14px 12px;
}

/* ---------- proceso (servicios) ---------- */
.pasos{counter-reset:paso;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea)}
.oscuro .pasos{background:var(--linea-luz);border-color:var(--linea-luz)}
.paso{background:var(--bone);padding:28px 24px;position:relative}
.oscuro .paso{background:var(--ink-2)}
.paso::before{
  counter-increment:paso;content:"0" counter(paso);
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--amarillo);
  display:block;margin-bottom:12px;
}
.paso h3{margin-bottom:8px}
.paso p{font-size:15px;color:#555c66}
.oscuro .paso p{color:#9aa3af}
.paso ul{margin-top:10px}
.paso li{
  font-size:14.5px;color:#555c66;padding:7px 0 7px 18px;position:relative;
  border-top:1px dashed var(--linea);
}
.oscuro .paso li{color:#9aa3af;border-top-color:var(--linea-luz)}
.paso li::before{content:"▸";position:absolute;left:0;color:var(--amarillo)}

/* ---------- anatomía interactiva ---------- */
.anatomia{margin-bottom:clamp(48px,6vw,88px)}
.anat-hint{color:#9aa3af;margin:-6px 0 18px}
.anat-visor{
  position:relative;overflow:hidden;border:1px solid var(--linea-luz);
  user-select:none;
}
.anat-visor>img{width:100%;display:block;pointer-events:none}
.anat-visor::before,.anat-visor::after{
  content:"";position:absolute;width:26px;height:26px;z-index:3;pointer-events:none;
}
.anat-visor::before{top:10px;left:10px;border-top:2px solid var(--amarillo);border-left:2px solid var(--amarillo)}
.anat-visor::after{bottom:10px;right:10px;border-bottom:2px solid var(--amarillo);border-right:2px solid var(--amarillo)}
.anat-barrido{
  position:absolute;top:0;bottom:0;width:120px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(245,196,0,.14),transparent);
  animation:barrer 7s linear infinite;
}
@keyframes barrer{from{left:-15%}to{left:110%}}
.anat-punto{
  position:absolute;z-index:4;width:22px;height:22px;margin:-11px 0 0 -11px;
  border-radius:50%;cursor:pointer;
  background:var(--amarillo);border:2px solid var(--ink);
  box-shadow:0 0 0 0 rgba(245,196,0,.65);
  animation:pulso 2.2s ease-out infinite;
  transition:transform .15s;
}
.anat-punto:hover{transform:scale(1.25)}
.anat-punto.activo{background:#fff;animation:none;box-shadow:0 0 0 6px rgba(245,196,0,.35)}
@keyframes pulso{
  0%{box-shadow:0 0 0 0 rgba(245,196,0,.65)}
  70%{box-shadow:0 0 0 16px rgba(245,196,0,0)}
  100%{box-shadow:0 0 0 0 rgba(245,196,0,0)}
}
.anat-ficha{
  position:absolute;top:16px;left:16px;z-index:5;max-width:340px;
  background:rgba(10,13,17,.92);border:1px solid rgba(245,196,0,.5);
  padding:16px 18px;opacity:0;transform:translateY(-8px);
  transition:opacity .25s,transform .25s;pointer-events:none;
}
.anat-ficha.visible{opacity:1;transform:none}
.anat-ficha .mono{color:var(--amarillo);display:block;margin-bottom:6px}
.anat-ficha b{
  font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:20px;color:var(--bone);display:block;margin-bottom:6px;
}
.anat-ficha p{font-size:14px;color:#c6cdd6;line-height:1.5;margin:0}
@media(max-width:680px){
  .anat-ficha{left:10px;right:10px;top:auto;bottom:10px;max-width:none;transform:translateY(8px)}
  .anat-punto{width:26px;height:26px;margin:-13px 0 0 -13px}
}

/* ---------- franja de telemetría ---------- */
.telemetria{
  display:flex;align-items:stretch;flex-wrap:wrap;
  border:1px solid rgba(245,196,0,.45);border-top:none;
  background:#0a0d11;overflow:hidden;
}
.tele-status{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amarillo);padding:14px 18px;
  border-right:1px solid rgba(245,196,0,.25);
}
.tele-status i{
  width:9px;height:9px;border-radius:50%;background:var(--amarillo);
  animation:parpadeo 1.1s steps(2,start) infinite;
}
@keyframes parpadeo{to{visibility:hidden}}
.tele-item{
  flex:1;min-width:96px;display:flex;align-items:baseline;gap:6px;justify-content:center;
  padding:14px 10px;border-right:1px solid rgba(242,239,232,.08);
}
.tele-item:last-child{border-right:none}
.tele-item .mono{color:#717a86;font-size:10.5px}
.tele-item b{
  font-family:var(--mono);font-weight:500;font-size:17px;color:var(--bone);
  font-variant-numeric:tabular-nums;min-width:52px;text-align:right;
}
@media(max-width:680px){
  .tele-status{width:100%;border-right:none;border-bottom:1px solid rgba(245,196,0,.25)}
  .tele-item{min-width:30%}
}

/* ---------- vida extra ---------- */
.oscuro{
  background-image:
    linear-gradient(rgba(242,239,232,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(242,239,232,.028) 1px,transparent 1px);
  background-size:56px 56px;
}
.heroe .fondo{will-change:transform}
.heroe .kicker-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--amarillo);margin-right:8px;
  animation:parpadeo 1.3s steps(2,start) infinite;vertical-align:1px;
}
.heroe .wrap>*{opacity:0;animation:aparecer .9s ease forwards}
.heroe .wrap>*:nth-child(1){animation-delay:.15s}
.heroe .wrap>*:nth-child(2){animation-delay:.3s}
.heroe .wrap>*:nth-child(3){animation-delay:.5s}
.heroe .wrap>*:nth-child(4){animation-delay:.7s}
.heroe .wrap>*:nth-child(5){animation-delay:.9s}
@keyframes aparecer{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.bajar{
  position:absolute;left:50%;bottom:18px;z-index:3;width:1px;height:46px;
  background:rgba(242,239,232,.25);overflow:hidden;
}
.bajar::after{
  content:"";position:absolute;left:0;top:-50%;width:100%;height:50%;
  background:var(--amarillo);animation:caer 1.8s ease-in infinite;
}
@keyframes caer{to{top:110%}}
.cinta:hover .tren{animation-play-state:paused}
.rev .codigo::after{transform:scaleX(0);transform-origin:left;transition:transform 1.1s ease .2s}
.rev.visto .codigo::after{transform:scaleX(1)}
.rev.visto .campo,.rev.visto .fila,.rev.visto .paso,.rev.visto figure{
  animation:aparecer .6s ease both;
}
.rev.visto :is(.campo,.fila,.paso,figure):nth-child(1){animation-delay:.05s}
.rev.visto :is(.campo,.fila,.paso,figure):nth-child(2){animation-delay:.12s}
.rev.visto :is(.campo,.fila,.paso,figure):nth-child(3){animation-delay:.19s}
.rev.visto :is(.campo,.fila,.paso,figure):nth-child(4){animation-delay:.26s}
.rev.visto :is(.campo,.fila,.paso,figure):nth-child(5){animation-delay:.33s}
.rev.visto :is(.campo,.fila,.paso,figure):nth-child(6){animation-delay:.4s}
.rev.visto :is(.campo,.fila,.paso,figure):nth-child(7){animation-delay:.47s}
.rev.visto :is(.campo,.fila,.paso,figure):nth-child(8){animation-delay:.54s}
.rev.visto :is(.campo,.fila,.paso,figure):nth-child(9){animation-delay:.61s}
.rev.visto :is(.campo,.fila,.paso,figure):nth-child(10){animation-delay:.68s}
.rev.visto :is(.campo,.fila,.paso,figure):nth-child(11){animation-delay:.75s}
@media(prefers-reduced-motion:reduce){
  .heroe .fondo,.anat-barrido,.cinta .tren,.bajar::after,.heroe .wrap>*{animation:none;opacity:1}
}

/* ---------- centro de operaciones (mapa) ---------- */
.hub{margin-bottom:clamp(48px,6vw,88px)}
.hub-grid{display:grid;grid-template-columns:1.5fr .9fr;gap:0;border:1px solid rgba(245,196,0,.45)}
#hub-mapa{height:480px;background:#0a0d11;z-index:1}
.leaflet-container{background:#0a0d11;font-family:var(--mono)}
.leaflet-tile-pane{filter:invert(1) hue-rotate(185deg) brightness(.75) contrast(1.05) saturate(.25)}
.leaflet-control-attribution{background:rgba(10,13,17,.8)!important;color:#717a86!important;font-size:9px!important}
.leaflet-control-attribution a{color:#9aa3af!important}
.leaflet-bar a{background:#161b22!important;color:#f2efe8!important;border-color:rgba(242,239,232,.2)!important}
.hub-tip{
  background:rgba(10,13,17,.9);border:1px solid rgba(245,196,0,.5);border-radius:0;
  color:var(--bone);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 8px;box-shadow:none;
}
.hub-tip::before{display:none}
.hub-dron{
  font-size:22px;color:var(--amarillo);line-height:1;
  text-shadow:0 0 8px rgba(245,196,0,.8);
  transition:transform .3s linear;will-change:transform;
}
.hub-panel{
  background:#0a0d11;border-left:1px solid rgba(245,196,0,.25);
  padding:24px 22px;display:flex;flex-direction:column;gap:16px;
}
.hub-panel .mono{color:#717a86}
.hub-botones{display:flex;flex-direction:column;gap:8px}
.hub-botones button{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  text-align:left;padding:13px 14px;cursor:pointer;
  background:transparent;border:1px solid rgba(242,239,232,.2);color:var(--bone);
  transition:border-color .2s,background .2s,color .2s;
}
.hub-botones button:hover{border-color:var(--amarillo)}
.hub-botones button.activo{background:var(--amarillo);color:var(--ink);border-color:var(--amarillo);font-weight:600}
.hub-desc{font-size:14px;color:#c6cdd6;line-height:1.55;min-height:84px}
.hub-datos{border-top:1px solid rgba(242,239,232,.12)}
.hub-datos div{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:10px 0;border-bottom:1px solid rgba(242,239,232,.08);
}
.hub-datos b{font-family:var(--mono);font-weight:500;color:var(--amarillo);font-variant-numeric:tabular-nums}
.hub-nota{font-size:11.5px;color:#717a86;line-height:1.5}
@media(max-width:920px){
  .hub-grid{grid-template-columns:1fr}
  .hub-panel{border-left:none;border-top:1px solid rgba(245,196,0,.25)}
  #hub-mapa{height:380px}
}

/* ---------- contadores ---------- */
.contadores{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea-luz);border:1px solid var(--linea-luz)}
.contadores div{background:var(--ink);padding:34px 26px;text-align:left}
.contadores strong{
  display:block;font-family:var(--display);font-weight:700;font-size:clamp(44px,6vw,72px);
  color:var(--amarillo);line-height:1;
}
.contadores .mono{color:#9aa3af;margin-top:10px;display:block}

/* ---------- banda defensa ---------- */
.banda-defensa{
  border:1px solid var(--linea-luz);padding:clamp(28px,4vw,48px);
  display:grid;grid-template-columns:1.3fr .7fr;gap:36px;align-items:center;
  background:
    repeating-linear-gradient(-45deg,transparent 0 14px,rgba(245,196,0,.05) 14px 15px);
}
.banda-defensa p{color:#aab2bd;max-width:58ch}

/* ---------- reconocimientos ---------- */
.recon{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.recon span{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--linea);padding:8px 12px;color:#444b55;
  border-left:3px solid var(--amarillo);
}

/* ---------- CTA final ---------- */
.cierre{position:relative;overflow:hidden}
.cierre .wrap{position:relative;z-index:2}
.cierre h2{max-width:16ch}
.cierre .acciones{margin-top:30px}

/* ---------- pie ---------- */
footer{background:#0a0d11;color:#8b9099;padding:48px 0 32px;border-top:1px solid var(--linea-luz)}
footer .arriba{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:center}
footer .marca span{font-size:15px}
footer nav{display:flex;gap:22px;flex-wrap:wrap}
footer nav a{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
footer nav a:hover{color:var(--amarillo)}
footer .abajo{
  margin-top:30px;padding-top:18px;border-top:1px solid rgba(242,239,232,.08);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12.5px;
}
footer .demo-sello{color:var(--amarillo)}

/* ---------- héroe interior (subpáginas) ---------- */
.heroe-sub{
  background:var(--ink);color:var(--bone);
  padding:150px 0 56px;position:relative;overflow:hidden;
}
.heroe-sub h1{font-size:clamp(40px,6.5vw,86px)}
.heroe-sub .baja{max-width:560px;margin-top:18px;color:#c9c5ba}

/* ---------- contacto ---------- */
.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px)}
.dato-contacto{padding:20px 0;border-bottom:1px solid var(--linea);display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap}
.dato-contacto b{font-family:var(--display);font-weight:600;font-size:20px;text-transform:uppercase}
.formulario label{display:block;margin-bottom:18px}
.formulario .mono{display:block;margin-bottom:7px;color:var(--gris)}
.formulario input,.formulario select,.formulario textarea{
  width:100%;background:transparent;border:1px solid var(--linea);
  padding:13px 14px;font-family:var(--texto);font-size:16px;color:var(--ink);
}
.formulario input:focus,.formulario select:focus,.formulario textarea:focus{
  outline:2px solid var(--amarillo);outline-offset:-1px;border-color:transparent;
}
.nota-wa{margin-top:14px;font-size:13.5px;color:#777e88}

/* ---------- revelado al hacer scroll ---------- */
.rev{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rev.visto{opacity:1;transform:none}
.rev-d1{transition-delay:.08s}.rev-d2{transition-delay:.16s}.rev-d3{transition-delay:.24s}

/* ---------- responsivo ---------- */
@media(max-width:920px){
  .cabeza{grid-template-columns:1fr;gap:16px}
  .rejilla{grid-template-columns:repeat(2,1fr)}
  .galeria{grid-template-columns:1fr 1fr}
  .nave{grid-template-columns:1fr}
  .nave.invertida{direction:ltr}
  .contacto-grid{grid-template-columns:1fr}
  .banda-defensa{grid-template-columns:1fr}
  .contadores{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .menu{
    position:fixed;top:64px;right:0;left:0;flex-direction:column;align-items:stretch;
    background:rgba(14,17,22,.98);padding:18px 20px;gap:4px;
    transform:translateY(-130%);transition:transform .3s ease;border-bottom:1px solid var(--linea-luz);
  }
  .menu.abierto{transform:none}
  .menu a{padding:13px 4px;border-bottom:1px solid rgba(242,239,232,.08)}
  .menu .cta{text-align:center;margin-top:10px}
  .burger{display:block}
  .fila{grid-template-columns:1fr;gap:6px}
  .rejilla{grid-template-columns:1fr}
  .galeria{grid-template-columns:1fr}
  .galeria img{height:300px}
  .pasos{grid-template-columns:1fr}
  .contadores{grid-template-columns:1fr}
  .hero-datos div{min-width:46%}
}