/* ==========================================================================
   Ficha de programa (/es/paquetes/{slug}, /en/packages/{slug})
   Se carga solo en esta pagina, con 'pageStyles' => ['css/pages/product.css'].

   Sustituye a las 56 reglas que viajaban dentro de un <style> en la propia
   plantilla. Usa las variables de main.css para no abrir una paleta paralela.

   Escrito primero para 390 px de ancho: el comprador de esta pagina llega
   desde el movil y lo que decide es lo que cabe en los primeros 844 px.
   ========================================================================== */

.product-page {
    /* Alto reservado para la barra pegajosa y desplazamiento que deja sitio a
       la cabecera fija cuando se salta a un ancla (#package-quote). Con un
       solo valor no se descuadran entre si. */
    --product-sticky-h: 0px;
    --product-cookie-h: 0px;
    --product-border: #e2e8f0;
    --product-ink-soft: #52616b;
    --product-surface: #ffffff;
    --product-alt-bg: #f4f7fa;

    background: var(--product-alt-bg);
    padding-bottom: calc(var(--product-sticky-h) + 1rem);
    scroll-behavior: smooth;
}

/* main.css pinta cualquier <p> en gris claro (#7F8C8D, 3:1 sobre blanco).
   En un texto de 2.500 palabras que alguien tiene que leer entero, eso no
   pasa AA. */
.product-page p,
.product-page li,
.product-page dd {
    color: var(--text-dark);
}

/* `:not(.btn)` no es cosmetico: sin el, esta regla gana por especificidad a la
   de .btn-primary de main.css y los dos botones de la portada salen con el
   texto azul sobre el naranja de marca. */
.product-page a:not(.btn) {
    color: var(--secondary-color);
}

/* ------------------------------------------------------------------ portada */

.product-hero {
    background: var(--product-surface);
}

/* 140 px es un presupuesto, no una estetica: con la barra del navegador, las
   migas, el antetitulo, el H1, la entradilla, la tira de datos y los dos
   botones por delante, cada pixel de mas aqui empuja la llamada a la accion
   por debajo de los 844 px de un movil. De tablet en adelante vuelve a ser una
   portada de verdad (340 px), porque alli ese presupuesto no existe. */
.product-hero__media {
    position: relative;
    width: 100%;
    height: 140px;
    overflow: hidden;
    background: #0b1224;
}

.product-hero__media picture,
.product-hero__media .product-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-hero__body {
    padding-top: 0.5rem;
    padding-bottom: 0.875rem;
}

.product-breadcrumb {
    font-size: 0.8125rem;
    margin-bottom: 0.25rem;
}

.product-breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
}

.product-breadcrumb li {
    display: flex;
    align-items: center;
}

.product-breadcrumb li + li::before {
    content: "/";
    margin-right: 0.35rem;
    color: #94a3b8;
}

/* Un enlace de migas mide 19 px de alto por su tipografia. Se le da una altura
   de objetivo de 40 px sin agrandar la letra: el enlace sigue midiendo lo
   mismo a la vista y se puede pulsar con el pulgar. El ultimo elemento no es
   un enlace y no necesita altura de objetivo. */
.product-breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--secondary-color);
    text-decoration: none;
}

/* La ultima miga es el titulo del programa y algunos ocupan medio renglon de
   mas, con lo que las migas pasan a dos lineas y empujan cuarenta pixeles toda
   la portada. Se recorta a la vista con puntos suspensivos; el texto completo
   sigue en el HTML, que es lo que leen el lector de pantalla y el rastreador
   (y lo que va, sin recortar, en el BreadcrumbList). */
.product-breadcrumb [aria-current="page"] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--product-ink-soft);
}

.product-breadcrumb a:hover,
.product-breadcrumb a:focus {
    text-decoration: underline;
}

.product-hero__eyebrow {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-color) !important;
}

/* Gana a `.container > h1` de main.css, que lo pintaria naranja a 2,25 rem. */
.product-hero .product-hero__title {
    font-size: 1.5rem;
    line-height: 1.18;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 0.5rem;
}

.product-hero__lead {
    font-size: 0.9375rem;
    line-height: 1.35;
    margin: 0 0 0.625rem;
    color: var(--product-ink-soft) !important;
}

.product-hero__caption {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: var(--product-ink-soft) !important;
}

/* -------------------------------------------------------------- datos clave */

.product-facts {
    margin: 0 0 0.75rem;
}

.product-facts__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
}

.product-facts__item {
    position: relative;
    display: grid;
    grid-template-columns: 1.15rem 1fr;
    grid-template-areas:
        "icon label"
        "icon value"
        "icon sub";
    align-content: start;
    column-gap: 0.4rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--product-border);
    border-radius: 10px;
    background: var(--product-surface);
}

.product-facts__item > .bi {
    grid-area: icon;
    align-self: start;
    margin-top: 0.15rem;
    color: var(--secondary-color);
    font-size: 0.95rem;
}

.product-facts__label {
    grid-area: label;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--product-ink-soft);
}

.product-facts__value {
    grid-area: value;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-dark);
}

.product-facts__sub {
    grid-area: sub;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--product-ink-soft);
}

/* La celda del precio (o, sin tarifa confirmada, la del compromiso de
   respuesta) ocupa el ancho completo: es el dato que se busca primero. */
.product-facts__item.is-highlight {
    grid-column: 1 / -1;
    border-color: #cbd5e1;
    background: #f0f7ff;
}

/* --------------------------------------------------------- botones de accion */

.product-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.product-cta {
    flex: 1 1 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.product-cta--wa {
    color: #156b3d;
    border-color: #1a7f4b;
}

.product-cta--wa:hover,
.product-cta--wa:focus {
    background: #1a7f4b;
    border-color: #1a7f4b;
    color: #fff;
}

/* ------------------------------------------------------------- barra pegada */

.product-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--product-cookie-h, 0px);
    /* Por debajo del boton flotante de WhatsApp del pie (z-index 1000): la
       barra le reserva el hueco de la derecha con su relleno, pero si ademas
       se pintara por encima, su fondo blanco le comeria medio circulo. */
    z-index: 999;
    /* La esquina inferior derecha la ocupa el boton flotante de WhatsApp del
       pie (60 px + 20 px de margen) en todas las paginas del sitio. */
    padding: 0.5rem calc(0.75rem + 76px) 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--product-border);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.1);
}

.product-sticky[hidden] {
    display: none;
}

.product-sticky__btn {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

@media (min-width: 992px) {
    /* En escritorio el boton de la portada y el de la seccion de precios estan
       siempre a un golpe de rueda: la barra sobra. */
    .product-sticky {
        display: none !important;
    }
}

/* --------------------------------------------------------------- secciones */

.product-main {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}

.product-section {
    background: var(--product-surface);
    border: 1px solid var(--product-border);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.875rem;
    scroll-margin-top: 80px;
}

.product-section__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 0.875rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-color);
}

.product-subtitle {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 1rem 0 0.5rem;
}

.product-prose {
    font-size: 0.975rem;
    line-height: 1.65;
    color: var(--text-dark);
}

.product-note {
    margin: 0.75rem 0 0;
    padding: 0.625rem 0.75rem;
    border-left: 3px solid var(--secondary-color);
    background: #f1f5f9;
    border-radius: 0 8px 8px 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--product-ink-soft) !important;
}

/* ------------------------------------------------------------------- ruta */

.product-route {
    margin: 0.875rem 0 0;
    font-size: 0.875rem;
    line-height: 1.9;
}

.product-route__label {
    font-weight: 600;
    color: var(--product-ink-soft);
    margin-right: 0.25rem;
}

.product-route__city {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--product-border);
    border-radius: 999px;
    background: #f8fafc;
    font-weight: 600;
}

.product-route__sep {
    color: #94a3b8;
    margin: 0 0.15rem;
}

/* ------------------------------------------------------- listas y columnas */

.product-cols {
    display: grid;
    gap: 0.5rem;
}

.product-highlights,
.product-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.product-highlights li,
.product-list li {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: 0.5rem;
    align-items: start;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.product-highlights .bi,
.product-list .bi {
    margin-top: 0.2rem;
}

.product-highlights .bi,
.product-list--yes .bi {
    color: #15803d;
}

.product-list--no .bi {
    color: #b91c1c;
}

.product-list--info .bi {
    color: var(--secondary-color);
}

/* ------------------------------------------------------------- itinerario */

.product-days {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
    counter-reset: none;
}

.product-day {
    border: 1px solid var(--product-border);
    border-radius: 10px;
    padding: 0.875rem;
    background: var(--product-surface);
}

.product-day__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.product-day__badge {
    flex: 0 0 auto;
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--secondary-color);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.product-day__title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-dark);
    margin: 0;
}

.product-day__text {
    font-size: 0.9375rem;
}

.product-day__meta {
    margin: 0.75rem 0 0;
    display: grid;
    gap: 0.4rem;
    font-size: 0.8125rem;
}

.product-day__meta > div {
    display: grid;
    grid-template-columns: minmax(5rem, max-content) 1fr;
    gap: 0.5rem;
}

.product-day__meta dt {
    font-weight: 600;
    color: var(--product-ink-soft);
}

.product-day__meta dd {
    margin: 0;
}

.product-day__extra {
    margin-top: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: #f8fafc;
    border-radius: 8px;
}

.product-day__extra-title {
    margin: 0 0 0.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--product-ink-soft) !important;
}

.product-day__extra ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.product-day__extra li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.product-day__extra-price {
    font-weight: 600;
    white-space: nowrap;
}

.product-day__note {
    margin: 0.625rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--product-ink-soft) !important;
}

/* ------------------------------------------------------------------ tablas */

.product-table-wrap {
    overflow-x: auto;
}

.product-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.product-table th,
.product-table td {
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid var(--product-border);
    text-align: left;
    vertical-align: top;
}

.product-table thead th {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--product-ink-soft);
    background: #f8fafc;
}

.product-table__action {
    white-space: nowrap;
}

/* ------------------------------------------------------------------ precios */

.product-prices__figure {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
}

.product-prices__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--product-ink-soft);
}

.product-prices__amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
}

.product-prices__basis {
    font-size: 0.8125rem;
    color: var(--product-ink-soft);
}

.product-prices__rows,
.product-terms,
.product-credentials {
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

.product-prices__rows > div,
.product-terms > div,
.product-credentials > div {
    display: grid;
    gap: 0.15rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--product-border);
}

.product-prices__rows > div:last-child,
.product-terms > div:last-child,
.product-credentials > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.product-prices__rows dt,
.product-terms dt,
.product-credentials dt {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--product-ink-soft);
}

.product-credentials dt .bi {
    margin-right: 0.35rem;
    color: var(--secondary-color);
}

.product-prices__rows dd,
.product-terms dd,
.product-credentials dd {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.product-prices__tailor {
    margin: 0 0 0.5rem;
    font-size: 0.975rem;
    line-height: 1.55;
}

.product-prices__promise,
.product-quote__promise {
    display: flex;
    align-items: center;
    margin: 0 0 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 8px;
    background: #f0f7ff;
    border: 1px solid #cbd5e1;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-dark) !important;
}

.product-prices__cta {
    margin: 1rem 0 0;
}

.product-prices__cta .btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.product-terms__link {
    margin: 0.875rem 0 0;
    font-size: 0.875rem;
}

/* Enlaces sueltos dentro de una seccion: se les da altura de objetivo sin
   cambiar el tamano del texto. */
.product-terms__link a,
.product-credentials dd a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* ------------------------------------------- datos secundarios del resumen */

.product-extra-facts {
    list-style: none;
    margin: 0.875rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    font-size: 0.875rem;
}

.product-extra-facts li {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.product-extra-facts .bi {
    color: var(--secondary-color);
}

.product-extra-facts__label {
    font-weight: 600;
    color: var(--product-ink-soft);
}

/* ------------------------------------------------------------------- mapa */

.product-map picture,
.product-map__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* La cadena de ciudades bajo el dibujo. A 390 px los rotulos del SVG bajan de
   cinco pixeles y no se leen; esta linea da los mismos nombres en el mismo
   orden, en texto seleccionable y a tamano de lectura. */
.product-map__cities {
    margin: 0.75rem 0 0;
    font-weight: 600;
    line-height: 1.6;
    color: var(--product-ink-soft);
}

/* --------------------------------------------------------------- temporada */

.product-season__months {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
}

.product-season__label {
    font-weight: 700;
    color: var(--product-ink-soft);
    margin-right: 0.25rem;
}

/* ---------------------------------------------------------------- galeria */

.product-gallery {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.product-gallery__btn {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #e2e8f0;
    cursor: pointer;
    aspect-ratio: 4 / 3;
    text-decoration: none;
}

.product-gallery__btn picture {
    display: block;
    width: 100%;
    height: 100%;
}

.product-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.product-gallery__btn:hover .product-gallery__img,
.product-gallery__btn:focus-visible .product-gallery__img {
    transform: scale(1.04);
}

/* Vista a pantalla completa: la construye js/pages/product.js con la foto
   pulsada, para que la galeria este UNA sola vez en el HTML servido. */
.product-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(8, 12, 22, 0.94);
}

.product-lightbox img {
    max-width: 100%;
    max-height: 72vh;
    object-fit: contain;
    border-radius: 6px;
}

.product-lightbox__caption {
    color: #e2e8f0 !important;
    font-size: 0.8125rem;
    text-align: center;
    max-width: 44rem;
}

.product-lightbox__bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.product-lightbox__btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.15rem;
    cursor: pointer;
}

.product-lightbox__btn:hover,
.product-lightbox__btn:focus-visible {
    background: rgba(255, 255, 255, 0.25);
}

.product-lightbox__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

.product-lightbox__count {
    color: #cbd5e1;
    font-size: 0.8125rem;
    min-width: 8rem;
    text-align: center;
}

/* -------------------------------------------------------------------- FAQ */

.product-faq {
    display: grid;
    gap: 0.5rem;
}

.product-faq__item {
    border: 1px solid var(--product-border);
    border-radius: 10px;
    background: var(--product-surface);
}

.product-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 48px;
    padding: 0.625rem 0.875rem;
    cursor: pointer;
    list-style: none;
}

.product-faq__q::-webkit-details-marker {
    display: none;
}

.product-faq__q h3 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-dark);
}

.product-faq__q .bi {
    flex: 0 0 auto;
    color: var(--secondary-color);
    transition: transform 0.2s ease;
}

.product-faq__item[open] .product-faq__q .bi {
    transform: rotate(180deg);
}

.product-faq__a {
    padding: 0 0.875rem 0.875rem;
    font-size: 0.9375rem;
}

/* ---------------------------------------------------------------- formulario */

.product-quote .form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--product-ink-soft);
    margin-bottom: 0.25rem;
}

.product-quote .form-control,
.product-quote .form-select {
    min-height: 44px;
}

/* Bootstrap deja estas casillas en 1 rem (16 px): por debajo del minimo de 24
   px que pide WCAG 2.2 para un objetivo, y muy por debajo de lo comodo en un
   movil. Se agranda la casilla, no solo su area de pulsacion, para que se vea
   lo que se esta marcando. */
.product-quote .form-check-input,
#packageEnquiryModal .form-check-input {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.1rem;
}

.product-quote .form-check,
#packageEnquiryModal .form-check {
    min-height: 44px;
    padding-left: 2.25rem;
    display: flex;
    align-items: center;
}

.product-quote .form-check-inline {
    display: inline-flex;
    margin-right: 1rem;
}

.product-quote .form-check-input {
    margin-left: -2.25rem;
}

.product-quote__prefs {
    border: 0;
    padding: 0;
    margin: 0;
}

.product-quote__prefs legend {
    float: none;
    width: auto;
}

/* ============================== tablet ================================== */

@media (min-width: 576px) {
    .product-facts__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .product-facts__item.is-highlight {
        grid-column: auto;
    }

    .product-cta {
        flex: 0 1 auto;
        min-width: 15rem;
    }

    .product-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .product-prices__cta .btn {
        width: auto;
        min-width: 18rem;
    }
}

/* ============================= escritorio =============================== */

@media (min-width: 992px) {
    .product-hero__media {
        height: 340px;
    }

    .product-hero__body {
        padding-top: 1.25rem;
        padding-bottom: 1.5rem;
    }

    .product-hero .product-hero__title {
        font-size: 2.1rem;
    }

    .product-hero__lead {
        font-size: 1.05rem;
        max-width: 56rem;
    }

    .product-facts__grid {
        grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    }

    .product-section {
        padding: 1.5rem;
        margin-bottom: 1.25rem;
    }

    .product-section__title {
        font-size: 1.45rem;
    }

    .product-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .product-gallery {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .product-day {
        padding: 1.25rem;
    }

    .product-terms > div,
    .product-credentials > div,
    .product-prices__rows > div {
        grid-template-columns: 14rem 1fr;
        gap: 1rem;
        align-items: baseline;
    }
}

/* ================== preferencia de movimiento reducido ================== */

@media (prefers-reduced-motion: reduce) {
    .product-page {
        scroll-behavior: auto;
    }

    .product-gallery__img,
    .product-faq__q .bi {
        transition: none;
    }
}

/* ======================= ajustes de densidad (movil) =====================

   Con el itinerario completo por defecto —que es lo que pide el estandar— un
   circuito de quince dias es una pagina larga por definicion. Lo que se puede
   recortar sin quitar contenido es el aire: interlineado, relleno de las
   tarjetas de dia y separacion entre secciones. Estas reglas valen unos dos
   mil pixeles en el programa de diez dias sin cambiar una palabra.
   ========================================================================== */

@media (max-width: 991px) {
    .product-prose {
        line-height: 1.55;
    }

    .product-day {
        padding: 0.75rem;
    }

    .product-days {
        gap: 0.625rem;
    }

    .product-day__text {
        font-size: 0.9125rem;
    }

    .product-highlights,
    .product-list {
        gap: 0.4rem;
    }

    .product-highlights li,
    .product-list li {
        line-height: 1.45;
    }

    .product-section {
        padding: 0.875rem;
        margin-bottom: 0.75rem;
    }
}

/* Casilla de verificacion a 40 px en movil.
   Bootstrap la deja en 16 px: por debajo del minimo de 24 px de la WCAG 2.2 y
   muy lejos de lo que se acierta con el pulgar. 40 px es lo que usan los
   sistemas de diseno publicos (GOV.UK) por exactamente este motivo. De tablet
   en adelante se puede rebajar, porque ahi se apunta con un raton. */
@media (max-width: 575px) {
    .product-quote .form-check-input,
    #packageEnquiryModal .form-check-input {
        /* 2.75rem = 44 px justos, el objetivo tactil de la WCAG 2.2 medido
           sobre la casilla misma; con 2.5rem se quedaba en 41x41. */
        width: 2.75rem;
        height: 2.75rem;
        margin-top: 0;
    }

    .product-quote .form-check,
    #packageEnquiryModal .form-check {
        padding-left: 3.5rem;
        min-height: 48px;
    }

    .product-quote .form-check-input {
        margin-left: -3.5rem;
    }
}

/* Un enlace de migas de seis letras mide 35 px de ancho. La altura ya esta
   resuelta arriba; esto completa el objetivo de 40x40. */
.product-breadcrumb a {
    min-width: 40px;
}

/* Las tres columnas de pasajeros llevan etiquetas de distinto largo ("Adultos",
   "Ninos (3-8 anos)", "Bebes (0-2 anos)"): en movil una ocupa una linea y las
   otras dos, y los tres desplegables quedaban a tres alturas distintas. */
.product-quote .row > .col-4 {
    display: flex;
    flex-direction: column;
}

.product-quote .row > .col-4 .form-select {
    margin-top: auto;
}

/* --------------------------------------------- consentimiento legal (390 px)

   main.css pone `display:flex` a `.form-check-label` (linea 811). La frase de
   consentimiento lleva DOS enlaces dentro —"He leido y acepto la <a>Politica
   de privacidad</a> y <a>Terminos del servicio</a>"—, y flex convierte a cada
   <a> en un elemento flexible hermano del texto: medido con CDP a 390x844 en
   el circuito de 15 dias, la etiqueta salia en tres columnas
   ({label: flex w285 h94, links: [block w96 h62 x160, block w93 h94 x265]}),
   es decir la unica casilla que tiene que entenderse sin ambiguedad partida en
   columnas ilegibles.

   La misma correccion ya estaba hecha para /es/cotizacion en quote.css:445-461,
   con el mismo motivo para NO tocar main.css: otros usos de .form-check-label
   del sitio dependen de ese flex (alineado de casillas en filas de opciones).
   Aqui se repite acotada a la ficha de programa. */
.product-page .form-check-label,
#packageEnquiryModal .form-check-label {
    display: block;
}

/* El enlace no se parte a mitad: en movil quedaba "Politica de" en una linea y
   "privacidad" en la siguiente. */
.product-page .form-check-label a,
#packageEnquiryModal .form-check-label a {
    white-space: nowrap;
}

/* La casilla de consentimiento medía 41x41 a 390 px, por debajo del objetivo
   tactil de 44x44 de la WCAG 2.2 (2.5.8 / 2.5.5). La fila entera del
   consentimiento se lleva a 44 px de alto en cualquier ancho: lo que se toca
   con el pulgar es la fila, porque pulsar la etiqueta ya marca la casilla. */
.product-quote .form-check,
#packageEnquiryModal .form-check {
    min-height: 44px;
}