/* Direção B, "Consultório": pedra fria, sálvia e oliva profundo. Assinatura: a pauta em onda da "sinfonia". */

:root {
  --pedra: #E8E9E4;
  --pedra-2: #DCDFD8;
  --papel: #F7F7F3;
  --salvia: #B7C4B6;
  --salvia-claro: #D6DED3;
  --oliva: #25352A;
  --oliva-escuro: #18231C;
  --tinta: #141813;
  --cinza: #4A5049;
  --linha: rgba(20, 24, 19, .16);
  --argila: #B4704F;
  --argila-claro: #E7C9B6;
  --wa: #1D7247;

  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;

  --gutter: 16px;
  --max: 1200px;
  --raio: 20px;
  --raio-p: 14px;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --sombra: 0 1px 2px rgba(20, 24, 19, .06), 0 14px 34px -14px rgba(20, 24, 19, .22);
  --onda-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 360'%3E%3Cpath d='M7 0 C 1 30, 1 60, 7 90 S 13 150, 7 180 S 1 240, 7 270 S 13 330, 7 360' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
  --onda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0 6 C 10 0, 20 0, 30 6 S 50 12, 60 6 S 80 0, 90 6 S 110 12, 120 6' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E");
}

@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--pedra);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
@media (max-width: 719px) { html { scroll-padding-bottom: 96px; } }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
::selection { background: var(--salvia); }
:focus-visible { outline: 2px solid var(--oliva); outline-offset: 3px; border-radius: 6px; }
.nw { white-space: nowrap; }

.pular { position: absolute; left: -999px; top: 8px; background: var(--tinta); color: var(--papel); padding: 8px 14px; border-radius: 99px; z-index: 100; }
.pular:focus { left: 8px; }

.pendente { color: var(--argila); font-size: .86em; font-style: normal; white-space: nowrap; }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 1px solid transparent;
  font: 500 16px/1 var(--sans); text-decoration: none; letter-spacing: -.005em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease), background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
  user-select: none;
}
.btn:active { transform: scale(.97); }
.btn .ico { width: 20px; height: 20px; flex: none; }
.btn--wa { background: var(--oliva); color: var(--papel); box-shadow: 0 8px 20px -10px rgba(24, 35, 28, .75); }
.btn--linha { border-color: var(--linha); background: transparent; }
.btn--claro { background: var(--papel); color: var(--oliva-escuro); }
.btn--pequeno { min-height: 40px; padding: 0 16px; font-size: 15px; background: var(--oliva); color: var(--papel); }
.btn--cartao { margin-top: auto; align-self: flex-start; background: var(--papel); border-color: var(--linha); min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn--cartao span { transition: transform 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .btn--wa:hover, .btn--pequeno:hover { background: var(--oliva-escuro); }
  .btn--linha:hover { border-color: var(--tinta); background: rgba(255, 255, 255, .4); }
  .btn--claro:hover { background: #fff; }
  .btn--cartao:hover { background: #fff; border-color: rgba(20, 24, 19, .32); }
  .btn--cartao:hover span { transform: translateX(3px); }
}

/* Topo */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--pedra) 84%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--linha);
}
.topo__in { max-width: none; margin: 0 auto; padding: 10px var(--gutter); display: flex; align-items: center; gap: 16px; }
.marca { display: flex; flex-direction: column; text-decoration: none; line-height: 1.1; margin-right: auto; min-width: 0; }
.marca__nome { font-family: var(--serif); font-size: 26px; letter-spacing: -.01em; }
.marca__area { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); white-space: nowrap; }
@media (max-width: 419px) { .marca__area { font-size: 10px; letter-spacing: .04em; } }
@media (max-width: 719px) { .topo__agendar { display: none; } .cartao { padding-bottom: 88px; } }
.nav { display: none; gap: 26px; font-size: 15px; }
.nav a { text-decoration: none; color: var(--cinza); transition: color 160ms ease; }
.nav a:hover { color: var(--tinta); }
@media (min-width: 1040px) { .nav { display: flex; } .menu { display: none; } }

.menu { position: relative; }
.menu summary { list-style: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linha); display: grid; place-content: center; gap: 5px; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 16px; height: 1.5px; background: var(--tinta); transition: transform 200ms var(--ease); }
.menu[open] summary span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu[open] summary span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.menu__lista {
  position: absolute; right: 0; top: calc(100% + 10px); width: min(280px, calc(100vw - 32px));
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-p); box-shadow: var(--sombra);
  padding: 8px; display: flex; flex-direction: column;
  transform-origin: top right;
}
.menu__lista a { padding: 12px 14px; border-radius: 10px; text-decoration: none; }
.menu__lista a:active { background: var(--pedra-2); }
@media (prefers-reduced-motion: no-preference) {
  .menu[open] .menu__lista { animation: menuIn 200ms var(--ease); }
}
@keyframes menuIn { from { opacity: 0; transform: scale(.96) translateY(-4px); } }

/* Seções */
main > section { scroll-margin-top: 66px; }
.secao { max-width: var(--max); margin: 0 auto; padding: clamp(72px, 8vw, 112px) var(--gutter); }
.ajuda, .duvidas { padding-bottom: 32px; }
.hormonios { padding-block: 32px; }
.sobre, .local { padding-top: 40px; }
.rotulo { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--oliva); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; font-weight: 500; }
.rotulo::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--argila); }
.cabeca h2, .secao h2 { font-size: clamp(34px, 5.4vw, 60px); }
.cabeca__intro { margin-top: 18px; max-width: 56ch; color: var(--cinza); font-size: 18px; }
.cabeca { margin-bottom: 44px; }

/* 1. Abertura: foto sangrando + triagem aberta */
.abertura { display: grid; background: var(--papel); border-bottom: 1px solid var(--linha); }
.abertura__foto { margin: 0; position: relative; overflow: hidden; background: var(--pedra-2); }
.abertura__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; filter: saturate(.84) contrast(1.06); }
/* Degradê quente sutil por cima da foto, e escuro na base para os selos */
.abertura__foto::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(rgba(240, 232, 220, .12), transparent); }
.abertura__foto::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(to top, rgba(20, 24, 19, .72), transparent); pointer-events: none; }
.abertura__selo {
  position: absolute; left: 16px; right: 16px; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: #fff;
}
.abertura__selo span { padding: 5px 11px; border-radius: 999px; background: rgba(20, 24, 19, .4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .22); line-height: 1.3; }
.sobretitulo { font-size: 13.5px; letter-spacing: .04em; color: var(--cinza); margin-bottom: 10px; }
.abertura h1 { font-size: clamp(3rem, 5.2vw, 4.4rem); line-height: .98; letter-spacing: -.04em; font-weight: 500; }
.quebra { display: block; }
.frase { font-family: var(--serif); font-size: clamp(22px, 1.9vw, 26px); line-height: 1.22; margin-top: 12px; color: var(--oliva); max-width: 34ch; }
.frase em { color: var(--argila); }

/* Celular: foto no topo com o h1 por cima, no degradê da base */
@media (max-width: 899px) {
  .abertura { grid-template-columns: 100%; }
  .abertura__texto { display: contents; }
  .abertura__foto { grid-area: 1 / 1; aspect-ratio: 4 / 5; max-height: 52svh; width: 100%; }
  .abertura__foto::after { height: 70%; background: linear-gradient(to top, rgba(20, 24, 19, .86) 8%, rgba(20, 24, 19, .35) 55%, transparent); }
  .abertura__selo { display: none; }
  .abertura__titulo { grid-area: 1 / 1; align-self: end; position: relative; z-index: 3; padding: 0 var(--gutter) 18px; color: #fff; }
  .abertura__titulo .sobretitulo { color: rgba(255, 255, 255, .8); margin-bottom: 6px; font-size: 12.5px; }
  .abertura h1 { font-size: clamp(2.5rem, 11.4vw, 3rem); }
  .frase, .comecar, .direto { margin-inline: var(--gutter); }
  .frase { margin-top: 20px; }
  .direto { margin-bottom: 40px; }
}
@media (min-width: 900px) {
  .abertura { grid-template-columns: 44% 56%; min-height: calc(100svh - 65px); }
  .abertura__foto img { position: absolute; inset: 0; }
  .abertura__selo { left: 24px; right: 24px; bottom: 24px; font-size: 12.5px; }
  .abertura__texto { padding: 22px clamp(32px, 4.6vw, 76px) 26px; display: flex; flex-direction: column; justify-content: center; max-width: 820px; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .abertura__texto { padding-block: 14px 16px; }
  .frase { margin-top: 8px; font-size: 21px; }
  .comecar { margin-top: 14px; }
}

/* Triagem dentro da abertura */
.comecar { margin-top: 20px; scroll-margin-top: 84px; }
.comecar__titulo { font-size: 22px; letter-spacing: -.015em; margin-bottom: 10px; }
.comecar__titulo em { color: var(--oliva); }

.triagem {
  background: #fff; border-radius: 22px; padding: 18px 18px 14px;
  border: 1px solid var(--linha);
  box-shadow: 0 24px 50px -30px rgba(24, 35, 28, .45);
  position: relative;
}
@media (min-width: 700px) { .triagem { padding: 16px 24px 12px; } }

.pauta { height: 16px; margin-bottom: 8px; }
.pauta svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pauta path { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.pauta__base { stroke: rgba(20, 24, 19, .14); }
.pauta__linha { stroke: var(--oliva); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 650ms var(--ease); }
html:not(.js) .pauta { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .pauta__base { stroke-dasharray: 100; animation: pautaDesenha 900ms var(--ease) both; }
  @keyframes pautaDesenha { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
  .pauta__linha { transition-delay: 0ms; }
  .js .frase em { display: inline-block; animation: sinfonia 700ms var(--ease) 200ms both; }
  @keyframes sinfonia { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } }
}

.etapa { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.etapa legend { font-size: clamp(19px, 1.7vw, 22px); letter-spacing: -.015em; line-height: 1.2; font-weight: 500; padding: 0; margin-bottom: 12px; }
.etapa__num { display: inline-block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--argila); font-weight: 600; margin-right: 10px; vertical-align: 2px; }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; max-width: 100%; }
.opcao input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.opcao span {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 9px 16px 9px 12px; border-radius: 999px;
  border: 1px solid var(--linha); background: var(--papel); font-size: 15.5px; line-height: 1.3;
  transition: transform 160ms var(--ease), border-color 200ms ease, background-color 200ms ease, color 200ms ease;
}
.opcao span::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid rgba(20, 24, 19, .3); background: #fff;
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.opcao:active span { transform: scale(.97); }
@media (min-width: 900px) {
  .opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .opcao span { height: 100%; border-radius: 14px; min-height: 46px; padding-block: 8px; font-size: 15px; }
}
.opcao input:checked + span { border-color: var(--oliva); background: var(--oliva); color: var(--papel); }
.opcao input:checked + span::before { border-color: var(--papel); background: var(--salvia); box-shadow: 0 0 0 3px var(--oliva) inset; }
.opcao input:focus-visible + span { outline: 2px solid var(--oliva); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .opcao:hover span { border-color: rgba(20, 24, 19, .45); background: #fff; } }

/* Com JS: uma etapa por vez */
.js .etapa, .js .resultado { display: none; }
.js .etapa.ativa, .js .resultado.ativa { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js .etapa.ativa, .js .resultado.ativa { animation: etapaIn 360ms var(--ease); }
  @keyframes etapaIn { from { opacity: 0; transform: translateX(12px); filter: blur(2px); } }
  .js .triagem.volta .etapa.ativa { animation-name: etapaVolta; }
  @keyframes etapaVolta { from { opacity: 0; transform: translateX(-12px); filter: blur(2px); } }
}

.resultado { margin-bottom: 14px; }
.resultado__titulo { font-size: 18px; line-height: 1.4; letter-spacing: -.01em; margin-bottom: 14px; }
.bolha { background: #E3EEE2; border-radius: 16px 16px 16px 5px; padding: 12px 16px 14px; margin-bottom: 16px; max-width: 52ch; }
.bolha__de { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--wa); margin-bottom: 4px; font-weight: 600; }
.bolha p { font-size: 15.5px; }
.resultado .btn--wa { background: var(--wa); }
@media (hover: hover) and (pointer: fine) { .resultado .btn--wa:hover { background: #155C38; } }

.triagem__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; border-top: 1px solid var(--linha); padding-top: 10px; }
.voltar { display: none; min-height: 44px; padding: 0 12px 0 2px; background: none; border: 0; font: 500 15px var(--sans); color: var(--cinza); cursor: pointer; border-radius: 10px; }
.js .voltar.visivel { display: inline-flex; align-items: center; }
.voltar:hover { color: var(--tinta); }
.aviso { font-size: 12.5px; color: var(--cinza); flex: 1 1 240px; line-height: 1.4; }
html:not(.js) .resultado { display: block; }

.direto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.direto > span { font-size: 14.5px; color: var(--cinza); width: 100%; }
@media (min-width: 560px) { .direto > span { width: auto; } }
.direto__link { font-size: 15px; color: var(--oliva); text-underline-offset: 3px; text-decoration-color: rgba(37, 53, 42, .35); min-height: 44px; display: inline-flex; align-items: center; }

/* 2. Bento */
.bento { display: grid; gap: 14px; }
@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(12, 1fr); gap: 18px; }
  #emagrecimento, #menopausa, #reposicao, #sono { grid-column: span 6; }
  .cartao--tambem { grid-column: 1 / -1; }
}
.cartao {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  padding: 30px 24px 28px; border-radius: var(--raio);
  scroll-margin-top: 90px;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
@media (min-width: 900px) { .cartao { padding: 44px 38px 36px; } }
/* Assinatura: pauta em onda no alto de cada cartão */
.cartao:not(.cartao--tambem)::before {
  content: ""; position: absolute; top: 18px; left: 24px; width: 96px; height: 10px;
  background: currentColor; opacity: .35;
  -webkit-mask: var(--onda) left center / 96px 10px no-repeat; mask: var(--onda) left center / 96px 10px no-repeat;
}
@media (min-width: 900px) { .cartao:not(.cartao--tambem)::before { top: 22px; left: 38px; } }
.cartao h3 { font-size: clamp(26px, 3vw, 36px); }
.cartao p { color: color-mix(in srgb, currentColor 80%, transparent); max-width: 58ch; }
.cartao h4 { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; margin-top: 6px; }
.cartao--salvia { background: var(--salvia); }
.cartao--salvia h4 { color: var(--oliva-escuro); }
.cartao--areia { background: var(--oliva); color: var(--papel); }
.cartao--areia h4 { color: var(--salvia); }
.cartao--areia .btn--cartao { background: var(--papel); color: var(--oliva-escuro); border-color: transparent; }
.cartao--papel { background: #fff; border: 1px solid var(--linha); }
.cartao--papel h4 { color: var(--oliva); }
.cartao--pedra { background: var(--pedra-2); }
.cartao--pedra h4 { color: var(--oliva); }
.cartao--tambem { background: transparent; border: 1px solid var(--linha); padding-block: 26px; }
.cartao--tambem h3 { font-size: 22px; }
@media (hover: hover) and (pointer: fine) {
  .cartao:not(.cartao--tambem):hover { transform: translateY(-3px); box-shadow: var(--sombra); }
}
.lista { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 8px; }
.lista li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; font-size: 16px; }
.lista li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-top: .66em; opacity: .55; }
.pilulas { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pilulas li { padding: 10px 16px; border-radius: 999px; background: #fff; font-size: 15px; line-height: 1.35; border: 1px solid var(--linha); }
.pilulas__pendente { background: transparent !important; border: 1px dashed var(--argila) !important; color: var(--cinza); }
.pilulas small { color: var(--argila); }

/* Ilustração do cartão: 4:5. Enquanto a imagem não existe, fica o fundo com a onda da marca. */
.cartao__topo { display: grid; grid-template-columns: 38% 1fr; grid-template-areas: "img h3" "p p"; gap: 16px 18px; align-items: end; }
.cartao__topo .ilustra { grid-area: img; }
.cartao__topo h3 { grid-area: h3; }
.cartao__topo p { grid-area: p; }
@media (min-width: 1000px) {
  .cartao__topo { grid-template-columns: 34% 1fr; grid-template-areas: "img h3" "img p"; align-items: start; column-gap: 26px; }
  .cartao__topo h3 { align-self: start; }
}
.ilustra {
  position: relative; aspect-ratio: 4 / 5; width: 100%; border-radius: 14px; overflow: hidden;
  background: color-mix(in srgb, currentColor 7%, transparent);
}
.ilustra::before {
  content: ""; position: absolute; inset: 0; background: currentColor; opacity: .16;
  -webkit-mask: var(--onda) center / 60px 6px repeat; mask: var(--onda) center / 60px 6px repeat;
}
.ilustra::after { content: ""; position: absolute; inset: 0; background: var(--ilustra) center / cover no-repeat; }

/* 2c. Como os hormônios conversam */
.hormonios .cabeca h2 em { color: var(--oliva); }
.eixo { display: grid; gap: 28px; align-items: start; position: relative; }
@media (min-width: 900px) { .eixo { grid-template-columns: .8fr 1.2fr; gap: 56px; } }
.eixo__figura {
  margin: 0; position: relative; background: #fff; border: 1px solid var(--linha); border-radius: 28px;
  padding: 24px 16px 12px; color: var(--oliva);
  background-image: radial-gradient(60% 50% at 50% 30%, rgba(183, 196, 182, .28), transparent 70%);
}
.eixo__figura svg { display: block; width: 100%; max-height: min(64svh, 560px); margin: 0 auto; overflow: visible; }
.corpo path, .corpo ellipse { fill: none; stroke: var(--tinta); stroke-width: 1.3; stroke-linecap: round; opacity: .7; vector-effect: non-scaling-stroke; }
.corpo .corpo__base { opacity: .2; }
.eixo__setas path { fill: none; stroke: var(--oliva); stroke-width: 1.2; stroke-dasharray: 3 5; opacity: .55; vector-effect: non-scaling-stroke; }
.ponto { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.ponto__aura { fill: var(--salvia); opacity: 0; transition: opacity 250ms ease; }
.ponto__anel { fill: #fff; stroke: var(--oliva); stroke-width: 1.4; transition: fill 200ms ease; }
.ponto__nucleo { fill: var(--argila); }
.ponto:hover .ponto__aura, .ponto:focus-visible .ponto__aura { opacity: .55; }
.ponto:focus-visible .ponto__anel { stroke-width: 2.4; }
.ponto.ativo .ponto__aura { opacity: .7; }
.ponto.ativo .ponto__anel { fill: var(--oliva); }
.ponto.ativo .ponto__nucleo { fill: #fff; }
.ponto.ligado .ponto__anel { fill: var(--salvia-claro); stroke-width: 2; }
.ponto.ligado .ponto__aura { opacity: .35; }
@media (max-width: 899px) { .ponto__aura { r: 11px; } }
.eixo__pulsos path { fill: none; stroke: var(--argila); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 14 120; stroke-dashoffset: 14; opacity: 0; }
.eixo__pulsos path.corre { animation: corre 600ms var(--ease) forwards; }
@keyframes corre { 0% { stroke-dashoffset: 14; opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
.eixo__setas path.aceso { stroke: var(--argila); opacity: .9; }
.eixo__ligacao { display: none; }
@media (prefers-reduced-motion: reduce) { .eixo__pulsos { display: none; } .eixo__ligacao path.desenha { animation: none !important; } .triagem.destaque { animation: none; } }
@media (min-width: 900px) {
  .eixo__ligacao { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
  .eixo__ligacao path { fill: none; stroke: var(--argila); stroke-width: 1.3; stroke-dasharray: 100; stroke-dashoffset: 0; opacity: .7; }
  .eixo__ligacao path.desenha { animation: liga 600ms var(--ease); }
  @keyframes liga { from { stroke-dashoffset: 100; } }
}
@media (prefers-reduced-motion: no-preference) {
  .eixo__setas path { animation: fluxo 1.6s linear infinite; }

  @keyframes fluxo { to { stroke-dashoffset: -16; } }
  .ponto.ativo .ponto__aura { animation: pulso 2.2s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes pulso { 0% { transform: scale(.7); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
}

.eixo__abas { display: none; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
@media (min-width: 900px) {
  .eixo__painel { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: start; position: relative; z-index: 1; }
  .js .eixo__abas { flex-direction: column; flex-wrap: nowrap; margin: 0; }
  .eixo__aba { text-align: left; justify-content: flex-start; border-radius: 14px; min-height: 48px; }
}
.eixo__aba { display: inline-flex; align-items: center; }
.js .eixo__abas { display: flex; }
.eixo__aba {
  min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linha); background: transparent;
  font: 500 14.5px var(--sans); color: var(--tinta); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease);
}
.eixo__aba:active { transform: scale(.97); }
.eixo__aba[aria-selected="true"] { background: var(--oliva); border-color: var(--oliva); color: var(--papel); }
@media (hover: hover) and (pointer: fine) { .eixo__aba:not([aria-selected="true"]):hover { border-color: rgba(20, 24, 19, .4); background: #fff; } }
.eixo__textos { display: grid; gap: 12px; }
.glandula { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 24px 22px; position: relative; overflow: hidden; }
@media (min-width: 900px) { .glandula { padding: 34px 36px; } }
.glandula::before {
  content: ""; display: block; width: 96px; height: 10px; margin-bottom: 16px; background: var(--argila); opacity: .7;
  -webkit-mask: var(--onda) left center / 96px 10px no-repeat; mask: var(--onda) left center / 96px 10px no-repeat;
}
.glandula h3 { font-size: clamp(26px, 2.8vw, 34px); }
.glandula h3 span { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--oliva); letter-spacing: -.01em; }
.glandula p { margin-top: 12px; font-size: 18px; color: color-mix(in srgb, var(--tinta) 84%, transparent); max-width: 50ch; }
.glandula__liga { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px !important; color: var(--cinza) !important; margin-top: 20px !important; }
.glandula__liga a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px;
  background: var(--salvia-claro); color: var(--oliva-escuro); text-decoration: none; font-weight: 500; font-size: 14.5px;
  transition: background-color 200ms ease;
}
.glandula__liga a:hover { background: var(--salvia); }
.js .glandula { display: none; }
.js .glandula.ativa { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js .glandula.ativa { animation: etapaIn 320ms var(--ease); }
}
.eixo > *, .eixo__painel > * { min-width: 0; }
.eixo__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; }
@media (min-width: 900px) {
  .eixo { align-items: stretch; }
  .eixo__painel { grid-template-rows: auto 1fr; align-content: stretch; }
  .js .eixo__abas { grid-row: 1 / span 2; }
  .eixo__cta { grid-column: 2; align-self: end; margin-top: 0; }
}
@media (max-width: 899px) {
  .eixo__figura svg { max-height: 52vh; }
  .js .eixo__abas { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .js .eixo__abas::-webkit-scrollbar { display: none; }
  .eixo__aba { flex: none; scroll-snap-align: start; }
  .eixo { gap: 16px; }
}
.legenda { font-size: 13.5px; color: var(--cinza); }

/* 4. Sobre */
.sobre__grade { display: grid; gap: 40px; }
@media (min-width: 900px) { .sobre__grade { grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; } }
.sobre__foto {
  margin: 0; position: relative; border-radius: var(--raio); overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--pedra-2); box-shadow: var(--sombra);
}
.sobre__foto { aspect-ratio: 1 / 1; }
@media (min-width: 900px) {
  .sobre__grade { align-items: stretch; }
  .sobre__foto { aspect-ratio: auto; height: 100%; min-height: 520px; }
  .sobre__foto img { position: absolute; inset: 0; object-position: 50% 30%; }
}
.sobre__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; filter: saturate(.82) contrast(1.06); }
.sobre__foto::after { content: ""; position: absolute; inset: 35% 0 0 0; background: linear-gradient(to top, rgba(20, 24, 19, .82), rgba(20, 24, 19, .35) 55%, transparent); }
.citacao { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0; padding: 24px 22px 26px; }
@media (min-width: 900px) { .citacao { padding: 32px 34px 36px; } }
.citacao::before {
  content: ""; display: block; width: 96px; height: 10px; margin-bottom: 14px; background: var(--salvia);
  -webkit-mask: var(--onda) left center / 96px 10px no-repeat; mask: var(--onda) left center / 96px 10px no-repeat;
}
.citacao p { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.01em; color: #fff; }
.sobre__texto p { font-size: 18px; color: color-mix(in srgb, var(--tinta) 84%, transparent); }
.sobre__texto p + p { margin-top: 16px; }
.ficha { margin: 32px 0 0; border-top: 1px solid var(--linha); }
.ficha div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--linha); }
@media (min-width: 560px) { .ficha div { grid-template-columns: 150px 1fr; gap: 16px; } }
.ficha dt { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); padding-top: 3px; font-weight: 500; }
.ficha dd { margin: 0; font-size: 16.5px; }

/* 6. Convênios */
.convenios { max-width: none; background: var(--oliva-escuro); color: var(--papel); }
.convenios .rotulo { color: var(--salvia); }
.convenios .cabeca__intro { color: rgba(247, 247, 243, .76); }
.convenios__grade { max-width: calc(var(--max) - 2 * var(--gutter)); margin: 0 auto; display: grid; gap: 44px; }
@media (min-width: 900px) { .convenios__grade { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } }
.selos { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.selos li { padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(247, 247, 243, .3); font-size: 16px; }
.reembolso { background: rgba(247, 247, 243, .06); border: 1px solid rgba(247, 247, 243, .14); border-radius: var(--raio); padding: 28px 24px; }
@media (min-width: 900px) { .reembolso { padding: 40px; } }
.reembolso h3 { font-size: 24px; margin-bottom: 22px; }
.reembolso ol { list-style: none; padding: 0; margin: 0; counter-reset: r; display: grid; gap: 18px; }
.reembolso li { counter-increment: r; display: grid; grid-template-columns: 34px 1fr; gap: 14px; color: rgba(247, 247, 243, .88); font-size: 16.5px; }
.reembolso li::before { content: counter(r); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--salvia); color: var(--oliva-escuro); font-size: 14px; font-weight: 600; }

/* Fio condutor: a onda da triagem, em pé, desenhada no scroll de #ajuda a #consulta */
.fio { position: relative; }
.fio__trilho { display: none; }
@media (min-width: 1100px) {
  .fio__trilho {
    display: block; position: absolute; top: 120px; bottom: 120px; width: 14px; pointer-events: none; opacity: .35;
    left: max(12px, calc(50% - var(--max) / 2 + var(--gutter) - 52px));
  }
  .fio__trilho span {
    position: absolute; inset: 0;
    -webkit-mask: var(--onda-v) center top / 14px 360px repeat-y; mask: var(--onda-v) center top / 14px 360px repeat-y;
  }
  .fio__base { background: rgba(20, 24, 19, .3); }
  .fio__linha { background: var(--oliva); clip-path: inset(0 0 var(--falta, 100%) 0); }
}
.cabeca__lead { margin-top: 18px; max-width: 46ch; font-size: clamp(20px, 2vw, 24px); line-height: 1.4; letter-spacing: -.01em; }
.cabeca__lead + .cabeca__intro { margin-top: 12px; font-size: 17px; }

/* 5. Consulta: título preso à esquerda, etapas empilhadas */
.consulta__grade { display: grid; gap: 28px; }
@media (min-width: 900px) {
  .consulta__grade { grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: start; }
  .consulta__cabeca { position: sticky; top: 96px; margin: 0; }
}
.linha { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.linha li { display: grid; grid-template-columns: 64px 1fr; gap: 8px 18px; background: #fff; border-radius: var(--raio); padding: 24px 22px; border: 1px solid var(--linha); }
@media (min-width: 900px) { .linha li { grid-template-columns: 88px 1fr; padding: 30px 32px; } }
.linha__num { font-family: var(--serif); font-size: 44px; line-height: .9; color: var(--argila); }
.linha h3 { font-size: 22px; margin-bottom: 6px; }
.linha p { font-size: 16.5px; color: var(--cinza); }
.nota { margin-top: 22px; font-size: 16px; color: var(--cinza); max-width: 40ch; }
.nota strong { color: var(--tinta); font-weight: 500; }

/* 7. Dúvidas: bento de cartões que expandem */
.duvidas__cabeca { margin-bottom: 36px; }
.perguntas { display: grid; gap: 12px; }
@media (min-width: 760px) { .perguntas { grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; gap: 14px; } }
@media (min-width: 1100px) { .perguntas { grid-template-columns: repeat(3, 1fr); } }
.pergunta { position: relative; border-radius: var(--raio); border: 1px solid transparent; overflow: hidden; transition: transform 260ms var(--ease), box-shadow 260ms var(--ease); }
@media (min-width: 760px) { .pergunta[open] { grid-column: span 2; } }
.pergunta summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 36px; grid-template-rows: auto 1fr; gap: 18px 12px;
  min-height: 168px; padding: 22px 22px 24px; -webkit-tap-highlight-color: transparent;
}
.pergunta summary::-webkit-details-marker { display: none; }

.pergunta__num { font-family: var(--serif); font-size: 26px; line-height: 1; opacity: .7; }
.pergunta__q { grid-column: 1; grid-row: 2; align-self: end; font-size: clamp(19px, 1.7vw, 23px); font-weight: 500; letter-spacing: -.015em; line-height: 1.22; text-wrap: balance; }
.pergunta__mais { grid-column: 2; grid-row: 1; justify-self: end; width: 36px; height: 36px; border-radius: 50%; border: 1px solid currentColor; opacity: .55; position: relative; transition: transform 260ms var(--ease), opacity 200ms ease; }
.pergunta__mais::before, .pergunta__mais::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: currentColor; }
.pergunta__mais::after { transform: rotate(90deg); transition: transform 260ms var(--ease); }
.pergunta[open] .pergunta__mais { transform: rotate(180deg); opacity: .9; }
.pergunta[open] .pergunta__mais::after { transform: rotate(0deg); }
.pergunta p { padding: 0 22px 26px; font-size: 17px; max-width: 62ch; }
.pergunta[open] summary { min-height: 0; padding-bottom: 14px; }
@media (min-width: 900px) { .pergunta summary { padding: 26px 28px 28px; } .pergunta p { padding: 0 28px 30px; } }
.pergunta { background: #fff; border-color: var(--linha); transition: transform 260ms var(--ease), box-shadow 260ms var(--ease), background-color 260ms ease; }
.pergunta[open] { background: var(--salvia); border-color: transparent; }
.pergunta p { color: color-mix(in srgb, currentColor 82%, transparent); }
.pergunta[open]::before {
  content: ""; position: absolute; left: 66px; top: 30px; width: 96px; height: 10px; background: currentColor; opacity: .3;
  -webkit-mask: var(--onda) left center / 96px 10px no-repeat; mask: var(--onda) left center / 96px 10px no-repeat;
}
@media (min-width: 900px) { .pergunta[open]::before { left: 72px; top: 34px; } }
@media (hover: hover) and (pointer: fine) { .pergunta:not([open]):hover { transform: translateY(-3px); box-shadow: var(--sombra); } }
@media (prefers-reduced-motion: no-preference) {
  .pergunta[open] p { animation: faqIn 300ms var(--ease); }
  @keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }
}

@media (max-width: 759px) {
  .pergunta summary { min-height: auto; grid-template-columns: auto 1fr 36px; grid-template-rows: auto; align-items: center; gap: 12px; padding-block: 16px; }
  .pergunta__num { font-size: 20px; }
  .pergunta__q { grid-column: 2; grid-row: 1; align-self: center; font-size: 18px; }
  .pergunta__mais { grid-column: 3; grid-row: 1; align-self: center; }
  .pergunta[open]::before { display: none; }
  .visita address { font-size: 17px; }
}
/* 8. Local: cartão de visita do consultório */
.visita {
  display: grid; background: var(--papel); border-radius: 28px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 40px 70px -40px rgba(24, 35, 28, .5), 0 2px 6px rgba(20, 24, 19, .06);
  border: 1px solid var(--linha);
  transform-style: preserve-3d; transition: transform 400ms var(--ease);
}
.visita__mapa { position: relative; aspect-ratio: 4 / 3; background: var(--pedra-2); }
.visita__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.9) contrast(1.02); }
.visita__corpo { position: relative; padding: 28px 22px 26px; }
/* Picote de cartão entre o mapa e os dados */
.visita__corpo::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: 0; border-top: 1.5px dashed rgba(20, 24, 19, .22);
}
.visita__nome { font-family: var(--serif); font-size: 30px; line-height: 1.05; }
.visita__nome span { display: block; font-family: var(--sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cinza); margin-top: 8px; }
.visita address { font-style: normal; font-size: 19px; line-height: 1.5; margin-top: 18px; }
.visita__dados { margin: 18px 0 0; display: grid; gap: 0; border-top: 1px solid var(--linha); }
.visita__dados div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linha); font-size: 16px; }
.visita__dados dt { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cinza); padding-top: 3px; font-weight: 500; }
.visita__dados dd { margin: 0; }
.visita__dados a { text-underline-offset: 3px; }
.visita__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
@media (min-width: 900px) {
  .visita { grid-template-columns: 1.15fr 1fr; }
  .visita__mapa { aspect-ratio: auto; min-height: 480px; }
  .visita__corpo { padding: 44px 44px 40px; }
  .visita__corpo::before { left: 0; right: auto; top: 18px; bottom: 18px; border-top: 0; border-left: 1.5px dashed rgba(20, 24, 19, .22); }
  .visita__nome { font-size: 38px; }
}

/* 9. Fechamento integrado à triagem */
.fecho { padding: 0 var(--gutter) 88px; }
.fecho__in {
  max-width: calc(var(--max) - 2 * var(--gutter)); margin: 0 auto;
  background: var(--oliva); color: var(--papel); border-radius: 32px;
  padding: 64px 22px; position: relative; overflow: hidden;
  background-image: radial-gradient(110% 90% at 0% 0%, rgba(183, 196, 182, .2), transparent 60%);
  display: grid; gap: 40px;
}
.fecho__in::before {
  content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 12px; background: rgba(247, 247, 243, .16);
  -webkit-mask: var(--onda) center / 120px 12px repeat-x; mask: var(--onda) center / 120px 12px repeat-x;
}
@media (min-width: 900px) {
  .fecho__in { grid-template-columns: 1.1fr .9fr; gap: 64px; padding: 96px 64px; align-items: center; }
  .fecho__in::before { top: 44px; }
}
.fecho h2 { font-size: clamp(40px, 5.6vw, 72px); }
.fecho h2 em { color: var(--argila-claro); }
.fecho__texto > p { max-width: 42ch; margin: 16px 0 28px; color: rgba(247, 247, 243, .82); font-size: 18px; }
.fecho__texto > p.fecho__outros { margin: 22px 0 0; font-size: 15.5px; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.fecho__outros a { color: var(--papel); text-underline-offset: 3px; text-decoration-color: rgba(247, 247, 243, .4); }
.atalho { background: rgba(247, 247, 243, .07); border: 1px solid rgba(247, 247, 243, .16); border-radius: 22px; padding: 22px 20px; }
@media (min-width: 900px) { .atalho { padding: 28px; } }
.atalho__titulo { font-family: var(--serif); font-size: 26px; line-height: 1.15; margin-bottom: 16px; }
.atalho ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.atalho a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px;
  background: var(--papel); color: var(--oliva-escuro); text-decoration: none; font-size: 15.5px; font-weight: 500;
  transition: transform 160ms var(--ease), background-color 200ms ease;
}
.atalho a { padding: 0 16px; }
.atalho a::after { content: "→"; transition: transform 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .atalho a:hover::after { transform: translateX(3px); } }
.triagem.destaque { animation: destaque 600ms var(--ease); }
@keyframes destaque { 0% { box-shadow: 0 0 0 0 rgba(37, 53, 42, .5), 0 24px 50px -30px rgba(24, 35, 28, .45); } 40% { box-shadow: 0 0 0 6px rgba(183, 196, 182, .9), 0 24px 50px -30px rgba(24, 35, 28, .45); } 100% { box-shadow: 0 0 0 0 rgba(183, 196, 182, 0), 0 24px 50px -30px rgba(24, 35, 28, .45); } }
.atalho a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .atalho a:hover { background: #fff; } }

/* Rodapé */
.rodape { border-top: 1px solid var(--linha); }
.rodape__in { max-width: var(--max); margin: 0 auto; padding: 40px var(--gutter) 48px; }
@media (max-width: 719px) { .rodape__in { padding-bottom: 88px; } }
.rodape__in { display: grid; gap: 6px; font-size: 14.5px; color: var(--cinza); }
.rodape__marca { font-family: var(--serif); font-size: 26px; color: var(--tinta); margin-bottom: 6px; }
.rodape__aviso { margin-top: 10px; }

/* Botão flutuante */
.flutuante {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 52px; padding: 0 20px 0 16px; border-radius: 999px;
  background: var(--oliva); color: var(--papel); text-decoration: none; font-weight: 500; font-size: 15.5px;
  box-shadow: 0 14px 30px -12px rgba(24, 35, 28, .7), 0 2px 6px rgba(0, 0, 0, .12);
  transition: transform 260ms var(--ease), opacity 220ms ease;
  -webkit-tap-highlight-color: transparent;
}
.flutuante svg { width: 22px; height: 22px; }
.flutuante:active { transform: scale(.96); }
.js .flutuante { opacity: 0; transform: translateY(16px); pointer-events: none; }
.js .flutuante.visivel { opacity: 1; transform: none; pointer-events: auto; }
.js .flutuante.visivel:active { transform: scale(.96); }

/* Movimento ligado ao scroll (camada extra, CSS nativo) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .revela {
      animation: revela linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    @keyframes revela { from { opacity: 0; transform: translateY(28px); } }

    @media (min-width: 900px) {
      .abertura__foto img {
        animation: respira linear both;
        animation-timeline: scroll(root);
        animation-range: 0 100svh;
      }
      @keyframes respira { to { transform: scale(1.04); } }
    }

    .fecho__in {
      animation: abre linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    @keyframes abre { from { transform: scale(.94); border-radius: 56px; } }
  }
}

/* Aviso de cookies */
.aviso-cookies {
  position: fixed; z-index: 70;
  left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  max-width: 440px; padding: 18px 18px 16px;
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-p); box-shadow: var(--sombra);
  font-size: 15px; line-height: 1.5; color: var(--tinta);
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies a { color: var(--oliva); text-underline-offset: 3px; }
.aviso-cookies__botoes { display: flex; gap: 10px; margin-top: 14px; }
.aviso-cookies__botoes .btn { flex: 1; min-height: 44px; font-size: 15px; }
body.com-aviso .flutuante { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .aviso-cookies:not([hidden]) { animation: avisoIn 260ms var(--ease); }
}
@keyframes avisoIn { from { opacity: 0; transform: translateY(12px); } }

/* Política de privacidade */
.legal { max-width: 72ch; margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--gutter); }
.legal h1 { font-size: clamp(36px, 5.4vw, 56px); margin-bottom: 12px; }
.legal__data { color: var(--cinza); font-size: 15px; margin-bottom: 36px; }
.legal h2 { font-size: clamp(22px, 2.4vw, 28px); margin: 40px 0 12px; }
.legal p, .legal li { color: var(--tinta); }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 12px 0 0; padding-left: 1.2em; }
.legal li + li { margin-top: 6px; }
.legal a { color: var(--oliva); text-underline-offset: 3px; }
.legal .btn { margin-top: 16px; }
.legal__voltar { display: inline-block; margin-top: 48px; }