/* ==========================================================================
   RECOMENDACIONES DEL TOUR - EUROFREETOUR
   ========================================================================== */

.eft-tour-recommendations {
    position: relative;

    padding:
        clamp(82px, 9vw, 138px)
        0;

    overflow: hidden;

    background: #ffffff;
}

/* ==========================================================================
   DISTRIBUCIÓN
   ========================================================================== */

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

    display: grid;
    grid-template-columns:
        minmax(300px, 0.76fr)
        minmax(0, 1.24fr);

    align-items: start;
    gap:
        clamp(48px, 7vw, 110px);
}


/* ==========================================================================
   INTRODUCCIÓN
   ========================================================================== */

.eft-tour-recommendations__intro {
    max-width: 580px;
}

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

    color: #111827;

    font-family: "Poppins", sans-serif;
    font-size:
        clamp(
            2.25rem,
            4vw,
            4rem
        );

    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.eft-tour-recommendations__intro > p {
    margin:
        26px
        0
        0;

    color: #687386;

    font-size: 1rem;
    line-height: 1.85;
}


/* ==========================================================================
   TARJETA DE APOYO
   ========================================================================== */

.eft-tour-recommendations__support {
    display: flex;

    align-items: flex-start;

    gap: 16px;

    margin-top: 34px;

    padding:
        20px
        22px;

    border:
        1px solid #e4e7ec;

    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 14px 32px
        rgba(17, 24, 39, 0.05);
}

.eft-tour-recommendations__support-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: inline-flex;

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

    border-radius: 15px;

    background: #DE316D;

    color: #ffffff;
}

.eft-tour-recommendations__support-icon svg {
    width: 23px;
    height: 23px;

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

.eft-tour-recommendations__support strong {
    display: block;

    color: #222b3a;

    font-size: 0.92rem;
    font-weight: 700;
}

.eft-tour-recommendations__support p {
    margin:
        6px
        0
        0;

    color: #778093;

    font-size: 0.86rem;
    line-height: 1.6;
}


/* ==========================================================================
   LISTA
   ========================================================================== */

.eft-tour-recommendations__list {
    display: grid;
    gap: 16px;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* ==========================================================================
   RECOMENDACIÓN
   ========================================================================== */

.eft-tour-recommendation {
    position: relative;

    min-width: 0;

    display: grid;
    grid-template-columns:
        54px
        minmax(0, 1fr)
        44px;

    align-items: center;
    gap: 20px;

    padding:
        24px
        26px;

    overflow: hidden;

    border:
        1px solid
        #DE316D;

    border-radius: 24px;

    background: #DE316D;

    box-shadow:
        0 16px 34px
        rgba(222, 49, 109, 0.14);

    transition:
        transform 0.32s ease,
        box-shadow 0.32s ease;
}


.eft-tour-recommendation:hover {
    transform: translateX(6px);

    box-shadow:
        0 24px 48px
        rgba(222, 49, 109, 0.2);
}


/* ==========================================================================
   NÚMERO
   ========================================================================== */
   
.eft-tour-recommendation__number {
    color: rgba(255, 255, 255, 0.72);

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

    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}


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

.eft-tour-recommendation__content {
    min-width: 0;
}

.eft-tour-recommendation__content h3 {
    margin: 0;

    color: #ffffff;

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

    font-size: 0.82rem;
    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}

.eft-tour-recommendation__content p {
    margin:
        8px
        0
        0;

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

    font-size: 0.96rem;
    line-height: 1.7;
}


/* ==========================================================================
   ICONO FINAL
   ========================================================================== */

.eft-tour-recommendation__icon {
    width: 42px;
    height: 42px;

    display: inline-flex;

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

    border-radius: 50%;

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

    color: #ffffff;
}

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

    fill: none;
    stroke: currentColor;

    stroke-width: 2.2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


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

@media (max-width: 1050px) {

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

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


@media (max-width: 680px) {

    .eft-tour-recommendations {
        padding:
            76px
            0;
    }

    .eft-tour-recommendation {
        grid-template-columns:
            44px
            minmax(0, 1fr);

        gap:
            16px;

        padding:
            22px
            20px;
    }

    .eft-tour-recommendation__icon {
        display: none;
    }

    .eft-tour-recommendation:hover {
        transform:
            translateY(-4px);
    }
}


@media (max-width: 460px) {

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

    .eft-tour-recommendation__number {
        font-size: 1.2rem;
    }
}