/* Paleta verde — conservación de la naturaleza. Verde de marca #00600C + ámbar #FCA83C como acento */
html[data-preset="primary"] {
  --color-bg:#EDF1E4; --color-surface:#FFFFFF; --color-primary:#00600C;
  --color-accent:#E0941F; --color-text:#13241A; --color-muted:#566A52;
  --color-deep:#0A2611; --color-light:#F1F5EA;
  --font-heading:'DM Sans',sans-serif; --font-drama:'Fraunces',serif; --font-mono:'JetBrains Mono',monospace;
  --motion-duration:0.9; --motion-ease:power3.out; --motion-stagger:0.12;
  --radius-card:2rem; --radius-pill:9999px; --section-py:7rem; --content-max-w:48rem;
}
html[data-preset="alt-a"] {
  --color-bg:#E5EBD8; --color-surface:#FBFCF6; --color-primary:#2E6B30;
  --color-accent:#C8861B; --color-text:#1B2A1A; --color-muted:#5E6E54;
  --color-deep:#10240F; --color-light:#EFF3E6;
  --font-heading:'DM Sans',sans-serif; --font-drama:'Fraunces',serif; --font-mono:'JetBrains Mono',monospace;
  --motion-duration:0.9; --motion-ease:power3.out; --motion-stagger:0.12;
  --radius-card:2rem; --radius-pill:9999px; --section-py:7rem; --content-max-w:48rem;
}
html[data-preset="alt-b"] {
  --color-bg:#0C2412; --color-surface:#123019; --color-primary:#7FBA5E;
  --color-accent:#FCA83C; --color-text:#EAF0E0; --color-muted:#A6BBA0;
  --color-deep:#07160C; --color-light:#EAF0E0;
  --font-heading:'DM Sans',sans-serif; --font-drama:'Fraunces',serif; --font-mono:'JetBrains Mono',monospace;
  --motion-duration:1.3; --motion-ease:power2.out; --motion-stagger:0.16;
  --radius-card:2.5rem; --radius-pill:9999px; --section-py:8.5rem; --content-max-w:46rem;
}

html { scroll-behavior: smooth; }
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-heading); transition: background .6s ease, color .6s ease; }

.grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 70; background: var(--color-primary); }

.magnetic { position: relative; overflow: hidden; isolation: isolate;
  transition: transform .3s cubic-bezier(.25,.46,.45,.94); }
.magnetic > span.fill { position: absolute; inset: 0; transform: translateX(-101%); transition: transform .4s cubic-bezier(.25,.46,.45,.94); z-index: -1; }
.magnetic:hover { transform: scale(1.03); }
.magnetic:hover > span.fill { transform: translateX(0); }

.navlink { position: relative; }
.navlink::after { content:''; position:absolute; left:0; bottom:-4px; height:2px; width:0; background: var(--color-primary); transition: width .3s ease; }
.navlink:hover::after { width:100%; }

.reveal { opacity: 0; }

.preset-toggle button[aria-current="true"] { background: var(--color-primary); color: var(--color-light); }

.kenburns { animation: kb 22s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1.05); } to { transform: scale(1.18); } }

.card-lift { transition: transform .4s cubic-bezier(.25,.46,.45,.94), box-shadow .4s ease; }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -20px rgba(0,0,0,.35); }

::selection { background: var(--color-primary); color: var(--color-light); }

@media (max-width: 767px) {
  html[data-preset="primary"],
  html[data-preset="alt-a"],
  html[data-preset="alt-b"] {
    --section-py: 4rem;
    --radius-card: 1.25rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  html[data-preset="primary"],
  html[data-preset="alt-a"],
  html[data-preset="alt-b"] {
    --section-py: 5.5rem;
  }
}