/* ============================================================
   style.css — Landing Page Dr. Vinicius Tabatinga
   
   ESTRUTURA DESTE ARQUIVO:
   1.  Variáveis globais (cores, fontes, tamanhos)
   2.  Reset e base
   3.  Tipografia
   4.  Componentes reutilizáveis (botões, selos, seção-header)
   5.  Navbar
   6.  Hero
   7.  Barra de hospitais
   8.  Seção Procedimentos
   9.  Seção Sobre
   10. Seção Diferenciais
   11. Seção FAQ
   12. Seção Locais de Atendimento
   13. Seção CTA Final
   14. Footer
   15. WhatsApp flutuante
   16. Responsivo (mobile)
   ============================================================ */


/* ============================================================
   1. VARIÁVEIS GLOBAIS
   Edite aqui para mudar cores e fontes em todo o site.
   ============================================================ */
:root {
  /* Paleta principal — verde-azulado escuro inspirado na cor enviada */
  --cor-primaria: #0f3d3e;        /* Verde escuro — fundo hero, navbar, footer */
  --cor-primaria-hover: #0a2c2d;  /* Versão mais escura para hover */
  --cor-acento: #1a9e8f;          /* Teal vibrante — botões, destaques */
  --cor-acento-hover: #158a7c;    /* Teal escuro para hover */
  --cor-acento-claro: #e6f7f5;    /* Teal bem claro — fundos suaves */

  /* Neutros */
  --cor-branca: #ffffff;
  --cor-fundo: #f8f9fa;           /* Fundo geral da página */
  --cor-fundo-card: #ffffff;
  --cor-texto: #1a1a1a;           /* Texto principal */
  --cor-texto-suave: #5a6a7a;     /* Texto secundário / legendas */
  --cor-borda: #e0e8ef;           /* Bordas suaves */

  /* Tipografia */
  --fonte-titulo: 'Playfair Display', Georgia, serif;   /* Títulos elegantes */
  --fonte-corpo: 'Inter', 'Helvetica Neue', sans-serif; /* Texto legível */

  /* Tamanhos */
  --raio-borda: 10px;
  --raio-borda-grande: 18px;
  --sombra-card: 0 4px 24px rgba(0, 0, 0, 0.08);
  --sombra-card-hover: 0 8px 36px rgba(0, 0, 0, 0.14);

  /* Espaçamentos de seção */
  --secao-padding: 80px 0;
}


/* ============================================================
   2. RESET E BASE
   Zera inconsistências entre navegadores.
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* Rolagem suave ao clicar nos links de menu */
  font-size: 16px;
}

body {
  font-family: var(--fonte-corpo);
  color: var(--cor-texto);
  background-color: var(--cor-fundo);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}


/* ============================================================
   3. TIPOGRAFIA
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  line-height: 1.25;
  color: var(--cor-texto);
}

h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 600; }

p {
  font-size: 1rem;
  color: var(--cor-texto-suave);
  line-height: 1.8;
}

/* Texto destacado dentro de parágrafos */
strong {
  color: var(--cor-texto);
  font-weight: 600;
}


/* ============================================================
   4. COMPONENTES REUTILIZÁVEIS
   ============================================================ */

/* Container central — limita largura e centraliza */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Cabeçalho de seção — label + título + subtítulo */
.secao-header {
  text-align: center;
  margin-bottom: 56px;
}

.secao-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cor-acento);
  background: var(--cor-acento-claro);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 14px;
}

.secao-header h2 {
  margin-bottom: 16px;
}

.secao-header p {
  max-width: 560px;
  margin: 0 auto;
  font-size: 1.05rem;
}

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: var(--raio-borda);
  font-family: var(--fonte-corpo);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
}

/* Botão principal — teal cheio */
.btn-primario {
  background: var(--cor-acento);
  color: var(--cor-branca);
  box-shadow: 0 4px 16px rgba(26, 158, 143, 0.35);
}

.btn-primario:hover {
  background: var(--cor-acento-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26, 158, 143, 0.45);
}

/* Botão secundário — contorno branco (usado no hero escuro) */
.btn-secundario {
  background: transparent;
  color: var(--cor-branca);
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.btn-secundario:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--cor-branca);
  transform: translateY(-2px);
}

/* Botão outline teal (usado em fundos claros) */
.btn-outline {
  background: transparent;
  color: var(--cor-acento);
  border: 2px solid var(--cor-acento);
}

.btn-outline:hover {
  background: var(--cor-acento);
  color: var(--cor-branca);
  transform: translateY(-2px);
}

/* Selos de credencial — linha com ícones */
.selos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cor-acento);
  background: rgba(26, 158, 143, 0.12);
  padding: 5px 12px;
  border-radius: 100px;
  border: 1px solid rgba(26, 158, 143, 0.25);
}

/* Versão branca dos selos (usada no hero escuro) */
.selos-branco .selo {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
}

/* Ícone SVG inline dentro de selos e cards */
.icone {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}


/* ============================================================
   5. NAVBAR
   Barra de navegação fixa no topo.
   JavaScript adiciona a classe .scrolled quando o usuário rola.
   ============================================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 18px 0;
  transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
  /* Começa transparente sobre o hero */
  background: transparent;
}

/* Estado após scroll — fundo sólido */
.navbar.scrolled {
  background: var(--cor-primaria);
  padding: 12px 0;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}

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

/* Logo / nome do médico */
.navbar-logo {
  font-family: var(--fonte-titulo);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cor-branca);
  line-height: 1.2;
}

.navbar-logo span {
  display: block;
  font-family: var(--fonte-corpo);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-top: 2px;
}

/* Links de navegação desktop */
.navbar-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.navbar-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  transition: color 0.2s;
}

.navbar-links a:hover {
  color: var(--cor-branca);
}

/* Botão de agendamento na navbar */
.navbar-cta {
  padding: 10px 22px;
  font-size: 0.85rem;
}

/* Botão hamburguer — só aparece no mobile */
.navbar-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.navbar-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--cor-branca);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Menu mobile aberto — transforma hamburguer em X */
.navbar-toggle.aberto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-toggle.aberto span:nth-child(2) { opacity: 0; }
.navbar-toggle.aberto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ============================================================
   6. HERO
   Primeira seção — fundo escuro com foto do médico.
   ============================================================ */
.hero {
  min-height: 100vh;
  background: var(--cor-primaria);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: 80px; /* Compensa a navbar fixa */
}

/* Textura sutil de fundo */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(26,158,143,0.12) 0%, transparent 60%);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 60px;
  align-items: center;
  padding: var(--secao-padding);
}

.hero-conteudo {
  position: relative;
  z-index: 2;
}

/* Tag acima do título */
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-acento);
  margin-bottom: 20px;
}

.hero-tag::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: var(--cor-acento);
}

.hero h1 {
  color: var(--cor-branca);
  margin-bottom: 20px;
}

/* Palavra destacada em teal dentro do H1 */
.hero h1 em {
  font-style: normal;
  color: var(--cor-acento);
}

.hero-subtitulo {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.72);
  max-width: 520px;
  margin-bottom: 36px;
  line-height: 1.75;
}

.hero-botoes {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

/* Foto do médico no hero */
.hero-imagem {
  position: relative;
  z-index: 2;
}

.hero-foto {
  width: 100%;
  height: 560px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--raio-borda-grande);
  filter: brightness(0.95);
}

/* Cartão de credencial flutuante sobre a foto */
.hero-badge {
  position: absolute;
  bottom: -20px;
  left: -24px;
  background: var(--cor-branca);
  border-radius: var(--raio-borda);
  padding: 16px 20px;
  box-shadow: var(--sombra-card);
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 220px;
}

.hero-badge-icone {
  width: 44px;
  height: 44px;
  background: var(--cor-acento-claro);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero-badge-icone svg {
  width: 22px;
  height: 22px;
  color: var(--cor-acento);
}

.hero-badge-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-badge-texto strong {
  font-size: 0.9rem;
  color: var(--cor-texto);
}

.hero-badge-texto span {
  font-size: 0.75rem;
  color: var(--cor-texto-suave);
}


/* ============================================================
   7. BARRA DE HOSPITAIS
   Faixa estreita logo abaixo do hero.
   ============================================================ */
.barra-hospitais {
  background: var(--cor-branca);
  border-bottom: 1px solid var(--cor-borda);
  padding: 28px 0;
}

.barra-hospitais-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

.hospital-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 28px;
  border-right: 1px solid var(--cor-borda);
  text-align: left;
}

.hospital-item:last-child {
  border-right: none;
}

.hospital-item svg {
  width: 20px;
  height: 20px;
  color: var(--cor-acento);
  flex-shrink: 0;
}

.hospital-item strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cor-texto);
  line-height: 1.3;
}

.hospital-item span {
  font-size: 0.72rem;
  color: var(--cor-texto-suave);
}


/* ============================================================
   8. SEÇÃO PROCEDIMENTOS
   Cards com hover — um por procedimento.
   ============================================================ */
.procedimentos {
  padding: var(--secao-padding);
  background: var(--cor-fundo);
}

.procedimentos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.proc-card {
  background: var(--cor-fundo-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda-grande);
  padding: 32px 28px;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  cursor: default;
}

.proc-card:hover {
  box-shadow: var(--sombra-card-hover);
  transform: translateY(-4px);
  border-color: var(--cor-acento);
}

/* Ícone do card */
.proc-icone {
  width: 52px;
  height: 52px;
  background: var(--cor-acento-claro);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.proc-icone svg {
  width: 26px;
  height: 26px;
  color: var(--cor-acento);
}

.proc-card h3 {
  margin-bottom: 12px;
  color: var(--cor-texto);
}

.proc-card p {
  font-size: 0.92rem;
  line-height: 1.75;
}

/* Card de 5 itens — última linha: 2 cards centralizados */
.procedimentos-grid .proc-card:nth-child(4) {
  grid-column: 1 / 2;
}

.procedimentos-grid .proc-card:nth-child(5) {
  grid-column: 2 / 3;
}

.proc-cta {
  text-align: center;
  margin-top: 48px;
}


/* ============================================================
   9. SEÇÃO SOBRE
   Foto à esquerda, texto à direita.
   ============================================================ */
.sobre {
  padding: var(--secao-padding);
  background: var(--cor-branca);
}

.sobre-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.sobre-imagem-wrap {
  position: relative;
}

.sobre-foto {
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--raio-borda-grande);
}

/* Card de formação flutuante sobre a foto */
.sobre-badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: var(--cor-primaria);
  color: var(--cor-branca);
  border-radius: var(--raio-borda);
  padding: 18px 22px;
  min-width: 180px;
}

.sobre-badge strong {
  display: block;
  font-size: 1.5rem;
  font-family: var(--fonte-titulo);
  color: var(--cor-acento);
  line-height: 1;
  margin-bottom: 6px;
}

.sobre-badge span {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.4;
}

.sobre-conteudo h2 {
  margin-bottom: 20px;
}

.sobre-conteudo > p {
  margin-bottom: 16px;
  font-size: 0.97rem;
}

/* Lista de formação / hospitais */
.sobre-lista {
  margin: 28px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sobre-lista li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.92rem;
  color: var(--cor-texto-suave);
}

.sobre-lista li svg {
  width: 18px;
  height: 18px;
  color: var(--cor-acento);
  flex-shrink: 0;
  margin-top: 3px;
}


/* ============================================================
   10. SEÇÃO DIFERENCIAIS
   Fundo escuro — 4 itens em grid.
   ============================================================ */
.diferenciais {
  padding: var(--secao-padding);
  background: var(--cor-primaria);
}

.diferenciais .secao-header h2 {
  color: var(--cor-branca);
}

.diferenciais .secao-header p {
  color: rgba(255,255,255,0.65);
}

.diferenciais .secao-label {
  background: rgba(26,158,143,0.2);
  color: var(--cor-acento);
}

.diferenciais-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.dif-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--raio-borda-grande);
  padding: 32px 28px;
  transition: background 0.25s ease;
}

.dif-card:hover {
  background: rgba(255,255,255,0.08);
}

.dif-numero {
  font-family: var(--fonte-titulo);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--cor-acento);
  line-height: 1;
  margin-bottom: 16px;
  opacity: 0.6;
}

.dif-card h3 {
  color: var(--cor-branca);
  margin-bottom: 10px;
}

.dif-card p {
  color: rgba(255,255,255,0.6);
  font-size: 0.92rem;
}


/* ============================================================
   11. SEÇÃO FAQ
   Acordeão — JavaScript controla abertura/fechamento.
   ============================================================ */
.faq {
  padding: var(--secao-padding);
  background: var(--cor-fundo);
}

.faq-lista {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--cor-branca);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  overflow: hidden;
  transition: border-color 0.2s;
}

.faq-item.aberto {
  border-color: var(--cor-acento);
}

/* Botão da pergunta */
.faq-pergunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--fonte-corpo);
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--cor-texto);
  line-height: 1.4;
  transition: color 0.2s;
}

.faq-item.aberto .faq-pergunta {
  color: var(--cor-acento);
}

/* Ícone + / × */
.faq-icone {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cor-fundo);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.2rem;
  color: var(--cor-texto-suave);
  transition: background 0.2s, color 0.2s, transform 0.3s;
}

.faq-item.aberto .faq-icone {
  background: var(--cor-acento);
  color: var(--cor-branca);
  transform: rotate(45deg);
}

/* Resposta — começa escondida, JS adiciona height */
.faq-resposta {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.faq-item.aberto .faq-resposta {
  max-height: 300px;
}

.faq-resposta-inner {
  padding: 0 24px 22px;
  font-size: 0.93rem;
  color: var(--cor-texto-suave);
  line-height: 1.8;
  border-top: 1px solid var(--cor-borda);
  padding-top: 18px;
}


/* ============================================================
   12. SEÇÃO LOCAIS DE ATENDIMENTO
   ============================================================ */
.locais {
  padding: var(--secao-padding);
  background: var(--cor-branca);
}

.locais-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.local-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-borda-grande);
  padding: 28px 24px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.local-card:hover {
  border-color: var(--cor-acento);
  box-shadow: var(--sombra-card);
}

.local-icone {
  width: 48px;
  height: 48px;
  background: var(--cor-acento-claro);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.local-icone svg {
  width: 22px;
  height: 22px;
  color: var(--cor-acento);
}

.local-info h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}

.local-info p {
  font-size: 0.85rem;
  line-height: 1.6;
}

.local-tipo {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-acento);
  margin-bottom: 8px;
}


/* ============================================================
   13. SEÇÃO CTA FINAL
   Fundo teal — máxima atenção.
   ============================================================ */
.cta-final {
  padding: 80px 0;
  background: var(--cor-acento);
  text-align: center;
}

.cta-final h2 {
  color: var(--cor-branca);
  margin-bottom: 16px;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}

.cta-final p {
  color: rgba(255,255,255,0.82);
  font-size: 1.05rem;
  max-width: 520px;
  margin: 0 auto 36px;
}

.cta-final-botoes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Botão branco sobre fundo teal */
.btn-branco {
  background: var(--cor-branca);
  color: var(--cor-acento);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.btn-branco:hover {
  background: rgba(255,255,255,0.92);
  transform: translateY(-2px);
}

/* Botão outline branco sobre teal */
.btn-outline-branco {
  background: transparent;
  color: var(--cor-branca);
  border: 2px solid rgba(255,255,255,0.6);
}

.btn-outline-branco:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--cor-branca);
  transform: translateY(-2px);
}

.cta-crm {
  margin-top: 20px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
}


/* ============================================================
   14. FOOTER
   ============================================================ */
footer {
  background: var(--cor-primaria);
  color: rgba(255,255,255,0.6);
  padding: 56px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-sobre h3 {
  font-family: var(--fonte-titulo);
  font-size: 1.2rem;
  color: var(--cor-branca);
  margin-bottom: 12px;
}

.footer-sobre p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 8px;
}

.footer-col h4 {
  font-family: var(--fonte-corpo);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 16px;
}

.footer-col a,
.footer-col p {
  display: block;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 10px;
  transition: color 0.2s;
}

.footer-col a:hover {
  color: var(--cor-acento);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-bottom p {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
}

.footer-cfm {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.3);
  max-width: 420px;
  line-height: 1.6;
}


/* ============================================================
   15. BOTÃO WHATSAPP FLUTUANTE
   Fixo no canto inferior direito — sempre visível.
   ============================================================ */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  width: 58px;
  height: 58px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.55);
}

.whatsapp-float svg {
  width: 30px;
  height: 30px;
  color: white;
}

/* Pulso animado atrás do botão */
.whatsapp-float::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #25d366;
  opacity: 0;
  animation: pulso 2.5s ease-out infinite;
}

@keyframes pulso {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}


/* ============================================================
   16. RESPONSIVO — MOBILE (até 768px)
   Reorganiza grids e ajusta tamanhos para telas pequenas.
   ============================================================ */
@media (max-width: 900px) {
  /* Navbar */
  .navbar-links {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--cor-primaria);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    z-index: 998;
  }

  .navbar-links.aberto {
    display: flex;
  }

  .navbar-links a {
    font-size: 1.2rem;
  }

  .navbar-cta {
    display: none;
  }

  .navbar-toggle {
    display: flex;
    position: relative;
    z-index: 999;
  }

  /* Hero */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 100px 0 60px;
  }

  .hero-imagem {
    order: -1; /* Foto vai para cima no mobile */
  }

  .hero-foto {
    height: 380px;
    object-position: center 15%;
  }

  .hero-badge {
    left: 0;
    bottom: -16px;
  }

  /* Hospitais */
  .barra-hospitais-inner {
    flex-direction: column;
    gap: 0;
  }

  .hospital-item {
    border-right: none;
    border-bottom: 1px solid var(--cor-borda);
    width: 100%;
    padding: 14px 20px;
  }

  .hospital-item:last-child {
    border-bottom: none;
  }

  /* Procedimentos — 1 coluna */
  .procedimentos-grid {
    grid-template-columns: 1fr;
  }

  .procedimentos-grid .proc-card:nth-child(4),
  .procedimentos-grid .proc-card:nth-child(5) {
    grid-column: auto;
  }

  /* Sobre */
  .sobre-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .sobre-badge {
    right: 0;
  }

  /* Diferenciais */
  .diferenciais-grid {
    grid-template-columns: 1fr;
  }

  /* Locais */
  .locais-grid {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  /* WhatsApp flutuante menor no mobile */
  .whatsapp-float {
    bottom: 20px;
    right: 20px;
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 480px) {
  .hero-botoes {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .cta-final-botoes {
    flex-direction: column;
    align-items: stretch;
  }
}