/* ===========================================================================
   Paquetes de Cajón — hoja del sitio público.

   Port del diseño autorizado (`design_handoff_paquetes_de_cajon`). Los valores
   son los del prototipo, al pixel: colores, tamaños, radios, sombras y
   espaciados salen de sus tokens y no de una aproximación.

   Está en clases y no en estilos en línea a propósito. El prototipo los usa
   porque su motor de render los escribe; aquí, con las mismas cifras, una clase
   se corrige en un lugar y no en cuarenta. Cada bloque nombra el token del que
   viene para que la comparación con el diseño se pueda hacer leyendo.

   No hay compilador de assets: es un archivo servido tal cual, igual que el del
   panel. Meter un bundler para tres pantallas sería maquinaria por delante del
   problema.
   ========================================================================= */

:root {
    /* --- color, tal como los nombra el handoff ----------------------------- */
    --navy-900: #0a2540;   /* fondo del footer */
    --navy-800: #0e2a5c;   /* títulos, precios, botón secundario oscuro */
    --navy-700: #123566;   /* nav y labels fuertes */
    --blue-600: #1257c9;   /* acción primaria, kickers, links, activos */
    --blue-700: #0b3fa8;   /* hover de la acción primaria */
    --blue-400: #2f7dff;   /* la palabra destacada del H1 */
    --text-muted: #5b7397;
    --text-soft: #6b80a3;
    --text-label: #8296b5;
    --bg-page: #f4f7fd;
    --bg-tint: #f7faff;
    --bg-blue-tint: #eaf1ff;
    --bg-cream: #faf5ec;   /* fondo del header */
    --border-cream: #eee4d2;
    --border: #e3e9f4;
    --border-soft: #eef2f9;
    --border-soft-2: #e9eef7;
    --border-hover: #cfdcf3;
    --green: #22c35e;
    --green-700: #199c4a;
    --green-tint: #eafaf0;
    --red: #e11d2e;
    --red-strong: #c2101f;
    --red-tint: #ffe9ec;
    --amber-bg: #fff8e6;
    --amber-border: #ffe3a3;
    --amber-text: #8a6100;
    --amber-text-2: #6b4a00;
    --yellow: #ffe64d;

    /* --- sombras ----------------------------------------------------------- */
    --sombra-card: 0 2px 10px rgba(14, 42, 92, 0.05);
    --sombra-card-2: 0 2px 12px rgba(14, 42, 92, 0.06);
    --sombra-hover: 0 14px 30px rgba(14, 42, 92, 0.13);
    --sombra-hover-fuerte: 0 14px 30px rgba(14, 42, 92, 0.16);
    --sombra-buscador: 0 10px 34px rgba(14, 42, 92, 0.12);
    --sombra-azul: 0 4px 14px rgba(18, 87, 201, 0.28);
    --sombra-azul-cta: 0 8px 22px rgba(18, 87, 201, 0.3);

    --ancho: 1280px;
    --pad-lateral: 32px;
}

/* --------------------------------------------------------------- cimientos */

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg-page);
    font-family: "Archivo", system-ui, sans-serif;
    color: var(--navy-800);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--blue-600); text-decoration: none; }
a:hover { color: var(--blue-700); }

*:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
::selection { background: #cfe0ff; }

input, select, button, textarea { font-family: "Archivo", system-ui, sans-serif; }
select { appearance: none; }

img { max-width: 100%; }

.envoltura {
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 var(--pad-lateral);
}

/* El ritmo vertical del handoff: 64px arriba de cada sección. */
.seccion { padding-top: 64px; }

/* --------------------------------------------------------------- tipografía

   Los roles del handoff, uno por clase. Con estas ocho, ningún tamaño de letra
   debería aparecer suelto en el markup — y si aparece, se nota que no venía del
   diseño. */

.h1-hero      { margin: 0; font-size: 56px; line-height: 1.04; font-weight: 800; letter-spacing: -0.03em; color: var(--navy-800); }
.h1-detalle   { margin: 0; font-size: 33px; line-height: 1.14; font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase; color: var(--navy-800); }
.h1-destino   { margin: 0; font-size: 42px; line-height: 1.06; font-weight: 800; letter-spacing: -0.03em; color: var(--navy-800); }
.h2-seccion   { margin: 0; font-size: 36px; line-height: 1.12; font-weight: 800; letter-spacing: -0.028em; color: var(--navy-800); }
.h2-tarjeta   { margin: 0; font-size: 32px; line-height: 1.14; font-weight: 800; letter-spacing: -0.028em; color: var(--navy-800); }
.h3-grande    { margin: 0; font-size: 19px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; color: var(--navy-800); }
.h3-oferta    { margin: 0; font-size: 14px; line-height: 1.35; font-weight: 700; color: var(--navy-800); }

.kicker {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue-600);
}

.kicker-gris { color: var(--text-label); }

.cuerpo       { font-size: 16.5px; line-height: 1.6; color: #3c567f; }
.cuerpo-chico { font-size: 13px; line-height: 1.55; color: var(--text-muted); }

.label-campo {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-label);
}

/* ------------------------------------------------------------------ header

   74px de alto, crema, sin sombra: solo el borde inferior. La crema es lo que
   más distingue esta marca del panel, que es azul. */

.encabezado {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--bg-cream);
    border-bottom: 1px solid var(--border-cream);
}

.encabezado .envoltura {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 74px;
}

.marca { display: flex; align-items: center; gap: 12px; }
.marca img { display: block; width: auto; }
.marca .logo-uvac { height: 46px; }
.marca .logo-pdc { height: 24px; }

.nav-sitio {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy-700);
}

.nav-sitio a { color: inherit; }
.nav-sitio a:hover { color: var(--blue-600); }

.encabezado-acciones { display: flex; align-items: center; gap: 10px; }

/* ----------------------------------------------------------------- botones */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primario {
    height: 44px;
    padding: 0 22px;
    background: var(--blue-600);
    color: #fff;
    box-shadow: var(--sombra-azul);
}
.btn-primario:hover { background: var(--blue-700); color: #fff; }

.btn-contorno {
    height: 42px;
    padding: 0 20px;
    border: 1px solid #d9e2f2;
    background: #fff;
    color: var(--navy-700);
    box-shadow: 0 1px 3px rgba(14, 42, 92, 0.06);
}
.btn-contorno:hover { border-color: var(--blue-600); color: var(--blue-600); }

.btn-navy {
    height: 44px;
    padding: 0 22px;
    background: var(--navy-800);
    color: #fff;
}
.btn-navy:hover { background: #123566; color: #fff; }

.btn-verde {
    height: 44px;
    padding: 0 22px;
    background: var(--green);
    color: #fff;
}
.btn-verde:hover { background: var(--green-700); color: #fff; }

/* El círculo de WhatsApp de las tarjetas se quitó: desde una tarjeta solo
   podía abrir una conversación que empieza por «¿cuánto cuesta?», que es lo
   que este sitio existe para evitar. El flotante del pie sí se queda. */

/* ------------------------------------------------------------------- chips */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 600;
    background: var(--bg-blue-tint);
    color: var(--blue-600);
}

.chip-blanco { background: #fff; color: var(--text-muted); border: 1px solid var(--border); }
.chip-verde  { background: var(--green-tint); color: var(--green-700); }
.chip-rojo   { background: var(--red-tint); color: var(--red-strong); }
.chip-gris   { background: var(--bg-page); color: var(--text-muted); }

/* ---------------------------------------------------------------- tarjetas */

.tarjeta {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--sombra-card);
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.tarjeta-grande { border-radius: 20px; }

/* Solo las clicables se elevan: una tarjeta que reacciona sin llevar a ningún
   lado promete un clic que no existe. */
a.tarjeta:hover,
.tarjeta-clicable:hover {
    box-shadow: var(--sombra-hover);
    border-color: var(--border-hover);
}

/* ------------------------------------------------------------------ footer */

.pie { background: var(--navy-900); color: #fff; }

.pie-rejilla {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 36px;
    padding: 52px var(--pad-lateral) 32px;
    max-width: var(--ancho);
    margin: 0 auto;
}

.pie-logo {
    height: 52px;
    width: auto;
    display: block;
    margin-bottom: 16px;
    background: #fff;
    border-radius: 12px;
    padding: 6px;
}

.pie-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7f9ec4;
    margin-bottom: 14px;
}

.pie-enlaces { display: grid; gap: 9px; font-size: 13px; color: #9db3cf; }
.pie-enlaces a { color: #9db3cf; }
.pie-enlaces a:hover { color: #fff; }

.pie-texto { color: #9db3cf; }
.pie-texto strong { color: #fff; }

.pie-aliado {
    background: #fff;
    color: var(--text-muted);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 700;
}

.pie-legal {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding: 18px 0 32px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: #7f9ec4;
}

/* --------------------------------------------------------------- responsive

   El prototipo es de escritorio 1280–1440. Los tres cortes son los que pide el
   handoff, y el de 900 es el que importa: por ahí entra la mitad de la gente. */

@media (max-width: 1199px) {
    .rejilla-4 { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 899px) {
    :root { --pad-lateral: 18px; }

    .h1-hero { font-size: 38px; }
    .h1-destino { font-size: 30px; }
    .h2-seccion { font-size: 27px; }
    .h2-tarjeta { font-size: 24px; }

    .rejilla-4,
    .rejilla-3,
    .rejilla-2 { grid-template-columns: 1fr !important; }

    .pie-rejilla { grid-template-columns: 1fr; gap: 26px; }

    /* El nav se guarda y quedan las dos acciones: en el teléfono lo que hace
       falta es reservar o escribir, no navegar seis secciones. */
    .nav-sitio { display: none; }
}

/* ------------------------------------------------------------------ rejillas */

.rejilla-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rejilla-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

/* ------------------------------------------------------------------- varios */

.vacio { text-align: center; padding: 48px 20px; color: var(--text-muted); }

/* El botón flotante de WhatsApp: en el sitio de hoy es de donde vienen casi
   todas las conversaciones, así que se queda a la vista. */
.wa-flotante {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 30;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(6, 51, 26, 0.35);
}

/* ------------------------------------------------------- buscador del hero

   Tarjeta blanca sobre el degradado, cuatro columnas con divisores entre
   campos. `pointer-events:auto` porque la capa del degradado que la contiene
   los tiene apagados para no comerse los clics del hero. */

.buscador-hero {
    pointer-events: auto;
    margin-top: 32px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--sombra-buscador);
    padding: 8px;
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr auto;
    gap: 4px;
    align-items: stretch;
    max-width: 720px;
}

.buscador-campo {
    padding: 12px 16px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    min-width: 0;
}
.buscador-campo:hover { background: var(--bg-page); }

/* El divisor va entre campos, no en el primero: una línea a la izquierda del
   primer campo lo separaría del borde de la tarjeta y se ve como un error. */
.buscador-campo + .buscador-campo { border-left: 1px solid var(--border-soft); }

.buscador-campo select,
.buscador-campo input {
    border: 0;
    background: transparent;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--navy-800);
    cursor: pointer;
    padding: 0;
    width: 100%;
    min-width: 0;
}

.buscador-boton {
    border: 0;
    border-radius: 12px;
    background: var(--blue-600);
    color: #fff;
    padding: 0 26px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(18, 87, 201, 0.3);
    transition: background 0.15s ease;
}
.buscador-boton:hover { background: var(--blue-700); }

@media (max-width: 899px) {
    .buscador-hero { grid-template-columns: 1fr; }
    .buscador-campo + .buscador-campo { border-left: 0; border-top: 1px solid var(--border-soft); }
    .buscador-boton { height: 46px; }
}

/* ------------------------------------------------------- celda de destino

   150px de alto, foto a todo color con un scrim que baja del 38 % para abajo:
   arriba la foto se ve limpia y abajo el nombre se lee sobre cualquier imagen. */

.celda-destino {
    position: relative;
    display: block;
    height: 150px;
    border-radius: 16px;
    overflow: hidden;
    background: #dfe8f8;
    box-shadow: 0 2px 10px rgba(14, 42, 92, 0.06);
    transition: box-shadow 0.18s ease;
}
.celda-destino:hover { box-shadow: var(--sombra-hover-fuerte); }

.celda-destino img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.celda-destino-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 22, 50, 0) 38%, rgba(6, 22, 50, 0.82) 100%);
    pointer-events: none;
}

.celda-destino-texto {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    pointer-events: none;
}

.celda-destino-insignia {
    position: absolute;
    top: 10px;
    left: 12px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(18, 87, 201, 0.92);
    padding: 3px 8px;
    border-radius: 7px;
    pointer-events: none;
}

/* ------------------------------------------------------ tarjeta de oferta

   La del grid de cuatro: flyer de 186px, badges flotantes y el precio al pie
   pegado abajo con `margin-top:auto`, para que todas terminen a la misma
   altura aunque el título ocupe dos líneas o tres. */

.tarjeta-oferta {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: inherit;
}

.tarjeta-oferta-foto {
    position: relative;
    height: 186px;
    background: #e7eefb;
    flex: none;
}

.tarjeta-oferta-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tarjeta-oferta-cuerpo {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.tarjeta-oferta-pie {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
}


.insignia-tipo {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--navy-800);
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 8px;
    pointer-events: none;
}

/* ----------------------------------------------------------- fila de resultado

   La del listado por destino: foto, contenido y precio en tres columnas. A
   diferencia de la tarjeta del grid, aquí cabe explicar qué incluye — que es lo
   que decide una compra cuando ya se eligió el destino. */

.fila-resultado {
    display: grid;
    grid-template-columns: 250px 1fr 260px;
    overflow: hidden;
    border-radius: 18px;
    color: inherit;
}

.fila-resultado-foto {
    position: relative;
    min-height: 200px;
    background: #e7eefb;
}

.fila-resultado-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fila-resultado-tipo {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--blue-600);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 8px;
    pointer-events: none;
}

.fila-resultado-cuerpo {
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fila-resultado-precio {
    background: var(--bg-tint);
    border-left: 1px solid var(--border-soft);
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}

.etiqueta-tag {
    font-size: 12px;
    font-weight: 600;
    color: var(--navy-700);
    background: var(--bg-page);
    border-radius: 8px;
    padding: 5px 10px;
}

@media (max-width: 899px) {
    /* Apilada: foto arriba, precio abajo. En el teléfono tres columnas dejan
       cada una demasiado angosta para leerse. */
    .fila-resultado { grid-template-columns: 1fr; }
    .fila-resultado-foto { min-height: 180px; }
    .fila-resultado-precio { border-left: 0; border-top: 1px solid var(--border-soft); }
}

/* --------------------------------------------------------- barra de filtros

   Pegada bajo el header —74px— para que cambiar de pestaña no obligue a subir. */

.barra-filtros {
    background: #fff;
    border-bottom: 1px solid var(--border-soft-2);
    position: sticky;
    top: 74px;
    z-index: 40;
}

.barra-filtros .envoltura {
    padding-top: 14px;
    padding-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.pista-tabs {
    display: flex;
    gap: 8px;
    background: var(--bg-page);
    border-radius: 999px;
    padding: 4px;
}

.tab {
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    padding: 9px 18px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.tab:hover { color: var(--blue-600); }

.tab-activo { background: var(--blue-600); color: #fff; }
.tab-activo:hover { color: #fff; }

.select-orden {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    padding: 9px 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--navy-700);
    cursor: pointer;
}

/* ------------------------------------------------------------ ficha de detalle

   Dos columnas: el flyer y el itinerario a la izquierda, el precio y la pasarela
   a la derecha. La proporción 1 / 1.05 del handoff da a la derecha un poco más
   de aire, que es donde está la decisión. */

/* La ficha: título arriba y dos columnas que terminan a la misma altura.

   Dos intentos antes de este, y los dos se sintieron mal por razones opuestas:

   1. Todo a la derecha —nombre, precio, checkout y el contenido entero— con la
      galería sola a la izquierda. Una columna larguísima al lado de una vacía.
   2. Todo a la izquierda y la compra sola a la derecha, pegada al desplazarse.
      Peor: la caja no cabía en la pantalla, así que le tocaba desplazamiento
      **propio** —una barra dentro de otra— y debajo quedaba media página de
      hueco.

   Lo que funciona es repartir por CÓMO se lee cada cosa: a la izquierda lo que
   se lee de corrido —las fotos, el día por día, la descripción—, a la derecha
   lo que se consulta mientras se decide —el precio, qué incluye, las
   condiciones—. Las dos columnas quedan parecidas de alto y ninguna necesita
   pegarse ni desplazarse por dentro. */
.detalle {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    grid-template-areas:
        "encabezado encabezado"
        "galeria    compra"
        "cuerpo     compra";
    gap: 22px 28px;
    align-items: start;
    padding-top: 26px;
    padding-bottom: 64px;
}

.detalle-encabezado { grid-area: encabezado; }
.detalle-galeria    { grid-area: galeria; }
.detalle-cuerpo     { grid-area: cuerpo; display: grid; gap: 20px; align-content: start; }
.detalle-compra     { grid-area: compra; display: grid; gap: 20px; align-content: start; }

/* --- la galería, una sola para toda la tienda ----------------------------- */

/* La proporción la pone quien la usa: `4 / 5` para flyers verticales de
   paquete, `3 / 2` para fotos de hotel, que vienen horizontales. Ver
   `partials/galeria`. */
.galeria-principal {
    position: relative;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: #e7eefb;
}

/* El `object-fit` va en la IMAGEN. Puesto en el contenedor no hace nada, y el
   síntoma es una foto a su tamaño natural con medio panel de color debajo. */
.galeria-principal img { width: 100%; height: 100%; object-fit: cover; display: block; }

.etiqueta-amarilla {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--yellow);
    color: var(--navy-800);
    font-size: 12px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 10px;
    pointer-events: none;
}

/* Cuatro y en un solo renglón. Once miniaturas en tres columnas ocupan más alto
   que la foto principal y empujan fuera de pantalla lo que de verdad vende. Las
   demás están en el visor, que es donde alguien que quiere ver fotos las ve. */
.galeria-miniaturas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 12px;
}

/* --- el visor a pantalla completa ----------------------------------------- */

/* Cada foto es un botón de verdad. Sin esto heredaría el borde, el fondo gris y
   la tipografía del sistema que el navegador le pone a todo `<button>`. */
.galeria-disparo {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    border-radius: inherit;
    overflow: hidden;
}

.galeria-miniaturas .galeria-disparo {
    aspect-ratio: 1;
    border-radius: 12px;
    background: #e7eefb;
}

.galeria-disparo:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }

.galeria-contador {
    position: absolute;
    right: 12px;
    bottom: 12px;
    background: rgba(10, 37, 64, 0.78);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 6px 11px;
    border-radius: 999px;
    pointer-events: none;
}

/* «+5» sobre la última miniatura: sin esto nadie sabe que hay más fotos. */
.galeria-mas {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 37, 64, 0.6);
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    pointer-events: none;
}

.visor {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    background: rgba(6, 20, 36, 0.93);
}

.visor[hidden] { display: none; }

.visor-marco {
    margin: 0;
    max-width: min(1100px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.visor-marco img {
    max-width: 100%;
    /* El pie y el aire de arriba y abajo salen de la altura disponible: sin
       restarlos, una foto vertical empuja el «3 de 8» fuera de la pantalla. */
    max-height: calc(100vh - 120px);
    object-fit: contain;
    border-radius: 12px;
    display: block;
}

.visor-marco figcaption {
    color: #cfe0f5;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.visor-flecha,
.visor-cerrar {
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visor-flecha:hover,
.visor-cerrar:hover { background: rgba(255, 255, 255, 0.26); }

.visor-flecha { width: 52px; height: 52px; font-size: 32px; line-height: 1; padding-bottom: 4px; }

.visor-cerrar {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    font-size: 18px;
}

/* En teléfono no caben flechas a los lados de la foto: se navega deslizando,
   que es el gesto que la gente ya hace en cualquier galería. */
@media (max-width: 640px) {
    .visor-flecha { display: none; }
    .visor { padding: 12px; }
    .visor-marco img { max-height: calc(100vh - 100px); }
}

/* --- la caja de precio ---------------------------------------------------- */

.caja-precio {
    margin-top: 18px;
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
}

/* --- el contador de viajeros ---------------------------------------------- */

.stepper {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.stepper button {
    width: 44px;
    height: 46px;
    border: 0;
    background: var(--bg-page);
    color: var(--blue-600);
    font-size: 19px;
    font-weight: 800;
    cursor: pointer;
}
.stepper button:hover { background: var(--bg-blue-tint); }
.stepper button:disabled { color: var(--text-label); cursor: not-allowed; }

.stepper-valor { flex: 1; text-align: center; font-size: 14px; font-weight: 700; }

/* --- las formas de pago --------------------------------------------------- */

.opcion-pago {
    display: block;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.opcion-pago:has(input:checked) {
    border-color: var(--blue-600);
    background: #f2f7ff;
}

.opcion-pago input { position: absolute; opacity: 0; pointer-events: none; }

.opcion-punto {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid var(--border-hover);
    background: #fff;
    box-sizing: border-box;
}

.opcion-pago:has(input:checked) .opcion-punto {
    border: 6px solid var(--blue-600);
}

.resumen-pago {
    margin-top: 20px;
    background: var(--bg-tint);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
}

/* Lo que el motor tiene que decir de esta combinación: que son tres paquetes,
   que sobra un lugar pagado. Se ve como una advertencia amable y no como un
   error: es información de venta, no una falla. */
.nota-motor {
    background: var(--bg-blue-tint);
    border-left: 3px solid var(--blue-600);
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--navy-800);
}

.chip-plazo {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12.5px;
    color: var(--navy-800);
    white-space: nowrap;
}

.chip-plazo strong { color: var(--blue-600); font-weight: 800; }

/* Mientras el servidor recalcula. Se atenúa en vez de vaciarse: un precio que
   parpadea a «—» y vuelve se lee como un error del sitio. */
.pasarela-cargando .resumen-pago,
.pasarela-cargando [data-opciones],
.pasarela-cargando [data-plazos] {
    opacity: 0.45;
    transition: opacity 0.12s ease;
}

/* --- día por día y más información ---------------------------------------- */

.dia {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 16px;
    align-items: baseline;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-soft);
}

.dia-num {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue-600);
}

.dato {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 20px;
    padding: 13px 0;
    border-bottom: 1px dashed var(--border);
}

.dato-nombre { font-size: 13px; font-weight: 600; color: var(--text-label); }
.dato-valor  { font-size: 13.5px; font-weight: 600; color: var(--navy-800); }

/* Cuando lo que manda es la izquierda y no la etiqueta: los hoteles previstos
   de una salida traen nombre largo, categoría y el «o similar», y estrujarlos
   en la columna de 170px los parte en tres renglones al lado de una ciudad de
   una palabra. */
.dato-ancho { grid-template-columns: 1fr auto; align-items: baseline; }

@media (max-width: 1199px) {
    .detalle { gap: 20px; }
}

/* Una sola columna, y el ORDEN importa:
     1. la foto — es lo que enamora, y estaba a media página de distancia,
     2. el nombre y el precio,
     3. la caja de compra con qué incluye y las condiciones,
     4. el resto: el día por día y la descripción. */
@media (max-width: 979px) {
    .detalle {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .detalle-galeria    { order: 1; }
    .detalle-encabezado { order: 2; }
    .detalle-compra     { order: 3; }
    .detalle-cuerpo     { order: 4; }
}

@media (max-width: 899px) {
    .dato { grid-template-columns: 1fr; gap: 3px; }
    .detalle-incluye { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------- detalle de salida con fecha

   El bloqueo tiene su propia pantalla porque su producto es distinto: se compra
   una fecha concreta, no un viaje que se acomoda. Lo que ya NO tiene es maqueta
   propia: usa la reja `.detalle` de la ficha, con las mismas áreas y el mismo
   orden en teléfono.

   Tenía la suya —`.ficha` / `.lateral`— y se quedó atrás: mientras la ficha se
   reequilibraba, aquí todo el contenido siguió cayendo a la izquierda y la
   derecha terminaba en la caja de precio, con media pantalla de blanco debajo.
   Dos rejas para la misma pregunta —«un producto, con qué lo compro»— solo
   garantizan que una envejezca.

   Cuando la pasarela cubra también los bloqueos, las dos vistas se funden — hoy
   no, porque elegir salida es una decisión que la ficha no sabe representar. */

.panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--sombra-card-2);
    overflow: hidden;
}

.panel-cabeza {
    padding: 18px 28px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--navy-800);
}

.panel-cuerpo { padding: 28px; }

.lista-puntos {
    margin: 0;
    padding-left: 20px;
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--text-muted);
}

/* Lo que NO incluye. Se lee igual de bien pero no se lee igual: el punto rojo
   es lo que separa «traslados» de «traslados no incluidos» cuando alguien
   recorre la lista con la vista y no renglón por renglón. */
.lista-no { list-style: none; padding-left: 0; }

.lista-no li { position: relative; padding-left: 20px; }

.lista-no li::before {
    content: "×";
    position: absolute;
    left: 2px;
    font-weight: 800;
    color: var(--red-strong);
}

/* Una salida: la fecha manda, porque es lo que se está eligiendo.

   Apilada y no en línea. Estaba en `flex` con `space-between`, de cuando una
   salida era un renglón; hoy trae fecha, regreso, aerolínea y la tabla de
   precios por ocupación, y el `flex` los repartía a lo ancho como cuatro
   columnas de una tabla que nadie diseñó. */
.salida {
    display: grid;
    gap: 2px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-soft);
}
.salida:first-child { padding-top: 0; }
.salida:last-child { border-bottom: 0; padding-bottom: 0; }

.salida-fecha {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--navy-800);
}

.dia-titulo { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--navy-800); }
.dia-texto  { font-size: 13px; color: var(--text-muted); margin-top: 4px; line-height: 1.55; }

/* El precio, en la columna de compra y en las tarjetas. `.precio-monto` no se
   repite aquí: lo define una sola vez la caja de precio de la ficha, más
   abajo. */
.precio-desde {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue-600);
}

.precio-nota { font-size: 12.5px; color: var(--text-muted); }

/* --- dos bloques de la portada con reja propia ----------------------------- */

.franja-confianza {
    padding-top: 20px;
    padding-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.panel-pasarela {
    padding: 36px;
    box-shadow: var(--sombra-card-2);
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 40px;
}

@media (max-width: 899px) {
    .franja-confianza,
    .panel-pasarela { grid-template-columns: 1fr; gap: 24px; }
    .panel-pasarela { padding: 24px; }
    .panel-pasarela > div:last-child { grid-template-columns: 1fr !important; }
}


/* --- el formulario de reserva --------------------------------------------- */

.modal-reserva {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(6, 20, 36, 0.62);
    /* En teléfono el modal se pega abajo, que es donde alcanza el pulgar. */
    overflow-y: auto;
}

.modal-reserva[hidden] { display: none; }

.modal-caja {
    position: relative;
    width: 100%;
    max-width: 430px;
    background: #fff;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 24px 70px rgba(6, 20, 36, 0.3);
    margin: auto;
}

.modal-cerrar {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: var(--bg-page);
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
}
.modal-cerrar:hover { background: var(--border); }

.modal-resumen {
    margin-top: 14px;
    background: var(--bg-blue-tint);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--navy-800);
}

.modal-resumen > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.modal-resumen strong { font-weight: 800; white-space: nowrap; }

.campo-reserva {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    padding: 12px 14px;
    font: inherit;
    font-size: 15px;
    color: var(--navy-800);
    width: 100%;
    box-sizing: border-box;
}

/* 16px o más en el campo: por debajo de eso, Safari en iPhone hace zoom al
   enfocarlo y la pantalla se queda desencuadrada. */
@media (max-width: 640px) {
    .campo-reserva { font-size: 16px; }
    .modal-caja { padding: 22px 18px; border-radius: 18px; }
    .modal-reserva { padding: 10px; align-items: flex-end; }
}

.campo-reserva:focus {
    outline: none;
    border-color: var(--blue-600);
    box-shadow: 0 0 0 3px rgba(18, 87, 201, 0.14);
}

.campo-reserva::placeholder { color: var(--text-label); }

.modal-error {
    background: #fdeaea;
    border-left: 3px solid #c0392b;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
    line-height: 1.45;
    color: #8c2b20;
}

.modal-error[hidden] { display: none; }


/* ================================================================= el hero

   La foto de un viaje real, en una caja donde se ve bien, rotando entre varios.

   Antes era una sola foto de catálogo estirada a todo el ancho de la pantalla.
   Ninguna foto de 1200px sobrevive a eso, y era lo primero que alguien veía de
   la agencia. El fondo desenfocado conserva el color y la sensación de lugar
   sin que la resolución importe: desenfocado no hay pixelado que se note. */

.hero {
    position: relative;
    overflow: hidden;
    background: var(--navy-900);
    isolation: isolate;
}

.hero-fondo { position: absolute; inset: 0; z-index: 0; }

.hero-fondo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    /* Se agranda un poco porque el desenfoque come los bordes y dejaría una
       orilla transparente por donde se ve el fondo. */
    transform: scale(1.28);
    /* Más desenfoque y más color. El desenfoque grande es lo que convierte una
       foto de catálogo en una atmósfera: a 26px todavía se adivinaban formas y
       se notaba la baja resolución; a 60px lo que queda es el color del lugar,
       que es lo que hace sentir el hero. El `scale` sube con él porque el
       desenfoque come los bordes y dejaría una orilla transparente. */
    filter: blur(60px) saturate(1.45) brightness(1.05);
    transition: opacity 1.1s ease;
}

.hero-fondo img.activa { opacity: 1; }

/* El velo es lo que hace legible el texto sobre CUALQUIER foto. Sin él, un
   titular oscuro sobre una playa clara desaparece, y no se puede elegir el
   color del texto según la foto que toque. */
.hero-velo {
    position: relative;
    z-index: 1;
    /* El velo aclara lo justo para que el texto se lea sobre CUALQUIER foto, y
       se abre pronto para que el color del fondo pinte la mayor parte del hero.
       Antes tapaba hasta el 66% y el desenfoque casi no se veía. */
    background: linear-gradient(
        100deg,
        rgba(244, 247, 253, 0.97) 0%,
        rgba(244, 247, 253, 0.88) 26%,
        rgba(244, 247, 253, 0.42) 52%,
        rgba(244, 247, 253, 0.08) 76%,
        rgba(244, 247, 253, 0) 100%
    );
}

.hero-rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 42px;
    align-items: center;
    padding-top: 76px;
    padding-bottom: 60px;
}

.hero-sellos {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #3c567f;
}

.hero-sellos strong { color: var(--navy-800); }

/* --- la vitrina que rota -------------------------------------------------- */

.hero-vitrina {
    position: relative;
    /* Lo que el dedo mueve mientras se arrastra. Lo escribe el JavaScript y
       vuelve a cero al soltar; sin la variable declarada aquí, el navegador no
       sabe animarla. */
    --arrastre: 0px;
}

/* Las tarjetas se apilan en la misma celda de una rejilla de 1×1. Con
   `position:absolute` habría que fijarle una altura al contenedor y el nombre
   más largo se cortaría; así la caja mide lo que mida la más alta. */
.hero-tarjetas { display: grid; }

.hero-tarjetas > a {
    grid-area: 1 / 1;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(10, 37, 64, 0.22);
    text-decoration: none;
    color: inherit;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
}

.hero-tarjetas > a.activa {
    opacity: 1;
    visibility: visible;
    transform: translateX(var(--arrastre, 0px));
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s;
}

/* Mientras el dedo está encima la tarjeta sigue al dedo SIN transición: con
   ella iría medio segundo por detrás y el gesto se sentiría pegajoso. */
.hero-vitrina:active .hero-tarjetas > a.activa { transition: opacity 0.5s ease, visibility 0s; }

.hero-foto {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #e7eefb;
}

.hero-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-insignia,
.hero-urgente {
    position: absolute;
    top: 10px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
}

.hero-insignia { left: 10px; background: rgba(255, 255, 255, 0.94); color: var(--navy-800); }
.hero-urgente { right: 10px; background: var(--red-600, #c0392b); color: #fff; }

.hero-cuerpo { padding: 16px 18px 18px; }

.hero-lugar {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-label);
}

.hero-nombre {
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--navy-800);
    margin-top: 5px;
}

.hero-meta { font-size: 12px; color: var(--text-muted); margin-top: 5px; }

.hero-precio {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 12px;
}

.hero-precio span { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.hero-precio strong { font-size: 25px; font-weight: 800; letter-spacing: -0.03em; color: var(--navy-800); }
.hero-moneda { font-size: 10.5px !important; color: var(--text-label) !important; }
.hero-nota { font-size: 11px; color: var(--text-label); margin-top: 2px; }

.hero-puntos {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
}

.hero-puntos button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(10, 37, 64, 0.24);
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
}

.hero-puntos button.activo { width: 22px; background: var(--blue-600); }
.hero-puntos button:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 3px; }

/* Quien pidió menos movimiento no debería pelearse con un carrusel. La rotación
   también se apaga desde JavaScript; esto cubre las transiciones. */
@media (prefers-reduced-motion: reduce) {
    .hero-fondo img,
    .hero-tarjetas > a { transition: none; }
}

@media (max-width: 1199px) {
    .hero-rejilla { grid-template-columns: minmax(0, 1fr) 290px; gap: 30px; }
}

@media (max-width: 899px) {
    /* La tarjeta va ARRIBA del titular: en el teléfono lo primero que se ve
       tiene que ser un viaje con su precio, que es lo que la gente vino a
       buscar. El titular y el buscador quedan a un pulgar de distancia. */
    .hero-rejilla {
        grid-template-columns: 1fr;
        gap: 26px;
        padding-top: 26px;
        padding-bottom: 34px;
    }

    .hero-vitrina { order: -1; touch-action: pan-y; }
    .hero-tarjetas > a { display: grid; grid-template-columns: 130px minmax(0, 1fr); }

    /* Los puntos más grandes: en el teléfono son también el control, y ocho
       píxeles no se aciertan con el pulgar. Y una pista de que se desliza. */
    .hero-puntos { gap: 9px; padding: 4px 0; }
    .hero-puntos button { width: 9px; height: 9px; }
    .hero-puntos button.activo { width: 26px; }
    .hero-foto { aspect-ratio: auto; height: 100%; min-height: 138px; }
    .hero-cuerpo { padding: 13px 15px; }
    .hero-precio strong { font-size: 21px; }

    /* Sin el degradado lateral: en una columna aclara justo la mitad
       equivocada y el texto queda sobre la parte más oscura. */
    .hero-velo { background: rgba(244, 247, 253, 0.95); }
}

@media (max-width: 480px) {
    .hero-tarjetas > a { grid-template-columns: 1fr; }
    .hero-foto { aspect-ratio: 16 / 10; min-height: 0; }
}


/* ============================================== el header en el teléfono

   El menú desaparecía abajo de 900px y no había nada en su lugar: desde un
   teléfono solo se podía llegar a los destinos bajando por toda la portada.
   Y era el caso importante, porque por ahí entra la mayoría. */

.encabezado-tel {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-decoration: none;
    padding: 4px 2px;
}

.encabezado-tel span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-label);
}

.encabezado-tel strong { font-size: 14.5px; font-weight: 800; color: var(--navy-800); }
.encabezado-tel:hover strong { color: var(--blue-600); }

/* Tres rayas que se cruzan al abrir. El botón mide 44px porque es el mínimo
   que un pulgar acierta sin pelearse; más chico se falla y se cierra sin
   querer. */
.encabezado-menu {
    display: none;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 11px 10px;
    flex-direction: column;
    justify-content: space-between;
}

.encabezado-menu span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--navy-800);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.encabezado-menu.abierto span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.encabezado-menu.abierto span:nth-child(2) { opacity: 0; }
.encabezado-menu.abierto span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 899px) {
    .encabezado-menu { display: flex; }

    /* El botón de catálogo se va: en el header del teléfono compiten el logo,
       el teléfono y el menú, y tres cosas ya son demasiadas. El catálogo está
       dentro del menú y a un dedo del buscador del hero. */
    .encabezado-acciones .btn { display: none; }
    .encabezado-tel span { display: none; }
    .encabezado-tel strong { font-size: 13.5px; }
}

@media (max-width: 400px) {
    /* Abajo de 400px el número no cabe junto al logo y lo empuja fuera. */
    .encabezado-tel { display: none; }
}

/* =========================================== el resto del teléfono, pulido

   Lo que se veía mal y por qué. Ninguno de estos es un ajuste estético: son
   cosas que en una pantalla de 390px hacían la página difícil de usar. */

@media (max-width: 899px) {
    /* El detalle apila columnas, pero la caja del precio traía el `padding` de
       escritorio y dejaba el contenido en una columna de texto muy angosta. */
    .detalle { padding-top: 18px; padding-bottom: 40px; }
    .tarjeta-grande { padding: 20px !important; }

    /* La barra de filtros se queda pegada bajo un header de 74px que en el
       teléfono mide menos. Sin corregirlo, tapa la primera fila de resultados. */
    .barra-filtros { top: 60px; }

    .h1-detalle { font-size: 25px; }
}

@media (max-width: 640px) {
    /* Los `chip` en fila desbordan el ancho y aparecía la barra horizontal en
       toda la página. Envuelven y se hacen más chicos. */
    .chip { font-size: 11.5px; padding: 6px 10px; }

    /* El precio del hero y del detalle a 27px se salía de su renglón junto a la
       moneda. */
    .caja-precio { padding: 14px; }

    /* Los pasos del itinerario: 78px de columna para «Día 1» dejaban el texto
       en 40 caracteres por línea. */
    .dia { grid-template-columns: 1fr; gap: 4px; }

    /* El pie tenía cuatro columnas apiladas sin separación suficiente y se leía
       como una sola lista larga. */
    .pie-rejilla { gap: 30px; }
    .pie-legal { flex-direction: column; gap: 8px; text-align: center; }

    /* El botón flotante de WhatsApp se encimaba con el botón de pagar de la
       ficha, que es el que importa. Se sube por encima del pulgar. */
    .wa-flotante { bottom: 16px; right: 16px; width: 50px; height: 50px; }
}

/* Ningún bloque ancho debe hacer scrollear la página entera de lado: la tabla,
   el código o una foto suelta se desplazan DENTRO de su caja. */
@media (max-width: 899px) {
    body { overflow-x: hidden; }
    .envoltura { max-width: 100%; }
}


/* ======================================== el header, pegado arriba

   Ya era `sticky` de origen. Lo que faltaba: que quede por encima del panel de
   filtros del listado —que también se pega, y sin esto le pasaba por delante—
   y una sombra al bajar.

   La sombra solo aparece cuando hay contenido detrás: arriba del todo el header
   se funde con la página, que es como lo pide el diseño. */
.encabezado { z-index: 120; }
.encabezado.con-sombra { box-shadow: 0 2px 14px rgba(10, 37, 64, 0.09); }

/* Con el menú abierto el fondo se congela. `position:fixed` en el body es lo
   único que detiene el desplazamiento en Safari de iPhone; `overflow:hidden`
   ahí no basta y la página de atrás se mueve bajo el panel. */
body.con-menu {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

/* ============================================ el menú que cubre y entra de lado

   Antes se desplegaba bajo el header empujando la página, y si alguien había
   bajado el menú se abría fuera de la pantalla: el botón parecía no hacer nada.
   Ahora cubre. */

.menu-movil {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
}

.menu-movil[hidden] { display: none !important; }

@media (max-width: 899px) {
    .menu-movil { display: block; }
}

.menu-fondo {
    position: absolute;
    inset: 0;
    background: rgba(6, 20, 36, 0);
    backdrop-filter: blur(0);
    transition: background 0.28s ease, backdrop-filter 0.28s ease;
}

.menu-movil.abierto .menu-fondo {
    background: rgba(6, 20, 36, 0.5);
    backdrop-filter: blur(3px);
}

.menu-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(84vw, 340px);
    background: var(--bg-cream, #faf5ec);
    display: flex;
    flex-direction: column;
    padding: 18px 22px 26px;
    box-shadow: -18px 0 50px rgba(6, 20, 36, 0.28);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    /* Respeta la muesca y la barra de gestos del teléfono. Sin esto el último
       enlace queda debajo de la barra y no se puede tocar. */
    padding-bottom: calc(26px + env(safe-area-inset-bottom));
    overflow-y: auto;
}

.menu-movil.abierto .menu-panel { transform: none; }

.menu-cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(10, 37, 64, 0.1);
}

.menu-cabeza .logo-pdc { height: 26px; width: auto; }

.menu-cerrar {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    background: rgba(10, 37, 64, 0.07);
    color: var(--navy-800);
    font-size: 15px;
    cursor: pointer;
}
.menu-cerrar:hover { background: rgba(10, 37, 64, 0.14); }

.menu-enlaces { display: flex; flex-direction: column; padding-top: 8px; }

.menu-enlaces a {
    display: block;
    padding: 15px 2px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--navy-800);
    text-decoration: none;
    border-bottom: 1px solid rgba(10, 37, 64, 0.08);
}

.menu-enlaces a:last-child { border-bottom: 0; }
.menu-enlaces a:active { color: var(--blue-600); }

/* La cascada. Cada enlace entra un poco después del anterior: guía la mirada de
   arriba abajo en el orden en que hay que leerlos, y hace que el panel se
   sienta abierto y no aparecido. */
.menu-enlaces a,
.menu-telefono {
    opacity: 0;
    transform: translateX(18px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    transition-delay: calc(var(--n, 0) * 45ms + 60ms);
}

.menu-movil.abierto .menu-enlaces a,
.menu-movil.abierto .menu-telefono {
    opacity: 1;
    transform: none;
}

.menu-telefono {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--navy-800);
    color: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    text-decoration: none;
}

.menu-telefono span { font-size: 11.5px; font-weight: 600; color: #b9cbe6; }
.menu-telefono strong { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }

/* Quien pidió menos movimiento recibe el panel sin cascada ni deslizamiento:
   sigue cubriendo y sigue funcionando, simplemente aparece. */
@media (prefers-reduced-motion: reduce) {
    .menu-panel,
    .menu-fondo,
    .menu-enlaces a,
    .menu-telefono { transition: none; }
}


/* La caja de compra ya no lleva el título dentro, así que respira distinto. */
.caja-compra .caja-precio { margin-top: 0; }


/* ====================================== el checkout: apartado y asistente */

/* El campo de fecha. Sale del `style=` en línea porque ahora tiene estados —
   falta, foco— y tres declaraciones sueltas en el HTML no los sostienen. */
.campo-fecha {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    padding: 12px 14px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy-800);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo-fecha:focus {
    outline: none;
    border-color: var(--blue-600);
    box-shadow: 0 0 0 3px rgba(18, 87, 201, 0.14);
}

/* Cuando falta la fecha y alguien intentó reservar. Rojo y un latido: el aviso
   de abajo solo no basta si el ojo está en el botón que acaba de tocar. */
.campo-fecha.campo-falta {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
    animation: latido 0.35s ease;
}

@keyframes latido {
    0%, 100% { transform: none; }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .campo-fecha.campo-falta { animation: none; }
}

.aviso-falta { color: #c0392b !important; font-weight: 600; }

/* --- el apartado cuando no aplica ---------------------------------------- */

/* Apagada, no escondida. Se lee que existe y por qué hoy no. */
.opcion-pago.opcion-apagada {
    background: var(--bg-page);
    border-style: dashed;
    cursor: default;
    opacity: 0.72;
}

.opcion-pago.opcion-apagada .opcion-punto { border-color: var(--border); background: var(--bg-page); }

/* El `[hidden]` va con la clase, no aparte.
   `display:inline-block` de una clase le gana al `display:none` que el
   navegador aplica a `[hidden]` —especificidad de autor contra user agent— así
   que el JavaScript ocultaba la etiqueta y el CSS la volvía a enseñar. El
   síntoma: «NO APLICA» pegado a una opción que sí aplicaba. */
.etiqueta-apagada[hidden] { display: none; }

.etiqueta-apagada {
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    background: var(--border);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 999px;
}

/* «Elige tu fecha» no es lo mismo que «no aplica», y no puede verse igual.
   La opción está apagada en los dos casos —todavía no se puede elegir— pero uno
   es un cierre y el otro es una instrucción. En gris de «no aplica», la
   instrucción se lee como negativa y nadie va a poner la fecha. */
.etiqueta-apagada.etiqueta-pide {
    background: var(--bg-blue-tint);
    color: var(--blue-600);
}

.aviso-apartado {
    margin-top: 12px;
    background: var(--bg-blue-tint);
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--navy-800);
}

.aviso-apartado[hidden] { display: none; }

.alternativas { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(18, 87, 201, 0.16); }

.alternativas-titulo {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}

.alternativas ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.alternativas li { line-height: 1.5; }
.alternativas-pie { margin-top: 9px; font-size: 11.5px; color: var(--text-muted); }

/* --- el botón del asistente ---------------------------------------------- */

/* Se parece al orbe del asistente a propósito: es el mismo asistente, y quien
   ya lo vio abajo a la derecha reconoce que esto lo abre. Un botón gris con el
   mismo texto no dice que del otro lado hay algo que conversa. */
.btn-asistente {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 10px;
    padding: 12px 16px;
    border: 1px solid rgba(18, 87, 201, 0.22);
    border-radius: 14px;
    background: linear-gradient(135deg, #f2f7ff 0%, #f6f2ff 100%);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--navy-800);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.btn-asistente:hover {
    border-color: var(--blue-600);
    box-shadow: 0 6px 18px rgba(18, 87, 201, 0.14);
    transform: translateY(-1px);
}

.btn-asistente strong { display: block; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.btn-asistente small { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.35; }

/* El orbe: el mismo degradado del asistente, con el destello que la gente ya
   asocia a que del otro lado hay un modelo y no un formulario. */
.btn-asistente-orbe {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: linear-gradient(135deg, #1257c9 0%, #6b3fd4 100%);
    box-shadow: 0 4px 12px rgba(18, 87, 201, 0.34);
    position: relative;
}

.btn-asistente-orbe::after {
    content: "✦";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    line-height: 1;
}

/* Un brillo lento que respira. Es lo que separa «hay algo vivo aquí» de un
   icono más; se apaga para quien pidió menos movimiento. */
.btn-asistente:hover .btn-asistente-orbe { animation: respira 1.6s ease-in-out infinite; }

@keyframes respira {
    0%, 100% { box-shadow: 0 4px 12px rgba(18, 87, 201, 0.34); }
    50% { box-shadow: 0 4px 20px rgba(107, 63, 212, 0.55); }
}

@media (prefers-reduced-motion: reduce) {
    .btn-asistente:hover .btn-asistente-orbe { animation: none; }
}


/* --- la caja de precio, con el número que la gente compara ---------------- */

.precio-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }

.precio-etiqueta {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue-600);
}

.precio-monto {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--navy-800);
    white-space: nowrap;
}

/* Para cuántos es. Antes iba pegado al total en 12px y se perdía; ahora tiene
   su renglón, porque «para 2 personas» es la mitad de la información. */
.precio-para {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 6px;
}

/* El «por persona». Destacado pero claramente por debajo del total: es el
   número con el que se compara, no con el que se cobra. Del mismo tamaño haría
   creer que se paga así, que es el error que este sitio vino a corregir. */
.precio-pp {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    color: var(--blue-600);
}

.precio-pp[hidden] { display: none; }
.precio-pp span { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.precio-pp small { font-size: 12px; font-weight: 600; color: var(--text-muted); }

/* «para 2 personas» junto al título de qué incluye. */
.incluye-pax {
    flex: 0 0 auto;
    background: var(--bg-blue-tint);
    color: var(--blue-600);
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 999px;
    white-space: nowrap;
}


/* El destino del titular, rotando.

   `inline-block` para que la transición de opacidad afecte a la palabra y no a
   la línea entera. Y sube un poco al cambiar: sin ese movimiento, el cambio de
   ancho de la palabra se lee como un parpadeo. */
.destino-rota {
    display: inline-block;
    color: var(--blue-400);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.destino-rota.cambiando {
    opacity: 0;
    transform: translateY(-8px);
}

@media (prefers-reduced-motion: reduce) {
    .destino-rota { transition: none; }
}

/* ---------------------------------------------------------------------------
   La compra a medias

   Un checkout abandonado es una venta que ya estaba casi hecha, y quien lo
   cierra a la mitad casi nunca vuelve a buscarlo: se le olvida por dónde
   entró. Esto es el camino de vuelta, visible desde cualquier página.

   Lo pinta el navegador desde `localStorage` —aquí no hay sesión— así que
   nace escondido y solo aparece si de verdad hay algo. Ver `sitio-layout`.

   `[hidden]` necesita el contrarrestre explícito porque esta regla declara
   `display`, y cualquier `display` de autor le gana a la del navegador. Es la
   trampa que este proyecto ya conoce de sobra.
   --------------------------------------------------------------------------- */

.compra-pendiente {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-decoration: none;
    padding: 7px 14px;
    border-radius: 12px;
    background: var(--bg-blue-tint, #eaf1ff);
    border: 1px solid #cfdcf3;
    max-width: 200px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.compra-pendiente[hidden] { display: none !important; }
.compra-pendiente:hover { border-color: var(--blue-600); background: #dfeaff; }

.compra-pendiente-rotulo {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue-600);
}

.compra-pendiente strong {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--navy-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 900px) {
    .compra-pendiente { max-width: 140px; padding: 6px 10px; }
}