/* ==========================================================================
   css/mutador/06-footer.css — parte 6/15 de lo que era styles.css
   --------------------------------------------------------------------------
   §19 footer + footer reveal.
   Se carga desde inc/paginas.php (_base) EN ESTE ORDEN: el número del
   archivo es su posición en la cascada. Un bloque nuevo → su propio archivo
   con el número que le toque, y añadirlo a la lista de _base.
   ========================================================================== */

/* ---------- §19 · Footer + footer reveal ---------- */
.foot{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  padding: 80px var(--gutter) 6px;
  font-size: 13px;
  color: var(--mute);
}

/* Footer reveal — fixed al fondo, el contenido scrollea por encima y lo desvela.
   z-index: -1 dentro del stacking context de .frame (z-index:2) lo coloca
   detrás de todas las secciones (que no declaran z-index) pero encima de
   bgmap/bgveil que son hermanos de .frame con z-index menor.
   JS añade padding-bottom al .frame = altura del footer para que
   el último contenido pueda scrollearse por encima hasta despejarlo.   background-image: url("https://mutador.com/images/bg_bn_grain.webp"); background-repeat: no-repeat;background-size: cover;  */
.footer-reveal {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  padding: 3% var(--gutter) 0;
background: var(--footer);
  /* Empieza invisible; JS añade .footer-reveal--visible cuando el scroll
     llega al final y no hay contenido tapando el footer */
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease, background-color .5s ease;
 
}
.footer-reveal--visible {
  opacity: 1;
  pointer-events: auto;
}
body[data-theme="dark"] .footer-reveal {
  background: var(--ink);
}

ul.footer-list{list-style: none}
/* En móvil: volvemos a flujo normal.
   position: fixed en móvil interactúa mal con el chrome del browser
   (barra de dirección, teclado virtual) y crea huecos en blanco. */
@media (max-width: 720px) {
  .footer-reveal {
    position: relative;
    padding: 60px var(--gutter) 32px;
  }
}
.foot .col{ font-style: italic; }
.foot .h{
  font-family: var(--mono); font-size: 11px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--ink); font-style:normal; margin-bottom:10px; 
}
body[data-theme="dark"] .foot .h{ color: var(--paper); }
.foot .c1{ grid-column: 1 / span 3;padding-right: 20% }
.foot .c2{ grid-column: 5 / span 2; }
.foot .c3{ grid-column: 7 / span 2; }
.foot .c4{ grid-column: 11 / span 3; text-align:right; }
.foot a{ color: var(--ink); }
body[data-theme="dark"] .foot a{ color: var(--paper); }
.foot a:hover{ color: var(--accent); }

.sig{
  grid-column: 1 / -1;
  display:flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size:11px; letter-spacing:.08em; text-transform: uppercase;
  color: var(--mute);
  padding-top: 22px; border-top: 1px solid var(--rule); margin-top: 40px;
}
.sig .big{
  font-family: var(--display); font-size: 88px; letter-spacing:-.02em;
  color: var(--ink); line-height:1; text-transform: none;
}
body[data-theme="dark"] .sig .big{ color: var(--paper); }