/**
 * Header y footer públicos compartidos — Inicio, Manual, Recomendaciones y El libro.
 * Mismo header/footer en las 4 páginas; lo que cambia por página son las opciones de .site-nav (en
 * Inicio se arma a mano en el HTML con el nav propio de esa página; en las otras 3, inverzo-shared.js
 * las genera) y el contenido de .foot-links/.foot-disclaimer (cada página decide qué links tiene sentido
 * mostrar, y su propio texto legal — el disclaimer de index.html habla de su simulador, no aplica igual
 * en las demás).
 *
 * Usa valores de color literales (no var(--token)) a propósito: las páginas públicas de Inverzo hoy tienen
 * dos esquemas de variables de :root sin unificar (uno "--ink-900/--cream-100/..." en index.html, libro.html
 * y recomendaciones.html; otro "--border/--bg/--text/..." en manual.html) — centralizar el header/footer sin
 * depender de ninguno de los dos evita que se rompan si algún día se unifican esos esquemas, y permite que
 * cualquier página los use sin tener que adoptar primero un set de tokens específico.
 */

/* ---------- Ícono vía mask-image (SVG en --icon-url) ---------- */
.icon {
  display: inline-block; flex: 0 0 auto; background: currentColor;
  -webkit-mask-image: var(--icon-url); mask-image: var(--icon-url);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #FFFCF3;
  border-bottom: 2px solid #16110E;
}
/*
 * ".site-header .site-header-inner" (2 clases) a propósito, en vez de ".site-header-inner" sola: el
 * elemento siempre trae TAMBIÉN la clase ".wrap" propia de cada página (para heredar el max-width/margin
 * de esa página, que varía: 980px en libro.html, 1100px en recomendaciones.html, 1200px en index.html) —
 * ".wrap" y ".site-header-inner" comparten la propiedad "padding", y con la misma especificidad gana la
 * que cargue después en el documento (el <style> propio de cada página, que va después de este archivo).
 * Con el selector compuesto, esta regla siempre gana sin importar el orden de carga.
 */
.site-header .site-header-inner {
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .site-header .site-header-inner { padding: 14px 20px; }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.site-nav a,
.site-nav .activo {
  font-family: "Archivo", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: #3A322C;
}
.site-nav a:hover { color: #FF63A5; }
.site-nav .activo {
  color: #16110E;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Footer público compartido ---------- */
/* Se activa con class="site-footer" en el <footer>. Mismo comentario que .site-header-inner arriba
   sobre por qué ".site-footer .wrap" (selector compuesto) en vez de una clase nueva sola: así siempre
   gana sobre el ".wrap" propio de cada página, sin importar el orden de carga en el documento. */
.site-footer { background: #16110E; }
.site-footer .wrap { padding: 56px 40px 40px; }
@media (max-width: 640px) {
  .site-footer .wrap { padding: 40px 20px 32px; }
}
.site-footer .foot-top {
  display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap;
  padding-bottom: 36px; border-bottom: 2px solid #3A322C; margin-bottom: 24px;
}
.site-footer .foot-brand { display: flex; align-items: center; gap: 16px; }
/* Colorea el wordmark de cada página (que se queda con su propio tamaño/tipografía) para que se lea
   sobre el fondo oscuro del footer, sin tocar la regla .wordmark de la página. */
.site-footer .foot-brand .wordmark { color: #FFFCF3; }
.site-footer .foot-brand .wordmark .dot { color: #FFD23F; }
.site-footer .foot-social { display: inline-flex; color: #E4D5B8; transition: color 200ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.site-footer .foot-social:hover { color: #FFD23F; }
.site-footer .foot-links { display: flex; gap: 28px; flex-wrap: wrap; }
.site-footer .foot-links button,
.site-footer .foot-links a {
  background: none; border: none; padding: 0; font: 500 14px/1.45 "Archivo", Helvetica, Arial, sans-serif;
  color: #E4D5B8; cursor: pointer; text-decoration: none;
}
.site-footer .foot-links button:hover,
.site-footer .foot-links a:hover { color: #FFFCF3; }
.site-footer .foot-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font: 500 13px/1.4 "Archivo", Helvetica, Arial, sans-serif; color: #E4D5B8;
}
.site-footer .foot-disclaimer {
  font: 500 13px/1.6 "Archivo", Helvetica, Arial, sans-serif; color: #E4D5B8;
  max-width: 720px; margin-top: 20px;
}

/* ---------- Documentos legales (terminos.html / privacidad.html / cookies.html) ---------- */
/* A propósito TODO escopado bajo ".legal-content" (la clase del propio <main>, no del <body>): un
   selector más amplio como ".legal a" también matchearía los links del header/footer (wordmark, ícono
   de Facebook, nav, foot-links), que son hermanos de <main>, no descendientes — con la especificidad
   suficiente para ganarles a sus propias reglas (más específicas en clases pero con un elemento menos) y
   dejarlos mal pintados. Escopar a ".legal-content" hace que la regla ni siquiera aplique fuera de <main>. */
main.legal-content { padding: 48px 0 88px; }
@media (max-width: 640px) { main.legal-content { padding: 32px 0 64px; } }
.legal-content h1 {
  font: 800 clamp(28px, 4.4vw, 40px)/1.08 "Bricolage Grotesque", "Archivo", Helvetica, sans-serif;
  letter-spacing: -0.02em; color: #16110E; margin: 0 0 10px;
}
.legal-content .updated { font: 500 13px "DM Mono", ui-monospace, monospace; color: #6B6058; margin-bottom: 36px; }
.legal-content h2 { font: 700 19px "Bricolage Grotesque", "Archivo", Helvetica, sans-serif; color: #16110E; margin: 34px 0 10px; }
.legal-content p { font: 500 15px/1.7 "Archivo", Helvetica, Arial, sans-serif; color: #3A322C; margin: 0 0 14px; }
.legal-content ul { padding-left: 22px; margin: 0 0 14px; }
.legal-content li { font: 500 15px/1.7 "Archivo", Helvetica, Arial, sans-serif; color: #3A322C; margin-bottom: 8px; }
.legal-content li b, .legal-content p b { color: #16110E; }
.legal-content a { color: #FF63A5; font-weight: 700; text-decoration: none; }
.legal-content a:hover { text-decoration: underline; }