/* Site público da Terads. Tokens em assets/tokens.css (cópia do sistema: mudou lá, copiar de novo).
   Regras do DESIGN.md do sistema (seção 13BL): uma família só, pesos 400 e 500, verde-claro como único acento,
   espaços e raios por token, seções alternando verde-escuro e papel-bege. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:300 600;font-stretch:75% 100%;font-display:swap;src:url(assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:300 600;font-stretch:75% 100%;font-display:swap;src:url(assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* um degrau acima do H1 na mesma escala (46 × 1,25): só o título de abertura do site usa (13BL) */
  --d1:58px;
  --caixa:1160px; --barra-h:72px;
}
@media (max-width:860px){:root{--d1:40px;--h1:33px;--h2:28px;--h3:23px;--h4:19px;--tx:16px;--sm:13px;--num:28px;--barra-h:64px}}

*{box-sizing:border-box}
html{background:var(--verde-escuro-100);scroll-behavior:smooth;scroll-padding-top:calc(var(--barra-h) + var(--e16));-webkit-text-size-adjust:100%}
/* o fundo do html é o mesmo verde-escuro da trilha da barra de rolagem: em telas com escala fracionada (125%, 150%) sobrava 1px da tela à direita, que aparecia como linha clara ao lado da barra */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
body{margin:0;background:var(--fundo);color:var(--texto);font:400 var(--tx)/var(--lh-texto) var(--corpo);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
::selection{background:var(--verde-claro);color:var(--verde-escuro)}
:focus-visible{outline:1px solid var(--foco);outline-offset:2px}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* seções escuras: os mesmos papéis do tema escuro do sistema (fundos em verde-escuro sólido, DESIGN.md 15A) */
.escuro{
  --fundo:var(--verde-escuro-100); --superficie:var(--verde-escuro-medio);
  --bloco:var(--verde-escuro-95); --bloco-forte:var(--verde-escuro-90); --contorno:var(--verde-escuro-85); --card-borda:var(--verde-escuro-80);
  --titulo:var(--verde-escuro-0); --texto:var(--verde-escuro-5); --apoio:var(--verde-escuro-20); --suave:var(--verde-escuro-30);
  --foco:var(--verde-claro);
  background:var(--fundo);color:var(--texto)
}
.claro{background:var(--fundo)}
/* parede com sombra de folhagem (site anterior), bem apagada sobre o papel-bege */
#problema .duas{align-items:center}
.bege{background:var(--bege);--apoio:var(--verde-escuro-80);--contorno:var(--verde-escuro-a14)}

.pular{position:absolute;left:var(--e16);top:-60px;z-index:30;background:var(--botao);color:var(--verde-escuro);padding:var(--e8) var(--e16);border-radius:var(--r-pilula);text-decoration:none;font-weight:500}
.pular:focus{top:var(--e12)}

.caixa{width:100%;max-width:var(--caixa);margin:0 auto;padding:0 var(--e40)}
@media (max-width:860px){.caixa{padding:0 var(--e32)}}@media (max-width:480px){.caixa{padding:0 var(--e24)}}
.sec{padding:var(--e96) 0}
@media (max-width:860px){.sec{padding:var(--e72) 0}}

/* títulos: Bricolage 400, segunda linha no tom de apoio (no lugar do itálico serifado do site antigo) */
.d1,.d2{font-family:var(--display);font-weight:400;color:var(--titulo);text-wrap:balance;letter-spacing:-.01em}
.d1{font-size:var(--d1);line-height:var(--lh-display)}
.d2{font-size:var(--h1);line-height:1.12;max-width:20ch;margin-bottom:var(--e40)}
.d1 span,.d2 span{display:block}
.tom mark{background:none;color:inherit}
/* destaque dos títulos: no escuro, o texto é bege; no claro e no bege, marca-texto verde-claro atrás do verde-escuro (pedido do usuário) */
.escuro .tom,.rodape .tom{color:var(--bege)}
.claro .tom mark{color:var(--titulo);background:linear-gradient(transparent 58%,var(--verde-claro) 58%,var(--verde-claro) 94%,transparent 94%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em}
.bege .tom mark{color:var(--titulo);background:linear-gradient(transparent 58%,var(--verde-claro) 58%,var(--verde-claro) 94%,transparent 94%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em}
h3{font:500 var(--h4)/var(--lh-h4) var(--display);color:var(--titulo)}
.texto{color:var(--apoio);max-width:var(--medida)}
.texto+.texto{margin-top:var(--e16)}
.lead{font-size:var(--h4);line-height:var(--lh-texto);color:var(--apoio);max-width:48ch;margin:var(--e24) auto 0}

/* botões: os mesmos do sistema (pílula de 44px, verde-claro; secundário com contorno) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e8);height:44px;padding:0 var(--e24);border-radius:var(--r-pilula);background:var(--botao);color:var(--verde-escuro);font:500 var(--tx)/var(--lh-ui) var(--corpo);text-decoration:none;white-space:nowrap;border:0;cursor:pointer;transition:background-color var(--t-rapido) var(--ease),transform var(--t-rapido) var(--ease)}
.btn:hover{background:var(--botao-h)}
.btn .i{width:17px;height:17px} /* ícone do botão proporcional ao texto: o do WhatsApp é cheio e, maior que isso, pesava mais que as letras */
.btn:active{transform:scale(.98)}
.btn.sec{background:none;border:1px solid var(--card-borda);color:var(--titulo)}
.btn.sec:hover{background:var(--bloco)}
.escuro-btn{background:var(--verde-escuro);color:var(--verde-escuro-0)}
.escuro-btn:hover{background:var(--verde-escuro-90)}
.escuro-btn:focus-visible{outline-color:var(--verde-escuro)}

/* barra superior: o vidro do sistema (--vidro-tinta + --vidro-filtro), reta, sem cantos arredondados (DESIGN.md 6) */
.barra{position:fixed;top:0;left:0;right:0;z-index:20;height:var(--barra-h);background:color-mix(in srgb,var(--verde-escuro) 72%,transparent);-webkit-backdrop-filter:var(--blur-vidro) grayscale(1) sepia(1) hue-rotate(150deg) saturate(.6) brightness(.55);backdrop-filter:var(--blur-vidro) grayscale(1) sepia(1) hue-rotate(150deg) saturate(.6) brightness(.55);border-bottom:1px solid var(--verde-escuro-85);color:var(--verde-escuro-5);--foco:var(--verde-claro)} /* igual à barra de ferramentas do sistema no computador (.toolbar, tema escuro): fundo a 72% com desfoque, linha fina embaixo, sem degradê nem sombra */
.barra-in{max-width:var(--caixa);height:100%;margin:0 auto;padding:0 var(--e24);display:flex;align-items:center;gap:var(--e24)}
.logo{display:flex;align-items:center;flex:none}
.logo img{width:116px;height:auto}
.menu{display:flex;gap:var(--e4);margin-left:auto}
.menu a{white-space:nowrap;text-decoration:none;font-size:var(--tx);font-weight:400;padding:var(--e8) var(--e12);border-radius:var(--r-md);color:var(--verde-escuro-20); /* igual ao texto das respostas: tamanho de texto, peso regular e tom de apoio do escuro */transition:background-color var(--t-rapido) var(--ease)}
.menu a:hover,.menu a[aria-current="true"]{background:var(--bege-a8);color:var(--verde-escuro-0)}
.menu-cta{display:none}
.menu-btn{display:none;width:44px;height:44px;margin-left:auto;background:none;border:0;border-radius:var(--r-sm);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-btn span{display:block;width:20px;height:1.5px;background:var(--verde-escuro-5);border-radius:var(--r-pilula);transition:transform var(--t-medio) var(--ease),opacity var(--t-rapido) var(--ease)}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (max-width:1120px){
  .barra-in{padding:0 var(--e16);gap:var(--e12)}
  .barra-cta{display:none}
  .menu-btn{display:flex}
  /* barra do celular igual à do computador (fundo verde-escuro a 72% com desfoque, linha fina embaixo); gaveta no mesmo
     verde-escuro, sólida (um desfoque dentro da barra não enxergaria a página), com os itens no estilo dos do computador */
  .menu{position:fixed;right:0;left:auto;top:var(--barra-h);height:calc(100dvh - var(--barra-h));width:min(320px,84vw);flex-direction:column;gap:0;margin:0;padding:var(--e16) var(--e16) var(--e24);background:var(--verde-escuro-100);border-left:1px solid var(--verde-escuro-85);overflow-y:auto;overscroll-behavior:contain;isolation:isolate;transform:translateX(100%);visibility:hidden;transition:transform .6s var(--ease),visibility 0s .6s}
  .menu.aberto{transform:none;visibility:visible;transition:transform .6s var(--ease)}
  .menu a{padding:var(--e12);border-radius:var(--r-md);min-height:44px;display:flex;align-items:center}
  .menu .menu-cta{display:flex;justify-content:center;margin-top:auto;border-radius:var(--r-pilula);color:var(--verde-escuro);background:var(--botao)}
  .menu .menu-cta:hover{background:var(--botao-h);color:var(--verde-escuro)}
  .cortina{position:fixed;inset:var(--barra-h) 0 0 0;z-index:19;background:var(--verde-escuro-a30);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s .6s}
  .menu-aberto .cortina{opacity:1;visibility:visible;transition:opacity .6s var(--ease)}
  .menu-aberto{overflow:hidden;scrollbar-gutter:stable} /* trava a rolagem sem tirar a barra de rolagem do lugar: nada na barra se mexe ao abrir */

}

/* abertura: verde-escuro com a folhagem da marca em luz suave e a sombra de baixo para cima do login */
.abertura{position:relative;overflow:hidden;padding:calc(var(--barra-h) + var(--e96)) 0 var(--e96);min-height:92svh;display:flex;align-items:center;isolation:isolate}
.abertura::before{content:"";position:absolute;inset:0;background:url(assets/folhagem.webp) center/cover no-repeat;opacity:var(--folhagem-login-opacidade);mix-blend-mode:soft-light;z-index:-2}
.abertura::after{content:"";position:absolute;inset:0;background:var(--sombra-fundo);z-index:-1}
.abertura-in{text-align:center;position:relative}
/* luz da abertura: o brilho bege do cartão do login (DESIGN.md 13D), em escala de cena. Um feixe enorme, girado a 45°,
   que entra pelo alto à esquerda; só a ponta aparece. Vale para a abertura e para todas as seções escuras (exceção registrada em 13BL) */
.sec.escuro:not(.abertura){position:relative;overflow:hidden;isolation:isolate}
/* textura do site anterior (fundo-hero.png, em WebP) atrás da cor sólida de todas as seções escuras, a 20% como lá; a abertura tem a sua e o rodapé fica liso */
.sec.escuro:not(.abertura)::before{content:"";position:absolute;inset:0;background:url(assets/fundos/folhas-escuras.webp) center/cover no-repeat;opacity:.2;z-index:-1;pointer-events:none}
.sec.escuro:not(.abertura)>.caixa{position:relative} /* o conteúdo fica acima da luz */
.luz{position:absolute;left:-54vw;top:-50vh;width:100vw;height:140vh;transform:rotate(-45deg);background:radial-gradient(closest-side,var(--bege-a16),var(--bege-a6) 45%,transparent);pointer-events:none;z-index:0}
.sec.escuro:not(.abertura) .luz{left:-50vw;top:-70vh} /* nas seções escuras o centro da luz fica no canto superior esquerdo; força igual à da abertura (16%) */
.leque{position:absolute;left:50%;bottom:0;width:100%;max-width:1950px;transform:translateX(-50%);opacity:.5;pointer-events:none;z-index:0} /* leque claro do site anterior (elemento.png), como lá: largura total, apoiado na base da abertura, acima da sombra e abaixo do texto */
.abertura .d1{max-width:none;margin:0 auto}
.so-cel{display:none}
/* no celular o título quebra em "Quem precisa / de você precisa / te encontrar." (pedido do usuário): as duas partes viram linha corrida e as quebras são fixas */
@media (max-width:600px){.so-cel{display:inline}.abertura .d1>span:not(.sobretitulo){display:inline}}
.acoes{display:flex;flex-wrap:wrap;gap:var(--e12);justify-content:center;margin-top:var(--e40)}
.sobretitulo{display:block;margin-bottom:var(--e20);font:500 var(--sm)/var(--lh-ui) var(--corpo);letter-spacing:.12em;text-transform:uppercase;color:var(--bege)} /* rótulo da palavra-chave dentro do título principal (SEO), no padrão dos rótulos de seção do Início do sistema, em bege; exceção registrada no DESIGN.md 13BL */
@media (max-width:600px){.sobretitulo{font-size:11px;letter-spacing:.1em;margin-bottom:var(--e16)}} /* no celular o rótulo fica menor que o texto de apoio */
.selos{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e12) var(--e32);margin-top:var(--e56);color:var(--apoio);font-size:var(--sm)}
.selos li{display:flex;align-items:center;gap:var(--e8)}
.selos .i{width:18px;height:18px;color:var(--verde-claro)}
@media (max-width:860px){.abertura{min-height:0;padding:calc(var(--barra-h) + var(--e72)) 0 var(--e72)}.selos{flex-direction:column;align-items:center}}

/* onde a procura acontece: ícones flutuando à esquerda, título menor à direita e as pesquisas passando em loop embaixo */
.faixa{background:var(--verde-escuro);border-top:1px solid var(--verde-escuro-85)}
.procura{padding:var(--e56) 0;overflow:hidden}
.procura-topo{display:flex;align-items:center;justify-content:center;gap:var(--e48);margin-bottom:var(--e56)}
.astros{display:flex;gap:var(--e12);flex:none}
.astro{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:1px solid var(--verde-escuro-80);background:var(--verde-escuro-95);color:var(--verde-claro);animation:flutua 5s ease-in-out infinite}
.astro:nth-child(2){animation-delay:-1s}.astro:nth-child(3){animation-delay:-2s}.astro:nth-child(4){animation-delay:-3s}.astro:nth-child(5){animation-delay:-4s}
.astro .i{width:26px;height:26px}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.procura-titulo{font:400 var(--h2)/var(--lh-h2) var(--display);color:var(--titulo);text-align:left;max-width:30ch;text-wrap:balance}
.procura-titulo .tom{display:inline}
@media (max-width:860px){.procura-topo{flex-direction:column;align-items:flex-start;gap:var(--e24)}.procura-titulo{text-align:left}.astros{flex-wrap:wrap}}
/* esteira infinita: duas cópias da lista lado a lado, a faixa anda metade do caminho e recomeça sem emenda; pausa sob o ponteiro */
.trilho{position:relative;overflow:hidden} /* a esteira ocupa a tela inteira em qualquer largura: os cartões entram e saem pelas bordas da tela, sem corte nem sombra (pedido do usuário) */
/* pontas: os cartões claros entram e saem pela borda da tela, sem esmaecer (o degradê sobre o branco virava uma faixa cinza) */
.esteira{display:flex;width:max-content;animation:esteira 40s linear infinite}
.trilho:hover .esteira{animation-play-state:paused}
@keyframes esteira{to{transform:translateX(-50%)}}
.materias{display:flex;gap:var(--e16);padding-right:var(--e16)}
.materia{width:420px;flex:none;display:flex;flex-direction:column;background:var(--verde-escuro-0);border:1px solid var(--verde-escuro-0);border-radius:var(--r-md);padding:var(--e32)}
.materia-ic{width:22px;height:22px;flex:none;margin-top:1px;color:var(--verde-escuro)} /* versão clara do cartão sobre o verde-escuro */
/* cartão no formato de notícia: manchete em negrito (exceção registrada em 13BL: imita matéria de jornal), linha fina e a fonte no lugar do autor */
.materia-foto{margin:calc(-1 * var(--e32)) calc(-1 * var(--e32)) var(--e24);aspect-ratio:16/9;background:var(--papel-bege-40);border-radius:var(--r-md) var(--r-md) 0 0;overflow:hidden} /* foto 16:9 no topo, de ponta a ponta; sem imagem, fica o bloco neutro */
.materia-foto img{width:100%;height:100%;object-fit:cover}
.manchete{font:600 var(--h4)/1.25 var(--display);color:var(--verde-escuro);letter-spacing:-.01em;text-wrap:balance}
.linha-fina{margin-top:var(--e8);font-size:var(--sm);line-height:var(--lh-texto);color:var(--verde-escuro-70)}
.por{margin-top:auto;padding-top:var(--e12);font-size:var(--sm);font-weight:400;color:var(--verde-escuro-70)}
/* celular: ícones, título e cartões menores, com menos margem interna */
@media (max-width:560px){
  .procura{padding:var(--e40) 0}
  .procura-topo{gap:var(--e20);margin-bottom:var(--e32)}
  .astros{gap:var(--e8)}
  .astro{width:44px;height:44px}
  .astro .i{width:20px;height:20px}
  .procura-titulo{font-size:var(--h4)}
  .materia{width:280px;padding:var(--e20)}
  .materia-foto{margin:calc(-1 * var(--e20)) calc(-1 * var(--e20)) var(--e16)}
  .manchete{font-size:var(--tx)}
  .linha-fina{margin-top:var(--e4)}
}
@media (prefers-reduced-motion:reduce){.astro,.esteira{animation:none}.trilho{overflow-x:auto}.materias[aria-hidden]{display:none}}

/* cena do problema: uma busca em que "seu perfil" afunda e outro perfil sobe para o primeiro lugar (ciclo de 9 s) */
.cena-col{display:flex;justify-content:flex-end}
@media (max-width:860px){.cena-col{justify-content:flex-start}}
.cena{width:100%;max-width:460px;background:var(--verde-escuro-0);border-radius:var(--r-cartao);padding:var(--e20);border:1px solid var(--card-borda)}
.cena-busca{display:flex;align-items:center;gap:var(--e8);height:40px;padding:0 var(--e16);border:1px solid var(--verde-escuro-a14);border-radius:var(--r-pilula);color:var(--verde-escuro-60);font-size:var(--sm)}
.cena-busca .i{width:16px;height:16px;flex:none}
.cena-digita{display:inline-block;overflow:hidden;white-space:nowrap;border-right:1.5px solid var(--verde-escuro-60);max-width:0;animation:digita 9s steps(22) infinite}
.cena-lista{position:relative;height:208px;margin-top:var(--e16)}
.r{position:absolute;left:0;right:0;height:44px;display:flex;align-items:center;gap:var(--e12);padding:0 var(--e12);border-radius:var(--r-md);opacity:0;animation:9s var(--ease) infinite}
.r i{width:28px;height:28px;border-radius:50%;background:var(--verde-escuro-a10);flex:none}
.r span{display:grid;gap:6px;flex:1}
.r b{display:block;height:7px;border-radius:var(--r-pilula);background:var(--verde-escuro-a12)}
.r b+b{width:60%;background:var(--verde-escuro-a8)}
.r em{font-style:normal;font-size:11px;font-weight:500;border-radius:var(--r-pilula);padding:2px var(--e8);white-space:nowrap}
.voce em{background:var(--bege);color:var(--verde-escuro)}
.sobe em{background:var(--verde-claro);color:var(--verde-escuro);opacity:0;animation:selo 9s var(--ease) infinite}
.r1{animation-name:r1}.r2{animation-name:r2}.r3{animation-name:r3}.r4{animation-name:r4}
@keyframes digita{0%,4%{max-width:0}26%,100%{max-width:22ch}} /* max-width: a caixa encolhe até o texto e o cursor para na última letra */
/* posições: 0, 52, 104, 156px. Os resultados entram depois da digitação; aos 45%, "seu perfil" desce e apaga e o último sobe ao topo */
@keyframes r1{0%,28%{opacity:0;transform:translateY(0)}34%,45%{opacity:1;transform:translateY(0)}58%,92%{opacity:1;transform:translateY(52px)}100%{opacity:0;transform:translateY(52px)}}
@keyframes r2{0%,30%{opacity:0;transform:translateY(52px)}36%,45%{opacity:1;transform:translateY(52px)}58%,92%{opacity:.35;transform:translateY(156px)}100%{opacity:0;transform:translateY(156px)}}
@keyframes r3{0%,32%{opacity:0;transform:translateY(104px)}38%,92%{opacity:1;transform:translateY(104px)}100%{opacity:0;transform:translateY(104px)}}
@keyframes r4{0%,34%{opacity:0;transform:translateY(156px)}40%,45%{opacity:1;transform:translateY(156px);background:transparent}58%,92%{opacity:1;transform:translateY(0);background:var(--verde-claro-a16)}100%{opacity:0;transform:translateY(0)}}
@keyframes selo{0%,52%{opacity:0}60%,92%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cena-digita{animation:none;max-width:none;border:0}.r,.sobe em{animation:none;opacity:1}.r1{transform:translateY(52px)}.r2{transform:translateY(156px);opacity:.35}.r3{transform:translateY(104px)}.r4{transform:translateY(0);background:var(--verde-claro-a16)}}

/* faixa de marca-texto se desenhando da esquerda para a direita quando o título entra na tela (site.js marca .pintar) */
@media (prefers-reduced-motion:no-preference){
  .js .claro .tom mark,.js .bege .tom mark{background-repeat:no-repeat;background-size:0% 100%;transition:background-size 1.1s cubic-bezier(.65,0,.35,1) .25s}
  .js .claro .pintar .tom mark,.js .bege .pintar .tom mark{background-size:100% 100%}
}

/* objeções: título centralizado e as quatro em duas colunas embaixo */
#objecoes .d2{margin:0 auto var(--e48);text-align:center;max-width:none}
#objecoes .barreiras{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--e56);max-width:960px;margin:0 auto}
#objecoes .barreiras li,#objecoes .barreiras li:first-child{padding:var(--e32) 0}
#objecoes .barreiras li:nth-last-child(-n+2){border-bottom:0}
@media (max-width:760px){#objecoes .barreiras{grid-template-columns:1fr}#objecoes .barreiras li:nth-last-child(2){border-bottom:1px solid var(--contorno)}}

/* objeções: ao entrar na tela, a objeção é riscada, a resposta aparece e o número vira um check (site.js marca .resolvido) */
#objecoes .barreiras h3{transition:color .4s var(--ease) .7s}
/* risco linha a linha: o fundo do trecho em linha corre por todas as linhas em sequência, então objeções que quebram em duas linhas são riscadas certo */
#objecoes .risco{background:linear-gradient(var(--verde-claro),var(--verde-claro)) 0 55%/0 1.5px no-repeat;transition:background-size .6s cubic-bezier(.65,0,.35,1) .15s}
#objecoes .n{position:relative;width:24px;height:24px;transition:color .3s var(--ease) .9s}
#objecoes .n::after{content:"";position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--verde-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317282E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat;transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1) .95s}
#objecoes .resolvido h3{color:var(--apoio)}
#objecoes .resolvido .risco{background-size:100% 1.5px}
#objecoes .resolvido .n{color:transparent}
#objecoes .resolvido .n::after{transform:scale(1)}
@media (prefers-reduced-motion:reduce){#objecoes .barreiras *,#objecoes .barreiras *::after{transition:none!important}}

/* a Terads em três movimentos: ícones da jornada ligados por uma linha que se desenha quando a seção entra na tela */
/* a Terads: título à esquerda, os três movimentos numerados à direita, ligados por uma linha vertical */
.abordagem-in{display:grid;grid-template-columns:1fr 1fr;gap:var(--e72);align-items:center}
@media (max-width:960px){.abordagem-in{grid-template-columns:1fr;gap:var(--e40)}}
#caminhos .topo-sec{grid-template-columns:1fr;gap:var(--e16);margin-bottom:0}
#caminhos .texto+.texto{margin-top:0}
#caminhos .d2,#comparacao .d2{max-width:none}
.movimentos{position:relative;display:grid;gap:var(--e48)}
.mov:not(:last-child)::after{content:"";position:absolute;left:28px;top:56px;bottom:calc(-1 * var(--e48));width:1px;background:var(--verde-escuro-a25);transform-origin:top;transform:scaleY(var(--linha,1));transition:transform .5s cubic-bezier(.65,0,.35,1)} /* linha de um ícone ao seguinte */
.mov:nth-child(1)::after{transition-delay:.3s}.mov:nth-child(2)::after{transition-delay:.75s}
.mov{position:relative;display:grid;grid-template-columns:56px 1fr;column-gap:var(--e24);align-items:start}
.mov-ic{position:relative;z-index:1;grid-row:1 / span 4;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--verde-escuro);color:var(--verde-claro)}
.mov-ic .i{width:24px;height:24px}
.mov .n{display:block;margin:2px 0 var(--e16)} /* ritmo do Guia (princípios): número a 16px do título, título e texto a 12px, etiqueta a 16px */
.mov p{color:var(--apoio);margin-top:var(--e12);max-width:52ch}
.prazo{justify-self:start;margin-top:var(--e16);font-size:var(--sm);font-weight:500;border-radius:var(--r-pilula);padding:var(--e4) var(--e12);background:var(--bloco-forte);color:var(--titulo)} /* etiqueta de prazo de cada caminho, no desenho da etiqueta Antes do portfólio */
@media (prefers-reduced-motion:no-preference){.js .movimentos{--linha:0}.js .movimentos.pintar{--linha:1}.js .mov{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}.js .movimentos.pintar .mov{opacity:1;transform:none}.js .movimentos.pintar .mov:nth-child(2){transition-delay:.45s}.js .movimentos.pintar .mov:nth-child(3){transition-delay:.9s}}

/* sistema próprio: texto à esquerda, duas telas do sistema em moldura de navegador à direita; ao entrar na tela, endireitam e se afastam */
.sistema-in{display:grid;grid-template-columns:5fr 7fr;gap:var(--e56);align-items:center}
@media (max-width:960px){.sistema-in{grid-template-columns:1fr}}
.sistema-lista{display:grid;gap:var(--e12);margin-top:var(--e24)}
.sistema-lista li{display:grid;grid-template-columns:18px 1fr;gap:var(--e12);color:var(--texto)}
.sistema-lista li::before{content:"";width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--verde-escuro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B4D8AD' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}
.sistema-nota{margin-top:var(--e20);font-size:var(--sm);color:var(--apoio)}
.telas{position:relative;aspect-ratio:16/11;perspective:1600px;border-radius:var(--r-cartao);background:var(--brilho-bege),var(--vidro-tinta-leve),var(--verde-escuro);border:1px solid var(--vidro-borda);overflow:hidden} /* palco de vidro do login, como a vitrine e os depoimentos */
.tela{position:absolute;margin:0;width:80%;border-radius:var(--r-md);overflow:hidden;background:var(--verde-escuro);border:1px solid var(--vidro-borda);box-shadow:0 24px 48px -28px var(--verde-escuro-a70);transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .8s var(--ease)}
.tela-barra{display:flex;gap:6px;align-items:center;height:22px;padding:0 var(--e12);background:var(--verde-escuro-95);border-bottom:1px solid var(--verde-escuro-85)}
.tela-barra i{width:7px;height:7px;border-radius:50%;background:var(--verde-escuro-70)}
.tela img{display:block;width:100%;height:auto}
.tela-tras{right:6%;top:8%;opacity:.75}
.tela-frente{left:6%;bottom:8%}
@media (prefers-reduced-motion:no-preference){
  .js .telas:not(.pintar) .tela-frente{transform:rotateY(-14deg) rotateX(6deg) translateY(24px)}
  .js .telas:not(.pintar) .tela-tras{transform:rotateY(-14deg) rotateX(6deg) translate(-40px,24px);opacity:0}
}

/* comparação com as alternativas (abordagem): tabela leve, linha fina entre as linhas, como no sistema */
.compara{margin-top:0}
.compara h3{margin-bottom:var(--e20)}
.compara-tab{border:1px solid var(--card-borda);border-radius:var(--r-cartao);overflow:hidden}
.cl{display:grid;grid-template-columns:1fr 1.3fr 1.6fr;gap:var(--e24);padding:var(--e16) var(--e24);border-top:1px solid var(--contorno);color:var(--apoio)}
.cl span:first-child{color:var(--titulo);font-weight:500}
.cl.cab{border-top:0;font-size:var(--sm);color:var(--suave)}
.cl.cab span:first-child{color:var(--suave);font-weight:400}
.cl.nos{background:var(--bloco)}
.cl.nos span{color:var(--titulo)}
.cl.nos span:first-child{color:var(--verde-claro)}
.claro .cl.nos span:first-child{color:var(--titulo)} /* verde-claro não tem contraste no fundo claro */
@media (max-width:760px){.cl{grid-template-columns:1fr;gap:var(--e4)}.cl.cab{display:none}}

/* chamada no meio da página */
.meio-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--e16) var(--e24);margin-top:var(--e48);text-align:center}
.meio-cta p{font:400 var(--h4)/var(--lh-h4) var(--display);color:var(--titulo)}

/* para quem é */
.perfil-fit{display:grid;grid-template-columns:1fr 1fr;gap:var(--e20);margin-top:var(--e40)}
.perfil-fit.so-nao{grid-template-columns:1fr;margin-top:var(--e20)}
.so-nao .fit{background:none}
.so-nao ul{grid-template-columns:repeat(3,1fr);gap:var(--e20)}
@media (max-width:860px){.so-nao ul{grid-template-columns:1fr}}
@media (max-width:760px){.perfil-fit{grid-template-columns:1fr}}
.fit{border:1px solid var(--card-borda);border-radius:var(--r-cartao);padding:var(--e32);background:var(--superficie)}
.fit h3{margin-bottom:var(--e16)}
.fit ul{display:grid;gap:var(--e12)}
.fit li{display:grid;grid-template-columns:18px 1fr;gap:var(--e12);color:var(--texto)}
.fit li::before{content:"";width:18px;height:18px;margin-top:3px;border-radius:50%}
.fit.sim li::before{background:var(--botao) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317282E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}
.fit.nao li::before{background:var(--bloco-forte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23515D62' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/10px no-repeat}

/* duas colunas */
.duas{display:grid;grid-template-columns:1fr 1fr;gap:var(--e56);align-items:start}
.duas.fim{align-items:end}
.duas .d2{margin-bottom:var(--e24)}
@media (max-width:860px){.duas{grid-template-columns:1fr;gap:var(--e32)}}

/* o problema: lista numerada com linha fina entre os itens, como as tabelas do sistema */
.barreiras li{display:grid;grid-template-columns:48px 1fr;gap:var(--e16);padding:var(--e24) 0;border-bottom:1px solid var(--contorno)}
.barreiras li:first-child{padding-top:0}
.barreiras li:last-child{border-bottom:0}
.barreiras p{color:var(--apoio);margin-top:var(--e12)}
.n{font:400 var(--sm)/var(--lh-ui) var(--corpo);color:var(--apoio);font-variant-numeric:tabular-nums;padding-top:3px}

/* cartões e grades */
.grade3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e20)}
.grade2{display:grid;grid-template-columns:1fr 1fr;gap:var(--e20)}
@media (max-width:960px){.grade3{grid-template-columns:1fr}}
@media (max-width:760px){.grade2{grid-template-columns:1fr}}
.cartao{background:var(--bloco);border:1px solid var(--card-borda);border-radius:var(--r-cartao);padding:var(--e32)}
.cartao .n{display:block;margin-bottom:var(--e16)}
.cartao p{color:var(--apoio);margin-top:var(--e12)}

.topo-sec{display:grid;grid-template-columns:1fr 1fr;gap:var(--e40);align-items:end;margin-bottom:var(--e40)}
.topo-sec .d2{margin-bottom:0}
.topo-sec.centro{grid-template-columns:1fr;justify-items:center;text-align:center;gap:var(--e24)}
.topo-sec.centro .d2{margin:0 auto}
@media (max-width:860px){.topo-sec{grid-template-columns:1fr;gap:var(--e20)}}

/* entregas: vitrine com as quatro frentes à esquerda e, à direita, uma cena que mostra cada uma.
   Avança sozinha a cada 6s (a barra fina mostra o tempo); para quando a pessoa escolhe uma frente ou a seção sai da tela */
.mostra{display:grid;grid-template-columns:5fr 7fr;gap:var(--e56);align-items:center}
.mostra-lista{display:grid;border-bottom:1px solid var(--contorno)}
.frente{position:relative;display:grid;grid-template-columns:48px 1fr;align-items:baseline;width:100%;padding:var(--e24) 0;border:0;border-top:1px solid var(--contorno);background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.frente-t{font-size:var(--h3);line-height:1.2;color:var(--suave);transition:color var(--t-medio) var(--ease)}
.frente:hover .frente-t,.frente[aria-selected="true"] .frente-t{color:var(--titulo)}
.frente-d{grid-column:2;display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-medio) var(--ease)}
.frente-d>span{overflow:hidden;color:var(--apoio);max-width:44ch}
.frente[aria-selected="true"] .frente-d{grid-template-rows:1fr}
.frente[aria-selected="true"] .frente-d>span{padding-top:var(--e12)}
.frente-barra{position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--verde-escuro);transform-origin:left;transform:scaleX(0)}
.frente[aria-selected="true"] .frente-barra{transform:scaleX(1)}
.mostra.rodando .frente[aria-selected="true"] .frente-barra{animation:barra-frente 6s linear forwards}
@keyframes barra-frente{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.frente:focus-visible{outline:2px solid var(--foco);outline-offset:4px;border-radius:var(--r-sm)}

.palco{position:relative;aspect-ratio:7/6;border-radius:var(--r-cartao);background:var(--brilho-bege),var(--vidro-tinta-leve),var(--verde-escuro);border:1px solid var(--vidro-borda);overflow:hidden} /* vidro do cartão de login, sobre o verde-escuro sólido (seção clara), como os depoimentos */
.quadro{position:absolute;inset:0;display:grid;place-items:center}
.quadro[hidden]{display:none}
.quadro img{display:block;width:100%;object-fit:cover}

.vis-feed{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:62%;transform:rotate(-5deg)}
.vis-feed img{aspect-ratio:4/5;border-radius:var(--r-sm)}
.selo-flutua{position:absolute;display:inline-flex;align-items:center;gap:var(--e8);padding:var(--e8) var(--e16);border-radius:var(--r-pilula);background:var(--superficie);color:var(--verde-escuro);font-size:var(--sm);box-shadow:0 12px 32px -16px var(--verde-escuro-a70)}
.selo-flutua .i{width:16px;height:16px}
.sf-1{left:7%;top:12%}.sf-2{right:7%;bottom:12%}

.vis-anuncio{position:relative;width:100%;height:100%}
.quadro .cri{position:absolute;top:12%;width:36%;aspect-ratio:4/5;border-radius:var(--r-md);box-shadow:0 24px 48px -24px var(--verde-escuro-a70)}
.cri-a{left:16%;transform:rotate(-7deg)}.quadro .cri-b{right:16%;top:17%;transform:rotate(6deg)}
.canais-anuncio{position:absolute;left:0;right:0;bottom:9%;display:flex;justify-content:center;gap:var(--e8)}
.canais-anuncio li{display:inline-flex;align-items:center;gap:var(--e8);padding:var(--e8) var(--e16);border-radius:var(--r-pilula);background:var(--superficie);color:var(--verde-escuro);font-size:var(--sm)}
.canais-anuncio .i{width:16px;height:16px}

.vis-cartao{width:min(440px,80%);padding:var(--e32);border-radius:var(--r-cartao);background:var(--superficie);color:var(--verde-escuro);box-shadow:0 24px 48px -24px var(--verde-escuro-a70)}
.vis-cab{display:flex;align-items:center;gap:var(--e8);font-weight:500;padding-bottom:var(--e16);border-bottom:1px solid var(--verde-escuro-a10)}
.vis-cab .i{width:18px;height:18px}
.vis-rot{margin-top:var(--e16);font-size:var(--sm);color:var(--verde-escuro-a70)}
.horas{display:grid;grid-template-columns:1fr 1fr;gap:var(--e8);margin-top:var(--e12)}
.horas li{padding:var(--e12);border:1px solid var(--verde-escuro-a14);border-radius:var(--r-md);text-align:center}
.horas .marcado{background:var(--verde-claro);border-color:var(--verde-claro)}
.vis-ok{display:flex;align-items:center;gap:var(--e8);margin-top:var(--e20);padding-top:var(--e20);border-top:1px solid var(--verde-escuro-a10)}
.vis-ok .i{width:18px;height:18px}
.revisa{display:grid;gap:var(--e12);margin-top:var(--e16)}
.revisa li{display:flex;align-items:center;gap:var(--e12)}
.ck{flex:none;width:18px;height:18px;border-radius:50%;background:var(--botao) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317282E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}

/* entrada de cada cena: o conjunto aparece e os detalhes chegam em sequência */
@media (prefers-reduced-motion:no-preference){
  .quadro:not([hidden]){animation:cena-entra .6s var(--ease) both}
  .quadro:not([hidden]) .vis-feed img{animation:cena-item .5s var(--ease) both}
  .quadro:not([hidden]) .vis-feed img:nth-child(2){animation-delay:.06s}.quadro:not([hidden]) .vis-feed img:nth-child(3){animation-delay:.12s}.quadro:not([hidden]) .vis-feed img:nth-child(4){animation-delay:.18s}.quadro:not([hidden]) .vis-feed img:nth-child(5){animation-delay:.24s}.quadro:not([hidden]) .vis-feed img:nth-child(6){animation-delay:.3s}
  .quadro:not([hidden]) .selo-flutua{animation:cena-item .5s var(--ease) .45s both,flutua 5s ease-in-out 1s infinite}
  .quadro:not([hidden]) .sf-2{animation-delay:.6s,1.6s}
  .quadro:not([hidden]) .cri-a{animation:cri-a .8s cubic-bezier(.16,1,.3,1) both}
  .quadro:not([hidden]) .cri-b{animation:cri-b .8s cubic-bezier(.16,1,.3,1) .1s both}
  .quadro:not([hidden]) .canais-anuncio li{animation:cena-item .45s var(--ease) both}
  .quadro:not([hidden]) .canais-anuncio li:nth-child(1){animation-delay:.45s}.quadro:not([hidden]) .canais-anuncio li:nth-child(2){animation-delay:.55s}.quadro:not([hidden]) .canais-anuncio li:nth-child(3){animation-delay:.65s}
  #pn-3:not([hidden]) .horas .marcado{animation:marca-hora .5s var(--ease) .7s both}
  #pn-3:not([hidden]) .vis-ok{animation:cena-item .45s var(--ease) 1.2s both}
  #pn-4:not([hidden]) .revisa li{animation:cena-item .4s var(--ease) both}
  #pn-4:not([hidden]) .revisa li:nth-child(1){animation-delay:.3s}#pn-4:not([hidden]) .revisa li:nth-child(2){animation-delay:.6s}#pn-4:not([hidden]) .revisa li:nth-child(3){animation-delay:.9s}#pn-4:not([hidden]) .revisa li:nth-child(4){animation-delay:1.2s}
  #pn-4:not([hidden]) .vis-ok{animation:cena-item .45s var(--ease) 1.6s both}
}
@keyframes cena-entra{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes cena-item{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes flutua{50%{transform:translateY(-6px)}}
@keyframes cri-a{from{opacity:0;transform:rotate(0) translate(30%,8%)}to{opacity:1;transform:rotate(-7deg)}}
@keyframes cri-b{from{opacity:0;transform:rotate(0) translate(-30%,8%)}to{opacity:1;transform:rotate(6deg)}}
@keyframes marca-hora{from{background:transparent;border-color:var(--verde-escuro-a14)}to{background:var(--verde-claro);border-color:var(--verde-claro)}}

@media (max-width:960px){.mostra{grid-template-columns:1fr;gap:var(--e32)}.palco{order:-1}}
@media (max-width:600px){.palco{aspect-ratio:4/5}.vis-cartao{width:86%;padding:var(--e20);font-size:var(--sm)}.vis-feed{width:76%}.quadro .cri{width:44%}.cri-a{left:6%}.quadro .cri-b{right:6%}.canais-anuncio{bottom:6%}}


/* abas do portfólio: pílulas como os chips do sistema */
.abas{display:flex;flex-wrap:wrap;gap:var(--e8);margin-bottom:var(--e32)}
.aba{height:40px;padding:0 var(--e20);border-radius:var(--r-pilula);border:1px solid var(--card-borda);background:none;color:var(--titulo);font:500 var(--sm)/1 var(--corpo);cursor:pointer;transition:background-color var(--t-rapido) var(--ease)}
.aba:hover{background:var(--bloco)}
.aba[aria-selected="true"]{background:var(--botao);border-color:var(--botao);color:var(--verde-escuro)}
.nota-feed{margin-bottom:var(--e24)}

/* antes e depois do feed: perfil real de uma cliente */
.feeds{display:grid;grid-template-columns:1fr 1fr;gap:var(--e20)}
@media (max-width:860px){.feeds{grid-template-columns:1fr}}
.feed{background:var(--bloco);border:1px solid var(--card-borda);border-radius:var(--r-cartao);padding:var(--e20)}
.feed figcaption{display:flex;align-items:center;gap:var(--e12);font-size:var(--sm);color:var(--apoio);padding-bottom:var(--e16);border-bottom:1px solid var(--contorno)}
.etq{font-weight:500;border-radius:var(--r-pilula);padding:var(--e4) var(--e12);background:var(--bloco-forte);color:var(--titulo)}
.depois .etq{background:var(--botao);color:var(--verde-escuro)}
.perfil{display:flex;align-items:center;gap:var(--e12);padding:var(--e16) 0}
.perfil .foto{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;background:var(--bloco-forte)}
.perfil b{display:block;font-weight:500;color:var(--titulo);font-size:var(--tx);line-height:var(--lh-ui)}
.perfil div span{font-size:var(--sm);color:var(--suave)}
.depois .perfil b{color:var(--verde-claro)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;border-radius:var(--r-sm);overflow:hidden}
.posts img{width:100%;aspect-ratio:4/5;object-fit:cover}

.criativos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e16)}
@media (max-width:860px){.criativos{grid-template-columns:repeat(2,1fr);gap:var(--e12)}}
.criativos li{aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;background:var(--bloco);border:1px solid var(--card-borda)}
.criativos img{width:100%;height:100%;object-fit:cover}

/* depoimentos */
/* depoimentos com o vidro do cartão de login (como os planos); a seção é clara, então o vidro fica sobre o verde-escuro sólido para o texto claro continuar legível */
.depo{background:var(--brilho-bege),var(--vidro-tinta-leve),var(--verde-escuro);border:1px solid var(--vidro-borda);color:var(--verde-escuro-5);border-radius:var(--r-cartao);padding:var(--e32);display:flex;flex-direction:column}
.aspas{width:28px;height:28px;color:var(--verde-claro);margin-bottom:var(--e20)}
.depo blockquote{color:var(--verde-escuro-10);flex:1}
.depo figcaption{display:flex;align-items:center;gap:var(--e12);margin-top:var(--e24);padding-top:var(--e20);border-top:1px solid var(--vidro-borda);font-size:var(--sm);color:var(--verde-escuro-20)}
.depo figcaption img{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--verde-escuro-90)}
.depo figcaption b{display:block;font-weight:500;font-size:var(--tx);color:var(--verde-escuro-0)}

/* como funciona */
.implantacao,.mensal{border:1px solid var(--card-borda);border-radius:var(--r-cartao);background:var(--bloco);padding:var(--e32)}
.mensal{margin-top:var(--e20)}
.impl-topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e16);margin-bottom:var(--e32)}
.seletor{display:inline-flex;flex-wrap:wrap;gap:var(--e4);padding:var(--e4);border-radius:var(--r-pilula);background:var(--bloco-forte)}
.seletor button{white-space:nowrap;height:36px;padding:0 var(--e16);border:0;border-radius:var(--r-pilula);background:none;color:var(--apoio);font:500 var(--sm)/1 var(--corpo);cursor:pointer;transition:background-color var(--t-rapido) var(--ease),color var(--t-rapido) var(--ease)}
.seletor button:hover{color:var(--titulo)}
.seletor button[aria-checked="true"]{background:var(--botao);color:var(--verde-escuro)}
.linha{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e24);position:relative}
.linha::before{content:"";position:absolute;left:6px;right:6px;top:6px;height:1px;background:var(--card-borda)}
.linha li{position:relative;padding-top:var(--e32)}
.linha li::before{content:"";position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;background:var(--botao);box-shadow:0 0 0 4px var(--bloco)}
.quando{display:block;font-size:var(--sm);color:var(--suave);margin-bottom:var(--e16);font-variant-numeric:tabular-nums}
.linha h4{font:500 var(--h4)/var(--lh-h4) var(--display);color:var(--titulo)}
.linha p,.ciclo p{color:var(--apoio);margin-top:var(--e12)}
.mensal h3{margin-bottom:var(--e24)}
.ciclo{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e20)}
.ciclo li{border-top:1px solid var(--card-borda);padding-top:var(--e16)}
.ciclo .quando{color:var(--titulo);font-size:var(--tx);font-weight:500;margin:0}
@media (max-width:960px){
  .linha{grid-template-columns:1fr;gap:var(--e24)}
  .linha::before{left:6px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .linha li{padding:0 0 0 var(--e32)}
  .ciclo{grid-template-columns:1fr 1fr}
  .implantacao,.mensal{padding:var(--e24)}
}
@media (max-width:520px){.ciclo{grid-template-columns:1fr}.seletor{width:100%}.seletor button{flex:1;padding:0 var(--e8)}.seletor .dias{display:none}}

/* planos */
.cobranca{margin-top:var(--e8)}
.nota-cobranca{font-size:var(--sm);color:var(--apoio)}

/* dúvidas: acordeão com linha fina entre as perguntas */
.estreita{max-width:820px}
.faq{border-top:1px solid var(--contorno)}
.faq details{border-bottom:1px solid var(--contorno)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--e16);padding:var(--e20) 0;font:500 var(--h4)/var(--lh-h4) var(--display);color:var(--titulo);min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:20px;height:20px;background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat;color:var(--apoio);transition:transform var(--t-medio) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline-offset:4px;border-radius:var(--r-xs)}
.faq p{color:var(--apoio);padding:0 0 var(--e24);max-width:var(--medida)}

/* próximo passo */
#contato .d2{margin-bottom:0}
.bege .btn{margin-top:var(--e24)}

/* rodapé */
.rodape{padding:var(--e72) 0 var(--e32);border-top:1px solid var(--verde-escuro-90)}
.rodape-in{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:var(--e40)}
@media (max-width:860px){.rodape-in{grid-template-columns:1fr;gap:var(--e32)}}
.rod-marca img{width:116px}
.rod-marca p{color:var(--apoio);margin-top:var(--e16);max-width:38ch}
.redes{display:flex;gap:var(--e8);margin-top:var(--e20)}
.redes a{width:44px;height:44px;border-radius:50%;border:1px solid var(--card-borda);display:grid;place-items:center;color:var(--texto);transition:background-color var(--t-rapido) var(--ease)}
.redes a:hover{background:var(--bloco)}
.rodape-t{font:500 var(--sm)/var(--lh-ui) var(--corpo);color:var(--suave);margin-bottom:var(--e12)}
.rodape nav a,.rodape-in>div:last-child a{display:flex;align-items:center;min-height:44px;text-decoration:none;color:var(--texto);overflow-wrap:anywhere}
.rodape nav a:hover,.rodape-in>div:last-child a:hover{color:var(--titulo)}
.rod-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--e8);margin-top:var(--e56);padding-top:var(--e24);border-top:1px solid var(--contorno);font-size:var(--sm);color:var(--suave)}

/* entrada suave das seções (só com movimento permitido) */
@media (prefers-reduced-motion:no-preference){
  .js .revela{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .js .revela.visivel{opacity:1;transform:none}
}

/* ===== narrativa em capítulos (13BL): a página conta a história do paciente até o plano ===== */

/* ---- capítulo 1: o celular preso na tela, que muda a cada passo do texto ---- */
.jornada-topo .d2{max-width:24ch;margin-left:auto;margin-right:auto;text-align:center}
/* título e celular num mesmo bloco preso (palco): ficam no alto enquanto os passos rolam ao lado e sobem juntos,
   na mesma posição, quando a seção acaba. Os textos que sobem somem atrás do título (fundo da seção). Só no computador */
@media (min-width:961px){
  /* o título fica a 96px do início da seção, como nos outros títulos (48px de padding da seção + 48px do palco);
     preso, fica a 48px do menu. Entre o título e o aparelho, a mesma distância do título das objeções até o primeiro card (80px) */
  #jornada{padding-top:var(--e48);--pad-j:var(--e48);--topo-j:calc(var(--pad-j) + 140px);--cel-h:min(580px,calc(100vh - var(--barra-h) - var(--topo-j) - var(--e48) - var(--e12) - var(--e48)))}
  .jornada-palco .celular-col{margin-top:calc(var(--e48) + var(--e12));justify-content:flex-end;padding-right:var(--e40)} /* aparelho puxado para o meio da página */
  .jornada{grid-template-rows:auto}
  .jornada-palco{grid-column:1 / -1;grid-row:1;position:sticky;top:var(--barra-h);z-index:2;height:calc(100vh - var(--barra-h));display:grid;grid-template-columns:5fr 6fr;grid-template-rows:auto 1fr;column-gap:var(--e72);pointer-events:none}
  .jornada-topo{grid-column:1 / -1;background:var(--fundo);padding-top:var(--pad-j)}
  .jornada-topo .d2{margin-bottom:var(--e32)}
  .jornada-palco .celular-col{position:static;grid-column:1;align-self:start}
  .celular{height:var(--cel-h)!important}
  /* cada passo para com o meio do texto no meio do aparelho: o primeiro já começa ali e o último consegue chegar ali
     antes de o bloco preso soltar (--meio-cel: distância do topo do palco até o meio do aparelho) */
  #jornada{--meio-cel:calc(var(--topo-j) + var(--e48) + var(--e12) + var(--cel-h) / 2)}
  .passos{grid-column:2;grid-row:1;position:relative;z-index:1;padding-top:max(0px,calc(var(--meio-cel) - 25vh));padding-bottom:max(0px,calc(100vh - var(--barra-h) - var(--meio-cel) - 25vh + var(--e24)))}
  #jornada .passo{min-height:50vh;justify-content:center;padding-top:0}
}
/* celular e tablet: título e aparelho presos juntos no alto, o título menor e em menos linhas, os passos rolando abaixo */
@media (max-width:960px){
  .jornada-palco{position:sticky;top:var(--barra-h);z-index:2;background:var(--fundo);padding:var(--e16) 0 var(--e12)}
  .jornada-topo .d2{max-width:none;margin:0 0 var(--e16)}
  .jornada-palco .celular-col{position:static;padding:0;background:none}
  .jornada-palco .celular{height:min(400px,52vh)}
  /* no celular o título some da vista (continua para leitores de tela e para o Google): sobra espaço para o aparelho */
  .jornada-topo .d2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
}
/* os passos só aparecem na faixa da altura do aparelho: surgem na borda de cima dele e somem na de baixo, com fade curto.
   site.js mede a posição do aparelho e passa --m-topo e --m-base (em px, relativos à lista). Só no computador */
@media (min-width:961px){
  .passos{-webkit-mask-image:linear-gradient(to bottom,transparent var(--m-topo,0px),var(--verde-escuro) calc(var(--m-topo,0px) + var(--e32)),var(--verde-escuro) calc(var(--m-base,100%) - var(--e32)),transparent var(--m-base,100%));mask-image:linear-gradient(to bottom,transparent var(--m-topo,0px),var(--verde-escuro) calc(var(--m-topo,0px) + var(--e32)),var(--verde-escuro) calc(var(--m-base,100%) - var(--e32)),transparent var(--m-base,100%))}
}

.jornada{display:grid;grid-template-columns:5fr 6fr;gap:var(--e72);align-items:start}
.celular-col{position:sticky;top:calc(var(--barra-h) + max(var(--e32), (100vh - var(--barra-h) - 560px) / 2));display:flex;justify-content:center}
.celular{height:min(560px,calc(100vh - var(--barra-h) - var(--e72)));aspect-ratio:9/19.5;padding:4px;border-radius:calc(var(--r-lg) * 2.5);background:var(--verde-escuro);box-shadow:0 40px 80px -40px var(--verde-escuro-a70)}
.cel-tela{position:relative;height:100%;border-radius:calc(var(--r-lg) * 2.5 - 4px);background:var(--verde-escuro-0);color:var(--verde-escuro);overflow:hidden;font-size:12px;line-height:1.4}
.cel-cena{position:absolute;inset:0;padding:var(--e24) var(--e16);opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease);visibility:hidden}
.celular[data-passo="1"] .c1,.celular[data-passo="2"] .c2,.celular[data-passo="3"] .c3,.celular[data-passo="4"] .c4,.celular[data-passo="5"] .c5{opacity:1;transform:none;visibility:visible}
.cel-app{display:flex;align-items:center;gap:var(--e8);font-weight:500;font-size:13px;margin-bottom:var(--e12)}
.cel-app .i{width:16px;height:16px}
.cel-busca{display:flex;align-items:center;gap:6px;height:34px;padding:0 var(--e12);border:1px solid var(--verde-escuro-a14);border-radius:var(--r-pilula);white-space:nowrap;overflow:hidden}
.cel-digita{display:inline-block;overflow:hidden;white-space:nowrap;border-right:1.5px solid var(--verde-escuro);max-width:13em}
.cel-nome{padding:1px var(--e8);border-radius:var(--r-pilula);background:var(--verde-claro)}
.cel-res{display:grid;gap:var(--e16);margin-top:var(--e20)}
.cel-res li{display:grid;gap:6px}
.cel-res b{display:block;height:9px;width:70%;border-radius:var(--r-pilula);background:var(--verde-escuro-a30)}
.cel-res i{display:block;height:6px;border-radius:var(--r-pilula);background:var(--verde-escuro-a10)}
.cel-res i+i{width:80%}
.cel-achados{display:grid;gap:var(--e8);margin-top:var(--e16)}
.cel-achados li{display:flex;gap:var(--e12);align-items:center;padding:var(--e12);border:1px solid var(--verde-escuro-a10);border-radius:var(--r-md)}
.cel-achados .i{width:18px;height:18px}
.cel-achados b{display:block;font-weight:500}
.cel-achados span{color:var(--verde-escuro-a70)}
.cel-achados b{color:var(--verde-escuro)}
.cel-ok{display:flex;align-items:center;gap:var(--e8);margin-top:var(--e16)}
.cel-perfil{display:flex;align-items:center;gap:var(--e12)}
.cel-perfil b,.ig-id b{display:block;font-weight:500;font-size:13px}
.cel-perfil span span,.ig-id{color:var(--verde-escuro-a70)}
.cel-avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--verde-escuro);color:var(--bege);font:400 18px/1 var(--display);flex:none}
.cel-bio{margin-top:var(--e12)}
.cel-botoes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:var(--e12)}
.cel-botoes span{display:block;text-align:center;padding:6px;border-radius:var(--r-sm);background:var(--verde-escuro-a8);font-weight:500}
.cel-botoes .seguir{background:var(--verde-claro)}
.cel-grade,.ig-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:var(--e16)}
.cel-grade img,.ig-grade img{aspect-ratio:4/5;object-fit:cover;width:100%}
.cel-post img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-md)}
.cel-salvo{display:flex;align-items:center;gap:var(--e8);margin-top:var(--e12);padding:var(--e8) var(--e12);border-radius:var(--r-pilula);background:var(--verde-escuro);color:var(--verde-escuro-0);width:max-content}
.cel-legenda{margin-top:var(--e12);color:var(--verde-escuro-a70)}
.cel-agenda{display:grid;gap:var(--e8)}
.cel-agenda li{display:flex;justify-content:space-between;padding:var(--e12);border-radius:var(--r-md);background:var(--verde-escuro-a5);border-left:0}
.cel-agenda li:first-child{background:var(--verde-claro)}
.cel-agenda b{font-weight:500}
.passos{display:grid;position:relative} /* referência do offsetTop dos passos (animação de espera) */
.passo{min-height:50vh;display:flex;flex-direction:column;justify-content:center;opacity:0;transition:opacity .5s var(--ease)} /* só o passo em destaque aparece: texto apagado pela metade não tem contraste legível (2026-10-12) */
.passo.ativo{opacity:1}
.passo .n{margin-bottom:var(--e16)}
.passo h3{font:400 var(--h2)/1.2 var(--display);letter-spacing:-.01em;max-width:22ch}
.passo p{color:var(--apoio);margin-top:var(--e12);max-width:46ch}
.passo:first-child{min-height:50vh;justify-content:flex-start;padding-top:var(--e48)}
.passo:last-child{min-height:44vh}
@media (prefers-reduced-motion:no-preference){
  .celular[data-passo="1"] .cel-digita{animation:digita-cel 2.2s steps(24) .3s both}
  .celular[data-passo="2"] .cel-achados li,.celular[data-passo="2"] .cel-ok,.celular[data-passo="3"] .cel-grade img,.celular[data-passo="5"] .cel-agenda li,.celular[data-passo="5"] .cel-ok{animation:cel-entra .5s var(--ease) both}
  .celular[data-passo="2"] .cel-achados li:nth-child(2),.celular[data-passo="3"] .cel-grade img:nth-child(2),.celular[data-passo="5"] .cel-agenda li:nth-child(2){animation-delay:.15s}
  .celular[data-passo="2"] .cel-achados li:nth-child(3),.celular[data-passo="3"] .cel-grade img:nth-child(3),.celular[data-passo="5"] .cel-agenda li:nth-child(3){animation-delay:.3s}
  .celular[data-passo="3"] .cel-grade img:nth-child(4),.celular[data-passo="5"] .cel-agenda li:nth-child(4){animation-delay:.45s}
  .celular[data-passo="3"] .cel-grade img:nth-child(5){animation-delay:.6s}.celular[data-passo="3"] .cel-grade img:nth-child(6){animation-delay:.75s}
  .celular[data-passo="2"] .cel-ok{animation-delay:.6s}.celular[data-passo="5"] .cel-ok{animation-delay:.8s}
  .celular[data-passo="4"] .cel-salvo{animation:cel-pula .5s cubic-bezier(.34,1.56,.64,1) .5s both}
}
@keyframes digita-cel{from{max-width:0}to{max-width:13em}}
@keyframes cel-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes cel-pula{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@media (max-width:960px){
  .jornada{grid-template-columns:1fr;gap:0}
  .celular-col{top:var(--barra-h);z-index:2;background:var(--fundo);padding:var(--e16) 0}
  .celular{height:min(340px,44vh);padding:3px;border-radius:calc(var(--r-lg) * 1.5)} /* aparelho menor, canto proporcional */
  .cel-tela{border-radius:calc(var(--r-lg) * 1.5 - 3px)}
  .cel-tela{font-size:9px}.cel-cena{padding:var(--e12) var(--e8)}.cel-app{font-size:10px;margin-bottom:var(--e8)}.cel-busca{height:24px}.cel-avatar{width:28px;height:28px;font-size:12px}.cel-perfil b{font-size:10px}
  .passo{min-height:36vh;justify-content:flex-start;padding-top:var(--e24)}
  .passo:first-child{min-height:30vh;padding-top:var(--e24)}
  /* a rolagem para em cada passo, logo abaixo do aparelho: um gesto, um passo, sem passar direto (pedido do usuário) */
  html:has(#jornada){scroll-snap-type:y proximity}
  #jornada .passo{scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:calc(var(--barra-h) + min(400px,52vh) - var(--e48))}
  .passo h3{font-size:var(--h3)}
}

/* ---- os três caminhos: capítulos com texto de um lado e uma cena do outro ---- */
.mov h3 a{text-decoration:none}
.mov h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.caminho-in{display:grid;grid-template-columns:1fr 1fr;gap:var(--e72);align-items:center}
.caminho-in.invertido .caminho-txt{order:2}
.caminho .d2{max-width:16ch}
@media (max-width:960px){.caminho-in{grid-template-columns:1fr;gap:var(--e48)}.caminho-in.invertido .caminho-txt{order:0}}

/* caminho 1: buscas que convergem para um anúncio, que vira contato (ciclo de 9s) */
.sinal{position:relative;aspect-ratio:1;max-width:520px;width:100%;justify-self:end;border:1px solid var(--contorno);border-radius:var(--r-cartao);background:var(--bloco);overflow:hidden}
.buscas-ia{position:absolute;left:0;right:0;top:7%;display:grid;justify-items:center;gap:var(--e12)}
.busca-ia{display:flex;align-items:center;gap:var(--e8);max-width:70%;padding:var(--e8) var(--e16);border-radius:var(--r-pilula);background:var(--superficie);color:var(--texto);font-size:var(--sm);white-space:nowrap}
.busca-ia span{overflow:hidden;text-overflow:ellipsis}
.busca-ia .i{width:16px;height:16px;color:var(--verde-claro)}
.fios{position:absolute;inset:0;width:100%;height:100%}
.fios path{fill:none;stroke:var(--verde-claro);stroke-width:1.2;stroke-dasharray:4 6;opacity:.55;vector-effect:non-scaling-stroke}
.anuncio-card{position:absolute;left:50%;top:57%;width:64%;transform:translateX(-50%);padding:var(--e16);border-radius:var(--r-md);background:var(--verde-escuro-0);color:var(--verde-escuro);box-shadow:0 24px 48px -24px var(--verde-escuro-a70)}
.anuncio-tag{font-size:11px;font-weight:500;color:var(--verde-escuro-a70)}
.anuncio-t{font-weight:500;margin-top:var(--e4);line-height:1.3}
.anuncio-d{font-size:var(--sm);color:var(--verde-escuro-a70);margin-top:var(--e4)}
.anuncio-btn{display:inline-block;margin-top:var(--e12);padding:var(--e4) var(--e16);border-radius:var(--r-pilula);background:var(--verde-claro);font-size:var(--sm);font-weight:500}
.contato-novo{position:absolute;right:6%;bottom:6%;display:flex;align-items:center;gap:var(--e8);padding:var(--e8) var(--e16);border-radius:var(--r-pilula);background:var(--verde-claro);color:var(--verde-escuro);font-size:var(--sm);font-weight:500}
.contato-novo .i{width:16px;height:16px}
@media (prefers-reduced-motion:no-preference){
  .sinal .busca-ia,.sinal .anuncio-card,.sinal .contato-novo{animation:sinal-ciclo 9s var(--ease) infinite both}
  .b-insta{animation-delay:.5s!important}.b-gpt{animation-delay:1s!important}
  .sinal .anuncio-card{animation-name:sinal-card;animation-delay:2.4s}
  .sinal .contato-novo{animation-name:sinal-pula;animation-delay:3.6s}
  .fios path{animation:fio-corre 1.6s linear infinite}
}
@keyframes sinal-ciclo{0%{opacity:0;transform:translateY(10px)}6%{opacity:1;transform:none}80%{opacity:1;transform:none}90%,100%{opacity:0;transform:none}}
@keyframes sinal-card{0%{opacity:0;transform:translateX(-50%) scale(.92)}7%{opacity:1;transform:translateX(-50%)}62%{opacity:1;transform:translateX(-50%)}72%,100%{opacity:0;transform:translateX(-50%)}}
@keyframes sinal-pula{0%{opacity:0;transform:scale(.8)}6%{opacity:1;transform:none}50%{opacity:1;transform:none}60%,100%{opacity:0;transform:none}}
@keyframes fio-corre{to{stroke-dashoffset:-20}}
@media (max-width:600px){.sinal{aspect-ratio:4/5}.busca-ia{font-size:12px;max-width:88%}.buscas-ia{gap:var(--e8);top:6%}.anuncio-card{top:44%;width:84%}.anuncio-d{display:none}.fios{display:none}.contato-novo{left:0;right:0;margin:0 auto;width:max-content;bottom:5%}}

/* caminho 2: o perfil no Instagram, com o anel dos stories se esgotando */
.vitrine-ig{justify-self:start;width:100%;max-width:400px;padding:var(--e24);border:1px solid var(--card-borda);border-radius:var(--r-cartao);background:var(--superficie);color:var(--verde-escuro);font-size:var(--sm);box-shadow:0 32px 64px -40px var(--verde-escuro-a70)}
.ig-topo{display:flex;align-items:center;gap:var(--e16)}
.ig-anel{position:relative;display:grid;place-items:center;width:64px;height:64px;flex:none}
.ig-anel svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ig-anel circle{fill:none;stroke:var(--verde-claro);stroke-width:5;stroke-linecap:round;stroke-dasharray:289;stroke-dashoffset:0}
.ig-anel .cel-avatar{width:50px;height:50px}
.ig-bio{margin-top:var(--e12);line-height:1.5}
.ig-24{display:flex;align-items:center;gap:var(--e8);margin-top:var(--e16);color:var(--verde-escuro-a70)}
.ig-24::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--verde-claro)}
@media (prefers-reduced-motion:no-preference){
  .ig-anel circle{animation:anel-esgota 8s linear infinite}
  .vitrine-ig.pintar .ig-grade img{animation:cel-entra .5s var(--ease) both}
  .vitrine-ig.pintar .ig-grade img:nth-child(2){animation-delay:.1s}.vitrine-ig.pintar .ig-grade img:nth-child(3){animation-delay:.2s}.vitrine-ig.pintar .ig-grade img:nth-child(4){animation-delay:.3s}.vitrine-ig.pintar .ig-grade img:nth-child(5){animation-delay:.4s}.vitrine-ig.pintar .ig-grade img:nth-child(6){animation-delay:.5s}
  .js .vitrine-ig:not(.pintar) .ig-grade img{opacity:0}
}
@keyframes anel-esgota{from{stroke-dashoffset:0}to{stroke-dashoffset:289}}

/* caminho 3: quanto tempo cada esforço continua trabalhando (as barras crescem ao entrar na tela) */
.duracao{padding:var(--e32);border-radius:var(--r-cartao);background:var(--verde-escuro-0);border:1px solid var(--contorno)}
.duracao figcaption{font:500 var(--h4)/var(--lh-h4) var(--display);color:var(--titulo);margin-bottom:var(--e24)}
.duracao ul{display:grid;gap:var(--e20)}
.duracao li{display:grid;grid-template-columns:1fr auto;gap:var(--e8) var(--e16);align-items:center}
.d-nome{font-weight:500;color:var(--titulo)}
.d-tempo{grid-row:1;grid-column:2;font-size:var(--sm);color:var(--apoio);text-align:right}
.d-barra{grid-column:1 / -1;height:10px;border-radius:var(--r-pilula);background:var(--verde-escuro-a8);overflow:hidden}
.d-barra i{display:block;height:100%;width:var(--fim);border-radius:var(--r-pilula);background:var(--verde-escuro-a30);transform-origin:left;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.artigo .d-barra i{background:var(--verde-escuro)}
.artigo .d-tempo{color:var(--titulo);font-weight:500}
.d-nota{margin-top:var(--e20);font-size:var(--sm);color:var(--apoio)}
.js .duracao:not(.pintar) .d-barra i{transform:scaleX(0)}
.duracao li:nth-child(2) i{transition-delay:.15s}.duracao li:nth-child(3) i{transition-delay:.3s}.duracao li:nth-child(4) i{transition-delay:.45s;transition-duration:2s}
.coragem{margin-top:var(--e72)}
.tres-coragens{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e24);margin-top:var(--e32)}
.tres-coragens li{display:grid;gap:var(--e12);align-content:start;padding-top:var(--e24);border-top:1px solid var(--verde-escuro-a30)}
.tres-coragens .n{margin-bottom:var(--e4)}
.tres-coragens b{font:400 var(--h2)/1.15 var(--display);color:var(--titulo);letter-spacing:-.01em}
.tres-coragens li>span:last-child{color:var(--apoio)}
.patamar{margin-top:var(--e56);font:400 var(--h2)/1.3 var(--display);color:var(--titulo);max-width:36ch;letter-spacing:-.01em}
.patamar .tom mark{color:var(--titulo);background:linear-gradient(transparent 58%,var(--verde-claro) 58%,var(--verde-claro) 94%,transparent 94%);padding:0 .08em}
@media (max-width:760px){.tres-coragens{grid-template-columns:1fr}}

/* chamada final com dois caminhos: conversar agora ou acompanhar até a hora certa */
.acoes-fim{display:flex;flex-wrap:wrap;gap:var(--e12);margin-top:var(--e24)}
.acoes-fim .btn{margin-top:0}

/* ===== alternância escuro e claro até o fim (pedido do usuário, 2026-10-11): o bege sai das seções,
   porque brigava com o marca-texto verde-claro. Ajustes das peças que mudaram de fundo ===== */
.claro #objecoes .risco,#objecoes.claro .risco{background-image:linear-gradient(var(--titulo),var(--titulo))}
.escuro .mov-ic{background:var(--bloco-forte)}
.escuro .mov:not(:last-child)::after{background:var(--contorno)}
.claro .busca-ia .i{color:var(--titulo)}
.claro .fios path{stroke:var(--apoio)}
.vitrine-ig{background:var(--verde-escuro-0)}

/* ===== planos (2026-10-12): as quatro fases lado a lado, ligadas por uma linha que atravessa os cartões no alto.
   Cada cartão: fase, nome, para quem, preço, implantação, botão e, abaixo, o que entra. O botão vem antes da lista
   para todos ficarem na mesma altura. Depois, a nota da verba e o compromisso, sem cartão, em duas colunas ===== */
.cobranca-bloco{display:grid;justify-items:center;gap:var(--e12);margin-top:var(--e8)}
.cobranca-bloco .cobranca{margin-top:0}
.planos{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e20);margin-top:var(--e56);padding-top:var(--e8)}
.planos::before{content:"";position:absolute;left:var(--e24);right:var(--e24);top:calc(var(--e8) + var(--e24) + 7px);height:1px;background:var(--contorno);z-index:0} /* a jornada: liga os pontos de fase */
/* vidro do cartão de login do sistema (login.css): brilho bege em diagonal, tinta leve de verde-escuro, borda bege a 12% e desfoque */
.plano{position:relative;z-index:1;display:flex;flex-direction:column;background:var(--brilho-bege),var(--vidro-tinta-leve);border:1px solid var(--vidro-borda);-webkit-backdrop-filter:var(--blur-vidro);backdrop-filter:var(--blur-vidro);--card-borda:var(--vidro-borda);border-radius:var(--r-cartao);padding:var(--e24);transition:transform var(--t-medio) var(--ease),border-color var(--t-medio) var(--ease),box-shadow var(--t-medio) var(--ease)}
.fase{display:flex;align-items:center;flex-wrap:wrap;gap:var(--e8);min-height:24px;font-size:var(--sm);color:var(--apoio);margin-bottom:var(--e16)}
.fase .ponto{width:15px;height:15px;border-radius:50%;background:var(--bege);box-shadow:0 0 0 4px var(--superficie)}
.plano h3{font:500 var(--h3)/var(--lh-h3) var(--display);color:var(--titulo)}
.dor{color:var(--apoio);margin-top:var(--e4);font-size:var(--sm);line-height:1.5;min-height:3em}
.preco{font:400 var(--num)/var(--lh-display) var(--display);color:var(--titulo);margin-top:var(--e16);font-variant-numeric:tabular-nums;white-space:nowrap}
.preco .rs{font-size:.46em;color:var(--apoio);margin-right:.28em;vertical-align:.45em}
.preco .mes{font-size:var(--tx);color:var(--apoio);margin-left:var(--e4)}
.preco.sob{font-size:var(--h2);padding:.32em 0 .1em}
.impl{font-size:var(--sm);color:var(--apoio);margin-top:var(--e4)}
.impl.gratis{color:var(--verde-claro)}
.plano .btn{width:100%;margin-top:auto;padding:0 var(--e12)}
.plano .itens{margin-bottom:var(--e24)}
.itens{margin-top:var(--e20);padding-top:var(--e20);border-top:1px solid var(--card-borda);display:grid;gap:var(--e12);font-size:var(--sm)}
.itens li{display:grid;grid-template-columns:16px 1fr;gap:var(--e8);color:var(--texto)}
.itens li::before{content:"";width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--botao) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317282E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/10px no-repeat}
/* comparação: o que o plano não inclui aparece apagado, riscado e com X, na mesma linha dos outros planos */
.itens li.fora{color:var(--suave);text-decoration:line-through;text-decoration-color:var(--contorno);opacity:.6}
.itens li.fora::before{background:var(--bloco-forte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BFC4C6' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/9px no-repeat}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ast{color:var(--verde-claro);margin-left:2px}
.itens li.base{display:block;color:var(--apoio)}
.itens li.base::before{content:none}
@media (hover:hover){.plano:hover{transform:translateY(-6px);border-color:var(--verde-claro);box-shadow:0 28px 56px -32px var(--verde-escuro-a70)}}
.plano:focus-within{border-color:var(--verde-claro)}
.plano:active{transform:translateY(-2px) scale(.99);transition-duration:var(--t-rapido)}
@media (prefers-reduced-motion:reduce){.plano{transition:border-color var(--t-rapido) var(--ease)}.plano:hover,.plano:active{transform:none}}
/* Clínica: o mesmo cartão, deitado abaixo dos três. À esquerda, fase, nome, para quem e o que entra (duas colunas);
   à direita, separada por um traço, a oferta: "Sob medida", a nota e o botão, como o pé dos outros cartões */
.plano.clinica{display:grid;grid-template-columns:1fr 280px;gap:0;margin-top:var(--e20);padding:0}
.clinica-corpo{padding:var(--e24);display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--e48);align-items:start} /* nome no canto de cima à esquerda; a lista numa coluna logo ao lado */
.clinica-corpo .dor{min-height:0}
.clinica .itens{grid-template-columns:1fr;margin:0;padding:0 0 0 var(--e32);border-top:0;border-left:1px solid var(--card-borda)}
.clinica-oferta{display:flex;flex-direction:column;justify-content:center;padding:var(--e24);border-left:1px solid var(--card-borda)}
.clinica-oferta .preco{margin-top:0}
.clinica-oferta .btn{margin-top:var(--e24)}
@media (max-width:960px){.planos{grid-template-columns:1fr;max-width:600px;margin-inline:auto}.planos::before{display:none}.plano.clinica{grid-template-columns:1fr;max-width:600px;margin-inline:auto}.clinica-corpo{grid-template-columns:1fr;gap:var(--e20)}.clinica .itens{grid-template-columns:1fr;padding:var(--e20) 0 0;border-left:0;border-top:1px solid var(--card-borda)}.clinica-oferta{border-left:0;border-top:1px solid var(--card-borda);padding-top:var(--e20)}}
.letras{margin:var(--e24) auto 0;font-size:var(--sm);color:var(--apoio);max-width:none;text-align:center;text-wrap:balance}
.letras a{color:var(--titulo);text-underline-offset:3px}

/* compromisso: duas colunas, frase grande à esquerda e o texto à direita; o "não é para você" fecha a coluna */
.compromisso{display:grid;grid-template-columns:5fr 7fr;gap:var(--e56);margin-top:var(--e72);padding-top:var(--e56);border-top:1px solid var(--contorno)}
.compromisso-t{font:400 var(--h1)/1.12 var(--display);color:var(--titulo);letter-spacing:-.01em}
.compromisso-txt{display:grid;gap:var(--e16);color:var(--apoio);align-content:start}
.nao-e{margin-top:var(--e16);padding-top:var(--e24);border-top:1px solid var(--contorno)}
.nao-e-t{font:500 var(--h4)/var(--lh-h4) var(--display);color:var(--titulo);margin-bottom:var(--e12)}
.nao-e ul{display:grid;gap:var(--e8)}
.nao-e li{display:grid;grid-template-columns:16px 1fr;gap:var(--e12);color:var(--texto)}
.nao-e li::before{content:"";width:16px;height:16px;margin-top:3px;border-radius:50%;background:var(--bloco-forte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BFC4C6' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/9px no-repeat}
@media (max-width:860px){.compromisso{grid-template-columns:1fr;gap:var(--e24)}.compromisso-t{font-size:var(--h2)}}

/* ===== auditoria de responsividade (2026-10-12): tablet e celular ===== */
@media (max-width:600px){.acoes .btn{width:100%}}
@media (max-width:960px){
  .cena-col{justify-content:center}                               /* busca do problema centralizada */
  .sinal,.vitrine-ig{justify-self:center}                          /* cenas dos caminhos centralizadas, sem vão do lado */
  .caminho .d2,.jornada-topo .d2{max-width:none}
  .compromisso{padding-top:var(--e40);margin-top:var(--e56)}
  .tres-coragens li{padding-top:var(--e20)}
  .patamar{font-size:var(--h3);margin-top:var(--e40)}
}
@media (max-width:480px){
  :root{--d1:36px}                                                  /* título da abertura sem quebrar palavra por palavra */
  section.sec:not(.abertura){padding:var(--e56) 0} /* só seções: o botão secundário também usa a classe .sec */
  .d2{margin-bottom:var(--e32)}
  .plano,.clinica-corpo,.clinica-oferta{padding:var(--e20)}
  .depo{padding:var(--e24)}
  .faq summary{font-size:var(--tx)}
}

/* barra de rolagem igual à do sistema no tema escuro (template.html e tokens --rolagem do escuro): alça verde-escuro-80
   em pílula, que clareia para o 75 ao passar o mouse. No sistema o trilho é transparente sobre o fundo escuro;
   aqui o fundo da página é claro, então o trilho recebe o mesmo fundo escuro (verde-escuro-100) para ficar igual.
   scrollbar-width e scrollbar-color só no Firefox; no Chrome e no Edge eles anulariam os ::-webkit-scrollbar e o :hover */
@supports (-moz-appearance:none){html{scrollbar-width:thin;scrollbar-color:var(--verde-escuro-80) var(--verde-escuro-100)}}
html::-webkit-scrollbar{width:10px}
html::-webkit-scrollbar-track{background:var(--verde-escuro-100)}
html::-webkit-scrollbar-thumb{background:var(--verde-escuro-80);border-radius:var(--r-pilula);border:2px solid transparent;background-clip:padding-box}
html::-webkit-scrollbar-thumb:hover{background:var(--verde-escuro-75);background-clip:padding-box;border:2px solid transparent}

/* ===== ética (2026-10-12): substitui o portfólio. Lista do que seguimos em duas colunas e três cartões padrão (.cartao)
   com a regra, a frase riscada e a frase revisada ===== */
.etica-t{font:500 var(--h4)/var(--lh-h4) var(--display);color:var(--titulo);margin-bottom:var(--e16)}
.etica-lista{margin-top:0;padding-top:0;border-top:0;font-size:var(--tx);grid-template-columns:1fr 1fr;column-gap:var(--e40)}
.etica-sub{margin-top:var(--e56)}
.revisoes .etica-t{margin-bottom:0}
.revisoes .rev-antes{color:var(--suave);margin-top:var(--e16)}
.revisoes .rev-depois{color:var(--titulo);margin-top:var(--e8)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:760px){.etica-lista{grid-template-columns:1fr}}
/* ética em movimento: o mesmo gesto das objeções. O cartão entra, a frase é riscada, a revisada sobe e o número vira check
   (site.js põe .anima na lista e .resolvido em cada cartão; sem JS ou sem movimento, tudo aparece no estado final) */
#etica .risco{background:linear-gradient(var(--verde-claro),var(--verde-claro)) 0 55%/0 1.5px no-repeat;transition:background-size .6s cubic-bezier(.65,0,.35,1) .35s}
#etica .resolvido .risco,#etica .revisoes:not(.anima) .risco{background-size:100% 1.5px}
#etica .revisoes .n{position:relative;width:24px;height:24px;transition:color .3s var(--ease) 1.1s}
#etica .revisoes .n::after{content:"";position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--verde-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317282E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat;transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1) 1.15s}
#etica .resolvido .n,#etica .revisoes:not(.anima) .n{color:transparent}
#etica .resolvido .n::after,#etica .revisoes:not(.anima) .n::after{transform:scale(1)}
#etica .anima li{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
#etica .anima .rev-depois{opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease) .85s,transform .45s var(--ease) .85s}
#etica .anima li.resolvido,#etica .anima li.resolvido .rev-depois{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){#etica .revisoes *,#etica .revisoes *::after{transition:none!important}}
#etica .topo-sec{margin-bottom:var(--e72)}                         /* no computador, a demonstração respira abaixo do título */
#etica .revisoes{margin-top:var(--e8)}
@media (max-width:860px){#etica .topo-sec{margin-bottom:var(--e48)}}

/* implantação em movimento (2026-10-12): ao entrar na tela, a linha das etapas se preenche de verde, da primeira à última,
   e cada ponto acende quando a linha chega nele (site.js põe .anima e depois .cheia). Sem JS ou sem movimento: já cheia */
.linha::after{content:"";position:absolute;left:6px;right:6px;top:6px;height:1px;background:var(--verde-claro);transform-origin:left;transform:scaleX(1)}
.linha.anima::after{transform:scaleX(0);transition:transform 2.4s cubic-bezier(.45,0,.25,1)}
.linha.anima li::before{background:var(--bloco-forte);transition:background-color .35s var(--ease),transform .45s cubic-bezier(.34,1.56,.64,1)}
.linha.anima.cheia::after{transform:scaleX(1)}
.linha.anima.cheia li::before{background:var(--botao);transform:scale(1.15)}
.linha.anima.cheia li:nth-child(1)::before{transition-delay:0s}
.linha.anima.cheia li:nth-child(2)::before{transition-delay:.65s}
.linha.anima.cheia li:nth-child(3)::before{transition-delay:.95s}
.linha.anima.cheia li:nth-child(4)::before{transition-delay:1.35s}
.linha li::before{z-index:1}
@media (max-width:960px){
  .linha::after{left:6px;right:auto;top:6px;bottom:6px;width:1px;height:auto;transform-origin:top;transform:scaleY(1)}
  .linha.anima::after{transform:scaleY(0)}
  .linha.anima.cheia::after{transform:scaleY(1)}
}
@media (prefers-reduced-motion:reduce){.linha::after,.linha li::before{transition:none!important}}

/* política de privacidade (2026-10-12): texto corrido numa coluna de leitura, no fundo claro do site; rodapé igual ao da home */
.legal{padding:var(--e56) 0 var(--e96)}
.legal .caixa{max-width:calc(var(--medida) + 2 * var(--e40))}
.legal-logo{display:inline-block;margin-bottom:var(--e56);border-radius:var(--r-controle)}
.legal-logo img{width:116px}
.legal h1{font:400 var(--h1)/1.12 var(--display);color:var(--titulo);letter-spacing:-.01em}
.legal-data{color:var(--suave);font-size:var(--sm);margin:var(--e12) 0 var(--e40)}
.legal h2{font:500 var(--h4)/var(--lh-h4) var(--display);color:var(--titulo);margin:var(--e40) 0 var(--e12)}
.legal p,.legal li{color:var(--texto)}
.legal p+p{margin-top:var(--e12)}
.legal ul{display:grid;gap:var(--e12);padding-left:var(--e20);list-style:disc}
.legal strong{font-weight:500;color:var(--titulo)}
.legal a{color:var(--titulo);text-underline-offset:3px}
.rod-base a{color:var(--suave);text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px;margin:-12px 0}
.rod-base a:hover{color:var(--titulo)}

@media (prefers-reduced-motion:reduce){.menu,.cortina{transition:none!important}}

/* revisão final de responsividade (2026-10-12): alvos de toque de 44px em telas de toque, logo com área de toque
   e e-mail longo sem estourar a tela de 320px na política */
@media (pointer:coarse){.seletor button{height:44px}}
.logo,.legal-logo{min-height:44px;display:inline-flex;align-items:center}
.legal a{overflow-wrap:anywhere}

/* botão flutuante do WhatsApp (2026-10-12), centralizado embaixo: só onde a barra esconde o botão de chamada (até 1120px). Respeita a área segura
   do aparelho (env(safe-area-inset-*), com viewport-fit=cover na página), para não ficar sob a barra de gestos do iPhone
   nem colado na borda arredondada. Some com o menu aberto e quando o contato ou o rodapé já estão na tela (site.js, .some) */
.flutuante{display:none}
@media (max-width:1120px){
  .flutuante{position:fixed;z-index:18;left:0;right:0;margin-inline:auto;width:max-content;max-width:calc(100% - 2 * max(var(--e16),env(safe-area-inset-left),env(safe-area-inset-right)));justify-content:center;bottom:max(var(--e16),calc(env(safe-area-inset-bottom) + var(--e8)));display:inline-flex;align-items:center;gap:var(--e8);height:52px;padding:0 var(--e20);border-radius:var(--r-pilula);background:var(--botao);color:var(--verde-escuro);font:500 var(--tx)/1 var(--corpo);text-decoration:none;box-shadow:0 12px 28px -12px var(--verde-escuro-a70);transition:transform var(--t-medio) var(--ease),opacity var(--t-medio) var(--ease),visibility 0s}
  .flutuante .i{width:20px;height:20px;fill:currentColor;stroke:none}
  .flutuante:active{transform:scale(.97)}
  .flutuante.some,.menu-aberto .flutuante{opacity:0;visibility:hidden;transform:translateY(12px);transition:transform var(--t-medio) var(--ease),opacity var(--t-medio) var(--ease),visibility 0s var(--t-medio)}
  .rodape{padding-bottom:calc(var(--e32) + 52px + env(safe-area-inset-bottom))}
}
@media (max-width:360px){.flutuante span{display:none}.flutuante{width:52px;padding:0;justify-content:center}}
@media (prefers-reduced-motion:reduce){.flutuante{transition:none!important}}
.barra-cta,.menu-cta{gap:var(--e8)}
.barra-cta .i,.menu-cta .i{width:18px;height:18px;fill:currentColor;stroke:none} /* o mesmo desenho do botão flutuante: ícone do WhatsApp e o texto */

/* aviso de cookies (2026-10-12): cartão no pé da tela, só quando há tags de anúncio configuradas. Recusar e Aceitar com o
   mesmo tamanho (a recusa não pode ser mais difícil que o aceite). Respeita a área segura e esconde o botão flutuante */
.aviso-cookies{position:fixed;z-index:25;right:max(var(--e24),env(safe-area-inset-right));bottom:max(var(--e24),calc(env(safe-area-inset-bottom) + var(--e8)));width:min(400px,calc(100% - 2 * var(--e16)));padding:var(--e20);border-radius:var(--r-cartao);background:color-mix(in srgb,var(--superficie) 93%,transparent);-webkit-backdrop-filter:var(--blur-vidro) brightness(2.4);backdrop-filter:var(--blur-vidro) brightness(2.4);border:1px solid color-mix(in srgb,var(--superficie) 60%,transparent);color:var(--texto);font-size:var(--sm);box-shadow:0 24px 48px -24px var(--verde-escuro-a70)} /* vidro claro no canto direito: papel a 93% com desfoque que clareia o fundo; sem suporte a desfoque, fica quase opaco (abaixo) */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.aviso-cookies{background:var(--superficie)}}
@media (max-width:600px){.aviso-cookies{right:max(var(--e16),env(safe-area-inset-right));bottom:max(var(--e16),calc(env(safe-area-inset-bottom) + var(--e8)))}}
.aviso-cookies[hidden]{display:none}
.ck-t{font:500 var(--tx)/var(--lh-ui) var(--corpo);color:var(--titulo);margin-bottom:var(--e4)}
.aviso-cookies a{color:var(--titulo);text-underline-offset:3px}
.ck-acoes{display:grid;grid-template-columns:1fr 1fr;gap:var(--e8);margin-top:var(--e16)}
.ck-acoes .btn{width:100%}
.com-aviso .flutuante{opacity:0;visibility:hidden}
.ck-reabrir{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:44px;margin:-12px 0}
.ck-reabrir:hover{color:var(--titulo)}
.ck-reabrir[hidden]{display:none}

/* sem o quadrado azul que o Android pinta ao tocar (perguntas, botões, links); o foco por teclado continua visível */
html{-webkit-tap-highlight-color:transparent}

/* movimento de entrada (2026-10-12): na abertura, o rótulo surge, as palavras do título sobem de trás de uma máscara uma a
   uma, e então entram o texto de apoio, os botões, a luz e o leque. Nos títulos das seções, as linhas sobem em sequência
   quando o título entra na tela (.pintar, o mesmo gatilho do marca-texto). Tudo só com movimento permitido */
@media (prefers-reduced-motion:no-preference){
  /* a classe entra no <head>, antes do primeiro desenho: o título fica escondido até as palavras serem separadas (sem piscar) */
  .abertura-anima:not(.abertura-pronta) .abertura .d1{visibility:hidden}
  .abertura-anima .abertura .d1 .palavra{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
  .abertura-anima .abertura .d1 .palavra>span{display:inline-block;transform:translateY(105%);animation:sobe-palavra .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.35s + var(--i) * .07s)}
  .abertura-anima .abertura .sobretitulo{opacity:0;letter-spacing:.3em;animation:rotulo-entra 1s var(--ease) .1s forwards}
  .abertura-anima .abertura .lead{opacity:0;transform:translateY(16px);filter:blur(6px);animation:sobe-suave .9s var(--ease) 1.05s forwards}
  .abertura-anima .abertura .acoes>*{opacity:0;transform:translateY(16px);animation:sobe-suave .8s var(--ease) forwards}
  .abertura-anima .abertura .acoes>:nth-child(1){animation-delay:1.25s}
  .abertura-anima .abertura .acoes>:nth-child(2){animation-delay:1.35s}
  .abertura-anima .abertura .luz{opacity:0;animation:aparece 2.4s var(--ease) .2s forwards}
  .abertura-anima .abertura .leque{opacity:0;animation:leque-entra 1.8s var(--ease) .6s forwards}
  .js .d2:not(.d1)>span{opacity:0;transform:translateY(.45em);transition:opacity .8s var(--ease),transform .9s cubic-bezier(.2,.8,.2,1)}
  .js .d2.pintar>span{opacity:1;transform:none}
  .js .d2.pintar>span:nth-child(2){transition-delay:.12s}
  .js .d2.pintar>span:nth-child(3){transition-delay:.24s}
}
@keyframes sobe-palavra{to{transform:none}}
@keyframes rotulo-entra{to{opacity:1;letter-spacing:.12em}}
@keyframes sobe-suave{to{opacity:1;transform:none;filter:none}}
@keyframes aparece{to{opacity:1}}
@keyframes leque-entra{from{opacity:0;transform:translateX(-50%) translateY(24px)}to{opacity:.5;transform:translateX(-50%)}}
/* no celular o rótulo só aparece, sem abrir o espaçamento: com .3em ele quebrava em duas linhas antes de voltar a uma */
@media (max-width:600px){@keyframes rotulo-entra{to{opacity:1;letter-spacing:.1em}}
  .abertura-anima .abertura .sobretitulo{letter-spacing:.1em;animation-name:aparece}}

/* celular da jornada em telas baixas (2026-10-12): o aparelho encolhe com a altura da janela, e o miolo encolhe junto, em
   proporção (zoom), (escala), para nada ficar espremido nem cortado. site.js mede o aparelho e define --z (1 = tamanho de desenho: 560px no computador, 340px no celular) */
@media all{
  .celular .cel-tela{width:calc(100% / var(--z,1));height:calc(100% / var(--z,1));transform:scale(var(--z,1));transform-origin:0 0;border-radius:calc((var(--r-lg) * 2.5 - 4px) / var(--z,1))}
}
@media (max-width:960px){.celular .cel-tela{border-radius:calc((var(--r-lg) * 1.5 - 3px) / var(--z,1))}}
.depo.fundador figcaption img{width:64px;height:64px}
#sobre .texto{margin-bottom:var(--e40)}
/* ferramentas gratuitas (calculadora e checklist, /calculadora-de-marketing e /checklist-etico): mesmo topo e rodapé da página inicial */
@media (min-width:861px){.rodape-in{grid-template-columns:1.5fr 1fr 1fr 1.7fr}}
.ferr-topo{padding-top:calc(var(--barra-h) + var(--e72))}
.ferr-topo .sobretitulo{display:block;margin-bottom:var(--e16)}
.ferr-topo .lead{margin-left:0}
.ferr-form,.ferr-card{display:grid;gap:var(--e16);margin-top:var(--e32);padding:var(--e32);border:1px solid var(--card-borda);border-radius:var(--r-cartao);background:var(--vidro-tinta-leve)}
.ferr-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e16)}
.ferr-form label{display:grid;gap:var(--e8);font-size:var(--sm);color:var(--apoio)}
.ferr-form input{height:48px;padding:0 var(--e16);border:1px solid var(--card-borda);border-radius:var(--r-controle);background:none;color:var(--titulo);font:inherit;font-size:max(16px,var(--tx))}
.ferr-form input::placeholder{color:var(--suave)}
.ferr-form input:focus-visible{outline:2px solid var(--botao);outline-offset:2px}
.ferr-form .btn,.ferr-card .btn{margin-top:0;justify-self:start}
.ferr-isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ferr-t{font:500 var(--h4)/var(--lh-h4) var(--display);color:var(--titulo)}
.ferr-sub,.ferr-aviso{color:var(--apoio)}
.ferr-aviso{font-size:var(--sm)}
.ferr-aviso a{color:var(--titulo);text-underline-offset:3px}
.ferr-erro{font-size:var(--sm);color:var(--titulo)}
.ferr-numeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e16);margin-top:var(--e32)}
.ferr-numeros .ferr-card{margin-top:0;gap:var(--e4);padding:var(--e24)}
.ferr-rot{font-size:var(--sm);color:var(--apoio)}
.ferr-num{font:400 var(--h2)/1.15 var(--display);color:var(--titulo)}
.ferr-plano p:not(.ferr-rot):not(.ferr-num){color:var(--texto)}
.ferr-checklist{list-style:none;padding:0;margin-top:var(--e32);display:grid;gap:var(--e8)}
.ferr-item{display:grid;grid-template-columns:24px 1fr;gap:var(--e16);align-items:start;padding:var(--e16) var(--e20);border:1px solid var(--card-borda);border-radius:var(--r-controle);cursor:pointer;color:var(--apoio)}
.ferr-item input{width:20px;height:20px;margin-top:2px;accent-color:var(--botao)}
.ferr-item b{display:block;font-weight:500;color:var(--titulo);margin-bottom:var(--e4)}
.ferr-item:has(input:checked){border-color:var(--botao)}
.ferr-progresso{margin-top:var(--e16);font-size:var(--sm);color:var(--apoio)}
.ferr-form[hidden],.ferr-card[hidden],.ferr-numeros[hidden],.ferr-erro[hidden]{display:none}
@media (max-width:720px){.ferr-campos,.ferr-numeros{grid-template-columns:minmax(0,1fr)}.ferr-form,.ferr-card{padding:var(--e24)}}
.ferr-fontes{display:grid;gap:var(--e8);padding-left:var(--e20);list-style:disc;margin-top:var(--e16)}
.ferr-numeros+.ferr-aviso{margin-top:var(--e16)}
/* diagnóstico gratuito (/diagnostico): passos numerados, grade de cartões e lista do que separar */
.ferr-topo .acoes{justify-content:flex-start;margin-top:var(--e32)}
.ferr-passos .ferr-item{cursor:default}
.ferr-n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--botao);color:var(--verde-escuro);font:500 var(--sm)/1 var(--corpo)}
.ferr-grade{margin-bottom:var(--e32)}
.ferr-grade .ferr-card{gap:var(--e8)}
.ferr-sub-t{font:500 var(--h4)/var(--lh-h4) var(--display);color:var(--titulo);margin-top:var(--e40)}
.sec.claro .acoes{justify-content:flex-start;margin-top:var(--e32)}
/* diagnóstico em chat (/diagnostico): balões da Terads à esquerda, respostas à direita, opções em botões */
.chat{margin-top:var(--e32);padding:var(--e24);border:1px solid var(--card-borda);border-radius:var(--r-cartao);background:var(--vidro-tinta-leve);-webkit-backdrop-filter:var(--blur-vidro);backdrop-filter:var(--blur-vidro);display:grid;gap:var(--e16)}
.chat-log{display:flex;flex-direction:column;gap:var(--e12);height:min(46vh,420px);overflow-y:auto;overscroll-behavior:contain;padding:var(--e24) var(--e8) var(--e8) 0;scrollbar-width:thin;scrollbar-color:var(--card-borda) transparent;-webkit-mask-image:linear-gradient(to bottom,transparent,var(--verde-escuro) var(--e32));mask-image:linear-gradient(to bottom,transparent,var(--verde-escuro) var(--e32))}
.chat-log::-webkit-scrollbar{width:6px}
.chat-log::-webkit-scrollbar-thumb{background:var(--card-borda);border-radius:var(--r-xs)}
.chat-log>.chat-msg:first-child{margin-top:auto}
.chat-opcoes{padding-top:var(--e16);border-top:1px solid var(--card-borda)}
.chat-opcoes:empty{min-height:calc(var(--e16) + 44px)}
.chat-msg{max-width:85%;padding:var(--e12) var(--e16);border-radius:var(--r-cartao);font-size:var(--tx);line-height:var(--lh-texto);animation:chat-entra var(--t-medio) var(--ease) both}
.chat-msg.bot{align-self:flex-start;background:var(--card-borda);color:var(--titulo);border-bottom-left-radius:var(--r-xs)}
.chat-msg.voce{align-self:flex-end;background:var(--botao);color:var(--verde-escuro);border-bottom-right-radius:var(--r-xs)}
.chat-opcoes{display:flex;flex-wrap:wrap;gap:var(--e8)}
.chat-opcoes .btn{margin-top:0}
.chat-pontos{display:grid;gap:var(--e12);padding-left:var(--e20)}
.chat-pontos li{color:var(--texto)}
.chat-pontos b{display:block;color:var(--titulo);font-weight:500;margin-bottom:var(--e4)}
.chat-pontos a{color:var(--titulo);text-underline-offset:3px}
/* diagnóstico: Freud no consultório no lugar da folhagem, à direita e um pouco mais visível */
.sec.escuro.diag-topo::before{bottom:auto;height:min(100%,56rem);background-image:url(assets/fundos/freud-consultorio.webp)!important;background-position:right top!important;opacity:.32!important;-webkit-mask-image:linear-gradient(to bottom,var(--verde-escuro) 65%,transparent);mask-image:linear-gradient(to bottom,var(--verde-escuro) 65%,transparent)}
@media (max-width:860px){.sec.escuro.diag-topo::before{height:min(100%,44rem);background-position:72% top!important;opacity:.22!important}}
/* nota do diagnóstico pela cor de estado: verde de 80 a 100, dourado de 50 a 79, vermelho abaixo de 50 */
.escuro .ferr-num.nota-boa{color:var(--verde-claro)}
.escuro .ferr-num.nota-media{color:var(--dourado)}
.escuro .ferr-num.nota-baixa{color:var(--vermelho)}
.ferr-passos+.texto{margin-top:var(--e24)}
/* diagnóstico: dados e aceite dentro da caixa do chat, antes das perguntas */
.chat-entrada{padding:var(--e16) 0 0;border:0;border-top:1px solid var(--card-borda);border-radius:0;background:none;display:grid;gap:var(--e12)}
.chat-entrada .ferr-campos{grid-template-columns:repeat(3,minmax(0,1fr))}
.chat-acoes{display:flex;justify-content:flex-end;gap:var(--e16);margin-top:var(--e12)}
.chat-acoes[hidden]{display:none}
.chat-reiniciar{display:block;margin:0;padding:var(--e8) 0;background:none;border:0;font:inherit;font-size:var(--sm);color:var(--texto);text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color var(--t-rapido) var(--ease)}
.chat-reiniciar:hover{color:var(--titulo)}
.chat-reiniciar[hidden]{display:none}
.chat-entrada[hidden],.chat-opcoes[hidden],.acoes[hidden]{display:none}
.chat:has(.chat-entrada:not([hidden])) .chat-log{height:auto}
.ferr-form .ferr-aceite{display:flex;gap:var(--e8);align-items:flex-start;font-size:var(--sm);line-height:var(--lh-texto);color:var(--texto);cursor:pointer}
.ferr-form .ferr-aceite input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--botao)}
.ferr-aceite a{color:var(--titulo);text-underline-offset:3px}
@media (max-width:720px){.chat-entrada .ferr-campos{grid-template-columns:minmax(0,1fr)}}
@keyframes chat-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.chat-msg{animation:none}}

/* ferramentas: o topo sempre começa abaixo da barra fixa, também no celular */
section.sec.ferr-topo{padding-top:calc(var(--barra-h) + var(--e48))}
@media (min-width:861px){section.sec.ferr-topo{padding-top:calc(var(--barra-h) + var(--e72))}}