/*
Theme Name: FiscalReady
Theme URI: https://fiscalready.es
Author: FiscalReady
Description: Tema a medida para fiscalready.es — reproduce el diseño original del sitio (cabecera con categorías, cuenta atrás, tarjetas, FAQ desplegable, banner de cookies con Consent Mode v2) sin necesidad de configurar menús a mano.
Version: 1.0
Requires PHP: 7.4
License: Uso privado
Text Domain: fiscalready
*/

/* ================================================================
   Tipografías alojadas en el propio servidor (no se carga nada desde
   fonts.googleapis.com). Motivo: una web sobre cumplimiento normativo
   no debería enviar la IP de sus visitantes a un tercero antes de que
   acepten nada. Además carga más rápido y no depende de que el CDN de
   Google esté disponible.

   Fuentes: Archivo, Fraunces e IBM Plex Mono, las tres con licencia
   SIL Open Font License 1.1 (uso comercial y redistribución
   permitidos). Subset latino (cubre á é í ó ú ñ ü ¿ ¡ € y comillas).
   Archivo y Fraunces son fuentes variables: un solo fichero cubre
   todos los pesos.
   La ruta url(fonts/...) es relativa a la propia hoja de estilos, así
   que funciona igual en el sitio estático (/assets/css/estilo.css) y
   en el tema de WordPress (.../themes/fiscalready/style.css).
   ================================================================ */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/fraunces-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ================================================================
   FiscalReady — sistema de diseño "boletín normativo"
   Un único sistema fluido: no hay una versión "de escritorio" con
   parches de móvil. Los tamaños usan clamp() y las rejillas usan
   auto-fit/minmax, así que la misma regla vale de 320px a 1600px.
   ================================================================ */

/* Las declaraciones @font-face de las tres tipografías (alojadas en el
   propio servidor, sin llamadas a fonts.googleapis.com) las antepone
   build.js a partir de build-scripts/fuentes-locales.css. */

:root {
  /* Paleta: papel gris-frío + tinta + tres acentos con significado
     (granate = plazo/urgencia, oliva = pendiente, verde-azulado =
     al día/cumplido). Deliberadamente distinta del verde único y el
     blanco puro de la versión anterior del sitio. */
  --paper: #EDEFEA;
  --surface: #FFFFFF;
  --surface-2: #E3E6DF;
  --ink: #171A16;
  --ink-2: #4B5047;
  --ink-3: #7C8175;
  --line: #D6D9CF;
  --line-2: #BEC2B5;

  --brand: #6E1F2B;        /* granate — marca, enlaces, plazos */
  --brand-ink: #4C1620;
  --brand-soft: #F3E3E1;
  --aviso: #8A6D1F;        /* oliva — pendiente / atención */
  --aviso-soft: #F1E9D3;
  --ok: #1B6B5C;           /* verde azulado — cumplido / al día */
  --ok-soft: #DEEAE6;

  --radio: 3px;
  --max-width: 1160px;
  --max-read: 42rem;
  --gutter: clamp(16px, 4vw, 32px);

  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", "Consolas", "SFMono-Regular", Menlo, monospace;
}

/* ---------- Reset y base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: clamp(15.5px, 0.85vw + 13px, 17.5px);
}
.wrap { max-width: var(--max-width); margin: 0 auto; padding-inline: var(--gutter); }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-ink); }
img, svg { max-width: 100%; height: auto; display: block; }
button, input, select { font-family: inherit; }
:focus-visible { outline: 2.5px solid var(--brand); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.15; margin: 0; color: var(--ink); }
h1 { font-size: clamp(1.7rem, 3.6vw + 0.8rem, 2.7rem); font-weight: 700; }
h2 { font-size: clamp(1.3rem, 1.6vw + 0.8rem, 1.65rem); }
h3 { font-size: clamp(1.08rem, 0.6vw + 0.9rem, 1.25rem); }
p, li { max-width: 68ch; }

/* Etiqueta de "código legal / fecha" — el detalle mono que marca el
   tono de todo el sitio: referencias normativas, fechas, plazos. */
.mono, time, .eyebrow, .cat-tag, .post-dates, .toc-label { font-family: var(--f-mono); }

/* ---------- Franja superior (ticker de plazos) ---------- */
.top-ticker {
  background: var(--brand);
  color: #F6E9E8;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  overflow: hidden;
  white-space: nowrap;
}
.top-ticker .wrap { display: flex; align-items: center; gap: 10px; padding-block: 7px; overflow-x: auto; scrollbar-width: none; }
.top-ticker .wrap::-webkit-scrollbar { display: none; }
.top-ticker strong { color: #fff; font-weight: 600; flex-shrink: 0; }
.top-ticker .ticker-sep { opacity: 0.5; flex-shrink: 0; }
.top-ticker .ticker-item { flex-shrink: 0; }

/* ---------- Cabecera ---------- */
.site-header { background: var(--ink); border-bottom: 1px solid #000; position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; gap: clamp(10px, 3vw, 28px); padding-block: 14px; }
.logo { font-family: var(--f-display); font-size: 1.3rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.logo span { color: #E8A9AE; }

/* Nav: fila que se ajusta sola. En pantallas estrechas se convierte en
   una tira con scroll horizontal (nunca se apila ni se oculta detrás
   de un botón), así el mismo marcado sirve para cualquier anchura. */
.main-nav { flex: 1; min-width: 0; }
.main-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.main-nav a {
  display: block; white-space: nowrap; padding: 7px 12px; border-radius: var(--radio);
  color: #D6D2C9; font-size: 0.86rem; font-weight: 500; text-decoration: none;
}
.main-nav a:hover, .main-nav a:focus-visible { background: rgba(255,255,255,0.1); color: #fff; }

/* ---------- Migas de pan ---------- */
.breadcrumb { font-size: 0.82rem; color: var(--ink-3); padding-block: 12px 0; }
.breadcrumb a { color: var(--ink-3); }

/* ---------- Contenido principal ---------- */
.main-content { padding-block: clamp(20px, 4vw, 40px) clamp(40px, 6vw, 72px); }

/* ---------- Hero de portada ---------- */
.hero { padding-block: clamp(24px, 5vw, 48px) clamp(12px, 3vw, 20px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 3vw, 28px); align-items: start; }
@media (min-width: 860px) { .hero-grid { grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); } }
.hero h1 { max-width: 16ch; }
.hero .lead { font-size: clamp(1rem, 0.4vw + 0.9rem, 1.15rem); color: var(--ink-2); margin-top: 14px; max-width: 48ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.hero-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radio); padding: 18px 20px; }
.hero-panel h2 { font-size: 0.85rem; font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); margin-bottom: 12px; }

.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 11px 20px; border-radius: var(--radio);
  font-weight: 600; font-size: 0.92rem; cursor: pointer; border: 1.5px solid transparent; text-decoration: none;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-ink); color: #fff; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-secondary:hover { border-color: var(--ink-3); }

/* ---------- Plazos (tarjetas de fecha) ---------- */
.deadline-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.deadline-list li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.deadline-list li:last-child { border-bottom: none; }
.deadline-list .deadline-name { font-weight: 600; font-size: 0.92rem; }
.deadline-list .deadline-date { font-family: var(--f-mono); font-size: 0.8rem; color: var(--ink-3); }
.deadline-list .deadline-days { font-family: var(--f-mono); font-size: 0.8rem; font-weight: 600; color: var(--brand); white-space: nowrap; }

/* ---------- Rutas de inicio rápido ---------- */
.starter-paths { margin-block: clamp(28px, 5vw, 48px); }
.path-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 16px; }
.path-card {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: var(--radio);
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brand);
  color: var(--ink); text-decoration: none;
}
.path-card:hover { border-left-color: var(--brand-ink); box-shadow: 0 2px 10px rgba(23,26,22,0.06); }
.path-card strong { color: var(--brand); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--f-mono); }
.path-card span { font-size: 1rem; font-weight: 600; font-family: var(--f-display); }

/* ---------- Índice de categorías (portada) ---------- */
.categories { margin-block: clamp(28px, 5vw, 48px); }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; margin-top: 16px; background: var(--line); border: 1px solid var(--line); }
.cat-card { display: block; padding: 18px 20px; background: var(--surface); color: var(--ink); text-decoration: none; }
.cat-card:hover { background: var(--paper); }
.cat-card h3 { margin: 0 0 6px; font-size: 1.02rem; }
.cat-card p { margin: 0 0 10px; color: var(--ink-2); font-size: 0.88rem; }
.cat-count { font-size: 0.76rem; font-weight: 600; font-family: var(--f-mono); color: var(--ok); }

/* ---------- Comparador (tabla con scroll) ---------- */
.comparador { margin-block: clamp(28px, 5vw, 48px); }
.table-scroll { overflow-x: auto; margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radio); -webkit-overflow-scrolling: touch; }
.table-scroll table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 480px; }
.table-scroll th, .table-scroll td { border-bottom: 1px solid var(--line); padding: 10px 14px; text-align: left; vertical-align: top; }
.table-scroll th { background: var(--surface-2); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink-2); }
.table-scroll tbody tr:last-child td { border-bottom: none; }
.comparador-nota { font-size: 0.82rem; color: var(--ink-3); margin-top: 10px; }

/* ---------- Dossier: lista de artículos (categoría y "todos") ---------- */
.dossier-list { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line); }
.dossier-list li { border-bottom: 1px solid var(--line); }
.dossier-row {
  display: grid; grid-template-columns: 2.4rem 1fr; gap: 14px; align-items: start;
  padding-block: 14px; text-decoration: none; color: var(--ink);
}
.dossier-row:hover .dossier-title { color: var(--brand); }
.dossier-num { font-family: var(--f-mono); font-size: 0.82rem; color: var(--ink-3); padding-top: 2px; }
.dossier-title { display: block; font-weight: 600; font-size: 1rem; }
.dossier-desc { margin: 4px 0 0; color: var(--ink-2); font-size: 0.88rem; }
.dossier-tag { display: inline-block; font-family: var(--f-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ok); background: var(--ok-soft); padding: 2px 8px; border-radius: var(--radio); margin-bottom: 4px; }

/* ---------- Actualizaciones normativas (portada) ---------- */
.updates { margin-block: clamp(28px, 5vw, 48px); }
.updates-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.updates-list li { background: var(--surface); display: grid; grid-template-columns: 6.5rem 1fr; gap: 14px; padding: 12px 16px; align-items: baseline; }
.updates-list time { font-size: 0.78rem; color: var(--ink-3); }
.updates-list span { font-size: 0.92rem; }

/* ---------- Firma editorial ---------- */
.firma { margin-block: clamp(28px, 5vw, 48px); padding: 20px 22px; border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: var(--radio); background: var(--surface); }
.firma h2 { font-size: 0.95rem; margin-bottom: 8px; }
.firma p { margin: 0; color: var(--ink-2); font-size: 0.9rem; }

/* Ilustración de cabecera de artículo o categoría — nunca por encima
   del título (afectaría al LCP); una franja recortada bajo el texto. */
.hero-image {
  display: block; width: 100%; max-width: 460px; margin: 4px 0 1.6em;
  border: 1px solid var(--line); border-radius: var(--radio);
}
.category-page .hero-image { max-width: 380px; }

/* ---------- Página de categoría ---------- */
.category-page .lead { color: var(--ink-2); font-size: 1.02rem; max-width: 60ch; margin-top: 10px; }

/* ---------- Espacio para publicidad (AdSense) ----------
   Contenedor neutro: sin borde, sin fondo ni "hueco visible" mientras
   no haya anuncio real dentro (evita cualquier apariencia de web rota
   o de contenido a medias durante la revisión de la cuenta). En
   cuanto insertes tu <ins class="adsbygoogle"> aquí dentro, ocupará
   el ancho completo del contenedor y quedará centrado. NO insertes
   ningún script de anuncios hasta que Google haya aprobado la cuenta. */
.ad-slot { width: 100%; margin-block: clamp(20px, 4vw, 32px); text-align: center; }
.ad-slot ins.adsbygoogle { width: 100% !important; }
.ad-slot[data-empty] { min-height: 0; }

/* ---------- Artículo ---------- */
.article { max-width: var(--max-read); min-width: 0; margin-inline: auto; }
.eyebrow { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--brand); margin-bottom: 10px; display: block; }
.article h1 { margin: 0 0 12px; }
.post-dates { font-size: 0.8rem; color: var(--ink-3); margin: 0 0 22px; }
.article h2 { margin: 2.2em 0 0.6em; scroll-margin-top: 90px; }
.article h3 { margin: 1.8em 0 0.5em; }
.article p { margin: 0 0 1.1em; }
.article ul, .article ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.article li { margin-bottom: 0.4em; }
.article strong { font-weight: 600; }

.table-scroll-article { overflow-x: auto; margin: 1.6em 0; border: 1px solid var(--line); border-radius: var(--radio); -webkit-overflow-scrolling: touch; }
.article table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 460px; }
.article th, .article td { border-bottom: 1px solid var(--line); padding: 9px 13px; text-align: left; vertical-align: top; }
.article th { background: var(--surface-2); font-weight: 600; }
.article tbody tr:last-child td { border-bottom: none; }

/* Cita/ficha normativa: sustituye al blockquote genérico por una ficha
   con el mismo lenguaje visual que el resto del sitio (mono + granate). */
.article blockquote { margin: 1.8em 0; padding: 0; border: none; }
.ficha-normativa {
  margin: 1.8em 0; padding: 16px 18px; background: var(--brand-soft); border: 1px solid #E3C6C4;
  border-left: 4px solid var(--brand); border-radius: var(--radio); font-size: 0.92rem; color: var(--ink);
}
.ficha-normativa p { margin: 0; max-width: none; }
.ficha-normativa .ficha-label { display: block; font-family: var(--f-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--brand); margin-bottom: 6px; }

/* Índice del artículo — una única caja plegable que funciona igual de
   bien en móvil (donde ocupa poco hasta que se abre) y en escritorio
   (donde puede quedar abierta sin robarle sitio al texto porque no es
   una segunda columna). Nada de "versión móvil" y "versión escritorio"
   distintas: es el mismo elemento en cualquier anchura. */
.toc-box { border: 1px solid var(--line); border-radius: var(--radio); background: var(--surface); margin: 0 0 1.8em; }
.toc-box summary { display: flex; align-items: center; gap: 8px; padding: 13px 18px; cursor: pointer; font-family: var(--f-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); list-style: none; }
.toc-box summary::-webkit-details-marker { display: none; }
.toc-box summary::before { content: '▸'; color: var(--brand); font-size: 0.9em; transition: transform 0.15s; }
.toc-box[open] summary::before { transform: rotate(90deg); }
.toc-box ol { list-style: none; margin: 0; padding: 4px 18px 16px; counter-reset: toc; display: grid; gap: 8px; }
.toc-box li { counter-increment: toc; font-size: 0.9rem; line-height: 1.35; }
.toc-box li::before { content: counter(toc, decimal-leading-zero) '  '; font-family: var(--f-mono); color: var(--ink-3); }
.toc-box a { color: var(--ink-2); text-decoration: none; }
.toc-box a:hover { color: var(--brand); }

.faq-list { display: grid; gap: 8px; }
.faq-list details { border: 1px solid var(--line); border-radius: var(--radio); padding: 2px 16px; background: var(--surface); }
.faq-list summary { font-weight: 600; cursor: pointer; padding: 12px 0; list-style: none; position: relative; padding-right: 24px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; position: absolute; right: 0; top: 10px; font-family: var(--f-mono); color: var(--brand); font-size: 1.1rem; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list p { margin: 0 0 14px; color: var(--ink-2); }

.related-links { margin: 2em 0; padding: 18px 20px; background: var(--ok-soft); border-radius: var(--radio); border-left: 4px solid var(--ok); }
.related-links h3 { margin: 0 0 10px; font-size: 0.95rem; }
.related-links ul { margin: 0; padding-left: 18px; }

.fuentes-box { margin-top: 2.4em; padding: 18px 20px; background: var(--surface-2); border-radius: var(--radio); font-size: 0.86rem; color: var(--ink-2); }
.fuentes-box h2 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 10px; font-family: var(--f-mono); }
.fuentes-box ul { padding-left: 18px; margin: 0; }
.fuentes-box a { word-break: break-word; }

/* ---------- Calculadora (herramientas) ---------- */
.calculadora-box { margin: 1.6em 0; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radio); background: var(--surface); }
.calc-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.calc-row label { font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.calc-row input, .calc-row select {
  padding: 11px 12px; border: 1px solid var(--line-2); border-radius: var(--radio); font-size: 1rem;
  font-family: var(--f-body); background: var(--paper); color: var(--ink); min-height: 44px;
}
.calc-resultado { margin-top: 18px; }
.calc-tabla { width: 100%; border-collapse: collapse; font-size: 0.95rem; background: var(--surface); }
.calc-tabla td { padding: 10px 4px; border-bottom: 1px solid var(--line); }
.calc-tabla td:last-child { text-align: right; font-family: var(--f-mono); }
.calc-tabla tr.calc-total td { font-weight: 700; border-top: 2px solid var(--brand); border-bottom: none; }

/* ---------- Páginas legales ---------- */
.legal-page { max-width: var(--max-read); }
.legal-page h2 { margin-top: 1.8em; }
.legal-page blockquote { background: var(--aviso-soft); border-left: 4px solid var(--aviso); padding: 14px 18px; border-radius: 0 var(--radio) var(--radio) 0; margin: 1.6em 0; }
.legal-page code { background: var(--surface-2); padding: 1px 5px; border-radius: 3px; font-family: var(--f-mono); font-size: 0.9em; }

/* ---------- Pie de página ---------- */
.site-footer { background: var(--ink); color: #C9CBC3; margin-top: clamp(48px, 8vw, 80px); }
.footer-inner { padding-block: clamp(32px, 5vw, 48px) 20px; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(20px, 4vw, 32px); }
.footer-cols strong { display: block; margin-bottom: 12px; font-size: 0.85rem; color: #fff; font-family: var(--f-display); }
.footer-cols p { color: #9DA096; font-size: 0.85rem; margin: 0; }
.footer-cols ul { list-style: none; padding: 0; margin: 0; }
.footer-cols li { margin-bottom: 7px; }
.footer-cols a { color: #B7BAAF; font-size: 0.85rem; text-decoration: none; }
.footer-cols a:hover { color: #fff; }
.copyright { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid #33362E; font-size: 0.78rem; color: #82857B; text-align: center; }

/* ---------- Banner de cookies ---------- */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: var(--ink); color: #EDEFEA; padding: 16px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; font-size: 0.86rem; max-width: 62ch; }
.cookie-banner a { color: #E8A9AE; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner .btn-primary { background: #E8A9AE; color: #3A0F14; }
.cookie-banner .btn-secondary { background: transparent; border: 1px solid #4B4E44; color: #EDEFEA; }

/* ---------- Utilidades responsivas transversales ---------- */
/* Objetivo táctil mínimo de 44px en cualquier control interactivo. */
.btn, .main-nav a, .path-card, .cat-card, .dossier-row, summary { min-height: 44px; }
@media (max-width: 480px) {
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .updates-list li { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Impresión (por si alguien exporta un artículo a PDF) ---------- */
@media print {
  .site-header, .cookie-banner, .top-ticker, .ad-slot, .toc-box { display: none; }
  body { background: #fff; }
}

.screen-reader-text { position: absolute; left: -9999px; }
.site-header .main-nav ul { align-items: center; }