/* Live Tinted · concept landing · Hanken Grotesk no lugar de Roobert, Rokkitt no lugar de onerockwell */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/hanken-grotesk-400.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/hanken-grotesk-600.woff2) format('woff2')}
@font-face{font-family:'Rokkitt';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/rokkitt-400.woff2) format('woff2')}
@font-face{font-family:'Rokkitt';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/rokkitt-700.woff2) format('woff2')}

:root{
  /* primitivos medidos no CSS da marca */
  --cacao:#513629;
  --kajal:#290404;
  --tinted:#f75a16;
  --cream:#faf5e8;
  --white:#ffffff;
  --taupe:#7f6868;
  /* papéis */
  --tx:var(--cacao);
  --tx-soft:var(--taupe);
  --acao:var(--cacao);
  --sobre-escuro:var(--white);
  --fio:#ddd3cb;
  --grotesk:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --slab:'Rokkitt','Rockwell',Georgia,serif;
  --ease:cubic-bezier(.23,1,.32,1);
  --pad:max(120px,calc((100vw - 1320px) / 2));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-padding-top:72px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 15px/1.5 var(--grotesk);color:var(--tx);background-color:var(--white)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;touch-action:manipulation}
button{font:inherit;touch-action:manipulation}
p{text-wrap:pretty}
s{color:var(--tx-soft)}
::selection{background:var(--cacao);color:var(--white)}
:focus-visible{outline:2px solid var(--kajal);outline-offset:3px}
main section{position:relative;overflow-x:clip}

/* ---------- casca do pacote ---------- */
.pular{position:absolute;left:-9999px;top:0;z-index:100;background:var(--kajal);color:var(--white);padding:10px 16px}
.pular:focus{left:8px;top:8px}
.rascunho{background-color:var(--kajal);color:var(--white);font-size:12px;line-height:1.4;text-align:center;padding:6px 16px}
.pacote{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:52px;padding:0 24px;background-color:var(--white);border-bottom:1px solid var(--fio)}
.pacote-abas{display:flex;gap:4px}
.pacote-abas a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:14px;text-decoration:none;color:var(--cacao);border-bottom:2px solid transparent}
.pacote-abas a[aria-current="page"]{border-bottom-color:var(--tinted);font-weight:600}
.pacote-abas .curto{display:none}
.chat{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 20px;border-radius:999px;background-color:var(--cacao);color:var(--white);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.rodape{background-color:var(--cacao);color:var(--white);text-align:center;padding:8px 24px 40px;font-size:13px}
.rodape p{max-width:640px;margin:0 auto 10px}
.rodape-chat{color:var(--white);font-weight:600}
.rodape-fontes{font-family:var(--slab);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream)}

/* ---------- tipos que se repetem ---------- */
.hue-title{font-size:38px;line-height:1.15;font-weight:400;letter-spacing:-.01em;text-align:center;text-wrap:balance}
.hue-title--left{text-align:left}
.click-title{font-size:30px;line-height:1.2;font-weight:400;letter-spacing:-.005em;text-wrap:balance}
.gesture{font-family:var(--slab);font-weight:700;font-size:13px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase}
.fineprint{font-family:var(--slab);font-size:12px;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-soft);margin-top:10px}
.award{font-family:var(--slab);font-weight:700;font-size:12px;line-height:1.45;letter-spacing:.1em;text-transform:uppercase;border-left:2px solid var(--tinted);padding-left:10px;margin-top:14px}
.pct{font-size:38px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tag{font-family:var(--slab);font-weight:700;font-size:13px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums;border:1px solid currentColor;border-radius:14px;padding:4px 12px}
.press p{font-size:18px;line-height:1.4}
.press footer{margin-top:10px}

.pill{display:inline-flex;align-items:center;justify-content:center;width:320px;max-width:100%;min-height:42px;padding:0 24px;border-radius:999px;background-color:var(--acao);color:var(--white);font-weight:600;font-size:15px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;transition:transform .12s var(--ease),background-color .15s ease}
.pill:active{transform:translateY(2px)}
.pill--line{width:auto;background-color:transparent;color:var(--cacao);border:1px solid var(--cacao)}
.pill--white{background-color:var(--white);color:var(--cacao)}
@media (hover:hover) and (pointer:fine){
  .pill:hover{background-color:var(--kajal)}
  .pill--line:hover{background-color:var(--cacao);color:var(--white)}
  .pill--white:hover{background-color:var(--cream)}
}

/* tira marrom: faixa de aviso da home */
.hue-strip{display:flex;align-items:center;justify-content:center;min-height:40px;padding:6px 16px;background-color:var(--cacao);color:var(--white);font-family:var(--slab);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-align:center}

/* ---------- 1 · faixa-frete ---------- */
.tint-top{background-color:var(--cacao)}
.brandbar{display:flex;align-items:center;justify-content:center;height:60px;background-color:var(--white);border-bottom:1px solid var(--fio)}
.wordmark{width:200px;height:40px;object-fit:cover}

/* ---------- 2 · hero em carrossel ---------- */
.click-open{background-color:var(--white)}
.click-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.click-rail::-webkit-scrollbar{display:none}
.click-slide{position:relative;flex:0 0 100%;height:clamp(420px,39.6vw,760px);scroll-snap-align:start}
.click-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.click-card{position:absolute;right:0;top:50%;transform:translateY(-50%);width:546px;background-color:var(--white);border-radius:20px 0 0 20px;padding:34px 30px 30px}
.click-card .gesture{margin-bottom:8px}
.click-card p:not(.gesture){margin:14px 0 20px;max-width:46ch}
.click-dots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:2px;padding:0 6px;border-radius:999px;background-color:var(--white)}
.click-dot{position:relative;width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer}
.click-dot::before{content:"";position:absolute;left:10px;top:10px;width:8px;height:8px;border-radius:50%;border:1px solid var(--kajal);transition:background-color .15s ease}
.click-dot[aria-pressed="true"]::before{background-color:var(--kajal)}
.sem-js .click-dots,.sem-js .swatch{display:none}

/* ---------- 3 · índice de gestos ---------- */
.gesture-index-block{background-color:var(--white);padding:56px var(--pad) 52px;text-align:center}
.gesture-index{display:flex;justify-content:center;align-items:center;margin-top:22px;font-family:var(--slab);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.gesture-index li{display:flex;align-items:center}
.gesture-index li + li::before{content:"·";margin:0 14px;color:var(--tx-soft)}
.gesture-index a{display:inline-block;padding:12px 2px;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s ease}
@media (hover:hover) and (pointer:fine){.gesture-index a:hover{border-bottom-color:var(--cacao)}}

/* ---------- trilhos (4, 14, 17) ---------- */
.swipe-zone{padding:72px 0 64px}
.swipe-zone--sticks,.swipe-zone--lips{background-color:var(--cream)}
.swipe-zone--sets{background-color:var(--white);padding-top:0}
.swipe-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:48px;align-items:end;padding-inline:var(--pad);margin-bottom:40px}
.swipe-head .hue-title{text-align:left}
.swipe-rail{display:flex;align-items:flex-start;gap:32px;overflow-x:auto;padding-inline:var(--pad);scroll-padding-inline:var(--pad);scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
.swipe-rail::-webkit-scrollbar{display:none}
.swipe-card{flex:0 0 400px;scroll-snap-align:start}
.swipe-photo{width:100%;aspect-ratio:1;object-fit:cover}
.swipe-card h3{font-size:20px;line-height:1.25;font-weight:600;margin-top:18px}
.swipe-card > .gesture{margin-top:18px}
.swipe-card > .gesture + h3{margin-top:8px}
.swipe-card > p:not([class]){margin-top:8px}
.howto-plate{display:flex;align-items:flex-start;aspect-ratio:1;padding:24px 12px 24px 0;border-top:1px solid var(--cacao);border-bottom:1px solid var(--cacao);font-size:30px;line-height:1.22;letter-spacing:-.005em}
.howto-plate--short{aspect-ratio:auto;min-height:300px;font-size:38px;line-height:1.15}
.actives{margin-top:14px;font-size:14px}
.actives li{padding:8px 0;border-top:1px solid var(--fio)}

.swipe-rail--edge{padding-left:0;scroll-padding-left:0}
.swipe-card--lip-a{flex-basis:560px;padding-left:32px}
.swipe-card--lip-b{flex-basis:440px}
.swipe-card--lip-c{flex-basis:360px}
.lip-shades{columns:2;column-gap:24px;margin-top:14px;font-size:14px;font-variant-numeric:tabular-nums}
.lip-shades li{break-inside:avoid;padding:7px 0;border-top:1px solid var(--fio)}
.lip-shades--one{columns:1}

.swipe-zone--sets .swipe-rail{margin-top:56px}
.set-intro{flex:0 0 360px;scroll-snap-align:start}
.set-intro .gesture{margin-top:20px}
.set-intro p:not(.gesture){margin:8px 0 22px}
.swipe-card--set{flex-basis:460px}
.swipe-card--tall .swipe-photo{aspect-ratio:3/4}
.set-cap{margin-top:28px}
.set-cap img{width:100%;aspect-ratio:1460/1736;object-fit:cover}
.nb{white-space:nowrap}
.tag-row--stack{flex-direction:column;align-items:flex-start}
.set-price{margin-top:6px;font-size:18px;font-variant-numeric:tabular-nums}
.set-price span{font-weight:600}
.swipe-card--set .fineprint{letter-spacing:.06em}

/* cursor-stick: o indicador de todo trilho */
.swatch{position:relative;height:44px;margin:36px var(--pad) 0;cursor:pointer}
.swatch::before{content:"";position:absolute;left:0;right:0;top:21px;height:2px;background-color:var(--cacao);opacity:.2}
.swatch-smear{position:absolute;left:0;top:17px;height:10px;width:6px;background-color:var(--tinted);clip-path:polygon(0 35%,4% 12%,11% 22%,19% 4%,28% 18%,37% 6%,46% 20%,58% 2%,67% 16%,78% 8%,88% 20%,96% 6%,100% 30%,100% 72%,94% 94%,85% 80%,74% 98%,63% 84%,52% 96%,41% 82%,30% 100%,20% 86%,10% 96%,3% 80%,0 66%)}
.stick{position:absolute;left:0;top:14px;display:flex;width:120px;height:16px;border-radius:999px;overflow:hidden;background-color:var(--cacao);cursor:grab;touch-action:none;will-change:transform}
.stick::after{content:"";position:absolute;inset:0}
.stick-tip{flex:0 0 14px;background-color:var(--tinted)}
.stick-cap{flex:0 0 28px;margin-left:auto;background-color:var(--kajal)}
.swatch.is-held .stick{cursor:grabbing}
.stick:focus-visible{outline-offset:6px}

/* ---------- 5 · depois do swipe (laranja) ---------- */
.after-swipe{background-color:var(--tinted);color:var(--kajal);padding:56px var(--pad)}
.after-swipe-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.after-half{padding-right:48px}
.after-half + .after-half{padding:0 0 0 48px;border-left:1px solid rgba(255,255,255,.3)}
.pct-lines{margin-top:18px}
.pct-lines li{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;align-items:baseline;font-size:18px;line-height:1.35;padding:8px 0}
.after-swipe .fineprint{color:var(--kajal)}
.pct-lines--tight li{grid-template-columns:100px minmax(0,1fr);font-size:15px}

/* ---------- 6 · dot and blend ---------- */
.dot-zone{background-color:var(--white);padding:80px var(--pad) 88px}
.dot-head{max-width:760px;margin:0 auto 48px;text-align:center}
.dot-head .gesture{margin-bottom:14px}
.dot-grid{display:grid;grid-template-columns:300px minmax(0,1fr) 300px;gap:40px;align-items:start}
.dot-photo img{width:100%;aspect-ratio:1;object-fit:cover}
.dot-matrix{display:grid;grid-template-columns:repeat(5,88px);gap:16px;justify-content:center}
.dot{width:88px;height:88px;padding:0;border:1px solid var(--cacao);border-radius:50%;background-color:var(--white);color:var(--cacao);font-size:15px;font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.dot--out{border-style:dashed}
.dot[aria-pressed="true"]{background-color:var(--cacao);color:var(--white)}
.dot:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.dot:not([aria-pressed="true"]):hover{background-color:var(--cream)}}
.shade-legend{margin-top:28px;text-align:center;font-size:18px;font-variant-numeric:tabular-nums;min-height:28px}
.sem-js .shade-legend{columns:2;font-size:13px;text-align:left}
.com-js .shade-legend li:not(.is-on){display:none}
.dot-copy p + p{margin-top:12px}
.dot-copy .pct-lines{margin-top:20px;border-top:1px solid var(--cacao)}

/* ---------- 7 · layer skin tint ---------- */
.layer-zone{background-color:var(--white)}
.layer-stage{position:relative;height:clamp(460px,56vw,1080px)}
.layer-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.layer-stack{position:absolute;left:0;bottom:56px;width:440px}
.layer-sheet{position:absolute;background-color:var(--white);border:1px solid var(--fio);border-left:0;border-radius:0 20px 20px 0;transition:transform .9s var(--ease)}
.layer-sheet--2{inset:-24px -24px 24px 0}
.layer-sheet--3{inset:-48px -48px 48px 0}
.layer-card{position:relative;background-color:var(--white);border:1px solid var(--fio);border-left:0;border-radius:0 20px 20px 0;padding:28px 28px 28px 32px}
.layer-card-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:start;margin-top:16px}
.layer-card-row img{width:96px;aspect-ratio:1;object-fit:cover}
.layer-card .click-title{font-size:22px}
.layer-card-row p{margin-top:8px}
.layer-proof{padding:40px var(--pad) 48px}
.layer-proof-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.layer-proof-cols .pct{display:block;margin-bottom:8px}

/* ---------- 8 · swirl huebeam ---------- */
.swirl-zone{background-color:var(--cream);padding:80px var(--pad)}
.swirl-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:56px;align-items:start}
.swirl-compass{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px) minmax(0,1fr);gap:0 28px;align-items:center}
.swirl-pan{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%}
.swirl-shades{display:grid;gap:120px}
.swirl-shades li{position:relative;padding-bottom:12px;border-bottom:1px solid var(--cacao);font-variant-numeric:tabular-nums}
.swirl-shades li::after{content:"";position:absolute;bottom:-1px;width:28px;height:1px;background-color:var(--cacao)}
.swirl-shades--left{text-align:right}
.swirl-shades--left li::after{right:-28px}
.swirl-shades--right li::after{left:-28px}
.swirl-shades strong{display:block;font-weight:600}
.swirl-shades img{width:96px;aspect-ratio:1;object-fit:cover;margin-bottom:10px}
.swirl-how{grid-column:1 / -1;max-width:640px;margin:40px auto 0;text-align:center}
.swirl-lead{font-size:18px;line-height:1.4;margin-bottom:10px}
.swirl-powder{border-left:1px solid var(--cacao);padding-left:40px}
.swirl-powder img{width:240px;aspect-ratio:1;object-fit:cover}
.swirl-powder h3{font-size:20px;line-height:1.25;font-weight:600;margin:18px 0 10px}

/* ---------- 9 · olhos (escuro) ---------- */
.eye-zone{background-color:var(--kajal);color:var(--sobre-escuro);padding:72px var(--pad) 68px}
.eye-zone :focus-visible{outline-color:var(--white)}
.eye-zone .gesture,.eye-zone .fineprint{color:var(--cream)}
.eye-band{display:grid;gap:40px}
.eye-band--wiggle{grid-template-columns:240px minmax(0,1fr) minmax(0,1.25fr);align-items:start}
.eye-photo{width:240px;aspect-ratio:1;object-fit:cover}
.eye-copy .gesture{margin-top:14px}
.wiggle-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:22px}
.wiggle-row li:nth-child(2){margin-top:40px}
.wiggle-row .pct{display:block;margin-bottom:8px}
.eye-band--glide{position:relative;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 180px;align-items:center;margin-top:56px;padding-top:36px}
.glide-line{position:absolute;top:0;left:calc(-1 * var(--pad));right:calc(-1 * var(--pad));height:1px;background-color:var(--white);transform-origin:left center}
.eye-photo--liner{width:180px}
.eye-band--pump{grid-template-columns:auto minmax(0,1fr) minmax(0,1.4fr);align-items:center;margin-top:56px}
.pump-beats{display:flex;gap:12px}
.pump-beats span{width:56px;height:56px;border:1px solid var(--white);border-radius:50%}

/* ---------- 10 · tap ---------- */
.tap-zone{background-color:var(--white);padding-top:80px}
.tap-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start;padding:0 var(--pad) 72px}
.tap-masks img{width:100%;max-width:560px;aspect-ratio:560/380;object-fit:cover}
.tap-masks .click-title{font-size:24px;margin-top:18px}
.tap-masks .gesture{margin:10px 0}
.tap-cream-top{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start}
.tap-cream-top img{width:200px;aspect-ratio:1;object-fit:cover}
.tap-cream-top .hue-title{margin:10px 0 12px}
.tap-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}
.tap-proof li{border-top:1px solid var(--cacao);padding-top:14px}
.tap-proof .pct{display:block;margin-bottom:8px}

/* ---------- 11 · head to toe ---------- */
.headtoe-zone{background-color:var(--white);padding:88px var(--pad)}
.headtoe-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px) minmax(0,1fr);gap:40px;align-items:stretch}
.headtoe-tube{position:sticky;top:96px;align-self:start;width:100%;aspect-ratio:1;object-fit:cover}
.headtoe-column{text-align:center}
.headtoe-steps{margin:40px 0}
.headtoe-steps p{font-size:22px;line-height:1.35}
.headtoe-steps p + p{margin-top:40px}
.headtoe-sizes{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:6px;margin:20px 0 14px}
.headtoe-sizes .tag{white-space:nowrap}
.headtoe-glotion{margin-top:56px;padding-top:40px;border-top:1px solid var(--cacao)}
.headtoe-glotion .click-title{font-size:24px}
.headtoe-glotion .gesture{margin:12px 0}
.headtoe-glotion .tag-row{justify-content:center}
.headtoe-side{display:flex;flex-direction:column}
.headtoe-side .award:first-child{margin-top:0}
.headtoe-side .press{margin-top:28px}
.headtoe-side img{margin-top:auto;padding-top:40px;width:100%;aspect-ratio:1346/1130;object-fit:cover;box-sizing:content-box}

/* ---------- 12 · drops ---------- */
.drops-zone{background-color:var(--cream);padding:80px var(--pad) 88px}
.drops-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:56px;align-items:start}
.drops-stair{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}
.drops-stair li:nth-child(2){margin-top:28px}
.drops-stair li:nth-child(3){margin-top:56px}
.drops-stair li:nth-child(4){margin-top:84px}
.drops-stair img{width:100%;aspect-ratio:1/1.3;object-fit:cover}
.drops-stair .drops-cutout{background-color:var(--white)}
.drops-stair figcaption{font-family:var(--slab);font-weight:700;font-size:12px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;margin-top:10px}
.drops-copy .gesture{margin:14px 0}
.drops-ways{list-style:decimal;padding-left:20px}
.drops-ways li{padding:4px 0 4px 6px}
.drops-brush{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:start;margin:22px 0}
.drops-brush img{width:96px;aspect-ratio:1;object-fit:cover}
.drops-prices{columns:2;column-gap:24px;margin-top:28px;font-size:14px;font-variant-numeric:tabular-nums}
.drops-prices li{break-inside:avoid}
.drops-prices li{padding:7px 0;border-top:1px solid var(--cacao)}

/* ---------- 13 · mist ---------- */
.mist-zone{background-color:var(--white);padding:88px var(--pad) 72px}
.mist-lede{max-width:640px;margin:20px auto 0}
.mist-field{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;align-items:start;margin:8px 0 48px}
.mist-field li:nth-child(2){margin-top:48px}
.mist-field li:nth-child(3){margin-top:12px}
.mist-field li:nth-child(4){margin-top:72px}
.mist-field .pct{display:block;margin-bottom:10px}
.mist-foot{text-align:center}
.mist-foot .tag-row{justify-content:center;margin-bottom:6px}

/* ---------- 15 · o gesto original ---------- */
.origin-zone{display:flex;justify-content:flex-end;align-items:center;min-height:680px;padding:40px 0;background-color:var(--cream)}
.origin-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.origin-card{position:relative;width:540px;background-color:var(--white);border-radius:20px 0 0 20px;padding:32px}
.origin-founder{display:grid;grid-template-columns:160px minmax(0,1fr);gap:20px;align-items:start;padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--fio);font-size:14px}
.origin-founder img{width:160px;height:134px;object-fit:cover}
.origin-mission p{margin-top:12px}
.press--founder{margin-top:20px}
.press--founder p{margin-top:0}

/* ---------- 16 · clean + tint fam ---------- */
.fam-zone{background-color:var(--white);padding:72px var(--pad)}
.fam-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr)}
.fam-col{padding:0 32px}
.fam-col:first-child{padding-left:0}
.fam-col:last-child{padding-right:0}
.fam-col + .fam-col{border-left:1px solid var(--cacao)}
.fam-col .click-title,.fam-col h3{margin-bottom:12px}
.fam-seals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:20px}
.fam-seals li{display:flex;align-items:center;justify-content:center;min-height:22px;padding:2px 8px;border:1px solid var(--cacao);border-radius:999px;font-family:var(--slab);font-weight:700;font-size:11px;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;text-align:center}

/* ---------- 18 · click into place ---------- */
.final-click{background-color:var(--cacao);color:var(--sobre-escuro);padding:80px var(--pad) 56px;text-align:center}
.final-click :focus-visible{outline-color:var(--white)}
.final-wand{width:220px;aspect-ratio:1;object-fit:cover;margin:0 auto 32px}
.final-click .hue-title{max-width:760px;margin:0 auto}
.press--final{max-width:640px;margin:24px auto 32px}
.final-ship{font-size:12px;margin-top:20px}

/* ---------- movimento: cada bloco entra como o seu gesto ---------- */
.com-js .rv{transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease)}
.com-js .rv-swipe{transition-delay:calc(min(var(--i,0),5) * 60ms)}
.com-js .rv-swipe:not(.in){opacity:0;transform:translateX(40px)}
.com-js .rv-dot:not(.in){opacity:0}
.com-js .rv-dot.in{animation:lt-dot .45s var(--ease) backwards;animation-delay:calc(var(--i,0) * 22ms)}
.com-js .dot.rv{transition:background-color .15s ease,color .15s ease}
.com-js .rv-layer:not(.in) .layer-sheet--2{transform:translate(-24px,24px)}
.com-js .rv-layer:not(.in) .layer-sheet--3{transform:translate(-48px,48px)}
.com-js .rv-swirl{transition-duration:1s}
.com-js .rv-swirl:not(.in){opacity:0;transform:rotate(-50deg) scale(.96)}
.com-js .rv-wiggle:not(.in){opacity:0}
.com-js .rv-wiggle.in{animation:lt-wiggle .7s var(--ease) backwards;animation-delay:calc(var(--i,0) * 90ms)}
.com-js .rv-glide{transition-duration:1.1s}
.com-js .rv-glide:not(.in){transform:scaleX(0)}
.com-js .rv-pump:not(.in){opacity:.25}
.com-js .rv-pump.in{animation:lt-pump .9s ease-out backwards;animation-delay:calc(var(--i,0) * 160ms)}
.com-js .rv-tap{transition-delay:calc(var(--i,0) * 90ms)}
.com-js .rv-tap:not(.in){opacity:0;transform:scale(.94)}
.com-js .rv-drop{transition-delay:calc(var(--i,0) * 110ms)}
.com-js .rv-drop:not(.in){opacity:0;transform:translateY(-28px)}
.com-js .rv-mist{transition-duration:1s;transition-delay:calc(var(--i,0) * 120ms)}
.com-js .rv-mist:not(.in){opacity:0;filter:blur(8px)}
.com-js .rv-click:not(.in){opacity:0;transform:translateX(28px)}
@keyframes lt-dot{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@keyframes lt-wiggle{0%{opacity:0;transform:translateX(-10px)}35%{opacity:1;transform:translateX(7px)}65%{transform:translateX(-3px)}100%{transform:none}}
@keyframes lt-pump{0%{opacity:.25;transform:none}20%{opacity:1;transform:scale(.82)}40%{transform:none}55%{transform:scale(.82)}70%{transform:none}85%{transform:scale(.88)}100%{transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .com-js .rv,.com-js .rv *{transform:none!important;filter:none!important;animation:none!important;transition-property:opacity!important}
  .swatch-smear{clip-path:none}
  .pill:active,.dot:active{transform:none}
}

/* ---------- até 1100 px: empilha ---------- */
@media (max-width:1100px){
  :root{--pad:40px}
  .swipe-head{grid-template-columns:minmax(0,1fr);gap:16px}
  .dot-grid{grid-template-columns:minmax(0,1fr);justify-items:center}
  .dot-photo{max-width:300px}
  .dot-copy{max-width:560px}
  .swirl-grid{grid-template-columns:minmax(0,1fr)}
  .swirl-powder{border-left:0;border-top:1px solid var(--cacao);padding:32px 0 0}
  .eye-band--wiggle{grid-template-columns:200px minmax(0,1fr)}
  .eye-photo{width:200px}
  .eye-numbers{grid-column:1 / -1}
  .eye-band--glide{grid-template-columns:minmax(0,1fr) 160px}
  .eye-band--glide .glide-how{grid-column:1 / -1;grid-row:2}
  .eye-photo--liner{width:160px;grid-column:2;grid-row:1}
  .eye-band--pump{grid-template-columns:minmax(0,1fr)}
  .tap-grid{grid-template-columns:minmax(0,1fr)}
  .headtoe-grid{grid-template-columns:minmax(0,1fr);justify-items:center}
  .headtoe-tube{position:static;max-width:320px;justify-self:center}
  .headtoe-column,.headtoe-side{max-width:520px}
  .headtoe-side img{padding-top:32px}
  .drops-grid{grid-template-columns:minmax(0,1fr)}
  .origin-card{width:min(540px,60%)}
  .fam-grid{grid-template-columns:minmax(0,1fr)}
  .fam-col{padding:28px 0}
  .fam-col:first-child{padding-top:0}
  .fam-col:last-child{padding-bottom:0}
  .fam-col + .fam-col{border-left:0;border-top:1px solid var(--cacao)}
}

/* ---------- menu do pacote em grade 3×2 ---------- */
@media (max-width:860px){
  .pacote{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:0}
  .pacote-abas{display:contents}
  .pacote-abas a{justify-content:center;padding:0 4px;font-size:13px;text-align:center;border-bottom:1px solid var(--fio)}
  .pacote-abas a[aria-current="page"]{border-bottom:2px solid var(--tinted)}
  .chat{min-height:44px;border-radius:0;font-size:12px}
  html{scroll-padding-top:16px}
}

/* ---------- celular ---------- */
@media (max-width:760px){
  :root{--pad:16px}
  .hue-title{font-size:28px}
  .click-title{font-size:24px}
  .pct{font-size:28px}
  .hue-strip{font-size:12px}
  .wordmark{width:140px;height:28px}

  .click-open{padding-bottom:24px;background-color:var(--cream)}
  .click-slide{display:flex;flex-direction:column;height:auto}
  .click-photo{position:static;height:420px;flex:none}
  .click-photo--wand{object-position:62% center}
  .click-photo--primer{object-position:22% center}
  .click-card{position:relative;right:auto;top:auto;transform:none;flex:1;width:auto;margin:-72px 16px 0;border-radius:20px;padding:24px 24px 56px}
  .click-card .pill{width:100%}
  .click-dots{bottom:38px;background-color:transparent}

  .gesture-index-block{padding:40px 0 32px}
  .gesture-index{justify-content:flex-start;overflow-x:auto;padding-inline:16px;scrollbar-width:none}
  .gesture-index::-webkit-scrollbar{display:none}

  .swipe-zone{padding:48px 0 44px}
  .swipe-rail{gap:20px}
  .swipe-card,.swipe-card--lip-a,.swipe-card--lip-b,.swipe-card--lip-c,.swipe-card--set,.set-intro{flex-basis:300px}
  .swipe-card--lip-a{padding-left:16px}
  .howto-plate{font-size:22px}
  .howto-plate--short{font-size:28px;min-height:160px}
  .lip-shades{columns:1}
  .swipe-zone--sets .swipe-rail{margin-top:36px}
  .swatch{margin-top:24px}
  .stick{width:72px;height:12px;top:16px}
  .stick-tip{flex-basis:10px}
  .stick-cap{flex-basis:18px}

  .after-swipe{padding:40px 16px}
  .after-swipe-grid{grid-template-columns:minmax(0,1fr)}
  .after-half{padding:0 0 28px}
  .after-half + .after-half{padding:28px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.3)}
  .pct-lines li{grid-template-columns:84px minmax(0,1fr);gap:12px;font-size:16px}

  .dot-zone{padding:56px 16px 60px}
  .dot-head{margin-bottom:32px}
  .dot-matrix{grid-template-columns:repeat(5,56px);gap:8px}
  .dot{width:56px;height:56px;font-size:13px}
  .shade-legend{font-size:15px;min-height:46px}

  .layer-stage{height:auto}
  .layer-photo{position:static;height:390px;object-position:left top}
  .layer-stack{position:relative;bottom:auto;width:auto;margin:-112px 16px 0}
  .layer-sheet{display:none}
  .layer-card{border:1px solid var(--fio);border-radius:20px;padding:24px}
  .layer-proof{padding:32px 16px 44px}
  .layer-proof-cols{grid-template-columns:minmax(0,1fr);gap:20px}

  .swirl-zone{padding:56px 16px}
  .swirl-compass{grid-template-columns:minmax(0,1fr);justify-items:center;gap:24px}
  .swirl-pan{width:280px;grid-row:1}
  .swirl-shades{gap:12px;width:100%}
  .swirl-shades--left{text-align:left}
  .swirl-shades li::after{display:none}
  .swirl-how{margin-top:8px}

  .eye-zone{padding:52px 16px 48px}
  .eye-band--wiggle,.eye-band--glide{grid-template-columns:minmax(0,1fr)}
  .eye-band{gap:24px}
  .wiggle-row{grid-template-columns:minmax(0,1fr);gap:16px}
  .wiggle-row li:nth-child(2){margin-top:0}
  .eye-band--glide,.eye-band--pump{margin-top:44px}
  .eye-photo--liner{grid-column:auto;grid-row:auto}
  .eye-band--glide .glide-how{grid-column:auto;grid-row:auto}

  .tap-zone{padding-top:56px}
  .tap-grid{padding:0 16px 52px;gap:44px}
  .tap-cream-top{grid-template-columns:minmax(0,1fr)}
  .tap-cream-top img{width:160px}
  .tap-proof{grid-template-columns:minmax(0,1fr);gap:14px}

  .headtoe-zone{padding:56px 16px}
  .headtoe-steps p{font-size:19px}
  .headtoe-steps p + p{margin-top:24px}
  .headtoe-sizes{grid-template-columns:minmax(0,1fr);justify-items:center}

  .drops-zone{padding:56px 16px 60px}
  .drops-grid{gap:40px}
  .drops-prices{columns:1}
  .drops-stair{grid-template-columns:repeat(2,minmax(0,1fr))}
  .drops-stair li:nth-child(odd){margin-top:0}
  .drops-stair li:nth-child(even){margin-top:24px}

  .mist-zone{padding:56px 16px 52px}
  .mist-field{grid-template-columns:minmax(0,1fr);gap:20px;margin:32px 0 36px}
  .mist-field li:nth-child(n){margin-top:0}

  .origin-zone{display:block;min-height:0;padding:0 0 32px}
  .origin-photo{position:static;height:260px;object-position:center}
  .origin-card{width:auto;margin:-40px 16px 0;border-radius:20px;padding:24px}
  .origin-founder{grid-template-columns:96px minmax(0,1fr);gap:14px}
  .origin-founder img{width:96px;height:96px}

  .fam-zone{padding:52px 16px}
  .final-click{padding:56px 16px 44px}
  .final-wand{width:180px}
  .final-click .pill{width:100%}
}