/* ─────────────────────────────────────────────────────────────────────
* Wonderland · LA CABECERA DE PÁGINA · patrón único
*
* Aran: "estandarizar creo que es ganar. Algunas tendrán imagen de fondo,
* otras no, pero la cabecera, el footer y la posición del título de página
* y jerarquía debería ser igual en todas."
*
* LOS CAPÍTULOS NO ENTRAN AQUÍ. Aran: "los capítulos los dejaría como están,
* es otro tipo de contenido". Y es verdad: un capítulo es el CUENTO, no una
* página de la web. Merece su portada a pantalla completa con la ilustración
* mandando y el título flotando encima. Los demás son sitios por donde
* navegas — y esos sí deben comportarse igual entre ellos.
*
* LA BASE ES EL JARDÍN. Aran: "me gusta cómo quedan los espacios de título
* desde cabecera en el jardín". Así que sus números son la norma, no un valor
* que me invente yo:
*
* padding: 8rem 1.5rem 3rem · max-width: 720px · centrado
*
* QUÉ HABÍA · cinco criterios, uno por página, cada uno inventado el día que
* se escribió:
*
* laberinto 100vh, alinea abajo, con acuarela
* jardin/fiesta 8rem de padding, sin imagen ← este es el bueno
* margarita 88vh, al centro
* libro 65vh, al centro
* torre .container > header.intro · otra generación entera
*
* USO · en el , entre mobile y tipografía. EL ORDEN IMPORTA:
*
*
* ← aquí
*
*
* ANTES DE MOVERLO, LEE ESTO · lo puse detrás de tipografía y le rompí el
* suelo de cursivas sin enterarme. Los dos declaran font-size sobre
* .wl-hero-sub y .persona-role con la misma especificidad (una clase), así
* que gana el último — y el clamp de aquí, cuyo mínimo es 1rem, se comía el
* max(1.1rem, 1em) de allí. Resultado: en móvil la cursiva volvía a 1rem,
* deshaciendo en silencio justo lo que Aran había pedido.
*
* wonderland-tipografia.css es un REFUERZO: su trabajo es poner suelos y
* ganar. Va el último. Este archivo propone la escala; aquel garantiza el
* mínimo. Si algún día hay que reordenar, ese es el motivo.
*
* Y el marcado, con imagen o sin ella:
* ← añade wl-hero--imagen si la hay
* ← opcional
* ← opcional (va con la imagen)
*
* …
*
…
*
…
← opcional
*
*
* ───────────────────────────────────────────────────────────────────── */
:root {
/* El aire entre el nav y el título. El número del jardín. Un solo sitio:
* si algún día hay que ajustarlo, se toca aquí y se mueven todas a la vez. */
--wl-hero-aire: 8rem;
}
/* ── SIN IMAGEN · el caso normal ──────────────────────────────────────
* No es un hero de portada: es la cabecera de una página. Ocupa lo que
* necesita, no la pantalla entera. */
.wl-hero {
position: relative;
z-index: 2;
}
.wl-hero-txt {
text-align: center;
max-width: 720px;
margin: 0 auto;
padding: var(--wl-hero-aire) 1.5rem 3rem;
}
/* ── CON IMAGEN · la misma estructura, con el cuadro detrás ───────────
* Lo que cambia es que hay imagen, NO dónde cae el título: el mismo aire de
* 8rem desde el nav. Esa es la promesa del patrón. */
.wl-hero--imagen {
overflow: clip;
}
.wl-hero--imagen .wl-hero-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
z-index: 0;
}
/* El velo · asienta el texto y cose la imagen con la página.
*
* OJO · aquí NO va filter: brightness(). Los capítulos lo llevan y es lo que
* enfanga las acuarelas. Con el degradado basta: el texto se apoya donde la
* imagen ya es oscura de por sí. */
.wl-hero--imagen .wl-hero-velo {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(to bottom,
rgba(13, 26, 38, 0.30) 0%,
rgba(13, 26, 38, 0.10) 40%,
rgba(13, 26, 38, 0.85) 80%,
var(--blue-deep, #0d1a26) 100%);
}
.wl-hero--imagen .wl-hero-txt {
position: relative;
z-index: 2;
}
/* ── LA JERARQUÍA · igual siempre, haya imagen o no ───────────────────
* Los tres tamaños salen del jardín tal cual.
*
* OJO A LA SEPARACIÓN · aquí va el TIPO: familia, tamaño, interlínea, color.
* La CAJA — dónde se alinea, cuánto margen, qué anchura — va aparte, porque
* los personajes comparten la escala pero NO la caja: su página es un chat de
* 100vh en flex, con el título arriba a la izquierda y la conversación
* debajo. Centrarlos y darles 8rem de aire sería romperlos.
*
* Aran: "la tipografía de los títulos hay que unificar con los territorios."
* Los títulos, sí. La caja de cada uno es asunto suyo. */
.wl-hero-label,
.persona-tag {
font-family: 'Cinzel', serif;
font-weight: 600;
font-size: 0.62rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: rgba(201, 168, 76, 0.65);
}
.wl-hero-titulo,
.persona-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 300;
font-size: clamp(2rem, 5.5vw, 3.4rem);
line-height: 1.15;
color: var(--gold-pale, #f5eedc);
}
.wl-hero-titulo em,
.persona-title em { font-style: italic; color: var(--gold, #c9a84c); }
.wl-hero-sub,
.persona-role {
font-family: 'IM Fell English', Georgia, serif;
font-style: italic;
/* El 1.06rem del suelo va DENTRO del clamp, no en tipografia.css. Ver la
* nota de abajo: allí el suelo encogía esto en vez de subirlo. */
font-size: clamp(1.06rem, 2vw, 1.15rem);
line-height: 1.85;
color: rgba(245, 238, 220, 0.68);
}
/* ── EL SUELO DE CURSIVAS, Y POR QUÉ AQUÍ Y NO ALLÍ ───────────────────
* wonderland-tipografia.css pone suelos así:
*
* font-size: max(1.06rem, 1em);
*
* Eso NO es un suelo respecto al tamaño del elemento. Es un suelo respecto al
* HEREDADO — 1em es lo que mide la letra del padre. Si el padre va a 1rem, la
* cuenta sale max(17px, 16px) = 17px SIEMPRE, mida lo que mida el elemento.
* Sobre algo que ya iba a 1.15rem, no lo sube: lo baja a 1.06rem.
*
* Y ahí estaba el lío entero. .territorio-texto llevaba meses en esa lista sin
* efecto ninguno, porque la página lo declaraba en su