/* ==========================================================================
   SECCIÓN: TOURS PUBLICADOS (CARRUSEL)
   ========================================================================== */
.eft-published-tours {
    background-color: #3e0a0f; /* Color vino oscuro del fondo */
    /* 👇 Cambia esto. 
       Antes era '80px 0'. Ahora ponemos 0 arriba, 0 a los lados, y 80px abajo */
    padding: 0 0 80px;
    color: #ffffff;
    width: 100%;
    overflow: hidden;

    
}

.eft-published-tours__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
}

.eft-published-tours__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
    color: #ffffff;
}

.eft-published-tours__title {
    color: #ffffff;
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.5px;
}

/* --- Controles del Carrusel (Flechas) --- */
.eft-published-tours__nav {
    display: flex;
    gap: 12px;
}

.eft-published-tours__nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #ffffff;
    color: #3e0a0f;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.eft-published-tours__nav-btn:hover:not(:disabled) {
    transform: scale(1.08);
}

.eft-published-tours__nav-btn:disabled {
    background-color: rgba(255, 255, 255, 0.2); 
    color: #ffffff;
    cursor: not-allowed;
}

/* --- Pista del Carrusel (Scroll Snap Nativo) --- */
.eft-published-tours__track {
    display: flex;
    align-items: stretch;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-top: 10px;
    padding-bottom: 20px; /* Espacio para que no se corte la sombra si la hay */
    
    /* Ocultar barra de scroll para un look más limpio */
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.eft-published-tours__track::-webkit-scrollbar {
    display: none;
}

/* ==========================================================================
   COMPONENTE: TOUR CARD
   ========================================================================== */
.eft-tour-card {
    position: relative;
    /* Muestra 3 tarjetas completas en escritorio */
    flex: 0 0 calc(33.333% - 14px); 
    min-width: 300px;
    min-height: 550px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    scroll-snap-align: start;
    transform: translateZ(0); /* Aceleración por hardware */
}

/* Etiqueta de Cancelación Gratuita */
.eft-tour-card__badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: #631218; 
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    z-index: 10;
}

/* Imagen de fondo de la tarjeta */
.eft-tour-card__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Degradado Rojo Inferior */
.eft-tour-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75%;
    /* De transparente arriba a rojo sólido abajo */
    background: linear-gradient(
        to bottom, 
        rgba(244, 37, 79, 0) 0%, 
        rgba(244, 37, 79, 0.85) 50%, 
        rgba(244, 37, 79, 1) 100%
    );
    z-index: 2;
}

/* Contenedor de Textos */
.eft-tour-card__content {
    position: relative;
    z-index: 3;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.eft-tour-card__title {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.1;
    color: #ffffff;
}

.eft-tour-card__reviews {
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    gap: 6px;
    opacity: 0.95;
}

.eft-tour-card__features {
    list-style: none;
    padding: 0;
    margin: 6px 0 16px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.eft-tour-card__features li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Botón Blanco de Reserva */
.eft-tour-card__btn {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #ffffff;
    color: #f4254f;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 14px 0;
    border-radius: 999px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.eft-tour-card__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* ==========================================================================
   COMPATIBILIDAD DE LA TARJETA DINÁMICA DEL CMS
   --------------------------------------------------------------------------
   Complementa la estructura de template-parts/tour-card.php sin modificar
   el diseño original del carrusel.
   ========================================================================== */


/* ==========================================================================
   CONTENEDOR DE IMAGEN
   ========================================================================== */

.eft-tour-card__media {
    position: absolute;
    inset: 0;
    z-index: 1;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


/*
 * La imagen ahora está dentro de .eft-tour-card__media.
 * Conservamos el comportamiento de fondo completo.
 */
.eft-tour-card__media .eft-tour-card__img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    z-index: 1;

    transition:
        transform 0.6s ease;
}

.eft-tour-card:hover
.eft-tour-card__media
.eft-tour-card__img {
    transform: scale(1.045);
}


/* ==========================================================================
   PLACEHOLDER CUANDO EL TOUR NO TIENE IMAGEN
   ========================================================================== */

.eft-tour-card__placeholder {
    position: absolute;
    inset: 0;
    z-index: 1;

    width: 100%;
    height: 100%;

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

    background:
        linear-gradient(
            145deg,
            #71131e 0%,
            #3e0a0f 52%,
            #240508 100%
        );
}

.eft-tour-card__placeholder::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 27%,
            rgba(255, 255, 255, 0.1),
            transparent 38%
        );

    pointer-events: none;
}

.eft-tour-card__placeholder svg {
    position: relative;
    z-index: 2;

    width: 76px;
    height: 76px;

    fill: none;
    stroke: rgba(255, 255, 255, 0.34);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================================
   OVERLAY DENTRO DEL NUEVO CONTENEDOR
   ========================================================================== */

.eft-tour-card__media .eft-tour-card__overlay {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;

    width: 100%;
    height: 78%;

    background:
        linear-gradient(
            to bottom,
            rgba(244, 37, 79, 0) 0%,
            rgba(244, 37, 79, 0.42) 28%,
            rgba(244, 37, 79, 0.88) 63%,
            rgba(244, 37, 79, 1) 100%
        );

    pointer-events: none;
}


/* ==========================================================================
   CONTENIDO
   ========================================================================== */

.eft-tour-card__content {
    position: relative;
    z-index: 3;

    min-height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;

    padding: 24px;
}


/* ==========================================================================
   CIUDAD
   ========================================================================== */

.eft-tour-card__city {
    display: block;

    margin-bottom: 2px;

    color: rgba(255, 255, 255, 0.94);

    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
}


/* ==========================================================================
   TÍTULO Y ENLACE
   ========================================================================== */

.eft-tour-card__title {
    margin: 0;

    color: #ffffff;

    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.eft-tour-card__title a {
    color: inherit;
    text-decoration: none;
}


/* ==========================================================================
   OPINIONES
   ========================================================================== */

.eft-tour-card__reviews {
    min-height: 18px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;

    color: rgba(255, 255, 255, 0.96);

    font-size: 0.78rem;
    font-weight: 600;
}

.eft-tour-card__rating {
    font-weight: 800;
}

.eft-tour-card__opinions {
    opacity: 0.9;
}


/* ==========================================================================
   CARACTERÍSTICAS CON ICONOS
   ========================================================================== */

.eft-tour-card__features {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        10px
        14px;

    margin:
        8px
        0
        14px;

    padding: 0;

    list-style: none;
}

.eft-tour-card__features li {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 7px;

    color: rgba(255, 255, 255, 0.96);

    font-size: 0.73rem;
    font-weight: 600;
    line-height: 1.4;
}

.eft-tour-card__features li.is-wide {
    grid-column:
        1
        / -1;
}

.eft-tour-card__feature-icon {
    width: 17px;
    height: 17px;

    flex: 0 0 17px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.eft-tour-card__feature-icon svg {
    width: 15px;
    height: 15px;

    display: block;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================================
   PIE: PRECIO Y BOTÓN
   ========================================================================== */

.eft-tour-card__footer {
    position: relative;
    z-index: 4;

    display: flex;
    flex-direction: column;

    margin-top: 2px;
}

.eft-tour-card__price {
    min-height: 20px;

    display: block;

    margin-bottom: 8px;

    color: rgba(255, 255, 255, 0.96);

    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
}

.eft-tour-card__btn {
    position: relative;
    z-index: 5;

    width: 100%;
    min-height: 54px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0
        22px;

    border-radius: 999px;

    background-color: #ffffff;
    color: #f4254f;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}


/* ==========================================================================
   BADGE
   ========================================================================== */

.eft-tour-card__badge {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;

    min-height: 31px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0
        14px;

    border-radius: 999px;

    background:
        rgba(99, 18, 24, 0.94);

    color: #ffffff;

    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;

    backdrop-filter: blur(10px);
}



/* ==========================================================================
   COMPOSICIÓN PARALLAX (TOURS PUBLICADOS)
   ========================================================================== */
.eft-parallax-composition {
    position: relative;
    width: 100%;
    min-height: 70vh; /* Altura suficiente para que luzca la composición */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 2rem; /* Espacio antes de que empiece el título del carrusel */
}

/* 1. Capa Fondo (Efecto Parallax) */
.eft-parallax-composition__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Reemplaza con la ruta de tu foto de la ciudad */
    background-image: url('../img/imagen-fondo-tours-publicados.jpg'); 
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* MAGIA PARALLAX NATIVA */
    z-index: 1;
}

/* Degradado para que los bordes y la parte baja se fundan con el rojo vino */
.eft-parallax-composition__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Un degradado radial y uno lineal para difuminar los bordes hacia el color #3e0a0f */
    background: radial-gradient(circle at center, transparent 30%, #3e0a0f 100%),
                linear-gradient(to bottom, transparent 60%, #3e0a0f 100%);
    z-index: 2;
}

/* Contenedor de las imágenes PNG */
.eft-parallax-composition__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 900px;
    padding: 0 20px;
    margin-top: 40px; /* Empuja un poco el conjunto hacia abajo */
}

/* 2. Texto Img 1 */
.eft-parallax-composition__text {
    width: 80%;
    max-width: 650px;
    height: auto;
    z-index: 3;
    filter: drop-shadow(0 15px 20px rgba(0,0,0,0.4)); 
    /* 👇 LOS CAMBIOS ESTÁN AQUÍ 👇 */
    margin-top: -2%;    /* Sube el texto hacia arriba */
    margin-bottom: 1.5%; /* Reduce qué tanto lo tapa la canoa (antes era -15%) */

    /* 👇 Agrega esta línea para que la animación sea fluida 👇 */
    will-change: transform;
}

/* 3. Img 2 (Canoa) */
.eft-parallax-composition__canoe {
    width: 95%;
    max-width: 750px;
    height: auto;
    z-index: 4; /* Debe estar por encima del texto */
    filter: drop-shadow(0 25px 30px rgba(0,0,0,0.6)); /* Sombra para despegarlo del agua */
}

/* --- Ajuste para móviles --- */
@media (max-width: 760px) {
    /* 2. Ajustamos la caja del parallax para móvil */
    .eft-parallax-composition {
        min-height: 420px; /* Una altura fija suele funcionar mejor en celular que vh */
        margin-top: -2px; /* Un pequeño truco para solapar cualquier línea muerta */
    }

    /* Reducimos el margen que empujaba las fotos hacia abajo */
    .eft-parallax-composition__content {
        margin-top: 0; 
        padding: 0 15px;
    }

    .eft-parallax-composition__bg {
        /* En algunos iOS el fixed da problemas, se suele quitar o dejar normal en móvil */
        background-attachment: scroll; 
    }
    /* 3. ¡Rescatamos el texto! Lo jalamos hacia arriba */
    .eft-parallax-composition__text {
        width: 90%; /* Que ocupe buen ancho */
        margin-top: -25%; /* <-- CLAVE: Lo subimos drásticamente en móvil */
        margin-bottom: -10%; /* Lo dejamos pegadito a la canoa */
    }

    /* 4. Acomodamos la canoa */
    .eft-parallax-composition__canoe {
        width: 105%; /* Que desborde un poquito a los lados da un efecto genial */
        max-width: 450px;
    }
}