.hero-section {
  /* var(--jt-screen-h) y no 100svh: ver la nota de --jt-zoom en base.css. */
  min-height: var(--jt-screen-h);
  background: var(--brand-ink);
  isolation: isolate;
}

.hero-stage,
.hero-stage-tint,
.hero-stage-vignette,
.hero-video,
.hero-scene-poster {
  position: absolute;
  inset: 0;
}

.hero-poster {
  background:
    radial-gradient(circle at 30% 18%, rgba(62, 107, 58, 0.14) 0%, transparent 22%),
    radial-gradient(ellipse at 40% 60%, rgba(12, 29, 10, 0.95) 0%, rgba(12, 20, 11, 0.98) 55%, #040803 100%);
}

.hero-scene-poster {
  background: center / cover no-repeat;
  opacity: 0;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.035);
  transition:
    opacity 1.15s ease,
    transform 1.65s ease;
}

.hero-video.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Estas dos capas van una encima de la otra sobre la foto de la escena, así que
   su oscurecimiento se MULTIPLICA: con los valores anteriores (tint hasta 0.86
   y viñeta hasta 0.56) en la esquina inferior derecha solo pasaba ~6% de la luz
   de la imagen, y la escena se perdía. Medido: la foto se veía un 36% más
   oscura de lo que es.
   Bajados ~40% conservando la misma forma del degradado (más veladura a la
   derecha, donde no hay texto, y menos al centro). El contraste del texto del
   hero sigue en 13:1 — el mínimo accesible es 4.5:1, así que hay margen de
   sobra si se quisiera aclarar todavía más. */
.hero-stage-tint {
  background:
    linear-gradient(90deg, rgba(var(--brand-water-rgb), 0.42) 0%, rgba(9, 20, 8, 0.18) 28%, rgba(8, 18, 7, 0.26) 48%, rgba(4, 8, 3, 0.40) 82%, rgba(0, 0, 0, 0.58) 100%);
}

.hero-stage-vignette {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0.38) 100%);
}

.hero-topbar,
.hero-footer,
.hero-content {
  z-index: 2;
}

.hero-topbar {
  padding-top: clamp(1rem, 2vw, 1.85rem);
}

.hero-topbar-inner,
.hero-footer-inner {
  min-height: 1px;
}

.hero-cta {
  min-height: 3.25rem;
  padding: 0.85rem 1.35rem;
  border: 1px solid rgba(var(--brand-sand-rgb), 0.18);
  border-radius: var(--button-radius);
  background: rgba(var(--brand-ink-soft-rgb), 0.58);
  color: var(--hero-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 500;
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    transform 220ms ease;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
}

.hero-cta:hover,
.hero-cta:focus-visible {
  background: rgba(var(--brand-canopy-rgb), 0.22);
  border-color: rgba(var(--brand-canopy-rgb), 0.5);
  transform: translateY(-1px);
}

.hero-logo-link {
  padding: 0.35rem 0;
  flex: 0 0 auto;
}

.hero-logo {
  width: clamp(7rem, 12vw, 10.5rem);
  mix-blend-mode: multiply;
  filter: brightness(1.08) contrast(1.03);
}

/* Logo Joy Tree estático en la esfera — la animación "JoyTree by TAO"
   ahora vive en el nav principal y en el footer (ver joytree-brand.css). */
.hero-logo-group {
  position: relative;
  align-items: center;
}

.hero-logo-link {
  position: relative;
  z-index: 2;
}

/* ── Secuencia sincronizada (10s):
   0-18%  JoyTree en reposo
   18-30% JoyTree sube al frente
   30-42% BY TAO aparece (JoyTree ya está arriba)
   42-60% ambos visibles
   60-75% BY TAO se retira detrás de JoyTree
   75-87% JoyTree baja a su posición (BY TAO ya oculto)
   87-100% JoyTree en reposo → loop
── */

@keyframes jtTaoReveal {
  /* Oculto mientras JoyTree sube */
  0%, 30% {
    opacity: 0;
    transform: translateX(0) translateY(0) scale(0.04);
    filter: blur(14px);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); /* spring para la llegada */
  }
  /* JoyTree terminó de subir → BY TAO emerge */
  42% {
    opacity: 1;
    transform: translateX(clamp(6.5rem, 9.5vw, 9.5rem)) translateY(0px) scale(1);
    filter: blur(0px);
    animation-timing-function: ease-in-out;
  }
  /* Levitación sutil — presencia viva */
  50% {
    opacity: 0.94;
    transform: translateX(clamp(6.5rem, 9.5vw, 9.5rem)) translateY(-3px) scale(0.997);
    filter: blur(0px);
    animation-timing-function: ease-in-out;
  }
  /* Vuelve al centro — listo para retirarse */
  60% {
    opacity: 1;
    transform: translateX(clamp(6.5rem, 9.5vw, 9.5rem)) translateY(0px) scale(1);
    filter: blur(0px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.8, 0.6);
  }
  /* Viaja hacia JoyTree con aceleración */
  70% {
    opacity: 0.4;
    transform: translateX(clamp(1.5rem, 2.5vw, 2.5rem)) translateY(0px) scale(0.42);
    filter: blur(6px);
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }
  /* Completamente oculto — JoyTree puede bajar */
  75%, 100% {
    opacity: 0;
    transform: translateX(0) translateY(0) scale(0.04);
    filter: blur(14px);
  }
}

/* JoyTree: sube cuando BY TAO va a aparecer, baja solo cuando BY TAO ya está oculto */
@keyframes jtJTLift {
  /* Reposo */
  0%, 18%  {
    transform: scale(1) translateZ(0px);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* Sube al frente — BY TAO está por emerger */
  30%  {
    transform: scale(1.08) translateZ(14px);
    animation-timing-function: linear;
  }
  /* Se mantiene elevado mientras BY TAO está presente y se retira */
  75%  {
    transform: scale(1.08) translateZ(14px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* BY TAO ya oculto → JoyTree baja con elegancia */
  87%  {
    transform: scale(1) translateZ(0px);
    animation-timing-function: linear;
  }
  100% { transform: scale(1) translateZ(0px); }
}

/* Glow: peak cuando JoyTree termina de subir y BY TAO empieza */
@keyframes jtJTGlow {
  0%, 16%  { filter: brightness(1.08) contrast(1.03); }
  30%      { filter: brightness(1.42) contrast(1.07) saturate(1.1); }
  42%, 60% { filter: brightness(1.12) contrast(1.04); }
  75%      { filter: brightness(1.08) contrast(1.03); }
  100%     { filter: brightness(1.08) contrast(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-tao-badge  { animation: none; opacity: 0; }
  .hero-logo-link  { animation: none; }
  .hero-logo       { animation: none; }
}

.hero-content {
  padding-top: clamp(1rem, 3vw, 2rem);
  padding-bottom: clamp(1rem, 3vw, 2rem);
  gap: clamp(1.25rem, 3.5vw, 2.25rem);
}

.hero-intro-heading {
  max-width: 52rem;
  padding: 0 1rem;
  /* El título quedaba a 33px del nodo de las 05:59 en escritorio y a 10px en
     teléfono — se leía encimado contra la esfera. Este par de márgenes
     opuestos lo sube sin mover el dial ni cambiar la altura total del bloque
     (el negativo arriba lo levanta, el positivo abajo devuelve el espacio),
     así el centrado vertical del hero queda intacto. */
  margin-top: calc(-1 * clamp(2.4rem, 5vw, 3.6rem));
  margin-bottom: clamp(2.4rem, 5vw, 3.6rem);
}

.hero-intro-kicker {
  margin: 0 0 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hero-accent);
  font-weight: 600;
  text-shadow: 0 1px 6px rgba(12, 20, 11,0.9);
  text-align: right;
}

.hero-intro-title {
  margin: 0;
  font-family: var(--font-serif);
  text-transform: uppercase;
  line-height: 1;
  font-size: var(--section-title-size);
  font-weight: 400;
  color: var(--hero-text);
  text-shadow: 0 2px 12px rgba(12, 20, 11,0.85);
}

.hero-experience {
  width: 100%;
  min-height: 0;
}

.hero-dial {
  --dial-size: min(64vw, 40rem);
  --accent-start-angle: -90deg;
  --accent-circumference: 289;
  --accent-segment-length: 57.8;
  width: var(--dial-size);
  min-width: 18rem;
  aspect-ratio: 1 / 1;
}

.hero-dial-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-dial-ring circle {
  fill: none;
  transform-origin: center;
  transform-box: fill-box;
}

.hero-dial-ring-base {
  stroke: var(--hero-ring);
  stroke-width: 0.45;
}

.hero-dial-ring-accent {
  stroke: var(--hero-accent);
  stroke-width: 0.65;
  stroke-linecap: round;
  stroke-dasharray: var(--accent-segment-length) var(--accent-circumference);
  transform: rotate(var(--accent-start-angle));
  transition:
    transform 760ms cubic-bezier(0.25, 0.8, 0.25, 1),
    stroke-dasharray 760ms cubic-bezier(0.25, 0.8, 0.25, 1);
  filter: drop-shadow(0 0 12px rgba(var(--brand-canopy-rgb), 0.2));
}

.hero-dial-times,
.hero-dial-marker {
  position: absolute;
  inset: 0;
}

.hero-time-node,
.hero-dial-marker {
  left: 50%;
  top: 50%;
}

.hero-time-node {
  position: absolute;
  width: 7rem;
  height: 3.6rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 999px;
  transform-origin: center;
}

.hero-time-node-label,
.hero-time-node-dot {
  position: absolute;
  left: 50%;
  top: 50%;
}

.hero-time-node-label {
  min-width: 4.25rem;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(var(--brand-sand-rgb), 0.54);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  transform:
    translate(-50%, -50%)
    translate(var(--label-offset-x, 0px), var(--label-offset-y, -36px));
  transition:
    color 300ms ease,
    opacity 300ms ease,
    transform 520ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

.hero-time-node-dot {
  width: 0.35rem;
  height: 0.35rem;
  margin-left: -0.175rem;
  margin-top: -0.175rem;
  border-radius: 50%;
  background: rgba(var(--brand-sand-rgb), 0.28);
  transition: background-color 260ms ease, transform 260ms ease;
}

.hero-time-node.is-active .hero-time-node-label {
  color: var(--hero-accent);
}

.hero-time-node.is-active .hero-time-node-dot {
  background: var(--hero-accent);
  transform: scale(1.18);
}

.hero-time-node:focus-visible .hero-time-node-label {
  color: var(--hero-text);
}

.hero-time-node:focus-visible .hero-time-node-dot {
  background: var(--hero-accent);
  box-shadow: 0 0 0 0.28rem rgba(var(--brand-canopy-rgb), 0.2);
}

.hero-dial-marker {
  position: absolute;
  width: 2.75rem;
  height: 0.35rem;
  margin-left: -1.375rem;
  margin-top: -0.175rem;
  pointer-events: none;
  transition: transform 760ms cubic-bezier(0.25, 0.8, 0.25, 1);
  animation: markerFloat 2.4s ease-in-out infinite;
}

.hero-dial-marker-dot {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--brand-canopy-rgb), 0.78), rgba(var(--brand-sand-rgb), 0.92));
  box-shadow:
    0 0 16px rgba(var(--brand-canopy-rgb), 0.34),
    0 0 0 1px rgba(var(--brand-sand-rgb), 0.12);
}

.hero-dial-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 1.2rem;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(var(--brand-sand-rgb), 0.8), rgba(var(--brand-sand-rgb), 0));
}

.hero-nav,
.hero-copy {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.hero-nav {
  width: clamp(2.85rem, 5vw, 3.6rem);
  aspect-ratio: 1 / 1;
  border-radius: var(--button-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hero-text);
  background: rgba(var(--brand-sand-rgb), 0.12);
  border: 1px solid rgba(var(--brand-sand-rgb), 0.1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
  transition:
    background-color 240ms ease,
    border-color 240ms ease,
    transform 240ms ease;
}

.hero-nav i {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 1.5;
}

.hero-nav:hover,
.hero-nav:focus-visible {
  background: rgba(var(--brand-canopy-rgb), 0.22);
  border-color: rgba(var(--brand-canopy-rgb), 0.44);
  transform: translateY(-50%) scale(1.03);
}

.hero-nav--prev {
  left: 15%;
}

.hero-nav--next {
  right: 14%;
}

.hero-copy {
  left: 50%;
  width: min(28rem, 63%);
  transform: translate(-50%, -50%);
  transition:
    opacity 360ms ease,
    transform 620ms cubic-bezier(0.25, 0.8, 0.25, 1);
  height: 52%;
  justify-content: space-evenly !important;
}

.hero-copy.is-hidden {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 1rem));
}

.hero-copy-kicker {
  font-size: clamp(1.7rem, 1.75vw, 1.95rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
}

.hero-copy-support {
    /* Antes iba en versalitas: con el cuerpo más grande que pidió la
       dirección, la caja de texto dentro de la esfera se desbordaba y el
       mayúsculas sostenido se leía como un segundo título compitiendo con
       el nombre de la escena. En caja baja respira y jerarquiza. */
    font-size: clamp(1.02rem, 1.15vw, 1.28rem);
    letter-spacing: 0.01em;
    text-transform: none;
    line-height: 1.5;
}

.hero-copy-kicker {
  color: rgba(var(--brand-sand-rgb), 0.96);
  font-weight: 700;
}

.hero-copy-time {
  margin-top: 0.4rem;
  margin-bottom: 0.6rem;
  font-family: var(--font-body);
  line-height: 0.92;
  font-size: clamp(4rem, 9vw, 6.35rem);
  font-weight: 500;
  color: var(--hero-accent);
  text-shadow: 0 10px 38px rgba(0, 0, 0, 0.22);
}

.hero-copy-support {
  color: var(--hero-muted);
  max-width: 24rem;
}

.hero-footer {
  padding-bottom: clamp(4.5rem, 8vw, 7rem);
}

@keyframes markerFloat {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -0.35rem;
  }
}

@media (max-width: 991.98px) {
  .hero-logo {
    width: clamp(7rem, 21vw, 10rem);
  }

  .hero-dial {
    --dial-size: min(88vw, 40rem);
  }

  .hero-nav--prev {
    left: 15%;
  }

  .hero-nav--next {
    right: 14%;
  }
}

@media (max-width: 767.98px) {
  /* Corrección crítica: la regla de 991px ya da padding-top suficiente para
     el navbar fijo. Aquí solo ocultamos el logo redundante (el navbar ya lo muestra). */
  .hero-logo-link {
    display: none;
  }

  /* El badge TAO acompaña al logo — también se oculta en mobile */
  .hero-tao-badge {
    display: none;
  }

  .hero-topbar-inner {
    gap: 0;
  }

  .hero-cta {
    display: none !important;
  }

  .hero-logo {
    width: clamp(6.2rem, 24vw, 8.5rem);
  }

  .hero-dial {
    --dial-size: min(94vw, 34rem);
    min-width: 16rem;
  }

  .hero-copy {
    width: min(28rem, 63%);
    height: 64%;
  }

  .hero-copy-kicker {
    font-size: clamp(1.35rem, 4.4vw, 1.7rem);
  }

  .hero-copy-kicker,
  .hero-time-node-label {
    letter-spacing: 0.12em;
  }

  .hero-copy-support {
    max-width: 12.5rem;
    font-size: 0.85rem;
    letter-spacing: 0;
  }

  /* En teléfono el título no puede subir tanto: arriba está el logo Joy Tree,
     y ese logo ya no puede moverse porque el padding del topbar es justo lo
     que lo mantiene por debajo de la barra fija. Con más recorrido, "EL RITMO
     DE JOY TREE" se montaba sobre el logo. */
  .hero-intro-heading {
    margin-top: -0.6rem;
    margin-bottom: 0.6rem;
  }

  .hero-nav--prev {
    left: 15%;
  }

  .hero-nav--next {
    right: 15%;
  }
}

@media (max-width: 575.98px) {
  /* En teléfono el espacio es muy reducido — ocultar el badge TAO */
  .hero-tao-badge {
    display: none;
  }

  .hero-dial {
    --dial-size: min(94vw, 27rem);
  }

  .hero-nav {
    width: 2.7rem;
  }

  .hero-nav--prev {
    left: 8%;
  }

  .hero-nav--next {
    right: 8%;
  }

  .hero-copy {
    height: 70%;
  }

  .hero-copy-kicker {
    font-size: clamp(1.18rem, 4.2vw, 1.45rem);
  }

  .hero-copy-time {
    font-size: clamp(3.1rem, 14vw, 4.2rem);
  }

  .hero-time-node {
    width: 5.5rem;
    height: 3rem;
  }

  .hero-time-node-label {
    min-width: 3.7rem;
    font-size: 0.62rem;
  }
}

/* ===== TABLET LANDSCAPE: 992px–1199px (iPad moderno horizontal) ===== */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .hero-dial {
    --dial-size: min(68vw, 40rem);
  }

  .hero-copy-kicker {
    font-size: clamp(1.9rem, 2.15vw, 2.3rem);
  }

  .hero-copy-time {
    font-size: clamp(3.6rem, 7.5vw, 5.5rem);
  }

  .hero-nav--prev { left: 13%; }
  .hero-nav--next { right: 12%; }
}

/* ===== TABLET LANDSCAPE: 768px–991px horizontal (Android / iPad antiguo) ===== */
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: landscape) {
  .hero-dial {
    --dial-size: min(60vw, 33rem) !important;
  }

  .hero-logo {
    width: clamp(6rem, 16vw, 9rem);
  }

  .hero-copy {
    width: min(26rem, 60%);
  }

  .hero-copy-kicker {
    font-size: clamp(1.72rem, 2.7vw, 2.1rem);
  }

  .hero-copy-time {
    font-size: clamp(3rem, 7vw, 4.8rem);
    margin-top: 0.3rem;
    margin-bottom: 0.4rem;
  }

  .hero-copy-support {
    font-size: clamp(0.92rem, 1.6vw, 1.2rem);
    max-width: 18rem;
  }

  .hero-nav--prev { left: 12%; }
  .hero-nav--next { right: 11%; }

  .hero-footer {
    padding-bottom: clamp(3rem, 6vw, 5rem);
  }
}

/* ===== LANDSCAPE: teléfonos horizontales (ancho > alto, altura < 500px) ===== */
@media (orientation: landscape) and (max-height: 500px) {
  .hero-section {
    min-height: 560px; /* permite scroll vertical si hace falta */
  }

  .hero-topbar {
    padding-top: clamp(3rem, 7vw, 4rem);
  }

  .hero-logo-link {
    display: none; /* navbar visible en landscape también */
  }

  .hero-cta {
    display: none !important;
  }

  .hero-dial {
    --dial-size: min(54vw, 24rem) !important;
    min-width: 14rem;
  }

  .hero-copy-kicker {
    font-size: clamp(1.4rem, 3.4vw, 1.95rem);
  }

  .hero-copy-time {
    font-size: clamp(2.4rem, 8vw, 3.5rem);
    margin-top: 0.2rem;
    margin-bottom: 0.3rem;
  }

  .hero-copy-support {
    font-size: clamp(0.74rem, 1.8vw, 1rem);
    max-width: 14rem;
  }

  .hero-nav--prev {
    left: 6%;
  }

  .hero-nav--next {
    right: 6%;
  }

  .hero-footer {
    padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
  }
}

/* ===== MOBILE: crossfade JoyTree → BY → TAO en el mismo punto ===== */
@media (max-width: 767.98px) {

  /* El grupo ocupa el espacio del logo y actúa como escenario fijo */
  .hero-logo-group {
    width: clamp(6rem, 20vw, 8rem);
    height: clamp(4.5rem, 15vw, 6.5rem);
    gap: 0;
  }

  /* Los tres elementos se apilan en el mismo punto: absolute + inset:0 */
  .hero-logo-link {
    display: flex !important;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    animation: jtMobileJT 10s 2.5s infinite both;
  }

  .hero-logo {
    width: 90%;
    height: 90%;
    object-fit: contain;
  }

  /* Badge cancela animación desktop y sirve de capa de superposición */
  .hero-tao-badge {
    display: block !important;
    position: absolute;
    inset: 0;
    animation: none;
    opacity: 1;
    transform: none;
    gap: 0;
  }

  .hero-tao-logo { display: none !important; }

  /* BY: ocupa todo el espacio del grupo, texto centrado */
  .hero-tao-by {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.2rem, 5vw, 1.6rem);
    animation: jtMobileBy 10s 2.5s infinite both;
  }

  /* Logo TAO Enso: centrado con margin:auto en el mismo espacio */
  .hero-tao-logo-sq {
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    width: auto;
    height: 85%;
    object-fit: contain;
    filter: brightness(1.12) drop-shadow(0 1px 6px rgba(0, 0, 0, 0.38));
    animation: jtMobileTao 10s 2.5s infinite both;
  }
}

/* ── Secuencia mobile: JoyTree → BY (solo) → TAO (solo) → JoyTree ── */

@keyframes jtMobileJT {
  0%, 14%   { opacity: 1; }
  21%       { opacity: 0; }
  69%       { opacity: 0; }
  77%, 100% { opacity: 1; }
}

@keyframes jtMobileBy {
  0%, 23%   { opacity: 0; transform: translateY(0.35rem); }
  30%       { opacity: 1; transform: translateY(0); }
  40%       { opacity: 1; transform: translateY(0); }
  46%, 100% { opacity: 0; transform: translateY(0.2rem); }
}

@keyframes jtMobileTao {
  0%, 48%   { opacity: 0; transform: translateY(0.45rem) scale(0.88); }
  56%       { opacity: 1; transform: translateY(0) scale(1); }
  65%       { opacity: 1; transform: translateY(0) scale(1); }
  72%, 100% { opacity: 0; transform: translateY(0.2rem) scale(0.92); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo-link,
  .hero-tao-by,
  .hero-tao-logo-sq { animation: none !important; opacity: 1 !important; }
}

/* ════════════════════════════════════════════════════
   PRINT — Hero section
════════════════════════════════════════════════════ */
@media print {
  /* Cancelar todas las animaciones del hero */
  .hero-section,
  .hero-section * {
    animation:  none !important;
    transition: none !important;
  }

  /* Garantizar altura de página (svh no funciona en print, vh sí) y no clipar */
  .hero-section {
    min-height: 100vh   !important;
    overflow:   visible !important;
  }

  /* El stage cubre la sección — necesita que el padre tenga height */
  .hero-stage { overflow: visible !important; }

  /* Ocultar video (no imprime) */
  .hero-video { display: none !important; }

  /* Poster de escena — JS pone background-image + opacity:1 inline en el activo.
     Este override garantiza que se vea aunque las transiciones estén canceladas. */
  .hero-scene-poster {
    opacity:            1           !important;
    background-size:    cover       !important;
    background-position: center     !important;
  }

  /* Fondo oscuro de la marca siempre visible */
  .hero-poster { opacity: 1 !important; }

  /* Logo y badge: cancelar animaciones, forzar visibilidad */
  .hero-tao-badge,
  .hero-tao-badge * { opacity: 1 !important; transform: none !important; }

  /* Ocultar dial interactivo (nodos de tiempo con transforms inline) y pie */
  .hero-dial-ring,
  .hero-dial-times,
  .hero-dial-marker,
  .hero-nav,
  .hero-scrollcue,
  .hero-footer { display: none !important; }

  /* Simplificar el dial a contenedor de texto centrado */
  .hero-experience { position: relative !important; z-index: 3 !important; }

  .hero-dial {
    width:           100%    !important;
    aspect-ratio:    auto    !important;
    min-height:      0       !important;
    display:         flex    !important;
    align-items:     center  !important;
    justify-content: center  !important;
    padding:         3rem 1rem !important;
  }

  /* Texto central: sacar de posición absoluta */
  .hero-copy {
    position:   static  !important;
    transform:  none    !important;
    opacity:    1       !important;
    width:      100%    !important;
    max-width:  32rem   !important;
    margin:     0 auto  !important;
  }

  .hero-copy.is-hidden {
    opacity:   1    !important;
    transform: none !important;
  }

  /* Landscape: hero como screenshot — clipeado al alto de la página */
  body.jt-print-landscape .hero-section {
    max-height: 100vh !important;
    overflow:   hidden !important;
  }
}