/* ═══════════════════════════════════════════════════════════════
   Pitch huge.x · Revenue Room educación
   Sistema de diseño DealTunnel · brand/DESIGN.md v1.3
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/geist-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/geist-mono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/geist-mono-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --- 1. TOKENS ------------------------------------------------ */
:root{
  --canvas:#FFFFFF;
  --surface:#F6F7F5;
  --text:#101112;
  --grey:#6B6F6B;
  --hairline:rgba(16,17,18,.14);
  --hairline-soft:rgba(16,17,18,.07);
  --acc-text:#067647;
  --acc-fill:#05DF72;
  --hl-bg:#05DF72;
  --hl-text:#101112;
  --dot-off:#E1E4E1;
  --sans:'Geist',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'Geist Mono','SF Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
html[data-theme="dark"]{
  --canvas:#0C0C0E;
  --surface:#131316;
  --text:#F2F2EE;
  --grey:#8A8F8A;
  --hairline:rgba(242,242,238,.16);
  --hairline-soft:rgba(242,242,238,.08);
  --acc-text:#05DF72;
  --acc-fill:#05DF72;
  --hl-bg:transparent;
  --hl-text:#05DF72;
  --dot-off:#222228;
}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]){
    --canvas:#0C0C0E; --surface:#131316; --text:#F2F2EE; --grey:#8A8F8A;
    --hairline:rgba(242,242,238,.16); --hairline-soft:rgba(242,242,238,.08);
    --acc-text:#05DF72; --hl-bg:transparent; --hl-text:#05DF72; --dot-off:#222228;
  }
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  background:var(--canvas); color:var(--text);
  font-family:var(--sans); font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* grano al 3% */
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- 2. ESCENARIO --------------------------------------------- */
.deck{position:relative;height:100vh;height:100dvh;width:100%}

.slide{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(28px,5.2vw,96px);
  padding-bottom:clamp(64px,8vh,110px);
  opacity:0; visibility:hidden;
  transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .55s var(--ease), visibility 0s .55s;
  overflow:hidden;
}
.slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease),transform .55s var(--ease),visibility 0s}
.slide.prev{transform:translateY(-14px)}

.wrap{width:100%;max-width:1180px;margin:0 auto}

/* entrada escalonada de los hijos */
.slide.on .stg{animation:sube .62s var(--ease) both}
.slide.on .stg:nth-child(1){animation-delay:.06s}
.slide.on .stg:nth-child(2){animation-delay:.14s}
.slide.on .stg:nth-child(3){animation-delay:.22s}
.slide.on .stg:nth-child(4){animation-delay:.30s}
.slide.on .stg:nth-child(5){animation-delay:.38s}
.slide.on .stg:nth-child(6){animation-delay:.46s}
@keyframes sube{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* --- 3. TIPOGRAFÍA -------------------------------------------- */
.label{
  font-family:var(--mono); font-weight:500; font-size:11px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--grey);
  display:flex; align-items:center; gap:10px; margin-bottom:clamp(18px,3vh,34px);
}
.label i{font-style:normal;color:var(--acc-text)}

h1{
  font-size:clamp(34px,5.6vw,76px); font-weight:600; line-height:1.04;
  letter-spacing:-.03em; max-width:19ch;
}
h2{
  font-size:clamp(24px,3.4vw,46px); font-weight:600; line-height:1.12;
  letter-spacing:-.025em; max-width:24ch;
}
.sub{
  font-size:clamp(15px,1.5vw,21px); line-height:1.6; color:var(--grey);
  max-width:56ch; margin-top:clamp(16px,2.4vh,28px); font-weight:400;
}
.sub strong{color:var(--text);font-weight:500}

mark{background:var(--hl-bg);color:var(--hl-text);padding:0 .16em;border-radius:0}

/* --- 4. DATO --------------------------------------------------- */
.n{font-family:var(--mono);font-weight:500;color:var(--acc-text);letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline);margin-top:clamp(24px,4vh,48px)}
.stat{background:var(--canvas);padding:clamp(18px,2.4vw,30px)}
.stat .v{font-family:var(--mono);font-size:clamp(30px,4.4vw,58px);font-weight:500;color:var(--acc-text);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat .k{font-size:13px;line-height:1.45;color:var(--grey);margin-top:12px;max-width:22ch}

/* --- 5. BARRAS ------------------------------------------------- */
.bars{margin-top:clamp(22px,3.6vh,40px);display:flex;flex-direction:column;gap:16px;max-width:760px}
.bar-row{display:grid;grid-template-columns:clamp(120px,15vw,190px) 1fr auto;align-items:center;gap:16px}
.bar-row .bl{font-size:14px;color:var(--grey)}
.bar-track{height:22px;background:var(--surface);border:1px solid var(--hairline-soft);position:relative;overflow:hidden}
.bar-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--dot-off);transition:width 1.1s var(--ease) .25s}
.bar-row.hot .bar-fill{background:var(--acc-fill)}
.slide.on .bar-fill{width:var(--w)}
.bar-row .bv{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums}

/* --- 6. FILAS / CARDS ------------------------------------------ */
.rows{margin-top:clamp(22px,3.6vh,42px);border-top:1px solid var(--hairline)}
.row{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2vw,26px);align-items:start;
  padding:clamp(14px,2vh,20px) 0;border-bottom:1px solid var(--hairline-soft)}
.row .ri{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--acc-text);padding-top:5px;min-width:26px}
.row .rt{font-size:clamp(15px,1.55vw,20px);line-height:1.45;font-weight:500}
.row .rd{font-size:14px;line-height:1.55;color:var(--grey);margin-top:5px;max-width:62ch}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline);margin-top:clamp(22px,3.6vh,42px)}
.card{background:var(--canvas);padding:clamp(18px,2.2vw,28px);display:flex;flex-direction:column;gap:12px}
.card .ct{font-size:clamp(15px,1.5vw,19px);font-weight:600;line-height:1.25;letter-spacing:-.015em}
.card .cd{font-size:13.5px;line-height:1.55;color:var(--grey)}
.card.acc{background:var(--surface)}

/* dos columnas de contraste */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline);border:1px solid var(--hairline);margin-top:clamp(22px,3.6vh,42px)}
.split > div{background:var(--canvas);padding:clamp(20px,2.6vw,34px)}
.split .st{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:14px}
.split .sc{font-size:clamp(16px,1.8vw,23px);line-height:1.38;font-weight:500;letter-spacing:-.015em}
.split .sn{font-size:13.5px;line-height:1.55;color:var(--grey);margin-top:12px}
.split .win{background:var(--surface)}
.split .win .sc{color:var(--acc-text)}

/* cita / idea */
.idea{margin-top:clamp(20px,3vh,36px);border-left:2px solid var(--acc-fill);padding-left:clamp(18px,2.4vw,30px)}
.idea .iq{font-size:clamp(26px,3.6vw,50px);font-weight:600;line-height:1.1;letter-spacing:-.03em}
.idea .ib{font-size:clamp(15px,1.45vw,19px);line-height:1.6;color:var(--grey);margin-top:16px;max-width:56ch}

/* --- 7. ICONOS ORIGAMI ----------------------------------------- */
.dt-icon{display:inline-block;width:24px;height:24px;color:var(--text);
  transition:transform .3s var(--ease),color .2s;vertical-align:middle}
.dt-icon svg{width:100%;height:100%;overflow:visible;display:block}
.dt-icon .dt-outline{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:miter;stroke-linecap:square}
.dt-icon .dt-fold{fill:none;stroke:currentColor;stroke-width:.75;stroke-linejoin:miter;stroke-linecap:square;opacity:.22;transition:opacity .3s}
.dt-icon .dt-face{fill:currentColor;stroke:none;opacity:0;transition:opacity .3s}
.dt-icon .dt-accent{fill:var(--acc-fill);stroke:none;opacity:0;transition:opacity .4s}
.dt-icon .dt-accent-stroke{fill:none;stroke:var(--acc-fill);stroke-width:2;stroke-linecap:square;opacity:0;transition:opacity .4s}
.dt-icon .dt-node-marker{fill:currentColor;opacity:.12;transition:opacity .3s,fill .3s}
.dt-icon--16{width:16px;height:16px}
.dt-icon--20{width:20px;height:20px}
.dt-icon--24{width:24px;height:24px}
.dt-icon--32{width:32px;height:32px}
.dt-icon--48{width:48px;height:48px}
.dt-icon--animated .dt-face{opacity:.04}
.dt-icon--animated .dt-fold{opacity:.3}
.dt-icon--discovered .dt-accent{opacity:.22}
.dt-icon--animated.dt-icon--discovered .dt-accent{animation:dt-accent-pulse 4s ease-in-out infinite}
.dt-icon--active .dt-accent-stroke{opacity:.7}
.dt-icon--animated.dt-icon--active .dt-accent-stroke{animation:dt-tip-pulse 3s ease-in-out infinite}
.dt-icon--connection .dt-node-marker{fill:var(--acc-fill);opacity:.5}
.dt-icon--animated.dt-icon--connection .dt-node-marker{animation:dt-node-pulse 3.5s ease-in-out infinite}
.dt-icon--transition .dt-accent{opacity:.2}
.dt-icon--animated.dt-icon--transition .dt-accent{animation:dt-accent-pulse 5s ease-in-out infinite}
@keyframes dt-accent-pulse{0%,100%{opacity:.18}50%{opacity:.38}}
@keyframes dt-tip-pulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes dt-node-pulse{0%,100%{opacity:.4}50%{opacity:.75}}

/* --- 8. CHROME ------------------------------------------------- */
.chrome{position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,4vw,52px) clamp(16px,2.4vh,28px);
  pointer-events:none;font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey)}
.chrome > *{pointer-events:auto}
.brand{display:flex;align-items:center;gap:9px}
.brand b{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:-.01em;text-transform:none;color:var(--text)}
.nav{display:flex;align-items:center;gap:14px}
.dots{display:flex;gap:6px}
.dot{width:7px;height:7px;background:var(--dot-off);border:0;padding:0;cursor:pointer;
  transition:background .3s var(--ease),transform .3s var(--ease)}
.dot.on{background:var(--acc-fill);transform:scale(1.25)}
.dot:focus-visible{outline:2px solid var(--acc-text);outline-offset:3px}
.count{font-variant-numeric:tabular-nums;color:var(--text);font-weight:500}
.tgl{background:none;border:1px solid var(--hairline);color:var(--grey);cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 11px;transition:border-color .2s,color .2s}
.tgl:hover{border-color:var(--acc-text);color:var(--acc-text)}
.tgl:focus-visible{outline:2px solid var(--acc-text);outline-offset:2px}

/* barra de avance */
.prog{position:fixed;top:0;left:0;height:2px;background:var(--acc-fill);z-index:50;
  width:0;transition:width .5s var(--ease)}

/* ayuda de teclado */
.keys{position:fixed;right:clamp(20px,4vw,52px);top:clamp(18px,3vh,32px);z-index:40;
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--grey);display:flex;gap:8px;align-items:center;opacity:.75;
  transition:opacity .4s var(--ease)}
.keys.hide{opacity:0;pointer-events:none}
.keys kbd{font-family:var(--mono);border:1px solid var(--hairline);padding:3px 7px;
  font-size:10px;color:var(--text);background:var(--surface)}

/* --- 9. RESPONSIVE --------------------------------------------- */
@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .bar-row{grid-template-columns:1fr;gap:7px}
  .bar-row .bv{justify-self:start}
  .keys{display:none}
  h1{max-width:none}
}
@media (max-width:560px){
  .slide{padding:24px 20px 92px;justify-content:flex-start;padding-top:76px;overflow-y:auto}
  .stats{grid-template-columns:1fr 1fr}
  .chrome{font-size:10px;gap:12px}
  .brand b{font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .slide.on .stg{animation:none}
  .slide.on .bar-fill{transition:none}
}

@media print{
  html,body{overflow:visible;height:auto}
  .slide{position:static;opacity:1;visibility:visible;transform:none;
    page-break-after:always;min-height:96vh;border-bottom:1px solid var(--hairline)}
  .chrome,.keys,.prog{display:none}
  .slide.on .bar-fill{width:var(--w)}
}