/* =============================================================================
   Los Caseros — Base global de marca
   Se encola DESPUÉS de style.css (_s) para imponer la piel de marca.
   Depende de los tokens definidos en tokens.css (:root).
   Reglas de oro: fondo crema (nunca blanco puro), texto ink (nunca negro puro),
   botones pill, fuentes Montserrat (body) + Pangolin (display).
   ============================================================================= */

/* ---------- Superficie + tipografía base ---------- */
html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--lc-cream-100);
	color: var(--lc-ink-900);
	font-family: var(--lc-font-body);
	font-size: var(--lc-text-base);
	line-height: var(--lc-lh-relaxed);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	text-wrap: pretty;
}

/* ---------- Encabezados ---------- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--lc-font-body);
	color: var(--lc-green-800);
	line-height: var(--lc-lh-snug);
	letter-spacing: var(--lc-tracking-tight);
	margin: 0 0 var(--lc-space-3);
}
h1 { font-size: var(--lc-text-3xl); line-height: var(--lc-lh-tight); }
h2 { font-size: var(--lc-text-2xl); font-weight: var(--lc-w-bold); }
h3 { font-size: var(--lc-text-xl);  font-weight: var(--lc-w-semibold); color: var(--lc-ink-900); }
h4 { font-size: var(--lc-text-lg);  font-weight: var(--lc-w-semibold); color: var(--lc-ink-900); }

/* Display decorativo (Pangolin) — hero headlines y titulares de marca.
   Usar la clase explícitamente; el cuerpo nunca hereda la display. */
.lc-display {
	font-family: var(--lc-font-display);
	font-weight: var(--lc-w-regular);
	font-size: var(--lc-text-4xl);
	line-height: 0.95;
	letter-spacing: var(--lc-tracking-tight);
	color: var(--lc-green-800);
}

/* Eyebrow / etiqueta de sección en mayúsculas */
.lc-eyebrow {
	font-family: var(--lc-font-body);
	font-weight: var(--lc-w-semibold);
	font-size: var(--lc-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--lc-tracking-wider);
	color: var(--lc-green-700);
}

p { margin: 0 0 var(--lc-space-4); }

/* ---------- Links ---------- */
a {
	color: var(--lc-fg-link);
	text-decoration: none;
	transition: color var(--lc-dur-fast) var(--lc-ease);
}
a:hover,
a:focus { color: var(--lc-green-800); }

/* ---------- Foco accesible (anillo verde, nunca outline default) ---------- */
:focus-visible {
	outline: none;
	box-shadow: var(--lc-shadow-focus);
	border-radius: var(--lc-radius-sm);
}

/* ---------- Selección + scrollbar cálidos ---------- */
::selection {
	background: var(--lc-green-200);
	color: var(--lc-green-900);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--lc-cream-100); }
::-webkit-scrollbar-thumb {
	background: var(--lc-brown-300);
	border-radius: var(--lc-radius-pill);
	border: 2px solid var(--lc-cream-100);
}
::-webkit-scrollbar-thumb:hover { background: var(--lc-brown-500); }

/* ---------- Contenedor base (max 1280, gutters responsivos) ---------- */
.lc-container {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--lc-space-6); /* 24px mobile */
}
@media (min-width: 768px) {
	.lc-container { padding-inline: var(--lc-space-12); } /* 48px desktop */
}

/* ---------- Imágenes fluidas ---------- */
img, svg, video { max-width: 100%; height: auto; }

/* ---------- Botón pill base (primitivo) ---------- */
.lc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lc-space-2);
	font-family: var(--lc-font-body);
	font-weight: var(--lc-w-semibold);
	font-size: var(--lc-text-base);
	line-height: 1;
	padding: 14px 26px;
	border: 0;
	border-radius: var(--lc-radius-pill);
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--lc-dur-fast) var(--lc-ease),
		background-color var(--lc-dur-fast) var(--lc-ease),
		box-shadow var(--lc-dur-fast) var(--lc-ease);
}
.lc-btn:active { transform: scale(0.98); box-shadow: var(--lc-shadow-xs); }

.lc-btn--primary {
	background: var(--lc-green-800);
	color: var(--lc-fg-on-green);
	box-shadow: var(--lc-shadow-sm);
}
.lc-btn--primary:hover {
	background: var(--lc-green-900);
	color: var(--lc-fg-on-green);
	box-shadow: var(--lc-shadow-md);
}

.lc-btn--ghost {
	background: transparent;
	color: var(--lc-green-800);
	box-shadow: inset 0 0 0 2px var(--lc-green-800);
}
.lc-btn--ghost:hover { background: var(--lc-green-100); }

.lc-btn[disabled],
.lc-btn.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	box-shadow: none;
}

/* =============================================================================
   Scroll reveal — pareja de assets/js/reveal.js
   ============================================================================= */
:root {
	--lc-reveal-shift: 56px;
	--lc-reveal-blur:  10px;
	--lc-reveal-dur:   900ms;
	--lc-reveal-scale: 0.92;
}

/* La sección entera sube + aparece */
.lc-revealable {
	opacity: 0;
	transform: translateY(60px);
	transition: opacity var(--lc-reveal-dur) cubic-bezier(.22, .61, .36, 1),
		transform var(--lc-reveal-dur) cubic-bezier(.22, .61, .36, 1);
}
.lc-revealable.lc-in {
	opacity: 1;
	transform: translateY(0);
}

/* Descendientes en cascada con blur-in */
.lc-stagger {
	opacity: 0;
	transform: translateY(var(--lc-reveal-shift)) scale(var(--lc-reveal-scale));
	filter: blur(var(--lc-reveal-blur));
	transition: opacity var(--lc-reveal-dur) cubic-bezier(.22, .61, .36, 1),
		transform var(--lc-reveal-dur) cubic-bezier(.34, 1.30, .64, 1),
		filter var(--lc-reveal-dur) cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform, filter;
}
.lc-stagger.lc-stagger-in {
	opacity: 1;
	transform: translateY(0) scale(1);
	filter: blur(0);
}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	/* Nunca dejar contenido oculto si se desactivó el movimiento */
	.lc-revealable,
	.lc-stagger {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
}