/**
 * assets/css/home.css — Sussanich Turismo
 * Estilos específicos de la Home. No modifica base.css ni tokens.css.
 * Paso 2 — 2026-05-05
 */

/* ═══════════════════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════════════════════ */

.hero-home {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--color-accent-dark);
}

/* Video de fondo */
.hero-home__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* La imagen fallback solo se ve si el video no carga */
.hero-home__bg--fallback {
    z-index: 0;
}

.hero-home video.hero-home__bg {
    z-index: 1;
}

.hero-home__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(27,43,58,0.25) 0%,
        rgba(27,43,58,0.15) 40%,
        rgba(27,43,58,0.45) 100%
    );
    z-index: 2;
}

.hero-home__content {
    position: relative;
    z-index: 3;
    text-align: center;
    padding: 0 var(--gutter-page);
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

/* ── Fade-in animations (hero + header) ── */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Header entra desde arriba */
body#home .navbar-sussanich {
    animation: fadeInDown 0.6s var(--ease-base) both;
}

/* Kicker → título → botón, escalonados */
.hero-home__kicker {
    font-family: var(--font-display);
    font-size: var(--fs-kicker);
    font-weight: var(--fw-regular);
    color: rgba(255,255,255,0.90);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: block;
    animation: fadeInUp 0.8s 0.2s var(--ease-base) both;
}

.hero-home__title {
    font-size: clamp(36px, 6.5vw, var(--fs-hero));
    color: var(--color-text-on-dark);
    margin: 0;
    text-shadow: 0 2px 16px rgba(0,0,0,0.3);
    animation: fadeInUp 0.8s 0.2s var(--ease-base) both;
}

.hero-home__btn {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-text-on-dark);
    padding: 12px 32px;
    border-radius: var(--radius-pill);
    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);
    margin-top: var(--space-2);
    animation: fadeInUp 0.7s 0.5s var(--ease-base) both;
}

.hero-home__btn:hover {
    background: var(--color-primary-hover);
    color: var(--color-text-on-dark);
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECCIONES DE CATÁLOGO (excursiones / shore tours)
═══════════════════════════════════════════════════════════════════════════ */

.section-catalog {
    padding: 80px 0;
    position: relative;
}

.section-catalog--surface {
    background-color: var(--color-surface);
}

.section-catalog__kicker {
    font-family: var(--font-display);
    font-size: var(--fs-kicker);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    margin-bottom: var(--space-2);
    display: block;
}

.section-catalog__title {
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
}

.section-catalog__subtitulo {
    color: var(--color-text-secondary);
    margin: var(--space-1) 0 0;
}

.section-catalog__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.section-catalog__sello-wrap {
    position: relative;
}

/* Carrusel wrapper */
.catalog-carousel {
    position: relative;
}

/* Wrapper estático (shore tours: 4 items fijos, sin carrusel — Yago 2026-06-11).
   El grid 4/2/1 viene de .sho-cards-grid en shore-tours.css (única fuente,
   misma card que en SHO-L). Acá solo el posicionamiento del sello + aire. */
.catalog-static {
    position: relative;
}
.catalog-static .sho-cards-grid {
    padding: var(--space-1) 0 var(--space-4);
}

.catalog-carousel .carousel-inner {
    overflow: visible;
}

.catalog-carousel .carousel-inner > .item {
    display: block;
}

.catalog-carousel .item {
    padding: var(--space-1) 0 var(--space-4);
}

/* Grid dentro del carrusel — desktop ≥1100px: flex + scroll-snap, 4 cards visibles
   (Yago 2026-06-09: home muestra TODAS las excursiones/shore tours del CMS, no solo 4 → siempre hay scroll). */
.cards-grid,
.catalog-carousel .sho-cards-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: var(--space-4);
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.cards-grid::-webkit-scrollbar,
.catalog-carousel .sho-cards-grid::-webkit-scrollbar { display: none; }
.cards-grid > *,
.catalog-carousel .sho-cards-grid > * {
    scroll-snap-align: start;
    /* gap var(--space-4) = 24px × 3 huecos = 72px */
    flex: 0 0 calc((100% - 72px) / 4);
    min-width: 0;
}

/* Aire vertical en el scrollport para que el hover-lift no se recorte arriba.
   Sin margen horizontal: las cards quedan dentro del container → más separación
   respecto de las flechas (Yago 2026-06-11). */
.catalog-carousel .cards-grid {
    padding: 22px 0 18px;
    margin: -22px 0 -18px;
}

/* La card hovereada se eleva por encima de sus vecinas (no la tapan) */
.card-excursion:hover,
.card-shore:hover,
.card-viaje-promo:hover {
    z-index: 5;
}

/* Flechas carrusel — círculo blanco + chevron CSS (visible sobre cualquier fondo) */
.carousel-control-custom {
    position: absolute;
    top: 46%;
    transform: translateY(-50%);
    z-index: 10;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 3px 14px rgba(27, 43, 58, 0.20);
    padding: 0;
    cursor: pointer;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease-base);
}
.carousel-control-custom:hover { background: var(--color-primary); }

/* Chevron CSS (las SVG del diseñador eran casi invisibles) */
.carousel-control-custom::before {
    content: '';
    width: 11px;
    height: 11px;
    border-top: 2.5px solid var(--color-accent-dark);
    border-right: 2.5px solid var(--color-accent-dark);
}
.carousel-control-custom:hover::before { border-color: #ffffff; }
.carousel-control-custom.left::before  { transform: rotate(-135deg); margin-left: 5px; }
.carousel-control-custom.right::before { transform: rotate(45deg); margin-right: 5px; }

/* En el gutter (container = 80% → margen 10% ≥102px en desktop): NO pisan las cards */
.carousel-control-custom.left  { left: -60px; }
.carousel-control-custom.right { right: -60px; }

/* Flechas: SOLO desktop (≥1024). En mobile se navega por swipe + puntos. */
@media (max-width: 1023px) {
    .carousel-control-custom { display: none; }
}

/* ── Indicador de puntos del carrusel ─────────────────────────────────────── */
/* Un punto por ficha; los visibles se unen bajo un "pill" (thumb) que se
   desplaza. El pill es un overlay absoluto sobre la fila de puntos. */
.carousel-dots {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
}
.carousel-dots__dot {
    position: relative;
    z-index: 1;
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--color-border);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-base);
}
.carousel-dots__dot:hover { background: var(--color-text-muted); }
/* Los dots tapados por el pill se ocultan (no se ven bajo la barra) */
.carousel-dots__dot.is-under { opacity: 0; }
/* El pill (thumb): cubre los dots visibles */
.carousel-dots__pill {
    position: absolute;
    left: 0;
    top: 50%;
    height: 9px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: var(--color-primary);
    z-index: 2;
    transition: left var(--dur-base) var(--ease-base),
                width var(--dur-base) var(--ease-base);
    pointer-events: none;
}
/* Variante sobre fondo oscuro (sección promo-viajes) */
.promo-viajes .carousel-dots__dot { background: rgba(255, 255, 255, 0.5); }
.promo-viajes .carousel-dots__pill { background: var(--color-primary); }

.catalog-footer {
    text-align: center;
    margin-top: var(--space-5);
}

/* Botón outline "Ver todas" */
.btn-outline-catalog {
    display: inline-block;
    background: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    padding: 10px 32px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--fs-btn);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-base),
                color var(--dur-fast) var(--ease-base),
                border-color var(--dur-fast) var(--ease-base);
}

.btn-outline-catalog:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-dark);
    text-decoration: none;
}

/* Sello flotante sobre la 4ta card del carrusel */
.sello-flotante {
    position: absolute;
    top: -100px;
    right: 60px;
    width: 120px;
    height: 120px;
    z-index: 10;
    animation: selloSpin 20s linear infinite;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD EXCURSIÓN
═══════════════════════════════════════════════════════════════════════════ */

.card-excursion {
    position: relative; /* permite z-index en hover (no ser tapada por vecinas) */
    background: var(--color-surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    aspect-ratio: 0.747;
    transition: box-shadow var(--dur-base) var(--ease-base),
                transform var(--dur-base) var(--ease-base);
}

.card-excursion:hover {
    /* sin sombra en hover: el overflow del carrusel la recortaba (Yago 2026-06-11) */
    transform: translateY(-4px) scale(1.04);
}

.card-excursion__img-link {
    flex: 0 0 50%;
    display: block;
    min-height: 0;
    overflow: hidden;
    text-decoration: none;
}

.card-excursion__img-wrap {
    overflow: hidden;
    flex: 0 0 50%;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    position: relative;
}

.card-excursion__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-slow) var(--ease-base);
}

.card-excursion:hover .card-excursion__img {
    transform: scale(1.05);
}

.card-excursion__img-placeholder {
    aspect-ratio: 4/3;
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-excursion__img-placeholder span {
    font-size: var(--fs-caption);
    color: var(--color-text-muted);
}

.card-excursion__body {
    padding: var(--space-4);
    flex: 0 0 50%;
    min-height: 0;          /* permite que el contenido encoja dentro del flex padre */
    display: flex;
    flex-direction: column;
    /* El contenido se adapta a la card (no al revés): el bloque de texto trunca y
       el footer queda anclado abajo vía margin-top:auto (fix 2026-06-22). */
}

.card-excursion__top {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-1);
    min-height: 0;
    overflow: hidden;       /* el texto truncado nunca empuja el divisor/footer */
}

.card-excursion__title {
    font-size: var(--fs-h3);
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: var(--lh-tight);
    margin: 0;
    /* Modelo de 2 LÍNEAS (fix 2026-06-22, 3ª iter — revierte el sobre-corregido a 1 línea).
       El título puede ocupar 1 o 2 líneas al font base (fs-h3) SIN achicarse ni cortarse.
       La caja reserva SIEMPRE el alto de 2 líneas base → títulos uniformes entre cards de un
       mismo grid (1 línea queda arriba, 2 llenan la caja). Si el título excede 2 líneas,
       card-title-autofit.js baja font-size+lh hasta que entren en 2; recién si ni al piso
       entra, clampa a 2 con ellipsis (graceful, raro). NUNCA corta un título de 1-2 líneas. */
    min-height: calc(var(--fs-h3) * var(--lh-tight) * 2);  /* 2 líneas base, fijo */
    flex: 0 0 auto;              /* NO encoger dentro de .card-excursion__top (flex col) */
    overflow: hidden;            /* red de seguridad; el autofit garantiza que entra */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 1 línea centrada verticalmente en la caja de 2 líneas; 2 líneas la llenan (Yago 2026-06-22) */
}

.card-excursion__title a {
    color: inherit;
    text-decoration: none;
}

.card-excursion__title a:hover {
    color: var(--color-primary);
}

.card-excursion__duracion {
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
    /* La duración en la card ya viene corta (solo horas, vía sus_duracion_corta()):
       entra en 1 línea. Clamp a 2 como red de seguridad en anchos muy chicos, sin
       empujar el footer fuera de la card (fix 2026-06-22). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-excursion__duracion-label {
    color: var(--color-text-muted);
}

.card-excursion__divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-2) 0;
    width: 100%;
    flex: 0 0 auto;          /* no se comprime en el flex column */
}

.card-excursion__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex: 0 0 auto;
    margin-top: auto;        /* footer (precio + botón) SIEMPRE anclado abajo y visible */
}

/* Bloque de precio (decisión Yago 2026-05-18 — antes solo se mostraba el botón +) */
.card-excursion__price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.card-excursion__price-label {
    font-family: var(--font-body);
    font-size: var(--fs-caption);  /* 12px — antes referenciaba --fs-micro (inexistente) → caía a 10px y se veía muy chico (fix Yago 2026-06-22) */
    color: var(--color-text-muted);
    text-transform: none;
    line-height: 1;
}
.card-excursion__price-amount {
    font-family: var(--font-body);
    font-size: var(--fs-price);
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
    line-height: 1.1;
}
.card-excursion__price-caption {
    font-family: var(--font-body);
    font-size: var(--fs-caption);  /* 12px — antes referenciaba --fs-micro (inexistente) → caía a 10px y se veía muy chico (fix Yago 2026-06-22) */
    color: var(--color-text-muted);
    line-height: 1;
}

.card-excursion__add {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-circle);
    background: var(--color-border);
    border: 2px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transform-origin: center center;
    transition: background var(--dur-fast) var(--ease-base),
                border-color var(--dur-fast) var(--ease-base),
                color var(--dur-fast) var(--ease-base),
                transform var(--dur-fast) var(--ease-base);
    cursor: pointer;
}

.card-excursion__add:hover,
.card-excursion__add.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-dark);
    text-decoration: none;
}

.card-excursion__add::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v14M1 8h14' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v14M1 8h14' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.card-excursion__add:hover {
    transform: rotate(90deg);
}

/* Mobile 1-columna (≤560px): la card ADAPTA su alto al contenido (fix 2026-06-22).
   En desktop multi-columna el aspect-ratio:0.747 da grilla uniforme, pero en 1 columna
   sobra alto → gap blanco enorme en el medio (image 50% + body 50% + footer margin-top:auto).
   Con aspect-ratio:auto la card fluye: la imagen conserva su propia proporción (4:3, igual
   que width/height del <img>) y el body crece sólo lo que necesita. Sin gap.
   Va DESPUÉS de las reglas base (mismo specificity → gana el source order). */
@media (max-width: 560px) {
    .card-excursion {
        aspect-ratio: auto;
    }
    .card-excursion__img-link,
    .card-excursion__img-wrap {
        flex: 0 0 auto;
        aspect-ratio: 4 / 3;   /* la imagen mantiene su ratio; sin alto del padre no colapsa a 0 */
        height: auto;
    }
    .card-excursion__body {
        flex: 1 1 auto;        /* el body fluye con el contenido (título 2-líneas + duración + footer) */
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD SHORE TOUR
═══════════════════════════════════════════════════════════════════════════ */

.card-shore {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-base) var(--ease-base),
                transform var(--dur-base) var(--ease-base);
}

.card-shore:hover {
    /* sin sombra en hover: el overflow del carrusel la recortaba (Yago 2026-06-11) */
    transform: translateY(-5px) scale(1.02);
}

.card-shore__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-base);
}

.card-shore:hover .card-shore__img {
    transform: scale(1.04);
}

.card-shore__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(27,43,58,0.80) 0%, rgba(27,43,58,0.35) 100%);
}

.card-shore__badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 2;
}

.card-shore__badge img {
    width: 120px;
    height: auto;
}

.card-shore__body {
    position: absolute;
    inset: 0;
    z-index: 2;
    /* top extra: deja espacio para el badge SPECIAL OFFER (pill ~32px alto + top:16px = 48px reservados) */
    padding: 60px var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-shore__title-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-shore__kicker {
    font-family: var(--font-display);
    font-size: var(--fs-kicker);
    font-weight: var(--fw-bold);
    color: rgba(255,255,255,0.75);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
}

.card-shore__title {
    font-size: var(--fs-h3);
    color: var(--color-text-on-dark);
    line-height: var(--lh-base);
    margin: 0;
}

.card-shore__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255,255,255,0.35);
    margin-top: auto;
    min-height: 25%;
    gap: var(--space-3);
}

.card-shore__consultar {
    font-family: var(--font-display);
    font-size: var(--fs-kicker);
    font-weight: var(--fw-bold);
    color: rgba(255,255,255,0.85);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
}

.card-shore__add {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-circle);
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.5);
    color: var(--color-text-on-dark);
    display: block;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-base),
                transform var(--dur-fast) var(--ease-base);
}

/* Signo + dibujado con barras (centrado exacto, sin depender del glifo) */
.card-shore__add::before,
.card-shore__add::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
}
.card-shore__add::before {
    width: 14px;
    height: 2px;
    transform: translate(-50%, -50%);
}
.card-shore__add::after {
    width: 2px;
    height: 14px;
    transform: translate(-50%, -50%);
}

.card-shore__add:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: rotate(90deg);
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SELLO DECORATIVO
═══════════════════════════════════════════════════════════════════════════ */

.sello-decorativo {
    display: inline-block;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.sello-decorativo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: selloSpin 20s linear infinite;
}

@keyframes selloSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROMO VIAJES — CANCÚN
═══════════════════════════════════════════════════════════════════════════ */

.promo-viajes {
    position: relative;
    overflow: visible;
    min-height: 620px;
    padding: 80px 0 160px;
}

.promo-viajes__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.promo-viajes__overlay {
    position: absolute;
    inset: 0;
    background: rgba(27,43,58,0.25);
    z-index: 1;
}

.promo-viajes__inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

.promo-viajes__title {
    font-family: var(--font-display);
    font-size: clamp(40px, 5vw, 72px);
    font-weight: var(--fw-regular);
    color: var(--color-text-on-dark);
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0 0 var(--space-6);
    display: flex;
    flex-direction: column;
}

.promo-viajes__title-line1 {
    display: block;
}

.promo-viajes__title-line2 {
    display: block;
    padding-left: 50px;
}

/* ─── Carrusel de fichas de viaje (Yago 2026-06-11) ─────────────────────── */
.promo-viajes__carousel {
    position: relative;
}
.via-promo-grid {
    display: flex;
    gap: 24px; /* debe coincidir con el cálculo de ancho (72 = 3×24) o se corta la 4ª */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* aire para el badge que sobresale y para la sombra de la card */
    padding: 22px 0 26px;
}
.via-promo-grid::-webkit-scrollbar { display: none; }
.via-promo-grid > .card-viaje-promo {
    /* 4 fichas ENTERAS en desktop (gap 24 × 3 = 72). Mismo ancho todas (1.2). */
    flex: 0 0 calc((100% - 72px) / 4);
    max-width: none;
    min-width: 0;
    scroll-snap-align: start;
}
/* Columnas por breakpoint: 4 (≥1500) / 3 (1024-1499) / 2 (700-1023) / 1 (<700).
   4-across recién en ≥1500: por debajo la ficha quedaría muy angosta para el
   título de 2 líneas + sello. */
@media (max-width: 1499px) {
    .via-promo-grid > .card-viaje-promo { flex: 0 0 calc((100% - 48px) / 3); }
}
@media (max-width: 1099px) {
    .via-promo-grid > .card-viaje-promo { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 699px) {
    .via-promo-grid > .card-viaje-promo { flex: 0 0 100%; }
    /* 1 ficha a la vez: sin alineación entre fichas que preservar → título
       de alto natural (sin reservar la 2ª línea) para no dejar hueco. */
    .card-viaje-promo__destino { height: auto; }
}

/* ─── Card flotante (ficha de viaje) ─────────────────────────────────────── */
.card-viaje-promo {
    position: relative;
    background: var(--color-surface-card);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(27, 43, 58, 0.13);
    padding: 26px 24px 22px;
    width: 100%;
    min-width: 0;            /* el contenido no puede ensanchar la ficha (1.2) */
    display: flex;
    flex-direction: column;
    overflow: visible;
    margin-top: 30px;
}

/* Badge INTERNACIONAL: mitad fuera de la card por arriba-izquierda */
.card-viaje-promo__badge {
    position: absolute;
    top: -12px;
    left: 22px;
    z-index: 2;
}

/* Pill CSS (igual a .via-card-paquete__sticker de VIA-I — cubre NACIONAL e i18n) */
.card-viaje-promo__badge-pill {
    display: inline-block;
    background: var(--color-primary);
    color: #ffffff;
    text-transform: uppercase;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.5px;
    padding: 7px 22px;
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
}

.card-viaje-promo__hr-wrap {
    margin-bottom: var(--space-3);
}

/* Sello: GRANDE y proporcional a la card (36% ≈ 130px en card de 363px),
   sobresaliendo ~8px del borde derecho (Yago 2026-06-11). Posicionado relativo
   a la CARD; como las filas superiores son de alto fijo, queda SIEMPRE igual. */
.card-viaje-promo__sello {
    position: absolute;
    top: 30px;
    right: -8px;            /* sobresale hacia afuera de la card */
    width: 36%;
    aspect-ratio: 1;
    z-index: 1;
}

.card-viaje-promo__sello img {
    width: 100%;
    height: 100%;
    animation: selloSpin 20s linear infinite;
    display: block;
}

.card-viaje-promo__destino {
    font-family: var(--font-display);
    /* Caja de ALTO FIJO de 2 líneas → subtítulo, divisor, sello y filas
       quedan a la misma altura en TODAS las fichas (alineación). El texto se
       centra vertical: 1 línea queda balanceada, 2 líneas llenan la caja.
       Tamaño por longitud: GRANDE por defecto; sólo baja cuando el título
       necesita 2 líneas o no entra (punto 2). */
    font-size: 44px;
    font-weight: var(--fw-regular);
    color: var(--color-accent-dark);
    line-height: 1.08;
    margin: 0 0 10px;
    padding-right: 33%; /* aire para el sello (escala con la card) */
    height: 80px;       /* 2 líneas fijas */
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}
.card-viaje-promo__destino--mid  { font-size: 36px; }
.card-viaje-promo__destino--long { font-size: 30px; }

.card-viaje-promo__tipo {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: var(--fw-regular);
    color: var(--color-primary);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    display: block;
    margin-bottom: 14px;
    min-height: 1em;
    /* el subtítulo NO ensancha la ficha: trunca con ellipsis antes del sello (1.2) */
    padding-right: 33%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-viaje-promo__hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0;
}

.card-viaje-promo__hr--fecha {
    margin: 0 0 var(--space-2);
}

.card-viaje-promo__hotel {
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    color: var(--color-text-primary);
    letter-spacing: 0.05em;
    margin: 0 0 var(--space-2);
    min-height: 1.2em; /* slot fijo: reserva la línea aunque no haya hotel */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bloque: número grande | divider vertical | lista info.
   min-height fijo → la fila y el <hr> siguiente quedan alineados entre fichas (punto 2). */
.card-viaje-promo__datos {
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    min-height: 78px;
}

.card-viaje-promo__dias-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
}

.card-viaje-promo__num {
    font-family: var(--font-display);
    font-size: 46px;
    font-weight: var(--fw-regular);
    color: var(--color-accent-dark);
    line-height: 1;
}

.card-viaje-promo__dias-label {
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-viaje-promo__noches-label {
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    color: var(--color-text-muted);
}

.card-viaje-promo__divider-v {
    width: 1px;
    background: var(--color-border);
    flex-shrink: 0;
}

.card-viaje-promo__info-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.card-viaje-promo__info-list li {
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    white-space: nowrap;
}

.card-viaje-promo__fecha {
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
    min-height: 1em; /* slot fijo: reserva la línea aunque no haya fecha */
}

.card-viaje-promo__fecha-label {
    font-weight: var(--fw-semibold);
    color: var(--color-text-secondary);
}

.card-viaje-promo__btn {
    display: inline-block;
    align-self: flex-start;
    margin-top: auto; /* pegado al fondo → todas las fichas igual alto (1.2) */
    background: var(--color-primary);
    color: var(--color-text-on-dark);
    padding: 9px 24px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-btn);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-base);
}

.card-viaje-promo__btn:hover {
    background: var(--color-primary-hover);
    color: var(--color-text-on-dark);
    text-decoration: none;
}

.sello-spin {
    animation: selloSpin 20s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   POR QUÉ ELEGIRNOS
═══════════════════════════════════════════════════════════════════════════ */

.por-que {
    padding: 80px 0;
    background: var(--color-background);
    text-align: center;
}

.por-que__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);
    text-align: center;
    margin: 0 auto var(--space-3);
    max-width: none;
}

.por-que__subtitulo {
    font-family: var(--font-body);
    font-size: 18px;
    color: var(--color-text-secondary);
    line-height: var(--lh-normal);
    text-align: center;
    max-width: 540px;
    margin: 0 auto var(--space-7);
}

.por-que__subtitulo strong {
    display: block;
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

/* Grid: 3 items + 2 divisores intercalados */
.por-que__grid {
    display: grid;
    grid-template-columns: 1fr 1px 1fr 1px 1fr;
    gap: 0 var(--space-5);
    align-items: start;
    margin-bottom: var(--space-8);
}

.por-que__divider {
    width: 1px;
    background: var(--color-border);
    align-self: stretch;
    margin: var(--space-2) 0;
}

.por-que__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
    padding: var(--space-3) var(--space-4);
}

.por-que__img {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
}

.por-que__desc {
    font-family: var(--font-body);
    font-size: 17px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
    width: 100%;
    max-width: 230px;
    text-align: left;
}

.por-que__tagline {
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: var(--fw-regular);
    color: var(--color-primary);
    line-height: var(--lh-snug);
    text-align: center;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CTA BANNER
═══════════════════════════════════════════════════════════════════════════ */

.cta-banner {
    position: relative;
    overflow: hidden;
    aspect-ratio: 2271 / 719;
    width: 100%;            /* fix 2026-06-17: sin width, en mobile el min-height:300px
                              + aspect-ratio hacían que el browser derivara el ancho desde
                              la altura (300×2271/719 = 948px) → banner cortado, CTA fuera
                              de pantalla en listados. width:100% pin-ea el ancho al padre
                              y deja que aspect-ratio/min-height manejen la altura. */
    display: flex;
    align-items: center;
}

.cta-banner__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    z-index: 0;
}

.cta-banner__overlay {
    position: absolute;
    inset: 0;
    background: rgba(27,43,58,0.60);
    z-index: 1;
}

.cta-banner__inner {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--space-8) var(--gutter-page);
    width: 100%;
}

.cta-banner__kicker {
    font-family: var(--font-display);
    font-size: var(--fs-kicker);
    font-weight: var(--fw-regular);
    color: rgba(255,255,255,0.75);
    letter-spacing: var(--ls-kicker);
    text-transform: uppercase;
    margin-bottom: var(--space-3);
    display: block;
}

.cta-banner__title {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: var(--fw-regular);
    color: var(--color-text-on-dark);
    line-height: var(--lh-snug);
    margin: 0 0 var(--space-5);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.cta-banner__btn {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-text-on-dark);
    padding: 14px 36px;
    border-radius: var(--radius-pill);
    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);
}

.cta-banner__btn:hover {
    background: var(--color-primary-hover);
    color: var(--color-text-on-dark);
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GOOGLE REVIEWS
═══════════════════════════════════════════════════════════════════════════ */

.google-reviews {
    position: relative;
    overflow: hidden;
    min-height: 633px;
    padding: 80px 0;
    display: flex;
    align-items: center;
}

.google-reviews__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 0;
}

.google-reviews__overlay {
    position: absolute;
    inset: 0;
    background: rgba(27,43,58,0.38);
    z-index: 1;
}

.google-reviews__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
}

/* ── Left column ── */
.google-reviews__left {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
}

.google-reviews__logo-img {
    width: auto;
    max-width: 160px;
}

.google-reviews__rating-text {
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    color: rgba(255,255,255,0.75);
    margin: 0;
}

.google-reviews__invitacion {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--color-text-on-dark);
    line-height: var(--lh-normal);
    margin: 0;
}

.google-reviews__cta {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-text-on-dark);
    border: none;
    padding: 10px 28px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--fs-btn);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-base);
    margin-top: var(--space-1);
}

.google-reviews__cta:hover {
    background: var(--color-primary-hover);
    color: var(--color-text-on-dark);
    text-decoration: none;
}

/* ── Right column: cards responsive escalonado ── */
.google-reviews__cards {
    flex: 1;
    min-width: 0;
    width: 100%;
    align-self: stretch;
}

/* Wrapper grid/scroll-snap. Default ≥1550px: 3 cards de 280px visibles, sin scroll.
   (3×280 + 2×20 gap = 880px solo entra con container 80% si viewport ≥ ~1545px;
   debajo de eso los tracks fijos centrados desbordan y pisan la columna izquierda
   — bug zoom 150% reportado 2026-06-12.) */
.google-reviews__cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 280px);
    gap: 20px;
    justify-content: center;
    width: 100%;
}

.review-card {
    background: var(--color-surface-card);
    border-radius: var(--radius-lg);
    padding: 22px 18px;
    aspect-ratio: 1 / 1;
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.review-card__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.review-card__title {
    font-size: 16px;
    line-height: 1.3;
    color: var(--color-text-primary);
    font-weight: 600;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review-card__meta {
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    color: var(--color-text-muted);
    line-height: 1;
}

.review-card__stars {
    color: var(--color-secondary);
    font-size: 16px;
    letter-spacing: 2px;
    line-height: 1;
}

.review-card__middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    justify-content: center;
    width: 100%;
    min-height: 0;
}

.review-card__text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary, #555);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review-card__google-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    flex-shrink: 0;
}

/* Tablet/laptop/desktop angosto (700–1549): scroll-snap horizontal, cards 240px
   (2 visibles a ~1100, 3 completas a ≥1430). El grid fijo de 3×280 no entra
   junto a la columna izquierda (260px + gap 96px) hasta viewport ~1550. */
@media (max-width: 1549px) and (min-width: 700px) {
    .google-reviews__cards-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 16px;
        padding: 4px 10px 12px;
        justify-content: flex-start;
    }
    .google-reviews__cards-grid > .review-card {
        scroll-snap-align: start;
        width: 240px;
    }
    .review-card__title { font-size: 15px; -webkit-line-clamp: 2; }
    .review-card__text { font-size: 12px; -webkit-line-clamp: 4; }
}

/* Mobile: 1 card visible, scroll snap centered */
@media (max-width: 699px) {
    .google-reviews__cards-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 12px;
        padding: 4px 16px 12px;
        justify-content: flex-start;
    }
    .google-reviews__cards-grid > .review-card {
        scroll-snap-align: center;
        width: min(calc(100vw - 64px), 300px);
    }
    .review-card__title { font-size: 15px; -webkit-line-clamp: 2; }
    .review-card__text { font-size: 13px; -webkit-line-clamp: 5; }
}

/* Hide horizontal scrollbar — UX clean */
.google-reviews__cards-grid::-webkit-scrollbar { display: none; height: 0; }
.google-reviews__cards-grid {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMACIONES DE APARICIÓN (IntersectionObserver)
═══════════════════════════════════════════════════════════════════════════ */

.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-slow) var(--ease-base),
                transform var(--dur-slow) var(--ease-base);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

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

/* ─── Carrusel responsive home: scroll-snap + flechas vanilla ───
   Desktop ≥1100px: grid 4-col (regla base). 700-1099px: 2 cards visibles con scroll-snap.
   <700px: 1 card visible centrada. Flechas (`.carousel-control-custom`) visibles
   solo en <1100px y disparan scrollBy() via assets/js/carrusel-home.js. */
@media (max-width: 1099px) and (min-width: 700px) {
    .catalog-carousel .cards-grid,
    .catalog-carousel .sho-cards-grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 16px;
        max-width: none;
        margin: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .catalog-carousel .cards-grid::-webkit-scrollbar,
    .catalog-carousel .sho-cards-grid::-webkit-scrollbar { display: none; }
    .catalog-carousel .cards-grid > *,
    .catalog-carousel .sho-cards-grid > * {
        scroll-snap-align: start;
        flex: 0 0 calc((100% - 16px) / 2);
        min-width: 0;
    }
}

@media (max-width: 699px) {
    .catalog-carousel .cards-grid,
    .catalog-carousel .sho-cards-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 12px;
        padding: 0 8px;
        max-width: none !important;
        margin: 0 !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .catalog-carousel .cards-grid::-webkit-scrollbar,
    .catalog-carousel .sho-cards-grid::-webkit-scrollbar { display: none; }
    .catalog-carousel .cards-grid > *,
    .catalog-carousel .sho-cards-grid > * {
        scroll-snap-align: center;
        flex: 0 0 calc(100% - 48px);
        max-width: 320px;
        min-width: 0;
    }
}

@media (max-width: 1024px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .google-reviews__inner { flex-direction: column; }
    .google-reviews__left { flex: none; width: 100%; }
    .google-reviews__cards { width: 100%; margin: 0 auto; }
    .promo-viajes__title { font-size: 56px; }
    .por-que__grid { grid-template-columns: 1fr 1px 1fr 1px 1fr; gap: 0 var(--space-3); }
    .por-que__item { padding: var(--space-2) var(--space-3); }
}

@media (max-width: 768px) {
    /* Sello flotante decorativo (excursiones destacadas + shore tours, y nosotros):
       oculto en mobile — se superponía con los títulos/subtítulos (Yago 2026-06-22).
       El de /viajes/ y /excursiones/ listado ya se ocultan por su lado. */
    .sello-flotante { display: none; }
    .hero-home { min-height: 520px; }
    .hero-home__title { font-size: clamp(32px, 8vw, 48px); }
    .cards-grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
    .section-catalog__header { flex-direction: column; align-items: flex-start; }
    .por-que__grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto var(--space-6); }
    .por-que__divider { display: none; }
    .por-que__item { align-items: center; text-align: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
    .por-que__item:last-of-type { border-bottom: none; }
    .promo-viajes { flex-direction: column; min-height: auto; }
    .promo-viajes__text { padding: var(--space-6) 0 var(--space-4); }
    .promo-viajes__title { font-size: 40px; }
    .google-reviews__inner { flex-direction: column; }
    .google-reviews__left { flex: none; width: 100%; }
    .google-reviews__cards { width: 100%; }
    .cta-banner { min-height: 300px; aspect-ratio: auto; } /* O1 fix 2026-06-23: aspect-ratio desktop 2271/719 peleaba con min-height en mobile */
    .cta-banner__title { font-size: var(--fs-h2); }
}

@media (max-width: 480px) {
    .hero-home { min-height: 400px; }
    .hero-home__title { font-size: clamp(28px, 7vw, 40px); }
}