/* SolarGPU — hoja única. Sin JS, sin webfonts, sin dependencias.
   Tamaños fluidos con clamp(): no hay "versión móvil", hay una que escala.
   Los breakpoints sólo cambian ESTRUCTURA (columnas → pila), nunca tamaño.
   Ámbar = energía. Verde = cómputo. Nunca decorativos. */

:root{
  --ink:#14110C;
  --paper:#FBF8F1;
  --paper-2:#F5F1E7;
  --solar:#D9741A;
  --solar-lt:#F6E3CC;
  --green:#1B6B4F;
  --green-lt:#DCE9E2;
  --mute:#7C7264;
  --body:#3B3428;
  --line:#E4DCCC;
  --line-2:#D3C9B6;

  --serif:Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,"Times New Roman",serif;
  --sans:"Helvetica Neue",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  --pad:clamp(1.25rem,5vw,4rem);
  --sec:clamp(4.5rem,10vw,8rem);
  --max:70rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 clamp(1rem,.96rem + .22vw,1.09rem)/1.62 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
svg{max-width:100%; height:auto}

.sr,.skip{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip:focus{position:fixed; top:.6rem; left:.6rem; width:auto; height:auto; clip:auto;
  background:var(--ink); color:var(--paper); padding:.7rem 1.1rem; z-index:99; border-radius:3px}
:focus-visible{outline:2px solid var(--solar); outline-offset:3px}

section{padding:var(--sec) var(--pad)}
section[id]{scroll-margin-top:4.5rem}
.in{max-width:var(--max); margin-inline:auto}
.in.narrow{max-width:46rem}
.alt{background:var(--paper-2); border-block:1px solid var(--line)}

/* ── tipografía ─────────────────────────────────────────── */
h1,h2,h3{font-family:var(--serif); font-weight:700; letter-spacing:-.02em; margin:0; text-wrap:balance}
h1{font-size:clamp(2.1rem,1.05rem + 4.3vw,3.9rem); line-height:1.07}
h1 em{font-style:italic; font-weight:400; color:var(--solar)}
h2{font-size:clamp(1.5rem,1.05rem + 1.95vw,2.35rem); line-height:1.17; margin-bottom:.7em; max-width:24ch}
h3{font-size:clamp(1.02rem,.99rem + .18vw,1.14rem); line-height:1.32; letter-spacing:-.008em; margin:0 0 .35em}

.kicker{
  font:600 .74rem/1 var(--sans); letter-spacing:.19em; text-transform:uppercase;
  color:var(--mute); margin:0 0 clamp(1.3rem,3vw,2rem);
  display:flex; align-items:center; gap:.85em;
}
.kicker::before{content:""; width:1.6rem; height:2px; flex:0 0 auto;
  background:linear-gradient(90deg,var(--solar),var(--green))}
.kicker.light{color:#9A8E7C}

.lede{font-size:clamp(1.04rem,1rem + .35vw,1.2rem); line-height:1.58; color:var(--body); margin:0 0 clamp(2rem,5vw,3rem); max-width:36em}
.lede.wide{max-width:46em}
.lede strong{color:var(--ink); font-weight:600}
.foot-n{font-size:.88rem; color:var(--mute); max-width:54em; margin:1.3rem 0 0}

/* ── cabecera ───────────────────────────────────────────── */
header{
  position:sticky; top:0; z-index:30; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; padding:.85rem var(--pad);
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px) saturate(140%); border-bottom:1px solid var(--line);
}
.brand{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--ink);
  font:700 1.05rem var(--serif); letter-spacing:-.01em}
.mark{width:1.25rem; height:1.25rem; flex:0 0 auto}
.mark .m-disc{fill:var(--solar)}
.mark .m-ray{stroke:var(--solar); stroke-width:4; stroke-linecap:round; fill:none}
.mark .m-pin{stroke:var(--green); stroke-width:4; stroke-linecap:round; fill:none}
header nav{display:flex; align-items:center; gap:clamp(.9rem,2.5vw,1.9rem)}
header nav a{color:var(--mute); text-decoration:none; font-size:.92rem}
header nav a:hover{color:var(--ink)}

/* ── portada ────────────────────────────────────────────── */
.hero{
  padding-top:clamp(3rem,7vw,5.5rem);
  background:
    radial-gradient(90rem 34rem at 78% -14%, var(--solar-lt) 0%, transparent 62%),
    var(--paper);
}
.hero-in{max-width:var(--max); margin-inline:auto;
  display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.hero h1{margin-bottom:clamp(1.3rem,3vw,1.9rem)}

/* diagrama de flujo */
.flow{margin:0}
.flow svg{width:100%; display:block}
.flow .s-solar{color:var(--solar); stroke:var(--solar)}
.flow .s-ink{color:var(--ink); stroke:var(--ink)}
.flow .s-line{color:var(--line-2); stroke:var(--line-2)}
.flow .s-mute{color:var(--mute); stroke:var(--mute)}
.flow .s-green{color:var(--green); stroke:var(--green)}
.flow .lbl{font:600 10.5px var(--sans); fill:var(--mute); letter-spacing:.04em}
.flow .num{font:700 15px var(--serif); fill:var(--green)}
.flow .num.sm{font-size:13px; fill:var(--mute); font-weight:400}
.flow figcaption{margin-top:.9rem; font-size:.85rem; color:var(--mute); font-style:italic}

/* ── botones ────────────────────────────────────────────── */
.acts{display:flex; flex-wrap:wrap; gap:.75rem}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:.92em 1.6em;
  border-radius:100px; text-decoration:none; font:600 .95rem var(--sans);
  border:1.5px solid transparent; transition:background .15s,color .15s,border-color .15s}
.solid{background:var(--ink); color:var(--paper)}
.solid:hover{background:var(--solar)}
.ghost{border-color:var(--line-2); color:var(--ink); background:color-mix(in srgb,var(--paper) 70%,transparent)}
.ghost:hover{border-color:var(--ink)}
.ghost.inv{border-color:#4A4136; color:var(--paper); background:none}
.ghost.inv:hover{border-color:var(--paper)}
.close .solid{background:var(--solar); color:#fff}
.close .solid:hover{background:#EC8526}
.lnk{color:var(--solar); text-decoration:none; font-weight:600; white-space:nowrap}
.lnk:hover{text-decoration:underline; text-underline-offset:.22em}
header .lnk{color:var(--ink); text-decoration:underline; text-decoration-color:var(--solar);
  text-underline-offset:.3em; text-decoration-thickness:2px}

/* ── barras comparativas ────────────────────────────────── */
.bars{margin-top:clamp(1.5rem,4vw,2.5rem)}
.bar-row{margin-bottom:clamp(1.8rem,4vw,2.6rem)}
.bar-head{display:flex; flex-direction:column; gap:.15rem; margin-bottom:.7rem}
.who{font:700 .95rem var(--sans); color:var(--ink)}
.what{font-size:.86rem; color:var(--mute)}
.bar-track{display:flex; align-items:center; gap:.8rem; min-height:2.9rem}
.bar{height:2.9rem; border-radius:3px; flex:0 0 auto; min-width:5px}
.bar.solar{background:var(--solar)}
.bar.green{background:linear-gradient(90deg,var(--solar) 0%,var(--green) 62%)}
.bar-val{font-family:var(--serif); font-weight:700; font-size:clamp(1.35rem,.9rem + 1.7vw,2rem);
  line-height:1; letter-spacing:-.02em; white-space:nowrap}
.bar-val i{font-style:normal; font-size:.44em; font-weight:400; color:var(--mute); margin-left:.3em; letter-spacing:0}
.bar-val.solar{color:var(--solar)}
.bar-val.green{color:var(--green)}
.bar-val.inside{position:absolute; margin-left:1.1rem; color:#fff}
.bar-val.inside i{color:rgba(255,255,255,.72)}
.bar-track{position:relative}
.bar-note{display:flex; align-items:baseline; gap:.9rem; margin:0; padding-top:1.3rem;
  border-top:1px solid var(--line-2); color:var(--body); max-width:48em}
.x{font-family:var(--serif); font-weight:700; font-size:1.7rem; color:var(--ink); line-height:1; flex:0 0 auto}

/* ── filas ──────────────────────────────────────────────── */
.rows{list-style:none; margin:clamp(2.4rem,5vw,3.4rem) 0 0; padding:0; display:grid}
.rows li{display:grid; grid-template-columns:minmax(11rem,16rem) 1fr; gap:clamp(1rem,4vw,3rem);
  padding:clamp(1.15rem,3vw,1.55rem) 0; border-top:1px solid var(--line)}
.rows li:last-child{border-bottom:1px solid var(--line)}
.rows p{margin:0; color:var(--body); max-width:46em}

.ask{margin:clamp(2rem,5vw,3rem) 0 0; padding:.2rem 0 .2rem clamp(.9rem,2vw,1.2rem);
  border-left:3px solid var(--solar); max-width:50em; color:var(--body)}
#empresas .ask{border-left-color:var(--green)}
.ask strong{color:var(--ink)}

/* ── tabla ──────────────────────────────────────────────── */
.tw{overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad)}
table{width:100%; border-collapse:collapse; min-width:40rem}
caption{text-align:left}
thead th{font:600 .69rem/1 var(--sans); letter-spacing:.15em; text-transform:uppercase;
  color:var(--mute); text-align:left; padding:0 1rem .8rem 0;
  border-bottom:1px solid var(--line-2); white-space:nowrap}
tbody th,tbody td{padding:1rem 1rem 1rem 0; border-bottom:1px solid var(--line);
  text-align:left; font-weight:400}
tbody th{font-family:var(--serif); font-weight:700; font-size:1.05rem; color:var(--green); white-space:nowrap}
.ta-r,.pay{text-align:right; padding-right:0}
.pay{font-family:var(--serif); font-weight:700; font-size:1.1rem; font-variant-numeric:tabular-nums; white-space:nowrap}
.pay.big{color:var(--solar); font-size:1.28rem}
tbody tr:hover{background:color-mix(in srgb,var(--green-lt) 55%,transparent)}

/* ── pasos ──────────────────────────────────────────────── */
.steps{list-style:none; counter-reset:s; margin:clamp(2rem,4vw,3rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.8rem,4vw,3rem)}
.steps li{counter-increment:s; padding-top:1.2rem; border-top:2px solid var(--solar); position:relative}
.st-ic{width:2.1rem; height:2.1rem; display:block; margin-bottom:.9rem;
  fill:none; stroke:var(--solar); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.steps li::after{content:counter(s,decimal-leading-zero); position:absolute; top:1.15rem; right:0;
  font:700 .78rem var(--sans); letter-spacing:.1em; color:var(--line-2)}
.steps p{margin:0; color:var(--body)}

/* ── timeline macro vs micro ────────────────────────────── */
.tl{display:grid; gap:clamp(1.8rem,4vw,2.6rem); margin-top:clamp(1.5rem,4vw,2.2rem)}
.tl-row{padding-top:1.1rem; border-top:1px solid var(--line-2)}
.tl-row:last-child{border-top-color:var(--green)}
.tl-lbl{font:700 .95rem var(--sans); color:var(--ink); display:block; margin-bottom:.75rem}
.tl-track{display:flex; align-items:center; gap:.9rem; margin-bottom:.9rem}
.tl-bar{height:.6rem; border-radius:100px; flex:0 0 auto}
.tl-bar.mute{width:min(62%,26rem); background:repeating-linear-gradient(90deg,var(--line-2) 0 7px,transparent 7px 13px)}
.tl-bar.green{width:min(7%,3.4rem); background:var(--green)}
.tl-val{font-size:.92rem; color:var(--mute)}
.tl-val.strong{color:var(--green); font-weight:600}
.lst{list-style:none; margin:0; padding:0}
.lst li{position:relative; padding-left:1.4rem; margin-bottom:.45rem; font-size:.96rem; color:var(--body)}
.lst li::before{position:absolute; left:0; top:-.04em; font-weight:600}
.neg li::before{content:"—"; color:var(--mute)}
.pos li::before{content:"→"; color:var(--green)}

/* ── faq ────────────────────────────────────────────────── */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:1.05rem 0; font-weight:600;
  display:flex; justify-content:space-between; align-items:baseline; gap:1.2rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--solar); font-weight:400; font-size:1.25rem; line-height:1; flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 1.1rem; color:var(--body); max-width:58em; padding-right:2rem}

/* ── cierre ─────────────────────────────────────────────── */
.close{background:var(--ink); color:var(--paper)}
.close h2{color:var(--paper)}
.close .lede{color:#B7AB98}
.mail{margin:clamp(2rem,5vw,2.8rem) 0 0}
.mail a{color:var(--solar); text-decoration:none; font-size:1.05rem}
.mail a:hover{text-decoration:underline; text-underline-offset:.22em}
footer{background:var(--ink); color:#8B8071; padding:0 var(--pad) 2.6rem}
.fbar{border-top:1px solid #2B241C; padding-top:1.5rem; display:flex; flex-wrap:wrap;
  justify-content:space-between; gap:.6rem 1.5rem; font-size:.85rem}
.fbar .dim{color:var(--solar)}

/* ── estructura, no tamaño ──────────────────────────────── */
@media (max-width:60rem){
  .hero-in{grid-template-columns:1fr; gap:clamp(2.2rem,6vw,3rem)}
  .flow{max-width:26rem}
}
@media (max-width:52rem){
  .steps{grid-template-columns:1fr}
  .rows li{grid-template-columns:1fr; gap:.35rem}
  header nav a:not(.lnk){display:none}
}
@media (max-width:34rem){
  .bar-val.inside{position:static; margin-left:0; color:var(--green)}
  .bar-val.inside i{color:var(--mute)}
  .bar-track{flex-wrap:wrap; gap:.55rem}
  .bar.green{width:100% !important}
  .bar.solar{min-width:8px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important}}