/* Estilos del sitio · página personal estilo GeoCities con cromo, vidrio y neón Y2K (decisión #29).
   El neón es para títulos y adornos; el texto de las noticias va liso. Amarillo y negro, solo en rumores. */

@font-face { font-family: "Barlow Condensed"; src: url("fuentes/barlow-condensed-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fuentes/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("fuentes/barlow-semi-condensed-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("fuentes/barlow-semi-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --fondo: #0B1424;
  --texto: #E6ECF3;
  --texto-suave: #A9B6C8;
  --neon: #39FF14;
  --neon-oscuro: #2BD158;
  --cian: #7FE3FF;
  --azul: #1550C8;
  --rojo: #D7262B;
  --naranja: #FFA94D;
  --rumor: #FFD60A;
  --enlace: #8CC8FF;
  --visitado: #C9B6FF;
  /* Vidrio de los paneles y bisel: luz arriba e izquierda, sombra abajo y derecha. */
  --brillo: linear-gradient(115deg, transparent 62%, rgba(255, 255, 255, 0.05) 62%, rgba(255, 255, 255, 0.015) 78%, transparent 78%);
  --bisel: #9FB0C6 #18233A #0C1422 #6E819B;
  /* Cromo claro (barras, insignias) y oscuro (botones con texto blanco). */
  --cromo: linear-gradient(180deg, #F4F7FA 0%, #C3CCD7 46%, #8794A6 52%, #C9D2DC 100%);
  --cromo-oscuro: linear-gradient(180deg, #5E6E84 0%, #33415A 48%, #222D40 52%, #3B4A60 100%);
  --cromo-rojo: linear-gradient(180deg, #F2575B 0%, #C81E24 48%, #A0141A 52%, #D0353A 100%);
  /* Reflejo de vidrio que va encima de los botones. */
  --reflejo: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.1) 100%);
  --titular: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --lectura: "Barlow Semi Condensed", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(circle, #FFFFFF 1px, transparent 1.6px) 0 0 / 46px 46px,
    radial-gradient(circle, #7FB8FF 1px, transparent 1.6px) 23px 17px / 63px 63px,
    radial-gradient(ellipse 80% 50% at 50% 0, rgba(40, 110, 200, 0.28), transparent 70%),
    linear-gradient(rgba(57, 255, 20, 0.05) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(90deg, rgba(57, 255, 20, 0.05) 1px, transparent 1px) 0 0 / 30px 30px,
    var(--fondo);
  color: var(--texto);
  font-family: var(--lectura);
  font-size: 18px;
  line-height: 1.5;
}

/* Parallax (estatico/fondo.js): las estrellas pasan a dos capas fijas que se mueven más lento que el texto.
   Mismos colores, tamaños y desfases que el fondo de body; sin la clase, el fondo queda como arriba. */
html.parallax body {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0, rgba(40, 110, 200, 0.28), transparent 70%),
    linear-gradient(rgba(57, 255, 20, 0.05) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(90deg, rgba(57, 255, 20, 0.05) 1px, transparent 1px) 0 0 / 30px 30px,
    var(--fondo);
}
html.parallax body::before,
html.parallax body::after {
  content: ""; position: fixed; left: 0; top: 0; width: 100%;
  z-index: -1; pointer-events: none; will-change: transform;
}
html.parallax body::before {
  height: calc(100% + 46px);
  background: radial-gradient(circle, #FFFFFF 1px, transparent 1.6px) 0 0 / 46px 46px;
  transform: translateY(var(--capa-1, 0px));
}
html.parallax body::after {
  height: calc(100% + 63px);
  background: radial-gradient(circle, #7FB8FF 1px, transparent 1.6px) 23px 17px / 63px 63px;
  transform: translateY(var(--capa-2, 0px));
}

h1, h2, h3 { font-family: var(--titular); font-weight: 700; }

a { color: var(--enlace); }
a:visited { color: var(--visitado); }
a:hover { color: var(--cian); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px dashed var(--cian);
  outline-offset: 2px;
}

.saltar {
  position: absolute; left: -9999px; top: 8px;
  background: var(--cian); color: #000; padding: 8px 12px; z-index: 10;
}
.saltar:focus { left: 8px; }

.pagina {
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- Cabecera --- */
.cabecera { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 4px; }
.logo {
  display: inline-flex; align-items: center; gap: 0.12em;
  font-family: var(--titular); font-weight: 700; font-size: clamp(34px, 9vw, 84px);
  line-height: 1; letter-spacing: 0.02em; text-decoration: none;
}
.logo-imagen { display: block; width: min(560px, 90vw); height: auto; }
.logo-marca {
  width: 1.05em; height: 1.05em; flex: none;
  filter: drop-shadow(0 0 0.06em rgba(57, 255, 20, 0.9)) drop-shadow(0 0 0.2em rgba(57, 255, 20, 0.45));
}
.logo-texto { display: inline-block; transform: skewX(-8deg); white-space: nowrap; }
.logo-cromo, .logo-neon { -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-cromo {
  background-image: linear-gradient(180deg, #FFFFFF 0%, #DCE6F0 40%, #6F8299 52%, #C8D6E4 72%, #F3F8FF 100%);
  filter: drop-shadow(0 2px 0 #0D1A2B) drop-shadow(0 0 10px rgba(91, 200, 255, 0.5));
}
.logo-neon {
  background-image: linear-gradient(180deg, #E4FFEA 0%, #6BFF8F 40%, #22C24D 55%, #8BFFAA 100%);
  filter: drop-shadow(0 2px 0 #062010) drop-shadow(0 0 12px rgba(57, 255, 20, 0.6));
}
.logo:hover .logo-texto { filter: brightness(1.15); }
.lema { margin: 4px 0 0; font-family: var(--titular); font-weight: 500; font-size: 22px; color: #8DF5A8; }
.autor { margin: 0; font-size: 15px; color: var(--texto-suave); letter-spacing: 0.03em; }

/* --- Marquesina: tubo cromado con letrero verde --- */
.marquesina {
  margin: 4px 6px;
  background: linear-gradient(180deg, #03140A, #072512 50%, #03140A);
  border-radius: 12px;
  box-shadow: 0 0 0 3px #1B2433, 0 0 0 5px #C9D2DC, 0 0 0 7px #6E7C8E, 0 4px 14px 7px rgba(0, 0, 0, 0.45),
              inset 0 0 12px rgba(57, 255, 20, 0.3);
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--titular);
  font-weight: 700;
  font-size: 22px;
  color: var(--neon);
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.7);
  padding: 4px 0;
}
.marquesina-texto { display: inline-block; animation: marquesina 30s linear infinite; }
.marquesina-texto span { padding-right: 80px; }
@keyframes marquesina { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- Columnas --- */
.columnas { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.lateral { flex: 1 1 230px; display: flex; flex-direction: column; gap: 16px; }
.principal { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* --- Paneles de cristal translúcido: dejan ver el fondo desenfocado; el brillo interior hace de bisel --- */
.caja, .panel, .historia {
  background: var(--brillo), rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(192, 192, 192, 0.3); border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 1px 0 0 rgba(255, 255, 255, 0.08), 0 6px 18px rgba(0, 0, 0, 0.45);
  padding: 14px 18px;
}
.caja { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.caja-leyenda, .caja-boletin { font-size: 16px; }
.caja-boletin p { margin: 0; }
.caja-boletin label { font-weight: 600; font-size: 15px; }
.caja-boletin input {
  min-height: 40px; padding: 0 8px; border: 2px solid; border-color: #0C1422 #6E819B #9FB0C6 #18233A; border-radius: 4px;
  background: #08101C; color: var(--texto-suave); font: inherit;
}
.caja-boletin button {
  min-height: 44px; background: var(--cromo-oscuro); border: 1px solid #6E7C8E; border-radius: 6px; color: #9AA6B6;
  font-family: var(--titular); font-weight: 700; font-size: 19px;
}
.caja-titulo { margin: 0; font-size: 24px; color: var(--neon); text-shadow: 0 0 5px rgba(57, 255, 20, 0.5); text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.1; }

.panel { display: flex; flex-direction: column; gap: 8px; }
.panel p, .historia p { margin: 0; }
.panel-fila { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

.historia { display: flex; flex-direction: column; gap: 10px; }
.seccion-edicion { display: flex; flex-direction: column; gap: 16px; }
.historia-titulo { margin: 0; font-size: 24px; line-height: 1.2; color: #F2F6FA; }

/* Títulos de sección en neón; los de rumores, en amarillo (el verde es solo para hechos). */
.titulo-seccion { margin: 0; font-size: 34px; line-height: 1.15; color: var(--neon); text-shadow: 0 0 5px rgba(57, 255, 20, 0.5); }
.seccion-rumores .titulo-seccion, .titulo-rumor { color: var(--rumor); text-shadow: 0 0 5px rgba(255, 214, 10, 0.45); }
.encabezado-edicion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.nuevo {
  padding: 2px 10px; border: 1px solid #FF9A9A; border-radius: 4px; background: var(--cromo-rojo);
  font-family: var(--titular); font-weight: 700; font-size: 20px; color: #fff;
  box-shadow: 0 0 10px rgba(215, 38, 43, 0.6);
  animation: parpadeo 1.1s step-end infinite;
}
@keyframes parpadeo { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.35; } }

.nota { font-size: 15px; color: var(--texto-suave); }

/* --- Botones cromados: menú, navegación entre ediciones y botones sueltos --- */
.menu { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.menu a, .nav-ediciones a, .boton, .ir-menu {
  display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 12px;
  background: var(--reflejo), var(--cromo-oscuro); border: 1px solid #A9B7C8; border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 3px #000;
  font-family: var(--titular); font-weight: 700; font-size: 19px; line-height: 1.1;
  color: #F2F5F8; text-decoration: none;
}
.menu a:visited, .nav-ediciones a:visited, .boton:visited, .ir-menu:visited { color: #F2F5F8; }
.menu a:hover, .nav-ediciones a:hover, .boton:hover, .ir-menu:hover {
  color: #fff; border-color: var(--cian); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 8px rgba(127, 227, 255, 0.5);
}
.menu a:active, .nav-ediciones a:active, .boton:active { transform: translateY(1px); }
.menu a span { display: none; font-size: 13px; }
.menu a[aria-current="page"] { background: var(--reflejo), var(--cromo-rojo); border-color: #FF9A9A; }
.menu a[aria-current="page"] span { display: inline; }

/* --- Sellos de tipo y confianza --- */
.sellos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sello, .contador-fuentes {
  display: inline-block;
  padding: 1px 8px;
  font-family: var(--titular);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  border: 2px solid;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.sello { text-transform: uppercase; }
a.sello { text-decoration: none; }
a.sello:hover, a.sello:focus-visible { text-decoration: underline; }
.historia-edicion { margin: 0; }
.sello-oficial, a.sello-oficial { background: #0E2A8A; color: #fff; border-color: #6F8BFF; }
.sello-reporte, a.sello-reporte { background: #fff; color: #0E2A8A; border-color: #B7C3D3; }
.sello-rumor, a.sello-rumor { background: var(--rojo); color: #fff; border-color: #FF8A8A; }
.sello-opinion, a.sello-opinion { background: #fff; color: #444; border-color: #B7C3D3; }
.sello-conf-oficial, a.sello-conf-oficial { background: var(--cian); color: #04121A; border-color: #CFF6FF; }
.sello-conf-medio, a.sello-conf-medio { background: var(--naranja); color: #1A0D00; border-color: #FFD2A0; }
.sello-conf-comunidad, a.sello-conf-comunidad { background: #6B7480; color: #fff; border-color: #A7B0BB; }
.leyenda { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }

/* El contador de fuentes: verde con ✓ en hechos; neutro y sin ✓ en rumores. */
.contador-fuentes { background: #06210F; color: var(--neon); border-color: var(--neon-oscuro); }
.tarjeta-rumor .contador-fuentes { background: #141A24; color: var(--texto); border-color: #7D8896; }

/* --- En 30 segundos: una viñeta por historia, enlazada a ella --- */
.puntos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.puntos li { display: flex; align-items: baseline; gap: 10px; }
.punto-icono {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.35em; height: 1.35em; font-weight: 600; line-height: 1; border-radius: 3px; position: relative; top: 0.2em;
}
.punto-noticia .punto-icono {
  background: linear-gradient(180deg, #3D7BF0, var(--azul)); color: #fff; border: 1px solid #9CC0FF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.punto-rumor .punto-icono { background: var(--rumor); color: #000; border: 1px solid #000; }
.puntos a { overflow-wrap: anywhere; color: var(--texto); text-decoration-color: rgba(230, 236, 243, 0.35); }
.puntos a:hover { color: #fff; text-decoration-color: currentColor; }
.punto-etiqueta { color: var(--rumor); font-weight: 600; }
.historia:target { outline: 3px dashed var(--cian); outline-offset: 3px; }

/* --- Tarjeta de historia estilo ventana: barra de título con botones y cuerpo de vidrio --- */
.tarjeta { padding: 0; gap: 0; overflow: hidden; }
.tarjeta-barra {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 6px 8px 6px 10px;
}
.tarjeta-noticia .tarjeta-barra {
  background: linear-gradient(180deg, #2A5297 0%, #173468 50%, #10264D 100%); color: #fff;
  border-bottom: 2px solid #8FA3BF;
}
.tarjeta-rumor { border-color: rgba(255, 214, 10, 0.75); }
.tarjeta-rumor .tarjeta-barra { background: var(--rumor); color: #000; border-bottom: 2px solid #000; }
/* Los rumores llevan la franja de precaución sobre la barra. */
.tarjeta-rumor::before {
  content: ""; display: block; height: 12px; border-bottom: 2px solid #000;
  background: repeating-linear-gradient(-45deg, var(--rumor) 0 10px, #000 10px 20px);
}
.tarjeta .historia-titulo { min-width: 0; color: inherit; font-size: 23px; overflow-wrap: anywhere; }
.numero {
  display: inline-block; margin-right: 4px; padding: 0 5px; border-radius: 3px;
  font-weight: 700; font-size: 21px; line-height: 1.15; letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
  background: #031109; color: var(--neon); border: 1px solid var(--neon-oscuro); vertical-align: 1px;
}
.tarjeta-rumor .numero { background: #000; color: var(--rumor); border-color: #000; }
.tarjeta-botones { flex: none; display: flex; gap: 3px; padding-top: 4px; }
.tarjeta-botones span {
  width: 18px; height: 16px; display: flex; align-items: center; justify-content: center;
  background: var(--cromo); color: #1B2533; border: 1px solid #3B4757; border-radius: 3px;
  font: 700 11px/1 Arial, sans-serif;
}
.tarjeta-cuerpo { padding: 12px 15px 14px; display: flex; flex-direction: column; gap: 10px; }
.icono-categoria {
  /* 32 px de dibujo (el doble de 16) más el borde, para que los píxeles queden nítidos. */
  width: 36px; height: 36px; padding: 0; background: #F3F6F9; border: 2px solid #9FB0C6; border-radius: 4px;
  image-rendering: pixelated; image-rendering: crisp-edges;
}

/* --- Fuentes de cada historia: medio primero, título original recortado a un renglón --- */
.fuentes { font-size: 16px; padding-top: 8px; border-top: 1px solid rgba(159, 176, 198, 0.35); }
.fuentes ul { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.fuentes li { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.fuente-medio { flex: none; color: #F2F6FA; }
.fuente-titulo { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fuente-idioma { flex: none; font-size: 15px; color: var(--texto-suave); }

.nav-ediciones {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px;
  font-family: var(--titular); font-weight: 700; font-size: 19px;
}
.nav-ediciones a { min-height: 44px; }
.lista-archivo { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }

.prosa h2 { margin: 12px 0 0; font-size: 25px; color: #F2F6FA; }
.prosa p, .prosa ul { margin: 0; }

/* --- Botones e insignias de 88×31 --- */
.boton { display: inline-flex; min-height: 44px; padding: 0 16px; }

.insignias { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.insignia {
  width: 88px; height: 31px;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--titular); font-weight: 700; font-size: 13px; line-height: 1;
  border: 1px solid #0C1422; border-radius: 3px; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px #000;
}
.insignia-rss, .insignia-rss:visited { background: linear-gradient(180deg, #FFB04D, #FF8800); color: #000; }
.insignia-azul { background: linear-gradient(180deg, #2A5297, #10264D); color: var(--cian); }
.insignia-roja { background: var(--cromo-rojo); color: #fff; }
.insignia-cromo { background: var(--cromo); color: #0B1424; }
.insignia-verde { background: linear-gradient(180deg, #8BFFAA, var(--neon-oscuro)); color: #000; }

/* «En construcción» en naranja y negro: el amarillo con negro queda para los rumores. */
.en-obra {
  height: 24px; border: 2px solid #000; border-radius: 3px;
  background: repeating-linear-gradient(-45deg, #FF8C1A 0 14px, #000 14px 28px);
}

/* --- Panel de splits (estilo temporizador de speedrun) --- */
.splits {
  background: linear-gradient(180deg, #0A1220, #04080F); color: var(--texto);
  border: 2px solid; border-color: var(--bisel); border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px #05090F, 0 6px 18px rgba(0, 0, 0, 0.45);
  padding: 10px 14px; font-family: var(--titular); font-weight: 500; font-size: 21px; line-height: 1.25;
}
.splits-titulo {
  margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1px solid #2A3850;
  font-size: 19px; color: #8DF5A8; letter-spacing: 0.03em; overflow-wrap: anywhere;
}
.splits-filas { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.splits-fila { display: flex; align-items: baseline; gap: 6px; }
.splits-fila dt { flex: none; }
.splits-guia { flex: 1 1 auto; min-width: 12px; border-bottom: 2px dotted #4A5A72; }
.splits-fila dd { flex: none; margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.splits-hecho dd { color: var(--neon); }
.splits-rumor dd { color: var(--rumor); }
.splits-descarte dd { color: #FF6B6B; }

/* --- Pie --- */
.pie { text-align: center; color: var(--texto-suave); font-size: 15px; display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.pie p { margin: 0; }
.pie a, .pie a:visited { color: var(--cian); }
.pie-retro { font-family: var(--titular); font-weight: 500; font-size: 18px; color: #8DF5A8; }

/* En pantallas angostas, las noticias van primero y el menú queda a un toque */
.ir-menu { display: none; }
@media (max-width: 760px) {
  .principal { order: -1; }
  .ir-menu { display: inline-flex; align-self: center; min-height: 44px; padding: 0 16px; }
  .titulo-seccion { font-size: 29px; }
}

@media (prefers-reduced-motion: reduce) {
  .marquesina-texto, .nuevo { animation: none; }
}

/* --- Recomendaciones (#32): sección personal, con su propio color de opinión --- */
.tarjeta-opinion .tarjeta-barra {
  background: linear-gradient(180deg, #5B2A86 0%, #3F1A63 50%, #2C1047 100%); color: #fff;
  border-bottom: 2px solid #C9A6F2;
}
.tarjeta-opinion { border-color: rgba(201, 166, 242, 0.55); }
.sello-opinion-propia { background: #C77DFF; color: #1A0630; border-color: #E8CCFF; }
.sello-tipo-recomendacion { background: #141A24; color: var(--texto); border-color: #7D8896; }
.recomendacion { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
.recomendacion-imagen { flex: 0 0 160px; }
.recomendacion-imagen img { display: block; width: 100%; height: auto; border: 1px solid rgba(192, 192, 192, 0.35); border-radius: 6px; }
.recomendacion-texto { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

/* --- Libro de visitas (#33) --- */
.libro-formulario { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.libro-formulario label { font-family: var(--titular); font-weight: 700; font-size: 18px; }
.libro-formulario input, .libro-formulario textarea {
  min-height: 44px; padding: 8px; border: 1px solid rgba(192, 192, 192, 0.45); border-radius: 4px;
  background: #08101C; color: var(--texto); font: inherit;
}
.libro-formulario textarea { resize: vertical; }
.libro-formulario .boton { align-self: flex-start; margin-top: 6px; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.firma-mensaje { white-space: pre-line; overflow-wrap: anywhere; }
.firma-apodo { color: #F2F6FA; }
.motivos { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; color: var(--texto-suave); }
.motivos li:target { color: var(--texto); font-weight: 600; outline: 2px dashed var(--cian); outline-offset: 4px; list-style: "► "; }