/* Las fuentes se importan aquí y no en cada : son ~30 páginas
y bastaba olvidarse en una para que rompiese la tipografía. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Poppins:wght@400;500;600&display=swap");
/* ============================================================
Call Harmony — Sistema base
------------------------------------------------------------
Fichas, tipografía y componentes compartidos por TODAS las
pantallas. Cárgala siempre después de header.css:
Paleta tomada de la habitación física: la mesa en penumbra,
el canto dorado de la baraja, la llama de la vela, el
pergamino de la cara de la carta.
Profundidad: SÓLO desplazamiento de luminosidad + filo de 1px.
Nada de sombras — sobre oscuro no se ven y ensucian el borde.
============================================================ */
:root {
/* --- Superficies: mismo matiz, sólo sube la luz ------------
La cabecera (--ch-ground #2a2114) queda un paso por encima
de la mesa, por eso flota sin necesitar sombra. */
--mesa: #201910; /* la madera: fondo de página */
--carta: #292115; /* superficie en reposo */
--carta-alzada: #322818; /* superficie al alzarla */
--hueco: #1a140c; /* campos de formulario: reciben, no emiten */
/* --- Luz --------------------------------------------------- */
--oro: #d4af37; /* pan de oro: el canto de la baraja */
--llama: #e8b96a; /* ámbar de la vela: más claro, más cálido */
--ciruela: #4a3663; /* cielo nocturno entre estrellas */
/* --- Semánticos, desaturados para no gritar sobre oscuro --- */
--salvia: #8fae86; /* disponible / correcto */
--ocre: #d9a441; /* atención / en espera */
--ladrillo: #c9705f; /* error / bloqueo */
/* --- Tinta: cuatro niveles, no dos ------------------------- */
--tinta: #f2ece0; /* pergamino: texto principal */
--tinta-2: #cabda2; /* secundario */
--tinta-3: #9a8d76; /* metadatos */
--tinta-4: #6d6353; /* deshabilitado / marcador */
/* --- Filos: progresión, no binario ------------------------- */
--filo: rgba(212, 175, 55, 0.16); /* separación estándar */
--filo-suave: rgba(242, 236, 224, 0.07); /* separación interna */
--filo-vivo: rgba(212, 175, 55, 0.38); /* énfasis / hover */
--filo-foco: var(--oro); /* anillo de foco */
/* --- Lavados ----------------------------------------------- */
--bano-oro: rgba(212, 175, 55, 0.1);
--bano-luz: rgba(242, 236, 224, 0.05);
/* --- Espaciado: unidad base 4px ---------------------------- */
--e-1: 4px;
--e-2: 8px;
--e-3: 12px;
--e-4: 16px;
--e-6: 24px;
--e-8: 32px;
--e-12: 48px;
--e-16: 64px;
--e-24: 96px;
/* --- Radios ------------------------------------------------ */
--r-sm: 8px; /* botones, campos */
--r-md: 14px; /* paneles */
--r-lg: 20px; /* franjas, modales */
/* Misma anchura que .ch-header__inner: si no, el contenido no
alinea con la marca de la cabecera. */
--ancho: 1200px;
--paso: cubic-bezier(0.32, 0.72, 0.3, 1);
/* Tipos: Cormorant tiene contraste de trazo alto — es la letra
grabada a la luz de una vela. Poppins queda para la interfaz. */
--display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
--texto: "Poppins", system-ui, -apple-system, sans-serif;
}
/* ============================================================
Base
============================================================ */
* {
box-sizing: border-box;
}
/* El [hidden] del navegador es `display: none` en la hoja del UA, así
que CUALQUIER regla de autor con display (flex, inline-flex…) lo
anula y el elemento sigue viéndose. Aquí se usa `hidden` en avisos,
errores y bloques, así que hace falta imponerlo. */
[hidden] {
display: none !important;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--mesa);
color: var(--tinta-2);
font-family: var(--texto);
font-size: 1rem;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
color-scheme: dark;
overflow-x: hidden;
}
h1,
h2,
h3,
h4,
.rotulo {
font-family: var(--display);
/* Cormorant trae cifras de texto por defecto: el "1" queda a media
altura y en un titular o un rótulo se lee como una "i". */
font-variant-numeric: lining-nums;
font-feature-settings: "lnum" 1;
}
h1,
h2,
h3,
h4 {
color: var(--tinta);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.005em;
margin: 0;
}
h1 {
font-size: clamp(1.875rem, 5vw, 2.75rem);
font-weight: 500;
}
h2 {
font-size: clamp(1.5rem, 3.6vw, 2rem);
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 1.0625rem;
}
p {
margin: 0;
}
a {
color: var(--oro);
text-decoration: none;
transition: color 0.18s var(--paso);
}
a:hover {
color: var(--llama);
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--filo-foco);
outline-offset: 2px;
border-radius: var(--r-sm);
}
img {
max-width: 100%;
height: auto;
}
::selection {
background: var(--bano-oro);
color: var(--tinta);
}
.lienzo {
width: 100%;
max-width: var(--ancho);
margin: 0 auto;
padding: 0 var(--e-6);
}
.lienzo--angosto {
max-width: 760px;
}
.seccion {
padding: var(--e-12) 0;
}
.seccion__cabeza {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--e-4);
margin-bottom: var(--e-8);
}
.seccion__enlace {
color: var(--tinta-3);
font-size: 0.875rem;
white-space: nowrap;
}
.seccion__enlace:hover {
color: var(--oro);
}
/* Rótulo de sección: versalitas espaciadas con guion, como el
encabezado grabado de una lámina. */
.rotulo {
display: inline-flex;
align-items: center;
gap: var(--e-2);
font-family: var(--display);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--oro);
}
.rotulo::before {
content: "";
width: 22px;
height: 1px;
background: var(--filo-vivo);
}
/* ============================================================
LA ROSETA — el reverso de la carta
------------------------------------------------------------
Tres capas: rayos largos (16 puntas), rayos cortos
intercalados, y los anillos concéntricos. La máscara radial
la apaga hacia fuera: así no es un gráfico pegado, es luz
cayendo sobre la carta.
Uso: