/* ==========================================================================
   Igarapé Odonto · prévia
   Mecanismo do design system do Breno (o reconstruído do board do Eleviq),
   pele da Igarapé Odonto.

   O que veio do sistema, e é o que se transfere:
     - a página é uma PILHA DE FAIXAS arredondadas de 40px, recuadas da borda,
       alternando valor, em vez de rolagem contínua
     - manchete partida em dois tons, a ênfase primeiro
     - um acento só, RACIONADO: no máximo dois elementos por tela
     - numeral fantasma gigante atrás das linhas, um deles em cor cheia
     - cartão é preenchimento e raio, e nada mais: sem borda, sem sombra
     - barra do topo em cápsula flutuante com vidro
     - escala de 4px, degraus de raio 40/32/24/20/999
     - movimento curto: 120ms tinta, 220ms controle, sem mola, sem parallax

   O que NÃO veio, de propósito:
     - a paleta (greyscale + lima é da marca de drone). Aqui a cor sai da logo
       real da clínica, marinho #1b2b44 e rosé #c7978b, que é a regra que abre
       o APRENDIZADO.md e a defesa da página contra o teste da troca de nome
     - nenhum asset do board (logo, fotos, wordmark)
     - as fontes: Sora já foi na Clinidente e Inter na Privillege. Space
       Grotesk e Be Vietnam Pro fazem o mesmo papel (display geométrica de
       tracking apertado + corpo neutro) sem repetir prévia entregue

   Contraste conferido, não estimado:
     tinta #1f2733 sobre creme #faf7f4 .......... 14,09:1
     suave #5f6875 sobre creme .................. 5,28:1
     suave #5f6875 sobre reserva #f2ece7 ........ 4,81:1
     tinta #1f2733 sobre rosé #c7978b ........... 5,89:1  (rosé é PREENCHIMENTO)
     rosé #c7978b sobre marinho #1b2b44 ......... 5,58:1
     branco sobre marinho ....................... 14,23:1
   ========================================================================== */

:root {
  /* ── Rampa, no papel que cada valor faz no sistema ─────────────────── */
  --branco: #ffffff;
  --creme: #faf7f4;        /* fundo primário de faixa */
  --creme-2: #f2ece7;      /* faixa secundária, superfícies, divisores */
  --creme-3: #e7ded7;      /* borda hairline sobre creme-2 */
  --suave: #5f6875;        /* texto de apoio, legenda, rótulo */
  --tinta: #1f2733;        /* texto primário */
  --marinho: #1b2b44;      /* faixa escura, navegação */
  --marinho-2: #101b2b;    /* pressionado, rodapé */
  --rose: #c7978b;         /* O ACENTO. Preenchimento, nunca texto no claro. */
  --rose-2: #b8857a;       /* hover do acento */
  --rose-3: #f0e2dc;       /* tinta clara do acento, para realce quieto */
  --ocre: #8f5a49;         /* rosé escurecido até passar AA como texto */
  --zap: #25d366;

  /* Superfícies semânticas, para a alternância de campo funcionar sozinha */
  --campo: var(--creme);
  --superficie: var(--branco);
  --reserva-base: var(--creme-2);
  --reserva-borda: #d9bfb5;
  --hairline: var(--creme-3);

  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --corpo: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif;

  /* Escala de 4px */
  --e1: 4px;   --e2: 8px;   --e3: 12px;  --e4: 16px;  --e5: 20px;
  --e6: 24px;  --e8: 32px;  --e10: 40px; --e12: 48px; --e16: 64px;
  --e20: 80px; --e24: 96px; --e30: 120px;

  /* Degraus de raio do sistema */
  --r-faixa: 40px;
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 20px;
  --r-pill: 999px;

  --faixa-m: var(--e3);   /* margem externa da faixa, entra na conta da cápsula */
  --faixa-y: var(--e30);
  --cartao-p: var(--e8);
  --largura: 1180px;
  --margem: 44px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-forte: cubic-bezier(.16, 1, .3, 1);
  --t-rapido: 120ms;
  --t-base: 220ms;
  --t-lento: 420ms;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 104px; }

body {
  margin: 0;
  /* O corpo é mais escuro que as faixas: é o que faz cada faixa ler como
     uma laje apoiada, e não como uma seção de fundo colorido. */
  background: var(--creme-2);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 7vw, 4.2rem); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.9rem, 4.6vw, 2.75rem); line-height: 1.08; letter-spacing: -0.03em; }
h3 { font-size: 1.22rem; line-height: 1.22; letter-spacing: -0.015em; }

p { margin: 0 0 var(--e4); }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

/* Números sempre alinhados: nota, telefone, CEP, contagem. */
.num, .stat b, .servico-n, .nota-forte { font-variant-numeric: tabular-nums; }

/* A manchete parte em dois tons e o olho lê a ênfase antes da frase.
   Substitui o realce em negrito, que é o truque de toda página automática. */
.fraco { color: var(--suave); }
.faixa-escura .fraco { color: var(--rose); }

:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; border-radius: 6px; }
.faixa-escura :focus-visible, .rodape :focus-visible { outline-color: var(--rose); }

.pular { position: absolute; left: -9999px; }
.pular:focus {
  left: var(--e4); top: var(--e4); z-index: 60;
  background: var(--marinho); color: var(--branco);
  padding: var(--e3) var(--e5); border-radius: var(--r-pill);
}

/* ─────────── a pilha de faixas ─────────── */

.faixa {
  border-radius: var(--r-faixa);
  margin: var(--faixa-m);
  padding: var(--faixa-y) 0;
  overflow: hidden;
}
.faixa-clara  { background: var(--creme);   --campo: var(--creme);   --reserva-base: var(--creme-2); }
.faixa-media  { background: var(--creme-2); --campo: var(--creme-2); --reserva-base: #eadfd8; --superficie: var(--branco); }
.faixa-escura {
  background: var(--marinho);
  color: var(--branco);
  --campo: var(--marinho);
  --superficie: #22344f;
  --hairline: #2b3d57;
}
.faixa-escura h2, .faixa-escura h3 { color: var(--branco); }

.dentro {
  width: min(var(--largura), 100% - (var(--margem) * 2));
  margin-inline: auto;
}
.dentro-estreito { width: min(760px, 100% - (var(--margem) * 2)); }

/* ─────────── cabeçalho: cápsula flutuante ─────────── */

.topo { position: sticky; top: 0; z-index: 50; padding: var(--faixa-m) 0 0; }
.capsula {
  /* Grade + os dois paddings: centrada na mesma banda que .dentro, a caixa
     de conteúdo da cápsula cai exatamente em cima da grade da página. O
     padding precisa ser simétrico, senão a centralização come metade da
     correção e o conteúdo volta a ficar torto. */
  /* A caixa de CONTEÚDO da cápsula tem que ser a mesma de .dentro em toda
     largura, não só em 1440. .dentro mede min(largura, 100vw - 2*faixa-m -
     2*margem); a cápsula é isso mais os dois paddings dela. Como as duas
     centram no mesmo eixo, o conteúdo cai em cima da grade sozinho. */
  width: min(
    calc(var(--largura) + var(--e4) * 2),
    calc(100% - (var(--faixa-m) * 2) - (var(--margem) * 2) + (var(--e4) * 2))
  );
  margin-inline: auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: var(--e5);
  padding: var(--e2) var(--e4);
  border-radius: var(--r-pill);
  background: rgba(250, 247, 244, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.marca { display: flex; align-items: center; gap: var(--e3); text-decoration: none; flex: none; }
.marca img { border-radius: var(--r-pill); }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca-texto strong { font-family: var(--display); font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; }
.marca-texto small { font-size: 0.76rem; color: var(--suave); }

/* Grupo de navegação em pílula: o mecanismo do sistema para o menu. */
.menu {
  display: none;
  margin-left: auto;
  gap: var(--e1);
  padding: var(--e1);
  background: rgba(231, 222, 215, 0.7);
  border-radius: var(--r-pill);
}
.menu a {
  font-size: 0.92rem;
  text-decoration: none;
  padding: var(--e2) var(--e4);
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background-color var(--t-rapido) var(--ease);
}
.menu a:hover { background: var(--branco); }

/* ─────────── botões ─────────── */

.botao {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  min-height: 48px;
  font-family: var(--corpo);
  font-size: 1rem;
  font-weight: 600;
  border: 0;
  border-radius: var(--r-pill);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease), transform var(--t-rapido) var(--ease);
}
.botao:active { transform: scale(.97); }

/* Primário do sistema: pílula escura com DISCO de ícone na ponta. O disco é
   onde mora o acento, e é por isso que ele não precisa aparecer em mais nada. */
.botao-escuro {
  background: var(--marinho);
  color: var(--branco);
  padding: var(--e3) var(--e6);
}
/* O recuo assimétrico existe só para acomodar o disco na ponta. Sem disco
   ele deixa o rótulo torto dentro da pílula. */
.botao-escuro:has(.disco) { padding: var(--e2) var(--e2) var(--e2) var(--e6); }
.botao-escuro:hover { background: var(--marinho-2); }
.disco {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-pill);
  background: var(--rose);
  flex: none;
}
.disco .icone { width: 20px; height: 20px; stroke: var(--marinho-2); }
.botao-g { font-size: 1.08rem; min-height: 58px; padding-inline: var(--e8); }
.botao-g:has(.disco) { padding-inline: var(--e2) var(--e6); }
.botao-g .disco { width: 44px; height: 44px; }

.botao-claro { background: var(--branco); color: var(--tinta); padding: var(--e4) var(--e8); }
.botao-claro:hover { background: var(--creme-2); }
.faixa-media .botao-claro:hover { background: var(--creme-3); }
.botao-acento { background: var(--rose); color: var(--marinho-2); padding: var(--e4) var(--e8); justify-content: center; }
.botao-acento:hover { background: var(--rose-2); }
.botao-bloco { display: flex; width: 100%; justify-content: center; }

.icone { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Link de texto com seta: o "Read Article" do sistema. */
.link-seta {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 44px; font-weight: 600; text-decoration: none;
  color: var(--ocre);
  border-bottom: 2px solid var(--rose);
  transition: gap var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.link-seta:hover { gap: var(--e3); color: var(--tinta); }
.faixa-escura .link-seta { color: var(--rose); border-color: var(--rose); }
.faixa-escura .link-seta:hover { color: var(--branco); }

/* ─────────── cabeçalho de seção ─────────── */

.cabeca { max-width: 720px; margin-bottom: var(--e16); }
.cabeca p { margin: var(--e4) 0 0; font-size: 1.08rem; color: var(--suave); max-width: 54ch; }
.faixa-escura .cabeca p { color: #cfd7e3; }

/* Variante lateral: existe para que nem toda seção abra do mesmo jeito. */
.cabeca-lado { max-width: none; display: grid; gap: var(--e4); }

/* ─────────── hero ─────────── */

/* Claro de propósito, e é a diferença principal desta versão: no sistema o
   escuro é pontuação que aparece duas ou três vezes, nunca a abertura. */
.hero { padding-top: var(--e20); position: relative; }
.hero-grade { display: grid; gap: var(--e12); align-items: center; }
/* Teto da medida do texto, declarado. Sem ele o h1 abre numa linha só em tela
   grande; com a célula fantasma de antes ele media por acidente. O ch vai no
   h1 porque é ele que carrega o font-size, não o contêiner. */
.hero-texto { max-width: min(660px, 100%); }
.hero-texto h1 { max-width: 18ch; }
.hero .lead { font-size: 1.15rem; color: var(--suave); max-width: 46ch; margin: var(--e6) 0 var(--e10); }
.hero .lead b { color: var(--tinta); font-weight: 600; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: var(--e3); }

/* A marca da clínica como grafismo, presa à mesma margem do conteúdo: colada
   na borda da tela ela lê como recorte mal feito. */
.hero-marca {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: min(520px, calc(100% - 660px - var(--e6)));
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
  z-index: -1;
}
.hero-grade { position: relative; z-index: 0; }

/* ─────────── cartões de número ─────────── */

.stats {
  list-style: none; margin: var(--e24) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e4);
}
/* Cartão é preenchimento e raio, e nada mais. Sem borda, sem sombra. */
.stat { background: var(--superficie); border-radius: var(--r-md); padding: var(--cartao-p); }
.stat b {
  display: block; font-family: var(--display);
  font-size: clamp(2.2rem, 6vw, 3.2rem); font-weight: 600;
  line-height: 1; letter-spacing: -0.04em; margin-bottom: var(--e3);
}
.stat span { font-size: 0.92rem; color: var(--suave); }
/* Um cartão no acento, e é uma das duas aparições dele nesta tela. */
.stat-acento { background: var(--rose); }
.stat-acento b, .stat-acento span { color: var(--marinho-2); }

/* ─────────── serviços com numeral fantasma ─────────── */

/* A assinatura de layout do sistema: o numeral gigante atrás da linha, em
   quase-fundo, com UM deles em cor cheia marcando a linha viva. */
.servicos { display: grid; gap: var(--e4); }
.servico {
  position: relative;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: center;
  gap: var(--e8);
  background: var(--superficie);
  border-radius: var(--r-xl);
  padding: var(--e8);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease);
}
.servico:hover { transform: translateY(-2px); }
.servico-n {
  font-family: var(--display);
  font-size: 76px; font-weight: 600; line-height: .9;
  letter-spacing: -0.05em;
  color: var(--creme-2);
}
.servico-viva .servico-n { color: var(--rose); }
.servico h3 { margin-bottom: var(--e2); }
.servico p { color: var(--suave); margin: 0; max-width: 62ch; }

/* ─────────── espaço reservado ─────────── */

/* Onde falta material do cliente a página mostra a seção EXISTINDO, com o
   espaço desenhado. Superfície chapada (listra atrás do texto vira ruído),
   base por campo de cor, tracejado dizendo sozinho "reservado", e encostado
   na margem dos títulos: centralizado lê como wireframe largado. */
.reserva {
  background: var(--reserva-base);
  border: 1px dashed var(--reserva-borda);
  border-radius: var(--r-xl);
  padding: var(--e6);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--e3);
}
.reserva-icone {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--r-pill);
  background: var(--branco);
  flex: none;
}
.reserva-icone .icone { width: 24px; height: 24px; stroke: var(--ocre); stroke-width: 1.6; }
.reserva h3 { font-size: 1.12rem; }
.reserva p { font-size: .97rem; color: var(--suave); margin: 0; }
.reservas { display: grid; gap: var(--e4); }
#onde .reservas { margin-top: var(--e10); }

/* Marca o que falta dentro do texto corrido, sem fingir que é dado.
   Nunca em horário, nota, telefone ou CRO: esses ou são reais ou saem. */
.reserva-inline { border-bottom: 1px dashed var(--reserva-borda); color: var(--ocre); font-weight: 600; }

.pendencia {
  margin-top: var(--e6);
  padding: var(--e4) var(--e5);
  background: var(--rose-3);
  border-radius: var(--r-md);
  font-size: .95rem;
  color: #6b4034;
}
.pendencia-inline { color: var(--ocre); font-weight: 600; }

/* ─────────── avaliações ─────────── */

.nota-forte { display: flex; align-items: center; gap: var(--e5); margin-bottom: var(--e10); }
.nota-forte b {
  font-family: var(--display); font-size: clamp(3.2rem, 11vw, 4.6rem);
  font-weight: 600; line-height: .85; letter-spacing: -0.05em; color: var(--rose);
}
.nota-forte p { margin: var(--e2) 0 0; font-size: .95rem; color: #cfd7e3; }
.nota-forte strong { color: var(--branco); }

/* A citação em destaque é o segundo momento tipográfico da página: o peso
   dela vem do TAMANHO, não de aspas gigantes nem de fundo diferente. */
.citacao { margin: 0; }
.citacao p {
  font-family: var(--display);
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  font-weight: 500; line-height: 1.22; letter-spacing: -0.025em;
  margin: 0; max-width: 24ch;
}
.citacao footer { margin-top: var(--e5); font-size: .92rem; color: #b6c0cf; }
.citacao footer .reserva-inline { color: var(--rose); border-color: var(--rose); }

.apoios { display: grid; gap: var(--e4); margin-top: var(--e12); }
/* Coluna com a assinatura empurrada para o fim: sem isso os nomes terminam
   em alturas diferentes e a fileira lê como desalinhada. */
.apoio {
  margin: 0; display: flex; flex-direction: column;
  background: var(--superficie); border-radius: var(--r-lg); padding: var(--e6);
}
.apoio p { margin: 0; }
.apoio footer { margin-top: auto; padding-top: var(--e4); font-size: .88rem; color: #b6c0cf; }
.apoio footer .reserva-inline { color: var(--rose); border-color: var(--rose); }

.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4) var(--e8); margin-top: var(--e12); }

/* Estrelas: contorno das cinco por baixo, camada cheia recortada em 96%.
   left/top e não inset: `inset: 0` força 100% e anula o recorte. */
.estrelas { position: relative; display: inline-block; line-height: 0; }
.estrelas-base, .estrelas-cheias { display: flex; gap: 2px; line-height: 0; }
.estrelas-cheias { position: absolute; left: 0; top: 0; height: 100%; width: 96%; overflow: hidden; }
.estrela { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--rose); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.estrela-cheia { fill: var(--rose); stroke: none; }

/* ─────────── dados e mapa ─────────── */

.duplo { display: grid; gap: var(--e12); align-items: start; }

.dados { margin: 0 0 var(--e8); display: grid; gap: 0; }
.dados > div { padding: var(--e4) 0; border-top: 1px solid var(--hairline); }
.dados > div:last-child { border-bottom: 1px solid var(--hairline); }
.dados dt { font-family: var(--display); font-size: .92rem; font-weight: 600; color: var(--suave); margin-bottom: var(--e1); }
.dados dd { margin: 0; }
.dados a { color: var(--ocre); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--rose); }
.dados a:hover { color: var(--tinta); border-color: var(--tinta); }

/* Superfície um degrau diferente do campo mais filete: a coluna tem forma
   mesmo se o mapa não carregar (offline, bloqueado, lento). */
.mapa {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--branco);
  aspect-ratio: 4 / 3;
}
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ─────────── faq ─────────── */

.faq { display: grid; gap: var(--e3); }
.faq details { background: var(--superficie); border-radius: var(--r-lg); padding: var(--e5) var(--e6); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  list-style: none; cursor: pointer; min-height: 44px;
  font-family: var(--display); font-size: 1.1rem; font-weight: 600; letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq-disco {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--r-pill); background: var(--creme-2); flex: none;
  transition: transform var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.faq details[open] .faq-disco { background: var(--rose); transform: rotate(180deg); }
.faq details p { margin: var(--e4) 0 0; color: var(--suave); max-width: 62ch; }

/* ─────────── formulário ─────────── */

.form { background: var(--superficie); border-radius: var(--r-xl); padding: var(--cartao-p); display: grid; gap: var(--e4); }
.form-aviso-topo { font-size: .88rem; color: var(--suave); background: var(--creme); border-radius: var(--r-md); padding: var(--e3) var(--e4); margin: 0; }
.campo { display: grid; gap: var(--e2); }
.campo label { font-size: .9rem; font-weight: 600; }
.campo input, .campo select {
  width: 100%; min-height: 52px;
  padding: var(--e3) var(--e4);
  font-family: var(--corpo); font-size: 1rem;
  color: var(--tinta);
  background: var(--creme);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  transition: border-color var(--t-rapido) var(--ease), background-color var(--t-rapido) var(--ease);
}
.campo input:hover, .campo select:hover { background: var(--creme-2); }
.campo input:focus-visible, .campo select:focus-visible { border-color: var(--tinta); }
/* Seta própria: a nativa cola na borda e muda de forma em cada navegador. */
.campo select {
  appearance: none; -webkit-appearance: none; padding-right: var(--e12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235f6875' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--e4) center;
}
.campo input::placeholder { color: #98a1ad; }
.form .botao-acento { margin-top: var(--e2); }
.form-aviso { margin: 0; min-height: 1.2rem; font-size: .9rem; color: var(--ocre); text-align: center; }

/* ─────────── rodapé ─────────── */

.rodape {
  background: var(--marinho-2); color: #b6c0cf;
  border-radius: var(--r-faixa); margin: var(--faixa-m);
  padding: var(--e20) 0 var(--e8); font-size: .94rem;
}
.rodape-grade { display: grid; gap: var(--e10); padding-bottom: var(--e12); }
.rodape h3 { font-size: .98rem; color: var(--rose); margin-bottom: var(--e3); }
.rodape p { margin: 0 0 var(--e2); }
.rodape a { color: #d9e0ea; text-decoration: none; border-bottom: 1px solid #2b3d57; }
.rodape a:hover { color: var(--branco); border-color: var(--rose); }
.rodape-nome { font-family: var(--display); font-size: 1.24rem; font-weight: 600; letter-spacing: -0.025em; color: var(--branco); margin-top: var(--e3); }
.rodape-slogan { color: var(--rose); max-width: 30ch; }
.rodape-legal { margin: 0; padding-top: var(--e6); border-top: 1px solid #2b3d57; font-size: .84rem; color: #91a0b3; line-height: 1.6; }
.rodape .pendencia-inline { color: var(--rose); }
/* Cor calculada do fundo real #101b2b, não herdada com opacidade: 4,72:1. */
.credito { margin: var(--e8) 0 0; font-size: 12px; letter-spacing: .02em; color: #80868f; text-align: center; }

/* ─────────── flutuante ─────────── */

.flutuante {
  position: fixed; right: var(--e4); bottom: var(--e4); z-index: 50;
  width: 56px; height: 56px; border-radius: var(--r-pill);
  background: var(--zap); display: grid; place-items: center;
  box-shadow: 0 12px 32px rgba(16, 27, 43, .28);
  transition: transform var(--t-base) var(--ease);
}
.flutuante .icone { width: 30px; height: 30px; stroke: var(--branco); }
.flutuante:hover { transform: scale(1.06); }

/* ─────────── responsivo ─────────── */

@media (min-width: 640px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .apoios { grid-template-columns: repeat(2, 1fr); }
  .reservas { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .menu { display: flex; }
  .duplo { grid-template-columns: 1fr 1fr; }
  /* Em 14ch o título ia a três linhas e o parágrafo boiava; 18ch resolve. */
  .cabeca-lado { grid-template-columns: minmax(18ch, 1.1fr) 1fr; gap: var(--e8); align-items: end; }
  .cabeca-lado p { margin-top: 0; }
  .rodape-grade { grid-template-columns: 1.5fr 1fr 1fr; }
  .duplo .reservas { grid-template-columns: 1fr; }
  .flutuante { right: var(--e6); bottom: var(--e6); }
}

@media (max-width: 899px) {
  :root { --faixa-y: var(--e16); --margem: var(--e5); --cartao-p: var(--e5); --faixa-m: var(--e2); }
  .faixa, .rodape { border-radius: var(--r-xl); margin: var(--faixa-m); }
  .servico { grid-template-columns: minmax(0, 1fr); gap: var(--e3); padding: var(--e6); }
  .servico-n { font-size: 52px; }
  .hero-marca { width: 68%; opacity: .07; }
  .hero-acoes .botao { width: 100%; justify-content: space-between; }
  .hero-acoes .botao-claro { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .servico:hover, .flutuante:hover, .botao:active { transform: none; }
}