/* Cotizador Sistema Solar
   ------------------------------------------------------------------
   Todo cuelga de .sisc para que el tema de WordPress no lo pise
   y para que el cotizador tampoco pise nada del tema.
   ------------------------------------------------------------------ */

.sisc{
  --sisc-bg:#F7F6F2; --sisc-surface:#fff; --sisc-surface-2:#F7F2E3;
  --sisc-ink:#26251F; --sisc-ink-2:#5C5A50; --sisc-ink-3:#8B8779;
  --sisc-line:#E4E0D4; --sisc-line-soft:#EFEBE0;
  --sisc-gold:#EDB524; --sisc-gold-deep:#9A7614;
  --sisc-red:#B03A2B; --sisc-green:#2E6F4E; --sisc-green-soft:#EAF3EE;
  /* Verde exacto de WhatsApp con tinta oscura: 7,75:1 de contraste. */
  --sisc-wa:#25D366; --sisc-wa-claro:#1FBF5B; --sisc-wa-tinta:#0A2E1F;
  --sisc-f:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sisc-m:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  all:initial;
  display:block;
  font-family:var(--sisc-f);
  font-size:16px;
  line-height:1.6;
  color:var(--sisc-ink);
  box-sizing:border-box;
  max-width:1080px;
  margin:0 auto;
  text-align:left;
}
.sisc *,.sisc *::before,.sisc *::after{box-sizing:border-box}
.sisc p,.sisc h2,.sisc h3,.sisc ul,.sisc li{margin:0;padding:0}

/* ---------- cabecera opcional ---------- */
.sisc-cab{margin-bottom:20px}
.sisc-titulo{font-size:clamp(22px,3vw,30px);line-height:1.15;letter-spacing:-.02em;
  font-weight:700;margin:0 0 6px;color:var(--sisc-ink)}
.sisc-bajada{font-size:16px;color:var(--sisc-ink-2);max-width:58ch;margin:0}

/* ---------- caja ---------- */
.sisc-cuerpo{
  display:grid;grid-template-columns:1fr 300px;
  background:var(--sisc-surface);
  border:1px solid var(--sisc-line);
  border-radius:12px;
  box-shadow:0 1px 2px rgba(38,37,31,.05),0 10px 30px rgba(38,37,31,.06);
  overflow:hidden;
}
@media(max-width:820px){.sisc-cuerpo{grid-template-columns:1fr}}
.sisc .form{padding:26px 28px;min-width:0}
.sisc .aside{background:var(--sisc-surface-2);border-left:1px solid var(--sisc-line);padding:24px 22px;min-width:0}
@media(max-width:820px){.sisc .aside{border-left:none;border-top:1px solid var(--sisc-line)}}
@media(max-width:560px){.sisc .form{padding:20px 18px}.sisc .aside{padding:20px 18px}}

/* ---------- pasos ---------- */
.sisc .pasos{display:flex;align-items:center;margin-bottom:22px}
.sisc .paso-i{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--sisc-ink-3);font-weight:500;white-space:nowrap}
.sisc .paso-i b{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--sisc-line);
  display:grid;place-items:center;font-family:var(--sisc-m);font-size:11.5px;font-weight:500;flex-shrink:0}
.sisc .paso-i.on{color:var(--sisc-ink)}
.sisc .paso-i.on b{background:var(--sisc-gold);border-color:var(--sisc-gold);color:#26251F}
/* Los pasos cumplidos van en el dorado de marca: el verde queda sólo para WhatsApp. */
.sisc .paso-i.ok b{background:var(--sisc-gold-deep);border-color:var(--sisc-gold-deep);color:#fff}
.sisc .paso-i.ok{color:var(--sisc-ink-2)}
/* En pantallas angostas se muestran los círculos y sólo la etiqueta del paso activo. */
@media(max-width:620px){
  .sisc .paso-i{gap:0}
  .sisc .paso-i .et{display:none}
  .sisc .paso-i.on .et{display:inline;margin-left:9px}
  .sisc .sep{margin:0 8px}
}
.sisc .sep{flex:1;height:1px;background:var(--sisc-line);margin:0 12px;min-width:8px}
@media(max-width:560px){.sisc .paso-i span,.sisc .paso-i{font-size:12px}}

/* ---------- preguntas ---------- */
.sisc .q{margin-bottom:20px}
.sisc .q > label{display:block;font-size:14px;font-weight:600;margin-bottom:3px;color:var(--sisc-ink)}
.sisc .hint{font-size:12.5px;color:var(--sisc-ink-3);margin:0 0 9px}
.sisc .opcional{color:var(--sisc-ink-3);font-weight:400}
.sisc .opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.sisc .opt{border:1.5px solid var(--sisc-line);border-radius:9px;padding:12px 10px;text-align:center;
  cursor:pointer;background:var(--sisc-surface);transition:border-color .12s,background .12s;user-select:none}
.sisc .opt:hover{border-color:var(--sisc-gold)}
.sisc .opt.sel{border-color:var(--sisc-gold);background:var(--sisc-surface-2)}
.sisc .opt .ic{font-size:22px;line-height:1;display:block;margin-bottom:6px}
.sisc .opt .t{font-size:13.5px;font-weight:600;display:block;color:var(--sisc-ink)}
.sisc .opt .s{font-size:11.5px;color:var(--sisc-ink-3);display:block;margin-top:2px}

.sisc input,.sisc select{
  width:100%;font-family:inherit;font-size:15px;padding:11px 12px;
  border:1.5px solid var(--sisc-line);border-radius:9px;
  background:var(--sisc-surface);color:var(--sisc-ink);
  -webkit-appearance:none;appearance:none;margin:0;height:auto;line-height:1.4;
}
.sisc select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%238B8779' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.sisc input:focus,.sisc select:focus{outline:none;border-color:var(--sisc-gold)}
.sisc .dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.sisc .dos{grid-template-columns:1fr}}

.sisc .acciones{display:flex;justify-content:space-between;gap:10px;margin-top:26px;
  padding-top:18px;border-top:1px solid var(--sisc-line-soft)}
.sisc button{font-family:inherit;font-size:14.5px;font-weight:600;padding:11px 22px;
  border-radius:99px;border:1.5px solid var(--sisc-line);background:var(--sisc-surface);
  color:var(--sisc-ink);cursor:pointer;line-height:1.3;width:auto;text-transform:none;letter-spacing:normal}
.sisc button:hover{border-color:var(--sisc-gold)}
.sisc button.pri{background:var(--sisc-gold);border-color:var(--sisc-gold);color:#26251F}
.sisc button.pri:hover{filter:brightness(1.06)}
.sisc button.wa{background:var(--sisc-wa);border-color:var(--sisc-wa);color:var(--sisc-wa-tinta);
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 20px;line-height:1.25;font-size:15px;font-weight:700}
.sisc button.wa:hover{background:var(--sisc-wa-claro);border-color:var(--sisc-wa-claro);filter:none}
.sisc button.wa svg{width:20px;height:20px;flex-shrink:0;fill:currentColor}
.sisc button:disabled{opacity:.45;cursor:not-allowed}

.sisc .avanzado{margin-top:8px}
.sisc .avanzado summary{font-size:13px;color:var(--sisc-gold-deep);cursor:pointer;font-weight:500;list-style:none}
.sisc .avanzado summary::-webkit-details-marker{display:none}
.sisc .avanzado summary::before{content:"+ ";font-family:var(--sisc-m)}
.sisc .avanzado[open] summary::before{content:"− "}
.sisc .avanzado .caja{padding:16px 0 0}

/* trampa para robots: invisible para personas, visible para un bot */
.sisc .sisc-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.sisc .sisc-error{font-size:13px;color:var(--sisc-red);margin:10px 0 0;text-align:center}

/* ---------- panel de resultado ---------- */
.sisc .res-t{font-family:var(--sisc-m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sisc-ink-3);margin-bottom:14px}
.sisc .res-n{font-size:31px;font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.sisc .res-l{font-size:12px;color:var(--sisc-ink-3);margin-bottom:16px}
.sisc .res-fila{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:13.5px;padding:7px 0;border-bottom:1px solid var(--sisc-line-soft)}
.sisc .res-fila span{color:var(--sisc-ink-2)}
.sisc .res-fila b{font-family:var(--sisc-m);font-variant-numeric:tabular-nums;font-weight:500;text-align:right}
.sisc .res-nota{font-size:11.5px;color:var(--sisc-ink-3);line-height:1.55;margin-top:14px}
.sisc .res-alcance{margin-top:16px;padding-top:14px;border-top:1px solid var(--sisc-line)}
.sisc .res-alcance-t{font-family:var(--sisc-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sisc-gold-deep);margin:0 0 6px}
.sisc .res-alcance ul{margin:0 0 14px;padding-left:16px;list-style:disc}
.sisc .res-alcance li{font-size:12px;color:var(--sisc-ink-2);line-height:1.5;margin-bottom:4px;display:list-item}
.sisc .res-alcance li::marker{color:var(--sisc-gold-deep)}
.sisc .res-alcance-p{font-size:11.5px;color:var(--sisc-ink-3);margin:0;font-style:italic}
.sisc .vacio-res{font-size:13.5px;color:var(--sisc-ink-3);line-height:1.6}
.sisc .badge{display:inline-block;font-family:var(--sisc-m);font-size:10.5px;padding:2px 8px;
  border-radius:99px;background:var(--sisc-green-soft);color:var(--sisc-green);margin-bottom:12px}

/* ---------- pantalla de gracias ---------- */
.sisc .sisc-ok{text-align:center;padding:34px 10px}
.sisc .sisc-ok .tick{font-size:40px;line-height:1}
.sisc .sisc-ok h3{margin:10px 0 6px;font-size:19px;font-weight:600}
.sisc .sisc-ok p{color:var(--sisc-ink-2);margin:0 auto 18px;max-width:38ch}
.sisc .sisc-wa-link{display:inline-block;background:var(--sisc-wa);color:var(--sisc-wa-tinta);text-decoration:none;
  font-weight:600;font-size:14.5px;padding:12px 24px;border-radius:99px}
.sisc .sisc-wa-link:hover{background:var(--sisc-wa-claro);color:var(--sisc-wa-tinta)}

/* ---------- modo oscuro, si el tema lo usa ---------- */
@media (prefers-color-scheme:dark){
  .sisc.sisc-auto{
    --sisc-bg:#15140F; --sisc-surface:#1D1C16; --sisc-surface-2:#26241B;
    --sisc-ink:#F2EFE4; --sisc-ink-2:#BAB5A4; --sisc-ink-3:#8B8676;
    --sisc-line:#35322A; --sisc-line-soft:#2A2820; --sisc-gold-deep:#EDB524;
    --sisc-red:#E58170; --sisc-green:#2E6F4E; --sisc-green-soft:#17251D;
  }
}