:root {
  /* Marca — no cambian entre modos */
  --lima:   #C8E64A;
  --rosa:   #F2C4CE;
  --bosque: #4A8F57;

  /* Semánticas — modo claro (default) */
  --bg:        #F5F0E8;
  --bg-2:      #EDE8DF;
  --ink:       #1C1A12;
  --ink-soft:  rgba(28,26,18,.72);
  --ink-mute:  rgba(28,26,18,.45);
  --surface:   #ffffff;
  --line:      #1C1A12;
  --line-soft: rgba(28,26,18,.2);
  --nav-bg:    rgba(245,240,232,.9);
  --inverse-bg:   #1C1A12;
  --inverse-ink:  #F5F0E8;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bosque:    #7FC98C;
    --bg:        #15140F;
    --bg-2:      #1C1A14;
    --ink:       #F5F0E8;
    --ink-soft:  rgba(245,240,232,.72);
    --ink-mute:  rgba(245,240,232,.45);
    --surface:   #1F1D16;
    --line:      #F5F0E8;
    --line-soft: rgba(245,240,232,.22);
    --nav-bg:    rgba(21,20,15,.85);
    --inverse-bg:  #F5F0E8;
    --inverse-ink: #1C1A12;
  }
}
:root[data-theme="dark"] {
  --bosque:    #7FC98C;
  --bg:        #15140F;
  --bg-2:      #1C1A14;
  --ink:       #F5F0E8;
  --ink-soft:  rgba(245,240,232,.72);
  --ink-mute:  rgba(245,240,232,.45);
  --surface:   #1F1D16;
  --line:      #F5F0E8;
  --line-soft: rgba(245,240,232,.22);
  --nav-bg:    rgba(21,20,15,.85);
  --inverse-bg:  #F5F0E8;
  --inverse-ink: #1C1A12;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--ink); font-family:'Space Grotesk', sans-serif; line-height:1.55; overflow-x:hidden; transition:background .25s ease, color .25s ease; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--lima); color:#1C1A12; }

/* NAV */
.nav {
  position:sticky; top:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 6vw;
  background:var(--nav-bg);
  backdrop-filter:blur(12px);
  border-bottom:2px solid var(--line);
  transition:background .25s ease, border-color .25s ease;
}
.nav-logo { font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.2rem; }
.nav-logo .dot { color:var(--bosque); }
.nav-links { display:flex; align-items:center; gap:28px; list-style:none; }
.nav-links a { font-family:'JetBrains Mono',monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; opacity:.6; transition:opacity .2s; }
.nav-links a:hover { opacity:1; }
@media(max-width:680px){ .nav-links a:not(.theme-toggle) { display:none; } }

.theme-toggle {
  display:flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace;
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  border:1.5px solid var(--line-soft);
  border-radius:100px;
  padding:6px 12px;
  cursor:pointer;
  background:transparent;
  color:var(--ink);
  opacity:.8;
  transition:opacity .2s, border-color .2s;
}
.theme-toggle:hover { opacity:1; border-color:var(--line); }
.theme-toggle .icon { font-size:.85rem; line-height:1; }

/* HERO */
.hero {
  min-height:92vh;
  display:grid;
  grid-template-rows:1fr auto;
  padding:80px 6vw 60px;
  position:relative;
  overflow:hidden;
}
.hero-bg-text {
  position:absolute;
  font-family:'Fredoka',sans-serif;
  font-weight:700;
  font-size:26vw;
  color:var(--lima);
  opacity:.18;
  right:-2vw;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  line-height:1;
  user-select:none;
}
.hero-content { position:relative; z-index:1; }
.hero-eyebrow {
  font-family:'JetBrains Mono',monospace;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--bosque);
  display:flex; align-items:center; gap:12px;
  margin-bottom:32px;
}
.hero-eyebrow::before { content:''; width:32px; height:2px; background:var(--bosque); }
.hero-h1 {
  font-family:'Fredoka',sans-serif;
  font-weight:700;
  font-size:clamp(2.4rem, 7vw, 4.6rem);
  line-height:1.05;
  max-width:16ch;
}
.hero-h1 .green {
  color:#1C1A12;
  background:linear-gradient(to top, var(--lima) 42%, transparent 42%);
  padding:0 4px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.hero-h1 .outline { -webkit-text-stroke:2px var(--line); color:transparent; }
.hero-sub {
  margin-top:28px;
  max-width:48ch;
  font-size:1.05rem;
  opacity:.72;
}
.hero-tags { display:flex; gap:10px; flex-wrap:wrap; margin-top:36px; }
.tag {
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:7px 16px;
  border-radius:100px;
  border:1.5px solid var(--line);
  background:transparent;
}
.tag.fill-lima { background:var(--lima); border-color:var(--lima); color:#1C1A12; }
.tag.fill-negro { background:var(--inverse-bg); color:var(--inverse-ink); border-color:var(--inverse-bg); }
.hero-rule {
  margin-top:56px;
  display:flex; justify-content:space-between; align-items:flex-end;
  padding-top:24px;
  border-top:1.5px solid rgba(28,26,18,.2);
  font-family:'JetBrains Mono',monospace;
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.07em;
  opacity:.45;
  flex-wrap:wrap;
  gap:8px;
}

/* STATEMENT BAND — Sobre mí, frase clave */
.band {
  background:var(--inverse-bg);
  color:var(--inverse-ink);
  padding:80px 6vw;
  transition:background .25s ease, color .25s ease;
}
.band-inner {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:60px;
  align-items:end;
}
@media(max-width:720px){ .band-inner { grid-template-columns:1fr; gap:32px; } }
.band-statement {
  font-family:'Fredoka',sans-serif;
  font-weight:500;
  font-size:clamp(1.4rem, 2.8vw, 2rem);
  line-height:1.35;
}
.band-statement .hl {
  color:#1C1A12;
  background:linear-gradient(to top, var(--lima) 38%, transparent 38%);
  padding:0 4px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.band-aside {
  font-family:'JetBrains Mono',monospace;
  font-size:.78rem;
  line-height:1.9;
  opacity:.5;
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* SECTION SHELL */
.sec { padding:88px 6vw; border-top:2px solid var(--line); transition:border-color .25s ease; }
.sec-head { display:flex; align-items:baseline; gap:20px; margin-bottom:44px; }
.sec-num { font-family:'JetBrains Mono',monospace; font-size:.8rem; color:var(--bosque); opacity:.7; }
.sec-title { font-family:'Fredoka',sans-serif; font-weight:700; font-size:clamp(1.6rem, 3vw, 2.2rem); }
.sec-body { max-width:68ch; font-size:1rem; opacity:.85; }
.sec-body p + p { margin-top:20px; }

/* SOBRE MI meta row */
.meta-row {
  display:flex; gap:14px; flex-wrap:wrap;
  margin-top:32px;
}
.meta-row .tag { border-color:rgba(28,26,18,.3); }

/* QUE HACES — card portfolio */
.work-card {
  border:2px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  max-width:520px;
}
.work-card-body { background:var(--inverse-bg); padding:32px; }
.wc-tag { font-family:'JetBrains Mono',monospace; font-size:.6rem; text-transform:uppercase; color:var(--lima); opacity:.9; margin-bottom:12px; letter-spacing:.05em; }
.wc-title { font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.5rem; color:var(--inverse-ink); line-height:1.15; margin-bottom:10px; }
.wc-desc { font-size:.85rem; color:var(--inverse-ink); opacity:.6; line-height:1.6; margin-bottom:22px; }
.wc-chips { display:flex; gap:6px; flex-wrap:wrap; }
.wc-chip { font-family:'JetBrains Mono',monospace; font-size:.58rem; text-transform:uppercase; border:1px solid rgba(245,240,232,.3); color:var(--inverse-ink); padding:4px 10px; border-radius:100px; }
.explore-note {
  margin-top:32px;
  font-size:.92rem;
  opacity:.7;
  max-width:52ch;
  padding-left:20px;
  border-left:2px solid var(--bosque);
}

/* GUIÑO PERSONAL — craft block */
.craft-block {
  background:var(--rosa);
  border:2px solid #1C1A12;
  border-radius:18px;
  padding:40px;
  display:flex;
  align-items:center;
  gap:24px;
  max-width:640px;
}
.craft-icon {
  font-size:1.8rem;
  flex-shrink:0;
  color:#1C1A12;
}
.craft-text {
  font-family:'Fredoka',sans-serif;
  font-weight:500;
  font-size:1.15rem;
  line-height:1.4;
  color:#1C1A12;
}
.craft-link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:18px;
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  background:#1C1A12;
  color:#F5F0E8;
  padding:8px 18px;
  border-radius:100px;
}

/* FOOTER — contacto */
footer {
  background:var(--inverse-bg);
  color:var(--inverse-ink);
  padding:72px 6vw 48px;
  transition:background .25s ease, color .25s ease;
}
.footer-top {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding-bottom:40px;
  border-bottom:1px solid rgba(245,240,232,.15);
  flex-wrap:wrap;
  gap:24px;
}
.footer-logo { font-family:'Fredoka',sans-serif; font-weight:700; font-size:2rem; }
.footer-logo .dot { color:var(--lima); }
.footer-cta {
  font-family:'JetBrains Mono',monospace;
  font-size:.75rem;
  opacity:.55;
  max-width:32ch;
  text-align:right;
}
.footer-links {
  display:flex; gap:16px; flex-wrap:wrap;
  padding-top:32px;
}
.footer-link {
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  border:1.5px solid rgba(245,240,232,.3);
  padding:9px 18px;
  border-radius:100px;
  transition:border-color .2s, background .2s;
}
.footer-link:hover { border-color:var(--lima); background:rgba(200,230,74,.08); }
.footer-bottom {
  padding-top:32px;
  margin-top:32px;
  border-top:1px solid rgba(245,240,232,.1);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:.62rem;
  opacity:.35;
}

.reveal { opacity:0; transform:translateY(20px); transition:opacity .65s ease, transform .65s ease; }
.reveal.in { opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .reveal { opacity:1; transform:none; transition:none; } }