/* =====================================================
   PALETA SUMAR — fuente única de color
   ===================================================== */
:root{
  /* Colores de marca (del isotipo) */
  --brand-bosque: #20522F;
  --brand-salvia: #6A9A5B;
  --brand-lima:   #BCD16C;
  --brand-arena:  #B0823B;

  /* Escala Bosque 50-900 */
  --bosque-50:#ECF4ED;  --bosque-100:#D2E6D7; --bosque-200:#A7CCAF; --bosque-300:#76AC82;
  --bosque-400:#4C8B5B; --bosque-500:#2F6E40; --bosque-600:#20522F; --bosque-700:#1A4226;
  --bosque-800:#13311D; --bosque-900:#0C2113;

  /* Escala Lima 50-900 */
  --lima-50:#F8FAEE;    --lima-100:#EFF4D4;   --lima-200:#E0EBAC;   --lima-300:#CFE07F;
  --lima-400:#BCD16C;   --lima-500:#A6BE4F;   --lima-600:#899E37;   --lima-700:#6C7D2C;
  --lima-800:#515E22;   --lima-900:#363F17;

  /* Neutros con tinte verde (Piedra) */
  --piedra-50:#F7F8F4;  --piedra-100:#EFF1EA; --piedra-200:#DFE2D8; --piedra-300:#C7CCBC;
  --piedra-400:#A2A993; --piedra-500:#7C8470; --piedra-600:#5E6553; --piedra-700:#454A3D;
  --piedra-800:#2D3127; --piedra-900:#191C15;

  /* Tokens semánticos — MODO CLARO */
  --bg:        #EFF1EA;
  --surface:   #FFFFFF;
  --surface-2: #F7F8F4;
  --border:    #DFE2D8;
  --text:      #191C15;
  --text-soft: #5E6553;
  --primary:   #20522F;
  --on-primary:#FFFFFF;
  --accent:    #BCD16C;
  --on-accent: #14331E;
  --success:   #2F6E40;
  --warning:   #B0823B;
  --danger:    #B23B2E;

  --radius:14px;
  --maxw:1120px;
}

/* MODO OSCURO */
[data-theme="dark"]{
  --bg:        #11150E;
  --surface:   #181D12;
  --surface-2: #20271A;
  --border:    #2E3724;
  --text:      #ECF1E6;
  --text-soft: #A7B49B;
  --primary:   #BCD16C;
  --on-primary:#14331E;
  --accent:    #BCD16C;
  --on-accent: #14331E;
  --success:   #84B062;
  --warning:   #D3B57E;
  --danger:    #E08376;
}

/* =====================================================
   BASE
   ===================================================== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Open Sans', system-ui, sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Montserrat', system-ui, sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0;
}
.mono{
  font-family:'IBM Plex Mono', monospace;
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
}
a{color:inherit;}
img{max-width:100%;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  font-weight:600;
  color:var(--text-soft);
}
button, input, textarea{font-family:inherit; font-size:1rem;}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001s !important; transition-duration:0.001s !important;}
}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:#E6F1E1;
  backdrop-filter:blur(6px);
  color:#24542C;
}
[data-theme="dark"] .nav{
  background:rgba(24,29,18,0.96);
  color:#ECF1E6;
}
.nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
}
.nav .brand{
  font-family:'Montserrat', sans-serif; font-weight:700; font-size:1.05rem;
  display:flex; align-items:center; gap:8px; text-decoration:none;
}
.nav .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--brand-lima);display:inline-block;}
.nav .brand img{height:90px; width:auto; display:block;}
.nav .brand .logo-dark{display:none;}
[data-theme="dark"] .nav .brand .logo-light{display:none;}
[data-theme="dark"] .nav .brand .logo-dark{display:block;}
.nav-actions{display:flex; align-items:center; gap:10px;}
.nav nav{display:flex; gap:22px; font-size:.92rem;}
.nav nav a{text-decoration:none; opacity:.85; transition:opacity .15s;}
.nav nav a:hover{opacity:1;}
.nav-toggle{display:none; background:none; border:none; color:#24542C; cursor:pointer; font-size:1.2rem; padding:4px;}
.theme-toggle{
  background:none; border:1px solid rgba(36,84,44,.28); color:#24542C;
  cursor:pointer; border-radius:20px; padding:4px 10px; font-size:.82rem; line-height:1;
  transition:background .15s;
}
.theme-toggle:hover{background:rgba(255,255,255,0.12);}
.back-link{
  font-size:.9rem; font-weight:600; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
}

@media (max-width:680px){
  .nav nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:#E6F1E1;
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .nav nav.open{max-height:280px;}
  .nav nav a{padding:14px 24px; border-top:1px solid rgba(36,84,44,.15);}
  .nav-toggle{display:block;}
  [data-theme="dark"] .nav nav{background:rgba(24,29,18,0.98);}
  [data-theme="dark"] .nav nav a{border-top:1px solid rgba(236,241,230,.15);}
}

/* ---------- HERO ---------- */
.hero{
  background:radial-gradient(120% 140% at 15% -10%, var(--bosque-700) 0%, var(--bosque-800) 55%, var(--bosque-900) 100%);
  color:#ECF1E6;
  padding:64px 0 70px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(60% 50% at 85% 10%, rgba(188,209,108,0.13), transparent 70%);
  pointer-events:none;
}
.hero .inner{position:relative; z-index:1;}
.hero .eyebrow{color:var(--lima-300); margin-bottom:18px;}
.hero h1{
  font-size:clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight:500;
  max-width:760px;
  margin-bottom:36px;
  color:#ECF1E6;
}
.hero h1 em{font-style:italic; color:var(--brand-lima);}
.hero .lead{max-width:680px; color:var(--lima-100); font-size:1.05rem;}
.hero .badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px;}
.badge{
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18);
  color:var(--lima-200); font-size:.78rem; font-weight:600;
  padding:6px 14px; border-radius:30px;
}

.odometer{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:10px;
  margin-bottom:38px;
}
.odometer .cell{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--radius);
  padding:16px 8px 12px;
  text-align:center;
}
.odometer .num{
  font-size:clamp(1.5rem, 4vw, 2.6rem);
  font-weight:600;
  line-height:1;
}
.odometer .lbl{
  margin-top:8px;
  font-size:.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--lima-200);
}
@media (max-width:680px){
  .odometer{grid-template-columns:repeat(3, 1fr); row-gap:10px;}
}

.debt-panel{
  border-top:1px solid rgba(255,255,255,0.14);
  padding-top:30px;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:14px 22px;
}
.debt-panel .lead{font-size:1rem; color:var(--lima-100); max-width:480px;}
.debt-amount{
  font-size:clamp(1.9rem, 5.4vw, 3.4rem);
  font-weight:600;
  color:var(--brand-lima);
  text-shadow:0 0 28px rgba(188,209,108,0.3);
}
.debt-note{width:100%; font-size:.8rem; color:var(--lima-200); margin-top:6px;}
.debt-note a{color:var(--brand-lima); text-decoration:underline; text-decoration-color:rgba(188,209,108,.4);}

.scroll-cue{
  margin-top:42px;
  font-size:.85rem;
  color:var(--lima-200);
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none;
}
.scroll-cue svg{transition:transform .2s;}
.scroll-cue:hover svg{transform:translateY(3px);}

/* ---------- SECTIONS GENERIC ---------- */
section{padding:84px 0;}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  margin-bottom:46px;
}
.section-head h2{font-size:clamp(1.5rem,3vw,2.1rem); font-weight:500;}
.section-head p{max-width:420px; color:var(--text-soft); margin-top:10px; font-size:.96rem;}
.section-title{font-size:clamp(1.25rem,2.6vw,1.6rem); font-weight:600; margin-bottom:18px; color:var(--primary);}
[data-theme="dark"] .section-title{color:var(--accent);}
.text-block{max-width:760px;}

/* ---------- MANIFIESTO ---------- */
.manifiesto{background:var(--bg);}
.manifiesto-grid{
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:48px;
}
.manifiesto-grid .pull{
  font-family:'Montserrat', sans-serif;
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.3rem,2.4vw,1.8rem);
  color:var(--primary);
  border-left:3px solid var(--accent);
  padding-left:20px;
}
.manifiesto-grid .body p{margin:0 0 18px; color:var(--text);}
.manifiesto-grid .body strong{color:var(--text);}
@media (max-width:780px){
  .manifiesto-grid{grid-template-columns:1fr;}
}

.stat-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:38px;
}
.stat-row .stat{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 18px 16px;
}
.stat-row .stat .num{font-size:1.5rem; font-weight:600; color:var(--primary);}
.stat-row .stat .lbl{font-size:.82rem; color:var(--text-soft); margin-top:4px;}
@media (max-width:680px){.stat-row{grid-template-columns:1fr;}}

/* ---------- PROYECTOS ---------- */
.proyectos{background:var(--surface);}
.cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
@media (max-width:920px){.cards{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.cards{grid-template-columns:1fr;}}

.card{
  background:var(--bg);
  border-radius:var(--radius);
  padding:26px 24px 24px;
  display:flex; flex-direction:column; gap:14px;
  border:1px solid var(--border);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(32,82,47,0.35);}
.tag{
  align-self:flex-start;
  font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:30px;
}
.tag.propuesta{background:var(--lima-100); color:var(--bosque-700);}
.tag.curso{background:var(--lima-200); color:var(--bosque-600);}
.tag.logro{background:var(--bosque-100); color:var(--bosque-700);}
[data-theme="dark"] .tag.propuesta{background:var(--bosque-800); color:var(--lima-300);}
[data-theme="dark"] .tag.curso{background:var(--bosque-700); color:var(--lima-200);}
[data-theme="dark"] .tag.logro{background:var(--bosque-900); color:var(--bosque-200);}
.card h3{font-size:1.15rem; font-weight:600;}
.card p{margin:0; color:var(--text-soft); font-size:.93rem; flex:1;}
.card .meta{font-size:.78rem; color:var(--text-soft); border-top:1px solid var(--border); padding-top:12px;}

.add-note{
  margin-top:30px; font-size:.85rem; color:var(--text-soft);
  border:1px dashed var(--border); border-radius:var(--radius); padding:14px 18px;
}
.add-note a{color:var(--primary); text-decoration:underline;}
[data-theme="dark"] .add-note a{color:var(--accent);}

/* ---------- CONSULTA ---------- */
.consulta{background:var(--bosque-700); color:#ECF1E6;}
[data-theme="dark"] .consulta{background:var(--bosque-800);}
.consulta .section-head p{color:var(--lima-100);}
.consulta .section-head h2{color:#ECF1E6;}
.consulta .eyebrow{color:var(--lima-300) !important;}
.form-wrap{
  display:grid; grid-template-columns:1fr 1fr; gap:40px;
}
@media (max-width:780px){.form-wrap{grid-template-columns:1fr;}}
.form-wrap .side h3{font-size:1.1rem; font-weight:600; margin-bottom:10px; color:#ECF1E6;}
.form-wrap .side p{color:var(--lima-100); font-size:.93rem;}
.form-wrap .side ul{padding-left:18px; color:var(--lima-100); font-size:.93rem; margin-top:14px;}
.form-wrap .side li{margin-bottom:6px;}

form{display:flex; flex-direction:column; gap:14px;}
.field label{display:block; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--lima-200); margin-bottom:6px;}
.field input, .field textarea, .field select{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.06);
  color:#ECF1E6;
}
.field input::placeholder, .field textarea::placeholder{color:var(--bosque-200);}
.field textarea{resize:vertical; min-height:110px;}
.submit-btn{
  margin-top:6px;
  align-self:flex-start;
  background:var(--brand-lima);
  color:var(--on-accent);
  border:none;
  padding:13px 26px;
  border-radius:30px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s;
}
.submit-btn:hover{background:var(--lima-300);}
.form-note{font-size:.78rem; color:var(--bosque-200);}

/* ---------- METODOLOGÍA ---------- */
.metodologia{background:var(--surface-2);}
.metodologia .wrap{max-width:780px;}
details{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 22px;
}
details summary{cursor:pointer; font-weight:600; font-size:.98rem; color:var(--text);}
details summary::marker{color:var(--primary);}
details .content{margin-top:14px; font-size:.9rem; color:var(--text-soft);}
details .content p{margin:0 0 12px;}
details .content code{background:var(--surface-2); padding:2px 6px; border-radius:6px; font-size:.85em;}
details .content ul{padding-left:18px;}
details .content a{text-decoration:underline; color:var(--primary);}
[data-theme="dark"] details .content a{color:var(--accent);}

/* ---------- BLOQUES DE PROYECTO (subpáginas) ---------- */
.box{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 24px; margin-bottom:16px;
}
.box h3{font-size:1.02rem; font-weight:600; margin-bottom:8px; color:var(--text);}
.box p{color:var(--text-soft); font-size:.95rem; margin-bottom:0;}

.flow{counter-reset:step;}
.flow .step{
  display:flex; gap:16px; padding:16px 0;
  border-bottom:1px solid var(--border);
}
.flow .step:last-child{border-bottom:none;}
.flow .step .n{
  counter-increment:step; flex:none; width:32px; height:32px; border-radius:50%;
  background:var(--primary); color:var(--on-primary); display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:.9rem;
}
.flow .step .n::before{content:counter(step);}
.flow .step h4{font-size:.98rem; font-weight:600; margin-bottom:4px;}
.flow .step p{margin:0; color:var(--text-soft); font-size:.92rem;}

.cols{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:680px){.cols{grid-template-columns:1fr;}}

.exception{
  background:var(--surface-2); border-left:4px solid var(--warning);
  border-radius:0 var(--radius) var(--radius) 0; padding:18px 22px;
}

.cta-back{background:var(--surface-2);}
.cta-back .wrap{text-align:center;}
.btn{
  display:inline-block; background:var(--primary); color:var(--on-primary);
  padding:13px 26px; border-radius:30px; text-decoration:none; font-weight:700;
}

/* ---------- FOOTER ---------- */
footer{
  background:var(--bosque-900);
  color:var(--bosque-300);
  padding:46px 0 32px;
  font-size:.85rem;
}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px;}
footer .brand{font-family:'Montserrat',sans-serif; font-weight:700; color:#ECF1E6; font-size:1rem; margin-bottom:6px;}