/* ═══════════════════════════════════════════════════════════════
   Dr. Ângelo Rebouças — Landing page
   Visual moderno · Mobile-first · Sem frameworks · WCAG AA
   ═══════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────── */
:root {
  /* Marca */
  --cor-primaria: #0b3c5d;         /* navy — títulos */
  --cor-primaria-profunda: #07293f;/* navy escuro — base do hero */
  --cor-primaria-media: #14608f;   /* links e detalhes */
  --cor-acento: #2f9bd6;           /* azul claro vivo — detalhes sobre dark */
  --cor-acento-texto: #7cc0ea;     /* azul claro AA (5,2:1) — links sobre navy */

  /* Neutros */
  --cor-fundo: #f6fafd;
  --cor-fundo-alternado: #eaf2f8;
  --cor-branco: #ffffff;
  --cor-texto: #24313d;
  --cor-texto-suave: #52616d;
  --cor-borda: #dde8f1;
  --texto-sobre-dark: #d3e4f0;
  --texto-sobre-dark-suave: #a9c3d6;

  /* Ação */
  --cor-cta: #0e7a34;
  --cor-cta-hover: #0a5c28;
  --cor-cta-brilho: rgba(23, 158, 78, 0.35);
  --ambar: #b45309;                /* estrelas / avisos (AA sobre claro) */
  --ambar-vivo: #f5a623;           /* estrelas decorativas sobre dark */

  /* Elevação em camadas */
  --sombra-1: 0 1px 2px rgba(11, 60, 93, 0.06), 0 4px 14px rgba(11, 60, 93, 0.07);
  --sombra-2: 0 2px 4px rgba(11, 60, 93, 0.07), 0 14px 34px rgba(11, 60, 93, 0.13);
  --sombra-cta: 0 10px 24px var(--cor-cta-brilho);

  --raio: 16px;
  --raio-pequeno: 10px;
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --max-largura: 1080px;
  --transicao: 180ms ease;
}

/* ── Reset essencial ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 1.0625rem;           /* 17px */
  line-height: 1.65;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-text-size-adjust: 100%;
}

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

h1, h2, h3 { color: var(--cor-primaria); line-height: 1.15; margin: 0 0 0.6em; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.6rem, 5vw, 2.9rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); font-weight: 800; }
h3 { font-size: 1.125rem; font-weight: 700; }

p { margin: 0 0 1em; }

a { color: var(--cor-primaria-media); }
a:hover { color: var(--cor-primaria); }

:focus-visible { outline: 3px solid #b45309; outline-offset: 3px; border-radius: 4px; }

.container {
  width: min(100% - 2.5rem, var(--max-largura));
  margin-inline: auto;
}
.container-estreito { max-width: 760px; }

/* ── Acessibilidade: pular para o conteúdo ─────────────────────── */
.pular-conteudo {
  position: absolute;
  left: -9999px;
  background: var(--cor-branco);
  color: var(--cor-primaria);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--raio) 0;
  z-index: 100;
  font-weight: 700;
}
.pular-conteudo:focus { left: 0; }

/* ── Cabeçalho (sticky com vidro) ──────────────────────────────── */
.cabecalho {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cor-borda);
  z-index: 50;
}
.cabecalho-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
}
.marca img { width: 158px; height: auto; }

.navegacao { display: none; }

.menu-botao {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: var(--cor-branco);
  cursor: pointer;
  transition: background var(--transicao);
}
.menu-botao:hover { background: var(--cor-fundo-alternado); }
.menu-botao span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--cor-primaria);
  transition: transform var(--transicao), opacity var(--transicao);
}
.menu-botao[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-botao[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-botao[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.cabecalho .navegacao.aberta {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--cor-branco);
  border-bottom: 1px solid var(--cor-borda);
  padding: 1rem 1.25rem 1.25rem;
  gap: 0.25rem;
  box-shadow: var(--sombra-2);
}
.navegacao a {
  padding: 0.7rem 0.75rem;
  border-radius: var(--raio-pequeno);
  color: var(--cor-primaria);
  text-decoration: none;
  font-weight: 600;
  transition: background var(--transicao);
}
.navegacao a:hover { background: var(--cor-fundo-alternado); }

.cabecalho-cta { display: none; }

/* ── Botões ────────────────────────────────────────────────────── */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  transition: transform var(--transicao), box-shadow var(--transicao),
              background var(--transicao), color var(--transicao);
}
.botao:active { transform: translateY(1px) scale(0.99); }
.botao-cta {
  background: var(--cor-cta);
  color: var(--cor-branco);
  box-shadow: var(--sombra-cta);
}
.botao-cta:hover {
  background: var(--cor-cta-hover);
  color: var(--cor-branco);
  transform: translateY(-2px);
}
.botao-contorno {
  background: transparent;
  color: var(--cor-primaria);
  border-color: var(--cor-primaria);
}
.botao-contorno:hover {
  background: var(--cor-primaria);
  color: var(--cor-branco);
  transform: translateY(-2px);
}
.botao-vidro {
  background: rgba(255, 255, 255, 0.16);
  color: var(--cor-branco);
  border-color: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.botao-vidro:hover {
  background: var(--cor-branco);
  color: var(--cor-primaria);
  transform: translateY(-2px);
}
.botao-grande { padding: 0.9rem 1.4rem; font-size: 1rem; }

/* ── Hero com foto da operação ao fundo ────────────────────────── */
.hero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(7, 41, 63, 0.92) 0%, rgba(7, 41, 63, 0.55) 55%, rgba(7, 41, 63, 0.88) 100%),
    url("/img/hero-banner.webp") center 32% / cover no-repeat,
    linear-gradient(160deg, #0d4368, var(--cor-primaria-profunda));
  color: var(--texto-sobre-dark);
  padding-block: 1.75rem 0;
  overflow: hidden;
}
.hero h1 { color: var(--cor-branco); }
.hero-sub { font-size: 1rem; max-width: 34em; color: var(--texto-sobre-dark); }
.hero-sub strong { color: var(--cor-branco); }

.hero-grade { display: grid; gap: 1.25rem; align-items: end; }

.etiqueta {
  display: inline-block;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: var(--cor-branco);
  font-weight: 600;
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.2rem 0 0.7rem;
}

/* Microcopy de segurança sob os CTAs */
.hero-microcopy {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: var(--texto-sobre-dark-suave);
}

/* Prova social discreta sob os CTAs (sem balão, sem cobrir a foto) */
.hero-prova {
  color: var(--texto-sobre-dark);
  font-size: 0.95rem;
  margin: 0;
}
.hero-prova span { color: var(--ambar-vivo); letter-spacing: 2px; margin-right: 0.3rem; }
.hero-prova strong { color: var(--cor-branco); }

/* Médico em destaque, sem fundo (PNG com alpha, com respiro ao redor) */
.hero-imagem {
  position: relative;
  max-width: 240px;
  margin-inline: auto;
  align-self: end;
}
.hero-imagem img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.45));
}

.hero-badge {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.96);
  color: var(--cor-primaria);
  border-radius: 999px;
  padding: 0.5rem 1.05rem;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: var(--sombra-2);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.hero-badge .estrelas { color: var(--ambar-vivo); letter-spacing: 1px; }

.faixa-credenciais {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  padding: 0 1.25rem 2.5rem;
  margin-top: 0;
}
.faixa-credenciais span {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(4px);
  color: var(--texto-sobre-dark);
  border-radius: 999px;
  padding: 0.42rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
}

/* ── Seções ────────────────────────────────────────────────────── */
.secao { padding-block: 3.5rem; position: relative; }
.secao-alternada {
  background:
    radial-gradient(640px 300px at 110% 0%, rgba(47, 155, 214, 0.10) 0%, transparent 60%),
    var(--cor-fundo-alternado);
}
.secao-intro { max-width: 42em; font-size: 1.075rem; color: var(--cor-texto-suave); }
.secao-intro strong { color: var(--cor-texto); }

/* Sinais — lista com checks */
.sinais-lista {
  list-style: none;
  margin: 1.75rem 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}
.sinais-lista li {
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 1rem 1.25rem 1rem 3rem;
  box-shadow: var(--sombra-1);
  position: relative;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.sinais-lista li:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.sinais-lista li::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1.15rem;
  width: 26px;
  height: 26px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230e7a34" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" fill="%23eaf6ee" stroke="none"/><path d="m8.5 12.2 2.3 2.3 4.7-5"/></svg>') center / contain no-repeat;
}

.aviso-calmo {
  background: linear-gradient(135deg, #eaf6ee, #e0f1e6);
  border: 1px solid #cbe8d4;
  border-left: 5px solid var(--cor-cta);
  border-radius: var(--raio-pequeno);
  padding: 1.1rem 1.35rem;
  color: var(--cor-texto);
}

/* Tratamentos — cartões com ícones */
.grade-cartoes {
  display: grid;
  gap: 1.1rem;
  margin-block: 2rem;
}
.cartao {
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 1.5rem 1.4rem;
  box-shadow: var(--sombra-1);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.cartao:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.cartao p { margin: 0; color: var(--cor-texto-suave); }

.icone-cartao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  color: var(--cor-primaria-media);
  background: linear-gradient(145deg, #e8f2fa, #d8eaf6);
  margin-bottom: 1rem;
}
.icone-cartao svg { width: 26px; height: 26px; }

.banner-figura { margin: 2.25rem 0 0; position: relative; }
.banner-figura img {
  border-radius: var(--raio);
  box-shadow: var(--sombra-2);
}
.banner-figura figcaption {
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
  margin-top: 0.75rem;
  text-align: center;
}

/* Condições tratadas (benignas × malignas) */
.grade-condicoes {
  display: grid;
  gap: 1.1rem;
  margin-block: 2rem;
}
.bloco-condicoes {
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 1.5rem 1.4rem;
  box-shadow: var(--sombra-1);
}
.bloco-condicoes h3 { margin-bottom: 1rem; }
.bloco-condicoes .selo {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 999px;
  padding: 0.18rem 0.7rem;
  vertical-align: middle;
  margin-left: 0.5rem;
}
.selo-benigno { background: #e5f3ea; color: #14532d; }
.selo-maligno { background: #fdeee3; color: #7c2d12; }
.tags-condicoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.tags-condicoes li {
  list-style: none;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform var(--transicao), border-color var(--transicao);
}
.tags-condicoes li:hover {
  transform: translateY(-2px);
  border-color: var(--cor-primaria-media);
}

/* Avaliações do Google — banner de nota + depoimentos */
.banner-nota {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: linear-gradient(145deg, #0d4368, var(--cor-primaria-profunda));
  color: var(--texto-sobre-dark);
  border-radius: var(--raio);
  box-shadow: var(--sombra-2);
  padding: 1.6rem 1.75rem;
  margin-block: 1.75rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.banner-nota::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 155, 214, 0.25) 0%, transparent 70%);
  pointer-events: none;
}
.nota-valor {
  margin: 0;
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--cor-branco);
  letter-spacing: -0.02em;
}
.nota-info { display: grid; gap: 0.3rem; }
.nota-info .estrelas {
  margin: 0;
  color: var(--ambar-vivo);
  font-size: 1.2rem;
  letter-spacing: 3px;
}
.nota-total { margin: 0; color: var(--texto-sobre-dark); }
.nota-total strong { color: var(--cor-branco); }
.nota-link {
  color: var(--cor-acento-texto);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
}
.nota-link:hover { text-decoration: underline; color: var(--cor-branco); }

.selo-g {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--cor-branco);
  color: #4285f4;
  font-weight: 800;
  font-size: 1.5rem;
  font-family: Arial, sans-serif;
  box-shadow: var(--sombra-1);
}

.grade-depoimentos {
  display: grid;
  gap: 1.1rem;
}
.depoimento {
  margin: 0;
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 1.4rem 1.4rem 1.5rem;
  box-shadow: var(--sombra-1);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.depoimento:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.depoimento header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.depoimento .avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, #e8f2fa, #d8eaf6);
  color: var(--cor-primaria-media);
  font-weight: 800;
  font-size: 1.15rem;
}
.depoimento-nome { margin: 0; font-weight: 700; color: var(--cor-primaria); line-height: 1.3; }
.depoimento-fonte { margin: 0; font-size: 0.82rem; color: var(--cor-texto-suave); }
.depoimento header .estrelas {
  margin: 0 0 0 auto;
  color: var(--ambar);
  letter-spacing: 2px;
  font-size: 0.95rem;
  white-space: nowrap;
}
.depoimento p { margin: 0; }
.depoimento p:last-child { color: var(--cor-texto); }

/* ═══════════ Tablet (≥640px) ═══════════ */
.passos {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}
.passos li {
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
  padding: 1.5rem 1.4rem;
  position: relative;
  overflow: hidden;
}
.passo-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(145deg, #14608f, #0b3c5d);
  color: var(--cor-branco);
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 0.9rem;
  box-shadow: 0 8px 18px rgba(11, 60, 93, 0.28);
}
.passos h3 { margin-bottom: 0.35rem; }
.passos p { margin: 0; color: var(--cor-texto-suave); }

.nota-particular {
  background: var(--cor-branco);
  border: 1.5px dashed var(--cor-primaria-media);
  border-radius: var(--raio);
  padding: 1.1rem 1.35rem;
  box-shadow: var(--sombra-1);
}

/* Sobre */
.sobre-grade { display: grid; gap: 2rem; align-items: start; }
.sobre-foto {
  border-radius: var(--raio);
  box-shadow: var(--sombra-2);
  max-width: 360px;
  margin-inline: auto;
}
.curriculo { margin-top: 1rem; }
.curriculo li { margin-bottom: 0.55rem; }
.curriculo { padding-left: 1.2rem; }
.link-instagram { font-weight: 700; }

/* FAQ — acordeão com chevron */
.faq-item {
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  margin-bottom: 0.8rem;
  overflow: hidden;
  box-shadow: var(--sombra-1);
  transition: box-shadow var(--transicao);
}
.faq-item[open] { box-shadow: var(--sombra-2); }
.faq-item summary {
  cursor: pointer;
  padding: 1.05rem 3rem 1.05rem 1.3rem;
  font-weight: 700;
  color: var(--cor-primaria);
  list-style: none;
  position: relative;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 1.05rem;
  top: 50%;
  width: 18px;
  height: 18px;
  translate: 0 -50%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2314608f" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>') center / contain no-repeat;
  transition: rotate var(--transicao);
}
.faq-item[open] summary::after { rotate: 180deg; }
.faq-item[open] summary { border-bottom: 1px solid var(--cor-fundo-alternado); }
.faq-item p { padding: 1rem 1.3rem 1.2rem; margin: 0; }

/* Formulário */
.formulario {
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-2);
  padding: 1.75rem 1.4rem;
  display: grid;
  gap: 1.3rem;
  max-width: 620px;
  margin-block: 2rem;
  position: relative;
}
.formulario::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--raio);
  padding: 1px;
  background: linear-gradient(135deg, rgba(20, 96, 143, 0.45), rgba(47, 155, 214, 0.2) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.campo { display: grid; gap: 0.4rem; }
.campo label { font-weight: 700; color: var(--cor-primaria); }
.campo input, .campo select {
  font: inherit;
  padding: 0.85rem 1rem;
  border: 2px solid var(--cor-borda);
  border-radius: var(--raio-pequeno);
  background: #fbfdfe;
  color: var(--cor-texto);
  width: 100%;
  transition: border-color var(--transicao), background var(--transicao);
}
.campo input:hover, .campo select:hover { border-color: #b9d2e4; }
.campo input:focus-visible, .campo select:focus-visible {
  outline: 3px solid #b45309;
  outline-offset: 1px;
  border-color: var(--cor-primaria-media);
  background: var(--cor-branco);
}
.formulario .botao { width: 100%; }
.campo-outro[hidden] { display: none; }
.formulario-nota { font-size: 0.88rem; color: var(--cor-texto-suave); margin: 0; }
#form-erro { color: #b3261e; font-weight: 700; }

/* Unidades */
.grade-unidades {
  display: grid;
  gap: 1.1rem;
  margin-top: 2rem;
}
.unidade {
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 1.5rem 1.6rem;
  box-shadow: var(--sombra-1);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.unidade:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.unidade h3 { margin-bottom: 0.4rem; }
.unidade a { font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.unidade a:hover { text-decoration: underline; }

/* ── Rodapé ────────────────────────────────────────────────────── */
.rodape {
  background:
    radial-gradient(700px 300px at 90% 0%, rgba(47, 155, 214, 0.15) 0%, transparent 60%),
    var(--cor-primaria-profunda);
  color: var(--texto-sobre-dark);
  padding-block: 3rem;
  font-size: 0.95rem;
}
.rodape a { color: var(--cor-branco); }
.rodape a:hover { color: var(--cor-acento-texto); }
.rodape-resumo strong { color: var(--cor-branco); }
.rodape-legal { margin-block: 0.75rem; }
.rodape-aviso {
  font-size: 0.85rem;
  color: var(--texto-sobre-dark-suave);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 1.25rem;
  margin-top: 1.5rem;
  max-width: 46em;
}

/* ── WhatsApp flutuante ────────────────────────────────────────── */
.whatsapp-flutuante {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(160deg, #16a34a, var(--cor-cta));
  color: var(--cor-branco);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px var(--cor-cta-brilho);
  z-index: 60;
  transition: transform var(--transicao), box-shadow var(--transicao),
              opacity var(--transicao);
}
.whatsapp-flutuante:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 16px 36px var(--cor-cta-brilho);
}
/* Oculto enquanto o formulário de contato está em tela (evita toque errado) */
.whatsapp-flutuante.oculto {
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px) scale(0.9);
}

/* ── Aviso de cookies (LGPD) ───────────────────────────────────── */
.aviso-lgpd {
  position: fixed;
  inset-inline: 1rem;
  bottom: 5.75rem;
  z-index: 70;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-2);
  padding: 1.1rem 1.3rem;
  display: none;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.aviso-lgpd.visivel { display: flex; }
.aviso-lgpd p { margin: 0; font-size: 0.9rem; max-width: 38em; }

/* ═══════════ Tablet (≥640px) ═══════════ */
@media (min-width: 640px) {
  .grade-cartoes { grid-template-columns: repeat(2, 1fr); }
  .grade-depoimentos { grid-template-columns: repeat(3, 1fr); }
  .grade-unidades { grid-template-columns: repeat(2, 1fr); }
  .passos { grid-template-columns: repeat(3, 1fr); }
  .formulario { padding: 2.25rem 2.25rem; }
  .cabecalho-cta { display: inline-flex; }
  .hero { padding-block: 4.5rem 0; }
  .hero-sub { font-size: 1.125rem; }
  .botao-grande { padding: 1.05rem 1.9rem; font-size: 1.1rem; }
  .hero-imagem { max-width: 380px; }
}

/* ═══════════ Desktop (≥880px) ═══════════ */
@media (min-width: 880px) {
  .menu-botao { display: none; }
  .navegacao, .navegacao.aberta {
    display: flex;
    flex-direction: row;
    position: static;
    background: none;
    border: 0;
    padding: 0;
    gap: 0.25rem;
    box-shadow: none;
  }
  .navegacao a { padding: 0.55rem 0.85rem; }
  .hero { padding-block: 5.5rem 0; }
  .hero-grade {
    grid-template-columns: 1.2fr 0.8fr;
    gap: 2rem;
    align-items: end;
  }
  .hero-imagem { max-width: 430px; margin-inline: auto 0; }
  .secao { padding-block: 5rem; }
  .grade-cartoes { grid-template-columns: repeat(3, 1fr); }
  .grade-condicoes { grid-template-columns: repeat(2, 1fr); }
  .sobre-grade {
    grid-template-columns: minmax(260px, 360px) 1fr;
    gap: 3rem;
  }
  .sobre-foto { margin-inline: 0; }
  .aviso-lgpd { inset-inline: auto 1.5rem; bottom: 1.5rem; max-width: 560px; }
}

/* ── Animações de entrada (progressive enhancement: sem JS, tudo visível) ── */
.animar {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.animar.visivel {
  opacity: 1;
  transform: none;
}

/* ── Movimento reduzido ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animar { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms;
    transition-duration: 0.01ms;
  }
}