/* ==========================================================================
   ALMUIÑA.COM
   --------------------------------------------------------------------------
   Dos registros que se alternan a lo largo de la página:

     PAPEL  el registro de lectura. Fondo de pergamino, tinta ferrogálica,
            tipografía Garamond. Aquí se lee.
     TINTA  el registro de exhibición. Fondo nocturno, oro. Aquí se mira:
            el escudo, el mapa, la diáspora.

   La tipografía de texto es EB Garamond, un revival del tipo que Claude
   Garamond cortó en los años 1540 — es decir, la letra con la que se imprimía
   en Europa cuando se escribió el documento más antiguo del apellido (1603).
   Va autoalojada: ni una petición a terceros, ni una cookie, ni un rastreador.
   ========================================================================== */

/* ---------------------------------------------------------------- fuentes
   Ambas son variables: un solo fichero cubre todos los pesos. Se sirven en dos
   subconjuntos (latin y latin-ext) con su unicode-range, así que el navegador
   solo descarga el segundo si la página lo necesita — y lo necesita, porque
   aquí se escribe en gallego, catalán, euskera e inglés en la misma casa. */
@font-face {
  font-family: "Garamond ES"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url("../assets/fuentes/garamond.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;
}
@font-face {
  font-family: "Garamond ES"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url("../assets/fuentes/garamond-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Garamond ES"; font-style: italic; font-weight: 400 700;
  font-display: swap; src: url("../assets/fuentes/garamond-i.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;
}
@font-face {
  font-family: "Garamond ES"; font-style: italic; font-weight: 400 700;
  font-display: swap; src: url("../assets/fuentes/garamond-i-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter ES"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url("../assets/fuentes/inter.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;
}
@font-face {
  font-family: "Inter ES"; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url("../assets/fuentes/inter-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* El árabe de la cadena etimológica no lleva fuente propia: se deja a la del
   sistema, que en árabe siempre es mejor que una web incrustada a medias. */
[lang="ar"] {
  font-family: "Noto Naskh Arabic", "Traditional Arabic", "Geeza Pro",
               "Segoe UI Historic", "Segoe UI", serif;
  line-height: 1.9;
}

/* ------------------------------------------- ESCRITURAS NO LATINAS ------- */
/* La Garamond y la Inter incrustadas solo traen latín: pesan 40 KB justamente
   por no traer más. En japonés, chino, árabe o tamil el navegador se buscaría
   la vida con la primera fuente que tuviera, y saldría una página con dos
   criterios tipográficos peleándose.

   OJO CON EL ORDEN, que aquí me equivoqué una vez: la fuente del sitio va
   PRIMERO y la de la escritura DETRÁS. Al revés —poniendo solo la fuente
   japonesa— el título ALMUIÑA perdía la tilde de la eñe y salía «ALMUINA».
   Con este orden el navegador resuelve glifo a glifo: el alfabeto latino
   —que está en todas las páginas, porque el apellido se escribe así— sigue en
   la Garamond de la casa, y solo lo que ella no tiene cae en la fuente de la
   escritura, que además ya está instalada en el sistema. Ni una petición más.

   El interlineado sube: estas escrituras tienen más altura de trazo que la
   latina y con 1,7 se ahogan. */
:root[lang="ja"] {
  --serif: "Garamond ES", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "MS Mincho", serif;
  --sans:  "Inter ES", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", Meiryo, sans-serif;
}
:root[lang="zh-Hans"] {
  --serif: "Garamond ES", "Songti SC", "Noto Serif SC", SimSun, serif;
  --sans:  "Inter ES", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
:root[lang="yue"] {
  --serif: "Garamond ES", "Songti TC", "Noto Serif TC", PMingLiU, serif;
  --sans:  "Inter ES", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
:root[lang="ko"] {
  --serif: "Garamond ES", "Apple SD Gothic Neo", "Noto Serif KR", Batang, serif;
  --sans:  "Inter ES", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
:root[lang="ar"], :root[lang="fa"], :root[lang="ug"] {
  --serif: "Garamond ES", "Noto Naskh Arabic", "Traditional Arabic", "Geeza Pro", "Segoe UI", serif;
  --sans:  "Inter ES", "Noto Sans Arabic", "Geeza Pro", "Segoe UI", sans-serif;
}
/* El urdu se escribe en nastaliq, no en naskh: con naskh se lee, pero mal. */
:root[lang="ur"] {
  --serif: "Garamond ES", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Noto Naskh Arabic", serif;
  --sans:  "Inter ES", "Noto Nastaliq Urdu", "Noto Sans Arabic", "Segoe UI", sans-serif;
}
:root[lang="hi"], :root[lang="mr"] {
  --serif: "Garamond ES", "Noto Serif Devanagari", "Kohinoor Devanagari", Mangal, serif;
  --sans:  "Inter ES", "Noto Sans Devanagari", "Kohinoor Devanagari", "Nirmala UI", sans-serif;
}
:root[lang="bn"] {
  --serif: "Garamond ES", "Noto Serif Bengali", "Kohinoor Bangla", Vrinda, serif;
  --sans:  "Inter ES", "Noto Sans Bengali", "Kohinoor Bangla", "Nirmala UI", sans-serif;
}
:root[lang="ta"] {
  --serif: "Garamond ES", "Noto Serif Tamil", "Tamil MN", Latha, serif;
  --sans:  "Inter ES", "Noto Sans Tamil", "Tamil Sangam MN", "Nirmala UI", sans-serif;
}
:root[lang="te"] {
  --serif: "Garamond ES", "Noto Serif Telugu", "Telugu MN", Gautami, serif;
  --sans:  "Inter ES", "Noto Sans Telugu", "Telugu Sangam MN", "Nirmala UI", sans-serif;
}
:root[lang="pa"] {
  --serif: "Garamond ES", "Noto Serif Gurmukhi", "Gurmukhi MN", Raavi, serif;
  --sans:  "Inter ES", "Noto Sans Gurmukhi", "Gurmukhi Sangam MN", "Nirmala UI", sans-serif;
}
:root[lang="th"] {
  --serif: "Garamond ES", "Noto Serif Thai", Thonburi, "Leelawadee UI", serif;
  --sans:  "Inter ES", "Noto Sans Thai", "Leelawadee UI", Thonburi, sans-serif;
}
:root[lang="bo"] {
  --serif: "Garamond ES", "Noto Serif Tibetan", Kailasa, "Microsoft Himalaya", serif;
  --sans:  "Inter ES", "Noto Sans Tibetan", Kailasa, "Microsoft Himalaya", sans-serif;
}
:root[lang="ja"] body, :root[lang="zh-Hans"] body, :root[lang="yue"] body,
:root[lang="ko"] body, :root[lang="th"] body, :root[lang="bo"] body {
  line-height: 1.85;
}
:root[lang="hi"] body, :root[lang="mr"] body, :root[lang="bn"] body,
:root[lang="ta"] body, :root[lang="te"] body, :root[lang="pa"] body {
  line-height: 1.9;
}
:root[lang="ur"] body { line-height: 2.3; }   /* el nastaliq necesita aire */
/* Los títulos en estas escrituras no llevan versalitas ni espaciado de letra:
   el letter-spacing en CJK y en las índicas rompe la palabra. */
:root[lang="ja"] .eyebrow, :root[lang="zh-Hans"] .eyebrow, :root[lang="yue"] .eyebrow,
:root[lang="ko"] .eyebrow, :root[lang="th"] .eyebrow, :root[lang="bo"] .eyebrow,
:root[lang="hi"] .eyebrow, :root[lang="mr"] .eyebrow, :root[lang="bn"] .eyebrow,
:root[lang="ta"] .eyebrow, :root[lang="te"] .eyebrow, :root[lang="pa"] .eyebrow,
:root[lang="ar"] .eyebrow, :root[lang="fa"] .eyebrow, :root[lang="ur"] .eyebrow,
:root[lang="ug"] .eyebrow {
  letter-spacing: normal; text-transform: none;
}

:root {
  /* tinta */
  --tinta:        #12111a;
  --tinta-2:      #1a1826;
  --tinta-3:      #232032;
  /* papel */
  --papel:        #f6f0e2;
  --papel-2:      #eee5d0;
  --papel-alto:   #fdfaf1;
  /* oro */
  --oro:          #c39a3e;
  --oro-claro:    #e8c877;
  --oro-hondo:    #8f6d22;
  /* texto */
  --texto:        #2b2721;
  --texto-suave:  #5d564a;
  --texto-claro:  #ece6d7;
  --texto-tenue:  #a49d8c;
  /* acentos */
  --sinople:      #1d6b3c;
  --rojo:         #a33c2e;

  --serif: "Garamond ES", Garamond, Georgia, "Times New Roman", serif;
  --sans:  "Inter ES", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radio: 4px;                 /* esquinas casi rectas: esto es un libro */
  --medida: 68ch;
  --sombra-papel: 0 2px 3px rgba(43,39,33,.05), 0 12px 34px rgba(43,39,33,.09);
  --sombra-tinta: 0 20px 48px rgba(0,0,0,.45);
}

/* Un elemento con hidden está oculto y punto. Sin esta regla, CUALQUIER clase
   que traiga su propio display —.btn es inline-block, .chapa es grid— gana al
   [hidden] de la hoja del navegador y el elemento se sigue viendo. Así pasaba
   con el botón de descargar el SVG: solo existe vector del primer escudo, se
   marcaba hidden en los otros cuatro… y salía igual. Se pone una sola vez y
   arriba, y ese fallo ya no puede volver por ningún sitio. */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--serif);
  font-size: clamp(1.02rem, .97rem + .25vw, 1.16rem);
  line-height: 1.62;
  color: var(--texto);
  background: var(--tinta);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.14; }
h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); letter-spacing: -.01em; margin-bottom: .9rem; }
h3 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); margin: 2.4rem 0 .7rem; }
h4 { font-size: 1.1rem; }
p + p { margin-top: .85rem; }

.contenedor { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.contenedor--estrecho { max-width: 760px; }

/* Enlace de salto: invisible hasta que se le da el foco con el tabulador.
   Se esconde recortándolo a un píxel y NO sacándolo a left:-9999px, que es
   como estaba: en las lenguas que se escriben de derecha a izquierda el
   desbordamiento cuenta hacia el otro lado y esos 9.999 px se convertían en
   diez mil píxeles de página en blanco a la izquierda. */
.saltar {
  position: absolute; top: 0; z-index: 200;
  width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
  background: var(--oro); color: var(--tinta); padding: .7rem 1.2rem;
  font: 600 .9rem/1 var(--sans); text-decoration: none;
}
.saltar:focus {
  inset-inline-start: .5rem; top: .5rem;
  width: auto; height: auto; overflow: visible; clip-path: none;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--oro-claro); outline-offset: 3px; border-radius: 2px;
}

.eyebrow {
  font: 600 .72rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase;
  color: var(--oro-hondo); margin-bottom: .8rem;
}
.seccion--tinta .eyebrow { color: var(--oro-claro); }
.acento { color: var(--oro-hondo); font-style: italic; }
.seccion--tinta .acento { color: var(--oro-claro); }
.intro { max-width: var(--medida); font-size: 1.1em; }
.menor { font-size: .95em; color: var(--texto-suave); }
.seccion--tinta .menor { color: var(--texto-tenue); }
.fino { font: 400 .82rem/1.5 var(--sans); color: var(--texto-suave); margin-top: .9rem; max-width: var(--medida); }
.seccion--tinta .fino { color: var(--texto-tenue); }
.centrado { text-align: center; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.remate {
  margin-top: 1.1rem; padding-left: 1.1rem; border-left: 3px solid var(--oro);
  font-size: 1.08em; font-style: italic;
}
.aviso {
  margin-top: 1rem; padding: .8rem 1rem; font-size: .93em;
  background: rgba(163,60,46,.07); border-left: 3px solid var(--rojo); border-radius: 0 var(--radio) var(--radio) 0;
}
.seccion--tinta .aviso { background: rgba(232,200,119,.07); border-left-color: var(--oro); }

/* ==================================================== NAVEGACIÓN ========= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.5rem; transition: background .3s, padding .3s, box-shadow .3s;
}
.nav--fija {
  background: rgba(18,17,26,.95); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(195,154,62,.22), 0 10px 34px rgba(0,0,0,.4);
  padding: .5rem 1.5rem;
}
.nav__marca {
  display: flex; align-items: center; gap: .55rem; text-decoration: none;
  font: 700 1.22rem/1 var(--serif); letter-spacing: .07em; color: var(--papel);
  white-space: nowrap;
}
.nav__marca small { color: var(--oro-claro); font-size: .78rem; letter-spacing: .02em; }
.nav__escudo, .pie__escudo {
  background: url("../assets/escudo.svg") center/contain no-repeat;
  display: block; width: 30px; height: 34px; flex: 0 0 30px;
}
.pie__escudo { width: 54px; height: 62px; opacity: .92; }
.nav__links { display: flex; gap: 1.15rem; align-items: center; }
.nav__links a {
  font: 500 .84rem/1 var(--sans); letter-spacing: .02em; color: var(--texto-claro);
  text-decoration: none; opacity: .82; padding: .3rem 0;
  border-bottom: 2px solid transparent; transition: color .2s, opacity .2s, border-color .2s;
}
.nav__links a:hover, .nav__links a.activo { color: var(--oro-claro); opacity: 1; border-color: var(--oro); }
.nav__links .nav__cta {
  border: 1px solid rgba(232,200,119,.5); border-radius: 999px;
  padding: .35rem .9rem; color: var(--oro-claro); opacity: 1;
}
.nav__links .nav__cta:hover { background: rgba(195,154,62,.16); border-color: var(--oro); }
.nav__dcha { display: flex; align-items: center; gap: .7rem; }
.nav__lang { position: relative; }
.nav__langbtn {
  background: rgba(195,154,62,.12); color: var(--oro-claro); cursor: pointer;
  border: 1px solid rgba(232,200,119,.42); border-radius: 999px;
  padding: .32rem .8rem; font: 600 .78rem/1 var(--sans); letter-spacing: .09em; text-transform: uppercase;
}
.nav__langbtn:hover { background: rgba(195,154,62,.26); }
.nav__langmenu {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 95; list-style: none;
  min-width: 200px; background: rgba(18,17,26,.98); border: 1px solid rgba(195,154,62,.35);
  border-radius: 8px; padding: .35rem; box-shadow: 0 18px 44px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s, transform .22s, visibility .22s;
}
.nav__langmenu.abierto { opacity: 1; visibility: visible; transform: none; }
.nav__langmenu a {
  display: block; padding: .45rem .75rem; border-radius: 5px; text-decoration: none;
  font: 400 .86rem/1.3 var(--sans); color: var(--texto-claro);
}
.nav__langmenu a:hover { background: rgba(195,154,62,.16); color: var(--oro-claro); }
.nav__langmenu a.actual { color: var(--oro-claro); font-weight: 600; }
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: .35rem; }
.nav__toggle span { display: block; width: 24px; height: 2px; background: var(--papel); margin: 5px 0; transition: transform .3s, opacity .2s; }

/* ==================================================== PORTADA ============ */
.hero {
  position: relative; min-height: min(100svh, 860px); display: flex; align-items: center;
  padding: 7rem 0 4.5rem; overflow: hidden; color: var(--papel);
  background:
    radial-gradient(1200px 560px at 82% -12%, rgba(195,154,62,.18), transparent 62%),
    radial-gradient(760px 520px at -8% 108%, rgba(29,107,60,.16), transparent 58%),
    linear-gradient(158deg, #12111a 0%, #1a1826 58%, #0d0c14 100%);
}
.hero__enye {
  position: absolute; right: -5rem; top: 50%; transform: translateY(-50%);
  font: 700 clamp(20rem, 44vw, 40rem)/1 var(--serif);
  color: rgba(195,154,62,.05); pointer-events: none; user-select: none;
}
.hero__inner {
  position: relative; max-width: 1180px; margin: 0 auto; padding: 0 1.5rem;
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 3.5rem; align-items: center;
}
.hero__kicker { font: 600 .76rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--oro-claro); margin-bottom: 1.1rem; }
.hero__titulo {
  font: 700 clamp(3.4rem, 1.5rem + 8vw, 6.6rem)/.92 var(--serif); letter-spacing: .03em;
  background: linear-gradient(112deg, #f6e6b4 8%, var(--oro) 52%, #f6e6b4 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lema { font: italic 400 clamp(1.15rem, 1rem + .8vw, 1.55rem)/1.4 var(--serif); color: #ddd6c3; margin: 1.1rem 0 1rem; }
.hero__entrada { max-width: 46ch; font-size: .98em; color: var(--texto-tenue); margin-bottom: 1.8rem; }
.hero__cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-top: 2.6rem; }
.hero__stats div { border-left: 2px solid rgba(195,154,62,.42); padding-left: .85rem; }
.hero__stats dt { font: 700 1.85rem/1.05 var(--serif); color: var(--oro-claro); font-variant-numeric: tabular-nums; }
.hero__stats dt span { font-size: .6em; }
.hero__stats dd { font: 400 .74rem/1.35 var(--sans); color: var(--texto-tenue); margin-top: .2rem; }
.hero__fig { text-align: center; }
.hero__fig .armas { width: min(330px, 68vw); margin: 0 auto; filter: drop-shadow(0 26px 46px rgba(0,0,0,.55)); }
.hero__fig figcaption { font: 400 .76rem/1.5 var(--sans); color: var(--texto-tenue); margin-top: 1rem; }
.hero__scroll {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  width: 22px; height: 34px; border: 1px solid rgba(232,200,119,.5); border-radius: 12px;
}
.hero__scroll span {
  position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; border-radius: 2px;
  background: var(--oro-claro); transform: translateX(-50%); animation: rueda 1.9s infinite;
}
@keyframes rueda { 0%,100% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 80% { opacity: 0; transform: translate(-50%, 11px); } }

.btn {
  display: inline-block; padding: .78rem 1.5rem; border-radius: 999px; cursor: pointer;
  font: 600 .88rem/1 var(--sans); letter-spacing: .02em; text-decoration: none;
  border: 1px solid transparent; transition: transform .18s, box-shadow .18s, background .18s;
}
.btn--peq { padding: .55rem 1.1rem; font-size: .82rem; }
.btn--oro { background: linear-gradient(118deg, var(--oro-claro), var(--oro)); color: #26200a; box-shadow: 0 8px 22px rgba(195,154,62,.3); }
.btn--oro:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(195,154,62,.42); }
.btn--fantasma { border-color: rgba(232,200,119,.5); color: var(--oro-claro); }
.btn--fantasma:hover { background: rgba(195,154,62,.14); transform: translateY(-2px); }
.seccion--papel .btn--fantasma { border-color: var(--oro-hondo); color: var(--oro-hondo); }
.seccion--papel .btn--fantasma:hover { background: rgba(195,154,62,.12); }

/* ==================================================== SECCIONES ========== */
.seccion { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.seccion--papel {
  color: var(--texto);
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(178deg, var(--papel) 0%, var(--papel-2) 100%);
}
.seccion--tinta {
  color: var(--texto-claro);
  background: linear-gradient(178deg, var(--tinta-2) 0%, var(--tinta) 100%);
}
.seccion--tinta h2, .seccion--tinta h3, .seccion--tinta h4 { color: #f2ecdb; }

.rejilla2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.8rem; align-items: start; }
.rejilla2--separada { margin-top: 2.8rem; }

/* citas */
.cita { margin: 1rem 0; padding: 1.1rem 1.3rem; border-left: 3px solid var(--oro); border-radius: 0 var(--radio) var(--radio) 0; }
.cita p { font: italic 400 1.22em/1.45 var(--serif); }
.cita footer { font: 400 .78rem/1.4 var(--sans); margin-top: .6rem; color: var(--texto-suave); }
.cita--rag { background: var(--papel-alto); box-shadow: var(--sombra-papel); }

/* cadena etimológica */
.cadena { list-style: none; counter-reset: paso; display: grid; gap: .55rem; margin-top: 1rem; }
.cadena__paso {
  position: relative; counter-increment: paso; padding: .9rem 1.1rem .9rem 3.2rem;
  background: var(--papel-alto); border: 1px solid #e3d7b8; border-radius: var(--radio);
  box-shadow: 0 3px 10px rgba(43,39,33,.05);
}
.cadena__paso::before {
  content: counter(paso); position: absolute; left: 1rem; top: 1rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--oro-hondo); color: var(--papel-alto); font: 600 .74rem/1 var(--sans);
}
.cadena__paso:not(:last-child)::after {
  content: ""; position: absolute; left: 1.72rem; bottom: -.55rem; height: .55rem; width: 1px;
  background: var(--oro-hondo); opacity: .5;
}
.cadena__paso--fin { background: linear-gradient(118deg, #fbf3d9, #f4e7ba); border-color: var(--oro); }
/* El eslabón documentado —el único con fecha y con pergamino detrás— se marca
   con el filo de tinta, para distinguirlo de los tres de etimología, que son
   reconstrucción, y del último, que es el apellido de hoy. */
.cadena__paso--doc { border-left: 3px solid var(--oro-hondo); }
.cadena__paso--doc .cadena__pal { letter-spacing: .01em; }
.cadena__pal { display: block; font: 700 1.5rem/1.25 var(--serif); }
.cadena__pal[lang="ar"] { font-size: 1.85rem; }
.cadena__tr { display: block; font: 600 .78rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--oro-hondo); margin: .15rem 0 .35rem; }
.cadena__det { display: block; font-size: .9em; color: var(--texto-suave); }

/* tablas */
.tabla-caja { overflow-x: auto; margin-top: 1rem; border-radius: var(--radio); box-shadow: var(--sombra-papel); }
.seccion--tinta .tabla-caja { box-shadow: var(--sombra-tinta); }
.tabla { width: 100%; border-collapse: collapse; background: var(--papel-alto); font-family: var(--sans); font-size: .9rem; }
.tabla th {
  background: var(--tinta-2); color: var(--oro-claro); text-align: left; white-space: nowrap;
  padding: .7rem 1rem; font: 600 .72rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.tabla th.num { text-align: right; }
.tabla td { padding: .58rem 1rem; border-bottom: 1px solid #eadfc2; color: var(--texto); }
.tabla tbody tr:nth-child(even) { background: #faf4e4; }
.tabla tbody tr:hover { background: #f4ebcf; }
.tabla--compacta td, .tabla--compacta th { padding: .45rem .9rem; }
.tabla .fila--yo { background: linear-gradient(90deg, rgba(195,154,62,.22), rgba(195,154,62,.08)); }
.tabla .fila--yo td { font-weight: 600; }
.tabla td.top { color: var(--rojo); font-weight: 700; }
.tabla td.baja { color: var(--rojo); font-weight: 600; }
.tabla tr[hidden] { display: none; }

.bloque-datos { margin-top: 2.8rem; }
.nubes { font: 600 .95rem/2 var(--sans); color: var(--texto-suave); word-spacing: .2em; }

/* fichas y cajas */
.ficha, .caja-nota {
  margin-top: 2.4rem; padding: 1.4rem 1.6rem; border-radius: var(--radio);
  background: rgba(195,154,62,.1); border: 1px solid rgba(143,109,34,.32);
}
.caja-nota--papel { background: rgba(195,154,62,.13); }
.lista-rombo, .lista-num { list-style: none; }
.lista-rombo li { position: relative; padding: .42rem 0 .42rem 1.4rem; }
.lista-rombo li::before { content: "◆"; position: absolute; left: 0; top: .62rem; font-size: .62rem; color: var(--oro-hondo); }
.seccion--tinta .lista-rombo li::before { color: var(--oro-claro); }
.lista-num { counter-reset: n; margin-top: .7rem; }
.lista-num li { position: relative; counter-increment: n; padding: .5rem 0 .5rem 2.2rem; }
.lista-num li::before {
  content: counter(n); position: absolute; left: 0; top: .55rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center;
  background: rgba(195,154,62,.2); color: var(--oro-claro); font: 600 .74rem/1 var(--sans);
}
.lista-num li.destacado::before { background: var(--oro); color: var(--tinta); }
.lista-num li.destacado { background: rgba(195,154,62,.08); border-radius: var(--radio); padding-right: .8rem; }

/* ==================================================== LUGARES ============ */
.lugares { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-top: 2rem; }
.lugar {
  background: linear-gradient(168deg, var(--tinta-3), var(--tinta-2));
  border: 1px solid rgba(195,154,62,.24); border-radius: var(--radio); padding: 1.2rem 1.1rem;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.lugar:hover { transform: translateY(-5px); border-color: var(--oro); box-shadow: var(--sombra-tinta); }
.lugar--hito { border-color: rgba(232,200,119,.55); box-shadow: inset 0 0 0 1px rgba(232,200,119,.14); }
.lugar__prov {
  display: inline-block; font: 600 .64rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--oro-claro); border: 1px solid rgba(232,200,119,.4); border-radius: 999px;
  padding: .22rem .65rem; margin-bottom: .7rem;
}
.lugar h3 { margin: 0 0 .4rem; font-size: 1.35rem; }
.lugar__sitio { font: 400 .85rem/1.5 var(--sans); color: var(--texto-tenue); }
.lugar__nota { font-size: .88em; color: #d5cebb; margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed rgba(195,154,62,.28); }
.hallazgo { background: rgba(195,154,62,.07); border-left: 3px solid var(--oro); padding: 1.1rem 1.3rem; border-radius: 0 var(--radio) var(--radio) 0; }
.hallazgo h3 { margin-top: 0; }

/* ==================================================== MAPA =============== */
.mapa { margin-top: 3rem; }
.mapa__marco { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.6rem; align-items: start; margin-top: 1.2rem; }
.mapa__lienzo {
  position: relative; background: rgba(0,0,0,.22); border: 1px solid rgba(195,154,62,.2);
  border-radius: var(--radio); padding: .8rem; min-height: 320px;
}
.mapa__estado { font: 400 .88rem/1.5 var(--sans); color: var(--texto-tenue); text-align: center; padding: 4rem 1rem; }
.mapa__lienzo svg { width: 100%; height: auto; }
.mapa__lienzo path.c {
  fill: rgba(236,230,215,.07); stroke: rgba(18,17,26,.55); stroke-width: .7;
  transition: fill .18s, stroke .18s; cursor: pointer;
}
.mapa__lienzo path.c:hover, .mapa__lienzo path.c.sel { stroke: var(--oro-claro); stroke-width: 1.6; }
.mapa__lienzo path.n1 { fill: rgba(195,154,62,.32); }
.mapa__lienzo path.n2 { fill: rgba(203,161,64,.54); }
.mapa__lienzo path.n3 { fill: rgba(214,171,68,.76); }
.mapa__lienzo path.n4 { fill: rgba(233,193,96,.96); }
.mapa__lienzo circle.foco { fill: var(--oro-claro); stroke: var(--tinta); stroke-width: 2; pointer-events: none; }
.mapa__panel {
  background: rgba(195,154,62,.08); border: 1px solid rgba(195,154,62,.24);
  border-radius: var(--radio); padding: 1.1rem 1.2rem; min-height: 150px;
}
.mapa__panel h4 { font-size: 1.3rem; color: var(--oro-claro); }
.mapa__panel dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; margin-top: .7rem; font-family: var(--sans); font-size: .86rem; }
.mapa__panel dt { color: var(--texto-tenue); }
.mapa__panel dd { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.mapa__pista { font: 400 .88rem/1.5 var(--sans); color: var(--texto-tenue); }
.mapa__leyenda { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: 1rem; font: 400 .78rem/1 var(--sans); color: var(--texto-tenue); }
.mapa__leyenda span { margin-right: .3rem; }
.ml { width: 30px; height: 12px; border-radius: 2px; display: inline-block; }
.ml--0 { background: rgba(236,230,215,.09); } .ml--1 { background: rgba(195,154,62,.32); }
.ml--2 { background: rgba(203,161,64,.54); } .ml--3 { background: rgba(214,171,68,.76); }
.ml--4 { background: rgba(233,193,96,.96); }

/* ==================================================== LÍNEA DE TIEMPO ==== */
.linea { position: relative; margin-top: 2.4rem; padding-left: 2rem; }
.linea::before { content: ""; position: absolute; left: 6px; top: .5rem; bottom: .5rem; width: 2px; background: linear-gradient(180deg, var(--oro), rgba(195,154,62,.12)); }
.hito { position: relative; padding: 0 0 1.5rem 1rem; }
.hito::before {
  content: ""; position: absolute; left: -2rem; top: .5rem; width: 11px; height: 11px; border-radius: 50%;
  background: var(--papel-alto); border: 3px solid var(--oro-hondo); transform: translateX(1.5px);
}
.hito--moderno::before { background: var(--oro); }
.hito__fecha { font: 700 1.22rem/1 var(--serif); color: var(--oro-hondo); font-variant-numeric: tabular-nums; }
.hito__cuerpo h4 { margin: .12rem 0 .2rem; }
.hito__cuerpo p { font-size: .95em; max-width: var(--medida); }
.hito__fuente { display: inline-block; font: 400 .72rem/1 var(--sans); color: var(--texto-suave); margin-top: .45rem; padding: .2rem .55rem; border: 1px solid rgba(143,109,34,.3); border-radius: 999px; }
.registro.activo { background: linear-gradient(118deg, var(--oro-claro), var(--oro)); color: #26200a; border-color: transparent; }

.piezas { list-style: none; margin: 1.4rem auto 0; max-width: 900px; }
.piezas li {
  display: flex; gap: 1rem; align-items: flex-start; padding: .85rem .6rem;
  border-bottom: 1px dashed rgba(195,154,62,.22); border-radius: var(--radio);
  transition: background .2s; cursor: default;
}
.piezas li:hover { background: rgba(195,154,62,.07); }
.piezas li:last-child { border-bottom: 0; }
.piezas strong { font-family: var(--serif); font-size: 1.12rem; color: #f2ecdb; }
.piezas p { font-size: .93em; color: #d3ccb9; margin-top: .15rem; }
/* El filo claro es imprescindible: sobre el fondo oscuro, la muestra de
   SABLE es un cuadro negro sobre negro y sin borde no se ve. */
.muestra { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 3px; margin-top: .35rem;
           border: 1px solid rgba(236,230,215,.55); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.muestra--oro { background: #e0b02c; } .muestra--plata { background: #f4f3ef; }
.muestra--sinople { background: #1d7a3d; } .muestra--sable { background: #17181c; }

/* ==================================================== NÚMEROS ============ */
.tarjetas-num { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin: 1.4rem 0 2rem; }
.tnum {
  text-align: center; padding: 1.3rem .8rem; border-radius: var(--radio);
  background: var(--papel-alto); border: 1px solid #e5daba; box-shadow: var(--sombra-papel);
}
.tnum--fuerte { background: linear-gradient(150deg, #fbf3d9, #f2e4b6); border-color: var(--oro); }
.tnum__n { display: block; font: 700 2.5rem/1 var(--serif); color: var(--oro-hondo); font-variant-numeric: tabular-nums; }
.tnum__t { display: block; font: 400 .78rem/1.4 var(--sans); color: var(--texto-suave); margin-top: .45rem; }
.tarjetas-num--tinta .tnum { background: linear-gradient(168deg, var(--tinta-3), var(--tinta-2)); border-color: rgba(195,154,62,.24); box-shadow: none; }
.tarjetas-num--tinta .tnum__n { color: var(--oro-claro); }
.tarjetas-num--tinta .tnum__t { color: var(--texto-tenue); }

/* El medidor de rareza. La marca lleva su etiqueta ARRIBA, y necesita aire:
   pegada al parrafo anterior no se lee como parte del grafico, se lee como una
   linea suelta de texto. De ahi el margen alto y la etiqueta en cartela. */
.rareza { margin: 3.2rem 0 .6rem; }
.rareza__pista {
  position: relative; height: 30px; border-radius: 999px;
  background: rgba(143,109,34,.16); overflow: visible;
}
.rareza__frec {
  height: 100%; border-radius: 999px 0 0 999px;
  background: linear-gradient(90deg, var(--oro-hondo), var(--oro));
}
.rareza__marca {
  position: absolute; top: -9px; bottom: -9px; width: 4px; border-radius: 2px;
  background: var(--rojo); box-shadow: 0 0 0 2px rgba(246,240,226,.85);
}
.rareza__marca span {
  position: absolute; left: 50%; bottom: calc(100% + .7rem); transform: translateX(-50%);
  white-space: nowrap; font: 700 1rem/1 var(--sans); letter-spacing: .02em;
  color: var(--papel-alto); background: var(--rojo);
  padding: .42rem .85rem .4rem; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(163,60,46,.32);
}
/* la punta de la cartela, apuntando a la marca */
.rareza__marca span::after {
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--rojo);
}
.rareza__pies { display: flex; justify-content: space-between; margin-top: .6rem; font: 400 .78rem/1.4 var(--sans); color: var(--texto-suave); gap: 1rem; }

.barras { display: flex; flex-direction: column; gap: .55rem; margin: 1.1rem 0 .3rem; }
.barra { display: grid; grid-template-columns: 130px 1fr 50px; align-items: center; gap: .8rem; }
.barra__nombre { font: 500 .86rem/1.3 var(--sans); text-align: right; }
.barra__pista { background: rgba(43,39,33,.1); border-radius: 999px; height: 18px; overflow: hidden; }
.seccion--tinta .barra__pista { background: rgba(255,255,255,.09); }
.barra__relleno { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--oro-hondo), var(--oro-claro)); transition: width 1.1s cubic-bezier(.22,.8,.3,1); }
.barra__valor { font: 700 1rem/1 var(--serif); color: var(--oro-hondo); font-variant-numeric: tabular-nums; }
.seccion--tinta .barra__valor { color: var(--oro-claro); }

.buscador { display: block; margin-top: 1.1rem; }
.buscador input {
  width: 100%; max-width: 340px; padding: .6rem .9rem; font: 400 .9rem/1.2 var(--sans);
  border: 1px solid #d9cba7; border-radius: var(--radio); background: var(--papel-alto); color: var(--texto);
}

/* ==================================================== PAÍSES ============= */
.paises { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-top: 2rem; }
.pais {
  background: linear-gradient(168deg, var(--tinta-3), var(--tinta-2));
  border: 1px solid rgba(195,154,62,.22); border-radius: var(--radio); padding: 1.1rem;
  transition: transform .25s, border-color .25s;
}
.pais:hover { transform: translateY(-5px); border-color: var(--oro); }
.pais__code { display: inline-block; font: 700 .68rem/1 var(--sans); letter-spacing: .16em; color: #26200a; background: linear-gradient(118deg, var(--oro-claro), var(--oro)); border-radius: 4px; padding: .25rem .55rem; margin-bottom: .6rem; }
.pais h4 { font-size: 1.08rem; margin-bottom: .35rem; }
.pais p { font-size: .9em; color: #cec7b4; }

/* ==================================================== PERSONAS =========== */
.personas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; margin-top: 2rem; }
.ficha-persona {
  background: var(--papel-alto); border: 1px solid #e5daba; border-radius: var(--radio);
  padding: 1.4rem; box-shadow: var(--sombra-papel); transition: transform .25s, border-color .25s;
}
.ficha-persona:hover { transform: translateY(-5px); border-color: var(--oro); }
.ficha-persona__tag { display: inline-block; font: 700 .64rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #26200a; background: linear-gradient(118deg, var(--oro-claro), var(--oro)); border-radius: 999px; padding: .22rem .7rem; margin-bottom: .7rem; }
.ficha-persona h3 { margin: 0 0 .1rem; font-size: 1.32rem; }
.ficha-persona__fecha { font: italic 400 .84rem/1.4 var(--serif); color: var(--oro-hondo); margin-bottom: .6rem; }
.ficha-persona p:last-of-type { font-size: .94em; color: var(--texto-suave); }
.ficha-persona--cta { background: linear-gradient(150deg, #fbf3d9, #f2e4b6); border-color: var(--oro); }
.ficha-persona--cta .btn { margin-top: .9rem; }

/* ==================================================== CURIOSIDADES ======= */
.curios { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 2rem; }
.curio {
  position: relative; overflow: hidden; padding: 1.5rem 1.1rem 1.1rem;
  background: linear-gradient(168deg, var(--tinta-3), var(--tinta-2));
  border: 1px solid rgba(195,154,62,.22); border-radius: var(--radio);
  transition: transform .25s, border-color .25s;
}
.curio:hover { transform: translateY(-5px); border-color: var(--oro); }
.curio__num { position: absolute; top: .2rem; right: .7rem; font: 700 2.6rem/1 var(--serif); color: rgba(195,154,62,.16); }
.curio h4 { color: var(--oro-claro); margin-bottom: .4rem; max-width: 88%; }
.curio p { font-size: .9em; color: #cec7b4; }
.curio code { font: 500 .86em/1 var(--sans); background: rgba(0,0,0,.3); padding: .12rem .35rem; border-radius: 3px; }

/* ==================================================== FUENTES ============ */
.fuentes { margin: 1.3rem 0 0 1.2rem; }
.fuentes li { margin: .5rem 0; font-size: .95em; }
.fuentes li::marker { color: var(--oro-hondo); font-weight: 700; }
.fuentes a { color: var(--oro-hondo); text-decoration: none; }

/* ==================================================== FORMULARIO ========= */
.formulario { margin-top: 1.8rem; display: grid; gap: 1rem; }
.campo { display: grid; gap: .35rem; }
.campo--doble { grid-template-columns: 1fr 1fr; gap: 1rem; }
.campo--doble > div { display: grid; gap: .35rem; }
/* El campo trampa para los robots: mismo criterio que el enlace de salto, se
   recorta en vez de mandarlo a diez mil píxeles de aquí. */
.campo--oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.formulario label { font: 600 .8rem/1.3 var(--sans); letter-spacing: .02em; color: var(--oro-claro); }
.formulario input, .formulario select, .formulario textarea {
  width: 100%; padding: .7rem .9rem; font: 400 .95rem/1.5 var(--sans);
  color: var(--texto-claro); background: rgba(255,255,255,.05);
  border: 1px solid rgba(195,154,62,.3); border-radius: var(--radio);
}
.formulario textarea { resize: vertical; min-height: 8rem; font-family: var(--sans); }
.formulario input::placeholder, .formulario textarea::placeholder { color: rgba(236,230,215,.38); }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { border-color: var(--oro); background: rgba(255,255,255,.08); }
.formulario select option { background: var(--tinta-2); color: var(--texto-claro); }
.formulario button { justify-self: start; }
.formulario button[disabled] { opacity: .6; cursor: progress; }
.formulario__aviso { font: 500 .9rem/1.5 var(--sans); min-height: 1.4em; }
.formulario__aviso.ok { color: #7fd0a0; }
.formulario__aviso.mal { color: #f0a08e; }
.campo.error input, .campo.error textarea { border-color: #f0a08e; }

/* ==================================================== PIE ================ */
.pie { background: #0b0a11; color: var(--texto-tenue); text-align: center; padding: 3.4rem 0 2.6rem; border-top: 1px solid rgba(195,154,62,.22); }
.pie__inner { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.pie__marca { font: 700 1.45rem/1 var(--serif); color: var(--papel); letter-spacing: .08em; }
.pie__marca span { color: var(--oro-claro); font-size: .72em; }
.pie__frase { font: italic 400 1.05rem/1.4 var(--serif); color: var(--oro-claro); }
.pie__idiomas { font: 400 .84rem/1.8 var(--sans); }
.pie__idiomas a { color: var(--texto-tenue); text-decoration: none; border-bottom: 1px dotted rgba(195,154,62,.4); }
.pie__idiomas a:hover, .pie__idiomas a.actual { color: var(--oro-claro); }
.pie__legal { font: 400 .76rem/1.6 var(--sans); max-width: 62ch; margin-top: .7rem; opacity: .75; }
.pie__casa { font: 400 .78rem/1.6 var(--sans); margin-top: .9rem; opacity: .8; }
.pie__casa a { color: var(--oro-claro); text-decoration: none; border-bottom: 1px dotted rgba(195,154,62,.5); }

.arriba {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 80;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(232,200,119,.45); background: rgba(18,17,26,.92); color: var(--oro-claro);
  font-size: 1.1rem; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s, transform .3s, visibility .3s;
}
.arriba.visible { opacity: 1; visibility: visible; transform: none; }

/* ==================================================== ANIMACIÓN ========== */
.aparece { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.aparece.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .aparece { opacity: 1; transform: none; }
}

/* ==================================================== RESPONSIVE ========= */
@media (max-width: 1020px) {
  .nav__links {
    position: fixed; inset: 0 0 0 auto; width: min(300px, 80vw); z-index: 92;
    background: rgba(18,17,26,.985); flex-direction: column; justify-content: center; align-items: flex-start;
    gap: 1.5rem; padding: 2rem; transform: translateX(100%); visibility: hidden;
    transition: transform .32s, visibility .32s; box-shadow: -18px 0 54px rgba(0,0,0,.5);
  }
  .nav__links.abierto { transform: none; visibility: visible; }
  .nav__links a { font-size: 1.05rem; }
  .nav__toggle { display: block; position: relative; z-index: 94; }
  .nav__toggle.abierto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle.abierto span:nth-child(2) { opacity: 0; }
  .nav__toggle.abierto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hero__inner { grid-template-columns: 1fr; text-align: center; gap: 2.4rem; }
  .hero__cta { justify-content: center; }
  .hero__entrada { margin-inline: auto; }
  .hero__stats div { text-align: left; }
  .rejilla2, .armas-taller, .mapa__marco { grid-template-columns: 1fr; }
  .armas-taller { gap: 1.8rem; }
}
@media (max-width: 640px) {
  /* La marca cae al 14,7 % del ancho: centrada, la cartela se saldria por la
     izquierda en un movil. Se ancla al borde izquierdo del medidor. */
  .rareza__marca span { left: 0; transform: none; font-size: .9rem; }
  .rareza__marca span::after { left: 1.1rem; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
  .hero__enye { display: none; }
  .campo--doble { grid-template-columns: 1fr; }
  .barra { grid-template-columns: 92px 1fr 42px; gap: .55rem; }
  .barra__nombre { font-size: .78rem; }
  .rejilla2 { gap: 2rem; }
  .cita p { font-size: 1.1em; }
}

/* ==================================================== IMPRESIÓN ========== */
@media print {
  .nav, .arriba, .hero__scroll, .hero__cta, .registros, .buscador, .formulario, .mapa__panel { display: none !important; }
  body, .seccion--tinta, .seccion--papel, .hero { background: #fff !important; color: #000 !important; }
  .hero { min-height: auto; padding: 1.5rem 0; }
  .hero__titulo { -webkit-text-fill-color: #000; color: #000; }
  .seccion--tinta *, .hero * { color: #000 !important; }
  .lugar, .pais, .curio, .tnum, .ficha-persona { border: 1px solid #999; box-shadow: none; background: #fff; }
  .aparece { opacity: 1 !important; transform: none !important; }
  .seccion { padding: 1.5rem 0; page-break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
}

/* ==================================================== FIRMA ============== */
/* Quien hay detrás de la página, con nombre y correo. En una web de apellido
   esto no es un adorno: la primera pregunta de quien llega es «¿y esto quién
   lo hace?», y responderla es la mitad de la credibilidad. */
.firma {
  margin-top: 2.6rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(195,154,62,.25); text-align: center;
}
.firma__eyebrow {
  font: 600 .7rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
  color: var(--oro-hondo); margin-bottom: .6rem;
}
.seccion--tinta .firma__eyebrow { color: var(--oro-claro); }
.firma__nombre { font: 600 1.35rem/1.2 var(--serif); color: #f2ecdb; letter-spacing: .01em; }
.firma__nota { font: 400 .88rem/1.6 var(--sans); color: var(--texto-tenue); margin-top: .5rem; }
.firma__nota a {
  color: var(--oro-claro); text-decoration: none;
  border-bottom: 1px dotted rgba(195,154,62,.6); white-space: nowrap;
}
.firma__nota a:hover { border-bottom-style: solid; }
.armas-taller__fondo.con-video .armas-video { opacity: 1; visibility: visible; }
.armas-taller__fondo.con-video .armas { opacity: 0; transition: opacity .35s ease; }

/* El hallazgo grande de la investigación merece más peso que una caja normal. */
.hallazgo-mayor { border-left: 4px solid var(--oro); border-color: var(--oro); }
.hallazgo-mayor h3 { margin-top: 0; }

/* ==================================================== GALERÍA DE ESCUDOS == */
/* Vitrina: una lámina grande con su ficha al lado y las cinco miniaturas
   debajo. La versión anterior eran cinco tarjetas con sus botones cada una
   —veinte botones a la vez— y mareaba; y como el rótulo del botón de
   reproducir cambia de ancho al pulsarlo, arrastraba a los de al lado.

   Aquí los mandos son unos solos y no se mueven NUNCA. Para eso hacen falta
   tres cosas, y las tres están abajo: el marco con proporción fija (las cinco
   láminas y los cinco vídeos son 2:3, así que ni al cambiar de lámina ni al
   arrancar el vídeo cambia un píxel), la descripción con altura mínima
   reservada, y el botón de reproducir con anchura propia. */
.galeria-escudos { margin-top: 2rem; }
.vitrina {
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 1.6rem 2rem; align-items: start; margin: 1.6rem 0 1.2rem;
}
.vitrina__marco {
  position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  border: 1px solid rgba(195,154,62,.3); border-radius: var(--radio);
  background: #14111a; box-shadow: 0 20px 44px rgba(0,0,0,.5);
}
.vitrina__marco img, .vitrina__marco video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.vitrina__marco img { cursor: zoom-in; }
.vitrina__marco video { opacity: 0; visibility: hidden; transition: opacity .35s; }
.vitrina__marco.con-video video { opacity: 1; visibility: visible; }
.vitrina__marco.con-video img { opacity: 0; }

/* Chapas: los botones redondos que van SOBRE la lámina —altavoz, lupa y, en la
   portada, el de reproducir—. Al ir encima no empujan a nada, que es de lo que
   se trata. El altavoz solo aparece mientras suena algo. */
.chapa {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1;
  background: rgba(14,12,20,.78); color: var(--oro-claro);
  border: 1px solid rgba(195,154,62,.4);
  transition: background .2s, border-color .2s, opacity .2s;
}
.chapa:hover, .chapa:focus-visible { background: rgba(195,154,62,.28); border-color: var(--oro); }
.chapa[hidden] { display: none; }
.chapa svg { width: 19px; height: 19px; }
.son .aspa { opacity: 0; }
.son.mudo .ondas { opacity: 0; }
.son.mudo .aspa  { opacity: 1; }
.vitrina__marco .chapa, .visor__marco .chapa { position: absolute; z-index: 2; bottom: .55rem; }
.vitrina__marco .son,   .visor__marco .son   { left: .55rem; }
.vitrina__marco .lupa,  .visor__marco .lupa  { right: .55rem; }

.vitrina__ficha { display: grid; gap: .5rem; align-content: start; }
.vitrina__cuenta {
  font: 600 .74rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--oro-hondo); margin: 0;
}
.vitrina__ficha h4 { font: 600 1.45rem/1.2 var(--serif); color: #f4eeda; margin: 0; }
/* Altura reservada para la descripción más larga: sin esto, al pasar de una
   lámina de tres líneas a otra de cinco, los botones daban un salto. */
.vitrina__pie {
  font: 400 .95rem/1.6 var(--sans); color: var(--texto-tenue);
  margin: 0; min-height: 4.8em; max-width: 46ch;
}
.vitrina__acc { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .3rem; }
/* Anchura fija en el botón de reproducir: el rótulo pasa de «Ver en
   movimiento» a «Parar» y si no, arrastra consigo a los tres de descarga. */
.vitrina__play { min-width: 13.5rem; justify-content: center; text-align: center; }
.vitrina__bajas { display: flex; flex-wrap: wrap; gap: .45rem; }
.vitrina__bajas .btn[hidden] { display: none; }
.vitrina__fino {
  font: 400 .78rem/1.5 var(--sans); color: var(--oro-hondo); margin: .5rem 0 0;
  max-width: 46ch;
}

/* Las miniaturas. Cinco tiras iguales, la activa con el filo en oro. */
/* align-items: start no es adorno, es lo que hace que esto funcione. Con el
   estirado por defecto, la miniatura se estira a lo alto de la línea flex y su
   anchura en % se resuelve contra el tamaño NATURAL de la imagen -1.248 px-:
   salían cinco tiras larguísimas. Y como las cinco láminas son ya 2:3 exactos,
   basta con alto automático: ni aspect-ratio ni recorte. */
.tiras {
  display: flex; flex-wrap: wrap; align-items: start;
  gap: .7rem; margin: .9rem 0 0;
}
.tira {
  flex: 0 1 116px; display: block; text-decoration: none;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.tira img {
  width: 100%; height: auto; display: block; margin-bottom: .35rem;
  border-radius: calc(var(--radio) - 2px);
  border: 1px solid rgba(195,154,62,.22); opacity: .62;
  transition: opacity .25s, border-color .25s, transform .25s;
}
/* Dos líneas reservadas: hay rótulos de una y de dos, y sin esto la fila de
   miniaturas quedaba con los pies a distinta altura. */
.tira span {
  display: block; min-height: 2.6em;
  font: 500 .72rem/1.3 var(--sans); color: var(--texto-tenue);
  text-align: center; transition: color .25s;
}
.tira:hover img, .tira:focus-visible img { opacity: .9; transform: translateY(-3px); }
.tira.activa img {
  opacity: 1; border-color: var(--oro);
  box-shadow: 0 0 0 1px var(--oro), 0 10px 24px rgba(0,0,0,.45);
}
.tira.activa span { color: var(--oro-claro); }

@media (max-width: 780px) {
  .vitrina { grid-template-columns: 1fr; justify-items: center; gap: 1.2rem; }
  .vitrina__marco { width: min(280px, 72vw); }
  .vitrina__ficha { justify-items: center; text-align: center; }
  .vitrina__pie { min-height: 0; }
  .vitrina__acc { justify-content: center; }
  /* Aquí caben tres por fila y quedan dos abajo: centradas, para que la fila
     corta no se lea como un hueco. */
  .tiras { justify-content: center; }
  .tira { flex: 0 1 84px; }
}

/* ==================================================== VISOR ============== */
.visor {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: 3.5rem 1rem 1rem;
  background: rgba(9,8,14,.96); backdrop-filter: blur(6px);
  animation: visorEntra .2s ease;
}
@keyframes visorEntra { from { opacity: 0; } to { opacity: 1; } }
.visor[hidden] { display: none; }
.visor__caja { display: grid; gap: 1rem; max-height: 100%; justify-items: center; }
.visor__marco { position: relative; }
.visor__marco img, .visor__marco video {
  display: block; max-height: min(74vh, 780px); max-width: min(92vw, 620px);
  width: auto; height: auto; border-radius: var(--radio);
  box-shadow: 0 30px 70px rgba(0,0,0,.7);
}
.visor__marco video { position: absolute; inset: 0; margin: auto; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.visor__marco.con-video video { opacity: 1; visibility: visible; }
.visor__marco.con-video img { opacity: 0; }
.visor figcaption { display: grid; gap: .3rem; justify-items: center; text-align: center; max-width: 60ch; }
.visor figcaption strong { font: 600 1.3rem/1.2 var(--serif); color: #f4eeda; }
.visor figcaption span { font: 400 .88rem/1.5 var(--sans); color: var(--texto-tenue); }
.visor__acc { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-top: .4rem; }
.visor__cuenta { font: 600 .76rem/1 var(--sans); letter-spacing: .16em; color: var(--oro-hondo); }
.visor__cerrar, .visor__nav {
  position: absolute; z-index: 2; cursor: pointer; color: var(--oro-claro);
  background: rgba(18,17,26,.8); border: 1px solid rgba(195,154,62,.34);
  border-radius: 50%; width: 44px; height: 44px; display: grid; place-items: center;
  font-size: 1.3rem; line-height: 1; transition: background .2s, border-color .2s;
}
.visor__cerrar:hover, .visor__nav:hover { background: rgba(195,154,62,.24); border-color: var(--oro); }
.visor__cerrar { top: 1rem; right: 1rem; }
.visor__nav { top: 50%; transform: translateY(-50%); font-size: 1.8rem; }
.visor__nav--ant { left: 1rem; }
.visor__nav--sig { right: 1rem; }
body.visor-abierto { overflow: hidden; }

/* El escudo de portada. Quien manda en el tamaño sigue siendo la imagen —así
   no cambia ni un píxel respecto a como estaba—; el marco solo la envuelve
   para poder colgarle encima el vídeo y las chapas. */
.hero__marco { position: relative; display: inline-block; max-width: 100%; }
.hero__lamina {
  display: block; margin: 0 auto;
  max-height: min(58vh, 470px);
  width: auto; max-width: min(330px, 70vw);
  border-radius: var(--radio);
  box-shadow: 0 22px 46px rgba(0,0,0,.55);
  border: 1px solid rgba(195,154,62,.3);
  transition: opacity .35s;
}
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block; border-radius: var(--radio);
  opacity: 0; visibility: hidden; transition: opacity .35s;
}
.hero__marco.con-video .hero__video { opacity: 1; visibility: visible; }
.hero__marco.con-video .hero__lamina { opacity: 0; }
.hero__mandos { position: absolute; left: .55rem; bottom: .55rem; z-index: 2; display: flex; gap: .4rem; }
#heroLupa { position: absolute; right: .55rem; bottom: .55rem; z-index: 2; }
.hero__bajas { display: flex; justify-content: center; gap: .4rem; margin: .8rem 0 0; }
@media (max-width: 640px) {
  .visor { padding: 3.2rem .6rem .6rem; }
  .visor__nav { width: 38px; height: 38px; font-size: 1.5rem; }
  .visor__nav--ant { left: .3rem; }
  .visor__nav--sig { right: .3rem; }
}


/* ============================================ SELECTOR DE IDIOMA ========= */
/* Bandera + nombre, y las lenguas cooficiales colgando de la del Estado, como
   en norbi-eye.com. Las banderas son SVG incrustado: ni una petición más. */
.bandera {
  display: inline-block; width: 20px; height: 14px; flex: 0 0 20px;
  border-radius: 2px; overflow: hidden; line-height: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.4);
}
.bandera svg { width: 100%; height: 100%; display: block; }
.nav__langbtn { display: inline-flex; align-items: center; gap: .45rem; }
.nav__langbtn span { letter-spacing: .04em; }
.nav__langmenu { min-width: 232px; }
.nav__langmenu a { display: flex; align-items: center; gap: .6rem; }
/* Cuarenta y seis idiomas: el menú se hace alto, así que se le pone tope y
   barra propia, y cada lengua de Estado lleva las suyas plegadas. */
.nav__langmenu { max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; }
.nav__lang-jefe--con { display: flex; align-items: center; }
.nav__lang-jefe--con > a { flex: 1 1 auto; min-width: 0; }
.nav__lang-flecha {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer; padding: .3rem .45rem;
  color: var(--oro-hondo); font-size: .7rem; line-height: 1; border-radius: 5px;
  transition: transform .18s ease, color .18s, background .18s;
}
.nav__lang-flecha:hover { color: var(--oro-claro); background: rgba(195,154,62,.18); }
.nav__lang-flecha[aria-expanded="true"] { transform: rotate(90deg); color: var(--oro-claro); }
.nav__lang-hijas { list-style: none; }
.nav__lang-sub {
  list-style: none; margin: .1rem 0 .3rem .9rem; padding: 0;
  border-left: 2px solid rgba(195,154,62,.24);
}
.nav__lang-sub[hidden] { display: none; }
.nav__lang-sub a { padding-left: 1rem; font-size: .82rem; color: var(--texto-tenue); }
.nav__lang-sub a:hover, .nav__lang-sub a.actual { color: var(--oro-claro); }
.nav__lang-jefe + .nav__lang-hija { margin-top: .1rem; }
.nav__lang-hija + .nav__lang-jefe { margin-top: .45rem; padding-top: .45rem; border-top: 1px solid rgba(195,154,62,.2); }


/* ============================================ DERECHA A IZQUIERDA ======== */
/* Cuatro de los cuarenta y seis idiomas se escriben de derecha a izquierda:
   árabe, persa, urdu y uigur. No hace falta un segundo diseño —la retícula y
   el flex se dan la vuelta solos—, solo enderezar lo que va anclado a un lado
   concreto: el menú, las viñetas, los filos y los mandos sobre las láminas. */
[dir="rtl"] { text-align: right; }
[dir="rtl"] .nav__langmenu { right: auto; left: 0; }
[dir="rtl"] .nav__lang-sub {
  margin: .1rem .9rem .3rem 0;
  border-left: 0; border-right: 2px solid rgba(195,154,62,.24);
}
[dir="rtl"] .nav__lang-sub a { padding-left: .75rem; padding-right: 1rem; }
[dir="rtl"] .nav__lang-flecha[aria-expanded="true"] { transform: rotate(-90deg); }
[dir="rtl"] .nav__lang-flecha { transform: rotate(180deg); }

[dir="rtl"] .hero__stats div { border-left: 0; border-right: 2px solid rgba(195,154,62,.42); padding-left: 0; padding-right: .85rem; }
[dir="rtl"] .cadena__paso { padding: .9rem 3.2rem .9rem 1.1rem; }
[dir="rtl"] .cadena__paso::before { left: auto; right: 1rem; }
[dir="rtl"] .cadena__paso:not(:last-child)::after { left: auto; right: 1.72rem; }
[dir="rtl"] .cadena__paso--doc { border-left: 0; border-right: 3px solid var(--oro-hondo); }

[dir="rtl"] .vitrina__marco .son, [dir="rtl"] .visor__marco .son { left: auto; right: .55rem; }
[dir="rtl"] .vitrina__marco .lupa, [dir="rtl"] .visor__marco .lupa { right: auto; left: .55rem; }
[dir="rtl"] .hero__mandos { left: auto; right: .55rem; }
[dir="rtl"] #heroLupa { right: auto; left: .55rem; }
[dir="rtl"] .tiras { justify-content: flex-end; }

[dir="rtl"] .hallazgo-mayor, [dir="rtl"] .cita, [dir="rtl"] .aviso { border-left: 0; border-right: 4px solid var(--oro); }
[dir="rtl"] .visor__cerrar { right: auto; left: 1rem; }
[dir="rtl"] .visor__nav--ant { left: auto; right: 1rem; }
[dir="rtl"] .visor__nav--sig { right: auto; left: 1rem; }
[dir="rtl"] .arriba { right: auto; left: 1.4rem; }
/* Los números y las fechas se leen igual en las dos direcciones. */
[dir="rtl"] .num, [dir="rtl"] .barra__valor, [dir="rtl"] .hero__stats dt { direction: ltr; unicode-bidi: embed; }