/* docta.b — landing v5 · fiel ao Paper (1440 desktop · 390 mobile)
   Escala: 1rem = 10px em 1440px e encolhe proporcionalmente abaixo disso.
   No mobile (<768px) 1rem = 10px em 390px, crescendo até 1.12x em telas maiores. */

:root {
  --bg: #FFF6E6; --plate: #FFFFFF; --band: #F7E9D2;
  --line: rgba(37,44,61,.12);
  --ink: #252C3D; --ink70: rgba(37,44,61,.70); --ink50: rgba(37,44,61,.50);
  --dew: #E4FBEB; --accent: #17E269; --accent-deep: #0FB854;
  --sky: #BFDDF3; --label-blue: #2E6BD6;
  --cream: #FFF6E6;
  --sans: "Sora", system-ui, -apple-system, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --ease: cubic-bezier(.22,1,.36,1);
}

html { font-size: min(10px, calc(100vw / 144)); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (max-width: 767px) { html { font-size: min(11.2px, calc(100vw / 39)); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg) url("assets/grain.png") repeat; background-size: 25.6rem 25.6rem;
  color: var(--ink); font-family: var(--sans); font-size: 1.5rem; line-height: 1.4;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; overflow-x: clip;
}
html { overflow-x: hidden; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
main { display: block; }

.d-only { display: initial; }
.m-only { display: none !important; }
@media (max-width: 767px) { .d-only { display: none !important; } .m-only { display: initial !important; } }

/* ---------- tipografia ---------- */
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.h2 { font-weight: 500; font-size: 5.6rem; line-height: 6rem; letter-spacing: -0.03em; color: var(--ink); }
.h2 .serif { font-size: 7rem; line-height: 6rem; }
.h2--light { color: var(--cream); }
.line { display: block; white-space: nowrap; }
.line--mix { display: flex; align-items: baseline; gap: 1.4rem; }
.kicker { display: flex; align-items: center; gap: .8rem; font-weight: 600; font-size: 1.3rem; line-height: 1.6rem; letter-spacing: .10em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 1.8rem; }
.kicker img { width: 1.1rem; height: 1.3rem; }
.kicker--light { color: var(--accent); }
.kicker--ink { color: var(--ink); }

/* reveal: estado inicial só quando o JS está ativo */
.js [data-reveal] { opacity: 0; transform: translateY(2.4rem); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .h2 .line > span, .js .h2 .line > em { display: inline-block; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; gap: 1.2rem; border-radius: 999px; font-weight: 600; white-space: nowrap; position: relative; isolation: isolate; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s; will-change: transform; }
.btn > span { position: relative; z-index: 1; }
.btn__arrow { width: 1.8rem; height: 1.8rem; flex-shrink: 0; transition: transform .35s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(.4rem); }
.btn:active { transform: scale(.97); }
.btn--accent { background: var(--accent); color: var(--ink); }
.btn--accent:hover { background: #2BEA78; box-shadow: 0 1.2rem 3rem -1.2rem rgba(15,184,84,.7); }
.btn--ink { background: var(--ink); color: var(--cream); }
.btn--ink:hover { background: #313a50; box-shadow: 0 1.2rem 3rem -1.4rem rgba(37,44,61,.8); }
.btn--outline { border: 1.5px solid var(--ink); color: var(--ink); }
.btn--outline:hover { background: rgba(37,44,61,.06); }
.btn--nav { padding: 1.3rem 2.2rem; font-size: 1.5rem; line-height: 2rem; }
.btn--lg { padding: 1.8rem 2.8rem; font-size: 1.7rem; line-height: 2.2rem; }
.btn--xl { padding: 2rem 3rem; font-size: 1.8rem; line-height: 2.2rem; }
.btn--sm { padding: 1.4rem 2.2rem; gap: 1rem; font-size: 1.5rem; line-height: 2rem; }
.btn--sm .btn__arrow { width: 1.6rem; height: 1.6rem; }

/* ---------- hero ---------- */
.hero { position: relative; height: 94rem; overflow: hidden; background: #9CC7E8; color: var(--cream); }
.hero__photo { position: absolute; inset: -3%; background: url("assets/hero.jpg") 72% 30% / cover no-repeat; will-change: transform; }
.hero__sun { position: absolute; left: -22rem; top: -30rem; width: 96rem; height: 96rem; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,224,168,.6) 0%, rgba(255,224,168,.25) 30%, rgba(255,224,168,0) 62%); }
.nav { position: absolute; left: 0; top: 0; width: 100%; height: 9.6rem; display: flex; align-items: center; justify-content: space-between; padding: 0 5.6rem; z-index: 5; }
.nav__logo img { width: 12.6rem; height: 3.4rem; }
.nav__links { display: flex; align-items: center; gap: 3.6rem; }
.nav__links a { font-weight: 500; font-size: 1.5rem; line-height: 2rem; color: var(--cream); position: relative; padding: .4rem 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--cream); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__burger { display: none; }
.hero__title { position: absolute; left: 5.6rem; top: 16rem; width: 90rem; display: flex; flex-direction: column; gap: 2.8rem; z-index: 3; }
.hero__h1 { width: 64rem; font-weight: 500; font-size: 8.8rem; line-height: 8.8rem; letter-spacing: -0.03em; color: var(--cream); }
.hero__h1 .line--mix { gap: 2rem; }
.hero__h1 .serif { font-size: 11rem; line-height: 8.8rem; }
.hero__sub { width: 64rem; font-size: 2.2rem; line-height: 3.2rem; color: rgba(255,246,230,.92); }
.hero__actions { display: flex; align-items: center; gap: 1.4rem; }
.hero__exclusive { display: flex; align-items: center; gap: 1rem; padding-left: 1rem; font-weight: 500; font-size: 1.5rem; line-height: 2rem; color: rgba(255,246,230,.85); white-space: nowrap; }
.hero__exclusive img { width: 9.6rem; height: 4rem; object-fit: contain; }
.hero__marca { position: absolute; left: -.1rem; top: 59.8rem; width: 144.1rem; height: 45.3rem; max-width: none; object-fit: fill; z-index: 2; pointer-events: none; }

/* menu mobile */
.menu { position: fixed; inset: 0; z-index: 50; background: var(--bg); }
.menu[hidden] { display: none; }
.menu__inner { display: flex; flex-direction: column; gap: 2.4rem; padding: 10rem 2.4rem 4rem; }
.menu__inner > a:not(.btn) { font-weight: 500; font-size: 3.4rem; line-height: 4rem; letter-spacing: -0.03em; color: var(--ink); }
.menu__inner .btn { margin-top: 1.6rem; justify-content: center; }
.menu__close { position: absolute; right: 2rem; top: 1.4rem; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: rgba(37,44,61,.08); display: grid; place-items: center; }

/* ---------- marquee ---------- */
.marquee { height: 6.4rem; background: #fff; border-bottom: 1px solid rgba(37,44,61,.10); overflow: hidden; display: flex; align-items: center; }
.marquee__track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: 3.6rem; padding: 0 1.8rem; }
.marquee__group span { font-weight: 500; font-size: 1.5rem; line-height: 2rem; color: var(--ink); white-space: nowrap; }
.marquee__group img { width: 1.4rem; height: 1.6rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- seções: base ---------- */
.container { width: 120rem; margin: 0 auto; }

/* ---------- como funciona ---------- */
.como { width: 120rem; margin: 0 auto; padding: 11.2rem 0 12.8rem; display: flex; flex-direction: column; gap: 4.8rem; }
.como__head { display: flex; align-items: flex-end; justify-content: space-between; }
.como__head .h2 { font-size: 6rem; line-height: 6.4rem; }
.como__head .h2 .serif { font-size: 7.6rem; line-height: 6.4rem; }
.como__lead { width: 38rem; font-size: 1.8rem; line-height: 2.8rem; color: var(--ink70); }
.como__body { display: flex; justify-content: space-between; align-items: flex-start; }
.steps { width: 58rem; }
.step { display: flex; gap: 2.8rem; padding: 3rem 0; border-bottom: 1px solid var(--line); }
.step:nth-child(4) { border-bottom: 0; }
.step__num { width: 3.6rem; flex-shrink: 0; padding-top: .6rem; font-weight: 800; font-size: 1.5rem; line-height: 2rem; letter-spacing: .06em; color: var(--accent-deep); }
.step__body { display: flex; flex-direction: column; gap: .8rem; }
.step__title { display: flex; align-items: center; gap: 1.2rem; font-weight: 500; font-size: 2.6rem; line-height: 3.2rem; letter-spacing: -0.02em; }
.step__rappi { width: 9.2rem; height: 3.9rem; object-fit: contain; }
.step__desc { font-size: 1.6rem; line-height: 2.4rem; color: var(--ink70); }
.steps__cta { display: flex; align-items: center; gap: 1.2rem; padding: 3.4rem 0 0 6.4rem; }
.steps__cta .btn { padding: 1.6rem 2.6rem; font-size: 1.6rem; line-height: 2rem; }
.steps__note { font-size: 1.4rem; line-height: 1.8rem; color: var(--ink70); }
.como__photos { width: 54rem; display: flex; flex-direction: column; gap: 1.6rem; }
.photo { position: relative; overflow: hidden; }
.photo picture { display: block; width: 100%; height: 100%; }
.photo img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.photo--medica { width: 54rem; height: 44rem; border-radius: 27rem 27rem 2.4rem 2.4rem; background: #DCCFB8; }
.photo--medica img { object-position: 40% 25%; }
.photo--entrega { width: 54rem; height: 34rem; border-radius: 2.4rem; background: #C9D3C4; }
.photo--entrega img { object-position: 50% 50%; }
.photo__pill { position: absolute; left: 1.8rem; bottom: 1.8rem; display: flex; align-items: center; gap: 1.2rem; padding: 1rem 1.8rem 1rem 1.4rem; border-radius: 999px; background: rgba(255,255,255,.96); font-weight: 500; font-size: 1.3rem; line-height: 1.6rem; color: var(--ink); }
.photo__pill img { width: 7.6rem; height: 3.2rem; object-fit: contain; }

/* ---------- vitrine ---------- */
.vitrine { width: 120rem; margin: 0 auto; padding: 0 0 12.8rem; display: flex; flex-direction: column; gap: 4.8rem; }
.vitrine__head { display: flex; align-items: flex-end; justify-content: space-between; }
.vitrine__lead { width: 36rem; font-size: 1.8rem; line-height: 2.8rem; color: var(--ink70); }
.products { display: flex; gap: 2.4rem; }
.product { width: 38.4rem; border-radius: 2.8rem; overflow: hidden; background: var(--plate); display: flex; flex-direction: column; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.product:hover { transform: translateY(-.6rem); box-shadow: 0 3rem 6rem -3rem rgba(37,44,61,.35); }
.product--soon { background: transparent; border: 1.5px dashed rgba(37,44,61,.22); }
.product__stage { position: relative; height: 34rem; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.stage--dew { background: var(--dew); } .stage--sky { background: var(--sky); }
.stage--soon { align-items: center; }
.product__vial { height: 33.8rem; width: auto; object-fit: contain; object-position: bottom; transform-origin: 50% 100%; will-change: transform; }
.product--tirze .product__vial { width: 15rem; } .product--sema .product__vial { width: 15.6rem; }
.product__badge { position: absolute; left: 1.8rem; top: 1.8rem; display: flex; align-items: center; gap: .6rem; padding: .7rem 1.2rem; border-radius: 999px; background: var(--plate); font-weight: 600; font-size: 1.2rem; line-height: 1.4rem; color: var(--ink); }
.product__badge i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--accent-deep); animation: pulse 2.4s ease-in-out infinite; }
.product__badge--band { background: var(--band); }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(15,184,84,.35);} 50% { box-shadow: 0 0 0 .5rem rgba(15,184,84,0);} }
.soon__circle { width: 12rem; height: 12rem; border-radius: 50%; background: var(--band); display: grid; place-items: center; }
.soon__circle img { width: 4rem; height: 4.7rem; }
.product__body { display: flex; flex-direction: column; gap: 1.8rem; padding: 2.4rem 2.6rem 2.6rem; }
.product__name { display: flex; flex-direction: column; gap: .4rem; }
.product__name h3 { font-weight: 500; font-size: 2.6rem; line-height: 3.2rem; letter-spacing: -0.02em; }
.product__name p { font-size: 1.5rem; line-height: 2.2rem; color: var(--ink70); }
.chips { display: flex; flex-wrap: wrap; gap: .8rem; }
.chips li { padding: .7rem 1.2rem; border: 1px solid var(--line); border-radius: 999px; font-weight: 500; font-size: 1.3rem; line-height: 1.6rem; }
.product__row { display: flex; align-items: center; justify-content: space-between; padding-top: .6rem; }
.product__rx { font-size: 1.2rem; line-height: 1.6rem; color: var(--ink50); }

/* ---------- dose (navy) ---------- */
.dose { background: var(--ink); padding: 9.6rem 12rem; display: flex; align-items: center; justify-content: space-between; color: var(--cream); }
.dose__stage { position: relative; width: 56rem; height: 62rem; flex-shrink: 0; }
.dose__toggle { position: absolute; left: 13rem; top: 0; display: flex; padding: .4rem; border-radius: 999px; background: rgba(255,246,230,.10); z-index: 3; }
.dose__toggle button { position: relative; z-index: 1; padding: .9rem 1.8rem; border-radius: 999px; font-weight: 500; font-size: 1.4rem; line-height: 1.8rem; color: rgba(255,246,230,.75); transition: color .3s; }
.dose__toggle button[aria-selected="true"] { font-weight: 600; color: var(--ink); }
.dose__thumb { position: absolute; top: .4rem; left: .4rem; height: calc(100% - .8rem); border-radius: 999px; background: var(--cream); transition: transform .45s var(--ease), width .45s var(--ease); }
.dose__plate { position: absolute; left: 10rem; top: 25rem; width: 36rem; height: 36rem; border-radius: 50%; background: var(--bg); }
.dose__dial { position: absolute; left: 0; top: 7rem; width: 56rem; height: 36rem; overflow: visible; }
.dose__dial line { stroke: rgba(255,246,230,.55); stroke-width: 2; stroke-linecap: round; transition: stroke .25s, stroke-width .25s; }
.dose__dial line.is-on { stroke: var(--accent); stroke-width: 4; }
.dose__vials { position: absolute; left: 17.2rem; top: 17.6rem; width: 21.6rem; height: 48.8rem; }
.dose__vial { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translateY(1.2rem) scale(.97); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.dose__vial.is-active { opacity: 1; transform: none; }
.dose__badge { position: absolute; left: 8.2rem; top: 14.8rem; padding: .7rem 1.4rem; border-radius: 999px; background: var(--accent); font-weight: 700; font-size: 1.4rem; line-height: 1.8rem; color: var(--ink); z-index: 2; transition: transform .3s var(--ease); }
.dose__min, .dose__max { position: absolute; top: 31.4rem; font-weight: 500; font-size: 1.2rem; line-height: 1.6rem; color: rgba(255,246,230,.6); }
.dose__min { left: 2.6rem; } .dose__max { left: 50rem; }
.dose__knob { position: absolute; left: 12.5rem; top: 18.4rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--accent); border: 3px solid var(--ink); box-shadow: 0 0 0 2px rgba(23,226,105,.5); cursor: grab; z-index: 3; touch-action: none; transition: box-shadow .3s; }
.dose__knob:hover, .dose__knob.is-drag { box-shadow: 0 0 0 .6rem rgba(23,226,105,.28); }
.dose__knob.is-drag { cursor: grabbing; }
.dose__hint { position: absolute; left: 2.4rem; top: 59.2rem; display: flex; align-items: center; gap: .8rem; font-weight: 500; font-size: 1.3rem; line-height: 1.6rem; color: rgba(255,246,230,.6); }
.dose__hint svg { width: 2.6rem; height: 1.8rem; }
.dose__text { width: 52rem; display: flex; flex-direction: column; gap: 3.6rem; }
.dose__text .bullets { margin-top: -3.6rem; }
.bullets li { display: flex; align-items: center; gap: 1.6rem; padding: 1.8rem 0; border-bottom: 1px solid rgba(255,246,230,.14); font-weight: 500; font-size: 1.8rem; line-height: 2.6rem; color: rgba(255,246,230,.92); }
.bullets li:last-child { border-bottom: 0; }
.bullets i { width: 2.8rem; height: 2.8rem; flex-shrink: 0; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; }
.bullets i svg { width: 1.4rem; height: 1.4rem; }
.dose__extra { display: flex; flex-direction: column; gap: 2.2rem; padding-top: 1rem; margin-top: -2.2rem; }
.week { display: flex; align-items: center; gap: 1.6rem; }
.week__days { display: flex; gap: .6rem; }
.week__days span { width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 1px solid rgba(255,246,230,.25); display: grid; place-items: center; font-weight: 600; font-size: 1.2rem; line-height: 1.4rem; color: rgba(255,246,230,.7); }
.week__days .is-on { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 700; position: relative; }
.week__days .is-on.is-in::after { content: ""; position: absolute; inset: -.3rem; border-radius: 50%; border: 2px solid var(--accent); animation: ring 1.6s .6s ease-out 2; }
@keyframes ring { 0% { transform: scale(.8); opacity: .9;} 100% { transform: scale(1.8); opacity: 0;} }
.week p { font-size: 1.4rem; line-height: 2rem; color: rgba(255,246,230,.8); }
.rx { display: flex; align-items: flex-start; gap: 1.4rem; width: 52rem; padding: 1.6rem 1.8rem; border-radius: 1.4rem; background: var(--plate); color: var(--ink); }
.rx > img { width: 1.6rem; height: 1.9rem; flex-shrink: 0; }
.rx > div { display: flex; flex-direction: column; gap: .9rem; }
.rx p { font-weight: 500; font-size: 1.3rem; line-height: 1.9rem; }
.rx hr { width: 100%; height: 1px; border: 0; margin: 0; background: var(--label-blue); }
.rx__mono { font-family: Menlo, ui-monospace, SFMono-Regular, monospace; font-weight: 400 !important; font-size: 1.05rem !important; line-height: 1.4rem !important; letter-spacing: .05em; color: var(--ink50); }

/* ---------- chat ---------- */
.chat { width: 120rem; margin: 0 auto; padding: 12.8rem 0; display: flex; align-items: center; justify-content: space-between; }
.chat__text { width: 52rem; display: flex; flex-direction: column; gap: 2.8rem; }
.chat__text .kicker { margin-bottom: 0; }
.chat__text .h2 .line:first-child { white-space: normal; }
.chat__lead { width: 46rem; font-size: 1.8rem; line-height: 2.8rem; color: var(--ink70); }
.chat__card { width: 44rem; padding: 2.2rem 2.2rem 2.6rem; border-radius: 3.2rem; background: var(--plate); display: flex; flex-direction: column; gap: 1.4rem; }
.chat__header { display: flex; align-items: center; gap: 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.chat__avatar { width: 4rem; height: 4rem; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.chat__avatar img { width: 1.6rem; height: 1.9rem; }
.chat__header strong { display: block; font-weight: 600; font-size: 1.5rem; line-height: 2rem; }
.chat__status { display: flex; align-items: center; gap: .6rem; font-size: 1.2rem; line-height: 1.6rem; color: var(--ink70); }
.chat__status i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--accent-deep); }
.chat__messages { display: flex; flex-direction: column; gap: 1rem; padding-top: .4rem; }
.bubble { padding: 1.2rem 1.6rem; font-size: 1.5rem; line-height: 2.2rem; color: var(--ink); }
.bubble--in { width: 33rem; border-radius: 1.8rem 1.8rem 1.8rem .4rem; background: var(--band); }
.bubble--wide { width: 34rem; }
.bubble--out { align-self: flex-end; border-radius: 1.8rem 1.8rem .4rem 1.8rem; background: var(--accent); font-weight: 500; }
.js [data-bubble] { opacity: 0; transform: translateY(.8rem) scale(.98); transform-origin: left bottom; }
.js .bubble--out[data-bubble] { transform-origin: right bottom; }
.js [data-bubble].is-in { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.chat__typing { display: none; align-items: center; gap: .5rem; width: 6.4rem; height: 3.6rem; padding: 0 1.4rem; border-radius: 1.8rem 1.8rem 1.8rem .4rem; background: var(--band); }
.chat__typing.is-on { display: flex; }
.chat__typing i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--ink50); animation: typing 1s infinite ease-in-out; }
.chat__typing i:nth-child(2) { animation-delay: .15s; } .chat__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%,100% { transform: translateY(0); opacity: .5;} 50% { transform: translateY(-.35rem); opacity: 1;} }
.chat__foot { display: flex; align-items: center; gap: .8rem; padding: .6rem 0 0 .4rem; font-weight: 500; font-size: 1.2rem; line-height: 1.6rem; color: var(--ink70); }

/* ---------- para quem ---------- */
.quem { width: 120rem; margin: 0 auto; padding: 12.8rem 0; display: flex; align-items: center; justify-content: space-between; }
.quem__text { width: 56rem; display: flex; flex-direction: column; gap: 4rem; }
.quem__text .h2 .line:first-child { white-space: normal; }
.checklist li { display: flex; align-items: center; gap: 1.6rem; padding: 2rem 0; border-bottom: 1px solid var(--line); font-weight: 500; font-size: 2rem; line-height: 2.8rem; }
.checklist li:last-child { border-bottom: 0; }
.checklist svg { width: 2.2rem; height: 2.2rem; flex-shrink: 0; color: var(--accent-deep); }
.js .checklist .tick, .js .compare__new .tick { stroke-dasharray: 30; stroke-dashoffset: 30; }
.js .checklist li.is-in .tick, .js .compare__new li.is-in .tick { animation: draw .6s .35s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.quem__note { font-size: 1.5rem; line-height: 2.2rem; color: var(--ink70); }
.quem__photo { width: 52rem; height: 64rem; border-radius: 26rem 26rem 3.2rem 3.2rem; overflow: hidden; background: #B9C9A6; }
.quem__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; will-change: transform; }

/* ---------- comparativo ---------- */
.compare { width: 120rem; margin: 0 auto; padding: 0 0 12.8rem; display: flex; gap: 2.4rem; }
.compare__old, .compare__new { width: 58.8rem; padding: 4rem; border-radius: 2.8rem; display: flex; flex-direction: column; gap: 2.2rem; }
.compare__old { background: var(--band); }
.compare__old h3 { font-weight: 500; font-size: 2.2rem; line-height: 2.8rem; letter-spacing: -0.02em; color: var(--ink50); }
.compare__old ul { display: flex; flex-direction: column; gap: 1.4rem; }
.compare__old li { position: relative; font-size: 1.8rem; line-height: 2.6rem; color: var(--ink50); width: max-content; }
.compare__old li::after { content: ""; position: absolute; left: 0; top: 50%; height: 1px; width: 100%; background: var(--ink50); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.compare__old.is-in li::after { transform: scaleX(1); }
.compare__old.is-in li:nth-child(2)::after { transition-delay: .1s; } .compare__old.is-in li:nth-child(3)::after { transition-delay: .2s; } .compare__old.is-in li:nth-child(4)::after { transition-delay: .3s; } .compare__old.is-in li:nth-child(5)::after { transition-delay: .4s; }
.no-js .compare__old li { text-decoration: line-through; }
.compare__new { background: var(--ink); color: var(--cream); }
.compare__new h3 { display: flex; align-items: center; gap: 1rem; font-weight: 500; font-size: 2.2rem; line-height: 2.8rem; letter-spacing: -0.02em; color: var(--accent); }
.compare__new h3 img { width: 1.6rem; height: 1.9rem; }
.compare__new ul { display: flex; flex-direction: column; gap: 1.4rem; }
.compare__new li { display: flex; align-items: center; gap: 1.2rem; font-weight: 500; font-size: 1.8rem; line-height: 2.6rem; }
.compare__new svg { width: 1.8rem; height: 1.8rem; flex-shrink: 0; color: var(--accent); }

/* ---------- transparência ---------- */
.trust { background: var(--sky); padding: 12rem 12rem 12.8rem; display: flex; flex-direction: column; gap: 4.8rem; }
.trust .h2 { font-size: 4.8rem; line-height: 5.4rem; } .trust .h2 .serif { font-size: 6rem; line-height: 5.4rem; } .trust .h2 .line--mix { gap: 1.2rem; }
.trust__cards { display: flex; gap: 2.4rem; width: 120rem; }
.tcard { width: 28.2rem; padding: 2.8rem; border-radius: 2.4rem; background: var(--plate); display: flex; flex-direction: column; gap: 2.2rem; transition: transform .45s var(--ease); }
.tcard:hover { transform: translateY(-.4rem); }
.tcard__b { width: 3rem; height: 3.6rem; }
.tcard__icon { width: 3.6rem; height: 3.6rem; }
.tcard__rappi { width: 10.4rem; height: 4.4rem; object-fit: contain; object-position: left center; }
.tcard h3 { font-weight: 500; font-size: 2rem; line-height: 2.6rem; letter-spacing: -0.02em; margin-bottom: .8rem; }
.tcard p { font-size: 1.5rem; line-height: 2.2rem; color: var(--ink70); }

/* ---------- faq ---------- */
.faq { width: 120rem; margin: 0 auto; padding: 11.2rem 0 12.8rem; display: flex; justify-content: space-between; }
.faq__head { width: 42rem; }
.faq .h2 { font-size: 4.8rem; line-height: 5.4rem; } .faq .h2 .serif { font-size: 6rem; line-height: 5.4rem; }
.faq__list { width: 68rem; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 0; }
.faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 2.4rem 0; cursor: pointer; font-weight: 500; font-size: 2rem; line-height: 2.6rem; letter-spacing: -0.02em; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon { width: 2.4rem; height: 2.4rem; flex-shrink: 0; transition: transform .4s var(--ease); }
.faq__icon .v { transform-origin: 50% 50%; transition: transform .4s var(--ease), opacity .3s; }
.faq__item[open] .faq__icon .v { transform: scaleY(0); opacity: 0; }
.faq__item[open] .faq__icon { transform: rotate(180deg); }
.faq__answer { overflow: hidden; }
.faq__item[open] summary { padding-bottom: 1.4rem; }
.faq__answer p { width: 60rem; padding: 0 0 2.4rem; font-size: 1.7rem; line-height: 2.6rem; color: var(--ink70); }

/* ---------- cta ---------- */
.cta { padding: 0 2.4rem 2.4rem; }
.cta__block { position: relative; width: 139.2rem; height: 76rem; border-radius: 20rem 20rem 4rem 4rem; overflow: hidden; background: #8EC3EA; }
.cta__photo { position: absolute; inset: -5% 0; background: url("assets/mao-ampola.jpg") 50% 42% / cover no-repeat; will-change: transform; }
.cta__text { position: absolute; left: 79.2rem; top: 19.6rem; width: 52rem; display: flex; flex-direction: column; gap: 2.8rem; }
.cta__h2 { font-weight: 500; font-size: 11.2rem; line-height: 10.6rem; letter-spacing: -0.04em; color: var(--cream); }
.cta__h2 .serif { font-size: 14rem; line-height: 10.6rem; }
.cta__lead { width: 52rem; font-size: 2.2rem; line-height: 3.2rem; color: rgba(255,246,230,.92); }
.cta__btn { align-self: flex-start; }
.seal { position: absolute; right: 5.6rem; top: 5.6rem; width: 12.4rem; height: 12.4rem; display: grid; place-items: center; }
.seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 26s linear infinite; }
.seal__b { width: 2.8rem; height: 3.3rem; position: relative; transition: transform .4s var(--ease); }
.seal:hover .seal__b { transform: translateY(-.3rem); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- assinatura ---------- */
.assinatura { position: relative; height: 33rem; overflow: hidden; }
.assinatura img { position: absolute; left: 14rem; top: .8rem; width: 116rem; height: 31.3rem; max-width: none; }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: var(--cream); padding: 7.2rem 12rem 4rem; display: flex; flex-direction: column; gap: 5.6rem; }
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; }
.footer__brand { width: 36rem; display: flex; flex-direction: column; gap: 2rem; }
.footer__brand > img { width: 14.8rem; height: 4rem; }
.footer__brand p { font-size: 1.5rem; line-height: 2.2rem; color: rgba(255,246,230,.7); }
.footer__exclusive { display: flex; align-items: center; gap: 1rem; padding-top: .8rem; font-weight: 500; font-size: 1.5rem; line-height: 2rem; color: rgba(255,246,230,.55); }
.footer__exclusive img { width: 8.4rem; height: 3.5rem; object-fit: contain; }
.footer__cols { display: flex; gap: 9.6rem; }
.footer__col { display: flex; flex-direction: column; gap: 1.4rem; }
.footer__col h4 { font-weight: 600; font-size: 1.3rem; line-height: 1.6rem; letter-spacing: .10em; text-transform: uppercase; color: rgba(255,246,230,.5); }
.footer__col a { font-weight: 500; font-size: 1.5rem; line-height: 2rem; color: var(--cream); transition: opacity .25s; }
.footer__col a:hover { opacity: .7; }
.footer__bottom { display: flex; flex-direction: column; gap: 2rem; padding-top: 2.8rem; border-top: 1px solid rgba(255,246,230,.14); }
.footer__legal { width: 90rem; font-size: 1.3rem; line-height: 2rem; color: rgba(255,246,230,.55); }
.footer__copy { font-size: 1.3rem; line-height: 1.6rem; color: rgba(255,246,230,.55); }

/* =====================================================================
   MOBILE (< 768px) — fiel ao artboard de 390
   ===================================================================== */
@media (max-width: 767px) {
  .kicker { font-size: 1.2rem; margin-bottom: 1.4rem; }
  .kicker img { width: 1rem; height: 1.2rem; }
  .h2 { font-size: 3.6rem; line-height: 4rem; } .h2 .serif { font-size: 4.5rem; line-height: 4rem; } .line--mix { gap: 1rem; }

  /* hero */
  .hero { height: 82rem; }
  .hero__photo { background-image: url("assets/hero-retrato.jpg"); background-position: 50% 0%; }
  .hero__sun { left: -18rem; top: -22rem; width: 62rem; height: 62rem; }
  .nav { top: 1.2rem; height: 4.4rem; padding: 0 2rem; }
  .nav__logo img { width: 10.4rem; height: 2.8rem; }
  .nav__links { display: none; }
  .nav__burger { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: rgba(255,246,230,.18); }
  .hero__title { left: 2rem; top: 9.6rem; width: 35rem; gap: 2.2rem; }
  .hero__h1 { width: 35rem; font-size: 4.6rem; line-height: 4.8rem; }
  .hero__h1 .line--mix { gap: 1.2rem; } .hero__h1 .serif { font-size: 5.8rem; line-height: 4.8rem; }
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 2.2rem; }
  .hero__actions .btn--lg { width: 32rem; justify-content: center; padding: 1.7rem 2.4rem; font-size: 1.6rem; line-height: 2rem; }
  .hero__exclusive { padding-left: 0; gap: .8rem; }
  .hero__exclusive img { width: 8.2rem; height: 3.4rem; }
  .hero__marca { left: 0; top: 74rem; width: 39.2rem; height: 10.5rem; }

  /* marquee */
  .marquee { height: 5.6rem; }
  .marquee__group { gap: 2.4rem; padding: 0 1.2rem; }
  .marquee__group span { font-size: 1.4rem; line-height: 1.8rem; } .marquee__group img { width: 1.2rem; height: 1.4rem; }

  /* como funciona */
  .como { width: auto; padding: 7.2rem 0 6.4rem; gap: 2.8rem; }
  .como__head { display: block; padding: 0 2.4rem; }
  .como__head .h2 { font-size: 3.8rem; line-height: 4rem; } .como__head .h2 .serif { font-size: 4.8rem; line-height: 4rem; }
  .como__head .h2 .line:first-child { white-space: normal; }
  .como__body { flex-direction: column; gap: 2.8rem; padding: 0 2.4rem; }
  .steps { width: 100%; }
  .step { gap: 1.8rem; padding: 2rem 0; }
  .step__num { width: 3rem; padding-top: .5rem; font-size: 1.4rem; line-height: 1.8rem; }
  .step__body { gap: .6rem; }
  .step__title { gap: 1rem; font-size: 2.1rem; line-height: 2.7rem; flex-wrap: wrap; }
  .step__rappi { width: 8rem; height: 3.4rem; }
  .step__desc { font-size: 1.5rem; line-height: 2.2rem; }
  .como__photos { width: 100%; flex-direction: row; gap: 1rem; }
  .photo--medica { width: 20rem; height: 26rem; border-radius: 10rem 10rem 1.8rem 1.8rem; }
  .photo--entrega { width: 13.2rem; height: 26rem; border-radius: 1.8rem; } .photo--entrega img { object-position: 50% 50%; }
  .photo__pill { left: 1rem; bottom: 1rem; padding: .7rem 1rem; gap: 0; }
  .photo__pill img { width: 6.6rem; height: 2.8rem; }

  /* vitrine */
  .vitrine { width: auto; padding: .8rem 2.4rem 6.4rem; gap: 2.4rem; }
  .vitrine__head { display: block; }
  .vitrine__head .h2 { font-size: 3.4rem; line-height: 3.8rem; } .vitrine__head .h2 .serif { font-size: 4.3rem; line-height: 3.8rem; }
  .vitrine__head .h2 .line { white-space: normal; }
  .vitrine__lead { width: auto; margin-top: 1.4rem; font-size: 1.5rem; line-height: 2.2rem; }
  .products { flex-direction: column; gap: 1.4rem; }
  .product { width: 100%; border-radius: 2.4rem; }
  .product__stage { height: 25rem; }
  .product__vial { height: 25rem; } .product--tirze .product__vial { width: 11.2rem; } .product--sema .product__vial { width: 11.6rem; }
  .product__badge { left: 1.4rem; top: 1.4rem; padding: .6rem 1rem; } .product__badge i { width: .6rem; height: .6rem; }
  .product__body { gap: 1.4rem; padding: 1.8rem 2rem 2rem; }
  .product__name { gap: .3rem; } .product__name h3 { font-size: 2.2rem; line-height: 2.8rem; } .product__name p { font-size: 1.4rem; line-height: 2rem; }
  .product__row { padding-top: 0; }
  .btn--sm { padding: 1.2rem 1.8rem; gap: .8rem; font-size: 1.4rem; line-height: 1.8rem; } .btn--sm .btn__arrow { width: 1.4rem; height: 1.4rem; }
  .product--soon { flex-direction: row; align-items: center; gap: 1.6rem; padding: 1.8rem 2rem; }
  .product--soon .product__stage { display: none; }
  .product--soon .product__body { flex-direction: row; align-items: center; gap: 1.6rem; padding: 0; }
  .product--soon .soon__circle { width: 5.6rem; height: 5.6rem; flex-shrink: 0; } .product--soon .soon__circle img { width: 2rem; height: 2.4rem; }
  .product--soon .product__name h3 { font-size: 1.8rem; line-height: 2.4rem; }

  /* dose */
  .dose { flex-direction: column; align-items: stretch; gap: 2.8rem; padding: 6.4rem 2.4rem; }
  .dose__stage { width: 34.2rem; height: 43rem; }
  .dose__toggle { left: 6rem; } .dose__toggle button { padding: .8rem 1.6rem; font-size: 1.3rem; line-height: 1.6rem; }
  .dose__plate { left: 6.1rem; top: 18rem; width: 22rem; height: 22rem; }
  .dose__dial { top: 5.6rem; width: 34.2rem; height: 22rem; }
  .dose__vials { left: 10.4rem; top: 11.8rem; width: 13.4rem; height: 30.2rem; }
  .dose__badge { left: 4rem; top: 8.6rem; padding: .6rem 1.2rem; font-size: 1.3rem; line-height: 1.6rem; }
  .dose__min, .dose__max { top: 23.2rem; } .dose__min { left: 1.2rem; } .dose__max { left: 30rem; }
  .dose__knob { left: 7.3rem; top: 12.2rem; width: 2rem; height: 2rem; }
  .dose__hint { left: 1.2rem; top: 36rem; flex-direction: column; align-items: flex-start; gap: .4rem; font-size: 1.2rem; line-height: 1.6rem; }
  .dose__hint svg { width: 2.2rem; height: 1.6rem; } .dose__hint span { width: 8.4rem; }
  .dose__text { width: 100%; gap: 2.8rem; }
  .dose__text .h2 .line:last-child { white-space: normal; }
  .dose__text .bullets { margin-top: -2.8rem; }
  .bullets li { gap: 1.4rem; padding: 1.4rem 0; font-size: 1.6rem; line-height: 2.3rem; }
  .bullets i { width: 2.6rem; height: 2.6rem; } .bullets i svg { width: 1.3rem; height: 1.3rem; }
  .dose__extra { gap: 1.8rem; padding-top: .6rem; margin-top: -1.8rem; }
  .week { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .week__days span { width: 3.2rem; height: 3.2rem; }
  .rx { width: 100%; gap: 1.2rem; padding: 1.4rem 1.6rem; }
  .rx > img { width: 1.4rem; height: 1.7rem; }

  /* chat */
  .chat { width: auto; flex-direction: column; align-items: stretch; gap: 2.4rem; padding: 6.4rem 2.4rem; }
  .chat__text { width: 100%; gap: 1.4rem; }
  .chat__text .h2 { font-size: 3.4rem; line-height: 3.8rem; } .chat__text .h2 .serif { font-size: 4.3rem; line-height: 3.8rem; }
  .chat__card { width: 100%; padding: 1.8rem 1.8rem 2.2rem; border-radius: 2.6rem; gap: 1.2rem; }
  .chat__header { gap: 1rem; }
  .chat__avatar { width: 3.6rem; height: 3.6rem; } .chat__avatar img { width: 1.4rem; height: 1.7rem; }
  .chat__header strong { font-size: 1.4rem; line-height: 1.8rem; }
  .chat__messages { gap: .8rem; padding-top: 0; }
  .bubble { padding: 1rem 1.4rem; font-size: 1.4rem; line-height: 2rem; }
  .bubble--in { width: 27rem; border-radius: 1.6rem 1.6rem 1.6rem .4rem; } .bubble--wide { width: 28rem; }
  .bubble--out { border-radius: 1.6rem 1.6rem .4rem 1.6rem; }

  /* para quem */
  .quem { width: auto; flex-direction: column-reverse; align-items: stretch; gap: 2.8rem; padding: 6.4rem 2.4rem; }
  .quem__text { width: 100%; gap: 2.8rem; }
  .checklist li { gap: 1.4rem; padding: 1.6rem 0; font-size: 1.7rem; line-height: 2.4rem; }
  .quem__note { font-size: 1.4rem; line-height: 2rem; }
  .quem__photo { width: 34.2rem; height: 38rem; border-radius: 17.1rem 17.1rem 2.4rem 2.4rem; }
  .quem__photo img { object-position: 55% 25%; }

  /* comparativo */
  .compare { width: auto; flex-direction: column; gap: 1.2rem; padding: 0 2.4rem 6.4rem; }
  .compare__old, .compare__new { width: 100%; padding: 2.4rem; border-radius: 2.2rem; gap: 1.6rem; }
  .compare__old h3, .compare__new h3 { font-size: 1.8rem; line-height: 2.4rem; }
  .compare__new h3 img { width: 1.4rem; height: 1.7rem; }
  .compare__old ul, .compare__new ul { gap: 1rem; }
  .compare__old li, .compare__new li { font-size: 1.5rem; line-height: 2.2rem; }
  .compare__new li { gap: 1rem; } .compare__new svg { width: 1.6rem; height: 1.6rem; }

  /* transparência */
  .trust { padding: 5.6rem 2.4rem 6.4rem; gap: 2.4rem; }
  .trust .h2 { font-size: 3.2rem; line-height: 3.6rem; } .trust .h2 .serif { font-size: 4rem; line-height: 3.6rem; } .trust .h2 .line--mix { gap: .8rem; }
  .trust__cards { width: 100%; flex-wrap: wrap; gap: 1.2rem; }
  .tcard { width: 16.5rem; padding: 2rem; border-radius: 2rem; gap: 1.4rem; }
  .tcard__b { width: 2.4rem; height: 2.8rem; } .tcard__icon { width: 2.8rem; height: 2.8rem; } .tcard__rappi { width: 9.2rem; height: 3.9rem; }
  .tcard h3 { font-size: 1.6rem; line-height: 2rem; margin-bottom: .6rem; } .tcard p { font-size: 1.3rem; line-height: 1.9rem; }

  /* faq */
  .faq { width: auto; flex-direction: column; padding: 6.4rem 2.4rem; }
  .faq__head { width: 100%; padding-bottom: 1.2rem; }
  .faq .h2 { font-size: 3.2rem; line-height: 3.6rem; } .faq .h2 .serif { font-size: 4rem; line-height: 3.6rem; }
  .faq__list { width: 100%; }
  .faq__item summary { padding: 1.8rem 0; font-size: 1.7rem; line-height: 2.3rem; }
  .faq__icon { width: 2.2rem; height: 2.2rem; }
  .faq__item[open] summary { padding-bottom: 1.2rem; }
  .faq__answer p { width: auto; padding-bottom: 1.8rem; font-size: 1.5rem; line-height: 2.3rem; }

  /* cta */
  .cta { padding: 0 1.2rem 1.2rem; }
  .cta__block { width: 100%; height: 64rem; border-radius: 12rem 12rem 2.8rem 2.8rem; }
  .cta__photo { background-position: 40% 50%; }
  .cta__text { left: 2.4rem; top: 3.6rem; width: 31.8rem; gap: 1.6rem; }
  .cta__h2 { font-size: 6rem; line-height: 5.8rem; } .cta__h2 .serif { font-size: 7.6rem; line-height: 5.8rem; }
  .cta__btn { position: absolute; left: 0; top: 51.6rem; width: 31.8rem; justify-content: center; padding: 1.8rem 2.4rem; font-size: 1.7rem; line-height: 2.2rem; }
  .seal { right: 2.2rem; top: 43rem; width: 9.6rem; height: 9.6rem; } .seal__b { width: 2.2rem; height: 2.6rem; }

  /* assinatura */
  .assinatura { height: 12rem; }
  .assinatura img { left: 2.4rem; top: 1.4rem; width: 34.2rem; height: 9.2rem; }

  /* footer */
  .footer { padding: 4.8rem 2.4rem 4rem; gap: 3.2rem; }
  .footer__top { flex-direction: column; gap: 3.2rem; }
  .footer__brand { width: 100%; gap: 1.4rem; }
  .footer__brand > img { width: 12.6rem; height: 3.4rem; }
  .footer__brand p { font-size: 1.4rem; line-height: 2rem; }
  .footer__exclusive { padding-top: .4rem; gap: .8rem; } .footer__exclusive img { width: 7.6rem; height: 3.2rem; }
  .footer__cols { gap: 2.8rem; }
  .footer__col { gap: 1.2rem; } .footer__col:first-child { width: 12rem; }
  .footer__col h4 { font-size: 1.2rem; }
  .footer__bottom { gap: 1.4rem; padding-top: 2.2rem; }
  .footer__legal { width: auto; font-size: 1.2rem; line-height: 1.8rem; } .footer__copy { font-size: 1.2rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .marquee__track, .seal__ring, .product__badge i { animation: none !important; }
  .js [data-reveal], .js [data-bubble] { opacity: 1; transform: none; transition: none; }
  .btn, .product, .tcard { transition: none; }
}