/**
 * Banner CTA — transversal CTA banner module.
 *
 * Layout Figma: grid de 12 columnas.
 *   - Columna 1 y 12  → gutters (vacías)
 *   - Columnas 2–6    → contenedor de texto (izquierda)
 *   - Columnas 7–11   → imagen del producto (derecha)
 *
 * La imagen sobresale (bleed) del recuadro naranja por arriba/abajo, por eso
 * NO usamos overflow:hidden en .banner-cta.
 *
 * Tipografías desde tokens.css (Heading 1 / Body Regular).
 * Color de texto desde tokens.css (--color-white).
 * Botones desde buttons.css (.btn .btn--primary/.btn--secondary .btn--white).
 */

.banner-cta {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    column-gap: 1.5rem;
    background: var(--color-gradient-orange);
    border-radius: 24px;
    color: var(--color-white);
}

/* -------------------------------------------------------------------------
   CONTENIDO (columnas 2–6)
   ---------------------------------------------------------------------- */
.banner-cta__content {
    grid-column: 2 / span 5;     /* columnas 2, 3, 4, 5, 6 */
    min-width: 0;
    padding-block: 3.5em;
}

.banner-cta__title {
    margin: 0 0 24px;
    color: var(--color-white);

    font-family:    var(--typo-heading1-font-family);
    font-size:      var(--typo-heading1-font-size);
    font-weight:    var(--typo-heading1-font-weight);
    line-height:    var(--typo-heading1-line-height);
    letter-spacing: var(--typo-heading1-letter-spacing);
    text-transform: var(--typo-heading1-text-transform);
}

.banner-cta__description {
    margin: 0 0 36px;
    color: var(--color-white);

    font-family:    var(--typo-big-body-regular-font-family);
    font-size:      var(--typo-big-body-regular-font-size);
    font-weight:    var(--typo-big-body-regular-font-weight);
    line-height:    var(--typo-big-body-regular-line-height);
    letter-spacing: var(--typo-big-body-regular-letter-spacing);
    text-transform: var(--typo-big-body-regular-text-transform);
}

/* -------------------------------------------------------------------------
   ACCIONES / BOTONES
   Usan las clases de buttons.css. Sobreescribimos el width:100% de la base
   para que sean pills al tamaño del contenido, en una sola fila.

   Fallback defensivo: si la regla base .btn de buttons.css no cargara,
   estas propiedades garantizan que el botón conserve su forma de pill.
   ---------------------------------------------------------------------- */
.banner-cta__actions {
    display: flex;
    flex-wrap: nowrap;           /* ambos botones en la misma fila */
    align-items: center;
    gap: 12px;                   /* separacion exacta entre botones */
}

.banner-cta__actions .btn {
    width: auto;                 /* anula el width:100% de buttons.css */
    flex: 0 0 auto;              /* pill al tamaño del contenido, sin estirar */

    /* Fallback de forma (solo actúan si buttons.css no las definió) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}

.banner-cta__btn-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.banner-cta__btn-icon svg {
    width: 100%;
    height: 100%;
}

/* -------------------------------------------------------------------------
   IMAGEN (columnas 7–12)
   Sobresale del recuadro con margin-block negativo (sin overflow:hidden en
   el contenedor) y se alinea a la derecha.
   ---------------------------------------------------------------------- */
.banner-cta__media {
    grid-column: 7 / span 6;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-block: -4em;
}

.banner-cta__image {
    display: block;
    max-width: 100%;
    height: auto;
}

/* -------------------------------------------------------------------------
   MOBILE
   ---------------------------------------------------------------------- */
@media (max-width: 768px) {
    .banner-cta {
        grid-template-columns: 1fr;
        column-gap: 0;
        padding: 2em 1.5em;
        text-align: center;
    }

    .banner-cta__content {
        grid-column: 1 / -1;
        padding-block: 0;
    }

    .banner-cta__actions {
        flex-wrap: wrap;         /* en mobile permitimos que se apilen si no entran */
        justify-content: center;
    }

    .banner-cta__media {
        grid-column: 1 / -1;
        margin-block: 0;
        margin-top: 1.5em;
        justify-content: center;
    }

    .banner-cta__image {
        width: 260px;
        max-height: 260px;
    }
}