/* Héroes de pestaña (26-sep-2026, pedido de Carlitos): una FOTO, no un video.
   Los trajes no se leen bien en video; la referencia es la pareja a la derecha, en luz
   cálida, y el lado izquierdo en sombra donde vive el texto. Una sola pieza para las
   cinco pestañas: Inicio (rojo), Trajes (azul), Cómo funciona (fucsia), Preguntas (rojo)
   y Reservar (fucsia). Escritorio = foto extendida a lo ancho; celular = la foto vertical
   original arriba y el texto debajo, sin tapar a la pareja. */
.syt-hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:min(84svh,780px);padding:clamp(6.5rem,13vh,8.5rem) 0 clamp(3rem,8vh,5rem);overflow:hidden;background:#05060a;color:#fff}
.syt-hero--compacta{min-height:min(64svh,580px)}
.syt-hero__foto{position:absolute;inset:0;z-index:-2;margin:0}
.syt-hero__foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:right center}
.syt-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,rgba(5,6,10,.9) 0%,rgba(5,6,10,.62) 30%,rgba(5,6,10,.12) 52%,rgba(5,6,10,0) 64%),
  linear-gradient(0deg,#05060a 0%,rgba(5,6,10,0) 24%),
  linear-gradient(180deg,rgba(5,6,10,.55) 0%,rgba(5,6,10,0) 18%)}
.syt-hero__contenido{position:relative;width:100%}
.syt-hero__copy{max-width:min(36rem,46%)}
.syt-hero .editorial-title{margin-bottom:18px}
.syt-hero .editorial-lead{color:#ff6a13;font-size:clamp(1.5rem,3.2vw,3rem);line-height:.95;text-shadow:0 2px 16px rgba(0,0,0,.95)}
.syt-hero .editorial-heavy{color:#fff;font-size:clamp(2.6rem,5vw,4.8rem);line-height:.9;text-shadow:0 2px 3px rgba(0,0,0,.85),0 8px 28px rgba(0,0,0,.7)}
.syt-hero .hero-desc{max-width:44ch;color:#f1f5f9;text-shadow:0 2px 3px rgba(0,0,0,.85),0 6px 22px rgba(0,0,0,.7)}
.syt-hero__nota{margin:14px 0 0;color:#cbd5e1;font-size:.9rem;text-shadow:0 2px 8px rgba(0,0,0,.85)}

@media (max-width:760px){
  .syt-hero,.syt-hero--compacta{display:block;min-height:0;padding:0 0 2.25rem}
  .syt-hero::before{display:none}
  .syt-hero__foto{position:relative;inset:auto;z-index:0}
  .syt-hero__foto img{height:auto;aspect-ratio:4/5;object-position:center top}
  .syt-hero__foto::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#05060a 0%,rgba(5,6,10,.6) 20%,rgba(5,6,10,0) 42%),linear-gradient(180deg,rgba(5,6,10,.5) 0%,rgba(5,6,10,0) 16%)}
  .syt-hero__contenido{z-index:1;margin-top:-22%}
  .syt-hero__copy{max-width:none}
  .syt-hero .editorial-lead{font-size:clamp(1.3rem,6.6vw,1.75rem)}
  .syt-hero .editorial-heavy{font-size:clamp(2.1rem,10vw,2.7rem)}
  .syt-hero .hero-desc{font-size:.98rem}
}

/* Banda de fotos del catálogo: reemplaza el plano en video entre capítulos. */
.foto-banda{position:relative;isolation:isolate;display:grid;align-items:end;min-height:52svh;overflow:hidden;background:#05060a}
.foto-banda>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:right center}
.foto-banda::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,6,10,.9),rgba(5,6,10,.35) 55%,rgba(5,6,10,.5)),linear-gradient(0deg,#05060a 0%,rgba(5,6,10,0) 30%)}
.foto-banda .motion-scene__content{position:relative}
@media (max-width:760px){.foto-banda{min-height:46svh}.foto-banda>img{object-position:62% center}.foto-banda::before{background:linear-gradient(180deg,rgba(5,6,10,.2),rgba(5,6,10,.92) 85%)}}

/* Inicio: el "proceso claro" era la segunda fase del video; ahora es una sección propia, legible sin scroll. */
.syt-proceso-claro{padding:clamp(3.5rem,8vw,6rem) 0;background:transparent!important;color:#e5e7eb}
.syt-proceso-claro__wrap{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media (min-width:900px){.syt-proceso-claro__wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.syt-proceso-claro .editorial-lead{color:#ff7a27}
.syt-proceso-claro .editorial-heavy{font-size:clamp(2.4rem,4.6vw,4rem)}

/* Morado: no hay foto del traje puesto; su tarjeta muestra el penacho real sobre fondo claro, completo y sin recortar. */
.traje-card img.traje-card__pieza{aspect-ratio:3/4;width:100%;height:auto;object-fit:contain;background:#f7f3fb;padding:10% 6%}
.syt-proceso-claro .btn-ghost{color:#fff!important;border-color:rgba(255,255,255,.4)!important;background:rgba(255,255,255,.04)!important}