/**
 * Hybinet Interface — Footer Global
 * Archivo: assets/css/footer.css
 *
 * Estructura BEM limpia. Tema Claro.
 * Usa tokens de tokens.css para colores, bordes y radios.
 *
 * Tabla de contenidos:
 *   1. Variables locales
 *   2. Wrapper principal
 *   3. Top: cuadrícula de 4 columnas
 *   4. Columna Brand (logo + tagline + redes)
 *   5. Columnas de links
 *   6. Bottom: copyright bar
 *   7. Responsive (tablet 2 cols, móvil 1 col)
 */

/* ─────────────────────────────────────────────────────────────────
   1. VARIABLES LOCALES (sobrescriben solo en el footer)
   ───────────────────────────────────────────────────────────────── */
.hybinet-footer {
    --ft-bg: var(--hybinet-color-bg-secondary, #F4F4F0);
    --ft-bg-bottom: var(--hybinet-color-bg-tertiary, #E5E5E0);
    --ft-text: var(--hybinet-color-text-primary, #1F2A22);
    --ft-text-soft: var(--hybinet-color-text-meta, #828D85);
    --ft-link: var(--hybinet-color-text-secondary, #4B564E);
    --ft-link-hover: var(--hybinet-color-text-primary, #1F2A22);
    --ft-border: var(--hybinet-color-border-soft, #D8D8D2);
    --ft-radius: var(--hybinet-radius-lg, 12px);
    --ft-ease: var(--hybinet-transition-fast, 0.2s ease);
    --ft-gap: 40px;
}

/* ─────────────────────────────────────────────────────────────────
   2. WRAPPER PRINCIPAL
   ───────────────────────────────────────────────────────────────── */
.hybinet-footer {
    width: 100%;
    background: var(--ft-bg);
    border-top: 1px solid var(--ft-border);
    font-family: inherit;
    color: var(--ft-text);
}

/* ─────────────────────────────────────────────────────────────────
   3. TOP: cuadrícula de 4 columnas
   ───────────────────────────────────────────────────────────────── */



.hybinet-footer__top {
    padding-top: 56px;
    padding-bottom: 48px;
}

.hybinet-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    /* Columna brand más ancha */
    gap: var(--ft-gap);
    align-items: start;
}

/* ─────────────────────────────────────────────────────────────────
   4. COLUMNA BRAND — Logo + Tagline + Redes
   ───────────────────────────────────────────────────────────────── */
.hybinet-footer__logo {
    display: block;
    margin-bottom: 14px;
}

/* Hereda el logo del custom logo de WP si aplica */
.hybinet-footer__logo img {
    height: 36px;
    width: auto;
    display: block;
}

.hybinet-footer__site-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ft-text);
    text-decoration: none;
    letter-spacing: -0.02em;
}

.hybinet-footer__tagline {
    font-size: 0.9rem;
    color: var(--ft-text-soft);
    line-height: 1.6;
    margin: 0 0 20px 0;
    max-width: 220px;
}

/* Redes sociales */
.hybinet-footer__social {
    display: flex;
    gap: 8px;
    align-items: center;
}

.hybinet-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    color: var(--ft-link);
    border: 1px solid var(--ft-border);
    background: transparent;
    transition: background var(--ft-ease), color var(--ft-ease), border-color var(--ft-ease);
    position: relative;
}

.hybinet-footer__social-link:hover {
    background: var(--hybinet-color-bg-tertiary);
    color: var(--ft-link-hover);
    border-color: var(--ft-text-soft);
}

.hybinet-footer__social-icon {
    display: block;
    width: 15px;
    height: 15px;
    fill: currentColor;
    /* Iconos de marca: estilo sólido (filled) */
    stroke: none;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────
   5. COLUMNAS DE LINKS
   ───────────────────────────────────────────────────────────────── */
.hybinet-footer__col-title {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ft-text);
    margin: 0 0 18px 0;
    padding: 0;
}

.hybinet-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hybinet-footer__links a {
    font-size: 0.9rem;
    color: var(--ft-link);
    text-decoration: none;
    transition: color var(--ft-ease);
}

.hybinet-footer__links a:hover {
    color: var(--ft-link-hover);
}

/* ─────────────────────────────────────────────────────────────────
   6. BOTTOM: Copyright bar
   ───────────────────────────────────────────────────────────────── */
.hybinet-footer__bottom {
    border-top: 1px solid var(--ft-border);
    background: var(--ft-bg-bottom);
    padding-top: 18px;
    padding-bottom: 18px;
}

.hybinet-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.hybinet-footer__copyright,
.hybinet-footer__credit {
    font-size: 0.82rem;
    color: var(--ft-text-soft);
    margin: 0;
    line-height: 1.5;
}

.hybinet-footer__copyright a {
    color: var(--ft-link);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--ft-ease);
}

.hybinet-footer__copyright a:hover {
    color: var(--ft-link-hover);
}

/* ─────────────────────────────────────────────────────────────────
   7. RESPONSIVE
   ───────────────────────────────────────────────────────────────── */

/* Tablet: 2 columnas (Brand ocupa la mitad, el resto 2 cols) */
@media (max-width: 1024px) {
    .hybinet-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px 40px;
    }

    .hybinet-footer__col--brand {
        grid-column: 1 / -1;
        /* Brand ocupa todo el ancho arriba */
    }

    .hybinet-footer__tagline {
        max-width: 400px;
    }
}

/* Móvil: 1 columna */
@media (max-width: 767px) {
    .hybinet-footer__top {
        padding-top: 40px;
        padding-bottom: 32px;
    }

    .hybinet-footer__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .hybinet-footer__col--brand {
        grid-column: auto;
    }

    .hybinet-footer__tagline {
        max-width: 100%;
    }

    .hybinet-footer__bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}