/* ══════════════════════════════════════════════
   embudo.css — DashRun Funnel Presentation
   v10.3
══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&family=Montserrat:wght@300;400;500;700;900&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:       #080C10;
  --surface:  #0D1117;
  --surface2: #111620;
  --border:   rgba(255,255,255,0.07);
  --green:    #2EE89A;
  --cyan:     #00D4FF;
  --violet:   #6C3AFF;
  --magenta:  #C023E8;
  --gold:     #FFC738;
  --white:    #FFFFFF;
  --muted:    rgba(255,255,255,0.45);
  --muted2:   rgba(255,255,255,0.22);
  --font-d:   'Rajdhani',sans-serif;
  --font-b:   'Montserrat',sans-serif;
}

html,body{height:100%;width:100%;overflow:hidden;background:var(--bg);color:var(--white);font-family:var(--font-b);}
/* body overflow hidden mantiene el scroll dentro de .slides */

/* ── TICKER ── */
.ticker{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:rgba(8,12,16,0.95);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  height:34px;display:flex;align-items:center;overflow:hidden;
}
.ticker-track{
  display:flex;gap:0;white-space:nowrap;
  animation:tick 30s linear infinite;
  will-change:transform;
}
.ticker-track:hover{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-item{
  display:inline-flex;align-items:center;gap:6px;
  padding:0 22px;
  font-size:0.6rem;font-weight:700;
  letter-spacing:0.13em;text-transform:uppercase;
  color:var(--muted);
  border-right:1px solid var(--border);
}
.ticker-item .dot{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);flex-shrink:0;}
.ticker-item .dot.gold{background:var(--gold);box-shadow:0 0 6px var(--gold);}
.ticker-item strong{color:var(--white);}

/* ── SCROLL CONTAINER ── */
.slides{
  position:fixed;top:34px;left:0;right:0;bottom:0;
  overflow-y:auto;overflow-x:hidden;
  scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:rgba(110,58,255,0.3) transparent;
}

.slide{
  opacity:1;transform:none;pointer-events:auto;
  border-bottom:1px solid var(--border);
}
.slide:last-child{border-bottom:none;}

.slide-inner{
  max-width:1080px;
  margin:0 auto;
  padding:52px 24px 60px;
}

/* ── PROGRESS BAR ── */
.progress-bar{
  position:fixed;top:34px;left:0;right:0;height:3px;z-index:250;
  background:rgba(255,255,255,0.06);
}
.progress-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--violet),var(--green));
  transition:width 0.1s linear;
}

/* ── SECTION ANCHORS ── */
.section-nav{
  position:fixed;right:18px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:10px;z-index:300;
}
.snav-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--muted2);border:none;cursor:pointer;padding:0;
  transition:background 0.25s,height 0.25s,border-radius 0.25s;
}
.snav-dot.active{height:24px;border-radius:4px;background:var(--green);}
.snav-dot[data-label]::after{
  content:attr(data-label);
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:0.55rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;opacity:0;
  transition:opacity 0.2s;pointer-events:none;
}
.section-nav:hover .snav-dot[data-label]::after{opacity:1;}

/* ── SLIDE LABEL ── */
.slide-label{
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.6rem;font-weight:700;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--green);
  margin-bottom:14px;
}
.slide-label .num{
  width:20px;height:20px;border-radius:50%;
  background:rgba(46,232,154,0.15);
  border:1px solid rgba(46,232,154,0.4);
  display:flex;align-items:center;justify-content:center;
  font-size:0.55rem;font-weight:900;
}

/* ── TYPOGRAPHY ── */
.t-hero{
  font-family:var(--font-b);
  font-size:clamp(2.4rem,7vw,5rem);
  font-weight:900;line-height:1.05;
  letter-spacing:-0.02em;
}
.t-hero .hl{color:var(--green);}
.t-hero .hl2{color:var(--cyan);}

.t-sub{
  font-size:clamp(0.82rem,2vw,1rem);
  color:var(--muted);line-height:1.7;
  max-width:480px;margin-top:14px;
}

/* ── STAT PILL ── */
.stat-pills{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:28px;
}
.stat-pill{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 18px;
  display:flex;flex-direction:column;gap:2px;
  flex:1;min-width:120px;
}
.stat-pill-val{
  font-family:var(--font-d);
  font-size:clamp(1.4rem,3vw,2rem);
  font-weight:700;color:var(--green);
  line-height:1;
}
.stat-pill-val.cyan{color:var(--cyan);}
.stat-pill-val.gold{color:var(--gold);}
.stat-pill-lbl{
  font-size:0.6rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--muted);
}

/* ── TWO-COL ── */
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;align-items:start;
  margin-top:36px;
}

/* ── PANEL CARD ── */
.panel-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px 20px;
}
.panel-card-label{
  font-size:0.58rem;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--muted);
  margin-bottom:14px;display:flex;align-items:center;gap:6px;
}
.panel-card-label .dot{width:6px;height:6px;border-radius:50%;background:var(--green);}

/* ── POOLS FUNNEL VISUAL ── */
.pools-funnel{display:flex;flex-direction:column;gap:6px;}
.pool-bar-row{
  display:flex;align-items:center;gap:10px;
}
.pool-bar-label{
  font-family:var(--font-d);font-size:0.7rem;font-weight:700;
  letter-spacing:0.06em;text-transform:uppercase;
  color:var(--muted);width:54px;flex-shrink:0;text-align:right;
}
.pool-bar-track{
  flex:1;height:28px;border-radius:6px;
  background:rgba(255,255,255,0.04);
  overflow:hidden;position:relative;
}
.pool-bar-fill{
  height:100%;border-radius:6px;
  background:linear-gradient(90deg,var(--violet),var(--green));
  transition:width 1s cubic-bezier(0.22,1,0.36,1);
  display:flex;align-items:center;padding-left:10px;
}
.pool-bar-fill.gold{background:linear-gradient(90deg,#7A3800,var(--gold));}
.pool-bar-val{
  font-family:var(--font-d);font-size:0.75rem;font-weight:700;
  color:rgba(255,255,255,0.9);white-space:nowrap;
}
.pool-bar-pay{
  font-family:var(--font-d);font-size:0.7rem;font-weight:600;
  color:var(--green);white-space:nowrap;width:72px;flex-shrink:0;
  text-align:left;
}
.pool-bar-pay.gold{color:var(--gold);}

/* ── BIG NUMBER LEFT ── */
.big-left{display:flex;flex-direction:column;gap:6px;}
.big-num{
  font-family:var(--font-b);
  font-size:clamp(3rem,8vw,5.5rem);
  font-weight:900;line-height:1;
  letter-spacing:-0.03em;
  color:var(--green);
}
.big-num.gold{color:var(--gold);}
.big-num.cyan{color:var(--cyan);}
.big-lbl{
  font-size:0.62rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--muted);
  margin-bottom:2px;
}
.big-desc{
  font-size:0.78rem;color:var(--muted);line-height:1.6;
  max-width:360px;margin-top:6px;
}

/* ── BREAKDOWN ROWS ── */
.breakdown-rows{display:flex;flex-direction:column;gap:6px;margin-top:14px;}
.br-row{
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  border-radius:8px;padding:10px 14px;gap:10px;
}
.br-row-left{display:flex;align-items:center;gap:10px;}
.br-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.br-name{font-family:var(--font-d);font-size:0.9rem;font-weight:700;letter-spacing:0.04em;}
.br-sub{font-size:0.62rem;color:var(--muted);}
.br-val{
  font-family:var(--font-d);font-size:1rem;font-weight:700;
  color:var(--green);white-space:nowrap;
}
.br-val.gold{color:var(--gold);}
.br-badge{
  font-size:0.58rem;font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;padding:2px 7px;border-radius:4px;
  background:rgba(46,232,154,0.12);color:var(--green);border:1px solid rgba(46,232,154,0.3);
}
.br-badge.gold{background:rgba(255,199,56,0.12);color:var(--gold);border-color:rgba(255,199,56,0.3);}

/* ── BAR CHART ── */
.bar-chart{
  display:flex;align-items:flex-end;gap:12px;
  height:160px;padding:0 4px;
}
.bar-col{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
}
.bar-wrap{
  width:100%;flex:1;display:flex;align-items:flex-end;position:relative;
}
.bar{
  width:100%;border-radius:6px 6px 0 0;
  transition:height 1s cubic-bezier(0.22,1,0.36,1);
  position:relative;
}
.bar-green{background:linear-gradient(180deg,var(--green),rgba(46,232,154,0.6));}
.bar-cyan{background:linear-gradient(180deg,var(--cyan),rgba(0,212,255,0.5));}
.bar-label{font-size:0.58rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);text-align:center;}
.bar-val{
  position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  font-family:var(--font-d);font-size:0.8rem;font-weight:700;
  color:var(--white);white-space:nowrap;
}

/* ── SPONSOR CHIP ── */
.sponsor-chip{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:30px;padding:5px 14px;
  font-size:0.68rem;color:var(--muted);margin-bottom:18px;
}
.sponsor-chip strong{color:var(--white);}

/* ── STEP CARDS ── */
.steps{display:flex;flex-direction:column;gap:12px;margin-top:20px;}
.step-card{
  display:flex;align-items:flex-start;gap:16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;padding:16px 18px;
}
.step-num{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--violet),var(--magenta));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-size:1rem;font-weight:700;
}
.step-body{}
.step-title{font-family:var(--font-d);font-size:1.05rem;font-weight:700;letter-spacing:0.03em;margin-bottom:3px;}
.step-desc{font-size:0.75rem;color:var(--muted);line-height:1.6;}

/* ── CTA BUTTON ── */
.cta-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:30px;}
.btn-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;max-width:380px;
  padding:17px 32px;
  background:linear-gradient(135deg,var(--violet),var(--magenta));
  border:none;border-radius:12px;
  font-family:var(--font-d);font-size:1.2rem;font-weight:700;
  letter-spacing:0.07em;text-transform:uppercase;
  color:var(--white);text-decoration:none;cursor:pointer;
  box-shadow:0 8px 32px rgba(108,58,255,0.4);
  transition:opacity 0.2s,transform 0.15s;
}
.btn-cta:hover{opacity:0.9;transform:translateY(-2px);}
.btn-cta:active{transform:translateY(0);}
.cta-note{font-size:0.7rem;color:var(--muted);text-align:center;line-height:1.6;}

/* ── DIVIDER ── */
.divider{height:1px;background:var(--border);margin:20px 0;}

/* ── TOTAL ROW ── */
.total-row{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,rgba(108,58,255,0.1),rgba(192,35,232,0.08));
  border:1px solid rgba(108,58,255,0.3);
  border-radius:12px;padding:14px 18px;margin-top:14px;
}
.total-row-label{font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);}
.total-row-val{font-family:var(--font-d);font-size:1.5rem;font-weight:700;color:var(--green);}

/* ══ RESPONSIVE ══ */
@media(max-width:768px){
  .two-col{grid-template-columns:1fr;}
  .slide-inner{padding:36px 16px 48px;}
  .t-hero{font-size:clamp(2rem,9vw,3rem);}
  .bar-chart{height:120px;}
  .stat-pill{min-width:100px;}
  .section-nav{display:none;}
}
@media(max-width:480px){
  .pool-bar-pay{width:56px;font-size:0.62rem;}
  .pool-bar-label{width:44px;font-size:0.62rem;}
  .big-num{font-size:clamp(2.4rem,10vw,4rem);}
}