/* Bosques de Molco — Sistema de diseño */

:root {
  /* Paleta cálida/orgánica */
  --bg: oklch(0.96 0.012 85);
  --bg-2: oklch(0.92 0.018 80);
  --bg-3: oklch(0.88 0.022 75);
  --ink: oklch(0.22 0.018 40);
  --ink-2: oklch(0.38 0.020 45);
  --ink-3: oklch(0.55 0.018 50);
  --line: oklch(0.78 0.025 75);
  --line-soft: oklch(0.86 0.020 78);

  --wood: oklch(0.48 0.085 55);
  --wood-deep: oklch(0.34 0.065 50);
  --moss: oklch(0.40 0.055 140);
  --moss-deep: oklch(0.30 0.045 140);
  --copper: oklch(0.60 0.125 45);
  --ember: oklch(0.68 0.140 55);
  --stone: oklch(0.62 0.012 60);
  --sky: oklch(0.72 0.055 230);

  /* Tipografía — Manrope (familia amistosa, estilo Airbnb Cereal) */
  --serif: "Manrope", "Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Manrope", "Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Manrope", "Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Radios */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  /* Shadows */
  --shadow-sm: 0 1px 2px oklch(0.22 0.018 40 / 0.06), 0 2px 6px oklch(0.22 0.018 40 / 0.04);
  --shadow-md: 0 4px 12px oklch(0.22 0.018 40 / 0.08), 0 10px 30px oklch(0.22 0.018 40 / 0.06);
  --shadow-lg: 0 10px 30px oklch(0.22 0.018 40 / 0.12), 0 30px 80px oklch(0.22 0.018 40 / 0.10);
}

[data-theme="dark"] {
  --bg: oklch(0.16 0.006 265);
  --bg-2: oklch(0.205 0.007 265);
  --bg-3: oklch(0.255 0.008 265);
  --ink: oklch(0.97 0.004 265);
  --ink-2: oklch(0.79 0.006 265);
  --ink-3: oklch(0.60 0.008 265);
  --line: oklch(0.30 0.008 265);
  --line-soft: oklch(0.24 0.008 265);

  --wood: oklch(0.70 0.17 25);
  --wood-deep: oklch(0.64 0.19 22);
  --moss: oklch(0.58 0.065 150);
  --copper: oklch(0.67 0.19 22);
  --ember: oklch(0.70 0.20 25);
}

/* Reset + base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  transition: background 0.6s ease, color 0.6s ease;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 800; letter-spacing: -0.025em; margin: 0; line-height: 1.05; }
h1 { font-size: clamp(48px, 8vw, 140px); }
h2 { font-size: clamp(36px, 5vw, 80px); font-weight: 800; }
h3 { font-size: clamp(24px, 3vw, 44px); font-weight: 700; }
h4 { font-weight: 700; }

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

img { display: block; max-width: 100%; }

.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.01em; font-weight: 600; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--ink-3); }
.italic { font-style: italic; }

/* Textura placeholders */
.tex {
  background-image:
    radial-gradient(circle at 10% 20%, oklch(0.75 0.05 55 / 0.4), transparent 40%),
    radial-gradient(circle at 80% 70%, oklch(0.55 0.06 140 / 0.35), transparent 45%),
    radial-gradient(circle at 50% 50%, oklch(0.65 0.07 75 / 0.25), transparent 60%),
    repeating-linear-gradient(135deg,
      oklch(0.55 0.04 60) 0px,
      oklch(0.55 0.04 60) 2px,
      oklch(0.48 0.05 55) 2px,
      oklch(0.48 0.05 55) 5px,
      oklch(0.42 0.04 50) 5px,
      oklch(0.42 0.04 50) 9px);
  position: relative;
  overflow: hidden;
}
.tex::after {
  content: attr(data-label);
  position: absolute;
  bottom: 10px; left: 12px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: oklch(0.98 0 0 / 0.85);
  mix-blend-mode: normal;
  background: oklch(0.2 0.02 40 / 0.5);
  padding: 3px 7px;
  border-radius: 3px;
  backdrop-filter: blur(4px);
}

.tex.forest {
  background-image:
    radial-gradient(ellipse at 30% 80%, oklch(0.28 0.06 140 / 0.9), transparent 60%),
    radial-gradient(ellipse at 70% 20%, oklch(0.52 0.08 120 / 0.6), transparent 55%),
    repeating-linear-gradient(100deg,
      oklch(0.32 0.05 135) 0px,
      oklch(0.32 0.05 135) 3px,
      oklch(0.26 0.05 140) 3px,
      oklch(0.26 0.05 140) 8px,
      oklch(0.38 0.06 130) 8px,
      oklch(0.38 0.06 130) 14px);
}
.tex.wood {
  background-image:
    radial-gradient(ellipse at 40% 50%, oklch(0.42 0.08 50 / 0.7), transparent 70%),
    repeating-linear-gradient(92deg,
      oklch(0.48 0.07 55) 0px,
      oklch(0.48 0.07 55) 3px,
      oklch(0.40 0.08 50) 3px,
      oklch(0.40 0.08 50) 7px,
      oklch(0.52 0.06 60) 7px,
      oklch(0.52 0.06 60) 10px);
}
.tex.lake {
  background-image:
    radial-gradient(ellipse at 50% 20%, oklch(0.78 0.04 230 / 0.7), transparent 50%),
    radial-gradient(ellipse at 30% 80%, oklch(0.55 0.06 220 / 0.6), transparent 60%),
    repeating-linear-gradient(175deg,
      oklch(0.68 0.04 225) 0px,
      oklch(0.68 0.04 225) 4px,
      oklch(0.58 0.05 220) 4px,
      oklch(0.58 0.05 220) 9px);
}
.tex.mountain {
  background-image:
    linear-gradient(180deg, oklch(0.72 0.03 240) 0%, oklch(0.55 0.04 230) 50%, oklch(0.35 0.05 220) 100%),
    repeating-linear-gradient(90deg, transparent 0, transparent 20px, oklch(0.9 0 0 / 0.05) 20px, oklch(0.9 0 0 / 0.05) 21px);
}
.tex.interior {
  background-image:
    radial-gradient(ellipse at 70% 30%, oklch(0.85 0.06 75 / 0.7), transparent 55%),
    radial-gradient(ellipse at 20% 80%, oklch(0.45 0.07 50 / 0.6), transparent 50%),
    repeating-linear-gradient(88deg,
      oklch(0.62 0.06 65) 0px,
      oklch(0.62 0.06 65) 3px,
      oklch(0.54 0.07 55) 3px,
      oklch(0.54 0.07 55) 6px);
}

/* Temporada (data-season) */
[data-season="otono"] { --seasonal: oklch(0.58 0.135 40); --seasonal-soft: oklch(0.85 0.06 55); }
[data-season="invierno"] { --seasonal: oklch(0.55 0.05 240); --seasonal-soft: oklch(0.88 0.02 230); }
[data-season="primavera"] { --seasonal: oklch(0.60 0.10 140); --seasonal-soft: oklch(0.88 0.04 135); }
[data-season="verano"] { --seasonal: oklch(0.62 0.12 95); --seasonal-soft: oklch(0.90 0.05 95); }

/* Cursor */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--copper);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: multiply;
  transition: transform 0.15s ease, width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
  transform: translate(-50%, -50%);
}

/* Scroll subtle */
html { scroll-behavior: smooth; }

/* Utility layout */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 720px) {
  .container { padding: 0 20px; }
}

/* Tweaks panel */
.tweaks-panel {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 100;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  width: 280px;
  box-shadow: var(--shadow-lg);
  font-family: var(--sans);
  transform: translateY(calc(100% + 30px));
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.tweaks-panel.open { transform: translateY(0); }
.tweaks-panel h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.tweak-row { margin-bottom: 16px; }
.tweak-row:last-child { margin-bottom: 0; }
.tweak-label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.tweak-options { display: flex; gap: 6px; flex-wrap: wrap; }
.tweak-option {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  background: transparent;
  color: var(--ink-2);
  transition: all 0.2s;
}
.tweak-option:hover { border-color: var(--ink); }
.tweak-option.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }