/* =============================================================================
   Soft Imperio — Hero claro estilo "Ari" (réplica adaptada)
   Composición a TODA la anchura: izquierda la bienvenida ("Soft" negro /
   "Imperio" verde), centro el producto protagonista en 3D con la constelación
   del catálogo, derecha las cifras reales apiladas con divisores + CTA verde,
   y abajo-izquierda la pista "Desliza · Descubre el catálogo".
   Progresivo: sin WebGL queda la misma retícula con el panel de activación al
   centro. hero3d.js añade .hero--live (pista alta + sticky) y .hero--on (canvas).
   Capas dentro de .hero__sticky: bg(0) < canvas(1) < shade(2) < contenido(3+).
   ============================================================================= */

.hero--3d {
  display: block;
  padding: 0;
  overflow: visible;
  background: none;
}

.hero--3d::after {
  content: none;
}

.hero--3d .hero__sticky {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(460px, 78vh, 700px);
  overflow: hidden;
  isolation: isolate;
  background: #fff;
}

.hero--3d .hero__sticky>.container {
  position: relative;
  z-index: 3;
}

.hero--3d .hero__bg {
  display: none;
}

.hero--3d .hero__watermark {
  display: none;
}

/* --- Retícula Ari: bienvenida | producto | cifras ----------------------------- */
.hero__ari {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

.hero__ari > * {
  min-width: 0;
}

@media (min-width: 961px) {
  .hero--3d .hero__sticky>.container.hero__ari {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(0, 1.4fr) minmax(230px, 1fr);
  }

  /* Columnas EXPLÍCITAS: si el panel de respaldo se oculta (modo 3D), las
     cifras no deben recolocarse en la columna central */
  .hero__ari .hero__content {
    grid-column: 1;
    grid-row: 1;
  }

  .hero__ari .hero__visual {
    grid-column: 2;
    grid-row: 1;
  }

  .hero__ari .hero__stats {
    grid-column: 3;
    grid-row: 1;
  }
}

/* Izquierda: eyebrow con línea + marca apilada */
.hero--3d .hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: oklch(0.52 0.14 156);
}

.he-line {
  width: 2.2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
  flex: none;
}

/* Scopeado a .hero--3d para ganarle al hero oscuro de home.css (.hero h1 → #fff).
   Tinta FIJA: este hero es siempre blanco (también en modo oscuro); con
   var(--ink) el titular quedaba blanco sobre blanco al activar el tema oscuro. */
.hero--3d .hero__brand {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 620;
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-size: clamp(2.8rem, 1.6rem + 3.8vw, 5.4rem);
  color: oklch(0.23 0.012 250);
  text-shadow: none;
}

.hero--3d .hero__brand span,
.hero--3d .hero__brand em {
  display: block;
}

.hero--3d .hero__brand em {
  font-style: normal;
  color: oklch(0.55 0.16 152);
}

/* Sin la línea animada del hero anterior bajo el <em> */
.hero--3d .hero__brand em::after {
  content: none;
}

.hero--3d .hero__content {
  color: oklch(0.36 0.012 250);
  padding-block: 0;
}

.hero--3d .hero__lede {
  margin-top: 1.2rem;
  font-size: 1rem;
  line-height: 1.6;
  color: oklch(0.45 0.01 250);
  max-width: 30ch;
}

/* Derecha: cifras apiladas con divisores (números grandes, leyenda pequeña) */
.hero__stats {
  display: flex;
  flex-direction: column;
}

@media (min-width: 961px) {
  .hero__stats {
    justify-self: end;
    text-align: right;
    min-width: 250px;
  }
}

.hstat {
  padding: 1.05rem 0;
  border-top: 1px solid oklch(0.91 0.004 250);
}

.hstat:first-child {
  border-top: 0;
}

.hstat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-size: clamp(2.1rem, 1.5rem + 1.7vw, 3.3rem);
  color: oklch(0.23 0.012 250);
  font-variant-numeric: tabular-nums;
}

.hstat b i {
  font-style: normal;
  font-size: 0.42em;
  font-weight: 700;
  color: oklch(0.55 0.16 152);
  vertical-align: super;
  margin-left: 0.15em;
}

/* OJO: hijo DIRECTO (>): dentro del <b> ahora viven los spans del tambor de
   cifras y no deben heredar el estilo de la leyenda. */
.hstat > span {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: oklch(0.55 0.01 250);
}

/* --- Tambor de cifras (slot machine, home.js statOdometer) -------------------
   Cada dígito es una ventanita de 1em con una columna 0-9 que gira (transform)
   y cae en su valor. Los signos (+, –, espacio) van en la misma caja de 1em
   para que toda la cifra alinee pareja. */
.odo {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  white-space: pre;
}

.odo__reel {
  display: block;
  transition: transform 1s cubic-bezier(0.16, 0.9, 0.24, 1);
  will-change: transform;
}

.odo__reel > span {
  display: block;
  height: 1em;
  line-height: 1;
}

/* Giro terminado (la clase la pone odoRoll en home.js): en la ventanilla solo
   queda el dígito final. Así no puede asomar el borde del dígito de al lado —
   el alto de cada casilla se redondea a píxeles del aparato y en pantallas de
   mucha densidad se colaba un hilo del número vecino por encima. De paso suelta
   la capa de composición (will-change) que ya no hace falta. */
.odo.is-set .odo__reel {
  will-change: auto;
}

.odo.is-set .odo__reel > span {
  visibility: hidden;
}

.odo.is-set .odo__reel > span:last-child {
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .odo__reel {
    transition: none;
  }
}

/* CTA verde + pill de WhatsApp (como el "Ver colección →" de Ari) */
.hero__cta {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 961px) {
  /* En escritorio los dos accesos (catálogo y tienda 3D) van EN FILA, uno al
     lado del otro; el WhatsApp baja a su propia línea. Si la columna se queda
     corta, wrap los apila solo — nunca se cortan ni se salen. */
  .hero__cta {
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
  }
}

.hero__ghostpill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid oklch(0.9 0.004 250);
  font-size: 0.85rem;
  font-weight: 600;
  color: oklch(0.45 0.01 250);
  box-shadow: var(--shadow-xs);
  transition: color var(--t), border-color var(--t);
}

.hero__ghostpill:hover {
  color: oklch(0.25 0.012 250);
  border-color: oklch(0.8 0.006 250);
}

/* ---------------------------------------------------------- Puerta a la 3D
   Segunda entrada a la MISMA tienda (28-jul-2026). Usa el botón verde de la
   casa TAL CUAL (.btn--primary), sin nada propio: el degradado que llevaba
   antes partía el botón en dos tonos y se veía como un error de pintado.
   Vive junto a "Ver productos": el catálogo clásico sigue siendo el camino
   principal de compra y el que indexa Google. */

/* Velos blancos: legibilidad en los márgenes laterales + fusión arriba/abajo */
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 24%),
    linear-gradient(270deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 14%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 16%);
}

@media (max-width: 960px) {
  .hero__shade {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.82) 55%, rgba(255, 255, 255, 0.96) 100%);
  }

  /* Con el 3D activo, el velo deja LIBRE la banda superior (ahí vive la
     constelación) y solo protege la lectura del texto de abajo. */
  .hero--on .hero__shade {
    background:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.06) 18%,
        rgba(255, 255, 255, 0.1) 34%,
        rgba(255, 255, 255, 0.78) 48%,
        rgba(255, 255, 255, 0.93) 62%,
        rgba(255, 255, 255, 0.97) 100%);
  }
}

/* Lienzo WebGL: entra con fundido cuando las texturas están listas.
   pointer-events none es OBLIGATORIO: en modo tour el lienzo es fijo a pantalla
   completa y sin esto se tragaba los clics del footer (los clics sobre las
   cajas 3D se resuelven por raycast en document, no en el canvas). */
.hero__gl {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1s var(--ease-out);
  pointer-events: none;
}

.hero--on .hero__gl.is-on {
  opacity: 1;
}

/* Relevo del hero: la constelación NO se oculta por umbral de scroll (eso
   dejaba un tramo VACÍO al subir del catálogo al hero, en celular y en
   escritorio: el lienzo seguía escondido hasta retroceder media pista). En su
   lugar, la vitrina llega con fondo propio y borde superior en degradado
   (regla .s-productos más abajo): al bajar CUBRE al hero y al subir lo
   DESCUBRE al instante, sin huecos en ninguna dirección. */
.s-productos {
  background: var(--bg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg) clamp(90px, 16vh, 150px));
}

/* --- Modo vivo (solo escritorio): hero de un viewport --------------------------
   Sin acto 2: al bajar, la constelación viaja en tornado al lado libre de cada
   sección (modo tour, ver bloque html.h3d-tour abajo). En ≥1101px se suma una
   pista corta de relevo (bloque siguiente) que fija el hero y lo disuelve. */
@media (min-width: 961px) {

  /* La altura de "modo vivo" se aplica SIEMPRE (no solo con .hero--live): el
     3D arranca diferido tras la carga y, si el hero creciera recién entonces,
     toda la página daba un salto de layout al refrescar (el "parpadeo"). */
  .hero--3d .hero__sticky {
    min-height: calc(100vh - var(--headerH, 4.5rem));
    min-height: calc(100svh - var(--headerH, 4.5rem));
  }

  .hero--live .hero__content,
  .hero--live .hero__stats {
    will-change: transform, opacity;
  }

  /* El texto deja pasar el puntero al lienzo; botones y enlaces siguen vivos */
  .hero--live .hero__content,
  .hero--live .hero__stats {
    pointer-events: none;
  }

  .hero--live :is(.hero__content, .hero__stats) :is(a, button) {
    pointer-events: auto;
  }

  /* Relevo suave: el panel de respaldo se funde mientras el lienzo 3D entra
     (antes era display:none y el cambio se veía como un destello). */
  .hero__visual {
    transition: opacity 0.6s var(--ease-out);
  }

  .hero--on .hero__visual {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s var(--ease-out), visibility 0s 0.6s;
  }

  /* Y si la sonda de index.html ya sabe que el 3D viene (html.h3d-wait), el
     panel de respaldo NO se pinta nunca: el centro queda limpio y la
     constelación aparece directa con su fundido. Si el 3D falla, la clase se
     quita y el panel entra fundiéndose (transición de arriba). */
  html.h3d-wait .hero__visual {
    opacity: 0;
  }
}

/* --- Relevo del hero (tour ≥1101px, con movimiento permitido) ------------------
   El hero se queda QUIETO (sticky) mientras una pista corta de scroll extra lo
   disuelve en su propio sitio; recién cuando terminó de fundirse, el catálogo
   sube y toma su lugar. Sin esto, el home se escapaba hacia arriba a velocidad
   de scroll y el apartado siguiente "se posicionaba arriba de inmediato" (el
   salto agresivo). La pista existe desde la primera pintura (no depende de
   .hero--live) para no dar saltos de layout cuando el 3D arranca diferido; el
   fundido lo hace hero3d.js (updateDom) o, sin WebGL, cinematic.js. Con
   movimiento reducido no hay pista: hero clásico de un viewport. */
@media (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
  /* SIN pista de relevo (20-jul-2026, tras varias vueltas con el dueño): el
     hero fijado siempre dejaba una cola fea — iconos sobrepuestos al catálogo
     al bajar, o un tramo vacío al subir. Ahora el hero FLUYE con el scroll
     como cualquier sección (la constelación sube con él, siempre visible) y
     la vitrina llega enseguida, fundiendo la unión con su degradado. */
  .hero--3d {
    min-height: calc(100vh - var(--headerH, 4.5rem));
  }

  /* Solape corto: la vitrina muerde apenas el borde inferior del hero para
     que el degradado cosa la unión (sin tapar el contenido). */
  .s-productos {
    position: relative;
    z-index: 2;
    margin-top: -5vh;
  }
}

/* --- Relevo del hero en móvil y tablet (con movimiento permitido) --------------
   Misma sensación que en escritorio: un espaciador tras el sticky (::after,
   neutralizando la capa decorativa absoluta de home.css) da una pista corta en
   la que el hero queda QUIETO disolviéndose en su sitio; el fundido lo hace
   updateDom() de hero3d.js (o cinematic.js sin WebGL) leyendo la pista real. */
@media (max-width: 1100px) and (prefers-reduced-motion: no-preference) {
  /* Sin espaciador de relevo (misma razón que en escritorio): el ::after solo
     queda para NEUTRALIZAR la capa decorativa absoluta de home.css. El hero
     fluye con el scroll y la vitrina llega justo detrás, cosida por su
     degradado con un mordisco mínimo. */
  .hero--3d::after {
    content: "";
    position: static;
    inset: auto;
    display: block;
    height: 0;
    background: none;
    z-index: auto;
  }

  .s-productos {
    position: relative;
    z-index: 2;
    margin-top: -2vh;
  }
}

/* --- Tour 3D por toda la página (hero3d.js pone html.h3d-tour en ≥1101px) ------
   El lienzo pasa a ser FIJO a pantalla completa (z 1). Los contenedores de las
   secciones suben a z 2 (el 3D pasa por detrás del contenido y por delante de
   los fondos). Cada sección [data-h3d] deja libre la mitad donde vive el 3D. */
html.h3d-tour .hero__gl {
  position: fixed;
  inset: 0;
  z-index: 1;
}

html.h3d-tour main .container {
  position: relative;
  z-index: 2;
}

/* Ya no existe crossfade por scroll: no reservamos capas grandes de composición
   permanentemente, reduciendo memoria gráfica y repintados. */
@media (min-width: 1101px) {

  /* Cada apartado ocupa ~58vw pegado a su lado (el 3D vive en el otro) y se
     extiende hacia el CENTRO para aprovechar el vacío (petición del dueño:
     "así como está en nuestros productos, en todos los apartados"). */
  html.h3d-tour [data-h3d="left"]>.container {
    width: min(58vw, 1400px);
    margin-inline: auto clamp(1.5rem, 4vw, 4.5rem);
  }

  html.h3d-tour [data-h3d="right"]>.container {
    width: min(58vw, 1400px);
    margin-inline: clamp(1.5rem, 4vw, 4.5rem) auto;
  }

  /* Capítulos con la constelación disuelta (data-h3d-hide): no hay 3D al
     costado que respetar, así que el contenido vuelve a centrarse a lo
     ancho (la vitrina de productos vive aquí desde el 20-jul-2026). */
  html.h3d-tour [data-h3d][data-h3d-hide]>.container {
    width: 100%;
    margin-inline: auto;
  }

  /* Cabecera editorial en TODAS las secciones: titular grande a la izquierda
     y su párrafo al lado derecho (aplica también al sub-título de la demo). */
  html.h3d-tour [data-h3d] .sec-head {
    align-items: center;
  }

  html.h3d-tour [data-h3d] .sec-head__t {
    display: grid;
    grid-template-columns: auto minmax(22ch, 34ch);
    gap: 0.4rem clamp(2rem, 4vw, 4.5rem);
    align-items: center;
  }

  html.h3d-tour [data-h3d] .sec-head__t .sec-eyebrow {
    grid-column: 1 / -1;
  }

  html.h3d-tour [data-h3d] .sec-head__t p {
    margin-top: 0;
  }

  /* Si el enlace baja de línea (anchos medios), que siga pegado a la derecha */
  html.h3d-tour [data-h3d] .sec-head>.btn-link {
    margin-left: auto;
  }

  html.h3d-tour .s-productos .product-grid {
    grid-template-columns: repeat(2, minmax(0, 340px));
  }

  /* Cómo funciona: los 5 pasos en 3 columnas (3 + 2), sin la línea punteada */
  html.h3d-tour .flow {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 2.25rem;
  }

  html.h3d-tour .flow::before {
    display: none;
  }

  /* Demo: la lista Eliges→Activas va HORIZONTAL sobre la pantalla simulada */
  html.h3d-tour .demo {
    grid-template-columns: 1fr;
  }

  html.h3d-tour .demo__steps {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem 1.75rem;
  }

  html.h3d-tour .demo-step:not(:last-child)::after {
    display: none;
  }

  /* Soporte y FAQ conservan sus DOS columnas de siempre (texto+chat /
     aside+lista): con el bloque a 58vw vuelven a caber con holgura. */
}

/* En pantallas muy anchas, rejilla 3×2 centrada (6 destacados parejos) */
@media (min-width: 2000px) {
  html.h3d-tour .s-productos .product-grid {
    grid-template-columns: repeat(3, minmax(0, 340px));
  }
}

/* --- Ficha del producto bajo el cursor (hover sobre una caja) ----------------- */
.hero__tip {
  position: fixed;
  z-index: 320;
  left: 0;
  top: 0;
  pointer-events: none;
  padding: 0.55rem 0.8rem;
  border-radius: var(--r);
  background: #fff;
  border: 1px solid oklch(0.9 0.004 250);
  box-shadow: 0 14px 34px oklch(0.35 0.06 156 / 0.18);
  color: oklch(0.25 0.012 250);
  font-size: 0.82rem;
}

.hero__tip b {
  display: block;
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: -0.01em;
}

.hero__tip span {
  color: oklch(0.5 0.13 156);
  font-weight: 700;
}

.hero__tip small {
  display: block;
  color: var(--ink-faint);
  margin-top: 2px;
  font-size: 0.72rem;
}

/* --- Pista de scroll abajo-izquierda (línea + texto, como Ari) ----------------- */
.hero__cue {
  position: absolute;
  left: clamp(1.25rem, 4vw, 3rem);
  bottom: 1.5rem;
  z-index: 4;
  display: none;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(0.55 0.01 250);
  white-space: nowrap;
}

@media (min-width: 961px) {
  .hero--on .hero__cue {
    display: inline-flex;
  }
}

.cue__line {
  width: 1px;
  height: 2.4rem;
  background: oklch(0.82 0.006 250);
  flex: none;
}

/* --- Móvil: escenario 3D arriba (a plena vista) + contenido compacto debajo ---- */
@media (max-width: 960px) {
  .hero--on .hero__gl.is-on {
    opacity: 1;
  }

  .hero__act2,
  .hero__cue,
  .hero__tip {
    display: none !important;
  }

  /* Sin 3D en el celular (three.js pesaba varios segundos de carga ahí), la
     tarjeta compacta de activación vuelve a ser el visual del hero: es DOM +
     CSS puro, no cuesta nada y mantiene el hero con vida. home.css la oculta
     en angosto por defecto; aquí se re-activa solo para el hero 3D. */
  .hero--3d .hero__visual {
    display: block;
    width: min(400px, 100%);
    /* margen superior corto: en el celular el hero debe sentirse compacto */
    margin: 1.25rem auto 0.4rem;
  }

  /* Con el 3D en camino (sonda h3d-wait) la tarjeta no parpadea: invisible
     pero guardando su sitio. Con el 3D ya VIVO (hero--live) se retira del
     todo — en el celular el visual del hero es la constelación (20-jul-2026);
     la banda superior --h3dStage toma su lugar con transición. Si el 3D
     falla, las clases se quitan y la tarjeta vuelve sola. */
  html.h3d-wait .hero--3d .hero__visual {
    opacity: 0;
  }

  .hero--live .hero__visual {
    display: none;
  }

  .hero--3d .hero__beam {
    display: none;
  }

  /* hero3d.js fija --h3dStage (alto de la banda del 3D) y centra ahí la
     constelación; sin WebGL la variable no existe y no se reserva nada.
     La banda se reserva desde .hero--live (apenas hay 3D seguro) y con
     transición: el contenido baja suave una sola vez, no de golpe. */
  .hero__ari {
    transition: padding-top 0.5s var(--ease-out);
  }

  .hero--live .hero__ari {
    padding-top: var(--h3dStage, 0px);
  }

  .hero--live .hero__sticky {
    padding-block: 1.25rem 1.75rem;
  }

  .hero__brand {
    font-size: clamp(2.6rem, 14vw, 3.4rem);
  }

  .hero--3d .hero__lede {
    margin-top: 0.9rem;
  }

  .hero__stats {
    flex-direction: row;
    gap: 1rem;
    margin-top: 0.4rem;
  }

  /* Con CUATRO cifras (se sumó "Productos vendidos"), en el celular van en
     rejilla de 2×2: dos por fila, divisor solo en la columna derecha. */
  .hstat {
    flex: 1 1 40%;
    border-top: 0;
    border-left: 1px solid var(--border);
    padding: 0.2rem 0 0.2rem 1rem;
  }

  .hstat:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }

  .hstat b {
    font-size: 1.5rem;
  }

  .hstat > span {
    font-size: 0.58rem;
    letter-spacing: 0.12em;
  }

  /* La fila de cifras no debe heredar la dirección columna del CTA */
  .hero__stats {
    flex-wrap: wrap;
  }

  .hero__cta {
    flex-basis: 100%;
    margin-top: 1.2rem;
  }

  .hero__cta .btn {
    width: 100%;
    justify-content: center;
  }

  .hero__ghostpill {
    justify-content: center;
  }
}

/* Con movimiento reducido, hero3d.js no arranca; por si acaso, el lienzo fuera. */
@media (prefers-reduced-motion: reduce) {
  .hero__gl {
    display: none;
  }
}

/* --- Formato VERTICAL ancho (monitor rotado, ventana alta, ≥961px) -------------
   La constelación SÍ corre, pero con composición propia: vive en la mitad
   superior del hero y el contenido baja en dos columnas (marca | cifras). El
   tour queda apagado (hero3d.js): en vertical las secciones no tienen costado
   libre. Sin pista de relevo: min-height 100svh más 40–60vh de pista, pensados
   para paisaje, dejaban un vacío enorme en un viewport tan alto. Van al final
   del archivo a propósito: ganan por orden a las reglas de arriba. */
@media (min-width: 961px) and (max-aspect-ratio: 9/10) {
  .hero--3d {
    min-height: 0;
  }

  .hero--3d::after {
    content: none;
  }

  .hero--3d .hero__sticky {
    position: relative;
    top: auto;
    min-height: min(calc(100svh - var(--headerH, 4.5rem)), 720px);
  }

  .s-productos {
    margin-top: 0;
  }

  /* Con el 3D vivo (o en camino: h3d-wait), el hero crece a media pantalla
     alta y el contenido se alinea ABAJO; la banda superior es del 3D. Si el
     3D falla, h3d-wait se quita y vuelve el hero compacto con su panel. */
  .hero--live .hero__sticky,
  html.h3d-wait .hero__sticky {
    min-height: min(calc(88svh - var(--headerH, 4.5rem)), 1460px);
    align-items: flex-end;
  }

  .hero--live .hero__ari,
  html.h3d-wait .hero__ari {
    padding-bottom: clamp(1.5rem, 4svh, 4rem);
  }

  /* Dos columnas: la marca a la izquierda, las cifras a la derecha. El panel
     de respaldo no se pinta (el centro es del lienzo). */
  .hero--on .hero__sticky>.container.hero__ari,
  html.h3d-wait .hero__sticky>.container.hero__ari {
    grid-template-columns: minmax(0, 1.5fr) minmax(230px, 1fr);
  }

  .hero--on .hero__ari .hero__visual,
  html.h3d-wait .hero__ari .hero__visual {
    display: none;
  }

  .hero--on .hero__ari .hero__stats,
  html.h3d-wait .hero__ari .hero__stats {
    grid-column: 2;
  }
}