/* =========================================================
   IRRADIA — Cotizador Web · Estilos
   Tokens idénticos a design.md / irradia-web (light mode).
   Todo namespaced bajo .cw — no colisiona con la web.
   Fuentes: en producción ya viven en irradia-web/fonts; aquí
   se referencian por ruta relativa solo para el sandbox.
   ========================================================= */

/* Fuentes Inter/Outfit: ya declaradas en style.css del sitio */

.cw{
  --cream:#FBF8F2; --pearl:#F4F0E8; --card:#FFFFFF;
  --ink:#2B2F36; --body-c:#585E68;
  --orange:#E8590C; --amber:#F5A300;
  --grad:linear-gradient(135deg,#E8590C 0%,#F5A300 100%);
  --sh-1:0 4px 14px rgba(43,47,54,.06);
  --sh-2:0 14px 34px rgba(43,47,54,.10);
  --sh-3:0 24px 54px rgba(43,47,54,.14);
  --display:'Inter',system-ui,sans-serif;
  --body:'Outfit',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);

  font-family:var(--body); color:var(--body-c);
  background:var(--cream);
  padding:clamp(64px,9vw,120px) 24px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.cw *{margin:0;padding:0;box-sizing:border-box}
.cw-wrap{max-width:1060px;margin:0 auto}

/* ---- Tipos base ---- */
.cw-eyebrow{
  font-family:var(--display);font-weight:600;font-size:11px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--orange);
  display:block;text-align:center;margin-bottom:18px;
}
.cw-title{
  font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:1.02;
  font-size:clamp(2.2rem,5.4vw,4.2rem);color:var(--ink);text-align:center;
}
.cw-sub{
  font-weight:300;font-size:clamp(1rem,1.8vw,1.2rem);
  text-align:center;margin:16px auto 0;max-width:520px;
}

/* ---- Pasos (wizard) ---- */
.cw-step{display:none}
.cw-step.activo{display:block;animation:cwIn .6s var(--ease) both}
@keyframes cwIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .cw-step.activo{animation:none}
  .cw *{transition:none!important}
}

/* ---- Paso 1: entrada ---- */
.cw-prop{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:clamp(26px,3.4vw,38px);flex-wrap:wrap;
}
.cw-prop>span{font-size:.92rem;font-weight:300}

.cw-entradas{
  display:grid;grid-template-columns:1fr 1fr;gap:22px;
  margin-top:clamp(36px,5vw,56px);
}
.cw-card{
  background:var(--card);border-radius:22px;box-shadow:var(--sh-1);
  padding:clamp(26px,3.4vw,40px);
  transition:box-shadow .4s var(--ease),transform .4s var(--ease);
  display:flex;flex-direction:column;gap:16px;
}
.cw-card:hover{box-shadow:var(--sh-2);transform:translateY(-3px)}
.cw-card h3{
  font-family:var(--display);font-weight:800;font-size:1.25rem;
  letter-spacing:-.02em;color:var(--ink);
}
.cw-card p{font-size:.95rem;font-weight:300}

.cw-drop{
  border:2px dashed rgba(232,89,12,.35);border-radius:16px;
  padding:34px 18px;text-align:center;cursor:pointer;
  transition:border-color .3s,background .3s;
  font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--ink);
}
.cw-drop:hover,.cw-drop.sobre{border-color:var(--orange);background:rgba(232,89,12,.05)}
.cw-drop small{display:block;margin-top:8px;font-family:var(--body);font-weight:300;color:var(--body-c)}
.cw-privacidad{font-size:.8rem;font-weight:300;opacity:.85}
.cw-privacidad b{color:var(--ink);font-weight:600}

.cw-toggle{display:flex;background:var(--pearl);border-radius:100px;padding:4px;width:max-content}
.cw-toggle button{
  font-family:var(--display);font-weight:700;font-size:.85rem;letter-spacing:-.01em;
  border:0;background:transparent;color:var(--body-c);cursor:pointer;
  padding:10px 22px;border-radius:100px;transition:all .3s var(--ease);
}
.cw-toggle button.activo{background:var(--ink);color:#fff;box-shadow:var(--sh-1)}

.cw-monto{position:relative;display:flex;align-items:center}
.cw-monto span{
  position:absolute;left:20px;font-family:var(--display);font-weight:800;
  font-size:1.4rem;color:var(--orange);
}
.cw-monto input{
  width:100%;border:2px solid var(--pearl);border-radius:16px;background:#fff;
  font-family:var(--display);font-weight:800;font-size:1.6rem;letter-spacing:-.02em;
  color:var(--ink);padding:16px 20px 16px 48px;outline:none;
  transition:border-color .3s;
}
.cw-monto input:focus{border-color:var(--orange)}
.cw-monto input::placeholder{color:rgba(43,47,54,.25);font-weight:700}
.cw-hint{font-size:.8rem;font-weight:300}

.cw-btn{
  font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em;
  padding:18px 40px;border-radius:100px;border:0;cursor:pointer;
  background:var(--grad);color:#fff;box-shadow:var(--sh-2);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  display:inline-block;text-decoration:none;text-align:center;
}
.cw-btn:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
.cw-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.cw-btn-sec{
  background:transparent;color:var(--ink);box-shadow:none;
  border:2px solid rgba(43,47,54,.18);
}
.cw-btn-sec:hover{border-color:var(--ink);box-shadow:none}
.cw-acciones{display:flex;justify-content:center;gap:16px;margin-top:34px;flex-wrap:wrap}
.cw-error{
  text-align:center;color:var(--orange);font-weight:400;font-size:.92rem;
  margin-top:16px;min-height:1.3em;
}

/* ---- Paso 2: resultado ---- */
.cw-chip{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--orange);
  border:1.5px solid rgba(232,89,12,.4);border-radius:100px;padding:8px 18px;
  background:rgba(232,89,12,.06);
}
.cw-res-head{text-align:center;margin-bottom:8px}

/* Héroe: rango de inversión — el número honesto, protagonista */
.cw-hero{text-align:center;margin-top:22px}
.cw-hero-rango{
  font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:.98;
  font-size:clamp(2.6rem,7.6vw,6.2rem);
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.cw-hero-cap{font-weight:300;font-size:1.05rem;margin-top:12px;color:var(--body-c)}
.cw-hero-cfe{
  font-weight:300;font-size:clamp(1.05rem,2.2vw,1.35rem);
  margin-top:18px;color:var(--body-c);
}
.cw-hero-cfe b{
  font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.6rem,3.6vw,2.4rem);color:var(--ink);
}

/* Financiamiento: co-protagonista — enganche y mensualidad al mismo nivel */
.cw-fin{
  background:var(--card);border-radius:22px;box-shadow:var(--sh-2);
  margin-top:clamp(30px,4.2vw,46px);padding:clamp(26px,4vw,42px);
}
.cw-fin-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cw-fin-col{text-align:center}
.cw-fin-col b{
  display:block;font-family:var(--display);font-weight:800;letter-spacing:-.04em;
  font-size:clamp(1.9rem,4.4vw,3rem);color:var(--ink);
}
.cw-fin-col.naranja b{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.cw-fin-col span{font-size:.88rem;font-weight:300}
.cw-fin-frase{
  text-align:center;font-size:.98rem;font-weight:300;line-height:1.6;
  border-top:1px solid var(--pearl);margin-top:20px;padding-top:18px;
}
.cw-fin-frase b{font-family:var(--display);font-weight:700;color:var(--ink)}
.cw-fin.solo-frase .cw-fin-grid{display:none}
.cw-fin.solo-frase .cw-fin-frase{border-top:0;margin-top:0;padding-top:0}

/* Beneficio fiscal — negocio / PDBT */
.cw-fiscal{
  background:var(--pearl);border-left:4px solid var(--amber);
  border-radius:18px;padding:24px 28px;margin-top:18px;
}
.cw-fiscal>b{
  display:block;font-family:var(--display);font-weight:800;font-size:1.05rem;
  color:var(--ink);margin-bottom:8px;
}
.cw-fiscal p{font-size:.92rem;font-weight:300;line-height:1.65}
.cw-fiscal p b{font-family:var(--display);font-weight:800;color:var(--orange)}
.cw-datos{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin-top:clamp(34px,4.6vw,52px);
}
.cw-dato{
  background:var(--card);border-radius:18px;box-shadow:var(--sh-1);
  padding:22px 20px;text-align:center;
}
.cw-dato b{
  display:block;font-family:var(--display);font-weight:800;font-size:1.5rem;
  letter-spacing:-.03em;color:var(--ink);
}
.cw-dato span{font-size:.82rem;font-weight:300}

/* Link de rescate dentro del mensaje de error */
.cw-error a{
  color:var(--orange);font-family:var(--display);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;
}

/* Aviso inmueble rentado */
.cw-aviso-renta{
  background:var(--pearl);border-left:4px solid var(--orange);
  border-radius:18px;padding:20px 26px;margin-top:18px;
  font-size:.92rem;font-weight:300;line-height:1.6;
}
.cw-aviso-renta b{
  font-family:var(--display);font-weight:700;color:var(--ink);
}

/* Disclaimer */
.cw-disclaimer{
  margin-top:26px;background:var(--pearl);border-radius:18px;
  padding:24px 28px;font-size:.85rem;font-weight:300;line-height:1.65;
}
.cw-disclaimer b{
  display:block;font-family:var(--display);font-weight:700;font-size:.9rem;
  color:var(--ink);margin-bottom:6px;
}

/* ---- Paso 3: CTA ---- */
.cw-cta{
  margin-top:clamp(40px,5vw,60px);text-align:center;
  background:var(--ink);border-radius:26px;box-shadow:var(--sh-3);
  padding:clamp(36px,5vw,56px) clamp(24px,4vw,48px);
}
.cw-cta h3{
  font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.5rem,3.2vw,2.3rem);color:#fff;
}
.cw-cta p{color:rgba(255,255,255,.75);font-weight:300;margin:12px 0 26px}
.cw-form{
  display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap;
}
.cw-form input{
  font-family:var(--body);font-size:.95rem;border:0;border-radius:100px;
  padding:14px 22px;min-width:200px;outline:none;background:rgba(255,255,255,.12);
  color:#fff;
}
.cw-form input::placeholder{color:rgba(255,255,255,.5)}
.cw-form button{
  font-family:var(--display);font-weight:700;font-size:.9rem;border:0;cursor:pointer;
  border-radius:100px;padding:14px 26px;background:rgba(255,255,255,.14);color:#fff;
  transition:background .3s;
}
.cw-form button:hover{background:rgba(255,255,255,.24)}
.cw-form-ok{color:#7ADB8F;font-weight:400;margin-top:14px;min-height:1.3em;font-size:.9rem}
.cw-cta-alt{font-size:.82rem;color:rgba(255,255,255,.5);margin-top:18px}

/* ---- Estudio Energético — media tensión / gran escala ---- */
.cw-estudio{
  background:var(--ink);border-radius:26px;box-shadow:var(--sh-3);
  margin-top:clamp(30px,4.2vw,46px);padding:clamp(32px,5vw,52px) clamp(24px,4vw,48px);
  text-align:center;
}
.cw-est-eyebrow{
  display:inline-block;font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--amber);
  border:1.5px solid rgba(245,163,0,.45);border-radius:100px;padding:8px 18px;
  background:rgba(245,163,0,.08);
}
.cw-est-lista{
  list-style:none;margin:26px auto 0;max-width:540px;text-align:left;
  display:grid;gap:12px;padding:0;
}
.cw-est-lista li{
  color:rgba(255,255,255,.82);font-weight:300;font-size:.95rem;
  padding-left:28px;position:relative;line-height:1.5;
}
.cw-est-lista li::before{
  content:'✓';position:absolute;left:0;color:var(--amber);
  font-family:var(--display);font-weight:800;
}
.cw-est-garantia{color:rgba(255,255,255,.85);font-weight:300;font-size:1.15rem;margin-top:26px}
.cw-est-garantia b{
  font-family:var(--display);font-weight:800;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.cw-est-form{display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.cw-est-form input{
  font-family:var(--body);font-size:.95rem;border:0;border-radius:100px;
  padding:14px 22px;min-width:180px;outline:none;background:rgba(255,255,255,.12);
  color:#fff;
}
.cw-est-form input::placeholder{color:rgba(255,255,255,.5)}
.cw-est-micro{color:rgba(255,255,255,.55);font-size:.82rem;font-weight:300;margin-top:14px}
.cw-est-alt{margin-top:16px;font-size:.9rem;font-weight:300;color:rgba(255,255,255,.7)}
.cw-est-alt a{color:var(--amber);font-family:var(--display);font-weight:600;text-decoration:none}
.cw-est-alt a:hover{text-decoration:underline}

/* ---- Pantallas alternas (consumo bajo) ---- */
.cw-alt{text-align:center;padding:clamp(30px,5vw,50px) 0}
.cw-alt h3{
  font-family:var(--display);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(1.8rem,4.4vw,3rem);color:var(--ink);margin:18px 0 14px;
}
.cw-alt p{max-width:480px;margin:0 auto 28px;font-weight:300}

/* ---- Responsive ---- */
@media (max-width:860px){
  .cw-datos{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .cw-entradas{grid-template-columns:1fr}
  .cw-fin-grid{grid-template-columns:1fr}
}
