/**
 * shore-tours.css — Sussanich Turismo
 * Estilos específicos de shore-tours.php (lista) y shore-tour.php (individual).
 *
 * REGLAS:
 * - NO tocar tokens.css, base.css, home.css, excursiones.css
 * - Tokens en px (no rem)
 * - SHO-I hereda layout de excursion.php (excursion-detalle__layout, exc-galeria-*)
 *   Solo el sidebar cambia: .sho-ficha-sidebar en lugar de .cotizacion-box
 */

/* ═══════════════════════════════════════════════════════════════════════════
   SHORE TOURS LISTA — Sección intro + grid
   ═══════════════════════════════════════════════════════════════════════════ */

.sho-grid-intro {
    padding: 56px 0 32px;
    max-width: 700px;
}

.sho-grid-intro__titulo {
    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 12px;
}

.sho-grid-intro__titulo span {
    display: block;
}

.sho-grid-intro__bajada {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: var(--lh-normal);
}

/* Grid de 4 cards con sello flotante */
.sho-grid-wrap {
    position: relative;
    padding-bottom: 56px;
}

.sho-sello-worryless {
    position: absolute;
    top: -30px;
    right: 0;
    width: 110px;
    height: 110px;
    z-index: 10;
    pointer-events: none;
    animation: selloSpin 18s linear infinite;
}

.sho-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 992px) {
    .sho-cards-grid { grid-template-columns: repeat(2, 1fr); }
    .sho-sello-worryless { top: -20px; width: 90px; height: 90px; }
}

@media (max-width: 576px) {
    .sho-cards-grid { grid-template-columns: 1fr; }
    .sho-sello-worryless { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD SHORE-TOUR — overrides sobre home.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* Badge pill "SPECIAL OFFER" — top-left */
.card-shore__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 4;
}

.card-shore__badge-pill {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

/* Body: apilar verticalmente flush-bottom (SHO-L y SHO-I) */
.sho-cards-grid .card-shore__body,
.sho-te-puede__grid .card-shore__body {
    justify-content: flex-end;
}

.sho-cards-grid .card-shore__title-wrap,
.sho-te-puede__grid .card-shore__title-wrap {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;   /* título+duración centrados verticalmente en el wrap (Yago 2026-06-22) */
    flex: 1;
    gap: var(--space-3);
    min-height: 0;
    /* min-height:0 evita que el flex item se expanda forzando overflow hacia arriba que
       pisaba el badge SPECIAL OFFER en cards 1:1 con títulos de 2-3 líneas. */
}

/* Card 1:1 con grid 4-col (992-1440px) → títulos largos rompen el aspect-ratio fijo.
   Tipografía más chica = títulos largos entran en 2 líneas sin pisar badge ni footer. */
.sho-cards-grid .card-shore__title,
.sho-te-puede__grid .card-shore__title {
    font-size: 18px;
    line-height: 1.25;
}

@media (min-width: 1441px) {
    .sho-cards-grid .card-shore__title,
    .sho-te-puede__grid .card-shore__title {
        font-size: 20px;
    }
}

/* Mobile 1-columna angosta (≤560px): el cuadrado 1:1 queda DEMASIADO BAJO para
   kicker + título 2 líneas + duración 2 líneas ("SEGÚN HORARIO DEL CRUCERO") + footer
   → la duración se montaba sobre Precio/Consultar (gap -40 @320, fix 2026-06-22).
   Solución (mantiene full-bleed con overlay): la card ADAPTA su alto al contenido —
   aspect-ratio:auto + min-height, y el body fluye (position:relative) en vez de estar
   clavado al cuadrado. La imagen sigue absolute inset:0 → llena el nuevo alto. Sin solape. */
@media (max-width: 560px) {
    .sho-cards-grid .card-shore {
        aspect-ratio: auto;
        min-height: 300px;       /* piso visual; crece si el contenido lo necesita */
    }
    .sho-cards-grid .card-shore__body {
        position: relative;       /* fluye dentro de la card en vez de absolute inset:0 */
        inset: auto;
        justify-content: flex-start;
        padding-top: 64px;        /* sigue dejando aire para el badge SPECIAL OFFER */
    }
    .sho-cards-grid .card-shore__title-wrap {
        flex: 0 0 auto;           /* no forzar a llenar: tamaño natural del contenido */
    }
    .sho-cards-grid .card-shore__footer {
        margin-top: 16px;         /* separación real del bloque título/duración */
    }
}

/* Kicker "Excursión en tierra" */
.card-shore__kicker {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    color: rgba(255,255,255,0.85);
    margin: 0 0 4px;
}

/* Duración */
.card-shore__duracion {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 400;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 6px 0 0;
}

/* Footer del card */
.card-shore__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.25);
    padding-top: 10px;
}

/* V2(b) fix 2026-06-23 (iter 3 — verificado en dev): en grilla de 4 cols (≥992px) el body
   hereda padding-top:60px del base home.css. Con cards ~273px cuadradas, kicker + título 2 líneas
   + duración 2 líneas ("ACCORDING TO CRUISE SCHEDULE") + footer(71px) = 224px que excede los
   213px usables (273-60). Solución: (a) reducir padding-top a 32px — el badge SPECIAL OFFER
   mide ≤32px desde el top del body y sigue cubierto; (b) overflow:hidden contiene desborde;
   (c) margin-top de duracion reducido a 2px (vs 6px base); (d) footer flex-shrink:0.
   QA DOM @1440: gap dur↔footer ≥ 1px en todas las cards. */
.sho-cards-grid .card-shore__body,
.sho-te-puede__grid .card-shore__body {
    padding-top: 32px;
    overflow: hidden;
}

.sho-cards-grid .card-shore__duracion,
.sho-te-puede__grid .card-shore__duracion {
    margin-top: 2px;
}

.sho-cards-grid .card-shore__footer,
.sho-te-puede__grid .card-shore__footer {
    min-height: 0;
    flex-shrink: 0;
}

.card-shore__precio-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.card-shore__precio-label {
    font-family: var(--font-body);
    font-size: 16px;
    color: rgba(255,255,255,0.7);
}

.card-shore__precio-valor {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHORE TOUR INDIVIDUAL — Sidebar ficha técnica
   Despiece: 6-Shore-Tours_Individual/despiece/elementos/ficha-tecnica-sidebar.webp
   Layout del contenedor reutiliza excursion-detalle__layout + exc-galeria-* de excursiones.css
   ═══════════════════════════════════════════════════════════════════════════ */

.sho-ficha-sidebar {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 32px;
    font-family: var(--font-body);
}

.sho-ficha-sidebar__titulo {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 4px;
}

.sho-ficha-sidebar__divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 12px 0 16px;
}

/* Filas label + valor inline (Promo, Salidas, Duración) */
.sho-ficha-sidebar__row {
    margin-bottom: 8px;
    font-size: var(--fs-body-sm);
    color: var(--color-text-secondary);
    line-height: var(--lh-normal);
}

.sho-ficha-sidebar__label {
    color: var(--color-text-primary);
    font-weight: 700;
}

.sho-ficha-sidebar__valor {
    color: var(--color-text-secondary);
}

/* Bloques con lista (Incluye, No incluye, Adicionales) */
.sho-ficha-sidebar__block {
    margin-top: 16px;
}

.sho-ficha-sidebar__block > .sho-ficha-sidebar__label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--fs-body-sm);
    color: var(--color-text-primary);
    font-weight: 700;
}

.sho-ficha-sidebar__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sho-ficha-sidebar__lista li {
    font-size: var(--fs-body-sm);
    color: var(--color-text-secondary);
    padding-left: 16px;
    position: relative;
    line-height: var(--lh-normal);
}

.sho-ficha-sidebar__lista li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--color-text-muted);
}

.sho-ficha-sidebar__lista--check li::before {
    content: '✓';
    color: var(--color-success);
    font-weight: 700;
}

/* Bloque OFERTA ESPECIAL */
.sho-ficha-sidebar__oferta {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-soft);
}

.sho-ficha-sidebar__oferta-label {
    display: block;
    font-size: var(--fs-body-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.sho-ficha-sidebar__oferta-desc {
    font-size: var(--fs-body-sm);
    color: var(--color-text-secondary);
    margin: 0 0 4px;
}

.sho-ficha-sidebar__consultar {
    font-size: var(--fs-body-sm);
    font-weight: 700;
    color: var(--color-text-primary);
}

/* Botón WhatsApp — pill compacto, icono SVG a la derecha */
.sho-ficha-sidebar__btn-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    padding: 4px 18px;
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    transition: opacity 0.2s ease;
    text-align: center;
    width: auto;
    align-self: flex-start;
}

.sho-ficha-sidebar__btn-wa-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.sho-ficha-sidebar__btn-wa:hover {
    opacity: 0.88;
    color: #fff;
    text-decoration: none;
}

/* Galería preview SHO-I: SIN overrides — mismo estilo que excursiones
   (aspect 1:1, centro más grande, placeholder con logo). El override previo
   de aspect 414/276 rompía la consistencia (Yago 2026-06-11). */

/* ═══════════════════════════════════════════════════════════════════════════
   "Te puede interesar" (cross-sell)
   ═══════════════════════════════════════════════════════════════════════════ */

.sho-te-puede {
    padding: 56px 0 64px;
    background: var(--color-surface);
}

.sho-te-puede__header {
    position: relative;
    text-align: center;
    margin-bottom: 32px;
}

.sho-te-puede__titulo {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-regular);
    color: var(--color-text-primary);
    margin: 0 0 8px;
    max-width: none;
}

.sho-te-puede__bajada {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-text-secondary);
    margin: 0;
}

.sho-te-puede__sello {
    position: absolute;
    top: -10px;
    right: 0;
    width: 100px;
    height: 100px;
    pointer-events: none;
    animation: selloSpin 18s linear infinite;
}

.sho-te-puede__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.sho-te-puede__footer {
    text-align: center;
    margin-top: 32px;
}

.sho-te-puede__btn-ver-todas {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    color: var(--color-text-primary);
    border: 1px solid var(--color-text-primary);
    border-radius: 20px;
    padding: 8px 24px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.sho-te-puede__btn-ver-todas:hover {
    background: var(--color-text-primary);
    color: #fff;
    text-decoration: none;
}

@media (max-width: 768px) {
    .sho-te-puede__grid { grid-template-columns: repeat(2, 1fr); }
    .sho-te-puede__sello { display: none; }
}

@media (max-width: 480px) {
    .sho-te-puede__grid { grid-template-columns: 1fr; }
}