/* ─── FINSANITY — Landing ─────────────────────────────────────────────────────
   Tokens `--fp-*` copiados 1:1 de ../app/src/app.css (light + dark).
   Brand: slate #1E293B + cyan #06B6D4 (dark #22D3EE). Semánticos (success /
   warning / danger) SOLO para señales de salud financiera.
   ─────────────────────────────────────────────────────────────────────────── */

:root,
[data-theme="light"] {
	/* Surfaces */
	--fp-bg:        #FCFCFD;
	--fp-bg-alt:    #F4F6F9;
	--fp-bg-card:   #FFFFFF;

	/* Text */
	--fp-txt:       #0E1729;
	--fp-txt-soft:  #475569;
	--fp-txt-muted: #64748B;
	--fp-txt-faint: #94A3B8;

	/* Lines */
	--fp-line:      #E6EAEF;
	--fp-line-soft: #EDF0F4;
	--fp-focus:     #06B6D4;

	/* Semantic — financial health only */
	--fp-success:   #16A34A;
	--fp-warning:   #D97706;
	--fp-danger:    #DC2626;
	--fp-info:      #3B82F6;

	/* Brand */
	--fp-brand:     #06B6D4;
	--fp-brand-dim: #CFFAFE;
	--fp-brand-fg:  #FFFFFF;
	--fp-ink:       #1E293B;

	--fp-scrim:     rgba(13, 20, 33, 0.42);

	/* Hero — superficie oscura FIJA (igual en light y dark). */
	--fp-hero-from:           #0F1A2E;
	--fp-hero-to:             #1E293B;
	--fp-hero-txt:            #FFFFFF;
	--fp-hero-value:          #E2E8F0;
	--fp-hero-soft:           #CBD5E1;
	--fp-hero-muted:          #94A3B8;
	--fp-hero-faint:          #475569;
	--fp-hero-glow:           rgba(6, 182, 212, 0.18);
	--fp-hero-divider:        rgba(255, 255, 255, 0.08);
	--fp-hero-overlay:        rgba(255, 255, 255, 0.06);
	--fp-hero-overlay-hover:  rgba(255, 255, 255, 0.10);
	--fp-hero-overlay-strong: rgba(255, 255, 255, 0.16);

	/* Landing-only (derivados, no existen en la app) */
	--lp-header-bg: rgba(252, 252, 253, 0.82);
	--lp-shadow:    0 1px 2px rgba(14, 23, 41, 0.04), 0 8px 24px rgba(14, 23, 41, 0.06);
	--lp-shadow-lg: 0 24px 60px -12px rgba(14, 23, 41, 0.35);

	--radius-xl:  0.75rem;
	--radius-2xl: 1rem;
	--font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

	color-scheme: light;
}

[data-theme="dark"] {
	--fp-bg:        #0A0E14;
	--fp-bg-alt:    #0F141C;
	--fp-bg-card:   #121823;

	--fp-txt:       #E7ECF3;
	--fp-txt-soft:  #B8C2D0;
	--fp-txt-muted: #8A97A8;
	--fp-txt-faint: #5B6677;

	--fp-line:      #1C2530;
	--fp-line-soft: #1C2530;
	--fp-focus:     #22D3EE;

	--fp-success:   #22C55E;
	--fp-warning:   #F59E0B;
	--fp-danger:    #EF4444;
	--fp-info:      #60A5FA;

	--fp-brand:     #22D3EE;
	--fp-brand-dim: #0E3A44;
	--fp-brand-fg:  #06141A;
	--fp-ink:       #1E293B;

	--fp-scrim:     rgba(2, 6, 12, 0.62);

	--lp-header-bg: rgba(10, 14, 20, 0.82);
	--lp-shadow:    0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
	--lp-shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, 0.6);

	color-scheme: dark;
}

/* ─── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 5rem;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	line-height: 1.6;
	background-color: var(--fp-bg);
	color: var(--fp-txt);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

.tnum {
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1, 'cv01' 1;
}

:focus-visible {
	outline: 2px solid var(--fp-focus);
	outline-offset: 2px;
	border-radius: 4px;
}

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

.skip-link {
	position: absolute;
	left: 1rem; top: -3rem;
	z-index: 100;
	padding: 0.5rem 0.875rem;
	border-radius: var(--radius-xl);
	background: var(--fp-ink);
	color: #FFFFFF;
	font-size: 0.875rem;
	font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.container {
	width: 100%;
	max-width: 1120px;
	margin-inline: auto;
	padding-inline: 16px;
}

@media (min-width: 768px) {
	.container { padding-inline: 24px; }
}

/* ─── Brand (geometría de brand/logo-mark.svg; colores por token) ─────────── */
.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.brand-mark { flex-shrink: 0; }
.brand-mark rect { fill: var(--fp-ink); }
.brand-mark path { fill: none; stroke: var(--fp-brand); }
.brand-word {
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--fp-txt);
}

/* ─── Botones (inputs/botones rounded-xl, como la app) ────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.625rem 1.125rem;
	border: 1px solid transparent;
	border-radius: var(--radius-xl);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 150ms, border-color 150ms, color 150ms, transform 150ms;
}
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 2.25rem; padding: 0.5rem 0.875rem; font-size: 0.875rem; }
.btn-lg { min-height: 3.25rem; padding: 0.875rem 1.5rem; font-size: 1rem; }

/* Primario = bg-ink text-white (botón "Entrar" de la app). */
.btn-primary { background: var(--fp-ink); color: #FFFFFF; }
.btn-primary:hover { background: #0F1A2E; }
[data-theme="dark"] .btn-primary { background: var(--fp-brand); color: var(--fp-brand-fg); }
[data-theme="dark"] .btn-primary:hover { background: #67E8F9; }

.btn-ghost { border-color: var(--fp-line); color: var(--fp-txt); background: transparent; }
.btn-ghost:hover { background: var(--fp-bg-alt); }

/* Sobre superficie oscura fija (hero / CTA final). */
.btn-brand { background: #22D3EE; color: #06141A; }
.btn-brand:hover { background: #67E8F9; }
.btn-on-dark {
	border-color: var(--fp-hero-overlay-strong);
	background: var(--fp-hero-overlay);
	color: var(--fp-hero-txt);
}
.btn-on-dark:hover { background: var(--fp-hero-overlay-hover); }

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--fp-line);
	border-radius: var(--radius-xl);
	background: transparent;
	color: var(--fp-txt-soft);
	cursor: pointer;
	transition: background-color 150ms, color 150ms;
}
.icon-btn:hover { background: var(--fp-bg-alt); color: var(--fp-txt); }
.icon-btn[hidden] { display: none; }

/* Toggle: muestra luna en light y sol en dark. */
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ─── Header ──────────────────────────────────────────────────────────────── */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--lp-header-bg);
	border-bottom: 1px solid var(--fp-line-soft);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
}
.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	height: 4rem;
}
.nav-links { display: none; }
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.header-login { display: none; }

@media (min-width: 900px) {
	.nav-links {
		display: flex;
		gap: 1.75rem;
		font-size: 0.875rem;
		font-weight: 500;
		color: var(--fp-txt-soft);
	}
	.nav-links a:hover { color: var(--fp-txt); }
	.header-login { display: inline-flex; }
}

/* ─── Tipografía de secciones ─────────────────────────────────────────────── */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: var(--fp-brand-dim);
	color: #0E7490;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}
[data-theme="dark"] .eyebrow { color: var(--fp-brand); }
.eyebrow-dot {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 999px;
	background: var(--fp-brand);
}

.accent { color: var(--fp-brand); }
[data-theme="light"] .accent,
:root:not([data-theme]) .accent { color: #0891B2; } /* AA sobre fondo claro */

.section { padding-block: 4.5rem; }
.section-alt { background: var(--fp-bg-alt); }
@media (min-width: 768px) {
	.section { padding-block: 6.5rem; }
}

.section-head {
	max-width: 40rem;
	margin-bottom: 2.5rem;
}
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 {
	margin-top: 1rem;
	font-size: clamp(1.75rem, 4.5vw, 2.5rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.03em;
}
.section-head p {
	margin-top: 1rem;
	font-size: 1.0625rem;
	color: var(--fp-txt-soft);
}

/* ─── Hero de la landing ──────────────────────────────────────────────────── */
.lp-hero {
	position: relative;
	padding-block: 3rem 4.5rem;
	overflow: hidden;
}
.lp-hero::before {
	content: '';
	position: absolute;
	top: -18rem;
	right: -14rem;
	width: 44rem;
	height: 44rem;
	border-radius: 999px;
	background: radial-gradient(circle, var(--fp-hero-glow), transparent 65%);
	pointer-events: none;
}
.lp-hero-grid {
	position: relative;
	display: grid;
	gap: 3rem;
	align-items: center;
}
.lp-hero h1 {
	margin-top: 1.25rem;
	font-size: clamp(2.25rem, 7vw, 3.75rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.04em;
}
.lp-hero-lead {
	margin-top: 1.25rem;
	max-width: 34rem;
	font-size: 1.125rem;
	color: var(--fp-txt-soft);
}
.lp-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}
.lp-hero-note {
	margin-top: 1rem;
	font-size: 0.8125rem;
	color: var(--fp-txt-muted);
}

@media (min-width: 960px) {
	.lp-hero { padding-block: 5rem 7rem; }
	.lp-hero-grid { grid-template-columns: 1fr 1.05fr; gap: 4rem; }
}

/* ─── Réplica del Hero Safe-to-Spend (Hero.svelte) ────────────────────────── */
.fp-hero {
	position: relative;
	overflow: hidden;
	padding: 1.5rem;
	border-radius: var(--radius-2xl);
	background: linear-gradient(135deg, var(--fp-hero-from) 0%, var(--fp-hero-to) 100%);
	color: var(--fp-hero-txt);
	box-shadow: var(--lp-shadow-lg);
}
.fp-hero::before {
	content: '';
	position: absolute;
	top: -2.5rem;
	right: -2.5rem;
	width: 13rem;
	height: 13rem;
	border-radius: 999px;
	background: radial-gradient(circle, var(--fp-hero-glow), transparent 70%);
	pointer-events: none;
}
.fp-hero > * { position: relative; }

.fp-eq {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	font-size: 0.875rem;
}
.fp-metric-label {
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--fp-hero-muted);
}
.fp-metric-value { font-weight: 700; color: var(--fp-hero-value); }
.fp-metric-value.total { color: var(--fp-hero-txt); }
.fp-op { color: var(--fp-hero-faint); }

.fp-divider {
	height: 1px;
	margin-block: 1.25rem;
	background: var(--fp-hero-divider);
}

.fp-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
}
.fp-status {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.375rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--fp-hero-soft);
}
.fp-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #22C55E; }
.fp-daily {
	font-size: clamp(48px, 9vw, 74px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: #FFFFFF;
}
.fp-daily-unit {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--fp-hero-muted);
}
.fp-caption { margin-top: 0.5rem; font-size: 0.75rem; color: var(--fp-hero-muted); }

.fp-next { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; text-align: right; }
.fp-next-amount { font-size: 1.25rem; font-weight: 700; color: var(--fp-hero-txt); }
.fp-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	background: rgba(34, 197, 94, 0.16);
	color: #86EFAC;
	font-size: 0.75rem;
	font-weight: 600;
}
.fp-pill.alert { background: rgba(239, 68, 68, 0.16); color: #FCA5A5; }

@media (max-width: 479px) {
	.fp-next { align-items: flex-start; text-align: left; }
}

/* Escena del hero: card principal + mini-tarjetas flotantes. */
.hero-scene { position: relative; }
.hero-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	margin-top: 1rem;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--fp-line);
	border-radius: var(--radius-xl);
	background: var(--fp-bg-card);
	box-shadow: var(--lp-shadow);
	font-size: 0.8125rem;
	color: var(--fp-txt-soft);
}
.hero-chip strong { color: var(--fp-txt); font-weight: 700; }
.hero-chip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 0.5rem;
	background: var(--fp-brand-dim);
	color: var(--fp-brand);
}
@media (min-width: 960px) {
	.hero-chip { position: absolute; margin: 0; }
	.hero-chip.chip-a { left: -2rem; bottom: -1.75rem; }
	.hero-chip.chip-b { right: -1rem; top: -1.5rem; }
}

/* ─── Cards genéricas (rounded-2xl, como la app) ──────────────────────────── */
.card {
	padding: 1.5rem;
	border: 1px solid var(--fp-line);
	border-radius: var(--radius-2xl);
	background: var(--fp-bg-card);
	box-shadow: var(--lp-shadow);
}
.card h3 {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.card p {
	margin-top: 0.5rem;
	font-size: 0.9375rem;
	color: var(--fp-txt-soft);
}

.grid { display: grid; gap: 1rem; }
@media (min-width: 640px) {
	.grid-2, .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.grid { gap: 1.25rem; }
	.grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 1rem;
	border-radius: var(--radius-xl);
	background: var(--fp-brand-dim);
	color: #0891B2;
}
[data-theme="dark"] .feature-icon { color: var(--fp-brand); }

/* ─── Problema (citas) ────────────────────────────────────────────────────── */
.quote {
	position: relative;
	padding-left: 1.25rem;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--fp-txt);
	letter-spacing: -0.01em;
}
.quote::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.25rem;
	bottom: 0.25rem;
	width: 3px;
	border-radius: 999px;
	background: var(--fp-brand);
}

/* ─── Cómo funciona ───────────────────────────────────────────────────────── */
.steps { counter-reset: step; }
.step { counter-increment: step; }
.step::before {
	content: counter(step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-bottom: 1rem;
	border-radius: 999px;
	background: var(--fp-ink);
	color: #FFFFFF;
	font-size: 0.875rem;
	font-weight: 700;
}
[data-theme="dark"] .step::before { background: var(--fp-brand); color: var(--fp-brand-fg); }

.formula {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 0.75rem;
	margin-top: 2.5rem;
	padding: 1.25rem;
	border: 1px dashed var(--fp-line);
	border-radius: var(--radius-2xl);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--fp-txt-soft);
	text-align: center;
}
.formula .op { color: var(--fp-txt-faint); }
.formula .result { color: var(--fp-txt); font-weight: 800; }

/* ─── Showcase (split texto + demo) ───────────────────────────────────────── */
.showcase {
	display: grid;
	gap: 2.5rem;
	align-items: center;
}
.showcase + .showcase { margin-top: 5rem; }
.showcase h3 {
	margin-top: 1rem;
	font-size: clamp(1.5rem, 3.5vw, 2rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.03em;
}
.showcase p { margin-top: 1rem; color: var(--fp-txt-soft); }
.checklist { margin-top: 1.25rem; display: grid; gap: 0.625rem; }
.checklist li {
	display: flex;
	gap: 0.625rem;
	font-size: 0.9375rem;
	color: var(--fp-txt-soft);
}
.checklist svg { flex-shrink: 0; margin-top: 0.2rem; color: var(--fp-brand); }

@media (min-width: 960px) {
	.showcase { grid-template-columns: 1fr 1fr; gap: 4rem; }
	.showcase.reverse > :first-child { order: 2; }
}

/* ─── Wallet: CardTile "Logo-Integrated Stripe" ───────────────────────────── */
.wallet-stack { display: grid; gap: 1rem; max-width: 26rem; margin-inline: auto; width: 100%; }
.card-tile {
	overflow: hidden;
	border: 1px solid var(--fp-line);
	border-radius: var(--radius-2xl);
	background: var(--fp-bg-card);
	box-shadow: var(--lp-shadow);
}
.card-tile-head {
	display: flex;
	align-items: center;
	padding: 1rem 1rem 0;
}
.card-tile-bank {
	margin-right: 0.5rem;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--bank, var(--fp-ink));
}
.card-tile-stripe {
	flex: 1;
	height: 4px;
	border-radius: 999px;
	background: var(--bank, var(--fp-ink));
}
.card-tile-body { padding: 0.75rem 1rem 1rem; display: grid; gap: 0.75rem; }
.card-tile-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
}
.card-tile-name { font-size: 0.875rem; font-weight: 700; color: var(--fp-txt); }
.badge {
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 600;
	white-space: nowrap;
}
.badge-danger  { background: color-mix(in srgb, var(--fp-danger) 10%, transparent);  color: var(--fp-danger); }
.badge-warning { background: color-mix(in srgb, var(--fp-warning) 10%, transparent); color: var(--fp-warning); }
.card-tile-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
}
.stat-label { font-size: 0.6875rem; color: var(--fp-txt-muted); }
.stat-value { font-size: 0.875rem; font-weight: 700; color: var(--fp-txt); }
.stat-value.success { color: var(--fp-success); }
.limit-bar {
	height: 6px;
	border-radius: 999px;
	background: var(--fp-bg-alt);
	overflow: hidden;
}
.limit-bar span { display: block; height: 100%; border-radius: 999px; }
.limit-bar .success { background: var(--fp-success); }
.limit-bar .warning { background: var(--fp-warning); }
.limit-caption {
	display: flex;
	justify-content: space-between;
	margin-top: 0.375rem;
	font-size: 0.6875rem;
	color: var(--fp-txt-muted);
}

/* ─── MiniCalendar demo (dots: azul = gasto, verde = ingreso) ─────────────── */
.mini-cal {
	max-width: 26rem;
	margin-inline: auto;
	width: 100%;
}
.mini-cal-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 0.875rem;
}
.mini-cal-title { font-size: 0.9375rem; font-weight: 700; }
.mini-cal-legend { display: flex; gap: 0.75rem; font-size: 0.6875rem; color: var(--fp-txt-muted); }
.mini-cal-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.mini-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.25rem;
	text-align: center;
}
.mini-cal-dow { font-size: 0.6875rem; font-weight: 600; color: var(--fp-txt-faint); padding-bottom: 0.25rem; }
.mini-cal-day {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	padding: 0.375rem 0 0.5rem;
	border-radius: 0.625rem;
	font-size: 0.8125rem;
	color: var(--fp-txt-soft);
}
.mini-cal-day.out { color: var(--fp-txt-faint); opacity: 0.5; }
.mini-cal-day.today { background: var(--fp-ink); color: #FFFFFF; font-weight: 700; }
[data-theme="dark"] .mini-cal-day.today { background: var(--fp-brand); color: var(--fp-brand-fg); }
.mini-cal-day.selected { outline: 2px solid var(--fp-brand); outline-offset: -2px; }
.dots { display: flex; gap: 3px; height: 5px; }
.dot { width: 5px; height: 5px; border-radius: 999px; }
.dot-expense { background: var(--fp-info); }
.dot-income  { background: var(--fp-success); }

.mini-cal-events { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--fp-line-soft); display: grid; gap: 0.625rem; }
.event {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 0.8125rem;
}
.event-name { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--fp-txt-soft); }
.event-amount { font-weight: 700; color: var(--fp-txt); }
.event-amount.income { color: var(--fp-success); }

/* ─── Rescate (estado alerta del hero) ────────────────────────────────────── */
.fp-hero .fp-daily.alert { color: #F87171; }
.fp-hero .fp-dot.alert { background: #EF4444; }
.fp-rescue {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--fp-hero-divider);
}
.fp-rescue-title { margin-bottom: 0.5rem; font-size: 0.75rem; font-weight: 600; color: var(--fp-hero-soft); }
.fp-rescue-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fp-rescue-actions span {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--fp-hero-overlay-strong);
	border-radius: var(--radius-xl);
	background: var(--fp-hero-overlay);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--fp-hero-txt);
}

/* ─── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { max-width: 46rem; margin-inline: auto; display: grid; gap: 0.75rem; }
.faq details {
	border: 1px solid var(--fp-line);
	border-radius: var(--radius-2xl);
	background: var(--fp-bg-card);
}
.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.125rem 1.25rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: '+';
	flex-shrink: 0;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1;
	color: var(--fp-txt-muted);
	transition: transform 150ms;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 1.25rem 1.25rem; color: var(--fp-txt-soft); font-size: 0.9375rem; }

/* ─── CTA final (superficie hero oscura + glow, como og-image) ────────────── */
.cta-final {
	position: relative;
	overflow: hidden;
	padding: 3rem 1.5rem;
	border-radius: var(--radius-2xl);
	background: linear-gradient(135deg, var(--fp-hero-from) 0%, var(--fp-hero-to) 100%);
	color: var(--fp-hero-txt);
	text-align: center;
}
.cta-final::before {
	content: '';
	position: absolute;
	top: -12rem;
	right: -10rem;
	width: 30rem;
	height: 30rem;
	border-radius: 999px;
	background: radial-gradient(circle, rgba(6, 182, 212, 0.28), transparent 70%);
	pointer-events: none;
}
.cta-final > * { position: relative; }
.cta-final .rule {
	width: 4rem;
	height: 4px;
	margin: 1.5rem auto 0;
	border-radius: 999px;
	background: #22D3EE;
}
.cta-final h2 {
	margin-top: 1.5rem;
	font-size: clamp(1.75rem, 5vw, 2.75rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.035em;
}
.cta-final p { margin: 1rem auto 0; max-width: 32rem; color: var(--fp-hero-soft); }
.cta-final .lp-hero-ctas { justify-content: center; }
@media (min-width: 768px) {
	.cta-final { padding: 5rem 3rem; }
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
	padding-block: 2.5rem;
	border-top: 1px solid var(--fp-line-soft);
	font-size: 0.875rem;
	color: var(--fp-txt-muted);
}
.footer-inner {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-links a:hover { color: var(--fp-txt); }
@media (min-width: 768px) {
	.footer-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ─── Motion ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ─── Variantes sin estilos inline (CSP: style-src sin 'unsafe-inline') ───── */
.card-tile.bank-bbva { --bank: #004481; } /* primaryColor del catálogo de la app */
.card-tile.bank-nu   { --bank: #820ad1; }
.card-tile-balance {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--fp-txt);
}
.limit-bar .pct-21 { width: 21%; }
.limit-bar .pct-41 { width: 41%; }

/* Mark sobre superficie oscura (igual que og-image.svg). */
.brand-mark.on-dark { margin-inline: auto; }
.brand-mark.on-dark rect { stroke: #334155; stroke-width: 12; }
.brand-mark.on-dark path { stroke: #22D3EE; }

.site-footer .brand-word { font-size: 1rem; }