/* ==========================================================================
   EVELYN SZYSZKA — Sistema de diseño v2
   Sobrio, minimalista, profesional. Base monocromática (tinta + papel)
   con un único acento discreto, usado con moderación (no como color
   de fondo de secciones ni de botones grandes).
   ========================================================================== */

:root {
	/* Paleta — monocromática cálida + un acento */
	--color-ink-900: #16181a;    /* texto principal, casi negro con tibieza */
	--color-ink-700: #3c4045;    /* texto secundario */
	--color-ink-500: #6b6f75;    /* texto terciario / meta */
	--color-ink-300: #c7c5bd;    /* bordes */
	--color-ink-100: #eceae4;    /* fondos de sección sutiles */

	--color-paper: #faf9f6;      /* fondo general — blanco cálido, no frío */
	--color-white: #ffffff;

	--color-accent: #6e5a46;     /* acento único: marrón tierra apagado, cálido y serio */
	--color-accent-soft: #efe9e2;

	--color-text: var(--color-ink-900);
	--color-text-muted: var(--color-ink-500);
	--color-border: var(--color-ink-300);

	/* Tipografía */
	--font-heading: 'Fraunces', Georgia, serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

	--fs-xs: 0.8125rem;
	--fs-sm: 0.9375rem;
	--fs-base: 1rem;
	--fs-lg: 1.125rem;
	--fs-xl: 1.375rem;
	--fs-2xl: 1.875rem;
	--fs-3xl: 2.5rem;
	--fs-4xl: 3.25rem;

	/* Espaciado (escala de 8px) */
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2rem;
	--space-5: 3rem;
	--space-6: 4.5rem;
	--space-7: 6rem;
	--space-8: 8rem;

	/* Bordes y sombras — minimalistas, casi planas */
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--shadow-sm: 0 1px 2px rgba(22, 24, 26, 0.05);
	--shadow-md: 0 4px 16px rgba(22, 24, 26, 0.08);
	--shadow-lg: 0 12px 32px rgba(22, 24, 26, 0.10);

	--container-width: 1180px;
	--transition: 180ms ease;
}

/* ---------- Reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	color: var(--color-text);
	background: var(--color-paper);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: 400;
	color: var(--color-ink-900);
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 var(--space-2);
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); font-weight: 500; }
p { margin: 0 0 var(--space-2); color: var(--color-text-muted); }

.eyebrow {
	display: block;
	font-size: var(--fs-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent);
	font-weight: 600;
	margin-bottom: var(--space-2);
}

/* ---------- Layout ---------- */
.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 var(--space-3);
}
.section { padding: var(--space-7) 0; }
.section--muted { background: var(--color-ink-100); }
.section__head {
	max-width: 620px;
	margin: 0 auto var(--space-5);
	text-align: center;
}
.section__head .eyebrow { text-align: center; }
.grid {
	display: grid;
	gap: var(--space-4);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Botones — minimalistas, sin gradientes ni sombras cargadas ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.9em 1.85em;
	border-radius: var(--radius-sm);
	font-weight: 500;
	font-size: var(--fs-sm);
	border: 1px solid transparent;
	white-space: nowrap;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn--primary {
	background: var(--color-ink-900);
	color: var(--color-white);
}
.btn--primary:hover { background: #000; }
.btn--secondary {
	background: transparent;
	color: var(--color-ink-900);
	border-color: var(--color-ink-900);
}
.btn--secondary:hover { background: var(--color-ink-900); color: var(--color-white); }
.btn--terracota {
	background: var(--color-accent);
	color: var(--color-white);
}
.btn--terracota:hover { background: #5a4938; }
.btn--whatsapp {
	background: #25d366;
	color: var(--color-white);
}

/* ---------- Cards — planas, con borde fino en vez de sombra pesada ---------- */
.card {
	background: var(--color-white);
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid var(--color-border);
	transition: border-color var(--transition), box-shadow var(--transition);
	display: flex;
	flex-direction: column;
}
.card:hover { border-color: var(--color-ink-500); box-shadow: var(--shadow-sm); }
.card__image { aspect-ratio: 4/3; overflow: hidden; background: var(--color-ink-100); }
.card__image img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.card__title { font-size: var(--fs-lg); margin-bottom: 0.25em; }
.card__title a:hover { color: var(--color-accent); }
.card__meta { font-size: var(--fs-xs); color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.card__footer { margin-top: auto; padding-top: var(--space-2); }

/* Badge de estado de curso */
.badge {
	display: inline-block;
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.03em;
	padding: 0.3em 0.85em;
	border-radius: var(--radius-sm);
	background: var(--color-white);
	border: 1px solid var(--color-border);
}
.badge--disponible { color: var(--color-ink-900); border-color: var(--color-ink-900); }
.badge--proximamente { color: var(--color-accent); border-color: var(--color-accent); }
.badge--finalizado { color: var(--color-ink-500); }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(250, 249, 246, 0.95);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-2) 0;
}
.site-header__brand { flex-shrink: 0; }
.site-header__logo {
	font-family: var(--font-heading);
	font-size: var(--fs-xl);
	color: var(--color-ink-900);
	white-space: nowrap;
}
.main-nav { flex: 1; display: flex; justify-content: center; }
.main-nav ul { display: flex; gap: var(--space-4); flex-wrap: nowrap; }
.main-nav a {
	font-size: var(--fs-sm);
	font-weight: 500;
	white-space: nowrap;
	padding: 0.25em 0;
	border-bottom: 1px solid transparent;
}
.main-nav a:hover { border-bottom-color: var(--color-accent); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.menu-toggle { display: none; font-size: 1.4rem; line-height: 1; }

/* ---------- Hero ---------- */
.hero {
	padding: var(--space-6) 0 var(--space-7);
	display: grid;
	grid-template-columns: 1fr 0.85fr;
	gap: var(--space-6);
	align-items: center;
}
.hero__content { max-width: 480px; }
.hero__actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); flex-wrap: wrap; }
.hero__image {
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border);
}
.hero__image img { aspect-ratio: 4/5; object-fit: cover; }

/* ---------- Footer ---------- */
.site-footer {
	background: var(--color-ink-900);
	color: var(--color-ink-300);
	padding: var(--space-6) 0 var(--space-3);
}
.site-footer a { color: var(--color-ink-300); }
.site-footer a:hover { color: var(--color-white); }
.footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-5); }
.footer__widget-title {
	color: var(--color-white);
	font-size: var(--fs-sm);
	font-family: var(--font-body);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--space-2);
}
.footer__nav ul li, .footer__legal ul li, .footer__contacto ul li { margin-bottom: 0.6em; }
.footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.1);
	padding-top: var(--space-3);
	display: flex;
	justify-content: space-between;
	font-size: var(--fs-xs);
	color: var(--color-ink-500);
	flex-wrap: wrap;
	gap: var(--space-1);
}

/* ---------- Formularios ---------- */
.form-field { margin-bottom: var(--space-2); }
.form-field label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 0.4em; }
.form-field input,
.form-field textarea,
.form-field select {
	width: 100%;
	padding: 0.8em 1em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-white);
}
.form-field input:focus,
.form-field textarea:focus { outline: 2px solid var(--color-ink-300); border-color: var(--color-ink-900); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
	padding: var(--space-2) var(--space-3);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}
.breadcrumbs a:hover { color: var(--color-accent); }
.breadcrumbs span:last-child { color: var(--color-ink-900); font-weight: 500; }

/* ---------- WhatsApp flotante ---------- */
.whatsapp-float {
	position: fixed;
	bottom: var(--space-3);
	right: var(--space-3);
	z-index: 60;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #25d366;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-md);
}

/* ---------- Utilidades ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* ==========================================================================
   RESPONSIVE — mobile-first
   ========================================================================== */
@media (max-width: 900px) {
	.hero { grid-template-columns: 1fr; text-align: center; padding-top: var(--space-4); }
	.hero__content { max-width: 100%; margin: 0 auto; }
	.hero__actions { justify-content: center; }
	.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr 1fr; }
	.footer__grid { grid-template-columns: 1fr 1fr; }
	.main-nav { display: none; }
	.menu-toggle { display: block; }
}

@media (max-width: 600px) {
	.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
	.footer__grid { grid-template-columns: 1fr; }
	h1 { font-size: var(--fs-3xl); }
	h2 { font-size: var(--fs-2xl); }
	.section { padding: var(--space-6) 0; }
}