/* ============================================================
   RESPONSIVE.CSS
   Único archivo que controla el comportamiento por tamaño de
   pantalla. Se carga al final, así que siempre gana.

   Puntos de control verificados:
   320 · 375 · 390 · 430 · 768 · 1024 · 1440 · 1920
   ============================================================ */


/* ============================================================
   ESCRITORIO GRANDE  ·  1441 px y más
   El contenedor ya está limitado a 1280 px en variables.css,
   así que a 1440 y 1920 el diseño es idéntico al actual, sólo
   con más aire a los costados. Aquí sólo se evita que el hero
   crezca de más en monitores muy altos.
   ============================================================ */
@media (min-width:1441px){
  .hero-media{height:clamp(320px,52vh,600px);height:clamp(320px,52svh,600px)}
}


/* ============================================================
   TABLET Y ESCRITORIO CHICO  ·  hasta 1000 px
   (1024 px sigue usando el layout de escritorio)
   ============================================================ */
@media (max-width:1000px){

  /* rejillas de dos columnas pasan a una */
  .story-grid,
  .grid-2,
  .summ,
  .contrast{grid-template-columns:1fr}

  .grid-2{gap:2.6rem}

  /* rejillas de tres columnas pasan a dos */
  .grid-3,
  .packs,
  .cases,
  .cov,
  .net,
  .gal,
  .mats{grid-template-columns:1fr 1fr}

  .split{grid-template-columns:1fr;gap:2rem}

  /* ==========================================================
     "EL RECORRIDO DEL HUÉSPED" EN MÓVIL Y TABLET
     En escritorio la foto se queda fija y cambia sola mientras
     avanzas por los cuatro capítulos. Ese efecto no funciona en
     una pantalla angosta: la foto se va de la vista y el texto
     queda huérfano, así que se pierde la idea.
     Aquí se resuelve intercalando cada foto con SU capítulo:
     foto 1 → Llegada, foto 2 → Encuentro, foto 3 → Acción,
     foto 4 → Permanencia. Cada momento se lee junto a su imagen
     y el sello con la hora queda encima de cada foto.
     No cambia nada del HTML ni del JavaScript: display:contents
     saca las fotos y los capítulos de sus contenedores para
     poder ordenarlos en una sola rejilla.
     ========================================================== */
  .story-visual,
  .chapters{display:contents}

  .story-grid{display:grid;grid-template-columns:1fr;gap:0}

  /* el orden intercalado */
  .layer[data-layer="0"]{grid-row:1}
  .chapter[data-ch="0"]{grid-row:2}
  .layer[data-layer="1"]{grid-row:3}
  .chapter[data-ch="1"]{grid-row:4}
  .layer[data-layer="2"]{grid-row:5}
  .chapter[data-ch="2"]{grid-row:6}
  .layer[data-layer="3"]{grid-row:7}
  .chapter[data-ch="3"]{grid-row:8}

  /* cada foto pasa a ser un bloque normal, siempre visible.
     Se cubren los dos estados (.layer y .layer.on) porque el
     JavaScript sigue encendiendo y apagando la clase. */
  .layer,
  .layer.on{
    position:relative;inset:auto;
    opacity:1;transform:none;transition:none;
    height:clamp(215px,44vw,330px);
    border-radius:var(--radius-md);
    overflow:hidden;
    margin-bottom:1.15rem;
  }

  .chapter,
  .chapter.on{
    min-height:auto;opacity:1;
    padding:0 0 2.5rem;
    border-bottom:0;
  }
  .chapter:last-child{padding-bottom:0}

  /* lista numerada: el número y el título en la fila,
     el párrafo debajo alineado con el título */
  .cap{grid-template-columns:40px 1fr;gap:1rem}
  .cap p{grid-column:2}

  .hero{padding-top:7rem}
  .band{padding:3.6rem 0}
  .caps{margin-top:2.2rem}
}


/* ============================================================
   TABLET VERTICAL  ·  hasta 768 px
   ============================================================ */
@media (max-width:768px){

  /* FAQ: la respuesta aprovecha todo el ancho disponible */
  .q summary{font-size:1rem;padding:1.35rem 2.2rem 1.35rem 0}
  .q summary::after{top:1.7rem}
  .q p{padding:0 0 1.5rem 0;max-width:none}

  .tier-head{gap:.5rem;row-gap:.5rem}
  .tier-head p{font-size:.92rem}

  .side{padding:2rem 1.8rem}
  .contact-lines a{font-size:.96rem}
  .layer,
  .layer.on{height:clamp(200px,40vw,300px)}
}


/* ============================================================
   MÓVIL ANCHO  ·  hasta 640 px
   ============================================================ */
@media (max-width:640px){

  /* todas las rejillas a una sola columna */
  .grid-3,
  .packs,
  .cases,
  .cov,
  .net,
  .gal,
  .mats{grid-template-columns:1fr}

  .grid-3{gap:2rem;margin-top:2.2rem}
  .side,
  .card-body{padding:1.8rem 1.5rem}
  .summ{gap:1.6rem;margin-top:2.2rem}
  .cases{margin-top:2.2rem}
  .contrast{margin-top:2.2rem}
}


/* ============================================================
   ENCABEZADO Y DOCK EN MÓVIL  ·  hasta 768 px

   En móvil la navegación se va TODA al dock inferior flotante.
   El encabezado se queda únicamente con el logotipo.

   Antes había aquí un encabezado de dos filas con pestañas. Se
   retiró: sus funciones ahora viven en el dock, y tener las dos
   cosas sería navegación duplicada.

   El corte es 768 px, no los 600 px que usaba el encabezado
   anterior. Por encima de 768 px el escritorio queda EXACTAMENTE
   igual que siempre: fila única con pastillas y botón naranja.
   ============================================================ */
@media (max-width:768px){

  /* ---------- encabezado: sólo el logotipo ---------- */
  .nav-links,
  .nav-cta{display:none}

  :root{--nav-h:58px}
  .nav{padding:0}
  .nav-inner{flex-wrap:nowrap;gap:.5rem}
  .mark img{width:111px;height:26px}

  .hero{padding-top:calc(var(--nav-h) + 2.4rem)}
  .close{scroll-margin-top:var(--nav-h)}

  /* ---------- dock inferior ---------- */
  .dock{display:flex}

  /* el dock es fijo: hay que dejarle sitio al final del contenido
     para que no tape el pie de página ni el último botón */
  body{padding-bottom:calc(98px + env(safe-area-inset-bottom))}
}

@media (max-width:360px){
  /* misma ecuación con W=300 y cápsula=56, contando el borde: p=6.6 */
  .dock{left:10px;right:10px;height:66px;max-width:300px;padding:0 6.6px}
  .dock-ico{width:56px;height:56px}
  .dock-ico svg{width:25px;height:25px}
  .dock-item[data-dock="propiedades"] .dock-ico svg{width:27px;height:27px}
  .dock-item.is-active .dock-ico svg{width:28px;height:28px}
  .dock-item.is-active[data-dock="propiedades"] .dock-ico svg{width:30px;height:30px}
}


/* ============================================================
   MÓVIL  ·  hasta 520 px
   ============================================================ */
@media (max-width:520px){

  /* CTAs a todo el ancho: área de toque cómoda y sin huecos raros */
  .actions{flex-direction:column;align-items:stretch;gap:.7rem;margin-top:2rem}
  .actions .btn{width:100%}

  /* tabla de datos: etiqueta arriba, valor abajo, sin apretarse */
  .fact{flex-direction:column;gap:.15rem;padding:.85rem 0}
  .fact dd{text-align:left}

  .layer,
  .layer.on{height:clamp(190px,52vw,260px);margin-bottom:1rem}
  .chapter,
  .chapter.on{padding:0 0 2.1rem}
  .chapter p{max-width:none}

  .layer .stamp{left:1.1rem;bottom:1rem}

  .foot-inner{flex-direction:column;gap:.5rem}
}


/* ============================================================
   MÓVIL CHICO  ·  hasta 430 px  (iPhone 14/15/16 Plus y menores)
   ============================================================ */
@media (max-width:430px){

  :root{
    --gutter:92vw;          /* recupera un poco de ancho útil */
    --radius-lg:16px;
    --radius-md:14px;
  }

  /* el titular baja de tamaño en vez de romperse en sílabas */
  .xl{font-size:clamp(2.05rem,8.6vw,2.6rem);letter-spacing:-.04em}
  .lg{font-size:clamp(1.72rem,7.4vw,1.95rem)}
  .md{font-size:clamp(1.28rem,5.4vw,1.42rem)}

  .hero h1,
  .w-19ch{max-width:none}
  .hero .lede{margin-top:1.5rem}
  .hero-media{margin-top:2.4rem;height:clamp(260px,44vh,360px);height:clamp(260px,44svh,360px)}

  .btn{padding:.95rem 1.5rem;font-size:.95rem}

  .band{padding:3rem 0}

  .side,
  .card-body{padding:1.6rem 1.3rem}
  .case,
  .pack,
  .place,
  .partner{padding:1.5rem 1.3rem}
  .mat .txt{padding:1.15rem 1.2rem 1.3rem}

  .cap{padding:1.5rem 0;gap:.85rem;grid-template-columns:34px 1fr}
  .cap:hover{padding-left:0}          /* sin hover útil en táctil */

  .card .shot{height:200px}
  .gal .shot{height:220px}

  .q summary{font-size:.98rem;padding-right:2rem}
  .q p{font-size:.96rem}

  .contact-lines{margin-top:2rem}
  .contact-lines a{padding:1rem .1rem;font-size:.95rem}
  .contact-lines a:hover{padding-left:0}

  /* en movil se cierra el aire ENTRE logotipos para que quepan mas por
     pantalla; el logotipo no se encoge y el aire vertical se conserva */
  .pf-logo{padding:0 1.25rem}

  .foot{padding:2.2rem 0}
}


/* ============================================================
   MÓVIL MUY CHICO  ·  hasta 360 px  (iPhone SE y similares)
   ============================================================ */
@media (max-width:360px){

  :root{--gutter:94vw}

  .mark img{width:98px;height:23px}

  .xl{font-size:2rem}
  .btn{padding:.9rem 1.2rem;font-size:.93rem}
  .side,
  .card-body{padding:1.4rem 1.15rem}
}


/* ============================================================
   PANTALLAS TÁCTILES
   Se apagan los hover que en táctil se quedan "pegados"
   ============================================================ */
@media (hover:none){
  .card:hover,
  .case:hover,
  .pack:hover,
  .partner:hover{transform:none;box-shadow:none}
  .btn:hover{transform:none}
  .cap:hover{padding-left:0}
  .contact-lines a:hover{padding-left:0}
}


/* ============================================================
   MOVIMIENTO REDUCIDO
   Respeta la preferencia del sistema del visitante
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .rv-wipe{clip-path:none}
  .chapter{opacity:1}
}
/* Sólo en escritorio las capas se apilan y hay que ocultar las
   inactivas. En móvil las cuatro se ven intercaladas (arriba). */
@media (prefers-reduced-motion:reduce) and (min-width:1001px){
  .layer:not(.on){opacity:0}
  .stage>*{opacity:1;transform:none}
}