/* Archivo: web/assets/css/theme.css | Resumen: tokens, reset y base de accesibilidad. */
:root {
  color-scheme: dark;
  --bg: #08090c;
  --bg-soft: #111216;
  --surface-card: rgb(14 16 21 / 0.68);
  --surface-card-hover: rgb(20 24 32 / 0.85);
  --surface-border: rgb(244 241 234 / 0.08);
  --surface-border-hover: rgb(197 232 168 / 0.35);
  --surface-pill: rgb(255 255 255 / 0.04);
  --badge-live-bg: rgb(74 222 128 / 0.12);
  --badge-live-border: rgb(74 222 128 / 0.3);
  --badge-live-text: #4ade80;
  --badge-dev-bg: rgb(250 204 21 / 0.12);
  --badge-dev-border: rgb(250 204 21 / 0.3);
  --badge-dev-text: #facc15;
  --badge-soon-bg: rgb(148 163 184 / 0.12);
  --badge-soon-border: rgb(148 163 184 / 0.25);
  --badge-soon-text: #94a3b8;
  --ink: #f4f1ea;
  --muted: #a4a69d;
  --line: rgb(244 241 234 / 0.12);
  --accent: #c5e8a8;
  --accent-ink: #14180f;
  --glow: rgb(197 232 168 / 0.18);
  --serif: "Fraunces", "Palatino Linotype", Palatino, serif;
  --sans: "Sora", "Segoe UI", sans-serif;
  --radius: 2px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
  --wrap: min(1180px, calc(100% - clamp(1.75rem, 5.5vw, 5rem)));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a, button { -webkit-tap-highlight-color: transparent; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

.wrap {
  width: var(--wrap);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  top: -120px;
  left: 1.25rem;
  z-index: 30;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.75rem 1.1rem;
}

.skip-link:focus { top: 0.6rem; }

.grain,
.glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.glow {
  z-index: 0;
  background:
    radial-gradient(ellipse at 16% 0%, rgb(197 232 168 / 0.2), transparent 46%),
    radial-gradient(ellipse at 88% 18%, rgb(90 110 88 / 0.28), transparent 40%);
}

.grain {
  z-index: 0;
  opacity: 0.11;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

@media (max-width: 720px) {
  .grain { opacity: 0.05; }
  :root { --wrap: min(1180px, calc(100% - 1.5rem)); }
}