/* ==========================================================================
   COMPONENTE · Intro / cabecera de página (texto centrado, sin imagen)
   Enfoque Mobile-First. Valores fieles al CSS de Figma (Contacto · Hero).
   ========================================================================== */

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

.intro-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;                      /* bloque título → descripción */
    max-width: 640px;
    margin: 0 auto;
}

.intro-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;                      /* tagline → título */
}

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

.intro-heading {
    margin: 0;
    font-weight: 700;
    font-size: 32px;                /* móvil; 48px en escritorio */
    line-height: 110%;
    letter-spacing: -1.08px;
    color: #0E2C45;                 /* base azul noche; resalte azul con /% %/ */
}

.intro-desc {
    margin: 0;
    max-width: 524px;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.45px;
    color: #6C7981;
}

/* ==========================================================================
   Breakpoints (Mobile-First → min-width)
   ========================================================================== */
@media (min-width: 600px) {
    .intro-heading {
        font-size: 40px;
    }
}

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

    .intro-heading {
        font-size: 48px;
    }
}

/* ==========================================================================
   Variante "gradient": banda con degradado claro + padding simétrico.
   Se define al final para ganar en la cascada al fondo/padding base.
   ========================================================================== */
.intro-block--gradient {
    background: linear-gradient(180deg, #EAF4FA 0%, #FFFFFF 57.21%);
    padding: var(--pt-m, 56px) 0 var(--pb-m, 56px);
}

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