/* Prototipo F · la estructura de A con los colores de C: blanco hueso, salvia, verde matcha, tinta verdosa */
:root {
  --bg: #f4f5f0; --bg-2: #e8ebe3; --card: #ffffff; --line: #dde1d6; --line-2: #c3cab9;
  --text: #2c332b; --muted: #687064; --copper: #6f8a3a; --caramel: #6f8a3a; --caramel-hover: #5e7631; --on-caramel: #fbfcf7;
  --glass: #ffffff; --shadow: 0 40px 80px -40px rgb(40 55 35 / .35);
  color-scheme: light;
}
body::before { opacity: .035; }
.nav { background: color-mix(in srgb, var(--bg) 86%, transparent); }
.hero::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--copper) 14%, transparent), transparent); }
.hero-art img { mask-image: none; border: 0; box-shadow: var(--shadow); }
.pill-btn:hover { background: var(--caramel-hover); box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--caramel) 60%, transparent); }
.o-card { box-shadow: 0 24px 40px -30px rgb(60 45 25 / .35); }
.o-body { background: color-mix(in srgb, var(--card) 82%, transparent); border-color: color-mix(in srgb, var(--line) 70%, transparent); }
.opt:hover { background: color-mix(in srgb, var(--copper) 8%, transparent); }
.wl input { background: var(--card); }
.wait-card { background: radial-gradient(80% 100% at 50% 0%, color-mix(in srgb, var(--copper) 12%, transparent), transparent), var(--bg-2); }
.modal::backdrop { background: rgb(30 28 22 / .45); }
.m-item img { border: 1px solid var(--line); }
.q-card { background: var(--card); box-shadow: 0 30px 60px -45px rgb(60 45 25 / .4); }
.quiz-sec { background: var(--bg-2); }
.origins { background: linear-gradient(180deg, var(--bg), var(--bg-2)); }
.x { background: var(--card); }
.lineart { stroke: #6f8a3a; opacity: .15; }