/*
 * Variables de marca — ver docs/BRAND.md para la regla completa de cada una.
 * No se redefinen colores, tipografía ni espaciado fuera de este archivo.
 */

:root {
	/* Paleta */
	--color-crema: #FFF8EC;
	--color-blanco: #FFFFFF;
	--color-ambar: #F2A900;
	--color-carbon: #141414;
	--color-violeta: #6C4CFF;
	--color-miel-oscura: #8A5F00;
	--color-gris-calido: #5C554A;

	/* Tipografía */
	--font-titulos: 'Poppins', Arial, sans-serif;
	--font-cuerpo: 'Inter', Arial, sans-serif;

	--tamano-titulo-principal: clamp(2rem, 1.6rem + 2vw, 4rem); /* 48-64px */
	--tamano-titulo-seccion: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem); /* 32-40px */
	--tamano-subtitulo: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); /* 18-24px */
	--tamano-parrafo: 1rem; /* 15-17px */
	--tamano-pie-foto: 0.8125rem; /* 12-13px */
	--tamano-etiqueta: 0.75rem; /* 11-13px */

	/* Espaciado base 8px */
	--espacio-1: 8px;
	--espacio-2: 16px;
	--espacio-3: 24px;
	--espacio-4: 48px;
	--espacio-6: 96px;

	/* Forma */
	--radio-tarjeta: 16px;
	--radio-campo: 8px;
	--radio-pastilla: 999px;
	--grosor-icono: 1.75px;

	/* Hover de tarjeta — valor único reutilizado por las tarjetas de
	 * landing (El problema), hub (tarjeta--enlace) y Contacto, para que
	 * las 3 compartan el mismo comportamiento sin duplicar números. */
	--tarjeta-hover-elevacion: -6px;
	--tarjeta-hover-sombra: 0 16px 32px rgba(20, 20, 20, 0.14);

	/* Layout */
	--ancho-maximo-contenido: 1200px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--color-crema);
	color: var(--color-carbon);
	font-family: var(--font-cuerpo);
	font-size: var(--tamano-parrafo);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--font-titulos);
	font-weight: 700;
	margin: 0 0 var(--espacio-2);
	line-height: 1.15;
}

h1 {
	font-size: var(--tamano-titulo-principal);
}

h2 {
	font-size: var(--tamano-titulo-seccion);
}

h3 {
	font-size: var(--tamano-subtitulo);
	font-weight: 500;
}

p {
	margin: 0 0 var(--espacio-2);
}

a {
	color: inherit;
}

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

.contenedor {
	max-width: var(--ancho-maximo-contenido);
	margin-inline: auto;
	padding-inline: var(--espacio-2);
}

/*
 * [data-aparecer] es visible por defecto a propósito (fix H1, auditoría
 * de prelanzamiento 2026-10-27). El estado oculto+animado de abajo ya
 * NO se activa con una clase global en <html> (eso ocultaba también el
 * hero apenas el script corría, aunque fuera tarde — hallazgo #4 de
 * REVISION-PARCHE-CLAUDE.md) — ahora main.js decide POR ELEMENTO,
 * agregando la clase .aparecer-oculto SOLO a lo que en el momento en
 * que corre el script está genuinamente debajo del viewport actual.
 * Lo que ya es visible (el hero) o lo que el usuario ya pasó de largo
 * si el script cargó tarde nunca recibe esta clase, así que nunca pasa
 * por opacity:0. Si el script no corre en absoluto (bloqueado, con
 * error, JS apagado) o el navegador no soporta IntersectionObserver,
 * ningún elemento recibe la clase y todo se queda visible desde el
 * primer render.
 */
[data-aparecer].aparecer-oculto {
	opacity: 0;
	transform: translateY(20px);
	/* Solo opacity/transform — ambas corren en la capa de composición
	 * (GPU), sin recalcular layout. --aparecer-retraso lo pone main.js
	 * por elemento para el escalonado entre hermanos (0 si no aplica). */
	transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1) var(--aparecer-retraso, 0ms),
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) var(--aparecer-retraso, 0ms);
}

[data-aparecer].aparecer-oculto.aparecer--visible {
	opacity: 1;
	transform: translateY(0);
}

@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;
	}
}