/* ==========================================================================
   COMPONENTE · Banner CTA (tarjeta con imagen de fondo + degradado) — reutilizable
   Enfoque Mobile-First. Default: degradado 0deg + descripción 14px/160%.
   ========================================================================== */

.cta-block {
    padding: var(--pt-m, 32px) 0 var(--pb-m, 32px);
    background-color: #FFFFFF;
    box-sizing: border-box;
    font-family: 'Be Vietnam Pro', system-ui, sans-serif;
}

/* ---- Tarjeta contenedora del fondo ---- */
.cta-card {
    position: relative;
    overflow: hidden;               /* recorta el degradado a las esquinas */
    width: 100%;
    padding: 50px 24px;
    box-sizing: border-box;

    background-color: #08192B;      /* fallback si no hay imagen */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 20px;

    display: flex;
    align-items: center;
}

/* Degradado independiente de la foto. En móvil, vertical para legibilidad. */
.cta-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 25, 43, 0.9) 0%, rgba(15, 41, 67, 0.4) 100%);
    z-index: 1;
}

.cta-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;                      /* grupo de texto → botón */
    width: 100%;
}

/* Agrupa título + descripción (Figma: gap 20px) */
.cta-text-block {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.cta-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;                      /* sobretítulo → titular */
    max-width: 721px;
    width: 100%;
}

.cta-tagline {
    font-weight: 500;
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 2.16px;
    text-transform: uppercase;
}

.cta-heading {
    margin: 0;
    font-weight: 600;
    font-size: 24px;                /* móvil; 32px en escritorio */
    line-height: 120%;
    letter-spacing: -0.72px;
    color: #FFFFFF;
}

.cta-desc {
    max-width: 525px;
    width: 100%;
    font-weight: 400;
    font-size: 14px;                /* default; 16px con .cta-block--desc-lg */
    line-height: 160%;
    letter-spacing: -0.45px;
    color: #F2F2F3;
}

.cta-desc p { margin: 0 0 12px; }
.cta-desc p:last-child { margin-bottom: 0; }

/* Variante descripción grande (Home S2/S4) */
.cta-block--desc-lg .cta-desc {
    font-size: 16px;
    line-height: 140%;
}

/* ---- Botón secundario (tono crema) ---- */
.cta-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    box-sizing: border-box;

    background: #F8F6F1;
    border: 1px solid #D7D9DB;
    border-radius: 24px;

    color: #000000;
    font-weight: 500;
    font-size: 14px;
    line-height: 110%;
    letter-spacing: -0.154px;
    text-decoration: none;
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.cta-btn-secondary:hover {
    background: #FFFFFF;
    border-color: #000000;
    transform: translateY(-1px);
}

/* ==========================================================================
   Escritorio (Mobile-First → min-width)
   ========================================================================== */
@media (min-width: 768px) {
    .cta-block {
        padding: var(--pt-t, var(--pt-m, 32px)) 0 var(--pb-t, var(--pb-m, 32px));
    }
}

@media (min-width: 992px) {
    .cta-block {
        padding: var(--pt-d, 50px) 0 var(--pb-d, 50px);
    }

    .cta-card {
        height: 500px;              /* alto fijo dictado por Figma */
        padding: 80px 53px;
        border-radius: 29.875px;
    }

    /* Degradado por defecto: 0deg (oscuro abajo → transparente arriba) */
    .cta-card::before {
        background: linear-gradient(0deg, rgba(8, 25, 43, 0.85) 0%, rgba(3, 30, 57, 0.6) 50%, rgba(15, 41, 67, 0) 100%);
    }

    /* Variante degradado horizontal 90deg (Home S2) */
    .cta-block--gradient-h .cta-card::before {
        background: linear-gradient(90deg, rgba(8, 25, 43, 0.85) 0%, rgba(3, 30, 57, 0.6) 50%, rgba(15, 41, 67, 0) 100%);
    }

    .cta-content {
        justify-content: center;
        gap: 36px;
    }

    .cta-heading {
        font-size: 32px;
    }
}