/* =========================================================
   Clínica Move — folha de estilo principal
   Paleta extraída do layout original (GreatPages)
   ========================================================= */

:root{
  /* ---- verdes da marca ----------------------------------
     --verde        cor oficial da marca (fundos, botões, detalhes)
     --verde-texto  tom fechado para TEXTO e ícones sobre fundo claro.
                    O #B0D250 puro tem apenas 1,7:1 de contraste com o
                    branco — ilegível. Este tom entrega 5,3:1 no branco
                    e 4,7:1 no creme (WCAG AA nos dois fundos).
     --verde-escuro fundos escuros, e texto sobre o verde da marca (5,9:1)
     -------------------------------------------------------- */
  --verde:        #B0D250;
  --verde-hover:  #9CC13A;
  --verde-texto:  #587518;
  --verde-escuro: #2F4718;
  --creme:        #F7F2EB;   /* fundo alternado */
  --tinta:        #3C3C3B;   /* grafite — texto principal (11:1 no branco) */
  --tinta-suave:  #5A5959;   /* texto secundário */
  --rodape:       #383838;   /* cinza escuro do rodapé */
  --linha:        #E4E0D9;
  --branco:       #FFFFFF;

  --fonte-titulo: "Inter Tight", "Montserrat", sans-serif;
  --fonte-corpo:  "Montserrat", system-ui, sans-serif;

  --largura: 1200px;
  --raio: 16px;
  --raio-lg: 24px;
  --sombra: 0 12px 40px rgba(18, 83, 30, .08);
  --transicao: .25s ease;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; }
body{
  margin:0;
  font-family:var(--fonte-corpo);
  font-size:16px;
  line-height:1.7;
  color:var(--tinta);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }

h1,h2,h3{
  font-family:var(--fonte-titulo);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.02em;
  margin:0 0 .6em;
  /* distribui as linhas em blocos parecidos em vez de deixar
     uma palavra sozinha na última linha */
  text-wrap:balance;
}
h1{ font-size:clamp(2rem, 4.4vw, 3.2rem); }
h2{ font-size:clamp(1.8rem, 3.8vw, 2.7rem); }
h3{ font-size:1.15rem; font-weight:600; }
p{ margin:0 0 1.1em; }
strong{ font-weight:600; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--verde-escuro); color:#fff; padding:.8rem 1.2rem;
}
.skip-link:focus{ left:1rem; top:1rem; }

:focus-visible{ outline:3px solid var(--verde-texto); outline-offset:3px; }

/* ---------- utilitários ---------- */
.container{ width:100%; max-width:var(--largura); margin:0 auto; padding:0 24px; }
.section{ padding:clamp(64px, 9vw, 120px) 0; }
.section-cream{ background:var(--creme); }
.section-dark{ background:var(--verde-escuro); color:var(--branco); }
.section-dark p{ color:rgba(255,255,255,.82); }
.center{ text-align:center; }

.section-head{ max-width:760px; margin:0 auto clamp(40px,5vw,64px); text-align:center; }
.section-head .lead{ margin-bottom:0; }

.eyebrow{
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--verde-texto); margin-bottom:.9rem;
}
/* sobre fundo escuro o verde da marca brilha (10,3:1) — precisa vencer
   a regra .section-dark p, que tem especificidade maior */
.eyebrow-light,
.section-dark .eyebrow-light{ color:var(--verde); }
.h2-light{ color:var(--branco); }
.lead{ font-size:clamp(1rem,1.6vw,1.12rem); color:var(--tinta-suave); }
.lead-light{ color:rgba(255,255,255,.82) !important; }

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--fonte-corpo); font-size:.95rem; font-weight:600;
  padding:15px 30px; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:var(--transicao); text-align:center;
}
/* texto verde-escuro sobre o verde da marca: 5,9:1 (o branco daria 1,7:1) */
.btn-primary{ background:var(--verde); color:var(--verde-escuro); }
.btn-primary:hover{ background:var(--verde-hover); color:var(--verde-escuro); transform:translateY(-2px); }
.btn-ghost{ border-color:currentColor; color:var(--tinta); }
.btn-ghost:hover{ background:var(--tinta); color:#fff; }
.section-dark .btn-ghost{ color:#fff; }
.btn-sm{ padding:11px 22px; font-size:.85rem; }
.btn-lg{ padding:18px 40px; font-size:1rem; }

.link-seta{ font-weight:600; color:var(--verde-texto); border-bottom:2px solid var(--verde); padding-bottom:2px; }
.link-seta::after{ content:" →"; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linha);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:76px; }
.logo img{ height:42px; width:auto; }

.nav{ display:flex; align-items:center; gap:32px; }
.nav ul{ display:flex; gap:26px; }
.nav ul a{ font-size:.9rem; font-weight:500; color:var(--tinta); transition:var(--transicao); }
.nav ul a:hover{ color:var(--verde-texto); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; width:44px; height:44px;
  align-items:center; justify-content:center; background:none; border:0; cursor:pointer;
}
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--tinta); transition:var(--transicao); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero{ padding:clamp(56px,7vw,96px) 0; background:linear-gradient(180deg,var(--creme) 0%, #fff 100%); }
.hero-inner{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,72px); align-items:center; }
.hero-text .lead{ max-width:48ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2rem; }
.hero-media img{ border-radius:var(--raio-lg); box-shadow:var(--sombra); object-fit:cover; width:100%; }

/* =========================================================
   ANIMAÇÕES
   Só entram em cena quando o JS está ativo (.js no <html>).
   Sem JS, o conteúdo aparece normalmente — nunca fica invisível.
   ========================================================= */

/* revelação ao rolar */
.js [data-anima]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--atraso, 0) * 90ms);
}
.js [data-anima="lado"]{ transform:translateX(-32px); }
.js [data-anima="lado-dir"]{ transform:translateX(32px); }
.js [data-anima="zoom"]{ transform:scale(.94); }
.js [data-anima].visivel{ opacity:1; transform:none; }

/* header encolhe e ganha sombra ao rolar */
.site-header{ transition:box-shadow .3s ease, background-color .3s ease; }
.site-header.compacto{ box-shadow:0 6px 24px rgba(47,71,24,.10); }
.site-header.compacto .header-inner{ min-height:64px; }
.header-inner{ transition:min-height .3s ease; }
.logo img{ transition:height .3s ease; }
.site-header.compacto .logo img{ height:34px; }

/* link do menu correspondente à seção visível */
.nav ul a{ position:relative; }
.nav ul a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--verde); transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.nav ul a:hover::after,
.nav ul a.ativo::after{ transform:scaleX(1); }
.nav ul a.ativo{ color:var(--verde-texto); }

/* imagens com leve zoom ao entrar em foco */
.hero-media img, .quando-media img, .sobre-media img, .historia-media img{
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.hero-media:hover img, .quando-media:hover img,
.sobre-media:hover img, .historia-media:hover img{ transform:scale(1.03); }

/* botão flutuante do WhatsApp: pulso discreto para chamar atenção */
@keyframes pulso{
  0%   { box-shadow:0 8px 24px rgba(0,0,0,.22), 0 0 0 0 rgba(37,211,102,.5); }
  70%  { box-shadow:0 8px 24px rgba(0,0,0,.22), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow:0 8px 24px rgba(0,0,0,.22), 0 0 0 0 rgba(37,211,102,0); }
}
.whats-float{ animation:pulso 3.2s ease-out infinite; }
.whats-float:hover{ animation-play-state:paused; }

/* botão sobe suavemente e o CTA ganha brilho ao passar o mouse */
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::before{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transition:transform .6s ease;
}
.btn-primary:hover::before{ transform:translateX(100%); }
.btn-primary > *{ position:relative; z-index:1; }

/* barra de progresso da leitura no topo */
.progresso{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:140;
  background:var(--verde); transform:scaleX(0); transform-origin:left;
  will-change:transform; pointer-events:none;
}

/* ---- respeita quem pediu menos movimento no sistema ---- */
@media (prefers-reduced-motion: reduce){
  .js [data-anima]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .valor-texto{ transition:none; }
  .valor-icone{ transition:none; }
  .card-valor:hover .valor-icone,
  .card-valor:focus-within .valor-icone,
  .card-valor.aberto .valor-icone{ transform:none; }
  .whats-float{ animation:none; }
  .btn-primary::before{ display:none; }
  .hero-media img, .quando-media img, .sobre-media img, .historia-media img{ transition:none; }
  .hero-media:hover img, .quando-media:hover img,
  .sobre-media:hover img, .historia-media:hover img{ transform:none; }
  .progresso{ display:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- marquee ---------- */
.marquee{ background:var(--verde); color:var(--verde-escuro); overflow:hidden; padding:14px 0; }
.marquee-track{
  display:flex; white-space:nowrap; width:max-content;
  font-family:var(--fonte-titulo); font-size:1.05rem; font-weight:500; letter-spacing:.02em;
}
/* espaçamento por margem, não por gap: com gap, o total tem um espaço a
   menos que o número de itens, e o -50% não cai no ponto exato da
   repetição — dava um salto visível a cada volta. */
.marquee-track > span{ margin-right:26px; }
.marquee .dot{ opacity:.5; }
/* só anima depois que o JS montou as duas metades; sem JS a faixa fica
   parada, com as palavras visíveis — nunca com um vão no meio */
.js .marquee-track.pronta{ animation:desliza 34s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes desliza{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* precisa da mesma especificidade da regra que liga a animação, senão perde */
@media (prefers-reduced-motion: reduce){
  .marquee-track,
  .js .marquee-track.pronta{ animation:none; }
}

/* ---------- grids ---------- */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.grid-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); align-items:start; margin-bottom:clamp(48px,6vw,80px); }
.split-align{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }

/* ---------- cards ---------- */
.card-pilar{ padding:32px 28px; border:1px solid var(--linha); border-radius:var(--raio); background:#fff; transition:var(--transicao); }
.card-pilar:hover{ border-color:var(--verde); transform:translateY(-4px); box-shadow:var(--sombra); }
.card-pilar h3{ color:var(--verde-escuro); }
.card-pilar p{ margin:0; color:var(--tinta-suave); font-size:.95rem; }

.card-step{ padding:34px 30px; background:#fff; border-radius:var(--raio); box-shadow:var(--sombra); }
.step-num{
  display:inline-block; font-family:var(--fonte-titulo); font-size:1.6rem; font-weight:700;
  color:var(--verde-texto); margin-bottom:.5rem;
}
.card-step p{ margin:0; color:var(--tinta-suave); font-size:.95rem; }
.steps{ margin-bottom:48px; }

/* ---------- pilates: imagem em arco + lista sem caixas ---------- */
.pilates-layout{
  display:grid; grid-template-columns:.92fr 1.08fr;
  gap:clamp(32px,5vw,80px); align-items:center;
}

.pilates-media{ position:relative; }
/* o arco tira o peso do retângulo; a imagem preenche sem distorcer */
.pilates-media img{
  position:relative; z-index:1;          /* acima do círculo decorativo */
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:999px 999px var(--raio-lg) var(--raio-lg);
}
/* círculo verde atrás, deslocado — dá profundidade sem virar mais uma caixa.
   z-index 0 (não -1): com valor negativo ele seria pintado atrás do fundo
   da própria seção e ficaria invisível. */
.pilates-media::before{
  content:""; position:absolute; z-index:0;
  left:-6%; bottom:-5%; width:62%; aspect-ratio:1;
  background:var(--verde); border-radius:50%; opacity:.28;
}
.pilates-selo{
  position:absolute; right:-10px; bottom:22px;
  display:grid; place-items:center; width:104px; height:104px;
  border-radius:50%; background:var(--verde-escuro); color:var(--verde);
  font-family:var(--fonte-titulo); font-size:.9rem; font-weight:600;
  line-height:1.15; text-align:center; letter-spacing:.02em;
}

.pilates-lista{ counter-reset:none; }
.pilates-lista li{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,2vw,28px);
  align-items:start; padding:26px 0;
  border-bottom:1px solid var(--linha);
  transition:transform .3s ease;
}
.pilates-lista li:first-child{ padding-top:0; }
.pilates-lista li:last-child{ border-bottom:0; padding-bottom:0; }
.pilates-lista li:hover{ transform:translateX(8px); }

.pilates-num{
  font-family:var(--fonte-titulo); font-size:clamp(1.6rem,2.6vw,2.1rem);
  font-weight:700; line-height:1; color:var(--verde-texto); opacity:.45;
  font-variant-numeric:tabular-nums; transition:opacity .3s ease, color .3s ease;
}
.pilates-lista li:hover .pilates-num{ opacity:1; }
.pilates-lista h3{ margin:0 0 .4rem; font-size:1.1rem; }
.pilates-lista p{ margin:0; color:var(--tinta-suave); font-size:.95rem; }

.pilates-cta{ margin-top:clamp(40px,5vw,60px); }

/* ---------- seção no verde da marca (Método Move) ----------
   Todo o texto em verde-escuro: 5,98:1 sobre o #B0D250. Tons
   intermediários de verde não alcançam 4,5:1 nesse fundo. */
.section-verde{ background:var(--verde); color:var(--verde-escuro); }
.section-verde h2,
.section-verde h3,
.section-verde p,
.section-verde .eyebrow{ color:var(--verde-escuro); }

/* ---------- cards de valores (ícone + título, texto ao interagir) ---------- */
.card-valor{
  border:1.5px solid rgba(47,71,24,.22); border-radius:var(--raio);
  background:rgba(255,255,255,.28); transition:var(--transicao);
}
.card-valor:hover, .card-valor:focus-within, .card-valor.aberto{
  background:rgba(255,255,255,.6); border-color:var(--verde-escuro);
}

.valor-gatilho{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  width:100%; padding:24px 20px; background:none; border:0; cursor:pointer;
  font:inherit; color:inherit; text-align:left;
}
.valor-icone{
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:var(--verde-escuro); color:var(--verde); flex:none;
  transition:transform .3s ease;
}
.valor-icone svg{ width:24px; height:24px; }
.card-valor:hover .valor-icone,
.card-valor:focus-within .valor-icone,
.card-valor.aberto .valor-icone{ transform:scale(1.08) rotate(-4deg); }

.card-valor h3{ margin:0; font-size:1rem; line-height:1.25; }

/* o texto complementar: fechado ocupa altura zero, sem sumir do fluxo
   de forma abrupta. grid-template-rows 0fr -> 1fr anima a altura sem
   precisar chutar um max-height fixo. */
.valor-texto{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .4s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
/* min-height:0 permite o item do grid encolher até zero de fato.
   O respiro de baixo entra como pseudo-elemento DENTRO do parágrafo:
   padding vertical não é recortado pelo colapso da linha e deixaria
   22px de sobra com o card fechado. */
.valor-texto > p{
  overflow:hidden; min-height:0; margin:0;
  padding:0 20px; font-size:.9rem;
}
.valor-texto > p::after{ content:""; display:block; height:22px; }
.card-valor:hover .valor-texto,
.card-valor:focus-within .valor-texto,
.card-valor.aberto .valor-texto{ grid-template-rows:1fr; opacity:1; }

/* ---------- lista de sintomas ---------- */
.check-list{ margin:0 0 2rem; display:grid; gap:12px; }
.check-list li{ position:relative; padding-left:36px; color:var(--tinta-suave); }
.check-list li::before{
  content:""; position:absolute; left:0; top:.45em;
  width:20px; height:20px; border-radius:50%;
  background:var(--verde-texto);
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/16px no-repeat, none;
          mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/16px no-repeat;
}
.quando-media img, .sobre-media img{ border-radius:var(--raio-lg); object-fit:cover; width:100%; box-shadow:var(--sombra); }

/* ---------- equipe ---------- */
.equipe .card-pessoa{
  background:#fff; border-radius:var(--raio-lg); padding:32px 26px 34px;
  text-align:center; box-shadow:var(--sombra); transition:var(--transicao);
}
.card-pessoa:hover{ transform:translateY(-6px); }
.card-pessoa img{
  width:150px; height:150px; border-radius:50%; object-fit:cover; object-position:top center;
  margin:0 auto 20px; border:4px solid var(--creme);
}
.card-pessoa h3{ margin-bottom:.25rem; color:var(--verde-escuro); }
.card-pessoa .cargo{ font-size:.9rem; font-weight:600; color:var(--verde-texto); margin:0 0 .15rem; }
.card-pessoa .registro{ font-size:.8rem; color:var(--tinta-suave); letter-spacing:.04em; margin:0 0 1rem; }
.card-pessoa p:last-child{ margin:0; font-size:.92rem; color:var(--tinta-suave); }
.equipe-footer{ margin-top:clamp(40px,5vw,56px); }
.equipe-footer .lead{ max-width:52ch; margin:0 auto 1.6rem; }

/* ---------- depoimentos ---------- */
.card-depo{
  margin:0; padding:32px 28px; background:#fff; border:1px solid var(--linha);
  border-radius:var(--raio); display:flex; flex-direction:column; gap:14px;
}
.estrelas{ color:#FFC107; letter-spacing:.15em; font-size:1rem; }
.card-depo blockquote{ margin:0; font-size:.95rem; color:var(--tinta-suave); }
.card-depo blockquote::before{ content:"“"; }
.card-depo blockquote::after{ content:"”"; }
.card-depo figcaption{ margin-top:auto; padding-top:12px; border-top:1px solid var(--linha); font-size:.88rem; }
.card-depo figcaption strong{ display:block; color:var(--tinta); }
.card-depo time{ color:var(--tinta-suave); font-size:.82rem; }

.historia{
  margin-top:clamp(48px,6vw,72px); display:grid; grid-template-columns:.9fr 1.1fr;
  gap:clamp(24px,4vw,56px); align-items:center;
  background:var(--creme); border-radius:var(--raio-lg); padding:clamp(24px,4vw,48px);
}
.historia-media img,
.historia-media video{ border-radius:var(--raio); object-fit:cover; width:100%; height:auto; display:block; aspect-ratio:4/5; }
/* fotos verticais de celular esticavam a seção; o recorte 4:5 padroniza */
.quando-media img,
.sobre-media img{ aspect-ratio:4/5; }
/* o rosto está no alto da foto: corte ancorado no topo, senão a testa some */
.quando-media img{ object-position:center top; }
.historia h3{ font-size:1.6rem; }

/* ---------- contato ---------- */
.contato-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(28px,4vw,56px); margin-bottom:48px; }
.contato-info{ display:grid; gap:26px; align-content:start; }
.contato-info li{ color:rgba(255,255,255,.9); }
.contato-info .rotulo{
  display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--verde); margin-bottom:.4rem; font-weight:600;
}
.contato-info a:hover{ color:var(--verde); }
.contato-mapa iframe{ width:100%; height:100%; min-height:380px; border-radius:var(--raio); filter:grayscale(.2); }

/* ---------- footer ---------- */
.site-footer{ background:var(--rodape); color:rgba(255,255,255,.78); padding:48px 0; text-align:center; }
.footer-logo{ margin:0 auto 10px; opacity:.95; }  /* já é o SVG na versão branca */
/* assinatura como texto real: o SVG original usa a fonte Aileron, que o
   visitante não tem instalada — em texto vivo ela cairia numa fonte
   qualquer. Aqui fica igual em todo navegador, e é lida por buscadores. */
.footer-assinatura{
  font-family:var(--fonte-corpo); font-weight:500;
  font-size:.9rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--verde); margin:0 0 20px; padding-left:.34em;
}
.footer-legal{ font-size:.85rem; margin-bottom:.8rem; }
.footer-copy{ font-size:.8rem; margin:0; opacity:.7; }

/* ---------- whatsapp flutuante ---------- */
.whats-float{
  position:fixed; right:20px; bottom:20px; z-index:120;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.22); transition:var(--transicao);
}
.whats-float:hover{ transform:scale(1.08); }

/* ---------- cookies ---------- */
.cookie-bar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:130;
  background:#fff; border:1px solid var(--linha); border-radius:var(--raio);
  box-shadow:0 12px 40px rgba(0,0,0,.16);
  padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:18px;
  max-width:880px; margin:0 auto;
}
.cookie-bar p{ margin:0; font-size:.86rem; color:var(--tinta-suave); }
.cookie-bar[hidden]{ display:none; }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 1024px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-5{ grid-template-columns:repeat(3,1fr); }
  .contato-grid{ grid-template-columns:1fr; }
  .contato-mapa iframe{ min-height:300px; }
}

@media (max-width: 860px){
  .nav-toggle{ display:flex; }
  .nav{
    position:fixed; inset:76px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--linha);
    padding:8px 24px 28px;
    max-height:calc(100vh - 76px); overflow-y:auto;
    /* visibility/pointer-events garantem que o menu fechado não seja
       focável pelo teclado nem lido por leitores de tela */
    transform:translateY(-120%); visibility:hidden; pointer-events:none;
    transition:transform .3s ease, visibility .3s ease;
  }
  .nav.aberto{ transform:translateY(0); visibility:visible; pointer-events:auto; }
  .nav ul{ flex-direction:column; gap:0; }
  .nav ul a{ display:block; padding:14px 0; border-bottom:1px solid var(--linha); font-size:1rem; }
  .nav-cta{ margin-top:18px; }

  .hero-inner,
  .split, .split-align,
  .grid-2, .grid-3, .grid-4,
  .pilates-layout,
  .historia{ grid-template-columns:1fr; }
  .pilates-media img{ aspect-ratio:3/4; }
  .pilates-selo{ width:88px; height:88px; right:6px; }
  .pilates-lista li:hover{ transform:none; }   /* sem hover no toque */
  .grid-5{ grid-template-columns:repeat(2,1fr); }

  .hero-media{ order:-1; }
  .quando-media, .sobre-media{ order:-1; }
  .hero-actions .btn{ flex:1 1 auto; }

  .cookie-bar{ flex-direction:column; text-align:center; }
}

@media (max-width: 520px){
  .grid-5{ grid-template-columns:1fr; }
  .btn{ width:100%; }
  .nav-cta{ width:100%; }
  .whats-float{ width:52px; height:52px; }
}

/* ---------- impressão ---------- */
@media print{
  .site-header,.whats-float,.cookie-bar,.marquee,.contato-mapa{ display:none !important; }
  body{ color:#000; }
}

/* =========================================================
   CARROSSEL NO CELULAR — equipe e depoimentos
   No desktop seguem em grade normal. No celular viram trilho
   deslizável com encaixe (scroll-snap) + setas e bolinhas.
   ========================================================= */
.carrossel-controles{
  display:none; align-items:center; justify-content:center; gap:16px;
  margin-top:22px;
}
.carrossel-seta{
  width:44px; height:44px; flex:none; border-radius:50%; cursor:pointer;
  border:1.5px solid var(--linha); background:#fff; color:var(--tinta);
  display:grid; place-items:center; transition:var(--transicao);
}
.carrossel-seta:hover:not(:disabled){ border-color:var(--verde); color:var(--verde-texto); }
.carrossel-seta:disabled{ opacity:.35; cursor:default; }
.carrossel-seta svg{ width:18px; height:18px; }
.carrossel-bolinhas{ display:flex; gap:8px; }
.carrossel-bolinha{
  width:8px; height:8px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:var(--linha); transition:var(--transicao);
}
.carrossel-bolinha.ativa{ background:var(--verde-texto); width:22px; border-radius:999px; }

@media (max-width: 860px){
  .equipe,
  .depoimentos{
    display:flex; grid-template-columns:none;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-behavior:smooth;
    gap:16px; scrollbar-width:none;
    /* sangra até a borda da tela, mas mantém o respiro nas pontas */
    margin-inline:-24px; padding-inline:24px; padding-bottom:4px;
  }
  .equipe::-webkit-scrollbar,
  .depoimentos::-webkit-scrollbar{ display:none; }

  .equipe > *,
  .depoimentos > *{ flex:0 0 86%; min-width:0; scroll-snap-align:center; }

  .carrossel-controles{ display:flex; }
}

@media (prefers-reduced-motion: reduce){
  .equipe, .depoimentos{ scroll-behavior:auto; }
}