/* ═══════════════════════════════════════════════════
   TRAVELUIFER — calculadora.css
   Calculadora de cotización (charla Unisimón)
   ═══════════════════════════════════════════════════ */

.calc-hero { padding:150px 64px 50px; text-align:center; }
.calc-hero-inner { max-width:720px; margin:0 auto; }
.calc-hero p { font-size:.88rem; line-height:1.95; color:rgba(242,239,232,.6); margin-top:10px; }

.calc-wrap { padding:0 64px 140px; display:flex; justify-content:center; }
.wizard-card {
  width:100%; max-width:640px; border:1px solid var(--border);
  background:var(--dark); padding:48px 44px;
}

.progress-track { display:flex; gap:6px; margin-bottom:10px; }
.progress-seg { flex:1; height:2px; background:rgba(201,168,76,.15); }
.progress-seg.done { background:var(--gold); }
.progress-label { font-size:.6rem; letter-spacing:2px; color:var(--gray); text-transform:uppercase; margin-bottom:40px; }

.wiz-step { display:none; }
.wiz-step.active { display:block; animation:fadeUp .5s ease; }
.wiz-step h3 {
  font-family:'Unbounded', sans-serif; font-size:1.2rem; font-weight:700;
  text-transform:uppercase; margin-bottom:8px; letter-spacing:0; line-height:1.35;
}
.wiz-step .wiz-sub { font-size:.78rem; color:rgba(242,239,232,.5); margin-bottom:28px; line-height:1.7; }

.wiz-error { font-size:.65rem; color:#e0785a; margin-top:10px; display:none; }
.wiz-error.show { display:block; }

.wiz-nav { display:flex; justify-content:space-between; align-items:center; margin-top:36px; gap:16px; }
.wiz-back {
  background:none; border:none; color:var(--gray); font-size:.65rem;
  letter-spacing:2px; text-transform:uppercase; cursor:none; padding:12px 0;
}
.wiz-back:hover { color:var(--white); }
.wiz-next, .wiz-submit {
  background:var(--gold); color:var(--black); border:none;
  padding:14px 36px; font-size:.65rem; font-weight:600; letter-spacing:2.5px;
  text-transform:uppercase; cursor:none; transition:all .3s;
}
.wiz-next:hover, .wiz-submit:hover { background:var(--gold-light); transform:translateY(-2px); }
.wiz-next:disabled, .wiz-submit:disabled { opacity:.35; cursor:not-allowed; transform:none; }

/* ─── result displays ─── */
.result-box {
  border:1px solid var(--border); background:rgba(255,255,255,.02);
  padding:20px 22px; display:flex; flex-direction:column; gap:6px; margin-bottom:6px;
}
.result-box.gold { border-color:rgba(201,168,76,.5); background:rgba(201,168,76,.06); }
.result-label { font-size:.6rem; letter-spacing:2px; color:var(--gray); text-transform:uppercase; }
.result-value { font-family:'Unbounded', sans-serif; font-size:1.6rem; font-weight:700; color:var(--gold-light); }
.result-box.warn .result-value { color:#e0785a; }
.result-box.ok .result-value { color:#8fd19e; }

.scenario-title { font-size:.62rem; letter-spacing:1.5px; color:var(--gray); text-transform:uppercase; margin:26px 0 12px; }
.scenario-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.scenario-card { border:1px solid var(--border); padding:14px 10px; text-align:center; }
.scenario-card .sc-n { font-family:'Unbounded', sans-serif; font-size:1.1rem; font-weight:700; color:var(--white); }
.scenario-card .sc-label { font-size:.55rem; letter-spacing:1px; color:var(--gray); text-transform:uppercase; margin:2px 0 8px; }
.scenario-card .sc-val { font-size:.78rem; font-weight:600; color:var(--gold-light); }

/* ─── flow chain (utilidad real) ─── */
.flow-chain { display:flex; flex-direction:column; gap:0; margin-bottom:24px; }
.flow-step {
  border:1px solid var(--border); background:rgba(255,255,255,.02);
  padding:13px 16px; display:flex; justify-content:space-between; align-items:center;
  font-size:.78rem;
}
.flow-step .fs-label { color:rgba(242,239,232,.7); }
.flow-step .fs-val { font-weight:600; color:var(--white); }
.flow-step.minus .fs-val { color:#e0785a; }
.flow-step.final { border-color:var(--gold); background:rgba(201,168,76,.08); }
.flow-step.final .fs-label, .flow-step.final .fs-val { color:var(--gold-light); font-family:'Unbounded',sans-serif; font-weight:700; text-transform:uppercase; font-size:.85rem; }
.flow-arrow { text-align:center; color:var(--gold); font-size:.7rem; padding:3px 0; }

.calc-divider { border:none; border-top:1px solid var(--border); margin:34px 0 28px; }

/* ─── success summary ─── */
.summary-box { text-align:left; border:1px solid var(--border); padding:22px 24px; margin-top:10px; }
.summary-box .sum-row { display:flex; justify-content:space-between; font-size:.78rem; padding:7px 0; border-bottom:1px solid rgba(201,168,76,.08); }
.summary-box .sum-row:last-child { border-bottom:none; }
.summary-box .sum-row span:first-child { color:rgba(242,239,232,.55); }
.summary-box .sum-row span:last-child { font-weight:600; color:var(--gold-light); }
.summary-box .sum-row.hl span:last-child { color:var(--gold-light); font-family:'Unbounded',sans-serif; }

.wa-cta-big {
  display:inline-flex; align-items:center; gap:14px; background:#25D366; color:#fff;
  padding:16px 30px; text-decoration:none; font-family:'Unbounded',sans-serif;
  font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.3px;
  transition:all .3s; box-shadow:0 4px 22px rgba(37,211,102,.25); margin-top:22px;
}
.wa-cta-big:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(37,211,102,.4); }
.wa-cta-big svg { width:22px; height:22px; fill:#fff; flex-shrink:0; }

.back-home { display:block; margin-top:26px; font-size:.65rem; letter-spacing:2px; color:var(--gray); text-transform:uppercase; }
.back-home:hover { color:var(--gold); }

.success-panel { display:none; text-align:center; }
.success-panel.active { display:block; animation:fadeUp .5s ease; }
.success-icon {
  width:56px; height:56px; border:1px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin:0 auto 24px;
}
.success-icon svg { width:22px; height:22px; stroke:var(--gold); fill:none; stroke-width:2; }
.success-panel h3 { font-family:'Unbounded', sans-serif; font-size:1.25rem; font-weight:700; text-transform:uppercase; margin-bottom:18px; }
.success-panel p { font-size:.8rem; color:rgba(242,239,232,.55); line-height:1.8; max-width:440px; margin-left:auto; margin-right:auto; }

@media (max-width:768px) {
  .calc-hero { padding:120px 24px 40px; }
  .calc-wrap { padding:0 20px 100px; }
  .wizard-card { padding:34px 22px; }
  .scenario-grid { grid-template-columns:1fr; }
  .flow-step { font-size:.72rem; }
}