/* Conciencia Expansiva · piezas comunes a todas las páginas públicas.
   Menú, salto al contenido, migas de pan, barra de progreso y pie.
   Depende de tokens.css. Todo va prefijado con ce- y con color, fuente y
   decoración explícitos: cada página trae su propio CSS en línea y un selector
   genérico suyo (a, nav, header, footer) no debe poder alcanzar estas piezas.
   El marcado lo genera scripts/sync-chrome.py; no se edita a mano en cada HTML. */

/* Las anclas del menú (/#obras, /#recursos) no deben quedar bajo el menú fijo. */
html{ scroll-padding-top:calc(var(--nav-h) + 1rem); }
@media (prefers-reduced-motion:no-preference){ html:focus-within{ scroll-behavior:smooth; } }

/* ── Salto al contenido (WCAG 2.4.1) ── */
.ce-skip{
  position:fixed; left:1rem; top:.75rem; z-index:100;
  padding:.8rem 1.1rem; border-radius:var(--radius-sm);
  background:var(--ink); color:var(--bg);
  font:700 .9rem/1 var(--font-body); text-decoration:none;
  transform:translateY(-180%); transition:transform var(--dur-ui) var(--ease-ui);
}
.ce-skip:focus{ transform:none; outline:2px solid var(--gold); outline-offset:3px; }

/* ── Menú ── */
.ce-nav{
  position:sticky; top:0; z-index:70;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter:saturate(140%) blur(14px); backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid color-mix(in srgb, var(--line) 75%, transparent);
  color:var(--ink); font-family:var(--font-body);
  transition:transform 360ms var(--ease-ui);
}
/* Se aparta al bajar y vuelve al subir: más pantalla para leer, y el menú
   sigue a un gesto de distancia. Nunca se oculta con el panel abierto. */
.ce-nav.is-hidden:not(.is-open){ transform:translateY(-101%); }
.ce-nav__in{
  display:flex; align-items:center; gap:clamp(.75rem,2vw,1.5rem);
  max-width:1240px; min-height:var(--nav-h); margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,2.25rem);
}
.ce-nav__brand{
  display:flex; align-items:center; gap:.6rem; margin-right:auto; flex:none;
  color:var(--ink); text-decoration:none; min-height:44px;
}
.ce-nav__brand img{ width:30px; height:auto; display:block; }
.ce-nav__brand span{
  font:800 .68rem/1 var(--font-body); letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-ink); white-space:nowrap;
}
@media (max-width:420px){ .ce-nav__brand span{ display:none; } }

.ce-nav__links{ display:none; align-items:center; gap:clamp(1rem,1.6vw,1.6rem); }
@media (min-width:1100px){ .ce-nav__links{ display:flex; } }
.ce-nav__links a{
  position:relative; padding-block:.7rem;
  font:600 .86rem/1 var(--font-body); color:var(--ink-soft); text-decoration:none; white-space:nowrap;
  transition:color var(--dur-ui) var(--ease-ui);
}
.ce-nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:.35rem; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform 300ms var(--ease-ui);
}
.ce-nav__links a[aria-current="page"]{ color:var(--ink); }
.ce-nav__links a[aria-current="page"]::after{ transform:scaleX(1); }
@media (hover:hover) and (pointer:fine){
  .ce-nav__links a:hover{ color:var(--ink); }
  .ce-nav__links a:hover::after{ transform:scaleX(1); }
}

/* Botón principal del menú: una sola acción destacada en toda la web. */
.ce-nav__cta{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  min-height:44px; padding:0 1.15rem; border-radius:999px;
  background:var(--cta-bg); color:var(--cta-ink);
  font:700 .84rem/1 var(--font-body); text-decoration:none; white-space:nowrap;
  transition:transform 160ms var(--ease-ui), box-shadow var(--dur-ui) var(--ease-ui);
}
.ce-nav__cta:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){
  .ce-nav__cta:hover{ box-shadow:0 10px 24px -12px color-mix(in srgb, var(--ink) 60%, transparent); }
}
@media (max-width:560px){ .ce-nav__in > .ce-nav__cta{ display:none; } }

.ce-iconbtn{
  appearance:none; display:grid; place-items:center; flex:none;
  width:44px; height:44px; padding:0; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--ink-soft); cursor:pointer;
  transition:border-color var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui), transform 160ms var(--ease-ui);
}
.ce-iconbtn:active{ transform:scale(.94); }
@media (hover:hover) and (pointer:fine){ .ce-iconbtn:hover{ border-color:var(--gold); color:var(--ink); } }

.ce-theme svg{ width:18px; height:18px; grid-area:1/1; transition:transform 420ms var(--ease-ui), opacity 260ms var(--ease-ui); }
.ce-theme .ce-moon{ opacity:0; transform:rotate(-90deg) scale(.4); }
:root[data-theme="dark"] .ce-theme .ce-sun{ opacity:0; transform:rotate(90deg) scale(.4); }
:root[data-theme="dark"] .ce-theme .ce-moon{ opacity:1; transform:none; }

.ce-burger{ display:grid; }
@media (min-width:1100px){ .ce-burger{ display:none; } }
.ce-burger span{
  display:block; width:17px; height:1.5px; border-radius:2px; background:currentColor; grid-area:1/1;
  transition:transform 300ms var(--ease-ui), opacity 200ms var(--ease-ui);
}
.ce-burger span:nth-child(1){ transform:translateY(-5.5px); }
.ce-burger span:nth-child(3){ transform:translateY(5.5px); }
.ce-burger[aria-expanded="true"] span:nth-child(1){ transform:rotate(45deg); }
.ce-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.ce-burger[aria-expanded="true"] span:nth-child(3){ transform:rotate(-45deg); }

/* Panel móvil. Aparece desde su disparador (arriba), no desde el centro. */
.ce-nav__panel{
  position:absolute; inset:100% 0 auto 0;
  max-height:calc(100dvh - var(--nav-h)); overflow:auto; overscroll-behavior:contain;
  background:var(--bg); border-bottom:1px solid var(--line);
  box-shadow:0 24px 40px -28px color-mix(in srgb, var(--ink) 45%, transparent);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity 220ms var(--ease-ui), transform 260ms var(--ease-ui), visibility 0s linear 260ms;
}
.ce-nav.is-open .ce-nav__panel{
  opacity:1; visibility:visible; transform:none;
  transition:opacity 220ms var(--ease-ui), transform 260ms var(--ease-ui), visibility 0s;
}
@media (min-width:1100px){ .ce-nav__panel{ display:none; } }
.ce-nav__panel nav{
  display:grid; max-width:1240px; margin-inline:auto;
  padding:clamp(.75rem,3vw,1.25rem) clamp(1.25rem,4vw,2.25rem) clamp(1.5rem,5vw,2rem);
}
.ce-nav__panel a{
  display:flex; align-items:center; min-height:52px; border-bottom:1px solid var(--line);
  font:500 1.35rem/1.2 var(--font-display); color:var(--ink); text-decoration:none;
}
.ce-nav__panel a[aria-current="page"]{ color:var(--gold-ink); }
.ce-nav__panel .ce-nav__cta{
  margin-top:1.25rem; min-height:52px; border-bottom:0;
  font:700 .95rem/1 var(--font-body); color:var(--cta-ink);
}

/* Progreso de lectura: línea de oro bajo el menú, atada al scroll del
   documento. CSS puro donde hay scroll-timeline; donde no, no aparece. */
.ce-progress{ position:absolute; left:0; right:0; bottom:-1px; height:2px; pointer-events:none; overflow:hidden; }
.ce-progress span{ display:block; height:100%; background:var(--gold); transform-origin:left; transform:scaleX(0); }
@supports (animation-timeline: scroll()){
  .ce-progress span{ animation:ce-progress linear both; animation-timeline:scroll(root block); }
  @keyframes ce-progress{ to{ transform:scaleX(1); } }
}

/* ── Contenedor común y migas de pan ── */
.ce-wrap{ width:100%; max-width:1240px; margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.25rem); }
.ce-crumbs{ font:500 .8rem/1.4 var(--font-body); color:var(--muted); }
.ce-crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .5rem; margin:0; padding:0; list-style:none; }
.ce-crumbs li{ display:flex; align-items:center; gap:.5rem; }
.ce-crumbs li + li::before{ content:"/"; color:color-mix(in srgb, var(--muted) 60%, transparent); }
.ce-crumbs a{ color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--line); padding-block:.35rem; }
.ce-crumbs [aria-current="page"]{ color:var(--ink); }
@media (hover:hover) and (pointer:fine){ .ce-crumbs a:hover{ color:var(--ink); border-color:var(--gold); } }
.ce-crumbs--bar{ padding-block:.9rem; border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent); background:var(--bg); }

/* ── Pie ── */
.ce-foot{
  background:var(--deep); color:var(--on-deep-soft);
  font:400 .9rem/1.6 var(--font-body); border-top:1px solid var(--on-deep-line);
}
.ce-foot__in{
  display:grid; gap:clamp(2rem,5vw,3rem);
  max-width:1240px; margin-inline:auto;
  padding:clamp(3rem,7vw,4.5rem) clamp(1.25rem,4vw,2.25rem) clamp(1.75rem,4vw,2.25rem);
}
.ce-foot__top{ display:grid; gap:clamp(2rem,5vw,3rem); }
@media (min-width:640px){ .ce-foot__top{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:980px){ .ce-foot__top{ grid-template-columns:minmax(0,1.1fr) repeat(3, minmax(0,1fr)); } }
.ce-foot__brand{ display:grid; gap:1rem; align-content:start; }
/* Solo el enlace del logotipo (hijo directo). Con `.ce-foot__brand a` atrapaba
   también los iconos de redes y los descentraba 11 px en su círculo. */
.ce-foot__brand > a{ display:inline-flex; align-items:center; gap:.6rem; color:var(--on-deep); text-decoration:none; }
.ce-foot__brand img{ width:34px; height:auto; }
.ce-foot__brand b{ font:800 .7rem/1 var(--font-body); letter-spacing:.2em; text-transform:uppercase; color:var(--on-deep-gold); }
.ce-foot__brand p{ margin:0; max-width:34ch; color:var(--on-deep-soft); }
.ce-foot h2{
  margin:0 0 .85rem; font:800 .68rem/1 var(--font-body); letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-deep-mute);
}
.ce-foot ul{ display:grid; gap:.15rem; margin:0; padding:0; list-style:none; }
.ce-foot li a{
  display:inline-flex; align-items:center; min-height:36px;
  color:var(--on-deep-soft); text-decoration:none; transition:color var(--dur-ui) var(--ease-ui);
}
@media (hover:hover) and (pointer:fine){ .ce-foot li a:hover{ color:var(--on-deep-gold); } }
.ce-canales{ display:flex; flex-wrap:wrap; gap:.6rem; }
.ce-canal{
  display:grid; place-items:center; width:44px; height:44px; border-radius:999px;
  border:1px solid var(--on-deep-line); color:var(--on-deep-soft); text-decoration:none;
  transition:border-color var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui), transform 160ms var(--ease-ui);
}
.ce-canal:active{ transform:scale(.94); }
@media (hover:hover) and (pointer:fine){ .ce-canal:hover{ border-color:var(--on-deep-gold); color:var(--on-deep-gold); } }
.ce-canal svg{ width:19px; height:19px; }
.ce-foot__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem 2rem;
  padding-top:clamp(1.25rem,3vw,1.75rem); border-top:1px solid var(--on-deep-line);
  font-size:.82rem; color:var(--on-deep-mute);
}
/* color:inherit explícito: un `p{ color:… }` genérico de la página (el
   dossier tiene uno) ganaba al color heredado y dejaba el © a 1,37:1. */
.ce-foot__bottom p{ margin:0; color:inherit; }
.ce-foot__legal{ display:flex; flex-wrap:wrap; gap:.25rem 1.4rem; }
.ce-foot__legal a{ display:inline-flex; align-items:center; min-height:36px; color:var(--on-deep-soft); text-decoration:none; }
@media (hover:hover) and (pointer:fine){ .ce-foot__legal a:hover{ color:var(--on-deep-gold); } }
/* Reabre el aviso de cookies: retirar el permiso debe costar lo mismo que darlo. */
.ce-foot__prefs{
  appearance:none; display:inline-flex; align-items:center; min-height:36px; padding:0;
  border:0; background:none; color:var(--on-deep-soft); font:inherit; cursor:pointer;
  transition:color var(--dur-ui) var(--ease-ui);
}
@media (hover:hover) and (pointer:fine){ .ce-foot__prefs:hover{ color:var(--on-deep-gold); } }
.ce-foot .ce-foot__prefs:focus-visible{ outline:2px solid var(--on-deep-gold); outline-offset:3px; }

/* ── Aviso de cookies (analytics.js) ──
   No es un modal: la página se puede leer y usar sin decidir. Aceptar y
   Rechazar tienen el mismo tamaño y el mismo peso; ninguno se esconde. */
.ce-consent{
  position:fixed; z-index:80;
  inset-inline:clamp(.75rem,3vw,1.5rem); bottom:max(clamp(.75rem,3vw,1.5rem), env(safe-area-inset-bottom));
  max-width:60rem; margin-inline:auto;
  background:var(--surface-raised); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-2);
  font-family:var(--font-body);
  transition:opacity 280ms var(--ease-ui), transform 280ms var(--ease-ui), display 280ms allow-discrete;
}
@starting-style{ .ce-consent{ opacity:0; transform:translateY(14px); } }
.ce-consent[hidden]{ display:none; opacity:0; transform:translateY(14px); }
.ce-consent__in{
  display:grid; gap:1rem 2rem; align-items:center;
  padding-block:clamp(1.1rem,2.5vw,1.4rem); padding-inline:clamp(1.1rem,3vw,1.75rem);
}
@media (min-width:760px){ .ce-consent__in{ grid-template-columns:1fr auto; } }
.ce-consent h2{
  margin:0 0 .35rem; font:600 clamp(1.2rem,1.05rem + .5vw,1.4rem)/1.2 var(--font-display);
  color:var(--ink); letter-spacing:-.005em;
}
.ce-consent p{ margin:0; max-width:68ch; font-size:.9rem; line-height:1.6; color:var(--ink-soft); }
.ce-consent a{
  color:var(--gold-ink); text-decoration:underline; text-underline-offset:.2em;
  text-decoration-color:color-mix(in srgb, var(--gold) 55%, transparent);
}
.ce-consent__actions{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
@media (min-width:760px){ .ce-consent__actions{ grid-template-columns:auto auto; } }
.ce-consent__btn{
  appearance:none; display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding-inline:1.4rem; border-radius:999px;
  border:1.5px solid var(--ink); background:transparent; color:var(--ink);
  font:700 .88rem/1 var(--font-body); white-space:nowrap; cursor:pointer;
  transition:transform 160ms var(--ease-ui), background-color var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui);
}
.ce-consent__btn:active{ transform:scale(.97); }
.ce-consent__btn--accept{ background:var(--cta-bg); border-color:var(--cta-bg); color:var(--cta-ink); }
@media (hover:hover) and (pointer:fine){
  .ce-consent__btn:not(.ce-consent__btn--accept):hover{ background:color-mix(in srgb, var(--ink) 7%, transparent); }
  .ce-consent__btn--accept:hover{ box-shadow:0 10px 24px -12px color-mix(in srgb, var(--ink) 60%, transparent); }
}

/* ── Componentes de fondo verde puestos sobre fondo claro ──
   Varias cabeceras se escribieron para .band.deep y leen --on-deep*. Al
   pasarlas a claro (10-09-2026, "más fondos claros") se reasignan esos
   tokens en vez de reescribir cada regla. En tema oscuro --ink y compañía
   ya valen marfil, así que la misma sección sigue funcionando. */
.ce-sobre-claro{
  --on-deep:var(--ink); --on-deep-soft:var(--ink-soft); --on-deep-mute:var(--muted);
  --on-deep-line:var(--line); --on-deep-gold:var(--gold-ink);
}

/* Foco visible en todo el sitio (0 de especificidad: la página puede afinarlo). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--gold-strong); outline-offset:3px;
}
.ce-foot :where(a):focus-visible{ outline-color:var(--on-deep-gold); }

@media (prefers-reduced-motion:reduce){
  .ce-nav, .ce-nav__panel, .ce-skip, .ce-theme svg, .ce-burger span{ transition:none; }
  .ce-consent{ transition:opacity 200ms ease; }
  .ce-consent[hidden]{ transform:none; }
}
@media (prefers-reduced-motion:reduce){
  @starting-style{ .ce-consent{ transform:none; } }
  .ce-nav.is-hidden{ transform:none; }
}