/* ==========================================================================
   Estrutura do site. Sem cor fixa: cores, fontes e raio vêm de tema.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 1.0625rem/1.7 var(--corpo);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  color: var(--tinta);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .5em;
  text-transform: none;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }

/* destaque de título por peso: 600 no título, 800 no trecho */
.realce { font-weight: 800; color: var(--destaque-escuro); }
.escuro .realce, .faixa-foto .realce { color: var(--destaque-claro); }

.oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.pular-para-conteudo {
  position: absolute; left: 1em; top: -4em; z-index: 100;
  background: var(--tinta); color: #fff; padding: .6em 1em; border-radius: 8px;
}
.pular-para-conteudo:focus { top: 1em; }

/* contêiner encaixotado em 1140px */
.env { width: 100%; max-width: 1140px; margin: 0 auto; }
.secao { padding: 4em 0; }
.secao--fundo-alt { background: var(--fundo-alt); }
.escuro { background: var(--tinta); color: var(--sobre-escuro); }
.escuro h2, .escuro h3 { color: var(--sobre-escuro-titulo); }

.rotulo {
  display: inline-block;
  font: 700 .8rem/1 var(--corpo);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--destaque);
  margin-bottom: 1em;
}
.escuro .rotulo, .faixa-foto .rotulo { color: var(--destaque-claro); }

.lead { font-size: 1.15rem; }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .95em 1.6em;
  border-radius: 999px;
  font: 700 .95rem/1 var(--corpo);
  text-decoration: none;
  border: 2px solid transparent;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
  cursor: pointer;
}
.botao svg { width: 1.2em; height: 1.2em; flex: none; }
.botao--principal { background: var(--destaque); color: #fff; }
.botao--principal:hover { background: var(--destaque-escuro); transform: translateY(-2px); }
.botao--contorno { border-color: var(--tinta); color: var(--tinta); }
.botao--contorno:hover { background: var(--tinta); color: #fff; }
.botao--claro { background: #fff; color: var(--destaque-escuro); }
.botao--claro:hover { background: var(--fundo-alt); }
.grupo-botoes { display: flex; flex-wrap: wrap; gap: .8em; margin-top: 1.8em; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgb(var(--fundo-rgb) / .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha);
}
/* .topo .topo__interno vence o .env dos breakpoints, que zeraria o vertical no shorthand */
.topo .topo__interno {
  display: flex; align-items: center; gap: 2em;
  padding-block: .9em;
}
.marca { display: flex; flex-direction: column; text-decoration: none; line-height: 1.1; margin-right: auto; }
.marca__nome { font: 800 1.35rem/1 var(--display); color: var(--tinta); }
.marca__nome span { color: var(--destaque); }
.marca__sub { font: 600 .72rem/1.4 var(--corpo); letter-spacing: .12em; text-transform: uppercase; color: var(--texto); }
/* no desktop o painel não existe: nav e botão voltam a ser itens do .topo__interno */
.topo__painel { display: contents; }
.menu-veu { display: none; }
.nav { display: flex; gap: 1.8em; }
.nav a {
  position: relative;
  text-decoration: none; font-weight: 600; font-size: .98rem; color: var(--tinta);
  padding: .3em 0;
  transition: color .3s;
}
/* linha que nasce do centro e abre para os lados; pontinho em cima marca a intenção */
.nav a::after {
  content: ""; position: absolute; left: 50%; bottom: -.15em;
  width: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--destaque-claro), var(--destaque), var(--destaque-claro));
  transform: translateX(-50%);
  transition: width .4s cubic-bezier(.2, .8, .2, 1);
}
.nav a::before {
  content: ""; position: absolute; left: 50%; top: -.35em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--destaque);
  transform: translate(-50%, 4px) scale(0); opacity: 0;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .25s;
}
.nav a:hover, .nav a:focus-visible { color: var(--destaque-escuro); }
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="page"]::after { width: 100%; }
.nav a:hover::before, .nav a:focus-visible::before { transform: translate(-50%, 0) scale(1); opacity: 1; }
.nav a[aria-current="page"] { color: var(--destaque-escuro); }
.topo .botao { padding: .8em 1.3em; }
.menu-alternar { display: none; background: none; border: 0; color: var(--tinta); padding: .3em; cursor: pointer; }
.menu-alternar svg { width: 28px; height: 28px; }
.menu-alternar .fechar { display: none; }

/* ---------- hero ---------- */
.hero {
  min-height: min(88vh, 860px);
  display: flex; align-items: center;
  padding: 6em 0 5em; overflow: hidden;
  /*
   * Fundo em camadas, tudo no background (sem pseudo-elemento: o ::before do contêiner é do Elementor).
   * 1-4: manchas desfocadas que se deslocam devagar
   * 5: véu creme que apaga os anéis longe da foto
   * 6: anéis concêntricos finos saindo de trás do retrato
   */
  background:
    radial-gradient(38% 55% at 88% 18%, rgb(var(--destaque-claro-rgb) / .55), rgb(var(--destaque-claro-rgb) / 0) 70%),
    radial-gradient(34% 50% at 8% 88%, rgb(var(--destaque-rgb) / .22), rgb(var(--destaque-rgb) / 0) 70%),
    radial-gradient(45% 60% at 45% 40%, rgb(var(--superficie-rgb) / .9), rgb(var(--superficie-rgb) / 0) 70%),
    radial-gradient(28% 40% at 62% 95%, rgb(var(--fundo-alt-escuro-rgb) / .8), rgb(var(--fundo-alt-escuro-rgb) / 0) 70%),
    radial-gradient(circle at 72% 52%, rgb(var(--fundo-rgb) / 0) 18%, var(--fundo) 62%),
    repeating-radial-gradient(circle at 72% 52%, rgb(var(--destaque-rgb) / 0) 0 54px, rgb(var(--destaque-rgb) / .13) 55px 56px, rgb(var(--destaque-rgb) / 0) 57px 58px),
    var(--fundo);
  background-size: 130% 130%, 130% 130%, 130% 130%, 130% 130%, 100% 100%, 100% 100%;
  animation: hero-fundo 24s ease-in-out infinite alternate;
}
@keyframes hero-fundo {
  0%   { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0 0, 0 0; }
  50%  { background-position: 60% 40%, 60% 40%, 60% 40%, 60% 40%, 0 0, 0 0; }
  100% { background-position: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 0 0, 0 0; }
}
.hero > .env { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
}
/*
 * Três filhos (texto, figura, ações) para que no celular a foto caiba entre o
 * texto e os botões. No desktop a figura ocupa as duas linhas da coluna direita
 * e o conjunto continua lendo como duas colunas.
 */
/* a segunda linha é 1fr: a sobra de altura da foto fica nela e não abre vão entre o lead e os botões */
.hero__grade { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; column-gap: 6em; align-items: center; }
.hero__texto  { grid-column: 1; grid-row: 1; align-self: end; }
.hero__acoes  { grid-column: 1; grid-row: 2; align-self: start; }
.hero__figura { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.hero__texto p.lead { max-width: 34em; }
.hero__figura { position: relative; margin: 0; }
/* retrato em círculo, com um anel fino deslocado atrás */
.hero__figura::after {
  content: ""; position: absolute; inset: -4% -4% 4% 4%; z-index: -1;
  border: 2px solid var(--destaque-claro); border-radius: 50%;
}
.hero__figura { isolation: isolate; }
.hero__figura img {
  border-radius: 50%;
  aspect-ratio: 1 / 1; object-fit: cover; width: 100%;
  box-shadow: var(--sombra);
}
.credencial {
  position: absolute; left: -1.5em; bottom: 2.2em;
  background: var(--destaque); color: #fff;
  padding: 1.1em 1.4em; border-radius: var(--raio);
  box-shadow: var(--sombra); max-width: 16em;
}
.credencial strong { display: block; font: 700 1.1rem/1.2 var(--display); }
.credencial span { display: block; font-size: .88rem; line-height: 1.5; opacity: .92; }
.credencial__crp {
  display: block; margin-top: .7em; padding-top: .6em;
  border-top: 1px solid rgba(255, 255, 255, .28);
  font: 700 .78rem/1 var(--corpo); font-style: normal;
  letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- queixas: cabeçalho lateral + grade densa ---------- */
.queixas { display: grid; grid-template-columns: .8fr 1.6fr; gap: 3.5em; align-items: start; }
.queixas__cab { position: sticky; top: 7em; }
.grade-queixas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1em; }
/* ícone à esquerda, só no traço e sem caixinha (a caixinha já é a assinatura dos cards de atendimento) */
.queixa {
  display: flex; gap: 1.1em; align-items: flex-start;
  position: relative; overflow: hidden;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 1.5em 1.5em 1.4em 1.4em;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s, border-color .4s;
}
/* barra de cor na lateral que cresce no hover; ::after porque o ::before do contêiner é do Elementor */
.queixa::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--destaque);
  transform: scaleY(0); transform-origin: top;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.queixa__icone {
  display: block; flex: none; color: var(--destaque);
  width: 2.4em; height: 2.4em; margin-top: .05em;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), color .3s;
}
.queixa__icone svg { width: 100%; height: 100%; }
.queixa h3 { font-size: 1.15rem; margin-bottom: .35em; }
.queixa p { font-size: .96rem; margin: 0; }
.queixa:hover {
  transform: translateY(-5px);
  border-color: var(--destaque-claro);
  box-shadow: 0 20px 36px -22px rgb(var(--destaque-escuro-rgb) / .45);
}
.queixa:hover::after { transform: scaleY(1); }
.queixa:hover .queixa__icone { transform: scale(1.12) rotate(-6deg); color: var(--destaque-escuro); }

.queixa--destaque { background: var(--destaque); border-color: var(--destaque); color: var(--sobre-destaque); }
.queixa--destaque h3 { color: #fff; }
.queixa--destaque a { color: #fff; font-weight: 700; }
.queixa--destaque .queixa__icone { color: #fff; }
.queixa--destaque::after { background: var(--destaque-claro); }
.queixa--destaque:hover { border-color: var(--destaque); box-shadow: 0 20px 36px -18px rgb(var(--destaque-escuro-rgb) / .7); }
.queixa--destaque:hover .queixa__icone { color: #fff; }

/* o reveal usa translate; o transform fica livre para o hover */
.js .queixa.revelar { transition: opacity .7s ease, translate .7s ease, transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s, border-color .4s; }
@media (prefers-reduced-motion: reduce) {
  .queixa, .queixa::after, .queixa__icone { transition: none; }
  .queixa:hover, .queixa:hover .queixa__icone { transform: none; }
}

/* ---------- sobre: fotos sobrepostas + texto ---------- */
.sobre { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5em; align-items: center; }
.sobre__fotos { position: relative; padding: 0 3em 4em 0; }
.sobre__fotos img { border-radius: var(--raio); box-shadow: var(--sombra); object-fit: cover; }
.sobre__fotos .f1 { aspect-ratio: 4 / 5; width: 78%; }
.sobre__fotos .f2 {
  position: absolute; right: 0; bottom: 0; width: 58%; aspect-ratio: 4 / 3;
  border: 6px solid var(--fundo);
}
/* ---------- sobre: marcos da formação em cards ---------- */
.abordagem__cab { position: sticky; top: 7em; }   /* acompanha a rolagem, como as queixas e a FAQ */
.formacao { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1em; }
/* ícone em círculo (e não em caixinha): a caixinha quadrada é a assinatura dos cards de atendimento */
.marco {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; align-items: start; gap: .45em 1em;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 1.4em 1.4em 1.5em;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s, border-color .4s;
}
/* barra no pé que abre da esquerda no hover; ::after porque o ::before do contêiner é do Elementor */
.marco::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--destaque), var(--destaque-claro));
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.marco__icone {
  grid-row: span 2; display: grid; place-items: center;
  width: 3.2em; height: 3.2em; border-radius: 50%;
  background: var(--fundo-alt); color: var(--destaque);
  transition: background .35s, color .35s, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.marco__icone svg { width: 1.6em; height: 1.6em; }
.marco__ano { align-self: end; font: 800 1.35rem/1 var(--display); color: var(--destaque-escuro); letter-spacing: -.01em; }
.marco__texto { grid-column: 2; font-size: .94rem; line-height: 1.5; color: var(--texto); }
.marco:hover {
  transform: translateY(-5px);
  border-color: var(--destaque-claro);
  box-shadow: 0 22px 38px -22px rgb(var(--destaque-escuro-rgb) / .5);
}
.marco:hover::after { transform: scaleX(1); }
.marco:hover .marco__icone { background: var(--destaque); color: #fff; transform: rotate(-8deg) scale(1.08); }
.js .marco.revelar { transition: opacity .7s ease, translate .7s ease, transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s, border-color .4s; }
@media (prefers-reduced-motion: reduce) {
  .marco, .marco::after, .marco__icone { transition: none; }
  .marco:hover, .marco:hover .marco__icone { transform: none; }
}

/* ---------- atendimentos: cards com ícone (card inteiro é o link) ---------- */
.cab-centro { text-align: center; max-width: 44em; margin: 0 auto 3em; }
.grade-atend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2em; }
.card-atend {
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--raio);
  padding: 2em 1.6em 1.8em;
  text-decoration: none; color: var(--sobre-escuro);
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s, border-color .45s;
}
/* brilho que sobe do pé do card; ::after porque o ::before do contêiner é do Elementor */
.card-atend::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; z-index: -1;
  background: radial-gradient(120% 80% at 50% 110%, rgb(var(--destaque-rgb) / .55), rgb(var(--destaque-rgb) / 0) 70%);
  opacity: 0; transform: translateY(30%);
  transition: opacity .5s, transform .6s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.card-atend:hover, .card-atend:focus-visible {
  transform: translateY(-8px);
  border-color: rgb(var(--destaque-claro-rgb) / .55);
  box-shadow: 0 24px 44px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgb(var(--destaque-claro-rgb) / .15);
}
.card-atend:hover::after, .card-atend:focus-visible::after { opacity: 1; transform: none; }
.card-atend:focus-visible { outline: 2px solid var(--destaque-claro); outline-offset: 3px; }

.card-atend__icone {
  display: grid; place-items: center;
  width: 4em; height: 4em; border-radius: 50%;
  background: rgb(var(--destaque-claro-rgb) / .14); color: var(--destaque-claro);
  margin-bottom: 1.4em;
  transition: background .4s, color .4s, transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .4s;
}
.card-atend__icone svg { width: 2.1em; height: 2.1em; }
.card-atend:hover .card-atend__icone, .card-atend:focus-visible .card-atend__icone {
  background: var(--destaque); color: #fff;
  transform: scale(1.08) rotate(-8deg);
  box-shadow: 0 0 0 7px rgb(var(--destaque-rgb) / .22);
}
.card-atend h3 { font-size: 1.25rem; margin-bottom: .5em; }
.card-atend p { font-size: .96rem; margin: 0 0 1.4em; }
.card-atend__link {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: .45em;
  color: #fff; font-weight: 700; font-size: .95rem;
  padding-bottom: .15em;
  background: linear-gradient(var(--destaque-claro), var(--destaque-claro)) 0 100% / 100% 2px no-repeat;
  transition: gap .35s, background-size .35s;
}
.card-atend__link::after {
  content: "→"; display: inline-block;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.card-atend:hover .card-atend__link, .card-atend:focus-visible .card-atend__link { gap: .7em; }
.card-atend:hover .card-atend__link::after, .card-atend:focus-visible .card-atend__link::after { transform: translateX(3px); }

.card-atend--destaque { background: var(--destaque); border-color: var(--destaque); color: var(--sobre-destaque); }
.card-atend--destaque::after { background: radial-gradient(120% 80% at 50% 110%, rgb(var(--tinta-rgb) / .45), rgb(var(--tinta-rgb) / 0) 70%); }
.card-atend--destaque:hover, .card-atend--destaque:focus-visible { border-color: var(--destaque-claro); }
.card-atend--destaque .card-atend__icone { background: rgba(255, 255, 255, .18); color: #fff; }
.card-atend--destaque:hover .card-atend__icone, .card-atend--destaque:focus-visible .card-atend__icone {
  background: #fff; color: var(--destaque-escuro); box-shadow: 0 0 0 7px rgba(255, 255, 255, .18);
}
.card-atend--destaque .card-atend__link { background-image: linear-gradient(#fff, #fff); }

@media (prefers-reduced-motion: reduce) {
  .card-atend, .card-atend::after, .card-atend__icone, .card-atend__link, .card-atend__link::after { transition: none; }
  .card-atend:hover, .card-atend:hover .card-atend__icone { transform: none; }
}

/* ---------- online x presencial ---------- */
.modos { display: grid; grid-template-columns: 1.1fr .9fr; gap: 4em; align-items: center; }
.modos__foto img { border-radius: var(--raio) var(--raio) 220px var(--raio); aspect-ratio: 5 / 6; object-fit: cover; box-shadow: var(--sombra); }
.comparativo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; margin-top: 1.8em; }
.modo { background: var(--superficie); border-radius: var(--raio); padding: 1.4em; border-top: 4px solid var(--destaque); }
.modo h3 { font-size: 1.15rem; }
.modo ul { margin: 0; padding-left: 1.1em; font-size: .95rem; }
.modo li { margin-bottom: .35em; }

/* ---------- faixa com foto de fundo ---------- */
.faixa-foto {
  position: relative; color: var(--sobre-escuro); text-align: center;
  background: var(--tinta) url("../img/cha.webp") center / cover no-repeat;
}
.faixa-foto::after { content: ""; position: absolute; inset: 0; background: rgb(var(--tinta-rgb) / .72); }
.faixa-foto .env { position: relative; z-index: 1; max-width: 50em; }
.faixa-foto h2 { color: #fff; }

/* ---------- trilha de etapas ---------- */
.trilha { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2em; counter-reset: etapa; position: relative; }
.trilha::before { content: ""; position: absolute; top: 1.5em; left: 1.5em; right: 12%; height: 2px; background: var(--fundo-alt-escuro); }
.trilha li { position: relative; counter-increment: etapa; }
.trilha li::before {
  content: counter(etapa); display: grid; place-items: center;
  width: 3em; height: 3em; border-radius: 50%;
  background: var(--destaque); color: #fff; font: 800 1.05rem/1 var(--display);
  margin-bottom: 1.2em; position: relative;
  box-shadow: 0 0 0 8px var(--fundo-alt);
}
.trilha--clara::before { background: rgba(255,255,255,.25); left: 12%; }
.trilha--clara li { text-align: center; }
.trilha--clara li::before { margin: 0 auto 1.2em; box-shadow: 0 0 0 8px rgb(var(--tinta-rgb) / .6); }
.trilha--clara h3 { color: #fff; }
.trilha--clara p { color: var(--sobre-escuro); }
/*
 * Trilha com o texto em card (páginas de atendimento). A setinha no topo aponta para o
 * número; fica no ::after porque o ::before do contêiner é do Elementor. No hover o card
 * sobe, a borda ganha a cor da marca e uma barra aparece no pé (box-shadow inset).
 */
.trilha--cards li { display: flex; flex-direction: column; }
.trilha--cards::before { right: 0; }   /* a linha vai até a borda direita do último card */
.trilha--cards li::before { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.etapa {
  flex: 1; position: relative;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 1.4em 1.4em 1.5em;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s, border-color .4s;
}
.etapa::after {
  content: ""; position: absolute; top: -7px; left: calc(1.5em - 6px);
  width: 12px; height: 12px; background: var(--superficie);
  border-left: 1px solid var(--linha); border-top: 1px solid var(--linha);
  transform: rotate(45deg); transition: border-color .4s;
}
.trilha--cards li:hover .etapa {
  transform: translateY(-4px); border-color: var(--destaque-claro);
  box-shadow: inset 0 -3px 0 var(--destaque), 0 20px 36px -22px rgb(var(--destaque-escuro-rgb) / .45);
}
.trilha--cards li:hover .etapa::after { border-color: var(--destaque-claro); }
.trilha--cards li:hover::before { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .etapa, .trilha--cards li::before { transition: none; }
  .trilha--cards li:hover .etapa, .trilha--cards li:hover::before { transform: none; }
}
.trilha h3 { font-size: 1.15rem; }
.trilha p { font-size: .96rem; margin: 0; }

/* ---------- FAQ com título lateral ---------- */
.faq { display: grid; grid-template-columns: .8fr 1.5fr; gap: 4em; align-items: start; }
/* cabeçalho acompanha a rolagem, como o das queixas */
.faq__cab { position: sticky; top: 7em; }
.faq details { border-bottom: 1px solid var(--linha); padding: 1.2em 0; }
.faq details:first-of-type { border-top: 1px solid var(--linha); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1em;
  font: 600 1.12rem/1.4 var(--display); color: var(--tinta);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.6rem/1 var(--corpo); color: var(--destaque); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: .8em 0 0; font-size: .98rem; }

/* ---------- blog ---------- */
.cab-linha { display: flex; justify-content: space-between; align-items: end; gap: 2em; margin-bottom: 2.4em; }
.cab-linha p { max-width: 34em; margin: 0; }
.grade-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6em; }
.post { background: var(--superficie); border-radius: var(--raio); overflow: hidden; border: 1px solid var(--linha); display: flex; flex-direction: column; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.post:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.post img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.post__corpo { padding: 1.4em 1.5em 1.6em; display: flex; flex-direction: column; flex: 1; }
.post__meta { font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--destaque); margin-bottom: .6em; }
.post h3 { font-size: 1.2rem; margin-bottom: .5em; }
.post p { font-size: .95rem; margin-bottom: 1.2em; }
.post__ler { margin-top: auto; font-weight: 700; color: var(--destaque-escuro); }

/* ---------- contato: texto + cartão de canais ---------- */
.contato { display: grid; grid-template-columns: 1fr 1fr; gap: 4em; align-items: center; }
.contato__cartao { background: var(--superficie); border-radius: var(--raio); padding: 1em 2em; box-shadow: var(--sombra); }
.canais { list-style: none; margin: 0; padding: 0; }
.canais li:first-child { border-top: 0; }
.canais li { display: flex; gap: 1em; padding: .9em 0; border-top: 1px solid var(--linha); }
.canais svg { width: 22px; height: 22px; color: var(--destaque); flex: none; margin-top: .25em; }
.canais strong { display: block; color: var(--tinta); }
.canais a { text-decoration: none; overflow-wrap: anywhere; }

/* ---------- topo de página interna ---------- */
/* mesmo vocabulário do hero da home: manchas desfocadas em movimento + anéis saindo da direita */
.topo-pagina {
  position: relative; overflow: hidden;
  min-height: 17em; display: flex; align-items: center;
  padding: 4em 0 3.5em;
  border-bottom: 1px solid var(--linha);
  background:
    radial-gradient(38% 70% at 90% 15%, rgb(var(--destaque-claro-rgb) / .6), rgb(var(--destaque-claro-rgb) / 0) 70%),
    radial-gradient(30% 60% at 5% 95%, rgb(var(--destaque-rgb) / .2), rgb(var(--destaque-rgb) / 0) 70%),
    radial-gradient(45% 70% at 35% 45%, rgb(var(--superficie-rgb) / .9), rgb(var(--superficie-rgb) / 0) 70%),
    radial-gradient(30% 50% at 60% 100%, rgb(var(--fundo-alt-escuro-rgb) / .8), rgb(var(--fundo-alt-escuro-rgb) / 0) 70%),
    radial-gradient(circle at 88% 55%, rgb(var(--fundo-rgb) / 0) 12%, var(--fundo) 48%),
    repeating-radial-gradient(circle at 88% 55%, rgb(var(--destaque-rgb) / 0) 0 46px, rgb(var(--destaque-rgb) / .14) 47px 48px, rgb(var(--destaque-rgb) / 0) 49px 50px),
    var(--fundo);
  background-size: 130% 130%, 130% 130%, 130% 130%, 130% 130%, 100% 100%, 100% 100%;
  animation: hero-fundo 24s ease-in-out infinite alternate;
}
.topo-pagina .env { max-width: 1140px; }
.topo-pagina h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin-bottom: .4em; }
.topo-pagina p { max-width: 36em; margin: 0; font-size: 1.02rem; }
/* trilha de navegação em pílula */
.migalha {
  display: inline-flex; align-items: center; gap: .35em;
  font-size: .74rem; line-height: 1; letter-spacing: .02em; margin-bottom: 1.2em;
  padding: .4em .8em; border-radius: 999px;
  background: rgb(var(--superficie-rgb) / .45); border: 1px solid rgb(var(--linha-rgb) / .7);
  color: rgb(var(--texto-rgb) / .8);
}
.migalha a { color: var(--destaque); font-weight: 600; text-decoration: none; }
.migalha a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .topo-pagina { animation: none; }
}

/* ---------- blocos de páginas internas ---------- */
.texto-longo { max-width: 46em; }
.duas-col { display: grid; grid-template-columns: 1fr 1fr; gap: 4em; align-items: center; }
.foto-arred img { border-radius: var(--raio); box-shadow: var(--sombra); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.foto-arred--paisagem img { aspect-ratio: 4 / 3; }

/* ---------- páginas de atendimento ---------- */
.topo-pagina__botoes { margin-top: 1.6em; }
/* cabeçalho lateral + pílulas: a lista inteira de uma vez, sem virar bullet */
.servico-lista { display: grid; grid-template-columns: .8fr 1.5fr; gap: 4em; align-items: center; }
.servico-lista__cab p { margin: 0; font-size: .98rem; }
/* grade de 2 colunas: todas as pílulas com a mesma largura e, na linha, a mesma altura */
.pilulas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: .8em; }
.pilulas li {
  display: flex; align-items: center; gap: .7em;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 999px;
  padding: .9em 1.3em; font-weight: 600; font-size: .96rem; color: var(--tinta); line-height: 1.35; min-height: 3.6em;
  transition: border-color .3s, background .3s, transform .3s cubic-bezier(.2, .8, .2, 1);
}
/* pílula em uma linha só: abaixo de 1100px a coluna fica estreita, então o cabeçalho sobe e a grade usa a largura toda */
@media (max-width: 1100px) {
  .servico-lista { grid-template-columns: 1fr; gap: 2.2em; }
  .servico-lista__cab { max-width: 40em; }
}
.pilulas li::before { content: ""; flex: none; width: .5em; height: .5em; border-radius: 50%; background: var(--destaque); }
.pilulas li:hover { border-color: var(--destaque-claro); transform: translateY(-2px); }
.grade-atend--3 { grid-template-columns: repeat(3, 1fr); }
/*
 * Cards de atendimento sobre fundo claro (página /atendimentos/). Mesma estrutura e o
 * mesmo hover do card escuro da home: sobe, o ícone ganha a cor da marca, a seta anda
 * e um brilho leve nasce do pé. Só a pele muda.
 */
.grade-atend--clara .card-atend {
  background: var(--superficie); border-color: var(--linha); color: var(--texto);
  box-shadow: 0 1px 2px rgb(var(--tinta-rgb) / .04);
}
.grade-atend--clara .card-atend h3 { color: var(--tinta); }
.grade-atend--clara .card-atend::after {
  background: radial-gradient(120% 80% at 50% 110%, rgb(var(--destaque-claro-rgb) / .35), rgb(var(--destaque-claro-rgb) / 0) 70%);
}
.grade-atend--clara .card-atend:hover, .grade-atend--clara .card-atend:focus-visible {
  border-color: var(--destaque-claro);
  box-shadow: 0 26px 44px -24px rgb(var(--destaque-escuro-rgb) / .45);
}
.grade-atend--clara .card-atend__icone { background: var(--fundo-alt); color: var(--destaque); }
.grade-atend--clara .card-atend__link {
  color: var(--destaque-escuro);
  background-image: linear-gradient(var(--destaque), var(--destaque));
}
.grade-atend--clara .card-atend:focus-visible { outline-color: var(--destaque); }
/* duas seções claras seguidas: um fio separa sem trocar o fundo */
.secao--linha > .env:first-child { border-top: 1px solid var(--linha); padding-top: 4em; }
.secao--linha { padding-top: 0; }
/* hub: cabeçalho lateral + quatro fatos em número grande, sem card (faixa de números) */
.regras { display: grid; grid-template-columns: .85fr 1.5fr; gap: 4em; align-items: center; }
.regras__cab p { margin: 0; }
.fatos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4em 3em; }
.fato { display: flex; flex-direction: column; padding-top: 1.2em; border-top: 2px solid var(--linha); transition: border-color .4s; }
.fato:hover { border-color: var(--destaque); }
.fato__valor { font: 800 2.2rem/1 var(--display); color: var(--destaque-escuro); letter-spacing: -.02em; margin-bottom: .35em; }
.fato strong { font-weight: 700; color: var(--tinta); margin-bottom: .25em; }
.fato span { font-size: .95rem; line-height: 1.55; }
/* limites do atendimento: faixa de largura total, dois itens lado a lado */
.limites {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2em;
  margin-top: 3.5em; padding: 1.8em 2em;
  background: var(--fundo-alt); border-radius: var(--raio);
}
.limites__item { display: flex; gap: 1.1em; align-items: flex-start; }
.limites__item + .limites__item { border-left: 1px solid var(--linha); padding-left: 2em; }
.limites__icone { flex: none; display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: 50%; background: var(--superficie); color: var(--destaque); }
.limites__icone svg { width: 1.4em; height: 1.4em; }
.limites strong { display: block; color: var(--tinta); margin-bottom: .2em; }
.limites p { margin: 0; font-size: .95rem; line-height: 1.55; }

/* ---------- artigo ---------- */
.artigo { max-width: 46em; margin: 0 auto; }
.artigo__meta { font-size: .9rem; color: var(--texto); margin-bottom: 1.4em; }
.artigo__destacada { border-radius: var(--raio); aspect-ratio: 16 / 9; object-fit: cover; width: 100%; margin: 1.5em 0 2em; }
.artigo__corpo h2 { font-size: 26px; font-weight: 600; color: var(--tinta); margin-top: 1.6em; }
.artigo__corpo a { color: var(--link); text-decoration: underline; font-weight: 600; }
.artigo__corpo figure { margin: 2em 0; }
.artigo__corpo figure img { border-radius: var(--raio); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.artigo__corpo figcaption { font-size: .85rem; margin-top: .6em; }
.artigo__corpo ul { padding-left: 1.2em; }
.artigo__corpo li { margin-bottom: .4em; }
.nota { background: var(--fundo-alt); border-radius: var(--raio); padding: 1.4em 1.6em; margin: 2em 0; font-size: .96rem; }
.compartilhar { display: flex; align-items: center; flex-wrap: wrap; gap: .6em; font-size: .9rem; font-weight: 700; color: var(--tinta); }
.compartilhar a { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--fundo-alt); color: var(--destaque-escuro); }
.compartilhar a:hover { background: var(--destaque); color: #fff; }
.compartilhar svg { width: 1.05em; height: 1.05em; }
.compartilhar--fim { margin-top: 2.5em; padding-top: 1.5em; border-top: 1px solid var(--linha); }

/* ---------- rodapé ---------- */
.rodape { background: var(--destaque-escuro); color: var(--rodape-texto); padding: 4em 0 0; font-size: .95rem; }
.rodape__grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 3em; padding-bottom: 3em; }
.rodape .marca__nome, .rodape .marca__nome span { color: #fff; }
.rodape .marca__sub { color: var(--rodape-texto); }
.rodape h3 { color: #fff; font-size: 1.1rem; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: .5em; }
.rodape a { text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
.rodape__base { border-top: 1px solid rgba(255,255,255,.18); padding: 1.3em 0; display: flex; justify-content: space-between; gap: 1em; flex-wrap: wrap; font-size: .85rem; }
.rodape__cvv {
  display: flex; align-items: center; gap: 1.2em;
  background: rgba(0, 0, 0, .16); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--raio); padding: 1.2em 1.6em; margin-bottom: 3em;
}
.rodape__cvv p { margin: 0; flex: 1; font-size: .95rem; line-height: 1.55; }
.rodape__cvv strong { color: #fff; }
.rodape__cvv p a { color: #fff; font-weight: 700; text-decoration: underline; }
.rodape__cvv-icone {
  display: grid; place-items: center; flex: none;
  width: 3em; height: 3em; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff;
}
.rodape__cvv-icone svg { width: 1.6em; height: 1.6em; }
.rodape__cvv-botao {
  flex: none; padding: .75em 1.4em; border-radius: 999px;
  background: #fff; color: var(--destaque-escuro) !important; font-weight: 700; font-size: .92rem;
  text-decoration: none !important; transition: transform .2s, background .2s;
}
.rodape__cvv-botao:hover { transform: translateY(-2px); background: var(--fundo-alt); }

/* ---------- reveal por rolagem ---------- */
.js .revelar { opacity: 0; translate: 0 24px; transition: opacity .7s ease, translate .7s ease; }
.js .revelar.visivel { opacity: 1; translate: 0 0; }
/* o reveal usa translate; o transform fica livre para o hover dos cards */
.js .card-atend.revelar { transition: opacity .7s ease, translate .7s ease, transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s, border-color .45s; }
@media (prefers-reduced-motion: reduce) {
  .js .revelar { opacity: 1; translate: 0 0; transition: none; }
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1024px) {
  .env { padding: 0 2em; }
  .nav { gap: 1.2em; }
  .topo .botao span { display: none; }
}

@media (max-width: 900px) {
  /* ----- topo maior, com respiro para a marca ----- */
  .topo .topo__interno { padding-block: 1.35em; gap: 1em; }
  .marca__nome { font-size: 1.55rem; }
  .marca__sub { font-size: .74rem; }

  /* ----- menu: painel em cartão, véu por trás e itens que entram escalonados ----- */
  .menu-alternar {
    display: grid; place-items: center; width: 3em; height: 3em; padding: 0;
    border: 1px solid var(--linha); border-radius: 50%;
    background: var(--superficie); box-shadow: var(--sombra);
    transition: background .25s, color .25s, border-color .25s;
  }
  .menu-alternar svg { width: 24px; height: 24px; }
  .menu-aberto .menu-alternar { background: var(--destaque); border-color: var(--destaque); color: #fff; }

  .menu-veu {
    display: block; position: fixed; inset: 0; z-index: 40;
    background: rgb(var(--tinta-rgb) / .45);
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  }
  .menu-aberto .menu-veu { opacity: 1; visibility: visible; }
  body.menu-aberto { overflow: hidden; }

  .topo__painel {
    display: flex; flex-direction: column; gap: 1.2em;
    position: absolute; top: calc(100% + .7em); left: 2em; right: 2em; z-index: 60;   /* acompanha o recuo do .env */
    max-width: 24em; margin-left: auto;   /* no tablet o painel para embaixo do botão, não atravessa a tela */
    background: var(--superficie);
    border: 1px solid var(--linha); border-radius: calc(var(--raio) + 6px);
    padding: .6em 1.4em 1.4em;
    box-shadow: 0 32px 64px -28px rgb(var(--tinta-rgb) / .55);
    transform-origin: top right;
    opacity: 0; visibility: hidden; transform: translateY(-.8em) scale(.97);
    transition: opacity .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1), visibility .35s;
  }
  .menu-aberto .topo__painel { opacity: 1; visibility: visible; transform: none; }

  .nav { flex-direction: column; gap: 0; }
  .nav a {
    display: flex; align-items: center; gap: .8em;
    padding: 1em 0; border-bottom: 1px solid var(--linha);
    font: 600 1.12rem/1.2 var(--display); color: var(--tinta);
    opacity: 0; transform: translateY(.5em);
    transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1), color .25s;
  }
  .nav a:last-child { border-bottom: 0; }
  /* traço curto à esquerda no lugar da linha que abre do centro no desktop */
  .nav a::before, .nav a::after {
    content: ""; position: static; transform: none; opacity: 1;
    width: .6em; height: 2px; border-radius: 2px; flex: none;
    background: var(--linha); transition: width .3s cubic-bezier(.2, .8, .2, 1), background .25s;
  }
  .nav a::after { display: none; }
  .nav a[aria-current="page"], .nav a:hover, .nav a:focus-visible { color: var(--destaque-escuro); }
  .nav a[aria-current="page"]::before, .nav a:hover::before, .nav a:focus-visible::before {
    width: 1.6em; background: var(--destaque);
  }
  .menu-aberto .nav a { opacity: 1; transform: none; }
  .menu-aberto .nav a:nth-child(1) { transition-delay: .06s; }
  .menu-aberto .nav a:nth-child(2) { transition-delay: .11s; }
  .menu-aberto .nav a:nth-child(3) { transition-delay: .16s; }
  .menu-aberto .nav a:nth-child(4) { transition-delay: .21s; }
  .menu-aberto .nav a:nth-child(5) { transition-delay: .26s; }
  .menu-aberto .nav a:nth-child(6) { transition-delay: .31s; }

  .topo__cta {
    justify-content: center; width: 100%;
    opacity: 0; transform: translateY(.5em);
    transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1), background .2s;
  }
  .topo .topo__cta span { display: inline; }   /* reverte o corte de texto da faixa de 1024px */
  .menu-aberto .topo__cta { opacity: 1; transform: none; transition-delay: .3s; }

  .menu-aberto .menu-alternar .abrir { display: none; }
  .menu-aberto .menu-alternar .fechar { display: block; }
  @media (prefers-reduced-motion: reduce) {
    .topo__painel, .nav a, .topo__cta { transition: opacity .01s, visibility .01s; transform: none; }
  }

  /* ----- seções em coluna única ----- */
  .hero__grade, .queixas, .sobre, .modos, .faq, .contato, .duas-col, .servico-lista, .regras { grid-template-columns: 1fr; gap: 2.5em; }
  .hero__texto, .hero__figura, .hero__acoes { grid-column: 1; grid-row: auto; }
  .hero__grade { gap: 2em; grid-template-rows: auto; }
  .hero__acoes .grupo-botoes { margin-top: 0; }
  .queixas__cab, .faq__cab { position: static; }
  .hero__figura { max-width: 26em; margin: 0 auto; }
  .credencial { left: 0; }
  .grade-atend, .grade-atend--3 { grid-template-columns: 1fr 1fr; }
  .trilha { grid-template-columns: 1fr 1fr; }
  .trilha::before { display: none; }
  .grade-posts { grid-template-columns: 1fr 1fr; }
  .rodape__grade { grid-template-columns: 1fr 1fr; }

  /*
   * A foto entra depois do título, não antes da seção inteira: o texto se
   * desmonta em cabeçalho e corpo (display:contents) e os três blocos viram
   * itens da mesma coluna.
   */
  .sobre__texto, .modos__texto, .foto-no-meio__texto { display: contents; }
  .sobre__cab,  .modos__cab,   .foto-no-meio__cab   { order: 1; }
  .sobre__fotos, .modos__foto, .foto-no-meio__foto  { order: 2; }
  .sobre__corpo, .modos__corpo, .foto-no-meio__corpo { order: 3; }
  .abordagem__cab { position: static; }
  .sobre__fotos { padding: 0 3em 3em 0; }
}

@media (max-width: 767px) {
  .secao { padding: 3em 0; }
  .topo-pagina { padding: 3.5em 0; min-height: auto; }
  .hero { padding: 3em 0; min-height: auto; }
  .env { padding: 0 1.25em; }
  /* texto ao centro no celular; linha com ícone fica à esquerda */
  .hero__texto, .queixas__cab, .sobre__texto, .modos__texto, .faq__cab, .contato__texto, .foto-no-meio__texto,
  .cab-linha, .topo-pagina, .trilha li, .faixa-foto, .texto-centro-mob { text-align: center; }
  .cab-linha { justify-content: center; flex-direction: column; align-items: center; }
  /* botões empilhados e todos da mesma largura */
  .grupo-botoes { flex-direction: column; align-items: center; justify-content: center; }
  .grupo-botoes .botao { width: 100%; max-width: 21em; justify-content: center; }
  .grade-queixas, .comparativo, .trilha, .grade-posts, .rodape__grade { grid-template-columns: 1fr; }
  .rodape__cvv { flex-direction: column; text-align: center; padding: 1.4em; }
  .trilha li::before { margin-left: auto; margin-right: auto; }
  .etapa::after { left: calc(50% - 6px); }   /* número centralizado no celular */
  .sobre__fotos { padding: 0 1.5em 3em 0; }
  .formacao, .canais, .modo, .queixa, .nota { text-align: left; }
  .formacao { grid-template-columns: 1fr; }
  .credencial { position: relative; left: auto; bottom: auto; margin: -2.5em auto 0; }
  .topo__painel { left: 1.25em; right: 1.25em; }
  .grade-atend, .grade-atend--3 { grid-template-columns: 1fr; }
  .pilulas { grid-template-columns: 1fr; }
  .pilulas li { text-align: left; padding: .9em 1.1em; font-size: .93rem; gap: .6em; }
  .fatos { grid-template-columns: 1fr 1fr; gap: 1.8em 1.4em; text-align: left; }
  .fato__valor { font-size: 1.8rem; }
  .limites { grid-template-columns: 1fr; gap: 1.4em; padding: 1.5em 1.3em; }
  .limites__item + .limites__item { border-left: 0; padding-left: 0; border-top: 1px solid var(--linha); padding-top: 1.4em; }
  .card-atend { text-align: center; align-items: center; }
  .card-atend__link { align-self: center; }
}

/* ---------- utilitários do modelo PHP ---------- */
.link-forte { color: var(--destaque-escuro); font-weight: 700; }
.grade-posts--2 { grid-template-columns: repeat(2, 1fr); }
.rodape__redes { display: flex; gap: .6em; margin-top: 1em; }
.rodape__redes a { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; }
.rodape__redes a:hover { background: rgb(255 255 255 / .22); }
.rodape__redes svg { width: 1.1em; height: 1.1em; }
@media (max-width: 767px) { .grade-posts--2 { grid-template-columns: 1fr; } }
/* celular estreito (320 a 360px): a pílula ainda cabe em uma linha */
@media (max-width: 360px) { .pilulas li { font-size: .84rem; padding: .85em .95em; } }

/* ==========================================================================
   Barra flutuante da vitrine (site de demonstração)
   É da Forpes, não do cliente: por isso o verde do WhatsApp fica fixo aqui e não
   no tema.css. Some sozinha quando site.php > barra_demo está vazio.
   ========================================================================== */
.barra-demo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;   /* abaixo do véu do menu (40) */
  background: rgb(var(--tinta-rgb) / .96); color: var(--sobre-escuro);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgb(255 255 255 / .08);
  box-shadow: 0 -12px 30px -18px rgb(0 0 0 / .5);
  transform: translateY(0); transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.barra-demo.fechada { transform: translateY(110%); }
.barra-demo__interno { display: flex; align-items: center; gap: 1.2em; padding-block: .85em; }
.barra-demo__texto { margin: 0; flex: 1; display: flex; align-items: center; gap: .9em; font-size: .92rem; line-height: 1.45; }
.barra-demo__texto strong { color: #fff; font-weight: 700; }
.barra-demo__selo {
  flex: none; font: 700 .68rem/1 var(--corpo); letter-spacing: .12em; text-transform: uppercase;
  color: var(--destaque-claro); border: 1px solid rgb(var(--destaque-claro-rgb) / .5);
  border-radius: 999px; padding: .45em .8em;
}
.barra-demo__preco {
  display: inline-block; white-space: nowrap;
  font: 800 1rem/1 var(--display); color: var(--destaque-claro); margin-left: .2em;
}
.barra-demo__botao { flex: none; background: #25D366; color: #0b3d20; padding: .8em 1.3em; }
.barra-demo__botao:hover { background: #1fb959; transform: translateY(-2px); }
.barra-demo__fechar {
  flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; padding: 0;
  border: 0; border-radius: 50%; background: rgb(255 255 255 / .08); color: var(--sobre-escuro); cursor: pointer;
  transition: background .2s, color .2s;
}
.barra-demo__fechar:hover { background: rgb(255 255 255 / .16); color: #fff; }
.barra-demo__fechar svg { width: 16px; height: 16px; }
/* respiro no fim da página enquanto a barra está aberta (altura medida pelo main.js) */
body.com-barra-demo { padding-bottom: var(--barra-demo-altura, 5em); }
@media (prefers-reduced-motion: reduce) { .barra-demo { transition: none; } }

@media (max-width: 767px) {
  .barra-demo__interno { flex-wrap: wrap; gap: .7em; padding-block: .8em; position: relative; }
  .barra-demo__texto { flex-basis: 100%; padding-right: 2.4em; font-size: .84rem; text-align: left; }
  .barra-demo__selo { display: none; }
  .barra-demo__botao { flex: 1; justify-content: center; }
  .barra-demo__fechar { position: absolute; top: .7em; right: 0; }
}

/* ==========================================================================
   Botão flutuante do WhatsApp (includes/partes/whatsapp-flutuante.php)
   Cores fixas do próprio WhatsApp, fora do tema: o cartão tem de ser reconhecido
   como WhatsApp à primeira vista, em qualquer paleta de cliente.
   ========================================================================== */
.zap {
  --zap-verde: #25D366;        /* botão redondo (só ícone branco) */
  --zap-escuro: #008069;       /* cabeçalho do cartão */
  --zap-acao: #0F8A43;         /* faixa "Conversar no WhatsApp": branco sobre ela passa de 4.5:1 */
  --zap-fundo: #EFEAE2;        /* fundo da conversa */
  position: fixed; right: 1.4em; bottom: 1.4em; z-index: 35;   /* acima da barra da vitrine (30), abaixo do véu do menu (40) */
  display: flex; flex-direction: column; align-items: flex-end; gap: .9em;
  font-family: var(--corpo);
  transition: bottom .35s ease;
}
/* com a barra da vitrine aberta, o botão sobe junto e não fica atrás dela */
body.com-barra-demo .zap { bottom: calc(var(--barra-demo-altura, 5em) + 1.2em); }

.zap__botao {
  position: relative; width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: var(--zap-verde);
  box-shadow: 0 10px 24px -8px rgb(0 0 0 / .45);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.zap__botao:hover { transform: scale(1.07); }
.zap__botao:focus-visible { outline: 3px solid var(--zap-escuro); outline-offset: 3px; }
.zap__botao svg { width: 32px; height: 32px; }
.zap__aviso {
  position: absolute; top: -3px; right: -3px; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: #E53935; color: #fff; border: 2px solid #fff;
  font: 700 12px/18px var(--corpo); text-align: center;
}
.zap.aberto .zap__aviso, .zap.lido .zap__aviso { display: none; }

.zap__cartao {
  width: min(330px, calc(100vw - 2.8em));
  border-radius: 16px; overflow: hidden; background: var(--zap-fundo);
  box-shadow: 0 24px 50px -18px rgb(0 0 0 / .45);
  transform-origin: bottom right;
  animation: zap-abre .28s cubic-bezier(.2, .8, .2, 1);
}
.zap__cartao[hidden] { display: none; }
@keyframes zap-abre { from { opacity: 0; transform: translateY(10px) scale(.96); } }

.zap__topo { display: flex; align-items: center; gap: .8em; padding: .9em 1em; background: var(--zap-escuro); color: #fff; }
.zap__foto { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid rgb(255 255 255 / .35); }
.zap__quem { flex: 1; min-width: 0; line-height: 1.25; }
.zap__quem strong { display: block; font-size: 1rem; font-weight: 700; color: #fff; }
.zap__quem span { font-size: .78rem; opacity: .85; }
.zap__fechar { background: none; border: 0; color: #fff; padding: .3em; cursor: pointer; border-radius: 50%; line-height: 0; }
.zap__fechar svg { width: 20px; height: 20px; }
.zap__fechar:hover, .zap__fechar:focus-visible { background: rgb(255 255 255 / .15); outline: none; }

/* fundo de conversa: bege do WhatsApp com os desenhinhos em traço bem claro */
.zap__conversa {
  min-height: 7.5em; padding: 1.2em 1em 1.4em 1.4em;
  background-color: var(--zap-fundo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23000' stroke-opacity='.06' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 14c-3-4-9-1-6 4l6 5 6-5c3-5-3-8-6-4z'/%3E%3Ccircle cx='70' cy='20' r='7'/%3E%3Cpath d='M98 12l4 8 8 1-6 6 2 8-8-4-8 4 2-8-6-6 8-1z'/%3E%3Cpath d='M14 62h18v12H14zM14 62l9 7 9-7'/%3E%3Cpath d='M60 58c6 0 10 4 10 9s-4 9-10 9l-6 4 1-6c-3-2-5-4-5-7 0-5 4-9 10-9z'/%3E%3Cpath d='M96 66a8 8 0 1 0 16 0 8 8 0 1 0-16 0M104 58v-4M104 78v4'/%3E%3Cpath d='M20 104c4-6 12-6 16 0M24 98h.01M32 98h.01'/%3E%3Cpath d='M64 96l10 10M74 96l-10 10'/%3E%3Cpath d='M98 100c0-4 6-4 6 0 0-4 6-4 6 0 0 4-6 8-6 8s-6-4-6-8z'/%3E%3C/svg%3E");
}
.zap__balao {
  position: relative; display: inline-block; max-width: 88%; margin: 0;
  padding: .6em .8em .5em; background: #fff; color: #111B21;
  border-radius: 0 10px 10px 10px; box-shadow: 0 1px 1px rgb(0 0 0 / .1);
  font-size: .98rem; line-height: 1.45; text-align: left;
}
/* rabicho do balão, no canto de cima à esquerda, como no WhatsApp */
.zap__balao::after {
  content: ""; position: absolute; top: 0; left: -8px;
  border-top: 10px solid #fff; border-left: 8px solid transparent;
}
.zap__hora { display: block; text-align: right; font-size: .7rem; color: #667781; margin-top: .15em; }
.zap__hora:empty { display: none; }
.zap__digitando { display: none; gap: 4px; width: 58px; padding: .8em .9em; background: #fff; border-radius: 0 10px 10px 10px; box-shadow: 0 1px 1px rgb(0 0 0 / .1); }
.zap__digitando i { width: 7px; height: 7px; border-radius: 50%; background: #8696A0; animation: zap-ponto 1s infinite ease-in-out; }
.zap__digitando i:nth-child(2) { animation-delay: .15s; }
.zap__digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes zap-ponto { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.zap.digitando .zap__digitando { display: flex; }
.zap.digitando .zap__balao { display: none; }

.zap__acao {
  display: flex; align-items: center; justify-content: center; gap: .55em;
  padding: 1em; background: var(--zap-acao); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 1rem;
  transition: background .2s;
}
.zap__acao:hover, .zap__acao:focus-visible { background: #0B7438; outline: none; }
.zap__acao > svg:first-child { width: 1.25em; height: 1.25em; }
.zap__seta { width: 1em; height: 1em; }

@media (max-width: 767px) {
  .zap { right: 1em; bottom: 1em; }
  body.com-barra-demo .zap { bottom: calc(var(--barra-demo-altura, 9em) + .8em); }
  .zap__botao { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .zap, .zap__botao, .zap__cartao, .zap__digitando i { transition: none; animation: none; }
}