/* ==========================================================================
   tedic/footer-block — CSS del plugin (no legacy custom.css)
   ==========================================================================
   Este CSS vive con el plugin. Cualquier cambio al footer-block debe
   hacerse aca, NO en resources/css/custom.css.
   ========================================================================== */

/* CTA banner interno (jul-24 Wave 11) */
.footer-block__cta {
    position: relative;
    overflow: hidden;
    /* Wave 105 jul-27: balance optico — padding-bottom menor para
       alinear texto con el boton CTA. Vision reporto "padding inferior
       excesivo". */
    padding: 40px 0 28px;
    color: #fff;
    /* galaxy/space gradient + color (fallback). Si el template PHP pasa
       background-image inline (ctaBgImageUrl), ese style gana sobre CSS */
    background-color: #0d0d1f;
    background-image:
        radial-gradient(ellipse at 20% 30%, rgba(108, 76, 245, 0.5) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 65%, rgba(245, 100, 130, 0.35) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 50%, rgba(86, 79, 255, 0.25) 0%, transparent 70%),
        linear-gradient(135deg, #0d0d1f 0%, #1a1a2e 50%, #2d1b4e 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Pseudo-element overlay para tapar areas blancas/transparentes del PNG
   y mantener el efecto galaxia */
.footer-block__cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(108, 76, 245, 0.45) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 65%, rgba(245, 100, 130, 0.30) 0%, transparent 55%),
        linear-gradient(135deg, rgba(13, 13, 31, 0.55) 0%, rgba(26, 26, 46, 0.55) 50%, rgba(45, 27, 78, 0.55) 100%);
    z-index: 0;
    pointer-events: none;
}
.footer-block__cta-inner {
    position: relative;
    z-index: 1;
}
.footer-block__cta-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}
.footer-block__cta-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
}
.footer-block__cta-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.footer-block__cta-content {
    flex: 1 1 400px;
    max-width: 640px;
}
.footer-block__cta-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.2;
    color: #fff;
}
.footer-block__cta-text {
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
}
.footer-block__cta-action {
    flex: 0 0 auto;
}
.footer-block__cta-btn {
    display: inline-block;
    padding: 14px 28px;
    /* Wave 33 jul-25 ~26:40Z: spec Figma pide pill violeta filled con texto
       blanco + flecha →. Invertir Wave 33 v2 (que habia puesto white outlined). */
    background: var(--color-brand-primary, #564FFF);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-radius: 30px;
    border: none;
    transition: background 0.2s, opacity 0.2s;
    white-space: nowrap;
}
.footer-block__cta-btn:hover {
    background: var(--color-brand-primary-hover, #312E81);
    opacity: 0.95;
}
@media (max-width: 768px) {
    .footer-block__cta {
        padding: 40px 0;
    }
    .footer-block__cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer-block__cta-title {
        font-size: 22px;
    }
    .footer-block__cta-btn {
        align-self: flex-start;
    }
}

/* Cooperantes / Los que apoyan */
.footer-block__cooperantes {
    /* Wave 85 jul-27: el bloque tenía 289px de alto con demasiado gap vertical.
       Reducido de 96px → 40px (40+40=80 vs 96+96=192 → block ~150px vs ~290px). */
    padding: 40px 0;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    min-height: 0;
}
.footer-block__cooperantes-inner {
    /* Wave 14: ref visual dice label ARRIBA, logos ABAJO en fila horizontal.
       Antes era flex-direction: row (label izq + logos der). */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
}
.footer-block__cooperantes-title {
    /* elecciones jul-24 Wave 20: color pedido por el usuario #6b7494
       (gris medio, igual al color de subtitulos del theme). */
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7494;
    margin: 0;
    flex: 0 0 auto;
    text-align: left;
    align-self: flex-start;
}
.footer-block__cooperantes-logos {
    display: flex;
    /* Wave 106 jul-27: Vision v2 (r2 feedback) recomienda 48-52px para
       balance optimo entre NED (ancho) y Tactical Tech (compacto).
       Iteracion: 40px → 64px → 52px (sweet spot). */
    gap: 52px;
    align-items: center;
    flex-wrap: wrap;
    flex: 0 0 auto;
}
.footer-block__cooperantes-logo-item {
    flex: 0 0 auto;
}
.footer-block__cooperantes-logo-item img {
    height: 48px;
    width: auto;
    object-fit: contain;
    display: block;
}


/* Newsletter form fallback nativo (jul-24 Wave 19)
   Cuando no hay MC4WP, renderizamos un form HTML simple con estas clases.
   Los estilos para .mc4wp-* viven en resources/css/custom.css (legacy). */
.footer-block__newsletter-form {
    display: flex;
    align-items: stretch;
    gap: 0;
    /* elecciones jul-24 Wave 20: 30% mas angosto en desktop, pedido literal.
       La referencia de Figma muestra el form ocupando ~70% del ancho de su
       columna (~490px de 700px). Hacemos width=70% + max-width 442px para
       que respete la proporcion de la referencia pero se mantenga consistente. */
    width: 70%;
    max-width: 442px;
    flex-wrap: nowrap;
}
.footer-block__newsletter-input {
    flex: 1;
    min-width: 0;
    border: 1.5px solid #1A1A1A;
    border-right: none;
    border-radius: 30px 0 0 30px;
    padding: 11px 22px;
    font-size: 14px;
    background: transparent;
    outline: none;
    color: #1A1A1A;
    font-family: inherit;
    transition: border-color 0.2s;
}
.footer-block__newsletter-input:focus {
    border-color: var(--color-brand-primary, #564FFF);
    border-right: none;
}
.footer-block__newsletter-input::placeholder {
    color: #aaa;
}
.footer-block__newsletter-btn {
    border: 1.5px solid var(--color-brand-primary, #564FFF);
    border-radius: 0 30px 30px 0;
    padding: 11px 24px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--color-brand-primary, #564FFF);
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    font-family: inherit;
    transition: background 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.footer-block__newsletter-btn:hover {
    background: var(--color-brand-primary-hover, #312E81);
    border-color: var(--color-brand-primary-hover, #312E81);
}

/* Footer main polish (elecciones jul-24 Wave 20)
   - +100px de aire al final del footer (32px existente + 100px = 132px)
   - menu levemente mayor y con ritmo vertical como la referencia
   - social icons ligeramente mayores y mas separados */
.footer-block__main {
    padding-bottom: 132px;
}
.footer-block__main .footer-block__nav-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.footer-block__main .footer-block__nav-list a {
    font-size: 17px;
    line-height: 1.5;
}
.footer-block__main .footer-block__social {
    gap: 20px;
}
.footer-block__main .footer-block__social.size-sm img {
    width: 20px;
    height: 20px;
}
.footer-block__newsletter-title {
    font-size: 18px;
    line-height: 1.4;
}

/* El newsletter debe volver a ancho completo en mobile. */
@media (max-width: 768px) {
    .footer-block__newsletter-form {
        width: 100%;
        max-width: none;
    }
    .footer-block__main {
        padding-bottom: 132px;
    }
}