/* ============================================================================
   SECTOR 28 v3.5 · Round PDF Observaciones - Web (Salvo)
   - Fade top mas amplio en cross-cards (integracion visual con parrafo anterior)
   - CTA de cross-card estilo boton claro (borde + padding + background)
   ============================================================================ */

/* Fade top mas alto y con mas pasos para que la banda no se sienta cortada
   respecto al parrafo del cuento anterior */
.band-cross--scenic::before {
  height: 160px;
  background: linear-gradient(180deg,
    var(--s28-ink) 0%,
    rgba(15, 20, 25, 0.85) 25%,
    rgba(0, 0, 0, 0.55) 55%,
    rgba(0, 0, 0, 0.20) 80%,
    rgba(0, 0, 0, 0.0)   100%);
  z-index: 1;
}

/* Fade bottom simetrico para la siguiente seccion, mismo criterio */
.band-cross--scenic::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.0) 0%,
    rgba(15,20,25,0.55) 60%,
    var(--s28-ink) 100%);
  pointer-events: none;
  z-index: 1;
}

/* CTA de la cross-card: estilo boton claro (borde + fondo + padding).
   Mantengo la tipografia display italica del sistema, solo agrego el chrome
   de boton para que se lea inequivocamente como CTA. */
.band-cross--scenic .band-cross__cta {
  padding: 14px 28px;
  border: 1.5px solid rgba(255, 177, 56, 0.55);
  border-radius: 3px;
  background: rgba(255, 177, 56, 0.08);
  color: var(--s28-paper);
  transition: background 240ms, border-color 240ms, transform 240ms;
  margin-top: 6px;
}
.band-cross--scenic .band-cross__cta strong {
  color: var(--s28-sodio);
}
.band-cross--scenic .band-cross__cta .arrow {
  color: var(--s28-sodio);
}
.band-cross--scenic .band-cross__cta:hover {
  background: rgba(255, 177, 56, 0.16);
  border-color: rgba(255, 177, 56, 0.85);
  color: var(--s28-paper);
}
.band-cross--scenic .band-cross__cta:hover .arrow {
  transform: translateX(4px);
}

/* Mobile: menos padding y letra */
@media (max-width: 640px) {
  .band-cross--scenic .band-cross__cta {
    padding: 12px 20px;
    gap: 12px;
  }
  .band-cross--scenic::before { height: 110px; }
  .band-cross--scenic::after { height: 80px; }
}

/* ─────────────────────────────────────────────────────────────────
   FIX 5 · FONDOS NEGROS EN iOS SAFARI
   Causa: iOS Safari no renderiza backdrop-filter sobre crossfade
   y no garantiza autoplay de multiples <video> simultaneos.
   Solución: en móvil los planos crossfade muestran el poster como
   background-image de fallback en el plano__bg, y se desactiva
   backdrop-filter en los inner panels para no interferir con GPU.
   El body ya es --s28-ink (#0F1419) — el fondo "negro" era el body
   colándose donde el video no renderizaba.
───────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* Plano hero: usar el poster móvil si el video no renderiza */
  .plano--hero .plano__bg {
    background-color: var(--s28-ink-soft);
    background-image: url('../images/sector28-hero-v2-mobile.webp');
    background-size: cover;
    background-position: center center;
  }

  /* Video crop móvil del hero — desplaza el frame para que
     "SECTOR 28" quede visible y Skyline no domine el encuadre */
  .plano--hero .plano__bg video,
  .plano--hero .plano__bg img {
    object-position: 72% center;
  }

  /* Poster móvil SVG/webp encima del video cuando video falla —
     se oculta si el video renderiza correctamente (video ocupa inset 0) */
  .hero-mobile-poster {
    display: none; /* solo actúa como fallback declarativo en el HTML */
  }

  /* Planos con crossfade: fallback de imagen de fondo para iOS */
  .plano--skyline .plano__bg--crossfade {
    background-color: var(--s28-ink-soft);
    background-image: url('../images/v3/04-skyline-interior-v2-poster.webp');
    background-size: cover;
    background-position: center center;
  }

  .plano--cafetismo .plano__bg--crossfade {
    background-color: var(--s28-ink-soft);
    background-image: url('../images/v3/05-cafetismo-interior-poster.webp');
    background-size: cover;
    background-position: center center;
  }

  .plano--panypizza .plano__bg--crossfade {
    background-color: var(--s28-ink-soft);
    background-image: url('../images/v3/06-pan-y-pizza-interior-poster.webp');
    background-size: cover;
    background-position: center center;
  }

  /* Plano cinturon gris: poster de fallback */
  .plano--cinturon .plano__bg {
    background-color: var(--s28-ink-soft);
    background-image: url('../images/v3/03-cinturon-gris-poster.webp');
    background-size: cover;
    background-position: center center;
  }

  /* Los videos crossfade en móvil: reducir a UN solo video activo
     para aliviar presión de GPU. El .is-fading se oculta completamente. */
  .plano__bg--crossfade video.is-fading {
    display: none;
  }

  /* El panel de texto Skyline (con backdrop-filter) puede fallar en iOS
     con muchos elementos GPU activos. Fallback sin backdrop-filter. */
  .plano--skyline .plano__content--right .plano__inner {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(15, 20, 25, 0.72);
  }
}