/* Páginas /conheca/... — visual da landing de abril (verde-azulado editorial, DM Serif Display + Outfit).
 * Palco fixo + aparelho + cartões + fios; a rolagem dirige tudo (ver cenas.js). Nada aqui é clicável, exceto links e botões. */
:root {
  --teal-900:#0f766e; --teal-700:#0d9488; --teal-500:#14b8a6; --teal-100:#ccfbf1; --teal-50:#f0fdfa;
  --blue-500:#3b82f6; --green-500:#22c55e; --amber-500:#f59e0b; --violet-500:#7c3aed; --violet-50:#f5f3ff;
  --g900:#111827; --g700:#374151; --g500:#6b7280; --g300:#d1d5db; --g100:#f3f4f6;
  --display:'DM Serif Display',Georgia,serif; --corpo:'Outfit','Inter',system-ui,sans-serif;
  --topo:56px;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font:17px/1.6 var(--corpo); color:var(--g700); background:#f8fafc; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:var(--teal-900); }
.pular { position:absolute; left:-999px; top:8px; background:#fff; padding:8px 12px; border-radius:8px; z-index:200; }
.pular:focus { left:8px; }

/* fundo vivo: um só para a página inteira */
.fundo-vivo { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  background:radial-gradient(circle at 30% 40%, #ccfbf1 0%, #f0fdfa 26%, #f8fafc 66%); background-size:170% 170%; animation:gradienteVivo 14s ease-in-out infinite; }
.fundo-vivo::after { content:''; position:absolute; inset:0; background:radial-gradient(circle, rgba(15,118,110,.07) 1px, transparent 1px); background-size:24px 24px; }
.mancha { position:absolute; border-radius:50%; filter:blur(40px); }
.m1 { width:460px; height:460px; right:-120px; top:-140px; background:radial-gradient(circle, rgba(20,184,166,.2), transparent 70%); animation:boia1 11s ease-in-out infinite; }
.m2 { width:340px; height:340px; left:-90px; bottom:-80px; background:radial-gradient(circle, rgba(245,158,11,.16), transparent 70%); animation:boia2 13s ease-in-out infinite; }
@keyframes gradienteVivo { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
@keyframes boia1 { 0%,100% { transform:translate(0,0); } 50% { transform:translate(-14px,18px); } }
@keyframes boia2 { 0%,100% { transform:translate(0,0); } 50% { transform:translate(16px,-12px); } }

/* faixa de parceiro (só com ?ref=) */
.faixa-parceiro { position:fixed; top:var(--topo); left:0; right:0; z-index:90; background:var(--teal-900); color:#fff; font-size:13px; text-align:center; padding:4px 12px; }
.faixa-parceiro[hidden] { display:none; }

/* barra superior com a trilha da jornada */
.barra { position:fixed; top:0; left:0; right:0; height:var(--topo); z-index:100; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 24px;
  background:rgba(255,255,255,.82); backdrop-filter:blur(8px); border-bottom:1px solid rgba(15,118,110,.1); }
.marca { font-family:var(--display); font-size:21px; color:var(--teal-900); text-decoration:none; letter-spacing:-.3px; white-space:nowrap; }
.fases { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:10px; }
.fase { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:500; color:var(--g500); transition:color .3s ease; }
.fase i { width:10px; height:10px; border-radius:50%; border:2px solid var(--g300); background:#fff; transition:background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.fase.on { color:var(--g900); }
.fase.on i { background:var(--teal-900); border-color:var(--teal-900); box-shadow:0 0 0 4px rgba(20,184,166,.2); }
.fase.feita i { background:var(--teal-500); border-color:var(--teal-500); }
.fase + .fase::before { content:''; width:28px; height:2px; background:var(--g300); margin-right:3px; }
.fase.feita + .fase::before, .fase.on + .fase::before { background:var(--g300); }
.btn-solid { display:inline-block; padding:8px 18px; border-radius:8px; background:var(--teal-900); color:#fff; font:600 14px var(--corpo); text-decoration:none; transition:background .2s ease, transform .2s ease; white-space:nowrap; }
.btn-solid:hover { background:#0a5f58; transform:translateY(-1px); }

/* selos: o vocabulário da página */
.selos { list-style:none; margin:0 0 12px; padding:0; display:flex; gap:8px; flex-wrap:wrap; }
.selo { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:4px 12px 4px 9px; border-radius:999px; }
.selo svg { flex:none; }
.selo-ensina { background:var(--teal-50); color:var(--teal-900); border:1px solid var(--teal-100); }
.selo-junto { background:var(--violet-50); color:#5b21b6; border:1px solid #ddd6fe; }
.selo-guarda { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }

/* abertura e fecho */
.bloco { min-height:100vh; display:grid; align-content:center; justify-items:start; max-width:1180px; margin:0 auto; padding:calc(var(--topo) + 40px) 24px 56px; }
.eyebrow, .olho { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--teal-700); margin:0 0 14px; }
.eyebrow .traco, .olho .traco { width:24px; height:2px; background:var(--teal-700); flex:none; }
.bloco h1 { font-family:var(--display); font-weight:400; font-size:clamp(34px,6.4vw,64px); line-height:1.1; color:var(--g900); letter-spacing:-.5px; margin:0 0 20px; max-width:15em; }
.bloco h2 { font-family:var(--display); font-weight:400; font-size:clamp(30px,5vw,50px); line-height:1.12; color:var(--g900); letter-spacing:-.4px; margin:0 0 18px; max-width:16em; }
.destaque-t { text-decoration:underline; text-decoration-color:rgba(20,184,166,.35); text-underline-offset:4px; text-decoration-thickness:6px; }
.lide { font-size:clamp(17px,2vw,20px); line-height:1.65; color:var(--g500); max-width:34em; margin:0 0 28px; }
.tres { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; width:100%; max-width:760px; margin:0 0 30px; padding:0; list-style:none; }
.tres li { padding:2px 0 2px 14px; border-left:3px solid var(--acc); }   /* sem cartão: são a ideia, não botões */
.tres li:nth-child(1) { --acc:var(--teal-500); } .tres li:nth-child(2) { --acc:var(--violet-500); } .tres li:nth-child(3) { --acc:var(--amber-500); }
.tres b { display:block; font-size:15px; color:var(--g900); margin-bottom:2px; }
.tres span { font-size:13.5px; line-height:1.45; color:var(--g500); }
.cta-primary { display:inline-flex; align-items:center; padding:15px 30px; border-radius:12px; background:var(--teal-900); color:#fff; font:600 16px var(--corpo); text-decoration:none; transition:all .25s ease; }
.cta-primary:hover { background:#0a5f58; transform:translateY(-2px); box-shadow:0 8px 24px rgba(15,118,110,.25); }
.cta-secundario { margin-left:18px; color:var(--g700); font-weight:500; text-decoration:none; }
.cta-secundario:hover { color:var(--teal-900); }
/* abertura: o visitante escolhe entre assistir (rolagem automática) e explorar (rolar sozinho) */
.escolha { width:100%; max-width:760px; margin:0 0 26px; }
.escolha-t { margin:0 0 12px; font:700 19px var(--corpo); color:var(--g900); }
.escolha-opcoes { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:14px; }
.opcao { appearance:none; display:block; text-align:left; font:inherit; color:var(--g700); text-decoration:none; cursor:pointer; background:#fff; border:2px solid transparent; border-radius:14px;
  padding:16px 18px 18px; box-shadow:0 8px 24px rgba(0,0,0,.08); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.opcao[hidden] { display:none; }
.opcao:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(15,118,110,.18); }
.opcao:focus-visible { outline:3px solid var(--teal-500); outline-offset:3px; }
.opcao b { display:flex; align-items:center; gap:8px; margin-bottom:6px; font:700 18px var(--corpo); color:var(--g900); }
.opcao > span { display:block; font-size:14px; line-height:1.5; color:var(--g500); }
.opcao-play { border-color:var(--teal-500); background:linear-gradient(180deg,#fff,#f0fdfa); }
.opcao-play b { color:var(--teal-900); }
.opcao-explorar:hover { border-color:var(--g300); }
/* fecho: duas portas */
.portas { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; width:100%; max-width:860px; margin:0 0 8px; }
.porta { background:#fff; border-radius:16px; padding:24px 26px 22px; box-shadow:0 8px 24px rgba(0,0,0,.08); border-top:4px solid var(--acc); }
.porta-emp { --acc:var(--teal-500); } .porta-func { --acc:var(--violet-500); }
.porta h3 { font-family:var(--display); font-weight:400; font-size:26px; color:var(--g900); margin:0 0 8px; }
.porta p { font-size:15.5px; line-height:1.6; color:var(--g500); margin:0 0 16px; }
.porta p:last-child { margin-bottom:0; }
.cta-violeta { background:var(--violet-500); }
.cta-violeta:hover { background:#6d28d9; box-shadow:0 8px 24px rgba(124,58,237,.25); }
.aviso { font-size:13px; color:var(--g500); max-width:40em; margin:22px 0 0; }
.entra { opacity:0; animation:heroFadeIn .7s ease-out forwards; animation-delay:calc(var(--i, 0) * .12s); }
@keyframes heroFadeIn { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }

/* cena: a rolagem dirige o palco */
.trilho { position:relative; height:var(--h, 300vh); }
.palco-p { position:sticky; top:var(--topo); height:calc(100vh - var(--topo)); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:center; max-width:1180px; margin:0 auto; padding:16px 24px; }
.texto-p { max-width:440px; will-change:transform,opacity; }
.texto-p h2 { font-family:var(--display); font-weight:400; font-size:clamp(28px,3.4vw,42px); line-height:1.12; color:var(--g900); letter-spacing:-.4px; margin:0 0 14px; }
.legenda { font-size:clamp(17px,1.7vw,19px); line-height:1.6; color:var(--g500); min-height:5.6em; margin:0 0 14px; }
.no-guia { margin:0; padding:12px 0 0; border-top:1px solid var(--g100); font-size:13.5px; color:var(--g500); }
.no-guia .rotulo { display:block; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-700); margin-bottom:4px; }
.no-guia ul { list-style:none; margin:0; padding:0; }
.no-guia li { padding:2px 0; line-height:1.4; }
.no-guia a { color:var(--g700); text-decoration:none; border-bottom:1px solid var(--teal-100); }
.no-guia a:hover { color:var(--teal-900); border-color:var(--teal-500); }
.no-guia .tempo { color:var(--g300); }
.no-guia [hidden] { display:none; }
.prog { position:absolute; left:14px; bottom:12px; font:12px ui-monospace,monospace; color:var(--g500); background:rgba(255,255,255,.7); padding:2px 8px; border-radius:6px; }

.cenario { position:relative; width:min(800px, calc(100vw - 400px)); display:grid; place-items:center; }
.aparelho { display:grid; place-items:center; z-index:2; animation:flutua 6s ease-in-out infinite; }
@keyframes flutua { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
.telefone { background:#fff; border:3px solid var(--g300); border-radius:36px; box-shadow:0 24px 64px rgba(0,0,0,.1), 0 8px 24px rgba(0,0,0,.05); position:relative; will-change:transform; }
.tela-p { position:relative; overflow:hidden; background:#f8fafc; border-radius:33px; height:min(calc(100vh - var(--topo) - 56px), 700px); aspect-ratio:390/844; }
.slide { position:absolute; inset:0; will-change:transform; }
.slide img { display:block; }
.slide .base { position:absolute; inset:0; width:100%; height:100%; }
.reveal { position:absolute; background-repeat:no-repeat; clip-path:inset(0 100% 0 0); }
.troca { position:absolute; inset:0; width:100%; height:100%; opacity:0; }
.realce { position:absolute; outline:2.5px solid var(--teal-500); outline-offset:4px; border-radius:8px; box-shadow:0 0 0 8px rgba(20,184,166,.14); opacity:0; transition:opacity .3s ease; z-index:3; pointer-events:none; }
.realce.on { opacity:1; }
.realce.outro { outline-color:var(--violet-500); box-shadow:0 0 0 8px rgba(124,58,237,.13); }
.fios { position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:5; pointer-events:none; }   /* abaixo dos cartões (z 6): o fio nasce na borda e nunca corre sobre o texto */
.fio { fill:none; stroke:var(--teal-700); stroke-width:2; stroke-linecap:round; }
.ponta { fill:var(--teal-700); }
.fio.outro { stroke:var(--violet-500); } .ponta.outro { fill:var(--violet-500); }

/* cartões: o externo recebe a rolagem; o interno flutua sozinho, como no hero de abril */
.cd { position:absolute; z-index:6; width:204px; will-change:transform,opacity; opacity:0; top:var(--td, 30%); }
.cd.e { left:0; } .cd.d { right:0; }
.cd-in { background:#fff; border:0; border-left:3px solid var(--acc, var(--teal-500)); border-radius:12px; padding:12px 16px 13px; box-shadow:0 8px 24px rgba(0,0,0,.1); }
.cd-in .t { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--g900); margin:0 0 4px; }
.cd-in .ic { display:inline-flex; flex:none; }
.cd-in .quem { margin-left:auto; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:999px; background:var(--violet-50); color:#5b21b6; }
.cd-in .d { margin:0; font-size:12.5px; line-height:1.45; color:var(--g500); }
.cd-in .d + .d { margin-top:5px; }
.cd-in ul { list-style:none; margin:4px 0 0; padding:0; font-size:12.5px; line-height:1.4; color:var(--g500); }
.cd-in li { padding:4px 0; border-top:1px solid var(--g100); } .cd-in li:first-child { border-top:0; }
.cd-in li b, .cd-in .d b { color:var(--g900); font-weight:600; }
.chips { display:flex; gap:4px; margin:6px 0 2px; flex-wrap:wrap; }
.chips span { font-size:11px; font-weight:600; padding:3px 8px; border-radius:999px; background:var(--teal-50); color:var(--teal-900); }
.cd-in { animation:flut 6s ease-in-out infinite; } .cd:nth-of-type(2n) .cd-in { animation-duration:5s; animation-delay:.5s; } .cd:nth-of-type(3n) .cd-in { animation-duration:5.5s; animation-delay:1s; }
@keyframes flut { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }

.rodape { text-align:center; color:var(--g500); font-size:13px; padding:30px 20px 60px; }

/* cena com os dois lados: empregador e funcionária no mesmo palco; o fato nasce de um lado e chega no outro */
.palco-p.dupla { max-width:1320px; grid-template-columns:minmax(0,340px) minmax(0,1fr); }
.palco-p.dupla .texto-p { max-width:340px; }
/* o cartão do meio cabe inteiro no vão (nunca cobre um aparelho nem o que ele aponta); se a largura não der, os aparelhos encolhem */
.cenario.dupla { --cw:204px; --vao:calc(var(--cw) + 28px); width:100%; display:grid; grid-template-columns:auto auto; justify-content:center; align-items:center; column-gap:var(--vao); }
.cenario.dupla .tela-p { height:min(calc(100vh - var(--topo) - 120px), 560px, calc(((min(900px, 100vw - 420px) - var(--vao)) / 2 - 10px) * 2.164)); }
.cenario.dupla .cd.c { left:50%; margin-left:-102px; }
@media (min-width:861px) { .cenario.dupla .cd.e, .cenario.dupla .cd.d { left:50%; right:auto; margin-left:-102px; } }   /* no computador todo cartão de cena dupla vai para o vão, qualquer que seja o lado; no celular cada um fica no seu */
.lado-rotulo { margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 14px; border-radius:999px; justify-self:center; }
.lado-emp .lado-rotulo { background:var(--teal-50); color:var(--teal-900); border:1px solid var(--teal-100); }
.lado-func .lado-rotulo { background:var(--violet-50); color:#5b21b6; border:1px solid #ddd6fe; }
.lado-emp .telefone { border-color:#99f6e4; }
.lado-func .telefone { border-color:#ddd6fe; }

/* celular: texto em cima, aparelho embaixo, cartões sobre a parte baixa da tela do aparelho */
@media (max-width:860px) {
  :root { --topo:52px; }
  .barra { padding:0 12px; gap:8px; } .marca { font-size:16px; } .fases { gap:6px; } .fase span { display:none; } .fase + .fase::before { width:12px; margin-right:0; }
  .btn-solid { padding:7px 11px; font-size:12.5px; }
  .palco-p { grid-template-columns:1fr; grid-template-rows:auto auto; align-content:start; justify-items:center; gap:6px; padding:10px 18px; }
  .texto-p { max-width:560px; width:100%; }
  .texto-p h2 { display:none; }
  .texto-p .olho { margin-bottom:6px; }
  .selos { margin-bottom:6px; }
  .legenda { font-size:16px; min-height:4.6em; margin-bottom:6px; }
  .no-guia { padding-top:6px; } .no-guia li:nth-child(n+2) { display:none; }
  .tela-p { height:min(57vh, 500px); border-radius:25px; } .telefone { border-radius:28px; }
  .cenario { width:100%; }
  .palco-p.dupla { grid-template-columns:1fr; }
  .cenario.dupla { grid-template-columns:1fr; }
  .cenario.dupla .aparelho { grid-area:1 / 1; }
  .cenario.dupla { margin-top:8px; }
  .cenario.dupla .tela-p { height:min(54vh, 480px); }
  .cenario.dupla .cd.c { left:50%; margin-left:-88px; }
  .cd { width:176px; top:auto; bottom:var(--tm, 8%); } .cd.e { left:4%; } .cd.d { right:4%; }
  .cd-in { padding:9px 12px 10px; } .cd-in .d, .cd-in ul { font-size:12px; }
  /* abertura compacta: a escolha Assistir/Explorar precisa aparecer na primeira tela do celular */
  #topo { padding:calc(var(--topo) + 16px) 24px 36px; align-content:start; }
  #topo .eyebrow { font-size:11.5px; letter-spacing:1.1px; margin-bottom:10px; } #topo .eyebrow .traco { display:none; }
  #topo h1 { font-size:30px; margin-bottom:12px; }
  #topo .lide { font-size:16px; line-height:1.5; margin-bottom:18px; }
  .tres { grid-template-columns:1fr; gap:9px; margin-bottom:20px; }
  .tres b { display:inline; margin:0 6px 0 0; } .tres span { display:inline; font-size:13.5px; }
  .escolha { margin-bottom:20px; } .escolha-t { font-size:17px; margin-bottom:10px; }
  .escolha-opcoes { grid-template-columns:1fr 1fr; gap:10px; } .opcao { padding:12px 13px 13px; } .opcao b { margin-bottom:3px; font-size:16.5px; } .opcao > span { font-size:12.5px; line-height:1.4; }
  .portas { grid-template-columns:1fr; }
  .cta-secundario { display:block; margin:14px 0 0; }
}
/* ── rolagem automática: pílula flutuante e botão da abertura (auto.js) ── */
.auto-pill { position:fixed; left:24px; bottom:max(16px, env(safe-area-inset-bottom)); z-index:95; display:flex; align-items:center; gap:2px; padding:4px;
  border-radius:999px; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 28px rgba(15,23,42,.16), 0 0 0 1px rgba(15,23,42,.07); font:600 14px var(--corpo); }
.auto-pill button { appearance:none; border:0; background:transparent; font:inherit; color:var(--g700); cursor:pointer; border-radius:999px; min-height:40px; }
.auto-play { display:inline-flex; align-items:center; gap:8px; padding:0 16px 0 12px; background:var(--teal-900) !important; color:#fff !important; transition:background .2s ease, transform .15s ease; }
.auto-play:hover { background:#0a5f58 !important; transform:translateY(-1px); }
.auto-pill[data-estado="rodando"] .auto-play { background:var(--g900) !important; }
.auto-ic { display:inline-flex; }
.auto-vel { padding:0 12px; min-width:48px; font-variant-numeric:tabular-nums; }
.auto-vel:hover { background:var(--g100); }
.auto-pill button:focus-visible { outline:3px solid var(--teal-500); outline-offset:2px; }
.auto-vo { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.auto-pill[data-estado="desligado"] { display:none; }                          /* antes de escolher "Assistir" não há controle na tela */
.auto-cta { display:none; align-items:center; min-height:40px; padding:0 18px; border-radius:999px; background:var(--teal-900); color:#fff; text-decoration:none; transition:background .2s ease; }
.auto-cta:hover { background:#0a5f58; }
.auto-cta:focus-visible { outline:3px solid var(--teal-500); outline-offset:2px; }
.auto-pill[data-estado="fim"] .auto-cta { display:inline-flex; margin-left:2px; }
.auto-pill[data-estado="fim"] .auto-vel { display:none; }
.auto-pill[data-estado="fim"] .auto-play { background:var(--g900) !important; }
/* celular: só um botão redondo no canto, para não cobrir a leitura; a velocidade aparece quando pausado; no fim volta o texto */
@media (max-width: 860px) {
  .auto-pill { left:auto; right:14px; }
  .auto-pill:not([data-estado="fim"]) .auto-txt { display:none; }
  .auto-pill:not([data-estado="fim"]) .auto-play { padding:0; width:48px; min-height:48px; justify-content:center; }
  .auto-pill[data-estado="rodando"] .auto-vel { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .fundo-vivo, .mancha, .aparelho, .cd-in, .entra { animation:none; opacity:1; }
  .trilho { height:auto; } .palco-p { position:relative; top:auto; height:auto; min-height:calc(100vh - var(--topo)); }
  .cd { opacity:1 !important; }
}