/* ==========================================================================
   Módulo: CTA Banner Split
   ========================================================================== */

.module-cta-banner {
    position: relative;
    width: 100%;
    padding: 100px 0;
    /* Usamos un color oscuro base, que tú debes definir en tu style.css si no lo tienes */
    background-color: #212542; /* O usar var(--color-bg-dark) */
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* El pseudo-elemento crea el degradado sólido que cubre la mitad derecha */
.module-cta-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente: Transparente a la izquierda, color sólido oscuro a la derecha */
    background: linear-gradient(to right, color-mix(in srgb, var(--color-primary), 100% transparent) 0%, color-mix(in srgb, var(--color-primary), 5% transparent) 50%, color-mix(in srgb, var(--color-primary), 0.2% transparent) 100%);
    z-index: 1;
}

.module-cta-banner .container {
    position: relative;
    z-index: 2; /* Para que el contenido quede por encima del fondo y el degradado */
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end; /* Empuja el contenido a la derecha */
}

/* Contenedor del contenido (Textos y Botón) */
.cta-banner-content {
    width: 50%; /* Ocupa exactamente la mitad derecha */
    padding-left: 50px; /* Separación del centro virtual */
    color: var(--color-white); /* Aseguramos que los textos sean blancos */
}

.cta-banner-title {
    font-size: var(--text-3xl);
    font-weight: 800;
    margin-bottom: 15px;
    color: var(--color-white);
    line-height: 1.2;
}

.cta-banner-subtitle {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: 30px;
    color: var(--color-white);
}

.cta-banner-desc {
    font-size: var(--text-base);
    line-height: 1.6;
    margin-bottom: 40px;
    color: rgba(255, 255, 255, 0.8); /* Blanco ligeramente transparente */
}

/* Botón (Reutilizamos la clase genérica si la tienes, o la definimos aquí) */
.cta-banner-btn {
    display: inline-block;
    background-color: var(--color-secondary); /* Ej: El rojo de la imagen */
    color: var(--color-primary);
    padding: 15px 35px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    text-decoration: none;
    font-size: var(--text-base);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.cta-banner-btn:hover {
    background-color: color-mix(in srgb, var(--color-secondary), 5% transparent); /* Cambia de color al hacer hover */
    transform: translateY(-3px);
}

/* Responsive */
@media (max-width: 1024px) {
    /* En móviles, el degradado cambia de lado a lado, a de arriba a abajo */
    /* .module-cta-banner::before {
        background: linear-gradient(to bottom, color-mix(in srgb, var(--color-primary), 100% transparent) 0%, color-mix(in srgb, var(--color-primary), 5% transparent) 40%, color-mix(in srgb, var(--color-primary), 60% transparent) 100%);
    } */

    /* .module-cta-banner .container { */
        /* justify-content: center; Centra el contenido */
    /* } */

    /* .cta-banner-content {
        width: 100%;
        padding-left: 0; */
        /* text-align: center; Centra los textos */
        /* margin-top: 150px; Deja espacio para ver la imagen de fondo arriba */
    /* } */

    .module-cta-banner .container{
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    /* En móviles, el degradado cambia de lado a lado, a de arriba a abajo */
    .module-cta-banner::before {
        background: linear-gradient(to bottom, color-mix(in srgb, var(--color-primary), 100% transparent) 0%, color-mix(in srgb, var(--color-primary), 5% transparent) 40%, color-mix(in srgb, var(--color-primary), 60% transparent) 100%);
    }

    .module-cta-banner .container {
        justify-content: center; /*Centra el contenido*/
    }

    .cta-banner-content {
        width: 100%;
        padding-left: 0;
        text-align: center; /*Centra los textos*/
        margin-top: 150px; /*Deja espacio para ver la imagen de fondo arriba*/
    }
}