@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap");

/* ==========================================================================
   El Derecho Escrito — hoja de estilos principal

   Sistema de diseno medido sobre la web del cliente (elderechoescrito.es).
   Regla mental de tipografia:
     Cormorant  -> lo que se mira   (logotipo, titulares)
     Source Serif -> lo que se lee  (cuerpo, entradillas, epigrafes)
     Inter      -> lo que se consulta (navegacion, fechas, etiquetas)

   OJO CON LOS PESOS DEL @import DE ARRIBA: solo existe lo que esta escrito ahi,
   y pedir uno que falte NO da ningun error.

   De Source Serif 4 hay 400 y 600, y nada entre medias. Si alguien encuentra
   pesados los epigrafes del articulo —van a 600, y a ese cuerpo cargan bastante—
   la tentacion es bajarlos a 500. No funciona: ante un peso que no esta, el
   navegador coge el mas cercano, aqui el 400, y el epigrafe se queda EXACTAMENTE
   al peso del cuerpo. Deja de distinguirse y nada avisa.

   Es el mismo fallo silencioso del 700 de Cormorant, unas lineas mas abajo en la
   lista, solo que al reves: alli quitarlo hace que el navegador ENGORDE el 600 y
   simule una cara que no existe. En los dos casos la pagina se pinta sin
   quejarse y el problema solo se ve midiendo.

   Para tocar un peso hay que anadirlo antes al @import. */

:root {
  /* Color */
  --tinta: #1e1e1e;
  --tinta-suave: #66615b;
  --nav: #34312e;
  --acento: #2f6e68;
  --acento-oscuro: #1f4d48;
  --papel: #ffffff;

  /* Blanco marmol frio. Es el unico token de la paleta que no es calido, junto
     al acento: su b* de Lab es -0,85, mientras que los bordes van en +3,9 y
     +5,2 y --tinta-suave en +4,1. Cambiar este valor mueve trece sitios de
     golpe, asi que conviene mirar la seccion de color de CLAUDE.md antes. */

  --papel-alt: #f6f5f7;
  --pie: #242424;
  --borde: #e5e1da;
  /* Un paso mas oscuro que --borde, para la linea de la cabecera. Separacion
     del blanco medida en dE: 16.4 frente a los 11.1 de --borde, un 48% mas,
     sin salirse del registro discreto. Conserva el desplazamiento calido de la
     paleta: no es un gris neutro. */
  --borde-marcado: #d8d2c9;

  /* Tipografia */
  --display: "Cormorant Garamond", Georgia, serif;
  --texto: "Source Serif 4", Georgia, serif;
  --ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Medidas */
  --ancho: 760px;        /* contenedor de lectura */
  --ancho-amplio: 1200px; /* contenedor de portada y rejillas */
  --lateral: 300px;      /* columna lateral del articulo */
  --alto-progreso: 30px; /* banda fija de progreso de lectura */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* El desplazamiento suave es la unica animacion que arranca sola en la pagina:
   se dispara al pulsar un enlace del indice o del salto al contenido, y mueve
   el articulo entero. Quien pide menos movimiento debe recibir un salto seco.

   La barra de progreso NO necesita regla aqui: sigue al scroll directamente,
   sin transicion ni animacion propia, igual que una barra de desplazamiento. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* El campo aparece y desaparece de golpe, sin desplegarse. */
  .busca__campo,
  .busca--abierta .busca__campo {
    transition: none;
  }

  /* La linea de la cabecera aparece de golpe, sin fundido. Un cambio de color
     no mueve nada y podria defenderse dejarlo, pero se desactiva por
     coherencia con el resto de transiciones del sitio. */
  body:has(.portada--video) .cabecera {
    transition: none;
  }
}

/* El [hidden] de la hoja del navegador declara display:none con la misma
   especificidad que una clase, y las hojas de autor ganan a las del navegador
   a igualdad de peso. O sea que CUALQUIER regla nuestra que ponga display
   —.tarjeta{display:flex}, .filtros{display:flex}, .filtro-aviso{display:flex}—
   deja el atributo sin efecto: el elemento sigue ocupando sitio aunque el JS
   lo haya marcado como oculto.

   Ha pasado tres veces, y la ultima fue peor que un descuadre: el listado
   contaba «0 resultados» con la tarjeta filtrada todavia a la vista. Se cierra
   aqui de una vez, en vez de ir anadiendo una excepcion por clase.

   El !important es el uso legitimo del mecanismo: hidden es un estado del
   documento, no una preferencia de estilo, y nada deberia poder discutirlo. */

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--acento);
  text-decoration: none;
}

a:hover {
  color: var(--acento-oscuro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Accesibilidad: enlace de salto y texto solo para lectores de pantalla */

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--acento);
  color: #fff;
  padding: 12px 20px;
  z-index: 100;
  font-family: var(--ui);
  font-size: 0.875rem;
}

.saltar:focus {
  left: 0;
}

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

.miel {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.contenedor {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 24px;
}

/* Modificador para secciones anchas: portada, rejillas de articulos. */
.contenedor--amplio {
  max-width: var(--ancho-amplio);
}

/* --------------------------------------------------------- Cabecera ----- */

/* EL FILETE ES DE 1px, y bajo de 2 para que se perciba mas fino.

   Se adelgaza el GROSOR y no se aclara el color, que es la otra via. El orden
   correcto de esa decision es mirar primero cuanto mide: a 1px ya no se puede
   adelgazar sin trucos —opacidad, o un hairline de 0.5px que en pantallas no
   Retina se ve igual o desaparece— y entonces lo que toca es bajar el
   contraste, porque menos contraste se percibe como mas fino en todas. Aqui
   habia 2px, asi que si se podia.

   Y ademas convenia por sistema: los 2px eran, junto al filete de la mancheta,
   los unicos del sitio. Todo lo demas —la caja de tarjeta, el panel de
   etiquetas, los campos del formulario, las pildoras— va a 1px. Esto mete la
   cabecera en la retícula que ya existia en vez de inventarle un grosor propio.

   EL COLOR NO SE TOCA. --borde-marcado esta elegido para esta linea porque
   tiene que leerse como un LIMITE: es un paso mas oscuro que --borde, dE 16,4
   contra 11,1 frente al blanco. Adelgazar y aclarar a la vez son dos
   reducciones sobre lo mismo y se arriesga a que deje de cerrar nada. Si aun
   asi se ve pesada, aclarar sigue estando disponible como segundo paso. */

.cabecera {
  background: var(--papel);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--borde-marcado);
}

/* En el inicio la linea no esta desde el principio: mientras la cabecera esta
   sobre la franja de portada, la imagen ya la separa del contenido y una linea
   ahi seria ruido. Aparece al pasar la franja, y de eso se encarga
   lineaDeCabecera() en main.js con un IntersectionObserver — no un listener de
   scroll, asi que no se ejecuta nada en cada pixel desplazado.

   EL BORDE SIGUE AHI SIEMPRE, ahora a 1px, y lo unico que cambia es su color.
   Es lo que garantiza que la cabecera no pegue un salto al aparecer la linea:
   el espacio ya estaba ocupado. Por eso transparent y no border: none.

   Al bajar de 2px a 1px ese salto evitado es de 1px en vez de 2, pero el
   mecanismo importa igual: un pixel de desplazamiento en una barra fija se ve
   perfectamente, porque todo el contenido de debajo salta con el.

   Se detecta por la portada con video en vez de marcar el <header>, para no
   tener que tocar el HTML de las seis paginas que llevan cabecera. */

body:has(.portada--video) .cabecera {
  border-bottom-color: transparent;
  transition: border-bottom-color 220ms ease;
}

body:has(.portada--video) .cabecera--con-linea {
  border-bottom-color: var(--borde-marcado);
}

/* Con movimiento reducido la linea aparece de golpe en vez de fundirse. No se
   pierde nada: lo que informa es que este o no este, no como llega. */

@media (prefers-reduced-motion: reduce) {
  body:has(.portada--video) .cabecera {
    transition: none;
  }
}

.cabecera__interior {
  max-width: var(--ancho-amplio);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.marca {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tinta);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* EL LOGO VA POR background-image Y NO POR mask, y el cambio no es opcional.

   Aqui habia la balanza pintada con `mask` + `background-color: currentColor`,
   que era lo correcto para un icono de un solo trazo: heredaba el color del
   enlace y no hacia falta duplicar el archivo para tenirlo.

   Con el logo nuevo eso NO sirve: una mascara se queda solo con el canal alfa,
   asi que el cuadrado verde con la figura blanca se aplanaria a un RECTANGULO
   MACIZO del color del texto. El logo tiene dos colores y tiene que llegar
   entero.

   Efecto lateral que conviene saber: al soltar `currentColor`, el logo YA NO
   cambia de color al pasar el raton. .marca:hover sigue tinendo el texto. Es lo
   correcto para una marca —un logotipo no se recolorea— pero es un cambio de
   comportamiento respecto a la balanza.

   VA EN ::before Y NO EN UN <img>, y eso resuelve solo el punto de
   accesibilidad: un pseudoelemento no entra en el arbol de accesibilidad, asi
   que el lector de pantalla lee «El Derecho Escrito» UNA vez, la del texto del
   enlace. Con un <img alt="El Derecho Escrito"> al lado lo diria dos veces.

   El tamano va en em para que siga al cuerpo de la marca: 1.5em de alto sobre
   los 26px del logotipo son 39px, y bajan a 33 cuando la marca cae a 22px por
   debajo de 600. El 1.64 de ancho es 1.5 x la proporcion del archivo
   (1312/1199 = 1.0942), asi que no deforma. */

.marca::before {
  content: "";
  flex: none;
  width: 1.64em;
  height: 1.5em;
  background: url(../img/logo.svg) center / contain no-repeat;
}

.marca:hover {
  text-decoration: none;
  color: var(--acento);
}

/* align-items: center y no el stretch por defecto. Sin esto, al abrir el
   buscador los enlaces se estiran hasta el alto del campo y su texto queda
   pegado arriba, descuadrado respecto al centro del campo. */

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Versales por CSS y no reescribiendo el HTML: asi los lectores de pantalla
   siguen leyendo «Artículos», no «A-R-T-I-C-U-L-O-S», que es como algunos
   deletrean las palabras en mayusculas de verdad.

   El tracking sube de 0.01em porque las mayusculas juntas se leen peor: sin
   aire entre ellas el ojo no distingue las siluetas, que en caja baja vienen
   dadas por ascendentes y descendentes.

   0.07em y no los 0.06 que tenia a 14 px. El tracking en em escala con el
   cuerpo, asi que mantenerlo habria encogido la separacion real de 0,84 a 0,72
   px justo al hacer las letras mas pequenas, que es cuando mas falta hace. Con
   0.07 la separacion absoluta se queda en 0,84: cambia el cuerpo, no el aire.

   Cae entre los dos valores que el sistema ya usa a 12 px en versales: 0.06 en
   fecha y metadatos, que van en 500 como esto, y 0.08 en el antetitulo de
   seccion, que va en 600 y por tanto necesita mas. */

.nav a {
  color: var(--nav);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.nav a:hover {
  color: var(--acento);
  text-decoration: none;
}

.nav a.activo {
  color: var(--acento);
}

/* ------------------------------------------- Buscador de cabecera ------- */

/* El formulario envia a articulos/?q=… y de ahi lo recoge el buscador que ya
   vive en el listado, que lee ese parametro al cargar. No se duplica nada de
   la logica de filtrado.

   Sin JS la lupa es un enlace al listado y el campo no se ve. Con JS,
   main.js sustituye el enlace por un <button aria-expanded> de verdad. */

.busca {
  display: flex;
  align-items: center;
}

/* Cerrado: ancho cero y visibility hidden, que ademas lo saca del orden de
   tabulacion y del arbol de accesibilidad sin andar moviendo tabindex.
   La visibility se retrasa hasta el final para que la salida se vea. */

/* ALTO FIJO, Y CONSTANTE EN LOS DOS ESTADOS. Antes el alto salia del padding
   vertical: 37px abierto contra 19px cerrado, y la cabecera pegaba un salto de
   5.8px al desplegarse, con los enlaces reacomodandose delante del lector.

   Los 30px son un techo medido, no una preferencia. Quien manda en la altura
   de la cabecera no es la fila de enlaces (24px) sino la marca (31.195px):
   mientras el campo no pase de ahi, la cabecera no se entera. Por eso el alto
   se declara igual en cerrado y en abierto, y solo se animan ancho, padding
   horizontal y opacidad. */

.busca__campo {
  width: 0;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--papel-alt);
  font-family: var(--ui);
  font-size: 14px;
  color: var(--tinta);
  opacity: 0;
  visibility: hidden;
  transition:
    width 220ms ease,
    padding 220ms ease,
    opacity 150ms ease,
    visibility 0s 220ms;
}

.busca--abierta .busca__campo {
  width: 220px;
  padding: 0 12px;
  border-color: var(--borde);
  opacity: 1;
  visibility: visible;
  transition:
    width 220ms ease,
    padding 220ms ease,
    opacity 150ms 70ms ease,
    visibility 0s;
}

.busca__campo:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

/* Los estilos van en la clase y no en .nav a porque el elemento cambia de
   <a> a <button> cuando entra el JS, y debe verse igual en ambos casos. */

.busca__lupa {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--nav);
  cursor: pointer;
}

/* Area de pulsacion de 44x44 sin que la caja crezca: si el elemento midiera
   44px de ancho, la lupa quedaria metida 10px hacia dentro y descuadraria el
   margen derecho de la cabecera. */

.busca__lupa::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.busca__lupa:hover {
  color: var(--acento);
  text-decoration: none;
}

.busca__lupa:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------------------------------------------------------- Portada ----- */

/* .portada la usan dos paginas: la portada del sitio y 404.html. Todo lo que
   tiene que ver con el fondo de video va en el modificador .portada--video,
   porque 404.html no lo lleva y debe conservar su composicion centrada. */

.portada {
  padding: 72px 0 64px;
  text-align: center;
}

/* Franja de alto fijo, no pantalla completa. Antes ocupaba 100svh menos la
   cabecera, y en un monitor de 27 pulgadas eso son ~1370px: el texto quedaba
   perdido en el vacio y no asomaba nada de la seccion siguiente.

   Los 520px estan medidos contra lo que asoma debajo. A 1440x900 dejan ver el
   rotulo «ULTIMOS ARTICULOS», la imagen de la primera tarjeta entera y 35px de
   su titular: se entiende que hay contenido y por donde sigue. Con 560 la
   imagen se cortaba 5px antes de acabar, que es el peor corte posible; con 480
   asomaba tanto que la franja perdia presencia.

   min-height y no height: en movil el contenido crece —a 360px de ancho el
   titular ocupa 3 lineas y la entradilla 5, 417.6px en total mas 120 de
   padding— y en una franja fija de 520 se cortaria. Asi mide 520 exactos en
   escritorio y se estira sola donde hace falta, sin necesidad de un caso
   aparte para movil.

   Al no depender ya del alto de la cabecera, se pudo eliminar la variable
   --alto-cabecera y sus tres redefiniciones por tramo, que habia que mantener
   sincronizadas a mano con una altura real fraccionaria. */

.portada--video {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  padding: 56px 0;
  text-align: left;
}

/* Paleta oscurecida, solo aqui. Sobre el video la entradilla en --tinta-suave
   se queda en 2.59:1 e incumple; oscurecerla es lo que permite bajar el velo y
   que el video se vea. El resto del sitio conserva la jerarquia tonal.

   ⚠️ AQUI VIVIA LA REGLA DEL ANTETITULO, Y SE HA IDO POR TERCERA VEZ. El
   historial importa porque vuelve sola cada vez que alguien repone un rotulo
   encima del titular: estuvo con el antetitulo «Blog juridico», se retiro al
   quitarlo, volvio con la linea de areas de los textos definitivos y se va
   ahora al retirarse esa linea por encargo. El hero ya no tiene antetitulo.

   Decia `.portada--video .portada__antetitulo { color: var(--acento-oscuro) }`
   y NO era decorativa: sobre el video, --acento se queda en 2,50:1 y no llega
   ni a AA para texto pequeno. --acento-oscuro es lo unico que lo salva.

   ⚠️ QUIEN VUELVA A PONER UN .portada__antetitulo EN LA PORTADA TIENE QUE
   REPONER ESTA REGLA EN EL MISMO MOVIMIENTO. Son dos cosas, no una, y el fallo
   es silencioso: el rotulo se publica ilegible y nada avisa. Es lo contrario
   de lo que parece al leer el HTML, donde el <p> se ve correcto.

   La clase base .portada__antetitulo NO se toca ni es codigo muerto: la sigue
   usando 404.html para el rotulo «Error 404», y alli va sobre blanco, donde
   --acento cumple de sobra y esta regla nunca hizo falta. */

.portada--video .portada__entradilla {
  color: var(--tinta);
  margin: 0;
}

.portada--video .portada__acciones {
  justify-content: flex-start;
}

/* Con la franja a 520px la caja es mucho mas apaisada que el archivo y el
   recorte vertical se dispara con el ancho: 35% a 1440, 51% a 1920 y 63.5% a
   2560. El encuadre decide que se conserva.

   La estatua ocupa del 9% al 100% del alto del fotograma —91%, y toca el borde
   inferior—, asi que NO puede quedar entera: no hay margen abajo que
   sacrificar. Se elige salvar la cabeza y la balanza, y perder el pedestal.

   12% vertical, no 30%. El 30% valia cuando la portada era de pantalla
   completa y el recorte rondaba el 9%; con 63.5% de recorte deja la ventana
   en 19%–55.6% y la cabeza, que empieza en el 9%, se queda fuera. La Y maxima
   que aun la conserva es 14.2% a 2560px, de modo que 12% deja margen.
   Comprobado de 768 a 2560: cabeza y los dos platillos visibles en todos.

   75% horizontal: cuando la caja es alta y estrecha el recorte cambia de eje
   y se come los lados. En los archivos volteados la estatua ocupa el
   67.5%–95.5% del ancho, asi que hay que proteger el flanco DERECHO: con el
   25% de antes la ventana se iria al lado sin estatua y a 768px la dejaria en
   4.5%–86.6%, cortandole el brazo. Por encima de 936px de ancho no hay recorte
   horizontal y la X no influye. */

/* PORTADA INVERTIDA (1/3) — estatua a la derecha, texto a la izquierda.
   La inversion vive en los ARCHIVOS: el mp4 y el jpg estan volteados de origen
   con ffmpeg, no por CSS. Aqui ya no hay transform.

   Lo unico que queda de la inversion en esta regla es el 75% horizontal del
   object-position: al voltear el archivo, la estatua se mudo del 4.5%–32.5%
   del fotograma al 67.5%–95.5%, y el encuadre tiene que seguirla. Si algun dia
   se vuelve a voltear el archivo, ese 75% tiene que volver al 25%.

   Las otras dos piezas de la composicion —el sentido del velo y la columna del
   texto— son maqueta y siguen en CSS, marcadas (2/3) y (3/3). */

/* EL VIDEO SE DIBUJA AL 110% Y CORRIDO -6,83%, y los dos numeros estan atados
   entre si: no se puede tocar uno sin recalcular el otro.

   POR QUE NO BASTA object-position. La franja es 2,769 de proporcion y el
   material 1,79, asi que cover escala por el ancho y el recorte lateral es
   CERO. Sin holgura horizontal, la X del object-position no mueve nada por
   encima de 847px de ventana. Para ampliar hay que dibujar mas ancho que la
   caja, y entonces la posicion la fija el left.

   POR QUE -6,83 Y NO OTRO. La figura esta en el F = 68,33% del ancho del
   material —medido por densidad de bordes sobre el poster, no estimado— y al
   ampliar por k su centro se iria a F·k. Para que NO se mueva:

       left = F · (1 - k)

   Con k = 1,10 sale -6,83%. Si algun dia cambia la ampliacion o el material,
   hay que volver a medir F y rehacer esta cuenta.

   Van en PORCENTAJE y no en pixeles para que la relacion aguante en cualquier
   ancho: el <img> sobresale por los dos lados en la misma proporcion.

   LA Y ES 30% Y NO 12%. A 12% quedaban 92px de cielo muerto sobre la balanza
   —casi un quinto de la franja— que se leian como un hueco entre la cabecera y
   la figura. A 30% quedan 26px a 1440, y crecen al estrechar.

   De paso MEJORA el corte de abajo: subir la Y corre la ventana hacia el pie
   del encuadre, asi que se recorta 65px menos y se ve mas pedestal. El pedestal
   se sigue cortando, porque la figura es mas alta que los 520px de la franja y
   eso no lo arregla ningun encuadre, pero menos que antes.

   LO QUE CUESTA: el recorte vertical sube del 35,3% al 41,2% a 1440. Y se
   desvanece al estrechar —9,1% a 932 y cero por debajo de 847—, asi que lo paga
   solo el escritorio ancho. La nitidez no se toca. */

.portada__video {
  position: absolute;
  inset: 0;
  width: 110%;
  left: -6.83%;
  right: auto;
  height: 100%;
  object-fit: cover;
  object-position: 75% 30%;
}

/* Imprescindible desde que el video se dibuja mas ancho que la seccion: sin
   esto se sale por los dos lados y se ve sobre el resto de la pagina. */

.portada--video {
  overflow: hidden;
}

/* VELO AL 45%. NO BAJAR DE AHI SIN VOLVER A MEDIR.

   El degradado sube de 0 a 0.45 y se queda ahi hasta el borde derecho: no
   cierra en blanco opaco, para que el video se vea entero. El tramo de subida
   termina en el 46%, antes de que empiece el texto (51.6%), de modo que todo
   el texto cae sobre un velo uniforme del 45%.

   Ratios medidos contra el pixel MAS OSCURO de la banda de texto, en seis
   fotogramas repartidos por los 10 segundos del clip:

     velo   antetitulo   titular   entradilla
            --acento-    --tinta   --tinta
            oscuro
     0.00      4.01       7.05       7.05    <- incumple, el antetitulo
     0.20      4.87       8.55       8.55
     0.30      5.34       9.38       9.38
     0.45      6.10      10.72      10.72    <- actual
     0.65      7.22      12.69      12.69

   El eslabon debil es SIEMPRE el antetitulo, no la entradilla: es el color
   mas claro de los tres y va a 12px. Con la paleta original —antetitulo en
   --acento y entradilla en --tinta-suave— el minimo para cumplir AA seria
   0.65, que tapa casi todo el video; de ahi que la portada oscurezca esos dos
   colores. Si alguien revierte esos colores, este 0.45 deja de valer.

   El recorte del video no obliga a subirlo. Remedido con el encuadre actual en
   seis fotogramas y varios viewports —de 1920x1080 a 1024x720, con recorte
   vertical y horizontal— el antetitulo se mueve entre 5.94:1 y 6.02:1. Detras
   del texto solo hay fondo difuminado a cualquier altura, asi que quitar filas
   por arriba y por abajo apenas cambia el pixel mas oscuro de esa banda. */

.portada__velo {
  position: absolute;
  inset: 0;
  /* PORTADA INVERTIDA (2/3) — el degradado va hacia la izquierda, que es donde
     esta el texto. Esto es maqueta y sigue en CSS: el volteo de la imagen esta
     en los archivos, pero el velo no se voltea con ellos.
     Si se devuelve la composicion al otro lado: to left -> to right. */
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0) 26%,
    rgba(255, 255, 255, 0.45) 46%,
    rgba(255, 255, 255, 0.45) 100%
  );
}

/* Position relative para que quede por encima del velo sin recurrir a z-index:
   los tres son hermanos posicionados y este va el ultimo en el HTML. */

/* ⚠️ LA COLUMNA DE TEXTO LLEGA A 620px Y ESE NUMERO ESTA MEDIDO, no elegido.

   Estuvo en `1fr 1fr`, que a 1440 reparte 556 a cada lado. Con los textos
   definitivos del cliente eso no cabia en la franja de 520: la linea de areas
   se partia en DOS, el titular se iba a 3 lineas y el subtitulo a 6, y el hero
   crecia a 605,7px. Medido tambien a 1000 (635,2) y a 375 (746,8).

   620 lo fijaba la linea de areas: «Derecho administrativo · Urbanismo ·
   Jurisdiccion contencioso-administrativa» pedia 619px para ir en una sola
   linea, y de ahi salia el numero.

   ⚠️ ESA LINEA YA NO EXISTE —se retiro del hero por encargo— ASI QUE EL 620 YA
   NO LO SOSTIENE NINGUN TEXTO. Se conserva igualmente, y no por inercia: es el
   ancho con el que estan medidos el resto de numeros del hero. El titular
   nuevo, «Blog juridico especializado en Derecho Administrativo y Urbanismo»,
   cabe en 2 lineas dentro de el, y el subtitulo lo limita su propio max-width
   de 31em —unos 570px—, que muerde antes que la columna. O sea que hoy NINGUNO
   de los dos textos toca este limite.

   La consecuencia practica: bajar el 620 ya no rompe una linea de areas, pero
   sigue moviendo el titular y, con el, el alto de la franja. Y el contraste del
   subtitulo sobre el video esta medido con la columna en 620 —esta razonado
   unas lineas mas abajo, en el max-width de .portada__entradilla—, asi que
   tocarlo obliga a volver a medir aquello.

   Va en `minmax(0, 620px) 1fr` y no en una fraccion porque el ancho que hace
   falta es absoluto y no una proporcion del contenedor. La segunda columna se
   queda con lo que sobre, que es el hueco por donde se ve la figura del video:
   a 1440 le quedan 492 y a 1000, 292. */

.portada__interior {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 620px) 1fr;
  gap: 40px;
  width: 100%;
}

/* PORTADA INVERTIDA (3/3) — el texto va en la primera columna. Maqueta, como
   el velo: no depende del volteo de los archivos.
   Si se devuelve la composicion al otro lado: grid-column: 2. */

.portada__texto {
  grid-column: 1;
}

.portada__antetitulo {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--acento);
  margin: 0 0 20px;
}

.portada h1 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 3rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 24px;
}

/* ⚠️ EL max-width ES UNA MEDIDA DE CONTRASTE, no de comodidad de lectura, y
   por eso bajo de 34em a 31em. Quien lo suba otra vez rompe algo que no se ve.

   Con 34em y los textos definitivos, la CUARTA linea del subtitulo llegaba a
   622px mientras las otras cuatro paraban en 584, 598, 534 y 326. Esa cola
   entraba en el plato izquierdo de la balanza del video, y ahi el velo esta en
   su zona mas floja —es un degradado `to left` que solo alcanza el 45% a partir
   del 46% desde la derecha—. Contraste medido bajo las cajas de linea reales:

     1440 → 9,83  ·  1084 → 2,73 ✗  ·  1000 → 2,62 ✗  ·  932 → 1,78 ✗

   A 1440 no pasa porque la figura escala con la ventana y se aparta; el fallo
   aparece por debajo de ~1100, donde la columna sigue fija en 620 y la figura
   se acerca.

   Con 31em la cuarta linea rompe antes y para en 584, donde paran las demas:

     1440 → 9,83  ·  1084 → 9,71  ·  1000 → 9,76  ·  960 → 9,76  ·  932 → 9,75

   Y no cuesta nada: el hero sigue en 520 exactos y el subtitulo en 5 lineas.
   Probado 32em (2,85 ✗) y 30em (3,45 ✗ y se va a 6 lineas).

   `text-wrap: balance` tambien lo arregla (9,75) pero NO sirve como unica
   solucion: donde no se soporte vuelve el 1,78:1, y una degradacion silenciosa
   a un fallo de contraste no es aceptable. Este limite es determinista. */

.portada__entradilla {
  color: var(--tinta-suave);
  font-size: 1.15rem;
  margin: 0 auto;
  max-width: 31em;
}

.portada__acciones {
  margin-top: 36px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------- Botones ----- */

.boton {
  display: inline-block;
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 13px 26px;
  border: 1px solid var(--borde);
  border-radius: 4px;
  color: var(--tinta);
  background: var(--papel);
  cursor: pointer;
  transition: all 0.15s ease;
}

.boton:hover {
  text-decoration: none;
  border-color: var(--acento);
  color: var(--acento);
}

.boton--principal {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

.boton--principal:hover {
  background: var(--acento-oscuro);
  border-color: var(--acento-oscuro);
  color: #fff;
}

/* Contorno. No es un componente nuevo sino un modificador, porque el botón que
   describe ya estaba a medias dentro de .boton: su estado de reposo es
   practicamente .boton:hover —filete y texto en acento— y su hover es
   practicamente .boton--principal —relleno de acento, texto claro—. Interpola
   entre dos estados que el componente ya tenía, así que hereda el resto:
   familia, cursor, estructura y, sobre todo, las reglas de :disabled.

   Se queda en 12px versales, y no en los 14 en caja baja de .boton, porque vive
   en la fila del rótulo «ÚLTIMOS ARTÍCULOS» y tiene que hacer pareja con él.
   Encaja con la regla del sistema: Inter en versales es lo que se consulta.

   min-height y padding vertical a cero en vez de padding 13px: así el alto es
   exactamente 44, el mínimo de área de pulsación, y no un resultado indirecto
   de sumar relleno y línea que se descuadra al tocar el cuerpo.

   No declara border-radius: hereda los 4px de .boton, como los demás botones
   del sitio. Estuvo un tiempo en 999px, de pastilla, y se quitó para que la
   familia entera tenga el mismo canto. Si se vuelve a poner, hay que ponerlo
   también en .boton y .boton--principal, no solo aquí.

   La transición se declara por propiedades y no hereda el «all» de .boton: el
   relleno y el texto van a 160ms y la flecha lleva la suya, más larga, en su
   propia regla. Con «all» las dos irían atadas al mismo tiempo. */

.boton--contorno {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acento);
  background: none;
  border-color: var(--acento);
  transition: background-color 160ms ease, border-color 160ms ease,
              color 160ms ease;
}

/* Va después de .boton:hover a propósito: tienen la misma especificidad, así
   que el orden es lo único que decide. */

.boton--contorno:hover {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--papel);
}

/* El anillo va en --tinta y no en el --acento que usan el buscador y la lupa.
   Aquí el botón ya es de acento —filete en reposo, relleno en hover—, así que
   un anillo del mismo color quedaría a un paso de su propio borde. El foco cae
   fuera del botón, sobre el blanco de la página: --tinta da ahí 16,67:1.

   Y se distingue del hover por naturaleza, no por color: el hover rellena, el
   foco dibuja un anillo por fuera. Se pueden dar a la vez sin taparse. */

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

/* ⚠️ AQUÍ VIVÍA `.boton__flecha`, LA FLECHA DEL BOTÓN, Y SE RETIRÓ CON SU ÚNICO
   PORTADOR. Lo era «Ver todos los artículos» de la portada, que dejó de ser un
   botón para pasar a enlace de texto. Eran cuatro reglas: la flecha, su
   desplazamiento de 4px en hover y las dos del bloque de abajo.

   La flecha que hay hoy en la portada NO es esta: son `.lista__flecha` y
   `.destacado__flecha`, que viven en su propio bloque y comparten estilo.

   Lo que SÍ se queda es el `transition: none` de `.boton--contorno`, porque el
   botón sigue animando su relleno y su texto. */

@media (prefers-reduced-motion: reduce) {
  .boton--contorno {
    transition: none;
  }
}

/* -------------------------------------------------------- Filtros ------ */

/* Los botones de filtro son .boton--contorno con dos cosas encima: un hover
   distinto y un estado pulsado que .boton no tiene.

   El hover de .boton--contorno rellena de acento sólido, que aquí no vale: ese
   es el aspecto del filtro activo, y un botón en reposo no puede parecerse al
   activo solo porque pase el ratón. Se sustituye por un lavado del mismo verde
   al 8%. Medido, el texto en --acento sobre ese lavado da 5,28:1; el límite AA
   está entre el 15% y el 20%, así que queda margen de sobra. */

.boton--filtro:hover {
  background: rgba(47, 110, 104, 0.08);
  border-color: var(--acento);
  color: var(--acento);
}

/* El activo es persistente, no un hover, así que va por aria-pressed y no por
   una clase: el atributo que lo dice al lector de pantalla es el mismo que lo
   pinta, y no pueden desincronizarse. */

.boton--filtro[aria-pressed="true"] {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--papel);
}

/* Y su hover OSCURECE, nunca aclara. Aclararlo lo acercaría al estado de
   reposo y se leería como «lo estás soltando», que es justo lo contrario de lo
   que pasa al pulsarlo: ya está puesto y seguirá puesto. Sobre
   --acento-oscuro el texto en --papel da 9,49:1. */

.boton--filtro[aria-pressed="true"]:hover {
  background: var(--acento-oscuro);
  border-color: var(--acento-oscuro);
  color: var(--papel);
}

/* Aqui decia que un boton sin articulos se deshabilita. Ya no: ninguno va
   disabled, porque un boton apagado no se puede pulsar y por tanto tampoco
   puede explicar por que esta apagado. Razonado en CLAUDE.md.

   ---- Menu de etiquetas -------------------------------------------------

   Segundo eje de filtrado, en la misma fila que las categorias pero con otra
   naturaleza: las categorias son excluyentes y van por aria-pressed; esto es un
   desplegable, y va por aria-expanded. Por eso no reutiliza .boton--filtro, que
   pinta el estado pulsado.

   La caja es el ancla del panel, que sale posicionado debajo. */

.menu-etiquetas {
  position: relative;
}

.boton--menu:hover,
.boton--menu[aria-expanded="true"] {
  background: rgba(47, 110, 104, 0.08);
  border-color: var(--acento);
  color: var(--acento);
}

/* El caret gira al abrir. Va en un <span> vacio y aria-hidden porque es
   decoracion: quien no lo ve ya tiene aria-expanded, que dice lo mismo. */

.boton__caret {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 160ms ease;
}

.boton--menu[aria-expanded="true"] .boton__caret {
  transform: rotate(180deg);
}

/* El panel. Scrollable a partir de unas ocho filas, que es donde deja de verse
   como una lista y empieza a empujar el contenido de abajo.

   z-index para que no lo tape la rejilla de tarjetas, y ancho minimo propio: si
   se ajustara al boton, una etiqueta larga lo desbordaria. */

.panel-etiquetas {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  max-height: 264px;
  overflow-y: auto;
  padding: 8px;
  text-align: left;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(30, 30, 30, 0.08);
}

/* La fila ES el <label>, con la casilla dentro, para que TODA ella sea pulsable
   —padding y hueco a la derecha incluidos— y no solo el texto. Con un <div> por
   fuera, 93 px de los 202 de la fila no hacian nada. El cursor va aqui por lo
   mismo: lo que se puede pulsar es la fila entera. */

.panel-etiquetas__fila {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 6px;
  border-radius: 3px;
  font-family: var(--ui);
  font-size: 13px;
  color: var(--tinta);
  cursor: pointer;
}

.panel-etiquetas__fila:hover {
  background: var(--papel-alt);
}

/* La casilla se deja NATIVA y solo se le da color y tamano. Rehacerla con un
   pseudoelemento obliga a reimplementar foco, estado indeterminado y el modo de
   alto contraste, y no hay nada que ganar. */

.panel-etiquetas__fila input {
  flex: none;
  width: 15px;
  height: 15px;
  accent-color: var(--acento);
  cursor: pointer;
}


/* ---- Etiquetas seleccionadas ------------------------------------------- */

/* EL MARGEN VA AQUI, en el envoltorio que se oculta, y no en las pildoras ni en
   el boton. Con hidden esto entra en display:none, deja de generar caja y de
   aportar al gap, asi que la distancia entre los filtros y el contador es
   identica con seleccion y sin ella. Con el margen en los hijos, ocultarlos
   dejaria el hueco del padre — que es el fallo que ya se dio una vez. */

.seleccion {
  margin: 0 0 22px;
  text-align: center;
}

.seleccion__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

/* Pildora PULSABLE, y por eso no reutiliza .etiqueta--tag: aquella es un <span>
   inerte en el lateral del articulo. Misma familia visual, distinta naturaleza.

   Hereda de .etiqueta el cuerpo y el radio; aqui solo cambia lo que la hace
   control: cursor, borde y el aspa. */

.etiqueta--filtro {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ui);
  border: 1px solid var(--acento);
  background: var(--papel);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.etiqueta--filtro:hover {
  background: var(--acento);
  color: var(--papel);
}

/* El aspa se dibuja con dos trazos girados sobre un cuadrado, para no meter un
   SVG por cada pildora ni depender de un glifo tipografico. currentColor, asi
   que sigue al texto en el hover sin declararlo dos veces. */

.etiqueta__aspa,
.boton__aspa {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
}

.etiqueta__aspa::before,
.etiqueta__aspa::after,
.boton__aspa::before,
.boton__aspa::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
}

.etiqueta__aspa::before,
.boton__aspa::before {
  transform: translateY(-50%) rotate(45deg);
}

.etiqueta__aspa::after,
.boton__aspa::after {
  transform: translateY(-50%) rotate(-45deg);
}

/* El boton de borrar. Discreto a proposito: es una salida, no una accion
   principal, y compite en la misma zona con las pildoras y el contador. */

.boton--limpiar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 6px 14px;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  background: none;
  border: 1px solid var(--borde);
}

.boton--limpiar:hover {
  color: var(--acento);
  border-color: var(--acento);
}

/* Los 28 de arriba son los que tenía el campo de búsqueda que ocupaba este
   sitio: los filtros son su sucesor y cuelgan del mismo filete. */

/* El margen inferior lo pide el contador, que va justo debajo y sin él quedaba
   pegado a los botones. Va aquí y no en .contador porque la separación es de
   los filtros hacia lo que venga: el contador ya tenía su propio espaciado de
   cuando era el primer elemento de la lista. */

.filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 22px;
}

/* Aqui hubo un .filtros[hidden] para que el atributo ganara al display:flex.
   Sobra desde que hay un [hidden] global arriba del archivo. */

/* Aqui vivian .franja, .areas y las dos reglas de .area, la banda de «Areas del
   derecho» de la portada. Se retiran con su unico uso: el bloque se elimino del
   HTML y ninguna otra pagina las gastaba.

   El token --papel-alt NO se queda huerfano: lo siguen usando once reglas mas
   —la caja de tarjeta, el lateral del articulo, la banda de suscripcion, el
   indice, las referencias, los campos y alguna mas—. Lo que se va con .franja
   es la unica banda A SANGRE del sitio rellena con el, o sea el unico sitio
   donde ese tono cubria el ancho entero de la ventana. */

/* ------------------------------------------------- Cabecera de sección -- */

/* Aqui vivia .cabecera-seccion, con su padding, su h1 y su parrafo. Se retira
   entera: la usaban articulos/ y contacto/, y las dos han pasado a .mancheta,
   que es la banda a sangre. No queda ninguna pagina con esa clase.

   El h1 se conserva, ahora colgado solo de .mancheta. */

.mancheta h1 {
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* Mancheta: banda a sangre que hace de encabezado en las tres paginas de
   seccion —articulos, sobre y contacto—. El fondo ocupa toda la ventana; el
   titulo se queda en la rejilla gracias al .contenedor que lleva dentro.

   Sustituyo a .cabecera-seccion, que era contenida y solo la usaba contacto/.
   Al unificarse las tres, aquella clase se quedo sin usuarios y se retiro.

   Los 61 de relleno dejan la banda en 170 px con el titulo de 48. Estuvo en 258
   con un relleno de 76, cuando llevaba ademas una entradilla a su derecha; sin
   ella sobraba altura. A 190 sobra aire y a 150 el titulo roza el filete. Va
   por relleno y no por altura fija para que respire igual si un titulo parte en
   dos lineas en pantalla estrecha.

   Arranca pegada a la cabecera, sin margen ni relleno arriba, y eso hace que la
   linea inferior del nav le sirva de borde superior. El filete de abajo repite
   ese mismo trazo —2 px en --borde-marcado— asi que la banda queda cerrada
   arriba y abajo por la misma linea. Es deliberado, no una coincidencia.

   El filete va a sangre y no contenido: con el fondo cruzando toda la ventana,
   una linea que se cortara a los 1200 con la banda tintada a los lados
   pareceria un fallo. Y hace falta, medido: el canto de la banda contra el
   blanco de debajo tiene dE media 7,6 pero baja a 1,4 en las zonas palidas, o
   sea que en parte del ancho no cierra nada por si solo. */

.mancheta {
  padding: 61px 0;
  border-bottom: 2px solid var(--borde-marcado);
}

/* Un solo elemento centrado, asi que basta con centrarlo. Aqui hubo una rejilla
   de dos columnas 5/7 con align-items: baseline, para enfrentar el titulo y una
   entradilla; las dos cosas se fueron con la entradilla. Dejar la rejilla con
   una sola celda habria sido dejar una estructura que ya no estructura nada. */

.mancheta__interior {
  display: flex;
  justify-content: center;
  text-align: center;
}

/* El fondo se declara SOLO aqui dentro, y por eso esta es la unica media query
   por min-width del archivo, que va desde arriba por max-width.

   La diferencia importa: si se declarara fuera y se anulara con
   «background-image: none» en un corte de max-width, el resultado en pantalla
   seria el mismo, pero el movil se bajaria igual los 130 KB. Declarandolo solo
   donde se usa, no se pide nunca por debajo de 900.

   Y no se pide por dos razones, no solo por el peso: al ser mas alta que ancha
   la ventana, «cover» recorta una tira central estrecha y se pierde la
   composicion —ni libro, ni balanza—. Seria peso para no ensenar la imagen.

   YA NO LLEVA VELO. Tuvo uno blanco al 45% mientras el texto iba a los lados:
   los manchones oscuros estaban en los bordes izquierdo y derecho, y ahi el
   titular se quedaba en 1,68:1. Con el titulo centrado cae sobre la zona clara
   del centro y no hace falta velo ninguno.

   ⚠️ EL ARCHIVO SE LLAMA IGUAL DESDE HACE DOS IMAGENES, ASI QUE EL NOMBRE NO
   DICE QUE HAY DENTRO. Hoy `fondo-paginas.jpg` es un gris verdoso palido con
   franjas diagonales de luz desenfocadas, generado con IA; antes contenia el
   recorte del veteado de la portada, y antes de eso la banda usaba otro archivo,
   `fondo-cabecera.jpg`, que se borro al quedarse sin uso.

   Se sobrescribe en vez de estrenar nombre para no dejar huerfano el anterior
   —este repositorio ya ha pagado dos limpiezas por eso— y porque el nombre
   describe el PAPEL, no el dibujo. Esta razonado en CLAUDE.md, con el comando
   de sips y el porque del desplazamiento del recorte.

   `center` NO SE TOCO: el recorte ya se eligio para que la zona central fuera
   la mas limpia, asi que mover la Y solo puede empeorarlo.

   Contraste del h1 (--tinta sobre el pixel mas oscuro bajo su caja), medido
   replicando `cover` en un canvas con la geometria real del elemento:

     ancho de ventana   375    768    901   1440   1920
     peor ratio       16,67  16,67  12,69  12,69  12,69

   ⚠️ A 375 Y 768 NO HAY IMAGEN —la media query de abajo empieza en 901— asi que
   esos 16,67 son el h1 sobre el blanco de la pagina, no sobre la foto. Y de 901
   para arriba el numero no se mueve porque `cover` escala por el ancho en toda
   esa franja: lo que cambia es cuanta imagen se ve a los lados, no lo que queda
   detras del texto.

   GUARDA. Medido forzando titulos cada vez mas anchos:

     titulo    160    450    600    800   1000   1200 px
     hoy     12,69  12,57  12,34  11,42  10,64  10,64
     antes   11,81  10,79   8,15   8,15   6,61   6,61

   No baja de 10,64 ni con un titulo de 1200 px, mas ancho que cualquier rotulo
   imaginable, y pierde solo 2 puntos de extremo a extremo donde la anterior
   perdia 5. Aun asi, si algun dia se cambia la imagen hay que volver a medir
   esta tabla: el numero sale de muestrear, no de mirar. */

@media (min-width: 901px) {
  .mancheta {
    background-image: url(../img/fondo-paginas.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

/* ⚠️ AL IMPRIMIR NO SALE, Y HACE FALTA DECIRLO AQUI.

   Las tres paginas con mancheta —articulos/, sobre/ y contacto/— NO enlazan
   `imprimir.css`: esa hoja la cargan solo las paginas de articulo, para el PDF.
   Asi que esta es la unica hoja desde la que se puede apagar.

   Y hace falta apagarlo explicitamente: los navegadores no imprimen imagenes de
   fondo POR DEFECTO, pero el usuario puede activar «graficos de fondo», y
   entonces el `@media (min-width: 901px)` de arriba casa igual —el medio print
   tambien tiene ancho— y la banda saldria tintada. Con esto no puede pasar. */

@media print {
  .mancheta {
    background-image: none;
  }

  /* ⚠️ EL CRÉDITO DE DUOWAVE SE OCULTA AL IMPRIMIR, Y VA AQUÍ Y NO EN
     `imprimir.css`. Esa hoja la cargan SOLO las páginas de artículo, para el
     PDF; `styles.css` la cargan todas, así que esta es la única regla que
     alcanza también a imprimir `sobre/`, `contacto/` o `privacidad/` desde el
     navegador.

     En el PDF del artículo ya estaba cubierto por otro lado —`imprimir.css`
     oculta `.pie` entero— así que esto no cambia nada allí. No es redundante:
     son dos supuestos distintos y solo uno de los dos tenía regla. */

  .pie__credito {
    display: none !important;
  }
}

.mancheta h1 {
  margin: 0;
}

/* Aqui estaba .mancheta__entradilla, el parrafo que acompanaba al titulo. Se va
   con el elemento: la banda es solo titulo. El texto de contacto/ no se pierde,
   baja al cuerpo de la pagina, encima del formulario. */

/* --------------------------------------------- Aviso de filtrado -------- */

/* Aqui vivia .buscador, el campo propio del listado. Se retiro junto con el
   campo, que duplicaba el de la cabecera.

   Lo ocupa el aviso que aparece cuando se llega con ?q=. Va centrado como los
   filtros y el contador: es el primer elemento de esa misma pila y dejarlo a un
   lado se leeria como un descuadre.

   ES UNA FRASE CON UNA PIEZA RETIRABLE, no una pildora. La distincion importa
   porque en pantalla puede convivir con las pildoras de etiqueta activa, que
   cumplen la misma funcion —«esto es un filtro puesto, se quita aqui»— y si se
   parecieran demasiado el lector tendria dos filas de cajas casi iguales que
   filtran ejes distintos.

   Se separan por tres cosas a la vez:

     radio 0        frente a los 3px de .etiqueta
     caja baja      frente a las versales de .etiqueta
     --tinta        frente al --acento de .etiqueta--filtro

   La segunda no es estetica: el termino tiene que conservar las mayusculas que
   escribio el visitante. Ponerlo en versales, como van las pildoras por
   sistema, seria tergiversar su consulta.

   Y la frase hace algo que una pildora suelta no puede: NOMBRA que esta
   filtrado. Un chip con «aula» a secas se confundiria con una etiqueta que se
   llamara asi.

   EL AIRE DE ARRIBA VA EN PADDING Y NO EN MARGEN. Estuvo en margin-top: 28 y no
   se veia donde se creia: al ser el primer hijo del contenedor, ese margen
   COLAPSA y acaba empujando al contenedor entero en vez de separar el aviso de
   lo de arriba. El total medido era el mismo —48 de .lista mas 28— pero por un
   camino que se rompe en cuanto alguien le ponga un borde o un padding al
   contenedor. El padding no colapsa nunca.

   Abajo iba a cero, y de ahi que se leyera pegado a los botones, como si fuera
   parte de ellos. Los 22 son el ritmo que ya llevan .filtros y .seleccion. */

.filtro-aviso {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  padding: 28px 0 0;
  margin: 0 0 22px;
  font-family: var(--ui);
  font-size: 13px;
  color: var(--tinta-suave);
}

/* Aqui hubo un .filtro-aviso[hidden] por el mismo motivo que en .filtros.
   Sobra desde que hay un [hidden] global arriba del archivo. */

/* La caja del termino. El filete responde al hover del boton que lleva dentro,
   para que la pieza se lea como una sola cosa retirable y no como un texto con
   un aspa al lado.

   EL TERMINO VA SIN COMILLAS ANGULARES. Las llevo —«aula»— y se quitaron porque
   la caja ya hace lo que ellas hacian: decir donde empieza y donde acaba lo que
   escribio el visitante. Con un filete alrededor, las « » son un segundo
   delimitador dentro del primero.

   Los 12 de la izquierda son consecuencia de eso y estan medidos. Con 10, que
   era lo que habia, el hueco de filete a glifo quedaba en 11 mientras que por
   la derecha el aspa deja 13 —el boton mide 32 y el aspa 8, o sea 12 a cada
   lado mas el filete—. La comilla tapaba ese desnivel; sin ella se veia.

   Ahora son 13 y 13. Comprobado con un termino de una sola letra, con uno
   normal y con dos palabras largas: el hueco no cambia, porque no depende del
   contenido. */

.filtro-aviso__busqueda {
  display: inline-flex;
  align-items: center;
  padding-left: 12px;
  border: 1px solid var(--borde);
  border-radius: 0;
  transition: border-color 160ms ease;
}

.filtro-aviso__busqueda:hover {
  border-color: var(--acento);
}

.filtro-aviso__termino {
  font-weight: 600;
  color: var(--tinta);
}

/* 32x32 de area pulsable para un aspa de 8. El glifo solo daria una diana de
   unos 12px, por debajo de lo que se puede acertar con el pulgar.

   EL flex: none NO ES DECORATIVO. Sin el, en cuanto el termino es largo y la
   caja llega al ancho del contenedor, el flex reparte la falta de sitio y lo
   primero que encoge es el boton: medido en un movil de 375 con una consulta de
   cinco palabras, bajaba a 29px de ancho. Justo el caso en que la diana mas
   falta hace es donde se estrechaba sola.

   El foco va en --tinta y por fuera, como en .boton--contorno y .paginacion:
   el hover tiñe de acento, asi que un anillo de acento se confundiria con el.
   Sobre el blanco de la pagina --tinta da 16,67:1. */

.filtro-aviso__quitar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinta-suave);
  cursor: pointer;
  transition: color 160ms ease;
}

.filtro-aviso__quitar:hover {
  color: var(--acento);
}

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

/* --------------------------------------------------------- Destacado ---- */

/* Un articulo recomendado, entre el hero y la rejilla de «Ultimos articulos».

   SU TRABAJO ES SER LA TRANSICION entre dos densidades muy distintas: arriba
   una imagen a sangre de 520px, abajo una rejilla de cajas grises. Por eso va
   ABIERTO — sobre --papel, sin fondo y sin filete—, que es justo lo contrario
   de .tarjeta--caja. La densidad crece hacia abajo en vez de saltar, y la pieza
   no compite con el hero porque no tiene cerco que la encierre.

   NO ES UNA TARJETA MAS Y NO DEBE PARECERLO. Se separa de las de abajo en
   cuatro cosas a la vez, no solo en el tamano:

     horizontal          frente a vertical
     sin caja ni filete  frente a fondo --papel-alt con filete
     radio 0             frente a los 3px de .tarjeta--caja
     entradilla entera   frente a la recortada

   Los 36px del titular lo colocan en su sitio de la escala: hero 48, destacado
   36, tarjeta 28. Si fuera 48 pelearia con el hero; si fuera 28 no se
   distinguiria de lo de abajo.

   EL FLEX RESUELVE SOLO EL CASO SIN IMAGEN. Con flex-basis en los dos lados, si
   el <a> de la foto no esta el texto ocupa el ancho entero sin ninguna regla
   extra ni clase modificadora. Y con flex-wrap, en cuanto no caben los dos
   lados se apilan — de ahi que no haga falta media query propia. */

.destacado {
  padding: 56px 0 0;
}

.destacado__pieza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 40px;
}

/* El hueco de imagen lleva fondo --papel-alt como .tarjeta__imagen: si la foto
   tarda o falla, se ve una superficie del sistema y no un blanco roto. */

.destacado__imagen {
  display: block;
  flex: 1 1 340px;
  max-width: 520px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--papel-alt);
}

.destacado__imagen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.destacado__texto {
  flex: 1 1 340px;
}

/* Cormorant, como todos los titulares del sitio. El enlace va en --tinta y no
   en --acento: es el titular de la pieza, no un enlace de apoyo, y el acento se
   reserva aqui para la categoria. Sin subrayado al pasar el raton por el mismo
   motivo que en .entrada__titulo: es una masa grande, no una linea de texto.

   VA EN clamp Y NO EN 36 FIJOS, y hace falta: el h1 del hero tambien es fluido
   —clamp(2.2rem, 5vw, 3rem)— y en movil baja a su minimo de 35,2px. Con 36
   fijos aqui, a 375 este titular seria MAS GRANDE que el del hero y la
   jerarquia quedaba del reves. Se ve solo midiendo en estrecho.

   Con clamp(1.9rem, 3.6vw, 2.25rem) la escalera aguanta en todo el recorrido:

     375   hero 35,2  ·  destacado 30,4  ·  tarjeta 28
     678   hero 35,2  ·  destacado 30,4  ·  tarjeta 28
     1440  hero 48    ·  destacado 36    ·  tarjeta 28

   El tope de 2.25rem es el valor de diseno; el suelo de 1.9rem es lo que lo
   mantiene por debajo del hero sin llegar a confundirse con la tarjeta. */

.destacado__titulo {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.6vw, 2.25rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.destacado__titulo a {
  color: var(--tinta);
}

.destacado__titulo a:hover {
  color: var(--acento);
  text-decoration: none;
}

/* Source Serif y no Inter: es texto para leer, no un metadato, y va al cuerpo
   de 18 como el del articulo. Es la unica entradilla completa de la portada. */

.destacado__entradilla {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--tinta-suave);
}

/* ============================================================
   REDISENO DE PORTADA · todo lo que sigue va prefijado con .inicio
   ============================================================

   El prefijo NO es cosmetico. Estos tres componentes los comparten otras
   paginas, y sin el gancho el rediseno se les colaria:

     · .lista__titulo--destacado lo usa «Continua leyendo» del articulo
     · .entrada__meta lo usan las tarjetas del listado y la ficha del articulo
     · .destacado__* solo vive en la portada, pero se prefija igual para que el
       bloque se lea como una unidad y se pueda desprefijar de golpe

   Lo que este rediseno NO toca, a peticion expresa: --papel, --papel-alt,
   --ancho-amplio, los textos del hero y su altura de 520px. El fondo sigue
   siendo blanco puro y la banda de suscripcion sigue en --papel-alt frio, que
   es una decision del cliente y esta razonada en CLAUDE.md. */

/* Filete que sale del rotulo hasta el borde del contenedor. El rotulo se queda
   en --tinta y NO pasa al acento: el peso que le faltaba lo da esta linea, y
   asi el verdigris sigue reservado a la categoria y al enlace «ver todos», que
   es la regla de usarlo con contencion. Esta comparado en CLAUDE.md.

   Va en ::after de un contenedor flex, con flex:1, en vez de un <hr> o un
   borde: asi la linea mide lo que sobra despues del texto, sea el que sea, y no
   hay que calcular nada al cambiar el rotulo.

   En «Ultimos articulos» el rotulo vive dentro de .lista__encabezado, que es
   flex con space-between, asi que la linea se detiene sola antes del enlace de
   «ver todos». No hace falta un caso aparte. */

.inicio .lista__titulo--destacado {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ⚠️ `flex: 1 1 auto` Y NO `flex: 1`. Parecen lo mismo y no lo son: `flex: 1`
   es `flex-basis: 0%`, asi que el rotulo puede encogerse hasta cero y se queda
   en una fila con el enlace «ver todos» cueste lo que cueste.

   Medido a 480px: con basis 0 el rotulo se quedaba en ~190px, «Últimos
   artículos» —que pide 236,2— envolvia a DOS lineas y el filete se quedaba en
   cero. El mismo destrozo que el del tramo movil, pero por otra causa y en un
   ancho donde el otro rotulo funcionaba bien: uno con filete y el de al lado
   partido en dos.

   Con basis auto el tamano base del rotulo es su max-content, asi que cuando
   los dos no caben es el ENLACE el que baja de fila —que es lo que tiene que
   pasar, porque .lista__encabezado ya trae flex-wrap— y el rotulo recupera el
   ancho entero para su linea. */

.inicio .lista__encabezado .lista__titulo--destacado {
  flex: 1 1 auto;
}

.inicio .lista__titulo--destacado::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--borde);

  /* El filete se alinea con la ALTURA DE MAYUSCULA, no con el centro de la
     caja de texto. El rotulo va en versales de Cormorant a 20px con
     line-height 1.3: su caja mide 26px pero las letras solo ocupan los 14,2 de
     cap-height, centrados mas arriba que la caja. Sin este desplazamiento la
     linea cruza por debajo del pie de las letras y se lee como subrayado.

     Medido: 2px lo deja a la mitad de la altura de mayuscula. */
  transform: translateY(2px);
}

/* ⚠️ POR DEBAJO DE 430px EL FILETE SE RETIRA, y el numero esta medido.

   El rotulo mas largo —«Lectura recomendada»— pide 286,6px en Cormorant 20
   versales con 0.10em de tracking, y eso no baja: el cuerpo del rotulo es fijo.
   Sumando los 20 del hueco y un minimo de 40 para que la linea se lea como un
   filete y no como un guion, hacen falta 346,6 de rotulo, o sea 394,6 de
   ventana. Medido, lo que sobra para la linea:

     375 → 20,4   ·   395 → 40,4   ·   400 → 45,4   ·   430 → 75,4   ·   480 → 125,4

   ⚠️ EL CORTE SE QUEDA EN 430 AUNQUE LA CUENTA DE HOY PIDA 394,6, y conviene
   saber por que para no «arreglarlo» sin pensar. El rotulo decia «La lectura
   recomendada» y pedia 322,5px, de donde salia un corte de 430,5. Al perder el
   articulo baja a 286,6 y el corte exacto baja con el.

   O sea que entre 395 y 430 el filete CABRIA —sobran de 40,4 a 75,4— y aun asi
   se retira. No rompe nada: el rotulo se lee igual y sus dos hermanos siguen
   tratados igual. Es holgura, y el modo de fallar es el bueno: pasarse de
   prudente quita una linea decorativa, quedarse corto parte el rotulo en dos.

   Bajarlo a 395 es una decision de diseno, no una correccion. Si se baja, hay
   que volver a mirar los 375: ahi solo sobran 20,4 y la linea se leeria como un
   guion, que es justo lo que este corte evita.

   Con un sobrante negativo pasaba algo peor que quedarse sin linea: el texto
   ENVOLVIA A DOS LINEAS —64px de alto en vez de 32— porque el hueco de 20 y el
   ::after le robaban sitio. Un rotulo partido en dos con la linea invisible.
   Con el texto de hoy ya no se llega a ese caso en ningun ancho.

   Volviendo a `display: block` el texto recupera su unica linea: 286,6 caben de
   sobra en los 327 de la columna a 375. O sea que quitar el filete no es una
   perdida, es lo que arregla el rotulo.

   El otro rotulo, «Ultimos articulos», aguanta de sobra —pide 236,2 y le sobran
   70,8 a 375— pero se retira tambien: dos rotulos hermanos con distinto
   tratamiento en el mismo tramo se leen como un error, no como un ajuste. */

@media (max-width: 430px) {
  .inicio .lista__titulo--destacado {
    display: block;
  }

  .inicio .lista__titulo--destacado::after {
    content: none;
  }
}

/* Destacado a dos columnas, 45% texto / 55% imagen.

   Deja de ser flex-wrap con `flex: 1 1 340px` y pasa a grid con porcentajes
   explicitos, porque el reparto que pide la maqueta es desigual y con `flex: 1`
   las dos columnas salian iguales. El grid tambien hace el apilado explicito
   —una sola regla en el corte— en vez de depender de cuando decida envolver el
   flex, que era un numero que no controlaba nadie. */

/* ⚠️ EL SUELO DE 448px NO ES UN NUMERO REDONDO: es el ancho que pide la fila de
   metadatos para caber en UNA linea —447,4 medidos— redondeado hacia arriba.

   Sin el, el reparto 45/55 dejaba la columna de texto en 448,65 justo en 1085,
   o sea 1,3px de holgura sobre lo que necesita, y un pelo de diferencia en el
   renderizado de la fuente partia los metadatos en dos lineas. Medido: la
   holgura es de 1,3px en 1085, 8 en 1100, 30,5 en 1150 y 74,6 a partir de 1248,
   donde el contenedor topa en 1200.

   Con el suelo, el texto nunca baja de 448 y la diferencia la absorbe la
   columna de la imagen, que puede ceder sin que se note. Asi no hace falta
   inventar un punto de corte nuevo para un tramo de diez pixeles.

   Si alguien cambia el texto de «Leer articulo» o de los minutos, este numero
   hay que volver a medirlo: sale del contenido, no del diseno. */

.inicio .destacado__pieza {
  display: grid;
  grid-template-columns: minmax(448px, 45fr) 55fr;
  align-items: center;
  gap: 40px;
}

/* La imagen se queda en 3:2 y ESO ES LO QUE EVITA EL RECORTE: la foto es
   1600x1066, o sea 3:2 exactos, asi que con `cover` no se corta ni un pixel y
   se ve la escultura entera, balanza incluida. Un 8:3 como el de la maqueta
   original tiraba el 44% del alto y se llevaba la cabeza y los platos.

   El object-position es una RED, no un ajuste: a 3:2 no hace nada porque no hay
   holgura que repartir. Solo entra en juego si la caja cambia de proporcion
   —el tramo movil, o si alguien retoca el aspect-ratio—, y entonces conserva la
   franja que importa y sacrifica la pared vacia de la izquierda.

   El 62% sale de medir sobre la foto: la balanza cae al 43% del ancho y la
   figura al 69%, asi que 62 es el punto que mantiene las dos dentro. */

.inicio .destacado__imagen {
  flex: none;
  max-width: none;
  border-radius: 0;
}

.inicio .destacado__imagen img {
  object-position: 62% center;
  transition: transform 600ms ease;
}

/* El antetitulo es LA CATEGORIA REAL del articulo, enlazada al filtro del
   listado. En Inter y versales, como el resto de lo que se consulta, y en
   acento porque es la etiqueta de la pieza.

   ⚠️ LLEVABA DOS COSAS Y AHORA LLEVA UNA. Delante de la categoria iba un rotulo
   fijo, «Articulo destacado», separado por un punto medio; aqui se explicaba
   que los dos iban en --acento y que solo la categoria se subrayaba al pasar,
   «una es texto y la otra es un destino».

   Se quito el rotulo: la seccion ya se titula «LECTURA RECOMENDADA» justo
   encima, asi que decia dos veces lo mismo. Con el se fue la necesidad de
   distinguirlos, porque ya no hay dos.

   ⚠️ Y CON EL SE VA AHORA `.destacado__antetitulo-sep`, el punto medio que los
   separaba. Se conservo una pasada por si el rotulo volvia; no ha vuelto y no
   hay nada que separar, asi que se retira. Si alguien repone un rotulo fijo,
   que reponga tambien su separador: era `opacity: .55` sobre este mismo color.

   El flex y el gap se quedan aunque hoy solo haya un hijo: no estorban, y son
   lo que mantiene la fila alineada si algun dia vuelve a haber dos piezas. */

.inicio .destacado__antetitulo {
  margin: 0 0 12px;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--acento);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.inicio .destacado__antetitulo a {
  color: inherit;
}

/* Tres lineas y el texto completo sigue en el HTML. line-clamp necesita las
   tres declaraciones juntas —el display de caja, la orientacion y el numero— y
   sin `overflow: hidden` no recorta nada.

   Se prefiere a un max-height en em porque el clamp corta por LINEAS DE VERDAD:
   un max-height calculado a ojo deja media linea asomando en cuanto cambia el
   cuerpo o la fuente, y eso se ve. */

.inicio .destacado__entradilla {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* Separadores «|» entre metadatos. Van en ::after porque ::before ya lo ocupan
   los iconos de calendario y reloj, y en el CSS y no en el marcado para que un
   lector de pantalla no tenga que ignorar glifos de puntuacion.

   `:not(:last-child)` deja el ultimo sin barra, sea la lectura en una tarjeta o
   el enlace «Leer articulo» en el destacado, sin saber cual es. */

/* La regla la comparten la portada y la ficha de cabecera del articulo. Se
   agrupan para que el caracter, el color, la opacidad y el espaciado se toquen
   en UN sitio: son el mismo separador, y dos copias divergen en cuanto alguien
   ajuste una. Los dos selectores no se solapan —`.inicio` no esta en el <body>
   del articulo y `.articulo__ficha` no existe en la portada—, asi que agrupar
   no pinta ni una barra de mas. */

.inicio .entrada__meta > :not(:last-child)::after,
.articulo__ficha > :not(:last-child)::after {
  content: "|";
  margin-left: 12px;
  color: var(--borde-marcado);
  font-weight: 400;
}

/* LOS DOS ENLACES DE ACCION DE LA PORTADA, y comparten estilo a proposito:
   «Leer articulo» en el destacado y «Ver todos los articulos» en el encabezado
   de «Ultimos articulos». Hacen lo mismo —sacar de la portada hacia un articulo
   o hacia el listado— asi que se ven igual. Si se toca uno, se toca el otro: por
   eso las reglas van agrupadas y no en dos sitios del archivo.

   En acento y sin subrayado: la flecha ya dice que lleva a algun sitio, y el
   subrayado competiria con el filete del rotulo que tienen encima.

   La flecha va en un <span> propio y no suelta en el texto para tener elemento
   que animar. Y se mueve con transform y no con margin, que dispararia reflow
   en cada hover.

   ⚠️ «VER TODOS LOS ARTICULOS» ERA UN .boton--contorno. Se le quitaron las dos
   clases de boton, no se redefinieron: .boton--contorno lo siguen usando los
   botones de filtro y el del desplegable de etiquetas en articulos/, y tocarlo
   los habria cambiado a los dos.

   ⚠️ DE AQUEL BOTON HAY QUE CONSERVAR EL ALTO DE 44px, Y ESO NO SE VE. Era el
   minimo de area de pulsacion y lo ponia su min-height; sin el, el enlace se
   queda en la altura de su linea —unos 17px— y en un movil es un blanco
   incomodo de acertar. Lo repone .lista__enlace con inline-flex y min-height,
   que no pintan nada visible y mantienen la diana.

   El resto de la tipografia NO se repone aqui: el cuerpo, el peso, las versales
   y el tracking ya los pone .lista__mas--enlinea en el <p> de fuera, con los
   mismos valores que declaraba .boton--contorno. Por eso quitar las clases no
   cambia ni una letra. */

.inicio .destacado__leer,
.inicio .lista__enlace {
  color: var(--acento);
  font-weight: 600;
}

.inicio .lista__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.inicio .destacado__leer:hover,
.inicio .lista__enlace:hover {
  text-decoration: none;
  color: var(--acento-oscuro);
}

.inicio .destacado__flecha,
.inicio .lista__flecha {
  display: inline-block;
  margin-left: 4px;
  transition: transform 220ms ease;
}

.inicio .destacado__leer:hover .destacado__flecha,
.inicio .lista__enlace:hover .lista__flecha {
  transform: translateX(4px);
}

/* ⚠️ EL ANILLO VA EN --acento Y NO EN EL --tinta QUE USABA .boton--contorno, y
   el cambio no es un descuido: alli el anillo era de tinta porque el boton YA
   era de acento —filete en reposo, relleno en hover— y uno del mismo color
   habria quedado pegado a su propio borde. Sin filete esa razon decae, y el
   analogo real pasa a ser .volver, el otro enlace de texto con flecha del
   sitio, que usa --acento con el mismo offset y el mismo radio. */

.inicio .lista__enlace:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ⚠️ EN ESTRECHO EL ENLACE BAJA DE FILA A PROPOSITO, y con el se va la barra
   que lo precede.

   La fila de metadatos pide 447px para caber entera, asi que por debajo de unos
   495px de ventana envuelve sola. Y al envolver, la barra que separa los
   minutos del enlace se quedaba COLGANDO AL FINAL DE LA PRIMERA LINEA: un
   separador sin nada que separar, que se lee como un error de maquetacion.

   No hay forma en CSS de saber si una fila flex ha envuelto, asi que en vez de
   perseguir el punto exacto del envoltorio se hace explicito: el enlace pasa a
   ocupar su propia fila y la barra anterior desaparece. Determinista, y de paso
   la accion gana su propia linea, que se lee mejor.

   El corte va en 600 —uno que ya existe— y no en 495: entre esos dos anchos la
   fila aun cabria de una pieza, pero forzarla antes vale mas que atar el diseno
   a un numero que depende del largo del texto de los metadatos. */

@media (max-width: 600px) {
  .inicio .destacado .entrada__meta .lectura::after {
    content: none;
  }

  .inicio .destacado__leer {
    flex-basis: 100%;
  }
}

/* AQUI HABIA UN FILETE A TODO EL ANCHO entre el destacado y «Ultimos
   articulos» —un border-top en .inicio .lista:not(.lista--cierre)—. Se retira.

   El motivo es que sobraba: la imagen del destacado ya cierra el bloque con su
   propio canto, asi que la linea caia a pocos pixeles de otro borde horizontal
   y se leia como un subrayado de la foto, no como una division entre secciones.
   Y el rotulo de «Ultimos articulos» trae ademas su propio filete, con lo que
   quedaban dos lineas casi seguidas a distinta longitud.

   ⚠️ NO SE TOCAN los filetes que salen DETRAS de los rotulos: esos son otra
   cosa —el ::after de .lista__titulo--destacado— y se quedan. Lo que se fue es
   el que cruzaba la pagina entera.

   El aire que hacia la linea lo hace ahora el relleno, justo debajo. */

/* Separacion entre el destacado y «Ultimos articulos». Sube de los 48 que trae
   .lista a 74, que son 80 MEDIDOS entre el canto de la imagen y la caja del
   rotulo —los 6 de diferencia son el interlineado del propio rotulo—.

   80 no es un numero nuevo: es el mismo hueco que hay entre las tarjetas y la
   banda de suscripcion, y el mismo que cierra .articulo, sobre/ y el listado
   contra el pie. Es el valor con el que este sitio separa bloques.

   Con el filete, la distancia era de 55: bastaba porque la linea marcaba el
   corte. Sin ella, 55 dejaba la foto del destacado casi pegada al rotulo
   siguiente, y una foto tiene canto propio: necesita mas aire que un texto.

   ⚠️ Solo aplica a «Ultimos articulos», no a .lista--cierre. Con la seccion en
   [hidden] este relleno no pinta, asi que el hueco entre el destacado y la
   banda sigue siendo el de la banda: 56 px de su margin-top. */

.inicio .lista:not(.lista--cierre) {
  padding-top: 74px;
}

/* --------------------------------------------------------- Artículos ---- */

.lista {
  padding: 48px 0 24px;
}

/* Los 24 de arriba son el cierre de una .lista que lleva OTRA SECCION detras: no
   tiene que despedir la pagina, solo separarse de lo siguiente, que ya trae su
   propio relleno.

   VUELVEN A USARSE, y hay que saberlo porque este comentario decia lo contrario.
   Los uso la portada mientras a .lista le seguia la franja de «Areas del
   derecho»; al retirarse esa franja se quedaron sin caso y aqui se anoto que no
   los usaba nadie. Hoy los vuelve a usar la portada: «Ultimos articulos» tiene
   detras la banda de suscripcion, que se separo a su propia seccion para que no
   se apagara con ella. En articulos/ sigue mandando la regla de abajo, porque
   alli .lista es el ultimo hijo del <main>.

   Los 80 no son un numero nuevo: son el padding de cierre de .articulo, el que
   ya usan sobre/ y la pagina de articulo. Es el valor con el que este sitio dice
   «aqui se acaba el contenido». Con 24 las tarjetas quedaban pegadas al pie
   —medido frente a 66 en contacto y 108 en sobre—, el hueco mas apretado del
   sitio con diferencia.

   Va por :last-child y no por un modificador escrito a mano porque la diferencia
   es estructural, no decorativa: la seccion que cierra la pagina necesita el
   hueco, la que lleva otra detras no. Asi el cierre se mueve solo — que es
   exactamente lo que acaba de pasar al quitar la franja, sin tocar un numero. */

main > .lista:last-child {
  padding-bottom: 80px;
}

/* La seccion que solo lleva la banda de suscripcion. Suelta el relleno de
   arriba y deja que el hueco lo ponga el `margin-top: 56px` de la propia banda,
   que es el que ya la separaba de las tarjetas cuando vivian juntas.

   Asi la banda queda a 56px de lo que tenga encima, sea el destacado —con
   «Ultimos articulos» apagado— o la rejilla, sin un caso aparte para cada
   estado. El cierre de 80 contra el pie lo sigue dando la regla de arriba,
   porque esta seccion es el ultimo hijo del <main>.

   Sin este 0, los 48 de .lista se sumarian a los 56 de la banda y la portada
   abriria un hueco de 104px justo donde hoy no hay nada que separar. */

.lista--cierre {
  padding-top: 0;
}

.lista__titulo {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--acento);
  margin: 0 0 28px;
}

/* Variante en serif, SOLO para el rotulo de seccion de la home. La clase base
   se queda como esta porque la usan los cinco rotulos del lateral del articulo
   —autor, indice, etiquetas, referencias y continua leyendo—, que deben seguir
   siendo Inter pequeno: alli son etiquetas de apoyo, no encabezados.

   20px: tiene que destacar sobre la categoria de las tarjetas (Inter 12px) sin
   competir con sus titulares (Cormorant 28px). En versales el ojo lo lee mas
   grande de lo que mide, asi que 20 en caja alta ya pesa lo suficiente y sus
   mayusculas siguen siendo mas bajas que las del titular de 28.

   700 y no el 600 de la base: a 20px, Cormorant en versales se queda fino y el
   rotulo no sostenia la seccion. El 700 esta en el @import de arriba
   —wght@500;600;700— asi que es una cara real y no un engordado sintetico del
   600: se comprobo forzando su carga y midiendo, porque a 600 el rotulo mide
   241.78px y a 700 mide 242.98, y una simulacion no cambiaria las metricas.

   0.10em, no los 0.08em de la base ni los 0.12em que pedia el 600. Un serif en
   versales necesita mas aire que Inter —Cormorant tiene remates y modulacion
   de grosor, y sin separacion los trazos finos de una letra se confunden con
   los de la siguiente—, pero con el trazo mas grueso hace falta algo menos:
   a 0.12 las letras se dispersan y a 0.08 se agolpan.

   Efecto lateral util: el conjunto ADELGAZA. A 700/0.10em el rotulo mide
   236.2px frente a los 241.8px de 600/0.12em, asi que el bold no empuja al
   enlace «ver todos»; el encabezado pasa a dos lineas por debajo de 509px de
   viewport en vez de 514px.

   --tinta y no --acento como la clase base. Es el mismo tono del titular de
   portada y de los titulares de tarjeta, asi que el rotulo se lee como parte
   de la estructura de la pagina y no como un adorno. De paso el acento queda
   en esta seccion solo para las categorias y el enlace «ver todos», que es mas
   fiel a la regla del sistema de usarlo con mucha contencion.

   No se introduce ningun color nuevo: --pie y --nav estan semanticamente
   ocupados —fondo del pie y enlaces de navegacion— y ademas son mas claros. */

.lista__titulo--destacado {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--tinta);
}

/* Dentro del articulo, .articulo h2 (0,0,1,1) pisa a .lista__titulo (0,0,1,0)
   y convierte el antetitulo en un titular de Cormorant. Los rotulos que viven
   ahi dentro —lateral, referencias, continua leyendo— necesitan recuperarlo. */

.articulo .lista__titulo {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--acento);
  margin: 0 0 28px;
}

/* Y lo mismo una línea más abajo, por el mismo motivo: la categoría es un <p>,
   así que dentro del artículo .articulo p (0,0,1,1) le pisa el margen inferior
   a .etiqueta--plana (0,0,1,0) y lo sube de 4 a 22. Se recupera con la clase
   acompañada, que suma dos clases y gana.

   Va general y no apuntando a la cabecera, para que valga también para las
   tarjetas del bloque «continúa leyendo» cuando se descomente. */

.articulo .etiqueta--plana {
  margin-bottom: 4px;
}

/* Aquí estaban .entrada y .entrada:last-child, la fila apilada con filete que
   usaba el listado antes de pasar a tarjetas. Se van con el marcado que las
   usaba.

   Las .entrada__* sí siguen: titular, extracto y metadatos son los mismos en
   las tarjetas de portada y de listado. Lo que desapareció es el contenedor de
   la fila, no sus piezas. */

.entrada__meta {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* La familia y las versales se declaran aqui y no se heredan: la etiqueta
   tambien se usa suelta, fuera de .entrada__meta, y alli caeria al serif. */

.etiqueta {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--papel-alt);
  border-radius: 3px;
  padding: 3px 10px;
  color: var(--acento);
}

.entrada__titulo {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 10px;
}

.entrada__titulo a {
  color: var(--tinta);
}

.entrada__titulo a:hover {
  color: var(--acento);
  text-decoration: none;
}

.entrada__extracto {
  margin: 0;
  font-size: 1rem;
  color: var(--tinta-suave);
}

/* Aqui vivia .vacio, el mensaje de «no hay ningun articulo que mostrar». Se
   retira con su unico uso: el estado vacio lo dice .contador, que ya esta en
   todos los estados y no solo cuando el numero es cero, y que ademas lleva el
   aria-live que este parrafo nunca tuvo.

   Si algun dia se quiere un vacio mas calido, se cambia lo que escribe
   actualizarContador() en js/main.js. Un parrafo nuevo aqui volveria a ser un
   segundo elemento diciendo lo mismo, y otra vez el mudo de los dos. */

/* -------------------------------------------------------- Paginación ---- */

/* Centrada como los filtros y el contador: es la misma pila de controles de la
   página, solo que al otro extremo de la rejilla.

   Los números reutilizan el registro de la navegación —Inter 12 en versales—
   porque hacen el mismo trabajo: se consultan, no se leen. El area de pulsacion
   es de 40 px, algo menos que los 44 del boton de contorno, porque aqui son
   varios seguidos y la fila entera se lee como un grupo; aun asi queda por
   encima del minimo de 24 px que pide WCAG 2.2 para objetivos adyacentes. */

.paginacion {
  margin: 44px 0 0;
}

.paginacion__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.paginacion__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--borde);
  border-radius: 4px;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--acento);
  text-decoration: none;
}

.paginacion__numero:hover {
  border-color: var(--acento);
  background: rgba(47, 110, 104, 0.08);
  text-decoration: none;
}

/* La actual sigue siendo enlace para que la fila no cambie de altura ni de
   ancho al movernos, pero se pinta como el filtro activo y lo dice con
   aria-current, que es el atributo que lo anuncia y el que lo pinta. */

.paginacion__numero[aria-current="page"] {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--papel);
}

.paginacion__numero[aria-current="page"]:hover {
  background: var(--acento-oscuro);
  border-color: var(--acento-oscuro);
}

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

.lista__mas {
  margin: 32px 0 0;
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 500;
}

.lectura {
  color: var(--tinta-suave);
}

/* ------------------------------- Iconos de fecha y lectura -------------- */

/* Van por CSS y no como <svg> en el HTML porque el patron .entrada__meta
   aparece NUEVE veces —cuatro tarjetas en el inicio, una entrada en el
   listado, y en el articulo su ficha de cabecera mas tres tarjetas de
   «continua leyendo»—. En el HTML serian 18 bloques repetidos a mano, y cada
   articulo nuevo los volveria a copiar; sin build eso se desincroniza solo.

   Se usa mask con el icono en data-URI, la misma tecnica que la balanza del
   logotipo y por el mismo motivo: asi el trazo hereda currentColor y sigue al
   texto sin declarar el color dos veces.

   Ventaja de accesibilidad que el <svg> no da gratis: un pseudo-elemento con
   content vacio NO entra en el arbol de accesibilidad, asi que no hay nada
   que ocultar. Con SVG inline habria que acordarse de poner aria-hidden en
   los 18, y basta olvidarse en uno para que se lea «calendario 20 mayo 2024».

   Se cuelgan de <time>, .lectura y .firma, nunca del contenedor: en el listado
   .entrada__meta lleva ademas la categoria, que no debe llevar icono. */

.entrada__meta time::before,
.entrada__meta .lectura::before,
.entrada__meta .firma::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.4em;
  background-color: currentColor;

  /* 0.95em y no 1em: el texto va en versales de 12px, cuya altura de mayuscula
     es 8.85px. Un icono de 12px se veria mas grande que las propias letras.

     El desplazamiento no es vertical-align: middle, que alinea con la base mas
     media altura de x. Este texto es TODO mayusculas, asi que su centro visual
     esta en cap/2 = 4.43px sobre la base, mas arriba, y por eso los iconos
     quedan altos con middle. El -0.1em baja el icono hasta que su centro cae
     justo ahi. Medido, no estimado. */
  vertical-align: -0.1em;
}

.entrada__meta time::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.2' y='3.4' width='11.6' height='10.6' rx='1.6'/%3E%3Cpath d='M2.2 7h11.6M5.6 1.8v2.6M10.4 1.8v2.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.2' y='3.4' width='11.6' height='10.6' rx='1.6'/%3E%3Cpath d='M2.2 7h11.6M5.6 1.8v2.6M10.4 1.8v2.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Firma del autor en la ficha de cabecera. Oculta por defecto: solo aparece por
   debajo de 900px, que es donde el lateral deja de ir al lado y con el se va la
   unica mencion al autor de toda la pagina. Por encima de ese ancho estarian
   las dos a un palmo, diciendo lo mismo.

   Va con display: none y no con una clase de utilidad, para que el enlace no
   sea alcanzable con el tabulador cuando no se ve. */

.entrada__meta .firma {
  display: none;
}

.entrada__meta .firma a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.entrada__meta .firma a:hover {
  color: var(--acento);
}

/* display: inline y NO inline-flex, que es lo que había y estaba mal.

   La firma tiene dos hijos —el texto «Por » y el enlace con el nombre—, y en un
   contenedor flex cada uno es un item independiente: el espacio final del texto
   se descarta y se leía «PorJuan Contera Miranda», pegado. Medido: 0 px entre
   los dos.

   No se arregla con gap, que también separaría el icono del texto. Se arregla
   quitando el flex, que nunca hizo falta: el icono se alinea con vertical-align
   igual que en <time> y en .lectura, que son inline y no dan problema.

   Se escapó porque lo comprobé leyendo textContent, donde el espacio sí está.
   Solo se ve renderizando, y solo por debajo de 900, que es donde la firma
   aparece. */

@media (max-width: 900px) {
  .entrada__meta .firma {
    display: inline;
  }
}

.entrada__meta .firma::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='5.4' r='2.9'/%3E%3Cpath d='M2.6 14c0-2.7 2.4-4.5 5.4-4.5s5.4 1.8 5.4 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='5.4' r='2.9'/%3E%3Cpath d='M2.6 14c0-2.7 2.4-4.5 5.4-4.5s5.4 1.8 5.4 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.entrada__meta .lectura::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 4.4V8l2.6 1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 4.4V8l2.6 1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* «Ultima actualizacion», solo en la ficha del articulo y solo si el JSON trae
   el campo `actualizado`.

   ⚠️ ES UN <time>, ASI QUE YA LE HA CAIDO EL CALENDARIO de la regla de arriba,
   y esta la sustituye. El selector lleva la clase ADEMAS del elemento —(0,2,2)
   contra los (0,1,2) de `.entrada__meta time::before`— para ganar por
   especificidad y no por orden: asi aguanta si alguien reordena el archivo. Es
   el mismo criterio que `.boton--contorno:hover` documenta en CLAUDE.md, solo
   que resuelto del modo que no depende de la posicion.

   El icono son dos flechas en circulo, el gesto de «revisado». Mismo viewBox
   de 16, mismo stroke-width de 1.6 y los mismos remates redondeados que el
   calendario, el reloj y la persona, para que la fila no se vea despareja.

   Los dos puntos del final de «Ultima actualizacion:» van en el TEXTO y no en
   un ::after: son parte de lo que se lee, no decoracion. */

.entrada__meta time.actualizado::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.6 6.8a5.8 5.8 0 0 0-10.2-2.4'/%3E%3Cpath d='M2.4 9.2a5.8 5.8 0 0 0 10.2 2.4'/%3E%3Cpath d='M2.2 1.9v2.7h2.7M13.8 14.1v-2.7h-2.7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.6 6.8a5.8 5.8 0 0 0-10.2-2.4'/%3E%3Cpath d='M2.4 9.2a5.8 5.8 0 0 0 10.2 2.4'/%3E%3Cpath d='M2.2 1.9v2.7h2.7M13.8 14.1v-2.7h-2.7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.contador {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
  margin: 0 0 8px;
  text-align: center;
}

/* ------------------------------------------- Rejilla de tarjetas -------- */

/* Portada: el antetitulo a la izquierda y el enlace al listado a la derecha,
   en la misma linea de base. */

/* align-items pasa de baseline a center. Con dos textos enfrentados, alinear
   las bases era lo correcto; desde que un lado es una caja de 44px, no: el
   rótulo quedaba 2,6px descentrado respecto al botón —medido—, que es la clase
   de desajuste que se lee como un fallo. Lo que se empareja ahora es el centro
   de la caja con el centro del rótulo. */

.lista__encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

/* El margen inferior lo pone ya el encabezado. */

.lista__encabezado .lista__titulo {
  margin-bottom: 0;
}

/* Variante del enlace "ver todos" cuando va en el encabezado: versales, para
   que pese lo mismo que el antetitulo que tiene enfrente. */

.lista__mas--enlinea {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* minmax(0, 1fr) y no 1fr: «1fr» es en realidad «minmax(auto, 1fr)», y ese auto
   tiene suelo en el min-content de la columna, así que una tarjeta que no puede
   encoger más deja de ceder y aplasta a las vecinas en vez de desbordar ella.
   Con minmax(0, ...) todas ceden por igual y el fallo, si llega, se ve.

   Con menos tarjetas que columnas, las celdas sobrantes se quedan vacías solas.
   No hay que rellenarlas: un <div> vacío no se ve pero sí se anuncia.

   grid-auto-rows: 1fr iguala TODAS las filas a la más alta, y está para que la
   tarjeta de «Próximamente» mida lo mismo que las de artículo.

   Dentro de una fila ya se igualaban solas —align-items vale stretch por
   defecto—, así que el problema nunca fue ese: era la tarjeta que cae en una
   fila para ella sola. Medido a 1440 con tres artículos, la fila de abajo se
   quedaba en 248,8 px contra los 573,8 de la de arriba.

   No se hace con una altura fija porque no hay ninguna que valga: la de un
   artículo son 573,8 px a 1440, 580,5 a 1000 y 681,6 a 700, y sube a 599,4 en
   cuanto el extracto se alarga. Igualando filas el número sale del contenido y
   no hay nada que mantener.

   Todas las filas son implícitas —no hay grid-template-rows—, así que
   grid-auto-rows las alcanza a todas. */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 36px 28px;
}

/* Cuando las tarjetas no llegan a llenar UNA fila, la fila se centra en vez de
   pegarse al margen izquierdo con el hueco al otro lado.

   VA POR MODIFICADOR, y esto importa: .tarjetas la usan el listado y la
   portada. Colgado de la clase a secas —como estuvo un commit— el centrado
   alcanzaba también a la portada, donde las dos tarjetas se centraban igual sin
   que nadie lo hubiera pedido. En la portada la rejilla se queda alineada a la
   izquierda como siempre.

   La distinción es entre «una fila que es todo el contenido» y «una fila que
   viene detrás de otra». Con una sola fila incompleta no hay columna a la que
   alinearse y centrar es lo correcto. Con cuatro tarjetas —fila llena arriba y
   una suelta debajo— esa suelta se queda a la izquierda, y debe: ahí sí hay una
   columna arriba con la que alinearse, y centrarla la rompería. Medido: el
   centrado no cambia nada con 3, 4 ni 6 tarjetas.

   Hay DOS bloques porque hay dos tramos con distinto numero de columnas, y el
   ancho que se fuerza tiene que ser el de una columna DE ESE TRAMO.

   Estuvo solo el de tres columnas, con el argumento de que por debajo de 1085
   la rejilla es de dos o de una «y con dos tarjetas la fila se llena sola». Eso
   cubre el caso de dos y se deja el de UNA, que es justo el que necesita
   centrarse: con una sola tarjeta a la vista, una rejilla de dos la dejaba en
   la columna izquierda con medio contenedor vacio al lado.

   El ancho se saca de un 100% de la propia rejilla, no de --ancho-amplio. El
   token vale 1200 y es un maximo, asi que solo coincide con el ancho real por
   encima de 1248; a 1085 el contenedor mide 1037 y la formula seguia forzando
   365,3 px cuando una columna de tres ahi son 327. Con 100% el numero sale de
   lo que la rejilla mide de verdad y vale en todo el tramo. */

@media (min-width: 1085px) {
  /* Dos mecanismos que NO se solapan, y el :not([data-visibles]) es lo que los
     separa. Hicieron falta porque cuentan cosas distintas:

     Sin JavaScript se cuentan HIJOS del DOM con :has(). Es lo unico que se
     puede hacer sin scripts, y acierta porque ahi se ven todos.

     Con JavaScript se cuenta lo que de verdad se ve, que el JS deja en
     data-visibles. Al filtrar una categoria vacia hay dos hijos y una sola
     tarjeta a la vista, y contar hijos dejaba la de espera descolocada en la
     columna izquierda de una rejilla de dos.

     No basta con poner las de atributo despues: :has() adopta la especificidad
     de su argumento, asi que la regla de dos columnas es (0,3,0) frente a los
     (0,2,0) del atributo y ganaba por peso, no por orden. De ahi el :not(),
     que las hace excluyentes en vez de competidoras.

     Con tres o mas visibles no hace falta regla: no coincide ninguna y queda la
     rejilla de tres columnas de .tarjetas. */

  .tarjetas--centrada:not([data-visibles]):not(:has(> :nth-child(2))),
  .tarjetas--centrada[data-visibles="1"] {
    grid-template-columns: minmax(0, calc((100% - 56px) / 3));
    justify-content: center;
  }

  .tarjetas--centrada:not([data-visibles]):has(> :nth-child(2)):not(:has(> :nth-child(3))),
  .tarjetas--centrada[data-visibles="2"] {
    grid-template-columns: repeat(2, minmax(0, calc((100% - 56px) / 3)));
    justify-content: center;
  }
}

/* Tramo de DOS columnas. Aqui solo hay un caso incompleto que centrar: una
   tarjeta. Con dos la fila se llena sola, y con tres o mas ya hay una fila
   entera arriba con la que alinearse, que es cuando centrar romperia la
   columna — el mismo criterio que arriba.

   Un solo hueco de 28 px en vez de dos, de ahi el 28 y no el 56. */

@media (min-width: 749px) and (max-width: 1084px) {
  .tarjetas--centrada:not([data-visibles]):not(:has(> :nth-child(2))),
  .tarjetas--centrada[data-visibles="1"] {
    grid-template-columns: minmax(0, calc((100% - 28px) / 2));
    justify-content: center;
  }
}

/* Columna para poder anclar la ficha de metadatos al fondo. */

.tarjeta {
  display: flex;
  flex-direction: column;
}

/* Marco de la miniatura. Hoy es un bloque de color, porque todavia no hay
   fotografia en el repo. Cuando la haya, basta con meter un <img> dentro:
   hereda proporcion y encuadre, y no hay que tocar nada mas. */

.tarjeta__imagen {
  aspect-ratio: 3 / 2;
  background: var(--papel-alt);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 18px;
}

.tarjeta__imagen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Categoria sin pildora: aqui funciona como antetitulo suelto de la tarjeta. */

/* El margen inferior baja de 10 a 4. Medido de glifo a glifo, descontando la
   media interlínea de cada uno, el hueco real era de 15,7 px entre una etiqueta
   de 12 y un titular de 28: más que la altura de la propia etiqueta, así que se
   leían como dos elementos sueltos en vez de como antetítulo y titular. Con 4
   el hueco óptico queda en unos 10.

   No se toca el listado de artículos, que a primera vista tiene el mismo
   problema y no lo tiene: allí la categoría es una píldora dentro de la fila de
   metadatos, junto a la fecha, no un antetítulo sobre el titular. */

.etiqueta--plana {
  display: block;
  background: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 4px;
  font-size: 12px;
}

/* Fecha y minutos anclados abajo, para que las tarjetas cierren a la misma
   altura aunque los sumarios tengan distinto largo. */

.tarjeta .entrada__meta {
  margin: auto 0 0;
  padding-top: 16px;
}

/* ------------------------------------------- Tarjeta dentro de caja ----- */

/* El relleno solo no basta para que la caja se lea. --papel-alt sobre el blanco
   de la página son 2,6 de dE2000, por debajo del umbral en el que una superficie
   plana se distingue de otra. El canto lo define el filete, no el fondo, y así
   no hace falta un tono nuevo más oscuro.

   El hueco de imagen sí necesita cambiar de color: por defecto es --papel-alt,
   el mismo token que ahora usa la caja, con lo que dentro de ella su dE es
   exactamente 0 y desaparece. Con --borde sube a 4,7 y vuelve a leerse. Solo
   afecta al marcador: en cuanto haya un <img> dentro, el fondo no se ve. */

.tarjeta--caja {
  background: var(--papel-alt);
  border: 1px solid var(--borde);
  border-radius: 3px;
  padding: 28px;
}

.tarjeta--caja .tarjeta__imagen {
  background: var(--borde);
}

/* ------------------------------------------- Tarjeta abierta (portada) --- */

/* La tarjeta del rediseno de portada: sin fondo, sin filete y sin relleno, con
   la imagen mas panoramica y el enlace extendido a toda la superficie.

   ES UN MODIFICADOR NUEVO Y NO UN CAMBIO EN .tarjeta, y eso importa: .tarjeta y
   .tarjeta--caja los usa tambien articulos/index.html —diez veces— y el bloque
   «Continua leyendo» de cada articulo, que CLONA esas tarjetas por fetch. Si el
   rediseno hubiera entrado en la clase base, el listado perdia sus cajas y se
   invalidaban dos medidas documentadas: el min-height de «Proximamente»
   (574/580, atado a la altura de una tarjeta con caja) y el corte de 1084, que
   sale del padding de 28. Aqui el listado no se entera.

   No lleva el prefijo .inicio porque el nombre ya la acota: solo se pone en la
   portada, y si algun dia se usa en otro sitio sera porque alli tambien se
   quiere abierta. */

.tarjeta--abierta {
  position: relative;
  background: none;
  border: none;
  padding: 0;
}

/* 16:9 en vez del 3:2 de la clase base. La maqueta pedia 3:1, que en una
   columna de 365px deja una tira de 122px de alto: a esa altura la escultura
   de la unica foto que hay no se distingue. 16:9 es lo mas panoramico que
   aguanta el material. Cuando haya fotos anchas de verdad, es un numero.

   Radio 0 porque la maqueta lo pide sin redondeos, y el 3px de la clase base
   no se hereda: se anula aqui. */

.tarjeta--abierta .tarjeta__imagen {
  aspect-ratio: 16 / 9;
  border-radius: 0;
  background: var(--papel-alt);
}

/* El zoom va en la IMAGEN y el overflow lo recorta el hueco, que ya lo trae de
   .tarjeta__imagen. 1.03 y 600ms: a 1.05 el movimiento se nota como un salto y
   compite con el cambio de color del titular, que es la senal principal. */

.tarjeta--abierta .tarjeta__imagen img {
  transition: transform 600ms ease;
}

.tarjeta--abierta:hover .tarjeta__imagen img {
  transform: scale(1.03);
}

.tarjeta--abierta:hover .entrada__titulo a {
  color: var(--acento);
}

/* ENLACE EXTENDIDO · toda la tarjeta se puede pulsar con UN SOLO enlace.

   El ::after del titular se estira sobre la tarjeta entera. Es el patron
   estandar, y se prefiere a envolver la tarjeta en un <a> por dos razones: un
   <a> alrededor no puede contener el enlace de la categoria —anidar enlaces no
   es valido— y ademas el nombre accesible del bloque pasaria a ser todo el
   texto de la tarjeta leido del tiron.

   Asi el area pulsable es la tarjeta y el nombre accesible sigue siendo solo el
   titular. */

/* ⚠️ LOS DOS z-index SON EXPLICITOS A PROPOSITO. Sin ellos la capa funciona en
   casi toda la tarjeta y falla en una franja de ~8px sobre la fila de
   metadatos: ahi ganaba el <time> y el punto quedaba muerto.

   El motivo es que .entrada__meta es un contenedor flex, y sus hijos se pintan
   como unidades atomicas aunque no esten posicionados, con lo que el orden
   frente a un ::after absoluto de z-index: auto deja de ser el que uno supone.
   Apilar a mano quita la duda en vez de depender de ese orden.

   Escala: 1 la capa, 2 la categoria, que tiene que seguir encima de la capa. */

.tarjeta--abierta .entrada__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* La categoria tiene que quedar POR ENCIMA de esa capa o deja de poder
   pulsarse: es el unico otro destino de la tarjeta y lleva al filtro del
   listado, no al articulo.

   position: relative es imprescindible ademas del z-index — sin el, el z-index
   no aplica y el enlace se queda debajo sin que nada avise.

   ⚠️ VA EN EL <a> Y NO EN EL <p class="etiqueta">, y la diferencia se ve solo
   probando a pulsar. El <p> es de ancho completo, asi que subiendolo entero se
   llevaba por encima de la capa TAMBIEN su hueco vacio: la franja a la derecha
   de «FUNDAMENTO» —unos 270 de los 365px de la tarjeta— dejaba de abrir el
   articulo. Un agujero muerto en mitad de una tarjeta que se anuncia como
   pulsable entera.

   Subiendo solo el enlace, el texto de la categoria lleva al filtro y todo lo
   que lo rodea sigue llevando al articulo. Comprobado con hit-testing en seis
   puntos: no se detecta mirando, porque las dos versiones se ven idénticas. */

.tarjeta--abierta .etiqueta a {
  position: relative;
  z-index: 2;
}

/* ------------------------------------------- Tarjeta de ejemplo --------- */

/* Con prefers-reduced-motion se va el zoom y se queda el color. Lo que informa
   es que el titular cambie de tono, no que la foto se mueva. */

/* ⚠️ AQUI SE APAGA TAMBIEN EL DESPLAZAMIENTO DE LAS FLECHAS, Y ANTES NO.
   El bloque quitaba la transicion pero dejaba el `transform: translateX(4px)`
   del hover: sin transicion no se anima, pero la flecha SALTA igual 4px. Con
   reduced-motion eso es justo lo que sobra —y .boton--contorno, el boton que
   «Ver todos los articulos» acaba de dejar de ser, ya lo apagaba entero—. Al
   compartir estilo los dos enlaces de accion, se igualan por el mas estricto. */

@media (prefers-reduced-motion: reduce) {
  .tarjeta--abierta .tarjeta__imagen img,
  .inicio .destacado__imagen img,
  .inicio .destacado__flecha,
  .inicio .lista__flecha {
    transition: none;
  }

  .tarjeta--abierta:hover .tarjeta__imagen img,
  .inicio .destacado__leer:hover .destacado__flecha,
  .inicio .lista__enlace:hover .lista__flecha {
    transform: none;
  }
}

/* ------------------------------------------- Tarjeta de proximamente ----- */

/* Discontinuo frente al filete continuo de la tarjeta real: distingue «esto
   todavía no es contenido» sin gastar un color más. */

.tarjeta--proxima {
  align-items: center;
  justify-content: center;
  border-style: dashed;
  text-align: center;
  gap: 14px;
}

/* El igualado de filas de .tarjetas la deja a la altura de un artículo siempre
   que haya alguno a la vista. Cuando NO lo hay —categoría vacía o búsqueda sin
   resultados— se queda sola y volvería a sus 248,8 px naturales, así que la
   tarjeta cambiaba de tamaño según la categoría que se pulsara. Estos suelos lo
   evitan: son la altura que tendría el artículo que no está.

   VAN ATADOS a data-visibles="1", que es exactamente «se ve ella y nada más».
   Así no pueden inflar una fila que tenga artículos dentro: con un solo artículo
   el atributo ya vale 2 y no coincide ninguna de las dos reglas.

   HAY DOS VALORES porque la altura del artículo depende del ancho de columna, y
   ese depende del tramo. Medido:

     3 columnas   1085 → 573,9   1150 → 588,3   1248 → 573,8   1440 → 573,8
     2 columnas    749 → 580,2    900 → 572,8   1000 → 580,5   1084 → 608,5
     1 columna     375 → 560,1    600 → 614,9    748 → 713,6

   Se toma 574 arriba y 580 abajo, que aciertan en los anchos de cada tramo
   donde más se navega y se quedan cortos como mucho 14 px a 1150 y 28 px a
   1084. No hay un valor exacto para todo el tramo y no lo puede haber: lo que
   mueve la altura es en cuántas líneas parte el titular, que salta de golpe.

   EN UNA COLUMNA NO HAY SUELO Y NO HACE FALTA, aunque sea donde más varía la
   altura del artículo. Ahí grid-auto-rows vale auto, así que la tarjeta mide
   248,8 px SIEMPRE, acompañada o sola: no hay dos estados que igualar. Poner un
   suelo crearía la incoherencia que arriba se está quitando, y de paso metería
   una caja de 700 px de lado casi vacía en un móvil. */

@media (min-width: 1085px) {
  .tarjetas[data-visibles="1"] .tarjeta--proxima {
    min-height: 574px;
  }
}

@media (min-width: 749px) and (max-width: 1084px) {
  .tarjetas[data-visibles="1"] .tarjeta--proxima {
    min-height: 580px;
  }
}

/* El logo del sitio por background-image y NO por mask, por el mismo motivo que
   en .marca::before: una mascara se queda solo con el canal alfa y convertiria
   el cuadrado verde con la figura blanca en un bloque macizo de --acento.

   ⚠️ LA CAJA SIGUE MIDIENDO 46x44 Y NO SE TOCA: de ella depende el min-height
   documentado de «Proximamente» —574 px en tres columnas, 580 en dos—, que esta
   medido contra la altura total de la tarjeta. Cambiar este alto lo invalida.

   Con `contain` y la proporcion del logo (1312/1199 = 1.0942), dentro de esos
   46x44 el dibujo ocupa 46x42 centrado: sobra 1px arriba y otro abajo, que no
   se ve y evita deformarlo. */

.tarjeta--proxima::before {
  content: "";
  flex: none;
  width: 46px;
  height: 44px;
  margin-bottom: 4px;
  background: url(../img/logo.svg) center / contain no-repeat;
}

/* Va como <p> y no como encabezado: no debe entrar en el esquema del documento
   al mismo nivel que el artículo real. El tamaño es el del titular de tarjeta. */

.proxima__titulo {
  margin: 0;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--tinta);
}

.proxima__texto {
  margin: 0;
  max-width: 28ch;
  color: var(--tinta-suave);
}

.proxima__puntos {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.proxima__puntos span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acento);
  opacity: 0.25;
  animation: latido 1.4s ease-in-out infinite;
}

.proxima__puntos span:nth-child(2) { animation-delay: 0.2s; }
.proxima__puntos span:nth-child(3) { animation-delay: 0.4s; }

@keyframes latido {
  0%, 60%, 100% { opacity: 0.25; }
  30%           { opacity: 1; }
}

/* Sin movimiento los tres puntos se quedan quietos, y entonces son la única
   señal de «pendiente» que queda: con la animación activa da igual que el
   estado de reposo sea tenue, porque el pulso los lleva hasta 5,43:1, pero
   congelados hay que verlos.

   Por eso van a opacidad completa y no a la de reposo. Medido sobre la caja:
   0,55 da 2,29:1, por debajo del 3:1 que pide un elemento no textual, y el
   umbral no se cruza hasta 0,70. A opacidad 1 quedan en 5,43:1, el mismo
   contraste que la balanza, y los tres iguales se leen como puntos suspensivos
   — que es exactamente lo que tienen que comunicar. */

@media (prefers-reduced-motion: reduce) {
  .proxima__puntos span {
    animation: none;
    opacity: 1;
  }
}

/* ------------------------------------------------------------ Migas ----- */

/* Aqui vivia .miga, con sus cuatro reglas. Se retira entera: ya no queda un
   solo rastro de migas en el sitio.

   Se fueron por tandas y por el mismo motivo cada vez —repetian navegacion que
   la cabecera ya da en todas las paginas—: primero las del articulo y el
   listado, y despues las de sobre/ y contacto/, que eran las ultimas.

   Si alguna vez vuelven, hay que reponer DOS cosas y no una: el marcado y el
   BreadcrumbList del JSON-LD. Quitar solo el visible no da ningun error, y por
   eso es la mitad que se olvida. */

/* ------------------------------------------------ Índice del artículo --- */

/* Vive en la COLUMNA del articulo, entre la entradilla y el primer apartado, y
   se escribe A MANO en el HTML de cada uno. Antes lo generaba js/main.js en el
   lateral, y el cambio tiene dos motivos que conviene no deshacer.

   El primero es donde caia. El lateral no se oculta en pantalla estrecha: baja
   DEBAJO del articulo, asi que por debajo de 932px el indice aparecia cuando
   ya estaba todo leido. Un indice que llega al final no es un indice.

   El segundo es que ahora existe sin JavaScript, que es la regla del proyecto:
   el contenido va en el HTML y el JS solo enriquece. Un indice generado no lo
   ve ni quien navega sin scripts ni un buscador.

   El precio es mantenimiento —hay que escribir la lista y los id a mano en
   cada artículo— y esta contado en CLAUDE.md, con la receta.

   Se fusionaron aqui la caja base y el antiguo modificador .indice--lateral,
   que era quien traia las filas con filete. Ya no existe: habia un solo uso. */

.indice {
  background: var(--papel-alt);
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: 26px 30px;
  margin: 36px 0 44px;
}

/* El filete de 1px NO es decoracion: --papel-alt esta a ΔE 2,3 del blanco de la
   pagina, por debajo del umbral en el que dos superficies planas se distinguen,
   asi que la caja sin contorno se lee como si no lo tuviera. El canto lo dibuja
   la linea y el relleno se queda en lo que es, un matiz. Mismo criterio que en
   .tarjeta--caja, y esta razonado en CLAUDE.md.

   .referencias lleva exactamente lo mismo —filete, radio y padding— y no por
   casualidad: son los dos paneles de la columna del articulo y tienen que ser
   la misma caja. Si se toca uno, se toca el otro. */

/* Especificidad reforzada: el indice vive dentro de .articulo y sin esto la
   regla .articulo h2 —Source Serif a 32px— lo pisaria. */

.articulo .indice h2,
.indice h2 {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 6px;
  color: var(--acento);
}

/* La lista va en la serif de lectura y no en Inter, al reves que el rotulo. No
   es un metadato que se consulte de un vistazo: son los titulares de los
   apartados, el mismo texto que luego se lee en el cuerpo. A 17px queda por
   debajo de los 18 del parrafo, que es lo que la mantiene como aparato y no
   como texto. */

/* ⚠️ El prefijo .articulo de las tres reglas siguientes NO es adorno, y quitarlo
   descuadra la caja sin dar ningun error.

   Mas abajo en este archivo estan «.articulo ul, .articulo ol { margin: 0 0 22px;
   padding-left: 24px }» y «.articulo li { margin-bottom: 9px }», que son las
   listas del cuerpo del texto. Tienen la MISMA especificidad que un .indice ol
   a secas —(0,1,1)— y van DESPUES, asi que ganaban por orden: la lista se metia
   24px hacia dentro, se despegaba del rotulo y cada fila sumaba 9px por debajo
   del filete, que es lo que descolocaba las divisorias.

   El modificador viejo .indice--lateral no tenia este problema por casualidad:
   vivia al final del archivo y ganaba por orden. Al traer el componente aqui
   arriba, el empate lo pierde. Mismo caso que .boton--contorno:hover, que esta
   documentado en CLAUDE.md.

   Se arregla con especificidad y no moviendo el bloque de sitio: asi aguanta
   aunque alguien reordene el archivo. */

.articulo .indice ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: indice;
  font-size: 1.0625rem;
}

.articulo .indice li {
  counter-increment: indice;
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--borde);
}

/* Sin filete tras el ultimo: ahi cierra el padding de la caja, no una linea. */

.articulo .indice li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* El numero va en el acento a proposito: es el MISMO que .articulo__cuerpo
   h2::before pone delante del apartado, tambien en acento. Asi el «3.» del
   indice y el «3.» del epigrafe se reconocen como la misma cosa. Si alguien
   cambia uno de los dos, tiene que cambiar el otro. */

.indice li::before {
  content: counter(indice) ".";
  flex: none;
  font-weight: 600;
  color: var(--acento);
}

/* ⚠️ Y ESTE ES «EL OTRO» DEL AVISO DE ARRIBA. Cuando el texto trae su propia
   numeracion de apartados —«I.», «II.»—, el epigrafe apaga su contador y el
   indice tiene que apagar el suyo en el mismo movimiento, o el indice diria
   «1.» donde el apartado dice «III.».

   La marca pasa a escribirse en .indice__marca, que replica exactamente lo que
   ponia el ::before: misma columna por el `flex: none`, mismo peso y mismo
   acento. La diferencia es que el texto sale del articulo y no de un contador.

   Las dos clases las pone la plantilla a la vez, mirando si alguna seccion
   trae numero_original: no se pueden desincronizar desde el JSON. */

.indice--sin-contador li::before {
  content: none;
}

.articulo .indice--sin-contador li {
  counter-increment: none;
}

.indice__marca {
  flex: none;
  font-weight: 600;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

/* En --tinta y no en el acento: son cinco enlaces seguidos y pintarlos todos de
   color convertiria la caja en un semaforo, justo lo contrario de la regla de
   usar el acento con contencion. El color queda para el numero y el rotulo. */

.indice a {
  color: var(--tinta);
  line-height: 1.45;
}

/* Sin subrayado al pasar: la senal la da el tono. Mismo criterio que
   .etiqueta--tag —un subrayado dentro de una caja con filete se lee como un
   fallo de maquetacion— y por eso hay que anular el text-decoration que pone
   la regla global de a:hover. */

.indice a:hover {
  color: var(--acento);
  text-decoration: none;
}

/* Va en --tinta, como el cuerpo, y no en --tinta-suave. La entradilla no es un
   metadato ni un pie: es el primer párrafo que se lee, solo que más grande. El
   gris la trataba como texto de apoyo y la empujaba fuera de la lectura justo
   donde hay que entrar en ella. La jerarquía la marcan ya el cuerpo y el aire,
   que es de lo que va este sistema: el color queda para separar lo que se lee
   de lo que se consulta. */

.entradilla {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--tinta);
}

.aviso {
  font-family: var(--ui);
  font-size: 13px;
  color: var(--tinta-suave);
}

/* CURSIVA DENTRO DE CURSIVA: vuelve a redonda. Es la convencion tipografica
   —dentro de un texto en italica, lo que se destaca se compone en redonda— y
   aqui ademas arregla un marcado que si no seria invisible.

   El caso concreto: el aviso de cierre de sobre/ va entero en <em>, y dentro
   lleva «El Derecho Escrito» tambien en <em> porque la regla del sitio es que
   el nombre va en cursiva cuando aparece en un texto. Los navegadores NO
   alternan solos: verificado, un <em> dentro de otro <em> se queda en italic,
   asi que el nombre quedaba marcado en el HTML y sin distinguirse en pantalla.

   Va sin prefijo porque la regla vale en cualquier sitio donde pase lo mismo.
   Hoy hay un solo caso; si algun dia se escribe el nombre dentro de otro texto
   en cursiva, se compone bien sin tener que acordarse de nada. */

em em,
i em,
em i {
  font-style: normal;
}

/* ------------------------------------------------------- Compartir ------ */

/* Enlaces planos, sin scripts de terceros. Los iconos van por mask, como el
   resto del sistema, asi que heredan currentColor y cambian solos al pasar el
   raton sin duplicar archivos ni pintar marcas de colores corporativos: aqui
   mandan la tipografia y el verdigris, no el manual de LinkedIn. */

/* El filete se queda aquí y no sube por encima del enlace de vuelta, aunque
   este se haya metido en medio. No marca «se acabó el artículo»: abre el bloque
   de compartir, que tiene su propio rótulo debajo. Un filete sin rótulo encima
   del enlace sería una raya suelta.

   Además no podría subirse tal cual: .volver es inline-flex, así que un
   border-top suyo mediría lo que mide el texto, no el ancho de la columna.
   Llevarlo ahí obligaría a hacerlo de bloque, y entonces toda la franja sería
   zona pulsable.

   Los 48 de arriba bajan a 40 para igualar el hueco que la caja de citas deja
   por el otro lado del enlace: 40 y 40. */

/* ⚠️ AQUI VIVIA `.articulo .descarga`, QUE ERA EL BOTON DEL FINAL DEL ARTICULO.
   El enlace se mudo a la fila de «Volver», arriba del todo, y su regla nueva
   está junto a `.volver`, que es el componente al que hoy se parece. Aquí no
   queda nada que buscar.

   Lo que aquella regla dejaba escrito y NO hay que perder, porque describe una
   trampa del proyecto y no solo ese botón: iba prefijada con `.articulo` porque
   era un <p> dentro de <article class="articulo">, y `.articulo p` pesa (0,1,1)
   frente a los (0,1,0) de una clase sola. Estuvo escrita SIN el prefijo y era
   una regla muerta —el botón quedaba pegado a «Volver», hueco medido: 0— sin
   dar ningún error. Sigue vigente para cualquier clase nueva sobre un <p>,
   <ul> o <h3> del artículo. */

/* ⚠️ EL `margin-top` VUELVE A 40 Y ESTUVO EN 0. Lo soltó el botón de descarga
   cuando se metió entre «Volver» y esto trayendo su propio margen; al mudarse
   arriba, `.compartir` vuelve a ser el primer bloque de la fila de acciones y
   sin estos 40 su filete queda PEGADO a «Volver a los artículos» —hueco: 0—.

   No es un número nuevo: es el que tenía antes de que existiera el botón, y el
   mismo que separa las referencias de «Volver», así que el enlace queda con el
   mismo aire por los dos lados. */

.compartir {
  margin: 40px 0 32px;
  padding-top: 28px;
  border-top: 1px solid var(--borde);
}

/* ⚠️ TAMBIEN PREFIJADA, Y POR LO MISMO: `.articulo ul` —(0,1,1)— le ganaba a
   `.compartir__lista` —(0,1,0)— y le colaba su `margin: 0 0 22px` y su
   `padding-left: 24px`.

   El efecto visible era que las pildoras arrancaban 24px MAS A LA DERECHA que
   el rotulo «COMPARTIR», como si estuvieran sangradas a proposito. No lo
   estaban: era el relleno por defecto de las listas del cuerpo. Medido: rotulo
   en 0 y primera pildora en 24.

   El `list-style: none` si se aplicaba, porque `.articulo ul` no lo declara.
   O sea que de las tres declaraciones de este bloque solo funcionaba una, y
   las otras dos se veian como decisiones de diseno. */

.articulo .compartir__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.compartir__enlace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--papel);
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.compartir__enlace:hover {
  color: var(--acento);
  border-color: var(--acento);
  text-decoration: none;
}

.compartir__icono {
  flex: none;
  width: 15px;
  height: 15px;
  background-color: currentColor;
}

.compartir__icono--linkedin {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M3.4 5.9h2.2V14H3.4zM4.5 2a1.3 1.3 0 1 0 0 2.6A1.3 1.3 0 0 0 4.5 2zM7.4 5.9h2.1v1.1h.03c.3-.56 1.02-1.15 2.1-1.15 2.25 0 2.66 1.48 2.66 3.4V14h-2.2v-3.9c0-.93-.02-2.13-1.3-2.13-1.3 0-1.5 1.02-1.5 2.06V14H7.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M3.4 5.9h2.2V14H3.4zM4.5 2a1.3 1.3 0 1 0 0 2.6A1.3 1.3 0 0 0 4.5 2zM7.4 5.9h2.1v1.1h.03c.3-.56 1.02-1.15 2.1-1.15 2.25 0 2.66 1.48 2.66 3.4V14h-2.2v-3.9c0-.93-.02-2.13-1.3-2.13-1.3 0-1.5 1.02-1.5 2.06V14H7.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.compartir__icono--whatsapp {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M8 1.4a6.5 6.5 0 0 0-5.6 9.8L1.4 14.6l3.5-1a6.5 6.5 0 1 0 3.1-12.2zm0 1.4a5.1 5.1 0 1 1-2.6 9.5l-.24-.14-2 .55.54-2-.15-.25A5.1 5.1 0 0 1 8 2.8zm-2.3 2.5c-.12 0-.3.04-.47.22-.16.18-.62.6-.62 1.47s.63 1.7.72 1.82c.09.12 1.23 1.96 3.05 2.67 1.51.6 1.82.48 2.15.45.33-.03 1.06-.43 1.21-.85.15-.42.15-.78.1-.85-.04-.07-.16-.12-.34-.21-.18-.09-1.06-.52-1.22-.58-.16-.06-.28-.09-.4.09-.12.18-.46.58-.56.7-.1.12-.2.13-.39.04-.18-.09-.77-.28-1.46-.9-.54-.48-.9-1.07-1.01-1.25-.1-.18-.01-.28.08-.37.08-.08.18-.21.27-.32.09-.11.12-.19.18-.31.06-.12.03-.23-.01-.32-.05-.09-.4-.97-.55-1.33-.14-.35-.29-.3-.4-.31z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M8 1.4a6.5 6.5 0 0 0-5.6 9.8L1.4 14.6l3.5-1a6.5 6.5 0 1 0 3.1-12.2zm0 1.4a5.1 5.1 0 1 1-2.6 9.5l-.24-.14-2 .55.54-2-.15-.25A5.1 5.1 0 0 1 8 2.8zm-2.3 2.5c-.12 0-.3.04-.47.22-.16.18-.62.6-.62 1.47s.63 1.7.72 1.82c.09.12 1.23 1.96 3.05 2.67 1.51.6 1.82.48 2.15.45.33-.03 1.06-.43 1.21-.85.15-.42.15-.78.1-.85-.04-.07-.16-.12-.34-.21-.18-.09-1.06-.52-1.22-.58-.16-.06-.28-.09-.4.09-.12.18-.46.58-.56.7-.1.12-.2.13-.39.04-.18-.09-.77-.28-1.46-.9-.54-.48-.9-1.07-1.01-1.25-.1-.18-.01-.28.08-.37.08-.08.18-.21.27-.32.09-.11.12-.19.18-.31.06-.12.03-.23-.01-.32-.05-.09-.4-.97-.55-1.33-.14-.35-.29-.3-.4-.31z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.compartir__icono--correo {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.8' y='3.4' width='12.4' height='9.2' rx='1.6'/%3E%3Cpath d='m2.4 4.6 5.6 4 5.6-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.8' y='3.4' width='12.4' height='9.2' rx='1.6'/%3E%3Cpath d='m2.4 4.6 5.6 4 5.6-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* El del PDF es de linea, como el de correo y el de enlace, y NO lleva las
   letras «PDF» dentro: a 15px no se leerian y el texto del boton ya lo dice.
   Es una hoja con la esquina doblada y tres renglones. */

.compartir__icono--pdf {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 1.8H4.4a1.6 1.6 0 0 0-1.6 1.6v9.2a1.6 1.6 0 0 0 1.6 1.6h7.2a1.6 1.6 0 0 0 1.6-1.6V5.8z'/%3E%3Cpath d='M9.2 1.8v4h4'/%3E%3Cpath d='M5.6 9h4.8M5.6 11.4h3.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 1.8H4.4a1.6 1.6 0 0 0-1.6 1.6v9.2a1.6 1.6 0 0 0 1.6 1.6h7.2a1.6 1.6 0 0 0 1.6-1.6V5.8z'/%3E%3Cpath d='M9.2 1.8v4h4'/%3E%3Cpath d='M5.6 9h4.8M5.6 11.4h3.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.compartir__icono--enlace {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 9.4a2.6 2.6 0 0 0 3.9.3l2-2a2.6 2.6 0 0 0-3.7-3.7l-1.1 1.1'/%3E%3Cpath d='M9.4 6.6a2.6 2.6 0 0 0-3.9-.3l-2 2a2.6 2.6 0 0 0 3.7 3.7l1.1-1.1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 9.4a2.6 2.6 0 0 0 3.9.3l2-2a2.6 2.6 0 0 0-3.7-3.7l-1.1 1.1'/%3E%3Cpath d='M9.4 6.6a2.6 2.6 0 0 0-3.9-.3l-2 2a2.6 2.6 0 0 0 3.7 3.7l1.1-1.1'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* El de copiar es un <button>, asi que solo hay que quitarle lo que le pone el
   agente de usuario y que .compartir__enlace no declara ya.

   Aqui NO vale «font: inherit», que fue lo primero que se puso: es una
   abreviatura y reescribe tambien el font-size, asi que al ir despues con la
   misma especificidad se llevaba por delante los 12px del enlace y el boton
   salia con el cuerpo del texto corrido. La tipografia entera la declara
   .compartir__enlace y el boton la recibe sin ayuda. */

.compartir__enlace--copiar {
  line-height: inherit;
  cursor: pointer;
}

/* --------------------------------------------------------- Contacto ----- */

/* EL FORMULARIO SE ENSANCHA LIMITANDO LA COLUMNA, no estirando los campos.

   La pagina paso a .contenedor--amplio, que era la causa real de que se viera
   apretado: con el contenedor de lectura de 760 y el aside al lado, a los
   campos les quedaban unos 375px.

   Pero ancho de pagina no es ancho de campo. Los 600 de tope salen de contar
   caracteres: a 0.95rem de Inter caben ahi unos 79, dentro del rango comodo de
   linea, y un campo de una sola linea mas ancho es espacio que no se usa nunca.

   EL TOPE VA EN .formulario Y NO EN LA PISTA DE LA REJILLA, y esto se corrigio
   midiendo. Con grid-template-columns: minmax(0, 600px) 1fr la primera pista se
   queda clavada en 600 y quien cede es el aside: medido, bajaba a 196px a 900 y
   a 116 a 820, ilegible. Con las dos pistas en fracciones ceden a la vez y el
   tope del formulario solo actua donde sobra sitio.

   Ademas el tope sigue valiendo cuando las columnas se apilan, que es donde mas
   falta hacia: a 760 sin el, el campo de mensaje se iba a 712px, o sea 94
   caracteres por linea.

   RADIO CERO en campos y aside. Estaban en 4px, que era la unica esquina
   redondeada de esta pagina y no la comparte ningun otro control del sitio
   salvo .boton. Sin sombras, que aqui no habia ninguna. */

.contacto .contenedor {
  display: grid;
  grid-template-columns: 1.25fr minmax(0, 1fr);
  gap: 56px;
  padding-top: 48px;
  padding-bottom: 64px;
  align-items: start;
}

/* ⚠️ LA ENTRADILLA TIENE QUE CRUZAR LAS DOS COLUMNAS, y sin esto la pagina se
   descoloca entera.

   .contacto .contenedor es una rejilla de dos columnas, asi que un parrafo
   suelto dentro de ella se convierte en el PRIMER ITEM y se queda en la columna
   izquierda: el formulario se iba a la derecha y el aside caia debajo, en una
   tercera fila. Verificado midiendo: entradilla en x=42 con 609 de ancho,
   formulario en x=707 y aside en y=798.

   ⚠️ SIN TOPE DE ANCHO, POR ENCARGO DEL CLIENTE, Y ESTA SECCION DECIA LO
   CONTRARIO. Hay que leerla entera antes de «arreglarlo».

   El tope fue primero `34em` —653px— y despues los 600 del formulario. Lo que
   decia aqui, y sigue siendo cierto como medicion:

     «NO se pone al ancho del contenedor: los 1152 dan 125 caracteres por
      linea, muy por encima de lo que se lee comodo.»

   El cliente lo prefiere a ancho de pagina y es su decision. El coste esta
   medido y es real: a 1440 la entradilla pasa de 64 a 123 caracteres por linea,
   contra las 45-75 que recomienda cualquier guia tipografica. En una ventana
   estrecha no se paga —a 768 son 76 y a 375, 35—, asi que lo sufre solo el
   escritorio ancho.

   ⚠️ NO SE COMPENSA CON UN `max-width` DISIMULADO ni volviendo a 600 «porque se
   lee mejor»: eso es deshacer el encargo. Si algun dia molesta, la palanca
   honesta es acortar el texto o pasarlo a dos columnas, no reponer el tope.

   Lo que SI decae del razonamiento anterior es lo del canto: con 653 el parrafo
   sobresalia 53px respecto al formulario y se leia como un desajuste —«casi
   alinear es peor que no alinear»—. A ancho completo ya no hay casi-alineacion:
   el parrafo cierra con el <hr> y con el aside, que son los dos elementos que
   cruzan la fila entera. */

.contacto .entradilla {
  grid-column: 1 / -1;
  margin: 0;
}

/* El filete cierra la banda de entrada y cruza las dos columnas. Sin margen
   propio: los 56 del `gap` de la rejilla ya lo separan por arriba y por abajo,
   y son el mismo hueco que separa las dos columnas entre si.

   ⚠️ SIGUE HACIENDO FALTA, PERO POR OTRO MOTIVO QUE ANTES. Mientras la
   entradilla se topaba en 600, el <hr> era «lo que hacia de ancho de pagina»
   —cruzaba 1152 por debajo de un parrafo de 600—. Al soltar el tope, los dos
   miden lo mismo y esa funcion decae.

   Lo que le queda es la que de verdad importa: separar la banda de entrada de
   la fila de formulario + aparte. Y gana algo, porque antes era una linea mas
   ancha que el parrafo que cerraba y ahora comparte canto exacto con el:
   verificado a 1440, 768 y 375.

   Si alguna vez se quita, lo que hay que mirar no es el ancho sino el hueco: sin
   el, la entradilla y el formulario quedarian separados solo por los 56 del gap,
   que es el mismo aire que hay ENTRE las dos columnas. Dejarian de leerse como
   dos zonas. */

.contacto hr {
  grid-column: 1 / -1;
  margin: 0;
}

.formulario {
  max-width: 600px;
}

/* Nombre y correo en pareja. auto-fit con minmax hace el trabajo de una media
   query: cuando una de las dos no llega a 220px se apilan solas, asi que no hay
   un numero que mantener sincronizado con el corte de abajo.

   El hueco vertical va a 0 porque el margen inferior de .campo ya separa las
   filas; declararlo aqui sumaria dos veces al apilarse. */

.campos-par {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 20px;
}

.campo {
  margin-bottom: 20px;
}

/* Etiqueta real y visible, en la misma familia y cuerpo que los metadatos del
   sitio. Ningun placeholder hace de etiqueta: desaparecen al escribir. */

.campo label {
  display: block;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
  margin-bottom: 7px;
}

.campo input,
.campo textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--ui);
  font-size: 0.95rem;
  border: 1px solid var(--borde);
  border-radius: 0;
  background: var(--papel);
  color: var(--tinta);
  resize: vertical;
  transition: border-color 160ms ease;
}

/* El anillo de foco es el mismo que el del campo del buscador de la cabecera:
   2px de --acento con 1 de separacion. Va en :focus y no en :focus-visible a
   proposito — en un campo de texto se quiere ver siempre, tambien al pulsarlo
   con el raton, porque marca donde se va a escribir. */

.campo input:focus,
.campo textarea:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

/* ERROR. :user-invalid y NO :invalid, que es la diferencia que hace esto
   utilizable: :invalid pinta los campos required en rojo nada mas cargar la
   pagina, antes de que nadie haya escrito. :user-invalid espera a que el
   visitante haya interactuado con el campo.

   El color es --tinta y no un rojo porque LA PALETA NO TIENE NINGUNO, y meter
   uno seria un token nuevo y una decision de diseno que no toca aqui. El salto
   de --borde (#E5E1DA) a --tinta (#1E1E1E) es enorme, asi que se ve de sobra.

   Y el color no es el que informa: quien dice que falta el correo o que esta
   mal escrito es el mensaje nativo del navegador, que sigue intacto porque no
   se ha tocado required ni type="email" ni se ha puesto novalidate. Esto es un
   refuerzo visual, no el canal. */

.campo input:user-invalid,
.campo textarea:user-invalid {
  border-color: var(--tinta);
}

.contacto__aparte {
  background: var(--papel-alt);
  border-radius: 0;
  padding: 26px 28px;
  font-size: 0.95rem;
}

.contacto__aparte h2 {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 10px;
}

/* ⚠️ ERA `h2 + p` Y PINTABA SOLO EL PRIMER PARRAFO DE CADA APARTADO. Se
   escribio cuando cada <h2> de esta caja tenia exactamente UN parrafo debajo,
   asi que el selector de hermano adyacente los cubria todos.

   «Antes de escribir» paso a tener dos, y el segundo se quedo fuera: no heredo
   el gris —caia en el --tinta del cuerpo—, ni el `line-height: 1.6`, ni el
   margen. Dos parrafos seguidos del mismo apartado en dos colores distintos, y
   sin que nada avisara: el selector seguia siendo valido, solo que ya no
   describia el contenido.

   Con `p` a secas cubre los cuatro, y aguanta si manana se anade un tercero.

   ⚠️ EL GRIS SE QUEDA, no se sube todo a --tinta. Esta caja es texto de APOYO
   —fondo --papel-alt, 0,95rem, al lado del formulario— y el sitio ya pinta en
   gris lo equivalente: .autor__bio y .suscripcion__apoyo del lateral del
   articulo son exactamente el mismo papel. Los <h2> se quedan en --tinta, que
   es lo que da la jerarquia dentro de la caja. */

.contacto__aparte p {
  margin: 0 0 24px;
  color: var(--tinta-suave);
  line-height: 1.6;
}

.contacto__aparte p:last-child {
  margin-bottom: 0;
}

/* Aqui habia una regla .destacado —font-size 1.1rem y color --tinta-suave— sin
   ningun elemento que la usara en todo el sitio. Se retira.

   No era solo codigo muerto: al declararse DESPUES de la seccion .destacado de
   la portada, le estaba aplicando tamano y color por herencia. No se notaba
   porque cada hijo de esa seccion declara los suyos, pero cualquiera que
   anadiera un elemento sin tamano propio se lo habria encontrado en 1.1rem y en
   gris sin explicacion posible. */

/* ------------------------------------------------------ Artículo full --- */

.articulo {
  padding: 56px 0 80px;
}

/* El margen superior baja de 14 a 6. Encima va la categoría, y los márgenes
   colapsan al mayor de los dos, así que este era el que mandaba: bajar el de
   .etiqueta--plana a 4 no habría servido de nada aquí.

   Medido de glifo a glifo, el hueco pasa de 28,1 a unos 12. Queda algo más
   holgado que los 10 de la tarjeta de portada, y es lo correcto: el titular es
   de 48 px y no de 28, así que el antetítulo necesita un poco más de aire para
   no parecer pegado a una masa mucho mayor que él. */

.articulo h1 {
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 6px 0 22px;
}

/* Los epigrafes van en --texto, la familia del cuerpo, y NO en el --display del
   titular de aqui arriba. Es el unico sitio del sitio donde un h1 y sus h2 no
   comparten familia, asi que conviene el porque.

   Los dos son SERIF: el cambio fue de un serif de display a uno de texto, no de
   serif a sans. Quien lea «los epigrafes no van en Cormorant» puede suponer que
   saltan a Inter, y no.

   Encaja con la regla del sistema —Cormorant para lo que se mira, Source Serif
   para lo que se lee—: los epigrafes se leen dentro de la columna y en secuencia
   con el texto, mientras que el titular se mira, arriba y con su ficha.

   Y opticamente no se comparan nunca: entre el h1 y el primer h2 hay 621 px
   medidos, con la foto 21:9 de 309 px y la entradilla de 163 en medio. No existe
   un momento de la lectura en que los dos esten a la vista.

   LOS TAMANOS NO BAJAN, aunque Source Serif pese bastante mas: el mismo texto
   pasa de 504,17 a 618,27 px de ancho, un +22,6 %. Igualar la mancha bajaria el
   h2 a unos 26 px, y entonces el h3 caeria a ~19,6 — a un pelo de los 18 del
   cuerpo—, aplastando la escalera h2/h3/parrafo. El peso se prefiere al
   aplastamiento. */

.articulo h2 {
  font-family: var(--texto);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 48px 0 14px;
}

.articulo h3 {
  font-family: var(--texto);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 32px 0 10px;
}

.articulo p {
  margin: 0 0 22px;
  line-height: 1.7;
}

.articulo blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--acento);
  color: var(--tinta-suave);
  font-style: italic;
}

.articulo ul,
.articulo ol {
  margin: 0 0 22px;
  padding-left: 24px;
}

.articulo li {
  margin-bottom: 9px;
}

/* El filete lo comparten el cierre de `sobre/` y la cabecera de `contacto/`. Se
   agrupan para que el grosor y el color se toquen en UN sitio: son la misma
   linea. `.articulo hr` no alcanzaba a contacto/, que no lleva esa clase, asi
   que alli un <hr> habria salido con el relieve por defecto del navegador.

   El margen NO lo comparten, y por eso va aparte: en `sobre/` la linea vive en
   flujo normal y necesita sus 48; en contacto/ es un item de la rejilla y el
   aire se lo dan los 56 del `gap`, arriba y abajo. Con los dos sumarian 104 por
   lado. */

.articulo hr,
.contacto hr {
  border: none;
  border-top: 1px solid var(--borde);
}

.articulo hr {
  margin: 48px 0;
}

/* Vuelta al listado. Es UN componente usado dos veces en el artículo, arriba
   donde estaban las migas y abajo al cerrar: mismo marcado, mismo texto y mismo
   comportamiento. Si hay que cambiarlo se cambia aquí, no en los dos sitios.

   Sin caja a propósito: es una salida, no una acción. El botón de contorno ya
   ocupa ese registro en la portada, y darle caja a esto los pondría a competir.

   Sustituyó a un rastro de migas de tres niveles. Con dos de esos niveles
   —Inicio y Artículos— alcanzables desde la cabecera, que está en todas las
   páginas, la ruta solo repetía navegación que ya existe.

   Los 24 de abajo son los que tenía .miga: el enlace ocupa su sitio y hereda su
   separación con lo que viene después. Sin ellos quedaba a 1,9 px de la
   categoría —medido—, pegado.

   Sin subrayado en ninguno de los dos estados. En reposo ya no lo tenía —la
   regla global de «a» lo quita—, así que lo que hace falta de verdad es la
   excepción al hover, que sí lo pone. Se declaran los dos por si algún día
   cambia la global: la intención queda escrita donde se lee el componente.

   La excepción va aquí y no en la global porque el subrayado al pasar el ratón
   es correcto para el resto del sitio: los enlaces dentro de un párrafo lo
   necesitan. Este va solo en su línea.

   Se puede prescindir de él porque no es un enlace embebido en prosa, que es el
   supuesto que penaliza WCAG 1.4.1: no está dentro de ningún <p> ni tiene texto
   en línea alrededor —comprobado en los dos usos—, así que no hay texto vecino
   con el que confundirlo. Lo identifican la flecha, que es una convención de
   dirección, y el hover, que cambia DOS cosas a la vez: el color se oscurece a
   --acento-oscuro por la regla global y la flecha se desplaza. Ninguna de las
   dos es solo color.

   Lo que sí conviene tener presente: justo debajo del de arriba va la categoría
   del artículo, que es --acento igual y NO es un enlace. Lo que los separa es
   la flecha y que la categoría va en versales de 12 con tracking, frente a los
   14 en caja baja de este. Si algún día se tocan esos dos estilos, hay que
   mirar que sigan distinguiéndose. */

.volver {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 24px;
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.volver:hover {
  text-decoration: none;
}

/* El desplazamiento va SOLO en la flecha, y por eso necesita elemento propio:
   moviendo el enlace entero se arrastraría el texto y se leería como un salto,
   no como un gesto. */

.volver__flecha {
  display: inline-block;
  transition: transform 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.volver:hover .volver__flecha {
  transform: translateX(-4px);
}

.volver:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 2px;
}

/* El de arriba abre la columna y no lleva margen; el de abajo la cierra y sí
   necesita separarse de lo que venga antes. Es la única diferencia entre los
   dos, y va en un modificador para que el componente siga siendo uno. */

/* Los dos a cero, y el hueco lo ponen los vecinos: 40 por arriba los de la
   caja de citas y 40 por abajo los de .compartir. Queda simétrico.

   Tenía 40 arriba de cuando cerraba la página, y al meterse entre las citas y
   el bloque de compartir eso daba 80 arriba contra 50 abajo. Y no se arreglaba
   solo: .volver es inline-flex, o sea una caja atómica de línea, así que sus
   márgenes NO colapsan con los de los hermanos —se suman—. Con un bloque los 40
   y los 40 se habrían fundido en 40 y no habría pasado nada.

   El margin-bottom a cero hace falta explícitamente: la clase base lleva 24
   para separarse de la categoría en el enlace de arriba, y aquí sobra.

   Y pasa de inline-flex a flex con width: fit-content. Siendo de línea, la caja
   iba dentro de un renglón que le añade medio interlineado por arriba, así que
   los huecos medidos salían 45 y 42 en vez de 40 y 40. De bloque no hay
   renglón, y además los márgenes sí colapsan con los vecinos. El fit-content es
   lo que evita el efecto secundario de blockearlo: sin él la caja ocuparía todo
   el ancho de la columna y toda esa franja sería pulsable. */

.volver--cierre {
  display: flex;
  width: fit-content;
  margin-top: 0;
  margin-bottom: 0;
}

/* ---- La fila de acciones que abre el artículo -------------------------- */

/* «Volver a los artículos» a la izquierda y «Descargar PDF» a la derecha, a ras
   del borde derecho de la foto.

   ⚠️ EL ANCHO NO SE DECLARA Y NO HAY QUE DECLARARLO. El envoltorio es un bloque
   hijo de `.articulo__principal`, igual que `.articulo__portada`, así que ya
   mide lo que mide la foto —720 px en escritorio— sin repetir ningún número.
   Un `max-width` aquí sería un segundo sitio donde mantener el ancho de la
   columna, y se desincronizaría en silencio el día que cambie el otro.

   `baseline` y no `center`: lo que tiene que alinear es el TEXTO de los dos
   enlaces, y tienen alturas distintas —el de la derecha lleva un icono—. Con
   `center` las dos líneas de texto quedarían descuadradas entre sí.

   ⚠️ `flex-wrap: wrap` Y LOS DOS ENLACES EN `flex: none`: ESO APILA SIN NINGÚN
   PUNTO DE CORTE, y hace falta. Los dos piden 297 px —160 de «Volver», 121 de
   «Descargar PDF» y los 16 del hueco— así que por debajo de unos 345 px de
   ventana ya no caben en una línea.

   Sin esto no desbordan, que es lo que despista: lo que pasa es que `.volver`
   ENCOGE y su texto se parte en dos líneas. Medido a 320: pasaba de 160 a 135
   px y «Volver a los artículos» se leía en dos renglones. Antes de juntar los
   dos enlaces no ocurría, porque «Volver» tenía la fila entera para él: es una
   regresión que introduce esta fila, no un defecto que ya estuviera.

   Con `flex: none` ninguno de los dos cede, así que cuando no caben es la LÍNEA
   la que se parte, y el `gap` de 16 pasa a hacer de separación vertical.

   **No lleva media query a propósito.** El ancho al que dejan de caber depende
   del largo de los dos textos, y un número escrito aquí se quedaría atrás en
   silencio el día que alguien toque cualquiera de los dos —que es exactamente
   lo que ya ha pasado dos veces con los cortes de la cabecera—. Es el mismo
   recurso que `auto-fit` en `.campos-par`: el navegador mide, nosotros no.

   El `gap` de 16 solo actúa si los dos enlaces llegan a tocarse; a 375 sobran
   46 px. Está para que no se peguen, no para separarlos. */

.articulo__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 24px;
}

/* ⚠️ Los 24 pasan al envoltorio y aquí hay que soltarlos. `.volver` los trae de
   serie para separarse de la foto, y dentro de un flex NO colapsan: se sumarían
   a los del envoltorio y la foto bajaría a 48.

   El `flex: none` es lo que impide que encoja; está razonado arriba. Va
   prefijado para no alcanzar a `.volver--cierre`, que cierra el artículo fuera
   de esta fila. */

.articulo__acciones .volver {
  flex: none;
  margin-bottom: 0;
}

/* Mismo estilo que `.volver` —Inter 14/500, sin subrayado— y el color se deja
   heredar a propósito, igual que hace `.volver`: así los dos extremos de la
   fila no pueden divergir si algún día cambia el tono de los enlaces.

   ⚠️ VA PREFIJADO CON `.articulo`, y no por el patrón de siempre. Aquí ya no es
   un `<p>` —es un `<a>`— así que `.articulo p` no le alcanza; el prefijo está
   por el SUBRAYADO, que lo pone la regla de enlaces del artículo. `.volver`
   consigue quitarlo con una sola clase, pero no conviene fiarlo al empate: con
   `.articulo` gana por especificidad y aguanta si alguien reordena el archivo.

   ⚠️ Y `.descarga` ERA OTRA COSA HASTA HACE NADA: un `<p>` al final del
   artículo con `margin: 40px 0 28px` que envolvía un `.boton--contorno`. Esa
   regla ya no existe. Quien busque por qué el botón de abajo no tiene margen,
   que mire antes si el botón de abajo existe. */

/* ⚠️ `margin-left: auto` Y NO `justify-content: space-between` EN LA FILA, y es
   la misma lección que ya dejó `.paso__enlace--siguiente`. Con los dos enlaces
   en una línea, `space-between` también los separaría; lo que no resuelve es el
   caso apilado, donde cada línea tiene UN solo elemento y `space-between` lo
   manda al principio. El enlace se iría a la izquierda justo cuando el diseño
   pide que cierre contra el canto derecho de la foto.

   El margen automático lo manda a su lado pase lo que pase, caben o no. */

.articulo .descarga {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin-left: auto;
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.articulo .descarga:hover {
  text-decoration: none;
}

.articulo .descarga:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ⚠️ `align-items: center` DENTRO del enlace, aunque la fila de fuera vaya en
   `baseline`. No se contradicen: fuera se alinean los dos textos entre sí y
   aquí el icono con SU texto. Un `<svg>` es contenido reemplazado y su línea
   base es el canto inferior, así que en `baseline` el icono se iría hacia
   arriba y quedaría colgando por encima de la x. */

.descarga__icono {
  flex: none;
}

/* Se mueve SOLO la flecha y la bandeja se queda, que es lo que hace que el
   gesto se lea como «esto baja a tu equipo» y no como un icono que se desplaza.
   Por eso el dibujo lleva un <g>: con una mask no habría nada que animar por
   separado.

   ⚠️ EL DESPLAZAMIENTO VA EN UNIDADES DEL viewBox, NO EN PÍXELES DE PANTALLA.
   El `transform` de un hijo de SVG se interpreta en el sistema de coordenadas
   local, así que estos 4 son 4/24 del alto del icono: a 15 px de caja salen
   2,5 px reales. Si alguien cambia el tamaño del icono, el gesto escala con él
   —que es lo que se quiere— pero el número de aquí seguirá diciendo 4.

   Los 180 ms y la curva son los mismos de `.volver__flecha`: las dos flechas de
   esta fila se mueven igual. */

.descarga__flecha {
  transition: transform 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.articulo .descarga:hover .descarga__flecha,
.articulo .descarga:focus-visible .descarga__flecha {
  transform: translateY(4px);
}

@media (prefers-reduced-motion: reduce) {
  .volver__flecha {
    transition: none;
  }

  .volver:hover .volver__flecha {
    transform: none;
  }

  /* Se apagan las DOS cosas, la transición y el desplazamiento. Quitando solo
     la transición la flecha SALTARÍA los 4, que es justo lo que sobra con esta
     preferencia. Es la misma lección que dejó `.boton__flecha`. */

  .descarga__flecha {
    transition: none;
  }

  .articulo .descarga:hover .descarga__flecha,
  .articulo .descarga:focus-visible .descarga__flecha {
    transform: none;
  }
}

/* ------------------------------------------ Progreso de lectura --------- */

/* La barra la pinta el JS. Sin JS no se ve nada roto: la banda queda vacia
   y el articulo se lee igual. */

/* --avance es la UNICA fuente del progreso: lo escribe el JS y de el beben
   tanto el ancho del relleno como el corte del degradado del rotulo. Al ser el
   mismo valor sobre la misma caja, los dos bordes no pueden desalinearse, ni
   al redimensionar la ventana ni a ninguna resolucion. */

.progreso {
  --avance: 0%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: var(--alto-progreso);
  background: var(--papel-alt);
  display: flex;
  align-items: center;
}

/* El relleno ocupa el alto completo de la franja y crece hacia la derecha.
   El ancho lo escribe el JS.

   EL 0.10 ESTA ATRAPADO ENTRE DOS LIMITES OPUESTOS. No es un valor estetico.

   Techo. El rotulo va encima y tiene que leerse igual sobre la parte llena que
   sobre la vacia, y no existe ningun color plano que pase 4.5:1 contra los dos
   fondos —ni el negro puro, que se queda en 3.55:1 sobre el verdigris a plena
   intensidad—. Lavar el relleno acerca los dos fondos hasta que un mismo color
   de texto vale para ambos, asi que cuanto mas lavado, mejor se lee:

     alpha  relleno    rotulo --tinta-suave   cifra --acento-oscuro
     0.18   #d3ddd9    4.41:1  incumple AA    7.00:1
     0.15   #d9e1dd    4.60:1                 7.12:1
     0.10   #e3e8e4    4.94:1                 7.65:1   <- actual
     0.08   #e7eae7    5.06:1                 7.83:1

   Suelo. Pero el relleno tambien tiene que verse: si el borde entre lleno y
   vacio deja de distinguirse, el indicador no indica nada. Medido en dE2000
   contra la banda vacia, que es la metrica de diferencia percibida —el ratio
   WCAG mide legibilidad de texto y aqui no dice nada util—:

     0.15  dE 6.81       0.10  dE 4.70       0.08  dE 3.55

   Por debajo de dE 2 seria imperceptible. El 0.10 se queda con casi toda la
   ganancia de contraste y conserva margen de borde. Bajar a 0.08 suma 0.12 al
   rotulo, que no se nota, y se lleva por delante una cuarta parte del dE, que
   si. No subir de 0.15 ni bajar de 0.10.

   El relleno en si se queda en 1.14:1 contra la banda y no llega a los 3:1 que
   pide WCAG 1.4.11, pero no tiene por que: el porcentaje esta escrito al lado
   en texto y en aria-valuenow, asi que la informacion no depende del color. El
   relleno es refuerzo visual, no el unico canal.

   Se usa opacity y no un rgba fijo para que el relleno siga a --acento si la
   marca cambia de color. */

.progreso__barra {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--avance);
  background: var(--acento);
  opacity: 0.1;
}

/* flex: 1 hace que el rotulo ocupe la banda entera y no solo el ancho de su
   texto. Es lo que permite que los porcentajes del degradado de abajo esten en
   coordenadas de banda, las mismas que el ancho del relleno. */

.progreso__rotulo {
  position: relative;
  z-index: 1;
  flex: 1;
  margin: 0;
  text-align: center;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* --acento se queda en 4.44:1 sobre el relleno lavado, a un pelo de AA. El
   tono oscuro pasa de sobra y mantiene el caracter del acento. */

.progreso__cifra {
  color: var(--acento-oscuro);
}

/* ---- Mejora: relleno solido y rotulo a dos tintas ----------------------- */

/* Con el relleno a plena intensidad ningun color plano sirve para las dos
   zonas: el texto oscuro sobre el verdigris se queda en 1.04:1. La solucion es
   que el propio texto cambie de color al cruzar el borde.

   Se hace con UN solo elemento, no con dos capas superpuestas: un degradado de
   corte duro recortado a las letras. Ventajas sobre duplicar el texto:

     - No puede haber desalineacion, porque no hay dos cajas que alinear.
     - No hay texto duplicado que ocultar a los lectores de pantalla.
     - La cifra que actualiza el JS vive en un unico nodo y no se desincroniza.

   Va dentro de @supports porque el respaldo importa mas de lo normal aqui: con
   relleno solido, cualquier alternativa que no haga dos tintas es ilegible en
   media banda. Si el navegador no soporta el recorte, se queda el relleno
   lavado al 10% y el texto oscuro de arriba, que ya estaban verificados.

   Ratios: --tinta-suave sobre --papel-alt da 5.63:1 en la zona vacia, y
   --papel-alt sobre --acento da 5.43:1 en la rellena. Los dos cumplen AA.

   El degradado se escribe con cuatro topes y no con la sintaxis corta de dos
   posiciones, que es mas reciente y no puedo probarla en Firefox. */

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .progreso__barra {
    opacity: 1;
  }

  .progreso__rotulo {
    background-image: linear-gradient(
      to right,
      var(--papel-alt) 0,
      var(--papel-alt) var(--avance),
      var(--tinta-suave) var(--avance),
      var(--tinta-suave) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  /* Sin esto la cifra se pintaria opaca por encima del recorte y se saldria
     del efecto: sobre el relleno solido caeria a 1.4:1. */

  .progreso__cifra {
    color: inherit;
    -webkit-text-fill-color: inherit;
  }

  /* En alto contraste los fondos se desactivan, y un texto transparente
     desapareceria del todo. Se vuelve a color plano del sistema. */

  @media (forced-colors: active) {
    .progreso__rotulo {
      background-image: none;
      color: CanvasText;
      -webkit-text-fill-color: CanvasText;
    }
  }
}

/* La banda es fija: hay que apartar el contenido y bajar la cabecera pegajosa
   para que no queden por debajo. Solo afecta a las paginas que la llevan. */

body:has(.progreso) {
  padding-top: var(--alto-progreso);
}

body:has(.progreso) .cabecera {
  top: var(--alto-progreso);
}

/* --------------------------------------- Disposicion del articulo ------- */

.articulo__disposicion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lateral);
  gap: 56px;
  align-items: start;
}

/* El ancho de lectura manda sobre el de la rejilla: por encima de ~720px la
   linea se hace incomoda por muy amplio que sea el contenedor. */

.articulo__principal {
  max-width: 720px;
}

/* Filete corto bajo el titular, como firma visual de la cabecera. */

.articulo__titular::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background: var(--acento);
  margin-top: 26px;
}

.articulo__ficha {
  margin: 22px 0 28px;
}

/* ⚠️ «ULTIMA ACTUALIZACION» VA SIEMPRE EN SU PROPIA FILA, Y NO ES UNA
   PREFERENCIA: ES QUE NO CABE AL LADO A NINGUN ANCHO. Medido con el mes mas
   largo —«30 de septiembre de 2026»— sobre el articulo de MASC:

     fecha 198 + 12 + minutos 145,3 + 12 + actualizacion 367,3  =  734,6 px

   y la columna topa en los 720 de `.articulo__principal`. O sea que la fila
   envolveria igual en un monitor de 2560, porque lo que la limita es el ancho
   de lectura y no la ventana.

   Con meses cortos si cabria —«5 de mayo de 2026» baja la suma a ~667— y esa
   es justamente la razon de forzarlo: un diseno que se coloca distinto segun el
   mes que tenga la fecha no se puede revisar ni explicar. Se hace explicito,
   que es lo que ya hizo la portada con «Leer articulo» y esta razonado en
   CLAUDE.md.

   `flex-basis: 100%` y no un <br> ni un contenedor aparte: el elemento sigue
   siendo un item mas de la misma fila flex, asi que hereda el gap vertical y
   no hay que recolocar nada. */

.articulo__ficha .actualizado {
  flex-basis: 100%;
}

/* Y con ella se va el separador que la precede, que si no se queda COLGANDO al
   final de la primera linea: una barra sin nada que separar.

   Se apunta al elemento que tiene `.actualizado` justo detras, en vez de a
   `.lectura` por su nombre: si algun dia cambia el orden de la ficha, la regla
   sigue sirviendo sola. Es el mismo fallo y la misma cura que
   `.inicio .destacado .entrada__meta .lectura::after` por debajo de 600. */

.articulo__ficha > :has(+ .actualizado)::after {
  content: none;
}

/* ⚠️ POR DEBAJO DE 749 NO HAY SEPARADORES, y el numero esta medido.
   Ahi abajo la ficha gana la firma —aparece por debajo de 900— y la fila pasa a
   pedir 582,9 px: firma 215,6 + fecha 198 + minutos 145,3 y sus dos huecos.
   La columna es la ventana menos 48, asi que envuelve por debajo de ~631, y al
   envolver vuelve el separador colgando.

   El corte va en el 748 que ya existe —el de las tarjetas— y no en 631: entre
   esos dos anchos la fila aun cabe de una pieza, pero vale mas pasarse de
   prudente que atar el corte a un numero que depende del largo de la fecha y
   del nombre del mes. Perderse una barra decorativa no se nota; una barra
   colgada al final de una linea se lee como un error. */

@media (max-width: 748px) {
  .articulo__ficha > :not(:last-child)::after {
    content: none;
  }
}

/* 21:9 y no 16:9: en la columna de 720 pasa de 405 a 309 px de alto, 96 menos,
   un 24%. La foto dejaba demasiado por delante del texto. */

.articulo__portada {
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: 3px;
  background: var(--papel-alt);
  margin: 0 0 32px;
}

/* El encuadre tira hacia arriba a proposito: la foto es mas alta que el marco
   y centrada perderia la balanza y la cabeza de la figura.

   El 12% va atado al 21:9 de arriba y hay que mover los dos a la vez. Al
   acortar el marco la ventana no se recorta solo por abajo: se estrecha por los
   dos lados a la vez, porque el porcentaje reparte el sobrante. Con el 30% que
   servia para 16:9, a 21:9 la ventana pasaba de 50-950 a 114-800 sobre un
   original de 1066 y cortaba la cabeza por arriba. Comprobado en pantalla, no
   deducido. Con el 12% queda en 38-724: venda, brazo alzado, empunadura y brazo
   de la balanza dentro; se pierden los platos, que es lo prescindible. */

.articulo__portada img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
}

/* Numeracion automatica de los apartados. Va en ::before, asi que no entra en
   el textContent: al copiar el titular de un <h2> al indice, el numero no se
   arrastra. El indice pone el suyo con su propio contador.

   ⚠️ Por este counter-increment el <nav class="indice"> tiene que quedarse
   FUERA de .articulo__cuerpo: dentro, su <h2> se llevaria el numero 1 y correria
   todos los apartados. No da error, solo se ven mal los numeros. */

.articulo__cuerpo {
  counter-reset: seccion;
  /* Red para el cuerpo: una palabra o un enlace sin espacios mas largo que la
     columna se parte en vez de salirse. Solo actua cuando hace falta; el texto
     normal no se entera. */
  overflow-wrap: break-word;
}

/* El salto desde el indice tiene que dejar el epigrafe POR DEBAJO de lo que hay
   fijo arriba, que en un articulo son dos cosas apiladas: la banda de progreso
   (30px, fixed) y la cabecera pegajosa, que se apoya en ella.

   El alto de la cabecera NO es constante —cambia de una fila a dos— y por eso
   hay un escalon. Los valores estan MEDIDOS en el navegador, no calculados, y
   llevan ~16px de aire para que el titulo no quede lamiendo el filete.

   ⚠️ SUBIERON DE 118/154 A 126/162 AL PONER EL LOGO EN LA CABECERA. El logo
   mide 39px de alto y la caja de texto de la marca 31,2, asi que la cabecera
   crecio 7,8px: de 72,2 a 80 en una fila, y de 108,2 a 116 en dos. Los dos
   valores se movieron exactamente esos 7,8. Si se cambia el alto del logo, hay
   que volver a medirlos.

   Esto no reabre el problema de la vieja --alto-cabecera, que se retiro porque
   la portada la RESTABA y cualquier desvio descuadraba la franja en silencio.
   Aqui es una holgura, no un ajuste exacto: pasarse unos pixeles no se nota y
   quedarse corto se ve al instante, que es el modo de fallar que interesa. */

.articulo__cuerpo h2 {
  counter-increment: seccion;
  scroll-margin-top: 126px;
}

/* ⚠️ ESTE CORTE TIENE QUE SER EL MISMO QUE EL DE .cabecera__interior, hoy 740.

   Estuvo en 716 mientras la cabecera tambien rompia ahi. Al subir la cabecera a
   724 y luego a 740 —por «Acerca de» primero y por el logo despues— este se
   quedo atras, y entre 717 y 740 pasaba lo peor: la cabecera ya iba en DOS
   filas (146px de obstruccion) pero el salto seguia usando el valor de una
   sola (126). Medido a 730: el titulo quedaba TAPADO 20,1px.

   No da ningun error y solo se ve saltando desde el indice en ese tramo. */

@media (max-width: 740px) {
  .articulo__cuerpo h2,
  .sobre__bloque-autor {
    scroll-margin-top: 162px;
  }
}

.articulo__cuerpo h2::before {
  content: counter(seccion) ".";
  color: var(--acento);
  margin-right: 14px;
}

/* ⚠️ HAY DOS ESTILOS DE CITA Y LOS ELIGE EL GENERADOR, no el cliente. El
   criterio —mas de 40 palabras o cualquier salto de linea— esta razonado entero
   en `claseDeCita()`, en plantilla.mjs, con las medidas que lo motivaron.

     .cita--destacada   una frase que se MIRA: display grande, con comilla.
     .cita--extracto    un pasaje que se LEE: sentencias y acuerdos citados.

   Lo que sigue son los dos. NO se toca uno sin mirar el otro: se distinguen a
   proposito por tipografia, tamano, color y senal de apertura a la vez, porque
   conviven en el mismo articulo y tienen que leerse como cosas distintas. */

/* Cita destacada: sin filete lateral, con la comilla como elemento grafico. */

.articulo .cita--destacada {
  border-left: none;
  margin: 36px 0;
  padding: 0 0 0 54px;
  position: relative;
  font-family: var(--display);
  font-size: 1.6rem;
  font-style: normal;
  line-height: 1.35;
  color: var(--tinta);
}

.articulo .cita--destacada::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -0.12em;
  font-family: var(--display);
  font-size: 3.6rem;
  line-height: 1;
  color: var(--acento);
}

/* ⚠️ EN MOVIL LA DESTACADA BAJA DE 25,6 A 22,4 px Y LA COMILLA CON ELLA. A 375
   la columna son 327 px, y a 1,6rem una frase de reclamo cae en ~3 palabras por
   linea: deja de leerse como una frase y pasa a leerse como una lista vertical.
   1,4rem da ~4 y recupera el ritmo.

   El corte es el 600 que ya usa el cuerpo del articulo, no uno nuevo. */

@media (max-width: 600px) {
  .articulo .cita--destacada {
    padding-left: 44px;
    font-size: 1.4rem;
  }

  .articulo .cita--destacada::before {
    font-size: 3rem;
  }
}

/* ⚠️ EL EXTRACTO NO ESTRENA CASI NADA: es el `blockquote` base que esta hoja ya
   tenia —filete de 2px en acento, sangria, `--tinta-suave`— con tres cambios, y
   los tres estan medidos contra el problema que resuelve.

   1. REDONDA Y NO CURSIVA. El base viene en `italic`, que es la convencion para
      una cita CORTA. En un pasaje de 579 palabras la cursiva es un lastre: se
      lee peor y en papel peor todavia. La convencion academica para una cita en
      bloque larga es redonda, sangrada y a cuerpo igual o menor.

   2. CUERPO 1rem —16 px— contra los 18 del cuerpo del articulo. Es «algo menor»
      sin estrenar un escalon nuevo: 1rem es el tamano raiz del documento, del
      que ya cuelgan todos los demas valores en rem de este archivo.

   3. INTERLINEADO 1,7, el mismo del cuerpo. Es un texto para leer seguido, asi
      que necesita el mismo ritmo de lectura que un parrafo, no el 1,35 apretado
      de un reclamo.

   SIN COMILLA DE APERTURA, y es deliberado: el filete lateral ya dice que es
   una cita, y una comilla de 3,6rem sobre un pasaje de varias lineas compite
   con el texto en vez de introducirlo. La comilla es un recurso de reclamo.

   La NEGRITA del original se respeta sola: no se toca `font-weight`, asi que
   los <strong> del texto del cliente salen como vienen. */

.articulo .cita--extracto {
  margin: 28px 0;
  padding: 2px 0 2px 22px;
  border-left: 2px solid var(--acento);
  font-family: var(--texto);
  font-size: 1rem;
  font-style: normal;
  line-height: 1.7;
  color: var(--tinta-suave);
}

/* Caja de citas y referencias: mismo tratamiento de panel que .indice, y
   «mismo» aqui quiere decir identico —relleno, filete, radio y padding—. Son
   los dos unicos paneles de la columna del articulo y se leen uno detras de
   otro, asi que cualquier diferencia entre ellos se ve como un descuido y no
   como una distincion.

   El filete llego con el indice y se copio aqui por eso. No es decoracion:
   --papel-alt esta a ΔE 2,3 del blanco de la pagina, por debajo del umbral en
   el que dos superficies planas se distinguen, asi que sin contorno la caja se
   lee como si no lo tuviera. Esta razonado en CLAUDE.md.

   El padding subio de 24/28 a 26/30 en el mismo movimiento, que es lo que
   tenia el indice. Eran 2px de diferencia: invisibles por separado y una
   desalineacion de 3px del texto —con el filete— entre dos cajas iguales. */

.referencias {
  background: var(--papel-alt);
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: 26px 30px;
  margin: 40px 0;
  font-family: var(--ui);
  font-size: 14px;
}

.referencias ol {
  margin: 0;
  padding-left: 20px;
}

.referencias li {
  margin-bottom: 8px;
  /* Las referencias llevan URL enteras —BOE, DOI, prensa— que no tienen
     espacios por donde partir. Sin esto, en una columna de 327px la URL se
     sale de la caja por la derecha aunque la rejilla ya no la deje crecer. */
  overflow-wrap: anywhere;
}

.referencias li:last-child {
  margin-bottom: 0;
}

/* Las referencias generadas van en <ul> y no en <ol>, y NO es un descuido.

   El numero de una referencia es un DATO del texto —es el que aparece entre
   corchetes en la llamada— y no una posicion en la lista. Con un <ol> los dos
   numeros pueden separarse en silencio: basta una referencia sin numero, como
   la LOPJ del articulo de MASC, para que el <ol> siga contando y a partir de
   ahi ensene un numero que no es el que citan las llamadas.

   Asi que la numeracion se escribe, en .ref__numero, y la lista no cuenta. */

.referencias ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.ref__numero {
  color: var(--acento);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Los grupos —Normativa, Jurisprudencia, Doctrina— son opcionales: un articulo
   puede traer una lista suelta. Cuando los hay, el primero no lleva el aire de
   arriba porque ya lo pone el rotulo de la caja. */

/* ⚠️ Va prefijado con .referencias y NO a secas. Es un <h3>, y «.articulo h3»
   —que lo pone en Cormorant a 24px— pesa (0,1,1) frente a los (0,1,0) de la
   clase sola: gana por especificidad, no por orden.

   Se vio en el PDF antes que en pantalla: el rotulo salia en versales, porque
   el text-transform si se aplicaba, pero con el cuerpo y la familia de un
   epigrafe de seccion. Parecia un apartado nuevo dentro de la caja. */

.referencias .referencias__grupo {
  margin: 20px 0 10px;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.referencias .referencias__grupo:first-of-type {
  margin-top: 14px;
}

/* La llamada de referencia. Va en <sup> con su aria-label, y CADA NUMERO ES SU
   PROPIO ENLACE: [1, 6] son dos anclas distintas, no una. Los corchetes y la
   coma los escribe la plantilla fuera de los <a> para que no formen parte de
   la superficie pulsable ni del texto del enlace.

   El tamano va en `em` para que siga al del parrafo, y el line-height a 0 para
   que un volado no abra el interlineado de la linea en la que cae. */

.llamada {
  font-size: 0.72em;
  line-height: 0;
  color: var(--acento);
  white-space: nowrap;
}

.llamada a {
  color: inherit;
  text-decoration: none;
}

.llamada a:hover,
.llamada a:focus-visible {
  text-decoration: underline;
}

/* La diana de una llamada es diminuta —dos o tres pixeles de glifo— asi que el
   padding la ensancha sin mover el texto, que es para lo que esta el margen
   negativo. */

.articulo .llamada a {
  padding: 6px 3px;
  margin: -6px -3px;
}

/* El ancla de destino tiene que quedar por debajo de la cabecera fija, igual
   que los epigrafes. Aqui basta menos holgura porque una linea de lista es mas
   baja que un <h2>, pero se usa el mismo numero para no tener dos. */

.referencias li[id] {
  scroll-margin-top: 126px;
}

@media (max-width: 740px) {
  .referencias li[id] {
    scroll-margin-top: 162px;
  }
}

/* La referencia recien saltada se marca un momento. Sin esto, saltar a [6] en
   una lista de once deja al lector buscando cual era: el navegador coloca la
   linea arriba y nada la senala. */

.referencias li[id]:target {
  background: rgba(47, 110, 104, 0.09);
  box-shadow: 0 0 0 6px rgba(47, 110, 104, 0.09);
  border-radius: 2px;
}

/* La fuente de una cita destacada. Va alineada con el texto de la cita —los
   mismos 54px de sangria que deja la comilla— y no centrada ni a la derecha:
   se lee como continuacion de la cita, no como un pie. */

.articulo .cita__fuente {
  margin: -24px 0 36px;
  padding-left: 54px;
  font-family: var(--ui);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--tinta-suave);
}

/* ⚠️ LA FUENTE DE UN EXTRACTO SE ALINEA CON EL EXTRACTO, NO CON LA DESTACADA.
   Los 54px de arriba son los que deja la comilla de apertura, y un extracto no
   la tiene: su texto arranca a 22 + 2 del filete. Sin esto la fuente quedaba
   32px mas adentro que la cita que atribuye, que es el tipo de desajuste que se
   lee como un fallo sin que nadie sepa senalar cual.

   ⚠️ VA CON `.articulo` DELANTE, Y HACE FALTA. Sin el prefijo seria (0,2,0),
   empatado con `.articulo .cita__fuente`, y decidiria el orden del archivo. Con
   el son (0,3,0) y gana por especificidad. Es la trampa de siempre en este
   proyecto.

   Se engancha con el hermano adyacente y no con una clase propia porque la
   fuente SIEMPRE va pegada a su cita: asi no hay dos sitios que mantener
   sincronizados ni una clase que se pueda olvidar al escribir el JSON.

   El margen negativo baja de -24 a -20 porque el extracto cierra con 28 de
   margen y no con 36. */

.articulo .cita--extracto + .cita__fuente {
  margin: -20px 0 28px;
  padding-left: 24px;
}

/* Lista con marcadores escritos —«1.º», «2.º»—. Un <ol> nativo no sabe poner
   la «º», asi que cuando el texto los trae se apaga la numeracion automatica y
   se escriben en un <span>.

   El colgado se hace con sangria francesa y no con un flex: asi, si un item
   ocupa varias lineas, la segunda alinea con la primera palabra y no con el
   marcador. */

.articulo .lista--marcada {
  list-style: none;
  padding-left: 34px;
}

.articulo .lista--marcada li {
  text-indent: -34px;
}

.lista__marca {
  display: inline-block;
  width: 26px;
  margin-right: 8px;
  text-indent: 0;
  color: var(--acento);
  font-weight: 600;
}

/* ⚠️ CUANDO EL TEXTO TRAE SU PROPIA NUMERACION DE APARTADOS —«I.», «II.»— HAY
   QUE APAGAR LA DEL SITIO, O SALEN LAS DOS.

   El contador de .articulo__cuerpo h2 pinta «1.», «2.»… delante del epigrafe.
   Si el autor ya escribio «III. Subsanabilidad del requisito», sin esto se
   leeria «3. III. Subsanabilidad del requisito».

   No basta con quitar el ::before: hay que soltar tambien el counter-increment.
   Dejarlo puesto no se ve en este articulo, pero el contador es del documento y
   seguiria avanzando, asi que cualquier otro elemento que lo lea contaria unos
   apartados que ya no se numeran.

   Lo pone la plantilla sola, mirando si alguna seccion trae numero_original. */

.articulo__cuerpo--sin-contador h2 {
  counter-increment: none;
}

.articulo__cuerpo--sin-contador h2::before {
  content: none;
  margin-right: 0;
}

/* ------------------------------------------- Lateral del articulo ------- */

/* La columna va sobre --papel-alt para anclarla frente al cuerpo del artículo,
   que es blanco. El filete de --borde hace el mismo papel que en las tarjetas
   de portada: --papel-alt sobre blanco son 2,6 de dE2000 y no define un canto
   por sí solo.

   Y aquí hay que invertir una jerarquía. Dentro del lateral ya había tres cosas
   apoyadas en --papel-alt —la caja de suscripción, las píldoras de etiquetas y
   el marco del retrato—, que al teñir la columna del mismo token quedaban a dE
   0,0: invisibles. En vez de oscurecerlas, suben a blanco. Sobre la columna de
   mármol se leen como fichas levantadas, que es mejor lectura que la de antes:
   antes eran manchas sobre blanco, ahora son piezas sobre piedra. */

.articulo__lateral {
  font-family: var(--ui);
  background: var(--papel-alt);
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: 28px 24px;
}

.lateral__bloque + .lateral__bloque {
  border-top: 1px solid var(--borde);
  margin-top: 32px;
  padding-top: 28px;
}

.lateral__bloque .lista__titulo {
  margin-bottom: 16px;
}

/* Blanco, no --papel-alt: desde que la columna es de ese color, el marco se
   confundía con ella. Solo se ve si la foto falta o mientras carga, pero es
   justo cuando tiene que notarse que ahí va un retrato. */

.autor__retrato {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--papel);
  margin: 0 auto 18px;
}

/* ⚠️ EL `object-position` NO ES DECORATIVO: SIN EL, EL CIRCULO CORTA EL PELO.
   La foto es 3:4 y la caja es un cuadrado, asi que `cover` escala por el ancho
   y descarta una franja vertical. Medido sobre el archivo de 264x352 dentro del
   circulo de 132: la imagen se dibuja a 132x176 y sobran 44px de alto.

   Con el `50%` de serie la ventana empieza en y=22, y la coronilla esta en
   y=17,6 —se recortan 4,4px de pelo, que en un circulo se lee como una cabeza
   aplanada por arriba—. Con `10%` empieza en y=4,4: quedan 13px de aire sobre
   el pelo, la barbilla cae en y=100 y el centro de la cara al 41% del circulo,
   que es donde se espera en un retrato.

   ⚠️ APLICA TAMBIEN A `.sobre__retrato`, QUE COMPARTE ESTA REGLA, Y ALLI NO
   PINTA NADA: su caja es 300x400 y su archivo 600x800, o sea la misma
   proporcion, asi que no hay holgura que repartir y la Y da igual. Se deja en
   un solo sitio a proposito —el retrato del sitio es uno— pero quien cambie la
   proporcion de aquella caja tiene que volver a mirar este numero, porque
   entonces si empezara a recortar.

   El numero sale de la cara de ESTA foto. Si se sustituye, hay que medir donde
   caen la coronilla y la barbilla y rehacerlo: nada avisa de que corta. */

.autor__retrato img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 10%;
}

/* Retrato del autor en sobre/. Se apoya en .autor__retrato —circulo, recorte y
   fondo de respaldo— y solo cambia lo que aqui es distinto: en el lateral del
   articulo la foto va centrada sobre una columna de 300px, y aqui va en fila
   junto a tres parrafos, en una columna de lectura de 760.

   Se reutiliza la clase en vez de duplicar el circulo para que el retrato del
   sitio sea uno, no dos que se parecen: si cambia el recorte o el filete, se
   cambia en .autor__retrato y los dos siguen iguales. */

/* ------------------------------------------------- sobre/: la pagina ---- */

/* ⚠️ TODO LO DE ESTE BLOQUE VA PREFIJADO `.articulo.sobre` Y NO `.sobre`, Y NO
   ES POR GUSTO. Las dos clases viven en el MISMO elemento, asi que `.sobre h2`
   pesa (0,1,1) igual que `.articulo h2` y el empate lo rompe el orden del
   archivo. Con `.articulo.sobre h2` son (0,2,1) y gana por especificidad, que
   es lo unico que aguanta si alguien reordena el CSS.

   Es la cuarta vez que este patron muerde en el proyecto —antes fueron
   `.entrada__titulo`, `.autor__cv` y `.compartir__lista`—, y las tres anteriores
   fueron reglas MUERTAS que no daban ningun error: solo se veian mirando el
   estilo computado. */

/* ⚠️ EL ARRANQUE BAJA DE 104 A 48 px, QUE ES EL ESTANDAR DEL SITIO.

   Sumaban dos cosas que no se ven juntas al leer el CSS: el `padding-top: 56px`
   de `.articulo` y el `margin-top: 48px` que `.articulo h2` le da al PRIMER
   epigrafe de cada columna. Las otras dos paginas de seccion abren con 48:

     articulos/   `.lista`                      padding-top: 48
     contacto/    `.contacto .contenedor`       padding-top: 48
     sobre/       56 + 48                       = 104   <- el doble

   ⚠️ `.articulo` NO SE PUEDE TOCAR para arreglarlo: ese padding lo llevan
   tambien TODAS las paginas de articulo. De ahi el gancho `.sobre`.

   El margen del h2 se suelta en las dos columnas a la vez. Siguen alineadas
   entre si —antes lo estaban por conservar los dos el mismo margen, y ahora por
   no tener ninguno—, que era lo que pedia el comentario de `.sobre__columnas`. */

/* ---- privacidad/ ------------------------------------------------------- */

/* ⚠️ VA COMO `.articulo.privacidad`, con LAS DOS CLASES, y no `.privacidad` a
   secas. Están en el MISMO elemento, así que una clase sola pesaría (0,1,0) y
   `.articulo h2` pesa (0,1,1): ganaría el artículo y esto sería una regla
   muerta. Con las dos son (0,2,0).

   Es la QUINTA vez que este patrón aparece en el proyecto —antes fueron
   `.entrada__titulo`, `.autor__cv`, `.compartir__lista` y `.comentarios__nota`—
   y las cuatro anteriores acabaron en reglas que no se aplicaban sin dar
   ningún error. */

/* Mismo arranque que `articulos/`, `contacto/` y `sobre/`: 48 px bajo la
   mancheta. `.articulo` trae 56 de serie y el primer `h2` añadiría su margen
   encima, así que hay que soltar los dos. */

.articulo.privacidad {
  padding-top: 48px;
}

.articulo.privacidad > .contenedor > :first-child {
  margin-top: 0;
}

/* La fecha de cierre. Es un dato, no prosa: va en Inter pequeña y gris, como
   los metadatos del resto del sitio. */

.articulo.privacidad .privacidad__fecha {
  font-family: var(--ui);
  font-size: 13px;
  color: var(--tinta-suave);
}

/* ---- Tabla ------------------------------------------------------------- */

/* La usa hoy un solo sitio, la lista de proveedores de `privacidad/`, pero se
   escribe sin prefijo de página porque una tabla es un elemento de contenido y
   el día que un artículo traiga una, tiene que verse igual.

   ⚠️ EL ENVOLTORIO NO ES DECORATIVO. Una tabla no encoge por debajo del ancho
   de su contenido, así que en un móvil se saldría y arrastraría scroll
   horizontal a TODA la página —el mismo fallo que ya mordió una vez con el
   retrato de `sobre/`, y que allí no se vio porque se salía sobre blanco—.
   El envoltorio se lo come desplazándose él solo.

   Lleva `tabindex="0"` desde el HTML para que se pueda desplazar también con
   el teclado: una zona con scroll que solo responde al ratón deja fuera a
   quien navega tabulando. */

.tabla-envoltorio {
  overflow-x: auto;
  margin: 0 0 22px;
  -webkit-overflow-scrolling: touch;
}

.articulo .tabla {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 0.95rem;
}

.articulo .tabla th,
.articulo .tabla td {
  padding: 10px 14px 10px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--borde);
}

/* La cabecera en versales de Inter, como el resto de rótulos de consulta del
   sitio: es lo que se mira para orientarse, no lo que se lee seguido. */

.articulo .tabla th {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  border-bottom-color: var(--borde-marcado);
  white-space: nowrap;
}

.articulo .tabla tbody tr:last-child th,
.articulo .tabla tbody tr:last-child td {
  border-bottom: 0;
}

.articulo.sobre {
  padding-top: 48px;
}

.articulo.sobre .sobre__columnas h2 {
  margin-top: 0;
}

/* ⚠️ LOS EPIGRAFES BAJAN DE 32 A 24 px, Y LA ESCALA NO ERA PROPIA DE ESTA
   PAGINA: era exactamente la del articulo —Source Serif 32/38,4/600—. Lo que
   cambia es la COLUMNA sobre la que se apoyan.

   Un epigrafe se percibe en relacion con el ancho de su columna, no en
   absoluto:

     articulo          32 px sobre 720 px de columna   = 0,044
     sobre/, columnas  32 px sobre 548 px              = 0,058   <- un 33% mas

   Escalar el epigrafe a su columna da 32 x 548/720 = 24,4, y 24 px YA ES un
   escalon de la escala del sitio: es el cuerpo del `h3` del articulo. Asi que
   no se estrena ningun tamano, se usa el que ya habia un paso mas abajo.

   ⚠️ EL CUERPO SE QUEDA EN 18 px A PROPOSITO. Es el unico valor que tiene que
   ser identico en todo el sitio, y bajarlo aqui haria de `sobre/` la unica
   pagina con otro cuerpo de texto —que es peor que el problema que resuelve—.
   A 548 px y 18 px salen unos 61 caracteres por linea, que esta en el rango
   comodo. Si aun asi se quisiera mas pequeno, es una decision de TODO el sitio
   y se toma en la escala tipografica, no aqui.

   Los margenes acompanan al cuerpo nuevo: 48 -> 36 y 14 -> 12, que es la misma
   proporcion (x 24/32) redondeada a la retícula de 4. */

.articulo.sobre h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 36px 0 12px;
}

/* ⚠️ ERA UN FLEX Y AHORA ES UNA REJILLA, por una medida: con flex el texto se
   quedaba con todo lo que sobraba —992 px medidos en el contenedor de 1200— y
   ahi la linea es incomoda de leer. La primera columna se topa en los 720 del
   ancho de lectura del articulo, que es el mismo numero, y el retrato ocupa lo
   que queda.

   `align-items: start` para que el retrato no se estire a la altura de los tres
   parrafos.

   ⚠️ LA SEGUNDA COLUMNA ES `auto` Y NO `minmax(0, 1fr)`, Y ESO ARREGLA UN
   DESBORDAMIENTO QUE LLEVABA AHI DESDE QUE ESTO ES UNA REJILLA.

   Con `1fr` la segunda columna se queda con lo que SOBRA, y la primera, al
   poder crecer hasta 720, no dejaba sobrar nada. Medido a 768: las columnas
   calculadas eran `664px 0px`, o sea el retrato en una columna de CERO. Y
   `.sobre__retrato` tiene `width: 300px` fijo, asi que se salia 300 px por la
   derecha y arrastraba scroll horizontal a toda la pagina —1044 px de documento
   en una ventana de 768—.

   Pasaba entre el corte de apilado (600) y los ~1124 px que hacen falta para
   que quepan 720 + 56 + 300. Casi todas las tablets, por tanto.

   ⚠️ NO SE VEIA, y por eso duro tanto: el retrato se salia sobre el blanco de
   la pagina, donde un desbordamiento no deja ningun rastro visual. En cuanto
   «Sobre el autor» pasa a ser una caja con fondo, el mismo fallo se ve a la
   primera porque la foto escapa de un rectangulo tintado.

   Con `auto` la columna se dimensiona a su contenido —los 300 px del retrato— y
   la primera se queda con el resto hasta su tope de 720. A 768 salen 302 + 300
   y cabe; a 1440, 720 + 300 con 14 px de aire sobrante, que es exactamente lo
   que ya se veia antes en escritorio. */

/* ⚠️ «SOBRE EL AUTOR» VA EN CAJA, Y NO ESTRENA NI UN VALOR. Estaba suelto sobre
   el blanco y se leia descolgado del resto. Los valores son LOS MISMOS que las
   otras cajas del sitio, para que se lea como una mas y no como una variante:

     .indice, .referencias     --papel-alt + 1px --borde + radio 4 + 26/30
     .articulo__lateral        --papel-alt + 1px --borde + radio 4 + 28/24
     .sobre__bloque-autor      --papel-alt + 1px --borde + radio 4 + 26/30

   Se copia el relleno de `.indice` y `.referencias` y no el del lateral porque
   esas dos son las cajas que viven EN LA COLUMNA DE CONTENIDO, que es lo que
   esto es; el lateral es una barra estrecha y por eso aprieta mas los lados.

   ⚠️ Con el fondo, el h2 pierde su margen de arriba: dentro de una caja con
   relleno los margenes NO colapsan, asi que los 36 px se sumarian a los 26 del
   padding y dejarian el titulo flotando a 62 del canto. El aire de arriba lo
   pone ya el relleno.

   Y el hueco contra las columnas de arriba, que antes ponia ese mismo margen
   del h2, pasa a la propia caja. */

/* Destino de «Ver perfil →» (sobre/#autor): el salto deja la caja por debajo
   de la cabecera fija, con la misma holgura que los epigrafes del articulo
   (126 en una fila, 162 cuando la cabecera va en dos, por debajo de 740). */

.sobre__bloque-autor {
  scroll-margin-top: 126px;
  margin-top: 48px;
  padding: 26px 30px;
  background: var(--papel-alt);
  border: 1px solid var(--borde);
  border-radius: 4px;
}

.articulo.sobre .sobre__bloque-autor h2 {
  margin-top: 0;
}

.sobre__autor {
  display: grid;
  grid-template-columns: minmax(0, 720px) auto;
  align-items: start;
  gap: 56px;
  margin: 0 0 8px;
}

/* ⚠️ RECTANGULO VERTICAL Y NO CIRCULO, como en el PDF del cliente. Estuvo en
   circulo de 240 con el argumento de que «el PDF marca estructura y contenido,
   no estilos»; el encargo posterior fue reproducirlo tambien en composicion.

   `.autor__retrato` sigue puesto por la MECANICA —overflow, fondo de respaldo y
   el `object-fit: cover` del <img>— y aqui se cambia solo lo que aqui es
   distinto: la forma, el tamaño y el radio. El lateral del articulo no se
   entera: conserva su circulo de 132.

   ✅ AQUI SE AVISABA DE QUE LA FUENTE SE QUEDABA JUSTA, Y YA NO. El original
   era CUADRADO de 400px, asi que a 3:4 dejaba 300x400 utiles para una caja de
   300x400: exactamente 1x, sin margen para pantalla densa. La foto nueva es 3:4
   de origen y se sirve a 600x800, o sea 2x justos. El aviso decae.

   Y al coincidir la proporcion, `cover` no recorta nada: se ve la foto entera.

   El `margin: 0 auto 18px` de la clase base centraba el circulo en el lateral;
   aqui se anula para que la foto alinee con el principio de su columna. */

.sobre__retrato {
  width: 300px;
  height: 400px;
  border-radius: 0;
  margin: 6px 0 0;
}

/* Los parrafos del bloque no llevan el margen de arriba del primero, que ya lo
   pone el flex, y el ultimo cierra sin margen para que el filete de abajo no
   quede a distinta altura que el retrato. */

.sobre__autor-texto > p:first-child {
  margin-top: 0;
}

/* ⚠️ POR DEBAJO DE 600 SE APILAN, Y AHORA EL TEXTO QUEDA ARRIBA. Antes el
   retrato iba primero en el marcado y al apilarse caia encima; hoy el orden del
   DOM es texto → foto, porque el PDF del cliente pone la foto a la derecha y el
   orden de lectura tiene que coincidir con el visual. No se usa `order`: es la
   misma regla que se aplico al reordenar la cabecera del articulo.

   El motivo de apilar sigue siendo el de siempre: en una columna de ~330px, 132
   de foto mas 28 de hueco dejan el parrafo en 170, que parte las palabras
   largas de este texto —«contencioso-administrativa»— en cada linea. */

/* ⚠️ APILA CON `grid-template-columns`, NO CON `flex-direction`. Esta regla
   decia `flex-direction: column` de cuando .sobre__autor era un flex, y al
   pasar a rejilla se quedo SIN EFECTO: en una grid esa propiedad no pinta nada,
   asi que el retrato seguia al lado del texto en una columna de 327. No daba
   ningun error; solo se veia apretado. */

/* ⚠️ EL CORTE SUBE DE 600 A 900, Y ES CONSECUENCIA DE METER EL BLOQUE EN CAJA.

   Con los 300 px del retrato fijos y el hueco de 56, al texto le queda lo que
   sobre del interior de la caja. Medido:

     ventana   columna de texto   caracteres por linea
       768          302 px               35          <- ilegible
       900          434 px               50          <- aceptable
      1440          720 px               ~80

   Treinta y cinco caracteres por linea es menos de lo que pide cualquier
   recomendacion tipografica, y es exactamente el defecto que este mismo bloque
   ya razonaba para el corte anterior —«parte las palabras largas en cada
   linea»—, solo que a otra escala. El argumento no cambia, cambia el numero.

   Antes no se notaba porque el texto se repartia el ancho entero del
   contenedor: no habia caja que lo limitara. Al entrar el relleno de 30 px por
   lado, la columna se estrecha y el problema aflora.

   900 no es un numero nuevo: es donde el articulo baja su lateral. */

/* ⚠️ Y EL RETRATO TIENE QUE PODER ENCOGER, QUE ANTES NO HACIA FALTA. Sus 300 px
   de ancho son fijos, y eso cabia mientras el bloque no tenia relleno: a 375 el
   contenedor son 327 y la foto 300, con 27 de sobra. Con los 30 px de relleno
   por lado el interior baja a 265 y la foto SE SALIA DE LA CAJA por la derecha
   —medido: 35 px fuera del area util, 4 por fuera del canto tintado—.

   No daba scroll horizontal, asi que no se habria detectado probando el ancho
   del documento: solo se ve mirando la caja.

   `min(300px, 100%)` con `aspect-ratio` en vez de `max-width` a secas, para no
   perder la propiedad que esta documentada arriba: la caja y el archivo son los
   dos 3:4, asi que `cover` NO RECORTA NADA. Con `max-width` y la altura fija en
   400 la caja pasaria a 265x400 —proporcion 0,66— y empezaria a recortar por
   los lados sin que nada avisara.

   A 768 no cambia nada: min(300, 658) sigue siendo 300. */

@media (max-width: 900px) {
  .sobre__autor {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .sobre__retrato {
    margin: 0;
    width: min(300px, 100%);
    height: auto;
    aspect-ratio: 3 / 4;
  }
}

/* ------------------------------------------- Acerca de: dos columnas ----- */

/* La primera fila de sobre/ son «Enfoque» y «Contenido» a la par, como en el
   PDF del cliente. Se va a `.contenedor--amplio` porque en el ancho de lectura
   —820— dos columnas quedarian a 380 y el texto se parte mal.

   `gap: 56px` es el mismo hueco que separa la columna del articulo de su
   lateral, asi que las dos retículas de dos columnas del sitio respiran igual.

   minmax(0, 1fr) y no 1fr por el motivo de siempre: con `1fr` una columna que no
   puede encoger deja de ceder y aplasta a la vecina en vez de desbordar ella.
   Esta tiene palabras largas —«contencioso-administrativa»— que es justo lo que
   lo dispara. */

.sobre__columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
}

/* Los h2 de las dos columnas y el de «Sobre el autor» arrancan a la misma
   altura: `.articulo h2` trae `margin-top: 48px`, y el primero de cada columna
   lo conserva, asi que la fila entra alineada sin tocar nada. */

/* Viñeta de rombo. Decorativa, asi que va en ::before y NO en el marcado: un
   pseudo-elemento no entra en el arbol de accesibilidad, de modo que un lector
   de pantalla lee «Fundamentos, mediante articulos…» sin anunciar un glifo que
   no aporta nada. Es el mismo criterio que los iconos de la ficha.

   Se prefiere ::before a ::marker con `content`, que es lo que pedia el
   enunciado: `content` en ::marker no esta soportado en todas las versiones de
   Safari todavia, y ahi la viñeta se caeria del todo.

   La sangria francesa es la tecnica que ya usa `.lista--marcada`: con
   `padding-left` en la lista y `text-indent` negativo en el item, la segunda
   linea alinea con la primera PALABRA y no con el rombo. */

.articulo .sobre__lineas {
  list-style: none;
  padding-left: 28px;
}

.articulo .sobre__lineas li {
  text-indent: -28px;
  margin-bottom: 16px;
}

.sobre__lineas li::before {
  content: "❖";
  display: inline-block;
  width: 20px;
  margin-right: 8px;
  text-indent: 0;
  color: var(--acento);
}

/* El bloque del autor va a todo el ancho, debajo de las dos columnas. No lleva
   margen propio: el `margin-top: 48px` de su <h2> ya pone la separacion, el
   mismo hueco que separa los dos h2 de arriba de lo que tengan encima. */

/* ⚠️ AQUI VIVIA `.sobre__cierre` Y SE RETIRA CON SU UNICO PORTADOR. Topaba en
   720 el cierre de la pagina —aviso legal y los dos botones de salida—, que se
   quito al reproducir el PDF del cliente tal cual. El <hr> que lo precedia se
   fue con el.

   Si alguna vez vuelve un cierre a esta pagina, el argumento sigue valiendo: el
   resto va a 1200 porque son dos columnas y una fila con foto, pero un texto de
   13px a 1152 da una linea incomoda de leer. */

/* ⚠️ SE APILAN EN 748, UN CORTE QUE YA EXISTE —el de las tarjetas— y no en el
   600 que usa `.sobre__autor` aqui mismo. Medido: a 748 el contenedor son 700 y
   cada columna se queda en 322, que todavia lee bien; a 600 bajarian a 248 y
   «contencioso-administrativa» ya no cabe en una linea.

   Que los dos cortes de esta pagina no coincidan es a proposito: uno parte una
   reticula de texto y el otro despega una foto de su parrafo, y no hay motivo
   para que cedan a la vez. */

@media (max-width: 748px) {
  .sobre__columnas {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

.autor__nombre {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 10px;
}

.autor__bio {
  font-family: var(--texto);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--tinta-suave);
  margin: 0 0 14px;
}

.autor__enlace {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ⚠️ AQUI VIVIA `.articulo .autor__cv`, LA COLOCACION DEL BOTON «Descargar CV»
   DEL LATERAL, Y SE RETIRA CON SU UNICO PORTADOR. El cliente quiere el CV solo
   en sobre/, asi que `plantilla.mjs` ya no pinta ese <p> y la regla se queda
   sin nada a lo que aplicarse.

   ⚠️ NO SE TOCA EL BOTON DE `sobre/`. Alli vive en un <p> SIN CLASE dentro de
   `.sobre__autor-texto`, asi que nunca dependio de esta regla —esta comprobado
   en su momento— y sigue exactamente igual.

   Lo que esta regla dejaba escrito y conviene no perder, porque describe una
   trampa del proyecto y no solo este boton: iba prefijada con `.articulo`
   porque es un <p> dentro de <article class="articulo">, y `.articulo p` pesa
   (0,1,1) frente a los (0,1,0) de una clase sola. Estuvo escrita como
   `.autor__cv { ... }` a secas y era una REGLA MUERTA: el margen computado
   seguia siendo el de `.articulo p`. No daba ningun error. Es el mismo patron
   que `.articulo h3` contra `.entrada__titulo` y que `.articulo ul` contra
   `.compartir__lista`, y sigue vigente para cualquier clase nueva sobre un <p>,
   <ul> o <h3> del articulo. */

/* Aqui vivia .indice--lateral, el indice de la columna de apoyo, con sus siete
   reglas. Se retira entero: el indice se ha mudado a la columna del articulo y
   no queda ningun uso. Las filas con filete que traia este modificador son las
   que hoy lleva .indice de serie.

   Si alguien lo echa de menos, el motivo de la mudanza esta escrito arriba,
   junto a .indice: el lateral no se oculta en estrecho, BAJA, y ahi el indice
   llegaba despues del texto que venia a resumir. */

/* Etiquetas: la pildora ya la da .etiqueta; aqui solo se baja el tono y se
   quitan las versales, porque son terminos, no rotulos. */

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Fondo blanco y filete, en vez del --papel-alt que hereda de .etiqueta: sobre
   la columna de mármol aquel era el mismo color y las píldoras se perdían. El
   filete hace falta porque el blanco sobre --papel-alt tampoco es un canto: son
   los mismos 2,6 de dE del caso inverso. */

/* Ahora es un <a> al listado con la etiqueta ya marcada. Estuvo en <span> con el
   argumento de que no existen paginas de etiqueta — cierto, y siguen sin
   existir: el destino es el filtro de articulos/, no una pagina nueva.

   Son TRES usos de la misma familia y conviene no confundirlos:

     .etiqueta--plana   categoria     <a>       APLICA un filtro, texto plano
     .etiqueta--tag     etiqueta      <a>       APLICA un filtro, pildora
     .etiqueta--filtro  seleccionada  <button>  QUITA un filtro, pildora con aspa

   Las dos pildoras nunca conviven —una vive en el articulo y otra en el
   listado— y el aspa distingue la que quita. Por eso .etiqueta--filtro no
   reutiliza esta: misma familia visual, naturaleza opuesta. */

.etiqueta--tag {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  color: var(--tinta-suave);
  background: var(--papel);
  border: 1px solid var(--borde);
  transition: color 160ms ease, border-color 160ms ease;
}

/* SIN SUBRAYADO, al contrario que la categoria de la ficha, y la diferencia no
   es un capricho: aquella es texto plano —sin borde ni relleno— y ahi el
   subrayado es lo que dice que es un enlace. Esto es una caja, y un subrayado
   dentro de una caja con borde se lee como un error de maquetacion, no como una
   afordancia. Mismo criterio que se aplico a .volver.

   Lo que hace de senal es el tono: borde y texto pasan al acento. No RELLENA,
   que es lo que hace .etiqueta--filtro al pasar el raton — asi las dos pildoras
   se distinguen tambien por como responden, no solo por el aspa. */

.etiqueta--tag:hover {
  color: var(--acento);
  border-color: var(--acento);
  text-decoration: none;
}

/* Suscripcion. Es solo maqueta: no hay backend, asi que los controles van
   deshabilitados y no hay <form> que pueda enviarse por accidente. */

.suscripcion {
  background: var(--papel-alt);
  border-radius: 4px;
  padding: 28px 24px;
  text-align: center;
}

/* Dentro del lateral pierde fondo y relleno propios: la columna entera ya es
   de ese color, así que la caja sería una caja dentro de otra idéntica. Se
   queda separada por el filete de .lateral__bloque, como los demás bloques, y
   alineada con ellos en vez de metida hacia dentro.

   No toca a .suscripcion--banda de la portada, que sí va sobre blanco y
   necesita su propio fondo.

   Se anulan los tres lados sueltos y no «padding: 0», porque el de arriba lo
   pone .lateral__bloque + .lateral__bloque para separar del bloque anterior y
   esta regla, que va después y tiene la misma especificidad, se lo llevaría
   por delante. */

.articulo__lateral .suscripcion {
  background: none;
  border-radius: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

.suscripcion__icono {
  color: var(--acento);
}

.suscripcion__reclamo {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 12px 0 18px;
}

.suscripcion input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 10px;
  font-family: var(--ui);
  font-size: 0.9rem;
  border: 1px solid var(--borde);
  border-radius: 4px;
  background: var(--papel);
  color: var(--tinta);
}

.suscripcion .boton {
  width: 100%;
}

/* Texto corto bajo el reclamo. Va en --tinta-suave, que sobre --papel-alt da
   5.63:1. No se aclara mas: cualquier gris por encima de este cae por debajo
   del 4.5:1 sobre ese fondo. */

.suscripcion__apoyo {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}

.suscripcion__nota {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--tinta-suave);
}

/* ---- Variante en banda, para la portada -------------------------------- */

/* Mismo componente, en horizontal: icono | texto | formulario. Caja contenida
   en la reticula de 1200px, no a sangre.

   Todo lo que no se redeclara aqui viene de .suscripcion: fondo, radio, el
   icono en --acento, el reclamo en Cormorant y los estados disabled. */

.suscripcion--banda {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 32px 40px;
  margin-top: 56px;
  text-align: left;
}

.suscripcion--banda .suscripcion__icono {
  flex: none;
}

.suscripcion--banda .suscripcion__reclamo {
  margin: 0 0 6px;
  font-size: 1.4rem;
}

.suscripcion--banda .suscripcion__accion {
  display: grid;
  grid-template-columns: minmax(200px, 260px) auto;
  gap: 10px;
}

/* ⚠️ LOS DOS PÁRRAFOS CRUZAN LA REJILLA, y el aviso hay que decirlo aparte.
   `.suscripcion__accion` es una rejilla de dos columnas —campo y botón— y
   cualquier hijo nuevo cae por defecto en la primera, que mide 260 px.

   Al aviso le pasó: medido, se quedaba en 260 contra los 681 de la nota y el
   mensaje de error se partía en tres líneas debajo del campo, como si fuera un
   pie de ese campo y no una respuesta del formulario. No daba ningún error y
   solo se ve con el aviso lleno, que es un estado que no se mira al maquetar.

   Si algún día se añade otro elemento a este formulario, hay que decidir su
   columna aquí o le pasará lo mismo. */

.suscripcion--banda .suscripcion__nota,
.suscripcion--banda .suscripcion__aviso {
  grid-column: 1 / -1;
}

.suscripcion--banda .suscripcion__nota {
  margin: 2px 0 0;
}

/* ALTURA COMPARTIDA. Apilados en el lateral nunca se noto, pero medidos son
   43.5px el campo y 45px el boton: 1.5px de diferencia que en horizontal, uno
   al lado del otro, canta. Se fija el alto en los dos y se quita el padding
   vertical, que era de donde salia el descuadre. */

.suscripcion--banda input,
.suscripcion--banda .boton {
  height: 46px;
  margin: 0;
}

.suscripcion--banda input {
  padding: 0 14px;
}

/* inline-flex y no el inline-block heredado: con alto fijo, un inline-block no
   centra su texto verticalmente y la etiqueta quedaria pegada arriba. */

.suscripcion--banda .boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 0 26px;
}

.boton:disabled,
.suscripcion input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.boton--principal:disabled:hover {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

/* ---- El honeypot de Listmonk ------------------------------------------- */

/* ⚠️ NO ES `display: none` NI `type="hidden"`, Y ESA ES TODA LA GRACIA. Un
   campo que el navegador no pinta tampoco lo rellena un bot, así que la trampa
   no atraparía a nadie: tiene que estar en el flujo y ser invisible solo para
   quien mira la pantalla.

   De ahí la combinación: fuera del viewport con `position: absolute`, sin
   altura que empuje nada, y `tabindex="-1"` más `aria-hidden` en el marcado
   para que no lo encuentren ni el tabulador ni un lector de pantalla. Lo que
   sí lo encuentra es un robot que lee el HTML y rellena todos los `<input>`.

   Se llama `nonce` porque es el nombre que espera Listmonk; no se le cambia.
   Va con `!important` porque `.suscripcion input` declara `width: 100%` y un
   relleno de 12/14 que, sumados, devolverían el campo a la vista. */

.trampa {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden;
}

/* ---- El aviso de la suscripción ---------------------------------------- */

/* Vive vacío y sin ocupar sitio hasta que hay algo que decir: `:empty` evita
   que el margen abra un hueco en un formulario que todavía no ha hecho nada.

   ⚠️ EL ERROR NO SE DISTINGUE SOLO POR EL COLOR. Lleva además un filete
   lateral de 2 px, que es la misma señal que usa `.cita--extracto`. Un cambio
   de color a secas incumpliría WCAG 1.4.1 y, sobre todo, no lo vería quien
   tiene dificultad para distinguir rojos.

   El tono es el `--acento-oscuro` del sistema y no un rojo nuevo: este aviso
   no es una alarma del navegador, es una respuesta del formulario, y el sitio
   no tiene paleta de error. Si algún día hace falta un rojo, se añade al
   sistema de color, no aquí. */

.suscripcion__aviso {
  margin: 12px 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--tinta);
}

.suscripcion__aviso:empty {
  display: none;
}

.suscripcion__aviso--error {
  padding-left: 10px;
  border-left: 2px solid var(--acento-oscuro);
  color: var(--tinta-suave);
}

/* El enlace de la nota hereda el acento como el resto de enlaces del sitio.
   Se subraya porque va DENTRO de un párrafo, que es justo el supuesto en el
   que `.volver` y las píldoras pueden prescindir del subrayado y este no:
   hay texto en línea alrededor con el que se podría confundir. */

.suscripcion__nota a {
  color: var(--acento);
}

/* ------------------------------------------- Continua leyendo ----------- */

/* ------------------------------------- Anterior / siguiente ------------- */

/* Navegacion entre articulos contiguos. Va despues del aviso legal y antes de
   «Continua leyendo», que es donde la pagina pasa de «este articulo» a «otros
   articulos».

   Lo escribe el BUILD, no el navegador, al reves que «Continua leyendo»: el
   orden por fecha se conoce al generar, asi que no hay motivo para pedirselo a
   un fetch y funciona con JavaScript desactivado. */

.paso {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--borde);
}

/* ⚠️ `margin-left: auto` Y NO SOLO `justify-content`, porque el caso que
   importa es cuando hay UN SOLO enlace. Con los dos, space-between ya los
   separa; con solo el siguiente —el articulo mas antiguo no tiene «anterior»—
   space-between lo dejaria pegado a la izquierda, donde se lee como si fuera el
   «anterior». El margen automatico lo manda a su lado pase lo que pase. */

.paso__enlace {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* El minimo de area de pulsacion. Con dos lineas se supera de sobra, pero
     escrito aguanta si algun dia el rotulo o el titulo cambian de cuerpo. */
  min-height: 44px;
  max-width: 48%;
  text-decoration: none;
}

.paso__enlace--siguiente {
  margin-left: auto;
  text-align: right;
}

/* El rotulo es el mismo lenguaje que .volver y .lista__enlace: Inter, versales
   y acento. El titulo de destino va en la familia de lectura y en --tinta, para
   que se distinga de la etiqueta y se lea como lo que es, un titular. */

.paso__rotulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acento);
}

.paso__enlace--siguiente .paso__rotulo {
  justify-content: flex-end;
}

.paso__titulo {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tinta);
}

/* La flecha en su propio elemento para tener algo que animar, igual que en
   .volver y en .lista__enlace. Se desplaza hacia FUERA en cada sentido. */

.paso__flecha {
  display: inline-block;
  transition: transform 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.paso__enlace:hover .paso__rotulo {
  color: var(--acento-oscuro);
}

.paso__enlace:hover .paso__titulo {
  color: var(--acento-oscuro);
}

.paso__enlace--anterior:hover .paso__flecha {
  transform: translateX(-4px);
}

.paso__enlace--siguiente:hover .paso__flecha {
  transform: translateX(4px);
}

/* Mismo anillo que .volver y .lista__enlace: --acento, 3px de separacion y
   radio 2. Son los tres enlaces de texto con flecha del sitio. */

.paso__enlace:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .paso__flecha {
    transition: none;
  }

  .paso__enlace--anterior:hover .paso__flecha,
  .paso__enlace--siguiente:hover .paso__flecha {
    transform: none;
  }
}

/* ⚠️ APILADOS POR DEBAJO DE 600, y el corte es uno que ya existe. En una
   columna el `max-width: 48%` dejaria cada enlace a media columna con la mitad
   derecha vacia, y el `text-align: right` del siguiente lo leeria como si
   apuntara a otro sitio. Los dos se sueltan a la vez. */

@media (max-width: 600px) {
  .paso {
    flex-direction: column;
    gap: 28px;
  }

  .paso__enlace {
    max-width: none;
  }

  .paso__enlace--siguiente {
    margin-left: 0;
    text-align: left;
  }

  .paso__enlace--siguiente .paso__rotulo {
    justify-content: flex-start;
  }
}

/* ------------------------------------------------- comentarios --------- */

/* Artalk 2.10.0, autoalojado. La seccion abre con el mismo filete y el mismo
   aire que «Continua leyendo», que es su vecina de abajo: las dos cierran el
   articulo y tienen que leerse como piezas hermanas, no como una pieza del
   sitio y un widget pegado. */

/* ⚠️ 40 ARRIBA Y 40 ABAJO, Y LOS DOS ESTAN MEDIDOS CONTRA EL RITMO DE LA ZONA.

   La seccion vive entre «Compartir» y el aviso legal, en una zona cuyos huecos
   son 40 / 40 / 28:

     referencias → «Volver»             40
     «Volver» → boton PDF               40
     boton PDF → filete de «Compartir»  28   <- el par apretado, deliberado
     «Compartir» → filete de aqui       40
     aqui → aviso legal                 40

   ⚠️ ARRIBA ESTUVO EN 56 Y DESENTONABA. Era el valor de `.continua`, que cierra
   la pagina; aqui caia justo despues del hueco mas apretado de la zona —los
   28— y hacia el salto mas grande de toda la columna. Con 40 la zona entera se
   lee a un solo ritmo, con el 28 como unica excepcion a proposito.

   El `margin-bottom` de `.compartir` son 32 y COLAPSA con este: manda el mayor,
   asi que los 40 salen de aqui.

   ⚠️ Y EL `margin-bottom` NO SE PUEDE SOLTAR A 0. El aviso legal es un <p> y le
   cae `.articulo p`, que trae `margin-top: 0`: sin estos 40, el aviso quedaria
   PEGADO al final de los comentarios. Antes del traslado esa separacion la
   ponia el `margin-bottom: 32` de `.compartir`, que ahora ya no es su vecino.

   Hacia abajo sigue habiendo progresion: 48 del aviso a `.paso` y 56 de `.paso`
   a `.continua`, o sea que cuanto mas lejos del texto, mas aire. */

.comentarios {
  margin: 40px 0;
  padding-top: 40px;
  border-top: 1px solid var(--borde);
}

.comentarios .lista__titulo {
  margin-bottom: 20px;
}

/* ⚠️ LA CAJA RESERVA SITIO ANTES DE QUE ARTALK MONTE. Nace vacia, asi que sin
   esto mide 0 y al llegar el widget la pagina pega un salto de ~300px justo
   donde el lector esta leyendo. Los 220 son algo menos que el alto del editor,
   que es lo primero que aparece: se reserva de menos a proposito, porque pasarse
   deja un hueco visible mientras carga.

   No es solo estetico: tambien es lo que le da AREA al elemento. El observador
   de main.js no se cuelga de aqui —observa la seccion, que siempre tiene
   contenido— pero una caja de alto cero es justo lo que hizo que no disparara
   la primera vez. */

.comentarios__caja {
  min-height: 220px;
}

/* ⚠️ SE REMAPEAN LAS VARIABLES DE ARTALK, NO SE PELEA CON SUS SELECTORES. Su
   hoja declara dieciocho `--at-color-*` sobre `.artalk` y luego TODO su CSS las
   usa. Redefinirlas aqui tiñe el widget entero con los tokens del sitio sin
   tocar ni una de sus reglas, asi que una actualizacion de Artalk no se lleva
   por delante el tema.

   Lo contrario —ir pisando `.atk-*` una por una— es lo que convierte esto en
   una lista interminable que se rompe en cada version.

   `--at-color-main` es el color de los botones y los enlaces: va al acento del
   sitio y NO al azul de Artalk, que es lo que mas delataba el widget. */

.comentarios .artalk {
  --at-color-font: var(--tinta);
  --at-color-deep: var(--tinta);
  --at-color-sub: var(--tinta-suave);
  --at-color-grey: var(--tinta-suave);
  --at-color-meta: var(--tinta-suave);
  --at-color-border: var(--borde);
  --at-color-light: var(--acento);
  --at-color-bg: var(--papel);
  --at-color-bg-transl: rgba(255, 255, 255, 0.94);
  --at-color-bg-grey: var(--papel-alt);
  --at-color-bg-grey-transl: rgba(246, 245, 247, 0.9);
  --at-color-bg-light: rgba(47, 110, 104, 0.08);
  --at-color-main: var(--acento);
  --at-color-gradient: linear-gradient(180deg, transparent, var(--papel));

  font-family: var(--texto);
  font-size: 1rem;
}

/* Los nombres de quien comenta van en la familia de titulares, como los
   titulares de tarjeta, y la fecha en la de interfaz con el cuerpo y el
   tracking de los metadatos del sitio.

   ⚠️ ESTA REGLA ESTABA MEDIO MUERTA Y POR ESO LOS DOS NOMBRES DE UNA RESPUESTA
   SALIAN DE TAMAÑOS DISTINTOS —«Arnau ▸ Arnau» con el segundo mas grande—.

   Artalk tiene DOS elementos de nombre en la cabecera de un comentario, y los
   viste de forma desigual:

     .atk-item.atk-nick          el autor del comentario   -> le pone 14px
     .atk-reply-at > .atk-nick   a quien responde          -> NO le pone tamaño

   Y su selector del primero, `.atk-comment > .atk-main > .atk-header
   .atk-item.atk-nick`, pesa (0,4,0): mas que los (0,3,0) de
   `.comentarios .artalk .atk-nick`. Asi que de los dos nombres, el mio ganaba
   SOLO en el segundo. El resultado era 14px contra 16,8px en la misma linea,
   sin que nada avisara.

   Se sube a (0,6,0) nombrando los dos casos a la vez. El `a` del final hace
   falta porque cuando el comentarista dejo web, el nombre va dentro de un
   enlace que Artalk viste por separado. */

.comentarios .artalk .atk-comment .atk-header .atk-item.atk-nick,
.comentarios .artalk .atk-comment .atk-header .atk-item.atk-nick a,
.comentarios .artalk .atk-comment .atk-header .atk-reply-at .atk-nick {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}

.comentarios .artalk .atk-date {
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: 0.06em;
}

/* ⚠️ EL CAMPO DE WEB SE OCULTA DESDE AQUI PORQUE ARTALK NO TIENE OPCION PARA
   QUITARLO. Su editor pinta siempre tres campos:

     <input name="name"  required>
     <input name="email" required>
     <input name="link">          <- este

   Los dos primeros ya nacen obligatorios, asi que el requisito de «nombre y
   correo obligatorios» no hay que forzarlo. El tercero es opcional y no se
   pide: una web personal no aporta nada a un comentario y es un dato mas que
   guardar.

   Se oculta con `display: none` y no con `visibility` ni moviendolo fuera de
   pantalla: asi tampoco recibe el foco al tabular. */

.comentarios .artalk .atk-header .atk-link {
  display: none;
}

/* ⚠️ TODO LO QUE SIGUE GANA POR ESPECIFICIDAD, NO POR ORDEN, Y ES OBLIGATORIO
   QUE SEA ASI. La hoja de Artalk la inyecta main.js en el <head> EN TIEMPO DE
   EJECUCION, o sea DESPUES de esta: en un empate gana siempre ella.

   Sus selectores son del tipo `.artalk > .atk-list > .atk-list-header`, o sea
   (0,3,0). El prefijo `.comentarios` añade una clase y deja los de aqui en
   (0,4,0). Quien quite ese prefijo para «simplificar» desactiva la regla sin
   que nada avise. */

/* ⚠️ FUERA LA CAJA DEL EDITOR. Artalk envuelve los campos en un recuadro con
   filete y radio 6, y dentro los campos van SIN borde —`2px solid transparent`—
   asi que el nombre, el correo y el comentario se leian como texto suelto
   dentro de una caja.

   Se invierte: el recuadro se va y el borde pasa a cada campo, que es como
   funciona el formulario de contacto. No hay caja dentro de caja y los tres
   campos se distinguen solos. */

.comentarios .artalk .atk-main-editor {
  margin-bottom: 0;
  border: none;
  border-radius: 0;
  background: none;
  overflow: visible;
}

/* Nombre y correo en pareja, apilados cuando no caben. Es el mismo
   `auto-fit` + `minmax(220px, 1fr)` que usa `.campos-par` en contacto/: hace el
   trabajo de una media query, asi que no hay un numero que mantener
   sincronizado con ningun corte.

   El campo de web esta en `display: none` mas arriba, asi que no cuenta como
   celda y la fila queda en dos. */

.comentarios .artalk .atk-main-editor > .atk-header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  padding: 0;
  margin-bottom: 16px;
}

/* Los mismos valores que `.campo input` de contacto/, uno por uno: relleno
   12/14, Inter a 0,95rem, filete de 1px en --borde y RADIO 0 —que es la
   decision documentada para los controles de formulario del sitio, aunque los
   botones si lleven 4—. */

.comentarios .artalk .atk-main-editor > .atk-header input,
.comentarios .artalk .atk-main-editor > .atk-textarea-wrap > .atk-textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--ui);
  font-size: 0.95rem;
  border: 1px solid var(--borde);
  border-radius: 0;
  background: var(--papel);
  color: var(--tinta);
  transition: border-color 160ms ease;
}

/* Artalk separa los campos con `margin-right: 2px` entre hermanos. Con la
   rejilla el hueco lo pone el `gap`, y ese margen descuadraba la segunda
   columna. */

.comentarios .artalk .atk-main-editor > .atk-header input:not(:last-child) {
  margin-right: 0;
}

.comentarios .artalk .atk-main-editor > .atk-textarea-wrap > .atk-textarea {
  min-height: 140px;
  resize: vertical;
}

/* El anillo de foco, igual que en contacto/: 2px de acento con 1 de separacion.
   Artalk trae el suyo en azul. */

.comentarios .artalk input:focus,
.comentarios .artalk textarea:focus,
.comentarios .artalk input:focus-visible,
.comentarios .artalk textarea:focus-visible,
.comentarios .artalk button:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

/* La fila del boton. Artalk la trae en `space-between`, asi que con el grupo de
   la izquierda vacio —no hay emoticonos, ni vista previa, ni subir imagen— el
   boton ya queda a la derecha solo. Aqui solo se le da aire por arriba. */

.comentarios .artalk .atk-main-editor > .atk-bottom {
  padding: 16px 0 0;
}

/* El boton con el estilo de `.boton.boton--principal`: Inter 14/500, relleno
   13/26, radio 4 y relleno de acento. Hay que soltar el `height: 30px` y el
   `min-width` de Artalk o el relleno no cabe. */

.comentarios .artalk .atk-main-editor > .atk-bottom .atk-send-btn {
  height: auto;
  min-width: 0;
  padding: 13px 26px;
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid var(--acento);
  border-radius: 4px;
  background: var(--acento);
  color: #fff;
  transition: all 0.15s ease;
}

.comentarios .artalk .atk-main-editor > .atk-bottom .atk-send-btn:hover {
  background: var(--acento-oscuro);
  border-color: var(--acento-oscuro);
}

/* ------------------------------------------------- la lista ------------ */

/* ⚠️ SIN COMENTARIOS SE DECIAN DOS VECES LAS MISMAS: la cabecera ponia «0
   comentarios» a la izquierda y debajo salia «Todavia no hay comentarios»
   centrado y con otra tipografia.

   Se esconde la CABECERA y se deja el mensaje, que es el que habla como una
   persona. `:has()` es lo que permite distinguir el caso vacio sin JavaScript:
   `.atk-list-no-comment` solo existe cuando la lista esta vacia.

   Es el mismo recurso que ya usan `body:has(.progreso)` y la ficha del
   articulo, asi que no se estrena nada.

   ⚠️ LA CLASE ES `.atk-list-no-comment` Y AQUI DECIA `.atk-no-comment`, ASI QUE
   LA REGLA NO CASABA CON NADA Y EL RECUENTO «0 comentarios» SEGUIA SALIENDO.

   El nombre equivocado salio de leer un `grep` RECORTADO del bundle: la captura
   empezaba a mitad de palabra —«t-no-comment"></div>»— y se leyo como el nombre
   entero cuando en realidad era la cola de «atk-lis|t-no-comment».

   Y la comprobacion de entonces no lo cazo porque se hizo inyectando un
   elemento con ESE MISMO nombre inventado: la prueba confirmaba la suposicion
   en vez de contrastarla. El arbol real hay que mirarlo en el navegador, que es
   de donde sale este:

     .atk-list
       .atk-list-header          <- el recuento, lo que se esconde
       .atk-list-body
         .atk-list-comments-wrap
           .atk-list-no-comment  <- el mensaje
       .atk-list-footer

   ⚠️ DENTRO DE `:has()` VA UN DESCENDIENTE Y NO UN HIJO DIRECTO: el mensaje
   cuelga de `.atk-list-body > .atk-list-comments-wrap`, dos niveles por debajo
   de `.atk-list`. */

.comentarios .artalk > .atk-list:has(.atk-list-no-comment) > .atk-list-header {
  display: none;
}

/* El mensaje de lista vacia. Artalk lo trae como una caja flex de 150px de
   alto, centrada en los dos ejes y a 19px; aqui va alineado a la izquierda con
   el titulo de la seccion y con la tipografia del cuerpo.

   ⚠️ NO BASTA CON `text-align: left`. Artalk lo centra con DOS mecanismos a la
   vez —`text-align: center` y `justify-content: center` sobre un flex— y el
   segundo manda sobre el primero: cambiando solo el `text-align`, el texto
   seguiria en el centro.

   Se resuelve pasando a `display: block`, que deja el `justify-content` sin
   efecto en vez de tener que contrarrestarlo: es una linea de texto, no una
   fila que colocar. Y con ello el `height: 150px` pasa a `auto`. */

.comentarios .artalk .atk-list-no-comment {
  display: block;
  height: auto;
  padding: 8px 0;
  text-align: left;
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--tinta-suave);
}

/* ⚠️ Y EL CUERPO DE LA LISTA RESERVA 150px QUE YA NO HACEN FALTA. Artalk le pone
   `min-height: 150px` para que la caja no se encoja mientras carga; con el
   mensaje ya en una linea, eso dejaba un hueco vacio debajo de el.

   Quien ya reserva sitio es `.comentarios__caja`, con sus 220px, asi que este
   es redundante. */

.comentarios .artalk > .atk-list > .atk-list-body {
  min-height: 0;
}

/* Con comentarios, el recuento alinea con el resto de la seccion: Artalk le
   mete 17px de relleno lateral que lo descuadraban respecto al titulo y al
   formulario. */

.comentarios .artalk > .atk-list > .atk-list-header {
  padding: 0;
  margin-bottom: 8px;
}

.comentarios .artalk > .atk-list > .atk-list-header .atk-comment-count {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* Los comentarios tampoco llevan el relleno lateral de Artalk, por lo mismo. */

.comentarios .artalk .atk-comment {
  padding-left: 0;
  padding-right: 0;
}

/* ⚠️ FUERA EL ENLACE «MENSAJES», QUE ABRE EL PANEL LATERAL DE ARTALK.

   Aparece a la derecha del recuento en cuanto el lector se identifica —basta
   con haber comentado una vez— y abre una capa con «Messages», «Mentions»,
   «Mine» y «Pending» EN INGLES: esas cadenas no estan en el objeto de
   traduccion de la interfaz, viven en el panel, que es otra aplicacion.

   NO HAY OPCION DE CONFIGURACION. Se comprobo en el bundle: el enlace no
   depende de ninguna opcion, sino de si hay usuario identificado —

     Text = t.is_admin ? T("ctrlCenter") : T("msgCenter")
     … else n.classList.add("atk-hide")

   — y `showSidebar()` se invoca desde UN solo sitio, el `onclick` de este
   elemento. Verificado con un grep: al ocultarlo no queda ningun otro acceso.

   ⚠️ ESTO NO LE QUITA NADA AL AUTOR. Responder con la etiqueta «Autor» es cosa
   del EDITOR —escribe su nombre y su correo, Artalk le pide la contraseña— y no
   pasa por el panel. Y moderar lo hace en comentarios.elderechoescrito.es/admin,
   que es una URL aparte y la que ya documenta PARA-EL-CLIENTE.md. Lo unico que
   pierde es un atajo que ademas estaba en ingles.

   Se oculta SOLO este <span> y no todo `.atk-right-action`, que es su padre:
   ahi dentro vive tambien `admin-close-comment` —cerrar los comentarios de la
   pagina—, que es una accion de moderacion legitima, esta traducida y no abre
   ningun panel. */

.comentarios .artalk .atk-list-header [data-action="open-sidebar"] {
  display: none;
}

/* ⚠️ «Responder @Nombre» SALIA CORTADO POR UN `max-width: 8em`, que a 14px son
   112px: cualquier nombre de mas de ocho caracteres perdia el final.

   Se suelta el tope y se deja que lo limite el sitio que haya. El recorte con
   puntos suspensivos se CONSERVA —`text-overflow`, `overflow` y `white-space`
   siguen siendo de Artalk— pero pasa a actuar solo cuando de verdad no cabe,
   que es lo que se pedia.

   ⚠️ NO BASTA CON SOLTAR EL `max-width`, Y HAY QUE TOCAR LA CADENA ENTERA. Con
   solo quitar el tope, un nombre muy largo no se recorta: DESBORDA LA FILA. Un
   item de flex no baja de su tamaño de contenido salvo que se le diga, y aqui
   hay tres anidados —`.atk-bottom-left`, `.atk-state-wrap`, `.atk-state-btn`—
   que hay que dejar encoger antes de que el recorte pueda actuar.

   Medido con un nombre de 925px a 1440: sin la cadena desbordaba la fila; con
   ella se recorta a 671 y el aspa sigue en su sitio. Un nombre normal —«Arnau
   Montero Miranda», 258px— no se recorta nada.

   ⚠️ POR DEBAJO DE 768 px ESTA ETIQUETA NO EXISTE: Artalk la oculta entera en
   una media query propia y deja solo el aspa. No es cosa de estas reglas, y no
   se repone: en una columna de 327px el nombre no cabria de todas formas. */

.comentarios .artalk .atk-main-editor > .atk-bottom > .atk-bottom-left {
  min-width: 0;
}

.comentarios .artalk .atk-main-editor .atk-state-wrap,
.comentarios .artalk .atk-main-editor .atk-state-btn {
  min-width: 0;
  max-width: 100%;
}

.comentarios .artalk .atk-main-editor > .atk-bottom .atk-state-btn .atk-text-wrap {
  max-width: 100%;
}

/* ⚠️ «POWERED BY ARTALK»: SE QUITA CON CSS PORQUE NO HAY OPCION PARA ELLO, y se
   comprobo antes de recurrir a esto. En el bundle de la v2.10.0 las unicas
   apariciones de «copyright» son el nombre de la clase y la plantilla del DOM;
   no hay ninguna opcion de configuracion que lo gobierne. El texto lo escribe
   el propio Artalk al emitir su evento `mounted`:

     e.on("mounted", () => { …querySelector(".atk-copyright").innerHTML = … })

   Quitarlo desde JS seria una carrera contra ese manejador —si el nuestro corre
   antes, Artalk lo vuelve a escribir—, asi que el CSS es ademas la via FIABLE,
   no solo la unica.

   Se oculta el PIE ENTERO y no solo `.atk-copyright`: el pie trae su propio
   relleno y dejaria un hueco al final de la lista.

   La licencia MIT de Artalk permite quitar la atribucion de la interfaz. El
   aviso de copyright del codigo sigue intacto en los archivos que se sirven
   desde el servidor de comentarios. */

.comentarios .artalk > .atk-list > .atk-list-footer {
  display: none;
}

/* La nota de privacidad. Nace detras de la caja —para que se vea sin
   JavaScript— y el JS la recoloca bajo el editor si Artalk ha montado. Los dos
   sitios necesitan su aire, de ahi las dos reglas.

   ⚠️ LAS DOS VAN PREFIJADAS CON `.articulo` Y SIN ESO SUS MÁRGENES NO EXISTEN.
   La nota es un <p> dentro de <article class="articulo">, así que le cae
   `.articulo p { margin: 0 0 22px }`, que pesa (0,1,1) frente a los (0,1,0) de
   estas clases y GANA POR ESPECIFICIDAD, no por orden.

   ⚠️ ESTUVIERON ESCRITAS SIN EL PREFIJO Y ERAN DOS REGLAS MUERTAS. Lo que se
   veía: el margen computado era el `0 0 22px` de `.articulo p`, o sea que la
   nota quedaba PEGADA al botón «Publicar» —hueco medido: 0— y se leía como su
   pie de foto. El resto de la regla —cuerpo, interlineado y color— sí se
   aplicaba, porque `.articulo p` no los declara, así que la nota se veía
   correcta salvo por el hueco: solo se encuentra mirando el estilo computado.

   ⚠️ Y EL DIAGNÓSTICO FÁCIL ERA OTRO. Aquí había escrito un `margin-top: 12px`
   que no hacía nada, así que al mirar el archivo el problema parecía ser «12 es
   poco» y la solución, subirlo. Subirlo no arregla nada: la regla sigue sin
   aplicarse. Si alguna vez vuelve a verse pegada, lo primero es mirar el
   computado, no el declarado.

   Es la CUARTA vez que muerde este patrón —antes fueron `.autor__cv`, la vieja
   `.descarga` y `.compartir__lista`—. Cualquier clase nueva sobre un <p>, <ul>
   o <h3> dentro del artículo necesita el prefijo. */

.articulo .comentarios__nota {
  margin: 18px 0 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--tinta-suave);
}

/* ⚠️ DECLARABA 12 ARRIBA Y AHORA 28, pero el hueco real no pasó de 12 a 28:
   pasó de CERO a 28. Los 12 nunca llegaron a aplicarse, por lo que explica el
   bloque de arriba. Quien compare los dos números y no vea una diferencia de
   16 px, que mire el computado.

   28 no es un número nuevo: es el `padding-top` de `.compartir`, el relleno de
   `.indice` y `.referencias` y el hueco que el propio widget deja entre su
   rótulo y las píldoras. En este sitio 12 es aire DENTRO de un componente y 28
   es lo que separa dos cosas distintas, que es justo lo que hace falta aquí: la
   nota no es una condición del botón, es un aviso sobre qué se hace con el
   correo y vale para el formulario entero. */

.articulo .comentarios__nota--bajo-editor {
  margin: 28px 0;
}

.comentarios__nota a {
  color: var(--acento);
}

.continua {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--borde);
}

/* ⚠️ EL TITULAR DE ESTAS TARJETAS SE ESTABA PINTANDO COMO UN EPIGRAFE DEL
   CUERPO, Y NO SE VEIA VENIR.

   adaptarTarjeta() baja el titular de <h2> a <h3> por jerarquia de
   encabezados —aqui cuelga del <h2> «Continua leyendo»—. El efecto lateral es
   que pasa a casar con `.articulo h3`, que pesa (0,1,1) frente a los (0,1,0)
   de `.entrada__titulo`: GANA POR ESPECIFICIDAD, no por orden, asi que ponerlo
   despues no arreglaba nada.

   Lo que se veia, medido: Source Serif en vez de Cormorant, 24px en vez de 28
   y, sobre todo, un `margin-top: 32px` que no pinta ningun titular de tarjeta
   del sitio. Ese margen era el 90% del hueco de 37px que habia entre la
   categoria y el titular.

   Se devuelve el componente a su propio estilo con (0,2,0), que gana sin
   depender del orden del archivo. */

.continua .entrada__titulo {
  font-family: var(--display);
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 8px;
}

/* El aire de dentro de la tarjeta, recortado por encargo al entrar la
   entradilla: con cinco elementos en una columna de 346px, los huecos de la
   portada dejaban la tarjeta demasiado suelta.

   Va TODO prefijado con `.continua`. Las tarjetas de la portada y las del
   listado comparten estas mismas clases —`.tarjeta__imagen`,
   `.entrada__titulo`, `.entrada__meta`— y sin el prefijo el recorte se colaria
   en las dos. Verificado que no se mueven.

     imagen -> categoria     18 -> 12
     categoria -> titular     4 ->  4   (ya era el minimo; lo que sobraba eran
                                         los 32 del h3 ajeno, arriba)
     titular -> entradilla   10 ->  8
     entradilla -> metadatos 16 -> 12

   Los cuatro valores siguen en la escala de 4 del proyecto. */

.continua .tarjeta__imagen {
  margin-bottom: 12px;
}

.continua .tarjeta .entrada__meta {
  padding-top: 12px;
}

/* DOS columnas y no tres. Aqui la rejilla no vive en la reticula de 1200 sino
   dentro de .articulo__cuerpo, que son 720 px, asi que a tres las tarjetas
   salen a 221,3 px y a dos a 346.

   Se probaron las tres antes de decidir, y el motivo que las descarto NO es el
   que parecia. Se predijo que romperian por min-content y no rompen: no
   desborda nada, la palabra mas larga mide 122,4 px y cabe de sobra en 221,3.

   Lo que las descarta es la IMAGEN. Medida en las dos variantes:

     3 columnas -> 221x148 px de hueco  (32.656 px2)  titular a 3-4 lineas
     2 columnas -> 346x231 px           (79.810 px2)  titular a 2 lineas

   Menos de la mitad de superficie. A 221x148 la balanza de la foto deja de
   distinguirse, y en un sistema donde la imagen acompana al texto, acompanar
   asi es casi no estar. De paso, los titulares a 3-4 lineas dejan las fechas
   descuadradas entre tarjetas, porque van ancladas abajo.

   Aqui vivia .tarjetas--tres, para cuando este bloque se rellenaba a mano. Se
   borro igualmente: ademas de no convenir, declaraba repeat(3, 1fr) sin el
   minmax(0, ...) que protege de que una columna deje de ceder y aplaste a las
   vecinas. */

.tarjetas--par {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* -------------------------------------------------------------- Pie ----- */

.pie {
  background: var(--pie);
  color: rgba(255, 255, 255, 0.65);
  padding: 40px 0 44px;
  font-family: var(--ui);
  font-size: 13px;
  text-align: center;
}

.pie p {
  margin: 6px 0;
}

.pie__nav {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.pie__nav a,
.pie a {
  color: rgba(255, 255, 255, 0.8);
}

.pie__nav a:hover,
.pie a:hover {
  color: #fff;
  text-decoration: none;
}

/* ---- El crédito de autoría -------------------------------------------- */

/* «Desarrollado por DuoWave», lo último del pie y lo más callado de la página.

   Baja de los 13 px del pie a 12 y del 0,65 de blanco al 0,45, así que queda
   por debajo del aviso legal que tiene encima: es un crédito, no una pieza de
   navegación, y no debe competir con nada.

   ⚠️ EL ENLACE TIENE QUE SER NORMAL, y aquí se juntan tres decisiones que son
   de posicionamiento y no de diseño:

     · SIN `rel="nofollow"`. Es un crédito honesto de quien ha hecho el sitio,
       no un enlace pagado ni un intercambio.
     · SIN `target="_blank"`. No hay motivo para sacar al lector de la página
       en una ventana nueva, y además obligaría a `rel="noopener"`.
     · EL TEXTO ES LA MARCA, «DuoWave», y nunca palabras clave. Un ancla del
       tipo «diseño web en Madrid» en el pie de todas las páginas es exactamente
       el patrón que los buscadores penalizan, y de paso empeora la página.

   ⚠️ Y HAY QUE DEJAR SOLO «DuoWave» DENTRO DEL <a>, no la frase entera: si se
   enlaza «Desarrollado por DuoWave» completo, el texto del ancla pasa a ser esa
   frase.

   ⚠️ EL 0,55 ES UN SUELO DE CONTRASTE, NO UN VALOR ELEGIDO A OJO. Estuvo en
   0,45, que es lo que pedía el encargo —«que no destaque»— y **no llega a AA**:
   medido sobre el `--pie` #242424 da **4,32:1**, por debajo del 4,5 que exige
   un texto normal de 12 px. Con 0,55 sube a **5,65:1**.

   Lo importante es que el objetivo se cumple igual: el aviso legal que tiene
   encima va al 0,65 —7,32:1— así que el crédito **sigue siendo lo más apagado
   del pie**, solo que ya legible. Si alguien quiere bajarlo más, que mida
   antes: por debajo de 0,5 se sale de AA.

   | Opacidad | Contraste |
   |---|---|
   | 0,45 | 4,32 ✗ |
   | 0,50 | 4,99 |
   | **0,55** | **5,65** |
   | 0,65 (el aviso legal) | 7,32 | */

.pie__credito {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

/* Prefijada para ganar al `.pie a`, que es (0,1,1) igual que esta —(0,2,0) con
   las dos clases— y le pondría el 0,8 general. */

.pie .pie__credito a {
  color: rgba(255, 255, 255, 0.7);
}

.pie .pie__credito a:hover {
  color: #fff;
}

/* No hay regla @media (prefers-reduced-motion) para el video, y es a proposito:
   el poster vive en el atributo poster del propio <video>, asi que un
   display:none lo ocultaria tambien y la portada se quedaria en blanco. Justo
   el respaldo que se quiere mostrar. CSS no puede pausar un video, de modo que
   la unica barrera util es la del JS, que no llega a asignar el src. */

/* --------------------------------------------------------- Responsive --- */

/* El paso de tres a dos columnas. Estuvo en 1008 cuando la rejilla era de
   cuatro, y ese número ya no vale: lo fijaba el min-content de la tarjeta de
   espera, y con columnas más anchas ese suelo deja de ser lo que aprieta.

   Con tres columnas el suelo cae a 761 px de ventana —218,9 de min-content por
   tres, más dos huecos de 28, más el padding—, o sea trece píxeles por encima
   del corte de una sola columna que ya hay en 748. Deja de mandar. Quien manda
   ahora es la tipografía.

   Medido en pasos de 5 px: el titular del artículo aguanta en 3 líneas hasta
   1085 de ventana, con la columna en 327, y salta a 4 en 1080, con 325,3. El
   corte se pone en 1084 para quedarse con el último ancho que rinde como el
   escritorio.

   Bajar a dos no es una degradación aquí, es lo contrario: con dos tarjetas y
   dos columnas no sobra ninguna celda, así que la fila se llena entera en vez
   de arrastrar una columna vacía cada vez más estrecha. */

@media (max-width: 1084px) {
  .tarjetas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* El destacado se apila en el MISMO corte que las tarjetas, y el numero no es
     prestado: la columna de texto necesita 448px para que los metadatos quepan
     en una linea, lo que pide 1082,2px de ventana. El 1084 que ya existia cae
     1,8px por encima, asi que sirve tal cual y no hay que sumar un corte mas.

     Que las dos cosas se apilen a la vez es ademas lo coherente: la pagina
     entera pasa a modo estrecho en un solo punto en vez de degradarse por
     partes. */

  .inicio .destacado__pieza {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* LA IMAGEN SUBE, y es la unica vez que este rediseno usa `order`.

     En dos columnas el orden visual lo da el MARCADO —texto primero—, para que
     coincida con el orden de lectura. Apilado, la maqueta pide la imagen
     arriba, y ahi invertir el marcado habria estropeado el caso de escritorio.

     No se pierde nada por hacerlo con CSS: la imagen va aria-hidden y
     tabindex="-1", asi que para el teclado y para un lector de pantalla este
     bloque es idéntico en los dos tramos. El unico orden que cambia es el que
     se ve. */

  .inicio .destacado__imagen {
    order: -1;

    /* A ancho completo y 3:2, la foto se iria a 690px de alto en una tablet: un
       tercio de pantalla para una imagen de apoyo. El tope la deja en 373.

       Se prefiere limitar el ANCHO y no recortar con un ratio mas panoramico
       porque el encargo era explicito en no cortar la escultura. Asi la foto
       sigue viendose entera, solo mas pequena. */
    max-width: 560px;
  }
}

@media (max-width: 900px) {

  /* Aqui se apilaba la mancheta, que era de dos columnas, y volvia a ponerse el
     tope de medida a la entradilla. Las dos reglas se fueron con la entradilla:
     un titulo centrado no tiene nada que apilar ni medida que limitar.

     Sin imagen detras, la banda no necesita todo el relleno que le da presencia:
     aqui es un titulo sobre blanco y basta con separarlo. */

  .mancheta {
    padding: 44px 0 32px;
  }

  /* La banda cae a la disposicion vertical del lateral, que ya esta probada,
     en vez de inventar un tercer diseno intermedio.

     Los 900px estan medidos: el reclamo aguanta en una linea hasta 1000px y
     pasa a dos por debajo, lo que aun se lee; a 780 ya son tres y a 700 son
     seis. A 900 la columna de texto conserva 276px, que es el ultimo ancho
     donde dos lineas siguen leyendose como un titulo y no como un parrafo. */

  .suscripcion--banda {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 14px;
    padding: 28px 24px;
    text-align: center;
  }

  .suscripcion--banda .suscripcion__accion {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 380px;
  }

  .suscripcion--banda .boton {
    width: 100%;
  }

  /* El texto deja de caber en media columna: pasa a ancho completo sobre el
     fondo, y el velo deja de ser degradado lateral para ser un lavado parejo.
     El corte es tipografico; el del video son 700px y es otra decision. */

  /* La altura la sigue poniendo .portada--video: tambien aqui la portada llena
     la pantalla menos la cabecera. Solo cambia el respiro vertical. */

  .portada--video {
    padding: 64px 0 56px;
  }

  .portada__interior {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .portada__texto {
    grid-column: 1;
  }

  /* Aqui el velo no puede ser del 45%: el texto pasa a ancho completo y cruza
     por encima de la estatua, cuyo bronce baja a L=0.00. Sobre negro puro el
     antetitulo necesita 0.70 para llegar a AA, asi que se deja en 0.90. */

  .portada__velo {
    background: rgba(255, 255, 255, 0.9);
  }

  /* El lateral pasa debajo del articulo, no a un lado.

     minmax(0, 1fr) y NO 1fr, y es lo que evitaba que el movil se viera bien.
     Con 1fr la pista no baja de su min-content, y el min-content lo marca la
     palabra mas larga de la columna: una URL de las referencias
     (https://www.boe.es/buscar/act.php?id=...). Con ella la columna media
     mas que la ventana —394px en el articulo del terreno, 704 en el de la
     vivienda, con 375 de ventana— y la pagina ENTERA se iba con scroll
     horizontal: foto, titular y fila de acciones cortados por la derecha.
     El de MASC no lo sufria porque no trae ninguna URL. El desborde se
     veia como "no respeta los margenes": el izquierdo estaba y el derecho
     se salia de la pantalla. */
  .articulo__disposicion {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .articulo__principal,
  .articulo__lateral {
    max-width: none;
  }
}

/* El corte estaba en 760 y sube a 932, y el numero esta MEDIDO, no elegido.

   La pareja nombre/correo se apila sola cuando su columna baja de 460px —dos
   pistas de 220 mas 20 de hueco—. Con la rejilla en 1.25fr / 1fr y 56 de hueco,
   eso pasa a partir de 932px de ventana.

   Por debajo de ahi las dos columnas dejaban de pagar: a 820 el formulario
   quedaba en 398 y el aside en 318, mientras que apilado el formulario tiene
   sus 600 y el aside el ancho entero. O sea que el diseno de dos columnas era
   PEOR que el de una en todo ese tramo, y encima con la pareja ya rota.

   Al apilar, el orden de lectura lo da el marcado: formulario primero, aside
   despues. Es el correcto —se viene a escribir, y las notas de al lado son
   apoyo— y no hace falta ningun order de CSS para conseguirlo. */

@media (max-width: 932px) {
  .contacto .contenedor {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ------------------- Puntos de corte propios de la cabecera -------------
   Van aparte del de 600px que usan el cuerpo del texto: la cabecera se rompe
   por sus propias medidas y no tiene por que compartirlas. Los umbrales estan
   MEDIDOS barriendo anchos, no calculados a ojo.

   Bajaron cuando la navegacion paso de 14px a 12px en versales: la fila entera
   se estrecho 32,2 px, asi que aguanta 32 px mas de ventana antes de romperse.
   Y VOLVIERON A SUBIR al cambiar «Sobre mi» por «Acerca de», que son 11,6 px
   mas: de 934 a 944 y de 716 a 724.

   959px: hasta aqui cabe la fila con el campo del buscador desplegado. Por
   debajo, abrir el buscador partiria la marca en dos lineas, asi que el campo
   se oculta. Paso por 966 y por 934. No se estrecha el campo en vez de
   ocultarlo porque a 800px cabrian 52px de campo, que no sirven para nada.

   OJO: este numero esta repetido en js/main.js, en la funcion estrecha() de
   buscadorDeCabecera, que decide si la lupa despliega el campo o vuelve a ser
   un enlace al listado. Si se cambia aqui hay que cambiarlo alli.

   740px: lo mismo con el buscador ya cerrado. Ahi ya no hay nada que ocultar y
   la unica salida es apilar. Paso por 748 y por 716.

   El metodo se valido antes de fiarse de el: con la navegacion forzada a 14px,
   el mismo barrido devuelve 746 y 964, o sea los 748 y 966 documentados menos
   los 2 px de margen que uso la medicion original.

   ⚠️ LA LECCION, que ya ha costado dos veces: CAMBIAR EL TEXTO DE UN ENLACE DEL
   MENU MUEVE ESTOS DOS CORTES. No da ningun error — la marca se parte en dos
   lineas y la cabecera crece 31 px sin que nada avise. Hay que rebarrerlos. */

/* ⚠️ ESTE 959 SUBIO DE 944 AL CAMBIAR «Sobre mi» POR «Acerca de», y el numero
   esta MEDIDO barriendo anchos, no calculado.

   «Acerca de» mide 75,6 px contra los 64 de «Sobre mi»: 11,6 px mas de
   navegacion. Con el campo desplegado eso dejaba de caber donde antes cabia, y
   el fallo no era sutil — la marca «El Derecho Escrito» se partia en DOS lineas
   y la cabecera pasaba de 72,2 a 103,4 px. Medido: rompia a 944 y aguantaba a
   945, asi que el corte va en 944.

   ⚠️ ESTE NUMERO ESTA DUPLICADO EN js/main.js, en la funcion estrecha() de
   buscadorDeCabecera, que decide si la lupa despliega el campo o vuelve a ser
   un enlace al listado. LOS DOS TIENEN QUE IR A LA PAR: si el CSS oculta el
   campo y el JS cree que aun cabe, la lupa intenta desplegar algo invisible.

   Y si alguien vuelve a cambiar el texto de un enlace del menu, hay que
   rebarrer los dos cortes de la cabecera: este y el de 724. */

@media (max-width: 959px) {
  .busca__campo {
    display: none;
  }
}

/* Las tarjetas se quedan en 748 y DEJAN DE COMPARTIR corte con la cabecera.

   Compartirlo fue una comodidad mientras los dos numeros coincidian, y estaba
   anotado que al mover uno habria que comprobar el otro. Comprobado: si las
   tarjetas bajaran a 716, entre 717 y 720 el interior de la caja se queda en
   263 px y el titular salta a 4 lineas. En una sola columna a 380 el interior
   es 274 y el titular ocupa 3, que es el rendimiento aceptado, asi que seguir
   a la cabecera empeoraria justo lo que el corte protege.

   El motivo de fondo es que nunca dependieron de lo mismo: la cabecera se
   rompe por el ancho de su fila —y esa fila acaba de encoger— mientras que las
   tarjetas se rompen por el padding de 28, que se come 58 px de cada columna y
   no ha cambiado.

   Con una sola columna no quedan celdas vacias: las dos tarjetas se apilan y la
   rejilla se acaba donde se acaba la segunda. */

/* En una sola columna se deshace el igualado de filas, y no es una excepción
   caprichosa: igualar alturas sirve para que no se descuadre lo que está UNO AL
   LADO DEL OTRO, y aquí no hay nada al lado. Cada tarjeta es su propia fila.

   Manteniéndolo, la de «Próximamente» pasaría de sus 248,8 px naturales a los
   681,6 que mide un artículo a este ancho: casi setecientos píxeles de caja casi
   vacía en un móvil, para arreglar una desalineación que nadie puede ver. */

@media (max-width: 748px) {
  .tarjetas {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
}

/* ⚠️ ESTE 740 SUBIO DE 724 POR EL MISMO MOTIVO que el de 944: «Acerca de» es
   11,6 px mas ancho que «Sobre mi».

   Con el campo del buscador ya oculto, la marca y la navegacion dejaban de
   caber en una fila antes de que el corte llegara. Medido barriendo: a 717
   —justo por encima del corte viejo— la marca se partia en dos lineas y la
   cabecera se iba a 103,4 px cuando deberia estar en 72,2. Rompe a 724 y
   aguanta a 725, asi que el corte va en 724.

   Es el fallo que mejor ilustra por que estos numeros se barren y no se
   calculan: el texto del menu creció un caracter y se llevo por delante dos
   puntos de corte a la vez, sin dar ningun error. */

@media (max-width: 740px) {
  .cabecera__interior {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 600px) {
  body {
    font-size: 17px;
  }

  .portada {
    padding: 48px 0 44px;
  }

  /* El subtitulo del hero baja de 18,4px a 16 SOLO en estrecho, y es lo unico
     que recorta el alto del hero ahi.

     Con los textos definitivos el hero deja de caber en sus 520 por debajo de
     unos 550px de ventana: a 500 se iba a 584,1 y a 375 a 746,8, o sea el 92%
     de la pantalla de un movil. No se corta nada —la franja es min-height, y
     esta puesta asi justamente para que crezca— pero llenar la pantalla entera
     de portada deja el resto de la pagina fuera de la vista.

     Medido a 375x812, bajando solo el subtitulo:

       18,4px → 9 lineas · hero 746,8 · 92% de pantalla
       17px   → 9 lineas · hero 726,6 · 89,5%
       16px   → 8 lineas · hero 686,6 · 84,6%   ← este
       15,2px → 8 lineas · hero 676,4 · 83,3%

     16 es donde se gana una linea entera. Bajar a 15,2 solo arranca 10px mas y
     ya queda por debajo del texto mas pequeno del sitio, asi que no compensa.

     El resto del alto lo ponen el titular (4 lineas a 375) y la linea de areas
     (2 lineas), y esos no se tocan: son los textos del cliente al cuerpo que
     les toca.

     El corte va en 600, que ya existia, y no en 550: entre los dos el hero aun
     cabe, pero ahi el subtitulo pasa de 6 lineas a 5 sin mover el alto, asi que
     aplicarlo antes aprieta el bloque sin coste. */

  .portada__entradilla {
    font-size: 1rem;
  }

  /* Aqui habia un .cabecera-seccion con su relleno de movil. Se va con la
     clase; el equivalente de la banda esta en el corte de 900. */

  /* La disposicion en columna y el ocultado del campo ya vienen de los cortes
     de 740px y 959px de arriba; aqui solo se ajusta el tamano. */

  .marca {
    font-size: 22px;
  }

  .nav {
    gap: 20px;
  }
}

/* Tercer corte de cabecera, tambien medido barriendo anchos. Con la navegacion
   ya en 12px y el hueco de 28, se parte en dos lineas por debajo de 371px de
   viewport, y eso alcanza a 360, que es un ancho de movil corriente. Se corta
   en 400 para cubrirlo con margen.

   Aqui solo se estrecha el HUECO entre enlaces, a 10px. Antes esta regla hacia
   tres cosas: bajaba el cuerpo a 12px, apretaba el tracking a 0.04em y ponia el
   hueco en 14. Las dos primeras sobran ahora: el cuerpo ya es 12 en la base, y
   apretar las letras justo en la pantalla mas pequena es lo ultimo que conviene
   hacer.

   Medido, quitar el tracking no cuesta cobertura, la gana: con hueco 14 y
   0.04em la navegacion aguantaba hasta 320, y con hueco 10 y el tracking
   intacto aguanta hasta 317. Se recorta entre palabras, no entre letras.

   El alto no cambia porque la lupa sigue midiendo 24px y es ella la que fija la
   altura de la fila. */

@media (max-width: 400px) {
  .nav {
    gap: 10px;
  }

  .entrada__titulo {
    font-size: 24px;
  }

  /* Aquí había un .tarjetas a una columna. Sobra desde que el corte de 748 hace
     eso mismo, y 400 nunca llegaba a leerse. */

  .portada__acciones .boton {
    flex: 1 1 auto;
  }
}