/* ============================================================
   MODAL DE EXPERIENCIAS + RESUMEN DEL CARRITO COMPARTIDO
   Se apoya en los tokens de panaca.css. Prefijo exp-/carrito- para no
   chocar con el modal de pasaportes (modal-compra.css).
   ============================================================ */

/* --------------------------------------------
   CAPA Y CAJA
   -------------------------------------------- */
/*  Por ENCIMA de los modales que lo abren con «Súmale aventura»: el de pasaportes (2000) y
    el de cumpleaños (99999). Con 10000 se abria DEBAJO del cumpleaños y no se podia elegir
    nada (2026-10-21). Los avisos de SweetAlert siguen encima de todo (2147483647).        */
.exp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .68);
    z-index: 100000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.exp-modal-overlay--abierto { display: flex; }

.exp-modal {
    background: var(--color-white);
    width: 100%;
    max-width: 760px;
    position: relative;
    box-shadow: var(--shadow-lg);
    margin: auto;
}

.exp-modal__cerrar {
    position: absolute;
    top: .6rem;
    right: .8rem;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, .18);
    color: var(--color-white);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    z-index: 2;
    transition: background var(--transition-fast);
}

.exp-modal__cerrar:hover { background: rgba(255, 255, 255, .35); }

.exp-modal__header {
    background: linear-gradient(135deg, var(--color-green-deep) 0%, var(--color-green-dark) 100%);
    color: var(--color-white);
    padding: 1.5rem 1.6rem 1.3rem;
}

.exp-modal__titulo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    text-transform: uppercase;
    margin: 0 0 .3rem;
    letter-spacing: .02em;
}

.exp-modal__subtitulo {
    font-family: var(--font-body);
    font-size: .85rem;
    color: rgba(255, 255, 255, .85);
    margin: 0;
}

.exp-modal__body { padding: 1.4rem 1.6rem 1.6rem; }

/* --------------------------------------------
   AVISOS
   -------------------------------------------- */
/* Mismos avisos, dentro del modal: tambien con el recorte de PANACA en vez
   de la esquina redondeada generica. */
.exp-aviso {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    margin-bottom: 1.2rem;
    border-left: 5px solid var(--color-red);
    clip-path: var(--btn-path-1);
}

.exp-aviso--rojo {
    background: #fee2e2;
    border-left-color: var(--color-red);
    color: #7f1d1d;
}

.exp-aviso--ambar {
    background: #fef3c7;
    border-left-color: var(--color-yellow);
    color: #78350f;
    margin-top: 1.2rem;
}

.exp-aviso__icono {
    font-size: 1.2rem;
    line-height: 1.2;
    flex-shrink: 0;
}

.exp-aviso__texto {
    font-family: var(--font-body);
    font-size: .82rem;
    line-height: 1.5;
    margin: 0;
}

/* --------------------------------------------
   LISTA DE EXPERIENCIAS
   -------------------------------------------- */
.exp-lista {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.exp-item {
    border: 2px solid var(--color-gray);
    border-left: 5px solid var(--color-green-dark);
    padding: 1rem 1.1rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.exp-item--elegida {
    border-left-color: var(--color-red);
    box-shadow: var(--shadow-sm);
}

.exp-item--destacada {
    box-shadow: 0 0 0 3px var(--color-yellow);
}

.exp-item__top {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin-bottom: .55rem;
}

.exp-item__icono {
    font-size: 1.7rem;
    line-height: 1;
    flex-shrink: 0;
}

.exp-item__id { flex: 1; min-width: 0; }

.exp-item__nombre {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    text-transform: uppercase;
    color: var(--color-green-deep);
    margin: 0 0 .15rem;
    line-height: 1.15;
}

.exp-item__lugar {
    font-family: var(--font-body);
    font-size: .72rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.35;
}

.exp-item__precio {
    text-align: right;
    flex-shrink: 0;
}

.exp-item__precio-valor {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-red);
    line-height: 1;
}

.exp-item__precio-nota {
    display: block;
    font-family: var(--font-body);
    font-size: .62rem;
    color: var(--color-text-muted);
    margin-top: .15rem;
}

.exp-item__desc {
    font-family: var(--font-body);
    font-size: .84rem;
    color: var(--color-text-light);
    line-height: 1.5;
    margin: 0 0 .7rem;
}

.exp-item__requisitos {
    background: var(--color-cream);
    padding: .7rem .85rem;
    margin-bottom: .8rem;
}

.exp-item__requisitos-titulo {
    display: block;
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-green-deep);
    margin-bottom: .35rem;
}

.exp-item__requisitos ul {
    margin: 0;
    padding-left: 1.1rem;
}

.exp-item__requisitos li {
    font-family: var(--font-body);
    font-size: .78rem;
    color: var(--color-text);
    line-height: 1.5;
}

.exp-item__noapto {
    font-family: var(--font-body);
    font-size: .76rem;
    color: #b91c1c;
    line-height: 1.45;
    margin: .5rem 0 0;
    font-weight: 600;
}

.exp-item__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.exp-item__canal {
    font-family: var(--font-heading);
    font-size: .7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-cafe-dark);
    background: var(--color-arena-light);
    padding: .32rem .75rem;
    clip-path: var(--btn-path-2);
}

.exp-item__canal--online {
    color: var(--color-green-deep);
    background: #dcfce7;
}

/* Experiencia que aun no existe en la tienda: no se puede cobrar. */
.exp-item__canal--pendiente {
    color: #7f1d1d;
    background: #fee2e2;
}

.exp-qty__btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.exp-qty__btn:disabled:hover {
    background: var(--color-white);
    color: var(--color-green-dark);
}

/* Contador */
.exp-qty {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.exp-qty__btn {
    width: 34px;
    height: 34px;
    border: 2px solid var(--color-green-dark);
    background: var(--color-white);
    color: var(--color-green-dark);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: all var(--transition-fast);
}

.exp-qty__btn:hover {
    background: var(--color-green-dark);
    color: var(--color-white);
}

.exp-qty__input {
    width: 44px;
    height: 34px;
    text-align: center;
    border: 2px solid var(--color-gray);
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-white);
}

/* --------------------------------------------
   ACCIONES
   -------------------------------------------- */
.exp-modal__acciones {
    display: flex;
    gap: .6rem;
    margin-top: 1.2rem;
    flex-wrap: wrap;
}

.exp-modal__btn {
    flex: 1;
    min-width: 160px;
    font-family: var(--font-heading);
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .85rem 1.2rem;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.exp-modal__btn--principal {
    background: var(--color-red);
    color: var(--color-white);
    clip-path: var(--btn-path-4);
}

.exp-modal__btn--principal:hover:not(:disabled) { background: var(--color-red-dark); }

.exp-modal__btn--principal:disabled {
    background: var(--color-gray);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.exp-modal__btn--secundario {
    flex: 0 0 auto;
    min-width: 0;
    background: transparent;
    color: var(--color-text-light);
    border: 2px solid var(--color-gray);
    font-size: .78rem;
}

.exp-modal__btn--secundario:hover {
    border-color: var(--color-red);
    color: var(--color-red);
}

.exp-modal__legal {
    font-family: var(--font-body);
    font-size: .72rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 1rem 0 0;
    text-align: center;
}

/* ============================================================
   RESUMEN DEL CARRITO COMPARTIDO
   Se incrusta en los tres modales, por eso vive aqui y no en el CSS
   de uno solo.
   ============================================================ */
.carrito-resumen {
    margin-top: 1.3rem;
    border: 2px dashed var(--color-green-dark);
    background: var(--color-cream);
    padding: .9rem 1rem;
}

.carrito-resumen[hidden] { display: none; }

.carrito-resumen__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .6rem;
}

.carrito-resumen__titulo {
    font-family: var(--font-heading);
    font-size: .95rem;
    text-transform: uppercase;
    color: var(--color-green-deep);
    margin: 0;
}

.carrito-resumen__vaciar {
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: .72rem;
    color: var(--color-text-muted);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.carrito-resumen__vaciar:hover { color: var(--color-red); }

.carrito-resumen__lineas {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* El separador de grupo va en verde de marca y no en gris claro: sobre la crema,
   #999 daba 2,5:1 de contraste y no alcanzaba el minimo legible. */
.carrito-resumen__grupo {
    font-family: var(--font-body);
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-green-dark);
    margin: 1rem 0 .35rem;
}

.carrito-resumen__grupo:first-child { margin-top: 0; }

.carrito-resumen__linea {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .6rem;
    padding: .55rem 0;
    border-bottom: 1px solid rgba(2, 61, 27, .12);
}

.carrito-resumen__linea:last-child { border-bottom: none; }

/* La cantidad es una ficha con numero solo. Antes decia "3×", el mismo simbolo del
   boton de quitar que esta al otro extremo de la fila: dos cosas distintas con el
   mismo signo en el mismo renglon. */
.carrito-resumen__cant {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.85rem;
    height: 1.85rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--color-green-deep);
    color: #fff;
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 700;
    line-height: 1;
}

.carrito-resumen__detalle {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.carrito-resumen__nombre {
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.3;
}

/* "3 × $108.000 c/u": sin esto el cliente ve un monto de linea y no tiene como
   comprobar de donde sale. Es la diferencia entre mostrar una cifra y explicarla. */
.carrito-resumen__calculo {
    font-family: var(--font-body);
    font-size: .8rem;
    color: var(--color-text-light);
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

.carrito-resumen__marca {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    font-style: normal;
    color: var(--color-cafe-dark);
    background: var(--color-arena-light);
    border: 1px solid rgba(127, 58, 31, .35);
    padding: .15rem .55rem;
    clip-path: var(--btn-path-3);
    margin-left: .25rem;
    white-space: nowrap;
}

/* tabular-nums alinea los digitos en columna: los montos se comparan de un vistazo. */
.carrito-resumen__monto {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Boton real, con area de toque suficiente para el dedo y no un aspa suelta
   pegada al precio, donde era facil borrar una linea por error. */
.carrito-resumen__quitar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(2, 61, 27, .2);
    border-radius: 50%;
    color: var(--color-text-light);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.carrito-resumen__quitar:hover,
.carrito-resumen__quitar:focus-visible {
    background: var(--color-red);
    border-color: var(--color-red);
    color: #fff;
}

/* El total es lo que el cliente va a pagar: manda en la jerarquia visual. */
.carrito-resumen__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .9rem;
    padding: .75rem .9rem;
    background: var(--color-green-deep);
    color: #fff;
}

.carrito-resumen__total-texto {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    text-transform: uppercase;
    line-height: 1.1;
}

.carrito-resumen__total-conteo {
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .85);
}

.carrito-resumen__total-monto {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.carrito-resumen__nota {
    font-family: var(--font-body);
    font-size: .78rem;
    color: var(--color-cafe-dark);
    background: var(--color-arena-light);
    border-left: 3px solid var(--color-cafe-dark);
    padding: .5rem .7rem;
    line-height: 1.45;
    margin: .7rem 0 0;
}

.carrito-resumen__nota[hidden] { display: none; }

/* --------------------------------------------
   VARIANTE COMPACTA (modal de cumpleanos)
   Alli el plan tiene su propio subtotal y no viaja en el carrito compartido:
   un segundo bloque con su propio "TOTAL" ponia dos cifras distintas a
   pelearse en la misma pantalla. Esta version resume en una linea plegable
   y se anuncia como "tambien llevas", sin competir con el subtotal del plan.
   -------------------------------------------- */
.carrito-mini {
    margin: .75rem 0;
    border: 1px solid var(--color-gray);
    background: var(--color-white);
}

.carrito-mini[hidden] { display: none; }

.carrito-mini__barra {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    background: none;
    border: none;
    padding: .6rem .75rem;
    cursor: pointer;
    font-family: var(--font-body);
    text-align: left;
}

.carrito-mini__barra:hover { background: var(--color-cream); }

.carrito-mini__icono { font-size: 1rem; flex-shrink: 0; }

.carrito-mini__texto {
    flex: 1;
    font-size: .78rem;
    color: var(--color-text-light);
}

.carrito-mini__monto {
    font-family: var(--font-heading);
    font-size: .95rem;
    color: var(--color-green-deep);
}

.carrito-mini__flecha {
    font-size: .7rem;
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
}

.carrito-mini--abierto .carrito-mini__flecha { transform: rotate(180deg); }

.carrito-mini__detalle {
    padding: 0 .75rem .7rem;
    border-top: 1px solid var(--color-gray);
}

.carrito-mini__detalle[hidden] { display: none; }

.carrito-mini__detalle .carrito-resumen__vaciar { margin-top: .4rem; }

/* Dentro del cumpleanos la venta cruzada debe ocupar poco. Cuelga del modal y
   no del pie: vive en el cuerpo que hace scroll, junto al resto del contenido.
   Sin margen propio porque ese cuerpo ya es una columna flex con su gap. */
.pbday-cumple-modal .exp-crossell {
    padding: .55rem .7rem;
    margin: 0;
    gap: .5rem;
}

.pbday-cumple-modal .exp-crossell__icono { font-size: 1.15rem; }

.pbday-cumple-modal .exp-crossell__texto { font-size: .7rem; }

.pbday-cumple-modal .exp-crossell__texto strong { font-size: .8rem; }

.pbday-cumple-modal .carrito-mini { margin: 0; }

/* ============================================================
   SECCION DE LA PORTADA
   Las tarjetas que van debajo de los pasaportes. Comparten catalogo
   con el modal (Models/Experiencias), por eso viven en este archivo.
   ============================================================ */
.expo-seccion {
    background: linear-gradient(160deg, var(--color-green-deep) 0%, #05261a 55%, var(--color-black) 100%);
    padding: var(--spacing-xl) 0;
    position: relative;
    overflow: hidden;
}

.expo-encabezado {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--spacing-lg);
}

/* Sello de seccion. Estaba como pastilla redonda con borde fino, que no es del
   sistema: PANACA marca sus etiquetas con los recortes irregulares --btn-path-*,
   igual que .section-badge del resto del sitio. Peso 500 porque Poleno solo trae
   ese: pedirle 700 hace que el navegador invente la negrilla. */
.expo-eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: .8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-black);
    background: var(--color-yellow);
    padding: .5rem 1.2rem;
    margin-bottom: .9rem;
    clip-path: var(--btn-path-4);
}

.expo-titulo {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 2.9rem);
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0 0 .6rem;
}

.expo-titulo span { color: var(--color-yellow); }

.expo-bajada {
    font-family: var(--font-body);
    font-size: 1rem;
    color: rgba(255, 255, 255, .78);
    line-height: 1.6;
    margin: 0;
}

/*  Las cuatro experiencias, una sola fila en escritorio.

    Antes la rejilla era de SEIS columnas con tarjetas de dos: ese enredo existia
    para poder centrar la fila de abajo cuando el catalogo tenia cinco y quedaban
    tres arriba y dos abajo. Con cuatro no hay fila de abajo que centrar, asi que
    la rejilla dice lo que de verdad quiere: cuatro columnas iguales.

    Mas abajo, dos media queries: dos columnas en tableta y una sola en celular.  */
.expo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    max-width: 1300px;
    margin: 0 auto;
}

.expo-card {
    /* Mismo lenguaje que .pasaporte-card (panaca.css): blanca, borde de 2 px, esquinas rectas
       y foto de 380 px. Va sobre el degradado verde de la seccion, asi que resalta mas que
       las de pasaportes, que estan sobre blanco. */
    background: var(--color-white);
    border: 2px solid rgba(0, 0, 0, .08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    border-radius: 0;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.expo-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-green-dark);
}

/* El nivel deja de pintar el borde superior: ahora vive en la etiqueta sobre la foto. */
.expo-card--extrema:hover { border-color: var(--color-red); }
.expo-card--aventura:hover { border-color: var(--color-yellow); }
.expo-card--ninos:hover { border-color: var(--color-green-light); }

/*  La foto se ve ENTERA: nada de recortes.

    Antes la banda era de 220 px con object-fit: cover, y como casi todas las fotos
    de las atracciones son verticales, la tarjeta se quedaba con una rebanada — cielo
    y cables en la canopea, media cara en el puente— y la atraccion no se veia.

    Ahora la banda es mas alta y la foto entra completa (contain). Lo que sobra a los
    lados no se deja en blanco: se rellena con la misma foto ampliada y desenfocada,
    asi la tarjeta sigue siendo un bloque de color y no una foto flotando en un hueco.
    El desenfoque sale de --expo-foto, que la vista pone por tarjeta.  */
.expo-card__foto {
    position: relative;
    height: 380px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.expo-card__foto::before {
    content: "";
    position: absolute;
    inset: -16px;                 /* el blur difumina los bordes: se sale del marco */
    background: var(--expo-foto) center / cover no-repeat;
    filter: blur(18px) brightness(.82) saturate(1.1);
    transform: scale(1.05);
    z-index: 0;
}

.expo-card__img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Respaldo cuando la experiencia todavia no tiene foto. */
.expo-card--extrema .expo-card__foto { background: var(--color-red); }
.expo-card--aventura .expo-card__foto { background: var(--color-yellow); }
.expo-card--ninos .expo-card__foto { background: var(--color-green-light); }
.expo-card__icono-grande { position: relative; z-index: 1; font-size: 4.5rem; line-height: 1; }

/* Misma familia que el sello de seccion: recorte PANACA, no rectangulo liso. */
.expo-card__nivel {
    position: absolute;
    z-index: 2;
    top: .75rem;
    right: .75rem;
    font-family: var(--font-heading);
    font-size: .68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-black);
    background: var(--color-yellow);
    padding: .32rem .75rem;
    z-index: 2;
    clip-path: var(--btn-path-3);
}

.expo-card--extrema .expo-card__nivel { background: var(--color-red); color: var(--color-white); }
.expo-card--ninos .expo-card__nivel { background: var(--color-green-light); }

.expo-card__header {
    padding: 1.3rem 1.4rem .6rem;
    text-align: center;
}

.expo-card__icono { display: block; font-size: 2rem; line-height: 1; margin-bottom: .4rem; }

/* --- cuerpo de la tarjeta, ya sobre fondo blanco --- */

.expo-card__nombre {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    text-transform: uppercase;
    color: var(--color-black);
    margin: 0 0 .2rem;
    line-height: 1.1;
}

.expo-card__gancho {
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-green-dark);
    margin: 0 0 .45rem;
}

.expo-card__lugar {
    font-family: var(--font-body);
    font-size: .7rem;
    color: rgba(0, 0, 0, .55);
    margin: 0;
    line-height: 1.4;
}

.expo-card__desc {
    font-family: var(--font-body);
    font-size: .82rem;
    color: rgba(0, 0, 0, .72);
    line-height: 1.5;
    margin: 0 1.4rem .9rem;
}

.expo-card__requisitos {
    background: rgba(0, 0, 0, .04);
    border-left: 3px solid var(--color-red);
    padding: .65rem .8rem;
    margin: 0 1.4rem .9rem;
}

.expo-card__requisitos-titulo {
    display: block;
    font-family: var(--font-body);
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-red);
    margin-bottom: .3rem;
}

.expo-card__requisitos ul { margin: 0; padding-left: 1rem; }

.expo-card__requisitos li {
    font-family: var(--font-body);
    font-size: .75rem;
    color: rgba(0, 0, 0, .78);
    line-height: 1.5;
}

.expo-card__noapto {
    font-family: var(--font-body);
    font-size: .72rem;
    color: var(--color-red);
    line-height: 1.45;
    margin: .45rem 0 0;
    font-weight: 600;
}

.expo-card__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-top: auto;
    padding: .9rem 1.4rem 1.3rem;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.expo-card__precio-valor {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--color-black);
    line-height: 1;
}

.expo-card__precio-nota {
    display: block;
    font-family: var(--font-body);
    font-size: .62rem;
    color: rgba(0, 0, 0, .5);
    margin-top: .15rem;
}

/* Mismo boton que .pasaporte-card__cta, incluido el corte de las esquinas. */
.expo-card__btn {
    background: var(--color-red);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: .82rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .5px;
    padding: .7rem 1.5rem;
    border: none;
    cursor: pointer;
    clip-path: var(--btn-path-4);
    transition: all var(--transition-panaca);
}

.expo-card__btn:hover:not(:disabled) {
    background: var(--color-red-dark);
    transform: scale(1.05);
}

/* "No disponible": lo pone marcarNoDisponiblesEnPortada() cuando la experiencia todavia no
   existe en la tienda. Va DESPUES de .expo-card__btn a proposito: --pendiente tiene la misma
   especificidad que el boton normal, asi que si fuera antes ganaria el rojo y quedaria un
   boton deshabilitado con pinta de que se puede pulsar. */
.expo-card__btn--pendiente,
.expo-card__btn:disabled {
    background: rgba(0, 0, 0, .12);
    color: rgba(0, 0, 0, .45);
    cursor: not-allowed;
    transform: none;
}

.expo-card__btn--pendiente:hover,
.expo-card__btn:disabled:hover {
    background: rgba(0, 0, 0, .12);
    transform: none;
}


/* Condiciones */
.expo-condiciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    max-width: 1300px;
    margin: var(--spacing-lg) auto 0;
}

/* Los dos avisos de condiciones.
   Estaban como cajas de esquina redondeada con fondo translucido: lenguaje
   generico, y encima sobre el verde oscuro el texto se lavaba. Ahora son
   tarjetas solidas con el recorte irregular de PANACA y una banda de color
   que dice de un vistazo cual es cual. */
.expo-condicion {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: 1.2rem 1.3rem;
    background: var(--color-white);
    border-left: 6px solid var(--color-red);
    clip-path: var(--btn-path-1);
}

.expo-condicion--roja { border-left-color: var(--color-red); }
.expo-condicion--ambar { border-left-color: var(--color-yellow); }

/* El icono va en su propia pastilla recortada, como los sellos de la seccion. */
.expo-condicion__icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    background: var(--color-cream);
    clip-path: var(--btn-path-3);
}

.expo-condicion--roja .expo-condicion__icono { background: #fee2e2; }
.expo-condicion--ambar .expo-condicion__icono { background: #fef3c7; }

/* Peso 500: es un h3 y sin esto hereda 700, que en Poleno el navegador
   falsifica engordando el trazo. */
.expo-condicion__titulo {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--color-green-deep);
    margin: 0 0 .35rem;
    line-height: 1.2;
}

.expo-condicion--roja .expo-condicion__titulo { color: var(--color-red-dark); }
.expo-condicion--ambar .expo-condicion__titulo { color: var(--color-yellow-dark); }

.expo-condicion__texto {
    font-family: var(--font-body);
    font-size: .82rem;
    color: var(--color-text-light);
    line-height: 1.55;
    margin: 0;
}

.expo-cta {
    text-align: center;
    margin-top: var(--spacing-lg);
}

.expo-cta__btn {
    background: var(--color-yellow);
    color: var(--color-black);
    font-family: var(--font-heading);
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .95rem 2.2rem;
    border: none;
    cursor: pointer;
    clip-path: var(--btn-path-4);
    transition: all var(--transition-fast);
}

.expo-cta__btn:hover {
    background: var(--color-yellow-light);
    transform: translateY(-2px);
}

.expo-cta__nota {
    font-family: var(--font-body);
    font-size: .74rem;
    color: rgba(255, 255, 255, .55);
    margin: .8rem 0 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   EL PAQUETE  ·  banda ancha encima de la rejilla

   Oscura a proposito, contra el claro de las tarjetas: es lo que distingue el
   paquete de una experiencia suelta antes de leer nada. Dos columnas —lo que
   trae / lo que cuesta— porque la gracia esta en poder comparar las dos de un
   vistazo.
   ══════════════════════════════════════════════════════════════════════════ */
.expo-combo {
    display: grid;
    grid-template-columns: 1fr minmax(220px, 300px);
    gap: 1.75rem;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto 1.75rem;
    padding: 1.6rem 1.8rem;
    background: var(--color-green-dark);
    color: var(--color-white);
    border-radius: 4px;
}

.expo-combo__sello {
    display: inline-block;
    padding: .25rem .6rem;
    background: var(--color-red);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.expo-combo__nombre {
    margin: .6rem 0 .2rem;
    font-family: var(--font-heading);
    font-size: 1.9rem;
    line-height: 1.1;
    color: var(--color-white);
}

.expo-combo__gancho {
    margin: 0 0 .9rem;
    font-size: .92rem;
    opacity: .85;
}

/*  Lo que trae dentro. Cada renglon es foto + nombre + lo que vale suelto: es la
    prueba de la resta que anuncia la columna de al lado, no un adorno.  */
.expo-combo__incluye {
    list-style: none;
    margin: 0 0 .9rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.4rem;
}

.expo-combo__incluye li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
}

.expo-combo__mini {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 50%;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, .15);
}

.expo-combo__mini--icono {
    display: grid;
    place-items: center;
    font-size: 1.1rem;
}

.expo-combo__incluye-precio {
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

.expo-combo__requisitos {
    margin: 0;
    font-size: .76rem;
    line-height: 1.5;
    opacity: .75;
}

/*  La cuenta. Centrada y con el precio como pieza mas grande de toda la seccion.  */
.expo-combo__oferta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: 1.1rem 1rem;
    background: rgba(255, 255, 255, .08);
    border-radius: 3px;
    text-align: center;
}

.expo-combo__suelto {
    font-size: .8rem;
    opacity: .75;
}

.expo-combo__suelto del { opacity: .9; }

.expo-combo__precio {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    line-height: 1;
    color: var(--color-white);
    font-variant-numeric: tabular-nums;
}

.expo-combo__nota {
    font-size: .74rem;
    opacity: .7;
    margin-bottom: .35rem;
}

.expo-combo__ahorro {
    padding: .22rem .7rem;
    background: var(--color-red);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: .82rem;
    letter-spacing: .03em;
}

.expo-combo__btn {
    margin-top: .7rem;
    width: 100%;
    padding: .75rem 1.2rem;
    background: var(--color-white);
    color: var(--color-green-dark);
    border: none;
    font-family: var(--font-heading);
    font-size: .88rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    clip-path: var(--btn-path-4);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.expo-combo__btn:hover {
    background: var(--color-red);
    color: var(--color-white);
}

/*  Por debajo de 1200 px cuatro tarjetas quedan demasiado angostas para su lista de
    requisitos: se pasa a dos.  */
@media (max-width: 1199.98px) {
    .expo-grid { grid-template-columns: repeat(2, 1fr); }
}

/*  La banda del paquete se parte en dos filas antes que las tarjetas: su columna
    derecha necesita 220 px y por debajo de 900 los deja sin aire a los dos lados.  */
@media (max-width: 900px) {
    .expo-combo { grid-template-columns: 1fr; gap: 1.2rem; }
}

/*  Celular: una debajo de otra, a lo ancho de la pantalla.  */
@media (max-width: 640px) {
    .expo-grid { grid-template-columns: 1fr; }
    .expo-combo { padding: 1.3rem 1.1rem; }
    .expo-combo__nombre { font-size: 1.6rem; }
    .expo-combo__incluye { flex-direction: column; gap: .55rem; }
    .expo-card__pie { flex-direction: column; align-items: stretch; text-align: center; }
    .expo-cta__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .expo-card, .expo-cta__btn { transition: none; }
    .expo-card:hover, .expo-cta__btn:hover { transform: none; }
}

/* --------------------------------------------
   VENTA CRUZADA (dentro de los otros modales)
   -------------------------------------------- */
.exp-crossell {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    text-align: left;
    background: var(--color-white);
    border: 2px solid var(--color-yellow);
    padding: .8rem .9rem;
    margin: .9rem 0;
    cursor: pointer;
    transition: all var(--transition-fast);
    clip-path: var(--btn-path-1);
}

.exp-crossell:hover {
    background: var(--color-cream);
    transform: translateY(-2px);
}

.exp-crossell__icono {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.exp-crossell__texto {
    flex: 1;
    font-family: var(--font-body);
    font-size: .76rem;
    color: var(--color-text-light);
    line-height: 1.4;
}

.exp-crossell__texto strong {
    display: block;
    font-family: var(--font-heading);
    font-size: .92rem;
    text-transform: uppercase;
    color: var(--color-green-deep);
    margin-bottom: .1rem;
}

.exp-crossell__flecha {
    font-size: 1.1rem;
    color: var(--color-red);
    flex-shrink: 0;
}

/* --------------------------------------------
   RESPONSIVE
   -------------------------------------------- */
@media (max-width: 600px) {
    .exp-modal-overlay { padding: 0; }

    .exp-modal { max-width: none; min-height: 100%; }

    .exp-modal__body { padding: 1.1rem 1rem 1.4rem; }

    .exp-item__top { flex-wrap: wrap; }

    .exp-item__precio {
        text-align: left;
        width: 100%;
        display: flex;
        align-items: baseline;
        gap: .4rem;
    }

    .exp-item__pie {
        flex-direction: column;
        align-items: stretch;
    }

    .exp-qty { justify-content: center; }

    .exp-modal__btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .exp-item,
    .exp-qty__btn,
    .exp-modal__btn { transition: none; }
}

/* ============================================================================
   CONTRASTE  (2026-09-07)

   Esta hoja se carga DESPUES de panaca.css, asi que los ajustes que se hicieron alli
   para estos mismos textos no llegaban a aplicarse: mandaba lo de aqui. Se corrige en
   el sitio que de verdad gana.

   Los tres bajaban del minimo de 4,5:1 para texto normal. Cada color es el tono MAS
   CLARO que cumple sobre su fondo, para que el diseno cambie lo justo:

     var(--color-red)  #e21b1b sobre #f5f5f5   4,37 -> #db1a1a  4,61
     rgba(0,0,0,.5)    #808080 sobre #ffffff   3,94 -> #747474  4,67
     --color-yellow-dark #d38f01 sobre blanco  2,72 -> #9e6b01  4,61
   ============================================================================ */
.expo-card__requisitos-titulo,
.expo-card__noapto { color: #db1a1a; }

.expo-card__precio-nota { color: #747474; }

.expo-condicion--ambar .expo-condicion__titulo { color: #9e6b01; }