/* The presentation at /. One slide fills the viewport; on a phone it scrolls inside itself when
   the text is longer than the screen. Colours are forced light/anthracite so a phone's forced
   dark mode does not invert them. */

html, body.deck-body { height: 100%; overflow: hidden; background: var(--anthracite); color-scheme: only light; }
body.deck-body { font-size: 18px; }

.deck-top {
  position: fixed; inset: 0 0 auto 0; z-index: 10; height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 clamp(16px, 4vw, 48px); background: var(--paper); border-bottom: 1px solid var(--line);
}
.deck-logo { height: 30px; width: 99px; display: block; }
.deck-links { display: flex; gap: 8px; }

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--display); font-weight: 900; font-size: 15px; line-height: 1;
  padding: 11px 18px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  border: 2px solid var(--anthracite); color: var(--anthracite); background: var(--paper);
}
.pill.solid { background: var(--anthracite); color: #fff; }
.pill.big { font-size: 20px; padding: 16px 26px; width: 100%; max-width: 360px; }
.dark .pill { background: transparent; color: #fff; border-color: #fff; }
.dark .pill.solid { background: #fff; color: var(--anthracite); }

.deck { position: fixed; inset: 60px 0 64px 0; }
.slide {
  position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(24px, 5vh, 64px) clamp(16px, 6vw, 96px);
  background: var(--paper); color: var(--anthracite);
  opacity: 0; visibility: hidden; transform: translateX(40px);
  transition: opacity 320ms ease, transform 420ms cubic-bezier(.2, .9, .25, 1), visibility 0s linear 420ms;
}
.slide.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.slide.before { transform: translateX(-40px); }
.slide.dark { background: var(--anthracite); color: #fff; }
.slide.soft { background: var(--soft); }

.inner { width: 100%; max-width: 900px; margin: auto 0; }
.inner.wide { max-width: 1240px; }

.kicker {
  font-family: var(--text-font); font-weight: 700; font-size: 14px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 14px;
}
.dark .kicker { color: #aab4bb; }
.slide h1, .slide h2 { font-family: var(--display); font-weight: 900; line-height: 1.05; margin: 0 0 24px; }
.slide h1 { font-size: clamp(40px, 7vw, 88px); }
.slide h2 { font-size: clamp(30px, 4.6vw, 60px); }
.slide h3 { font-family: var(--display); font-weight: 900; font-size: 20px; margin: 6px 0 6px; }
.lede { font-size: clamp(19px, 2.2vw, 26px); line-height: 1.45; max-width: 760px; margin: 0 0 20px; }
.hint-nav { color: #aab4bb; font-size: 15px; margin-top: 36px; }
.note { color: var(--muted); font-size: 16px; margin-top: 22px; }

.steps-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.steps-list li {
  display: flex; gap: 16px; align-items: flex-start; font-size: clamp(18px, 2vw, 23px); line-height: 1.4;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px;
}
.dark .steps-list li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.steps-list b {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display); font-size: 18px; background: var(--anthracite); color: #fff;
}
.dark .steps-list b { background: #fff; color: var(--anthracite); }
.steps-list li.bad { border-color: #e4b4ae; background: #fbeeec; color: #7a1a12; }
.steps-list li.bad b { background: #b42318; color: #fff; }
.steps-list li.good { border-color: var(--anthracite); border-width: 2px; font-weight: 600; }

.flow-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.node { background: var(--soft); border: 1px solid var(--line); border-radius: 14px; padding: 16px; position: relative; }
.node p { margin: 0; color: var(--muted); font-size: 16px; }
.t {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .06em; border-radius: 6px;
  padding: 3px 8px; border: 2px solid var(--anthracite);
}
.t.real { background: var(--anthracite); color: #fff; }
.t.sim { background: #fff; color: var(--anthracite); border-style: dashed; }

.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.cards .card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.cards .card p { margin: 0; color: var(--muted); font-size: 17px; }

.live-grid { display: grid; grid-template-columns: minmax(260px, 1fr) 2.2fr; gap: 28px; align-items: stretch; }
.live-cta { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.live-cta .lede { margin: 0; }
.url { font-family: var(--display); font-weight: 900; font-size: clamp(26px, 3vw, 40px); margin: 0 0 8px; }
.live-frame { background: var(--soft); border-radius: 16px; overflow: hidden; min-height: 56vh; }
.live-frame iframe { width: 100%; height: 100%; min-height: 56vh; border: 0; display: block; background: var(--soft); }
.sign { font-family: var(--display); font-weight: 900; font-size: 28px; margin-top: 36px; }

.deck-nav {
  position: fixed; inset: auto 0 0 0; height: 64px; z-index: 10;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--paper); border-top: 1px solid var(--line); padding: 0 12px env(safe-area-inset-bottom);
}
.nav-btn {
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--anthracite);
  background: var(--paper); color: var(--anthracite); font-size: 20px; font-weight: 700; cursor: pointer;
}
.nav-btn:disabled { opacity: .3; cursor: default; }
.nav-btn.fs { position: absolute; right: 16px; border-width: 1px; }
.dots { display: flex; gap: 8px; }
.dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 0; background: var(--line); cursor: pointer; }
.dots button.on { background: var(--anthracite); width: 26px; border-radius: 6px; }
.count { font-size: 14px; color: var(--muted); min-width: 40px; text-align: center; }

/* The drawings (art/piezas.css): ink and paper follow the slide */
.slide svg.art { --ink: var(--anthracite); --paper: #fff; display: block; width: 100%; height: auto; }
.slide.dark svg.art { --ink: #fff; --paper: var(--anthracite); }
.inner.with-art {
  display: grid; grid-template-columns: minmax(0, 900px) minmax(140px, 1fr);
  column-gap: clamp(24px, 4vw, 64px); align-items: center; max-width: 1240px;
}
.inner.with-art > * { grid-column: 1; }
.inner.with-art > .art-slot.side { grid-column: 2; grid-row: 1 / span 6; width: 100%; max-width: 340px; justify-self: center; }
.art-slot.icon { width: 64px; margin: 0 0 10px; }
.art-slot.sim svg.art :is(.loose, .thin) { stroke-dasharray: 5 4; }
.cards .card { display: grid; grid-template-columns: 64px 1fr; column-gap: 18px; align-content: start; }
.cards .card .art-slot.icon { grid-row: 1 / span 2; margin: 0; }

@media (max-width: 900px) {
  .inner.with-art { grid-template-columns: 1fr; }
  .inner.with-art > .art-slot.side { grid-column: 1; grid-row: auto; order: -1; width: 128px; margin-bottom: 12px; }
  .flow-row { grid-template-columns: 1fr; gap: 10px; }
  .cards { grid-template-columns: 1fr; }
  .live-grid { grid-template-columns: 1fr; }
  .live-frame { display: none; }
  .slide { align-items: flex-start; }
  .count { display: none; }
}
@media (max-width: 480px) {
  .deck-links .pill:not(.solid) { display: none; }
  .pill { font-size: 14px; padding: 10px 14px; }
  .pill.big { font-size: 18px; max-width: none; }
  .nav-btn.fs { display: none; }
  .dots { gap: 6px; }
  .steps-list li { padding: 12px 14px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .slide { transition: none; } }