/* ════════════════════════════════════════════════════
   CF PRE-FOOTER — FOOTER DEL SITIO
   Ruta: prefooter/assets/css/cf-pf-footer.css
════════════════════════════════════════════════════ */

/* Contenedor centrado, con el mismo ancho real que usa el theme
   (--theme-container-width / --theme-normal-container-max-width son
   las variables que Blocksy usa para su propio .ct-container) — así
   esta sección queda alineada con el resto del sitio, en vez de un
   ancho fijo propio. 1200px queda solo como fallback para un theme
   sin esas variables (este plugin no depende de ningún theme en
   particular para funcionar). */
.cf-ancho-maximo {
    width: var(--theme-container-width, 100%);
    max-width: var(--theme-normal-container-max-width, 1200px);
    margin-left: auto;
    margin-right: auto;
}

.hb-pf-footer { display: block; }

/* ── FILA SUPERIOR: 4 columnas ──
   --hb-pf-footer-padding-top: "Espacio arriba del footer" del admin
   (ver cf-prefooter-footer.php), default 20px — reemplaza el valor
   fijo (48px) que había antes. El resto del padding de esta fila
   (36px abajo, 0 a los costados) es interno del footer y no se tocó. */
.hb-pf-footer-top { padding: var(--hb-pf-footer-padding-top, 20px) 0 36px; }

.hb-pf-footer-cols {
    display: grid;
    /* auto-fit en vez de un número fijo: si falta alguna columna
       (p.ej. sin redes sociales configuradas) las demás se
       redistribuyen para llenar el ancho, en vez de dejar huecos. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    padding: 0 20px;
}

.hb-pf-footer-col { min-width: 0; }

.hb-pf-footer-col-title {
    color: var(--hb-pf-footer-title-color, #fff);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 16px;
}

.hb-pf-footer-logo {
    max-width: 180px;
    max-height: 80px;
    height: auto;
    width: auto;
    display: block;
}

.hb-pf-footer-address {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--hb-pf-footer-content-color, #ccc);
    font-size: .85rem;
    line-height: 1.6;
    margin: 0 0 12px;
}

.hb-pf-footer-contact-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--hb-pf-footer-link-color, #fff);
    text-decoration: none;
    font-size: .85rem;
    margin-bottom: 8px;
}
.hb-pf-footer-contact-link:hover { text-decoration: underline; }

.hb-pf-footer-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    opacity: .85;
}
.hb-pf-footer-icon svg { width: 100%; height: 100%; }

@media (max-width: 768px) {
    .hb-pf-footer-address,
    .hb-pf-footer-contact-link { justify-content: center; }
}

/* gap en vez de margin-bottom en li Y a: el menú de WordPress genera
   <li><a>…</a></li>, así que poner margen en ambos duplicaba el espacio
   entre enlaces (10px + 10px = 20px reales). Con gap se controla una
   sola vez en el contenedor, sin importar si el hijo es <li> o <a>. */
.hb-pf-footer-links { display: flex; flex-direction: column; gap: 8px; }
.hb-pf-footer-links li,
.hb-pf-footer-links a { list-style: none; margin: 0; padding: 0; }
.hb-pf-footer-links a {
    display: inline-block;
    color: var(--hb-pf-footer-link-color, #fff);
    text-decoration: none;
    font-size: .85rem;
}
.hb-pf-footer-links a:hover { text-decoration: underline; }

.hb-pf-footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hb-pf-footer-social {
    width: 38px;
    height: 38px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hb-pf-footer-link-color, #fff);
    transition: background .2s, transform .15s;
}
.hb-pf-footer-social:hover { background: rgba(255, 255, 255, .25); transform: translateY(-2px); }
.hb-pf-footer-social svg { width: 18px; height: 18px; }
.hb-pf-footer-social img { width: 18px; height: 18px; object-fit: contain; }

/* ── FILA INFERIOR: copyright ── */
.hb-pf-footer-bottom { padding: 16px 20px; }

.hb-pf-footer-copyright {
    color: var(--hb-pf-footer-content-color, #ccc);
    font-size: .78rem;
    text-align: center;
    margin: 0;
}

/* ── RESPONSIVE: columnas apiladas ── */
@media (max-width: 768px) {
    .hb-pf-footer-top { padding: var(--hb-pf-footer-padding-top, 20px) 0 28px; }
    .hb-pf-footer-cols {
        grid-template-columns: 1fr;
        gap: 28px;
        text-align: center;
    }
    .hb-pf-footer-col-logo { display: flex; justify-content: center; }
    .hb-pf-footer-socials { justify-content: center; }
}