/*
 * v2.css: o que é comum às páginas v2 (Home e Para dentistas, e as próximas).
 * Tokens e tipografia (Cormorant 400 e Jost), cabeçalho e rodapé, herói com foto, entrada discreta,
 * molduras de tela clara, botões, cenas com resolução, o fio de luz com os pulsos do símbolo, a Alta,
 * o mini editor de fluxo, o Copiloto, "Você não fica sozinho". O que é só de uma página fica no CSS dela.
 * O corpo da página leva as classes "pagina pagina--v2". Direção: _spec/DIRECAO-V2.md.
 */
/*
 * index-v2.css: Home v2 (piloto). Direção em _spec/DIRECAO-V2.md, texto em _spec/04-COPY/index-v2.md.
 * Superfície clara, fotografia como protagonista, Cormorant Garamond 400 nos títulos, Jost no resto.
 * Esmeralda só em botão, link, fechamento e rodapé. Movimento: entrada discreta, duas assinaturas (a convergência
 * das conversas e o caminho do paciente), os avisos do herói, a conversa do assistente e micro-interações.
 * Sem shader decorativo, sem parallax em texto, sem loops.
 * Usa só o que já existe em tokens.css, base.css, componentes.css e sim.css; o que falta está aqui.
 */


/* ============================================================ */
/* 0. Cormorant Garamond 400 (a existente só tem o peso 300)      */
/* ============================================================ */
@font-face{
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-400-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;
}
@font-face{
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ============================================================ */
/* 0b. Gates: trecho que só vai ao ar quando o produto tiver a funcionalidade */
/*    MECANISMO ÚNICO do site v2 (fonte: scripts/gates-v2.mjs). Valores: v023 (IAs prontas e IA respondendo sozinha, */
/*    versão 0.23), qr (WhatsApp por QR Code) e planos (diferença de planos e limites).                              */
/*    data-gate="X"      o trecho só aparece com html[data-gates~="X"]                                               */
/*    data-sem-gate="X"  versão alternativa: some quando o gate X está ligado                                        */
/*    Em localhost e 127.0.0.1 o script do <head> liga os três (modo prévia, html.previa-gates); ?gates=off desliga.  */
/*    Na publicação o build remove do HTML o que não vale, então este CSS é só a rede de segurança.                  */
/*    Nunca usar display:revert aqui: ele quebra os trechos que são grid, flex ou table.                             */
/* ============================================================ */
html:not([data-gates~="v023"]) [data-gate="v023"],
html:not([data-gates~="qr"]) [data-gate="qr"],
html:not([data-gates~="planos"]) [data-gate="planos"]{ display: none !important; }
html[data-gates~="v023"] [data-sem-gate="v023"],
html[data-gates~="qr"] [data-sem-gate="qr"],
html[data-gates~="planos"] [data-sem-gate="planos"]{ display: none !important; }
/* Prévia: contorno fino tracejado, neutro, sem mexer em layout (outline não ocupa espaço). A dica (title) vem do v2.js. */
html.previa-gates [data-gate]{ outline: 1px dashed rgba(85, 96, 89, .55); outline-offset: 2px; }


/* ============================================================ */
/* 1. Base da página                                              */
/* ============================================================ */
.pagina--v2{
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --esm: #0B3D2E;
  --papel: #F7F9F8;
  --corpo: #38423C;
  --suave: #556059;
  --linha-v2: #DEE3E0;
  --aviso: #875B17;
  --aviso-fundo: #F8F1E0;
  --aviso-borda: #E6D5AE;
  --ok: #16674F;
  --ok-fundo: #DCEFE7;
  --secao: clamp(2.5rem, 5vw, 5.5rem);
  --curva: cubic-bezier(.22, .7, .2, 1);
  background: var(--papel);
}
.pagina--v2 main{ display: block; position: relative; hyphens: manual; -webkit-hyphens: manual; }
.pagina--v2 main:focus{ outline: none; }

/* títulos: Cormorant 400, grandes, entrelinha justa (substitui a escala de base.css só aqui) */
.pagina--v2 h1,
.pagina--v2 h2,
.pagina--v2 h3{
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.012em;
  text-wrap: balance;
  max-inline-size: none;
  margin: 0;
}
.pagina--v2 h1{ font-size: clamp(2.5rem, 0.8rem + 4.6vw, 4.75rem); line-height: 1.05; }
.pagina--v2 h2{ font-size: clamp(2.125rem, 1.1rem + 3.2vw, 3.75rem); line-height: 1.08; }
.pagina--v2 h3{ font-size: clamp(1.875rem, 1.3rem + 1.9vw, 2.75rem); line-height: 1.1; }
:where(.pagina--v2) p{ color: var(--corpo); max-inline-size: 60ch; hyphens: manual; }
.pagina--v2 .nota{
  font-size: var(--t-mini);
  line-height: 1.5;
  color: var(--suave);
  max-inline-size: 46ch;
}

/* respiro: pelo menos 120px entre seções no desktop e 72px no celular */
.pagina--v2 main > section:not(.heroi){ padding-block: var(--secao); }


/* ============================================================ */
/* 2. Cabeçalho claro por cima do herói                           */
/* ============================================================ */
.pagina--v2 .cabecalho{
  margin-block-end: calc(var(--cabecalho-h) * -1);
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease), color 300ms var(--ease);
}
.pagina--v2 .cabecalho.no-topo.cabecalho--claro{
  background: transparent;
  border-bottom-color: transparent;
}
.pagina--v2 .cabecalho--esmeralda{ --ring: var(--anel-esm); --acao: #F0EBE4; --acao-hover: #FFFFFF; --acao-tinta: #0B3D2E; }
.pagina--v2 .cabecalho--claro{ --acao: #0B3D2E; --acao-hover: #08281E; --acao-tinta: #FFFFFF; --ring: var(--anel-claro); }
.pagina--v2 .menu__painel{ background: #F7F9F8; color: #151A17; }
.pagina--v2 .cabecalho--esmeralda .menu__painel{ background: #0B3D2E; color: #F0EBE4; }
.pagina--v2 .cabecalho:has(.menu[open]){ background: #F7F9F8; border-bottom-color: var(--linha-v2); }
.pagina--v2 .cabecalho--esmeralda:has(.menu[open]){ background: #0B3D2E; }


/* ============================================================ */
/* 3. Entrada discreta (uma vez) e revelação de foto               */
/*    Só depois de o <head> marcar html.js. Sem JS, tudo visível.  */
/* ============================================================ */
[data-entra]{
  transition: opacity 600ms var(--curva), transform 600ms var(--curva);
}
html.js [data-entra]:not(.dentro){ opacity: 0; transform: translateY(16px); }

[data-foto]{ display: block; }
/* o recorte vai na <img>, não no contêiner: o IntersectionObserver ignora o que está recortado */
html.js [data-foto] img{
  transition: clip-path 1100ms var(--curva), transform 1400ms var(--curva);
}
html.js [data-foto]:not(.dentro) img{ clip-path: inset(0 0 100% 0); transform: scale(1.05); }

/* rede de segurança: se o script da página não rodar, tudo aparece depois de 2,5 s */
@keyframes v2-aparece{ to{ opacity: 1; transform: none; } }
html.js:not(.js-ok) [data-entra],
html.js:not(.js-ok) .aviso,
html.js:not(.js-ok) [data-foto] img{ animation: v2-aparece 1ms 2.5s forwards; }

@media (prefers-reduced-motion: reduce){
  html.js [data-entra]:not(.dentro), html.js .aviso:not(.dentro){ opacity: 1; transform: none; }
  html.js [data-foto]:not(.dentro) img{ clip-path: none; transform: none; }
  [data-entra], .aviso, html.js [data-foto] img{ transition: none !important; }
}


/* ============================================================ */
/* 4. Herói                                                       */
/* ============================================================ */
.heroi{
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  align-items: center;
  min-height: clamp(34rem, min(100svh, 62vw), 58rem);
}
.heroi__foto{ position: absolute; inset: 0; z-index: -1; display: block; }
.heroi__foto img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% 50%;
}
.heroi__texto{
  width: 100%;
  padding-block: calc(var(--cabecalho-h) + 3rem) 4rem;
}
.nq{ white-space: nowrap; }
.heroi h1{ max-inline-size: 26ch; color: #151A17; font-size: clamp(2rem, 0.5rem + 3.1vw, 3.7rem); line-height: 1.08; }
.heroi__apoio{
  margin-block-start: 1.5rem;
  font-size: var(--t-lide);
  line-height: 1.5;
  max-inline-size: 40ch;
  font-size: clamp(1rem, .9rem + .3vw, 1.125rem);
  color: #2E3832;
}
.heroi__acoes{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-block-start: 2.25rem;
}
.link-seta{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: .3em;
  text-decoration-thickness: 1px;
  border-radius: 3px;
}
.link-seta .icone{ width: 16px; height: 16px; transition: transform var(--d-hover) var(--ease); }
@media (hover: hover) and (pointer: fine){
  .link-seta:hover{ text-decoration-thickness: 2px; }
  .link-seta:hover .icone{ transform: translateY(3px); }
}

/* Celular: o texto fica acima da foto, sem sobreposição. A 360-430px não cabem as duas
   pessoas e o bloco de texto no mesmo quadro; empilhar mantém os rostos inteiros. */
@media (max-width: 700px){
  .heroi{ flex-direction: column; align-items: stretch; min-height: 0; background: #EFEBE6; }
  .heroi__foto{ position: relative; inset: auto; z-index: auto; order: 2; aspect-ratio: 4 / 5; }
  .heroi__foto img{ object-position: 62% 100%; }
  .heroi__texto{ order: 1; padding-block: calc(var(--cabecalho-h) + 1.75rem) 2rem; }
  .nq{ white-space: nowrap; }
.heroi h1{ max-inline-size: 22ch; }
  .heroi__apoio{ margin-block-start: 1.1rem; max-inline-size: 36ch; font-size: 1rem; }
  .heroi__acoes{ margin-block-start: 1.5rem; gap: .25rem 1.5rem; }
}


/* ============================================================ */
/* 5. Cenas: só tipografia                                        */
/* ============================================================ */
.cenas__grade{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem 0;
}
.cenas h2{ font-size: clamp(1.875rem, 1.2rem + 1.6vw, 2.75rem); max-inline-size: 12ch; }
.cenas__lista{ margin: 0; padding: 0; list-style: none; }
.cenas__lista li{
  hyphens: manual;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.05rem + 1.4vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: #151A17;
  text-wrap: balance;
  padding-block: clamp(1.25rem, 2.4vw, 2.25rem);
  border-top: 1px solid var(--linha-v2);
}
.cenas__lista li:last-child{ border-bottom: 1px solid var(--linha-v2); }
.cenas__fecho{
  font-size: var(--t-lide);
  line-height: 1.55;
  max-inline-size: 48ch;
}
@media (min-width: 900px){
  .cenas__lista li{ max-inline-size: 22ch; }
  .cenas__grade{
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(2rem, 6vw, 6rem);
    row-gap: clamp(2.5rem, 4vw, 4rem);
  }
  .cenas__grade{ grid-template-rows: auto 1fr; }
  .cenas__col{ grid-column: 2; grid-row: 1 / span 2; }
  .cenas__fecho{ grid-column: 1; grid-row: 2; align-self: start; }
  .cenas h2{ grid-column: 1; grid-row: 1; align-self: end; }
}


.legenda{
  margin-block-start: 1.75rem;
  font-size: var(--t-mini);
  letter-spacing: .01em;
  color: var(--suave);
}

/* ============================================================ */
/* 8. Moldura de navegador e anotações das simulações              */
/* ============================================================ */
.moldura.sim__janela{
  border: 1px solid var(--linha-v2);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 61, 46, .05), 0 34px 60px -38px rgba(11, 61, 46, .34);
}
.moldura__barra{
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding-inline: 12px;
  background: #fff;
  border-block-end: 1px solid var(--linha-v2);
}
.moldura__barra span{ width: 9px; height: 9px; border-radius: 50%; background: #DEE3E0; }

/* legenda e anotações em corpo menor, abaixo da moldura */
.pagina--v2 .sim__legenda{ margin-block-start: .9rem; }
.pagina--v2 .sim--anotacoes-abaixo .sim__anotacoes{
  inline-size: 100%;
  margin-block-start: 1.1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem 1.75rem;
  font-size: var(--t-mini);
  line-height: 1.5;
  color: var(--suave);
}
.pagina--v2 .sim__anotacoes li{ margin: 0; }
.pagina--v2 .sim__anotacoes li[hidden]{ display: none; }
@media (max-width: 860px){
  .pagina--v2 .sim--anotacoes-abaixo .sim__anotacoes{ grid-template-columns: minmax(0, 1fr); gap: .75rem; }
}


/* ============================================================ */
/* 11. Fechamento esmeralda                                       */
/* ============================================================ */
.pagina--v2 .fecho{ padding-block-end: clamp(2.5rem, 5vw, 4.5rem); }
.fecho__grade{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
.fecho h2{ color: #F0EBE4; max-inline-size: 17ch; }
.fecho p{ color: var(--tinta-suave); font-size: var(--t-lide); line-height: 1.55; max-inline-size: 40ch; margin-block: 1.5rem 2rem; }
.fecho__foto{ margin: 0; border-radius: 6px; overflow: hidden; aspect-ratio: 3 / 2; }
.fecho__foto img{ width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 861px){
  .fecho__grade{ grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(2.5rem, 7vw, 7rem); }
}
.pagina--v2 .rodape{ border-top: 1px solid rgba(240, 235, 228, .14); padding-block-start: var(--sc-7); }
.pagina--v2 .rodape__topo{ margin-block-end: var(--sc-7); }
.pagina--v2 .rodape__nav{ margin-block-end: var(--sc-7); }

/* Títulos nunca quebram palavra com hífen. */
.pagina--v2 :is(h1, h2, h3, .cenas__lista li){ hyphens: manual; -webkit-hyphens: manual; }


.quebra{ display: block; }

.selo-ia{
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem .6rem; border: 1px solid var(--linha-v2); border-radius: 999px;
  background: #F1F4F2; font-size: .75rem; font-weight: 500; line-height: 1.5; color: #38423C; white-space: nowrap;
}
.selo-ia svg{ inline-size: .75rem; block-size: .75rem; color: var(--esm); flex: none; }
.selo-ia--sugere{ background: #fff; }

@keyframes msg-pisca{ to{ visibility: hidden; } }

/* ============================================================ */
/* 17. Cenas: a resposta do sistema embaixo de cada problema (R2)  */
/* ============================================================ */
.cena__txt{ display: block; }
.cena__res{
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-block-start: .85rem;
  font-family: "DM Mono", ui-monospace, Menlo, monospace;
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--esm);
  transition: opacity 500ms var(--curva), transform 500ms var(--curva);
}
.cena__res svg{ inline-size: 1rem; block-size: 1rem; flex: none; }
.cena__res path{ stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 500ms var(--ease) 150ms; }
html.fio-on .cena__res:not(.resolvida){ opacity: 0; transform: translateY(6px); }
html.fio-on .cena__res:not(.resolvida) path{ stroke-dashoffset: 1; }
.cenas__legenda{ margin-block-start: 1.25rem; }


/* ============================================================ */
/* 19. O fio de luz (R6): só transform e opacity, pointer-events none */
/* ============================================================ */
.fio{
  --fio-x: calc((100% - min(100%, 82rem)) / 2 + clamp(1.25rem, 5vw, 5.5rem) / 2);
  position: absolute;
  z-index: 3;
  left: var(--fio-x);
  top: 0;
  inline-size: 0;
  block-size: 0;
  pointer-events: none;
  display: none;
}
html.fio-on .fio{ display: block; }
.fio__ramo{ position: absolute; left: 0; block-size: 1px; background: rgba(240, 235, 228, .8); transform-origin: 0 50%; transform: scaleX(0); transition: transform 700ms var(--curva); }
.fio__ramo.on{ transform: scaleX(1); }
.fio__ponta{ position: absolute; left: 0; top: 0; inline-size: 0; block-size: 0; will-change: transform; }
.fio__halo{
  position: absolute;
  left: -15px; top: -15px;
  inline-size: 30px; block-size: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11, 61, 46, .26) 0, rgba(11, 61, 46, .12) 38%, rgba(11, 61, 46, 0) 70%);
}
.fio__nucleo{
  position: absolute;
  left: -3px; top: -3px;
  inline-size: 6px; block-size: 6px;
  border-radius: 50%;
  background: #F7F9F8;
  box-shadow: 0 0 0 1.5px #0B3D2E;
}
.fio--escuro .fio__halo{ background: radial-gradient(circle, rgba(240, 235, 228, .34) 0, rgba(240, 235, 228, .14) 38%, rgba(240, 235, 228, 0) 70%); }
.fio--escuro .fio__nucleo{ background: #F0EBE4; box-shadow: 0 0 0 1.5px #F0EBE4; }
@media (max-width: 719px){
  .fio__halo{ left: -11px; top: -11px; inline-size: 22px; block-size: 22px; }
  .fio__nucleo{ left: -2.5px; top: -2.5px; inline-size: 5px; block-size: 5px; }
}
.fecho .botao{ position: relative; }
.fecho .botao::after{
  content: "";
  position: absolute;
  inset: -5px;
  border: 1.5px solid rgba(240, 235, 228, .75);
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
}
.fecho .botao.fio-toque::after{ animation: fio-toque 1.3s var(--curva) 1; }
@keyframes fio-toque{
  0%{ opacity: .9; transform: scale(.97); }
  100%{ opacity: 0; transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce){
  .fio{ display: none !important; }
  .fecho .botao.fio-toque::after{ animation: none; }
}


/* 19b. A ponta do fio como luz (revisão do orquestrador, 07/10): halo maior e um rastro curto,
   para a ponta ler como luz descendo e não como marcador. Só gradiente estático; quem move é o transform da ponta. */
.fio__ponta::before{
  content: "";
  position: absolute;
  left: -1px; bottom: 0;
  inline-size: 3px; block-size: 160px;
  border-radius: 3px;
  background: linear-gradient(to bottom, rgba(11, 61, 46, 0) 0%, rgba(11, 61, 46, .18) 55%, rgba(11, 61, 46, .75) 100%);
}
.fio__halo{
  left: -34px; top: -34px;
  inline-size: 68px; block-size: 68px;
  background: radial-gradient(circle, rgba(22, 103, 79, .34) 0, rgba(22, 103, 79, .16) 30%, rgba(22, 103, 79, .05) 55%, rgba(22, 103, 79, 0) 72%);
}
.fio__nucleo{ left: -4px; top: -4px; inline-size: 8px; block-size: 8px; background: #FFFFFF; box-shadow: 0 0 0 2px #0B3D2E, 0 0 10px 2px rgba(22, 103, 79, .45); }
.fio--escuro .fio__ponta::before{ background: linear-gradient(to bottom, rgba(240, 235, 228, 0) 0%, rgba(240, 235, 228, .2) 55%, rgba(240, 235, 228, .8) 100%); }
.fio--escuro .fio__halo{ background: radial-gradient(circle, rgba(240, 235, 228, .36) 0, rgba(240, 235, 228, .14) 32%, rgba(240, 235, 228, 0) 70%); }
.fio--escuro .fio__nucleo{ box-shadow: 0 0 0 2px #F0EBE4, 0 0 10px 2px rgba(240, 235, 228, .5); }
@media (max-width: 719px){
  .fio__ponta::before{ block-size: 96px; inline-size: 2px; left: -.5px; }
  .fio__halo{ left: -22px; top: -22px; inline-size: 44px; block-size: 44px; }
  .fio__nucleo{ left: -3px; top: -3px; inline-size: 6px; block-size: 6px; }
}



/* ============================================================ */
/* 19c. O fio no pulso do AltaReceita (rodada 4): path SVG        */
/* ============================================================ */
.fio__svg{
  position: absolute;
  left: -140px; top: 0;
  inline-size: 280px;
  max-inline-size: none;
  overflow: visible;
  pointer-events: none;
}
.fio__svg path{ fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fio__trilha{ stroke-width: 1; }
.fio__trilha--esm{ stroke: rgba(11, 61, 46, .1); }
.fio__trilha--claro, .fio__trilha--champ{ stroke: rgba(240, 235, 228, .16); }
.fio__tr{ stroke-width: 1.25; }
.fio__tr--esm{ stroke: rgba(11, 61, 46, .62); }
.fio__tr--claro{ stroke: rgba(240, 235, 228, .88); }
.fio__tr--champ{ stroke: #D4C4A8; stroke-width: 2.6; }
.fio__realce{ stroke: #0B3D2E; stroke-width: 2.6; opacity: 0; }
.fio__realce--claro{ stroke: #F0EBE4; }
.fio__anel{
  position: absolute;
  left: 0;
  inline-size: 60px; block-size: 60px;
  margin: -30px 0 0 -30px;
  border: 2px solid rgba(11, 61, 46, .7);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.fio__anel--claro{ border-color: rgba(240, 235, 228, .85); }
.fio__ponta::before{ transform-origin: 50% 100%; transition: transform 250ms var(--ease); }
.fio__ponta.fio--curva::before{ transform: scaleY(.28); }
@media (max-width: 719px){
  .fio{ --fio-x: calc((100% - min(100%, 82rem)) / 2 + 8px); }
  .fio__tr{ stroke-width: 1; }
  .fio__anel{ inline-size: 24px; block-size: 24px; margin: -12px 0 0 -12px; }
  .fecho__texto{ padding-inline-start: .875rem; }
}
@media (prefers-reduced-motion: reduce){
  .fio__svg, .fio__anel{ display: none; }
}


.tela{
  position: relative;
  max-inline-size: 62rem;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--linha-v2);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(11, 61, 46, .05), 0 34px 60px -38px rgba(11, 61, 46, .34);
  overflow: hidden;
  color-scheme: light;
}
.tela button{ color: inherit; }

.ast{ font-family: "Jost", "Jost Reserva", "Helvetica Neue", Arial, sans-serif; }

/* --- R8 --- */
.fluxo__abas{ display: flex; gap: .25rem; padding: .6rem .75rem 0; background: #FBFCFB; border-block-end: 1px solid var(--linha-v2); overflow-x: auto; scrollbar-width: none; }
.fluxo__abas::-webkit-scrollbar{ display: none; }
.aba{
  flex: none; min-block-size: 2.75rem; padding: .55rem 1rem;
  background: transparent; border: 0; border-block-end: 2px solid transparent; border-radius: 6px 6px 0 0;
  font: inherit; font-size: .875rem; color: var(--suave); cursor: pointer; white-space: nowrap;
}
.aba[aria-selected="true"]{ background: #fff; border-block-end-color: var(--esm); color: #151A17; font-weight: 500; }
@media (hover: hover) and (pointer: fine){ .aba[aria-selected="false"]:hover{ color: #151A17; } }
.aba:focus-visible{ outline: 2px solid var(--esm); outline-offset: -2px; box-shadow: none; }
.fluxo__painel{ padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1rem, 2.5vw, 2rem); }
.fluxo__painel[hidden]{ display: none; }
.nos{ list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; }
.no{
  --tipo: #8E9A93;
  position: relative;
  flex: 1 1 0; min-inline-size: 0; max-inline-size: 15.5rem;
  padding: .85rem 1rem 1rem;
  background: #fff; border: 1px solid var(--linha-v2); border-block-start: 3px solid var(--tipo); border-radius: 8px;
  box-shadow: 0 1px 2px rgba(11, 61, 46, .05);
  transition: opacity 450ms var(--curva), transform 450ms var(--curva);
}
.no--gatilho{ --tipo: #875B17; }
.no--condicao{ --tipo: #0B3D2E; }
.no--acao{ --tipo: #16674F; }
.no--espera{ --tipo: #8E9A93; }
.no--ia{ --tipo: #BFE0D2; background: #F4FAF7; }
.no__cab{ display: flex; align-items: center; gap: .5rem; margin-block-end: .5rem; }
.no__ic{ display: grid; place-items: center; flex: none; inline-size: 1.6rem; block-size: 1.6rem; border-radius: 50%; background: #F1F4F2; color: #38423C; }
.no__ic svg{ inline-size: .9rem; block-size: .9rem; }
.no--gatilho .no__ic{ background: #F8F1E0; color: #875B17; }
.no--condicao .no__ic{ background: #DCEFE7; color: #0B3D2E; }
.no--acao .no__ic{ background: #E3F0EA; color: #16674F; }
.no--ia .no__ic{ background: #DCEFE7; color: #0B3D2E; }
.no__tipo{ font-family: "DM Mono", ui-monospace, Menlo, monospace; font-size: .75rem; letter-spacing: .01em; color: var(--suave); }
.no .selo-ia{ margin-inline-start: auto; padding: .05rem .5rem; }
.no__txt{ font-size: .9375rem; line-height: 1.4; color: #151A17; max-inline-size: none; }
.lig{
  position: relative; flex: 0 0 3rem; align-self: center; block-size: 1px; background: #8E9A93;
  clip-path: inset(-6px -6px -6px 0);
  transition: clip-path 450ms var(--curva);
}
.lig::after{ content: ""; position: absolute; right: -1px; top: -3px; border-inline-start: 6px solid #8E9A93; border-block: 3.5px solid transparent; }
.fluxo--anim .no:not(.on){ opacity: 0; transform: translateY(8px); }
.fluxo--anim .lig:not(.on){ clip-path: inset(-6px 100% -6px 0); }
.tipos{ list-style: none; margin: 0; padding: .85rem 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; border-block-start: 1px solid var(--linha-v2); background: #FBFCFB; }
.tipos__item{ display: inline-flex; align-items: center; gap: .45rem; font-size: .8125rem; color: var(--suave); }
.tipos__item .no__ic{ inline-size: 1.4rem; block-size: 1.4rem; }
.tipos__item--gatilho .no__ic{ background: #F8F1E0; color: #875B17; }
.tipos__item--condicao .no__ic{ background: #DCEFE7; color: #0B3D2E; }
.tipos__item--acao .no__ic{ background: #E3F0EA; color: #16674F; }
.tipos__item--ia .no__ic{ background: #DCEFE7; color: #0B3D2E; }

@media (max-width: 719px){
  .nos{ flex-direction: column; align-items: stretch; }
  .no{ max-inline-size: none; }
  .lig{ flex: 0 0 2rem; inline-size: 1px; block-size: auto; align-self: center; clip-path: inset(0 -6px -6px -6px); }
  .lig::after{ right: auto; left: -3px; top: auto; bottom: -1px; border-inline-start: 3.5px solid transparent; border-inline-end: 3.5px solid transparent; border-block-start: 6px solid #8E9A93; border-block-end: 0; }
  .fluxo--anim .lig:not(.on){ clip-path: inset(0 -6px 100% -6px); }
  .tipos{ padding-inline: 1rem; gap: .4rem 1rem; }
}
@media (prefers-reduced-motion: reduce){
  .bloco, .no, .lig{ transition: none; }
}


/* ============================================================ */
/* 21. Alta, a IA do site (R9, fase 1). Só existe com JS.          */
/* ============================================================ */
.alta{ display: none; color-scheme: light; }
html.alta-on .alta{ display: block; }
.alta__botao{
  position: fixed; z-index: 60;
  right: max(1.25rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: .6rem;
  min-block-size: 3rem; padding: .4rem 1.2rem .4rem .5rem;
  background: var(--esm); color: #fff; border: 0; border-radius: 999px;
  font: inherit; font-size: .9375rem; font-weight: 500; cursor: pointer;
  box-shadow: 0 1px 2px rgba(11, 61, 46, .2), 0 14px 30px -14px rgba(11, 61, 46, .6);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 350ms var(--curva), transform 350ms var(--curva), visibility 0s linear 350ms, background-color var(--d-hover) var(--ease);
}
.alta--visivel .alta__botao{ opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.alta--aberta .alta__botao{ opacity: 0; visibility: hidden; transform: translateY(10px); }
@media (hover: hover) and (pointer: fine){ .alta__botao:hover{ background: #08281E; } }
.alta__botao:focus-visible{ outline: 2px solid var(--esm); outline-offset: 3px; box-shadow: 0 0 0 5px #fff; }
.alta__simbolo{ display: grid; place-items: center; inline-size: 2.2rem; block-size: 2.2rem; border-radius: 50%; background: rgba(240, 235, 228, .14); color: #F0EBE4; flex: none; }
.alta__simbolo svg{ inline-size: 1.35rem; block-size: 1.35rem; }
.alta__simbolo--cab{ background: var(--esm); color: #F0EBE4; }
body:has(.menu[open]) .alta__botao{ opacity: 0; visibility: hidden; }
.alta__veu{ position: fixed; inset: 0; z-index: 80; background: rgba(21, 26, 23, .22); opacity: 0; transition: opacity 300ms var(--ease); }
.alta__veu.aberto{ opacity: 1; }
.alta__veu[hidden], .alta__painel[hidden]{ display: none; }
.alta__painel{
  position: fixed; z-index: 90;
  right: max(1.25rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom));
  inline-size: min(380px, calc(100vw - 2rem)); max-block-size: min(640px, calc(100svh - 2.5rem));
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--linha-v2); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(11, 61, 46, .06), 0 30px 60px -24px rgba(11, 61, 46, .45);
  opacity: 0; transform: translateY(14px);
  transition: opacity 280ms var(--curva), transform 280ms var(--curva);
  overflow: hidden;
}
.alta__painel.aberto{ opacity: 1; transform: none; }
.alta__painel:focus{ outline: none; }
.alta__cab{ display: flex; align-items: center; gap: .75rem; padding: .85rem .9rem; border-block-end: 1px solid var(--linha-v2); }
.alta__id{ flex: 1 1 auto; min-inline-size: 0; }
.alta__nome{ font-size: 1.0625rem; font-weight: 500; line-height: 1.2; color: #151A17; max-inline-size: none; }
.alta__sub{ font-family: "DM Mono", ui-monospace, Menlo, monospace; font-size: .6875rem; letter-spacing: .01em; color: var(--suave); max-inline-size: none; }
.alta__fechar{ display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; margin: -.4rem -.3rem -.4rem 0; background: transparent; border: 0; border-radius: 6px; color: var(--suave); cursor: pointer; }
.alta__fechar svg{ inline-size: 1.1rem; block-size: 1.1rem; }
.alta__fechar:focus-visible, .alta__chip:focus-visible, .alta__cta:focus-visible{ outline: 2px solid var(--esm); outline-offset: 2px; box-shadow: none; }
.alta__conversa{ flex: 1 1 auto; min-block-size: 8rem; overflow-y: auto; display: flex; flex-direction: column; gap: .7rem; padding: 1rem .95rem; overscroll-behavior: contain; }
.amsg{ position: relative; max-inline-size: 88%; }
.amsg--alta{ align-self: flex-start; padding: .55rem .8rem .65rem; background: #F1F4F2; border-radius: 6px 6px 6px 3px; }
.amsg--voce{ align-self: flex-end; padding: .5rem .8rem; background: #EAF4EF; border: 1px solid #CFE6DB; border-radius: 6px 6px 3px 6px; }
.amsg__ia{ display: inline-block; margin-block-end: .25rem; padding: 0 .45rem; background: #fff; border: 1px solid var(--linha-v2); border-radius: 999px; font-family: "DM Mono", ui-monospace, Menlo, monospace; font-size: .625rem; line-height: 1.5; letter-spacing: .04em; color: var(--esm); }
.amsg__txt{ font-size: .9375rem; line-height: 1.55; color: #151A17; max-inline-size: none; }
.amsg--voce .amsg__txt{ color: var(--esm); }
.amsg--digita{ padding: .75rem .9rem; }
.pontos{ display: inline-flex; gap: .3rem; }
.pontos i{ inline-size: .4rem; block-size: .4rem; border-radius: 50%; background: #8E9A93; animation: alta-ponto 900ms ease-in-out infinite; }
.pontos i:nth-child(2){ animation-delay: 150ms; } .pontos i:nth-child(3){ animation-delay: 300ms; }
@keyframes alta-ponto{ 0%, 60%, 100%{ opacity: .3; transform: none; } 30%{ opacity: 1; transform: translateY(-2px); } }
.alta__cta-wrap{ align-self: flex-start; }
.alta__cta{ min-block-size: 2.75rem; font-size: .9375rem; white-space: normal; text-align: center; }
.alta__acoes{ flex: none; display: grid; gap: .5rem; padding: .75rem .95rem 1rem; border-block-start: 1px solid var(--linha-v2); }
.alta__acoes--chips{ display: flex; flex-wrap: wrap; }
.alta__chip{
  min-block-size: 2.5rem; padding: .4rem .9rem; background: #fff; border: 1px solid #8E9A93; border-radius: 999px;
  font: inherit; font-size: .875rem; line-height: 1.3; color: #151A17; text-align: start; cursor: pointer;
  transition: background-color var(--d-hover) var(--ease), border-color var(--d-hover) var(--ease);
}
@media (hover: hover) and (pointer: fine){ .alta__chip:hover{ background: #EAF4EF; border-color: var(--esm); } }
.alta__chip--outra{ border-style: dashed; color: var(--suave); }
@media (max-width: 719px){
  .alta__botao{ padding-inline-end: 1rem; }
  html.alta-on:has(.alta--aberta){ overflow: hidden; }
  .alta--sobre-fecho .alta__botao{ opacity: 0; visibility: hidden; }
  .alta__painel{ inset: 0; inline-size: auto; max-block-size: none; border: 0; border-radius: 0; opacity: 1; transform: translateY(100%); transition: transform 320ms var(--curva); }
  .alta__painel.aberto{ transform: none; }
  .alta__conversa{ padding-block-end: 1.25rem; }
  .alta__acoes{ padding-block-end: max(1rem, env(safe-area-inset-bottom)); }
  .alta__veu{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .alta__botao, .alta__painel, .alta__veu{ transition: none; }
  .alta__painel{ transform: none; }
  .pontos i{ animation: none; }
}

/* Alta no celular (revisão do orquestrador, 08/10): só o ícone, para não cobrir o conteúdo.
   O texto continua no DOM como rótulo acessível. */
@media (max-width: 719px){
  .alta__botao{ padding: .4rem; gap: 0; min-block-size: 0; }
  .alta__botao-txt{ position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .alta__simbolo{ inline-size: 2.6rem; block-size: 2.6rem; }
}



/* ============================================================ */
/* 23. R13: o Copiloto. Conversa à esquerda, painel à direita,    */
/*     com os rótulos do CopilotPanel e do Composer da 0.20       */
/* ============================================================ */
.copi__cab{ display: grid; gap: 1.25rem; margin-block-end: clamp(1.75rem, 3vw, 2.5rem); }
.copi__cab h2{ max-inline-size: 22ch; }
.copi__apoio{ font-size: var(--t-lide); line-height: 1.5; max-inline-size: 52ch; }
.copi__dif{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-inline-size: 62rem; margin: 0 auto clamp(1.5rem, 3vw, 2.25rem); }
.copi__dif div{ padding: .85rem 1.1rem; border: 1px solid var(--linha-v2); border-radius: 6px; background: #FBFCFB; }
.copi__dif div:last-child{ border-color: var(--esm); background: #EAF4EF; }
.copi__dif dt{ font-size: .875rem; font-weight: 600; color: #151A17; }
.copi__dif dd{ margin: .15rem 0 0; font-size: .9375rem; line-height: 1.45; color: var(--corpo); }
.copi__corpo{ position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.cv{ display: flex; flex-direction: column; min-inline-size: 0; border-inline-end: 1px solid var(--linha-v2); }
.cv__barra{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-block-size: 2.75rem; padding-inline: 1rem; border-block-end: 1px solid var(--linha-v2); }
.cv__nome{ font-size: .9375rem; font-weight: 500; color: #151A17; }
.cv__canal{ padding: .1rem .6rem; border-radius: 999px; background: var(--ok-fundo); color: var(--ok); font-size: .75rem; font-weight: 500; }
.cv__msgs{ flex: 1 1 auto; display: grid; gap: .9rem; align-content: start; min-block-size: 15rem; padding: 1.1rem 1rem; }
.cv__msg{ display: flex; align-items: flex-end; gap: .55rem; transition: opacity 450ms var(--curva), transform 450ms var(--curva); }
.cv__msg--sai{ justify-content: flex-end; }
.cv__av{ display: grid; place-items: center; flex: none; inline-size: 1.75rem; block-size: 1.75rem; margin-block-end: 1.3rem; border-radius: 50%; background: var(--ok-fundo); color: var(--esm); font-size: .6875rem; font-weight: 500; }
.cv__col{ display: grid; gap: .25rem; max-inline-size: 84%; min-inline-size: 0; }
.cv__msg--sai .cv__col{ justify-items: end; }
.cv__bolha{ padding: .55rem .8rem; background: #F1F4F2; color: #38423C; font-size: .9375rem; line-height: 1.55; border-radius: 6px 6px 6px 3px; }
.cv__msg--sai .cv__bolha{ background: var(--esm); color: #fff; border-radius: 6px 6px 3px 6px; }
.cv__hora, .cv__rodape{ padding-inline: .15rem; font-size: .75rem; color: var(--suave); }
.cv__autor{ font-weight: 500; }
.cv__compor{ display: flex; align-items: flex-end; gap: .6rem; padding: .75rem 1rem 1rem; border-block-start: 1px solid var(--linha-v2); }
.cv__campo{ position: relative; flex: 1 1 auto; min-inline-size: 0; min-block-size: 4.25rem; padding: .55rem .8rem; background: #fff; border: 1px solid var(--linha-v2); border-radius: 6px; font-size: .9375rem; line-height: 1.5; color: #151A17; transition: border-color 250ms var(--ease); }
.cv__ph{ position: absolute; inset: .55rem .8rem auto; color: #626C65; pointer-events: none; }
.cv__txt:not(:empty) ~ .cv__ph{ display: none; }
.cv__cur{ display: none; inline-size: 1.5px; block-size: 1.05em; margin-inline-start: 1px; background: var(--esm); vertical-align: -.15em; animation: msg-pisca 900ms steps(2, start) infinite; }
.copi--anim .cv__campo.digitando .cv__cur{ display: inline-block; }
.copi--anim .cv__campo.digitando{ border-color: var(--esm); }
.cv__enviar{ display: grid; place-items: center; flex: none; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 6px; background: #E3E8E5; color: #626C65; transition: background-color 250ms var(--ease), color 250ms var(--ease), transform 250ms var(--ease); }
.cv__enviar svg{ inline-size: 1.1rem; block-size: 1.1rem; }
.cv__enviar.pronto{ background: var(--esm); color: #fff; box-shadow: 0 0 0 3px rgba(11, 61, 46, .18); }
.cp{ min-inline-size: 0; background: #FBFCFB; }
.cp__cab{ display: flex; align-items: center; min-block-size: 2.75rem; padding-inline: 1rem; border-block-end: 1px solid var(--linha-v2); background: #fff; }
.cp__tit{ display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--suave); }
.cp__tit svg{ inline-size: .8rem; block-size: .8rem; color: var(--esm); }
.cp__corpo{ display: grid; gap: .75rem; padding: 1rem; transition: opacity 500ms var(--curva), transform 500ms var(--curva); }
.cp__topo{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.cp__acao{ padding: .1rem .6rem; border: 1px solid var(--linha-v2); border-radius: 999px; background: #fff; font-size: .75rem; font-weight: 500; color: #38423C; }
.cp__tempo{ font-size: .75rem; color: var(--suave); }
.cp__sug{ padding: .75rem .9rem; background: #fff; border: 1px solid var(--linha-v2); border-radius: 6px; font-size: .9375rem; line-height: 1.55; color: #151A17; max-inline-size: none; }
.cp__intencao{ display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 500; color: var(--esm); max-inline-size: none; }
.cp__intencao svg{ inline-size: .95rem; block-size: .95rem; flex: none; }
.cp__evid{ font-size: .8125rem; line-height: 1.45; color: var(--suave); max-inline-size: none; }
.cp__evid strong{ font-weight: 600; color: #38423C; }
.cp__botoes{ display: flex; flex-wrap: wrap; gap: .5rem; }
.cp__btn{ display: inline-flex; align-items: center; min-block-size: 2.25rem; padding: .3rem 1rem; background: #fff; border: 1px solid var(--linha-v2); border-radius: 6px; font-size: .8125rem; font-weight: 500; color: #151A17; transition: transform 150ms var(--ease), box-shadow 200ms var(--ease); }
.cp__btn--prim{ background: var(--esm); border-color: var(--esm); color: #fff; }
.cp__btn.clicando{ transform: scale(.96); box-shadow: 0 0 0 4px rgba(11, 61, 46, .2); }
.cp__nova{ font-size: .8125rem; color: var(--suave); text-decoration: underline; text-underline-offset: .2em; max-inline-size: none; }
.copi__cursor{ position: absolute; z-index: 4; left: 0; top: 0; inline-size: 1.25rem; block-size: 1.25rem; opacity: 0; pointer-events: none; transition: transform 900ms cubic-bezier(.45, .05, .2, 1), opacity 300ms var(--ease); }
.copi__cursor.on{ opacity: 1; }
.copi__pe{ display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; max-inline-size: 62rem; margin: 1.5rem auto 0; }
.copi__legenda{ margin: 0; }
.copi__de-novo{ min-block-size: 2.25rem; padding: .25rem .5rem; background: transparent; border: 0; border-radius: 4px; font: inherit; font-size: .8125rem; color: var(--suave); text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
@media (hover: hover) and (pointer: fine){ .copi__de-novo:hover{ color: var(--esm); } }
.copi__de-novo:focus-visible{ outline: 2px solid var(--esm); outline-offset: 2px; box-shadow: none; }
.copi__de-novo[hidden]{ display: none; }
.pagina--v2 .copi__nota{ margin-block-start: .5rem; margin-inline: auto; inline-size: min(100%, 62rem); max-inline-size: 62rem; }
/* estados da animação (o estado final é o padrão) */
.copi--anim:not(.ps1) .cv__paciente{ opacity: 0; transform: translateY(8px); }
.copi--anim:not(.ps2) .cp__corpo{ opacity: 0; transform: translateY(8px); }
.copi--anim:not(.ps6) .cv__enviada{ opacity: 0; transform: translateY(8px); }
@media (max-width: 860px){
  .copi__corpo{ grid-template-columns: minmax(0, 1fr); }
  .cv{ border-inline-end: 0; border-block-end: 1px solid var(--linha-v2); }
  .cv__msgs{ min-block-size: 12rem; }
  .copi__dif{ grid-template-columns: minmax(0, 1fr); gap: .6rem; }
}
@media (prefers-reduced-motion: reduce){ .copi__cursor{ display: none; } }


/* Revisão de copy (08/10): microtexto do herói, CTA no meio, linha de segurança e retrato do fundador. */
.pagina--v2 .heroi__micro{ margin-block-start: .75rem; font-size: var(--t-pequeno); color: var(--suave); }
.cta-meio{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-block-start: clamp(2.5rem, 5vw, 4rem); max-inline-size: none; }
.cta-meio span{ font-size: var(--t-pequeno); color: var(--suave); }
.botao--sec{ background: transparent; color: var(--esm); box-shadow: inset 0 0 0 1.5px var(--esm); }
@media (hover: hover) and (pointer: fine){ .botao--sec:hover{ background: var(--esm); color: #fff; } }


/* R14. Implantação acompanhada */
.junto__cab{ display: grid; gap: 1rem; margin-block-end: clamp(2rem, 4vw, 3.5rem); }
.junto__cab h2{ max-inline-size: 20ch; }
.junto__apoio{ font-size: var(--t-lide); line-height: 1.5; max-inline-size: 48ch; }
.junto__passos{ list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; grid-template-columns: minmax(0, 1fr); }
.junto__passos li{ border-top: 1px solid var(--linha-v2); padding-block-start: 1.25rem; }
.junto__num{ display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--ok-fundo, #DCEFE7); color: var(--esm); font-family: var(--mono, "DM Mono", monospace); font-size: .875rem; margin-block-end: .9rem; }
.junto__passos h3{ font-family: var(--serif); font-weight: 400; font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem); line-height: 1.15; color: #151A17; margin: 0 0 .5rem; }
.junto__passos p{ font-size: var(--t-corpo); line-height: 1.6; max-inline-size: 34ch; }
.pagina--v2 .junto__prazo{ margin-block-start: clamp(1.75rem, 3vw, 2.5rem); font-size: var(--t-pequeno); color: var(--suave); max-inline-size: 60ch; }
@media (min-width: 860px){ .junto__passos{ grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3.5rem); } }

/* No celular, as linhas fixas dos títulos podem quebrar livremente, para nunca passar da borda. */
@media (max-width: 700px){
  .pagina--v2 h1 .nq, .pagina--v2 h2 .nq{ white-space: normal; }
  .pagina--v2 h1 .quebra{ display: inline; }
}

/* Segunda dobra mais leve (2.16): título com menos quebras, cenas com linha mais longa. */
.pagina--v2 .cenas h2{ max-inline-size: 15ch; }
@media (min-width: 900px){ .pagina--v2 .cenas__lista li{ max-inline-size: 30ch; } }

/* O h1 do herói quebra pelas linhas fixas (.nq); a caixa não limita a largura. */
@media (min-width: 701px){ .pagina--v2 .heroi h1{ max-inline-size: none; } }

/* Logo maior e mais visível (pedido do Eduardo, 08/10): o traço fino do lockup sumia, sobretudo no cabeçalho esmeralda. */
.pagina--v2 .cabecalho__lockup{ height: 46px; }
@media (max-width: 719px){ .pagina--v2 .cabecalho__lockup{ height: 38px; } }
.pagina--v2 .rodape__lockup{ height: 44px; }

/* Alta sobre o fechamento e o rodapé esmeralda (desktop): botão claro, para não sumir. */
@media (min-width: 720px){
  .alta--sobre-fecho .alta__botao{ background: #F0EBE4; color: #0B3D2E; }
  .alta--sobre-fecho .alta__simbolo{ background: rgba(11, 61, 46, .1); color: #0B3D2E; }
}

/* Notas do rodapé alinhadas à margem e próximas entre si. */
.pagina--v2 .rodape__nota, .pagina--v2 .rodape__marca, .pagina--v2 .rodape__direitos{ padding: 0; margin-block: .35rem 0; }
.pagina--v2 .rodape__nota{ margin-block-start: 2.5rem; }


/* Celulares estreitos (360px): o botão do fechamento e o do herói quebram em duas linhas em vez de passar da borda. */
@media (max-width: 380px){
  .pagina--v2 .heroi__acoes .botao, .pagina--v2 .fecho .botao{ white-space: normal; text-align: center; max-inline-size: 100%; padding-block: .6rem; }
}

/* ============================================================ */
/* Componentes de página de solução (Dentistas, Médicos, Estética) */
/* ============================================================ */

/* --- Jornada: linha do tempo de passos ligada à rolagem ([data-jornada]) --- */
.jornada__lista{ list-style: none; margin: 0; padding: 0; position: relative; }
.jornada__lista::before, .jornada__lista::after{ content: ""; position: absolute; inset-block: 1.5rem 1.5rem; inset-inline-start: calc(1.125rem - 1px); inline-size: 2px; border-radius: 1px; }
.jornada__lista::before{ background: #E1E7E3; }
.jornada__lista::after{ background: var(--esm); transform-origin: 50% 0; transform: scaleY(var(--j-prog, 1)); }
.j-passo{ position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 1.1rem; row-gap: 1rem; padding-block: 1.4rem; transition: opacity 500ms var(--curva); }
.j-passo__n{ position: relative; z-index: 1; display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; background: #fff; border: 1.5px solid var(--esm); color: var(--esm); font-family: "DM Mono", ui-monospace, Menlo, monospace; font-size: .8125rem; transition: background-color 350ms var(--ease), color 350ms var(--ease), box-shadow 350ms var(--ease); }
.j-passo__txt h3{ font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 .5rem; color: #151A17; }
.j-passo__txt p{ font-size: var(--t-corpo); line-height: 1.6; max-inline-size: 40ch; }
.j-passo__card{ grid-column: 2; }
@media (min-width: 860px){
  .j-passo{ grid-template-columns: 2.25rem minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(1.25rem, 3vw, 3rem); align-items: center; padding-block: 1.75rem; }
  .j-passo__card{ grid-column: 3; }
}
.jornada--anim .jornada__lista::after{ transition: transform 120ms linear; }
.jornada--anim .j-passo:not(.ativo):not(.feito) :is(.j-passo__txt, .j-passo__card){ opacity: .32; }
.jornada--anim .j-passo.feito :is(.j-passo__txt, .j-passo__card){ opacity: .72; }
.jornada--anim .j-passo.ativo :is(.j-passo__txt, .j-passo__card){ opacity: 1; }
.jornada--anim .j-passo :is(.j-passo__txt, .j-passo__card){ transition: opacity 500ms var(--curva), transform 500ms var(--curva); }
.jornada--anim .j-passo:not(.ativo):not(.feito) .j-passo__n{ border-color: #B5BDB8; color: #8E9A93; }
.jornada--anim .j-passo.feito .j-passo__n, .jornada--anim .j-passo.ativo .j-passo__n{ background: var(--esm); color: #fff; }
.jornada--anim .j-passo.ativo .j-passo__n{ box-shadow: 0 0 0 5px rgba(11, 61, 46, .16); }
.jornada--anim .j-passo__card{ transition: transform 500ms var(--curva); transform: translateY(6px); }
.jornada--anim .j-passo.ativo .j-passo__card{ transform: none; }
/* cartão de tela simulada pequeno */
.j-card{ max-inline-size: 24rem; margin: 0; padding: .9rem 1rem 1rem; font-size: .8125rem; line-height: 1.45; color: #38423C; overflow: visible; }
.j-card__tit{ display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-block-end: .6rem; font-size: .75rem; font-weight: 600; color: var(--suave); max-inline-size: none; }
.j-card__tit em{ font-style: normal; font-family: "DM Mono", ui-monospace, Menlo, monospace; font-weight: 400; }
.j-card p{ max-inline-size: none; font-size: inherit; line-height: inherit; color: inherit; margin: 0; }
.j-card .jc-valor{ font-size: 1.125rem; color: #151A17; }
.j-card .jc-tarefa{ color: #151A17; }
.jc-bolha{ padding: .45rem .7rem; background: #F1F4F2; border-radius: 6px 6px 6px 3px; color: #38423C; }
.j-card .jc-bolha--sai{ background: var(--esm); color: #fff; border-radius: 6px 6px 3px 6px; margin-inline-start: auto; inline-size: fit-content; max-inline-size: 90%; }
.jc-msgs{ display: grid; gap: .45rem; }
.jc-kv{ display: grid; gap: .3rem; margin: .6rem 0 0; padding: 0; }
.jc-kv div{ display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding-block: .25rem; border-block-start: 1px solid #EDF1EE; }
.jc-kv div:first-child{ border-block-start: 0; }
.jc-kv dt{ color: var(--suave); }
.jc-kv dd{ margin: 0; font-weight: 500; color: #151A17; text-align: end; }
.jc-chip{ display: inline-flex; align-items: center; gap: .3rem; padding: .05rem .6rem; border: 1px solid var(--linha-v2); border-radius: 999px; background: #F1F4F2; font-size: .75rem; font-weight: 500; color: #38423C; }
.jc-chip svg{ inline-size: .75rem; block-size: .75rem; color: var(--esm); flex: none; }
.jc-chip--ok{ background: var(--ok-fundo); border-color: transparent; color: var(--ok); }
.jc-chip--aviso{ background: var(--aviso-fundo); border-color: var(--aviso-borda); color: var(--aviso); }
.jc-valor{ font-family: "DM Mono", ui-monospace, Menlo, monospace; font-size: 1.125rem; color: #151A17; }
.jc-tarefa{ display: flex; align-items: center; gap: .5rem; margin-block-start: .5rem; padding: .4rem .6rem; border: 1px solid var(--linha-v2); border-radius: 4px; color: #151A17; }
.jc-tarefa svg{ inline-size: .9rem; block-size: .9rem; color: var(--esm); flex: none; }

/* --- Grade de cartões (procedimentos, planos de serviço, benefícios) --- */
.grade-cartoes{ list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, 2vw, 1.5rem); }
.pagina--v2 .grade-cartoes{ margin-block-start: clamp(2rem, 4vw, 3rem); }
.gc{ display: grid; align-content: start; gap: .6rem; block-size: 100%; padding: 1.5rem 1.4rem 1.6rem; background: #fff; border: 1px solid var(--linha-v2); border-radius: 6px; transition: border-color 250ms var(--ease), box-shadow 250ms var(--ease); }
@media (hover: hover) and (pointer: fine){ .gc:hover{ border-color: #8E9A93; box-shadow: 0 18px 30px -24px rgba(11, 61, 46, .35); } }
.gc__ic{ display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: #EAF4EF; color: var(--esm); }
.gc__ic svg{ inline-size: 1.25rem; block-size: 1.25rem; }
.gc__nome{ font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 1.1rem + .9vw, 1.75rem); line-height: 1.12; letter-spacing: -.01em; color: #151A17; margin: 0; }
.gc__linha{ font-size: var(--t-corpo); line-height: 1.55; color: var(--corpo); max-inline-size: 34ch; }
@media (max-width: 1023px){ .grade-cartoes{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px){ .grade-cartoes{ grid-template-columns: minmax(0, 1fr); } }

/* --- Perguntas frequentes em <details> --- */
.faq{ border-block-end: 1px solid var(--linha-v2); }
.faq__item{ border-block-start: 1px solid var(--linha-v2); }
.faq__item > summary{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-block-size: 3.5rem; padding-block: .85rem; list-style: none; cursor: pointer; font-size: var(--t-lide); font-weight: 500; line-height: 1.35; color: #151A17; border-radius: 4px; }
.faq__item > summary::-webkit-details-marker{ display: none; }
.faq__item > summary::after{ content: ""; flex: none; inline-size: .6rem; block-size: .6rem; border-inline-end: 1.8px solid var(--esm); border-block-end: 1.8px solid var(--esm); transform: rotate(45deg); margin-block-start: -.25rem; transition: transform 250ms var(--ease); }
.faq__item[open] > summary::after{ transform: rotate(-135deg); margin-block-start: .25rem; }
.faq__item > summary{ padding-inline: .5rem; margin-inline: -.5rem; }
.faq__item > summary:focus-visible{ outline: 2px solid var(--esm); outline-offset: 2px; box-shadow: none; }
@media (hover: hover) and (pointer: fine){ .faq__item > summary:hover{ color: var(--esm); } }
.faq__resp{ padding: 0 0 1.4rem; }
.faq__resp p{ font-size: var(--t-corpo); line-height: 1.65; max-inline-size: 62ch; color: var(--corpo); }

/* --- Assinatura curta do fundador --- */
.fundador{ display: flex; align-items: center; gap: .9rem; margin-block-start: clamp(1.5rem, 3vw, 2.25rem); }
.fundador__foto{ inline-size: 3.25rem; block-size: 3.25rem; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: #E9EEEB; }
.fundador__txt{ display: grid; gap: .1rem; font-size: var(--t-pequeno); line-height: 1.4; color: var(--suave); }
.fundador__txt strong{ font-weight: 600; color: #151A17; }
.fundador__txt a{ color: var(--esm); text-decoration: underline; text-underline-offset: .22em; border-radius: 3px; }
.fundador__txt a:focus-visible{ outline: 2px solid var(--esm); outline-offset: 2px; box-shadow: none; }

/* --- Botão fixo no celular --- */
.fixo-cta{ display: none; }
@media (max-width: 719px){
  html.js .fixo-cta{
    display: flex; align-items: center; gap: .75rem;
    position: fixed; inset-inline: 0; bottom: 0; z-index: 55;
    padding: .6rem .85rem calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(247, 249, 248, .97); border-block-start: 1px solid var(--linha-v2);
    box-shadow: 0 -10px 24px -18px rgba(11, 61, 46, .35);
    transform: translateY(110%); visibility: hidden;
    transition: transform 320ms var(--curva), visibility 0s linear 320ms;
  }
  html.fixo-visivel .fixo-cta{ transform: none; visibility: visible; transition-delay: 0s; }
  .fixo-cta .botao{ flex: 1 1 auto; min-block-size: 2.75rem; padding-inline: 1rem; font-size: .9375rem; white-space: normal; text-align: center; line-height: 1.2; }
  .fixo-cta__txt{ flex: none; inline-size: 5.25rem; font-size: .75rem; line-height: 1.3; color: var(--suave); }
  /* a Alta sobe acima da faixa */
  html.fixo-visivel .alta__botao{ bottom: calc(4.9rem + env(safe-area-inset-bottom)); }
  .alta__botao{ transition: opacity 350ms var(--curva), transform 350ms var(--curva), visibility 0s linear 350ms, bottom 320ms var(--curva), background-color var(--d-hover) var(--ease); }
}
@media (prefers-reduced-motion: reduce){
  html.js .fixo-cta, .alta__botao{ transition: none; }
  .j-passo, .j-passo__card, .j-passo__n{ transition: none; }
}

/* Acabamento (orquestrador, 08/10): botão fixo de uma linha no celular e títulos dos cartões mais contidos. */
@media (max-width: 719px){
  .fixo-cta .botao{ white-space: nowrap; font-size: .875rem; }
  .fixo-cta__txt{ display: none; }
}
.pagina--v2 .grade-cartoes .gc__nome{ font-size: clamp(1.3rem, 1.05rem + .6vw, 1.55rem); line-height: 1.15; }

/* Jornada: o número fica sempre por cima da linha e opaco (pedido do Eduardo, 08/10).
   A transparência dos passos fora de foco vale só para o texto e o cartão. */
.jornada__lista::before, .jornada__lista::after{ z-index: 0; }
.j-passo{ z-index: 1; }
.j-passo__n{ z-index: 2; background-clip: padding-box; }
.jornada--anim .j-passo:not(.ativo):not(.feito) .j-passo__n{ background: #fff; }


/* ============================================================ */
/* Campanhas e fidelidade (cartões com mini telas): Home e Estética */
/* ============================================================ */
.fid__cab{ display: grid; gap: 1.25rem; margin-block-end: clamp(2rem, 4vw, 3.5rem); }
.fid__cab h2{ max-inline-size: 18ch; }
.fid__apoio{ font-size: var(--t-lide); line-height: 1.5; max-inline-size: 46ch; }
.fid__grade{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: start; }
.fid__cartao{ display: grid; gap: 1rem; }
.pagina--index-v2 .fid__cartao h3{ font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.25rem); }
.fid__cartao > p:not(.nota){ font-size: var(--t-corpo); line-height: 1.6; max-inline-size: 44ch; }
.fid__legenda{ margin-block-start: 1.75rem; }
.mini{ max-inline-size: none; margin: .25rem 0 0; padding: 1.1rem 1.2rem 1.25rem; overflow: visible; }
.mini__tit{ margin-block-end: .8rem; font-size: .9375rem; font-weight: 600; color: #151A17; max-inline-size: none; }
.mini__rot{ margin: .9rem 0 .45rem; font-size: .75rem; font-weight: 600; color: var(--suave); max-inline-size: none; }
.mini__chips{ display: flex; flex-wrap: wrap; gap: .45rem; }
.mini__chip{ display: inline-flex; align-items: center; min-block-size: 2rem; padding: .2rem .8rem; background: #fff; border: 1px solid var(--linha-v2); border-radius: 999px; font-size: .8125rem; color: #38423C; transition: background-color 350ms var(--ease), border-color 350ms var(--ease), color 350ms var(--ease); }
.mini__chip--sel{ background: #EAF4EF; border-color: var(--esm); color: var(--esm); font-weight: 500; }
.mini--camp.mini--anim .mini__chip--sel{ background: #fff; border-color: var(--linha-v2); color: #38423C; font-weight: 400; }
.mini--camp.mini--anim.mini--sel .mini__chip--sel{ background: #EAF4EF; border-color: var(--esm); color: var(--esm); font-weight: 500; }
.funil{ list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.funil__linha{ display: grid; grid-template-columns: 7.25rem minmax(0, 1fr) 2rem; align-items: center; gap: .75rem; font-size: .8125rem; color: #38423C; }
.funil__barra{ block-size: .6rem; background: #EDF1EE; border-radius: 3px; overflow: hidden; }
.funil__barra i{ display: block; block-size: 100%; inline-size: var(--w); background: var(--esm); border-radius: 3px; transform-origin: 0 50%; transition: transform 700ms var(--curva); }
.funil__linha:nth-child(2) .funil__barra i{ background: #16674F; }
.funil__linha:nth-child(3) .funil__barra i{ background: #3EA07F; }
.funil__n{ text-align: end; font-weight: 500; color: #151A17; transition: opacity 400ms var(--ease); }
.mini--camp.mini--anim .funil__barra i{ transform: scaleX(0); }
.mini--camp.mini--anim .funil__n{ opacity: 0; }
.mini--camp.mini--anim.mini--cheio .funil__barra i{ transform: none; }
.mini--camp.mini--anim.mini--cheio .funil__n{ opacity: 1; }
.mini--camp.mini--anim.mini--cheio .funil__linha:nth-child(2) .funil__barra i{ transition-delay: 150ms; }
.mini--camp.mini--anim.mini--cheio .funil__linha:nth-child(3) .funil__barra i{ transition-delay: 300ms; }

.regras{ list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .45rem; }
.regras li{ display: flex; align-items: center; gap: .6rem; font-size: .875rem; color: #38423C; }
.regras__ic{ display: grid; place-items: center; flex: none; inline-size: 1.6rem; block-size: 1.6rem; border-radius: 50%; background: #F1F4F2; color: var(--suave); }
.regras__ic svg{ inline-size: .9rem; block-size: .9rem; }
.membro{ padding: .85rem 1rem 1rem; background: #FBFCFB; border: 1px solid var(--linha-v2); border-radius: 6px; }
.membro__topo{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: .9375rem; }
.membro__nome{ font-weight: 500; color: #151A17; }
.membro__nivel{ padding: .05rem .65rem; border: 1px solid var(--linha-v2); border-radius: 999px; background: #fff; font-size: .75rem; font-weight: 500; color: #38423C; }
.membro__pts{ display: flex; align-items: baseline; gap: .4rem; margin-block-start: .35rem; }
.membro__pts .num{ font-size: 1.75rem; line-height: 1.1; color: #151A17; }
.membro__un{ font-size: .8125rem; color: var(--suave); }
.membro__trilho{ margin-block-start: .5rem; block-size: .45rem; background: #EDF1EE; border-radius: 3px; overflow: hidden; }
.membro__trilho i{ display: block; block-size: 100%; inline-size: var(--w); background: var(--esm); border-radius: 3px; transform-origin: 0 50%; transition: transform 1100ms var(--curva); }
.membro__prox{ margin-block-start: .45rem; font-size: .75rem; color: var(--suave); max-inline-size: none; }
.niveis{ list-style: none; margin: .75rem 0 0; padding: 0; display: flex; gap: .4rem; }
.niveis li{ flex: 1 1 0; padding: .3rem .5rem; text-align: center; background: #fff; border: 1px solid var(--linha-v2); border-radius: 6px; font-size: .8125rem; color: var(--suave); }
.niveis__at{ border-color: var(--esm) !important; background: #EAF4EF !important; color: var(--esm) !important; font-weight: 500; }
.premios{ list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .45rem; }
.premio{ display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; background: #fff; border: 1px solid var(--linha-v2); border-radius: 6px; font-size: .875rem; color: #151A17; transition: border-color 400ms var(--ease), background-color 400ms var(--ease); }
.premio__ic{ display: grid; place-items: center; flex: none; color: var(--suave); }
.premio__ic svg{ inline-size: 1rem; block-size: 1rem; }
.premio__nome{ flex: 1 1 auto; min-inline-size: 0; }
.premio__estado{ font-size: .75rem; color: var(--suave); text-align: end; }
.premio--ok{ border-color: var(--esm); background: #EAF4EF; }
.premio--ok .premio__estado{ color: var(--ok); font-weight: 500; }
.premio--ok .premio__ic{ color: var(--esm); }
.mini--fid.mini--anim:not(.mini--cheio) .membro__trilho i{ transform: scaleX(.12); }
.mini--fid.mini--anim:not(.mini--cheio) .premio--ok{ border-color: var(--linha-v2); background: #fff; }
.mini--fid.mini--anim:not(.mini--cheio) .premio--ok .premio__estado{ color: var(--suave); font-weight: 400; }
.mini--fid.mini--anim:not(.mini--cheio) .premio--ok .premio__estado::after{ content: ""; }
.rank{ list-style: none; margin: 0; padding: 0; display: grid; }
.rank__linha{ display: flex; align-items: center; gap: .65rem; padding-block: .4rem; font-size: .875rem; color: #151A17; }
.rank__linha + .rank__linha{ border-block-start: 1px solid #EDF1EE; }
.rank__n{ display: grid; place-items: center; inline-size: 1.4rem; block-size: 1.4rem; border-radius: 50%; background: #F1F4F2; font-size: .75rem; font-weight: 500; color: var(--suave); }
.rank__linha:first-child .rank__n{ background: var(--esm); color: #fff; }
.rank__nome{ flex: 1 1 auto; min-inline-size: 0; }
.rank__pts{ font-size: .8125rem; color: var(--suave); }
@media (max-width: 860px){
  .fid__grade{ grid-template-columns: minmax(0, 1fr); gap: 2.75rem; }
}
@media (max-width: 479px){
  .funil__linha{ grid-template-columns: 6.25rem minmax(0, 1fr) 1.75rem; gap: .5rem; }
}

@media (prefers-reduced-motion: reduce){
  .funil__barra i, .membro__trilho i, .mini__chip{ transition: none; }
}
.pagina--v2 .regras{ margin-block-end: .9rem; }
.pagina--v2 .niveis{ margin-block-start: .75rem; }
.pagina--v2 .premios{ margin-block-start: .75rem; }
.pagina--v2 .mini__rot{ margin-block-start: 1rem; }


/* ============================================================ */
/* Seções das páginas de solução (Dentistas, Médicas, Estética)   */
/* ============================================================ */
/* --- 3. O orçamento à vista --- */
.orc__cab, .fup__cab{ display: grid; gap: 1.25rem; margin-block-end: clamp(2rem, 4vw, 3.5rem); }
.orc__cab h2{ max-inline-size: 22ch; }
.fup__cab h2{ max-inline-size: 20ch; }
.orc__apoio, .fup__apoio{ font-size: var(--t-lide); line-height: 1.5; max-inline-size: 50ch; }
.orc__sim{ inline-size: min(100%, 62rem); margin-inline: auto; }
.pagina--v2 .orc__nota{ margin-block-start: 1.25rem; margin-inline: auto; inline-size: min(100%, 62rem); max-inline-size: 62rem; }

/* --- 4. O follow-up --- */
.fup__fluxo{ margin-block-end: 1.5rem; }
.fup__copi{ max-inline-size: 62rem; }
.fup__msgs{ min-block-size: 0; padding-block: 1.25rem 1.5rem; }
.fup__copi .cp__corpo{ transition: opacity 600ms var(--curva), transform 600ms var(--curva); }
.fup__copi.fup--anim:not(.on) .cp__corpo{ opacity: 0; transform: translateY(8px); }
.fup__copi .cv__msg{ transition: opacity 450ms var(--curva), transform 450ms var(--curva); }
.fup__copi.fup--anim:not(.on) .cv__msg{ opacity: 0; transform: translateY(8px); }
.fup__legenda{ max-inline-size: 62rem; margin: 1.5rem auto 0; }
.pagina--v2 .fup__nota{ margin: .5rem auto 0; inline-size: min(100%, 62rem); max-inline-size: 62rem; }
@media (max-width: 860px){ .fup__copi .cv{ border-block-end: 1px solid var(--linha-v2); } }

/* --- 3. A jornada de um implante --- */
.jor__cab{ display: grid; gap: 1.25rem; margin-block-end: clamp(1.5rem, 3vw, 2.5rem); }
.jor__cab h2{ max-inline-size: 22ch; }
.jor__apoio{ font-size: var(--t-lide); line-height: 1.5; max-inline-size: 46ch; }
.jor__legenda{ margin-block-start: 1.5rem; }
.pagina--v2 .jor__nota{ margin-block-start: .5rem; max-inline-size: 70ch; }

/* --- 4. Feito para o que você vende --- */
.proc h2{ max-inline-size: 20ch; }
.pagina--v2 .proc__nota{ margin-block-start: 1.5rem; }

/* --- 7. Implantado com você --- */
.pagina--v2:not(.pagina--index-v2) .junto__apoio{ max-inline-size: 60ch; }

/* --- 8. Perguntas de quem tem consultório --- */
.faqs__grade{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.faqs h2{ max-inline-size: 18ch; margin-block-end: clamp(1.5rem, 3vw, 2.25rem); }
.faqs__foto{ display: none; margin: 0; border-radius: 6px; overflow: hidden; background: #E9EEEB; }
.faqs__foto img{ inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 55% 50%; }
@media (min-width: 960px){
  .faqs__grade{ grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(2.5rem, 6vw, 6rem); }
  .faqs__foto{ display: block; position: sticky; top: calc(var(--cabecalho-h) + 2rem); aspect-ratio: 4 / 5; }
}


/* ============================================================ */
/* Navegação final (BASE-TECNICA 7): cabeçalho e rodapé             */
/*   Fonte do HTML: scripts/nav-v2.mjs                              */
/* ============================================================ */

/* Marca à esquerda; o resto (menu de linha, CTA, botão Menu) encosta à direita, sem o CTA flutuar no meio. */
.pagina--v2 .cabecalho__linha{ justify-content: flex-start; gap: 1.25rem; }
.pagina--v2 .cabecalho__marca{ margin-inline-end: auto; flex: none; }
.pagina--v2 .cabecalho__cta.botao{ flex: none; }

/* Menu de linha só quando cabe inteiro (Funcionalidades, Para quem, Perguntas, Entrar e o CTA): a partir de 1100px.
   Abaixo disso vale o menu recolhido, o mesmo do celular. */
.pagina--v2 .menu-linha{ display: none; }
.pagina--v2 .menu{ display: block; }
@media (min-width: 1100px){
  .pagina--v2 .menu-linha{ display: block; margin-inline-end: clamp(.25rem, 1.2vw, 1rem); }
  .pagina--v2 .menu{ display: none; }
}
.pagina--v2 .menu > summary{ gap: .6rem; padding-inline: .75rem 0; justify-content: flex-end; }
.pagina--v2 .menu > summary .icone{ flex: none; inline-size: 20px; block-size: 20px; }

.pagina--v2 .menu-linha > ul{ display: flex; align-items: center; gap: clamp(1.1rem, 2.1vw, 2rem); }
.pagina--v2 .menu-linha > ul > li > a,
.pagina--v2 .submenu__botao{
  display: inline-flex; align-items: center; gap: .3rem; min-block-size: 44px;
  margin: 0; padding: 0; border: 0; border-block-end: 2px solid transparent; border-radius: 0; background: none;
  color: inherit; font: inherit; font-size: var(--t-pequeno); font-weight: 400; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.pagina--v2 .menu-linha > ul > li > a[aria-current="page"],
.pagina--v2 .submenu__botao[aria-current="true"]{ font-weight: 500; border-block-end-color: currentColor; }
@media (hover: hover) and (pointer: fine){
  .pagina--v2 .menu-linha > ul > li > a:hover,
  .pagina--v2 .submenu__botao:hover{ text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .4em; }
}
.pagina--v2 .submenu__seta{ inline-size: 14px; block-size: 14px; flex: none; transition: transform 200ms var(--ease); }
.pagina--v2 .submenu__botao[aria-expanded="true"] .submenu__seta{ transform: rotate(180deg); }

/* Submenu "Para quem": painel claro, 6px de raio, borda fina, quase sem sombra. Sem JS, abre por hover e foco. */
.pagina--v2 .submenu{ position: relative; }
.pagina--v2 .menu-linha .submenu__lista{
  display: none; position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: -.75rem; z-index: 5;
  min-inline-size: 13.5rem; margin: 0; padding: .35rem; list-style: none;
  background: #FBFCFB; color: #151A17; border: 1px solid var(--linha-v2); border-radius: 6px;
  box-shadow: 0 6px 18px -10px rgba(11, 61, 46, .18);
}
.pagina--v2 .menu-linha .submenu__lista::before{ content: ""; position: absolute; inset-inline: 0; inset-block-start: -8px; block-size: 8px; }
.pagina--v2 .submenu--aberto .submenu__lista,
html:not(.js-ok) .pagina--v2 .submenu:is(:hover, :focus-within) .submenu__lista{ display: flex; flex-direction: column; align-items: stretch; gap: 1px; }
.pagina--v2 .submenu__lista a{
  display: flex; align-items: center; min-block-size: 44px; padding: .4rem .75rem; border: 0; border-radius: 4px;
  color: #151A17; font-size: var(--t-pequeno); text-decoration: none; white-space: nowrap;
}
.pagina--v2 .submenu__lista a[aria-current="page"]{ font-weight: 500; color: var(--esm); background: #EEF3F0; }
@media (hover: hover) and (pointer: fine){ .pagina--v2 .submenu__lista a:hover{ background: #EEF3F0; } }
.pagina--v2 .submenu__lista a:focus-visible{ --ring: var(--anel-claro); }

/* Menu recolhido: "Para quem" como grupo com rótulo */
.pagina--v2 .menu__grupo{ padding-block: .35rem .15rem; }
.pagina--v2 .menu__grupo-titulo{ margin: 0; padding-block: .6rem .15rem; font-size: var(--t-pequeno); opacity: .72; }
.pagina--v2 .menu__grupo > ul{ margin-inline-start: .15rem; padding-inline-start: .85rem; border-inline-start: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.pagina--v2 .menu__painel a[aria-current="page"]{ font-weight: 500; }

/* Rodapé em quatro colunas */
.pagina--v2 .rodape__nav{ grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
@media (min-width: 900px){ .pagina--v2 .rodape__nav{ grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); } }
.pagina--v2 .rodape__coluna a[aria-current="page"]{ font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.pagina--v2 .rodape__coluna a{ line-height: 1.3; padding-block: .25rem; }


/* ============================================================ */
/* 24. Tela de computador (S2, pedido I3 de 13/10)                 */
/*     Moldura reutilizável: janela de navegador, lateral com o    */
/*     menu do app, topo com a busca e o conteúdo da tela.         */
/*     Marcação: .tela-pc[data-tela-pc="<item ativo>"] > barra +   */
/*     .tela-pc__janela > (.tela-pc__lat, .tela-pc__main >         */
/*     (.tela-pc__topo, .tela-pc__conteudo)). O v2.js preenche a   */
/*     lateral e o topo com as classes .ar-lat e .ar-topo de       */
/*     sim.css (mesmos tokens e mesmos ícones do app, via          */
/*     assets/img/sprite-app.svg). data-lateral="app" (padrão,    */
/*     decisão de 13/10) ou "clara"; as telas seguem claras.      */
/*     Larguras: computador (>= 1024) lateral completa; tablet,    */
/*     lateral só com ícones; celular (<= 600), sem lateral e com   */
/*     barra do nome da tela. Fora da viewport, o contêiner manda: */
/*     moldura estreita (meia coluna) também recolhe a lateral.    */
/* ============================================================ */
.tela-pc{
  container: tpc / inline-size;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  max-inline-size: 62rem;
  margin-inline: auto;
  background: #fff;
  color-scheme: light;
}
html .pagina--v2 .tela-pc.sim__janela{ background: #fff; inline-size: 100%; }
.tela-pc__janela{
  --lat-w: 204px; --lat-rot: block; --lat-tit: flex; --lat-just: flex-start; --lat-pad: 0 12px; --lat-marca: 24px;
  flex: 1 1 auto;
  display: flex;
  min-block-size: calc(100cqw / 1.6 - 30px);   /* proporção de desktop (16:10) como mínimo, descontada a barra; a janela cresce com o conteúdo */
}
/* tablet: lateral recolhida, só ícones, como o app */
@media (max-width: 1023px){
  .tela-pc__janela{ --lat-w: 60px; --lat-rot: none; --lat-tit: none; --lat-just: center; --lat-pad: 0; --lat-marca: 0px; }
}
@container tpc (max-width: 719px){
  .tela-pc__janela{ --lat-w: 60px; --lat-rot: none; --lat-tit: none; --lat-just: center; --lat-pad: 0; --lat-marca: 0px; }
}

/* hospedeiros .ar-app: só trazem os tokens do produto; o resto vem da moldura */
.tela-pc .tela-pc__lat.ar-app,
.tela-pc .tela-pc__topo.ar-app{
  inline-size: auto; block-size: auto; overflow: visible; background: transparent;
  font-size: 13px; line-height: 1.4;
}
.tela-pc .tela-pc__lat.ar-app{ display: flex; flex: none; inline-size: var(--lat-w); }
.tela-pc .tela-pc__lat.ar-app:empty, .tela-pc .tela-pc__topo.ar-app:empty{ display: none; }
.tela-pc__main{ flex: 1 1 auto; display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; }
.tela-pc__conteudo{
  container: tpc-c / inline-size;
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: 0;
}
.tela-pc__conteudo > :not(:defined){ display: block; }

/* lateral: reaproveita .ar-lat de sim.css, mais compacta para caber na janela 16:10 */
.tela-pc .ar-lat{ flex: 1 1 auto; inline-size: 100%; block-size: auto; }
.tela-pc .ar-lat__marca{ block-size: 52px; padding: 0 var(--lat-marca); justify-content: var(--lat-just); }
.tela-pc .ar-lat__marca .ar-simbolo{ inline-size: 28px; block-size: 28px; }
.tela-pc .ar-simbolo__a{ stroke: var(--sidebar-fg-active); }
.tela-pc .ar-simbolo__b{ stroke: var(--sidebar-accent); }
.tela-pc .ar-lat__nav{ gap: 2px; padding: 8px; }
.tela-pc .ar-lat__grupo{ gap: 2px; }
.tela-pc .ar-lat__div{ margin: 4px 8px; }
.tela-pc .ar-lat__titulo{ display: var(--lat-tit); padding: 2px 12px 4px; }
.tela-pc .ar-lat__item{ min-block-size: 34px; gap: 12px; padding: var(--lat-pad); justify-content: var(--lat-just); }
.tela-pc .ar-lat__rot{ display: var(--lat-rot); }

/* lateral clara (padrão): no tom das telas claras, item ativo em esmeralda, nada de champagne */
.tela-pc[data-lateral="clara"] .tela-pc__lat.ar-app{
  --sidebar-bg: #F1F4F2; --sidebar-hover: #E6ECE8; --sidebar-active-bg: #DCEFE7;
  --sidebar-fg: #38423C; --sidebar-fg-active: #0B3D2E; --sidebar-accent: #0B3D2E;
  --sidebar-border: #DEE3E0; --sidebar-muted: #556059;
}
.tela-pc[data-lateral="clara"] .ar-lat{ background-image: none; }
.tela-pc[data-lateral="clara"] .ar-lat__item--ativo{ box-shadow: inset 0 0 0 1px rgba(11, 61, 46, .14); font-weight: 600; }
.tela-pc[data-lateral="clara"] .ar-lat__faisca{ color: var(--sidebar-accent); opacity: .75; }

/* topo: busca com "Ctrl K", ajuda, presença e conta */
.tela-pc .ar-topo{ block-size: 52px; padding: 0 16px; gap: 10px; }
.tela-pc .ar-topo__busca{ block-size: 34px; min-inline-size: 0; }
@container tpc (max-width: 719px){
  .tela-pc .ar-so-largo{ display: none; }
  .tela-pc .ar-topo__icone{ display: none; }
}
.tela-pc .ar-so-largo{ display: inline; }
.tela-pc__nome{ display: none; }

/* o conteúdo preenche a janela, como numa tela de verdade */
.tela-pc__conteudo > .cfg__corpo{ flex: 1 1 auto; align-items: stretch; }
.tela-pc__conteudo > .copi__corpo{ flex: 1 1 auto; }
/* simulação (<ar-sim-*>): altura natural, para a janela crescer com ela; o fundo da área é o do app */
.tela-pc__conteudo > .ar-app{ flex: none; }
.tela-pc__conteudo:has(> .ar-app){ background: #F7F9F8; }

/* automação em linha: nós da esquerda para a direita, ligados por conectores, num quadro pontilhado */
.tela-pc .fluxo__abas{ flex: none; }
.tela-pc .fluxo__painel:not([hidden]){
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  background-color: #FBFCFB;
  background-image: radial-gradient(circle, #D5DCD8 1px, transparent 1.3px);
  background-size: 18px 18px;
}
.tela-pc .nos{ flex-direction: row; align-items: stretch; }
.tela-pc .no{ max-inline-size: 15.5rem; }
.tela-pc .lig{ flex: 0 0 1.75rem; inline-size: auto; block-size: 1px; align-self: center; clip-path: inset(-6px -6px -6px 0); }
.tela-pc .lig::after{ right: -1px; left: auto; top: -3px; bottom: auto; border-inline-start: 6px solid #8E9A93; border-inline-end: 0; border-block: 3.5px solid transparent; }
.tela-pc.fluxo--anim .lig:not(.on){ clip-path: inset(-6px 100% -6px 0); }
@container tpc-c (max-width: 599px){
  .tela-pc .nos{ flex-direction: column; align-items: stretch; }
  .tela-pc .no{ max-inline-size: none; }
  .tela-pc .lig{ flex: 0 0 2rem; inline-size: 1px; block-size: auto; clip-path: inset(0 -6px -6px -6px); }
  .tela-pc .lig::after{ right: auto; left: -3px; top: auto; bottom: -1px; border-inline-start: 3.5px solid transparent; border-inline-end: 3.5px solid transparent; border-block-start: 6px solid #8E9A93; border-block-end: 0; }
  .tela-pc.fluxo--anim .lig:not(.on){ clip-path: inset(0 -6px 100% -6px); }
}

/* simulações dentro da moldura: largura da janela, altura do conteúdo (a partir do tablet) */
@media (min-width: 601px){
  .tela-pc ar-sim-orcamento, .tela-pc ar-sim-hoje{ --sim-w: 100% !important; }
  .pagina--v2 .avisa .tela-pc ar-sim-hoje .hj-topline{ display: flex; }
}
@media (min-width: 861px){
  .tela-pc ar-sim-orcamento, .tela-pc ar-sim-hoje{ --sim-h: auto !important; }
}

/* celular: recorte legível, sem lateral, com a barra do nome da tela (texto mínimo de 12px) */
@media (max-width: 600px){
  .tela-pc__janela{ min-block-size: 0; }
  .tela-pc > .moldura__barra{ display: none; }
  .tela-pc .tela-pc__lat.ar-app{ display: none; }
  .tela-pc .ar-topo{ block-size: 52px; gap: 4px; padding: 0 8px; }
  .tela-pc .ar-topo__menu{ display: flex; flex: none; }
  .tela-pc__nome{ display: block; flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 600; color: var(--text); }
  .tela-pc .ar-topo__busca{ flex: 0 0 40px; inline-size: 40px; justify-content: center; padding: 0; border-color: transparent; background: transparent; }
  .tela-pc .ar-topo__ph, .tela-pc .ar-kbd, .tela-pc .ar-topo__icone, .tela-pc .ar-pres, .tela-pc .ar-flex1{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .tela-pc .lig, .tela-pc .no{ transition: none; }
}