.elementor-kit-85{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-85 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */@import url("https://api.fontshare.com/v2/css?f%5B%5D=satoshi@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");

/* ==========================================================================
   GILLIAN ITO · PSICÓLOGA — folha de estilo para WordPress + Elementor
   --------------------------------------------------------------------------
   ONDE COLAR: Elementor > Configurações do site > CSS personalizado
               (ou Aparência > Personalizar > CSS adicional)

   NÃO cole este arquivo dentro de um widget HTML. Ele precisa valer para a
   página inteira, e não só para um bloco.

   Tudo aqui está limitado aos blocos do site (.hero, .section, .site-header,
   .site-footer, .wa). Nenhuma regra vaza para o painel do WordPress nem para
   outros plugins.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS DA MARCA
   Proporção 60/30/8/2: 60% Bruma, 30% Marinho, 8% Névoa, 2% Carmim.
   -------------------------------------------------------------------------- */
:root{
  --marinho:  #1E2A44;
  --carmim:   #B8253C;
  --argila:   #E79A94;
  --nevoa:    #6B7285;   /* cor de marca — usar em traços, ícones e rótulos */
  --nevoa-txt:#666C7E;   /* variante para texto corrido: 4,8:1 sobre Bruma (WCAG AA) */
  --bruma:    #F3F4F8;
  --papel:    #FBFBFD;

  --linha:      rgba(30,42,68,.10);
  --linha-forte:rgba(30,42,68,.18);
  --linha-clara:rgba(251,251,253,.16);

  --display: "Satoshi", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --gutter: 28px;
  --r: 8px;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* A ASA — arco de linha única, sublinhado de hover */
  --arco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M0 7C20 1 80 1 100 7' fill='none' stroke='%23B8253C' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. NEUTRALIZA O ELEMENTOR E O TEMA
   O Elementor envolve cada widget em contêineres com largura, padding e
   estilos próprios. Estas regras devolvem o controle ao nosso layout.
   Aplique a classe "gi-secao" ao Container de cada seção (Avançado > CSS
   classes) para que ela funcione.
   -------------------------------------------------------------------------- */
.gi-secao,
.gi-secao > .e-con-inner,
.gi-secao > .elementor-container,
.gi-secao .elementor-widget-html,
.gi-secao .elementor-widget-container{
  max-width:100% !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
}
/* Os contêineres Flexbox e Grid das versões recentes trazem um espaçamento
   entre elementos ligado por padrão. Como cada seção tem um widget só, ele
   não faz falta e só cria folgas indesejadas. */
.gi-secao,
.gi-secao > .e-con-inner{
  gap:0 !important;
  row-gap:0 !important;
  column-gap:0 !important;
  --gap:0px;
  --grid-gap:0px;
}
.gi-secao{overflow:visible !important}

/* --------------------------------------------------------------------------
   2b. RECONHECIMENTO AUTOMÁTICO DOS CONTÊINERES
   As regras acima dependem de você digitar a classe "gi-secao" no contêiner.
   No editor novo do Elementor esse campo mudou de lugar e de comportamento,
   então aqui o CSS encontra sozinho qualquer contêiner que tenha um bloco
   nosso dentro — com ou sem a classe. Se você conseguir aplicar a classe,
   melhor; se não conseguir, o site funciona igual.
   -------------------------------------------------------------------------- */
.e-con:has(.site-header),.e-con:has(.hero),.e-con:has(.section),
.e-con:has(.faixa),.e-con:has(.site-footer),.e-con:has(.wa),
.e-con:has(.site-header) > .e-con-inner,.e-con:has(.hero) > .e-con-inner,
.e-con:has(.section) > .e-con-inner,.e-con:has(.faixa) > .e-con-inner,
.e-con:has(.site-footer) > .e-con-inner,.e-con:has(.wa) > .e-con-inner,
.elementor-widget-html:has(.site-header),.elementor-widget-html:has(.hero),
.elementor-widget-html:has(.section),.elementor-widget-html:has(.faixa),
.elementor-widget-html:has(.site-footer),.elementor-widget-html:has(.wa),
.elementor-widget-container:has(.site-header),.elementor-widget-container:has(.hero),
.elementor-widget-container:has(.section),.elementor-widget-container:has(.faixa),
.elementor-widget-container:has(.site-footer),.elementor-widget-container:has(.wa){
  max-width:100% !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
  gap:0 !important;
  --gap:0px;
  --grid-gap:0px;
  overflow:visible !important;
}

/* Invólucros do Construtor de temas e do tema.
   Quando o cabeçalho ou o rodapé são criados como modelo global, o Elementor
   os envolve em elementos próprios (.elementor-location-*), e alguns temas
   acrescentam um invólucro com recuo lateral. Isso deixa o bloco mais estreito
   que a tela, com faixas claras nas bordas. As regras abaixo zeram apenas o
   recuo HORIZONTAL, para não interferir no espaçamento vertical de nada. */
.elementor-location-header,
.elementor-location-footer,
.elementor-location-header > .e-con,
.elementor-location-footer > .e-con,
:has(> .site-header),
:has(> .site-footer),
:has(> .hero),
:has(> .section),
:has(> .faixa){
  max-width:100% !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Proteções dos dois elementos FIXOS do site — o cabeçalho e o botão
   flutuante do WhatsApp. Um elemento com position:fixed deixa de se fixar na
   janela se algum ancestral tiver transform, filter, perspective ou contain.
   O Elementor aplica transform quando há efeitos de movimento ligados. */
.e-con:has(.site-header),
.e-con:has(.site-header) > .e-con-inner,
.elementor-widget-html:has(.site-header),
.elementor-widget-container:has(.site-header),
.e-con:has(.wa),
.e-con:has(.wa) > .e-con-inner,
.elementor-widget-html:has(.wa),
.elementor-widget-container:has(.wa){
  transform:none !important;
  filter:none !important;
  perspective:none !important;
  contain:none !important;
  min-height:0 !important;
}

/* Reset limitado aos nossos blocos */
.site-header,.hero,.section,.site-footer,.wa{
  box-sizing:border-box;
  font-family:var(--sans);
  font-size:18px;
  font-weight:400;
  line-height:1.75;
  color:var(--marinho);
  -webkit-font-smoothing:antialiased;
}
/* IMPORTANTE: estas regras usam :where(), que tem especificidade ZERO.
   Assim elas desfazem os estilos do tema, mas NUNCA passam por cima das
   nossas próprias classes. Sem isso, ".site-header a" venceria ".btn--primary"
   e o texto dos botões ficaria marinho sobre fundo marinho — invisível.
   Não troque :where() por seletor comum. */
:where(.site-header,.hero,.section,.site-footer,.wa),
:where(.site-header,.hero,.section,.site-footer,.wa) *{box-sizing:border-box}

:where(.site-header,.hero,.section,.site-footer,.wa) :where(img){max-width:100%;height:auto;display:block;border-radius:0;box-shadow:none;filter:none}
/* RESET DE LINKS — leia antes de mexer, esta regra já quebrou o site duas vezes.

   Dois problemas opostos precisam conviver aqui:

   1. Os temas pintam links com "a{color:vermelho}". Se a nossa regra tiver peso
      zero (o alvo dentro de :where), o vermelho do tema vence e aparece no
      telefone e no e-mail da seção de contato.

   2. Se a regra tiver peso alto demais — e :hover, :focus e :visited SOBEM o
      peso —, ela vence as classes dos botões. Aí o texto do botão herda a cor
      do fundo e some. Foi o que aconteceu ao incluir a:visited: links de
      WhatsApp já clicados viram "visitados" e o botão fica marinho no marinho.

   A saída é excluir os botões do reset com :not([class*="btn"]). Eles definem
   a própria cor em qualquer estado e não precisam de reset nenhum. O restante
   dos links continua herdando, com peso suficiente para vencer o tema. */
:where(.site-header,.hero,.section,.site-footer,.wa) a:not([class*="btn"]),
:where(.site-header,.hero,.section,.site-footer,.wa) a:not([class*="btn"]):hover,
:where(.site-header,.hero,.section,.site-footer,.wa) a:not([class*="btn"]):focus,
:where(.site-header,.hero,.section,.site-footer,.wa) a:not([class*="btn"]):visited{color:inherit;box-shadow:none;text-decoration:none}

/* Os botões, blindados em todos os estados */
:where(.site-header,.hero,.section,.site-footer) a.btn{text-decoration:none}
a.btn--primary,a.btn--primary:visited,a.btn--primary:focus{color:var(--papel)}
a.btn--light,a.btn--light:visited,a.btn--light:focus{color:var(--marinho)}
a.btn--zap,a.btn--zap:visited,a.btn--zap:focus{color:var(--papel)}
:where(.site-header,.hero,.section,.site-footer,.wa) button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
:where(.site-header,.hero,.section,.site-footer,.wa) :where(ul,ol){margin:0;padding:0;list-style:none}
:where(.site-header,.hero,.section,.site-footer,.wa) :where(figure){margin:0}

/* Âncoras do menu: compensa a altura do cabeçalho fixo */
[id="temas"],[id="como-funciona"],[id="combinado"],
[id="sobre"],[id="compromissos"],[id="duvidas"],[id="contato"],[id="t-faixa"]{
  scroll-margin-top:calc(var(--gi-topo,108px) + 16px);
}

/* --------------------------------------------------------------------------
   2d. NEUTRALIZAÇÃO SEM :has() — alternativa direta
   
   As regras de reconhecimento automático usam :has(). Ele funciona em todos os
   navegadores atuais, mas alguns plugins de cache e de otimização minificam o
   CSS e descartam seletores que não conhecem — e o :has() é um dos primeiros a
   cair. Quando isso acontece, as regras somem sem aviso.

   O trecho abaixo faz o mesmo trabalho sem :has(), atingindo TODOS os
   contêineres do Elementor. Como este site é de página única, isso não afeta
   mais nada. Se um dia houver outras páginas com layout próprio, prefira as
   regras automáticas.

   COMO ATIVAR: apague as duas linhas que abrem e fecham o comentário
   logo abaixo (a que vem sozinha antes de .e-con e a do fim do bloco).
   -------------------------------------------------------------------------- */
/*
.e-con,
.e-con > .e-con-inner,
.elementor-widget-html,
.elementor-widget-container{
  max-width:100% !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
  gap:0 !important;
}
*/

/* --------------------------------------------------------------------------
   2c. LARGURA TOTAL PARA OS DEMAIS BLOCOS
   
   O rodapé já vem com essa proteção ligada, mais abaixo no arquivo. Se algum
   OUTRO bloco também aparecer mais estreito que a tela, apague as duas linhas
   que abrem e fecham o comentário logo abaixo.

   Assim como no rodapé, a regra não faz efeito onde não é necessária: se o
   bloco já ocupa a tela toda, o cálculo resulta em zero.
   -------------------------------------------------------------------------- */
/*
.hero,.section,.faixa{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}
*/

/* --------------------------------------------------------------------------
   3. TIPOGRAFIA
   -------------------------------------------------------------------------- */


/* -------- Tipografia: régua -------- */
.hero h1,.section h2,.section h3,.section h4,.site-footer h2,
.site-header h1,.site-header h2{
  font-family:var(--display);font-weight:500;
  letter-spacing:-.02em;line-height:1.1;margin:0;text-wrap:balance;
}
.hero h1{font-size:clamp(2.15rem,5.6vw,3.5rem);line-height:1.06;margin:0}
.section h2{font-size:clamp(1.75rem,3.6vw,2.5rem);line-height:1.12;margin:0}
.section h3{font-size:1.22rem;line-height:1.3;margin:0}
.site-header p,.hero p,.section p,.site-footer p,.wa p{margin:0 0 1.15em;max-width:68ch}
.site-header p:last-child,.hero p:last-child,.section p:last-child,.site-footer p:last-child,.wa p:last-child{margin-bottom:0}
.site-header strong,.hero strong,.section strong,.site-footer strong,.wa strong{font-weight:500}

/* .wrap, .section e .nav também são nomes que temas costumam usar. Blindamos
   a largura desses três pelo mesmo motivo do cabeçalho e do rodapé, para não
   descobrir a colisão só depois de publicado. */
.site-header .wrap,.hero .wrap,.section .wrap,.faixa .wrap,.site-footer .wrap,
.wrap{width:100%;max-width:var(--wrap);margin-left:auto;margin-right:auto;padding:0 var(--gutter);float:none}

.eyebrow{
  font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--carmim);
  margin:0 0 22px;
}
.lead{font-size:1.12rem;color:var(--nevoa-txt);max-width:56ch}
.muted{color:var(--nevoa-txt)}

:focus-visible{outline:3px solid var(--carmim);outline-offset:3px;border-radius:3px}
.section--marinho :focus-visible,.telefone :focus-visible{outline-color:var(--argila)}


/* ============================================================
   BOTÕES · CTA primário sempre Marinho
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:17px 30px;border-radius:var(--r);border:1px solid transparent;
  font-size:.98rem;font-weight:500;line-height:1;text-decoration:none;
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.btn svg{flex:none}
.btn--primary{background:var(--marinho);color:var(--papel)}
.btn--primary:hover{background:#162034;transform:translateY(-2px)}
.btn--light{background:var(--papel);color:var(--marinho)}
.btn--light:hover{background:#fff;transform:translateY(-2px)}

/* Link de texto com o arco em carmim */
.link-arco{
  text-decoration:none;font-size:.98rem;font-weight:500;
  padding-bottom:9px;
  background-image:var(--arco);
  background-repeat:no-repeat;
  background-size:100% 7px;
  background-position:left bottom;
  transition:opacity .25s var(--ease);
}
.link-arco:hover{opacity:.62}

/* ============================================================
   CABEÇALHO
   ============================================================ */
/* CABEÇALHO FLUTUANTE
   Usa position:fixed, não sticky. O sticky depende de nenhum elemento acima na
   hierarquia recortar o conteúdo (overflow) — e no Elementor isso acontece com
   frequência, dependendo do tema e das configurações do container. O fixed é
   independente da hierarquia e funciona sempre.

   Como o fixed retira o cabeçalho do fluxo da página, a altura dele é medida
   pelo JavaScript e guardada em --gi-topo, usada abaixo para compensar o
   espaço no banner e nas âncoras do menu. O valor de reserva (108px) cobre o
   caso de o JavaScript não rodar. */
/* O seletor com elemento + classe e as marcações !important existem pelo mesmo
   motivo do rodapé: o tema Hello Elementor usa a classe "site-header" no
   cabeçalho DELE e limita esse nome a uma largura máxima com centralização
   automática. A regra do tema é literalmente ".site-header, .site-footer", ou
   seja, atinge os nossos dois blocos. Sem isto, o cabeçalho aparece com 800px
   no meio da tela, em vez de ir de ponta a ponta. */
header.site-header,
.site-header{
  position:fixed !important;
  top:0;left:0;right:0;
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  z-index:9990;
  background:var(--bruma);
  background:linear-gradient(rgba(243,244,248,.88),rgba(243,244,248,.88)),var(--bruma);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), transform .35s var(--ease);
}

/* Ao chegar no rodapé, o cabeçalho recolhe.
   O rodapé repete a logo e os mesmos links do menu; com o cabeçalho fixo por
   cima, a mesma informação aparecia duas vezes na tela. O JavaScript observa
   quando o rodapé entra em cena e aplica a classe abaixo. Assim que ele sai, o
   cabeçalho volta.
   Nota: o transform está no PRÓPRIO cabeçalho, o que é permitido. O que
   quebraria o comportamento fixo é transform em um elemento ACIMA dele. */
.site-header.is-recolhido{
  transform:translateY(-100%);
  pointer-events:none;
}
.site-header.is-recolhido .nav{display:none}

@media (prefers-reduced-motion:reduce){
  header.site-header,
  .site-header{transition:border-color .3s var(--ease)}
  header.site-header.is-recolhido,
  .site-header.is-recolhido{transform:none;opacity:0;visibility:hidden}
}
.site-header.is-stuck{border-bottom-color:var(--linha)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:96px}

.brand{display:block;text-decoration:none;line-height:0}
.brand__logo{width:170px;height:auto;display:block}
/* área de respiro do lockup: nunca reduzir abaixo de 120px de largura */
.footer-marca .brand__logo{width:208px}

.site-header .nav,
.nav{display:flex;align-items:center;gap:34px;width:auto;max-width:none;float:none}
.nav a{
  text-decoration:none;font-size:.98rem;color:var(--nevoa);
  padding-bottom:7px;background-image:var(--arco);background-repeat:no-repeat;
  background-size:0% 7px;background-position:left bottom;
  transition:color .22s var(--ease),background-size .3s var(--ease);
}
.nav a:hover{color:var(--marinho);background-size:100% 7px}

.nav-toggle{display:none;background:none;border:1px solid var(--linha-forte);border-radius:var(--r);padding:10px 12px;line-height:0}
.nav-toggle span{display:block;width:19px;height:1.5px;background:var(--marinho);margin:4px 0;transition:transform .3s var(--ease),opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ============================================================
   O ARCO · elemento gráfico único
   ============================================================ */
.arco-divisor{width:100%;height:64px;display:block;overflow:hidden}
.hero .arco-divisor{height:var(--arco-h)}
.arco-divisor svg{width:100%;height:100%;display:block}
.arco-linha{fill:none;stroke:var(--carmim);stroke-width:1.5;opacity:.45}
.arco-ponto{fill:var(--carmim)}
.section--marinho .arco-linha{stroke:var(--argila);opacity:.5}
.section--marinho .arco-ponto{fill:var(--argila)}

/* animação de traço do arco do herói */
.arco-anim .arco-linha{stroke-dasharray:1300;stroke-dashoffset:1300;animation:tracar 1.6s var(--ease) .35s forwards}
.arco-anim .arco-ponto{opacity:0;animation:aparecer .5s var(--ease) 1.7s forwards}
@keyframes tracar{to{stroke-dashoffset:0}}
@keyframes aparecer{to{opacity:1}}

/* ============================================================
   HERÓI
   ============================================================ */
/* Respiro simétrico: o texto é centrado na grade e o padding do topo do
   herói tem exatamente a altura do arco que fecha a seção (--arco-h).
   Assim a distância do texto ao cabeçalho e à grade de baixo é sempre igual,
   em qualquer largura de tela. */
/* A cor Bruma vinha do body{} no site original. No WordPress o body pertence
   ao tema, então cada bloco declara o próprio fundo. Sem isto, o banner e as
   seções sem modificador ficam brancos, destoando do cabeçalho. */
/* --hero-topo é o respiro entre o cabeçalho e o texto do banner.
   Antes ele usava o mesmo valor de --arco-h (48px), pela ideia de deixar a
   distância de cima igual à de baixo. Só que o cabeçalho ficou mais alto que
   o previsto (129px em vez de 108px), e a soma empurrou o conteúdo para baixo
   demais. Agora os dois valores são independentes: mexer aqui não altera a
   altura do arco. Para mais respiro, aumente; para menos, diminua. */
.hero{
  --arco-h:48px;
  --hero-topo:26px;
  padding:calc(var(--gi-topo,108px) + var(--hero-topo)) 0 0;
  background:var(--bruma);
}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:end}
.hero__copy{align-self:center;max-width:600px}
.hero h1{margin-bottom:24px;max-width:17ch}
.hero__sub{font-size:1.04rem;color:var(--nevoa-txt);max-width:56ch;margin-bottom:16px}
.hero__sub--fim{margin-bottom:32px}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 34px}

/* Retrato do consultório, com o próprio fundo dissolvendo na Bruma.
   O esmaecimento está gravado no canal alpha da imagem — não usar máscara aqui. */
/* O esmaecimento da foto do banner é feito AQUI, com faixas da própria cor de
   fundo por cima da imagem. Antes ele vinha gravado na transparência do arquivo,
   mas o WordPress e os plugins de otimização costumam achatar o canal alfa, e a
   foto aparecia como um retângulo de bordas duras. Deste jeito funciona sempre,
   com qualquer formato de imagem. */
.hero__foto{display:flex;justify-content:flex-end;align-items:flex-end}
/* A foto pode estar com ou sem o invólucro .hero__moldura, dependendo da versão
   do bloco que está colada no site. As duas formas precisam ter a mesma
   largura máxima — sem esta regra, a imagem sem invólucro renderiza no tamanho
   natural (700px), empurra o texto para baixo e invade o arco decorativo. */
.hero__foto > img{width:100%;max-width:520px;height:auto;margin:0 -34px -30px 0}
.hero__moldura{
  position:relative;display:block;line-height:0;
  width:100%;max-width:520px;
  /* A margem inferior negativa fazia a foto descer sobre a faixa do arco, e a
     linha vermelha cruzava a parte de baixo da imagem. Zerada, a foto termina
     onde a grade termina e o arco fica livre. */
  margin:0 -34px 0 0;
}
.hero__moldura img{width:100%;height:auto;display:block}
.hero__moldura::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,  var(--bruma) 0%, rgba(243,244,248,0) 27%),
    linear-gradient(to left,   var(--bruma) 0%, rgba(243,244,248,0) 27%),
    linear-gradient(to bottom, var(--bruma) 0%, rgba(243,244,248,0) 16%),
    linear-gradient(to top,    var(--bruma) 0%, rgba(243,244,248,0) 26%);
}

.trust{
  border-top:1px solid var(--linha);
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;
}
.trust__item{
  display:flex;align-items:center;gap:12px;
  padding:26px 0 26px 26px;
  font-size:.9rem;color:var(--nevoa-txt);
  border-left:1px solid var(--linha);
}
.trust__item:first-child{padding-left:0;border-left:0}
.trust__icone{
  width:20px;height:20px;flex:none;
  fill:none;stroke:var(--carmim);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ============================================================
   SEÇÕES
   ============================================================ */
section.section,
.section{padding:112px 0;background:var(--bruma);width:auto;max-width:none;margin-left:0;margin-right:0;float:none}
/* Os modificadores precisam do mesmo peso da regra base "section.section".
   Sem o elemento no seletor, eles ficam com peso menor, a base vence e pinta
   todas as seções de Bruma — inclusive as marinho, que ficam com texto claro
   sobre fundo claro e somem. */
section.section--papel,
.section--papel{background:var(--papel);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
section.section--marinho,
.section--marinho{background:var(--marinho);color:var(--papel)}
.section--marinho .eyebrow{color:var(--argila)}
.section--marinho .lead,.section--marinho .muted{color:rgba(251,251,253,.7)}
.section--marinho h2,.section--marinho h3{color:var(--papel)}

.section-head{max-width:60ch;margin-bottom:64px}
.section-head--curto{margin-bottom:48px}
.section-head h2{margin-bottom:22px}
.section-head .lead + .lead{margin-top:18px}

/* ---------- Grade de temas ---------- */
/* As divisórias são BORDAS de cada cartão, não vãos de 1px deixando o fundo do
   pai aparecer. Com colunas fracionárias, o arredondamento de subpixel faz
   alguns vãos de 1px sumirem e outros não — as linhas ficam irregulares.
   Com borda, cada linha é desenhada de propósito e sempre aparece. */
.temas{
  display:grid;grid-template-columns:repeat(6,1fr);gap:0;
  border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);
}
/* 5 cartões: 3 na primeira fileira (2 colunas cada), 2 na segunda (3 cada) */
.tema{grid-column:span 2;padding:40px 34px 42px;background:transparent}
.tema:nth-child(4),.tema:nth-child(5){grid-column:span 3}

/* divisórias verticais: todo cartão que não abre fileira */
.tema:nth-child(2),.tema:nth-child(3),.tema:nth-child(5){
  border-left:1px solid var(--linha);
}
/* divisória horizontal entre as duas fileiras */
.tema:nth-child(4),.tema:nth-child(5){border-top:1px solid var(--linha)}
.tema{transition:background-color .35s var(--ease)}
.tema:hover{background:rgba(30,42,68,.028)}
.tema__arco{display:block;width:34px;height:9px;margin-bottom:20px}
.tema__arco path{fill:none;stroke:var(--carmim);stroke-width:1.6}
.tema h3{margin-bottom:12px}
.tema p{font-size:.97rem;color:var(--nevoa-txt);margin:0}

/* ---------- Passos ---------- */
.passos{border-top:1px solid var(--linha-clara);margin:0;padding:0;list-style:none}
.passo{
  display:grid;grid-template-columns:64px 310px 1fr;gap:34px;align-items:baseline;
  padding:38px 0;border-bottom:1px solid var(--linha-clara);
}
.passo__num{
  font-family:var(--display);font-size:1.22rem;font-weight:500;
  color:var(--argila);letter-spacing:.04em;line-height:1.3;
  font-variant-numeric:tabular-nums;
}
.passo p{color:rgba(251,251,253,.72);font-size:1rem;margin:0}
.passo__nota{display:block;margin-top:12px;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(251,251,253,.62)}

/* ---------- O combinado ---------- */
/* A coluna de texto fica centrada verticalmente em relação à tabela de fatos. */
.combinado{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.fatos{border-top:1px solid var(--linha-forte)}
.fato{display:flex;justify-content:space-between;align-items:baseline;gap:28px;padding:19px 0;border-bottom:1px solid var(--linha)}
.fato__chave{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--nevoa-txt);flex:none;padding-top:4px}
.fato__valor{text-align:right;font-size:1rem;line-height:1.5}
.fato__valor small{display:block;font-size:.84rem;color:var(--nevoa-txt);margin-top:2px}

.nota-bloco{
  margin-top:34px;padding:30px 32px;
  background:rgba(231,154,148,.16);border-radius:var(--r);
}
.nota-bloco p{font-size:.98rem;margin:0}

/* ---------- Faixa de chamada (entre "A sessão" e "Sobre mim") ---------- */
/* Fundo Marinho, como as seções "Como funciona" e "Contato". Bloco curto e de
   respiro menor que uma seção inteira: é uma pausa dentro da leitura, não um
   assunto novo. O botão usa a variante clara, igual à da seção de contato. */
.faixa{background:var(--marinho);color:var(--papel);padding:78px 0}

/* As duas colunas se encontram no meio da seção: a da esquerda alinha o texto
   à direita, a da direita alinha à esquerda. As larguras são iguais e o vão
   entre elas é curto, para o conjunto ficar concentrado no centro em vez de
   esticado nas bordas. */
.faixa-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:34px 56px;align-items:center;
}
.faixa__titulo{
  text-align:right;
  display:flex;flex-direction:column;align-items:flex-end;
}
.faixa__arco{display:block;width:38px;height:10px;margin-bottom:18px}
.faixa__arco path{fill:none;stroke:var(--argila);stroke-width:1.6}
.faixa h2{
  color:var(--papel);margin:0;
  font-size:clamp(1.55rem,2.9vw,2.15rem);line-height:1.16;max-width:17ch;
}
.faixa__lado{max-width:42ch}
.faixa__lado p{
  margin:0 0 26px;
  font-size:1.02rem;color:rgba(251,251,253,.72);
}
.faixa__lado p:last-child{margin-bottom:0}

/* Botão da faixa em verde de WhatsApp atenuado — derivado do #00A884 que o
   aplicativo usa em modo escuro, escurecido até caber entre dois limites:
     · texto Papel sobre o verde .......... 4,56:1 (WCAG AA para texto)
     · verde sobre o fundo Marinho ........ 3,03:1 (WCAG AA para componentes)
   Acima disso o texto claro fica ilegível; abaixo, o botão se dissolve no
   fundo escuro da faixa. Este é o ÚNICO ponto do site com verde; nos demais
   o botão segue a paleta da marca. */
.faixa .btn--zap{background:#00836B;color:var(--papel);border-color:#00836B}
.faixa .btn--zap:hover{background:#00705B;border-color:#00705B;transform:translateY(-2px)}
.faixa .btn--zap svg{fill:var(--papel)}

/* ---------- Sobre ---------- */
/* A foto fica centrada verticalmente em relação ao bloco de texto inteiro. */
.sobre{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px 80px;align-items:center}
.sobre > .reveal:first-child{align-self:center}
.retrato{
  position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(165deg,rgba(231,154,148,.35),rgba(30,42,68,.10));
  border:1px solid var(--linha);display:flex;align-items:center;justify-content:center;
}
.retrato img{width:100%;height:100%;object-fit:cover}
/* A foto do consultório entra em cor natural, para destacar do fundo do site.
   O duotone marinho + rosa argila do guia fica reservado a fotos de banco de imagem:
   basta trocar opacity:0 por .15 abaixo para reativá-lo. */
.retrato::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,var(--marinho),var(--argila));
  mix-blend-mode:screen;opacity:0;
}
.retrato{box-shadow:0 26px 54px -34px rgba(30,42,68,.4)}

/* Ficha de formação: faixa de largura total abaixo da foto e do texto.
   Registro e Graduação à esquerda; Pós-graduação e Formações à direita. */
.credenciais{
  grid-column:1 / -1;margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;
  grid-auto-flow:column;column-gap:80px;
}
.credenciais li{
  display:flex;flex-direction:column;gap:7px;
  padding:20px 0;border-bottom:1px solid var(--linha);
  font-size:.97rem;line-height:1.55;
}
.credenciais li span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--carmim);line-height:1.4}


/* ---------- Compromissos ---------- */
.compromissos{display:grid;grid-template-columns:repeat(2,1fr);gap:38px 64px}
.compromisso{padding-top:24px;border-top:1px solid var(--linha-forte)}
.compromisso h3{font-size:1.12rem;margin-bottom:10px}
.compromisso p{font-size:.97rem;color:var(--nevoa-txt);margin:0}

/* ---------- Dúvidas ---------- */
.duvidas{max-width:840px;border-top:1px solid var(--linha)}
.duvida{border-bottom:1px solid var(--linha)}
.duvida summary{
  display:flex;justify-content:space-between;align-items:center;gap:28px;
  padding:26px 0;font-family:var(--display);font-size:1.1rem;font-weight:500;
  letter-spacing:-.01em;cursor:pointer;list-style:none;
}
.duvida summary::-webkit-details-marker{display:none}
.duvida__sinal{position:relative;width:13px;height:13px;flex:none}
.duvida__sinal::before,.duvida__sinal::after{
  content:"";position:absolute;background:var(--carmim);transition:transform .3s var(--ease);
}
.duvida__sinal::before{top:6px;left:0;width:13px;height:1.5px}
.duvida__sinal::after{left:6px;top:0;width:1.5px;height:13px}
.duvida[open] .duvida__sinal::after{transform:rotate(90deg)}
.duvida__corpo{padding:0 60px 30px 0}
.duvida__corpo p{font-size:1rem;color:var(--nevoa-txt)}

/* ---------- Contato ---------- */
.contato{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
.contato h2{margin-bottom:22px}
.contato__coluna{display:flex;flex-direction:column;align-items:center;gap:30px}

.contato__chip{
  display:inline-flex;align-items:center;
  font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--argila);background:rgba(231,154,148,.14);
  border-radius:100px;padding:7px 15px;margin:0 0 24px;
}

.section address{font-style:normal;margin:0;line-height:inherit}
.contato__dados{margin:32px 0 0;padding:0;list-style:none;display:grid;gap:16px}
.contato__dados li{display:flex;align-items:center;gap:14px;font-size:.98rem;color:rgba(251,251,253,.86)}
.contato__dados a{color:rgba(251,251,253,.86);text-decoration:none;transition:color .2s var(--ease)}
.contato__dados a:hover{color:var(--argila)}
.contato__icone{
  width:38px;height:38px;flex:none;border-radius:50%;
  background:rgba(251,251,253,.07);border:1px solid rgba(251,251,253,.12);
  display:flex;align-items:center;justify-content:center;
}
.contato__icone svg{width:17px;height:17px;fill:none;stroke:var(--argila);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.contato__icone svg.cheio{fill:var(--argila);stroke:none}

.contato__redes{display:flex;gap:10px;margin-top:28px}
.contato__redes a{
  width:42px;height:42px;border-radius:var(--r);
  border:1px solid rgba(251,251,253,.16);
  display:flex;align-items:center;justify-content:center;
  transition:background-color .25s var(--ease),border-color .25s var(--ease);
}
.contato__redes a:hover{background:rgba(251,251,253,.08);border-color:rgba(251,251,253,.32)}
.contato__redes svg{width:18px;height:18px;fill:none;stroke:rgba(251,251,253,.78);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.contato__acoes{margin-top:34px}

/* ---- Mockup: conversa no WhatsApp (modo escuro) ----
   ATENÇÃO: este bloco NÃO segue a paleta da marca, de propósito. São as cores
   reais do WhatsApp em modo escuro, para que o mockup seja reconhecido de
   imediato como uma conversa de verdade. É a única exceção do site.

   Proporções de aparelho real: tela 393x852pt (iPhone). Tudo dimensionado em
   cqw sobre a largura da tela, então o conteúdo escala como um print. */
.telefone{
  /* cores oficiais do WhatsApp, modo escuro */
  --zap-tela:#0B141A;     /* fundo da conversa            */
  --zap-barra:#202C33;    /* barra de topo e campo        */
  --zap-balao:#202C33;    /* balão recebido               */
  --zap-eu:#005C4B;       /* balão enviado (verde)        */
  --zap-campo:#2A3942;    /* caixa de texto               */
  --zap-pilula:#182229;   /* etiqueta de data             */
  --zap-texto:#E9EDEF;    /* texto principal              */
  --zap-fraco:#8696A0;    /* horários e texto secundário  */
  --zap-linha:rgba(233,237,239,.08);
  --zap-tique:#53BDEB;    /* tiques de leitura (azul)     */
  --zap-enviar:#00A884;   /* botão de enviar              */

  container-type:inline-size;
  width:100%;max-width:300px;
  background:#0A0F13;border:1px solid rgba(233,237,239,.16);
  border-radius:38px;padding:9px;
  box-shadow:0 44px 74px -42px rgba(0,0,0,.85);
}
.telefone__tela{
  position:relative;aspect-ratio:393/852;
  background:var(--zap-tela);border-radius:30px;overflow:hidden;
  display:flex;flex-direction:column;
  font-family:var(--sans);
}
.telefone__ilha{
  position:absolute;top:8px;top:2.8cqw;left:50%;transform:translateX(-50%);z-index:3;
  width:90px;height:27px;width:31.8cqw;height:9.4cqw;border-radius:100px;background:#0A0F13;
}
.conversa__status{
  display:flex;align-items:center;justify-content:space-between;
  padding:3.4cqw 5.1cqw 1.6cqw;background:var(--zap-barra);
  font-size:9px;font-size:3.05cqw;font-weight:600;color:var(--zap-texto);letter-spacing:.01em;
}
.conversa__sinal{display:flex;align-items:center;gap:1.4cqw}
.conversa__sinal svg{height:2.6cqw;width:auto;fill:var(--zap-texto);opacity:.9}

/* Topo da conversa: nome e estado empilhados e centrados na altura do avatar,
   como no aplicativo. */
.conversa__topo{
  display:flex;align-items:center;gap:3.05cqw;
  padding:2cqw 3.6cqw 2.4cqw;background:var(--zap-barra);
}
.conversa__voltar{
  width:2cqw;height:2cqw;flex:none;
  border-left:1.5px solid var(--zap-texto);border-bottom:1.5px solid var(--zap-texto);
  transform:rotate(45deg);opacity:.85;
}
.conversa__avatar{
  width:29px;height:29px;width:10.2cqw;height:10.2cqw;flex:none;border-radius:50%;
  background:#FFF;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.conversa__avatar img{width:7.8cqw;height:7.8cqw;object-fit:contain}
.conversa__id{display:flex;flex-direction:column;justify-content:center;min-width:0}
.conversa__nome{
  font-family:var(--sans);font-size:12px;font-size:4.1cqw;font-weight:500;
  color:var(--zap-texto);line-height:1.25;letter-spacing:0;
}
.conversa__estado{font-size:9px;font-size:3cqw;color:var(--zap-fraco);line-height:1.3}

.conversa{
  flex:1;min-height:0;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  gap:1.8cqw;padding:2.5cqw 2.5cqw 2.2cqw;
}
.conversa__dia{
  align-self:center;margin-bottom:1cqw;
  font-size:8px;font-size:2.7cqw;letter-spacing:.04em;text-transform:uppercase;
  color:var(--zap-fraco);background:var(--zap-pilula);
  border-radius:100px;padding:1cqw 3cqw;
}
.bolha{
  position:relative;max-width:78%;background:var(--zap-balao);
  border-radius:.5cqw 2.4cqw 2.4cqw 2.4cqw;padding:1.8cqw 2.3cqw 1.3cqw;
  font-size:11px;font-size:3.95cqw;line-height:1.42;color:var(--zap-texto);
  box-shadow:0 1px 1px rgba(0,0,0,.25);
  opacity:0;transform:translateY(9px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.bolha::before{
  content:"";position:absolute;left:-1.5cqw;top:0;
  border:1.5cqw solid transparent;border-right:0;
  border-top:1.9cqw solid var(--zap-balao);
}
.reveal.is-visible .bolha,
html:not(.gi-js) .bolha{opacity:1;transform:none}
.conversa .bolha:nth-child(2){transition-delay:.08s}
.conversa .bolha:nth-child(3){transition-delay:.38s}
.conversa .bolha:nth-child(4){transition-delay:.66s}
.conversa .bolha:nth-child(5){transition-delay:.98s}
.conversa .bolha:nth-child(6){transition-delay:1.26s}
.conversa .bolha:nth-child(7){transition-delay:1.54s}
.bolha--eu{align-self:flex-end;background:var(--zap-eu);border-radius:2.4cqw .5cqw 2.4cqw 2.4cqw}
.bolha--eu::before{display:none}
.bolha--eu::after{content:"";position:absolute;right:-1.5cqw;top:0;border:1.5cqw solid transparent;border-left:0;border-top:1.9cqw solid var(--zap-eu)}
.bolha__hora{display:block;text-align:right;font-size:8px;font-size:2.8cqw;color:var(--zap-fraco);margin-top:.6cqw;white-space:nowrap}
.bolha--eu .bolha__hora{color:rgba(233,237,239,.6)}
.bolha__hora svg{width:4cqw;height:2.8cqw;margin-left:1cqw;vertical-align:-.3cqw;fill:none;stroke:var(--zap-tique);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.conversa__campo{display:flex;align-items:center;gap:2.2cqw;padding:2cqw 2.5cqw 3.4cqw;background:var(--zap-barra)}
.conversa__campo span{flex:1;font-size:11px;font-size:3.8cqw;color:var(--zap-fraco);background:var(--zap-campo);border-radius:100px;padding:2.2cqw 3.6cqw}
.conversa__enviar{width:24px;height:24px;width:8.6cqw;height:8.6cqw;flex:none;border-radius:50%;background:var(--zap-enviar);display:flex;align-items:center;justify-content:center}
.conversa__enviar svg{width:4cqw;height:4cqw;fill:#0B141A}

/* ---------- Rodapé ---------- */
/* LARGURA TOTAL DO RODAPÉ
   O rodapé costuma ficar dentro de um invólucro mais estreito que a tela —
   seja o do Construtor de temas, seja o do próprio tema. As regras de
   neutralização não alcançam todos os casos, porque cada tema usa um invólucro
   diferente.

   A técnica abaixo resolve sem precisar saber qual é o invólucro: o rodapé
   passa a ter a largura da janela e recua com margem negativa para compensar.

   O detalhe importante é que ela NÃO faz efeito quando não é necessária: se o
   invólucro já ocupa a tela inteira, calc(50% - 50vw) resulta em zero e nada
   muda. Por isso pode ficar sempre ligada, sem risco. */
/* O !important aqui é necessário, não é preguiça.
   O tema Hello Elementor usa a MESMA classe "site-footer" no rodapé dele, e
   aplica a esse nome uma largura máxima com centralização automática. Como o
   nosso rodapé usa a mesma classe, herda essa limitação — foi assim que ele
   apareceu com 800px de largura no meio de uma janela de 1073px, enquanto
   todas as outras seções ocupavam a tela inteira.

   O seletor abaixo tem especificidade maior (elemento + classe) e as
   declarações são marcadas, para vencer a regra do tema em qualquer ordem de
   carregamento. */
footer.site-footer,
.site-footer{
  padding:72px 0 44px;
  background:var(--bruma);
  border-top:1px solid var(--linha);
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  margin-top:0 !important;
  float:none !important;
}

/* Impede a barra de rolagem horizontal que os 100vw podem criar no Windows.
   Usamos "clip" em vez de "hidden" porque hidden cria uma área de rolagem e
   quebraria o cabeçalho fixo. */
html{overflow-x:clip}
.urgencia{
  padding:24px 28px;border:1px solid var(--linha);border-radius:var(--r);
  background:var(--papel);font-size:.9rem;color:var(--nevoa-txt);margin-bottom:52px;
}
.urgencia strong{color:var(--marinho)}
.urgencia p{max-width:none}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:52px;padding-bottom:48px}
.footer-top h2{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nevoa-txt);margin:0 0 18px;font-weight:500}
.footer-links{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.footer-links a{display:inline-block;padding:6px 0}  /* alvo de toque ≥ 44px de altura útil */
.footer-links a{text-decoration:none;font-size:.96rem;color:var(--nevoa-txt);transition:color .2s var(--ease)}
.footer-links a:hover{color:var(--marinho)}
.footer-marca p{font-size:.92rem;color:var(--nevoa-txt);margin-top:16px;max-width:32ch}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px 36px;justify-content:space-between;padding-top:28px;border-top:1px solid var(--linha);font-size:.82rem;color:var(--nevoa-txt)}

/* ---------- WhatsApp flutuante ---------- */
.wa{
  position:fixed !important;right:24px;bottom:24px;
  z-index:9980;   /* logo abaixo do cabeçalho (9990) e acima de tudo o mais */
  width:56px;height:56px;border-radius:50%;
  background:var(--marinho);color:var(--papel);
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  box-shadow:0 18px 34px -14px rgba(30,42,68,.55);
  transition:transform .3s var(--ease),background-color .3s var(--ease);
}
.wa:hover{transform:scale(1.06);background:#162034}

/* ---------- Revelação ---------- */
/* IMPORTANTE — o conteúdo só é escondido se o JavaScript estiver funcionando.
   A classe "gi-js" é colocada no <html> pelo próprio script. Se o script não
   rodar (plugin desativado, erro, bloqueador), a classe não existe e TUDO
   aparece normalmente. Nunca deixe uma seção invisível por falta de script. */
.gi-js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.gi-js .reveal.is-visible{opacity:1;transform:none}

/* No editor do Elementor, mostra tudo — senão você edita blocos invisíveis */
/* Dentro do editor do Elementor o JavaScript do site não roda, então nada
   receberia a classe que revela o conteúdo. Sem estas regras, você editaria
   blocos invisíveis — era o que acontecia com os balões do celular na seção
   Contato: o aparelho aparecia montado, mas vazio. */
body.elementor-editor-active .reveal,
body.elementor-editor-preview .reveal,
body.elementor-editor-active .bolha,
body.elementor-editor-preview .bolha{opacity:1 !important;transform:none !important}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1024px){
  .combinado,.sobre,.contato{grid-template-columns:1fr;gap:48px}
  .faixa-grid{gap:26px 44px}
  .contato{gap:56px}
  .contato__coluna{align-items:center}
  .hero-grid{grid-template-columns:1.1fr .9fr;gap:32px}
  .hero__moldura,.hero__foto > img{max-width:440px;margin-right:-22px}
  .retrato{max-width:340px;aspect-ratio:4/5}
  .credenciais{column-gap:48px;margin-top:48px}
  .temas{grid-template-columns:repeat(2,1fr)}
  .tema,.tema:nth-child(4),.tema:nth-child(5){grid-column:auto}
  .tema:nth-child(5){grid-column:span 2}
  /* fileiras: (1,2) (3,4) (5) — refaz as divisórias para 2 colunas */
  .tema{border-left:0;border-top:0}
  .tema:nth-child(2),.tema:nth-child(4){border-left:1px solid var(--linha)}
  .tema:nth-child(3),.tema:nth-child(4),.tema:nth-child(5){border-top:1px solid var(--linha)}
  .passo{grid-template-columns:58px 1fr;gap:18px 22px}
  .passo p{grid-column:2}
  .trust{grid-template-columns:repeat(2,1fr)}
  .trust__item{padding:20px 0 20px 22px}
  .trust__item:nth-child(odd){padding-left:0;border-left:0}
  .trust__item:nth-child(n+3){border-top:1px solid var(--linha)}
}
@media (max-width:820px){
  /* IMPORTANTE: estes seletores precisam do ".site-header" na frente.
     A regra que blinda o menu contra temas é ".site-header .nav{display:flex}",
     de peso 2. Se aqui usarmos só ".nav", de peso 1, a blindagem vence e o
     menu do celular fica permanentemente aberto — foi o que aconteceu. */
  .site-header .nav{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--papel);border-bottom:1px solid var(--linha);padding:6px 28px 22px;
    display:none;
  }
  .site-header .nav.is-open{display:flex}
  .site-header .nav a{padding:15px 0;border-bottom:1px solid var(--linha);color:var(--marinho);background-image:none;text-align:left}
  .nav-toggle{display:block}
  .header-cta{display:none}
  .header-inner{min-height:96px}
  /* Em telas menores o cabeçalho ocupa proporcionalmente muito mais espaço.
     Sem um valor próprio aqui, o respiro herdava os 26px do desktop e o texto
     do banner descia demais. PARA AJUSTAR: mexa só neste número. */
  .hero{--hero-topo:12px}
  .brand__logo{width:154px}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero__copy{max-width:none}
  .hero__foto{justify-content:center}
  /* A foto sai da coluna e passa a ocupar a largura toda. Em telas menores ela
     domina o banner: reduzimos o tamanho e damos folga antes do arco, para as
     duas bordas suaves — o esmaecimento da foto e a linha — não se encostarem. */
  .hero__foto{justify-content:center}
  .hero__moldura,.hero__foto > img{max-width:340px;margin:0 0 12px}
  section.section,
  .section{padding:80px 0}
  .faixa{padding:62px 0}
  .faixa-grid{grid-template-columns:1fr;gap:24px}
  /* em coluna única, alinhar à direita quebraria a leitura */
  .faixa__titulo{text-align:left;align-items:flex-start}
  .faixa h2,.faixa__lado{max-width:none}
  .footer-top{grid-template-columns:1fr;gap:36px}
}
@media (max-width:640px){
  .site-header,.hero,.section,.site-footer,.wa{font-size:17px}
  :root{--gutter:22px}
  .faixa{padding:52px 0}
  .faixa .btn{width:100%;justify-content:center}
  .brand__logo{width:142px}
  .footer-marca .brand__logo{width:178px}
  .hero{--arco-h:34px;--hero-topo:8px}
  .header-inner{min-height:88px}
  .hero-grid{gap:22px}
  .hero__moldura,.hero__foto > img{max-width:270px;margin:0 0 10px}
  .temas{grid-template-columns:1fr}
  .tema:nth-child(5){grid-column:auto}
  /* uma coluna: só divisórias horizontais */
  .tema{border-left:0 !important;border-top:0}
  .tema + .tema{border-top:1px solid var(--linha)}
  .compromissos{grid-template-columns:1fr;gap:30px}
  .trust{grid-template-columns:1fr}
  .trust__item{padding:16px 0;border-left:0}
  .trust__item + .trust__item{border-top:1px solid var(--linha)}
  .fato{flex-direction:column;gap:4px}
  .fato__valor{text-align:left}
  .credenciais{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;margin-top:44px}
  .duvida__corpo{padding-right:0}
  .arco-divisor{height:44px}
  .hero-grid{align-items:stretch}
}

@media (prefers-reduced-motion:reduce){
  /* o scroll-behavior é do tema; aqui só desligamos as nossas animações */
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal,.gi-js .reveal{opacity:1;transform:none}
  .bolha{opacity:1;transform:none}
  .arco-anim .arco-linha{stroke-dashoffset:0}
  .arco-anim .arco-ponto{opacity:1}
}


/* --------------------------------------------------------------------------
   14. GUARDAS CONTRA CONFLITOS DE TEMA E DE PLUGIN
   Temas do WordPress costumam aplicar sublinhado em links, sombra em imagens
   e cor própria em botões. Estas regras protegem o desenho original.
   -------------------------------------------------------------------------- */
:where(.site-header,.hero,.section,.site-footer) :where(a){text-decoration:none}
.duvida summary{list-style:none}
.duvida summary::marker,
.duvida summary::-webkit-details-marker{display:none;content:""}

/* O Elementor às vezes força altura mínima nos widgets vazios */
.gi-secao .elementor-widget-html > .elementor-widget-container{min-height:0}

/* GUARDAS DO CABEÇALHO FIXO
   Um elemento com position:fixed deixa de se fixar na janela se algum
   ancestral tiver transform, filter, perspective ou contain. O Elementor
   aplica transform em containers quando há efeitos de movimento ligados.
   Se o cabeçalho "descolar" ao rolar, o motivo costuma ser esse: desligue os
   efeitos de movimento do container do cabeçalho. */
.gi-cabecalho,
.gi-cabecalho > .e-con-inner,
.gi-cabecalho .elementor-widget-html,
.gi-cabecalho .elementor-widget-container{
  overflow:visible !important;
  transform:none !important;
  filter:none !important;
  perspective:none !important;
  contain:none !important;
}
/* Sem o cabeçalho no fluxo, o container dele não deve reservar altura */
.gi-cabecalho{min-height:0 !important}

/* O menu do celular abre logo abaixo da barra fixa */
.site-header .nav{z-index:9991}

/* Se o tema tiver container próprio com padding lateral, some com ele
   apenas nas nossas seções */
.gi-secao .elementor-section-boxed > .elementor-container{max-width:100% !important}/* End custom CSS */