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

/* ═══════════════════════════════════════════════════════════════════════════
   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.
═══════════════════════════════════════════════════════════════════════════ */

.section-excursiones-grid,
#exc-grid-header,
#exc-grid {
    background: var(--color-surface);
}
/* El header (breadcrumbs+H2+subtitulo+sello) y el grid viven en 2
   Sections Elementor separadas (una Section = una sola fila de columnas; no
   se puede combinar "fila con 2 columnas" + "fila con 1 columna" dentro de
   una misma Section) — se reparte el padding original (space-8 0 space-9)
   entre ambas para que lean como un solo bloque continuo. */
#exc-grid-header { padding: var(--space-8) 0 0; }
/* 48px arriba = margen inferior del encabezado (`.section-excursiones-grid__header`). */
#exc-grid { padding: var(--space-6) 0 var(--space-9); }

/* ── Section/Column de Elementor no soportan `_css_classes`
   (gotcha #1, monolitico/README.md § 4a) — alias vía `_element_id` de la
   Section apuntando al `.elementor-container` interno, mismo patrón que
   #excursiones/#shore-tours en home.css. `#exc-traslados`/`#exc-otras`
   comparten el mismo ancho de `.container` (80%). */
#exc-grid-header .elementor-container,
#exc-grid .elementor-container,
#exc-traslados .elementor-container,
#exc-otras .elementor-container {
    width: 80% !important;
    max-width: none !important;
}
/* Fila header: alinear arriba (paridad con .section-excursiones-grid__header
   { align-items: flex-start }) — la columna del sello es angosta y flotante. */
#exc-grid-header .elementor-container {
    align-items: flex-start !important;
}
/* El sello vive en la columna derecha, que arranca a la altura de la miga
   (62,4px de alto): baja esa altura para quedar donde va en el listado
   original, 16px por encima del título. */
#exc-grid-header .exc-sello-flotante {
    margin-top: calc(62.4px - var(--space-3));
}
@media (max-width: 768px) {
    #exc-grid-header .elementor-container,
    #exc-grid .elementor-container,
    #exc-traslados .elementor-container,
    #exc-otras .elementor-container {
        width: 92% !important;
    }
    /* Mobile: el sello pasa debajo del texto (columnas Elementor stackean solas
       en <768px, pero fuerza wrap explícito por si el kit define otro breakpoint). */
    #exc-grid-header .elementor-container {
        flex-wrap: wrap !important;
    }
    /* Con el sello oculto, su columna queda vacía y Elementor igual le da
       1px de alto mínimo: se oculta la columna entera. */
    #exc-grid-header .elementor-column:has(.exc-sello-flotante) {
        display: none;
    }
}

/* Fix (paridad con prod): excursiones.php prod OCULTA por completo las
   secciones Traslados/Otras actividades cuando su CPT no tiene items
   (`if (!empty($traslados_cpts))` / `if (!empty($otras_cpts))`, ver excursiones.php
   L206/L247) — hoy en vez de eso el staging mostraba "Sin datos disponibles.".
   El shortcode ahora recibe `ocultar_si_vacio="si"` y devuelve '' cuando no hay
   items → el .elementor-widget-container del widget Shortcode queda REALMENTE
   vacío → :has() colapsa la Section entera (heading incluido), sin JS y sin
   rebuild de página si el cliente carga/borra items del CPT más adelante
   (autogestión real, no un estado baked al momento del build). Soporte :has()
   universal en navegadores evergreen desde 2023-24 — sin fallback necesario en 2026. */
#exc-traslados:has(.elementor-shortcode:empty),
#exc-otras:has(.elementor-shortcode:empty) {
    display: none !important;
}

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

/* Inversión de la capa de estilos (2026-07-16): color/tipografia/tamano/
   margin de `.section-excursiones-grid__title`/`__subtitulo` pasaron a
   widget settings reales (title_color/text_color/typography_* /_margin via
   runner _stgsetup/run-7fs.php action=migrate_v1) — editable desde el
   editor de Elementor. */

/* 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 */
}

/* 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.
═══════════════════════════════════════════════════════════════════════════ */

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

/* Inversión de la capa de estilos (2026-07-16): migrado a widget settings
   (title_color/typography_* /_margin via runner migrate_v1). */


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

.section-otras-actividades,
#exc-otras {
    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(--e-global-color-accent, var(--color-secondary));
    aspect-ratio: 4/3;
}

/* Inversión de la capa de estilos (2026-07-16): migrado a widget settings
   (title_color/typography_* /_margin via runner migrate_v1). */


/* ═══════════════════════════════════════════════════════════════════════════
   EXCURSION INDIVIDUAL — DETALLE + COTIZACIÓN-BOX (excursion.php — sección 02)
   Layout: 2 columnas (main 65% + aside 35%).
═══════════════════════════════════════════════════════════════════════════ */

.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. 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;
}
/* Precio traido del primer rango cargado, que todavia no rige (2026-08-22).
 * El monto cede su borde y su margen inferior a la nota de vigencia, que pasa
 * a cerrar el bloque; asi el par monto+nota se lee como una sola unidad.
 * La nota se oculta por JS al elegir fecha, y el modificador se retira con ella. */
.cotizacion-box__precio--con-vigencia {
    margin-bottom: var(--space-2);
    padding-bottom: 0;
    border-bottom: 0;
}
.cotizacion-box__vigencia {
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    line-height: 1.3;
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}
.cotizacion-box__vigencia[hidden] {
    display: none;
}

/* 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 */
.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.
   Fix: `:not(.elementor-widget-button)` — esta regla pre-existe de la
   era HTML plano (`.btn-outline-catalog` sobre un `<a>` real). Desde
   2026-07-16 el caso Elementor real (Home/Nosotros, Button widget con
   `_css_classes="btn-outline-catalog"`) pasó a widget settings
   (background_* /button_text_color/border_* /text_padding/border_radius/
   typography_* /hover_* via runner _stgsetup/run-7fs.php action=migrate_v1)
   — la "Contraparte Elementor" que vivía en home.css se eliminó. Este
   bloque `:not()` queda como fallback legacy inerte (grep confirma 0 usos
   como clase HTML plana en el theme) por si se reusa fuera de Elementor. */
.btn-outline-catalog:not(.elementor-widget-button) {
    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:not(.elementor-widget-button):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) */
    .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);
    }
    /* Mismos rellenos en las secciones de la página Elementor del listado. */
    #exc-grid-header { padding-top: var(--space-6); }
    #exc-grid { padding-bottom: var(--space-6); }
    #exc-traslados,
    #exc-otras {
        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). 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;
    }
}