/* =========================================================
   Agenda IA Med — folha de estilo única
   ========================================================= */

/* ---------- Fontes (self-hosted, sem chamada externa) ---------- */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600 800;font-display:swap;
  src:url("../fonts/montserrat-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:"Montserrat";font-style:normal;font-weight:600 800;font-display:swap;
  src:url("../fonts/montserrat-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}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("../fonts/inter-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:"Inter";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("../fonts/inter-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}

/* ---------- Tokens ---------- */
:root{
  --ink:#0E2A31;
  --ink-2:#163A43;
  --texto:#15343C;
  /* --suave e --teal-esc foram escurecidos 1 passo para fechar AA 4.5:1
     também sobre os fundos tingidos (--teal-claro é o mais claro deles). */
  --suave:#546C72;
  --teal:#00B6AE;
  --teal-esc:#00726D;
  --teal-claro:#E2F5F3;
  --teal-borda:#BFE9E5;
  --areia:#F8F6F1;
  --neblina:#F3F7F6;
  --papel:#FFFFFF;
  --linha:#DCE7E5;
  --linha-forte:#C3D5D2;
  --coral:#E4573D;
  /* Coral escurecido um passo para poder virar FUNDO de ícone (mesma lógica
     do comentário acima sobre --suave e --teal-esc). Com o --coral original
     o traço branco em cima fica em 3,67:1 e o quadradinho sai claro demais
     ao lado do teal-esc e do ink. #C2402A dá 5,17:1 contra o branco. */
  --coral-esc:#C2402A;

  --fonte-display:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fonte-texto:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --largura:1200px;
  --gutter:clamp(20px,5vw,44px);
  --raio:4px;
  --raio-g:10px;

  --alt-topo:74px;
  --sombra-s:0 1px 2px rgba(14,42,49,.05), 0 6px 18px -10px rgba(14,42,49,.18);
  --sombra-m:0 2px 4px rgba(14,42,49,.04), 0 18px 44px -22px rgba(14,42,49,.32);
  --transicao:200ms cubic-bezier(.22,.61,.36,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--alt-topo) + 18px)}
body{
  margin:0;
  background:var(--papel);
  color:var(--texto);
  font-family:var(--fonte-texto);
  font-size:clamp(16px,.42vw + 15px,17.5px);
  line-height:1.62;
  font-feature-settings:"cv05" 1,"ss01" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,picture{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--fonte-display);font-weight:700;letter-spacing:-.022em;line-height:1.08;margin:0 0 .5em;text-wrap:balance}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
em{font-style:normal;color:var(--teal-esc)}
::selection{background:var(--teal);color:#fff}
:focus-visible{outline:2.5px solid var(--teal-esc);outline-offset:3px;border-radius:2px}

.container{width:100%;max-width:var(--largura);margin-inline:auto;padding-inline:var(--gutter)}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:12px 18px}
.skip:focus{left:12px;top:12px}

/* ---------- Ícones ---------- */
.i{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 22px;
  border:1px solid transparent;border-radius:var(--raio);
  font-family:var(--fonte-display);font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  cursor:pointer;text-align:center;
  transition:background var(--transicao),color var(--transicao),border-color var(--transicao),box-shadow var(--transicao),transform var(--transicao);
}
.btn--g{min-height:56px;padding:15px 28px;font-size:1.02rem}
.btn--bloco{width:100%}
.btn--primario{background:var(--ink);color:#fff;box-shadow:var(--sombra-s)}
.btn--primario:hover{background:var(--teal-esc);box-shadow:var(--sombra-m)}
.btn--contorno{background:transparent;color:var(--ink);border-color:var(--linha-forte)}
.btn--contorno:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn--fantasma{background:var(--papel);color:var(--ink);border-color:var(--linha)}
.btn--fantasma:hover{border-color:var(--teal);color:var(--teal-esc)}
.btn--claro{background:#fff;color:var(--ink)}
.btn--claro:hover{background:var(--teal-claro)}
.btn:active{transform:translateY(1px)}

/* ---------- Rótulo de seção ---------- */
.rotulo{
  display:flex;align-items:center;gap:12px;
  margin:0 0 18px;
  font-family:var(--fonte-display);font-size:.76rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal-esc);
}
.rotulo .num{
  font-variant-numeric:tabular-nums;color:var(--suave);
  padding-right:12px;border-right:1px solid var(--linha-forte);
}
.rotulo--claro{color:#7FE3DC}
.rotulo--claro .num{color:rgba(255,255,255,.5);border-right-color:rgba(255,255,255,.24)}

/* ---------- Topo ---------- */
.topo{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color var(--transicao),box-shadow var(--transicao)}
.topo[data-fixo]{border-bottom-color:var(--linha);box-shadow:0 1px 20px -8px rgba(14,42,49,.2)}
.topo__barra{
  width:100%;max-width:var(--largura);margin-inline:auto;padding-inline:var(--gutter);
  min-height:var(--alt-topo);display:flex;align-items:center;gap:24px;
}
.marca{display:inline-flex;align-items:center;gap:11px;margin-right:auto}
.marca img{width:24px;height:auto}
.marca__nome{font-family:var(--fonte-display);font-weight:800;font-size:1.06rem;letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.marca__nome em{color:var(--teal-esc)}
.marca--claro .marca__nome{color:#fff}
.marca--claro .marca__nome em{color:#7FE3DC}

.menu{display:flex;align-items:center;gap:4px}
.menu a{
  position:relative;padding:9px 13px;border-radius:var(--raio);
  font-size:.94rem;font-weight:500;color:var(--suave);
  transition:color var(--transicao);
}
.menu a:hover{color:var(--ink)}
.menu a[aria-current="true"]{color:var(--ink);font-weight:600}
.menu a[aria-current="true"]::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;background:var(--teal);
}
.menu__cta{display:none}
.topo__cta{padding:11px 18px;min-height:44px;font-size:.9rem}
.hamburguer{display:none}

/* ---------- Hero ---------- */
/* overflow:clip é a rede de segurança do sangramento da cena: sem ele, o pull
   da direita geraria barra horizontal em qualquer largura em que a conta do
   vw errasse por causa da barra de rolagem. clip (e não hidden) porque hidden
   criaria um contexto de rolagem e mataria o position:sticky do topo. */
/* O padding virou variavel porque a cena precisa cancelar ele: no desktop a
   arte vai de topo a base da dobra, inclusive por cima do respiro da secao. */
.hero{
  --hero-pt:clamp(40px,4.4vw,62px);
  --hero-pb:clamp(44px,5vw,72px);
  position:relative;isolation:isolate;overflow:clip;
  padding:var(--hero-pt) 0 var(--hero-pb);background:var(--papel);
}

/* ---------- A CENA: arte + celular no mesmo container ----------
   ANTES a arte era `.hero__fundo`, IRMA da grade e absoluta na secao
   (`inset:0`), com a largura saindo de `50vw + largura/2 - gutter - 770px`; o
   celular era FILHO da grade, com margem negativa em px. Duas contas
   independentes, entao a posicao de um em relacao ao outro era efeito colateral
   e mudava a cada pixel. Medido: em 1100px a arte ficava em 814-1100 e o
   celular em 579-785, sem se tocarem; em 2560 ele comecava a -22% dela.

   AGORA os dois vivem na mesma caixa e a referencia de ambos e a LARGURA DO
   CELULAR (--chat): a arte comeca em 78% dela e o celular ocupa os 100%. A
   sobreposicao e sempre os mesmos 22% do celular, em qualquer largura, porque
   as duas bordas saem da mesma variavel. */
.hero__cena{
  /* 40cqw da 280px na cena de 1440px, que e a largura que o celular ja tinha.
     Piso e teto existem porque abaixo de 240px as bolhas quebram em 3 linhas e
     acima de 300px ele deixa de ser "o celular menorzinho" que a cliente pediu. */
  --chat:clamp(240px,40cqw,300px);
  position:relative;container-type:inline-size;
}
/* object-position 64%: mantem no quadro a parede com a logo e a tela da agenda.
   Quem perde pixel e a parede lisa da esquerda, que e onde o celular fica. */
.hero__arte{position:absolute;inset:0;overflow:hidden;border-radius:var(--raio-g);background:var(--neblina)}
.hero__arte img{width:100%;height:100%;object-fit:cover;object-position:64% 50%}
/* A coluna de texto ficou mais larga e o h1 menor de proposito: com o h1 antigo
   (4,05rem numa coluna de 561px) o titulo caia em 5 linhas, a dobra passava de
   1100px de altura e a arte, que e 2,11:1, precisava de um zoom que so mostrava
   o vaso da direita. Em ~700px de altura a arte cabe quase inteira. */
/* 1.16/0.84 e nao 1.24/0.76: a coluna da direita comeca ~50px antes, e e isso
   que tira o celular de cima da tela que a arte ja mostra. O Tai apontou a
   conversa "por cima da imagem" no print de 06/08. */
.hero__grade{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:clamp(28px,3.4vw,50px);align-items:center}
.hero h1{font-size:clamp(2.15rem,3.4vw,3.4rem);letter-spacing:-.032em;margin-bottom:20px;color:var(--ink)}
.hero__sub{max-width:48ch;font-size:clamp(1.02rem,.42vw + .95rem,1.14rem);color:var(--suave);margin-bottom:28px}
.hero__acoes{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:38px}
/* Os dois CTAs não estavam empilhados por regra: eles QUEBRAVAM. A cliente pediu
   em 05/08 que ficassem lado a lado, então o botão perde largura, nunca altura:
   min-height e padding vertical ficam intactos.
   Reapertado em 06/08: com os rótulos da proposta original ("Quero conhecer a
   Agenda IA Med" + "Agendar uma apresentação") os dois somavam 641px numa coluna
   de 616px. Com 12px de padding e 0,92rem somam 586px e ficam lado a lado em
   toda a faixa de 2 colunas, que comeca em 1081px.
   Escopado ao hero para não atingir o .btn--g do formulário. */
.hero__acoes{gap:8px}
/* Os dois botoes tem que caber nos 515px do texto, senao empilham. */
.hero__acoes .btn--g{padding-inline:5px;font-size:.83rem}

/* DESKTOP. O sangramento da cena ate a borda direita da janela e a distancia
   entre o fim do conteudo do container e a borda: (100vw - container) / 2 mais
   o gutter. O overflow:clip do .hero e a rede se essa conta errar por causa da
   barra de rolagem. */
@media (min-width:1081px){
  /* Coluna de texto com largura FIXA de 555px, e nao mais uma fracao.

     O que travava o chat mais a esquerda nao era o desenho, era o trio
     "Personalizada / Sem compromisso / 20 minutos": ele ocupa a largura toda da
     coluna e divide a mesma faixa vertical do chat, entao a borda direita dele
     era o limite. Medido: sobravam 50px de folga em 1920 e 23px em 1150.
     Com a coluna fixa em 555px o chat comeca sempre 20px depois dela, em
     qualquer janela, e isso o joga ~95px mais para a esquerda em tela cheia. */
  /* stretch, e nao center: e o que faz a cena ter a altura da dobra inteira,
     como a arte tinha quando era fundo absoluto da secao. Sem isto a foto vira
     um cartao flutuando com respiro branco em cima e embaixo, perde a escala e
     deixa de ser o ambiente da recepcao. */
  .hero__grade{grid-template-columns:555px minmax(0,1fr);gap:20px;align-items:stretch}
  /* A coluna continua com 555px, mas o CONTEUDO para 40px antes: sem isto, em
     telas largas as linhas ficam compridas e o h1 bate no celular (visto em
     1900px, "ninguem respondeu" encostava nele). */
  .hero__texto{max-width:515px;align-self:center}
  .hero{min-height:clamp(560px,42vw,680px)}

  .hero__cena{
    /* cancela o respiro vertical da secao: a foto vai de topo a base */
    margin-block:calc(-1 * var(--hero-pt)) calc(-1 * var(--hero-pb));
    margin-right:calc(-1 * ((100vw - min(100vw, var(--largura))) / 2 + var(--gutter)));
  }
  .hero__arte{border-radius:var(--raio-g) 0 0 var(--raio-g)}
  /* A borda esquerda da foto sai da largura do celular, nao de uma conta em vw:
     e isto que trava a composicao. 78% deixa 22% do celular sobreposto a foto,
     que e a mesma mordida em qualquer largura. */
  .hero__arte{left:calc(var(--chat) * .78)}
  /* .hero__cena na frente de proposito: a regra base .hero__demo aparece DEPOIS
     desta no arquivo e, com a mesma especificidade, ela venceria e apagaria o
     position:absolute.
     inset vertical em vez de translate: o app.js aplica transform no
     .hero__demo na revelacao ao rolar, e um translateY(-50%) aqui seria apagado
     quando ela terminasse. */
  .hero__cena .hero__demo{
    position:absolute;left:0;top:0;bottom:0;width:var(--chat);
    justify-content:center;align-items:stretch;
  }
}

.hero__provas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;border-top:1px solid var(--linha)}
.hero__provas > div{padding:18px 20px 0 0}
.hero__provas > div + div{padding-left:22px;border-left:1px solid var(--linha)}
.hero__provas dt{font-family:var(--fonte-display);font-weight:700;font-size:1.02rem;color:var(--ink);margin-bottom:3px}
.hero__provas dd{margin:0;font-size:.87rem;line-height:1.45;color:var(--suave)}

/* ---------- Mock de conversa, na frente da arte ----------
   A cena montada (foto + monitor + celular em camadas) saiu na revisao de
   06/08: a cliente leu aquilo como "uma arte sobreposta na outra". Agora a arte
   e uma so, e o unico objeto na frente dela e o celular.
   z-index para ficar na frente da arte, que e absoluta na mesma caixa. */
.hero__demo{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px}
/* Teto de altura com ROLAGEM, nunca com corte. As 6 bolhas continuam no DOM e
   alcançáveis: o app.js já trava a altura e liga overflow-y:auto sozinho
   (app.js L421-423) e rola conforme as mensagens chegam (L469). Sem JS, ou com
   movimento reduzido, a caixa fica com a barra fina e o visitante rola.
   Trocar isto por `height` sem overflow esconderia 3 das 6 mensagens. */
/* Um pouco maior e mais alto, pedido do Tai no video de 20h48: "aumentar so um
   pouco o tamanho dele, um pouquinho aqui em cima e um pouquinho aqui embaixo".
   Como a coluna e centrada verticalmente, crescer a conversa cresce nos dois
   sentidos. Era 300px de largura e 268-348 de altura. */
/* O celular ocupa a largura inteira da coluna dele, e quem manda nessa largura
   e o --chat da cena. Nao usar vw aqui: era o que fazia o celular crescer por
   conta propria enquanto a foto crescia por outra conta. */
.hero__demo .fone{width:100%}
/* Mais alto, pedido do Tai: "aumentar um pouco a parte de cima e de baixo".
   A coluna e centrada verticalmente, entao a conversa cresce para os dois lados. */
.hero__demo .fone__conversa{min-height:0;max-height:clamp(300px,26vw,392px);overflow-y:auto;overscroll-behavior:contain}
.hero__demo .fone__conversa::-webkit-scrollbar{width:5px}
.hero__demo .fone__conversa::-webkit-scrollbar-thumb{background:rgba(14,42,49,.22);border-radius:3px}
.hero__demo .fone__conversa{scrollbar-width:thin;scrollbar-color:rgba(14,42,49,.22) transparent}
.hero__demo .bolha{font-size:.8rem;padding:8px 11px;max-width:89%}
.fone{
  width:min(340px,100%);
  background:var(--papel);
  border:1px solid var(--linha);
  border-radius:22px;
  box-shadow:var(--sombra-m);
  overflow:hidden;
}
.fone__topo{display:flex;align-items:center;gap:11px;padding:13px 16px;background:var(--ink);color:#fff}
.fone__topo img{width:14px}
.fone__topo div{margin-right:auto;line-height:1.25}
.fone__topo strong{display:block;font-family:var(--fonte-display);font-size:.9rem;font-weight:700}
.fone__topo span{font-size:.74rem;color:#7FE3DC}
.fone__topo .i{width:16px;height:16px;opacity:.5}
.fone__conversa{
  min-height:326px;padding:16px 14px 20px;
  display:flex;flex-direction:column;gap:9px;
  background:#EFF3F1;
  background-image:radial-gradient(rgba(14,42,49,.045) 1px,transparent 1px);
  background-size:16px 16px;
}
.fone__dia{
  align-self:center;margin:0 0 4px;padding:4px 12px;
  background:rgba(255,255,255,.9);border-radius:999px;
  font-size:.7rem;color:var(--suave);letter-spacing:.02em;
}
.bolha{
  max-width:84%;padding:9px 13px;border-radius:12px;
  font-size:.88rem;line-height:1.45;box-shadow:0 1px 1px rgba(14,42,49,.07);
  animation:surge 260ms ease-out both;
}
.bolha--paciente{align-self:flex-start;background:#fff;border-top-left-radius:3px}
.bolha--ia{align-self:flex-end;background:#D8F4E9;border-top-right-radius:3px}
.bolha b{font-weight:600}
.bolha .hora{display:block;margin-top:3px;font-size:.66rem;color:var(--suave);text-align:right}
.bolha--digitando{display:inline-flex;gap:4px;align-items:center;padding:12px 15px}
.bolha--digitando i{width:6px;height:6px;border-radius:50%;background:var(--suave);opacity:.5;animation:pulsar 1.1s infinite}
.bolha--digitando i:nth-child(2){animation-delay:.16s}
.bolha--digitando i:nth-child(3){animation-delay:.32s}
@keyframes surge{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pulsar{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:.9;transform:translateY(-3px)}}
/* A nota fica EM CIMA da arte, entao ela carrega o proprio fundo branco: sem
   isso o cinza --suave cai para 3,4:1 quando a arte escurece atras. */
.fone__nota{
  margin:0;font-size:.78rem;color:var(--suave);text-align:center;max-width:340px;line-height:1.5;
  background:rgba(255,255,255,.96);padding:9px 13px;border-radius:var(--raio-g);
}
.fone__nota a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.fone__nota a:hover{text-decoration:none}

/* ---------- Faixa ---------- */
.faixa{background:var(--ink);color:#fff}
.faixa__grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding-block:0}
.faixa__grade > div{padding:32px 30px 32px 0}
.faixa__grade > div + div{padding-left:32px;border-left:1px solid rgba(255,255,255,.13)}
.faixa strong{display:block;font-family:var(--fonte-display);font-weight:700;font-size:1.06rem;margin-bottom:6px}
.faixa span{color:#B9D2D2;font-size:.92rem;line-height:1.5}

/* ---------- Seções ---------- */
.secao{padding-block:clamp(52px,5.4vw,82px)}
.secao--claro{background:var(--neblina)}
.secao--tom{background:var(--areia)}
.secao--escuro{background:var(--ink);color:#fff}
.secao--escuro h2{color:#fff}

/* Cabeçalho EMPILHADO: rótulo, título e chamada, um embaixo do outro.

   Era em duas colunas, título à esquerda e chamada à direita, e as duas
   tentativas de alinhar aquilo falharam pelo mesmo motivo: os dois blocos têm
   alturas muito diferentes (na seção 03 o título tem 5 linhas e a chamada 4,
   numa fonte três vezes menor), então sempre sobra um buraco na coluna da
   direita. Com align-items:end o buraco ficava em cima, com start ficava
   embaixo. O Tai apontou os dois, e ainda leu o resultado como "duas coisas".
   Empilhado não existe coluna vazia, e é assim que está na proposta original
   da cliente. A chamada subiu de 1,14rem para 1,24rem, que foi o pedido dele:
   "poderia aumentar um pouco mais esse texto". */
.cabecalho{margin-bottom:clamp(30px,3.2vw,46px)}
.cabecalho h1,
.cabecalho h2{margin-bottom:18px;max-width:28ch;font-size:clamp(1.8rem,3.1vw,3rem);color:var(--ink)}
.cabecalho .chamada{margin:0;max-width:62ch;font-size:clamp(1.06rem,.5vw + .96rem,1.24rem);color:var(--suave)}
.cabecalho .btn{margin-top:26px}

/* O cabecalho dos Planos era o unico centralizado da pagina, e o Tai apontou a
   faixa branca dos dois lados dele. Alinhado a esquerda como todos os outros
   nao existe essa faixa, e a pagina fica com um ritmo so. */
.cabecalho--centro h2{max-width:28ch}

/* no FAQ o cabeçalho vive numa coluna estreita: o título usa a largura toda */
.duvidas .cabecalho h2{max-width:none;margin-bottom:16px}

/* precisa de especificidade maior que .cabecalho h2, senão o título
   da seção escura fica pintado na cor do próprio fundo (contraste 1:1). */
.secao--escuro .cabecalho h2{color:#fff}
.secao--escuro .cabecalho .chamada{color:#D5E8E7}

/* ---------- O desafio ---------- */
.desafio{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(18px,2.4vw,30px);align-items:stretch}
.painel{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio-g);padding:clamp(26px,3vw,40px)}
.painel h3{font-size:clamp(1.28rem,1.6vw,1.62rem);color:var(--ink);margin-bottom:20px}
.painel p{color:var(--suave)}
.painel__assinatura{margin-top:22px;padding-top:20px;border-top:1px solid var(--linha);color:var(--ink)!important;font-weight:600}
.painel--escuro{background:var(--ink);border-color:var(--ink);color:#fff;display:flex;flex-direction:column}
.painel--escuro h3{color:#fff}
/* O stretch iguala as caixas, mas a sobra de ~22px (47px acima de 1521px)
   viraria buraco no meio do card escuro. Ancorada na base, ela vira respiro
   do CTA: o botao termina no mesmo pixel que a .painel__assinatura ao lado.
   align-self e obrigatorio: sem ele o flex estica o botao de 319.8 para 431.9px. */
.painel--escuro > .btn{align-self:flex-start;margin-top:auto}
.lista-limpa{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:0}
.lista-limpa li{padding:22px 0 22px 30px;border-top:1px solid rgba(255,255,255,.14);position:relative;color:#CFE3E3;font-size:.98rem}
.lista-limpa li::before{
  content:"";position:absolute;left:2px;top:30px;width:12px;height:2px;background:var(--coral);
}

/* ---------- Calculadora do custo das faltas ---------- */
.custo{margin:24px 0 4px;padding:22px;border:1px solid var(--linha);border-radius:var(--raio-g);background:var(--teal-claro)}
/* A chamada do simulador mora DENTRO da caixa: no texto do painel ela era
   invencao nossa, e a cliente pediu o texto da proposta original de volta. */
.custo__intro{margin:0 0 14px!important;font-size:.92rem;font-weight:600;color:var(--ink)!important}
.custo__campos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.custo__campo label{display:block;margin-bottom:6px;font-size:.86rem;color:var(--suave);line-height:1.35}
.custo__campo input{width:100%;height:44px;padding:0 12px;border:1px solid var(--linha-forte);border-radius:var(--raio);background:var(--papel);color:var(--ink);font-family:var(--fonte-display);font-weight:700;font-variant-numeric:tabular-nums;transition:border-color var(--transicao),box-shadow var(--transicao)}
/* um rótulo ocupa 1 linha e o outro 2: sem isto os inputs ficam 18px
   desnivelados. E o "R$" no fluxo roubava 28px de largura de um só campo. */
.custo__campo{display:flex;flex-direction:column}
.custo__campo > .custo__entrada,
.custo__campo > input{margin-top:auto}
.custo__entrada{position:relative;display:block}
.custo__entrada span{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:.95rem;color:var(--suave);pointer-events:none}
.custo__entrada input{padding-left:34px}
.custo__campo input:focus{outline:none;border-color:var(--teal-esc);box-shadow:0 0 0 3px rgba(0,114,109,.20)}
.custo__campo input:focus-visible{outline:2.5px solid var(--teal-esc);outline-offset:2px}
.custo__saida{margin:18px 0 8px!important;font-size:1.02rem;color:var(--ink)!important}
.custo__saida strong{font-family:var(--fonte-display);font-size:1.5rem;color:var(--teal-esc)}
.custo__nota{margin:0 0 8px!important;font-size:.9rem}
.custo__aviso{margin:0!important;font-size:.8rem}

/* ---------- Cartões ---------- */
.cartoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.cartao{padding:clamp(24px,2.4vw,32px);background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio-g);transition:border-color var(--transicao),box-shadow var(--transicao)}
.cartao:hover{border-color:var(--teal-borda);box-shadow:var(--sombra-s)}
.cartao__icone{display:grid;place-items:center;width:46px;height:46px;margin-bottom:22px;border-radius:var(--raio);background:var(--teal-claro);color:var(--teal-esc)}
.cartao__icone .i{width:22px;height:22px;stroke-width:1.6}
.cartao h3{font-size:1.16rem;color:var(--ink);margin-bottom:10px}
.cartao p{color:var(--suave);font-size:.96rem;margin:0}

/* ---------- Ícones com cor: SÓ a seção 02 ----------
   A seção 07 (#limites) reusa .cartao e .cartao__icone. Por isso o
   modificador mora na GRADE (.cartoes--acento) e não em .cartao: assim
   nada vaza pro outro bloco e o formato do cartão fica intocado.
   Frio -> profundo -> quente. Dois acentos e um neutro, não três acentos:
   é o que segura a coisa longe do arco-íris.
   Traço branco (via stroke:currentColor do .i, L83) sobre cada fundo:
     #00726D 5,79:1 · #0E2A31 15,06:1 · #C2402A 5,17:1  (AA componente 3:1)
   Clarear pra acender NÃO é opção: --teal #00B6AE com branco dá 2,53:1.
   O --chip na própria grade é rede de segurança: se um dia entrar um 4º
   cartão, ele herda o teal em vez de ficar com fundo transparente e traço
   branco invisível. */
.cartoes--acento{--chip:var(--teal-esc);--chip-halo:rgba(0,114,109,.20)}
.cartoes--acento .cartao:nth-child(1){--chip:var(--teal-esc);--chip-halo:rgba(0,114,109,.20)}
.cartoes--acento .cartao:nth-child(2){--chip:var(--ink);--chip-halo:rgba(14,42,49,.18)}
.cartoes--acento .cartao:nth-child(3){--chip:var(--coral-esc);--chip-halo:rgba(194,64,42,.22)}
.cartoes--acento .cartao__icone{
  background:var(--chip);color:#fff;
  transition:background var(--transicao),color var(--transicao),
             transform var(--transicao),box-shadow var(--transicao);
}
/* Traço branco sobre cor cheia parece mais fino do que é. 1.8 é o mesmo
   peso do botão flutuante (L709), que é o outro ícone branco sobre cor
   cheia da página. */
.cartoes--acento .cartao__icone .i{stroke-width:1.8}

/* ---------- Dados / prova ---------- */
.dados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.dado{margin:0;padding:clamp(24px,2.4vw,32px);background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio-g);display:flex;flex-direction:column;gap:14px}
.dado__num{
  font-family:var(--fonte-display);font-weight:800;
  font-size:clamp(2.6rem,4.4vw,3.6rem);line-height:1;letter-spacing:-.04em;
  color:var(--teal-esc);font-variant-numeric:tabular-nums;
}
.dado figcaption p{margin:0 0 10px;color:var(--texto);font-size:1rem}
.dado cite{font-style:normal;font-size:.8rem;color:var(--suave);letter-spacing:.01em}
.dados__fecho{
  margin-top:clamp(24px,3vw,36px);padding:22px 26px;
  background:var(--ink);color:#CFE3E3;border-radius:var(--raio-g);
  font-size:clamp(1rem,.5vw + .9rem,1.16rem);
}
.dados__fecho strong{color:#fff;font-weight:600}

/* ---------- Solução ---------- */
/* SEM FOTO, como na proposta original da cliente. Os quatro itens viram uma
   grade 2x2 e ocupam a largura toda, em vez de uma lista numa coluna so com
   metade da secao vazia ao lado. Quando a foto que ela prometeu chegar, basta
   devolver a <figure>, voltar .solucao para duas colunas e .criterios para uma.
   O numerador e as bordas continuam iguais, e a secao segue com a mesma cara
   que ela ja tinha aprovado. */
.solucao{display:block}
.criterios{
  list-style:none;margin:0;padding:0;counter-reset:crit;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(28px,4vw,64px);
}
.criterios li{position:relative;padding:20px 0 20px 62px;border-top:1px solid var(--linha-forte)}
/* numa grade de 2 colunas quem fecha a caixa sao os DOIS ultimos, nao o ultimo */
.criterios li:nth-last-child(-n+2){border-bottom:1px solid var(--linha-forte)}
.criterios li::before{
  counter-increment:crit;content:counter(crit,decimal-leading-zero);
  position:absolute;left:0;top:26px;
  font-family:var(--fonte-display);font-weight:700;font-size:.86rem;
  color:var(--teal-esc);font-variant-numeric:tabular-nums;letter-spacing:.06em;
}
.criterios h3{font-size:1.14rem;color:var(--ink);margin-bottom:7px}
.criterios p{margin:0;color:var(--suave);font-size:.97rem}

/* ---------- Passos ---------- */
.passos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:passo}
.passo{position:relative;padding:0 26px 0 0;counter-increment:passo}
.passo + .passo{padding-left:28px;border-left:1px solid var(--linha)}
.passo::before{
  content:counter(passo,decimal-leading-zero);
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;margin-bottom:22px;
  border:1px solid var(--teal-borda);border-radius:50%;background:var(--teal-claro);
  font-family:var(--fonte-display);font-weight:700;font-size:.9rem;color:var(--teal-esc);
  font-variant-numeric:tabular-nums;
}
.passo h3{font-size:1.1rem;color:var(--ink);margin-bottom:9px}
.passo p{margin:0;color:var(--suave);font-size:.95rem}

/* ---------- Antes / Depois ---------- */
/* minmax(0,1fr) nos tres: 1fr puro nasce com min-width:auto e o item mais longo
   ("Medico focado exclusivamente nos pacientes") estouraria a coluna. */
.comparativo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);align-items:stretch}
.coluna{padding:clamp(24px,2.6vw,34px);border-radius:var(--raio-g);border:1px solid var(--linha);background:var(--papel);display:flex;flex-direction:column}
.coluna__tag{
  align-self:flex-start;margin-bottom:16px;padding:5px 12px;border-radius:999px;
  font-family:var(--fonte-display);font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.coluna h3{font-size:1.14rem;color:var(--ink);margin-bottom:14px}
.coluna--depois h3{color:#fff}
.coluna__intro{margin:0 0 14px;color:var(--suave);font-size:.97rem}
.coluna--antes{background:var(--papel)}
.coluna--antes .coluna__tag{background:#FBEAE6;color:#B23F27}
.coluna--depois{background:var(--ink);border-color:var(--ink);color:#fff}
.coluna--depois .coluna__tag{background:rgba(127,227,220,.16);color:#7FE3DC}
.coluna ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.coluna li{position:relative;padding:13px 0 13px 30px;border-top:1px solid var(--linha);font-size:.98rem}
.coluna li:last-child{border-bottom:1px solid var(--linha)}
.coluna--antes li{color:var(--suave)}
.coluna--antes li::before{
  content:"";position:absolute;left:4px;top:20px;width:11px;height:11px;
  background:linear-gradient(45deg,transparent 44%,var(--coral) 44% 56%,transparent 56%),
             linear-gradient(-45deg,transparent 44%,var(--coral) 44% 56%,transparent 56%);
}
.coluna--depois li{color:#D5E8E7;border-color:rgba(255,255,255,.14)}
.coluna--depois li:last-child{border-bottom-color:rgba(255,255,255,.14)}
.coluna--depois li::before{
  content:"";position:absolute;left:3px;top:19px;width:13px;height:8px;
  border-left:2px solid #4ED6C9;border-bottom:2px solid #4ED6C9;transform:rotate(-45deg);
}
/* auto e nao 26px: o botao ancora na base e os tres quadros terminam juntos,
   mesmo com a coluna do Diferencial tendo um paragrafo a mais. */
.coluna--depois .btn{margin-top:auto;align-self:stretch}
.coluna--depois > ul{margin-bottom:26px}

/* Terceiro quadro: Diferencial. Claro como o Antes, mas com o visto do Depois,
   porque a lista dele e de ganhos e nao de dores. */
.coluna--extra .coluna__tag{background:var(--teal-claro);color:var(--teal-esc)}
.coluna--extra li{color:var(--suave)}
.coluna--extra li::before{
  content:"";position:absolute;left:3px;top:19px;width:13px;height:8px;
  border-left:2px solid var(--teal-esc);border-bottom:2px solid var(--teal-esc);transform:rotate(-45deg);
}

/* ---------- Agenda enchendo ---------- */
.agenda{
  margin-top:clamp(20px,2.6vw,32px);
  padding:clamp(22px,2.6vw,34px);
  background:var(--papel);
  border:1px solid var(--linha);
  border-radius:var(--raio-g);
}
.agenda__topo{max-width:62ch;margin-bottom:26px}
.agenda__topo h3{font-size:clamp(1.16rem,1.5vw,1.42rem);color:var(--ink);margin-bottom:8px}
.agenda__aviso{margin:0;font-size:.88rem;color:var(--suave)}
.agenda__aviso strong{color:var(--texto);font-weight:600}

.agenda__grade{
  display:grid;
  grid-template-columns:auto repeat(5,minmax(0,1fr));
  gap:5px;
}
.agenda__canto{display:block}
.agenda__dia{
  padding-bottom:8px;text-align:center;
  font-family:var(--fonte-display);font-size:.74rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--suave);
}
.agenda__hora{
  display:flex;align-items:center;justify-content:flex-end;
  padding-right:11px;
  font-size:.72rem;color:var(--suave);font-variant-numeric:tabular-nums;
}

.slot{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  height:clamp(34px,4.4vw,44px);
  border:1px dashed var(--linha-forte);
  border-radius:4px;
  background:transparent;
}
.slot--ocupado{
  border:1px solid var(--linha);
  background:var(--neblina);
}
.slot--ocupado::before{
  content:"";width:34%;height:2px;border-radius:2px;background:var(--linha-forte);
}
.slot--novo{
  border:1px solid var(--teal-esc);
  background:var(--teal-esc);
  box-shadow:0 6px 16px -8px rgba(0,128,122,.7);
  animation:encaixa 420ms cubic-bezier(.2,.9,.3,1.25) both;
}
.slot--novo::after{
  content:attr(data-em);
  font-family:var(--fonte-display);font-weight:700;
  font-size:clamp(.6rem,.85vw,.72rem);
  color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
/* Anel de destaque via box-shadow: não entra no cálculo de layout,
   então não estoura a grade na última coluna (o inset negativo estourava). */
.slot--novo::before{
  content:"";position:absolute;inset:0;border-radius:4px;
  animation:anel 760ms ease-out both;
}
@keyframes encaixa{
  0%{opacity:0;transform:scale(.72)}
  60%{opacity:1;transform:scale(1.04)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes anel{
  0%{box-shadow:0 0 0 0 rgba(0,182,174,.85)}
  100%{box-shadow:0 0 0 10px rgba(0,182,174,0)}
}

.agenda__pe{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 26px;margin-top:24px;padding-top:20px;border-top:1px solid var(--linha);
}
.agenda__resumo{margin:0;font-size:1rem;color:var(--suave);max-width:46ch}
.agenda__resumo strong{color:var(--ink);font-weight:700}
.agenda__resumo [data-agenda-num]{
  font-family:var(--fonte-display);font-size:1.28rem;color:var(--teal-esc);
  font-variant-numeric:tabular-nums;
}
.agenda__legenda{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none}
.agenda__legenda li{display:inline-flex;align-items:center;gap:7px;font-size:.83rem;color:var(--suave)}
.chave{width:15px;height:15px;border-radius:3px;flex:0 0 15px}
.chave--ocupado{border:1px solid var(--linha);background:var(--neblina)}
.chave--novo{border:1px solid var(--teal-esc);background:var(--teal-esc)}
.chave--livre{border:1px dashed var(--linha-forte)}

/* ---------- Calculadora de plano ---------- */
.calculadora{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 20px;
  max-width:660px;margin:0 auto clamp(30px,3.5vw,46px);
  padding:18px 24px;background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio-g);
}
.calculadora label{font-size:.94rem;color:var(--suave)}
.calculadora__campo{display:inline-flex;align-items:center;border:1px solid var(--linha-forte);border-radius:var(--raio);overflow:hidden}
.calculadora__campo button{
  width:40px;height:42px;border:0;background:var(--papel);color:var(--ink);
  font-size:1.15rem;line-height:1;cursor:pointer;transition:background var(--transicao);
  display:inline-flex;align-items:center;justify-content:center;
}
.calculadora__campo button .i{width:17px;height:17px;stroke-width:2.2}
.calculadora__campo button:hover{background:var(--teal-claro)}
.calculadora__campo button:focus-visible{outline-offset:-3px}  /* o overflow:hidden do pai recorta o anel */
.calculadora__campo button:disabled{opacity:.35;cursor:not-allowed}
.calculadora__campo output{
  min-width:52px;text-align:center;font-family:var(--fonte-display);font-weight:700;font-size:1.05rem;
  font-variant-numeric:tabular-nums;border-inline:1px solid var(--linha-forte);line-height:42px;
}
.calculadora__dica{margin:0;width:100%;text-align:center;font-size:.94rem;color:var(--suave)}
.calculadora__dica strong{color:var(--teal-esc)}

/* ---------- Planos ---------- */
.planos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);align-items:stretch}
.plano{
  display:flex;flex-direction:column;
  padding:clamp(26px,2.6vw,34px);
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio-g);
  --plano-elevacao:0px;--plano-escala:1;--plano-anel:0 0 transparent;--plano-sombra:0 0 transparent;transform:translateY(var(--plano-elevacao)) scale(var(--plano-escala));box-shadow:var(--plano-anel),var(--plano-sombra);transition:border-color var(--transicao),box-shadow var(--transicao),transform var(--transicao);
}
.plano--destaque{border-color:var(--teal-esc);--plano-escala:1.03;--plano-sombra:0 3px 6px rgba(14,42,49,.05),0 30px 64px -26px rgba(14,42,49,.42)}
.plano[data-sugerido]{border-color:var(--teal-esc);--plano-anel:0 0 0 3px var(--teal-claro),0 0 0 5px var(--teal-esc)}
.plano__tag{
  align-self:flex-start;margin-bottom:16px;padding:5px 12px;border-radius:999px;
  background:var(--neblina);color:var(--suave);
  font-family:var(--fonte-display);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.plano__tag--forte{background:var(--teal-esc);color:#fff}
.plano h3{font-size:1.6rem;color:var(--ink);margin-bottom:10px}
.plano__resumo{color:var(--suave);font-size:.94rem;margin-bottom:0}
/* Alinha as 4 faixas dos 3 cards (resumo, preço, itens, botão) na mesma linha.
   Antes, o min-height era uma muleta que nunca batia com o texto real, e o
   margin-top:auto do botão empurrava o CTA do Growth ~100px pra cima, porque
   ali existe a .plano__extra depois dele.
   O @supports é obrigatório: sem subgrid, o grid-row:span 5 quebraria a coluna. */
@supports (grid-template-rows:subgrid){
  @media (min-width:1081px){
    .planos{grid-template-rows:repeat(5,auto)}
    .plano{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
    .plano > header{grid-row:1}
    .plano__preco{grid-row:2}
    .plano__itens{grid-row:3}
    .plano .btn{grid-row:4;align-self:end;margin-top:0}
    .plano__extra{grid-row:5}
  }
}
.plano__preco{
  display:flex;align-items:baseline;gap:5px;margin:24px 0 6px;padding-top:22px;border-top:1px solid var(--linha);
  font-family:var(--fonte-display);color:var(--ink);
}
.plano__preco strong{font-size:clamp(2.4rem,3.4vw,3rem);font-weight:800;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.plano__moeda{font-size:1.1rem;font-weight:700;color:var(--suave)}
.plano__ciclo{font-size:.98rem;font-weight:600;color:var(--suave)}
.plano__preco--consulta strong{font-size:clamp(1.7rem,2.4vw,2.15rem)}
.plano__itens{list-style:none;margin:22px 0 28px;padding:0;display:grid;gap:11px}
.plano__itens li{position:relative;padding-left:28px;font-size:.95rem;color:var(--texto)}
.plano__itens li::before{
  content:"";position:absolute;left:2px;top:7px;width:12px;height:7px;
  border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg);
}
.plano .btn{margin-top:auto;width:100%}/* CTA do Growth solido na cor da marca. Escopado de proposito: os outros btn--primario da pagina (topo, hero, faixa, submit) continuam ink. */.plano--destaque .btn--primario{background:var(--teal-esc);border-color:var(--teal-esc)}.plano--destaque .btn--primario:hover{background:var(--ink);border-color:var(--ink)}
.plano__extra{margin:16px 0 0;font-size:.86rem;color:var(--suave);line-height:1.5}
.planos__notas{max-width:760px;margin:clamp(30px,3.5vw,44px) auto 0;text-align:center}
.planos__notas p{font-size:.94rem;color:var(--suave)}
.planos__implantacao{
  margin-top:18px;padding:20px 24px;text-align:left;
  background:var(--papel);border:1px solid var(--linha);border-left:3px solid var(--teal);border-radius:var(--raio);
}
.planos__implantacao strong{color:var(--ink)}

/* ---------- Resultado ---------- */
/* Colunas iguais e esticadas: as duas caixas comecam e terminam no mesmo pixel. */
.resultado{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,30px);align-items:stretch}
.resultado__caixa{
  margin:0;padding:clamp(26px,3vw,36px);display:flex;flex-direction:column;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--raio-g);
}
.resultado__lista{font-size:clamp(1.08rem,1.35vw,1.34rem);line-height:1.45;color:#D5E8E7;margin:0}
.resultado__pe{
  margin:auto 0 0;padding-top:20px;font-size:.82rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#7FE3DC;
}
.resultado__frase p{
  font-family:var(--fonte-display);font-weight:700;font-size:clamp(1.24rem,1.9vw,1.72rem);
  line-height:1.2;letter-spacing:-.025em;color:#fff;margin:0 0 22px;
}
.resultado__frase .btn{width:auto;align-self:flex-start;margin-top:auto}

/* ---------- FAQ ---------- */
.duvidas{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,4vw,64px);align-items:start}
.duvidas .cabecalho{margin-bottom:0;position:sticky;top:calc(var(--alt-topo) + 24px)}
.acordeao{border-top:1px solid var(--linha-forte)}
.item{border-bottom:1px solid var(--linha-forte)}
.item summary{
  display:flex;align-items:center;gap:18px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-family:var(--fonte-display);font-weight:600;font-size:1.05rem;color:var(--ink);
  transition:color var(--transicao);
}
.item summary::-webkit-details-marker{display:none}
.item summary span{flex:1}
.item summary:hover{color:var(--teal-esc)}
.item summary i{
  position:relative;flex:0 0 20px;width:20px;height:20px;
  transition:transform var(--transicao);
}
.item summary i::before,.item summary i::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--teal-esc);border-radius:2px;
  transform:translate(-50%,-50%);
}
.item summary i::before{width:14px;height:2px}
.item summary i::after{width:2px;height:14px;transition:opacity var(--transicao),transform var(--transicao)}
.item[open] summary i::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg)}
.item__corpo{padding:0 44px 26px 0}
.item__corpo p{margin:0;color:var(--suave);font-size:.98rem}

/* ---------- Fechamento + formulário ---------- */
/* A coluna de texto mede 428px e o formulario 718px: sobravam 290px de branco
   embaixo do texto, que foi o ultimo ponto do video de 06/08. Duas medidas
   juntas: a coluna do texto ficou mais estreita (o texto quebra em mais linhas
   e cresce) e o formulario mais largo (encolhe), e o que ainda sobra vira
   respiro distribuido entre os blocos, com stretch + space-between. */
.fechamento{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:stretch}
.fechamento__texto{display:flex;flex-direction:column;justify-content:space-between}
.fechamento__reforco{margin-top:20px;font-weight:600;color:var(--ink)}
.fechamento__itens{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:12px}
.fechamento__itens li{position:relative;padding-left:28px;color:var(--texto);font-size:.98rem}
.fechamento__itens li::before{
  content:"";position:absolute;left:2px;top:8px;width:12px;height:7px;
  border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg);
}

.formulario{
  padding:clamp(26px,3vw,38px);
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio-g);box-shadow:var(--sombra-m);
}
.formulario h3{font-size:1.4rem;color:var(--ink);margin-bottom:6px}
.formulario__intro{font-size:.94rem;color:var(--suave);margin-bottom:24px}
.campo{margin-bottom:16px}
.campo label{display:block;margin-bottom:6px;font-size:.86rem;font-weight:600;color:var(--ink)}
.campo label span{color:#B23F27}   /* --coral puro não fecha 4.5:1 em texto */
.campo input[type=text],.campo select{
  width:100%;min-height:48px;padding:11px 14px;
  background:var(--papel);border:1px solid var(--linha-forte);border-radius:var(--raio);
  font-size:1rem;transition:border-color var(--transicao),box-shadow var(--transicao);
}
.campo select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A7379' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:17px;padding-right:38px;
  text-overflow:ellipsis}
/* :focus some com outline:none; o :focus-visible devolve o anel — sem ele o
   checkbox de consentimento ficava com indicador de foco de 1,13:1 (falha A). */
.campo input:focus,.campo select:focus{outline:none;border-color:var(--teal-esc);box-shadow:0 0 0 3px var(--teal-claro)}
.campo input:focus-visible,.campo select:focus-visible{outline:2.5px solid var(--teal-esc);outline-offset:2px}
.campo input[aria-invalid="true"]{border-color:var(--coral)}
.campo--check{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;margin:22px 0 20px}
.campo--check input{width:24px;height:24px;margin-top:0;accent-color:var(--teal-esc);cursor:pointer}
.campo--check label{margin:0;font-weight:400;font-size:.88rem;color:var(--suave);cursor:pointer}
.campo--check .erro{grid-column:1/-1}
.erro{margin:6px 0 0;min-height:0;font-size:.82rem;color:#B23F27;font-weight:500}  /* --coral puro dá 3,67:1 */
.erro:empty{display:none}
.formulario__rodape{margin:14px 0 0;font-size:.8rem;color:var(--suave);text-align:center}
/* link sozinho num parágrafo não tem a isenção "inline" do WCAG 2.5.8:
   precisa de 24px de altura de alvo. */
.formulario__rodape a{display:inline-block;padding:5px 4px;color:var(--teal-esc);text-decoration:underline;text-underline-offset:3px}
.formulario__rodape a:hover{color:var(--ink)}

/* ---------- Rodapé ---------- */
.rodape{background:var(--ink);color:#B9D2D2;padding-top:clamp(48px,6vw,76px)}
.rodape__grade{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.75fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);padding-bottom:clamp(36px,4vw,54px)}
.rodape__marca p{margin-top:16px;font-size:.94rem;max-width:44ch}
.rodape h2{font-family:var(--fonte-display);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7FE3DC;margin-bottom:16px}
.rodape__links{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.rodape__links a{font-size:.95rem;transition:color var(--transicao)}
.rodape__links a:hover{color:#fff}
.rodape__whats{display:inline-flex;align-items:center;gap:10px;color:#fff;font-family:var(--fonte-display);font-weight:700;font-size:1.1rem;transition:color var(--transicao)}
.rodape__whats:hover{color:#7FE3DC}
.rodape__horario{margin-top:12px;font-size:.87rem}
.rodape__fim{
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  padding-block:22px;border-top:1px solid rgba(255,255,255,.12);
  font-size:.83rem;color:#8AAAAA;
}
.rodape__fim p{margin:0}
.rodape__legal a{display:inline-block;padding:5px 4px;text-decoration:underline;text-underline-offset:3px;transition:color var(--transicao)}
.rodape__legal a:hover{color:#fff}

/* ---------- Páginas legais ---------- */
.legal{max-width:72ch}
.legal h3{margin:38px 0 12px;font-size:1.18rem;color:var(--ink)}
.legal h3:first-child{margin-top:0}
.legal p{color:var(--suave);font-size:1rem}
.legal strong{color:var(--texto);font-weight:600}
.legal code{padding:2px 6px;background:var(--papel);border:1px solid var(--linha);border-radius:3px;font-size:.85em}
.legal__lista{margin:0 0 1em;padding:0;list-style:none;display:grid;gap:10px}
.legal__lista li{position:relative;padding-left:26px;color:var(--suave)}
.legal__lista li::before{content:"";position:absolute;left:2px;top:11px;width:10px;height:2px;background:var(--teal)}
.legal__data{margin-top:14px;font-size:.88rem;color:var(--suave)}
.legal__fecho{margin-top:38px;padding:20px 24px;background:var(--papel);border:1px solid var(--linha);border-left:3px solid var(--teal);border-radius:var(--raio)}
.legal__fecho a{color:var(--teal-esc);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- Atalho de contato no FAQ ---------- */
.atalho{margin-top:36px;padding-top:26px;border-top:1px solid var(--linha-forte)}
.atalho__titulo{margin:0 0 10px;font-size:.86rem;font-weight:600;color:var(--suave);letter-spacing:.02em}
.atalho__numero{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--fonte-display);font-weight:800;font-size:1.32rem;letter-spacing:-.02em;
  color:var(--ink);transition:color var(--transicao),transform var(--transicao);
}
.atalho__numero .i{width:21px;height:21px;color:var(--teal-esc);transition:transform var(--transicao)}
.atalho__numero:hover{color:var(--teal-esc)}
.atalho__numero:hover .i{transform:scale(1.12) rotate(-6deg)}
.atalho__nota{margin:12px 0 0;font-size:.86rem;color:var(--suave)}

/* ---------- Botão flutuante ---------- */
.flutuante{
  position:fixed;
  right:calc(18px + env(safe-area-inset-right,0px));
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  z-index:45;
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 18px;border-radius:999px;
  background:var(--teal-esc);color:#fff;
  font-family:var(--fonte-display);font-weight:700;font-size:.9rem;
  box-shadow:0 10px 30px -8px rgba(0,128,122,.6);
  /* visibility junto com opacity: so com opacity:0 o botao continua na ordem de
     tabulacao e, agora que ele e so o icone, quem chega nele pelo teclado nao ve
     nem texto nem anel de foco. Mesmo padrao do menu mobile. */
  opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none;
  transition:opacity 260ms ease,transform 260ms ease,visibility 260ms,background var(--transicao);
}
.flutuante[data-visivel]{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.flutuante:hover{background:var(--ink)}
.flutuante svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* O glifo da marca e preenchido, nao tracejado: sem isto ele some. */
.i-wa{fill:currentColor!important;stroke:none!important}
/* So o icone: vira um alvo redondo de 56px, acima dos 44px minimos de toque. */
.flutuante--icone{gap:0;padding:0;width:56px;height:56px;justify-content:center}
.flutuante--icone svg{width:27px;height:27px}

/* ---------- Revelação ---------- */
[data-revelar]{opacity:0;transform:translateY(18px);transition:opacity 620ms cubic-bezier(.22,.61,.36,1),transform 620ms cubic-bezier(.22,.61,.36,1)}
[data-revelar][data-visivel]{opacity:1;transform:none}/* .plano compoe o transform por token; sem estas duas linhas o transform:none acima apaga o scale do Growth assim que o IntersectionObserver revela o card (app.js L202 poe data-revelar em .plano). */.plano[data-revelar]{transform:translateY(calc(18px + var(--plano-elevacao))) scale(var(--plano-escala))}.plano[data-revelar][data-visivel]{transform:translateY(var(--plano-elevacao)) scale(var(--plano-escala))}

/* =========================================================
   INTERAÇÃO — o que responde ao mouse
   Regra: o que é clicável reage forte; o que é informativo
   reage de leve. Tudo é desligado por prefers-reduced-motion.
   ========================================================= */

/* botões: a seta anda junto */
.btn .i{transition:transform var(--transicao)}
.btn:hover .i{transform:translateX(3px)}
.btn--fantasma:hover .i,
.btn--claro:hover .i{transform:scale(1.1) rotate(-6deg)}
.btn--primario:hover{transform:translateY(-2px)}
.btn--contorno:hover,.btn--fantasma:hover{transform:translateY(-2px);box-shadow:var(--sombra-s)}

/* menu: sublinhado que cresce da esquerda */
.menu a::before{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;
  background:var(--teal);transform:scaleX(0);transform-origin:left;
  transition:transform 260ms cubic-bezier(.22,.61,.36,1);
}
.menu a:hover::before{transform:scaleX(1)}
.menu a[aria-current="true"]::before{display:none}

/* cartões: sobem, ganham borda e o ícone acende */
.cartao{transition:border-color var(--transicao),box-shadow var(--transicao),transform var(--transicao)}
.cartao:hover{transform:translateY(-4px);border-color:var(--teal-borda);box-shadow:var(--sombra-m)}
.cartao__icone{transition:background var(--transicao),color var(--transicao),transform var(--transicao)}
.cartao:hover .cartao__icone{background:var(--teal-esc);color:#fff;transform:scale(1.06) rotate(-4deg)}

/* Seção 07 (#limites): a cor é sinal, não enfeite. Dos 3 cartões só o do
   escalonamento humano troca de família; os outros dois seguem no teal da
   marca, que ali quer dizer "isto está sob controle".
   #B23F27 já é o coral escuro desta página (mesmo hex de .campo label span e
   de .erro) — o --coral puro dá 3,67:1 no branco e reprova.
   Contraste: #B23F27 sobre #FBEAE6 = 4,96:1 e #fff sobre #B23F27 = 5,78:1.
   O par teal equivalente dá 5,12:1 e 5,79:1, então o peso visual empata.
   Trocamos só background e color: tamanho, raio, transição e o scale/rotate
   do hover continuam vindo das regras acima, compartilhados com a seção 02.
   As DUAS regras abaixo são um par obrigatório: sem a de :hover, a regra de
   repouso (que tem #id) venceria .cartao:hover e o ladrilho ficaria parado. */
#limites .cartao--sinal .cartao__icone{background:#FBEAE6;color:#B23F27}
#limites .cartao--sinal:hover .cartao__icone{background:#B23F27;color:#fff}
/* Na seção 02 o quadradinho já NASCE cheio de cor. Se a regra de cima
   valesse lá, o hover pintaria os três de teal e apagaria a cor dos
   cartões 2 e 3. Aqui o hover mantém a cor do próprio cartão e abre um
   halo dela. O scale/rotate da regra acima continua valendo — transform
   não é sobrescrito, então o giro do ícone e o cartão subindo 4px são
   exatamente os mesmos de hoje.
   Especificidade: (0,4,0) contra (0,3,0) da regra acima. */
.cartoes--acento .cartao:hover .cartao__icone{
  background:var(--chip);color:#fff;
  box-shadow:0 0 0 5px var(--chip-halo);
}

/* dados: o número cresce um tico */
.dado{transition:border-color var(--transicao),box-shadow var(--transicao),transform var(--transicao)}
.dado:hover{transform:translateY(-4px);border-color:var(--teal-borda);box-shadow:var(--sombra-m)}
.dado__num{display:inline-block;transition:transform 260ms cubic-bezier(.22,.61,.36,1)}
.dado:hover .dado__num{transform:scale(1.06)}

/* critérios numerados: a linha inteira desliza e o número acende */
.criterios li{transition:background var(--transicao),padding-left var(--transicao)}
.criterios li::before{transition:color var(--transicao),transform var(--transicao)}
.criterios li:hover{background:var(--papel);padding-left:70px}
.criterios li:hover::before{color:var(--teal);transform:scale(1.15)}
.criterios h3{transition:color var(--transicao)}
.criterios li:hover h3{color:var(--teal-esc)}

/* passos: a bolinha do número preenche */
.passo::before{transition:background var(--transicao),color var(--transicao),border-color var(--transicao),transform var(--transicao)}
.passo:hover::before{background:var(--teal-esc);border-color:var(--teal-esc);color:#fff;transform:scale(1.08)}
.passo h3{transition:color var(--transicao)}
.passo:hover h3{color:var(--teal-esc)}

/* planos: sobem; o destacado sobe um pouco mais */
.plano:hover{--plano-elevacao:-5px;--plano-sombra:var(--sombra-m);border-color:var(--teal-borda)}
.plano--destaque:hover,.plano[data-sugerido]:hover{border-color:var(--teal-esc)}.plano--destaque:hover{--plano-sombra:0 4px 8px rgba(14,42,49,.06),0 38px 76px -28px rgba(14,42,49,.5)}
.plano__preco strong{display:inline-block;transition:transform 260ms cubic-bezier(.22,.61,.36,1)}
.plano:hover .plano__preco strong{transform:scale(1.04)}

/* FAQ: a pergunta desliza e o sinal gira */
.item{transition:background var(--transicao)}
.item:hover{background:var(--neblina)}
.item summary span{display:block;transition:transform var(--transicao)}
.item summary:hover span{transform:translateX(5px)}
.item summary:hover i{transform:rotate(90deg)}
.item[open] summary:hover i{transform:none}

/* foto da solução: zoom lento */

/* agenda: o horário marcado responde ao toque do mouse */
.slot--novo{transition:transform var(--transicao),box-shadow var(--transicao),background var(--transicao)}
.slot--novo:hover{transform:translateY(-2px) scale(1.04);background:var(--teal);box-shadow:0 10px 20px -8px rgba(0,128,122,.75);z-index:2}

/* faixa escura e provas do hero: reação discreta */
.faixa__grade > div,
.hero__provas > div{transition:transform var(--transicao)}
.faixa__grade > div:hover,
.hero__provas > div:hover{transform:translateY(-2px)}
.faixa strong,.hero__provas dt{transition:color var(--transicao)}
.faixa__grade > div:hover strong{color:#7FE3DC}
.hero__provas > div:hover dt{color:var(--teal-esc)}

/* celular do hero: profundidade real, sem biblioteca nenhuma */
.hero__demo{perspective:1400px}
.fone{transition:transform 520ms cubic-bezier(.22,.61,.36,1),box-shadow 520ms ease}
.hero__demo:hover .fone{transform:rotateY(-6deg) rotateX(2deg) translateY(-6px);box-shadow:0 34px 70px -30px rgba(14,42,49,.5)}

/* rodapé: links deslizam */
.rodape__links a{transition:color var(--transicao),transform var(--transicao)}
.rodape__links a:hover{transform:translateX(4px)}

/* links de texto */
.fone__nota a,.legal__fecho a,.item__corpo a{transition:color var(--transicao),text-decoration-color var(--transicao)}
.item__corpo a,.legal__fecho a{text-decoration:underline;text-underline-offset:3px;color:var(--teal-esc)}
.fone__nota a:hover,.item__corpo a:hover,.legal__fecho a:hover{color:var(--ink)}

/* painéis e colunas */
.painel{transition:box-shadow var(--transicao),transform var(--transicao)}
.painel:hover{box-shadow:var(--sombra-s)}
.coluna--depois li,.coluna--antes li{transition:color var(--transicao)}
.coluna--depois li:hover{color:#fff}
.coluna--antes li:hover{color:var(--texto)}

/* flutuante */
.flutuante:hover{transform:translateY(-3px) scale(1.03)}

/* nada disso vale para quem tem toque em vez de mouse */
@media (hover:none){
  .plano:hover{--plano-elevacao:0px} /* .plano saiu da lista abaixo: o transform:none dela apagaria o scale do Growth num hover grudado de toque. Zera so a elevacao; a escala e token. */ .cartao:hover,.dado:hover,.faixa__grade > div:hover,
  .hero__provas > div:hover,.btn--primario:hover,.btn--contorno:hover,
  .btn--fantasma:hover,.flutuante:hover{transform:none}
  .hero__demo:hover .fone{transform:none}
  .criterios li:hover{padding-left:62px;background:transparent}
  .cartoes--acento .cartao:hover .cartao__icone{box-shadow:none}
}


/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width:1080px){
  /* o cabecalho ja e empilhado; aqui so aperta o titulo e o respiro */
  .cabecalho h1,.cabecalho h2{max-width:22ch;margin-bottom:14px}
  .cabecalho .chamada{max-width:60ch}
  .fechamento{align-items:start}

  /* TABLET / INTERMEDIARIO (769 a 1080px).
     Uma coluna: o menu vira drawer em 1080 porque o header nao cabe, e com o
     texto em cima a cena ganha a largura toda. A composicao interna e a MESMA
     do desktop (celular na esquerda, foto em volta), so que numa caixa mais
     larga: a foto continua sendo o ambiente, nao um cartao.
     A altura vem de min-height proporcional, senao a caixa ficaria com a altura
     do celular e a foto viraria uma tira. */
  .hero__grade{grid-template-columns:1fr;gap:34px}
  .hero__sub{max-width:52ch}
  .hero__cena{--chat:clamp(240px,30cqw,300px);min-height:clamp(420px,46vw,540px)}
  .hero__cena .hero__demo{
    position:absolute;left:clamp(16px,2.6vw,30px);top:0;bottom:0;width:var(--chat);
    justify-content:center;align-items:stretch;
  }
  /* aqui a foto ocupa a caixa inteira: o celular fica sobre ela, com respiro */
  .hero__arte{left:0}
  /* .comparativo entra aqui e nao em 900: com TRES quadros, entre 901 e 1080px
     cada coluna cairia para ~300px e a lista quebraria em duas linhas por item. */
  .solucao,.duvidas,.fechamento,.resultado,.desafio,.comparativo{grid-template-columns:1fr}
  /* .desafio sobe de 900 para 1080: entre 901 e 1080 a caixa da direita chega a
     ser 178px mais alta (medido em 950px) e mesmo com o respiro extra sobraria
     um vao de 100-150px no card escuro. Empilhado o problema nem existe.
     Empilhado tambem nao ha o que equilibrar, entao a lista volta ao respiro
     aprovado — mobile e tablet ficam identicos ao que esta no ar hoje. */
  .lista-limpa li{padding-block:15px}
  .lista-limpa li::before{top:23px}
  .duvidas .cabecalho{position:static}
  /* uma coluna so: a grade 2x2 dos criterios empilha */
  .criterios{grid-template-columns:1fr}
  .criterios li:nth-last-child(-n+2){border-bottom:0}
  .criterios li:last-child{border-bottom:1px solid var(--linha-forte)}
  .passos{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 0}
  .passo{padding-right:24px}
  .passo:nth-child(odd){padding-left:0;border-left:0}
  .passo:nth-child(even){padding-left:28px;border-left:1px solid var(--linha)}

  /* O header desktop só cabe a partir de ~1065px: abaixo disso o menu e o CTA
     quebravam em 2 linhas e a marca vazava 24px. O drawer entra aqui, não em 900. */
  .menu{
    position:fixed;inset:var(--alt-topo) 0 auto;
    display:grid;gap:2px;
    padding:16px var(--gutter) 26px;
    background:var(--papel);border-bottom:1px solid var(--linha);
    box-shadow:0 24px 40px -24px rgba(14,42,49,.35);
    transform:translateY(-14px);opacity:0;visibility:hidden;
    transition:opacity 200ms ease,transform 200ms ease,visibility 200ms;
    max-height:calc(100dvh - var(--alt-topo));overflow-y:auto;
  }
  .menu[data-aberto]{transform:none;opacity:1;visibility:visible}
  .menu a{padding:14px 4px;font-size:1.02rem;border-bottom:1px solid var(--linha)}
  .menu a[aria-current="true"]::after{display:none}
  .menu__cta{
    display:flex;align-items:center;justify-content:center;
    margin-top:14px;padding:15px 20px!important;border:0!important;border-radius:var(--raio);
    background:var(--ink);color:#fff!important;font-family:var(--fonte-display);font-weight:700;
  }
  .topo__cta{display:none}
  .hamburguer{
    display:grid;gap:5px;place-content:center;
    width:44px;height:44px;padding:0;margin-right:-8px;
    background:transparent;border:0;cursor:pointer;
  }
  .hamburguer span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform 220ms ease,opacity 160ms ease}
  .hamburguer[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hamburguer[aria-expanded="true"] span:nth-child(2){opacity:0}
  .hamburguer[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* Tablet grande em pe e iPad em paisagem (os dois caem em 1024px).
   A regra de 2 colunas do hero so entra em 1081px, entao aqui a dobra e
   empilhada, e com .hero__texto travado em 640px sobrava uma coluna morta de
   340px na direita, enquanto as outras 11 secoes usam a largura toda com folga
   simetrica de 44px. Medido em 1024: texto parava em 684 de 980.
   Nao da para so baixar o breakpoint de 1081: naquela faixa a arte vira um
   painel calculado (`50vw + largura/2 - gutter - 770px`), que em 901px daria
   87px de largura, uma tira. Entao a dobra continua empilhada e o que muda e a
   largura util: o trio de provas volta a ancorar os mesmos 936px das outras
   secoes e o h1 cresce junto, senao a linha do trio fica sozinha la na direita.
   O veu nao precisa de recalibragem: nesta faixa ele e vertical e o texto
   segue na faixa de cima, onde o branco e solido.
   O piso do clamp do h1 e o mesmo 2,15rem de hoje de proposito: em 768px a
   conta 4,05vw da 31px, cai no piso e o titulo fica IGUAL ao que ja esta no ar.
   Quem cresce e so a faixa de 900 para cima, onde ha coluna sobrando. */
@media (min-width:701px) and (max-width:1080px){
  .hero__texto{max-width:none}
  .hero__sub{max-width:64ch}
  .hero h1{font-size:clamp(2.15rem,4.05vw,2.95rem)}
}

@media (max-width:900px){
  :root{--alt-topo:64px}

  .faixa__grade,.desafio,.cartoes,.dados,.planos,.rodape__grade{grid-template-columns:1fr}
  .faixa__grade > div{padding:24px 0}
  .faixa__grade > div + div{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.13);padding-top:24px}
  .plano__resumo{min-height:0}  .plano--destaque{--plano-escala:1} /* 1 coluna: em 360px o card pinta 329,6px numa coluna de 320px, vaza 4,8px de cada lado (a borda do Growth desalinha da do Start) e come 10,5px dos 16px de gap vertical, colando nos vizinhos. Borda, selo e CTA continuam. */
  .item__corpo{padding-right:0}
}

@media (max-width:600px){
  .hero__provas{grid-template-columns:1fr;border-top:0}
  .hero__provas > div{padding:16px 0;border-top:1px solid var(--linha)}
  .hero__provas > div + div{padding-left:0;border-left:0}
  .hero__acoes{gap:10px}
  .hero__acoes .btn{width:100%}
  .passos{grid-template-columns:1fr}
  .passo,.passo:nth-child(even){padding-left:0;border-left:0}
  .passo::before{margin-bottom:16px}
  .custo__campos{grid-template-columns:1fr}
  .rodape__fim{justify-content:flex-start}
  .flutuante span{display:none}
  .flutuante{padding:15px;
    right:calc(14px + env(safe-area-inset-right,0px));
    bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  /* o +/- do FAQ não pode morar embaixo do flutuante (50x50 no canto) */
  .item summary{padding-right:58px}
  .fone{width:100%}

  .hero__demo .fone__conversa{min-height:326px}
  .hero__demo .bolha{font-size:.88rem}
}

/* MOBILE (ate 768px). Os dois continuam na mesma caixa, mas empilhados na
   MESMA celula de grid: a foto no topo com proporcao propria e o celular
   centralizado por cima dela, descendo por fora.
   Por que nao deixar a foto cobrindo a caixa inteira, como no desktop: a foto e
   2,11:1 e a caixa do celular em 390px fica 0,65:1, entao o `cover` recortava
   28% da largura da imagem e sobrava uma moldura de 20px em volta do celular.
   A imagem ficava esmagada e sem servir para nada.
   margin-inline:auto em vez de translateX(-50%): o app.js zera o transform do
   .hero__demo quando a revelacao ao rolar termina, e levaria a centralizacao
   junto. Pelo mesmo motivo a reducao do celular usa `zoom` e nao `scale`.

   ZOOM E NAO SO LARGURA: o celular precisava encolher INTEIRO. So estreitar a
   caixa deixaria fonte, padding e altura do desktop, e a altura e o que fazia a
   foto virar fundo (o celular tinha 393px contra 263px de foto em 390px). Com
   `zoom` a caixa encolhe de verdade no layout, ao contrario de `transform:
   scale`, que so muda a pintura e deixaria o buraco da altura antiga. */
@media (max-width:768px){
  .hero__cena{--chat:72%;min-height:0;display:grid}
  /* Altura em clamp e nao aspect-ratio: a altura precisa acompanhar a do
     CELULAR (que e quase constante depois do zoom), nao a largura da tela.
     Com 4/4.5, em 430px a foto ia a 435px e sobravam 51px vazios embaixo do
     celular; em 768px ia a 778px e virava um paredao. */
  .hero__arte{
    position:relative;inset:auto;grid-area:1/1;align-self:start;
    width:100%;height:clamp(340px,92vw,395px);
  }
  /* 50% na vertical: com a caixa mais alta que a foto, o recorte passa a pegar
     a recepcao e o balcao em vez de so o teto. */
  .hero__arte img{border-radius:var(--raio-g);object-position:60% 50%}
  .hero__cena .hero__demo{
    position:relative;left:auto;top:auto;bottom:auto;
    grid-area:1/1;align-self:start;justify-self:center;
    width:var(--chat);margin-inline:auto;
    /* Posicao vertical do celular dentro da foto. E % da LARGURA da cena, nao
       da altura, entao a descida acompanha a escala da composicao: 22px em
       360px e 27px em 430px. Era 18%, subiu para 25% em 10/ago porque o celular
       comecava alto demais na foto. */
    margin-top:25%;
    /* respiro entre o fim do celular e a legenda. Em unidade logica: sob o zoom
       de .78 estes 28px viram 22px reais. Era 14px (11px reais) e a legenda
       ficava colada. */
    gap:28px;
    zoom:.78;
  }
}

/* Telas abaixo de 360px (Galaxy Fold fechado, 280px).
   A grade da semana era a unica coisa da pagina que quebrava ali: com a coluna
   das horas em 35px e gap de 5px, cada slot ficava com 26,8px e o rotulo
   "06h32" pede 29px, entao o horario vazava do quadrado e "QUA"/"QUI" colavam
   no cabecalho. Apertar a coluna das horas e o gap devolve 3px por slot, o que
   basta. Nao entra em 360px, que e o tamanho de celular mais comum no Brasil. */
@media (max-width:359px){
  /* Item de grid nasce com min-width:auto, entao a coluna nao encolhe abaixo do
     conteudo minimo dos filhos: em 280px a coluna do fechamento pintava 255px
     dentro de uma caixa de 240px. */
  .fechamento > *{min-width:0}
  .agenda__grade{gap:3px}
  .agenda__hora{padding-right:6px;font-size:.62rem}
  .agenda__dia{font-size:.6rem;letter-spacing:.04em}
  .slot--novo::after{font-size:.55rem;letter-spacing:-.02em}
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-revelar]{opacity:1;transform:none}
}

/* ---------- Impressão ---------- */
@media print{
  /* .hero__cena inteira, e nao so o .hero__demo: a arte virou uma <img> dentro
     da cena, e imagem no fluxo IMPRIME. Como fundo ela nao saia no papel
     (navegador nao imprime fundo por padrao), entao esconder so o celular
     deixaria meia pagina de foto no PDF que circula na clinica. */
  .topo,.flutuante,.hero__cena,.formulario{display:none}
  body{color:#000}
  .secao{padding-block:24px}
  /* A revelação é enfeite de tela. No papel nada pode sair invisível: o
     IntersectionObserver não roda contra a paginação de impressão, então
     tudo que não foi rolado sairia em branco no PDF que circula na clínica. */
  [data-revelar]{opacity:1!important;transform:none!important;transition:none!important}
  /* Mesma preocupação do comentário acima, outro jeito de sumir: navegador
     não imprime fundo por padrão. Com o quadradinho cheio de cor, o traço
     BRANCO sairia branco no branco e os três ícones sumiriam do PDF que
     circula na clínica. No papel o fundo cai e o ícone assume a cor:
     #00726D 5,79:1 · #0E2A31 15,06:1 · #C2402A 5,17:1 sobre o papel. */
  .cartoes--acento .cartao__icone{background:none!important;color:var(--chip)!important;box-shadow:none!important}
}