/* ===========================================================================
   Sortícula — design system: tokens, base, utilities
   "Editorial sobrio": lienzo neutro cálido + UN acento usado con intención.
   Tipografía: Instrument Serif (display) + Syne (UI/cuerpo/etiquetas).
   =========================================================================== */

:root {
	/* --- Sistema de color: 5 paletas, una al azar por carga --------------
	   Cada paleta define 5 primitivas (--p-*) en una clase .pal-* sobre <html>.
	   Un script en app.html pone una al azar ANTES de pintar (sin parpadeo) y el
	   randomizador la cambia. Las primitivas se mapean a roles; los tonos
	   apagados y las líneas se derivan con color-mix, así funcionan en CUALQUIER
	   paleta sin definir tokens extra. Default = Brasa por si el JS no corre. */
	--p-bg: #2a0a06;
	--p-fg: #f6eadd;
	--p-accent: #ff5a1f;
	--p-accent-ink: #2a0a06;
	--p-surface: #3a130c;

	--bg: var(--p-bg);
	--fg: var(--p-fg);
	--accent: var(--p-accent);
	--accent-ink: var(--p-accent-ink);
	--surface: var(--p-surface);
	/* derivados — se recalculan solos si una sección reescribe --fg/--bg.
	   El texto apagado mezcla fuerte hacia --fg para no perder contraste AA en
	   las paletas claras / bloques de acento. */
	--fg-muted: color-mix(in srgb, var(--fg) 91%, var(--bg));
	--line: color-mix(in srgb, var(--fg) 16%, transparent);
	--line-strong: color-mix(in srgb, var(--fg) 32%, transparent);
	/* Highlight de palabras clave sobre el fondo base. Por defecto = el acento
	   vivo; en paletas donde el acento coincide con el texto (Fundido) se
	   sobreescribe por una que sí contraste (ver .pal-fundido). */
	--hl: var(--accent);

	/* Alias de compatibilidad con el código existente */
	--accent-deep: var(--accent);
	--bone-warm: var(--accent-ink);
	--on-dark: var(--fg);
	--on-dark-muted: var(--fg-muted);
	--text: var(--fg);
	--text-muted: var(--fg-muted);
	--hueso: var(--bg);
	--hueso-2: var(--surface);
	--bone: var(--bg);
	--bone-60: var(--fg-muted);
	--bone-40: var(--fg-muted);
	--ink: var(--fg);
	--ink-70: var(--fg-muted);
	--ink-deep: var(--bg);
	--tinta: var(--fg);
	--tinta-2: var(--surface);
	--tinta-deep: var(--bg);
	--mute: var(--fg-muted);
	--ember: var(--accent);
	--ember-soft: var(--accent);
	--coral: var(--accent);
	--line-on-dark: var(--line);
	--line-on-dark-strong: var(--line-strong);

	/* --- Type ------------------------------------------------------------ */
	--serif: 'Instrument Serif', Georgia, serif; /* display */
	--sans: 'Syne', system-ui, sans-serif; /* UI · cuerpo · etiquetas */
	--mono: 'Syne', system-ui, sans-serif; /* alias: etiquetas tracked */

	/* Escala fluida real: interpola de 360px a 1440px de viewport.
	   Los clamp() anteriores (9vw, 6vw…) no empezaban a crecer hasta los
	   578-857px, así que de 320 a 578px TODA la display era plana y la
	   relación display/cuerpo saltaba de 3.06x en móvil a 7.6x en escritorio.
	   Fórmula: pendiente = (max - min) / 10.8; intercepto = min - pendiente * 3.6. */
	--fs-display: clamp(52px, calc(26.13px + 7.19vw), 150px); /* hero */
	--fs-h1: clamp(32px, calc(24.00px + 2.22vw), 56px); /* título de página */
	--fs-h2: clamp(38px, calc(21.87px + 4.48vw), 88px); /* titular de sección */
	--fs-h3: clamp(25px, calc(20.67px + 1.20vw), 38px);
	--fs-h4: clamp(21px, calc(18.67px + 0.65vw), 28px); /* nombre de producto */
	--fs-lg: clamp(18px, calc(16.67px + 0.37vw), 22px); /* entradilla */
	--fs-body: clamp(16px, calc(15.67px + 0.09vw), 17px);
	--fs-sm: clamp(14px, calc(13.67px + 0.09vw), 15px);
	--fs-label: 12px; /* piso de etiquetas en caja alta */
	--fs-micro: 11px; /* sólo contadores y badges */
	--fs-input: 16px; /* NUNCA menos: por debajo, iOS hace zoom al enfocar */

	/* --- Interlineado y tracking ----------------------------------------- */
	--lh-display: 0.92;
	--lh-title: 1.02;
	--lh-heading: 1.15;
	--lh-lede: 1.5;
	--lh-body: 1.6;
	--lh-ui: 1.3;

	--track-display: -0.02em;
	--track-title: -0.01em;
	--track-caps-lg: 0.06em; /* caja alta >= 15px */
	--track-caps-md: 0.10em; /* caja alta 13-14px */
	--track-caps-sm: 0.14em; /* caja alta 11-12px */
	--track-caps-xs: 0.18em; /* eyebrow: el tracking amplio de la marca */

	/* --- Spacing (escala 8px) -------------------------------------------- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;

	/* Escalón que faltaba entre 16 y 24: es justo donde aparecían los 18px y
	   22px sueltos de los paddings de cápsula. */
	--space-4-5: 20px;

	/* Cápsulas. Sustituyen los paddings px sueltos repartidos por hoja. */
	--btn-pad-sm: 10px 18px;
	--btn-pad-md: 14px 26px;
	--btn-pad-lg: 18px 32px;

	/* --- Layout ---------------------------------------------------------- */
	--maxw: 1320px;
	--maxw-narrow: 1080px;
	--measure: 62ch;
	--pad: clamp(22px, 5vw, 56px); /* margen horizontal de página */
	--section-y: clamp(84px, 11vw, 140px); /* ritmo vertical de sección */
	--radius: 12px;

	--ease: cubic-bezier(0.7, 0, 0.2, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Las 5 paletas (mixtas: cálidas de fuego/metal + frías artsy) ------- */
:root.pal-brasa {
	--p-bg: #2a0a06; /* oxblood */
	--p-fg: #f6eadd; /* bone */
	--p-accent: #ff5a1f; /* ember */
	--p-accent-ink: #2a0a06;
	--p-surface: #3a130c;
}
:root.pal-fundido {
	--p-bg: #ea4a17; /* naranja fundido (luminoso → más margen para texto AA) */
	--p-fg: #0a0603; /* casi negro */
	--p-accent: #0a0603;
	--p-accent-ink: #ff7a45;
	--p-surface: #f4e3d2; /* crema (tarjetas) */
	/* El acento es casi-negro (= texto), así que el highlight usa blanco cálido:
	   sobre el naranja da ~3.6:1 → AA para texto grande (títulos). */
	--hl: #fff3ea;
}
:root.pal-patina {
	--p-bg: #0e3a33; /* verdigris */
	--p-fg: #eaf5e6;
	--p-accent: #d9f25c; /* chartreuse */
	--p-accent-ink: #0e3a33;
	--p-surface: #15453c;
}
:root.pal-cobalto {
	--p-bg: #1a2be0; /* cobalto eléctrico */
	--p-fg: #eceaff;
	--p-accent: #e8ff5a; /* lima ácida */
	--p-accent-ink: #14131a;
	--p-surface: #2a39e8;
}
:root.pal-tinta {
	--p-bg: #141318; /* casi negro frío */
	--p-fg: #f2efea;
	--p-accent: #94ffe5; /* menta */
	--p-accent-ink: #141318;
	--p-surface: #1e1d24;
}

/* Bloques que invierten roles para el ritmo (una sección de acento, una
   invertida). IMPORTANTE: los tokens derivados (--fg-muted, --line) y los alias
   se DECLARAN aquí también; si no, se quedan con el valor calculado en :root
   (las custom props se computan en el nivel donde se declaran) y el muted/línea
   no responderían al cambio de --fg/--bg. */
.section--accent {
	--bg: var(--p-accent);
	--fg: var(--p-accent-ink);
	--accent: var(--p-bg);
	--accent-ink: var(--p-fg);
	--surface: color-mix(in srgb, var(--p-accent) 86%, #000);
	--fg-muted: color-mix(in srgb, var(--fg) 91%, var(--bg));
	--line: color-mix(in srgb, var(--fg) 16%, transparent);
	--line-strong: color-mix(in srgb, var(--fg) 32%, transparent);
	--accent-deep: var(--accent);
	--bone-warm: var(--accent-ink);
	--on-dark: var(--fg);
	--on-dark-muted: var(--fg-muted);
	--text: var(--fg);
	--text-muted: var(--fg-muted);
	--hueso: var(--bg);
	--hueso-2: var(--surface);
	--bone: var(--bg);
	--bone-60: var(--fg-muted);
	--bone-40: var(--fg-muted);
	--ink: var(--fg);
	--ink-70: var(--fg-muted);
	--tinta: var(--fg);
	--tinta-2: var(--surface);
	--mute: var(--fg-muted);
	--ember: var(--accent);
	--coral: var(--accent);
	--line-on-dark: var(--line);
	--line-on-dark-strong: var(--line-strong);
}
.section--invert {
	--bg: var(--p-fg);
	--fg: var(--p-bg);
	/* En el bloque invertido el fondo es claro: el acento brillante (lima/menta)
	   no contrastaría, así que el acento pasa a ser el color base (--p-bg), que
	   por diseño SIEMPRE contrasta con --p-fg. */
	--accent: var(--p-bg);
	--accent-ink: var(--p-fg);
	--surface: color-mix(in srgb, var(--p-fg) 92%, var(--p-bg));
	--fg-muted: color-mix(in srgb, var(--fg) 91%, var(--bg));
	--line: color-mix(in srgb, var(--fg) 16%, transparent);
	--line-strong: color-mix(in srgb, var(--fg) 32%, transparent);
	--accent-deep: var(--accent);
	--bone-warm: var(--accent-ink);
	--on-dark: var(--fg);
	--on-dark-muted: var(--fg-muted);
	--text: var(--fg);
	--text-muted: var(--fg-muted);
	--hueso: var(--bg);
	--hueso-2: var(--surface);
	--bone: var(--bg);
	--bone-60: var(--fg-muted);
	--bone-40: var(--fg-muted);
	--ink: var(--fg);
	--ink-70: var(--fg-muted);
	--tinta: var(--fg);
	--tinta-2: var(--surface);
	--mute: var(--fg-muted);
	--ember: var(--accent);
	--coral: var(--accent);
	--line-on-dark: var(--line);
	--line-on-dark-strong: var(--line-strong);
}

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

html {
	scroll-behavior: smooth;
}
html.lenis,
html.lenis body {
	height: auto;
}
.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
	overflow: hidden;
}

body {
	margin: 0;
	background: var(--hueso);
	color: var(--text);
	font-family: var(--sans);
	font-size: var(--fs-body);
	line-height: 1.6;
	font-weight: 500;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
}

h1,
h2,
h3 {
	font-weight: 400;
	margin: 0;
	letter-spacing: -0.01em;
}

/* Accent focus ring for keyboard users */
:where(a, button, input, [tabindex]):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (pointer: fine) {
	body.has-cursor,
	body.has-cursor * {
		cursor: none;
	}
}

/* --------------------------- keyframes --------------------------- */
@keyframes kenburns {
	from {
		transform: scale(1.06);
	}
	to {
		transform: scale(1.16);
	}
}
@keyframes spin {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);
	}
}
@keyframes float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}
@keyframes scrollcue {
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	70% {
		transform: translateY(16px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

/* --------------------------- utilities --------------------------- */
.shell {
	max-width: var(--maxw);
	margin: 0 auto;
}

/* Etiqueta / eyebrow — Syne tracked uppercase (sustituye al mono) */
.eyebrow {
	font-family: var(--sans);
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
}
/* Marca de acento antes de una eyebrow: una línea corta vermellón */
.eyebrow.mark::before {
	content: '';
	width: 22px;
	height: 2px;
	background: var(--accent);
	display: inline-block;
}

.lnk {
	position: relative;
	text-decoration: none;
}
.lnk::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.4s var(--ease);
}
.lnk:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

.btn {
	transition:
		transform 0.35s var(--ease),
		background 0.3s,
		color 0.3s,
		border-color 0.3s;
}
.btn:hover {
	transform: translateY(-3px);
}

/* Reveal primitives */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 0.8s var(--ease-out),
		transform 0.8s var(--ease-out);
	will-change: transform, opacity;
}
.reveal.is-in {
	opacity: 1;
	transform: none;
}
.no-js .reveal {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}