/* ==========================================================================
   MODELO RÁPIDO DA NEXUM · base.css

   Este arquivo é IGUAL em toda landing page feita com este modelo.
   NÃO EDITE ele dentro da pasta de um lead.

   O que muda de um profissional pro outro é só a paleta e as fontes, e isso
   mora no `style.css`, que carrega depois deste e ganha dele.

   No index.html a ordem é sempre esta:
       <link rel="stylesheet" href="assets/css/base.css">
       <link rel="stylesheet" href="assets/css/style.css">

   Se precisar corrigir alguma coisa aqui, corrija no `_modelo-rapido` pra
   valer nas próximas LPs. As antigas ficam como estão.
   ========================================================================== */


/* ==========================================================================
   1. Tokens

   As cores vêm em duas formas: o trio de números (`--marca-rgb`) e a cor
   pronta (`--marca`). O trio existe pra dar pra usar a mesma cor com
   transparência sem ter que escrever um hex novo pra cada opacidade.

   No style.css do lead você troca SÓ os trios e as fontes. O resto se ajusta
   sozinho.
   ========================================================================== */
:root {
  /* --- Paleta (trocar no style.css do lead) --- */
  --marca-rgb:        156 113 42;    /* cor principal, sobre fundo claro */
  --marca-escura-rgb: 123  84 13;    /* versão mais fechada, hover e degradê */
  --marca-clara-rgb:  216 196  90;   /* detalhe: barrinha, estrela, borda viva */
  --neutro-rgb:       229 227 225;   /* bege/cinza das bordas e fundos suaves */
  --tinta-rgb:         45  41  38;   /* texto principal */
  --tinta-suave-rgb:   99  95  92;   /* texto secundário */
  --escuro-rgb:        47  49  49;   /* fundo do rodapé */
  --fundo-rgb:        249 249 249;   /* fundo geral da página */

  /* --- Cores prontas (não precisa mexer) --- */
  --marca:        rgb(var(--marca-rgb));
  --marca-escura: rgb(var(--marca-escura-rgb));
  --marca-clara:  rgb(var(--marca-clara-rgb));
  --neutro:       rgb(var(--neutro-rgb));
  --tinta:        rgb(var(--tinta-rgb));
  --tinta-suave:  rgb(var(--tinta-suave-rgb));
  --escuro:       rgb(var(--escuro-rgb));
  --fundo:        rgb(var(--fundo-rgb));
  --branco:       #FFFFFF;

  /* --- Cores fixas, iguais em toda LP --- */
  --whatsapp:  #25D366;
  --estrela:   #FFB000;

  /* --- Fontes (trocar no style.css do lead) --- */
  --fonte-titulo: 'Playfair Display', Georgia, serif;
  --fonte-corpo:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --peso-titulo:  700;   /* fonte de título só com peso 400? põe 400 aqui */
  --peso-h2:      600;

  /* --- Medidas --- */
  --largura-max:      1200px;
  --largura-media:    960px;
  --largura-estreita: 800px;
  --altura-cabecalho: 80px;
  --raio:       12px;   /* cartão pequeno */
  --raio-g:     16px;   /* cartão grande */
  --raio-foto:  32px;   /* foto do hero */

  /* --- Sombras --- */
  --sombra-marca:   0 10px 30px rgb(var(--marca-rgb) / .15);
  --sombra-cartao:  0 1px 2px rgb(0 0 0 / .05);
  --sombra-alta:    0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --sombra-forte:   0 20px 40px rgb(0 0 0 / .18);
}


/* ==========================================================================
   2. Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--altura-cabecalho) + 16px); }

body {
  font-family: var(--fonte-corpo);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta-suave);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  color: var(--tinta);
  line-height: 1.2;
}
h1 { font-size: clamp(34px, 5.2vw, 48px); font-weight: var(--peso-titulo); letter-spacing: -.02em; }
h2 { font-size: clamp(28px, 3.6vw, 32px); font-weight: var(--peso-h2); line-height: 1.3; }
h3 { font-size: 24px; font-weight: var(--peso-h2); line-height: 1.4; }
h4 { font-size: 18px; font-weight: var(--peso-h2); }


/* ==========================================================================
   3. Acessibilidade
   ========================================================================== */
.pular-conteudo {
  position: absolute;
  top: -100px; left: 16px;
  z-index: 200;
  background: var(--escuro);
  color: var(--branco);
  padding: 12px 20px;
  border-radius: var(--raio);
  transition: top .2s ease;
}
.pular-conteudo:focus-visible { top: 16px; }

:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 3px;
  border-radius: 4px;
}
.rodape :focus-visible,
.chamada-final :focus-visible { outline-color: var(--branco); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   4. Estrutura de seção

   Toda distância vertical entre seções sai DAQUI, de `.secao`, por
   padding-block. Nunca põe margin em <section> direto: dois seletores
   brigando por espaçamento é erro difícil de achar depois.
   ========================================================================== */
.container { width: 100%; max-width: var(--largura-max); margin-inline: auto; }
.container--medio    { max-width: var(--largura-media); }
.container--estreito { max-width: var(--largura-estreita); }

.secao {
  position: relative;
  padding-block: 60px;
  padding-inline: 24px;
  background: var(--branco);
  /* segura as bolhas e as molduras deslocadas dentro da seção. Sem isto a
     página ganha rolagem horizontal e ninguém descobre de onde veio. */
  overflow: hidden;
}
@media (min-width: 768px) { .secao { padding-block: 100px; } }

/* Variações de fundo. Só mexem na cor, nunca no espaçamento. */
.secao--neutra  { background: rgb(var(--neutro-rgb) / .3); }
.secao--suave   { background: rgb(var(--neutro-rgb) / .2); }
.secao--degrade { background: linear-gradient(to bottom, rgb(var(--neutro-rgb) / .2), var(--branco)); }
.secao--marca   { background: linear-gradient(to right, var(--marca), var(--marca-escura)); }

/* Fio de luz no topo da seção, separa sem pesar */
.linha-topo {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(to right, transparent, rgb(var(--marca-rgb) / .3), transparent);
}

/* Textura de pontinhos. Vai num <div> vazio com position absolute dentro da seção. */
.padrao-pontos {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgb(var(--marca-rgb)) .5px, transparent .5px);
  background-size: 20px 20px;
  opacity: .05;
  pointer-events: none;
}

/* Bolha borrada de fundo, pro miolo da seção não ficar chapado */
.bolha {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.bolha--marca  { background: rgb(var(--marca-rgb) / .06); }
.bolha--neutra { background: rgb(var(--neutro-rgb) / .5); }

.acima { position: relative; z-index: 1; }


/* ==========================================================================
   5. Cabeçalho de seção (rótulo + título + linha de apoio)
   ========================================================================== */
.rotulo {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marca);
}

.topo-secao { text-align: center; margin-bottom: 48px; }
.topo-secao h2 { margin-top: 8px; }
.topo-secao p { max-width: 640px; margin: 16px auto 0; }

.destaque-marca { color: var(--marca); }

.texto-degrade {
  background: linear-gradient(135deg, var(--marca), var(--marca-clara));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.barrinha {
  width: 80px; height: 4px;
  border-radius: 999px;
  background: var(--marca-clara);
}


/* ==========================================================================
   6. Botões
   ========================================================================== */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, filter .25s ease, transform .25s ease;
}
.botao svg { width: 22px; height: 22px; fill: currentColor; flex-shrink: 0; }

.botao--whatsapp { background: var(--whatsapp); color: var(--branco); box-shadow: 0 8px 20px rgb(37 211 102 / .25); }
.botao--whatsapp:hover { filter: brightness(1.08); box-shadow: 0 12px 28px rgb(37 211 102 / .35); }

.botao--marca { background: var(--marca); color: var(--branco); box-shadow: var(--sombra-marca); }
.botao--marca:hover { background: var(--marca-escura); }

.botao--contorno { border: 2px solid var(--marca); color: var(--marca); padding: 14px 30px; }
.botao--contorno:hover { background: var(--marca); color: var(--branco); }

.botao--branco { background: var(--branco); color: var(--marca); padding: 18px 40px; font-size: 18px; box-shadow: var(--sombra-forte); }
.botao--branco:hover { background: var(--marca-clara); color: var(--branco); }

/* Link discreto com setinha, pra ação secundária */
.botao-texto {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px; letter-spacing: .02em;
  color: var(--marca);
  transition: color .2s ease;
}
.botao-texto:hover { color: var(--marca-clara); }
.botao-texto .icone { font-size: 18px; transition: transform .2s ease; }
.botao-texto:hover .icone { transform: translateX(4px); }

.botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
@media (max-width: 599px) { .botoes .botao { width: 100%; } }


/* ==========================================================================
   7. Ícones (Material Symbols, carregado no <head>)
   ========================================================================== */
.icone {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}
.icone--cheio { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.icone--estrela { font-variation-settings: 'FILL' 1; color: var(--estrela); }


/* ==========================================================================
   8. Cabeçalho fixo e menu
   ========================================================================== */
.cabecalho {
  position: fixed; top: 0; left: 0;
  width: 100%; z-index: 50;
  background: rgb(255 255 255 / .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgb(var(--marca-rgb) / .12);
  transition: box-shadow .3s ease, transform .3s ease;
}
.cabecalho.rolou { box-shadow: 0 4px 20px rgb(0 0 0 / .07); }

.cabecalho__barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  height: var(--altura-cabecalho);
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: 20px;
}

.marca-topo { display: flex; align-items: center; gap: 12px; }
.marca-topo img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.marca-topo__nome {
  font-family: var(--fonte-titulo);
  font-size: 19px; font-weight: 700; line-height: 1.15;
  color: var(--marca);
}
.marca-topo__sub { font-size: 11px; letter-spacing: .04em; color: var(--tinta-suave); }

.cabecalho__nav { display: none; align-items: center; gap: 4px; }
.cabecalho__nav a {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  color: var(--tinta-suave);
  transition: color .2s ease, background-color .2s ease;
}
.cabecalho__nav a:hover { color: var(--marca); }
.cabecalho__nav a.destaque {
  color: var(--marca);
  background: rgb(var(--marca-rgb) / .1);
  border: 1px solid rgb(var(--marca-rgb) / .3);
  display: inline-flex; align-items: center; gap: 6px;
}
.cabecalho__nav a.destaque:hover { background: var(--marca); color: var(--branco); }
.cabecalho__nav a.destaque .icone { font-size: 16px; }

.cabecalho__cta { display: none; padding: 11px 22px; font-size: 14px; }
.cabecalho__cta svg { width: 18px; height: 18px; }

.abrir-menu { display: inline-flex; padding: 8px; margin-left: -8px; color: var(--marca); }
.abrir-menu .icone { font-size: 30px; }

@media (min-width: 900px) {
  .cabecalho__nav { display: flex; }
  .cabecalho__cta { display: inline-flex; }
  .abrir-menu, .cabecalho__espaco { display: none; }
  .marca-topo img { width: 60px; height: 60px; }
}
.cabecalho__espaco { width: 40px; }

/* Menu lateral do celular */
.menu-fundo {
  position: fixed; inset: 0; z-index: 55;
  background: rgb(0 0 0 / .35);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.menu-fundo.aberto { opacity: 1; visibility: visible; }

.menu-lateral {
  position: fixed; inset-block: 0; left: 0; z-index: 60;
  display: flex; flex-direction: column;
  width: min(320px, 85vw);
  background: var(--branco);
  border-radius: 0 var(--raio-g) var(--raio-g) 0;
  box-shadow: var(--sombra-forte);
  transform: translateX(-100%);
  transition: transform .3s ease-in-out;
}
.menu-lateral.aberto { transform: translateX(0); }
.menu-lateral__topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--neutro);
}
/* Filho direto de propósito: com `span:first-child` solto este seletor
   pegava também o ícone de fechar dentro do botão e trocava a fonte dele. */
.menu-lateral__topo > span {
  font-family: var(--fonte-titulo); font-size: 22px; color: var(--marca);
}
.menu-lateral__lista { flex: 1; overflow-y: auto; padding: 12px 0; }
.menu-lateral__lista a {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 24px;
  font-size: 15px; font-weight: 500; color: var(--tinta);
  transition: background-color .2s ease, color .2s ease;
}
.menu-lateral__lista a:hover { background: rgb(var(--neutro-rgb) / .5); color: var(--marca); }
.menu-lateral__lista .icone { font-size: 20px; color: var(--marca); }
.menu-lateral__pe { padding: 20px 24px; border-top: 1px solid var(--neutro); }
.menu-lateral__pe .botao { width: 100%; }


/* ==========================================================================
   9. Hero
   ========================================================================== */
.hero {
  position: relative;
  display: flex; align-items: center;
  min-height: 90vh;
  padding-top: calc(var(--altura-cabecalho) + 32px);
  padding-bottom: 60px;
  padding-inline: 24px;
  overflow: hidden;
}
@media (min-width: 768px) { .hero { padding-bottom: 100px; } }

.hero__fundo {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to bottom right, rgb(var(--marca-rgb) / .1), rgb(var(--neutro-rgb) / .3) 45%, var(--branco));
}

.hero__grade {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: 40px;
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
}
@media (min-width: 900px) { .hero__grade { flex-direction: row; } }

.hero__texto {
  display: flex; flex-direction: column; gap: 20px;
  width: 100%;
  text-align: center;
}
.hero__texto p { max-width: 34rem; margin-inline: auto; }
@media (min-width: 900px) {
  .hero__texto { width: 50%; text-align: left; align-items: flex-start; }
  .hero__texto p { margin-inline: 0; }
  .hero__texto .botoes { justify-content: flex-start; }
}
.hero__texto .botoes { justify-content: center; padding-top: 8px; }
.hero__texto .apoio { font-size: 18px; line-height: 1.6; }

.hero__selos {
  display: flex; flex-wrap: wrap; gap: 24px;
  justify-content: center;
  padding-top: 8px;
}
@media (min-width: 900px) { .hero__selos { justify-content: flex-start; } }
.hero__selos li {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: var(--tinta-suave);
}
.hero__selos .icone { font-size: 20px; color: var(--marca); }

/* Espaço reservado que fica ATRÁS da foto. Se a foto não carregar (ou o
   Fernando ainda não tiver mandado), o `onerror` esconde a <img> e este
   bloco aparece no lugar. A página nunca fica com buraco. */
.foto-espaco {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  background: rgb(var(--neutro-rgb) / .6);
  color: var(--tinta-suave);
  font-size: 13px;
  text-align: center;
  padding: 24px;
}
.foto-espaco .icone { font-size: 34px; color: var(--marca); }

/* Foto com moldura deslocada atrás */
.hero__foto { position: relative; width: 100%; min-height: 420px; }
.hero__foto .foto-espaco { border-radius: var(--raio-foto); }
.destaque__foto .foto-espaco { border-radius: var(--raio-g); }
.sobre__foto .foto-espaco { border-radius: var(--raio-g); inset: 16px; }
@media (min-width: 900px) { .hero__foto { width: 50%; } }
.hero__foto::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  transform: translate(20px, 20px);
  background: rgb(var(--marca-rgb) / .1);
  border-radius: var(--raio-foto);
}
.hero__foto img {
  position: relative; z-index: 1;
  width: 100%;
  max-height: 600px;
  object-fit: cover;
  border-radius: var(--raio-foto);
  border: 4px solid var(--branco);
  box-shadow: var(--sombra-forte);
}


/* ==========================================================================
   10. Faixa de números
   ========================================================================== */
.numeros {
  padding-block: 32px;
  padding-inline: 24px;
  background: var(--branco);
  border-block: 1px solid var(--neutro);
}
.numeros__grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: var(--largura-max);
  margin-inline: auto;
  text-align: center;
}
@media (min-width: 768px) { .numeros__grade { grid-template-columns: repeat(4, 1fr); } }
.numeros__valor {
  font-family: var(--fonte-titulo);
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 700;
  color: var(--marca);
}
.numeros__texto { font-size: 14px; margin-top: 4px; }


/* ==========================================================================
   11. Dores + solução
   ========================================================================== */
.dores__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 1000px) { .dores__grade { grid-template-columns: 1fr 1fr; } }

.dores__painel {
  position: relative;
  padding: 32px;
  background: rgb(var(--neutro-rgb) / .25);
  border: 1px solid rgb(var(--marca-rgb) / .15);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-marca);
  overflow: hidden;
}
.dores__marca-dagua {
  position: absolute; top: -40px; left: -8px;
  font-family: var(--fonte-titulo);
  font-size: 120px; line-height: 1;
  color: rgb(var(--marca-rgb) / .08);
  user-select: none; pointer-events: none;
}
.dores__lista { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.dores__item {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px;
  background: var(--branco);
  border: 1px solid transparent;
  border-radius: var(--raio);
  box-shadow: var(--sombra-cartao);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.dores__item:hover { box-shadow: var(--sombra-alta); border-color: rgb(var(--marca-rgb) / .25); }
.dores__item > .icone { font-size: 26px; color: var(--marca-clara); flex-shrink: 0; margin-top: 2px; }
.dores__item strong { display: block; font-weight: 600; color: var(--tinta); }
.dores__item p { font-size: 14px; margin-top: 4px; }

.solucao { display: flex; flex-direction: column; gap: 32px; }
.solucao__texto {
  padding: 32px;
  border-left: 4px solid var(--marca-clara);
  border-radius: 0 var(--raio-g) var(--raio-g) 0;
  background: linear-gradient(to right, rgb(var(--neutro-rgb) / .25), transparent);
}
.solucao__texto > .icone { display: block; font-size: 38px; color: var(--marca); margin-bottom: 16px; }
.solucao__texto h3 { color: var(--marca); margin-bottom: 12px; }
.solucao__texto p { max-width: none; }
.solucao__texto strong { color: var(--tinta); font-weight: 600; }

.solucao__mini { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.solucao__mini li {
  padding: 20px 12px;
  text-align: center;
  background: var(--branco);
  border: 1px solid var(--neutro);
  border-radius: var(--raio);
}
.solucao__mini .icone { font-size: 30px; color: var(--marca); margin-bottom: 8px; }
.solucao__mini span { display: block; font-size: 14px; font-weight: 500; color: var(--tinta); }


/* ==========================================================================
   12. Seção de destaque (foto de um lado, conteúdo do outro)

   É a seção coringa. Serve pra atendimento online, pro procedimento
   principal, pra estrutura da clínica, pro que o lead tiver de mais forte.
   `.destaque--invertida` joga a foto pra direita.
   ========================================================================== */
.destaque__grade {
  display: flex; flex-direction: column; align-items: center;
  gap: 48px;
}
@media (min-width: 1000px) {
  .destaque__grade { flex-direction: row; gap: 64px; }
  .destaque--invertida .destaque__grade { flex-direction: row-reverse; }
}

.destaque__foto { position: relative; width: 100%; flex-shrink: 0; min-height: 380px; }
@media (min-width: 1000px) { .destaque__foto { width: 42%; } }
.destaque__foto::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  transform: translate(20px, 20px);
  border: 2px solid rgb(var(--marca-rgb) / .25);
  border-radius: var(--raio-foto);
}
.destaque--invertida .destaque__foto::before { transform: translate(-20px, 20px); }
.destaque__foto img {
  position: relative; z-index: 1;
  width: 100%;
  border-radius: var(--raio-foto);
  box-shadow: var(--sombra-forte);
}

.destaque__conteudo { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
@media (min-width: 1000px) { .destaque__conteudo { width: 58%; } }
.destaque__conteudo p { max-width: none; }

.citacao {
  padding: 24px;
  background: rgb(var(--marca-rgb) / .05);
  border-left: 4px solid var(--marca-clara);
  border-radius: 0 var(--raio) var(--raio) 0;
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: var(--tinta);
}

.beneficios { display: grid; grid-template-columns: 1fr; gap: 16px; width: 100%; }
@media (min-width: 600px) { .beneficios { grid-template-columns: repeat(2, 1fr); } }
.beneficios li {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px;
  background: rgb(var(--neutro-rgb) / .25);
  border: 1px solid var(--neutro);
  border-radius: var(--raio);
  transition: border-color .25s ease;
}
.beneficios li:hover { border-color: rgb(var(--marca-rgb) / .35); }
.beneficios .icone { font-size: 24px; color: var(--marca); flex-shrink: 0; margin-top: 2px; }
.beneficios strong { display: block; font-size: 14px; font-weight: 600; color: var(--tinta); }
.beneficios p { font-size: 13px; margin-top: 4px; }


/* ==========================================================================
   13. Cartões de diferencial
   ========================================================================== */
.cartoes { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 600px)  { .cartoes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cartoes { grid-template-columns: repeat(4, 1fr); } }
.cartoes--tres { grid-template-columns: 1fr; }
@media (min-width: 900px) { .cartoes--tres { grid-template-columns: repeat(3, 1fr); } }

.cartao {
  display: flex; flex-direction: column; align-items: center;
  padding: 32px 24px;
  text-align: center;
  background: var(--branco);
  border: 1px solid rgb(var(--marca-rgb) / .15);
  border-radius: var(--raio-g);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.cartao:hover { border-color: var(--marca); box-shadow: var(--sombra-alta); transform: translateY(-4px); }
.cartao__icone {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: rgb(var(--marca-rgb) / .1);
  color: var(--marca);
  transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.cartao__icone .icone { font-size: 30px; }
.cartao:hover .cartao__icone { background: var(--marca); color: var(--branco); transform: scale(1.08); }
.cartao h3 { font-family: var(--fonte-corpo); font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.cartao p { font-size: 14px; }


/* ==========================================================================
   14. Sobre
   ========================================================================== */
.sobre__grade {
  display: flex; flex-direction: column; align-items: center;
  gap: 48px;
}
@media (min-width: 900px) { .sobre__grade { flex-direction: row; } }

.sobre__foto { position: relative; width: 100%; padding: 16px; min-height: 380px; }
@media (min-width: 900px) { .sobre__foto { width: 42%; } }
.sobre__foto::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  transform: translate(-16px, 16px);
  border: 2px solid rgb(var(--marca-rgb) / .3);
  border-radius: var(--raio-g);
}
.sobre__foto img { position: relative; z-index: 1; width: 100%; border-radius: var(--raio-g); box-shadow: var(--sombra-alta); }

.sobre__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
@media (min-width: 900px) { .sobre__texto { width: 58%; } }
.sobre__texto p { max-width: none; }
.sobre__nome { font-size: 24px; margin-top: 12px; }
.sobre__registro { display: block; margin-top: 4px; }
.sobre__bio { display: flex; flex-direction: column; gap: 12px; }
.sobre__bio strong { color: var(--tinta); font-weight: 600; }

.credenciais { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; }
@media (min-width: 600px) { .credenciais { grid-template-columns: repeat(3, 1fr); } }
.credenciais li {
  padding: 12px 16px;
  text-align: center;
  background: rgb(var(--neutro-rgb) / .35);
  border: 1px solid var(--neutro);
  border-radius: var(--raio);
}
.credenciais .icone { font-size: 20px; color: var(--marca); }
.credenciais span { display: block; font-size: 12px; margin-top: 4px; }


/* ==========================================================================
   15. Avaliações do Google
   ========================================================================== */
.nota-google {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px;
  padding: 8px 16px;
  background: var(--branco);
  border: 1px solid var(--neutro);
  border-radius: 999px;
  box-shadow: var(--sombra-cartao);
}
.nota-google strong { font-size: 15px; font-weight: 700; color: var(--tinta); margin-right: 4px; }
.nota-google .icone { font-size: 18px; }

.avaliacoes { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 700px)  { .avaliacoes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .avaliacoes { grid-template-columns: repeat(4, 1fr); } }

.avaliacao {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 28px;
  background: var(--branco);
  border: 1px solid var(--neutro);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-cartao);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.avaliacao:hover { border-color: rgb(var(--marca-rgb) / .4); box-shadow: var(--sombra-alta); }
.avaliacao__topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.avaliacao__estrelas { display: flex; gap: 2px; }
.avaliacao__estrelas .icone { font-size: 19px; }
.avaliacao__logo { width: 20px; height: 20px; opacity: .55; }
.avaliacao__texto { font-style: italic; font-size: 15px; line-height: 1.65; }
.avaliacao__autor {
  display: flex; align-items: center; gap: 12px;
  margin-top: 24px; padding-top: 24px;
  border-top: 1px solid var(--neutro);
}
.inicial {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgb(var(--marca-rgb) / .15);
  color: var(--marca);
  font-size: 13px; font-weight: 700;
}
.avaliacao__autor strong { display: block; font-size: 14px; font-weight: 600; color: var(--tinta); }
.avaliacao__autor small { font-size: 12px; color: var(--tinta-suave); }


/* ==========================================================================
   16. Perguntas frequentes
   ========================================================================== */
.faq { display: flex; flex-direction: column; gap: 16px; }
.faq__item {
  background: var(--branco);
  border: 1px solid var(--neutro);
  border-radius: var(--raio-g);
  overflow: hidden;
  box-shadow: var(--sombra-cartao);
  transition: box-shadow .25s ease;
}
.faq__item:hover { box-shadow: var(--sombra-alta); }
.faq__pergunta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 24px;
  text-align: left;
  font-size: 16px; font-weight: 600; color: var(--tinta);
}
.faq__seta { font-size: 24px; color: var(--marca); flex-shrink: 0; transition: transform .3s ease; }
.faq__item.aberto .faq__seta { transform: rotate(180deg); }
.faq__resposta {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-inline: 24px;
  transition: max-height .4s cubic-bezier(.4, 0, .2, 1), padding .4s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}
.faq__item.aberto .faq__resposta { opacity: 1; padding-bottom: 24px; }
.faq__resposta p { font-size: 15px; max-width: none; }

.faq-rodape { margin-top: 40px; text-align: center; }
.faq-rodape p { margin: 0 auto 16px; }


/* ==========================================================================
   17. Instagram
   ========================================================================== */
.instagram__selo { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; color: var(--marca); }
.instagram__selo svg { width: 40px; height: 40px; }
.instagram__seguidores {
  font-size: 13px; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--marca);
  margin-top: 8px;
}

.insta-grade { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 700px) { .insta-grade { grid-template-columns: repeat(2, 1fr); } }

.insta-slot {
  position: relative; display: block;
  min-height: 24rem;
  border-radius: var(--raio);
  background: rgb(var(--neutro-rgb) / .5);
  overflow: hidden;
}
@media (min-width: 768px) { .insta-slot { min-height: 30rem; } }
.insta-slot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.insta-slot:hover img { transform: scale(1.06); }
.insta-slot__vazio {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  color: var(--tinta-suave);
  font-size: 14px;
}
.insta-slot__vazio .icone { font-size: 32px; color: var(--marca); }
.insta-slot__capa {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgb(var(--marca-rgb) / 0);
  transition: background-color .3s ease;
}
.insta-slot:hover .insta-slot__capa { background: rgb(var(--marca-rgb) / .3); }
.insta-slot__capa .icone {
  font-size: 26px; color: var(--branco);
  opacity: 0; transform: scale(.75);
  transition: opacity .3s ease, transform .3s ease;
}
.insta-slot:hover .insta-slot__capa .icone { opacity: 1; transform: scale(1); }

.insta-perfis { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 40px; }


/* ==========================================================================
   18. Chamada final
   ========================================================================== */
.chamada-final { padding-block: 64px; }
@media (min-width: 768px) { .chamada-final { padding-block: 96px; } }
.chamada-final h2 { color: var(--branco); font-size: clamp(28px, 4.5vw, 40px); margin-bottom: 16px; }
.chamada-final p { color: rgb(255 255 255 / .82); font-size: 18px; max-width: 36rem; margin: 0 auto 32px; }
.chamada-final .padrao-pontos {
  background-image: radial-gradient(#fff .6px, transparent .6px);
  opacity: .12;
}


/* ==========================================================================
   19. Rodapé
   ========================================================================== */
.rodape {
  padding: 64px 24px 32px;
  background: var(--escuro);
  color: rgb(255 255 255 / .65);
  font-size: 14px;
}
.rodape__grade {
  display: grid; grid-template-columns: 1fr; gap: 40px;
  max-width: var(--largura-max);
  margin: 0 auto 48px;
}
@media (min-width: 700px)  { .rodape__grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rodape__grade { grid-template-columns: repeat(4, 1fr); } }

.rodape h4 {
  font-family: var(--fonte-corpo);
  font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--marca-clara);
  margin-bottom: 20px;
}
.rodape p { max-width: none; }
.rodape a { transition: color .2s ease; }
.rodape a:hover { color: var(--marca-clara); }

.rodape__marca { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.rodape__marca img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid rgb(var(--marca-rgb) / .4); }
.rodape__marca span { font-family: var(--fonte-titulo); font-size: 20px; font-weight: 700; color: var(--marca-clara); }

.rodape__redes { display: flex; gap: 12px; margin-top: 24px; }
.rodape__redes a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgb(255 255 255 / .1);
  transition: background-color .25s ease;
}
.rodape__redes a:hover { background: var(--marca); }
.rodape__redes svg { width: 20px; height: 20px; fill: currentColor; }

.rodape__links { display: flex; flex-direction: column; gap: 12px; }
.rodape__contato { display: flex; flex-direction: column; gap: 16px; }
.rodape__contato li { display: flex; align-items: flex-start; gap: 12px; }
.rodape__contato .icone { font-size: 20px; color: var(--marca-clara); flex-shrink: 0; margin-top: 2px; }
.rodape__contato strong { display: block; font-weight: 500; color: rgb(255 255 255 / .85); }
.rodape__contato small { font-size: 12px; color: rgb(255 255 255 / .45); }

.rodape__mapa {
  position: relative;
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra-alta);
}
.rodape__mapa iframe { width: 100%; height: 200px; border: 0; pointer-events: none; }
.rodape__mapa-capa {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  transition: background-color .2s ease;
}
.rodape__mapa:hover .rodape__mapa-capa { background: rgb(var(--marca-rgb) / .15); }
.rodape__mapa-capa span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--branco);
  color: var(--marca);
  font-size: 12px; font-weight: 700;
  border-radius: 999px;
  box-shadow: var(--sombra-alta);
  opacity: 0;
  transition: opacity .2s ease;
}
.rodape__mapa:hover .rodape__mapa-capa span { opacity: 1; }
.rodape__mapa-capa .icone { font-size: 14px; }

.rodape__base {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-top: 32px;
  border-top: 1px solid rgb(255 255 255 / .1);
  font-size: 12px;
  color: rgb(255 255 255 / .4);
  text-align: center;
}
@media (min-width: 768px) { .rodape__base { flex-direction: row; justify-content: space-between; text-align: left; } }


/* ==========================================================================
   20. Botão flutuante do WhatsApp
   ========================================================================== */
.whatsapp-flutuante {
  position: fixed; right: 24px; bottom: 24px; z-index: 45;
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: var(--branco);
  box-shadow: 0 8px 24px rgb(0 0 0 / .25);
  opacity: 0;
  transform: scale(.5);
  transition: opacity .4s ease, transform .4s ease, box-shadow .3s ease;
}
.whatsapp-flutuante.visivel { opacity: 1; transform: scale(1); animation: pulso-whatsapp 2.4s infinite; }
.whatsapp-flutuante:hover { transform: scale(1.08); box-shadow: 0 12px 32px rgb(0 0 0 / .32); }
.whatsapp-flutuante svg { width: 30px; height: 30px; fill: currentColor; }

@keyframes pulso-whatsapp {
  0%   { box-shadow: 0 8px 24px rgb(0 0 0 / .25), 0 0 0 0 rgb(37 211 102 / .45); }
  70%  { box-shadow: 0 8px 24px rgb(0 0 0 / .25), 0 0 0 16px rgb(37 211 102 / 0); }
  100% { box-shadow: 0 8px 24px rgb(0 0 0 / .25), 0 0 0 0 rgb(37 211 102 / 0); }
}


/* ==========================================================================
   21. Entrada das seções ao rolar

   Só liga se o JavaScript estiver ligado (a classe `js` entra no <html> pelo
   script do <head>). Sem JS, a página aparece inteira e normal.
   ========================================================================== */
.js .revelar          { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
.js .revelar--esquerda { opacity: 0; transform: translateX(-40px); transition: opacity .7s ease, transform .7s ease; }
.js .revelar--direita  { opacity: 0; transform: translateX(40px);  transition: opacity .7s ease, transform .7s ease; }
.js .revelar.visivel,
.js .revelar--esquerda.visivel,
.js .revelar--direita.visivel { opacity: 1; transform: none; }