/*
  SENTINELA 3.1 — DECK MODULAR · FASE 2: DESIGN SYSTEM APLICADO (piloto Glaucoma + Reforçada)
  Direção: SENTINELA_3.0_DESIGN_SYSTEM.md — branco dominante, azul profundo, azul/ciano nos pontos,
  roxo só dentro do logo iOLHOS, cinzas para o secundário. Mesmo sistema do Guia 3.0, do Encarte e do Mapa.
  Fontes: Zenzok e Century Gothic não estão no vault → Jost (fallback geométrico já usado no Guia aprovado).
  Slide de 1280 × 720 px (renderizado a 2× = 2560 × 1440). Menor texto: rodapé legal, 14 px.
*/
@page { size: 1280px 720px; margin: 0; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
:root {
  --navy: #00073D;      /* títulos, hierarquia            19,1:1 */
  --body: #3A4769;      /* texto corrido                   9,2:1 */
  --muted: #5A6784;     /* secundário, rodapé              5,7:1 */
  --accent: #1A67A6;    /* azul legível em texto           5,9:1 */
  --blue: #278FDA;      /* pontos e linhas (nunca texto) */
  --line: #C9DDF0;      /* fios, pontos futuros */
  --surface: #F1F7FD;   /* azul muito claro */
  --soft: #F6FAFE;      /* faixa sutil */
  --hair: #E3EAF3;      /* fio de divisão */
  --sans: 'Jost', 'Century Gothic', 'Avenir Next', Arial, sans-serif;
}
body { background: #C9D3DF; font-family: var(--sans); color: var(--body); }
@media print { body { background: none; } .slide { margin: 0 !important; box-shadow: none !important; } }
body.solo { background: #fff; } body.solo .slide { margin: 0; box-shadow: none; }

.slide { width: 1280px; height: 720px; background: #fff; position: relative; overflow: hidden; margin: 24px auto; break-after: page;
  box-shadow: 0 6px 30px rgba(0, 7, 61, .12); }
.slide:last-child { break-after: auto; }
.content { position: absolute; left: 96px; right: 96px; top: 84px; bottom: 76px; display: flex; flex-direction: column; }

/* rodapé legal — todos os slides: discreto, legível, sempre no mesmo lugar */
.legal { position: absolute; left: 96px; right: 80px; bottom: 24px; padding-top: 10px; border-top: 1px solid var(--hair);
  font-size: 14px; letter-spacing: 0; color: var(--muted); white-space: nowrap; }

/* ---------- tipo ---------- */
h1 { font-size: 58px; line-height: 1.12; font-weight: 500; color: var(--navy); letter-spacing: -.005em; text-wrap: balance; max-width: 1000px; }
h1 .l, .fecho .l, .sub .l, .intro .l { display: block; }
.sub { font-size: 28px; line-height: 1.45; color: var(--body); margin-top: 22px; max-width: 860px; text-wrap: pretty; }
.fecho { font-size: 30px; line-height: 1.35; color: var(--navy); margin-top: auto; }
.fecho .l + .l { font-weight: 500; }   /* segunda linha do fecho em peso médio — padrão do Guia */
.label { font-size: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }

/* ---------- pontos (cada um = momento, comparação ou sequência) ---------- */
svg .ln { stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; }
svg .ln.dash { stroke-dasharray: 2 9; opacity: .7; }
svg .ln.faint { stroke: var(--line); }
svg .pt { fill: var(--blue); }
svg .pt-o { fill: #fff; stroke: var(--blue); stroke-width: 2.5; }
svg .pt-m { fill: var(--line); }
svg .ring { fill: #fff; stroke: var(--blue); stroke-width: 2.5; }

/* =================== ATO 1 — NECESSIDADE: conceitual, muito branco =================== */
.entry { flex: 1; display: grid; grid-template-columns: 1fr 360px; align-items: center; column-gap: 48px; }
.entry h1 { font-size: 60px; }
.entry .vis { display: flex; align-items: center; }

/* S03 — o valor da comparação */
.s3 .ponte { margin-top: 18px; }
.compare { margin-top: auto; display: grid; grid-template-columns: 300px 72px 1fr; align-items: stretch; }
.compare .now { padding: 30px 0 30px; display: flex; flex-direction: column; justify-content: flex-end; }
.compare .now .q { font-size: 30px; color: var(--muted); margin-top: 18px; line-height: 1.25; }
.compare .to { align-self: center; font-size: 40px; color: var(--line); text-align: center; padding-top: 50px; }
.compare .then { background: var(--surface); border-radius: 18px; padding: 30px 40px; display: flex; flex-direction: column; justify-content: flex-end; }
.compare .then .q { font-size: 46px; font-weight: 500; color: var(--navy); line-height: 1.15; margin-top: 18px; }

/* S04 — Big Idea: a expressão mais clara do "Do ponto à história" */
.s4 .content { justify-content: center; }
.s4 .story { margin: 0 -96px 52px -96px; }
.s4 h1 { font-size: 60px; max-width: none; line-height: 1.14; }
.s4 h1 .l:first-child { font-weight: 400; }
.s4 .sub { font-size: 26px; max-width: 820px; color: var(--muted); }

/* S05 — foto / filme: mesma dignidade dos dois lados */
.film { margin-top: 64px; display: grid; grid-template-columns: 1fr 1.6fr; column-gap: 56px; align-items: end; }
.film .side { padding-top: 26px; border-top: 1px solid var(--hair); }
.film .sub { font-size: 25px; margin-top: 20px; }
.frames { display: flex; gap: 26px; position: relative; width: fit-content; }
.frame { width: 84px; height: 84px; border: 2px solid var(--blue); border-radius: 12px; display: grid; place-items: center; background: #fff; position: relative; z-index: 1; }
.frame i { width: 24px; height: 24px; border-radius: 50%; background: var(--blue); }
.frames.linked::before { content: ''; position: absolute; left: 42px; right: 42px; top: 41px; height: 2.5px; background: var(--blue); }

/* =================== ATO 2 — PRODUTO + PROVA: concreto =================== */
/* S06 — o conceito vira produto */
.s6 .lockup { height: 78px; width: auto; align-self: flex-start; display: block; margin: -6px 0 34px -4px; } /* proporção original do logo: não esticar */
.s6 h1 { font-size: 56px; }
.s6 .sub { max-width: 820px; }
.moments3 { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; }
.moments3 .seqwrap { width: 700px; }
.mlabels { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; font-size: 20px; color: var(--muted); }
.mlabels span:nth-child(2) { text-align: center; } .mlabels span:nth-child(3) { text-align: right; }
.iolhos-sign { height: 40px; width: auto; display: block; opacity: .95; }

/* S07 — mecanismo */
.s7 h1 { font-size: 62px; max-width: none; }
.s7 h1 .arrow { color: var(--line); font-weight: 400; }
.msteps { display: flex; justify-content: space-between; margin-top: 52px; position: relative; }
.msteps::before { content: ''; position: absolute; left: 13px; right: 13px; top: 12px; height: 2.5px; background: var(--blue); }
.mstep { position: relative; }
.mstep:last-child { text-align: right; }
.mdot { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); position: relative; z-index: 1; box-shadow: 0 0 0 6px #fff; }
.mstep:last-child .mdot { margin-left: auto; }
.mstep h3 { margin-top: 18px; font-size: 17px; letter-spacing: .14em; font-weight: 500; color: var(--navy); }
.mstep p { font-size: 22px; margin-top: 6px; white-space: nowrap; color: var(--body); }
.roles { margin-top: 38px; font-size: 18px; color: var(--muted); }
.roles .sep { margin: 0 14px; color: var(--line); }
.s7 .fecho { font-size: 28px; }

/* S08 — seis aspectos, um conjunto (não tabela) */
.aspects { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.aspects li { list-style: none; background: var(--soft); border-radius: 14px; padding: 30px 30px 32px; min-height: 120px;
  display: flex; align-items: flex-end; font-size: 28px; line-height: 1.2; color: var(--navy); }
.s8 .fecho { font-size: 28px; }

/* S09 — jornada prescrita */
.rx { margin-top: 30px; display: flex; gap: 72px; }
.rx div { display: flex; flex-direction: column; gap: 6px; }
.rx b { font-size: 30px; font-weight: 500; color: var(--navy); }
.journey { margin-top: auto; margin-bottom: 8px; }
.jlabels { display: grid; margin-top: 14px; }
.jlabels div { font-size: 24px; font-weight: 500; color: var(--navy); }
.jlabels small { display: block; font-size: 15px; letter-spacing: .14em; color: var(--muted); font-weight: 500; margin-bottom: 4px; }
.jlabels div:nth-child(n+2) { text-align: center; } .jlabels div:last-child { text-align: right; }
.s9 .fecho { margin-top: 44px; font-size: 28px; }

/* S10 — a grande prova: relatório real + zoom do gráfico */
.s10 .content { top: 44px; }
.s10 h1 { font-size: 52px; max-width: none; }
/* Rodada de correção 16/10/2026: a prova passou a ocupar toda a altura útil abaixo da headline
   (488 → 556 px) e o zoom ficou maior, para o gráfico ser o segundo elemento percebido. */
.proof { position: relative; margin-top: 12px; height: 556px; }
.proof .sheetwrap { position: absolute; left: 0; top: 0; height: 556px; overflow: hidden; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,7,61,.10), 0 10px 30px rgba(0,7,61,.10); }
.proof .sheetwrap img { display: block; width: 100%; }
.proof .zoom { position: absolute; right: 0; top: 54px; width: 586px; background: #fff; border-radius: 14px; padding: 18px 20px 14px;
  box-shadow: 0 1px 2px rgba(0,7,61,.08), 0 14px 40px rgba(0,7,61,.14); border: 1.5px solid var(--blue); }
.proof .zoom img { width: 100%; display: block; }
.proof svg.leads { position: absolute; inset: 0; pointer-events: none; }
.proof svg .hl { fill: rgba(39,143,218,.06); stroke: var(--blue); stroke-width: 2; }
.proof svg .lead { stroke: var(--blue); stroke-width: 1.4; stroke-dasharray: 3 5; }

/* S11 — entrega concreta, sem cara de lista de bônus */
.deliver { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 40px; row-gap: 0; }
.deliver li { list-style: none; font-size: 26px; line-height: 1.25; color: var(--navy); padding: 22px 0 24px; border-top: 2px solid var(--hair); }
.deliver li:nth-child(-n+3) { border-top-color: var(--line); }
.s11 .fecho { font-size: 28px; }

/* =================== ATO 3 — PRESCRIÇÃO + OFERTA: limpo, seguro =================== */
.s12 .content, .s13 .content { justify-content: flex-start; }
.rxname { margin-top: 64px; font-size: 76px; font-weight: 500; color: var(--navy); letter-spacing: -.01em; }
.rxrule { width: 120px; height: 3px; background: var(--blue); margin: 30px 0 28px; border-radius: 2px; }
.s12 .sub { margin-top: 0; font-size: 30px; }

.price { margin-top: 56px; padding: 34px 0 30px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.price .pname { font-size: 30px; color: var(--navy); font-weight: 500; }
.price .valor { font-size: 96px; font-weight: 500; color: var(--navy); line-height: 1.05; margin-top: 10px; letter-spacing: -.01em; }
.price .cond { font-size: 28px; color: var(--muted); margin-top: 10px; }
.s13 .micro { margin-top: 28px; font-size: 26px; color: var(--body); }

/* S14 — encerramento da jornada */
.s14 .sub { max-width: 900px; }
.next { margin-top: 44px; }
.nlabels { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
.nlabels p { font-size: 24px; color: var(--navy); line-height: 1.25; }
.nlabels p:nth-child(2) { text-align: center; } .nlabels p:last-child { text-align: right; }
.closing { margin: auto -96px 0; padding: 26px 96px 0; display: flex; align-items: center; gap: 40px; border-top: 1px solid var(--hair); }
.closing .fecho { margin: 0 auto 0 0; font-size: 28px; font-weight: 500; }
.closing .lockup { height: 64px; width: auto; display: block; }
.closing .iolhos-sign { height: 34px; }

/* Catarata S02 (fora do piloto, mantido para o deck continuar modular): introdução menor, pergunta dominante */
.intro { font-size: 30px; line-height: 1.35; color: var(--muted); margin-bottom: 20px; }

/* App do pitch (17/10/2026): com vários motivos, o slide 9 lista todos — a coluna do motivo
   encolhe e quebra linha, e a frequência não quebra. Com um motivo só, nada muda. */
.rx.varios div:first-child { flex: 0 1 auto; min-width: 0; }
.rx.varios div:last-child { flex: none; }

/* Pitch (rodada final, 17/10/2026): nome do paciente no slide 9, discreto — uma linha logo acima
   de "Motivo(s) da indicação" e "Seu acompanhamento", com o mesmo rótulo. Só aparece quando o app
   passa o nome; o deck avulso fica como o aprovado. */
.s9 .pac { margin-top: 18px; display: flex; align-items: baseline; gap: 16px; font-size: 22px; color: var(--body);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s9 .pac .label { flex: none; }
.s9 .pac .nome { overflow: hidden; text-overflow: ellipsis; }
.rx.com-paciente { margin-top: 10px; }
.s9 .pac { flex: none; }
/* com nome E vários motivos, o slide aprovado não tem folga: o respiro antes do fecho encolhe */
.s9 .pac ~ .rx.varios ~ .fecho { margin-top: 16px; }