/**
 * Base: tipografías, tokens de marca, reinicio y tipografía general.
 *
 * Todo lo demás (layout, componentes, tienda) se apoya en las variables que se
 * declaran aquí. Cambiar la marca es cambiar este archivo.
 */

/* ---------------------------------------------------------------- Fuentes */

@font-face {
	font-family: "Marcellus";
	src: url("../fonts/marcellus.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Manrope";
	src: url("../fonts/manrope.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

/* ----------------------------------------------------------------- Tokens */

:root {
	/* Color. El marrón de marca viene del logotipo; el oro es el acento que
	   permite marcar jerarquía sin recurrir a más peso tipográfico. */
	--tinta: #1d1710;
	--tinta-media: #4a4038;
	--tinta-suave: #6f6459;
	--marca: #917247;
	--marca-oscura: #7a5f3b;
	--marca-clara: #b99a6e;
	--oro: #c9a24a;
	--crema: #fbf7f0;
	--crema-honda: #f4ebdd;
	--arena: #e8dcc8;
	--blanco: #fff;
	--verde: #4d7c4f;
	--rojo: #a8452f;

	/* Marrón profundo del pie: cálido, no un negro neutro. */
	--pie-fondo: #1F1912;
	--pie-texto: #ddd2c2;

	/* Superficies */
	--fondo: var(--blanco);
	--fondo-alt: var(--crema);
	--borde: #e6ddd0;
	--borde-fuerte: #d5c8b4;

	/* Tipografía. El cuerpo arranca en 18px: el encargo pedía texto grande. */
	--fuente-titulo: "Marcellus", "Iowan Old Style", Georgia, serif;
	--fuente-texto: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

	--t-xs: 0.8125rem;
	--t-s: 0.9375rem;
	--t-base: 1.125rem;
	--t-m: 1.25rem;
	--t-l: 1.5rem;
	--t-xl: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
	--t-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	--t-3xl: clamp(2rem, 1.55rem + 2vw, 3rem);
	--t-4xl: clamp(2.25rem, 1.6rem + 2.9vw, 3.9rem);

	/* Ritmo vertical */
	--e-1: 0.25rem;
	--e-2: 0.5rem;
	--e-3: 0.75rem;
	--e-4: 1rem;
	--e-5: 1.5rem;
	--e-6: 2rem;
	--e-7: 3rem;
	--e-8: 4rem;
	--e-9: 6rem;
	--e-10: 8rem;

	/* Estructura */
	--ancho: 1440px;
	--ancho-estrecho: 820px;
	--marco: clamp(1.25rem, 4vw, 4rem);
	--radio: 4px;
	--radio-m: 10px;
	--radio-g: 18px;

	/* Sin sombras en toda la web: la profundidad se resuelve con borde y color.
	   Se conservan los aros de foco y las barras interiores, que no son adorno
	   sino señal de estado. */
	--sombra-s: none;
	--sombra-m: none;
	--sombra-g: none;

	--transicion: 240ms cubic-bezier(0.2, 0.7, 0.3, 1);

	/* Altura real de la cabecera fija. El JS la actualiza al medirla. */
	--cabecera: 84px;
}

/* --------------------------------------------------------------- Reinicio */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* clip recorta igual que hidden pero no crea contenedor de scroll, que es
	   lo que rompía position: sticky en el tema anterior. */
	overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	overflow-x: clip;
	background: var(--fondo);
	color: var(--tinta);
	font-family: var(--fuente-texto);
	font-size: var(--t-base);
	line-height: 1.65;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
picture,
video,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

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

button {
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

a {
	color: var(--marca-oscura);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: color var(--transicion);
}

a:hover {
	color: var(--tinta);
}

/* Foco visible y coherente en todo el sitio: requisito de accesibilidad. */
:focus-visible {
	outline: 2px solid var(--marca);
	outline-offset: 3px;
	border-radius: 2px;
}

:focus:not(:focus-visible) {
	outline: none;
}

/* ------------------------------------------------------------- Tipografía */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--fuente-titulo);
	font-weight: 400;
	line-height: 1.08;
	margin: 0 0 var(--e-4);
	color: var(--tinta);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

h1 {
	font-size: var(--t-3xl);
}

h2 {
	font-size: var(--t-2xl);
}

h3 {
	font-size: var(--t-xl);
}

h4 {
	font-size: var(--t-l);
}

p {
	margin: 0 0 var(--e-4);
	text-wrap: pretty;
}

p:last-child {
	margin-bottom: 0;
}

strong,
b {
	font-weight: 700;
}

ul,
ol {
	margin: 0 0 var(--e-4);
	padding-left: 1.35em;
}

li {
	margin-bottom: var(--e-2);
}

blockquote {
	margin: var(--e-6) 0;
	padding-left: var(--e-5);
	border-left: 3px solid var(--oro);
	font-family: var(--fuente-titulo);
	font-size: var(--t-l);
	line-height: 1.4;
	color: var(--tinta-media);
}

hr {
	border: 0;
	border-top: 1px solid var(--borde);
	margin: var(--e-7) 0;
}

/* --------------------------------------------------------------- Utilidades */

/* Rótulo pequeño en caja alta. Se usa como antetítulo de sección: en Manrope
   con interletraje amplio se lee bien pese al tamaño reducido. */
.rotulo {
	font-family: var(--fuente-texto);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--marca);
	margin: 0 0 var(--e-3);
	display: block;
}

.texto-guia {
	font-size: var(--t-m);
	line-height: 1.6;
	color: var(--tinta-media);
	max-width: 62ch;
}

.solo-lectores {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Enlace de salto al contenido: solo aparece al tabular. */
.saltar-al-contenido {
	position: absolute;
	top: -100px;
	left: var(--e-4);
	z-index: 999;
	background: var(--tinta);
	color: var(--blanco);
	padding: var(--e-3) var(--e-5);
	border-radius: var(--radio);
	transition: top var(--transicion);
}

.saltar-al-contenido:focus {
	top: var(--e-4);
	color: var(--blanco);
}