@theme {
	--color-primary: #0b3157;
	--color-primary-50: #eef7fb;
	--color-primary-100: #dceef5;
	--color-primary-500: #16a34a;
	--color-primary-600: #0b8f43;
	--color-primary-700: #087337;
	--color-primary-900: #062542;
	--color-secondary: #475569;
	--color-secondary-50: #f8fafc;
	--color-secondary-100: #f1f5f9;
	--color-secondary-200: #e2e8f0;
	--color-secondary-300: #cbd5e1;
	--color-secondary-500: #64748b;
	--color-secondary-600: #475569;
	--color-secondary-700: #334155;
	--color-secondary-900: #0f172a;
	--color-neutral: #10243b;
	--color-background: #ffffff;
	--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-serif: Georgia, "Times New Roman", serif;
	--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
	--text-sm: .875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.25rem;
	--text-5xl: 3rem;
}

@layer base {
	html { scroll-behavior: smooth; }
	body { margin: 0; background: #fff; color: #10243b; font-family: var(--font-sans); }
	a { transition: color .2s ease, background-color .2s ease, transform .2s ease; }
}

@layer components {
	.fx-container, .fx-wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
	.fx-page-main { background:#f5f9fb; padding:56px 0 76px; min-height:60vh; }
	.fx-content-page { width:min(900px, calc(100% - 40px)); }
	.fx-content-card { background:#fff; border:1px solid #e0e8ee; border-radius:16px; box-shadow:0 8px 28px rgba(12,42,67,.07); padding:48px 56px; }
	.fx-content-header { margin-bottom:32px; }
	.fx-content-header h1, .fx-archive-header h1 { margin:0; color:#0b3157; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.2rem,4vw,3.6rem); line-height:1.08; letter-spacing:-.025em; }
	.fx-byline { margin:12px 0 0; color:#64788a; font-size:.95rem; }
	.fx-content-image { margin:0 0 32px; }
	.fx-content-image img { display:block; width:100%; height:auto; border-radius:12px; }
	.fx-prose { color:#31485d; font-size:1.08rem; line-height:1.8; }
	.fx-prose p { margin:0 0 1.25em; }
	.fx-prose h2 { margin:2em 0 .7em; color:#0b3157; font-family:Georgia,"Times New Roman",serif; font-size:1.75rem; line-height:1.2; }
	.fx-prose h3 { margin:1.6em 0 .55em; color:#0b3157; font-size:1.25rem; }
	.fx-prose ul, .fx-prose ol { margin:0 0 1.3em 1.25em; padding-left:1em; }
	.fx-prose li { margin:.45em 0; }
	.fx-prose a { color:#087337; font-weight:650; }
	.fx-prose img { max-width:100%; height:auto; border-radius:10px; }
	.fx-post-nav { display:flex; justify-content:space-between; gap:20px; margin-top:28px; }
	.fx-post-nav a { flex:1; padding:18px 20px; border:1px solid #dce5eb; border-radius:10px; background:#fff; color:#0b3157; text-decoration:none; font-weight:700; }
	.fx-post-nav a.next { text-align:right; }
	.fx-archive-header { margin-bottom:24px; }
	.fx-archive-desc { margin-top:14px; color:#5d7284; line-height:1.6; }
	.fx-archive-list { display:grid; gap:18px; }
	.fx-archive-item { background:#fff; border:1px solid #e0e8ee; border-radius:14px; padding:28px 34px; box-shadow:0 5px 18px rgba(12,42,67,.05); }
	.fx-archive-item h2 { margin:5px 0 10px; font-family:Georgia,"Times New Roman",serif; font-size:1.7rem; line-height:1.25; }
	.fx-archive-item h2 a { color:#0b3157; text-decoration:none; }
	.fx-archive-item h2 a:hover { color:#087337; }
	.fx-archive-item .fx-prose { font-size:1rem; line-height:1.65; }
	.fx-hero { position:relative; overflow:hidden; min-height:560px; color:#fff; background:#082b4d; }
	.fx-hero::before { content:""; position:absolute; inset:0; background-image:url('https://fitnovax.com/wp-content/uploads/2026/08/FitNovaX-salud-y-bienestar.jpg'); background-size:cover; background-position:center right; }
	.fx-hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,31,56,.97) 0%,rgba(6,40,69,.88) 40%,rgba(6,40,69,.28) 78%,rgba(6,40,69,.18) 100%); }
	.fx-hero-inner { position:relative; min-height:455px; display:grid; grid-template-columns:1fr 1fr; align-items:center; }
	.fx-hero-copy { max-width:610px; padding:70px 0 30px; }
	.fx-kicker { margin:0 0 14px; color:#36d96a; font-weight:800; font-size:.78rem; letter-spacing:.14em; }
	.fx-hero h1 { margin:0; color:#fff; font-size:clamp(2.5rem,5vw,4.4rem); line-height:1.04; letter-spacing:-.035em; }
	.fx-lead { max-width:650px; margin:22px 0 28px; color:#e9f2f8; font-size:1.2rem; line-height:1.6; }
	.fx-button { display:inline-flex; align-items:center; gap:12px; padding:14px 22px; border-radius:8px; background:#16b94d; color:#fff; font-weight:800; text-decoration:none; box-shadow:0 8px 20px rgba(0,0,0,.18); }
	.fx-button:hover { background:#12a443; transform:translateY(-1px); color:#fff; }
	.fx-hero-photo { min-height:420px; }
	.fx-benefits { position:relative; display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid rgba(255,255,255,.25); padding:20px 0 22px; }
	.fx-benefits div { display:flex; align-items:center; justify-content:center; gap:10px; min-height:54px; border-right:1px solid rgba(255,255,255,.3); text-align:center; }
	.fx-benefits div:last-child { border-right:0; }
	.fx-benefits span { color:#35df68; font-size:1.7rem; }
	.fx-benefits strong { font-size:.9rem; line-height:1.2; }
	.fx-section { padding:72px 0 80px; background:#fff; }
	.fx-section-heading { text-align:center; margin:0 auto 38px; }
	.fx-section-heading h2, .fx-about-strip h2 { margin:0; color:#0b3157; font-size:clamp(2rem,3.5vw,3rem); letter-spacing:-.025em; }
	.fx-section-heading h2::after { content:""; display:block; width:58px; height:3px; margin:14px auto 0; background:#16b94d; }
	.fx-section-heading p { margin:14px auto 0; color:#52677b; max-width:720px; font-size:1.05rem; }
	.fx-area-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
	.fx-area-card { overflow:hidden; border:1px solid #e3ebf0; border-radius:14px; background:#fff; box-shadow:0 7px 24px rgba(12,42,67,.08); text-decoration:none; color:#10243b; }
	.fx-area-card:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(12,42,67,.13); }
	.fx-area-image { height:135px; background-size:cover; background-position:center; }
	.fx-metabolism { background-image:linear-gradient(135deg,rgba(5,52,89,.12),rgba(22,185,77,.12)),url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&w=900&q=80'); }
	.fx-nutrition { background-image:url('https://images.unsplash.com/photo-1546069901-ba9599a7e63c?auto=format&fit=crop&w=900&q=80'); }
	.fx-weight { background-image:url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?auto=format&fit=crop&w=900&q=80'); }
	.fx-abdomen { background-image:url('https://images.unsplash.com/photo-1538805060514-97d9cc17730c?auto=format&fit=crop&w=900&q=80'); }
	.fx-card-body { padding:18px; }
	.fx-card-body h3 { margin:0 0 8px; color:#0b3157; font-size:1.25rem; }
	.fx-card-body p { margin:0 0 13px; color:#52677b; line-height:1.5; font-size:.93rem; }
	.fx-card-body span { color:#087337; font-weight:800; font-size:.9rem; }
	.fx-trust { margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
	.fx-trust > div { padding:20px 22px; border-radius:12px; background:#eef9f0; border:1px solid #d5f0d9; }
	.fx-trust strong { color:#0b3157; font-size:1.05rem; }
	.fx-trust p { margin:7px 0 0; color:#50677a; }
	.fx-featured { padding:68px 0; background:#f5f9fb; }
	.fx-section-heading.fx-left { text-align:left; margin-bottom:26px; }
	.fx-section-heading.fx-left h2::after { margin:12px 0 0; }
	.fx-post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
	.fx-post-grid a { padding:25px; border:1px solid #e0e8ee; border-radius:12px; background:#fff; text-decoration:none; box-shadow:0 5px 18px rgba(12,42,67,.05); }
	.fx-post-grid a:hover { transform:translateY(-2px); }
	.fx-post-grid span { color:#0b8f43; font-weight:800; font-size:.72em; letter-spacing:.12em; }
	.fx-post-grid h3 { margin:9px 0 8px; color:#0b3157; font-size:1.3rem; line-height:1.25; }
	.fx-post-grid p { margin:0; color:#607487; line-height:1.5; }
	.fx-about-strip { padding:62px 0; background:#0b3157; color:#fff; }
	.fx-about-inner { display:flex; align-items:center; justify-content:space-between; gap:35px; }
	.fx-about-strip h2 { color:#fff; max-width:760px; }
	.fx-about-strip .fx-kicker { margin-bottom:8px; }
	.fx-outline { flex:0 0 auto; border:1px solid #37d967; color:#fff; padding:13px 20px; border-radius:8px; text-decoration:none; font-weight:800; }
	.fx-outline:hover { background:#16b94d; color:#fff; }
	@media (max-width:900px) {
		.fx-hero-inner { grid-template-columns:1fr; min-height:500px; }
		.fx-hero::before { background-position:center; }
		.fx-hero-overlay { background:linear-gradient(90deg,rgba(4,31,56,.9),rgba(6,40,69,.58)); }
		.fx-hero-copy { padding:65px 0 20px; }
		.fx-hero-photo { display:none; }
		.fx-area-grid { grid-template-columns:repeat(2,1fr); }
	}
	@media (max-width:640px) {
		.fx-container, .fx-wrap, .fx-content-page { width:min(100% - 28px,1180px); }
		.fx-content-card { padding:30px 22px; border-radius:12px; }
		.fx-page-main { padding:34px 0 52px; }
		.fx-content-header h1, .fx-archive-header h1 { font-size:2.2rem; }
		.fx-prose { font-size:1rem; line-height:1.72; }
		.fx-hero { min-height:0; }
		.fx-hero-inner { min-height:470px; }
		.fx-hero h1 { font-size:2.55rem; }
		.fx-lead { font-size:1rem; }
		.fx-benefits { grid-template-columns:repeat(2,1fr); gap:8px; }
		.fx-benefits div { border-right:0; border-bottom:1px solid rgba(255,255,255,.18); }
		.fx-area-grid, .fx-post-grid, .fx-trust { grid-template-columns:1fr; }
		.fx-section { padding:52px 0 60px; }
		.fx-about-inner { flex-direction:column; align-items:flex-start; }
		.fx-post-nav { flex-direction:column; }
	}
}