/* marea-marca | tema-ghost | assets/built/index.css
   GENERADO por scripts/tema-ghost.mjs concatenando assets/css/ en orden. No
   editar a mano: se sobrescribe en la siguiente pasada.

   Este fichero NO lleva ni un color ni una familia tipografica: los valores
   viven en assets/built/tokens.css, que es copia literal de dist/tokens.css.
   Orden de carga en la plantilla: fonts.css, tokens.css, index.css.

   Hojas fundidas: 01-base.css, 02-estructura.css, 03-contenido.css, 04-componentes.css, 05-formulario.css, 06-portada.css */

/* ==== 01-base.css ==== */
/* marea-marca | tema-ghost | 01-base.css
   Reglas base del tema: reinicio, foco, cinta y texto corrido.

   REGLA DURA DEL FICHERO, y de todos los de esta carpeta: aqui NO hay ni un
   color, ni una familia tipografica, ni una medida de espacio escritos a mano.
   Todo sale de var(--marea-*), que genera scripts/construir.mjs desde tokens/.
   Si falta algo, se anade el token, no el literal. Se comprueba asi:

     grep -nE "#[0-9a-fA-F]{3,8}" assets/css/*.css      (cero aciertos)
     grep -n  "font-family" assets/css/*.css            (solo var(--marea-*))

   El sistema madre va SIN gesto anadido: cero tachon, cero brocha simulada,
   cero letra dibujada, cero zigzag, cero notas manuscritas, cero olas. Su
   UNICA decoracion es la cinta. La personalidad vive en la estructura, y
   sobrevive en movil, donde no se oculta nada. */

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

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

html,
body {
  height: auto;
}

body {
  margin: 0;
  background: var(--marea-color-fondo-base);
  color: var(--marea-color-tinta-cuerpo);
  font-family: var(--marea-tipografia-familia-texto);
  font-size: var(--marea-tipografia-tamano-cuerpo);
  font-weight: var(--marea-tipografia-peso-texto);
  line-height: var(--marea-tipografia-interlinea-cuerpo);
  letter-spacing: var(--marea-tipografia-letra-cuerpo);
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* --- foco: una sola regla para todo lo interactivo --- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--marea-trazo-foco) solid var(--marea-color-interactivo-foco);
  outline-offset: var(--marea-espacio-apretado);
  border-radius: var(--marea-radio-control);
}

.salto-al-contenido {
  position: absolute;
  left: var(--marea-espacio-componente);
  top: calc(var(--marea-espacio-componente) * -6);
  z-index: 3;
  padding: var(--marea-espacio-apretado) var(--marea-espacio-componente);
  background: var(--marea-color-interactivo-boton-fondo);
  color: var(--marea-color-interactivo-boton-tinta);
  border-radius: var(--marea-radio-control);
  text-decoration: none;
  transition: top var(--marea-base-movimiento-duracion-rapida) var(--marea-base-movimiento-curva-salida);
}
.salto-al-contenido:hover,
.salto-al-contenido:focus {
  top: var(--marea-espacio-componente);
  color: var(--marea-color-interactivo-boton-tinta);
}

/* --- la cinta ---
   La UNICA decoracion del sistema madre. Va identica en todas las superficies
   (web, boletin, informe): misma altura, mismos dos colores y misma proporcion.
   Una campana no puede cambiarla. Los cinco valores salen de los tokens
   cinta.*, asi que aqui no hay ni un numero ni un color a mano; el corte del
   degradado es el mismo porcentaje que el ancho del tramo turquesa. */

.cinta {
  height: var(--marea-cinta-altura);
  background-image: linear-gradient(
    to right,
    var(--marea-cinta-color-inicio) 0%,
    var(--marea-cinta-color-inicio) var(--marea-cinta-proporcion-inicio),
    var(--marea-cinta-color-fin) var(--marea-cinta-proporcion-inicio),
    var(--marea-cinta-color-fin) 100%
  );
}

/* --- texto --- */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--marea-tipografia-familia-titulo);
  font-weight: var(--marea-tipografia-peso-titulo);
  line-height: var(--marea-tipografia-interlinea-titulo); /* impeccable-disable-line tight-leading: titular grande: el umbral de 1,3 del detector es para texto corrido, el cuerpo va a 1,6 */
  letter-spacing: var(--marea-tipografia-letra-titulo);
  color: var(--marea-color-tinta-cuerpo);
  text-wrap: balance;
  /* Una URL o una palabra kilometrica dentro de un titular NO ensancha la
     pagina: se parte. Sin esto, un titulo con un enlace largo dejaba la caja
     en 343px y la tinta llegando a 2.231px, o sea recortada y sin forma de
     leerla. break-word parte solo cuando la palabra no cabe ella sola. */
  overflow-wrap: break-word;
}

/* El titular de pagina escala con el ancho entre titulo-3 y titulo-1 (06-10-2026):
   a 46px fijos, en un movil de 390 cada linea llevaba una o dos palabras. */
h1 {
  font-size: clamp(var(--marea-tipografia-tamano-titulo-3), 8vw, var(--marea-tipografia-tamano-titulo-1));
  margin: 0 0 var(--marea-espacio-componente);
}
h2 {
  font-size: var(--marea-tipografia-tamano-titulo-2);
  margin: 0 0 var(--marea-espacio-componente);
}
h3 {
  font-size: var(--marea-tipografia-tamano-titulo-3);
  line-height: var(--marea-tipografia-interlinea-titulo-corto);
  margin: var(--marea-espacio-holgado) 0 var(--marea-espacio-componente);
}
h4,
h5,
h6 {
  font-size: var(--marea-tipografia-tamano-titulo-4);
  line-height: var(--marea-tipografia-interlinea-titulo-corto);
  margin: var(--marea-espacio-bloque) 0 var(--marea-espacio-apretado);
}

p,
li,
dd,
figcaption,
blockquote {
  overflow-wrap: break-word;
}

p {
  margin: 0 0 var(--marea-espacio-componente);
}

a {
  color: var(--marea-color-interactivo-enlace);
  text-decoration-thickness: var(--marea-trazo-filete);
  text-underline-offset: var(--marea-espacio-apretado);
}
a:hover {
  color: var(--marea-color-interactivo-enlace-activo);
}

hr {
  height: var(--marea-trazo-filete);
  border: 0;
  background: var(--marea-color-borde-filete);
  margin-block: var(--marea-espacio-holgado);
}

code,
kbd,
samp,
pre {
  font-family: var(--marea-tipografia-familia-mono);
  font-size: var(--marea-tipografia-tamano-pie);
}
/* code pone su propio fondo, asi que tiene que poner tambien su propia tinta:
   heredandola, dentro del pie oscuro salia texto blanco sobre fondo papel. */
code {
  background: var(--marea-color-fondo-sutil);
  color: var(--marea-color-tinta-cuerpo);
  border: var(--marea-trazo-filete) solid var(--marea-color-borde-filete);
  border-radius: var(--marea-radio-control);
  padding: 0 var(--marea-espacio-apretado);
}
pre {
  max-width: 100%;
  overflow-x: auto;
  padding: var(--marea-espacio-componente);
  background: var(--marea-color-fondo-sutil);
  border: var(--marea-trazo-filete) solid var(--marea-color-borde-filete);
  border-radius: var(--marea-radio-control);
  line-height: var(--marea-tipografia-interlinea-cuerpo);
}
pre code {
  background: none;
  border: 0;
  padding: 0;
}

blockquote {
  margin: 0;
  padding-left: var(--marea-espacio-bloque);
  border-left: var(--marea-trazo-marcador) solid var(--marea-color-enfasis-grafico);
}

figure {
  margin: 0;
}
figcaption {
  margin-top: var(--marea-espacio-apretado);
  color: var(--marea-color-tinta-suave);
  font-size: var(--marea-tipografia-tamano-pie);
}

.etiqueta {
  display: inline-block;
  font-size: var(--marea-tipografia-tamano-micro);
  font-weight: var(--marea-tipografia-peso-etiqueta);
  letter-spacing: var(--marea-tipografia-letra-etiqueta);
  text-transform: uppercase;
  color: var(--marea-color-tinta-fuerte);
}

.vacio {
  color: var(--marea-color-tinta-suave);
  padding-block: var(--marea-espacio-seccion);
}

/* --- movimiento reducido --- */

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

/* ==== 02-estructura.css ==== */
/* marea-marca | tema-ghost | 02-estructura.css
   Envoltorio, cabecera, pie y la rejilla de contenido de Ghost.
   Sin literales: ver la regla dura al principio de 01-base.css. */

.gh-viewport {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.gh-main {
  flex: 1 0 auto;
}

.limite {
  width: 100%;
  max-width: var(--marea-medida-columna-ancha);
  margin-inline: auto;
  padding-inline: var(--marea-espacio-componente);
}

/* --- cabecera ---
   En pantalla ancha, una fila: logotipo a la izquierda, secciones, y buscador
   y llamada a la derecha. Por debajo de 48rem, y solo si el script de
   partials/cabecera.hbs ha corrido, secciones, buscador y llamada se pliegan
   detras del boton "Menú" (decision de Nico del 06-10-2026: plegadas ocupaban
   237 de 844px a 390). Sin JS el panel se ve abierto, como antes. */

.gh-head {
  border-bottom: var(--marea-trazo-filete) solid var(--marea-color-borde-filete);
  background: var(--marea-color-fondo-base);
}

/* Fila que ENVUELVE, no rejilla de tres columnas. Con la rejilla, un nombre
   de sitio largo se comia el carril del logotipo (835px de 1088) y dejaba la
   navegacion en NUEVE pixeles: las secciones seguian ahi, ilegibles. En una
   fila con envoltura, lo que no cabe baja de linea y todo se sigue viendo. */
.gh-head-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--marea-espacio-componente) var(--marea-espacio-bloque);
  padding-block: var(--marea-espacio-componente);
}

.gh-head-logo {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  font-family: var(--marea-tipografia-familia-titulo);
  font-size: var(--marea-tipografia-tamano-titulo-4);
  font-weight: var(--marea-tipografia-peso-titulo);
  letter-spacing: var(--marea-tipografia-letra-titulo);
  color: var(--marea-color-tinta-cuerpo);
  text-decoration: none;
  justify-self: start;
}
.gh-head-logo:hover {
  color: var(--marea-color-interactivo-enlace);
}

/* El panel agrupa secciones y acciones. En la fila ancha se estira y reparte
   como lo hacian sus hijos sueltos; pide 20rem para que, si no los hay, baje
   a su propia linea en vez de estrujarse contra el logotipo. */
.gh-head-panel {
  display: flex;
  flex: 1 1 20rem;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--marea-espacio-componente) var(--marea-espacio-bloque);
  min-width: 0;
}
.gh-head-menu {
  flex: 1 1 20rem;
  min-width: 0;
}

/* El boton "Menú": solo existe con JS (lleva hidden en el marcado) y solo se
   ve por debajo de 48rem. Mas bajo que un boton normal, para que la cabecera
   plegada quede en una sola linea corta. Va con dos clases para ganar a
   .boton, que se declara despues en 04-componentes.css y si no pondria
   display: inline-flex incluso con el atributo hidden. */
.gh-head .gh-head-conmutador {
  display: none;
  margin-inline-start: auto;
  padding: var(--marea-base-espacio-1) var(--marea-espacio-componente);
  font-size: var(--marea-tipografia-tamano-pie);
}
.gh-head-conmutador-icono {
  display: block;
  flex: 0 0 auto;
}

@media (max-width: 47.99rem) {
  .gh-head-inner {
    padding-block: var(--marea-espacio-apretado);
    gap: var(--marea-espacio-apretado) var(--marea-espacio-componente);
  }
  .gh-head-logo img {
    max-height: var(--marea-espacio-bloque);
  }
  .gh-head[data-plegable] .gh-head-conmutador:not([hidden]) {
    display: inline-flex;
  }
  /* Abierto, el panel ocupa su propia linea entera bajo logotipo y boton. */
  .gh-head[data-plegable] .gh-head-panel {
    flex-basis: 100%;
    padding-block: var(--marea-espacio-apretado) var(--marea-espacio-componente);
  }
  .gh-head[data-plegable] .gh-head-conmutador[aria-expanded="false"] + .gh-head-panel {
    display: none;
  }
  .gh-head[data-plegable] .gh-head-actions {
    margin-inline-start: 0;
  }
}
.gh-head-logo img {
  display: block;
  max-height: var(--marea-espacio-holgado);
  width: auto;
}

/* Las secciones ENVUELVEN, no se desplazan. La version anterior ponia
   overflow-x: auto y a 1280 recortaba las dos ultimas secciones detras del
   borde: exactamente el fallo que la regla "nada se oculta" prohibe, solo que
   en escritorio en vez de en movil. Envolviendo se ven todas a cualquier
   ancho, y en movil ocupan dos o tres lineas, que es barato. */
.gh-head-menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--marea-espacio-apretado);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gh-head-menu li {
  flex: 0 0 auto;
}
.gh-head-menu a {
  display: block;
  padding: var(--marea-espacio-apretado) var(--marea-espacio-componente);
  border: var(--marea-trazo-filete) solid var(--marea-color-borde-filete);
  border-radius: var(--marea-radio-pastilla);
  color: var(--marea-color-interactivo-enlace);
  font-size: var(--marea-tipografia-tamano-pie);
  font-weight: var(--marea-tipografia-peso-etiqueta);
  text-decoration: none;
  /* Nada de nowrap: una etiqueta de menu larga forzaba la pagina entera a
     2.247px de ancho en un movil de 375. Con envoltura, una etiqueta larga
     ocupa dos lineas dentro de su pastilla y la pagina no se mueve. */
  overflow-wrap: break-word;
}
.gh-head-menu li {
  max-width: 100%;
}
.gh-head-menu a:hover {
  border-color: var(--marea-color-borde-campo);
  color: var(--marea-color-interactivo-enlace-activo);
}
.gh-head-menu .nav-current a {
  border-color: var(--marea-color-interactivo-boton-fondo);
  color: var(--marea-color-interactivo-enlace);
  font-weight: var(--marea-tipografia-peso-texto-fuerte);
}

/* El margen automatico empuja la llamada al borde derecho cuando sobra sitio,
   y la deja donde caiga cuando la fila envuelve. */
.gh-head-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--marea-espacio-apretado);
  margin-inline-start: auto;
}

/* El boton del buscador lo pinta el ayudante search de Ghost, y sale con un
   atributo style EN LINEA que fija display, tamano, relleno, borde, color,
   fondo, cursor y, lo que importa aqui, outline: none. Un estilo en linea gana
   a cualquier hoja, asi que la regla de foco de 01-base.css, que dibuja el
   foco con outline, sobre este boton no pinta nada.

   De ahi que aqui el foco y el sobrevuelo se dibujen con box-shadow y con
   border-radius, dos propiedades que ese atributo NO declara y que por tanto
   si obedecen a la hoja. El anillo de foco lleva el mismo grosor y el mismo
   color que el outline del resto de lo interactivo, y el aviso de sobrevuelo
   copia el filete de las pastillas de la navegacion. */
.gh-search-icon {
  border-radius: var(--marea-radio-pastilla);
}
.gh-search-icon:hover {
  box-shadow: inset 0 0 0 var(--marea-trazo-filete) var(--marea-color-borde-campo);
}
.gh-search-icon:focus-visible {
  box-shadow: 0 0 0 var(--marea-trazo-foco) var(--marea-color-interactivo-foco);
}

/* --- pie --- */

/* Sin margen superior: la pagina y el articulo ya traen su relleno de
   seccion por abajo, y sumarle otro dejaba un hueco de dos alturas. */
.gh-foot {
  padding-block: var(--marea-espacio-holgado);
  background: var(--marea-color-fondo-fuerte);
  color: var(--marea-color-tinta-sobre-fuerte);
}
.gh-foot a {
  color: var(--marea-color-interactivo-enlace-sobre-fuerte);
}
.gh-foot-menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--marea-espacio-componente);
  margin: 0 0 var(--marea-espacio-componente);
  padding: 0;
  list-style: none;
}
.gh-foot-meta {
  margin: 0;
  font-size: var(--marea-tipografia-tamano-pie);
  line-height: var(--marea-tipografia-interlinea-cuerpo);
}
.gh-foot-sep {
  padding-inline: var(--marea-espacio-apretado);
  color: var(--marea-color-borde-campo);
}

/* --- pagina y articulo --- */

.gh-page {
  padding-block: var(--marea-espacio-holgado) var(--marea-espacio-seccion);
}

.gh-article {
  padding-block: var(--marea-espacio-holgado) var(--marea-espacio-seccion);
}

.gh-header {
  margin-bottom: var(--marea-espacio-bloque);
}

.gh-title {
  max-width: var(--marea-medida-columna);
}

.gh-excerpt {
  max-width: var(--marea-medida-columna);
  font-size: var(--marea-tipografia-tamano-entradilla);
  line-height: var(--marea-tipografia-interlinea-entradilla);
  color: var(--marea-color-tinta-cuerpo);
}

.gh-post-meta,
.gh-post-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--marea-espacio-apretado);
  margin: 0 0 var(--marea-espacio-componente);
  font-size: var(--marea-tipografia-tamano-pie);
  color: var(--marea-color-tinta-suave);
}

.gh-feature-image {
  margin-bottom: var(--marea-espacio-holgado);
}
.gh-feature-image img {
  width: 100%;
  border-radius: var(--marea-radio-tarjeta);
}

.gh-footer {
  margin-top: var(--marea-espacio-holgado);
  padding-top: var(--marea-espacio-bloque);
  border-top: var(--marea-trazo-filete) solid var(--marea-color-borde-filete);
}

/* --- portada --- */

.portada-entrada {
  padding-block: var(--marea-espacio-holgado) var(--marea-espacio-bloque);
  border-bottom: var(--marea-trazo-filete) solid var(--marea-color-borde-filete);
  margin-bottom: var(--marea-espacio-holgado);
}
.portada-titulo {
  font-size: clamp(var(--marea-tipografia-tamano-titulo-3), 8vw, var(--marea-tipografia-tamano-titulo-1));
  line-height: var(--marea-tipografia-interlinea-titulo); /* impeccable-disable-line tight-leading: titular grande: el umbral de 1,3 del detector es para texto corrido, el cuerpo va a 1,6 */
  margin: 0;
}
.portada-entradilla {
  max-width: var(--marea-medida-columna);
  margin: var(--marea-espacio-componente) 0 0;
  font-size: var(--marea-tipografia-tamano-entradilla);
  line-height: var(--marea-tipografia-interlinea-entradilla);
  color: var(--marea-color-tinta-suave);
}

/* --- cabecera de coleccion (trayectoria, cuaderno, etiqueta, autoria) --- */

.cabecera-coleccion {
  padding-block: var(--marea-espacio-holgado) var(--marea-espacio-bloque);
  border-bottom: var(--marea-trazo-filete) solid var(--marea-color-borde-filete);
  margin-bottom: var(--marea-espacio-holgado);
}
.cabecera-coleccion-titulo {
  font-size: clamp(var(--marea-tipografia-tamano-titulo-3), 8vw, var(--marea-tipografia-tamano-titulo-1));
  line-height: var(--marea-tipografia-interlinea-titulo); /* impeccable-disable-line tight-leading: titular grande: el umbral de 1,3 del detector es para texto corrido, el cuerpo va a 1,6 */
  margin: 0;
  max-width: var(--marea-medida-columna);
}
.cabecera-coleccion-entradilla {
  max-width: var(--marea-medida-columna);
  margin: var(--marea-espacio-componente) 0 0;
  font-size: var(--marea-tipografia-tamano-entradilla);
  line-height: var(--marea-tipografia-interlinea-entradilla);
  color: var(--marea-color-tinta-suave);
}
.cabecera-coleccion .prosa {
  margin-top: var(--marea-espacio-componente);
}
.cabecera-coleccion .prosa > :last-child {
  margin-bottom: 0;
}

/* ==== 03-contenido.css ==== */
/* marea-marca | tema-ghost | 03-contenido.css
   La rejilla de contenido de Ghost y las tarjetas del editor Koenig.
   Sin literales: ver la regla dura al principio de 01-base.css.

   La rejilla de tres carriles es la de Starter, con las medidas cambiadas a
   tokens: el carril central es la medida de columna de lectura, el ancho llega
   a la columna ancha, y el completo ocupa el viewport. Asi una imagen a ancho
   completo del editor sigue funcionando sin romper la columna del texto. */

/* El carril central arranca en el MISMO borde izquierdo que .limite, que es
   donde estan el titular y la entradilla del articulo. La version anterior lo
   centraba (era la de Starter) y eso dejaba el titulo pegado a la izquierda y
   el cuerpo del texto desplazado casi 200px a la derecha: dos alineaciones
   distintas en la misma pieza.

   --canvas-margen reproduce el borde de .limite: la mitad de lo que sobra
   hasta la columna ancha, mas el relleno lateral. Asi el carril "ancho" mide
   exactamente el ancho util de .limite y el "completo" ocupa el viewport. */
.gh-canvas {
  --canvas-margen: calc(
    max(0px, (100% - var(--marea-medida-columna-ancha)) / 2) + var(--marea-espacio-componente)
  );
  --canvas-central: min(var(--marea-medida-columna), calc(100% - var(--canvas-margen) * 2));

  display: grid;
  grid-template-columns:
    [completo-inicio] var(--canvas-margen)
    [ancho-inicio central-inicio] var(--canvas-central) [central-fin]
    minmax(0, 1fr) [ancho-fin]
    var(--canvas-margen) [completo-fin];
}

.gh-canvas > * {
  grid-column: central-inicio / central-fin;
}

.kg-width-wide,
.kg-content-wide > div {
  grid-column: ancho-inicio / ancho-fin;
}

.kg-width-full {
  grid-column: completo-inicio / completo-fin;
}

.kg-width-full img {
  width: 100%;
}

/* La prosa suelta (cabecera inyectada de una coleccion) usa la misma medida de
   lectura sin montar la rejilla entera. */
.prosa {
  max-width: var(--marea-medida-columna);
}

/* --- ritmo del contenido ---
   Revisado el 06-10-2026 a peticion de Nico ("la distancia vertical entre
   parrafos es muy alta", "la diferencia entre niveles de heading no se
   distingue"). La causa era doble: .gh-canvas es una rejilla, y en una
   rejilla los margenes NO se colapsan, asi que el margen inferior de 01-base
   (p: 1rem) se SUMABA al superior de aqui (1,5rem) y dejaba 2,5rem entre dos
   parrafos; y un titular llevaba casi el mismo aire antes que despues.

   Ahora el ritmo lo pone un solo margen, el superior, y cada hijo directo
   pierde el suyo:
   - entre parrafos, listas y elementos cortos: espacio.componente (1rem);
   - antes de un h2, base.espacio-7 (3rem); de un h3, espacio.holgado (2rem);
     de un h4, espacio.bloque (1,5rem);
   - despues de cualquier titular, espacio.apretado (0,5rem), para que el
     titular se pegue a lo que encabeza y no a lo que cierra;
   - alrededor de imagenes, citas, tarjetas y separadores, espacio.holgado. */

.gh-content > * {
  margin-block: 0;
}

.gh-content > * + * {
  margin-top: var(--marea-espacio-componente);
}

.gh-content > :is(figure, blockquote, hr, pre, table, .kg-card),
.gh-content > :is(figure, blockquote, hr, pre, table, .kg-card) + * {
  margin-top: var(--marea-espacio-holgado);
}

.gh-content > h2 {
  margin-top: var(--marea-base-espacio-7);
}
.gh-content > h3 {
  margin-top: var(--marea-espacio-holgado);
}
.gh-content > :is(h4, h5, h6) {
  margin-top: var(--marea-espacio-bloque);
}
.gh-content > :is(h2, h3, h4, h5, h6) + * {
  margin-top: var(--marea-espacio-apretado);
}
.gh-content > h2 + * {
  margin-top: var(--marea-base-espacio-3);
}

/* Listas fechadas (la cronologia de /trayectoria/): cada hito es una linea
   suelta con la fecha, en un parrafo, seguida de su h3.
   Con el ritmo general, la fecha quedaba a 1rem del hito ANTERIOR y a 2rem
   del suyo, o sea que se leia como la cola del anterior. Aqui la fecha se
   separa del anterior y se pega a su titular. Solo salta en paginas con la
   forma de la cronologia, "h2 de ano + fecha + h3" al menos tres veces, para
   no tocar el ultimo parrafo de una seccion normal que da la casualidad de
   ir antes de un h3. (:has no se puede anidar dentro de :has, por eso el
   patron se reconoce por la estructura y no por el contenido del parrafo.) */
.gh-content:has(> h2 + p + h3 ~ h2 + p + h3 ~ h2 + p + h3) > p:has(+ h3) {
  margin-top: var(--marea-espacio-holgado);
  font-size: var(--marea-tipografia-tamano-pie);
  color: var(--marea-color-tinta-suave);
}
.gh-content:has(> h2 + p + h3 ~ h2 + p + h3 ~ h2 + p + h3) > p + h3 {
  margin-top: var(--marea-base-espacio-1);
}
.gh-content > :first-child {
  margin-top: 0;
}

/* Jerarquia dentro del contenido. Tres escalones que se distinguen por
   tamano, peso y color a la vez, y no solo por tamano: h2 en Sora 700 a
   titulo-3, h3 en Sora 700 a titulo-4 y en tinta fuerte (indigo), h4 en
   Manrope 700 a la medida de entradilla. El h1 del titulo de pagina queda
   muy por encima, a titulo-1. */
.gh-content > h2 {
  font-size: var(--marea-tipografia-tamano-titulo-3);
  line-height: var(--marea-tipografia-interlinea-titulo); /* impeccable-disable-line tight-leading: titular, el cuerpo va a 1,6 */
}
.gh-content > h3 {
  font-size: var(--marea-tipografia-tamano-titulo-4);
  line-height: var(--marea-tipografia-interlinea-titulo-corto);
  color: var(--marea-color-tinta-fuerte);
}
.gh-content > :is(h4, h5, h6) {
  font-family: var(--marea-tipografia-familia-texto);
  font-size: var(--marea-tipografia-tamano-entradilla);
  font-weight: var(--marea-tipografia-peso-titulo);
  letter-spacing: var(--marea-tipografia-letra-cuerpo);
  line-height: var(--marea-tipografia-interlinea-entradilla);
}

.gh-content > ul,
.gh-content > ol {
  padding-left: var(--marea-espacio-bloque);
}
.gh-content li + li {
  margin-top: var(--marea-base-espacio-1);
}
.gh-content li > p {
  margin: 0;
}

/* Imagenes del editor en la columna de lectura: todas al ANCHO de la columna.
   Una foto subida mas estrecha que la columna se quedaba a su tamano natural
   y en /quienes-somos/ las tres fotos salian con anchos distintos. Solo la
   imagen de una tarjeta de imagen (.kg-image-card), asi que logotipos y
   miniaturas metidos en tarjetas HTML no se estiran. */
.gh-content .kg-image-card img.kg-image {
  display: block;
  width: 100%;
  height: auto;
}

.gh-content > blockquote {
  font-size: var(--marea-tipografia-tamano-entradilla);
  line-height: var(--marea-tipografia-interlinea-entradilla);
}

.gh-content img {
  border-radius: var(--marea-radio-tarjeta);
}
.kg-width-full img {
  border-radius: var(--marea-base-radio-nulo);
}

/* --- tablas del contenido ---
   Envueltas en su propio desplazamiento horizontal: una tabla ancha se
   desplaza dentro de su caja y nunca ensancha la pagina. */

.gh-content table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  border-collapse: collapse;
  font-size: var(--marea-tipografia-tamano-pie);
}
.gh-content th,
.gh-content td {
  padding: var(--marea-espacio-apretado) var(--marea-espacio-componente);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--marea-trazo-filete) solid var(--marea-color-borde-filete);
  white-space: normal;
}
.gh-content thead th {
  background: var(--marea-color-fondo-sutil);
  font-family: var(--marea-tipografia-familia-titulo);
  font-weight: var(--marea-tipografia-peso-titulo);
}

/* --- tarjetas del editor --- */

.kg-embed-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.kg-embed-card > :where(iframe[src*="youtube.com"], iframe[src*="vimeo.com"]) {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.kg-card figcaption {
  text-align: center;
}

.kg-width-full.kg-card-hascaption {
  display: grid;
  grid-template-columns: inherit;
}
.kg-width-wide.kg-card-hascaption img {
  grid-column: ancho-inicio / ancho-fin;
}
.kg-width-full.kg-card-hascaption img {
  grid-column: 1 / -1;
}
.kg-width-full.kg-card-hascaption figcaption {
  grid-column: central-inicio / central-fin;
}

.kg-callout-card {
  display: flex;
  gap: var(--marea-espacio-componente);
  padding: var(--marea-espacio-componente);
  background: var(--marea-color-margen-fondo);
  border-radius: var(--marea-radio-control);
}

/* ==== 04-componentes.css ==== */
/* marea-marca | tema-ghost | 04-componentes.css
   Botones, tarjetas, listados de coleccion, paginacion y llamadas.
   Sin literales: ver la regla dura al principio de 01-base.css.

   Los botones son los mismos del styleguide, y se parten en DOS a proposito:
   .boton pone la caja y la letra, y la variante pone el color. Ninguna regla
   de color pisa a otra, asi que el par tinta/fondo de cada estado esta
   declarado en un solo sitio. */

.boton {
  display: inline-flex;
  align-items: center;
  gap: var(--marea-espacio-apretado);
  padding: var(--marea-espacio-apretado) var(--marea-espacio-bloque);
  border-width: var(--marea-trazo-campo);
  border-style: solid;
  border-radius: var(--marea-radio-control);
  font-family: var(--marea-tipografia-familia-texto);
  font-size: var(--marea-tipografia-tamano-cuerpo);
  font-weight: var(--marea-tipografia-peso-texto-fuerte);
  line-height: var(--marea-tipografia-interlinea-cuerpo);
  text-decoration: none;
  /* El boton no lleva nowrap: una etiqueta larga (o una traduccion) partiria
     la maqueta en movil en vez de ocupar dos lineas. */
  max-width: 100%;
  overflow-wrap: break-word;
  cursor: pointer;
  transition:
    background-color var(--marea-base-movimiento-duracion-rapida) var(--marea-base-movimiento-curva-estandar),
    border-color var(--marea-base-movimiento-duracion-rapida) var(--marea-base-movimiento-curva-estandar);
}

.boton-solido {
  background: var(--marea-color-interactivo-boton-fondo);
  color: var(--marea-color-interactivo-boton-tinta);
  border-color: var(--marea-color-interactivo-boton-fondo);
}
.boton-solido:hover {
  background: var(--marea-color-interactivo-boton-fondo-activo);
  color: var(--marea-color-interactivo-boton-tinta);
  border-color: var(--marea-color-interactivo-boton-fondo-activo);
}
.boton-solido:disabled,
.boton-solido[aria-disabled="true"] {
  background: var(--marea-color-fondo-sutil);
  color: var(--marea-color-tinta-suave);
  border-color: var(--marea-color-borde-campo);
  cursor: not-allowed;
}

.boton-perfil {
  background: var(--marea-color-fondo-base);
  color: var(--marea-color-interactivo-enlace);
  border-color: var(--marea-color-interactivo-boton-fondo);
}
.boton-perfil:hover {
  background: var(--marea-color-fondo-sutil);
  color: var(--marea-color-interactivo-enlace-activo);
  border-color: var(--marea-color-interactivo-boton-fondo-activo);
}

/* --- mazo de tarjetas --- */

.mazo {
  display: grid;
  gap: var(--marea-espacio-bloque);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--marea-espacio-apretado);
  padding: var(--marea-espacio-componente);
  background: var(--marea-color-fondo-base);
  border: var(--marea-trazo-filete) solid var(--marea-color-borde-filete);
  border-radius: var(--marea-radio-tarjeta);
  box-shadow: var(--marea-sombra-tarjeta);
}
.tarjeta-imagen {
  display: block;
  margin: calc(var(--marea-espacio-componente) * -1) calc(var(--marea-espacio-componente) * -1) 0;
}
.tarjeta-imagen img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-start-start-radius: var(--marea-radio-tarjeta);
  border-start-end-radius: var(--marea-radio-tarjeta);
}
.tarjeta-cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--marea-espacio-apretado);
}
.tarjeta-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--marea-espacio-apretado);
  margin: 0;
  font-size: var(--marea-tipografia-tamano-pie);
  color: var(--marea-color-tinta-suave);
}
.tarjeta-titulo {
  margin: 0;
  font-size: var(--marea-tipografia-tamano-titulo-4);
  line-height: var(--marea-tipografia-interlinea-titulo-corto);
}
.tarjeta-titulo a {
  color: var(--marea-color-tinta-cuerpo);
  text-decoration: none;
}
.tarjeta-titulo a:hover {
  color: var(--marea-color-interactivo-enlace);
  text-decoration: underline;
}
.tarjeta-resumen {
  margin: 0;
  color: var(--marea-color-tinta-suave);
  font-size: var(--marea-tipografia-tamano-pie);
}

/* --- listado de fichas de trayectoria ---
   Dos columnas en pantalla ancha, con el anio a la izquierda; en pantalla
   estrecha el anio va encima del titulo y se sigue viendo entero. */

.listado-fichas,
.listado-piezas {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ficha {
  display: grid;
  gap: var(--marea-espacio-apretado);
  padding-block: var(--marea-espacio-bloque);
  border-bottom: var(--marea-trazo-filete) solid var(--marea-color-borde-filete);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) {
  .ficha {
    grid-template-columns: minmax(0, 6rem) minmax(0, 1fr);
    gap: var(--marea-espacio-bloque);
  }
}
.ficha-anio {
  margin: 0;
  font-family: var(--marea-tipografia-familia-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--marea-tipografia-tamano-pie);
  color: var(--marea-color-tinta-fuerte);
}
.ficha-cuerpo {
  min-width: 0;
}
.ficha-titulo {
  margin: 0 0 var(--marea-espacio-apretado);
  font-size: var(--marea-tipografia-tamano-titulo-3);
  line-height: var(--marea-tipografia-interlinea-titulo-corto);
}
.ficha-titulo a {
  color: var(--marea-color-tinta-cuerpo);
  text-decoration: none;
}
.ficha-titulo a:hover {
  color: var(--marea-color-interactivo-enlace);
  text-decoration: underline;
}
.ficha-resumen {
  margin: 0;
  max-width: var(--marea-medida-columna);
  color: var(--marea-color-tinta-suave);
}

/* --- listado de piezas del cuaderno --- */

.pieza {
  padding-block: var(--marea-espacio-bloque);
  border-bottom: var(--marea-trazo-filete) solid var(--marea-color-borde-filete);
}
.pieza-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--marea-espacio-apretado);
  margin: 0 0 var(--marea-espacio-apretado);
  font-size: var(--marea-tipografia-tamano-pie);
  color: var(--marea-color-tinta-suave);
}
.pieza-titulo {
  margin: 0 0 var(--marea-espacio-apretado);
  font-size: var(--marea-tipografia-tamano-titulo-3);
  line-height: var(--marea-tipografia-interlinea-titulo-corto);
  max-width: var(--marea-medida-columna);
}
.pieza-titulo a {
  color: var(--marea-color-tinta-cuerpo);
  text-decoration: none;
}
.pieza-titulo a:hover {
  color: var(--marea-color-interactivo-enlace);
  text-decoration: underline;
}
.pieza-resumen {
  margin: 0;
  max-width: var(--marea-medida-columna);
  color: var(--marea-color-tinta-suave);
}

/* --- paginacion --- */

.paginacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--marea-espacio-componente);
  margin-top: var(--marea-espacio-holgado);
}
.paginacion-cuenta {
  font-size: var(--marea-tipografia-tamano-pie);
  color: var(--marea-color-tinta-suave);
}

/* --- seguir leyendo ---
   Si la entrada no tiene vecinos, el aside queda sin enlaces y se esconde
   entero, para no dejar un filete suelto al final de la pagina. */

.gh-readmore {
  padding-block: var(--marea-espacio-holgado);
  border-top: var(--marea-trazo-filete) solid var(--marea-color-borde-filete);
}
.gh-readmore:not(:has(a)) {
  display: none;
}
.gh-readmore-inner {
  display: grid;
  gap: var(--marea-espacio-bloque);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) {
  .gh-readmore-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.gh-readmore-link {
  display: flex;
  flex-direction: column;
  gap: var(--marea-espacio-apretado);
  padding: var(--marea-espacio-componente);
  border: var(--marea-trazo-filete) solid var(--marea-color-borde-filete);
  border-radius: var(--marea-radio-tarjeta);
  text-decoration: none;
  color: var(--marea-color-tinta-cuerpo);
}
.gh-readmore-link:hover {
  border-color: var(--marea-color-borde-campo);
  color: var(--marea-color-interactivo-enlace);
}
.gh-readmore-siguiente {
  text-align: right;
}
.gh-readmore-title {
  font-family: var(--marea-tipografia-familia-titulo);
  font-size: var(--marea-tipografia-tamano-titulo-4);
  font-weight: var(--marea-tipografia-peso-titulo);
  line-height: var(--marea-tipografia-interlinea-titulo-corto);
  letter-spacing: var(--marea-tipografia-letra-titulo);
  overflow-wrap: break-word;
}

/* --- llamada a suscribirse al final de una pieza ---
   Desde el 11-09-2026 lleva solo el boton "Suscríbete a La Chance": la frase
   de relleno se retiro, y con ella la regla .llamada-carta-texto. La clase
   sigue llamandose llamada-carta porque es una referencia, no texto visible. */

/* Se cine a la medida de lectura: estirado a los 68rem de .limite quedaba una
   caja de mil pixeles con una sola linea dentro, colgando del texto en vez de
   cerrarlo. */
.llamada-carta {
  max-width: var(--marea-medida-columna);
  margin-top: var(--marea-espacio-holgado);
  padding: var(--marea-espacio-bloque);
  background: var(--marea-color-margen-fondo);
  border-radius: var(--marea-radio-tarjeta);
}
.llamada-carta::before {
  content: "";
  display: block;
  width: var(--marea-espacio-holgado);
  height: var(--marea-trazo-marcador);
  margin-bottom: var(--marea-espacio-componente);
  background: var(--marea-color-margen-marcador);
}
.llamada-carta p:last-child {
  margin-bottom: 0;
}

/* --- redes en el pie ---
   Tres enlaces con el icono SVG en linea y fill="currentColor": el color sale
   de .gh-foot a (interactivo-enlace-sobre-fuerte), asi que aqui no se declara
   ninguno. La caja del enlace mide icono mas relleno, 40px, por encima de los
   24px del criterio 2.5.8 de WCAG 2.2.

   El foco es la regla unica de 01-base.css (outline de trazo-foco en
   interactivo-foco, con su separacion). Aqui solo se redondea para que el
   anillo abrace el icono, y la separacion entre iconos es mayor que la del
   anillo, asi que el de uno no pisa al vecino. El sobrevuelo copia el filete
   del boton del buscador. */

.redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--marea-espacio-componente);
  margin: 0 0 var(--marea-espacio-componente);
  padding: 0;
  list-style: none;
}
.redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--marea-espacio-apretado);
  border-radius: var(--marea-radio-pastilla);
}
.redes a:hover {
  box-shadow: inset 0 0 0 var(--marea-trazo-filete) var(--marea-color-borde-campo);
}
.redes a:focus-visible {
  border-radius: var(--marea-radio-pastilla);
}
.redes svg {
  display: block;
  width: var(--marea-espacio-bloque);
  height: var(--marea-espacio-bloque);
}

/* --- pagina de error --- */

.gh-error .gh-title {
  font-size: clamp(var(--marea-tipografia-tamano-titulo-3), 8vw, var(--marea-tipografia-tamano-titulo-1));
}
.gh-error-stack {
  margin-top: var(--marea-espacio-holgado);
  padding: var(--marea-espacio-componente);
  background: var(--marea-color-fondo-sutil);
  border-radius: var(--marea-radio-tarjeta);
  font-size: var(--marea-tipografia-tamano-pie);
}
.gh-error-stack ul {
  margin: 0;
  padding-left: var(--marea-espacio-bloque);
}
.gh-error-entradilla {
  max-width: var(--marea-medida-columna);
  font-size: var(--marea-tipografia-tamano-entradilla);
  line-height: var(--marea-tipografia-interlinea-entradilla);
  color: var(--marea-color-tinta-suave);
}

/* ==== 05-formulario.css ==== */
/* marea-marca | tema-ghost | 05-formulario.css
   El bloque de alta en la newsletter (titulo visible "Suscríbete a La
   Chance" desde el 11-09-2026), que es la conversion de la pagina
   /newsletter/. Escribe en Listmonk, no en Ghost Members.
   Sin literales: ver la regla dura al principio de 01-base.css. */

.bloque-alta {
  margin-block: var(--marea-espacio-holgado);
  padding: var(--marea-espacio-bloque);
  background: var(--marea-color-fondo-sutil);
  border: var(--marea-trazo-filete) solid var(--marea-color-borde-filete);
  border-radius: var(--marea-radio-tarjeta);
  max-width: var(--marea-medida-columna);
}

.bloque-alta-titulo {
  margin: 0 0 var(--marea-espacio-bloque);
  font-size: var(--marea-tipografia-tamano-titulo-3);
  line-height: var(--marea-tipografia-interlinea-titulo-corto);
}

.formulario-alta {
  display: grid;
  gap: var(--marea-espacio-bloque);
}

.campo {
  display: grid;
  gap: var(--marea-espacio-apretado);
}
.campo > label {
  font-weight: var(--marea-tipografia-peso-etiqueta);
  font-size: var(--marea-tipografia-tamano-pie);
}
.campo-opcional {
  font-weight: var(--marea-tipografia-peso-texto);
  color: var(--marea-color-tinta-suave);
}
.campo .ayuda {
  margin: 0;
  color: var(--marea-color-tinta-suave);
  font-size: var(--marea-tipografia-tamano-pie);
}

.formulario-alta input[type="text"],
.formulario-alta input[type="email"] {
  width: 100%;
  padding: var(--marea-espacio-apretado) var(--marea-espacio-componente);
  border: var(--marea-trazo-campo) solid var(--marea-color-borde-campo);
  border-radius: var(--marea-radio-control);
  background: var(--marea-color-fondo-base);
  color: var(--marea-color-tinta-cuerpo);
  font-family: var(--marea-tipografia-familia-texto);
  font-size: var(--marea-tipografia-tamano-cuerpo);
  line-height: var(--marea-tipografia-interlinea-cuerpo);
}
.formulario-alta input[type="text"]:hover,
.formulario-alta input[type="email"]:hover {
  border-color: var(--marea-color-borde-fuerte);
}
.formulario-alta input::placeholder {
  color: var(--marea-color-tinta-suave);
  opacity: 1;
}

.formulario-alta-accion {
  display: flex;
  flex-wrap: wrap;
  gap: var(--marea-espacio-componente);
}

/* El aviso de proteccion de datos se lee, asi que va en tinta de cuerpo y con
   interlinea de cuerpo. Rebajarlo a gris claro seria esconder la parte que la
   ley obliga a mostrar. */
.aviso-datos {
  margin: 0;
  font-size: var(--marea-tipografia-tamano-pie);
  line-height: var(--marea-tipografia-interlinea-cuerpo);
  color: var(--marea-color-tinta-cuerpo);
}

/* El mismo bloque dentro del contenido de una pagina (el alta en la bolsa de
   reclutadores de /colabora/, tarjeta HTML con estas clases desde el
   06-10-2026). Dentro de .gh-content el ritmo lo pone el margen superior, asi
   que aqui el bloque solo separa por arriba y lo que le sigue va pegado a
   distancia de parrafo. */
.gh-content > .bloque-alta {
  margin-block: var(--marea-espacio-bloque) 0;
}
.gh-content > .bloque-alta + * {
  margin-top: var(--marea-espacio-componente);
}

/* ==== 06-portada.css ==== */
/* marea-marca | tema-ghost | 06-portada.css
   La portada (pagina `inicio`, que pinta home.hbs). Decision de Nico del
   06-10-2026, tarea 26: recuperar la estructura de la portada de WordPress
   (caja de entrada con dos botones, rejilla de cuatro tarjetas, cita y
   cierre), que al migrar se habia quedado en una columna de texto suelto.

   El marcado vive en UNA tarjeta HTML de la pagina `inicio`, con estas
   clases, y el estilo vive aqui. Si alguien edita el texto de la portada en
   el editor de Ghost, que no toque las clases: son la referencia entre las
   dos piezas.

   Color, con las reglas del sistema madre: el turquesa SOLO como fondo (la
   caja de entrada), el indigo para botones, enlaces y texto fuerte, la tinta
   para el cuerpo, y el violeta solo como objeto grafico (el filete de la
   cita). Nada de violeta en bloque.
   Sin literales: ver la regla dura al principio de 01-base.css. */

/* Ocupa el carril ancho de la rejilla de contenido, no la columna de lectura:
   la rejilla de tarjetas necesita los 68rem. */
.gh-content > .portada {
  grid-column: ancho-inicio / ancho-fin;
  display: grid;
  gap: var(--marea-espacio-holgado);
}
.portada p {
  margin: 0;
}

/* --- caja de entrada --- */

.portada-caja {
  padding: var(--marea-espacio-holgado) var(--marea-espacio-bloque);
  background: var(--marea-color-fondo-acento);
  color: var(--marea-color-tinta-sobre-acento);
  border-radius: var(--marea-radio-tarjeta);
}
@media (min-width: 48rem) {
  .portada-caja {
    padding: var(--marea-base-espacio-8) var(--marea-base-espacio-8);
  }
}
.portada-caja-titulo {
  margin: 0;
  font-size: clamp(var(--marea-tipografia-tamano-titulo-3), 8vw, var(--marea-tipografia-tamano-titulo-1));
  line-height: var(--marea-tipografia-interlinea-titulo); /* impeccable-disable-line tight-leading: titular grande: el umbral de 1,3 del detector es para texto corrido, el cuerpo va a 1,6 */
  color: var(--marea-color-tinta-sobre-acento);
}
.portada .portada-caja-pregunta {
  margin-top: var(--marea-espacio-componente);
  font-size: var(--marea-tipografia-tamano-entradilla);
  line-height: var(--marea-tipografia-interlinea-entradilla);
}
.portada .portada-caja-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--marea-espacio-componente);
  margin-top: var(--marea-espacio-bloque);
}
/* El anillo de foco violeta sobre turquesa no llega a 3:1, asi que dentro de
   la caja el foco se dibuja en tinta. */
.portada-caja :focus-visible {
  outline-color: var(--marea-color-borde-fuerte);
}

/* --- rejilla de cuatro tarjetas: una columna en movil, dos desde 48rem --- */

.portada-tarjetas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--marea-espacio-componente);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) {
  .portada-tarjetas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--marea-espacio-bloque);
  }
}
.portada-tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--marea-espacio-apretado);
  padding: var(--marea-espacio-bloque);
  background: var(--marea-color-fondo-base);
  border: var(--marea-trazo-filete) solid var(--marea-color-borde-filete);
  border-radius: var(--marea-radio-tarjeta);
  box-shadow: var(--marea-sombra-tarjeta);
}
.gh-content .portada-tarjeta + .portada-tarjeta {
  margin-top: 0;
}
/* Marcador turquesa sobre el titulo: el mismo gesto que la llamada al pie de
   las piezas, y el turquesa sigue siendo fondo de una caja, no tinta. */
.portada-tarjeta::before {
  content: "";
  display: block;
  width: var(--marea-espacio-holgado);
  height: var(--marea-trazo-marcador);
  background: var(--marea-color-margen-marcador);
}
.portada-tarjeta-titulo {
  margin: 0;
  font-size: var(--marea-tipografia-tamano-titulo-4);
  line-height: var(--marea-tipografia-interlinea-titulo-corto);
}
.portada-tarjeta-titulo a {
  color: var(--marea-color-tinta-cuerpo);
  text-decoration: none;
}
.portada-tarjeta-titulo a:hover {
  color: var(--marea-color-interactivo-enlace);
  text-decoration: underline;
}
.portada .portada-tarjeta-enlace {
  margin-top: auto;
  font-weight: var(--marea-tipografia-peso-texto-fuerte);
}

/* --- cita --- */

.portada-cita {
  max-width: var(--marea-medida-columna);
  margin: 0;
  padding-left: var(--marea-espacio-bloque);
  border-left: var(--marea-trazo-marcador) solid var(--marea-color-enfasis-grafico);
}
.portada-cita p {
  font-family: var(--marea-tipografia-familia-titulo);
  font-size: var(--marea-tipografia-tamano-titulo-4);
  line-height: var(--marea-tipografia-interlinea-titulo-corto);
}
.portada-cita-autoria {
  display: block;
  margin-top: var(--marea-espacio-apretado);
  font-size: var(--marea-tipografia-tamano-pie);
  color: var(--marea-color-tinta-suave);
}

/* --- cierre: la llamada a la bolsa --- */

.portada-cierre {
  display: grid;
  gap: var(--marea-espacio-apretado);
  padding: var(--marea-espacio-bloque);
  background: var(--marea-color-fondo-sutil);
  border: var(--marea-trazo-filete) solid var(--marea-color-borde-filete);
  border-radius: var(--marea-radio-tarjeta);
}
.portada-cierre-estado {
  font-size: var(--marea-tipografia-tamano-micro);
  font-weight: var(--marea-tipografia-peso-texto-fuerte);
  letter-spacing: var(--marea-tipografia-letra-etiqueta);
  text-transform: uppercase;
  color: var(--marea-color-tinta-fuerte);
}
.portada-cierre-enlace {
  font-weight: var(--marea-tipografia-peso-texto-fuerte);
}