/**
 * assets/css/excursiones.css — Sussanich Turismo
 * Estilos específicos de excursiones.php y excursion.php (Paso 4).
 * NO toca home.css, tokens.css ni base.css.
 * home.css aporta los estilos de .card-excursion (compartidos).
 * Paso 4 — 2026-05-18
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BREADCRUMBS
   Reutilizado en excursiones.php y excursion.php.
═══════════════════════════════════════════════════════════════════════════ */

.breadcrumbs {
    background: inherit;
    border: none;
    padding: var(--space-3) 0 var(--space-4);
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-1);
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    color: var(--color-text-secondary);
}

.breadcrumbs__item + .breadcrumbs__item::before {
    content: '›';
    color: var(--color-text-muted);
    margin-right: var(--space-1);
}

.breadcrumbs__item a {
    color: var(--color-text-link);
    text-decoration: none;
}
.breadcrumbs__item a:hover {
    text-decoration: underline;
}
.breadcrumbs__item--active {
    color: var(--color-text-primary);
    font-weight: var(--fw-medium);
}


/* ═══════════════════════════════════════════════════════════════════════════
   GRID DE EXCURSIONES (excursiones.php — sección 02)
   Fondo: --color-surface. Grid 4 columnas. Sello flotante top-right.
   Referencia: 3-Excursiones/despiece/secciones/02-excursiones-destacadas.webp
═══════════════════════════════════════════════════════════════════════════ */

.section-excursiones-grid {
    background: var(--color-surface);
    padding: var(--space-8) 0 var(--space-9);
}

.section-excursiones-grid__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    position: relative;
}

.section-excursiones-grid__title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-regular);
    color: var(--color-text-primary);
    line-height: var(--lh-snug);
    margin: 0 0 var(--space-2);
}

.section-excursiones-grid__subtitulo {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: var(--lh-base);
}

/* Sello flotante Amazing Patagonia — top right del header de sección */
.exc-sello-flotante {
    flex-shrink: 0;
    width: 110px;
    height: 110px;
    object-fit: contain;
    margin-top: -16px;
}

/* Grid 4 columnas — igual que el catálogo de Home */
.cards-grid--4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.cards-grid--2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    max-width: 700px; /* traslados: solo 2 cards, no estirar todo el ancho */
    margin-left: 0;   /* alineado a la izquierda (despiece 03-traslados.webp) */
}

/* Estado vacío */
.exc-sin-datos {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-text-secondary);
    text-align: center;
    padding: var(--space-7) 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   TRASLADOS (excursiones.php — sección 03)
   Fondo: --color-surface (continúa). Título h2. 2 cards alineadas izq.
   Referencia: 3-Excursiones/despiece/secciones/03-traslados.webp
═══════════════════════════════════════════════════════════════════════════ */

.section-traslados {
    background: var(--color-surface);
    padding: var(--space-6) 0 var(--space-8);
    border-top: 1px solid var(--color-border-soft);
}

.section-traslados__title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-regular);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-5);
}


/* ═══════════════════════════════════════════════════════════════════════════
   OTRAS ACTIVIDADES (excursiones.php — sección 04)
   Solo se muestra si hay contenido en CPT `otra_actividad`.
═══════════════════════════════════════════════════════════════════════════ */

.section-otras-actividades {
    background: var(--color-surface);
    padding: var(--space-6) 0 var(--space-8);
    border-top: 1px solid var(--color-border-soft);
}

/* Placeholder amarillo para cards de otras actividades sin datos del CPT */
.card-excursion__img-placeholder--amarillo {
    background: var(--color-secondary);
    aspect-ratio: 4/3;
}

.section-otras-actividades__title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-regular);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-5);
}


/* ═══════════════════════════════════════════════════════════════════════════
   EXCURSION INDIVIDUAL — DETALLE + COTIZACIÓN-BOX (excursion.php — sección 02)
   Layout: 2 columnas (main 65% + aside 35%).
   Referencia: 4-Excursiones-Individual/despiece/secciones/02-detalle-cotizacion.webp
═══════════════════════════════════════════════════════════════════════════ */

.excursion-detalle {
    background: #f1f1f1;
    padding: var(--space-7) 0 0;
}

.excursion-detalle__layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-7);
    align-items: start;
}

/* ── Columna principal ─────────────────────────────────────────────────────── */

.excursion-detalle__kicker {
    display: block;
    margin-bottom: var(--space-2);
}

/* Ficha técnica de la excursión: reusa .sho-ficha-sidebar* (card blanca) pero
   vive en la columna izquierda bajo la descripción. Solo agrega separación
   superior. NO toca el estilo de shore. */
.exc-ficha {
    margin-top: var(--space-5);
}

.excursion-detalle__acciones-share {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.share-icon img {
    display: block;
    transition: opacity var(--dur-fast) var(--ease-base);
}
.share-icon:hover img {
    opacity: 0.75;
}

.excursion-detalle__desc {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-text-primary);
    line-height: var(--lh-normal);
    margin-bottom: var(--space-6);
}
.excursion-detalle__desc p {
    margin-bottom: var(--space-3);
}
.excursion-detalle__desc h3 {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--fw-regular);
    color: var(--color-text-primary);
    line-height: var(--lh-snug);
    margin: 0 0 var(--space-4);
}

/* ── Galería (excursion.php + shore-tour.php) ─────────────────────────────
   Preview de 3 imágenes (central más grande) → click abre lightbox modal.
   Sin chevrones: solo botón "Ver galería".
   ─────────────────────────────────────────────────────────────────────── */

.exc-galeria-section {
    background: #f1f1f1;
    padding: 0 0 var(--space-6);
}

.exc-galeria-inner {
    padding: 16px 0;
}

/* Preview: 3 imágenes, la central más grande */
.exc-galeria-preview {
    display: grid;
    grid-template-columns: 1fr 1.35fr 1fr;
    gap: 24px;
    align-items: center;
}

.exc-galeria-preview__item {
    overflow: hidden;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.exc-galeria-preview__item img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.exc-galeria-preview__item:hover img {
    transform: scale(1.03);
}

/* Botón "Ver galería" */
.exc-galeria-controls {
    display: flex;
    justify-content: center;
    margin-top: var(--space-4);
}

.exc-galeria-ver-btn {
    display: inline-block;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease;
}
.exc-galeria-ver-btn:hover {
    color: var(--color-primary);
}

@media (max-width: 768px) {
    .exc-galeria-preview {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .exc-galeria-preview__item--side {
        display: none;
    }
    .exc-galeria-preview__item--center img {
        aspect-ratio: 4 / 3;
    }
}

/* ─── Galería preview: placeholder con logo (Fix 1 — 2026-05-27) ─────────
   Logo mismo tamaño que header (52px), sin filter, visible entero.
   ────────────────────────────────────────────────────────────────────── */
.exc-galeria-preview__item--placeholder {
    background: rgba(27, 43, 58, 0.04);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    pointer-events: none;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
}
/* Especificidad > `.exc-galeria-preview__item img` — esa regla (cover 100%)
   le ganaba a esta y estiraba el logo a full-bleed (bug visible hasta 2026-06-11) */
.exc-galeria-preview__item img.exc-galeria-placeholder__logo {
    width: auto;
    height: 52px; /* Igual que .navbar-logo-img height */
    max-width: 80%;
    aspect-ratio: auto;
    object-fit: contain;
    opacity: 1;
    filter: none; /* Logo entero, sin grayscale ni brightness */
}
@media (max-width: 768px) {
    .exc-galeria-preview__item img.exc-galeria-placeholder__logo {
        height: 42px; /* 52px × 0.8 */
        max-width: 80%;
    }
}

/* ─── Card precio: "Consultar" cuando no hay monto (Fix 3 — 2026-05-27) ─── */
.card-excursion__price--consultar .card-excursion__price-amount--text {
    font-size: 1.1em;
    font-weight: var(--fw-semibold, 600);
}

/* ─── Lightbox modal ───────────────────────────────────────────────────── */
.galeria-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
}
.galeria-lightbox[hidden] {
    display: none;
}

.galeria-lightbox__viewport {
    width: min(90vw, 1200px);
    overflow: hidden;
    position: relative;
}

.galeria-lightbox__track {
    display: flex;
    transition: transform 0.4s ease;
    will-change: transform;
}

.galeria-lightbox__slide {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.galeria-lightbox__slide img {
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: var(--radius-sm);
}

.galeria-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.6);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease;
    z-index: 2;
}
.galeria-lightbox__nav:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.galeria-lightbox__nav--prev { left: 24px; }
.galeria-lightbox__nav--next { right: 24px; }

.galeria-lightbox__close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
    z-index: 2;
}
.galeria-lightbox__close:hover {
    background: var(--color-primary);
}

.galeria-lightbox__counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
}

@media (max-width: 576px) {
    .galeria-lightbox__nav { width: 38px; height: 38px; font-size: 22px; }
    .galeria-lightbox__nav--prev { left: 8px; }
    .galeria-lightbox__nav--next { right: 8px; }
}

/* ── Ficha técnica ─────────────────────────────────────────────────────────── */

.ficha-tecnica-excursion {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-top: var(--space-6);
}

.ficha-tecnica-excursion__title {
    font-family: var(--font-body);
    font-size: var(--fs-h3);
    font-weight: 800;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-4);
}

.ficha-tecnica-excursion__row {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-soft);
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
}

.ficha-tecnica-excursion__label {
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
    min-width: 140px;
}

.ficha-tecnica-excursion__value {
    color: var(--color-text-secondary);
}

.ficha-tecnica-excursion__bloque {
    margin-top: var(--space-4);
}

.ficha-tecnica-excursion__bloque-title {
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: var(--ls-kicker);
    margin: 0 0 var(--space-2);
}

.ficha-tecnica-excursion__list {
    padding-left: var(--space-4);
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    color: var(--color-text-secondary);
    line-height: var(--lh-normal);
}

.ficha-tecnica-excursion__list--incluye li::marker {
    color: var(--color-success);
}
.ficha-tecnica-excursion__list--no-incluye li::marker {
    color: var(--color-error);
}

.ficha-tecnica-excursion__obs {
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    color: var(--color-text-secondary);
    line-height: var(--lh-normal);
}


/* ── Cotización-box ─────────────────────────────────────────────────────────── */

.cotizacion-box-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.cotizacion-box {
    background: var(--color-surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-5);
}

.cotizacion-box__title {
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 400;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

/* Precio en vivo (Tanda 2 audit 2026-06-01, feature 8). Verde grande, AR format.
 * Variante --consultar: tipografía más chica + color secundario neutro. */
.cotizacion-box__precio {
    font-family: var(--font-body);
    font-size: 28px;
    font-weight: 600;
    color: #1a9938;
    line-height: 1.1;
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    letter-spacing: -0.01em;
}
.cotizacion-box__precio--consultar {
    font-size: 22px;
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* Date picker */
.cotizacion-box__field {
    margin-bottom: var(--space-4);
}

.cotizacion-box__label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}

.cotizacion-box__input {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-text-primary);
    background: var(--color-background);
    box-sizing: border-box;
    transition: border-color var(--dur-fast) var(--ease-base);
}
.cotizacion-box__input:focus {
    border-color: var(--color-primary);
}

/* Datepicker propio: el ícono de calendario vive en datepicker.css (.js-datepicker). */

/* Steppers: 3 en fila horizontal (despiece) */
.cotizacion-box__steppers {
    display: flex;
    flex-direction: row;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.cotizacion-box__stepper {
    flex: 1 1 0;
    min-width: 0;            /* permite que las 3 columnas encojan parejo sin overflow */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

/* Label de altura FIJA (2 líneas reservadas) → los 3 labels miden igual sin
   importar si "(+N años)" cabe o no en su renglón. Estructura consistente:
   nombre en línea 1, "(N años)" SIEMPRE en línea 2 (small como bloque).
   Así los inputs quedan SIEMPRE alineados horizontalmente (fix 2026-06-22). */
.cotizacion-box__stepper-label {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-text-primary);
    font-weight: var(--fw-medium);
    text-align: center;
    line-height: 1.15;
    flex: 0 0 auto;
    min-height: calc(12px * 1.15 + 11px * 1.15);  /* 1 línea nombre + 1 línea small */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}
.cotizacion-box__stepper-label small {
    display: block;          /* "(N años)" siempre en su propia línea → sin wrap ragged */
    font-size: 11px;
    line-height: 1.15;
    color: var(--color-text-muted);
    font-weight: var(--fw-regular);
}

.cotizacion-box__stepper-ctrl {
    width: 100%;
    margin-top: auto;        /* ancla el input abajo: alineación garantizada */
}

/* Input tipo number con spinners nativos estilizados */
.stepper-input {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
    background: var(--color-background);
    text-align: center;
    box-sizing: border-box;
}
.stepper-input:focus {
    border-color: var(--color-primary);
    outline: none;
}

/* Botón Agregar */
.cotizacion-box__btn-agregar {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-text-on-dark);
    border: none;
    border-radius: var(--radius-pill);
    padding: 5px var(--space-5);
    font-family: var(--font-body);
    font-size: var(--fs-btn);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-btn);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-base);
    margin-bottom: var(--space-1);
}
.cotizacion-box__btn-agregar:hover {
    background: var(--color-primary-hover);
}

/* O3 fix 2026-06-23: botón secundario/outline "Ver carrito" — mismo ancho que Agregar */
.cotizacion-box__btn-ver-carrito {
    display: block;
    width: 100%;
    text-align: center;
    background: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 10px var(--space-4);
    font-family: var(--font-body);
    font-size: var(--fs-btn);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-btn);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-base), color var(--dur-fast) var(--ease-base);
    box-sizing: border-box;
}
.cotizacion-box__btn-ver-carrito:hover {
    background: var(--color-text-primary);
    color: var(--color-text-on-dark);
    text-decoration: none;
}

/* Feedback de agregado */
.cotizacion-box__feedback {
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    color: var(--color-success);
    text-align: center;
    min-height: 20px;
    margin: 0 0 var(--space-2);
}

/* Link "Comparar excursiones" */
.cotizacion-box__comparar {
    display: block;
    text-align: center;
    margin-top: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
}
.cotizacion-box__comparar:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Compartir artículo — debajo del box */
.excursion-detalle__acciones-share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
}

.acciones-share__label {
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    color: var(--color-text-secondary);
}

.acciones-share__icons {
    display: flex;
    gap: var(--space-2);
}

.share-icon img {
    display: block;
    border-radius: var(--radius-circle);
    transition: opacity var(--dur-fast) var(--ease-base);
}
.share-icon:hover img {
    opacity: 0.8;
}


/* ═══════════════════════════════════════════════════════════════════════════
   GALERÍA MODAL (eliminado — reemplazado por carrusel inline)
═══════════════════════════════════════════════════════════════════════════ */



/* Reusar mismo estilo para el botón de la lista */
.btn-outline-catalog {
    display: inline-block;
    border: 1px solid var(--color-text-primary);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-6);
    font-family: var(--font-body);
    font-size: var(--fs-btn);
    font-weight: var(--fw-medium);
    color: var(--color-text-primary);
    text-decoration: none;
    letter-spacing: var(--ls-btn);
    transition: background var(--dur-fast) var(--ease-base), color var(--dur-fast) var(--ease-base);
}
.btn-outline-catalog:hover {
    background: var(--color-text-primary);
    color: var(--color-text-on-dark);
    text-decoration: none;
}

/* Footer del grid catálogo */
.catalog-footer {
    text-align: center;
    margin-top: var(--space-6);
}


/* ═══════════════════════════════════════════════════════════════════════════
   404 — excursión no encontrada
═══════════════════════════════════════════════════════════════════════════ */

.excursion-404 {
    padding: var(--space-8) 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-text-secondary);
}

.btn-exc-back {
    display: inline-block;
    margin-top: var(--space-4);
    color: var(--color-text-link);
    text-decoration: none;
    font-weight: var(--fw-medium);
}
.btn-exc-back:hover {
    text-decoration: underline;
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════════ */

/* Tablet ≤ 1024px */
@media (max-width: 1024px) {
    .excursion-detalle__layout {
        grid-template-columns: 1fr 320px;
        gap: var(--space-5);
    }
}

/* Tablet ≤ 768px */
@media (max-width: 768px) {
    .cards-grid--4col {
        grid-template-columns: repeat(2, 1fr);
    }

    .excursion-detalle__layout {
        grid-template-columns: 1fr;
    }

    .section-excursiones-grid__header {
        flex-direction: column;
        gap: var(--space-4);
    }

    .exc-sello-flotante {
        display: none;
    }

    /* Traslados: a 768 siguen 2 columnas (1 sola columna full-width hacía
       cards gigantes — Yago 2026-06-11) */
    .cards-grid--2col {
        grid-template-columns: repeat(2, 1fr);
        max-width: 700px;
    }
}

@media (max-width: 520px) {
    .cards-grid--2col {
        grid-template-columns: 1fr;
        max-width: 340px;
    }
}

/* Mobile ≤ 480px */
@media (max-width: 480px) {
    .cards-grid--4col {
        grid-template-columns: 1fr;
    }

    .section-excursiones-grid,
    .section-traslados,
    .section-te-puede-interesar {
        padding-top: var(--space-6);
        padding-bottom: var(--space-6);
    }

    .excursion-detalle {
        padding: var(--space-5) 0;
    }

    .cotizacion-box {
        padding: var(--space-4);
    }

    .breadcrumbs__item:not(:last-child):not(:first-child) {
        display: none; /* En mobile muy chico, ocultar items intermedios */
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   04 — Te puede interesar
   ══════════════════════════════════════════════════════════════════════════════ */

.section-te-puede-interesar {
    background: #fff;
    padding: var(--space-8) 0;
}

/* Botón "+" proporcionado a la card chica del TPI (44px se veía gigante —
   Yago 2026-06-11). Aplica también al TPI de shore tours. */
.section-te-puede-interesar .card-excursion__add,
.sho-te-puede__grid .card-excursion__add {
    width: 34px;
    height: 34px;
    border-width: 1px;
}

.section-tpi__header {
    text-align: center;
    margin-bottom: var(--space-7);
}

.section-tpi__title {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 400;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3);
    text-align: center;
    max-width: none;
    width: 100%;
}

.section-tpi__subtitulo {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* V2(a) fix 2026-06-23: segunda definición de .cards-grid--4col eliminada.
   El grid usa la fuente de verdad de L98 con sus breakpoints canónicos (768→2col, 480→1col).
   El gap/margin de TPI se scopea aquí para no duplicar la regla global. */
.section-te-puede-interesar .cards-grid--4col {
    gap: 40px;
    margin-bottom: var(--space-7);
}

.section-tpi__footer {
    text-align: center;
}

.btn-outline-tpi {
    display: inline-block;
    padding: 10px 36px;
    border: 1px solid var(--color-text-primary);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: background var(--dur-fast), color var(--dur-fast);
}

.btn-outline-tpi:hover {
    background: var(--color-text-primary);
    color: #fff;
}

.container-sm .card-excursion__title {
    font-size: 24px;
}

/* breakpoints canónicos para TPI: title y gap heredan de los globales (768/480). */
@media (max-width: 560px) {
    /* (breakpoints grid ya cubiertos por las reglas globales 768/480 arriba) */

    .section-tpi__title {
        font-size: 28px;
    }
}