/* Base provisional. La dirección de arte real espera al moodboard de Kiara:
   aquí solo hay lo imprescindible para que la estructura sea legible. */

/* Los glifos rúnicos (U+16A0–U+16FF) NO están en las fuentes de sistema de
   forma fiable: en esta máquina se ven porque tiene Noto Sans Runic instalada,
   pero en el móvil de un visitante cualquiera pueden salir como cuadrados. En
   un sitio cuyo motor son 72 páginas de runas eso no se deja al azar.

   `unicode-range` hace que el navegador descargue estos 4 KB solo cuando
   encuentra un carácter rúnico: la portada no paga nada por ellos. Y como el
   rango está acotado, basta con poner la familia primera en la pila del body:
   el texto normal cae en Georgia igualmente.

   Noto Sans Runic — licencia en /fonts/LICENSE-noto.txt */
@font-face {
  font-family: 'Noto Sans Runic';
  src: url('/fonts/noto-sans-runic.woff2') format('woff2');
  unicode-range: U+16A0-16FF;
  font-display: swap;
}

/* Valkiara Titling —el logotipo de Kiara extendido a un alfabeto, en
   /fonts/ValkiaraTitling.woff2 y construida en herramientas/tipografia/—
   NO se declara hoy: desde el 21-09-2026 ningún texto del sitio la usa. El
   <h1> de Home dejó de ser «Valkiara» para llevar la frase de búsqueda, y
   la marca la pone el logotipo dibujado de la cabecera. Cuando vuelva a
   haber un titular de marca, se redeclara aquí (font-display: swap, sin
   unicode-range) y se le devuelve el preload en base.templ. */

/* Grenze: la serif del cuerpo de texto. Revival de tipos alemanes del XVI
   adaptada a lectura corrida — condensada, remates en cuña, registro gótico
   real sin caer en blackletter ilegible a cuerpo de texto. Elegida el
   13-09-2026 tras comparar ocho candidatas en vivo contra la ficha de Algiz;
   ver memoria del proyecto para el porqué de cada descarte.

   Autohospedada y subseteada a mano (11,6 KB), no servida desde Google
   Fonts: el dominio no manda tráfico de visitante a terceros, que es la
   misma razón de RGPD que ya regía para no incrustar YouTube/Instagram
   (ver docs/DECISIONES.md, sección Vídeo). El subset cubre ASCII imprimible
   más los acentos de ES/DE y Æ/Ý — regenerar con:

     curl "https://fonts.googleapis.com/css2?family=Grenze:wght@400&text=<repertorio>"
       -A "Mozilla/5.0"   # el user-agent importa: sin él Google no da woff2
     # baja el .ttf que devuelve esa URL y:
     fonttools ttLib.woff2 compress entrada.ttf -o Grenze.woff2

   Solo el peso 400: hoy no hay ni un <strong> ni <em> en el cuerpo de texto
   (content/ ni i18n/texts.go usan énfasis), así que no se paga por pesos que
   nadie pide. Grenze SÍ es variable (100–900) por si hace falta más adelante
   — licencia en /fonts/LICENSE-grenze.txt (SIL Open Font License). */
@font-face {
  font-family: 'Grenze';
  src: url('/fonts/Grenze.woff2') format('woff2');
  font-display: swap;
}

/* Grenze Gotisch: gótica de exhibición, interina en todos los <h1>/<h2>.
   Acordado el 13-09-2026: hasta que Valkiara Titling esté pulida —hoy la S y
   el & quedan flojos—, los títulos de página usan una gótica de verdad en
   vez de forzar la propia a un uso para el que no está lista.

   Elegida sobre la alternativa de dafont que trajo Alan (Text In Gothic, de
   Luan Oliveira) por tres razones: es del mismo diseñador de tipos que
   Grenze —Omnibus-Type—, así que empareja con la serif del cuerpo en vez de
   competir con ella; es blackletter de verdad, no una gótica moderna
   angulosa; y viene con hinting e instancias de peso variable cuidadas,
   cosa que una fuente suelta de dafont no garantiza. Misma licencia (OFL) y
   mismo tratamiento: autohospedada, sin tráfico a Google Fonts.

   Subset con el idéntico repertorio de Grenze.woff2 (169 glifos: ASCII
   imprimible + acentos ES/DE + Æ/Ý) para no repetir el trabajo de decidir
   qué caracteres hacen falta — ver el comentario de Grenze más abajo.
   Licencia en /fonts/LICENSE-grenzegotisch.txt (SIL Open Font License). */
@font-face {
  font-family: 'Grenze Gotisch';
  src: url('/fonts/GrenzeGotisch.woff2') format('woff2');
  font-display: swap;
}

/* La paleta salió de medir los colores dominantes de las fotos de Kiara, no de
   elegir bonito (29-08-2026, ver docs/DECISIONES.md). Los contrastes van
   recalculados sobre --tinta y anotados aquí para que nadie tenga que fiarse.

   Y los tres colores tienen significado fijo, no decorativo:
     brasa     = acción. Si algo es brasa, se pulsa. Nada más lo usa.
     verdin    = el mundo. Runas, ætt, glosa editorial.
     pergamino = la voz. El texto que se lee.
   Es lo que permite que el CTA se vea sin gritar: en una página donde solo hay
   un naranja, el ojo aprende en dos pantallas dónde está la salida. */
:root {
  /* Negro cálido, no frío. Sus negros son #120E0A · #131110 · #181412, y sobre
     un #0a0a0b azulado las fotos flotaban en vez de apoyarse en la página. */
  --tinta: #0d0b0a;
  --humo: #17130f;      /* superficie elevada */
  --filete: #241d18;    /* la única línea del sitio */
  --pergamino: #e8e4dc; /* 15,49:1 — texto */
  --ceniza: #8b8178;    /*  5,15:1 — pies de foto y metadatos */
  --brasa: #b8763a;     /*  5,32:1 — acción */
  --verdin: #5E8C84;    /*  5,20:1 — runas y glosa */
  --medida: 68ch;   /* línea de lectura: párrafos y la ficha de runa */
  --ancho: 90rem;    /* contenedor de página: cabe una retícula grande, no solo texto */
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 2rem 1.25rem 6rem;
  background: var(--tinta);
  color: var(--pergamino);
  font: 20px/1.6 'Noto Sans Runic', 'Grenze', ui-serif, Georgia, serif;
}
/* width: 100% es necesario, no cosmético: main es hijo de un body en flex
   column más abajo, y un margin-inline:auto en el eje transversal de flex
   anula el stretch por spec — sin el ancho explícito, main se encoge a su
   contenido y una rejilla con `1fr` dentro colapsa a un tamaño mínimo. */
main { width: 100%; max-width: var(--ancho); margin-inline: auto; }
a { color: var(--brasa); }
/* Gótica interina — ver el @font-face de Grenze Gotisch más arriba. Sin
   `uppercase` forzado: al revés que Valkiara Titling, esta SÍ tiene
   minúsculas, y una blackletter se lee mejor en su caja natural que
   forzada a mayúscula. */
h1, h2 {
  font-family: 'Grenze Gotisch', ui-serif, Georgia, serif;
  font-weight: 400;
  line-height: 1.05;
}
h1 { font-size: clamp(2.6rem, 7vw, 4.5rem); }
h2 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); }

/* ---------------------------------------------------------------------------
   Marco: cabecera, pie y la única acción del sitio.

   Sin esquinas redondeadas en ningún sitio, a propósito: su obra no las tiene,
   y el borde recto es lo que separa esto de un carrusel de Instagram.
   --------------------------------------------------------------------------- */

body {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
main {
  padding-inline: 1.25rem;
  padding-block: 2rem 5rem;
  flex-grow: 1;
}

.cabecera {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--filete);
}
/* El logotipo es dibujo, no texto: se le da ancho y la altura sale del
   viewBox. Los width/height del <img> están para reservar el hueco y que la
   cabecera no dé un salto al cargar. */
.marca img { display: block; width: 158px; height: auto; }
/* flex-wrap y nowrap juntos: sin el primero el menú se salía 25 px del
   viewport en un móvil de 390; sin el segundo "Cover-ups" se partía por el
   guion en dos líneas. */
.menu { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; flex-grow: 1; }
.menu a { color: var(--pergamino); text-decoration: none; white-space: nowrap; padding-block: .35rem; }
.menu a:hover { color: var(--brasa); }
.menu [aria-current] { box-shadow: inset 0 -2px var(--brasa); }

/* Los tres idiomas a la vista y no en un desplegable: que se pueda cambiar
   tiene que verse sin buscarlo, y el público es de tres países a partes
   casi iguales. A 13 px en Grenze no se leían; ahora van al tamaño del
   menú un punto por debajo, y el actual se marca con el filete de brasa. */
.idiomas { display: flex; gap: .25rem; font-size: 1.0625rem; }
.idiomas a, .idiomas [aria-current] { padding: .35rem .5rem; text-decoration: none; }
.idiomas a { color: var(--ceniza); }
.idiomas a:hover { color: var(--pergamino); }
.idiomas [aria-current] { color: var(--pergamino); box-shadow: inset 0 -2px var(--brasa); }

/* Brasa = acción: escribir por WhatsApp, el único color que se pulsa en todo
   el sitio. Un solo botón, idéntico en cabecera, cuerpo y pie (27-09): el
   mismo texto con dos aspectos parece dos acciones distintas. Hasta
   entonces había una versión hueca de 14 px que se leía justo. */
.accion, .secundario {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  border: 1px solid;
  text-decoration: none;
  padding: .75rem 1.4rem;
  font-size: 1.125rem;
  font-weight: 600;
}
.accion { border-color: var(--brasa); background: var(--brasa); color: var(--tinta); }
.accion:hover { background: transparent; color: var(--brasa); }

/* El botón secundario lleva a más obra, no a escribir: en reposo no es
   brasa. Al pasar por encima sí, porque brasa es el hover de todo el sitio
   (menú, titulares enlazados, pie); un blanco más intenso era un segundo
   lenguaje de hover que no existía en ningún otro sitio. */
.secundario { border-color: var(--ceniza); color: var(--pergamino); font-weight: 400; }
.secundario:hover { border-color: var(--brasa); color: var(--brasa); }
/* La variante del mundo rúnico: el verdín hace de brasa, y en reposo ya
   lo lleva en el borde, porque es la puerta a otra parte del sitio. */
.secundario.mundo { border-color: var(--verdin); }
.secundario.mundo:hover { color: var(--verdin); }

/* La flecha es una flecha tallada, no un icono de interfaz: asta larga,
   punta de dos ramas rectas y emplumado en la cola, todo en trazos rectos y
   sin curvas, como se graban las runas. No es Tiwaz girada aunque la punta
   se le parezca: Tiwaz es una de las cuatro apropiadas (ver DECISIONES) y
   no va de adorno en cada botón; el emplumado es lo que la hace flecha y no
   runa. Es máscara y no imagen para que herede el color del texto en reposo
   y en hover. */
.accion::after, .secundario::after {
  content: "";
  flex: none;
  width: 1.75em;
  height: .8em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M1 7h27M21 1.5 28.5 7 21 12.5M7 7 2 2M7 7 2 12M11 7 6 2M11 7 6 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .accion::after, .secundario::after { transition: transform .25s ease; }
  .accion:hover::after, .secundario:hover::after { transform: translateX(.25em); }
}

/* Grano sobre toda la página: el 5,5 % de opacidad que fijó el lienzo de
   dirección de arte. Es lo que separa un negro de pantalla de un negro de
   papel, y lo que hace que las fotos se apoyen en la página en vez de
   flotar. Fijo y sin eventos: se compone una vez y no cuesta al hacer
   scroll. El SVG va en línea porque son 300 bytes y ahorra una petición. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.pie {
  border-top: 1px solid var(--filete);
  padding: 2.5rem 1.25rem 3rem;
  text-align: center;
}
/* Instagram y el correo son la segunda vía de contacto: a 13 px y en
   ceniza no se veían. Van al cuerpo del menú y en pergamino. */
.menudo { color: var(--ceniza); font-size: 1rem; margin-block-start: 1.75rem; }
.menudo a { color: var(--pergamino); text-underline-offset: .2em; }
.menudo a:hover { color: var(--brasa); }

@media (max-width: 40rem) {
  .cabecera { gap: .9rem 1rem; }
  .marca img { width: 124px; }
  /* En móvil el botón baja a su propia fila, a todo el ancho: es lo que
     hay que poder pulsar con el pulgar sin apuntar. */
  .cabecera .accion { order: 1; flex-basis: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   Fichas de runa. Son 72 de las 78 páginas del sitio: si algo se lee mal aquí,
   se lee mal en todas partes.
   --------------------------------------------------------------------------- */

h1, h2 { margin-block: 0 .6em; }
/* La medida se limita SOLO en el cuerpo del artículo. Aplicarla a todo <p>
   descentraba el pie, que va centrado. */
main p { max-width: var(--medida); }

.volver { font-size: .875rem; margin-block-end: 2.5rem; }
.volver a { color: var(--ceniza); text-decoration: none; }
.volver a:hover { color: var(--brasa); }

.runa { display: flex; align-items: baseline; gap: .4em; font-size: clamp(2.6rem, 7vw, 4rem); }
/* El glifo en verdín porque pertenece al mundo, no a la acción. Y con su
   propia familia primero: `unicode-range` hace que la webfont solo se
   descargue al encontrarse un carácter rúnico. */
.glifo { font-family: 'Noto Sans Runic', serif; color: var(--verdin); font-size: 1.15em; }

/* La ficha es una tabla de datos, no prosa: rejilla de dos columnas en pantalla
   ancha y apilada en el móvil. El <dl> por defecto sangra el <dd> y no alinea
   nada, que es como se veía hasta ahora. */
.ficha {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: .1rem 2rem;
  margin: 2.5rem 0;
  max-width: var(--medida);
  border-top: 1px solid var(--filete);
}
.ficha dt {
  grid-column: 1;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ceniza);
  padding-block: 1rem .3rem;
}
.ficha dd {
  grid-column: 2;
  margin: 0;
  padding-block: 1rem .3rem;
  border-bottom: 1px solid var(--filete);
}
.ficha dt { border-bottom: 1px solid var(--filete); }
@media (max-width: 34rem) {
  .ficha { grid-template-columns: 1fr; }
  .ficha dt { padding-block: 1rem 0; border-bottom: 0; }
  .ficha dd { grid-column: 1; padding-block: .2rem 1rem; }
}

/* El aviso de runa apropiada. Va en verdín y no en rojo a propósito: no es una
   alarma, es una postura editorial que Kiara defiende en la silla. */
.aviso {
  border-inline-start: 2px solid var(--verdin);
  padding: .2rem 0 .2rem 1.25rem;
  margin: 2.5rem 0;
  color: #c8c1b7;
}
.aviso p { margin: 0; font-size: .9375rem; }

/* Índice del futhark: rejilla de fichas, no lista con viñetas.

   Cada runa en su propia tarjeta —fondo humo, no tinta pura— para bajar el
   contraste un peldaño sin tocar la paleta global: pergamino sobre tinta
   pura a este tamaño de letra vibra, pergamino sobre humo no. Y la letra
   crece con el ancho de pantalla: hay sitio de sobra en portátil y 4K, y
   este índice es la puerta de entrada a 72 páginas, no una nota al pie.

   `grid-auto-rows: minmax(...)` fija un suelo de altura igual para TODAS
   las filas, no solo dentro de cada una: por defecto (`align-items: stretch`
   sin este mínimo) una fila con un literal de dos líneas —"gigante, espina"—
   sale más alta que la fila de al lado con literales de una línea, y la
   rejilla se ve a trompicones en vez de uniforme. `align-items: center`
   en la tarjeta centra el contenido en ese suelo en vez de clavarlo arriba. */
.futhark { list-style: none; padding: 0; display: grid;
           grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
           grid-auto-rows: minmax(4.75rem, auto); gap: .75rem 1rem; }
.futhark a {
  display: flex; align-items: center; gap: .6em;
  height: 100%;
  padding: .9rem 1.1rem;
  background: var(--humo);
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem);
  color: var(--pergamino); text-decoration: none;
}
.futhark a:hover { background: var(--filete); color: var(--verdin); }
.futhark a span { font-family: 'Noto Sans Runic', serif; color: var(--verdin); font-size: 1.3em; }

/* Retícula del portfolio: provisional a propósito, igual que el resto de esta
   hoja — solo columnas y aire, sin dirección de arte hasta el moodboard.

   18rem de mínimo por columna, no 11rem: es trabajo de gran escala, y una
   miniatura de 176px lo aplana. auto-fill hace el resto solo — una columna
   ancha en móvil, cinco o seis en un portátil, y en 4K sigue habiendo sitio
   de sobra porque `main` ya tiene su propio tope en --ancho. */
/* align-items: start es necesario, no cosmético: por defecto una celda de
   grid se estira a la altura de la más alta de su fila, y su trabajo trae
   fotos verticales de proporción muy dispar (un antebrazo puede salir 640×905
   u otro 640×1672 en la misma fila). Sin esto, las fotos más bajas de esa fila
   se quedaban ancladas arriba con un hueco vacío debajo, en vez de solo tener
   filas de alturas distintas. */
.retícula { list-style: none; padding: 0; display: grid;
            grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.25rem;
            align-items: start; }
.retícula img { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------------------------
   Portada. Sigue el artboard «Dirección A — Portada» del lienzo de
   dirección de arte: héroe, escala, trabajo reciente, corredor de runas y
   cierre, cada banda separada por el único filete del sitio. Dos cambios
   respecto al lienzo, ambos de Alan (21-09-2026): el héroe es el retrato de
   Kiara y no una pieza, y la frase espina no va aquí.
   --------------------------------------------------------------------------- */

.portada { padding-block-start: 0; }
.portada > section { padding-block: 4.5rem; border-top: 1px solid var(--filete); }
.portada > section:first-child { border-top: 0; padding-block-start: 2.5rem; }

/* Héroe: texto a la izquierda, retrato a la derecha con sangrado y fundido
   hacia la página. El retrato tiene 1.242 px de original —derivados hasta
   800— así que se le pone tope de 34rem: a ese ancho sigue nítido en 1,5×;
   a ancho completo no. El fundido no es decorativo: la foto tiene el fondo
   en bokeh oscuro y sin él se leía como un rectángulo pegado. */
.heroe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
  gap: 3rem;
  align-items: center;
}
.heroe h1 { font-size: clamp(2.75rem, 7.5vw, 6rem); max-width: 12ch; }
.heroe-texto p { max-width: 42ch; }
.donde { color: var(--ceniza); font-size: .9375rem; margin-block: 0 1rem; }
.heroe-accion { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-block-start: 2rem; }
.heroe-accion span { color: var(--ceniza); font-size: .9375rem; }
.heroe-retrato { margin: 0 calc(-1 * 1.25rem) 0 0; }
.heroe-retrato img {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%), linear-gradient(180deg, transparent, #000 10%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 24%), linear-gradient(180deg, transparent, #000 10%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
/* Sin animación de aparición en el héroe: es la imagen prioritaria de la
   página y un fundido de medio segundo sobre ella se nota como espera. */
.heroe-retrato picture img { animation: none; }

/* La escala: las cuatro barras crecen en ancho y alto a la vez sobre UNA
   línea de base continua. El filete va en el carril de cada columna y las
   columnas no tienen hueco entre sí, porque con un borde por celda la
   línea se parte en cuatro y la comparación de tamaño, que es el
   argumento entero de la sección, deja de leerse. La barra lleva su tamaño
   en el HTML porque es dato; aquí solo el color, una rampa hacia la brasa.
   Sin el balrog velado de la Variante A del lienzo: con una pieza real
   bajo cada barra, el fondo ya no se veía y se le dio banda propia. */
.escala-cabecera {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem;
  align-items: end; margin-block-end: 4rem;
}
.escala-cabecera h2 { grid-column: span 5; }
.escala-cabecera > p { grid-column: 7 / span 6; margin: 0; color: #cfc8be; }
.escala-cabecera h2 { font-size: clamp(2.4rem, 5vw, 4.25rem); line-height: .95; margin: 0; }
.escala-zonas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.escala-zonas .carril {
  display: flex; align-items: flex-end; height: 4.75rem;
  padding-inline-end: 2rem; border-bottom: 1px solid #5a4838; margin-block-end: 1.25rem;
}
.escala-zonas li:last-child .carril { padding-inline-end: 0; }
.escala-zonas .barra { display: block; min-width: 1.4rem; }
.escala-zonas li:nth-child(1) .barra { background: linear-gradient(180deg, #7a6250, #3f3227); }
.escala-zonas li:nth-child(2) .barra { background: linear-gradient(180deg, #96745a, #4c3a2c); }
.escala-zonas li:nth-child(3) .barra { background: linear-gradient(180deg, #b0794a, #5a4029); }
.escala-zonas li:nth-child(4) .barra { background: linear-gradient(180deg, #d08c47, #6b4526); }
.escala-zonas .medida, .escala-zonas strong { display: block; padding-inline-end: 2rem; }
.escala-zonas .medida { font-family: 'Grenze Gotisch', ui-serif, Georgia, serif; font-size: 1.75rem; line-height: 1.1; margin-block-end: .4rem; }
.escala-zonas strong { font-weight: 400; font-size: 1rem; color: #cfc8be; }
/* La pieza de cada escala, recortada a 4:5 por arriba, donde suele estar
   la cara. Las tres con el mismo aire a la derecha, también la última:
   si no, sale más ancha y por tanto más alta que las otras dos. */
.escala-pieza { margin: 1.5rem 2rem 0 0; }
.escala-pieza img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }

/* El Balrog, en banda propia: su pieza más vistosa. La espalda entera a
   la izquierda, grande, y a la derecha el texto con el primer plano debajo,
   que es donde se ve la técnica. Entre las dos fotos, el radial en brasa
   del lienzo: la única luz cálida del sitio sale de esta pieza. */
.destacada {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem;
  align-items: end;
  background: radial-gradient(80% 70% at 30% 100%, rgba(184, 118, 58, .16), transparent 70%);
}
.destacada figure { margin: 0; }
.destacada img { display: block; width: 100%; height: auto; }
.destacada-entera { grid-column: span 7; }
.destacada-texto { grid-column: span 5; }
.destacada-texto h2 { font-size: clamp(2.4rem, 5vw, 4.25rem); line-height: .95; }
.destacada-texto p { color: #cfc8be; }
.destacada-detalle { margin-block-start: 2rem; }
/* Arriba del todo: los ojos y los dientes del Balrog están en el tercio
   superior de esta foto, y más abajo solo queda fuego. */
.destacada-detalle img { aspect-ratio: 1; object-fit: cover; object-position: 50% 0%; }

/* Trabajo reciente: rejilla de 12 con jerarquía fija (7 + 5, luego 4 × 3),
   filas de altura uniforme y recorte por object-fit. Recortar no es lo que
   hace el Portfolio —allí cada foto entera— pero esto es un escaparate,
   no el archivo, y sin filas iguales seis fotos de proporción dispar hacen
   un tetris. */
.reciente-piezas {
  list-style: none; padding: 0; margin: 2.5rem 0 0;
  display: grid; grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 30rem; gap: 1.25rem;
}
.reciente-piezas li { grid-column: span 3; display: grid; grid-template-rows: 1fr auto; gap: .5rem; min-height: 0; }
.reciente-piezas li:nth-child(1) { grid-column: span 7; }
.reciente-piezas li:nth-child(2) { grid-column: span 5; }
.reciente-piezas picture { min-height: 0; }
.reciente-piezas img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
/* La primera es la cara agrietada (homeRecent en home.templ): lo que
   cuenta —ojos, lágrima y las dos bocas— está entre el 28 y el 72 % de la
   altura, y el 20 % general la dejaba en la frente, donde no hay detalle.
   Va atado al orden de homeRecent: si cambia la primera, revisar esto. */
.reciente-piezas li:first-child img { object-position: 50% 50%; }
.reciente-piezas a { color: var(--ceniza); font-size: .875rem; text-decoration: none; }
.reciente-piezas a:hover { color: var(--brasa); }
/* La foto enlaza a su página de pieza. El enlace ocupa la celda que antes
   ocupaba el <picture>, así que hereda su papel: bloque, sin mínimo, y la
   foto llena el alto de la fila. */
.reciente-piezas .pieza-enlace { display: block; min-height: 0; }
.reciente-piezas .pieza-enlace picture { display: block; height: 100%; }
.reciente-mas { margin-block-start: 2rem; color: #c8c1b7; }
.reciente-mas .secundario { margin-inline-start: 1rem; }

/* Corredor de runas: texto y las 24 runas cara a cara. El futhark va en
   verdín porque es el mundo, no la acción, y con el tracking del lienzo
   para que se lea como inscripción y no como línea de texto. */
.corredor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.glifos {
  font-family: 'Noto Sans Runic', serif;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.7;
  letter-spacing: .14em;
  color: var(--verdin);
  margin: 0;
  max-width: none;
}

/* Cierre: la marca dibujada, una pregunta y el pie con el botón justo
   debajo. Sin botón propio: el del pie está a un filete de distancia y
   dos iguales seguidos se pisan. */
.portada > .cierre { text-align: center; padding-block-end: 3rem; }
.cierre img { display: block; width: 300px; max-width: 70%; height: auto; margin: 0 auto 2rem; }
.cierre p { margin-inline: auto; color: #c8c1b7; }

@media (max-width: 50rem) {
  .portada > section { padding-block: 3rem; }
  /* Móvil: el retrato primero, a sangre y recortado a 26rem, con el fundido
     hacia abajo para que el titular apoye en él; el texto debajo. */
  .portada > section:first-child { padding-block-start: 0; }
  .heroe { grid-template-columns: 1fr; gap: 1.5rem; }
  .heroe-retrato { order: -1; margin: 0 calc(-1 * 1.25rem); height: 26rem; }
  .heroe-retrato picture, .heroe-retrato img { height: 100%; }
  .heroe-retrato img {
    object-fit: cover; object-position: 50% 20%;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 98%);
            mask-image: linear-gradient(180deg, #000 55%, transparent 98%);
    -webkit-mask-composite: source-over;
            mask-composite: add;
  }
  /* Móvil, como el artboard del lienzo: una fila por escala, con la barra
     en un carril de 6rem a la izquierda, el texto al lado y la pieza como
     miniatura a la derecha. Las barras siguen a escala entre sí, ahora
     contra el carril. El filete va en la fila entera y no en cada celda,
     o se cortaría en cada hueco y en la fila sin pieza. */
  .escala-cabecera { grid-template-columns: 1fr; gap: 1rem; margin-block-end: 2rem; }
  .escala-cabecera h2, .escala-cabecera > p { grid-column: 1; }
  .escala-zonas { display: block; border-top: 1px solid var(--filete); }
  .escala-zonas li {
    display: grid; grid-template-columns: 6rem 1fr 4.5rem; column-gap: 1.25rem;
    align-items: center; padding-block: .75rem; border-bottom: 1px solid var(--filete);
  }
  .escala-zonas .carril { grid-column: 1; grid-row: 1 / 3; height: auto; padding: 0; margin: 0; border: 0; }
  .escala-zonas .barra { max-height: 2rem; min-width: .9rem; }
  .escala-zonas .medida { grid-column: 2; font-size: 1.35rem; margin: 0; padding: 0; align-self: end; }
  .escala-zonas strong { grid-column: 2; padding: 0; align-self: start; }
  .escala-pieza { grid-column: 3; grid-row: 1 / 3; margin: 0; }
  .destacada { grid-template-columns: 1fr; gap: 1.5rem; }
  .destacada-entera, .destacada-texto { grid-column: 1; }
  .destacada-entera { margin-inline: calc(-1 * 1.25rem); }
  /* Seis piezas a dos columnas: la primera y la última a ancho completo,
     para que no quede una sola media columna colgando al final. */
  .reciente-piezas { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 18rem; gap: .75rem; }
  .reciente-piezas li, .reciente-piezas li:nth-child(2) { grid-column: span 1; }
  .reciente-piezas li:first-child, .reciente-piezas li:last-child { grid-column: span 2; }
  .corredor { grid-template-columns: 1fr; gap: 1.5rem; }
  .glifos { font-size: 1.5rem; }
}

/* Los <h2> que enlazan pisan la regla global `a { color: brasa }` — brasa es
   solo para la acción, nada más lo usa (ver comentario de la paleta arriba).
   Sin subrayado porque ya se distingue por ser titular. */
main section + section { margin-block-start: 3rem; }
main h2 a { color: inherit; text-decoration: none; }
main h2 a:hover { color: var(--brasa); }

.por-estilos { margin-block-end: 2.5rem; }

/* El navegador pinta el alt como texto de respaldo mientras la foto carga, y
   en una retícula grande eso parpadea. Sin JavaScript —este sitio no lo usa
   salvo en la forja— la solución es CSS puro, en dos partes:
     - el texto de respaldo se queda transparente: sigue en el árbol de
       accesibilidad para quien usa lector de pantalla, solo no se ve.
     - una aparición suave, que de paso disimula el chasquido de cuando la
       imagen sí termina de cargar. Respeta prefers-reduced-motion. */
main picture img { color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  main picture img { animation: aparecer .5s ease both; }
}
@keyframes aparecer {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   Página de pieza. Todas las fotos de la pieza, una debajo de otra y tan
   grandes como quepan sin salirse de la pantalla: son verticales casi
   siempre, y a ancho completo una manga obligaría a hacer scroll para verla
   entera. El zoom es un enlace al derivado de 1600 px, sin JavaScript.
   --------------------------------------------------------------------------- */
.retícula .pieza-enlace, .destacada .pieza-enlace, .escala-pieza .pieza-enlace { display: block; }
.miga { color: var(--ceniza); font-size: .875rem; }
.miga a { color: inherit; }
.miga a:hover { color: var(--brasa); }
.miga span { margin-inline: .5rem; }
.pieza-fotos { list-style: none; padding: 0; display: grid; gap: 2rem; justify-items: center; }
.pieza-fotos img { display: block; width: auto; height: auto; max-width: 100%; max-height: 90svh; }
.pieza-fotos .zoom { display: block; cursor: zoom-in; }
.pieza-nota, .pieza > p:last-child { text-align: center; margin-inline: auto; }
.pieza-nota { color: var(--ceniza); font-size: .875rem; }

/* ---------------------------------------------------------------------------
   Cover-ups. Cada uno es un par antes/después, lado a lado desde tableta y
   uno encima del otro en móvil, con el antes primero: el orden de lectura es
   el de la historia. Las dos fotos a la misma altura, para que se comparen
   la misma zona del cuerpo a la misma escala.
   --------------------------------------------------------------------------- */
/* minmax(0, 1fr) y no 1fr: el mínimo de 1fr es el ancho intrínseco de la
   foto —1440 px— y la columna desbordaba la pantalla. */
.cover-up { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 40rem) { .cover-up { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cover-up figure { margin: 0; }
.cover-up img { display: block; width: 100%; height: auto; max-height: 85svh; object-fit: contain; }
.cover-up figcaption { color: var(--ceniza); font-size: .875rem; text-align: center; margin-block-start: .5rem; }
.cover-up .pieza-enlace { display: block; }
.cover-up-pide { text-align: center; max-width: var(--medida); margin-inline: auto; }

/* ---------------------------------------------------------------------------
   Índice de estilos. Una banda por estilo: su mejor pieza grande, el arranque
   de su párrafo y una tira con cuatro más. Alterna lados para que las cuatro
   no se lean como una lista.
   --------------------------------------------------------------------------- */
.estilos-intro { color: #cfc8be; margin-block-end: 3rem; }
.estilo-banda {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 2.5rem;
  align-items: center;
  padding-block: 3rem;
  border-top: 1px solid var(--filete);
}
main .estilo-banda + .estilo-banda { margin-block-start: 0; }
.estilo-banda:nth-of-type(even) .estilo-portada { order: 1; }
.estilo-portada { display: block; overflow: hidden; }
.estilo-portada img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.estilo-texto h2 { font-size: clamp(2.6rem, 6vw, 4.5rem); }
.estilo-texto > p:first-of-type { color: #cfc8be; }
.estilo-tira { list-style: none; padding: 0; margin-block: 2rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.estilo-tira img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 50rem) {
  .estilo-banda { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-block: 2.5rem; }
  .estilo-banda:nth-of-type(even) .estilo-portada { order: 0; }
}

/* Toda foto que enlaza se acerca un 3 % al pasar por encima, dentro de su
   marco. Es la única pista de que se puede pulsar, sin flechas ni rótulos.
   Fuera la foto grande de la página de pieza (.zoom): ahí se está mirando
   el detalle, y acercarla recortaría los bordes. */
.pieza-enlace, .estilo-portada { display: block; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .pieza-enlace img, .estilo-portada img { transition: transform .6s ease; }
  .pieza-enlace:hover img, .estilo-portada:hover img { transform: scale(1.03); }
}

/* ---------------------------------------------------------------------------
   Páginas de texto: Cuidados y Reservar. Prosa con apartados y listas, a la
   medida del cuerpo como las fichas de runa.
   --------------------------------------------------------------------------- */

.texto h2 { margin-block-start: 2.5rem; }
.texto ul { max-width: var(--medida); padding-inline-start: 1.2em; }
.texto li + li { margin-block-start: .5em; }
.texto li::marker { color: var(--ceniza); }
.texto h2 + ul { margin-block-start: 0; }