/* ========================================================= Sello v2 — landing (Figma-faithful, proportional) ========================================================= */ :root{ --ink:#0D111B; --ink-2:#1A1F2B; --muted:#5A6273; --red:#E30F2F; --red-d:#C20B27; --pink:#FBE9EC; --light:#F3F3F5; --line:#E8E8EC; --white:#FFFFFF; --wrap:1232px; --pad:clamp(20px,6vw,72px); --ease:cubic-bezier(.16,1,.3,1); --font-ui:'Inter',system-ui,sans-serif; --font-body:'Open Sans',system-ui,sans-serif; --font-disp:'Anton SC','Anton',Impact,sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} /* Lenis smooth-scroll: em runtime o motor assume (classe .lenis no ); o scroll-behavior nativo fica de fallback sem-JS */ html.lenis,html.lenis body{height:auto} html.lenis{scroll-behavior:auto!important} .lenis [data-lenis-prevent]{overscroll-behavior:contain} .lenis.lenis-stopped{overflow:hidden} body{margin:0;background:var(--ink);color:var(--ink);font-family:var(--font-body); font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{margin:0} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);width:100%} .accent{color:var(--red)} /* ---------- type ---------- */ .display{font-family:var(--font-body);font-weight:600;color:var(--ink); letter-spacing:-.015em;line-height:1.14;font-size:clamp(1.35rem,2.5vw,2.05rem)} .display--center{text-align:center} .display .line{display:block} .hl{display:block} .hl--mob{display:none} @media(max-width:760px){.hl--desk{display:none}.hl--mob{display:block}} .anton{font-family:var(--font-disp);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.02} .lead{font-weight:700;font-size:clamp(1.05rem,1.4vw,1.3rem);text-align:center;margin:1rem 0 0} .muted{color:var(--muted);font-size:clamp(.98rem,1.15vw,1.12rem)} .muted--center{text-align:center;max-width:720px;margin-inline:auto} .eyebrow{font-family:var(--font-body);font-weight:600;color:var(--red);font-size:clamp(.95rem,1vw,1.12rem);margin:0 0 .4rem;letter-spacing:.005em} /* ---------- buttons + airport flip ---------- */ .btn{position:relative;display:inline-flex;align-items:center;gap:.5em;justify-content:center; font-family:var(--font-body);font-weight:700;font-size:.98rem; padding:.82em 1.55em;border-radius:999px;border:0;cursor:pointer; transition:background .25s var(--ease),box-shadow .25s var(--ease);white-space:nowrap} .btn--lg{font-size:1.04rem;padding:.95em 1.85em} .btn--accent{background:var(--red);color:#fff} .btn--accent:hover{background:var(--red-d)} .btn--white{background:#fff;color:var(--red)} .btn--white:hover{box-shadow:0 16px 40px -16px rgba(13,17,27,.45)} .btn--dark{background:var(--ink);color:#fff} .btn--dark:hover{background:#1b2233} .btn--store{font-size:1rem;padding:.9em 1.6em} .btn__ico{width:1.18em;height:1.18em;fill:currentColor;flex:none;transform:translateY(-1px)} .ico-apple{width:1em;height:1.08em;fill:currentColor;transform:translateY(-1px)} /* split-flap letter roll */ .btn__t{display:inline-flex;white-space:pre;font-family:var(--font-disp);font-weight:400;text-transform:uppercase;letter-spacing:.015em;line-height:1} .btn__t .c{position:relative;display:inline-block;overflow:hidden;vertical-align:top;height:1.32em;line-height:1.32} .btn__t .c>span{display:block;transition:transform .42s cubic-bezier(.2,.75,.15,1);transition-delay:calc(var(--i)*24ms)} .btn__t .c>span:nth-child(2){position:absolute;top:0;left:0;transform:translateY(110%)} .btn:hover .btn__t .c>span:nth-child(1){transform:translateY(-110%)} .btn:hover .btn__t .c>span:nth-child(2){transform:translateY(0)} @media (prefers-reduced-motion:reduce){.btn__t .c>span{transition:none}} .rnd{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:#fff; display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:border-color .2s,color .2s,transform .2s var(--ease)} .rnd:hover{border-color:var(--red);color:var(--red)} .rnd svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} /* ---------- reveal ---------- */ [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)} [data-reveal].is-in{opacity:1;transform:none} [data-reveal].r-soft{transform:translateY(26px) scale(.965);transition:opacity .95s var(--ease),transform .95s var(--ease)} @media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important;transition:none}} /* Anton SC headings — GSAP-SplitText word-rise replicated in vanilla: each word slides up from translateY(110%) behind its own line-height clip, staggered (JS sets per-word delay). power2.out = ease-out-cubic. */ [data-split]{opacity:0} [data-split].split-ready{opacity:1} .w-mask{display:inline-block;overflow:hidden;vertical-align:top;padding:.22em .06em 0;margin:-.22em -.06em 0}/* top/side headroom so Anton accents (Ã Ê) aren't clipped; bottom stays tight to hide the rising word */ .w-in{display:inline-block;transform:translateY(110%);transition:transform .8s cubic-bezier(.33,1,.68,1)} [data-split].is-in .w-in{transform:translateY(0)} @media (prefers-reduced-motion:reduce){[data-split]{opacity:1!important}.w-in{transform:none!important;transition:none!important}} /* ===================== NAV ===================== */ .nav{position:fixed;inset:0 0 auto 0;z-index:100;padding:16px var(--pad);transition:padding .3s var(--ease)} .nav__inner{max-width:var(--wrap);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:24px; padding:9px 11px 9px 20px;border-radius:999px;transition:background .35s var(--ease),box-shadow .35s var(--ease)} .nav.is-scrolled .nav__inner{background:rgba(255,255,255,.62);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);box-shadow:0 10px 34px -20px rgba(13,17,27,.30),inset 0 0 0 1px rgba(13,17,27,.06)} .nav__brand{display:flex;align-items:center} .nav__wordmark{display:block;height:26px;width:96px;background:#fff; -webkit-mask:url(../assets/img/wordmark.svg) no-repeat left center/contain; mask:url(../assets/img/wordmark.svg) no-repeat left center/contain; transition:background .3s var(--ease)} .nav.is-scrolled .nav__wordmark{background:var(--red)} .nav__menu{display:flex;gap:28px;margin-left:auto;font-family:var(--font-ui);font-size:.95rem;color:rgba(255,255,255,.92);transition:color .3s var(--ease)} .nav.is-scrolled .nav__menu{color:var(--ink)} .nav__menu a{position:relative;padding:4px 0} .nav__menu a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--red);transition:right .3s var(--ease)} .nav__menu a:hover::after{right:0} .btn--app{min-width:160px;height:48px;font-size:20px;padding:0 18px;flex:none} /* ===================== HERO ===================== */ /* sticky hero — sheet desliza por cima ao rolar (estilo Novu) */ .hero{position:sticky;top:0;z-index:0;min-height:100vh;min-height:100svh;display:flex;align-items:center;color:#fff;isolation:isolate} .hero__media{position:absolute;inset:0;z-index:-2} .hero__media img{width:100%;height:100%;object-fit:cover} .hero__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(13,17,27,.5) 0%,rgba(13,17,27,.22) 40%,rgba(13,17,27,.72) 100%)} .hero__content{padding-top:120px;padding-bottom:96px;text-align:left;--hero-shift:clamp(48px,8.5vh,96px);--hero-parallax:0px;transform:translateY(calc(var(--hero-shift) + var(--hero-parallax)))} .hero__eyebrow{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.26em;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.82);margin:0 0 16px} .hero__title{font-family:var(--font-disp);text-transform:uppercase;font-weight:400;line-height:1.12; font-size:clamp(2.4rem,5.4vw,4.4rem);letter-spacing:.012em;margin:0;max-width:740px} .hero__title .line{display:block} .hero__title .line+.line{margin-top:8px} .hero__sub{font-size:clamp(1rem,1.45vw,1.2rem);color:rgba(255,255,255,.9);max-width:560px;margin:22px 0 0;line-height:1.5} .hero__cta{margin-top:34px;display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between;gap:18px 22px} #receita,#como-funciona,#recursos,#membros,#faq{scroll-margin-top:96px} .hero__join-wrap{display:flex;align-items:center;gap:14px} .avatars{display:inline-flex;flex:none} .avatars img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.92);margin-left:-13px;box-shadow:0 3px 10px rgba(0,0,0,.3)} .avatars img:first-child{margin-left:0} .hero__join{font-family:var(--font-body);font-weight:400;font-size:.95rem;color:rgba(255,255,255,.84);margin:0;max-width:270px;line-height:1.4} .hero__join strong{font-weight:700;color:#fff} .hero__avail{font-size:.88rem;color:rgba(255,255,255,.7);margin:0} .hero__scroll{position:absolute;left:50%;bottom:clamp(18px,3.2vh,36px);transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:9px;color:rgba(255,255,255,.82);pointer-events:none} .hero__scroll-label{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.24em;font-size:.7rem;font-weight:600;white-space:nowrap} .hero__scroll-ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:heroBob 1.9s var(--ease) infinite} @keyframes heroBob{0%,100%{transform:translateY(-3px);opacity:.5}50%{transform:translateY(4px);opacity:1}} @media (prefers-reduced-motion:reduce){.hero__scroll-ico{animation:none}} /* ---- MOBILE: hero em coluna, conteúdo no topo; "role para descobrir" escondido (redundante no celular, evitava layout torto). Foto valoriza a mulher (direita). Sheet menos round. ---- */ @media (max-width:760px){ .hero{flex-direction:column;align-items:stretch;justify-content:flex-end} .hero__content{padding-top:clamp(80px,11vh,104px);padding-bottom:clamp(14px,2.5vh,24px);transform:none} .hero__scroll{display:flex;position:static;left:auto;bottom:auto;transform:none;margin-top:0;align-self:center;padding-block:6px clamp(16px,3vh,26px)} .hero__join-wrap{display:none} .hero__media img{object-position:75% 38%} .sheet{border-radius:16px 16px 0 0} } /* ===================== SHEET ===================== */ /* sheet inteira (incl. selo, que sobe ~44px) fica ABAIXO da 1a dobra: hero=100svh sticky, gap atras dele fica escondido; ela sobe por cima ao rolar */ .sheet{position:relative;z-index:2;background:#fff;border-radius:44px 44px 0 0;margin-top:52px;padding-top:8px} .sheet__seal{position:absolute;top:-40px;left:50%;transform:translateX(-50%) rotate(-6deg);width:80px;height:80px} .section{padding-block:clamp(56px,7.5vw,108px)} /* ===================== MANIFESTO + COLLAGE ===================== */ .manifesto .display{margin-bottom:4px} .collage{margin-top:clamp(34px,4vw,54px);display:flex;gap:16px} .collage__col{flex:1;display:flex;flex-direction:column;gap:16px;min-width:0} .collage__item{margin:0;border-radius:18px;overflow:hidden;background:var(--light);aspect-ratio:var(--ar,1)} .collage__item img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)} .collage__item:hover img{transform:scale(1.05)} /* ===================== EXPERIÊNCIAS (stats) ===================== */ .eyebrow--c{text-align:center;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(.78rem,1vw,1rem)} .stats__grid{display:flex;flex-direction:column;gap:clamp(12px,1.15vw,16px);margin-top:clamp(34px,4vw,48px);text-align:left} .stats__row{display:flex;gap:clamp(12px,1.15vw,16px)} .stats__row>.statc{flex:1 1 0;min-width:0;min-height:clamp(200px,17vw,250px)} .statc{border-radius:22px;padding:clamp(22px,2vw,30px);display:flex;flex-direction:column;justify-content:space-between;gap:clamp(28px,3vw,44px);background:#fff;color:var(--red)} .statc--wide{flex-direction:row;align-items:stretch;justify-content:space-between;gap:20px;min-height:clamp(140px,12vw,182px)} .statc--cream{background:#F3E7D9;color:var(--ink)} .statc--ink{background:var(--ink);color:#F3E7D9} .statc__head{display:flex;flex-direction:column;gap:clamp(10px,1vw,15px)} .statc--wide .statc__head{align-self:flex-start} .statc--wide .statc__n{align-self:center} .statc__ic{width:clamp(34px,2.7vw,46px);height:clamp(34px,2.7vw,46px);background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat} .statc__l{font-size:clamp(1rem,1.2vw,1.2rem);font-weight:600;color:inherit;max-width:16ch} .statc__n{font-size:clamp(2.3rem,3.6vw,3.6rem);line-height:1;color:inherit} .statc--wide .statc__n{font-size:clamp(3rem,5.4vw,5.4rem)} .stats__grid--duo{flex-direction:row} .stats__grid--duo>.statc{flex:1 1 0;min-width:0;min-height:clamp(160px,14vw,205px)} /* stretch-reveal: each card grows left→right, then its content fades in (staggered, big card first) */ .stats__grid[data-reveal]{opacity:1;transform:none} .stats__grid .statc{transform:scaleX(0);transform-origin:left center;transition:transform .72s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s)} .stats__grid.is-in .statc{transform:scaleX(1)} .stats__grid .statc__head,.stats__grid .statc__n{opacity:0;transition:opacity .5s var(--ease);transition-delay:calc(var(--d,0s) + .56s)} .stats__grid.is-in .statc__head,.stats__grid.is-in .statc__n{opacity:1} @media (prefers-reduced-motion:reduce){.stats__grid .statc{transform:none}.stats__grid .statc__head,.stats__grid .statc__n{opacity:1}} .statc__n .roll{display:inline-block;overflow:hidden;height:1em;line-height:1;vertical-align:bottom} .statc__n .roll__s{display:block;will-change:transform;transition:transform 1.2s cubic-bezier(.2,.8,.18,1)} .statc__n .roll__s i{display:block;height:1em;line-height:1;font-style:normal;text-align:center} .statc__n .roll-x{display:inline-block;vertical-align:bottom} @media (prefers-reduced-motion:reduce){.statc__n .roll__s{transition:none}} @media (max-width:760px){ .statc--wide{flex-direction:row;align-items:center;justify-content:space-between;gap:16px} .statc--wide .statc__head{align-self:center} .statc--wide .statc__n{align-self:center} .stats__row{flex-direction:column} .stats__grid--duo{flex-direction:column} .stats__row>.statc{flex:0 0 auto;min-height:clamp(150px,40vw,180px)} } /* ===================== PHONE ===================== */ .phone{position:relative;width:100%;background:var(--ink);border-radius:clamp(24px,2.6vw,38px); padding:6px;box-shadow:0 30px 56px -26px rgba(13,17,27,.5)} .phone__screen{position:relative;border-radius:clamp(19px,2.1vw,31px);overflow:hidden;background:var(--ink);aspect-ratio:9/19.3} .phone__screen img{position:absolute;top:0;left:0;width:100%;height:auto} .phone__notch{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:36%;height:17px;background:var(--ink);border-radius:0 0 12px 12px;z-index:3} /* ===================== STEPS (carousel) ===================== */ .steps__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,3.5vw,46px)} .steps__nav{display:flex;gap:12px;flex:0 0 auto} .steps__track{display:flex;gap:24px;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad); overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);scrollbar-width:none;cursor:grab} .steps__track::-webkit-scrollbar{display:none} .steps__track.is-drag{cursor:grabbing;scroll-snap-type:none} .scard{flex:0 0 clamp(300px,42%,452px);scroll-snap-align:start} .scard__media{position:relative;background:var(--red);border-radius:26px;overflow:hidden;aspect-ratio:555/452} .scard__media .phone{position:absolute;top:9%;left:50%;transform:translateX(-50%);width:55%} .scard .phone__screen img{transition:transform 4.6s var(--ease)} .scard:hover .phone__screen img{transform:translateY(var(--sy,-58%))} .scard__txt{padding:20px 4px 0} .scard__title{font-family:var(--font-body);font-weight:700;font-size:clamp(1.15rem,1.4vw,1.4rem);line-height:1.2;margin:0 0 8px} /* ===================== DESCOBRIR (grid escalonado) ===================== */ .steps .display{margin-bottom:0} .dgrid{display:flex;gap:clamp(16px,2.2vw,27px);margin-top:clamp(34px,4vw,52px);align-items:flex-start} .dcol{flex:1;display:flex;flex-direction:column;gap:clamp(26px,3.4vw,48px);min-width:0} .dcol--offset{margin-top:clamp(50px,7.2vw,139px)} .dcard{position:relative;display:block;border-radius:26px;overflow:hidden;aspect-ratio:599/760;background:#F3F3F3;container-type:inline-size} .dcard__bg{width:100%;display:block} .dcard__txt{position:absolute;left:7%;right:7%;top:7%;z-index:1;text-align:left} .dcard--tb .dcard__txt{top:auto;bottom:6.5%} .dcard__eye{display:block;font-family:var(--font-disp);font-weight:400;color:var(--red);font-size:1rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem} .dcard__title{font-family:var(--font-body);font-weight:700;color:var(--ink);font-size:1.25rem;line-height:1.3;letter-spacing:-.01em;margin:0 0 .5rem;max-width:92%} .dcard__sub{font-family:var(--font-ui);font-weight:400;color:var(--muted);font-size:clamp(.95rem,1.05vw,1.06rem);line-height:1.45;margin:0;max-width:88%} .dcard--red{background:var(--red)} .dcard--red .dcard__eye,.dcard--red .dcard__title,.dcard--red .dcard__sub{color:#fff} .dcard__eye,.dcard__title,.dcard__sub{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)} .dcard.is-in .dcard__eye{opacity:1;transform:none;transition-delay:.12s} .dcard.is-in .dcard__title{opacity:1;transform:none;transition-delay:.24s} .dcard.is-in .dcard__sub{opacity:1;transform:none;transition-delay:.38s} @media(prefers-reduced-motion:reduce){.dcard__eye,.dcard__title,.dcard__sub{opacity:1!important;transform:none!important}} /* ---------- live phone overlay (real screen, scroll on hover) ---------- */ .lphone{position:absolute;left:22.6%;width:55%;aspect-ratio:800/1615;z-index:2} .lphone__frame{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none; filter:drop-shadow(0 14px 24px rgba(13,17,27,.24)) drop-shadow(0 4px 9px rgba(13,17,27,.18))} .lphone__scr{position:absolute;top:3.26%;left:6.58%;width:86.78%;height:93.45%;overflow:hidden;border-radius:7%/3.6%;z-index:1;background:#fff} .lphone__img{position:absolute;top:0;left:0;width:calc(100% + 1.5px);max-width:none;height:auto;display:block; transform:translateY(0);transition:transform 5.5s cubic-bezier(.33,0,.25,1);will-change:transform} .lphone--scroll .lphone__img{transition:transform 2.6s cubic-bezier(.45,.05,.2,1)} /* Comunidade: crossfade entre as telas (Figma) */ .lphone--rank .lphone__scr{background:#fff} .lphone--rank .rkf{position:absolute;top:0;left:0;width:calc(100% + 1.5px);max-width:none;height:auto;display:block;opacity:0;transition:opacity .7s ease,transform 2.2s cubic-bezier(.4,.1,.2,1)} .lphone--rank .rkf.is-on{opacity:1} @media (prefers-reduced-motion:reduce){.lphone--rank .rkf{transition:none}} /* explore map: transição (crossfade) entre as telas reais (fotos do user) */ .lphone--map .lphone__scr{container-type:size;background:#eceef0} .map-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease} .map-slide.is-on{opacity:1} .mpin{position:absolute;transform:translate(-50%,-50%);min-width:8cqw;height:8cqw;padding:0 1.6cqw;border-radius:99px;background:#fff;color:var(--ink);font-family:var(--font-ui);font-weight:700;font-size:4.2cqw;display:flex;align-items:center;justify-content:center;box-shadow:0 1cqw 3cqw rgba(13,17,27,.32);z-index:2;transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease)} .mpin.is-active{background:var(--red);color:#fff;transform:translate(-50%,-50%) scale(1.4);z-index:3;box-shadow:0 2cqw 6cqw rgba(227,15,47,.5)} .mpin.is-active::after{content:"";position:absolute;inset:-28%;border-radius:99px;border:.5cqw solid var(--red);animation:pinpulse 1.6s ease-out infinite} @keyframes pinpulse{0%{transform:scale(.7);opacity:.7}100%{transform:scale(2);opacity:0}} .mpin--a{left:30%;top:27%}.mpin--b{left:62%;top:21%}.mpin--c{left:43%;top:41%}.mpin--d{left:72%;top:37%} .mcard{position:absolute;left:4.5%;right:4.5%;bottom:9%;z-index:4;display:flex;align-items:center;gap:3cqw;background:#fff;border-radius:5cqw;padding:3cqw;box-shadow:0 2cqw 7cqw rgba(13,17,27,.28);opacity:0;transform:translateY(10%);transition:opacity .4s var(--ease),transform .4s var(--ease)} .mcard.is-in{opacity:1;transform:none} .mcard__img{width:18cqw;height:18cqw;border-radius:3.5cqw;object-fit:cover;flex:none;display:block} .mcard__txt{flex:1;min-width:0;text-align:left;overflow:hidden} .mcard__name{display:block;font-family:var(--font-ui);font-weight:700;font-size:4.8cqw;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1} .mcard__meta{display:block;font-size:3.7cqw;color:var(--muted);margin-top:1cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mcard__score{flex:none;background:var(--red);color:#fff;font-family:var(--font-ui);font-weight:700;font-size:4.6cqw;padding:1.6cqw 2.8cqw;border-radius:99px} @media (prefers-reduced-motion:reduce){.mcard{opacity:1;transform:none;transition:none}} /* Compartilhe: card gira frente↔verso no hover (fases opostas nos 2 telefones) */ .lphone--flip .lphone__scr{perspective:760px;background:radial-gradient(125% 85% at 50% 6%,#b1182a,#6e0f1d);container-type:size} .sharescr__hd{position:absolute;top:8%;left:0;right:0;text-align:center;color:#fff;font-family:var(--font-ui);font-weight:600;font-size:4.6cqw;letter-spacing:.04em;text-transform:uppercase;z-index:1} .lphone__flip{position:absolute;left:8%;right:8%;top:21%;bottom:7%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.45,.05,.2,1);z-index:2} .lphone__face{position:absolute;inset:0;overflow:hidden;border-radius:7%/4.5%;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;box-shadow:0 1.5cqw 5cqw rgba(13,17,27,.34)} .lphone__face img{width:100%;height:100%;object-fit:cover;display:block} .lphone__face--back{transform:rotateY(180deg)} .lphone--flip2 .lphone__flip{transform:rotateY(180deg)} /* Avalie: detail base → veredito bottom-sheet sobe sozinho (slider anima → enviado) */ .lphone--avalie{width:50%;left:25%} .lphone--avalie .lphone__img{top:-4%} .dcard--avalie:hover .lphone__img{transform:none} .lphone--avalie .lphone__scr{container-type:size} .lphone__dim{position:absolute;inset:0;background:rgba(13,17,27,.42);opacity:0;transition:opacity .5s var(--ease);z-index:2} .lphone--avalie.is-open .lphone__dim{opacity:1} .lphone__sheet{position:absolute;left:0;right:0;bottom:0;z-index:2;transform:translateY(101%);transition:transform .62s cubic-bezier(.2,.85,.25,1)} .lphone__sheet img{width:100%;display:block} .lphone--avalie.is-open .lphone__sheet{transform:translateY(0)} @media (prefers-reduced-motion:reduce){.lphone__img,.lphone__sheet,.lphone__dim{transition:none}} /* veredito: nota animada (HTML) → crossfade pro bottom-sheet "enviado" (frame real) */ .lphone--avalie .lphone__sheet{border-radius:7cqw 7cqw 0 0;overflow:hidden;aspect-ratio:772/894} .vnota{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;padding:4.5cqw 7cqw 11cqw;text-align:left;transition:opacity .4s var(--ease)} .lphone--avalie.is-sent .vnota{opacity:0} .vnota__grab{width:13cqw;height:1.4cqw;border-radius:99px;background:#D7DAE0;align-self:center;margin-bottom:4cqw;flex:none} .vnota__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4.5cqw;flex:none} .vnota__name{font-family:var(--font-ui);font-weight:400;font-size:4.2cqw;color:var(--ink)} .vnota__x{width:4.4cqw;height:4.4cqw;color:var(--ink);opacity:.7;flex:none} .vnota__x svg{width:100%;height:100%} .vnota__h{font-family:var(--font-disp);font-weight:400;text-transform:uppercase;font-size:7.5cqw;color:var(--ink);line-height:1;letter-spacing:.01em;margin-bottom:1.4cqw;flex:none} .vnota__sub{font-family:var(--font-ui);font-weight:400;font-size:3.9cqw;color:var(--muted);flex:none} .vnota__num{font-family:var(--font-disp);font-weight:400;font-size:34cqw;color:var(--red);text-align:center;line-height:1;letter-spacing:.01em;flex:1;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums} .vnota__track{position:relative;height:2.4cqw;border-radius:2cqw;background:#F1E1E4;margin:0 1cqw 6cqw;flex:none} .vnota__fill{position:absolute;left:0;top:0;height:100%;border-radius:2cqw;background:var(--red);width:calc(var(--p,.5)*100%)} .vnota__thumb{position:absolute;top:50%;left:calc(var(--p,.5)*100%);width:5.6cqw;height:5.6cqw;border-radius:50%;background:#fff;border:1.6cqw solid var(--red);transform:translate(-50%,-50%);box-shadow:0 1cqw 2.6cqw rgba(227,15,47,.32)} .vnota__btn{font-family:var(--font-ui);font-weight:700;text-align:center;background:var(--red);color:#fff;border-radius:5cqw;padding:4.4cqw;font-size:5cqw;flex:none;transition:transform .2s var(--ease)} .lphone--avalie.is-press .vnota__btn{transform:scale(.96)} .vsent{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;padding:4.5cqw 8cqw 11cqw;text-align:center;opacity:0;transition:opacity .4s var(--ease)} .lphone--avalie.is-sent .vsent{opacity:1} .vsent__body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center} .vsent__seal{position:relative;width:21cqw;height:21cqw;margin-bottom:3cqw;flex:none} .vsent__seal img{width:100%;height:100%;display:block} .vsent__check{position:absolute;inset:0;margin:auto;width:11cqw;height:11cqw;color:#fff} .vsent__h{font-size:8.4cqw;color:var(--ink);line-height:1;margin-bottom:2.8cqw} .vsent__sub{font-family:var(--font-ui);font-weight:400;font-size:4.3cqw;color:var(--muted);line-height:1.34;margin-bottom:5.5cqw;padding:0 1cqw} .vsent__sub b{color:var(--red);font-weight:700} .vsent__pts{display:inline-flex;align-items:center;gap:1.8cqw;background:var(--pink);color:var(--red);font-family:var(--font-ui);font-weight:700;font-size:3.8cqw;padding:2.4cqw 4.4cqw;border-radius:99px} .vsent__pts svg{width:4.6cqw;height:4.6cqw;flex:none} .vsent .vnota__btn{margin-top:6cqw} @media (prefers-reduced-motion:reduce){.vsent,.vnota__btn{transition:none}} /* DE SUA NOTA — slider + nota animando (UI em HTML, escala via cqw) */ .lphone--nota .lphone__scr{background:#fff;container-type:size} .nota{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 8cqw 9cqw;text-align:center;font-family:var(--font-ui);color:var(--ink)} .nota__handle{width:15cqw;height:1.4cqw;border-radius:2cqw;background:#dfe2e8;margin-bottom:6cqw;flex:none} .nota__top{font-size:5cqw;line-height:1.2;margin:0 0 7cqw;color:#6b7280} .nota__top b{color:var(--ink);font-weight:700} .nota__h{font-size:9cqw;margin:0;letter-spacing:.02em;line-height:1} .nota__sub{font-size:4.6cqw;color:#9aa1ad;margin:1.6cqw 0 0} .nota__num{font-size:44cqw;line-height:.95;color:var(--red);margin:2cqw 0 4cqw;font-weight:400;font-variant-numeric:tabular-nums} .nota__track{position:relative;width:80cqw;height:2.6cqw;border-radius:2cqw;background:#eceef2;margin-bottom:7cqw;flex:none} .nota__fill{position:absolute;left:0;top:0;height:100%;border-radius:2cqw;background:var(--red);width:calc(var(--p,.85)*100%)} .nota__thumb{position:absolute;top:50%;width:6.4cqw;height:6.4cqw;border-radius:50%;background:#fff;border:1.8cqw solid var(--red);transform:translate(-50%,-50%);left:calc(var(--p,.85)*100%);box-shadow:0 1cqw 3cqw rgba(227,15,47,.35)} .nota__btn{width:84cqw;padding:4.6cqw 0;border-radius:7cqw;background:var(--red);color:#fff;font-size:5.6cqw;font-weight:700} @media (max-width:760px){ .steps .display{text-align:center} /* CARROSSEL horizontal no mobile: .dgrid vira fileira deslizante; o próximo card "espia" na borda. overflow-y:hidden mata o swipe vertical. Altura AUTOMÁTICA: o card cresce p/ caber o celular INTEIRO (sem corte); stretch deixa todos na altura do mais alto; o celular ancora no fundo do card. */ .dgrid{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:14px;margin-top:clamp(28px,7vw,40px); overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; margin-inline:calc(-1*var(--pad));padding-inline:var(--pad);scroll-padding-inline:var(--pad); padding-bottom:28px;scrollbar-width:none} .dgrid::-webkit-scrollbar{display:none} .dcol{display:contents} /* achata as colunas → 4 cards viram itens diretos do carrossel */ .dcol--offset{margin-top:0} /* clip-path: recorta no paint e SEGURA o celular (que tem transform na animação) no contorno arredondado — o overflow:hidden+border-radius do Safari deixa o celular vazar quadrado e tapar os cantos de baixo (bug do WebKit) */ .dcard{flex:0 0 82%;scroll-snap-align:start;margin-top:0;aspect-ratio:auto;height:clamp(452px,120vw,486px);clip-path:inset(0 round 26px)} /* texto-em-cima (Explore/Compartilhe/Comunidade): texto no topo + celular GRANDE logo abaixo, cortado pela borda de baixo */ .dcard:not(.dcard--avalie){display:flex;flex-direction:column} .dcard:not(.dcard--avalie) .dcard__txt{position:static;padding:24px 7% 0;margin-bottom:16px;flex:0 0 auto} .dcard .lphone--scroll, .dcard .lphone--rank{position:relative;top:auto!important;left:auto;margin:0 auto;width:76%} /* SEM transform nas imagens do celular no mobile: o transform (pan/rank) cria um layer composto que o Safari NÃO recorta no card -> vazava quadrado e tapava a borda de baixo. Estático, o overflow:hidden/clip-path recorta normal. */ .dcard .lphone__img,.dcard .rkf{transform:none!important;transition:none!important} /* Avalie (texto embaixo, mockup absoluto) */ .lphone--avalie{top:-30%!important;width:60%;left:20%} } .b-listas__seal{width:clamp(34px,3vw,48px);height:auto;margin-bottom:12px;filter:brightness(0) invert(1)} /* ===================== BENTO ===================== */ .bento-sec .bento__cta{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:24px 0 0} /* bento cards são montados em CSS (sem PNG de fundo) */ /* respiro claro grande abaixo do bento p/ "descer" a FAQ e dar ~250px ate a imagem (que mantem a sangria). Mobile reverte p/ 44-72 no @media 860. */ .bento-sec{padding-bottom:clamp(210px,21vw,305px)} .bento{margin-top:clamp(34px,4vw,52px);display:flex;flex-direction:column;gap:20px} .bcard{position:relative;border-radius:26px;overflow:hidden;isolation:isolate} .bcard--red{background:var(--red);color:#fff} .bcard--pink{background:var(--pink);color:var(--ink)} .bcard--light{background:var(--light);color:var(--ink)} .bento__r1{display:flex;gap:20px;aspect-ratio:1232/422} .b-listas{flex:633 1 0} .b-twophones{flex:573 1 0} .bento__r2{display:flex;gap:24px;aspect-ratio:1232/743} .b-explore{flex:422 1 0} .bento__rightcol{flex:783 1 0;display:flex;flex-direction:column;gap:22px;min-width:0} .b-guias{flex:348 1 0} .bento__r3{flex:369 1 0;display:flex;gap:22px;min-height:0} .b-nota{flex:472 1 0} .b-mascot{flex:286 1 0} /* watermarks */ .wm{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden; font-family:var(--font-disp);text-transform:uppercase;line-height:1; display:flex;flex-direction:column;justify-content:center;gap:.06em} .wm span{white-space:nowrap;letter-spacing:.02em} .wm--diag{transform:rotate(-13deg) scale(1.25);justify-content:flex-start;padding-top:6%} .wm--diag span{color:rgba(227,15,47,.10);font-size:clamp(2.2rem,4.5vw,3.6rem)} .wm--outline{justify-content:center;gap:.02em} .wm--outline span{color:transparent;-webkit-text-stroke:1.4px rgba(227,15,47,.20);font-size:clamp(2.4rem,5vw,4.2rem)} .wm--soft span{color:rgba(255,255,255,.13);font-size:clamp(2rem,3.6vw,3.1rem)} .wm--rows{gap:.18em} .wm--rows span{color:rgba(227,15,47,.12);font-size:clamp(1.3rem,2.4vw,2rem)} /* card text — animado via [data-reveal] */ .bcard__txt{position:absolute;z-index:1;display:flex;flex-direction:column;justify-content:center} .bcard__txt h3{margin:0 0 10px;line-height:1.05;letter-spacing:.005em} .bcard__txt p{margin:0} .lphone--static .lphone__img{transition:none} /* A — crie listas (telefone à esquerda, texto à direita) */ .b-listas__txt{right:7%;top:0;bottom:0;width:45%;text-align:left} .b-listas__txt h3{font-size:clamp(1.2rem,1.85vw,1.7rem);text-transform:uppercase;color:#fff} .b-listas__txt p{color:rgba(255,255,255,.92);font-size:clamp(.82rem,.95vw,.98rem);max-width:34ch;line-height:1.45} /* C — explore: watermark + EXPLORE sólido + mapa */ .b-explore__big{position:absolute;top:6%;left:0;right:0;z-index:1;text-align:center;color:var(--red);text-transform:uppercase;font-size:clamp(2.6rem,6.4vw,4.8rem);line-height:1;letter-spacing:.01em} /* GUIAS (texto à esquerda, cards à direita) */ .b-guias{display:flex;align-items:center;gap:24px;padding:26px} .b-guias__txt{position:static;flex:0 0 31%;width:auto} .b-guias__txt h3{font-size:clamp(1.05rem,1.6vw,1.55rem);text-transform:uppercase;color:#fff} .b-guias__txt p{color:rgba(255,255,255,.92);font-size:clamp(.76rem,.9vw,.92rem);line-height:1.4} .b-guias__cards{flex:1;min-width:0;align-self:stretch;position:relative;overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent 0,#000 15%,#000 100%); mask:linear-gradient(90deg,transparent 0,#000 15%,#000 100%)} .b-guias__cards .gmarquee__track{display:flex;width:max-content;height:100%;animation:mq-scroll-l var(--mq-dur,68s) linear infinite} .b-guias__cards .gmarquee__set{display:flex;gap:14px;padding-right:14px;height:100%;align-items:center} .b-guias .gcard{flex:0 0 auto;height:70%} .b-guias .gcard img{height:100%;width:auto;display:block} /* E — mascote */ .b-mascot{display:flex;align-items:flex-end;justify-content:center;padding:14px} .b-mascot__img{position:relative;z-index:1;width:auto;height:90%;max-height:250px;filter:drop-shadow(0 16px 24px rgba(13,17,27,.18));transition:transform .5s var(--ease)} .b-mascot:hover .b-mascot__img{transform:translateY(-7px) rotate(-2deg)} /* fundos de marca-d'água reais do Figma (atrás de phones/mascote) */ .bcard>.dcard__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block;opacity:0;transform:scale(1.09);transition:opacity .8s var(--ease),transform 1.05s var(--ease)} .bcard.is-in>.dcard__bg{opacity:1;transform:scale(1)} @media (prefers-reduced-motion:reduce){.bcard>.dcard__bg{opacity:1;transform:none;transition:none}} /* SELLO watermark = carrossel 2 linhas, sentidos opostos */ .b-mascot__wm{position:absolute;inset:0;z-index:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:.05em;pointer-events:none} .swm{white-space:nowrap;font-family:var(--font-disp);text-transform:uppercase;font-size:clamp(1.9rem,5.4vw,3.5rem);line-height:1.12;display:flex;width:max-content} .swm__set{white-space:nowrap} .swm[data-swm="left"]{animation:mq-scroll-l var(--mq-dur,116s) linear infinite} .swm[data-swm="right"]{animation:mq-scroll-r var(--mq-dur,116s) linear infinite} .swm b{font-weight:400;padding-right:.34em} .swm .o{color:transparent;-webkit-text-stroke:1.8px rgba(227,15,47,.62)} .swm .f{color:var(--red)} .b-twophones>.dcard__bg{opacity:1;transform:none;transition:none} /* ===================== CITY (mosaico flex misturado que expande no hover) ===================== */ .city{position:relative;background:#fff;overflow:hidden} .city__head{text-align:center;padding-block:clamp(56px,7vw,100px) clamp(30px,4vw,52px)} .city__head .display{max-width:none;margin-inline:auto;margin-bottom:24px} .city__cta{display:flex;justify-content:center;gap:16px;flex-wrap:wrap} .city__wall{display:flex;align-items:stretch;gap:clamp(8px,.9vw,14px);width:calc(100% - clamp(32px,6vw,96px));max-width:1180px;margin:0 auto clamp(20px,3vw,48px);height:clamp(456px,44vw,600px)} .city__col{flex:var(--w,1) 1 0;display:flex;flex-direction:column;gap:clamp(8px,.9vw,14px);min-width:0;transition:flex-grow .72s cubic-bezier(.4,.12,.22,1)} .city__tile{flex:var(--h,1) 1 0;position:relative;min-height:0;min-width:0;border-radius:clamp(10px,1.1vw,16px);overflow:hidden;background:#eef0f2;isolation:isolate; clip-path:inset(0 100% 100% 0 round clamp(10px,1.1vw,16px));opacity:0; transition:flex-grow .72s cubic-bezier(.4,.12,.22,1),clip-path .7s cubic-bezier(.23,1,.32,1),opacity .5s ease} .city__tile.is-in{clip-path:inset(0 0 0 0 round clamp(10px,1.1vw,16px));opacity:1} .city__tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} @media (hover:hover) and (pointer:fine){ .city__col:has(.city__tile:hover){flex-grow:2.6} .city__tile:hover{flex-grow:2.8} .city__tile img{transition:transform .72s cubic-bezier(.4,.12,.22,1)} .city__tile:hover img{transform:scale(1.03)} } @media (max-width:760px){ .city{display:none} .city__wall{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:9px;height:auto;width:calc(100% - 32px)} .city__col{display:contents} .city__tile{flex:none;aspect-ratio:1/1} } @media (prefers-reduced-motion:reduce){ .city__tile{clip-path:none;opacity:1;transition:none} .city__col{transition:none} } /* ===================== REVIEWS (carrossel) ===================== */ .reviews .wrap{text-align:center;margin-bottom:clamp(34px,4vw,48px)} .marquee{position:relative;overflow:hidden;padding-block:2px;pointer-events:none} /* fade das bordas por overlay (fundo sólido #1E1E1E) e não por mask: mask força a faixa inteira em movimento num buffer offscreen gigante que o iOS purga sob pressão de memória (fileira some) */ .marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:6%;z-index:1} .marquee::before{left:0;background:linear-gradient(90deg,#1E1E1E,rgba(30,30,30,0))} .marquee::after{right:0;background:linear-gradient(270deg,#1E1E1E,rgba(30,30,30,0))} .marquee+.marquee{margin-top:clamp(14px,1.6vw,22px)} .marquee__track{display:flex;width:max-content} .marquee__track[data-marquee="left"]{animation:mq-scroll-l var(--mq-dur,82s) linear infinite} .marquee__track[data-marquee="right"]{animation:mq-scroll-r var(--mq-dur,82s) linear infinite} .marquee__set{display:flex;gap:22px;padding-right:22px} /* -50% do track = exatamente 1 conjunto (2 sets de mesma largura) → loop sem costura */ @keyframes mq-scroll-l{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} @keyframes mq-scroll-r{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}} @media (prefers-reduced-motion:reduce){.marquee{overflow-x:auto;pointer-events:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.marquee::-webkit-scrollbar{display:none}.marquee__track[data-marquee],.b-guias__cards .gmarquee__track,.swm[data-swm]{animation:none}} .rcard{flex:0 0 auto;width:clamp(284px,29vw,392px);display:flex;flex-direction:column;background:#1E1E1E;border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:clamp(24px,2.2vw,34px);box-shadow:none} /* width explícito (não flex-basis): WebKit resolve max-content aninhado pela largura de CONTEÚDO quando o sizing vem só de flex-basis — o set inflava pra soma das frases sem wrap */ .rcard__stars{display:flex;gap:4px;margin-bottom:18px} .rcard__stars svg{width:20px;height:20px;fill:var(--red)} .rcard__quote{font-size:clamp(1rem,1.2vw,1.18rem);line-height:1.5;margin:0 0 22px;font-weight:400;font-style:italic;color:rgba(255,255,255,.85)} .rcard__by{display:flex;align-items:center;gap:12px;margin-top:auto;color:#fff;font-weight:700;font-size:1rem} .rcard__av{flex:none;width:44px;height:44px;border-radius:12px;object-fit:cover} /* ===================== FAQ ===================== */ .faq .display{margin-bottom:clamp(26px,3vw,40px)} .faq{padding-bottom:clamp(84px,9vw,150px)} .faq__list{max-width:980px;margin-inline:auto} .faq__row{border-bottom:1px solid var(--line)} .faq__row:last-child{border-bottom:0} .faq__q{width:100%;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--font-ui);font-weight:400; font-size:clamp(1.05rem,1.5vw,1.35rem);color:var(--ink);padding:24px 6px;display:flex;align-items:center;justify-content:space-between;gap:20px} .faq__q .chev{width:25px;height:25px;flex:0 0 auto;fill:none;stroke:#9aa0ac;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)} .faq__q[aria-expanded="true"] .chev{transform:rotate(180deg);stroke:var(--red)} .faq__a{overflow:hidden;height:0;transition:height .4s var(--ease)} .faq__a p{margin:0 0 24px;color:var(--muted);font-size:1.05rem;max-width:80ch;padding-inline:6px} /* ===================== CTA FINAL + RODAPÉ (uma seção vermelha) ===================== */ .finalcta{background:var(--red);color:#fff;border-radius:44px 44px 0 0;margin-top:-44px;position:relative;z-index:3;overflow:hidden} .fc{position:relative;z-index:1;padding-block:clamp(60px,8vw,116px) clamp(40px,5vw,72px)} .fc__top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;margin-bottom:clamp(48px,7vw,104px)} .fc__cta{flex:1 1 auto;max-width:720px} .fc__qr{margin-left:auto} .fc__title{font-size:clamp(2.1rem,5vw,4.4rem);line-height:1.16;letter-spacing:.012em;margin:0} .fc__sub{font-family:var(--font-ui);font-size:clamp(1.05rem,1.6vw,1.4rem);margin:18px 0 30px;color:rgba(255,255,255,.95)} .fc__qr{display:flex;flex-direction:column;align-items:center;gap:12px;flex:none} .fc__qrcard{background:#fff;border-radius:22px;padding:14px;box-shadow:0 18px 40px -22px rgba(13,17,27,.5)} .fc__qrcard img{display:block;width:clamp(118px,9vw,150px);height:auto} .fc__qr span{font-family:var(--font-ui);font-size:1rem;color:rgba(255,255,255,.95)} .fc__cols{display:flex;gap:clamp(40px,7vw,118px);flex-wrap:wrap;margin-bottom:clamp(40px,5vw,68px)} .fc__col h4{font-size:clamp(1.15rem,1.7vw,1.5rem);margin:0 0 14px;letter-spacing:.02em} .fc__col a{display:block;color:rgba(255,255,255,.92);font-size:1rem;padding:6px 0} .fc__col a:hover{text-decoration:underline} .fc__legal{display:flex;gap:30px;flex-wrap:wrap;font-size:.78rem;letter-spacing:.05em;color:rgba(255,255,255,.8);text-transform:uppercase} .fc__legal a{color:inherit} .fc__legal a:hover{text-decoration:underline} .fc__wm{position:absolute;left:50%;bottom:-1%;transform:translateX(-50%);width:116%;max-width:1560px;aspect-ratio:576/159;z-index:0;pointer-events:none;background:rgba(255,255,255,.10);-webkit-mask:url(../assets/img/wordmark.svg) no-repeat center/contain;mask:url(../assets/img/wordmark.svg) no-repeat center/contain} /* ===================== DOWNLOAD MODAL ===================== */ .dlm[hidden]{display:none} .dlm{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px} .dlm__scrim{position:absolute;inset:0;background:rgba(13,17,27,.5); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .28s var(--ease)} .dlm__card{position:relative;z-index:1;width:min(404px,100%);background:#fff;border-radius:30px; padding:clamp(30px,4.5vw,40px) clamp(24px,4vw,34px) clamp(26px,4vw,32px);text-align:center; box-shadow:0 30px 80px -26px rgba(13,17,27,.45); opacity:0;transform:scale(.96);transition:opacity .28s var(--ease),transform .28s var(--ease)} .dlm.is-open .dlm__scrim{opacity:1} .dlm.is-open .dlm__card{opacity:1;transform:none} .dlm__x{position:absolute;top:16px;right:16px;width:38px;height:38px;display:grid;place-items:center; border:0;background:var(--light);border-radius:50%;color:var(--muted);cursor:pointer; transition:background .2s var(--ease),color .2s var(--ease),transform .15s var(--ease)} .dlm__x:hover{background:#E7E7EB;color:var(--ink)} .dlm__x:active{transform:scale(.92)} .dlm__x svg{width:18px;height:18px} .dlm__seal{display:block;width:52px;height:52px;margin:2px auto 14px} .dlm__seal img{width:100%;height:100%;filter:drop-shadow(0 8px 16px rgba(227,15,47,.3))} .dlm__d{color:var(--ink);font-weight:600;font-size:clamp(1.08rem,2.8vw,1.22rem);line-height:1.32;margin:4px auto 2px;max-width:24ch;text-wrap:balance} .dlm__qr{width:clamp(186px,54vw,216px);aspect-ratio:1;margin:22px auto 24px;padding:14px;background:#fff; border:1px solid var(--line);border-radius:22px;box-shadow:0 14px 32px -20px rgba(13,17,27,.35)} .dlm__qr img{width:100%;height:100%;display:block} .dlm__stores{display:flex;gap:10px} .dlm__store{flex:1 1 0;min-width:0;background:#fff;color:var(--ink);gap:.5em;padding:.72em .7em;border-radius:999px;border:1px solid #DDDEE4; transition:background .2s var(--ease),border-color .2s var(--ease),transform .15s var(--ease)} .dlm__store:hover{background:#FAFAFB;border-color:#CFD1D9} .dlm__store:active{transform:scale(.984)} .dlm__store .ico-apple{width:1.35em;height:1.46em;flex:none} .dlm__store .btn__ico{width:1.4em;height:1.4em;flex:none} .dlm__store-t{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;text-align:left;min-width:0} .dlm__store-t small{font-size:.62em;font-weight:600;color:var(--muted);letter-spacing:.01em;white-space:nowrap} .dlm__store-t b{font-weight:700;font-size:.98em;color:var(--ink);white-space:nowrap} @media (max-width:560px){ .dlm{place-items:end center;padding:0} .dlm__card{width:100%;border-radius:28px 28px 0 0;padding-bottom:34px;transform:translateY(14px)} .dlm.is-open .dlm__card{transform:none} } @media (prefers-reduced-motion:reduce){ .dlm__card{transform:none;transition:opacity .2s ease} .dlm.is-open .dlm__card{transform:none} } /* ===================== RESPONSIVE ===================== */ @media (max-width:900px){ .bento__r1{flex-direction:column;aspect-ratio:auto;gap:18px} .bento__r1>*,.bento__r2>*,.bento__rightcol>*,.bento__r3>*{flex:0 0 auto} .b-listas{aspect-ratio:633/422} .b-twophones{aspect-ratio:573/431} .bento__r2{flex-direction:column;aspect-ratio:auto;gap:18px} .b-explore{aspect-ratio:422/743} .bento__rightcol{gap:18px} .b-guias{aspect-ratio:784/349} .bento__r3{aspect-ratio:auto} .b-nota{aspect-ratio:473/370} .b-mascot{aspect-ratio:287/371} } @media (max-width:760px){ .nav__menu{display:none} .steps__track{gap:16px} .scard{flex-basis:82%} /* mobile: enxuga o bento — esconde "Eu dei meu veredito" (2 fones), Guias (carrossel) e o mascote */ .b-twophones,.b-guias,.b-mascot{display:none} .bento__r3{flex-direction:column} .footer__inner{flex-direction:column} .swm{font-size:clamp(2.6rem,10vw,3.7rem)} /* rodapé: QR desce para baixo do botão, alinhado à esquerda */ .fc__top{flex-direction:column;align-items:flex-start;gap:30px} .fc__qr{margin-left:0;align-items:flex-start} } /* ===== DESCOBRIR (problem framing — Figma 2028:1752) ===== */ .discover{padding-block:clamp(56px,7.5vw,108px);text-align:center} .discover__title{font-family:var(--font-disp);font-weight:400;text-transform:uppercase;color:var(--ink);line-height:1.04;letter-spacing:.01em;font-size:clamp(2rem,4.8vw,3.8rem);max-width:760px;margin:0 auto} .discover__lead{font-family:var(--font-body);font-weight:400;color:var(--ink);font-size:clamp(1rem,1.2vw,1.18rem);line-height:1.5;margin:clamp(26px,3vw,44px) auto 0;max-width:720px} .discover__lead strong{font-weight:700} .discover__chips{list-style:none;margin:clamp(22px,2.6vw,36px) auto 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:18px;row-gap:14px;max-width:920px} .chip{display:flex;align-items:center;gap:10px;background:#F3F3F3;border-radius:16px;padding:12px 18px;font-family:var(--font-body);font-weight:400;font-size:clamp(.9rem,1vw,1.04rem);color:var(--ink);text-align:left;white-space:nowrap} /* chips convergem para o eixo central: coluna esquerda encosta à direita, coluna direita à esquerda (Figma 2028:1752) */ .discover__chips>.chip:nth-child(odd){justify-self:end} .discover__chips>.chip:nth-child(even){justify-self:start} .chip strong{font-weight:700} .chip__ic{flex:none;display:inline-flex;color:var(--red)} .chip__ic svg{width:24px;height:24px;display:block} .discover__foot{font-family:var(--font-body);font-weight:400;color:var(--ink);font-size:clamp(1rem,1.2vw,1.18rem);margin:clamp(28px,3.4vw,48px) auto 0} .u-red{font-weight:700;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:5px} @media (max-width:1024px){ .discover__chips{grid-template-columns:1fr;gap:12px;max-width:440px} .chip{justify-content:flex-start;white-space:normal} .discover__chips>.chip:nth-child(odd),.discover__chips>.chip:nth-child(even){justify-self:stretch} } /* ===== A RECEITA DO SELLO (Figma 2028:1752) ===== */ .recipe{background:#F3F3F3} .recipe__inner{padding-block:clamp(56px,7.5vw,108px)} .recipe__top{display:flex;justify-content:space-between;align-items:center;gap:clamp(28px,4vw,72px)} .recipe__intro{max-width:760px} .recipe__eye{display:block;font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(.82rem,.95vw,.95rem);color:var(--red);margin-bottom:clamp(12px,1.2vw,18px)} .recipe__title{font-family:var(--font-body);font-weight:400;font-size:clamp(1.5rem,2.7vw,2.2rem);line-height:1.16;letter-spacing:-.01em;color:var(--ink);margin:0;max-width:34ch;text-wrap:balance} .recipe__title strong{font-weight:800;color:var(--red);display:block} .recipe__art{flex:0 0 auto;width:clamp(140px,15vw,196px)} .recipe__art svg{width:100%;height:auto;overflow:visible;display:block} .recipe__sub{font-family:var(--font-body);font-weight:400;font-size:clamp(1rem,1.2vw,1.18rem);line-height:1.5;color:var(--muted);max-width:900px;margin:clamp(20px,2.2vw,32px) 0 0} .recipe__sub strong{font-weight:700;color:var(--ink)} .recipe__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(32px,3.6vw,52px)} .ing{background:#fff;border-radius:24px;padding:clamp(26px,2.4vw,40px)} .ing__ic{display:inline-flex;color:var(--red);margin-bottom:16px} .ing__ic svg{width:40px;height:40px} .ing__t{font-family:var(--font-disp);font-weight:400;text-transform:uppercase;font-size:clamp(1.2rem,1.5vw,1.5rem);letter-spacing:.02em;color:var(--red);margin:0 0 clamp(10px,1vw,14px)} .ing__lead{font-family:var(--font-body);font-weight:700;font-size:clamp(1rem,1.1vw,1.18rem);line-height:1.3;color:var(--ink);margin:0 0 10px} .ing__body{font-family:var(--font-body);font-weight:400;font-size:clamp(.92rem,1vw,1.04rem);line-height:1.5;color:var(--muted);margin:0} .recipe__ai{background:var(--red);border-radius:24px;color:#fff;padding:clamp(28px,3vw,48px);grid-column:1/-1;margin-top:0} .recipe__ai-t{display:flex;align-items:center;gap:12px;font-family:var(--font-disp);font-weight:400;text-transform:uppercase;font-size:clamp(1.2rem,1.5vw,1.5rem);letter-spacing:.02em;margin:0 0 clamp(10px,1.1vw,16px)} .recipe__ai-ic{display:inline-flex} .recipe__ai-ic svg{width:28px;height:28px} .recipe__ai-lead{font-family:var(--font-body);font-weight:700;font-size:clamp(1rem,1.15vw,1.2rem);margin:0 0 8px} .recipe__ai-body{font-family:var(--font-body);font-weight:400;font-size:clamp(.95rem,1.05vw,1.1rem);line-height:1.5;margin:0;max-width:1040px;color:rgba(255,255,255,.94)} /* floating mascot (reuse) */ .sf-char{animation:sfFloat 4.6s ease-in-out infinite} .sf-shadow{transform-box:fill-box;transform-origin:center;animation:sfShadow 4.6s ease-in-out infinite} .sf-star{transform-box:fill-box;transform-origin:center;animation:sfTwinkle 2.8s ease-in-out infinite} .sf-star2{animation-delay:.9s} .sf-star3{animation-delay:1.8s} @keyframes sfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} @keyframes sfShadow{0%,100%{transform:scaleX(1);opacity:.92}50%{transform:scaleX(.8);opacity:.55}} @keyframes sfTwinkle{0%,100%{opacity:0;transform:scale(.5)}45%,55%{opacity:1;transform:scale(1)}} @media (prefers-reduced-motion:reduce){.sf-char,.sf-shadow,.sf-star{animation:none}.sf-star{opacity:1}} @media (max-width:760px){ .recipe__top{flex-direction:column-reverse;align-items:flex-start;gap:18px} .recipe__art{align-self:center;width:clamp(130px,40vw,176px)} /* CARROSSEL horizontal no mobile (o card vermelho Inteligência Sello entra junto) */ .recipe__cols{display:flex;grid-template-columns:none;gap:14px;margin-top:clamp(28px,7vw,40px); overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; margin-inline:calc(-1*var(--pad));padding-inline:var(--pad);scroll-padding-inline:var(--pad); scrollbar-width:none} .recipe__cols::-webkit-scrollbar{display:none} .recipe__cols>*{flex:0 0 80%;scroll-snap-align:start} .recipe__ai{margin-top:0} } /* ===== STATS (Uma curadoria que cresce — Figma 2028:1752) ===== */ .stats{position:relative;padding-block:clamp(56px,7.5vw,108px);isolation:isolate} .stats__card{position:absolute;z-index:0;top:0;bottom:calc(clamp(40px,7vw,104px) + 44px);left:clamp(16px,8vw,150px);right:0;background:var(--red);border-radius:28px 0 0 28px} .stats__row{position:relative;z-index:2;max-width:var(--wrap);margin-inline:auto;padding:clamp(36px,4vw,60px) var(--pad) clamp(72px,8vw,120px);display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,80px);align-items:start} .stats__title{font-family:var(--font-body);font-weight:400;font-size:clamp(1.7rem,3vw,2.8rem);line-height:1.08;color:#F6F2ED;margin:0;max-width:420px;position:relative;z-index:2} .stats__title strong{font-weight:700} .stats__nums{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,42px);text-align:right} .snum__n{display:block;font-family:var(--font-disp);font-weight:400;font-size:clamp(3.2rem,8vw,8.5rem);line-height:.88;letter-spacing:.01em;color:#F6F2ED} .snum__l{display:block;font-family:var(--font-body);font-weight:400;font-size:clamp(.92rem,1.2vw,1.35rem);color:rgba(246,242,237,.92);margin-top:8px} .stats__img{position:absolute;z-index:1;left:0;top:calc(clamp(56px,7.5vw,108px) + clamp(36px,4vw,60px) + 2.8 * clamp(1.7rem,3vw,2.8rem));bottom:clamp(40px,7vw,104px);width:clamp(300px,55%,960px);border-radius:0 22px 22px 0;overflow:hidden;display:block} .stats__img img{width:100%;height:100%;object-fit:cover;display:block} @media (max-width:860px){ /* mobile (Figma 2114:291): foto no topo com sangria à direita (cantos arredondados só à esquerda) cavalgando a borda superior do painel vermelho full-bleed; abaixo o título e os números empilhados, tudo alinhado ao gutter da página (--pad). Tipografia mantém a escala anterior — o Figma guiou só o layout. */ .stats{display:flex;flex-direction:column;position:relative;padding-block:clamp(40px,9vw,60px)} .stats__card{display:block;position:absolute;z-index:0;left:0;right:0;border-radius:0; top:calc(clamp(40px,9vw,60px) + clamp(26px,7vw,34px));bottom:clamp(40px,9vw,60px)} .stats__img{order:-1;display:block;position:relative;inset:auto;z-index:2; width:auto;height:auto;aspect-ratio:370/283;margin:0 0 0 var(--pad); border-radius:16px 0 0 16px;overflow:hidden} .stats__img img{width:100%;height:100%;object-fit:cover;border-radius:inherit} .stats__row{position:relative;z-index:2;display:flex;flex-direction:column;align-items:stretch; background:transparent;border-radius:0;max-width:none;margin:0;transform:none; gap:clamp(30px,8vw,44px);padding:clamp(18px,5vw,24px) var(--pad) clamp(40px,11vw,52px)} .stats__title{max-width:none} .stats__nums{text-align:left;flex-direction:column;gap:clamp(30px,8vw,44px)} .snum__n{font-size:clamp(3.4rem,16vw,5.5rem)} } /* ===== FAQ (dark, 2-col + foto — Figma 2028:1752) ===== */ .faq{background:#1E1E1E;padding-bottom:0;overflow:visible;position:relative} .faq__inner{padding-block:clamp(52px,6.6vw,96px) clamp(56px,7.5vw,108px);display:grid;grid-template-columns:1fr clamp(300px,36%,500px);gap:clamp(36px,5vw,80px);align-items:start} .faq__title{font-family:var(--font-body);font-weight:400;font-size:clamp(1.5rem,2.7vw,2.2rem);line-height:1.16;color:#F6F2ED;margin:0 0 clamp(18px,2.2vw,32px);max-width:none} .faq__title .accent{font-weight:700} .faq__list{max-width:none;margin:0} .faq__row{border-bottom:1px solid rgba(255,255,255,.14)} .faq__q{color:#F6F2ED;font-family:var(--font-body);font-size:clamp(1rem,1.2vw,1.18rem);padding:clamp(15px,1.7vw,21px) 2px} .faq__q .chev{stroke:rgba(255,255,255,.55)} .faq__a p{color:rgba(255,255,255,.66);max-width:none;padding-inline:2px;font-size:1.02rem} .faq__media{align-self:stretch;position:relative;z-index:5} .faq__media img{width:calc(100% + var(--pad) + max(0px,(100vw - var(--wrap))/2));max-width:none;margin-right:calc(-1 * (var(--pad) + max(0px,(100vw - var(--wrap))/2)));margin-top:calc(-1 * clamp(72px,11vw,150px));height:calc(100% + clamp(72px,11vw,150px) + 40px);object-fit:cover;border-radius:24px 0 0 24px;display:block} @media (max-width:860px){.bento-sec{padding-bottom:calc(clamp(56px,7.5vw,108px) + 40px)}.faq__inner{grid-template-columns:1fr;gap:clamp(24px,5vw,38px)}.faq__media{display:none}.faq__title{max-width:none}} /* ===== REVIEWS (dark cards — Figma 2028:1752) ===== */ .reviews{background:#1E1E1E} .reviews .wrap{text-align:left;margin-bottom:0} .reviews__inner{padding-block:clamp(56px,7.5vw,108px)} .reviews__title{font-family:var(--font-body);font-weight:400;font-size:clamp(1.5rem,2.7vw,2.2rem);line-height:1.16;color:#F6F2ED;text-align:center;margin:0 auto clamp(30px,3.6vw,48px);max-width:none} .reviews__title .accent{font-weight:700} /* ===== CTA FINAL (white — Figma 2028:1752) ===== */ .cta-final{background:#fff;position:relative;z-index:2} .cta-final__inner{padding-block:clamp(56px,7.5vw,108px) calc(clamp(56px,7.5vw,108px) + 44px)} .cta-final__head{position:relative} .cta-final__title{font-family:var(--font-disp);text-transform:uppercase;font-weight:400;color:var(--ink);font-size:clamp(2.6rem,7vw,5.6rem);line-height:1.28;letter-spacing:.01em;margin:0;max-width:none} .cta-final__star{position:absolute;font-size:clamp(2.6rem,7vw,5.6rem);left:5.35em;top:.4em;width:1.5em;height:auto;transform:rotate(-6deg);pointer-events:none} .cta-final__sub{font-family:var(--font-body);font-weight:400;font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.5;color:var(--ink);max-width:720px;margin:clamp(20px,2.4vw,34px) 0 0} .cta-final__btn{margin-top:clamp(26px,3vw,42px)} @media (max-width:760px){.cta-final__star{position:static;width:84px;margin-bottom:14px;display:block}.cta-final__head{display:flex;flex-direction:column-reverse;align-items:flex-start}}