/* =========================================================================
   MEDICALCOR — Design System
   Clone estrutural de hdespecialidades.com.br (React/Tailwind → CSS puro)
   ---------------------------------------------------------------------
   ÍNDICE
   01. Variáveis / Tokens
   02. Reset & Base
   03. Utilitários de layout
   04. Botões
   05. Placeholders de imagem
   06. Carrossel (componente reutilizável)
   07. S01 — Navbar + Menu mobile
   08. S02 — Hero
   09. S03 — Quando procurar um cardiologista
   10. S04 — Nossa História
   11. S05 — Exames
   12. S06 — Check-ups (+ popup)
   13. S07 — Nossos Profissionais
   14. S08 — Depoimentos
   15. S09 — Modalidades de atendimento
   16. S10 — Perguntas frequentes (accordion)
   17. S11 — Acessibilidade
   18. S12 — Onde estamos (mapa)
   19. S13 — Rodapé
   20. S14 — Flutuante do WhatsApp
   21. Animações (reveal on scroll)
   22. Responsivo
   23. Páginas internas (especialidades)
   24. Páginas de apoio (política de privacidade e 404)
   ========================================================================= */

/* ================= 01. VARIÁVEIS / TOKENS ================= */
:root {
  /* --- Cores da marca (extraídas do site de referência) --- */
  --brand-primary: #002257;        /* Azul marinho institucional */
  --brand-primary-dark: #001633;
  --brand-primary-darker: #000615;
  --brand-accent: #8c8860;         /* Oliva/dourado dos ícones e detalhes */
  --brand-red: #b81a0a;            /* Vermelho da marca — etiquetas e réguas */
  --brand-black: #1c1a1a;          /* Preto da logo (preto.svg) */
  --brand-dark: #232323;           /* Grafite — fundo de seção */
  --brand-accent-light: #a8a37a;

  /* --- Degradê da marca (extraído da logo) --- */
  --grad-from: #ab352e;            /* Vermelho — início, à esquerda */
  --grad-to: #e28919;              /* Laranja  — fim, à direita */
  --gradient: linear-gradient(90deg, var(--grad-from) 0%, var(--grad-to) 100%);
  /* O vermelho do degradê some sobre a foto do hero (1,6:1). Esta variante
     clareada é a usada em TEXTO sobre fundo escuro — mede 4,1:1 e 5,9:1. */
  --gradient-on-dark: linear-gradient(90deg, #e2703c 0%, #e9a03a 100%);
  /* E o laranja do degradê some sobre fundo branco (2,7:1). Esta variante
     escurecida é a usada em TEXTO sobre fundo claro — mede 6,4:1 e 4,0:1. */
  --gradient-on-light: linear-gradient(90deg, #ab352e 0%, #c06a12 100%);
  --grad-shadow: rgba(171, 53, 46, 0.28);
  --grad-shadow-strong: rgba(171, 53, 46, 0.38);

  /* --- Neutros --- */
  --white: #ffffff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-900: #111827;

  --yellow-400: #facc15;

  /* --- Tipografia --- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;

  /* --- Espaçamento / formas --- */
  --radius-sm: 0.5rem;
  --radius: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  --container: 1200px;
  --section-y: 5.5rem;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow: 0 4px 16px rgba(0, 34, 87, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 34, 87, 0.12);
  --shadow-xl: 0 24px 48px rgba(0, 34, 87, 0.16);

  --header-h: 80px;
  --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================= 02. RESET & BASE ================= */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--gray-900);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

h1, h2, h3 { line-height: 1.2; font-weight: 700; }

/* ================= 03. UTILITÁRIOS DE LAYOUT ================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1rem;
}

.text-olive { color: var(--brand-accent); }

/* Etiqueta em pílula acima do título de uma seção */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
  background: rgba(184, 26, 10, 0.08);
  color: var(--brand-red);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}
.eyebrow svg { width: 1rem; height: 1rem; }

/* Sobre fundo escuro: pílula translúcida clara com texto branco */
.eyebrow--on-dark {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

/* Neutra, para seções de fundo claro: pílula translúcida escura */
.eyebrow--neutral {
  background: rgba(28, 26, 26, 0.07);
  border: 1px solid rgba(28, 26, 26, 0.14);
  color: var(--brand-black);
}

/* Cabeçalho padrão de seção (título + subtítulo + régua oliva) */
.section-head {
  text-align: center;
  margin-bottom: 4rem;
}

.section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: var(--brand-primary);
  margin-bottom: 1rem;
}

.section-subtitle {
  font-size: 1.125rem;
  color: var(--gray-600);
  max-width: 48rem;
  margin-inline: auto;
}

.section-rule {
  display: block;
  width: 6rem;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--brand-accent);
  margin: 1rem auto 0;
}

/* Quando a régua vem antes do texto de apoio, ela precisa de respiro embaixo */
.section-rule + .section-subtitle { margin-top: 1.5rem; }
.section-rule--gradient { background-image: var(--gradient-on-light); }
.section-title--dark { color: var(--brand-black); }
.section-title--left { text-align: left; }
.section-rule--left { margin-inline: 0; }

/* Texto pintado com o degradê da marca. O degradê cru dos botões não serve
   para texto: o laranja some no branco e o vermelho some no escuro. Por isso
   há uma variante para cada tipo de fundo.
   A cor sólida é o fallback de navegadores sem background-clip: text — sem
   ela o texto ficaria invisível. */
.text-gradient--on-dark  { color: #e9a03a; }
.text-gradient--on-light { color: #ab352e; }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .text-gradient--on-dark,
  .text-gradient--on-light {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .text-gradient--on-dark  { background-image: var(--gradient-on-dark); }
  .text-gradient--on-light { background-image: var(--gradient-on-light); }
}

.linklike {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ================= 04. BOTÕES ================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  transition: background-color var(--transition), color var(--transition),
              transform var(--transition), box-shadow var(--transition),
              filter var(--transition);
  white-space: nowrap;
}

/* Botão principal: degradê da marca. Vale para todos os CTAs —
   navbar, hero, cards de chamada, menu mobile e rodapé. */
.btn--gradient {
  background-image: var(--gradient);
  color: var(--white);
  box-shadow: 0 6px 18px var(--grad-shadow);
}
.btn--gradient:hover {
  color: var(--white);
  text-decoration: none;
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px var(--grad-shadow-strong);
}

.btn--outline {
  border: 1px solid var(--gray-300);
  background: var(--white);
  color: var(--gray-700);
}
.btn--outline:hover { background: var(--gray-100); }

/* Usado no rodapé escuro */
.btn--outlineWhite {
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--white);
}
.btn--outlineWhite:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
  color: var(--white);
  text-decoration: none;
}

.icon { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }

.btn--sm { padding: 0.5rem 1.25rem; font-size: 0.875rem; }
.btn--lg { padding: 1rem 2rem; font-size: 1.125rem; }
.btn--pill { border-radius: var(--radius-full); }
.btn--block { width: 100%; }

.icon-wa { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

/* ================= 05. PLACEHOLDERS DE IMAGEM =================
   Substitua cada `.ph` por uma <img> quando as imagens chegarem.
   O texto exibido vem do atributo data-ph.
   ========================================================================= */
.ph {
  display: block;                      /* também usado em <span> dentro de <button> */
  position: relative;
  width: 100%;
  background: repeating-linear-gradient(
    45deg,
    var(--gray-100),
    var(--gray-100) 10px,
    var(--gray-200) 10px,
    var(--gray-200) 20px
  );
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius);
  overflow: hidden;
}

.ph::after {
  content: attr(data-ph);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gray-500);
  background: rgba(255, 255, 255, 0.7);
}

.ph--on-dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.25);
}
.ph--on-dark::after { color: rgba(255, 255, 255, 0.75); background: transparent; }

/* Proporções */
.ph--1x1  { aspect-ratio: 1 / 1; }
.ph--3x2  { aspect-ratio: 3 / 2; }
.ph--3x4  { aspect-ratio: 3 / 4; }
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--fill { position: absolute; inset: 0; height: 100%; border-radius: 0; border: 0; }
.ph--fill::after { font-size: 0.875rem; background: transparent; color: rgba(255,255,255,0.35); }

.ph--round { border-radius: var(--radius-lg); }

/* Variantes fixas */
.ph--logo   { width: 150px; height: 56px; border-radius: var(--radius-sm); }
.ph--icon   { width: 40px; height: 40px; border-radius: var(--radius-sm); flex-shrink: 0; }
.ph--avatar { width: 40px; height: 40px; border-radius: var(--radius-full); flex-shrink: 0; }
.ph--logo::after, .ph--icon::after, .ph--avatar::after { font-size: 0.625rem; }

/* ================= 06. CARROSSEL (COMPONENTE) ================= */
.carousel { position: relative; width: 100%; }

.carousel__viewport { overflow: hidden; }

.carousel__track {
  display: flex;
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.carousel__slide {
  flex: 0 0 var(--slide-w, 100%);
  max-width: var(--slide-w, 100%);
  padding: 0.5rem;
}

.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--brand-primary);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow);
  transition: background-color var(--transition), opacity var(--transition);
  z-index: 2;
}
.carousel__arrow svg { width: 1.1rem; height: 1.1rem; }
.carousel__arrow:hover { background: var(--gray-100); }
.carousel__arrow[disabled] { opacity: 0.35; cursor: default; }
.carousel__arrow--prev { left: -0.5rem; }
.carousel__arrow--next { right: -0.5rem; }

/* ================= 07. S01 — NAVBAR =================
   Estrutura no estilo do site da Miers: barra fixa que começa transparente
   sobre o hero escuro e vira branca sólida ao rolar. Logo à esquerda,
   links e botão agrupados à direita, menu mobile em painel deslizante.
   ========================================================================= */
.navbar {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background-color var(--transition), box-shadow var(--transition),
              backdrop-filter var(--transition);
}

.navbar--transparent { background: transparent; }

.navbar--solid {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}

/* Logo à esquerda; links e botão empurrados para a direita pelo
   `margin-left: auto` (nos links no desktop, no hambúrguer no mobile). */
.navbar .container { display: flex; align-items: center; gap: 2rem; }

/* -------------------------------------------------------------------------
   Logo
   Duas versões do arquivo, trocadas automaticamente pelo CSS:
     .logo__img--escura → img/preto.svg,  para fundos CLAROS
     .logo__img--clara  → img/branco.svg, para fundos ESCUROS
   ------------------------------------------------------------------------- */
.logo { display: flex; align-items: center; flex-shrink: 0; }

/* Os SVGs têm viewBox "93 628 1512 476": o desenho mais uma folga em volta
   do coração, que pulsa ao carregar a página (a animação fica dentro dos
   próprios arquivos). A marca ocupa 92% da altura da imagem.
   Proporção 3.18:1, ou seja, 49px de altura ≈ 156px de largura. */
.logo__img { display: block; height: 49px; width: auto; }

/* Padrão: fundo claro → versão preta */
.logo__img--clara { display: none; }

/* Navbar transparente (sobre o hero escuro) → versão branca */
.navbar--transparent .logo__img--escura { display: none; }
.navbar--transparent .logo__img--clara { display: block; }

/* Menu mobile (fundo branco) → versão preta, um pouco menor */
.mobile-menu .logo__img { height: 45px; }
.mobile-menu .logo__img--clara { display: none; }
.mobile-menu .logo__img--escura { display: block; }

/* Links do desktop */
.nav-links { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }

.nav-links > a,
.dropdown__trigger {
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.94rem; font-weight: 500;
  color: var(--gray-700);
  transition: background-color var(--transition), color var(--transition);
  white-space: nowrap;
}
.nav-links > a:hover,
.dropdown__trigger:hover { color: var(--brand-primary); background: var(--gray-100); }
.nav-links a.is-active { color: var(--brand-accent); font-weight: 600; }

.navbar--transparent .nav-links > a,
.navbar--transparent .dropdown__trigger { color: rgba(255, 255, 255, 0.9); }
.navbar--transparent .nav-links > a:hover,
.navbar--transparent .dropdown__trigger:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
}

/* Dropdown "Tratamentos" */
.dropdown { position: relative; }

.dropdown__trigger { display: inline-flex; align-items: center; gap: 0.3rem; }
.dropdown__chevron { width: 0.9rem; height: 0.9rem; transition: transform var(--transition); }
.dropdown.is-open .dropdown__chevron { transform: rotate(180deg); }

.dropdown__menu {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  margin-top: 0.5rem;
  width: 14rem;
  padding-block: 0.35rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  display: none;
  z-index: 110;
}
.dropdown.is-open .dropdown__menu { display: block; }

.dropdown__menu a {
  display: block;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  color: var(--gray-700);
  transition: background-color var(--transition), color var(--transition);
}
.dropdown__menu a:hover { background: var(--gray-100); color: var(--brand-primary); }

/* Botão de agendamento */
.nav-cta { display: flex; align-items: center; gap: 0.75rem; }
.nav-cta .btn { padding: 0.7rem 1.35rem; font-size: 0.92rem; }

/* Botão hambúrguer */
.nav-toggle {
  display: none;
  margin-left: auto;          /* empurra o hambúrguer para a direita no mobile */
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  place-items: center;
  color: var(--brand-primary);
}
.navbar--transparent .nav-toggle { color: var(--white); }
.nav-toggle svg { width: 26px; height: 26px; }

/* Menu mobile — painel branco que entra pela direita */
.mobile-menu {
  position: fixed; inset: 0; z-index: 120;
  background: var(--white);
  padding: 1.5rem 1.25rem 2.5rem;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--transition), visibility 0s linear 300ms;
}
.mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--transition), visibility 0s;
}

.mobile-menu__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2rem;
}
.mobile-menu__close {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--brand-primary);
}
.mobile-menu__close svg { width: 26px; height: 26px; }

.mobile-menu nav { display: flex; flex-direction: column; gap: 0.25rem; }
.mobile-menu nav a:not(.btn) {
  padding: 0.95rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 1.05rem; font-weight: 500;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
}
.mobile-menu nav a:not(.btn):hover { background: var(--gray-50); color: var(--brand-primary); }
.mobile-menu .btn { margin-top: 2rem; }

/* Rótulo "Tratamentos" e seus subitens */
.mobile-menu__group {
  padding: 0.95rem 0.75rem 0.4rem;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand-accent);
}
.mobile-menu__sub { padding-left: 1.5rem !important; font-size: 0.98rem !important; }

/* ================= 08. S02 — HERO ================= */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 85vh;
  padding-top: var(--header-h);
  background: var(--white);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--brand-primary-darker);
}

/* A foto preenche a seção inteira. */
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Sem tingimento: só um escurecimento neutro (preto transparente) onde o
   texto precisa de contraste — o topo, por causa da navbar transparente, e a
   faixa esquerda, por causa do título. O resto da foto fica limpo.
   Medido sobre esta imagem: navbar 10:1, título 4:1, subtítulo 11:1. */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.62) 0%,
      rgba(0, 0, 0, 0.20) 20%,
      rgba(0, 0, 0, 0) 36%),
    linear-gradient(to right,
      rgba(0, 0, 0, 0.62) 0%,
      rgba(0, 0, 0, 0.38) 48%,
      rgba(0, 0, 0, 0.05) 80%,
      rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

/* Home: foto da fachada (fundo-teste2.jpg), bem mais clara que a fundo-1.jpg
   das páginas internas, justamente atrás do texto. Com o escurecimento padrão
   o laranja de "ciência e do amor" ficava entre 1,2:1 e 2,8:1. Aqui a faixa
   esquerda escurece mais e a fachada, à direita, continua limpa.
   Medido sobre esta foto: título 11,9:1, laranja 3,8:1 no pior ponto
   (mínimo para texto grande: 3:1), subtítulo 12,8:1. */
.hero--fachada .hero__overlay {
  background:
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.62) 0%,
      rgba(0, 0, 0, 0.20) 20%,
      rgba(0, 0, 0, 0) 36%),
    linear-gradient(to right,
      rgba(0, 0, 0, 0.84) 0%,
      rgba(0, 0, 0, 0.72) 48%,
      rgba(0, 0, 0, 0.25) 75%,
      rgba(0, 0, 0, 0) 95%);
}

/* Até 1024px o texto ocupa quase a largura toda e passa por cima do céu e da
   fachada, o lado claro da foto: o escurecimento vira uniforme.
   Medido em 390px: laranja 4,3:1, subtítulo 17,3:1; em 1024px: laranja 4,1:1. */
@media (max-width: 1024px) {
  /* A entrada com a placa fica à direita da foto; centralizado, o celular
     mostraria só o meio desfocado. */
  .hero--fachada .hero__img { object-position: 76% center; }
  .hero--fachada .hero__overlay {
    background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.82) 0%,
      rgba(0, 0, 0, 0.74) 65%,
      rgba(0, 0, 0, 0.55) 100%);
  }
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 3rem;
}

.hero__content {
  flex: 1;
  max-width: 42rem;      /* sem a imagem ao lado, segura a linha do título */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--white);
}

.hero__title {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.hero__subtitle {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  max-width: 36rem;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.hero__media {
  flex: 1;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* ================= 09. S03 — QUANDO PROCURAR UM CARDIOLOGISTA =================
   Fundo grafite (--brand-dark) com cartões brancos. Cinco cartões com selo
   de ícone: três na primeira linha e dois centralizados na segunda.
   ========================================================================= */
.reasons {
  padding-block: calc(var(--section-y) * 1.3) var(--section-y);
  background: var(--brand-dark);
}

.reasons .section-title { color: var(--white); }
.reasons .section-subtitle { color: rgba(255, 255, 255, 0.72); }

/* O vermelho do degradê cai para 2,5:1 sobre este grafite — aqui vale a
   variante clareada (5,0:1 e 7,2:1). */
.reasons .section-rule { background-image: var(--gradient-on-dark); }

.reasons__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 68rem;
  margin-inline: auto;
}

/* Cada cartão ocupa duas das seis colunas → 3 por linha.
   Os dois últimos são deslocados para ficarem centrados. */
.reason { grid-column: span 2; }
.reason:nth-child(4) { grid-column: 2 / span 2; }
.reason:nth-child(5) { grid-column: 4 / span 2; }

/* Sobre o grafite o cartão branco já se separa sozinho (15,7:1), então não
   precisa de borda. O degradê sutil dá a profundidade da referência. */
.reason {
  position: relative;
  margin-top: 1.25rem;                 /* espaço para o selo que sobe */
  padding: 2.5rem 1.75rem 1.75rem;
  background: linear-gradient(150deg, var(--white) 0%, var(--white) 55%, #eef0f2 100%);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  transition: transform var(--transition), box-shadow var(--transition);
}
.reason:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.36); }

/* Selo quadrado encaixado no canto superior esquerdo, avançando sobre a
   borda. O recuo de 0,75rem cabe dentro do vão de 1,5rem entre os cartões. */
.reason__badge {
  position: absolute;
  top: -1.25rem;
  left: -0.75rem;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius);
  background-image: var(--gradient);
  color: var(--white);
  box-shadow: 0 8px 18px var(--grad-shadow);
}
.reason__badge svg { width: 1.5rem; height: 1.5rem; }

.reason__text { color: var(--gray-600); line-height: 1.7; }

.reasons__cta { margin-top: 3.5rem; text-align: center; }

/* ================= 10. S04 — NOSSA HISTÓRIA ================= */
.about {
  padding-block: var(--section-y);
  background: var(--gray-50);
}

.about__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem;
  align-items: center;
}

.about__text { color: var(--gray-700); }
.about__text p { font-size: 1.0625rem; line-height: 1.8; margin-bottom: 1.25rem; }
.quote {
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 4px solid var(--brand-primary);
  font-style: italic;
  color: var(--gray-700);
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--gray-200);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

.about__gallery { margin-top: 3rem; }
.about__gallery .carousel__slide { padding: 0 0.375rem; }
.about__gallery-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

/* ---------- Colunas da S04 ----------
   O cabeçalho fica dentro da coluna de texto, alinhado à esquerda, e a
   coluna da direita traz duas fotos antigas sobrepostas.
   ------------------------------------------------------------------ */
.about-b__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 4rem;
  align-items: center;
}

/* Respiro entre a régua e o primeiro parágrafo — a .section-rule só traz
   margem em cima. */
.about-b__text .section-rule { margin-bottom: 2rem; }

/* Duas fotos sobrepostas: a segunda avança sobre o canto da primeira,
   com um respiro branco em volta para separá-las. */
.about-b__photos { position: relative; padding-bottom: 4.5rem; }

.about-b__photo {
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.about-b__photo--fundo { width: 82%; }

.about-b__photo--frente {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58%;
  border: 6px solid var(--gray-50);     /* mesmo fundo da seção */
  border-radius: var(--radius);
}

.about-b__text p {
  color: var(--gray-700);
  font-size: 1.0625rem;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

.about-b__cta { margin-top: 0.5rem; }

/* ================= 11. S05 — EXAMES =================
   Mesmo fundo grafite da S03, mas com cartões translúcidos em vez de
   brancos: são 11, e onze blocos brancos pesariam demais na página.
   Cada cartão é um <button> que abre o popup do exame (o componente
   .modal, definido no bloco dos check-ups).
   ========================================================================= */
.exams {
  padding-block: calc(var(--section-y) * 1.3) var(--section-y);
  background: var(--brand-dark);
}

.exams .section-title { color: var(--white); }
.exams .section-subtitle { color: rgba(255, 255, 255, 0.72); }
.exams .section-rule { background-image: var(--gradient-on-dark); }

/* Grade de 6 colunas com cada cartão ocupando 2 → 3 por linha. São 11, então
   a última linha tem 2: eles são deslocados para ficarem centrados. */
.exams__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
  max-width: 68rem;
  margin-inline: auto;
}

.exam { grid-column: span 2; }
.exam:nth-child(10) { grid-column: 2 / span 2; }
.exam:nth-child(11) { grid-column: 4 / span 2; }

/* Cartões compactos, em linha: traço vertical em degradê à esquerda, nome
   com o "Ver detalhes" embaixo e uma seta à direita indicando o clique. */
.exam {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  padding: 1.125rem 1.25rem;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  transition: transform var(--transition), background-color var(--transition),
              border-color var(--transition);
}
.exam:hover,
.exam:focus-visible {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
}
.exam:focus-visible { outline: 3px solid #e9a03a; outline-offset: 3px; }

/* Estica junto com o texto de duas linhas (nome + "Ver detalhes"). */
.exam__mark {
  flex: none;
  align-self: stretch;
  width: 3px;
  min-height: 1.75rem;
  border-radius: var(--radius-full);
  background-image: var(--gradient-on-dark);
}

.exam__body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }

.exam__name {
  font-size: 0.9875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--white);
}

/* Branco a 60% sobre o cartão (#2c2c2c): 6,1:1. No hover vira o laranja do
   degradê para fundo escuro (#e9a03a sobre #323232: 5,8:1). */
.exam__more {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--transition);
}

.exam__icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.45);
  transition: color var(--transition), transform var(--transition);
}

.exam:hover .exam__more,
.exam:focus-visible .exam__more,
.exam:hover .exam__icon,
.exam:focus-visible .exam__icon { color: #e9a03a; }
.exam:hover .exam__icon,
.exam:focus-visible .exam__icon { transform: translateX(3px); }

.exams__cta { margin-top: 3.5rem; text-align: center; }

/* ================= 12. S06 — CHECK-UPS =================
   Três blocos clicáveis (são <button>, não <div>, porque abrem um popup).
   Cada variante tem sua cor, derivada das três matizes da logo mas
   escurecida o suficiente para ler sobre o cartão branco.
   ========================================================================= */
.checkups {
  padding-block: calc(var(--section-y) * 1.3) var(--section-y);
  background: var(--gray-50);
}

.checkups__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  max-width: 68rem;
  margin-inline: auto;
}

.checkup {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 1rem 1.75rem;
  text-align: center;
  background: var(--white);
  border: 1px solid rgba(28, 26, 26, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.checkup:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.checkup:focus-visible { outline: 3px solid var(--brand-red); outline-offset: 3px; }

/* A foto, com o selo da marca encaixado na borda de baixo dela. */
.checkup__media { position: relative; display: block; width: 100%; margin-bottom: 2.25rem; }
.checkup__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;               /* proporção nativa dos arquivos (951×634) */
  object-fit: cover;
  border-radius: var(--radius);
}

.checkup__seal {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: 3.25rem;
  height: auto;
  padding: 0.4rem;
  background: var(--white);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.checkup__title {
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 800;
  line-height: 1.1;
}

.checkup__variant {
  margin-top: 0.25rem;
  font-size: 1.0625rem;
  font-weight: 700;
}
.checkup__variant--essencial   { color: #c0392b; }   /* 5,4:1 no branco */
.checkup__variant--performance { color: #4a7d22; }   /* 4,9:1 */
.checkup__variant--sessenta    { color: #9c5410; }   /* 5,7:1 */

/* Tem cara de botão, mas é um <span>: quem é clicável é o cartão inteiro,
   e um <button> dentro de outro <button> seria HTML inválido. */
.checkup__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  padding: 0.6rem 1.35rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-700);
  transition: background-color var(--transition), border-color var(--transition),
              color var(--transition), background-image var(--transition);
}
.checkup:hover .checkup__more,
.checkup:focus-visible .checkup__more {
  background-image: var(--gradient);
  border-color: transparent;
  color: var(--white);
}

/* ---------- Popup ----------
   Usa <dialog> nativo: o foco preso dentro, o Escape e o fundo escuro vêm
   de graça do navegador, sem JS para isso. */
.modal {
  /* O reset global (`* { margin: 0 }`) anula o `margin: auto` que o navegador
     usa para centralizar o <dialog> — por isso ele precisa ser devolvido aqui,
     senão o popup encosta no canto superior esquerdo. */
  margin: auto;
  width: min(100% - 2rem, 34rem);
  max-height: calc(100dvh - 3rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--gray-700);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}
.modal::backdrop { background: rgba(28, 26, 26, 0.65); }

.modal[open] { animation: modalIn 220ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.modal__box { position: relative; padding: 2.5rem 2rem 2rem; text-align: center; }
.modal__box p { line-height: 1.75; margin-bottom: 1rem; }

.modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  color: var(--gray-500);
  transition: background-color var(--transition), color var(--transition);
}
.modal__close:hover { background: var(--gray-100); color: var(--brand-black); }
.modal__close svg { width: 1.25rem; height: 1.25rem; }

.modal__seal { width: 3rem; height: auto; margin: 0 auto 0.75rem; }

.modal__eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500);
}

.modal__title { font-size: 1.5rem; font-weight: 800; margin-bottom: 1.25rem; }

/* Nome por extenso das siglas (MAPA, MRPA, ITB), dentro do próprio título. */
.modal__sub {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--gray-500);
}

.modal .btn { margin-top: 0.75rem; }

/* ================= 13. S07 — NOSSOS PROFISSIONAIS =================
   Fundo grafite como a S05, com cartões brancos no estilo da Miers:
   retrato 3:4 no topo e o corpo com nome, função e registro.
   ========================================================================= */
.team {
  padding-block: calc(var(--section-y) * 1.3) var(--section-y);
  background: var(--brand-dark);
}

.team .section-title { color: var(--white); }
.team .section-subtitle { color: rgba(255, 255, 255, 0.72); }
.team .section-rule { background-image: var(--gradient-on-dark); }

.team__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  max-width: 68rem;
  margin-inline: auto;
}

.pro {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  transition: transform var(--transition), box-shadow var(--transition);
}
.pro:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.36); }

/* O retrato entra em 3:4; o object-position no topo evita cortar o rosto
   quando a foto vier em outra proporção. */
.pro .ph,
.pro__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border: 0;
  border-radius: 0;
}

.pro__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.5rem;
}

.pro__name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--brand-black);
  line-height: 1.3;
}

.pro__role {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--brand-red);
}

.pro__reg { margin-top: auto; font-size: 0.8125rem; color: var(--gray-500); }

/* ================= 14. S08 — DEPOIMENTOS =================
   Mesmo cabeçalho e fundo claro da S06. O texto nasce cortado em 2 linhas;
   o botão "Leia mais" é revelado pelo JS só nos cartões onde houve corte.
   ========================================================================= */
.reviews {
  padding-block: calc(var(--section-y) * 1.3) var(--section-y);
  background: var(--gray-50);
}

.review {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.75rem;
  text-align: left;
  background: var(--white);
  border: 1px solid rgba(28, 26, 26, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.review__stars { display: flex; gap: 0.15rem; margin-bottom: 1rem; color: var(--yellow-400); }
.review__stars svg { width: 1.1rem; height: 1.1rem; }

/* Cortado em 2 linhas; a classe is-expanded solta o limite. */
.review__text {
  color: var(--gray-700);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review.is-expanded .review__text {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

/* Nasce oculto: o JS mede o corte e só mostra onde o texto foi cortado. */
.review__more {
  display: none;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--brand-red);
}
.review__more.is-visible { display: inline-flex; }
.review__more svg { width: 1rem; height: 1rem; transition: transform var(--transition); }
.review.is-expanded .review__more svg { transform: rotate(180deg); }

/* margin-top: auto empurra o autor para a base, alinhando os cartões da linha */
.review__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.5rem;
}

.review__avatar {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: var(--radius-full);
  background-image: var(--gradient);
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.review__name { display: block; font-weight: 700; color: var(--brand-black); line-height: 1.3; }
.review__source { display: block; font-size: 0.875rem; color: var(--gray-500); }

.carousel--reviews .carousel__slide { padding: 0.5rem 0.75rem; }

/* ================= 15. S09 — MODALIDADES DE ATENDIMENTO =================
   Fundo grafite como a S05 e a S07. Os convênios são chips translúcidos e o
   atendimento particular ganha um bloco próprio, com borda em degradê.
   ========================================================================= */
.plans {
  padding-block: calc(var(--section-y) * 1.3) var(--section-y);
  background: var(--brand-dark);
}

.plans .section-title { color: var(--white); }
.plans .section-subtitle { color: rgba(255, 255, 255, 0.72); }
.plans .section-rule { background-image: var(--gradient-on-dark); }

.plans__label {
  max-width: 68rem;
  margin: 0 auto 1.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.plans__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 68rem;
  margin-inline: auto;
}

.plan {
  padding: 1rem 1.25rem;
  text-align: center;
  font-weight: 600;
  color: var(--white);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  transition: background-color var(--transition), border-color var(--transition);
}
.plan:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); }

/* Borda em degradê pelo truque das duas camadas de fundo (padding-box para o
   interior, border-box para a borda), que preserva o border-radius. */
.plans__private {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 68rem;
  margin: 2.5rem auto 0;
  padding: 1.75rem 2rem;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(var(--brand-dark), var(--brand-dark)) padding-box,
    var(--gradient-on-dark) border-box;
}

.plans__private-text { flex: 1 1 22rem; }
.plans__private h3 { font-size: 1.25rem; color: var(--white); margin-bottom: 0.4rem; }
.plans__private p { color: rgba(255, 255, 255, 0.72); line-height: 1.65; }

/* ================= 16. S10 — PERGUNTAS FREQUENTES =================
   O accordion é compartilhado: as páginas de especialidade usam o mesmo
   componente na seção de FAQ delas.
   ========================================================================= */
.faq {
  padding-block: calc(var(--section-y) * 1.3) var(--section-y);
  background: var(--gray-50);
}

/* Cada pergunta é um cartão próprio, no lugar de uma lista com divisórias. */
.accordion { display: grid; gap: 1rem; max-width: 56rem; margin-inline: auto; }

.accordion__item {
  background: var(--white);
  border: 1px solid rgba(28, 26, 26, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow var(--transition);
}
.accordion__item:hover { box-shadow: var(--shadow-lg); }

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.5rem 1.75rem;
  text-align: left;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--brand-black);
}

.accordion__chevron {
  width: 1.25rem; height: 1.25rem;
  flex-shrink: 0;
  color: var(--brand-red);
  transition: transform var(--transition);
}
.accordion__trigger[aria-expanded="true"] .accordion__chevron { transform: rotate(180deg); }

.accordion__panel { overflow: hidden; }
.accordion__panel[hidden] { display: none; }

/* O padding lateral acompanha o do gatilho para o texto alinhar com a pergunta. */
.accordion__panel p {
  padding: 0 1.75rem 1.5rem;
  color: var(--gray-600);
  line-height: 1.8;
}

/* ================= 17. S11 — ACESSIBILIDADE =================
   Fundo grafite. Vem logo antes do rodapé, que usa a mesma cor — por isso
   a seção fecha com uma linha sutil, para as duas não virarem um bloco só.
   ========================================================================= */
.access {
  padding-block: calc(var(--section-y) * 1.3) var(--section-y);
  background: var(--brand-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Foto | texto | foto. O texto ocupa o dobro de cada foto. */
.access__grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

.access__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.access .section-head { margin-bottom: 2.5rem; }
.access .section-title { color: var(--white); }
.access .section-subtitle { color: rgba(255, 255, 255, 0.72); }
.access .section-rule { background-image: var(--gradient-on-dark); }

.access__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.access__item {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.5rem;
  font-weight: 600;
  color: var(--white);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
}
.access__item svg { width: 1.35rem; height: 1.35rem; color: #e9a03a; }

/* ================= 18. S12 — ONDE ESTAMOS =================
   Dados de contato à esquerda, mapa à direita. O iframe usa a proporção
   fixa para não colapsar (iframe sem altura vira 150px por padrão).
   ========================================================================= */
.visit {
  padding-block: calc(var(--section-y) * 1.3) var(--section-y);
  background: var(--gray-50);
}

.visit__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 3.5rem;
  align-items: center;
}

.visit__info { min-width: 0; }
.visit__list { display: grid; gap: 1.5rem; margin: 2rem 0; }

.visit__item { display: flex; gap: 1rem; }

.visit__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: var(--radius-full);
  background: rgba(184, 26, 10, 0.08);
  color: var(--brand-red);
}
.visit__icon svg { width: 1.2rem; height: 1.2rem; }

.visit__label {
  display: block;
  font-weight: 700;
  color: var(--brand-black);
  margin-bottom: 0.15rem;
}
.visit__item span span,
.visit__item a { color: var(--gray-600); line-height: 1.65; }
.visit__item a { text-decoration: underline; text-underline-offset: 3px; }
.visit__item a:hover { color: var(--brand-red); }

.visit__map {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.visit__map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
}

/* ================= 19. S13 — RODAPÉ =================
   Estrutura no estilo do site da Miers: quatro colunas
   (marca | Contato | Horário | Agendamento) sobre o grafite das seções,
   ícones no tom do degradê e linha inferior com copyright e crédito.
   ========================================================================= */
.footer {
  background: var(--brand-dark);
  color: rgba(255, 255, 255, 0.8);
  padding-block: 4rem 2rem;
  font-size: 0.94rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1.15fr 0.85fr 1fr;
  gap: 2.75rem;
  padding-bottom: 3rem;
}

/* As colunas de Horário e Agendamento têm a mesma estrutura (título + duas
   linhas), então os botões se alinham só com uma margem igual nos dois. */
.footer__grid > div { display: flex; flex-direction: column; align-items: flex-start; }
.footer__grid > div > .btn { margin-top: 1.5rem; }

.footer h3 {
  color: var(--white);
  font-size: 1.15rem;
  padding-bottom: 0.6rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  width: 100%;
}

.footer__logo { display: block; height: 47px; width: auto; }
.footer__about { margin-top: 1.25rem; line-height: 1.7; }
.footer__address {
  display: flex;
  gap: 0.7rem;
  margin-top: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
}
.footer__address svg {
  width: 18px; height: 18px;
  flex: 0 0 auto; margin-top: 5px;
  color: #e9a03a;                      /* mesmo tom dos ícones do Contato */
}
.footer a:hover { color: var(--white); text-decoration: underline; }

/* Lista de contato: ícone no tom oliva + texto */
.footer__contact { display: grid; gap: 0.7rem; }
.footer__contact li { display: flex; gap: 0.7rem; align-items: flex-start; }
.footer__contact svg {
  width: 18px; height: 18px;
  flex: 0 0 auto; margin-top: 3px;
  color: #e9a03a;                      /* tom do degradê legível no escuro */
}

/* Etiqueta abaixo do número (WhatsApp e telefone) */
.footer__contact small {
  display: block;
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* Empilhado (dia acima, horário abaixo) para caber na largura da coluna.
   Sem margem própria: o respiro vem do margin-bottom do <h3>, o que deixa
   os botões das colunas 3 e 4 na mesma linha. */
.footer__hours { display: grid; gap: 0.75rem; }
.footer__hours div { display: flex; flex-direction: column; gap: 0.1rem; }
.footer__hours dt { color: rgba(255, 255, 255, 0.6); font-size: 0.86rem; }
.footer__hours dd { color: var(--white); line-height: 1.5; }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 1.75rem;
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  font-size: 0.85rem; color: rgba(255, 255, 255, 0.6);
}

.footer__credit a { font-weight: 700; }
.footer__credit a:hover { text-decoration: underline; }

/* ================= 20. S14 — BOTÃO FLUTUANTE DO WHATSAPP ================= */
.wa-float {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 50;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  background-image: var(--gradient);
  color: var(--white);
  box-shadow: 0 8px 22px var(--grad-shadow-strong);
  transition: transform var(--transition), box-shadow var(--transition),
              filter var(--transition);
}
.wa-float:hover {
  filter: brightness(1.08);
  transform: scale(1.08);
  box-shadow: 0 12px 28px var(--grad-shadow-strong);
}
.wa-float svg { width: 1.75rem; height: 1.75rem; }

/* =========================================================================
   23. PÁGINAS INTERNAS (especialidades)
   Componentes usados só em implantes / invisalign / odontopediatria /
   sisos / harmonizacao-facial.
   -------------------------------------------------------------------------
   18.1 Navbar invertida        18.4 Nossa História (card de números)
   18.1 Hero interno            18.5 Especialista
   18.2 Galeria de resultados
   18.3 Como Funciona
   ========================================================================= */

/* ---------- 18.1 Hero interno ---------- */
.hero--inner { min-height: auto; padding-block: calc(var(--header-h) + 2rem) 4rem; }
.hero--inner .hero__bg { border-radius: 0; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 0.875rem;
  font-weight: 500;
}
.hero__badge svg { width: 1rem; height: 1rem; }

.hero--inner .hero__title { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800; }
.hero--inner .hero__subtitle { color: rgba(255, 255, 255, 0.9); }

.hero__media--single { flex: 0 0 40%; }

.hero__figure { position: relative; width: 100%; max-width: 28rem; margin-inline: auto; }

.hero__frame {
  border: 8px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.hero__frame .ph { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); }
.hero__frame .ph::after { color: rgba(255, 255, 255, 0.8); background: transparent; }

/* Card flutuante no canto inferior esquerdo da foto */
.hero__tag {
  position: absolute;
  left: -1.5rem;
  bottom: -1.5rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 11rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-xl);
}
.hero__tag p { color: var(--white); font-size: 0.875rem; font-weight: 500; }
.hero__tag-icon {
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.2);
  color: #f87171;
  flex-shrink: 0;
}
.hero__tag-icon svg { width: 1.25rem; height: 1.25rem; }

/* ---------- 18.2 Galeria de resultados ---------- */
.photos { padding-block: var(--section-y); background: var(--gray-50); }
.photos .carousel__slide { padding: 0 0.5rem; }
.photos .ph { border-radius: var(--radius-sm); box-shadow: var(--shadow); }

.ph--9x16 { aspect-ratio: 9 / 16; }

/* Setas abaixo do carrossel, centralizadas */
.carousel__nav { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; }
.carousel__arrow--static { position: static; transform: none; }

/* ---------- 18.3 Como Funciona ----------
   Os cartões `.card` vinham da seção de Tratamentos da home, que foi
   removida. Agora só as páginas internas usam, então a regra mora aqui. */
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition);
}
.card:hover { transform: scale(1.05); }

.card--featured { background: var(--brand-primary); color: var(--white); }

.card__icon { margin-bottom: 0.75rem; color: var(--brand-accent); }
.card__icon svg { width: 2.5rem; height: 2.5rem; }

.card__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand-primary);
  margin-bottom: 0.5rem;
}
.card--featured .card__title { color: var(--white); }

.card__text { color: var(--gray-600); }
.card--featured .card__text { color: rgba(255, 255, 255, 0.9); }

.process { padding-block: var(--section-y); background: var(--white); }

.process__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  align-items: stretch;
}
.process__grid .card { height: 100%; min-height: 0; padding: 1.5rem; }

.card__title--sm { font-size: 1.25rem; }

.process__cta {
  max-width: 48rem;
  margin: 4rem auto 0;
  padding: 2.5rem 2rem;
  text-align: center;
  border-radius: var(--radius-lg);
  color: var(--white);
  background: linear-gradient(to bottom right, var(--brand-primary), rgba(0, 34, 87, 0.8));
  box-shadow: var(--shadow-xl);
}
.process__cta h3 { font-size: clamp(1.5rem, 3vw, 1.875rem); margin-bottom: 1rem; }
.process__cta p { font-size: 1.125rem; color: rgba(255, 255, 255, 0.9); margin-bottom: 1.5rem; }

/* ---------- 18.4 Nossa História (páginas internas) ---------- */
.about--inner { background: var(--white); padding-block: var(--section-y); }
.about--inner .section-head { margin-bottom: 3rem; }
.section-note { margin-top: 1rem; color: var(--gray-500); font-style: italic; }

.about__grid--inner { grid-template-columns: 3fr 2fr; align-items: center; }
.about__grid--inner .about__text p { font-size: 1.125rem; line-height: 1.8; }

/* Card de números (só na página de implantes) */
.stats-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 2rem;
  overflow: hidden;
  text-align: center;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  transition: transform var(--transition);
}
.stats-card:hover { transform: scale(1.03); }

.stats-card::before,
.stats-card::after {
  content: '';
  position: absolute;
  border-radius: var(--radius-full);
  opacity: 0.1;
}
.stats-card::before { top: -3rem; right: -3rem; width: 8rem; height: 8rem; background: var(--brand-primary); }
.stats-card::after { bottom: -3rem; left: -3rem; width: 6rem; height: 6rem; background: #67e8f9; }

.stats-card > * { position: relative; z-index: 1; }
.stats-card__logo { height: 41px; width: auto; }
.stats-card__title { font-size: 1.875rem; color: var(--brand-primary); }
.stats-card__row { display: flex; align-items: center; gap: 1rem; }
.stats-card__rule { width: 3rem; height: 4px; border-radius: var(--radius-full); background: var(--brand-accent); }
.stats-card__number {
  display: grid;
  place-items: center;
  width: 5rem; height: 5rem;
  border-radius: var(--radius-full);
  background: var(--brand-accent);
  color: var(--white);
  font-size: 2.25rem; font-weight: 700;
}
.stats-card__label { font-size: 1.125rem; font-weight: 500; color: var(--brand-primary); }
.stats-card__foot {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; color: var(--gray-500);
}
.stats-card__foot svg { width: 1rem; height: 1rem; }

/* ---------- 18.5 Especialista ---------- */
.specialist { padding-block: var(--section-y); background: var(--gray-50); }

.specialist__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 60rem;
  margin-inline: auto;
  overflow: hidden;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.specialist__media .ph { height: 100%; border: 0; border-radius: 0; aspect-ratio: auto; min-height: 22rem; }
.specialist__body { padding: 2.5rem; }
.specialist__name { font-size: 1.5rem; color: var(--brand-primary); margin-bottom: 1.5rem; }
.specialist__text { display: grid; gap: 1.5rem; color: var(--gray-600); font-size: 1.0625rem; line-height: 1.8; }
.specialist__text strong { color: var(--brand-primary); font-weight: 600; }

/* ================= 21. ANIMAÇÕES ================= */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .carousel__track { transition: none; }
}

/* ================= 22. RESPONSIVO ================= */
@media (max-width: 1360px) {
  .navbar .container { gap: 1rem; }
  .logo__img { height: 43px; }
  .nav-links { gap: 0.1rem; }
  .nav-links > a,
  .dropdown__trigger { padding: 0.55rem 0.55rem; font-size: 0.88rem; }
  .nav-cta .btn { padding: 0.65rem 1rem; font-size: 0.86rem; }
}

@media (max-width: 1024px) {
  .process__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 2 por linha: sobra o 11º, que fica centrado sozinho */
  .checkups__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* As fotos passam para baixo do texto, lado a lado */
  .access__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .access__content { grid-column: 1 / -1; }
  .access__img { aspect-ratio: 3 / 2; }
  .exams__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .exam:nth-child(10) { grid-column: span 2; }
  .exam:nth-child(11) { grid-column: 2 / span 2; }
  .team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }

  /* 2 por linha: o 5º cartão fica centrado sozinho */
  .reasons__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .reason:nth-child(4) { grid-column: span 2; }
  .reason:nth-child(5) { grid-column: 2 / span 2; }
}

@media (max-width: 1080px) {
  .nav-links,
  .nav-cta { display: none; }
  .nav-toggle { display: grid; }
  .logo__img { height: 49px; }
}

@media (max-width: 900px) {
  .hero { min-height: auto; padding-bottom: 3rem; }
  .hero__inner { flex-direction: column; align-items: stretch; }

  .about__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .about__grid--inner { grid-template-columns: minmax(0, 1fr); }

  .about-b__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .about-b__photos { display: grid; gap: 1rem; padding-bottom: 0; }
  .about-b__photo--fundo { width: 100%; }
  .about-b__photo--frente { position: static; width: 100%; border: 0; }
  .about__aside { order: -1; }

  .hero--inner { padding-block: calc(var(--header-h) + 1.5rem) 3rem; }
  .hero__media--single { flex: 1 1 auto; }
  .hero__figure { max-width: 22rem; }
  .hero__tag { left: -0.5rem; bottom: -1rem; }

  .specialist__card { grid-template-columns: minmax(0, 1fr); }
  .specialist__media .ph { min-height: 18rem; aspect-ratio: 4 / 3; }
}

@media (max-width: 720px) {
  :root { --section-y: 3.5rem; --header-h: 72px; }

  .logo__img { height: 40px; }
  .mobile-menu .logo__img { height: 39px; }
  .footer__logo { height: 41px; }

  .section-head { margin-bottom: 2.5rem; }
  .process__grid { grid-template-columns: minmax(0, 1fr); }

  .reasons__grid { grid-template-columns: minmax(0, 1fr); }
  .reason,
  .reason:nth-child(4),
  .reason:nth-child(5) { grid-column: 1 / -1; }
  .checkups__grid { grid-template-columns: minmax(0, 1fr); }
  .plans__grid { grid-template-columns: minmax(0, 1fr); }
  .access__grid { grid-template-columns: minmax(0, 1fr); }
  .visit__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .exams__grid { grid-template-columns: minmax(0, 1fr); }
  .exam,
  .exam:nth-child(10),
  .exam:nth-child(11) { grid-column: 1 / -1; }
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .specialist__body { padding: 1.75rem; }
  .process__cta { padding: 2rem 1.5rem; margin-top: 2.5rem; }

  .carousel__arrow--prev { left: 0; }
  .carousel__arrow--next { right: 0; }

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

@media (max-width: 480px) {
  .team__grid { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 1.5rem; }
  .review { padding: 1.5rem; }
}

/* ---------- 22.7 Páginas de especialidade (cardiologia e afins) ----------
   Hero reduzido (só selo e nome) e blocos de texto corrido, um claro e um
   escuro, alternando como na home.
   ------------------------------------------------------------------------ */
.hero--simples { min-height: 0; padding-block: calc(var(--header-h) + 4rem) 4rem; }
.hero--simples .hero__title { margin-bottom: 0; }

/* Com só o selo e o nome, o conteúdo fica centrado — o .hero__content
   padrão alinha à esquerda. */
.hero--simples .hero__inner { justify-content: center; }
.hero--simples .hero__content {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

.espec { padding-block: calc(var(--section-y) * 1.3) var(--section-y); background: var(--gray-50); }
.espec--escura { background: var(--brand-dark); }

.espec__bloco { max-width: 46rem; }
.espec__bloco--centro { margin-inline: auto; text-align: center; }
.espec__bloco--centro .section-rule { margin-inline: auto; }
.espec__bloco p { color: var(--gray-700); font-size: 1.0625rem; line-height: 1.85; }
.espec__bloco .section-rule { margin-bottom: 2rem; }

.espec--escura .section-title { color: var(--white); }
.espec--escura .section-rule { background-image: var(--gradient-on-dark); }
.espec--escura .espec__bloco p { color: rgba(255, 255, 255, 0.75); }

/* A seção de equipe aqui é clara, ao contrário da home. */
/* A seção "Quando procurar" aqui é clara (na home é grafite). */
.reasons--clara { background: var(--gray-50); }
.reasons--clara .section-title { color: var(--brand-black); }
.reasons--clara .section-subtitle { color: var(--gray-600); }
.reasons--clara .section-rule { background-image: var(--gradient-on-light); }
.reasons--clara .reason { border: 1px solid rgba(28, 26, 26, 0.08); box-shadow: var(--shadow); }
.reasons--clara .reason:hover { box-shadow: var(--shadow-lg); }

/* São 6 cartões, não 5: a grade preenche 3 + 3 e não precisa centralizar
   os últimos, como faz a versão da home. */
.reasons__grid--par .reason:nth-child(4),
.reasons__grid--par .reason:nth-child(5) { grid-column: span 2; }

/* E os check-ups aqui são escuros (na home são claros). */
.checkups--escura { background: var(--brand-dark); }
.checkups--escura .section-title { color: var(--white); }
.checkups--escura .section-subtitle { color: rgba(255, 255, 255, 0.72); }
.checkups--escura .section-rule { background-image: var(--gradient-on-dark); }

/* Quando a especialidade tem um profissional só, o cartão fica centrado e
   com largura de coluna única — senão ele esticaria por um terço da grade. */
.team__grid--solo { grid-template-columns: minmax(0, 20rem); justify-content: center; }

.team--clara { background: var(--gray-50); }
.team--clara .section-title { color: var(--brand-black); }
.team--clara .pro { box-shadow: var(--shadow); border: 1px solid rgba(28, 26, 26, 0.08); }
.team--clara .pro:hover { box-shadow: var(--shadow-lg); }

.espec__cta { margin-top: 3rem; text-align: center; }

/* ---------- 22.8 Página de exames (exames.html) ----------
   Hero reduzido com texto de apoio e, abaixo, um cartão por exame: nome à
   esquerda (centralizado na altura do cartão) e explicação à direita,
   empilhando no celular.
   ------------------------------------------------------------------------ */
.hero--simples .hero__subtitle { margin: 1.25rem auto 0; }
/* "Conheça nossos exames" não cabe nos 42rem padrão e deixava "exames"
   sozinho na segunda linha. Nas especialidades (uma palavra) não muda nada. */
.hero--simples .hero__content { max-width: 50rem; }

.exames-lista { padding-block: calc(var(--section-y) * 1.3) var(--section-y); background: var(--gray-50); }
.exames-lista .section-title { color: var(--brand-black); }
.exames-lista .section-subtitle { color: var(--gray-600); }
.exames-lista .section-rule { background-image: var(--gradient-on-light); }

.exames-lista__itens {
  display: grid;
  gap: 1rem;
  max-width: 64rem;
  margin-inline: auto;
}

.exame-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
  gap: 1rem 3rem;
  padding: 2rem 2.25rem;
  background: var(--white);
  border: 1px solid rgba(28, 26, 26, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  /* Âncoras (#mapa, #holter…) não ficam escondidas atrás da navbar fixa. */
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

/* Traço em degradê à esquerda do nome, como nos cartões de exame da home. */
.exame-item__head { position: relative; align-self: center; padding-left: 1.125rem; }
.exame-item__mark {
  position: absolute;
  top: 0.2rem;
  bottom: 0.2rem;
  left: 0;
  width: 3px;
  border-radius: var(--radius-full);
  background-image: var(--gradient-on-light);
}

.exame-item__name {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--brand-black);
}

.exame-item__ext {
  margin-top: 0.35rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--gray-500);
}

.exame-item__body p {
  color: var(--gray-700);
  font-size: 1.0625rem;
  line-height: 1.8;
}
.exame-item__body p + p { margin-top: 0.75rem; }

/* Vermelho da marca sobre branco: 6,6:1. */
.exame-item__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--brand-red);
}
.exame-item__link svg { width: 1rem; height: 1rem; transition: transform var(--transition); }
.exame-item__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.exame-item__link:hover svg { transform: translateX(3px); }

@media (max-width: 720px) {
  .exame-item { grid-template-columns: minmax(0, 1fr); padding: 1.5rem 1.25rem; }
  .exame-item__name { font-size: 1.125rem; }
  .exame-item__body p { font-size: 1rem; }
}

/* Link secundário "Ver todos os exames", ao lado do botão na home. */
.exams__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

/* =========================================================================
   24. PÁGINAS DE APOIO (política de privacidade e 404)
   ========================================================================= */

/* ---------- Política de privacidade ---------- */
.legal { padding-top: var(--header-h); }

.legal__head {
  padding-block: 3rem;
  text-align: center;
  color: var(--white);
  background: linear-gradient(to bottom right, var(--brand-primary), var(--brand-primary-dark));
}
.legal__head h1 { font-size: clamp(1.875rem, 4vw, 2.5rem); margin-bottom: 0.5rem; }
.legal__brand { color: rgba(255, 255, 255, 0.85); }

.legal__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}
.legal__badge {
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--brand-accent);
  color: var(--white);
  font-weight: 600;
}

.legal__body { max-width: 56rem; padding-block: 3rem 4rem; }

.legal__section { margin-bottom: 3rem; }
.legal__section h2 {
  font-size: 1.5rem;
  color: var(--brand-primary);
  padding-bottom: 0.6rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--gray-200);
}
.legal__section h3 { font-size: 1.0625rem; color: var(--brand-primary); margin-bottom: 0.75rem; }
.legal__section p { color: var(--gray-700); line-height: 1.8; margin-bottom: 1rem; }

/* Destaque do parágrafo sobre a LGPD */
.callout {
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--brand-accent);
  border-radius: var(--radius-sm);
  background: var(--gray-50);
}

.legal__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-block: 1.5rem;
}
.legal__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.legal__box {
  padding: 1.25rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--gray-50);
}
.legal__box p { margin-bottom: 0; font-size: 0.9375rem; }
.legal__box ul { display: grid; gap: 0.4rem; color: var(--gray-700); font-size: 0.9375rem; }
.legal__box li::before { content: '• '; color: var(--brand-accent); font-weight: 700; }

/* ---------- Página 404 ---------- */
.notfound {
  display: grid;
  place-items: center;
  min-height: 70vh;
  padding-block: calc(var(--header-h) + 3rem) 4rem;
  background: var(--gray-50);
}

.notfound__inner { max-width: 40rem; text-align: center; }

.notfound__code {
  font-size: clamp(4rem, 14vw, 7rem);
  font-weight: 800;
  line-height: 1;
  color: var(--brand-accent);
}
.notfound__title { font-size: clamp(1.5rem, 4vw, 2rem); color: var(--brand-primary); margin-block: 0.5rem 1rem; }
.notfound__text { color: var(--gray-600); margin-bottom: 2rem; line-height: 1.8; }

.notfound__links { margin-top: 3rem; }
.notfound__links p { font-size: 0.9375rem; color: var(--gray-500); margin-bottom: 1rem; }
.notfound__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }

@media (max-width: 720px) {
  .legal__cols,
  .legal__cols--3 { grid-template-columns: minmax(0, 1fr); }
}