/* Colores. Todo sale de aquí: el modo noche (data-theme="dark" en <html>,
   lo pone el script de base.html) solo redefine estas variables. Lo que va
   encima de una foto (portadas, visor) no cambia: sigue en blanco a propósito. */
:root {
  color-scheme: light;
  --ink: #111111;          /* el texto y los botones llenos */
  --on-ink: #ffffff;       /* el texto encima de --ink */
  --ink-hover: #2a2a2a;
  --text-strong: #1d1d1d;  /* el cuerpo de una entrada */
  --text: #4a4a4a;         /* texto secundario que aún se lee de corrido */
  --muted: #737373;
  --faint: #c4c4c4;        /* iniciales, marcas de agua, cosas de adorno */
  --paper: #ffffff;
  --card: #ffffff;
  --line: #ececec;
  --edge: #d4d4d4;         /* bordes que tienen que verse (hover, discontinuos) */
  --edge-strong: #9a9a9a;
  --accent: #111111;
  --soft: #f6f6f6;
  --soft-2: #fafafa;
  --soft-hover: #ededed;
  --photo: #f3f3f3;
  --header-bg: rgba(255, 255, 255, 0.86);
  --glass: rgba(255, 255, 255, 0.92);
  --scrim: rgba(250, 250, 250, 0.82);
  --shadow: rgba(0, 0, 0, 0.08);
  --shadow-md: rgba(0, 0, 0, 0.14);
  --shadow-lg: rgba(0, 0, 0, 0.16);
  --danger: #8a2a2a;
  --danger-strong: #6d1c1c;
  --danger-bg: #faf4f4;
  --danger-line: #ead8d8;
  --ok: #1d6b33;
  --ok-bg: #e6f4ea;
  --note-bg: #fff8e1;
  --note-line: #f0e2b0;
  --mark: #fbeeb0;
  --launch: #b4461f;        /* «En lanzamiento», en la portada */
  --map-bg: #d8d4ce;
  /* estilo «Álbum» */
  --album-paper: #f4efe6;
  --album-card: #fffdf8;
  --album-edge: #e4dccd;
  --album-line: #d6cab4;
  --album-line-strong: #b9a88a;
  --album-ink: #5a5146;
  --album-accent: #8b7b63;
  --album-shadow: 60, 40, 10;
  /* los estilos de pago. Lo que va encima de un campo oscuro (el escudo de
     «Casa») lleva su color fijo en su propia regla: es oscuro de día y de
     noche, como una foto de portada. */
  --casa-gold: #8a6d3b;
  --casa-rule: #e2d7c0;
  --verbena-accent: #c2410c;
  --verbena-soft: #fff4e9;
  --archivo-paper: #fbfaf7;
  --archivo-rule: #dcd7ca;
  --archivo-ink: #56514a;
  /* encima de una foto */
  --hero-shade: rgba(0, 0, 0, 0.5);
  --on-photo: #fff;
  /* las letras. Las del sitio de cada árbol (títulos y texto) se pueden
     cambiar con una clase letra-* en <html> (aspecto.py); las de la barra de
     arriba y los botones de la app, no: son --font-ui y --font-ui-display */
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-ui-display: "Instrument Serif", Georgia, serif;
}
/* modo noche: los colores al revés, sin negro puro (cansa) */
:root[data-theme="dark"] {
  color-scheme: dark;
  scrollbar-color: #3a3a3a transparent;
  --ink: #ececec;
  --on-ink: #121212;
  --ink-hover: #cfcfcf;
  --text-strong: #dedede;
  --text: #b0b0b0;
  --muted: #8e8e8e;
  --faint: #4e4e4e;
  --paper: #121212;
  --card: #181818;
  --line: #262626;
  --edge: #3a3a3a;
  --edge-strong: #6e6e6e;
  --accent: #ececec;
  --soft: #1d1d1d;
  --soft-2: #171717;
  --soft-hover: #2a2a2a;
  --photo: #222222;
  --header-bg: rgba(18, 18, 18, 0.84);
  --glass: rgba(26, 26, 26, 0.9);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow: rgba(0, 0, 0, 0.4);
  --shadow-md: rgba(0, 0, 0, 0.5);
  --shadow-lg: rgba(0, 0, 0, 0.6);
  --danger: #e58e8e;
  --danger-strong: #f3b3b3;
  --danger-bg: #2a1717;
  --danger-line: #4d2929;
  --ok: #8fd6a4;
  --launch: #ec9a74;
  --ok-bg: #15301e;
  --note-bg: #2a2514;
  --note-line: #4a4120;
  --mark: #5b4b12;
  --map-bg: #1e1d1b;
  --album-paper: #1a1713;
  --album-card: #25211b;
  --album-edge: #3a3329;
  --album-line: #4a4134;
  --album-line-strong: #6e624e;
  --album-ink: #c9bca6;
  --album-accent: #a8977a;
  --album-shadow: 0, 0, 0;
  --casa-gold: #c9a961;
  --casa-rule: #3b3428;
  --verbena-accent: #fb923c;
  --verbena-soft: #2a1d12;
  --archivo-paper: #151515;
  --archivo-rule: #2f2f2f;
  --archivo-ink: #9a948c;
}
* { box-sizing: border-box; }
html { background: var(--paper); overflow-x: clip; }
/* La letra, en rem: la base es la que tenga puesta cada uno en su navegador
   (16 px si nadie la ha tocado, y entonces esto son los 15 px de siempre).
   Quien la ha subido porque no ve bien, la ve más grande en todo 1199. */
body {
  margin: 0;
  font: 0.9375rem/1.55 var(--font-body);
  color: var(--ink);
  background: var(--paper);
  letter-spacing: -0.011em;
  overflow-x: clip;
}
body > header {
  font-family: var(--font-ui);
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 5;
}
body > header nav {
  /* La barra va de lado a lado en todas las páginas: es lo único que se queda
     fijo al navegar, y si cambiara de ancho según la página el logo daría un
     salto de 400 px al pasar de la portada de un sitio a las entradas. */
  max-width: none;
  margin: 0;
  padding: 1rem 2rem;
  display: flex;
  gap: 1.6rem;
  align-items: baseline;
}
body > header a { color: var(--muted); text-decoration: none; font-size: 0.95rem; }
body > header a:hover { color: var(--ink); }
body > header .brand {
  font-family: var(--font-ui-display);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0;
  display: inline-flex;
  align-self: center;
}
/* la marca es el icono de 1199 (static/marca): el cuadro negro con las
   cifras y su arbolito, en PNG porque el SVG lleva la letra sin incrustar. Del
   alto que tenía el «1199» en letra (1,35rem × 1,55 de interlineado), para que
   la barra no crezca: todo lo que va pegado a ella cuenta con ese alto */
.brand img { display: block; width: 2.1rem; height: 2.1rem; border-radius: 6px; }
/* «Pruebas», junto al logo, solo en el despliegue de staging (web.es_staging) */
.staging-chip {
  align-self: center;
  flex: none;
  margin-left: -0.35rem;
  padding: 0.12rem 0.55rem;
  border: 1px dashed var(--note-line);
  border-radius: 999px;
  background: var(--note-bg);
  color: var(--text-strong);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: help;
}
/* de noche, el icono al revés: cuadro claro y cifras oscuras, los mismos
   tonos que la letra y el fondo de la página */
:root[data-theme="dark"] .brand-icono { filter: invert(1) brightness(0.93); }
body > header a.here { color: var(--ink); }
/* los iconos de los eventos (_iconos.html), una vez por página: un <svg> de
   0×0 que, en línea, dejaba un renglón en blanco entre la barra y la página
   (la franja blanca sobre la portada de «Revista») */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* el logo del sitio, uno para el día y otro para la noche: cada uno en su modo */
:root[data-theme="dark"] .logo-dia { display: none !important; }
:root:not([data-theme="dark"]) .logo-noche { display: none !important; }
main { max-width: 1080px; margin: 0 auto; padding: 2.2rem 1.5rem 5rem; }
/* «Saltar al contenido» (base.html): fuera de la vista hasta que le llega el
   foco con el tabulador; entonces, arriba a la izquierda y por encima de todo */
.saltar {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 70;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-ui);
  text-decoration: none;
}
.saltar:focus { top: 0.6rem; }
/* El pie de todas las páginas (base.html): lo legal, pequeño y en gris, para
   que esté a mano sin competir con nada */
.pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.4rem;
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.3rem 1.5rem 2rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: 0.85rem;
}
.pie a { color: var(--muted); text-decoration: none; }
.pie a:hover { color: var(--ink); text-decoration: underline; }
/* el árbol y el mapa ocupan la pantalla entera: no tienen «abajo» */
body.tree-page > .pie { display: none; }
/* con una barra flotando abajo (editar el sitio, «como visitante»), el hueco
   para que no tape nada lo deja el pie, no la página */
body:is(.has-site-tools, .is-visita):not(.tree-page) main:has(~ .pie) { padding-bottom: 3rem; }
body:is(.has-site-tools, .is-visita) > .pie { padding-bottom: 6.5rem; }
h1 {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 400;
  margin: 0 0 0.35rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.lede { color: var(--muted); margin: 0 0 1.6rem; max-width: 36rem; }
.flash {
  background: var(--soft);
  border: 1px solid var(--line);
  padding: 0.75rem 1rem;
  margin-bottom: 1.2rem;
  border-radius: 12px;
}
.top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.grid { display: grid; gap: 1.25rem; }
@media (min-width: 800px) {
  .grid.two { grid-template-columns: 1fr 1fr; }
  
  .grid.three { grid-template-columns: 1fr 1fr 1fr; }
}
section.card, form.card, article.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.25rem 1.3rem 1.35rem;
}
section.card h2, form.card h2 {
  font-size: 0.8rem;
  margin: 0 0 1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
label { display: block; font-size: 0.82rem; margin: 0.7rem 0 0.25rem; color: var(--muted); }
input, select, textarea {
  width: 100%;
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  background: var(--paper);
  border-color: var(--edge);
}
/* Dónde está el foco, siempre a la vista para quien va con el teclado: un aro
   del color de la tinta, separado un poco para que se vea también alrededor
   de un botón lleno. Vale para todo (enlaces, botones, casillas, campos,
   <summary>…); lo que tiene un aro propio (.sheet-form, .aj-form) lo dice en
   su regla. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
:is(input, select, textarea):focus-visible { outline-offset: 1px; }
/* encima de una foto (el visor, las portadas), la tinta del tema no se ve */
:is(.lightbox, :is(.site-hero, .rv-hero, .tv-hero, .tree-hero).has-cover) :focus-visible { outline-color: #fff; }
label.check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.65rem;
  color: var(--ink);
  font-size: 0.88rem;
}
label.check input { width: auto; }
button, .btn {
  font: inherit;
  font-size: 0.92rem;
  background: var(--ink);
  color: var(--on-ink);
  border: 0;
  padding: 0.55rem 1.1rem;
  margin-top: 1rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  border-radius: 999px;
}
button:hover, .btn:hover { background: var(--ink-hover); }
/* un botón (o una casilla, o un campo) escondido con [hidden] se esconde de
   verdad: su display de arriba no puede con el atributo */
button[hidden], .btn[hidden], label.check[hidden], input[hidden] { display: none !important; }
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn.ghost.danger {
  color: var(--danger);
  border-color: var(--danger-line);
}
.btn.ghost.danger:hover {
  background: var(--danger-bg);
  color: var(--danger-strong);
}
.danger-zone .muted { max-width: 36rem; }
.danger-zone form { margin-top: 0.4rem; }
.rel-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
}
.rel-row form { margin: 0; }
button.linkish {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  border-radius: 0;
}
button.linkish:hover { background: none; color: var(--danger); }
.btn.small { margin-top: 0.4rem; padding: 0.3rem 0.75rem; font-size: 0.85rem; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.7rem 0.2rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
.filters {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.filters-q {
  width: 100%;
  margin: 0;
  background: var(--paper);
}
.filters-more {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.filters-more input, .filters-more select {
  width: auto;
  min-width: 0;
  flex: 1 1 110px;
  margin: 0;
  background: var(--paper);
}
.filters-more input[type=number] { flex: 0 1 96px; }
.filters-vis { flex: 0 0 7.5rem; color: var(--muted); }
.filters-more button, .filters-more .btn { margin-top: 0; }
.sheet {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: auto;
  background: var(--paper);
}
table.db { width: 100%; min-width: 0; }
table.db thead th {
  position: sticky;
  top: 0;
  background: var(--soft-2);
  padding: 0.55rem 0.45rem;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
table.db td {
  padding: 0.4rem 0.45rem;
  font-size: 0.88rem;
  white-space: nowrap;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.db tbody tr { cursor: pointer; }
table.db tbody tr:hover { background: var(--soft-2); }
.th-sort { color: inherit; text-decoration: none; }
.th-sort.on { color: var(--ink); }
.cell-photo { width: 28px; }
.cell-photo img {
  width: 22px;
  height: 28px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  background: var(--photo);
}
.cell-tight {
  width: 1%;
  text-align: center;
  font-variant-numeric: tabular-nums;
  max-width: none;
}
.cell-lock {
  width: 1%;
  text-align: center;
  max-width: none;
}
.lock-icon { display: block; margin: 0 auto; }
.bloom-mark { color: var(--muted); font-size: 0.85em; }
.lock-icon.shut { color: var(--ink); }
.lock-icon.open { color: var(--muted); }
.tree-ask {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: var(--scrim);
}
.tree-ask[hidden] { display: none !important; }
.tree-ask-card {
  width: min(420px, 100%);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.4rem 1.5rem 1.25rem;
  box-shadow: 0 24px 70px var(--shadow-lg);
}
.tree-ask-text {
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1.25;
  margin: 0 0 1.1rem;
}
.tree-add {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: var(--scrim);
}
.tree-add[hidden] { display: none !important; }
.tree-add-card {
  width: min(640px, 100%);
  max-height: min(92%, 46rem);
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.35rem 1.5rem 1.3rem;
  box-shadow: 0 24px 70px var(--shadow-lg);
}
.tree-add-kicker {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.tree-add h2 { font-size: 1.85rem; margin: 0.15rem 0 1rem; }
.tree-add-label {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.75rem 0 0.3rem;
}
.tree-add-q { margin: 0; }
.tree-add-hits {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  max-height: 8rem;
  overflow: auto;
}
.tree-add-hits li { margin: 0; }
.tree-add-hits button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  color: var(--ink);
  border: 0;
  border-radius: 8px;
  padding: 0.4rem 0.45rem;
  margin: 0;
  font: inherit;
}
.tree-add-hits button:hover { background: var(--soft); }
.tree-add-or {
  margin: 0.85rem 0 0.45rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.tree-add .pair { margin-top: 0.2rem; }
.tree-add textarea { margin-top: 0; }
.tree-add .life-dates { margin-top: 0.9rem; }
.tree-add-err {
  margin: 0.6rem 0 0;
  color: var(--danger);
  font-size: 0.88rem;
}
.tree-add .fiche-actions { margin-top: 0.9rem; }
a { color: var(--ink); }
.muted { color: var(--muted); }
.badge {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--soft);
  padding: 0.12rem 0.5rem;
  margin-left: 0.3rem;
  border-radius: 999px;
}
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
ul.plain li:last-child { border-bottom: 0; }
.empty { color: var(--muted); font-style: normal; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-width: 200px;
  background: var(--photo);
  border: 0;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  position: relative;
  overflow: hidden;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
}
.portrait .hint { padding: 1rem; pointer-events: none; }

.meta { color: var(--muted); font-size: 0.9rem; }
.bio { font-size: 1.05rem; white-space: pre-wrap; max-width: 40rem; }

.inline { display: flex; gap: 0.5rem; align-items: end; }
.inline > * { flex: 1; }
.inline button { flex: 0; }

.section { margin-top: 1.15rem; scroll-margin-top: 6.5rem; }
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.6rem;
}
.tile {
  aspect-ratio: 1;
  background: var(--photo);
  border: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
  position: relative;
  overflow: hidden;
  padding: 0.6rem;
}
.tile img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.tile-wrap { margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.tile-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.2rem 0.6rem;
  min-height: 1.3rem;
}
.tile-acts form, .doc form { margin: 0; }
.doc form { margin-left: auto; }
button.linkish.danger:hover { color: var(--danger); }
.tile.add input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
}
.map-frame {
  height: 280px;
  background: var(--soft);
  border: 0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  position: relative;
  overflow: hidden;
}
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.doc {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}
.doc .icon {
  width: 40px;
  height: 48px;
  border: 0;
  border-radius: 8px;
  background: var(--photo);
  flex: 0 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.locked { opacity: 0.55; }
.locked .tile, .locked .map-frame { pointer-events: none; }
.place-picker { position: relative; margin-top: 0.4rem; }
.place-suggest {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0.25rem 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  max-height: 220px;
  overflow: auto;
  box-shadow: 0 12px 32px var(--shadow);
}
.place-suggest li {
  padding: 0.55rem 0.8rem;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--ink);
}
.place-suggest li:hover, .place-suggest li.is-activa { background: var(--soft); }
.place-picker .place-query { padding-right: 2.4rem; }
.place-buscar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.3rem;
  margin: 0;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
}
.place-buscar:hover { background: var(--soft); color: var(--ink); }
.place-suggest li.is-tuyo::before { content: "★ "; color: var(--muted); font-size: 0.75rem; }
.place-suggest li.is-buscar { color: var(--ink); font-weight: 600; border-top: 1px solid var(--line); }
.place-suggest li.is-buscar:first-child { border-top: 0; }
.place-suggest li.is-nada { color: var(--muted); cursor: default; }
.place-suggest li.is-nada:hover { background: none; }
.place-suggest li.place-pie { font-size: 0.8rem; color: var(--muted); cursor: default; padding-top: 0.3rem; border-top: 1px solid var(--line); }
.place-suggest li.place-pie:hover { background: none; }
.product { max-width: 920px; margin: 0 auto; min-width: 0; }
.grid.three > * { min-width: 0; }
.product-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
}
.product-bar-actions { display: flex; gap: 0.5rem; align-items: center; }
.product-bar-actions .btn { margin-top: 0; }
.product-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.product-tabs a {
  text-decoration: none;
  color: var(--muted);
  font-size: 0.88rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
}
.product-tabs a:hover { color: var(--ink); }
.product-tabs a.here {
  color: var(--on-ink);
  background: var(--ink);
}
.product-spread {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 820px) {
  .product-spread { grid-template-columns: 1fr 38%; gap: 3.5rem; }
}
.product h1 { font-size: 3rem; margin-bottom: 0.5rem; overflow-wrap: anywhere; }
.product-shot {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--photo);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
}
.product-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.85rem;
}
.product-life {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: 0 0 0.7rem;
}
.product-life .dash { color: var(--muted); padding: 0 0.4rem; }
.product .bio { margin-top: 1.6rem; font-size: 1.08rem; line-height: 1.65; }
.product .bio.tease {
  max-height: 6.6em;
  overflow: hidden;
  margin-bottom: 0.6rem;
}
.product-band {
  margin-top: 3.2rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--line);
}
.product-band h2 {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.2rem;
  font-weight: 600;
}
.product-tree.tree-stage {
  flex: none;
  height: min(520px, 70vh);
  min-height: 280px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
/* «Aún no hay eventos.»: es texto que se lee, no un adorno (--faint no llega) */
.product-ghost { color: var(--muted); margin: 0; max-width: 34rem; }
.product-foot {
  display: grid;
  gap: 2rem;
}
@media (min-width: 700px) {
  .product-foot { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.gallery.strip {
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
.map-frame.wide { height: 320px; border-radius: 2px; }

.times { list-style: none; padding: 0; margin: 0; }
.times li {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 0.4rem 1.4rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}
.times li:last-child { border-bottom: 0; }
.times .when { color: var(--muted); }
.times strong { font-weight: 500; display: block; }
.times.ghost { opacity: 0.4; }

.vida-split {
  display: grid;
  gap: 2.5rem;
  margin-top: 2rem;
  align-items: start;
}
@media (min-width: 800px) {
  .vida-split { grid-template-columns: minmax(0, 1.4fr) minmax(200px, 0.7fr); gap: 3.5rem; }
}
.vida-rail h2 {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
  font-weight: 600;
}
.rail { list-style: none; margin: 0; padding: 0; }
.rail li {
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
}
.rail li:first-child { border-top: 0; padding-top: 0; }
.rail-year {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--muted);
}
.rail-title { display: block; }
.rail-place { display: block; color: var(--muted); font-size: 0.82rem; }
.pin-num {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  overflow: visible;
  white-space: nowrap;
  cursor: pointer;
}
/* el año, pegado al número, para leer el recorrido sin abrir los globos */
.pin-num b {
  position: absolute;
  left: 34px;
  top: 50%;
  transform: translateY(-50%);
  font: 600 11px/1 var(--font-ui);
  color: var(--ink);
  background: var(--glass);
  border-radius: 999px;
  padding: 0.15rem 0.4rem;
}
.pin-num span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  font: 700 12px/1 var(--font-ui);
  box-shadow: 0 0 0 3px var(--paper);
}
/* El contenedor de un mapa. El fondo (sus colores, de día y de noche) lo
   pone su estilo (mapa_estilos.js); aquí solo que no se salga nada. */
.map-fondo {
  overflow: hidden;
  isolation: isolate;
}
/* sin WebGL 2 (o sin red) no hay mapa: se dice en su sitio */
.map-sin { display: grid; place-items: center; background: var(--soft); }
.map-aviso { max-width: 26rem; margin: 1rem; text-align: center; color: var(--muted); font-size: 0.9rem; }
.map-stage {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  width: 100%;
  background: var(--map-bg);
}
.map-stage #tree-map {
  position: absolute;
  inset: 0;
}
.map-legend .map-people {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  max-height: 40vh;
  overflow: auto;
}
.map-legend .map-people li {
  padding: 0.35rem 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
  font-size: 0.88rem;
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
}
.map-legend .map-people li:first-child { border-top: 0; }
.map-legend .map-people li:hover { color: var(--muted); }
.map-legend .map-people li.on { font-weight: 600; }
.map-modes {
  display: flex;
  margin: 0.2rem 0 0.8rem;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
}
.map-modes button {
  flex: 1;
  margin: 0;
  padding: 0.3rem 0.6rem;
  font-size: 0.82rem;
  background: transparent;
  color: var(--muted);
  border: 0;
  border-radius: 999px;
}
.map-modes button:hover { background: transparent; color: var(--ink); }
.map-modes button.on { background: var(--ink); color: var(--on-ink); }
/* el fondo del mapa: en voz baja, que es una preferencia, no una vista */
.map-skins { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 0.9rem; }
.map-skins:empty { display: none; }
.map-skins button {
  margin: 0;
  padding: 0.16rem 0.55rem;
  font-size: 0.8rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.map-skins button:hover { color: var(--ink); border-color: var(--edge); background: transparent; }
.map-skins button.on { color: var(--ink); border-color: var(--ink); }
.map-mode[hidden] { display: none; }
body.tree-page {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* aquí la cabecera no tapa nada que se desplace: sin desenfoque, que obliga a
   recomponer la página entera cada vez que el árbol o el mapa se mueven */
body.tree-page > header { flex: 0 0 auto; backdrop-filter: none; background: var(--paper); }
/* (la barra a pantalla completa está con las reglas de la barra, más arriba) */
body.tree-page main {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.tree-stage {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  width: 100%;
  background: var(--paper);
  overflow: hidden;
}
/* solo el lienzo del árbol: los distintivos del panel también son canvas */
.tree-stage > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}
.tree-stage > canvas:active { cursor: grabbing; }
.tree-hint {
  position: absolute;
  left: 1.1rem;
  bottom: 1rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  pointer-events: none;
}
/* acercar, alejar y encajar (arbol.js): arriba a la izquierda y del tamaño de
   un dedo, que en el móvil no hay rueda ni teclas. Por debajo de los diálogos
   del árbol (z-index 8 y 9), y fuera si no hay nadie que acercar. */
.tree-zoom {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 18px var(--shadow);
}
.tree-zoom button {
  margin: 0;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 0.85rem;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1;
  box-shadow: 0 1px 2px var(--shadow);
}
.tree-zoom button[data-zoom="fit"] { font-size: 0.92rem; font-weight: 500; }
.tree-zoom button:hover { background: var(--soft-hover); }
.tree-empty:not([hidden]) ~ .tree-zoom { display: none; }
@media (max-width: 640px) {
  .tree-zoom { top: 0.7rem; left: 0.7rem; }
}
.tree-empty:not([hidden]) {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--muted);
}
.tree-panel {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  top: auto;
  width: min(260px, calc(100% - 2.2rem));
  background: var(--glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem 1.1rem 1.1rem;
  box-shadow: 0 12px 32px var(--shadow);
}
.tree-panel-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.35rem;
}
.tree-who-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 0 0.7rem;
  object-fit: cover;
  object-position: center 30%;  /* las caras suelen estar arriba */
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--soft);
}
.tree-who-photo[hidden] { display: none; }
.tree-panel h2 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 400;
  margin: 0 0 0.25rem;
  line-height: 1.15;
}
.tree-panel .meta { margin: 0 0 0.7rem; }
.tree-panel .btn { margin-top: 0; }

.fiche {
  display: grid;
  gap: 2rem;
  align-items: start;
  margin-top: 1.6rem;
}
@media (min-width: 760px) {
  .fiche { grid-template-columns: 180px 1fr; gap: 2.6rem; }
}
.portrait.sheet { max-width: none; border-radius: 14px; }
.portrait-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.45rem 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-align: center;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  pointer-events: none;
}
.fiche-fields { min-width: 0; }
.fiche-fields > .pair { margin-top: 0; }
.sheet-form {
  border: 1px solid var(--line);
  background: var(--paper);
  overflow: visible;
}
.sheet-row {
  display: grid;
  grid-template-columns: 6.6rem minmax(0, 1fr) 6.6rem minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
  align-items: stretch;
}
.sheet-row:last-child { border-bottom: 0; }
.sheet-row-wide { grid-template-columns: 6.6rem minmax(0, 1fr); }
.sheet-k {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.45rem 0.65rem;
  background: var(--soft-2);
  border-right: 1px solid var(--line);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.sheet-form input,
.sheet-form select,
.sheet-form textarea {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  min-width: 0;
}
.sheet-form input:focus,
.sheet-form select:focus,
.sheet-form textarea:focus {
  outline: none;
  background: var(--soft-2);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.sheet-form select {
  appearance: auto;
  padding-right: 1.6rem;
}
.sheet-field {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 0 0.2rem 0 0;
}
.sheet-field.pills { padding: 0.3rem 0.4rem; flex-wrap: wrap; }
.sheet-field.life-when { padding-right: 0.45rem; }
.sheet-field.life-when input[type=date] { flex: 1; }
.sheet-field.check { padding: 0.4rem 0.65rem; margin: 0; }
.sheet-form .place-picker { padding: 0; overflow: visible; }
.sheet-form .place-picker .place-query { border: 0; }
.sheet-form textarea { padding: 0.55rem 0.65rem; min-height: 5.5rem; }
@media (max-width: 720px) {
  .sheet-row, .sheet-row-wide {
    grid-template-columns: 6.2rem minmax(0, 1fr);
  }
}
.field-label {
  display: block;
  font-size: 0.82rem;
  margin: 0.85rem 0 0.35rem;
  color: var(--muted);
}
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.pill {
  margin: 0;
  cursor: pointer;
  position: relative;
}
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span {
  display: block;
  padding: 0.32rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--paper);
}
.pill input:checked + span {
  background: var(--ink);
  color: var(--on-ink);
  border-color: var(--ink);
}
.pill input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.life {
  display: grid;
  grid-template-columns: 4.2rem minmax(9rem, 11rem) auto 1fr;
  gap: 0.45rem 0.7rem;
  align-items: center;
  margin-top: 1.1rem;
}

.life-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 1rem;
  align-items: end;
  margin-top: 1.1rem;
}
.life-when {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}
.life-when input { flex: 1; min-width: 0; margin: 0; }
.life-k { font-size: 0.82rem; color: var(--muted); }
.life input { margin: 0; }
.fiche-fields .place-picker { margin-top: 0.45rem; }
@media (max-width: 640px) {
  .life-dates { grid-template-columns: 1fr; }
}
label.check.tight {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
}
.edit-block {
  margin-top: 2.6rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: 5rem;
}
.edit-block h2 {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
  font-weight: 600;
}
.wizard {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.wizard .here { color: var(--ink); font-weight: 600; }
.wizard .done { color: var(--ink); }
.create-rel {
  margin: 0.45rem 0 0;
  font-size: 0.85rem;
}
.bind-existing {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.fiche-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-top: 1.4rem;
}
.fiche-actions button, .fiche-actions .btn { margin-top: 0; }

.adder-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
}
.adder-inline input { flex: 1 1 8rem; min-width: 0; }
.adder-inline button { margin-top: 0; padding: 0.5rem 0.9rem; }
@media (max-width: 640px) {
  .life {
    grid-template-columns: 4.2rem 1fr auto;
  }
  .life input[placeholder] { grid-column: 1 / -1; }
}

/* Fecha aproximada: con «c.» marcado, la casilla de la fecha deja paso a la del año. */
.when-year { flex: 1; min-width: 0; margin: 0; }
.life-when input[hidden], .when-year[hidden] { display: none !important; }

/* Los lugares van uno debajo del otro y a todo el ancho: el nombre de un sitio
   ("Toledo, Castilla-La Mancha, España") no cabe en media fila. Las cuatro
   celdas caen solas en dos filas al dejar la rejilla en dos columnas. */
.sheet-row-place { grid-template-columns: 6.6rem minmax(0, 1fr); }
.sheet-row-place > :nth-child(-n + 2) { border-bottom: 1px solid var(--line); }

/* La familia, dentro de editar ficha. Eran tres columnas de texto suelto en
   medio de un formulario que por lo demás es todo cajas: aquí se convierten en
   tres tarjetas con el mismo lenguaje que el resto (borde fino, cabecera gris,
   filas separadas). Va colgado de #gente a propósito, que el mismo bloque se
   usa en el paso "Familia" del alta y ahí no se toca. */
#gente .grid.three { gap: 0.9rem; }

#gente .grid.three > div {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--paper);
}

#gente .grid.three > div > .muted:first-child {
  margin: 0;
  padding: 0.5rem 0.7rem;
  background: var(--soft-2);
  border-bottom: 1px solid var(--line);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

#gente ul.plain { padding: 0 0.7rem; }
#gente ul.plain li { padding: 0.55rem 0; }
#gente .empty { margin: 0; padding: 0.8rem 0.7rem; }

/* la acción, pegada abajo: así las tres tarjetas acaban a la misma altura */
#gente .create-rel {
  margin: 0;
  margin-top: auto;
  padding: 0.5rem 0.7rem;
  border-top: 1px solid var(--line);
  background: var(--soft-2);
}

#gente .bind-existing {
  margin-top: 1.1rem;
  padding: 0.95rem 0.9rem 1.05rem;
  border: 1px solid var(--line);
  background: var(--soft-2);
}
#gente .bind-existing .field-label { margin-top: 0; }
#gente .bind-existing select,
#gente .bind-existing input { background: var(--paper); }

/* ---- Barra de edición del árbol ----------------------------------------
   Un solo panel con dos partes: la persona seleccionada (aparece al hacer
   clic) y el estilo del árbol (siempre a mano, también para quien solo mira). */
.tree-panel { padding: 0.85rem 0.95rem 0.9rem; }
/* con la persona, la rama, el buscador y la vista, el panel puede ser más alto
   que el lienzo: se desplaza por dentro en vez de salirse por arriba */
.tree-panel { max-height: calc(100% - 2.2rem); overflow-y: auto; overscroll-behavior: contain; }
.tree-panel.busy { opacity: 0.55; pointer-events: none; }
.tree-panel .meta { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--muted); }
.tree-panel-kicker.tree-sub { margin-top: 0.85rem; }

.tree-acts { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tree-acts .btn { margin: 0; padding: 0.3rem 0.7rem; font-size: 0.82rem; }
.tree-act-drop { color: var(--danger); border-color: var(--danger-line); }
.tree-act-drop:hover { background: var(--danger); border-color: var(--danger); color: var(--paper); }

.tree-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tree-badges button {
  margin: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 1rem;
  line-height: 1;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 9px;
}
.tree-badges button:hover { border-color: var(--edge-strong); background: var(--paper); }
.tree-badges button.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

/* Buscar, la vista y el estilo, juntos y plegables (en el móvil empiezan
   plegados: arbol.js). En pantalla ancha no se pliegan y el título sobra. */
.tree-opciones { margin-top: 0.85rem; border-top: 1px solid var(--line); padding-top: 0.7rem; }
.tree-who[hidden] + .tree-opciones { margin-top: 0; border-top: 0; padding-top: 0; }
.tree-opciones > summary {
  cursor: pointer;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  list-style-position: inside;
}
.tree-opciones[open] > summary { margin-bottom: 0.55rem; }
@media (min-width: 641px) {
  .tree-opciones > summary { display: none; }
}
.tree-opciones > * + * { margin-top: 0.55rem; }
.tree-look { display: flex; align-items: center; gap: 0.6rem; }
.tree-look label {
  margin: 0;
  flex: none;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.tree-style {
  flex: 1;
  min-width: 0;
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  background: var(--paper);
  cursor: pointer;
}
.tree-style:hover { border-color: var(--edge-strong); }
.tree-vista, .tree-rama {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  background: var(--paper);
  cursor: pointer;
}
.tree-vista:hover, .tree-rama:hover { border-color: var(--edge-strong); }

/* el buscador: los resultados, debajo y dentro del panel (que se desplaza) */
.tree-buscar[hidden] { display: none; }
.tree-buscar input { width: 100%; margin: 0; padding: 0.4rem 0.65rem; font-size: 0.88rem; }
.tree-buscar-lista {
  margin: 0.35rem 0 0;
  padding: 0.3rem;
  list-style: none;
  max-height: 14rem;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.tree-buscar-lista[hidden] { display: none; }
.tree-buscar-lista button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.4rem 0.55rem;
  text-align: left;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 8px;
}
.tree-buscar-lista button:hover, .tree-buscar-lista button:focus-visible { background: var(--soft-hover); }
.tree-buscar-lista .muted { font-size: 0.78rem; }

/* el reloj de arena: cuántas generaciones a cada lado */
.tree-reloj[hidden] { display: none; }
.tree-fondo { display: flex; align-items: center; gap: 0.35rem; }
.tree-fondo[hidden] { display: none; }
.tree-fondo + .tree-fondo { margin-top: 0.35rem; }
.tree-fondo span {
  flex: 1;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.tree-fondo button {
  margin: 0;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  font-size: 1.05rem;
  line-height: 1;
}
.tree-fondo button:hover { border-color: var(--edge-strong); background: var(--paper); }
.tree-fondo output { min-width: 1.4rem; text-align: center; font-variant-numeric: tabular-nums; font-size: 0.9rem; }

/* añadir familia desde el panel (en el reloj) y quedarse con una rama */
.tree-anadir { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
.tree-anadir[hidden], .tree-ramas[hidden] { display: none; }
.tree-anadir .btn { margin: 0; padding: 0.25rem 0.6rem; font-size: 0.8rem; }
.tree-ramas { margin-top: 0.2rem; }

/* «Rama de X · Ver todo», arriba en el centro */
.tree-rama-aviso {
  position: absolute;
  top: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: calc(100% - 2.2rem);
  padding: 0.35rem 0.4rem 0.35rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 18px var(--shadow);
  font-size: 0.88rem;
}
.tree-rama-aviso[hidden] { display: none; }
.tree-rama-aviso .tree-rama-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-rama-aviso .btn { margin: 0; padding: 0.25rem 0.7rem; font-size: 0.8rem; flex: none; }
@media (max-width: 640px) {
  .tree-rama-aviso { top: 4rem; }
}

@media (max-width: 640px) {
  /* en el móvil, que siempre quede árbol a la vista por encima */
  .tree-panel { right: 0.7rem; bottom: 0.7rem; width: calc(100% - 1.4rem); max-height: 58%; }
}

/* Los distintivos del árbol se dibujan en canvas, siempre en negro; cuando el
   botón está elegido el fondo es oscuro, así que se invierte para que se vea. */
.tree-badges button { width: 1.85rem; height: 1.85rem; }
.tree-badges button canvas { display: block; pointer-events: none; }
.tree-badges button.on canvas { filter: invert(1); }

/* Encuadre del retrato (recorte.js) */
.crop-dialog {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.1rem 1.2rem 1rem;
  background: var(--card);
  color: var(--ink);
  max-width: calc(100vw - 2rem);
}
.crop-dialog::backdrop { background: rgba(0,0,0,0.45); }
.crop-kicker {
  margin: 0 0 0.8rem;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.crop-view {
  border-radius: 10px;
  overflow: hidden;
  background: #111;
  line-height: 0;
}
.crop-view canvas { display: block; cursor: grab; touch-action: none; }
.crop-view canvas:active { cursor: grabbing; }
.crop-zoom { margin-top: 0.9rem; padding: 0; background: none; border: 0; accent-color: var(--ink); }
.crop-hint { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--muted); }
/* la foto que el navegador no sabe abrir (recorte.js) */
.crop-error { margin: 0.5rem 0 0; max-width: 24rem; font-size: 0.88rem; line-height: 1.45; color: var(--danger); }
.crop-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.9rem; }
.crop-actions button { margin: 0; }

/* --- Cuentas y árboles ---------------------------------------------------- */
body > header nav { row-gap: 0.4rem; }
body > header .nav-tree {
  color: var(--ink);
  font-family: var(--font-ui-display);
  font-size: 1.1rem;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 1rem;
  border-left: 1px solid var(--line);
}
/* --- La barra de arriba: una fila mientras quepa, y si no, el menú ---------
   El HTML es el mismo en los dos casos (.nav-menu): ancho, se pinta como la
   fila de siempre; estrecho, como un panel que abre el botón de tres rayas.
   El corte no es el mismo en todas las páginas: con un árbol delante hay siete
   pestañas más el nombre del árbol, así que se pliega mucho antes. */
.nav-menu {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: 1.6rem;
  min-width: 0;
}
.nav-menu[hidden] { display: flex; }          /* ancho: el menú no se esconde */
/* El botón de las tres rayas: solo sale cuando la barra no cabe. */
body > header .nav-burger {
  display: none;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  margin: 0 0 0 auto;
  padding: 0;
  background: none;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 10px;
  align-self: center;
  cursor: pointer;
}
body > header .nav-burger:hover { background: var(--soft); color: var(--ink); }
.nav-burger svg { display: block; }
.nav-burger .is-x { display: none; }
body > header .nav-burger[aria-expanded="true"] { background: var(--soft); color: var(--ink); }
.nav-burger[aria-expanded="true"] .is-lines { display: none; }
.nav-burger[aria-expanded="true"] .is-x { display: block; }
.nav-mine {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav-mine form { margin: 0; }
/* el sol/luna, el último de la fila: a la derecha del todo, siempre en el
   mismo sitio, pase lo que pase con lo que tiene al lado */
.nav-mine > form { order: 1; }
.nav-mine > .nav-menu-theme { order: 2; }
/* plegado es una columna: ahí manda el orden del HTML (el tema antes de salir) */
header.nav-tight .nav-mine > form,
header.nav-tight .nav-mine > .nav-menu-theme { order: 0; }
.nav-menu-who { display: none; }              /* quién eres: solo en el panel */
.nav-menu-theme {
  margin: 0;
  padding: 0;
  width: 1.9rem;
  height: 1.9rem;
  display: inline-grid;
  place-items: center;
  background: none;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}
.nav-menu-theme:hover { background: var(--soft); color: var(--ink); }
.nav-menu-theme svg { display: block; }
.nav-menu-theme .lbl { display: none; }       /* en la barra, solo el icono */
.nav-menu-theme .is-moon, .nav-menu-theme .is-sun { display: flex; align-items: center; gap: 0.5rem; }
.nav-menu-theme .is-sun, :root[data-theme="dark"] .nav-menu-theme .is-moon { display: none; }
:root[data-theme="dark"] .nav-menu-theme .is-sun { display: flex; }
.nav-mine form button {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
.nav-mine form button:hover { color: var(--ink); }
.nav-guest-chip {
  font-size: 0.8rem;
  color: var(--muted);
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
  align-self: center;
}
/* mirando como soporte: que no se olvide que el árbol no es tuyo */
.nav-guest-chip.is-support { color: var(--text-strong); background: var(--note-bg); border-color: var(--note-line); }

/* --- Estrecho: todo dentro del botón ---------------------------------------
   Quién decide no es un ancho inventado, sino si cabe: un script mide la barra
   y le pone «nav-tight» a la cabecera cuando se sale (ver base.html). Así una
   página con siete pestañas se pliega antes que una con cuatro, y también vale
   si alguien tiene la letra más grande. */
body > header nav { flex-wrap: nowrap; position: relative; }

/* Nada de encoger ni de partir palabras: si no cabe, tiene que **sobrar**, que
   es lo que mide el script para decidir que toca plegar. Si los enlaces se
   encogen, «Crear cuenta» se parte en dos líneas y la barra nunca «se sale». */
body > header nav > *,
body > header .nav-menu > a,
body > header .nav-mine > a,
body > header .nav-mine > button,
body > header .nav-mine > form,
body > header .nav-mine > form > button {
  flex: none;
  white-space: nowrap;
}
body > header .nav-tree { flex: 0 1 auto; }   /* el nombre del árbol sí se recorta */

header.nav-tight .nav-burger { display: inline-grid; }
header.nav-tight .nav-menu[hidden] { display: none; }
header.nav-tight .nav-menu {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 2rem;
  z-index: 20;
  flex: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0.1rem;
  min-width: 13.5rem;
  max-width: calc(100vw - 3rem);
  padding: 0.4rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 30px var(--shadow-md);
  text-align: left;
  /* en una pantalla bajita (el móvil tumbado) el panel no cabe entero: se
     desplaza por dentro, para que «Modo noche» y «Salir» se alcancen siempre */
  max-height: calc(100vh - 5.5rem);
  max-height: calc(100dvh - 5.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Abierto, el panel va por encima de las barras que flotan abajo (la de
   editar el sitio y la de «como visitante», z-index 30): la cabecera entera
   sube, y con ella el panel, que vive dentro. Por debajo del visor de fotos
   (50) y de los avisos (60). */
body > header.nav-tight:has(#nav-menu:not([hidden])) { z-index: 40; }
/* en el móvil, menos margen a los lados: 2rem se comen media barra */
@media (max-width: 640px) {
  body > header nav { padding-left: 1.1rem; padding-right: 1.1rem; }
  header.nav-tight .nav-menu { right: 1.1rem; }
}
header.nav-tight .nav-mine {
  margin: 0.3rem 0 0;
  padding-top: 0.3rem;
  border-top: 1px solid var(--line);
  flex-direction: column;
  align-items: stretch;
  gap: 0.1rem;
}
header.nav-tight .nav-menu-who {
  display: block;
  margin: 0.25rem 0.3rem 0.45rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
header.nav-tight .nav-menu-who .muted { display: block; font-size: 0.8rem; font-weight: 400; }
header.nav-tight .nav-menu a,
header.nav-tight .nav-menu button,
header.nav-tight .nav-menu form {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: 9px;
  background: none;
  font-size: 0.92rem;
  text-align: left;
}
body > header.nav-tight .nav-menu a,
body > header.nav-tight .nav-menu button { color: var(--text-strong); }
body > header.nav-tight .nav-menu a:hover,
body > header.nav-tight .nav-menu button:hover { background: var(--soft); color: var(--ink); }
body > header.nav-tight .nav-menu a.here { color: var(--ink); background: var(--soft); font-weight: 600; }
body > header.nav-tight .nav-menu .nav-cta { background: none; border: 0; padding: 0.5rem 0.6rem; }

/* «Exportar», destacada de las demás pestañas: en negativo, como un botón
   redondeado. inline-block y no flex, para que la fila (que alinea por la
   línea de base) la deje a la altura de las otras. Va con el id del menú para
   mandar también sobre las cabeceras encima de una foto (Revista, donde el
   negativo es blanco) y en el panel plegado. */
#nav-menu > a.nav-exportar {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  margin: -0.2rem 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
}
#nav-menu > a.nav-exportar:hover { background: var(--ink-hover); color: var(--on-ink); }
#nav-menu > a.nav-exportar.here { font-weight: 600; }
body.theme-revista.site-home > header:not(.nav-tight) #nav-menu > a.nav-exportar { background: #fff; color: #111; }
header.nav-tight #nav-menu > a.nav-exportar { display: flex; margin: 0; padding: 0.5rem 0.6rem; border-radius: 9px; }
header.nav-tight .nav-menu-theme { border-radius: 9px; }
header.nav-tight .nav-menu-theme .lbl { display: inline; }
header.nav-tight .nav-mine form { border: 0; }
body > header.nav-tight .nav-mine form button { color: var(--muted); }

/* el tema «revista» pinta la cabecera sobre una foto; el panel es una tarjeta
   con su propio fondo, así que su letra no es la de la cabecera */
body.theme-revista.site-home > header .nav-burger,
body.theme-revista.site-home > header .nav-guest-chip,
body.theme-revista.site-home > header .nav-menu-theme { color: rgba(255, 255, 255, 0.82); }
body.theme-revista.site-home > header .nav-burger:hover,
body.theme-revista.site-home > header .nav-burger[aria-expanded="true"],
body.theme-revista.site-home > header .nav-menu-theme:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--on-photo);
}
body.theme-revista.site-home > header.nav-tight .nav-menu a,
body.theme-revista.site-home > header.nav-tight .nav-menu button { color: var(--text-strong); }
body.theme-revista.site-home > header.nav-tight .nav-menu a:hover,
body.theme-revista.site-home > header.nav-tight .nav-menu button:hover { color: var(--ink); }
body.theme-revista.site-home > header.nav-tight .nav-mine form button { color: var(--muted); }

.auth { max-width: 26rem; margin: 2rem auto 0; }
.auth-form button { width: 100%; margin-top: 1.2rem; }
.auth-switch { margin-top: 1rem; text-align: center; }

/* «Mis árboles»: cada árbol es una ficha —su portada de fondo, sus cifras,
   sus caras y sus puertas— y todos pesan lo mismo. Con uno solo, la ficha
   ocupa la página; con varios, van en una rejilla de fichas iguales (.is-card).
   Si hay portada, el texto va sobre un degradado oscuro con colores fijos,
   como cualquier foto de portada; si no, sobre el papel de siempre. */
.tree-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  margin: 0 0 2rem;
  background: var(--soft);
}
.tree-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tree-hero.has-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.78) 72%);
}
.tree-hero-in { position: relative; z-index: 1; padding: 2rem 2rem 1.6rem; }
.tree-hero.has-cover .tree-hero-in { padding-top: 7rem; color: #fff; }
.tree-hero-kicker {
  margin: 0 0 0.3rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.tree-hero.has-cover :is(.tree-hero-kicker, .muted, .tree-hero-figures) { color: rgba(255, 255, 255, 0.78); }
.tree-hero.has-cover a { color: #fff; }
.tree-hero h1 { margin: 0 0 0.6rem; font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.02; }
.tree-hero h1 a { color: inherit; text-decoration: none; }
.tree-hero h1 a:hover { text-decoration: underline; text-underline-offset: 0.12em; }
.tree-hero-figures { display: flex; flex-wrap: wrap; margin: 0; font-size: 0.86rem; color: var(--muted); }
.tree-hero-figures span + span::before { content: "·"; margin: 0 0.5rem; opacity: 0.7; }

/* las caras: lo que hace que un árbol parezca gente y no un número */
.tree-hero-faces { list-style: none; display: flex; margin: 1.1rem 0 0; padding: 0; }
.tree-hero-faces li { margin-left: -0.6rem; }
.tree-hero-faces li:first-child { margin-left: 0; }
.tree-hero-faces img,
.tree-hero-more a {
  display: block;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
  border: 2px solid var(--paper);
  background: var(--soft);
}
.tree-hero.has-cover :is(.tree-hero-faces img, .tree-hero-more a) { border-color: rgba(255, 255, 255, 0.85); }
.tree-hero.has-cover .tree-hero-more a { background: rgba(255, 255, 255, 0.92); color: #111; }
.tree-hero-more a {
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: none;
}
.tree-hero-go { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.3rem 0 0; }
.tree-hero-go .btn { margin: 0; }
.tree-hero.has-cover .tree-hero-go .btn {
  background: #fff;
  color: #111;
  border-color: #fff;
}
.tree-hero.has-cover .tree-hero-go .btn.ghost {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.tree-hero-foot { margin: 1.2rem 0 0; font-size: 0.86rem; }
.tree-hero-foot p { margin: 0.25rem 0 0; }
/* con varios árboles: la misma ficha, a tamaño de tarjeta y todas iguales */
.tree-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  margin: 0 0 2rem;
}
.tree-hero.is-card { margin: 0; display: flex; flex-direction: column; }
.tree-hero.is-card .tree-hero-in { padding: 1.4rem 1.4rem 1.2rem; flex: 1; display: flex; flex-direction: column; }
.tree-hero.is-card.has-cover .tree-hero-in { padding-top: 5rem; }
/* el título, con la misma letra que el grande (el h1), solo que más pequeño */
.tree-hero.is-card h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.03em;
  font-size: clamp(2rem, 3.4vw, 2.5rem);
  line-height: 1.02;
}
.tree-hero.is-card h2 a { color: inherit; text-decoration: none; }
.tree-hero.is-card h2 a:hover { text-decoration: underline; text-underline-offset: 0.12em; }
.tree-hero.is-card .tree-hero-faces img, .tree-hero.is-card .tree-hero-more a { width: 2.6rem; height: 2.6rem; }
.tree-hero.is-card .tree-hero-go { margin-top: 1.1rem; }
.tree-hero.is-card .tree-hero-go .btn { font-size: 0.85rem; padding: 0.4rem 0.8rem; }
/* los botones y el pie abajo del todo, aunque una ficha diga menos que otra */
.tree-hero.is-card .tree-hero-go { margin-top: auto; padding-top: 1.1rem; }
.tree-hero-foot form { margin: 0.3rem 0 0; }
.tree-hero.has-cover .tree-hero-foot .linkish { color: rgba(255, 255, 255, 0.78); }
.new-tree.is-quiet { max-width: 26rem; opacity: 0.8; }
.new-tree.is-quiet:hover, .new-tree.is-quiet:focus-within { opacity: 1; }
@media (max-width: 640px) {
  .tree-hero-in { padding: 1.4rem 1.2rem 1.2rem; }
  .tree-hero.has-cover .tree-hero-in { padding-top: 5rem; }
  .tree-hero-faces img, .tree-hero-more a { width: 2.6rem; height: 2.6rem; }
}

.tucked { margin: 0 0 1.6rem; }
.tucked summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }
.new-tree { max-width: 30rem; }

.small-print { font-size: 0.82rem; margin: 0.6rem 0 0; }
/* El nombre de una fila de la tabla de gente es un enlace, pero no tiene que
   parecerlo: la fila entera ya responde al clic y ocho enlaces azules por
   fila serían una tabla ilegible. */
.cell-name { color: inherit; text-decoration: none; }
tr:hover .cell-name { text-decoration: underline; }
/* La familia inmediata en texto, debajo del lienzo del árbol. */
.family-links {
  display: grid;
  gap: 1.2rem 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.family-links h3 {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.family-links ul { margin: 0; }
/* aquí no hacen falta las rayas de ul.plain: son tres columnas cortas y las
   líneas las partían en trozos */
.family-links ul.plain li { padding: 0; border: 0; line-height: 1.6; }
.family-links a { text-decoration: none; }
.family-links a:hover { text-decoration: underline; }
.members { margin: 0; }
.add-member { margin-top: 1.2rem; }

fieldset.bare { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.bare:disabled { opacity: 0.6; }
.badge-row { margin-top: 0.6rem; }

.bio-by { font-size: 0.82rem; margin: 0.35rem 0 0; }
.bio-others {
  margin: 2.2rem 0 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.bio-version { border-top: 1px solid var(--line); padding: 1rem 0; }
.bio-version form { margin: 0.4rem 0 0; }
.product-bar-actions form { margin: 0; }
.product-bar-actions form .btn { margin-top: 0; }
/* con display propio, el atributo hidden no basta: una ficha en blanco no
   enseña ni acciones ni distintivos */
.tree-acts[hidden], .tree-badges[hidden], .tree-panel-kicker[hidden] { display: none; }

/* --- La plaza ------------------------------------------------------------ */
.avatar {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--photo);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.avatar.big { width: 4.2rem; height: 4.2rem; font-size: 1.5rem; font-family: var(--font-display); font-weight: 400; }
.plaza-head { margin-bottom: 1.8rem; }
.plaza-head h1 { font-size: 3.2rem; }
.plaza-kicker, .plaza-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.9rem;
}
.plaza { display: grid; gap: 2.2rem; }
@media (min-width: 900px) {
  .plaza { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .plaza-side { position: sticky; top: 5rem; }
}
.plaza-main { display: flex; flex-direction: column; gap: 2.6rem; min-width: 0; }
.plaza-side { display: flex; flex-direction: column; gap: 1rem; }
.plaza-block h3 { font-size: 1rem; font-weight: 600; margin: 0 0 0.15rem; }
.plaza-block p { margin: 0; }

.plaza-tag {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--soft);
}
.plaza-card { border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.2rem; }
.plaza-card p { margin: 0; }
.plaza-card-foot { margin-top: 0.8rem !important; font-size: 0.88rem; }
.plaza-trees { list-style: none; margin: 0; padding: 0; }
.plaza-trees li { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.45rem 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.plaza-trees li:last-child { border-bottom: 0; }
.plaza-trees a { text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plaza-trees a:hover { text-decoration: underline; }
.plaza-trees .muted { font-size: 0.8rem; white-space: nowrap; }

/* --- Tu cuenta ------------------------------------------------------------ */
.account-head { display: flex; gap: 1.2rem; align-items: center; margin-bottom: 1.4rem; }
.account-stats {
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.account-stats li { background: var(--soft); border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.88rem; color: var(--muted); }
.account-stats a { color: inherit; text-decoration: none; }
.account-stats strong { color: var(--ink); font-weight: 600; }

/* --- El sitio de un árbol ------------------------------------------------------- */
.site-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}
.site-hero {
  position: relative;
  width: 100vw;
  margin: -2.2rem 0 1.6rem calc(50% - 50vw);
  padding: 4.2rem max(1.5rem, calc(50vw - 540px + 1.5rem)) 2.6rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--soft-2), var(--paper));
  overflow: hidden;
}
.site-hero.has-cover {
  min-height: clamp(320px, 58vh, 600px);
  display: flex;
  align-items: flex-end;
  color: #fff;
  border-bottom: 0;
  background: #222;
}
.site-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site-hero.has-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.66));
}
.site-hero-text { position: relative; z-index: 1; max-width: 48rem; }
.site-hero h1 { font-size: clamp(2.7rem, 6.4vw, 4.8rem); line-height: 0.98; margin: 0 0 0.7rem; }
.site-kicker {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}
.site-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.25;
  color: var(--text);
  margin: 0;
}
.has-cover .site-kicker, .has-cover .site-subtitle { color: rgba(255, 255, 255, 0.86); }
/* los botones de quien edita (parts.tools): una barra suelta, abajo y en el
   centro, por encima de todo y fuera de la portada, igual con todos los estilos */
.site-tools {
  position: fixed;
  left: 50%;
  bottom: 1.1rem;
  z-index: 30;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: calc(100vw - 1.6rem);
  padding: 0.4rem 0.4rem 0.4rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 34px var(--shadow-md);
  color: var(--ink);
  white-space: nowrap;
}
.site-tools-que { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-right: 0.3rem; }
.site-tools .btn, .site-tools button { font-size: 0.88rem; padding: 0.5rem 1rem; }
.site-tools .btn.ghost { background: transparent; border-color: var(--edge); color: var(--ink); }
.site-tools .btn.ghost:hover { background: var(--soft); }
.site-tools .site-tools-ojo { display: inline-flex; align-items: center; gap: 0.4rem; }
/* que el pie de la página no se quede debajo de la barra */
body.has-site-tools main, body.is-visita main { padding-bottom: 7rem; }
@media (max-width: 560px) {
  /* en un móvil estrecho (360–400 px) el ojo y los tres botones no caben en
     una fila (piden unos 400 px): se reparten en dos, centrados, y la píldora
     pasa a caja redondeada. El ancho, el de su contenido hasta el tope: con
     left: 50% el navegador solo le daría media pantalla para repartirse */
  .site-tools { bottom: 0.7rem; padding-left: 0.4rem; gap: 0.3rem; flex-wrap: wrap; justify-content: center; border-radius: 22px; width: max-content; }
  .site-tools-que { display: none; }
  .site-tools .btn, .site-tools button { font-size: 0.82rem; padding: 0.45rem 0.75rem; }
  .site-tools .site-tools-ojo { padding: 0.45rem 0.6rem; }
  .site-tools-ojo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* «Ver como visitante»: la barra que avisa y deja volver, donde va la de
   editar (abajo y en el centro), oscura para que no se confunda con la página */
.visita-barra {
  position: fixed; left: 50%; bottom: 1.1rem; z-index: 30; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.75rem; max-width: calc(100vw - 1.6rem);
  padding: 0.45rem 0.45rem 0.45rem 1.05rem; border-radius: 999px;
  background: #1f1c18; color: #f3ede2; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-family: var(--font-ui); font-size: 0.9rem; line-height: 1.25;
}
:root[data-theme="dark"] .visita-barra { background: #f3ede2; color: #1f1c18; }
.visita-barra > svg { flex: none; opacity: 0.85; }
.visita-barra p { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.visita-barra p span { font-size: 0.8rem; opacity: 0.72; }
.visita-barra form { margin: 0; flex: none; }
.visita-barra button { margin: 0; font-size: 0.88rem; padding: 0.55rem 1.05rem; border-radius: 999px;
  background: #f3ede2; color: #1f1c18; border: 0; }
:root[data-theme="dark"] .visita-barra button { background: #1f1c18; color: #f3ede2; }
@media (max-width: 560px) {
  .visita-barra { bottom: 0.7rem; width: calc(100vw - 1.4rem); gap: 0.55rem; padding-left: 0.8rem; font-size: 0.85rem; }
  .visita-barra p span { font-size: 0.8rem; }
}
.site-figures {
  display: flex;
  flex-wrap: wrap;
  margin: 1.1rem 0 0;
  font-size: 0.84rem;
  color: var(--muted);
}
.site-figures span + span::before { content: "·"; margin: 0 0.55rem; opacity: 0.7; }
.has-cover .site-figures { color: rgba(255, 255, 255, 0.78); }
.site-tools form, .site-tools .btn, .site-tools button { margin: 0; }
.site-about {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.42;
  max-width: 44rem;
  margin: 0 0 2.2rem;
}
.site-about p { margin: 0 0 0.8em; }
.site-ghost {
  color: var(--muted);
  border: 1px dashed var(--edge);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
}
p.site-about.site-ghost { font-size: 0.95rem; max-width: none; }

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.26rem 0.72rem;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font-size: 0.86rem;
  text-decoration: none;
}
a.chip:hover { background: var(--soft-hover); }
.site-section { margin: 0 0 2.8rem; }

.site-people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 1.4rem 1rem;
}
.site-person { display: flex; flex-direction: column; gap: 0.1rem; color: inherit; text-decoration: none; font-size: 0.92rem; }
.site-person-face {
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--photo);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.65rem;
}
.site-person-face img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.site-person:hover .site-person-face img { transform: scale(1.03); }
.site-person-face span { font-family: var(--font-display); font-size: 2.8rem; color: var(--faint); }
.site-person strong { font-weight: 600; }
.site-person:hover strong { text-decoration: underline; text-underline-offset: 0.15em; }
.site-person-note { color: var(--text); font-size: 0.85rem; line-height: 1.4; margin-top: 0.3rem; }

.post-card-meta { font-size: 0.8rem; color: var(--muted); margin: 0; }

.post-card-by { font-size: 0.82rem; color: var(--muted); margin: 0.3rem 0 0; }

.site-empty { border: 1px dashed var(--edge); border-radius: 14px; padding: 1.4rem; color: var(--muted); }
.site-empty p { margin: 0; }
.site-drafts { margin-top: 2.2rem; background: var(--soft); border-radius: 14px; padding: 1.1rem 1.2rem 0.4rem; }
.site-drafts ul.plain li:last-child { border-bottom: 0; }
.linkish-a { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }

.site-foot { margin-top: 3rem; font-size: 0.85rem; }

/* editar la portada */
/* «Editar portada» (site_edit.html), sobre la maqueta de los ajustes: lo
   primero, cómo se ve el sitio (el estilo de ahora, en grande, y los demás) */
.se-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.se-cab .btn { margin: 0; }
.se-cab-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 0.45rem; }
.se-cab-acts form { margin: 0; }
.se-cab-acts .linkish { font-size: 0.88rem; }
@media (max-width: 560px) { .se-cab-acts { align-items: flex-start; } }
.se-ahora {
  display: grid;
  gap: 1rem 1.6rem;
  align-items: center;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  max-width: 46rem;
}
@media (min-width: 640px) { .se-ahora { grid-template-columns: 15rem minmax(0, 1fr); } }
.se-ahora .se-ahora-dibujo { height: 150px; padding: 10px; border-radius: 12px; background-color: var(--soft); }
.se-ahora-texto p { margin: 0 0 0.35rem; }
.se-ahora-etiqueta { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.se-ahora-nombre { font-family: var(--font-display); font-size: 2.1rem; line-height: 1.05; }
.se-ahora-nombre .theme-pro { vertical-align: 0.5em; }
.se-ahora-tuyo { font-size: 0.9rem; color: var(--ok); }
.se-ahora .aj-acts { margin-top: 1rem; }
.se-mas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.4rem;
  max-width: 46rem;
  margin: 1rem 0 0;
  padding: 0.9rem 1.1rem;
  border-radius: 14px;
  background: var(--note-bg);
  border: 1px solid var(--note-line);
}
.se-mas p { flex: 1 1 22rem; margin: 0; font-size: 0.95rem; line-height: 1.5; }
.se-mas .btn { margin: 0; }
.se-estilos { margin-top: 1.6rem; }
.se-estilos h3 { margin: 0 0 0.8rem; font-size: 1.08rem; }
/* nueve estilos: tres filas de tres (dos en el móvil), ninguno suelto al final */
.se-estilos .theme-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 620px) { .se-estilos .theme-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.se-estilos .theme-sketch { height: 104px; }
/* los de pago, sin plan, se ven igual de bien: probarlos es gratis y es lo
   que los vende */
.se-estilos .theme-card.is-locked { opacity: 1; cursor: default; }
.se-estilos .theme-opt.is-pro .theme-see { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.se-estilos .theme-opt.is-pro .theme-see:hover { background: var(--ink-hover); }
.se-form .site-cover-pick { max-width: 40rem; }
/* el logo: el de día sobre claro y el de noche sobre oscuro, como se verán */
.se-logo-consejo { margin: 0 0 1.2rem; }
.se-logos { display: grid; gap: 1rem; max-width: 44rem; margin: 0 0 0.6rem; }
@media (min-width: 620px) { .se-logos { grid-template-columns: 1fr 1fr; } }
.se-logo-titulo { margin: 0 0 0.5rem; font-size: 0.95rem; }
.se-logo-titulo .muted { display: block; font-size: 0.86rem; }
.se-logo-caja {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  margin: 0;
  border: 1px dashed var(--edge);
  border-radius: 14px;
  background: #ffffff;
  cursor: pointer;
  overflow: hidden;
}
.is-noche .se-logo-caja { background: #161616; border-color: #3a3a3a; }
.se-logo-caja.tiene { border-style: solid; }
.se-logo-caja img { max-width: 70%; max-height: 104px; object-fit: contain; }
.se-logo-caja input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.se-logo-texto {
  position: absolute;
  bottom: 0.6rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  font-size: 0.84rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.se-logo-caja:not(.tiene) .se-logo-texto { position: static; }
.featured-note .btn { margin: 0; }
.site-cover-pick {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 7;
  margin: 0;
  border: 1px dashed var(--edge);
  border-radius: 14px;
  background: var(--soft);
  overflow: hidden;
  cursor: pointer;
  color: var(--ink);
}
.site-cover-pick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site-cover-pick input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.site-cover-pick-text {
  position: relative;
  background: var(--glass);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: 0.86rem;
}
.site-cover-pick.has-cover { border-style: solid; border-color: var(--line); }
.featured-list { list-style: none; margin: 0 0 0.6rem; padding: 0; }
.featured-list li {
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.featured-face img, .featured-face .avatar { width: 2.8rem; height: 2.8rem; border-radius: 50%; object-fit: cover; display: block; }
.featured-face .avatar { display: flex; }
.featured-main { min-width: 0; font-size: 0.92rem; }
.featured-note { display: flex; gap: 0.6rem; align-items: center; margin: 0.35rem 0 0; }
.featured-note input { padding: 0.35rem 0.6rem; font-size: 0.86rem; }
.featured-note button { flex: none; margin: 0; }
.featured-acts { display: flex; gap: 0.25rem; }
.featured-acts form { margin: 0; }
button.icon-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  font-size: 0.95rem;
  line-height: 1;
}
button.icon-btn:hover { background: var(--soft); }
button.icon-btn:disabled { opacity: 0.3; cursor: default; background: var(--paper); }

/* --- Una entrada ------------------------------------------------------------------- */
.post { max-width: 44rem; margin: 0 auto; }
/* la foto de portada, en la misma columna que el texto: a sangre y a 72vh se
   comía la pantalla entera y el título quedaba debajo del pliegue. Aquí es lo
   que es, una foto que abre la entrada. */
.post-cover { width: auto; margin: 0 0 2.2rem; }
.post-cover img {
  display: block;
  width: 100%;
  max-height: 30rem;
  object-fit: cover;
  border-radius: 14px;
}
.post-head { margin-bottom: 2.4rem; }
.post-kicker { font-size: 0.8rem; color: var(--muted); margin: 0 0 0.9rem; }
.post-kicker a { color: var(--ink); text-decoration: none; font-weight: 600; }
.post-kicker a:hover { text-decoration: underline; }
h1.post-title { font-size: clamp(2.5rem, 5.4vw, 3.8rem); line-height: 1.02; margin: 0 0 0.9rem; }
.post-dek {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.55rem;
  line-height: 1.3;
  color: var(--text);
  margin: 0;
}
.post-byline { display: flex; align-items: center; gap: 0.7rem; margin-top: 1.4rem; font-size: 0.9rem; }
.post-byline .avatar { width: 2.1rem; height: 2.1rem; font-size: 0.7rem; }
.post-byline .btn { margin: 0 0 0 auto; }
.post-draft-note {
  background: var(--note-bg);
  border: 1px solid var(--note-line);
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  font-size: 0.88rem;
  margin: 1.2rem 0 0;
}
.post-people { margin-top: 3rem; }
.post-people ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.post-nav a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: inherit;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.2;
}
.post-nav a .muted { font-family: var(--font-body); font-size: 0.8rem; }
.post-nav a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.post-nav-newer { text-align: right; grid-column: 2; }
.post-back { margin-top: 2.2rem; font-size: 0.9rem; }
.post-back a { color: var(--muted); }

/* el cuerpo: igual al leer que al escribir */
.prose { font-size: 1.13rem; line-height: 1.78; color: var(--text-strong); }
.prose > p { margin: 0 0 1.15em; }
.prose h2, .prose h3, .prose h4 { color: var(--ink); }
.prose h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.05rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 1.9em 0 0.45em;
}
.prose h3 { font-size: 1.2rem; font-weight: 600; line-height: 1.35; margin: 1.7em 0 0.35em; }
.prose h4 { font-size: 1rem; font-weight: 600; margin: 1.5em 0 0.3em; }
.prose a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.prose mark, .prose .cdx-marker { background: var(--mark); color: inherit; padding: 0 0.1em; border-radius: 2px; }
.prose code { font-size: 0.9em; background: var(--soft); padding: 0.1em 0.35em; border-radius: 5px; }
.prose > ul, .prose > ol { padding-left: 1.35em; margin: 0 0 1.15em; }
.prose li { margin: 0.3em 0; }
.prose li > ul, .prose li > ol { margin: 0.2em 0; padding-left: 1.35em; }
.prose ul.checklist, .prose ul.checklist ul { list-style: none; padding-left: 0; }
.prose ul.checklist li { position: relative; padding-left: 1.9em; }
.prose ul.checklist ul { padding-left: 1.2em; }
.prose .check {
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 1.05em;
  height: 1.05em;
  border: 1.5px solid var(--edge-strong);
  border-radius: 4px;
}
.prose li.done > .check { background: var(--ink); border-color: var(--ink); }
.prose li.done > .check::after {
  content: "";
  position: absolute;
  left: 0.3em;
  top: 0.08em;
  width: 0.28em;
  height: 0.55em;
  border: solid var(--on-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.prose li.done { color: var(--muted); }
.post-quote { margin: 2em 0; padding: 0.1em 0 0.1em 1.4rem; border-left: 2px solid var(--ink); }
.post-quote p {
  font-family: var(--font-display);
  font-size: 1.65rem;
  line-height: 1.32;
  margin: 0;
}
.post-quote cite { display: block; margin-top: 0.7rem; font-style: normal; font-size: 0.85rem; color: var(--muted); }
.post-quote cite::before { content: "— "; }
.post-quote.is-center { border: 0; padding: 0; text-align: center; }
.post-delim { border: 0; margin: 2.6em 0; text-align: center; height: auto; }
.post-delim::before { content: "∗ ∗ ∗"; letter-spacing: 0.7em; color: var(--faint); font-size: 1rem; }
.post-figure { margin: 2.2em 0; }
.post-figure img { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--photo); }
.post-figure figcaption, .post-embed figcaption {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
  margin-top: 0.7rem;
}
.post-figure.is-wide { width: min(66rem, calc(100vw - 2rem)); margin-left: 50%; transform: translateX(-50%); }
.post-embed { margin: 2.2em 0; }
.post-embed-frame { aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #111; }
.post-embed-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.post-person, .cdx-person-card {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.8rem 1rem;
  margin: 1.8em 0;
  color: inherit;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.35;
  background: var(--card);
}
.post-person:hover { border-color: var(--edge); }
.post-person img, .post-person .avatar, .cdx-person-card .avatar {
  flex: none;
  width: 3.3rem;
  height: 3.3rem;
  border-radius: 50%;
  object-fit: cover;
}
.post-person-text, .cdx-person-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.post-person-years { color: var(--muted); font-size: 0.88rem; }
.post-person-go { font-size: 0.82rem; color: var(--muted); white-space: nowrap; }
.post-person:hover .post-person-go { color: var(--ink); }

/* --- Escribir una entrada -------------------------------------------------------- */
body.writing > header { position: static; }
.writer-bar {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: -2.2rem 0 1.6rem;
  padding: 0.7rem 0;
  background: var(--glass);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.writer-back {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.writer-back:hover { color: var(--ink); }
.writer-state { display: flex; align-items: center; gap: 0.6rem; margin-right: auto; min-width: 0; }
.writer-pill {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
}
.writer-pill.is-live { background: var(--ok-bg); color: var(--ok); }
.writer-saved { font-size: 0.82rem; color: var(--muted); white-space: nowrap; }
.writer-saved.is-error { color: var(--danger); }
.writer-acts { display: flex; align-items: center; gap: 0.5rem; }
.writer-acts form, .writer-acts .btn, .writer-acts button { margin: 0; }
.writer-more { position: relative; }
.writer-more summary {
  list-style: none;
  cursor: pointer;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  line-height: 1.2;
  letter-spacing: 0.08em;
}
.writer-more summary::-webkit-details-marker { display: none; }
.writer-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  min-width: 13rem;
  padding: 0.9rem 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 32px var(--shadow);
}
.writer-menu button.linkish { font-size: 0.9rem; color: var(--ink); }
.writer-menu button.linkish.danger { color: var(--danger); }
@media (max-width: 640px) {
  .writer-bar { flex-wrap: wrap; gap: 0.5rem 0.8rem; }
  .writer-back { max-width: 9rem; }
}

.writer-cover { position: relative; max-width: 42rem; margin: 0 auto 1.2rem; border-radius: 14px; overflow: hidden; }
.writer-cover img { display: none; }
.writer-cover.has-cover { max-width: 56rem; aspect-ratio: 16 / 7; background: var(--photo); }
.writer-cover.has-cover img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
label.writer-cover-add {
  position: relative;
  display: inline-flex;
  margin: 0;
  padding: 0.38rem 0.85rem;
  border: 1px dashed var(--edge);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.86rem;
  cursor: pointer;
}
label.writer-cover-add:hover { color: var(--ink); border-color: var(--edge-strong); }
.writer-cover-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; padding: 0; }
.writer-cover-change, button.writer-cover-drop { display: none; }
.has-cover .writer-cover-empty { display: none; }
.has-cover .writer-cover-change { display: inline; }
.has-cover label.writer-cover-add, .has-cover button.writer-cover-drop {
  position: absolute;
  bottom: 0.8rem;
  background: var(--glass);
  border: 0;
  color: var(--ink);
}
.has-cover label.writer-cover-add { right: 6rem; }
.has-cover button.writer-cover-drop {
  display: inline-flex;
  right: 0.8rem;
  margin: 0;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  font-size: 0.86rem;
}
.writer-cover.is-loading::after {
  content: "Subiendo…";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--glass);
  font-size: 0.9rem;
}
.writer-page { max-width: 42rem; margin: 0 auto; }
/* el aviso de editor.js cuando Editor.js no ha llegado: a la vista, arriba */
.writer-roto { max-width: 42rem; margin: 1.2rem auto; line-height: 1.5; }
.writer-help[hidden] { display: none; }
textarea.writer-title, textarea.writer-dek {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  resize: none;
  overflow: hidden;
  padding: 0;
  border-radius: 0;
  color: var(--ink);
  font-family: var(--font-display);
}
/* el título y la entradilla son la hoja misma, como el cuerpo de Editor.js:
   el cursor ya dice dónde se escribe, un aro alrededor estorbaría */
textarea.writer-title:focus, textarea.writer-dek:focus { background: transparent; border: 0; outline: none; }
textarea.writer-title { font-size: clamp(2.4rem, 5.4vw, 3.6rem); line-height: 1.05; letter-spacing: -0.03em; margin: 0.4rem 0 0.7rem; }
textarea.writer-dek { font-style: italic; font-size: 1.5rem; line-height: 1.3; color: var(--text); }
.writer-meta { font-size: 0.85rem; margin: 1rem 0 1.8rem; }
.writer-body { min-height: 42vh; }
.writer-help { font-size: 0.84rem; margin-top: 2.4rem; border-top: 1px solid var(--line); padding-top: 1rem; }
kbd {
  font: inherit;
  font-size: 0.8em;
  padding: 0.05em 0.4em;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--paper);
}

/* Editor.js: sus botones y campos no son los de la app (:where no suma
   especificidad, así ganan las clases del propio editor) */
:where(.codex-editor) button {
  margin: 0;
  padding: 0;
  background: none;
  color: inherit;
  border-radius: 0;
  font-size: inherit;
  display: revert;
}
:where(.codex-editor) button:hover { background: none; }
:where(.codex-editor) input { width: auto; padding: revert; border: revert; border-radius: revert; background: revert; }
.writer-body .ce-block__content, .writer-body .ce-toolbar__content { max-width: none; }
.writer-body .ce-paragraph { line-height: 1.78; padding: 0.35em 0; }
.writer-body .ce-header { padding: 0.2em 0; }
.writer-body h2.ce-header { margin: 1.2em 0 0.2em; }
.writer-body h3.ce-header { margin: 1em 0 0.1em; }
.writer-body .cdx-input { border: 0; box-shadow: none; border-radius: 0; padding: 0.35em 0; }
.writer-body .cdx-quote { margin: 1.2em 0; border-left: 2px solid var(--ink); padding-left: 1.3rem; }
.writer-body .cdx-quote__text {
  min-height: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.32;
}
.writer-body .cdx-quote__caption { font-size: 0.86rem; color: var(--muted); }
.writer-body .image-tool__image { border-radius: 10px; }
.writer-body .image-tool__caption { font-size: 0.86rem; color: var(--muted); text-align: center; }
.writer-body .cdx-button {
  box-shadow: none;
  border: 1px dashed var(--edge);
  border-radius: 12px;
  color: var(--muted);
  padding: 1.1rem;
}
.writer-body .cdx-button:hover { color: var(--ink); border-color: var(--edge-strong); background: var(--soft); }
.writer-body .ce-delimiter { line-height: 1; padding: 1.2em 0; }
.writer-body .embed-tool__caption { font-size: 0.86rem; }
.cdx-person { margin: 0.8em 0; }
.cdx-person-card { margin: 0; }
.cdx-person-card .linkish { flex: none; }
input.cdx-person-input {
  width: 100%;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  font: inherit;
  font-size: 0.98rem;
}
.cdx-person-hits { list-style: none; margin: 0.35rem 0 0; padding: 0; max-height: 17rem; overflow: auto; }
button.cdx-person-hit {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.4;
  cursor: pointer;
}
button.cdx-person-hit:hover, button.cdx-person-hit:focus { background: var(--soft); }
button.cdx-person-hit .muted { font-size: 0.82rem; }
.cdx-person-none { padding: 0.5rem 0.7rem; font-size: 0.9rem; }

/* con un aviso encima, la portada no se le sube por encima */
main > .flash ~ .site-hero,
main > .flash ~ .writer .writer-bar { margin-top: 0; }

/* las entradas, en tarjetas con su foto encima */

/* --- Lecturas: cuánta gente lee las entradas ----------------------------------------- */
.posts-acts { display: flex; align-items: center; gap: 0.5rem; margin: 0; flex: none; }
.posts-acts .btn, .posts-acts form, .posts-acts button { margin: 0; }
.post-reads { margin: 1.1rem 0 0; font-size: 0.86rem; }
.post-reads strong { color: var(--ink); }

.read-figures {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin: 0 0 2.2rem;
  padding: 0;
}
.read-figures li { display: flex; flex-direction: column; }
.read-figures strong { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; }
.read-figures span { font-size: 0.82rem; color: var(--muted); }

/* el día a día: una barra por día, en proporción al mejor. Sin ejes ni
   leyenda: lo que se mira aquí es la forma, no el número exacto */
.read-days {
  list-style: none;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 7rem;
  margin: 0.6rem 0 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
}
.read-days li { flex: 1 1 0; min-width: 2px; height: 100%; display: flex; align-items: flex-end; }
.read-bar {
  display: block;
  width: 100%;
  min-height: 1px;
  height: calc(var(--n) / var(--peak) * 100%);
  background: var(--ink);
  border-radius: 2px 2px 0 0;
  opacity: 0.85;
}
.read-days li:hover .read-bar { opacity: 1; }

/* en el móvil la tabla se desborda antes de encoger: son cifras, y apretadas
   no se leen */
.read-wrap { overflow-x: auto; }
.read-table { width: 100%; min-width: 26rem; border-collapse: collapse; font-size: 0.9rem; }
.read-table th, .read-table td { padding: 0.55rem 0.6rem; text-align: left; }
.read-table th:not(:first-child), .read-table td:not(:first-child) { text-align: right; width: 5.5rem; }
.read-table th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.read-table tbody tr { border-top: 1px solid var(--line); }
.read-table td a { color: inherit; }
.read-table td .muted { display: block; font-size: 0.8rem; }

.read-list { list-style: none; margin: 0; padding: 0; }
.read-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}
.read-list li:first-child { border-top: 0; }
.read-flag { font-size: 1.1rem; line-height: 1; }
.read-n { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); }

/* --- La galería --------------------------------------------------------------------- */
.gal { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.gal-strip { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.gal-page { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.6rem; }
.gal-item { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--photo); }
.gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease, opacity 0.2s; }
.gal-item:hover img { transform: scale(1.04); }
.site-gallery { margin-top: 1rem; }
.site-gallery-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.site-gallery-head a { font-size: 0.88rem; color: var(--muted); text-decoration: none; }
.site-gallery-head a:hover { color: var(--ink); }
.gal-head { margin-bottom: 1.8rem; }
.gal-head .lede { margin-bottom: 1.1rem; }
.gal-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.gal-filter a {
  padding: 0.32rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.86rem;
  color: var(--ink);
  text-decoration: none;
}
.gal-filter a.here { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.gal-filter a.here .muted { color: inherit; opacity: 0.7; }

/* El visor. Siempre oscuro, en claro y en noche: las fotos se miran mejor así.
   Arriba cuántas van y qué hacer con ella; en medio la foto, que se amplía y
   se arrastra (galeria.js mueve su transform); abajo, el pie. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) 4rem;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: center;
  background: #0b0b0b;
  color: #fff;
  overscroll-behavior: contain;
}
.lightbox[hidden] { display: none; }
body.lightbox-open { overflow: hidden; }
.lightbox-top {
  grid-column: 1 / 4;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.9rem 0.3rem 1.2rem;
  opacity: var(--drag-fade, 1);
}
.lightbox-count { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); font-variant-numeric: tabular-nums; }
.lightbox-acts { display: flex; align-items: center; gap: 0.4rem; }
.lightbox-acts .lightbox-share,
.lightbox-download {
  width: auto;
  height: auto;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  font-size: 0.82rem;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
  white-space: nowrap;
}
.lightbox-download:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
/* cada cosa en su celda: en el móvil las flechas desaparecen y la foto no
   tiene que irse a ocupar su hueco */
.lightbox-prev { grid-column: 1; grid-row: 2; }
.lightbox-next { grid-column: 3; grid-row: 2; }
.lightbox-figure {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  height: 100%;
  padding-bottom: 1rem;
}
.lightbox-stage {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;               /* los gestos son nuestros, no del navegador */
  position: relative;
  cursor: zoom-in;
}
.lightbox.is-zoomed .lightbox-stage { cursor: grab; }
.lightbox-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  will-change: transform;
  transition: opacity 0.2s;
}
.lightbox-stage img.is-easing { transition: transform 0.22s ease-out, opacity 0.2s; }
.lightbox.is-loading .lightbox-stage img { opacity: 0.25; }
.lightbox.is-loading .lightbox-stage::after {
  content: "";
  position: absolute;
  width: 2rem;
  height: 2rem;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lightbox-spin 0.8s linear infinite;
}
@keyframes lightbox-spin { to { transform: rotate(360deg); } }
.lightbox.is-broken .lightbox-stage::before {
  content: "No se ha podido cargar esta foto.";
  position: absolute;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}
.lightbox-figure figcaption {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.92rem;
  text-align: center;
  padding: 0 1rem;
  opacity: var(--drag-fade, 1);
}
.lightbox.is-zoomed figcaption { visibility: hidden; }
.lightbox-link { color: rgba(255, 255, 255, 0.6); margin-left: 0.6rem; }
.lightbox-link:hover { color: #fff; }
.lightbox button {
  margin: 0;
  padding: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  justify-self: center;
}
.lightbox button:hover { background: rgba(255, 255, 255, 0.18); }
.lightbox .lightbox-close { width: 2.4rem; height: 2.4rem; font-size: 1.5rem; }
.lightbox.is-single .lightbox-prev, .lightbox.is-single .lightbox-next { visibility: hidden; }
.lightbox-toast {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  font-size: 0.85rem;
}
@media (max-width: 640px) {
  /* en el móvil la foto se lleva todo el ancho y se pasa deslizando; las
     flechas se quedan, pequeñas y encima de la foto, para quien no sabe que
     se puede deslizar (y se apartan al ampliar, que entonces el dedo arrastra) */
  .lightbox { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .lightbox :is(.lightbox-prev, .lightbox-next) {
    grid-column: 2;
    z-index: 1;
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.5rem;
    background: rgba(0, 0, 0, 0.45);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
  }
  .lightbox .lightbox-prev { justify-self: start; margin-left: 0.4rem; }
  .lightbox .lightbox-next { justify-self: end; margin-right: 0.4rem; }
  .lightbox.is-zoomed :is(.lightbox-prev, .lightbox-next) { visibility: hidden; }
  .lightbox-top { padding: 0.6rem 0.6rem 0.2rem 0.9rem; }
  .lightbox-acts .lightbox-share, .lightbox-download { padding: 0.35rem 0.65rem; font-size: 0.8rem; }
}

/* la plaza: buscador y tarjetas de gente */
.plaza-kicker a { color: inherit; text-decoration: none; }
.plaza-kicker a:hover { color: var(--ink); }
.plaza-people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1.3rem 1rem;
}
.plaza-person { display: flex; flex-direction: column; gap: 0.1rem; color: inherit; text-decoration: none; font-size: 0.88rem; }
.plaza-person-face {
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--photo);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.55rem;
}
.plaza-person-face img { width: 100%; height: 100%; object-fit: cover; }
.plaza-person-face span { font-family: var(--font-display); font-size: 2.3rem; color: var(--faint); }
.plaza-person-name { font-weight: 600; font-size: 0.93rem; line-height: 1.3; }
.plaza-person:hover .plaza-person-name { text-decoration: underline; text-underline-offset: 0.15em; }
.plaza-person-by { color: var(--muted); font-size: 0.8rem; margin-top: 0.2rem; line-height: 1.35; }

/* --- El buscador ------------------------------------------------------------------- */
.nav-cta {
  color: var(--ink) !important;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
}
.nav-cta:hover { border-color: var(--edge); }
.search-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 40rem;
}
.search-box .search-icon { position: absolute; left: 1.1rem; color: var(--faint); pointer-events: none; }
.search-box input {
  width: 100%;
  padding: 0.85rem 1.2rem 0.85rem 2.9rem;
  border-radius: 999px;
  border: 1px solid var(--edge);
  background: var(--paper);
  font-size: 1rem;
  box-shadow: 0 1px 6px var(--shadow);
}
.search-box input:hover, .search-box input:focus { border-color: var(--edge); box-shadow: 0 1px 10px var(--shadow-md); background: var(--paper); }

.results-head { display: flex; align-items: center; gap: 1.6rem; margin: 0 0 1.4rem; }
.results-logo {
  font-family: var(--font-display);
  font-size: 2.3rem;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.03em;
}
.results-head .search-box { flex: 1; }
.results-count { font-size: 0.85rem; margin: 0 0 0.8rem; }
.results-help { max-width: 40rem; }
@media (max-width: 560px) {
  .results-head { flex-direction: column; align-items: stretch; gap: 0.8rem; }
}

/* --- Qué es 1199 --------------------------------------------------------------------- */
.landing-hero {
  display: grid;
  gap: 1rem;
  align-items: center;
  padding: 2rem 0 3rem;
  text-align: center;
}
.landing-hero-text { max-width: 42rem; margin: 0 auto; }
.landing-hero .landing-tag, .landing-hero .landing-lede { margin-inline: auto; }
.landing-hero .landing-ctas { justify-content: center; }
/* El árbol que se dibuja. Al lado del nombre cuando hay sitio, y debajo
   cuando no. La caja es la del dibujo, y la pone el propio guion con
   `aspect-ratio`: en pantalla estrecha se enseña una generación menos, así
   que la caja cambia de forma y las fichas de abajo se siguen leyendo. */
.landing-canvas { display: block; width: 100%; max-width: 620px; margin: 0.4rem auto 0; }
@media (min-width: 950px) {
  .landing-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 2.5rem;
    padding: 3rem 0 4rem;
    text-align: left;
  }
  .landing-hero-text { margin: 0; }
  .landing-hero .landing-tag, .landing-hero .landing-lede { margin-inline: 0; }
  .landing-hero .landing-ctas { justify-content: flex-start; }
  .landing-canvas { margin: 0; max-width: none; }
}
.landing-kicker {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.2rem;
}
/* El nombre, que es lo primero que se ve. Va en la serif y muy apretado: es
   un logotipo escrito, no un titular (el <h1> es el lema, justo debajo). */
.landing-mark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(4.4rem, 11vw, 7.6rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.landing-tag {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 4vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  max-width: 18ch;
  margin: 0 0 1.1rem;
}
.landing-lede { font-size: clamp(1.08rem, 1.6vw, 1.2rem); line-height: 1.55; color: var(--text-strong); max-width: 34rem; margin: 0 0 1.2rem; }
.landing-hero .search-box { max-width: 34rem; }
.landing-ctas { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 1.4rem 0 0; }
.landing-ctas .btn { margin: 0; }
/* El logotipo, cuando la cabecera lo lleva (CABECERA_LOGO en landing.html):
   ocupa lo que ocupaba «1199» escrito, ni más ni menos. */
.landing-logo { margin: 0 0 1.4rem; line-height: 0; }
.landing-logo img { width: clamp(14rem, 24vw, 19rem); height: auto; }

/* Lo que nos distingue, en tres golpes, debajo del lema: una marca de
   «hecho» delante de cada uno, en una fila que se parte cuando no cabe. */
.landing-promesas { list-style: none; margin: 0 0 0.4rem; padding: 0; display: flex; flex-wrap: wrap;
  gap: 0.45rem 1.2rem; font-size: 1rem; color: var(--text-strong); }
.landing-promesas li { display: inline-flex; align-items: center; gap: 0.45rem; }
.landing-promesas li::before { content: ""; width: 1rem; height: 1rem; flex: none; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.6l3.4 3.4L13.5 4.4' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.6l3.4 3.4L13.5 4.4' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
/* en estrecho, una debajo de otra (partidas en dos líneas se leían mal) */
.landing-hero .landing-promesas { flex-direction: column; align-items: flex-start; width: fit-content; max-width: 100%;
  margin-inline: auto; text-align: left; }
.landing-promesas li { align-items: flex-start; }
@media (min-width: 950px) { .landing-hero .landing-promesas { margin-inline: 0; } }
.landing-promesas li::before { margin-top: 0.22em; }

/* lo que es gratis, dicho en concreto, y la puerta para quien ya tiene árbol */
.landing-hero-fine { font-size: 0.98rem; line-height: 1.6; color: var(--text); margin: 1.1rem 0 0; }
.landing-hero-fine a { color: var(--text); }

/* «Plan Familia»: lo de pago, marcado donde se promete. Una pastilla discreta
   al final de la frase, que se lee como nota y lleva a los precios. */
.landing-plan {
  display: inline-block;
  margin-left: 0.2rem;
  padding: 0 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: 1px;
}
.landing-plan:hover, .landing-plan:focus-visible { color: var(--ink); border-color: var(--ink); }

/* El vídeo. Es cuadrado y viene con su propio fondo claro, así que no se
   funde con la página: se le pone marco y se deja que sea una ventana a la
   aplicación. De noche no se invierte, por lo mismo que una foto, pero se le
   baja un poco el brillo: a pleno blanco, cinco cuadros así deslumbraban. */
.landing-film { position: relative; margin: 0; justify-self: center; width: 100%; max-width: 540px; }
.landing-film-vid {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #f7f5f3;
  box-shadow: 0 18px 48px var(--shadow);
}
:root[data-theme="dark"] .landing-film-vid { filter: brightness(0.86); border-color: var(--edge); }
/* abajo a la derecha: arriba tapaba el «Publicar» de la entrada */
.landing-film-btn {
  position: absolute;
  bottom: 0.7rem;
  right: 0.7rem;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  color: var(--muted);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.15s, color 0.15s;
}
.landing-film:hover .landing-film-btn,
.landing-film.is-paused .landing-film-btn,
.landing-film-btn:focus-visible { opacity: 1; }
/* en una pantalla táctil no hay «pasar por encima»: el botón, siempre a la vista */
@media (hover: none) { .landing-film-btn { opacity: 1; } }
.landing-film-btn:hover { color: var(--ink); }
.landing-film-btn .is-play { display: none; }
.landing-film.is-paused .landing-film-btn .is-play { display: block; }
.landing-film.is-paused .landing-film-btn .is-pause { display: none; }
/* el pie de un vídeo (de quién es el mapa): fuera del cuadro, que el botón
   va dentro y abajo */
.landing-film-cap { margin: 0.6rem 0 0; font-size: 0.72rem; color: var(--muted); text-align: right; }

/* «Hay más abajo». Va justo encima de la línea que abre los vídeos, así que
   hace de puerta: se lee, se pincha y lleva. */
.landing-more { display: flex; justify-content: center; padding: 0.5rem 0 2.4rem; }
.landing-more a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.8rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.landing-more a:hover, .landing-more a:focus-visible { color: var(--ink); }
.landing-more svg { animation: landing-baja 2.4s ease-in-out infinite; }
@keyframes landing-baja {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) { .landing-more svg { animation: none; } }
.landing-show { scroll-margin-top: 5rem; }

/* Enseñado, no contado: una fila por cosa, con el vídeo a un lado y alternando
   el lado para que la página no se lea en columna. */
.landing-show { border-top: 1px solid var(--line); }
.landing-show-row {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding: 3.4rem 0;
}
.landing-show-row + .landing-show-row { border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .landing-show-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.6rem; }
  /* el vídeo va primero en el HTML solo en la fila volteada; en pantalla
     estrecha se apilan siempre texto y luego vídeo, que es como se lee */
  .landing-show-row.is-flipped .landing-show-text { order: 2; }
}
.landing-show-text h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.9rem;
}
.landing-show-text p { color: var(--text-strong); font-size: 1.08rem; line-height: 1.65; margin: 0 0 0.9rem; max-width: 34rem; }
.landing-show-text p:last-child { margin-bottom: 0; }
/* lo que cuesta, debajo de lo que se promete: más pequeño, pero a la vista */
.landing-show-text p.landing-show-fine { font-size: 0.98rem; color: var(--text); }
.landing-show .landing-kicker { margin-bottom: 0.8rem; }
/* «Ver un árbol →»: a dónde ir a verlo de verdad, en el sitio de ejemplo */
.landing-show-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin: 1.2rem 0 0 !important; }
.landing-show-links a { color: var(--ink); font-weight: 600; font-size: 0.95rem; text-decoration: none;
  border-bottom: 1px solid var(--edge); padding-bottom: 0.1rem; }
.landing-show-links a:hover, .landing-show-links a:focus-visible { border-bottom-color: var(--ink); }
.landing-show-links a span { display: inline-block; transition: transform 0.15s; }
.landing-show-links a:hover span { transform: translateX(3px); }
/* Lo que aún no tiene vídeo: dos textos lado a lado, cada uno con su icono */
.landing-show-pair { display: grid; gap: 2.6rem; padding: 3.4rem 0; }
.landing-show-pair, .landing-show-pair + .landing-show-row { border-top: 1px solid var(--line); }
@media (min-width: 900px) { .landing-show-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.6rem; } }
.landing-pair-ico { display: block; color: var(--muted); margin: 0 0 1rem; }

.landing-price-mas { margin: 1.2rem 0 0; font-size: 0.92rem; }

/* Qué hay dentro: el árbol, las entradas, los mapas… cada cosa por su nombre. */
.landing-what { padding: 3.4rem 0; border-top: 1px solid var(--line); }
.landing-what-head {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  margin: 0 0 1.8rem;
}
.landing-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.8rem 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.landing-grid h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.45rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.landing-ico { flex: none; color: var(--muted); }
.landing-grid p { margin: 0; color: var(--text-strong); line-height: 1.6; font-size: 1.02rem; }

/* El sitio de ejemplo: la portada de un árbol de verdad, con su foto de fondo
   y su nombre. Lo que va encima de una foto lleva color fijo, de día y de
   noche, como en cualquier otra portada de la casa. */
.landing-demo { padding: 3.4rem 0 0; border-top: 1px solid var(--line); }
.landing-demo-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--soft);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s, box-shadow 0.18s;
}
.landing-demo-card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px var(--shadow); }
.landing-demo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.landing-demo-in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 3.4rem 1.6rem;
}
.landing-demo-card.has-cover .landing-demo-in {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), var(--hero-shade));
  padding: 4.6rem 1.6rem;
}
.landing-demo-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.landing-demo-sub { font-size: 1.02rem; color: var(--text); max-width: 32rem; }
.landing-demo-fig { font-size: 0.88rem; color: var(--muted); }
.landing-demo-in .btn { margin: 0.9rem 0 0; }
/* debajo del sitio de verdad, la familia inventada, en pequeño */
.landing-demo-otra { margin: 1rem 0 3rem; text-align: center; font-size: 1rem; line-height: 1.5; color: var(--muted); }
.landing-demo-otra a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
.landing-demo-otra a:hover { border-bottom-color: var(--ink); }
.landing-demo-otra span { display: block; font-size: 0.92rem; }
.landing-demo-card.has-cover .landing-demo-in,
.landing-demo-card.has-cover .landing-demo-sub,
.landing-demo-card.has-cover .landing-kicker,
.landing-demo-card.has-cover .landing-demo-fig { color: var(--on-photo); }
.landing-demo-card.has-cover .landing-demo-fig { opacity: 0.85; }
.landing-demo-card.has-cover .btn.ghost {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--on-photo);
  background: transparent;
}
.landing-demo-card.has-cover:hover .btn.ghost { background: rgba(255, 255, 255, 0.14); }

/* Lo que cuesta: tres tarjetas, la del plan Familia marcada. Lo justo para
   decidir; el detalle está en /precios. */
.landing-price { padding: 3.4rem 0; border-top: 1px solid var(--line); scroll-margin-top: 5rem; }
.landing-price-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.landing-price-list li { padding: 1.3rem 1.3rem 1.4rem; border: 1px solid var(--line); border-radius: 14px; }
.landing-price-list li.is-main { border-color: var(--ink); }
/* mientras no se pueda pagar: solo la gratis, y lo que vendrá dicho en una línea */
.landing-price-list.is-solo { grid-template-columns: minmax(0, 26rem); }
.landing-price-pronto { margin: 1.2rem 0 0; padding: 1.1rem 1.3rem; max-width: 40rem; border-radius: 14px;
  background: var(--soft); color: var(--text-strong); font-size: 1rem; line-height: 1.55; }
.landing-price-pronto p { margin: 0 0 0.6rem; }
.landing-price-pronto p:last-child { margin-bottom: 0; }
.landing-price-pronto .landing-kicker { margin-bottom: 0.4rem; }
/* …y en la portada, al lado de la tarjeta y no debajo: a la izquierda lo que
   cuesta, a la derecha lo que pasa ahora y lo que vendrá. Las dos, de la misma
   altura y con el mismo borde; lo único que destaca es «En lanzamiento». */
.landing-price-body.is-lanzamiento { display: grid; gap: 1rem; }
@media (min-width: 900px) {
  .landing-price-body.is-lanzamiento { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 1rem; align-items: stretch; }
}
.is-lanzamiento .landing-price-list.is-solo { grid-template-columns: minmax(0, 1fr); height: 100%; }
.is-lanzamiento .landing-price-list li { display: flex; flex-direction: column; padding: 1.6rem 1.6rem 1.7rem; }
.is-lanzamiento .landing-price-num { font-size: 3rem; }
/* la descripción ya no es el último párrafo (lo es el botón) */
.is-lanzamiento .landing-price-num + p { margin: 0; color: var(--text); line-height: 1.6; font-size: 0.95rem; }
.is-lanzamiento .landing-price-list p.landing-price-cta { margin: auto 0 0; padding-top: 1.4rem; }
.landing-price-cta .btn { margin: 0; width: 100%; justify-content: center; text-align: center; }
.landing-price-lanza { padding: 1.6rem 1.7rem 1.4rem; border: 1px solid var(--line); border-radius: 14px; }
.landing-price-lanza-sello { margin: 0 0 0.5rem; color: var(--launch);
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.landing-price-lanza-tit { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.1;
  letter-spacing: -0.02em; color: var(--text-strong); margin: 0 0 1rem; }
.landing-price-lanza dl { margin: 0; }
.landing-price-lanza dl > div { display: grid; gap: 0.15rem 1.2rem; padding: 0.8rem 0;
  border-top: 1px solid var(--line); }
@media (min-width: 640px) { .landing-price-lanza dl > div { grid-template-columns: 7.5rem minmax(0, 1fr); } }
.landing-price-lanza dt { font-weight: 600; font-size: 0.95rem; color: var(--text-strong); }
.landing-price-lanza dd { margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--text); }
.landing-price-lanza dd a { color: inherit; }
.landing-price-list h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem;
  font-size: 1.02rem; font-weight: 600; margin: 0 0 0.4rem; }
.landing-price-num { font-family: var(--font-display); font-size: 2.1rem; line-height: 1.1;
  letter-spacing: -0.02em; color: var(--text-strong); margin: 0 0 0.7rem; }
.landing-price-num span { font-family: var(--font-body); font-size: 0.88rem; letter-spacing: 0;
  color: var(--muted); }
.landing-price-list p:last-child { margin: 0; color: var(--text); line-height: 1.6; font-size: 0.95rem; }
/* «próximamente», al lado del nombre y no encima: encima descuadraba las
   tres tarjetas, porque la gratuita no lo lleva */
.landing-price-soon { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); }

/* Las preguntas: cerradas, una por línea, y se abren donde están. */
.landing-faq { padding: 3.4rem 0; border-top: 1px solid var(--line); }
.landing-faq-list { max-width: 46rem; }
.landing-faq details { border-top: 1px solid var(--line); }
.landing-faq details:last-child { border-bottom: 1px solid var(--line); }
.landing-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  font-weight: 600;
  color: var(--text-strong);
  cursor: pointer;
  list-style: none;
}
.landing-faq summary::-webkit-details-marker { display: none; }
.landing-faq summary::after { content: "+"; flex: none; font-weight: 400; font-size: 1.3rem; line-height: 1;
  color: var(--muted); transition: transform 0.15s; }
.landing-faq details[open] summary::after { transform: rotate(45deg); }
.landing-faq summary:hover::after { color: var(--ink); }
.landing-faq details p { margin: 0 0 1.1rem; color: var(--text); line-height: 1.65; max-width: 40rem; }
@media (prefers-reduced-motion: reduce) { .landing-faq summary::after { transition: none; } }

.landing-quote {
  padding: 4.5rem 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.landing-quote p {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 auto 1.3rem;
}
.landing-quote span { display: block; max-width: 32rem; margin: 0 auto; color: var(--muted); line-height: 1.6; }

.landing-live { padding: 3.2rem 0; border-top: 1px solid var(--line); }
/* el buscador va justo encima de las fichas, así que mide lo mismo que ellas
   y se separa: pegado y a media anchura parecía que se había caído ahí */
.landing-live .search-box { max-width: none; margin: 0 0 1.6rem; }
.landing-live-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.4rem; }
.landing-live-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; margin: 0; }
.landing-live-head a { color: var(--muted); font-size: 0.9rem; text-decoration: none; }
.landing-live-head a:hover { color: var(--ink); }
/* en el teléfono, seis fichas son tres filas: con cuatro ya se ve que hay gente */
@media (max-width: 560px) { .landing-live .plaza-people li:nth-child(n+5) { display: none; } }

.landing-end {
  text-align: center;
  padding: 4.5rem 1rem;
  margin-top: 1rem;
  background: var(--soft);
  border-radius: 24px;
}
.landing-end h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 3.2rem); line-height: 1.05; margin: 0 0 0.8rem; }
.landing-end p { color: var(--text); margin: 0 0 1.6rem; }
.landing-end .btn { margin: 0; }
.landing-end p.landing-end-fine { margin: 1rem 0 0; color: var(--muted); font-size: 0.9rem; }
.landing-foot { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: baseline; padding: 2.4rem 0 0; font-size: 0.88rem; }
.landing-foot a { color: var(--muted); text-decoration: none; }
.landing-foot a:hover { color: var(--ink); }
.brand-foot { margin-right: auto; align-self: center; line-height: 0; }
.brand-foot img { height: 3.2rem; width: auto; }

/* páginas de información (de momento, borradores) */
.sample {
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border: 1px dashed var(--edge);
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.info { max-width: 52rem; padding-top: 1.5rem; }
/* los precios no son un texto que se lea de corrido: son tres columnas, y
   necesitan toda la página */
.info.is-wide { max-width: none; }
.info h1 { font-size: clamp(2.6rem, 5.4vw, 3.8rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 1.8rem; }
.info-text { max-width: 38rem; font-size: 1.08rem; line-height: 1.7; color: var(--text); }
/* Casos de uso: una foto grande y dos frases por caso, alternando lados como
   en la portada. Sin foto, el hueco guarda la proporción. */
.caso { display: grid; gap: 1.4rem; align-items: center; padding: 2.4rem 0; border-top: 1px solid var(--line);
  scroll-margin-top: 5rem; }
.casos h1 + .caso { border-top: 0; padding-top: 0.6rem; }
@media (min-width: 800px) {
  .caso { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3.4rem; }
  .caso.is-flipped .caso-foto { order: 2; }
}
.caso-foto { margin: 0; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--soft); }
.caso-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.caso h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 3.6vw, 2.5rem);
  line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 0.7rem; }
.caso-text p { margin: 0; max-width: 28rem; font-size: 1.1rem; line-height: 1.65; color: var(--text); }
.casos-fin { padding: 2.6rem 0 1rem; border-top: 1px solid var(--line); }

/* Traer tu árbol (/traer-tu-arbol). Se sigue con el otro programa abierto
   al lado, así que todo es grande y está a la vista: el camino en tres
   pasos, una tarjeta por sitio y, de la guía elegida, los pasos numerados
   sobre una línea (como un recorrido) y al lado lo que conviene saber. */
.guia code { font-size: 0.92em; padding: 0 0.3em; border-radius: 4px; background: var(--soft); }
.guia-cab { padding-bottom: 3rem; }
.guia-cab h1 { font-size: clamp(2.8rem, 6.4vw, 4.6rem); max-width: 16ch; margin-bottom: 1.2rem; }
.guia-lede { max-width: 36rem; font-size: 1.15rem; line-height: 1.65; color: var(--text); margin: 0 0 2.4rem; }
/* el camino: tres tarjetas y una flecha entre cada dos */
.guia-camino { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: camino; }
@media (min-width: 760px) { .guia-camino { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; } }
.guia-camino li { position: relative; display: flex; flex-direction: column; gap: 0.35rem; counter-increment: camino;
  padding: 1.3rem 1.4rem 1.4rem; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.guia-camino svg { color: var(--ink); margin-bottom: 0.6rem; }
.guia-camino strong { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; line-height: 1.1;
  letter-spacing: -0.01em; color: var(--text-strong); }
.guia-camino strong::before { content: counter(camino) ". "; color: var(--muted); }
.guia-camino span { color: var(--text); line-height: 1.55; font-size: 0.95rem; }
@media (min-width: 760px) {
  .guia-camino li + li::before { content: "→"; position: absolute; left: -1.75rem; top: 50%; transform: translateY(-50%);
    color: var(--muted); font-size: 1.2rem; }
}

/* ¿Dónde lo tienes? Tarjetas grandes: el nombre y, debajo, lo que más pesa */
.guia-elige { padding: 3rem 0; border-top: 1px solid var(--line); scroll-margin-top: 5rem; }
.guia-elige h2, .guia-final h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4vw, 2.7rem);
  line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 0.6rem; }
.guia-elige-lede { color: var(--text); font-size: 1.05rem; margin: 0 0 1.8rem; }
.guia-grupo { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin: 1.6rem 0 0.7rem; }
.guia-tarjetas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); }
/* en el teléfono, de dos en dos: una por fila eran trece pantallazos de tarjetas */
@media (max-width: 560px) {
  .guia-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .guia-tarjeta { padding: 0.8rem 0.85rem 0.85rem; }
  .guia-tarjeta strong { font-size: 1.2rem; }
  .guia-tarjeta span { font-size: 0.8rem; }
  .guia-camino li { padding: 1rem 1.1rem 1.1rem; }
  .guia-camino svg { margin-bottom: 0.2rem; }
}
.guia-tarjeta { display: flex; flex-direction: column; gap: 0.3rem; height: 100%; box-sizing: border-box;
  padding: 1rem 1.15rem 1.05rem; border: 1px solid var(--line); border-radius: 14px; text-decoration: none;
  color: var(--text); transition: border-color 0.15s, transform 0.15s, background 0.15s; }
.guia-tarjeta strong { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; line-height: 1.1;
  color: var(--text-strong); }
.guia-tarjeta span { font-size: 0.88rem; line-height: 1.45; color: var(--muted); }
.guia-tarjeta:hover, .guia-tarjeta:focus-visible { border-color: var(--ink); transform: translateY(-1px); }
.guia-tarjeta[aria-current="true"] { border-color: var(--ink); background: var(--soft); box-shadow: inset 0 0 0 1px var(--ink); }
.guia-elige-pie { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; margin: 1.6rem 0 0; font-size: 0.95rem; }
@media (prefers-reduced-motion: reduce) { .guia-tarjeta { transition: none; } .guia-tarjeta:hover { transform: none; } }

/* La guía de un sitio: los pasos a la izquierda, «De un vistazo» al lado */
.guia-sitio { padding: 3rem 0; border-top: 1px solid var(--line); scroll-margin-top: 4.5rem; }
.guia-sitio[hidden] { display: none; }
/* con una sola guía a la vista, va pegada al índice y se distingue de él */
.guia.is-una .guia-sitio { border-top: 2px solid var(--ink); }
.guia-sitio-tipo { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 0.5rem; }
.guia-sitio-cab h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 4.2vw, 2.9rem);
  line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 1.8rem; }
.guia-sitio-cuerpo { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .guia-sitio-cuerpo { grid-template-columns: minmax(0, 1fr) 19rem; gap: 3.5rem; align-items: start; }
  .guia-vistazo { position: sticky; top: 5.5rem; }
}
.guia-aviso { margin: 0 0 1.8rem; padding: 1rem 1.2rem; border-radius: 12px; background: var(--soft);
  border-left: 3px solid var(--ink); line-height: 1.6; color: var(--text); max-width: 42rem; }
.guia-aviso strong { color: var(--text-strong); }
/* los pasos: un número en un círculo y una línea que los une, como un recorrido */
.guia-pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; max-width: 42rem; }
.guia-pasos li { position: relative; counter-increment: paso; padding: 0.15rem 0 1.5rem 3.3rem;
  font-size: 1.08rem; line-height: 1.6; color: var(--text-strong); }
.guia-pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 999px; background: var(--ink); color: var(--on-ink);
  font-size: 0.95rem; font-weight: 600; }
.guia-pasos li:not(:last-child)::after { content: ""; position: absolute; left: 1.05rem; top: 2.4rem; bottom: 0.3rem;
  border-left: 1px solid var(--edge); }
.guia-pasos li:last-child { padding-bottom: 0.4rem; }
.guia-saber { margin: 1.8rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line); max-width: 42rem; }
.guia-saber h3, .guia-vistazo h3 { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 0.8rem; }
.guia-saber ul { margin: 0; padding-left: 1.1rem; color: var(--text); line-height: 1.6; }
.guia-saber li { margin-bottom: 0.5rem; }
.guia-saber strong { color: var(--text-strong); }
.guia-vistazo { padding: 1.3rem 1.35rem 1.4rem; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.guia-vistazo dl { margin: 0 0 1.1rem; }
.guia-vistazo dl div { padding: 0.6rem 0; border-top: 1px solid var(--line); }
.guia-vistazo dl div:first-child { border-top: 0; padding-top: 0; }
.guia-vistazo dt { font-size: 0.8rem; color: var(--muted); margin: 0 0 0.15rem; }
.guia-vistazo dd { margin: 0; color: var(--text-strong); font-weight: 600; line-height: 1.4; }
.guia-vistazo p { margin: 0 0 0.8rem; font-size: 0.93rem; line-height: 1.55; color: var(--text); }
.guia-vistazo p:last-child { margin: 0; }
.guia-vistazo .btn { margin: 0; width: 100%; text-align: center; box-sizing: border-box; }
.guia-otra { margin: 2rem 0 0; font-size: 0.92rem; }
.guia-otra a { color: var(--muted); }
.guia-otra a:hover { color: var(--ink); }

/* Y ahora, en 1199: los pasos y, debajo del último, la pantalla de verdad.
   La captura es al doble: a 720 px se lee como en la aplicación. */
.guia-final { padding: 3.4rem 0; border-top: 2px solid var(--ink); scroll-margin-top: 4.5rem; }
.guia-final h2 { margin-bottom: 1.8rem; }
.guia-final-cta { margin: 1.8rem 0 0; }
.guia-final-cta .btn { margin: 0; }
.guia-pantalla { margin: 1.4rem 0 0; max-width: 720px; }
.guia-pantalla-marco { padding: 1.2rem 1.3rem; border: 1px solid var(--line); border-radius: 18px; background: var(--card);
  box-shadow: 0 22px 50px -20px var(--shadow); }
.guia-pantalla img { display: block; width: 100%; height: auto; }
.guia-pantalla figcaption { margin: 0.9rem 0.2rem 0; font-size: 0.88rem; line-height: 1.5; color: var(--muted); }
/* la captura de día o la de noche, según el tema */
.guia .solo-noche { display: none; }
:root[data-theme="dark"] .guia .solo-noche { display: block; }
:root[data-theme="dark"] .guia .solo-claro { display: none; }
.guia-comprobado { margin: 1rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: 0.88rem; color: var(--muted); max-width: 44rem; }
.casos-fin h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 3.4vw, 2.3rem); margin: 0 0 1rem; }
.casos-ctas { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; }
.casos-ctas .btn { margin: 0; }
.pricing { display: grid; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 800px) { .pricing { grid-template-columns: repeat(3, 1fr); } }
.price-card { border: 1px solid var(--line); border-radius: 18px; padding: 1.5rem; }
.price-card.is-main { border-color: var(--ink); }
.price-card h2 { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.6rem; }
.price { font-family: var(--font-display); font-size: 2.8rem; line-height: 1; margin: 0 0 1.2rem; }
.price span { font-family: var(--font-ui); font-size: 0.85rem; color: var(--muted); }
.price-card ul { margin: 0; padding: 0; list-style: none; color: var(--text); font-size: 0.92rem; line-height: 1.55; }
.price-card li { position: relative; padding: 0 0 0 1.5rem; margin-bottom: 0.45rem; }
/* lo que lleva, con una marca; lo que no lleva, con una raya y en gris: que se
   vea de un vistazo dónde está el límite de cada plan */
.price-has li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.42em;
  width: 0.62rem;
  height: 0.34rem;
  border-left: 1.6px solid var(--ink);
  border-bottom: 1.6px solid var(--ink);
  transform: rotate(-45deg);
}
.price-hasnt { margin-top: 0.7rem !important; color: var(--muted); }
.price-hasnt li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.62em;
  width: 0.62rem;
  border-top: 1.6px solid var(--edge);
}
.price-lede { max-width: 40rem; }
.price-card { display: flex; flex-direction: column; }
.price-card .btn { margin: 1.2rem 0 0; align-self: flex-start; }
.price-soon {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.7rem;
}
/* los planes que aún no se pueden contratar: una cinta cruzada en la esquina */
.price-card { position: relative; overflow: hidden; }
.price-cinta { position: absolute; top: 2.2rem; right: -3rem; width: 13rem; margin: 0; padding: 0.4rem 0;
  transform: rotate(45deg); background: var(--launch); color: var(--paper); text-align: center; line-height: 1.2;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; pointer-events: none; }
.price-note { margin: 1.1rem 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--muted); }
/* Exportaciones sueltas: debajo de los planes, para quien no quiere mensualidad */
.price-sueltas { margin: 3rem 0 1.4rem; padding-top: 2.6rem; border-top: 1px solid var(--line); }
.price-sueltas h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 3.6vw, 2.5rem);
  line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 0.7rem; }
.price-sueltas-lede { max-width: 38rem; font-size: 1.08rem; line-height: 1.65; color: var(--text); margin: 0; }
.price-sueltas-cabeza { display: grid; gap: 0.6rem 3rem; margin: 2rem 0 1.4rem; }
.price-sueltas .price-free + .price-free { margin-top: 0.5rem; }
.price-sueltas-cabeza h2 { margin: 0; }
@media (min-width: 900px) { .price-sueltas-cabeza { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }
/* Anual o mensual: un interruptor de dos botones encima de los planes */
.pricing[data-periodo="anual"] [data-cuando="mensual"],
.pricing[data-periodo="mensual"] [data-cuando="anual"] { display: none; }
.price-periodo { display: inline-flex; gap: 0.2rem; padding: 0.25rem; margin: 0 0 1.2rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--soft-2); }
.price-periodo button { margin: 0; border: 0; background: none; font-size: 0.92rem; color: var(--muted);
  padding: 0.5rem 1.1rem; transition: background 0.15s, color 0.15s; }
.price-periodo button:hover { background: var(--soft-hover); color: var(--text); }
.price-periodo button span { font-size: 0.8rem; margin-left: 0.25rem; opacity: 0.75; }
.price-periodo button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.price-periodo button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* el anual manda; el mensual, debajo y más pequeño */
.price-or { margin: -0.8rem 0 1.2rem; font-size: 0.88rem; color: var(--muted); }
.price-free { margin: 1.2rem 0 0; font-size: 0.95rem; line-height: 1.55; color: var(--text); }

/* la página de precios, corta: el aviso de que está abriendo, las tarjetas,
   la comparación y las sueltas en fila */
.price-lanza { display: flex; align-items: baseline; gap: 0.4rem 1.2rem; max-width: 52rem; margin: 0 0 2.2rem;
  padding: 0.95rem 1.25rem; border: 1px solid var(--line); border-radius: 14px; }
.price-lanza p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--text); }
.price-lanza p.price-lanza-sello { flex: none; color: var(--launch); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; }
@media (max-width: 640px) { .price-lanza { flex-direction: column; } }
.price-para { margin: -0.4rem 0 1rem; font-size: 1rem; color: var(--text-strong); }
.price-compara { margin: 3rem 0 0; }
.price-compara h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2rem);
  line-height: 1.1; letter-spacing: -0.02em; color: var(--text-strong); margin: 0 0 1rem; }
.price-compara-tabla { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.price-compara table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.price-compara th, .price-compara td { padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--line); text-align: center;
  vertical-align: middle; line-height: 1.4; }
.price-compara tr:last-child th, .price-compara tr:last-child td { border-bottom: 0; }
.price-compara thead th { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.price-compara tbody th { text-align: left; font-weight: 400; color: var(--text-strong); text-transform: none;
  letter-spacing: 0; font-size: 0.92rem; }
.price-compara td { color: var(--text); }
.price-si { display: inline-block; width: 1.05rem; height: 1.05rem; vertical-align: middle; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.6l3.4 3.4L13.5 4.4' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.6l3.4 3.4L13.5 4.4' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.price-no { color: var(--muted); }
@media (max-width: 600px) {
  .price-compara th, .price-compara td { padding: 0.55rem 0.4rem; font-size: 0.82rem; }
  .price-compara thead th { font-size: 0.62rem; letter-spacing: 0.03em; }
  .price-compara tbody th { width: 38%; }
}
/* las cuatro compras, en tarjetas pequeñas y en fila (dos y dos en el móvil) */
.price-sueltas-fila { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .price-sueltas-fila { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.price-sueltas-fila li { display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid var(--line); border-radius: 14px; color: var(--text-strong); font-size: 1rem; line-height: 1.35; }
.price-sueltas-fila li.is-main { border-color: var(--ink); }
.price-sueltas-fila small { display: block; margin-top: 0.2rem; font-size: 0.84rem; color: var(--muted); }
.price-sueltas-fila em { font-style: normal; }
.price-sueltas-fila strong { margin-top: auto; font-family: var(--font-display); font-weight: 400; font-size: 2rem;
  line-height: 1; color: var(--text-strong); }
/* Contacto: el correo y el chat, dos tarjetas iguales; debajo, lo demás */
.contact-vias { display: grid; gap: 1rem; max-width: 52rem; }
@media (min-width: 720px) { .contact-vias { grid-template-columns: 1fr 1fr; } }
.contact-via { display: flex; flex-direction: column; padding: 1.4rem 1.5rem 1.5rem; border: 1px solid var(--line); border-radius: 18px; }
.contact-via h2 { margin: 0 0 0.8rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.contact-via p { margin: 0 0 0.6rem; line-height: 1.6; color: var(--text); }
.contact-via .btn { margin: auto 0 0; align-self: flex-start; }
.contact-via p + .btn { margin-top: 0.6rem; }
.contact-mail { font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.2rem); line-height: 1.1;
  letter-spacing: -0.02em; color: var(--text-strong); text-decoration: none; overflow-wrap: anywhere; }
.contact-mail:hover { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
.contact-via-nota { margin-top: auto !important; font-size: 0.92rem; color: var(--muted) !important; }
.contact-mas { max-width: 52rem; margin: 1.8rem 0 0; padding: 0; list-style: none; font-size: 0.95rem; line-height: 1.6; color: var(--text); }
.contact-mas li + li { margin-top: 0.4rem; }
.contact-mas a { color: var(--text-strong); }

/* la plaza, con cuenta: el buscador normal y lo último, sin cargar */
.plaza-head .search-box { margin-top: 1.4rem; }
.plaza-block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.plaza-block-head a { font-size: 0.85rem; color: var(--muted); text-decoration: none; }
.plaza-block-head a:hover { color: var(--ink); }
.plaza-news { list-style: none; margin: 0; padding: 0; }
.plaza-news li { border-top: 1px solid var(--line); }
.plaza-news li:last-child { border-bottom: 1px solid var(--line); }
.plaza-news-item { display: flex; gap: 1.1rem; align-items: center; padding: 1rem 0; color: inherit; text-decoration: none; }
.plaza-news-item img { flex: none; width: 96px; height: 72px; object-fit: cover; border-radius: 10px; background: var(--photo); }
.plaza-news-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.plaza-news-text strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.12;
}
.plaza-news-text .muted { font-size: 0.9rem; line-height: 1.45; }
.plaza-news-item:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.plaza-main .plaza-people { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 1rem 0.8rem; }
.plaza-main .plaza-person-face span { font-size: 1.8rem; }
.plaza-main .plaza-person-name { font-size: 0.85rem; }

/* el botón para ir al árbol, en la portada del sitio */
.site-cta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.6rem 0 0; }
.site-cta .btn { margin: 0; padding: 0.7rem 1.4rem; font-size: 0.95rem; }
/* el botón del árbol: su icono delante; el número de personas detrás, tras
   un punto (en la portada de la foto al lado va debajo, ver .pt-lado) */
.site-cta .site-tree-btn { display: inline-flex; align-items: center; gap: 0.5rem; }
.site-tree-ico { flex: none; }
.site-tree-n::before { content: " · "; }
.site-tree-gen { display: none; }
.has-cover .site-cta .btn { background: #fff; color: #111; }
.has-cover .site-cta .btn:hover { background: #ececec; }
.site-more { margin: 1.4rem 0 0; font-size: 0.9rem; }
.site-more a { color: var(--muted); text-decoration: none; }
.site-more a:hover { color: var(--ink); }
.top-row form button { margin: 0; }
.site-cta .site-cta-alt { background: var(--glass); }
.has-cover .site-cta .site-cta-alt { background: rgba(255, 255, 255, 0.16); color: #fff; border-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(6px); }
.has-cover .site-cta .site-cta-alt:hover { background: rgba(255, 255, 255, 0.28); }

/* =====================================================================
   Estilos del sitio. Cada uno es una receta de portada y secciones
   (aspecto.py, pintada por site_home.html) y aquí su CSS, colgado de
   body.theme-<estilo>. Los colores salen de las variables
   de arriba, así valen igual con el modo noche.
   ===================================================================== */
.site-emblem.is-small { display: block; max-height: 64px; max-width: 160px; margin: 0 0 1rem; }

/* --- elegir estilo en «Editar portada» -------------------------------------- */
.theme-pick { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 0.4rem; }
.theme-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  color: var(--ink);
  font-size: 0.9rem;
}
.theme-card input { position: absolute; opacity: 0; pointer-events: none; }
.theme-card:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.theme-card .muted { font-size: 0.8rem; line-height: 1.35; }
.theme-sketch {
  display: grid;
  gap: 3px;
  height: 84px;
  padding: 6px;
  margin-bottom: 0.4rem;
  border-radius: 8px;
  background: var(--soft);
  overflow: hidden;
}
.theme-sketch i { display: block; border-radius: 2px; background: var(--edge); }
.theme-sketch-sobrio { grid-template: 34px 10px 1fr / 1fr 1fr 1fr; }
.theme-sketch-sobrio i:nth-child(1) { grid-column: 1 / 4; background: var(--edge); }
.theme-sketch-sobrio i:nth-child(2) { grid-column: 1 / 3; background: var(--faint); }
.theme-sketch-sobrio i:nth-child(3) { display: none; }
.theme-sketch-revista { grid-template: 52px 1fr / 1fr 1fr 1fr; }
.theme-sketch-revista i:nth-child(1) { grid-column: 1 / 4; background: #3a3a3a; }
.theme-sketch-revista i:nth-child(5), .theme-sketch-revista i:nth-child(6) { display: none; }
.theme-sketch-album { grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr; background: var(--album-paper); }
.theme-sketch-album i { background: var(--album-edge); }
.theme-sketch-album i:nth-child(1) { grid-row: 1 / 3; }
.theme-sketch-album i:nth-child(5) { grid-column: 2; grid-row: 2; background: var(--album-card); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
/* los de pago: el mismo dibujo de seis rayas, colocadas como su maqueta */
/* --- El plan y el panel ---------------------------------------------------------- */
.plan-now { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.7rem; }
.plan-chip {
  padding: 0.18rem 0.7rem;
  border: 1px solid var(--edge);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
}
.plan-chip.is-pro { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.plan-exports { margin: 0 0 0.7rem; font-size: 0.92rem; }

.admin-find { display: flex; gap: 0.5rem; margin: 0 0 1.2rem; }
.admin-find input { margin: 0; max-width: 22rem; }
.admin-find .btn, .admin-find button { margin: 0; }
/* la tabla se desborda antes de encoger: son datos, y apretados no se leen */
.admin-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.admin-table th, .admin-table td { padding: 0.6rem 0.7rem; text-align: left; vertical-align: top; }
.admin-table th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.admin-table tbody tr { border-top: 1px solid var(--line); }
.admin-table td strong { display: block; }
.admin-table td .muted { font-size: 0.84rem; }
.admin-tag {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0.04rem 0.4rem;
  border: 1px solid var(--edge);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--muted);
}
.admin-plan { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.admin-plan select, .admin-plan input, .admin-plan button { margin: 0; }
.admin-plan select { min-width: 6rem; }
.admin-plan input[type="date"] { width: 9.5rem; }
.admin-note { margin: 0.35rem 0 0; font-size: 0.8rem; }
.admin-note span { display: block; opacity: 0.8; }

/* un estilo de pago sin plan: se ve, se prueba, no se elige */
.theme-card.is-locked { opacity: 0.72; }
.theme-card.is-locked:hover { opacity: 1; }
.theme-locked {
  margin-top: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}
.theme-lapsed {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--soft);
  font-size: 0.88rem;
}
.tp-locked { font-size: 0.82rem; color: var(--muted); white-space: nowrap; }

.theme-pro {
  margin-left: 0.35rem;
  padding: 0.08rem 0.38rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}
.theme-sketch-casa { grid-template: 40px 8px 1fr / 1fr 1fr 1fr; background: #1c1d20; }
.theme-sketch-casa i { background: rgba(201, 169, 97, 0.26); }
.theme-sketch-casa i:nth-child(1) { grid-area: 1 / 2 / 2 / 3; justify-self: center; width: 22px; border-radius: 3px 3px 11px 11px; background: #c9a961; }
.theme-sketch-casa i:nth-child(2) { grid-area: 2 / 1 / 3 / 4; }
.theme-sketch-casa i:nth-child(n + 3) { grid-column: 1 / 4; grid-row: 3; height: 5px; }
.theme-sketch-casa i:nth-child(3) { align-self: start; }
.theme-sketch-casa i:nth-child(4) { align-self: center; }
.theme-sketch-casa i:nth-child(5) { align-self: end; }
.theme-sketch-casa i:nth-child(6) { display: none; }
.theme-sketch-memoria { grid-template: 42px 8px 1fr / 1fr 1fr 1fr; background: var(--soft-2); }
.theme-sketch-memoria i:nth-child(1) { grid-area: 1 / 2 / 2 / 3; justify-self: center; width: 38px; border-radius: 50%; background: var(--edge); }
.theme-sketch-memoria i:nth-child(2) { grid-area: 2 / 2 / 3 / 3; background: var(--faint); }
.theme-sketch-memoria i:nth-child(n + 3) { grid-column: 1 / 4; grid-row: 3; height: 5px; background: var(--faint); }
.theme-sketch-memoria i:nth-child(3) { align-self: start; }
.theme-sketch-memoria i:nth-child(4) { align-self: center; }
.theme-sketch-memoria i:nth-child(5), .theme-sketch-memoria i:nth-child(6) { display: none; }
.theme-sketch-travesia { grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr; background: var(--map-bg); }
.theme-sketch-travesia i { width: 11px; height: 11px; border-radius: 50%; background: var(--ink); opacity: 0.5; align-self: center; justify-self: center; }
.theme-sketch-travesia i:nth-child(1) { grid-area: 3 / 1; }
.theme-sketch-travesia i:nth-child(2) { grid-area: 2 / 2; }
.theme-sketch-travesia i:nth-child(3) { grid-area: 1 / 2; }
.theme-sketch-travesia i:nth-child(4) { grid-area: 1 / 3; opacity: 0.85; }
.theme-sketch-travesia i:nth-child(5), .theme-sketch-travesia i:nth-child(6) { display: none; }
.theme-sketch-verbena { grid-template: 26px 1fr / 1fr 1fr 1fr; background: linear-gradient(135deg, #f0a53c, #d44f2b); }
.theme-sketch-verbena i { width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, 0.82); align-self: center; justify-self: center; }
.theme-sketch-verbena i:nth-child(1) { grid-area: 1 / 1 / 2 / 4; width: auto; height: 7px; border-radius: 2px; justify-self: stretch; align-self: center; background: rgba(255, 255, 255, 0.9); }
.theme-sketch-verbena i:nth-child(n + 5) { display: none; }
.theme-sketch-archivo {
  grid-template: 10px 1fr / 1fr 1fr 30px;
  background-color: var(--archivo-paper);
}
.theme-sketch-archivo i { background: var(--archivo-rule); }
.theme-sketch-archivo i:nth-child(1) { grid-area: 1 / 1 / 2 / 4; background: var(--edge); }
.theme-sketch-archivo i:nth-child(2) { grid-area: 2 / 1 / 3 / 3; }
.theme-sketch-archivo i:nth-child(3) { grid-area: 2 / 3 / 3 / 4; background: var(--edge); }
.theme-sketch-archivo i:nth-child(n + 4) { display: none; }

/* --- Revista ------------------------------------------------------------------ */
.rv-hero h1 {
  font-family: var(--font-body);
  letter-spacing: -0.02em;
}
/* en la portada, el menú va encima de la foto, transparente */
body.theme-revista.site-home > header {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 0;
}
body.theme-revista.site-home > header a,
body.theme-revista.site-home > header .brand,
body.theme-revista.site-home > header button.linkish { color: rgba(255, 255, 255, 0.82); }
body.theme-revista.site-home > header a.here,
body.theme-revista.site-home > header a:hover { color: var(--on-photo); }
body.theme-revista.site-home > header .nav-tree { border-color: rgba(255, 255, 255, 0.3); }
body.theme-revista.site-home > header .nav-cta { color: #111 !important; background: #fff; }
.theme-revista.site-home main > .flash { position: relative; z-index: 3; margin-top: 3.4rem; }

.rv-hero {
  position: relative;
  width: 100vw;
  min-height: max(560px, 100vh);
  margin: -2.2rem 0 0 calc(50% - 50vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.5rem 5rem;
  text-align: center;
  color: var(--on-photo);
  background: #111;
  overflow: hidden;
}
main > .flash ~ .rv-hero { margin-top: 0; }
.rv-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rv-hero::after { content: ""; position: absolute; inset: 0; background: var(--hero-shade); }
.rv-hero-text { position: relative; z-index: 1; max-width: 46rem; }
.rv-emblem { display: block; margin: 0 auto 1.8rem; max-height: min(240px, 28vh); max-width: 70vw; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.35)); }
.rv-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 750; line-height: 1.15; margin: 0 0 0.8rem; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.rv-subtitle { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: rgba(255, 255, 255, 0.86); margin: 0; }
.rv-hero .site-figures { justify-content: center; color: rgba(255, 255, 255, 0.72); }
.rv-down {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  color: var(--on-photo);
  opacity: 0.85;
  animation: rv-nudge 2.4s ease-in-out infinite;
}
@keyframes rv-nudge { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .rv-down { animation: none; } }

/* --- Álbum ------------------------------------------------------------------ */
html:has(> body.theme-album), body.theme-album, body.theme-album > header { background: var(--album-paper); }
body.theme-album { min-height: 100vh; }
body.theme-album > header { background: color-mix(in srgb, var(--album-paper) 88%, transparent); }
.al-cover {
  position: relative;
  width: 100vw;
  margin: -2.2rem 0 2.8rem calc(50% - 50vw);
  padding: 3.4rem 1.5rem 3rem;
  text-align: center;
  overflow: hidden;
}
main > .flash ~ .al-cover { margin-top: 0; }
.al-title { max-width: 40rem; margin: 0 auto; }
.al-emblem { display: block; margin: 0 auto 1.1rem; max-height: 120px; max-width: 220px; }
.al-title h1 { font-size: clamp(2.8rem, 6vw, 4.4rem); line-height: 1; margin: 0 0 0.7rem; }
.al-subtitle { font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--album-ink); margin: 0; }
.al-title .site-figures, .al-title .site-cta { justify-content: center; }
.al-title .site-kicker { margin-bottom: 0.9rem; }
.al-title .site-cta .site-cta-alt { background: transparent; }
/* las fotos, como sueltas sobre la mesa */
.al-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2.8rem auto 0;
  padding: 1rem 0 0.6rem;
}
.al-photo {
  flex: none;
  width: 150px;
  padding: 8px 8px 24px;
  margin: 0 -12px;
  background: var(--album-card);
  box-shadow: 0 8px 22px rgba(var(--album-shadow), 0.18);
  transform: rotate(-4deg);
  transition: transform 0.3s ease;
}
.al-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; filter: sepia(0.2) saturate(0.92); }
.al-photo:nth-child(2n) { transform: rotate(3deg) translateY(10px); }
.al-photo:nth-child(3n) { transform: rotate(-1.5deg) translateY(-6px); }
.al-photo.is-main { width: 250px; z-index: 1; transform: rotate(0.8deg); }
.al-photo.is-main img { aspect-ratio: 4 / 3; }
.al-photo:hover { transform: rotate(0) scale(1.04); z-index: 2; }
@media (max-width: 720px) {
  .al-photo { width: 92px; padding: 5px 5px 14px; margin: 0 -9px; }
  .al-photo.is-main { width: 150px; }
  .al-photo:nth-child(n + 6) { display: none; }
}
@media (max-width: 440px) {
  .al-photo:nth-child(1), .al-photo:nth-child(n + 6) { display: none; }
}
/* en el papel, los botones secundarios necesitan un borde que se vea */
.theme-album .btn.ghost { border-color: var(--album-line); }
.theme-album .btn.ghost:hover { border-color: var(--album-line-strong); background: var(--album-card); }
.al-about { max-width: 40rem; margin: 0 auto 1rem; text-align: center; }
.al-about .site-about { font-style: italic; margin-left: auto; margin-right: auto; }
.theme-album .site-label { text-align: center; }
.theme-album .site-gallery-head { justify-content: center; gap: 1.2rem; }
.al-polaroids {
  list-style: none;
  margin: 0;
  padding: 0.6rem 0 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.8rem 1.4rem;
}
.al-polaroids li { width: 180px; }
.al-polaroids .site-person {
  padding: 10px 10px 16px;
  background: var(--album-card);
  box-shadow: 0 6px 18px rgba(var(--album-shadow), 0.16);
  transform: rotate(-2deg);
  transition: transform 0.25s ease;
  text-align: center;
  align-items: center;
}
.al-polaroids li:nth-child(even) .site-person { transform: rotate(1.8deg); }
.al-polaroids li:nth-child(3n) .site-person { transform: rotate(-0.8deg); }
.al-polaroids .site-person:hover { transform: rotate(0) scale(1.03); }
.al-polaroids .site-person-face { border-radius: 2px; width: 100%; margin-bottom: 0.7rem; }
.al-polaroids .site-person strong { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; }
.al-polaroids .site-person-note { font-style: italic; }
.al-timeline { list-style: none; margin: 0; padding: 0; }
.al-year { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1.2rem; }
.al-year-label {
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--album-accent);
  padding-top: 0.6rem;
  text-align: right;
}
.al-year > ul { list-style: none; margin: 0; padding: 0 0 1.4rem 1.4rem; border-left: 2px solid var(--album-edge); }
.al-year > ul > li { position: relative; padding: 0.6rem 0; }
.al-year > ul > li::before {
  content: "";
  position: absolute;
  left: calc(-1.4rem - 6px);
  top: 1.35rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--album-card);
  border: 2px solid var(--album-accent);
}
.al-entry { display: flex; gap: 1rem; align-items: flex-start; color: inherit; text-decoration: none; }
.al-entry-photo { flex: none; width: 104px; padding: 5px 5px 12px; background: var(--album-card); box-shadow: 0 3px 10px rgba(var(--album-shadow), 0.15); transform: rotate(-1.5deg); }
.al-entry-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.al-entry-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.al-entry-date { font-size: 0.8rem; color: var(--album-accent); }
.al-entry strong { font-family: var(--font-display); font-weight: 400; font-size: 1.55rem; line-height: 1.12; }
.al-entry:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.al-entry .muted { font-size: 0.9rem; line-height: 1.45; }
@media (max-width: 560px) {
  .al-year { grid-template-columns: 1fr; gap: 0.2rem; }
  .al-year-label { text-align: left; }
  .al-entry-photo { width: 80px; }
}

.theme-album .site-drafts { background: var(--album-card); }
/* la galería del álbum: fotos con marco, un poco giradas */
.gal-album { gap: 1rem; }
.theme-album .gal-item {
  padding: 6px 6px 14px;
  background: var(--album-card);
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(var(--album-shadow), 0.14);
  aspect-ratio: auto;
}
.theme-album .gal-item img { aspect-ratio: 1; height: auto; }
.theme-album .gal li:nth-child(odd) .gal-item { transform: rotate(-1.2deg); }
.theme-album .gal li:nth-child(even) .gal-item { transform: rotate(1deg); }
/* una entrada en «Álbum»: la portada como una foto enmarcada */
.theme-album .post-cover { width: auto; margin: 0 auto 2.4rem; padding: 12px 12px 26px; background: var(--album-card); box-shadow: 0 12px 34px rgba(var(--album-shadow), 0.18); transform: rotate(-0.6deg); }
.theme-album .post-cover img { max-height: 30rem; border-radius: 0; }
.theme-album .post-head { text-align: center; }
.theme-album .post-byline { justify-content: center; }
.theme-album .post-byline .btn { margin-left: 0.6rem; }
.theme-album .post-person, .theme-album .cdx-person-card { background: var(--album-card); border-color: var(--album-edge); }

/* bajo la portada de «Revista», el cuerpo de siempre con aire para respirar */
/* el aire bajo la portada a pantalla completa va con la portada, no con el
   estilo: con «Personalizar» puede ir sobre cualquiera, y debajo puede venir
   cualquier cosa (la presentación como cita o como carta, otra sección) */
.rv-hero { margin-bottom: 4.2rem; }
.site-body-main.has-cta .site-about { margin-bottom: 1.4rem; }
.site-body-main.has-cta .site-cta { margin: 0 0 3rem; }
.site-body-main.has-cta .site-cta .site-cta-alt { background: transparent; }

/* =====================================================================
   Los estilos de pago. Cada uno pone delante una cosa distinta del árbol
   (la línea, el mapa, los vivos, los documentos, los lugares), así que no
   son el mismo sitio con otros colores: cambian de qué habla la portada.
   Lo que va encima de un campo oscuro lleva su color fijo en su propia
   regla, como una foto de portada: es oscuro de día y de noche.
   ===================================================================== */

/* --- «Casa»: el escudo y la línea --------------------------------------------- */
.ca-field {
  --field: #191a1c;
  --field-ink: #f3eee2;
  --field-gold: #c9a961;
  position: relative;
  width: 100vw;
  margin: -2.2rem 0 2.6rem calc(50% - 50vw);
  padding: 4.6rem max(1.5rem, calc(50vw - 540px + 1.5rem)) 4.2rem;
  background: radial-gradient(120% 90% at 50% 0%, #24262c 0%, var(--field) 62%);
  color: var(--field-ink);
  text-align: center;
  overflow: hidden;
}
main > .flash ~ .ca-field { margin-top: 0; }
.ca-field-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  filter: grayscale(1) contrast(1.08);
}
/* el filete, como el de una ejecutoria: una raya fina y una sombra dentro */
.ca-field::after {
  content: "";
  position: absolute;
  inset: 1.1rem;
  border: 1px solid rgba(201, 169, 97, 0.36);
  box-shadow: inset 0 0 0 3px rgba(201, 169, 97, 0.1);
  pointer-events: none;
}
.ca-arms { position: relative; z-index: 1; max-width: 42rem; margin: 0 auto; }
.ca-emblem {
  display: block;
  margin: 0 auto 1.6rem;
  max-height: min(260px, 30vh);
  max-width: 72vw;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.5));
}
.ca-cipher {
  display: block;
  width: 116px;
  height: 116px;
  margin: 0 auto 1.5rem;
  border: 1px solid rgba(201, 169, 97, 0.5);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 114px;
  color: var(--field-gold);
}
.ca-field h1 {
  margin: 0 0 0.7rem;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.12;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: var(--field-ink);
}
.ca-lema {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: rgba(243, 238, 226, 0.76);
}
.ca-figures {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1.6rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--field-gold);
}
.ca-figures span + span::before { content: "·"; margin: 0 0.6rem; opacity: 0.7; }
.ca-no-arms {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  margin: 2.2rem auto 0;
  font-size: 0.84rem;
  color: rgba(243, 238, 226, 0.58);
}
.ca-no-arms a { color: var(--field-gold); }
.ca-about { max-width: 46rem; margin: 0 auto 3rem; text-align: center; }
.ca-about .site-about { margin: 0 auto 1.2rem; }
.ca-about .site-cta { justify-content: center; }
.theme-casa .site-label { color: var(--casa-gold); }
/* un filete con su rombo bajo la portada: separa el campo del texto sin una
   raya de formulario */
.ca-about { position: relative; padding-top: 2.8rem; }
.ca-about::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  left: 50%;
  translate: -50% 0;
  width: 8rem;
  height: 1px;
  background:
    linear-gradient(var(--casa-gold), var(--casa-gold)) left center / 3rem 1px no-repeat,
    linear-gradient(var(--casa-gold), var(--casa-gold)) right center / 3rem 1px no-repeat;
}
.ca-about::after {
  content: "";
  position: absolute;
  top: 0.45rem;
  left: 50%;
  translate: -50% 0;
  rotate: 45deg;
  width: 7px;
  height: 7px;
  border: 1px solid var(--casa-gold);
}

.ca-people { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.ca-people .site-person { text-align: center; }
.ca-people .site-person-face {
  border-radius: 50%;
  border: 1px solid var(--casa-gold);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--casa-rule);
  margin-inline: auto;
  width: 84%;
}
.ca-people .site-person strong { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; }
.ca-people .site-person-note { font-size: 0.82rem; }

/* La crónica: anales, con el año al margen y un filete entre uno y otro */
/* una sola caja para todo lo que va bajo el campo: presentación, medallones
   y anales comparten margen, así los epígrafes caen en la misma vertical */
.ca-measure { max-width: 46rem; margin-inline: auto; }
.ca-annal-list { list-style: none; margin: 0; padding: 0; }
.ca-annal-list li {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: 0 1.2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--casa-rule);
}
.ca-annal-list li:last-child { border-bottom: 1px solid var(--casa-rule); }
.ca-annal-year {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--casa-gold);
  font-variant-numeric: tabular-nums;
  padding-top: 0.1rem;
}
.ca-annal { display: grid; gap: 0.25rem; text-decoration: none; color: inherit; }
.ca-annal strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
}
.ca-annal:hover strong { text-decoration: underline; text-underline-offset: 0.14em; }
.ca-annal .muted { font-size: 0.92rem; line-height: 1.5; }
.ca-annal-by { font-size: 0.8rem; color: var(--muted); }

@media (max-width: 640px) {
  .ca-annal-list li { grid-template-columns: 3rem 1fr; gap: 0 0.8rem; }
  .ca-annal strong { font-size: 1.3rem; }
}
/* una entrada de «Casa»: título con versalitas, como la portada */
.theme-casa .post-title { font-variant: small-caps; letter-spacing: 0.03em; }

/* --- «Memoria»: una persona ---------------------------------------------------- */
.me-head {
  position: relative;
  width: 100vw;
  margin: -2.2rem 0 2.8rem calc(50% - 50vw);
  padding: 4.4rem max(1.5rem, calc(50vw - 540px + 1.5rem)) 3.4rem;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(180deg, var(--soft-2), var(--paper));
  border-bottom: 1px solid var(--line);
}
main > .flash ~ .me-head { margin-top: 0; }
.me-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
  filter: grayscale(1);
}
.me-portrait {
  position: relative;
  display: block;
  width: clamp(160px, 26vw, 240px);
  aspect-ratio: 1;
  margin: 0 auto 1.8rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--photo);
  box-shadow: 0 14px 40px var(--shadow-md);
}
.me-portrait img { width: 100%; height: 100%; object-fit: cover; }
.me-portrait span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--faint);
}
.me-head h1 {
  position: relative;
  margin: 0 0 0.4rem;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.06;
}
.me-years {
  position: relative;
  margin: 0 0 1.2rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--muted);
  font-variant-numeric: lining-nums;
}
.me-line {
  position: relative;
  max-width: 34rem;
  margin: 0 auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.4;
  color: var(--text);
}
.me-of { position: relative; margin: 1.6rem 0 0; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.me-of a { color: var(--muted); text-decoration: none; }
.me-of a:hover { color: var(--ink); }
.me-pick { position: relative; max-width: 36rem; margin: 1.6rem auto 0; text-align: left; }
.me-about {
  max-width: 34rem;
  margin: 0 auto 3.4rem;
  font-family: var(--font-display);
  font-size: 1.32rem;
  line-height: 1.62;
  text-align: center;
  color: var(--text-strong);
}
.me-about p { margin: 0 0 1em; }
.me-memories, .me-people { max-width: 42rem; margin-inline: auto; }
.me-memories .site-gallery-head { justify-content: center; gap: 1.2rem; }
.theme-memoria .site-label { text-align: center; }
.me-stack { list-style: none; margin: 0; padding: 0; }
.me-stack li + li { border-top: 1px solid var(--line); }
.me-memory {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  padding: 1.5rem 0;
  color: inherit;
  text-decoration: none;
}
.me-memory-photo {
  flex: none;
  width: 92px;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--photo);
}
.me-memory-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35); }
.me-memory:hover .me-memory-photo img { filter: none; }
.me-memory-text { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.me-memory-text strong { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.15; }
.me-memory:hover strong { text-decoration: underline; text-underline-offset: 0.14em; }
.me-memory-lede { color: var(--text); font-size: 0.95rem; line-height: 1.5; }
.me-memory-by { font-size: 0.8rem; color: var(--muted); }
.me-people .site-person-face { border-radius: 50%; }
.me-foot { margin: 3rem 0 0; text-align: center; }
.me-foot .btn { margin: 0; }
/* la galería, en voz baja: el color vuelve al pasar por encima */
.gal-quiet .gal-item img { filter: grayscale(0.55); }
.gal-quiet .gal-item:hover img { filter: none; }
.theme-memoria .post-head { text-align: center; }
.theme-memoria .post-byline { justify-content: center; }

/* --- «Travesía»: el mapa es la portada ----------------------------------------- */
.tv-hero {
  position: relative;
  width: 100vw;
  margin: -2.2rem 0 2.6rem calc(50% - 50vw);
  min-height: clamp(420px, 70vh, 700px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 2rem max(1.5rem, calc(50vw - 540px + 1.5rem)) 2.4rem;
  background: var(--map-bg);
  overflow: hidden;
}
main > .flash ~ .tv-hero { margin-top: 0; }
/* el mapa se queda debajo: con z-index propio, sus capas (marcas, globos)
   no pueden colarse por encima de la tarjeta del título */
.tv-map { position: absolute; inset: 0; z-index: 0; }
.tv-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv-hero.has-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.66));
}
/* el título va suelto sobre el mapa: ni tarjeta ni velo debajo. El mapa es un
   relieve en gris muy claro (y muy oscuro de noche), así que la tinta normal se
   lee encima sin ayuda, y cualquier cosa que se ponga detrás para «asegurar»
   tapa justo lo que el estilo quiere enseñar. */
.tv-card {
  position: relative;
  z-index: 2;
  max-width: 40rem;
  text-align: center;
}
.tv-hero.has-cover .tv-card { color: #fff; text-shadow: 0 1px 24px rgba(0, 0, 0, 0.5); }
.tv-card h1 { margin: 0 0 0.6rem; font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1; }
.tv-card .site-kicker { justify-content: center; }
.tv-subtitle {
  margin: 0 auto;
  max-width: 30rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--text);
}
.tv-figures { display: flex; flex-wrap: wrap; justify-content: center; margin: 1.1rem 0 0; font-size: 0.84rem; color: var(--muted); }
.tv-figures span + span::before { content: "·"; margin: 0 0.55rem; opacity: 0.7; }
.tv-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 1.4rem 0 0; }
.tv-cta .btn { margin: 0; }
.tv-empty { max-width: 46rem; margin: 0 auto 2.4rem; }
.tv-body { max-width: 44rem; margin: 0 0 2.6rem; }
@media (max-width: 640px) {
  .tv-hero { min-height: 70vh; padding-bottom: 1.2rem; }
}

/* --- «Verbena»: los vivos, desde el móvil -------------------------------------- */
.vb-hero {
  /* un campo de color, como una foto: los mismos tonos de día y de noche */
  --sun: #f0a53c;
  --clay: #d44f2b;
  position: relative;
  width: 100vw;
  margin: -2.2rem 0 1.4rem calc(50% - 50vw);
  padding: 3.6rem max(1.5rem, calc(50vw - 540px + 1.5rem)) 3rem;
  background: linear-gradient(135deg, var(--sun) 0%, var(--clay) 100%);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
main > .flash ~ .vb-hero { margin-top: 0; }
/* debajo de la fiesta van sus caras, pegadas a propósito; si viene otra cosa
   (con «Personalizar»), aire */
.vb-hero:not(:has(+ .vb-faces-box)) { margin-bottom: 2.8rem; }
.vb-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.34; }
.vb-hero-text { position: relative; z-index: 1; }
.vb-emblem { display: block; margin: 0 auto 1rem; max-height: 84px; max-width: 200px; }
.vb-hero h1 { margin: 0 0 0.4rem; font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.02; color: #fff; }
.vb-subtitle {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  color: rgba(255, 255, 255, 0.88);
}
.vb-count {
  margin: 1.2rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
.vb-faces-box { margin: 0 0 2.6rem; }
.vb-faces {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 1rem 0.6rem;
}
.vb-faces a { display: block; color: inherit; text-decoration: none; text-align: center; }
.vb-faces img, .vb-faces a > span {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  background: var(--photo);
  border: 2px solid var(--paper);
  box-shadow: 0 2px 10px var(--shadow);
  transition: transform 0.2s ease;
}
.vb-faces a > span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--faint);
}
.vb-faces a:hover img, .vb-faces a:hover > span { transform: scale(1.06); }
.vb-faces em {
  display: block;
  margin-top: 0.4rem;
  font-style: normal;
  font-size: 0.8rem;
  line-height: 1.25;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vb-faces .is-gone img { filter: grayscale(0.7); opacity: 0.75; }
.vb-faces-note { margin-top: 1rem; }
.vb-empty { margin-bottom: 2.4rem; }
.vb-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.8rem;
}
.vb-card a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: 100%;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: var(--verbena-soft);
  border: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.vb-card a:hover { border-color: var(--verbena-accent); }
.vb-when {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verbena-accent);
}
.vb-face {
  width: 44px;
  height: 44px;
  margin: 0.3rem 0 0.2rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--photo);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vb-face img { width: 100%; height: 100%; object-fit: cover; }
.vb-face span { font-family: var(--font-display); font-size: 1.1rem; color: var(--faint); }
.vb-card strong { font-size: 1.02rem; line-height: 1.2; }
.vb-card .muted { font-size: 0.84rem; line-height: 1.35; }
.vb-body { max-width: 44rem; margin: 2.6rem 0; }
.vb-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.vb-post {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: inherit;
  text-decoration: none;
  background: var(--card);
}
.vb-post:hover { border-color: var(--edge); }
.vb-post-photo { flex: none; width: 108px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--photo); }
.vb-post-photo img { width: 100%; height: 100%; object-fit: cover; }
.vb-post-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.vb-post-meta { font-size: 0.8rem; color: var(--muted); }
.vb-post strong { font-size: 1.15rem; line-height: 1.22; }
.vb-post .muted { font-size: 0.9rem; line-height: 1.45; }
@media (max-width: 480px) {
  .vb-faces { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
  .vb-post { flex-direction: column; align-items: stretch; }
  .vb-post-photo { width: 100%; aspect-ratio: 16 / 9; }
}

/* --- «Archivo»: los documentos -------------------------------------------------- */
html:has(> body.theme-archivo), body.theme-archivo { background: var(--archivo-paper); }
body.theme-archivo > header { background: color-mix(in srgb, var(--archivo-paper) 88%, transparent); }
.theme-archivo .site-ghost, .theme-archivo .site-empty { background: var(--archivo-paper); }
.ar-head {
  margin: 0 0 2.4rem;
  padding: 0 0 1.4rem;
  border-bottom: 3px double var(--archivo-rule);
  position: relative;
}
.ar-ref {
  margin: 0 0 0.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--archivo-ink);
}
.ar-head h1 { margin: 0 0 0.5rem; font-size: clamp(2.1rem, 4.6vw, 3.2rem); line-height: 1.05; }
.ar-subtitle {
  margin: 0;
  max-width: 44rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--text);
}
.ar-main { min-width: 0; }
.ar-grid { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 2.8rem; align-items: start; }
.ar-about { font-size: 1.1rem; line-height: 1.7; margin: 0 0 2.6rem; max-width: 40rem; }
.ar-about p { margin: 0 0 1em; }
.ar-notes { list-style: none; margin: 0; padding: 0; }
.ar-notes li { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--archivo-rule); }
.ar-year {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.82rem;
  padding-top: 0.25rem;
  color: var(--archivo-ink);
  font-variant-numeric: tabular-nums;
}
.ar-note { display: flex; flex-direction: column; gap: 0.3rem; color: inherit; text-decoration: none; min-width: 0; }
.ar-note strong { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; line-height: 1.16; }
.ar-note:hover strong { text-decoration: underline; text-underline-offset: 0.14em; }
.ar-note .muted { font-size: 0.93rem; line-height: 1.5; }
.ar-note-by {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.8rem;
  color: var(--archivo-ink);
}
.ar-papers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.ar-paper {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding: 0.8rem;
  border: 1px solid var(--archivo-rule);
  border-radius: 6px;
  background: var(--card);
  color: inherit;
  text-decoration: none;
}
.ar-paper:hover { border-color: var(--edge-strong); }
.ar-ext {
  flex: none;
  width: 42px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--archivo-rule);
  border-radius: 3px;
  background: var(--archivo-paper);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--archivo-ink);
}
.ar-paper-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ar-paper-text strong { font-size: 0.96rem; line-height: 1.25; }
.ar-paper-text .muted { font-size: 0.8rem; }
.ar-paper-who { display: block; margin: 0.35rem 0 0 0.2rem; font-size: 0.8rem; color: var(--text); text-decoration: none; }
.ar-paper-who:hover { color: var(--ink); }
.ar-rail { position: sticky; top: 5.4rem; font-size: 0.88rem; }
.ar-rail .site-label { margin-bottom: 0.5rem; }
.ar-rail .site-label + .ar-table { margin-bottom: 1.8rem; }
.ar-table { width: 100%; border-collapse: collapse; }
.ar-table th, .ar-table td {
  padding: 0.34rem 0;
  border-bottom: 1px solid var(--archivo-rule);
  font-size: 0.8rem;
  vertical-align: baseline;
}
.ar-table th { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--archivo-ink); }
.ar-table td {
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}
.ar-links { list-style: none; margin: 0; padding: 0; }
.ar-links li { padding: 0.3rem 0; }
.ar-links a { color: var(--text-strong); font-size: 0.85rem; }
@media (max-width: 860px) {
  .ar-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .ar-rail { position: static; border-top: 3px double var(--archivo-rule); padding-top: 1.4rem; }
}
@media (max-width: 560px) {
  .ar-notes li { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .ar-year { padding-top: 0; }
}
.theme-archivo .post-title { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.theme-archivo .prose { max-width: 38rem; }

/* «desconocido» en el diálogo de añadir del árbol */
.tree-add-unknown-row { display: flex; gap: 0.8rem; align-items: center; margin: 0.9rem 0 0.2rem; }
.tree-add-unknown-row .btn { flex: none; margin: 0; border-style: dashed; }
.tree-add-unknown-row .muted { font-size: 0.8rem; line-height: 1.4; }
.unknown-note {
  border: 1px dashed var(--edge);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 1.4rem;
}

/* pública o privada, en la barra del árbol */
.tree-privacy[hidden] { display: none; }
.tree-privacy-pick { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; gap: 2px; }
.tree-privacy-pick button {
  margin: 0;
  padding: 0.3rem 0.85rem;
  font-size: 0.82rem;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
}
.tree-privacy-pick button:hover { background: var(--soft); color: var(--ink); }
.tree-privacy-pick button.on { background: var(--ink); color: var(--on-ink); }
.tree-privacy-pick button:disabled { opacity: 0.35; cursor: not-allowed; background: transparent; }
.tree-privacy-note { font-size: 0.8rem; line-height: 1.4; margin: 0.45rem 0 0; }
.portrait-col { display: flex; flex-direction: column; gap: 0.5rem; }
.portrait-drop { margin: 0; text-align: center; }
.portrait-drop button.linkish { font-size: 0.85rem; }

/* buscar a quién destacar */
.featured-search { position: relative; }
.featured-hits {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  list-style: none;
  margin: 0;
  padding: 0.3rem;
  max-height: 16rem;
  overflow: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 28px var(--shadow);
}
.featured-hits[hidden] { display: none; }
.featured-hits button {
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  padding: 0.45rem 0.6rem;
  background: none;
  color: var(--ink);
  border-radius: 8px;
  text-align: left;
  font-size: 0.92rem;
}
.featured-hits button:hover, .featured-hits button.on { background: var(--soft); }
.featured-hits .muted { font-size: 0.8rem; }
.featured-none { padding: 0.45rem 0.6rem; font-size: 0.88rem; }
.featured-chosen {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--ink);
  border-radius: 10px;
  font-size: 0.95rem;
}
.featured-chosen[hidden] { display: none; }
.featured-add button[type="submit"]:disabled { opacity: 0.4; cursor: not-allowed; }

/* las entradas, una por fila */
.post-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.post-rows li { border-bottom: 1px solid var(--line); }
.post-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 1.6rem;
  align-items: center;
  padding: 1.4rem 0;
  color: inherit;
  text-decoration: none;
}
.post-row-img.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 3.4rem;
  color: var(--faint);
  background: var(--soft);
}
.theme-album .post-row-img.is-empty { background: var(--album-card); }
.post-row-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; background: var(--photo); display: block; }
.post-row-body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; max-width: 46rem; }
.post-row-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.post-row:hover .post-row-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.post-row-text { color: var(--text); line-height: 1.5; }
.post-row .post-card-meta { display: flex; gap: 0.5rem; align-items: center; }
@media (max-width: 560px) {
  .post-row { grid-template-columns: 96px minmax(0, 1fr); gap: 0.9rem; align-items: start; }
  .post-row-title { font-size: 1.3rem; }
  .post-row-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.9rem; }
}
.theme-album .post-rows, .theme-album .post-rows li { border-color: var(--album-edge); }

/* =====================================================================
   Modo noche. Casi todo va solo con las variables de :root; aquí lo que
   no sale de ellas: imágenes, lienzos y piezas de terceros.
   ===================================================================== */

/* el escudo, si se ha pedido: invertido de noche, salvo encima de una foto;
   y si solo hay el de noche (claro), invertido de día, que sobre el papel no
   se vería */
:root[data-theme="dark"] .is-invertible { filter: invert(1); }
:root[data-theme="dark"] .has-cover .is-invertible { filter: none; }
:root:not([data-theme="dark"]) .is-invertible-dia { filter: invert(1); }
:root:not([data-theme="dark"]) .has-cover .is-invertible-dia { filter: none; }
/* la portada de «Revista» es oscura de día y de noche: ahí no cambia */
:root[data-theme="dark"] .rv-hero .rv-emblem.is-invertible { filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.35)); }

/* los distintivos se dibujan en negro: de noche, al revés que de día */
:root[data-theme="dark"] .tree-badges button canvas { filter: invert(1); }
:root[data-theme="dark"] .tree-badges button.on canvas { filter: none; }

/* de noche, el fondo del mapa cambia de estilo (place.js) y las marcas y las
   líneas de color; los globos y los botones de MapLibre, aquí */
:root[data-theme="dark"] .map-stage { background: #262522; }
:root[data-theme="dark"] .maplibregl-popup-content { background: var(--card); color: var(--ink); box-shadow: 0 6px 20px var(--shadow-lg); }
:root[data-theme="dark"] .maplibregl-popup-anchor-top .maplibregl-popup-tip,
:root[data-theme="dark"] .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
:root[data-theme="dark"] .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--card); }
:root[data-theme="dark"] .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
:root[data-theme="dark"] .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
:root[data-theme="dark"] .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--card); }
:root[data-theme="dark"] .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--card); }
:root[data-theme="dark"] .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--card); }
:root[data-theme="dark"] .maplibregl-popup-close-button { color: var(--muted); }
:root[data-theme="dark"] .maplibregl-ctrl-group { background: var(--card); box-shadow: 0 0 0 1px var(--line); }
:root[data-theme="dark"] .maplibregl-ctrl-group button + button { border-top-color: var(--line); }
:root[data-theme="dark"] .maplibregl-ctrl button .maplibregl-ctrl-icon { filter: invert(1); }
:root[data-theme="dark"] .maplibregl-ctrl-attrib { background: rgba(18, 18, 18, 0.72); color: var(--muted); }
:root[data-theme="dark"] .maplibregl-ctrl-attrib a { color: var(--muted); }
:root[data-theme="dark"] .maplibregl-ctrl-attrib.maplibregl-compact { background: var(--card); }
:root[data-theme="dark"] .maplibregl-ctrl-attrib-button { filter: invert(1); }

/* las fotos, un punto más apagadas para que no deslumbren */
:root[data-theme="dark"] :is(.gal-item, .post-row-img, .post-figure, .site-person-face, .plaza-person-face, .plaza-news-item, .tile, .portrait, .product-shot) img { filter: brightness(0.92); }

/* Editor.js trae su propio CSS en blanco: se le cambian sus variables */
:root[data-theme="dark"] :is(.codex-editor, .ce-popover, .ce-popover__container, .ce-inline-toolbar) {
  --color-border: var(--line);
  --color-shadow: var(--shadow-md);
  --color-background: var(--card);
  --color-text-primary: var(--ink);
  --color-text-secondary: var(--muted);
  --color-border-icon: var(--edge);
  --color-border-icon-disabled: var(--line);
  --color-text-icon-active: #7fb4f0;
  --color-background-icon-active: rgba(127, 180, 240, 0.14);
  --color-background-item-focus: rgba(127, 180, 240, 0.12);
  --color-shadow-item-focus: transparent;
  --color-background-item-hover: var(--soft);
  --color-line-gray: var(--line);
  --color-active-icon: #7fb4f0;
  --color-gray-border: var(--edge);
  --selectionColor: rgba(127, 180, 240, 0.18);
  --inlineSelectionColor: rgba(127, 180, 240, 0.28);
  --bg-light: var(--soft);
  --grayText: var(--muted);
}
:root[data-theme="dark"] .codex-editor :is(.ce-popover, .ce-popover__container, .ce-inline-toolbar, .ce-conversion-toolbar, .ce-settings, .ce-popover--inline .ce-popover__container) {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}
:root[data-theme="dark"] .codex-editor :is(.ce-toolbar__plus, .ce-toolbar__settings-btn, .ce-inline-tool, .ce-inline-toolbar__dropdown) { color: var(--ink); }
:root[data-theme="dark"] .codex-editor :is(.ce-toolbar__plus, .ce-toolbar__settings-btn):hover { background: var(--soft); }
:root[data-theme="dark"] .codex-editor :is(.ce-popover-item__icon, .ce-conversion-tool__icon) { background: var(--soft); box-shadow: 0 0 0 1px var(--edge); }
:root[data-theme="dark"] .codex-editor .cdx-search-field { background: var(--soft); border-color: var(--line); }
:root[data-theme="dark"] .codex-editor .cdx-search-field__input { color: var(--ink); }
:root[data-theme="dark"] .codex-editor .ce-block--selected .ce-block__content { background: rgba(127, 180, 240, 0.14); }
:root[data-theme="dark"] .codex-editor .image-tool__image { background: var(--soft); }
:root[data-theme="dark"] .codex-editor .cdx-input { color: var(--ink); }
:root[data-theme="dark"] .codex-editor [data-placeholder]:empty::before,
:root[data-theme="dark"] .codex-editor [data-placeholder-active]:empty::before { color: var(--faint); }
:root[data-theme="dark"] :is(.ce-popover-item, .ce-popover-item__title, .ce-popover-item__icon, .ce-popover__nothing-found-message) { color: var(--ink); }
:root[data-theme="dark"] .ce-popover-item__secondary-title { color: var(--muted); }
:root[data-theme="dark"] :is(.ce-popover__items, .ce-popover__container) { scrollbar-color: var(--edge) transparent; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }

/* explicar qué supone público y privado, allí donde se decide */
.field-help { margin: 0.35rem 0 0.2rem; font-size: 0.8rem; line-height: 1.45; color: var(--muted); max-width: 34rem; }
.visibility-help { margin: 0.7rem 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--muted); max-width: 44rem; }
.visibility-help p { margin: 0 0 0.45rem; }
.visibility-help strong { color: var(--ink); font-weight: 600; }
.tree-add-vis-note { display: block; font-size: 0.8rem; line-height: 1.35; margin-top: 0.3rem; }
.key-form { max-width: 30rem; margin-top: 0.4rem; }
.key-form button { margin-top: 0; }

/* La contraseña del árbol, como la ve el dueño: se puede leer (con el ojo) y
   copiar, porque es para repartirla entre la familia. */
.key-now { margin: 0.9rem 0 1.1rem; max-width: 30rem; }
.key-field span.muted {
  display: block;
  font-size: 0.8rem;
  margin-bottom: 0.3rem;
}
.key-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.key-value {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.02em;
}
.key-value[type="password"] { letter-spacing: 0.18em; }
.key-eye {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
}
.key-eye:hover { color: var(--ink); border-color: var(--edge); background: var(--soft); }
.key-eye .is-shut { display: none; }
.key-eye[aria-pressed="true"] .is-open { display: none; }
.key-eye[aria-pressed="true"] .is-shut { display: block; }
.key-copy { flex: none; margin: 0; white-space: nowrap; }
.key-drop {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  margin-top: 0.9rem;
}
.key-drop .small-print { margin: 0; max-width: 26rem; }

/* --- La línea del tiempo, bajo el mapa del árbol (tiempo.js) ------------------ */
.map-time {
  flex: none;
  height: 176px;
  display: flex;
  flex-direction: column;
  padding: 0.45rem 0 0.2rem;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.map-time-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 2rem;
  padding: 0 1rem;
}
.map-time-bar p { margin: 0; font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-time-range { color: var(--ink); font-variant-numeric: tabular-nums; }
.map-time-hint { font-size: 0.8rem !important; }
.map-time-all { margin-left: auto !important; font-size: 0.84rem; }
.map-time-all[hidden], .map-time-hint[hidden] { display: none; }
.map-time-play {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
}
.map-time-play:disabled { opacity: 0.3; cursor: default; }
.map-time-play .is-pause, .map-time-play.is-playing .is-play { display: none; }
.map-time-play.is-playing .is-pause { display: block; }
.map-time-plot { position: relative; flex: 1; min-height: 0; }
.map-time-plot canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  outline: none;
}
.map-time-plot canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--edge); border-radius: 6px; }
.map-time-tip {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  max-width: 22rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 8px 24px var(--shadow);
  font-size: 0.8rem;
  line-height: 1.35;
  pointer-events: none;
  transform: translate(-50%, -100%);
}
.map-time-tip[hidden] { display: none; }
.map-time-tip strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-time-tip span { color: var(--muted); }
.map-time.is-empty { height: auto; padding-bottom: 0.6rem; }
.map-time.is-empty .map-time-plot { display: none; }
.map-time.is-empty .map-time-range { white-space: normal; color: var(--muted); }
/* con la línea del tiempo debajo, el mapa es más bajo: la leyenda cabe o se
   desplaza. Sin desenfoque detrás: sobre un mapa que cambia a cada fotograma
   sale caro, y con el fondo casi opaco no se nota. */
.map-page .map-legend { display: flex; flex-direction: column; max-height: calc(100% - 2.2rem); backdrop-filter: none; background: var(--glass); }
.map-page .map-legend .map-mode:not([hidden]) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.map-page .map-legend .map-people { flex: 1; min-height: 0; max-height: none; overflow: auto; }
/* en la leyenda, lo que la época deja fuera */
.map-legend .map-people li.is-out { opacity: 0.38; }
@media (max-width: 640px) {
  .map-time { height: 148px; }
  .map-time-hint { display: none; }
  /* en el móvil la leyenda no puede tapar el mapa: menos de la mitad, sin la explicación */
  .map-page .map-legend { max-height: 44%; }
  .map-page .map-legend .meta { display: none; }
  .map-page .map-legend h2 { font-size: 1.2rem; margin: 0.2rem 0 0; }
  .map-page .map-legend .map-people { margin-top: 0.4rem; }
}

/* «Quién más estuvo» al apuntar un evento: primero los de al lado, en
   casillas redondas; el resto del árbol, en una lista. */
.ev-who {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.7rem 0.9rem 0.9rem;
  margin: 0.9rem 0 0;
}
.ev-who legend {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0.35rem;
}
.ev-who .pills { margin-bottom: 0.2rem; }
.ev-who .pill em { font-style: normal; opacity: 0.65; font-size: 0.78em; }
.ev-who label.muted { font-size: 0.8rem; margin-top: 0.7rem; }
.ev-who select { margin-top: 0.2rem; }

/* El año al lado de un evento suelto del mapa del árbol: sin globo, sin
   flecha, que no tape el mapa. (El de las personas lo pinta el mapa.) */
.map-ev .map-ev-ano {
  position: absolute;
  left: calc(100% + 5px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--glass);
  color: var(--ink);
  font: 600 11px/1 var(--font-ui);
  padding: 0.12rem 0.35rem;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}

/* La cinta de «confirma tu email» y la casilla de novedades. El aviso usa el
   mismo hueco que los mensajes de siempre, con el color de las notas. */
.flash-warn {
  background: var(--note-bg);
  border-color: var(--note-line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
}
.flash-warn form { display: inline; }

label.check.news-check {
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 0.9rem;
  line-height: 1.45;
}
.news-check input { margin-top: 0.22rem; }
.news-check em {
  display: block;
  font-style: normal;
  font-size: 0.82rem;
  margin-top: 0.15rem;
}

/* --- Álbumes: el aviso de privado y la barra de ordenar --------------------- */
.alb-lock { color: var(--muted); }

/* la barra de abajo, que se queda pegada mientras se eligen fotos */
.alb-pickbar {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  background: var(--glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.alb-pickbar p { margin: 0 0 0.6rem; font-size: 0.82rem; }
.alb-pickbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.alb-pickbar-row input[type="text"], .alb-pickbar-row input:not([type]) { flex: 1 1 14rem; margin: 0; }
.alb-pickbar-row button { margin: 0; }
.alb-pickbar-row .check { margin: 0; }


/* --- Probar un estilo antes de ponerlo -------------------------------------
   La barra flota abajo: el menú de arriba ya es fijo y no se van a disputar el
   sitio, y así se puede ir saltando de estilo en estilo sin volver a subir. */
.theme-opt { display: flex; flex-direction: column; gap: 0.3rem; }
.theme-opt .theme-card { flex: 1; }
/* «Probarlo» es un botón, no un enlace de puntillas: es lo que se quiere que
   la gente haga antes de elegir. */
.theme-see {
  align-self: stretch;
  text-align: center;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
}
.theme-see:hover { border-color: var(--ink); background: var(--soft); }
.theme-opt:hover .theme-see { border-color: var(--edge-strong); }

/* La invitación, antes de las tarjetas */


body.is-preview main { padding-bottom: 7.5rem; }
.tp-bar {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 1rem;
  translate: -50% 0;
  max-width: min(64rem, calc(100vw - 1.6rem));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.7rem 1rem;
  background: var(--glass);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 14px 38px var(--shadow-lg);
  color: var(--ink);
}
.tp-what { display: flex; align-items: baseline; gap: 0.5rem; margin: 0; font-size: 0.85rem; flex: 0 1 auto; }
.tp-what strong { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.tp-name { font-weight: 600; }
.tp-what .muted { font-size: 0.8rem; }
/* los estilos, en su propia fila: son diez y en la de arriba se cortarían */
.tp-chips {
  order: 3;
  display: flex;
  gap: 0.3rem;
  flex: 1 0 100%;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 0.15rem;
}
.tp-chips a {
  flex: none;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  background: var(--paper);
}
.tp-chips a:hover { border-color: var(--edge); color: var(--ink); }
.tp-chips a.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.tp-acts { display: flex; align-items: center; gap: 0.5rem; flex: none; margin-left: auto; }
.tp-acts form { margin: 0; }
.tp-acts button, .tp-acts .btn { margin: 0; }

@media (max-width: 720px) {
  .tp-bar { bottom: 0.6rem; padding: 0.6rem 0.7rem; gap: 0.45rem 0.6rem; }
  .tp-what { width: 100%; }
  .tp-acts { width: 100%; justify-content: space-between; }
  body.is-preview main { padding-bottom: 11rem; }
}

/* --- «Mosaico»: la pared de caras -------------------------------------------
   El muro va a sangre y en blanco y negro; el color vuelve al pasar por
   encima, que es lo que invita a mirar quién es cada uno. Encima, el nombre de
   la familia sobre un velo oscuro: como una foto de portada, es oscuro de día
   y de noche.

   El alto de la portada sale de cuántas caras hay (--cols y --rows los calcula
   sitio.wall): así la baldosa es cuadrada como la miniatura y al retrato no se
   le corta la cabeza. Con mucha gente el alto se queda en 76vh y ahí sí se
   recorta un poco, que es lo de menos. */
.mo-wall {
  position: relative;
  width: 100vw;
  margin: -2.2rem 0 2.4rem calc(50% - 50vw);
  min-height: max(340px, min(76vh, calc(100vw / var(--cols, 5) * var(--rows, 2))));
  display: grid;
  place-items: center;
  padding: 3rem max(1.5rem, calc(50vw - 540px + 1.5rem));
  background: #111;
  overflow: hidden;
}
.mo-wall.is-bare { min-height: clamp(300px, 48vh, 520px); }
.mo-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.mo-tiles {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), 1fr);
  grid-auto-rows: 1fr;
}
.mo-tiles li { overflow: hidden; }
.mo-spill { grid-column: span var(--spill, 1); }
.mo-tiles a { display: block; width: 100%; height: 100%; }
.mo-tiles img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* la cara está arriba en casi todas las fotos: si hay que recortar, por abajo */
  object-position: center 32%;
  filter: grayscale(1) contrast(1.06);
  opacity: 0.62;
  transition: filter 0.35s ease, opacity 0.35s ease, transform 0.6s ease;
}
.mo-tiles a:hover img { filter: none; opacity: 1; transform: scale(1.04); }
/* el velo deja pasar el ratón: las caras de debajo siguen siendo enlaces */
.mo-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.38) 55%, rgba(0, 0, 0, 0.7) 100%);
}
.mo-title {
  position: relative;
  z-index: 1;
  max-width: 44rem;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55);
}
.mo-emblem { width: clamp(64px, 8vw, 104px); height: auto; margin: 0 auto 1.1rem; display: block; }
.mo-wall h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: 0.98; margin: 0; }
.mo-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  margin: 0.6rem 0 0;
  color: rgba(255, 255, 255, 0.86);
}
.mo-figures {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1rem;
  margin: 1.2rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.mo-figures span + span::before { content: "·"; margin-right: 1rem; }
.mo-title .site-cta { justify-content: center; margin-top: 1.6rem; }
.mo-title .site-cta .btn { background: #fff; color: #111; border-color: #fff; }
.mo-title .site-cta .site-cta-alt {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
}
.mo-title .site-cta .site-cta-alt:hover { background: rgba(255, 255, 255, 0.26); }
.mo-empty { max-width: 44rem; margin-bottom: 2rem; }

/* el dibujo del selector: la pared, en pequeño */
.theme-sketch-mosaico { grid-template: 1fr 1fr / repeat(3, 1fr); gap: 2px; background: #1a1a1a; padding: 2px; }
.theme-sketch-mosaico i { background: rgba(255, 255, 255, 0.34); border-radius: 1px; }
.theme-sketch-mosaico i:nth-child(1) { grid-area: 1 / 1 / 3 / 3; background: rgba(255, 255, 255, 0.55); }
.theme-sketch-mosaico i:nth-child(5), .theme-sketch-mosaico i:nth-child(6) { background: rgba(255, 255, 255, 0.2); }

@media (max-width: 720px) {
  /* en un móvil, cuatro columnas como mucho: con doce, las caras no se ven */
  .mo-tiles { grid-template-columns: repeat(min(var(--cols, 4), 4), 1fr); }
  .mo-wall { min-height: 62vh; padding-left: 1.2rem; padding-right: 1.2rem; }
}

/* --- El mapa: marcas de evento, tarjeta al pasar y distintivos -------------- */
/* Un evento es una chapa con su icono; sin distintivo, un punto. Van en el
   DOM (no en el lienzo) porque un icono por evento no se puede pintar en
   canvas, y eventos hay decenas, no miles como personas. */
.map-ev {
  transition: scale 0.15s ease, opacity 0.2s ease;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  border: 1.4px solid var(--ink);
  box-shadow: 0 1px 6px var(--shadow);
}
.map-ev svg { display: block; }
.map-ev.is-dot {
  width: 13px;
  height: 13px;
  background: var(--ink);
}
/* varios eventos en el mismo sitio: cuántos, en una pastilla */
.map-ev .n {
  position: absolute;
  top: -7px;
  right: -9px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font: 700 10.5px/17px var(--font-ui);
  text-align: center;
  box-shadow: 0 0 0 2px var(--paper);
}
.map-ev.is-dot .n { top: -9px; right: -12px; }
/* La marca que coloca MapLibre (con transform) es el envoltorio, y no crece:
   si crece el mismo elemento que se coloca, en Firefox el ratón «sale» de él
   con cada movimiento, la marca encoge, vuelve a entrar y vibra, y no hay
   manera de pincharla. Crece lo de dentro. */
.map-ev-pin { cursor: pointer; }
.map-ev-pin:hover, .map-ev-pin:has(> .map-ev.is-lit) { z-index: 500; }
.map-ev-pin:hover > .map-ev { scale: 1.14; }
.map-ev.is-lit { scale: 1.22; box-shadow: 0 2px 12px var(--shadow-md); }
.map-ev.is-out { opacity: 0.22; }

/* La tarjeta que sale al pasar por encima de una marca */
.map-card {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 620;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 17rem;
  padding: 0.5rem 0.7rem 0.5rem 0.5rem;
  background: var(--glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 26px var(--shadow-md);
  pointer-events: none;
  line-height: 1.3;
}
.map-card[hidden] { display: none; }
.map-card-face {
  flex: none;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 10px;
  overflow: hidden;
  background: var(--photo);
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  color: var(--muted);
}
.map-card-face img { width: 100%; height: 100%; object-fit: cover; }
.map-card-face.is-event { background: none; color: var(--ink); }
.map-card-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--ink); }
.map-card-text { display: grid; gap: 0.1rem; min-width: 0; }
.map-card-text strong { font-size: 0.92rem; font-weight: 600; }
.map-card-years { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.map-card-note { font-size: 0.8rem; color: var(--muted); overflow-wrap: anywhere; }
.map-card-list { display: grid; gap: 0.1rem; margin-top: 0.15rem; font-size: 0.8rem; color: var(--ink); }
/* los globos del mapa: lo de la tarjeta y un enlace a su página */
.maplibregl-popup-content { font: 0.86rem/1.4 var(--font-ui); border-radius: 12px; padding: 0.7rem 2rem 0.7rem 0.85rem; }
.maplibregl-popup-close-button { font-size: 1.1rem; width: 1.6rem; height: 1.6rem; margin: 0.2rem; border-radius: 50%; color: var(--muted); background: none; }
.maplibregl-popup-close-button:hover { background: var(--soft); }
.map-ir { display: inline-block; margin-top: 0.35rem; font-weight: 600; color: var(--ink); }
.map-pop-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.45rem; max-height: 15rem; overflow: auto; }
.map-pop-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 0.45rem; align-items: start; }
.map-pop-list li > svg { margin-top: 0.15rem; }
.map-pop-list li:not(:has(> svg)) > span { grid-column: 1 / 3; }
.map-pop-list small { color: var(--muted); }
.map-pop-list .map-ir { margin: 0; white-space: nowrap; }
/* encender y apagar cada tipo de evento */
.map-tipos { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.7rem 0 0.2rem; }
.map-tipos button { margin: 0; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem;
  font-size: 0.8rem; background: transparent; color: var(--ink); border: 1px solid var(--edge); border-radius: 999px; }
.map-tipos button:hover { background: var(--soft); }
.map-tipos button[aria-pressed="false"] { color: var(--muted); border-style: dashed; opacity: 0.6; text-decoration: line-through; }
.map-tipos .k-event { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.4px solid currentColor; }
.map-legend .map-people li.is-tipo-fuera { display: none; }

/* La leyenda de símbolos del panel */
.map-key { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.8rem; color: var(--muted); }
.map-key li { display: flex; align-items: center; gap: 0.5rem; }
.map-key i { flex: none; display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; color: var(--ink); }
.map-key .k-person { width: 11px; height: 11px; border-radius: 50%; background: var(--ink); opacity: 0.85; }
.map-key .k-event { width: 15px; height: 15px; border-radius: 50%; border: 1.4px solid var(--ink); }
.map-key .k-spouse { width: 1.2rem; height: 0; border-top: 1.8px solid var(--ink); opacity: 0.6; }
.map-key .k-parent { width: 1.2rem; height: 0; border-top: 1.4px dotted var(--ink); }
.map-key .k-track { width: 1.2rem; height: 0; border-top: 1.4px dashed var(--ink); opacity: 0.6; }

/* El selector de distintivo de un evento */
.ev-badge-pick { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.35rem 0 0.2rem; }
.ev-badge { margin: 0; cursor: pointer; }
.ev-badge input { position: absolute; opacity: 0; pointer-events: none; }
.ev-badge-art {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
}
.ev-badge-none::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); }
.ev-badge:hover .ev-badge-art { border-color: var(--edge); background: var(--soft); }
.ev-badge input:checked + .ev-badge-art { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); background: var(--soft); }
.ev-badge-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* --- Privacidad y condiciones ----------------------------------------------
   Textos largos que alguien va a leer buscando una cosa concreta: índice
   arriba, apartados numerados y columna estrecha. */
.legal-updated { margin: -1rem 0 1.8rem; font-size: 0.88rem; }
.legal-text { max-width: 42rem; line-height: 1.7; color: var(--text); }
.legal-text h2 { font-size: 1.35rem; margin: 2.6rem 0 0.7rem; scroll-margin-top: 5rem; }
.legal-text ul { padding-left: 1.2rem; }
.legal-text li { margin-bottom: 0.45rem; }
.legal-text .contact-list { margin: 1rem 0 1.2rem; }
.legal-toc { margin: 1.8rem 0 0.4rem; padding: 1rem 1.3rem; border: 1px solid var(--line); border-radius: 14px; }
.legal-toc ol { margin: 0; padding-left: 1.2rem; columns: 2 14rem; column-gap: 2rem; font-size: 0.92rem; }
.legal-toc li { margin: 0 0 0.3rem; break-inside: avoid; }
/* si alguna vez una tabla no cabe en el móvil, se desplaza ella, no la página */
.legal-table-wrap { overflow-x: auto; margin: 1rem 0; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; line-height: 1.5; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 0.6rem 0.8rem 0.6rem 0; border-bottom: 1px solid var(--line); }
.legal-table th { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

/* la «primera capa» del registro: está, pero plegada */
.legal-basic { margin-top: 1.1rem; font-size: 0.82rem; color: var(--muted); }
.legal-basic summary { cursor: pointer; }
.legal-basic dl { margin: 0.7rem 0 0; display: grid; gap: 0.45rem; }
.legal-basic dt { font-weight: 600; color: var(--text); }
.legal-basic dd { margin: 0; }
.legal-basic p { margin: 0.6rem 0 0; }
/* arriba de una traducción: que vale el original en español */
.legal-traduccion { max-width: 42rem; margin: -0.6rem 0 1.8rem; padding: 0.8rem 1rem; border-left: 3px solid var(--edge);
  background: var(--soft); border-radius: 0 10px 10px 0; font-size: 0.92rem; line-height: 1.55; }
.legal-traduccion p { margin: 0; }
.legal-traduccion a { white-space: nowrap; }

/* El aviso al dar de alta a alguien: se tiene que leer, pero no es un error */
.person-notice {
  margin: 1rem 0 0;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--edge);
  background: var(--soft);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 44rem;
}
.person-notice strong { color: var(--ink); font-weight: 600; }
.visibility-all { margin-top: 0.4rem; }
.visibility-all h3 { font-size: 1.05rem; margin: 0 0 0.4rem; }
.visibility-all form { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.visibility-all .small-print { margin: 0; }
.visibility-all label.check.news-check { margin-top: 0; }

/* --- Privacidad del árbol: dos columnas, públicas y privadas ----------------- */
.priv-page h1 { margin: 0.6rem 0 0.4rem; }
.priv-page .lede { max-width: 44rem; }
.priv-warn {
  margin: 0 0 1.2rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--note-line);
  background: var(--note-bg);
  border-radius: 12px;
  font-size: 0.88rem;
  max-width: 44rem;
}
.priv-board { display: grid; gap: 1rem; margin-top: 1.2rem; }
@media (min-width: 760px) { .priv-board { grid-template-columns: 1fr 1fr; } }
.priv-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.1rem 1.1rem 1rem;
  background: var(--card);
}
.priv-head h2 { font-size: 1.15rem; margin: 0 0 0.25rem; display: flex; align-items: baseline; gap: 0.5rem; }
.priv-count { font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.priv-head p { font-size: 0.84rem; margin: 0 0 0.8rem; line-height: 1.45; }
.priv-tools { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 0.5rem; }
.priv-tools .priv-filter { flex: 1; min-width: 0; }
.priv-tools .priv-all { margin: 0; white-space: nowrap; font-size: 0.88rem; }
/* la lista se desplaza ella: con cien personas, el botón sigue a mano */
.priv-list {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  max-height: min(60vh, 34rem);
  overflow-y: auto;
  border-top: 1px solid var(--line);
  flex: 1;
}
.priv-list li { border-bottom: 1px solid var(--line); }
.priv-list label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.55rem;
  padding: 0.55rem 0.4rem;
  cursor: pointer;
  border-radius: 8px;
}
.priv-list label:hover { background: var(--soft); }
.priv-list li.on label { background: var(--soft-hover); }
.priv-list input { width: auto; margin: 0; align-self: center; }
.priv-list input:disabled + .priv-name { color: var(--muted); }
.priv-list li:has(input:disabled) label { cursor: default; }
.priv-name { font-weight: 500; }
.priv-years { font-size: 0.85rem; }
.priv-flag {
  font-size: 0.8rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--note-bg);
  border: 1px solid var(--note-line);
  color: var(--text);
}
.priv-lock { font-size: 0.8rem; }
.priv-empty { padding: 0.8rem 0.4rem; font-size: 0.9rem; }
@keyframes priv-just { from { background: var(--mark); } to { background: transparent; } }
.priv-list li.just label { animation: priv-just 1.6s ease-out; }
.priv-move { align-self: stretch; }
.priv-move:disabled { opacity: 0.35; cursor: not-allowed; }

/* Solo para lectores de pantalla */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Subir muchas fotos (subida.js) ----------------------------------------- */
ul.gallery { list-style: none; margin: 0; padding: 0; }
.tile.add { flex-direction: column; gap: 0.2rem; line-height: 1.3; }
.tile.add small { font-size: 0.8rem; }
.tile-send { position: relative; z-index: 1; margin-top: 0.4rem; padding: 0.25rem 0.7rem; font-size: 0.8rem; }
/* donde se puede soltar: al pasar con fotos por encima, se nota */
[data-drop], form[data-uploader] { transition: box-shadow 0.15s, background 0.15s; border-radius: 14px; }
.is-dropping { box-shadow: 0 0 0 2px var(--ink); background: var(--soft); }
.tile.add.is-dropping { background: var(--soft-hover); }
.upl-panel { margin-top: 0.9rem; font-size: 0.88rem; }
.upl-panel[hidden] { display: none; }
.upl-text { margin: 0 0 0.4rem; color: var(--text); }
.upl-bar { height: 6px; border-radius: 999px; background: var(--soft-hover); overflow: hidden; }
.upl-bar span { display: block; height: 100%; width: 0; background: var(--ink); transition: width 0.2s; }
.upl-errors { margin: 0.5rem 0 0; padding-left: 1.1rem; color: var(--danger); font-size: 0.84rem; }
form.is-uploading input[type=file] { pointer-events: none; }

/* --- «Más fotos» -------------------------------------------------------------- */
.gal-pages { display: flex; justify-content: center; gap: 1.2rem; margin: 1.4rem 0 0.4rem; }
.gal-pages a { font-size: 0.9rem; color: var(--muted); }
.gal-more {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink) !important;
}
.gal-more:hover { border-color: var(--edge); }
.gal-more[data-loading] { opacity: 0.6; pointer-events: none; }

/* --- Ordenar un álbum (orden.js) ------------------------------------------------ */
.alb-order-help { margin: 0 0 0.9rem; font-size: 0.88rem; }
.alb-sort { list-style: none; margin: 0; padding: 0; }
.alb-sort li {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--photo);
  cursor: grab;
  user-select: none;
  box-shadow: 0 0 0 1px var(--line);
}
.alb-sort li img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.alb-sort li.is-cover { box-shadow: 0 0 0 3px var(--ink); }
.alb-sort li.is-dragging {
  z-index: 5;
  cursor: grabbing;
  box-shadow: 0 12px 30px var(--shadow-lg), 0 0 0 2px var(--ink);
  opacity: 0.95;
}
.alb-sort.is-sorting li:not(.is-dragging) { transition: none; }
.alb-sort-grip {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 1.1rem;
  touch-action: none;               /* el dedo en el asa arrastra, no desplaza */
  cursor: grab;
}
.alb-sort-acts {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
}
.alb-sort-acts button {
  margin: 0;
  padding: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #111;
  font-size: 0.95rem;
  line-height: 1;
}
.alb-sort-acts button:hover { background: #fff; }
.alb-sort-cover[aria-pressed="true"] { background: #111 !important; color: #f5c518; }
.alb-sort li:first-child .alb-sort-move:first-child,
.alb-sort li:last-child .alb-sort-move:last-child { visibility: hidden; }

/* ==========================================================================
   La galería (fase 2): una rejilla que no recorta las fotos, agrupada por
   décadas, con los álbumes arriba y la selección de varias abajo.
   ========================================================================== */
body.gx-page main, body.ph-page main { max-width: 1320px; }
.gx { position: relative; }

.gx-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 1.8rem;
}
.gx-title h1 { font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; margin: 0 0 0.5rem; }
.gx-sub { margin: 0; color: var(--muted); font-size: 0.95rem; }
.gx-sub span { white-space: nowrap; }
.gx-note { margin: 0.6rem 0 0; max-width: 44rem; color: var(--text); }
.gx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.gx-actions .btn, .gx-actions button { margin: 0; }
.gx-upload { margin: 0; display: flex; align-items: center; gap: 0.4rem; }
.gx-upload-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  cursor: pointer;
}
/* la casilla de archivos cubre el botón: se elige pinchándolo */
.gx-upload-btn input[type=file] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  padding: 0;
  border: 0;
}
.gx-upload-btn:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
#gx-subida .upl-panel { max-width: 30rem; margin: -0.8rem 0 1.4rem; }

/* soltar fotos sobre la página: un velo que lo dice */
.gx[data-drop].is-dropping { box-shadow: none; background: none; }
.gx[data-drop].is-dropping::after {
  content: "Suelta las fotos para subirlas";
  position: fixed;
  inset: 0.8rem;
  z-index: 40;
  display: grid;
  place-items: center;
  border: 2px dashed var(--ink);
  border-radius: 22px;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  pointer-events: none;
}

/* --- Álbumes: una tira de pilas de fotos ---------------------------------- */
.gx-albums { margin-bottom: 2.2rem; }
.gx-row-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 0.9rem; }
.gx-row-head h2 {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.gx-hint { margin: 0; color: var(--muted); font-size: 0.92rem; }
.gx-album-strip {
  list-style: none;
  margin: 0 -0.3rem;
  padding: 0.6rem 0.3rem 0.8rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(170px, 210px);
  gap: 1.4rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.gx-album-strip > li { scroll-snap-align: start; }
.gx-album { display: flex; flex-direction: column; gap: 0.2rem; color: inherit; text-decoration: none; }
.gx-album strong { font-weight: 600; margin-top: 0.7rem; line-height: 1.25; }
.gx-album .muted { font-size: 0.82rem; }
/* «Todas las fotos» es una tarjeta más de la tira, pero se distingue: su
   nombre va subrayado y, cuando es la que se está viendo, se marca. */
.gx-album-all strong { text-decoration: underline; text-underline-offset: 3px; }
.gx-album-all.on strong { text-decoration: none; }
.gx-album-all.on .gx-stack::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid currentColor;
  border-radius: 15px;
}
.gx-stack { position: relative; display: block; aspect-ratio: 1.15; }
.gx-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  border: 3px solid var(--paper);
  box-shadow: 0 2px 10px var(--shadow);
  transition: transform 0.25s ease;
}
/* las de debajo asoman, un poco giradas: se ve que es un montón */
.gx-stack img:nth-last-child(2) { transform: rotate(-4deg) translate(-4px, 2px) scale(0.96); }
.gx-stack img:nth-last-child(3) { transform: rotate(4deg) translate(5px, 1px) scale(0.93); }
.gx-album:hover .gx-stack img:nth-last-child(2) { transform: rotate(-7deg) translate(-10px, 2px) scale(0.96); }
.gx-album:hover .gx-stack img:nth-last-child(3) { transform: rotate(7deg) translate(11px, 1px) scale(0.93); }
.gx-album:hover .gx-stack img:last-child { transform: translateY(-3px); }
.gx-stack-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 1px dashed var(--edge);
  border-radius: 12px;
  color: var(--faint);
  font-size: 0.85rem;
}

/* --- La barra: orden, persona y lo que falta --------------------------------- */
.gx-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin: 0 0 1.4rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.gx-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--soft); }
.gx-seg a {
  padding: 0.38rem 0.95rem;
  border-radius: 999px;
  font-size: 0.86rem;
  color: var(--muted);
  text-decoration: none;
}
.gx-seg a.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px var(--shadow); }
.gx-person { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.gx-person select { width: auto; max-width: 16rem; margin: 0; padding-top: 0.42rem; padding-bottom: 0.42rem; border-radius: 999px; font-size: 0.86rem; }
.gx-person button { margin: 0; }
.gx-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; }
.gx-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.34rem 0.8rem;
  border: 1px dashed var(--edge);
  border-radius: 999px;
  font-size: 0.84rem;
  color: var(--text);
  text-decoration: none;
}
.gx-chip span { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.gx-chip.on { border-style: solid; border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.gx-chip.on span { color: inherit; opacity: 0.7; }
.gx-filtering { margin: -0.4rem 0 1.4rem; color: var(--text); }
.gx-filtering a { margin-left: 0.6rem; font-size: 0.88rem; color: var(--muted); }

/* --- Las décadas y el índice de la derecha ------------------------------------- */
.gx-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
@media (min-width: 1100px) {
  .gx-layout:has(.gx-rail) { grid-template-columns: minmax(0, 1fr) 3.4rem; }
}
.gx-photos { margin: 0; }
.gx-sec { margin-bottom: 2rem; scroll-margin-top: 7.5rem; }
.gx-sec-head {
  position: sticky;
  top: 66px;
  z-index: 3;
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin: 0 0 0.7rem;
  padding: 0.55rem 0 0.45rem;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(10px);
  font-size: 1rem;
  font-weight: 400;
}
.gx-sec-head span { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; letter-spacing: -0.02em; }
.gx-sec-head small { color: var(--muted); font-size: 0.82rem; }
.gx-sec-pick { margin-left: auto; font-size: 0.84rem; }
.gx-rail {
  display: none;
  position: sticky;
  top: 6.5rem;
  align-self: start;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1100px) { .gx-rail { display: flex; } }
.gx-rail a {
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  text-align: right;
}
.gx-rail a:hover { color: var(--ink); background: var(--soft); }
.gx-rail a.on { color: var(--on-ink); background: var(--ink); }

/* --- La rejilla justificada ---------------------------------------------------
   Cada foto crece en proporción a su forma (--r, ancho / alto) y todas las de
   una fila acaban con la misma altura. La última fila no se estira: el
   pseudo-elemento se come el sitio que sobra. */
.gx-grid {
  --h: 210px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gx-grid::after { content: ""; flex-grow: 1000000; }
@media (max-width: 900px) { .gx-grid { --h: 160px; } }
@media (max-width: 560px) { .gx-grid { --h: 112px; gap: 4px; } }
.gx-item {
  position: relative;
  flex-grow: calc(var(--r) * 100);
  flex-basis: calc(var(--r) * var(--h));
  aspect-ratio: var(--r);
  max-height: calc(var(--h) * 1.9);
  border-radius: 8px;
  overflow: hidden;
  background: var(--photo);
}
.gx-link { display: block; width: 100%; height: 100%; }
.gx-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease, filter 0.2s;
}
.gx-item:hover .gx-link img { filter: brightness(0.92); }
.gx-meta {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.4rem;
  padding: 1.6rem 0.55rem 0.45rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.2;
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: none;
}
.gx-meta b { font-weight: 600; }
.gx-meta i { font-style: normal; display: inline-flex; align-items: center; gap: 0.2rem; opacity: 0.9; }
.gx-item:hover .gx-meta, .gx-item:focus-within .gx-meta { opacity: 1; }
@media (hover: none) { .gx-meta { opacity: 1; background: linear-gradient(transparent, rgba(0, 0, 0, 0.42)); } }
.gx-shut {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.8rem;
}
.gx-person-photos { margin-top: 1.6rem; }

/* --- Elegir varias ---------------------------------------------------------------
   Sin JavaScript, la casilla se ve tal cual en la esquina. Con seleccion.js
   (body.gx-js) es un círculo que asoma al pasar y, elegida, la foto encoge un
   poco dentro de su hueco, como en el carrete del móvil. */
.gx-check {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  z-index: 2;
  margin: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.gx-check input { width: 1.1rem; height: 1.1rem; margin: 0; }
.gx-js .gx-check input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.gx-check > span[aria-hidden] { display: none; }
.gx-js .gx-check > span[aria-hidden] {
  display: block;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.95);
  background: rgba(0, 0, 0, 0.18);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.gx-js .gx-item:hover .gx-check > span[aria-hidden],
.gx-js .gx-check input:focus-visible + span,
.gx-selecting .gx-check > span[aria-hidden] { opacity: 1; }
.gx-js .gx-check input:checked + span {
  opacity: 1;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4 6.6 11 12 5.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
  border-color: var(--on-ink);
}
/* de noche el círculo lleno es claro (--ink): la marca, oscura. Va escrita
   aparte porque dentro de una url() no entra una variable */
:root[data-theme="dark"] .gx-js .gx-check input:checked + span {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4 6.6 11 12 5.4' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* la casilla de verdad es invisible: el foco se ve en su círculo, con un aro
   doble que se distingue encima de cualquier foto */
.gx-js .gx-check input:focus-visible + span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111; }
.gx-selecting .gx-link { cursor: pointer; }
.gx-item.is-chosen { background: color-mix(in srgb, var(--ink) 12%, var(--photo)); }
.gx-item.is-chosen .gx-link img { transform: scale(0.88); border-radius: 6px; }
.gx-selecting .gx-meta { opacity: 0; }

.gx-selbar {
  position: sticky;
  bottom: 1rem;
  z-index: 12;
  margin: 1rem auto 0;
  width: fit-content;
  max-width: calc(100vw - 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.55rem 0.7rem 0.55rem 1.1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: 0 10px 30px var(--shadow-lg);
}
/* con JavaScript solo sale cuando hay alguna elegida */
.gx-js .gx-selbar { position: fixed; left: 50%; bottom: 1.2rem; margin: 0; transform: translate(-50%, 160%); transition: transform 0.25s ease; }
.gx-js .gx-selbar.is-on { transform: translate(-50%, 0); }
.gx-selbar-count { margin: 0; font-size: 0.9rem; white-space: nowrap; }
.gx-selbar-count b { font-variant-numeric: tabular-nums; }
.gx-selbar-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.gx-selbar .btn.ghost, .gx-selbar summary.btn {
  margin: 0;
  color: var(--on-ink);
  border-color: color-mix(in srgb, var(--on-ink) 30%, transparent);
  background: transparent;
}
.gx-selbar .btn.ghost:hover, .gx-selbar summary.btn:hover { background: color-mix(in srgb, var(--on-ink) 14%, transparent); }
.gx-selbar .btn.ghost.danger { color: #ffb4b4; border-color: rgba(255, 180, 180, 0.4); }
/* de noche la barra es clara: el rojo, el oscuro de día */
:root[data-theme="dark"] .gx-selbar .btn.ghost.danger { color: #8a2a2a; border-color: rgba(138, 42, 42, 0.45); }
.gx-selbar-clear { color: color-mix(in srgb, var(--on-ink) 75%, transparent); margin: 0 0.3rem; }
@media (max-width: 640px) {
  .gx-js .gx-selbar { left: 0.6rem; right: 0.6rem; width: auto; transform: translateY(160%); border-radius: 20px; }
  .gx-js .gx-selbar.is-on { transform: none; }
}

/* las acciones: un <details> que se abre hacia arriba, como un menú */
.gx-act { position: relative; }
.gx-act > summary { list-style: none; cursor: pointer; }
.gx-act > summary::-webkit-details-marker { display: none; }
.gx-pop {
  position: absolute;
  z-index: 15;
  width: min(22rem, calc(100vw - 2rem));
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 16px 40px var(--shadow-lg);
  font-size: 0.9rem;
}
.gx-selbar .gx-pop { bottom: calc(100% + 0.9rem); left: 50%; transform: translateX(-50%); }
.gx-new-album .gx-pop, .ph-add-album .gx-pop { top: calc(100% + 0.5rem); left: 0; }
.gx-pop label:not(.check) { display: block; margin: 0 0 0.3rem; font-size: 0.8rem; color: var(--muted); }
.gx-pop-label { display: block; margin: 0.7rem 0 0.3rem; font-size: 0.8rem; color: var(--muted); }
.gx-pop-row { display: flex; gap: 0.4rem; align-items: center; }
.gx-pop-row input, .gx-pop-row select { flex: 1; min-width: 0; margin: 0; }
.gx-pop-row button { margin: 0; flex: none; }
.gx-pop button[type=submit]:not(.small) { width: 100%; margin-top: 0.9rem; }
.gx-pop .small, .gx-selbar .small { padding: 0.42rem 0.85rem; font-size: 0.84rem; }
.gx-pop-or { margin: 0.8rem 0 0.4rem; font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.gx-pop-help { margin: 0 0 0.6rem; font-size: 0.8rem; color: var(--muted); }
.gx-pop .check.tight { margin-top: 0.6rem; font-size: 0.82rem; }
.gx-pop .place-picker { position: relative; }
.gx-pop .life-when { display: flex; align-items: center; gap: 0.5rem; }
.gx-pop .life-when input { margin: 0; }
@media (max-width: 640px) {
  .gx-selbar .gx-pop { position: fixed; left: 0.6rem; right: 0.6rem; bottom: 5.5rem; width: auto; transform: none; }
}

.gx-empty {
  margin: 1rem 0 2rem;
  padding: 3rem 1.5rem;
  border: 1px dashed var(--edge);
  border-radius: 22px;
  text-align: center;
  color: var(--text);
}
.gx-empty p { margin: 0.3rem auto; max-width: 34rem; }
.gx-empty-big { font-family: var(--font-display); font-size: 1.9rem; color: var(--ink); }
.gx-album-edit { margin-top: 2.4rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.gx-album-edit > summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; margin-bottom: 1rem; }

/* --- La foto, en su página --------------------------------------------------------- */
.ph-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: -0.6rem 0 1.2rem;
  font-size: 0.9rem;
}
.ph-back { color: var(--muted); text-decoration: none; }
.ph-back:hover { color: var(--ink); }
.ph-count { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.ph-arrows { display: flex; gap: 0.3rem; }
.ph-arrows a {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  text-decoration: none;
  font-size: 1.3rem;
  line-height: 1;
}
.ph-arrows a:hover { border-color: var(--edge); background: var(--soft); }
.ph-main { display: grid; gap: 2rem; }
@media (min-width: 980px) { .ph-main { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; } }
.ph-figure { margin: 0; min-width: 0; }
/* el marco tiene justo la forma de la foto: los recuadros de las caras van en
   fracciones de él */
.ph-frame {
  position: relative;
  aspect-ratio: var(--r);
  width: min(100%, calc(78vh * var(--r)));
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: var(--photo);
  user-select: none;
  touch-action: manipulation;
}
.ph-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ph-faces { position: absolute; inset: 0; }
.ph-face {
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.15s, border-color 0.15s;
  color: inherit;
  text-decoration: none;
}
.ph-face span {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s;
}
.ph-frame:hover .ph-face, .ph-frame.is-pointing .ph-face { opacity: 0.65; }
.ph-face.is-lit, .ph-face:hover, .ph-face:focus-visible { opacity: 1 !important; border-color: #fff; }
.ph-face.is-lit span, .ph-face:hover span, .ph-face:focus-visible span { opacity: 1; }
.ph-frame.hide-faces .ph-face { display: none; }
.ph-frame.is-drawing { cursor: crosshair; touch-action: none; }
.ph-frame.is-drawing .ph-face:not(.is-new) { pointer-events: none; opacity: 0.35; }
.ph-face.is-new { opacity: 1; border: 2px dashed #fff; background: rgba(255, 255, 255, 0.12); }
.ph-hint {
  position: absolute;
  top: 0.8rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 0.82rem;
  white-space: nowrap;
  pointer-events: none;
}
.ph-hint[hidden] { display: none; }
.ph-picker {
  position: absolute;
  z-index: 4;
  width: min(15rem, 80%);
  padding: 0.6rem;
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  cursor: default;
}
.ph-picker input { margin: 0 0 0.4rem; }
.ph-picker ul { list-style: none; margin: 0; padding: 0; max-height: 15rem; overflow-y: auto; }
.ph-picker li {
  display: grid;
  grid-template-columns: 1.8rem 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.55rem;
  align-items: center;
  padding: 0.35rem 0.4rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.88rem;
}
.ph-picker li:hover, .ph-picker li:first-child:not(.ph-picker-none) { background: var(--soft); }
.ph-picker li small { grid-column: 2; color: var(--muted); font-size: 0.8rem; }
.ph-picker-face {
  grid-row: span 2;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--soft-hover) center / cover;
  display: grid;
  place-items: center;
  font-size: 0.66rem;
  color: var(--muted);
}
.ph-picker-none { color: var(--muted); cursor: default; display: block !important; }
.ph-picker li.is-unlikely span:not(.ph-picker-face) { color: var(--muted); }
.ph-picker button { margin: 0.4rem 0 0; font-size: 0.82rem; }
.ph-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: 0.8rem; }
.ph-tools .btn, .ph-tools button { margin: 0; }

.ph-side { min-width: 0; }
.ph-kicker { margin: 0 0 0.6rem; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ph-story { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.3; margin: 0 0 1.4rem; }
.ph-story p { margin: 0 0 0.6rem; }
.ph-story.is-empty { font-family: inherit; font-size: 0.95rem; color: var(--muted); }
.ph-block { border-top: 1px solid var(--line); padding: 1.1rem 0 1.2rem; }
.ph-block h2 {
  margin: 0 0 0.8rem;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.ph-people { list-style: none; margin: 0 0 0.9rem; padding: 0; display: grid; gap: 0.35rem; }
.ph-person {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.3rem 0.4rem;
  margin: 0 -0.4rem;
  border-radius: 12px;
  transition: background 0.15s;
}
.ph-person.is-lit { background: var(--soft); }
.ph-face-thumb {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background-color: var(--photo);
  background-repeat: no-repeat;
  box-shadow: 0 0 0 1px var(--line);
}
.ph-face-thumb.is-initials { display: grid; place-items: center; font-size: 0.8rem; color: var(--muted); }
.ph-person-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ph-person-text a { color: var(--ink); text-decoration: none; font-weight: 500; }
.ph-person-text a:hover { text-decoration: underline; }
.ph-person-text small { color: var(--muted); font-size: 0.8rem; }
.ph-person-acts { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; white-space: nowrap; }
.ph-person-acts form { margin: 0; }
.ph-person-acts button { margin: 0; font-size: 0.8rem; }
.ph-none { margin: 0 0 0.9rem; }
.ph-tagger { display: grid; gap: 0.8rem; }
.ph-tagger > button { justify-self: start; display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.ph-tag-form { margin: 0; }
.ph-tag-form label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.3rem; }
.ph-note {
  margin: 0.9rem 0 0;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  background: var(--note-bg);
  border: 1px solid var(--note-line);
  font-size: 0.84rem;
  color: var(--text);
}
.ph-facts { list-style: none; margin: 0 0 0.6rem; padding: 0; display: grid; gap: 0.35rem; font-size: 0.92rem; }
.ph-edit > summary { cursor: pointer; font-weight: 500; }
.ph-edit[open] > summary { margin-bottom: 0.8rem; }
.ph-edit form label { display: block; margin: 0.7rem 0 0.3rem; font-size: 0.8rem; color: var(--muted); }
.ph-edit .life-when { display: flex; align-items: center; gap: 0.5rem; }
.ph-edit .life-when input { margin: 0; }
.ph-edit .place-picker { position: relative; }
.ph-delete { margin: 1.2rem 0 0; }

/* --- Las fotos en el mapa --------------------------------------------------------------- */
.map-photo img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid var(--paper);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  display: block;
  transition: transform 0.15s;
}
.map-photo:hover img { transform: scale(1.15); }
.map-photo.is-out { opacity: 0.2; }
.map-card-face.is-photo img { width: 100%; height: 100%; object-fit: cover; }

/* --- El visor: lo que se sabe de la foto, debajo -------------------------------------- */
.lightbox-figure figcaption { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.lightbox-meta { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); }
.lightbox-meta:empty { display: none; }
.lightbox-links { font-size: 0.84rem; }
.lightbox-page { color: #fff; }
.lightbox-page[hidden], .lightbox-link[hidden] { display: none; }

/* --- El visor: el panel con lo que se sabe de la foto ----------------------------
   Sale solo al abrir una foto, a la derecha (debajo en pantallas estrechas), y
   se esconde con «Información» o la tecla «i»; galeria.js recuerda cómo se
   dejó. Con él abierto, el pie de debajo de la foto sobra. */
.lightbox-panel { display: none; }
.lightbox.has-panel { grid-template-columns: 4rem minmax(0, 1fr) 4rem min(24rem, 34vw); }
.lightbox.has-panel .lightbox-panel {
  display: block;
  grid-column: 4;
  grid-row: 1 / 3;
  align-self: stretch;
  position: relative;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.4rem 1.4rem 2rem;
  background: #151515;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.92rem;
  line-height: 1.45;
}
.lightbox.has-panel .lightbox-figure figcaption { display: none; }
.lightbox .lightbox-info {
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  font-size: 0.82rem;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.85);
}
.lightbox .lightbox-info.on { background: rgba(255, 255, 255, 0.22); color: #fff; }
/* esconder el panel: una palabra, no otra «×» al lado de la que cierra el visor */
.lightbox .lightbox-panel-hide {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: auto;
  height: auto;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}
.lb-kicker { margin-right: 5.5rem !important; }
.lightbox-panel a { color: #fff; }
.lb-kicker {
  margin: 0 2.4rem 0.8rem 0;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.lb-story { margin: 0 0 1.1rem; font-family: var(--font-display); font-size: 1.4rem; line-height: 1.25; color: #fff; }
.lb-block { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 0.9rem 0 0.5rem; }
.lb-block h3 {
  margin: 0 0 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.lb-block p { margin: 0 0 0.6rem; }
.lb-none { color: rgba(255, 255, 255, 0.5); }
.lb-people { list-style: none; margin: 0 0 0.4rem; padding: 0; display: grid; gap: 0.25rem; }
.lb-people li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 -0.4rem;
  padding: 0.3rem 0.4rem;
  border-radius: 12px;
  transition: background 0.15s;
}
.lb-people li.is-lit { background: rgba(255, 255, 255, 0.1); }
.lb-people li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.lb-people a { text-decoration: none; font-weight: 500; }
.lb-people a:hover { text-decoration: underline; }
.lb-people small { color: rgba(255, 255, 255, 0.55); font-size: 0.8rem; }
.lb-face {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
  background-repeat: no-repeat;
}
.lb-face.is-initials { display: grid; place-items: center; font-size: 0.74rem; color: rgba(255, 255, 255, 0.6); }
.lb-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.lb-muted { color: rgba(255, 255, 255, 0.5); }
.lb-page { margin: 1.1rem 0 0; }
.lb-button {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: #fff;
  color: #111 !important;
  text-decoration: none;
  font-size: 0.86rem;
}
.lb-button:hover { background: rgba(255, 255, 255, 0.85); }

/* las caras: una capa encima de la foto que se mueve y se amplía con ella */
.lightbox-faces { position: absolute; pointer-events: none; transform-origin: center center; }
.lightbox-stage img.is-easing + .lightbox-faces { transition: transform 0.22s ease-out; }
.lightbox-face {
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.15s;
}
.lightbox-face span {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 0.8rem;
  white-space: nowrap;
}
.lightbox.has-panel .lightbox-stage:hover .lightbox-face { opacity: 0.45; }
.lightbox-face.is-lit { opacity: 1 !important; }
.lightbox.is-zoomed .lightbox-face { opacity: 0 !important; }

@media (max-width: 900px) {
  .lightbox.has-panel { grid-template-columns: 4rem minmax(0, 1fr) 4rem; grid-template-rows: auto minmax(0, 1fr) auto; }
  .lightbox.has-panel .lightbox-panel {
    grid-column: 1 / -1;
    grid-row: 3;
    max-height: 42vh;
    padding: 1.1rem 1.2rem 1.4rem;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px 18px 0 0;
  }
  .lb-story { font-size: 1.2rem; }
}
@media (max-width: 640px) {
  .lightbox.has-panel { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .lightbox .lightbox-info span { display: none; }
  .lightbox .lightbox-info { padding: 0.4rem 0.55rem; }
}

/* --- Cuántas fotos caben (el cupo del plan) ---------------------------------- */
.cupo { display: flex; align-items: center; gap: 0.8rem; margin: -0.8rem 0 1.6rem; font-size: 0.86rem; }
.cupo p { margin: 0; }
.cupo a { margin-left: 0.4rem; white-space: nowrap; }
.cupo-bar { flex: none; width: 7rem; height: 6px; border-radius: 999px; background: var(--soft-hover); overflow: hidden; }
.cupo-bar span { display: block; height: 100%; border-radius: inherit; background: var(--ink); }
.cupo.is-near .cupo-bar span { background: #c98a1b; }
.cupo.is-full .cupo-bar span { background: var(--danger); }
.cupo.is-full strong { color: var(--danger); }
.edit-block .cupo, .card .cupo { margin: 0 0 0.9rem; }
@media (max-width: 560px) { .cupo { flex-direction: column; align-items: flex-start; gap: 0.4rem; } }

/* Compartir (_compartir.html, compartir.js): una fila de botones pequeños,
   con borde fino, que no compiten con lo de la página. En cada estilo del
   sitio toman el color del texto de alrededor. */
.compartir { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.compartir-label { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  margin-right: 0.25rem; }
.compartir-btn { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0.42rem 0.85rem;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: inherit;
  font-size: 0.86rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: border-color 0.15s, background 0.15s; }
.compartir-btn:hover { background: var(--soft-hover); border-color: var(--ink); color: inherit; }
.compartir-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.compartir-btn svg { flex: none; }
.compartir-btn[hidden] { display: none; }
.compartir-clave { flex-basis: 100%; margin: 0.35rem 0 0; font-size: 0.88rem; color: var(--muted); }
/* dónde va */
.site-share { margin: 3rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.site-share .site-label { margin-bottom: 0.9rem; }
.site-share .compartir-label { display: none; }
.site-share + .site-foot { margin-top: 1.2rem; }
.post-share { margin: 2.6rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.ph-share { margin: 0.8rem 0 0; }
#compartir .compartir-label { display: none; }
/* «Memoria» centra sus etiquetas: los botones, con ellas */
.theme-memoria .site-share { text-align: center; }
.theme-memoria .site-share .compartir { justify-content: center; }
.ph-share { justify-content: center; }

/* Compartir, en compacto: un botón que despliega las opciones debajo */
.compartir-menu { position: relative; display: inline-block; }
.compartir-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.4rem;
  margin: 0; cursor: pointer; user-select: none; }
.compartir-menu > summary::-webkit-details-marker { display: none; }
.compartir-menu[open] > summary { border-color: var(--ink); }
.compartir-pop { position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 30; width: max-content;
  max-width: min(22rem, calc(100vw - 2rem)); padding: 0.75rem; background: var(--paper);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px var(--shadow); }
.compartir-pop .compartir-label { display: none; }
/* encima del lienzo del árbol y del mapa, arriba a la derecha */
.stage-share { position: absolute; top: 1.1rem; right: 1.1rem; z-index: 500; }
.stage-share > summary { background: var(--glass); backdrop-filter: blur(12px); }
.ln-tools .compartir-menu > summary { padding: 0.45rem 0.9rem; font-size: 0.86rem; }
/* en la cronología el botón va a la izquierda: el desplegable, hacia la derecha */
.ln-tools .compartir-pop { left: 0; right: auto; }
/* en el mapa la leyenda ocupa la derecha: el botón va arriba a la izquierda,
   al lado de los botones del zoom, y se despliega hacia la derecha */
.map-stage .stage-share { top: 10px; right: auto; left: 54px; }
.map-stage .stage-share .compartir-pop { left: 0; right: auto; }

/* Reportar: el enlace de la barra (con la pinta del botón de modo noche) y su página */
.nav-report { text-decoration: none; }
.nav-mine > .nav-report { order: 2; }
header.nav-tight .nav-mine > .nav-report { order: 0; }
header.nav-tight .nav-report { width: auto; display: flex; gap: 0.5rem; justify-content: flex-start; padding: 0.5rem 0.6rem; }
/* sin cuenta, la bandera con su palabra, como un enlace más de la barra */
.nav-report.con-palabra { width: auto; display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0 0.75rem 0 0.6rem; border-radius: 999px; font: inherit; }
.nav-report.con-palabra .lbl { display: inline; }
.report { max-width: 34rem; }
.report-page { margin: 0 0 1rem; font-size: 0.86rem; overflow-wrap: anywhere; }
.report-motivos { border: 0; margin: 0 0 1.1rem; padding: 0; display: grid; gap: 0.5rem; }
.report-motivos legend { font-weight: 600; margin-bottom: 0.6rem; padding: 0; }
.report-motivo { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.7rem 0.85rem; margin: 0;
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 400; }
.report-motivo:has(input:checked) { border-color: var(--ink); background: var(--soft); }
.report-motivo input { margin-top: 0.2rem; }
.report-motivo > span { display: flex; flex-direction: column; gap: 0.15rem; }
.report-motivo .muted { font-size: 0.86rem; }
.report-form textarea, .report-form input[type=email] { width: 100%; box-sizing: border-box; }
/* el panel de reportes */
.report-list { display: grid; gap: 0.8rem; max-width: 46rem; }
/* el panel de soporte (admin_soporte.html) */
.soporte-elegido { padding: 1.1rem 1.3rem; max-width: 44rem; }
.soporte-arbol { margin: 0 0 0.2rem; }
.soporte-abrir textarea { width: 100%; }
.soporte-abrir label { display: block; font-weight: 600; margin: 0.6rem 0 0.3rem; }
.report-card { padding: 1rem 1.2rem; }
.report-card.is-urgent { border-color: var(--danger-line); }
.report-card.is-urgent .report-card-head strong { color: var(--danger); }
.report-card-head, .report-card-page { margin: 0 0 0.4rem; }
.report-card-page { overflow-wrap: anywhere; font-size: 0.9rem; }
.report-card-text { margin: 0 0 0.5rem; white-space: pre-wrap; }
.report-close { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.report-close input { flex: 1 1 14rem; }
.report-close button { margin: 0; }
.report-motivo input[type=radio] { width: auto; flex: none; margin: 0.2rem 0 0; }
/* lo que flota sobre el lienzo y el mapa se queda dentro de ellos: así el menú
   de la cabecera (z-index 5) pasa siempre por encima */
.tree-stage, .map-stage { isolation: isolate; }

/* Pagos: la cuenta y «Mis compras» */
.compras { display: grid; gap: 0.9rem; max-width: 46rem; }
.compra-head h2 { margin: 0; font-size: 1.15rem; }
.compra-head p { margin: 0.2rem 0 0.6rem; }
.compra-estado { margin: 0 0 0.6rem; }
.compra-archivos { list-style: none; padding: 0; margin: 0 0 0.6rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.compra-archivos .btn { margin: 0; }
.compra form button { margin: 0; }
.price-test { margin: 0 0 1.4rem; padding: 0.7rem 1rem; border-radius: 12px; border: 1px dashed var(--line);
  background: var(--soft); font-size: 0.92rem; max-width: 46rem; }
.price-pronto { display: inline-block; margin-left: 0.3rem; padding: 0 0.45rem; border-radius: 999px;
  font-size: 0.8rem; color: var(--muted); border: 1px solid var(--line); vertical-align: 1px; }
.price-buy { margin: 1.2rem 0 0; }
.price-buy button { margin: 0; }
/* «Quiero que el plan empiece ya…» (info.html): la casilla obligatoria antes
   de contratar. Letra de nota, para que no pese más que la tarjeta, y la
   casilla a la altura de la primera línea, no en medio de las tres */
label.check.price-ya { margin: 1rem 0 0.7rem; font-size: 0.86rem; line-height: 1.45; color: var(--text); align-items: flex-start; }
.price-ya input { flex: none; margin: 0.22rem 0 0; }
.ed-comprar { margin: 0.9rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.ed-comprar .check { font-size: 0.86rem; align-items: flex-start; }
.ed-comprar button { margin: 0.5rem 0 0; }

/* --- Ajustes: tu cuenta y los ajustes de cada árbol ------------------------
   Una maqueta para las dos (ajustes_base.html): la cabecera, el índice de
   apartados (una columna pegada a la izquierda; en el móvil, una fila de
   fichas que se desliza) y los apartados, uno debajo de otro. La letra y los
   botones, más grandes que en el resto de la app: aquí se viene poco y hay
   que acertar a la primera. Lo que tapa por arriba (la barra y, en el móvil,
   las fichas) lo mide ajustes.js en --aj-top y --aj-stick. */
.aj { max-width: 1120px; margin: 0 auto; }
.aj-head { margin: 0 0 1.6rem; }
.aj-head h1 { overflow-wrap: anywhere; margin: 0 0 0.4rem; }
.aj-head .lede { margin: 0; max-width: 44rem; }
.aj-kicker {
  margin: 0 0 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.aj-back { margin: 0 0 0.6rem; font-size: 0.95rem; }
.aj-back a { color: var(--muted); text-decoration: none; }
.aj-back a:hover { color: var(--ink); text-decoration: underline; }
.aj-who { display: flex; gap: 1.1rem; align-items: center; min-width: 0; }
.aj-who > div { min-width: 0; }
.aj-head .account-stats { margin: 1.3rem 0 0; }

.aj-layout { display: grid; gap: 1.6rem; align-items: start; }
.aj-main { min-width: 0; }
@media (min-width: 900px) {
  .aj-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; }
}

/* el índice */
.aj-index { position: sticky; top: calc(var(--aj-top, 4.5rem) + 1.4rem); z-index: 4; }
.aj-index ul { list-style: none; margin: 0; padding: 0.5rem; border: 1px solid var(--line); border-radius: 18px; background: var(--card);
  box-shadow: 0 1px 2px var(--shadow); }
.aj-index-grupo { margin: 0.9rem 0.7rem 0.3rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); }
.aj-index-grupo:first-child { margin-top: 0.4rem; }
.aj-index a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  border-radius: 11px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.25;
}
.aj-index a .aj-icono { flex: none; color: var(--muted); }
.aj-index a span { flex: 1; min-width: 0; }
.aj-index a:hover { background: var(--soft); color: var(--ink); }
.aj-index a.here { background: var(--ink); color: var(--on-ink); font-weight: 600; }
.aj-index a.here .aj-icono { color: var(--on-ink); }
.aj-index a.is-danger, .aj-index a.is-danger .aj-icono { color: var(--danger); }
.aj-index a.is-danger.here { background: var(--danger); color: var(--paper); }
.aj-index a.is-danger.here .aj-icono { color: var(--paper); }
.aj-index-n { font-style: normal; font-size: 0.78rem; color: var(--muted); }
@media (max-width: 899px) {
  .aj-index {
    top: var(--aj-top, 4rem);
    margin: 0 -1.5rem;
    padding: 0.6rem 1.5rem;
    background: var(--header-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .aj-index::-webkit-scrollbar { display: none; }
  .aj-index ul { display: flex; gap: 0.4rem; width: max-content; border: 0; padding: 0; background: none; box-shadow: none; }
  .aj-index-grupo { display: none; }
  .aj-index a .aj-icono { width: 16px; height: 16px; }
  .aj-index a, .aj-index .is-sub a {
    margin: 0;
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.92rem;
    white-space: nowrap;
    background: var(--paper);
  }
  .aj-index a.here { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
  .aj-index a.is-danger.here { background: var(--danger); color: var(--paper); border-color: var(--danger); }
}

/* cada apartado: una tarjeta, con su icono, sobre el fondo suave de la página */
body.aj-page { background: var(--soft-2); }
.aj-sec {
  padding: 1.7rem 1.9rem 1.9rem;
  margin: 0 0 1.25rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 1px 2px var(--shadow), 0 8px 24px -18px var(--shadow-md);
  scroll-margin-top: calc(var(--aj-stick, 5rem) + 1.2rem);
}
.aj-sec:last-child { margin-bottom: 0; }
.aj-sec-head { margin: 0 0 1.4rem; display: flex; gap: 0.95rem; align-items: flex-start; }
.aj-sec-ico {
  flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px;
  background: var(--soft); color: var(--ink);
}
.aj-sec-head h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0.15rem 0 0.3rem;
}
.aj-sec-head p { margin: 0; color: var(--muted); max-width: 42rem; font-size: 0.98rem; }
@media (max-width: 560px) {
  .aj-sec { padding: 1.3rem 1.1rem 1.5rem; border-radius: 16px; }
  .aj-sec-ico { width: 2.2rem; height: 2.2rem; border-radius: 10px; }
  .aj-sec-head h2 { font-size: 1.5rem; }
}
.aj-sec > h3, .aj-caja > h3, .aj-fila h3 { font-size: 1.08rem; font-weight: 600; margin: 2rem 0 0.4rem; letter-spacing: -0.01em; }
.aj-caja > h3, .aj-fila h3 { margin-top: 0; }
.aj-texto { margin: 0 0 0.9rem; max-width: 42rem; font-size: 0.98rem; line-height: 1.6; }
.aj [id] { scroll-margin-top: calc(var(--aj-stick, 5rem) + 1.2rem); }

/* la zona peligrosa: roja de verdad, de día y de noche */
.aj-sec.is-danger {
  border: 1px solid var(--danger-line);
  background: var(--danger-bg);
}
.aj-sec.is-danger .aj-sec-ico { background: var(--danger); color: var(--paper); }
.aj-sec.is-danger .aj-sec-head h2 { color: var(--danger); }
.aj-sec.is-danger .aj-fila + .aj-fila { border-top-color: var(--danger-line); }

/* formularios: campos y botones más grandes */
.aj-form { max-width: 34rem; }
.aj-form label, .aj-caja label, .aj-alta label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-strong);
  margin: 1.1rem 0 0.4rem;
}
.aj-form label:first-of-type, .aj-alta label { margin-top: 0; }
:is(.aj-form, .aj-caja, .aj-alta) :is(input:not([type=checkbox]):not([type=radio]):not(.key-value), select) {
  font-size: 1rem;
  padding: 0.7rem 0.85rem;
  min-height: 2.9rem;
  background: var(--paper);
  border-color: var(--edge);
}
:is(.aj-form, .aj-caja, .aj-alta) :is(input, select):focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--soft-hover); }
/* los campos ya llevan su aro (el borde en tinta): sin el de todo lo demás encima */
:is(.aj-form, .aj-caja, .aj-alta) :is(input:not([type=checkbox]):not([type=radio]), select):focus-visible { outline: none; }
.aj .field-help { font-size: 0.88rem; max-width: 40rem; }
.aj label.aj-check { font-weight: 400; font-size: 1rem; }
.aj-check input { width: 1.15rem; height: 1.15rem; flex: none; }
.aj-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 1.4rem; }
.aj-acts form { margin: 0; }
/* el idioma de la cuenta: un botón por idioma, el de ahora relleno */
.aj-idiomas { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.aj-idiomas .btn { min-width: 8.5rem; justify-content: center; gap: 0.4rem; }
.aj-acts button, .aj-acts .btn, .aj-linea button, .aj-alta button, .aj-fila .btn, .aj-fila button,
.aj-opcion .btn, .aj-aviso .btn {
  margin: 0;
  min-height: 2.75rem;
  padding: 0.65rem 1.35rem;
  font-size: 0.98rem;
}
.aj-link { color: var(--muted); font-size: 0.92rem; }
.aj-link:hover { color: var(--ink); }
/* un campo y su botón en una fila (en el móvil, uno encima del otro) */
.aj-linea { display: flex; gap: 0.6rem; max-width: 34rem; }
.aj-linea input { flex: 1; min-width: 0; }
@media (max-width: 520px) {
  .aj-linea { flex-direction: column; }
  .aj-linea button { align-self: flex-start; }
}

/* botón lleno en rojo: lo que borra */
.btn.danger:not(.ghost), button.danger:not(.ghost):not(.linkish) { background: var(--danger); color: var(--paper); }
.btn.danger:not(.ghost):hover, button.danger:not(.ghost):not(.linkish):hover { background: var(--danger-strong); }

/* una caja dentro de un apartado (el plan, la contraseña para invitados…) */
.aj-caja {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.3rem 1.4rem 1.4rem;
  margin: 1.6rem 0 0;
  background: var(--card);
  max-width: 44rem;
}
.aj-caja:first-child { margin-top: 0; }
.aj-caja h3 { margin-top: 0; }
.aj-caja .key-form { max-width: none; margin-top: 1rem; }

/* filas «qué · cuál» */
.aj-datos { margin: 0; display: grid; gap: 0; }
.aj-dato { display: grid; gap: 0.2rem 1.2rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.aj-dato:first-child { border-top: 0; padding-top: 0.2rem; }
.aj-dato dt { font-weight: 600; font-size: 0.95rem; }
.aj-dato dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.aj-dato dd p { margin: 0; }
.aj-dato .cupo { margin: 0; }
@media (min-width: 640px) { .aj-dato { grid-template-columns: 9rem minmax(0, 1fr); } }

/* avisos dentro de un apartado */
.aj-aviso {
  margin: 1.4rem 0 0;
  padding: 0.9rem 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--soft);
  max-width: 44rem;
  font-size: 0.95rem;
}
.aj-aviso p { margin: 0; }
.aj-aviso form { margin: 0.8rem 0 0; }
.aj-aviso.is-nota { background: var(--note-bg); border-color: var(--note-line); }
.aj-aviso.is-ok { background: var(--ok-bg); border-color: transparent; }
.aj-aviso.is-peligro { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger-strong); }
.aj-mas { margin: 1rem 0 0; max-width: 44rem; }
.aj-mas summary { cursor: pointer; color: var(--muted); font-size: 0.95rem; padding: 0.3rem 0; }
.aj-mas summary:hover { color: var(--ink); }
.aj-mas .visibility-help { margin-top: 0.6rem; font-size: 0.92rem; }

/* tu plan */
.aj-plan .plan-now { margin-bottom: 0.4rem; flex-wrap: wrap; }
.aj-plan-hint { margin: 0 0 1rem; }
.aj-plan .plan-exports { margin: 0; font-size: inherit; }

/* público o privado: dos tarjetas grandes, la de ahora marcada */
.aj-elige { display: grid; gap: 0.9rem; max-width: 46rem; }
@media (min-width: 640px) { .aj-elige { grid-template-columns: 1fr 1fr; } }
.aj-opcion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 1.2rem 1.25rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
}
.aj-opcion.is-on { border: 2px solid var(--ink); padding: calc(1.2rem - 1px) calc(1.25rem - 1px) calc(1.3rem - 1px); }
.aj-opcion-ico { color: var(--muted); }
.aj-opcion.is-on .aj-opcion-ico { color: var(--ink); }
.aj-opcion strong { font-size: 1.06rem; line-height: 1.3; }
.aj-opcion-txt { color: var(--muted); font-size: 0.92rem; line-height: 1.5; flex: 1; }
.aj-opcion-ya {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.3rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 0.88rem;
  font-weight: 600;
}
.aj-opcion .btn { margin-top: 0.3rem; }

/* la familia: quién entra */
.aj-gente { list-style: none; margin: 0 0 0.6rem; padding: 0; max-width: 46rem; }
.aj-gente li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 0.9rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}
.aj-gente-quien { display: flex; flex-direction: column; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.aj-gente-quien .muted { font-weight: 400; font-size: 0.86rem; }
.aj-gente-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.aj-gente-acts form { margin: 0; }
.aj-gente-acts .btn { margin: 0; min-height: 2.4rem; padding: 0.45rem 0.95rem; font-size: 0.9rem; }
.aj-gente .badge { margin: 0; font-size: 0.8rem; padding: 0.2rem 0.65rem; }
.aj-papel { display: flex; gap: 0.4rem; align-items: center; }
.aj .aj-papel select { width: auto; min-height: 2.4rem; padding: 0.4rem 0.6rem; font-size: 0.92rem; }
@media (max-width: 560px) {
  .aj-gente li { grid-template-columns: auto minmax(0, 1fr); }
  .aj-gente-acts { grid-column: 2; justify-content: flex-start; }
}
.aj-alta { display: grid; gap: 0.8rem; align-items: end; margin-top: 1rem; }
@media (min-width: 640px) { .aj-alta { grid-template-columns: minmax(0, 1fr) 9rem auto; } }
.aj-alta button { justify-self: start; }

/* una fila con su explicación a la izquierda y su botón a la derecha */
.aj-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.6rem; max-width: 46rem; }
.aj-fila > :first-child { flex: 1 1 18rem; }
.aj-fila .aj-texto { margin: 0; }
.aj-fila + .aj-fila { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }

/* una caja roja (borrar la cuenta) */
.aj-caja-peligro { border-color: var(--danger-line); background: var(--danger-bg); }
.aj-caja-peligro h3, .aj-caja-peligro h2 { color: var(--danger); }
/* soporte de 1199 mirando el árbol (acceso_soporte.py): un aviso, no un peligro */
.aj-soporte { border-color: var(--note-line); background: var(--note-bg); }
.aj-soporte form { margin: 0.8rem 0 0; }

/* dar el árbol: a quién, quedarse o no y el botón */
.aj-dar { max-width: 30rem; margin-top: 0.6rem; }
.aj-dar label:not(.check) { font-size: 0.95rem; font-weight: 500; margin: 0 0 0.4rem; color: var(--text-strong); }
.aj-dar select { font-size: 1rem; min-height: 2.9rem; background: var(--paper); border-color: var(--edge); }
.aj-dar .btn { margin-top: 0.8rem; min-height: 2.75rem; padding: 0.65rem 1.35rem; font-size: 0.98rem; }

/* borrar la cuenta: los pasos, numerados */
.aj-pasos ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; max-width: 46rem; }
.aj-pasos .aj-caja { margin: 0; }
.aj-pasos h2 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.aj-num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  font: 600 0.95rem/1 var(--font-ui);
}
.aj-caja-peligro .aj-num { background: var(--danger); color: var(--paper); }
.aj-arbol { border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem 1rem 1rem; margin: 0 0 0.8rem; }
.aj-arbol legend { padding: 0 0.4rem; font-weight: 600; }
.aj-arbol label.check { margin-top: 0.55rem; align-items: flex-start; font-size: 0.97rem; }
.aj-arbol label.check input { margin-top: 0.2rem; }
.aj-lista { margin: 0; padding-left: 1.2rem; }
.aj-lista li { margin: 0.4rem 0; line-height: 1.55; }
.aj-check span { line-height: 1.45; }
.aj label.aj-check { align-items: flex-start; }
.aj label.aj-check input { margin-top: 0.15rem; }

/* la vuelta del pago: tres puntos mientras se confirma */
.aj-espera { display: flex; gap: 0.4rem; margin: 0 0 1.2rem; }
.aj-espera span { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--ink); animation: aj-latido 1.2s infinite ease-in-out; }
.aj-espera span:nth-child(2) { animation-delay: 0.15s; }
.aj-espera span:nth-child(3) { animation-delay: 0.3s; }
@keyframes aj-latido { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } }

/* las páginas sueltas (privacidad, compras, desistir) */
.priv-page > .aj-sec { margin-top: 3rem; padding-top: 2.6rem; border-top: 1px solid var(--line); }
.aj .compras { max-width: none; }
.aj-paso { max-width: 44rem; }
.aj-paso ul { padding-left: 1.2rem; }
.aj-paso li { margin: 0.3rem 0; }

/* Los mensajes. Fuera de los ajustes, arriba con su color; en los ajustes,
   avisos que flotan abajo (ajustes.js les pone .is-floating) */
.flash.is-ok { background: var(--ok-bg); border-color: transparent; }
.flash.is-error { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger-strong); }
.toasts { display: grid; gap: 0.6rem; margin: 0 0 1.2rem; }
.toasts:empty { display: none; }
.toasts.is-floating {
  position: fixed;
  z-index: 60;
  right: 1.4rem;
  bottom: 1.4rem;
  width: min(27rem, calc(100vw - 2rem));
  margin: 0;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 0.8rem 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 0.97rem;
  line-height: 1.45;
}
.is-floating .toast { box-shadow: 0 18px 50px var(--shadow-md); animation: toast-entra 0.25s ease-out; }
.toast p { margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-ico { flex: none; margin-top: 0.05rem; }
.toast.is-ok .toast-ico { color: var(--ok); }
.toast.is-error { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger-strong); }
.toast-x {
  flex: none;
  margin: -0.2rem 0 0;
  padding: 0.35rem;
  background: none;
  color: var(--muted);
  border-radius: 8px;
  line-height: 0;
}
.toast-x:hover { background: var(--soft-hover); color: var(--ink); }
.toast.is-error .toast-x:hover { background: var(--danger-line); }
.toast.is-leaving { opacity: 0; transform: translateY(0.5rem); transition: opacity 0.2s, transform 0.2s; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(0.6rem); } }
@media (max-width: 560px) {
  .toasts.is-floating { right: 1rem; left: 1rem; bottom: 1rem; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .is-floating .toast, .aj-espera span { animation: none; }
  .toast.is-leaving { transition: none; }
}

/* --- Personalizar el sitio (aspecto.py) ------------------------------------
   Solo en las páginas del sitio de un árbol: _site_base.html pone en <html>
   las clases pal-*, letra-* y orn-* que se hayan elegido (nunca CSS escrito
   por nadie: solo claves del catálogo y, como mucho, un color #rrggbb
   comprobado en --tu-color).

   Los colores: cada paleta da tres (el fondo, la tinta y el acento) de día y
   otros tres de noche; lo demás sale de ellos con color-mix, también las
   variables de cada estilo (--album-*, --casa-*…), para que «Álbum» con
   Salvia sea un álbum verde y no un álbum crema con botones verdes. */
:root.pal-papel   { --p-fondo: #f6f1e7; --p-tinta: #2b2620; --p-acento: #8b6b3e; }
:root.pal-salvia  { --p-fondo: #eef2ea; --p-tinta: #263229; --p-acento: #5b7a5a; }
:root.pal-mar     { --p-fondo: #ecf2f6; --p-tinta: #1f2e3a; --p-acento: #2f6f8f; }
:root.pal-teja    { --p-fondo: #f8eee8; --p-tinta: #3a2219; --p-acento: #b5532e; }
:root.pal-ciruela { --p-fondo: #f5eef4; --p-tinta: #33202f; --p-acento: #7d3c6b; }
:root.pal-pizarra { --p-fondo: #eceff2; --p-tinta: #1e242b; --p-acento: #475569; }
:root.pal-oro     { --p-fondo: #f7f1e1; --p-tinta: #2d2614; --p-acento: #a07c2c; }
:root.pal-bosque  { --p-fondo: #eff2ec; --p-tinta: #1c2a20; --p-acento: #2f5d3a; }
:root.pal-arena   { --p-fondo: #f6efe2; --p-tinta: #3a2c1a; --p-acento: #a8733a; }
:root.pal-vino    { --p-fondo: #f7eeee; --p-tinta: #341b1f; --p-acento: #8a2f3c; }
:root.pal-lavanda { --p-fondo: #f2f0f8; --p-tinta: #28233a; --p-acento: #6a5a9e; }
:root.pal-rosa    { --p-fondo: #f9eff1; --p-tinta: #3a1e26; --p-acento: #a8495f; }
:root.pal-propio  {
  --p-fondo: color-mix(in srgb, var(--tu-color, #8b6b3e) 7%, #fbfaf8);
  /* poco del color en la tinta: con uno muy claro (un amarillo), más dejaba
     el texto secundario (--muted) por debajo de 4,5:1 */
  --p-tinta: color-mix(in srgb, var(--tu-color, #8b6b3e) 12%, #141414);
  --p-acento: var(--tu-color, #8b6b3e);
}
:root[data-theme="dark"].pal-papel   { --p-fondo: #171410; --p-tinta: #ece4d6; --p-acento: #c9a46a; }
:root[data-theme="dark"].pal-salvia  { --p-fondo: #121611; --p-tinta: #e2eadd; --p-acento: #8fb38c; }
:root[data-theme="dark"].pal-mar     { --p-fondo: #0f1519; --p-tinta: #dde8ef; --p-acento: #6fb0d3; }
:root[data-theme="dark"].pal-teja    { --p-fondo: #18110e; --p-tinta: #f0e2da; --p-acento: #e08a62; }
:root[data-theme="dark"].pal-ciruela { --p-fondo: #161015; --p-tinta: #eddfea; --p-acento: #c682b4; }
:root[data-theme="dark"].pal-pizarra { --p-fondo: #111418; --p-tinta: #e1e5ea; --p-acento: #94a3b8; }
:root[data-theme="dark"].pal-oro     { --p-fondo: #16130b; --p-tinta: #eee6cf; --p-acento: #d4b062; }
:root[data-theme="dark"].pal-bosque  { --p-fondo: #0f140f; --p-tinta: #dfe8dc; --p-acento: #7fb08a; }
:root[data-theme="dark"].pal-arena   { --p-fondo: #17130d; --p-tinta: #efe5d3; --p-acento: #d9a467; }
:root[data-theme="dark"].pal-vino    { --p-fondo: #170e10; --p-tinta: #f0dfe1; --p-acento: #d97a88; }
:root[data-theme="dark"].pal-lavanda { --p-fondo: #121019; --p-tinta: #e5e1f2; --p-acento: #a99be0; }
:root[data-theme="dark"].pal-rosa    { --p-fondo: #180f12; --p-tinta: #f2e0e5; --p-acento: #e08aa0; }
:root[data-theme="dark"].pal-propio  {
  --p-fondo: color-mix(in srgb, var(--tu-color, #8b6b3e) 9%, #111111);
  --p-tinta: color-mix(in srgb, var(--tu-color, #8b6b3e) 10%, #ececec);
  --p-acento: color-mix(in srgb, var(--tu-color, #8b6b3e) 70%, #ffffff);
}
:root:is(.pal-papel, .pal-salvia, .pal-mar, .pal-teja, .pal-ciruela, .pal-pizarra, .pal-oro,
      .pal-bosque, .pal-arena, .pal-vino, .pal-lavanda, .pal-rosa, .pal-propio) {
  --paper: var(--p-fondo);
  --card: color-mix(in srgb, var(--p-fondo) 45%, #ffffff);
  --soft: color-mix(in srgb, var(--p-fondo) 94%, var(--p-tinta));
  --soft-2: color-mix(in srgb, var(--p-fondo) 97%, var(--p-tinta));
  --soft-hover: color-mix(in srgb, var(--p-fondo) 89%, var(--p-tinta));
  --photo: color-mix(in srgb, var(--p-fondo) 92%, var(--p-tinta));
  --line: color-mix(in srgb, var(--p-fondo) 88%, var(--p-tinta));
  --edge: color-mix(in srgb, var(--p-fondo) 78%, var(--p-tinta));
  --ink: var(--p-tinta);
  --ink-hover: color-mix(in srgb, var(--p-tinta) 85%, var(--p-fondo));
  --text-strong: color-mix(in srgb, var(--p-tinta) 92%, var(--p-fondo));
  --text: color-mix(in srgb, var(--p-tinta) 76%, var(--p-fondo));
  /* al 70 % de tinta, el texto de segunda (fechas, pies) pasa de 4,5:1 sobre
     el fondo de todas las paletas de día; al 58 % «Papel» se quedaba en 3,7 */
  --muted: color-mix(in srgb, var(--p-tinta) 70%, var(--p-fondo));
  --faint: color-mix(in srgb, var(--p-tinta) 24%, var(--p-fondo));
  --accent: var(--p-acento);
  --header-bg: color-mix(in srgb, var(--p-fondo) 86%, transparent);
  --glass: color-mix(in srgb, var(--p-fondo) 92%, transparent);
  --album-paper: var(--p-fondo);
  --album-card: color-mix(in srgb, var(--p-fondo) 40%, #ffffff);
  --album-edge: var(--line);
  --album-line: var(--edge);
  --album-line-strong: color-mix(in srgb, var(--p-fondo) 62%, var(--p-tinta));
  --album-ink: var(--text);
  --album-accent: var(--p-acento);
  --casa-gold: var(--p-acento);
  --casa-rule: var(--line);
  --verbena-accent: var(--p-acento);
  --verbena-soft: color-mix(in srgb, var(--p-acento) 10%, var(--p-fondo));
  --archivo-paper: var(--p-fondo);
  --archivo-rule: var(--edge);
  --archivo-ink: var(--text);
}
:root[data-theme="dark"]:is(.pal-papel, .pal-salvia, .pal-mar, .pal-teja, .pal-ciruela, .pal-pizarra, .pal-oro,
      .pal-bosque, .pal-arena, .pal-vino, .pal-lavanda, .pal-rosa, .pal-propio) {
  --card: color-mix(in srgb, var(--p-fondo) 94%, var(--p-tinta));
  --album-card: color-mix(in srgb, var(--p-fondo) 92%, var(--p-tinta));
  --on-ink: var(--p-fondo);
  /* de noche el 58 % ya pasa de 5:1 */
  --muted: color-mix(in srgb, var(--p-tinta) 58%, var(--p-fondo));
}
/* el sitio entero con su fondo (los estilos que tienen papel propio ya lo
   cogen de sus variables) */
:root:is(.pal-papel, .pal-salvia, .pal-mar, .pal-teja, .pal-ciruela, .pal-pizarra, .pal-oro,
      .pal-bosque, .pal-arena, .pal-vino, .pal-lavanda, .pal-rosa, .pal-propio) body { background: var(--paper); }
/* El acento, como letra pequeña: mezclado con la tinta para que se lea (el
   «Oro» puro se queda en 3,4:1 sobre su fondo). «Tu color» puede ser
   cualquiera, también un amarillo que sobre el papel no se ve: ahí, además, se
   le pone un tope de claridad (de día) o un suelo (de noche), conservando su
   tono, donde el navegador sabe hacerlo. Encima de la foto de portada, no:
   allí va en blanco, como el resto de la portada. */
:root:is(.pal-papel, .pal-salvia, .pal-mar, .pal-teja, .pal-ciruela, .pal-pizarra, .pal-oro,
      .pal-bosque, .pal-arena, .pal-vino, .pal-lavanda, .pal-rosa, .pal-propio) :is(.site-label, .site-kicker):not(.has-cover *) {
  color: color-mix(in srgb, var(--p-acento) 75%, var(--p-tinta));
}
:root.pal-propio :is(.site-label, .site-kicker):not(.has-cover *) { color: color-mix(in srgb, var(--p-acento) 35%, var(--p-tinta)); }
@supports (color: oklch(from red l c h)) {
  :root.pal-propio :is(.site-label, .site-kicker):not(.has-cover *) { color: oklch(from var(--p-acento) min(l, 0.5) c h); }
  :root[data-theme="dark"].pal-propio :is(.site-label, .site-kicker):not(.has-cover *) { color: oklch(from var(--p-acento) max(l, 0.75) c h); }
}

/* Las letras: la de los títulos y la del texto. La barra de arriba y los
   botones de la app siguen con la suya (--font-ui). */
:root.letra-libro     { --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "EB Garamond", Georgia, serif; }
:root.letra-periodico { --font-display: "Playfair Display", Georgia, serif; --font-body: "Source Serif 4", Georgia, serif; }
:root.letra-maquina   { --font-display: "Special Elite", "Courier New", monospace; --font-body: "Courier Prime", "Courier New", monospace; }
:root.letra-mano      { --font-display: "Caveat", "Comic Sans MS", cursive; --font-body: Nunito, ui-sans-serif, system-ui, sans-serif; }
:root.letra-amable    { --font-display: Fraunces, Georgia, serif; --font-body: Nunito, ui-sans-serif, system-ui, sans-serif; }
:root.letra-moderna   { --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-body: Inter, ui-sans-serif, system-ui, sans-serif; }
:root.letra-antigua   { --font-display: "IM Fell English", Georgia, serif; --font-body: "Crimson Pro", Georgia, serif; }
:root.letra-editorial { --font-display: "DM Serif Display", Georgia, serif; --font-body: "DM Sans", ui-sans-serif, system-ui, sans-serif; }
:root.letra-redonda   { --font-display: Quicksand, ui-rounded, ui-sans-serif, system-ui, sans-serif; --font-body: Nunito, ui-rounded, ui-sans-serif, system-ui, sans-serif; }
:root.letra-caligrafica { --font-display: "Dancing Script", "Brush Script MT", cursive; --font-body: Lora, Georgia, serif; }
/* las de serifa pequeña se leen mejor un poco más grandes */
:root:is(.letra-libro, .letra-periodico, .letra-caligrafica) body { font-size: 1.03rem; }
:root.letra-maquina body { font-size: 0.906rem; }
:root:is(.letra-mano, .letra-caligrafica) h1 { letter-spacing: 0; }
:root.letra-antigua body { font-size: 1.06rem; }
:root.letra-redonda h1 { font-weight: 600; letter-spacing: -0.01em; }
:root:is(.letra-moderna, .letra-maquina) h1 { letter-spacing: -0.02em; }
/* la app, dentro del sitio, con su letra de siempre */
.site-tools, .visita-barra, .tp-bar, .site-share .compartir, .gal-more, .lb { font-family: var(--font-ui); }

/* Los adornos */
.orn-filetes .site-label { display: flex; align-items: center; gap: 0.9rem; }
.orn-filetes .site-label::after {
  content: "";
  flex: 1;
  height: 4px;
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}
.orn-filetes .site-gallery-head > .site-label { flex: 1; }
.orn-floron .site-section::before, .orn-floron .site-share::before {
  content: "❦";
  display: block;
  text-align: center;
  margin: 0 0 1.4rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.85;
}
:root.orn-papel body {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.29 0 0 0 0 0.2 0 0 0 0.075 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
:root[data-theme="dark"].orn-papel body { background-blend-mode: soft-light; }
/* esquinas de álbum (antes del elemento) y cinta (después): las fotos de la
   galería, las polaroids, los retratos en collage y las fotos de las entradas */
.orn-esquinas :is(.gal li, .al-polaroids li, .pe-collage li, .en-grande-foto, .al-photo),
.orn-cinta :is(.gal li, .al-polaroids li, .pe-collage li, .en-grande-foto, .al-photo) { position: relative; }
.orn-esquinas :is(.gal li, .al-polaroids li, .pe-collage li, .en-grande-foto)::before {
  --esq: color-mix(in srgb, var(--ink) 70%, transparent);
  content: "";
  position: absolute;
  inset: -5px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(135deg, var(--esq) 0 11px, transparent 11px) top left / 22px 22px no-repeat,
    linear-gradient(225deg, var(--esq) 0 11px, transparent 11px) top right / 22px 22px no-repeat,
    linear-gradient(45deg, var(--esq) 0 11px, transparent 11px) bottom left / 22px 22px no-repeat,
    linear-gradient(315deg, var(--esq) 0 11px, transparent 11px) bottom right / 22px 22px no-repeat;
}
.orn-cinta :is(.gal li, .al-polaroids li, .pe-collage li, .en-grande-foto, .al-photo)::after {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: min(70px, 46%);
  height: 20px;
  z-index: 3;
  pointer-events: none;
  transform: translateX(-50%) rotate(-3deg);
  background: color-mix(in srgb, #f3e3b4 70%, transparent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.orn-cinta :is(.gal li:nth-child(even), .al-polaroids li:nth-child(even), .pe-collage li:nth-child(even))::after {
  transform: translateX(-50%) rotate(4deg);
}
:root[data-theme="dark"] .orn-cinta :is(.gal li, .al-polaroids li, .pe-collage li, .en-grande-foto, .al-photo)::after,
:root[data-theme="dark"].orn-cinta :is(.gal li, .al-polaroids li, .pe-collage li, .en-grande-foto, .al-photo)::after {
  background: color-mix(in srgb, #8a7a52 60%, transparent);
}
.orn-cinta .gal, .orn-esquinas .gal { padding-top: 10px; }

/* Las dos portadas que no son de ningún estilo */
.pt-lado {
  position: relative;
  display: grid;
  gap: 2rem;
  align-items: center;
  margin: 0 0 3rem;
  padding: 3.4rem 0 0;
}
@media (min-width: 820px) {
  .pt-lado.con-foto { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3.4rem; }
}
.pt-lado-foto { margin: 0; }
.pt-lado-foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 72vh;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 22px 60px var(--shadow-md);
}
.pt-lado h1 { font-size: clamp(2.7rem, 5.6vw, 4.6rem); line-height: 0.98; margin: 0 0 0.8rem; overflow-wrap: anywhere; }
/* los botones: con el texto en media página no caben tres y el último caía
   solo a otra línea. Se queda un botón, el del árbol, y los otros dos pasan
   a enlaces, juntos en la línea de debajo (una rejilla: el botón ocupa la
   primera fila entera, a su tamaño; los enlaces, la segunda) */
.pt-lado .site-cta { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0.9rem 1.5rem; margin-top: 1.6rem; }
.pt-lado .site-cta .site-tree-btn {
  grid-column: 1 / -1;
  justify-self: start;
  gap: 0.85rem;
  padding: 0.6rem 1.35rem 0.6rem 0.6rem;
  text-align: left;
  box-shadow: 0 12px 28px -14px var(--shadow-md);
  transition: transform 0.15s, box-shadow 0.15s;
}
.pt-lado .site-cta .site-tree-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 32px -14px var(--shadow-md); }
.pt-lado .site-tree-ico { width: 2.6rem; height: 2.6rem; padding: 0.55rem; border-radius: 50%; background: color-mix(in srgb, currentColor 14%, transparent); }
.pt-lado .site-tree-txt { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.2; }
.pt-lado .site-tree-que { font-size: 1.08rem; font-weight: 600; }
.pt-lado .site-tree-n { font-size: 0.82rem; opacity: 0.72; }
.pt-lado .site-tree-n::before { content: none; }
.pt-lado .site-tree-gen { display: inline; }
.pt-lado .site-tree-flecha { margin-left: 0.5rem; font-size: 1.15rem; transition: transform 0.15s; }
.pt-lado .site-tree-btn:hover .site-tree-flecha { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .pt-lado .site-cta .site-tree-btn, .pt-lado .site-tree-flecha { transition: none; }
}
.pt-lado .site-cta .site-cta-alt {
  padding: 0.2rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--edge);
  text-underline-offset: 0.3em;
}
.pt-lado .site-cta .site-cta-alt:hover { background: none; text-decoration-color: currentColor; }
/* en una columna (el móvil), el botón a lo ancho */
@media (max-width: 819px) {
  .pt-lado .site-cta .site-tree-btn { justify-self: stretch; }
  .pt-lado .site-tree-flecha { margin-left: auto; }
}
.pt-titulo {
  position: relative;
  text-align: center;
  padding: 4.6rem 0 2.6rem;
  margin: 0 0 2.6rem;
  border-bottom: 1px solid var(--line);
}
.pt-titulo-escudo { display: block; width: 84px; height: 84px; object-fit: contain; margin: 0 auto 1.2rem; }
.pt-titulo h1 { font-size: clamp(3rem, 8vw, 6rem); line-height: 0.95; margin: 0.3rem auto 0.6rem; max-width: 18ch; overflow-wrap: anywhere; }
.pt-titulo-sub { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.8rem); color: var(--text); margin: 0 auto; max-width: 36rem; }
.pt-titulo-orla {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0.4rem auto;
  max-width: 22rem;
  color: var(--accent);
  font-size: 1.15rem;
}
.pt-titulo-orla span { flex: 1; height: 1px; background: currentColor; opacity: 0.45; }
.pt-titulo .site-figures, .pt-titulo .site-cta { justify-content: center; }

/* La presentación como cita o como carta */
.pr-cita {
  position: relative;
  max-width: 44rem;
  margin: 1rem auto 3rem;
  padding: 2.4rem 1rem 0.5rem;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  line-height: 1.35;
  color: var(--text-strong);
}
.pr-comillas {
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 5.5rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.55;
  font-style: normal;
}
.pr-texto p { margin: 0 0 0.8em; }
.pr-carta {
  max-width: 40rem;
  margin: 0.5rem auto 3rem;
  padding: 2.2rem 2.4rem 2rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 14px 40px var(--shadow);
  font-size: 1.08rem;
  line-height: 1.75;
}
.pr-carta .pr-texto > p:first-child::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 4.4rem;
  line-height: 0.82;
  padding: 0.35rem 0.55rem 0 0;
  color: var(--accent);
}
.pr-firma {
  margin: 1.2rem 0 0;
  text-align: right;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.45rem;
}
.pr-firma::before { content: "— "; }
.pr-cita .site-cta, .pr-carta .site-cta { justify-content: center; font-family: var(--font-body); font-style: normal; font-size: 0.92rem; }
@media (max-width: 560px) { .pr-carta { padding: 1.5rem 1.2rem 1.4rem; } }

/* La gente en collage o en lista */
.pe-collage {
  list-style: none;
  margin: 0;
  padding: 0.6rem 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 0;
}
.pe-collage li { width: 172px; margin: 0 -0.35rem; }
.pe-collage a {
  display: block;
  padding: 9px 9px 12px;
  background: var(--card);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 10px 28px var(--shadow-md);
  transform: rotate(-2.2deg);
  transition: transform 0.2s, box-shadow 0.2s;
}
.pe-collage li:nth-child(3n+2) a { transform: rotate(1.8deg) translateY(10px); }
.pe-collage li:nth-child(3n) a { transform: rotate(-0.8deg) translateY(-6px); }
.pe-collage a:hover { transform: rotate(0) scale(1.04); position: relative; z-index: 2; box-shadow: 0 16px 40px var(--shadow-lg); }
.pe-collage .pe-cara { display: grid; place-items: center; aspect-ratio: 1; background: var(--photo); overflow: hidden; }
.pe-collage .pe-cara img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-collage .pe-cara span { font-family: var(--font-display); font-size: 2.6rem; color: var(--faint); }
.pe-collage .pe-texto { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 0.55rem; font-size: 0.85rem; }
.pe-collage strong { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; line-height: 1.1; }
.pe-collage .pe-nota { font-size: 0.8rem; color: var(--text); margin-top: 0.2rem; }
.pe-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.2rem 2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.pe-lista a { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.pe-lista a:hover strong { text-decoration: underline; }
.pe-lista .pe-cara { flex: none; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; overflow: hidden; background: var(--photo); }
.pe-lista .pe-cara img { width: 100%; height: 100%; object-fit: cover; }
.pe-lista .pe-cara span { font-family: var(--font-display); font-size: 1.5rem; color: var(--faint); }
.pe-lista .pe-texto { display: flex; flex-direction: column; min-width: 0; font-size: 0.88rem; }
.pe-lista strong { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.15; }
.pe-lista .pe-nota { color: var(--text); }

/* Las entradas: la última en grande, o en un cuaderno */
.en-grande {
  display: grid;
  gap: 1.4rem 2rem;
  align-items: center;
  color: inherit;
  text-decoration: none;
  margin: 0 0 1.4rem;
}
@media (min-width: 760px) { .en-grande:has(.en-grande-foto) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.en-grande-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--photo); }
.en-grande-texto { display: flex; flex-direction: column; gap: 0.45rem; }
.en-grande strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.05; }
.en-grande:hover strong { text-decoration: underline; text-decoration-thickness: 1px; }
.en-fecha { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.en-resumen { color: var(--text); font-size: 1.02rem; line-height: 1.55; }
.en-firma { font-size: 0.86rem; color: var(--muted); }
.en-resto { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.en-resto a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.en-resto strong { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.2; }
.en-resto a:hover strong { text-decoration: underline; }
.en-resto .muted { flex: none; font-size: 0.82rem; }
.en-hoja {
  position: relative;
  max-width: 46rem;
  margin: 0.8rem auto 0;
  padding: 2.6rem 1.8rem 1.6rem 4.4rem;
  background:
    linear-gradient(90deg, transparent 3.1rem, color-mix(in srgb, var(--accent) 55%, transparent) 3.1rem 3.2rem, transparent 3.2rem),
    repeating-linear-gradient(180deg, transparent 0 31px, var(--line) 31px 32px),
    var(--card);
  background-position: 0 0, 0 1.4rem, 0 0;
  box-shadow: 0 16px 44px var(--shadow);
  border-radius: 3px;
}
.en-cinta {
  position: absolute;
  top: -11px;
  left: 50%;
  width: 96px;
  height: 24px;
  transform: translateX(-50%) rotate(-2deg);
  background: color-mix(in srgb, #f3e3b4 72%, transparent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.en-hoja ol { list-style: none; margin: 0; padding: 0; }
.en-hoja li + li { margin-top: 32px; }
.en-hoja a { display: flex; flex-direction: column; color: inherit; text-decoration: none; line-height: 32px; }
.en-hoja .en-fecha { line-height: 32px; }
.en-hoja strong { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; line-height: 32px; }
.en-hoja a:hover strong { text-decoration: underline; text-decoration-thickness: 1px; }
.en-hoja .en-resumen { font-size: 0.98rem; line-height: 32px; }
@media (max-width: 560px) { .en-hoja { padding: 2.2rem 1rem 1.2rem 2.6rem; background-position: -1.4rem 0, 0 1.4rem, 0 0; } }

/* La galería en collage, en tira de película o en mosaico */
.gal-collage { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.1rem; padding: 0.4rem; }
.gal-collage li:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }
.gal-collage .gal-item { border-radius: 2px; border: 6px solid var(--card); box-shadow: 0 8px 22px var(--shadow-md); transform: rotate(-1.4deg); }
.gal-collage li:nth-child(even) .gal-item { transform: rotate(1.2deg); }
.gal-collage li:nth-child(3n) .gal-item { transform: rotate(-0.5deg); }
.gal-pelicula {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 26px 14px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, #f1ece2 0 11px, transparent 11px 24px) 0 7px / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, #f1ece2 0 11px, transparent 11px 24px) 0 calc(100% - 7px) / 100% 10px no-repeat,
    #161412;
  scrollbar-width: thin;
}
.gal-pelicula li { flex: 0 0 auto; width: clamp(150px, 22vw, 230px); }
.gal-pelicula .gal-item { aspect-ratio: 4 / 3; border-radius: 2px; }
.gal-pelicula .gal-item img { filter: sepia(0.18) contrast(1.04); }
.gal-mosaico { display: block; columns: 3 170px; column-gap: 0.65rem; }
.gal-mosaico li { break-inside: avoid; margin: 0 0 0.65rem; }
.gal-mosaico li:nth-child(5n+2) .gal-item { aspect-ratio: 3 / 4; }
.gal-mosaico li:nth-child(5n+3) .gal-item { aspect-ratio: 4 / 3; }
.gal-mosaico li:nth-child(5n+4) .gal-item { aspect-ratio: 4 / 5; }
.gal-mosaico .gal-item { border-radius: 8px; }

/* Las cifras, en grande o en tabla */
.ci-numeros {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.4rem 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
}
.ci-numeros li { display: flex; flex-direction: column; gap: 0.3rem; padding-top: 0.8rem; border-top: 2px solid var(--ink); }
.ci-numeros strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 4.6vw, 3.4rem); line-height: 1; }
.ci-numeros span { font-size: 0.86rem; color: var(--muted); }
.ci-tabla .ar-table { max-width: 30rem; }

/* --- El mapa de la familia como sección («Personalizar») ------------------- */
.se-mapa-caja { height: clamp(320px, 54vh, 560px); border-radius: 14px; overflow: hidden; background: var(--map-bg); }

/* --- Más adornos ------------------------------------------------------------ */
/* una letra grande al empezar la presentación (la de la carta ya la lleva; la
   cita, centrada y en cursiva, no) */
.orn-capitular :is(.site-about, .me-about, .ar-about, .al-about, .pr-columnas .pr-texto, .pr-recuadro .pr-texto) > p:first-child::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 4.2em;
  line-height: 0.8;
  padding: 0.32rem 0.5rem 0 0;
  color: var(--accent);
}
/* los títulos de las secciones, subrayados con un trazo ondulado */
.orn-subrayado .site-label {
  text-decoration: underline wavy color-mix(in srgb, var(--accent) 70%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.45em;
}
.orn-subrayado.orn-filetes .site-label { text-decoration: none; }
/* una línea de puntos al pie de cada sección */
.orn-punteado .site-section::after {
  content: "";
  display: block;
  width: min(16rem, 60%);
  margin: 2.6rem auto 0;
  border-top: 3px dotted var(--edge);
}

/* --- La página entera: ancho, letra, fotos y esquinas ---------------------- */
:root.anc-estrecho body:not(.gx-page, .ph-page) main { max-width: 860px; }
:root.anc-ancho main { max-width: 1320px; }
/* todo un poco más grande (todo va en rem): para leer sin gafas */
:root.tam-grande { font-size: 112.5%; }
/* las fotos de la familia en sepia o en blanco y negro; los logos, no */
:root.ton-sepia main img:not([class*="emblem"], [class*="escudo"]) { filter: sepia(0.62) saturate(0.85) contrast(1.03); }
:root.ton-bn main img:not([class*="emblem"], [class*="escudo"]) { filter: grayscale(1) contrast(1.06); }
/* las esquinas: rectas (salvo las caras, que son redondas a propósito) o con
   un borde blanco, como las copias de papel de antes */
:root.bor-rectos main :is(.gal-item, .gx-link, .site-person-face, .post-row-img, .en-grande-foto img, .en-tarjeta-foto, .en-titular-foto img,
  .pt-lado-foto img, .pt-collage-fotos span, .me-memory-photo, .vb-post-photo, .se-mapa-caja, .pe-tarjetas a, .pe-carrusel .pe-cara) {
  border-radius: 0;
}
:root.bor-marco main :is(.gal-strip .gal-item, .gal-mosaico .gal-item, .gal-carrusel .gal-item, .gx-link, .site-person-face,
  img.post-row-img, .en-grande-foto img, .en-tarjeta-foto, .en-titular-foto img, .pt-lado-foto img, .pt-collage-fotos span, .me-memory-photo,
  .vb-post-photo, .pe-carrusel .pe-cara) {
  border: 6px solid #fbfaf6;
  border-radius: 2px;
  box-shadow: 0 6px 18px var(--shadow-md);
}
:root[data-theme="dark"].bor-marco main :is(.gal-strip .gal-item, .gal-mosaico .gal-item, .gal-carrusel .gal-item, .gx-link,
  .site-person-face, img.post-row-img, .en-grande-foto img, .en-tarjeta-foto, .en-titular-foto img, .pt-lado-foto img, .pt-collage-fotos span,
  .me-memory-photo, .vb-post-photo, .pe-carrusel .pe-cara) {
  border-color: #d9d3c6;
}

/* --- Tres portadas más ------------------------------------------------------- */
/* La foto en un marco, con su paspartú, y el título como la cartela de un museo */
.pt-marco {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3.4rem 0 0;
  margin: 0 0 3rem;
}
.pt-marco-cuadro {
  --madera: color-mix(in srgb, var(--accent) 35%, #3b2a1a);
  margin: 0 0 -1.4rem;
  max-width: min(100%, 780px);
  padding: clamp(14px, 3.4vw, 38px);
  background: #f7f3ea;
  border: clamp(10px, 1.7vw, 18px) solid var(--madera);
  border-image: linear-gradient(135deg, color-mix(in srgb, var(--madera) 70%, #fff), var(--madera) 35%,
                color-mix(in srgb, var(--madera) 80%, #fff) 60%, color-mix(in srgb, var(--madera) 80%, #000)) 1;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.22), 0 28px 54px -20px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.14);
}
:root[data-theme="dark"] .pt-marco-cuadro { background: #e6e0d3; }
.pt-marco-cuadro img { display: block; max-width: 100%; max-height: 60vh; width: auto; height: auto; margin: 0 auto; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }
.pt-marco-cuadro.is-escudo img { width: clamp(140px, 22vw, 230px); max-height: 260px; object-fit: contain; box-shadow: none; filter: none; }
.pt-marco-cartela {
  position: relative;
  max-width: 36rem;
  padding: 1.1rem 1.8rem 1.2rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 8px 22px var(--shadow);
}
.pt-marco:not(.con-foto) .pt-marco-cartela { padding: 2.4rem 2.6rem; }
.pt-marco h1 { font-size: clamp(2.3rem, 4.8vw, 3.7rem); line-height: 1; margin: 0.2rem 0 0.5rem; overflow-wrap: anywhere; }
.pt-marco .site-subtitle { margin: 0 auto; }
.pt-marco :is(.site-figures, .site-cta) { justify-content: center; }
.pt-marco .site-figures { margin: 0.7rem 0 0; }
.pt-marco > .site-cta { margin-top: 1.8rem; }

/* Una franja de foto a lo ancho y el título debajo, en una pestaña de papel */
.pt-banda { margin: 0 0 3rem; text-align: center; }
.pt-banda-foto {
  width: 100vw;
  height: clamp(210px, 40vh, 400px);
  margin: -2.2rem 0 0 calc(50% - 50vw);
  overflow: hidden;
  background: var(--photo);
}
.pt-banda-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pt-banda-texto { position: relative; max-width: 48rem; margin: 2.4rem auto 0; }
.pt-banda.con-foto .pt-banda-texto {
  margin-top: -3.6rem;
  padding: 1.8rem 2.2rem 0;
  background: var(--paper);
  border-radius: 16px 16px 0 0;
}
.pt-banda-escudo { display: block; width: 72px; height: 72px; object-fit: contain; margin: 0 auto 0.8rem; }
.pt-banda h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: 0.98; margin: 0.2rem 0 0.7rem; overflow-wrap: anywhere; }
.pt-banda .site-subtitle { margin: 0 auto; max-width: 36rem; }
.pt-banda :is(.site-figures, .site-cta) { justify-content: center; }
@media (max-width: 560px) { .pt-banda.con-foto .pt-banda-texto { padding: 1.3rem 1rem 0; margin-top: -2.4rem; } }

/* Un collage de fotos y el título en una tarjeta encima */
.pt-collage { position: relative; margin: 0 0 3rem; padding-top: 1.4rem; }
.pt-collage-fotos { display: grid; gap: 8px; grid-auto-rows: clamp(120px, 17vw, 200px); }
.pt-collage.n-3 .pt-collage-fotos { grid-template-columns: repeat(3, 1fr); grid-template-areas: "a a b" "a a c"; }
.pt-collage.n-4 .pt-collage-fotos { grid-template-columns: repeat(4, 1fr); grid-template-areas: "a a b c" "a a d d"; }
.pt-collage.n-5 .pt-collage-fotos { grid-template-columns: repeat(4, 1fr); grid-template-areas: "b a a c" "d a a e"; }
.pt-collage-fotos span { overflow: hidden; border-radius: 8px; background: var(--photo); }
.pt-collage-fotos span:nth-child(1) { grid-area: a; }
.pt-collage-fotos span:nth-child(2) { grid-area: b; }
.pt-collage-fotos span:nth-child(3) { grid-area: c; }
.pt-collage-fotos span:nth-child(4) { grid-area: d; }
.pt-collage-fotos span:nth-child(5) { grid-area: e; }
.pt-collage-fotos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pt-collage-tarjeta {
  position: relative;
  z-index: 1;
  max-width: 44rem;
  margin: 2rem auto 0;
  padding: 2rem 2.2rem 1.8rem;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 22px 50px -12px var(--shadow-md);
}
.pt-collage.con-fotos .pt-collage-tarjeta { margin-top: -4.6rem; }
.pt-collage .site-emblem { margin-inline: auto; }
.pt-collage h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: 1; margin: 0.2rem 0 0.6rem; overflow-wrap: anywhere; }
.pt-collage .site-subtitle { margin: 0 auto; }
.pt-collage :is(.site-figures, .site-cta) { justify-content: center; }
@media (max-width: 640px) {
  .pt-collage-fotos { grid-template-columns: repeat(2, 1fr) !important; grid-template-areas: none !important; grid-auto-rows: 120px; }
  .pt-collage-fotos span { grid-area: auto !important; }
  .pt-collage-fotos span:first-child, .pt-collage-fotos span:last-child:nth-child(even) { grid-column: span 2 !important; }
  .pt-collage-fotos span:first-child { grid-row: span 2; }
  .pt-collage-tarjeta { padding: 1.5rem 1.1rem 1.3rem; }
  .pt-collage.con-fotos .pt-collage-tarjeta { margin: -3rem 0.6rem 0; }
}

/* --- Más formas de las secciones -------------------------------------------- */
/* La presentación en dos columnas, como un periódico, o en un recuadro */
.pr-columnas { margin: 0.5rem 0 3rem; padding: 1.4rem 0 1.2rem; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.pr-columnas .pr-texto { columns: 2 17rem; column-gap: 2.6rem; column-rule: 1px solid var(--line); font-size: 1.04rem; line-height: 1.7; text-align: justify; hyphens: auto; }
.pr-columnas .pr-texto > p:first-child::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.7rem;
  line-height: 0.82;
  padding: 0.32rem 0.45rem 0 0;
  color: var(--ink);
}
.pr-recuadro {
  position: relative;
  max-width: 44rem;
  margin: 1.6rem auto 3rem;
  padding: 1.9rem 2rem 1.4rem;
  border: 2px solid color-mix(in srgb, var(--accent) 70%, var(--ink));
  border-radius: 4px;
  font-size: 1.04rem;
  line-height: 1.7;
}
.pr-recuadro .pr-cuerpo > .site-label { position: absolute; top: 0; left: 1.4rem; transform: translateY(-55%); margin: 0; padding: 0 0.6rem; background: var(--paper); }
.pr-columnas .site-cta, .pr-recuadro .site-cta { margin-top: 1.2rem; }
@media (max-width: 560px) { .pr-recuadro { padding: 1.6rem 1.1rem 1.1rem; } .pr-columnas .pr-texto { text-align: left; } }

/* En fila, para pasarlas con el dedo: la gente, las entradas, la galería y las caras */
:is(.pe-carrusel, .en-carrusel .en-tarjetas, .gal-carrusel, .cr-tira .vb-faces) {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 0.4rem 2px 1rem;
  scrollbar-width: thin;
}
:is(.pe-carrusel, .en-carrusel .en-tarjetas, .gal-carrusel, .cr-tira .vb-faces) > li { flex: 0 0 auto; scroll-snap-align: start; }

/* La gente en tarjetas o en fila */
.pe-tarjetas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}
.pe-tarjetas a {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.pe-tarjetas a:hover { border-color: var(--edge); transform: translateY(-2px); }
.pe-tarjetas .pe-cara { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--photo); }
.pe-tarjetas .pe-cara img { width: 100%; height: 100%; object-fit: cover; }
.pe-tarjetas .pe-cara span { font-family: var(--font-display); font-size: 3rem; color: var(--faint); }
.pe-tarjetas .pe-texto { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 1.1rem 1.1rem; font-size: 0.88rem; }
.pe-tarjetas strong { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.15; }
.pe-tarjetas .pe-nota { margin-top: 0.35rem; color: var(--text); line-height: 1.5; }
.pe-carrusel { list-style: none; margin: 0; }
.pe-carrusel > li { width: clamp(150px, 22vw, 200px); }
.pe-carrusel a { display: flex; flex-direction: column; gap: 0.15rem; color: inherit; text-decoration: none; font-size: 0.86rem; }
.pe-carrusel .pe-cara { display: grid; place-items: center; aspect-ratio: 3 / 4; margin-bottom: 0.55rem; overflow: hidden; border-radius: 12px; background: var(--photo); }
.pe-carrusel .pe-cara img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.pe-carrusel a:hover img { transform: scale(1.04); }
.pe-carrusel .pe-cara span { font-family: var(--font-display); font-size: 2.6rem; color: var(--faint); }
.pe-carrusel .pe-texto { display: flex; flex-direction: column; gap: 0.1rem; }
.pe-carrusel strong { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; line-height: 1.15; }
.pe-carrusel a:hover strong { text-decoration: underline; text-decoration-thickness: 1px; }
.pe-carrusel .pe-nota { color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Las entradas en tarjetas con foto (en rejilla o en fila) */
.en-tarjetas { list-style: none; margin: 0; padding: 0; }
.en-rejilla .en-tarjetas { display: grid; gap: 1.8rem 1.3rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.en-carrusel .en-tarjetas > li { width: clamp(230px, 30vw, 300px); }
.en-tarjetas a { display: flex; flex-direction: column; gap: 0.35rem; height: 100%; color: inherit; text-decoration: none; }
.en-tarjeta-foto {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  margin-bottom: 0.45rem;
  overflow: hidden;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 12%, var(--photo));
}
.en-tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.en-tarjetas a:hover img { transform: scale(1.03); }
.en-tarjeta-foto > span { font-family: var(--font-display); font-size: 3.6rem; color: color-mix(in srgb, var(--accent) 45%, var(--paper)); }
.en-tarjetas strong { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; line-height: 1.15; }
.en-tarjetas a:hover strong { text-decoration: underline; text-decoration-thickness: 1px; }
.en-tarjetas .en-resumen { font-size: 0.92rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Las entradas como la primera plana de un periódico */
.en-cabecera {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 1.4rem;
  padding: 0.55rem 0;
  border-top: 3px double var(--ink);
  border-bottom: 1px solid var(--ink);
}
.en-cabecera > span { font-family: var(--font-display); font-style: italic; color: var(--muted); font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.en-cabecera .site-label { margin: 0; text-align: center; }
.en-cabecera a { justify-self: end; font-size: 0.86rem; }
.en-titular {
  display: grid;
  gap: 0.8rem 2rem;
  margin: 0 0 1.4rem;
  padding: 0 0 1.4rem;
  border-bottom: 1px solid var(--ink);
  color: inherit;
  text-decoration: none;
}
.en-titular strong { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1; letter-spacing: -0.01em; text-wrap: balance; }
.en-titular:hover strong { text-decoration: underline; text-decoration-thickness: 2px; }
.en-titular-foto img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.en-titular .en-resumen { font-size: 1.1rem; line-height: 1.6; }
@media (min-width: 760px) {
  /* el titular arriba; debajo, la foto a la izquierda y el resumen y la firma
     a la derecha, juntos arriba (la última fila se estira lo que mida la foto) */
  .en-titular:has(.en-titular-foto) {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    align-items: start;
  }
  .en-titular strong { grid-column: 1 / -1; }
  .en-titular-foto { grid-column: 1; grid-row: 2 / -1; }
  .en-titular:has(.en-titular-foto) :is(.en-resumen, .en-firma) { grid-column: 2; }
}
/* las columnas, separadas por un filete; el de la primera de cada fila se esconde */
.en-columnas {
  list-style: none;
  margin: 0 0 0 calc(-1.2rem - 1px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  row-gap: 1.4rem;
  clip-path: inset(0 0 0 0.8rem);
}
.en-columnas li { padding: 0 1.2rem; border-left: 1px solid var(--line); }
.en-columnas a { display: flex; flex-direction: column; gap: 0.35rem; color: inherit; text-decoration: none; }
.en-columnas strong { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.15; }
.en-columnas a:hover strong { text-decoration: underline; }
.en-columnas .en-resumen { font-size: 0.92rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 560px) {
  .en-cabecera { grid-template-columns: 1fr auto; }
  .en-cabecera > span { display: none; }
  .en-cabecera .site-label { text-align: left; }
}

/* La galería en polaroids, en cuadros colgados o en fila */
.gal-polaroids { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 1.8rem 1.3rem; padding: 0.6rem 0.4rem 1rem; }
.gal-polaroids .gal-item {
  aspect-ratio: auto;
  padding: 8px 8px 32px;
  border-radius: 2px;
  background: #fbfaf6;
  box-shadow: 0 8px 22px var(--shadow-md);
  transform: rotate(-1.8deg);
  transition: transform 0.2s;
}
.gal-polaroids .gal-item img { aspect-ratio: 1; height: auto; }
.gal-polaroids li:nth-child(even) .gal-item { transform: rotate(1.6deg) translateY(6px); }
.gal-polaroids li:nth-child(3n) .gal-item { transform: rotate(-0.6deg); }
.gal-polaroids .gal-item:hover { transform: rotate(0) scale(1.03); }
.gal-polaroids .gal-item:hover img { transform: none; }
:root[data-theme="dark"] .gal-polaroids .gal-item { background: #e6e0d3; }
.gal-marcos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 2.2rem 1.8rem; padding: 1rem 0.5rem 1.4rem; align-items: center; }
.gal-marcos .gal-item {
  --madera: color-mix(in srgb, var(--accent) 35%, #3b2a1a);
  aspect-ratio: 4 / 5;
  padding: 12px;
  border-radius: 0;
  background: #f6f2e9;
  border: 9px solid var(--madera);
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.25), 0 16px 26px -12px rgba(0, 0, 0, 0.55);
}
.gal-marcos li:nth-child(3n+2) .gal-item { aspect-ratio: 1; }
.gal-marcos li:nth-child(4n+3) .gal-item { aspect-ratio: 5 / 4; --madera: #a88a4f; }
.gal-marcos li:nth-child(5n+4) .gal-item { --madera: #2a2622; }
.gal-marcos .gal-item img { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); }
.gal-marcos .gal-item:hover img { transform: none; }
:root[data-theme="dark"] .gal-marcos .gal-item { background: #e2dccf; }
.gal-carrusel > li { width: clamp(200px, 28vw, 300px); }
.gal-carrusel .gal-item { aspect-ratio: 4 / 3; }

/* Las cifras en una frase o en fichas */
.ci-la-frase { max-width: 46rem; margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.3; color: var(--text-strong); text-wrap: pretty; }
.ci-la-frase strong { font-weight: 400; color: color-mix(in srgb, var(--accent) 80%, var(--ink)); }
.ci-las-fichas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ci-las-fichas li {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1.1rem 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: 10px;
}
.ci-las-fichas span { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ci-las-fichas strong { font-family: var(--font-display); font-weight: 400; font-size: 2.3rem; line-height: 1; }

/* Los documentos en tarjetas, como papeles sobre la mesa */
.do-fichas { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 1.4rem 1rem; }
.do-fichas .ar-paper {
  flex-direction: column;
  align-items: flex-start;
  min-height: 10rem;
  padding: 1.2rem 1.1rem;
  border-radius: 4px 18px 4px 4px;
  box-shadow: 0 8px 22px var(--shadow);
}
.do-fichas .ar-ext { width: 50px; height: 62px; font-size: 0.72rem; }
.do-fichas .ar-paper-text strong { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; }

/* Lo que viene, en una lista */
.ag-lista .vb-cards { display: block; border-top: 1px solid var(--line); }
.ag-lista .vb-card a {
  display: grid;
  grid-template-columns: 8.5rem 44px minmax(0, 1fr);
  column-gap: 1rem;
  align-items: center;
  padding: 0.75rem 0.2rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
.ag-lista .vb-card a:hover { background: var(--soft-2); }
.ag-lista .vb-when { grid-column: 1; grid-row: 1 / span 2; }
.ag-lista .vb-face { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.ag-lista .vb-card :is(strong, .muted) { grid-column: 3; }
@media (max-width: 560px) { .ag-lista .vb-card a { grid-template-columns: 5.6rem 40px minmax(0, 1fr); column-gap: 0.7rem; } }

/* El mapa grande, de lado a lado */
.se-mapa-grande .se-mapa-caja { width: 100vw; margin-left: calc(50% - 50vw); height: clamp(380px, 72vh, 760px); border-radius: 0; }
.se-mapa-grande > .site-label { text-align: center; }

/* Las caras en una fila */
.cr-tira .vb-faces > li { width: 92px; }

/* --- La presentación: más formas y sus opciones ------------------------------ */
.pr-encabezado {
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  line-height: 1.1;
  color: var(--ink);
}
.pr-centrada .pr-firma { text-align: center; }
.site-body-main .pr-firma, .vb-body .pr-firma, .tv-body .pr-firma { margin: -1rem 0 2.2rem; text-align: left; }

/* con una foto al lado */
.pr-foto { margin: 0.5rem 0 3rem; }
@media (min-width: 760px) {
  .pr-foto.con-imagen { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem; align-items: center; }
}
.pr-imagen { margin: 0 0 1.6rem; }
.pr-foto .pr-imagen:not(.is-escudo) img { display: block; width: 100%; aspect-ratio: 4 / 5; max-height: 560px; object-fit: cover; border-radius: 12px; box-shadow: 0 18px 44px var(--shadow-md); }
.pr-imagen.is-escudo { display: grid; place-items: center; padding: 1.4rem; }
.pr-escudo { display: block; width: 100%; max-width: 260px; max-height: 300px; object-fit: contain; }
.pr-foto .pr-texto { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.45; }
@media (min-width: 760px) { .pr-imagen { margin: 0; } }

/* como una postal: la foto con su borde, la línea del medio y el sello */
.pr-postal {
  position: relative;
  max-width: 56rem;
  margin: 1rem auto 3rem;
  padding: 1.6rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 16px 40px var(--shadow);
}
@media (min-width: 760px) {
  .pr-postal.con-imagen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.4rem; align-items: center; }
  .pr-postal.con-imagen .pr-cuerpo { padding-left: 2.4rem; border-left: 1px dashed var(--edge); align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
}
.pr-postal .pr-imagen:not(.is-escudo) img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 8px solid #fbfaf6; box-shadow: 0 4px 14px var(--shadow-md); transform: rotate(-1.5deg); }
.pr-postal .pr-cuerpo { padding-top: 4.4rem; }
/* en una columna, el sello va sobre la esquina de la foto y el texto, justo debajo */
@media (max-width: 759px) { .pr-postal.con-imagen .pr-cuerpo { padding-top: 0.6rem; } }
.pr-postal .pr-texto { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.55; }
.pr-sello {
  position: absolute;
  top: 1.3rem;
  right: 1.3rem;
  display: grid;
  place-items: center;
  width: 62px;
  height: 74px;
  padding: 5px;
  background: radial-gradient(circle at 50% 50%, transparent 3px, var(--card) 3.5px) -5px -5px / 10px 10px, var(--edge);
  transform: rotate(4deg);
}
.pr-sello span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--accent) 22%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  font-family: var(--font-display);
  font-size: 2rem;
  color: color-mix(in srgb, var(--accent) 80%, var(--ink));
}

/* la primera frase en grande, como la entradilla de un reportaje */
.pr-grande { max-width: 48rem; margin: 0.5rem 0 3rem; font-size: 1.06rem; line-height: 1.7; color: var(--text); }
.pr-grande .pr-texto > p:first-child {
  margin-bottom: 0.7em;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  line-height: 1.2;
  color: var(--text-strong);
  text-wrap: pretty;
}

/* con el título a un lado, como una revista */
.pr-titulo { margin: 0.5rem 0 3rem; padding-top: 1.4rem; border-top: 1px solid var(--ink); font-size: 1.08rem; line-height: 1.7; }
.pr-titulo .pr-encabezado { font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1; }
@media (min-width: 760px) {
  .pr-titulo .pr-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 3rem; }
  .pr-titulo .pr-encabezado { grid-row: 1 / span 4; }
  .pr-titulo .pr-cuerpo > :not(.pr-encabezado) { grid-column: 2; }
}

/* centrada, entre dos adornos */
.pr-centrada { max-width: 40rem; margin: 1rem auto 3rem; text-align: center; font-size: 1.14rem; line-height: 1.75; }
.pr-floron { margin: 0 0 1rem; font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--accent); }
.pr-centrada .pr-floron:last-child { margin: 1rem 0 0; font-size: 1.1rem; }
.pr-centrada .site-cta { justify-content: center; }

/* un pergamino: colores fijos, como una foto, de día y de noche */
.pr-pergamino {
  --ink: #3b2e1a;
  --text: #4a3b22;
  --text-strong: #2d2313;
  --muted: #6b5a3a;
  --line: rgba(110, 80, 40, 0.3);
  --edge: rgba(110, 80, 40, 0.45);
  --on-ink: #f6ecd2;
  --paper: #f3e6c6;
  position: relative;
  max-width: 46rem;
  margin: 1rem auto 3rem;
  padding: 3rem 3.4rem 2.6rem;
  color: var(--text);
  background: radial-gradient(ellipse at center, #f7eed7 50%, #e8d6ac 100%);
  border-radius: 3px;
  box-shadow: inset 0 0 50px rgba(120, 85, 35, 0.35), 0 16px 40px var(--shadow);
  outline: 1px solid rgba(110, 80, 40, 0.4);
  outline-offset: -16px;
  font-family: var(--font-display);
  font-size: 1.28rem;
  line-height: 1.6;
  text-align: center;
}
.pr-pergamino .pr-encabezado { color: var(--ink); }
.pr-pergamino .pr-texto > p:first-child::first-letter { font-size: 1.9em; line-height: 1; color: #8a3b24; }
.pr-pergamino .site-cta { justify-content: center; font-family: var(--font-body); font-size: 0.92rem; }
.pr-pergamino .pr-firma { text-align: center; }

/* escrita a máquina en una hoja */
.pr-maquina {
  max-width: 44rem;
  margin: 1rem auto 3rem;
  padding: 2.6rem 2.8rem 2.2rem;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 14px 36px var(--shadow);
  font-family: "Courier Prime", "Courier New", ui-monospace, monospace;
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--text-strong);
}
.pr-maquina .pr-encabezado { font-family: inherit; font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.pr-maquina .pr-firma { font-family: inherit; font-style: normal; font-size: 0.98rem; }
.pr-maquina .site-cta { font-family: var(--font-body); }
@media (max-width: 560px) {
  .pr-postal, .pr-maquina { padding: 1.4rem 1.1rem; }
  .pr-pergamino { padding: 2.4rem 1.6rem 2rem; outline-offset: -10px; }
}

/* --- Las opciones de la presentación ------------------------------------------
   (aspecto.SECCIONES["presentacion"]["opciones"]: cada una pone en la sección
   <clase>-<valor>). Van al final de todo: pueden con lo que trae cada forma.
   «El texto» es la letra de la presentación: .site-about en las de texto,
   .pr-texto en las demás y la propia sección en «Recordando a alguien». */

/* dónde va el texto, y el bloque entero si es más estrecho que la página */
.pr-al-izquierda { margin-left: 0; margin-right: auto; text-align: left; }
.pr-al-centro { margin-left: auto; margin-right: auto; text-align: center; }
.pr-al-derecha { margin-left: auto; margin-right: 0; text-align: right; }
:is(.pr-al-izquierda, .pr-al-centro, .pr-al-derecha) :is(.site-about, .pr-texto, .pr-firma, .pr-encabezado) { text-align: inherit; }
.pr-al-izquierda .site-about { margin-left: 0; margin-right: auto; }
.pr-al-centro .site-about { margin-left: auto; margin-right: auto; }
.pr-al-derecha .site-about { margin-left: auto; margin-right: 0; }
.pr-al-izquierda .site-cta { justify-content: flex-start; }
.pr-al-centro .site-cta { justify-content: center; }
.pr-al-derecha .site-cta { justify-content: flex-end; }
.pr-al-justificado :is(.site-about, .pr-texto), .me-about.pr-al-justificado { text-align: justify; hyphens: auto; }

/* el ancho: el bloque, y el texto de dentro sin tope propio */
.pr-anc-estrecho { max-width: 32rem; }
.pr-anc-medio { max-width: 46rem; }
.pr-anc-completo { max-width: none; }
:is(.pr-anc-estrecho, .pr-anc-medio, .pr-anc-completo) :is(.site-about, .pr-texto, .pr-cuerpo) { max-width: none; }

/* el tamaño de la letra del texto y el del título */
.pr-med-pequena .site-about { font-size: 1.2rem; }
.pr-med-pequena .pr-texto { font-size: 0.86em; }
.me-about.pr-med-pequena { font-size: 1.1rem; }
.pr-med-grande .site-about { font-size: 1.95rem; }
.pr-med-grande .pr-texto { font-size: 1.22em; }
.me-about.pr-med-grande { font-size: 1.6rem; }
.pr-med-enorme .site-about { font-size: clamp(2.1rem, 4.2vw, 2.9rem); line-height: 1.25; }
.pr-med-enorme .pr-texto { font-size: 1.5em; line-height: 1.35; }
.me-about.pr-med-enorme { font-size: clamp(1.9rem, 3.6vw, 2.4rem); line-height: 1.35; }
.pr-tit-pequeno .pr-encabezado { font-size: 1.35rem; }
.pr-tit-grande .pr-encabezado { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.02; }
.pr-tit-enorme .pr-encabezado { font-size: clamp(3rem, 8vw, 5.6rem); line-height: 0.95; letter-spacing: -0.01em; }

/* el tipo de letra y el espacio entre líneas */
.pr-let-titulos, .pr-let-titulos :is(.site-about, .pr-texto) { font-family: var(--font-display); font-style: normal; }
.pr-let-texto, .pr-let-texto :is(.site-about, .pr-texto) { font-family: var(--font-body); font-style: normal; }
.pr-let-cursiva, .pr-let-cursiva :is(.site-about, .pr-texto) { font-style: italic; }
.pr-let-maquina, .pr-let-maquina :is(.site-about, .pr-texto) { font-family: "Courier Prime", "Courier New", ui-monospace, monospace; font-style: normal; }
.pr-int-apretado, .pr-int-apretado :is(.site-about, .pr-texto) { line-height: 1.28; }
.pr-int-amplio, .pr-int-amplio :is(.site-about, .pr-texto) { line-height: 1.95; }

/* en columnas: el texto, sin el tope de ancho de una sola */
.pr-cols-dos :is(.site-about, .pr-texto), .me-about.pr-cols-dos { columns: 2 15rem; column-gap: 2.6rem; }
.pr-cols-tres :is(.site-about, .pr-texto), .me-about.pr-cols-tres { columns: 3 12rem; column-gap: 2.2rem; }
:is(.pr-cols-dos, .pr-cols-tres) .site-about { max-width: none; }
:is(.pr-cols-dos, .pr-cols-tres) :is(.site-about, .pr-texto) p { break-inside: avoid-column; }
.me-about:is(.pr-cols-dos, .pr-cols-tres) > :is(.pr-encabezado, .pr-firma) { column-span: all; }

/* el color del texto (el pergamino trae los suyos y estos salen de ellos) */
.pr-col-suave, .pr-col-suave :is(.site-about, .pr-texto) { color: var(--muted); }
.pr-col-fuerte, .pr-col-fuerte :is(.site-about, .pr-texto) { color: var(--ink); }
.pr-col-acento, .pr-col-acento :is(.site-about, .pr-texto, .pr-encabezado) { color: color-mix(in srgb, var(--accent) 78%, var(--ink)); }

/* el fondo (no en el pergamino, que ya es uno) */
:is(.pr-fon-suave, .pr-fon-color, .pr-fon-borde):not(.pr-pergamino) {
  padding: clamp(1.4rem, 3.4vw, 2.6rem);
  margin-bottom: 2.8rem;
  border-radius: 14px;
}
.pr-fon-suave:not(.pr-pergamino) { background: var(--soft); }
.pr-fon-color:not(.pr-pergamino) { background: color-mix(in srgb, var(--accent) 12%, var(--paper)); }
.pr-fon-borde:not(.pr-pergamino) { border: 1px solid var(--edge); }
:is(.pr-fon-suave, .pr-fon-color, .pr-fon-borde) :is(.site-about, .pr-texto > p):last-child { margin-bottom: 0; }
.me-about:is(.pr-fon-suave, .pr-fon-color, .pr-fon-borde) > p:last-child { margin-bottom: 0; }
:is(.pr-fon-suave, .pr-fon-color, .pr-fon-borde) .site-body-main .pr-firma,
.site-body-main:is(.pr-fon-suave, .pr-fon-color, .pr-fon-borde) .pr-firma { margin: 0.8rem 0 0; }

/* el aire alrededor */
.pr-esp-poco { margin-top: 0.4rem; margin-bottom: 1.4rem; }
.pr-esp-poco .site-about { margin-bottom: 1rem; }
.pr-esp-mucho { margin-top: 4.5rem; margin-bottom: 5rem; }

/* --- Primeros pasos: la visita guiada de un árbol vacío (tutorial.js) ------
   Un <dialog> a pantalla entera y transparente: la sombra la hace el hueco
   (.tuto-foco), que con una sombra enorme oscurece todo menos la pestaña de
   la que habla la tarjeta. Las tarjetas están apiladas en la misma celda, así
   que la carta mide lo que la más alta y no salta al pasar. Las escenas miden
   en em sobre una letra que sigue al ancho de la carta (cqi). */
html.con-tutorial { overflow: hidden; }
dialog.tuto {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--font-ui);
  overflow: hidden;
}
dialog.tuto[open] { display: grid; place-items: center; }
dialog.tuto::backdrop { background: transparent; }
.tuto button, .tuto .btn { margin: 0; font-family: var(--font-ui); }
.tuto-foco {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-radius: 14px;
  box-shadow: 0 0 0 200vmax rgba(8, 8, 8, 0.56);
  pointer-events: none;
  transition: left 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
:root[data-theme="dark"] .tuto-foco { box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.66); }
.tuto-foco.sin-anim { transition: none; }
/* el aro: uno quieto y otro que late, para que el ojo vaya arriba */
.tuto-foco.hay::before, .tuto-foco.hay::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid #fff;
}
/* crece lo mismo por los cuatro lados, sea una pestaña o la fila entera */
.tuto-foco.hay::after { animation: tuto-late 1.9s ease-out infinite; }
@keyframes tuto-late {
  0% { inset: -2px; opacity: 0.9; }
  70%, 100% { inset: -14px; opacity: 0; border-radius: 22px; }
}

.tuto-carta {
  container: tuto / inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(35rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  animation: tuto-sube 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
:root[data-theme="dark"] .tuto-carta { border-color: var(--edge); }
@keyframes tuto-sube { from { opacity: 0; transform: translateY(18px) scale(0.98); } }

.tuto-cabeza { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 0.8rem 0 1.4rem; }
.tuto-pasos { flex: 1; display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tuto-pasos li { flex: 1; display: flex; }
.tuto-pasos button {
  position: relative;
  flex: 1;
  height: 20px;
  padding: 0;
  border-radius: 0;
  background: none;
}
.tuto-pasos button::before {
  content: "";
  position: absolute;
  inset: 8px 0;
  border-radius: 99px;
  background: var(--line);
  transition: background 0.25s;
}
.tuto-pasos button:hover { background: none; }
.tuto-pasos button:hover::before { background: var(--edge-strong); }
.tuto-pasos button.visto::before { background: var(--edge-strong); }
.tuto-pasos button.aqui::before { background: var(--ink); }
.tuto-x {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
}
.tuto-x:hover { background: var(--soft); color: var(--ink); }

.tuto-mazo { display: grid; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.tuto-tarjeta { grid-area: 1 / 1; min-width: 0; padding: 0.6rem 1.4rem 0.5rem; }
.tuto-tarjeta:not(.es-esta) { visibility: hidden; }
.tuto-tarjeta.entra { animation: tuto-entra 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes tuto-entra { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 26px)); } }
.tuto-kicker {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.tuto-tarjeta h2 {
  margin: 0 0 0.55rem;
  font: 400 clamp(1.55rem, 4.8vw, 2.05rem)/1.06 var(--font-ui-display);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.tuto-tarjeta p { margin: 0 0 0.65rem; font-size: 0.93rem; line-height: 1.55; color: var(--text); }
.tuto-tarjeta p.tuto-dato {
  padding-left: 0.8rem;
  border-left: 2px solid var(--line);
  font-size: 0.84rem;
  color: var(--muted);
}
.tuto .te-pista { color: var(--ink); font-weight: 500; }
.tuto-tarjeta p.tuto-donde {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.1rem 0 0.4rem;
  padding: 0.3rem 0.75rem 0.3rem 0.55rem;
  border-radius: 999px;
  background: var(--soft);
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--ink);
}
.tuto-donde svg { flex: none; color: var(--muted); }
.tuto .en-menu, .tuto.es-estrecho .en-barra { display: none; }
.tuto.es-estrecho .en-menu { display: inline; }
.tuto-tarjeta p.tuto-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.2rem 0 0.9rem; }

.tuto-pie {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1rem 0.9rem 1.4rem;
  border-top: 1px solid var(--line);
}
.tuto-saltar { padding: 0.4rem 0; border-radius: 0; background: none; color: var(--muted); font-size: 0.86rem; }
.tuto-saltar:hover { background: none; color: var(--ink); text-decoration: underline; }
.tuto-cuenta {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  color: var(--muted);
}
.tuto-saltar:not([hidden]) + .tuto-cuenta { padding-left: 0.5rem; }
.tuto-pie .btn { padding: 0.55rem 1.15rem; }
.tuto-pie .btn:disabled { opacity: 0.35; cursor: default; background: transparent; }

@media (max-width: 640px) {
  dialog.tuto[open] { place-items: end center; }
  /* arriba queda a la vista la barra, con el botón del menú iluminado */
  .tuto-carta { width: calc(100% - 1rem); max-height: calc(100% - 4.75rem); margin-bottom: 0.5rem; border-radius: 20px; }
  .tuto-cabeza { padding-left: 1.1rem; }
  .tuto-tarjeta { padding: 0.45rem 1.1rem 0.3rem; }
  .tuto-pie { padding: 0.65rem 0.8rem 0.75rem 1.1rem; }
  .tuto-cuenta { visibility: hidden; }
}

/* Las escenas. Comparten el marco, los botones de elegir y las caras */
.tuto-escena {
  position: relative;
  margin: 0.25rem 0 1rem;
  aspect-ratio: 12 / 5;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--soft);
  overflow: hidden;
  font-size: clamp(0.62rem, 2.15cqi, 0.8rem);
  line-height: 1.3;
  color: var(--ink);
}
@container tuto (max-width: 30rem) { .tuto-escena { aspect-ratio: 16 / 9; } }
.tuto-escena svg { overflow: visible; }
.tuto-escena small { font-size: 0.9em; }
:is(.te-elige, .te-estilos) {
  display: inline-flex;
  gap: 0.2em;
  padding: 0.2em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
}
:is(.te-elige, .te-estilos) button {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.4em 0.8em;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 1em;
  line-height: 1.2;
}
:is(.te-elige, .te-estilos) button:hover { background: var(--soft-hover); color: var(--ink); }
:is(.te-elige, .te-estilos) button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.te-elige svg {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.te-cara {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.9em;
  height: 2.9em;
  border-radius: 50%;
  background: var(--photo);
  color: var(--text);
  font-weight: 600;
  font-size: 0.95em;
  letter-spacing: 0.02em;
}
@keyframes tuto-pop { from { opacity: 0.3; transform: scale(0.86); } }
@keyframes tuto-asoma { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 1. Hola: el nombre del árbol y sus partes, que llevan a su tarjeta */
.te-hola {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  padding: 1em 1.2em;
  background: radial-gradient(120% 90% at 50% 0%, var(--card), var(--soft));
}
.te-hola-nombre {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  font: 400 2.5em/1.05 var(--font-ui-display);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}
.te-hola-partes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45em; max-width: 36em; margin: 0; padding: 0; list-style: none; }
.te-hola-partes button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45em 0.85em 0.45em 0.65em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 1.05em;
  box-shadow: 0 1px 2px var(--shadow);
}
.te-hola-partes button:hover { background: var(--soft-hover); }
.te-hola-partes svg {
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--muted);
}
.es-esta .te-hola-partes li { animation: tuto-asoma 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.te-hola-partes li:nth-child(2) { animation-delay: 50ms; }
.te-hola-partes li:nth-child(3) { animation-delay: 100ms; }
.te-hola-partes li:nth-child(4) { animation-delay: 150ms; }
.te-hola-partes li:nth-child(5) { animation-delay: 200ms; }
.te-hola-partes li:nth-child(6) { animation-delay: 250ms; }
.te-hola-partes li:nth-child(7) { animation-delay: 300ms; }
.te-hola-partes li:nth-child(8) { animation-delay: 350ms; }

/* 2. El árbol: un trozo de lienzo, con sus fichas y sus huecos. Las fichas
   van en las coordenadas del SVG de las líneas (480 × 200) */
.te-arbol {
  display: grid;
  place-items: center;
  background-color: var(--paper);
  background-image: radial-gradient(var(--line) 1px, transparent 1.2px);
  background-size: 16px 16px;
}
.te-lienzo { position: relative; width: 100%; aspect-ratio: 12 / 5; }
.te-arbol-lineas { position: absolute; inset: 0; width: 100%; height: 100%; }
.te-arbol-lineas path {
  fill: none;
  stroke: var(--edge-strong);
  stroke-width: 1.5;
  stroke-dasharray: var(--largo, 200);
  stroke-dashoffset: var(--largo, 200);
  opacity: 0;
  transition: stroke-dashoffset 0.5s ease, opacity 0.15s;
}
.te-arbol-lineas path.se-ve { stroke-dashoffset: 0; opacity: 1; }
.te-ficha {
  position: absolute;
  left: calc(var(--x) / 4.8 * 1%);
  top: calc(var(--y) / 2 * 1%);
  width: 25%;
  height: 20%;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--ink);
  font-size: 1.05em;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 2px 8px var(--shadow);
}
.te-ficha.is-tu { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
button.te-ficha:not(.is-puesta) {
  border: 1.5px dashed var(--edge);
  background: color-mix(in srgb, var(--card) 70%, transparent);
  color: var(--muted);
  font-weight: 500;
  box-shadow: none;
}
.es-esta button.te-ficha:not(.is-puesta) { animation: tuto-invita 2.4s ease-in-out infinite; }
@keyframes tuto-invita { 50% { border-color: var(--edge-strong); color: var(--text); } }
button.te-ficha:not(.is-puesta):hover { border-color: var(--ink); background: var(--card); color: var(--ink); animation: none; }
button.te-ficha.is-puesta { cursor: default; animation: tuto-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
button.te-ficha.is-puesta:hover { background: var(--card); }
.te-otra {
  position: absolute;
  right: 0.8em;
  bottom: 0.7em;
  padding: 0.35em 0.85em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 0.95em;
}
.te-otra:hover { background: var(--soft-hover); }

/* 3. Personas: una ficha pequeña, con sus pestañas y su visibilidad */
.te-persona { display: flex; flex-direction: column; gap: 0.6em; padding: 0.9em 1.2em; background: var(--card); }
.te-persona-cabeza { display: flex; align-items: center; gap: 0.75em; }
.te-persona-quien { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1em; }
.te-persona-quien b {
  overflow: hidden;
  font: 400 1.65em/1.1 var(--font-ui-display);
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}
.te-persona-quien small { color: var(--muted); }
.te-pestanas { display: flex; gap: 1.2em; border-bottom: 1px solid var(--line); }
.te-pestanas button {
  margin-bottom: -1px;
  padding: 0.3em 0 0.5em;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font-size: 1em;
}
.te-pestanas button:hover { background: none; color: var(--ink); }
.te-pestanas button[aria-selected="true"] { border-bottom-color: var(--ink); color: var(--ink); }
.te-panel { flex: 1; min-height: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.45em; }
.te-panel[hidden] { display: none; }
.te-panel > span { padding: 0.3em 0.75em; border-radius: 999px; background: var(--soft); color: var(--text); }
.te-panel q { font: italic 400 1.4em/1.25 var(--font-ui-display); color: var(--text-strong); quotes: "«" "»"; }
.te-fotos { flex-wrap: nowrap; }
.te-fotos i { flex: 1; height: 100%; max-height: 4.2em; border-radius: 6px; background: linear-gradient(150deg, var(--photo), var(--soft-hover)); }
.te-fotos i:nth-child(2n) { background: linear-gradient(200deg, var(--soft-hover), var(--photo)); }
.te-sitios { flex-wrap: nowrap; gap: 0.4em; }
.te-sitios > span { flex: none; padding: 0; background: none; color: var(--ink); font-weight: 500; }
.te-sitios i { flex: 1; min-width: 0.8em; height: 0; border-top: 1.5px dashed var(--edge-strong); }
.tuto-tarjeta p.te-persona-nota { margin: 0; font-size: 0.95em; line-height: 1.3; color: var(--muted); }

/* 4. Eventos: la cronología en pequeño, con «c.» de verdad */
.te-crono { display: flex; align-items: center; padding: 0.7em 1.2em; background: var(--card); }
.te-crono ol { width: 100%; margin: 0; padding: 0; list-style: none; }
.te-crono li { display: flex; align-items: center; gap: 0.9em; }
.te-ano {
  flex: none;
  width: 2.4em;
  font: 400 1.3em/1 var(--font-ui-display);
  text-align: right;
  color: var(--ink);
}
.te-hecho {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  padding: 0.45em 0 0.45em 0.95em;
  border-left: 1.5px solid var(--line);
}
.te-hecho b { display: flex; align-items: center; gap: 0.4em; font-size: 1.05em; font-weight: 600; color: var(--ink); white-space: nowrap; }
.te-hecho b svg { flex: none; width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; color: var(--muted); }
.te-hecho small { display: flex; align-items: center; gap: 0.3em; color: var(--muted); }
.te-hueco .te-hecho { padding-top: 0.3em; padding-bottom: 0.3em; border-left: 1.5px dashed var(--edge-strong); font-size: 0.92em; font-style: italic; color: var(--muted); }
.te-gente { display: inline-flex; padding-left: 0.3em; }
.te-gente i {
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  margin-left: -0.35em;
  border: 1.5px solid var(--card);
  border-radius: 50%;
  background: var(--photo);
  color: var(--text);
  font-size: 0.82em;
  font-style: normal;
  font-weight: 600;
}
label.te-fecha {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin: 0;
  padding: 0.25em 0.3em 0.25em 0.25em;
  border-radius: 10px;
  background: var(--soft);
  color: var(--ink);
  font-size: 1em;
  cursor: pointer;
}
.te-campo {
  min-width: 6.6em;
  padding: 0.3em 0.6em;
  border: 1px solid var(--edge);
  border-radius: 7px;
  background: var(--paper);
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: min-width 0.2s;
}
.te-campo.es-ano { min-width: 3.8em; }
label.te-fecha input { width: auto; margin: 0; padding: 0; accent-color: var(--ink); }

/* 5. El mapa: mar, dos orillas y la línea del tiempo debajo */
.te-mapa { display: flex; flex-direction: column; background: var(--soft); }
.te-mapa svg { flex: 1; min-height: 0; width: 100%; display: block; }
.te-tierra { fill: var(--card); stroke: var(--edge); stroke-width: 1; }
.te-reja { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.te-ruta {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: var(--largo, 600);
  stroke-dashoffset: var(--largo, 600);
  opacity: 0.75;
  transition: stroke-dashoffset 0.8s ease;
}
.te-ruta.se-ve { stroke-dashoffset: 0; }
.te-pin { opacity: 0; transition: opacity 0.3s; }
.te-pin.se-ve { opacity: 1; }
.te-pin circle { fill: var(--ink); stroke: var(--card); stroke-width: 2; }
.te-pin .te-onda { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.te-pin.se-ve .te-onda { animation: tuto-onda 0.9s ease-out; }
@keyframes tuto-onda { from { opacity: 0.6; transform: scale(1); } to { opacity: 0; transform: scale(3.4); } }
.te-pin text {
  font: 500 12px var(--font-ui);
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--soft);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
.te-mapa-tiempo {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.5em 0.9em;
  border-top: 1px solid var(--line);
  background: var(--card);
}
.te-play {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.3em;
  height: 2.3em;
  padding: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
}
.te-play svg { width: 1.1em; height: 1.1em; fill: currentColor; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.te-play .is-pausa, .en-marcha .te-play .is-play { display: none; }
.en-marcha .te-play .is-pausa { display: block; }
.te-mapa-tiempo input[type="range"] { flex: 1; width: auto; margin: 0; padding: 0; border: 0; background: none; accent-color: var(--ink); }
.te-mapa-tiempo output { min-width: 2.2em; font: 400 1.45em/1 var(--font-ui-display); text-align: right; font-variant-numeric: tabular-nums; }

/* 6. El sitio: una ventana con la portada en tres de sus estilos */
.te-sitio { display: flex; flex-direction: column; align-items: center; gap: 0.6em; padding: 0.85em 1em 0.7em; }
.te-web {
  flex: 1;
  min-height: 0;
  width: min(100%, 27em);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 10px 30px var(--shadow);
  overflow: hidden;
  transition: background-color 0.3s;
}
.te-web-barra { display: flex; align-items: center; gap: 0.3em; padding: 0.4em 0.6em; border-bottom: 1px solid var(--line); background: var(--soft); }
.te-web-barra i { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--edge); }
.te-web-barra span { flex: 0 1 11em; margin-left: 0.5em; padding: 0.1em 0.8em; border-radius: 99px; background: var(--paper); color: var(--muted); font-size: 0.8em; }
.te-web-portada {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2em;
  padding: 0.5em 1.2em;
  overflow: hidden;
  transition: background 0.3s;
}
.te-web-kicker { font-size: 0.68em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.te-web-titulo { overflow: hidden; font: 400 2em/1.05 var(--font-ui-display); text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.te-web-cifras { font-size: 0.8em; color: var(--muted); }
.te-web-escudo { display: none; }
.te-web-cosas { display: flex; gap: 0.5em; padding: 0 1.2em 0.8em; }
.te-web-cosas i { flex: 1; height: 2.4em; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); }
/* Revista: la foto a sangre, el escudo y el título encima (fijo: va sobre una foto) */
.te-sitio[data-estilo="revista"] .te-web-portada {
  align-items: center;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.6)),
    radial-gradient(70% 90% at 30% 30%, #8a8172, transparent),
    linear-gradient(135deg, #5d564c, #252422 70%);
}
.te-sitio[data-estilo="revista"] .te-web-titulo { color: #fff; font-size: 2.3em; }
.te-sitio[data-estilo="revista"] :is(.te-web-kicker, .te-web-cifras) { color: rgba(255, 255, 255, 0.78); }
.te-sitio[data-estilo="revista"] .te-web-escudo {
  display: block;
  width: 1.5em;
  height: 1.8em;
  margin-bottom: 0.25em;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 0.2em 0.2em 50% 50% / 0.2em 0.2em 65% 65%;
}
.te-sitio[data-estilo="revista"] .te-web-cosas { display: none; }
/* Álbum: papel crema, título de álbum y polaroids */
.te-sitio[data-estilo="album"] .te-web { background: var(--album-paper); }
.te-sitio[data-estilo="album"] .te-web-portada { align-items: center; text-align: center; }
.te-sitio[data-estilo="album"] .te-web-titulo { font-style: italic; color: var(--album-ink); }
.te-sitio[data-estilo="album"] :is(.te-web-kicker, .te-web-cifras) { color: var(--album-accent); }
.te-sitio[data-estilo="album"] .te-web-cosas { justify-content: center; gap: 0.9em; }
.te-sitio[data-estilo="album"] .te-web-cosas i {
  flex: none;
  width: 3.2em;
  height: 3.5em;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(var(--photo), var(--photo)) 50% 0.25em / calc(100% - 0.5em) 68% no-repeat, var(--album-card);
  box-shadow: 0 2px 6px rgba(var(--album-shadow), 0.28);
  transform: rotate(-4deg);
}
.te-sitio[data-estilo="album"] .te-web-cosas i:nth-child(2) { transform: rotate(3deg) translateY(-0.3em); }
.te-sitio[data-estilo="album"] .te-web-cosas i:nth-child(3) { transform: rotate(-1.5deg); }

/* 7. Entradas: el editor y la ficha que se entera */
.te-entrada { display: flex; align-items: center; justify-content: center; gap: 1em; padding: 0.8em 1.1em; }
.te-editor {
  flex: 1;
  min-width: 0;
  max-width: 22em;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  padding: 0.8em 1em;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 8px 24px var(--shadow);
  overflow: hidden;
}
.te-editor-titulo { font: 400 1.5em/1.1 var(--font-ui-display); color: var(--ink); }
.te-raya { flex: none; display: block; width: 100%; height: 0.45em; border-radius: 99px; background: var(--soft-hover); }
.te-raya.is-corta { width: 62%; }
.te-raya.is-media { width: 82%; }
.te-bloque {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.35em 0.55em;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  animation: tuto-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.te-bloque[hidden] { display: none; }
.te-bloque .te-cara { width: 2.2em; height: 2.2em; font-size: 0.85em; }
.te-bloque b { display: block; font-size: 0.95em; color: var(--ink); }
.te-bloque small { color: var(--muted); }
.te-bloque-foto i { flex: none; width: 3.2em; height: 2.1em; border-radius: 4px; background: linear-gradient(160deg, #8d8577, #3d3a35); }
.te-editor-mas { display: flex; gap: 0.4em; margin-top: 0.35em; }
.te-editor-mas button { padding: 0.35em 0.8em; border-radius: 999px; font-size: 0.92em; }
.te-editor-mas button:disabled { display: none; }
.te-cuenta-en {
  flex: none;
  width: 9.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
  padding: 0.9em 0.8em;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 10px 28px var(--shadow-md);
  text-align: center;
  animation: tuto-asoma 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.te-cuenta-en[hidden] { display: none; }
.te-cuenta-en b { font: 400 1.3em/1.1 var(--font-ui-display); color: var(--ink); }
.te-cuenta-en small { margin-top: 0.35em; font-size: 0.68em; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.te-cuenta-en-post { font-size: 0.92em; text-decoration: underline; text-underline-offset: 2px; color: var(--ink); }

/* 8. Quién lo ve: privado o público, y quién entra en cada caso */
.te-quien { display: flex; flex-direction: column; justify-content: center; gap: 0.6em; padding: 0.8em 1.2em; background: var(--card); }
.te-quien .te-elige { align-self: flex-start; }
.te-quien ul { display: flex; flex-direction: column; gap: 0.2em; margin: 0; padding: 0; list-style: none; }
.te-quien li { display: flex; align-items: center; gap: 0.75em; padding: 0.3em 0.4em; transition: opacity 0.3s; }
.te-quien li > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.te-quien li b { font-weight: 600; color: var(--ink); }
.te-quien li small { color: var(--muted); }
.te-quien li[data-estado="no"] { opacity: 0.45; }
.te-caras { flex: none; display: inline-flex; width: 4.3em; }
.te-caras i {
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  margin-left: -0.5em;
  border: 2px solid var(--card);
  border-radius: 50%;
  background: var(--photo);
  color: var(--text);
  font-size: 0.85em;
  font-style: normal;
  font-weight: 600;
}
.te-caras i:first-child { margin-left: 0; }
.te-caras svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.te-si {
  flex: none;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  background: var(--ok-bg);
  color: var(--ok);
  font-size: 0.88em;
  font-weight: 500;
  transition: background-color 0.25s, color 0.25s;
}
.te-quien li:is([data-estado="no"], [data-estado="igual"]) .te-si { background: var(--soft); color: var(--muted); }

/* 9. Exportar: una lámina en la pared, que cambia */
.te-pared { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7em; padding: 0.8em; }
.te-cuadro {
  flex: 1;
  min-height: 0;
  aspect-ratio: 5 / 6;
  display: grid;
  margin: 0;
  padding: 0.5em;
  border: 0.35em solid var(--ink);
  background: var(--card);
  box-shadow: 0 12px 26px var(--shadow-md), 0 2px 4px var(--shadow);
}
.te-lam { grid-area: 1 / 1; width: 100%; height: 100%; opacity: 0; transition: opacity 0.35s; }
.te-pared[data-lamina="arbol"] .te-lam[data-lamina="arbol"],
.te-pared[data-lamina="cronologia"] .te-lam[data-lamina="cronologia"],
.te-pared[data-lamina="mapa"] .te-lam[data-lamina="mapa"] { opacity: 1; }
.te-lam text { font: 400 8.5px var(--font-ui-display); fill: var(--ink); }
.te-lam path { fill: none; stroke: var(--ink); stroke-width: 0.8; }
.te-lam rect { fill: var(--soft); stroke: var(--ink); stroke-width: 0.7; }
.te-lam circle { fill: var(--ink); }
.te-lam .te-lam-tierra { fill: var(--soft); stroke: var(--edge-strong); stroke-width: 0.6; }

/* 10. Empieza: el símbolo de 1199, que es tú, tus padres y tus abuelos */
.te-semilla { display: grid; place-items: center; padding: 0.6em; background: var(--card); }
.te-semilla svg { width: 100%; height: 100%; }
.te-semilla path { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: square; }
.te-raiz { fill: var(--ink); }
.te-hojas circle { fill: var(--card); stroke: var(--ink); stroke-width: 1.5; }
.te-semilla text { font: 500 12.5px var(--font-ui); fill: var(--muted); }
.te-semilla text.te-tu { fill: var(--ink); font-weight: 600; }
/* lo que tarda se dibuja al llegar; quieto (sin animación), se ve entero */
.crece .te-semilla-rama { animation: tuto-traza 0.6s ease both; animation-delay: calc(var(--i) * 0.5s + 0.15s); }
.crece .te-tarde { animation: tuto-asoma 0.4s ease both; animation-delay: calc(var(--i) * 0.5s + 0.55s); }
.crece .te-hojas { animation: tuto-asoma 0.4s ease both; animation-delay: 1.4s; }
@keyframes tuto-traza {
  from { stroke-dasharray: 200; stroke-dashoffset: 200; }
  to { stroke-dasharray: 200; stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tuto *, .tuto *::before, .tuto *::after { animation: none !important; transition: none !important; }
}

/* el árbol vacío: qué hacer, y la visita guiada. Sin nadie, ni el estilo de
   las fichas ni compartir tienen sentido */
.tree-stage:has(> .tree-empty:not([hidden])) > :is(.tree-panel, .stage-share) { display: none; }
.tree-empty-in { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; max-width: 26rem; padding: 0 1.2rem; text-align: center; }
.tree-empty-in h2 { margin: 0 0 0.2rem; font: 400 2rem/1.1 var(--font-ui-display); color: var(--ink); }
.tree-empty-in p { margin: 0; color: var(--muted); }
.tree-empty-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.8rem; }
.tree-empty-acts .btn { margin: 0; }

/* «En beta» (_beta.html): las páginas de exportar, que se están puliendo */
.beta-aviso { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.9rem 0 0; padding: 0.6rem 0.85rem;
  border: 1px solid var(--note-line); border-radius: 10px; background: var(--note-bg); color: var(--text-strong);
  font-size: 0.93rem; line-height: 1.45; max-width: 46rem; }
.beta-aviso a { color: inherit; }
.beta-chip { display: inline-flex; align-items: center; flex: none; padding: 0.1rem 0.5rem; border-radius: 999px;
  border: 1px solid currentColor; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  line-height: 1.5; color: var(--text-strong); text-decoration: none; }
.beta-aviso .beta-chip { margin-top: 0.1rem; }
a.beta-chip:hover { background: var(--note-bg); }

/* Solo en un ordenador (_solo_pc.html): el libro y las láminas se diseñan, de
   momento, con pantalla grande y ratón. En una más estrecha, o en una de tocar
   sin ratón (móvil, tableta), en lugar del editor sale el aviso. El mismo
   criterio está en static/libro/arranque.js (para no arrancar el editor). */
.solo-pc, .solo-pc-aviso { display: none; }
@media (max-width: 1023px), (hover: none) and (pointer: coarse) {
  .solo-pc-fuera { display: none !important; }
  .solo-pc { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem;
    max-width: 34rem; margin: 3rem auto; padding: 0 1.25rem; color: var(--text-strong); }
  .solo-pc svg { color: var(--muted); margin-bottom: 0.4rem; }
  .solo-pc h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 0.4rem; }
  .solo-pc p { margin: 0 0 0.6rem; font-size: 1.02rem; line-height: 1.5; }
  .solo-pc .btn { margin-top: 0.8rem; }
  .solo-pc-aviso { display: block; margin: 0.8rem 0 0; padding: 0.6rem 0.85rem; border-radius: 10px;
    background: var(--note-bg); border: 1px solid var(--note-line); font-size: 0.95rem; }
}

/* La dirección del árbol (tree_settings.html, direccion.py): el principio del
   enlace, fijo, y el nombre que se escribe, en una sola caja */
.aj-direccion { display: flex; align-items: stretch; max-width: 34rem; border: 1px solid var(--edge); border-radius: 8px;
  background: var(--paper); overflow: hidden; }
.aj-direccion:focus-within { outline: 2px solid var(--ink); outline-offset: 1px; }
.aj-direccion-base { display: flex; align-items: center; padding: 0 0.1rem 0 0.7rem; color: var(--muted);
  white-space: nowrap; font-size: 0.95rem; }
/* (con el id: tiene que poder más que el estilo de todos los campos de ajustes) */
.aj-direccion #nombre { border: 0; outline: 0; margin: 0; min-width: 0; flex: 1; padding-left: 0.05rem; background: transparent; box-shadow: none; }
@media (max-width: 520px) { .aj-direccion { flex-direction: column; } .aj-direccion-base { padding: 0.45rem 0.7rem 0; }
  .aj-direccion #nombre { padding-left: 0.7rem; } }

/* --- Ajustes: la cabecera, las cifras, el plan y los archivos ------------------
   (account.html, archivos.html, compras.html, tree_settings.html; piezas en
   _ajustes.html) */
.aj-hero {
  position: relative; overflow: hidden;
  padding: 1.8rem 2rem 1.6rem; border: 1px solid var(--line); border-radius: 24px;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 55%),
    var(--card);
  box-shadow: 0 1px 2px var(--shadow), 0 18px 40px -30px var(--shadow-lg);
}
.aj-hero-top { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.aj-hero-txt { flex: 1; min-width: 14rem; }
.aj-hero h1 { margin: 0 0 0.35rem; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.08; }
.aj-hero .aj-kicker { margin-bottom: 0.25rem; }
.aj-hero-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; color: var(--muted); font-size: 0.95rem; }
.aj-ok { display: inline-flex; align-items: center; gap: 0.2rem; margin-left: 0.35rem; color: var(--ok); font-size: 0.85rem; font-weight: 500; }
.aj-avatar {
  flex: none; display: grid; place-items: center; width: 4.6rem; height: 4.6rem; border-radius: 50%;
  font-family: var(--font-display); font-size: 2rem; color: #fff;
  background: linear-gradient(135deg, hsl(var(--tono, 30) 45% 52%), hsl(calc(var(--tono, 30) + 40) 50% 38%));
  box-shadow: 0 6px 18px -8px hsl(var(--tono, 30) 45% 40% / 0.7);
}
.aj-plan-sello {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: 999px;
  border: 1px solid var(--edge); background: var(--paper); color: var(--ink); font-weight: 600; font-size: 0.95rem;
  text-decoration: none;
}
.aj-plan-sello.is-pro { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.aj-hero-ico { flex: none; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 16px; background: var(--soft); }
.aj-hero-simple { display: flex; gap: 1.1rem; align-items: center; }
.aj-hero-simple h1 { margin-bottom: 0.25rem; }
.aj-hero-simple .lede { margin: 0; }

.aj-mosaicos { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.65rem;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.aj-mosaicos li > a, .aj-mosaicos li:not(:has(> a)) {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.65rem; align-items: center;
  padding: 0.75rem 0.9rem; border-radius: 14px; background: var(--soft-2); border: 1px solid var(--line);
  color: inherit; text-decoration: none; height: 100%;
}
.aj-mosaicos li > a:hover { border-color: var(--edge); background: var(--soft); }
.aj-mosaico-ico { grid-row: span 2; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 10px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.aj-mosaicos strong { font-size: 1.35rem; line-height: 1.1; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.aj-mosaicos span:last-child { font-size: 0.82rem; color: var(--muted); line-height: 1.2; }

/* dos campos en una fila (en el móvil, uno debajo del otro) */
.aj-form-ancho { max-width: 46rem; }
.aj-dos { display: grid; gap: 0 1rem; }
@media (min-width: 640px) { .aj-dos { grid-template-columns: 1fr 1fr; } }
.aj-dos label { margin-top: 1.1rem !important; }
.aj-dos > div:first-child label, .aj-dos > div label { margin-top: 0 !important; }
.aj-dos + .field-help, .aj-form .aj-dos { margin-top: 0.4rem; }
.aj-form input.aj-corto { max-width: 22rem; }

/* un interruptor (los correos) */
.aj-interruptor { padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--soft-2); }

/* la tarjeta del plan */
.aj-plancard { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--card); }
.aj-plancard-cab { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
  padding: 1.4rem 1.5rem; background: var(--soft-2); border-bottom: 1px solid var(--line); }
.aj-plancard.is-familia .aj-plancard-cab, .aj-plancard.is-archivo .aj-plancard-cab { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.aj-plancard.is-familia .aj-kicker, .aj-plancard.is-archivo .aj-kicker,
.aj-plancard.is-familia .aj-plancard-cuando, .aj-plancard.is-archivo .aj-plancard-cuando { color: color-mix(in srgb, var(--on-ink) 70%, transparent); }
.aj-plancard.is-familia .aj-plancard-cab .btn, .aj-plancard.is-archivo .aj-plancard-cab button,
.aj-plancard.is-familia .aj-plancard-cab button, .aj-plancard.is-archivo .aj-plancard-cab .btn { background: var(--on-ink); color: var(--ink); }
.aj-plancard-nombre { margin: 0; font-family: var(--font-display); font-size: 2.3rem; line-height: 1.05; }
.aj-plancard-cuando { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.95rem; }
.aj-plancard-cab .aj-acts { margin: 0; }
.aj-plancard-cuerpo { display: grid; gap: 1.4rem 2.4rem; padding: 1.4rem 1.5rem 1.5rem; }
@media (min-width: 760px) { .aj-plancard-cuerpo { grid-template-columns: 1fr 1fr; } }
.aj-plancard-cuerpo h3 { margin: 0 0 0.8rem; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.aj-plancard-pie { padding: 0 1.5rem 1.3rem; margin: 0; }
.aj-usos, .aj-checks { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.aj-checks { margin-top: 0; }
.aj-usos li, .aj-checks li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.97rem; }
.aj-usos .aj-icono { color: var(--muted); }
.aj-usos a { color: inherit; }
.aj-checks .aj-icono { flex: none; color: var(--ok); }

/* dos cajas lado a lado (descargar mis datos / borrar la cuenta) */
.aj-par { display: grid; gap: 1rem; }
@media (min-width: 760px) { .aj-par { grid-template-columns: 1fr 1fr; } }
.aj-par .aj-caja { margin: 0; max-width: none; display: flex; flex-direction: column; }
.aj-par .aj-caja > .btn { align-self: flex-start; margin-top: auto; }
.aj-caja-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--soft); margin-bottom: 0.8rem; }
.aj-caja-peligro .aj-caja-ico { background: var(--danger); color: var(--paper); }

/* lo que no hay todavía */
.aj-vacio { text-align: center; padding: 1.8rem 1rem 1.2rem; max-width: 34rem; margin: 0 auto; }
.aj-vacio-ico { display: inline-grid; place-items: center; width: 4.2rem; height: 4.2rem; border-radius: 50%;
  background: var(--soft); color: var(--muted); margin-bottom: 0.9rem; }
.aj-vacio h3 { margin: 0 0 0.4rem; font-size: 1.2rem; }
.aj-vacio p { margin: 0 auto; color: var(--muted); max-width: 30rem; line-height: 1.55; }
.aj-vacio .aj-acts { justify-content: center; }
.aj-vacio .btn .aj-icono, .aj-archivo-acts .aj-icono { vertical-align: -3px; }

/* Mis archivos: los filtros y la lista */
.aj-filtros { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1.2rem; }
.aj-filtros a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--text); text-decoration: none; font-size: 0.95rem; }
.aj-filtros a em { font-style: normal; font-size: 0.8rem; color: var(--muted); }
.aj-filtros a:hover { border-color: var(--edge); }
.aj-filtros a.here { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.aj-filtros a.here em { color: color-mix(in srgb, var(--on-ink) 70%, transparent); }
.aj-sec-lista { padding-top: 1.2rem; padding-bottom: 1.2rem; }
.aj-grupo { margin: 0 0 0.6rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  font-family: inherit; }
.aj-archivos { list-style: none; margin: 0; padding: 0; }
.aj-archivo { display: flex; align-items: center; gap: 0.95rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.aj-archivo:first-child { border-top: 0; }
.aj-archivo-ico { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; }
.aj-archivo.is-libros .aj-archivo-ico { background: color-mix(in srgb, #a0703a 16%, var(--card)); color: color-mix(in srgb, #a0703a 85%, var(--ink)); }
.aj-archivo.is-laminas .aj-archivo-ico { background: color-mix(in srgb, #3f7d5c 15%, var(--card)); color: color-mix(in srgb, #3f7d5c 85%, var(--ink)); }
.aj-archivo.is-datos .aj-archivo-ico { background: color-mix(in srgb, #3d6a9e 15%, var(--card)); color: color-mix(in srgb, #3d6a9e 85%, var(--ink)); }
.aj-archivo-txt { flex: 1; min-width: 0; }
.aj-archivo-t { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.aj-archivo-t strong { font-weight: 600; overflow-wrap: anywhere; }
.aj-etiqueta { font-size: 0.75rem; padding: 0.12rem 0.55rem; border-radius: 999px; background: var(--soft); color: var(--muted); }
.aj-archivo-m { margin: 0.2rem 0 0; display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; font-size: 0.86rem; color: var(--muted); }
.aj-archivo-m span { display: inline-flex; align-items: center; gap: 0.25rem; }
.aj-archivo-acts { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; }
.aj-archivo-acts .btn, .aj-archivos-mini .btn { margin: 0; white-space: nowrap; }
.aj-archivos-mini .aj-archivo-ico { width: 2.4rem; height: 2.4rem; }
@media (max-width: 640px) {
  .aj-archivo { flex-wrap: wrap; }
  .aj-archivo-acts { width: 100%; justify-content: flex-start; padding-left: 3.7rem; }
}
.aj-pie { margin: 1rem 0 0; }
@media (max-width: 560px) {
  .aj-hero { padding: 1.2rem 1.1rem 1.1rem; border-radius: 18px; }
  .aj-hero-top { gap: 0.9rem; }
  .aj-avatar { width: 3.4rem; height: 3.4rem; font-size: 1.5rem; }
  .aj-hero-ico { width: 2.8rem; height: 2.8rem; border-radius: 12px; }
  .aj-hero-ico .aj-icono { width: 24px; height: 24px; }
  .aj-hero-simple { align-items: flex-start; }
  .aj-mosaicos { grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 1.1rem; }
  .aj-mosaicos li > a, .aj-mosaicos li:not(:has(> a)) { padding: 0.6rem 0.7rem; column-gap: 0.5rem; }
  .aj-mosaico-ico { width: 1.9rem; height: 1.9rem; }
  .aj-mosaicos strong { font-size: 1.15rem; }
}
/* la cabecera de un árbol: si es público o privado, su enlace y a dónde ir */
.aj-estado { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.6rem; border-radius: 999px;
  background: var(--soft); color: var(--text); font-size: 0.85rem; font-weight: 500; }
.aj-estado.is-publico { background: var(--ok-bg); color: var(--ok); }
.aj-enlace { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--muted); text-decoration: none; overflow-wrap: anywhere; }
.aj-enlace:hover { color: var(--ink); text-decoration: underline; }
.aj-hero-lede { margin: 0 0 0.5rem !important; font-size: 1rem; }
.aj-hero-acts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.aj-hero-acts .btn { margin: 0; display: inline-flex; align-items: center; gap: 0.35rem; }
/* Mis compras: cada compra, como los apartados */
.aj .compra { border-radius: 20px; padding: 1.5rem 1.7rem; box-shadow: 0 1px 2px var(--shadow), 0 8px 24px -18px var(--shadow-md); }
/* en la tarjeta del plan, la barra de las fotos a todo lo ancho y lo que dice debajo */
.aj-plancard .cupo { display: block; }
.aj-plancard .cupo-bar { width: 100%; max-width: none; margin: 0 0 0.5rem; }
.aj-plancard .cupo p { margin: 0; font-size: 0.92rem; }

/* El selector de idioma, en el pie (_idiomas.html) */
.pie-idiomas { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--muted); }
.pie-idiomas strong { font-weight: 600; color: var(--text); }
.pie-idiomas svg { flex: none; }

/* Lo que solo es del móvil y la tableta (la barra de abajo, los textos para el
   dedo, «Entrar» en la cabecera del teléfono…): en un ordenador no sale nunca.
   Lo enseña movil.css, que solo se aplica con el dedo. */
.barra-movil, .solo-tactil, .solo-telefono, .con-dedo, .aviso-corto, .nav-entrar-movil { display: none; }
/* la visita guiada: dónde está cada parte con la barra de abajo del móvil (movil.css) */
.tuto .en-abajo { display: none; }

/* --- Mensajes entre cuentas (mensajes.py): el botón de las páginas, la
   bandeja, cada conversación y el número de la barra ------------------------ */
/* «Escribir a Rosa» (_escribir.html) */
.escribir { margin: 1.6rem 0 0; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--soft-2); }
.escribir-pregunta { margin: 0 0 0.6rem; font-weight: 600; color: var(--ink); }
.escribir-btn { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; }
.escribir-nota { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--muted); max-width: 34rem; }
.post-byline .escribir-btn { margin-left: auto; }
.post-byline .escribir-btn + .btn { margin-left: 0; }
.site-share .escribir { margin-top: 1.4rem; max-width: 34rem; }
/* dentro del menú de compartir del árbol: debajo de los botones, sin caja */
.pop-escribir { margin: 0.9rem 0 0; padding: 0.9rem 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; max-width: 21rem; }
.pop-escribir .escribir-pregunta { font-size: 0.9rem; }
/* en la ficha, una línea de texto, discreta (_escribir.html, `linea`) */
.escribir-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.4rem; margin: 1.1rem 0 0;
  font-size: 0.88rem; color: var(--muted); }
.escribir-linea svg { flex: none; }
.escribir-linea a { color: var(--text); }
.escribir-linea a:hover { color: var(--ink); }

/* el número de sin leer: en la barra, en el índice de la cuenta y en la bandeja */
.nav-n, .msj-n {
  display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem;
  border-radius: 999px; background: var(--ink); color: var(--on-ink);
  font-style: normal; font-size: 0.72rem; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums;
}
.nav-n { margin-left: 0.25rem; vertical-align: 0.1em; }
/* el puntito en las tres rayas y en «Más» del móvil, que esconden «Mensajes» */
.nav-burger, .barra-mas { position: relative; }
.nav-punto { position: absolute; top: 0.2rem; right: 0.2rem; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 2px var(--paper); }

/* la bandeja */
.msj-lista { list-style: none; margin: 0; padding: 0; }
.msj-fila + .msj-fila { border-top: 1px solid var(--line); }
.msj-fila > a { display: flex; align-items: center; gap: 0.9rem; padding: 0.95rem 0.4rem; color: inherit; text-decoration: none; border-radius: 12px; }
.msj-fila > a:hover { background: var(--soft-2); }
.msj-avatar { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--soft); color: var(--ink); font-weight: 600; font-size: 0.85rem; }
.msj-avatar.is-grande { width: 3.6rem; height: 3.6rem; font-size: 1.15rem; }
.msj-fila-txt { flex: 1; min-width: 0; display: grid; gap: 0.15rem; }
.msj-fila-quien { display: flex; align-items: center; gap: 0.4rem; }
.msj-fila-quien strong { font-weight: 550; color: var(--ink); }
.msj-fila-ultimo { color: var(--muted); font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msj-fila-cuando { flex: none; display: grid; justify-items: end; gap: 0.3rem; color: var(--muted); font-size: 0.8rem; }
.msj-fila.is-nueva .msj-fila-quien strong { font-weight: 700; }
.msj-fila.is-nueva .msj-fila-ultimo { color: var(--text); }
.msj-fila.is-ida .msj-fila-quien strong { color: var(--muted); font-weight: 500; }

/* una conversación: los míos a la derecha */
.msj-mensajes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.msj-m { max-width: min(36rem, 88%); justify-self: start; scroll-margin-bottom: 8rem; }
.msj-m.is-mio { justify-self: end; }
.msj-m-texto { padding: 0.75rem 1rem; border-radius: 18px 18px 18px 6px; background: var(--soft); color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.msj-m.is-mio .msj-m-texto { border-radius: 18px 18px 6px 18px; background: var(--ink); color: var(--on-ink); }
.msj-m-de { margin: 0 0 0.25rem 0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.msj-m-sobre { margin: 0 0 0.3rem 0.3rem; display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--muted); }
.msj-m.is-mio .msj-m-sobre { justify-content: flex-end; margin: 0 0.3rem 0.3rem 0; }
.msj-m-sobre a { color: inherit; }
.msj-m-cuando { margin: 0.25rem 0.4rem 0; font-size: 0.75rem; color: var(--muted); }
.msj-m.is-mio .msj-m-cuando { text-align: right; }
.msj-contestar { max-width: none; margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.msj-form textarea { width: 100%; resize: vertical; min-height: 6rem; }
.msj-form button[type="submit"] { display: inline-flex; align-items: center; gap: 0.45rem; }
.msj-cuenta.is-tope { color: var(--danger); }
.msj-atajo { margin: 0; }
.msj-cerrada { margin: 1.6rem 0 0; padding: 1rem 1.1rem; border-radius: 14px; background: var(--soft-2); border: 1px solid var(--line);
  color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.msj-cerrada p { margin: 0; }
.msj-cerrada form { margin: 0; }
.msj-acciones-fila { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.6rem; }
.msj-acciones-fila form { margin: 0; }
.msj-reportar > summary { list-style: none; cursor: pointer; }
.msj-reportar > summary::-webkit-details-marker { display: none; }
.msj-reportar[open] { flex-basis: 100%; }
.msj-reportar[open] > summary { margin-bottom: 0.8rem; }
.msj-reportar .aj-form { max-width: 34rem; }
.msj-bloqueadas { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.msj-bloqueadas li { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.55rem 0; border-top: 1px solid var(--line); }
.msj-bloqueadas form { margin: 0; }
@media (pointer: coarse) { .msj-atajo { display: none; } }
/* en estrecho, el índice de la cuenta es una fila de fichas pegada arriba: en
   una conversación quita sitio a lo que importa, y «← Mensajes» ya lleva atrás */
@media (max-width: 899px) { .aj-msj .aj-index { display: none; } }