/* Pie del sitio, dos propuestas que comparten portada y blog. Lleva sus propios valores para verse igual en las dos páginas.
   A: una línea útil (blog, privacidad y año). B: el directorio de latón del lobby, con la página actual marcada. */
.pie-x{--pie-fondo:#221b16;--pie-texto:#efe8dc;--pie-suave:#c8c2b8;--pie-cobre:#e08a4a;
  position:relative;z-index:1;background:var(--pie-fondo);color:var(--pie-suave);font:400 15.5px/1.4 'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  padding:22px max(16px,calc((100vw - 1240px)/2)) calc(env(safe-area-inset-bottom,0px) + 26px);scroll-snap-align:end}
.pie-x a{color:var(--pie-texto);text-decoration:none}
.pie-x a:focus-visible{outline:3px solid var(--pie-cobre);outline-offset:3px;border-radius:4px}

/* A · una línea: a la izquierda adónde ir, a la derecha el año */
.pie-x.pie-a{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px}
.pie-a nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px}
.pie-a nav span{font:500 12.5px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--pie-suave)}
.pie-a a{display:inline-flex;align-items:center;min-height:44px;border-bottom:1px solid transparent}
.pie-a a:hover{border-bottom-color:var(--pie-cobre)}
.pie-a a[aria-current]{color:var(--pie-cobre)}
.pie-a small{font:400 13.5px/1 'IBM Plex Mono',ui-monospace,monospace;color:var(--pie-suave)}

/* B · el directorio del lobby: la misma placa de latón de las salas. Cada piso es una celda con su luz, como el botón
   de un ascensor: se enciende al pasar y queda encendida en la página actual. Dos por fila en el teléfono, los cuatro en fila en escritorio */
footer.pie-b{display:grid;justify-items:center;justify-content:stretch;padding-top:30px}
.pie-b>small{justify-self:center;text-align:center;margin-top:14px;font:400 13.5px/1 'IBM Plex Mono',ui-monospace,monospace;color:var(--pie-suave)}
.directorio{position:relative;width:100%;max-width:62rem;padding:14px 16px 16px;border-radius:6px;color:#241b0e;
  background:linear-gradient(170deg,#e6cf98,#b8924f 55%,#9c7a3e);border:3px solid #6e5428;
  box-shadow:0 18px 32px -16px rgba(0,0,0,.8),inset 0 0 0 2px rgba(255,240,200,.55),inset 0 -3px 0 rgba(80,58,24,.35)}
/* Los tornillos de la placa, como en las de las salas */
.directorio::before,.directorio::after{content:"";position:absolute;top:9px;width:6px;height:6px;border-radius:50%;background:#7a5d2c;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.directorio::before{left:9px}.directorio::after{right:9px}
.directorio h2{margin:0 0 10px;text-align:center;font:600 13.5px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.24em;text-transform:uppercase;color:#3a2c14;text-shadow:0 1px 0 rgba(255,240,200,.5)}
.directorio ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(58,44,20,.35);border:1px solid rgba(58,44,20,.35);border-radius:3px;overflow:hidden}
.directorio li{display:grid;background:linear-gradient(170deg,#dfc58c,#b8924f)}
.directorio a{--luz:#e6cf98;position:relative;display:grid;align-content:start;gap:3px;min-height:60px;padding:11px 10px 12px 12px;color:#241b0e;transition:background .25s}
.directorio a:hover,.directorio a[aria-current]{background:rgba(255,240,200,.28)}
/* La luz del piso: apagada como un botón de bronce; encendida con el color de su sala */
.directorio .luz{flex:none;width:9px;height:9px;border-radius:50%;background:#6e5428;box-shadow:inset 0 1px 1px rgba(0,0,0,.4);transition:background .25s,box-shadow .25s}
.directorio a:hover .luz,.directorio a[aria-current] .luz{background:var(--luz);box-shadow:0 0 0 2px rgba(36,27,14,.25),0 0 10px 2px var(--luz)}
.directorio .nombre{display:flex;align-items:center;gap:9px;font:600 20px/1.1 'Newsreader',Georgia,serif;text-shadow:0 1px 0 rgba(255,240,200,.45)}
.directorio .dir-sub{font:400 14px/1.3 'Archivo',system-ui,sans-serif;color:#3a2c14;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.directorio a:hover .nombre{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.directorio a:focus-visible{outline-offset:-3px}
/* La celda actual se marca con un borde y su luz encendida (aria-current lo dice al lector): sin etiqueta que choque con el nombre */
.directorio a[aria-current]{box-shadow:inset 0 0 0 2px #241b0e}
@media (min-width:52rem){.directorio{padding:14px 18px 18px}.directorio ol{grid-template-columns:repeat(4,minmax(0,1fr))}.directorio a{min-height:84px;padding:16px 16px 15px}}
/* En el teléfono no cabe la etiqueta: la celda actual se marca con un borde y su luz encendida (aria-current lo dice al lector) */
@media (max-width:30rem){.directorio .dir-sub{font-size:13.5px}.directorio .nombre{font-size:19px}}
/* El cambio de idioma, junto al año: un enlace de texto con el área táctil completa */
.pie-lang{display:inline-flex;align-items:center;min-height:44px;margin:-15px 0;padding:0 4px;border:0;background:none;font:inherit;color:var(--pie-texto);text-decoration:underline;text-decoration-color:var(--pie-cobre);text-underline-offset:4px;cursor:pointer}
.pie-lang:hover{color:var(--pie-cobre)}.pie-lang:focus-visible{outline:3px solid var(--pie-cobre);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.pie-x *{transition:none!important}}