/* ============================================================
   CEMPROTECTA · base
   Reset mínimo, espejo de tokens, tipografía, enlaces, foco y
   primitivas de texto. Portado del prototipo V2/V3.

   theme.json es la fuente de verdad de colores, familias, tamaños
   de fuente y escala de espaciado. Aquí solo se reflejan con
   nombres cortos y se añade lo que theme.json no puede expresar.
   ============================================================ */

:root{
  --paper:var(--wp--preset--color--paper);
  --surface:var(--wp--preset--color--surface);
  --surface-2:var(--wp--preset--color--band);
  --surface-3:var(--wp--preset--color--band-deep);
  --ink:var(--wp--preset--color--ink);
  --ink-2:var(--wp--preset--color--ink-2);
  --ink-3:var(--wp--preset--color--ink-3);
  --line:var(--wp--preset--color--line);
  --line-2:var(--wp--preset--color--line-2);
  --accent:var(--wp--preset--color--accent);
  --accent-h:var(--wp--preset--color--accent-deep);
  --wash:var(--wp--preset--color--wash);
  --on-accent:var(--wp--preset--color--surface);

  --ff-d:var(--wp--preset--font-family--display);
  --ff-b:var(--wp--preset--font-family--body);
  --ff-m:var(--wp--preset--font-family--mono);

  --r:var(--wp--custom--radius--base);
  --r-s:var(--wp--custom--radius--small);

  --s1:var(--wp--preset--spacing--10);
  --s2:var(--wp--preset--spacing--20);
  --s3:var(--wp--preset--spacing--30);
  --s4:var(--wp--preset--spacing--40);
  --s5:var(--wp--preset--spacing--50);
  --s6:var(--wp--preset--spacing--60);
  --s7:var(--wp--preset--spacing--70);
  --s8:var(--wp--preset--spacing--80);
  --s9:var(--wp--preset--spacing--90);
  --s10:var(--wp--preset--spacing--100);

  --pad:var(--s7);
  --maxw:var(--wp--custom--maxw);
  --measure:var(--wp--custom--measure);
  --secY:var(--s9);

  /* La sangre lateral necesita saber cuánto sobra a cada lado de la medida.
     Se mide en unidades de contenedor, no en vw: 100vw incluye la barra de
     desplazamiento y .wrap no, así que con vw el texto a sangre quedaba
     desalineado media barra (7-8 px) en toda anchura superior a 1160.
     El contenedor se declara sobre .wp-site-blocks, más abajo. */
  --inset:max(var(--pad), calc((100cqw - var(--maxw)) / 2 + var(--pad)));
}

/* ---------- esquema de color ----------
   El sitio usa SIEMPRE la paleta clara aprobada. No hay variante oscura.
   El bloque `prefers-color-scheme: dark` que traía el prototipo se ha
   retirado por decisión de proyecto del 26.08.2026: la dirección visual
   V2/V3 está definida y validada únicamente en claro, y no queremos que
   los colores cambien solos según la preferencia del sistema operativo.
   `color-scheme: light` evita además que el navegador pinte en oscuro los
   controles de formulario y las barras de desplazamiento. */

/* ---------- reset mínimo ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scrollbar-gutter:stable; color-scheme:light}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-b);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto}
p{margin:0}
ul{margin:0; padding:0; list-style:none}

/* ---------- titulares ----------
   Los tamaños los fija theme.json (presets fluidos). Aquí solo el ajuste
   óptico que theme.json no expresa. */
h1,h2,h3,h4,h5,h6{margin:0; text-wrap:balance}
h1{letter-spacing:-.015em}
h2{letter-spacing:-.012em}

/* ---------- enlaces y foco ---------- */
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-h); text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-s)}

/* Negrita en 600: es el semibold real de IBM Plex Sans y de Spectral.
   Sin este ajuste el navegador sintetizaría un 700 que no existe en disco. */
b,strong{font-weight:600}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- primitivas de texto ---------- */
.eyebrow{
  font-family:var(--ff-m); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); display:block;
}
.lead{font-size:19px; color:var(--ink-2); line-height:1.58}
.muted{color:var(--ink-2)}
.small{font-size:14.5px; color:var(--ink-3); line-height:1.55}
.note{
  font-size:14.5px; color:var(--ink-2); line-height:1.55;
  border-left:2px solid var(--line-2); padding-left:var(--s4);
}
.prose{max-width:var(--measure)}

.statement{
  font-family:var(--ff-d);
  font-size:var(--wp--preset--font-size--statement);
  line-height:1.3; letter-spacing:-.01em; color:var(--ink); max-width:22ch;
}
.pull{
  font-family:var(--ff-d); font-size:clamp(19px,2.2vw,25px); line-height:1.42;
  border-left:2px solid var(--accent); padding-left:var(--s5); max-width:52ch;
}

/* marcadores de trabajo · nunca deben llegar a publicación */
.pend{
  font-family:var(--ff-m); font-size:12.5px; line-height:1.6; color:var(--ink-3);
  border:1px dashed var(--line-2); border-radius:var(--r-s);
  padding:var(--s3) var(--s4); max-width:62ch;
}
.pend b, .pend strong{color:var(--accent); letter-spacing:.02em}
.pend.rec{border-style:solid; background:var(--surface-2)}
.pend.rec b, .pend.rec strong{color:var(--ink-2)}

/* ---------- pilas y agrupaciones ---------- */
.stack{display:flex; flex-direction:column}
.g2{gap:var(--s2)} .g3{gap:var(--s3)} .g4{gap:var(--s4)} .g5{gap:var(--s5)}
.g6{gap:var(--s6)} .g7{gap:var(--s7)} .g8{gap:var(--s8)}
.hgroup{display:flex; flex-direction:column; gap:var(--s4)}

/* Ambito geografico bajo el hero de portada. */

.scope{
  font-family:var(--ff-m); font-size:13px; color:var(--ink-2); line-height:1.6;
  border-top:1px solid var(--line); padding-top:var(--s4); max-width:56ch;
}

.scope b, .scope strong{color:var(--ink); font-weight:500}