/* =============================================================================
   STINT · Apresentação Comercial Interativa — BASE DOS SLIDES
   Cada slide é desenhado em 1280 × 720 px (16:9) e escalado para a tela.
   Medidas tiradas dos slides do PowerPoint oficial (2046 × 1151 px = 1280 × 720 × 1,6).
   ============================================================================= */
:root {
  --ink: #101310;            /* títulos (fundo claro) */
  --ink-2: #373c31;          /* textos de apoio */
  --ink-3: #6b7065;          /* textos secundários */
  --verde: #00b85c;          /* destaque nos títulos */
  --verde-2: #12b15f;        /* eyebrow, números */
  --lima: #77e40d;           /* verde STINT (cantoneiras, barra, destaques no escuro) */
  --lima-2: #6fdc12;
  --card: rgba(255, 255, 255, .72);
  --card-borda: rgba(255, 255, 255, .9);
  --sombra-card: 0 10px 28px -14px rgba(32, 52, 24, .28), 0 1px 2px rgba(32, 52, 24, .06);
  --serif: 'Bree Serif', Georgia, serif;
  --sans: 'Poppins', Arial, sans-serif;
}

/* ── palco ─────────────────────────────────────────────────────────────── */
.slide {
  position: absolute; left: 0; top: 0; width: 1280px; height: 720px; overflow: hidden;
  font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; background: #f1f2ed;
}
.slide *, .slide *::before, .slide *::after { box-sizing: border-box; }
.slide p, .slide h1, .slide h2, .slide h3, .slide ul, .slide ol { margin: 0; padding: 0; }

/* ── fundo claro: 3 manchas de luz + leve gradiente (ajustados ao original) ── */
.slide.light .bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(801px 832px at 168px 233px, rgba(221,238,202,1) 0%, rgba(221,238,202,.869) 12%, rgba(221,238,202,.570) 25%, rgba(221,238,202,.282) 38%, rgba(221,238,202,.105) 50%, rgba(221,238,202,.030) 62%, rgba(221,238,202,.006) 75%, rgba(221,238,202,0) 100%),
    radial-gradient(714px 781px at 685px 565px, rgba(226,237,212,1) 0%, rgba(226,237,212,.869) 12%, rgba(226,237,212,.570) 25%, rgba(226,237,212,.282) 38%, rgba(226,237,212,.105) 50%, rgba(226,237,212,.030) 62%, rgba(226,237,212,.006) 75%, rgba(226,237,212,0) 100%),
    radial-gradient(696px 715px at 1145px 367px, rgba(217,234,221,1) 0%, rgba(217,234,221,.869) 12%, rgba(217,234,221,.570) 25%, rgba(217,234,221,.282) 38%, rgba(217,234,221,.105) 50%, rgba(217,234,221,.030) 62%, rgba(217,234,221,.006) 75%, rgba(217,234,221,0) 100%),
    linear-gradient(to right, rgba(255,255,0,0) 0%, rgba(255,255,0,.0146) 100%),
    linear-gradient(to bottom, rgb(249,247,248), rgb(236,237,232));
}
/* linhas diagonais finas (55°, a cada 120 px) — desenhadas em SVG pelo deck.js */
.slide .bg-linhas { position: absolute; inset: 0; width: 1280px; height: 720px; pointer-events: none; }
.slide.light .bg-linhas line { stroke: rgba(70, 90, 60, .04); stroke-width: 1; }

/* ── fundo escuro: preto esverdeado com linhas de varredura ── */
.slide.dark { background: #0b0d0a; color: #f4f7f1; }
.slide.dark .bg {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.032) 0 1.2px, rgba(255,255,255,0) 1.2px 6.25px),
    radial-gradient(120% 90% at 50% 45%, rgba(20,24,18,.55) 0%, rgba(20,24,18,0) 70%),
    linear-gradient(to bottom, #070906 0%, #0c0e0b 30%, #0b0d0a 100%);
}
.slide.dark .bg-linhas { display: none; }

/* ── moldura, cantoneiras, logo, marca d'água, contador e barra ── */
.slide .moldura { position: absolute; left: 20px; top: 20px; right: 20px; bottom: 20px; border: 1px solid rgba(40, 52, 36, .1); border-radius: 3px; pointer-events: none; }
.slide.dark .moldura { border-color: rgba(255, 255, 255, .07); }
.slide .canto { position: absolute; width: 26px; height: 26px; pointer-events: none; }
.slide .canto.tl { left: 20px; top: 20px; border-left: 2px solid var(--lima); border-top: 2px solid var(--lima); }
.slide .canto.br { right: 20px; bottom: 20px; border-right: 2px solid var(--lima); border-bottom: 2px solid var(--lima); }
.slide .logo { position: absolute; right: 43.7px; top: 28px; width: 66.6px; height: 20px; background: url(../img/stint-preto.png) no-repeat center / contain; }
.slide.dark .logo { background-image: url(../img/stint-branco.png); }
.slide .marca { position: absolute; right: 39.4px; top: 600.6px; width: 150px; height: 45px; background: url(../img/stint-preto.png) no-repeat center / contain; opacity: .055; pointer-events: none; }
.slide.dark .marca { background-image: url(../img/stint-branco.png); opacity: .06; }
.slide .contador { position: absolute; left: 42px; top: 681.5px; font: 700 11px/1 var(--serif); letter-spacing: .18em; color: var(--verde-2); white-space: nowrap; }
.slide .contador .tot { color: rgba(255, 255, 255, .55); font-weight: 400; }
.slide.dark .contador .tot { color: rgba(255, 255, 255, .55); }
.slide .barra { position: absolute; left: 0; bottom: 0; height: 3.2px; background: linear-gradient(90deg, #77e40d, #10b860); }

/* ── componentes recorrentes ───────────────────────────────────────────── */
.slide .eyebrow { display: flex; align-items: center; gap: 10px; color: var(--verde-2); font: 400 10px/1 var(--serif); letter-spacing: .32em; text-transform: uppercase; white-space: nowrap; }
.slide .eyebrow svg { width: 13px; height: 13px; flex: none; }
.slide .eyebrow::after { content: ''; width: 26px; height: 1px; background: currentColor; opacity: .8; margin-left: 2px; }
.slide .titulo { font-family: var(--serif); font-weight: 400; color: var(--ink); letter-spacing: -.005em; }
.slide.dark .titulo { color: #f6f8f3; }
.slide .verde { color: var(--verde); }
.slide.dark .verde { color: var(--lima); }
.slide .texto { font-family: var(--sans); color: var(--ink-2); }
.slide.dark .texto { color: rgba(240, 244, 236, .82); }
.slide b, .slide strong { font-weight: 600; }

/* ícones de traço (mesmo desenho dos originais: traço 2px, cantos arredondados) */
.slide .ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── edição ─────────────────────────────────────────────────────────────── */
.deck.editando .slide [data-e] { outline: 1px dashed rgba(16, 184, 96, .55); outline-offset: 2px; cursor: text; }
.deck.editando .slide [data-e]:hover { outline-color: rgba(16, 184, 96, .95); }
.deck.editando .slide [data-e]:focus { outline: 2px solid #10b860; background: rgba(119, 228, 13, .08); }
.slide [data-e].editado::selection { background: rgba(119, 228, 13, .35); }

/* ── captura (comparação com o PowerPoint): sem animações ── */
.captura .slide *, .captura .slide *::before, .captura .slide *::after { animation: none !important; transition: none !important; }

/* palavra gigante ao fundo dos slides escuros (RESULTADO, CICLO, RODRIGO) */
.slide .palavra-fundo { position: absolute; font: italic 900 186px/1 'Inter', var(--sans); letter-spacing: -.02em; color: rgb(33, 58, 27); white-space: nowrap;
  text-shadow: -7px 0 0 rgba(70, 92, 40, .55), 5px 0 0 rgba(20, 60, 60, .35); pointer-events: none; }
/* varredura por cima de tudo nos slides escuros */
.slide.dark .varredura { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.028) 0 1.2px, rgba(255,255,255,0) 1.2px 6.25px); }
.slide .eyebrow { font-weight: 700; font-size: 11.4px; letter-spacing: .285em; color: #13944b; gap: 13px; }
.slide .eyebrow svg { width: 13px; height: 15px; stroke-width: 2.2; }
.slide .eyebrow::after { width: 25px; height: 1.6px; margin-left: 0; background: #2fb36a; opacity: .9; }

/* títulos e textos das telas de entrega (30-37) */
.slide .t-entrega { font-size: 38.9px; line-height: 1.2; }
.slide .lead-entrega { font-size: 17.85px; line-height: 27.6px; width: 820px; }
/* prints de tela (imagens recortadas do material original) */
.slide .print { position: absolute; overflow: hidden; border-radius: 11.5px; box-shadow: 0 22px 44px -18px rgba(20, 40, 15, .45), 0 3px 10px rgba(20, 40, 15, .1); }
.slide .print img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; }

/* foto de fundo em tela cheia (slides 2 e 29) */
.slide .foto-fundo { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; object-fit: cover; user-select: none; pointer-events: none; }
.slide.dark .eyebrow { color: var(--lima); }
.slide.dark .eyebrow::after { background: var(--lima); opacity: .75; }

/* cartões brancos translúcidos e chamada verde (componentes recorrentes) */
.slide .cartao { background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(250,252,248,.8)); border: 1px solid rgba(255,255,255,.95);
  border-radius: 12px; box-shadow: 0 14px 30px -16px rgba(40, 70, 30, .34), 0 1px 3px rgba(40, 70, 30, .07); }
.slide .chamada { background: rgba(196, 238, 158, .55); border: 1px solid rgba(126, 214, 66, .5); border-radius: 10px; color: #1f4a04; font-weight: 600; }
.slide .forte { color: var(--ink); font-weight: 600; }
.slide .ic.check { color: #10a855; }
/* diagrama de camadas (elipses) */
.slide .elipses { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; pointer-events: none; overflow: visible; }
.slide .camada { position: absolute; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.slide .camada b { display: block; font: 600 14.2px/16.8px var(--sans); color: #2d3229; }
.slide .camada small { display: block; font: 400 11.5px/16px var(--sans); color: #6d7268; margin-top: 3.4px; }
.slide .camada.apagada b { color: #b7bbb2; }
.slide .camada.apagada small { color: #c4c7bf; }
.slide .camada.ativa b { color: #1f4a04; }
.slide .camada.ativa small { color: #0ea653; font-weight: 600; }
.slide .camada.azul b { color: #2559b5; }
.slide .camada.verde b { color: #0d7a3d; }
.slide .camada.ouro b { color: #8b5d00; }
/* trio de cartões (slides 9, 12...) */
.slide .trio { position: absolute; width: 341px; height: 72px; padding: 16px 16px 0 19px; border-radius: 13px; }
.slide .trio p { font: 400 14.8px/20.7px var(--sans); color: #3a3f35; white-space: nowrap; }
.slide .trio b { font-weight: 600; color: #14170f; }
/* slides de case */
.slide .caso-eb { position: absolute; left: 60px; top: 50px; }
.slide .caso-topo { position: absolute; left: 57.5px; top: 83.5px; height: 33.8px; display: flex; align-items: center; gap: 16.6px; white-space: nowrap; }
.slide .caso-nome { font-size: 29.3px; line-height: 33.8px; margin-top: -1px; }
.slide .caso-selo { height: 33.8px; padding: 0 16.6px; border-radius: 17px; background: rgba(196, 238, 150, .55); border: 1px solid rgba(119, 228, 13, .45);
  font: 600 13.2px/31.8px var(--sans); color: #2f5208; }
.slide .caso-print { border-radius: 12px; box-shadow: 0 26px 50px -22px rgba(20, 40, 15, .42), 0 3px 10px rgba(20, 40, 15, .08); }
.slide .caso-txt { position: absolute; font-family: var(--serif); color: #1b1f18; white-space: nowrap; }
.slide .caso-txt p + p { margin-top: 14.4px; }
