/* =====================================================
   ORAL SIN IMPLANTES — Landing Page
   Desenvolvido por Criativoria | criativoria.com.br
   =====================================================
   PALETA DE CORES PRINCIPAL:
     Verde escuro ......... #006932
     Verde médio .......... #01682C
     Lima (destaque) ...... #81FF00
     Cinza claro (fundo) .. #C7C7C7
     Branco ............... #fff
     Preto ................ #000

   DICA: Para trocar uma cor em todo o site, use
   Ctrl+H (localizar e substituir) no seu editor.
   ===================================================== */


/* =====================================================
   1. FONTES
   =====================================================
   A fonte principal é a "Rebrand Dis", carregada do
   servidor do Wix com fallback no arquivo local TTF.
   Os pesos disponíveis são:
     400 = Regular
     700 = Bold
     800 = ExBold
     900 = Black (o mais pesado, usado em títulos)

   ATENÇÃO: Não altere as URLs abaixo sem verificar
   se a fonte continua disponível.
   ===================================================== */

/* Rebrand Regular (peso 400) — textos corridos */
@font-face {
  font-family: 'Rebrand';
  font-weight: 400;
  src: url('https://static.wixstatic.com/ufonts/026751_5cadc27bdbb24b43a7af5db64e7e18b7/woff2/file.woff2') format('woff2'),
    url('../Fonte/Rebrand Dis Regular.ttf') format('truetype');
}

/* Rebrand Bold (peso 700) */
@font-face {
  font-family: 'Rebrand';
  font-weight: 700;
  src: url('https://static.wixstatic.com/ufonts/026751_161bcf0fb56049bab282f1aa01dd3063/woff2/file.woff2') format('woff2'),
    url('../Fonte/Rebrand Dis Bold.ttf') format('truetype');
}

/* Rebrand ExBold (peso 800) */
@font-face {
  font-family: 'Rebrand';
  font-weight: 800;
  src: url('https://static.wixstatic.com/ufonts/026751_3269237c69814678a0b2b2c221b3c2b5/woff2/file.woff2') format('woff2'),
    url('../Fonte/Rebrand Dis ExBold.ttf') format('truetype');
}

/* Rebrand Black (peso 900) — títulos em destaque */
@font-face {
  font-family: 'Rebrand';
  font-weight: 900;
  src: url('https://static.wixstatic.com/ufonts/026751_99a4022c0bcc4bacb6a8f7b6dac08755/woff2/file.woff2') format('woff2'),
    url('../Fonte/Rebrand Dis Heavy.ttf') format('truetype');
}

/* Futura Book — usada em parágrafos genéricos do body */
@font-face {
  font-family: 'FuturaBook';
  font-weight: 400;
  src: url('https://static.parastorage.com/fonts/v2/790166f1-b347-4f16-8a29-f0c4931a7c35/v1/futura-lt-w01-book.woff2') format('woff2');
}


/* =====================================================
   2. RESET GLOBAL
   =====================================================
   Remove margens e paddings padrão do navegador para
   garantir consistência visual em todos os browsers.
   Não altere este bloco a não ser que saiba o que está
   fazendo.
   ===================================================== */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* largura inclui padding e borda */
}

/* Rolagem suave ao clicar em links âncora (#secao) */
html {
  scroll-behavior: smooth;
}

/* Imagens nunca ultrapassam o container — evita overflow horizontal */
img {
  max-width: 100%;
  display: block;
}

/* Remove marcadores de listas */
ul {
  list-style: none;
}

/* Remove sublinhado e herda cor dos links */
a {
  text-decoration: none;
  color: inherit;
}

/* Estilos base do corpo da página */
body {
  font-family: 'FuturaBook', 'Rebrand', Arial, sans-serif;
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  overflow-x: hidden;
  /* evita barra de rolagem horizontal */
  background: #fff;
}

/* Todos os títulos usam a fonte Rebrand por padrão */
h1,
h2,
h3,
h4,
h5 {
  font-family: 'Rebrand', Arial, sans-serif;
}

/* Container central — limita a largura máxima do conteúdo a 980px
   e centraliza na tela. Para alterar a largura do site, mude 980px. */
.container {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
}


/* =====================================================
   3. ANIMAÇÕES (KEYFRAMES)
   =====================================================
   Aqui ficam definidos os movimentos reutilizáveis do
   site. Cada @keyframes é uma "receita" de animação
   que pode ser aplicada a qualquer elemento.

   Para ajustar a velocidade de uma animação, altere
   o valor em segundos onde o animation é chamado,
   por exemplo: animation: float-btn 2.8s → mais lento
   ===================================================== */

/* Flutuação vertical suave — usada nos botões de agendamento
   O botão sobe 5px e desce de volta em loop */
@keyframes float-btn {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }

  100% {
    transform: translateY(0);
  }
}

/* Pulsação com onda irradiante — usada no botão do WhatsApp
   Cria o efeito de "pulsar" com uma sombra verde se expandindo */
@keyframes wa-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  }

  60% {
    transform: scale(1.08);
    box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* Deslizamento lateral — disponível para uso futuro em textos */
@keyframes slide-lr {
  0% {
    transform: translateX(-5px);
    opacity: 0.7;
  }

  50% {
    transform: translateX(5px);
    opacity: 1;
  }

  100% {
    transform: translateX(-5px);
    opacity: 0.7;
  }
}

/* Nudge para a direita — usada no link "AGENDE UMA AVALIAÇÃO ➜"
   O texto faz um movimento duplo apontando para o formulário */
@keyframes nudge-right {

  0%,
  100% {
    transform: translateX(0);
  }

  40% {
    transform: translateX(10px);
  }

  55% {
    transform: translateX(6px);
  }

  70% {
    transform: translateX(10px);
  }
}


/* =====================================================
   4. BOTÕES
   =====================================================
   O site usa 4 tipos de botão:
     .btn              → base (estilos comuns a todos)
     .btn-primary-hero → verde escuro com texto lima
     .btn-lime         → lima com texto verde
     .btn-submit       → formulário hero
     .btn-sm           → versão menor (rodapé)

   Para alterar a cor de um botão, mude o background
   e o color dentro do seletor correspondente.
   ===================================================== */

/* Estilos base compartilhados por todos os botões */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Rebrand', Arial, sans-serif;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.05em;
  padding: 12px 32px;
  border-radius: 50px;
  /* cantos arredondados — aumente para mais arredondado */
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  /* impede que o texto quebre em duas linhas */
}

/* Botão principal da hero: fundo verde escuro, texto lima
   Hover: inverte as cores */
.btn-primary-hero {
  background: #006932;
  color: #81FF00;
}

.btn-primary-hero:hover {
  background: #81FF00;
  color: #006932;
  border-radius: 20px;
}

/* Botão secundário: fundo verde médio, texto lima
   Hover: fundo lima, texto verde */
.btn-lime {
  background: #01682C;
  color: #81FF00;
}

.btn-lime:hover {
  background: #81FF00;
  color: #01682C;
  border-radius: 20px;
}

/* Botão "Enviar" do formulário da hero */
.btn-submit {
  width: 100%;
  background: #006932;
  color: #fff;
  justify-content: center;
  border-radius: 100px;
  padding: 12px;
  font-size: 16px;
  font-family: 'Rebrand', Arial, sans-serif;
  font-weight: 700;
  margin-top: 8px;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-submit:hover {
  background: #004d24;
  /* verde ainda mais escuro no hover */
}

/* Versão pequena do botão — usada no rodapé */
.btn-sm {
  padding: 8px 22px;
  font-size: 14px;
}

/* Animação de flutuação aplicada nos botões de agendamento
   Pausa a animação quando o usuário passa o mouse por cima */
.btn-lime,
.btn-primary-hero {
  animation: float-btn 2.8s ease-in-out infinite;
}

.btn-lime:hover,
.btn-primary-hero:hover {
  animation-play-state: paused;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}


/* =====================================================
   5. TOPBAR (faixa verde com telefones)
   =====================================================
   Barra fixa no topo da página com os números de
   telefone. Fica colada ao topo mesmo ao rolar a página.

   Para alterar os telefones, edite o index.html
   na div com classe "topbar-phones".
   ===================================================== */

.topbar {
  background: #006932;
  /* cor de fundo verde */
  height: 38px;
  /* altura da barra — ajuste se necessário */
  display: flex;
  align-items: center;
  position: sticky;
  /* fica fixo no topo ao rolar */
  top: 0;
  z-index: 201;
  /* fica acima de tudo (maior z-index do site) */
}

.topbar-inner {
  display: flex;
  justify-content: flex-end;
  /* alinha o conteúdo à direita */
  align-items: center;
  width: 100%;
}

/* Texto dos telefones — para mudar a cor altere "color" */
.topbar-phones {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
  color: #BADA55;
  /* amarelo-esverdeado — mude aqui para outra cor */
  white-space: nowrap;
}


/* =====================================================
   6. HEADER (barra com logo e redes sociais)
   =====================================================
   Fica logo abaixo da topbar e também é fixo (sticky).
   O "top: 38px" garante que ele aparece abaixo da
   topbar ao rolar a página.

   Para alterar o logo, substitua a imagem em:
   index.html → div.logo → img src="..."
   ===================================================== */

header {
  position: sticky;
  top: 38px;
  /* cola abaixo da topbar (38px = altura da topbar) */
  z-index: 200;
  background: #fff;
  padding: 14px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Tamanho do logo no header */
.logo img {
  height: 42px;
  /* altura do logo — ajuste para maior ou menor */
  object-fit: contain;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Container dos ícones de redes sociais */
.header-social {
  display: flex;
  gap: 8px;
  /* espaço entre os ícones */
}

/* Cada ícone de rede social (círculo preto) */
.header-social a {
  width: 30px;
  height: 30px;
  background: #000;
  /* fundo do círculo — mude para outra cor se quiser */
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: background 0.2s;
}

.header-social a:hover {
  background: #333;
  color: #fff;
}

/* Ícones de redes sociais que usam IMAGEM (LinkedIn, YouTube)
   em vez de ícone Font Awesome */
.social-img-icon {
  background: none !important;
  /* remove o fundo preto para ícones de imagem */
  padding: 0;
  overflow: hidden;
}

.social-img-icon img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Botão hambúrguer — aparece apenas em telas pequenas (ver responsivo) */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  color: #006932;
  cursor: pointer;
}


/* =====================================================
   7. HERO (seção principal com carrossel e formulário)
   =====================================================
   O hero tem dois slides com imagens de fundo que
   alternam automaticamente a cada 5 segundos (definido
   no script.js).

   Para alterar as imagens, edite o index.html nas divs
   com classe "hero-slide" e mude o atributo
   style="background-image: url('...')".

   Altura do hero: 587px — ajuste em ".hero { height }"
   ===================================================== */

.hero {
  position: relative;
  height: 587px;
  /* altura total da seção hero */
  overflow: hidden;
}

/* Container de todos os slides de fundo */
.hero-slides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Estilo base de cada slide de fundo */
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  /* invisível por padrão */
  transition: opacity 0.9s ease;
  /* fade suave ao trocar de slide */
}

/* Slide ativo (visível) — classe adicionada pelo JavaScript */
.hero-slide.active {
  opacity: 1;
}

/* Posicionamento especial do slide 1 (casal) — 60% empurra a imagem ligeiramente
   para a direita. Ajuste a porcentagem para reposicionar. */
.hero-slide-left {
  background-position: 60% center;
}

/* Botões de navegação do carrossel (setas) */
.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(255, 255, 255, 0.75);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #006932;
  cursor: pointer;
  transition: background 0.2s;
}

.hero-nav:hover {
  background: #fff;
}

.hero-prev {
  left: 12px;
}

/* seta esquerda */
.hero-next {
  right: 12px;
}

/* seta direita */

/* Área de conteúdo dentro do hero (textos + formulário) */
.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 32px;
}

/* Container dos painéis de texto (um por slide) */
.hero-panels {
  flex: 0 0 auto;
  width: 340px;
  position: relative;
  min-height: 320px;
  align-self: flex-start;
  margin-top: 60px;
}

/* Cada painel de texto é empilhado e mostrado com fade */
.hero-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease;
}

.hero-panel.active {
  opacity: 1;
  pointer-events: auto;
}

/* Painel slide 1 (casal): 65px para a direita */
.hero-panel:nth-child(1) {
  left: 65px;
}

/* Posição do painel do slide 2 (fachada) */
.hero-panel:nth-child(2) {
  top: 200px;
  left: -90px;
}

/* --- SLIDE 1 (casal): textos --- */

/* Título principal: "Recupere seu sorriso." */
.hero-heading {
  font-size: 51px;
  /* tamanho da fonte — altere aqui */
  font-weight: 900;
  /* Black */
  color: #006932;
  line-height: 1.15;
  margin-bottom: 10px;
}

/* Subtítulo: "Recupere sua confiança." */
.hero-subheading {
  font-size: 38px;
  font-weight: 400;
  /* Regular */
  color: #006932;
  line-height: 1.2;
  margin-bottom: 18px;
}

/* Parágrafo descritivo — tamanho fixo para caber exatamente 2 linhas
   Se alterar o texto, ajuste width e height conforme necessário */
.hero-text {
  font-size: 15px;
  color: #000000;
  line-height: 1.38;
  margin-bottom: 26px;
  width: 300px;
  /* largura fixa do bloco de texto */
  height: 62px;
  /* altura fixa — texto além disso é cortado */
  overflow: hidden;
}

/* Link "AGENDE UMA AVALIAÇÃO ➜" com animação de nudge (aponta para o formulário)
   Para parar a animação: remova a linha "animation: ..." */
.hero-cta-text {
  font-family: 'Rebrand', Arial, sans-serif;
  font-weight: 900;
  font-size: 16px;
  color: #006932;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  cursor: pointer;
  display: inline-block;
  animation: nudge-right 2.2s ease-in-out infinite;
  /* movimento apontando para o formulário */
}

/* Selo "22 Anos Oral Sin" */
.hero-badge {
  margin-top: 0;
}

.hero-badge img {
  width: 174px;
  transform: rotate(343.46deg);
  /* inclinação do selo — igual ao original Wix */
}

/* --- SLIDE 2 (fachada): textos --- */

/* "A rede nº 1 em implantes dentários do Brasil," */
.hero-panel-title {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  line-height: 1.05;
  white-space: nowrap;
  /* impede quebra de linha */
  margin-bottom: 8px;
}

/* "com uma unidade dedicada a você no" */
.hero-panel-sub {
  font-size: 23px;
  font-weight: 400;
  color: #fff;
  line-height: 1.1;
  white-space: nowrap;
  margin-bottom: 2px;
}

/* "Centro de São Caetano do Sul." (em itálico negrito) */
.hero-panel-sub-strong {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 23px;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  line-height: 1.1;
  white-space: nowrap;
}

.hero-panel-sub strong {
  font-style: italic;
}

/* Dots de navegação (bolinhas na parte inferior do hero) */
.hero-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
}

.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  /* bolinha inativa: branco transparente */
  cursor: pointer;
  transition: background 0.3s;
}

.hero-dot.active {
  background: #fff;
  /* bolinha ativa: branco sólido */
}

/* Formulário de captura de leads no lado direito do hero */
.hero-form-wrap {
  flex-shrink: 0;
  width: 337px;
  /* largura do card do formulário */
  background: #fff;
  border-radius: 23px;
  padding: 30px 28px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
}

/* Cada campo do formulário (label + input/select) */
.field {
  margin-bottom: 14px;
}

.field label {
  display: block;
  font-family: 'Rebrand', Arial, sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: #006932;
  margin-bottom: 5px;
}

.field input,
.field select {
  width: 100%;
  padding: 9px 12px;
  border: 2px solid #d0d0d0;
  /* borda cinza — fica verde ao focar */
  border-radius: 0;
  font-family: 'FuturaBook', Arial, sans-serif;
  font-size: 15px;
  color: #333;
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.field input:focus,
.field select:focus {
  border-color: #006932;
  /* borda verde ao focar no campo */
}

/* Container do select com seta customizada */
.select-wrap {
  position: relative;
}

.select-wrap select {
  padding-right: 32px;
  cursor: pointer;
}

/* Seta do select (ícone Font Awesome) */
.sel-arrow {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  font-size: 11px;
  pointer-events: none;
  /* não interfere nos cliques */
}


/* =====================================================
   8. SOBRE (seção "A maior rede de implantes")
   =====================================================
   Seção branca com carrossel de imagens à esquerda
   e texto à direita.

   As imagens do carrossel ficam em: imagens/2b.png e 3b.png
   A troca automática é feita pelo script.js a cada 4 segundos.
   ===================================================== */

.about {
  padding: 80px 0;
  /* espaçamento interno — topo e base */
  background: #fff;
}

.about-inner {
  display: flex;
  align-items: center;
  gap: 60px;
  /* espaço entre imagem e texto */
}

/* Container da imagem (lado esquerdo) */
.about-img {
  flex: 0 0 444px;
  /* largura fixa da coluna de imagem */
}

/* Carrossel de imagens — tamanho 444×444px */
.about-carousel {
  position: relative;
  width: 444px;
  height: 444px;
  border-radius: 16px;
  overflow: hidden;
}

/* Cada slide do carrossel — empilhados com opacity 0/1 */
.about-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  opacity: 0;
  /* oculto por padrão */
  transition: opacity 0.9s ease;
}

.about-slide.active {
  opacity: 1;
  /* visível quando ativo */
}

/* Imagens estáticas dentro de .about-img (se houver) */
.about-img img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.10);
}

/* Conteúdo de texto (lado direito) */
.about-content {
  flex: 1;
}

/* Título: "A maior rede de implantes..." */
.about-content h2 {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 30px;
  font-weight: 900;
  color: #006932;
  line-height: 1.3;
  margin-bottom: 18px;
}

/* Parágrafos de texto — tamanhos fixos para caber exatamente como no Wix
   Se alterar o texto, ajuste width e height do parágrafo correspondente */
.about-content p {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  line-height: 1.3;
  margin-bottom: 10px;
  overflow: hidden;
  /* corta texto além da altura definida */
}

/* 1º parágrafo */
.about-content p:nth-of-type(1) {
  width: 460px;
  height: 91px;
}

/* 2º parágrafo */
.about-content p:nth-of-type(2) {
  width: 460px;
  height: 68px;
}

/* 3º parágrafo */
.about-content p:nth-of-type(3) {
  width: 442px;
  height: 68px;
}

/* Texto em negrito dentro dos parágrafos */
.about-content p strong {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
}

.about-content .btn {
  margin-top: 8px;
}


/* =====================================================
   9. TRATAMENTOS (seção verde com 3 cards)
   =====================================================
   Fundo verde com 3 colunas: Implantes, Carga Imediata
   e Prótese Protocolo.

   Para alterar o título da seção: edite o index.html
   em h2.section-title-white
   ===================================================== */

.treatments {
  background: #006932;
  /* fundo verde escuro */
  padding: 34px 0 72px;
}

/* Título "Conheça Nossos Tratamentos" */
.section-title-white {
  text-align: center;
  color: #fff;
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 63px;
  /* tamanho grande — ajuste aqui se necessário */
  font-weight: 900;
  margin-bottom: 48px;
}

/* Grid de 3 colunas iguais */
.treatments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

/* Cada card de tratamento */
.treat-card {
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Limites de tamanho do parágrafo descritivo por card
   Ajuste height se alterar o texto */
.treat-card:nth-child(1)>p {
  width: 220px;
  height: 91px;
  overflow: hidden;
}

.treat-card:nth-child(2)>p {
  width: 235px;
  height: 91px;
  overflow: hidden;
}

.treat-card:nth-child(3)>p {
  width: 229px;
  height: 91px;
  overflow: hidden;
}

/* Imagem circular de cada tratamento */
.treat-img {
  width: 175px;
  height: 175px;
  border-radius: 50%;
  /* transforma em círculo */
  overflow: hidden;
  margin: 0 auto 22px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.treat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Título de cada card: "Implantes Dentários", etc. */
.treat-card h3 {
  font-family: 'Rebrand', Arial, sans-serif;
  color: #fff;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 12px;
}

/* Parágrafo descritivo de cada tratamento */
.treat-card>p {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* Lista de bullets com seta (ícone next.png) */
.treat-card ul {
  text-align: left;
  align-self: flex-start;
  margin-top: 16px;
}

.treat-card li {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  line-height: 1.4;
  max-width: 233px;
  /* largura máxima de cada item da lista */
  height: 44px;
  overflow: hidden;
}

/* Ícone de seta nos bullets */
.bullet-img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Bullet alternativo (caractere) — não usado atualmente */
.bullet {
  color: #81FF00;
  font-weight: 900;
  flex-shrink: 0;
  font-size: 13px;
  margin-top: 1px;
}

/* Área do botão CTA abaixo dos cards */
.treat-cta {
  text-align: center;
  margin-top: 48px;
}

/* Botão da seção de Tratamentos tem cor diferente dos demais */
.treatments .btn-lime {
  background: #80FE00;
  /* lima ligeiramente diferente */
  color: #006932;
}

.treatments .btn-lime:hover {
  background: #fff;
  color: #006932;
}


/* =====================================================
   10. NOSSAS SOLUÇÕES (seção cinza com 4 ícones)
   =====================================================
   Fundo cinza (#C7C7C7) com imagem decorativa à direita
   e grid de 4 soluções (ícones + textos).

   Imagem decorativa: imagens/bg-solucoes.png
   Ícones dos cards: imagens/5.png, 6.png, 7.png, 8.png
   ===================================================== */

.solutions {
  position: relative;
  background: #C7C7C7;
  padding: 48px 0 60px;
  overflow: hidden;
}

/* Imagem decorativa — right calculado para ficar sempre junto
   à borda direita do container de 980px, em qualquer tela */
.solutions-deco {
  position: absolute;
  top: -30px;
  right: calc((100% - 1380px) / 2 - 140px);
  height: calc(100% + 60px);
  pointer-events: none;
  z-index: 0;
}

.solutions-deco img {
  height: 100%;
  width: auto;
  display: block;
}

/* Título "NOSSAS SOLUÇÕES" */
.sol-title {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 37px;
  font-weight: 900;
  color: #006932;
  letter-spacing: 1.5px;
  text-align: center;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
  /* fica acima da imagem decorativa */
}

/* Subtítulo em itálico abaixo do título */
.sol-sub {
  text-align: center;
  color: #000;
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}

/* Grid com 4 colunas para os cards de solução */
.sol-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 68px;
  row-gap: 24px;
  position: relative;
  z-index: 1;
}

/* Cada card de solução */
.sol-item {
  background: transparent;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Quadrado branco com bordas arredondadas que contém o ícone
   Tamanho: 149×141px — ajuste width e height se necessário */
.sol-icon {
  width: 149px;
  height: 141px;
  border-radius: 18px;
  background: #E8E6E6;
  margin: 0 auto 36px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 1;
}

.sol-icon img {
  width: 149px;
  height: 141px;
  object-fit: contain;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scale(1.15);
  transform-origin: bottom center;
  z-index: 2;
}

.sol-item:nth-child(1) .sol-icon img {
  bottom: -24px;
  transform: translateX(calc(-38% + 5px)) scale(1.15);
}

.sol-item:nth-child(2) .sol-icon img {
  bottom: -14px;
  transform: translateX(calc(-50% - 10px)) scale(1.15);
}

.sol-item:nth-child(3) .sol-icon img {
  bottom: -15px;
}

.sol-item:nth-child(4) .sol-icon img {
  bottom: -15px;
}

/* Nome da solução abaixo do ícone */
.sol-item h4 {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
  color: #006932;
  margin-bottom: 10px;
}

/* Descrição da solução */
.sol-item p {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #000;
  line-height: 1.55;
  text-align: center;
  overflow: hidden;
}

.sol-item:nth-child(1) p {
  width: 222px;
}

.sol-item:nth-child(2) p {
  width: 192px;
}

.sol-item:nth-child(3) p {
  width: 203px;
}

.sol-item:nth-child(4) p {
  width: 182px;
}


/* =====================================================
   11. NÚMEROS & DEPOIMENTOS (seção verde com estatísticas)
   =====================================================
   Fundo verde escuro com dois lados:
     Esquerdo: título + 4 estatísticas com ícones
     Direito:  3 depoimentos de clientes

   Ícones das estatísticas: imagens/5-estrelas.png,
   preto.png, cadeira.png, implante-dentario.png
   (tamanhos individuais definidos no HTML via style="")
   ===================================================== */

.stats-section {
  background: #006932;
  color: #fff;
  padding: 72px 0;
}

/* Flex container dividido em duas colunas */
.stats-inner {
  display: flex;
  gap: 56px;
  align-items: flex-start;
}

/* Coluna esquerda (estatísticas) */
.stats-col {
  flex: 1;
}

/* Título "Confie em quem prioriza atendimento humanizado"
   Tamanho fixo: 300×123px — ajuste se alterar o texto */
.stats-col h2 {
  font-family: 'Rebrand', Arial, sans-serif;
  color: #fff;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.2;
  width: 300px;
  height: 123px;
  overflow: hidden;
  margin-bottom: 40px;
}

/* Lista de 4 estatísticas — tamanho fixo: 283×400px */
.stats-list {
  display: flex;
  flex-direction: column;
  gap: 36px;
  /* espaço entre cada estatística */
  width: 283px;
  height: 400px;
  overflow: hidden;
}

/* Cada linha com ícone + número + texto */
.stat-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Container do ícone — largura fixa para alinhar todos */
.stat-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 81px;
}

/* Ícone em branco (filter inverte a cor para branco)
   max-width: none sobrescreve o reset global do img */
.stat-icon img {
  object-fit: contain;
  filter: brightness(0) invert(1);
  /* torna o ícone branco */
  width: auto;
  height: auto;
  max-width: none;
  /* IMPORTANTE: permite que tamanhos inline do HTML funcionem */
}

/* Área de texto ao lado do ícone */
.stat-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}

/* Número em destaque: "+22", "+500", etc. */
.stat-text strong {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 25px;
  font-weight: 900;
  color: #FFFFFF;
}

/* Legenda abaixo do número: "ANOS DE MERCADO", etc. */
.stat-text span {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.3px;
  color: #fff;
}

/* Coluna direita (depoimentos) */
.depo-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* espaço entre os depoimentos */
}

/* Cada depoimento: ícone de aspas + texto */
.depo-card {
  background: transparent;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* Ícone de aspas (imagens/aspas2.png) */
.depo-quote {
  width: 81px;
  height: 64px;
  flex-shrink: 0;
  object-fit: contain;
  opacity: 0.6;
  position: relative;
  left: 20px;
  top: -25px;
}

/* Container do texto + nome */
.depo-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Texto do depoimento */
.depo-card p {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.55;
  color: #fff;
  margin-bottom: 0;
  padding-left: 0;
}

/* Nome do cliente */
.depo-name {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
  /* Black — nome em negrito */
  color: #fff;
}

/* Elementos ocultos (não usados neste layout) */
.depo-foot {
  display: none;
}

.stars {
  display: none;
}

.depo-card strong {
  font-size: 16px;
  font-weight: 900;
  color: #fff;
}


/* =====================================================
   12. CTA FINAL (seção cinza com Dra. Juliana)
   =====================================================
   Fundo cinza (#C7C7C7) com a foto da Dra. Juliana
   transbordando para cima (sobre a seção de estatísticas).

   Imagem da Dra.: ../Landing Page/drajuliana.png (367×481px)
   O margin-top negativo em .cta-img controla o quanto
   a imagem sobe: -175px = sobe 175px acima desta seção.

   Altura total da seção: 306px
   ===================================================== */

.cta-section {
  background: #C7C7C7;
  padding: 0;
  overflow: visible;
  /* permite que a imagem transborde para cima */
}

/* Layout flex: imagem à esquerda + texto à direita */
.cta-box {
  display: flex;
  align-items: center;
  background: #C7C7C7;
  height: 306px;
  /* altura da seção CTA */
  overflow: visible;
  position: relative;
}

/* Container da imagem da Dra. Juliana */
.cta-img {
  flex-shrink: 0;
  width: 367px;
  align-self: flex-end;
  position: relative;
  bottom: 0;
  margin-top: -175px;
  margin-left: 10px;
}

/* Imagem propriamente dita: 367×481px */
.cta-img img {
  width: 367px;
  height: 481px;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* Conteúdo textual à direita da imagem */
.cta-content {
  flex: 1;
  padding: 0 48px 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: -30px;
}

/* Título "Chega de adiar." — 60px Rebrand Black
   margin-left negativo aproxima o título da imagem */
.cta-content h2 {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 60px;
  font-weight: 900;
  /* Black */
  color: #006932;
  line-height: 1.8;
  margin-bottom: 11px;
  margin-left: -100px;
  /* quanto mais negativo, mais à esquerda (próximo da imagem) */
}

/* Parágrafos "Atendimento humanizado." e "Resultado que você vai ver e sentir." */
.cta-content p {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  /* Regular */
  color: #006932;
  line-height: 1.4;
  margin-bottom: 4px;
}

/* Primeiro parágrafo em itálico */
.cta-content p:first-of-type {
  font-style: italic;
}

/* Bloco de crédito da responsável técnica — 16px Regular */
.cta-content p.cta-credit {
  margin-top: 12px;
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #01682C;
  line-height: 1.6;
}

/* "Dra. Juliana" — 16px Black (inline com o texto anterior) */
.cta-name {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
  /* Black */
  color: #01682C;
}

/* Números do CRO — 16px Regular */
.cta-cro {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #01682C;
}

/* <strong> genérico dentro do bloco de crédito */
.cta-credit strong {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
  color: #01682C;
  display: inline;
  /* garante que fica na mesma linha */
}


/* =====================================================
   13. RODAPÉ (footer)
   =====================================================
   Fundo verde com 3 colunas:
     1. Texto CTA com nome da clínica
     2. Informações de contato + botão
     3. Logo da Oral Sin

   Para alterar endereço/telefone: edite o index.html
   na seção <footer>.

   O rodapé inferior (footer-bottom) tem fundo cinza
   (#C7C7C7) com o texto de copyright.
   ===================================================== */

footer {
  background: #006932;
  /* fundo verde */
  color: #fff;
  padding: 56px 0 0;
}

/* Linha principal com as 3 colunas */
.footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  /* espaço entre as colunas */
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  /* linha divisória sutil */
}

/* Colunas de texto (1ª e 2ª) — dividem o espaço igualmente */
.footer-col {
  flex: 1;
}

/* --- COLUNA 1: Texto CTA --- */

/* Bloco de texto principal: "Agende agora sua avaliação na..." */
.footer-cta {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  /* Regular */
  color: #fff;
  line-height: 1.35;
}

/* "Oral Sin" e "São Caetano do Sul – Centro" em Black */
.footer-cta-name {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 22px;
  font-weight: 900;
  /* Black */
  color: #fff;
  display: block;
  /* cada nome em sua própria linha */
}

/* "e dê o primeiro passo para transformar sua vida." em Regular */
.footer-cta-regular {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  display: block;
  margin-top: 4px;
}

/* --- COLUNA 2: Contato --- */

/* "CONTATO" — Montserrat Semi Bold 16px */
.footer-contact-title {
  font-family: 'Montserrat', sans-serif;
  /* fonte diferente carregada via Google Fonts */
  font-size: 16px;
  font-weight: 600;
  /* Semi Bold */
  color: #fff;
  margin-bottom: 10px;
}

/* Números de telefone em lima (verde limão) */
.footer-phone {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
  /* Black */
  color: #81FF00;
  /* cor lima — mude aqui para outra cor */
  line-height: 1.6;
}

/* Endereço em branco, tamanho menor */
.footer-address {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  line-height: 1.6;
}

/* --- COLUNA 3: Logo --- */

/* Coluna da logo com largura fixa para não comprimir as outras colunas */
.footer-logo-col {
  flex: 0 0 320px;
  /* largura fixa de 320px — não encolhe nem cresce */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo da Oral Sin no rodapé — 320×81px
   max-width: none sobrescreve o reset global "img { max-width: 100% }" */
.footer-logo-col img {
  width: 320px;
  height: 81px;
  max-width: none;
  /* IMPORTANTE: permite a imagem ultrapassar o limite do reset */
  object-fit: contain;
  display: block;
}

/* Botão "Agendar avaliação" dentro do rodapé
   Tamanho: 215×46px | Fundo: lima | Texto: verde */
.footer-col .btn-lime {
  width: 215px;
  height: 46px;
  background: #81FF00;
  /* fundo lima */
  color: #006932;
  /* texto verde escuro */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: 'Rebrand', Arial, sans-serif;
  font-weight: 900;
  font-size: 16px;
  border-radius: 50px;
}

.footer-col .btn-lime:hover {
  background: #fff;
  /* branco no hover */
  color: #81FF00;
  /* texto lima no hover */
  border-radius: 50px;
}

/* Faixa inferior de copyright */
.footer-bottom {
  background: #C7C7C7;
  /* fundo cinza — diferente do verde do rodapé */
  text-align: center;
  padding: 16px 0;
}

/* Texto "© 2026. Todos os direitos reservados..." */
.footer-bottom p {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #333;
}


/* =====================================================
   14. BOTÃO FLUTUANTE DO WHATSAPP
   =====================================================
   Fica fixo no canto inferior direito da página.
   A animação "wa-pulse" cria o efeito de pulsação.

   Para alterar o número: edite o link no index.html
   em href="https://wa.me/55..."

   Para mudar a posição: ajuste "bottom" e "right".
   ===================================================== */

.wa-float {
  position: fixed;
  /* fixo na tela, mesmo ao rolar */
  bottom: 26px;
  /* distância do fundo */
  right: 26px;
  /* distância da direita */
  z-index: 300;
  /* acima de tudo */
  width: 56px;
  height: 56px;
  background: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: wa-pulse 1.8s ease-out infinite;
  /* pulsação verde contínua */
}

.wa-float:hover {
  animation-play-state: paused;
  /* para a animação no hover */
  transform: scale(1.12);
}

/* Imagem do ícone do WhatsApp */
.wa-float img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}


/* =====================================================
   ANIMAÇÕES DE SCROLL (Intersection Observer)
   data-anim="fade"       → aparece do transparente ao normal
   data-anim="slide-left" → desliza da esquerda + aparece
   A classe .animated é adicionada pelo script.js
   ===================================================== */

[data-anim] {
  opacity: 0;
  transition: opacity 0.75s ease, transform 0.75s ease;
}

[data-anim="slide-left"] {
  transform: translateX(-55px);
}

[data-anim].animated {
  opacity: 1;
  transform: translateX(0);
}


/* =====================================================
   15. RESPONSIVO — TELAS MENORES
   =====================================================
   Estas regras só se aplicam quando a tela é menor
   que o tamanho especificado. Não altere sem necessidade.

   1024px → tablets e telas médias
   768px  → celulares
   ===================================================== */

/* --- Tablets (até 1024px) --- */
@media (max-width: 1024px) {

  /* Hero vira coluna vertical */
  .hero {
    height: auto;
    padding: 60px 0;
  }

  .hero-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Formulário ocupa toda a largura */
  .hero-form-wrap {
    width: 100%;
    max-width: 480px;
  }

  /* Seção "Sobre" vira coluna */
  .about-inner {
    flex-direction: column;
  }

  .about-img {
    max-width: 100%;
  }

  /* Tratamentos vira 1 coluna */
  .treatments-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }

  /* Soluções vira 2 colunas */
  .sol-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Estatísticas vira coluna */
  .stats-inner {
    flex-direction: column;
  }

  /* CTA vira coluna */
  .cta-box {
    flex-direction: column;
    align-items: center;
  }

  .cta-img {
    width: 100%;
    max-width: 280px;
  }

  .cta-content {
    padding: 36px 28px;
    text-align: center;
  }

  /* Rodapé vira coluna */
  .footer-inner {
    flex-direction: column;
  }

  .footer-logo-col {
    justify-content: flex-start;
  }
}

/* --- Celulares (até 768px) --- */
@media (max-width: 768px) {

  /* Esconde a topbar de telefones */
  .topbar {
    display: none;
  }

  /* Esconde ícones de redes sociais no header */
  .header-social {
    display: none;
  }

  /* Mostra botão hambúrguer */
  .mobile-menu-btn {
    display: block;
  }

  /* Reduz tamanho dos títulos para caber na tela */
  .hero-heading {
    font-size: 28px;
  }

  .about-content h2 {
    font-size: 24px;
  }

  .section-title-white {
    font-size: 36px;
  }

  .sol-title {
    font-size: 26px;
  }

  .stats-col h2 {
    font-size: 24px;
  }

  .cta-content h2 {
    font-size: 40px;
  }

  /* Soluções vira 1 coluna em celular */
  .sol-grid {
    grid-template-columns: 1fr;
  }

  /* Rodapé centralizado em celular */
  .footer-inner {
    text-align: center;
  }

  .footer-logo-col {
    justify-content: center;
  }
}


/* =====================================================
   MODAL AGENDAMENTO
   ===================================================== */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-overlay.active {
  display: flex;
}

.modal-box {
  background: #fff;
  border-radius: 16px;
  padding: 44px 40px 36px;
  max-width: 440px;
  width: 90%;
  position: relative;
  animation: modal-in 0.25s ease;
}

@keyframes modal-in {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: #888;
}

.modal-close:hover {
  color: #000;
}

.modal-title {
  font-family: 'Rebrand', Arial, sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #006932;
  text-align: center;
  margin-bottom: 24px;
}