/* ==========================================================================
   COMPONENTE · Split "texto + imagen" (dos columnas) — reutilizable
   Enfoque Mobile-First. Valores de Figma (Profesionales · Sección 1).
   ========================================================================== */

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

.split-block .sec-custom-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ---- Columna de texto ---- */
.split-block-text {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.split-block-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

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

.split-block-heading {
    margin: 0;
    font-weight: 600;
    font-size: 28px;            /* móvil; 32px en escritorio */
    line-height: 120%;
    letter-spacing: -0.72px;
    text-wrap-style: balance;
    color: #27292B;
}

.split-block-desc {
    /* Sin max-width en apilado (móvil/tablet): ocupa todo el ancho.
       El límite de 496px es solo para la columna de escritorio (ver ≥992). */
    font-weight: 400;
    font-size: 14px;
    line-height: 160%;
    letter-spacing: -0.45px;
    color: #6C7981;
}

.split-block-desc p { margin: 0 0 16px; }
.split-block-desc p:last-child { margin-bottom: 0; }

/* ---- Botón primario ---- */
.split-block-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: #0E2C45;
    border-radius: 24px;
    color: #FFFFFF;
    font-weight: 500;
    font-size: 14px;
    line-height: 110%;
    letter-spacing: -0.154px;
    text-decoration: none;
    transition: background-color .25s ease, transform .25s ease;
}

.split-block-btn:hover {
    background: #006491;
    transform: translateY(-1px);
}

.split-block-btn-arrow {
    display: inline-flex;
    width: 12px;
    height: 12px;
}

/* ---- Variante compacta (Home): gaps 54/24, descripción a ancho completo ---- */
.split-block--tight .split-block-text { gap: 24px; }
.split-block--tight .split-block-desc { max-width: none; }

/* ---- Columna de imagen ---- */
.split-block-image {
    width: 100%;
}

.split-block-img,
.split-block-img-placeholder {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 569 / 566;   /* ~cuadrada, según Figma */
    object-fit: cover;
    border-radius: 29.875px;
}

.split-block-img-placeholder {
    background-color: #E8E4DA;
}

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

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

    .split-block .sec-custom-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 80px;
    }

    /* Variante con la imagen a la izquierda */
    .split-block--img-left .sec-custom-container {
        flex-direction: row-reverse;
    }

    .split-block-text  { max-width: 577px; }
    .split-block-image { max-width: 569px; }

    /* Límite de la descripción dentro de la columna de texto (Figma) */
    .split-block-desc { max-width: 496px; }

    .split-block-heading { font-size: 32px; }

    /* Variante compacta (Home): separación entre columnas de 54px */
    .split-block--tight .sec-custom-container { gap: 54px; }
}

/* ==========================================================================
   Variante "band": banda de fondo gris a sangre con padding simétrico.
   Se define al final para ganar en la cascada al padding/fondo base.
   ========================================================================== */
.split-block--band {
    background-color: #F2F2F3;
    padding: var(--pt-m, 32px) 0 var(--pb-m, 32px);
}

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