/* Thaynara Teixeira · Nutricionista — v4
   O visual de cada camada vem do Figma (regras geradas abaixo). Este arquivo só define a base,
   a escala da página (JS) e os estados de animação/interação, sem alterar o estado estático do layout. */
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-latin.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root { --fn: "Nunito", ui-rounded, system-ui, sans-serif; --fm: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; --e: cubic-bezier(.22, 1, .36, 1); --e2: cubic-bezier(.65, 0, .35, 1); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #faf0e6; color: #4c3429; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; }
img { display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; font-size: inherit; font-weight: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
.pgs { display: block; }
.pg { position: relative; display: flex; flex-direction: column; align-items: center; }
/* escala fluida: 1 px do Figma = var(--u). Tudo (fontes, espaços, imagens) cresce e diminui na mesma proporção.
   desktop: clamp entre 70% e 90% do Figma conforme a largura (≈80% em 1920), nunca maior que a tela;
   as seções esticam de ponta a ponta e o conteúdo fica centralizado (--ext). ?static = 100% do Figma em 1920. */
html { --vw: 100vw; }
.pg { width: 100%; }
.pg-d { --u: min(calc(var(--vw) / 1920), clamp(.7px, calc(var(--vw) / 2400), .9px)); --ext: calc((var(--vw) - 1920 * var(--u)) / 2); }
.is-static .pg-d { --u: calc(var(--vw) / 1920); }
.pg-t { --u: calc(var(--vw) / 834); display: none; }
.pg-m { --u: calc(var(--vw) / 390); display: none; }
@media (max-width: 1099.98px) { .pg-d { display: none; } .pg-t { display: flex; } }
@media (max-width: 599.98px) { .pg-t { display: none; } .pg-m { display: flex; } }
/* nada vaza para os lados: a página nunca arrasta na horizontal */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
.pg { overflow-x: clip; }
/* faixas de fotos (celular/tablet): letreiro automático, sem arrastar */
.strip { overflow: hidden !important; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.strip-track { display: flex; flex-shrink: 0; align-items: flex-start; width: max-content; animation: mq var(--dur, 40s) linear infinite; }
.strip-track > * { flex-shrink: 0; margin-left: 0 !important; }
.tp { display: block; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip:focus { position: fixed; left: 16px; top: 16px; z-index: 100; padding: 12px 18px; border-radius: 7px; background: #4c3429; color: #faf0e6; font: 600 15px var(--fm); }
:focus-visible { outline: 2px solid #007c68; outline-offset: 3px; }
.sec { scroll-margin-top: 0; }

/* ---------- cabeçalho fixo (desktop): aparece ao rolar para cima, some ao descer ---------- */
.hdr-fix { position: fixed; left: 0; top: 0; z-index: 60; height: 0; width: 100%; pointer-events: none; }
.hdr-fix > * { pointer-events: auto; translate: 0 -180px; transition: translate .7s var(--e); box-shadow: 0 18px 40px -22px rgba(53, 36, 29, .45); }
.hdr-fix.on > * { translate: 0 calc(-30 * var(--u)); }

/* ---------- menu inferior (celular e tablet) ---------- */
.dock { position: fixed; z-index: 70; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); width: min(calc(100% - 24px), 440px); translate: -50% 160%; opacity: 0; pointer-events: none; -webkit-tap-highlight-color: transparent; }
.dock.on { translate: -50% 0; opacity: 1; pointer-events: auto; transition: translate 1.1s cubic-bezier(.2, 1.25, .35, 1), opacity .5s var(--e); }
.dock-bar { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); height: 64px; padding: 0 4px; border-radius: 22px; background: #fffaf5; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px rgba(76, 52, 41, .07), 0 18px 34px -14px rgba(53, 36, 29, .42), 0 4px 10px -4px rgba(53, 36, 29, .18); }
.dock-ind { position: absolute; left: 4px; top: 0; width: calc((100% - 8px) / 5); height: 100%; translate: calc(var(--i, 0) * 100%) 0; transition: translate .75s cubic-bezier(.3, 1.35, .45, 1); pointer-events: none; }
.dock-bump { position: absolute; left: 50%; bottom: 100%; width: 92px; height: 24px; margin-left: -46px; margin-bottom: -1px; fill: #fffaf5; filter: drop-shadow(0 -6px 8px rgba(53, 36, 29, .08)); transform-origin: 50% 100%; }
.dock-orb { position: absolute; left: 50%; top: -22px; width: 48px; height: 48px; margin-left: -24px; border-radius: 50%; background: radial-gradient(120% 120% at 30% 20%, #6b4b3c 0%, #4c3429 45%, #2e1f18 100%); box-shadow: 0 0 0 5px #fffaf5, 0 12px 20px -8px rgba(53, 36, 29, .65), 0 0 0 1px rgba(255, 255, 255, .06) inset; }
.dock-orb::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(196, 174, 156, .55); opacity: 0; scale: .7; }
.dock.pulse .dock-orb::after { animation: orb 1s var(--e); }
@keyframes orb { 0% { opacity: .9; scale: .8; } 100% { opacity: 0; scale: 1.45; } }
.dock a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; padding-bottom: 11px; color: rgba(76, 52, 41, .58); font: 600 10.5px/1 var(--fm); letter-spacing: .01em; text-decoration: none; outline-offset: -4px; border-radius: 16px; transition: color .4s var(--e); }
.dock a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: translate .7s cubic-bezier(.3, 1.4, .45, 1), color .4s, scale .5s var(--e); }
.dock a span { transition: opacity .4s var(--e), translate .5s var(--e); }
.dock a[aria-current] { color: #4c3429; font-weight: 800; }
.dock a[aria-current] svg { translate: 0 -27px; color: #faf0e6; scale: 1.05; }
.dock a:active svg { scale: .86; }
/* entrada do menu */
.dock .dock-bump, .dock .dock-orb { scale: 0; }
.dock a { opacity: 0; translate: 0 14px; }
.dock.on .dock-bump { scale: 1; transition: scale .7s cubic-bezier(.3, 1.5, .5, 1) .45s; }
.dock.on .dock-orb { scale: 1; transition: scale .8s cubic-bezier(.3, 1.6, .5, 1) .55s; }
.dock.on a { opacity: 1; translate: 0 0; transition: opacity .6s var(--e) calc(.3s + var(--k) * 70ms), translate .8s cubic-bezier(.3, 1.4, .45, 1) calc(.3s + var(--k) * 70ms), color .4s var(--e); }
@media (min-width: 1100px) { .dock { display: none; } }

/* ---------- hero do celular/tablet: tela cheia, foto em cima e informações embaixo ---------- */
.hero-photo { overflow: hidden; }
.hero-photo > .hero-bg { width: 100% !important; height: 100% !important; }
.hero-photo .fi { object-fit: cover !important; object-position: 50% 24%; }
.hero-photo > .hero-fade { top: auto !important; bottom: -1px; height: calc(150 * var(--u)) !important; }
.pg-m .hero-copy, .pg-t .hero-copy { margin-top: calc(-80 * var(--u)); z-index: 2; }
/* hero do desktop: sempre a tela inteira (foto presa embaixo à direita, texto centralizado na altura) */
.pg-d > .sec:first-of-type, .pg-d #inicio { height: max(100vh, calc(940 * var(--u))) !important; height: max(100svh, calc(940 * var(--u))) !important; }
.pg-d #inicio > .hero-mq { top: auto !important; bottom: 0; }
.is-static .pg-d #inicio { height: calc(1080 * var(--u)) !important; }
.pg-d #inicio > .hero-copy { top: calc(390 * var(--u) + (100% - 1080 * var(--u)) / 2) !important; }
.pg-d #inicio > .hero-bg { left: auto !important; right: calc(-6 * var(--u)); top: calc(-20 * var(--u)) !important; height: calc(100% - 27 * var(--u)) !important; width: auto !important; aspect-ratio: 2162 / 1053; }
/* desktop mais largo que 1920: a foto do hero se funde ao fundo pela esquerda */
html.wide .pg-d .hero-bg { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(340 * var(--u))); mask-image: linear-gradient(90deg, transparent 0, #000 calc(340 * var(--u))); }

/* ---------- barra de progresso da leitura ---------- */
.prog { position: fixed; left: 0; top: 0; z-index: 90; width: 100%; height: 3px; transform-origin: 0 50%; scale: 0 1; background: linear-gradient(90deg, #af947f, #4c3429 60%, #007c68); pointer-events: none; }
html.lenis, html.lenis body { height: auto; scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.pin-spacer > .sec { will-change: transform; }

/* ---------- interações ---------- */
.lk { transition: color .3s, opacity .3s; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .45s var(--e), opacity .3s; }
.lk:hover, .lk.on { background-size: 100% 1px; }
.bt { cursor: pointer; transition: translate .45s var(--e), box-shadow .45s var(--e), filter .45s var(--e); }
.bt:hover { translate: 0 -3px; filter: brightness(1.07) saturate(1.05); box-shadow: 0 18px 30px -18px rgba(53, 36, 29, .55); }
.bt:active { translate: 0 0; transition-duration: .1s; }
.bt img { transition: translate .45s var(--e); }
.bt:hover > div:last-child img { translate: 3px -3px; }
.dp { will-change: translate; }
.qa { cursor: pointer; transition: background-color .5s var(--e), box-shadow .5s var(--e); }
.qa .qa-a { transition: opacity .5s var(--e) .1s; }
.car .slide { transition: translate .9s var(--e2); }
.car-arrows { cursor: pointer; }
.car-dots > div { transition: width .5s var(--e), opacity .5s; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; z-index: 3; }

/* ---------- botões: brilho, onda e setas em sequência ----------
   adaptado de "Arrow Flow Button" (Li-Deheng · uiverse.io · licença MIT) com as cores, formas e fontes do site.
   --bt-glow/--bt-ring vêm da cor de cada botão (definidas no JS). */
.bt.fx { transition: translate .45s var(--e), box-shadow .5s var(--e), filter .45s var(--e); }
.bt.fx .bt-ico { transition: opacity .35s var(--e), translate .45s var(--e), scale .45s var(--e); }
.bt.fx .bt-chev { position: absolute; left: 50%; top: 50%; height: calc(var(--bt-fs, 16px) * .78); width: auto; translate: -50% -50%; opacity: 0; overflow: visible; pointer-events: none; transition: opacity .3s var(--e); }
.bt.fx .bt-chev polygon { fill: var(--bt-ink, currentColor); transition: transform .5s var(--e); }
.bt.fx .bt-chev polygon:nth-child(1) { transform: translateX(-60%); transition-duration: .4s; }
.bt.fx .bt-chev polygon:nth-child(2) { transform: translateX(-30%); }
.bt.fx .bt-txt { transition: text-shadow .5s var(--e), translate .5s var(--e); }
@media (hover: hover) {
  .bt.fx:hover { box-shadow: 0 0 1.1em -.1em var(--bt-glow), 0 18px 30px -18px rgba(53, 36, 29, .55); animation: bt-ripple 1s linear infinite, bt-pulse 1s infinite; }
  .bt.fx:hover .bt-ico { opacity: 0; translate: 6px -6px; scale: .6; }
  .bt.fx:hover .bt-chev { opacity: 1; }
  .bt.fx:hover .bt-chev polygon { transform: translateX(0); }
  .bt.fx:hover .bt-chev polygon:nth-child(1) { animation: bt-blink 1s infinite .6s; }
  .bt.fx:hover .bt-chev polygon:nth-child(2) { animation: bt-blink 1s infinite .4s; }
  .bt.fx:hover .bt-chev polygon:nth-child(3) { animation: bt-blink 1s infinite .2s; }
  .bt.fx:hover .bt-txt { text-shadow: 0 4px 10px rgba(0, 0, 0, .22); translate: -3px 0; }
}
.bt.fx:active { scale: .97; animation: none; }
.bt.fx:focus-visible { animation: bt-ripple 1s linear infinite; }
@keyframes bt-blink { 50% { opacity: 0; } }
@keyframes bt-pulse { 50% { filter: brightness(1.12) saturate(1.05); } }
@keyframes bt-ripple {
  0% { outline: 0 solid transparent; outline-offset: -1px; }
  50% { outline: 3px solid var(--bt-ring); outline-offset: 4px; }
  100% { outline: 6px solid transparent; outline-offset: 8px; }
}

/* ---------- movimento contínuo ---------- */
.mq { animation: mq 46s linear infinite; }
.rb-l { animation: rb 70s linear infinite; }
.rb-r { animation: rb 80s linear infinite reverse; }
.mz { animation: mq 70s linear infinite; }
.mq:hover, .mz:hover { animation-play-state: paused; }
.seal > img { animation: spin 36s linear infinite; }
@keyframes mq { to { translate: -50% 0; } }
@keyframes rb { to { translate: -25% 0; } }
@keyframes spin { to { rotate: 360deg; } }

/* ---------- entrada ao rolar (o estado final é idêntico ao Figma) ---------- */
.js:not(.is-static) .rv { opacity: 0; translate: 0 64px; transition: opacity 1.1s var(--e) calc(var(--i, 0) * 90ms + 60ms), translate 1.3s var(--e) calc(var(--i, 0) * 90ms + 60ms); }
.js:not(.is-static) .rv-img { opacity: 0; clip-path: inset(14% 10% 14% 10% round 28px); scale: 1.06; transition: opacity .9s var(--e) calc(var(--i, 0) * 110ms), clip-path 1.6s var(--e2) calc(var(--i, 0) * 110ms), scale 1.8s var(--e) calc(var(--i, 0) * 110ms); }
.js:not(.is-static) .rv-img > .fi { scale: 1.25; transition: scale 2.2s var(--e) calc(var(--i, 0) * 110ms); }
.js:not(.is-static) .rv.in, .js:not(.is-static) .rv-img.in { opacity: 1; translate: 0 0; scale: 1; clip-path: inset(0 0 0 0 round 0); }
.js:not(.is-static) .rv-img.in > .fi { scale: 1; }
/* listas (planos, benefícios, público): itens entram um a um */
.js:not(.is-static) .stg { opacity: 0; translate: -28px 0; transition: opacity .7s var(--e) calc(var(--s, 0) * 70ms + 150ms), translate .9s var(--e) calc(var(--s, 0) * 70ms + 150ms); }
.js:not(.is-static) .stg-list.in .stg { opacity: 1; translate: 0 0; }
.js:not(.is-static) .stg > :first-child { scale: 0; transition: scale .6s cubic-bezier(.3, 1.6, .5, 1) calc(var(--s, 0) * 70ms + 300ms); }
.js:not(.is-static) .stg-list.in .stg > :first-child { scale: 1; }
/* "o método é para você se…": um cartão entra, o outro chega por cima, depois os itens */
.js:not(.is-static) .aud { opacity: 0; transition: opacity 1s var(--e), translate 1.3s var(--e), rotate 1.3s var(--e); }
.js:not(.is-static) .aud-l { translate: -180px 30px; rotate: -5deg; }
.js:not(.is-static) .aud-r { translate: 220px 60px; rotate: 7deg; transition-delay: .45s; }
.js:not(.is-static) .aud.in { opacity: 1; translate: 0 0; rotate: 0deg; }
.js:not(.is-static) .aud-r .stg { transition-delay: calc(var(--s, 0) * 80ms + 900ms); }
.js:not(.is-static) .aud-r .stg > :first-child { transition-delay: calc(var(--s, 0) * 80ms + 1050ms); }
/* fotos das pacientes: leque interativo */
.fan-card { cursor: pointer; transition: translate .7s cubic-bezier(.3, 1.3, .45, 1), scale .7s cubic-bezier(.3, 1.3, .45, 1), rotate .7s var(--e), box-shadow .6s var(--e), opacity .9s var(--e), filter .6s var(--e); }
.js:not(.is-static) .fan .fan-card { opacity: 0; translate: 0 140px; rotate: calc((var(--k) - 2) * 6deg); }
.js:not(.is-static) .fan.in .fan-card { opacity: 1; translate: 0 0; rotate: 0deg; transition-delay: calc(var(--k) * 110ms); }
.js:not(.is-static) .fan.in .fan-card.up { z-index: 20 !important; scale: 1.12; translate: -6% calc(-6% - 26px); rotate: var(--fix, 0deg); box-shadow: 0 40px 60px -28px rgba(53, 36, 29, .55); transition-delay: 0s; }
.js:not(.is-static) .fan.in.hov .fan-card:not(.up) { filter: saturate(.8) brightness(.94); }
.js:not(.is-static) .fan.in .fan-card.lft { translate: -34px 6px; transition-delay: 0s; }
.js:not(.is-static) .fan.in .fan-card.rgt { translate: 34px 6px; transition-delay: 0s; }

/* títulos: palavra por palavra, subindo de trás de uma máscara */
.wd { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em 0 .18em; margin: -.14em 0 -.18em; }
.wd > span { display: inline-block; }
.js:not(.is-static) .split .wd > span { translate: 0 112%; rotate: 4deg; transform-origin: 0 100%; transition: translate 1.15s var(--e) calc(var(--w, 0) * 55ms + 120ms), rotate 1.15s var(--e) calc(var(--w, 0) * 55ms + 120ms); }
.js:not(.is-static) .split.in .wd > span { translate: 0 0; rotate: 0deg; }
/* títulos desenhados (contornos do Figma): cortina */
.js:not(.is-static) .wipe > img { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--e2) .15s; }
.js:not(.is-static) .wipe.in > img { clip-path: inset(0 0 0 0); }

/* ---------- abertura do hero ---------- */
.js:not(.is-static) .hero-bg { opacity: 0; scale: 1.08; }
.js:not(.is-static) .hdr { opacity: 0; translate: 0 -40px; }
.js:not(.is-static) .hero-copy > * { opacity: 0; translate: 0 40px; }
.js:not(.is-static) .hero-mq { opacity: 0; }
.js.ready:not(.is-static) .hero-bg { opacity: 1; scale: 1; transition: opacity 1.4s var(--e), scale 2.6s var(--e); }
.js.ready:not(.is-static) .hdr { opacity: 1; translate: 0 0; transition: opacity 1s var(--e) .35s, translate 1.2s var(--e) .35s; }
.js.ready:not(.is-static) .hero-copy > * { opacity: 1; translate: 0 0; transition: opacity 1s var(--e), translate 1.2s var(--e); }
.js.ready:not(.is-static) .hero-copy > :nth-child(1) { transition-delay: .5s; }
.js.ready:not(.is-static) .hero-copy > :nth-child(2) { transition-delay: .62s; }
.js.ready:not(.is-static) .hero-copy > :nth-child(3) { transition-delay: .74s; }
.js.ready:not(.is-static) .hero-copy > :nth-child(4) { transition-delay: .86s; }
.js.ready:not(.is-static) .hero-copy > :nth-child(5) { transition-delay: .98s; }
.js.ready:not(.is-static) .hero-mq { opacity: 1; transition: opacity 1.2s var(--e) 1s; }

/* ---------- acessibilidade e captura estática ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .bt.fx .bt-chev { display: none; }
  .js .rv, .js .rv-img, .js .hero-bg, .js .hdr, .js .hero-copy > *, .js .hero-mq, .js .wd > span, .js .stg, .js .stg > :first-child, .js .aud, .js .fan-card, .dock a, .dock .dock-orb, .dock .dock-bump { opacity: 1 !important; translate: none !important; scale: none !important; clip-path: none !important; rotate: none !important; }
  .dock { translate: -50% 0 !important; opacity: 1 !important; pointer-events: auto !important; }
  .dock a[aria-current] svg { translate: 0 -27px !important; }
}
.is-static *, .is-static *::before, .is-static *::after { animation: none !important; transition: none !important; }
.is-static .hdr-fix, .is-static .dock, .is-static .prog { display: none; }