/* ==========================================================================
   FISIOPRIME · Exame de Baropodometria
   style.css — folha de estilo única
   --------------------------------------------------------------------------
   Sumário
   01. Tokens de design
   02. Reset e base
   03. Tipografia
   04. Layout / containers
   05. Botões
   06. Selos e pílulas
   07. Cabeçalho fixo
   08. Hero
   09. Barra de confiança
   10. Regiões de dor
   11. Citações e blocos escuros
   12. Passos (como funciona)
   13. Vídeos
   14. O que analisamos
   15. Indicações
   16. Equipe
   17. Por que Fisioprime
   18. FAQ
   19. Localização
   20. CTA final
   21. Rodapé
   22. Botão flutuante WhatsApp
   23. Animações de entrada
   24. Responsivo
   25. Acessibilidade e impressão
   ========================================================================== */

/* ==========================================================================
   01. TOKENS DE DESIGN
   ========================================================================== */
:root {
  /* Cores */
  --petrol: #123845;
  --petrol-dark: #0f2731;
  --institutional: #36505e;
  --gold: #c8a56a;
  --gold-soft: #e0c896;
  --gold-deep: #b08d53;
  --off-white: #f7f4ef;
  --card: #fffdf8;
  --fg: #243842;
  --muted: #efeae2;

  /* Derivadas */
  --fg-85: rgba(36, 56, 66, 0.85);
  --fg-80: rgba(36, 56, 66, 0.8);
  --fg-75: rgba(36, 56, 66, 0.75);
  --fg-70: rgba(36, 56, 66, 0.7);
  --gold-60: rgba(200, 165, 106, 0.6);
  --gold-35: rgba(200, 165, 106, 0.35);
  --gold-25: rgba(200, 165, 106, 0.25);
  --gold-20: rgba(200, 165, 106, 0.2);

  /* Gradientes e sombras */
  --gradient-gold: linear-gradient(135deg, #e0c896 0%, #c8a56a 55%, #b08d53 100%);
  --shadow-soft: 0 4px 20px -8px rgba(15, 39, 49, 0.55);
  --shadow-gold: 0 12px 40px -12px rgba(200, 165, 106, 0.75);
  --shadow-header: 0 2px 24px -12px rgba(15, 39, 49, 0.4);

  /* Tipografia */
  --font-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Métricas */
  --container: 1240px;
  --gutter: 2.5rem;
  /* Subiu de 96px para acomodar o logo dobrado (72px) sem sufocá-lo. */
  --header-h: 108px;
  --radius-sm: 0.75rem;
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --section-y: 5.5rem;

  /* Transições */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ==========================================================================
   02. RESET E BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--off-white);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

img { height: auto; }

ul { list-style: none; margin: 0; padding: 0; }

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

hr { border: 0; margin: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Pula para o conteúdo — leitores de tela */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--petrol-dark);
  color: #fff;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   03. TIPOGRAFIA
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
}

p { margin: 0; }

strong { font-weight: 600; }

.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.h1 {
  font-size: clamp(2.05rem, 5.4vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.h2 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.1;
}

.h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.3;
}

.lead {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.7;
  color: var(--fg-80);
  margin-top: 1rem;
}

.section-intro { max-width: 42rem; }

/* Blocos sobre fundo escuro */
.on-dark { color: rgba(247, 244, 239, 0.85); }
.on-dark h1,
.on-dark h2,
.on-dark h3 { color: #fff; }
.on-dark .lead { color: rgba(255, 255, 255, 0.85); }

/* ==========================================================================
   04. LAYOUT / CONTAINERS
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: 3rem; }
.section--slim { padding-block: 1.25rem; }

.section--white {
  background: rgba(255, 255, 255, 0.7);
  border-block: 1px solid var(--gold-20);
}

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

.split--reverse > *:first-child { order: 2; }

/* Moldura de imagem */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(200, 165, 106, 0.3);
  box-shadow: var(--shadow-soft);
  background: #171717;
  /* A moldura reage ao mouse junto com a foto: sobe 4px, a sombra fica mais
     funda e a borda dourada mais viva. Dá a sensação de o cartão levantar. */
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease),
              border-color 0.45s var(--ease);
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A foto aproxima devagar e volta ao sair. Mesma duração e curva já usadas
     nos cards e nas regiões do corpo, para o site reagir igual em tudo.
     O overflow:hidden acima recorta o excedente, então o zoom não invade
     o layout ao redor. */
  transition: transform 0.7s var(--ease);
}
.frame:hover { transform: translateY(-4px); }
.frame:hover img { transform: scale(1.06); }

/* Em tela de toque o :hover "cola" depois do toque e a imagem ficaria
   ampliada para sempre. Por isso o efeito é só para quem tem mouse. */
@media (hover: hover) and (pointer: fine) {
  .frame:hover {
    border-color: var(--gold-60);
    box-shadow: 0 22px 50px -18px rgba(15, 39, 49, 0.45);
  }
}
@media (hover: none) {
  .frame:hover { transform: none; }
  .frame:hover img { transform: none; }
}

.frame--45 { aspect-ratio: 4 / 5; }
.frame--43 { aspect-ratio: 4 / 3; }
.frame--54 { aspect-ratio: 5 / 4; }

/* Brilho dourado atrás da moldura */
.frame-glow { position: relative; }
.frame-glow::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 2.25rem;
  background: linear-gradient(to top right, rgba(200, 165, 106, 0.25), transparent);
  filter: blur(32px);
  pointer-events: none;
}
.frame-glow > .frame { position: relative; z-index: 1; }

/* ==========================================================================
   05. BOTÕES
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 2rem;
  border-radius: 999px;
  background: var(--gradient-gold);
  color: var(--petrol-dark);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  box-shadow: var(--shadow-gold);
  transition: transform 0.35s var(--ease), box-shadow 0.35s, filter 0.35s;
}

.btn:hover,
.btn:focus-visible {
  filter: brightness(1.04);
  transform: translateY(-2px);
  box-shadow: 0 18px 50px -16px rgba(200, 165, 106, 0.6);
}

.btn:active { transform: translateY(0); }

.btn svg { flex: 0 0 auto; }
.btn--lg { padding: 1.05rem 2.25rem; font-size: 1.0625rem; }
.btn--sm { padding: 0.8rem 1.4rem; font-size: 0.8125rem; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.75rem;
  border-radius: 999px;
  border: 1px solid rgba(200, 165, 106, 0.55);
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all 0.35s;
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background: rgba(200, 165, 106, 0.1);
  border-color: var(--gold);
  color: var(--gold-soft);
}

.btn-note {
  font-size: 0.75rem;
  color: var(--fg-70);
}
.on-dark .btn-note { color: rgba(255, 255, 255, 0.7); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
  margin-top: 1.75rem;
}

/* Variação centralizada, usada no fim de "Como funciona". O justify-content
   centra na horizontal; a margem maior no topo separa o botão do último passo. */
.cta-row--center {
  justify-content: center;
  margin-top: 3.25rem;
}

.cta-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

/* ==========================================================================
   06. SELOS E PÍLULAS
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(200, 165, 106, 0.5);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--petrol);
}

.pill {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 1.25rem;
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(18, 56, 69, 0.08);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--petrol);
}
.pill svg { flex: 0 0 auto; margin-top: 2px; color: var(--gold); }

/* ==========================================================================
   07. CABEÇALHO FIXO
   ========================================================================== */
.header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  background: rgba(247, 244, 239, 0);
  transition: background 0.4s, box-shadow 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}

/* Estado "rolado" — aplicado via JS */
.header.is-scrolled {
  background: rgba(247, 244, 239, 0.92);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--gold-20);
  box-shadow: var(--shadow-header);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
}

/* Logo com o dobro da altura de antes (era 36px). O arquivo é WebP de 480x210,
   ou seja ~2,9x a altura exibida — fica nítido em tela retina. */
.header__logo img {
  height: 72px;
  width: auto;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-left: auto;
}

.header__nav a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg-80);
  position: relative;
  padding-block: 4px;
  transition: color 0.25s;
}

.header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s var(--ease);
}

.header__nav a:hover { color: var(--petrol); }
.header__nav a:hover::after,
.header__nav a.is-active::after { width: 100%; }
.header__nav a.is-active { color: var(--petrol); }

/* Botão hambúrguer */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--gold-25);
}
.nav-toggle span {
  position: relative;
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--petrol);
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: var(--petrol);
  transition: transform 0.3s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* Menu mobile */
.mobile-menu {
  position: fixed;
  /* Cobre toda a tela abaixo do cabeçalho. Se o painel terminasse na altura
     do conteúdo, o botão dourado do hero apareceria logo abaixo da borda e
     pareceria um botão duplicado/cortado. */
  inset: var(--header-h) 0 0 0;
  z-index: 99;
  background: var(--off-white);
  border-bottom: 1px solid var(--gold-20);
  padding: 1.5rem var(--gutter) 2rem;
  display: grid;
  align-content: start;
  gap: 0.25rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.35s var(--ease), opacity 0.3s, visibility 0.3s;
}

.mobile-menu.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.mobile-menu a {
  padding: 14px 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--fg);
  border-bottom: 1px solid var(--gold-20);
}
.mobile-menu a:last-of-type { border-bottom: 0; }
.mobile-menu .btn { margin-top: 1rem; }

/* Trava o scroll do body com o menu aberto */
body.nav-open { overflow: hidden; }

/* ==========================================================================
   08. HERO
   ========================================================================== */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + 2.5rem);
  padding-bottom: 5rem;
  overflow: hidden;
}

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

/* Vídeo no hero, dentro da mesma moldura que antes tinha a foto.
   A moldura passa a 9/16 porque o vídeo é vertical: no 4/5 original sobrariam
   faixas escuras nas laterais. O max-width evita que a coluna fique altíssima
   no desktop — 9:16 em 552px de largura daria quase mil pixels de altura. */
.frame--video {
  aspect-ratio: 9 / 16;
  max-width: 23rem;
  margin-inline: auto;
}
.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  /* contain para não recortar as legendas gravadas no vídeo */
  object-fit: contain;
  background: #111;
}
/* A moldura do vídeo não levanta no hover: ela tem controles de player, e
   mover o alvo embaixo do cursor atrapalha quem vai clicar no play. */
.frame--video:hover { transform: none; }

.hero__title { margin-top: 1.5rem; }
.hero__sub {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.65;
  color: var(--fg-85);
  margin-top: 1.25rem;
}

/* ==========================================================================
   09. BARRA DE CONFIANÇA
   ========================================================================== */
.trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.125rem;
}
.trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg-85);
  line-height: 1.35;
}
.trust svg { flex: 0 0 auto; color: var(--gold); }

/* ==========================================================================
   10. REGIÕES DE DOR
   ========================================================================== */
.regions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.25rem;
}
.region {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--gold-25);
  background: rgba(18, 56, 69, 0.05);
}
.region__media { aspect-ratio: 4 / 5; overflow: hidden; }
.region img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.region:hover img { transform: scale(1.05); }
.region__label {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  color: #fff;
}

/* ==========================================================================
   11. CITAÇÕES E BLOCOS ESCUROS
   ========================================================================== */
.quote {
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
}
.rule {
  width: 48px;
  height: 1px;
  background: var(--gold-60);
  margin-inline: auto;
}
.quote__text {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.2vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-top: 1.75rem;
}

.section--dark {
  position: relative;
  overflow: hidden;
  background: var(--petrol-dark);
}
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background:
    radial-gradient(circle at 20% 30%, var(--gold) 0, transparent 45%),
    radial-gradient(circle at 80% 70%, var(--gold) 0, transparent 45%);
  pointer-events: none;
}
.section--dark > .container { position: relative; z-index: 1; }

/* ==========================================================================
   12. PASSOS (COMO FUNCIONA)
   ========================================================================== */
.steps { display: grid; gap: 3.25rem; margin-top: 3rem; }

/* Imagens com metade da largura de antes.
   Antes: 1fr 1fr, ou seja a foto ocupava ~552px no container de 1240px.
   Agora a coluna da foto fica com 1/4 do espaço (~268px), exatamente 50%
   do tamanho anterior. O texto herda a folga. */
.step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: 3rem;
  align-items: center;
}

/* Nos passos pares a foto vai para a direita (layout em zigue-zague).
   Como as colunas têm larguras diferentes, o template também precisa ser
   invertido — senão a foto cairia na coluna larga e ficaria MAIOR que nos
   passos ímpares, em vez de menor. */
.step:nth-child(even) {
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}
.step:nth-child(even) .step__media { order: 2; }

/* A coluna de texto (3fr = ~804px) é bem mais larga que o texto precisa
   (~544px). Nos passos ímpares isso não incomoda: o texto começa logo depois
   da foto e a folga sobra na borda direita da página. Nos pares a foto está
   à direita, então a folga caía ENTRE o texto e a foto — um vão de ~430px,
   contra 48px nos ímpares.
   Limitando a largura do bloco e encostando-o à direita, o vão fica igual
   nos cinco passos e o texto continua alinhado à esquerda (mais legível que
   alinhado à direita). O resultado é o espelho exato dos passos ímpares.

   Só vale de 901px para cima: abaixo disso os passos viram uma coluna só
   (foto em cima, texto embaixo) e empurrar o texto para a direita deixaria
   ele desalinhado da foto. */
@media (min-width: 901px) {
  .step__body { max-width: 34rem; }
  .step:nth-child(even) .step__body { margin-left: auto; }
}

.step__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
  color: rgba(200, 165, 106, 0.45);
}
.step__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.2;
  margin-top: 1.125rem;
}
.step__text {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.7;
  color: var(--fg-75);
  max-width: 28rem;
  margin-top: 0.875rem;
}

/* ==========================================================================
   13. VÍDEOS
   --------------------------------------------------------------------------
   Vídeo vertical 9:16 ao lado do texto. A moldura usa aspect-ratio, então a
   altura é reservada antes de o vídeo carregar e o layout não "pula".
   ========================================================================== */
/* Duas colunas: texto à esquerda, vídeo à direita. A coluna do vídeo é mais
   estreita porque ele é vertical (9:16) — em 1fr 1fr ficaria altíssimo e
   empurraria o texto para longe. O align-items: start alinha os dois pelo
   topo, não pelo centro: o texto é mais alto que o vídeo. */
.split--video {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}
/* A moldura é limitada a 22rem e centralizada na coluna. A legenda precisa da
   MESMA largura e do mesmo centro, senão o título fica deslocado à esquerda,
   fora do alinhamento da borda do vídeo. */
.split--video .video-frame,
.split--video .video-caption { max-width: 22rem; margin-inline: auto; }

/* Parágrafos do corpo do texto desta seção */
.video-body {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--fg-75);
  margin-top: 1.125rem;
  max-width: 34rem;
}

/* Lista de três pontos, com marcador dourado em vez de bolinha */
.video-points {
  list-style: none;
  margin-top: 1.75rem;
  display: grid;
  gap: 0.75rem;
}
.video-points li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fg-85);
}
.video-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--gold);
}

.video-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  /* Raio menor que o das fotos: os controles nativos do player são
     retangulares e ficam esmagados num canto muito arredondado. */
  border-radius: var(--radius-lg);
  border: 1px solid var(--gold-25);
  box-shadow: var(--shadow-soft);
  background: #111;
}

.video-player {
  display: block;
  width: 100%;
  height: 100%;
  /* contain (e não cover) para não recortar as legendas gravadas no vídeo */
  object-fit: contain;
  background: #111;
}

.video-caption { margin-top: 1.25rem; }

.video-text {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--fg-75);
  margin-top: 0.5rem;
}

/* Duração, em pílula discreta */
.video-dur {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--gold-25);
  background: rgba(200, 165, 106, 0.1);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-deep);
  white-space: nowrap;
}

/* ==========================================================================
   14. O QUE ANALISAMOS
   ========================================================================== */
.readings { margin-top: 1.75rem; }
.readings li {
  padding-block: 1.25rem;
  border-top: 1px solid var(--gold-20);
}
.readings li:first-child { border-top: 0; }
.readings__key {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.readings__val {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.4;
  color: var(--fg-85);
  margin-top: 0.375rem;
}

/* ==========================================================================
   15. INDICAÇÕES
   ========================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.25rem;
}
.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gold-25);
  background: var(--card);
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s var(--ease), box-shadow 0.4s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -14px rgba(15, 39, 49, 0.5);
}
.card__media { aspect-ratio: 4 / 3; background: #171717; overflow: hidden; }
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.card:hover .card__media img { transform: scale(1.04); }
.card__body { padding: 1.5rem; }
.card__title {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.35;
}
.card__text {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--fg-75);
  margin-top: 0.75rem;
}

/* ==========================================================================
   16. EQUIPE
   ========================================================================== */
.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.25rem;
}
.team__media {
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gold-25);
  background: #171717;
  aspect-ratio: 3 / 4;
}
.team__media img { width: 100%; height: 100%; object-fit: cover; }
.team__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gold-25);
  background: var(--card);
  padding: 2rem;
}
.team__role {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.375rem;
}
.team__bio {
  line-height: 1.7;
  color: var(--fg-80);
  margin-top: 1.125rem;
}

/* ==========================================================================
   17. POR QUE FISIOPRIME
   ========================================================================== */
.reasons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  margin-top: 2.75rem;
}
.reason {
  border-top: 1px solid var(--gold-35);
  padding-top: 1.25rem;
}
.reason svg { color: var(--gold); }
.reason__title {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.3;
  color: #fff;
  margin-top: 1rem;
}
.reason__text {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 0.5rem;
}

/* ==========================================================================
   18. FAQ
   ========================================================================== */
.faq {
  max-width: 48rem;
  margin-inline: auto;
}
.faq__list {
  margin-top: 2.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gold-25);
  background: var(--card);
  overflow: hidden;
}
.faq__item { border-top: 1px solid var(--gold-20); }
.faq__item:first-child { border-top: 0; }

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.375rem 1.75rem;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  line-height: 1.4;
  color: var(--fg);
  transition: background 0.25s;
}
.faq__trigger:hover { background: rgba(200, 165, 106, 0.06); }

.faq__icon {
  flex: 0 0 auto;
  position: relative;
  width: 18px;
  height: 18px;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--gold);
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease), opacity 0.25s;
}
.faq__icon::before { width: 16px; height: 1.5px; }
.faq__icon::after { width: 1.5px; height: 16px; }

/* Aberto: o "+" vira "−" girando 90° */
.faq__trigger[aria-expanded="true"] .faq__icon::before { transform: translate(-50%, -50%) rotate(180deg); }
.faq__trigger[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

/* Painel com transição de altura — max-height definida via JS */
.faq__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s var(--ease);
}
.faq__panel > p {
  padding: 0 1.75rem 1.5rem;
  color: var(--fg-80);
  line-height: 1.7;
}

/* ==========================================================================
   19. LOCALIZAÇÃO
   ========================================================================== */
.location {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: stretch;
}
.map {
  position: relative;
  min-height: 340px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gold-25);
  box-shadow: var(--shadow-soft);
  background: rgba(18, 56, 69, 0.1);
}
.map iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
}

.contact { margin-top: 1.75rem; }
.contact li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-block: 0.5rem;
  color: var(--fg-85);
}
.contact svg { flex: 0 0 auto; margin-top: 4px; color: var(--gold); }
.contact a { transition: color 0.25s; }
.contact a:hover { color: var(--gold); }

/* ==========================================================================
   20. CTA FINAL
   ========================================================================== */
.cta-final {
  position: relative;
  overflow: hidden;
  padding-block: 7.5rem;
  background: var(--petrol-dark);
  text-align: center;
}
.cta-final__bg {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image: url("../imagens/fisioprime-reabilitacao.jpg");
  background-size: cover;
  background-position: center;
}
.cta-final__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15, 39, 49, 0.8), rgba(15, 39, 49, 0.9) 50%, var(--petrol-dark));
}
.cta-final > .container {
  position: relative;
  z-index: 1;
  max-width: 48rem;
}

/* ==========================================================================
   21. RODAPÉ
   ========================================================================== */
.footer {
  position: relative;
  overflow: hidden;
  background: var(--petrol-dark);
  color: rgba(247, 244, 239, 0.7);
  padding-top: 5rem;
  padding-bottom: 2.5rem;
}
.footer::before {
  content: "";
  position: absolute;
  top: -8rem;
  left: 50%;
  width: 80%;
  height: 16rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(200, 165, 106, 0.1);
  filter: blur(64px);
  pointer-events: none;
}
.footer > .container { position: relative; z-index: 1; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 4rem;
}

/* Também dobrado (era 36px). O filtro deixa o logo branco sobre o fundo
   escuro do rodapé — o arquivo original é verde-petróleo. */
.footer__logo {
  height: 72px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.footer__about {
  max-width: 24rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(247, 244, 239, 0.7);
  margin-top: 1.5rem;
}
.footer__rule {
  width: 64px;
  height: 1px;
  background: var(--gold-60);
  margin-top: 2rem;
}
.footer__motto {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--gold-soft);
  margin-top: 1rem;
}
.footer__head {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.footer__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-block: 0.4375rem;
  font-size: 0.9375rem;
  color: rgba(247, 244, 239, 0.75);
}
.footer__list svg { flex: 0 0 auto; margin-top: 4px; color: var(--gold); }
.footer__list a { transition: color 0.25s; }
.footer__list a:hover { color: var(--gold-soft); }
.footer__legal {
  font-size: 0.75rem;
  line-height: 1.7;
  color: rgba(247, 244, 239, 0.6);
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(200, 165, 106, 0.15);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, 0.5);
}

/* ==========================================================================
   22. BOTÃO FLUTUANTE WHATSAPP
   ========================================================================== */
.wa-float {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.25rem;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 12px 32px -10px rgba(37, 211, 102, 0.8);
  /* Escondido até o usuário rolar — classe aplicada via JS */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.94);
  transition: opacity 0.35s, transform 0.35s var(--ease), visibility 0.35s;
}
.wa-float.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.wa-float:hover { filter: brightness(1.06); transform: translateY(-2px); }
.wa-float svg { flex: 0 0 auto; }

/* ==========================================================================
   23. ANIMAÇÕES DE ENTRADA
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Atrasos escalonados para grids */
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

/* ==========================================================================
   24. RESPONSIVO
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --gutter: 2rem; --section-y: 4.5rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .footer__col--about { grid-column: span 2; }
  .reasons { grid-template-columns: repeat(2, 1fr); }
  .team { grid-template-columns: repeat(2, 1fr); }
  .team__card { grid-column: span 2; }
}

@media (max-width: 900px) {
  /* No mobile o logo fica um pouco menor que no desktop, senão sobra pouco
     espaço para o botão do menu. */
  :root { --header-h: 88px; }
  .header__logo img { height: 58px; }

  /* Navegação: esconde os links, mostra o hambúrguer */
  .header__nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header__cta { display: none; }

  .hero { padding-top: calc(var(--header-h) + 1.5rem); padding-bottom: 3rem; }
  .hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  /* No mobile a imagem vem depois do texto */
  .hero__media { order: 2; }
  /* As fotos ficam mais largas no mobile (4/3), mas o vídeo do hero é
     vertical e precisa manter 9/16 — daí o :not(). */
  .frame--45:not(.frame--video) { aspect-ratio: 4 / 3; }
  .frame--video { max-width: 20rem; }
  .frame-glow::before { display: none; }

  .split,
  .step,
  .location { grid-template-columns: 1fr; gap: 2rem; }
  .split--reverse > *:first-child { order: 0; }
  /* Precisa repetir o :nth-child(even) aqui: a regra do desktop que inverte
     as colunas tem especificidade maior que ".step" sozinho e continuaria
     valendo, deixando os passos pares com a foto menor que os ímpares. */
  .step:nth-child(even) { grid-template-columns: 1fr; }
  /* Imagem sempre antes do texto nos passos */
  .step:nth-child(even) .step__media { order: 0; }
  .steps { gap: 3rem; }
  .step__text { max-width: none; }

  .cards { grid-template-columns: 1fr; }
  .card__media { aspect-ratio: 16 / 9; }

  /* O vídeo passa a ficar embaixo do texto, uma coluna só */
  .split--video { grid-template-columns: 1fr; gap: 2.5rem; }

  .trust { grid-template-columns: repeat(2, 1fr); gap: 0.875rem; }

  .regions { gap: 0.75rem; }
  .region__media { aspect-ratio: 3 / 4; }

  .btn,
  .btn--lg,
  .btn-outline { width: 100%; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn-note { text-align: center; }

  .cta-final { padding-block: 4.5rem; }
  .faq__trigger { padding: 1.125rem 1.25rem; font-size: 1.0625rem; }
  .faq__panel > p { padding: 0 1.25rem 1.25rem; }

  .wa-float { right: 1rem; bottom: 1rem; padding: 0.8125rem 1.125rem; }
}

@media (max-width: 640px) {
  :root { --gutter: 1.5rem; --section-y: 3.5rem; }
  .video-frame { max-width: 22rem; margin-inline: auto; }
  .video-body { max-width: none; }
  .video-caption { max-width: 22rem; margin-inline: auto; }
  .reasons,
  .team { grid-template-columns: 1fr; }
  .team__card { grid-column: span 1; padding: 1.5rem; }
  .footer__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer__col--about { grid-column: span 1; }
  .footer__bottom { justify-content: center; text-align: center; }
  .badge { font-size: 10px; letter-spacing: 0.16em; }
  /* No celular o botão do WhatsApp fica só com o ícone */
  .wa-float span { display: none; }
  .wa-float { padding: 0.9375rem; border-radius: 50%; }
}

/* ==========================================================================
   25. ACESSIBILIDADE E IMPRESSÃO
   ========================================================================== */
/* Respeita quem pediu menos movimento no sistema operacional */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media print {
  .header,
  .mobile-menu,
  .wa-float,
  .map,
  .video-frame,
  .frame--video,
  .cta-final__bg,
  .cta-final__veil { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .faq__panel { max-height: none !important; }
  body { background: #fff; }
  .section--dark,
  .cta-final,
  .footer { background: #fff !important; color: #000 !important; }
  .on-dark h2,
  .on-dark h3,
  .reason__title { color: #000 !important; }
}