/* ============================================================================
claudionavarro.net · Capa 0 — documento definitorio v1.0
----------------------------------------------------------------------------
Capa 0 fija: tipografía, radio, sombra, spacing, 90% de la paleta.
Capa 1 por sello: SOLO tres variables (acento, textura, glifo).
Todo lo demás queda intocable. Si un sello necesita reescribir un componente,
el sello está mal definido, no el componente.
El acento tiene tres puntos de contacto y ni uno más por página:
glifo de nota · borde de ficha técnica · badge de género.
Cero px, incluidas las media queries. 1px = 0.0625rem · 2px = 0.125rem.
El radio pill del spec (999px) se escribe 62.4375rem para no romper esa regla.
============================================================================ */
:root{
/* --- Paleta Capa 0 --- */
--color-fondo:#EDE8DC;
--color-superficie:#F6F3EA;
--color-texto:#211D18;
/* #6A6150: 5,0:1 sobre el papel liso y 4,55:1 sobre la franja teñida más oscura
(el verde de Alicanto al 10,5%). El valor anterior, #7A6F5C, daba 4,04 y 4,23:
por debajo del mínimo AA de 4,5 para texto normal. Medido en el navegador. */
--color-texto-secundario:#645A48;
--color-linea:#C9C1AE;
--color-censura:#0A0908;
/* El autor firma con este naranja en la portada. Es el mismo valor que el acento
de Verne: el color con el que se construyo la identidad. Vive aqui, con nombre
propio, para que la firma del autor y el acento de un sello puedan separarse
algun dia cambiando una sola linea. */
--tinta-autor:#B8622A;
/* --- Tipografía --- */
--fuente-display:'Spectral', Georgia, serif;
--fuente-cuerpo:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
--fuente-mono:'IBM Plex Mono', ui-monospace, monospace;
--fs-2xl:clamp(2.5rem, 6.6vw, 4.5rem);
--fs-xl:3rem;
--fs-lg:2rem;
--fs-md:1.5rem;
--fs-base:1rem;
--fs-sm:0.875rem;
--fs-xs:0.75rem;
--lh-display:1.1;
--lh-cuerpo:1.65;
/* --- Espaciado --- */
--space-1:0.25rem;
--space-2:0.5rem;
--space-3:1rem;
--space-4:1.5rem;
--space-5:2rem;
--space-6:4rem;
--space-7:6rem;
--space-8:8rem;
/* --- Forma --- */
--radio:0;
--radio-pill:62.4375rem; /* 999px, la única dualidad permitida */
--linea:0.0625rem;
--linea-fuerte:0.125rem;
--sombra:0.15rem 0.15rem 0 rgba(0,0,0,.08), 0.3rem 0.3rem 0 rgba(0,0,0,.04);
/* --- Movimiento ---
Tres duraciones y dos curvas para todo el sitio. Nada por encima de 300 ms:
el movimiento tiene que informar, no hacerse notar. La curva del papel es la
misma que ya enderezaba los tampones. Todo esto se apaga de una vez en el
bloque prefers-reduced-motion del final de la hoja. */
--motion-rapido:150ms; /* lo que responde al ratón o al dedo */
--motion-medio:220ms; /* lo que se mueve de un sitio a otro */
--motion-lento:280ms; /* lo que entra en pantalla */
--curva-papel:cubic-bezier(.2,.8,.3,1);
--curva-tinta:ease-out;
/* Factor de osadía. Multiplica giros y desniveles de toda la portada.
0 = todo recto y alineado · 1 = compuesto · 1.6 = collage descarado. */
--osadia:1;
/* El trazo de las reglas, guardado como máscara para poder teñirlo: negro en
las cejas, la tinta del sello en los estantes. Una sola forma, dos tintas. */
/* Encuadre del vídeo de fondo. En pantallas estrechas el recorte es
horizontal y el centro se come al sujeto: anclado a la derecha, el lado
derecho del vídeo siempre queda visible, mida lo que mida la ventana.
Si algún día un vídeo trae el sujeto a la izquierda, cambia esta línea. */
--encuadre-video:75% center;
--regla-trazo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='4' preserveAspectRatio='none'%3E%3Cpath d='M0 2.2C20 1 40 3.4 60 2.2S100 1 120 2.2' stroke='%23000' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
--contenedor:min(88rem, 92vw);
--corte:2.5rem; /* tamaño de la esquina cortada */
/* --- Capa 1: valores neutros por defecto --- */
--sello-acento:var(--color-texto);
--sello-tinta:var(--color-texto-secundario); /* el acento, oscurecido, para cuando pinta TEXTO sobre papel */
--sello-textura:none;
--sello-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16'/%3E%3C/svg%3E");
}
/* ------------------------------------------------------ CAPA 1 · LOS SELLOS */
/* Un sello aporta un color, nunca una paleta. */
.sello-garantia{
--sello-acento:#E0359A;
--sello-textura:repeating-linear-gradient(0deg, rgba(224,53,154,.07) 0 0.0625rem, transparent 0.0625rem 0.3125rem);
--sello-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v5M15 3v5M6 8h12v3a6 6 0 01-12 0zM12 17v4'/%3E%3C/svg%3E");
}
.sello-salitre{
--sello-acento:#B8622A;
--sello-tinta:#653C20;
--sello-textura:repeating-linear-gradient(45deg, rgba(184,98,42,.09) 0 0.0625rem, transparent 0.0625rem 0.4375rem);
--sello-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.2 6.8L21 12l-6.8 2.2L12 21l-2.2-6.8L3 12l6.8-2.2z'/%3E%3C/svg%3E");
}
.sello-teo{
--sello-acento:#3D6E7A;
--sello-tinta:#2E4249;
--sello-textura:repeating-linear-gradient(-45deg, rgba(61,110,122,.08) 0 0.0625rem, transparent 0.0625rem 0.5625rem);
--sello-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.8-6 10-6 10 6 10 6-3.8 6-10 6-10-6-10-6z'/%3E%3Cpath d='M12 9.2a2.8 2.8 0 100 5.6 2.8 2.8 0 000-5.6z'/%3E%3C/svg%3E");
}
.sello-candidato{
--sello-acento:#B8341F;
--sello-tinta:#65281C;
--sello-textura:repeating-linear-gradient(0deg, rgba(184,52,31,.07) 0 0.0625rem, transparent 0.0625rem 1.5rem);
--sello-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13h16v7H4zM8 13V9h8v4M9 5h6'/%3E%3C/svg%3E");
}
.sello-chronos{
--sello-acento:#5C6B5A;
--sello-tinta:#3C4036;
--sello-textura:repeating-linear-gradient(90deg, rgba(92,107,90,.07) 0 0.0625rem, transparent 0.0625rem 1rem);
--sello-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2a8.8 8.8 0 100 17.6 8.8 8.8 0 000-17.6z'/%3E%3Cpath d='M12 7v5.2l3.6 2.1'/%3E%3C/svg%3E");
}
.sello-guerreros{
--sello-acento:#1668D6;
--sello-tinta:#1C3F6E;
/* Trama cruzada: la tela del trapo */
--sello-textura:
repeating-linear-gradient(45deg, rgba(22,104,214,.07) 0 0.0625rem, transparent 0.0625rem 0.375rem),
repeating-linear-gradient(-45deg, rgba(22,104,214,.07) 0 0.0625rem, transparent 0.0625rem 0.375rem);
--sello-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 9.5h13v8.5h-13zM12 9.5V5M9.5 13.5v2M14.5 13.5v2'/%3E%3C/svg%3E");
}
/* ---------------------------------------------------------------- BASE */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; border-radius:var(--radio); }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* ------------------------------------------------ BARRA AUTO-OCULTABLE
La barra se pega arriba y se retira al bajar, para devolver la pantalla a la
lectura; vuelve al subir o al llegar con el teclado. --alto-barra lo mide el JS
(pieza_chrome_js) y alimenta el scroll-padding: sin él, el enlace «Saltar al
contenido» y todas las anclas caerían debajo de la barra. */
:root{ --alto-barra: 4rem; }
/* OJO: el desplazamiento se declara UNA sola vez. scroll-padding-top ya aparta
el destino; si además se pone scroll-margin-top en :target, los dos se suman y
el ancla aterriza a doble altura por encima. */
html{ scroll-padding-top: calc(var(--alto-barra) + var(--space-2)); }
body.chrome-scroll .barra{ box-shadow:0 0.35rem 0.9rem rgba(0,0,0,.07); }
body.chrome-oculto .barra{ transform:translateY(-100%); }
/* El índice de un curso ya no es una barra pegada arriba sino un rail vertical en
el espacio libre de la derecha (ver assets/css/indice.css). Por eso aquí no queda nada
suyo: la posición, el tope y la retirada los resuelve su propia columna. */
body{
background:var(--color-fondo);
color:var(--color-texto);
font-family:var(--fuente-cuerpo);
font-size:var(--fs-base);
line-height:var(--lh-cuerpo);
overflow-x:hidden;
font-kerning:normal;
}
/* La textura del sello: una sola variable, opacidad de papel */
body::before{
content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
background-image:var(--sello-textura);
}
body::after{
content:''; position:fixed; inset:0; pointer-events:none; z-index:9990;
opacity:.035; mix-blend-mode:multiply;
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='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.6'/%3E%3C/svg%3E");
}
main,header,footer,nav{ position:relative; z-index:1; }
img,svg,video{ display:block; max-width:100%; height:auto; }
ul,ol{ list-style:none; }
a{ color:var(--color-texto); text-decoration:none; }
a:focus-visible, button:focus-visible{ outline:var(--linea-fuerte) solid var(--sello-acento); outline-offset:0.2rem; }
::selection{ background:var(--sello-acento); color:var(--color-superficie); }
.solo-lectores{
position:absolute; width:var(--linea); height:var(--linea);
overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.skip{
position:absolute; left:var(--space-3); top:-5rem; z-index:9000;
background:var(--color-texto); color:var(--color-superficie);
padding:var(--space-3) var(--space-4); font-size:var(--fs-sm);
}
.skip:focus{ top:var(--space-3); }
/* El respaldo no es decorativo: si la variable faltara, el contenido se iría a
sangre y el texto quedaría pegado al borde sin que nada avise. */
.contenedor{ width:var(--contenedor, min(88rem, 92vw)); margin-inline:auto; }
/* ------------------------------------------------------------ TIPOGRAFÍA */
.t-hero{ font-family:var(--fuente-display); font-weight:800; font-size:var(--fs-2xl); line-height:var(--lh-display); letter-spacing:-0.02em; }
.t-seccion{ font-family:var(--fuente-display); font-weight:700; font-size:var(--fs-xl); line-height:1.12; letter-spacing:-0.012em; }
.t-obra{ font-family:var(--fuente-display); font-weight:700; font-size:var(--fs-lg); line-height:1.12; }
.t-bloque{ font-family:var(--fuente-cuerpo); font-weight:600; font-size:var(--fs-md); line-height:1.25; }
.t-meta{ font-family:var(--fuente-mono); font-weight:500; font-size:var(--fs-sm); line-height:1.55; color:var(--color-texto-secundario); }
.t-label{
font-family:var(--fuente-mono); font-weight:700; font-size:var(--fs-xs);
text-transform:uppercase; letter-spacing:0.06em; line-height:1.3;
color:var(--color-texto-secundario);
}
.cuerpo{ max-width:66ch; }
.cuerpo--lectura{ font-family:var(--fuente-display); font-size:1.0625rem; line-height:1.7; hyphens:auto; max-width:62ch; }
.cuerpo--lectura p + p{ margin-top:var(--space-3); }
.pie-nota{ font-family:var(--fuente-mono); font-size:var(--fs-xs); color:var(--color-texto-secundario); }
/* --------------------------------------------------------------------- CITA
La cita de una página: una regla trazada a mano en la tinta del sello. Estaba
copiada entera en las hojas de yWriter y de Mapa vs Brújula, así que vive aquí.
Los registros de las fichas dibujan su propia raya: la anulan en su hoja. */
.cita{ position:relative; padding-left:var(--space-5); margin-block:var(--space-5); max-width:50ch; }
.cita::before{
content:''; position:absolute; left:0; top:0.2rem; bottom:0.2rem; width:0.4rem;
background-color:var(--sello-acento);
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='120' preserveAspectRatio='none'%3E%3Cpath d='M2.1 0C1.1 20 3.2 40 2.2 60S1.2 100 2.1 120' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='120' preserveAspectRatio='none'%3E%3Cpath d='M2.1 0C1.1 20 3.2 40 2.2 60S1.2 100 2.1 120' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
-webkit-mask-repeat:repeat-y; mask-repeat:repeat-y;
-webkit-mask-size:0.4rem 7.5rem; mask-size:0.4rem 7.5rem;
}
.cita p{ font-family:var(--fuente-display); font-style:italic; font-size:1.35rem; line-height:1.5; }
.cita__firma{ display:block; margin-top:var(--space-3); }
/* ------------------------------------------------- LAS OTRAS LÍNEAS
Un mapa de sellos, no un sumario: cada línea con su glifo grande y algo girado,
como un tampón, su nombre y su decir. La regla de arriba es el trazo de mano del
sistema, en la tinta del sello que toca. */
.lineas{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-6) var(--space-5); }
@media (min-width:40em){ .lineas{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width:64em){ .lineas{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.lineas__item{ min-width:0; }
.lineas__item a{
position:relative; display:grid; gap:var(--space-2); justify-items:start;
padding-top:var(--space-4); text-decoration:none;
transition:transform var(--motion-medio) var(--curva-papel);
}
.lineas__item a::before{
content:''; position:absolute; left:0; right:0; top:0; height:0.25rem;
background-color:var(--sello-acento);
-webkit-mask-image:var(--regla-trazo); mask-image:var(--regla-trazo);
-webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
-webkit-mask-size:7.5rem 0.25rem; mask-size:7.5rem 0.25rem;
}
/* Nada de cuatro columnas idénticas: el segundo y el cuarto bajan un poco. */
.lineas__item:nth-child(even) a{ padding-top:var(--space-6); }
/* El selector lleva el padre a propósito: .glifo fija su tamaño en 1.15em y esta
regla vive antes en la hoja, así que necesita ganarle por especificidad. */
.lineas__item .lineas__glifo{
width:3.25rem; height:3.25rem;
background-color:var(--sello-acento);
transform:rotate(calc(var(--giro, 0deg) * var(--osadia)));
}
.lineas__item:nth-child(odd) .lineas__glifo{ --giro:-3.5deg; }
.lineas__item:nth-child(even) .lineas__glifo{ --giro:2.5deg; }
.lineas__nombre{ font-family:var(--fuente-display); font-weight:700; font-size:1.2rem; line-height:1.1; }
.lineas__dicho{
font-family:var(--fuente-mono); font-size:var(--fs-xs); line-height:1.5;
color:var(--color-texto-secundario); max-width:24ch;
}
/* Al pasar el ratón el tampón se endereza y sube, como las tapas del catálogo. */
.lineas__item a:hover{ transform:translateY(-0.25rem); }
.lineas__item a:hover .lineas__glifo{ transform:rotate(0deg); }
.lineas__item a:hover .lineas__nombre{ color:var(--sello-acento); }
/* --------------------------------------------------------------- GLIFOS */
.glifo{
display:inline-block; width:1.15em; height:1.15em; flex:none;
background-color:var(--sello-acento);
-webkit-mask-image:var(--sello-glifo); mask-image:var(--sello-glifo);
-webkit-mask-size:contain; mask-size:contain;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:center; mask-position:center;
}
.glifo--grande{ width:2.5rem; height:2.5rem; }
/* Iconos de bloque: set lineal propio, nunca emoji del sistema */
.ico{
display:inline-block; width:1.25em; height:1.25em; flex:none;
background-color:var(--sello-acento);
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-size:contain; mask-size:contain;
-webkit-mask-position:center; mask-position:center;
}
.ico-mapa{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17.8l5-9 4 5.6 3.4-4.4L21 17.8z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17.8l5-9 4 5.6 3.4-4.4L21 17.8z'/%3E%3C/svg%3E"); }
.ico-gente{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11.2a3.1 3.1 0 100-6.2 3.1 3.1 0 000 6.2zM3.4 19.4c0-3.1 2.5-5 5.6-5s5.6 1.9 5.6 5M16.6 11.4a2.6 2.6 0 100-5.2 2.6 2.6 0 000 5.2M17 14.6c2.2.3 3.6 1.7 3.6 3.8'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11.2a3.1 3.1 0 100-6.2 3.1 3.1 0 000 6.2zM3.4 19.4c0-3.1 2.5-5 5.6-5s5.6 1.9 5.6 5M16.6 11.4a2.6 2.6 0 100-5.2 2.6 2.6 0 000 5.2M17 14.6c2.2.3 3.6 1.7 3.6 3.8'/%3E%3C/svg%3E"); }
.ico-serie{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5h16M4 12h16M4 16.5h10'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5h16M4 12h16M4 16.5h10'/%3E%3C/svg%3E"); }
.ico-nota{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 19.5l.9-3.6 10.2-10.2 2.7 2.7L8.1 18.6zM14.4 6.9l2.7 2.7'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 19.5l.9-3.6 10.2-10.2 2.7 2.7L8.1 18.6zM14.4 6.9l2.7 2.7'/%3E%3C/svg%3E"); }
.ico-sonido{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17.5V6.2l10-2v11.3M9 17.5a2.6 2.6 0 11-5.2 0 2.6 2.6 0 015.2 0zM19 15.5a2.6 2.6 0 11-5.2 0 2.6 2.6 0 015.2 0z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17.5V6.2l10-2v11.3M9 17.5a2.6 2.6 0 11-5.2 0 2.6 2.6 0 015.2 0zM19 15.5a2.6 2.6 0 11-5.2 0 2.6 2.6 0 015.2 0z'/%3E%3C/svg%3E"); }
/* --------------------------------------------------------------- BOTONES */
.btn{
display:inline-block; font-family:var(--fuente-cuerpo);
font-size:var(--fs-sm); font-weight:600; letter-spacing:0.03em; line-height:1;
padding:var(--space-3) var(--space-4);
border:var(--linea) solid var(--color-texto);
background:var(--color-texto); color:var(--color-superficie);
cursor:pointer;
}
.btn:hover{ background:transparent; color:var(--color-texto); }
.btn--linea{ background:transparent; color:var(--color-texto); }
.btn--linea:hover{ background:var(--color-texto); color:var(--color-superficie); }
.enlace{
font-family:var(--fuente-cuerpo); font-size:var(--fs-sm); font-weight:500;
border-bottom:var(--linea) solid var(--sello-acento); padding-bottom:0.1rem;
}
.enlace:hover{ color:var(--sello-acento); }
.fila{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }
/* ------------------------------------------------ ÍNDICE DE CATÁLOGO */
/* Cada fila lleva el punto de tinta de su universo: el índice entero se lee
como un mapa de sellos. Guía de puntos entre título y género, como un sumario. */
.simple{ display:grid; gap:0; }
@media (min-width:48em){ .simple{ grid-template-columns:1fr 1fr; column-gap:var(--space-6); } }
@media (min-width:80em){ .simple{ grid-template-columns:1fr 1fr 1fr; } }
.simple li{
display:flex; align-items:baseline; gap:var(--space-3);
padding-block:var(--space-3);
border-bottom:var(--linea) solid var(--color-linea);
}
.simple li::before{
content:''; flex:none; width:0.4rem; height:0.4rem;
background:var(--sello-acento);
transform:translateY(-0.12em) rotate(45deg);
}
.simple a{ flex:1; display:flex; align-items:baseline; gap:var(--space-2); min-width:0; }
.simple a::after{
content:''; flex:1; min-width:0.75rem;
border-bottom:var(--linea) dotted var(--color-linea);
transform:translateY(-0.32em);
}
.simple .t{ font-family:var(--fuente-display); font-size:1.0625rem; }
.simple .g{
flex:none; font-family:var(--fuente-mono); font-size:var(--fs-xs);
color:var(--color-texto-secundario); white-space:nowrap;
}
.simple a:hover .t{ color:var(--sello-acento); }
.simple .fuera .t{ color:var(--color-texto-secundario); }
/* La marca de la herramienta es un reloj: a 4.5rem las agujas no se ven y la
marca se lee como una mancha azul. Necesita tamaño de sello, no de viñeta. */
.logo-marca{ width:clamp(4.5rem, 22%, 6.5rem); height:auto; flex:none; }
/* La herramienta no va en dos columnas enfrentadas: es una nota pegada. Y una
nota pegada no mide 1.180 px de ancho con 340 px de texto dentro: se corta
antes de quedarse con el lado derecho vacío. */
.herramienta{
display:flex; gap:var(--space-5); align-items:flex-start;
max-width:48rem;
background:var(--color-superficie);
/* Al girar un bloque su esquina se sale de la caja: hay que reservar aire o
se monta sobre lo de abajo. Ese choque no era intencional. */
margin-bottom:var(--space-7);
border:var(--linea) solid var(--color-linea);
box-shadow:0.4rem 0.55rem 0 rgba(0,0,0,.13);
padding:var(--space-4);
transform:rotate(calc(-0.7deg * var(--osadia)));
}
@media (max-width:39.99em){ .herramienta{ flex-direction:column; transform:none; } }
/* ------------------------------------------------ HOJA DE RUTA */
/* Vista derivada del catálogo: las obras con fecha, en orden. Se cuelga de una
línea trazada a mano, cada hito con su tallo, su giro y su ancho. */
.ruta-h{
position:relative; padding-bottom:var(--space-4);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='4' preserveAspectRatio='none'%3E%3Cpath d='M0 2.4C40 1.2 70 3.6 100 2.3s60-1.4 100-.1' stroke='%23C9C1AE' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:repeat-x; background-position:0 100%; background-size:12.5rem 0.25rem;
}
.ruta-h__hitos{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); }
.ruta-h__hitos > li{
flex:0 1 var(--ancho, 11rem); min-width:0;
display:flex; flex-direction:column; align-items:flex-start;
transform:rotate(calc(var(--giro, 0deg) * var(--osadia)));
}
.hito__ficha{
width:100%; background:var(--color-superficie);
border:var(--linea) solid var(--color-linea);
box-shadow:0.25rem 0.35rem 0 rgba(0,0,0,.12);
padding:var(--space-3);
}
.hito__tallo{
position:relative; width:var(--linea-fuerte);
height:calc(var(--tallo, 2.5rem) * var(--osadia));
background:var(--color-linea);
}
.hito__tallo::after{
content:''; position:absolute; left:50%; bottom:0;
width:0.5rem; height:0.5rem; background:var(--sello-acento);
transform:translate(-50%, 45%) rotate(45deg);
}
.ruta-h .mes{ display:block; font-family:var(--fuente-mono); font-size:var(--fs-xs); font-weight:700;
text-transform:uppercase; letter-spacing:0.09em; color:var(--sello-tinta); }
.ruta-h .tit{ display:block; font-family:var(--fuente-display); font-size:1.0625rem; line-height:1.25; margin-top:var(--space-1); }
.ruta-h .quien{ display:block; font-family:var(--fuente-mono); font-size:var(--fs-xs);
color:var(--color-texto-secundario); margin-top:0.25rem; }
.ruta-h .estado{ display:block; font-family:var(--fuente-mono); font-size:var(--fs-xs); margin-top:var(--space-2); }
.ruta-h .estado--ok{ color:var(--sello-tinta); font-weight:700; }
@media (max-width:63.99em){
.ruta-h{ background-image:none; padding-bottom:0; }
.ruta-h__hitos{ flex-direction:column; align-items:stretch; gap:var(--space-3); }
.ruta-h__hitos > li{ flex:0 0 auto; transform:rotate(calc(var(--giro, 0deg) * var(--osadia) * 0.5)); }
.hito__tallo{ display:none; }
}
/* --------------------------------------------------------- TALLERES */
/* Nada de dos columnas idénticas: uno más ancho y más alto que el otro. */
/* Dos columnas desiguales que ocupan el ancho, no dos tarjetas apelmazadas
contra el borde izquierdo dejando media pantalla vacía. */
.talleres{ display:grid; grid-template-columns:1.35fr 1fr; gap:var(--space-6) var(--space-5); align-items:start; }
@media (max-width:47.99em){ .talleres{ grid-template-columns:1fr; gap:var(--space-5); } }
.taller{
position:relative; background:var(--color-superficie);
border:var(--linea) solid var(--color-linea);
box-shadow:0.35rem 0.5rem 0 rgba(0,0,0,.13);
padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-3);
min-width:0;
transform:rotate(calc(var(--giro, 0deg) * var(--osadia)))
translateY(calc(var(--y, 0rem) * var(--osadia)));
transition:transform var(--motion-medio) var(--curva-papel);
}
.taller:hover{ transform:rotate(0deg) translateY(-0.4rem); }
.taller__n{
font-family:var(--fuente-mono); font-size:var(--fs-xs); font-weight:700;
color:var(--sello-tinta); letter-spacing:0.08em;
}
.taller h3{ font-family:var(--fuente-display); font-size:1.3rem; font-weight:700; line-height:1.15; }
.taller p{ font-size:var(--fs-sm); line-height:1.6; }
.taller__modulos{ border-top:var(--linea) dotted var(--color-linea); padding-top:var(--space-3); }
.taller__modulos h4{
font-family:var(--fuente-mono); font-size:var(--fs-xs); font-weight:700;
text-transform:uppercase; letter-spacing:0.06em; color:var(--color-texto-secundario);
margin-bottom:var(--space-2);
}
.taller__modulos li{
font-size:var(--fs-sm); padding-left:var(--space-3); position:relative; margin-bottom:var(--space-1);
}
.taller__modulos li::before{ content:'·'; position:absolute; left:0; color:var(--sello-acento); font-weight:700; }
.taller .btn{ align-self:flex-start; margin-top:auto; }
/* ------------------------------------------------ MURO MASON */
/* Masonería de verdad: columnas CSS, alturas distintas por obra y fondo
escalonado. La asimetría no es un accidente, es el punto: una grilla de
filas perfectamente alineadas se lee como generada. */
.muro{ columns:1; column-gap:var(--space-3); }
@media (min-width:40em){ .muro{ columns:2; } }
@media (min-width:80em){ .muro{ columns:3; } }
.tesela{
display:block; position:relative; overflow:hidden;
break-inside:avoid; margin-bottom:var(--space-3);
height:var(--alto, 20rem);
background:var(--color-texto); color:var(--color-superficie);
isolation:isolate;
/* Nada en esta página está a plomo: la tesela va girada como las tapas y las
láminas. Es poco a propósito —aquí las piezas casi se tocan, y un giro grande
abriría cuñas de papel entre ellas— pero basta para que la columna no se lea
como una rejilla generada. */
transform:rotate(calc(var(--giro, 0deg) * var(--osadia)));
}
.muro .tesela:nth-child(odd){ --giro:-0.8deg; }
.muro .tesela:nth-child(even){ --giro:0.7deg; }
.tesela img, .tesela video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tesela__velo{
position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(to top, rgba(10,9,8,.9) 0%, rgba(10,9,8,.36) 52%, rgba(10,9,8,.06) 100%);
}
.tesela::before{
content:''; position:absolute; left:0; top:0; bottom:0; width:0.375rem; z-index:2;
background:var(--sello-acento); transition:width var(--motion-rapido) var(--curva-tinta);
}
.tesela:hover::before{ width:0.75rem; }
.tesela__in{
position:relative; z-index:2; height:100%;
display:flex; flex-direction:column; justify-content:flex-end;
gap:var(--space-2); padding:var(--space-4) var(--space-4) var(--space-4) var(--space-5);
}
.tesela h3{
font-family:var(--fuente-display); font-weight:800; text-transform:uppercase;
line-height:0.86; letter-spacing:-0.03em;
font-size:clamp(1.6rem, 3.2vw, 2.5rem);
}
.tesela--alta h3{ font-size:clamp(2.1rem, 5.6vw, 4.2rem); }
.tesela p{ font-family:var(--fuente-display); font-style:italic; font-size:1rem; line-height:1.35; color:rgba(246,243,234,.86); }
.tesela .t-meta{ color:rgba(246,243,234,.62); }
.tesela .pill{ border-color:var(--color-superficie); color:var(--color-superficie); align-self:flex-start; }
.tesela__in > *{ align-self:flex-start; }
/* (la sala de proyección quedó descartada: era simétrica) */
/* Un escenario con la obra elegida y, debajo, la tira de fotogramas.
No es una lista de obras: es un proyector con un selector. */
.sala__panel{ display:none; position:relative; overflow:hidden; background:var(--color-texto); }
.sala__panel.esta-activo{ display:block; }
.sala__panel video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sala__panel::before{
content:''; position:absolute; left:0; top:0; bottom:0; width:0.375rem; z-index:3;
background:var(--sello-acento);
}
.sala__velo{
position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(to top, rgba(10,9,8,.9) 0%, rgba(10,9,8,.42) 52%, rgba(10,9,8,.08) 100%);
}
.sala__texto{
position:relative; z-index:2; display:flex; flex-direction:column; justify-content:flex-end;
gap:var(--space-3); min-height:26rem; padding:var(--space-5) var(--space-5) var(--space-5) var(--space-6);
color:var(--color-superficie);
}
@media (min-width:64em){ .sala__texto{ min-height:34rem; padding:var(--space-6); } }
.sala__texto h3{
font-family:var(--fuente-display); font-weight:800; text-transform:uppercase;
font-size:clamp(2rem, 6.4vw, 4.6rem); line-height:0.86; letter-spacing:-0.035em;
}
.sala__texto p{ font-family:var(--fuente-display); font-style:italic; font-size:1.15rem; line-height:1.4; max-width:46ch; }
.sala__texto .pill{ border-color:var(--color-superficie); color:var(--color-superficie); align-self:flex-start; }
.sala__texto .t-meta{ color:rgba(246,243,234,.68); }
.sala__texto .btn{ background:var(--color-superficie); border-color:var(--color-superficie); color:var(--color-texto); align-self:flex-start; }
.sala__texto .btn:hover{ background:transparent; color:var(--color-superficie); }
.sala__texto > *{ align-self:flex-start; }
.sala__tira{
display:flex; gap:var(--space-1); margin-top:var(--space-2);
overflow-x:auto; padding-bottom:var(--space-2);
}
.sala__tira::-webkit-scrollbar{ height:0.25rem; }
.sala__tira::-webkit-scrollbar-thumb{ background:var(--color-linea); }
.sala__tab{
flex:none; display:flex; align-items:center; gap:var(--space-2);
background:transparent; border:0; border-bottom:var(--linea-fuerte) solid transparent;
padding:var(--space-2); cursor:pointer;
font-family:var(--fuente-mono); font-size:var(--fs-xs); text-transform:uppercase;
letter-spacing:0.06em; color:var(--color-texto-secundario); white-space:nowrap;
}
.sala__tab::before{
content:''; width:0.35rem; height:0.35rem; flex:none;
background:var(--sello-acento); transform:rotate(45deg);
}
.sala__tab:hover{ color:var(--color-texto); }
.sala__tab[aria-selected="true"]{ color:var(--color-texto); border-bottom-color:var(--sello-acento); }
.sala__tab .n{ opacity:.55; }
/* ------------------------------------------------ ESTANTE DE PORTADAS */
/* El catálogo con las carátulas delante. Agrupado por universo y con jerarquía:
la serie insignia va más grande. No es una grilla uniforme. */
.estante{ margin-bottom:var(--space-6); }
.estante:last-child{ margin-bottom:0; }
/* El estante comparte la regla trazada a mano, teñida con su sello, y se
apoya sobre un registro de su propia tinta. */
.estante{
padding:var(--space-4) var(--space-4) var(--space-5);
background-color:color-mix(in srgb, var(--sello-acento) var(--tinte-estante), var(--color-fondo));
}
@media (max-width:47.99em){ .estante{ padding-inline:var(--space-3); } }
.estante__cab{ --tinta-regla:var(--sello-acento); margin-bottom:var(--space-4); }
.estante__cab .t-label{ color:var(--sello-tinta); }
.portadas{ display:flex; flex-wrap:wrap; gap:var(--space-5) var(--space-4); align-items:flex-start; }
/* Cada tapa se apoya torcida, con su propio tamaño y su propio desnivel:
un estante de libros de verdad, no una fila de cajas. */
.portadas > li{
flex:0 0 var(--ancho, 9.5rem); min-width:0;
transform:rotate(calc(var(--giro, 0deg) * var(--osadia)))
translateY(calc(var(--sube, 0rem) * var(--osadia)));
transition:transform var(--motion-medio) var(--curva-papel);
}
.portadas > li:hover{
transform:rotate(0deg) translateY(-0.6rem) scale(1.03);
z-index:6;
}
.estante--principal .portadas > li{ --ancho-base:12.5rem; flex-basis:calc(var(--ancho, 12.5rem) * 1.2); }
/* Carril de altura fija con la carátula apoyada abajo: las tapas tienen
proporciones distintas y así los pies de foto alinean sin recortar ninguna. */
.portadas a, .portadas .sin-enlace{
display:grid; grid-template-rows:calc(var(--ancho, 9.5rem) * 1.5) auto auto;
gap:var(--space-2); align-content:start;
}
.estante--principal .portadas a,
.estante--principal .portadas .sin-enlace{
grid-template-rows:calc(var(--ancho, 12.5rem) * 1.5 * 1.2) auto auto;
}
.portadas img{
width:100%; align-self:end;
border:var(--linea) solid var(--color-linea);
box-shadow:var(--sombra);
transition:transform var(--motion-rapido) var(--curva-tinta), box-shadow var(--motion-rapido) var(--curva-tinta);
}
.portadas a:hover img{ transform:translateY(-0.4rem); box-shadow:0.3rem 0.55rem 0 rgba(0,0,0,.13); }
.portadas .t{ font-family:var(--fuente-display); font-size:1rem; line-height:1.25; }
.portadas a:hover .t{ color:var(--sello-acento); }
/* El rombo de tinta delante del dato: el mismo código que el índice */
.portadas .g{
font-family:var(--fuente-mono); font-size:var(--fs-xs);
color:var(--color-texto-secundario); line-height:1.45;
}
.portadas .g::before{
content:''; display:inline-block; width:0.35rem; height:0.35rem;
background:var(--sello-acento); margin-right:var(--space-2);
transform:rotate(45deg);
}
/* Lo que aún no sale: se muestra, pero apagado */
.portadas .pendiente img{ opacity:.62; filter:grayscale(.35); } /* igual que en el catálogo: se nota "sin salir" sin destruir el arte */
.portadas .pendiente .t{ color:var(--color-texto-secundario); }
/* Hueco reservado: el tomo existe, la carátula todavía no */
.portadas > li.vacio{
display:grid; place-content:center; text-align:center; gap:var(--space-2);
height:14.5rem; padding:var(--space-3);
border:var(--linea) dashed var(--sello-acento);
background:color-mix(in srgb, var(--sello-acento) 7%, transparent);
font-family:var(--fuente-mono); font-size:var(--fs-xs); font-weight:700;
color:var(--sello-tinta); text-transform:uppercase; letter-spacing:0.06em; line-height:1.5;
}
.portadas > li.vacio small{ display:block; font-weight:400; text-transform:none; letter-spacing:0; opacity:.72; }
/* --------------------------------------------------- BADGE PILL (acento 3) */
.pill{
display:inline-block;
border:var(--linea) solid var(--sello-acento);
color:var(--sello-tinta);
border-radius:var(--radio-pill);
padding:var(--space-2) var(--space-3);
font-family:var(--fuente-mono); font-size:var(--fs-xs); font-weight:700;
text-transform:uppercase; letter-spacing:0.06em; line-height:1;
}
.pill--relleno{ background:var(--sello-acento); color:var(--color-superficie); }
/* ------------------------------------------- HERO DE TALLER (Capa 1.5)
La cabecera que comparten las páginas de oficio: un rótulo, el golpe en
cursiva con la tinta del taller, la bajada y, al lado, la ficha de datos.
Estaba escrita solo en la hoja de yWriter; la página del sistema la usa igual. */
.taller-hero{ padding-block:var(--space-6) var(--space-7); }
.taller-hero__in{ display:grid; gap:var(--space-6); align-items:start; }
@media (min-width:64em){
.taller-hero__in{ grid-template-columns:minmax(0,1.42fr) minmax(0,1fr); gap:var(--space-7); }
}
.taller-hero__golpe{
font-family:var(--fuente-display); font-style:italic; font-weight:700;
font-size:clamp(1.9rem,4.6vw,3.1rem); line-height:1; letter-spacing:-0.02em;
color:var(--sello-acento); margin-top:var(--space-2);
transform:rotate(calc(-0.7deg * var(--osadia))); transform-origin:0 100%;
}
.taller-hero__baja{
font-family:var(--fuente-display); font-size:1.0625rem; line-height:1.7;
max-width:44ch; margin-top:var(--space-5);
}
.taller-hero__cta{ margin-top:var(--space-5); }
.taller-hero__lado{ display:flex; flex-direction:column; gap:var(--space-3); }
.taller-hero__lado .ficha{ transform:rotate(calc(0.8deg * var(--osadia))); }
@media (max-width:63.99em){
.taller-hero__golpe{ transform:none; }
.taller-hero__lado .ficha{ transform:none; }
}
/* Los bloques de un método: cada uno con su giro y su desnivel, para que la
rejilla no se lea como una tabla. */
.bloques--osado{ gap:var(--space-6) var(--space-5); }
.bloques--osado .bloque{
transform:rotate(calc(var(--giro,0deg) * var(--osadia)))
translateY(calc(var(--y,0rem) * var(--osadia)));
}
.bloques--osado .bloque h3{ font-family:var(--fuente-display); font-size:1.25rem; font-weight:700; line-height:1.2; }
@media (max-width:63.99em){ .bloques--osado .bloque{ transform:none; } }
/* -------------------------------------------- FICHA TÉCNICA (acento 2) */
.corte{
position:relative;
background:var(--color-superficie);
border:var(--linea) solid var(--color-linea);
box-shadow:var(--sombra);
clip-path:polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, 0 100%);
}
/* La línea del corte se dibuja aparte: el clip-path se la comería a medias */
.corte::before{
content:''; position:absolute; top:0; right:0;
width:3.5355rem; height:var(--linea-fuerte);
background:var(--color-linea);
transform-origin:100% 0;
transform:rotate(-45deg) translateY(0.0625rem);
}
.ficha{
border:var(--linea) solid var(--sello-acento);
background:var(--color-superficie);
box-shadow:var(--sombra);
clip-path:polygon(0 0, calc(100% - var(--corte)) 0, 100% var(--corte), 100% 100%, 0 100%);
padding:var(--space-4);
}
.ficha__fila{
display:grid; grid-template-columns:7rem 1fr; gap:var(--space-3);
padding-block:var(--space-2);
border-bottom:var(--linea) dotted var(--color-linea);
}
.ficha__fila:last-child{ border-bottom:0; }
.ficha__fila dt{ font-family:var(--fuente-mono); font-size:var(--fs-xs); font-weight:700;
text-transform:uppercase; letter-spacing:0.06em; color:var(--color-texto-secundario); padding-top:0.15rem; }
.ficha__fila dd{ font-family:var(--fuente-mono); font-size:var(--fs-sm); }
/* ------------------------------------------------- BLOQUES 2x2 (sin bordes) */
.bloques{ display:grid; gap:var(--space-5); }
@media (min-width:40em){ .bloques{ grid-template-columns:1fr 1fr; } }
.bloque__cab{ display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-2); }
.bloque p{ font-family:var(--fuente-display); font-size:1rem; line-height:1.65; }
/* --------------------------------------------------- NOTA DEL AUTOR (1) */
.nota{
display:inline; background:none; border:0; padding:0; margin:0;
font:inherit; color:inherit; text-align:left; cursor:pointer;
text-decoration:underline wavy var(--sello-acento);
text-decoration-thickness:var(--linea);
text-underline-offset:0.28em;
}
.nota:hover{ color:var(--sello-acento); }
.nota__glifo{ margin-left:var(--space-1); vertical-align:-0.1em; }
/* .nota-panel se retiró: era el panel que empujaba el texto. El canal de notas es
.margen —columna pegada en escritorio y hoja que sube desde el borde inferior en
pantalla estrecha— y su marcado no existía en ninguna página. */
/* ------------------------------------------------------------- SOUNDTRACK */
.soundtrack{
background:var(--color-superficie);
border:var(--linea) solid var(--color-linea);
box-shadow:var(--sombra);
}
.soundtrack__cab{
display:flex; align-items:center; gap:var(--space-2);
padding:var(--space-3) var(--space-4);
border-bottom:var(--linea) solid var(--color-linea);
}
.soundtrack__marco{ padding:var(--space-4); }
.soundtrack__marco iframe{ width:100%; border:0; display:block; min-height:22rem; }
/* ------------------------------------------------------------------ HERO */
.hero{ position:relative; overflow:hidden; background:var(--color-texto); }
.hero__media{ position:relative; }
.hero__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.16); }
.hero__tinte{
position:absolute; inset:0; background:var(--sello-acento);
mix-blend-mode:multiply; opacity:0.18; pointer-events:none;
}
.hero__papel{
position:absolute; inset:0; background:var(--color-fondo);
mix-blend-mode:screen; opacity:0.12; pointer-events:none;
}
.hero__cuerpo{
position:relative; z-index:3;
padding-block:var(--space-6);
}
@media (min-width:64em){ .hero__cuerpo{ padding-block:var(--space-8); } }
.hero--sangre .hero__media{ position:absolute; inset:0; }
.hero--sangre .hero__cuerpo{ min-height:26rem; display:flex; align-items:flex-end; }
.hero--sangre .t-hero, .hero--sangre .t-meta{ color:var(--color-superficie); }
.hero--sangre .t-meta{ color:rgba(246,243,234,.78); }
/* ---------------------------------------------------------------- SECCIONES */
/* En lugar de líneas de separación, el fondo cambia por sección. Una línea
separa; un campo de color agrupa. Y así el sello deja de ser un filo y pasa
a ser un registro de impresión. --tinte-franja regula la intensidad:
0% = papel liso · 5% = registro suave · 12% = bandas de cartel. */
/* La franja neutra se mezcla con la TINTA, no con la línea: mezclar un tostado
claro sobre crema no se ve. La banda tiene que leerse. */
:root{ --tinte-franja:5%; --tinte-estante:9%; }
.seccion{ padding-block:var(--space-6); position:relative; }
@media (min-width:64em){ .seccion{ padding-block:var(--space-7); } }
.seccion--franja{
background-color:color-mix(in srgb,
var(--tinta-franja, var(--color-texto)) var(--tinte-franja),
var(--color-fondo));
}
/* La regla trazada a mano: máscara + color de fondo, en lugar de un border.
Así el mismo trazo sirve en negro o en la tinta del sello que toque. */
.ceja, .estante__cab{
position:relative;
display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4);
align-items:baseline; justify-content:space-between;
padding-bottom:var(--space-3); margin-bottom:var(--space-5);
}
.ceja::after, .estante__cab::after{
content:''; position:absolute; left:0; right:0; bottom:0; height:0.25rem;
background-color:var(--tinta-regla, var(--color-texto));
-webkit-mask-image:var(--regla-trazo); mask-image:var(--regla-trazo);
-webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
-webkit-mask-size:7.5rem 0.25rem; mask-size:7.5rem 0.25rem;
}
.ceja h2{ font-family:var(--fuente-display); font-size:1.5rem; font-weight:700; }
/* .separador se retiró: era la raya de un píxel que partía las páginas en tramos.
Ahora un tramo se declara con .seccion--franja y su --tinte-franja. Una línea
separa; un campo de color agrupa. */
/* -------------------------------------------------------------- NAV / PIE */
.barra{
position:sticky; top:0; z-index:40;
border-bottom:var(--linea) solid var(--color-linea);
background:var(--color-fondo);
transition:transform var(--motion-medio) var(--curva-tinta), box-shadow var(--motion-medio) var(--curva-tinta);
}
.barra__in{
display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4);
/* La marca tiene dos líneas: se centra con los enlaces en vez de alinearse por
la base, que dejaría la barra descuadrada. */
align-items:center; justify-content:space-between;
padding-block:var(--space-3);
}
/* La marca: el monograma CN con los contornos reales de Spectral, puesto como
mascara para que herede la tinta y no necesite ni un ![]()
ni un color aparte.
El alto es la altura de caja alta del nombre, asi que los dos se apoyan en la
misma linea de base. */
/* La marca es un lockup, no un texto suelto: el monograma, el nombre en dos tintas
—el apellido firma con el naranja del autor— y el oficio debajo en mono. */
.marca{
display:inline-grid; grid-template-columns:auto 1fr; column-gap:0.5rem; row-gap:0.1rem;
align-items:center;
font-family:var(--fuente-display); font-weight:700; font-size:1.15rem; letter-spacing:-0.01em;
line-height:1.05;
}
.marca__nombre{ grid-column:2; }
.marca__nombre b{ font-weight:800; color:var(--tinta-autor); }
.marca__oficio{
grid-column:2;
font-family:var(--fuente-mono); font-weight:400; font-size:0.625rem;
text-transform:uppercase; letter-spacing:0.14em; color:var(--color-texto-secundario);
}
.marca::before{
content:''; grid-column:1; grid-row:1 / span 2;
width:1.68rem; height:0.78rem;
background-color:currentColor;
-webkit-mask:url('/assets/marca-cn.svg') no-repeat left center/contain;
mask:url('/assets/marca-cn.svg') no-repeat left center/contain;
}
/* En pantallas muy estrechas el monograma le roba el ancho a la navegacion,
que ya se desplaza sola: ahi se queda solo el nombre. */
@media (max-width:26em){ .marca::before{ display:none; } }
.nav{ display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-4); }
/* En pantalla estrecha la barra no puede crecer a dos líneas: se queda en una y
los enlaces se desplazan en horizontal. Una barra pegada de dos líneas se come
cerca del 14% de la pantalla, justo donde se lee. */
@media (max-width:47.99em){
.barra__in{ flex-wrap:nowrap; gap:var(--space-2) var(--space-3); padding-block:var(--space-2); }
.marca{ white-space:nowrap; }
.nav{ flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
.nav::-webkit-scrollbar{ display:none; }
.nav a{ white-space:nowrap; }
}
.nav a{
font-family:var(--fuente-cuerpo); font-size:var(--fs-sm); color:var(--color-texto-secundario);
border-bottom:var(--linea) solid transparent; padding-bottom:0.15rem;
}
.nav a:hover{ color:var(--color-texto); }
.nav a[aria-current]{ color:var(--color-texto); border-bottom-color:var(--sello-acento); }
.pie{ border-top:var(--linea) solid var(--color-linea); padding-block:var(--space-6) var(--space-4); }
.pie__grid{ display:grid; gap:var(--space-5); }
@media (min-width:40em){ .pie__grid{ grid-template-columns:1.4fr 1fr 1fr; } }
@media (min-width:80em){ .pie__grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; } }
.pie h3{ font-family:var(--fuente-mono); font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--color-texto-secundario); margin-bottom:var(--space-3); }
.pie li{ margin-bottom:var(--space-2); }
.pie a{ font-size:var(--fs-sm); border-bottom:var(--linea) solid transparent; }
.pie a:hover{ border-bottom-color:var(--sello-acento); }
.pie__bio{ font-family:var(--fuente-display); font-size:var(--fs-sm); line-height:1.65; color:var(--color-texto-secundario); max-width:26rem; }
.pie__base{
margin-top:var(--space-5); padding-top:var(--space-3);
border-top:var(--linea) solid var(--color-linea);
display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4); justify-content:space-between;
font-family:var(--fuente-mono); font-size:var(--fs-xs); color:var(--color-texto-secundario);
}
.migas{ font-family:var(--fuente-mono); font-size:var(--fs-xs); color:var(--color-texto-secundario); padding-block:var(--space-4) 0; }
.migas a{ color:var(--color-texto-secundario); border-bottom:var(--linea) solid var(--color-linea); }
.migas a:hover{ color:var(--color-texto); }
.migas span{ margin-inline:var(--space-2); }
/* --------------------------------------------------------- TACHADO PUNTUAL */
.tachado{ position:relative; display:inline-block; padding-inline:0.1em; cursor:help; }
.tachado::after{
content:''; position:absolute; inset:-0.05em -0.08em; background:var(--color-censura);
clip-path:inset(0 0 0 0); transition:clip-path var(--motion-rapido) linear;
}
.tachado:hover::after, .tachado:focus-visible::after{ clip-path:inset(0 0 0 100%); }
@media (prefers-reduced-motion:reduce){
*{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}
/* ------------------------------------------------ PIEZAS COMPARTIDAS
Lo que usan las plantillas de /templates en CUALQUIER página vive aquí, en la
capa 0, y no en una hoja de página: si no, cada página que no cargue esa hoja
imprime la pieza sin estilo. (pieza_cierre() de util.php usa .cierre-util.) */
.cierre-util{ display:grid; gap:var(--space-5); align-items:center; }
@media (min-width:64em){ .cierre-util{ grid-template-columns:1fr auto; } }
/* ------------------------------------------------ HERO CON VÍDEO
Lo usan el registro cartel, el expediente y las páginas de serie: es la puerta
de una obra. Vivía en la hoja del registro cartel, así que cualquier otro
registro que quisiera un hero de vídeo se quedaba sin él. */
.hero-video{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-video video{ width:100%; height:100%; object-fit:cover; }
.hero-video--fija{ background-size:cover; background-position:center; }
.hero-alto .pliego__in{ min-height:70vh; }
@media (min-width:64em){ .hero-alto .pliego__in{ min-height:88vh; } }
/* Las notas del autor cuando la obra no trae capítulo donde anotarlas. */
.notas-simples{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-5); max-width:68ch; }
.notas-simples li{ display:grid; gap:var(--space-2); border-left:0.1875rem solid var(--color-linea); padding-left:var(--space-4); }
.notas-simples blockquote{ font-family:var(--fuente-display); font-style:italic; font-size:var(--fs-lg); line-height:1.45; }
.notas-simples p{ font-family:var(--fuente-display); font-size:var(--fs-sm); line-height:1.7; }
/* ------------------------------------------------ LECTURA · el capítulo
Pieza COMPARTIDA: la usan pieza_anotar() y pieza_extracto() de util.php en
cualquier ficha, con cualquier registro. Vivía duplicada en las tres hojas de
registro; aquí se declara una sola vez. */
.lector{ display:grid; gap:var(--space-6); align-items:start; }
@media (min-width:64em){
/* La medida de lectura (68 caracteres) y, al lado, el canal de notas. */
.lector{ grid-template-columns:minmax(0, 68ch) 19rem; gap:var(--space-7); }
}
.lectura{
max-width:68ch;
font-family:var(--fuente-display);
font-size:clamp(1.0625rem, 0.98rem + 0.35vw, 1.1875rem);
line-height:1.75;
color:var(--color-texto);
hyphens:auto;
-webkit-hyphens:auto;
overflow-wrap:break-word;
text-wrap:pretty;
}
.lectura > p{ margin:0 0 1.15em; }
.lectura > p:last-of-type{ margin-bottom:0; }
.lectura h2{ font-weight:700; font-size:1.5rem; line-height:1.25; margin:var(--space-7) 0 var(--space-4); }
.lectura h2:first-child{ margin-top:0; }
.lectura h3, .lectura h4, .lectura h5, .lectura h6{ font-weight:600; font-size:1.2rem; margin:var(--space-6) 0 var(--space-3); }
.lectura blockquote{ margin:var(--space-5) 0; padding-left:var(--space-4); border-left:var(--linea-fuerte) solid var(--color-linea); font-style:italic; }
.lectura__fin{
margin:var(--space-7) 0 0; padding-top:var(--space-4);
border-top:var(--linea) solid var(--color-linea);
font-family:var(--fuente-mono); font-size:var(--fs-xs);
text-transform:uppercase; letter-spacing:0.08em; color:var(--color-texto-secundario);
}
/* La salida del capítulo. Un capítulo de muestra puede medir ocho mil píxeles: si
alguien entra y no quiere leerlo, tiene que poder salir desde donde esté. Por eso
los mandos viven en el canal de la derecha, dentro del bloque que se pega al borde
mientras dura el texto: acompañan al lector de principio a fin. */
.lectura__salto{ margin:0 0 var(--space-4); }
.lector__lado{ display:grid; gap:var(--space-5); align-content:start; }
.lector__mandos{
display:grid; gap:var(--space-2);
border-top:var(--linea) solid var(--color-linea); padding-top:var(--space-4);
}
.lector__mandos .btn{ width:100%; }
@media (min-width:64em){
/* El que se pega es el bloque entero (notas + mandos), no sólo las notas. */
.lector__lado{ position:sticky; top:var(--space-6); }
}
/* La frase anotada es un botón de verdad: llega con Tab y responde al dedo. */
.nota{
font:inherit; color:inherit; background:none; border:0; border-radius:0; padding:0; margin:0;
cursor:pointer; text-align:left;
border-bottom:0.125rem dotted var(--sello-acento);
}
/* La frase cambia de estado en el sitio: el fondo del sello entra en vez de
aparecer de golpe, y así se ve de dónde salió la nota. */
.nota{ transition:background-color var(--motion-rapido) var(--curva-tinta), color var(--motion-rapido) var(--curva-tinta), border-color var(--motion-rapido) var(--curva-tinta); }
.nota:hover{ background:color-mix(in srgb, var(--sello-acento) 15%, transparent); }
.nota:focus-visible{ outline:0.1875rem solid var(--sello-acento); outline-offset:0.15rem; }
.nota[aria-expanded="true"]{ background:var(--sello-acento); color:var(--color-superficie); border-bottom-color:transparent; }
.nota__n{ font-family:var(--fuente-mono); font-size:0.6em; vertical-align:super; margin-left:0.18em; color:var(--sello-tinta); }
.nota[aria-expanded="true"] .nota__n{ color:inherit; }
.nota__texto[hidden]{ display:none; }
/* El canal de notas: la nota cae siempre en el mismo sitio y no empuja el texto. */
.margen{ display:none; }
@media (min-width:64em){
.margen{ display:block; }
}
.margen__in{ border-left:0.1875rem solid var(--sello-acento); padding-left:var(--space-4); }
.margen__pista{ font-family:var(--fuente-mono); font-size:var(--fs-xs); line-height:1.65; color:var(--color-texto-secundario); }
.margen__cab{ font-family:var(--fuente-mono); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.08em; color:var(--sello-acento); margin-bottom:var(--space-2); }
.margen__nota p:not(.margen__cab){ font-family:var(--fuente-display); font-size:var(--fs-base); line-height:1.7; }
.margen__cerrar{ display:none; }
/* En pantalla estrecha el canal es una hoja que sube desde el borde inferior. */
@media (max-width:63.99em){
/* La hoja ya no se apaga con display:none —eso no se puede transicionar—: se
retira hacia abajo y sube al abrirse. visibility la deja fuera del árbol de
accesibilidad y fuera del alcance del tabulador mientras está retirada, y su
retardo hace que solo se oculte cuando la hoja ha terminado de bajar. */
.margen{
display:block;
position:fixed; inset:auto 0 0 0; z-index:45;
background:var(--color-superficie);
border-top:var(--linea-fuerte) solid var(--sello-acento);
padding:var(--space-4) var(--space-4) var(--space-5);
max-height:62vh; overflow:auto;
box-shadow:0 -0.6rem 1.6rem rgba(0,0,0,.20);
transform:translateY(100%);
visibility:hidden;
transition:transform var(--motion-lento) var(--curva-papel),
visibility 0s linear var(--motion-lento);
}
.margen.esta-abierta{
transform:none;
visibility:visible;
transition:transform var(--motion-lento) var(--curva-papel), visibility 0s;
}
.margen__in{ border-left:0; padding-left:0; }
.margen__cerrar{
display:inline-block; margin-top:var(--space-4);
font:inherit; font-family:var(--fuente-mono); font-size:var(--fs-xs);
background:none; border:0; border-bottom:var(--linea) solid currentColor;
color:var(--color-texto-secundario); cursor:pointer; padding:0;
}
}
/* ------------------------------------------- EL AVISO DE LAS NOTAS
Un aviso sólo sirve si el lector puede accionarlo y lo ve ANTES de actuar.
- Donde hay notas y puntero: el canal está a la vista, así que se dice "pasa el cursor".
- Donde hay dedo: no hay cursor que pasar, así que se dice "toca".
- En pantalla estrecha el canal es una hoja que NO se ve hasta abrir una nota, así que
un aviso dentro llega tarde y se retira: allí la pista va en la propia frase. */
.pista-dedo{ display:none; }
@media (hover:none), (pointer:coarse){
.pista-raton{ display:none; }
.pista-dedo{ display:inline; }
}
@media (max-width:63.99em){
.margen__pista{ display:none; }
/* La frase marcada se ve accionable por sí sola: sin aviso, tiene que notarse. */
.nota{ background:color-mix(in srgb, var(--sello-acento) 12%, transparent); }
}
/* Cuánto queda del capítulo. Decorativa: no aporta nada a un lector de pantalla. */
.lectura-progreso{
position:fixed; top:0; left:0; z-index:60; height:0.1875rem;
width:var(--avance, 0%); background:var(--sello-acento); pointer-events:none;
}
@media print{
.lectura-progreso, .margen__cerrar, .lector__mandos, .lectura__salto{ display:none; }
/* En papel la hoja no se retira: se imprime entera, y con su visibilidad normal,
porque el ancho de página también cae dentro de la media query estrecha. */
.margen{ display:block !important; position:static; visibility:visible !important; transform:none !important; }
.nota{ border-bottom:0; }
}
@media print{
body::before, body::after{ display:none; }
.tachado::after{ clip-path:inset(0 0 0 100%); }
}
/* ------------------------------------------------- ENTRADA DE LAS IMÁGENES
Una imagen que aún no ha llegado no se ve; cuando llega, se funde en vez de
aparecer de golpe. Las dos clases las pone el guion al final del documento, así
que sin JavaScript no se esconde nada y ninguna imagen se queda en blanco. */
img.fundido{ transition:opacity var(--motion-medio) var(--curva-tinta); }
img.fundido.esta-cargando{ opacity:0; }
/* ------------------------------------------------------------ GALERÍA */
/* Una imagen en el marco y la tira de miniaturas de las demás. El marco abraza
la imagen —no fija un alto— así una lámina cuadrada no queda flotando dentro
de un rectángulo negro.
La galería entera es un campo de color: en una ficha las zonas no se separan
con rayas, se separan cambiando de fondo. Va con la tinta del sello de la obra,
que llega puesta desde pieza_galeria(). */
.gal{
background-color:color-mix(in srgb,
var(--color-texto) var(--tinte-franja, 10%),
var(--color-fondo));
}
.gal__intro{ max-width:62ch; }
.gal__cuadro{ display:grid; gap:var(--space-3); margin-top:var(--space-4); }
.gal__marco{ margin:0; display:grid; gap:var(--space-3); }
.gal__ampliar{
display:grid; place-items:center;
width:fit-content; max-width:100%; margin-inline:auto;
background:var(--color-censura);
border:var(--linea) solid var(--color-linea);
}
.gal__img{ max-width:100%; max-height:min(72vh, 40rem); width:auto; height:auto; display:block; }
/* La lámina que entra se funde. La única animación del sistema; sin relleno, para
que al terminar vuelva a mandar el estilo normal (y el :hover siga funcionando). */
@keyframes entra-lamina{ from{ opacity:.15 } to{ opacity:1 } }
.gal__img.entra-lamina{ animation:entra-lamina var(--motion-medio) var(--curva-tinta); }
.gal__ampliar:hover .gal__img{ opacity:.92; }
.gal__pie{
display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-4);
align-items:baseline; justify-content:space-between;
font-family:var(--fuente-mono); font-size:var(--fs-xs);
text-transform:uppercase; letter-spacing:0.08em; color:var(--color-texto-secundario);
}
.gal__n{ color:var(--sello-tinta); font-weight:700; }
.gal__cuenta{ letter-spacing:0.06em; }
/* La tira se desplaza en horizontal, sin barra a la vista. Cada miniatura es un
enlace: sin JavaScript abre la imagen; con JavaScript, mueve el marco. */
.gal__tira{
display:flex; gap:var(--space-2); list-style:none; margin:0; padding:0 0 var(--space-2);
overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
}
.gal__tira::-webkit-scrollbar{ display:none; }
.gal__tira > li{ flex:0 0 auto; }
.gal__mini{
display:block; width:4.5rem; padding:0; line-height:0;
border:var(--linea) solid var(--color-linea); background:var(--color-censura);
}
.gal__mini img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.gal__mini:hover{ border-color:var(--color-texto-secundario); }
.gal__mini[aria-current="true"]{
border-color:var(--sello-acento);
box-shadow:0 0 0 0.125rem color-mix(in srgb, var(--sello-acento) 45%, transparent);
}
.gal__mini:focus-visible{ outline:0.1875rem solid var(--sello-acento); outline-offset:0.1rem; }
@media (min-width:64rem){ .gal__mini{ width:5rem; } }
.visor{
/* El navegador centra un