/* ============================================================
   GreenRock — Sistema de marca
   Public Sans (grotesque) + IBM Plex Mono (técnico)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* Neutrales (cálido-neutro, casi cool) */
  --ink:#15170f;
  --ink-2:#3a3d33;
  --mut:#6c7064;
  --paper:#f6f6f1;
  --paper-2:#ffffff;
  --paper-3:#eeeee7;
  --line:rgba(21,23,15,.12);
  --line-2:rgba(21,23,15,.22);

  /* Verde — GreenRock / Residuos */
  --green:#558203;
  --green-700:#456a02;
  --green-900:#2f4a01;
  --green-100:#edf2e0;
  --green-50:#f5f8ec;

  /* Celeste — GreenRock energy / Solar */
  --celeste:#4ba6de;
  --celeste-700:#2e8bc0;
  --celeste-900:#1b5f87;
  --celeste-100:#e7f2fb;

  /* Grafito — wordmark Energy */
  --graphite:#565b60;
  --graphite-700:#3c4044;

  --maxw:1200px;
  --pad:clamp(22px,5vw,80px);
  --r:3px;

  --ff:"Public Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--ff);color:var(--ink);background:var(--paper);
  font-size:18px;line-height:1.6;font-weight:400;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--green);color:#fff}

/* ---------- Tipografía ---------- */
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.02;letter-spacing:-.025em}
.display{
  font-weight:900;letter-spacing:-.04em;line-height:.94;
  font-size:clamp(48px,9vw,128px);
}
.h1{font-size:clamp(38px,6.2vw,84px);letter-spacing:-.035em;line-height:.98}
.h2{font-size:clamp(30px,4.4vw,56px);letter-spacing:-.03em;line-height:1.0}
.h3{font-size:clamp(22px,2.6vw,32px);letter-spacing:-.02em;line-height:1.08;font-weight:700}
.h4{font-size:20px;font-weight:700;letter-spacing:-.01em}
.lead{font-size:clamp(20px,2.4vw,28px);line-height:1.42;font-weight:400;color:var(--ink-2);letter-spacing:-.015em;text-wrap:pretty}
.body{font-size:18px;color:var(--ink-2);line-height:1.62;text-wrap:pretty}
.small{font-size:15px;color:var(--mut);line-height:1.55}
strong{font-weight:700;color:var(--ink)}

.mono{
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
}
.kicker{
  font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green-700);
  display:inline-flex;align-items:center;gap:10px;
}
.kicker::before{content:"";width:9px;height:9px;background:var(--green);display:inline-block}
.kicker.cel{color:var(--celeste-700)}
.kicker.cel::before{background:var(--celeste)}
.kicker.neu{color:var(--mut)}
.kicker.neu::before{background:var(--ink)}

/* ---------- Wordmark / lockups ---------- */
.gr{
  font-family:var(--ff);font-weight:800;letter-spacing:-.03em;line-height:1;
  display:inline-flex;align-items:flex-end;gap:.12em;color:var(--ink);
  font-size:28px;white-space:nowrap;
}
.gr .sq{
  width:.34em;height:.34em;background:var(--green);
  display:inline-block;margin-bottom:.04em;flex:none;
}
.gr.energy{color:var(--graphite)}
.gr.energy .en{color:var(--celeste);font-weight:800}
.gr.energy .sq{background:var(--celeste)}
.gr.on-dark{color:#fff}
.gr.on-dark.energy{color:#cfd3d6}
.gr .en{margin-left:.14em;font-weight:700}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
section{padding:clamp(64px,10vh,128px) 0}
.sec-tight{padding:clamp(40px,6vh,72px) 0}
.divline{height:1px;background:var(--line);border:0;margin:0}
.stack-s>*+*{margin-top:14px}
.stack-m>*+*{margin-top:22px}
.stack-l>*+*{margin-top:40px}

.grid{display:grid;gap:clamp(20px,3vw,40px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g-7-5{grid-template-columns:7fr 5fr}
.g-5-7{grid-template-columns:5fr 7fr}
@media(max-width:880px){
  .g2,.g3,.g4,.g-7-5,.g-5-7{grid-template-columns:1fr}
}

/* ---------- Section header ---------- */
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(28px,4vw,52px)}
.sec-num{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--mut);padding-top:.2em}

/* ---------- Cards ---------- */
.card{background:var(--paper-2);border:1px solid var(--line);padding:clamp(22px,2.6vw,34px)}
.card.flat{background:transparent;border:0;padding:0}
.card .idx{font-family:var(--mono);font-size:13px;color:var(--mut);font-weight:600}

/* feature tile w/ top rule */
.tile{border-top:2px solid var(--ink);padding-top:20px}
.tile.green{border-color:var(--green)}
.tile.cel{border-color:var(--celeste)}

/* ---------- Image placeholders ---------- */
.ph{
  position:relative;background:
    repeating-linear-gradient(135deg,rgba(21,23,15,.05) 0 2px,transparent 2px 11px),
    var(--paper-3);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.ph.green{background:
    repeating-linear-gradient(135deg,rgba(85,130,3,.13) 0 2px,transparent 2px 11px),
    var(--green-50)}
.ph.cel{background:
    repeating-linear-gradient(135deg,rgba(75,166,222,.16) 0 2px,transparent 2px 11px),
    var(--celeste-100)}
.ph.dark{background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 2px,transparent 2px 11px),
    #1a1c14;border-color:rgba(255,255,255,.14)}
.ph .ph-lab{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut);background:var(--paper-2);padding:6px 11px;border:1px solid var(--line);
}
.ph.dark .ph-lab{color:#b7bcae;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.ratio-16-9{aspect-ratio:16/9}
.ratio-4-3{aspect-ratio:4/3}
.ratio-1{aspect-ratio:1}
.ratio-3-4{aspect-ratio:3/4}

/* ---------- Pills / chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.04em;
  border:1px solid var(--line-2);padding:8px 13px;color:var(--ink-2);background:var(--paper-2);
}
.chip.green{border-color:var(--green);color:var(--green-700);background:var(--green-50)}
.chip.cel{border-color:var(--celeste);color:var(--celeste-700);background:var(--celeste-100)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:11px;font-weight:700;font-size:16px;
  letter-spacing:-.01em;padding:15px 26px;border:1px solid var(--ink);background:var(--ink);color:#fff;
  cursor:pointer;transition:.18s ease;
}
.btn:hover{background:#000;transform:translateY(-1px)}
.btn .arw{font-family:var(--mono);font-weight:600}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.green{background:var(--green);border-color:var(--green)}
.btn.green:hover{background:var(--green-700)}
.btn.cel{background:var(--celeste-700);border-color:var(--celeste-700)}
.btn.cel:hover{background:var(--celeste-900)}

/* ---------- Big stat ---------- */
.stat{display:flex;flex-direction:column;gap:6px}
.stat .n{font-weight:900;letter-spacing:-.04em;line-height:.9;font-size:clamp(46px,7vw,86px)}
.stat .n .u{font-size:.4em;font-weight:800;letter-spacing:-.02em;vertical-align:super;margin-left:.05em}
.stat .lab{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);max-width:24ch}
.stat.green .n{color:var(--green-700)}
.stat.cel .n{color:var(--celeste-700)}

/* ---------- Dark sections ---------- */
.dark{background:var(--ink);color:#fff}
.dark .lead{color:#c9cdc0}
.dark .body{color:#bcc0b4}
.dark .small{color:#9aa092}
.dark .divline{background:rgba(255,255,255,.16)}
.dark .card{background:#1d2016;border-color:rgba(255,255,255,.14)}
.dark .mono,.dark .sec-num{color:#9aa092}
.dark .chip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);color:#d9ddd1}

.green-bg{background:var(--green);color:#fff}
.green-bg .lead,.green-bg .body{color:rgba(255,255,255,.92)}
.cel-bg{background:var(--celeste-700);color:#fff}
.cel-bg .lead,.cel-bg .body{color:rgba(255,255,255,.94)}

/* ---------- Loop diagram (Economía Redonda) ---------- */
.loop{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto 1fr auto;
  place-items:center;gap:clamp(12px,2.4vw,22px);max-width:520px;margin:0 auto;width:100%}
.loop .core{grid-column:2;grid-row:2;width:clamp(150px,22vw,210px);aspect-ratio:1;
  border:1.5px solid rgba(255,255,255,.28);border-radius:50%;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.loop .core::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;
  border:1.5px solid transparent;border-top-color:var(--green);border-right-color:var(--green);transform:rotate(-8deg)}
.loop .core .sq{width:13px;height:13px;background:var(--green);margin-bottom:9px}
.loop .node{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.loop .node .sq{width:8px;height:8px;background:var(--green)}
.loop .node .nm{font-weight:800;font-size:clamp(15px,1.7vw,19px);letter-spacing:-.02em;color:#fff}
.loop .node .ni{font-family:var(--mono);font-size:11px;color:#9aa092;letter-spacing:.08em}
.loop .n-top{grid-column:2;grid-row:1}
.loop .n-left{grid-column:1;grid-row:2}
.loop .n-right{grid-column:3;grid-row:2}
.loop .n-bottom{grid-column:2;grid-row:3}

/* ---------- Process steps ---------- */
.steps{counter-reset:st;display:grid;gap:0}
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,40px);
  padding:clamp(26px,3.5vw,40px) 0;border-top:1px solid var(--line);align-items:start}
.step:last-child{border-bottom:1px solid var(--line)}
.step .sn{font-weight:900;font-size:clamp(34px,4vw,56px);letter-spacing:-.04em;color:var(--green);line-height:.9}
.step.cel .sn{color:var(--celeste-700)}

/* ---------- Color swatches ---------- */
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.sw{border:1px solid var(--line)}
.sw .chip-c{height:120px}
.sw .meta{padding:13px 15px;display:flex;flex-direction:column;gap:3px}
.sw .meta .nm{font-weight:700;font-size:15px}
.sw .meta .hx{font-family:var(--mono);font-size:12px;color:var(--mut);text-transform:uppercase}

/* ---------- Nav (sticky) ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(246,246,241,.86);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .row{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav .links{display:flex;gap:24px;align-items:center}
.nav .links a{font-size:14px;font-weight:600;color:var(--ink-2);letter-spacing:-.01em}
.nav .links a:hover{color:var(--green-700)}
.nav.dark{background:rgba(21,23,15,.84);border-color:rgba(255,255,255,.12)}
.nav.dark .links a{color:#c9cdc0}
@media(max-width:680px){.nav .links a:not(.btn){display:none}}

/* ---------- Footer ---------- */
.foot{background:var(--ink);color:#fff;padding:clamp(48px,7vw,84px) 0}
.foot .body{color:#aeb3a5}
.foot a:hover{color:var(--green)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
@media(max-width:680px){.foot-grid{grid-template-columns:1fr}}

/* ---------- Misc ---------- */
.eyebrow-rule{display:flex;align-items:center;gap:16px}
.eyebrow-rule::after{content:"";flex:1;height:1px;background:var(--line)}
.tag-architecture{display:flex;flex-direction:column;gap:0;border:1px solid var(--line)}
.arch-row{display:flex;align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid var(--line)}
.arch-row:last-child{border-bottom:0}
.arch-row .lvl{font-family:var(--mono);font-size:11px;color:var(--mut);letter-spacing:.1em;text-transform:uppercase;width:92px;flex:none}

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

/* ---------- Form / Contacto ---------- */
.form{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.field input,.field textarea,.field select{
  font-family:var(--ff);font-size:16px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line-2);padding:13px 15px;width:100%;border-radius:0;
  -webkit-appearance:none;appearance:none;transition:.15s ease}
.field input::placeholder,.field textarea::placeholder{color:#9aa092}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-100)}
.field textarea{resize:vertical;min-height:108px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.interest{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:560px){.interest{grid-template-columns:1fr}}
.opt{cursor:pointer;display:block}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt .box{border:1px solid var(--line-2);padding:15px 16px;display:flex;flex-direction:column;gap:3px;transition:.15s ease;height:100%}
.opt:hover .box{border-color:var(--ink)}
.opt input:focus-visible + .box{box-shadow:0 0 0 3px var(--green-100)}
.opt .box .t{font-weight:700;font-size:15px;letter-spacing:-.01em}
.opt .box .d{font-size:12.5px;color:var(--mut)}
.opt.green input:checked + .box{border-color:var(--green);background:var(--green-50);box-shadow:inset 0 0 0 1px var(--green)}
.opt.cel input:checked + .box{border-color:var(--celeste);background:var(--celeste-100);box-shadow:inset 0 0 0 1px var(--celeste)}
.opt.neu input:checked + .box{border-color:var(--ink);background:var(--paper-3);box-shadow:inset 0 0 0 1px var(--ink)}

/* ---------- Print / PDF ---------- */
@media print{
  @page{margin:14mm}
  html,body{background:#fff}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .nav{display:none!important}
  .reveal{opacity:1!important;transform:none!important}
  section{padding:24px 0!important;break-inside:avoid}
  .dark,.green-bg,.cel-bg{break-inside:avoid}
  .sec-head,.grid,.card,.step,.loop,.swatches,.stat{break-inside:avoid}
  h1,h2,h3,.display{break-after:avoid}
  a{text-decoration:none;color:inherit}
  .btn{display:none!important}
  header{padding-top:8px!important}
}