/* Monsivais Producciones — base SpaceX (orden de Diego, sesión 2026-07-24)
   Tipografía de titulares: Olga-Light (elección del socio).
   Sistema: heros de pantalla completa, esquinas 4px, botones translúcidos con
   borde, videos/fotos de fondo cover, motion sobrio (fade/rise .6s ease).
   Cero patrones de Grecia: sin navpill, sin cascadas, sin marquesinas. */

@font-face{
  font-family:'Olga';
  src:url('/fonts/Olga-Light.ttf') format('truetype');
  font-weight:300;
  font-display:swap;
}

:root{
  --negro:#000;
  --blanco:#f0f0fa;
  --gris:#a0a0aa;
  --linea:rgba(240,240,250,.35);
  --linea-suave:rgba(240,240,250,.14);
  --btn-bg:rgba(0,0,0,.5);
  --nav-h:72px;
  /* easing medido en spacex.com: easeOutExpo en 0.5s para hover y color */
  --expo:cubic-bezier(0.19,1,0.22,1);
  /* Ease-out suave para cruces de foto a sangre: sale con decisión y aterriza
     sin el frenazo tardío de `--expo`, que en una imagen de pantalla completa
     se siente como un tirón al final. */
  --cruce:cubic-bezier(.32,.72,.28,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  margin:0;
  background:var(--negro);
  color:var(--blanco);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  visibility:visible;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{-webkit-tap-highlight-color:transparent}

/* ---------- tipografía ---------- */
.titan{
  font-family:'Olga','Helvetica Neue',sans-serif;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.01em;
  /* Olga MIENTE en sus métricas: declara un ascendente de 0.69em cuando la tinta
     real de sus mayúsculas acentuadas sube 0.92em. El navegador reserva menos
     alto del que la letra ocupa y el titular termina encima de la etiqueta de
     arriba (y el acento rozando la línea anterior). Se corrige por tipografía y
     no hero por hero: interlínea con aire suficiente para los acentos, y el
     padding que la fuente no pide —en em, para que escale con el tamaño. */
  line-height:1.1;
  padding-top:.16em;
  margin:0;
}
.etq{
  font-size:12.5px;
  letter-spacing:.22em;
  text-indent:.22em;
  text-transform:uppercase;
  color:var(--blanco);
  opacity:.75;
  font-weight:400;
}

/* ---------- barra de navegación (plana, SpaceX) ---------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:60;
  height:var(--nav-h);
  display:flex;align-items:center;gap:34px;
  padding:0 clamp(20px,3.4vw,48px);
  background-color:transparent;
  transition:background-color .35s ease, translate .4s var(--expo);
}
/* EL DEGRADADO DE REPOSO VIVE EN SU PROPIA CAPA, Y EL FONDO SÓLIDO EN OTRA.
   No es adorno de arquitectura: es la única forma de que el cambio de fondo de
   esta barra se pueda ANIMAR. Diego reportó DOS VECES el mismo destello (4 y
   5-ago: *"se alcanza a transparentar durante un segundo al abrir la barra de
   secciones"*). La primera vez se leyó como un problema de velocidad y se bajó
   la transición de .35s a .16s; el destello siguió, porque nunca fue velocidad.
   Lo que pasaba de verdad, medido cuadro por cuadro en el navegador:
     14ms  bg-color rgba(0,0,0,0)     bg-image linear-gradient(.62 → 0)
     21ms  bg-color rgba(0,0,0,0)     bg-image NONE   ← el degradado se apaga de golpe
     28ms  bg-color rgba(0,0,0,.024)  bg-image none   ← y el color plano arranca en CERO
   `background-image` es una propiedad DISCRETA: no se interpola. Al pasar de un
   degradado a un color plano el degradado se apaga en un frame mientras
   `background-color` apenas empieza a subir desde transparente, así que durante
   ~50 ms la barra tiene MENOS fondo que en reposo —cero— y se ve el video crudo
   detrás. Escribir los dos estados como degradado quita el destello pero deja
   un salto seco (se comprobó: cambia de golpe, sin transición). Con dos capas
   las dos propiedades que se mueven SÍ son interpolables —`opacity` del velo y
   `background-color` de la barra— y se cruzan: en ningún instante hay menos
   fondo que en reposo. `opacity` además es composición, gratis (§7-bis). */
.topbar::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,0));
  transition:opacity .35s ease;
}
.topbar.solida{background-color:rgba(0,0,0,.92)}
/* Con un menú desplegado la barra toma EXACTAMENTE el fondo de la subbarra
   (.94, no .92) para que las dos lean como una sola pieza: con el degradado de
   reposo, el borde entre ambas se veía como una sombra dispareja. Y llega a la
   vez que ella: el menú entra en .16s y la barra tardaba .35s, más del doble.
   Solo se acelera la ENTRADA: al quitarse la clase vuelve a mandar la
   transición de `.topbar`, así que el regreso al degradado sigue siendo suave. */
.topbar.con-menu{
  background-color:rgba(0,0,0,.94);
  transition:background-color .16s ease, translate .4s var(--expo);
}
.topbar.solida::before,.topbar.con-menu::before{opacity:0}
/* `ease-in` NO ES ESTÉTICA: ES LO QUE PONE LA PÉRDIDA DE FONDO EN CERO.
   Dos capas arreglan el destello grande, pero con las dos curvas iguales (`ease`)
   el velo se apaga un pelo más rápido de lo que sube el color plano, y como el
   fondo compuesto es 1-(1-a)(1-b) —no una suma—, el cruce deja un hueco. Medido
   en el navegador, tercer reporte de Diego (5-ago), con control positivo válido:
     ease                    mínimo .597 contra .620 de reposo → pierde 2.3 puntos
     ease-in                 mínimo .620 → pierde 0
     cubic-bezier(.4,0,1,1)  mínimo .620 → pierde 0
   `ease-in` sostiene el velo alto durante los primeros cuadros, que es justo
   cuando `background-color` todavía va cerca de cero. La regla general para dos
   capas que se relevan: LA QUE SE VA SALE `ease-in`, LA QUE LLEGA ENTRA `ease` —
   con curvas simétricas siempre queda un valle en medio. */
.topbar.con-menu::before{transition:opacity .16s ease-in}
/* spacex esconde la barra al bajar y la devuelve al subir (clase header-hide) */
.topbar.oculta{translate:0 calc(-1 * var(--nav-h) - 6px)}
/* con la barra escondida, la sub-barra del hub sube a ocupar su lugar */
body.nav-oculta .subbarra{top:0}
.topbar .logo{
  position:absolute;left:50%;translate:-50% 0;
  display:grid;place-items:center;
}
.topbar .logo img{height:52px;width:auto;display:block}
@media (max-width:960px){
  .topbar .logo img{height:42px}
}
/* los links NO se estiran: así el logo centrado nunca los pisa */
.topbar .links{display:flex;align-items:center;gap:clamp(14px,2vw,30px);flex:0 1 auto;margin-right:auto}
.tb-lnk{
  position:relative;
  font-size:13px;letter-spacing:.09em;text-transform:uppercase;font-weight:400;
  color:var(--blanco);
  padding:26px 2px;
  opacity:.9;
  transition:opacity .2s ease;
  display:inline-flex;align-items:center;gap:8px;
  white-space:nowrap;
}
@media (hover:hover){.tb-lnk:hover{opacity:1}}
/* El grupo es un boton: se le quita el aspecto de control del navegador sin
   tocar la tipografia — 'font:inherit' le robaba a .tb-lnk su tamano y los
   grupos se veian mas grandes que Inicio y Contacto. */
.tb-grupo{
  appearance:none;-webkit-appearance:none;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:13px;letter-spacing:.09em;font-weight:400;
  text-transform:uppercase;color:var(--blanco);
}
.tb-lnk::after{
  content:"";position:absolute;left:0;right:100%;bottom:18px;height:1px;
  background:var(--blanco);transition:right .28s ease;
}
.tb-lnk.actual::after{right:0}
@media (hover:hover){.tb-lnk:hover::after{right:0}}
.tb-lnk .chev{width:10px;height:10px;opacity:.7;transition:rotate .2s ease}
.tb-lnk[aria-expanded="true"] .chev{rotate:180deg}

/* dropdown SpaceX LITERAL: lista de texto plana bajo el padre, sin caja */
.tb-menu{
  position:fixed;z-index:59;top:calc(var(--nav-h) - 10px);
  min-width:200px;
  padding:0;
  background:none;
  opacity:0;translate:0 -4px;pointer-events:none;
  transition:opacity .16s ease, translate .16s ease;
}
.tb-menu.abierto{opacity:1;translate:0 0;pointer-events:auto}
.tb-menu a{
  display:block;
  padding:7px 0;
  font-size:13px;letter-spacing:.09em;text-transform:uppercase;font-weight:400;
  color:var(--blanco);opacity:.85;
  text-shadow:0 2px 14px rgba(0,0,0,.95),0 0 4px rgba(0,0,0,.8);
  transition:opacity .15s ease;
}
@media (hover:hover){.tb-menu a:hover{opacity:1}}

/* CTA de barra (estilo UPCOMING LAUNCHES) */
.tb-cta{
  margin-left:auto;
  padding:11px 22px;
  border:1px solid rgba(240,240,250,.4);
  border-radius:6px;
  background:transparent;
  font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
  white-space:nowrap;
}
@media (hover:hover){.tb-cta:hover{background:var(--blanco);color:#000;border-color:var(--blanco)}}

/* hamburguesa móvil */
.tb-burger{display:none;width:44px;height:44px;place-items:center;margin-left:auto}
.tb-burger span{display:block;width:22px;height:2px;background:var(--blanco);margin:3px 0;transition:.25s ease}
.tb-burger[aria-expanded="true"] span:nth-child(1){translate:0 5px;rotate:45deg}
.tb-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.tb-burger[aria-expanded="true"] span:nth-child(3){translate:0 -5px;rotate:-45deg}

/* menú móvil de pantalla completa (SpaceX drawer) */
.tb-movil{
  position:fixed;inset:0;z-index:70;
  background:rgba(0,0,0,.97);
  padding:calc(var(--nav-h) + 12px) 30px 40px;
  overflow:auto;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.tb-movil.abierto{opacity:1;pointer-events:auto}
.tb-movil .grupo{margin-bottom:22px;border-bottom:1px solid var(--linea-suave);padding-bottom:16px}
.tb-movil .g-titulo{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--gris);margin-bottom:10px}
.tb-movil a{
  display:block;padding:9px 0;
  font-family:'Olga','Helvetica Neue',sans-serif;
  font-size:22px;letter-spacing:.06em;text-transform:uppercase;color:var(--blanco);
}
.tb-movil .cerrar{position:fixed;top:14px;right:16px;width:44px;height:44px;display:grid;place-items:center}

/* ---------- HERO de pantalla completa (bloque base de todo) ---------- */
.pantalla{
  position:relative;
  /* spacex mide 941px sobre un viewport de 900: la sección rebasa la pantalla
     lo justo para que se lea que hay más abajo */
  min-height:104svh;
  display:flex;align-items:flex-end;
  overflow:clip;
  isolation:isolate;
}
.pantalla.centrada{align-items:center;justify-content:center;text-align:center}
.pantalla-fondo{position:absolute;inset:0;z-index:-2}
.pantalla-fondo img,.pantalla-fondo video{
  width:100%;height:100%;object-fit:cover;
}
.pantalla-velo{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.05) 30%, rgba(0,0,0,.15) 60%, rgba(0,0,0,.78))}
.pantalla.centrada .pantalla-velo{background:rgba(0,0,0,.42)}
.pantalla-cont{
  position:relative;
  width:100%;
  padding:0 clamp(22px,5vw,84px) clamp(52px,9vh,110px);
  max-width:1900px;margin:0 auto;
}
.pantalla.centrada .pantalla-cont{padding-bottom:0;max-width:1100px}
.pantalla-cont .etq{display:block;margin-bottom:4px}
.pantalla-cont .titan{font-size:clamp(38px,4.6vw,64px);max-width:18ch}
.pantalla.centrada .titan{max-width:none;font-size:clamp(42px,5.6vw,78px)}
.pantalla-cont .sub{
  margin:18px 0 0;color:var(--blanco);opacity:.85;
  font-size:clamp(15px,1.25vw,18px);max-width:56ch;
}
.pantalla.centrada .sub{margin-inline:auto;letter-spacing:.14em;text-indent:.14em;text-transform:uppercase;font-size:clamp(12px,1vw,14px)}
.pantalla-cont .acciones{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.pantalla.centrada .acciones{justify-content:center}

/* botón SpaceX */
/* geometría medida en spacex.com: alto 50px, padding 0 20px, radio 4px,
   borde 1px rgba(240,240,250,.35), fondo negro .5, 16px sin tracking extra */
.btnx{
  display:inline-flex;align-items:center;gap:14px;
  height:50px;padding:0 20px;
  border:1px solid rgba(240,240,250,.35);
  border-radius:4px;
  background:rgba(105,105,110,.38);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  font-size:16px;letter-spacing:.02em;text-transform:uppercase;font-weight:500;
  color:#fff;
  transition:background-color .5s var(--expo),color .5s var(--expo),border-color .5s var(--expo);
}
@media (hover:hover){.btnx:hover{background:var(--blanco);color:#000;border-color:var(--blanco)}}
.btnx .flecha{width:18px;height:12px;flex:none;transition:translate .5s var(--expo)}
@media (hover:hover){.btnx:hover .flecha{translate:4px 0}}

/* sublinks de un hero (accesos de grupo) */
.sublinks{
  display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:26px;
}
.sublinks a{
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blanco);opacity:.65;
  padding:6px 0;position:relative;
  transition:opacity .2s ease;
}
.sublinks a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--blanco);transition:right .25s ease}
@media (hover:hover){.sublinks a:hover{opacity:1}}
@media (hover:hover){.sublinks a:hover::after{right:0}}

/* contador tipo T- de SpaceX (detalle de identidad) */
.tminus{
  font-variant-numeric:tabular-nums;
  font-size:13px;letter-spacing:.3em;color:var(--blanco);opacity:.6;
  margin-bottom:12px;display:block;text-transform:uppercase;
}

/* ---------- secciones de contenido (interiores) ---------- */
.bloque{padding:clamp(48px,6vw,84px) clamp(22px,5vw,84px);max-width:1900px;margin:0 auto}
.bloque-cab{margin-bottom:clamp(30px,4vw,56px)}
.bloque-cab .titan{font-size:clamp(28px,3.6vw,54px)}
.bloque-cab p{color:var(--gris);max-width:60ch;margin:14px 0 0}

/* rejilla de galería SpaceX: tarjetas 4px, caption abajo */
.rejilla{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));
  gap:22px;
}
.rejilla figure{
  margin:0;position:relative;
}
.rejilla .media{position:relative;aspect-ratio:16/10;overflow:clip;border-radius:4px}
.rejilla .media img,.rejilla .media video{width:100%;height:100%;object-fit:cover;transition:scale .5s ease}
@media (hover:hover){.rejilla figure:hover .media img,.rejilla figure:hover .media video{scale:1.03}}
.rejilla figcaption{
  padding:14px 2px 4px;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--blanco);
  display:flex;justify-content:space-between;gap:10px;align-items:baseline;
}
.rejilla .precio{font-variant-numeric:tabular-nums;color:var(--blanco);font-size:15px;white-space:nowrap}
.rejilla .espec{padding:2px 2px 8px;color:var(--gris);font-size:13.5px;line-height:1.5}
.rejilla figure.solo-foto figcaption{padding-bottom:10px}

/* reveal on scroll — vocabulario medido en spacex.com (24-jul):
   rise desde abajo con easing expo (0.19,1,0.22,1) y escalonado por jerarquía;
   allá el titular sube 220% de su altura, el subtítulo 80% y el botón 300%. */
.rev{
  opacity:0;translate:0 24px;
  transition:opacity .7s var(--expo), translate .7s var(--expo);
}
.rev.visto{opacity:1;translate:0 0}
/* jerarquía del hero: cada pieza entra con su propio recorrido y su retardo */
.pantalla-cont .etq.rev{translate:0 18px;transition-duration:.6s}
.pantalla-cont .titan.rev{translate:0 46px;transition-duration:.85s;transition-delay:.08s}
.pantalla-cont .sub.rev{translate:0 26px;transition-delay:.18s}
.pantalla-cont .acciones.rev,.pantalla-cont .carrusel.rev{translate:0 34px;transition-delay:.26s}
.pantalla-cont .titan.rev.visto,.pantalla-cont .sub.rev.visto,
.pantalla-cont .acciones.rev.visto,.pantalla-cont .carrusel.rev.visto{translate:0 0}

/* HERO FUGAZ (fichas de "Ver paquete", orden de Diego 26-jul): el rótulo se
   presenta, se lee tres segundos y se retira solo — sube, se difumina y se va,
   y el velo se abre para que la foto quede limpia. Vuelve si el visitante
   apunta al hero (lo arma cromo.js; sin JS el rótulo simplemente se queda). */
.pantalla.fugaz .pantalla-cont{
  transition:opacity .9s var(--expo), translate .9s var(--expo), filter .9s var(--expo);
}
.pantalla.fugaz.reposo .pantalla-cont{
  opacity:0;translate:0 -22px;filter:blur(7px);pointer-events:none;
}
.pantalla.fugaz .pantalla-velo{transition:opacity 1.1s var(--expo)}
.pantalla.fugaz.reposo .pantalla-velo{opacity:.18}

/* ---------- lightbox (recuadro 4px, fade rápido) ---------- */
.lb{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  background:rgba(0,0,0,.94);
  opacity:0;pointer-events:none;transition:opacity .22s ease;
}
.lb.abierto{opacity:1;pointer-events:auto}
.lb img{
  max-width:min(95vw,1600px);max-height:84svh;border-radius:4px;
  opacity:0;transition:opacity .25s ease;
}
.lb.abierto img{opacity:1}
.lb .lb-cap{
  position:absolute;bottom:24px;left:50%;translate:-50% 0;
  font-size:12.5px;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:var(--gris);
  max-width:90vw;text-align:center;
}
.lb button{
  position:absolute;display:grid;place-items:center;
  width:46px;height:46px;border-radius:4px;
  border:1px solid var(--linea-suave);background:var(--btn-bg);
  transition:background .2s ease;
}
@media (hover:hover){.lb button:hover{background:rgba(240,240,250,.14)}}
.lb .lb-x{top:20px;right:20px}
.lb .lb-ant{left:16px;top:50%;translate:0 -50%}
.lb .lb-sig{right:16px;top:50%;translate:0 -50%}
.lb svg{width:18px;height:18px}

/* ---------- confían (nombres reales, estático y sobrio) ---------- */
.confian{border-top:1px solid var(--linea-suave);border-bottom:1px solid var(--linea-suave)}
.confian .lista{
  display:flex;flex-wrap:wrap;gap:14px clamp(28px,4vw,60px);
  justify-content:center;
  /* Diecisiete marcas a todo lo ancho repartían 8+7+2 y esa última fila de dos
     colgaba suelta bajo las otras. Acotada reparte 7+5+5. Mismo criterio y
     mismo valor que las tiras de sección, que tenían el mismo defecto. */
  max-width:1120px;margin-inline:auto;
}
.confian{padding-block:clamp(36px,4vw,56px)}
.confian .lista span{
  font-size:13px;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:var(--gris);
  white-space:nowrap;
}

/* ---------- contacto ---------- */
.cont-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,64px);align-items:start}
.cont-datos .fila{padding:22px 0;border-bottom:1px solid var(--linea-suave)}
.cont-datos .fila:first-child{padding-top:0}
.cont-datos .etq{display:block;margin-bottom:8px;font-size:11.5px}
/* El dato de contacto pesaba mas que el parrafo que lo acompana en la misma
   pestana —20px contra 16— y se leia como si fuera un titular (Diego, 3-ago).
   Baja al cuerpo de la pagina: es informacion, no jerarquia. */
.cont-datos .valor{font-size:clamp(15.5px,1.15vw,16.5px);color:var(--blanco)}
@media (hover:hover){.cont-datos .valor a:hover{opacity:.8}}
.cont-mapa{border-radius:4px;overflow:clip;border:1px solid var(--linea-suave);position:relative;min-height:400px}
.cont-mapa iframe{width:100%;height:100%;min-height:400px;border:0;display:block;filter:invert(.92) hue-rotate(180deg) saturate(.35) brightness(.92)}
.cont-mapa .como{
  position:absolute;left:14px;bottom:14px;
  padding:11px 20px;border-radius:4px;border:1px solid var(--linea);background:rgba(0,0,0,.7);
  font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--blanco);
  transition:background .2s ease,color .2s ease;
}
@media (hover:hover){.cont-mapa .como:hover{background:var(--blanco);color:#000}}

/* formulario (SpaceX sobrio: campos con línea) */
.cont-form{margin-top:clamp(50px,7vw,90px);max-width:720px}
.campo{margin-bottom:22px}
.campo label{display:block;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--gris);margin-bottom:9px}
.campo input,.campo textarea{
  width:100%;padding:13px 14px;
  border:1px solid var(--linea-suave);border-radius:4px;
  background:rgba(240,240,250,.04);color:var(--blanco);
  font:inherit;font-size:15.5px;outline:none;
  transition:border-color .2s ease, background .2s ease;
}
.campo input:focus,.campo textarea:focus{border-color:var(--linea);background:rgba(240,240,250,.07)}
.campo textarea{min-height:130px;resize:vertical}
.campo .campo-error{display:none;color:#ff5a5a;font-size:13px;margin-top:6px;letter-spacing:.02em}
.campo.error input,.campo.error textarea{border-color:#ff5a5a}
.campo.error .campo-error{display:block}
.campo.error label{color:#ff5a5a}

/* ---------- footer (SpaceX minimal) ---------- */
footer{border-top:1px solid var(--linea-suave);padding:44px clamp(22px,5vw,84px) 60px;max-width:1900px;margin:0 auto}
.foot-links{display:flex;flex-wrap:wrap;gap:10px clamp(18px,2.6vw,38px);justify-content:center;margin-bottom:26px}
.foot-links a{
  font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris);
  transition:color .2s ease;
}
@media (hover:hover){.foot-links a:hover{color:var(--blanco)}}
.foot-base{text-align:center;color:var(--gris);font-size:12.5px;letter-spacing:.06em}
.foot-base a{color:var(--blanco)}

/* ---------- La firma de quien lo construyó (12-ago) ----------
   Renglón propio al final del pie, debajo de las redes.

   MISMO cuerpo que el copyright del cliente —12.5px, no 11.5— por corrección de
   Diego al verlo en vivo: achicarla la volvía una nota al pie de la nota al
   pie, y en un renglón que ya vive apartado y al final, el orden solo basta
   para decir que es de otra empresa. La jerarquía la da la POSICIÓN.
   Subrayado solo el nombre, que es lo único que se pica. */
.foot-firma{text-align:center;color:var(--gris);font-size:12.5px;letter-spacing:.06em;margin-top:24px}
.foot-firma a{
  color:var(--gris);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;transition:color .2s ease;
}
@media (hover:hover){.foot-firma a:hover{color:var(--blanco)}}

/* ---------- Las redes (5-ago) ----------
   El dibujo mide 19px y el área que se toca mide 44: el blanco táctil lo pone
   un pseudo-elemento en vez de engordar el enlace, que es la misma técnica con
   la que se arregló la tira de secciones (si se agranda el enlace, el hueco
   entre iconos se dispara y la fila deja de leerse como un grupo).
   Se anima `color` y nada más: son tres glifos de 19px —superficie mínima—, así
   que el repintado no cuesta nada y es lo mismo que ya hace el resto de los
   enlaces del sitio (§7-bis). */
.redes{display:flex;justify-content:center;align-items:center;gap:26px;margin-top:22px}
.redes a{
  color:var(--gris);display:inline-flex;position:relative;
  transition:color .35s var(--expo);
}
.redes svg{width:21px;height:21px;display:block}
/* AJUSTE ÓPTICO, NO MATEMÁTICO: los tres dibujos miden la misma caja, pero el
   de YouTube es un rectángulo ancho que solo ocupa 13 de sus 24 unidades de
   alto, mientras el cuadrado de Instagram y la «f» ocupan 20. Con el mismo
   `width` los tres, YouTube se ve más chico que sus hermanos. Se le dan dos
   píxeles para que los tres PESEN igual, que es lo que el ojo compara. */
.redes [data-red="youtube"] svg{width:23px;height:23px}
.redes a::before{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:44px;height:44px;
}
@media (hover:hover){.redes a:hover{color:var(--blanco)}}
/* En la ficha de contacto la fila se lee de izquierda a derecha con las demás
   (Dirección, Teléfono), así que ahí no van centradas ni llevan aire arriba. */
.redes-datos{justify-content:flex-start;gap:22px;margin-top:2px}
body.claro .redes a{color:#3a3a44}
@media (hover:hover){body.claro .redes a:hover{color:#0b0b0f}}

/* ---------- móvil ---------- */
@media (max-width:1080px){
  .topbar .links,.topbar .tb-cta{display:none}
  .tb-burger{display:grid}
  /* lupa y hamburguesa juntas a la derecha: con los links ocultos, dos
     margin-left:auto se repartían el hueco y la lupa caía sobre el logo */
  .tb-lupa{margin-left:auto}
  .tb-burger{margin-left:4px}
  .pantalla-cont .titan{font-size:clamp(34px,9.5vw,54px)}
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(min(46vw,300px),1fr));gap:12px}
  .cont-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pantalla{min-height:96svh}
  .campo input,.campo textarea{font-size:16px}
  .rejilla{grid-template-columns:1fr 1fr}
  .rejilla .media{aspect-ratio:4/3}
  .lb .lb-ant,.lb .lb-sig{display:none}
  .pantalla{min-height:92svh}
}
@media (hover:none){
  @media (hover:hover){.rejilla figure:hover .media img{scale:1}}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .rev{opacity:1;translate:0 0}
  /* el rótulo del hero SÍ se retira aquí también —es el punto de la pieza: dejar
     ver la foto— pero desvaneciendo, sin desplazarse ni desenfocarse, y despacio
     para que no sea un corte seco */
  .pantalla.fugaz .pantalla-cont,
  .pantalla.fugaz .pantalla-velo{transition-duration:.9s !important;transition-property:opacity !important}
  .pantalla.fugaz.reposo .pantalla-cont{translate:0 0;filter:none}
}


/* ---------- carrusel deslizable dentro de secciones grandes ---------- */
.carrusel{
  display:flex;gap:18px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding:26px 2px 8px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.carrusel::-webkit-scrollbar{display:none}
.carrusel .c-item{
  flex:0 0 clamp(230px,24vw,360px);
  scroll-snap-align:start;
}
.carrusel .c-item .media{
  aspect-ratio:16/10;overflow:clip;border-radius:4px;position:relative;
}
.carrusel .c-item img,.carrusel .c-item video{width:100%;height:100%;object-fit:cover;transition:scale .5s ease}
@media (hover:hover){.carrusel .c-item:hover img{scale:1.04}}
.carrusel .c-item .c-cap{
  margin-top:12px;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--blanco);
  display:flex;align-items:center;gap:10px;
}
.carrusel .c-item .c-cap svg{width:14px;height:10px;opacity:.6;transition:translate .2s ease,opacity .2s ease}
@media (hover:hover){.carrusel .c-item:hover .c-cap svg{translate:4px 0;opacity:1}}
@media (max-width:640px){
  .carrusel .c-item{flex-basis:74vw}
}


/* velo al abrir menu (SpaceX): oscurece el hero para que el menu lea */
.velo-menu{
  position:fixed;inset:0;z-index:58;pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.96) 0%, rgba(0,0,0,.82) 30%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 75%);
  opacity:0;transition:opacity .22s ease;
}
.velo-menu.activo{opacity:1}


/* ---------- SLIDER pantalla completa (Starship): flechas, puntos, info flotante ---------- */
.slider{position:relative;min-height:100svh;overflow:clip;isolation:isolate}
.slide{
  position:absolute;inset:0;
  opacity:0;pointer-events:none;
  transition:opacity .55s ease;
  display:flex;align-items:flex-end;
}
.slide.activa{opacity:1;pointer-events:auto}
.slide-fondo{position:absolute;inset:0;z-index:-2}
.slide-fondo img,.slide-fondo video{width:100%;height:100%;object-fit:cover}
.slide-velo{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 34%, rgba(0,0,0,.08) 62%),
  linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%)}
.slide-info{
  position:relative;width:100%;max-width:1900px;margin:0 auto;
  padding:calc(var(--nav-h) + 40px) clamp(22px,5vw,84px) clamp(90px,12vh,150px);
}
.slide-info .etq{display:block;margin-bottom:6px}
.slide-info h2{font-family:'Olga','Helvetica Neue',sans-serif;font-weight:300;text-transform:uppercase;
  font-size:clamp(30px,3.6vw,52px);line-height:1.05;margin:0 0 10px;max-width:16ch}
.filas-spec{max-width:560px;margin-top:18px}
.fila-spec{
  display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid rgba(240,240,250,.28);
  font-size:15px;color:var(--blanco);
}
.fila-spec .fs-l{text-transform:uppercase;letter-spacing:.04em;font-size:13.5px;color:rgba(240,240,250,.85)}
.fila-spec .fs-v{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500}
.fila-spec.precio .fs-v{font-size:19px}
.slide-info .acciones{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

.sl-flecha{
  position:absolute;top:50%;translate:0 -50%;z-index:5;
  width:64px;height:64px;display:grid;place-items:center;
  color:var(--blanco);opacity:.85;transition:opacity .2s ease, translate .2s ease;
}
@media (hover:hover){.sl-flecha:hover{opacity:1}}
.sl-flecha svg{width:26px;height:44px}
.sl-ant{left:clamp(6px,1.6vw,28px)}
.sl-sig{right:clamp(6px,1.6vw,28px)}
.sl-puntos{
  position:absolute;left:50%;translate:-50% 0;bottom:26px;z-index:5;
  display:flex;gap:12px;
}
.sl-puntos button{
  flex:0 0 auto;padding:0;appearance:none;-webkit-appearance:none;
  width:9px;height:9px;min-width:9px;aspect-ratio:1;border-radius:999px;
  background:rgba(240,240,250,.35);
  transition:background .25s ease, scale .25s ease;
}
.sl-puntos button.activa{background:#fff;scale:1.15}

/* ---------- features con iconos (grid 2x2 SpaceX) ---------- */
/* «Por qué Monsivais» respiraba como una sección de portada —hasta 84px arriba
   y abajo— y son cuatro renglones de texto sobre negro: el aire de más se lee
   como hueco, no como respiro (Diego, 4-ago). */
.bloque:has(.features){padding-block:clamp(34px,3.6vw,54px)}
.features{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,70px) clamp(50px,7vw,120px);max-width:1500px;margin:0 auto}
.feature{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start}
.feature svg{width:34px;height:34px;opacity:.9}
.feature h3{margin:0 0 8px;font-size:17px;letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.feature p{margin:0;color:var(--gris);font-size:15px;line-height:1.6}
@media (max-width:820px){.features{grid-template-columns:1fr}}
@media (max-width:640px){.sl-flecha{display:none}.slide-info h2{font-size:clamp(26px,7vw,34px)}.slider,.slide{min-height:96svh}}


/* slides sin media propia: textura de la seccion difuminada, nunca negro seco */
.slide-fondo.difusa img{filter:blur(18px) brightness(.38) saturate(.8);scale:1.15}
/* fotos en slides: paneo lento para que respiren como video */


/* texto legible por sombra propia (la foto queda limpia) */
.slide-info .etq,.slide-info h2{text-shadow:0 2px 18px rgba(0,0,0,.85),0 0 4px rgba(0,0,0,.6)}
.fila-spec{text-shadow:0 1px 10px rgba(0,0,0,.85)}
.fila-spec{border-bottom-color:rgba(240,240,250,.45)}
/* inicio: titulos y descripciones con sombra fuerte (permitido) */
.pantalla-cont .titan,.pantalla-cont .sub,.pantalla-cont .etq,.tminus{text-shadow:0 2px 20px rgba(0,0,0,.9),0 0 6px rgba(0,0,0,.6)}

/* producto PNG transparente: contain centrado sobre fondo carbon, sin velo */
.slide-fondo.producto{display:grid;place-items:center;background:#131316}
.slide-fondo.producto img{width:auto;height:auto;max-width:min(72vw,900px);max-height:70svh;object-fit:contain}
.slide.activa .slide-fondo.producto img{animation:none}
.carrusel .c-item .media.producto{display:grid;place-items:center;background:#131316}
.carrusel .c-item .media.producto img{width:auto;height:76%;max-width:82%;object-fit:contain}

/* sub-barra sticky de secciones (hubs) */
.subbarra{
  position:sticky;top:var(--nav-h);z-index:40;
  transition:top .4s var(--expo);
  display:flex;gap:6px;justify-content:center;align-items:center;
  padding:10px clamp(20px,3.4vw,48px);
  background:rgba(0,0,0,.92);
  border-bottom:1px solid var(--linea-suave);
  overflow-x:auto;scrollbar-width:none;
}
.subbarra::-webkit-scrollbar{display:none}
.subbarra a{
  padding:8px 14px;white-space:nowrap;
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);
  border-radius:4px;transition:color .2s ease,background .2s ease;
}
.subbarra a.activa{color:#fff;background:rgba(240,240,250,.1)}
@media (hover:hover){.subbarra a:hover{color:#fff;background:rgba(240,240,250,.1)}}
.hub-cab{padding:clamp(40px,5vw,64px) clamp(22px,5vw,84px) 6px;max-width:1900px;margin:0 auto}
.hub-cab .titan{font-size:clamp(24px,2.6vw,38px)}

/* buscador (lupa fija en topbar) */
.tb-lupa{width:42px;height:42px;display:grid;place-items:center;border-radius:4px;transition:background .2s ease;margin-left:auto}
@media (hover:hover){.tb-lupa:hover{background:rgba(240,240,250,.1)}}
.tb-lupa svg{width:19px;height:19px}
.tb-lupa + .tb-cta{margin-left:14px}
.busq{
  position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.95);
  padding:calc(var(--nav-h) + 30px) clamp(22px,14vw,300px) 40px;
  opacity:0;pointer-events:none;transition:opacity .2s ease;overflow:auto;
}
.busq.abierta{opacity:1;pointer-events:auto}
/* El campo de búsqueda es una HERRAMIENTA, no un titular (28-jul, orden de
   Diego). Llevaba la tipografía display a 34px y en mayúsculas forzadas: el
   marcador de posición no cabía —se cortaba en "BUSCAR SERVICIO, EVENT…"— y lo
   que uno escribía salía como un rótulo de cartel en vez de como texto en un
   campo. Olga es de titular; en un campo funcional pierde legibilidad justo
   cuando más hace falta, que es mientras se teclea.
   Sin `uppercase`: quien busca escribe como escribe, y forzar mayúsculas
   además impedía distinguir un nombre propio del resto. Vale para escritorio
   igual que para móvil — era la misma regla en los dos. */
.busq input{
  width:100%;padding:14px 4px;background:none;border:0;border-bottom:1px solid var(--linea);
  color:#fff;font-size:clamp(17px,1.5vw,20px);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  outline:none;letter-spacing:.01em;
}
.busq input::placeholder{color:var(--gris);opacity:.7}
.busq .b-nota{color:var(--gris-2);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;margin-top:10px}
.busq .b-res{margin-top:26px}
.busq .b-res a{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:13px 4px;border-bottom:1px solid var(--linea-suave);
  color:var(--blanco);font-size:16px;transition:background .15s ease;
}
@media (hover:hover){.busq .b-res a:hover{background:rgba(240,240,250,.06)}}
.busq .b-res .b-tipo{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-2);white-space:nowrap}
.busq .cerrar{position:fixed;top:16px;right:18px;width:44px;height:44px;display:grid;place-items:center}


/* rotulo de seccion superpuesto dentro del slider (hubs sin franjas negras) */
.sec-rotulo{
  position:absolute;z-index:6;
  top:calc(var(--nav-h) + 56px);left:clamp(22px,5vw,84px);
  pointer-events:none;
}
.sec-rotulo .etq{display:block;margin-bottom:4px;text-shadow:0 2px 14px rgba(0,0,0,.9)}
.sec-rotulo .titan{font-size:clamp(22px,2.4vw,34px);text-shadow:0 2px 18px rgba(0,0,0,.9)}
.hub .slider{border-top:1px solid rgba(240,240,250,.08)}

/* carrusel del inicio: auto-deslizable tipo marquesina (pausa al interactuar) */
.carrusel.auto{scroll-snap-type:none}


/* ---------- MODO ESTRUCTURA: huecos donde van foto/video ----------
   Reservan exactamente el mismo volumen que el medio definitivo. Tono de la
   marca (luz sobre negro), sin texto ni recuadro duro: se lee como espacio
   pendiente, no como error de carga. Se retiran solos al reactivar los medios. */
.hueco{
  position:absolute;inset:0;width:100%;height:100%;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(240,240,250,.10), transparent 60%),
    linear-gradient(155deg, #0d0d11 0%, #16161c 46%, #0a0a0e 100%);
}
.hueco::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,
    rgba(240,240,250,.035) 0 1px, transparent 1px 11px);
}
.rejilla .media .hueco,.carrusel .c-item .media .hueco{position:absolute}
/* fondos de pantalla completa: respiración lenta para que el hero no se sienta muerto */
.hueco-fondo{
  background:
    radial-gradient(90% 70% at 50% 30%, rgba(240,240,250,.09), transparent 65%),
    linear-gradient(165deg, #0b0b0f 0%, #17171e 52%, #08080b 100%);
  animation:huecovivo 16s ease-in-out infinite alternate;
}
/* a pantalla completa, sin trama: negro con degradado, como spacex sin video */
.hueco-fondo::after{display:none}
@keyframes huecovivo{from{opacity:.88;scale:1}to{opacity:1;scale:1.03}}
.pantalla-fondo .hueco,.slide-fondo .hueco{position:absolute}
@media (prefers-reduced-motion:reduce){.hueco-fondo{animation:none}}


/* ---------- móvil: blancos táctiles (verificado con Playwright a 393px) ----------
   En pantalla táctil todo lo que se toca necesita ~44px de área aunque el
   dibujo sea chico; el área se agranda con un pseudo-elemento, no engordando
   el control (el punto debe SEGUIR viéndose de 9-12px). */
@media (pointer:coarse){
  /* en táctil se navega con swipe (ya cableado en cromo.js): los puntos son
     INDICADOR de posición, no el blanco principal — por eso no se agrandan.
     La fila nunca debe rebasar la pantalla: hay páginas de 27 slides. */
  .sl-puntos{
    gap:8px;bottom:22px;
    max-width:calc(100vw - 44px);overflow-x:auto;scrollbar-width:none;
  }
  .sl-puntos::-webkit-scrollbar{display:none}
  .sl-puntos button{width:8px;height:8px;min-width:8px}
  .subbarra a{min-height:44px;display:inline-flex;align-items:center}
  .topbar .logo{display:inline-flex;align-items:center;min-height:44px;padding-right:8px}
  .cont-datos a[href^="tel:"],.cont-datos a[href^="mailto:"]{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .cont-datos .etq{font-size:12.5px}
  .foot-links a{display:inline-flex;align-items:center;min-height:40px}
}


/* ---------- PESTAÑAS por subtipo (patrón "Our Missions" de spacex.com) ----------
   Media grande a la izquierda con la galería del subtipo activo; a la derecha
   título, intro, pestañas y la descripción del tipo. Se usa donde CADA subtipo
   tiene varias fotos; lo de una foto por ítem sigue con el slider. */
.pestanas{
  position:relative;min-height:104svh;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:center;gap:clamp(24px,4vw,64px);
  padding:calc(var(--nav-h) + 40px) clamp(22px,5vw,84px) clamp(48px,7vh,90px);
  max-width:1900px;margin:0 auto;
}
.pt-media{position:relative;width:100%}
.pt-galeria{
  position:relative;width:100%;overflow:clip;border-radius:4px;
  display:none;background:#0b0b0f;
}
.pt-galeria.activa{display:block}
.pt-lamina{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--expo)}
.pt-lamina.activa{opacity:1}
.pt-lamina img,.pt-lamina .hueco{width:100%;height:100%;object-fit:cover}
.pt-flecha{
  position:absolute;top:50%;translate:0 -50%;z-index:3;
  width:46px;height:64px;display:grid;place-items:center;
  color:#fff;opacity:.55;transition:opacity .3s var(--expo);
}
@media (hover:hover){.pt-flecha:hover{opacity:1}}
.pt-flecha svg{width:20px;height:34px}
.pt-ant{left:6px}
.pt-sig{right:6px}
.pt-cuenta{
  position:absolute;right:14px;bottom:12px;z-index:3;
  font-size:12.5px;letter-spacing:.14em;color:var(--blanco);
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 10px rgba(0,0,0,.9);
}
.pt-panel{min-width:0}
.pt-panel .titan{font-size:clamp(34px,3.6vw,54px);margin:0}
.pt-intro{margin:16px 0 0;color:var(--gris);font-size:clamp(15px,1.15vw,17px);max-width:52ch;line-height:1.65}
.pt-tabs{display:flex;flex-wrap:wrap;gap:8px 26px;margin:34px 0 0;padding-bottom:2px}
.pt-tab{
  position:relative;padding:6px 0;
  font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:400;
  color:var(--gris);
  transition:color .5s var(--expo);
}
@media (hover:hover){.pt-tab:hover{color:var(--blanco)}}
.pt-tab.activa{color:var(--blanco)}
.pt-tab::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--blanco);transition:right .35s var(--expo);
}
.pt-tab.activa::after{right:0}
.pt-cuerpos{position:relative;margin-top:26px;border-top:1px solid var(--linea-suave);padding-top:24px}
.pt-cuerpo{display:none}
.pt-cuerpo.activa{display:block;animation:ptentra .55s var(--expo) both}
@keyframes ptentra{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
.pt-desc{margin:0;font-size:clamp(15px,1.15vw,17px);line-height:1.7;max-width:52ch;color:var(--blanco)}
.pt-cuerpo .acciones{margin-top:30px}
@media (max-width:1000px){
  .pestanas{grid-template-columns:1fr;min-height:auto;align-content:start;gap:28px}
  .pt-panel .titan{font-size:clamp(28px,7vw,40px)}
  .pt-tabs{gap:6px 20px;margin-top:24px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .pt-tabs::-webkit-scrollbar{display:none}
  .pt-tab{white-space:nowrap}
}
@media (pointer:coarse){.pt-flecha{width:56px;height:72px;opacity:.8}}


/* ---------- BARRITA de sección (hover en el grupo de la barra) ----------
   Sustituye a la lista vertical: fila horizontal centrada bajo la topbar con
   todas las secciones del grupo; la de la página actual va en recuadro.
   Cada una es su propia página (orden de Diego, 24-jul). */
.tb-menu.barrita{
  left:0;right:0;top:var(--nav-h);
  min-width:0;width:100%;
  /* LAS SECCIONES QUE NO CABEN BAJAN A OTRA FILA, CENTRADAS — no se aprietan ni
     se salen (Diego, 4-ago, al añadir «Test» desde el panel y quedar diez).
     Medido antes del cambio: con diez secciones a 1440px el primer enlace
     empezaba en x=-14 y el último terminaba en 1455, o sea que los dos extremos
     quedaban fuera de la pantalla y solo se alcanzaban arrastrando una barra de
     scroll que además está oculta. Nadie iba a encontrarlos.
     Esto crece solo: el menú se arma con las páginas del contenido, así que
     cada sección nueva que publique el panel entra aquí sin tocar nada. */
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:6px clamp(10px,2vw,34px);
  padding:14px clamp(16px,3vw,40px);
  background:rgba(0,0,0,.94);
  border-bottom:1px solid var(--linea-suave);
  translate:0 -8px;

  /* ENTRA COMO CORTINA, NO DESVANECIÉNDOSE (Diego, 5-ago, segunda vuelta).
     El arreglo anterior igualó la velocidad de la BARRA de arriba y aun así
     «se alcanza a transparentar» — porque el traslúcido no venía de la barra,
     venía de aquí: `.tb-menu` anima `opacity` de 0 a 1, y esta subbarra hereda
     esa animación. Su fondo es rgba(0,0,0,.94), pero durante los .16s de
     entrada la opacidad del ELEMENTO lo multiplica: a mitad del recorrido el
     fondo real es .47 y el video de atrás se ve a través. No era un desfase de
     tiempos: era que la pieza opaca pasa por traslúcida para llegar a existir.
     Aquí no se desvanece: se descubre. La opacidad queda fija en 1 y lo que
     anima es el recorte, así que el fondo es .94 desde el primer cuadro hasta
     el último. `clip-path` y `translate` son las dos únicas propiedades que
     cambian, ambas del compositor (cerebro-interfaces §7-bis). */
  opacity:1;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .16s ease, translate .16s ease;
}
.tb-menu.barrita::-webkit-scrollbar{display:none}
.tb-menu.barrita.abierto{translate:0 0;clip-path:inset(0 0 0 0)}
.tb-menu.barrita a{
  padding:8px 14px;border-radius:4px;white-space:nowrap;
  font-size:13px;letter-spacing:.09em;text-transform:uppercase;font-weight:400;
  color:var(--gris);opacity:1;text-shadow:none;
  transition:color .5s var(--expo), background .5s var(--expo);
}
@media (hover:hover){.tb-menu.barrita a:hover{color:var(--blanco);background:rgba(240,240,250,.08)}}
.tb-menu.barrita a.actual{color:var(--blanco);background:rgba(240,240,250,.14)}
body.nav-oculta .tb-menu.barrita{top:0}
@media (max-width:960px){.tb-menu.barrita{display:none}}


/* ---------- TRAMO: un ítem por pantalla (patrón /humanspaceflight/moon) ----------
   Sustituye al slider compacto en las páginas de sección: cada paquete, equipo
   o montaje ocupa su propia pantalla y se navega con scroll. */
.tramo{
  position:relative;min-height:100svh;
  display:flex;align-items:flex-end;
  overflow:clip;isolation:isolate;
}
/* EL FONDO NO LLEVA `z-index` NEGATIVO, y esa ausencia es el arreglo.
   Los controles de la galería —flechas y contador— viven DENTRO del fondo (ver
   `tramoSlide` en el generador: en móvil la foto es una banda con alto propio y
   anclarlos al tramo los tiraría sobre el texto). Con el fondo en `z-index:-2`,
   ese `-2` abre un contexto de apilamiento propio y ENCIERRA a sus hijos: el
   `z-index:4` del contador solo compite contra sus hermanos, nunca contra el
   velo, que es hermano del fondo en `-1` y pinta encima de todo el subárbol.
   Resultado: el «1 / 7» se leía apagado, como bajo la sombra.
   Diego lo reportó el 4-ago y se arregló SOLO en el bloque móvil —ahí el fondo
   es `position:relative` sin capa propia y por eso allí sí funcionó—; en
   escritorio siguió roto hasta el 10-ago.
   Sin capa en el fondo, sus hijos suben al contexto de `.tramo` y el orden
   vuelve a ser el natural: foto, velo, contenido, controles encima de todo.
   FIRMA de que volvió: un control DENTRO de una foto con velo se ve apagado y
   subirle el `z-index` no cambia nada. */
.tramo-fondo{position:absolute;inset:0}
.tramo-fondo img,.tramo-fondo video,.tramo-fondo .hueco{width:100%;height:100%;object-fit:cover}
.tramo-velo{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.05) 26%, rgba(0,0,0,.35) 62%, rgba(0,0,0,.86))}
.tramo-cont{
  /* `z-index:2` explícito, no orden del DOM: el velo ya no es negativo, y un
     hermano posterior SIN capa se pinta por debajo de cualquier hermano con
     capa positiva. Sin esta línea el texto y los botones quedarían bajo la
     sombra que se puso para que se leyeran. */
  position:relative;z-index:2;width:100%;
  max-width:1900px;margin:0 auto;
  padding:0 clamp(22px,5vw,84px) clamp(56px,9vh,110px);
}
/* El rótulo, el título y el precio viajan juntos en `.tramo-texto` para poder
   moverlos como un bloque SIN arrastrar los botones (lo pide el móvil, ver
   abajo). En escritorio no debe cambiar nada, y por eso es `display:contents`:
   la caja desaparece y sus hijos siguen siendo hijos de `.tramo-cont`, con la
   misma maquetación que tenían antes de existir. */
.tramo-texto{display:contents}
.tramo-cont .titan{font-size:clamp(30px,3.4vw,48px);margin:10px 0 0;max-width:20ch}
.tramo-precio{
  margin:14px 0 0;font-size:clamp(20px,1.9vw,26px);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.tramo-cont .filas-spec{margin-top:22px;max-width:660px}
.tramo-cont .acciones{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
@media (max-width:640px){
  .tramo{min-height:92svh}
  .tramo-cont .titan{font-size:clamp(26px,7vw,34px)}
}

/* entre 960 y 1300 la fila de links se acerca al logo centrado: se aprieta un
   poco todo para que nunca lo toque (verificado a 1000/1100/1280 px) */
@media (max-width:1300px){
  .topbar .logo img{height:42px}
  .topbar .links{gap:13px}
  .tb-lnk{font-size:12.5px;letter-spacing:.07em}
  .tb-cta{padding:10px 16px;font-size:12.5px;letter-spacing:.1em}
}
@media (max-width:1080px){
  .topbar .logo img{height:36px}
  .topbar .links{gap:11px}
  .tb-lnk{font-size:12px}
}


/* ---------- FICHA: la media abarca la ALTURA del slide (patrón "Why the Moon?")
   Cada ítem ocupa una pantalla; la foto va a sangre por su lado, de arriba a
   abajo — nunca flotando sobre el negro — y la información al otro lado. */
.ficha{
  position:relative;
  min-height:100svh;
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  align-items:stretch;
  background:var(--negro);
}
.ficha-media{
  position:relative;height:100%;min-height:100svh;
  overflow:clip;background:#0b0b0f;
}
.ficha-media img,.ficha-media video,.ficha-media .hueco{width:100%;height:100%;object-fit:cover}
/* La foto se funde CUANDO LLEGA, no cuando el cuadro entra en pantalla.
   El reveal del contenedor dura 600ms; una foto pesada puede tardar segundos
   más, y entonces el cuadro terminaba su animación vacío y la imagen aparecía
   de golpe encima —se veía en truss, cuyas fotos pesan 4x que los PNG del resto
   de equipos—. Atado al evento `load`, el fundido ocurre siempre, con la red
   que sea.
   Va bajo `html.js`: la clase la pone el propio script al arrancar, así que si
   el JS no corre, las fotos se ven normales en vez de quedarse invisibles.
   Es ANIMACIÓN y no `transition` a propósito. Una transición necesita que el
   navegador haya PINTADO el valor de partida para tener desde dónde animar, y
   con la página en caché eso no está garantizado: se midió en producción, seis
   visitas seguidas a energía, y en cuatro la opacidad saltaba de 0 a 1 sin un
   solo fotograma intermedio aunque la clase entrara en el cuadro correcto. Una
   `@keyframes` declara su propio origen y corre siempre, con caché o sin ella.

   VALE PARA TODA FOTO DEL SITIO, no solo para las fichas de equipos (medido el
   29-jul en las 22 páginas: las 5 de equipos fundían el 100% de sus fotos y las
   17 de servicios y eventos el 0% — porque el arreglo se había atado al
   contenedor que Diego señaló, `.ficha-media`, y el resto del sitio guarda sus
   fotos en otros cuatro). Lo que las cinco listas de abajo tienen en común no es
   el componente: es que una FOTO llega tarde y hasta entonces no hay nada que
   ver. Al agregar un contenedor de fotos nuevo, se agrega aquí y en `cromo.js`
   —las dos listas son la misma y se mueven juntas; no se puede sustituir por una
   clase que ponga el script, porque tiene que estar puesta ANTES del primer
   pintado y `cromo.js` es `defer`. */
html.js .pantalla-fondo .hs-lamina img,
html.js .tramo-fondo > img,
html.js .t-lamina img,
html.js .pt-lamina img,
html.js .ficha-media img{opacity:0}
/* Dos duraciones, no una (ley de las dos velocidades, §7 del cerebro): la foto a
   sangre —hero y tramo, que ocupan la pantalla entera— se ASIENTA en 1s, y la de
   ficha se queda en los .8s que Diego ya aprobó el 29-jul. */
html.js .pantalla-fondo .hs-lamina img.cargada,
html.js .tramo-fondo > img.cargada,
html.js .t-lamina img.cargada,
html.js .pt-lamina img.cargada{animation:fotoEntra 1s var(--expo) forwards}
html.js .ficha-media img.cargada{animation:fotoEntra .8s var(--expo) forwards}
@keyframes fotoEntra{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  html.js .pantalla-fondo .hs-lamina img,
  html.js .tramo-fondo > img,
  html.js .t-lamina img,
  html.js .pt-lamina img,
  html.js .ficha-media img{opacity:1}
  html.js .pantalla-fondo .hs-lamina img.cargada,
  html.js .tramo-fondo > img.cargada,
  html.js .t-lamina img.cargada,
  html.js .pt-lamina img.cargada,
  html.js .ficha-media img.cargada{animation:none}
}
/* se alterna el lado para dar ritmo al scroll, como en la página de SpaceX */
.ficha:nth-of-type(even) .ficha-media{order:2}
.ficha-info{
  min-width:0;align-self:center;
  padding:clamp(40px,7vh,90px) clamp(22px,4vw,70px);
}
.ficha:nth-of-type(even) .ficha-info{order:1}
/* DOS FOTOS A SANGRE SEGUIDAS SE SEPARAN UN PELO.
   Las fichas alternan el lado de la foto, así que dos seguidas quedan en
   esquinas opuestas y se TOCAN en el vértice: el ojo une los rectángulos y lee
   un zigzag —«efecto dominó», Diego 10-ago—. Con producto recortado no ocurre
   porque lo que llega al borde es el fondo de la página, no la imagen.
   6px: lo justo para que el vértice se separe sin abrir una franja. Va sobre la
   SEGUNDA de la pareja, no sobre todas: una foto a sangre suelta —la primera de
   la página— sigue pegada al bloque anterior, como estaba. */
.ficha.completa + .ficha.completa{margin-top:6px}
.ficha-info .titan{font-size:clamp(28px,3.1vw,46px);margin:10px 0 0}
.ficha-info .filas-spec{margin-top:24px;max-width:none}
.ficha-info .acciones{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
@media (max-width:960px){
  /* en vertical: la foto arriba a sangre y la información debajo */
  .ficha{grid-template-columns:1fr;min-height:auto}
  .ficha-media,.ficha:nth-of-type(even) .ficha-media{order:0;min-height:0;height:56svh}
  .ficha:nth-of-type(even) .ficha-info{order:0}
  .ficha-info{padding:clamp(28px,5vh,44px) clamp(20px,5vw,40px) clamp(44px,7vh,64px)}
  .ficha-info .titan{font-size:clamp(26px,7vw,34px)}
}

/* slides con varias fotos: galería dentro del mismo tramo */
.tramo.multi .tramo-fondo{position:absolute;inset:0}
.t-lamina{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--expo)}
.t-lamina.activa{opacity:1}
.t-lamina img,.t-lamina video,.t-lamina .hueco{width:100%;height:100%;object-fit:cover}
.t-flecha{
  position:absolute;top:50%;translate:0 -50%;z-index:4;
  width:52px;height:70px;display:grid;place-items:center;
  color:#fff;opacity:.5;transition:opacity .4s var(--expo);
}
@media (hover:hover){.t-flecha:hover{opacity:1}}
.t-flecha svg{width:22px;height:38px}
.t-ant{left:clamp(6px,1.6vw,26px)}
.t-sig{right:clamp(6px,1.6vw,26px)}
.t-cuenta{
  position:absolute;right:clamp(18px,3vw,44px);bottom:clamp(24px,4vh,48px);z-index:4;
  font-size:13px;letter-spacing:.14em;color:var(--blanco);
  font-variant-numeric:tabular-nums;text-shadow:0 2px 10px rgba(0,0,0,.9);
}
/* circulitos: cuántas fotos trae el slide y en cuál vas */
.t-puntos{
  position:absolute;left:50%;translate:-50% 0;bottom:clamp(24px,4vh,48px);z-index:5;
  display:flex;gap:12px;max-width:calc(100vw - 44px);
  overflow-x:auto;scrollbar-width:none;
}
.t-puntos::-webkit-scrollbar{display:none}
.t-puntos button{
  flex:0 0 auto;padding:0;appearance:none;-webkit-appearance:none;
  width:9px;height:9px;min-width:9px;aspect-ratio:1;border-radius:999px;
  background:rgba(240,240,250,.35);
  box-shadow:0 1px 6px rgba(0,0,0,.55);
  transition:background .25s ease, scale .25s ease;
}
.t-puntos button.activa{background:#fff;scale:1.15}
/* En táctil las flechas se quedan (orden de Diego 25-jul): más chicas y
   discretas, porque ahí conviven con el swipe y no deben tapar la foto. */
@media (pointer:coarse){
  .t-flecha{width:40px;height:56px;opacity:.62}
  .t-flecha svg{width:17px;height:29px}
  .t-puntos{bottom:clamp(18px,3vh,34px)}
}

/* PNG de producto (equipos): se ve completo sobre negro, sin recortar ni
   deformar; el fondo transparente deja el negro de la marca alrededor. */
.ficha-media.producto{background:var(--negro)}
.ficha-media.producto img{
  object-fit:contain;
  padding:clamp(24px,4vw,64px) clamp(20px,3vw,56px);
  /* no se amplía más allá de ~1.7x su tamaño real: por encima de eso una foto
     de producto del catálogo del fabricante se empieza a ver blanda */
  max-width:min(100%,620px);max-height:min(100%,760px);
  margin:auto;
}

/* PRODUCTO EN RETRATO — la foto más alta que ancha (orden de la empresa, 12-ago).
   El cuadro es apaisado y `contain` ajusta por el lado que sobra: una foto
   vertical se encoge hasta ocupar un tercio del ancho mientras su vecina
   apaisada lo llena entero. Se ve como un error de montaje, y así lo reportó la
   empresa («ponerla centrada» del EAW RS153 — que SÍ estaba centrado, medido:
   129px de aire a cada lado; lo que fallaba era el tamaño).
   El arreglo es darle ALTURA a la caja, que es la dimensión que la foto vertical
   necesita, y recortar el respiro lateral que aquí no hace falta. La clase la
   pone el generador midiendo el archivo (`esRetrato`), así que entra sola con
   cada foto nueva que suba la empresa y NO toca ninguna apaisada. */
body.compacta .ficha-media.producto.retrato{height:clamp(420px,68svh,660px)}
.ficha-media.producto.retrato img{
  padding:clamp(18px,2.4vw,36px) clamp(14px,1.6vw,28px);
  /* el techo de 620px es de foto apaisada; una vertical lo alcanza por el alto */
  max-width:min(100%,520px);max-height:min(100%,660px);
}

/* EQUIPOS compactos (orden de Diego 25-jul): el inventario es largo y no debe
   costar tanto scroll. La ficha deja de ocupar una pantalla entera y respira
   lo justo; el formato de foto a un lado e info al otro se mantiene igual. */
/* ---------- FOTOS CON FONDO — hoy solo TRUSS (Diego, 29-jul) ----------
   El resto de equipos son PNG recortados sobre el fondo claro, así que entre
   una ficha y la siguiente ya hay aire por todos lados. Las de truss son fotos
   completas, con su piso y su pared dentro del cuadro: al alternar de lado, la
   foto de una ficha terminaba justo donde empezaba la de la siguiente y las dos
   se leían como una sola columna de imagen corrida —el efecto dominó por el que
   Diego había desactivado la alternancia—.
   El arreglo no es quitar el ritmo, es dejarle un respiro debajo a cada foto:
   basta con que se vea el fondo de la página entre una y otra para que cada
   imagen vuelva a leerse como una pieza con su propio borde.
   Va por clase y NO por página: cuando otra sección traiga fotos con fondo,
   se le pone la misma clase. */
body.foto-con-fondo .ficha-media{margin-bottom:clamp(18px,3vh,34px)}

body.compacta .ficha{min-height:auto}
body.compacta .ficha-media{min-height:0;height:clamp(320px,52svh,520px)}
body.compacta .ficha-info{padding:clamp(24px,4vh,48px) clamp(22px,4vw,70px)}
@media (max-width:960px){
  body.compacta .ficha-media{height:44svh}
}

/* Media con la PROPORCIÓN de su propia foto: la caja termina donde termina la
   imagen, sin aire negro de relleno (orden de Diego para truss, 25-jul). */
.ficha-media.propia{height:auto;min-height:0;aspect-ratio:auto}
body.compacta .ficha-media.propia{height:auto}
.ficha-media.propia img{width:100%;height:100%;object-fit:cover}
@media (max-width:960px){body.compacta .ficha-media.propia{height:auto}}

/* Truss: sin alternar lados. Con fotos que llegan al borde, el zigzag se leía
   como un dominó; aquí el texto va SIEMPRE a la izquierda y la foto a la
   derecha, en dos columnas fijas (orden de Diego, 25-jul).
   SIN USO DESDE EL 29-jul: truss volvió a alternar como el resto de equipos, y
   el dominó se resolvió por su causa real —el aire bajo cada foto, arriba en
   `body.foto-con-fondo`— en vez de renunciando al ritmo. El bloque se conserva
   entero por si Diego quiere volver: es una palabra en el generador. */
body.sin-alternar .ficha .ficha-media{order:2}
body.sin-alternar .ficha .ficha-info{order:1}
@media (max-width:960px){
  body.sin-alternar .ficha .ficha-media,body.sin-alternar .ficha .ficha-info{order:0}
}

/* TRUSS: la línea bajo la descripción en TODAS las fichas, tengan o no specs.
   Funciona como remate del texto y como guía visual hacia la foto. */
body.sin-alternar .ficha-info::after{
  content:"";display:block;
  height:1px;background:rgba(240,240,250,.28);
  margin-top:22px;
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform 1s var(--expo) .12s;
}
body.sin-alternar .ficha.visible .ficha-info::after{transform:scaleX(1)}

/* cada ficha aparece al entrar en pantalla: la foto sube y aclara, el texto
   entra un instante después */
body.sin-alternar .ficha-media{opacity:0;translate:0 34px;transition:opacity .9s var(--expo), translate .9s var(--expo)}
body.sin-alternar .ficha-info > *{opacity:0;translate:0 20px;transition:opacity .8s var(--expo), translate .8s var(--expo)}
body.sin-alternar .ficha.visible .ficha-media{opacity:1;translate:0 0}
body.sin-alternar .ficha.visible .ficha-info > *{opacity:1;translate:0 0}
body.sin-alternar .ficha.visible .ficha-info > *:nth-child(1){transition-delay:.06s}
body.sin-alternar .ficha.visible .ficha-info > *:nth-child(2){transition-delay:.14s}
body.sin-alternar .ficha.visible .ficha-info > *:nth-child(3){transition-delay:.22s}
@media (prefers-reduced-motion:reduce){
  body.sin-alternar .ficha-media,body.sin-alternar .ficha-info > *{opacity:1;translate:0 0}
  body.sin-alternar .ficha-info::after{transform:scaleX(1)}
}
/* una sola línea por ficha: la de las specs se quita y queda la animada */
body.sin-alternar .fila-spec{border-bottom:0;padding-bottom:0}


/* ---------- TEMA CLARO: solo las páginas de EQUIPOS (orden de Diego, 25-jul)
   Se invierten los colores del sistema, no los productos: las fotos recortadas
   son equipos oscuros y ganan sobre blanco. Todo lo demás (retícula, tamaños,
   animaciones) queda igual. */
body.claro{
  --negro:#f4f4f6;
  --blanco:#0b0b0f;
  --gris:#5b5b66;
  --linea:rgba(11,11,15,.4);
  --linea-suave:rgba(11,11,15,.16);
  --btn-bg:rgba(255,255,255,.6);
  background:#f4f4f6;
  color:#0b0b0f;
}
body.claro .ficha,body.claro .ficha-media,body.claro .ficha-media.producto{background:#f4f4f6}
body.claro .fila-spec{border-bottom-color:rgba(11,11,15,.22)}
body.claro .ficha-info::after{background:rgba(11,11,15,.28)}
body.claro .hueco,body.claro .hueco-fondo{
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(11,11,15,.07), transparent 60%),
    linear-gradient(155deg,#e9e9ee 0%,#dededf 46%,#eeeef1 100%);
}
/* hero de la página: el texto va sobre foto, así que ahí se conserva el blanco */
body.claro .pantalla .titan,body.claro .pantalla .sub,body.claro .pantalla .etq{color:#f4f4f6}
body.claro .pantalla-velo{background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.12) 40%, rgba(0,0,0,.55))}
body.claro .pantalla .hueco-fondo{
  background:radial-gradient(90% 70% at 50% 30%, rgba(11,11,15,.16), transparent 65%),
             linear-gradient(165deg,#2a2a30 0%,#3a3a42 52%,#232329 100%);
}
body.claro footer{background:#ececef;border-top:1px solid rgba(11,11,15,.1)}
body.claro .foot-base,body.claro .foot-base a{color:#3a3a44}
/* El pie claro tiene fondo #ececef: el `--gris` del tema (#5b5b66) se queda
   corto para 11.5px, así que la firma toma el mismo tono que el copyright. */
body.claro .foot-firma,body.claro .foot-firma a{color:#3a3a44}
body.claro .btnx{border-color:rgba(11,11,15,.3);background:rgba(255,255,255,.65);color:#0b0b0f}
@media (hover:hover){body.claro .btnx:hover{background:#0b0b0f;color:#f4f4f6;border-color:#0b0b0f}}

/* ---------- ENCABEZADO SIN FOTO — páginas de EQUIPOS (Diego, 29-jul) ----------
   Equipos es otra clase de pestaña: un inventario, no una slide. Con el hero de
   pantalla completa había que bajar 104svh antes de ver el primer equipo, y la
   foto de portada solo repetía lo que ya enseñan las fichas. Aquí el rótulo, el
   titular y la descripción entran arriba con el aire justo —mismo cálculo que
   /contacto, que resolvió antes esta misma situación— y el catálogo queda a la
   vista casi sin scroll.
   La descripción deja de ser rótulo en mayúsculas: eso era para leerse ENCIMA
   de una foto. Sin foto, es un párrafo, y se trata como párrafo. */
.encabezado{
  padding:calc(var(--nav-h) + clamp(34px,6vh,64px)) clamp(22px,5vw,84px) clamp(30px,5vh,58px);
}
.enc-cont{max-width:1100px;margin:0 auto;text-align:center}
.enc-cont .etq{display:block;margin-bottom:4px}
/* El margen de arriba NO es decorativo: Olga declara un ascendente más corto que
   la tinta real de sus mayúsculas acentuadas, y sin él la Ó de ILUMINACIÓN se
   monta sobre el rótulo EQUIPOS en móvil. Es el mismo respiro que el hero
   llevaba en línea. */
.enc-cont .titan{font-size:clamp(38px,4.8vw,66px);margin-top:14px}
.enc-sub{
  margin:16px auto 0;max-width:62ch;
  font-size:clamp(15px,1.2vw,17px);line-height:1.6;
  color:var(--blanco);opacity:.72;
}
/* La opacidad de reposo se aplica SOLO una vez que la pieza entró. Declararla a
   secas ganaba —por ser regla posterior— al `opacity:0` de `.rev`, y la
   descripción aparecía desde el primer fotograma sin animar; lo mismo le pasa al
   rótulo, al que `body.claro .etq{opacity:1}` le gana por especificidad. Nada
   entra en seco (regla dura de Diego). */
.enc-cont .enc-sub.rev:not(.visto){opacity:0}
.enc-cont .enc-sub.rev.visto{opacity:.72}
body.claro .enc-cont .etq.rev:not(.visto){opacity:0}
/* misma jerarquía de entrada que el hero: rótulo, titular y descripción se
   asientan escalonados, no de golpe */
.enc-cont .etq.rev{translate:0 18px;transition-duration:.6s}
.enc-cont .titan.rev{translate:0 46px;transition-duration:.85s;transition-delay:.08s}
.enc-cont .enc-sub.rev{translate:0 26px;transition-delay:.18s}
.enc-cont .etq.rev.visto,
.enc-cont .titan.rev.visto,.enc-cont .enc-sub.rev.visto{translate:0 0}
@media (max-width:640px){
  .encabezado{padding-top:calc(var(--nav-h) + 24px);padding-bottom:26px}
  .enc-cont .titan{font-size:clamp(32px,9vw,46px)}
  .enc-sub{font-size:15px;margin-top:14px}
}

/* Inicio: el texto de las secciones alterna de lado (orden de Diego, 25-jul) */
.pantalla.texto-derecha .pantalla-cont{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.pantalla.texto-derecha .pantalla-cont .titan{max-width:18ch}
.pantalla.texto-derecha .pantalla-cont .sub{max-width:56ch}
.pantalla.texto-derecha .pantalla-cont .acciones{justify-content:flex-end}
.pantalla.texto-derecha .etq{text-indent:0}
/* EL LADO SE RESPETA TAMBIÉN EN EL TELÉFONO (Diego, 5-ago: *"en cel debe de ir
   pegado a la derecha ese texto, no a la izquierda"*).
   Aquí había un anulado que mandaba todas las bandas a la izquierda en móvil,
   sin motivo escrito. Y el motivo importa: la alternancia es lo que evita que
   tres bandas seguidas se lean como la misma pantalla repetida, y esa necesidad
   no desaparece al girar el teléfono — se acentúa, porque en vertical las
   bandas se ven una tras otra sin nada más en pantalla que las distinga.
   El titular sigue teniendo su ancho máximo, así que pegado a la derecha no se
   sale ni se pega al borde: el `padding` del contenedor sigue mandando. */

/* Tira de secciones bajo cada slide del inicio: la lista del grupo, en negro,
   con acceso directo a cada página (orden de Diego, 25-jul). */
.tira-grupo{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  /* Con nueve enlaces —Eventos— y todo el ancho disponible, el reparto salía
     7+2 y la segunda fila quedaba colgando bajo el centro de la primera, que es
     lo que se lee como desordenado (Diego, 3-ago). Acotar la caja hace que el
     quiebre reparta parejo en vez de dejar un sobrante. Las tiras de cinco u
     ocho enlaces no lo notan: siguen cabiendo en una sola línea. */
  max-width:1120px;margin-inline:auto;
  /* Mismo ritmo que la lista de «Confían en nosotros», que es la referencia que
     eligió Diego (3-ago): allí las marcas van con `gap:14px` y sin relleno, así
     que aquí el hueco se reparte entre el gap y el `padding` de cada enlace —
     ese relleno no se puede quitar, es el blanco táctil— y la suma tiene que
     dar lo mismo. Con `padding-block:5px` en el enlace, 4+10 = 14. */
  gap:10px clamp(28px,4vw,60px); /* 10 + el relleno del enlace = los 34px de «Confían» en escritorio */
  padding:26px clamp(20px,4vw,60px);
  background:#000;
  border-top:1px solid rgba(240,240,250,.08);
  border-bottom:1px solid rgba(240,240,250,.08);
}
.tira-grupo a{
  /* Tracking y sangría iguales a los de «Confían en nosotros»: el interlineado
     solo se lee parejo si la mancha de texto también lo es. */
  font-size:13px;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
  color:var(--gris);white-space:nowrap;
  padding:3px 2px;line-height:1.35;position:relative;
  transition:color .5s var(--expo);
}
@media (hover:hover){.tira-grupo a:hover{color:var(--blanco)}}
.tira-grupo a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--blanco);transition:right .35s var(--expo);
}
@media (hover:hover){.tira-grupo a:hover::after{right:0}}
@media (max-width:640px){
  /* SIN `max-width` EN EL TELÉFONO (Diego, 5-ago: *"se ven muy amontonados y
     centrados, debe de haber más por fila… se ve muy alto el espacio de esa
     sección"*). Medido a 390px antes del cambio: la caja se limitaba a 320 y
     tiraba 70px de ancho, así que las nueve secciones caían en CINCO filas y
     209px de alto. El tope venía de escritorio, donde acota una caja de 1120
     para que el quiebre reparta parejo; en una pantalla de 390 no acota nada,
     solo estrecha. Se usa el ancho completo y se aprieta el hueco entre
     columnas, que es lo que decide cuántas entran por fila. */
  .tira-grupo{gap:2px 16px;padding:18px 14px;max-width:none}
  .tira-grupo a{font-size:12px}
}

/* tema claro: textos de las fichas que tenían color fijo claro */
body.claro .fila-spec{text-shadow:none;color:#0b0b0f}
body.claro .fila-spec .fs-l{color:rgba(11,11,15,.75)}
body.claro .fila-spec .fs-v{color:#0b0b0f}
body.claro .espec,body.claro figcaption{color:#0b0b0f}
body.claro .etq{color:#3a3a44;opacity:1}
body.claro .ficha-info .titan{color:#0b0b0f}
/* el rótulo y el titular del hero siguen sobre foto: se quedan claros */
body.claro .pantalla .etq{color:#f4f4f6}

/* ---------- LA NAVEGACIÓN SÍ ENTRA AL TEMA CLARO (Diego, 29-jul) ----------
   Cambia la orden del 25-jul, que mantenía la barra oscura sobre las páginas
   claras. Con el hero fuera, esa barra negra era una franja maciza pegada
   encima de un fondo blanco; en el resto del sitio la barra es TRANSPARENTE y
   deja ver la página debajo, y equipos era la única excepción.
   Ahora equipos tiene la misma barra que todos, con la tinta invertida: fondo
   transparente y contenido en negro —links, chevrones, lupa, botón, hamburguesa
   y el logo, que usa su archivo oscuro—.
   Se invierte el SISTEMA COMPLETO de navegación, no solo la franja: el menú
   desplegable, su velo, el drawer móvil y el buscador. No es celo de
   coherencia, es que el velo del menú se dibuja DEBAJO de la barra (z-index 58
   contra 60): con el velo oscuro y la barra en negro, abrir un menú dejaba los
   links negros sobre un fondo negro, ilegibles. Invertidos los dos, el contraste
   se sostiene abierta y cerrada. */
/* Las mismas dos capas que en oscuro: el degradado en `::before`, el sólido en
   `background-color`. Si aquí se volviera a escribir el sólido en el shorthand
   `background`, regresaría el destello del 5-ago. */
body.claro .topbar::before{
  background:linear-gradient(to bottom, rgba(244,244,246,.72), rgba(244,244,246,0));
}
body.claro .topbar.solida{background-color:rgba(244,244,246,.94)}
body.claro .topbar.con-menu{background-color:rgba(244,244,246,.94)}
body.claro .tb-cta{border-color:rgba(11,11,15,.4)}
@media (hover:hover){body.claro .tb-cta:hover{background:#0b0b0f;color:#f4f4f6;border-color:#0b0b0f}}
@media (hover:hover){body.claro .tb-lupa:hover{background:rgba(11,11,15,.08)}}
/* La sombra del desplegable existe para despegar el texto de la foto que haya
   detrás. Sobre claro, esa sombra tiene que ser clara o el texto se emborrona.
   `:not(.barrita)` NO es adorno: la barrita se dibuja sobre su propio fondo
   sólido y por eso pide `text-shadow:none`. Sin excluirla, esta regla —que va
   después en el archivo y empata en especificidad— le devolvía un halo que
   emborronaba sus enlaces. */
body.claro .tb-menu:not(.barrita) a{text-shadow:0 2px 14px rgba(244,244,246,.95),0 0 4px rgba(244,244,246,.85)}
/* La barrita de secciones: misma franja, tinta invertida. */
body.claro .tb-menu.barrita{background:rgba(244,244,246,.96)}
@media (hover:hover){body.claro .tb-menu.barrita a:hover{background:rgba(11,11,15,.07)}}
body.claro .tb-menu.barrita a.actual{background:rgba(11,11,15,.12)}
body.claro .velo-menu{
  background:linear-gradient(to bottom, rgba(244,244,246,.97) 0%, rgba(244,244,246,.85) 30%, rgba(244,244,246,.4) 55%, rgba(244,244,246,0) 75%);
}
/* Las dos capas de pantalla completa van MÁS opacas que sus gemelas oscuras
   (.98/.95): el mismo alfa sobre claro deja leer la página de debajo, porque
   entre un blanco translúcido y un fondo blanco casi no hay contraste que la
   tape. Con negro sobre foto ese velo bastaba; aquí no. */
body.claro .tb-movil{background:rgba(244,244,246,.995)}
/* …y su CABECERA con él. `.mv-cab` lleva `background:#000` fijo para tapar el
   contenido que pasa por debajo al hacer scroll; en Equipos —la única sección
   de tema claro— eso dejaba una franja negra con el logo y la X, que ahí son la
   versión OSCURA, encima: negro sobre negro, invisibles (Diego, 3-ago: "no se
   ve la parte de arriba al abrir el menú de hamburguesa"). Se invierte por
   VARIABLE de fondo, no con `filter:invert`, que es la regla del cerebro.
   Este es el estado que faltaba de la barra: menú ABIERTO en tema claro. */
body.claro .tb-movil .mv-cab{background:rgba(244,244,246,.995)}
body.claro .busq{background:rgba(244,244,246,.99)}
body.claro .busq input{color:#0b0b0f}
@media (hover:hover){body.claro .busq .b-res a:hover{background:rgba(11,11,15,.05)}}

/* ---------- ÁREAS DE TOQUE (barrido del 27-jul) ----------
   Lo que se toca con el dedo necesita ~44px aunque se vea más chico. Aquí no se
   agranda NADA visualmente: se amplía el área con un pseudo-elemento invisible,
   que es la única forma de arreglarlo sin mover el texto de su sitio. */
@media (pointer:coarse), (max-width:960px){
  /* teléfono, Instagram y Facebook viven dentro de un párrafo del pie: medían
     34px y 15px de alto. Con min-height crecerían las líneas del párrafo. */
  .foot-base a,.foot-firma a{position:relative;display:inline-block}
  .foot-base a::after,.foot-firma a::after{content:"";position:absolute;inset:-13px -7px}
  /* «Hi22» mide 26×17.8 —mucho menos que el teléfono de arriba—, así que con
     los -13/-7 de la regla anterior el blanco se quedaba en 40×43.8 y no en 44.
     Medido a 390px el 12-ago: con estos valores da 46.4×45.8. */
  .foot-firma a::after{inset:-14px -10px}
  /* los circulitos de galería se ven de 9px por regla (son indicador, no el
     blanco principal) y esa medida no se toca: se ensancha su zona sensible en
     vertical, y en horizontal solo hasta la mitad del hueco que los separa —
     más allá, dos puntos vecinos se robarían el toque. */
  .t-puntos,.sl-puntos{gap:18px}
  .t-puntos button,.sl-puntos button{position:relative}
  .t-puntos button::after,.sl-puntos button::after{content:"";position:absolute;inset:-18px -9px}
  /* la tira de secciones de la portada medía 31px de alto, y "DJ" 21px de ancho
     — el enlace más chico de todo el sitio. La subbarra de los hubs comparte la
     forma, así que va en la misma regla. */
  /* El blanco táctil se extiende con un pseudo-elemento, NO engordando el
     control: `min-height:44px` en el propio enlace le daba 44px de caja y por
     eso la tira respiraba casi el doble que la lista de «Confían en nosotros»,
     que es la referencia de ritmo (Diego, 3-ago). Así el dibujo mide lo que
     debe medir y el dedo sigue teniendo sus 44px. `::before` porque `::after`
     ya dibuja el subrayado. */
  .tira-grupo a,.subbarra a{position:relative;display:inline-flex;align-items:center;justify-content:center}
  .tira-grupo a::before,.subbarra a::before{
    content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
    width:max(100%,44px);height:44px;
  }
}

/* Galería del hero de una ficha: la foto NO se cambia sola, se cambia con las
   flechas (orden de Diego 27-jul). Con una sola foto no se dibuja control. */
.hg-lamina{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--expo)}
.hg-lamina.activa{opacity:1}
.hg-lamina img{width:100%;height:100%;object-fit:cover}
.hg-flecha{
  position:absolute;top:50%;translate:0 -50%;z-index:4;
  width:52px;height:70px;display:grid;place-items:center;
  color:#fff;opacity:.5;transition:opacity .4s var(--expo);
}
@media (hover:hover){.hg-flecha:hover{opacity:1}}
.hg-flecha svg{width:22px;height:38px}
.hg-ant{left:clamp(6px,1.6vw,26px)}
.hg-sig{right:clamp(6px,1.6vw,26px)}
.hg-cuenta{
  position:absolute;right:clamp(18px,3vw,44px);bottom:clamp(24px,4vh,48px);z-index:5;
  font-size:13px;letter-spacing:.14em;color:var(--blanco);
  font-variant-numeric:tabular-nums;text-shadow:0 2px 10px rgba(0,0,0,.9);
}
@media (pointer:coarse){
  .hg-flecha{width:40px;height:56px;opacity:.62}
}

/* ------------------------------------------------------------------
   Cajón de información de una ficha (aéreos): la foto ocupa la pantalla
   y los datos viven en un panel translúcido que sube desde abajo. Llega
   abierto y se recoge con su asa; el cierre se anima igual que la
   apertura — nada desaparece en seco.
------------------------------------------------------------------ */
.pantalla.con-panel{position:relative;height:100svh;min-height:100svh}
.pantalla.con-panel .pantalla-velo{display:none}
.pinfo{
  position:absolute;left:0;right:0;bottom:0;z-index:7;
  display:flex;flex-direction:column;align-items:center;
  transform:translateY(calc(100% - 80px));
  transition:transform .74s var(--expo);
  will-change:transform;
}
.pinfo.abierto{transform:translateY(0)}
/* La subida de entrada la hace el navegador en el primer pintado, no un reloj
   en JS: asi nunca se ve a medias ni de golpe. Durante la espera el cajón se
   queda abajo (backwards) y sube una sola vez. */
@keyframes pinfo-sube{from{transform:translateY(calc(100% - 80px))}to{transform:translateY(0)}}
.pinfo.abierto.recien{animation:pinfo-sube .82s var(--expo) .34s backwards}
@media (prefers-reduced-motion:reduce){ .pinfo.abierto.recien{animation:none} }
.pinfo-asa{
  appearance:none;-webkit-appearance:none;border:0;cursor:pointer;
  min-height:74px;padding:0 24px;display:inline-flex;align-items:center;
  color:var(--blanco);background:transparent;
  transition:opacity .4s var(--expo);opacity:.92;
}
@media (hover:hover){.pinfo-asa:hover{opacity:1}}
/* Sin sombra ninguna detrás del rótulo ni de la flecha (orden de Diego). */
.pinfo-asa{position:relative}
.pinfo-asa svg{width:36px;height:21px;transition:rotate .74s var(--expo)}
/* Con el cajón recogido la flecha va acompañada de su nombre, para que se
   entienda qué abre antes de picarle; al abrirlo la palabra se retira y queda
   solo la flecha. */
.pinfo-asa-txt{
  font-size:clamp(15px,1.15vw,17px);letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;max-width:260px;margin-right:18px;
  transition:opacity .5s var(--expo),max-width .62s var(--expo),margin-right .62s var(--expo);
}
.pinfo.abierto .pinfo-asa-txt{opacity:0;max-width:0;margin-right:0}
.pinfo.abierto .pinfo-asa svg{rotate:180deg}
.pinfo-cuerpo{
  width:100%;
  /* sombra, no desenfoque: la foto se sigue viendo nítida detrás, solo más
     oscura, y el oscurecimiento vive únicamente en el alto del cajón */
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.46) 14%,rgba(0,0,0,.74) 46%,rgba(0,0,0,.9) 100%);
  padding:clamp(22px,3vh,38px) clamp(20px,5vw,64px) clamp(26px,4vh,44px);
  max-height:min(74vh,780px);overflow-y:auto;scrollbar-width:none;
}
.pinfo-cuerpo::-webkit-scrollbar{display:none}
.pinfo-cuerpo .titan{font-size:clamp(30px,4.4vw,60px);margin:10px 0 0;line-height:1.02}
.pinfo-precio{margin:12px 0 0;color:var(--gris);font-size:clamp(14px,1.1vw,16px);letter-spacing:.04em}
.pinfo-etq{display:block;margin-top:clamp(20px,3vh,32px)}
.pinfo-cuerpo .filas-spec{max-width:none;margin-top:16px}
.pinfo-cuerpo .acciones{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(20px,3vh,30px)}
.pantalla.con-panel .hg-cuenta{
  bottom:clamp(100px,11.5vh,128px);
  transition:opacity .5s var(--expo);
}
/* Con el cajón puesto, los controles de la galería se retiran: los puntos se
   leían a través del cajón y la flecha derecha se encimaba con el asa. Vuelven
   al recogerlo, y mientras tanto la foto se cambia con el teclado o el swipe. */
.pantalla.con-panel .hg-flecha{transition:opacity .5s var(--expo)}
.pantalla.con-panel:has(.pinfo.abierto) .hg-cuenta,
.pantalla.con-panel:has(.pinfo.abierto) .hg-flecha{opacity:0;pointer-events:none}
/* UN SOLO TAMAÑO EN TODO EL CAJÓN (Diego, 4-ago: *"se ve disparejo, quiero todo
   el texto del mismo tamaño de fuente"*). Antes había TRES cuerpos distintos a
   dos renglones de distancia —etiqueta 17px, valor 18px, valor del precio 19px—
   y la escalera se leía como un error de maquetación, no como jerarquía.
   El precio sigue pesando más que su vecino, pero por PESO y COLOR, no por
   tamaño: `font-weight:600` y blanco puro contra el gris de la etiqueta. Eso
   conserva la intención del 27-jul —«el precio es la respuesta que el cliente
   busca»— sin romper la línea tipográfica. */
.pinfo-cuerpo .fila-spec .fs-l,
.pinfo-cuerpo .fila-spec .fs-v,
.pinfo-cuerpo .fila-spec.precio .fs-v{font-size:clamp(14.5px,1.2vw,17px)}
.pinfo-cuerpo .fila-spec .fs-v{
  font-weight:600;color:var(--blanco);letter-spacing:.01em;
}
@media (max-width:640px){
  .pinfo-cuerpo{max-height:62vh}
  .pinfo-cuerpo .titan{font-size:clamp(26px,8vw,38px)}
  /* El tamaño de los botones del cajón NO se toca aquí: hay una regla más
     abajo, dentro del bloque de la ficha en móvil, que es más específica
     (`.pantalla.con-panel .pinfo-cuerpo .acciones .btnx`) y gana siempre.
     Escribirlo aquí no hacía nada — comprobado midiendo: la regla decía 44px y
     el botón seguía en 40. Se deja el aviso para no volver a intentarlo. */
}
@media (prefers-reduced-motion:reduce){
  .pinfo,.pinfo-asa svg{transition:none}
}

/* Portada que se turna: las fotos entran deslizando de un lado y salen por el
   otro, sin cortes. Una sola foto visible a la vez. */
.pantalla-fondo.se-turna{overflow:hidden}
/* Estas fotos traen pantallas LED con su propio texto encima, y el titulo se
   perdia contra ellas: un velo que carga en el centro —donde va el titulo— y
   se abre hacia las orillas para no apagar la foto (orden de Diego 28-jul). */
.pantalla-fondo.se-turna::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 78% 52% at 50% 58%, rgba(0,0,0,.62), rgba(0,0,0,.12) 72%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.1) 34%, rgba(0,0,0,.16) 62%, rgba(0,0,0,.6));
}
/* Ese velo NACIÓ para las portadas de sección, que se generan `sinVelo` porque
   él hace todo el trabajo. La banda del inicio ya trae su propio
   `.pantalla-velo`, así que al volverse rotativa quedó con DOS oscurecimientos
   encima y la foto salía apagada (30-jul). Manda el de la sección: es el que
   corresponde a su composición, con el texto a un lado y no al centro. */
.pantalla:has(> .pantalla-velo) .pantalla-fondo.se-turna::after{content:none}
.pantalla.centrada:has(.se-turna) .titan{text-shadow:0 2px 26px rgba(0,0,0,.8),0 1px 5px rgba(0,0,0,.55)}
.pantalla.centrada:has(.se-turna) .etq,
.pantalla.centrada:has(.se-turna) .sub{text-shadow:0 1px 14px rgba(0,0,0,.9)}
/* EL CRUCE DE LA PORTADA — «CINTA» (rehecho el 30-jul: "se ve raro, más ameno
   y menos agresivo", Diego, con la secuencia en video; eligió esta de tres
   variantes que comparó a tamaño real).

   LA FOTO NUEVA ENTRA OPACA Y TAPA A LA ANTERIOR. No hay fundido: en ningún
   instante se ven dos fotos encimadas, que era la queja de fondo. Lo que se
   veía antes, y por qué cada cosa ya no pasa:

   1. Las dos láminas bajaban a media opacidad A LA VEZ. Sobre fondo negro eso
      compone 0.5·A + 0.25·B = 75% de luz: la escena se APAGABA a la mitad del
      cambio y enseñaba las dos escenas mezcladas y sucias. Aquí la opacidad no
      se anima: la que entra ya viene opaca desde fuera del cuadro.
   2. Iban en direcciones CONTRARIAS —una desde +8%, la otra hacia −8%—, dos
      movimientos peleándose, que es lo que se sentía agresivo. Ahora las dos
      van hacia la izquierda: la que llega empuja a la que se va.
   3. 8% de recorrido con el fondo detrás descubría negro por la orilla (la
      foto se veía «ladeada»). La que sale lleva `scale(1.02)`, y la que entra
      cubre el cuadro entero durante todo su recorrido.
   4. Opacidad 1.1s contra movimiento 1.6s: la foto terminaba de aparecer y
      seguía deslizándose medio segundo más. Aquí hay UN solo movimiento de 1s.

   Solo `transform` — composición pura, ni un repintado (§7-bis del cerebro de
   interfaces). La curva es un ease-out suave y no `--expo`, que frena tan tarde
   que el final se siente un tirón.

   El `overflow:hidden` de arriba es parte del efecto, no decoración: sin él la
   lámina que espera en el 100% asomaría por el costado de la sección. */
.hs-lamina{
  position:absolute;inset:0;z-index:0;opacity:1;
  transform:translate3d(100%,0,0);
  transition:transform 1s var(--cruce);
}
/* Las que esperan turno no se pintan. Va sin transición a propósito: el
   encendido ocurre mientras la lámina está fuera del cuadro, así que animarlo
   no se vería y sí costaría. */
.hs-lamina:not(.activa):not(.saliendo){opacity:0}
.hs-lamina.activa{z-index:2;transform:translate3d(0,0,0)}
.hs-lamina.saliendo{z-index:1;transform:translate3d(-14%,0,0) scale(1.02)}
.hs-lamina img{width:100%;height:100%;object-fit:cover}
/* En el teléfono la portada recorta los lados: una foto horizontal metida en una
   ventana vertical pierde justo lo que la hacía buena. `--enc-movil` la reencuadra
   SOLO ahí (en escritorio la foto entra entera y no hay nada que corregir), y lo
   escribe el generador desde `portada.encuadreMovil` — es un dato del contenido,
   no un caso especial escondido en la hoja de estilos. Caso que lo pidió: el gobo
   de KFC en Iluminación, partido a la mitad a 390px (Diego, 29-jul). */
@media (max-width:640px){
  .hs-lamina img{object-position:var(--enc-movil,50% 50%)}
}
/* Con movimiento reducido no hay cinta: las láminas se quedan quietas y el
   cambio se resuelve encendiendo la que entra sobre la que sale, que sigue
   opaca debajo hasta que le retiran la clase. Un fundido corto y nada más. */
@media (prefers-reduced-motion:reduce){
  .hs-lamina{transition:opacity .5s linear;transform:none}
  .hs-lamina.activa,.hs-lamina.saliendo{transform:none}
}


/* ═══════════════════════════════════════════════════════════════════════════
   MÓVIL — versión propia, no la de escritorio con piezas apagadas
   ═══════════════════════════════════════════════════════════════════════════
   Ronda del 28-jul (Diego, revisando el sitio en su iPhone): "siento como si
   literal se estuviera pasando en seco la versión web a la móvil".
   Tenía razón y se puede señalar con el dedo: hasta aquí, los siete @media del
   archivo solo APAGABAN cosas —`display:none`, `grid-template-columns:1fr`— y
   ni uno decidía nada para la pantalla chica. Este bloque sí.

   Va al FINAL a propósito: gana especificidad sobre los @media de arriba sin
   tener que ir a pelearse con cada uno.

   La referencia es SpaceX en celular, que es la misma de todo el sitio. */

@media (max-width:640px){

  /* ---------- Escala tipográfica ----------
     El problema no era que un texto fuera grande o chico, sino que no había
     ESCALA: título 54px y párrafo 15px con nada en medio, así que la pantalla
     saltaba de un extremo al otro. Aquí hay cinco escalones con una razón
     constante de ~1.25, que es lo que hace que se lea como un sistema.

       32 · 24 · 19 · 16 · 13     (título · sección · destacado · cuerpo · etiqueta)

     El cuerpo en 16px no es estético: por debajo de eso iOS Safari hace zoom
     solo al enfocar un campo y deja la página descuadrada (§9 del cerebro). */

  .pantalla-cont .titan{font-size:clamp(30px,8.2vw,36px);max-width:14ch}
  .pantalla.centrada .titan{font-size:clamp(32px,8.8vw,40px)}
  .pantalla-cont .sub{font-size:16px;line-height:1.5;margin-top:14px;max-width:38ch}
  .pantalla.centrada .sub{font-size:12.5px;letter-spacing:.12em}
  .etq{font-size:11.5px;letter-spacing:.2em;text-indent:.2em}
  .btnx{height:46px;font-size:14px;padding:0 18px}
  .btnx .flecha{width:16px}

  /* ---------- El hero deja ver que hay algo debajo ----------
     104svh obligaba a hacer scroll para alcanzar los botones. 88 deja el CTA
     dentro de la primera pantalla y aun así corta la foto por abajo, que es lo
     que invita a seguir bajando. */
  /* EL HERO DE UNA SECCIÓN LLENA LA PANTALLA; el del home, no.
     No son el mismo bloque aunque compartan clase. El del home lleva dos
     botones y tiene que enseñarlos sin obligar a bajar: 88svh deja el CTA
     dentro. El de una sección (`.centrada`) solo lleva título y una línea, y a
     88svh dejaba asomar el primer slide por abajo — se leían como una sola
     pantalla partida a la mitad (reporte de Diego, 28-jul: "se junta el hero
     con el primer slide"). A pantalla completa, el corte cae donde debe. */
  /* El hero del HOME también llena, igual que el de sección (orden de Diego,
     29-jul: "es el mismo error, lo de debajo se infiltra en el hero").
     La diferencia con el de sección es que este lleva DOS BOTONES pegados
     abajo, y con `lvh` el fondo del hero cae por debajo de lo que se ve cuando
     las barras del navegador están desplegadas. Por eso el relleno inferior es
     mucho mayor aquí: sube los botones a la zona visible en vez de dejarlos
     detrás de la barra de Safari. Sin ese relleno, llenar la pantalla se paga
     con el CTA. */
  .pantalla{min-height:94lvh}
  /* `lvh` y NO `svh`, y la diferencia es justo lo que se volvió a colar.
     `svh` mide el viewport con las barras del navegador DESPLEGADAS, así que un
     hero de 100svh termina exactamente donde empieza la barra inferior de
     Safari… que es translúcida y flota encima. Por detrás de ella se seguía
     asomando el slide siguiente, y se leía como una pantalla cortada (segundo
     reporte de Diego sobre lo mismo, 28-jul).
     `lvh` mide el viewport con las barras RETRAÍDAS —el máximo—, así que el
     hero llega siempre por debajo de la barra y nada se asoma. Lo que queda
     tapado tras ella es el propio hero, que es lo correcto: es fondo.

     94 y no 100: con el máximo entero el hero quedaba demasiado alto y, como el
     texto se centra sobre TODA esa altura, caía por debajo del centro de lo que
     de verdad se ve (segundo ajuste de Diego: "ahora está muy alto y el texto
     se ve muy abajo"). 94lvh sigue pasando de largo el viewport pequeño —que es
     lo que impedía que el slide asomara— y recorta el excedente. */
  .pantalla.centrada{min-height:94lvh}
  /* El texto se recentra sobre lo VISIBLE, no sobre la caja: este relleno lo
     empuja hacia arriba justo lo que mide la franja que se come la barra del
     navegador. Centrar sobre una caja más alta que la ventana siempre deja el
     bloque bajo. */
  .pantalla.centrada .pantalla-cont{padding-bottom:38px}
  /* El relleno grande es SOLO para el hero que lleva botones.
     92px = los ~50 que el hero se pasa del viewport pequeño + el aire de
     siempre. Medido contra el alto visible real de un iPhone con las barras
     puestas (743 de 844), no contra la ventana completa: es la única cuenta que
     dice si el botón se alcanza a tocar.
     Pero las BANDAS del inicio —Servicios, Eventos, Equipos— no tienen botones,
     y al quitarles la línea de descripción se quedaron con ese hueco heredado
     entre el titular y la tira de accesos (reporte de Diego, 29-jul: "sobró
     espacio al quitar la descripción, solo en cel"). Un relleno que existe por
     una razón concreta tiene que pedirse por esa razón, no por la clase. */
  .pantalla-cont{padding-bottom:40px}
  .pantalla-cont:has(.acciones){padding-bottom:92px}
  .pantalla-cont .acciones{margin-top:22px;gap:10px}
  /* Los dos botones del hero, a lo ancho: en una columna de 390px, dos botones
     de contenido variable se parten en dos filas desalineadas. */
  .pantalla-cont .acciones .btnx{flex:1 1 100%;justify-content:space-between}

  /* ---------- "Por qué Monsivais" ----------
     Cada punto ocupaba casi un tercio de pantalla porque heredaba el aire de
     escritorio. Se aprieta el interlineado del bloque, no el texto. */
  /* «Por qué Monsivais» a la misma voz que el hero (29-jul, Diego: "se ve el
     texto un poco más grande").
     Y lo interesante es que NO lo era: medido, el párrafo del hero está en 16px
     y este en 14.5. Lo que pesaba era el ANCHO DE LÍNEA —el hero corta a 38
     caracteres y aquí las líneas cruzaban la pantalla entera— más el peso 600
     del título de cada punto. Una mancha de texto ancha se lee más grande que
     una angosta aunque la letra sea menor; por eso ajustar solo el `font-size`
     no habría alcanzado. */
  .features{gap:26px}
  .feature{grid-template-columns:30px 1fr;gap:14px}
  .feature svg{width:26px;height:26px}
  .feature h3{font-size:14px;font-weight:500;letter-spacing:.04em;margin-bottom:5px}
  .feature p{font-size:14px;line-height:1.5;max-width:38ch}

  /* ---------- SLIDES: la foto COMPLETA arriba, el texto debajo ----------
     Lo que costaba, medido: un `min-height:100svh` con `object-fit:cover` sobre
     una foto 16:9 en una pantalla de 390×844 la escala a 1502px de ancho para
     poder cubrir el alto. Se veían 390 de 1502 — el 26% de la imagen, y con el
     escenario recortado justo por el centro.

     La foto pasa a una banda en SU proporción (se ve entera) y el texto baja a
     negro. No es un patrón nuevo: es el mismo que las fichas de equipos ya usan
     en vertical desde el 25-jul, así que el sitio no aprende otra gramática.
     Decisión de Diego, 28-jul. */
  .tramo{
    min-height:0;
    display:flex;flex-direction:column;align-items:stretch;
    background:var(--negro);
  }
  /* CADA FOTO MANDA SU PROPIA PROPORCIÓN, y no una banda fija.
     Medido sobre 400 fotos del sitio: 2:1 el 32%, 1:1 el 24%, 3:2 el 20%,
     16:9 el 18% y verticales el 5%. No hay un formato dominante, así que
     cualquier `aspect-ratio` que se eligiera recortaría a la mayoría — una
     banda 16:9 dejaba las panorámicas al 75%. Con la altura libre, todas se
     ven completas.
     El tope existe para las verticales: sin él, una 3:4 se comería el 90% de
     la pantalla y el título quedaría fuera de cuadro. */
  /* RELACIÓN FIJA 4:3 (orden de Diego, 4-ago): *«en vez de 16:9 algo más
     reducido de los lados pero sin llegar a 9:16… para que se vea un poco más
     amplia la imagen»*. Antes cada foto mandaba su propia proporción con tope
     de 68svh, y como el 32% del material es 2:1 el resultado era una banda muy
     apaisada. A 4:3 la foto gana alto —292px en una pantalla de 390— y ese alto
     es justo lo que hace sitio para que el título vuelva a ir DENTRO. Se paga
     con recorte lateral, que es lo que Diego aceptó explícitamente. */
  .tramo-fondo{position:relative;inset:auto;width:100%;aspect-ratio:4/3}
  .tramo-fondo img,.tramo-fondo video,.tramo-fondo .hueco{
    height:100%;object-fit:cover;
  }
  /* En las galerías las láminas se apilan con `position:absolute`, así que
     ninguna puede dar altura al contenedor. La PRIMERA se saca del apilado
     —sigue invisible si no es la activa— y es la que fija el alto; las demás
     se ajustan a ella. Dentro de un mismo slide eso además es lo que se quiere:
     que la caja no brinque al pasar de foto. */
  /* Con la proporción fija ya no hace falta sacar la primera lámina del apilado
     para que dé altura: la caja tiene la suya y todas pueden ser absolutas. */
  .tramo.multi .tramo-fondo{position:relative;aspect-ratio:4/3}
  .tramo.multi .t-lamina{position:absolute;inset:0}
  .t-lamina img,.t-lamina video{width:100%;height:100%;object-fit:cover}

  /* EL VELO VUELVE, y ahora hace DOS trabajos (Diego, 4-ago).
     1. Que el texto encima de la foto se lea, como en escritorio.
     2. Que la foto no termine en un corte recto contra el negro de los botones:
        *«que no se vea muy cortado ese espacio en negro… no muy notable»*. Por
        eso el degradado también entra por ARRIBA — el borde de arriba de cada
        foto se funde con el negro del slide anterior, y el de abajo con el de
        sus propios botones. Sin esto se leen dos rectángulos pegados.
     Los topes de opacidad son bajos a propósito: la foto tiene que seguir
     viéndose, no ser un fondo oscuro. */
  .tramo-velo{
    display:block;position:absolute;top:0;left:0;right:0;
    height:75vw;                       /* exactamente el alto de la foto 4:3 */
    z-index:1;pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(0,0,0,.88) 0%, rgba(0,0,0,.62) 4%, rgba(0,0,0,.34) 9%,
      rgba(0,0,0,.12) 16%, rgba(0,0,0,0) 26%,
      rgba(0,0,0,0) 36%, rgba(0,0,0,.16) 50%, rgba(0,0,0,.42) 66%,
      rgba(0,0,0,.7) 82%, rgba(0,0,0,.9) 100%);
  }
  /* El texto del slide, a la escala de la foto que tiene al lado.
     Con el título a 29px, el precio a 19 y dos botones de 46, el bloque de
     texto medía MÁS que la propia foto —229px contra 166— y el slide se leía
     como una ficha con una imagen de adorno arriba, no como una foto con su
     rótulo (reporte de Diego, 28-jul: "muy grande el texto y muy pequeño el
     slide de la imagen"). Bajar el texto y no agrandar la foto es a propósito:
     agrandarla obligaría a recortarla otra vez, que es justo lo que se acaba
     de arreglar. */
  /* EL TEXTO VUELVE A ENTRAR EN LA FOTO, LOS BOTONES SE QUEDAN FUERA
     (orden de Diego, 4-ago): *«título y precio dentro de la imagen como en pc,
     pero ver paquete y cotizar debajo de cada slide para que no ocupen tanto
     espacio de la imagen»*. Es la mitad del patrón de escritorio y la mitad del
     de móvil, y esa mezcla es justo lo que resuelve el problema: el titular
     recupera la foto de fondo que le da contexto, y los dos botones —que son lo
     que de verdad ocupaba— dejan de robarle sitio a la imagen.
     El bloque de texto se ancla al pie de la foto con su alto EXACTO (75vw, el
     de una 4:3 a ancho completo), así que no hay que adivinar dónde termina la
     imagen ni depender de que el título mida una línea o dos. */
  .tramo{position:relative}
  .tramo-texto{
    display:flex;flex-direction:column;justify-content:flex-end;
    position:absolute;top:0;left:0;right:0;height:75vw;
    z-index:2;padding:0 clamp(20px,5vw,28px) 16px;
    pointer-events:none;                /* la foto de abajo sigue siendo tocable */
  }
  /* `static` A PROPÓSITO: si esta caja se hace `relative`, pasa a ser el ancla
     de `.tramo-texto` —que es su hijo— y el bloque de título aterriza DEBAJO de
     la foto en vez de encima. Medido: 270px por debajo del pie de la imagen.
     El ancla tiene que ser `.tramo`, que es quien contiene también la foto. */
  .tramo-cont{position:static;padding:14px clamp(20px,5vw,28px) 22px}
  /* EVENTOS NO TIENE BOTONES, así que esta caja se queda sin nada dentro —el
     texto es absoluto y no cuenta— y su padding se convertía en una franja
     negra entre foto y foto (Diego, 4-ago: *"hay mucho espacio sobrante entre
     cada slide"*). Sin botones no hay nada que separar: el tramo mide
     exactamente lo que mide su foto y los slides quedan pegados, que es como
     él lo dibujó. La clase la pone el generador, no un `:has()`: así el motivo
     queda escrito en el HTML y no depende de leer el contenido. */
  .tramo.pelado .tramo-cont{padding:0}
  .tramo-cont .etq{font-size:10.5px;letter-spacing:.18em}
  .tramo-cont .titan{font-size:clamp(21px,5.8vw,25px);max-width:18ch}
  .tramo-precio{font-size:16px;margin-top:6px}
  .tramo-cont .acciones{margin-top:0;gap:8px}
  .tramo-cont .acciones .btnx{
    flex:1 1 calc(50% - 4px);justify-content:space-between;
    height:40px;font-size:12.5px;padding:0 12px;
  }
  .tramo-cont .acciones .btnx .flecha{width:14px}
  /* Los controles de la galería se quedan DENTRO de la banda de la foto: si
     siguieran anclados al tramo entero caerían sobre el texto. Se anclan al
     fondo, que ahora es un elemento con alto propio, en vez de calcularlos
     contra el ancho de la pantalla — la altura de la foto ya no es una fórmula
     conocida, la decide cada imagen. */
  .tramo.multi .tramo-fondo{isolation:isolate}
  /* POR ENCIMA DEL VELO (Diego, 4-ago: *"el contador de 1/3 se ve oscurecido,
     debe verse claro"*). El degradado que se añadió sobre la foto lleva
     `z-index:1` y los controles de la galería viven dentro del fondo sin capa
     propia, así que el velo los tapaba: el «1 / 3» y las flechas se leían
     apagados, como si estuvieran DEBAJO de la sombra. No es un problema de
     color del contador —era correcto— sino de orden de pintado.
     REGLA: cada vez que se mete un velo sobre una foto, hay que repasar qué
     controles viven dentro de esa foto y subirlos por encima. */
  .t-flecha{top:0;translate:none;height:100%;z-index:2}
  .t-cuenta,.t-puntos{position:absolute;bottom:12px;top:auto;z-index:2}
  .t-cuenta{right:14px}

  /* ---------- Fichas de detalle ----------
     Misma razón que arriba: 56svh de foto sobre una pantalla vertical recorta
     de más. En su proporción se ve completa y de paso entra el texto. */
  .ficha-media,.ficha:nth-of-type(even) .ficha-media{height:auto;aspect-ratio:16/9}
  body.compacta .ficha-media{height:auto;aspect-ratio:16/9}
  /* La foto vertical necesita alto, y en una pantalla vertical es lo que sobra:
     4/5 en vez de 16/9 le da a la del EAW RS153 el doble de superficie sin
     empujar el texto fuera de la primera pantalla. */
  body.compacta .ficha-media.producto.retrato{height:auto;aspect-ratio:4/5}
  .ficha-info{padding:24px clamp(20px,5vw,28px) 40px}
  .ficha-info .titan{font-size:clamp(26px,7.4vw,32px)}
}

/* ---------- Cromo de la barra en móvil ----------
   A 1080 y no a 640: es donde los links de escritorio ya se ocultaron y el
   logo se queda solo con la lupa y la hamburguesa. */
@media (max-width:1080px){
  /* EL LOGO A LA IZQUIERDA (orden de Diego, 28-jul). Centrado tenía sentido con
     los links repartidos a los lados; sin ellos queda flotando en medio de la
     nada y la esquina izquierda —que es donde el pulgar y el ojo buscan la
     marca— vacía. */
  .topbar .logo{position:static;left:auto;translate:none;margin-right:auto}
  .topbar .logo img{height:38px}
  .topbar{gap:12px;padding:0 16px}

  /* Los dos iconos, del MISMO tamaño. Las cajas ya eran casi iguales (42 y 44);
     lo que se veía disparejo eran los GLIFOS: lupa de 19px contra hamburguesa
     de 22px. Los dos a 21px, el punto medio. */
  .tb-lupa,.tb-burger{width:44px;height:44px}
  .tb-lupa svg{width:21px;height:21px}
  .tb-burger span{width:21px}
  .tb-lupa{margin-left:0}
  .tb-burger{margin-left:2px}
}

/* ---------- Menú móvil ----------
   Tres cosas, todas del 28-jul. */
@media (max-width:1080px){
  /* 1. LA MISMA FUENTE QUE LA WEB. El drawer forzaba 'Olga' —la display de los
        titulares— a 22px, así que la navegación se leía distinta según el
        dispositivo. Olga es para titular, no para lista: en cuerpo pierde
        legibilidad y ninguna barra del sitio la usa. */
  /* `:not(.btnx)` NO es cosmético. El botón «Cotizar evento» es un <a>, así que
     esta regla también le aplicaba y su `padding:0 20px` se perdía contra el
     `padding:11px 0` de aquí: el texto quedaba pegado al borde izquierdo del
     recuadro, "desfasado" (reporte de Diego, 28-jul). Un selector de etiqueta
     dentro de un contenedor alcanza cosas que no son de su familia. */
  .tb-movil a:not(.btnx){
    font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size:16px;letter-spacing:.09em;font-weight:400;
    padding:11px 0;
  }
  /* El CTA del menú: a lo ancho y con su texto centrado, como los del hero.
     El `padding` se repone AQUÍ y no se hereda del `.btnx`: la regla base
     `.tb-movil a{padding:9px 0}` (arriba en este archivo) tiene más
     especificidad que `.btnx` y se lo seguía comiendo aunque este bloque ya la
     excluyera con `:not(.btnx)`. Medido: `padding 0px / 0px`. */
  .tb-movil > .btnx{
    display:flex;width:100%;justify-content:center;
    height:48px;padding:0 20px;font-size:14px;margin-top:4px;
  }
  .tb-movil .g-titulo{font-size:11px;letter-spacing:.28em}
  .tb-movil .grupo{margin-bottom:18px;padding-bottom:12px}

  /* 2. EL LOGO ARRIBA A LA IZQUIERDA. Sin él, el menú abierto era la única
        pantalla del sitio sin marca, y al abrirlo se perdía la referencia de
        dónde estabas. Se pinta desde `cromo.js`. */
  /* La cabecera cubre DESDE EL BORDE de la pantalla, no desde donde empieza el
     texto.
     Antes el contenedor traía 54px de relleno superior que la cabecera no
     alcanzaba: al deslizar, los nombres de las secciones subían por ese hueco y
     se veían cortados a media letra justo encima del logo (reporte de Diego,
     28-jul). Ahora ese relleno vive DENTRO de la cabecera, y los márgenes
     negativos la estiran de orilla a orilla para que nada pase por los lados. */
  /* EL MENÚ SE ALINEA CON LA BARRA, al píxel.
     El logo y la X del menú tienen que caer en la MISMA vertical que el logo y
     la hamburguesa de la barra cerrada, o al abrir se ve saltar la marca de
     sitio. Estaban a 30px y la barra a 16, así que el logo se corría 14px a la
     derecha y el menú entero quedaba con una franja negra sobrante a la
     izquierda (reporte de Diego, 28-jul, comparándolo con SpaceX — ahí los dos
     logos caen exactamente en la misma vertical).
     Un solo número gobierna las dos capas: el padding lateral de la barra. */
  .tb-movil{padding-left:16px;padding-right:16px}
  /* LA CABECERA DEL MENÚ ES LA MISMA CAJA QUE LA BARRA.
     No basta con alinear a la izquierda y a la derecha: el logo y la X tienen
     que caer también a la MISMA ALTURA que el logo y la hamburguesa de la barra
     cerrada, o al abrir se ve bajar la marca de golpe. Medido antes de esto: 36
     píxeles de desfase vertical en los dos.
     Se consigue replicando su geometría —alto de `--nav-h` y contenido centrado—
     en vez de calcular un relleno superior a ojo, que era de donde salía el
     desfase. Un mismo alto y un mismo centrado dan el mismo resultado sin que
     nadie tenga que volver a medirlo. */
  .tb-movil .mv-cab{
    position:sticky;top:0;z-index:2;
    display:flex;align-items:center;justify-content:space-between;
    margin:0 -16px 16px;
    min-height:var(--nav-h);
    padding:0 16px;
    background:#000;
  }
  /* Mismo alto que el logo de la barra (38px): con 34 el glifo quedaba un poco
     más chico y la marca también "cambiaba de tamaño" al abrir. */
  .tb-movil .mv-cab img{height:38px}
  /* La X se alinea con la hamburguesa: las dos son cajas de 44 pegadas al mismo
     borde, así que el glifo cae en el mismo sitio y no se ve brincar. */
  .tb-movil .cerrar{margin-right:0}
  .tb-movil .mv-cab img{width:auto;display:block}
  /* Sin margen negativo: la X tiene que terminar en el MISMO borde que la
     hamburguesa de la barra (medido: 374px). Con -10 sobresalía y las dos
     capas se veían desalineadas al abrir. */
  .tb-movil .cerrar{position:static;width:44px;height:44px;margin-right:0}

  /* 3. ABRE Y CIERRA CON MOVIMIENTO. Antes solo cambiaba la opacidad, así que
        aparecía y desaparecía en seco — contra la regla de Diego de que nada se
        cierre de golpe. El contenido sube al entrar y baja al salir. */
  .tb-movil{
    /* Sin relleno arriba: lo pone la cabecera, que es quien tiene que taparlo
       todo cuando se pega (arriba). */
    padding-top:0;
    transition:opacity .28s var(--expo),visibility .28s;
    visibility:hidden;
    /* NEGRO SÓLIDO, no .97. Ese 3% de transparencia dejaba leer el titular del
       hero justo detrás de la lista, y sobre una foto clara el menú se volvía
       ilegible. En pantalla completa el fondo no es un efecto: es lo que separa
       una capa de la otra. */
    background:#000;
  }
  .tb-movil .mv-cab{background:#000}
  .tb-movil.abierto{visibility:visible}
  .tb-movil .grupo,.tb-movil > .btnx{
    opacity:0;translate:0 14px;
    transition:opacity .34s var(--expo),translate .34s var(--expo);
  }
  .tb-movil.abierto .grupo,.tb-movil.abierto > .btnx{opacity:1;translate:0 0}
  /* Escalonado corto y con tope: el quinto grupo no puede tardar medio segundo
     en aparecer o el menú se siente lento. */
  .tb-movil.abierto .grupo:nth-child(2){transition-delay:.04s}
  .tb-movil.abierto .grupo:nth-child(3){transition-delay:.07s}
  .tb-movil.abierto .grupo:nth-child(4){transition-delay:.1s}
  .tb-movil.abierto .grupo:nth-child(n+5){transition-delay:.12s}
}

@media (prefers-reduced-motion:reduce){
  .tb-movil,.tb-movil .grupo,.tb-movil > .btnx{transition-duration:.01ms;translate:none}
}

/* ---------- La ficha de un paquete, en móvil ----------
   Mismo problema que los slides y misma solución: la foto es el PRODUCTO, y a
   pantalla completa con `cover` se veía un recorte de su centro. Reporte de
   Diego, 28-jul: "la página de dentro del paquete tiene el mismo problema".

   El cajón deslizante que sube sobre la imagen es un lujo de escritorio: ahí
   sobra alto para que la foto siga leyéndose detrás. En una pantalla vertical
   la foto entera mide menos que el propio cajón, así que deja de ser un cajón
   sobre una imagen y pasa a ser una cortina que la tapa. En móvil la
   información baja al flujo, debajo de la foto, y se lee de corrido. */
@media (max-width:640px){
  .pantalla.con-panel{height:auto;min-height:0;display:block}
  .pantalla.con-panel .pantalla-fondo{position:relative;inset:auto;z-index:auto}
  .pantalla.con-panel .pantalla-fondo img,
  .pantalla.con-panel .pantalla-fondo video,
  .pantalla.con-panel .hg-lamina:first-child img{height:auto;max-height:68svh;object-fit:cover}
  .pantalla.con-panel .hg-lamina{position:absolute}
  .pantalla.con-panel .hg-lamina:first-child{position:relative}

  /* EL MISMO DEGRADADO QUE LOS SLIDES (Diego, 4-ago: *"en esta parte también
     hacer el degradado que hiciste"*). Aquí la foto choca contra el negro del
     panel de información con un corte recto, que es exactamente lo que se
     acaba de quitar en los tramos.
     Va como pseudo-elemento del FONDO y no como una caja de alto fijo: la foto
     de una ficha conserva su proporción real con tope de 68svh, así que su alto
     lo decide cada imagen y no hay número que pueda escribirse. Con `inset:0`
     el degradado mide siempre lo que mida la foto. */
  .pantalla.con-panel .pantalla-fondo::after{
    content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(0,0,0,.8) 0%, rgba(0,0,0,.5) 4%, rgba(0,0,0,.22) 9%,
      rgba(0,0,0,0) 18%, rgba(0,0,0,0) 62%,
      rgba(0,0,0,.3) 78%, rgba(0,0,0,.66) 90%, rgba(0,0,0,.92) 100%);
  }
  /* Los controles de la galería, por encima del degradado. */
  .pantalla.con-panel .hg-flecha,
  .pantalla.con-panel .hg-cuenta{z-index:3}

  /* El panel deja de flotar: sin `absolute`, sin `transform` y sin cajón que
     abrir. El asa se retira porque ya no hay nada que desplegar — un control
     que no controla nada es peor que no tenerlo. */
  .pantalla.con-panel .pinfo{
    position:static;transform:none;animation:none;
    display:block;
  }
  .pantalla.con-panel .pinfo-asa{display:none}
  .pantalla.con-panel .pinfo-cuerpo{
    background:var(--negro);
    max-height:none;overflow:visible;
    padding:18px clamp(20px,5vw,28px) 34px;
  }
  /* A la misma escala que el slide del que se viene: entrar a la ficha no puede
     sentirse como cambiar de sitio. */
  .pantalla.con-panel .pinfo-cuerpo .titan{font-size:clamp(23px,6.4vw,28px);line-height:1.1}
  .pantalla.con-panel .pinfo-precio{font-size:15px;margin-top:8px}
  .pantalla.con-panel .pinfo-cuerpo .acciones{margin-top:20px;gap:8px}
  .pantalla.con-panel .pinfo-cuerpo .acciones .btnx{
    flex:1 1 100%;justify-content:space-between;height:44px;font-size:13px;
  }
  /* Los controles de la galería vuelven a anclarse a la foto, que ahora es un
     elemento con alto propio y no el fondo de la pantalla entera. */
  .pantalla.con-panel .hg-cuenta{bottom:12px}
  .pantalla.con-panel .hg-flecha{height:100%;top:0;translate:none}
}

/* ---------- La X del menú responde al toque ----------
   Cerraba en seco: se tocaba y el menú simplemente ya no estaba. Con el glifo
   girando un cuarto de vuelta y encogiéndose bajo el dedo, el gesto se siente
   acusado — es la misma regla de siempre: nada abre ni cierra de golpe. */
.tb-movil .cerrar svg{
  transition:rotate .4s var(--expo), scale .2s var(--expo), opacity .3s ease;
}
@media (hover:hover){.tb-movil .cerrar:hover svg{rotate:90deg}}
.tb-movil .cerrar:active svg{scale:.82;rotate:90deg}
.tb-movil.cerrando .cerrar svg{rotate:180deg;opacity:.35}
@media (prefers-reduced-motion:reduce){
  .tb-movil .cerrar svg{transition-duration:.01ms}
}

/* ---------- La ficha del paquete, ronda 2 (28-jul) ----------
   Dos reportes de Diego sobre la misma pantalla. */
@media (max-width:640px){
  /* 1. LA BARRA DEJA DE ESTORBAR A LA FOTO.
        El logo, la lupa y la hamburguesa flotaban sobre la imagen del paquete y
        se le encimaban: en escritorio no molesta porque el hero es enorme y
        arriba casi siempre hay cielo o techo oscuro, pero aquí la foto es una
        banda de 166px y la barra le come un tercio. La foto ARRANCA bajo la
        barra, sobre negro, así que se ve completa y sin nada encima. */
  .pantalla.con-panel{padding-top:var(--nav-h);background:var(--negro)}

  /* 2. EL TEXTO, A LA ESCALA DE LA FOTO.
        Mismo desajuste que tenían los slides y misma corrección: el bloque de
        información pesaba más que la imagen que venía a describir. Baja el
        título, el precio y —sobre todo— los renglones de la ficha técnica, que
        son los que más alto acumulan. */
  .pantalla.con-panel .pinfo-cuerpo{padding:14px 16px 30px}
  .pantalla.con-panel .pinfo-cuerpo .etq{font-size:10.5px;letter-spacing:.18em}
  .pantalla.con-panel .pinfo-cuerpo .titan{font-size:clamp(20px,5.4vw,23px)}
  .pantalla.con-panel .pinfo-precio{font-size:13.5px;margin-top:6px}
  .pantalla.con-panel .pinfo-etq{margin-top:18px}
  .pantalla.con-panel .pinfo-cuerpo .filas-spec{margin-top:10px}
  .pantalla.con-panel .fila-spec{font-size:12.5px;padding:9px 0}
  .pantalla.con-panel .pinfo-cuerpo .acciones{margin-top:16px;gap:7px}
  /* «Un pelo» más chicos (Diego, 4-ago), literal: 40px→37 y 12.5→11.8. Los tres
     botones van uno debajo de otro y a ancho completo, así que lo que se recorta
     es alto y no área de acierto — el dedo falla en horizontal, y ahí siguen
     midiendo la pantalla entera. Por debajo de esto ya no se bajan: 37px es el
     suelo donde un botón sigue leyéndose como botón. */
  .pantalla.con-panel .pinfo-cuerpo .acciones .btnx{height:37px;font-size:11.8px;padding:0 13px}
  .pantalla.con-panel .pinfo-cuerpo .acciones .btnx .flecha{width:14px}
}

/* ---------- Los accesos de sección del inicio, más juntos (28-jul) ----------
   Reporte de Diego: "hay como mucho interlineado… que se vea más ameno, pero
   tampoco tan junto". Cada acceso traía el `padding` vertical pensado para el
   subrayado del hover —un gesto que en un teléfono no existe— y encima el hueco
   de fila, así que entre renglón y renglón se acumulaban tres espacios
   distintos. Se recorta el que sobra y se deja el aire suficiente para que cada
   nombre siga siendo un blanco cómodo de tocar. */
@media (max-width:640px){
  /* La tira de accesos del inicio (DJ · AÉREOS · CORPORATIVO…). Entre renglón y
     renglón se sumaban TRES espacios: el hueco de fila del grid, el relleno
     vertical de cada acceso —que existe por el subrayado del hover, un gesto
     que en un teléfono no ocurre— y la interlínea del cuerpo. */
  /* EL BLANCO TÁCTIL SE QUEDA EN 44px; lo que se recorta es el espacio que
     OCUPA.
     La separación no venía del hueco ni del relleno, sino del `min-height:44px`
     de más arriba — el mínimo cómodo para un pulgar, que no se toca. Con margen
     negativo cada acceso sigue midiendo 44 de alto tocable pero ocupa 34 en el
     flujo: las áreas se solapan 5px, y como estos enlaces se separan sobre todo
     en horizontal, ese solape no vuelve ambiguo a cuál le estás dando.
     Medido: 46px entre filas antes, 36 después. */
  .tira-grupo{gap:2px 16px;padding:18px 14px;max-width:none}
  /* El `margin-block:-5px` que vivía aquí compensaba el `min-height:44px` del
     enlace, que ya no existe: el blanco táctil pasó a un pseudo-elemento. Con
     los dos puestos el interlineado se comía 10px de más y las tiras se veían
     amontonadas (Diego, 3-ago). */
  /* La interlínea de 1.55 es del CUERPO: sirve para leer párrafos, no para una
     lista de nombres de una palabra. Ahí solo añade aire fantasma arriba y
     abajo de cada acceso, y es de donde salía la mayor parte de la separación
     (medido: 46px entre filas con el hueco ya en 2). */
  .tira-grupo a{font-size:12px;letter-spacing:.07em;padding:7px 2px;line-height:1.35}
  /* Los sublinks de un hero de sección, por la misma razón. */
  .sublinks{gap:0 18px;margin-top:18px}
  .sublinks a{font-size:12px;letter-spacing:.07em;padding:7px 0}
}

/* ---------- «Confían en nosotros» en móvil (28-jul) ----------
   Mismo reporte de interlineado que la tira del inicio, y aquí el culpable era
   otro: el `letter-spacing` de .3em. Con 20 marcas, ese aire entre letras hacía
   que solo cupieran DOS por renglón —diez filas para veinte nombres— y el
   bloque se estiraba 445px. El espaciado ancho es la voz de la marca en un
   rótulo de tres palabras; en una lista larga solo multiplica renglones.
   Se afina la letra en vez de apretar las filas: caben más por renglón y el
   bloque se acorta sin que los nombres queden encimados. */
@media (max-width:640px){
  .confian{padding-block:26px}
  .confian .lista{gap:10px 20px}
  .confian .lista span{font-size:11px;letter-spacing:.14em;text-indent:.14em;line-height:1.4}
}

/* ---------- Las flechas vuelven dentro de un paquete (28-jul) ----------
   Las tapé yo sin querer. Al volver ESTÁTICO el panel de la ficha en móvil, el
   panel pasó a estar siempre "abierto", y hay una regla del escritorio que
   esconde las flechas y el contador justo cuando el cajón está abierto — allá
   tiene sentido: el cajón cubre la foto y los controles quedarían debajo. Aquí
   ya no cubre nada, así que el candado se aplicaba sobre un problema que dejó
   de existir y la galería se quedó sin forma de pasar de foto.
   Regla del cerebro §11: no basta con quitar la causa, hay que revisar qué
   dependía de ella. */
@media (max-width:640px){
  .pantalla.con-panel:has(.pinfo.abierto) .hg-flecha,
  .pantalla.con-panel:has(.pinfo.abierto) .hg-cuenta{opacity:.62;pointer-events:auto}
  .pantalla.con-panel .hg-flecha{
    position:absolute;top:0;height:100%;translate:none;z-index:6;
    width:44px;display:grid;place-items:center;color:#fff;
  }
  .pantalla.con-panel .hg-ant{left:2px}
  .pantalla.con-panel .hg-sig{right:2px}
  .pantalla.con-panel .hg-flecha svg{width:17px;height:29px}
  /* El contador vive dentro de la foto, no bajo el título. */
  .pantalla.con-panel .hg-cuenta{position:absolute;bottom:10px;right:14px;z-index:6}
}

/* ---------- CONTACTO: primero cotizar, luego los datos (29-jul) ----------
   Orden de Diego. La página abría con un hero de pantalla completa sobre foto
   y el formulario quedaba hasta el fondo, después de la dirección y el mapa —
   quien entra a /contacto ya decidió que quiere escribir, y se le pedían dos
   pantallas de scroll para llegar al campo.
   Ahora la página arranca con el formulario, centrado, y los datos van abajo.
   Sin hero y sin imagen: negro pleno, que es lo que se pidió. */
.contacto-cotiza{
  padding-top:calc(var(--nav-h) + clamp(34px,6vh,64px));
  padding-bottom:clamp(30px,5vh,56px);
}
/* CENTRADO de verdad: la caja al medio y su contenido alineado al centro. El
   formulario en sí se queda alineado a la izquierda por dentro —un campo con la
   etiqueta centrada se lee peor y se llena peor. */
.contacto-cotiza .cont-form{
  margin:0 auto;max-width:640px;text-align:center;
}
.contacto-cotiza .cont-form .campo,
.contacto-cotiza .cont-form form{text-align:left}
.contacto-cotiza .cont-form .btnx{margin-inline:auto}
.contacto-datos{padding-top:0;padding-bottom:clamp(46px,7vh,90px)}

@media (max-width:640px){
  .contacto-cotiza{padding-top:calc(var(--nav-h) + 22px)}
  .contacto-cotiza .cont-form .titan{font-size:clamp(24px,6.8vw,30px)}
}

/* ---------- HERO CON VIDEO EN MÓVIL: 9:16, texto encima, botones debajo ----------
   Tercera forma y la que Diego pidió explícitamente el 3-ago: el clip vuelve a
   9:16 como al principio, el texto va CENTRADO SOBRE el video, los botones
   quedan DEBAJO, y no sobra negro entre una cosa y otra.

   Lo que hace que ahora sí se vea nítido no es el bitrate: es que el archivo
   móvil viene RECORTADO a 9:16 desde el master 4K (1080x1920). A 390 css de
   ancho eso se dibuja en 1170 px reales sobre 1080 — amplía 1.08x, casi 1:1.
   La primera versión servía el 16:9 y dejaba que `cover` recortara en el
   navegador: ahí la ampliación era 3.7x y de ahí venía lo borroso.

   El armado es un grid de dos filas. El `.pantalla-cont` se vuelve
   `display:contents` para que sus hijos entren directo al grid: así el texto y
   los botones pueden ir a filas distintas sin cambiar el HTML que usa el
   escritorio. Fondo, velo y texto comparten la fila 1 y se apilan por z-index;
   los botones son la fila 2 y ahí no hay foto que velar. */
@media (max-width:640px){
  .pantalla.con-video{
    min-height:auto;
    display:grid;
    /* UNA sola columna, explícita. Sin esto el grid reparte en columnas
       automáticas y fondo, velo y texto acaban uno al lado del otro en vez de
       apilados: el video se quedó en 207px de ancho con el texto a su derecha. */
    grid-template-columns:100%;
    grid-template-rows:auto auto;
    padding-bottom:0;
  }
  .pantalla.con-video .pantalla-fondo{
    grid-row:1;grid-column:1;
    position:relative;
    inset:auto;
    /* 9/17 y no 9/16: *"estira un poco más el hero de altura, solo un pelo"*
       (Diego, 4-ago). Son 43px más en una pantalla de 390 de ancho — el clip
       gana presencia sin llegar a empujar fuera de vista lo que viene debajo. */
    aspect-ratio:9/17;
    width:100%;
    z-index:0;
  }
  /* LA FLECHA VA DENTRO DEL HERO, no debajo (Diego, 4-ago). Este hero es un grid
     de dos filas —video arriba, contenido abajo— y la flecha, al no ser ni
     `.pantalla-texto` ni `.acciones`, caía por colocación automática en la
     segunda fila: aparecía flotando en el negro, separada del video que debía
     invitar a recorrer. Se la manda a la fila 1, al pie del clip y por encima
     del velo. */
  .pantalla.con-video .baja{
    grid-row:1;grid-column:1;
    align-self:end;justify-self:center;
    z-index:2;margin-bottom:10px;
  }
  .pantalla.con-video .pantalla-fondo video,
  .pantalla.con-video .pantalla-fondo img{
    object-fit:cover;
    background:#000;
  }
  /* El velo vuelve a hacer falta —el texto otra vez va sobre el clip— y ocupa la
     misma celda que el video. En grid un item se estira a su celda, así que no
     necesita `inset:0` para cubrirla. */
  .pantalla.con-video .pantalla-velo{
    display:block;
    grid-row:1;grid-column:1;
    position:relative;
    inset:auto;
    z-index:1;
    pointer-events:none;
    /* El velo de origen es un degradado que carga en los EXTREMOS, porque el
       texto vivía abajo. Con el texto ya centrado esa forma deja de servir:
       medido sobre el propio clip, la banda central pasa por escenas de 120 y
       134 sobre 255 y el titular caía a 4.8:1. Se le suma una carga central
       —misma idea que el velo de las portadas que se turnan— y el peor caso
       sube a 9.9:1. */
    background:
      radial-gradient(ellipse 92% 46% at 50% 50%, rgba(0,0,0,.62), rgba(0,0,0,.10) 78%, rgba(0,0,0,0) 100%),
      linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.12) 34%, rgba(0,0,0,.18) 64%, rgba(0,0,0,.6));
  }
  .pantalla.con-video .pantalla-cont{display:contents}
  /* Centrar el TEXTO no basta: el titular y la bajada llevan `max-width` para
     no hacerse líneas larguísimas, y en escritorio el hero va alineado a la
     izquierda, así que esa caja se queda pegada a ese borde. Al centrar solo el
     contenido, la caja seguía a la izquierda y el bloque se leía descentrado
     —medido: etiqueta a +1px del centro, titular a -25 y bajada a -22 (Diego,
     3-ago: "se ve más a la izquierda")—. Hay que centrar también la CAJA. */
  .pantalla.con-video .pantalla-texto > *{margin-inline:auto}
  .pantalla.con-video .pantalla-texto{
    grid-row:1;grid-column:1;
    z-index:2;
    align-self:center;
    text-align:center;
    /* El relleno superior vale el alto de la barra fija, y NO es aire: la barra
       tapa esos píxeles del clip, así que centrar contra el video entero deja el
       texto alto respecto a lo que de verdad se ve (Diego, 3-ago: "no se centró
       bien"). Como `align-self:center` centra la caja CON su relleno, sumar
       `--nav-h` arriba baja el contenido justo la mitad de la barra, que es la
       corrección exacta. */
    /* El relleno de ARRIBA vale la barra fija, que tapa esos píxeles del clip.
       El de ABAJO sube el bloque un poco más: el clip 9:16 suele ser más alto
       que la pantalla útil, así que su mitad cae por debajo del centro de lo
       que se ve, y sin este contrapeso el texto se lee bajo al abrir (Diego,
       3-ago). Es un ajuste óptico, por eso va en `vh` y no en píxeles. */
    padding:var(--nav-h) 24px 4vh;
    width:100%;
  }
  .pantalla.con-video .acciones{
    grid-row:2;grid-column:1;
    margin:0;
    padding:20px 22px 4px;
  }
  /* El hero ya cierra con sus botones; la sección que sigue no necesita abrir
     con su respiro completo encima (Diego: "hay mucho espacio negro sobrante
     entre los botones y por qué monsivais"). */
  .pantalla.con-video + .bloque{padding-top:26px}
}

/* ---------- CIERRE DE LA PORTADA: negro de verdad y sin alto de hero ----------
   El bloque de Contacto pedía una foto que nunca se versionó, así que salía como
   `hueco-fondo`: negro, sí, pero ocupando 104svh — el costo de una pantalla
   completa sin la imagen que lo justifica (Diego, 3-ago: "que el fondo no sea de
   imagen sino negro literal, y reducir la altura, está muy grande para ser solo
   fondo negro"). Aquí el alto lo pone el CONTENIDO más aire, no el viewport. */
.pantalla.cierre{
  min-height:0;
  display:block;
  background:#000;
  padding:clamp(72px,11vh,132px) 0 clamp(76px,12vh,140px);
  text-align:center;
}
.pantalla.cierre .pantalla-cont{padding-bottom:0}
.pantalla.cierre .acciones{justify-content:center}
@media (max-width:640px){
  .pantalla.cierre{padding:64px 0 68px}
}

/* ---------- PULSACIÓN EN TÁCTIL ----------
   OJO ANTES DE TOCAR NADA DE AQUÍ: estas reglas por sí solas NO bastan en
   Safari. El 4-ago Diego reportó el MISMO síntoma por segunda vez —«no se ve
   blanco el botón al hacer tap»— con todo esto ya escrito. Se midió en WebKit
   con touch (`scratchpad/medir-tap.mjs`): 121 cuadros muestreados durante el
   toque, CERO con el botón claro, el color nunca se movió de su reposo.
   La causa no está en el CSS: **Safari no dispara `:active` sobre un enlace si
   el documento no tiene ningún manejador de eventos táctiles**. El arreglo vive
   en el `<head>` del generador —un `touchstart` vacío y pasivo— y sin él este
   bloque entero es decorativo. FIRMA de que alguien lo quitó: `:active` escrito
   y el botón sin inmutarse al tocarlo en un iPhone.

   Al meter los `:hover` dentro de `@media (hover:hover)` para matar el doble tap
   de iOS, el teléfono se quedó SIN ninguna señal de que el toque registró: el
   botón se veía igual antes y después (Diego, 3-ago: "quiero que al darle click
   se vea como el botón blanco… no que sea como un botón invisible").
   `:active` es el equivalente táctil de `:hover` y NO produce el doble tap,
   porque el navegador lo aplica mientras el dedo está abajo y lo suelta al
   levantarlo — nunca se queda pegado esperando un segundo toque.
   Solo donde no hay puntero: en escritorio manda el `:hover` de siempre. */
@media (hover:none){
  .btnx:active{background:var(--blanco);color:#000;border-color:var(--blanco)}
  .btnx:active .flecha{translate:4px 0}
  body.claro .btnx:active{background:#0b0b0f;color:#f4f4f6;border-color:#0b0b0f}
  .tb-cta:active{background:var(--blanco);color:#000;border-color:var(--blanco)}
  body.claro .tb-cta:active{background:#0b0b0f;color:#f4f4f6;border-color:#0b0b0f}
  .tira-grupo a:active,.subbarra a:active,.tb-movil a:active,.foot-links a:active,.redes a:active{color:var(--blanco)}
  .tb-lupa:active{background:rgba(240,240,250,.1)}
  /* Sin el flash gris de iOS: la señal la da el propio botón, y las dos juntas
     se ven como un parpadeo sucio. */
  a,button{-webkit-tap-highlight-color:transparent}
}

/* ---------- CINTA DE EQUIPOS (banda del inicio) ----------
   Equipos no enseña una foto de ambiente: enseña el PARQUE. Los productos van
   recortados sobre negro y desfilando despacio, y cada uno es un enlace a su
   sección (orden de Diego, 3-ago).
   El bucle se hace con la lista DUPLICADA en el HTML y corriendo la cinta
   media vuelta: al llegar a -50% la segunda copia está justo donde arrancó la
   primera, así que no hay salto ni salto que disimular. Solo se anima
   `transform`, que es composición pura y no repinta (cerebro §7-bis). */
/* La banda de Equipos no necesita pantalla completa: sin foto de ambiente que
   respirar, el alto de más es aire vacío encima de los productos (Diego,
   3-ago). Y su titular va CORRIDO —«Infraestructura y equipo» en una línea—,
   así que se le quita el tope de ancho que lo partía en dos. */
.pantalla:has(.cinta){min-height:78svh}
/* El titular ARRIBA y la cinta debajo ocupando lo que sobre (Diego, 4-ago).
   La banda deja de apilar por capas —el fondo iba `absolute inset:0` y el texto
   flotaba encima— y pasa a ser una columna de dos piezas: se reordenan con
   `order` porque el HTML sale del mismo molde que las otras bandas, donde el
   fondo TIENE que ir primero. La cinta toma `flex:1`, así que el espacio que
   antes sobraba arriba del titular ahora se lo lleva ella y los productos
   quedan más abajo. */
.pantalla:has(.cinta){
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
}
.pantalla:has(.cinta) .pantalla-cont{
  order:1;
  padding-top:clamp(26px,4.6vh,58px);
  padding-bottom:clamp(10px,1.8vh,22px);
  text-align:center;
}
.pantalla:has(.cinta) .cinta-fondo{
  order:2;
  position:relative;inset:auto;
  /* Sale del `z-index:-2` que traía por ser fondo de pantalla: ya no está
     debajo del contenido, ahora es una pieza más de la columna. */
  z-index:0;
  flex:1;min-height:0;
}
.pantalla:has(.cinta) .etq{display:block}
/* Más chico que el de las otras bandas y centrado: aquí el titular acompaña a
   la cinta, no compite con ella — con el tamaño de portada se comía la mitad
   del ancho y pesaba más que los productos, que son el tema (Diego, 3-ago). */
.pantalla:has(.cinta) .titan{white-space:nowrap;max-width:none;font-size:clamp(24px,3.1vw,44px)}
@media (max-width:640px){
  .pantalla:has(.cinta){min-height:66svh}
  /* En el teléfono el titular recupera el tamaño de las otras bandas —el de
     «Eventos que se viven en grande», que es la referencia que dio Diego— y
     para eso tiene que poder partirse: `nowrap` a ese cuerpo se saldría de la
     pantalla. El `nowrap` era una decisión de ESCRITORIO, donde sí cabe de
     corrido, así que se levanta solo aquí. */
  .pantalla:has(.cinta) .titan{white-space:normal;font-size:clamp(28px,7.8vw,42px)}
  /* Con el titular a dos líneas y a este cuerpo, el respiro de escritorio deja
     la segunda línea pegada a los productos (Diego, 4-ago). */
  .pantalla:has(.cinta) .pantalla-cont{padding-bottom:clamp(38px,6.4vh,66px)}
  .pantalla:has(.cinta) .etq{font-size:12px;letter-spacing:.34em}
}
.cinta-fondo{
  background:#000;
  display:flex;align-items:center;
  overflow:hidden;
}
.cinta{
  display:flex;align-items:center;
  gap:clamp(34px,6.4vw,104px);
  padding-inline:clamp(34px,6.4vw,104px);
  /* 9s por producto: a Diego le importaba que NO fuera rápido. Como la cinta
     recorre media vuelta, la duración se calcula sobre el número real de
     piezas y no sobre el doble. */
  /* 3.5s por producto: a esa velocidad una pieza tarda ~3.5s en cruzar su
     propio ancho — se lee como deriva lenta, no como carrusel. Con 9s la
     vuelta entera daba 12 minutos y parecía congelada. */
  animation:cinta-corre calc(var(--n) * 6.5s) linear infinite;
}
@keyframes cinta-corre{from{translate:0 0}to{translate:-50% 0}}
.cinta-item{
  flex:0 0 auto;
  /* Cuatro a la vista en escritorio, contando los huecos entre ellas. */
  width:clamp(150px,24vw,340px);
  display:grid;place-items:center;
}
.cinta-item img{
  width:100%;height:auto;max-height:min(46vh,420px);
  object-fit:contain;
  /* El PNG viene sin fondo: la sombra lo despega del negro para que no parezca
     recortado a tijera. */
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.55));
}
/* DOS clases y ninguna regla `:hover`, por una razón que costó dos intentos:
   `.cinta-fondo` es el fondo de la pantalla y hereda `z-index:-2`, así que vive
   DETRÁS de todo y no recibe eventos de ratón — ningún `:hover` colgado de él
   podía funcionar nunca. La pausa la ponen los listeners sobre la `.pantalla`,
   que sí está en el flujo. `fuera` la escribe el observador cuando la cinta
   sale de pantalla y `sobre` el ratón: son condiciones distintas y por eso son
   clases distintas, para que una no borre a la otra. */
/* Solo se detiene cuando sale de pantalla. Con el ratón encima SIGUE corriendo:
   pararla rompía la sensación de cinta continua, que es el punto (Diego,
   4-ago). La señal de que una pieza es tocable es el cursor y que crece un
   punto — no hace falta congelar la banda entera para decirlo. */
.cinta.fuera{animation-play-state:paused}
.cinta-item{cursor:pointer;transition:scale .35s var(--expo)}
.cinta-item:hover{scale:1.06}
/* El `:hover` va en el CONTENEDOR, que está quieto, y no en la cinta, que se
   desliza. Un navegador no reevalúa el hover mientras un elemento se mueve bajo
   un cursor inmóvil —solo lo hace cuando el ratón se mueve—, así que colgarlo
   de `.cinta` daba una pausa que a veces entraba y a veces no (Diego, 3-ago:
   "no se están parando al pasar el mouse"). `.cinta-fondo` no se traslada
   nunca, así que el estado es estable. */

@media (hover:none){.cinta-item:active{opacity:.6}}
/* Con movimiento reducido la cinta se queda quieta y se puede recorrer con el
   dedo: apagar la animación sin dar otra forma de ver el resto dejaría la mitad
   del parque inalcanzable. */
@media (prefers-reduced-motion:reduce){
  .cinta{animation:none}
  .cinta-fondo{overflow-x:auto;scrollbar-width:none}
  .cinta-fondo::-webkit-scrollbar{display:none}
}
@media (max-width:640px){
  .cinta{gap:22px;padding-inline:22px}
  .cinta-item{width:clamp(130px,42vw,200px)}
  .cinta-item img{max-height:34vh}
}

/* ---------- LA APERTURA del inicio (orden de Diego, 4-ago-2026) ----------
   Telón negro con el nombre de la casa a tamaño de cartel: tres renglones que
   cruzan en sentidos opuestos, frenan con un retroceso corto y se van hacia
   abajo dejando el video del hero. Referencia: agenciadescorche.com — de ahí
   sale la FORMA (cruce, quiebre al 80%, retirada del telón), medida en su CSS y
   no a ojo. El tiempo es nuestro: 2.5s contra sus 8s.

   POR QUÉ CADA DECISIÓN, que aquí no son gusto:
   · Solo `transform`. Tres renglones a pantalla completa movidos con `left` o
     `margin` recalcularían la maquetación en cada cuadro (§7-bis del cerebro).
   · Los renglones van CENTRADOS y no pegados a un borde. Cada uno mide varias
     pantallas de ancho, así que centrarlos deja desborde simétrico y el
     extremo de la cadena de texto nunca entra en cuadro por mucho que se
     desplace. Alinearlos a un lado —como hace la referencia, que puede porque
     su palabra es corta— dejaba ver el borde con un nombre de 21 letras.
   · La animación NO depende del JS: con `both`, el telón termina fuera y la
     página queda usable aunque el script no cargue. Un adorno que se traga la
     página cuando falla un script no es un adorno, es una caída. */
#apertura{
  position:fixed;inset:0;z-index:9000;
  background:var(--negro);
  overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:clamp(4px,1.2vh,18px);
  /* no intercepta nada: ni un clic perdido durante los 3.05s, ni después si
     algo saliera mal y el nodo no se retirara del documento */
  pointer-events:none;
  /* 2.6s = los 2.1s del recorrido + 0.5s QUIETO (orden de Diego, 4-ago). Esa
     pausa es la que convierte el gesto en un mensaje: sin ella las letras se
     acomodaban y el telón bajaba antes de que diera tiempo a leerlas, así que
     se pagaba la animación entera para no entregar el nombre.
     El valor lo afinó el ojo en tres pasadas —1s, 0.7s, 0.5s—, mirándolo correr
     en cada una. Se deja anotado el recorrido porque el número final no se
     deduce: media palabra conocida se reconoce mucho antes de leerse entera. */
  animation:ap-salir .45s cubic-bezier(.65,0,.35,1) 2.6s both;
}
.ap-fila{
  display:flex;flex-shrink:0;gap:.34em;
  font-family:'Olga','Helvetica Neue',sans-serif;
  font-weight:300;text-transform:uppercase;
  /* DOS LÍMITES, y el que manda es el segundo.
     · 27vh es la proporción de cartel: tres renglones ocupando el 84% del alto.
     · 12.6vw es el que hace que el nombre SE LEA al frenar. Medido en Olga:
       «Producciones» ocupa 7.19em de ancho —«Monsivais» 5.30em—, así que para
       que la palabra entre entera en el 90% del ancho el cuerpo no puede pasar
       de ancho/7.99. En una pantalla de 1440 son 180px; a los 250px de antes
       medía 1.788px y se salía por los dos lados, que es exactamente por lo
       que el telón se retiraba sin que se supiera qué decía.
     El cartel pierde algo de tamaño y gana lo que se pedía: que se lea. */
  font-size:min(27vh,12.6vw);
  line-height:1.04;
  color:var(--blanco);
  white-space:nowrap;
  will-change:transform;
}
.ap-a,.ap-c{animation:ap-izq 2.1s cubic-bezier(.42,0,.28,1) both}
.ap-b{animation:ap-der 2.1s cubic-bezier(.42,0,.28,1) both}
/* Dos juegos de renglones en el HTML, uno visible por superficie: el nombre
   completo en escritorio y las iniciales en el teléfono, donde doce letras no
   caben sin encoger el cartel hasta dejarlo vacío. `display:none` en el que
   sobra y no `visibility`, para que ni ocupe ni se anime. */
.ap-corta{display:none}
/* El quiebre al 80% es el remate de la referencia: el renglón se pasa de largo
   y regresa un poco, que es lo que hace que frene como un objeto con peso en
   vez de detenerse en seco.
   EL 100% ES `0` Y NO UN PORCENTAJE CUALQUIERA: ahí está la mitad del arreglo
   del 4-ago. Como cada renglón es simétrico respecto a su palabra clave (ver
   `apertura()` en el generador), reposo = palabra centrada en la pantalla. El
   recorrido se queda en ±16%, muy por debajo del 36.8% de desborde que tiene
   cada renglón por lado, así que el extremo de la cadena nunca asoma. */
@keyframes ap-izq{
  0%{transform:translate3d(16%,0,0)}
  80%{transform:translate3d(-5%,0,0)}
  100%{transform:translate3d(0,0,0)}
}
@keyframes ap-der{
  0%{transform:translate3d(-16%,0,0)}
  80%{transform:translate3d(5%,0,0)}
  100%{transform:translate3d(0,0,0)}
}
/* El telón se va ENTERO con sus letras dentro: un solo transform en vez de
   animar el fondo por un lado y desvanecer el texto por otro. `visibility` al
   final lo saca de cualquier cálculo aunque el nodo siguiera en el documento. */
@keyframes ap-salir{
  to{transform:translate3d(0,101%,0);visibility:hidden}
}
/* Mientras dura, la página no se mueve debajo — si no, la apertura termina y el
   visitante aparece a media página. La clase la pone el guardián inline, así
   que sin JS nadie se queda con el scroll trabado. */
html.abriendo,html.abriendo body{overflow:hidden}
/* Ya la vio en esta visita: ni se pinta. */
html.sin-apertura #apertura{display:none}
/* Esperando a que Olga cargue: la animación se queda en su primer cuadro para
   que el cartel no salga en Helvetica y cambie de letra a mitad del gesto. */
html.ap-espera #apertura,html.ap-espera .ap-fila{animation-play-state:paused}
@media (max-width:640px){
  /* En el teléfono se cambian los papeles: se enseñan las iniciales y se
     esconde el nombre largo. */
  .ap-larga{display:none}
  .ap-corta{display:flex}

  /* EN MÓVIL MANDA EL ALTO, IGUAL QUE EN ESCRITORIO — y esto es una decisión
     de Diego contra la que argumenté, así que queda escrita entera.
     Aquí estuvo primero el criterio contrario: limitar por ancho (13.3vw) para
     que «PRODUCCIONES» entrara completa, como en escritorio. Se probó en el
     teléfono real y el resultado era un cartel del 19% del alto flotando en
     medio de una pantalla negra — Diego lo describió como «se ve en 16:9»—, y
     su orden fue clara: *«que ocupe toda la pantalla como en pc, no pasa
     nada»*. Lo que se cede es la palabra completa; lo que se gana es el telón.
     Y no se pierde tanto como parece: el renglón sigue frenando con su palabra
     CENTRADA (el palíndromo de `apertura()` no depende del tamaño), así que lo
     que queda en el eje de la pantalla es el centro del nombre y no un trozo
     cualquiera. En 390px son 228px de cuerpo y el 84% del alto, la misma
     proporción que en escritorio. */
  .ap-fila{font-size:27vh}
}
@media (prefers-reduced-motion:reduce){
  #apertura{display:none}
}

/* ---------- Hero del inicio sin texto ----------
   Con el titular y los botones fuera, la primera pantalla es puro video y no
   tiene ninguna señal de que abajo hay sitio. La flecha es esa señal — y es un
   enlace de verdad, no un adorno: se alcanza con el tabulador y lleva a
   Servicios, igual que el botón que había antes. */
.baja{
  display:grid;place-items:center;
  width:52px;height:52px;margin:0 auto;
  color:var(--blanco);opacity:.75;
  transition:opacity .3s var(--expo),transform .3s var(--expo);
  animation:ap-respira 2.6s ease-in-out 1s infinite;
}
.baja svg{width:24px}
@media (hover:hover){.baja:hover{opacity:1;transform:translateY(3px)}}
.baja:focus-visible{opacity:1;outline:1px solid var(--linea);border-radius:6px}
@keyframes ap-respira{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(6px)}
}
@media (prefers-reduced-motion:reduce){
  .baja{animation:none}
}

/* Lo que se oye pero no se ve: el h1 del inicio vive aquí desde que el hero se
   quedó sin titular. Sin él la página perdería su encabezado de nivel 1, que es
   lo que leen Google y los lectores de pantalla. NO se usa `display:none` — eso
   lo sacaría también del árbol de accesibilidad, que es justo lo contrario. */
.solo-voz{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}