/* IA for Health — site institucional. Tokens em tokens.css. Layout: seções alternando papel e algodão, largura de leitura de 1120px. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papel);color:var(--tinta);font:17px/28px var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:var(--amora);text-underline-offset:4px;text-decoration-thickness:1.5px}
:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
h1,h2,h3{margin:0;font-weight:800;text-wrap:balance}
p{margin:0}
img,svg{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--space-6)}
.ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.codigo{font:500 13px/18px var(--font-mono);letter-spacing:.03em;text-transform:uppercase;color:var(--tinta-suave)}

/* Botões */
.btn{font:700 17px/24px var(--font-sans);min-height:52px;padding:0 var(--space-6);border-radius:var(--radius-pill);border:1.5px solid var(--borda-controle);background:var(--papel);color:var(--tinta);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);text-decoration:none}
.btn-primaria{background:var(--amora);border-color:var(--amora);color:var(--on-amora)}
.btn-papel{background:var(--papel);border-color:var(--papel);color:var(--amora)}
.btn:hover{filter:brightness(.96)}

/* Cabeçalho */
.topo{position:sticky;top:0;z-index:5;background:var(--papel);border-bottom:1px solid var(--linha)}
.topo .wrap{display:flex;align-items:center;gap:var(--space-6);min-height:72px}
.marca{display:inline-flex;align-items:center;gap:var(--space-2);font:800 19px/1 var(--font-sans);color:var(--tinta);text-decoration:none;letter-spacing:-.01em}
.marca img{width:32px;height:32px}
.topo nav{margin-left:auto;display:flex;align-items:center;gap:var(--space-6)}
.topo nav a{color:var(--tinta);text-decoration:none;font-weight:700;font-size:15px}
.topo nav a:hover{color:var(--amora)}
.topo nav .btn{min-height:44px;font-size:15px;color:var(--on-amora)}

/* Hero */
.hero{padding:var(--space-16,64px) 0 var(--space-12)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-12);align-items:center}
.hero h1{font-size:64px;line-height:68px;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--amora)}
.lede{font-size:19px;line-height:30px;color:var(--tinta-suave);margin-top:var(--space-6);max-width:34em}
.acoes{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}

/* Vitrine da conversa */
.vitrine{background:var(--algodao);border-radius:var(--radius-lg);border-top-left-radius:var(--radius-fala);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
.vitrine-topo{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.escuta{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--agente);font:700 14px/20px var(--font-sans)}
.escuta svg{width:30px;height:30px}
.escuta .nucleo{fill:currentColor}
.escuta .arco{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;animation:onda 1.8s ease-out infinite}
.escuta .a2{animation-delay:.3s}.escuta .a3{animation-delay:.6s}
@keyframes onda{0%{opacity:.15}40%{opacity:1}100%{opacity:.15}}
@media (prefers-reduced-motion: reduce){.escuta .arco{animation:none}}
.fala{display:flex;flex-direction:column;gap:var(--space-1);max-width:92%}
.fala .quem{font:700 14px/20px var(--font-sans);color:var(--tinta-suave);display:flex;align-items:center;gap:var(--space-2)}
.fala .corpo{font-size:17px;line-height:28px;padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg)}
.fala.pessoa .quem{color:var(--amora)}
.fala.pessoa .corpo{background:var(--amora-suave);border-top-left-radius:var(--radius-fala)}
.fala.prof{align-self:flex-end;align-items:flex-end}
.fala.prof .corpo{background:var(--papel);border:1px solid var(--linha);border-top-right-radius:var(--radius-fala)}
.fala.agente .quem{color:var(--agente)}
.fala.agente .corpo{background:var(--agente-suave);border-top-left-radius:var(--radius-fala)}
.fala .ico{width:18px;height:18px}
.gesto{font-style:italic;color:var(--tinta-suave)}
.selos{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.selo{display:inline-flex;align-items:center;gap:var(--space-1);font:700 14px/20px var(--font-sans);padding:4px var(--space-3) 4px var(--space-2);border-radius:var(--radius-sm)}
.selo .ico{width:16px;height:16px}
.selo.ver{background:var(--sucesso-suave);color:var(--sucesso)}
.selo.inf{background:var(--atencao-suave);color:var(--atencao)}
.selo.nao{background:var(--papel);color:var(--tinta-suave);border:1.5px dashed var(--borda-controle)}

/* Seções */
.secao{padding:var(--space-16,64px) 0}
.secao.calma{background:var(--algodao)}
.secao h2{font-size:44px;line-height:50px;letter-spacing:-.015em;max-width:18em}
.secao .intro{font-size:19px;line-height:30px;color:var(--tinta-suave);margin-top:var(--space-4);max-width:40em}

/* Duas frentes */
.frentes{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-top:var(--space-8)}
.frente{background:var(--papel);border:1px solid var(--linha);border-radius:var(--radius-lg);border-top-left-radius:var(--radius-fala);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4)}
.frente .bloco{width:56px;height:56px;border-radius:var(--radius-md);display:grid;place-items:center}
.frente .bloco.a{background:var(--amora);color:var(--on-amora)}
.frente .bloco.d{background:var(--damasco);color:var(--on-damasco)}
.frente h3{font-size:24px;line-height:32px}
.frente p{color:var(--tinta-suave)}
.frente ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.frente li{display:grid;grid-template-columns:24px 1fr;gap:var(--space-3);align-items:start}
.frente li .ico{color:var(--amora);margin-top:2px}
.frente .rodape{margin-top:auto;padding-top:var(--space-2)}

/* Fluxo do consultório */
.fluxo{list-style:none;margin:var(--space-12) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);counter-reset:passo}
.passo{position:relative;display:flex;flex-direction:column;gap:var(--space-3)}
.passo .no{display:flex;align-items:center;gap:var(--space-3)}
.passo .num{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font:800 19px/1 var(--font-sans);flex:none}
.passo .linha{flex:1;height:2px;background:var(--linha);position:relative}
.passo .linha::after{content:"";position:absolute;right:-1px;top:-5px;border:6px solid transparent;border-left:8px solid var(--borda-controle);border-right:0}
.passo:last-child .linha{display:none}
.passo h3{font-size:19px;line-height:28px}
.passo p{font-size:15px;line-height:24px;color:var(--tinta-suave)}
.num.p1{background:var(--papel);border:2px solid var(--tinta);color:var(--tinta)}
.num.p2{background:var(--amora);color:var(--on-amora)}
.num.p3{background:var(--agente);color:var(--on-agente)}
.num.p4{background:var(--damasco);color:var(--on-damasco)}
.passo .quem-faz{font:500 13px/18px var(--font-mono);letter-spacing:.03em;text-transform:uppercase}
.passo:nth-child(2) .quem-faz{color:var(--amora)}
.passo:nth-child(3) .quem-faz{color:var(--agente)}
.passo:nth-child(1) .quem-faz,.passo:nth-child(4) .quem-faz{color:var(--tinta-suave)}

.caso-linha{display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-6);align-items:center;margin-top:var(--space-12);padding:var(--space-6);background:var(--algodao);border-radius:var(--radius-lg);border-top-left-radius:var(--radius-fala)}
.avatar{width:64px;height:64px;border-radius:50%;background:var(--damasco);color:var(--on-damasco);display:grid;place-items:center;font:800 21px/1 var(--font-sans)}
.caso-linha b{display:block;font-size:19px;line-height:28px}
.caso-linha q{display:block;margin-top:var(--space-1);color:var(--tinta)}

/* Princípios */
.principios{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);margin-top:var(--space-8)}
.principio{display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-4);border-top:2px solid var(--amora)}
.principio:nth-child(3){border-top-color:var(--agente)}
.principio h3{font-size:19px;line-height:28px}
.principio p{font-size:15px;line-height:24px;color:var(--tinta-suave)}

/* Contato */
.contato{background:var(--amora);color:var(--on-amora);padding:var(--space-16,64px) 0;position:relative;overflow:hidden}
.contato .wrap{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-6)}
.contato h2{font-size:44px;line-height:50px;max-width:14em;letter-spacing:-.015em}
.contato p{margin-top:var(--space-3);font-size:19px;line-height:30px;max-width:32em}
.contato .arcos{position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:420px;height:420px;opacity:.22;pointer-events:none}
.contato .arcos path{fill:none;stroke:var(--on-amora);stroke-width:10;stroke-linecap:round}

/* Rodapé */
.rodape-site{padding:var(--space-8) 0;border-top:1px solid var(--linha)}
.rodape-site .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);align-items:center}
.rodape-site p{font-size:15px;line-height:24px;color:var(--tinta-suave)}

@media (max-width: 960px){
  .hero .wrap,.frentes{grid-template-columns:1fr}
  .hero h1{font-size:48px;line-height:52px}
  .secao h2,.contato h2{font-size:34px;line-height:40px}
  .fluxo{grid-template-columns:1fr 1fr}
  .passo .linha{display:none}
  .principios{grid-template-columns:1fr 1fr}
  .topo nav a:not(.btn){display:none}
}
@media (max-width: 560px){
  .wrap{padding:0 var(--space-4)}
  .hero{padding-top:var(--space-8)}
  .hero h1{font-size:40px;line-height:44px}
  .fluxo,.principios{grid-template-columns:1fr}
  .caso-linha{grid-template-columns:1fr}
  .frente{padding:var(--space-6)}
}