/* =========================================
   CTA Join Team Component
   ========================================= */

.dh-cta-join-team {
    padding: 0px 0px 40px 0px;
    width: 100%;
}

.cta-join-team__card {
    background-color: #FFF8F8;
    /* Secondary/White red */
    border-radius: 0;
    /* Full width means no radius on mobile */
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    width: 100%;
}

.cta-join-team__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* From Figma mobile node */
    align-items: center;
}

.cta-join-team__overline {
    color: #DF002F;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.44px;
    text-transform: uppercase;
    margin: 0;
    line-height: 1;
}

.cta-join-team__title {
    color: #29323E;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.cta-join-team__actions {
    display: flex;
    justify-content: center;
    width: 100%;
}

.cta-join-team__button {
    display: flex;
    min-width: 200px;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 200px;
    border: 1.5px solid var(--primary-red-100, #DF002F);
    color: #DF002F;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    background: transparent;
}

.cta-join-team__button:hover {
    background: var(--Secondary-Light-Red, #FCE7E8);
    color: #DF002F;
}

/* Desktop Styles */
@media (min-width: 992px) {
    .dh-cta-join-team {
        padding: 0px 0px 60px 0px;
    }

    .cta-join-team__card {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        max-width: 650px;
        margin: 0 auto;
        /* Center the card itself per Figma "max-width de 650px" instruction */
        padding: 24px 40px;
        /* Adjust padding for desktop bar look */
        border-radius: 200px;
        /* Pill shape implies large radius */
    }

    .cta-join-team__content {
        flex-direction: column;
        /* Keep stacked text inside the left part? Or row? */
        align-items: flex-start;
        gap: 8px;
        /* Tighter gap on desktop? */
    }

    /* 
       Wait, let's look at the desktop hierarchy again. 
       Usually these bars allow text on one line if space permits, 
       but "Unete al equipo" implies overline. 
       Let's stick to stack for text group, but align left.
    */

    .cta-join-team__overline {
        text-align: left;
    }

    .cta-join-team__title {
        text-align: left;
        font-size: 20px;
        /* Same size or larger? Figma said 20px on mobile. Usually same or close. */
    }

    .cta-join-team__actions {
        width: auto;
        /* Shrink to fit button */
    }

    .cta-join-team__button {
        width: auto;
        /* Natural width */
        padding: 12px 24px;
    }
}