/* ============================================================
   Páginas del ePortfolio: inicio, sobre mí, ponencias y blog
   ============================================================ */

/* ============================================================
   LA CABECERA DE LAS PÁGINAS
   Una misma pieza abre el inicio, sobre mí, los cursos y el blog:
   una banda de noche con el color de su sección, un halo de luz que
   entra por la esquina, una malla fina de puntos y, cerrando abajo,
   la línea de espectro con los colores de la casa.
   ============================================================ */

/* El alto lo manda esta regla y solo esta: las cuatro páginas —inicio,
   sobre mí, cursos y blog— abren con la misma banda, del mismo alto,
   de modo que al saltar de una a otra la navegación no da un brinco.
   Antes cada sección se ponía su propio «min-height» y se iban desde
   los 311px de cursos hasta los 500px de sobre mí.

   El mínimo se calcula con los mismos dos márgenes que el relleno más
   un hueco fijo para el texto (--cab-hueco). Así el alto sigue creciendo
   con la ventana igual que antes, pero las cuatro crecen a la vez y por
   el mismo sitio. El hueco da para el rótulo más alto de las cuatro —el
   del blog, que lleva entradilla y datos—; si algún día un título se
   fuera a más líneas, la banda se estira sola en vez de recortarlo. */
.cabecera {
  --tono: var(--ambar);
  --cab-arriba: clamp(126px, 17vh, 190px);
  --cab-abajo: clamp(62px, 9vh, 104px);
  --cab-hueco: 110px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: center;
  min-height: calc(var(--cab-arriba) + var(--cab-abajo) + var(--cab-hueco));
  padding: var(--cab-arriba) 24px var(--cab-abajo);
  background: var(--noche);
  color: var(--crema);
  border-bottom-left-radius: clamp(22px, 3.4vw, 42px);
  border-bottom-right-radius: clamp(22px, 3.4vw, 42px);
}

.cabecera__fondo { position: absolute; inset: 0; z-index: -1; }
.cabecera__fondo > * { position: absolute; inset: 0; display: block; }

/* el halo: la luz de la sección entrando por arriba a la izquierda */
.cabecera__luz {
  background:
    radial-gradient(78% 92% at 8% -12%, color-mix(in srgb, var(--tono) 46%, transparent) 0%, transparent 60%),
    radial-gradient(52% 70% at 92% 4%, color-mix(in srgb, var(--fucsia) 20%, transparent) 0%, transparent 62%),
    linear-gradient(178deg, var(--plum) 0%, var(--noche) 68%);
}

/* la malla de puntos, que se desvanece hacia los bordes */
.cabecera__malla {
  background-image: radial-gradient(var(--crema) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.07;
  -webkit-mask-image: radial-gradient(72% 74% at 46% 28%, #000 0%, transparent 78%);
  mask-image: radial-gradient(72% 74% at 46% 28%, #000 0%, transparent 78%);
}

.cabecera__dentro { position: relative; width: 100%; }

.cabecera__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tono);
  margin-bottom: clamp(16px, 2.4vh, 24px);
}
.cabecera__eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tono) 22%, transparent);
}

.cabecera__titulo {
  font-family: var(--serif);
  font-weight: 555;
  font-size: clamp(2.5rem, 6.6vw, 4.7rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  max-width: 17ch;
  text-shadow: 0 0 46px color-mix(in srgb, var(--tono) 34%, transparent);
}

.cabecera__texto {
  margin-top: clamp(16px, 2.4vh, 24px);
  max-width: 54ch;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.62;
  color: rgba(247, 232, 210, 0.76);
}

/* los datos sueltos que acompañan al título */
.cabecera__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin-top: clamp(20px, 3vh, 30px);
}
.cabecera__datos li {
  font-family: var(--pixel);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px 7px;
  border-radius: 999px;
  border: 1px solid rgba(247, 232, 210, 0.22);
  background: rgba(247, 232, 210, 0.06);
  color: rgba(247, 232, 210, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* la firma de la casa: el espectro completo cerrando la banda */
.cabecera__espectro {
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--brasa) 0%,
    var(--naranja) 18%,
    var(--ambar) 34%,
    var(--lima) 50%,
    var(--turquesa) 66%,
    var(--azul) 82%,
    var(--fucsia) 100%
  );
}

/* ---------- inicio: la portada, con las motas de luz ---------- */

/* La banda de entrada se queda en una franja contenida: lo justo para que el
   rótulo respire por encima del pliegue y las pestañas asomen sin hacer scroll.
   El alto es el común de «.cabecera», compartido con el resto de páginas. */
.cabecera--inicio .lienzo-motas { width: 100%; height: 100%; }
.cabecera--inicio .cabecera__titulo {
  display: grid;
  gap: 6px;
  max-width: none;
  line-height: 0.96;
  letter-spacing: -0.025em;
  text-shadow: none;
}
.cabecera__marca {
  font-size: clamp(2.4rem, 6.8vw, 4.4rem);
  letter-spacing: -0.03em;
  background: linear-gradient(96deg, var(--ambar) 12%, var(--alba) 48%, var(--naranja) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cabecera__nombre {
  font-size: clamp(1.05rem, 2.5vw, 1.62rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--crema);
  opacity: 0.94;
}

/* ---------- sobre mí: la firma, con halos de luz que respiran ----------
   La banda se queda con lo justo: el arroba en una chapa de cristal, el
   título firmado a mano y los datos sueltos debajo. Detrás, tres halos de
   color que flotan despacio y se desplazan un poco al mover el ratón. Nada
   parpadea de continuo: el destello del título y el trazo del subrayado se
   hacen UNA sola vez, al abrir la página. Con «prefers-reduced-motion»
   todo se queda quieto, pero se sigue viendo. */

.cabecera--sobremi {
  --px: 0;
  --py: 0;
}

.cabecera--sobremi .aurora {
  transform: translate3d(calc(var(--px) * 30px), calc(var(--py) * 22px), 0);
  transition: transform 0.6s var(--transicion);
}
/* la malla se mueve al revés que los halos: da sensación de profundidad */
.cabecera--sobremi .cabecera__malla {
  transform: translate3d(calc(var(--px) * -14px), calc(var(--py) * -10px), 0);
  transition: transform 0.7s var(--transicion);
}
.cabecera--sobremi .aurora__halo {
  position: absolute;
  width: min(52vw, 540px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-halo) 62%, transparent) 0%, transparent 68%);
  filter: blur(38px);
  opacity: 0.42;
  mix-blend-mode: screen;
  animation: haloFlota 19s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -6.2s);
}
.cabecera--sobremi .aurora__halo:nth-child(1) { top: -18%; left: -8%; }
.cabecera--sobremi .aurora__halo:nth-child(2) { top: 6%; right: -14%; left: auto; opacity: 0.3; }
.cabecera--sobremi .aurora__halo:nth-child(3) { bottom: -32%; left: 34%; opacity: 0.26; }
@keyframes haloFlota {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(4%, -5%, 0) scale(1.12); }
  100% { transform: translate3d(-5%, 4%, 0) scale(0.96); }
}

/* el arroba: en minúscula y sobre una chapa de cristal, como una firma */
.cabecera--sobremi .cabecera__eyebrow {
  font-family: var(--sans);
  font-size: clamp(0.9rem, 1.4vw, 1.02rem);
  font-weight: 650;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--alba);
  padding: 9px 18px 9px 15px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ambar) 34%, transparent);
  background: color-mix(in srgb, var(--ambar) 10%, rgba(247, 232, 210, 0.04));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px -18px color-mix(in srgb, var(--ambar) 70%, transparent);
}
.cabecera--sobremi .cabecera__eyebrow i {
  width: 8px;
  height: 8px;
  background: var(--ambar);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--ambar) 60%, transparent);
}

/* el título: un solo destello al entrar y el trazo que lo firma */
.cabecera--sobremi .cabecera__titulo {
  max-width: 20ch;
  letter-spacing: -0.028em;
  background: linear-gradient(
    100deg,
    var(--crema) 0%, var(--crema) 34%, var(--alba) 44%,
    #fffdf8 50%, var(--ambar) 57%, var(--crema) 70%, var(--crema) 100%
  );
  background-size: 260% 100%;
  background-position: 150% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  animation: destelloTitulo 2.4s var(--transicion) 0.25s 1 both;
}
@keyframes destelloTitulo {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}

.titulo-firmado { position: relative; display: inline-block; }
.firma-trazo {
  position: absolute;
  left: -1%;
  bottom: -0.2em;
  width: 104%;
  height: 0.22em;
  overflow: visible;
  color: var(--ambar);
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--ambar) 45%, transparent));
}
.firma-trazo path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: firmaSeDibuja 1.15s var(--transicion) 0.5s 1 forwards;
}
@keyframes firmaSeDibuja { to { stroke-dashoffset: 0; } }

/* los datos sueltos: en la banda oscura van en cristal, no en pixel */
.cabecera--sobremi .cabecera__datos { margin-top: clamp(26px, 4vh, 38px); }
.cabecera--sobremi .cabecera__datos li {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 550;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 9px 16px;
  border-color: rgba(247, 232, 210, 0.18);
  color: rgba(247, 232, 210, 0.86);
}

@media (prefers-reduced-motion: reduce) {
  .cabecera--sobremi .aurora,
  .cabecera--sobremi .cabecera__malla { transform: none; }
  .cabecera--sobremi .aurora__halo,
  .cabecera--sobremi .cabecera__titulo { animation: none; }
  .cabecera--sobremi .cabecera__titulo { background-position: -50% 0; }
  .firma-trazo path { animation: none; stroke-dashoffset: 0; }
}

/* ---------- cursos: el eco, en círculos que se abren ---------- */

.cabecera--ponencias .ondas { display: grid; place-items: center; }
.cabecera--ponencias .onda {
  position: absolute;
  width: min(52vw, 480px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--color-onda) 55%, transparent);
  opacity: 0;
  animation: ondaExpande 5.2s var(--transicion) infinite;
  animation-delay: var(--espera);
}
@keyframes ondaExpande {
  0% { transform: scale(0.3); opacity: 0; }
  22% { opacity: 0.62; }
  100% { transform: scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cabecera--ponencias .onda { animation: none; opacity: 0.24; }
}

/* ---------- BLOG: la cabecera del cuaderno ----------
   La misma banda de noche que abre el resto de la casa, tratada como la
   tapa de una libreta: el fondo va rayado a renglones y lleva su margen
   rojo a la izquierda, justo donde empieza el texto. Todo se lee en una
   columna alineada a la izquierda —etiqueta, título, entradilla y los dos
   datos de archivo—, sin rótulos gigantes ni neones. El movimiento vive
   solo en los tres halos del fondo, que siguen al ratón muy despacio, y
   se apaga entero con «prefers-reduced-motion». */

.cabecera--blog {
  --px: 0;
  --py: 0;
}

/* el fondo se mueve por capas: los halos hacia el ratón, la malla y los
   renglones al revés, que es lo que da la sensación de profundidad */
.cabecera--blog .aurora {
  transform: translate3d(calc(var(--px) * 28px), calc(var(--py) * 20px), 0);
  transition: transform 0.6s var(--transicion);
}
.cabecera--blog .cabecera__malla {
  transform: translate3d(calc(var(--px) * -12px), calc(var(--py) * -9px), 0);
  transition: transform 0.7s var(--transicion);
  opacity: 0.06;
}
.cabecera--blog .aurora__halo {
  position: absolute;
  width: min(54vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-halo) 58%, transparent) 0%, transparent 68%);
  filter: blur(42px);
  opacity: 0.38;
  mix-blend-mode: screen;
  animation: haloFlota 22s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -7s);
}
.cabecera--blog .aurora__halo:nth-child(1) { top: -24%; left: -12%; }
.cabecera--blog .aurora__halo:nth-child(2) { top: 2%; right: -18%; left: auto; opacity: 0.28; }
.cabecera--blog .aurora__halo:nth-child(3) { bottom: -36%; left: 46%; opacity: 0.24; }

/* la hoja: los renglones cruzan el fondo y se apagan hacia los bordes,
   y el margen cae en la misma vertical en la que arranca el texto */
.blog-hoja > i { position: absolute; display: block; }
.blog-hoja__renglones {
  inset: 0;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 37px,
    color-mix(in srgb, var(--crema) 22%, transparent) 37px 38px
  );
  opacity: 0.9;
  transform: translate3d(0, calc(var(--py) * -10px), 0);
  transition: transform 0.7s var(--transicion);
  -webkit-mask-image: radial-gradient(92% 86% at 44% 50%, #000 0%, transparent 82%);
  mask-image: radial-gradient(92% 86% at 44% 50%, #000 0%, transparent 82%);
}
.blog-hoja__margen {
  top: 12%;
  bottom: 12%;
  left: max(24px, calc(50% - var(--ancho) / 2 - 30px));
  width: 1px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--brasa) 78%, transparent) 18%, color-mix(in srgb, var(--brasa) 78%, transparent) 82%, transparent);
  box-shadow: 0 0 18px 1px color-mix(in srgb, var(--brasa) 34%, transparent);
  opacity: 0.7;
}

/* la etiqueta: la de siempre —pixel, en el color de la sección—, solo que
   aclarada un punto para que se lea sobre la noche */
.cabecera--blog .cabecera__eyebrow {
  color: color-mix(in srgb, var(--tono) 50%, var(--crema));
}
.cabecera--blog .cabecera__eyebrow i {
  background: var(--tono);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tono) 20%, transparent), 0 0 14px 2px color-mix(in srgb, var(--tono) 55%, transparent);
}

/* el título: un solo destello al entrar y un trazo corto del color de la
   sección firmándolo por debajo */
.cabecera--blog .cabecera__titulo {
  max-width: 14ch;
  text-shadow: none;
}
.blog-rotulo {
  position: relative;
  display: inline-block;
  padding-bottom: 0.1em;
  font-size: clamp(3rem, 8.4vw, 5.6rem);
  letter-spacing: -0.03em;
  background: linear-gradient(
    100deg,
    var(--crema) 0%, var(--crema) 36%, #fffdf8 48%,
    color-mix(in srgb, var(--tono) 45%, var(--crema)) 58%, var(--crema) 74%, var(--crema) 100%
  );
  background-size: 260% 100%;
  background-position: 150% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: destelloTitulo 2.4s var(--transicion) 0.25s 1 both;
}
.blog-rotulo::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tono), var(--lima) 70%, transparent);
  transform-origin: left center;
  animation: reglaSeAbre 0.9s var(--transicion) 0.5s 1 both;
}
@keyframes reglaSeAbre {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

.cabecera--blog .cabecera__texto { max-width: 56ch; }

/* si en el editor se escriben datos sueltos, en la banda oscura van en
   cristal, no en pixel */
.cabecera--blog .cabecera__datos { margin-top: clamp(24px, 3.6vh, 34px); }
.cabecera--blog .cabecera__datos li {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 550;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 9px 16px;
  border-color: rgba(247, 232, 210, 0.18);
  color: rgba(247, 232, 210, 0.86);
}

/* el margen solo se pinta cuando queda sitio a la izquierda del texto:
   si la ventana se estrecha, se le echaría encima */
@media (max-width: 1220px) {
  .blog-hoja > .blog-hoja__margen { display: none; }
}

/* en el móvil la banda se recoge */
@media (max-width: 700px) {
  .cabecera--blog .cabecera__titulo { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cabecera--blog .aurora,
  .cabecera--blog .cabecera__malla,
  .blog-hoja__renglones { transform: none; }
  .cabecera--blog .aurora__halo,
  .blog-rotulo,
  .blog-rotulo::after { animation: none; }
  .blog-rotulo { background-position: -50% 0; }
}

/* ============================================================
   LOS SEPARADORES DEL ARCHIVADOR
   Justo debajo de la banda de entrada, las secciones de la web
   asoman como las pestañas de colores de un archivador. Cada una
   lleva su icono y su color de siempre —los mismos que la sección
   a la que abre— y se encaja por debajo en la ficha de la casa,
   que es papel rayado con el canto de colores arriba y, en grande,
   la cita de Machado. Al señalar una pestaña, la ficha se tiñe de
   su color y al pie cuenta qué hay dentro de esa sección.
   ============================================================ */

.mod-archivador { padding-top: clamp(48px, 7vh, 84px); }

.archivador { --acento: var(--ambar); position: relative; }

/* la fila de pestañas: van sangradas para que la primera no arranque
   pegada al canto de la ficha, y se meten 15 px por debajo de ella */
.archivador__pestanas ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: clamp(6px, 1vw, 12px);
  row-gap: 24px;
  padding-left: clamp(12px, 3.4vw, 48px);
}
.archivador__pestanas li { display: flex; }

/* Cada pestaña se pinta entera de su color. La letra va en crema o en
   tinta según lo claro que sea ese color —lo decide el guion midiendo su
   luminancia—, así que se puede cambiar cualquier color en el editor sin
   que la pestaña deje de leerse. */
.pestana {
  --letra: var(--blanco);
  --velo: color-mix(in srgb, var(--letra) 18%, transparent);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px clamp(15px, 1.9vw, 24px) 28px;
  margin-bottom: -15px;
  border-radius: 17px 17px 5px 5px;
  background: var(--acento);
  color: var(--letra);
  text-decoration: none;
  font-size: clamp(13px, 1.15vw, 15px);
  font-weight: 700;
  letter-spacing: 0.004em;
  line-height: 1.2;
  overflow: hidden;
  transition: transform 0.38s var(--transicion), box-shadow 0.38s;
  box-shadow: 0 -6px 20px -12px color-mix(in srgb, var(--acento) 85%, transparent);
}
.pestana--letra-oscura { --letra: var(--tinta); }

/* el relieve del cartón: una luz por arriba y una sombra hacia el pliegue */
.pestana::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(92% 74% at 20% 0%, color-mix(in srgb, var(--letra) 28%, transparent) 0%, transparent 66%),
    linear-gradient(180deg, transparent 42%, color-mix(in srgb, var(--noche) 26%, transparent) 100%);
}
.pestana:hover,
.pestana:focus-visible {
  transform: translateY(-7px);
  box-shadow: 0 -12px 26px -12px color-mix(in srgb, var(--acento) 92%, transparent);
}

.pestana__icono {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--velo);
  transition: transform 0.4s var(--transicion), background-color 0.3s;
}
.pestana__icono svg { width: 18px; height: 18px; }
.pestana:hover .pestana__icono {
  transform: rotate(-7deg) scale(1.06);
  background: color-mix(in srgb, var(--letra) 28%, transparent);
}

/* ---------- la ficha ----------
   Un pliego de papel con dos hojas asomando por debajo (las sombras sin
   desenfoque del box-shadow), de manera que se lea como una carpeta y no
   como una tarjeta suelta. */
.archivador__ficha {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(52px, 7vw, 96px) clamp(26px, 5.4vw, 78px) clamp(24px, 3vw, 34px);
  border-radius: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--c-borde);
  background: linear-gradient(166deg, var(--blanco) 0%, var(--papel) 52%, var(--papel-2) 100%);
  box-shadow:
    0 11px 0 -3px var(--papel-2),
    0 12px 0 -3px var(--c-borde),
    0 24px 0 -9px var(--papel-2),
    0 25px 0 -9px var(--c-borde),
    0 44px 74px -50px rgba(42, 22, 31, 0.7);
}

/* el canto de la carpeta: el espectro de la casa, el mismo que cierra la
   banda de entrada, y sobre el que se apoyan las pestañas */
.archivador__canto {
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--brasa) 0%,
    var(--naranja) 18%,
    var(--ambar) 34%,
    var(--lima) 50%,
    var(--turquesa) 66%,
    var(--azul) 82%,
    var(--fucsia) 100%
  );
}

/* la luz del color de la pestaña señalada, entrando por arriba */
.archivador__brillo {
  position: absolute;
  inset: -34% -12% auto -12%;
  z-index: -1;
  height: 86%;
  background: radial-gradient(58% 66% at 50% 0%, color-mix(in srgb, var(--acento) 46%, transparent) 0%, transparent 72%);
  opacity: 0.4;
  filter: blur(6px);
  transition: opacity 0.55s var(--transicion);
}
.archivador--tocado .archivador__brillo { opacity: 0.9; }

/* los renglones del papel, apagándose hacia los bordes */
.archivador__renglones {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 37px,
    color-mix(in srgb, var(--tinta) 9%, transparent) 37px 38px
  );
  -webkit-mask-image: radial-gradient(84% 78% at 50% 46%, #000 0%, transparent 84%);
  mask-image: radial-gradient(84% 78% at 50% 46%, #000 0%, transparent 84%);
  opacity: 0.6;
}

/* ---------- la cita de la casa ---------- */

.cita-casa { position: relative; z-index: 0; }

/* la comilla de apertura, enorme y del color de la pestaña señalada */
.cita-casa__comilla {
  position: absolute;
  top: -0.22em;
  left: -0.07em;
  z-index: -1;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(9rem, 21vw, 17rem);
  line-height: 0.78;
  color: color-mix(in srgb, var(--acento) 24%, transparent);
  pointer-events: none;
  user-select: none;
  transition: color 0.55s var(--transicion);
}
.archivador--tocado .cita-casa__comilla { color: color-mix(in srgb, var(--acento) 34%, transparent); }

.cita-casa__texto {
  font-family: var(--serif);
  font-weight: 560;
  font-size: clamp(2.5rem, 7.4vw, 6.1rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 18ch;
  text-wrap: balance;
}
/* la palabra en cursiva de la cita se lleva la luz: el espectro de la casa
   recorriéndola muy despacio */
.cita-casa__texto em {
  font-style: italic;
  background: linear-gradient(
    100deg,
    var(--brasa) 0%,
    var(--naranja) 16%,
    var(--ambar) 34%,
    var(--fucsia) 62%,
    var(--azul) 82%,
    var(--brasa) 100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: citaEnLuz 18s ease-in-out infinite alternate;
}
@keyframes citaEnLuz {
  from { background-position: 0% 0; }
  to { background-position: 100% 0; }
}

.cita-casa__firma {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(24px, 3.4vw, 38px);
}
.cita-casa__regla {
  width: clamp(38px, 7vw, 86px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--acento), transparent);
  transition: background 0.55s var(--transicion);
}
.cita-casa__firma cite {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
}

/* El pie de la ficha: cuenta qué hay detrás de la pestaña señalada. Si no
   hay ninguna señalada se apaga entero —regla incluida—, pero sigue
   ocupando su sitio para que la ficha no dé un brinco al encenderse. */
.archivador__pie {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(34px, 5.4vw, 60px);
  padding-top: 16px;
  border-top: 1px solid var(--c-borde);
  transition: opacity 0.4s var(--transicion);
}
.archivador__pie--callado { opacity: 0; }
.archivador__punto {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 20%, transparent);
  transition: background-color 0.4s, box-shadow 0.4s;
}
.archivador__glosa {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--c-texto-suave);
  min-height: 1.55em;
}

/* en pantallas estrechas las pestañas se reparten de dos en dos, todas del
   mismo ancho, y la última fila es la que se encaja en la ficha */
@media (max-width: 620px) {
  .archivador__pestanas ul { padding-left: 0; column-gap: 8px; row-gap: 21px; }
  .archivador__pestanas li { flex: 1 1 calc(50% - 8px); }
  .pestana { width: 100%; padding-left: 14px; padding-right: 14px; }
  .cita-casa__texto { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cita-casa__texto em { animation: none; background-position: 40% 0; }
  .pestana:hover, .pestana:focus-visible { transform: none; }
}

/* ============================================================
   LA PILA DE FOTOS: el motor es el mismo en los tres sitios donde
   aparece (blog, ponencias y sobre mí); solo cambia el marco.
   ============================================================ */

.b-pila__stack, .pila-lado__stack, .pila-ponencia__stack {
  position: relative;
  display: grid;
  gap: 12px;
}
/* mientras el guion no arranca, las fotos se ven en columna: así están
   todas a la vista aunque JavaScript no llegue */
.b-pila__stack.encendida,
.pila-lado__stack.encendida,
.pila-ponencia__stack.encendida {
  display: block;
  cursor: pointer;
}
.b-pila__stack--auto, .pila-lado__stack--auto, .pila-ponencia__stack--auto { aspect-ratio: 4 / 3; }

.b-pila__carta, .pila-lado__carta, .pila-ponencia__carta {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 6px solid var(--blanco);
  background: var(--blanco);
  box-shadow: 0 18px 40px -22px rgba(42, 22, 31, 0.6);
}
.encendida > .b-pila__carta,
.encendida > .pila-lado__carta,
.encendida > .pila-ponencia__carta {
  position: absolute;
  inset: 0;
  transition: transform 0.45s var(--transicion), opacity 0.3s;
}
.b-pila__carta img, .pila-lado__carta img, .pila-ponencia__carta img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--papel-2);
}
.encendida > .b-pila__carta.saliendo,
.encendida > .pila-lado__carta.saliendo,
.encendida > .pila-ponencia__carta.saliendo {
  transform: translateX(46%) rotate(13deg) scale(0.94) !important;
  opacity: 0;
}

/* el contador de la esquina: por qué foto vas */
.b-pila__contador, .pila-lado__contador, .pila-ponencia__contador {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 20;
  padding: 5px 10px 4px;
  border-radius: 999px;
  background: rgba(18, 12, 19, 0.72);
  color: var(--crema);
  font-family: var(--pixel);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

.b-pila__pie, .pila-lado__pie, .pila-ponencia__pie {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-texto-suave);
  text-align: center;
}
.b-pila__pista, .pila-lado__pista, .pila-ponencia__pista {
  margin-top: 4px;
  font-family: var(--pixel);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
  opacity: 0.7;
  text-align: center;
}

.b-pila { display: grid; justify-items: center; }
.b-pila__caja { width: min(100%, 460px); }

/* ============================================================
   SOBRE MÍ: el extracto del currículo, con la pila al lado
   ============================================================ */

.cv-marco {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(30px, 5vw, 68px);
  align-items: start;
}
@media (max-width: 900px) { .cv-marco { grid-template-columns: 1fr; } }

/* debajo de la banda de noche, el cuerpo no necesita hueco para la
   navegación: empieza en cuanto acaba la cabecera */
.mod-cv { padding-top: clamp(52px, 8vh, 92px); }

/* el extracto va dentro de una tarjeta sin título: una hoja de papel con
   filo de color arriba, el marbete y el botón de copiar en su barra, y
   debajo el texto. Se apoya en dos sombras —una corta y otra larga— para
   que parezca posada sobre la página y no pegada a ella. */
.cv-tarjeta {
  position: relative;
  padding: clamp(24px, 3vw, 40px) clamp(24px, 3.2vw, 44px) clamp(28px, 3.4vw, 46px);
  border-radius: 26px;
  border: 1px solid var(--c-borde);
  background:
    radial-gradient(130% 100% at 0% 0%, color-mix(in srgb, var(--ambar) 13%, transparent) 0%, transparent 55%),
    radial-gradient(110% 80% at 100% 100%, color-mix(in srgb, var(--fucsia) 7%, transparent) 0%, transparent 60%),
    var(--blanco);
  box-shadow:
    0 2px 3px -2px rgba(42, 22, 31, 0.16),
    0 30px 60px -42px rgba(42, 22, 31, 0.55);
  overflow: hidden;
}
/* el filo: un hilo de los cuatro colores de la casa cruzando el borde de
   arriba, que es lo único que la tarjeta necesita para tener carácter */
.cv-tarjeta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ambar), var(--naranja) 34%, var(--fucsia) 68%, var(--turquesa));
  opacity: 0.9;
}
body.tema-oscuro .cv-tarjeta {
  background:
    radial-gradient(130% 100% at 0% 0%, color-mix(in srgb, var(--ambar) 10%, transparent) 0%, transparent 55%),
    var(--noche-2);
  box-shadow: 0 30px 60px -46px rgba(0, 0, 0, 0.9);
}

/* la barra de arriba: rótulo a la izquierda, copiar a la derecha */
.cv-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: clamp(18px, 2.2vw, 24px);
  margin-bottom: clamp(22px, 2.6vw, 30px);
  border-bottom: 1px solid var(--c-borde);
}
.cv-marbete {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
}
.cv-marbete i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ambar);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ambar) 20%, transparent);
}

.cv-copiar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--c-borde);
  background: color-mix(in srgb, var(--c-fondo) 70%, transparent);
  color: var(--c-texto-suave);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.25s var(--transicion);
}
.cv-copiar:hover {
  transform: translateY(-2px);
  background: var(--ambar);
  border-color: var(--ambar);
  color: var(--noche);
}
.cv-copiar.copiado { background: var(--turquesa); border-color: var(--turquesa); color: #fff; }
.cv-copiar svg { width: 14px; height: 14px; }

.cv-resumen { max-width: 62ch; }
.cv-intro {
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--c-texto-suave);
  margin-bottom: 15px;
}
/* la entradilla: el primer párrafo entra en serif, algo mayor y en tinta
   plena, y arrastra un filete de ámbar en el margen */
.cv-intro--entradilla {
  position: relative;
  padding-left: 20px;
  font-family: var(--serif);
  font-weight: 470;
  font-size: clamp(1.1rem, 1.55vw, 1.24rem);
  line-height: 1.5;
  color: var(--c-texto);
  margin-bottom: 22px;
}
.cv-intro--entradilla::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  bottom: 0.2em;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ambar), color-mix(in srgb, var(--fucsia) 70%, transparent));
}
@media (max-width: 560px) { .cv-intro--entradilla { padding-left: 15px; } }

.cv-tarjeta .cv-intro:last-child { margin-bottom: 0; }

.cv-apartado { margin-top: clamp(30px, 3.6vw, 40px); }
.cv-apartado:first-child { margin-top: 0; }
/* el título del apartado lleva su punto de color y una línea fina que se
   estira hasta el borde: separa sin llegar a cortar la tarjeta */
.cv-apartado__titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento, var(--brasa));
  margin-bottom: 20px;
}
.cv-apartado__titulo::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento, var(--brasa)) 18%, transparent);
}
.cv-apartado__titulo::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  margin-left: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--acento, var(--brasa)) 32%, transparent), transparent);
}
.cv-lineas { list-style: none; display: grid; gap: 16px; }
/* un apartado sin años (los datos de «ahora mismo») no gasta la columna:
   cada dato se convierte en una ficha con el color del apartado */
.cv-lineas.sin-anos { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.cv-lineas.sin-anos .cv-linea {
  grid-template-columns: 1fr;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--acento, var(--brasa)) 24%, transparent);
  background: color-mix(in srgb, var(--acento, var(--brasa)) 7%, transparent);
}
.cv-linea {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
}
@media (max-width: 560px) { .cv-linea { grid-template-columns: 1fr; gap: 3px; } }
.cv-linea__ano {
  font-family: var(--pixel);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
  padding-top: 3px;
}
.cv-linea__cuerpo { display: grid; gap: 3px; min-width: 0; }
.cv-linea__cuerpo strong {
  font-family: var(--serif);
  font-weight: 555;
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--c-texto);
}
.cv-linea__detalle { font-size: 14.5px; line-height: 1.58; color: var(--c-texto-suave); }

.cv-descarga { margin-top: 32px; }

.cv-fotos { position: sticky; top: 96px; }
@media (max-width: 900px) { .cv-fotos { position: static; } }
.cv-fotos .sin-foto {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 46px 28px;
  border: 1px dashed var(--c-borde);
  border-radius: 20px;
  text-align: center;
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-texto-suave);
}
.cv-fotos .sin-foto svg { width: 30px; height: 30px; color: var(--ambar); }

.pila-lado__stack--auto { aspect-ratio: 3 / 4; }
.pila-lado__carta { border-width: 10px; border-radius: 10px; }
.pila-lado__carta img { object-fit: cover; }

/* ============================================================
   PONENCIAS: el muro de tarjetas
   ============================================================ */

/* el muro: columnas de verdad, como un tablero de Pinterest. Cada tarjeta
   ocupa lo que necesita y el muro las encaja unas debajo de otras. */
.muro-ponencias {
  columns: 3;
  column-gap: clamp(16px, 2.2vw, 28px);
}
@media (max-width: 1000px) { .muro-ponencias { columns: 2; } }
@media (max-width: 640px) { .muro-ponencias { columns: 1; } }

.tarjeta-ponencia {
  position: relative;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 clamp(16px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--acento) 26%, var(--c-borde));
  background:
    linear-gradient(178deg, color-mix(in srgb, var(--acento) 9%, transparent) 0%, transparent 42%),
    var(--blanco);
  overflow: hidden;
  transition: transform 0.4s var(--transicion), box-shadow 0.4s, border-color 0.3s;
  box-shadow: 0 14px 34px -24px rgba(42, 22, 31, 0.4);
}
/* el filo de color que remata la tarjeta por arriba */
.tarjeta-ponencia::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--acento);
  z-index: 2;
}
.tarjeta-ponencia:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--acento) 62%, transparent);
  box-shadow: 0 30px 56px -26px color-mix(in srgb, var(--acento) 42%, rgba(42, 22, 31, 0.5));
}

/* la pila va a sangre dentro de la tarjeta, con marco horizontal fijo para
   que el muro no baile de alto según la foto que toque */
.tarjeta-ponencia .pila-ponencia__caja { margin: 0; }
.pila-ponencia__stack { gap: 0; }
.pila-ponencia__carta { border: 0; border-radius: 0; box-shadow: none; background: var(--papel-2); }
.pila-ponencia__carta img { object-fit: cover; }
.encendida > .pila-ponencia__carta { border-radius: 0; }
.pila-ponencia__pie {
  margin: 0;
  padding: 10px 20px 0;
  text-align: left;
  font-size: 12.5px;
}
.pila-ponencia__pista {
  margin: 4px 0 0;
  padding: 0 20px;
  text-align: left;
}
.pila-ponencia__contador { right: 10px; bottom: 10px; }

.tarjeta-ponencia__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: clamp(20px, 2.4vw, 26px);
}
/* la píldora de color dice QUÉ fue (curso, taller, mesa redonda…) y la fecha
   la acompaña al lado, en gris, sin robarle el color */
.tarjeta-ponencia__marca {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}
.tarjeta-ponencia__tipo {
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blanco);
  padding: 6px 12px 5px;
  border-radius: 999px;
  border: 0;
  background: var(--acento);
}
.tarjeta-ponencia--letra-oscura .tarjeta-ponencia__tipo { color: var(--tinta); }
.tarjeta-ponencia__cuando {
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
}

/* la leyenda del código de color, bajo el título del muro */
.leyenda-modalidades {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.leyenda-modalidades__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
}
.leyenda-modalidades__item i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--acento);
}
.tarjeta-ponencia__titulo {
  font-family: var(--serif);
  font-weight: 555;
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  line-height: 1.18;
}
.tarjeta-ponencia__donde { font-size: 13px; line-height: 1.5; color: var(--c-texto-suave); }
.tarjeta-ponencia__donde strong { color: var(--c-texto); font-weight: 650; }
.tarjeta-ponencia__texto { font-size: 14px; line-height: 1.62; color: var(--c-texto-suave); }
.tarjeta-ponencia__enlace {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 650;
  color: var(--c-acento-interactivo);
  text-decoration: none;
}
.tarjeta-ponencia__enlace svg { width: 14px; height: 14px; transition: transform 0.3s var(--transicion); }
.tarjeta-ponencia__enlace:hover svg { transform: translate(2px, -2px); }

/* ---------- tema oscuro ---------- */

body.tema-oscuro .tarjeta-ponencia { background: var(--noche-2); }
body.tema-oscuro .b-pila__carta,
body.tema-oscuro .pila-lado__carta { border-color: var(--noche-2); background: var(--noche-2); }

/* ============================================================
   EL BLOG
   El índice (portada de rótulo, buscador, tira de etiquetas y muro
   de tarjetas al estilo Pinterest), la entrada abierta (progreso,
   índice, cierre y relacionadas) y los veintitantos bloques que
   puede llevar dentro el cuerpo.
   ============================================================ */

/* la lista arranca en cuanto acaba la banda de noche */
.blog-lista { padding-top: clamp(46px, 7vh, 80px); }
.mod-ponencias { padding-top: clamp(60px, 9vh, 104px); }

/* ---------- meta y etiquetas, compartidas por tarjetas y entrada ---------- */

.meta-nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 7px;
  font-family: var(--pixel);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
}
.meta-nota .meta-dato + .meta-dato::before { content: "·"; margin-right: 7px; }
.meta-nota.claro { color: rgba(247, 232, 210, 0.72); }

.etiquetas-nota {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
}
.etiquetas-nota li {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--c-borde);
  color: var(--c-texto-suave);
}
.etiquetas-nota.claras li {
  border-color: rgba(247, 232, 210, 0.3);
  color: rgba(247, 232, 210, 0.86);
  background: rgba(247, 232, 210, 0.07);
}

/* ---------- la barra de archivo: buscador, recuento y etiquetas ---------- */

.blog-barra { margin-bottom: clamp(24px, 4vh, 40px); }

.blog-barra__fila {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.blog-buscar {
  flex: 1 1 280px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border: 1px solid var(--c-borde);
  border-radius: 999px;
  background: var(--blanco);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.blog-buscar:focus-within { border-color: var(--turquesa); box-shadow: 0 0 0 3px color-mix(in srgb, var(--turquesa) 16%, transparent); }
.blog-buscar svg { width: 17px; height: 17px; flex: none; color: var(--c-texto-suave); }
.blog-buscar input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--c-texto);
  outline: none;
}
.blog-buscar input::-webkit-search-cancel-button { display: none; }
.blog-buscar__x {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--papel-2);
  color: var(--c-texto-suave);
  cursor: pointer;
}
.blog-buscar__x:hover { background: var(--brasa); color: #fff; }
.blog-buscar__x svg { width: 12px; height: 12px; color: inherit; }

.blog-barra__recuento {
  font-family: var(--pixel);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
  white-space: nowrap;
}

/* la tira de etiquetas: una sola línea que se desliza, no cuatro filas */
.blog-tira {
  position: relative;
  margin: 0 -24px;
  padding: 0 24px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.blog-tira__pista {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.blog-tira__pista::-webkit-scrollbar { display: none; }

.blog-tag {
  flex: none;
  font-family: var(--pixel);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px 7px;
  border-radius: 999px;
  border: 1px solid var(--c-borde);
  background: transparent;
  color: var(--c-texto-suave);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
}
.blog-tag:hover { border-color: var(--turquesa); color: var(--turquesa-osc); }
.blog-tag.activa { border-color: var(--turquesa-osc); background: var(--turquesa-osc); color: #fff; }

/* ---------- EL MURO: tarjetas al estilo Pinterest ----------
   Columnas de verdad, no una rejilla de filas: cada tarjeta ocupa el alto
   que le pide su foto y su texto, y las columnas se van rellenando solas.
   Todas las entradas tienen el mismo rango: ninguna es la portada. */

.blog-muro {
  columns: 3;
  column-gap: clamp(16px, 2vw, 26px);
}
@media (max-width: 980px) { .blog-muro { columns: 2; } }
@media (max-width: 600px) { .blog-muro { columns: 1; } }

.blog-pin {
  position: relative;
  display: block;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 clamp(16px, 2vw, 26px);
}
.blog-pin[hidden] { display: none; }

.blog-pin__caja {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--acento, var(--ambar)) 26%, var(--c-borde));
  border-radius: 18px;
  background:
    linear-gradient(178deg, color-mix(in srgb, var(--acento, var(--ambar)) 9%, transparent) 0%, transparent 42%),
    var(--blanco);
  box-shadow: 0 12px 30px -22px rgba(42, 22, 31, 0.42);
  transition: transform 0.42s var(--transicion), box-shadow 0.42s, border-color 0.3s;
}
.blog-pin:hover .blog-pin__caja,
.blog-pin:focus-within .blog-pin__caja {
  transform: translateY(-7px);
  border-color: color-mix(in srgb, var(--acento, var(--ambar)) 62%, transparent);
  box-shadow: 0 32px 60px -28px color-mix(in srgb, var(--acento, var(--ambar)) 42%, rgba(42, 22, 31, 0.52));
}

/* el filo de color que remata la tarjeta por arriba, igual que en ponencias */
.blog-pin__caja::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  height: 4px;
  background: var(--acento, var(--ambar));
}

/* la foto manda el alto: se muestra entera, con su proporción natural */
.blog-pin__media {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--papel-2);
}
.blog-pin__foto { display: block; }
.blog-pin__foto img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s var(--transicion);
}
.blog-pin:hover .blog-pin__foto img { transform: scale(1.045); }
.blog-pin__foto.sin-foto {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: linear-gradient(140deg, var(--papel-2), var(--crema));
  color: var(--acento, var(--ambar));
}
.blog-pin__foto.sin-foto svg { width: 46px; height: 46px; opacity: 0.6; }

/* el velo con el «Leer»: solo asoma al pasar por encima */
.blog-pin__velo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 12px;
  background: linear-gradient(200deg, transparent 40%, rgba(18, 12, 19, 0.55));
  opacity: 0;
  transition: opacity 0.35s var(--transicion);
}
.blog-pin:hover .blog-pin__velo,
.blog-pin:focus-within .blog-pin__velo { opacity: 1; }
.blog-pin__leer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--noche);
  background: var(--crema);
  box-shadow: 0 10px 24px -12px rgba(18, 12, 19, 0.7);
  transform: translateY(8px);
  transition: transform 0.35s var(--transicion);
}
.blog-pin:hover .blog-pin__leer,
.blog-pin:focus-within .blog-pin__leer { transform: translateY(0); }
.blog-pin__leer svg { width: 14px; height: 14px; }

.blog-pin__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(16px, 1.9vw, 22px);
}
.blog-pin__titulo {
  font-family: var(--serif);
  font-weight: 555;
  font-size: clamp(1.16rem, 1.6vw, 1.4rem);
  line-height: 1.18;
  letter-spacing: -0.012em;
}
.blog-pin__titulo a { color: inherit; text-decoration: none; }
/* el enlace del título cubre la tarjeta entera: se pincha donde sea */
.blog-pin__titulo a::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.blog-pin:hover .blog-pin__titulo a { color: color-mix(in srgb, var(--acento, var(--ambar)) 78%, var(--c-texto)); }
.blog-pin__resumen {
  font-size: 14px;
  line-height: 1.58;
  color: var(--c-texto-suave);
}
.blog-pin__cuerpo .meta-nota { margin-top: 2px; }
.blog-pin .etiquetas-nota { gap: 6px; }
.blog-pin .etiquetas-nota li { font-size: 10.5px; padding: 4px 10px; }

.blog-mas-caja { display: flex; justify-content: center; margin-top: clamp(26px, 4vh, 44px); }
.blog-mas-caja[hidden] { display: none; }

.blog-vacio {
  border: 1px dashed var(--c-borde);
  border-radius: 18px;
  padding: 44px 24px;
  text-align: center;
  color: var(--c-texto-suave);
  margin-top: 20px;
}
.blog-vacio[hidden] { display: none; }
.blog-vacio__reset {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 650;
  color: var(--brasa);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   UNA ENTRADA ABIERTA
   ============================================================ */

.entrada { position: relative; }

.entrada-progreso {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 70;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.entrada-progreso i {
  display: block;
  height: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--brasa), var(--ambar));
}

/* ---------- la portada de la entrada ---------- */

.entrada-portada {
  position: relative;
  padding: clamp(120px, 16vh, 180px) 24px clamp(34px, 5vh, 56px);
  overflow: hidden;
}
.entrada-portada.con-foto {
  min-height: min(78vh, 640px);
  display: flex;
  align-items: flex-end;
  border-bottom-left-radius: clamp(22px, 3.4vw, 42px);
  border-bottom-right-radius: clamp(22px, 3.4vw, 42px);
}
/* la misma línea de espectro que cierra las demás cabeceras */
.entrada-portada.con-foto::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--brasa) 0%,
    var(--naranja) 18%,
    var(--ambar) 34%,
    var(--lima) 50%,
    var(--turquesa) 66%,
    var(--azul) 82%,
    var(--fucsia) 100%
  );
}

.entrada-portada__media { position: absolute; inset: 0; }
.entrada-portada__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* la foto se apaga un poco: manda el titular, no la ilustración */
  filter: saturate(0.86) brightness(0.82);
}
.entrada-portada__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(18, 12, 19, 0.62) 0%, rgba(18, 12, 19, 0.12) 62%, transparent 100%),
    linear-gradient(180deg, rgba(18, 12, 19, 0.7) 0%, rgba(18, 12, 19, 0.3) 26%, rgba(18, 12, 19, 0.88) 74%, rgba(18, 12, 19, 0.97) 100%);
}

.entrada-portada__copy {
  position: relative;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  gap: 15px;
  justify-items: start;
}
.entrada-portada.con-foto .entrada-portada__copy { color: var(--crema); }

.entrada-portada__titulo {
  font-family: var(--serif);
  font-weight: 555;
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.entrada-resumen {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.5;
  color: var(--c-texto-suave);
  max-width: 56ch;
}
.entrada-portada.con-foto .entrada-resumen { color: rgba(247, 232, 210, 0.84); }

.volver-blog {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--pixel);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px 7px;
  border-radius: 999px;
  border: 1px solid var(--c-borde);
  color: var(--c-texto-suave);
  text-decoration: none;
  transition: border-color 0.25s, color 0.25s, background-color 0.25s;
}
.volver-blog:hover { border-color: var(--brasa); color: var(--brasa); }
.volver-blog svg { width: 13px; height: 13px; }
.entrada-portada.con-foto .volver-blog {
  border-color: rgba(247, 232, 210, 0.32);
  color: rgba(247, 232, 210, 0.9);
  background: rgba(18, 12, 19, 0.32);
  backdrop-filter: blur(6px);
}
.entrada-portada.con-foto .volver-blog:hover { border-color: var(--ambar); color: var(--ambar); }

/* la de después del texto vuelve a ser un enlace suelto y centrado */
.entrada > .volver-blog { display: flex; width: max-content; margin: 40px auto clamp(70px, 10vh, 120px); }

/* ---------- índice de la entrada ---------- */

.entrada-indice {
  position: sticky;
  top: 74px;
  z-index: 20;
  max-width: 780px;
  margin: 22px auto -6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 13px 20px;
  border: 1px solid var(--c-borde);
  border-radius: 16px;
  background: color-mix(in srgb, var(--c-fondo) 88%, transparent);
  backdrop-filter: blur(10px);
}
@media (max-width: 860px) { .entrada-indice { margin-inline: 24px; } }
.entrada-indice__rotulo {
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brasa);
}
.entrada-indice a {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-texto-suave);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}
.entrada-indice a:hover { color: var(--c-texto); }
.entrada-indice a.activo { color: var(--brasa); border-color: var(--brasa); }

/* ---------- el cuerpo ---------- */

.entrada-cuerpo {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(34px, 5vh, 54px) 24px 0;
  display: grid;
  gap: 1.35em;
  font-size: 1.09rem;
  line-height: 1.75;
  color: color-mix(in srgb, var(--c-texto) 92%, transparent);
}
.entrada-cuerpo > .b-parrafo:first-child::first-letter {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 3.4em;
  float: left;
  line-height: 0.82;
  padding: 4px 10px 0 0;
  color: var(--brasa);
}
.entrada-cuerpo a {
  color: var(--c-acento-interactivo);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--c-acento-interactivo) 40%, transparent);
  text-underline-offset: 3px;
}
.entrada-cuerpo a:hover { text-decoration-color: var(--c-acento-interactivo); }

/* ============================================================
   LOS BLOQUES DEL CUERPO
   ============================================================ */

/* --- texto --- */

.b-titulo {
  font-family: var(--serif);
  font-weight: 555;
  font-size: clamp(1.5rem, 3.1vw, 1.95rem);
  line-height: 1.15;
  margin-top: 0.7em;
  padding-top: 0.7em;
  border-top: 1px solid var(--c-borde);
  scroll-margin-top: 130px;
}
.b-subtitulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  line-height: 1.25;
  margin-top: 0.4em;
  color: var(--c-texto);
}

.b-cita {
  position: relative;
  margin: 0.4em 0;
  padding: 6px 0 6px 30px;
  border-left: 3px solid var(--ambar);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 480;
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--c-texto);
}
.b-cita footer {
  margin-top: 10px;
  font-family: var(--pixel);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
}

.b-lista { padding-left: 24px; display: grid; gap: 0.55em; }
.b-lista li::marker { color: var(--brasa); font-weight: 700; }

/* --- el título suelto que encabeza varios bloques --- */

.b-bloque__titulo {
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brasa);
  margin-bottom: 14px;
}

/* --- aviso: la caja de color --- */

.b-aviso {
  --tono: var(--ambar);
  display: flex;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--tono) 38%, transparent);
  background: color-mix(in srgb, var(--tono) 9%, var(--c-fondo));
  font-size: 1rem;
  line-height: 1.68;
}
.b-aviso--idea { --tono: var(--ambar); }
.b-aviso--consejo { --tono: var(--turquesa); }
.b-aviso--atencion { --tono: var(--naranja); }
.b-aviso--clave { --tono: var(--brasa); }

.b-aviso__marca {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--tono);
  color: var(--noche);
  font-family: var(--pixel);
  font-size: 14px;
  line-height: 1;
}
.b-aviso--clave .b-aviso__marca, .b-aviso--atencion .b-aviso__marca { color: #fff; }
.b-aviso__cuerpo { display: grid; gap: 0.5em; min-width: 0; }
.b-aviso__titulo {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  color: color-mix(in srgb, var(--tono) 62%, var(--c-texto));
}

/* --- plegable --- */

.b-plegable {
  border: 1px solid var(--c-borde);
  border-radius: 16px;
  background: var(--blanco);
  overflow: hidden;
}
.b-plegable > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 50px 16px 22px;
  position: relative;
  font-family: var(--sans);
  font-weight: 650;
  font-size: 1rem;
  color: var(--c-texto);
}
.b-plegable > summary::-webkit-details-marker { display: none; }
.b-plegable > summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--brasa);
  border-bottom: 2px solid var(--brasa);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s var(--transicion);
}
.b-plegable[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.b-plegable > summary:hover { background: var(--papel-2); }
.b-plegable__cuerpo {
  display: grid;
  gap: 0.8em;
  padding: 2px 22px 20px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-texto-suave);
}

/* --- pasos --- */

.b-pasos {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--c-borde);
  border-radius: 20px;
  background: var(--blanco);
}
.b-pasos__lista { list-style: none; counter-reset: paso; display: grid; gap: 20px; }
.b-pasos__paso {
  counter-increment: paso;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.b-pasos__paso::before {
  content: counter(paso, decimal-leading-zero);
  flex: none;
  font-family: var(--pixel);
  font-size: 26px;
  line-height: 1;
  color: color-mix(in srgb, var(--brasa) 36%, transparent);
}
.b-pasos__texto { display: grid; gap: 4px; min-width: 0; }
.b-pasos__t { font-family: var(--sans); font-weight: 700; font-size: 1.02rem; color: var(--c-texto); }
.b-pasos__d { font-size: 0.95rem; line-height: 1.6; color: var(--c-texto-suave); }

/* --- llamada a la acción --- */

.b-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: clamp(24px, 3.4vw, 36px);
  border-radius: 22px;
  background: linear-gradient(140deg, var(--plum), var(--noche));
  color: var(--crema);
  box-shadow: 0 26px 58px -32px rgba(18, 12, 19, 0.7);
}
.b-cta__texto { display: grid; gap: 6px; min-width: 0; flex: 1 1 260px; }
.b-cta__titulo { font-family: var(--serif); font-weight: 555; font-size: clamp(1.25rem, 2.4vw, 1.65rem); line-height: 1.2; }
.b-cta__sub { font-size: 0.95rem; line-height: 1.6; color: rgba(247, 232, 210, 0.76); }
.b-cta__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--ambar);
  color: var(--noche);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.3s var(--transicion);
}
.b-cta__btn:hover { background: var(--crema); transform: translateY(-2px); }
.b-cta__btn svg { width: 16px; height: 16px; }
.entrada-cuerpo .b-cta__btn { text-decoration: none; }

/* --- comparativa --- */

.b-comp__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .b-comp__cols { grid-template-columns: 1fr; } }
.b-comp__col {
  --tono: var(--tinta-2);
  padding: 22px 24px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--tono) 30%, transparent);
  background: color-mix(in srgb, var(--tono) 6%, var(--c-fondo));
}
.b-comp__col--a { --tono: var(--brasa); }
.b-comp__col--b { --tono: var(--turquesa); }
.b-comp__t {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  color: color-mix(in srgb, var(--tono) 66%, var(--c-texto));
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--tono) 24%, transparent);
}
.b-comp__lista { list-style: none; display: grid; gap: 9px; font-size: 0.96rem; line-height: 1.55; }
.b-comp__lista li { position: relative; padding-left: 20px; }
.b-comp__lista li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tono);
}

/* --- datos --- */

.b-datos__fila { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 14px; }
.b-datos__fila[data-n="1"] { --n: 1; }
.b-datos__fila[data-n="2"] { --n: 2; }
.b-datos__fila[data-n="3"] { --n: 3; }
.b-datos__fila[data-n="4"] { --n: 4; }
@media (max-width: 700px) { .b-datos__fila { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .b-datos__fila { grid-template-columns: 1fr; } }
.b-dato {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 22px 20px;
  border-radius: 18px;
  border: 1px solid var(--c-borde);
  background: var(--blanco);
  text-align: center;
}
.b-dato__cifra {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.4vw, 2.7rem);
  line-height: 1;
  color: var(--brasa);
}
.b-dato__txt { font-size: 0.88rem; line-height: 1.5; color: var(--c-texto-suave); }

/* --- tabla --- */

.b-tabla { margin: 0; }
.b-tabla__scroll { overflow-x: auto; border: 1px solid var(--c-borde); border-radius: 16px; }
.b-tabla table { width: 100%; border-collapse: collapse; font-size: 0.94rem; background: var(--blanco); }
.b-tabla th, .b-tabla td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--c-borde); }
.b-tabla thead th {
  font-family: var(--pixel);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--papel);
  background: var(--tinta);
  border-bottom: 0;
  white-space: nowrap;
}
.b-tabla tbody tr:last-child td { border-bottom: 0; }
.b-tabla tbody tr:hover { background: color-mix(in srgb, var(--ambar) 10%, transparent); }
.b-tabla figcaption { padding: 11px 4px 0; font-size: 13px; color: var(--c-texto-suave); }

/* --- prompt copiable --- */

.b-prompt {
  border-radius: 18px;
  overflow: hidden;
  background: var(--noche);
  border: 1px solid rgba(247, 232, 210, 0.14);
  box-shadow: 0 22px 50px -30px rgba(18, 12, 19, 0.7);
}
.b-prompt__barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: rgba(247, 232, 210, 0.06);
  border-bottom: 1px solid rgba(247, 232, 210, 0.1);
}
.b-prompt__puntos { display: flex; gap: 5px; flex: none; }
.b-prompt__puntos i { width: 9px; height: 9px; border-radius: 50%; background: rgba(247, 232, 210, 0.22); }
.b-prompt__puntos i:first-child { background: var(--brasa); }
.b-prompt__puntos i:nth-child(2) { background: var(--ambar); }
.b-prompt__label {
  flex: 1;
  min-width: 0;
  font-family: var(--pixel);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247, 232, 210, 0.66);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.b-prompt__copiar {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(247, 232, 210, 0.24);
  background: transparent;
  color: var(--crema);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.b-prompt__copiar:hover { background: var(--ambar); border-color: var(--ambar); color: var(--noche); }
.b-prompt__copiar.copiado { background: var(--turquesa); border-color: var(--turquesa); color: #fff; }
.b-prompt__copiar svg { width: 14px; height: 14px; }
.b-prompt__texto {
  margin: 0;
  padding: 20px 22px;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.72;
  color: rgba(247, 232, 210, 0.9);
  white-space: pre-wrap;
  overflow-x: auto;
}
.b-prompt__var { color: var(--ambar); font-weight: 700; }

/* --- fotos --- */

.b-imagen, .b-galeria__rejilla figure {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--c-borde);
  background: var(--blanco);
}
.b-imagen img, .b-galeria__rejilla img { display: block; width: 100%; }
.b-imagen figcaption, .b-galeria__rejilla figcaption { padding: 11px 16px; font-size: 13px; color: var(--c-texto-suave); }
.b-imagen.amplia { margin-inline: clamp(-90px, calc((100vw - 800px) / -2), 0px); }
.ampliable { cursor: zoom-in; }

.b-galeria { margin: 0; }
.b-galeria__rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.b-galeria[data-n="1"] .b-galeria__rejilla { grid-template-columns: 1fr; }
.b-galeria[data-n="3"] .b-galeria__rejilla,
.b-galeria[data-n="4"] .b-galeria__rejilla { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 620px) { .b-galeria__rejilla { grid-template-columns: 1fr !important; } }
.b-galeria__rejilla img { aspect-ratio: 4 / 3; object-fit: cover; }
.b-galeria[data-n="1"] .b-galeria__rejilla img { aspect-ratio: auto; }
.b-galeria__pie { padding: 12px 4px 0; font-size: 13px; color: var(--c-texto-suave); text-align: center; }

/* --- ampliar una foto --- */

.b-zoom {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-content: center;
  gap: 14px;
  padding: 5vh 5vw;
  background: rgba(18, 12, 19, 0.92);
  cursor: zoom-out;
  animation: zoomEntra 0.25s var(--transicion) both;
}
@keyframes zoomEntra { from { opacity: 0; } to { opacity: 1; } }
.b-zoom img { max-width: 90vw; max-height: 78vh; object-fit: contain; border-radius: 12px; }
.b-zoom__pie { text-align: center; font-size: 13.5px; color: rgba(247, 232, 210, 0.8); max-width: 60ch; margin: 0 auto; }
.b-zoom__cerrar {
  position: fixed;
  top: 22px;
  right: 22px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(247, 232, 210, 0.3);
  background: transparent;
  color: var(--crema);
  font-family: var(--pixel);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.b-zoom__cerrar:hover { background: var(--brasa); border-color: var(--brasa); color: #fff; }

/* --- embeds, enlaces, botones y remates --- */

.b-embed {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--c-borde);
  background: var(--tinta);
  box-shadow: 0 20px 46px -28px rgba(42, 22, 31, 0.5);
}
.b-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.b-embed__hueco {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 20px;
  text-align: center;
  color: var(--crema);
}
.b-embed__hueco svg { width: 40px; height: 40px; color: var(--ambar); }
.b-embed__hueco span { font-weight: 650; font-size: 14px; }
.b-embed__hueco small { font-size: 11.5px; opacity: 0.6; word-break: break-all; }

.b-enlace-ext {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid var(--c-borde);
  border-radius: 16px;
  background: var(--blanco);
  text-decoration: none;
  color: var(--c-texto);
  transition: border-color 0.25s, transform 0.3s var(--transicion);
}
.b-enlace-ext:hover { border-color: var(--c-acento-interactivo); transform: translateY(-2px); }
.b-enlace-ext .cuerpo { display: grid; gap: 3px; min-width: 0; }
.b-enlace-ext strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-enlace-ext .dominio { font-size: 12px; color: var(--c-texto-suave); }
.b-enlace-ext svg { width: 17px; height: 17px; flex: none; margin-left: auto; color: var(--c-acento-interactivo); }

.b-html { max-width: 100%; overflow-x: auto; }
.b-html iframe { max-width: 100%; border: 0; border-radius: 14px; }
.b-html__hueco {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  border: 1px dashed var(--c-borde);
  border-radius: 14px;
  background: var(--papel-2);
}
.b-html__hueco code {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--c-texto-suave);
  word-break: break-all;
}

.b-boton { margin: 0.3em 0; }

.b-separador { display: flex; align-items: center; gap: 16px; margin: 0.8em 0; color: var(--ambar); }
.b-separador::before, .b-separador::after { content: ""; flex: 1; height: 1px; background: var(--c-borde); }
.b-separador svg { width: 16px; height: 16px; flex: none; }

.b-codigo {
  background: var(--tinta);
  color: var(--crema);
  border-radius: 14px;
  padding: 18px 22px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.6;
}
.b-codigo code { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; }

/* ============================================================
   EL CIERRE DE LA ENTRADA
   ============================================================ */

.entrada-cierre {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  gap: 26px;
}

.entrada-fin {
  display: block;
  width: 46px;
  height: 3px;
  margin: 44px 0 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brasa), var(--ambar));
}

.compartir { display: grid; gap: 12px; }
.compartir__rotulo {
  font-family: var(--pixel);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
}
.compartir__fila { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.compartir__red {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 42px;
  height: 42px;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--c-borde);
  background: var(--blanco);
  color: var(--c-texto);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, transform 0.3s var(--transicion), border-color 0.3s;
}
.compartir__red:hover { background: var(--tinta); border-color: var(--tinta); color: var(--papel); transform: translateY(-2px); }
.compartir__red svg { width: 18px; height: 18px; }
.compartir__copiar { width: auto; border-radius: 999px; padding: 0 18px; font-size: 12.5px; font-weight: 650; font-family: var(--sans); }
.compartir__copiar.copiado { background: var(--turquesa); border-color: var(--turquesa); color: #fff; }

.firma-entrada {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: clamp(22px, 3.4vw, 32px);
  border-radius: 22px;
  background: var(--papel-2);
  border: 1px solid var(--c-borde);
}
@media (max-width: 560px) { .firma-entrada { flex-direction: column; align-items: flex-start; } }
.firma-entrada__sello {
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tinta);
  color: var(--ambar);
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 600;
}
.firma-entrada__texto { display: grid; gap: 3px; min-width: 0; }
.firma-entrada__rotulo {
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brasa);
}
.firma-entrada__nombre { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; }
.firma-entrada__bio { font-size: 0.92rem; line-height: 1.55; color: var(--c-texto-suave); }
.firma-entrada__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.firma-entrada__ctas .btn { font-size: 13px; padding: 10px 18px; }

/* ---------- relacionadas ---------- */

.relacionadas {
  max-width: 720px;
  margin: clamp(44px, 7vh, 72px) auto 0;
  padding: 0 24px;
}
.relacionadas__titulo {
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brasa);
  margin-bottom: 16px;
}
.relacionadas__rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 720px) { .relacionadas__rejilla { grid-template-columns: 1fr; } }
.relacionada {
  display: grid;
  gap: 0;
  border: 1px solid var(--c-borde);
  border-radius: 16px;
  overflow: hidden;
  background: var(--blanco);
  text-decoration: none;
  color: var(--c-texto);
  transition: transform 0.3s var(--transicion), border-color 0.25s;
}
.relacionada:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--acento, var(--ambar)) 55%, var(--c-borde)); }
.relacionada__foto { display: block; height: 110px; overflow: hidden; }
.relacionada__foto img { width: 100%; height: 100%; object-fit: cover; }
.relacionada__foto.sin-foto {
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--papel-2), var(--crema));
  color: var(--acento, var(--ambar));
}
.relacionada__foto.sin-foto svg { width: 30px; height: 30px; opacity: 0.6; }
.relacionada__cuerpo { display: grid; gap: 6px; padding: 14px 16px 16px; }
.relacionada__cuerpo strong { font-family: var(--serif); font-weight: 555; font-size: 15px; line-height: 1.25; }
.relacionada__meta {
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
}

/* ---------- anterior y siguiente ---------- */

.nav-entradas {
  max-width: 720px;
  margin: clamp(30px, 5vh, 48px) auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 600px) { .nav-entradas { grid-template-columns: 1fr; } }
.nav-entradas .vecina {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  border: 1px solid var(--c-borde);
  border-radius: 16px;
  background: var(--blanco);
  text-decoration: none;
  color: var(--c-texto);
  transition: border-color 0.25s, transform 0.3s var(--transicion);
}
.nav-entradas .vecina:hover { border-color: var(--brasa); transform: translateY(-2px); }
.nav-entradas .vecina.der { text-align: right; justify-content: flex-end; }
.nav-entradas .flecha {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--c-borde);
  color: var(--brasa);
}
.nav-entradas .flecha svg { width: 14px; height: 14px; }
.nav-entradas .rotulo {
  display: block;
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
  margin-bottom: 4px;
}
.nav-entradas strong { font-family: var(--serif); font-weight: 555; font-size: 14.5px; line-height: 1.3; }

/* ---------- tema oscuro: los papeles se vuelven noche ---------- */

body.tema-oscuro .blog-pin__caja,
body.tema-oscuro .b-plegable,
body.tema-oscuro .b-pasos,
body.tema-oscuro .b-dato,
body.tema-oscuro .b-tabla table,
body.tema-oscuro .b-imagen,
body.tema-oscuro .b-galeria__rejilla figure,
body.tema-oscuro .b-enlace-ext,
body.tema-oscuro .relacionada,
body.tema-oscuro .nav-entradas .vecina,
body.tema-oscuro .compartir__red,
body.tema-oscuro .blog-buscar { background: var(--noche-2); }
body.tema-oscuro .firma-entrada { background: var(--plum); }
body.tema-oscuro .b-pila__carta { border-color: var(--noche-2); background: var(--noche-2); }
body.tema-oscuro .b-tabla thead th { background: var(--plum); color: var(--crema); }
body.tema-oscuro .b-html__hueco { background: var(--noche-2); }
body.tema-oscuro .blog-pin__foto.sin-foto,
body.tema-oscuro .relacionada__foto.sin-foto { background: linear-gradient(140deg, var(--plum), var(--noche-2)); }
body.tema-oscuro .b-plegable > summary:hover { background: var(--plum); }