:root {
  color-scheme: light;
  --surface: 250 249 245;
  --surface-card: 255 255 255;
  --surface-container: 239 238 234;
  --surface-container-low: 244 244 240;
  --surface-container-lowest: 255 255 255;
  --on-surface: 27 28 26;
  --text-muted: 117 116 112;
  --secondary: 94 94 94;
  --border-subtle: 235 234 229;
  --outline-variant: 196 199 199;
  --primary: 0 0 0;
  --on-primary: 255 255 255;
  --feature: 0 0 0;
  --on-feature: 255 255 255;
}

html.dark {
  color-scheme: dark;
  --surface: 20 19 17;
  --surface-card: 33 31 28;
  --surface-container: 53 48 42;
  --surface-container-low: 42 39 35;
  --surface-container-lowest: 26 25 23;
  --on-surface: 245 240 231;
  --text-muted: 190 181 169;
  --secondary: 210 200 187;
  --border-subtle: 70 62 54;
  --outline-variant: 123 112 99;
  --primary: 213 171 127;
  --on-primary: 31 25 20;
  --feature: 43 38 32;
  --on-feature: 245 240 231;
}

html.dark .bg-surface-card {
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.24), inset 0 0 0 1px rgb(var(--border-subtle) / 0.55);
}

html.dark .group.bg-surface-card:hover {
  box-shadow: 0 18px 38px rgb(0 0 0 / 0.32), inset 0 0 0 1px rgb(var(--primary) / 0.3);
  transform: translateY(-2px);
}

html.dark #filter-bar {
  box-shadow: inset 0 0 0 1px rgb(var(--border-subtle) / 0.45);
}

html.dark .bg-feature {
  box-shadow: 0 16px 36px rgb(0 0 0 / 0.24), inset 0 0 0 1px rgb(var(--primary) / 0.18);
}

html.dark #panel-inicio > section {
  background-image: radial-gradient(circle at 88% 8%, rgb(var(--primary) / 0.13), transparent 50%);
}

@layer base {
  html, body { margin: 0; padding: 0; }
  body { overscroll-behavior: none; }
  main > :first-child { margin-top: 0 !important; }
  main > :last-child { margin-bottom: 0 !important; }
}

::-webkit-scrollbar { display: none; }

#language-switcher a:hover,
#language-switcher a[aria-current="page"] {
  color: rgb(var(--on-surface));
}

#language-switcher a[aria-current="page"] {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@keyframes tab-panel-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.tab-panel-enter { animation: tab-panel-enter 220ms ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .tab-panel-enter { animation: none; }
  html.dark .group.bg-surface-card:hover { transform: none; }
}