/* Juliana Silva Fisioterapia e Pilates
   Mobile first. Breakpoints: 720px (tablet) e 960px (desktop). */

@font-face {
  font-family: "Young Serif";
  src: url("/fonts/young-serif-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/fonts/nunito-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Cores: rosa acolhedor. Fundos em tons de blush, rosa forte só nos destaques */
  --vinho: #ad4560;        /* botões, ícones */
  --vinho-hover: #c0566f;
  --vinho-escuro: #7c2d44; /* títulos, links */
  --blush: #f6d6db;        /* seções de destaque */
  --blush-forte: #f1c4cc;  /* CTA final */
  --tinta: #3b2228;
  --tinta-suave: #6a4850;
  --rose: #fdf1f2;         /* seções claras */
  --pessego: #f9dde2;      /* ícones sobre rosa forte */
  --pessego-forte: #e39aa9;/* traço, linhas */
  --branco: #fffafa;
  --borda: #f0d3d8;

  /* Movimento */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;

  /* Tipografia */
  --serif: "Young Serif", Georgia, "Times New Roman", serif;
  --sans: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-corpo: 1.0625rem;   /* 17px */
  --t-pequeno: 0.9375rem; /* 15px */
  --t-h1: clamp(2.5rem, 1.55rem + 4.2vw, 4.4rem);
  --t-h2: clamp(2.05rem, 1.5rem + 2.4vw, 3.25rem);
  --t-h3: 1.35rem;

  /* Espaço */
  --gutter: 20px;
  --secao: 72px;
  --raio: 16px;
}

@media (min-width: 960px) {
  :root { --secao: 120px; --gutter: 32px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--branco);
  color: var(--tinta);
  font: 400 var(--t-corpo)/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
h2 { color: var(--vinho-escuro); }
h3 { font-size: var(--t-h3); }
p { margin: 0; }
p, li { text-wrap: pretty; }
figure { margin: 0; }
address { font-style: normal; }
a { color: var(--vinho); }

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

.wrap {
  width: 100%;
  max-width: calc(1120px + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 40;
  background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 8px;
}
.skip:focus { top: 12px; }
/* O main recebe foco pelo "Pular para o conteúdo", sem contorno no bloco inteiro */
main:focus { outline: none; }

/* Ícones de traço (Lucide) */
.ico {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Placeholder visível até a Juliana mandar o conteúdo real */
.todo {
  display: inline-block;
  background: #fff1b8;
  color: var(--tinta);
  outline: 1px dashed #b38b00;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--t-pequeno);
}

/* ---------- Botão principal: igual em todo o site ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 440px;
  min-height: 58px;
  padding: 14px 28px;
  border-radius: 14px;
  background: var(--vinho);
  color: #fff;
  font: 800 1.0938rem/1.2 var(--sans);
  text-decoration: none;
  box-shadow: 0 14px 30px -14px rgba(173, 69, 96, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out), box-shadow var(--t-ui) var(--ease-out);
}
.btn__icone { width: 22px; height: 22px; flex: none; }
@media (min-width: 720px) {
  .btn { display: inline-flex; width: auto; }
  .btn--grande { min-height: 66px; font-size: 1.1875rem; padding-inline: 36px; }
}

.link {
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: var(--pessego-forte);
}
.link:hover { color: var(--vinho-escuro); text-decoration-color: currentColor; }

/* ---------- Seções ---------- */
.secao { padding-block: var(--secao); }
.secao--rose { background: var(--rose); }
.secao--blush { background: var(--blush); }
.titulo-grande { font-size: var(--t-h2); margin-bottom: 18px; }
.secao__intro { max-width: 56ch; color: var(--tinta-suave); font-size: 1.125rem; margin-bottom: 32px; }

/* Traço caligráfico (vem do logo) */
.traco {
  display: block;
  width: 170px;
  height: 22px;
  overflow: visible;
}
.traco path {
  fill: none;
  stroke: var(--pessego-forte);
  stroke-width: 2;
  stroke-linecap: round;
}

/* Entradas laterais e fotos inclinadas não geram rolagem para o lado */
main { overflow-x: clip; }

/* ---------- Menu ---------- */
/* Âncoras e foco do teclado param abaixo do menu fixo (e acima do botão fixo no celular) */
html { scroll-padding-top: 96px; }
@media (max-width: 959px) {
  html:has(body.tem-fixo) { scroll-padding-bottom: 100px; }
}
.topo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  transition: background-color 300ms ease, box-shadow 300ms ease, transform 420ms var(--ease-out);
}
.topo.rolou,
.topo.aberto {
  background: rgba(253, 241, 242, 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 12px 30px -22px rgba(124, 45, 68, 0.5);
}
.topo__progresso {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pessego-forte), var(--vinho));
  transform: scaleX(var(--pg, 0));
  transform-origin: left;
  opacity: 0;
  transition: opacity 300ms ease;
}
.topo.rolou .topo__progresso { opacity: 1; }
.topo__barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.topo__logo { display: block; border-radius: 6px; }
.topo__logo img { width: 104px; }
.topo__abrir {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 250, 250, 0.75);
  color: var(--vinho-escuro);
  cursor: pointer;
}
.topo__abrir[hidden] { display: none; }
.topo__barras,
.topo__barras::before,
.topo__barras::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-ui) var(--ease-out), opacity var(--t-hover) ease;
}
.topo__barras { position: relative; }
.topo__barras::before,
.topo__barras::after { content: ""; position: absolute; left: 0; }
.topo__barras::before { top: -6px; }
.topo__barras::after { top: 6px; }
.topo__abrir[aria-expanded="true"] .topo__barras { background: transparent; }
.topo__abrir[aria-expanded="true"] .topo__barras::before { transform: translateY(6px) rotate(45deg); }
.topo__abrir[aria-expanded="true"] .topo__barras::after { transform: translateY(-6px) rotate(-45deg); }

/* Celular: o menu abre como uma gaveta logo abaixo da barra */
.topo__nav { display: none; }
.topo.aberto .topo__nav {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 8px var(--gutter) 24px;
  background: var(--branco);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 30px 50px -30px rgba(124, 45, 68, 0.55);
  animation: gaveta 300ms var(--ease-out);
}
.topo__nav ul { list-style: none; margin: 0 0 20px; padding: 0; }
.topo__nav li a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--borda);
  font: 400 1.5rem/1.2 var(--serif);
  color: var(--vinho-escuro);
  text-decoration: none;
}
.topo__nav li a[aria-current="true"] { color: var(--vinho); }

@media (min-width: 960px) {
  .topo__barra { height: 84px; }
  .topo__logo img { width: 120px; }
  .topo__abrir { display: none !important; }
  .topo__nav { display: flex; align-items: center; gap: 36px; }
  .topo.aberto .topo__nav { all: unset; display: flex; align-items: center; gap: 36px; }
  .topo__nav ul { display: flex; gap: 30px; margin: 0; }
  .topo__nav li a {
    position: relative;
    padding: 8px 0;
    border: 0;
    font: 700 0.9688rem/1.2 var(--sans);
    color: var(--tinta);
  }
  .topo__nav li a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--vinho);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-ui) var(--ease-out);
  }
  .topo__nav li a:hover { color: var(--vinho-escuro); }
  .topo__nav li a:hover::after,
  .topo__nav li a[aria-current="true"]::after { transform: scaleX(1); }
  .topo__nav li a[aria-current="true"] { color: var(--vinho-escuro); }
  .btn--menu { min-height: 46px; padding: 10px 20px; font-size: 0.9688rem; border-radius: 12px; }
  .btn--menu .btn__icone { width: 18px; height: 18px; }
}

/* ---------- Mancha de cor atrás da foto do hero (só desktop) ---------- */
@media (min-width: 960px) {
  /* Mancha de cor atrás da foto */
  .hero__visual::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 340px;
    height: 340px;
    right: -110px;
    bottom: -90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(227, 154, 169, 0.55), rgba(227, 154, 169, 0) 70%);
  }
}

/* ---------- 1. Hero ---------- */
.hero {
  position: relative;
  background: var(--blush);
  overflow: hidden;
}
.hero { --foto-h: clamp(330px, 50vh, 520px); }
@supports (height: 1svh) { .hero { --foto-h: clamp(330px, 50svh, 520px); } }
.hero__foto { display: block; position: relative; height: var(--foto-h); }
.hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.hero__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(253, 241, 242, 0.85) 0%, rgba(253, 241, 242, 0) 24%),
    linear-gradient(to top, var(--blush) 4%, rgba(246, 214, 219, 0.88) 22%, rgba(246, 214, 219, 0) 52%);
}
.hero__conteudo { position: relative; display: flow-root; padding-bottom: 48px; }
.hero__texto { margin-top: -84px; }
.hero__titulo { font-size: var(--t-h1); max-width: 13ch; color: var(--vinho-escuro); }
.hero__assunto {
  display: block;
  margin-bottom: 14px;
  font: 800 clamp(0.9375rem, 0.85rem + 0.3vw, 1.0625rem)/1.3 var(--sans);
  letter-spacing: 0.01em;
  color: var(--vinho);
}
.hero__frase { display: block; }
.hero__titulo .pal { display: inline-block; overflow: clip; padding-bottom: 0.12em; margin-bottom: -0.12em; vertical-align: top; }
.hero__titulo .pal > span { display: inline-block; }
.hero .traco { margin: 14px 0 16px; }
.hero__apoio { max-width: 38ch; font-size: 1.125rem; color: var(--tinta-suave); margin-bottom: 26px; }
.garantias {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  gap: 10px;
  font-size: var(--t-pequeno);
  font-weight: 600;
  color: var(--tinta-suave);
}
.garantias li { display: flex; align-items: center; gap: 12px; }
.garantias .ico { color: var(--vinho); width: 20px; height: 20px; }
/* Links internos discretos: herdam a cor do texto, sublinhado leve */
.garantias a, .final__selos a {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-color: var(--pessego-forte);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .garantias a:hover, .final__selos a:hover { color: var(--vinho-escuro); text-decoration-color: currentColor; }
}
.servicos__ajuda { margin-top: 32px; text-align: center; color: var(--tinta-suave); font-size: 1.0625rem; }
.servicos__ajuda .link { font-weight: 800; }

@media (min-width: 960px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 480px;
    gap: 72px;
    align-items: center;
    padding: 136px max(var(--gutter), calc((100% - 1120px) / 2)) 104px;
    background:
      radial-gradient(60% 70% at 85% 45%, rgba(255, 250, 250, 0.75), transparent 70%),
      var(--blush);
  }
  .hero__visual {
    position: relative;
    grid-column: 2;
    grid-row: 1;
  }
  .hero__foto { height: auto; }
  .hero__foto img {
    aspect-ratio: 4 / 5;
    height: auto;
    border-radius: 22px;
    box-shadow: 0 40px 80px -40px rgba(124, 45, 68, 0.55);
  }
  .hero__foto::after { display: none; }
  .hero__conteudo { grid-column: 1; grid-row: 1; padding: 0; max-width: none; }
  .hero__texto { margin-top: 0; }
  .hero .traco { width: 220px; height: 28px; margin: 22px 0 22px; }
  .hero__apoio { font-size: 1.25rem; }
}

/* ---------- 2. Identificação ---------- */
.identifica__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.identifica__lista li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font-size: 1.0938rem;
  font-weight: 600;
}
.selo {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vinho);
  color: #fff;
}
.identifica__fecho {
  margin-top: 36px;
  max-width: 28ch;
  font: 400 clamp(1.45rem, 1.2rem + 1vw, 1.9rem)/1.3 var(--serif);
  color: var(--vinho-escuro);
}

@media (min-width: 720px) {
  .identifica__lista { grid-template-columns: 1fr 1fr; gap: 16px; }
  .identifica__lista li { padding: 24px; }
}

/* ---------- 3. Virada ---------- */
.virada__topo p { max-width: 56ch; font-size: 1.125rem; color: var(--tinta-suave); }
.comparacao { display: grid; gap: 16px; margin: 40px 0; }
.comparacao__lado { border-radius: 20px; padding: 28px 24px; }
.comparacao__lado h3 { font-size: 1.6rem; margin-bottom: 14px; }
.comparacao__lado ul { list-style: none; padding: 0; margin: 0; }
.comparacao__lado li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid;
}
.comparacao__lado li .ico { margin-top: 2px; }
.comparacao__lado--comum { background: #f7eef0; color: var(--tinta-suave); }
.comparacao__lado--comum h3 { color: var(--tinta-suave); }
.comparacao__lado--comum li { border-color: #ead7db; }
.comparacao__lado--comum .ico { color: #b89aa1; }
.comparacao__lado--aqui {
  background: var(--vinho);
  color: #fff;
  box-shadow: 0 30px 60px -30px rgba(124, 45, 68, 0.65);
}
.comparacao__lado--aqui h3 { color: #fff; }
.comparacao__lado--aqui li { border-color: rgba(255, 255, 255, 0.22); font-weight: 600; }
.comparacao__lado--aqui .ico { color: var(--pessego); stroke-width: 2.5; }

@media (min-width: 960px) {
  .virada__topo { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
  .virada__topo .titulo-grande { margin: 0; }
  .comparacao { grid-template-columns: 1fr 1.08fr; gap: 24px; align-items: center; margin: 56px 0; }
  .comparacao__lado { padding: 36px; }
  .comparacao__lado--aqui { padding: 44px 40px; }
}

/* ---------- 4. Prova ---------- */
.prova__grade {
  display: grid;
  gap: 32px;
  grid-template-areas: "texto" "foto" "cta";
}
.prova__texto { grid-area: texto; }
.prova__texto p { max-width: 42ch; font-size: 1.125rem; color: var(--tinta-suave); }
.prova__foto { grid-area: foto; }
.prova__foto img { border-radius: var(--raio); box-shadow: 0 40px 80px -40px rgba(124, 45, 68, 0.55); }
.prova__grade > .btn { grid-area: cta; }

@media (min-width: 960px) {
  .prova__grade {
    grid-template-columns: minmax(0, 1fr) 500px;
    grid-template-areas: "texto foto" "cta foto";
    grid-template-rows: auto 1fr;
    column-gap: 80px;
    row-gap: 32px;
    align-items: start;
  }
  .prova__texto { align-self: end; }
  .prova { background: radial-gradient(50% 60% at 75% 50%, rgba(255, 250, 250, 0.7), transparent 70%), var(--blush); }
}

/* ---------- 5. Onde dói ---------- */
.dores__grade { display: grid; gap: 8px; }
.dores__topo .secao__intro { margin-bottom: 8px; }

/* Mapa do corpo */
.dores__corpo {
  justify-self: center;
  width: 100%;
  max-width: 160px;
  padding: 8px 0 16px;
  background: radial-gradient(closest-side, var(--branco) 0%, var(--branco) 62%, rgba(255, 250, 250, 0) 100%);
}
.corpo { display: block; width: 100%; height: auto; overflow: visible; }
.corpo__sombra { fill: rgba(124, 45, 68, 0.1); }
.corpo__forma { fill: url(#corpo-cor); }
.corpo__detalhe { fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 1.6; stroke-linecap: round; }
.corpo__cabelo { fill: url(#cabelo-cor); }
.corpo__musculo { fill: none; stroke: rgba(124, 45, 68, 0.16); stroke-width: 1.4; stroke-linecap: round; }
.dores__corpo[data-vista="frente"] .corpo__costas,
.dores__corpo[data-vista="costas"] .corpo__frente { display: none; }
.corpo__giro { transform-box: view-box; transform-origin: center; }
.corpo__vista {
  display: flex;
  width: max-content;
  margin: 0 auto 12px;
  padding: 4px;
  border-radius: 999px;
  background: var(--branco);
  box-shadow: 0 8px 20px -14px rgba(124, 45, 68, 0.5);
}
.corpo__vista button {
  min-height: 36px;
  padding: 6px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-suave);
  font: 700 0.875rem/1 var(--sans);
  cursor: pointer;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.corpo__vista button[aria-pressed="true"] { background: var(--vinho); color: #fff; }
.corpo__umbigo { fill: rgba(124, 45, 68, 0.35); }
.regiao { cursor: pointer; opacity: 0; transition: opacity var(--t-ui) ease; }
.regiao.previa { opacity: 0.4; }
.regiao.on { opacity: 1; }
.regiao__mancha { fill: url(#dor-brilho); }
.regiao__mancha--leve { fill: var(--vinho); fill-opacity: 0.16; }
.regiao__nucleo { fill: var(--vinho); stroke: #fff; stroke-width: 1.5; }
.regiao__linha { fill: none; stroke: var(--vinho); stroke-width: 3; stroke-linecap: round; }
.regiao__linha--pontos { stroke-width: 3.5; stroke-dasharray: 0.1 8; }
/* O halo cobre o corpo todo: não deve roubar cliques */
.regiao:has(.regiao__halo) { pointer-events: none; }
.regiao__halo { fill: var(--vinho); fill-opacity: 0.08; stroke: var(--vinho); stroke-width: 2; stroke-dasharray: 6 8; }

/* Opções */
.dores__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.dores__lista li { display: flex; }
.dor {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: var(--branco);
  color: var(--tinta-suave);
  font: inherit;
  font-size: var(--t-pequeno);
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}
.dor strong { display: block; color: var(--tinta); font-size: 1.0313rem; font-weight: 800; }
.dor__marca {
  flex: none;
  margin-left: auto;
  width: 24px;
  height: 24px;
  border: 2px solid var(--vinho);
  border-radius: 7px;
  display: grid;
  place-items: center;
}
.dor:hover { border-color: var(--pessego-forte); }
.dor[aria-pressed="true"] { border-color: var(--vinho); box-shadow: inset 0 0 0 1px var(--vinho); background: #fff; }
.dor[aria-pressed="true"] .dor__marca { background: var(--vinho); }
.dor[aria-pressed="true"] .dor__marca::after {
  content: "";
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: translateY(-1px) rotate(45deg);
}

/* Balão com a prévia da mensagem */
.dores__bolha {
  position: relative;
  max-width: 460px;
  margin: 24px 0;
  padding: 12px 16px 26px;
  border-radius: 18px 18px 4px 18px;
  background: #fff;
  box-shadow: 0 18px 36px -24px rgba(124, 45, 68, 0.55);
}
.dores__bolha::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: 0;
  border-left: 10px solid #fff;
  border-top: 10px solid transparent;
}
.dores__bolha-rotulo { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 0.8125rem; font-weight: 800; color: var(--vinho); }
.dores__bolha-rotulo .btn__icone { width: 15px; height: 15px; }
.dores__previa { color: var(--tinta); }
.dores__hora { position: absolute; right: 14px; bottom: 7px; font-size: 0.75rem; color: var(--tinta-suave); }
.dores__painel { display: flex; flex-direction: column; }
.dores__bolha { align-self: stretch; }

@media (min-width: 720px) {
  .dores__lista { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dor { align-items: flex-start; height: 100%; padding: 16px 18px; }
  /* Balão e botão alinhados à direita, como uma mensagem enviada */
  .dores__bolha { align-self: flex-end; width: min(100%, 460px); }
  .dores__painel > .btn { align-self: flex-end; }
}
@media (min-width: 960px) {
  .dores__grade {
    grid-template-columns: 340px minmax(0, 1fr);
    grid-template-areas: "corpo topo" "corpo painel";
    grid-template-rows: auto 1fr;
    column-gap: 72px;
    row-gap: 20px;
  }
  .dores__topo { grid-area: topo; }
  .dores__painel { grid-area: painel; }
  .dores__corpo { grid-area: corpo; align-self: center; max-width: 320px; padding: 24px 0; }
}

/* ---------- 6. Serviços ---------- */
.servicos__grade { display: grid; gap: 28px; margin-top: 12px; }
.servico {
  display: flex;
  flex-direction: column;
  overflow: clip;
  border: 1px solid var(--borda);
  border-radius: 22px;
  background: var(--branco);
  box-shadow: 0 24px 48px -36px rgba(124, 45, 68, 0.55);
  transition: transform var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out);
}
.servico__capa { position: relative; }
.servico__capa::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(74, 24, 38, 0.88) 0%, rgba(74, 24, 38, 0.4) 40%, rgba(74, 24, 38, 0) 62%);
  pointer-events: none;
}
.servico__foto {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 35%;
  background: var(--rose);
}
.servico__foto--pilates { object-position: 50% 50%; }
@media (min-width: 960px) { .servico__foto--pilates { object-position: 33% 50%; } }
.servico__foto--fisio { object-position: 50% 20%; }
@media (min-width: 960px) { .servico__foto--fisio { object-position: 58% 50%; } }
.servico__foto--terapias { object-position: 50% 32%; }
.servico__titulo {
  position: absolute;
  z-index: 1;
  left: 22px;
  right: 22px;
  bottom: 18px;
  color: #fff;
  font-size: 2rem;
  text-shadow: 0 1px 12px rgba(74, 24, 38, 0.55);
}
.servico__corpo { display: flex; flex: 1; flex-direction: column; gap: 16px; padding: 22px; }
.servico__resumo { font-size: 1.0625rem; color: var(--tinta); }
.servico__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.servico__tags li {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--rose);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--vinho-escuro);
}
.servico__quem { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--borda); font-size: var(--t-pequeno); color: var(--tinta-suave); }
.servico__quem strong { display: block; color: var(--tinta); }
.servico .btn { width: 100%; max-width: none; margin-top: 4px; }
/* Celular estreito: o botão cabe numa linha só dentro do cartão */
@media (max-width: 419px) {
  .servico__corpo { padding: 18px; }
  .servico .btn { padding-inline: 12px; gap: 8px; font-size: 1rem; }
}
@media (hover: hover) and (pointer: fine) {
  .servico:hover { transform: translateY(-4px); box-shadow: 0 32px 56px -34px rgba(124, 45, 68, 0.65); }
}

@media (min-width: 960px) {
  .servicos__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 24px; align-items: stretch; }
  .servico__foto { aspect-ratio: 4 / 5; }
}

/* ---------- 7. Para quem é ---------- */
.paraquem__lista {
  list-style: none;
  padding: 0;
  margin: 12px 0 40px;
  display: grid;
}
.paraquem__lista li {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid rgba(124, 45, 68, 0.15);
  font-size: 1.0938rem;
}
.paraquem__lista .ico {
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 50%;
  background: var(--branco);
  color: var(--vinho);
  stroke-width: 2.5;
}

@media (min-width: 960px) {
  .paraquem__lista { grid-template-columns: 1fr 1fr; column-gap: 56px; margin-top: 24px; }
}

/* ---------- 8. Primeira avaliação ---------- */
.passos__lista {
  --circ: 48px;
  --gap: 36px;
  list-style: none;
  counter-reset: passo;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: var(--gap);
}
.passos__lista li {
  position: relative;
  counter-increment: passo;
  padding-left: calc(var(--circ) + 18px);
  min-height: var(--circ);
}
.passos__lista li::before {
  content: counter(passo);
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: var(--circ);
  height: var(--circ);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vinho);
  color: #fff;
  font: 400 1.35rem/1 var(--serif);
  box-shadow: 0 0 0 6px var(--rose);
}
/* Um segmento por passo, do círculo atual até o próximo */
.passos__lista li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--circ) / 2 - 1px);
  top: var(--circ);
  bottom: calc(var(--gap) * -1);
  width: 2px;
  background: var(--pessego-forte);
}
.passos__lista h3 { margin: 10px 0 6px; }
.passos__lista p { color: var(--tinta-suave); max-width: 38ch; }

/* Desktop: zigue-zague em volta de uma linha central */
@media (min-width: 960px) {
  .passos__lista { --gap: 8px; margin-top: 40px; }
  .passos__lista li { width: 50%; padding: 0 64px 48px 0; text-align: right; }
  .passos__lista li:nth-child(even) { margin-left: 50%; padding: 0 0 48px 64px; text-align: left; }
  .passos__lista li::before { left: auto; right: calc(var(--circ) / -2); }
  .passos__lista li:nth-child(even)::before { right: auto; left: calc(var(--circ) / -2); }
  .passos__lista li:not(:last-child)::after { left: auto; right: -1px; }
  .passos__lista li:nth-child(even):not(:last-child)::after { right: auto; left: -1px; }
  .passos__lista p { margin-left: auto; }
  .passos__lista li:nth-child(even) p { margin-left: 0; }
  .passos__lista h3 { font-size: 1.6rem; }
}

/* ---------- 9. Sobre ---------- */
.sobre__grade { display: grid; gap: 48px; }
.sobre__fotos { position: relative; padding-bottom: 28px; max-width: 460px; }
.sobre__retrato { display: block; overflow: clip; border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(124, 45, 68, 0.5); }
.sobre__retrato img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sobre__pratica {
  position: absolute;
  right: 6px;
  bottom: 0;
  display: block;
  width: 136px;
  overflow: clip;
  border-radius: 16px;
  border: 5px solid var(--branco);
  box-shadow: 0 18px 36px -18px rgba(124, 45, 68, 0.6);
  rotate: 3deg;
}
.sobre__pratica img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.sobre__texto { display: grid; gap: 18px; justify-items: start; max-width: 60ch; }
.sobre__texto .titulo-grande { margin: 0; }
.sobre__lead { font: 400 clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem)/1.45 var(--serif); color: var(--tinta); }
.sobre__formacao { width: 100%; padding: 22px; border-radius: 18px; background: var(--rose); }
.formacao__lista { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.formacao__lista li { display: flex; gap: 14px; align-items: flex-start; font-size: var(--t-pequeno); color: var(--tinta-suave); }
.formacao__lista strong { display: block; color: var(--vinho-escuro); font-size: 1.0313rem; line-height: 1.35; }
.formacao__lista .ico { width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: var(--branco); color: var(--vinho); }
.formacao__rotulo { margin-bottom: 10px; font-weight: 800; font-size: var(--t-pequeno); color: var(--tinta); }
.formacao__cursos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.formacao__cursos li {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: var(--branco);
  font-size: 0.8438rem;
  line-height: 1.35;
  color: var(--tinta-suave);
}
.formacao__crefito { margin-top: 14px; }
.sobre__jeito { list-style: none; padding: 0; margin: 8px 0 14px; display: grid; gap: 4px; width: 100%; }
.sobre__jeito li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid var(--borda);
  color: var(--tinta-suave);
}
.sobre__jeito strong { display: block; color: var(--vinho-escuro); font-size: 1.0938rem; margin-bottom: 2px; }
.sobre__jeito .ico {
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 50%;
  background: var(--rose);
  color: var(--vinho);
}

@media (min-width: 960px) {
  .sobre__grade { grid-template-columns: 420px minmax(0, 1fr); gap: 96px; align-items: center; }
  .sobre__fotos { padding-bottom: 40px; position: sticky; top: 120px; align-self: start; }
  .sobre__pratica { width: 190px; right: -48px; }
}

/* ---------- 10. FAQ ---------- */
.faq__grade { display: grid; gap: 32px; }
.faq__lado .secao__intro { margin-bottom: 24px; }
.faq__contato {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px 16px;
  align-items: center;
  padding: 18px;
  border-radius: 20px;
  background: var(--branco);
  box-shadow: 0 24px 48px -36px rgba(124, 45, 68, 0.6);
}
.faq__contato img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 3px var(--rose), 0 0 0 5px var(--pessego-forte); }
.faq__contato-titulo { font: 400 1.25rem/1.25 var(--serif); color: var(--vinho-escuro); }
.faq__contato p:not(.faq__contato-titulo) { font-size: var(--t-pequeno); color: var(--tinta-suave); }
.faq__contato .btn { grid-column: 1 / -1; width: 100%; max-width: none; }

.faq__lista { display: grid; gap: 10px; }
.faq__item {
  border: 1px solid var(--borda);
  border-radius: 16px;
  background: var(--branco);
  transition: border-color var(--t-hover) ease, box-shadow var(--t-ui) var(--ease-out);
}
.faq__item[open] { border-color: var(--pessego-forte); box-shadow: 0 18px 36px -28px rgba(124, 45, 68, 0.55); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 16px 18px 16px 20px;
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq__mais {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--rose);
  transition: background-color var(--t-hover) ease, transform var(--t-ui) var(--ease-out);
}
.faq__mais::before,
.faq__mais::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: var(--vinho);
}
.faq__mais::after { transform: rotate(90deg); }
.faq__item[open] .faq__mais { background: var(--vinho); transform: rotate(45deg); }
.faq__item[open] .faq__mais::before,
.faq__item[open] .faq__mais::after { background: #fff; }
.faq__resposta { padding: 0 20px 20px; }
.faq__resposta p { max-width: 62ch; color: var(--tinta-suave); }
@media (hover: hover) and (pointer: fine) {
  .faq__item:hover { border-color: var(--pessego-forte); }
}

@media (min-width: 960px) {
  .faq__grade { grid-template-columns: 360px minmax(0, 1fr); gap: 64px; align-items: start; }
  .faq__lado { position: sticky; top: 120px; }
}

/* ---------- 11. CTA final + local ---------- */
.final {
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(255, 250, 250, 0.7), transparent 70%),
    var(--blush-forte);
  padding-block: var(--secao);
}
.final__grade { display: grid; gap: 56px; }
.final__cta { display: grid; justify-items: center; text-align: center; }
.traco--final { margin-bottom: 22px; }
.final h2 { color: var(--vinho-escuro); font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.2rem); margin-bottom: 16px; }
.final__cta p { max-width: 42ch; margin-bottom: 32px; font-size: 1.125rem; color: var(--tinta); }
.final__selos { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
.final__selos li { display: flex; align-items: center; gap: 6px; font-size: var(--t-pequeno); font-weight: 700; color: var(--vinho-escuro); }
.final__selos .ico { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--vinho); color: #fff; stroke-width: 3; }

.final__local {
  display: grid;
  overflow: clip;
  border-radius: 24px;
  background: var(--branco);
  box-shadow: 0 34px 64px -40px rgba(124, 45, 68, 0.6);
}
.final__mapa {
  position: relative;
  min-height: 260px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.7) 2px, transparent 2px) 0 0 / 56px 56px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.7) 2px, transparent 2px) 0 0 / 56px 56px,
    var(--rose);
}
.final__mapa-aviso {
  position: absolute;
  inset: 0 0 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
  font-size: var(--t-pequeno);
  color: var(--tinta-suave);
}
.final__mapa-aviso > .ico { width: 40px; height: 40px; color: var(--vinho); }
.final__mapa-mostrar {
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--pessego-forte);
  border-radius: 999px;
  background: var(--branco);
  color: var(--vinho-escuro);
  font: 700 0.875rem/1 var(--sans);
  cursor: pointer;
}
.final__mapa.carregado .final__mapa-aviso { display: none; }
.final__mapa:not(.carregado) .final__mapa-link { top: auto; }
.final__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(0.9); }
/* O link cobre o mapa: um toque abre o Google Maps com o endereço (e não prende a rolagem no celular) */
.final__mapa-link { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 16px 16px 34px; text-decoration: none; }
.final__mapa-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--vinho);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 800;
  box-shadow: 0 14px 28px -14px rgba(124, 45, 68, 0.8);
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.final__mapa-rotulo .ico { width: 18px; height: 18px; }
.final__mapa-link:active .final__mapa-rotulo { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .final__mapa-link:hover .final__mapa-rotulo { background: var(--vinho-hover); }
}
.final__info { padding: 24px 22px 26px; }
.final__info-titulo { margin-bottom: 18px; font-size: 1.75rem; color: var(--vinho-escuro); }
.final__info address { display: grid; gap: 18px; font-style: normal; color: var(--tinta); }
.final__item { display: flex; gap: 14px; align-items: flex-start; }
.final__item > .ico--cheio { fill: currentColor; stroke: none; }
.final__item > .ico { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--rose); color: var(--vinho); }
.final__item strong { display: block; margin-bottom: 2px; color: var(--vinho-escuro); }
.final__item p { color: var(--tinta-suave); }
.final__rotas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.final__rota {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--vinho-escuro);
  text-decoration: none;
  transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease;
}
.final__rota .ico { width: 16px; height: 16px; color: var(--vinho); }
@media (hover: hover) and (pointer: fine) {
  .final__rota:hover { background: var(--rose); border-color: var(--pessego-forte); }
}

@media (min-width: 720px) {
  .final__local { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .final__mapa { min-height: 100%; }
  .final__info { padding: 36px 40px; }
}
@media (min-width: 960px) {
  .final__cta { max-width: 760px; margin-inline: auto; }
  .final__local { width: 100%; max-width: 980px; margin-inline: auto; }
  .final__info address { font-size: var(--t-corpo); }
}

/* ---------- Rodapé (discreto) ---------- */
.rodape {
  background: var(--branco);
  border-top: 1px solid var(--borda);
  font-size: var(--t-pequeno);
  color: var(--tinta-suave);
  padding-block: 32px calc(24px + env(safe-area-inset-bottom));
}
.rodape a { color: var(--tinta); text-decoration: none; transition: color var(--t-hover) ease; }
.rodape__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.rodape__logo { width: 110px; }
.rodape__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.rodape__links a { font-weight: 700; }
.rodape__redes { display: flex; gap: 8px; }
.rodape__rede {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--rose);
  color: var(--vinho) !important;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.rodape__rede .ico { width: 18px; height: 18px; }
.rodape__rede .ico--cheio { fill: currentColor; stroke: none; }
.rodape__base {
  display: grid;
  gap: 6px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--borda);
}
.rodape__legal { font-size: 0.8125rem; line-height: 1.6; color: var(--tinta-suave); }
.rodape__legal a { color: var(--tinta-suave); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pessego-forte); display: inline-block; padding-block: 6px; }
.rodape__base a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pessego-forte); }
@media (hover: hover) and (pointer: fine) {
  .rodape a:hover { color: var(--vinho); }
  .rodape__rede:hover { background: var(--vinho); color: #fff !important; }
}

/* ---------- Botão fixo (só celular) ---------- */
.fixo {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 250, 250, 0.96);
  border-top: 1px solid var(--borda);
  transform: translateY(110%);
  transition: transform 0.25s ease;
}
.fixo .btn { display: flex; width: 100%; max-width: none; box-shadow: none; }
/* Botões dentro de cartões estreitos (serviços, contato do FAQ): ajustam pela largura do cartão */
.servico__corpo, .faq__contato { container-type: inline-size; }
@container (max-width: 300px) {
  .servico .btn, .faq__contato .btn { gap: 6px; padding-inline: 10px; font-size: 0.9375rem; }
  .servico .btn__icone, .faq__contato .btn__icone { width: 18px; height: 18px; }
}
/* Celulares estreitos (320 a 374 px): o texto do botão cabe numa linha só */
@media (max-width: 374px) {
  .btn { gap: 8px; padding-inline: 14px; font-size: 1rem; }
  .btn__icone { width: 20px; height: 20px; }
}
.fixo.on { transform: none; }
body.tem-fixo { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

@media (min-width: 960px) {
  .fixo { display: none; }
  body.tem-fixo { padding-bottom: 0; }
}

/* ==========================================================
   Movimento
   Tudo aparece normalmente sem JS ou com "reduzir movimento".
   Os estados escondidos só valem com html.js + no-preference.
   ========================================================== */

/* Molduras que recortam a foto quando ela cresce ou desliza */
.hero__foto { overflow: clip; }
.servico picture { display: block; overflow: clip; }
@media (min-width: 960px) {
  .hero__foto { border-radius: 22px; box-shadow: 0 40px 80px -40px rgba(124, 45, 68, 0.55); }
  .hero__foto img { box-shadow: none; }
}

/* Resposta ao toque e ao mouse */
.btn:active { transform: scale(0.97); }
.btn__icone { transition: transform var(--t-ui) var(--ease-out); }
.dor { transition: border-color var(--t-hover) ease, transform var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out); }
.dor:active { transform: scale(0.98); }
.servico__foto { transition: transform 700ms var(--ease-soft); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background: var(--vinho-hover);
    transform: translateY(-2px);
    box-shadow: 0 20px 36px -14px rgba(173, 69, 96, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
  .btn:hover .btn__icone { transform: rotate(-12deg) scale(1.08); }
  .dor:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -18px rgba(124, 45, 68, 0.5); }
  .servico:hover .servico__foto { transform: scale(1.04); }
  .identifica__lista li { transition: transform var(--t-ui) var(--ease-out); }
  .identifica__lista li:hover { transform: translateX(4px); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Hero: tudo assentado em 1,2s */
  .hero__foto img { scale: 1.06; animation: assentar 1400ms var(--ease-expo) both; }
  .hero__assunto { animation: chegar 600ms var(--ease-out) both; }
  .hero__titulo .pal > span { transform: translateY(108%); animation: palavra 900ms var(--ease-expo) forwards; animation-delay: calc(60ms + var(--i) * 70ms); }
  .hero .traco path {
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    animation: desenhar 1100ms 380ms var(--ease-in-out) forwards;
  }
  /* Só CSS: roda mesmo se o JS falhar, nada fica escondido */
  .hero__apoio,
  .hero .btn,
  .garantias li { animation: chegar 600ms var(--ease-out) both; }
  .hero__apoio { animation-delay: 420ms; }
  .hero .btn { animation-delay: 520ms; }
  .garantias li:nth-child(1) { animation-delay: 640ms; }
  .garantias li:nth-child(2) { animation-delay: 710ms; }
  .garantias li:nth-child(3) { animation-delay: 780ms; }

  /* Menu entra junto com o hero */
  .topo { animation: chegar-topo 600ms var(--ease-out) backwards; }


  /* Brilho que passa uma vez pelo botão do hero */
  .hero .btn { position: relative; overflow: hidden; }
  .hero .btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: brilho 1100ms var(--ease-in-out) 1500ms forwards;
    pointer-events: none;
  }

  /* Foto segue o mouse de leve (desktop) */
  @media (min-width: 960px) {
    .hero__foto { transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -10px), 0); transition: transform 800ms var(--ease-out); }
  }

  /* Seções: cada parte chega na ordem de leitura, uma vez */
  .js [data-anima] {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 550ms var(--ease-out), transform 750ms var(--ease-expo);
    transition-delay: var(--atraso, 0ms);
  }
  .js [data-anima="esquerda"] { transform: translateX(-28px); }
  .js [data-anima="direita"] { transform: translateX(28px); }
  .js [data-anima="cresce"] { transform: scale(0.94); }
  .js [data-anima].vis { opacity: 1; transform: none; }

  /* Fotos que abrem de baixo para cima e assentam */
  /* O recorte fica na imagem: o observador ignora alvos recortados */
  .js [data-anima="foto"] { opacity: 1; transform: none; }
  .js [data-anima="foto"] img {
    clip-path: inset(0 0 100% 0 round var(--raio));
    scale: 1.12;
    transition: clip-path 850ms var(--ease-in-out), scale 1200ms var(--ease-soft);
    transition-delay: var(--atraso, 0ms);
  }
  .js [data-anima="foto"].vis img { clip-path: inset(0 0 0 0 round var(--raio)); scale: 1; }

  /* Ícones de check e selos chegam um pouco depois da linha */
  .js [data-anima] .selo,
  .js .paraquem__lista [data-anima] .ico,
  .js .comparacao__lado--aqui [data-anima] .ico { scale: 0.4; transition: scale 500ms var(--ease-out); transition-delay: calc(var(--atraso, 0ms) + 220ms); }
  .js [data-anima].vis .selo,
  .js .paraquem__lista [data-anima].vis .ico,
  .js .comparacao__lado--aqui [data-anima].vis .ico { scale: 1; }

  /* Linha do tempo: o traço desce até o próximo passo */
  .js .passos__lista li:not(:last-child)::after { transform: scaleY(0); transform-origin: top; transition: transform 800ms var(--ease-in-out); transition-delay: calc(var(--atraso, 0ms) + 300ms); }
  .js .passos__lista li.vis::after { transform: none; }
  .js .passos__lista li::before { scale: 0.5; transition: scale 500ms var(--ease-out); transition-delay: var(--atraso, 0ms); }
  .js .passos__lista li.vis::before { scale: 1; }

  /* O traço caligráfico se desenha de novo no convite final */
  .js .traco--final path { stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1300ms var(--ease-in-out) 200ms; }
  .js .traco--final.vis path { stroke-dashoffset: 0; }

  /* Marcar uma região no "Onde dói?" */
  .dor[aria-pressed="true"] .dor__marca { animation: marcar 320ms var(--ease-out); }
  .regiao.on .regiao__mancha,
  .regiao.on .regiao__nucleo { animation: pulsar 700ms var(--ease-out); transform-box: fill-box; transform-origin: center; }
  .regiao.on .regiao__linha { stroke-dashoffset: 0; animation: tracar 700ms var(--ease-out); }
  .dores__bolha.mudou { animation: bolha 360ms var(--ease-out); }
  .corpo__giro.virando { animation: virar 420ms var(--ease-in-out); }

  /* FAQ: o cartão abre com a altura animada (navegadores que suportam) */
  .faq { interpolate-size: allow-keywords; }
  .faq__item::details-content { block-size: 0; overflow: clip; transition: block-size 320ms var(--ease-out), content-visibility 320ms allow-discrete; }
  .faq__item[open]::details-content { block-size: auto; }
  .faq__item[open] .faq__resposta { animation: chegar-curto 360ms var(--ease-out); }

  /* Foto do hero acompanha a rolagem, devagar */
  @supports (animation-timeline: view()) {
    .hero__foto img {
      animation: assentar 1400ms var(--ease-expo) both, derivar linear both;
      animation-timeline: auto, view();
      animation-range: normal, exit 0% exit 100%;
    }
  }
}

@keyframes assentar { from { scale: 1.16; } to { scale: 1.06; } }
@keyframes derivar { from { translate: 0 0; } to { translate: 0 4%; } }
@keyframes palavra { to { transform: none; } }
@keyframes chegar-topo { from { opacity: 0; transform: translateY(-16px); } }
@keyframes brilho { to { transform: translateX(120%); } }
@keyframes gaveta { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes desenhar { to { stroke-dashoffset: 0; } }
@keyframes chegar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes chegar-curto { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes marcar { 0% { scale: 0.6; } 60% { scale: 1.12; } 100% { scale: 1; } }
@keyframes pulsar { 0% { scale: 0.3; } 60% { scale: 1.15; } 100% { scale: 1; } }
@keyframes tracar { from { opacity: 0; } to { opacity: 1; } }
@keyframes virar { 50% { transform: scaleX(0.04); } }
@keyframes bolha { 0% { scale: 0.97; } 60% { scale: 1.015; } 100% { scale: 1; } }

/* ==========================================================
   Animações presas à rolagem (variáveis --p --e --s --c vêm do JS)
   Sem JS ou com "reduzir movimento", a classe .rola não existe e
   tudo fica na posição final.
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Hero: o texto sobe e esmaece enquanto a página desce */
  .rola .hero__texto { translate: 0 calc(var(--s, 0) * -80px); opacity: calc(1 - var(--s, 0) * 0.9); }

  /* Frase que se pinta palavra por palavra */
  .rola [data-tinta] span { opacity: clamp(0.18, calc(var(--e, 1) * var(--n, 1) * 1.2 - var(--i, 0)), 1); }

  /* Profundidade: fotos andam em velocidades diferentes da página */
  .rola .prova__foto { translate: 0 calc((var(--p, 0.5) - 0.5) * -60px); }
  .rola .servico picture img { translate: 0 calc((var(--p, 0.5) - 0.5) * 10%); }
  .js .servico [data-anima="foto"].vis img { scale: 1.12; }
  .rola .sobre__retrato { translate: 0 calc((var(--p, 0.5) - 0.5) * -40px); }
  .rola .sobre__pratica { translate: 0 calc((var(--p, 0.5) - 0.5) * 80px); }

  /* Linha do tempo: o traço entre os passos enche conforme a leitura */
  .rola .passos__lista li:not(:last-child)::after { transform: scaleY(var(--c, 1)); transition: none; }

  /* Convite final cresce até o tamanho cheio ao entrar */
  .rola .final h2 { scale: calc(0.86 + var(--e, 1) * 0.14); }

  @media (min-width: 960px) {
    .rola .hero__visual { scale: calc(1 - var(--s, 0) * 0.08); translate: 0 calc(var(--s, 0) * 40px); }
  }
}

/* ---------- Página de texto (Política de privacidade) ---------- */
.pagina-texto .topo__barra { justify-content: space-between; }
.politica { padding: 120px 0 72px; background: var(--branco); }
.politica__wrap { max-width: calc(760px + var(--gutter) * 2); }
.politica__titulo { font-size: var(--t-h2); color: var(--vinho-escuro); margin-bottom: 8px; }
.politica__data { margin-bottom: 32px; font-size: var(--t-pequeno); color: var(--tinta-suave); }
.politica h2 { margin: 40px 0 12px; font-size: 1.5rem; color: var(--vinho-escuro); }
.politica h3 { margin: 24px 0 8px; font: 800 1.0625rem/1.4 var(--sans); color: var(--tinta); }
.politica p, .politica li { color: var(--tinta-suave); line-height: 1.7; }
.politica p + p { margin-top: 12px; }
.politica ul { margin: 10px 0 0; padding-left: 1.2em; display: grid; gap: 6px; }
.politica strong { color: var(--tinta); }
.politica__resumo { padding: 22px 24px; border-radius: 18px; background: var(--rose); }
.politica__resumo h2 { margin-top: 0; font-size: 1.25rem; }
.politica__tabela:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.politica__tabela { overflow-x: auto; margin: 14px 0; border: 1px solid var(--borda); border-radius: 14px; }
.politica table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--t-pequeno); }
.politica th, .politica td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--borda); color: var(--tinta-suave); }
.politica th { background: var(--rose); color: var(--tinta); font-weight: 800; }
.politica tr:last-child td { border-bottom: 0; }
.politica__volta { margin-top: 40px; }
.rodape__base--so { margin-top: 0; }
.rodape__cookies { padding: 0; border: 0; background: none; font: inherit; color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pessego-forte); cursor: pointer; }
/* Links legais: quebram de forma limpa, sem recuo */
.rodape__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; font-size: 0.875rem; }
.pagina-texto .rodape__base { margin-top: 0; padding-top: 0; border-top: 0; }
/* Área de toque confortável nos links pequenos do rodapé */
.rodape__base a, .rodape__cookies { display: inline-block; padding-block: 8px; }

/* ---------- Aviso de cookies ---------- */
.cookies {
  position: fixed;
  z-index: 40;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: grid;
  gap: 12px;
  max-width: 460px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--branco);
  box-shadow: 0 24px 60px -20px rgba(124, 45, 68, 0.55);
  font-size: var(--t-pequeno);
  color: var(--tinta-suave);
}
.cookies__titulo { font: 400 1.25rem/1.2 var(--serif); color: var(--vinho-escuro); }
.cookies__titulo:focus { outline: none; }
.cookies__painel { display: grid; gap: 4px; border-top: 1px solid var(--borda); }
.cookies__painel[hidden] { display: none; }
.cookies__opcao { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.cookies__opcao strong { display: block; color: var(--tinta); }
.cookies__opcao span { display: block; font-size: 0.8125rem; line-height: 1.45; }
.cookies__opcao label { cursor: pointer; }
/* Interruptor */
.cookies__chave {
  appearance: none;
  flex: none;
  position: relative;
  width: 44px;
  height: 26px;
  margin: 0;
  border-radius: 999px;
  background: #d9c3c8;
  cursor: pointer;
  transition: background-color var(--t-hover) ease;
}
.cookies__chave::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform var(--t-ui) var(--ease-out);
}
.cookies__chave:checked { background: var(--vinho); }
.cookies__chave:checked::after { transform: translateX(18px); }
.cookies__chave:disabled { opacity: 0.55; cursor: not-allowed; }
.cookies__botoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.cookies__botao {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--branco);
  color: var(--tinta);
  font: 700 0.9375rem/1 var(--sans);
  cursor: pointer;
}
.cookies__botao--aceitar { border-color: var(--vinho); background: var(--vinho); color: #fff; }
body.tem-fixo .cookies { bottom: calc(92px + env(safe-area-inset-bottom)); max-height: calc(100vh - 104px); }
@media (min-width: 960px) {
  .cookies { left: 24px; right: auto; bottom: 24px; }
  body.tem-fixo .cookies { bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}