`, sin enlace, y por eso el estilo se declara
sobre `.page-numbers` y no sobre `a`. */
.navigation.pagination{ margin-top:48px; }
.navigation.pagination .nav-links{
display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.navigation.pagination .page-numbers{
display:inline-flex; align-items:center; justify-content:center;
min-width:40px; padding:0 12px; height:40px;
border:1px solid var(--gris-cla); border-radius:2px;
font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
color:var(--gris-osc); transition:border-color .25s ease, background .25s ease, color .25s ease;
}
.navigation.pagination a.page-numbers:hover{ border-color:var(--negro); color:var(--negro); }
.navigation.pagination .page-numbers.current{
background:var(--negro); border-color:var(--negro); color:var(--blanco);
}
.navigation.pagination .page-numbers.dots{ border-color:transparent; }
/* --- Artículo ------------------------------------------------------------
El ancho de lectura es más estrecho que el `.wrap` general: una línea de
texto corrido que cruza los 1280 px del sitio obliga al ojo a saltar de
vuelta a ciegas al final de cada renglón. */
.entrada-cabeza, .entrada-foto, .entrada-cuerpo{ max-width:760px; margin:0 auto; }
.entrada-cabeza h1{ font-size:30px; line-height:1.22; margin-bottom:16px; }
@media(min-width:1024px){ .entrada-cabeza h1{ font-size:42px; } }
.entrada-fecha{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gris-med); }
.entrada-foto{ aspect-ratio:16/9; overflow:hidden; border-radius:6px; }
.entrada-foto img{ width:100%; height:100%; object-fit:cover; }
/* --- Prosa ---------------------------------------------------------------
La comparten los dos sitios del tema donde el marcado no está escrito a
mano: el cuerpo de un artículo del blog, que sale de `the_content()`, y las
tres páginas legales, que transcriben documentos largos con encabezados,
listas y enlaces. Antes vivía pegada a `.entrada-cuerpo`; se separó al
llegar las páginas legales, porque la alternativa era duplicar veinte
reglas para conseguir exactamente lo mismo.
`> *` no se usa a propósito: el editor de bloques envuelve en `` y en
``, y una regla de hijo directo se saltaría todo lo anidado. */
.prosa{ font-size:15.5px; color:var(--negro); }
@media(min-width:1024px){ .prosa{ font-size:16px; } }
.prosa p{ margin-bottom:22px; color:var(--gris-osc); }
.prosa h2{ font-size:24px; line-height:1.3; margin:44px 0 16px; }
@media(min-width:1024px){ .prosa h2{ font-size:28px; } }
.prosa h3{
font-family:var(--body); font-weight:600; font-size:17px; letter-spacing:0;
line-height:1.4; margin:32px 0 12px;
}
/* El primer encabezado del artículo no separa nada de nada: su margen
superior solo abriría un hueco entre el titular y el cuerpo. */
.prosa > :first-child{ margin-top:0; }
.prosa ul, .prosa ol{ margin:0 0 22px 22px; color:var(--gris-osc); }
.prosa ul{ list-style:disc; }
.prosa ol{ list-style:decimal; }
.prosa li{ margin-bottom:8px; }
.prosa li::marker{ color:var(--gris-med); }
.prosa blockquote{
margin:32px 0; padding:4px 0 4px 24px; border-left:2px solid var(--negro);
font-size:17px; line-height:1.55;
}
.prosa blockquote p:last-child{ margin-bottom:0; }
/* La regla global `a{color:inherit; text-decoration:none}` de la sección 1 deja
los enlaces del editor indistinguibles del texto. Dentro de una guía, donde
quien escribe enlaza a una ley o a otra entrada, eso los hace invisibles. */
.prosa a{
color:var(--negro); text-decoration:underline; text-underline-offset:3px;
text-decoration-color:var(--gris-cla); transition:text-decoration-color .25s ease;
}
.prosa a:hover{ text-decoration-color:var(--negro); }
/* Un botón puesto desde el editor es un enlace, así que la regla de arriba
también lo alcanza: le impone el color del texto y el subrayado. Sobre
`.btn-primary`, que pinta el fondo negro, eso daba negro sobre negro. Se
restituye lo que cada variante ya declaraba en la sección 3, ahora con la
especificidad suficiente para ganar dentro de la prosa. */
.prosa a.btn{ text-decoration:none; }
.prosa a.btn-primary{ color:var(--blanco); }
.prosa a.btn-secondary{ color:var(--negro); }
.prosa a.btn-secondary:hover{ color:var(--blanco); }
.prosa strong{ font-weight:600; color:var(--negro); }
.prosa img{ border-radius:6px; margin:12px 0; }
.prosa figure{ margin:32px 0; }
.prosa figcaption{ margin-top:10px; font-size:12.5px; color:var(--gris-med); }
.prosa hr{ margin:44px 0; border:0; border-top:1px solid var(--gris-cla); }
.prosa table{ width:100%; border-collapse:collapse; margin-bottom:22px; font-size:14px; }
.prosa th, .prosa td{
padding:12px 14px; border:1px solid var(--gris-cla); text-align:left; vertical-align:top;
}
.prosa th{ font-weight:600; background:var(--gris-hue); }
.entrada-ctas{ justify-content:center; }
/* El listado y el archivo titulan con ``, no con el `` del mockup:
allí Recursos era una sección dentro del Inicio y el `` era el titular
de la portada; aquí la sección es la página entera, y publicarla sin
encabezado de primer nivel dejaría el documento sin raíz. */
.section-head h1{ font-size:30px; line-height:1.22; }
@media(min-width:1024px){ .section-head h1{ font-size:40px; } }
/* ==========================================================================
25. CORTINA DE ENTRADA DEL INICIO
El clip de marca a pantalla completa, solo en la portada y solo en la
primera visita de la sesión. Se reproduce entero —algo más de seis
segundos— y al terminar se funde para descubrir la web.
La regla que gobierna esta sección es la primera: **por defecto no hay
cortina**. Mostrarla es lo que hay que pedir, y solo se pide bajo `.js`.
Al revés —ocultarla con JavaScript— cualquier cosa que impidiera al script
ejecutarse dejaría el sitio tapado a pantalla completa, sin manera de
entrar ni de saber que hay algo debajo. Es la misma decisión que se tomó en
la sección 22 para `.reveal`, aquí con el error mucho más caro.
La clase `.js` la pone una línea en el ``, no el script diferido: si
se pusiera al final, la cortina caería *encima* de una página ya pintada.
========================================================================== */
.intro{ display:none; }
.js .intro{
display:block; position:fixed; inset:0;
/* Por encima de todo lo que flota: cabecera (50), botón de WhatsApp (60),
barra de CTA móvil (55) y enlace de salto al contenido (100). */
z-index:200;
/* Negro puro, y no el `--negro` de la paleta (#111): el clip es logotipo
blanco sobre negro absoluto, y cualquier diferencia de tono se vería como
un cambio de fondo en el instante en que el vídeo empieza a pintar. */
background:#000;
transition:opacity .9s ease, visibility .9s ease;
}
.js .intro.fuera{ opacity:0; visibility:hidden; pointer-events:none; }
/* `cover` llena la pantalla sin deformar el encuadre; lo que se pierde son
los bordes, y el plano está compuesto con el logotipo centrado por eso.
Cuánto se pierde depende de acertar el encuadre: el clip viene montado
apaisado y vertical, y `sitio.js` elige según la orientación de la pantalla
antes de cargarlo. Con uno solo, un teléfono ampliaría el fotograma
apaisado casi tres veces para quedarse con la franja central. */
.intro-video{ width:100%; height:100%; object-fit:cover; display:block; }
/* Mientras la cortina está puesta, el documento no se desplaza: la rueda del
ratón sobre una pantalla opaca da la impresión de que la página está
colgada. */
body.intro-puesta{ overflow:hidden; }
/* Quien pidió que nada se mueva no ve la cortina en absoluto. No se trata de
quitarle la transición y dejar el vídeo: un clip a pantalla completa es
precisamente lo que esa preferencia pide evitar. */
@media (prefers-reduced-motion: reduce){
.js .intro{ display:none; }
}
/* --- Los tres documentos legales en el pie -------------------------------
La línea inferior del pie tenía dos elementos —el aviso de derechos y las
redes— y ahora tiene tres. En escritorio, `space-between` los separaría
demasiado, así que los enlaces legales se agrupan aparte y se les da su
propio subrayado al pasar por encima, que es lo que distingue un enlace de
un texto gris cuando ambos comparten tamaño y color. */
.foot-legales{ display:flex; flex-wrap:wrap; gap:6px 20px; }
.foot-legales a{ color:var(--gris-med); transition:color .2s ease; }
.foot-legales a:hover{ color:var(--negro); text-decoration:underline; text-underline-offset:3px; }
@media(min-width:768px){ .foot-bottom{ gap:24px; } }
/* ==========================================================================
26. PÁGINAS LEGALES: EL DOCUMENTO OFICIAL
Las tres políticas —términos, tratamiento de datos y cookies— publican el
PDF firmado por el representante legal, y nada más: su titular y el
documento.
Se incrusta con `