/* =========================================================================
   Zoomania · réplica fiel de https://zoomania24h.com.br/inicio-v2/
   Cada valor daqui foi LIDO da medição da original (_original/fonte/
   computado-d.json e computado-m.json), não estimado de screenshot.
   Para ver a especificação de uma seção: python scripts/espec.py <n>
   ========================================================================= */

:root{
  /* paleta medida na original */
  --verde-escuro:rgb(40,87,25);    /* títulos */
  --verde:rgb(63,116,46);          /* cartões, texto de apoio */
  --verde-claro:rgb(216,230,212);  /* pílula do hero */
  --verde-veu:rgba(63,116,46,.31); /* fundo das faixas 3, 6 e 9 */
  --tinta:rgb(48,48,48);           /* corpo de texto */
  --tinta-media:rgb(64,64,64);
  --branco:#fff;
  /* a largura interna é a mesma em toda a página: medido 1140px */
  --miolo:1140px;
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  /* a original esconde o transbordo horizontal no html E no body: a coluna do
     hero tem 393px de proposito dentro de um miolo de 358. */
  overflow-x:hidden;
}
body{
  margin:0;background:var(--branco);color:var(--tinta);
  font-family:Raleway,sans-serif;font-size:20px;line-height:28px;font-weight:400;
  overflow-x:hidden; /* a faixa do topo corre para fora da tela de propósito */
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none}

/* ===================== REGRA GERAL DOS INVOLUCROS =======================
   Descoberta ao caçar um desvio de 1px que voltava em varios lugares: no
   Elementor, o DIV que envolve um widget NAO herda a tipografia do tema. Ele
   fica em 16px/24px com a pilha de fonte do sistema, e so o elemento de texto
   dentro dele (h1, h2, p, span) recebe a fonte da marca.
   Isso importa porque o espaco abaixo de uma imagem inline sai do descendente
   da FONTE: com Raleway 20px/28px da 7px, com a pilha do sistema 16px/24px da
   6px. Um pixel por involucro, e eram varios, viram deriva no rodape.
   Por isso os involucros usam .w e a tipografia vive no filho.

   REGRA IRMA, que me pegou tres vezes: quando o texto vem dentro de um <span>,
   <b> ou <strong>, a tipografia tem de estar TAMBEM no <p> que o envolve. A
   altura da caixa do paragrafo vem da entrelinha DELE, nao do filho: com o
   valor so no filho o <p> usa a entrelinha do corpo e sai mais alto. Aconteceu
   no paragrafo da equipe (+8px), na linha do Google (+4px) e na frase do bloco
   de chamada (+6px). Procurar por "font-size" em todo seletor de <p> novo. */
.w{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:24px;
}

/* O miolo de 1140px centrado, com 32px de folga lateral na seção.
   Medido: seção 1440 com padding 0 32px, miolo 1140 em x150. */
.sec{position:relative;padding:0 32px}
.miolo{width:100%;max-width:var(--miolo);margin-inline:auto}

/* =============================== BOTÕES ================================= */
/* O WhatsApp mede 267x70 no widget e o <a> 260x68. A medição mostrou
   scale(0.973571) e sombra de 36,78px, mas esses são QUADROS da animação de
   pulso, não valores fixos: o valor fixo vem do keyframe `pulso`. */
.btn{
  display:inline-block;text-align:center;border-radius:100px;
  font-family:Raleway,sans-serif;font-size:16px;font-weight:600;line-height:16px;
  text-transform:uppercase;color:var(--branco);
  transition:background .3s,border .3s,border-radius .3s,box-shadow .3s,transform .4s;
}
.btn-conteudo{
  /* row-reverse na original: no HTML o ícone vem antes, na tela aparece depois */
  display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;
}
/* o icone segue o tamanho da fonte do botao: 16px no desktop, 15 no WhatsApp do
   celular e 14 no telefone. Com 16px fixo o botao de telefone saia 2px mais alto
   no celular, porque o icone mandava na altura da linha em vez do texto. */
.btn-conteudo svg{width:1em;height:1em;fill:currentColor;flex:0 0 1em}

.btn-wa{
  padding:22px 10px;border:5px solid rgba(255,255,255,.32);
  background-image:radial-gradient(at 50% 0%,rgb(38,202,0) 0%,rgb(68,121,5) 100%);
  letter-spacing:.3px;
  animation:pulso 1.5s infinite ease; /* keyframe `test` da original */
}
.btn-wa .btn-conteudo{gap:10px}
.btn-tel{
  padding:20px 10px;border:5px solid rgba(255,255,255,.56);border-radius:1000px;
  background-image:radial-gradient(at 50% 0%,rgb(249,0,0) 0%,rgb(107,0,0) 100%);
  letter-spacing:normal;
}
.btn-tel .btn-conteudo{gap:5px}

/* O pulso exato da original (keyframe `test`): encolhe, cresce abrindo um anel
   de sombra de 50px e volta. É o único movimento próprio dos botões. */
@keyframes pulso{
  0%{transform:scale(.9)}
  70%{transform:scale(1);box-shadow:0 0 0 50px rgba(0,0,0,0)}
  100%{transform:scale(.9);box-shadow:0 0 0 0 rgba(0,0,0,0)}
}

/* ===================== SEÇÃO 1 · faixa que corre ======================== */
/* Medido: 1440x56, padding 10px, gradiente radial vermelho, z-index 99.
   A trilha interna tem 1420x34 com overflow hidden e 6 cópias de 903x34.
   A FONTE AQUI NÃO É RALEWAY: é a pilha do sistema, porque o widget não
   define família. Era essa a diferença de 903 para 819 que eu não fechava. */
.faixa{
  /* A original mede 56px com o conteudo em y11, e nao 54 com o conteudo em y10.
     O motivo e um filho invisivel de medicao que o widget de marquee do Elementor
     deixa no fluxo e que empurra 1px de cada lado. Nao copio o truque, reproduzo a
     geometria: 11px de folga vertical da os mesmos 56px e o mesmo y11. */
  position:relative;z-index:99;padding:11px 10px;
  background-image:radial-gradient(at 50% 0%,rgb(255,0,0) 0%,rgb(163,0,0) 100%);
}
.faixa-janela{overflow:hidden}
/* O trilho tem a largura do conteudo, nao a da janela: os 6 itens ficam com a
   largura natural do texto (903px medidos na original) e nao encolhem. Se o item
   receber uma largura fixa, o texto quebra em duas linhas e a faixa passa de 34
   para 58px de altura. */
.faixa-trilha{display:flex;width:max-content;animation:corre 25s infinite linear;will-change:transform}
.faixa-item{
  display:flex;justify-content:center;align-items:center;padding:4.8px;
  flex:0 0 auto;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;font-weight:600;line-height:24px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--branco);
}
@keyframes corre{to{transform:translateX(-100%)}}

/* ========================== SEÇÃO 2 · hero ============================== */
/* Medido: 1440x927, fundo branco + BG-Zoo-Mania-Dobra-1.webp cover 50% 0%,
   cantos de baixo arredondados em 50px, z-index 1. O miolo tem padding 80px 0
   e as duas colunas ficam com space-between e alinhadas ao centro. */
.hero{
  z-index:1;background-color:var(--branco);
  background-image:url(assets/BG-Zoo-Mania-Dobra-1.webp);
  background-size:cover;background-position:50% 0%;background-repeat:no-repeat;
  border-radius:0 0 50px 50px;
}
.hero .miolo{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:80px 0;
}
.hero-txt{display:flex;flex-direction:column;gap:20px;position:relative;z-index:1;width:600px;flex:0 0 600px}
/* altura AUTO, nao 119px. O SVG tem proporcao 199/136, entao a altura real e
   118,9 no desktop e 80,64 no celular. Fixar o inteiro arredondado soma 1px que
   empurra tudo que vem abaixo, e isso se acumula ate o rodape. Licao geral:
   imagem com proporcao propria nunca leva altura fixa. */
.hero-logo{width:174px;height:auto}

/* A pílula "Veterinário Disponível": 441x65, padding 5px 15px, borda de 1px,
   raio 1000px, fundo verde claro. O texto é Raleway 17.5/26.25 no verde. */
.pilula{
  /* 441px de largura propria. E isso que faz o texto quebrar em duas linhas e a
     pilula ter 65px de altura em vez de 38. Lido de post-58.css, id 97e4c81. */
  width:441px;max-width:min(100%, 441px);padding:5px 15px;border:1px solid rgba(9,29,3,.35);
  border-radius:1000px;background:var(--verde-claro);
}
.pilula-linha{display:flex;align-items:center}
.pilula-icone{display:flex;align-items:center}
.pilula-icone svg{width:14px;height:14px;margin-right:3.5px;fill:var(--verde);transition:fill .3s}
.pilula-txt{
  padding-left:5px;font-size:17.5px;line-height:26.25px;color:var(--verde);
  transition:color .3s;
}

/* H1: o widget mede 599px e carrega margin 30px 0 -10px e padding-top 10px.
   O h1 em si nao tem padding nenhum. Eu tinha posto o padding no h1 e a altura
   saiu 10px maior e a posicao 38px acima. Valores lidos de post-58.css
   (python scripts/regras.py 5c2665e), inclusive os de celular. */
.w-h1{width:599px;max-width:min(100%, 599px);margin:30px 0 -10px;padding:10px 0 0}
.hero-h1{
  margin:0;font-family:"Baloo Bhaina 2",sans-serif;font-size:69px;font-weight:900;
  line-height:.9em;color:var(--verde-escuro);
}
/* O paragrafo tambem tem largura propria: 562px, e 516px/18px a partir de 1366. */
.w-p{width:562px;max-width:min(100%, 562px)}
.hero-p{margin:0;font-size:20px;line-height:1.4em;color:var(--tinta)}

/* O selo "Único Hospital 5 Estrelas": 382x79, padding 10px 20px, raio 20px,
   fundo verde a 14%, ícone de 42px e texto Raleway 19/28.5. */
.selo{
  /* 382px de largura propria: e isso que faz o texto quebrar em duas linhas,
     como na original. Sem a largura ele fica em uma linha de 432px. */
  width:382px;max-width:min(100%, 382px);margin-bottom:30px;padding:10px 20px;
  border:1px solid rgba(9,29,3,.35);border-radius:20px;
  background:rgba(63,116,46,.14);
}
.selo-linha{display:flex;align-items:center}
.selo-icone{display:flex;align-items:center}
.selo-icone svg{width:42px;height:42px;margin-right:10.5px}
.selo-txt{padding-left:5px;font-size:19px;line-height:28.5px;color:var(--tinta-media)}

/* A dupla de botões: 457x70 com space-between. */
/* O trilho mede 457px no desktop e 338px no celular (--width no post-58.css).
   Mecanica medida: o widget do telefone tem largura FIXA de 170px e o do WhatsApp
   cresce para ocupar o resto (457 - 170 - 20 de gap = 267, que e o que a original
   mede). Sem isso o botao do WhatsApp fica do tamanho do texto e os dois saem de
   lugar. No celular o trilho quebra em duas linhas: WhatsApp inteiro e telefone 245. */
.hero-botoes{display:flex;justify-content:space-between;gap:20px;position:relative;z-index:1;width:457px}
.w-btn-wa{flex:1 1 auto}
.w-btn-tel{flex:0 0 170px;width:170px}
.w-btn-wa>.btn,.w-btn-tel>.btn{width:100%}
/* A linha de apoio: margin-top -10px medido, centralizada. */
/* A linha de apoio tem 457px, a mesma largura do trilho de botoes, e 338px/16px
   no celular. Sem a largura ela ocupa os 600px da coluna. Id 56d31f7f. */
.hero-apoio{width:457px;max-width:min(100%, 457px);margin:-10px 0 0;text-align:center;font-size:20px;line-height:1.4em;color:#000}
/* a mesma linha de apoio aparece 5 vezes, com larguras diferentes por secao.
   A largura vem como atributo no HTML, o resto do desenho e igual. */
.apoio{margin:-10px 0 0;text-align:center;font-size:20px;line-height:1.4em;color:#000}
.apoio-457{width:457px;max-width:min(100%, 457px)}
.apoio-500{width:500px;max-width:min(100%, 500px)}   /* preto puro na original, nao o cinza do corpo */
.hero-foto{width:520px;flex:0 0 520px}
.hero-foto img{width:520px;height:622px;object-fit:contain}

/* ================= SECAO 3 . depoimentos no Google ===================== */
/* ACHADO QUE CUSTOU CARO: esta secao SOBREPOE o hero de proposito. O mecanismo
   e margin-top -80px com padding-top 160px, e o resultado medido e que ela
   comeca em y902 enquanto o hero so termina em 983. Quem nao ve isso fica com
   deriva acumulada no rodape e passa a vida ajustando margem.
   Medido: 1440x931, z-index 10, fundo verde a 31%, cantos de baixo em 50px. */
.dep{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  position:relative;z-index:10;
  margin-top:-80px;padding:160px 16px 0;
  border-radius:0 0 50px 50px;background:var(--verde-veu);
}
.h2{
  margin:0;text-align:center;
  font-family:"Baloo Bhaina 2",sans-serif;font-size:64px;font-weight:900;
  line-height:.9em;color:var(--verde-escuro);
}
.w-h2-dep{width:692px;max-width:min(100%, 692px)}

/* O selo do Google: cartao branco de 227x70 com a imagem de 185x26 dentro. */
.selo-google{
  /* 227x70 medidos = 21 de cima + 26 da imagem + 1 da linha de base + 20 de
     baixo + 2 de borda. O 1 da linha de base so aparece com a imagem em
     inline-block e a tipografia do involucro (veja a regra geral acima). */
  padding:21px 20px 20px;border:1px solid rgba(54,54,54,.3);border-radius:10px;
  background:var(--branco);
}
/* vertical-align:middle e a regra do Elementor para imagem de widget
   (widget-image.min.css). Sem ela a imagem fica sobre a linha de base e sobram
   6px de descendente embaixo: a caixa sai com 75px em vez dos 70 medidos. */
.selo-google img{display:inline-block;vertical-align:middle;width:185px;height:26px}
.dep-linha{width:778px;max-width:min(100%, 778px);margin:0;text-align:center}
.dep-linha b{font-size:20px;font-weight:700;line-height:1.4em;color:var(--tinta)}

/* O carrossel: janela de 1348px com 30px de folga de cada lado dentro de 1408,
   slides de 258px com 15px de respiro a direita, e 30px de espaco embaixo para
   os pontos. Autoplay de 5000ms e transicao de 500ms, lidos do data-settings. */
.carr{position:relative;width:1408px;max-width:100%;margin-top:20px}
.carr-janela{margin:0 30px;padding-bottom:30px;overflow:hidden}
.carr-trilha{display:flex;transition:transform .5s ease}
/* A largura do slide e a conta do Swiper, nao um numero fixo: ela muda com a
   janela em TODA largura de tela, e so o numero de slides por vez e constante
   dentro de cada faixa. Em 1440 a janela tem 1348 e 5 slides com 15 de respiro
   dao (1348-60)/5 = 257,6, que e o 258 medido. Com 258px fixo a replica so
   fechava em 1440 e abria 78px em 1366. */
.carr-slide{flex:0 0 calc((100% - 60px)/5);margin-right:15px;text-align:center}
/* o <figure> do navegador vem com margin 1em 40px: sem zerar, o slide ganha 40px
   de altura. E a imagem fica INLINE como na original, o que deixa 6px de linha
   de base embaixo: 310 da imagem + 6 = os 316 medidos. */
/* A figure da original herda 16px/24px e nao os 20px/28px do corpo. A diferenca
   de line-height muda em 1px a altura da linha de base abaixo da imagem inline,
   e esse 1px vira deriva no rodape depois de dois carrosseis. */
/* A figure da original herda 16px/24px E a pilha de fonte do sistema, nao a
   Raleway do corpo. Parece detalhe, mas o espaco abaixo de uma imagem inline sai
   do descendente da fonte: com Raleway dava 7px e com a pilha do sistema da 6px.
   Esse 1px por carrossel viraria deriva no rodape. Mesmo motivo da faixa do topo. */
.carr-slide figure{margin:0}   /* a tipografia vem de .w, veja a regra geral */
/* a imagem acompanha o slide ate o tamanho do arquivo (290x349) e para ai: e
   por isso que em 768, onde o slide tem 331, a original mede 290 e nao 331.
   min() e nao `width:auto;max-width:100%` de proposito: com width auto uma
   imagem lazy que ainda nao carregou mede ZERO (nao tem tamanho intrinseco) e a
   secao nasce curta ate o visitante rolar. Com min() a largura ja e definida e
   a altura sai da proporcao dos atributos width/height. */
.carr-slide img{display:inline;width:min(100%, 290px);height:auto;border-radius:5px;object-fit:cover}
/* as setas sao quadrados de 22px no verde escuro, nas bordas da secao */
.carr-seta{
  /* o meio da janela, nao um numero fixo: a janela e a altura do carrossel
     menos os 30px reservados para os pontos, e ela muda junto com o slide. */
  position:absolute;top:calc((100% - 52px)/2);width:22px;height:22px;
  color:var(--verde-escuro);cursor:pointer;background:none;border:0;padding:0;
}
.carr-seta svg{width:22px;height:22px;fill:currentColor;display:block}
.carr-seta.esq{left:0}
.carr-seta.dir{right:0}
/* 6 pontos de 6px, 12px de distancia entre as bordas (18px de passo medido) */
/* os pontos sao ABSOLUTOS na original: medidos 1408x24 em y1672, dentro de um
   carrossel de 346px de altura que comeca em y1355. No fluxo eles somariam 24px
   a secao e empurrariam 58px de tudo abaixo. */
.carr-pontos{
  position:absolute;left:0;right:0;bottom:0;height:24px;
  display:flex;justify-content:center;align-items:center;gap:12px;
}
.carr-ponto{
  width:6px;height:6px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(51,51,51,.2);
}
.carr-ponto[aria-current="true"]{background:rgba(51,51,51,.75)}

/* O icone de divisoria: 120x120, com margin 50px 0 -64px, ou seja ele VAZA
   64px para dentro da secao de baixo. Mais uma sobreposicao de proposito. */
/* a caixa da divisoria tem 126px e o icone 120: os 6px vem do line-height do
   inline-block do Elementor. E ela VAZA 64px para a secao de baixo. */
.divisoria{position:relative;z-index:10;width:120px;height:126px;margin:50px 0 -64px}
.divisoria svg{width:120px;height:120px;display:block}

/* ================== SECAO 4 . quem vai cuidar do pet =================== */
/* Medido: 1440x853 em y1833, z-index 2, fundo branco + BG-Zoo-Mania-Dobra-4-1,
   cantos de baixo em 50px. O miolo e coluna centrada com padding 80px 0. */
.equipe{
  z-index:2;background-color:var(--branco);
  background-image:url(assets/BG-Zoo-Mania-Dobra-4-1.webp);
  background-size:cover;background-position:50% 0%;
  border-radius:0 0 50px 50px;
}
.equipe .miolo{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:20px;padding:80px 0;
}
.w-h2-eq{width:640px;max-width:min(100%, 640px)}
/* o line-height vai no <p> tambem: com o valor so no <span> o paragrafo usa os
   28px do corpo e no celular sai 8px mais alto que a original. */
.eq-linha{width:479px;max-width:min(100%, 479px);margin:0;text-align:center;font-size:20px;line-height:1.4em}
.eq-linha span{font-size:20px;line-height:1.4em;color:var(--tinta)}

/* O carrossel da equipe: 1140 de widget, janela de 1080 com 30px de folga de
   cada lado, slides de 255 com 20px de respiro. A foto tem 250x300 e raio 10px,
   e a legenda 255x48 em Raleway 17/23.8 semibold. Nao tem pontos, so setas. */
.carr-eq{position:relative;width:1140px;max-width:100%}
/* o carrossel da equipe nao tem margem no topo nem espaco para pontos: ele nao
   tem pontos. O .carr generico traz margin-top 20px por causa do de depoimentos. */
.carr-eq{margin-top:0}
.carr-eq .carr-janela{margin:0 30px;padding-bottom:0}
.carr-eq .carr-slide{flex:0 0 calc((100% - 60px)/4);margin-right:20px}
.carr-eq .carr-slide img{width:min(100%, 250px);height:auto;border-radius:10px}
.carr-eq figcaption{
  margin:0;font-family:Raleway,sans-serif;font-size:17px;font-weight:600;
  line-height:23.8px;color:rgb(51,51,51);text-align:center;
}
/* as setas da equipe sao 25px e um verde ligeiramente diferente do resto */
.carr-eq .carr-seta{top:calc((100% - 25px)/2);width:25px;height:25px;color:rgb(60,116,44)}
.carr-eq .carr-seta svg{width:25px;height:25px}

/* ================ SECAO 5 . tudo em um so lugar ======================== */
/* Medido: 1440x1972 em y2686, cantos de CIMA em 50px (as outras tem embaixo),
   fundo em gradiente radial claro. O miolo e uma grade que quebra, centrada,
   com 20px de respiro e padding 80px em cima e 112px embaixo. */
.tudo{
  border-radius:50px 50px 0 0;
  background-image:radial-gradient(rgba(196,212,190,.55) 0%,rgb(255,255,255) 100%);
}
.tudo .miolo{
  display:flex;flex-wrap:wrap;justify-content:center;gap:20px;
  padding:80px 0 112px;
}
.w-h2-tudo{width:832px;max-width:min(100%, 832px)}
.tudo .h2{font-size:64px;line-height:1em}   /* 64/64 medidos, nao .9em como as outras */
/* o par de paragrafos de abertura tem 250px de recuo de cada lado */
.tudo-abre{width:1140px;max-width:min(100%, 1140px);padding:0 250px;text-align:center}
.tudo-abre p{margin:0;font-size:20px;line-height:1.4em;color:var(--tinta)}
.tudo-abre p:first-child{margin-bottom:14.4px}

/* Os 14 cartoes de servico: 270 de largura, 4 por fileira. A altura de cada
   fileira e a do cartao mais alto dela, por isso as fileiras medem 379, 374,
   350 e 351 na original: e o padrao do flex-wrap, nao valor fixo. */
.cartao{
  width:270px;padding:10px;border:1px solid rgba(9,29,3,.11);border-radius:10px;
  background:var(--branco);box-shadow:rgba(0,0,0,.25) 0 20px 30px -15px;
}
/* A FIGURE e inline-block e a IMAGEM dentro dela e block. Eu tinha invertido.
   Duas consequencias medidas: a figure ganha 6px de linha de base (165 de imagem
   viram 171 de caixa) E a margem de 8px do h3 deixa de colapsar com os 15px da
   figure, porque um inline-block nao e irmao de bloco. Os dois efeitos somavam
   8px por cartao, e a fileira inteira saia 8px curta. */
.cartao-miolo{width:248px;margin-inline:auto}   /* centrado: no celular o cartao tem 290 e o miolo continua 248 */
.cartao figure{display:inline-block;margin:0 0 15px}
.cartao img{display:block;width:248px;border-radius:8px}
.cartao h3{
  margin:8px 0 16px;font-family:"Baloo Bhaina 2",sans-serif;font-size:20px;
  font-weight:900;line-height:24px;letter-spacing:.2px;color:var(--verde);
}
/* a fonte precisa estar aqui: o cartao usa .w (tipografia do involucro, que e a
   pilha do sistema) para a imagem medir certo, e sem isto o paragrafo herdava
   a pilha do sistema em vez da Raleway. */
.cartao p{
  margin:0;font-family:Raleway,sans-serif;font-size:18px;line-height:23.4px;
  color:var(--tinta-media);
}

/* O bloco de chamada no meio da ultima fileira: 560 de largura, conteudo
   centrado, com icone de 50px, uma frase em negrito de 22px e os botoes. */
.cta-meio{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:20px;width:560px;padding:10px;
}
.cta-meio .icone{width:50px;height:56px}
.cta-meio .icone svg{width:50px;height:50px;display:block}
.cta-frase{width:391px;max-width:min(100%, 391px);margin:0;text-align:center}
.cta-frase b{font-size:22px;font-weight:700;line-height:1.4em;color:var(--tinta)}

/* ============ SECAO 6 . quatro provas (caixas de icone) =============== */
/* Medido: 1440x566 em y4578, margin -80px EM CIMA E EMBAIXO (sobrepoe a secao
   5 e a 7), fundo verde a 31%, sem canto arredondado. O miolo tem padding de
   160px em cima e embaixo, justamente para compensar a margem negativa. */
.provas{margin:-80px 0;padding:0 16px;background:var(--verde-veu)}
.provas .miolo{
  display:flex;flex-wrap:wrap;justify-content:center;gap:20px;padding:160px 0;
}
.prova{
  width:270px;padding:20px;border:1px solid rgba(9,29,3,.55);border-radius:10px;
  background:var(--branco);
}
.prova-caixa{display:flex;flex-direction:column;gap:15px}
/* o icone e um circulo verde de 40px com o desenho branco de 20px dentro */
/* line-height 0 no involucro do icone: o span e inline-block e, com a entrelinha
   do corpo, sobra o descendente da fonte embaixo dele e a caixa sai com 47px em
   vez dos 40 medidos. O mesmo truque aparece na LP da Veritas. */
.prova-icone{line-height:0}
.prova-icone span{
  display:inline-block;width:40px;height:40px;padding:10px;border-radius:50%;
  background:var(--verde);color:var(--branco);
}
.prova-icone svg{width:20px;height:20px;fill:currentColor;display:block}
.prova h3{
  margin:8px 0 16px;font-family:"Baloo Bhaina 2",sans-serif;font-size:22px;font-weight:900;
  line-height:26.4px;letter-spacing:.2px;color:var(--verde);
}
.prova p{
  margin:0;font-family:Raleway,sans-serif;font-size:19px;line-height:24.7px;
  color:var(--tinta-media);
}

/* ============== SECAO 7 . mais de 12 especialidades =================== */
/* Medido: 1440x1068 em y5064, gradiente radial a partir da direita, sem canto
   arredondado. O miolo distribui com space-around e 40px de respiro vertical. */
/* O degrade da original termina em BRANCO OPACO a 74%, nao em branco transparente
   a 100%. Com o transparente o verde da secao anterior (que sobrepoe 80px de
   proposito) aparecia por baixo e a faixa verde ficava 80px mais alta do que na
   original, nas duas larguras. Era a unica pendencia que sobrava no dobras.py. */
.esp{background-image:radial-gradient(at 100% 50%,rgba(196,212,190,.46) 0%,rgb(255,255,255) 74%)}
.esp .miolo{
  display:flex;flex-wrap:wrap;justify-content:space-around;gap:40px 20px;
  padding:128px 0 80px;
}
.w-h2-esp{width:881px;max-width:min(100%, 881px)}

/* AQUI ESTAVA O ERRO QUE CUSTOU OITO RODADAS NA VERSAO ANTIGA.
   A coluna e uma LISTA: o <li> tem 300px, a largura da coluna, e o TEXTO
   dentro dele tem a largura natural da palavra (75px em "Geriatra"). Eu tinha
   construido uma grade de celulas e feito o texto preencher a celula, o que
   dava 323px de texto contra 75px da original. Nenhum ajuste de largura
   conserta elemento errado, e eu passei rodadas ajustando largura. */
.esp-col{width:320px;padding:10px}
.esp-col ul{
  display:flex;flex-direction:column;gap:10px;
  width:300px;margin:0;padding:0;list-style:none;
}
.esp-col li{
  display:flex;align-items:center;
  padding:10px;border:1px solid rgba(255,255,255,.19);border-radius:8px;
  background:var(--verde);box-shadow:rgba(0,0,0,.25) 0 20px 30px -10px;
}
/* O ULTIMO chip tem 10px de recheio embaixo e os outros 15. Parece nada, mas e
   a chave da altura da coluna: 4 chips de 77 mais um de 72, com 10 de gap e 15
   de margem, dao exatamente os 480px medidos, e a coluna de 4 chips da os 378.
   Eu tinha travado a altura da lista em 480 para forcar isso; era sintoma.
   No Elementor isso vem de um padding-block-end em :not(:last-child). */
.esp-col li:not(:last-child){padding-bottom:15px}
/* o primeiro item nao tem a margem de 15px: o respiro entre dois chips e
   10px de gap mais 15px de margem, e no topo da coluna nao existe vizinho */
.esp-col li+li{margin-top:15px}
.esp-chip-icone{display:flex;width:63px;flex:0 0 63px}
/* 50x50 com 12,5px de folga a direita: o arquivo tem viewBox 49x48 e a original
   o renderiza em 50x50, o que faz o chip ter 77px de altura e nao 75. */
.esp-chip-icone svg{width:50px;height:50px;margin-right:12.5px;display:block}
.esp-chip-txt{
  padding-left:5px;font-family:Sora,sans-serif;font-size:17px;font-weight:400;
  line-height:23.8px;color:var(--branco);transition:color .3s;
}

/* O bloco de chamada da secao: 400x286 com o mesmo desenho do da grade. */
/* margin-top -121px: o bloco sobe e encosta nas colunas em vez de abrir uma
   fileira nova. Mais uma sobreposicao deliberada, a terceira desta pagina. */
.cta-esp{width:400px;margin-top:-121px}
.cta-esp .cta-frase{width:323px;max-width:min(100%, 323px)}

/* ================== SECAO 8 . perguntas frequentes ===================== */
/* Medido: 1440x1399 em y6132, sem fundo. O miolo distribui as duas colunas com
   space-between e 27px de respiro, padding 80px em cima e 112px embaixo. */
.faq .miolo{
  /* align-items no inicio: as duas colunas tem alturas diferentes de proposito
     (563 e 481) e com o stretch do flex as duas ficavam com a mesma altura. */
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;
  gap:27px;padding:80px 0 112px;
}
.w-h2-faq{width:1140px;max-width:min(100%, 1140px)}
.faq-col{width:550px}
/* O item tem uma BORDA de 1px embaixo, na cor #28571924, e 15px de margem.
   Com a borda ele mede 67,5px (20 de recheio em cima, 28,6 da linha, 18 embaixo
   e 1 de borda) e o passo fica 82,5: sete itens dao os 562,5px medidos da
   primeira coluna e seis dao os 481 da segunda. Sem a borda eu tinha 67px e
   ficava 10px curto na coluna. */
.faq-item{border-bottom:1px solid rgba(40,87,25,.14);margin-bottom:15px}
.faq-item:last-child{margin-bottom:0}
/* A linha da pergunta e um BLOCO, nao um flex, e a seta e a pergunta sao
   elementos INLINE que correm na mesma linha. Isso importa porque a caixa de um
   elemento inline tem a altura da FONTE (44px na Baloo de 22px) e nao a da
   entrelinha: dentro de um flex o filho e blocado e passa a medir 29px. Eram 15px
   de diferenca em cada uma das 13 perguntas. */
.faq-cab{
  display:block;padding:20px 15px 18px;cursor:pointer;
  font-size:16px;line-height:16px;font-weight:700;
}
/* A regra real do Elementor (custom-widget-toggle.min.css): a seta e um
   inline-block de 1em FLUTUANDO a esquerda, e o svg tem 1em com -5px de recuo.
   Flutuar importa: ela sai do fluxo da linha, entao a altura da linha da
   pergunta vem so do <a> e o item fecha em 68px. */
.faq-seta{display:inline-block;float:left;width:1em;text-align:left;color:var(--verde-escuro)}
/* a seta fica na LINHA DE BASE, nao centrada: na original ela desce 2px abaixo
   da base e e isso que faz a linha da pergunta ter 30px em vez de 28,6, e o item
   68px em vez de 66,6. Com vertical-align:middle o item sai 1,4px mais curto e
   as sete perguntas somam 10px de diferenca na coluna. */
.faq-seta svg{width:1em;height:1em;margin-inline-start:-5px;fill:currentColor}
.faq-perg{
  font-family:"Baloo Bhaina 2",sans-serif;font-size:22px;font-weight:900;
  line-height:28.6px;color:var(--verde-escuro);
}
/* as respostas comecam FECHADAS na original: ela foi capturada assim e e o
   estado que o visitante ve ao chegar */
.faq-resp{display:none;padding:15px}
.faq-item[aria-expanded="true"] .faq-resp{display:block}
.faq-resp p{margin:0;font-size:16px;line-height:24px;color:rgb(51,51,51)}

/* O bloco de chamada do fim: 1140x451, recheio de 80px, fundo verde a 31%. */
.faq-cta{
  margin-top:80px;display:flex;flex-direction:column;align-items:center;gap:20px;
  width:1140px;max-width:min(100%, 1140px);padding:80px;background:var(--verde-veu);
}
.w-h2-cta{width:980px;max-width:min(100%, 980px)}
.faq-cta-linha{width:562px;max-width:min(100%, 562px);margin:0;text-align:center;font-size:20px;line-height:1.4em}
.faq-cta-linha b{font-size:20px;font-weight:700;line-height:1.4em;color:var(--tinta)}

/* ======================= SECAO 9 . rodape ============================== */
/* Medido: 1440x510 em y7531, fundo verde a 31%, miolo em coluna centrada com
   80px de recheio em cima e embaixo e 20px de respiro. */
.rodape{padding:0;background:var(--verde-veu)}
.rodape .miolo{
  display:flex;flex-direction:column;align-items:center;gap:20px;padding:80px 0;
}
.rodape-logo{width:195px}
.rodape-end{width:347px;max-width:min(100%, 347px);text-align:center}
.rodape-end p{margin:0;font-family:Raleway,sans-serif;font-size:18px;line-height:27px;color:#000}
/* 14,4px entre os dois paragrafos, que e o 0,8em de um texto de 18px: o mesmo
   valor que separa os paragrafos de abertura da secao 5. */
.rodape-end p:first-child{margin-bottom:14.4px}
/* os dois contatos: cada um e um link com um icone de 25px e o texto em cinza */
.rodape-cont{width:184px;max-width:min(100%, 184px)}
.rodape-cont ul{margin:0;padding:0;list-style:none}
.rodape-cont a{display:flex;align-items:center;justify-content:center;font-size:18px;line-height:27px}   /* centrado: elementor-align-center */
.rodape-cont .ic{display:flex;width:25px;flex:0 0 25px;color:rgb(204,51,102)}
.rodape-cont .ic svg{width:20px;height:20px;fill:currentColor}
/* o texto do contato e Raleway com 5px de recuo, nao a fonte do involucro */
/* text-align:center medido na original nas duas larguras (elementor-align-center
   tambem escreve o text-align, nao so o justify-content do flex). */
.rodape-cont .tx{padding-left:5px;font-family:Raleway,sans-serif;color:rgb(84,89,95);text-align:center}

/* =========================== CELULAR ==================================== */
/* O ponto de quebra do Elementor é 767px. Os valores abaixo saem da captura
   de 390px (computado-m.json), não de palpite. */
/* 1366px: a original ja muda aqui, nao so no celular. */
@media(max-width:1366px){
  .w-p{width:516px;max-width:min(100%, 516px)}
  .hero-p{font-size:18px}
  .hero-h1{font-size:61px}
}
/* ===================== TABLET (de 768 a 1366px) =========================
   A original tem TRES pontos de quebra, nao dois. Tudo o que vem abaixo saiu
   das regras REAIS do post-58.css -- os blocos @media(max-width:1366px) (o
   "laptop" do Elementor) e @media(max-width:1024px) (o "tablet") -- conferido
   contra a medicao em 1024px (computado-t.json).

   POR QUE OS DOIS BLOCOS SAO LIMITADOS EM min-width:768px: na original esses
   media queries nao tem piso e descem ate o celular, onde o bloco de 767 os
   sobrescreve. Aqui o bloco de 390px ja esta fechado e medido; deixar o de
   tablet vazar para baixo so arriscaria estragar o que esta certo, sem mudar
   nada do que se ve em 390. */

/* ---- faixa de laptop: 768 a 1366 (bloco @media(max-width:1366px)) ---- */
@media(min-width:768px) and (max-width:1366px){
  /* secao 5: a grade passa a distribuir com space-around e o respiro
     horizontal cai de 20 para 10px (id fba2bdc) */
  .tudo .miolo{justify-content:space-around;gap:20px 10px}
  .tudo-abre{padding:0 150px}                  /* id 654bd4d */
  .cartao{width:245px}                         /* os 14 cartoes, 245px */
  /* o miolo do cartao acompanha a largura: 245 - 20 de recheio - 2 de borda
     = 223px medidos. Em px e nao em %: a <figure> e inline-block, e dentro de
     uma caixa que encolhe para o conteudo a porcentagem de uma imagem lazy nao
     resolve e ela mede zero ate carregar. */
  .cartao-miolo{width:223px}
  .cartao img{width:223px}
  .cta-meio{width:500px}                       /* id 0c33a74, regra propria da faixa */

  /* secao 6: as quatro provas tambem vao para 245px e o texto para 18px */
  .prova{width:245px}
  .prova p{font-size:18px;line-height:23.4px}

  /* secao 7: o respiro vertical cai de 40 para 20px e o titulo para 55px */
  .esp .miolo{gap:20px}
  .esp .h2{font-size:55px}                     /* id 7578ae2 */
  /* as colunas perdem o recheio de 10px; a lista passa a ocupar os 320 */
  .esp-col{padding:0}
  .esp-col ul{width:320px}
  .cta-esp{margin-top:-100px}                  /* id f0e1f39: -121 vira -100 */

  /* secao 8: o recheio de baixo cai de 112 para 80 e as colunas para 475 */
  .faq .miolo{padding:80px 0}                  /* id 42aa1f98, 5em em cima e embaixo */
  .faq-col{width:475px}                        /* ids 478061fd e faca229 */
}

/* ---- quantos slides por vez: o Swiper tem OUTRAS fronteiras que o CSS ----
   Deduzido da largura do slide medida na original, nos dois carrosseis
   (depoimentos / equipe):
     ate 767        1 e 1 slide   (slide 298 e 278 em 390px)
     768 a 1023     2 e 2 slides  (slide 331 e 312 em 768px)
     1024 a 1365    4 e 3 slides  (slide 222 e 287 em 1024px)
     1366 em diante 5 e 4 slides  (slide 243 e 255 em 1366px)
   ARMADILHA: a fronteira do Swiper em 1024 e em 1366 pertence a faixa DE CIMA,
   ao contrario do CSS do Elementor, onde @media(max-width:1024px) ja vale em
   1024. Por isso estas faixas nao podem morar nos blocos acima: em 1024 o CSS
   ja e de tablet e o carrossel ainda e de laptop. O numero de slides vem do
   data-settings da original (slides_to_show 5 e 4, _laptop 4 e 3, _mobile 1;
   o de tablet nao esta declarado e cai no padrao 2 do widget). */
@media(min-width:768px) and (max-width:1023.98px){
  .carr-slide{flex:0 0 calc((100% - 15px)/2)}
  .carr-eq .carr-slide{flex:0 0 calc((100% - 20px)/2)}
}
@media(min-width:1024px) and (max-width:1365.98px){
  .carr-slide{flex:0 0 calc((100% - 45px)/4)}
  .carr-eq .carr-slide{flex:0 0 calc((100% - 40px)/3)}
}

/* ---- faixa de tablet: 768 a 1024 (bloco @media(max-width:1024px)) ---- */
@media(min-width:768px) and (max-width:1024px){
  /* o miolo da pagina inteira cai de 1140 para 1024 (post-6.css, o kit) */
  :root{--miolo:1024px}

  /* ---- secao 2, hero: AQUI ELE EMPILHA ----
     id 4caa1e76: --flex-direction:column, --justify-content:flex-start,
     --align-items:center, recheio 3em em cima, 5em embaixo e 2em dos lados.
     Medido em 1024: miolo 960x1535 com a coluna de texto (600) em x212 e a
     foto (540) em x242. */
  .hero{background-size:1200px auto;background-position:-387px -6px}
  .hero .miolo{flex-direction:column;justify-content:flex-start;align-items:center;padding:48px 0 80px}
  /* a foto deixa de ser espremida pela linha e volta ao tamanho do arquivo,
     540x646. Altura AUTO: a proporcao e a do arquivo, nao um numero fixo. */
  .hero-foto{width:540px;flex:0 0 auto}
  .hero-foto img{width:540px;height:auto}

  /* ---- secao 3, depoimentos ---- (id 4122ab34) */
  .w-h2-dep{width:463px;max-width:min(100%, 463px)}
  .dep .h2{font-size:40px}

  /* ---- secao 4, equipe ---- (ids 4ab893ea e 6f81421d) */
  .equipe{background-position:-413px 0}
  .equipe .miolo{justify-content:space-around}
  .w-h2-eq{width:349px;max-width:min(100%, 349px)}
  .equipe .h2{font-size:40px}

  /* ---- secao 5, tudo em um so lugar ---- (ids edc24c7, 654bd4d, 0c33a74) */
  .w-h2-tudo{width:551px;max-width:min(100%, 551px)}
  .tudo .h2{font-size:40px}
  .tudo-abre{padding:0}
  /* o bloco de chamada vai para o FIM da grade, como no celular. Em ordem do
     documento ele fica entre o 13o e o 14o cartao. */
  .cta-meio{order:1}

  /* ---- secao 7, especialidades ---- (ids 05f400b, 7578ae2, 39c9de4, f0e1f39) */
  .esp .miolo{flex-direction:column;align-items:center}
  .w-h2-esp{width:514px;max-width:min(100%, 514px)}
  .esp .h2{font-size:40px}
  .esp-col{width:269px}
  .esp-col ul{width:269px}
  .cta-esp{margin-top:0}

  /* ---- secao 8, perguntas frequentes ---- (ids 42aa1f98, 18f0d218, 478061fd,
     faca229 e 278cc22). As duas colunas deixam de ficar lado a lado. */
  .faq .miolo{flex-direction:column;justify-content:center;align-items:center}
  .faq .h2{font-size:40px}
  .faq-col{width:636px;align-self:center}
  .w-h2-cta{width:483px;max-width:min(100%, 483px)}
  .faq-cta .h2{font-size:40px}
}

@media(max-width:767px){
  /* Todos os valores daqui saem da captura de 390px (computado-m.json), nao de
     palpite. A secao mede 390x1302 em y56, com 16px de folga lateral. */

  /* TODA secao passa de 32 para 16px de folga lateral no celular, o que da 358
     de miolo em vez de 326. Eu estava setando isso secao por secao e esqueci de
     duas; a seccao 7 ficou com o titulo 12px mais estreito e quebrando em uma
     linha so. Uma regra para todas resolve. */
  .sec{padding:0 16px}
  /* align-items volta para o inicio: a coluna de 393px transborda para a DIREITA,
     a partir da borda esquerda do miolo (x16 medido). Com o align-items:center que
     vem do desktop ela transbordaria dos dois lados e caia em x-1. */
  .hero .miolo{flex-direction:column;align-items:flex-start;padding:32px 0 48px}

  /* A coluna de texto tem 393px de largura dentro de um miolo de 358px: ela
     transborda 35px de proposito na original, e o body esconde o excesso.
     Os itens ficam centrados, cada um com a sua largura. */
  .hero-txt{width:393px;flex:0 0 auto;align-items:center;gap:20px}
  .hero-logo{width:118px;height:auto}
  .pilula{width:338px;max-width:min(100%, 338px)}
  /* no celular o widget do h1 perde o padding-top: medido 352x86, igual ao h1. */
  .w-h1{width:352px;max-width:min(100%, 352px);margin:20px 0 -10px;padding:0}
  .hero-h1{font-size:48px}            /* 48px com line-height .9em = 43.2px medidos */
  .w-p{width:300px;max-width:min(100%, 300px)}
  .hero-p{font-size:18px}             /* 1.4em da os 25.2px medidos */
  /* No celular a original CENTRALIZA o texto do hero (textAlign:center medido no
     selo de disponibilidade, no h1 e no paragrafo; em 1440 os tres sao 'start').
     Sem isso o h1 de duas linhas e o paragrafo saem alinhados a esquerda. */
  .pilula,.hero-h1,.hero-p{text-align:center}

  /* ACHADO: no celular a original MOVE o selo para depois dos botoes, com order:1.
     Sem isso ele fica no meio e empurra 200px de tudo que vem abaixo. */
  .selo{order:1;width:317px;max-width:min(100%, 317px);margin-bottom:0}
  .selo-txt{font-size:18px;line-height:27px}   /* 18px/27px medidos em 390px */
  /* o icone CRESCE no celular, de 42 para 52px (--e-icon-list-icon-size no CSS),
     com 13px de folga a direita. Isso estreita o texto para 210px e o faz quebrar
     em tres linhas em vez de duas: era o ultimo desvio do celular. */
  .selo-icone svg{width:52px;height:52px;margin-right:13px}

  /* o trilho quebra em duas linhas e a segunda fica CENTRADA: o botao de telefone
     mede 245 dentro de 338 e a original o coloca em x90, ou seja (338-245)/2. Com
     space-between ele cola na esquerda. */
  .hero-botoes{width:338px;flex-wrap:wrap;justify-content:center;gap:10px}
  .w-btn-wa{flex:0 0 100%}
  .w-btn-tel{flex:0 0 245px;width:245px}
  /* medido em 390px: o rotulo do WhatsApp cai para 15px/18px e o do telefone
     para 14px/14px. Nao e o mesmo valor para os dois. */
  .btn-wa{font-size:15px;line-height:18px}
  .btn-tel{font-size:14px;line-height:14px}

  .hero-apoio{width:338px;max-width:min(100%, 338px);font-size:16px}
  .hero-foto{width:100%;flex:1 1 auto}
  .hero-foto img{width:100%;height:auto}

  /* ---- secao 3, depoimentos, em 390px ----
     Medido: 390x771 em y1326, padding 64px 16px 16px, margin-top -32px.
     A sobreposicao continua existindo no celular, mas com metade do valor. */
  .dep{margin-top:-32px;padding:64px 16px 16px}
  .w-h2-dep{width:338px;max-width:min(100%, 338px)}
  .dep .h2{font-size:28px;line-height:.9em}
  .dep-linha{width:300px;max-width:min(100%, 300px)}
  .dep-linha,.dep-linha b{font-size:17px;line-height:23.8px}   /* o <p> tambem */
  .carr{width:358px;margin-top:0}
  .carr-janela{margin:0 30px}
  /* um slide por janela: 100% da os 298px medidos em 390 e continua certo em
     320 e 360, onde a janela e menor. */
  .carr-slide{flex:0 0 100%;margin-right:15px}
  .carr-slide img{width:290px;height:349px}
  .divisoria{margin:20px 0 -64px}

  /* ---- secao 4, equipe, em 390px ----
     Medido: 390x831 em y2097, padding 0 16px, miolo de 358. */
  .equipe{padding:0 16px}
  .equipe .miolo{padding:64px 0 48px}   /* 64 em cima e 48 embaixo, medidos */
  .w-h2-eq{width:276px;max-width:min(100%, 276px)}
  .equipe .h2{font-size:30px;line-height:.9em}
  .eq-linha{width:284px;max-width:min(100%, 284px)}
  .eq-linha,.eq-linha span{font-size:18px;line-height:1.4em}   /* o <p> tambem, senao usa 28px */
  .carr-eq{width:338px}
  /* a janela mantem os 30px de folga no celular: 338 - 60 = 278, exatamente um
     slide por vez, com a legenda em x56 como na original. */
  .carr-eq .carr-janela{margin:0 30px}
  .carr-eq .carr-slide{flex:0 0 100%;margin-right:20px}
  .carr-eq .carr-slide img{width:250px;height:300px}
  .carr-eq figcaption{width:278px}
  .apoio,.apoio-457,.apoio-500{width:338px;max-width:min(100%, 338px);font-size:14px;line-height:1.4em}
  /* o bloco de chamada da grade tem a sua propria medida no celular */
  /* o widget tem 338 e o <span> dentro sai com 292 naturalmente: eu tinha
     fixado 292 no widget, que e a medida do texto, nao da caixa. */
  .apoio-cta,.apoio-esp{width:338px;max-width:min(100%, 338px);font-size:16px}
  /* a frase do bloco da secao 7 tem 300px no celular, nao os 305 da grade */
  .cta-esp .cta-frase{width:300px;max-width:min(100%, 300px)}

  /* ---- secao 8, perguntas frequentes, em 390px ----
     Medido: 390x1972 em y11982, miolo com padding 16 em cima e 96 embaixo.
     As colunas viram uma embaixo da outra, com a segunda subindo 20px. */
  /* centrado no celular: a coluna de 338 fica em x26 dentro do miolo de 358, e
     o titulo de 291 em x50. Com o space-between do desktop tudo cola na esquerda. */
  .faq .miolo{justify-content:center;padding:16px 0 96px}
  .w-h2-faq{width:291px;max-width:min(100%, 291px)}
  .faq .h2{font-size:33px;line-height:.9em}
  .faq-col{width:338px}
  .faq-col+.faq-col{margin-top:-20px}
  .faq-perg{font-size:20px;line-height:24px}
  /* o bloco de chamada do fim: 358x395 com recheio 32px 16px */
  .faq-cta{width:358px;margin-top:48px;padding:32px 16px}
  .w-h2-cta{width:326px;max-width:min(100%, 326px)}
  .faq-cta .h2{font-size:24px;line-height:.9em}   /* 24px aqui, 33px no titulo do FAQ */
  /* o trilho de botoes deste bloco tem 300px no celular, nao os 338 dos outros */
  .faq-cta .hero-botoes{width:300px}
  .faq-cta-linha{width:217px;max-width:min(100%, 217px);font-size:18px}
  .faq-cta-linha b{font-size:18px}
  .apoio-faq{width:326px;max-width:min(100%, 326px);font-size:14px}

  /* ---- secao 9, rodape, em 390px ----
     Medido: 390x446 em y13954. ATENCAO: o rodape NAO tem folga lateral, ao
     contrario de todas as outras secoes, por isso ele anula a regra geral. */
  .rodape{padding:0}
  .rodape .miolo{padding:48px 0}
  .rodape-end{width:338px;max-width:min(100%, 338px)}
  .cta-frase{width:305px;max-width:min(100%, 305px)}
  .cta-frase,.cta-frase b{font-size:18px;line-height:1.4em}

  /* ---- secao 5, tudo em um so lugar, em 390px ----
     Medido: 390x6250 em y2928, padding 0 16px; miolo 358 com padding 48 em cima
     e 96 embaixo, respiro de 20px na vertical e 10px na horizontal. Um cartao
     por fileira, com 290 de largura. */
  .tudo .miolo{padding:48px 0 96px;gap:20px 10px}
  .w-h2-tudo{width:291px;max-width:min(100%, 291px)}
  .tudo .h2{font-size:28px;line-height:1em}
  .tudo-abre{width:300px;max-width:min(100%, 300px);padding:0}
  .tudo-abre p{font-size:18px;line-height:1.4em}
  .cartao{width:290px;padding:20px}   /* 20px de recheio no celular, nao 10 */
  /* a imagem continua com 248px no celular, nao acompanha a largura do cartao:
     o cartao vai de 270 para 290 mas a imagem fica igual. Medido. */
  /* ACHADO: no celular a original joga o bloco de chamada para o FIM da grade
     com order:1, igual ao selo do hero. Em ordem do documento ele fica entre o
     13o e o 14o cartao. */
  .cta-meio{width:358px;order:1}

  /* ---- secao 6, as quatro provas, em 390px ----
     Medido: 390x1044 em y9098, margin -80px continua, miolo com padding 32 em
     cima e 128 embaixo (no desktop e 160 nos dois). Um cartao por fileira. */
  .provas .miolo{padding:32px 0 128px}
  .prova{width:338px}
  .prova p{font-size:18px;line-height:23.4px}   /* 18/23.4 no celular, nao 19/24.7 */

  /* ---- secao 7, especialidades, em 390px ----
     Medido: 390x1920 em y10062, miolo com padding 48px 0, uma coluna por fileira
     com 270px de largura (o CSS da original tem --container-widget-width:270px
     no media de 767). O chip ocupa a largura toda da coluna. */
  .esp .miolo{padding:48px 0;gap:20px}   /* no desktop o respiro vertical e 40, no celular 20 */
  .esp-col{width:270px;padding:0}
  .esp-col ul{width:270px}
  .w-h2-esp{width:338px;max-width:min(100%, 338px)}
  .esp .h2{font-size:28px;line-height:1.1em}   /* 30,8px medidos, nao os .9em das outras */
  .cta-esp{width:358px;margin-top:0}
  .cta-esp .cta-frase{width:305px;max-width:min(100%, 305px)}
}