@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --bg: #0E0D0B;
  --bg-soft: #15130F;
  --card: #1C1916;
  --card-border: #2E2A24;
  --text: #F4EFE6;
  --text-dim: #A39A8C;
  --gold: #C99A4B;
  --gold-soft: #E6C892;
  --whatsapp: #3FAE5B;
  --whatsapp-dark: #2F8A46;
  --radius: 18px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(201,154,75,0.10), transparent),
    var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:560px;
  margin:0 auto;
  padding:32px 20px 64px;
}

/* ---------- Stepper / route signature element ---------- */
.route{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:36px;
  padding:0 4px;
}
.route-dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--card-border);
  flex:0 0 auto;
}
.route-dot.active{background:var(--gold);box-shadow:0 0 0 4px rgba(201,154,75,0.18);}
.route-line{flex:1;height:1px;background:var(--card-border);}
.route-label{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-left:10px;
  white-space:nowrap;
}

/* ---------- Brand / eyebrow ---------- */
.eyebrow{
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin:0 0 10px;
}

h1.display{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:clamp(28px,6vw,38px);
  line-height:1.12;
  margin:0 0 14px;
  letter-spacing:-0.01em;
}

p.lede{
  color:var(--text-dim);
  font-size:16px;
  line-height:1.55;
  margin:0 0 30px;
}

/* ---------- Cards (index options) ---------- */
.option{
  display:block;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:22px 22px;
  margin-bottom:14px;
  text-decoration:none;
  color:var(--text);
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
  position:relative;
  overflow:hidden;
}
.option:hover{border-color:var(--gold); transform:translateY(-1px); background:#211D19;}
.option-icon{font-size:26px; margin-bottom:10px; display:block;}
.option h3{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:19px;
  margin:0 0 4px;
}
.option p{
  margin:0 0 10px;
  color:var(--text-dim);
  font-size:14.5px;
  line-height:1.45;
}
.option .go{
  font-size:13px;
  color:var(--gold-soft);
  font-weight:600;
}

.disclaimer{
  font-size:12.5px;
  color:var(--text-dim);
  text-align:center;
  margin-top:26px;
  line-height:1.5;
}

/* ---------- Video block ---------- */
.video-frame{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--card-border);
  background:#000;
  margin-bottom:28px;
}

/* ---------- Section card ---------- */
.card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:24px;
  margin-bottom:18px;
}
.card h2{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:20px;
  margin:0 0 8px;
}
.card p{
  color:var(--text-dim);
  font-size:14.5px;
  line-height:1.55;
  margin:0 0 14px;
}
.card p:last-child{margin-bottom:0;}

.step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;height:22px;
  border-radius:50%;
  background:rgba(201,154,75,0.15);
  color:var(--gold-soft);
  font-size:12px;
  font-weight:700;
  margin-right:8px;
}

/* ---------- Calculator ---------- */
.field{margin-bottom:16px;}
.field label{
  display:block;
  font-size:13px;
  color:var(--text-dim);
  margin-bottom:7px;
  letter-spacing:.02em;
}
.field .input-money{
  position:relative;
}
.field .input-money span{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--text-dim); font-family:'IBM Plex Mono',monospace; font-size:15px;
}
.field input{
  width:100%;
  background:var(--bg-soft);
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:13px 14px 13px 32px;
  color:var(--text);
  font-family:'IBM Plex Mono',monospace;
  font-size:15px;
  outline:none;
  transition:border-color .15s ease;
}
.field input:focus{border-color:var(--gold);}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  border:none;
  border-radius:12px;
  padding:14px 18px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  text-decoration:none;
  transition:transform .15s ease, opacity .15s ease;
}
.btn:active{transform:scale(0.98);}
.btn-gold{background:var(--gold); color:#1C140A;}
.btn-gold:hover{background:var(--gold-soft);}
.btn-whatsapp{background:var(--whatsapp); color:#fff;}
.btn-whatsapp:hover{background:var(--whatsapp-dark);}
.btn[disabled]{opacity:.45; cursor:not-allowed;}

/* ---------- Results ---------- */
#result{display:none;}
#result.show{display:block;}

.result-figure{
  text-align:center;
  padding:18px 0 6px;
}
.result-figure .label{
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.result-figure .amount{
  font-family:'IBM Plex Mono',monospace;
  font-weight:600;
  font-size:clamp(28px,8vw,38px);
  color:var(--gold-soft);
  margin:6px 0 2px;
}

.breakdown{
  border-top:1px solid var(--card-border);
  margin-top:16px;
  padding-top:16px;
}
.breakdown-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:7px 0;
  font-size:14px;
}
.breakdown-row .k{color:var(--text-dim);}
.breakdown-row .v{
  font-family:'IBM Plex Mono',monospace;
  font-weight:600;
}
.breakdown-row.total{
  border-top:1px solid var(--card-border);
  margin-top:6px;
  padding-top:12px;
  font-size:15px;
}
.breakdown-row.total .v{color:var(--gold-soft); font-size:16px;}

/* ---------- Upload (recurso propio) ---------- */
.upload-box{
  border:1.5px dashed var(--card-border);
  border-radius:14px;
  padding:28px 18px;
  text-align:center;
  margin-bottom:16px;
  transition:border-color .15s ease, background .15s ease;
  cursor:pointer;
}
.upload-box:hover, .upload-box.has-file{border-color:var(--gold); background:rgba(201,154,75,0.05);}
.upload-box input{display:none;}
.upload-icon{font-size:26px; margin-bottom:8px; display:block;}
.upload-text{font-size:14px; color:var(--text-dim);}
.upload-text strong{color:var(--gold-soft);}
.file-name{
  margin-top:10px;
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;
  color:var(--gold-soft);
}

.back-link{
  display:inline-block;
  margin-top:22px;
  font-size:13px;
  color:var(--text-dim);
  text-decoration:none;
}
.back-link:hover{color:var(--gold-soft);}

/* ---------- Botón bloqueado por video ---------- */
.btn-locked{
  position:relative;
  background:#1C1916 !important;
  color:var(--text-dim) !important;
  border:1.5px dashed var(--card-border) !important;
  cursor:not-allowed !important;
  pointer-events:none;
  user-select:none;
}
.btn-locked .lock-icon{
  font-size:15px;
  opacity:.7;
}
.unlock-status{
  margin-bottom:14px;
}
.video-progress-bar{
  height:4px;
  background:var(--card-border);
  border-radius:99px;
  margin-bottom:8px;
  overflow:hidden;
}
.video-progress-fill{
  height:100%;
  width:0%;
  background:var(--gold);
  border-radius:99px;
  transition:width .8s linear;
}
.unlock-hint{
  font-size:12.5px;
  color:var(--text-dim);
  text-align:center;
  margin:0;
  line-height:1.4;
  transition:color .3s ease;
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
}