/* ==========================================================================
   FASE H2 — VARIANTES DE FOOTER (chrome default)
   --------------------------------------------------------------------------
   SOLO composición/maquetación del footer del CMS. NO redefine colores base
   (los aporta main.css) ni toca sus reglas. Se carga DESPUÉS de main.css.
   Estructura esperada (site-footer.php):
     <footer class="footer fv-<variante> fmw-<ancho>">
        <div class="contenedor footer-inner"> … columnas … </div>
     </footer>
     <div class="footer-bottom-bar"> … </div>
   Variantes: cols4 (columns-4), cols3 (columns-3), simple, centered.
   ========================================================================== */

/* Contenedor interno: apilado en móvil (base para todas las variantes). */
.footer .footer-inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Logo en imagen (si se subió uno). */
.footer .logo-footer-img {
    max-height: 46px;
    width: auto;
    display: block;
}

/* Bloque de marca: ancho preferente en layouts de columnas. */
.footer .footer-col--brand p {
    max-width: 34ch;
}

/* ── Escritorio: layouts por variante ─────────────────────────────────────── */
@media (min-width: 768px) {

    /* Cuatro / tres columnas: fila con marca más ancha y el resto equitativo.
       Flex-wrap + flex-basis mínimos = se adapta si una columna se omite. */
    .footer.fv-columns-4 .footer-inner,
    .footer.fv-columns-3 .footer-inner {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 2.5rem;
    }
    .footer.fv-columns-4 .footer-col,
    .footer.fv-columns-3 .footer-col {
        flex: 1 1 150px;
        min-width: 140px;
        margin-bottom: 0;
    }
    .footer.fv-columns-4 .footer-col--brand,
    .footer.fv-columns-3 .footer-col--brand {
        flex: 1.7 1 240px;
        min-width: 220px;
    }

    /* Simple: una sola fila, marca a la izquierda y redes a la derecha. */
    .footer.fv-simple .footer-inner {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
    }
    .footer.fv-simple .footer-col--brand { margin-bottom: 0; }
    .footer.fv-simple .redes-sociales { margin-top: 0; }

    /* Centrado: todo apilado y centrado. */
    .footer.fv-centered .footer-inner {
        align-items: center;
        text-align: center;
    }
    .footer.fv-centered .footer-col { margin-bottom: 0; }
    .footer.fv-centered .redes-sociales { justify-content: center; }
    .footer.fv-centered .contacto-footer li { justify-content: center; }
    .footer.fv-centered .footer-col--brand p { max-width: 52ch; margin-inline: auto; }
}

/* Centrado también apila centrado en móvil. */
.footer.fv-centered .footer-inner { align-items: center; text-align: center; }
.footer.fv-centered .redes-sociales { justify-content: center; }
.footer.fv-centered .contacto-footer li { justify-content: center; }

/* FIX (FASE UX-16): el logotipo (imagen) es display:block y width:auto, así que
   text-align:center NO lo centra → quedaba "recargado a la izquierda" del bloque
   de marca. Se centra explícitamente el bloque del logo y su imagen. */
.footer.fv-centered .logo-footer,
.footer.fv-centered .logo-footer a { text-align: center; }
.footer.fv-centered .logo-footer-img { margin-inline: auto; }

/* ── Ancho del footer (mismo criterio que el header) ──────────────────────── */
/* .footer-inner ES el .contenedor del footer; ampliamos su límite por variante. */
.footer.fmw-wide .footer-inner {
    max-width: 1400px;
    margin-inline: auto;
}
.footer.fmw-full .footer-inner {
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: 32px;
}
/* La barra inferior sigue al mismo ancho para que copyright y enlaces alineen. */
.footer.fmw-wide + .footer-bottom-bar .contenedor { max-width: 1400px; }
.footer.fmw-full + .footer-bottom-bar .contenedor {
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: 32px;
}