/*
 * Finaurum — Design tokens + utilidades base reutilizables.
 * Ronda 1 (fundacion): SOLO el sistema base. Las 5 pantallas (single-course,
 * dashboard, player, checkout, thank-you) se estilizan en Ronda 2 usando estos
 * tokens/clases — no agregar reglas especificas de pantalla en este archivo.
 */

:root {
	--fin-verde: #009054;
	--fin-verde-dark: #007644;
	--fin-mostaza: #f6cc12;
	--fin-navy: #0c3c60;
	--fin-gray: #485460;
	--fin-coral: #f2ba9c;
	--fin-bg: #fdfdfd;
	--fin-bg-alt: #faf5ec;

	--fin-font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--fin-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Colores de acento por curso (defaults — Ronda 2 puede leer el meta _finaurum_color_acento por curso) */
	--fin-curso-1: var(--fin-verde);
	--fin-curso-2: var(--fin-mostaza);
	--fin-curso-3: var(--fin-navy);
	--fin-curso-4: var(--fin-coral);
	--fin-curso-5: #8b5cf6;
}

/* ==========================================================================
   Tipografia
   ========================================================================== */

.fin-h1,
h1.fin-h1 {
	font-family: var(--fin-font-heading);
	font-weight: 900;
	font-size: 62px;
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--fin-navy);
	margin: 0;
}

.fin-h2,
h2.fin-h2 {
	font-family: var(--fin-font-heading);
	font-weight: 700;
	font-size: 72px;
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--fin-navy);
	margin: 0;
}

.fin-h3,
h3.fin-h3 {
	font-family: var(--fin-font-heading);
	font-weight: 900;
	font-size: 42px;
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: var(--fin-navy);
	margin: 0;
}

.fin-body,
.fin-body-text {
	font-family: var(--fin-font-body);
	font-weight: 400;
	font-size: 21px;
	line-height: 1.6;
	color: var(--fin-gray);
}

@media (max-width: 1024px) {
	.fin-h1, h1.fin-h1 { font-size: 48px; }
	.fin-h2, h2.fin-h2 { font-size: 56px; }
	.fin-h3, h3.fin-h3 { font-size: 34px; }
}

@media (max-width: 768px) {
	.fin-h1, h1.fin-h1 { font-size: 38px; }
	.fin-h2, h2.fin-h2 { font-size: 40px; }
	.fin-h3, h3.fin-h3 { font-size: 28px; }
	.fin-body, .fin-body-text { font-size: 18px; }
}

/* ==========================================================================
   Cards
   ========================================================================== */

.fin-card {
	background: #ffffff;
	border-radius: 36px;
	border: 1px solid rgba(12, 60, 96, 0.05);
	box-shadow: 0 15px 45px rgba(12, 60, 96, 0.08);
	padding: 32px;
}

/* ==========================================================================
   Botones (CTA = pill)
   ========================================================================== */

.fin-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--fin-font-body);
	font-weight: 800;
	font-size: 18px;
	line-height: 1;
	padding: 18px 36px;
	border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}

.fin-btn-primary {
	background: var(--fin-verde);
	color: #ffffff;
}
.fin-btn-primary:hover {
	background: var(--fin-verde-dark);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 118, 68, 0.28);
	color: #ffffff;
}

.fin-btn-secondary {
	background: transparent;
	color: var(--fin-navy);
	border-color: var(--fin-navy);
}
.fin-btn-secondary:hover {
	background: var(--fin-navy);
	color: #ffffff;
}

.fin-btn-mostaza {
	background: var(--fin-mostaza);
	color: var(--fin-navy);
}
.fin-btn-mostaza:hover {
	filter: brightness(0.94);
	transform: translateY(-2px);
}

/* ==========================================================================
   Subrayado a mano (SVG inline bajo la palabra clave)
   Path oficial: M 1,4 C 25,6 65,1 99,5 C 75,7 35,6 2,8 — stroke #f6cc12, ancho ~3
   ========================================================================== */

.fin-underline {
	position: relative;
	display: inline-block;
}
.fin-underline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.14em;
	width: 100%;
	height: 13px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2010'%20preserveAspectRatio='none'%3E%3Cpath%20d='M%201,4%20C%2025,6%2065,1%2099,5%20C%2075,7%2035,6%202,8'%20fill='none'%20stroke='%23f6cc12'%20stroke-width='3'%20stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Variante por color de curso (usar junto con .fin-underline cuando el subrayado deba llevar el acento del curso en vez del mostaza fijo) */
.fin-underline-verde::after {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2010'%20preserveAspectRatio='none'%3E%3Cpath%20d='M%201,4%20C%2025,6%2065,1%2099,5%20C%2075,7%2035,6%202,8'%20fill='none'%20stroke='%23009054'%20stroke-width='3'%20stroke-linecap='round'/%3E%3C/svg%3E");
}
.fin-underline-navy::after {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2010'%20preserveAspectRatio='none'%3E%3Cpath%20d='M%201,4%20C%2025,6%2065,1%2099,5%20C%2075,7%2035,6%202,8'%20fill='none'%20stroke='%230c3c60'%20stroke-width='3'%20stroke-linecap='round'/%3E%3C/svg%3E");
}
.fin-underline-coral::after {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2010'%20preserveAspectRatio='none'%3E%3Cpath%20d='M%201,4%20C%2025,6%2065,1%2099,5%20C%2075,7%2035,6%202,8'%20fill='none'%20stroke='%23f2ba9c'%20stroke-width='3'%20stroke-linecap='round'/%3E%3C/svg%3E");
}
.fin-underline-violeta::after {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2010'%20preserveAspectRatio='none'%3E%3Cpath%20d='M%201,4%20C%2025,6%2065,1%2099,5%20C%2075,7%2035,6%202,8'%20fill='none'%20stroke='%238b5cf6'%20stroke-width='3'%20stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Utilidades minimas de color de fondo
   ========================================================================== */

.fin-bg { background-color: var(--fin-bg); }
.fin-bg-alt { background-color: var(--fin-bg-alt); }