/* ============================================================
   ADAPTATIVO — se carga de último, manda sobre todo lo anterior
   ------------------------------------------------------------
   Regla de la casa: EL CONTENIDO NO SE OCULTA.
   En un sitio que vende paquetes, cada dato escondido es una
   pregunta que el huésped ya no hace. Lo único que puede
   desaparecer es lo decorativo: las palabras de fondo, el
   cursor propio, el grano. Todo lo demás se reordena.

   Cuatro medidas, y ninguna más:
     1180px  tablet horizontal — cae el menú, se aprietan las rejillas
      900px  tablet vertical   — todo a una columna
      620px  móvil             — densidad y áreas de toque
      400px  móvil pequeño     — última red de seguridad
   Aparte: orientación apaisada y pantallas bajas, que no son
   una medida de ancho sino de alto.
   ============================================================ */


/* ------------------------------------------------------------
   0. NADA EMPUJA EL ANCHO DE LA PÁGINA
   ------------------------------------------------------------
   Un item de grid o de flex tiene min-width:auto: no puede
   encogerse por debajo de su contenido. Si ese contenido es
   ancho —un carrusel, una tabla, una línea sin cortes— estira
   la columna y arrastra fuera de pantalla a todo lo que la
   acompaña, botones incluidos.
   Esta regla corta esa clase entera de error de raíz.
   ------------------------------------------------------------ */
.portada-red > *, .editorial-red > *, .exp-panel > *, .posada-red > *,
.comida-red > *, .plan > *, .ruta-red > *, .reserva-red > *,
.formulario > *, .pie-red > *, .dia > *{
  min-width:0;
}

/* Y el documento no puede desplazarse en horizontal, nunca */
html,body{ max-width:100%; overflow-x:clip; }


/* ------------------------------------------------------------
   1. ZONAS SEGURAS — el notch y la barra de gestos
   Necesita viewport-fit=cover en el <meta viewport>.
   ------------------------------------------------------------ */
.nav{ padding-top:max(clamp(16px,2.2vw,26px), env(safe-area-inset-top)); }
.wa{
  right:max(clamp(16px,2.5vw,30px), env(safe-area-inset-right));
  bottom:max(clamp(16px,2.5vw,30px), env(safe-area-inset-bottom));
}
.bandeja{ bottom:max(clamp(16px,3vw,30px), env(safe-area-inset-bottom)); }
.pie{ padding-bottom:max(var(--e-5), env(safe-area-inset-bottom)); }


/* ------------------------------------------------------------
   2. ELEMENTOS FIJOS QUE SE PISAN
   La bandeja y el botón de WhatsApp viven los dos abajo. Cuando
   la bandeja aparece, el botón se aparta en vez de quedar debajo.
   ------------------------------------------------------------ */
.wa{ transition:transform var(--vel-3) var(--curva), background var(--vel-2); }
body:has(.bandeja.visible) .wa{ transform:translateY(-78px); }
body:has(.bandeja.visible) .wa:hover{ transform:translateY(-82px) scale(1.06); }


/* ------------------------------------------------------------
   2b. BOTONES EN MÓVIL — versión simple, a prueba de todo
   ------------------------------------------------------------
   En escritorio el botón tiene capas: texto sin cortes, recorte
   por overflow, un pseudo para el relleno de hover y otro con
   desenfoque de fondo. En un teléfono eso sobra y estorba:
   no hay hover, el desenfoque es caro, y en Safari de iOS la
   mezcla de backdrop-filter + border-radius + overflow deforma
   el render y se come el texto.

   Aquí se desmonta y queda lo esencial: una caja de ancho
   completo, con fondo plano y texto que puede partirse en dos
   líneas antes que recortarse.
   ------------------------------------------------------------ */
@media (max-width:900px){

  /* Rejilla en vez de flex: sin negociación de anchos posible */
  .portada-acciones{
    display:grid;
    grid-auto-flow:row;
    gap:10px;
    width:100%;
  }

  .portada-acciones .btn{
    width:100%;
    min-height:54px;
    padding:15px 20px;
    font-size:.8125rem;
    letter-spacing:.06em;
    line-height:1.25;
    /* El texto se parte si hace falta. Nunca se corta. */
    white-space:normal;
    overflow:visible;
    text-align:center;
  }

  /* Fuera las capas que sobran en un teléfono */
  .portada-acciones .btn::after{ display:none; }
  .btn-linea-inv::before{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(8,22,18,.62);   /* fondo plano, siempre legible */
  }

  /* Sin hover que simular: el color va directo en el elemento */
  .portada-acciones .btn-solido{
    background:var(--acento-relleno);
    color:var(--sobre-acento);
  }
  .portada-acciones .btn-linea-inv{
    color:var(--hueso);
    border-color:rgba(249,246,239,.7);
  }
}


/* ------------------------------------------------------------
   3. TIPOGRAFÍA DE FORMULARIO
   iOS hace zoom automático en cualquier campo por debajo de 16px.
   Ese zoom descuadra el diseño y no se deshace solo.
   ------------------------------------------------------------ */
@media (max-width:900px){
  .campo input,.campo select,.campo textarea{ font-size:16px; }
}


/* ============================================================
   1180px — TABLET HORIZONTAL
   ============================================================ */
@media (max-width:1180px){

  /* El botón de reservar nunca se va: es la acción principal.
     Se encoge, se queda sin texto largo, pero sigue ahí. */
  .nav-cta{ padding:10px 16px; }

  /* Dos columnas muy juntas se leen peor que una sola */
  .editorial-red{ gap:clamp(28px,4vw,64px); }
  .exp-panel{ gap:clamp(24px,4vw,56px); }
}


/* ============================================================
   900px — TABLET VERTICAL
   ============================================================ */
@media (max-width:900px){

  /* --- El mar: el texto sube y la ballena queda a la vista debajo ---
     La foto es vertical y en pantalla angosta se ajusta por el alto: la
     ballena cae en la mitad de abajo. Antes el texto y un velo oscuro
     inferior la tapaban; ahora el texto va arriba, el velo oscurece arriba
     y la sección es más alta para darle espacio a la ballena. */
  .mar{ height:auto; }
  .mar-fija{
    position:relative;
    height:auto; min-height:118svh;
    display:flex; align-items:flex-start;
    padding-block:clamp(96px,14vh,130px) clamp(48px,9vh,90px);
  }
  .mar-velo{
    background:linear-gradient(180deg,
      rgba(3,14,12,.9) 0%, rgba(3,14,12,.74) 40%,
      rgba(3,14,12,.12) 68%, rgba(3,14,12,.5) 100%);
  }
  .mar-contenido{
    position:relative;
    left:auto; right:auto; bottom:auto;
    width:100%;
    padding-inline:var(--margen-x);
  }
  .mar-cifras{ gap:var(--e-5) var(--e-6); }

  /* Las cifras no se apilan de a una: caben dos por fila */
  .mar-cifra{ flex:1 1 40%; min-width:min(150px,45%); }

  /* --- Itinerarios --- */
  .incluye{ gap:var(--e-5); }

  /* --- Galería y caja de luz --- */
  .lightbox-nav{
    top:auto; bottom:clamp(16px,4vh,32px);
    transform:none;
    width:48px; height:48px;
  }
  .lightbox-nav.prev{ left:28%; }
  .lightbox-nav.sig{ right:28%; }
  .lightbox img{ max-height:68vh; }
  .lightbox-pie{ margin-bottom:72px; }

  /* --- Menú a pantalla completa: si no cabe, se desplaza --- */
  .menu-lleno{
    align-content:start;
    padding-top:calc(96px + env(safe-area-inset-top));
    padding-bottom:var(--e-8);
    overflow-y:auto;
  }
}


/* ============================================================
   620px — MÓVIL
   ============================================================ */
@media (max-width:620px){

  /* --- El botón de reservar VUELVE. Antes desaparecía. --- */
  .nav-cta{
    display:inline-flex;
    padding:9px 14px;
    font-size:.625rem;
    letter-spacing:.1em;
  }
  .nav-acciones{ gap:var(--e-2); }

  /* --- El hero se compacta para que los DOS botones entren en pantalla ---
     Sin esto el segundo termina hacia los 680px y queda debajo de la barra
     de direcciones del navegador, o directamente fuera en un iPhone SE.
     No se quita nada: se aprieta el aire para que la acción se vea. */
  .portada{ padding-block:clamp(88px,13vh,124px) clamp(36px,6vh,64px); }
  .portada .titular{ font-size:clamp(2.4rem,11vw,3.2rem); margin-bottom:var(--e-5); }
  .portada-texto .etiqueta{ margin-bottom:var(--e-4); }
  .portada-bajada{ margin-bottom:var(--e-5); font-size:.9375rem; }
  .portada-red{ gap:var(--e-6); }

  /* --- Áreas de toque: mínimo 44px en todo lo que se pulsa --- */
  .riel-flecha{ width:46px; height:46px; }
  .exp-pestana{ padding-block:12px 16px; min-height:44px; }
  .marcaje{ padding:12px 16px; min-height:44px; }
  .ficha{ padding:var(--e-4); min-height:88px; }
  .enlace{ padding-block:8px 12px; min-height:44px; }
  .itinerario-abrir{ min-height:44px; }
  .lightbox-cerrar{ width:44px; height:44px; }

  /* --- Itinerario: el día pasa a su propia línea --- */
  .dia{ grid-template-columns:1fr; gap:var(--e-2); }
  .dia-num{ padding-top:0; }
  .dia ul{ padding-left:1em; }

  /* --- La bandeja no puede tapar el botón de WhatsApp --- */
  .bandeja{
    right:16px; left:16px;
    justify-content:space-between;
    padding:var(--e-2) var(--e-2) var(--e-2) var(--e-4);
  }
  .bandeja p{ font-size:var(--t-micro); white-space:normal; line-height:1.3; }
  /* El texto se acorta pero NO se borra: sigue diciendo qué son */
  .bandeja p span{ display:inline; }
  .bandeja .btn{ padding:10px 14px; font-size:.625rem; flex:none; }
  body:has(.bandeja.visible) .wa{ transform:translateY(-84px); }

  /* --- Tablas en modo tarjeta: más aire entre filas --- */
  .tabla tr{ padding-block:var(--e-5); }
  .tabla td{ padding-block:6px; }
  .tabla td:first-child{ font-size:1.1rem; margin-bottom:var(--e-2); }

  /* --- Composición de la posada: sin superposiciones apretadas --- */
  .posada-visual{ aspect-ratio:3/4; }
  .posada-mayor{ width:82%; height:78%; }
  .posada-menor{ width:52%; height:40%; border-width:6px; }
  .posada-sello{ left:46%; top:38%; padding:var(--e-4); font-size:.95rem; }

  /* --- Galería de la posada: cuadrícula de dos columnas ---
     Una columna eran ocho fotos gigantes seguidas. La primera y la última
     van a lo ancho para que la cuadrícula cierre pareja; al tocar
     cualquiera se abre completa en la caja de luz. */
  .galeria{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--e-2); }
  .galeria-item, .galeria-item:nth-child(3n){ aspect-ratio:1/1; }
  .galeria-item:first-child, .galeria-item:last-child{ grid-column:1 / -1; aspect-ratio:16/10; }

  /* --- Tira de comida: las tres fotos en una fila --- */
  .comida-tira{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--e-2); }

  /* --- Citas y notas --- */
  .cita{ padding-left:var(--e-4); }
  .comida-nota{ padding-left:var(--e-4); }

  /* --- Pie --- */
  .pie-base{ flex-direction:column; gap:var(--e-2); }
}


/* ============================================================
   400px — MÓVIL PEQUEÑO
   ============================================================ */
@media (max-width:400px){

  /* El titular ya no compite con el ancho de pantalla */
  :root{ --t-h1:2.6rem; --t-h2:2.15rem; }

  .portada{ --carta-0:170px; --carta-1:108px; --carta-2:94px; --carta-3:84px; }
  .riel{ height:240px; }

  .btn{ letter-spacing:.05em; }

  /* La bandeja pierde el rótulo largo, nunca el número */
  .bandeja p span{ font-size:.6rem; }

  .lightbox-nav.prev{ left:20%; }
  .lightbox-nav.sig{ right:20%; }
}


/* ============================================================
   PANTALLAS BAJAS Y ORIENTACIÓN APAISADA
   No es un problema de ancho sino de alto: un móvil acostado
   tiene 375px de alto y cualquier 100svh deja de funcionar.
   ============================================================ */
@media (max-height:560px){

  .portada{
    height:auto;
    min-height:0;                      /* antes forzaba 680px */
    padding-block:clamp(96px,16vh,140px) clamp(32px,6vh,56px);
  }
  .riel{ height:min(52vh,260px); }
  .portada-pie{ position:static; margin-top:var(--e-5); padding-inline:var(--margen-x); }

  .mar{ height:auto; }
  .mar-fija{
    position:relative; height:auto; min-height:0;
    display:flex; align-items:flex-end;
    padding-block:clamp(80px,16vh,140px) clamp(32px,7vh,64px);
  }
  .mar-contenido{ position:relative; left:auto; right:auto; bottom:auto; padding-inline:var(--margen-x); }

  .menu-lleno{ align-content:start; padding-top:88px; overflow-y:auto; }
  .cortina .sello-marco{ width:clamp(120px,16vh,170px); }
}

/* Móvil acostado: el alto manda sobre cualquier otra regla */
@media (orientation:landscape) and (max-height:480px){
  .exp-foto{ aspect-ratio:16/9; }
  .plan-foto{ aspect-ratio:16/9; }
  .posada-visual{ aspect-ratio:16/10; }
  .seccion{ padding-block:clamp(56px,9vh,96px); }
}


/* ============================================================
   IMPRESIÓN — el huésped que imprime su itinerario
   ============================================================ */
@media print{
  .nav,.wa,.bandeja,.progreso,.grano,.cursor,.cursor-anillo,
  .cortina,.menu-lleno,.lightbox,.riel,.portada-pie,.marquesina{ display:none!important; }

  body{ background:#fff; color:#000; }
  .oscuro,.profundo,.bosque,.claro{ background:#fff!important; color:#000!important; }
  .oscuro *,.profundo *,.bosque *{ color:#000!important; }

  .portada{ height:auto; min-height:0; padding:0; color:#000; }
  .portada-fondo,.portada-velo,.fantasma{ display:none; }

  .mar{ height:auto; }
  .mar-fija{ position:relative; height:auto; }

  /* Los itinerarios se imprimen abiertos, con o sin clic */
  .itinerario-cuerpo{ height:auto!important; overflow:visible!important; }
  .itinerario-abrir{ display:none; }

  /* Y todas las experiencias, no solo la pestaña activa */
  .exp-panel{ position:relative!important; display:grid!important;
              opacity:1!important; visibility:visible!important;
              page-break-inside:avoid; margin-bottom:var(--e-6); }
  .exp-panel[hidden]{ display:grid!important; }
  .exp-pestanas{ display:none; }

  .plan,.seccion{ page-break-inside:avoid; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.7em; }
}