/* ==========================================================================
   Norvet - Neurologista Veterinario | replica fiel da pagina original
   Todos os valores vem da medicao em _original/fonte/computado-{d,m}.json e
   das regras reais em _original/css/post-29.css. Nada aqui foi estimado.
   Pontos de quebra da original (Elementor): 1366 (laptop), 1024 (tablet),
   767 (celular).
   ========================================================================== */

/* --- fontes da original -------------------------------------------------- */
@font-face{font-family:'Gilroy';font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fontes/Gilroy-Regular.woff2) format('woff2'),
      url(assets/fontes/Gilroy-Regular.woff) format('woff')}
@font-face{font-family:'Gilroy';font-style:normal;font-weight:600;font-display:swap;
  src:url(assets/fontes/Gilroy-SemiBold.woff2) format('woff2'),
      url(assets/fontes/Gilroy-SemiBold.woff) format('woff')}
@font-face{font-family:'Gilroy';font-style:normal;font-weight:700;font-display:swap;
  src:url(assets/fontes/Gilroy-Bold.woff2) format('woff2'),
      url(assets/fontes/Gilroy-Bold.woff) format('woff')}

/* --- cores medidas na original ------------------------------------------- */
:root{
  --azul:#132445;        /* rgb(19,36,69)   texto e fundo escuro */
  --turquesa:#49AAB4;    /* rgb(73,170,180) faixas tingidas */
  --verde:#33F682;       /* rgb(51,246,130) botao */
  --borda-hero:#1B1D4E2E;
}

/* --- base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* a propria original tem isso: html,body{width:100%;overflow-x:hidden} */
html,body{width:100%;overflow-x:hidden}
/* O body da original NAO e Gilroy: e a pilha de sistema do WordPress, com
   line-height 1.5 e cor #333. O Gilroy entra widget por widget. Isso importa
   porque a entrelinha de 24px do body e o que da a folga de 6px embaixo da
   imagem de cada slide do carrossel. */
body{margin:0;background:#fff;color:#333;font-size:16px;font-weight:400;
     line-height:1.5;
     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}
/* Na original SO a imagem de widget de imagem e inline-block com
   vertical-align:middle (.elementor-widget-image img). A imagem de carrossel
   fica inline, com a folga da linha de base - e sao 6px por slide que mudam a
   altura da dobra. Por isso a regra e por classe, nunca global. */
.widget--img img{display:inline-block;vertical-align:middle}
h1,h2,h3,h4,p{margin:0}
/* reset do tema da original: a legenda do carrossel e ITALICA. Achei isso
   comparando os prints, nao a geometria - as caixas batiam ao pixel e o texto
   estava inclinado. */
figcaption{color:#333;font-size:16px;font-style:italic;font-weight:400;line-height:1.4}
a{text-decoration:none;color:inherit}
/* `fill:currentColor` vale para os icones do Font Awesome, que nao declaram
   fill nenhum. Mas os quatro icones numerados dos passos tem `fill="none"` no
   proprio <svg> - e CSS vence atributo de apresentacao, entao a regra global
   preenchia o anel externo (um <rect> sem fill proprio) com o #333 do body,
   tapando o degrade e o numero: o icone saia um circulo escuro e cego. Por
   isso a regra so vale para o <svg> que NAO declara fill. A original nao tem
   regra global nenhuma - o Elementor pinta por classe (.e-font-icon-svg).
   Quem achou isso foi a comparacao por IMAGEM; a geometria passou batido,
   porque a caixa do icone esta certa nos dois lados. */
svg{display:inline-block}
svg:not([fill]){fill:currentColor}

/* --- container padrao (Elementor e-con-boxed) ---------------------------- */
/* O Elementor poe o padding horizontal na caixa externa e o vertical na
   interna; manter isso e o que faz a faixa de fundo sangrar de ponta a ponta. */
.secao{position:relative;padding:0 var(--px,32px)}
/* na original o widget sempre tem max-width:100% (regra de especificidade
   maior que a largura customizada); por isso ele encolhe no celular em vez
   de estourar o cartao */
.widget{position:relative;max-width:100%;
        transition:background .3s,border .3s,border-radius .3s,box-shadow .3s,transform .4s}
/* as caixas de container da original (.e-con) trazem a mesma transicao, sem
   border-radius; nenhuma delas muda no hover, mas e o que esta declarado la */
.cartao-azul,.barra-avaliacao,.hero__texto,.coluna-sintomas,.coluna-riscos,
.coluna-domiciliar{transition:background .3s,border .3s,box-shadow .3s,transform .4s}
.interno{display:flex;flex-direction:column;gap:20px;
         max-width:min(100%,var(--max,1140px));margin-inline:auto;
         padding:var(--pt,80px) 0 var(--pb,80px)}
@media(max-width:1024px){.secao{--max:1024px}}
@media(max-width:767px){.secao{--px:16px;--max:767px}}

/* --- botao de WhatsApp (um componente, usado em 6 dobras) ---------------- */
/* O pulso e o keyframe `test` da original. A medicao devolve transform
   scale(0.99) e box-shadow de 45px porque sao QUADROS do pulso, nao valores
   fixos: o que vale e o keyframe. */
@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)}
}
.botao{display:inline-block;width:100%;padding:22px 10px;border-radius:3px;
       background:var(--verde);color:#000;fill:#000;text-align:center;
       font-family:"Gilroy",sans-serif;font-size:18px;font-weight:600;line-height:1em;text-transform:uppercase;
       box-shadow:0 0 0 0 rgb(0 0 0 / .5);animation:test 1.5s infinite;
       transition:background .3s,border .3s,box-shadow .3s,transform .4s}
.botao__conteudo{display:flex;flex-direction:row-reverse;justify-content:center;
                 align-items:center;gap:10px}
.botao__icone{display:flex;align-items:center}
.botao__icone svg{width:1em;height:1em}
/* o 16px no celular e SO do botao do hero (6bb761d); os outros ficam 18px */
@media(max-width:767px){.widget--botao-hero .botao{font-size:16px}}

/* ==========================================================================
   DOBRA 1 - hero
   d: secao 1440x869 y0 | interno 1140 padding 80/112 | col 463 + img 612x676
   m: secao 390x1027     | interno 358 padding 32/80  | coluna 338, img 338x373
   ========================================================================== */
.secao--hero{border-bottom:1px solid var(--borda-hero)}
.secao--hero .interno{--pt:80px;--pb:112px;flex-direction:row;justify-content:space-between}
.hero__texto{display:flex;flex-direction:column;gap:20px;width:463px;position:relative}
.widget--logo img{width:217px;height:auto}
.widget--titulo{width:463px;margin-top:20px}
.widget--titulo h1{font-family:"Gilroy",sans-serif;font-size:40px;font-weight:700;line-height:1.2em;color:var(--azul)}
.widget--chamada{width:444px;margin-bottom:20px;
                 font-family:"Gilroy",sans-serif;font-size:20px;font-weight:400;line-height:1.4em;color:var(--azul)}
.widget--chamada p:not(:last-child){margin-bottom:.9rem}
.widget--botao-hero{width:426px}
.widget--hero-imagem{text-align:center}
.widget--hero-imagem img{width:612px;height:auto}

@media(max-width:1366px){
  /* NOTA de 11/11/2026: na original estes dois valores so entram em 1024, nao
     em 1366 (medido nas tres paginas: o titulo fica 463px/40px ate 1025).
     Ficam aqui mesmo assim porque esta pagina ja esta fechada e, em 1100, a
     original ENCOLHE o titulo para 438px por falta de espaco no flex - mover a
     regra nao a deixaria certa, so trocaria um numero errado por outro. As
     paginas novas corrigem isso no proprio bloco, onde da para fechar. */
  .widget--titulo{width:399px}
  .widget--titulo h1{font-size:35px}
  .widget--chamada{width:435px}
}
@media(max-width:1024px){
  .secao--hero .interno{flex-direction:column;flex-wrap:wrap;
                        justify-content:space-around;align-items:flex-start}
  .widget--chamada{width:406px;font-size:18px}
}
@media(max-width:767px){
  .secao--hero .interno{--pt:32px;--pb:80px;align-items:center}
  .hero__texto{flex-wrap:wrap;width:338px}
  /* altura sempre auto: fixar 99px em vez de deixar o navegador calcular
     98.894 a partir da proporcao desloca toda a dobra em 1px no celular */
  .widget--logo{width:145px}
  .widget--logo img{width:145px;height:auto}
  .widget--titulo{width:338px;margin-top:0}
  .widget--titulo h1{font-size:29px}
  .widget--chamada{width:338px;margin:0 100px 0 0;font-size:19px}
  .widget--botao-hero{width:338px}
  .widget--hero-imagem{width:338px;margin-top:20px}
  .widget--hero-imagem img{width:338px;height:auto}
}

/* ==========================================================================
   DOBRA 2 - equipe
   Faixa turquesa com um cartao azul SOBREPOSTO: o cartao tem margin -32px
   em cima e embaixo, por isso a secao mede 797 e o cartao 860. Isso e de
   proposito na original; sem o negativo a pagina inteira desce 64px.
   d: secao 1440x797 y869 | cartao 1140x860 y837, padding 80/16, raio 30
   m: secao 390x620 y1027 | cartao 358x683 y995, padding 48/16
   ========================================================================== */
.secao--equipe{background:var(--turquesa);border-bottom:1px solid var(--borda-hero)}
.secao--equipe .interno{--pt:0px;--pb:0px;justify-content:center}
/* width:100% e o que a original tem: o cartao e um `e-con-full` do Elementor,
   e `.e-con-full{width:100%}`. Sem isso ele so parece certo em 1440 e em 390,
   por acaso: em 1440 o flex estica o item, e em 390 ha regra propria. Em 1024
   entra `align-items:center` na .interno, o item para de esticar e o cartao
   encolhe para o tamanho do conteudo - 622px em vez de 960px. Foi a
   comparacao por IMAGEM que pegou isso (4% dos pixels em 1024); a conferencia
   por geometria passou batido, porque ela casa os elementos pelo TEXTO e o
   cartao nao tem texto proprio. */
.cartao-azul{display:flex;flex-direction:column;gap:20px;position:relative;width:100%;
             margin:-32px 0;padding:80px 16px;border-radius:30px;background:var(--azul)}
.widget--equipe-titulo{width:549px;align-self:center;text-align:center}
.widget--equipe-titulo h2{font-family:"Gilroy",sans-serif;font-size:40px;font-weight:700;line-height:1.2em;color:#fff}
.widget--equipe-texto{width:605px;align-self:center;text-align:center;
                      font-family:"Gilroy",sans-serif;font-size:20px;font-weight:400;line-height:1.4em;color:#fff}
/* na /neurologista-veterinario/ este texto tem um paragrafo so, entao a regra
   nunca casava; na ortopedia e na fisioterapia sao dois, e sem ela a dobra
   inteira sobe 14,4px */
.widget--equipe-texto p:not(:last-child){margin-bottom:.9rem}
.widget--carrossel-equipe{margin:20px 0}
.widget--carrossel-equipe .carrossel{--espaco:10px}
.widget--botao-equipe{width:426px;align-self:center}

/* --- carrossel de imagens (Swiper do Elementor) ------------------------- */
.carrossel{position:relative}
.carrossel__janela{position:relative;z-index:1;padding-bottom:30px;overflow:hidden}
.carrossel__trilha{display:flex;position:relative;z-index:1;
                   transition-property:transform;transition-timing-function:ease;
                   transform:translate3d(0,0,0)}
/* O Swiper define a largura do slide no init:
   (janela - (n-1) * espaco) / n, com margin-right = espaco em TODOS os slides,
   inclusive o ultimo. O site.js reproduz isso em px (valores fracionarios, como
   na original). As regras abaixo sao o mesmo calculo em CSS, para o primeiro
   quadro nao piscar colado antes do JS rodar. */
.carrossel__slide{flex:0 0 auto;position:relative;text-align:center;
                  margin-right:var(--espaco,0px);
                  width:calc(100% - 0 * var(--espaco,0px))}
@media(min-width:767px){
  .carrossel__slide{width:calc((100% - 1 * var(--espaco,0px)) / 2)}
}
@media(min-width:1024px){
  .carrossel__slide{width:calc((100% - 3 * var(--espaco,0px)) / 4)}
}
.carrossel__slide figure{margin:0}
.carrossel__seta{display:inline-flex;position:absolute;z-index:1;
                 top:calc(50% - 30px / 2);transform:translateY(-50%);cursor:pointer}
.carrossel__seta svg{width:1em;height:1em}
.carrossel__seta--prev{left:10px}
.carrossel__seta--next{right:10px}
/* a original pinta as setas deste carrossel de cinza claro, 25px */
.widget--carrossel-equipe .carrossel__seta{font-size:25px;color:hsl(0 0% 93% / .9)}
.widget--carrossel-equipe .carrossel__seta svg{fill:hsl(0 0% 93% / .9)}
.widget--carrossel-equipe .carrossel__slide img{border:3px solid var(--turquesa);border-radius:10px}
.widget--carrossel-equipe figcaption{text-align:center;color:#fff;
    font-family:"Gilroy",sans-serif;font-size:16px;font-weight:700;line-height:1.4em}

@media(max-width:1366px){
  .widget--equipe-texto{width:611px}
}
@media(max-width:1024px){
  .widget--equipe-titulo{width:349px}
  .widget--equipe-texto{width:544px;font-size:18px}
}
@media(max-width:767px){
  .secao--equipe .interno{align-items:center}
  .cartao-azul{flex-wrap:wrap;padding:48px 16px;width:100%}
  .widget--equipe-titulo{width:338px;padding:0 60px 0 0;text-align:start}
  .widget--equipe-titulo h2{font-size:29px}
  .widget--equipe-texto{width:338px;text-align:start;font-size:19px}
  .widget--carrossel-equipe{width:100%;max-width:100%}
  .widget--botao-equipe{width:338px}
  .widget--carrossel-equipe .carrossel__slide img{border-width:2px;border-radius:8px}
  .widget--carrossel-equipe figcaption{font-size:18px;margin-block-start:10px}
}

/* ==========================================================================
   DOBRA 3 - prova social
   d: secao 1440x681 y1666 (padding 0 16px) | interno 1140 padding 112/64,
      align-items center | barra branca 95% (1083) | carrossel 4 por tela,
      setas FORA (janela com margin 0 30px e largura 100%-60px)
   m: secao 390x712 y1646 | interno padding 48/48 | barra 75% (269) |
      carrossel 1 por tela
   ========================================================================== */
.secao--depoimentos{--px:16px}
.secao--depoimentos .interno{--pt:112px;--pb:64px;flex-wrap:wrap;
                             justify-content:center;align-items:center}
.widget--dep-titulo{width:905px;margin-top:-5px;text-align:center}
.widget--dep-titulo h2{font-family:"Gilroy",sans-serif;font-size:49px;font-weight:700;
                       line-height:1.1em;letter-spacing:-.5px;color:var(--azul)}
.barra-avaliacao{display:flex;align-items:center;gap:20px;position:relative;
                 width:95%;padding:16px;border-radius:6px;background:#fff}
.widget--selo-google{text-align:start}
.widget--nota{width:62%;text-align:start}
.widget--nota h2{font-family:"Gilroy",sans-serif;font-size:20px;font-weight:600;
                 line-height:1.1em;letter-spacing:-.5px;color:#000}
.widget--selo{text-align:end}
.widget--selo h2{font-family:"Gilroy",sans-serif;font-size:15px;font-weight:700;
                 line-height:1.1em;letter-spacing:0;color:#000}
/* a classe .destaque e da propria original (CSS customizado do site) */
.destaque{background:#267251;color:#fff;border-radius:5px;padding:3px 12px;
          box-decoration-break:clone;-webkit-box-decoration-break:clone}
.widget--carrossel-dep{margin-top:20px}
.widget--carrossel-dep .carrossel{--espaco:15px}
/* setas fora: a janela encurta 60px e as setas colam nas bordas do widget */
.carrossel--setas-fora .carrossel__janela{width:calc(100% - 60px);margin:0 30px}
.carrossel--setas-fora .carrossel__seta--prev{left:0}
.carrossel--setas-fora .carrossel__seta--next{right:0}
.widget--carrossel-dep .carrossel__seta{font-size:22px;color:var(--azul)}
.widget--carrossel-dep .carrossel__seta svg{fill:var(--azul)}
.widget--carrossel-dep .carrossel__slide img{border:1px solid var(--azul);border-radius:5px}

@media(max-width:1366px){
  .barra-avaliacao{width:94%}
  .widget--nota{width:55%}
}
@media(max-width:767px){
  .secao--depoimentos .interno{--pt:48px;--pb:48px}
  .widget--dep-titulo{width:338px;margin:0 0 -5px}
  .widget--dep-titulo h2{font-size:27px}
  .barra-avaliacao{width:75%;flex-wrap:wrap;justify-content:center}
  .widget--nota{width:338px;margin-top:-4px;text-align:center}
  .widget--nota h2{font-size:20px}
  .widget--selo{margin-top:3px}
  .widget--selo h2{font-size:18px}
  .widget--carrossel-dep{width:100%;margin:0}
}

/* ==========================================================================
   DOBRA 4 - por que confiar
   Mesma mecanica da dobra 2: faixa turquesa + cartao azul com margin -32px.
   d: secao 1440x962 y2347 | cartao 1140x1025 y2315, padding 80, raio 30, z1
   m: secao 390x913 y2358 (padding 0 8px) | cartao 374x976, padding 48/16, raio 20
   ========================================================================== */
.secao--confianca{background:var(--turquesa);border-bottom:1px solid var(--borda-hero)}
.secao--confianca .interno{--pt:0px;--pb:0px;justify-content:center}
.cartao-azul--confianca{padding:80px;z-index:1}
.widget--conf-titulo{width:463px;align-self:center;text-align:center}
.widget--conf-titulo h2{font-family:"Gilroy",sans-serif;font-size:40px;font-weight:700;
                        line-height:1.2em;color:#fff}
.widget--conf-texto{width:579px;align-self:center;text-align:center;
                    font-family:"Gilroy",sans-serif;font-size:20px;font-weight:400;
                    line-height:1.4em;color:#fff}
.widget--conf-texto p:not(:last-child){margin-bottom:.9rem}
.widget--conf-imagem{align-self:center;text-align:center}
.widget--botao-conf{width:426px;align-self:center}

@media(max-width:1366px){
  .widget--conf-texto{width:586px}
}
@media(max-width:1024px){
  .secao--confianca .interno{align-items:center}
  .widget--conf-titulo{width:462px}
  .widget--conf-texto{width:456px;font-size:18px}
}
@media(max-width:767px){
  .secao--confianca{--px:8px}
  .cartao-azul--confianca{flex-wrap:wrap;padding:48px 16px;border-radius:20px;width:100%}
  .widget--conf-titulo{width:338px;text-align:start}
  .widget--conf-titulo h2{font-size:29px}
  .widget--conf-texto{width:338px;text-align:start;font-size:19px}
  .widget--botao-conf{width:338px}
}

/* ==========================================================================
   DOBRA 5 - sintomas
   d: secao 1440x966 y3309, fundo branco com veu branco de 91%; interno 1140
      padding 112/112, row space-between align center;
      coluna 443 + imagem 633x533; imagem decorativa absoluta top:-1200 right:0
      espelhada no X.
   m: secao 390x1291 y3272 padding 0 16 | interno padding 64/80 | coluna 358
      centralizada | decorativa 129px top:-124 right:-38
   ========================================================================== */
/* ATENCAO: o CSS da original declara background-image:url(BG-Norvet-2.webp)
   aqui, mas a pagina publicada entrega background-image:none (confirmado no
   estilo computado E no print: a faixa e branca). Provavelmente o LiteSpeed /
   QUIC.cloud remove a imagem de fundo. A replica reproduz o que a pagina
   mostra, nao o que o CSS pede. O arquivo esta em assets/ caso o Rafael queira
   ligar a imagem na fase 2 - ai e uma correcao, nao uma replica. */
.secao--sintomas{background-position:top center;background-size:cover}
.secao--sintomas::before{content:'';position:absolute;inset:0;display:block;
                         background-color:#fff;opacity:.91;transition:.3s}
.secao--sintomas .interno{--pt:112px;--pb:112px;flex-direction:row;flex-wrap:wrap;
                          justify-content:space-between;align-items:center}
/* imagem decorativa: a original a joga 1200px para cima e espelha no eixo X */
.widget--detalhe-1{position:absolute;z-index:1;top:-1200px;right:0;
                   transform:scaleX(-1);text-align:center}
.coluna-sintomas{display:flex;flex-direction:column;gap:20px;position:relative;width:443px}
.widget--sint-titulo{width:462px;align-self:flex-start;flex:0 0 auto}
.widget--sint-titulo h2{font-family:"Gilroy",sans-serif;font-size:40px;font-weight:700;
                        line-height:1.2em;color:var(--azul)}
.widget--sint-lista{width:443px;margin:10px 0}
.lista-sintomas{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.lista-sintomas li{display:flex;align-items:flex-start;position:relative;padding:15px;
                   border:1px solid #ffffff30;border-radius:3px;background:var(--azul);
                   box-shadow:0 20px 30px -10px #00000040}
/* na original o espacamento de 25px vem meio de padding, meio de margem */
.lista-sintomas li:not(:last-child){padding-block-end:calc(25px / 2)}
.lista-sintomas li:not(:first-child){margin-block-start:calc(25px / 2)}
.lista-sintomas__icone{display:flex;position:relative;margin-top:6px}
.lista-sintomas__icone svg{width:18px;height:18px;margin-right:4.5px;fill:red;
                           transition:fill .3s}
.lista-sintomas__texto{padding-left:5px;font-family:"Gilroy",sans-serif;font-size:20px;
                       font-weight:400;line-height:1.5em;color:#fff;transition:color .3s}
.widget--sint-texto{width:410px;align-self:flex-start;
                    font-family:"Gilroy",sans-serif;font-size:20px;font-weight:700;
                    line-height:1.4em;color:var(--azul)}
.widget--sint-imagem{text-align:center}

@media(max-width:1366px){
  .secao--sintomas .interno{gap:15px}
  .widget--detalhe-1{width:296px;top:-1100px}
  .widget--sint-lista{width:384px}
  .widget--sint-texto{width:435px}
}
@media(max-width:1024px){
  .secao--sintomas .interno{flex-direction:column;align-items:flex-start}
  .widget--sint-lista{width:279px}
  .widget--sint-texto{width:368px;font-size:18px}
}
@media(max-width:767px){
  .secao--sintomas .interno{--pt:64px;--pb:80px;gap:20px;align-items:center}
  .widget--detalhe-1{width:129px;top:-124px;right:-38px}
  .coluna-sintomas{flex-direction:column;justify-content:center;align-items:center;width:100%}
  .widget--sint-titulo{width:310px;align-self:center;text-align:center}
  .widget--sint-titulo h2{font-size:29px}
  .widget--sint-lista{width:338px}
  .widget--sint-texto{width:338px;align-self:center;font-size:18px}
  .widget--sint-imagem{width:338px;margin-top:20px}
}

/* ==========================================================================
   DOBRA 6 - como funciona
   d: secao 1440x914 y4275 | interno 1140 padding 64/112, row wrap center gap20
      titulo 100% com padding 0 200px | 4 cartoes de 380x~239 (2 colunas)
   m: secao 390x1445 y4563 | interno padding 64/48 | cartoes 320 centralizados
   ========================================================================== */
.secao--passos .interno{--pt:64px;--pb:112px;flex-direction:row;flex-wrap:wrap;
                        justify-content:center}
.widget--passos-titulo{width:100%;margin-bottom:20px;padding:0 200px;text-align:center}
.widget--passos-titulo h2{font-family:"Gilroy",sans-serif;font-size:41px;font-weight:700;
                          line-height:1.2em;color:var(--azul)}
.widget--passo{width:380px;padding:20px;border:0 solid #000;border-radius:10px;
               background:var(--azul)}
.passo__wrapper{display:flex;flex-direction:column;gap:15px;text-align:start}
.passo__icone{display:inline-block;flex:0 0 auto;line-height:0}
.passo__icone .icone{display:inline-block;text-align:center;transition:.3s}
.passo__conteudo{flex-grow:1;width:100%}
.passo__titulo{margin:8px 0 16px;font-family:"Gilroy",sans-serif;font-size:22px;
               font-weight:700;line-height:1.2em;color:#fff}
.passo__desc{margin:0;font-family:"Gilroy",sans-serif;font-size:20px;font-weight:400;
             line-height:1.4em;color:#fff}
.widget--botao-passos{width:426px;margin-top:20px;align-self:center}

@media(max-width:1366px){
  .secao--passos .interno{gap:15px}
}
@media(max-width:1024px){
  .secao--passos .interno{align-items:center}
  .widget--passos-titulo{padding:0}
  .widget--passos-titulo h2{font-size:40px}
  .widget--passo{width:300px}
}
@media(max-width:767px){
  .secao--passos .interno{--pt:64px;--pb:48px;gap:20px}
  .widget--passos-titulo{width:338px}
  .widget--passos-titulo h2{font-size:28px}
  .widget--passo{width:320px}
  .widget--botao-passos{width:338px}
}

/* ==========================================================================
   DOBRA 7 - por que nao adiar
   d: secao 1440x614 y5188, fundo branco com veu branco de 95%; interno 1140
      padding 80/80 row space-between align center; imagem 608x454 + coluna 462
      decorativa absoluta top:-1200 right:0 espelhada
   m: secao 390x825 y6008 | interno padding 48/48 | imagem 338, coluna 358
   ========================================================================== */
/* mesma historia da dobra 5: BG-Norvet-3 e declarado e nao e entregue */
.secao--riscos{background-position:top center;background-size:cover}
.secao--riscos::before{content:'';position:absolute;inset:0;display:block;
                       background-color:#fff;opacity:.95;transition:.3s}
.secao--riscos .interno{--pt:80px;--pb:80px;flex-direction:row;flex-wrap:wrap;
                        justify-content:space-between;align-items:center}
.widget--detalhe-2{position:absolute;z-index:1;top:-1200px;right:0;
                   transform:scaleX(-1);text-align:center}
.widget--riscos-imagem{text-align:center}
.coluna-riscos{display:flex;flex-direction:column;gap:20px;position:relative;width:462px}
.widget--riscos-titulo{width:462px}
.widget--riscos-titulo h2{font-family:"Gilroy",sans-serif;font-size:40px;font-weight:700;
                          line-height:1.2em;color:var(--azul)}
.widget--riscos-lista{width:462px;margin:10px 0;padding:0 30px 0 0}
.lista-riscos{margin:0;padding:0;list-style:none}
.lista-riscos li{display:flex;align-items:flex-start;position:relative}
.lista-riscos li:not(:last-child){padding-block-end:calc(25px / 2)}
.lista-riscos li:not(:first-child){margin-block-start:calc(25px / 2)}
.lista-riscos__icone{display:flex;position:relative;margin-top:5px}
.lista-riscos__icone svg{width:18px;height:18px;margin-right:4.5px;fill:#C20000;
                         transition:fill .3s}
.lista-riscos__texto{padding-left:5px;font-family:"Gilroy",sans-serif;font-size:20px;
                     font-weight:400;line-height:1.4em;color:var(--azul);
                     transition:color .3s}

@media(max-width:1366px){
  .secao--riscos .interno{gap:15px}
  .widget--detalhe-2{width:296px;top:-1391px;right:-64px}
  .widget--riscos-titulo{width:332px}
  .widget--riscos-lista{width:332px;padding:0}
}
@media(max-width:1024px){
  .secao--riscos{background-position:-714px 0}
  .secao--riscos .interno{flex-direction:column}
  .widget--riscos-titulo{width:462px}
  .widget--riscos-lista{width:462px}
}
@media(max-width:767px){
  .secao--riscos .interno{--pt:48px;--pb:48px;gap:20px;align-items:center}
  .widget--detalhe-2{width:139px;top:-2534px;right:-41px}
  .widget--riscos-imagem{width:338px;margin-top:20px}
  .coluna-riscos{flex-direction:column;justify-content:center;align-items:center;width:100%}
  .widget--riscos-titulo{width:338px}
  .widget--riscos-titulo h2{font-size:29px}
  .widget--riscos-lista{width:338px}
}

/* ==========================================================================
   DOBRA 8 - atendimento domiciliar
   d: secao 1440x760 y5802 fundo azul | interno 1140 padding 80/112, row
      space-around align center | coluna 500 + imagem 622 (os dois encolhem
      1-2px porque 500+20+622 passa de 1140: e isso que da 499 e 621)
   m: secao 390x976 y6833 | interno padding 48/48 | imagem primeiro (order 1)
   ========================================================================== */
.secao--domiciliar{background:var(--azul);border:0 solid var(--turquesa)}
.secao--domiciliar .interno{--pt:80px;--pb:112px;flex-direction:row;
                            justify-content:space-around;align-items:center}
.coluna-domiciliar{display:flex;flex-direction:column;gap:20px;position:relative;width:500px}
.widget--dom-titulo{width:463px}
.widget--dom-titulo h2{font-family:"Gilroy",sans-serif;font-size:50px;font-weight:700;
                       line-height:1.2em;color:#fff}
.widget--dom-texto{width:489px;margin-bottom:20px;font-family:"Gilroy",sans-serif;
                   font-size:20px;font-weight:400;line-height:1.4em;color:#fff}
.widget--dom-texto p:not(:last-child){margin-bottom:.9rem}
.widget--botao-dom{width:426px}
.widget--dom-imagem{flex-grow:1;text-align:center}

@media(max-width:1366px){
  .widget--dom-titulo{width:369px}
  .widget--dom-titulo h2{font-size:40px}
  .widget--dom-texto{width:435px}
}
@media(max-width:1024px){
  .secao--domiciliar .interno{flex-direction:column;justify-content:space-around;
                              align-items:center}
  .coluna-domiciliar{width:426px}
  .widget--dom-titulo{width:374px}
  .widget--dom-titulo h2{font-size:40px}
  .widget--dom-texto{width:406px;font-size:18px}
}
@media(max-width:767px){
  .secao--domiciliar .interno{--pt:48px;--pb:48px}
  /* no celular a original inverte: imagem (order 1) antes do texto (order 2) */
  .coluna-domiciliar{width:338px;order:2}
  .widget--dom-imagem{order:1}
  .widget--dom-titulo{width:338px}
  .widget--dom-titulo h2{font-size:31px}
  .widget--dom-texto{width:338px;font-size:19px}
  .widget--botao-dom{width:338px}
}

/* ==========================================================================
   DOBRA 9 - duvidas frequentes
   d: secao 1440x1133 y6563 fundo azul | interno 1140 padding 80/112, gap 27,
      space-around align center | bloco de titulo 661 (margin-top -20) |
      acordeao 641, itens de 68 com margin-bottom 15 | botao 537
   m: secao 390x1216 y7808 | interno padding 48/48 | tudo 338
   Na original TODOS os itens comecam fechados (aria-expanded=false) e a barra
   do titulo NAO tem fundo: existe uma regra de gradiente turquesa no CSS
   combinado que nao chega a valer na pagina publicada (confirmado no print).
   ========================================================================== */
.secao--faq{background:var(--azul);border-bottom:1px solid var(--borda-hero)}
.secao--faq .interno{--pt:80px;--pb:112px;gap:27px;flex-wrap:wrap;
                     justify-content:space-around;align-items:center}
.widget--faq-titulo{width:661px;margin-top:-20px}
.caixa-titulo{text-align:center}
.caixa-titulo h3{margin:8px 0 10px;font-family:"Gilroy",sans-serif;font-size:50px;
                 font-weight:700;line-height:1em;color:#fff}
.caixa-titulo p{font-family:"Gilroy",sans-serif;font-size:40px;font-weight:700;
                line-height:1.1em;color:#fff}
.widget--faq-lista{width:641px;align-self:center;z-index:1}
.acordeao{text-align:start}
.acordeao__item:not(:last-child){margin-block-end:15px}
.acordeao__titulo{margin:0;padding:20px 15px 18px;cursor:pointer;outline:none;
                  border:1px solid var(--azul);border-radius:8px;
                  font-weight:700;line-height:1}
.acordeao__icone{display:block;float:right;width:1em;margin-inline-end:2px;
                 text-align:right;color:#fff}
.acordeao__icone svg{width:1em;height:1em;margin-inline-start:-5px;fill:#fff}
.acordeao__icone-fechado{display:block}
.acordeao__icone-aberto{display:none}
.acordeao__titulo[aria-expanded="true"] .acordeao__icone-fechado{display:none}
.acordeao__titulo[aria-expanded="true"] .acordeao__icone-aberto{display:block}
.acordeao__link{font-family:"Gilroy",sans-serif;font-size:20px;font-weight:600;
                line-height:1.4em;color:#fff;background-color:rgba(255,255,255,0)}
.acordeao__conteudo{padding:12px 10px;border-bottom:1px solid #fff;color:#fff;
                    font-family:"Gilroy",sans-serif;font-size:18px;font-weight:400;
                    line-height:1.4em}
.acordeao__conteudo[hidden]{display:none}
.acordeao__conteudo p{margin:0}
.widget--botao-faq{width:537px}

@media(max-width:1024px){
  .secao--faq .interno{justify-content:center;align-items:center}
  .widget--faq-titulo{width:550px}
  .widget--faq-lista{width:636px}
}
@media(max-width:767px){
  .secao--faq .interno{--pt:48px;--pb:48px;align-items:center}
  .widget--faq-titulo{width:338px}
  .caixa-titulo h3{font-size:29px}
  .caixa-titulo p{font-size:20px}
  .widget--faq-lista{width:338px}
  .acordeao__link{line-height:1.2em}
  .acordeao__conteudo{font-size:16px}
  .widget--botao-faq{width:338px}
}

/* --- bolinhas de paginacao (swiper-pagination) --------------------------- */
/* Medidas da original com o Swiper ativo: caixa colada no rodape do WIDGET
   (nao da janela), 24px de altura, bottom 5px; bolinha de 6px com margem
   lateral de 6px (--swiper-pagination-bullet-size e -horizontal-gap). */
.carrossel__pontos{position:absolute;left:0;bottom:5px;width:100%;height:24px;
                   line-height:24px;text-align:center;z-index:10}
/* PENDENCIA CONHECIDA (11/11/2026), igual nas tres paginas e sem efeito em
   nenhuma medida de caixa - fica registrada em vez de corrigida porque mexe
   num componente da pagina ja fechada:
   1. na original a caixa de bolinhas tem `transition:opacity .3s`;
   2. na original o <a> do botao tem `transition:all .3s`, e aqui a lista e
      background/border/box-shadow/transform. So muda o que acontece na
      passagem do mouse, nunca o desenho parado. */
.carrossel__ponto{display:inline-block;width:6px;height:6px;margin:0 6px;
                  border-radius:50%;cursor:pointer;
                  transition:.2s transform,.2s left}
.widget--carrossel-equipe .carrossel__ponto{background:#FFFFFF40}
.widget--carrossel-equipe .carrossel__ponto--ativo{background:#FFF}
.widget--carrossel-dep .carrossel__ponto{background:#13244570}
.widget--carrossel-dep .carrossel__ponto--ativo{background:var(--azul)}

/* ==========================================================================
   ESPECIFICO DAS PAGINAS NOVAS
   Tudo acima e comum as tres paginas do site. O que vem daqui para baixo e so
   a diferenca medida contra a /neurologista-veterinario/, lida regra a regra
   de _original/css-orto/post-217.css e _original/css-fisio/post-219.css, por
   ponto de quebra, e confirmada nas capturas computado-{orto,fisio}-{d,t,m}.
   Nenhum seletor daqui vale para a pagina ja fechada: todos nascem com
   .pag-orto ou .pag-fisio.

   ARMADILHA DE CASCATA, aprendida aqui: um seletor com .pag-X sem @media tem
   especificidade MAIOR que a regra compartilhada dentro de @media. Entao toda
   largura que eu troco na base tem de ser REESCRITA em cada ponto de quebra em
   que a folha comum a muda - mesmo quando o valor e o mesmo. Sem isso a
   largura da base vaza para o celular e a dobra nasce com o dobro do tamanho.
   ========================================================================== */

/* ==========================================================================
   /ortopedista-veterinario/   (body.pag-orto)
   ========================================================================== */

/* --- dobra 1: hero ------------------------------------------------------- */
/* a coluna de texto e a foto se distribuem com space-around (na neurologia e
   space-between), e a coluna encosta no topo em vez de esticar */
.pag-orto .secao--hero .interno{justify-content:space-around;align-items:flex-start}
/* O titulo so encolhe para 399px/35px em 1024; o bloco comum faz isso ja em
   1366, porque na /neurologista-veterinario/ o valor foi gravado la. Reescrevo
   aqui o valor da base para ganhar do bloco comum, e devolvo 399/35 em 1024. */
.pag-orto .widget--titulo{width:463px}
.pag-orto .widget--titulo h1{font-size:40px}
.pag-orto .widget--chamada{width:413px}
/* a foto do hero e outra: 472x685 no lugar de 612x676 */
.pag-orto .widget--hero-imagem img{width:472px}
/* O botao do hero desta pagina NAO e o botao padrao do site: respiro
   18/80/15, entrelinha 1.2em, vao de 5px e SEM o icone do WhatsApp. Sao os
   80px laterais que forcam o rotulo a quebrar em duas linhas (266px de texto)
   e levam o botao de 62 para 76px de altura. */
.pag-orto .widget--botao-hero .botao{padding:18px 80px 15px;line-height:1.2em}
.pag-orto .widget--botao-hero .botao__conteudo{gap:5px}

/* --- dobra 4: sintomas --------------------------------------------------- */
/* Aqui a dobra e uma coluna unica alinhada a esquerda, sem foto ao lado e sem
   a coluna intermediaria que a neurologia tem.
   E NAO tem veu branco: o CSS da ortopedia nao declara overlay nenhum, ao
   contrario da neurologia. O background-image que o CSS pede
   (BG-Norvet-Ortopedia-2) continua nao sendo entregue pela pagina publicada -
   o estilo computado devolve `none` nas tres larguras. */
.pag-orto .secao--sintomas::before{content:none}
.pag-orto .secao--sintomas .interno{flex-direction:column;
                                    justify-content:space-around;align-items:flex-start}
.pag-orto .widget--sint-lista{width:487px}
.pag-orto .widget--sint-texto{width:360px}

/* --- dobra 5: por que confiar -------------------------------------------- */
.pag-orto .widget--conf-texto{width:522px}
/* O detalhe decorativo mora DENTRO do cartao azul desta dobra, encostado na
   ESQUERDA e SEM o espelhamento no eixo X: a regra da ortopedia e `left`, e
   nao existe --e-transform-flipX. Na neurologia e o contrario. */
.pag-orto .widget--detalhe-1{left:0;right:auto;transform:none}

/* --- dobra 6: por que nao adiar ------------------------------------------ */
/* coluna unica encostada a DIREITA (align-items:flex-end), sem foto, sem veu */
.pag-orto .secao--riscos::before{content:none}
.pag-orto .secao--riscos .interno{flex-direction:column;
                                  justify-content:space-around;align-items:flex-end}
.pag-orto .widget--riscos-titulo{width:425px}
.pag-orto .widget--riscos-lista{width:425px;padding:0 33px 0 0}

@media(max-width:1366px){
  .pag-orto .widget--chamada{width:435px}
  .pag-orto .widget--sint-lista{width:384px}
  .pag-orto .widget--sint-texto{width:435px}
  .pag-orto .widget--conf-texto{width:586px}
  .pag-orto .widget--riscos-titulo{width:332px}
  .pag-orto .widget--riscos-lista{width:332px;padding:0}
  .pag-orto .widget--detalhe-1{width:296px;top:-106px;left:-2px}
  .pag-orto .widget--detalhe-2{top:-1390px;right:0}
}
@media(max-width:1024px){
  .pag-orto .widget--titulo{width:399px}
  .pag-orto .widget--titulo h1{font-size:35px}
  .pag-orto .widget--chamada{width:406px}
  .pag-orto .widget--sint-titulo{width:462px}
  .pag-orto .widget--sint-lista{width:279px}
  .pag-orto .widget--sint-texto{width:368px}
  .pag-orto .widget--conf-texto{width:456px}
  .pag-orto .widget--riscos-titulo{width:462px}
  .pag-orto .widget--riscos-lista{width:462px}
}
@media(max-width:767px){
  .pag-orto .secao--hero .interno{align-items:center}
  .pag-orto .widget--titulo{width:338px}
  .pag-orto .widget--titulo h1{font-size:29px}
  .pag-orto .widget--chamada{width:338px;margin:0}
  .pag-orto .widget--hero-imagem img{width:338px}
  .pag-orto .widget--botao-hero .botao{padding:15px 40px}
  /* 48em de respiro embaixo na dobra de sintomas e 19em na de riscos. Sao
     valores da propria original (768px e 304px), nao erro de leitura: e o
     espaco que ela reserva para a imagem de fundo que nunca e entregue. */
  .pag-orto .secao--sintomas .interno{--pb:768px;align-items:center}
  .pag-orto .secao--riscos .interno{--pb:304px;align-items:center}
  .pag-orto .widget--sint-titulo{width:338px;text-align:start}
  .pag-orto .widget--sint-lista{width:338px}
  .pag-orto .widget--sint-texto{width:338px;font-size:19px}
  .pag-orto .widget--conf-texto{width:338px}
  .pag-orto .widget--riscos-titulo{width:338px}
  .pag-orto .widget--riscos-lista{width:338px}
  .pag-orto .widget--detalhe-1{width:134px;top:-3236px;left:-18px;margin:0;padding:0}
  .pag-orto .widget--detalhe-2{width:139px;top:-1115px;right:-16px}
}

/* ==========================================================================
   /fisioterapia-veterinaria/   (body.pag-fisio)
   ========================================================================== */

/* --- dobra 1: hero ------------------------------------------------------- */
/* Esta e a unica dobra do site inteiro que REALMENTE recebe imagem de fundo: o
   estilo computado traz BG-Norvet-Fisioterapia-1.webp em 1440 e 1024 e a
   versao Mobile em 390. Em todas as outras dobras de todas as paginas o
   LiteSpeed devolve background-image:none, e a replica segue o que a pagina
   mostra, nao o que o CSS pede. */
.pag-fisio .secao--hero{background-color:#fff;
    background-image:url(assets/BG-Norvet-Fisioterapia-1.webp);
    background-position:top center;background-size:cover;background-repeat:no-repeat}
/* o hero nao tem foto ao lado: e uma coluna unica em qualquer largura */
.pag-fisio .secao--hero .interno{flex-direction:column;
                                 justify-content:space-around;align-items:flex-start}
.pag-fisio .widget--titulo{width:507px}
.pag-fisio .widget--titulo h1{font-size:40px}
.pag-fisio .widget--chamada{width:469px}
/* o mesmo botao de respiro grande da ortopedia, com 70px no lugar de 80 - mas
   aqui o icone do WhatsApp existe, e por isso o vao continua 10px */
.pag-fisio .widget--botao-hero .botao{padding:18px 70px 15px;line-height:1.2em}

/* --- dobra 4: por que confiar -------------------------------------------- */
.pag-fisio .widget--conf-titulo{width:595px}
.pag-fisio .widget--conf-texto{width:516px}

/* --- dobra 5: sintomas --------------------------------------------------- */
.pag-fisio .secao--sintomas::before{content:none}
.pag-fisio .secao--sintomas .interno{flex-direction:column;
                                     justify-content:space-around;align-items:flex-start}
.pag-fisio .widget--sint-titulo{width:380px}
.pag-fisio .widget--sint-lista{width:437px}
/* detalhe pela esquerda e sem espelho, como na ortopedia */
.pag-fisio .widget--detalhe-1{left:0;right:auto;transform:none}

/* --- dobra 7: por que iniciar a fisioterapia ----------------------------- */
.pag-fisio .secao--riscos::before{content:none}
.pag-fisio .secao--riscos .interno{flex-direction:column;
                                   justify-content:space-around;align-items:flex-end}
.pag-fisio .widget--riscos-titulo{width:525px}
.pag-fisio .widget--riscos-lista{width:525px}

@media(max-width:1366px){
  .pag-fisio .widget--chamada{width:435px}
  .pag-fisio .widget--conf-texto{width:586px}
  .pag-fisio .widget--sint-lista{width:384px}
  .pag-fisio .widget--riscos-titulo{width:332px}
  .pag-fisio .widget--riscos-lista{width:332px;padding:0}
  .pag-fisio .widget--detalhe-1{width:296px;top:-1129px;left:-10px}
  .pag-fisio .widget--detalhe-2{top:-1390px;right:0}
}
@media(max-width:1024px){
  .pag-fisio .secao--hero{background-position:-413px 0}
  .pag-fisio .widget--titulo{width:399px}
  .pag-fisio .widget--titulo h1{font-size:35px}
  .pag-fisio .widget--chamada{width:406px}
  .pag-fisio .widget--conf-titulo{width:462px}
  .pag-fisio .widget--conf-texto{width:456px}
  .pag-fisio .widget--sint-titulo{width:462px}
  .pag-fisio .widget--sint-lista{width:279px}
  .pag-fisio .widget--riscos-titulo{width:462px}
  .pag-fisio .widget--riscos-lista{width:462px}
}
@media(max-width:767px){
  .pag-fisio .secao--hero{background-image:url(assets/BG-Norvet-Fisioterapia-1-Mobile.webp);
                          background-position:bottom center}
  /* 25em de respiro embaixo: e o espaco onde a foto de fundo aparece */
  .pag-fisio .secao--hero .interno{--pb:400px;align-items:center}
  .pag-fisio .widget--titulo{width:338px}
  .pag-fisio .widget--titulo h1{font-size:27px}
  .pag-fisio .widget--chamada{width:338px;margin:0}
  .pag-fisio .widget--botao-hero .botao{padding:18px 40px 15px}
  .pag-fisio .widget--botao-conf .botao{padding:18px 20px 15px}
  .pag-fisio .widget--conf-titulo{width:338px}
  .pag-fisio .widget--conf-texto{width:338px}
  .pag-fisio .secao--sintomas .interno{--pt:48px;--pb:448px;align-items:center}
  .pag-fisio .widget--sint-titulo{width:338px;text-align:start}
  .pag-fisio .widget--sint-lista{width:338px}
  .pag-fisio .widget--sint-texto{font-size:19px}
  .pag-fisio .secao--riscos .interno{--pb:304px;align-items:center}
  .pag-fisio .widget--riscos-titulo{width:338px}
  .pag-fisio .widget--riscos-lista{width:338px}
  .pag-fisio .widget--detalhe-1{width:139px;top:-2154px;left:-25px}
  .pag-fisio .widget--detalhe-2{width:139px;top:-3943px;right:-29px}
}

/* ==========================================================================
   POPUP DE SAIDA (Elementor popup 384)
   So existe em /neurologista-veterinario/ e /fisioterapia-veterinaria/.
   A /ortopedista-veterinario/ NAO carrega esse popup - conferido no HTML
   servido das tres paginas (6 links de WhatsApp na orto, 7 nas outras duas).

   Os valores vem de duas fontes, nenhuma delas estimada:
   - as regras reais em _original/css/combinado.css (o LiteSpeed junta o
     post-384.css no arquivo combinado), e
   - a medicao do popup ABERTO na original, em _original/fonte/popup-{d,m}.json,
     capturada por scripts/capturar-popup.cjs. Ela foi necessaria porque o
     involucro (sobreposicao, caixa branca, botao de fechar) nao vem no HTML
     servido: o JS do Elementor o cria no momento em que o popup abre.

   NOTA sobre a fonte: a original declara "Sora" no titulo e no texto do popup
   mas NUNCA carrega essa fonte (nao ha @font-face nem link do Google Fonts em
   nenhum CSS da pagina). Ou seja, na original o popup cai no sans-serif
   generico do sistema. A replica repete a declaracao exatamente igual, e de
   proposito NAO carrega a Sora: carregar deixaria a replica diferente da
   original. Fica registrado para a fase 2.
   ========================================================================== */
/* sobreposicao - medida: fixed inset 0, rgba(0,0,0,.8), flex center, z 9999 */
.popup{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;
       background:rgb(0 0 0 / .8);z-index:9999;pointer-events:all}
.popup[hidden]{display:none}
/* .dialog-widget-content: a caixa branca de 21px que aparece atras do cartao
   azul (o azul tem 15px, por isso sobra a borda clara nos cantos) */
.popup__caixa{position:relative;width:auto;max-width:100%;max-height:100%;
              background:#fff;border-radius:21px;overflow:visible;
              box-shadow:2px 8px 23px 3px rgb(0 0 0 / .2)}
/* .dialog-message: e aqui que mora a largura de 500px e a rolagem interna */
.popup__msg{display:flex;width:500px;max-width:100vw;max-height:100vh;overflow:auto}
/* o container do Elementor (13d2b34): padding horizontal fora, vertical dentro */
/* position:relative e o que o Elementor poe em todo .e-con; na original a
   caixa branca e que e absolute (o JS do dialog a posiciona), mas aqui a
   centralizacao e do flex da sobreposicao e a caixa medida sai identica. */
.popup__con{position:relative;width:100%;padding:0 32px;border-radius:15px;
            background:var(--azul);display:flex;flex-direction:column}
.popup__inner{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around;
              gap:20px;width:100%;max-width:min(100%,1140px);margin-inline:auto;
              padding:80px 0}
/* 9eb8ada: largura pedida 528px, mas o max-width:100% de .widget vence - foi
   assim que a medicao devolveu 436px dentro do cartao de 500px */
.popup__titulo{width:528px;max-width:100%;text-align:center}
.popup__titulo h2{font-family:"Sora",sans-serif;font-size:60px;font-weight:600;
                  line-height:1em;color:#FFF}
/* 8ca077e: sem largura declarada no desktop; encolhe para o conteudo (242px medidos) */
.popup__texto{max-width:100%;text-align:center;
              font-family:"Sora",sans-serif;font-size:18px;font-weight:400;
              line-height:1.5em;color:#FFF}
.popup__botao{width:426px;max-width:100%}
/* o botao e o MESMO componente das 6 dobras, mas com DOIS valores proprios,
   os dois medidos no popup aberto da original: o padding de baixo e 20px (na
   pagina e 22px) e a entrelinha e 1.2em (na pagina e 1em). Sao esses 3.6px de
   entrelinha que faziam a caixa do popup fechar 407px em vez de 411px. */
.popup .botao{padding:22px 10px 20px;line-height:1.2em}
/* botao de fechar: <a> de 15px, 20px do topo e da direita da caixa, icone
   eicon-close do Elementor (o mesmo path do sprite da original) */
.popup__fechar{position:absolute;top:20px;inset-inline-end:20px;z-index:9999;
               display:flex;width:15px;height:15px;font-size:15px;line-height:1;
               opacity:1;pointer-events:all;cursor:pointer}
.popup__fechar svg{width:1em;height:1em;fill:#FFF}

@media(max-width:1366px){.popup__inner{gap:15px}}
@media(max-width:1024px){.popup__inner{flex-direction:column;align-items:center}}
@media(max-width:767px){
  .popup__msg{width:95vw}
  .popup__con{padding:0 16px}
  .popup__inner{padding:48px 0;gap:20px}
  .popup__titulo{width:319px}
  .popup__titulo h2{font-size:44px}
  .popup__texto{width:147px}
  .popup__botao{width:338px}
  .popup .botao{font-size:16px;padding:18px 40px 15px}
}