/*
Theme Name: La Fragua
Theme URI: https://circulodehombresgranada.es/
Author: Ignacio de la Cruz
Description: Tema de bloques para La Fragua, círculo de hombres en Granada. Papel color arena, tinta verde oscura, línea de un píxel y mucho aire. Todo el contenido se edita con el editor nativo de WordPress y el tema no depende de ningún plugin.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: la-fragua
Tags: block-patterns, full-site-editing, one-column, custom-colors, custom-menu, editor-style, translation-ready
*/

/* ==========================================================================
   LA FRAGUA
   Un solo tema. Papel de color arena, tinta verde oscura, línea fina y mucho
   aire. Los iconos son de trazo y comparten grosor con las reglas, para que
   toda la página parezca dibujada con el mismo lápiz.

   Los colores, las tipografías y los tamaños viven en `theme.json`, así que
   se pueden cambiar desde el editor del sitio sin tocar este archivo. Aquí
   está lo que el editor no sabe expresar: las variantes de sección, la prosa,
   la escalera de precios, las listas de encaje y descarte y el acordeón.
   ========================================================================== */

:root {
  --papel: var(--wp--preset--color--papel);
  --papel-claro: var(--wp--preset--color--papel-claro);
  --papel-arena: var(--wp--preset--color--papel-arena);
  --tinta: var(--wp--preset--color--tinta);
  --tinta-suave: var(--wp--preset--color--tinta-suave);
  --apagado: var(--wp--preset--color--apagado);
  --linea: var(--wp--preset--color--linea);
  --linea-fuerte: var(--wp--preset--color--linea-fuerte);
  --oscuro: var(--wp--preset--color--oscuro);
  --oscuro-texto: var(--wp--preset--color--oscuro-texto);

  --max: 71rem;
  --medida: var(--wp--custom--medida, 64ch);
  --estrecho: var(--wp--custom--estrecho, 44rem);
  --canal: var(--wp--custom--canal, clamp(1.25rem, 5vw, 3rem));
  --paso: var(--wp--custom--paso, clamp(4rem, 9vw, 8.5rem));
  --paso-corto: var(--wp--custom--paso-corto, clamp(2.5rem, 5vw, 4rem));
  --pista: var(--wp--custom--pista, 0.2em);
  --dur: var(--wp--custom--duracion, 340ms);
  --curva: var(--wp--custom--curva, cubic-bezier(0.22, 1, 0.36, 1));
}

/* --- Base ---------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

a {
  text-decoration-color: var(--linea-fuerte);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

::selection {
  background: var(--tinta);
  color: var(--papel-claro);
}

:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}

/* ==========================================================================
   LA ESCALA TIPOGRÁFICA

   Está aquí y no solo en `theme.json` a propósito. WordPress publica los
   estilos de `theme.json` con selectores de especificidad cero, del tipo
   `:root :where(h1)`, y cualquier hoja del tema o de un bloque los pisa sin
   querer. Las medidas de los títulos son la mitad del diseño de este sitio,
   así que van escritas con un selector que gana, y `theme.json` sigue
   llevándolas para que el editor las muestre igual.
   ========================================================================== */

:root h1,
:root h2,
:root h3,
:root h4 {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--tinta);
  /* Sin `margin: 0` aquí: le ganaría al aire que WordPress pone entre bloques
     hermanos y los títulos quedarían pegados al rótulo de encima. */
}

:root h1 {
  font-size: var(--wp--preset--font-size--h1);
  line-height: 1.06;
}

:root h2 {
  font-size: var(--wp--preset--font-size--h2);
}

:root h3 {
  font-size: var(--wp--preset--font-size--h3);
  line-height: 1.22;
  font-weight: 400;
}

:root h4 {
  font-size: var(--wp--preset--font-size--h4);
  line-height: 1.3;
  font-weight: 500;
}

/* Un tamaño elegido en el editor manda sobre la escala. */
:root :is(h1, h2, h3, h4).has-h-1-font-size { font-size: var(--wp--preset--font-size--h1); }
:root :is(h1, h2, h3, h4).has-h-2-font-size { font-size: var(--wp--preset--font-size--h2); }
:root :is(h1, h2, h3, h4).has-h-3-font-size { font-size: var(--wp--preset--font-size--h3); }
:root :is(h1, h2, h3, h4).has-h-4-font-size { font-size: var(--wp--preset--font-size--h4); }

/* La medida de lectura no la fija el contenedor, la fija el párrafo: así una
   sección puede ser ancha y el texto seguir siendo legible.

   Las tablas quedan fuera: una comparativa de cinco columnas necesita todo el
   ancho de la columna del sitio, y con la medida de lectura encima se
   estrangula y aparece una barra de desplazamiento donde sobraba sitio. */
p,
.wp-block-list {
  max-width: var(--medida);
}

p {
  text-wrap: pretty;
}

.wp-block-list {
  padding-left: 1.35rem;
}

strong {
  color: var(--tinta);
  font-weight: 600;
}

/* ==========================================================================
   SECCIONES
   Las variantes que en el editor aparecen como estilos del bloque Grupo.

   LA COLUMNA DEL SITIO, y por qué está resuelta con relleno y no con anchos.

   Una sección es de ancho completo, porque su fondo tiene que llegar a los dos
   bordes de la pantalla, y su contenido vive en una columna de 71rem centrada.
   La forma evidente de hacerlo en WordPress es la maqueta «contenida», que
   pone `max-width` y `margin-inline: auto` a cada hijo. Y ahí está la trampa:
   ese margen automático centra *cualquier* hijo más estrecho que la columna, y
   en este sitio casi todos lo son, porque un párrafo mide 64ch. El resultado
   es un texto centrado en medio de la pantalla en lugar de alineado a la
   izquierda de su columna.

   Así que la columna la hace el relleno de la sección: se aparta lo que sobra
   a cada lado y lo que queda dentro mide exactamente 71rem. El fondo sigue
   siendo de ancho completo, los hijos empiezan todos en el mismo sitio y cada
   uno se queda con la medida que le toca. Las secciones se generan con la
   maqueta de flujo, no con la contenida, justamente para esto.
   ========================================================================== */

.is-style-fragua-seccion,
.is-style-fragua-seccion-arena,
.is-style-fragua-seccion-oscura,
.is-style-fragua-seccion-filete,
.is-style-fragua-seccion-corta,
.fragua-heroe,
.fragua-cabecera,
.fragua-pie,
.fragua-migas,
.fragua-correo {
  padding-inline: max(var(--canal), calc((100% - var(--max)) / 2));
}

.is-style-fragua-seccion,
.is-style-fragua-seccion-arena,
.is-style-fragua-seccion-oscura,
.is-style-fragua-seccion-filete,
.is-style-fragua-seccion-corta {
  padding-block: var(--paso);
  position: relative;
}

.is-style-fragua-seccion-corta {
  padding-block: var(--paso-corto);
}

.is-style-fragua-seccion-filete {
  border-top: 1px solid var(--linea);
}

.is-style-fragua-seccion-arena {
  background: var(--papel-arena);
}

.is-style-fragua-seccion-oscura {
  background: var(--oscuro);
  color: var(--oscuro-texto);
}

.is-style-fragua-seccion-oscura :is(h1, h2, h3, h4),
.is-style-fragua-seccion-oscura strong {
  color: var(--papel-claro);
}

.is-style-fragua-seccion-oscura .is-style-fragua-rotulo,
.is-style-fragua-seccion-oscura .is-style-fragua-letra-pequena,
.is-style-fragua-seccion-oscura .is-style-fragua-nota {
  color: color-mix(in srgb, var(--oscuro-texto) 66%, transparent);
}

.is-style-fragua-seccion-oscura .wp-block-button__link {
  background: var(--papel-claro);
  border-color: var(--papel-claro);
  color: var(--oscuro);
}

.is-style-fragua-seccion-oscura .is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--papel-claro);
  border-color: color-mix(in srgb, var(--papel-claro) 40%, transparent);
}

/* La banda de cierre: oscura, estrecha y centrada. Es la que remata casi todas
   las páginas, así que es un solo estilo y no tres clases sumadas. */
.is-style-fragua-cierre {
  padding-block: var(--paso);
  /* La misma cuenta que las secciones, con la columna estrecha. */
  padding-inline: max(var(--canal), calc((100% - var(--estrecho)) / 2));
  background: var(--oscuro);
  color: var(--oscuro-texto);
  text-align: center;
}

.is-style-fragua-cierre :is(h1, h2, h3, h4),
.is-style-fragua-cierre strong {
  color: var(--papel-claro);
}

/* Sobre el fondo oscuro, el texto es el claro. La entradilla lleva el tono de
   la tinta suave, que ahí abajo no se lee. */
.is-style-fragua-cierre p {
  margin-inline: auto;
  color: var(--oscuro-texto);
}

.is-style-fragua-cierre .is-style-fragua-letra-pequena,
.is-style-fragua-cierre .is-style-fragua-nota {
  color: color-mix(in srgb, var(--oscuro-texto) 66%, transparent);
}

.is-style-fragua-cierre .wp-block-buttons {
  justify-content: center;
}

.is-style-fragua-cierre .wp-block-button__link {
  background: var(--papel-claro);
  border-color: var(--papel-claro);
  color: var(--oscuro);
}

.is-style-fragua-cierre .is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--papel-claro);
  border-color: color-mix(in srgb, var(--papel-claro) 40%, transparent);
}

/* El aire de la banda de cierre, que es el mismo en todas las páginas. */
.is-style-fragua-cierre > .is-style-fragua-entradilla,
.is-style-fragua-seccion-oscura > .is-style-fragua-entradilla {
  margin-block-start: 1.35rem;
}

.is-style-fragua-cierre > .wp-block-buttons,
.is-style-fragua-seccion-oscura > .wp-block-buttons {
  margin-block-start: 2.25rem;
}

/* Combinaciones. Van después de los estilos de sección a propósito: son clases
   sueltas que se añaden a una sección para acortarla o ponerle el filete, y así
   el editor sigue teniendo un solo estilo elegido en el panel. */
.fragua-corta {
  padding-block: var(--paso-corto);
}

.fragua-filete {
  border-top: 1px solid var(--linea);
}

/* Contenedor estrecho y centrado, para los cierres y las bandas oscuras. */
.fragua-estrecho > :where(:not(.alignfull)) {
  max-width: var(--estrecho);
  margin-inline: auto;
}

.fragua-centrado,
.fragua-centrado p {
  text-align: center;
}

.fragua-centrado p,
.fragua-centrado .wp-block-list {
  margin-inline: auto;
}

.fragua-centrado .wp-block-buttons {
  justify-content: center;
}

/* Cabecera de sección centrada, el patrón que más se repite. */
.is-style-fragua-cabecera {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.is-style-fragua-cabecera p {
  margin-inline: auto;
}

.is-style-fragua-cabecera .is-style-fragua-entradilla {
  margin-top: 1.4rem;
}

/* El héroe de una página que no es la portada. Sin relleno inferior: el filete
   y el relleno de la sección siguiente ya dan el aire, y sumar los tres deja
   un hueco que parece un error. */
.fragua-hero-pagina {
  padding-bottom: 0;
}

.fragua-hero-pagina h1 {
  max-width: 34ch;
}

.fragua-hero-pagina .is-style-fragua-entradilla {
  margin-top: 1.75rem;
}

.fragua-hero-pagina .wp-block-separator {
  margin-bottom: 1.75rem;
}

/* ==========================================================================
   EL AIRE Y LAS MEDIDAS

   Seis pasos de separación y unas cuantas medidas de lectura. Están aquí, con
   su clase, porque un estilo en línea escrito a mano en el contenido deja el
   bloque marcado como no válido en el editor.
   ========================================================================== */

.fragua-aire-xs { margin-top: 1rem; }
.fragua-aire-poco { margin-top: 1.35rem; }
.fragua-aire-sm { margin-top: 1.75rem; }
.fragua-aire-md { margin-top: 2rem; }
.fragua-aire-lg { margin-top: 2.5rem; }
.fragua-aire-xl { margin-top: clamp(2.75rem, 7vw, 5rem); }

.fragua-medida-42 { max-width: 42ch; }
.fragua-medida-46 { max-width: 46ch; }
.fragua-medida-48 { max-width: 48ch; }
.fragua-medida-52 { max-width: 52ch; margin-inline: auto; }
.fragua-medida-54 { max-width: 54ch; }
.fragua-medida-58 { max-width: 58ch; margin-inline: auto; }
.fragua-medida-62 { max-width: 62ch; }

/* El remate de una sección, separado con un filete de la lista de arriba. */
.fragua-remate {
  margin-top: 3rem;
  border-top: 1px solid var(--linea);
  padding-top: 2rem;
}

/* ==========================================================================
   DETALLES TIPOGRÁFICOS
   Estilos del bloque Párrafo, elegibles en el editor.
   ========================================================================== */

/* El rótulo de sección. Va en tinta suave y no en apagado: con el tono
   apagado cumplía el contraste mínimo y aun así se saltaba al leer. */
.is-style-fragua-rotulo {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: var(--pista);
  text-transform: uppercase;
  color: var(--tinta-suave);
  max-width: none;
}

.fragua-rotulo-tinta {
  color: var(--tinta);
}

.is-style-fragua-entradilla {
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.55;
  color: var(--tinta-suave);
  max-width: 52ch;
  font-weight: 400;
}

.is-style-fragua-apertura {
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.55;
  color: var(--tinta-suave);
}

.is-style-fragua-nota {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--apagado);
}

.is-style-fragua-letra-pequena {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--apagado);
  line-height: 1.6;
  letter-spacing: 0.01em;
}

/* Respuesta directa bajo un encabezado con forma de pregunta. Es el bloque
   que los buscadores extraen y citan, así que se marca visualmente. */
.is-style-fragua-respuesta {
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.55;
  color: var(--tinta);
  border-left: 1px solid var(--linea-fuerte);
  padding-left: 1.4rem;
}

/* Etiqueta de recuadro punteado: los avisos internos de «pendiente». */
.is-style-fragua-etiqueta {
  display: inline-block;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--apagado);
  border: 1px dashed var(--linea-fuerte);
  padding: 0.4em 0.8em;
  max-width: none;
}

/* La misma etiqueta punteada, en medio de una frase. */
.fragua-tag {
  display: inline-block;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--apagado);
  border: 1px dashed var(--linea-fuerte);
  padding: 0.4em 0.8em;
}

/* Rótulo monoespaciado del sitio, para nombres de archivo y claves. */
.fragua-clave {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  letter-spacing: 0.14em;
  font-size: var(--wp--preset--font-size--xs);
  color: var(--tinta);
}

/* Cifra grande de la rejilla de datos. */
.fragua-cifra {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tinta);
  max-width: none;
}

.fragua-cifra-rotulo {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--apagado);
  line-height: 1.7;
  max-width: none;
}

.is-style-fragua-cifras {
  text-align: center;
}

.is-style-fragua-cifras .wp-block-column > * + * {
  margin-top: 0.9rem;
}

/* Filete corto, sustituye a cualquier ornamento. */
.wp-block-separator.is-style-fragua-filete {
  width: 3.5rem;
  max-width: 3.5rem;
  height: 1px;
  background: var(--linea-fuerte);
  border: 0;
  opacity: 1;
  margin-inline: 0;
  margin-block: clamp(1.75rem, 4vw, 2.75rem);
}

.fragua-centrado .wp-block-separator.is-style-fragua-filete,
.is-style-fragua-cabecera .wp-block-separator.is-style-fragua-filete {
  margin-inline: auto;
}

.wp-block-separator:not(.is-style-fragua-filete) {
  border: 0;
  border-top: 1px solid var(--linea);
  opacity: 1;
  height: 0;
  width: 100%;
  max-width: none;
}

/* ==========================================================================
   PROSA
   El equivalente de `.prose`: la mitad del sitio son bloques de encabezado,
   respuesta destacada, párrafos y listas.
   ========================================================================== */

.is-style-fragua-prosa > :where(:not(.alignfull)) {
  max-width: var(--medida);
  margin-inline: 0;
}

.is-style-fragua-prosa > * + * {
  margin-top: 1.4em;
}

.is-style-fragua-prosa :is(h2, .wp-block-heading.fragua-h2) {
  font-size: var(--wp--preset--font-size--h3);
  margin-top: 2.8em;
  padding-top: 1em;
  border-top: 1px solid var(--linea);
}

.is-style-fragua-prosa > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.is-style-fragua-prosa h3 {
  font-size: var(--wp--preset--font-size--h4);
  margin-top: 2.2em;
}

.is-style-fragua-prosa :is(h2, h3) + p {
  margin-top: 0.75em;
}

.is-style-fragua-prosa li + li {
  margin-top: 0.6em;
}

.is-style-fragua-prosa li::marker {
  color: var(--apagado);
}

.is-style-fragua-prosa a {
  text-decoration: underline;
  text-decoration-color: var(--linea-fuerte);
}

.is-style-fragua-prosa a:hover {
  text-decoration-color: var(--tinta);
  color: var(--tinta);
}

.is-style-fragua-prosa .wp-block-table {
  margin-block: 0.5em;
}

.is-style-fragua-prosa blockquote {
  border-left: 1px solid var(--linea-fuerte);
  padding-left: 1.4rem;
}

/* ==========================================================================
   BOTONES Y ENLACES DE FLECHA
   ========================================================================== */

.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  cursor: pointer;
  transition: background var(--dur) var(--curva), color var(--dur) var(--curva),
    border-color var(--dur) var(--curva);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  color: var(--tinta);
  border-color: var(--linea-fuerte);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  border-color: var(--tinta);
  background: transparent;
  color: var(--tinta);
}

.wp-block-buttons {
  gap: 0.85rem;
  align-items: center;
}

/* Enlace con flecha, para los «siguiente paso» del final de una sección. */
.is-style-fragua-flecha a,
a.fragua-flecha {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--tinta);
  border-bottom: 1px solid var(--linea-fuerte);
  padding-bottom: 0.2em;
  transition: border-color var(--dur) var(--curva);
}

.is-style-fragua-flecha a::after,
a.fragua-flecha::after {
  content: '→';
  transition: transform var(--dur) var(--curva);
}

.is-style-fragua-flecha a:hover,
a.fragua-flecha:hover {
  border-color: var(--tinta);
}

.is-style-fragua-flecha a:hover::after,
a.fragua-flecha:hover::after {
  transform: translateX(3px);
}

/* ==========================================================================
   TARJETAS, DOSSIER Y LISTAS DE ENCAJE
   ========================================================================== */

.is-style-fragua-tarjeta {
  border-top: 1px solid var(--linea-fuerte);
  padding-top: 1.6rem;
  height: 100%;
}

.is-style-fragua-tarjeta h3 {
  margin-bottom: 0.8rem;
}

.is-style-fragua-tarjeta p {
  color: var(--tinta-suave);
}

.fragua-tarjeta-num,
.fragua-dossier-num {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--apagado);
  max-width: none;
}

/* Lista numerada tipo dossier: número a la izquierda, contenido a la derecha.
   Se aplica al bloque Grupo que envuelve las entradas. */
.is-style-fragua-dossier {
  border-top: 1px solid var(--linea);
}

.is-style-fragua-dossier > .wp-block-group,
.is-style-fragua-dossier > .wp-block-columns {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0 1.5rem;
  padding-block: clamp(1.6rem, 3.5vw, 2.4rem);
  border-bottom: 1px solid var(--linea);
  align-items: baseline;
  margin-block: 0;
  max-width: none;
}

/* Dentro de una rejilla no vale el aire que WordPress pone entre bloques
   hermanos: movería la segunda celda hacia abajo. */
.is-style-fragua-dossier > .wp-block-group > * {
  margin-block-start: 0;
}

.is-style-fragua-dossier .fragua-dossier-num {
  padding-top: 0.5em;
}

/* El aire de dentro de una entrada: pegado al título y suelto entre párrafos.
   Sin esto manda el aire general entre bloques y el título queda descolgado. */
.is-style-fragua-dossier h3 + * {
  margin-block-start: 0.5rem;
}

.is-style-fragua-dossier p + p {
  margin-block-start: 0.9rem;
}

.is-style-fragua-dossier p {
  color: var(--tinta-suave);
}

.fragua-dossier-min {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--apagado);
  white-space: nowrap;
}

@media (max-width: 34rem) {
  .is-style-fragua-dossier > .wp-block-group,
  .is-style-fragua-dossier > .wp-block-columns {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
}

/* Listas de encaje y descarte. El sí lleva un filete dibujado en lugar de un
   guion, para no meter tipografía de guion en el texto. */
.wp-block-list.is-style-fragua-si,
.wp-block-list.is-style-fragua-no {
  list-style: none;
  padding-left: 0;
}

.wp-block-list.is-style-fragua-si li,
.wp-block-list.is-style-fragua-no li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--tinta-suave);
}

.wp-block-list.is-style-fragua-si li + li,
.wp-block-list.is-style-fragua-no li + li {
  margin-top: 0.85rem;
}

.wp-block-list.is-style-fragua-si li::before,
.wp-block-list.is-style-fragua-no li::before {
  position: absolute;
  left: 0;
  color: var(--apagado);
}

.wp-block-list.is-style-fragua-si li::before {
  content: '';
  top: 0.88em;
  width: 0.85rem;
  height: 1px;
  background: var(--tinta);
}

.wp-block-list.is-style-fragua-no li::before {
  content: '×';
  top: 0;
}

/* Cronología del facilitador. */
.is-style-fragua-cronologia {
  border-top: 1px solid var(--linea);
  list-style: none;
  padding-left: 0;
}

.is-style-fragua-cronologia li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 1.5rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--linea);
}

/* ==========================================================================
   PRECIO: FICHA DESTACADA Y ESCALERA
   ========================================================================== */

.is-style-fragua-oferta {
  border: 1px solid var(--linea-fuerte);
  background: var(--papel-claro);
  padding: clamp(1.9rem, 4vw, 3.25rem);
}

.fragua-precio {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2.75rem, 2rem + 3.2vw, 4.25rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--tinta);
  max-width: none;
}

.is-style-fragua-oferta .wp-block-list {
  list-style: none;
  padding-left: 0;
  margin-top: 1.75rem;
  max-width: none;
}

.is-style-fragua-oferta .wp-block-list li {
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--linea);
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  align-items: baseline;
  gap: 0.5rem;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--tinta-suave);
  margin-top: 0;
}

.is-style-fragua-oferta .wp-block-list li::before {
  content: '';
  width: 0.85rem;
  height: 1px;
  background: var(--linea-fuerte);
  transform: translateY(-0.35em);
}

.is-style-fragua-oferta > .is-style-fragua-nota {
  margin-top: 0.85rem;
}

.is-style-fragua-oferta > .is-style-fragua-letra-pequena {
  margin-top: 1.25rem;
}

.is-style-fragua-oferta > .wp-block-buttons,
.is-style-fragua-oferta > .wp-block-shortcode {
  margin-top: 2rem;
}

/* La escalera de los tres tramos: columnas separadas por una línea de un
   píxel, con el tramo abierto marcado arriba. */
.wp-block-columns.is-style-fragua-escalera {
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  margin-block: 0;
}

.wp-block-columns.is-style-fragua-escalera > .wp-block-column {
  background: var(--papel);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
}

.wp-block-columns.is-style-fragua-escalera > .wp-block-column.is-style-fragua-peldano-actual,
.wp-block-column.is-style-fragua-peldano-actual {
  background: var(--papel-claro);
  box-shadow: inset 0 3px 0 var(--tinta);
}

/* El precio del peldaño queda fuera: si no, esta regla, que es más específica,
   le quitaría su medida y la escalera se leería como un párrafo más. */
.wp-block-columns.is-style-fragua-escalera p:not(.fragua-peldano-precio) {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--tinta-suave);
  max-width: none;
}

.wp-block-columns.is-style-fragua-escalera .wp-block-column > * + * {
  margin-block-start: 0.9rem;
}

.wp-block-columns.is-style-fragua-escalera .is-style-fragua-rotulo + * {
  margin-block-start: 0.4rem;
}

.fragua-peldano-precio {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2.1rem, 1.6rem + 2vw, 3rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tinta);
  max-width: none;
}

.fragua-peldano-precio small,
.fragua-precio small {
  display: block;
  font-family: var(--wp--preset--font-family--cuerpo);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--apagado);
  margin-top: 0.7rem;
  line-height: 1.55;
}

/* Ficha de una forma de pago, en la página de pago. */
.is-style-fragua-cuota {
  border: 1px solid var(--linea-fuerte);
  border-radius: 2px;
  background: var(--papel-claro);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
}

.is-style-fragua-cuota .fragua-peldano-precio {
  font-size: var(--wp--preset--font-size--h2);
  margin-block: 0.75rem 1rem;
}

/* ==========================================================================
   PREGUNTAS: EL ACORDEÓN NATIVO
   `core/details` sin una línea de JavaScript, igual que el sitio original.
   ========================================================================== */

.wp-block-details {
  border-bottom: 1px solid var(--linea);
  max-width: none;
}

.wp-block-details:first-of-type {
  border-top: 1px solid var(--linea);
}

.wp-block-details > summary {
  cursor: pointer;
  list-style: none;
  padding-block: 1.5rem;
  padding-right: 2.5rem;
  position: relative;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--h4);
  font-weight: 400;
  line-height: 1.35;
  color: var(--tinta);
  transition: opacity var(--dur) var(--curva);
}

.wp-block-details > summary::-webkit-details-marker,
.wp-block-details > summary::marker {
  display: none;
  content: '';
}

.wp-block-details > summary:hover {
  opacity: 0.65;
}

.wp-block-details > summary::after {
  content: '';
  position: absolute;
  right: 0.35rem;
  top: 2.05rem;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 1px solid var(--tinta);
  border-bottom: 1px solid var(--tinta);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--curva);
}

.wp-block-details[open] > summary::after {
  transform: rotate(225deg);
}

.wp-block-details > :not(summary) {
  color: var(--tinta-suave);
}

.wp-block-details > :not(summary):last-child {
  padding-bottom: 1.8rem;
}

/* Dentro de un acordeón, la respuesta destacada no debe pesar más que la
   pregunta: se queda con el filete y con el cuerpo normal. */
.wp-block-details .is-style-fragua-respuesta {
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.7;
}

/* ==========================================================================
   TABLAS
   ========================================================================== */

.wp-block-table {
  overflow-x: auto;
  border-top: 1px solid var(--linea-fuerte);
  border-bottom: 1px solid var(--linea-fuerte);
}

.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 38rem;
}

.wp-block-table :is(th, td) {
  text-align: left;
  padding: 1rem 1.15rem;
  border: 0;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}

.wp-block-table tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}

.wp-block-table thead th {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apagado);
}

.wp-block-table tbody th {
  font-weight: 600;
  color: var(--tinta);
}

.wp-block-table td {
  color: var(--tinta-suave);
}

/* ==========================================================================
   CABECERA
   ========================================================================== */

.fragua-cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Opaca a propósito. Al 92 % con desenfoque, el texto de debajo se
     transparentaba detrás de la barra, y en un sitio cuyo argumento visual es
     la limpieza se lee como un fallo de pintado. */
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}

.fragua-cabecera > .wp-block-group {
  min-height: 4.75rem;
}

.fragua-marca a,
.fragua-marca {
  text-decoration: none;
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta);
  white-space: nowrap;
  max-width: none;
}

.fragua-marca small {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--apagado);
  margin-left: 0.5rem;
}

.fragua-cabecera .wp-block-navigation {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fragua-cabecera .wp-block-navigation__container {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fragua-cabecera .wp-block-navigation a {
  text-decoration: none;
  color: var(--apagado);
  transition: color var(--dur) var(--curva);
}

.fragua-cabecera .wp-block-navigation a:hover,
.fragua-cabecera .wp-block-navigation .current-menu-item a {
  color: var(--tinta);
}

.fragua-cabecera .wp-block-button__link {
  padding: 0.8em 1.5em;
  white-space: nowrap;
}

/* Por debajo de 68rem el botón de candidatura y el menú de cinco entradas no
   caben juntos en la barra, así que el botón se retira y queda el menú. */
@media (max-width: 67.999rem) {
  .fragua-cabecera .fragua-cta-cabecera {
    display: none;
  }
}

/* ==========================================================================
   PIE
   ========================================================================== */

.fragua-pie {
  border-top: 1px solid var(--linea);
  padding-block: var(--paso-corto) 2.5rem;
  background: var(--papel-arena);
}

.fragua-pie h2,
.fragua-pie .fragua-pie-titulo {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: var(--pista);
  text-transform: uppercase;
  color: var(--apagado);
  margin-bottom: 1.25rem;
  max-width: none;
}

.fragua-pie .wp-block-list {
  list-style: none;
  padding-left: 0;
}

.fragua-pie li + li {
  margin-top: 0.65rem;
}

/* En el pie ningún enlace va subrayado en reposo, tampoco los dos legales de
   la última línea: son una lista de direcciones, no texto con enlaces dentro. */
.fragua-pie a {
  text-decoration: none;
  color: var(--tinta-suave);
}

.fragua-pie a:hover {
  color: var(--tinta);
  text-decoration: underline;
}

.fragua-pie .wp-block-list a {
  font-size: 0.92rem;
}

.fragua-pie-cierre {
  margin-top: var(--paso-corto);
  padding-top: 1.75rem;
  border-top: 1px solid var(--linea);
}

/* ==========================================================================
   MIGAS DE PAN
   ========================================================================== */

.fragua-migas {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apagado);
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
}

.fragua-migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.fragua-migas li + li::before {
  content: '/';
  margin-right: 0.6rem;
  color: var(--linea-fuerte);
}

.fragua-migas a {
  text-decoration: none;
}

.fragua-migas a:hover {
  color: var(--tinta);
}

/* ==========================================================================
   FORMULARIOS
   El de la candidatura y el de alta en el correo diario. Los pinta el tema,
   sin ningún plugin de formularios.
   ========================================================================== */

.fragua-campo {
  display: block;
}

.fragua-campo + .fragua-campo {
  margin-top: 1.6rem;
}

.fragua-campo > span {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apagado);
  margin-bottom: 0.6rem;
}

.fragua-campo :is(input, textarea, select) {
  width: 100%;
  background: var(--papel-claro);
  border: 1px solid var(--linea-fuerte);
  border-radius: 2px;
  padding: 0.9em 1em;
  color: var(--tinta);
  transition: border-color var(--dur) var(--curva);
}

.fragua-campo :is(input, textarea)::placeholder {
  color: var(--apagado);
}

.fragua-campo :is(input, textarea, select):focus {
  border-color: var(--tinta);
  outline: none;
}

.fragua-campo textarea {
  min-height: 8rem;
  resize: vertical;
}

.fragua-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 1.05em 2.1em;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--tinta);
  border-radius: 999px;
  background: var(--tinta);
  color: var(--papel-claro);
  cursor: pointer;
  transition: background var(--dur) var(--curva), border-color var(--dur) var(--curva);
}

.fragua-boton:hover {
  background: #1c2721;
  border-color: #1c2721;
}

.fragua-boton--contorno {
  background: transparent;
  color: var(--tinta);
  border-color: var(--linea-fuerte);
}

.fragua-boton--contorno:hover {
  background: transparent;
  color: var(--tinta);
  border-color: var(--tinta);
}

.is-style-fragua-seccion-oscura .fragua-boton {
  background: var(--papel-claro);
  border-color: var(--papel-claro);
  color: var(--oscuro);
}

/* --- La caja de alta en el correo diario -------------------------------- */

.fragua-correo--seccion {
  padding-block: var(--paso);
  background: var(--papel-arena);
}

.fragua-correo--compacto {
  padding-block: var(--paso-corto);
  background: var(--papel-arena);
}

.fragua-correo--oscuro {
  padding-block: var(--paso);
  background: var(--oscuro);
  color: var(--oscuro-texto);
}

.fragua-correo--caja {
  border: 1px solid var(--linea-fuerte);
  border-radius: 2px;
  background: var(--papel-claro);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-inline: clamp(1.5rem, 3.5vw, 2.25rem);
}

.fragua-correo--pie {
  border-top: 1px solid var(--linea);
  margin-top: var(--paso-corto);
  padding-top: 2.25rem;
  padding-inline: 0;
}

.fragua-correo__cuerpo {
  max-width: 71rem;
  margin-inline: auto;
}

.fragua-correo--seccion .fragua-correo__cuerpo,
.fragua-correo--oscuro .fragua-correo__cuerpo {
  max-width: var(--estrecho);
  text-align: center;
}

.fragua-correo--caja .fragua-correo__cuerpo,
.fragua-correo--pie .fragua-correo__cuerpo {
  max-width: none;
}

.fragua-correo__titulo {
  text-wrap: balance;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--tinta);
  font-size: var(--wp--preset--font-size--h2);
}

.fragua-correo--compacto .fragua-correo__titulo {
  font-size: var(--wp--preset--font-size--h3);
}

.fragua-correo--caja .fragua-correo__titulo,
.fragua-correo--pie .fragua-correo__titulo {
  font-size: var(--wp--preset--font-size--h4);
  font-weight: 500;
  margin-top: 0.45rem;
}

.fragua-correo--oscuro .fragua-correo__titulo {
  color: var(--papel-claro);
}

.fragua-correo__texto {
  margin-top: 1.25rem;
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.5;
  color: var(--tinta-suave);
  max-width: 52ch;
}

.fragua-correo--seccion .fragua-correo__texto,
.fragua-correo--oscuro .fragua-correo__texto {
  margin-inline: auto;
}

.fragua-correo--compacto .fragua-correo__texto {
  font-size: var(--wp--preset--font-size--base);
  max-width: 62ch;
}

.fragua-correo--caja .fragua-correo__texto,
.fragua-correo--pie .fragua-correo__texto {
  margin-top: 0.75rem;
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.6;
  max-width: 48ch;
}

.fragua-correo--oscuro .fragua-correo__texto {
  color: var(--oscuro-texto);
}

.fragua-correo__nota,
.fragua-correo__sin {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--apagado);
}

.fragua-correo__nota {
  margin-top: 1rem;
  font-size: var(--wp--preset--font-size--xs);
  line-height: 1.6;
  max-width: 52ch;
}

.fragua-correo__sin {
  margin-top: 1.75rem;
  max-width: 46ch;
}

.fragua-correo--seccion :is(.fragua-correo__nota, .fragua-correo__sin),
.fragua-correo--oscuro :is(.fragua-correo__nota, .fragua-correo__sin) {
  margin-inline: auto;
}

.fragua-correo--oscuro :is(.fragua-correo__nota, .fragua-correo__sin) {
  color: color-mix(in srgb, var(--oscuro-texto) 66%, transparent);
}

.fragua-correo__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
  max-width: 30rem;
}

.fragua-correo--seccion .fragua-correo__form,
.fragua-correo--oscuro .fragua-correo__form {
  margin-inline: auto;
}

.fragua-correo--pie .fragua-correo__form {
  max-width: 26rem;
}

.fragua-correo__form input[type='email'] {
  flex: 1 1 13rem;
  min-width: 0;
  background: var(--papel-claro);
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  padding: 0.95em 1.35em;
  color: var(--tinta);
  transition: border-color var(--dur) var(--curva);
}

.fragua-correo__form input[type='email']::placeholder {
  color: var(--apagado);
}

.fragua-correo__form input[type='email']:focus {
  border-color: var(--tinta);
  outline: none;
}

.fragua-correo--oscuro .fragua-correo__form input[type='email'] {
  background: color-mix(in srgb, var(--papel-claro) 10%, transparent);
  border-color: color-mix(in srgb, var(--oscuro-texto) 38%, transparent);
  color: var(--papel-claro);
}

.fragua-correo__form button {
  flex: none;
}

.fragua-correo--caja .fragua-correo__form {
  margin-top: 1.35rem;
  gap: 0.6rem;
  max-width: none;
}

.fragua-correo--caja .fragua-correo__form input[type='email'],
.fragua-correo--caja .fragua-correo__form button {
  flex: 1 1 100%;
}

/* Donde el script pinta la confirmación o el error del alta. */
.fragua-correo__aviso {
  flex: 1 0 100%;
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.5;
  color: var(--tinta);
  text-align: left;
}

.fragua-correo__aviso[hidden] {
  display: none;
}

.fragua-correo--seccion .fragua-correo__aviso,
.fragua-correo--oscuro .fragua-correo__aviso {
  text-align: center;
}

.fragua-correo--oscuro .fragua-correo__aviso {
  color: var(--papel-claro);
}

/* Fuera de la pantalla, no enfocable y sin anunciar: solo lo rellena un robot. */
.fragua-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 52rem) {
  .fragua-correo--pie .fragua-correo__cuerpo {
    display: grid;
    grid-template-columns: 1fr minmax(19rem, 25rem);
    column-gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }

  .fragua-correo--pie .fragua-correo__form {
    margin-top: 0.4rem;
  }

  .fragua-correo--pie .fragua-correo__nota {
    grid-column: 1 / -1;
    margin-top: 1.75rem;
    max-width: 64ch;
  }
}

/* Aviso de que un enlace de pago es de prueba y no cobra. Pegado al botón a
   propósito: un cobro de prueba publicado en abierto se descubre tarde. */
.fragua-prueba {
  display: inline-block;
  margin-left: 0.6em;
  padding: 0.15em 0.5em;
  border: 1px dashed currentColor;
  border-radius: 2px;
  font-family: var(--wp--preset--font-family--display);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: middle;
  opacity: 0.75;
}

/* Confirmación y error de un envío, en la propia página. */
.fragua-aviso {
  border-left: 1px solid var(--linea-fuerte);
  padding-left: 1.4rem;
  color: var(--tinta);
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.55;
}

/* ==========================================================================
   REJILLA DE ELEMENTOS CON ICONO
   Los iconos son de trazo y se pintan con `mask-image`, así que heredan el
   color del texto y no hay una sola etiqueta <svg> en el contenido: cada
   pieza es un grupo con su título y su nota, editable como cualquier bloque.
   Los dibujos están en `assets/css/iconos.css`.
   ========================================================================== */

.fragua-elementos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.25rem, 5vw, 3.75rem) clamp(1rem, 3vw, 2rem);
  max-width: 71rem;
  margin-inline: auto;
}

@media (min-width: 40rem) {
  .fragua-elementos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 58rem) {
  .fragua-elementos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Variante para un número de piezas que no llena la última fila: se centra. */
.fragua-elementos--flujo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(2.25rem, 5vw, 3.75rem) clamp(1.5rem, 4vw, 3.25rem);
}

.fragua-elementos--flujo > .wp-block-group {
  flex: 0 1 9.5rem;
}

/* Dentro de la rejilla no vale el aire que WordPress pone entre bloques
   hermanos: bajaría cada pieza menos la primera y la fila quedaría escalonada. */
.fragua-elementos > * {
  margin-block-start: 0;
}

.fragua-elemento {
  text-align: center;
}

.fragua-elemento::before {
  content: '';
  display: block;
  margin: 0 auto 1.4rem;
  width: clamp(3.6rem, 7.5vw, 4.9rem);
  aspect-ratio: 1;
  background-color: currentColor;
  color: var(--tinta);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.fragua-elemento > * {
  margin-block-start: 0;
}

.fragua-elemento h3,
.fragua-elemento .fragua-elemento__titulo {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: var(--pista);
  text-transform: uppercase;
  color: var(--tinta);
  line-height: 1.7;
  margin: 0;
}

.fragua-elemento p {
  margin-top: 0.6rem;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--apagado);
  line-height: 1.5;
  max-width: none;
}

/* ==========================================================================
   PORTADA: EL HÉROE
   ========================================================================== */

/* El relleno lateral lo pone la regla de la columna, arriba. */
.fragua-heroe {
  padding-block: clamp(4rem, 11vh, 8rem) clamp(3.5rem, 9vh, 6.5rem);
}

.fragua-heroe h1 {
  max-width: none;
}

.fragua-heroe .is-style-fragua-entradilla {
  max-width: 58ch;
}

/* ==========================================================================
   UTILIDADES
   ========================================================================== */

.fragua-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fragua-salto {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--tinta);
  color: var(--papel-claro);
  padding: 0.75em 1.25em;
}

.fragua-salto:focus {
  left: 0;
}

/* Un texto del diario: el titular y el pie de firma. */
.fragua-titular {
  max-width: 40ch;
}

.fragua-titular > * + * {
  margin-block-start: 0.9rem;
}

.fragua-pie-articulo {
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linea);
}

/* Índice del diario: la entrada de un artículo. */
.fragua-entrada {
  padding-block: clamp(1.6rem, 3.5vw, 2.4rem);
  border-bottom: 1px solid var(--linea);
}

.wp-block-post-template > li:first-child .fragua-entrada {
  border-top: 1px solid var(--linea);
}

.fragua-entrada > * + * {
  margin-block-start: 0.6rem;
}

.fragua-entrada h2,
.fragua-entrada h3 {
  margin-bottom: 0.5rem;
}

.fragua-entrada h2 a,
.fragua-entrada h3 a {
  text-decoration: none;
}

.fragua-entrada h2 a:hover,
.fragua-entrada h3 a:hover {
  text-decoration: underline;
  text-decoration-color: var(--linea-fuerte);
}

/* La paginación del índice, en el tono de los rótulos. */
.wp-block-query-pagination {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}