/**
 * base.css — Diego Kaminsky · Escuela de Canto
 *
 * Reset moderno, tipografía base, utilidades, layout primitives.
 * Importa tokens.css como primer paso (vía enqueue.php).
 *
 * Mobile-first: 375 → 768 → 1024 → 1440.
 * WCAG 2.2 AA: foco dorado, contraste verificado, target ≥44px.
 */

/* =========================================================================
   RESET MODERNO
   ========================================================================= */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	color-scheme: light;
}

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

body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 400;
	line-height: 1.65;
	color: var(--color-text);
	background: var(--grad-bg);
	background-color: var(--color-bg); /* fallback sin gradiente */
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	min-height: 100dvh;
	overflow-x: clip; /* previene scroll horizontal de secciones a sangre */
}

/* Textura de grano de papel — mata el banding del degradado dorado del
   body sin tocar su fondo. SVG feTurbulence inline (~1KB), opacity muy baja,
   soft-light. No es motion: no requiere guard de prefers-reduced-motion. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.025;
	mix-blend-mode: soft-light;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-repeat: repeat;
}

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

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

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* Eliminar list-style para listas que tengan role */
ul[role="list"],
ol[role="list"] {
	list-style: none;
}

/* =========================================================================
   TIPOGRAFÍA BASE
   ========================================================================= */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 300; /* Cormorant Light — editorial */
	line-height: 1.1;
	color: var(--color-text);
	text-wrap: balance;
	letter-spacing: -0.02em;
}

h1 { font-size: var(--text-5xl); line-height: 1.0; font-weight: 300; letter-spacing: -0.03em; }
h2 { font-size: var(--text-4xl); line-height: 1.06; font-weight: 300; }
h3 { font-size: var(--text-2xl); line-height: 1.2;  font-weight: 500; letter-spacing: -0.01em; }
h4 { font-size: var(--text-xl);  line-height: 1.3;  font-weight: 500; letter-spacing: 0; }
h5 {
	font-family: var(--font-body);
	font-size: var(--text-lg);
	line-height: 1.35;
	font-weight: 600;
}
h6 {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.4;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

p {
	line-height: 1.65;
	text-wrap: pretty;
	color: var(--color-text-muted);
}

/* Párrafos en headings / títulos directamente heredan color texto */
h1 p, h2 p, h3 p { color: inherit; }

a {
	color: var(--color-accent-soft); /* #8A5E22 — pasa 4.5:1 sobre fondo claro */
	text-decoration-skip-ink: auto;
	text-underline-offset: 3px;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--gold-deep); /* AA incluso sobre la esquina ámbar del --grad-bg */
}

/* Focus visible dorado — WCAG 2.2 §2.4.11 */
:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

strong {
	font-weight: 600;
	color: var(--color-text);
}

em {
	font-style: italic;
}

blockquote {
	border-left: 3px solid var(--color-accent);
	padding-left: 1.5rem;
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-style: italic;
	color: var(--color-text-muted);
}

ul, ol {
	padding-left: 1.5rem;
}

li {
	color: var(--color-text-muted);
	line-height: 1.65;
}

hr {
	border: none;
	border-top: 1px solid var(--color-border);
	margin-block: 2rem;
}

/* Selección de texto dorada */
::selection {
	background-color: rgba(168, 118, 46, 0.20);
	color: var(--color-accent-soft);
}

/* Scrollbar sutil (Chrome/Edge) */
::-webkit-scrollbar {
	width: 6px;
}

::-webkit-scrollbar-track {
	background: var(--color-bg-deep);
}

::-webkit-scrollbar-thumb {
	background: var(--color-border);
	border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--color-accent-soft);
}

/* =========================================================================
   LAYOUT PRIMITIVES
   ========================================================================= */

/* Site wrapper */
.site {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

.site-main {
	flex: 1;
}

/* Contenedor estándar */
.container {
	width: 100%;
	max-width: var(--wide-w);
	margin-inline: auto;
	padding-inline: var(--container-x);
}

.container--narrow {
	max-width: var(--content-w);
}

.container--wide {
	max-width: 1440px;
}

/* Sección — padding vertical fluido */
.section {
	padding-block: var(--section-y);
}

/* Ritmo variable — secciones grandes (hero-adjacent) respiran más;
   secciones compactas (testimonios, FAQ) van más ceñidas. Rompe la
   monotonía de --section-y uniforme en todas las secciones. */
.section--y-lg {
	padding-block: var(--section-y-lg);
}

.section--y-sm {
	padding-block: var(--section-y-sm);
}

/* Isla oscura — SOLO cuando lleva foto de fondo con texto encima */
.section--dark {
	background-color: #1A1410;
}

.section--surface {
	background-color: var(--color-surface);
}

/* Banda más cálida dentro del sitio claro */
.section--warm {
	background-color: var(--color-bg-deep);
}

/* Banda oscura (ink) — para secciones de contraste fuerte */
.section--ink {
	background-color: var(--color-ink, #2A2218);
	color: #FBEFD0;
}

/* Panel marfil translúcido — deja respirar el degradado del body */
.section--translucent {
	background-color: rgba(255, 253, 246, 0.78);
}

/* =========================================================================
   SKIP LINK (a11y)
   ========================================================================= */

.skip-link {
	position: absolute;
	top: -100%;
	left: 1rem;
	z-index: 9999;
	padding: 0.75rem 1.5rem;
	background-color: var(--color-accent);
	color: var(--color-bg);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	transition: top var(--transition-fast);
}

.skip-link:focus {
	top: 0;
}

/* =========================================================================
   UTILIDADES
   ========================================================================= */

/* Eyebrow — versalitas doradas sobre fondos claros con filete corto */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--gold-deep); /* pasa AA incluso sobre la esquina ámbar del degradado */
	margin-bottom: 0.75rem;
}

.eyebrow::before {
	content: "";
	display: block;
	flex-shrink: 0;
	width: 38px;
	height: 1px;
	background: var(--gradient-gold);
}

/* Lead / subtítulo */
.lead {
	font-size: var(--text-lg);
	font-weight: 400;
	line-height: 1.6;
	color: var(--color-text-muted);
	text-wrap: pretty;
}

/* Badge dorado — "Verano", "Nuevo" */
.badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start; /* no estirar dentro de contenedores flex/grid (abraza su texto) */
	gap: 0.35rem;
	padding: 0.25em 0.75em;
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #241808; /* AA: texto ink sobre dorado ≈6:1 (crema no pasaba) */
	background: var(--gradient-gold);
	border-radius: var(--radius-full);
	white-space: nowrap;
}

.badge--outline {
	background: transparent;
	color: var(--color-accent-soft);
	border: 1px solid var(--color-border-gold);
}

/* Texto dorado — usar accent-soft para texto pequeño (pasa 4.5:1) */
.text-gold {
	color: var(--color-accent-soft);
}

.text-gold-bright {
	color: var(--color-accent);
}

.text-muted {
	color: var(--color-text-muted);
}

/* Gradiente dorado en texto decorativo */
.text-gradient-gold {
	background: var(--gradient-gold);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Screen reader only */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* Filete dorado decorativo */
.gold-rule {
	display: block;
	width: 40px;
	height: 1px;
	background: var(--gradient-gold);
	margin-block: 1.5rem;
}

.gold-rule--center {
	margin-inline: auto;
}

/* =========================================================================
   ISLAS OSCURAS (secciones con foto de fondo + velo)
   Texto claro para contraste sobre fondo oscuro.
   Solo aplica a section--dark que lleva foto de fondo.
   ========================================================================= */

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
	color: #F6ECD6;
}

.section--dark p,
.section--dark li {
	color: rgba(246, 236, 214, 0.80);
}

.section--dark strong {
	color: #F6ECD6;
}

.section--dark a {
	color: #E8C77A;
}

.section--dark a:hover {
	color: #F6ECD6;
}

/* =========================================================================
   BODY LOCK (menú móvil abierto — Alpine)
   ========================================================================= */

body.menu-open {
	overflow: hidden;
}

/* =========================================================================
   REVEALS — hooks para GSAP (Fase 7)
   datos-atributos: data-reveal, data-reveal-stagger, data-split
   CSS initial state para cuando GSAP no ha cargado aún.
   ========================================================================= */

[data-reveal] {
	/* Estado inicial visible por defecto (sin JS) */
	opacity: 1;
}

/* Con JS: GSAP sobreescribe opacity/transform. Nada en CSS puro. */

/* =========================================================================
   PREFERS-REDUCED-MOTION — guard global
   ========================================================================= */

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