/* ============================================
   FRANCISCANA — responsive.css
   Overrides mobile/tablet. La experiencia mobile
   conserva la sensación premium: tipografía grande,
   media protagonista, composiciones propias
   (no una versión "achicada" del desktop).
   ============================================ */

/* ---------- Tablet ---------- */
@media (max-width: 1100px){
  .editorial-intro .grid{gap:44px;}
  .universe .content{padding:0 32px 56px;}

  /* Bloques media+texto: en tablet el texto necesita más aire propio
     porque la columna se angosta */
  .pg-block .content{padding:var(--space-lg) clamp(32px, 4vw, 56px);}
  .ed-exp-panel{padding:var(--space-lg) clamp(32px, 4vw, 56px);}
}

/* ---------- Tablet: una sola columna en los bloques media+texto ---------- */
@media (max-width: 900px){
  .pg-block{grid-template-columns:1fr;}
  .pg-block .media{min-height:clamp(280px, 52vw, 420px);order:1;}
  .pg-block .content{order:2;padding:var(--space-lg) 24px;}
  .pg-block.reverse .media{order:1;}
  .pg-block.reverse .content{order:2;}
  .pg-intro{padding-inline:24px;}
  .pg-cta{padding-inline:24px;}
  .pg-specs{gap:0 clamp(20px, 4vw, 32px);}
}

/* ---------- Mobile ---------- */
@media (max-width: 900px){
  :root{--section-gap:72px;}

  /* Header: se ocultan nav, CTA y mega menú; aparece el toggle */
  .main-nav{display:none;}
  .header-cta{display:none;}
  .nav-toggle{display:flex;}
  .mega,.mega-backdrop{display:none;}
  .site-header .container-wide{padding-top:20px;padding-bottom:20px;}
  .logo .logo-img{height:26px;}

  /* Hero mobile: carrusel fullscreen, media reencuadrada por slide */
  .hero{height:100svh;min-height:520px;}
  .hero-video{object-position:62% center;} /* mantiene el yate en cuadro en vertical */
  .hero-slide[data-slide-index="1"] .hero-media{object-position:52% 6%;}  /* al tope: todo el cielo disponible */
  .hero-slide[data-slide-index="2"] .hero-media{object-position:56% 6%;}  /* al tope: todo el cielo disponible */
  .hero-slide[data-slide-index="3"] .hero-media{object-position:center 6%;}

  /* Copy: siempre abajo-izquierda, nunca centrado; título fluido con clamp() */
  .hero-copy{left:24px;right:24px;bottom:100px;max-width:none;}
  .hero-title{font-size:clamp(1.7rem, 7.2vw, 2.3rem);margin-bottom:16px;}
  .hero-eyebrow{font-size:0.68rem;}

  /* Controles: compactos, esquina inferior derecha, cómodos al tacto */
  .hero-controls{right:24px;bottom:22px;gap:8px;}

  .scroll-cue{bottom:20px;}
  .scroll-cue .scroll-mark{width:34px;height:34px;}

  /* Intro editorial: una columna, mantiene aire y descuelgue con sangría */
  .editorial-intro .grid{grid-template-columns:1fr;gap:36px;}
  .editorial-intro .col-text{padding-top:0;padding-left:12vw;}

  /* Universos: bloques más compactos, texto siempre abajo-izquierda */
  .universe{min-height:72svh;}
  .universe .content,
  .universe.align-right .content{
    padding:0 24px 48px;
    text-align:left;align-items:flex-start;display:block;
  }
  .universe .content .frase{font-size:0.98rem;}

  /* Colección */
  .collection .head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:36px;}
  .fleet-grid{grid-template-columns:1fr;}
  .fleet-card{height:480px;}
  .fleet-card p{max-height:none;opacity:1;} /* en touch no hay hover: descripción siempre visible */

  /* Prueba social: sin offsets, lectura vertical limpia */
  .reviews-grid{grid-template-columns:1fr;gap:28px;}
  .review:nth-child(2),
  .review:nth-child(3){margin-top:0;}

  /* Footer */
  /* Footer mobile: una sola columna centrada.
     Con dos columnas los links se partían en dos líneas ("Alquiler de /
     Yates") y "Seguinos" quedaba solo en una tercera fila. */
  .footer-grid{
    grid-template-columns:1fr;
    gap:var(--space-md);
    text-align:center;
    margin-bottom:var(--space-md);
  }
  .footer-grid h3{margin-bottom:12px;}
  .pg-isotipo{width:44px;margin-bottom:16px;}
  .footer-links li{margin-bottom:8px;}
  .footer-brand .logo .logo-img{height:28px;}
  .footer-brand p{font-size:0.9rem;}
  /* En vertical: estrellas y puntaje en una línea, la etiqueta debajo.
     La línea divisoria vertical no funciona apilada, así que se saca. */
  .footer-reviews{
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 12px;
    text-align:center;
  }
  .footer-reviews .fr-label{
    flex-basis:100%;
    padding-left:0;
    border-left:0;
    font-size:0.72rem;
  }
  .footer-bottom{justify-content:center;text-align:center;gap:6px;}

  /* Componentes de páginas internas */
  .experience-grid{grid-template-columns:1fr;}
  .yacht-detail,.contact-layout{grid-template-columns:1fr;}
  .contact-side{align-items:center;text-align:center;}
  .contact-logo{width:min(230px, 62vw);margin-bottom:var(--space-sm);}
  .unit-split{grid-template-columns:1fr;}
  .unit-split .media{min-height:280px;order:1 !important;}
  .unit-split .content{order:2 !important;padding:var(--space-md) 28px;}
  .signature-callout{grid-template-columns:1fr;text-align:center;padding:40px 28px;}
}

/* ---------- Home editorial (secciones ed-) en mobile ---------- */
@media (max-width: 900px){
  .ed-intro{padding-inline:24px;}
  .ed-intro h1{font-size:clamp(2rem, 8vw, 2.8rem);}
  .ed-intro p{font-size:0.98rem;}

  /* Grilla: una imagen debajo de otra, sin achicarlas */
  .ed-grid{padding-inline:16px;}
  .ed-grid-inner{grid-template-columns:1fr;gap:14px;}
  .ed-tile{aspect-ratio:4/3;}
  .ed-tile-name{left:24px;bottom:24px;font-size:clamp(22px, 5.6vw, 30px);}
  .ed-tile-arrow{opacity:1;transform:none;width:1.1em;margin-left:0.28em;} /* sin hover en touch */

  .ed-chef{height:64svh;min-height:400px;}
  .ed-chef-copy{left:24px;right:24px;bottom:56px;max-width:none;}

  .ed-exp{min-height:0;flex-direction:column;}
  .ed-exp-media{flex-basis:auto;height:54svh;}
  .ed-exp-panel{flex-basis:auto;padding:var(--space-lg) 24px;}
  .ed-exp-panel h2,
  .ed-exp-panel p{max-width:none;}

  /* Reseñas: una columna en mobile */
  .ed-reviews-grid{grid-template-columns:1fr;gap:var(--space-md);}
  .ed-review p{max-width:none;font-size:0.98rem;}

  .ed-split-intro{padding-inline:24px;}
  .ed-split-grid{grid-template-columns:1fr;}
  .ed-dest{height:52svh;min-height:340px;}
  .ed-dest-cta{opacity:1;transform:none;} /* sin hover en touch: siempre visible */

}

/* ---------- Mobile chico ---------- */
@media (max-width: 480px){
  .universe .content h2{font-size:1.9rem;}
  .btn{padding:14px 26px;font-size:0.82rem;}
  .wa-float{width:52px;height:52px;bottom:18px;right:18px;}
  .wa-float svg{width:26px;height:26px;}
}

/* ---------- Banner de página interna en mobile ---------- */
@media (max-width: 900px){
  .page-hero{min-height:clamp(300px, 46vh, 420px);}
  .angra-cierre{min-height:clamp(420px, 62vh, 560px);padding:var(--space-lg) 20px;}
  .angra-cierre-caja{padding:34px 24px;}
  .page-hero h1{font-size:clamp(1.9rem, 8vw, 2.6rem);max-width:none;}
}