/* ═══════════════════════════════════════════════════════════════
   Pie del sitio. Marcado de la Fase 1.

   El pie repite la navegación completa: sin JavaScript el panel móvil
   no se abre, y este menú es entonces la vía de navegación. Por eso
   nunca se oculta en móvil.
   ═══════════════════════════════════════════════════════════════ */

footer {
    margin-top: 80px;
    padding: 52px 0 40px;
    background: var(--tinta);
    color: #D9DEE3;
    font-size: 15px;
}

#footer-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 22px;
}

#footer-main {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 36px;
    margin-bottom: 40px;
}

.footer-col-title {
    margin-bottom: 14px;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8A97A3;
}

/* La primera columna rotula el nombre del congreso: va en Fraunces. */
#footer-main > div:first-child .footer-col-title {
    font-family: var(--font-headers);
    font-size: 19px;
    font-weight: 650;
    letter-spacing: -0.015em;
    text-transform: none;
    line-height: 1.2;
    color: #fff;
}

.footer-about {
    max-width: 34em;
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #A9B4BF;
}

.footer-links {
    display: flex;
    flex-direction: column;
    /* El hueco baja de 9 a 2 px porque cada enlace aporta ya 11 px de
       relleno arriba y abajo: el ritmo visual se mantiene y el area
       pulsable crece. */
    gap: 2px;
}

/*
 * Los enlaces del pie se pulsan con el dedo, asi que necesitan area, no
 * solo texto. Con 15 px de letra el renglon medía 16 px de alto: muy por
 * debajo de los 44x44 que recomienda la WCAG. El relleno vertical los
 * lleva a 44 sin tocar la tipografia ni la maqueta.
 *
 * Importa mas de lo habitual aqui: es una web para pacientes oncologicos,
 * y el propio programa del congreso incluye una ponencia sobre neuropatia
 * por quimioterapia, que afecta a la precision de los dedos.
 */
.fl,
#footer-main .footer-links nav a {
    display: block;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    padding: 11px 0;
    transition: color 0.15s ease;
}

.fl:hover,
#footer-main .footer-links nav a:hover {
    color: var(--hueso);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* El menú del pie sale del mismo parcial que el de la cabecera. */
#footer-main .footer-links nav {
    align-items: flex-start;
    justify-content: flex-start;
}

#footer-main .footer-links nav ul {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 9px;
    list-style: none;
}

#footer-main .footer-links nav .separator-line {
    display: none;
}

#footer-main .footer-links nav a[aria-current="page"] {
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── FRANJA INFERIOR ──────────────────────────────────────────── */
#footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

#footer-gepac img {
    /* El logotipo es oscuro sobre blanco: sobre tinta se pasa a blanco. */
    width: 132px;
    height: auto;
    filter: brightness(0) invert(1);
}

#footer-menu ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* Los legales tambien se pulsan con el dedo: 13,5 px de letra daban un
   renglon de 15 px de alto. El relleno vertical los sube a 44 sin mover
   la maqueta, porque la fila del pie ya tenia holgura. */
#footer-menu a {
    display: inline-block;
    color: #A9B4BF;
    font-size: 13.5px;
    text-decoration: none;
    padding: 14px 0;
}

#footer-menu a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#footer-menu ul li.separator-line {
    width: 1px;
    min-width: 1px;
    height: 1em;
    margin: 0 14px;
    background-color: rgba(255, 255, 255, 0.25);
}

#footer-bottom .rrss ul {
    list-style: none;
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
}

#footer-bottom .rrss a {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44x44: el minimo que recomienda la WCAG para un objetivo tactil. */
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

#footer-bottom .rrss a:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Sobre la tinta del pie el contorno morado no se ve. */
footer :focus-visible {
    outline-color: #fff;
}

@media all and (max-width: 900px) {
    footer {
        margin-top: 56px;
        padding: 42px 0 32px;
    }

    #footer-main {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    #footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media all and (max-width: 560px) {
    #footer-menu ul {
        row-gap: 6px;
    }

    #footer-menu ul li.separator-line {
        margin: 0 10px;
    }
}