/* ==========================================================
   COMPONENTE C-BANNER
   Variante de layout para hero de landings de integración.
   Se apoya en clases ya existentes de components-base.css:
   c-section (padding), c-tag, c-title, c-description, c-btn.
   Este archivo solo resuelve lo que es propio del banner:
   fondo degradado, agrupación de acciones y la imagen con blob.
========================================================== */

.c-banner{
    background:linear-gradient(135deg, var(--color-blue-50) 0%, var(--background-white) 60%);
    overflow:hidden;
}

/* ==========================================================
   ACTIONS
========================================================== */

.c-banner__actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--space-sm);
    margin-top:var(--space-md);
}

/* ==========================================================
   MEDIA (imagen + blob decorativo)
========================================================== */

.c-banner__media{
    position:relative;
    text-align:center;
}


.c-banner__image{
    position:relative;
    z-index:1;
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-lg);
}

/* ==========================================================
   RESPONSIVE
   (el padding y tamaño de título/descripción ya los resuelve
   c-section / c-title / c-description en components-base.css)
========================================================== */

@media (max-width:991.98px){

    .c-banner{
        text-align:center;
    }

    .c-banner .c-description{
        margin-left:auto;
        margin-right:auto;
    }

    .c-banner__actions{
        justify-content:center;
    }

    .c-banner__media{
        margin-top:var(--space-xl);
    }
}

@media (max-width:767.98px){

    .c-banner__media::before{
        width:70%;
        padding-bottom:70%;
    }
}