/* ==========================================================================
   HERO PÚBLICO - EUROFREETOUR
   Autor: Markad Publicidad Estudio
   ========================================================================== */


/* ==========================================================================
   01. HERO GENERAL
   ========================================================================== */

.eft-tour-hero {
    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    min-height: 860px;

    padding:
        170px
        0
        90px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #16213a 0%,
            #0d1628 100%
        );

    box-sizing: border-box;
}


/* ==========================================================================
   02. IMAGEN
   ========================================================================== */

.eft-tour-hero__media {
    position: absolute;

    inset: 0;

    z-index: 1;
}

.eft-tour-hero__media picture {
    display: block;

    width: 100%;
    height: 100%;
}

.eft-tour-hero__media img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transform: scale(1.015);
}


/* ==========================================================================
   03. PLACEHOLDER
   ========================================================================== */

.eft-tour-hero__placeholder {
    width: 100%;
    height: 100%;

    display: flex;

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

    background:
        linear-gradient(
            135deg,
            #203252,
            #0f1625
        );
}

.eft-tour-hero__placeholder svg {
    width: 110px;
    height: 110px;

    opacity: 0.18;

    stroke: #ffffff;

    stroke-width: 1.6;
}


/* ==========================================================================
   04. OVERLAY
   ========================================================================== */

.eft-tour-hero__overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(7, 13, 25, 0.92) 0%,
            rgba(9, 15, 27, 0.78) 38%,
            rgba(9, 15, 27, 0.34) 100%
        );
}


/* ==========================================================================
   05. CONTENEDOR
   ========================================================================== */

.eft-tour-container {
    position: relative;

    z-index: 3;

    width:
        min(
            1380px,
            92%
        );

    margin: 0 auto;
}


/* ==========================================================================
   06. GRID
   ========================================================================== */

.eft-tour-hero__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 680px)
        420px;

    gap: 90px;

    align-items: center;
}


/* ==========================================================================
   07. CONTENIDO
   ========================================================================== */

.eft-tour-hero__content {
    width: 100%;

    max-width: 680px;
}


/* ==========================================================================
   08. BADGES GENERALES
   ========================================================================== */

.eft-tour-hero__badges {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 22px;
}

.eft-tour-hero__location,
.eft-tour-hero__featured {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        9px
        16px;

    border-radius: 999px;

    backdrop-filter: blur(18px);

    font-size: 0.78rem;

    font-weight: 700;
}

.eft-tour-hero__location {
    background:
        rgba(255, 255, 255, 0.12);
}

.eft-tour-hero__location svg {
    width: 18px;
    height: 18px;

    stroke: #ffffff;

    stroke-width: 2;
}

.eft-tour-hero__featured {
    background: #f4254f;
}


/* ==========================================================================
   09. EYEBROW ESPECÍFICO DE CIUDAD
   ========================================================================== */

.eft-city-hero__eyebrow-row {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 18px;
}

.eft-city-hero__eyebrow,
.eft-city-hero__featured {
    display: inline-flex;

    align-items: center;

    min-height: 32px;

    padding:
        7px
        13px;

    border-radius: 999px;

    font-size: 0.7rem;

    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}

.eft-city-hero__eyebrow {
    color: #ffffff;

    background: #f4254f;
}

.eft-city-hero__featured {
    color: #ffffff;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    background:
        rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(14px);
}


/* ==========================================================================
   10. TÍTULO GENERAL
   ========================================================================== */

.eft-tour-hero h1 {
    margin: 0;

    max-width: 740px;

    font-family: "Poppins", sans-serif;

    font-size:
        clamp(
            2.9rem,
            4.4vw,
            4.6rem
        );

    font-weight: 700;

    line-height: 1.03;

    letter-spacing: -0.04em;
}


/* ==========================================================================
   11. TÍTULO DE CIUDAD
   ========================================================================== */

.eft-city-hero h1 {
    max-width: 560px;

    font-size:
        clamp(
            3rem,
            4.8vw,
            4.7rem
        );

    line-height: 0.98;
}


/* ==========================================================================
   12. LÍNEA VISUAL DE CIUDAD
   ========================================================================== */

.eft-city-hero h1::after {
    content: "";

    display: block;

    width: 58px;
    height: 3px;

    margin-top: 20px;

    border-radius: 999px;

    background: #f4254f;
}


/* ==========================================================================
   13. DESCRIPCIÓN
   ========================================================================== */

.eft-tour-hero__description {
    max-width: 590px;

    margin:
        22px
        0
        0;

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

    font-size: 1.05rem;

    line-height: 1.65;
}


/* ==========================================================================
   14. DESCRIPCIÓN DE CIUDAD
   ========================================================================== */

.eft-city-hero
.eft-tour-hero__description {
    max-width: 470px;

    margin-top: 20px;

    font-size: 1.05rem;

    line-height: 1.55;
}


/* ==========================================================================
   15. META
   ========================================================================== */

.eft-tour-hero__meta {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 14px;

    margin-top: 34px;
}

.eft-tour-hero__meta-item {
    display: flex;

    align-items: center;

    gap: 15px;

    min-height: 82px;

    padding:
        15px
        17px;

    border:
        1px solid
        rgba(255, 255, 255, 0.035);

    border-radius: 18px;

    backdrop-filter: blur(18px);

    background:
        rgba(255, 255, 255, 0.08);
}

.eft-tour-hero__meta-item > span {
    flex:
        0
        0 auto;

    display: flex;

    align-items: center;
    justify-content: center;
}

.eft-tour-hero__meta-item svg {
    width: 24px;
    height: 24px;

    stroke: #ffffff;

    stroke-width: 1.8;
}

.eft-tour-hero__meta-item small {
    display: block;

    margin-bottom: 4px;

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

    font-size: 0.67rem;

    font-weight: 600;

    line-height: 1.3;

    text-transform: uppercase;

    letter-spacing: 0.06em;
}

.eft-tour-hero__meta-item strong {
    display: block;

    color: #ffffff;

    font-size: 0.86rem;

    font-weight: 700;

    line-height: 1.35;
}


/* ==========================================================================
   16. BOTONES
   ========================================================================== */

.eft-tour-hero__actions {
    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 34px;
}

.eft-tour-btn {
    display: inline-flex;

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

    gap: 12px;

    min-height: 56px;

    padding:
        0
        28px;

    border-radius: 999px;

    font-size: 0.82rem;

    font-weight: 700;

    text-decoration: none;

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

.eft-tour-btn svg {
    width: 17px;
    height: 17px;

    stroke: currentColor;

    stroke-width: 2;
}

.eft-tour-btn--primary {
    color: #ffffff;

    background: #f4254f;
}

.eft-tour-btn--primary:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 18px 38px
        rgba(244, 37, 79, 0.3);
}

.eft-tour-btn--secondary {
    color: #ffffff;

    border:
        1px solid
        rgba(255, 255, 255, 0.22);

    background:
        rgba(255, 255, 255, 0.06);
}

.eft-tour-btn--secondary:hover {
    border-color:
        rgba(255, 255, 255, 0.35);

    background:
        rgba(255, 255, 255, 0.1);
}


/* ==========================================================================
   17. TARJETA
   ========================================================================== */

.eft-tour-hero__card {
    padding: 34px;

    border-radius: 30px;

    background: #ffffff;

    color: #101828;

    box-shadow:
        0 40px 90px
        rgba(0, 0, 0, 0.22);
}

.eft-tour-hero__card-eyebrow {
    display: block;

    margin-bottom: 14px;

    color: #f4254f;

    font-size: 0.82rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}

.eft-tour-hero__card h2 {
    margin: 0;

    font-size: 2rem;

    line-height: 1.2;
}

.eft-tour-hero__card p {
    margin:
        18px
        0
        28px;

    color: #667085;

    line-height: 1.8;
}

.eft-tour-hero__card-price {
    margin-bottom: 30px;
}

.eft-tour-hero__card-price small {
    display: block;

    margin-bottom: 8px;

    color: #98a2b3;
}

.eft-tour-hero__card-price strong {
    font-size: 2rem;

    color: #f4254f;
}

.eft-tour-btn--full {
    width: 100%;
}

.eft-tour-hero__card-note {
    display: block;

    margin-top: 18px;

    text-align: center;

    color: #98a2b3;

    line-height: 1.6;
}


/* ==========================================================================
   18. TABLET / LAPTOP PEQUEÑO
   ========================================================================== */

@media (max-width: 1200px) {

    .eft-tour-hero {
        min-height: auto;

        padding:
            160px
            0
            90px;
    }

    .eft-tour-hero__layout {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .eft-tour-hero__content {
        max-width: 720px;
    }

    .eft-tour-hero__card {
        max-width: 520px;
    }
}


/* ==========================================================================
   19. TABLET
   ========================================================================== */

@media (max-width: 900px) {

    .eft-tour-hero {
        padding:
            150px
            0
            80px;
    }

    .eft-tour-container {
        width:
            min(
                92%,
                760px
            );
    }

    .eft-city-hero h1 {
        font-size:
            clamp(
                2.8rem,
                8vw,
                4rem
            );
    }

    .eft-tour-hero__meta {
        max-width: 650px;
    }
}


/* ==========================================================================
   20. MÓVIL
   ========================================================================== */

@media (max-width: 768px) {

    .eft-tour-hero {
        min-height: auto;

        align-items: flex-start;

        padding:
            125px
            0
            56px;
    }

    .eft-tour-container {
        width:
            min(
                calc(100% - 32px),
                620px
            );
    }

    .eft-tour-hero__layout {
        display: block;
    }

    .eft-tour-hero__content {
        max-width: none;
    }

    .eft-tour-hero__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(8, 15, 27, 0.55) 0%,
                rgba(8, 15, 27, 0.76) 40%,
                rgba(7, 13, 25, 0.96) 100%
            );
    }

    .eft-tour-hero__media img {
        object-position: center top;

        transform: none;
    }


    /* ======================================================================
       EYEBROW
       ====================================================================== */

    .eft-city-hero__eyebrow-row {
        margin-bottom: 14px;
    }

    .eft-city-hero__eyebrow,
    .eft-city-hero__featured {
        min-height: 29px;

        padding:
            6px
            11px;

        font-size: 0.62rem;
    }


    /* ======================================================================
       TÍTULO
       ====================================================================== */

    .eft-tour-hero h1,
    .eft-city-hero h1 {
        max-width: 460px;

        font-size:
            clamp(
                2.35rem,
                11vw,
                3.25rem
            );

        line-height: 1;

        letter-spacing: -0.045em;
    }

    .eft-city-hero h1::after {
        width: 44px;

        margin-top: 15px;
    }


    /* ======================================================================
       DESCRIPCIÓN
       ====================================================================== */

    .eft-tour-hero__description,
    .eft-city-hero
    .eft-tour-hero__description {
        max-width: 430px;

        margin-top: 16px;

        font-size: 0.94rem;

        line-height: 1.55;
    }


    /* ======================================================================
       META
       ====================================================================== */

    .eft-tour-hero__meta {
        grid-template-columns: 1fr;

        gap: 10px;

        margin-top: 26px;
    }

    .eft-tour-hero__meta-item {
        min-height: 68px;

        gap: 13px;

        padding:
            13px
            15px;

        border-radius: 16px;

        background:
            rgba(20, 23, 31, 0.62);

        backdrop-filter: blur(14px);
    }

    .eft-tour-hero__meta-item svg {
        width: 22px;
        height: 22px;
    }

    .eft-tour-hero__meta-item small {
        margin-bottom: 3px;

        font-size: 0.61rem;
    }

    .eft-tour-hero__meta-item strong {
        font-size: 0.82rem;
    }


    /* ======================================================================
       ACCIONES
       ====================================================================== */

    .eft-tour-hero__actions {
        flex-direction: column;

        gap: 10px;

        margin-top: 26px;
    }

    .eft-tour-btn {
        width: 100%;

        min-height: 52px;

        padding:
            0
            20px;

        font-size: 0.78rem;
    }


    /* ======================================================================
       CARD
       ====================================================================== */

    .eft-tour-hero__card {
        margin-top: 30px;

        padding: 25px;

        border-radius: 22px;
    }
}


/* ==========================================================================
   21. MÓVIL PEQUEÑO
   ========================================================================== */

@media (max-width: 480px) {

    .eft-tour-hero {
        padding:
            112px
            0
            46px;
    }

    .eft-tour-container {
        width:
            min(
                calc(100% - 24px),
                460px
            );
    }

    .eft-tour-hero h1,
    .eft-city-hero h1 {
        font-size:
            clamp(
                2.15rem,
                12vw,
                2.85rem
            );
    }

    .eft-tour-hero__description,
    .eft-city-hero
    .eft-tour-hero__description {
        font-size: 0.88rem;
    }

    .eft-tour-hero__meta-item {
        min-height: 64px;
    }

    .eft-tour-btn {
        min-height: 50px;
    }
}


/* ==========================================================================
   22. MOVIMIENTO REDUCIDO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .eft-tour-btn {
        transition: none;
    }

    .eft-tour-btn:hover {
        transform: none;
    }

}