/* SolarGPU — calculadora y captación de leads.
   Aparte de style.css porque sólo hace falta donde hay formulario, y así la
   hoja principal no crece. Hereda las variables de :root. */

/* ── calculadora ──────────────────────────────────────────── */
.calc{display:grid; grid-template-columns:1.32fr .68fr; gap:clamp(1.5rem,4vw,3rem);
  align-items:start; margin-top:clamp(1.5rem,4vw,2.2rem)}
.calc-in{min-width:0}

.fld{display:block; font:700 .95rem var(--sans); color:var(--ink); margin-bottom:.85rem}
.hint{display:block; font-weight:400; font-size:.84rem; color:var(--mute); margin-top:.2rem}

.rng{display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap}
input[type=range]{flex:1 1 13rem; -webkit-appearance:none; appearance:none;
  background:none; height:2rem; cursor:pointer; min-width:0}
input[type=range]::-webkit-slider-runnable-track{height:.45rem; border-radius:100px;
  background:linear-gradient(90deg,var(--solar),var(--green))}
input[type=range]::-moz-range-track{height:.45rem; border-radius:100px;
  background:linear-gradient(90deg,var(--solar),var(--green))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:1.5rem; height:1.5rem;
  border-radius:50%; background:var(--ink); border:3px solid var(--paper);
  box-shadow:0 1px 5px rgba(0,0,0,.3); margin-top:-.53rem}
input[type=range]::-moz-range-thumb{width:1.5rem; height:1.5rem; border-radius:50%;
  background:var(--ink); border:3px solid var(--paper); box-shadow:0 1px 5px rgba(0,0,0,.3)}
.rng-n{display:flex; align-items:baseline; gap:.4rem; flex:0 0 auto}
.rng-n input{width:6.4rem; font:700 1.15rem var(--serif); padding:.38rem .55rem;
  border:1px solid var(--line-2); border-radius:4px; background:var(--paper); color:var(--ink);
  text-align:right; font-variant-numeric:tabular-nums}
.rng-n span{font-size:.85rem; color:var(--mute)}
.rng-marks{display:flex; justify-content:space-between; font-size:.74rem; color:var(--mute);
  margin:-.15rem .2rem 0; font-variant-numeric:tabular-nums}

.calc-cmp{margin-top:clamp(1.8rem,4vw,2.6rem); display:grid; gap:1rem}
.cmp-row{display:grid; grid-template-columns:9.5rem 1fr auto; gap:.9rem; align-items:center}
.cmp-lbl{font-size:.86rem; color:var(--mute)}
.cmp-track{background:var(--line); border-radius:100px; height:1.5rem; overflow:hidden}
.cmp-bar{height:100%; border-radius:100px; transition:width .18s ease-out; min-width:3px}
.cmp-bar.mute{background:var(--line-2)}
.cmp-bar.grad{background:linear-gradient(90deg,var(--solar),var(--green))}
.cmp-val{font-family:var(--serif); font-weight:700; font-size:1.15rem; white-space:nowrap;
  font-variant-numeric:tabular-nums; color:var(--mute)}
.cmp-val.strong{color:var(--green); font-size:1.5rem}

.calc-out{background:var(--paper); border:1px solid var(--line-2); border-radius:6px;
  padding:clamp(1.2rem,3vw,1.7rem); display:flex; flex-direction:column}
.co-lbl{font:600 .68rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--mute)}
.co-nodo{font-family:var(--serif); font-weight:700; line-height:1.05; letter-spacing:-.03em;
  font-size:clamp(2.1rem,1.4rem + 1.7vw,2.8rem); color:var(--green); margin-top:.3rem}
.co-desc{font-size:.85rem; color:var(--mute); margin:.35rem 0 1.1rem; min-height:2.6em; line-height:1.4}
.co-dl{margin:0; display:grid; gap:.5rem}
.co-dl>div{display:flex; justify-content:space-between; align-items:baseline; gap:.8rem;
  padding-top:.5rem; border-top:1px solid var(--line)}
.co-dl dt{font-size:.85rem; color:var(--mute)}
.co-dl dd{margin:0; font-weight:600; font-variant-numeric:tabular-nums; text-align:right}
.co-dl dd.mult{color:var(--solar); font-family:var(--serif); font-size:1.2rem}
.hid{display:none}

/* ── formulario ───────────────────────────────────────────── */
.lead{margin-top:clamp(2.5rem,6vw,4rem); padding-top:clamp(2rem,4vw,2.8rem);
  border-top:2px solid var(--line-2)}
.lead-h{font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem); margin-bottom:.3em}
.lead-p{color:var(--mute); font-size:.95rem; margin:0 0 1.7rem; max-width:46em}
.lead-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem 1.2rem}
.f-campo{display:flex; flex-direction:column; gap:.35rem;
  font:600 .82rem var(--sans); color:var(--body)}
.f-campo.wide{grid-column:1/-1}
.f-campo input,.f-campo select,.f-campo textarea{
  font:400 .98rem var(--sans); color:var(--ink); background:var(--paper);
  border:1px solid var(--line-2); border-radius:4px; padding:.62rem .7rem; width:100%;
  transition:border-color .15s}
.f-campo input:focus,.f-campo select:focus,.f-campo textarea:focus{
  border-color:var(--solar); outline:none}
.f-campo textarea{resize:vertical; min-height:3.2rem}
.f-campo.chk{grid-column:1/-1; flex-direction:row; align-items:flex-start; gap:.6rem;
  font-weight:400; font-size:.88rem; color:var(--mute)}
.f-campo.chk input{width:auto; margin-top:.15rem; accent-color:var(--solar)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.lead-foot{display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; margin-top:1.6rem}
.f-estado{font-size:.9rem}
.f-estado.ok{color:var(--green); font-weight:600}
.f-estado.err{color:#B4472B}
.f-estado a{color:inherit}
button.btn{cursor:pointer; font-family:var(--sans)}
button.btn[disabled]{opacity:.55; cursor:progress}

/* cuatro pasos: 4 → 2 → 1 columnas */
.steps.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:64rem){ .steps.four{grid-template-columns:repeat(2,1fr)} }
@media (max-width:38rem){ .steps.four{grid-template-columns:1fr} }

@media (max-width:60rem){
  .calc{grid-template-columns:1fr}
  .lead-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:40rem){
  .lead-grid{grid-template-columns:1fr}
  .cmp-row{grid-template-columns:1fr; gap:.3rem}
  .cmp-track{height:1.2rem}
  .rng-n input{width:5.4rem}
}