/*
 * 20-mobile-hero-fix.css - Correccion movil: solapamiento titulo/subtitulo del hero y pasarela vertical apilada.
 * Origen: index.html, <style> #6 (desde la linea 1). Contenido identico al original.
 */
/* Final override: fixes hero title/subtitle/scroll-cue overlap on mobile.
   Root cause: earlier layers center the title absolutely in the hero box while
   the subtitle is pinned to a fixed bottom-vh offset, so a wrapped 2-line title
   collides with the subtitle on narrow screens. This puts them back in normal
   document flow, stacked with real spacing, on mobile only. */
@media(max-width:900px){
  .hero-copy{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    height:auto!important;
    max-height:78%!important;
    transform:none!important;
  }
  .hero-title{
    position:relative!important;
    line-height:1.02!important;
    margin-bottom:22px!important;
  }
  .hero-sub{
    position:relative!important;
    bottom:auto!important;
    left:auto!important;
    transform:none!important;
    margin:0 auto!important;
    text-align:center!important;
  }
  .scrollcue{bottom:16px!important}
}
@media(max-width:560px){
  .hero-title{font-size:15vw!important;margin-bottom:18px!important}
  .hero-sub{font-size:13px!important;max-width:280px!important}
}

/* Regla 1 (continuación): "Vivir sin límites" — el carrusel 3D pasa a una
   pasarela vertical apilada en celulares, en una sola fila limpia, 100% de
   ancho, sin transformar ni aplastar las fotos. */
@media(max-width:640px){
  .gallery-stage{
    height:auto!important;min-height:0!important;perspective:none!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    justify-content:flex-start!important;overflow:visible!important;gap:16px!important;
  }
  .card{
    position:static!important;width:100%!important;height:360px!important;
    transform:none!important;opacity:1!important;filter:none!important;
    flex-shrink:0!important;box-shadow:0 20px 50px rgba(0,0,0,.35)!important;
  }
  .gallery-controls{display:none!important}
  .gallery-wrap{min-height:0!important;height:auto!important}
}