/* ==========================================================================
   Cronoteca — hoja de estilos unica, compartida por todas las paginas.

   Secciones:
     1. Tokens           7. La linea del tiempo
     2. Reset y base     8. El mapa
     3. Utilidades       9. El globo
     4. Tipografia      10. FAQ y pie
     5. Componentes     11. Responsive
     6. Estructura      12. Impresion y movimiento reducido

   Nota sobre el modo oscuro: los colores oscuros se declaran UNA vez, como
   variables --o-*, y los dos sitios que encienden el modo oscuro (la
   preferencia del sistema y el boton) se limitan a apuntar a ellas. Asi es
   imposible que se queden con valores distintos entre si.
   ========================================================================== */

/* =============================================================
   0. La tipografia
   -------------------------------------------------------------
   Inter, servida desde este mismo dominio. Antes venia de Google Fonts, lo que
   mandaba la IP de cada lector a un tercero en cada visita; ahora no sale de
   aqui. Los archivos estan en assets/fuentes/ junto a su licencia.

   Es la version VARIABLE: un solo archivo cubre de 400 a 800 sin saltos. Eso
   importa porque esta hoja pide pesos 550 y 650, y la peticion que se hacia a
   Google solo traia 400, 500, 600, 700 y 800: esos dos pesos no existian y el
   navegador los falsificaba.

   El orden de las dos reglas NO es decorativo. Cuando dos caras cubren el
   mismo caracter gana la primera declarada, asi que «latin» va delante: es la
   que se usa en el 99,9 % del texto y la unica que se descarga en 214 de las
   231 paginas.
   ============================================================= */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fuentes/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Los cincuenta y cinco caracteres raros que aparecen en toda la web: el
   griego de las inscripciones, el cirilico de los nombres rusos y una docena
   de letras acentuadas de otros idiomas. Se pidio a Google un archivo con
   exactamente esos glifos y ninguno mas: 15 KB en vez de los 120 KB que
   costaria traer los subconjuntos «latin-ext», «greek» y «cyrillic» enteros.

   OJO al mantenerlo: si algun dia entra un suceso con un caracter que no este
   en esta lista, ese caracter se dibujara con la fuente del sistema y se
   notara al lado del resto. Cuando pase, se ejecuta

       python tools/fuente-subconjunto.py

   que lee las paginas ya generadas, rehace el archivo y escribe por pantalla
   el unicode-range nuevo para pegarlo aqui. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fuentes/inter-raros.woff2") format("woff2");
  unicode-range: U+0107, U+012B, U+0142, U+0144, U+014D, U+015B, U+015E,
    U+0161, U+016B, U+0391-0395, U+0397, U+0399-039F, U+03A1, U+03A3-03A4,
    U+03A6-03A7, U+03A9, U+03AE, U+03B7, U+03C1-03C4, U+0413, U+0418,
    U+041D, U+041F, U+0421, U+0431-0432, U+0435, U+0437-043F, U+0441-0442,
    U+044C, U+2020;
}

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  color-scheme: light;

  /* Paleta clara */
  --acento:        #b45309;
  --acento-fuerte: #92400e;
  --acento-suave:  #fef3c7;

  --tinta:       #1c1917;
  --tinta-media: #57534e;
  --tinta-suave: #78716c;
  --linea:       #e7e5e4;
  --linea-fuerte:#d6d3d1;
  --fondo:       #fffdfb;
  --fondo-alt:   #faf8f5;

  /* Paleta oscura: declarada aqui, aplicada mas abajo */
  --o-acento:        #fbbf24;
  --o-acento-fuerte: #fcd34d;
  --o-acento-suave:  #422006;

  --o-tinta:       #f5f5f4;
  --o-tinta-media: #d6d3d1;
  --o-tinta-suave: #a8a29e;
  --o-linea:       #2f2a26;
  --o-linea-fuerte:#453e38;
  --o-fondo:       #16130f;
  --o-fondo-alt:   #1e1a16;

  --o-sombra-s: 0 1px 2px rgba(0,0,0,.3);
  --o-sombra-m: 0 4px 10px rgba(0,0,0,.35);
  --o-sombra-l: 0 16px 32px rgba(0,0,0,.45);

  /* Colores de tema. Repetidos aqui desde datos/vocabularios.json porque el
     CSS no puede leer un JSON. Si cambias uno alli, cambialo aqui.

     Van dos juegos, y no es capricho. Estos colores no solo pintan el punto de
     la linea: tinen tambien la fecha de cada ficha y su etiqueta de tema, que
     son texto. Los diez originales se eligieron mirando el fondo claro, y sobre
     el fondo oscuro caian a 2,8:1 — por debajo del 4,5:1 que hace falta para
     leer texto pequeno. Mismo tono en los dos juegos, distinta luz; asi cada
     tema se sigue reconociendo de un vistazo y ademas se lee.
     Los valores estan calculados para quedar en 4,6:1 o mejor. */
  --t-guerra:      #b42318;
  --t-politica:    #7839ee;
  --t-ciencia:     #007ab8;
  --t-tecnologia:  #0c8275;
  --t-arte:        #d7228b;
  --t-musica:      #8a4f21;
  --t-religion:    #8152f7;
  --t-sociedad:    #b54708;
  --t-exploracion: #067647;
  --t-economia:    #4e5ba6;
  --t-filosofia:   #5c7a13;
  --t-salud:       #c11574;

  --o-t-guerra:      #e54539;
  --o-t-politica:    #9361f1;
  --o-t-ciencia:     #0086c9;
  --o-t-tecnologia:  #0e9384;
  --o-t-arte:        #e0399a;
  --o-t-musica:      #d9a273;
  --o-t-religion:    #8c62f7;
  --o-t-sociedad:    #d8550a;
  --o-t-exploracion: #079258;
  --o-t-economia:    #707bbc;
  --o-t-filosofia:   #a3c93a;
  --o-t-salud:       #e82c94;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --r-s: 8px;  --r-m: 12px;  --r-l: 16px;  --r-xl: 22px;

  --sombra-s: 0 1px 2px rgba(28,25,23,.05);
  --sombra-m: 0 4px 8px -2px rgba(28,25,23,.07), 0 2px 4px -2px rgba(28,25,23,.04);
  --sombra-l: 0 12px 24px -6px rgba(28,25,23,.09), 0 4px 8px -4px rgba(28,25,23,.04);

  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --alto-barra: 62px;   /* alto de la cabecera pegajosa */

  /* La linea del tiempo. Se declaran aqui porque un punto son seis medidas
     que dependen unas de otras, y escritas a mano no hay forma de cambiar el
     tamano sin descuadrar alguna. Todo lo demas se calcula a partir de estas. */
  --eje: 3px;              /* grosor de la linea */
  --punto: 14px;           /* diametro de un suceso normal */
  --punto-hito: 20px;      /* diametro de un hito (imp 5) */
  --punto-centro: 1rem;    /* a que altura cae el CENTRO del punto */
  --barra: calc(var(--eje) + 2px);   /* el eje engordado de los procesos */
  --gutter: 1.25rem;
  --ancho-columna: 760px;
}

/* El modo oscuro entra por dos puertas y las dos apuntan a las mismas
   variables: la preferencia del sistema, y el boton (que gana). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --acento: var(--o-acento); --acento-fuerte: var(--o-acento-fuerte);
    --acento-suave: var(--o-acento-suave);
    --tinta: var(--o-tinta); --tinta-media: var(--o-tinta-media);
    --tinta-suave: var(--o-tinta-suave);
    --linea: var(--o-linea); --linea-fuerte: var(--o-linea-fuerte);
    --fondo: var(--o-fondo); --fondo-alt: var(--o-fondo-alt);
    --sombra-s: var(--o-sombra-s); --sombra-m: var(--o-sombra-m);
    --sombra-l: var(--o-sombra-l);
    --t-guerra: var(--o-t-guerra); --t-politica: var(--o-t-politica);
    --t-ciencia: var(--o-t-ciencia); --t-tecnologia: var(--o-t-tecnologia);
    --t-arte: var(--o-t-arte); --t-religion: var(--o-t-religion);
    --t-sociedad: var(--o-t-sociedad); --t-exploracion: var(--o-t-exploracion);
    --t-economia: var(--o-t-economia); --t-salud: var(--o-t-salud);
    --t-filosofia: var(--o-t-filosofia);
    --t-musica: var(--o-t-musica);
  }
}
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --acento: var(--o-acento); --acento-fuerte: var(--o-acento-fuerte);
  --acento-suave: var(--o-acento-suave);
  --tinta: var(--o-tinta); --tinta-media: var(--o-tinta-media);
  --tinta-suave: var(--o-tinta-suave);
  --linea: var(--o-linea); --linea-fuerte: var(--o-linea-fuerte);
  --fondo: var(--o-fondo); --fondo-alt: var(--o-fondo-alt);
  --sombra-s: var(--o-sombra-s); --sombra-m: var(--o-sombra-m);
  --sombra-l: var(--o-sombra-l);
  --t-guerra: var(--o-t-guerra); --t-politica: var(--o-t-politica);
  --t-ciencia: var(--o-t-ciencia); --t-tecnologia: var(--o-t-tecnologia);
  --t-arte: var(--o-t-arte); --t-religion: var(--o-t-religion);
  --t-sociedad: var(--o-t-sociedad); --t-exploracion: var(--o-t-exploracion);
  --t-economia: var(--o-t-economia); --t-salud: var(--o-t-salud);
  --t-filosofia: var(--o-t-filosofia);
  --t-musica: var(--o-t-musica);
}

/* =============================================================
   2. Reset y base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

/* El navegador esconde [hidden] con display:none, pero cualquier clase nuestra
   que ponga display gana por especificidad y el elemento reaparece. Pasaba de
   verdad: cuando el globo 3D no arrancaba, su barra de mandos se quedaba a la
   vista porque .globo-barra declara display:grid. Se cierra aquí, una vez, en
   lugar de ir parcheando cada caso. */
[hidden] { display: none !important; }

html {
  /* clip y no hidden: hidden rompe position:sticky, y aqui la cabecera y el
     carril de anuncios dependen de sticky. */
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--acento-fuerte); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--acento); }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 3px;
}
/* Lo pone main.js al llevar el foco a un destino de ancla. Ver llevarFoco(). */
[data-foco-de-paso]:focus,
[data-foco-de-paso]:focus-visible { outline: none; }

/* =============================================================
   3. Utilidades
   ============================================================= */
.contenedor {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.columna-sola { max-width: var(--ancho-columna); }

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 200;
  background: var(--acento); color: #fff;
  padding: .6rem 1rem; border-radius: var(--r-s);
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* =============================================================
   4. Tipografia
   ============================================================= */
h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: 1.1rem; font-weight: 650; }
p { margin: 0 0 1em; }

.texto-largo p { max-width: 68ch; color: var(--tinta-media); }
.texto-largo .seccion-titulo { margin-top: 2rem; }
.seccion { margin-block: 2.5rem; }
.seccion-titulo { font-size: 1.3rem; }

/* =============================================================
   5. Componentes
   ============================================================= */

/* --- Huecos de anuncio ---------------------------------------------------
   Van vacios a proposito: el codigo de AdSense lo pega el propietario. Lo que
   si hacemos es reservarles el sitio con min-height, para que cuando el
   anuncio cargue no empuje el texto hacia abajo y le mueva la lectura a nadie. */
.ad-slot {
  display: flex; align-items: center; justify-content: center;
  margin-block: 2rem;
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--r-m);
  background: var(--fondo-alt);
}
.ad-slot[data-formato="en-feed"]    { min-height: 280px; }
.ad-slot[data-formato="pie"]        { min-height: 120px; }
.ad-slot[data-formato="lateral"]    { min-height: 620px; margin-block: 0; }
.ad-etiqueta {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tinta-suave); opacity: .6;
}
.linea-anuncio { list-style: none; margin-left: 0; }

/* --- Botones ------------------------------------------------------------- */
.btn-tema {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  background: transparent; border: 1px solid var(--linea-fuerte);
  border-radius: 50%; cursor: pointer;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.btn-tema:hover { background: var(--fondo-alt); border-color: var(--acento); }
.btn-tema .icono-sol { display: none; }
[data-tema="oscuro"] .btn-tema .icono-sol { display: block; }
[data-tema="oscuro"] .btn-tema .icono-luna { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .btn-tema .icono-sol  { display: block; }
  :root:not([data-tema="claro"]) .btn-tema .icono-luna { display: none; }
}

/* --- Tarjetas ------------------------------------------------------------ */
.cards-eras {
  display: grid; gap: 1rem; margin-block: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.card-era {
  display: block; padding: 1.1rem 1.2rem;
  border: 1px solid var(--linea); border-radius: var(--r-l);
  background: var(--fondo); color: inherit; text-decoration: none;
  box-shadow: var(--sombra-s);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out),
              transform .2s var(--ease-out);
}
.card-era:hover {
  border-color: var(--acento); box-shadow: var(--sombra-m); transform: translateY(-2px);
}
.card-era h3 { margin-bottom: .15em; }
.card-era p { font-size: .9rem; color: var(--tinta-media); margin: 0; }
.card-era-rango {
  font-variant-numeric: tabular-nums; font-size: .78rem !important;
  color: var(--acento-fuerte) !important; font-weight: 600;
  margin-bottom: .4em !important;
}

/* =============================================================
   6. Estructura
   ============================================================= */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
}
@supports (backdrop-filter: blur(10px)) {
  .cabecera {
    background: color-mix(in srgb, var(--fondo) 86%, transparent);
    backdrop-filter: saturate(180%) blur(10px);
  }
}
.cabecera-fila {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--alto-barra);
}
.marca {
  display: inline-flex; align-items: center; gap: .5rem;
  color: inherit; text-decoration: none; font-weight: 700; flex: none;
}
.marca-icono { color: var(--acento); display: grid; place-items: center; }
.marca-texto b { font-weight: 800; color: var(--acento-fuerte); }

/* --- El menú: tres familias -----------------------------------------------
   Estaban los diecisiete destinos seguidos en una sola fila, y a 1440 px
   ocupaban la pantalla de lado a lado. Ahora hay tres puertas —Épocas, Temas
   y Más— y cada una dice lo que guarda.

   Todo son <details> nativos: funcionan sin JavaScript, se abren con el
   teclado y el navegador ya sabe anunciarlos. El de fuera, «Explorar», solo
   trabaja en pantalla estrecha; a partir de 1240 px se deshace con
   display:contents y las tres familias SON la barra, sin duplicar ni un
   enlace en el HTML.

   El truco para que el <details> cerrado enseñe su contenido en escritorio es
   ::details-content: los navegadores de hoy esconden el interior ahí, y no en
   una propiedad del hijo. Es lo mismo que hizo falta para que la hoja de
   impresión abriera todas las fichas. */
.epocas { position: relative; margin-left: auto; }
.epocas-boton {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .7rem; border-radius: var(--r-s);
  font-size: .85rem; font-weight: 600; color: var(--tinta-media);
  cursor: pointer; list-style: none; white-space: nowrap;
  border: 1px solid var(--linea-fuerte);
}
.epocas-boton::-webkit-details-marker { display: none; }
.epocas-boton:hover { background: var(--fondo-alt); color: var(--tinta); }
.epocas[open] > .epocas-boton { background: var(--fondo-alt); color: var(--tinta); }
.epocas[open] > .epocas-boton svg { transform: rotate(180deg); }

/* El panel del desplegable. Antes este papel lo hacia el <nav> directamente;
   ahora hay un <div> por encima porque dentro van tambien «Crear» y el boton
   de tema, y un boton de apariencia no puede colgar de un <nav>: ahi dentro
   solo van destinos a los que se va. */
.epocas > .epocas-panel {
  position: absolute; right: 0; top: calc(100% + .45rem); z-index: 60;
  display: flex; flex-direction: column; align-items: stretch; gap: .2rem;
  min-width: 12rem;
  /* Con las tres familias abiertas a la vez —los navegadores viejos, que no
     entienden el `name` que las hace excluyentes— la lista pasa de treinta
     filas. Sin tope, el panel se salia por debajo de la pantalla. */
  max-height: min(72vh, 32rem); overflow-y: auto;
  padding: .35rem; border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-m); background: var(--fondo);
  box-shadow: var(--sombra-l);
}

/* --- Las tres familias --------------------------------------------------
   Epocas, Temas y Mas. Cada una es un <details> dentro del panel (en movil) o
   suelto en la barra (de 1240 px para arriba), y el CSS es casi el mismo: lo
   unico que cambia es si su lista sale debajo, como sublista, o flotando,
   como menu. */
.fam { position: relative; }
.fam-boton {
  display: flex; align-items: center; gap: .3rem;
  padding: .35rem .6rem; border-radius: var(--r-s);
  font-size: .85rem; font-weight: 600; color: var(--tinta-media);
  cursor: pointer; list-style: none; white-space: nowrap;
}
.fam-boton::-webkit-details-marker { display: none; }
.fam-boton:hover { background: var(--fondo-alt); color: var(--tinta); }
.fam[open] > .fam-boton { background: var(--fondo-alt); color: var(--tinta); }
.fam[open] > .fam-boton svg { transform: rotate(180deg); }
.fam-boton svg { transition: transform .2s var(--ease-out); margin-left: auto; }
/* La puerta detras de la que esta la pagina que se lee. En una barra de tres
   botones, sin esto no se sabe donde esta uno sin abrirlos: el aria-current
   vive dentro de la lista. */
.fam[data-activa] > .fam-boton { color: var(--acento-fuerte); }

/* En movil la lista de la familia es una sublista, sangrada bajo su titulo. */
.fam-panel { padding: .1rem 0 .3rem .5rem; }
.fam-titulo {
  margin: .5rem 0 .15rem; padding-inline: .6rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinta-suave);
}
/* Los siglos van en tira y no en once filas: lo que distingue a uno de otro
   es el numero, y once «Siglo XVIII» seguidos serian la lista mas larga del
   menu. El nombre entero va en el `title` de cada uno. */
.fam-siglos { display: flex; flex-wrap: wrap; gap: .15rem; padding-inline: .35rem; }
.fam-siglos a {
  padding: .25rem .4rem; border-radius: var(--r-s);
  font-size: .78rem; font-weight: 600; color: var(--tinta-media);
  text-decoration: none; min-width: 2.1rem; text-align: center;
}
.fam-siglos a:hover { background: var(--fondo-alt); color: var(--tinta); }
.fam-siglos a[aria-current="page"] {
  color: var(--acento-fuerte); background: var(--acento-suave);
}
/* Dentro del panel los dos mandos son una fila mas de la lista, no dos piezas
   sueltas de una barra: mismo alto, mismo borde, alineados con los enlaces. */
.epocas > .epocas-panel > .nav-crear { text-align: center; }
.epocas > .epocas-panel > .btn-tema {
  width: auto; height: auto; border-radius: var(--r-s);
  padding: .4rem; margin-top: .15rem;
}

/* La lista de una familia. Es una columna en los dos sitios donde sale: como
   sublista dentro del panel del movil y dentro del menu flotante de
   escritorio. Antes era una fila que se desplazaba a lo ancho, y de ahi venia
   media barra ilegible. */
.cabecera-nav {
  display: flex; flex-direction: column; align-items: stretch; gap: .15rem;
}
.cabecera-nav a {
  padding: .35rem .6rem; border-radius: var(--r-s);
  font-size: .85rem; font-weight: 550; white-space: nowrap;
  color: var(--tinta-media); text-decoration: none;
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.cabecera-nav a:hover { background: var(--fondo-alt); color: var(--tinta); }
.cabecera-nav a[aria-current="page"] { color: var(--acento-fuerte); background: var(--acento-suave); }

/* A partir de aqui caben las tres familias sueltas: «Explorar» desaparece y
   cada una se convierte en un menu de la barra.

   Fueron 1.100 px con solo las edades y 1.240 con las doce en fila. Con tres
   familias la barra pide 692 medidos en el navegador: marca, las tres
   puertas, «Crear», el tema, la lupa, «Jugar» y los huecos. Se corta en 760 y
   no en 700 porque a 700 sobraban ocho pixeles, y ocho pixeles no son un
   margen: son el siguiente ajuste de tipografia rompiendo la barra.
   Por debajo manda «Explorar», que en un telefono es lo unico que cabe: las
   tres puertas solas ya piden 460 de los 375 que hay. */
@media (min-width: 760px) {
  .epocas { display: contents; }
  .epocas-boton { display: none; }
  /* La fila se aprieta un poco, porque no cabia.
     .contenedor tiene un tope de 1180 px y la fila pide 1241: marca 112, la
     lista 854, «Crear» 63, el tema 36, la lupa 34, «Jugar» 62 y cinco huecos
     de 16. Los 61 px de mas se salian del contenedor y se comian el ultimo
     elemento, fuera cual fuera —esto ya pasaba antes, solo que el que se
     cortaba era el borde de un boton redondo y no se notaba—.
     Con el hueco a .55rem y los enlaces un pelin mas estrechos, la fila baja
     a unos 1.145 px y cabe entera. */
  .cabecera-fila { gap: .55rem; }
  /* El <details> trae dentro una caja propia del navegador, ::details-content,
     que envuelve todo lo que no es el <summary>. Antes daba igual porque el
     <nav> era su unico hijo; ahora que dentro hay un panel, esa caja corta la
     cadena de display:contents y los tres mandos se quedan agrupados dentro de
     ella en vez de repartirse por la fila. Asi que tambien se deshace. */
  .epocas::details-content {
    display: contents; content-visibility: visible !important;
  }
  /* El panel se deshace igual que el <details>: sus tres hijos —la lista,
     «Crear» y el tema— vuelven a ser piezas de la fila de la cabecera, en el
     mismo orden en que estan escritos.
     El position:static NO es decorativo y sin el no funciona nada: sobre un
     elemento en posicion absoluta, display:contents se ignora y el navegador
     le dibuja su caja igual. Con la caja puesta, el panel seguia siendo una
     columna flotante y la cabecera crecia a 98 px con las piezas repartidas
     por seis alturas distintas. */
  .epocas > .epocas-panel {
    position: static; display: contents;
  }
  /* Las tres familias dejan de ser filas de una lista y son la barra. La
     primera se separa de la marca; lo que empuja el resto a la derecha ya no
     es la lista sino «Crear», que es donde empiezan los mandos. */
  .epocas > .epocas-panel > .fam { margin-left: .35rem; }
  .epocas > .epocas-panel > .fam:first-of-type { margin-left: 1rem; }
  .fam-boton { border: 1px solid transparent; }
  .fam-boton:hover, .fam[open] > .fam-boton { border-color: var(--linea-fuerte); }
  .fam-boton svg { margin-left: 0; }
  /* La lista pasa de sublista sangrada a menu flotante, anclado a su boton. */
  .fam[open] > .fam-panel {
    position: absolute; left: 0; top: calc(100% + .45rem); z-index: 60;
    min-width: 11rem; max-width: 15rem;
    padding: .35rem; border: 1px solid var(--linea-fuerte);
    border-radius: var(--r-m); background: var(--fondo);
    box-shadow: var(--sombra-l);
  }
  .epocas > .epocas-panel > .nav-crear { text-align: initial; margin-left: auto; }
  .epocas > .epocas-panel > .btn-tema {
    width: 36px; height: 36px; border-radius: 50%; padding: 0; margin-top: 0;
  }
}

/* «Crear» es lo único de la barra que no es para leer sino para hacer. Va
   marcado, pero con borde y no con relleno: un botón sólido ahí competiría con
   el propio contenido, y la barra es para navegar, no para vender. */
.nav-buscar {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: var(--tinta-media); border: 1px solid transparent;
}
.nav-buscar:hover { background: var(--fondo-alt); color: var(--tinta); }
.nav-buscar[aria-current="page"] { border-color: var(--acento); color: var(--acento-fuerte); }

/* --- El buscador ------------------------------------------------------- */
.buscador-campo input { font-size: 1.05rem; padding: .7rem .9rem; }
.bq-lista { list-style: none; margin: 1rem 0 3rem; padding: 0; }
.bq-item {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: .1rem .9rem; align-items: baseline;
  padding: .6rem .7rem; border-radius: var(--r-s);
  text-decoration: none; color: var(--tinta);
  border-bottom: 1px solid var(--linea);
}
.bq-item:hover { background: var(--fondo-alt); }
.bq-anio {
  font-size: .82rem; font-weight: 650; font-variant-numeric: tabular-nums;
  color: var(--color-tema, var(--acento-fuerte));
}
.bq-titulo { font-size: .98rem; }
.bq-resumen {
  grid-column: 2; font-size: .84rem; color: var(--tinta-media);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.bq-donde {
  grid-column: 2; font-size: .74rem; color: var(--tinta-suave);
  text-transform: uppercase; letter-spacing: .05em;
}
.bq-item[data-tema="guerra"]      { --color-tema: var(--t-guerra); }
.bq-item[data-tema="politica"]    { --color-tema: var(--t-politica); }
.bq-item[data-tema="ciencia"]     { --color-tema: var(--t-ciencia); }
.bq-item[data-tema="tecnologia"]  { --color-tema: var(--t-tecnologia); }
.bq-item[data-tema="arte"]        { --color-tema: var(--t-arte); }
.bq-item[data-tema="religion"]    { --color-tema: var(--t-religion); }
.bq-item[data-tema="sociedad"]    { --color-tema: var(--t-sociedad); }
.bq-item[data-tema="exploracion"] { --color-tema: var(--t-exploracion); }
.bq-item[data-tema="economia"]    { --color-tema: var(--t-economia); }
.bq-item[data-tema="filosofia"]   { --color-tema: var(--t-filosofia); }
.bq-item[data-tema="musica"]      { --color-tema: var(--t-musica); }
.bq-item[data-tema="salud"]       { --color-tema: var(--t-salud); }
/* Un personaje en la lista de resultados. Los sucesos llevan el color de su
   tema en la fecha; una persona no tiene tema, así que su distintivo es el
   filete de la izquierda. Sin él, «Cristóbal Colón» y «Colón llega a América»
   se leen como dos sucesos y no se entiende por qué salen los dos. */
.bq-item--figura {
  border-left: 3px solid var(--acento);
  padding-left: calc(.7rem - 3px);
}
.bq-item--figura .bq-anio { color: var(--acento-fuerte); }

.bq-vacio { color: var(--tinta-suave); font-size: .92rem; padding: .6rem 0; }
.bq-ej {
  font: inherit; font-size: .85rem; cursor: pointer;
  background: var(--fondo-alt); border: 1px solid var(--linea-fuerte);
  border-radius: 999px; padding: .1rem .6rem; margin-right: .3rem;
  color: var(--acento-fuerte);
}
.bq-ej:hover { border-color: var(--acento); }

.nav-crear {
  flex: none; white-space: nowrap;
  padding: .35rem .75rem; border-radius: var(--r-s);
  font-size: .85rem; font-weight: 650; text-decoration: none;
  border: 1px solid var(--acento); color: var(--acento-fuerte);
}
.nav-crear:hover { background: var(--acento-suave); color: var(--acento-fuerte); }
.nav-crear[aria-current="page"] { background: var(--acento); color: #fff; }
[data-tema="oscuro"] .nav-crear[aria-current="page"] { color: #16130f; }

/* Cuántos sucesos trae la colección y cuántos vienen prestados de la línea
   universal. Es información honesta: quien entra a «historia de España» tiene
   derecho a saber que una parte de lo que ve se cuenta entera en otro sitio. */
.coleccion-cuenta {
  font-size: .85rem; color: var(--tinta-suave);
  font-variant-numeric: tabular-nums; margin-top: -.4em;
}

.hero { padding-block: 2.5rem 1.5rem; }
.hero-sub { font-size: 1.08rem; color: var(--tinta-media); max-width: 62ch; }
.hero-rango {
  font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--acento-fuerte); letter-spacing: .02em; margin-bottom: .3em;
}
.migas {
  padding-block: .9rem .2rem; font-size: .82rem; color: var(--tinta-suave);
  max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter);
}
/* inline-block y relleno, no min-height: un elemento en linea ignora el alto.
   El margen negativo devuelve el hueco que el relleno acaba de robar, para que
   las migas no empujen al H1 hacia abajo. */
.migas a {
  color: var(--tinta-media);
  display: inline-block; padding-block: .25rem; margin-block: -.25rem;
}

/* Dos columnas a partir de 960px. El carril derecho es un carril propio: un
   anuncio ahi no puede taparle la linea del tiempo a nadie porque son
   columnas distintas de la misma rejilla. */
.disposicion { display: block; }
.columna-lateral { display: none; }

.pie {
  margin-top: 4rem; padding-block: 2rem 3rem;
  border-top: 1px solid var(--linea); background: var(--fondo-alt);
}
.pie-marca { font-weight: 650; margin-bottom: .2em; }
.pie-nota { font-size: .85rem; color: var(--tinta-suave); max-width: 58ch; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .85rem; }
/* 22 px de alto medidos. El relleno los sube a 24 sin mover nada de sitio,
   porque el hueco entre filas del flex ya se ha reducido para compensarlo. */
.pie-enlaces a, .pie-enlaces button {
  display: inline-flex; align-items: center; min-height: 24px;
}

/* =============================================================
   7. La linea del tiempo
   ============================================================= */
.controles {
  position: sticky; top: var(--alto-barra); z-index: 20;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .55rem 0; margin-bottom: .5rem;
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);

  /* Invisible hasta que arranca el JavaScript, porque estos botones no hacen
     nada sin el y un boton muerto es peor que un boton ausente. Se usa
     visibility y no display para que el hueco quede reservado desde el primer
     pintado y la pagina no pegue un salto al aparecer. */
  visibility: hidden;
}
.is-ready .controles { visibility: visible; }
.controles-titulo {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tinta-suave); font-weight: 600;
}
.controles-botones { display: flex; border: 1px solid var(--linea-fuerte); border-radius: 999px; overflow: hidden; }
.controles-botones button {
  padding: .3rem .8rem; font-size: .82rem; font-weight: 550;
  background: transparent; border: 0; cursor: pointer; color: var(--tinta-media);
  transition: background .18s var(--ease-out), color .18s var(--ease-out);
}
.controles-botones button:hover { background: var(--fondo-alt); }
.controles-botones button[aria-pressed="true"] { background: var(--acento); color: #fff; }
[data-tema="oscuro"] .controles-botones button[aria-pressed="true"] { color: #16130f; }
.btn-cerrar-todo {
  margin-left: auto; padding: .3rem .7rem; font-size: .8rem;
  background: transparent; border: 1px solid var(--linea-fuerte);
  border-radius: 999px; cursor: pointer; color: var(--tinta-media);
}
.btn-cerrar-todo:hover { border-color: var(--acento); color: var(--acento-fuerte); }

.linea { list-style: none; margin: 0; padding: 0 0 1rem; position: relative; }

.suceso {
  position: relative;
  margin-top: var(--salto, 28px);
  /* Sitio para el punto mas el aire de siempre. Sale del token, asi que si
     el punto crece el texto se aparta solo. */
  padding-left: calc(var(--punto-hito) + 1.1rem);
  /* Hace el trabajo de una libreria de virtualizacion en una linea: el
     navegador no maqueta las fichas que estan fuera de pantalla. El "auto" del
     tamano intrinseco hace que recuerde el alto real y no pegue saltos. */
  content-visibility: auto;
  contain-intrinsic-size: auto 150px;
  scroll-margin-top: calc(var(--alto-barra) + 60px);
}
.suceso:first-child { margin-top: .75rem; }

/* El eje: una linea vertical continua con un punto por suceso.

   El medio punto de la izquierda NO es un margen estetico: es lo que hace
   que el punto se vea entero.

   El <li> lleva content-visibility:auto, que ademas de saltarse la maquetacion
   de lo que no se ve aplica contencion de PINTADO, y eso recorta cualquier
   cosa que sobresalga de su caja. Con el eje pegado a left:0, el punto —que
   mide 15px y va centrado sobre un eje de 2— se salia 6px por la izquierda y
   el navegador le cortaba media luna. Estaba pasando en todos los puntos de
   todas las lineas, y se ve a simple vista en cuanto uno lo sabe.

   Se arregla moviendo el eje hacia dentro, no quitando la contencion: la
   contencion es justo lo que permite tener cientos de fichas sin virtualizar
   nada a mano. */
.suceso-eje {
  position: absolute; left: calc(var(--punto-hito) / 2); top: 0;
  bottom: calc(-1 * var(--salto, 28px));
  width: var(--eje); background: var(--linea);
}
.suceso:last-child .suceso-eje { bottom: auto; height: 1.6rem; }
.suceso-punto {
  position: absolute; left: 50%;
  top: calc(var(--punto-centro) - var(--punto) / 2);
  width: var(--punto); height: var(--punto);
  margin-left: calc(var(--punto) / -2);
  border-radius: 50%;
  background: var(--fondo);
  border: 3px solid var(--color-tema, var(--tinta-suave));
  transition: transform .2s var(--ease-out);
}
.suceso[data-imp="5"] .suceso-punto {
  top: calc(var(--punto-centro) - var(--punto-hito) / 2);
  width: var(--punto-hito); height: var(--punto-hito);
  margin-left: calc(var(--punto-hito) / -2);
  background: var(--color-tema, var(--tinta-suave));
}
/* Los procesos (los que tienen ano de fin) se dibujan como barra, no como
   punto: duraron, no ocurrieron. */
.suceso--proceso .suceso-eje::after {
  content: ""; position: absolute;
  left: calc((var(--eje) - var(--barra)) / 2);
  top: calc(var(--punto-centro) - var(--punto-hito) / 2);
  width: var(--barra); height: 3.2rem; border-radius: 2px;
  background: var(--color-tema, var(--tinta-suave)); opacity: .35;
}
.suceso:hover .suceso-punto { transform: scale(1.25); }

/* Cada tema pinta su punto. La variable se resuelve en el <li>. */
.suceso[data-tema="guerra"]      { --color-tema: var(--t-guerra); }
.suceso[data-tema="politica"]    { --color-tema: var(--t-politica); }
.suceso[data-tema="ciencia"]     { --color-tema: var(--t-ciencia); }
.suceso[data-tema="tecnologia"]  { --color-tema: var(--t-tecnologia); }
.suceso[data-tema="arte"]        { --color-tema: var(--t-arte); }
.suceso[data-tema="religion"]    { --color-tema: var(--t-religion); }
.suceso[data-tema="sociedad"]    { --color-tema: var(--t-sociedad); }
.suceso[data-tema="exploracion"] { --color-tema: var(--t-exploracion); }
.suceso[data-tema="economia"]    { --color-tema: var(--t-economia); }
.suceso[data-tema="filosofia"]   { --color-tema: var(--t-filosofia); }
.suceso[data-tema="musica"]      { --color-tema: var(--t-musica); }
.suceso[data-tema="salud"]       { --color-tema: var(--t-salud); }

/* --- El filtro de detalle es CSS puro: instantaneo con cientos de fichas --- */
.linea[data-densidad="1"] .suceso:not([data-imp="5"]) { display: none; }
.linea[data-densidad="2"] .suceso[data-imp="1"],
.linea[data-densidad="2"] .suceso[data-imp="2"] { display: none; }

/* --- La ficha ------------------------------------------------------------ */
.ficha { border-radius: var(--r-l); }
.ficha-cabeza {
  display: block; cursor: pointer; list-style: none;
  padding: .45rem .85rem .6rem;
  border-radius: var(--r-l);
  transition: background .18s var(--ease-out);
}
.ficha-cabeza::-webkit-details-marker { display: none; }
.ficha-cabeza:hover { background: var(--fondo-alt); }
.ficha[open] > .ficha-cabeza { background: var(--fondo-alt); }

.ficha-fecha {
  display: block; font-variant-numeric: tabular-nums;
  font-size: .78rem; font-weight: 650; letter-spacing: .02em;
  color: var(--color-tema, var(--tinta-suave));
}
.ficha-titulo { margin: .1em 0 .25em; }
.ficha-resumen { display: block; font-size: .92rem; color: var(--tinta-media); }
.ficha-tema {
  display: inline-block; margin-top: .5rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-tema, var(--tinta-suave));
  border: 1px solid currentColor; border-radius: 999px;
  padding: .05rem .5rem;
}
/* Sin `opacity`. Los colores de tema estan calculados uno a uno para quedar en
   4,6:1 sobre los dos fondos, que es lo que hace falta para leer texto
   pequeno... y una opacidad del 80 % los mezcla con el fondo y los deja entre
   3,3 y 4,6. Es decir: la paleta se afino con cuidado y luego una linea de CSS
   tiraba ese trabajo en las once etiquetas, en las doscientas ochenta fichas.
   Se midio con la opacidad aplicada, que es como lo ve el ojo; mirar solo el
   valor de `color` dice que todo esta bien y no lo esta. */

.ficha-cuerpo {
  padding: .3rem .85rem 1.4rem;
  font-size: .95rem;
}
.ficha-cuerpo > p { color: var(--tinta-media); max-width: 68ch; }
.ficha-cuerpo .bloque-titulo {
  font-size: 1rem; font-weight: 650; margin: 1.4em 0 .4em; color: var(--tinta);
}
.ficha-cuerpo h3 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-suave); margin: 1.6em 0 .5em;
}

/* Rejilla de dos columnas con <dt> y <dd> directos. Antes cada par iba
   envuelto en un <div> que era una fila flex; el <div> no llevaba nada dentro
   y eran 439 nodos de mas solo en la pagina de Espana. La rejilla los coloca
   igual, y ademas alinea los valores de todas las filas entre si, cosa que con
   flex por fila no pasaba.
   El ancho de la primera columna es fijo para que las etiquetas queden en
   bloque; si un valor es largo, se parte en su celda y la fila crece. */
.datos-clave {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: .1rem .6rem; margin: 0 0 1.2rem; font-size: .87rem;
  border: 1px solid var(--linea); border-radius: var(--r-m);
  background: var(--fondo-alt); padding: .7rem .9rem;
}
.datos-clave dt { font-weight: 600; color: var(--tinta-suave); }
.datos-clave dd { margin: 0; color: var(--tinta); }

.aviso-certeza {
  font-size: .82rem; color: var(--tinta-suave);
  border-left: 3px solid var(--linea-fuerte); padding-left: .7rem;
}

.ficha-foto { margin: 0 0 1.2rem; }
/* <picture> es un elemento EN LINEA, y se cuela entre la figura y el <img> en
   las fotos que tienen AVIF. El width:100% del <img> se resuelve contra su
   contenedor, asi que sin esto unas fotos llenarian la columna y otras no,
   segun si su AVIF compenso o no. Que se vea igual no puede depender de eso. */
.ficha-foto picture { display: block; }
.ficha-foto img {
  border-radius: var(--r-m); width: 100%;
  /* Con width y height en el HTML, el navegador reserva el hueco exacto.
     Aqui hay que devolverle el alto automatico para que no se deforme al
     encogerse a la columna, y quedarnos con la proporcion. */
  height: auto;
}
.ficha-foto figcaption { font-size: .75rem; color: var(--tinta-suave); margin-top: .4rem; }
/* La firma —autor y licencia— en su propia linea, mas pequeña que el pie.
   Tiene que verse, porque las licencias Creative Commons lo exigen, pero no
   competir con el texto: lo que el visitante quiere leer es qué es la foto.

   Se separa con el tamaño y no con `opacity`, y eso es a proposito: en esta
   misma web una opacidad del 80 % en las etiquetas de tema tiró once colores
   cuidadosamente medidos por debajo de 4,5:1 sin que se notara en el codigo,
   porque mirar el valor de `color` decia que todo estaba bien. Aqui el color
   es el token de siempre y punto. */
.ficha-credito {
  display: block; margin-top: .2rem;
  font-size: .7rem; color: var(--tinta-suave);
}

/* Las fotos verticales.
   -------------------------------------------------------------------------
   Una foto ocupa el ancho de la columna, 760 px. Si es apaisada eso son unos
   500 px de alto y se ve de una vez. Si es vertical se dispara: el retrato de
   Napoleon medía 1268 px de alto y el Dao De Jing 1678, dos pantallas de movil
   de una sola imagen. Se midio sobre las 284 fotos de la web: 105 pasaban de
   los 1000 px. No era un caso raro, era un tercio del catalogo.

   Se arregla en dos pisos, y hacen falta los dos.

   El de abajo vale en cualquier pantalla: la foto no puede pasar del 70 % del
   alto de la ventana. Es un tope, no un tamaño; la mayoria de las veces manda
   el ancho y esta regla ni se nota. Existe para que nunca vuelva a haber una
   imagen mas alta que la pantalla, tambien en las ventanas medianas donde no
   cabe la segunda regla.

   El de arriba, a partir de 900 px, es el que pediste: la foto se va a la
   izquierda y el texto corre a su derecha. Ahi el hueco que sobraba al lado de
   una imagen estrecha pasa a ser texto, que es lo que se venia a leer.

   El tope de alto tambien en la flotada (460 px) no es capricho: sin el, una
   foto muy vertical flota mas alto que la seccion que la acompaña y el
   siguiente titulo aparece indentado 320 px, pegado al ultimo centimetro de la
   imagen. Con el tope, la foto dura mas o menos lo que un bloque de texto y lo
   siguiente empieza limpio. No se usa `clear` en los titulos porque la foto va
   ANTES del primer titulo: limpiarlos lo mandaria todo debajo de la imagen y la
   flotacion no serviria de nada.

   Cual es vertical lo decide el generador con la proporcion real del archivo
   (PROPORCION_ALTA en generar-sitio.py, hoy 1,3), no una lista escrita a mano. */
.ficha-foto--alta img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 70vh;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .ficha-foto--alta {
    float: left;
    max-width: 320px;
    margin: .3rem 1.5rem .6rem 0;
  }
  .ficha-foto--alta img { max-height: 460px; }
  /* La vista horizontal limita la foto a 560 px con un selector tan especifico
     como el de arriba, asi que decidia el orden del archivo y ganaba el 560.
     Se comprobo midiendo: la figura salia a 381 px en la linea y a 320 en la
     pagina de suceso, la misma foto. Hoy la diferencia es pequeña porque el
     tope de alto recorta antes, pero eso es una casualidad que se rompe el dia
     que se toque PROPORCION_ALTA o los 460 px.
     Por eso van las dos clases seguidas (.ficha-foto.ficha-foto--alta): asi
     esta regla gana por especificidad y no por estar mas abajo. */
  .linea[data-orientacion="h"] .suceso--abierto .ficha-foto.ficha-foto--alta {
    max-width: 320px;
  }
  /* El contenedor tiene que envolver al flotante; si no, la foto se sale por
     debajo de la ficha y se mete en lo que venga despues. En la vista
     horizontal esto ya pasaba por el overflow, pero en la pagina de suceso
     no. */
  .ficha-cuerpo { display: flow-root; }
}

.ficha-mas a { font-weight: 600; }

.ficha-enlaces ul, .ficha-relacionados ul { list-style: none; margin: 0; padding: 0; }
.ficha-enlaces li { font-size: .9rem; }
/* Cada enlace ocupa su propia linea, asi que el relleno vertical no lo pega al
   de al lado: solo lo engorda hasta los 24 px que pide la norma. El
   margin-bottom del li se va porque este relleno ya separa mas que antes. */
.ficha-enlaces li a, .ficha-fuentes li a {
  display: inline-block; padding-block: .2rem;
}
.ficha-relacionados li { margin-bottom: .35rem; }
.ficha-relacionados a {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .45rem .7rem; font-size: .9rem;
  border: 1px solid var(--linea); border-radius: var(--r-s);
  text-decoration: none; color: var(--tinta);
  transition: border-color .2s var(--ease-out);
}
.ficha-relacionados a:hover { border-color: var(--acento); }
.ficha-relacionados a span {
  color: var(--tinta-suave); font-variant-numeric: tabular-nums;
  font-size: .8rem; white-space: nowrap;
}

/* «Mientras tanto, en el resto del mundo». Se distingue de «Relacionado» con
   un fondo suave porque no es lo mismo: relacionado es causa y consecuencia,
   esto es pura coincidencia en el tiempo —y ahí está la gracia—. */
.ficha-mientras a {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: .1rem .8rem;
  background: var(--fondo-alt);
}
.mientras-anio {
  font-size: .8rem; font-weight: 650; color: var(--acento-fuerte);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mientras-titulo { grid-column: 2; }
.mientras-donde {
  grid-column: 2; font-size: .75rem; color: var(--tinta-suave);
  text-transform: uppercase; letter-spacing: .05em;
}

.ficha-fuentes {
  margin-top: 1.5rem; padding-top: .8rem;
  border-top: 1px solid var(--linea);
  font-size: .78rem; color: var(--tinta-suave);
}
.ficha-meta { color: var(--tinta-suave); }

/* --- La ficha cuando tiene pagina propia --------------------------------- */
.ficha-suelta { padding-top: 1.5rem; }
.ficha-suelta-fecha {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--acento-fuerte); margin-bottom: .4em;
}
.ficha-suelta-resumen { font-size: 1.08rem; color: var(--tinta-media); max-width: 62ch; }
.ficha-suelta .ficha-cuerpo { padding-inline: 0; }
.volver { margin-top: 2rem; font-weight: 600; }

.nav-eras { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-block: 2rem; }
.nav-era {
  padding: .6rem .9rem; font-size: .88rem; font-weight: 550;
  border: 1px solid var(--linea); border-radius: var(--r-m);
  text-decoration: none; color: var(--tinta);
}
.nav-era:hover { border-color: var(--acento); }
.nav-era--sig { margin-left: auto; text-align: right; }

.aviso-escala {
  font-size: .85rem; color: var(--tinta-media);
  background: var(--acento-suave); border-radius: var(--r-m);
  padding: .7rem .9rem; max-width: 68ch;
}
[data-tema="oscuro"] .aviso-escala { color: var(--o-tinta-media); }

/* =============================================================
   7b. La linea en horizontal
   -------------------------------------------------------------
   La misma linea, girada. Es un carril de tarjetas que se recorre a la
   derecha con la rueda, el dedo o las flechas.

   Nada de esto secuestra el scroll de la pagina: el desplazamiento lateral
   ocurre DENTRO del carril, con overflow-x, que es scroll nativo del
   navegador. La pagina sigue subiendo y bajando como siempre.

   Y todo esto vive detras de data-orientacion="h", que solo pone el
   JavaScript. Sin JavaScript la linea se queda vertical, que es la que se
   lee bien, se imprime y entiende Google.
   ============================================================= */
.linea[data-orientacion="h"] {
  /* El cielo: el hueco que queda por encima del eje, donde se levanta el
     objeto del suceso que cruza el centro.

     Es una variable y no un numero suelto porque la usan tres reglas: el
     padding de la tarjeta, la posicion del eje y el sitio del objeto. Antes
     el eje estaba clavado a 2.6rem y habia que acordarse de cambiarlo en
     todas.

     5.4rem son 86 px de cielo para un objeto de 67. Se subio desde 74/54
     porque a 54 px el detalle fino no sobrevivia: un casco parecia una
     herradura y una guitarra una botella. El carril pasa de 301 a unos 345 px
     de los 812 que mide una pantalla de telefono, y ahi se queda: por encima
     empieza a comerse el texto de las fichas, que es a lo que se viene. */
  --cielo: 5.4rem;
  --objeto: 4.2rem;

  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  /* Ojo: esto RECORTA lo que salga por arriba. El objeto tiene que caber
     dentro del cielo; no puede desbordar hacia fuera del carril. */
  overflow-y: hidden;
  /* El carril se sale de la columna hasta el borde de la pantalla: en un
     movil, encajarlo en los margenes de lectura lo dejaria ridiculo. */
  margin-inline: calc(var(--gutter) * -1);
  padding: 0 var(--gutter) 1.2rem;
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--linea-fuerte) transparent;
}
.linea[data-orientacion="h"]::-webkit-scrollbar { height: 10px; }
.linea[data-orientacion="h"]::-webkit-scrollbar-thumb {
  background: var(--linea-fuerte); border-radius: 999px;
}

.linea[data-orientacion="h"] .suceso {
  flex: none;
  /* 340 y no 300. La tarjeta cerrada tiene que dejar leer la fecha, el titulo
     y cuatro lineas de resumen sin que ninguna de las tres se quede a medias;
     a 300 el titulo de tres palabras largas partia en tres renglones y el
     resumen llegaba cortado a mitad de frase.

     Aqui NO se estrecha la tarjeta en movil para que asome la siguiente, que
     es lo primero que se piensa. No funcionaria: el hueco entre dos tarjetas
     es --salto, o sea la distancia en anos, y va de 28 a 240 px. Medido en la
     Edad Media a 375 px, entre las dos primeras hay 65 px de salto, asi que la
     segunda empieza en el pixel 390 con una tarjeta de 293 y en el 437 con una
     de 340: no asoma en ningun caso, y estrecharla solo quitaria texto a
     cambio de nada. De que hay mas cosas a la derecha avisa el degradado del
     borde (.linea-caja[data-hay-mas]), que para eso esta. */
  width: 340px;
  margin-top: 0;
  margin-left: var(--salto, 28px);
  padding-left: 0;
  /* El eje va a --cielo, asi que el texto empieza por debajo del punto mas
     grande que puede caer ahi. */
  padding-top: calc(var(--cielo) + var(--punto-hito) / 2 + .4rem);
  scroll-margin-inline: var(--gutter);
  transition: width .28s var(--ease-out);

  /* Aqui NO se usa content-visibility, y esto no es un olvido.
     En vertical viene de perlas: el navegador se ahorra maquetar las fichas
     que no se ven. Pero necesita que le digas de antemano cuanto miden, y una
     tarjeta que se ensancha al abrirla ya no mide lo que le dijimos: se queda
     congelada en los 300 px de la promesa y no hay forma de moverla, ni con
     !important. Costo de quitarlo: el navegador maqueta las cien tarjetas de
     golpe. Medido, no se nota. */
  content-visibility: visible;
  contain-intrinsic-size: none;
}
/* Medio punto de aire, y no .25rem, porque el punto de la primera tarjeta se
   dibuja centrado en su borde izquierdo (left: 0) y por tanto sobresale media
   bola hacia fuera. Con 4px se le recortaba un trozo contra el borde del
   carril; en pantalla ancha, donde el carril pierde su relleno, se le comian
   3px. Sale del token para que siga cuadrando si el punto cambia de tamano. */
.linea[data-orientacion="h"] .suceso:first-child {
  margin-left: calc(var(--punto-hito) / 2 + 2px);
}
.linea[data-orientacion="h"] .suceso:last-child { margin-right: 40vw; }

/* El eje pasa a ser una linea horizontal por encima de las tarjetas. Se
   extiende hacia la IZQUIERDA para tapar el hueco anterior, porque ese hueco
   es el margen de esta misma tarjeta y por tanto es lo unico que conoce. */
.linea[data-orientacion="h"] .suceso-eje {
  left: calc(-1 * var(--salto, 28px)); right: 0;
  top: var(--cielo); bottom: auto;
  width: auto; height: var(--eje);
}
.linea[data-orientacion="h"] .suceso:first-child .suceso-eje { left: 0; }
.linea[data-orientacion="h"] .suceso:last-child .suceso-eje { right: auto; width: calc(100% + var(--salto, 28px)); }
.linea[data-orientacion="h"] .suceso-punto {
  left: var(--salto, 28px); top: 50%;
  margin: calc(var(--punto) / -2) 0 0 calc(var(--punto) / -2);
}
.linea[data-orientacion="h"] .suceso:first-child .suceso-punto { left: 0; }
.linea[data-orientacion="h"] .suceso[data-imp="5"] .suceso-punto {
  margin: calc(var(--punto-hito) / -2) 0 0 calc(var(--punto-hito) / -2);
}
.linea[data-orientacion="h"] .suceso--proceso .suceso-eje::after {
  left: var(--salto, 28px);
  top: calc((var(--eje) - var(--barra)) / 2);
  width: 3.2rem; height: var(--barra);
}

/* La tarjeta abierta se ensancha en su sitio y el texto se lee dentro. Es la
   solucion menos aparatosa: no mueve nada de sitio en el documento, no hace
   falta un panel flotante y el boton "atras" sigue funcionando igual.

   El ancho y el alto se midieron y estaban mal repartidos. Con la pantalla a
   1800 px, la tarjeta abierta ocupaba 620 de un carril de 1116 —496 px de
   carril vacios a su derecha— y ensenaba 2.023 px de texto por una ventana de
   437: cuatro pantallas y media de scroll dentro de una caja pequena, con
   media pantalla libre al lado. Ahora la tarjeta crece con el sitio que hay y
   el cuerpo se queda con la altura util de la ventana; al ser mas ancha el
   texto ademas se reparte en menos lineas, asi que se acorta por partida
   doble. El tope de 940 px existe porque una linea de texto mas larga que eso
   se lee peor, no por falta de espacio. */
/* La tarjeta abierta crece con las demas. El 92vw deja un dedo de margen para
   que se siga viendo que hay carril debajo y se pueda arrastrar. */
.linea[data-orientacion="h"] .suceso--abierto { width: min(1040px, 92vw); }
.linea[data-orientacion="h"] .ficha-cuerpo {
  max-height: min(66vh, 720px); overflow-y: auto; overscroll-behavior-y: contain;
  padding-right: 1.2rem;
}
/* Con la tarjeta ancha, el texto largo se lee mejor en una columna acotada. */
.linea[data-orientacion="h"] .suceso--abierto .ficha-cuerpo > p,
.linea[data-orientacion="h"] .suceso--abierto .ficha-cuerpo > h2,
.linea[data-orientacion="h"] .suceso--abierto .ficha-cuerpo > h3 {
  max-width: 68ch;
}
/* Y el mapa y la foto NO crecen con ella. El mapa tiene proporcion fija, asi
   que ensanchar la tarjeta de 620 a 940 lo hacia 140 px mas alto y se comia
   buena parte del alto que acabamos de ganar: la tarjeta era mas grande y
   habia que desplazarse lo mismo. Acotados, ensanchar solo suma sitio. */
.linea[data-orientacion="h"] .suceso--abierto .mapa,
.linea[data-orientacion="h"] .suceso--abierto .ficha-foto { max-width: 560px; }

/* En una pantalla estrecha ese 66 % deja la ficha en 780 px de los 812 que hay:
   se come la pantalla entera y se pierde de vista que esto es una linea del
   tiempo. En movil el carril se recorre con el dedo, asi que conviene que
   asome la tarjeta siguiente. */
@media (max-width: 719px) {
  .linea[data-orientacion="h"] .ficha-cuerpo { max-height: 52vh; }
}
.linea[data-orientacion="h"] .ficha-cabeza { min-height: 9.2rem; }
/* La letra de la tarjeta, un punto por encima de la de la vista vertical.
   En vertical la ficha ocupa el ancho de lectura y el texto pequeno se
   sostiene; en horizontal es una tarjeta suelta rodeada de aire, y ahi el
   mismo tamano se lee como una nota al pie. El resumen sube a 1rem, que es el
   cuerpo del texto normal: es lo que la gente lee de verdad al recorrer la
   linea, porque casi nadie abre todas las fichas. */
.linea[data-orientacion="h"] .ficha-titulo { font-size: 1.2rem; }
.linea[data-orientacion="h"] .ficha-fecha { font-size: .85rem; }
.linea[data-orientacion="h"] .ficha-resumen {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1rem; line-height: 1.45;
}
.linea[data-orientacion="h"] .suceso--abierto .ficha-resumen {
  display: block; overflow: visible;
}
/* En horizontal la tarjeta es mas estrecha, asi que la columna de las
   etiquetas se encoge. Es la rejilla la que manda ahora, no el dt. */
.linea[data-orientacion="h"] .datos-clave { grid-template-columns: 7rem minmax(0, 1fr); }

/* Un anuncio dentro del carril quedaria como una tarjeta mas y confundiria.
   En horizontal se saca del carril y se muestra debajo. */
.linea[data-orientacion="h"] .linea-anuncio { display: none; }

/* --- El objeto que se levanta sobre el suceso -----------------------------

   Al arrastrar el carril, el suceso que cruza el centro levanta su silueta
   por encima del eje: al pasar por la torre Eiffel, se levanta una torre.
   Quien pone y quita la clase es js/linea.js; aqui solo esta el aspecto.

   Se apoya EN el eje —bottom pegado al eje, no centrado en el cielo— para que
   los objetos parezcan puestos sobre la linea y no flotando a alturas
   distintas segun lo alto que sea cada dibujo.

   Solo existe en horizontal. En vertical, .suceso lleva content-visibility:
   auto, que aplica contencion de pintado y le recortaria media silueta; y
   ademas ahi no hay cielo que valga, las fichas van una debajo de otra. */
.suceso-objeto {
  position: absolute;
  /* Cuelga del eje, y "bottom: 100%" es el borde de arriba del eje: el objeto
     se apoya justo sobre la linea. En horizontal el eje se estira hacia la
     izquierda para tapar el hueco anterior, asi que left tiene que valer
     --salto para caer sobre el punto; es la misma cuenta que hace el punto
     tres reglas mas arriba, y por eso se repite tal cual en vez de inventar
     otra. */
  left: var(--salto, 28px);
  /* Separado del eje por medio punto mas un pelo, para que no toque el circulo
     del suceso: apoyado en la linea, el punto se le metia dentro y la silueta
     parecia clavada en un palo. Cabe: el cielo mide --cielo (86 px) y el
     objeto --objeto (67 px), asi que sobran 19 y esto gasta 13. */
  bottom: calc(100% + var(--punto-hito) / 2 + .2rem);
  width: var(--objeto, 3.4rem);
  height: var(--objeto, 3.4rem);
  margin-left: calc(var(--objeto, 3.4rem) / -2);
  color: var(--color-tema, var(--tinta-suave));
  opacity: 0;
  /* De salida esta hundido dentro del eje y encogido. Al activarse sube a su
     sitio: es lo que hace que parezca que se levanta y no que aparece. */
  transform: translateY(.9rem) scale(.7);
  transform-origin: 50% 100%;
  transition: opacity .22s var(--ease-out), transform .3s var(--ease-out);
  pointer-events: none;
}
/* A la primera tarjeta no se le estira el eje hacia la izquierda —no hay hueco
   anterior que tapar—, asi que su punto va a left: 0 y su objeto tambien. */
.linea[data-orientacion="h"] .suceso:first-child .suceso-objeto { left: 0; }

.suceso--en-el-centro .suceso-objeto {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* La tarjeta abierta ocupa casi toda la pantalla y su propio contenido manda:
   un objeto flotando encima seria ruido sobre el texto que se ha ido a leer. */
.suceso--abierto .suceso-objeto { opacity: 0; }

/* En vertical no se dibuja. La regla va por el atributo de la linea y no por
   una clase que quite el JavaScript, para que al cambiar de vista desaparezca
   en el mismo fotograma que se recoloca todo lo demas. */
.linea[data-orientacion="v"] .suceso-objeto { display: none; }

@media (prefers-reduced-motion: reduce) {
  /* Aparece y desaparece, pero no se levanta. Lo que molesta de esto es el
     movimiento, no el objeto. */
  .suceso-objeto { transition: opacity .2s linear; transform: none; }
  .suceso--en-el-centro .suceso-objeto { transform: none; }
}

/* Pista de que hay mas cosas a la derecha: un degradado en el borde. */
.linea-caja { position: relative; }
.linea-caja::after {
  content: ""; position: absolute; inset-block: 0; right: calc(var(--gutter) * -1);
  width: 3rem; pointer-events: none; opacity: 0;
  background: linear-gradient(to right, transparent, var(--fondo));
  transition: opacity .2s var(--ease-out);
}
.linea-caja[data-hay-mas="1"]::after { opacity: 1; }

.controles-vista button { display: inline-flex; align-items: center; gap: .35rem; }

/* =============================================================
   8. El mapa
   ============================================================= */
/* Tres capas, una encima de otra:
     1. la caja, que pone el fondo de mar y recorta las esquinas
     2. la silueta de los continentes (una mascara de CSS)
     3. las zonas del suceso y el punto exacto

   Van separadas porque una mascara recorta todo lo que hay dentro del
   elemento: cuando el marcador vivia dentro de la silueta, un suceso ocurrido
   en el mar se quedaba sin punto. */
.mapa { margin: 1.4rem 0; }
/* La proporcion sale de datos/mapa-proyeccion.json. Si se regenera el mapa con
   otro recorte, este numero cambia con el. */
.mapa-caja {
  position: relative; aspect-ratio: 1000 / 437;
  border-radius: var(--r-m); overflow: hidden;
  /* El mar. Era un <div> propio y ahora es el fondo de la caja: un color liso
     no necesita un elemento para el, y eran 101 nodos por pagina. La tierra
     SI sigue en su <div>, porque lleva una mascara y una mascara recorta todo
     lo que hay dentro del elemento. */
  background: var(--mapa-mar);
}
/* Tierra y mar tienen color propio y no heredan los tokens de la interfaz.
   Se hacia asi antes —la tierra usaba --linea-fuerte, que es el color de los
   bordes— y el resultado se midio: 1,08:1 entre tierra y mar en el tema claro
   y 1,52:1 en el oscuro. Es decir, el mapa era una mancha sobre otra mancha del
   mismo tono, y solo se distinguia algo porque los territorios marcados salen
   naranjas. Estos dos pares pasan de 3:1, que es el minimo para distinguir una
   forma, y dejan sitio al naranja del acento encima de la tierra. */
:root {
  --mapa-tierra: #f2ece3;
  --mapa-mar:    #4a80ad;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --mapa-tierra: #7a6f62; --mapa-mar: #0d2338; }
}
:root[data-tema="oscuro"] { --mapa-tierra: #7a6f62; --mapa-mar: #0d2338; }

/* El mar llena la caja entera, esquinas incluidas —ahora como fondo de
   .mapa-caja, aqui arriba—.
   Se probo lo contrario —recortarlo al contorno real del planeta, que en Equal
   Earth no es un rectangulo— y era mas correcto en el papel y peor de ver: el
   mapa quedaba flotando con cuatro mordiscos del color de la pagina en las
   esquinas. Se gana geografia y se pierde el dibujo, asi que gana el dibujo.
   El contorno ya no se genera; la funcion que lo dibuja sigue en
   tools/generar-mapa.py (trazo_marco) por si algun dia se quiere volver. */
.mapa-lienzo {
  position: absolute; inset: 0;
  background: var(--mapa-tierra);
  -webkit-mask: url("assets/img/mapa-mundi.svg") center / 100% 100% no-repeat;
          mask: url("assets/img/mapa-mundi.svg") center / 100% 100% no-repeat;
}
/* Sin soporte de mascaras, el mar sigue funcionando —es el fondo de la caja,
   no una mascara— y la tierra se dibuja como imagen. Se pierde el color de la
   tierra segun el tema, no el mapa. */
@supports not ((-webkit-mask: url("")) or (mask: url(""))) {
  .mapa-lienzo {
    background: url("assets/img/mapa-mundi.svg") center / 100% 100% no-repeat;
    opacity: .45;
  }
}

/* --- Las zonas: paises enteros coloreados ------------------------------- */
.mapa-zonas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mapa-zonas path {
  fill: var(--acento);
  fill-opacity: .62;
  stroke: var(--fondo);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill-opacity .15s var(--ease-out);
}
.mapa-zonas path:hover,
.mapa-zonas path:focus-visible,
.mapa-zonas path.es-elegida { fill-opacity: .95; }
.mapa-zonas path:focus-visible { outline: none; stroke: var(--tinta); stroke-width: 2; }

/* --- El recorrido: los viajes se dibujan como lo que son, una linea -------
   Un viaje no es un punto ni un territorio. La primera vuelta al mundo no
   ocurrio "en Espana y Portugal": ocurrio a lo largo de tres anos de ruta.

   La linea va discontinua a proposito: es una ruta aproximada, no un GPS. El
   halo de alrededor la hace legible por igual sobre el mar oscuro y sobre la
   tierra clara, sin tener que dibujarla dos veces.

   Las rayas avanzan en el sentido en que fue la expedicion, que es lo que de
   verdad explica la direccion: en un mapa plano, una linea entre dos puntos no
   dice quien fue a quien.

   La animacion NO corre siempre. Solo dentro de una ficha abierta, y solo
   mientras el mapa se ve; ademas no puede haber mas de tres fichas abiertas a
   la vez. Sin esos frenos, una pagina de era tendria treinta lineas
   correteando en bucle a la vez, que es bateria tirada a la basura. */
.mapa-ruta {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .75));
}
.mapa-ruta-linea path {
  fill: none;
  stroke: var(--acento);
  stroke-width: 2;
  stroke-dasharray: 7 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* El trazo se dibuja de la salida a la llegada, asi que restar al desfase
   empuja las rayas hacia delante: siguen el viaje. */
@keyframes ruta-avanza { to { stroke-dashoffset: -12; } }

@media (prefers-reduced-motion: no-preference) {
  .mapa-ruta.esta-viva .mapa-ruta-linea path {
    animation: ruta-avanza 1.6s linear infinite;
  }
}

/* Cada escala son dos circulos: uno transparente y grande que es el que se
   pulsa, y uno pequeno encima que es el que se ve. Sin el de fuera, el blanco
   de clic medía cuatro pixeles y no lo acertaba nadie. */
.mapa-escala {
  pointer-events: auto;          /* la linea no se pulsa; las escalas si */
  cursor: pointer;
}
.mapa-escala-zona { fill: transparent; stroke: none; }
.mapa-escala-punto {
  fill: var(--fondo);
  stroke: var(--acento);
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  transition: r .15s var(--ease-out), stroke-width .15s var(--ease-out);
}
.mapa-escala:hover .mapa-escala-punto,
.mapa-escala:focus-visible .mapa-escala-punto,
.mapa-escala.es-elegida .mapa-escala-punto { r: 7; stroke-width: 2.8; }
.mapa-escala:focus-visible { outline: none; }
.mapa-escala:focus-visible .mapa-escala-punto { stroke: var(--tinta); }
/* Salida hueca, llegada rellena: asi se ve de un vistazo hacia donde va. */
.mapa-escala[data-orden="fin"] .mapa-escala-punto { fill: var(--acento); }

/* --- El punto: pequeno y exacto ------------------------------------------
   Media doce pixeles y sobre un mapa de 700 tapaba media Francia. Para senalar
   un campo de batalla, eso es mentir por exceso. Ahora son seis, con un aro
   fino que lo hace visible sobre cualquier color sin engordarlo. */
.mapa-marcador {
  position: absolute; left: var(--x); top: var(--y);
  width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 0 1.5px var(--fondo), 0 0 0 2.5px var(--acento);
  pointer-events: none;
}

.mapa-pie { font-size: .8rem; color: var(--tinta-suave); margin: .5rem 0 0; }

/* Las escalas del viaje, una por boton. Existen porque el punto del mapa mide
   8,8 px en un movil y no hay forma de agrandarlo: r="16" son unidades del
   viewBox, que mide 1000 de ancho pero se pinta a 335. Y aunque se pudiera,
   doce escalas en 335 px acabarian una encima de otra.
   La norma lo contempla: un objetivo pequeno queda exceptuado si la misma
   funcion tiene otro control que si cumple el tamano. Este es ese control. */
.mapa-escalas {
  list-style: none; margin: .6rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .35rem;
}
/* Sin JavaScript, pulsarlos no hace nada, asi que sin JavaScript no se dibujan
   como botones: se quedan en lo que son entonces, la lista de escalas del
   viaje escrita. Un boton que no responde promete algo que no cumple.
   La marca «js» la pone el script de la cabecera, antes del primer pintado. */
.mapa-escala-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 30px; padding: .25rem .6rem;
  font: inherit; font-size: .78rem; line-height: 1.2;
  color: var(--tinta-media); background: none;
  border: 0; border-radius: 999px;
  text-align: left;
}
.js .mapa-escala-btn {
  background: var(--fondo-alt);
  border: 1px solid var(--linea);
  cursor: pointer;
  transition: border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.js .mapa-escala-btn:hover { border-color: var(--acento); color: var(--tinta); }
.js .mapa-escala-btn[aria-pressed="true"] {
  border-color: var(--acento); color: var(--acento-fuerte);
  background: var(--fondo); font-weight: 600;
}
.mapa-escala-n {
  font-variant-numeric: tabular-nums; font-weight: 650;
  color: var(--tinta-suave); font-size: .72rem;
}
.js .mapa-escala-btn[aria-pressed="true"] .mapa-escala-n { color: var(--acento-fuerte); }

/* Y ya que el punto sigue ahi, que al menos sea lo mas grande que permita el
   sitio. r se puede escribir desde CSS, asi que el radio sube en las pantallas
   estrechas —donde el SVG se encoge— y se queda como estaba en las anchas. */
@media (max-width: 699.98px) {
  .mapa-escala-zona { r: 34; }
}
.mapa-rotulo { font-weight: 600; }
.mapa-nota { opacity: .75; }
.mapa-elegida {
  display: block; margin-top: .35rem;
  font-weight: 600; color: var(--acento-fuerte);
}

/* =============================================================
   9. El globo
   ============================================================= */
.globo { margin-block: 3rem; padding-block: 2.5rem; background: var(--fondo-alt); border-block: 1px solid var(--linea); }
.globo-intro { color: var(--tinta-media); max-width: 62ch; }
.globo-caja {
  display: grid; gap: 1rem; margin-top: 1.2rem;
  border: 1px solid var(--linea); border-radius: var(--r-l);
  background: var(--fondo); padding: 1rem; box-shadow: var(--sombra-s);
}
.globo-lienzo {
  position: relative; aspect-ratio: 4 / 3; max-height: 520px;
  display: grid; place-items: center;
  border-radius: var(--r-m); overflow: hidden;
  background: radial-gradient(circle at 50% 45%, var(--fondo-alt), var(--fondo));
}
.globo-lienzo canvas { width: 100%; height: 100%; display: block; }
.globo-aviso {
  max-width: 34ch; text-align: center; font-size: .88rem;
  color: var(--tinta-suave); margin: 0; padding: 1rem;
}
/* Mismo criterio que la barra de mandos de la línea: el deslizador de años no
   hace nada sin JavaScript, y un mando muerto engaña más que un hueco. Se
   esconde con visibility, no con display, para que el sitio quede reservado y
   la página no dé un salto cuando aparezca. */
.globo-barra { display: grid; gap: .4rem; visibility: hidden; }
/* Y aparece cuando arranca EL GLOBO, no cuando arranca el JavaScript.
   Con .is-ready bastaba para el caso «sin JavaScript», pero no para el otro:
   mientras el globo no se ha cargado —y no se carga hasta que te acercas a
   él— la barra se veía con un deslizador que iba de 0 a 0 y un rótulo que
   ponía «Año: 2010» sin venir a cuento. Un mando muerto, que es justo lo que
   esta casa no permite. */
.globo.esta-listo .globo-barra { visibility: visible; }
.globo-anio { font-size: .85rem; font-weight: 600; color: var(--tinta-media); }
.globo-anio output { font-variant-numeric: tabular-nums; color: var(--acento-fuerte); }
.globo-barra input[type="range"] { width: 100%; accent-color: var(--acento); }
.globo-fuente { font-size: .75rem; color: var(--tinta-suave); margin: 0; min-height: 1.2em; }
.globo-leyenda { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .76rem; color: var(--tinta-suave); margin: 0; }
.globo-leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.globo-leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.globo-seguir {
  justify-self: start; padding: .35rem .7rem; font-size: .78rem;
  background: transparent; border: 1px solid var(--acento);
  border-radius: 999px; cursor: pointer; color: var(--acento-fuerte);
}
.globo-seguir:hover { background: var(--acento-suave); }

/* =============================================================
   9b. El creador de líneas del tiempo
   -------------------------------------------------------------
   Dos columnas en escritorio: a la izquierda se monta, a la derecha se ve
   cómo va quedando. En móvil se apilan, y el panel va primero porque es
   donde se trabaja.

   Nada de esto existe sin JavaScript, así que el bloque entero nace con
   [hidden] y lo enseña el propio creador al arrancar. Un formulario que no
   guarda nada es peor que un aviso que dice que hace falta JavaScript.
   ============================================================= */
.creador { display: grid; gap: 1.5rem; margin-block: 1.5rem; }

.creador-panel, .creador-lienzo {
  border: 1px solid var(--linea); border-radius: var(--r-l);
  background: var(--fondo-alt); padding: 1.1rem;
}
.creador-lienzo { background: var(--fondo); }

.campo { display: block; margin-bottom: .8rem; }
.campo > span {
  display: block; font-size: .8rem; font-weight: 600;
  color: var(--tinta-media); margin-bottom: .25rem;
}
.campo > span em { font-weight: 400; font-style: normal; color: var(--tinta-suave); }
.campo input {
  width: 100%; font: inherit; font-size: .95rem;
  padding: .5rem .7rem; color: var(--tinta);
  background: var(--fondo); border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-s);
}
.campo input:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.campo-fila { display: flex; gap: .8rem; align-items: flex-end; }
.campo-fila .campo { flex: 1; }
.campo-check { display: flex; align-items: center; gap: .4rem; padding-bottom: .55rem; }
.campo-check input { width: auto; }
.campo-check span { font-size: .85rem; color: var(--tinta-media); margin: 0; }

.creador-pestanas { display: flex; gap: .3rem; margin: 1rem 0 .8rem; }
.creador-pestanas button {
  flex: 1; padding: .45rem .6rem; font-size: .85rem; font-weight: 600;
  background: transparent; border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-s); cursor: pointer; color: var(--tinta-media);
}
.creador-pestanas button[aria-selected="true"] {
  background: var(--acento); border-color: var(--acento); color: #fff;
}
[data-tema="oscuro"] .creador-pestanas button[aria-selected="true"] { color: #16130f; }

.creador-pista { font-size: .8rem; color: var(--tinta-suave); margin: .2rem 0 .5rem; }

.creador-resultados { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; }
.creador-resultados button {
  display: flex; align-items: baseline; gap: .6rem; width: 100%;
  padding: .45rem .6rem; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: var(--r-s);
  border-bottom: 1px solid var(--linea);
}
.creador-resultados button:hover { background: var(--acento-suave); }
.cr-r-anio {
  flex: 0 0 6.5rem; font-size: .78rem; font-weight: 650;
  color: var(--acento-fuerte); font-variant-numeric: tabular-nums;
}
.cr-r-titulo { flex: 1; font-size: .88rem; color: var(--tinta); }
.cr-r-mas { color: var(--acento); font-weight: 700; }

.creador-cabeza { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.creador-cuenta { color: var(--tinta-suave); font-weight: 400; }
.creador-guardado {
  margin: 0 0 0 auto; font-size: .76rem; color: var(--tinta-suave); min-height: 1.2em;
}
.creador-vacio { font-size: .9rem; color: var(--tinta-suave); }

.creador-lista { list-style: none; margin: .8rem 0 0; padding: 0; }
.cr-item {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .55rem 0; border-bottom: 1px solid var(--linea);
}
.cr-anio {
  flex: 0 0 6.5rem; font-size: .8rem; font-weight: 650;
  color: var(--acento-fuerte); font-variant-numeric: tabular-nums; padding-top: .1rem;
}
.cr-cuerpo { flex: 1; font-size: .92rem; }
.cr-resumen { display: block; font-size: .84rem; color: var(--tinta-suave); margin-top: .15rem; }
.cr-mio {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--acento-fuerte); border: 1px solid currentColor;
  border-radius: 999px; padding: 0 .35rem; margin-left: .4rem;
}
.cr-quitar {
  flex: none; width: 28px; height: 28px; line-height: 1;
  font-size: 1.1rem; cursor: pointer; color: var(--tinta-suave);
  background: transparent; border: 1px solid var(--linea-fuerte); border-radius: 50%;
}
.cr-quitar:hover { border-color: var(--t-guerra); color: var(--t-guerra); }

.creador-acciones {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  margin-block: 1rem 1.5rem;
}
.btn-principal, .btn-secundario, .btn-texto {
  font: inherit; font-size: .9rem; font-weight: 600;
  padding: .55rem 1rem; border-radius: var(--r-s); cursor: pointer;
}
.btn-principal { background: var(--acento); color: #fff; border: 1px solid var(--acento); }
[data-tema="oscuro"] .btn-principal { color: #16130f; }
.btn-principal:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }
.btn-secundario {
  background: transparent; color: var(--tinta);
  border: 1px solid var(--linea-fuerte);
}
.btn-secundario:hover { border-color: var(--acento); color: var(--acento-fuerte); }
.btn-texto {
  background: transparent; border: 0; color: var(--tinta-suave);
  margin-left: auto; text-decoration: underline;
}
.btn-texto:hover { color: var(--t-guerra); }

/* La ventana que sale DESPUÉS de que empiece la descarga. Nunca antes: un
   anuncio que hay que ver para conseguir el archivo es un peaje, y los peajes
   están prohibidos por las políticas de AdSense. Por eso el título dice
   «Descarga empezada» y no «Espera»: porque es verdad. */
.modal-publi {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: 1.25rem;
  background: rgba(12, 10, 8, .62);
}
.modal-publi-caja {
  width: min(560px, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--fondo); border-radius: var(--r-l);
  padding: 1.4rem; box-shadow: var(--sombra-l); text-align: center;
}
.modal-publi-ok { font-size: 1.15rem; font-weight: 700; margin: 0 0 .2em; }
.modal-publi-ok::before { content: "✓ "; color: var(--t-exploracion); }
.modal-publi-sub { font-size: .88rem; color: var(--tinta-media); }
.modal-publi .ad-slot { margin-block: 1rem; }
body.con-modal { overflow: hidden; }

@media (min-width: 960px) {
  .creador { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: start; }
  .creador-panel { position: sticky; top: calc(var(--alto-barra) + 1rem); }
}

/* =============================================================
   9c. El juego: «¿Antes o después?»
   -------------------------------------------------------------
   Tiene que parecer una partida y no un formulario. Dos cartas grandes, dos
   botones grandes y un marcador que solo dice la racha. Ninguna nota, ningún
   porcentaje, ninguna barra de progreso: nada que se parezca a una
   calificación, porque en cuanto aparece un número sobre diez la cabeza entra
   en modo examen y deja de jugar.
   ============================================================= */
.jg-marcador {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  margin-block: 1.2rem .6rem;
}
.jg-racha { margin: 0; font-size: 1.05rem; color: var(--tinta-media); }
.jg-racha strong {
  font-size: 1.5rem; color: var(--acento-fuerte);
  font-variant-numeric: tabular-nums;
}
.jg-llama { color: var(--acento); }
.jg-mejor { margin: 0 0 0 auto; font-size: .82rem; color: var(--tinta-suave); }

.jg-mesa { display: grid; gap: .9rem; margin-block: .5rem 1.2rem; }
.jg-carta {
  border: 1px solid var(--linea-fuerte); border-radius: var(--r-l);
  padding: 1.1rem 1.2rem; background: var(--fondo-alt);
}
/* La carta del reto es la que importa: se destaca con el color de acento para
   que la vista sepa dónde está la pregunta sin tener que leer la etiqueta. */
.jg-reto { border-color: var(--acento); background: var(--fondo); }
.jg-etiqueta {
  margin: 0 0 .2em; font-size: .78rem; color: var(--tinta-suave);
  text-transform: uppercase; letter-spacing: .06em;
}
.jg-anio {
  margin: 0; font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: 800;
  letter-spacing: -.02em; color: var(--acento-fuerte);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
/* El «?» del año escondido tiene que leerse: es la señal de que ahí está
   la pregunta. Con --linea-fuerte quedaba a 1,47:1 y era casi invisible. */
.jg-anio--oculto { color: var(--tinta-suave); }
.jg-titulo { margin: .1em 0 0; font-size: 1.05rem; font-weight: 650; }

.jg-botones { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.jg-grande {
  width: 100%; padding-block: .9rem; font-size: 1.05rem;
  justify-content: center;
}
#jg-seguir { width: 100%; }

.jg-veredicto { min-height: 1.6em; margin: .8rem 0 .2rem; font-size: 1rem; }
.jg-bien { color: var(--t-exploracion); font-weight: 650; }
.jg-mal { color: var(--t-guerra); font-weight: 650; }
.jg-leer { margin: 0 0 1rem; font-size: .92rem; }

.jg-filtro {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin-block: 2rem 1rem; padding-top: 1.2rem;
  border-top: 1px solid var(--linea);
}
.controles-bolsa { flex-wrap: wrap; border-radius: var(--r-m); }
.controles-bolsa button { border-right: 1px solid var(--linea-fuerte); }
.controles-bolsa button:last-child { border-right: 0; }
.jg-vacio { color: var(--tinta-suave); }

kbd {
  font: inherit; font-size: .85em; padding: .05em .4em;
  border: 1px solid var(--linea-fuerte); border-bottom-width: 2px;
  border-radius: 5px; background: var(--fondo-alt);
}

.nav-jugar {
  flex: none; white-space: nowrap;
  padding: .35rem .75rem; border-radius: var(--r-s);
  font-size: .85rem; font-weight: 650; text-decoration: none;
  color: var(--tinta-media);
}
.nav-jugar:hover { background: var(--fondo-alt); color: var(--tinta); }
.nav-jugar[aria-current="page"] { color: var(--acento-fuerte); background: var(--acento-suave); }

@media (min-width: 720px) {
  .jg-mesa { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

/* =============================================================
   9d. El banner de consentimiento
   -------------------------------------------------------------
   Abajo, no en el centro: no tapa el contenido y no hay que despacharlo para
   poder leer. Y los dos botones miden lo mismo y pesan lo mismo. Eso no es
   estética, es la ley: rechazar tiene que costar lo mismo que aceptar, y los
   banners con un «Aceptar» de colores y un «no» escondido son justo los que
   han acabado multados.
   ============================================================= */
.consent {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 400;
  padding: .75rem;
}
.consent-caja {
  max-width: 900px; margin-inline: auto;
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  padding: 1rem 1.15rem;
  background: var(--fondo); border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-l); box-shadow: var(--sombra-l);
}
.consent-texto { flex: 1 1 20rem; }
.consent-texto p { margin: 0 0 .35em; font-size: .88rem; color: var(--tinta-media); }
.consent-titulo { font-weight: 700; color: var(--tinta); font-size: .95rem; }
.consent-nota { font-size: .8rem; color: var(--tinta-suave); }
.consent-botones { display: flex; gap: .6rem; flex: 0 0 auto; margin-left: auto; }
.consent-btn {
  min-width: 8.5rem; font: inherit; font-size: .9rem; font-weight: 600;
  padding: .55rem 1rem; border-radius: var(--r-s); cursor: pointer;
  text-align: center;
  background: transparent; color: var(--tinta);
  border: 1px solid var(--tinta-media);
}
.consent-btn:hover { border-color: var(--acento); color: var(--acento-fuerte); }

/* El enlace del pie para cambiar de idea. Tiene que existir: un consentimiento
   que no se puede retirar no es un consentimiento. */
.pie-consent {
  font: inherit; font-size: inherit; cursor: pointer;
  background: none; border: 0; padding: 0;
  color: inherit; text-decoration: underline;
}

@media (max-width: 539px) {
  .consent-botones { width: 100%; margin-left: 0; }
  .consent-botones button { flex: 1; min-width: 0; }
  /* Cada pixel del aviso es un pixel de linea del tiempo tapado. Se recorta
     el relleno, NO los botones: siguen midiendo lo mismo los dos. */
  .consent-caja { padding: .7rem .8rem; gap: .7rem; }
}

/* =============================================================
   9e. «Un día como hoy»
   -------------------------------------------------------------
   Nace oculto porque lo rellena el JavaScript con la fecha del visitante: un
   bloque vacío con un título prometiendo efemérides sería peor que no tenerlo.

   Y va DEBAJO de la línea, aunque sea lo único que cambia cada día. Estaba
   arriba del todo, y ahí hacía dos daños a la vez: en un móvil de 375 px
   empujaba la línea del tiempo del píxel 319 al 726 —medido— y lo hacía
   DESPUÉS del primer pintado, así que quien ya estaba mirando la portada veía
   saltar la página entera bajo el dedo.

   Reservarle el hueco no vale: su altura no se sabe de antemano. Si hoy hay
   una efeméride enseña una; si no hay ninguna, enseña las de los días más
   cercanos, que hoy son seis. Entre 100 px y 370 px según el día.
   ============================================================= */
.efemerides {
  margin-block: 1.2rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--linea-fuerte);
  border-left: 3px solid var(--acento);
  border-radius: var(--r-m);
  background: var(--fondo-alt);
}
.efemerides .seccion-titulo { font-size: 1.05rem; margin-bottom: .4rem; }
.efem-nota { font-size: .82rem; color: var(--tinta-suave); margin: 0 0 .5rem; }
.efem-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.efem-lista a {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: .05rem .8rem; align-items: baseline;
  padding: .4rem .5rem; border-radius: var(--r-s);
  text-decoration: none; color: var(--tinta);
}
.efem-lista a:hover { background: var(--fondo); }
.efem-anio {
  font-size: .82rem; font-weight: 700; color: var(--acento-fuerte);
  font-variant-numeric: tabular-nums;
}
.efem-titulo { font-size: .95rem; font-weight: 600; }
.efem-fecha { grid-column: 2; font-size: .76rem; color: var(--tinta-suave); }
.efem-mas { margin: .6rem 0 0; font-size: .88rem; font-weight: 600; }

/* --- El paso de una pagina a otra de una coleccion partida ----------------
   Va justo debajo de la linea, no al final del todo: quien llega al ultimo
   suceso de la pagina 2 quiere seguir, y hacerle atravesar la introduccion,
   los anuncios y las preguntas frecuentes para encontrar el enlace es
   perderlo. Los dos enlaces se estiran a los lados y la cuenta queda en medio. */
.nav-paginas {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap;
  margin-block: 1rem 1.4rem;
}
.nav-paginas-cuenta {
  font-size: .82rem; color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
/* Cuando solo hay «siguiente» (pagina 1), la cuenta no debe irse al centro
   dejando un hueco a la izquierda: se empuja el grupo entero a la derecha. */
.nav-paginas > :first-child:not(.nav-era--ant) { margin-inline-start: auto; }

/* --- El calendario de /efemerides/ ---------------------------------------
   Doce bloques, uno por mes, y dentro los dias como casillas cuadradas.

   Las casillas miden 2.75rem (44 px con la raiz por defecto) y no lo que
   ocuparia el numero. Es el minimo que se puede tocar con el pulgar sin
   fallar, y aqui hay 366 objetivos pegados unos a otros: si se quedaran del
   tamano de su texto, en un movil se acertaria de casualidad.

   El numerito de arriba a la derecha es cuantos sucesos tiene ese dia. El
   generador solo lo escribe cuando hay mas de uno: ver un "1" repetido 350
   veces no informa de nada y ensucia la rejilla. Por eso aqui no hay ninguna
   regla para ocultarlo — si el span esta, es porque dice algo. */
.efem-calendario {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  margin-block: 1rem 1.6rem;
}
.efem-mes h2 {
  font-size: .95rem; margin: 0 0 .45rem;
  color: var(--tinta-suave); text-transform: capitalize;
  letter-spacing: .02em;
}
.efem-dias {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem;
}
.efem-dias a {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 2.75rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-s);
  text-decoration: none; color: var(--tinta);
  font-variant-numeric: tabular-nums; font-size: .88rem;
}
.efem-dias a:hover,
.efem-dias a:focus-visible {
  background: var(--acento); color: #fff; border-color: var(--acento);
}
.efem-cuenta {
  position: absolute; top: 1px; right: 3px;
  font-size: .6rem; font-weight: 700; color: var(--acento-fuerte);
}

/* =============================================================
   9f. Las personas
   -------------------------------------------------------------
   Tres piezas que comparten la misma cara redonda:

     · «Quién está detrás», dentro de la ficha de un suceso;
     · «Vivió a la vez que», dentro de la ficha de una persona;
     · la rejilla del índice de /figuras/.

   La cara va recortada en círculo y con object-position alta a propósito. Las
   imágenes que designa Wikidata para una persona casi nunca son un primer
   plano: son retratos de cuerpo entero, bustos fotografiados de lejos, cuadros
   con marco. Centrando el recorte se obtiene una colección de torsos sin
   cabeza; subiendo el encuadre al 22 % se acierta con la cara en la inmensa
   mayoría de los casos.

   Cuando no hay foto con licencia comprobada van las iniciales en un círculo
   del MISMO tamaño. Eso es lo importante: sin el sustituto, media rejilla
   tendría hueco y la otra media no, y la lista bailaría.
   ============================================================= */
/* El oficio, junto a las fechas de vida. Tiene la forma de la etiqueta de tema
   de los sucesos, pero es una clase aparte: los temas son un vocabulario
   cerrado con su color, y «Rey de Macedonia» no es un tema. Reutilizar allí el
   atributo data-tema con un valor inventado deja la etiqueta sin color y, lo
   que es peor, mete basura en un vocabulario que sí se valida. */
.figura-oficio {
  display: inline-block;
  font-size: .68rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinta-media);
  border: 1px solid var(--linea-fuerte); border-radius: 999px;
  padding: .05rem .5rem;
}
/* Sin `opacity`, a diferencia de la etiqueta de tema de los sucesos. Una
   opacidad del 85 % sobre un texto que ya iba a 4,7:1 lo baja a 4,0 y deja de
   cumplir el mínimo legible, y esto es letra de 11 px en mayúsculas: justo el
   tamaño donde eso se nota. Se rebaja el color en vez de la opacidad. */

.persona-cara, .figura-cara {
  flex: 0 0 auto; border-radius: 50%; object-fit: cover;
  object-position: 50% 22%;
  background: var(--fondo-alt); border: 1px solid var(--linea);
}
.persona-cara { width: 44px; height: 44px; }
.figura-cara  { width: 60px; height: 60px; }

.persona-cara--letras, .figura-cara--letras {
  display: grid; place-items: center;
  font-weight: 700; color: var(--tinta-suave); letter-spacing: .02em;
}
.persona-cara--letras { font-size: .82rem; }
.figura-cara--letras  { font-size: 1.05rem; }

/* --- «Quién está detrás», dentro de un suceso --------------------------- */
.ficha-personas { margin-top: 1.1rem; }
.personas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.persona {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem .7rem;
  border: 1px solid var(--linea); border-radius: var(--r-s);
  text-decoration: none; color: var(--tinta);
  transition: border-color .2s var(--ease-out);
}
.persona:hover { border-color: var(--acento); }
.persona-texto { display: grid; gap: .05rem; min-width: 0; }
.persona-nombre { font-weight: 650; font-size: .95rem; }
.persona-vida {
  font-size: .76rem; color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
.persona-papel { font-size: .85rem; color: var(--tinta-media); }

/* «Vivió a la vez que»: sin papel que contar, así que caben dos por fila. */
.personas-lista--rejilla { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

/* --- El recorrido de una vida por la línea del tiempo ------------------- */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.pasos a {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: .1rem .8rem; align-items: baseline;
  padding: .55rem .7rem; border-radius: var(--r-s);
  border: 1px solid var(--linea);
  text-decoration: none; color: var(--tinta);
}
.pasos a:hover { border-color: var(--acento); background: var(--fondo-alt); }
.paso-anio {
  font-size: .82rem; font-weight: 700; color: var(--acento-fuerte);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.paso-texto { display: grid; gap: .1rem; min-width: 0; }
.paso-titulo { font-weight: 600; font-size: .95rem; }
.paso-papel { font-size: .85rem; color: var(--tinta-media); }

/* --- El índice de /figuras/ --------------------------------------------- */
.figuras-saltos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.figuras-saltos a {
  padding: .3rem .75rem; border-radius: 999px;
  border: 1px solid var(--linea-fuerte);
  text-decoration: none; color: var(--tinta); font-size: .85rem; font-weight: 600;
}
.figuras-saltos a:hover { border-color: var(--acento); color: var(--acento-fuerte); }

.figuras-grupo { scroll-margin-top: calc(var(--alto-barra) + 12px); }
.figuras-rejilla {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.figura-tarjeta {
  display: flex; gap: .8rem; height: 100%;
  padding: .75rem .85rem;
  border: 1px solid var(--linea); border-radius: var(--r-m);
  text-decoration: none; color: var(--tinta);
  background: var(--fondo);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.figura-tarjeta:hover { border-color: var(--acento); box-shadow: var(--sombra-s); }
.figura-tarjeta-texto { display: grid; gap: .15rem; align-content: start; min-width: 0; }
.figura-tarjeta-nombre { font-weight: 700; font-size: 1rem; }
.figura-tarjeta-vida {
  font-size: .76rem; color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
.figura-tarjeta-resumen { font-size: .85rem; color: var(--tinta-media); }
.figura-tarjeta-cuenta {
  font-size: .72rem; color: var(--acento-fuerte); font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em;
}

/* La tira de la portada: caras y nombre, nada más. Es un aperitivo, no una
   sección que compita con las edades. */
.figuras-tira { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.figuras-tira a {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .8rem .3rem .3rem; border-radius: 999px;
  border: 1px solid var(--linea-fuerte);
  text-decoration: none; color: var(--tinta); font-size: .88rem; font-weight: 600;
}
.figuras-tira a:hover { border-color: var(--acento); color: var(--acento-fuerte); }
.figuras-tira .persona-cara { width: 32px; height: 32px; }
.figuras-tira .persona-cara--letras { font-size: .7rem; }
.tira-pie { margin-top: .7rem; font-size: .9rem; font-weight: 600; }

/* El desplegable de la cabecera separa las tres formas de entrar: por edad,
   por colección y por persona. */

/* =============================================================
   10. FAQ y listas
   ============================================================= */
.faq { max-width: var(--ancho-columna); }
.faq-item { border-bottom: 1px solid var(--linea); }
.faq-item summary {
  cursor: pointer; padding: .85rem 0; font-weight: 600; font-size: .98rem;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: " +"; color: var(--acento); font-weight: 700; }
.faq-item[open] summary::after { content: " −"; }
.faq-respuesta p { color: var(--tinta-media); font-size: .93rem; max-width: 68ch; padding-bottom: .6rem; }

/* Los atajos de la página 404. Botones grandes y no una lista con puntos:
   quien llega aquí se ha perdido, y lo que necesita es una salida evidente. */
/* La tira de siglos de la portada: enlaces sueltos, no tarjetas. Son un
   atajo para quien ya sabe lo que busca, no una sección que compita con las
   edades. */
.siglos-tira { display: flex; flex-wrap: wrap; gap: .5rem; }
.siglos-tira a {
  padding: .35rem .8rem; border-radius: 999px;
  border: 1px solid var(--linea-fuerte);
  text-decoration: none; color: var(--tinta); font-size: .88rem; font-weight: 600;
}
.siglos-tira a:hover { border-color: var(--acento); color: var(--acento-fuerte); }

/* La cuenta de /paises/: cuantas veces sale cada pais en toda la Cronoteca.
   No son enlaces y no deben parecerlo —no hay una pagina detras de cada
   nombre—, asi que van como lista en columnas, que es lo que son: datos.
   El ancho minimo de 12rem es «Imperio austrohungaro» sin partirse. */
.paises-cuenta {
  list-style: none; margin: 1.1rem 0 0; padding: 0;
  display: grid; gap: 0 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}
.paises-cuenta li {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .35rem .1rem; border-bottom: 1px solid var(--linea);
  font-size: .92rem;
}
.pais-nombre { flex: 1; }
.pais-cuenta {
  color: var(--tinta-suave); font-size: .85rem;
  font-variant-numeric: tabular-nums;
}

.lista-atajos { list-style: none; margin: 1.5rem 0 2rem; padding: 0; display: grid; gap: .5rem; }
.lista-atajos a {
  display: block; padding: .7rem .9rem;
  border: 1px solid var(--linea-fuerte); border-radius: var(--r-m);
  text-decoration: none; color: var(--tinta); font-weight: 600;
}
.lista-atajos a:hover { border-color: var(--acento); color: var(--acento-fuerte); }

.lista-creditos { font-size: .88rem; color: var(--tinta-media); padding-left: 1.1rem; }
.lista-creditos li { margin-bottom: .35rem; }

/* =============================================================
   11. Responsive
   ============================================================= */
/* En pantallas estrechas los mandos ocupaban tres filas enteras antes de que
   empezara la linea del tiempo. Se quitan los rotulos "Detalle" y "Vista": los
   botones ya dicen lo que hacen, y los grupos conservan su etiqueta para quien
   navega con lector de pantalla. */
@media (max-width: 539px) {
  .controles { gap: .5rem; }
  .controles-titulo { display: none; }
  .btn-cerrar-todo { margin-left: 0; }
  .controles-botones button { padding-inline: .6rem; }
  .controles-epoca { margin-left: auto; }
}

@media (min-width: 540px) {
  :root { --gutter: 1.75rem; }
  .datos-clave > div { font-size: .9rem; }
}

@media (min-width: 720px) {
  .suceso { padding-left: calc(var(--punto-hito) + 1.6rem); }
  .ficha-cabeza { padding-inline: 1rem; }
  .ficha-cuerpo { padding-inline: 1rem; font-size: 1rem; }
}

@media (min-width: 960px) {
  .disposicion {
    display: grid;
    grid-template-columns: minmax(0, var(--ancho-columna)) 300px;
    gap: 2.5rem;
    align-items: start;
  }
  .columna-lateral {
    display: block;
    position: sticky;
    top: calc(var(--alto-barra) + 1rem);
  }

  /* El carril horizontal se queda DENTRO de su columna a partir de aqui.
     En movil se sale hasta el borde de la pantalla, que ahi queda bien y no
     hay nada al lado; pero en escritorio hay un carril de anuncios a la
     derecha, y el desbordamiento metia las tarjetas por debajo del anuncio.
     Un anuncio tapando la linea del tiempo es exactamente lo que esta web no
     puede permitirse, asi que aqui manda la columna. */
  .linea[data-orientacion="h"] {
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
  .linea[data-orientacion="h"] .suceso { scroll-margin-inline: 0; }
  .linea-caja::after { right: 0; }

  /* Y si el navegador sabe mirar hacia arriba en el arbol, se hace mejor: con
     la linea en horizontal, la pagina pasa a una sola columna, el carril usa
     todo el ancho (caben tres tarjetas y media en vez de dos) y el hueco de
     publicidad baja y se convierte en un banner ancho.
     El anuncio no desaparece: cambia de sitio y de forma. Lo que no puede
     pasar, y aqui no pasa, es que se coma la herramienta. */
  @supports selector(:has(*)) {
    .disposicion:has(.linea[data-orientacion="h"]) {
      grid-template-columns: minmax(0, 1fr);
    }
    /* El texto sigue midiendo lo que se lee bien; solo el carril se ensancha. */
    .disposicion:has(.linea[data-orientacion="h"]) > .columna-principal > * {
      max-width: var(--ancho-columna);
    }
    /* La hija directa de la columna es ahora la zona, asi que es ella la
       que se libra del ancho de lectura. Pero solo se ensancha el carril:
       si la barra de mandos heredara el ancho suelto, en horizontal se
       estiraria de punta a punta de la pantalla. */
    .disposicion:has(.linea[data-orientacion="h"]) > .columna-principal > .linea-zona {
      max-width: none;
    }
    .disposicion:has(.linea[data-orientacion="h"]) .linea-zona > .controles {
      max-width: var(--ancho-columna);
    }
    .disposicion:has(.linea[data-orientacion="h"]) > .columna-lateral {
      position: static;
    }
    .disposicion:has(.linea[data-orientacion="h"]) .ad-slot[data-formato="lateral"] {
      min-height: 120px;
      margin-block: 1.5rem;
    }
  }
  .globo-caja { grid-template-columns: minmax(0, 1fr) 260px; align-items: start; }
  .globo-barra { align-self: end; }
}

@media (min-width: 1280px) {
  :root { --gutter: 2rem; }
}

/* =============================================================
   12. Impresion y movimiento reducido
   ============================================================= */

/* Un trabajo de clase acaba en papel. Al imprimir se abren todas las fichas,
   desaparecen el menu, los anuncios, el globo y los controles, y la linea sale
   como un documento seguido. */
@media print {
  /* Lo que no va al papel. La lista hay que mantenerla al crecer la web: se
     comprobo aplicando estas mismas reglas sobre una pagina y el banner de
     cookies seguia saliendo, porque es position:fixed y se anade al <body>
     por JavaScript, fuera de la cabecera. Un aviso de cookies impreso en un
     trabajo de clase es exactamente el tipo de detalle que delata que nadie
     probo a imprimir. */
  .cabecera, .controles, .ad-slot, .globo, .pie-enlaces,
  .btn-tema, .skip-link, .nav-eras, .migas,
  .consent, .efemerides, .siglos-tira, .figuras-tira, .figuras-saltos,
  .creador-panel, .creador-acciones, .creador-pestanas,
  .jg-botones, .jg-filtro, #jg-seguir,
  .buscador-campo, .bq-ej { display: none !important; }

  /* «Quién está detrás» y «Vivió a la vez que» son navegación, igual que
     «Relacionado»: en papel un enlace no lleva a ningún sitio. El recorrido de
     una vida por la línea del tiempo SÍ se imprime, porque ahí lo que se lee
     no es el enlace sino qué hizo esa persona en cada parada. */
  .ficha-personas, .figura-vecinos { display: none !important; }
  .figura-recorrido { break-inside: avoid; }

  html, body { background: #fff !important; color: #000 !important; }
  .disposicion { display: block !important; }
  .columna-lateral { display: none !important; }

  /* Sin esto, el navegador solo imprimiria las fichas abiertas y las que
     estuvieran dentro de la pantalla.

     Y hacen falta las DOS reglas. Un <details> cerrado ya no esconde su
     contenido con una propiedad del hijo: los navegadores actuales lo hacen en
     el pseudoelemento ::details-content, que no se ve desde el hijo. Se
     comprobo: con solo el display:block, checkVisibility() del cuerpo seguia
     devolviendo false y en papel salian los titulos sin el texto —justo lo
     contrario de lo que esta hoja promete. La primera regla arregla los
     navegadores de hoy; la segunda sigue haciendo falta para los de ayer. */
  details::details-content { content-visibility: visible !important; }
  .ficha .ficha-cuerpo, .faq-respuesta { display: block !important; }
  .suceso { content-visibility: visible !important; break-inside: avoid; margin-top: 12px !important; }

  /* En papel siempre se imprime en vertical, este como este la pantalla: un
     carril horizontal en una hoja A4 solo imprimiria las tres primeras
     tarjetas y cortaria el resto por la mitad. */
  .linea[data-orientacion="h"] {
    display: block !important; overflow: visible !important;
    margin-inline: 0 !important; padding: 0 !important;
  }
  .linea[data-orientacion="h"] .suceso {
    width: auto !important; margin-left: 0 !important;
    padding-top: 0 !important;
    padding-left: calc(var(--punto-hito) + 1.2rem) !important;
  }
  .linea[data-orientacion="h"] .suceso:last-child { margin-right: 0 !important; }
  .linea[data-orientacion="h"] .suceso-eje {
    left: calc(var(--punto-hito) / 2) !important;
    right: auto !important; top: 0 !important;
    width: var(--eje) !important; height: auto !important; bottom: 0 !important;
  }
  .linea[data-orientacion="h"] .suceso-punto {
    left: 50% !important;
    top: calc(var(--punto-centro) - var(--punto) / 2) !important;
  }
  .linea[data-orientacion="h"] .suceso[data-imp="5"] .suceso-punto {
    top: calc(var(--punto-centro) - var(--punto-hito) / 2) !important;
  }
  .linea[data-orientacion="h"] .ficha-cuerpo {
    max-height: none !important; overflow: visible !important;
  }
  .linea[data-orientacion="h"] .ficha-resumen {
    display: block !important; overflow: visible !important;
  }
  .linea-caja::after { display: none !important; }
  /* El objeto es un adorno de pantalla: en papel solo seria una mancha
     de tinta encima del titulo. */
  .suceso-objeto { display: none !important; }
  .ficha-cabeza { background: none !important; }
  .ficha-relacionados, .ficha-enlaces { display: none; }
  .mapa-lienzo { background: #ddd !important; }
  a { color: #000 !important; text-decoration: none; }
  .ficha-fuentes a::after { content: " (" attr(href) ")"; font-size: .7em; color: #555; }
}

/* Solo se apagan los movimientos intrusivos. Las transiciones de hover y los
   cambios de color se quedan: quitarlas no ayuda a nadie y empeora la
   sensacion de que la web responde. */
@media (prefers-reduced-motion: reduce) {
  .suceso:hover .suceso-punto { transform: none; }
  .card-era:hover { transform: none; }
}

/* =============================================================
   14. La genealogía de los géneros
   -------------------------------------------------------------
   Solo la usa la línea de la música, pero no lleva nada específico
   de ella: cualquier colección cuyos sucesos declaren `deriva_de`
   la hereda. La relación es dirigida —de dónde viene, qué salió—
   y por eso los dos bloques no son simétricos: el de arriba lleva
   el motivo escrito y el de abajo solo el nombre. El motivo vive
   en la ficha del hijo, y repetirlo en la del padre pondría el
   mismo párrafo en dos direcciones.
   ============================================================= */

.ficha-genealogia {
  display: grid; gap: 1rem;
  margin: 1.3rem 0;
  padding: .9rem 1rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  background: var(--fondo-alt);
}
@media (min-width: 720px) {
  .ficha-genealogia { grid-template-columns: 1fr 1fr; }
}
.gen-rama h3 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-suave); margin: 0 0 .5rem;
}
.gen-rama ul { list-style: none; margin: 0; padding: 0; }
.gen-rama li { margin-bottom: .6rem; }
.gen-rama li:last-child { margin-bottom: 0; }

.gen-padre, .gen-hijo {
  display: inline-flex; align-items: baseline; gap: .45rem;
  font-weight: 600; color: var(--acento-fuerte); text-decoration: none;
  /* 24 px de alto minimo aunque el texto sea mas bajo: es un objetivo
     tactil, y en esta web ya hay un problema de dianas de once pixeles
     en los mapas como para anadir otro. */
  min-height: 24px;
}
/* El subrayado va puesto siempre, no solo al pasar por encima. En un movil
   no hay «pasar por encima»: si el enlace solo se distingue con el raton,
   en el telefono es texto en negrita que nadie toca. */
.gen-padre .gen-nombre,
.gen-hijo .gen-nombre { text-decoration: underline; }
.gen-padre:hover, .gen-hijo:hover,
.gen-padre:focus-visible, .gen-hijo:focus-visible { color: var(--acento); }
.gen-anio {
  font-size: .78rem; font-variant-numeric: tabular-nums;
  color: var(--tinta-suave); font-weight: 500;
}
/* El «por qué», que es la mitad del contenido de esta colección. */
.gen-por {
  display: block; font-size: .85rem; line-height: 1.45;
  color: var(--tinta-media); max-width: 52ch; margin-top: .1rem;
}

/* -------------------------------------------------------------
   El árbol de la cabecera de la colección.
   El SVG lo escribe Python con el eje X en escala de tiempo. Aquí
   solo se le ponen los colores del tema y se le deja desplazarse
   a lo ancho en pantallas donde no cabe: mil píxeles de ancho no
   entran en un móvil, y encogerlo hasta que quepa dejaría el
   texto en cuatro píxeles.
   ------------------------------------------------------------- */
.arbol-caja { margin: 0 0 1.6rem; }
.arbol-caja figcaption {
  font-size: .85rem; color: var(--tinta-media);
  margin-bottom: .6rem; max-width: 62ch;
}
.arbol-desliza {
  overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--linea); border-radius: var(--r-m);
  background: var(--fondo-alt); padding: .5rem;

  /* Sombras que aparecen solo por el lado al que aún queda diagrama.
     El truco es 'background-attachment': las dos primeras capas viajan
     con el contenido ('local') y tapan a las dos sombras, que se quedan
     pegadas al marco ('scroll'). Cuando el contenido se desplaza, la
     tapa se va y la sombra asoma. Cero JavaScript. */
  background-image:
    linear-gradient(to right, var(--fondo-alt), transparent),
    linear-gradient(to left,  var(--fondo-alt), transparent),
    linear-gradient(to right, var(--linea-fuerte), transparent),
    linear-gradient(to left,  var(--linea-fuerte), transparent);
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
/* El árbol se dibuja a tamaño real y se desliza; nunca se encoge, porque
   encogerlo dejaría el texto de las cajas por debajo de 12 px y con eso
   deja de leerse. Hace falta anular el `max-width: 100%` que la regla
   general de la hoja pone a todo `svg`: con él, un árbol de 2.924 px se
   metía a la fuerza en la columna de 758 y salía al 34 %, con las
   etiquetas en cuatro píxeles. El ancho real lo trae el SVG en su
   atributo `width`, que Python calcula según cuántas cajas haya. */
.arbol {
  display: none; height: auto;
  max-width: none; min-width: 1000px;
}

/* El mismo árbol dibujado hacia abajo, que es el que se ve en el móvil.
   No se escala: mide 340 px de ancho y con eso cabe en cualquier teléfono
   sin encoger el texto. Lo que gasta es alto, que en una pantalla que ya se
   recorre con el dedo no cuesta nada. */
.arbol-v {
  display: none; height: auto;
  max-width: 100%; margin-inline: auto;
}

/* El mismo dibujo hacia abajo, pero dibujado a 700 px de ancho: solo existe en
   la página propia del árbol, que es donde sobra sitio. Son dos SVG y no uno
   estirado con CSS porque al escalar un SVG escala también el texto: el mismo
   dibujo servido a 340 y a 700 daría letras de 12 px en el móvil y de 25 en el
   ordenador. Con dos, las letras miden lo mismo y lo que crece es la caja. */
.arbol-v2 {
  display: none; height: auto;
  max-width: 100%; margin-inline: auto;
}
/* El color lo pone la coleccion en --color-arbol (Python lo escribe en el
   <figure> con el tema que mas se repite entre las cajas). Estaba cableado a
   --t-musica, asi que el arbol de los inventos salia marron de musica. La
   variable de musica se queda de respaldo por si alguna vez falta el dato. */
.arbol-v .arbol-rabo, .arbol-v2 .arbol-rabo,
.arbol-v .arbol-punto, .arbol-v2 .arbol-punto {
  stroke: var(--color-arbol, var(--t-musica)); fill: none;
  stroke-width: 1.6; opacity: .8;
}
.arbol-v .arbol-punto, .arbol-v2 .arbol-punto { fill: var(--fondo-alt); }

/* Python dibuja un árbol por nivel de detalle —uno para «Solo hitos», otro
   para «Normal», otro para «Todo»— y aquí solo se enseña el que pide el
   atributo. No se puede filtrar con CSS sobre un único dibujo: esconder una
   caja dejaría sus flechas colgando en el aire y un hueco donde estaba.
   `~=` y no `=` porque dos niveles que dan el mismo dibujo comparten SVG y
   entonces el atributo trae los dos números.
   Sin JavaScript también funciona: el atributo del contenedor lo escribe el
   generador con el valor inicial de la colección.

   Por debajo de 700 px manda la versión vertical. Ese es el ancho a partir
   del cual el dibujo horizontal deja de ser una tortura: el de «Solo hitos»
   mide 1.156 px, así que a 760 se desliza una vez y media, y a 375 tres
   veces y media. */
/* Por debajo de 700 px, SIEMPRE hacia abajo, se haya pulsado lo que se haya
   pulsado. El boton de vista gobierna la linea del tiempo y tambien el arbol,
   pero un dibujo de 1.300 px en una pantalla de 375 son tres pantallas y media
   de arrastre lateral: elegir eso no es una preferencia, es un accidente. */
@media (max-width: 699.98px) {
  .arbol-caja[data-densidad="1"] .arbol-v[data-niveles~="1"],
  .arbol-caja[data-densidad="2"] .arbol-v[data-niveles~="2"],
  .arbol-caja[data-densidad="3"] .arbol-v[data-niveles~="3"] { display: block; }
  /* Nada que deslizar: el vertical cabe de sobra a lo ancho. */
  .arbol-desliza { overflow-x: visible; background-image: none; }
}

/* De 700 px para arriba manda el boton: a lo ancho por defecto —y para quien
   llega sin JavaScript, que es lo que habia— y hacia abajo si lo pide. El
   dibujo vertical es el que mejor se lee, y hasta ahora en un ordenador no
   habia forma de pedirlo. */
@media (min-width: 700px) {
  .arbol-caja:not([data-vista="v"])[data-densidad="1"] .arbol[data-niveles~="1"],
  .arbol-caja:not([data-vista="v"])[data-densidad="2"] .arbol[data-niveles~="2"],
  .arbol-caja:not([data-vista="v"])[data-densidad="3"] .arbol[data-niveles~="3"],
  .arbol-caja[data-vista="v"][data-densidad="1"] .arbol-v[data-niveles~="1"],
  .arbol-caja[data-vista="v"][data-densidad="2"] .arbol-v[data-niveles~="2"],
  .arbol-caja[data-vista="v"][data-densidad="3"] .arbol-v[data-niveles~="3"] { display: block; }
  .arbol-caja[data-vista="v"] .arbol-desliza {
    overflow-x: visible; background-image: none;
  }
  /* Donde hay sitio —solo la página propia, que es la que pone data-ancho—
     sale el vertical de 700 px en lugar del de 340. El `[data-niveles]` de
     sobra en la regla que esconde no es un descuido: iguala la especificidad
     de las tres reglas de arriba, que traen un atributo más. */
  .arbol-caja[data-ancho="2"][data-vista="v"][data-densidad="1"] .arbol-v2[data-niveles~="1"],
  .arbol-caja[data-ancho="2"][data-vista="v"][data-densidad="2"] .arbol-v2[data-niveles~="2"],
  .arbol-caja[data-ancho="2"][data-vista="v"][data-densidad="3"] .arbol-v2[data-niveles~="3"] { display: block; }
  .arbol-caja[data-ancho="2"][data-vista="v"] .arbol-v[data-niveles] { display: none; }
}

/* Al 55 % y 1,4 px las flechas casi no se veian sobre el fondo alterno, que es
   lo que hacia que el dibujo pareciera cajas sueltas en vez de un arbol. */
/* El `>` deja fuera la punta de flecha, que vive en un <defs> dentro de este
   mismo grupo y se pinta rellena, no trazada. */
.arbol-flechas > path {
  stroke: var(--color-arbol, var(--t-musica)); stroke-width: 1.6; opacity: .8;
  fill: none; stroke-linejoin: round; stroke-linecap: round;
}
.arbol-punta {
  fill: var(--color-arbol, var(--t-musica)); stroke: none; opacity: .8;
}
/* --linea sobre --fondo-alt da tan poco contraste que la caja se confunde con
   el fondo del recuadro; --linea-fuerte es la misma familia, un tono mas. */
.arbol-cajas rect {
  fill: var(--fondo); stroke: var(--linea-fuerte); stroke-width: 1;
}
.arbol-cajas a:hover rect {
  stroke: var(--color-arbol, var(--t-musica)); stroke-width: 2;
}
.arbol-cajas text {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  fill: var(--tinta);
}
.arbol-cajas text.arbol-anio {
  font-size: 10.5px; font-weight: 500; fill: var(--tinta-suave);
}
/* La frase que solo sale en el árbol vertical ancho, a la derecha de la
   etiqueta. Es el título del suceso, y va apagada a propósito: manda la
   etiqueta, que es lo que forma el árbol. */
.arbol-cajas text.arbol-frase {
  font-size: 10.5px; font-weight: 400; fill: var(--tinta-suave);
}
.arbol-decada {
  font-family: var(--sans); font-size: 10.5px;
  fill: var(--tinta-suave); text-anchor: middle;
}
.arbol-cajas a { text-decoration: none; }

/* Seguir una rama. Cuando el raton o el tabulador se posan en una caja, el
   JavaScript marca su ascendencia y su descendencia y pone .hay-foco en el
   dibujo; aqui solo se apaga lo que no es de la rama. Es pintura: ni una caja
   se mueve de sitio, asi que el dibujo no baila al pasar por encima.
   Arriba y abajo se encienden igual: la direccion ya la dice la punta de la
   flecha, y dos colores mas serian ruido en un dibujo que ya lleva el del
   tema. */
.hay-foco .arbol-cajas a:not(.es-rama):not(.es-foco),
.hay-foco .arbol-cajas .arbol-rabo:not(.es-rama):not(.es-foco),
.hay-foco .arbol-cajas .arbol-punto:not(.es-rama):not(.es-foco) { opacity: .18; }
.hay-foco .arbol-flechas > path:not(.es-rama) { opacity: .1; }
.hay-foco .arbol-flechas > path.es-rama { opacity: 1; stroke-width: 2.2; }
.hay-foco .arbol-cajas a.es-foco rect {
  stroke: var(--color-arbol, var(--t-musica)); stroke-width: 2.5;
}
@media (prefers-reduced-motion: no-preference) {
  .arbol-cajas a, .arbol-flechas > path { transition: opacity .12s var(--ease-out, ease); }
}
/* El foco tiene que verse tambien dentro del SVG: se navega con teclado. */
.arbol-cajas a:focus-visible rect { stroke: var(--acento-fuerte); stroke-width: 2.5; }

/* El enlace a la pagina donde el arbol cabe entero. Va pegado al dibujo, que
   es donde uno se da cuenta de que no lo ve todo. */
.arbol-mas {
  margin: -1rem 0 1.6rem; font-size: .9rem;
}
.arbol-mas a { color: var(--color-arbol, var(--t-musica)); font-weight: 600; }

/* La pagina propia del arbol: sin columna lateral y sin linea del tiempo
   debajo, el dibujo se lleva el ancho entero del contenedor. En la coleccion
   se ve el 19 % del arbol de la musica; aqui, el 29 %, y en vertical, todo. */
.arbol-pagina { padding-block: 1.5rem 0; }
.arbol-pagina .controles { margin-bottom: 1rem; }

@media print {
  .arbol-desliza { overflow: visible; }
  .arbol { min-width: 0; width: 100%; }
  .arbol-mas { display: none; }
}

/* =============================================================
   Mapa por epocas (/<coleccion>/mapa/)
   -------------------------------------------------------------
   Cada epoca es un <input type="radio"> escondido y lo que se ve lo
   decide :checked, asi que el mapa funciona entero sin JavaScript. Las
   reglas que unen cada boton con su capa van en la propia pagina,
   porque dependen de cuantas epocas tenga cada mapa; aqui solo esta lo
   comun: todas las capas nacen escondidas.

   Los colores no llevan juego oscuro propio: salen de mezclar los de
   tema con el fondo (color-mix), y como esos dos ya cambian con el
   modo oscuro, el mapa cambia con ellos. El primer fill de cada regla
   es el respaldo para navegadores sin color-mix.
   ============================================================= */
.mapa-mas { margin: 0 0 1.25rem; }
.mapa-mas a { font-weight: 600; color: var(--acento-fuerte); }

.mapa-pagina { padding-block: 1.5rem 0; }
.mr { position: relative; }
.mr-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.mr-epocas { margin-bottom: 1rem; }
.mr-epocas-rotulo { margin: 0 0 .4rem; font-size: .85rem; font-weight: 600; color: var(--tinta-media); }
.mr-chips { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; }
.mr-chip {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: .1rem;
  padding: .45rem .75rem; border: 1px solid var(--linea-fuerte); border-radius: var(--r-m);
  background: var(--fondo); color: var(--tinta); cursor: pointer; line-height: 1.2; user-select: none;
}
.mr-chip:hover { border-color: var(--acento); }
.mr-chip-nombre { font-size: .9rem; font-weight: 600; white-space: nowrap; }
.mr-chip-fechas { font-size: .75rem; opacity: .8; white-space: nowrap; }

.mr-cuerpo [data-p], .mr-cuerpo [data-f] { display: none; }
.mr-cuerpo { display: grid; gap: 1.25rem; }
@media (min-width: 1000px) {
  .mr-cuerpo { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
  /* El mapa se queda quieto mientras se baja por la lista de su epoca. */
  .mr-lienzo { position: sticky; top: calc(var(--alto-barra) + 1rem); }
}
.mr-lienzo { margin: 0; }
.mr-svg { display: block; width: 100%; height: auto; border: 1px solid var(--linea); border-radius: var(--r-l); }

.mr-mar { fill: var(--fondo-alt); fill: color-mix(in srgb, var(--t-ciencia) 11%, var(--fondo)); }
.mr-tierra { fill: var(--fondo); fill: color-mix(in srgb, var(--tinta-suave) 10%, var(--fondo)); }
.mr-t {
  fill: var(--mr-color, var(--fondo-alt)); fill-rule: evenodd;
  stroke: var(--tinta-suave); stroke: color-mix(in srgb, var(--tinta) 50%, transparent);
  stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
/* Las fronteras que el propio mapa de origen da por aproximadas. */
.mr-t--aprox { stroke-dasharray: 4 3; }
.mr-sin { --mr-color: color-mix(in srgb, var(--tinta-suave) 18%, var(--fondo)); }
.mr-c0 { --mr-color: color-mix(in srgb, var(--t-ciencia) 28%, var(--fondo)); }
.mr-c1 { --mr-color: color-mix(in srgb, var(--t-exploracion) 28%, var(--fondo)); }
.mr-c2 { --mr-color: color-mix(in srgb, var(--t-sociedad) 28%, var(--fondo)); }
.mr-c3 { --mr-color: color-mix(in srgb, var(--t-religion) 26%, var(--fondo)); }
.mr-c4 { --mr-color: color-mix(in srgb, var(--t-filosofia) 32%, var(--fondo)); }
.mr-c5 { --mr-color: color-mix(in srgb, var(--t-arte) 22%, var(--fondo)); }
.mr-c6 { --mr-color: color-mix(in srgb, var(--t-economia) 28%, var(--fondo)); }
.mr-c7 { --mr-color: color-mix(in srgb, var(--t-musica) 32%, var(--fondo)); }

.mr-etiqueta {
  fill: var(--tinta); font-family: var(--sans); font-weight: 650; text-anchor: middle;
  paint-order: stroke; stroke: var(--fondo); stroke-width: 3px; stroke-linejoin: round; pointer-events: none;
}
.mr-rotulo { fill: var(--tinta-suave); font: italic 500 13px var(--sans); pointer-events: none; }
/* Las ciudades fundadas en epocas anteriores. El circulo transparente de
   debajo es la zona de toque; el punto crece un poco al pasar por encima. */
.mr-vieja { cursor: pointer; }
.mr-vieja:focus { outline: none; }
.mr-vieja-toque { fill: transparent; }
.mr-vieja-cuerpo { transform: scale(var(--mr-vieja, 1)); }
.mr-vieja-punto {
  fill: var(--tinta-media); stroke: var(--fondo); stroke-width: 2;
  transition: transform .15s var(--ease-out), fill .15s;
}
.mr-vieja:hover .mr-vieja-punto, .mr-vieja:focus-visible .mr-vieja-punto,
.mr-vieja[data-abierta] .mr-vieja-punto { fill: var(--acento); transform: scale(1.35); }
.mr-vieja:focus-visible .mr-vieja-toque { stroke: var(--acento); stroke-width: 2; }

.mr-pin circle { fill: var(--tinta); stroke: var(--fondo); stroke-width: 2; }
.mr-pin text { fill: var(--fondo); font: 700 13px var(--sans); text-anchor: middle; pointer-events: none; }
.mr-pin:hover circle, .mr-pin:focus-visible circle { stroke: var(--acento); stroke-width: 3; }
.mr-pin-cuerpo { transform: scale(var(--mr-pin, 1)); }
.mr-pin--guerra circle   { fill: var(--t-guerra); }
.mr-pin--politica circle { fill: var(--t-politica); }
.mr-pin--cultura circle  { fill: var(--t-tecnologia); }
.mr-pin--persona circle  { fill: var(--t-salud); }
.mr-pin--ciudad circle   { fill: var(--acento); }

.mr-leyenda { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .55rem; font-size: .8rem; color: var(--tinta-media); }
.mr-ley { display: inline-flex; align-items: center; gap: .35rem; }
.mr-num {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--tinta); color: var(--fondo); font-size: .8rem; font-weight: 700; flex: 0 0 auto;
}
.mr-ley .mr-num { width: .8rem; height: .8rem; }
.mr-num--guerra   { background: var(--t-guerra); }
.mr-num--politica { background: var(--t-politica); }
.mr-num--cultura  { background: var(--t-tecnologia); }
.mr-num--persona  { background: var(--t-salud); }
.mr-num--ciudad   { background: var(--acento); }

.mr-panel-titulo { margin: 0 0 .35rem; font-size: 1.3rem; }
.mr-panel-fechas { margin-left: .35rem; font-size: .9rem; font-weight: 500; color: var(--tinta-media); }
.mr-panel-texto { margin: 0 0 .5rem; }
.mr-foto { margin: 0 0 .6rem; font-size: .82rem; color: var(--tinta-suave); }
.mr-quien { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: 0 0 1rem; padding: 0; list-style: none; font-size: .85rem; }
.mr-quien li { display: inline-flex; align-items: center; gap: .35rem; }
.mr-muestra {
  display: inline-block; width: .9rem; height: .9rem; border-radius: 3px;
  background: var(--mr-color, var(--fondo-alt)); border: 1px solid var(--tinta-suave);
}
.mr-muestra--aprox { border-style: dashed; }
.mr-subtitulo { margin: 1rem 0 .5rem; font-size: 1rem; }
.mr-lista { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.mr-fila {
  display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: .6rem; align-items: start;
  padding: .15rem; border-radius: var(--r-s); scroll-margin-top: calc(var(--alto-barra) + 1rem);
}
.mr-fila:target { background: var(--acento-suave); }
.mr-lugar { margin: .15rem 0 .2rem; font-weight: 600; }
.mr-cosas { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; font-size: .92rem; }
.mr-fecha { margin-right: .2rem; color: var(--tinta-media); font-variant-numeric: tabular-nums; }
.mr-donde { font-size: .85rem; color: var(--tinta-suave); }
.mr-texto { margin: .2rem 0 0; font-size: .88rem; color: var(--tinta-media); }
.mr-fuentes { margin: .15rem 0 0; font-size: .78rem; color: var(--tinta-suave); }
.mr-vacio { font-style: italic; color: var(--tinta-suave); }
.mr-credito { margin-top: 1rem; font-size: .8rem; color: var(--tinta-suave); }

@media (max-width: 640px) {
  /* En el movil el lienzo mide un tercio: numeros mas gordos para el dedo, y
     fuera las etiquetas de los reinos, que no se leerian. Sus nombres siguen
     en la lista de debajo, con su color. */
  .mr { --mr-pin: 2.2; --mr-vieja: 1.5; }
  .mr-etiqueta, .mr-rotulo { display: none; }
}

.mr-sin-sitio { margin: .9rem 0 0; font-size: .88rem; color: var(--tinta-media); }

/* La leyenda del punto pequeno, y el globo que abre js/mapa.js. */
.mr-ley .mr-num--vieja {
  width: .6rem; height: .6rem; background: var(--tinta-media);
  box-shadow: 0 0 0 2px var(--fondo), 0 0 0 3px var(--linea-fuerte);
}
@media (max-width: 999.98px) {
  /* El globo se coloca respecto al lienzo. En pantalla ancha ya lo esta, por
     el position: sticky; en estrecha hace falta decirlo. */
  .mr-lienzo { position: relative; }
}
.mr-globo {
  position: absolute; z-index: 5; width: min(17rem, calc(100% - 1rem));
  padding: .7rem .85rem .75rem; border: 1px solid var(--linea-fuerte); border-radius: var(--r-m);
  background: var(--fondo); color: var(--tinta); box-shadow: var(--sombra-l);
  font-size: .85rem; line-height: 1.4;
}
.mr-globo[hidden] { display: none; }
.mr-globo p { margin: 0; }
.mr-globo-nombre { font-size: 1rem; font-weight: 700; }
.mr-globo-hoy { font-size: .8rem; color: var(--tinta-suave); }
.mr-globo .mr-globo-que { margin-top: .35rem; font-weight: 600; }
.mr-globo-fecha { color: var(--acento-fuerte); }
.mr-globo .mr-globo-resumen { margin-top: .3rem; color: var(--tinta-media); }
.mr-globo-ir { display: inline-block; margin-top: .45rem; font-weight: 600; color: var(--acento-fuerte); }