/* ──────────────────────────────────────────────────────────────────────────
   FOOTER · estilos compartidos por todas las páginas

   Antes cada página llevaba su propia copia de estas reglas en su <style>
   inline, y las tres habían divergido: opacidades distintas (.4, .5, .55),
   padding distinto (24px 20px vs 28px 0) y clases que solo existían en
   algunas (.foot-links a en index, .foot-a en maestro y galería).

   Editar aquí cambia el footer de todo el sitio. Si se añade una página
   nueva, basta con enlazar este archivo y copiar el bloque <footer> de
   cualquier página existente.

   Los valores de color son los del bloque "ACCESIBILIDAD: contraste
   mejorado" de maestro/: se eliminaron los grises con opacidad < 0.60 en
   texto de lectura, así que esos son los buenos y no los originales.
   ────────────────────────────────────────────────────────────────────────── */

footer {
  background: #050505;
  padding: 28px 20px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.foot-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.foot-logo {
  font-family: 'Anton', sans-serif;
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, .68);
}

.foot-copy {
  font-size: 11px;
  color: rgba(255, 255, 255, .58);
}

.foot-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

/* `.foot-a` y `.foot-links a` conviven porque el markup histórico usaba una
   u otra según la página. Ahora todas usan .foot-a, pero el selector de
   descendencia se mantiene por si queda algún enlace sin clase. */
.foot-a,
.foot-links a {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .65);
  transition: color .2s;
}

.foot-a:hover,
.foot-links a:hover {
  color: var(--marfil, var(--w, #F5F0E8));
}

/* Enlace al recurso externo · se diferencia del resto de enlaces del footer
   (que son navegación interna) con un separador sutil, para que se lea como
   lo que es: material de consulta, no una página más del club. */
.foot-recurso {
  font-size: 11px;
  color: rgba(255, 255, 255, .45);
}

.foot-recurso a {
  color: rgba(255, 255, 255, .62);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  transition: color .2s, border-color .2s;
}

.foot-recurso a:hover {
  color: var(--marfil, var(--w, #F5F0E8));
  border-bottom-color: rgba(237, 234, 228, .55);
}

/* Nota al pie de la sección Programas (index) · enlaza el material de estudio.
   Vive aquí y no en el <style> de index.html para que los estilos de los
   enlaces a recursos externos estén todos en el mismo sitio. */
.prog-nota {
  max-width: 720px;
  margin: 40px auto 0;
  padding: 0 20px;
  font-size: 13px;
  line-height: 1.75;
  text-align: center;
  color: rgba(245, 240, 232, .62);
}

.prog-nota a {
  color: rgba(245, 240, 232, .82);
  border-bottom: 1px solid rgba(184, 154, 69, .45);
  transition: color .2s, border-color .2s;
}

.prog-nota a:hover {
  color: var(--marfil, var(--w, #F5F0E8));
  border-bottom-color: var(--dorado, #B89A45);
}

@media (min-width: 768px) {
  .prog-nota {
    margin-top: 56px;
    font-size: 14px;
  }
}

/* ── TABLET+ · el footer pasa a una sola fila ── */
@media (min-width: 768px) {
  footer {
    padding: 28px 44px;
  }

  .foot-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 1080px) {
  footer {
    padding: 32px 52px;
  }
}