/* ============================================================
   Z2H Academy · Deck System — deck/deck.css
   Base reutilizable para todos los decks.
   Hereda tokens y componentes de ../landing.css (Aurora).
   Este archivo SOLO contiene chrome + layout de slides.
   Para un deck nuevo: copiar index.html y reusar estas clases.
   ============================================================ */

:root {
  --deck-stage: min(1180px, 94vw);
  --deck-narrow: min(880px, 92vw);
  --deck-nav-h: 64px;
  --deck-foot-h: 44px;
}

/* ─── shell PPT: viewport bloqueado, sin scroll de página ─── */
html, body.deck { height: 100dvh; overflow: hidden; }
body.deck { min-height: 100dvh; display: flex; flex-direction: column; }

.deck-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: rgba(255, 255, 255, 0.07);
}
.deck-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #ffd300, #ff9d4d, #22d3ee);
  transition: width 0.35s ease;
}

.deck-stage {
  flex: 1;
  min-height: 0;
  height: calc(100dvh - var(--deck-nav-h) - var(--deck-foot-h));
  display: flex;
  flex-direction: column;
  width: var(--deck-stage);
  margin-inline: auto;
  padding: clamp(0.6rem, 1.6vh, 1.2rem) 0 0.6rem;
  overflow: hidden;
}

.deck-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: clamp(1rem, 2.5vw, 1.6rem);
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 2px; text-transform: uppercase; color: var(--muted);
}
.deck-meta a.back { color: var(--muted); text-decoration: none; }
.deck-meta a.back:hover { color: var(--yellow); }
#deckCounter { color: var(--text); letter-spacing: 2px; white-space: nowrap; }
#deckCounter b { color: var(--yellow); }

/* ─── slides: escenario centrado ─── */
.slide { display: none; animation: deckIn 0.35s ease; }
.slide.active {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  flex: 1;
  min-height: 0;
  padding: 0.25rem 0 0.75rem;
  overflow: hidden;
}
/* fallback invisible: si un slide excede en pantallas bajas,
   el scroll vive dentro del slide, nunca en la página */
.slide.active { overflow-y: auto; scrollbar-width: none; }
.slide.active::-webkit-scrollbar { display: none; }
@keyframes deckIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.slide-kicker {
  align-self: center;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border: 1px solid var(--stroke); border-radius: 999px;
  background: var(--glass);
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 2px; text-transform: uppercase; color: var(--muted);
  margin-bottom: clamp(0.6rem, 1.8vh, 1.1rem);
}
.slide-kicker i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); display: inline-block; flex-shrink: 0;
}

.slide h1.deck-h {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 5.4vh + 2.4vw, 4.2rem);
  letter-spacing: -0.045em; line-height: 1.02;
  margin: 0 auto clamp(0.5rem, 1.4vh, 0.9rem); max-width: 16ch;
  text-align: center; text-wrap: balance;
}
.slide h1.deck-h .hl {
  background: var(--grad-warm);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.slide h2.deck-h {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 3.6vh + 1.8vw, 2.9rem);
  letter-spacing: -0.03em; line-height: 1.08;
  margin: 0 auto clamp(0.4rem, 1.2vh, 0.8rem); max-width: 22ch;
  text-align: center; text-wrap: balance;
}
.slide h2.deck-h .grad {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.deck-sub {
  color: var(--muted);
  max-width: 56ch;
  margin-inline: auto;
  text-align: center;
  text-wrap: pretty;
  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
  line-height: 1.75;
}
.deck-sub + .deck-sub { margin-top: 0.8rem; }
.deck-sub strong { color: var(--text); }

/* CTAs y chips centrados por defecto en slides */
.slide .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(0.9rem, 2.4vh, 1.6rem); }
.slide .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(0.8rem, 2.2vh, 1.4rem); }

/* ─── grids: ancho completo pero centrados ─── */
.deck-grid-2, .deck-grid-3, .deck-grid-4, .split-cards {
  width: 100%; margin-inline: auto; text-align: left;
}
.deck-grid-2 { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 14px; margin-top: clamp(0.8rem, 2.2vh, 1.4rem); max-width: var(--deck-stage); }
.deck-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: clamp(0.8rem, 2.2vh, 1.4rem); max-width: var(--deck-stage); }
.deck-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: clamp(0.8rem, 2.2vh, 1.4rem); max-width: var(--deck-stage); }
.split-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: clamp(0.8rem, 2vh, 1.2rem); max-width: var(--deck-narrow); }

/* cards internas con respiro controlado (no saturar) */
.deck-grid-4 .bento-card { padding: 1.3rem 1.2rem; }
.deck-grid-4 .bento-card h3 { font-size: 1.1rem; }
.deck-grid-4 .bento-card p { font-size: 0.88rem; }

/* ─── listas ─── */
.deck-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 1rem; }
.deck-list li {
  font-family: var(--font-mono); font-size: 0.84rem;
  color: var(--muted); display: flex; gap: 10px; line-height: 1.55;
}
.deck-list.good li::before { content: '✓'; color: var(--green); font-weight: 700; flex-shrink: 0; }
.deck-list.bad li::before { content: '✗'; color: var(--red); font-weight: 700; flex-shrink: 0; }
.deck-list.neu li::before { content: '▸'; color: var(--yellow); font-weight: 700; flex-shrink: 0; }
.deck-list b { color: var(--text); }

/* ─── pipes: flujo centrado, sin estiramiento ─── */
.pipe {
  display: flex; align-items: stretch; justify-content: center;
  gap: 8px; flex-wrap: wrap;
  margin-top: clamp(0.8rem, 2.2vh, 1.3rem); margin-inline: auto;
  max-width: 980px; width: 100%;
}
.pipe .pnode {
  flex: 0 1 auto; min-width: 118px; max-width: 190px;
  font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.5;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--stroke); background: var(--glass); color: var(--text);
  text-align: center;
}
.pipe .pnode small { display: block; color: var(--muted); font-size: 0.68rem; margin-top: 4px; }
.pipe .pnode.hot { border-color: rgba(255, 211, 0, 0.5); background: rgba(255, 211, 0, 0.06); }
.pipe .parr { align-self: center; color: var(--faint); font-family: var(--font-mono); }

/* ─── citas: bloque centrado, texto a la izquierda ─── */
.big-quote {
  margin: clamp(0.8rem, 2vh, 1.2rem) auto 0;
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--yellow);
  background: rgba(255, 211, 0, 0.05);
  border-radius: 0 14px 14px 0;
  font-family: var(--font-mono);
  font-size: clamp(0.88rem, 1.4vw, 1rem);
  line-height: 1.8; color: var(--text);
  max-width: 720px; width: 100%;
  text-align: left;
}
.big-quote span { color: var(--muted); }
.big-quote.tight { margin-top: 0.6rem; }

/* ─── controles ─── */
.deck-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 0; padding-top: clamp(0.5rem, 1.6vh, 1rem);
  flex-shrink: 0;
}
.deck-arrows { display: flex; gap: 10px; }
.deck-arrow {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--stroke); background: var(--glass);
  color: var(--text); font-size: 1.1rem; cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
}
.deck-arrow:hover { transform: translateY(-2px); border-color: var(--yellow); }
.deck-hint { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 1px; color: var(--faint); }

/* ─── nav + footer fijos del deck (sin scroll) ─── */
body.deck .nav { flex-shrink: 0; }
body.deck .nav-inner { height: var(--deck-nav-h); }
body.deck .footer {
  flex-shrink: 0;
  min-height: var(--deck-foot-h);
  margin-top: 0;
  padding: 0.55rem 0;
  overflow: hidden;
}
body.deck .footer-inner { gap: 8px; }

/* pantallas bajas: compactar aún más el cromo */
@media (max-height: 760px) {
  .slide-kicker { padding: 6px 12px; font-size: 0.62rem; }
  .deck-grid-4 .bento-card,
  .deck-grid-3 .bento-card,
  .deck-grid-2 .bento-card { padding: 1rem 1.1rem; }
  .bento-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
  .bento-card p { font-size: 0.85rem; }
  .deck-list { gap: 7px; }
  .deck-list li { font-size: 0.78rem; }
  .pipe .pnode { padding: 9px 11px; font-size: 0.68rem; }
  .big-quote { padding: 0.85rem 1.1rem; line-height: 1.65; }
}
@media (max-width: 1020px) {
  .deck-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .slide.active { min-height: auto; justify-content: flex-start; padding-top: 0.5rem; }
  .deck-grid-2, .deck-grid-3, .deck-grid-4, .split-cards { grid-template-columns: 1fr; }
  .deck-hint { display: none; }
  .deck-controls { justify-content: center; }
  .pipe .pnode { min-width: 0; flex: 1 1 44%; max-width: none; }
  .pipe .parr { display: none; }
}
@media (max-width: 480px) {
  .slide-kicker { font-size: 0.62rem; padding: 6px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .slide { animation: none; }
}