/* pabloneruda.com — «Isla Negra de noche»
   Pedido de Pablo (29-09-2026): un diseño oscuro, inspirado en lo que Neruda
   más quería: su casa frente al mar. El tema por defecto es la noche en Isla
   Negra: el Pacífico oscuro, la roca mojada, la madera de la casa, la luz de
   farol (ámbar) y las botellas verdes de sus ventanas. La tinta verde se
   reserva para una sola cosa: las palabras de Neruda, que escribía con tinta
   verde. El modo claro (la carta náutica de día) queda como opción. */

@font-face { font-family: 'Alegreya'; src: url('/fonts/alegreya-v1.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alegreya'; src: url('/fonts/alegreya-italic-v1.woff2') format('woff2'); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url('/fonts/alegreya-sans-400-v1.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url('/fonts/alegreya-sans-700-v1.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Noche en Isla Negra (por defecto) */
  --fondo: #0b1519;        /* el Pacífico de noche */
  --superficie: #111f24;   /* roca mojada */
  --madera: #1b1410;       /* la madera oscura de la casa */
  --texto: #ebe5d8;        /* espuma a la luz del farol */
  --texto-2: #a9b3ad;
  --marca: #e9dcc3;        /* arena: títulos */
  --enlace: #9fd3de;       /* vidrio de botella azul: enlaces */
  --arena: #e9dcc3;
  --oxido: #e0935a;        /* luz de farol / óxido de ancla: rutas, años */
  --oxido-texto: #eea473;
  --tinta: #7fd1a1;        /* botella verde: SOLO las palabras de Neruda */
  --mar: #173c44;          /* botones y rótulos */
  --mar-hover: #1f4d57;
  --mar-hondo: #050c0f;    /* escalón bajo los botones */
  --bajo: #16292e;
  --bajo-2: #13232a;
  --linea: #2b3d41;
  --linea-suave: #1d2e33;
  --cabecera-fondo: #060e11;
  --cabecera-texto: #ebe5d8;
  --pie-fondo: #17110d;
  --carta-mar: #0e2126;
  --carta-tierra: #2c2a23;
  --carta-borde-tierra: #4d4739;
  --carta-reticula: #1a3238;
  --carta-marco: #8c7f68;
  --foco: #e0935a;
  --graduacion-a: #8c7f68;
  --graduacion-b: #060e11;
  color-scheme: dark;

  --serif: 'Alegreya', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;
  --ancho: 1180px;
  --lectura: 70ch;
  --radio: 6px;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 72px;
}

/* De día: la carta náutica */
:root[data-tema=claro] {
  --fondo: #f7f9f8; --superficie: #ffffff; --madera: #f4ecdc;
  --texto: #15262c; --texto-2: #475a60;
  --marca: #0e3b4a; --enlace: #0e3b4a; --arena: #e9dcc3;
  --oxido: #a4502a; --oxido-texto: #974722; --tinta: #1f6b4f;
  --mar: #0e3b4a; --mar-hover: #16505f; --mar-hondo: #082a35;
  --bajo: #dcebec; --bajo-2: #eef5f5;
  --linea: #c6d4d6; --linea-suave: #dfe8e9;
  --cabecera-fondo: #0e3b4a; --cabecera-texto: #eef5f4; --pie-fondo: #0e3b4a;
  --carta-mar: #e4f0f1; --carta-tierra: #e9dcc3; --carta-borde-tierra: #c9b590; --carta-reticula: #b9d0d3; --carta-marco: #0e3b4a;
  --foco: #a4502a; --graduacion-a: #e9dcc3; --graduacion-b: #082a35;
  color-scheme: light;
}

html[data-letra="1"] { font-size: 112.5%; }
html[data-letra="2"] { font-size: 125%; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
a { color: var(--enlace); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--oxido-texto); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 2px; }
.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }

h1, h2, h3 { font-family: var(--serif); color: var(--marca); line-height: 1.15; margin: 0 0 var(--e3); font-weight: 800; letter-spacing: -0.005em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-top: var(--e7); }
h3 { font-size: 1.3rem; font-weight: 700; }
p { margin: 0 0 var(--e4); }
ul, ol { padding-left: 1.2em; }
li { margin-bottom: var(--e2); }

.saltar { position: absolute; left: -9999px; top: 0; background: var(--superficie); padding: var(--e2) var(--e4); z-index: 20; }
.saltar:focus { left: var(--e4); top: var(--e2); }

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

/* ---------------------------------------------------------- cabecera */
.cabecera { background: var(--cabecera-fondo); color: var(--cabecera-texto); position: relative; }
.cabecera::after, .pie::before { /* graduación de carta náutica */
  content: ''; display: block; height: 6px;
  background: repeating-linear-gradient(90deg, var(--graduacion-a) 0 28px, var(--graduacion-b) 28px 56px);
}
.cabecera-in { max-width: var(--ancho); margin: 0 auto; padding: 10px var(--e5); display: flex; align-items: center; gap: var(--e5); }
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--cabecera-texto); text-decoration: none; white-space: nowrap; }
.marca:hover { color: #ffffff; }
.marca .ico { width: 30px; height: 30px; color: #e9dcc3; stroke-width: 1.5; }
.marca-nombre { font-family: var(--serif); font-weight: 800; font-size: 1.35rem; letter-spacing: 0.01em; }
.nav { display: flex; gap: var(--e2); margin-left: auto; }
.nav a { color: var(--cabecera-texto); text-decoration: none; padding: 6px 10px; border-radius: var(--radio); font-weight: 700; font-size: 1rem; white-space: nowrap; }
.nav a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.nav a[aria-current=page] { box-shadow: inset 0 -2px 0 var(--arena); border-radius: 0; }
.ajustes { display: flex; gap: 4px; }
.ajuste { background: transparent; color: var(--cabecera-texto); border: 1px solid rgba(233, 220, 195, 0.35); border-radius: var(--radio); min-width: 38px; height: 36px; font: 700 0.95rem var(--sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ajuste:hover { background: rgba(255, 255, 255, 0.1); }
.ajuste .ico { width: 18px; height: 18px; }
.si-claro { display: none; }
:root[data-tema=claro] .si-claro { display: inline-flex; }
:root[data-tema=claro] .si-oscuro { display: none; }

@media (max-width: 900px) {
  .cabecera-in { flex-wrap: wrap; gap: 0 var(--e3); padding: 8px var(--e4) 0; }
  .ajustes { margin-left: auto; }
  .nav { order: 3; width: 100%; margin: 0 calc(-1 * var(--e2)); overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 6px 8px; }
}
@media (max-width: 380px) {
  .marca-nombre { font-size: 1.2rem; }
  .ajuste { min-width: 34px; }
}

/* ---------------------------------------------------------- estructura */
.migas { font-size: 0.95rem; color: var(--texto-2); margin: var(--e5) 0 var(--e3); display: flex; flex-wrap: wrap; gap: 2px 6px; }
.migas a { color: var(--texto-2); }
.migas-sep { opacity: 0.5; }
.pagina { padding-bottom: var(--e8); }
.pagina > .contenedor > h1:first-child { margin-top: var(--e5); }
.entrada { font-size: 1.25rem; line-height: 1.55; max-width: 62ch; }
.meta { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); color: var(--texto-2); font-size: 1rem; margin: 0 0 var(--e5); padding: 0; list-style: none; }
.meta li { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.meta strong { color: var(--texto); }
.dos-col { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--e7); align-items: start; }
@media (max-width: 960px) { .dos-col { grid-template-columns: minmax(0, 1fr); gap: var(--e5); } }
.lateral { position: sticky; top: var(--e5); }
.verificado { display: flex; gap: var(--e2); align-items: flex-start; font-size: 0.95rem; color: var(--texto-2); margin: var(--e4) 0; }
.verificado .ico { color: var(--tinta); margin-top: 3px; }

/* ---------------------------------------------------------- botones */
.boton { display: inline-flex; align-items: center; gap: var(--e2); background: var(--mar); color: #f4f0e6; border: 0; border-radius: var(--radio); padding: 11px 18px; font: 700 1.05rem var(--sans); text-decoration: none; cursor: pointer; box-shadow: 0 3px 0 var(--mar-hondo); transition: transform 0.08s, box-shadow 0.08s, background 0.15s; }
.boton:hover { background: var(--mar-hover); color: #fff; }
.boton:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--mar-hondo); }
.boton-sec { background: transparent; color: var(--enlace); box-shadow: inset 0 0 0 1.5px var(--linea); }
.boton-sec:hover { background: var(--bajo-2); color: var(--enlace); }
.enlace { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; }
.enlace .ico { transition: transform 0.15s; }
.enlace:hover .ico { transform: translateX(3px); }
.enlace-boton { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }

/* ---------------------------------------------------------- fragmento (tinta verde) */
.fragmento { margin: var(--e5) 0; padding: 0 0 0 var(--e5); border-left: 3px solid var(--tinta); }
.fragmento blockquote { margin: 0; }
.fragmento p { font-family: var(--serif); font-style: italic; font-size: 1.45rem; line-height: 1.45; color: var(--tinta); margin: 0 0 var(--e2); }
.fragmento figcaption { font-size: 0.95rem; color: var(--texto-2); }
.fragmento figcaption::before { content: '— '; }
.fragmento-grande p { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); }

/* ---------------------------------------------------------- portada */
.proa { padding: 20px 0 var(--e6); }
.proa-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e6); align-items: center; }
.proa h1 { font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); margin: 0 0 var(--e2); }
.proa-sub { font-size: 1.15rem; color: var(--texto-2); margin: 0 0 var(--e4); }
.proa-sub strong { color: var(--texto); }
.proa-texto { font-size: 1.15rem; margin-bottom: var(--e5); }
.proa-carta { margin: 0; }
.proa-carta figcaption { font-size: 0.9rem; color: var(--texto-2); margin-top: var(--e2); display: flex; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
@media (max-width: 960px) {
  .proa { padding-top: var(--e4); }
  .proa-in { grid-template-columns: minmax(0, 1fr); gap: var(--e5); }
}

/* Buscador del verificador (portada y página propia) */
.buscador { background: var(--superficie); border: 1.5px solid var(--linea); border-radius: 10px; padding: var(--e4); }
.buscador label { display: block; font-weight: 700; margin-bottom: var(--e2); color: var(--marca); }
.buscador-fila { display: flex; gap: var(--e2); }
.buscador input { flex: 1; min-width: 0; font: 1.1rem var(--serif); font-style: italic; color: var(--texto); background: var(--fondo); border: 1.5px solid var(--linea); border-radius: var(--radio); padding: 10px 12px; }
.buscador input::placeholder { color: var(--texto-2); opacity: 0.85; }
.buscador input:focus { border-color: var(--oxido); outline: none; box-shadow: 0 0 0 3px rgba(164, 80, 42, 0.2); }
.buscador-ayuda { font-size: 0.92rem; color: var(--texto-2); margin: var(--e2) 0 0; }
@media (max-width: 420px) { .buscador-fila { flex-direction: column; } .buscador .boton { justify-content: center; } }

/* ---------------------------------------------------------- carta náutica (SVG) */
.carta { display: block; width: 100%; height: auto; border-radius: 4px; }
.carta-mar { fill: var(--carta-mar); }
.carta-tierra { fill: var(--carta-tierra); stroke: var(--carta-borde-tierra); stroke-width: 0.6; }
.carta-reticula { fill: none; stroke: var(--carta-reticula); stroke-width: 0.7; }
.carta-ruta { fill: none; stroke: var(--oxido); stroke-width: 1.8; stroke-dasharray: 6 5; stroke-linecap: round; }
.carta-graduacion rect { fill: var(--carta-marco); }
.carta-marco { fill: none; stroke: var(--carta-marco); stroke-width: 1; }
.carta-agua { font-family: var(--serif); font-style: italic; font-size: 17px; letter-spacing: 0.28em; fill: var(--texto-2); opacity: 0.8; }
.carta-puerto circle { fill: var(--superficie); stroke: var(--oxido); stroke-width: 2.4; transition: r 0.15s; }
.carta-puerto text { font-family: var(--sans); font-weight: 700; font-size: 19px; fill: var(--texto); paint-order: stroke; stroke: var(--carta-mar); stroke-width: 4px; stroke-linejoin: round; }
.carta-puerto-casa circle { fill: var(--oxido); }
.carta-puerto:hover circle, .carta-puerto:focus circle, .carta-puerto.activo circle { fill: var(--oxido); r: 8; }
.carta-puerto:hover text, .carta-puerto.activo text { fill: var(--oxido-texto); }
.carta-chile .carta-puerto text { font-size: 15px; }
.carta-chile .carta-agua { font-size: 15px; }
@media (max-width: 640px) {
  .carta-puerto text { font-size: 26px; }
  .carta-agua { font-size: 22px; }
}

/* ---------------------------------------------------------- bitácora (cronología) */
.bitacora { list-style: none; padding: 0; margin: var(--e5) 0; position: relative; }
.bitacora::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; border-left: 2px dashed var(--oxido); opacity: 0.7; }
.bitacora > li { position: relative; padding-left: var(--e6); margin-bottom: var(--e6); scroll-margin-top: var(--e5); }
.bitacora > li::before { content: ''; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; border-radius: 50%; background: var(--fondo); border: 2.5px solid var(--oxido); }
.bitacora > li:target::before { background: var(--oxido); }
.bitacora-cuando { font-weight: 700; color: var(--oxido-texto); font-size: 1rem; display: block; }
.bitacora-donde { font-size: 0.95rem; color: var(--texto-2); }
.bitacora h3 { margin: 2px 0 var(--e2); }
.bitacora p { max-width: 68ch; }
.bitacora-obra { font-size: 0.98rem; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.bitacora-obra .ico { color: var(--texto-2); }
.bitacora-compacta > li { margin-bottom: var(--e4); }
.bitacora-compacta h3 { font-size: 1.12rem; margin-bottom: 0; }

/* ---------------------------------------------------------- índice de libros */
.indice-libros { list-style: none; padding: 0; margin: var(--e4) 0 0; border-top: 1px solid var(--linea); }
.indice-libros li { margin: 0; border-bottom: 1px solid var(--linea); }
.indice-libros a { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr) auto; gap: var(--e4); align-items: baseline; padding: var(--e4) var(--e2); text-decoration: none; color: var(--texto); }
.indice-libros a:hover { background: var(--bajo-2); color: var(--texto); }
.indice-libros a:hover .ico { transform: translateX(3px); }
.libro-anio { font-family: var(--serif); font-weight: 700; font-size: 1.6rem; color: var(--oxido-texto); font-variant-numeric: oldstyle-nums; }
.libro-titulo { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; color: var(--marca); display: block; line-height: 1.25; }
.libro-linea { display: block; color: var(--texto-2); font-size: 1rem; margin-top: 2px; }
.indice-libros .ico { color: var(--oxido); transition: transform 0.15s; align-self: center; }
@media (max-width: 560px) {
  .indice-libros a { grid-template-columns: 3.6rem minmax(0, 1fr); padding: var(--e3) 0; }
  .indice-libros .ico { display: none; }
  .libro-anio { font-size: 1.3rem; }
}

/* ---------------------------------------------------------- casas */
.casas-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e5); margin-top: var(--e4); }
@media (max-width: 900px) { .casas-grid { grid-template-columns: minmax(0, 1fr); } }
.casa { display: flex; flex-direction: column; border: 1.5px solid var(--linea); border-radius: 8px; overflow: hidden; background: var(--superficie); text-decoration: none; color: var(--texto); transition: border-color 0.15s; }
.casa:hover { border-color: var(--oxido); color: var(--texto); }
.casa-dibujo { background: var(--madera); color: var(--marca); padding: var(--e4) var(--e5) var(--e2); border-bottom: 1.5px solid var(--linea); }
.dibujo-casa { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto; }
.dibujo-casa .trazo-suave { stroke: var(--oxido); opacity: 0.8; }
.casa-cuerpo { padding: var(--e4) var(--e5) var(--e5); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.casa-ciudad { font-size: 0.95rem; color: var(--texto-2); }
.casa h3 { margin: 0; }
.casa p { margin: var(--e2) 0 var(--e3); font-size: 1rem; }
.casa .enlace { margin-top: auto; color: var(--enlace); }

/* Ficha práctica de visita */
.ficha { border: 1.5px solid var(--linea); border-radius: 8px; background: var(--superficie); overflow: hidden; }
.ficha-titulo { background: var(--mar); color: #f1ede2; margin: 0; padding: var(--e3) var(--e4); font: 700 1.05rem var(--sans); display: flex; align-items: center; gap: var(--e2); }
.ficha dl { margin: 0; padding: var(--e2) var(--e4) var(--e3); }
.ficha dt { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--marca); font-size: 0.95rem; margin-top: var(--e3); }
.ficha dt .ico { color: var(--oxido); }
.ficha dd { margin: 2px 0 0; font-size: 1rem; }
.ficha .verificado { padding: 0 var(--e4); margin-top: 0; }

.tabla-visita { width: 100%; border-collapse: collapse; margin: var(--e4) 0; font-size: 1rem; }
.tabla-visita th, .tabla-visita td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla-visita th { color: var(--marca); font-weight: 700; width: 34%; }
.tabla-scroll { overflow-x: auto; }

/* ---------------------------------------------------------- bloques */
.costa { background: var(--madera); border-top: 1.5px solid var(--linea); border-bottom: 1.5px solid var(--linea); padding: var(--e6) 0; margin-top: var(--e7); }
.costa h2 { margin-top: 0; }
.nota { border: 1.5px solid var(--linea); border-left: 4px solid var(--oxido); border-radius: var(--radio); padding: var(--e4) var(--e5); background: var(--superficie); margin: var(--e5) 0; }
.nota p:last-child { margin-bottom: 0; }
.nota-titulo { font-weight: 700; color: var(--marca); margin-bottom: 4px; }
.dato { display: flex; gap: var(--e3); align-items: flex-start; background: var(--bajo-2); border-radius: 8px; padding: var(--e4) var(--e5); margin: var(--e5) 0; }
.dato .ico { color: var(--oxido); width: 26px; height: 26px; margin-top: 2px; }
.dato p { margin: 0; }
.lista-empezar { list-style: none; padding: 0; margin: var(--e3) 0; }
.lista-empezar li { padding: var(--e3) 0; border-bottom: 1px solid var(--linea-suave); margin: 0; }
.lista-empezar strong { font-family: var(--serif); font-size: 1.15rem; color: var(--marca); display: block; }
.temas { display: flex; flex-wrap: wrap; gap: var(--e2); list-style: none; padding: 0; }
.temas li { margin: 0; border: 1px solid var(--linea); border-radius: 4px; padding: 3px 10px; font-size: 0.98rem; background: var(--superficie); }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e6); }
@media (max-width: 760px) { .cols-2 { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.anterior-siguiente { display: flex; justify-content: space-between; gap: var(--e4); border-top: 1px solid var(--linea); margin-top: var(--e7); padding-top: var(--e4); flex-wrap: wrap; }
.anterior-siguiente a { text-decoration: none; font-weight: 700; }
.anterior-siguiente span { display: block; font-weight: 400; font-size: 0.9rem; color: var(--texto-2); }

/* Lista lateral de libros */
.otros-libros { margin-top: var(--e5); }
.otros-titulo { font-weight: 700; color: var(--marca); margin-bottom: var(--e2); }
.otros-libros ol { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linea); }
.otros-libros li { margin: 0; border-bottom: 1px solid var(--linea-suave); }
.otros-libros a { display: grid; grid-template-columns: 3rem 1fr; gap: var(--e2); padding: 7px 4px; text-decoration: none; color: var(--texto); font-size: 0.98rem; line-height: 1.35; }
.otros-libros a:hover { background: var(--bajo-2); color: var(--texto); }
.otros-libros span { color: var(--oxido-texto); font-family: var(--serif); font-weight: 700; font-variant-numeric: oldstyle-nums; }
.otros-libros li[aria-current] a { background: var(--bajo); font-weight: 700; }
.otros-libros .sin-anio a { grid-template-columns: 1fr; }
@media (max-width: 960px) { .otros-libros { display: none; } }

/* ---------------------------------------------------------- verificador */
.resultados { list-style: none; padding: 0; margin: var(--e4) 0 0; }
.resultados:empty { display: none; }
.frase { border: 1.5px solid var(--linea); border-radius: 8px; background: var(--superficie); padding: var(--e4) var(--e5); margin-bottom: var(--e3); scroll-margin-top: var(--e5); }
.frase:target { border-color: var(--oxido); }
.frase-texto { font-family: var(--serif); font-style: italic; font-size: 1.25rem; line-height: 1.4; margin: var(--e2) 0; }
.frase-suyo .frase-texto { color: var(--tinta); }
.frase-detalle { font-size: 1rem; margin: 0 0 var(--e2); }
.frase-detalle:last-child { margin-bottom: 0; }
.frase-fuentes { font-size: 0.92rem; color: var(--texto-2); margin: 0; }
.veredicto { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.95rem; padding: 2px 10px 2px 6px; border-radius: 4px; }
.veredicto .ico { width: 18px; height: 18px; }
.v-suyo { color: var(--tinta); background: color-mix(in srgb, var(--tinta) 12%, transparent); }
.v-no { color: var(--oxido-texto); background: color-mix(in srgb, var(--oxido) 12%, transparent); }
.v-dudosa { color: var(--texto-2); background: color-mix(in srgb, var(--texto-2) 12%, transparent); }
.sin-resultado { border: 1.5px dashed var(--linea); border-radius: 8px; padding: var(--e4) var(--e5); }
.grupo-frases h2 { display: flex; align-items: center; gap: var(--e2); }
.muestra-falsos { list-style: none; padding: 0; margin: var(--e4) 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); }
.muestra-falsos li { margin: 0; }
.muestra-falsos a { display: block; height: 100%; border: 1.5px solid var(--linea); border-radius: 8px; padding: var(--e4); background: var(--superficie); text-decoration: none; color: var(--texto); }
.muestra-falsos a:hover { border-color: var(--oxido); color: var(--texto); }
.muestra-falsos .frase-texto { font-size: 1.1rem; }
@media (max-width: 900px) { .muestra-falsos { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------- mapa */
.mapa-cartas { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: var(--e4); align-items: start; }
@media (max-width: 860px) { .mapa-cartas { grid-template-columns: minmax(0, 1fr); } .mapa-cartas .carta-chile { max-width: 260px; margin: 0 auto; } }
.lugares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--e6); list-style: none; padding: 0; }
@media (max-width: 760px) { .lugares { grid-template-columns: minmax(0, 1fr); } }
.lugares > li { border-top: 1px solid var(--linea); padding: var(--e4) 0; margin: 0; scroll-margin-top: var(--e5); }
.lugares > li:target { background: var(--bajo-2); }
.lugares h3 { margin-bottom: 2px; }
.lugares .pais { color: var(--texto-2); font-size: 0.95rem; margin-bottom: var(--e2); display: block; }
.lugares p { font-size: 1rem; margin-bottom: var(--e2); }

/* ---------------------------------------------------------- muerte: línea de tiempo judicial */
.expediente { list-style: none; padding: 0; margin: var(--e4) 0; border-left: 2px solid var(--linea); }
.expediente li { padding: 0 0 var(--e4) var(--e5); position: relative; margin: 0; }
.expediente li::before { content: ''; position: absolute; left: -7px; top: 8px; width: 12px; height: 12px; background: var(--fondo); border: 2px solid var(--marca); border-radius: 2px; transform: rotate(45deg); }
.expediente time { font-weight: 700; color: var(--oxido-texto); display: block; }

/* ---------------------------------------------------------- faq */
.faq { margin-top: var(--e7); max-width: var(--lectura); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { cursor: pointer; list-style: none; padding: var(--e4) var(--e6) var(--e4) 0; font-weight: 700; color: var(--marca); position: relative; font-size: 1.08rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 400 1.6rem var(--serif); color: var(--oxido); }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0 0 var(--e4); }

/* ---------------------------------------------------------- pie */
.pie { background: var(--pie-fondo); color: #d9d2c3; margin-top: var(--e8); font-size: 1rem; }
.pie-in { max-width: var(--ancho); margin: 0 auto; padding: var(--e6) var(--e5) var(--e4); display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--e5); }
@media (max-width: 860px) { .pie-in { grid-template-columns: 1fr 1fr; } .pie-marca { grid-column: 1 / -1; } }
.pie a, .pie .enlace-boton { color: #efe9dc; }
.pie a:hover, .pie .enlace-boton:hover { color: #e9dcc3; }
.pie-titulo { font: 800 1.25rem var(--serif); color: #fff; display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e2); }
.pie-titulo .ico { color: #e9dcc3; width: 26px; height: 26px; }
.pie-nav { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pie-sub { font-weight: 700; color: #e9dcc3; margin: 0 0 4px; }
.pie-legal { max-width: var(--ancho); margin: 0 auto; padding: var(--e4) var(--e5) var(--e6); font-size: 0.9rem; color: #bdb5a4; border-top: 1px solid rgba(233, 220, 195, 0.2); }

/* ---------------------------------------------------------- cookies */
.cookies { position: fixed; left: var(--e3); right: var(--e3); bottom: var(--e3); max-width: 820px; margin: 0 auto; background: var(--superficie); color: var(--texto); border: 1.5px solid var(--linea); border-radius: 10px; padding: var(--e3) var(--e4); z-index: 30; box-shadow: 0 4px 0 rgba(8, 42, 53, 0.12); display: flex; align-items: center; gap: var(--e4); }
.cookies[hidden] { display: none; }
.cookies p { margin: 0; font-size: 0.98rem; line-height: 1.4; flex: 1; }
.cookies-botones { display: flex; gap: var(--e2); flex: none; }
.cookies .boton { padding: 8px 14px; font-size: 0.98rem; }
@media (max-width: 640px) { .cookies { flex-direction: column; align-items: stretch; gap: var(--e2); } .cookies p { font-size: 0.92rem; } .cookies-botones .boton { flex: 1; justify-content: center; } }

/* ---------------------------------------------------------- 404 */
.naufragio { text-align: left; padding: var(--e7) 0; }

/* ---------------------------------------------------------- fotos */
/* Todas pasan por el mismo duotono (noche → arena) en el import: aquí solo
   el marco, fino como el de una copia en papel, y el pie con el crédito. */
.foto { margin: var(--e5) 0; }
.foto img { display: block; width: 100%; height: auto; border-radius: 3px; border: 1px solid var(--linea); background: #16262b; }
.foto figcaption { font-size: 0.9rem; color: var(--texto-2); margin-top: 8px; line-height: 1.45; }
.credito { display: block; font-size: 0.78rem; opacity: 0.85; margin-top: 2px; }
.credito a { color: inherit; }
.foto-retrato { max-width: 300px; margin: 0 0 var(--e5); }
.foto-lateral { margin: 0 0 var(--e4); }
.foto-portada { max-width: 240px; }
.foto-bitacora { max-width: 420px; margin: var(--e3) 0 var(--e2); }
.foto-casa { margin: var(--e4) 0 var(--e5); }
@media (max-width: 960px) { .foto-lateral { max-width: 360px; } }

/* ---------------------------------------------------------- poemas: índice de primeros versos */
/* Como el índice al final de un libro de poesía: el primer verso, una guía
   de puntos y el título. */
.antetitulo { font-size: 0.95rem; color: var(--oxido-texto); margin: var(--e5) 0 var(--e2); font-weight: 700; }
.grupo-libro { margin-bottom: var(--e6); }
.grupo-libro h2 { display: flex; align-items: baseline; gap: var(--e3); margin: var(--e6) 0 var(--e2); }
.grupo-libro h2 .libro-anio { font-size: 1.2rem; }
.indice-versos { list-style: none; padding: 0; margin: 0; }
.indice-versos li { margin: 0; }
.indice-versos a { display: flex; align-items: baseline; gap: var(--e2); padding: 7px 0; text-decoration: none; color: var(--texto); }
.iv-verso { font-family: var(--serif); font-style: italic; font-size: 1.12rem; color: var(--tinta); flex: 0 1 auto; min-width: 0; }
.iv-clasico { color: var(--texto); }
.iv-guia { flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted var(--linea); transform: translateY(-4px); }
.iv-titulo { flex: 0 0 auto; max-width: 45%; text-align: right; font-weight: 700; color: var(--marca); font-size: 0.98rem; line-height: 1.3; }
.iv-titulo small { display: block; font-weight: 400; color: var(--texto-2); font-size: 0.85rem; }
.indice-versos a:hover .iv-guia { border-color: var(--oxido); }
.indice-versos a:hover .iv-titulo { color: var(--oxido-texto); }
@media (max-width: 560px) {
  .indice-versos a { flex-wrap: wrap; gap: 0 var(--e2); padding: var(--e2) 0; border-bottom: 1px solid var(--linea-suave); }
  .iv-guia { display: none; }
  .iv-verso { flex-basis: 100%; }
  .iv-titulo { flex: 1 1 100%; min-width: 0; max-width: none; text-align: left; font-size: 0.92rem; }
  .iv-titulo small { display: inline; margin-left: 6px; }
}

/* Ficha de un poema de Neruda: el comienzo como la primera página */
.comienzo { margin: var(--e6) 0 var(--e5); padding: var(--e5) 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.comienzo .fragmento { border-left: 0; padding: 0; margin: 0; text-align: center; }
.comienzo .fragmento p::after { content: '…'; display: block; margin-top: var(--e2); opacity: 0.6; }
.comienzo-sigue { text-align: center; font-size: 0.92rem; color: var(--texto-2); margin: var(--e3) auto 0; max-width: 48ch; }

/* Poema completo: una página de libro */
.poema-edicion { max-width: 38em; margin: 0 auto; padding: var(--e4) 0 var(--e5); }
.poema-cabeza { text-align: center; margin-bottom: var(--e6); }
.poema-cabeza h1 { margin: var(--e2) 0; }
.poema-libro { color: var(--texto-2); font-style: italic; font-family: var(--serif); margin: 0; }
.poema-dedicatoria { font-family: var(--serif); font-style: italic; color: var(--texto-2); text-align: right; margin: var(--e5) 0 0; }
.versos { font-family: var(--serif); font-size: 1.22rem; line-height: 1.75; }
.versos p { margin: 0 0 1.5em; }
.verso { display: block; position: relative; padding-left: 0.2em; }
.verso.sangria { padding-left: 2.2em; }
.verso[data-n]::before { content: attr(data-n); position: absolute; left: -3.4em; width: 2.4em; text-align: right; font-family: var(--sans); font-size: 0.72rem; line-height: 2.4; color: var(--texto-2); opacity: 0.7; font-variant-numeric: oldstyle-nums; }
.poema-fecha { text-align: right; font-style: italic; font-family: var(--serif); color: var(--texto-2); }
.poema-pie { border-top: 1px solid var(--linea); margin-top: var(--e5); padding-top: var(--e3); font-size: 0.9rem; color: var(--texto-2); text-align: center; }
@media (max-width: 700px) { .verso[data-n]::before { display: none; } .versos { font-size: 1.12rem; } }
.lista-simple { padding-left: 1.1em; }
.autor-clasico { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--e6); padding: var(--e5) 0; border-top: 1px solid var(--linea); scroll-margin-top: var(--e5); }
.autor-clasico h2 { margin: 0 0 4px; }
.autor-datos { color: var(--oxido-texto); font-weight: 700; margin: 0 0 var(--e2); }
.autor-nota { font-size: 0.98rem; color: var(--texto-2); }
@media (max-width: 860px) { .autor-clasico { grid-template-columns: minmax(0, 1fr); gap: var(--e2); } }

/* ---------------------------------------------------------- poemas de los lectores */
.convocatoria { border: 1.5px solid var(--linea); border-left: 4px solid var(--oxido); border-radius: 8px; background: var(--superficie); padding: var(--e5); margin: var(--e5) 0; max-width: 820px; }
.convocatoria h2 { margin: 0 0 var(--e2); }
.convocatoria-mes { font-weight: 700; color: var(--oxido-texto); margin: 0 0 var(--e2); }
.convocatoria-acciones { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5); align-items: center; margin: var(--e4) 0 var(--e2); }
.convocatoria-nota, .letra-chica { font-size: 0.92rem; color: var(--texto-2); }
.convocatoria-linea { color: var(--texto-2); }
.pasos { padding-left: 1.3em; }
.pasos li { margin-bottom: var(--e3); }
.vacio { color: var(--texto-2); font-style: italic; }

/* Hojas de cuaderno: líneas de renglón detrás del texto */
.hojas { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); margin: var(--e4) 0; }
@media (max-width: 900px) { .hojas { grid-template-columns: minmax(0, 1fr); } }
.hojas li { margin: 0; }
.hoja { display: flex; flex-direction: column; gap: var(--e2); height: 100%; padding: var(--e4) var(--e5); border: 1.5px solid var(--linea); border-radius: 8px; background: var(--superficie); text-decoration: none; color: var(--texto); }
.hoja:hover { border-color: var(--oxido); color: var(--texto); }
.hoja-titulo { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; color: var(--marca); line-height: 28px; }
.hoja-versos { font-family: var(--serif); font-size: 1.05rem; line-height: 28px; flex: 1; background: repeating-linear-gradient(transparent 0 21px, var(--linea-suave) 21px 22px, transparent 22px 28px); }
.hoja-firma { font-size: 0.92rem; color: var(--texto-2); }
.antologias { list-style: none; padding: 0; }
.antologias a { display: flex; gap: var(--e3); padding: var(--e2) 0; }
.antologias span { font-weight: 700; color: var(--oxido-texto); min-width: 12ch; }

.cuaderno { max-width: 38em; margin: var(--e4) auto; padding: var(--e6) var(--e6) var(--e5); border: 1.5px solid var(--linea); border-radius: 10px; background: var(--superficie); }
.cuaderno h1, .cuaderno h2 { margin: 0 0 var(--e2); }
.cuaderno h2 a { text-decoration: none; color: var(--marca); }
.cuaderno-mes { font-size: 0.92rem; color: var(--oxido-texto); font-weight: 700; margin: 0 0 var(--e2); }
.cuaderno-firma { color: var(--texto-2); margin: 0 0 var(--e5); }
/* Renglones: una línea bajo cada verso, a la altura de la base de la letra. */
.cuaderno-texto { font-family: var(--serif); font-size: 1.2rem; line-height: 36px; background: repeating-linear-gradient(transparent 0 28px, var(--linea-suave) 28px 29px, transparent 29px 36px); margin-bottom: var(--e4); }
.cuaderno-texto p { margin: 0 0 36px; }
.cuaderno-fecha { font-size: 0.9rem; color: var(--texto-2); margin: 0; }
.cuaderno-antologia { margin: var(--e5) auto; }
@media (max-width: 560px) { .cuaderno { padding: var(--e5) var(--e4); } .cuaderno-texto { font-size: 1.08rem; } }
.compartir { display: flex; flex-wrap: wrap; gap: var(--e2); justify-content: center; margin: var(--e4) 0 var(--e6); }

/* Formulario como cuaderno */
.cuaderno-form { max-width: 820px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4); margin: var(--e5) 0; }
.cuaderno-form label, .cuaderno-form input, .cuaderno-form select, .cuaderno-form textarea { min-width: 0; }
.cuaderno-form label { display: grid; gap: 6px; font-weight: 700; color: var(--marca); }
.cuaderno-form input, .cuaderno-form select, .cuaderno-form textarea { font: 1.05rem var(--sans); color: var(--texto); background: var(--superficie); border: 1.5px solid var(--linea); border-radius: var(--radio); padding: 10px 12px; width: 100%; }
.cuaderno-form input:focus, .cuaderno-form select:focus, .cuaderno-form textarea:focus { border-color: var(--oxido); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--oxido) 25%, transparent); }
.campos-fila { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--e4); }
@media (max-width: 560px) { .campos-fila { grid-template-columns: minmax(0, 1fr); } }
.campo-titulo input { font: 700 1.25rem var(--serif); }
.campo-poema textarea { font: 1.2rem/36px var(--serif); padding: 6px 16px; min-height: 22rem; resize: vertical; background: var(--superficie) repeating-linear-gradient(transparent 0 28px, var(--linea-suave) 28px 29px, transparent 29px 36px); background-attachment: local; background-position: 0 6px; }
.opcional { font-weight: 400; color: var(--texto-2); }
.cuenta { font-size: 0.92rem; color: var(--texto-2); margin: -8px 0 0; text-align: right; }
.cuenta.pasado { color: var(--oxido-texto); font-weight: 700; }
.casilla { display: flex !important; grid-template-columns: none; gap: var(--e2) !important; align-items: flex-start; font-weight: 400 !important; color: var(--texto) !important; }
.casilla input { width: 20px !important; height: 20px; margin-top: 3px; flex: none; accent-color: var(--oxido); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.boton-grande { justify-self: start; padding: 13px 24px; font-size: 1.12rem; }
.aviso { border-radius: var(--radio); padding: var(--e3) var(--e4); margin: 0; }
.aviso-error { background: color-mix(in srgb, var(--oxido) 14%, transparent); color: var(--texto); border-left: 4px solid var(--oxido); }
.recibido { max-width: 820px; border: 1.5px solid var(--tinta); border-radius: 10px; padding: var(--e5); background: var(--superficie); margin: var(--e5) 0; }
.recibido h2 { margin-top: 0; }
.codigo { font: 700 clamp(1.6rem, 1rem + 3vw, 2.4rem) ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: 0.08em; color: var(--marca); margin: var(--e4) 0; overflow-wrap: anywhere; }
.estado-poema { border: 1.5px solid var(--linea); border-radius: 8px; padding: var(--e4) var(--e5); margin: var(--e4) 0; background: var(--superficie); }
.estado-poema h2 { margin: var(--e2) 0; }
.mis-codigos ul { list-style: none; padding: 0; }
.mis-codigos li { display: flex; justify-content: space-between; gap: var(--e3); border-bottom: 1px solid var(--linea-suave); padding: var(--e2) 0; }
.mis-codigos span { color: var(--texto-2); font-size: 0.92rem; }

/* Moderación */
.mod-pestanas { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e4) 0; }
.mod-pestanas [aria-pressed=true] { background: var(--mar); color: #f4f0e6; }
.mod-pestanas span { opacity: 0.8; }
.mod-lista { list-style: none; padding: 0; display: grid; gap: var(--e4); }
.mod-poema { border: 1.5px solid var(--linea); border-radius: 8px; padding: var(--e4) var(--e5); background: var(--superficie); }
.mod-poema h2 { margin: var(--e2) 0; }
.mod-meta, .mod-motivo { font-size: 0.92rem; color: var(--texto-2); margin: 0; }
.marca-ia { display: inline-block; font-size: 0.9rem; padding: 4px 10px; border-radius: 4px; background: var(--bajo-2); margin-bottom: var(--e3); }
.marca-rechazar { background: color-mix(in srgb, var(--oxido) 20%, transparent); }
.marca-publicar { background: color-mix(in srgb, var(--tinta) 18%, transparent); }
.mod-botones { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.mod-rechazo { display: grid; gap: var(--e2); margin-top: var(--e3); }
.mod-rechazo textarea { width: 100%; font: 1rem var(--sans); padding: 8px; background: var(--fondo); color: var(--texto); border: 1.5px solid var(--linea); border-radius: var(--radio); }

/* ---------------------------------------------------------- impresión */
@media print {
  .cabecera, .pie, .cookies, .ajustes, .buscador, .faq summary::after, .anterior-siguiente, .migas { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; text-decoration: none; }
  .fragmento p { color: #000; }
  details { display: block; } details > * { display: block; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }