/* ─── Pie de página de Neon Community ─────────────────────────────────
 *
 * Vivía dentro del <style> de index.php, así que era el único sitio donde se
 * veía. El resto de páginas o no tenía pie, o tenía una fila de enlaces suelta
 * que decía cosas distintas en cada una.
 *
 * Las clases llevan prefijo pie- y no reutilizan ninguna existente (.footer,
 * .nav-logo) a propósito: este archivo lo cargan páginas con dos hojas de
 * estilo muy distintas -la que la portada lleva incrustada y assets/css/
 * style.css- y una clase compartida se comportaría distinto en cada una.
 *
 * Por lo mismo, los valores que no existen en las dos hojas se declaran aquí
 * como locales: --muted, --muted2 y --maxw solo están en la portada, y
 * --text-muted solo en style.css. Lo que sí es común -y por tanto se usa por
 * variable- son --border, --text, --cyan y --red-rgb.
 */

.pie {
    --pie-muted:  rgba(246, 246, 249, .58);
    --pie-muted2: rgba(246, 246, 249, .38);
    --pie-maxw:   1160px;

    position: relative;   /* por encima del velo de color de body::after */
    z-index: 1;
    padding: 56px 24px 40px;
}

/* Ninguna de las dos hojas subraya los enlaces, pero el navegador sí si
   alguna vez se cae una regla. Aquí se deja dicho. */
.pie a { text-decoration: none; }

.pie-grid {
    max-width: var(--pie-maxw);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    padding-bottom: 34px;
    border-bottom: 1px solid var(--border);
}

/* ---------------- Marca ---------------- */

.pie-brand { max-width: 320px; }

.pie-logo {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .02em;
    color: var(--text);
}

.pie-logo img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(var(--red-rgb), .5));
}

.pie-logo span { color: var(--pie-muted); }

.pie-brand p {
    margin: 0;
    color: var(--pie-muted);
    font-size: 13.5px;
    line-height: 1.6;
}

/* Bloque de f5node: va separado por un filete para que se lea como "además
   de esto", y no como parte de la frase de arriba. */
.pie-f5 {
    display: block;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.pie-f5 span {
    display: block;
    color: var(--pie-muted2);
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 9px;
}

.pie-f5 img {
    display: block;
    width: 150px;
    height: auto;
    opacity: .85;
    transition: opacity .2s;
}

.pie-f5:hover img { opacity: 1; }

/* ---------------- Columnas de enlaces ---------------- */

.pie-cols {
    display: flex;
    gap: 56px;
    flex-wrap: wrap;
}

.pie-col h5 {
    margin: 0 0 14px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--pie-muted2);
    font-weight: 700;
}

.pie-col a {
    display: block;
    color: var(--pie-muted);
    font-size: 14px;
    padding: 5px 0;
    transition: color .2s;
}

.pie-col a:hover { color: var(--cyan); }

/* ---------------- Fila de abajo ---------------- */

.pie-bottom {
    max-width: var(--pie-maxw);
    margin: 26px auto 0;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
    color: var(--pie-muted2);
    font-size: 12.5px;
}

.pie-socials {
    display: flex;
    gap: 10px;
}

.pie-socials a {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pie-muted);
    transition: all .2s;
}

.pie-socials a:hover {
    color: var(--text);
    border-color: rgba(var(--red-rgb), .5);
    transform: translateY(-2px);
}

@media (max-width: 680px) {
    .pie-grid { flex-direction: column; gap: 32px; }
}