/* ==========================================================================
   La Voz de Dios · BASE
   Reinicio, tipografía de documento y utilidades de maquetación.
   Consume tokens.css. No define ni un color ni una medida en crudo.
   ========================================================================== */

/* --- Tipografías locales -------------------------------------------------- */
@font-face{
  font-family:"Boldonse";
  src:url("../fonts/boldonse-400.woff2") format("woff2");
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:"DM Sans";
  src:url("../fonts/dmsans-variable.woff2") format("woff2");
  font-weight:400 700; font-display:swap;
}

/* --- Reinicio ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

/* Los enlaces de ancla bajan con suavidad. Vive aquí, y no en la capa de
   WordPress, para que la maqueta se comporte igual que la web publicada.
   El freno para quien pide menos movimiento está en componentes.css, junto
   al resto de reglas de prefers-reduced-motion. */
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--c-fondo);
  color:var(--c-tinta);
  font-family:var(--f-texto);
  font-size:var(--fs-cuerpo);
  line-height:var(--lh-cuerpo);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
/* Las dos listas, no solo una. Faltaba <ol> y el navegador le ponía su
   sangría de 40px: en el índice de las páginas legales se veía como un hueco
   vacío a la izquierda de los números. */
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
/* Todo lo que se puede pulsar responde al pasar por encima: la transición
   base la hereda cualquier enlace o botón que no defina la suya. */
a,button{
  transition:color var(--t-rapida),background-color var(--t-rapida),
             border-color var(--t-rapida),transform var(--t-rapida) var(--curva),
             opacity var(--t-rapida);
}
input,select,textarea{font:inherit;color:inherit}
/* Sin cursiva en toda la web, tampoco en el contenido que se escriba desde
   WordPress: el énfasis se marca con peso, no con inclinación. */
em,i,cite,q,blockquote,address,var,dfn{font-style:normal}
em,cite,dfn{font-weight:600}

/* --- Titulares -----------------------------------------------------------
   Boldonse en versales, peso 400 y tracking neutro. Es su forma natural:
   en caja normal pierde el carácter, y con peso 700 el navegador la
   engorda sintéticamente y le rompe el dibujo.
   Solo aquí: la interfaz (nav, botones, chips) usa DM Sans.
   ------------------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--f-titular);
  font-weight:var(--peso-titular);
  text-transform:uppercase;
  letter-spacing:var(--ls-titular);
  /* Reparte las líneas para que no quede una sola palabra colgando abajo */
  text-wrap:balance;
}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3)}
h4{font-size:var(--fs-h4);line-height:var(--lh-h4)}

/* --- Maquetación ---------------------------------------------------------- */
.env{
  width:100%;
  max-width:var(--ancho-max);
  margin-inline:auto;
  padding-inline:var(--padding-lat);
}
.sec{padding-block:var(--e-6)}
.sec--corta{padding-block:var(--e-4)}

.rej{display:grid;gap:var(--e-3)}
.rej--2{grid-template-columns:repeat(2,1fr)}
.rej--3{grid-template-columns:repeat(3,1fr)}
.rej--4{grid-template-columns:repeat(4,1fr)}
.rej--centrada{align-items:center}

.enc{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--e-3);flex-wrap:wrap;margin-bottom:var(--e-4);
}
.enc--centro{flex-direction:column;align-items:center;text-align:center}
.enc--centro p{max-width:54ch}

.acciones{display:flex;gap:12px;flex-wrap:wrap}
.acciones--sep{margin-top:var(--e-3)}

/* --- Texto ---------------------------------------------------------------- */
.serif{font-family:var(--f-acento);font-style:normal;letter-spacing:0}
.apagado{color:var(--c-tinta-70)}
.centro{text-align:center}
.chico{font-size:var(--fs-chico)}
.medio{font-size:var(--fs-medio)}

/* Etiquetas cortas: aquí sí van en versales, es un recurso de marca */
.eti{
  font-family:var(--f-texto);
  font-weight:var(--peso-fuerte);
  text-transform:uppercase;
  letter-spacing:var(--ls-etiqueta);
}
.eti--enlace{color:var(--c-enlace);font-size:var(--fs-mini)}

.t-16{margin-top:16px}
.t-18{margin-top:18px}
.t-22{margin-top:22px}
.ancho-20{max-width:20ch}
.ancho-22{max-width:22ch}
.ancho-24{max-width:24ch}
.ancho-48{max-width:48ch}
.ancho-50{max-width:50ch}
.ancho-52{max-width:52ch}

/* Solo para lectores de pantalla */
.oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media (max-width:980px){
  .rej--4{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .rej--2,.rej--3,.rej--4{grid-template-columns:1fr}
}

/* Título y descripción van juntos: el gap del .enc (pensado para separar
   título de acciones en fila) no debe abrir hueco en la versión centrada,
   y la descripción pega al título con un margen corto, no con el .t-16. */
.enc--centro{gap:0}
/* :is(.t-16,p) sube la especificidad por encima de las utilidades .t-* */
:is(h1,h2,h3)+p:is(.t-16,.t-18,.t-22,p){margin-top:8px}
@media (max-width:560px){ :is(h1,h2,h3)+p:is(.t-16,.t-18,.t-22,p){margin-top:6px} }