/* ==========================================================================
   Veritas - Hospital Veterinario 24h em Aldeia (replica fiel da original)
   Todos os valores vieram da medicao: _original/fonte/computado-d.json (1440px),
   computado-m.json (390px) e do CSS do Elementor da pagina (post 1524),
   extraido em _tmp/post-1524.css. Nada aqui foi estimado no olho.
   Pontos de quebra da original: 1366px, 1024px e 767px.
   ========================================================================== */

/* ---------- fontes proprias (as mesmas 4 faces da original: so 400 e 600) --- */
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fontes/Sora-Regular.woff2) format('woff2'),url(assets/fontes/Sora-Regular.woff) format('woff')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;
  src:url(assets/fontes/Sora-SemiBold.woff2) format('woff2'),url(assets/fontes/Sora-SemiBold.woff) format('woff')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fontes/Poppins-Regular.woff2) format('woff2'),url(assets/fontes/Poppins-Regular.woff) format('woff')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url(assets/fontes/Poppins-SemiBold.woff2) format('woff2'),url(assets/fontes/Poppins-SemiBold.woff) format('woff')}

:root{
  --azul:#1B1D4E;          /* fundo escuro das secoes 1, 4, 5, 8 e 9 */
  --verde:#88BC2C;         /* cartoes de diferencial e cabeca do FAQ */
  --ciano:#E9FDFF;         /* fundo da secao de equipe */
  --verde-chip:#D8E6D4;    /* fundo dos chips do hero */
  --verde-texto:#3F742E;   /* texto dos chips */
  --cinza-texto:#303030;
  --largura:1140px;        /* content width do Elementor nesta pagina */
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;font-size:16px;line-height:1.5;color:#000;background:#fff;overflow-x:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,
  "Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}
img{max-width:100%;height:auto;border:0}
.w-imagem img{display:inline-block;vertical-align:middle}
p{margin:0 0 .9rem}
h1,h2,h3{margin:0;font-weight:inherit}
a{color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- esqueleto das secoes (equivale ao e-con-boxed do Elementor) -----
   A regra da original: o padding lateral fica no bloco de fora (que carrega o
   fundo, largura total) e o padding vertical no bloco de dentro (1140px). ---- */
.sec{position:relative}
.sec > .interno{width:100%;max-width:min(100%, var(--largura));margin-inline:auto;display:flex}

/* ==========================================================================
   SECAO 1 - barra fixa (y797 h103 em 1440; nao ocupa espaco no fluxo)
   ========================================================================== */
.barra-fixa{position:fixed;left:0;right:0;bottom:0;z-index:99;
  background:var(--azul);border-top:1px solid #fff;padding:0 20px}
.barra-fixa > .interno{width:100%;max-width:min(100%, var(--largura));margin-inline:auto;
  display:flex;justify-content:center;gap:20px;padding:20px 0}
.botao-barra{width:396px;max-width:min(100%, 396px)}
.botao-barra .botao{font-family:'Sora',Sans-serif;font-size:18px;font-weight:600;
  line-height:1em;text-transform:uppercase;color:#fff;
  background-image:radial-gradient(at top center,#01AD00 0%,#006B1E 100%);
  border:1px solid #FFFFFF7D;border-radius:3px;padding:22px 10px 20px}
.botao-barra .botao-conteudo{gap:5px}

/* ==========================================================================
   COMPONENTES repetidos (um conserto so vale para todas as aparicoes)
   ========================================================================== */

/* --- botao --- */
.w-botao{position:relative}
.botao{display:inline-block;width:100%;text-align:center;text-decoration:none;
  background-color:transparent;color:#fff;fill:#fff;cursor:pointer;
  transition:background .3s,border .3s,border-radius .3s,box-shadow .3s,transform .4s}
.botao-conteudo{display:flex;flex-direction:row-reverse;justify-content:center;
  align-items:center;gap:5px}
.botao-icone{display:flex;align-items:center}
.botao-icone svg{width:1em;height:1em;fill:currentColor}
.botao-texto{display:block}

/* pulso: keyframe `test` da original, 1.5s infinite, em 5 botoes */
@keyframes test{
  0%  {transform:scale(.9)}
  70% {transform:scale(1);box-shadow:0 0 0 50px rgba(255,255,255,0)}
  100%{transform:scale(.9);box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
.pulso .botao{box-shadow:0 0 0 0 rgba(0,0,0,.5);animation:test 1.5s infinite}

/* verde grande (hero, prova, equipe) */
.botao-whats-g{width:338px;max-width:min(100%, 338px)}
.botao-whats-g .botao{font-family:'Poppins',Sans-serif;font-size:20px;font-weight:600;
  line-height:1em;text-transform:uppercase;
  background-image:radial-gradient(at top center,#26CA00 0%,#447933 100%);
  border:5px solid #FFFFFF52;border-radius:100px;padding:22px 10px}
.botao-whats-g .botao-conteudo{gap:10px}

/* vermelho de borda dupla (pilares e FAQ) */
.botao-vermelho{width:396px;max-width:min(100%, 396px)}
.botao-vermelho .botao{font-family:'Poppins',Sans-serif;font-size:18px;font-weight:600;
  line-height:1em;background-image:radial-gradient(at top center,#F90000 0%,#6B0000 100%);
  border:7px double #FFFFFF7D;padding:22px 10px}

/* vermelho redondo (so o "Ligar Agora" do hero) */
.botao-ligar{width:24.973%;max-width:24.973%}
.botao-ligar .botao{font-family:'Roboto',Sans-serif;font-size:17px;font-weight:600;
  line-height:1;text-transform:uppercase;
  background-image:radial-gradient(at top center,#F90000 0%,#6B0000 100%);
  border:5px solid #FFFFFF8F;border-radius:100px;padding:15px 10px}

/* --- linha de aviso abaixo dos botoes --- */
.aviso{width:396px;max-width:min(100%, 396px);margin-top:-10px;text-align:center}
.aviso p{margin:0;font-family:'Sora',Sans-serif;font-size:17px;font-weight:400;
  line-height:1.4em;color:#000}

/* ---- DEFEITO REPRODUZIDO DA ORIGINAL, nao e escolha de design ----
   O Elementor desliga a imagem de fundo dos containers do 4o em diante ate o
   proprio JS marcar a classe `e-lazyloaded`:

     .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) *
       { background-image: none !important }

   Como o LiteSpeed adia o JS, nada disso roda antes do primeiro gesto: a pagina
   chega ao visitante com os quatro CTAs de baixo SEM degrade, so com a borda.
   Depois do gesto, cada container acende quando chega perto da tela. Medido na
   original em 1440x900, container a container:

     bf08304 (prova)        acende com o topo a 1013px do topo da tela
     a7e988e (diferenciais) a 1037px
     d585641 (equipe)       a 1057px
     aea1e9d (pilares)      a 1009px
     42c826c (FAQ)          a 1075px
     c04f805 (rodape)       a 1031px

   Ou seja: viewport (900) + ~200px de folga. O site.js reproduz com um
   IntersectionObserver de rootMargin 0 0 200px 0, ligado no primeiro gesto.
   O que essa regra esconde ate o lazy soltar, medido na original: o degrade
   dos 4 CTAs de baixo E o verde das 7 cabecas do FAQ (que e um linear-gradient,
   nao background-color - por isso cai junto).
   Vale avisar o Rafael: sem rolar, o visitante ve 4 CTAs quase invisiveis e um
   FAQ todo azul-marinho. Apagar este bloco (e a classe .fundo-adiado) devolve os degrades. */
/* A regra da original tem DOIS seletores: o proprio container e os
   descendentes dele. Com so os descendentes, um degrade aplicado no
   container (o rodape da /veterinario-em-recife-v2/) aparece no estado
   servido e a original nao mostra. */
.fundo-adiado:not(.fundo-pronto),
.fundo-adiado:not(.fundo-pronto) *{background-image:none !important}

/* --- chip de lista com icone --- */
.chip{width:auto;max-width:100%;padding:5px 15px;background:var(--verde-chip);
  border:1px solid #091D0359;border-radius:1300px;--tam-icone:14px}
.lista-icones{margin:0;padding:0;list-style:none}
.item-lista{display:flex;align-items:center;position:relative}
.icone-lista{display:flex;flex:0 0 auto;position:relative}
.icone-lista svg,.icone-lista img{width:var(--tam-icone);height:var(--tam-icone);
  margin-right:calc(var(--tam-icone)/4);fill:#26CA00;transition:fill .3s}
.texto-lista{padding-left:5px;font-family:'Roboto',Sans-serif;font-size:16px;
  font-weight:400;line-height:1.5;color:var(--verde-texto);transition:color .3s}

/* --- carrossel (equivale ao image-carousel do Elementor rodando com swiper) --- */
.w-carrossel{position:relative;width:100%;margin-top:20px}
.carrossel-janela{position:relative;z-index:1;margin:0 30px;padding-bottom:30px;
  overflow:hidden}
.carrossel-trilho{display:flex;position:relative;z-index:1;will-change:transform;
  transition:transform .5s ease}
.slide{position:relative;flex:0 0 auto;width:100%;text-align:center}
/* O teto de 1/n so vale ANTES do JS, igual a original:
   `.elementor-image-carousel-wrapper:not(.swiper-initialized) .swiper-slide`.
   Depois que o carrossel liga, quem manda e a largura calculada pelo JS. */
.carrossel-janela:not(.iniciado) .slide{max-width:calc(100% / var(--laminas, 4))}
.slide-interno{margin:0}
.slide-img{display:inline;max-width:100%}
.seta{position:absolute;top:calc(50% - 15px);transform:translateY(-50%);
  z-index:1;display:flex;cursor:pointer}
/* bolinhas: so existem depois que o JS roda, igual a original (o Swiper as cria).
   Medidas da original: caixa 24px colada em bottom:5px do widget, bolinha 6x6,
   raio 50%, margem 0 6px. */
.carrossel-paginacao{position:absolute;left:0;bottom:5px;width:100%;height:24px;
  line-height:24px;text-align:center;z-index:1}
.carrossel-paginacao .bolinha{display:inline-block;width:6px;height:6px;margin:0 6px;
  border-radius:50%;opacity:1;cursor:pointer;vertical-align:middle}
.seta svg{width:1em;height:1em;fill:currentColor}
.seta-prev{left:0}
.seta-next{right:0}

/* ==========================================================================
   SECAO 2 - HERO  (1440: altura 923, min-height 780, padding 5em)
   ========================================================================== */
.hero{padding:0 32px;background-color:#fff;
  background-image:url(assets/img/Dobra-1-Emergencia-Veteriaria-1.webp);
  background-position:top center;background-repeat:no-repeat;background-size:cover}
.hero > .interno{flex-direction:column;justify-content:center;align-items:flex-start;
  gap:20px;min-height:780px;padding:80px 0}
.hero-logo{display:flex;gap:20px;position:relative;width:465px;max-width:100%}
.logo{position:relative;max-width:min(100%, 195px);text-align:center}
.logo img{width:195px;height:auto}
.hero-h1{position:relative;width:595.969px;max-width:min(100%, 595.969px);flex:0 0 auto}
.hero-h1 .titulo{font-family:'Sora',Sans-serif;font-size:65px;font-weight:600;
  line-height:1.1em;color:#000}
.hero-sub{position:relative;width:473px;max-width:min(100%, 473px);margin-bottom:20px}
.hero-sub p{margin:0;font-family:'Sora',Sans-serif;font-size:20px;font-weight:400;
  line-height:1.4em;color:#000}
.hero-whats{flex:0 0 auto}
.hero-aviso{width:396px}
.chip-2{--tam-icone:14px}

/* ==========================================================================
   SECAO 3 - NUMEROS
   ========================================================================== */
.numeros{padding:0 16px;background-color:#fff}
.numeros > .interno{flex-wrap:wrap;justify-content:space-between;gap:0;
  padding:0 0 80px}
.w-contador{position:relative;width:275px;max-width:min(100%, 275px);padding:20px 10px 0;
  border-radius:10px}
.contador{display:flex;flex-direction:column-reverse;justify-content:center;
  align-items:stretch}
.contador-numero{display:flex;text-align:center;color:var(--azul);
  font-family:'Sora',Sans-serif;font-size:45px;font-weight:600;line-height:1}
.contador-prefixo{flex-grow:1;text-align:end;white-space:pre-wrap}
.contador-valor{flex-grow:0;text-align:center}
.contador-sufixo{flex-grow:1;text-align:start;white-space:pre-wrap}
.contador-titulo{display:flex;justify-content:center;align-items:center;
  font-family:'Sora',Sans-serif;font-size:18px;font-weight:400;line-height:45px;
  color:#000}

/* ==========================================================================
   SECAO 4 - PROVA SOCIAL
   ========================================================================== */
.prova{padding:0 16px;background-color:var(--azul)}
.prova > .interno{flex-direction:column;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:20px;padding:80px 0}
.prova-h2{position:relative;width:905px;max-width:min(100%, 905px);margin-top:-5px;text-align:center}
.prova-h2 .titulo{font-family:'Sora',Sans-serif;font-size:49px;font-weight:600;
  line-height:1.1em;letter-spacing:-.5px;color:#fff}

.faixa-google{display:flex;justify-content:flex-start;align-items:center;gap:20px;
  position:relative;width:95%;padding:16px;border-radius:6px;background:#fff}
.google-img{position:relative;max-width:100%;text-align:start}
.google-img img{width:185px;height:auto}
.google-nota{position:relative;width:62%;max-width:62%;text-align:start}
.google-nota .titulo{font-family:'Sora',Sans-serif;font-size:20px;font-weight:600;
  line-height:1.1em;letter-spacing:-.5px;color:#000}
.google-selo{position:relative;text-align:end}
.google-selo .titulo{font-family:'Sora',Sans-serif;font-size:15px;font-weight:600;
  line-height:1.1em;letter-spacing:-.5px}
.google-selo span{display:inline;padding:3px 12px;border-radius:5px;
  background:#267251;color:#fff}

.carrossel-depo{--laminas:4}
.carrossel-depo .seta{font-size:22px;color:#fff}
.carrossel-depo .bolinha{background:#FFFFFF69}
.carrossel-depo .bolinha.ativa{background:#fff}
.carrossel-depo .slide-img{border-radius:5px}

/* ==========================================================================
   SECAO 5 - DIFERENCIAIS
   ========================================================================== */
.diferenciais{padding:0 16px;background-color:var(--azul)}
.diferenciais > .interno{flex-wrap:wrap;justify-content:space-between;gap:20px;
  padding:0 0 80px}
.w-divisor{position:relative;width:100%;max-width:100%;margin-bottom:80px}
.divisor{display:flex}
.divisor span{display:flex;width:100%;border-top:1px solid #fff}
.w-caixa-icone{position:relative;width:230px;max-width:min(100%, 230px);padding:20px 10px 0;
  background:var(--verde);border:1px solid #E9FDFF4D;border-radius:10px}
.caixa-icone{display:flex;flex-direction:column;gap:15px;text-align:center}
.caixa-icone-ico{text-align:center;line-height:0}
.icone{display:inline-block;width:40px;height:40px;padding:10px;border-radius:50%;
  background:#fff;text-align:center;transition:.3s}
.icone svg{position:relative;display:block;width:20px;height:20px;fill:var(--verde)}
.caixa-icone-conteudo{text-align:center}
.caixa-icone-titulo{margin:8px 0 16px;text-align:center;font-family:'Sora',Sans-serif;
  font-size:16px;line-height:1.2}
.caixa-icone-titulo span{display:inline;font-family:'Sora',Sans-serif;font-size:16px;
  font-weight:400;color:#fff}

/* ==========================================================================
   SECAO 6 - EQUIPE
   ========================================================================== */
.equipe{padding:0 32px;background-color:var(--ciano);border-bottom:1px solid #1B1D4E2E}
.equipe > .interno{flex-direction:column;justify-content:center;gap:20px;padding:80px 0}
.equipe-h2{position:relative;width:692px;max-width:min(100%, 692px);align-self:center;text-align:center}
.equipe-h2 .titulo{font-family:'Sora',Sans-serif;font-size:40px;font-weight:600;
  line-height:1.2em;color:var(--azul)}
.equipe-sub{position:relative;width:589px;max-width:min(100%, 589px);align-self:center;text-align:center}
.equipe-sub p{margin:0;font-family:'Sora',Sans-serif;font-size:20px;font-weight:400;
  line-height:1.4em;color:var(--cinza-texto)}
.carrossel-equipe{--laminas:4}
.carrossel-equipe .seta{font-size:25px;color:var(--azul)}
.carrossel-equipe .bolinha{background:#1B1D4E47}
.carrossel-equipe .bolinha.ativa{background:var(--azul)}
.carrossel-equipe .slide-img{border:3px solid var(--azul);border-radius:10px}
.equipe-whats{align-self:flex-start}
.equipe-aviso{align-self:center}

/* ==========================================================================
   SECAO 7 - PILARES
   ========================================================================== */
.pilares{padding:0 32px;border-bottom:1px solid #1B1D4E2E}
.pilares > .interno{flex-direction:column;justify-content:center;align-items:center;
  gap:20px;padding:80px 0}
.pilares-h2{position:relative;width:805px;max-width:min(100%, 805px);align-self:center;text-align:center}
.pilares-h2 .titulo{font-family:'Sora',Sans-serif;font-size:40px;font-weight:700;
  line-height:1.2em;color:var(--azul)}
.pilares-texto{position:relative;width:768px;max-width:min(100%, 768px);align-self:center;
  text-align:center;font-family:'Sora',Sans-serif;font-size:18px;font-weight:400;
  line-height:1.4em;color:var(--cinza-texto)}
.pilares-texto p{margin:0 0 .9rem}
.pilares-texto p:last-child{margin-bottom:0}
.pilares-img{position:relative;width:421px;max-width:min(100%, 421px);align-self:center;text-align:center}
.pilares-img img{width:411px;height:auto}

/* ==========================================================================
   SECAO 8 - FAQ
   ========================================================================== */
.faq{padding:0 32px;background-color:var(--azul);border-bottom:1px solid #1B1D4E2E}
.faq > .interno{flex-direction:column;flex-wrap:wrap;justify-content:space-around;
  align-items:center;gap:27px;padding:80px 0 112px}
.faq-h2{position:relative;width:905px;max-width:min(100%, 905px);margin-top:-5px;text-align:center}
.faq-h2 .titulo{font-family:'Sora',Sans-serif;font-size:43px;font-weight:600;
  line-height:1.1em;letter-spacing:-.5px;color:#fff}
.w-sanfona{position:relative;z-index:1;width:641px;max-width:min(100%, 641px);align-self:center}
.sanfona-item:not(:last-child){margin-bottom:15px}
.sanfona-cabeca{font-size:16px;line-height:16px;padding:20px 15px 18px;border:1px solid #132445;border-radius:8px;
  background-color:transparent;
  /* e background-IMAGE, por isso some junto com os degrades ate o lazy soltar */
  background-image:linear-gradient(132deg,var(--verde),var(--verde));cursor:pointer}
.sanfona-icone{float:right;margin-right:2px;text-align:right;color:#fff}
.sanfona-icone svg{display:inline;width:16px;height:16px;margin-left:-5px;fill:#fff}
.sanfona-cabeca .ico-aberto{display:none}
.sanfona-cabeca[aria-expanded="true"] .ico-fechado{display:none}
.sanfona-cabeca[aria-expanded="true"] .ico-aberto{display:inline}
.sanfona-titulo{display:inline;background-color:rgba(255,255,255,0);text-decoration:none;font-family:'Sora',Sans-serif;
  font-size:20px;font-weight:600;line-height:1.4em;color:#fff}
.sanfona-resposta{padding:15px;border-bottom:1px solid var(--verde);
  font-family:'Sora',Sans-serif;font-size:18px;font-weight:400;line-height:1.4em;color:#fff}
.sanfona-resposta[hidden]{display:none}
.sanfona-resposta p:last-child{margin-bottom:0}
.faq-aviso{color:#E9E9E9}
.faq-aviso p{color:#E9E9E9}

/* ==========================================================================
   SECAO 9 - RODAPE  (line-height .1em e proposital na original)
   ========================================================================== */
.rodape{background-color:var(--azul)}
.rodape > .interno{flex-direction:column;align-items:center;gap:20px;padding:0 0 160px}
.rodape-texto{position:relative;width:555px;max-width:min(100%, 555px);margin-top:6px;
  align-self:center;text-align:center;font-family:'Sora',Sans-serif;font-size:13px;
  font-weight:400;line-height:.1em;color:#FFFFFFB3}
.rodape-texto p{margin:0 0 .9rem}
.rodape-texto p:last-child{margin-bottom:0}

/* ==========================================================================
   1366px
   ========================================================================== */
@media (max-width:1366px){
  .logo{margin-bottom:-6px}
  .hero-h1 .titulo{font-size:44px}
  .numeros > .interno{justify-content:center;gap:10px}
  .w-contador{width:240px;max-width:min(100%, 240px)}
  .prova > .interno{gap:20px}
  .google-nota{width:55%;max-width:55%}
  .diferenciais > .interno{gap:20px}
  .equipe-sub{width:611px;max-width:min(100%, 611px)}
  .pilares-texto{width:586px;max-width:min(100%, 586px)}
}
@media (max-width:1366px) and (min-width:768px){
  .faixa-google{width:94%}
}

/* ==========================================================================
   1024px
   ========================================================================== */
@media (max-width:1024px){
  .hero > .interno{justify-content:flex-start;align-items:center;padding:48px 0 560px}
  .hero{background-position:-387px 606px;background-size:1200px auto}
  .hero-logo{justify-content:center}
  .logo{text-align:center}
  .hero-h1{width:476px;max-width:min(100%, 476px);text-align:center}
  .hero-sub{width:447px;max-width:min(100%, 447px);text-align:center}
  .equipe > .interno{justify-content:space-around;align-items:flex-start}
  .equipe-h2{width:349px;max-width:min(100%, 349px);}
  .equipe-h2 .titulo{font-size:40px}
  /* a tipografia tem de descer para o <p> e para o <span> de dentro: posta so
     no involucro ela nao alcanca o texto, e a caixa fica 11px mais alta em
     1024 (4 linhas de 28 em vez de 4 de 25,2) */
  .equipe-sub{width:544px;max-width:min(100%, 544px)}
  .equipe-sub p,.equipe-sub span,.equipe-sub strong{font-size:18px;line-height:1.4em}
  .pilares > .interno{justify-content:space-around;align-items:flex-start}
  .pilares-h2{width:462px;max-width:min(100%, 462px)}
  .pilares-h2 .titulo{font-size:40px}
  .pilares-texto{width:456px;max-width:min(100%, 456px);font-size:18px}
  .faq > .interno{justify-content:center;align-items:center}
  .w-sanfona{width:636px;max-width:min(100%, 636px);align-self:center}
}

/* ==========================================================================
   767px - celular
   ========================================================================== */
@media (max-width:767px){
  .sec > .interno{max-width:min(100%, 767px)}

  /* barra fixa */
  .barra-fixa > .interno{gap:0}
  .botao-barra{width:338px;max-width:min(100%, 338px)}
  .botao-barra .botao{font-size:15px}

  /* hero */
  .hero{background-position:-215px 705px;background-size:616px auto;padding:0 16px}
  .hero > .interno{flex-wrap:wrap;justify-content:flex-start;align-items:center;
    padding:32px 0 256px}
  .hero-logo{width:338px;max-width:100%;justify-content:center;align-items:center;flex-wrap:wrap}
  .logo{width:143px;max-width:min(100%, 143px);margin-bottom:0;align-self:center}
  .logo img{width:143px;height:auto}
  .hero-h1{width:338px;max-width:min(100%, 338px);text-align:center}
  .hero-h1 .titulo{font-size:40px}
  .hero-sub{width:296px;max-width:min(100%, 296px);margin-bottom:0;text-align:center;align-self:center}
  .hero-sub p{font-size:18px}
  .hero-whats{width:338px;max-width:min(100%, 338px);margin:1px 0 -10px}
  .hero-whats .botao{font-size:16px}
  .botao-ligar{width:234px;max-width:min(100%, 234px);margin:-1px -1px 0}
  .botao-ligar .botao{font-size:16px;border-width:5px;border-radius:80px;padding:10px 5px}
  .hero-aviso{width:338px;max-width:min(100%, 338px);margin-top:-10px;font-size:14px}
  .hero-aviso p{font-size:14px}
  .chip-2{margin:10px;--tam-icone:42px}
  .chip-2 .item-lista{justify-content:start}

  /* numeros */
  .numeros{padding:0 16px}
  .numeros > .interno{gap:20px;justify-content:center;padding:32px 0 48px}
  .w-contador{width:42%;max-width:42%;padding:20px 10px 0;border-radius:5px}
  .contador{flex-direction:column-reverse;gap:10px}
  .contador-numero{font-size:30px}
  .contador-prefixo{flex-grow:0}
  .contador-sufixo{flex-grow:1}
  .contador-titulo{justify-content:center;font-size:17px;line-height:1.3em}

  /* prova */
  .prova > .interno{align-items:center;gap:20px;padding:48px 0}
  .prova-h2{width:338px;max-width:min(100%, 338px);margin-top:-5px}
  .prova-h2 .titulo{font-size:27px}
  .faixa-google{width:75%;justify-content:center;flex-wrap:wrap}
  .google-nota{width:338px;max-width:min(100%, 338px);margin-top:-4px;text-align:center}
  .google-nota .titulo{font-size:20px}
  .google-selo{margin-top:3px}
  .google-selo .titulo{font-size:18px;line-height:1.1em}
  .carrossel-depo{width:100%;max-width:100%;margin-top:0;--laminas:1}
  .prova-whats{width:338px;max-width:min(100%, 338px);margin:1px 0 -10px}
  .prova-whats .botao{font-size:16px}

  /* diferenciais */
  .diferenciais > .interno{justify-content:space-around;gap:20px;padding:0 0 48px}
  .w-divisor{margin-bottom:48px}
  .w-caixa-icone{width:42%;max-width:42%;border-radius:5px}

  /* equipe */
  .equipe{padding:0 16px}
  .equipe > .interno{align-items:center;padding:48px 0}
  .equipe-h2{width:338px;max-width:min(100%, 338px);text-align:center}
  .equipe-h2 .titulo{font-size:27px}
  .equipe-sub{width:338px;max-width:min(100%, 338px);text-align:center}
  .equipe-sub p{font-size:18px;line-height:1.4em}
  .carrossel-equipe{width:100%;max-width:100%}
  .carrossel-equipe .slide-img{border-width:2px;border-radius:8px}
  .equipe-whats{width:338px;max-width:min(100%, 338px);margin:1px 0 -10px;align-self:center}
  .equipe-whats .botao{font-size:16px}
  .equipe-aviso{width:338px;max-width:min(100%, 338px);margin-top:5px}
  .equipe-aviso p{font-size:14px}

  /* pilares */
  .pilares{padding:0}
  .pilares > .interno{align-items:center;padding:48px 0}
  .pilares-h2{width:338px;max-width:min(100%, 338px);text-align:start}
  .pilares-h2 .titulo{font-size:29px}
  .pilares-texto{width:338px;max-width:min(100%, 338px);text-align:start;font-size:19px}
  .pilares-img{width:338px;max-width:min(100%, 338px)}
  .pilares-img img{width:100%;height:auto}
  .pilares-cta{width:338px;max-width:min(100%, 338px)}
  .pilares-aviso{width:338px;max-width:min(100%, 338px);margin-top:-10px}
  .pilares-aviso p{font-size:14px}

  /* FAQ */
  .faq{padding:0 16px}
  .faq > .interno{align-items:center;padding:48px 0}
  .faq-h2{width:338px;max-width:min(100%, 338px)}
  .faq-h2 .titulo{font-size:27px}
  .w-sanfona{width:338px;max-width:min(100%, 338px)}
  .sanfona-titulo{font-size:16px;line-height:1.3em}
  .sanfona-resposta{font-size:16px}
  .faq-cta{width:338px;max-width:min(100%, 338px)}
  .faq-aviso{width:338px;max-width:min(100%, 338px);margin-top:-10px}
  .faq-aviso p{font-size:14px}

  /* rodape */
  .rodape{padding:0}
  .rodape > .interno{padding:48px 0}
  .rodape-texto{width:227px;max-width:min(100%, 227px);margin-top:0;font-size:12px;line-height:1.5em}
}

/* ==========================================================================
   PAGINA /veterinario-24h-em-recife-v2/  ->  recife-24h.html   (body.p-recife-24h)
   Só o que difere da pagina de Aldeia ja fechada. Todo valor saiu de
   _original/recife-24h/fonte/computado-{d,t,m}.json, lido com scripts/tres.py,
   que imprime d|t|m lado a lado justamente para nao confundir o valor base com
   o de media query. O escopo `.p-recife-24h` garante que nada aqui alcanca o
   index.html.
   ========================================================================== */

/* --- hero --- */
.p-recife-24h .hero > .interno{padding:80px 0 96px}
.p-recife-24h .hero-h1{width:544px;max-width:min(100%, 544px)}
/* a caixa do h1 e o pilar que define a altura do hero: 65px/1.1em em 1440 */

/* --- diferenciais: aqui a caixa e transparente com borda ciano e o circulo do
   icone e VERDE com o desenho BRANCO. Na pagina de Aldeia e o inverso (caixa
   verde, circulo branco, desenho verde), por isso precisa de variante. --- */
.p-recife-24h .diferenciais > .interno{align-items:center;padding:80px 0}
.p-recife-24h .w-caixa-icone{background:transparent}
.p-recife-24h .icone{background:var(--verde)}
.p-recife-24h .icone svg{fill:#fff}

/* --- equipe --- */
.p-recife-24h .equipe-sub{width:568px;max-width:min(100%, 568px)}

/* --- prova: o h2 do celular troca a margem de cima pela de baixo --- */

/* --- botao vermelho: Sora em caixa-alta (na de Aldeia e Poppins sem caixa-alta) --- */
.p-recife-24h .botao-vermelho .botao{font-family:'Sora',Sans-serif;text-transform:uppercase}

/* --- FAQ: o titulo desta pagina e peso 400 (na de Aldeia e 600) e o aviso
   embaixo dele e branco (na de Aldeia e #E9E9E9) --- */
.p-recife-24h .faq-h2 .titulo{font-weight:400}
.p-recife-24h .faq-aviso,.p-recife-24h .faq-aviso p{color:#fff}

/* --- rodape: 64px em cima e embaixo, em vez dos 160px de baixo da outra --- */
.p-recife-24h .rodape > .interno{padding:64px 0}

/* --- container vazio que fecha a pagina (h20 nas tres larguras) --- */
.p-recife-24h .espaco{padding:0 10px}
.p-recife-24h .espaco > .interno{flex-direction:column;padding:10px 0}

@media (max-width:1024px){
  /* em 1024 o h1 desta pagina continua com 544px e alinhado a esquerda; na de
     Aldeia ele vira 476px centralizado */
  .p-recife-24h .hero-h1{width:544px;max-width:min(100%, 544px);text-align:start}
  /* em 1024 o logo desta pagina continua encostado a esquerda do bloco de 465px
     (na de Aldeia ele centraliza). Peguei isso pelo recorte lado a lado, nao
     pela geometria: o involucro do logo nao tem texto proprio, entao o
     conferidor passa por ele sem comparar nada. */
  .p-recife-24h .hero-logo{justify-content:flex-start}
  /* o subtitulo do hero nao encolhe em 1024 nesta pagina (na de Aldeia vai a 447) */
  .p-recife-24h .hero-sub{width:473px;max-width:min(100%, 473px)}
  /* repetidos de proposito: ver a nota de especificidade acima */
  .p-recife-24h .hero > .interno{padding:48px 0 560px}
  .p-recife-24h .equipe-sub{width:544px;max-width:min(100%, 544px)}
  /* a tipografia tem de descer para o <p> E para o <span> de dentro: posta so
     no involucro, ela nao chega ao texto e a caixa fica 3px mais alta */
  .p-recife-24h .equipe-sub p,.p-recife-24h .equipe-sub span{font-size:18px;line-height:1.4em}
}

@media (max-width:767px){
  /* hero: o recorte da foto de fundo e outro, e a secao sobe 25px a de baixo */
  .p-recife-24h .hero{background-position:-442px 681px;background-size:1000px auto;
    margin-bottom:-25px}
  .p-recife-24h .hero > .interno{padding:48px 0 432px}
  .p-recife-24h .hero-logo{justify-content:center;align-items:flex-start}
  .p-recife-24h .logo{width:159px;max-width:min(100%, 159px)}
  .p-recife-24h .logo img{width:159px;height:auto}
  .p-recife-24h .hero-h1{width:338px;max-width:min(100%, 338px);text-align:center}
  .p-recife-24h .hero-h1 .titulo{font-size:42px}
  /* repetido por especificidade: a regra de 1024 acima alcanca 390 e ganharia
     da regra base de 767 */
  .p-recife-24h .hero-sub{width:296px;max-width:min(100%, 296px)}
  .p-recife-24h .hero-whats{margin:-15px}
  .p-recife-24h .botao-ligar{margin:-1px}
  .p-recife-24h .hero-aviso{margin-top:-15px}

  /* diferenciais */
  .p-recife-24h .diferenciais > .interno{padding:48px 0}

  /* rodape: repetido por especificidade (a regra de 1440 ganharia aqui) */
  .p-recife-24h .rodape > .interno{padding:48px 0}

  /* equipe */
  .p-recife-24h .equipe-h2{width:292px;max-width:min(100%, 292px)}
  .p-recife-24h .equipe-h2 .titulo{font-size:26px}
  .p-recife-24h .equipe-sub{width:313px;max-width:min(100%, 313px)}
  .p-recife-24h .equipe-whats{margin:-15px}

  /* pilares */
  .p-recife-24h .pilares-h2 .titulo{font-size:28px}

  /* prova e FAQ: margem de baixo negativa em vez de margem de cima */
  .p-recife-24h .prova-h2{margin:0 0 -5px}
  .p-recife-24h .faq-h2{margin:0 0 -5px}
}

/* ==========================================================================
   COMPONENTES NOVOS, usados pelas paginas institucionais (nao existem na de
   Aldeia ja fechada, entao sao classes proprias e nao mexem nela)
   ========================================================================== */

/* --- faixa de texto correndo no topo ---
   Estado servido: container VAZIO de 22px (10px de padding + 1px de borda em
   cima e embaixo). As copias do texto entram no primeiro gesto, pelo site.js.
   Medidas da original com o JS ligado: copia 532.078x33.6, padding 4.8px,
   16px/600, espacamento 1.6px, caixa alta, branco; trilho com `marquee`
   25s infinite linear. */
.faixa-marquee{position:relative;z-index:99;padding:10px;
  border-top:1px solid #000;border-bottom:1px solid #000;
  background-color:rgba(255,255,255,0);
  background-image:radial-gradient(at top center,#FF0000 0%,#A30000 65%)}
.faixa-marquee [data-marquee-shadow],
.faixa-verde [data-marquee-shadow]{position:absolute;visibility:hidden;
  top:10px;left:10px;white-space:nowrap}
.faixa-marquee [data-marquee-overflow],
.faixa-verde [data-marquee-overflow]{display:block;overflow:hidden}
.faixa-marquee [data-marquee-container],
.faixa-verde [data-marquee-container]{display:flex;animation:marquee 25s infinite linear}
.faixa-marquee [data-marquee-style],
.faixa-verde [data-marquee-style]{display:flex;flex-shrink:0;padding:4.8px;
  font-size:16px;font-weight:600;line-height:24px;letter-spacing:1.6px;
  text-transform:uppercase;color:#fff}
@keyframes marquee{100%{transform:translateX(-100%)}}

/* --- icone de mapa: fonte de icones do Happy Elementor Addons, a mesma da
   original (glifo ed18). Os outros quatro icones do rodape sao SVG. --- */
@font-face{font-family:'Huge Icons';font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fontes/huge-icons.woff2) format('woff2')}
.huge{font-family:'Huge Icons';font-style:normal;font-weight:400;line-height:1}
.huge-maps-location-01:before{content:"\ed18"}

/* --- hero institucional --- */
.hero-inst{padding:0 32px;background-color:#fff;background-repeat:no-repeat;
  border-bottom:1px solid #1B1D4E2E;
  background-size:cover;background-position:top center;
  background-image:url(assets/img/Dobra-1-Institucional-Vet-Veritas.webp)}
.hero-inst > .interno{flex-direction:column;justify-content:space-around;
  align-items:flex-start;gap:20px;padding:80px 0}
.logo-inst{position:relative;max-width:min(100%, 221px);text-align:center}
.logo-inst img{width:221px;height:auto}
.hero-inst-h2{position:relative;width:542px;max-width:min(100%, 542px);margin-top:-3px}
.hero-inst-h2 .titulo,.hero-inst-h2 b{font-family:'Sora',Sans-serif;font-size:50px;
  font-weight:700;line-height:1.1em;color:#000}
.hero-inst-sub{position:relative;width:462px;max-width:min(100%, 462px);margin-bottom:20px}
.hero-inst-sub p{margin:0;font-family:'Sora',Sans-serif;font-size:20px;font-weight:400;
  line-height:1.4em;color:#000}

/* --- rodape institucional (duas colunas) --- */
/* o fundo e um DEGRADE, por isso cai na regra de lazy do Elementor e so acende
   depois do primeiro gesto (classe fundo-adiado no HTML) */
.rodape-inst{padding:0 32px;border-top:1px solid #1B1D4E2E;
  background-color:rgba(255,255,255,0);
  background-image:radial-gradient(at bottom right,#E9FDFF99 0%,#E9FDFF 100%)}
.rodape-inst > .interno{flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:20px;padding:80px 0}
.rodape-col{display:flex;flex-direction:column;gap:20px;position:relative;
  width:462px;max-width:min(100%, 462px)}
.rodape-col-dir{align-items:flex-end}
/* as duas colunas do rodape so tem 250px na faixa de 768 a 1024 */
@media (max-width:1024px) and (min-width:768px){
  .rodape-col{width:250px;max-width:min(100%, 250px)}
}
.rodape-end{position:relative;width:100%;max-width:100%}
.rodape-end p{margin:0 0 14.4px;font-family:'Sora',Sans-serif;font-size:17px;
  font-weight:400;line-height:1.5em;color:#000}
.rodape-end p:last-child{margin-bottom:0}
.lista-contato{position:relative;width:189px;max-width:min(100%, 189px);--tam-icone:20px}
.lista-contato .lista-icones{display:flex;flex-wrap:wrap;justify-content:end;margin:0 -8px}
.lista-contato .item-lista{justify-content:end;margin:0 8px;text-align:end}
.lista-contato .icone-lista svg{fill:#54595F}
.lista-fone .texto-lista{padding-left:5px;font-family:'Sora',Sans-serif;font-size:18px;
  font-weight:400;line-height:1.5em;color:#54595F}
.lista-redes .item-lista > a{display:flex;justify-content:end;align-items:center}
/* o involucro do icone tem 4px de padding a direita ALEM dos 5px de margem do
   proprio desenho: 20 + 5 + 4 = 29, e o item inteiro 34 com o padding de 5px do
   span de texto vazio */
.lista-redes .icone-lista{padding-right:4px}
.lista-redes .texto-lista{padding-left:5px}
/* o icone de mapa vem de fonte, nao de SVG: tem de receber o mesmo tamanho e a
   mesma margem que os SVGs, senao sai 16px e some 4px da linha */
.lista-contato .icone-lista .huge{display:block;width:var(--tam-icone);height:var(--tam-icone);
  margin-right:calc(var(--tam-icone)/4);font-size:var(--tam-icone);line-height:var(--tam-icone);
  color:#54595F}
.rodape-assinatura{position:relative;width:100%;max-width:100%;text-align:end}
.rodape-assinatura p{margin:0;font-family:'Sora',Sans-serif;font-size:16px;
  font-weight:400;line-height:1.5em;color:#303030}

/* ==========================================================================
   PAGINA /veterinario-em-recife-v2/  ->  recife.html   (body.p-recife)
   Valores de _original/recife/fonte/computado-{d,t,m}.json, via scripts/tres.py.
   ========================================================================== */
.p-recife .equipe > .interno{justify-content:center}
.p-recife .equipe-h2 .titulo{font-weight:400}
.p-recife .equipe-sub{width:568px;max-width:min(100%, 568px)}
.p-recife .equipe-whats{align-self:flex-start}

.p-recife .prova-h2 .titulo{font-size:43px;font-weight:400}
.p-recife .prova-whats{align-self:center}

/* o FAQ desta pagina tem o titulo peso 400 e a pergunta tambem (na de Aldeia
   os dois sao 600) */
/* o FAQ desta pagina fecha com 80px embaixo; na de Aldeia sao 112px */
.p-recife .faq > .interno{padding:80px 0}
.p-recife .faq-h2 .titulo{font-weight:400}
.p-recife .sanfona-titulo{font-weight:400}
.p-recife .faq-whats{align-self:center}

.p-recife .espaco{padding:0 10px}
.p-recife .espaco > .interno{flex-direction:column;padding:10px 0}

@media (max-width:1024px){
  .p-recife .hero-inst{background-position:-413px 0}
  .p-recife .hero-inst-h2{width:383px;max-width:min(100%, 383px)}
  .p-recife .hero-inst-h2 .titulo,.p-recife .hero-inst-h2 b{font-size:40px}
  .p-recife .hero-inst-sub{width:394px;max-width:min(100%, 394px)}
  .p-recife .hero-inst-sub p{font-size:18px}
  .p-recife .logo-inst{margin-bottom:-6px}
  .p-recife .equipe > .interno{justify-content:space-around}
  .p-recife .equipe-sub{width:544px;max-width:min(100%, 544px)}
  .p-recife .equipe-sub p,.p-recife .equipe-sub span,.p-recife .equipe-sub strong{font-size:18px;line-height:1.4em}
}



@media (max-width:767px){
  /* no celular a foto de fundo do hero e OUTRO arquivo, nao um recorte do mesmo */
  .p-recife .hero-inst{padding:0 16px;background-position:center bottom;
    background-image:url(assets/img/BG-hero-Vet-Veritas-mobile.webp)}
  .p-recife .hero-inst > .interno{flex-wrap:wrap;justify-content:flex-start;
    align-items:center;padding:48px 0 400px}
  .p-recife .hero-inst .logo-inst{width:338px;max-width:min(100%, 338px);margin:-6px;text-align:center}
  .p-recife .hero-inst .logo-inst img{width:196px;height:auto}
  .p-recife .hero-inst-h2{width:319px;max-width:min(100%, 319px);text-align:center}
  .p-recife .hero-inst-h2 .titulo,.p-recife .hero-inst-h2 b{font-size:30px;line-height:1.2em}
  .p-recife .hero-inst-sub{width:338px;max-width:min(100%, 338px);text-align:center}
  .p-recife .hero-whats{width:338px;max-width:min(100%, 338px);margin:-15px}
  .p-recife .hero-whats .botao{font-size:16px}
  .p-recife .botao-ligar{margin:-1px}

  .p-recife .equipe{padding:0 16px}
  /* ATENCAO: flex-wrap:wrap num container COLUNA faz a linha do eixo cruzado
     ter a largura do item mais largo COM as margens dele. Aqui o botao tem
     338 + 15 + 15 = 368, entao a linha fica 368 e o align-items:center passa a
     centralizar todo mundo em x=200 em vez de 195 - os 5px que faltavam em
     todos os textos desta secao. */
  .p-recife .equipe > .interno{flex-wrap:wrap;padding:0}
  .p-recife .equipe-h2{width:295px;max-width:min(100%, 295px);margin:40px 0 0}
  .p-recife .equipe-sub{width:338px;max-width:min(100%, 338px);margin:-5px 0 -15px}
  .p-recife .equipe-whats{align-self:center;margin:-10px 15px 20px}

  .p-recife .prova-h2{margin:0 0 -5px}
  .p-recife .prova-h2 .titulo{font-size:27px}
  .p-recife .prova-whats{margin:0 -15px}

  .p-recife .faq > .interno{padding:48px 0}
  .p-recife .faq-h2{margin:0 0 -5px}
  .p-recife .sanfona-titulo{font-size:20px;line-height:1.2em}
  .p-recife .faq-whats{margin:0 -15px -15px}
  .p-recife .faq-whats .botao{font-size:16px}

  .p-recife .rodape-inst{padding:0 16px}
  .p-recife .rodape-inst > .interno{justify-content:center;padding:48px 0}
  .p-recife .rodape-col{width:100%;max-width:100%;align-items:center}
  /* no celular a coluna da direita ganha um filete em cima (1px solid #1B1D4E).
     A captura devolve `border` VAZIO quando as larguras dos lados diferem, por
     isso esse 1px so apareceu na conferencia de secao, nao na de estilo. */
  .p-recife .rodape-col-dir{width:260px;max-width:min(100%, 260px);padding-top:22px;
    border-top:1px solid #1B1D4E}
  .p-recife .rodape-inst .logo-inst{margin:0 0 -6px}
  .p-recife .rodape-end{width:338px;max-width:min(100%, 338px);text-align:center}
  .p-recife .rodape-end p{font-size:18px}
  .p-recife .rodape-assinatura{width:206px;max-width:min(100%, 206px);text-align:center}
  .p-recife .rodape-assinatura p{font-size:18px}
}

/* ==========================================================================
   PAGINA /veterinario-24h-em-aldeia-v4/  ->  aldeia-24h-v4.html
   (body.p-aldeia-24h-v4). E a mais proxima da pagina ja fechada: so o que
   difere dela esta aqui. Valores de computado-{d,t,m}.json, via tres.py.
   ========================================================================== */
.p-aldeia-24h-v4 .hero-h1{width:584px;max-width:min(100%, 584px)}
/* o CTA do FAQ aqui e o botao verde de WhatsApp, nao o vermelho de borda dupla */
.p-aldeia-24h-v4 .faq-whats{align-self:center}

@media (max-width:1024px){
  /* repetido por especificidade: a regra de 1440 acima ganharia da base de 1024 */
  .p-aldeia-24h-v4 .hero-h1{width:476px;max-width:min(100%, 476px)}
}

@media (max-width:767px){
  /* o recorte da foto do hero e outro e a secao sobe 1px a de baixo */
  .p-aldeia-24h-v4 .hero{background-position:-240px 680px;margin-bottom:-1px}
  .p-aldeia-24h-v4 .hero-h1{width:338px;max-width:min(100%, 338px)}
  .p-aldeia-24h-v4 .equipe-whats{margin:1px 0 4px}
  .p-aldeia-24h-v4 .equipe-aviso{margin-top:-10px}
  .p-aldeia-24h-v4 .prova-h2{margin:0 0 -5px}
  .p-aldeia-24h-v4 .faq-h2{margin:0 0 -5px}
  .p-aldeia-24h-v4 .faq-whats{width:338px;max-width:min(100%, 338px);margin:1px 0 -10px}
  .p-aldeia-24h-v4 .faq-whats .botao{font-size:16px}
}

/* ==========================================================================
   PAGINAS DE ESPECIALIDADE  ->  oncologista.html e odontologista.html
   (body.p-especialidade). As duas sao gemeas: mesma altura nas tres larguras,
   so muda uma palavra no h2. Valores de computado-{d,t,m}.json, via tres.py.
   ========================================================================== */

/* --- botao verde chapado (cor solida, nao degrade: nao cai no lazy) --- */
.botao-verde-chapado{width:396px;max-width:min(100%, 396px)}
.botao-verde-chapado .botao{font-family:'Poppins',Sans-serif;font-size:18px;font-weight:600;
  line-height:1em;background-color:var(--verde);border-radius:3px;padding:22px 10px;
  box-shadow:0 0 0 0 rgba(0,0,0,.5)}
.botao-verde-chapado .botao-conteudo{gap:5px}

/* --- botao branco de texto verde (CTA do FAQ destas duas paginas) --- */
.botao-branco-verde{width:396px;max-width:min(100%, 396px)}
.botao-branco-verde .botao{font-family:'Poppins',Sans-serif;font-size:18px;font-weight:600;
  line-height:1em;background-color:#fff;color:var(--verde);fill:var(--verde);
  border-radius:3px;padding:22px 10px}
.botao-branco-verde .botao-conteudo{gap:5px}

/* --- "Ligar Rapido": fundo #CE6261, Roboto 15/500, SEM icone e com o conteudo
   na ordem normal (os outros botoes sao row-reverse). Em 1440 e 1024 ele ocupa
   a largura do involucro; no celular vira inline e centraliza. --- */
.botao-ligar-rapido{width:285px;max-width:min(100%, 285px)}
.botao-ligar-rapido .botao{font-family:'Roboto',Sans-serif;font-size:15px;font-weight:500;
  line-height:1em;background-color:#CE6261;border-radius:3px;padding:15px}
.botao-ligar-rapido .botao-conteudo{flex-direction:row;gap:5px}

/* --- hero das paginas de especialidade --- */
.hero-esp{padding:0 32px;background-color:#fff;background-repeat:no-repeat;
  border-bottom:1px solid #1B1D4E2E;
  background-size:cover;background-position:top center;
  background-image:url(assets/img/Dobra-1-Institucional-Vet-Veritas.webp)}
.hero-esp > .interno{flex-direction:column;justify-content:space-around;
  align-items:flex-start;gap:20px;padding:80px 0}
.hero-esp-h2{position:relative;width:547px;max-width:min(100%, 547px);margin-top:20px}
.hero-esp-h2 .titulo,.hero-esp-h2 b{font-family:'Sora',Sans-serif;font-size:50px;
  font-weight:700;line-height:1.1em;color:#000}
.hero-esp-sub{position:relative;width:462px;max-width:min(100%, 462px);margin-bottom:20px}
.hero-esp-sub p{margin:0;font-family:'Sora',Sans-serif;font-size:20px;font-weight:400;
  line-height:1.4em;color:#000}

/* As tres paginas que usam .hero-esp (oncologista, odontologista e a de Aldeia)
   tem as MESMAS medidas de hero em 1024 e 390; so a largura do titulo em 1440
   muda. Por isso estas regras sao do componente, e nao do bloco de cada pagina:
   quando estavam presas ao escopo de uma pagina, a outra nascia sem elas. */
@media (max-width:1024px){
  .hero-esp{background-position:-413px 0}
  /* o logo leva -6px embaixo no hero E no rodape: quando a regra ficou so no
     hero, o rodape das tres paginas cresceu 6px em 1024 */
  .hero-esp .logo-inst,.rodape-inst .logo-inst{margin-bottom:-6px}
  .hero-esp-h2{width:383px;max-width:min(100%, 383px)}
  .hero-esp-h2 .titulo,.hero-esp-h2 b{font-size:40px}
  .hero-esp-sub{width:394px;max-width:min(100%, 394px)}
  .hero-esp-sub p{font-size:18px}
}

@media (max-width:767px){
  .hero-esp{padding:0 16px;background-position:center bottom;
    background-image:url(assets/img/BG-hero-Vet-Veritas-mobile.webp)}
  .hero-esp > .interno{flex-wrap:wrap;justify-content:flex-start;
    align-items:center;padding:48px 0 400px}
  /* o logo destas paginas fica encostado a ESQUERDA do bloco de 338 no celular
     (na /veterinario-em-recife-v2/ ele centraliza) */
  .hero-esp .logo-inst{width:338px;max-width:min(100%, 338px);margin:0 0 -6px;text-align:start}
  .hero-esp .logo-inst img{width:196px;height:auto}
  .hero-esp-h2{width:338px;max-width:min(100%, 338px)}
  .hero-esp-h2 .titulo,.hero-esp-h2 b{font-size:30px;line-height:1.2em}
  .hero-esp-sub{width:338px;max-width:min(100%, 338px)}
  .hero-esp-cta{width:338px;max-width:min(100%, 338px)}
}

/* --- o que difere da base nas secoes reaproveitadas --- */
.p-especialidade .equipe > .interno{justify-content:center}
.p-especialidade .equipe-h2{width:692px;max-width:min(100%, 692px);align-self:center}
.p-especialidade .equipe-h2 .titulo{font-weight:400;text-align:center}
.p-especialidade .equipe-sub{width:568px;max-width:min(100%, 568px)}
.p-especialidade .equipe-sub p{margin:0 0 14.4px}
.p-especialidade .equipe-sub p:last-child{margin-bottom:0}
.p-especialidade .equipe-cta{align-self:center}

.p-especialidade .prova-h2 .titulo{font-size:43px;font-weight:400}

/* o FAQ destas duas fecha com 80px embaixo; na de Aldeia sao 112px */
.p-especialidade .faq > .interno{padding:80px 0}
.p-especialidade .faq-h2 .titulo{font-weight:400}
.p-especialidade .sanfona-titulo{font-weight:400}
.p-especialidade .faq-cta-esp{align-self:center}

@media (max-width:1024px){
  .p-especialidade .botao-ligar-rapido{width:240px;max-width:min(100%, 240px)}
  /* repetidos por especificidade: as regras de 1440 acima ganhariam aqui */
  .p-especialidade .equipe > .interno{justify-content:space-around}
  .p-especialidade .equipe-h2{width:349px;max-width:min(100%, 349px)}
  .p-especialidade .equipe-sub{width:544px;max-width:min(100%, 544px)}
}

@media (max-width:767px){
  /* o involucro fica com 327px e o botao vira inline, centralizado dentro dele */
  .p-especialidade .botao-ligar-rapido{width:327px;max-width:min(100%, 327px);text-align:center}
  .p-especialidade .botao-ligar-rapido .botao{display:inline-block;width:auto}

  .p-especialidade .equipe{padding:0 16px}
  .p-especialidade .equipe > .interno{padding:0}
  .p-especialidade .equipe-h2{width:338px;max-width:min(100%, 338px)}
  .p-especialidade .equipe-h2 .titulo{font-size:27px;text-align:start}
  .p-especialidade .equipe-sub{width:338px;max-width:min(100%, 338px);text-align:start}
  .p-especialidade .equipe-cta{width:338px;max-width:min(100%, 338px)}

  .p-especialidade .prova-h2{margin:0 0 -5px}
  .p-especialidade .prova-h2 .titulo{font-size:27px}

  .p-especialidade .faq > .interno{padding:48px 0}
  .p-especialidade .faq-h2{margin:0 0 -5px}
  .p-especialidade .sanfona-titulo{font-size:20px;line-height:1.2em}
  /* o CTA do FAQ muda de medida no celular: 358px, outro padding e entrelinha */
  .p-especialidade .faq-cta-esp{width:358px;max-width:min(100%, 358px)}
  .p-especialidade .faq-cta-esp .botao{padding:18px 60px 16px;line-height:1.4em}

  .p-especialidade .rodape-inst{padding:0 16px}
  .p-especialidade .rodape-inst > .interno{justify-content:center;padding:48px 0}
  .p-especialidade .rodape-col{width:100%;max-width:100%;align-items:center}
  .p-especialidade .rodape-col-dir{width:260px;max-width:min(100%, 260px);padding-top:22px;
    border-top:1px solid #1B1D4E}
  .p-especialidade .rodape-inst .logo-inst{margin:0 0 -6px}
  .p-especialidade .rodape-end{width:338px;max-width:min(100%, 338px);text-align:center}
  .p-especialidade .rodape-end p{font-size:18px}
  .p-especialidade .rodape-assinatura{width:206px;max-width:min(100%, 206px);text-align:center}
  .p-especialidade .rodape-assinatura p{font-size:18px}
}

/* ==========================================================================
   PAGINA /veterinario-em-aldeia-v2/  ->  aldeia.html   (body.p-aldeia)
   A pagina sem anuncio ativo, que so aparece por sitelink. Reaproveita o hero,
   os botoes e o rodape das paginas de especialidade; o que muda esta aqui.
   Valores de computado-{d,t,m}.json, via tres.py.
   ========================================================================== */

/* --- selo "Tempo estimado de resposta" (widget de HTML da original) --- */
.w-selo{position:relative;max-width:100%}
.selo-atendimento{display:flex;flex-direction:column;align-items:center;gap:2px;
  margin-bottom:12px}
.selo-atendimento .linha1{display:flex;align-items:center;gap:6px;
  font-size:14px;font-weight:500;line-height:21px;color:#4A4A4A}
.selo-atendimento .linha2{font-size:12px;font-weight:400;line-height:18px;color:#8A8A8A}

.p-aldeia .hero-esp-h2{width:542px;max-width:min(100%, 542px)}
.p-aldeia .hero-esp-sub{width:462px;max-width:min(100%, 462px)}

.p-aldeia .equipe > .interno{justify-content:center}
.p-aldeia .equipe-h2{width:692px;max-width:min(100%, 692px);align-self:center}
.p-aldeia .equipe-h2 .titulo{font-weight:400;text-align:center}
.p-aldeia .equipe-sub{width:568px;max-width:min(100%, 568px)}
.p-aldeia .equipe-cta{align-self:center}

.p-aldeia .prova-h2 .titulo{font-size:43px;font-weight:400}

.p-aldeia .faq-h2 .titulo{font-weight:400}
.p-aldeia .sanfona-titulo{font-weight:400}
.p-aldeia .faq-cta-esp{align-self:center}

/* no rodape desta pagina as colunas encostam embaixo (nas outras, no meio) */
.p-aldeia .rodape-inst > .interno{align-items:flex-end}

/* os pilares vem DEPOIS do rodape e o CTA e o botao verde chapado */
.p-aldeia .pilares-cta-verde{align-self:center}

@media (max-width:1024px){
  /* repetidos por especificidade: `.p-aldeia .X` (2 classes) ganha de
     `@media{.X}` (1 classe) em QUALQUER largura, entao a largura de 1440 vazava
     para 1024 e 390 e o hero nascia com o titulo de 542px */
  .p-aldeia .hero-esp-h2{width:383px;max-width:min(100%, 383px)}
  .p-aldeia .hero-esp-sub{width:394px;max-width:min(100%, 394px)}
  .p-aldeia .equipe > .interno{justify-content:space-around}
  .p-aldeia .equipe-h2{width:349px;max-width:min(100%, 349px)}
  .p-aldeia .equipe-sub{width:544px;max-width:min(100%, 544px)}
  .p-aldeia .rodape-inst > .interno{align-items:center}
  /* em 1024 o CTA dos pilares encosta a esquerda, como na pagina de Aldeia 24h */
  .p-aldeia .pilares-cta-verde{align-self:flex-start}
}

@media (max-width:767px){

  .p-aldeia .hero-esp-h2{width:338px;max-width:min(100%, 338px)}
  .p-aldeia .hero-esp-sub{width:338px;max-width:min(100%, 338px)}
  .p-aldeia .equipe{padding:0 16px}
  .p-aldeia .equipe > .interno{padding:0}
  .p-aldeia .equipe-h2{width:338px;max-width:min(100%, 338px)}
  .p-aldeia .equipe-h2 .titulo{font-size:27px;text-align:start}
  .p-aldeia .equipe-sub{width:338px;max-width:min(100%, 338px);text-align:start}
  .p-aldeia .equipe-cta{width:338px;max-width:min(100%, 338px)}

  .p-aldeia .prova-h2{margin:0 0 -5px}
  .p-aldeia .prova-h2 .titulo{font-size:27px}

  .p-aldeia .faq > .interno{padding:48px 0}
  .p-aldeia .faq-h2{margin:0 0 -5px}
  .p-aldeia .sanfona-titulo{font-size:20px;line-height:1.2em}
  .p-aldeia .faq-cta-esp{width:358px;max-width:min(100%, 358px)}
  .p-aldeia .faq-cta-esp .botao{padding:18px 60px 16px;line-height:1.4em}

  .p-aldeia .rodape-inst{padding:0 16px}
  .p-aldeia .rodape-inst > .interno{justify-content:center;padding:48px 0}
  .p-aldeia .rodape-col{width:100%;max-width:100%;align-items:center}
  .p-aldeia .rodape-col-dir{width:260px;max-width:min(100%, 260px);padding-top:22px;
    border-top:1px solid #1B1D4E}
  .p-aldeia .rodape-inst .logo-inst{margin:0 0 -6px}
  .p-aldeia .rodape-end{width:338px;max-width:min(100%, 338px);text-align:center}
  .p-aldeia .rodape-end p{font-size:18px}
  .p-aldeia .rodape-assinatura{width:206px;max-width:min(100%, 206px);text-align:center}
  .p-aldeia .rodape-assinatura p{font-size:18px}

  .p-aldeia .pilares-cta-verde{width:338px;max-width:min(100%, 338px);align-self:center}
}

/* ==========================================================================
   PAGINA /atendimento-domiciliar/  ->  domiciliar.html   (body.p-domiciliar)
   E a mais diferente das sete: identidade propria (logo Home Care, tres fotos
   de fundo), 10 containers e componentes que nao aparecem em nenhuma outra.
   Valores de computado-{d,t,m}.json, via tres.py.
   ========================================================================== */

/* --- botao da Home Care: verde chapado, Sora, raio 3 --- */
.botao-hc{width:417px;max-width:min(100%, 417px)}
.botao-hc .botao{font-family:'Sora',Sans-serif;font-size:18px;font-weight:600;line-height:1em;
  text-transform:uppercase;
  background-color:var(--verde);border-radius:3px;padding:22px 10px;
  box-shadow:0 0 0 0 rgba(0,0,0,.5)}
.botao-hc .botao-conteudo{gap:5px}

/* --- hero --- */
.hero-hc{padding:0 32px;background-repeat:no-repeat;background-size:cover;
  background-position:top center;
  background-image:url(assets/img/Dobra-LP-Home-Care-1.1.webp)}
.hero-hc > .interno{flex-direction:column;justify-content:space-around;
  align-items:flex-start;gap:20px;padding:80px 0}
.logo-hc{position:relative;max-width:min(100%, 221px);text-align:center}
.logo-hc img{width:221px;height:auto}
.hero-hc-h2{position:relative;width:467px;max-width:min(100%, 467px);margin-top:20px}
.hero-hc-h2 .titulo,.hero-hc-h2 b{font-family:'Sora',Sans-serif;font-size:34px;
  font-weight:400;line-height:1.2em;color:#0F1258}
.hero-hc-h2 b{font-weight:700}
.hero-hc-sub{position:relative;width:362px;max-width:min(100%, 362px);margin-bottom:20px}
.hero-hc-sub p{margin:0 0 14.4px;font-family:'Sora',Sans-serif;font-size:20px;
  font-weight:400;line-height:1.4em;color:#000}
.hero-hc-sub p:last-child{margin-bottom:0}

/* --- faixa verde de 20px (container vazio) --- */
.faixa-verde{position:relative;z-index:99;padding:10px;background-color:var(--verde)}
.faixa-verde [data-marquee-style]{letter-spacing:normal}

/* --- cartoes de linha (beneficios em azul, servicos em branco) --- */
.w-lista-cartoes{position:relative;width:660px;max-width:min(100%, 660px)}
.lista-cartoes{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.cartao-linha{display:flex;align-items:flex-start;padding:15px 15px 11px;
  border:1px solid rgba(255,255,255,.19);border-radius:3px;background-color:var(--azul);
  box-shadow:0 10px 20px -10px rgba(0,0,0,.25);position:relative}
.cartao-linha + .cartao-linha{margin-top:11px}
.cartao-linha:last-child{padding:15px}
.cartao-texto{padding-left:5px;font-family:'Sora',Sans-serif;font-size:20px;
  font-weight:400;line-height:1.5em;color:#fff}
.cartao-icone{display:flex;position:relative}
.cartao-icone svg{width:20px;height:20px;margin-right:5px;fill:var(--verde)}

/* --- cartao com icone e titulo (passos e porques) --- */
.w-cartao-passo{position:relative;width:366px;max-width:min(100%, 366px);
  padding:30px 60px 20px 20px;border:1px solid #fff;border-radius:8px;
  background-color:var(--ciano)}
.caixa-icone-h{display:flex;flex-direction:column;gap:15px;text-align:start}
.caixa-icone-h .caixa-icone-ico,.caixa-icone-h .caixa-icone-conteudo{text-align:inherit}
.icone-chapado{display:inline-block;line-height:0}
.icone-chapado svg{width:40px;height:40px}
.cartao-titulo{margin:8px 0 16px;font-family:'Sora',Sans-serif;font-size:24px;
  font-weight:400;line-height:1.3em;color:var(--azul)}
.cartao-titulo span{font-family:'Sora',Sans-serif;font-size:24px;font-weight:400;
  line-height:1.3em;color:var(--azul)}
.cartao-desc{margin:0;font-family:'Sora',Sans-serif;font-size:18px;font-weight:400;
  line-height:1.4em;color:#303030}
.passos .cartao-desc{color:var(--azul)}
/* o cartao de "por que escolher" NAO tem borda (o de passo tem 1px branca) */
.cartao-porque{border:0}
.cartao-porque .icone-chapado svg{fill:var(--verde)}
.cartao-porque .cartao-titulo,.cartao-porque .cartao-titulo span{color:#000}
/* cada cartao tem o padding da direita proprio, posto a mao no Elementor */
.p-domiciliar .passos .w-cartao-passo:nth-of-type(3){padding:30px 60px 20px 20px}
.p-domiciliar .passos .w-cartao-passo:nth-of-type(4){padding:30px 40px 20px 20px}
.p-domiciliar .passos .w-cartao-passo:nth-of-type(5){padding:30px 20px 20px}
.p-domiciliar .porques .cartao-porque:nth-of-type(2){padding:30px 60px 20px 20px}
.p-domiciliar .porques .cartao-porque:nth-of-type(3){padding:30px 79px 20px 20px}
.p-domiciliar .porques .cartao-porque:nth-of-type(4),
.p-domiciliar .porques .cartao-porque:nth-of-type(5){padding:30px 20px 20px}

/* --- caixa de texto da secao "O que muda" --- */
.w-caixa-texto{position:relative;width:393px;max-width:min(100%, 393px)}
.caixa-texto-titulo{margin:8px 0 20px;font-family:'Sora',Sans-serif;font-size:43px;
  font-weight:400;line-height:1.1em;color:#0F1258}
.caixa-texto-desc{margin:0;font-family:'Sora',Sans-serif;font-size:20px;font-weight:400;
  line-height:1.5em;color:#303030}
.caixa-texto-desc b{font-weight:700}

/* --- titulo rotativo (animated-headline do Elementor, efeito swirl) ---
   No estado servido so a primeira variacao fica no fluxo; as outras duas ficam
   em position:absolute por cima. Com o JS ligado elas trocam a cada 2500ms. */
.w-titulo-rotativo{position:relative;width:100%;max-width:100%;margin-top:60px}
/* o <h3> tambem leva o tamanho e a entrelinha, nao so os <span> de dentro */
.titulo-rotativo{margin:8px 0 16px;text-align:center;font-family:'Sora',Sans-serif;
  font-size:40px;line-height:1.2em}
.rot-fixo,.rot-item{font-family:'Sora',Sans-serif;font-size:40px;line-height:1.2em;color:#fff}
.rot-fixo{display:inline;font-weight:400}
.rot-caixa{display:inline-block;position:relative;overflow:hidden;vertical-align:top}
.rot-item{display:inline-block;font-weight:600;white-space:nowrap;perspective:300px}
.rot-item:not(.rot-ativo){position:absolute;left:0;top:0;opacity:0}
@keyframes elementor-headline-swirl-in{
  0%{opacity:0;transform:translateZ(-20px) rotateX(90deg)}
  60%{opacity:1;transform:translateZ(-20px) rotateX(-10deg)}
  100%{opacity:1;transform:translateZ(-20px) rotateX(0)}
}
@keyframes elementor-headline-swirl-out{
  0%{opacity:1;transform:translateZ(-20px) rotateX(0)}
  60%{opacity:0;transform:translateZ(-20px) rotateX(-100deg)}
  100%{opacity:0;transform:translateZ(-20px) rotateX(-90deg)}
}
.rot-item.rot-entrando{animation:elementor-headline-swirl-in .6s forwards}
.rot-item.rot-saindo{animation:elementor-headline-swirl-out .6s forwards}

/* --- rodape enxuto --- */
.rodape-hc{padding:0 32px;border-top:1px solid #1B1D4E2E}
.rodape-hc > .interno{flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:20px;padding:80px 0}
.rodape-hc-col{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;
  position:relative;width:575px;max-width:min(100%, 575px)}
.logo-hc-rodape{width:100%;max-width:100%;text-align:start}
.logo-hc-rodape img{width:259px;height:auto}

/* --- secoes da pagina --- */
.p-domiciliar .beneficios{padding:0 32px}
.p-domiciliar .beneficios > .interno{flex-wrap:wrap;justify-content:center;
  gap:40px 20px;padding:80px 0}

.p-domiciliar .prova-h2 .titulo{font-size:43px;font-weight:400}

/* a secao precisa ser flex-column para o involucro interno (flex:1 1 auto)
   esticar ate o min-height; sem isso a coluna sobe 74px */
.p-domiciliar .muda{display:flex;flex-direction:column;
  padding:0 32px;min-height:800px;background-repeat:no-repeat;
  background-size:cover;background-position:top center;
  background-image:url(assets/img/Dobra-LP-Home-Care-2.webp)}
/* o involucro interno do Elementor e `flex:1 1 auto`: numa secao com
   min-height ele ESTICA ate a altura da secao, e so por isso a coluna fica
   centralizada na vertical. Sem o flex-grow o conteudo subia 74px. */
.p-domiciliar .muda > .interno{flex-direction:row;flex-wrap:wrap;flex-grow:1;
  justify-content:space-between;align-items:center;gap:20px;padding:80px 0}
.muda-col{display:flex;flex-direction:column;justify-content:flex-start;gap:20px;
  position:relative;width:446px;max-width:min(100%, 446px)}

.p-domiciliar .passos{padding:0 32px;background-color:var(--azul)}
.p-domiciliar .passos > .interno{flex-direction:row;flex-wrap:wrap;justify-content:center;
  align-items:normal;gap:20px;padding:80px 0}
.passos-h2{position:relative;width:100%;max-width:100%;text-align:center}
.passos-h2 .titulo{font-family:'Sora',Sans-serif;font-size:43px;font-weight:400;
  line-height:1.2em;color:#fff}
.passos-sub{position:relative;width:100%;max-width:100%;margin-bottom:20px;text-align:center}
.passos-sub p{margin:0;font-family:'Sora',Sans-serif;font-size:20px;font-weight:400;
  line-height:1.4em;color:#fff}

.p-domiciliar .porques{padding:0 32px}
.p-domiciliar .porques > .interno{flex-direction:row;flex-wrap:wrap;justify-content:center;
  align-items:normal;gap:20px 40px;padding:80px 0}
.porques-h2{position:relative;width:100%;max-width:100%;text-align:center}
.porques-h2 .titulo{font-family:'Sora',Sans-serif;font-size:40px;font-weight:400;
  line-height:1.2em;letter-spacing:-.5px;color:#0E1033}

.p-domiciliar .servicos{background-color:var(--azul)}
.p-domiciliar .servicos > .interno{flex-direction:column;flex-wrap:wrap;
  justify-content:center;align-items:center;gap:20px;padding:64px 0 80px}
.servicos-h2{position:relative;width:544px;max-width:min(100%, 544px);margin-top:-5px;
  text-align:center}
.servicos-h2 .titulo{font-family:'Sora',Sans-serif;font-size:40px;font-weight:400;
  line-height:1.1em;letter-spacing:-.5px;color:#fff}
.lista-servicos{width:602px;max-width:min(100%, 602px)}
.lista-servicos .cartao-linha{background-color:#fff}
.lista-servicos .cartao-texto{color:#000}

.p-domiciliar .faq-hc{padding:0 32px;background-color:transparent;background-repeat:no-repeat;
  background-size:cover;background-position:top center;
  background-image:url(assets/img/Dobra-LP-Home-Care-3.webp);
  border-bottom:1px solid #1B1D4E2E}
.p-domiciliar .faq-hc > .interno{padding:80px 0 112px}
.p-domiciliar .faq-hc .faq-h2 .titulo{font-size:43px;font-weight:400;color:#0E1033}
.p-domiciliar .sanfona-titulo{font-weight:400}
.p-domiciliar .sanfona-cabeca{background-image:linear-gradient(132deg,var(--azul),var(--azul))}
.p-domiciliar .faq-hc-cta{width:480px;max-width:min(100%, 480px);align-self:center}

@media (max-width:1024px){
  .hero-hc{background-position:-413px 0}
  .hero-hc .logo-hc{margin-bottom:-6px}
  .hero-hc-h2{width:383px;max-width:min(100%, 383px)}
  .hero-hc-h2 .titulo,.hero-hc-h2 b{font-size:40px}
  .hero-hc-sub{width:394px;max-width:min(100%, 394px)}
  .hero-hc-sub p{font-size:18px}
  /* em 1024 os tres cartoes de passo tem o MESMO padding; as regras de 1440
     por nth-of-type ganhariam aqui por especificidade, entao sao repetidas */
  /* so os cartoes de PASSO encolhem para 300px; os de "por que escolher"
     continuam com 366px, e os dois compartilham a classe base */
  .p-domiciliar .passos .w-cartao-passo,
  .p-domiciliar .passos .w-cartao-passo:nth-of-type(3),
  .p-domiciliar .passos .w-cartao-passo:nth-of-type(4),
  .p-domiciliar .passos .w-cartao-passo:nth-of-type(5){width:300px;max-width:min(100%, 300px);
    padding:30px 20px 20px}
  .passos-sub p{font-size:18px}
  .rodape-hc-col{width:250px;max-width:min(100%, 250px)}
  .logo-hc-rodape img{width:113px;height:auto}
  .p-domiciliar .passos > .interno{flex-direction:column;align-items:center;gap:15px}
  .p-domiciliar .porques > .interno{flex-direction:column;align-items:center;gap:15px}
  .p-domiciliar .muda > .interno{flex-direction:column}
  .p-domiciliar .faq-hc{background-position:-413px 0}
}

@media (max-width:767px){
  .hero-hc{padding:0 16px;background-position:bottom center;
    background-image:url(assets/img/Dobra-LP-Home-Care-Mobile-1.1.webp)}
  .hero-hc > .interno{flex-wrap:wrap;justify-content:space-around;align-items:center;
    padding:32px 0 416px}
  .hero-hc .logo-hc{width:338px;max-width:min(100%, 338px);margin:0 0 -6px;text-align:start}
  .hero-hc .logo-hc img{width:196px;height:auto}
  .hero-hc-h2{width:338px;max-width:min(100%, 338px)}
  .hero-hc-h2 .titulo,.hero-hc-h2 b{font-size:24px;line-height:1.3em}
  .hero-hc-sub{width:338px;max-width:min(100%, 338px)}
  .hero-hc-cta{width:338px;max-width:min(100%, 338px)}
  .botao-hc .botao{padding:18px 10px 16px;font-size:16px;line-height:1.4em}

  .p-domiciliar .beneficios{padding:0 16px}
  .p-domiciliar .beneficios > .interno{justify-content:center;align-items:center;
    gap:20px;padding:48px 0}
  .w-lista-cartoes{width:338px;max-width:min(100%, 338px)}
  .cartao-texto{font-size:18px;line-height:1.3em}

  .p-domiciliar .prova-h2{margin:0 0 -5px}
  .p-domiciliar .prova-h2 .titulo{font-size:27px}

  .p-domiciliar .muda{padding:0 16px;background-position:bottom center;
    background-image:url(assets/img/Dobra-LP-Home-Care-Mobile-2.webp)}
  .p-domiciliar .muda > .interno{justify-content:space-between;align-items:center;
    padding:48px 0 400px}
  .muda-col{width:338px;max-width:min(100%, 338px)}
  .w-caixa-texto{width:338px;max-width:min(100%, 338px)}
  .caixa-texto-titulo{font-size:32px}
  .muda-cta{width:338px;max-width:min(100%, 338px)}
  .muda-cta .botao{padding:18px 50px 16px}

  .p-domiciliar .passos{padding:0 16px}
  .p-domiciliar .passos > .interno{gap:20px;padding:48px 0}
  .passos-h2 .titulo{font-size:27px}
  .passos-h2{margin:0 0 -5px}
  .passos-sub p{font-size:18px}
  .p-domiciliar .passos .caixa-icone-h{text-align:center}

  .p-domiciliar .porques{padding:0 16px}
  .p-domiciliar .porques > .interno{gap:20px;padding:48px 0}
  .porques-h2{width:338px;max-width:min(100%, 338px);margin:0 0 -5px}
  .porques-h2 .titulo{font-size:27px}
  .cartao-porque,
  .p-domiciliar .porques .cartao-porque:nth-of-type(2),
  .p-domiciliar .porques .cartao-porque:nth-of-type(3),
  .p-domiciliar .porques .cartao-porque:nth-of-type(4),
  .p-domiciliar .porques .cartao-porque:nth-of-type(5){width:338px;max-width:min(100%, 338px);padding:20px}
  .p-domiciliar .passos .w-cartao-passo,
  .p-domiciliar .passos .w-cartao-passo:nth-of-type(3),
  .p-domiciliar .passos .w-cartao-passo:nth-of-type(4),
  .p-domiciliar .passos .w-cartao-passo:nth-of-type(5){width:300px;max-width:min(100%, 300px);padding:30px 20px 20px}
  /* o tamanho tem de estar no <h3> E no <span>: posto so no span, a caixa do
     titulo continua com a entrelinha de 24px e o cartao sai 5px mais alto */
  .cartao-porque .cartao-titulo,.cartao-porque .cartao-titulo span{font-size:22px}

  .p-domiciliar .servicos{padding:0 16px}
  .p-domiciliar .servicos > .interno{padding:48px 0}
  .servicos-h2{width:338px;max-width:min(100%, 338px);margin:0}
  .servicos-h2 .titulo{font-size:30px}
  .lista-servicos{width:358px;max-width:min(100%, 358px)}
  .w-titulo-rotativo{margin-top:20px}
  .titulo-rotativo,.rot-fixo,.rot-item{font-size:19px;line-height:1.5em}
  .servicos-cta{width:338px;max-width:min(100%, 338px)}

  .p-domiciliar .faq-hc{padding:0 16px;background-position:-438px 0}
  .p-domiciliar .faq-hc > .interno{padding:48px 0}
  .p-domiciliar .faq-hc .faq-h2{margin:0 0 -5px}
  .p-domiciliar .faq-hc .faq-h2 .titulo{font-size:27px}
  .p-domiciliar .sanfona-titulo{font-size:20px;line-height:1.2em}
  .p-domiciliar .faq-hc-cta{width:358px;max-width:min(100%, 358px)}
  .p-domiciliar .faq-hc-cta .botao{padding:18px 40px 16px}

  .rodape-hc{padding:0 16px}
  .rodape-hc > .interno{justify-content:center;padding:48px 0}
  .rodape-hc-col{width:358px;max-width:min(100%, 358px);justify-content:center}
  .logo-hc-rodape{text-align:center}
  .logo-hc-rodape img{width:179px;height:auto}
  /* a coluna da direita ganha um filete de 1px em cima no celular. A captura
     devolve `border` VAZIO quando as larguras dos lados diferem, entao esse 1px
     so aparece na conferencia de secao. */
  .p-domiciliar .rodape-col-dir{width:260px;max-width:min(100%, 260px);padding-top:22px;
    align-items:center;border-top:1px solid #1B1D4E}
  .p-domiciliar .rodape-assinatura{width:206px;max-width:min(100%, 206px);text-align:center}
  .p-domiciliar .rodape-assinatura p{font-size:18px}
}