/* ============================================================
   THEME · Modo Digital (identidade de modo-digital.sling.digital)
   Branco, tinta #0d0b14, roxo #7040f6, lilás, lime #c8f53c.
   Big Shoulders Display (títulos de impacto), Geist, Geist Mono.
   ============================================================ */
@font-face { font-family: 'Big Shoulders Display'; font-weight: 900; font-display: swap; src: url(assets/fonts/big-shoulders-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Big Shoulders Display'; font-weight: 900; font-display: swap; src: url(assets/fonts/big-shoulders-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4; }
@font-face { font-family: 'Geist'; font-weight: 300 700; font-display: swap; src: url(assets/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+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist'; font-weight: 300 700; font-display: swap; src: url(assets/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+1E00-1E9F, U+20A0-20AB, U+20AD-20C4; }
@font-face { font-family: 'Geist Mono'; font-weight: 400 500; font-display: swap; src: url(assets/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+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-weight: 400 500; font-display: swap; src: url(assets/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+1E00-1E9F, U+20A0-20AB, U+20AD-20C4; }

:root {
  --white: #ffffff; --warm: #f8f6f3; --night: #0d0b14; --ink: #0d0b14;
  --text: #2a2635; --muted: #77728a; --line: #e6e2ec;
  --purple: #7040f6; --deep: #2a1570; --lilac: #c4b2ff; --lilac-soft: #efeaff; --lime: #c8f53c;

  --deck-bg: var(--white);
  --deck-fg: var(--text);
  --deck-accent: var(--purple);
  --deck-muted: var(--muted);
  --deck-line: var(--line);
  --deck-elevated: rgba(13, 11, 20, .04);
  --deck-danger: #e0566b;
  --deck-maxw: 1320px;
  --deck-pad: clamp(1.5rem, 5vw, 5.5rem);
  --deck-font: 'Geist', system-ui, sans-serif;
  --deck-mono: 'Geist Mono', ui-monospace, monospace;
  --deck-ease: cubic-bezier(.16, 1, .3, 1);

  /* trama de pixels (dither) da identidade */
  --d-12: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3C/svg%3E");
  --d-25: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3C/svg%3E");
}

body { background: var(--white); color: var(--text); -webkit-font-smoothing: antialiased; }
.slide { background: var(--white); }
::selection { background: var(--lime); color: var(--ink); }

/* trilhos verticais do site, como moldura */
.slide::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(1420px, calc(100% - 4vw)); border-inline: 1px solid var(--line); pointer-events: none;
}
.slide.dark::before { border-color: rgba(255, 255, 255, .1); }
.slide.paper { background: var(--warm); }
.slide > * { position: relative; z-index: 1; }

/* rodapé de marca */
.brandbar { position: absolute; left: 0; right: 0; bottom: clamp(14px, 2.4vh, 26px); display: flex; justify-content: center; gap: 14px; align-items: center; font: 400 12px var(--deck-mono); color: var(--muted); z-index: 1; }
.brandbar img { height: 14px; width: auto; }
.slide.dark .brandbar { color: rgba(255, 255, 255, .4); }
.slide.cover .brandbar { display: none; }

/* ---------- tipografia ---------- */
.eyebrow { font: 400 clamp(14px, 1.15vw, 18px) var(--deck-mono); color: var(--muted); display: inline-flex; align-items: center; gap: 12px; margin: 0 0 clamp(16px, 2.6vh, 30px); }
.eyebrow::before { content: ''; width: 9px; height: 9px; background: var(--purple); flex-shrink: 0; }
.slide.dark .eyebrow { color: rgba(255, 255, 255, .62); }
.slide.dark .eyebrow::before { background: var(--lime); }

.big { font-family: 'Big Shoulders Display', var(--deck-font); font-weight: 900; text-transform: uppercase; line-height: .86; letter-spacing: -.005em; color: var(--ink); margin: 0; font-size: clamp(64px, 11vw, 190px); }
.big.md { font-size: clamp(54px, 8.4vw, 140px); }
.h1 { font-size: clamp(44px, 5.6vw, 92px); line-height: .98; letter-spacing: -.05em; font-weight: 420; color: var(--ink); margin: 0; text-wrap: balance; }
.h2 { font-size: clamp(36px, 4.2vw, 68px); line-height: 1.02; letter-spacing: -.045em; font-weight: 420; color: var(--ink); margin: 0; text-wrap: balance; }
.h3 { font-size: clamp(22px, 1.9vw, 32px); line-height: 1.2; letter-spacing: -.025em; font-weight: 480; color: var(--ink); margin: 0 0 .35em; }
.lead { font-size: clamp(22px, 1.9vw, 32px); line-height: 1.38; letter-spacing: -.015em; color: var(--muted); margin: clamp(18px, 3vh, 34px) 0 0; max-width: 46ch; text-wrap: pretty; }
.center .lead { margin-inline: auto; }
.mute { color: var(--muted); }
.ink-purple { color: var(--purple); }
.slide.dark .h1, .slide.dark .h2, .slide.dark .h3, .slide.dark .big { color: #fff; }
.slide.dark .lead, .slide.dark .mute { color: rgba(255, 255, 255, .62); }
.mk { color: var(--ink); background: var(--lime); padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.slide.dark .mk { color: var(--ink); }
.hl { background: var(--lime); color: var(--ink); padding: 2px 8px; border-radius: 6px; }
.tag { display: inline-flex; align-items: center; font: 400 clamp(13px, 1vw, 16px) var(--deck-mono); padding: 7px 10px; border-radius: 7px; background: var(--lilac-soft); color: var(--deep); }
.slide.dark .tag { background: var(--lime); color: var(--ink); }

/* ---------- layout ---------- */
.left { text-align: left; }
.stack > * + * { margin-top: clamp(14px, 2.4vh, 28px); }
.grid { display: grid; gap: clamp(12px, 1.4vw, 22px); width: 100%; margin-top: clamp(24px, 4.5vh, 52px); text-align: left; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g5 { grid-template-columns: repeat(5, 1fr); }

.card { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: clamp(18px, 1.8vw, 30px); }
.slide.paper .card { background: var(--white); }
.card p { color: var(--muted); font-size: clamp(17px, 1.35vw, 22px); line-height: 1.42; margin: 0; }
.card .n { display: block; font: 500 clamp(13px, 1vw, 16px) var(--deck-mono); color: var(--purple); margin-bottom: clamp(10px, 1.6vh, 18px); }
.card.ink { background: var(--ink); border-color: var(--ink); }
.card.ink .h3 { color: #fff; } .card.ink p { color: rgba(255, 255, 255, .62); } .card.ink .n { color: var(--lime); }
.card.lilac { background: var(--lilac-soft); border-color: transparent; }
.slide.dark .card { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); }
.slide.dark .card .h3 { color: #fff; } .slide.dark .card p { color: rgba(255, 255, 255, .6); } .slide.dark .card .n { color: var(--lime); }

/* fluxo (arquitetura / escada) */
.flow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: clamp(26px, 5vh, 56px); }
.flow span { font-size: clamp(17px, 1.45vw, 24px); letter-spacing: -.02em; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: clamp(10px, 1.4vh, 16px) clamp(14px, 1.2vw, 20px); }
.flow i { width: 26px; height: 1px; background: repeating-linear-gradient(90deg, var(--purple) 0 4px, transparent 4px 8px); }
.flow span.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.slide.dark .flow span { background: rgba(255, 255, 255, .05); color: #fff; border-color: rgba(255, 255, 255, .14); }

/* escada de produtos */
.ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 22px); align-items: end; width: 100%; margin-top: clamp(26px, 5vh, 56px); text-align: left; }
.ladder .card:nth-child(1) { min-height: 34vh; } .ladder .card:nth-child(2) { min-height: 44vh; } .ladder .card:nth-child(3) { min-height: 54vh; }
.ladder .price { font-size: clamp(26px, 2.6vw, 44px); letter-spacing: -.045em; color: var(--ink); margin: .2em 0 .4em; font-variant-numeric: tabular-nums; }
.ladder .card.ink .price { color: var(--lime); }

/* números */
.nums { display: grid; gap: 0; width: 100%; margin-top: clamp(26px, 5vh, 56px); border-top: 1px solid var(--line); text-align: left; }
.nums > div { padding: clamp(18px, 3vh, 34px) clamp(14px, 1.6vw, 28px); }
.nums > div + div { border-left: 1px solid var(--line); }
.nums dt { font: 400 clamp(13px, 1.05vw, 17px) var(--deck-mono); color: var(--muted); }
.nums dd { margin: 10px 0 0; font-size: clamp(34px, 3.8vw, 64px); letter-spacing: -.05em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.nums dd.neg { color: var(--muted); } .nums dd.pos { color: var(--purple); }
.slide.dark .nums { border-color: rgba(255, 255, 255, .12); } .slide.dark .nums > div + div { border-color: rgba(255, 255, 255, .12); }
.slide.dark .nums dd { color: #fff; } .slide.dark .nums dd.pos { color: var(--lime); }

/* checklist (caixinhas) */
.checks { display: grid; gap: 12px; margin-top: clamp(22px, 4vh, 44px); width: 100%; max-width: 980px; text-align: left; }
.checks li { list-style: none; display: flex; gap: 18px; align-items: center; font-size: clamp(22px, 2vw, 34px); letter-spacing: -.025em; color: var(--ink); padding: clamp(12px, 1.8vh, 20px) 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.checks li::before { content: ''; width: 26px; height: 26px; border-radius: 6px; border: 2px solid var(--purple); flex-shrink: 0; }
.slide.dark .checks li { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); color: #fff; }
.slide.dark .checks li::before { border-color: var(--lime); }
ul.checks { padding: 0; margin-left: 0; }

/* pessoas: foto inteira, sem corte */
.people { display: grid; grid-template-columns: auto 1fr; gap: clamp(28px, 4vw, 72px); align-items: center; width: 100%; text-align: left; }
.people img { height: 64vh; width: auto; max-width: 38vw; object-fit: contain; border-radius: 18px; background: var(--lilac-soft); }
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 26px); width: 100%; margin-top: clamp(22px, 4vh, 44px); text-align: left; }
.cases figure { margin: 0; }
.cases img { width: 100%; height: 34vh; object-fit: contain; background: var(--lilac-soft); border-radius: 16px; }
.cases figcaption { margin-top: 12px; font-size: clamp(18px, 1.4vw, 24px); color: var(--ink); letter-spacing: -.02em; }
.cases figcaption small { display: block; font: 400 clamp(13px, 1vw, 16px) var(--deck-mono); color: var(--muted); margin-top: 4px; }

/* pendência do Paulo: visível, para não passar despercebida */
.todo { display: inline-block; font: 400 clamp(14px, 1.1vw, 18px)/1.4 var(--deck-mono); color: var(--deep); background: repeating-linear-gradient(-45deg, var(--lilac-soft) 0 10px, #f6f2ff 10px 20px); border: 1px dashed var(--purple); border-radius: 10px; padding: 8px 12px; }
.slide.dark .todo { color: var(--lime); background: rgba(200, 245, 60, .06); border-color: var(--lime); }
.fine { font: 400 clamp(13px, .95vw, 15px)/1.5 var(--deck-mono); color: var(--muted); margin-top: clamp(14px, 2.4vh, 26px); }
.slide.dark .fine { color: rgba(255, 255, 255, .45); }

/* ---------- slides escuros (dither roxo, como a faixa do site) ---------- */
.slide.dark { background: var(--night); color: rgba(255, 255, 255, .78); }
.slide.dark .dither { position: absolute; inset: 0; z-index: 0; background: var(--purple); opacity: .32; -webkit-mask: var(--d-12) 0 0 / 8px 8px; mask: var(--d-12) 0 0 / 8px 8px; -webkit-mask-image: var(--d-12), linear-gradient(transparent 30%, #000); mask-composite: intersect; }
body.on-dark .nav-btn { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #fff; }
body.on-dark #counter, body.on-dark #hint { color: rgba(255, 255, 255, .5); }

/* atividade: selo lime */
.act { display: inline-flex; gap: 12px; align-items: center; font: 500 clamp(14px, 1.1vw, 18px) var(--deck-mono); color: var(--ink); background: var(--lime); padding: 8px 14px; border-radius: 8px; margin-bottom: clamp(18px, 3vh, 32px); }
.timer { font: 400 clamp(16px, 1.3vw, 22px) var(--deck-mono); color: rgba(255, 255, 255, .6); margin-top: clamp(18px, 3vh, 34px); }

/* capa */
.cover .logo-big { height: clamp(40px, 5.4vw, 86px); width: auto; margin: 0 auto clamp(26px, 5vh, 56px); }
.cover .meta { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; margin-top: clamp(26px, 5vh, 56px); font: 400 clamp(14px, 1.15vw, 19px) var(--deck-mono); color: var(--muted); }
.cover .meta b { color: var(--ink); font-weight: 500; }
.slide.dark .logo-big { filter: none; }

/* LED / projetor: some com texto pequeno */
body.led .fine, body.led .brandbar { display: none; }
body.led .lead { font-size: clamp(26px, 2.4vw, 40px); }

@media print { .slide.dark { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ajustes pós-QA: escala maior para telão e pendência legível dentro de títulos */
.h1 { font-size: clamp(48px, 6.4vw, 118px); }
.h2 { font-size: clamp(38px, 4.8vw, 84px); }
.nums dd { font-size: clamp(36px, 4.2vw, 76px); }
.h1 .todo, .h2 .todo, .big .todo { font-size: clamp(20px, 1.8vw, 34px); letter-spacing: 0; text-transform: none; vertical-align: middle; }
.lead .todo { font-size: .8em; }
.slide.paper .card.ink, .card.ink { background: var(--ink); border-color: var(--ink); }
.slide.paper .card.lilac { background: var(--lilac-soft); }
.flow span { font-size: clamp(20px, 1.7vw, 30px); padding: clamp(12px, 1.8vh, 20px) clamp(16px, 1.4vw, 24px); }
.flow { gap: 12px; max-width: 1500px; margin-inline: auto; }
.grid .h3 { font-size: clamp(24px, 2.1vw, 36px); }
.card p { font-size: clamp(18px, 1.5vw, 26px); }