/* familia.css — Familia hay más que una
 *
 * Dos materiales y nada más: agua y papel. El agua es el fondo, oscuro y
 * frío, sobre el que flota todo; el papel es la superficie donde se lee.
 * Cuando algo se sabe de verdad, está en papel. Cuando se intuye, está bajo
 * el agua. Esa regla vale para el color, para la opacidad y para el foco.
 */

/* ─── Fuentes ─────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-Latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-LatinExt.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'InterVar';
  src: url('../fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* ─── Tokens ──────────────────────────────────────────────────────────── */

:root {
  /* Agua: el fondo. Frío, con una punta de verde de río, nunca azul marino. */
  --agua-900: #070d10;
  --agua-850: #0a1216;
  --agua-800: #0e181d;
  --agua-700: #142229;
  --agua-600: #1c2f38;
  --agua-500: #274150;
  --agua-400: #3a5c6d;

  /* Luz sobre el agua */
  --brillo:      #9ec4d2;
  --brillo-alto: #dcefF5;
  --brillo-bajo: #6d93a3;

  /* Papel: la superficie de lectura */
  --papel:    #f0e7d6;
  --papel-2:  #e4d8c1;
  --papel-3:  #c0ad8c;

  /* Tinta ferrogálica sobre ese papel */
  --tinta:    #241c14;
  --tinta-2:  #4d4030;
  --tinta-3:  #6a5a44;   /* 5,6:1 sobre papel; el anterior se quedaba en 4,18 */

  /* Acentos */
  --ocre:     #c9992a;   /* la paja seca del invierno leonés */
  --ocre-alto:#e8c66a;
  --rubrica:  #9c4232;   /* el rojo del calderón en los cartularios */
  --musgo:    #6f8f6a;   /* lo que sigue vivo */

  /* Texto sobre agua */
  --texto:      #d8e4e9;
  --texto-2:    #93a9b3;
  --texto-3:    #7b929b;   /* 6,0:1 sobre agua-900; el #62787f anterior daba 4,2 y se usa en toda la metadata */

  --linea:      rgba(158, 196, 210, .3);    /* las rejillas de 1px eran invisibles a .16 */
  --linea-viva: rgba(158, 196, 210, .52);   /* bordes de control: hace falta 3:1 */

  /* Tipografía */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --texto-f: 'InterVar', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Escala fluida */
  --t-xs:   0.72rem;
  --t-sm:   0.82rem;
  --t-base: 0.94rem;
  --t-md:   1.06rem;
  --t-lg:   clamp(1.2rem, 1.6vw, 1.45rem);
  --t-xl:   clamp(1.6rem, 2.6vw, 2.2rem);
  --t-2xl:  clamp(2.1rem, 4.4vw, 3.4rem);
  --t-3xl:  clamp(2.8rem, 8vw, 6.4rem);

  /* Ritmo */
  --r1: 4px;  --r2: 8px;  --r3: 14px; --r4: 22px;
  --r5: 36px; --r6: 58px; --r7: 94px;

  --radio:    3px;
  --radio-g:  6px;
  --sombra:   0 2px 8px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.3);
  --sombra-c: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35);

  --nav-h: 52px;
  --curva: cubic-bezier(.22,.61,.36,1);
}

/* ─── Base ────────────────────────────────────────────────────────────── */

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

/* `hidden` tiene que ganar siempre. Sin esto, cualquier regla de clase que
 * declare `display` lo anula por especificidad — y pasó: la pantalla de
 * entrada enseñaba a la vez el paso de pedir la clave y el de escribirla,
 * con un «Enviada a —» sin rellenar. */
[hidden] { display: none !important; }

html {
  background: var(--agua-900);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--agua-900);
  color: var(--texto);
  font-family: var(--texto-f);
  font-size: var(--t-base);
  line-height: 1.55;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* El grano. Va sobre todo, no intercepta el ratón, y es lo que impide que
 * los degradados se vean como plástico. */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  z-index: 700;          /* por debajo del nav (800) y de la ficha (901):
                          * el grano no debe caer sobre lo que se lee */
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Estático. Animarlo no aportaba nada que el grano fijo no haga ya, y
   * repintaba la pantalla entera tres veces por segundo, para siempre. */
}
@keyframes grano {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: 'SOFT' 30, 'WONK' 1, 'opsz' 90;
  line-height: 1.05;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0 0 var(--r3); text-wrap: pretty; }

a { color: var(--brillo); text-decoration-color: var(--linea-viva); text-underline-offset: 3px; }
a:hover { color: var(--brillo-alto); }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--ocre); color: var(--agua-900); }

:focus-visible {
  outline: 2px solid var(--ocre-alto);
  outline-offset: 2px;
  border-radius: var(--radio);
}
/* Sobre papel el ocre desaparece (1,35:1). La rúbrica da 5,28:1 y además es
 * el color que ya usa el papel para lo importante. */
.papel :focus-visible,
.ficha :focus-visible,
.bloque-papel :focus-visible {
  outline-color: var(--rubrica);
}

/* Sólo para lectores de pantalla */
.oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: var(--r3); top: -100px; z-index: 10000;
  background: var(--papel); color: var(--tinta); padding: var(--r2) var(--r3);
  border-radius: var(--radio); font-weight: 600; transition: top .18s var(--curva);
}
.saltar:focus { top: var(--r3); }

/* ─── Navegación ──────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 800;
  height: var(--nav-h);
  display: flex; align-items: center; gap: var(--r4);
  padding: 0 var(--r4);
  background: rgba(7, 13, 16, .82);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--linea);
}

.nav-marca {
  display: flex; align-items: baseline; gap: .45em;
  font-family: var(--display);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 20;
  font-size: var(--t-md); font-weight: 500;
  color: var(--papel); text-decoration: none; white-space: nowrap;
  flex-shrink: 0;
}
.nav-marca em {
  font-style: normal; color: var(--ocre);
}
.nav-marca span {
  font-family: var(--mono); font-size: .58em; color: var(--texto-3);
  letter-spacing: .1em; text-transform: uppercase;
}

.nav-vistas {
  display: flex; align-items: center; gap: 2px;
  margin-left: auto;
  overflow-x: auto; scrollbar-width: none;
}
.nav-vistas::-webkit-scrollbar { display: none; }

.nav-v {
  position: relative;
  padding: var(--r1) var(--r3);
  font-size: var(--t-sm); font-weight: 500;
  color: var(--texto-2); text-decoration: none; white-space: nowrap;
  border-radius: var(--radio);
  transition: color .18s var(--curva), background .18s var(--curva);
}
.nav-v:hover { color: var(--brillo-alto); background: rgba(158,196,210,.07); }
.nav-v[aria-current='page'] { color: var(--papel); }
.nav-v[aria-current='page']::after {
  content: ''; position: absolute; left: var(--r3); right: var(--r3); bottom: -1px;
  height: 2px; background: var(--ocre);
}

/* ─── Piezas ──────────────────────────────────────────────────────────── */

.envoltura { width: min(1240px, 100% - var(--r5)); margin-inline: auto; }
.envoltura-ancha { width: min(1560px, 100% - var(--r4)); margin-inline: auto; }
.envoltura-lectura { width: min(66ch, 100% - var(--r5)); margin-inline: auto; }

.tanteo {
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--texto-3);
}
.tanteo b { color: var(--ocre); font-weight: 400; }

.regla {
  border: 0; height: 1px; margin: var(--r6) 0;
  background: linear-gradient(90deg, transparent, var(--linea) 12%, var(--linea) 88%, transparent);
}

/* Botones. Dos: el de tinta y el de agua. */
.bt {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .62em 1.25em;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .01em;
  border: 1px solid transparent; border-radius: var(--radio);
  cursor: pointer; text-decoration: none;
  transition: transform .16s var(--curva), background .16s var(--curva),
              border-color .16s var(--curva), color .16s var(--curva);
}
.bt:active { transform: translateY(1px); }

.bt-papel { background: var(--papel); color: var(--tinta); }
.bt-papel:hover { background: #fff; color: var(--tinta); }

.bt-agua {
  background: transparent; color: var(--brillo);
  border-color: var(--linea-viva);
}
.bt-agua:hover { background: rgba(158,196,210,.1); color: var(--brillo-alto); border-color: var(--brillo-bajo); }

.bt-min {
  padding: .34em .7em; font-size: var(--t-xs); font-weight: 500;
  background: transparent; color: var(--texto-2); border-color: var(--linea);
}
.bt-min:hover { color: var(--papel); border-color: var(--linea-viva); }
.bt-min[aria-pressed='true'] {
  background: var(--ocre); border-color: var(--ocre); color: var(--agua-900); font-weight: 600;
}

/* Campo de texto */
.campo {
  width: 100%;
  padding: .68em .85em;
  background: rgba(158,196,210,.05);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  color: var(--texto);
  transition: border-color .16s var(--curva), background .16s var(--curva);
}
.campo::placeholder { color: var(--texto-3); }
.campo:focus {
  outline: none; border-color: var(--brillo-bajo);
  background: rgba(158,196,210,.09);
}

/* ─── Papel: la superficie de lectura ─────────────────────────────────── */

.papel {
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 40%),
    var(--papel);
  color: var(--tinta);
  border-radius: var(--radio-g);
  box-shadow: var(--sombra-c);
  position: relative;
}
.papel::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background-image: url('../media/pergamino.jpg');
  background-size: cover;
  mix-blend-mode: multiply;
  opacity: .16;
}
.papel > * { position: relative; }
.papel a { color: var(--rubrica); }
.papel h1, .papel h2, .papel h3 { color: var(--tinta); }
.papel .tanteo { color: var(--tinta-3); }
.papel .tanteo b { color: var(--rubrica); }

/* ─── Utilidades de movimiento ────────────────────────────────────────── */

.aparece {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--curva), transform .7s var(--curva);
}
.aparece.visible { opacity: 1; transform: none; }

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

/* ─── Barra de desplazamiento ─────────────────────────────────────────── */

* { scrollbar-width: thin; scrollbar-color: var(--agua-500) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--agua-500); border-radius: 99px;
  border: 2px solid var(--agua-900);
}
*::-webkit-scrollbar-thumb:hover { background: var(--agua-400); }

/* ─── Pie ─────────────────────────────────────────────────────────────── */

.pie {
  margin-top: var(--r7);
  padding: var(--r5) 0 var(--r4);
  border-top: 1px solid var(--linea);
  font-size: var(--t-sm); color: var(--texto-3);
}
.pie-fila {
  display: flex; flex-wrap: wrap; gap: var(--r4);
  align-items: baseline; justify-content: space-between;
}
.pie a { color: var(--texto-2); text-decoration: none; }
.pie a:hover { color: var(--brillo); }
.pie-notas { max-width: 62ch; margin-top: var(--r3); line-height: 1.6; }

/* La salida. Va al final de la fila de vistas y se distingue sin gritar. */
.nav-salir {
  background: none; border: 0; cursor: pointer;
  font-family: inherit; margin-left: var(--r3);
  color: var(--texto-3);
}
.nav-salir::before {
  content: ''; display: inline-block;
  width: 1px; height: 12px; margin-right: var(--r3);
  background: var(--linea); vertical-align: -2px;
}
.nav-salir:hover { color: var(--ocre-alto); background: none; }

/* En un móvil la marca no cabe entera junto a ocho vistas. Se recorta el
 * apellido «ASTURA» y se deja que el título encoja: antes empujaba la fila y
 * el documento se iba quince píxeles a la derecha. */
@media (max-width: 720px) {
  .nav { padding: 0 var(--r3); gap: var(--r3); }
  .nav-marca { font-size: var(--t-sm); min-width: 0; overflow: hidden; }
  .nav-marca span { display: none; }
  .nav-vistas { margin-left: auto; }
  .nav-v { padding: var(--r1) var(--r2); }
  .nav-salir { margin-left: var(--r2); }
  .nav-salir::before { margin-right: var(--r2); }
}
@media (max-width: 460px) {
  .nav-marca em { display: none; }
}