/* ==========================================================================
   FRONT PAGE — CSS combinado (home)
   Fusiona hero.css + hero-search.css + front-page-seo.css + front-benefits.css
   + front-popular-tours.css + front-destinations.css + front-stats.css
   + front-testimonials.css + front-cta.css en un solo archivo para reducir
   solicitudes de red en el home (antes: 9 archivos, ahora: 1).
   ========================================================================== */

/* =========================================
   HERO SECTION
========================================= */

.vxm-hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* =========================================
   BACKGROUND IMAGE
========================================= */

.vxm-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;

    /* 🔥 EFECTO CINEMATIC */
    transform: scale(1);
    animation: heroZoom 12s ease-in-out forwards;
}

.vxm-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;

    /* 🔥 EFECTO CINEMATIC */
    transform: scale(1);
    animation: heroZoom 12s ease-in-out forwards;
}

/* =========================================
   OVERLAY (CLAVE PARA LEGIBILIDAD)
========================================= */

.vxm-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.45),
            rgba(0, 0, 0, 0.75));
}

/* =========================================
   CONTENT
========================================= */

.vxm-hero__content {
    position: relative;
    z-index: 3;

    max-width: 900px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

/* =========================================
   TITLE
========================================= */

.vxm-hero__title {
    font-size: 48px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 20px;
    text-wrap: balance;

    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

/* =========================================
   SUBTITLE
========================================= */

.vxm-hero__subtitle {
    font-size: 20px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 30px;

    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
/* =========================================
   ACTION BUTTONS
========================================= */

.vxm-hero__actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* BOTONES BASE */

.vxm-btn {
    padding: 14px 28px;
    border-radius: 0px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

/* BOTÓN PRINCIPAL */

.vxm-btn--primary {
    background: var(--vxm-secondary);
    border: 2px solid #fff;
    color: var(--vxm-white);
}

.vxm-btn--primary:hover {
    background: var(--vxm-secondary-dark);
    transform: translateY(-2px);
}

/* BOTÓN SECUNDARIO */

.vxm-btn--secondary {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
}

.vxm-btn--secondary:hover {
    background: #fff;
    color: #000;
}

/* =========================================
   ANIMACIÓN ZOOM (CINEMATIC)
========================================= */

@keyframes heroZoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 768px) {

    .vxm-hero {
        /* Antes 90vh: dejaba casi una pantalla completa vacía antes del contenido */
        height: 70vh;
        min-height: 420px;
    }

    .vxm-hero__content {
        padding-top: 80px;
        max-width: 100%;
    }

    .vxm-hero__title {
        font-size: 32px;
        text-wrap: balance;
    }

    .vxm-hero__subtitle {
        font-size: 16px;
    }

    .vxm-btn {
        width: 100%;
        text-align: center;
    }

}

/* ==========================================================================
   HERO SEARCH
   ========================================================================== */

.vxm-hero-search {
    padding: var(--vxm-space-md) 0;
    text-align: center;
}

.vxm-hero-search__form {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    width: 100%;
    margin: 0 auto;
    background: var(--vxm-white);
    padding: 18px 22px;
    border-radius: 10px;
    border-top: 4px solid var(--vxm-secondary);
    box-shadow: 0 16px 40px rgba(2, 24, 47, 0.16);
}

.vxm-hero-search__field {
    flex: 1;
    text-align: left;
}

.vxm-hero-search__field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--vxm-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.vxm-hero-search__field select,
.vxm-hero-search__field input[type="text"] {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--vxm-gray-300);
    border-radius: 6px;
    font-family: var(--vxm-font-body);
    font-size: 0.9rem;
    color: var(--vxm-gray-800);
    background: var(--vxm-white);
    cursor: pointer;
}

.vxm-hero-search__field input[type="text"] {
    cursor: text;
}

.vxm-hero-search__field select:focus,
.vxm-hero-search__field input[type="text"]:focus {
    border-color: var(--vxm-secondary);
    box-shadow: 0 0 0 3px rgba(30, 168, 160, 0.15);
    outline: none;
}

.vxm-hero-search__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--vxm-secondary);
    color: var(--vxm-white);
    border: none;
    border-radius: 6px;
    font-family: var(--vxm-font-body);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(30, 168, 160, 0.35);
    transition: background var(--vxm-transition), transform var(--vxm-transition);
}

.vxm-hero-search__btn:hover {
    background: var(--vxm-secondary-dark);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .vxm-hero-search__form {
        flex-direction: column;
        align-items: stretch;
    }

    .vxm-hero-search__btn {
        justify-content: center;
    }
}

/* ==========================================================================
   BLOQUE DE PRESENTACIÓN BAJO EL HERO (.vxm-seo)
   Lo imprime template-parts/front/seo-content.php.

   Va a sangre: no usa .vxm-container. La foto llega al borde izquierdo de la
   pantalla y el panel de texto ocupa la mitad derecha. Por eso la sección no
   lleva padding vertical propio — el aire lo pone el panel por dentro, y así
   la foto cubre la banda de arriba abajo sin franjas.
   ========================================================================== */

/* Sin margen ni padding propios: la banda va pegada al hero de arriba y a la
   sección de abajo, sin franjas blancas. El aire del texto lo pone el padding
   interno de .vxm-seo__panel, que es por dentro y no separa la sección. */
.vxm-seo {
    margin: 0;
    padding: 0;
}

.vxm-seo__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

/* Sin foto en el Customizer la sección no se queda a medias: pasa a una sola
   columna centrada y el panel se comporta como una sección normal. */
.vxm-seo__layout--no-media {
    grid-template-columns: 1fr;
}

/* --- Foto ------------------------------------------------------------- */

.vxm-seo__media {
    position: relative;
    min-height: 640px;
}

/* La foto se estira a toda la celda con position:absolute en lugar de
   height:100%: en un grid con align-items:stretch, un height porcentual sobre
   una celda de altura automática no resuelve y la imagen colapsa. */
.vxm-seo__media-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Panel de texto ---------------------------------------------------- */

.vxm-seo__panel {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: var(--vxm-off-white);
    padding: 72px 6% 72px 5%;
}

/* El texto no se estira a los 800px del panel en pantallas anchas: por encima
   de ~75 caracteres por línea la lectura se resiente. */
.vxm-seo__text {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 620px;
}

/* --- Antetítulo -------------------------------------------------------- */

.vxm-seo__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vxm-secondary);
}

.vxm-seo__eyebrow-line {
    display: block;
    width: 34px;
    height: 2px;
    flex: 0 0 auto;
    background: var(--vxm-secondary);
}

/* --- Título ------------------------------------------------------------ */

.vxm-seo__title {
    font-size: clamp(1.9rem, 2.6vw, 2.75rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: var(--vxm-primary);
    margin: 0 0 22px;
    text-align: left;
}

/* Los <br> del partial fuerzan el corte en tres líneas del diseño. En pantalla
   estrecha esos saltos descuadran el bloque, así que ahí se anulan y el título
   fluye solo. */
@media (max-width: 1200px) {
    .vxm-seo__title br {
        display: none;
    }
}

/* .vxm-highlight se quedó sin uso al reescribir el H2: era el resaltado de las
   keywords del título anterior. Se retira su definición de aquí; ya no la usa
   ningún .php del tema (comprobado con grep). */

/* --- Párrafos ---------------------------------------------------------- */

.vxm-seo__content {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--vxm-gray-600);
    text-align: left;
}

.vxm-seo__content p {
    margin: 0 0 18px;
}

.vxm-seo__content p:last-child {
    margin-bottom: 0;
}

.vxm-seo__content strong {
    font-weight: 600;
    color: var(--vxm-primary);
}

/* --- Botón -------------------------------------------------------------- */

.vxm-seo__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    padding: 16px 30px;
    background: var(--vxm-secondary);
    color: var(--vxm-white);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: background var(--vxm-transition), transform var(--vxm-transition);
}

.vxm-seo__cta:hover {
    background: var(--vxm-secondary-dark);
    color: var(--vxm-white);
    transform: translateY(-2px);
}

/* --- Fila de datos ------------------------------------------------------ */

.vxm-seo__facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 44px 0 0;
    padding: 0;
    list-style: none;
}

/* El filete separador va en el borde izquierdo de cada ítem menos el primero:
   así no sobra una línea al final ni hace falta un :last-child. */
.vxm-seo__fact+.vxm-seo__fact {
    padding-left: 24px;
    border-left: 1px solid var(--vxm-gray-300);
}

.vxm-seo__fact svg {
    display: block;
    margin-bottom: 10px;
    color: var(--vxm-secondary);
}

.vxm-seo__fact strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--vxm-primary);
    margin-bottom: 2px;
}

.vxm-seo__fact span {
    display: block;
    font-size: 0.84rem;
    color: var(--vxm-gray-600);
}

/* --- Marca de agua ------------------------------------------------------ */

.vxm-seo__watermark {
    position: absolute;
    right: -10px;
    bottom: -6px;
    width: 230px;
    height: auto;
    color: var(--vxm-gray-300);
    opacity: 0.5;
    pointer-events: none;
}

/* --- Responsive ---------------------------------------------------------- */

/* Una columna: la foto pasa arriba, en banda, y el panel debajo. */
@media (max-width: 900px) {
    .vxm-seo__layout {
        grid-template-columns: 1fr;
    }

    .vxm-seo__media {
        min-height: 0;
        height: 320px;
    }

    .vxm-seo__panel {
        padding: 48px var(--vxm-space-lg);
    }

    .vxm-seo__text {
        max-width: none;
    }

    .vxm-seo__watermark {
        width: 170px;
        opacity: 0.35;
    }
}

@media (max-width: 640px) {
    .vxm-seo__media {
        height: 240px;
    }

    .vxm-seo__panel {
        padding: 36px var(--vxm-space-md);
    }

    .vxm-seo__content {
        font-size: 0.95rem;
    }

    .vxm-seo__cta {
        width: 100%;
        justify-content: center;
    }

    /* Tres columnas de datos no caben: se apilan y el filete pasa a ser
       horizontal, entre uno y otro. */
    .vxm-seo__facts {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .vxm-seo__fact+.vxm-seo__fact {
        padding-left: 0;
        border-left: 0;
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px solid var(--vxm-gray-300);
    }
}

/* ==========================================================================
   BENEFITS SECTION (imagen parallax)
   ========================================================================== */

.vxm-benefits {
    position: relative;
    padding: 90px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* TÍTULO DE SECCIÓN */
.vxm-benefits__title {
    text-align: center;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    color: var(--vxm-white);
    margin-bottom: 12px;
}

/* Frase de apoyo bajo el H2. */
.vxm-benefits__text {
    max-width: 620px;
    margin: 0 auto var(--vxm-space-xl);
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

/* GRID — cuatro razones. Eran tres hasta que se retiró "Great Prices". */
.vxm-benefits__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--vxm-space-md);
}

/* CARD (vidrio esmerilado) */
.vxm-benefit {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: var(--vxm-space-lg) var(--vxm-space-md);
    text-align: center;
    transition: var(--vxm-transition);
}

/* HOVER SUAVE */
.vxm-benefit:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-5px);
}

/* ICONO */
.vxm-benefit__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto var(--vxm-space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--vxm-white);

    /* Los cuatro iconos van iguales, en círculo de línea. Antes cada uno
       llevaba un relleno de color distinto (azul, turquesa, naranja) y el
       rediseño pide evitar el color saturado y el exceso de iconos. */
    border: 1px solid rgba(255, 255, 255, 0.45);
}

/* TÍTULO */
.vxm-benefit__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--vxm-white);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

/* TEXTO */
.vxm-benefit p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0;
}

/* RESPONSIVE */
@media (max-width: 1100px) {
    .vxm-benefits__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .vxm-benefits__grid {
        grid-template-columns: 1fr;
    }
}

/* background-attachment:fixed da problemas en iOS/mobile, se desactiva */
@media (max-width: 768px) {
    .vxm-benefits {
        background-attachment: scroll;
        padding: 60px 0;
    }
}

/* ==========================================================================
   FILAS DE TOURS DEL HOME (.vxm-tour-section)
   Las usa template-parts/front/tours-by-category.php. La rejilla en sí
   (.vxm-tour-grid, 3 columnas) vive en tour-components.css, que carga en
   todo el sitio, así que aquí solo va el espaciado de la sección.
   ========================================================================== */

.vxm-tour-section {
    padding: var(--vxm-section-pad-top) 0 var(--vxm-section-pad-bottom);
    margin: 0;
}

/* Dos filas de tours seguidas dejarían el doble de aire entre ellas. */
.vxm-tour-section + .vxm-tour-section {
    padding-top: 0;
}

/* En escritorio las tres filas van más aireadas que el resto del home: son
   bloques altos (tres tarjetas grandes) y con el espaciado general se pegaban
   unas a otras.

   Se redefinen las custom properties sobre el propio elemento en vez de
   escribir un padding nuevo: las otras tres reglas que reparten este espacio
   —el padding base, y las dos que lo recuperan alrededor de la banda con
   foto— ya leen estas variables, así que se ajustan solas y el valor sigue
   viviendo en un único sitio.

   En móvil no se toca: --vxm-section-pad-top ya baja a 22px a ≤768px y ahí el
   problema es justo el contrario, sobra aire vertical. */
@media (min-width: 769px) {
    .vxm-tour-section {
        --vxm-section-pad-top: 72px;
        --vxm-section-pad-bottom: 84px;
    }
}

/* Estas tres filas son el bloque comercial del home y su H2 pesa más que el
   del resto de secciones. Solo se agranda aquí: .vxm-section-title la comparten
   también testimonios y blog, que se quedan en 1.6rem.
   clamp() evita media queries: 24px en el móvil (estos títulos son largos y
   caben en menos líneas) y hasta 32px a partir de ~900px de ancho. */
.vxm-tour-section .vxm-section-title {
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
}

/* El ancho y el interlineado los pone ya .vxm-section-text; aquí solo el aire
   extra antes de la rejilla de tarjetas. */
.vxm-tour-section .vxm-section-text {
    margin-bottom: 28px;
}

/* Las keywords del intro van en <strong> (ver front-page.php). El 700 por
   defecto del navegador pesaba demasiado dentro de un párrafo largo en gris:
   el 600 de Poppins las destaca sin cortar la lectura. */
.vxm-tour-section .vxm-section-text strong {
    font-weight: 600;
}

@media (max-width: 768px) {
    .vxm-tour-section .vxm-section-text {
        text-align: left;
    }
}

/* .vxm-popular-tours: sección antigua, ya no se llama desde front-page.php.
   Se conserva junto a su partial por si hiciera falta recuperarla. */
.vxm-popular-tours {
    padding: var(--vxm-section-pad-top) 0 var(--vxm-section-pad-bottom);
    margin: 0;
}

.vxm-section-title {
    text-align: center;
    font-size: 1.6rem;
    color: var(--vxm-primary);
    margin: 0 0 8px;
}

/* Mismo ancho e interlineado para todos los intros de sección del home.
   Este archivo solo se encola con is_front_page(), así que no sale de aquí. */
.vxm-section-text {
    text-align: center;
    color: var(--vxm-gray-600);
    margin: 0 auto 20px;
    max-width: 1280px;
    line-height: 1.7;
}

.vxm-section-cta {
    text-align: center;
    margin: 20px 0 0;
}

.vxm-section-cta .vxm-btn--outline {
    background: var(--vxm-primary);
    color: var(--vxm-white);
    border-color: var(--vxm-primary);
}

.vxm-section-cta .vxm-btn--outline:hover {
    background: var(--vxm-primary-dark);
    border-color: var(--vxm-primary-dark);
}

/* ==========================================================================
   DESTINATIONS
   ========================================================================== */

/* Antes: padding 10px 0 30px, muy apretado contra las secciones vecinas.
   Ahora usa las mismas variables que el resto del home, que en escritorio se
   redefinen más abajo a 72/84px. */
.vxm-destinations {
    padding: var(--vxm-section-pad-top) 0 var(--vxm-section-pad-bottom);
}

@media (min-width: 769px) {
    .vxm-destinations {
        --vxm-section-pad-top: 80px;
        --vxm-section-pad-bottom: 90px;
    }
}

/* La cabecera era flex en fila porque llevaba el enlace "View all Destinations"
   a la derecha. Sin él, se centra. */
.vxm-destinations__header {
    margin-bottom: 14px;
    text-align: center;
}

.vxm-destinations__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    /* Mismo tamaño que .vxm-stats__title ("Peru, Knowingly Traveled") para que
       los dos H2 de esa mitad del home pesen igual. Si se cambia uno, cambiar
       el otro. */
    font-size: clamp(1.7rem, 2.6vw, 2.3rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--vxm-primary);
}

/* El icono del pin no crece con el título: a 2.6rem quedaba desproporcionado. */
.vxm-destinations__title svg {
    flex: 0 0 auto;
    color: var(--vxm-secondary);
}

.vxm-destinations__text {
    max-width: 720px;
    margin: 0 auto 36px;
    text-align: center;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--vxm-gray-600);
}

/* Grid tipo masonry */
.vxm-destinations__grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-auto-rows: 200px;
    gap: 12px;
}

.vxm-dest-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    display: block;
    text-decoration: none;
}

/* Layout: primero grande, segundo pequeño, luego 3 iguales, luego 2 */
.vxm-dest-card--0 {
    grid-row: span 2;
}

.vxm-dest-card--2,
.vxm-dest-card--3,
.vxm-dest-card--4 {
    grid-column: auto;
}

/* A partir del 3er card, 3 columnas */
.vxm-destinations__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
    gap: 12px;
}

.vxm-dest-card--0 {
    grid-column: span 2;
    grid-row: span 2;
}

.vxm-dest-card--5,
.vxm-dest-card--6 {
    grid-column: auto;
}

/* Imagen */
.vxm-dest-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
    filter: saturate(1.15) contrast(1.08) brightness(0.85);
}

.vxm-dest-card:hover .vxm-dest-card__img {
    transform: scale(1.08);
    filter: saturate(1.25) contrast(1.12) brightness(0.8);
}

/* Overlay cinematográfico */
.vxm-dest-card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top,
            rgba(27, 61, 90, 0.7) 0%,
            rgba(0, 0, 0, 0.1) 50%,
            rgba(27, 61, 90, 0.15) 100%);
    transition: background 0.4s ease;
}

.vxm-dest-card:hover .vxm-dest-card__overlay {
    background: linear-gradient(to top,
            rgba(27, 61, 90, 0.85) 0%,
            rgba(0, 0, 0, 0.15) 50%,
            rgba(27, 61, 90, 0.2) 100%);
}

/* Nombre */
.vxm-dest-card__name {
    position: absolute;
    bottom: 16px;
    left: 20px;
    color: var(--vxm-white);
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.vxm-dest-card--0 .vxm-dest-card__name {
    font-size: 2rem;
}

@media (max-width: 768px) {
    .vxm-destinations__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 160px;
    }

    .vxm-dest-card--0 {
        grid-column: span 2;
        grid-row: span 1;
    }

    .vxm-dest-card__name {
        font-size: 1.1rem;
    }

    .vxm-dest-card--0 .vxm-dest-card__name {
        font-size: 1.4rem;
    }

    .vxm-destinations__header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   STATS
   ========================================================================== */

.vxm-stats {
    padding: var(--vxm-section-pad-bottom) 0;
    background: var(--vxm-primary);
}

/* Cabecera de la sección. Las cifras solas no decían de qué hablaban; el
   titular las enmarca como prueba de experiencia local. */
.vxm-stats__header {
    max-width: 680px;
    margin: 0 auto 40px;
    text-align: center;
}

.vxm-stats__title {
    margin: 0 0 10px;
    font-size: clamp(1.7rem, 2.6vw, 2.3rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--vxm-white);
}

.vxm-stats__lead {
    margin: 0;
    font-size: 1.02rem;
    color: rgba(255, 255, 255, 0.82);
}

.vxm-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}

.vxm-stats__number {
    display: block;
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--vxm-secondary);
    line-height: 1.2;
    margin-bottom: 6px;
}

.vxm-stats__label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--vxm-white);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

@media (max-width: 768px) {
    .vxm-stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */

.vxm-testimonials {
    padding: var(--vxm-section-pad-top) 0 var(--vxm-section-pad-bottom);
}

/* Tabs */
.vxm-reviews-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 32px;
}

.vxm-reviews-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--vxm-white);
    border: 1px solid var(--vxm-gray-200);
    border-radius: 50px;
    cursor: pointer;
    font-family: var(--vxm-font-body);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--vxm-gray-600);
    transition: all var(--vxm-transition);
}

.vxm-reviews-tab:hover {
    border-color: var(--vxm-gray-400);
}

.vxm-reviews-tab.is-active {
    background: var(--vxm-primary);
    border-color: var(--vxm-primary);
    color: var(--vxm-white);
}

.vxm-reviews-tab__logo {
    height: 18px;
    width: auto;
    object-fit: contain;
}

.vxm-reviews-tab.is-active .vxm-reviews-tab__logo {
    filter: brightness(0) invert(1);
}

/* Paneles */
.vxm-reviews-panel {
    visibility: hidden;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.vxm-reviews-panel.is-active {
    visibility: visible;
    height: auto;
    opacity: 1;
}

/* Carrusel */
.vxm-reviews-carousel {
    position: relative;
    overflow: hidden;
}

.vxm-reviews-carousel__track {
    display: flex;
    gap: 20px;
    transition: transform 0.4s ease;
}

.vxm-review-card {
    flex: 0 0 calc(25% - 15px);
    background: var(--vxm-white);
    border: 1px solid var(--vxm-gray-200);
    border-radius: 10px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    min-height: 220px;
}

.vxm-review-card__stars {
    display: flex;
    gap: 2px;
    margin-bottom: 12px;
}

.vxm-review-card__text {
    font-size: 0.88rem;
    color: var(--vxm-gray-600);
    line-height: 1.7;
    flex: 1;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vxm-review-card__text p {
    margin: 0;
}

.vxm-review-card__author {
    border-top: 1px solid var(--vxm-gray-200);
    padding-top: 10px;
}

.vxm-review-card__author strong {
    display: block;
    font-size: 0.85rem;
    color: var(--vxm-primary);
    font-weight: 500;
}

.vxm-review-card__author span {
    font-size: 0.72rem;
    color: var(--vxm-gray-400);
}

/* Botones carrusel */
.vxm-reviews-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: var(--vxm-white);
    border: 1px solid var(--vxm-gray-300);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    box-shadow: var(--vxm-shadow-sm);
    transition: all var(--vxm-transition);
}

.vxm-reviews-carousel__btn:hover {
    background: var(--vxm-primary);
    border-color: var(--vxm-primary);
    color: var(--vxm-white);
}

.vxm-reviews-carousel__btn:hover svg {
    stroke: var(--vxm-white);
}

.vxm-reviews-carousel__btn--prev { left: 0; }
.vxm-reviews-carousel__btn--next { right: 0; }

/* Link ver reseñas */
.vxm-reviews-panel__link {
    display: inline-block;
    margin-top: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--vxm-secondary);
    text-decoration: none;
}

.vxm-reviews-panel__link:hover {
    color: var(--vxm-primary);
}

@media (max-width: 1024px) {
    .vxm-review-card {
        flex: 0 0 calc(33.333% - 14px);
    }
}

@media (max-width: 768px) {
    .vxm-reviews-tabs {
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    .vxm-review-card {
        flex: 0 0 calc(50% - 10px);
    }

    .vxm-reviews-tabs {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .vxm-review-card {
        flex: 0 0 100%;
    }
}

/* ==========================================================================
   BLOG FRONTPAGE + CTA FINAL
   ========================================================================== */

.vxm-front-blog {
    padding: var(--vxm-section-pad-top) 0 var(--vxm-section-pad-bottom);
}

.vxm-cta-final {
    padding: var(--vxm-section-pad-bottom) 0;
    background: var(--vxm-primary);
    text-align: center;
}

.vxm-cta-final__title {
    font-size: 2rem;
    color: var(--vxm-white);
    margin-bottom: 12px;
}

.vxm-cta-final__text {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 32px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.vxm-cta-final__buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.vxm-cta-final__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: all var(--vxm-transition);
}

.vxm-cta-final__btn--primary {
    background: var(--vxm-secondary);
    color: var(--vxm-white);
}

.vxm-cta-final__btn--primary:hover {
    background: var(--vxm-secondary-dark);
    color: var(--vxm-white);
}

.vxm-cta-final__btn--wa {
    background: transparent;
    color: var(--vxm-white);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.vxm-cta-final__btn--wa:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--vxm-white);
    color: var(--vxm-white);
}

@media (max-width: 480px) {
    .vxm-cta-final__buttons {
        flex-direction: column;
    }

    .vxm-cta-final__btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   TARJETA DE TOUR DEL HOME (.vxm-home-card)
   La imprime template-parts/front/tour-card-home.php, solo dentro de las tres
   filas de tours de la portada.

   Clases propias a propósito: .vxm-tour-card la estiliza archive-tour.css, que
   se encola en TODO el sitio, así que reusar ese nombre habría obligado a
   sobrescribir 26 reglas. Aquí no hay nada que pelear.

   La rejilla de 3 columnas sigue siendo .vxm-tour-grid (tour-components.css).
   ========================================================================== */

.vxm-home-card {
    display: flex;
    flex-direction: column;
    background: var(--vxm-white);
    border: 1px solid var(--vxm-gray-200);
    border-radius: 14px;
    padding: 10px 10px 0;
    box-shadow: var(--vxm-shadow-sm);
    transition: transform var(--vxm-transition), box-shadow var(--vxm-transition);
}

.vxm-home-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--vxm-shadow-lg);
}

/* --- Imagen ---------------------------------------------------------- */

/* La foto va embebida dentro del padding de la tarjeta, no a ras del borde:
   es lo que le da el aire de la referencia. */
.vxm-home-card__media {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.vxm-home-card__media-link {
    display: block;
}

.vxm-home-card__img {
    display: block;
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.vxm-home-card:hover .vxm-home-card__img {
    transform: scale(1.05);
}

/* Tour sin imagen destacada: reserva el hueco en vez de descuadrar la fila. */
.vxm-home-card__img--empty {
    background: var(--vxm-gray-100);
}

.vxm-home-card__sale {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--vxm-error);
    color: var(--vxm-white);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* --- Cinta de premio -------------------------------------------------- */

/* Banderola colgando de la esquina superior derecha. El pico de abajo lo hace
   el clip-path, no un pseudo-elemento: así el fondo sigue siendo un solo bloque
   y no hay que recalcular nada si cambia el ancho. */
.vxm-home-card__ribbon {
    position: absolute;
    top: 0;
    right: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 78px;
    padding: 8px 6px 16px;
    background: var(--vxm-secondary-light);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
    text-align: center;
    text-decoration: none;
    transition: filter var(--vxm-transition);
}

/* Solo cuando lleva enlace (hay perfil de Tripadvisor en el Customizer).
   Se oscurece con filter en vez de cambiar de color: el logotipo va en negro
   y sobre el turquesa oscuro del tema no se leería. */
a.vxm-home-card__ribbon:hover {
    filter: brightness(0.9);
}

.vxm-home-card__ribbon-year {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    color: var(--vxm-primary);
}

.vxm-home-card__ribbon-logo {
    display: block;
    width: 64px;
    height: auto;
}

/* --- Cuerpo ----------------------------------------------------------- */

.vxm-home-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px 8px 16px;
}

/* Categoría a la izquierda, nivel a la derecha, con un filete entre ambos. */
.vxm-home-card__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.vxm-home-card__cat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vxm-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vxm-home-card__cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(20, 127, 121, 0.1);
}

.vxm-home-card__level {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding-left: 10px;
    border-left: 1px solid var(--vxm-gray-200);
    font-size: 0.74rem;
    color: var(--vxm-gray-600);
    white-space: nowrap;
}

.vxm-home-card__level strong {
    font-weight: 600;
    color: var(--vxm-primary);
}

.vxm-home-card__level svg {
    color: var(--vxm-secondary);
}

.vxm-home-card__title {
    margin: 0 0 8px;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.32;
}

.vxm-home-card__title a {
    color: var(--vxm-primary);
    text-decoration: none;
}

.vxm-home-card__title a:hover {
    color: var(--vxm-secondary);
}

/* Dos líneas fijas para que las tres tarjetas de una fila mantengan la misma
   altura de bloque de texto aunque los excerpts sean distintos. */
.vxm-home-card__excerpt {
    margin: 0 0 16px;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--vxm-gray-600);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Datos y precio ---------------------------------------------------- */

/* margin-top: auto empuja este bloque y los botones al fondo: las tarjetas de
   una misma fila acaban con los botones alineados aunque el título ocupe una
   línea más en una de ellas. */
.vxm-home-card__info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--vxm-gray-200);
}

.vxm-home-card__facts {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.vxm-home-card__facts span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--vxm-gray-600);
}

.vxm-home-card__facts strong {
    font-weight: 600;
    color: var(--vxm-primary);
}

.vxm-home-card__facts svg {
    flex: 0 0 auto;
    color: var(--vxm-secondary);
}

/* Valoración: misma fila que el resto de datos, pero es un enlace al perfil de
   Tripadvisor cuando hay uno configurado. */
.vxm-home-card__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--vxm-gray-600);
    text-decoration: none;
}

a.vxm-home-card__rating:hover strong {
    color: var(--vxm-secondary);
    text-decoration: underline;
}

.vxm-home-card__rating strong {
    font-weight: 600;
    color: var(--vxm-primary);
}

/* Ambas reglas van ancladas a __facts porque .vxm-home-card__facts span y
   .vxm-home-card__facts svg, definidas arriba, tienen más especificidad y
   pintarían las estrellas del turquesa de los iconos. */
.vxm-home-card__facts .vxm-home-card__stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.vxm-home-card__facts .vxm-home-card__stars svg {
    color: var(--vxm-warning);
}

.vxm-home-card__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    padding-left: 14px;
    border-left: 1px solid var(--vxm-gray-200);
    text-align: right;
}

.vxm-home-card__price-label {
    font-size: 0.76rem;
    color: var(--vxm-gray-600);
}

.vxm-home-card__price-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.vxm-home-card__price-amount {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--vxm-primary);
}

/* El símbolo va volado y pequeño, como en la referencia: la cifra es lo que
   tiene que leerse de un vistazo. */
.vxm-home-card__price-symbol {
    margin-right: 1px;
    font-size: 0.95rem;
    font-weight: 600;
    vertical-align: super;
}

.vxm-home-card__price-per {
    font-size: 0.72rem;
    color: var(--vxm-gray-600);
}

.vxm-home-card__price-old {
    font-size: 0.78rem;
    color: var(--vxm-gray-400);
    text-decoration: line-through;
}

/* --- Botones ----------------------------------------------------------- */

.vxm-home-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.vxm-home-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background var(--vxm-transition), color var(--vxm-transition), border-color var(--vxm-transition);
}

.vxm-home-card__btn svg {
    flex: 0 0 auto;
}

.vxm-home-card__btn--ghost {
    border-color: var(--vxm-secondary);
    background: transparent;
    color: var(--vxm-secondary);
}

.vxm-home-card__btn--ghost:hover {
    background: var(--vxm-secondary);
    color: var(--vxm-white);
}

.vxm-home-card__btn--solid {
    background: var(--vxm-secondary);
    color: var(--vxm-white);
}

.vxm-home-card__btn--solid:hover {
    background: var(--vxm-secondary-dark);
    color: var(--vxm-white);
}

/* --- Responsive --------------------------------------------------------- */

/* A dos columnas la tarjeta se estrecha y "Activity Level: Challenging" ya no
   cabe junto a la categoría: pasa a su propia línea. */
@media (max-width: 1100px) {
    .vxm-home-card__topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .vxm-home-card__level {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 600px) {
    .vxm-home-card__img {
        height: 210px;
    }

    .vxm-home-card__info {
        flex-direction: row;
        align-items: center;
    }

    .vxm-home-card__price-amount {
        font-size: 1.5rem;
    }

    /* Dos botones redondos no caben en un móvil estrecho sin partir el texto. */
    .vxm-home-card__actions {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   FILA DE TOURS CON IMAGEN DE FONDO (.vxm-tour-section--has-bg)

   La clase la añade template-parts/front/tours-by-category.php cuando recibe
   una imagen en el argumento 'bg', y con ella inyecta la URL inline en
   --vxm-section-bg. Aquí no hay ninguna ruta escrita: la foto se elige en
   Personalizar > Home Tour Sections. Sin imagen, la clase no se imprime y la
   sección se ve igual que las otras dos.

   Hoy solo la usa la fila de paquetes, pero el mecanismo es genérico: basta
   con pasarle 'bg' a cualquiera de las tres llamadas de front-page.php.
   ========================================================================== */

.vxm-tour-section--has-bg {
    position: relative;
    background-image: var(--vxm-section-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Parallax: la foto se ancla al viewport y la banda se desliza por encima
       al hacer scroll. Es el mismo recurso que usa .vxm-benefits. */
    background-attachment: fixed;
}

/* .vxm-tour-section + .vxm-tour-section anula el padding superior para que dos
   filas seguidas no dupliquen el aire. Con fondo propio esa sección necesita
   recuperarlo o la imagen arranca pegada a las tarjetas de arriba. Mismo peso
   de selector que aquella regla, y gana por ir después en el archivo. */
.vxm-tour-section + .vxm-tour-section--has-bg {
    padding-top: var(--vxm-section-pad-top);
}

/* Y la fila siguiente (day trips) también, o quedaría pegada a la banda. */
.vxm-tour-section--has-bg + .vxm-tour-section {
    padding-top: var(--vxm-section-pad-top);
}

/* Velo para que el texto blanco se lea sobre cualquier foto. Va en un ::before
   y no en un degradado del propio background para poder cambiar la imagen sin
   tocar el velo, y para que el parallax mueva solo la foto.
   Subir o bajar estos dos valores es lo único que hay que tocar si la foto que
   se suba es más clara o más oscura de la cuenta. */
.vxm-tour-section--has-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 24, 47, 0.55) 0%, rgba(2, 24, 47, 0.4) 100%);
}

.vxm-tour-section--has-bg > .vxm-container {
    position: relative;
    z-index: 1;
}

/* Con el velo más suave el texto ya no descansa solo en el contraste del
   fondo: la sombra lo despega de las zonas claras de la foto. */
.vxm-tour-section--has-bg .vxm-section-title {
    color: var(--vxm-white);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.vxm-tour-section--has-bg .vxm-section-text {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.vxm-tour-section--has-bg .vxm-section-text strong {
    color: var(--vxm-white);
}

/* El botón normal es azul marino sólido: sobre el velo oscuro desaparecería. */
.vxm-tour-section--has-bg .vxm-section-cta .vxm-btn--outline {
    background: transparent;
    border-color: var(--vxm-white);
    color: var(--vxm-white);
}

.vxm-tour-section--has-bg .vxm-section-cta .vxm-btn--outline:hover {
    background: var(--vxm-white);
    border-color: var(--vxm-white);
    color: var(--vxm-primary);
}

/* Safari de iOS no implementa background-attachment: fixed: ancla la foto al
   documento y la escala al alto de la página, con lo que se ve gigante y
   descuadrada. En móvil se desactiva el parallax, igual que en .vxm-benefits. */
@media (max-width: 768px) {
    .vxm-tour-section--has-bg {
        background-attachment: scroll;
    }
}

/* Quien haya pedido menos animación en su sistema tampoco quiere parallax. */
@media (prefers-reduced-motion: reduce) {
    .vxm-tour-section--has-bg {
        background-attachment: scroll;
    }
}

/* ==========================================================================
   EXPLORE PERU YOUR WAY (.vxm-explore)
   Lo imprime template-parts/front/explore-peru.php.

   Mosaico de 4 tarjetas: una alta a la izquierda que ocupa las dos filas, dos
   arriba a la derecha y una ancha abajo que ocupa dos columnas. Las posiciones
   se asignan por el modificador de cada tarjeta, no por :nth-child, para que
   reordenar el array del partial no descoloque la rejilla.
   ========================================================================== */

.vxm-explore {
    position: relative;
    overflow: hidden;
    padding: var(--vxm-section-pad-top) 0 var(--vxm-section-pad-bottom);
    background: var(--vxm-off-white);
}

@media (min-width: 769px) {
    .vxm-explore {
        --vxm-section-pad-top: 72px;
        --vxm-section-pad-bottom: 84px;
    }
}

.vxm-explore .vxm-container {
    position: relative;
    z-index: 1;
}

/* --- Cabecera ----------------------------------------------------------- */

/* Es el H2 real, aunque se vea pequeño: lleva la keyword de la sección. El
   titular grande de debajo es un párrafo. */
.vxm-explore__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 0 16px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vxm-secondary);
}

.vxm-explore__eyebrow-line {
    display: block;
    width: 34px;
    height: 2px;
    flex: 0 0 auto;
    background: var(--vxm-secondary);
}

.vxm-explore__lead {
    max-width: 860px;
    margin: 0 auto 40px;
    text-align: center;
    font-size: clamp(1.5rem, 2.2vw, 2.15rem);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.01em;
    color: var(--vxm-primary);
    text-wrap: balance;
}

/* --- Mosaico ------------------------------------------------------------ */

.vxm-explore__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 430px 250px;
    gap: 16px;
}

.vxm-explore__card--treks {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.vxm-explore__card--machupicchu {
    grid-column: 2;
    grid-row: 1;
}

.vxm-explore__card--cusco {
    grid-column: 3;
    grid-row: 1;
}

.vxm-explore__card--packages {
    grid-column: 2 / span 2;
    grid-row: 2;
}

/* --- Tarjeta ------------------------------------------------------------ */

/* Toda la tarjeta es el enlace, no solo el "Explore treks": el área de clic
   es la foto entera. El <a> es flex-end para pegar el texto abajo. */
.vxm-explore__card {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-radius: 12px;
    background: var(--vxm-primary);
    text-decoration: none;
    isolation: isolate;
}

.vxm-explore__card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform 0.6s ease;
}

.vxm-explore__card:hover .vxm-explore__card-img {
    transform: scale(1.05);
}

/* El degradado va en un ::after y no en el propio fondo para que el zoom del
   hover mueva la foto pero no el velo. */
.vxm-explore__card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top,
            rgba(2, 24, 47, 0.94) 0%,
            rgba(2, 24, 47, 0.75) 38%,
            rgba(2, 24, 47, 0.12) 72%,
            rgba(2, 24, 47, 0) 100%);
}

.vxm-explore__card-body {
    display: block;
    width: 100%;
    padding: 26px 26px 24px;
    color: var(--vxm-white);
}

.vxm-explore__card-icon {
    display: block;
    margin-bottom: 12px;
    color: var(--vxm-white);
}

.vxm-explore__card-icon svg {
    display: block;
}

.vxm-explore__card-title {
    display: block;
    margin-bottom: 8px;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--vxm-white);
}

.vxm-explore__card-text {
    display: block;
    max-width: 46ch;
    margin-bottom: 14px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
}

.vxm-explore__card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--vxm-secondary-light);
}

.vxm-explore__card-cta svg {
    transition: transform var(--vxm-transition);
}

.vxm-explore__card:hover .vxm-explore__card-cta svg {
    transform: translateX(4px);
}

/* --- Marca de agua ------------------------------------------------------ */

.vxm-explore__watermark {
    position: absolute;
    right: -14px;
    bottom: -8px;
    width: 230px;
    height: auto;
    color: var(--vxm-gray-300);
    opacity: 0.5;
    pointer-events: none;
}

/* --- Responsive ---------------------------------------------------------- */

/* Dos columnas: el mosaico deja de tener sentido, todas las tarjetas pasan a
   medir lo mismo y la ancha de abajo ocupa el ancho completo. */
@media (max-width: 1100px) {
    .vxm-explore__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: none;
    }

    .vxm-explore__card--treks,
    .vxm-explore__card--machupicchu,
    .vxm-explore__card--cusco {
        grid-column: auto;
        grid-row: auto;
        min-height: 320px;
    }

    .vxm-explore__card--packages {
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: 260px;
    }
}

@media (max-width: 700px) {
    .vxm-explore__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .vxm-explore__card--treks,
    .vxm-explore__card--machupicchu,
    .vxm-explore__card--cusco,
    .vxm-explore__card--packages {
        grid-column: auto;
        min-height: 300px;
    }

    .vxm-explore__card-body {
        padding: 20px;
    }

    .vxm-explore__card-title {
        font-size: 1.15rem;
    }

    .vxm-explore__watermark {
        width: 160px;
        opacity: 0.35;
    }
}