/* ============ TOKENS (LIGHT) ============ */ :root{ --bg:#FAFBFC; /* clean cool off-white page */ --bg-2:#FFFFFF; /* cards / white sections */ --bg-3:#EFF3F7; /* cool light alt (footer) — de-beiged */ --ink:#15211F; /* headings */ --ink-2:#46524F; /* body (AA on off-white) */ --ink-3:#5E6A66; /* fine print (AA small) */ --teal:#01BCB5; /* DS emerald-600 — brand primary */ --teal-strong:#007D78; /* DS emerald-800 — teal text on light (AA) */ --purple:#B16CFF; /* DS purple-500 S — brand secondary, decoração/tints */ --purple-deep:#8F06CD; /* DS purple-800 — CTA bg c/ texto branco (AA 6.9:1) */ --purple-strong:var(--purple-deep); /* alias do purple-800 — texto roxo sobre fundo claro */ --purple-900:#350052; /* DS purple-900 — texto do CTA sobre fundo roxo */ --gold:#9A6A00; /* stars on light — 4.7:1 AA */ --line:rgba(20,33,31,.10); --line-2:rgba(20,33,31,.16); --tint-teal:rgba(1,188,181,.10); --tint-purple:rgba(177,108,255,.10); --shadow-sm:0 2px 8px rgba(20,33,31,.06); --shadow-md:0 18px 50px -28px rgba(20,33,31,.30); --shadow-lg:0 40px 90px -40px rgba(20,33,31,.40); --shadow-float:0 2px 4px rgba(20,33,31,.06),0 16px 34px -14px rgba(20,33,31,.20),0 40px 78px -36px rgba(20,33,31,.26); --shadow-pill:0 1px 2px rgba(20,33,31,.05),0 5px 14px -8px rgba(20,33,31,.14); --shadow-purple:0 18px 44px -18px rgba(177,108,255,.55); --maxw:1180px; --maxw-wide:1300px; /* nav · footer · seções sticky largas */ --maxw-mid:1240px; /* collage dos pilares · stage da waitlist */ --r-lg:26px; --r-md:18px; --r-sm:12px; --ease:cubic-bezier(.22,.61,.36,1); /* liquid glass */ --glass:rgba(255,255,255,.56); --glass-strong:rgba(255,255,255,.72); --glass-dim:rgba(244,246,249,.55); --glass-bd:rgba(255,255,255,.78); --glass-bd-2:rgba(255,255,255,.5); --glass-fx:saturate(165%) blur(22px); --glass-sheen:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0) 46%); --glass-shadow:0 34px 80px -36px rgba(20,33,31,.5),0 10px 30px -18px rgba(20,33,31,.32); --glass-shadow-lg:0 50px 110px -40px rgba(20,33,31,.6),0 16px 40px -20px rgba(177,108,255,.3); /* cool premium washes */ --wash-cool:linear-gradient(180deg,#FFFFFF 0%,#EEF4F9 100%); /* z-index — escala global de chrome (nav/menu/cta fixos, footer). Stacking contexts locais (dentro de .hero, .cmp2, .cosmos-card-*, componentes com position:relative próprio) usam números pequenos (1–6) escopados ao próprio componente — não entram nesta escala global. */ --z-footer:10; --z-menu:49; --z-nav:50; --z-dropdown:60; --z-consent:70; /* banner de consentimento (LGPD) — acima de tudo, abaixo do skip */ --z-skip:100; } *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-snap-type:y proximity;scroll-padding-top:100px} /* snap suave (proximity, nunca mandatory) — pula as seções de scroll-coreografado (flip dos pilares + capítulo escuro da dor) pra não brigar com a animação interna */ section[id]:not(.cosmos-flip-section):not(.dor):not(.cmp2-section){scroll-snap-align:start} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;scroll-snap-type:none}} body{ margin:0; font-family:'Nunito',system-ui,sans-serif; background:var(--bg); color:var(--ink-2); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } h1,h2,h3,h4{font-family:'Poppins',sans-serif;line-height:1.08;margin:0;letter-spacing:-.02em;font-weight:700;color:var(--ink)} p{margin:0} a{color:inherit;text-decoration:none} img,svg,video{display:block;max-width:100%} button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit} ul{margin:0;padding:0;list-style:none} :focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:6px} .skip{position:fixed;top:10px;left:10px;z-index:var(--z-skip);transform:translateY(-200%);background:var(--bg-2);color:var(--ink);font-family:'Poppins',sans-serif;font-weight:700;font-size:.9rem;padding:11px 20px;border-radius:999px;box-shadow:var(--shadow-md);transition:transform .2s var(--ease)} .skip:focus{transform:none} /* ============ LAYOUT ============ */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px} section{position:relative;z-index:2} .lead{color:var(--ink-2);font-size:1.12rem;max-width:54ch} /* section background utilities — intentional contrast, premium & cool */ .bg-white{background:var(--bg-2)} .bg-wash{background:var(--wash-cool)} /* ============ NAV (logo free · glass pill links · CTA separate) ============ */ #nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);padding:max(14px,env(safe-area-inset-top)) 0 0;pointer-events:none;transition:transform .38s var(--ease);will-change:transform} #nav.nav-hidden{transform:translateY(-115%)} /* permanent top scrim so the white logo + links always read over ANY video frame */ #nav::before{content:"";position:absolute;left:0;right:0;top:0;height:128px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(8,14,13,.5),rgba(8,14,13,0));transition:opacity .35s var(--ease)} #nav.scrolled::before{opacity:0} .nav-row{max-width:var(--maxw-wide);margin:0 auto;padding-left:max(40px,env(safe-area-inset-left));padding-right:max(40px,env(safe-area-inset-right));display:flex;align-items:center;gap:16px;pointer-events:none} .nav-row>*{pointer-events:auto} /* logo floats transparent over the video — no glass behind it; height matches the CTA button */ .brand{flex:0 0 auto;display:flex;align-items:center} .brand img{height:80px;width:auto;transition:filter .3s} /* logo is a black wordmark: invert to white over the video (reads on dark scrim AND bright frames w/ the soft dark halo); natural black when scrolled over light */ #nav:not(.scrolled) .brand img{filter:brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.6))} /* glass pill holds only the links, centered, more translucent than L5 */ .nav-pill{display:flex;gap:26px;align-items:center;margin:0 auto;padding:11px 28px;border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 8px 30px -16px rgba(20,33,31,.3); transition:background .3s,box-shadow .3s,border-color .3s,backdrop-filter .3s} .nav-pill a{font-weight:600;font-size:.94rem;transition:color .2s,text-shadow .2s} /* over video: white links w/ shadow (mirrors hero text). scrolled over light: ink links. */ #nav:not(.scrolled) .nav-pill a{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.55)} #nav.scrolled .nav-pill a{color:var(--ink);text-shadow:none} #nav:not(.scrolled) .nav-pill a:hover{color:var(--purple-strong)} #nav.scrolled .nav-pill a:hover{color:var(--purple-strong)} .nav-cta{flex:0 0 auto;font-family:'Poppins',sans-serif} #nav.scrolled .nav-pill{box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 12px 38px -16px rgba(20,33,31,.25);-webkit-backdrop-filter:saturate(150%) blur(12px);backdrop-filter:saturate(150%) blur(12px)} /* toggles de tema + idioma no nav */ .nav-tools{display:flex;align-items:center;gap:10px} .nav-ctrl{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);box-shadow:0 1px 0 rgba(255,255,255,.3) inset;transition:background .25s,border-color .25s,color .25s,-webkit-backdrop-filter .25s;color:#fff} .nav-ctrl.js-theme-toggle{width:38px;padding:0} .nav-ctrl svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .nav-ctrl .lang-chevron{width:10px;height:10px;stroke-width:2.4} .nav-ctrl .lang-code{font-family:'Poppins';font-weight:600;font-size:.82rem} #nav:not(.scrolled) .nav-ctrl{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)} #nav:not(.scrolled) .nav-ctrl:hover{background:rgba(255,255,255,.26)} #nav.scrolled .nav-ctrl{color:var(--ink);background:rgba(20,33,31,.05);border-color:var(--line-2);text-shadow:none;-webkit-backdrop-filter:saturate(150%) blur(12px);backdrop-filter:saturate(150%) blur(12px)} #nav.scrolled .nav-ctrl:hover{background:rgba(20,33,31,.09);color:var(--purple-strong)} .js-theme-toggle .ic-moon{display:none} [data-theme="dark"] .js-theme-toggle .ic-sun{display:none} [data-theme="dark"] .js-theme-toggle .ic-moon{display:block} .lang-picker{position:relative} .lang-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--bg-2);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow-md);padding:6px;min-width:168px;z-index:var(--z-dropdown);display:flex;flex-direction:column;gap:2px} .lang-menu[hidden]{display:none} .lang-menu button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;font-family:'Poppins';font-weight:600;font-size:.92rem;color:var(--ink);text-align:left;transition:background .15s} .lang-menu button:hover{background:var(--tint-purple)} .lang-menu button.active{color:var(--purple-strong)} .lang-menu .lang-code{font-size:.72rem;opacity:.7;letter-spacing:.04em} @media(max-width:880px){.nav-pill{display:none}.nav-row{justify-content:space-between;padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}.nav-tools .nav-ctrl:not(.nav-burger),.nav-tools .lang-picker{display:none}.js .nav-tools .nav-cta{display:none}.js .nav-tools .nav-burger{display:inline-flex}} /* ============ MOBILE MENU (hamburger ≤880px) ============ */ .nav-burger{display:none;width:44px;height:44px;padding:0} .nav-burger svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round} .nav-burger .ic-close{display:none} .menu-open .nav-burger .ic-burger{display:none} .menu-open .nav-burger .ic-close{display:block} /* com o menu aberto (véu escuro), o nav força o modo "sobre vídeo": logo e X brancos */ .menu-open #nav.scrolled .brand img{filter:brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.6))} .menu-open #nav.scrolled .nav-ctrl{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);text-shadow:none} .menu-open #nav{transform:none!important} html.menu-open{overflow:hidden} /* TODO(perf): blur(26px)+saturate no menu full-screen é caro em GPUs de entrada mobile durante a transição de opacity; se travar em devices baixos, testar blur(12–14px) ou trocar por um bg sólido com opacity alta (sem backdrop-filter) — visualmente próximo, sem custo de composição por frame. */ .mobile-menu{position:fixed;inset:0;z-index:var(--z-menu);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; padding:calc(env(safe-area-inset-top) + 118px) 30px calc(env(safe-area-inset-bottom) + 26px); background:linear-gradient(180deg,rgba(10,15,20,.86),rgba(15,10,22,.94)); -webkit-backdrop-filter:blur(26px) saturate(140%);backdrop-filter:blur(26px) saturate(140%); opacity:0;visibility:hidden;transition:opacity .32s var(--ease),visibility 0s linear .32s} .menu-open .mobile-menu{opacity:1;visibility:visible;transition:opacity .32s var(--ease)} .mm-links{display:flex;flex-direction:column} .mm-links a{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.6rem;letter-spacing:-.02em;color:#fff;padding:13px 0; display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08); opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease),transform .45s var(--ease)} .mm-links a::after{content:"→";font-size:1.05em;font-weight:600;color:var(--teal);opacity:.6} .menu-open .mm-links a{opacity:1;transform:none} .menu-open .mm-links a:nth-child(1){transition-delay:.06s} .menu-open .mm-links a:nth-child(2){transition-delay:.11s} .menu-open .mm-links a:nth-child(3){transition-delay:.16s} .menu-open .mm-links a:nth-child(4){transition-delay:.21s} .menu-open .mm-links a:nth-child(5){transition-delay:.26s} .mm-foot{margin-top:auto;display:flex;flex-direction:column;gap:16px;opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease) .32s,transform .45s var(--ease) .32s} .menu-open .mm-foot{opacity:1;transform:none} .mm-ctrls{display:flex;align-items:center;gap:10px} .mm-ctrl{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 16px;border-radius:999px; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;font-family:'Poppins',sans-serif;font-weight:600;font-size:.85rem} .mm-ctrl svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .mm-ctrl.active{background:rgba(177,108,255,.28);border-color:rgba(177,108,255,.6)} @media (max-height:480px){.mobile-menu{padding-top:calc(env(safe-area-inset-top) + 72px)}.mm-links a{font-size:1.2rem;padding:9px 0}.mm-foot{margin-top:22px}} @media (prefers-reduced-motion:reduce){.mobile-menu,.mm-links a,.mm-foot{transition:none}} /* ============ BUTTONS ============ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:'Poppins',sans-serif;font-weight:600;font-size:1rem;padding:14px 26px;border-radius:999px;transition:transform .2s var(--ease),box-shadow .25s,background .25s} .btn:active{transform:translateY(1px) scale(.99)} .btn:disabled,.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none} .btn-primary{background:var(--purple);color:var(--purple-900);box-shadow:var(--shadow-purple)} .btn-primary:hover{background:var(--purple-deep);color:#fff;transform:translateY(-2px);box-shadow:0 24px 60px -22px rgba(177,108,255,.7)} .btn-ghost{background:var(--bg-2);color:var(--ink);border:1px solid var(--line-2);box-shadow:var(--shadow-sm)} .btn-ghost:hover{background:#fff;border-color:var(--purple);color:var(--purple-strong);transform:translateY(-2px)} .btn-sm{padding:10px 18px;font-size:.92rem} .btn-block{width:100%} /* ============ HERO (FULL-BLEED VIDEO) ============ */ /* CURTAIN: a hero fica presa no topo (sticky) e as seções seguintes sobem por cima dela como uma cortina */ .hero{position:sticky;top:0;z-index:1;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate} .hero.is-covered{visibility:hidden} .hero-media{position:absolute;inset:0;z-index:-2;background:#0c1413} .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} @media(max-width:768px){ /* 09/07: o mobile usa um vídeo VERTICAL 9:16 próprio (), então cover preenche a hero inteira sem faixa preta nem crop lateral. O desktop continua no 16:9. */ .hero-video{object-fit:cover;object-position:center} /* copy acima do scrim (scrim é z-index:1) → o scrim escurece só o vídeo, não o texto */ .hero-inner{position:relative;z-index:2} } /* z-index:1 (não -1): .hero-media cria stacking context, então -1 pintava o scrim ATRÁS do vídeo */ /* S1: gradiente inferior mais denso + vinheta radial no canto esquerdo-inferior (onde o texto vive) */ .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none; background: radial-gradient(90% 75% at 12% 100%,rgba(8,14,13,.62),transparent 68%), linear-gradient(180deg, rgba(8,14,13,.62) 0%, rgba(8,14,13,.18) 13%, rgba(8,14,13,0) 32%, rgba(8,14,13,.28) 52%, rgba(8,14,13,.72) 72%, rgba(8,14,13,.94) 100%)} .hero-inner{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px 108px} .hero h1{margin:20px 0 0;max-width:18ch;font-size:clamp(2.5rem,7vw,4.7rem);font-weight:800;color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.5)} @media(max-width:768px){.hero h1{margin-top:18px}} .hero h1 .hl{color:var(--teal)} .hero .sub{margin:22px 0 0;font-size:clamp(1.06rem,2vw,1.28rem);color:#EAF3F1;max-width:46ch;text-shadow:0 1px 14px rgba(0,0,0,.5)} .hero .sub strong{color:#fff;font-weight:700} /* hero email capture — unified white pill (input + button as one unit) */ .hero-form{margin-top:28px;display:flex;align-items:center;gap:6px;max-width:560px;padding:6px;border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 16px 44px -18px rgba(0,0,0,.5);transition:box-shadow .2s} .hero-form:focus-within{box-shadow:0 0 0 3px rgba(177,108,255,.5),0 16px 44px -18px rgba(0,0,0,.5)} .hero-form .em{flex:1 1 auto;min-width:0;padding:13px 20px;border-radius:999px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:1.02rem} .hero-form .em::placeholder{color:var(--ink-3)} .hero-form .em:focus{outline:none} .hero-form .btn{flex:0 0 auto;white-space:nowrap} /* mobile: dissolve a "placa" branca — input em pílula própria + botão cheio, flutuando sobre o vídeo */ @media(max-width:560px){ .hero-form{flex-direction:column;align-items:stretch;gap:10px;padding:0;background:none;box-shadow:none;border-radius:0} .hero-form:focus-within{box-shadow:none} .hero-form .em{background:rgba(255,255,255,.97);border-radius:999px;padding:16px 22px;font-size:1.05rem;box-shadow:0 14px 38px -16px rgba(0,0,0,.55)} .hero-form .em:focus{box-shadow:0 0 0 3px rgba(177,108,255,.6),0 14px 38px -16px rgba(0,0,0,.55)} .hero-form .btn{width:100%;padding:16px 26px} } .hero-ok{display:none;margin-top:18px;font-family:'Poppins';font-weight:700;color:#fff;font-size:1.05rem;text-shadow:0 1px 10px rgba(0,0,0,.6)} .hero-ok.show{display:block} .form-err{margin-top:8px;color:#C42B37;font-family:'Poppins',sans-serif;font-weight:600;font-size:.85rem} .hero-err{color:#FFC2C2;text-shadow:0 1px 8px rgba(0,0,0,.6)} /* selos institucionais na hero — texto transparente sobre o vídeo (sem pílula), ícone teal + divisória fina */ .hero-creds{margin-top:24px;display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 18px} .hero-cred{display:inline-flex;align-items:center;gap:9px;padding:6px 0;text-decoration:none;font-family:'Poppins';font-weight:500;font-size:.88rem;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)} .hero-cred:hover{opacity:.84} .hero-cred:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:6px} .hero-cred b{font-weight:800} .hero-cred svg{width:17px;height:17px;stroke:#7FF0EA;fill:none;stroke-width:2.2;flex:0 0 auto;filter:drop-shadow(0 1px 4px rgba(0,0,0,.55))} .hero-cred-sep{width:1px;height:18px;background:rgba(255,255,255,.5)} @media(max-width:560px){.hero-creds{gap:6px 14px}.hero-cred{font-size:.8rem}.hero-cred-sep{display:none}} /* scroll indicator — D2: dark glass chip, reads on any frame */ /* chevron animado, sem placa; drop-shadow garante a legibilidade */ .scroll-ind{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;justify-content:center;background:none;border:0;transition:opacity .2s,transform .2s} .scroll-ind:hover{opacity:.85;transform:translateX(-50%) translateY(2px)} .scroll-ind .chev{width:13px;height:13px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);animation:chevbob 1.6s var(--ease) infinite} @keyframes chevbob{0%,100%{transform:rotate(45deg) translate(-2px,-2px);opacity:.6}50%{transform:rotate(45deg) translate(2px,2px);opacity:1}} @media (prefers-reduced-motion:reduce){.scroll-ind .chev{animation:none;opacity:1}} /* texto sobreposto na parte de baixo do vídeo (como no desktop) — vem depois das regras base de .hero-scrim/.hero-inner de propósito, pra vencer no cascade sem precisar de !important */ @media(max-width:768px){ /* scrim full-bleed: topo transparente (mostra o vídeo), base escura pro texto branco ler bem */ .hero-scrim{display:block;background:linear-gradient(180deg,rgba(12,20,19,0) 0%,rgba(12,20,19,0) 28%,rgba(12,20,19,.42) 50%,rgba(12,20,19,.8) 76%,rgba(12,20,19,.95) 100%)} } @media(max-width:560px){.scroll-ind{display:none}} /* telas curtas: tratadas no bloco consolidado de fit do hero (busque "telas realmente curtas"), posicionado DEPOIS no arquivo pra vencer a cascata — evita o conflito que deixava regras mortas aqui (o bloco de fit ~L1118 sobrescrevia padding/media daqui e só sobrava o display:none dos selos) */ /* ============ GENERIC SECTION HEADS ============ */ .sec{padding:96px 0} .sec-head{max-width:700px;margin:0 auto 56px;text-align:center} .sec-head h2{font-size:clamp(2rem,4.6vw,3.1rem)} .sec-head .lead{margin:18px auto 0;text-align:center} /* ============ MOTION SYSTEM L12 ============ */ .hlp{font-style:normal;color:var(--purple-deep)} /* título com stagger de palavras — o JS quebra em .tw; o bloco .reveal deixa de transladar */ .js .split-title.reveal{opacity:1;transform:none} .js .split-title .tw{display:inline-block;opacity:0;transform:translateY(.55em);filter:blur(5px);transition:opacity .55s var(--ease),transform .55s var(--ease),filter .55s var(--ease)} .js .split-title.in .tw,.js .reveal.in .split-title .tw{opacity:1;transform:none;filter:none} @media (prefers-reduced-motion:reduce){.js .split-title .tw{opacity:1!important;transform:none!important;filter:none!important;transition:none}} /* transição de blocos: "sheet" clara arredondada que sobe sobre a seção anterior (vídeo/escuro) */ .sheet-top{position:relative;z-index:3;border-radius:clamp(22px,3.4vw,38px) clamp(22px,3.4vw,38px) 0 0;margin-top:calc(clamp(22px,3.4vw,38px) * -1);box-shadow:0 -18px 44px -30px rgba(8,14,13,.5)} /* mobile: overlap bem maior — sobe cedo e cobre boa parte do respiro final da seção anterior (.sec tem 64px de padding-bottom no mobile, então 56px cabe com folga sem tocar conteúdo) */ @media(max-width:768px){.sheet-top{margin-top:-56px;box-shadow:0 -22px 50px -30px rgba(8,14,13,.55)}} /* ============ MODELO DE SCROLL MOBILE (≤768px) ============ Scroll-snap RE-LIGADO (2026-07-08, pedido do Franz): reusa o MESMO proximity CSS puro do desktop (L73/L75) — NÃO é a "maquinaria" JS (snap-director + cortinas sticky) que quebrava o iOS. proximity (nunca mandatory) não prende em seção alta. #comparacao fica de fora (no mobile ainda é o wipe pinado de 150vh; snap brigaria com a animação). #dor e #pilares (estáticos no mobile) entram como alvos. */ /* NOTA (2026-07-10): tentei dar `scroll-margin-top` ao #excluir-conta pra ele escapar do raio de snap do #contador. NÃO funciona: o alvo é um item DENTRO do #faq, e o scroll-snap sempre resolve pra um ponto de snap discreto (#faq ou #contador) — as posições de pouso medidas foram ~310/510/610/870px, independentes da margem pedida. Nenhum valor de margem serve nas 4 viewports testadas. Consertar isso exige mexer no scroll-snap (congelado) ou mover o item na lista da FAQ. Não fazer. */ @media(max-width:768px){ body{overflow-x:clip;overscroll-behavior-x:none} /* clip (não hidden): impede o body de virar scroll-container; overscroll-x:none mata o "balanço"/rubber-band lateral ao empurrar a tela */ html{scroll-padding-top:0;overflow-anchor:none;scroll-snap-type:y proximity;overscroll-behavior-x:none} /* proximity ligado no mobile (era none); trava o rubber-band lateral no scroller raiz */ #dor,#pilares{scroll-snap-align:start} /* estáticos no mobile → viram alvos de snap (no desktop são coreografados e ficam de fora pela L75) */ #faq,#excluir-conta{scroll-margin-top:106px} /* deep-link (ex.: /#faq): aqui scroll-padding-top é 0, então o alvo encostaria no topo atrás do nav (~94px); +12 de folga. No desktop o scroll-padding-top:100px (L55) já resolve pro #faq, por isso é mobile-only */ /* lvh (não svh): o Safari iOS retrai a barra de ferramentas ao rolar → a viewport real cresce de svh pra lvh. Com svh a seção ficava MAIS CURTA que a tela nesse estado e VAZAVA a próxima no rodapé. */ #dor,#tutores,#comercial,#contador{min-height:100lvh} #contador{display:flex;align-items:center} /* ring + legenda centrados na tela cheia (era top-aligned, sobrava vazio) */ #baixar{min-height:100svh} /* flex-end (não center): sem isso, texto curto sobra como vazio escuro tanto acima quanto ABAIXO dele — e a sobra de baixo aparecia como resíduo escuro colado no topo da #pilares (o overlap de -28px logo abaixo só cobria uma pontinha, calibrado pra quando o scroll-snap prendia certinho no encaixe; sem snap dava pra parar o scroll no meio do vazio). Com flex-end o texto sempre termina colado no início da #pilares — a sobra vai pro topo (dor começando logo após a hero), nunca pro fundo. */ #dor.is-static .dor-sticky{min-height:100lvh;display:flex;align-items:flex-end} #pilares{margin-top:-28px} #pilares.cosmos-flip-section{background:var(--bg-2)} } /* ============ DOR-RAIZ — CAPÍTULO ESCURO (statement + perguntas · scroll-driven) ============ */ .dor{position:relative;background:#170B26;overflow:clip} .dor-outer{position:relative;height:340vh} .dor-sticky{position:sticky;top:0;min-height:100vh;min-height:100dvh;display:flex;align-items:center;isolation:isolate;overflow:hidden} /* luz ancorada nas bordas do viewport do capítulo — sutil, sem manchas */ .dor-sticky::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background: radial-gradient(110% 85% at 0% 0%,rgba(1,188,181,.10),transparent 52%), radial-gradient(110% 85% at 100% 100%,rgba(177,108,255,.16),transparent 55%)} .dor-wrap{max-width:1120px;width:100%} .dor-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(36px,5.5vw,84px);align-items:center} .dor-line{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(1.7rem,3.8vw,3.2rem);line-height:1.24;letter-spacing:-.02em;color:#fff;margin:0;max-width:20ch} .dor-line .w{opacity:.13;transition:opacity .22s linear} .dor-line .w.on{opacity:1} .dor-line em{font-style:normal;color:#4BE3D8} @media (prefers-reduced-motion:reduce){.dor-line .w{opacity:1!important}} .dor-right{display:flex;flex-direction:column;gap:18px} .dor-q{display:flex;gap:14px;align-items:flex-start;font-family:'Poppins',sans-serif;font-weight:600;font-size:clamp(1rem,1.55vw,1.2rem);line-height:1.45;color:#F1EAFB;margin:0} .dor-q .qm{flex:0 0 24px;text-align:center;font-weight:800;font-size:1.45rem;line-height:1.1;color:#4BE3D8;margin-top:-2px} .dor-pivot{margin:10px 0 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(1.18rem,2vw,1.48rem);line-height:1.32;color:#fff} /* coral, não o teal de marca: o destaque agora cai em "emergência cara" */ .dor-pivot em{font-style:normal;color:#FF9BA0} /* coreografia (desktop, motion ok): estágios da direita entram por progresso do lock */ .js .dor.is-locked .dor-q,.js .dor.is-locked .dor-pivot{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)} .js .dor.is-locked .dor-q.on,.js .dor.is-locked .dor-pivot.on{opacity:1;transform:none} /* fallback estático (mobile / reduced motion / sem js) */ .dor.is-static .dor-outer,html:not(.js) .dor .dor-outer{height:auto} .dor.is-static .dor-sticky,html:not(.js) .dor .dor-sticky{position:static;min-height:0;padding:clamp(84px,11vw,124px) 0;overflow:visible} @media(max-width:900px){.dor-grid{grid-template-columns:1fr;gap:32px}.dor-line{max-width:none}} /* ============ COMO FUNCIONA — SCROLL-FLIP CARDS (3 pilares · design oficial) ============ */ .cosmos-flip-section{background:var(--bg-2);position:relative;scroll-margin-top:80px} .cosmos-flip-outer{position:relative;height:260vh} .cosmos-flip-sticky{position:sticky;top:0;height:100vh;height:100dvh;display:flex;align-items:center;overflow:hidden} .cosmos-flip-sticky .wrap{width:100%;max-width:var(--maxw-wide)} .cosmos-title{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(2rem,4.6vw,3.25rem);line-height:1.12;text-align:center;color:var(--ink);margin:0 auto 40px;letter-spacing:-.03em;max-width:18ch} .cosmos-collage-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;max-width:var(--maxw-mid);margin:0 auto} .cosmos-collage-flip{perspective:1400px;-webkit-perspective:1400px} .cosmos-card{border-radius:40px;corner-shape:squircle;overflow:hidden;position:relative} .cosmos-card-tall{aspect-ratio:15/17} /* era 3/4; 15% mais baixo */ .cosmos-card-flip{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;overflow:visible;isolation:isolate} .cosmos-card-flip .cosmos-card-inner{position:relative;width:100%;height:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.22,1,.36,1);will-change:transform;transform:translate3d(0,0,0)} .cosmos-card-flip.is-flipped .cosmos-card-inner{transform:translate3d(0,0,0) rotateY(180deg);-webkit-transform:translate3d(0,0,0) rotateY(180deg)} .cosmos-card-face{position:absolute;inset:0;border-radius:40px;corner-shape:squircle;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)} .cosmos-card-front img,.cosmos-card-front video{width:100%;height:100%;object-fit:cover;display:block} /* título na frente, sobre o vídeo — scrim na base garante legibilidade do texto branco */ .cosmos-front-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;padding:clamp(20px,2.6vw,30px);background:linear-gradient(180deg,transparent,rgba(8,14,13,.5) 52%,rgba(8,14,13,.84))} .cosmos-front-cap h3{color:#fff;font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.12;letter-spacing:-.02em;text-shadow:0 2px 16px rgba(0,0,0,.55)} /* cópia do .cosmos-feat pro mobile: mesma lista do verso, mas sobre o vídeo (ver L407) — escondida no desktop, onde o verso segue revelado só pelo flip */ .cosmos-front-cap .cosmos-feat{list-style:none;margin:12px 0 0;padding:0;display:none;flex-direction:column;gap:9px} .cosmos-front-cap .cosmos-feat li{font-family:'Nunito',sans-serif;font-size:.98rem;line-height:1.32;display:flex;gap:10px;align-items:flex-start;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.5)} .cosmos-front-cap .cosmos-feat .ic{flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.24);display:grid;place-items:center;margin-top:1px} .cosmos-front-cap .cosmos-feat .ic svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .cosmos-front-cap .cosmos-feat strong{font-weight:800} /* cópia do selo pro mobile, onde o verso (dono do selo original) fica oculto */ .cosmos-card-front .vet-seal{display:none;position:absolute;top:18px;right:18px;z-index:3;align-items:center;gap:7px;background:#fff;border-radius:999px;padding:7px 13px 7px 10px;box-shadow:0 10px 24px -12px rgba(8,6,22,.5)} .cosmos-card-front .vet-seal svg{width:18px;height:18px;fill:none;stroke:var(--teal-strong);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .cosmos-card-front .vet-seal .lbl{font-family:'Poppins',sans-serif;font-weight:700;font-size:.8rem;color:var(--ink)} .cosmos-card-back{transform:translate3d(0,0,0) rotateY(180deg);-webkit-transform:translate3d(0,0,0) rotateY(180deg);background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 30%,rgba(8,6,22,.20)),linear-gradient(146deg,var(--teal),#9655EF 96%);color:#fff;padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;justify-content:flex-end;gap:10px} .cosmos-card-back .cosmos-feat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} .cosmos-card-back .cosmos-feat li{font-family:'Nunito',sans-serif;font-size:1.1rem;line-height:1.34;opacity:.97;display:flex;gap:11px;align-items:flex-start} .cosmos-card-back .cosmos-feat .ic{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;margin-top:2px} .cosmos-card-back .cosmos-feat .ic svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .cosmos-card-back .cosmos-feat strong{font-weight:800;opacity:1} .cosmos-card-back .vet-seal{position:absolute;top:22px;right:22px;z-index:3;display:inline-flex;align-items:center;gap:7px;background:#fff;border-radius:999px;padding:7px 13px 7px 10px;box-shadow:0 10px 24px -12px rgba(8,6,22,.5)} .cosmos-card-back .vet-seal svg{width:18px;height:18px;fill:none;stroke:var(--teal-strong);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .cosmos-card-back .vet-seal .lbl{font-family:'Poppins',sans-serif;font-weight:700;font-size:.8rem;color:var(--ink)} /* mobile (revisão 09/07): SEM flip — cada card mostra só o vídeo (frente); o verso (bloco sólido com a lista) fica oculto e a MESMA lista reaparece como overlay transparente dentro do .cosmos-front-cap, abaixo do título, direto sobre o vídeo — sem bloco/faixa separada. */ @media(max-width:768px){ .cosmos-flip-outer{height:auto;overflow:visible} .cosmos-flip-sticky{position:static;height:auto;display:block;padding:44px 0;overflow:visible} .cosmos-title{width:100%;max-width:none;margin:0 0 24px;padding:0 22px} /* largura fluida: a margem lateral vem dos 22px do .wrap, e o gap iguala esse valor */ .cosmos-collage-3col{display:flex;flex-direction:column;gap:22px;max-width:420px} .cosmos-card-flip{box-shadow:0 16px 40px -18px rgba(20,33,31,.4)} .cosmos-card-flip.cosmos-card-tall{aspect-ratio:auto;height:auto} .cosmos-card-flip .cosmos-card-inner{position:static;height:auto;transform:none;transition:none} .cosmos-card-flip.is-flipped .cosmos-card-inner{transform:none} .cosmos-card-flip .cosmos-card-face{position:relative;inset:auto;transform:none;transition:none;opacity:1} /* vídeo e legenda empilhados na MESMA célula do grid: o ::before é o piso de altura (proporção do vídeo) e a legenda pode passar dele quando o texto é longo, em vez de ser cortada. */ .cosmos-card-flip .cosmos-card-front{aspect-ratio:auto;border-radius:40px;corner-shape:squircle;display:grid;grid-template-columns:100%;position:relative} /* 151% = os 177,7% do vídeo vertical (9:16) menos 15%. Antes o ::before era só um piso e quem ditava a altura era o vídeo em tamanho natural; o vídeo sai do fluxo pra que o piso mande. */ .cosmos-card-flip .cosmos-card-front::before{content:'';grid-area:1/1;padding-top:151%} .cosmos-card-flip .cosmos-card-front video,.cosmos-card-flip .cosmos-card-front img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .cosmos-card-flip .cosmos-card-back{display:none} /* vira overlay — ver .cosmos-front-cap .cosmos-feat acima */ /* scrim alto e progressivo: cobre título+bullets sem virar faixa chapada */ .cosmos-front-cap{grid-area:1/1;position:relative;align-self:end;padding:96px 18px 24px;background:linear-gradient(180deg,transparent,rgba(8,14,13,.34) 30%,rgba(8,14,13,.72) 56%,rgba(8,14,13,.9))} /* título do card ≈ tamanho do título da seção; bullets na maior fonte que ainda cabe em UMA linha no bullet mais longo (ver .cosmos-feat li abaixo) */ .cosmos-front-cap h3{font-size:clamp(1.7rem,7.4vw,2.1rem)} .cosmos-front-cap .cosmos-feat{display:flex;gap:11px;margin-top:14px} /* 100vw - 110px = largura útil do texto (margem do wrap + padding do cap + ícone + gap). Dividida por 16.2 = maior fonte em que o bullet mais longo ainda cabe em 1 linha. Teto de 1.3rem: acima de ~464px o card trava em 420px e não acompanha a viewport. */ .cosmos-front-cap .cosmos-feat li{font-size:clamp(.8rem,calc((100vw - 110px)/16.2),1.3rem);gap:10px} .cosmos-card-front .vet-seal{display:inline-flex} } @media (prefers-reduced-motion:reduce){ .cosmos-flip-outer{height:auto} .cosmos-flip-sticky{position:static;height:auto;padding:64px 0} .cosmos-card-flip .cosmos-card-inner{transition:none} #nav{transition:none} } /* ============ QUEM ESTÁ POR TRÁS / EQUIPE (block 5) — CSS inline na própria seção, escopado em #quemvalida ============ */ #quemvalida{min-height:100vh;min-height:100dvh;display:flex;align-items:center} /* preenche a tela cheia, desktop e mobile */ #quemvalida .qv-wrap{width:100%} @media(max-width:768px){#quemvalida{min-height:100lvh}} /* lvh (não dvh) pra não vazar a próxima seção quando a barra do Safari retrai */ /* ============ PROVA SOCIAL — ROTATIVA (1 destaque + 2 compactos · troca a cada 5s) ============ */ .psr-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.14fr .86fr;grid-auto-rows:1fr;gap:22px} .psr-card{position:relative;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 40px -22px rgba(20,33,31,.28);overflow:hidden;display:grid;grid-template-columns:0fr 1fr} .psr-card:first-child{grid-row:1/3} .psr-card.is-feat{grid-template-columns:.92fr 1.08fr} .psr-photo{position:relative;min-width:0;overflow:hidden;opacity:0;transition:opacity .5s var(--ease) .12s} .psr-card.is-feat .psr-photo{opacity:1} .psr-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .psr-body{padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;min-width:0} .ps-quote{font-family:'Poppins',sans-serif;font-weight:600;color:var(--ink);margin:0;font-size:1.02rem;line-height:1.5;transition:font-size .9s var(--ease)} .psr-card.is-feat .ps-quote{font-size:clamp(1.15rem,1.7vw,1.38rem);line-height:1.44;font-weight:700} .ps-quote::before{content:"\201C";display:block;font-size:2.2em;line-height:.55;color:var(--teal);margin-bottom:.16em;font-weight:800} .ps-quote em{font-style:normal;color:var(--purple-strong)} .ps-who{margin-top:auto;padding-top:16px;display:flex;align-items:center;gap:12px} .ps-av{flex:0 0 44px;width:44px;height:44px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px #fff,0 6px 16px -6px rgba(20,33,31,.4)} .ps-av img{width:100%;height:100%;object-fit:cover} .ps-id{min-width:0} .ps-id b{display:block;font-family:'Poppins';font-weight:700;font-size:.96rem;color:var(--ink);line-height:1.25} .ps-id small{display:block;color:var(--ink-3);font-size:.8rem;line-height:1.35} .ps-stars{margin-left:auto;color:var(--gold);letter-spacing:2px;font-size:.9rem;white-space:nowrap} [data-theme="dark"] .ps-stars{color:#C89526} /* --gold (#9A6A00) só dá ~3.9:1 sobre o card escuro; clareia p/ ~6.9:1 (WCAG 1.4.3) */ /* modo rotativo (desktop + motion ok): cards absolutos, JS posiciona; a transição faz o vai-e-vem */ .psr-grid.psr-on{display:block;height:clamp(430px,44vw,500px);position:relative} .psr-grid.psr-on .psr-card{position:absolute;margin:0;transition:top .95s var(--ease),left .95s var(--ease),width .95s var(--ease),height .95s var(--ease),grid-template-columns .95s var(--ease),box-shadow .4s var(--ease)} .psr-grid.psr-on .psr-card.is-feat{z-index:2;box-shadow:0 26px 64px -28px rgba(20,33,31,.4)} .psr-grid.psr-on.psr-fast .psr-card{transition-duration:.55s} @media(max-width:900px){ /* MOBILE (correção 06/07): 1 depoimento GRANDE em cima (largura cheia) + 2 MENORES lado a lado embaixo. grid-auto-rows:auto + sem altura fixa = o texto NUNCA corta (os cards crescem pra caber). */ .psr-grid{grid-template-columns:1fr 1fr;max-width:560px;grid-auto-rows:auto;gap:14px} .psr-card{display:flex;flex-direction:column} .psr-card:first-child{grid-row:auto;grid-column:1 / -1} /* sem foto grande em nenhum card no mobile (nem no destaque) — só avatar do rodapé em todos */ .psr-photo{display:none} /* tipografia: destaque no grande; compacta e legível nos 2 pequenos */ .psr-card:first-child .ps-quote{font-size:1.16rem;line-height:1.42;font-weight:700} .psr-card:not(:first-child) .ps-quote{font-size:.92rem;line-height:1.46;font-weight:600} .psr-card:not(:first-child) .ps-quote::before{font-size:1.8em} /* rodapé dos pequenos: estrelas quebram pra própria linha quando aperta, sem espremer o nome */ .psr-card:not(:first-child) .ps-who{flex-wrap:wrap;gap:8px 10px} .psr-card:not(:first-child) .ps-stars{margin-left:0} } /* ============ PROVA SOCIAL — CARROSSEL MOBILE (swipe nativo + auto 5s + dots) ============ */ /* Escopo: só liga quando o JS adiciona .psr-swipe (≤900px). Sem JS, vale o empilhado atual. */ .psr-dots{display:none} /* dots nunca aparecem fora do modo carrossel (ex.: resize p/ desktop) */ @media(max-width:900px){ /* trilho: 1 card por vez, snap obrigatório, sliver do próximo card como convite ao swipe */ .psr-grid.psr-swipe{ display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; padding:4px 24px 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .psr-grid.psr-swipe::-webkit-scrollbar{display:none} .psr-grid.psr-swipe:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:12px} .psr-grid.psr-swipe .psr-card{ flex:0 0 100%; display:flex;flex-direction:column; scroll-snap-align:center; scroll-snap-stop:always; /* um card por gesto, sem pular dois */ } /* fotos de volta em TODOS os cards: faixa 16/10 no topo (reusa as object-position inline) */ .psr-grid.psr-swipe .psr-card .psr-photo{ display:block;position:relative;opacity:1; aspect-ratio:16/10;flex:0 0 auto;transition:none; } .psr-grid.psr-swipe .psr-body{flex:1 1 auto} /* quote uniforme no carrossel (neutraliza o destaque .is-feat, que é coisa da rotativa desktop) */ .psr-grid.psr-swipe .psr-card .ps-quote{font-size:1.05rem;line-height:1.5;font-weight:600} /* dots — discretos, cores do DS, alvo de toque generoso via padding */ .psr-dots{display:flex;justify-content:center;gap:6px;margin-top:14px} .psr-dot{ appearance:none;-webkit-appearance:none;border:0;background:none;margin:0; min-width:44px;min-height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation; } .psr-dot::before{ content:"";display:block;width:8px;height:8px;border-radius:999px; background:var(--line-2); transition:width .45s var(--ease),background-color .45s var(--ease); } .psr-dot.is-on::before{width:22px;background:var(--teal)} .psr-dot:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:999px} } /* reduced-motion: swipe manual com snap continua; morrem só as transições decorativas (o auto-avanço e o smooth-scroll já são desligados no JS) */ @media(max-width:900px) and (prefers-reduced-motion:reduce){ .psr-dot::before{transition:none} } /* ============ OFERTA — BETA PASS (ticket de acesso antecipado) ============ */ .offer{position:relative;overflow:hidden;padding:96px 0; min-height:100vh;min-height:100dvh;display:flex;align-items:center} /* preenche a tela cheia, desktop e mobile · background vem do override BG12 (radial noturno) mais abaixo */ .offer .wrap{position:relative;z-index:1;width:100%} .offer h2 em{font-style:normal;color:var(--teal-strong)} .offer-grid{display:grid;grid-template-columns:.98fr 1.02fr;gap:clamp(28px,4vw,56px);max-width:1020px;margin:0 auto;align-items:center} /* o ticket */ /* TODO(perf): blur(22px) + box-shadow de 100px de spread + will-change:transform (tilt no mousemove desktop, L941 do JS) é a combinação mais pesada do arquivo — cada rAF do tilt recompõe o blur inteiro. Em telas de entrada, considerar blur(10–12px) ou baixar o raio do shadow; no mobile não há tilt (só backdrop-filter estático), então o custo ali é bem menor. */ .pass{position:relative;border-radius:22px;background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.65);-webkit-backdrop-filter:saturate(165%) blur(22px);backdrop-filter:saturate(165%) blur(22px);box-shadow:0 40px 100px -48px rgba(53,0,82,.35);padding:clamp(26px,3vw,38px);isolation:isolate;will-change:transform;transition:transform .25s ease-out} .pass::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--glass-sheen);pointer-events:none;z-index:-1} .pass-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .pass-tag{font-family:'Poppins';font-weight:700;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--purple-strong);background:var(--tint-purple);border:1px solid rgba(177,108,255,.3);padding:6px 12px;border-radius:999px;white-space:nowrap} .pass-price{margin:20px 0 4px;font-family:'Poppins';font-weight:800;font-size:clamp(3rem,6.4vw,3.9rem);letter-spacing:-.03em;line-height:.94;color:var(--ink)} .pass-price small{display:block;font-size:.9rem;font-weight:600;color:var(--teal-strong);letter-spacing:0;margin-top:8px} .pass-incl{display:grid;gap:11px;margin-top:20px} .pass-incl li{display:flex;gap:11px;align-items:flex-start;color:var(--ink-2);font-size:.98rem} .pass-incl li::before{content:"";flex:0 0 20px;width:20px;height:20px;margin-top:2px;border-radius:50%;background:rgba(1,188,181,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007D78' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat} .pass-perf{margin:24px 0;border-top:2px dashed var(--line-2)} .pass-bonus{border-radius:var(--r-md);padding:16px 18px;background:linear-gradient(140deg,rgba(1,188,181,.1),rgba(177,108,255,.1));border:1px solid rgba(1,188,181,.35)} .pass-bonus-tag{display:inline-block;font-family:'Poppins';font-weight:800;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--teal-strong);padding:5px 11px;border-radius:999px} .pass-bonus p{margin:10px 0 0;color:var(--ink);font-size:.95rem;font-weight:600;line-height:1.5} .pass .btn{margin-top:22px} .pass-micro{margin:12px 0 0;text-align:center;color:var(--ink-3);font-size:.8rem} /* aside: por que grátis + planos futuros */ .offer-aside{display:flex;flex-direction:column} .offer-aside-h{font-family:'Poppins';font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px} .offer-why{color:var(--ink-2);font-size:1.05rem;line-height:1.65;max-width:44ch} .offer-why b{color:var(--teal-strong)} .offer-later{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)} .offer-eb{margin:16px 0 0;color:var(--ink-2);font-size:.92rem} .offer-eb b{color:var(--purple-strong)} .offer-disc{margin:44px auto 0;max-width:80ch;text-align:center;color:var(--ink-3);font-size:.72rem;line-height:1.45} @media(max-width:880px){.offer-grid{grid-template-columns:1fr;gap:36px;max-width:560px}} /* compactação mobile: aperta os respiros pra reduzir o quanto essa seção passa de 1 tela (o card + a coluna "por que grátis" são conteúdo real — não dá pra cortar sem mutilar) */ @media(max-width:768px){ .offer{min-height:100lvh} /* lvh pra não vazar a próxima seção quando a barra do Safari retrai */ .offer.sec{padding:44px 0} /* era 96px: respiro que empurrava o botão p/ baixo da dobra. .offer.sec (2 classes) p/ vencer o .sec{padding:64px} do mobile */ .offer .sec-head{margin-bottom:18px} /* manchete + lead mais coladas no card */ .offer-grid{gap:26px} .pass{padding:20px 22px} .pass-price{margin:8px 0 4px} .pass-incl{margin-top:12px;gap:8px} .pass-perf{margin:14px 0} .pass-bonus{padding:12px 14px} .pass .btn{margin-top:16px} /* puxa o CTA principal pra dentro da 1ª tela */ .offer-later{margin-top:22px;padding-top:20px} .offer-disc{margin-top:32px} } /* ---- TESTE BG12: oferta em noturno "campo de estrelas" (overrides escuros da seção) ---- */ .offer{background:radial-gradient(120% 100% at 50% 0%,#1D0F30 0%,#170B26 60%)} .offer-stars{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none} .offer h2{color:#fff} .offer h2 em{color:#4BE3D8} .offer .lead{color:#A79ABF} .pass{background:rgba(52,34,82,.4);border-color:rgba(255,255,255,.16);-webkit-backdrop-filter:saturate(140%) blur(1px);backdrop-filter:saturate(140%) blur(1px);box-shadow:0 40px 100px -48px rgba(0,0,0,.85)} .pass::before{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 40%)} .pass-tag{color:#D9B6FF;background:rgba(177,108,255,.14);border-color:rgba(177,108,255,.42)} .pass-price{color:#fff} .pass-price small{color:#4BE3D8} .pass-incl li{color:#E9E3F3} .pass-incl li::before{background:rgba(75,227,216,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234BE3D8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat} .pass-perf{border-top-color:rgba(255,255,255,.18)} .pass-bonus{background:linear-gradient(140deg,rgba(1,188,181,.14),rgba(177,108,255,.14));border-color:rgba(75,227,216,.35)} .pass-bonus p{color:#F1EAFB} .pass-micro{color:#A79ABF} .offer-aside-h{color:#A79ABF} .offer-why{color:#DDD5EA} .offer-why b{color:#4BE3D8} .offer-later{border-top-color:rgba(255,255,255,.14)} .offer-eb{color:#DDD5EA} .offer-eb b{color:#D9B6FF} .offer-disc{color:#8E82A3} /* ============ FAQ ============ */ .faq-wrap{max-width:780px;margin:0 auto} .faq-item{border-bottom:1px solid var(--line)} .faq-q{width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:24px 4px;font-family:'Poppins';font-weight:600;font-size:1.12rem;color:var(--ink)} .faq-q .pm{flex:0 0 26px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;position:relative;transition:background .25s,border-color .25s} .faq-q[aria-expanded="true"] .pm{background:var(--purple);border-color:var(--purple)} .faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;background:var(--ink-2);width:11px;height:2px;border-radius:2px;transition:transform .25s,background .25s} .faq-q[aria-expanded="true"] .pm::before,.faq-q[aria-expanded="true"] .pm::after{background:#fff} .faq-q .pm::after{transform:rotate(90deg)} .faq-q[aria-expanded="true"] .pm::after{transform:rotate(0)} .faq-a{overflow:hidden;max-height:0;visibility:hidden;transition:max-height .35s var(--ease),visibility 0s linear .35s} .faq-q[aria-expanded="true"] + .faq-a{visibility:visible;transition:max-height .35s var(--ease),visibility 0s} .faq-a-in{padding:0 4px 26px;color:var(--ink-2);font-size:1.02rem} .faq-a-in strong{color:var(--ink)} .faq-a-in a{color:var(--teal-strong);text-decoration:underline} @media (prefers-reduced-motion:reduce){.faq-a,.faq-q[aria-expanded="true"] + .faq-a{transition:none}} /* ============ WAITLIST (block 10) ============ */ .wl{position:relative;overflow:hidden;min-height:100vh;min-height:100dvh;display:flex;align-items:center;padding:116px 0 32px;background:#0b1212;scroll-margin-top:-100px} .wl-bg{position:absolute;inset:0;z-index:0} .wl-bg video{width:100%;height:100%;object-fit:cover;display:block} .wl-stage{position:relative;z-index:1;width:100%;max-width:var(--maxw-mid);margin:0 auto;padding:0 22px;display:flex;justify-content:flex-start} /* TODO(perf): mesmo custo do .pass (blur 22px + shadow grande) sobre vídeo de fundo rodando — dois layers pesados compondo ao mesmo tempo na seção final. Candidato a blur mais raso se o waitlist travar em devices fracos. */ .wl-card{width:min(560px,100%);margin:0;text-align:center;padding:clamp(26px,3vw,40px);border-radius:var(--r-lg);isolation:isolate;transform-origin:center top; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.42); -webkit-backdrop-filter:saturate(165%) blur(22px);backdrop-filter:saturate(165%) blur(22px);box-shadow:0 40px 100px -40px rgba(0,0,0,.55)} /* mobile: o capítulo final vira UMA tela — card compacto, sem scroll interno (fitWlCard cobre o resto) */ @media(max-width:860px){.wl{min-height:100svh;display:flex;align-items:center;padding:92px 0 26px}} @media(max-width:560px){ .wl-mascot{width:62px;height:62px;margin-bottom:0} .wl-card{padding:20px 18px 18px} .dl-sub{margin-top:10px;font-size:.92rem} .dl-stores{margin-top:16px;gap:10px} .dl-stores .store-badge img{height:46px} .dl-or{margin-top:16px;font-size:.72rem} .dl-news-h{font-size:.86rem} .dl-news{margin-top:12px} .wl-form{margin-top:13px;gap:10px} .wl-form .wl-email-field label{font-size:.92rem;margin-bottom:6px} .wl-form .wl-email-field input{padding:13px 16px;font-size:1rem} .wl-guar{margin-top:11px;font-size:.75rem} /* com zoom<1 no card, compensa a fonte dos campos — efetiva nunca <16px (senão o iOS dá zoom no focus) */ .wl-card .wl-form .wl-email-field input,.wl-card .field input,.wl-card .field select{font-size:calc(1rem / var(--wlz, 1))} } .wl-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--glass-sheen);pointer-events:none;z-index:-1} .wl-mascot{width:96px;height:96px;margin:0 auto 6px;animation:float 6s ease-in-out infinite} .wl-mascot svg,.wl-mascot canvas{width:100%!important;height:100%!important;display:block} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @media (prefers-reduced-motion:reduce){.wl-mascot{animation:none}} .wl-card h2{font-size:clamp(1.9rem,4.4vw,2.8rem)} .wl-card h2 em{font-style:normal;color:var(--purple-strong);white-space:nowrap} /* impede o "É"/"It's" de ficar órfão na linha de cima */ .wl-card .lead{margin:16px auto 0;text-align:center;color:var(--ink);font-weight:600} /* ---- Seção de download: badges das duas lojas, QR pra quem está no desktop, newsletter ---- */ .dl-sub{margin:14px auto 0;max-width:440px;color:var(--ink-2);font-weight:600;font-size:1.02rem;text-wrap:balance} .dl-stores{margin-top:24px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .dl-stores .store-badge{display:inline-flex;border-radius:10px;transition:transform .2s var(--ease)} .dl-stores .store-badge:hover{transform:translateY(-2px)} .dl-stores .store-badge img{display:block;height:52px;width:auto} /* o QR só serve a quem está no desktop — no celular ninguém aponta a câmera pra própria tela */ .dl-qr{display:none} .dl-or{display:flex;align-items:center;gap:14px;margin:26px auto 0;max-width:440px;color:var(--ink-3);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em} .dl-or::before,.dl-or::after{content:"";flex:1;height:1px;background:var(--line-2)} .dl-news{margin-top:18px} .dl-news-h{margin:0;color:var(--ink-2);font-size:.94rem;font-weight:600;text-align:center;text-wrap:balance} @media (min-width:769px){ .dl-qr{display:flex;align-items:center;gap:16px;margin:26px auto 0;max-width:440px;text-align:left; padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--glass-dim); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} /* fundo claro fixo atrás do QR: leitor de código precisa de contraste, inclusive no tema escuro */ .dl-qr-frame{flex:0 0 auto;display:grid;place-items:center;width:104px;height:104px;padding:8px; border-radius:12px;background:#fff;box-shadow:var(--shadow-sm)} .dl-qr-frame img{display:block;width:100%;height:100%} .dl-qr-tx{margin:0;display:grid;gap:3px} .dl-qr-tx b{font-family:'Poppins';font-size:.95rem;color:var(--ink)} .dl-qr-tx span{font-size:.88rem;line-height:1.45;color:var(--ink-2)} } /* simple email-first form (email obrigatório = mesma fricção do hero; resto opcional) */ .wl-form{margin-top:26px;display:grid;gap:16px;text-align:left} /* campo de e-mail final: cheio, branco, borda nítida, label forte (vence o .field genérico) */ .wl-form .wl-email-field label{display:block;font-family:'Poppins';font-size:1.06rem;color:var(--ink);font-weight:800;margin-bottom:9px} .wl-form .wl-email-field input{width:100%;padding:17px 20px;border-radius:var(--r-md);font-size:1.12rem;background:#fff;border:2px solid var(--line-2);box-shadow:inset 0 1px 2px rgba(20,33,31,.06);color:var(--ink);transition:border-color .2s,box-shadow .2s,background .2s} .wl-form .wl-email-field input::placeholder{color:var(--ink-3)} .wl-form .wl-email-field input:focus{outline:none;border-color:var(--purple);background:#fff;box-shadow:0 0 0 4px rgba(177,108,255,.18)} .field label{display:block;font-size:.82rem;font-weight:700;color:var(--ink-2);margin-bottom:7px;font-family:'Poppins'} .field input,.field select{width:100%;padding:14px 16px;border-radius:var(--r-sm);background:rgba(255,255,255,.66);border:1px solid var(--glass-bd-2);color:var(--ink);font:inherit;font-size:1rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:border-color .2s,background .2s,box-shadow .2s} .field input::placeholder{color:var(--ink-3)} .field input:focus,.field select:focus{border-color:var(--purple);background:#fff;outline:none;box-shadow:0 0 0 3px rgba(177,108,255,.15)} .field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346524F' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:42px} .wl-guar{margin-top:18px;color:var(--ink-2);font-size:.85rem} .wl-guar b{color:var(--ink)} .wl-success{display:none;position:relative;text-align:center;animation:pop .4s var(--ease)} .wl-success.show{display:block} .wl-back{position:absolute;top:-6px;left:-6px;width:44px;height:44px;display:grid;place-items:center; border:none;background:transparent;color:var(--ink);border-radius:50%;cursor:pointer; transition:background .2s var(--ease)} .wl-back svg{width:24px;height:24px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round} @media (hover:hover){.wl-back:hover{background:rgba(20,33,31,.08)}} [data-theme="dark"] .wl-back{color:#F5F1FA} [data-theme="dark"] .wl-back:hover{background:rgba(255,255,255,.12)} @keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.wl-success{animation:none}} .wl-success .pw{font-size:3rem;line-height:1} .wl-success h3{font-size:1.7rem;margin:14px 0 8px} .wl-success p{color:var(--ink-2)} .wl-share{margin-top:22px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .wl-share-note{margin-top:14px;color:var(--ink-3);font-size:.85rem} /* ---- Próximo passo: PetMatch (mockup torto, clicável) na tela de sucesso ---- */ .wl-next{display:flex;align-items:center;justify-content:center;gap:16px; margin-top:22px;padding-top:20px;border-top:1px solid rgba(20,33,31,.12); text-align:left;text-decoration:none;color:inherit;border-radius:16px} .wl-next-copy{display:flex;flex-direction:column;gap:4px;max-width:220px} .wl-next-kicker{font-size:.8rem;font-weight:600;color:var(--ink-3)} .wl-next-h{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.06rem;line-height:1.22;color:var(--ink)} .wl-next-go{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-weight:700;font-size:.9rem;color:var(--purple-strong)} .wl-next-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)} .wl-phone{flex:0 0 auto;width:112px;padding:5px;border-radius:20px;background:#0f1512; box-shadow:0 20px 36px -16px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.09); transform:rotate(-5deg);transition:transform .3s var(--ease)} .wl-phone img{display:block;width:100%;height:auto;border-radius:15px} @media(hover:hover){ .wl-next:hover .wl-phone{transform:rotate(0) scale(1.045)} .wl-next:hover .wl-next-go svg{transform:translateX(3px)} } [data-theme="dark"] .wl-next{border-top-color:rgba(255,255,255,.16)} [data-theme="dark"] .wl-next-h{color:#F5F1FA} [data-theme="dark"] .wl-next-go{color:#C99BFF} @media(max-width:560px){ .wl-next{gap:13px;margin-top:16px;padding-top:15px} .wl-next-copy{max-width:none} .wl-next-h{font-size:.98rem} .wl-phone{width:96px} } @media(prefers-reduced-motion:reduce){ .wl-phone{transition:none} .wl-next:hover .wl-phone{transform:rotate(-5deg)} .wl-next-go svg{transition:none} } /* ============ FOOTER — réplica do oficial (escuro #1A1A1A) ============ */ .site-footer{background:#1A1A1A;color:#fff;position:relative;z-index:var(--z-footer);padding:0;margin-top:0} .footer-card{max-width:var(--maxw-wide);margin:0 auto;padding:64px 40px 24px} .footer-top{display:grid;grid-template-columns:1.3fr .9fr 1fr 1.1fr;gap:28px;padding-bottom:48px} .footer-brand{display:flex;flex-direction:column;gap:20px} .footer-logo{display:inline-block;line-height:0;margin-top:-28px} .footer-logo img{height:80px;width:auto;display:block;filter:brightness(0) invert(1)} .footer-tagline{font-family:'Nunito',sans-serif;font-size:15px;line-height:1.6;color:rgba(255,255,255,.65);margin:0;max-width:320px} .footer-badges{display:flex;flex-direction:column;gap:12px} .footer-badge{display:inline-flex;align-items:center;gap:8px;font-family:'Poppins',sans-serif;font-weight:500;font-size:14px;color:#fff} .footer-badge svg{color:var(--teal);flex-shrink:0;width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .footer-websummit{align-self:flex-start;display:inline-flex;align-items:center;margin-top:4px;padding:8px 16px;background:#fff;border-radius:12px;transition:transform .2s ease,box-shadow .2s ease} .footer-websummit:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.28)} .footer-websummit img{height:36px;width:auto;display:block} .footer-col h3{font-family:'Poppins',sans-serif;font-weight:500;font-size:16px;color:#fff;margin:0 0 18px} .footer-col a{display:block;font-family:'Poppins',sans-serif;font-weight:300;font-size:15px;line-height:1.7;color:rgba(255,255,255,.6);text-decoration:none;margin-bottom:12px;transition:color .15s ease;white-space:nowrap} .footer-col a:hover{color:var(--teal)} .footer-empresa-divider{height:1px;background:rgba(255,255,255,.08);margin:12px 0} .footer-company{font-family:'Poppins',sans-serif;font-size:13px;color:rgba(255,255,255,.85);margin:0 0 4px} .footer-company strong{font-weight:600} .footer-company-loc{font-family:'Poppins',sans-serif;font-size:13px;color:rgba(255,255,255,.55);margin:0 0 10px} .footer-company-mail{display:inline-block;color:var(--teal);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;font-size:14px;margin-bottom:6px} /* borda vermelha quando o JS marca o campo como aria-invalid="true" (validação de e-mail) */ .wl-form input[aria-invalid="true"],.field [aria-invalid="true"],.footer-subscribe input[aria-invalid="true"],.hero-form .em[aria-invalid="true"]{border-color:#C42B37} .footer-middle{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 0 32px;flex-wrap:wrap} .footer-stores{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .footer-store{display:inline-flex;align-items:center;transition:transform .2s var(--ease)} .footer-store img{height:40px;width:auto;display:block} .footer-store:hover{transform:translateY(-2px)} .footer-controls{display:flex;align-items:center;gap:10px} .foot-theme{width:38px;height:38px;border-radius:50%;display:inline-grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.85);transition:background .2s,border-color .2s} .foot-theme:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28)} .foot-theme svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .foot-lang{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.85);font-family:'Poppins',sans-serif;font-weight:600;font-size:.82rem;transition:background .2s,border-color .2s} .foot-lang:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28)} .foot-lang svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .footer-controls .lang-picker{position:relative} .lang-menu--up{top:auto;bottom:calc(100% + 8px);right:0} .footer-divider{height:1px;background:rgba(255,255,255,.08);margin-bottom:20px} .footer-bottom{display:flex;align-items:center;justify-content:flex-end;padding:0} .footer-copy{font-family:'Poppins',sans-serif;font-size:13px;color:#B0B0B0;margin:0;text-align:right} @media(max-width:1023px){.footer-top{grid-template-columns:repeat(3,1fr);gap:32px}.footer-brand{grid-column:1/-1}} @media(max-width:768px){ .footer-card{padding:48px 22px 24px} .footer-top{grid-template-columns:1fr;gap:28px;padding-bottom:32px} .footer-brand{align-items:center;text-align:center} .footer-brand .footer-logo{margin:0 auto -10px} .footer-tagline{text-align:center;margin-left:auto;margin-right:auto} .footer-badges{align-items:center} .footer-websummit{align-self:center} .footer-middle{flex-direction:column;align-items:center;gap:20px;padding-bottom:24px} .footer-stores{justify-content:center} .footer-controls{justify-content:center} .footer-bottom{justify-content:center} .footer-copy{text-align:center;font-size:12px} .footer-empresa-divider{display:none} .footer-col{text-align:center} /* alvos de toque ≥44px no mobile (padrão iOS / WCAG 2.5.8) */ .footer-col a{padding:10px 0;margin-bottom:0} .foot-theme{width:44px;height:44px} .foot-lang{height:44px} .lang-menu button{min-height:44px} } /* ============ COMERCIAL (filme institucional, click-to-play · VD02 editorial lado a lado, modo cinema) ============ */ /* escuro de propósito: separa a seção da equipe (clara) e emenda no ato escuro da oferta */ .ad-sec{padding:clamp(84px,10vw,120px) 0;background:#170B26;overflow-x:clip} /* clipa o translateX(44px) do .ad-card.reveal.rv-r antes do reveal → sem barra horizontal em 768/1024 */ .ad-grid{display:grid;grid-template-columns:.9fr 1.25fr;gap:clamp(28px,4vw,56px);align-items:center;max-width:1080px;margin:0 auto} .ad-title{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.22;letter-spacing:-.02em;color:#fff;margin:0 0 12px} .ad-title em{font-style:normal;color:var(--purple)} /* segunda metade do título ("vale os 43 segundos"): elemento próprio pra poder descer pra baixo do vídeo no mobile. Mesmo tamanho/peso do .ad-title, cor do que ele substituiu. */ .ad-kicker{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.22;letter-spacing:-.02em;color:var(--purple);margin:0} .ad-sub{color:#A79ABF;font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.35;margin:0 0 14px} .ad-card{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#000;box-shadow:0 44px 110px -44px rgba(0,0,0,.9);cursor:pointer} .ad-card video{width:100%;height:100%;object-fit:cover;display:block} .ad-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.32);display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease),background .3s,opacity .3s} .ad-card:hover .ad-play{background:rgba(255,255,255,.3);transform:translate(-50%,-50%) scale(1.08)} .ad-play svg{width:26px;height:26px;fill:#fff;margin-left:4px} .ad-duration{position:absolute;right:16px;bottom:16px;background:rgba(0,0,0,.55);color:#fff;font-family:'Poppins',sans-serif;font-weight:600;font-size:.78rem;padding:5px 11px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .3s} .ad-card.is-playing .ad-play,.ad-card.is-playing .ad-duration{opacity:0;pointer-events:none} /* MOBILE: título + subtítulo abrem a seção, o vídeo entra no meio e "vale os 43 segundos" fecha. display:contents promove os filhos de .ad-copy a itens do flex — é o que permite o vídeo se intercalar entre eles. A seção tem min-height:100lvh (L328) e o conteúdo é bem mais curto que isso, então ela centra na vertical em vez de empilhar no topo e deixar um vão embaixo. */ @media(max-width:768px){ .ad-sec{display:flex;align-items:center} /* padding fica no .sec{64px} padrão do mobile */ .ad-sec>.wrap{width:100%} /* align-items:stretch anula o :center herdado do grid — em flex column ele centraria cada bloco de texto no eixo horizontal. gap:0 porque cada degrau tem respiro próprio abaixo. */ .ad-grid{display:flex;flex-direction:column;align-items:stretch;gap:0} .ad-copy{display:contents} .ad-title{order:1;margin:0 0 10px} /* colado no subtítulo: são um bloco só */ .ad-sub{order:2;margin:0 0 26px} /* respiro maior antes do vídeo */ .ad-card{order:3} .ad-kicker{order:4;margin:24px 0 0} /* fecha a seção, simétrico ao respiro de cima */ } @media(max-width:560px){.ad-sec{padding:48px 0}} /* ============ REVEAL / PARALLAX ============ */ .js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .js .reveal.in{opacity:1;transform:none} .js .reveal[data-d="1"]{transition-delay:.08s} .js .reveal[data-d="2"]{transition-delay:.16s} .js .reveal[data-d="3"]{transition-delay:.24s} /* variantes direcionais: entram deslizando dos lados (o .in devolve ao lugar) */ .js .reveal.rv-l{transform:translateX(-44px)} .js .reveal.rv-r{transform:translateX(44px)} .js .reveal.rv-l.in,.js .reveal.rv-r.in{transform:none} @media (prefers-reduced-motion:reduce){.js .reveal{opacity:1!important;transform:none!important;transition:none}} /* ============ CONTADOR DA WAITLIST — anel do próximo marco (CT03 + anel do CT08 em claro) ============ */ /* fundo BG08: bokeh subindo (canvas) */ .ctr-sec{position:relative;overflow:hidden;padding:clamp(72px,9vw,110px) 0;background:linear-gradient(180deg,#FAFBFC,#F5F9FB)} .ctr-sec .wrap{position:relative;z-index:1} .ctr-bokeh{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none} .ctr{text-align:center} .ctr-ring{position:relative;width:250px;height:250px;margin:0 auto} .ctr-ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible} .ctr-ring .track{fill:none;stroke:var(--line);stroke-width:9} .ctr-ring .prog{fill:none;stroke:url(#gctr);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset 1.8s var(--ease);filter:drop-shadow(0 2px 10px rgba(177,108,255,.35))} .ctr-ring .tip{fill:#fff;filter:drop-shadow(0 1px 5px rgba(53,0,82,.45))} .ctr-ring .tip-halo{fill:none;stroke:rgba(1,188,181,.55);stroke-width:2;animation:ctrhalo 2.4s ease-out infinite} @keyframes ctrhalo{0%{opacity:.85;r:6}70%{opacity:0;r:16}100%{opacity:0;r:16}} .ctr-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .ctr-num{font-family:'Poppins',sans-serif;font-weight:800;font-size:54px;line-height:1;letter-spacing:-.02em;color:var(--teal-strong);font-variant-numeric:tabular-nums} .ctr-of{margin-top:4px;font-family:'Poppins',sans-serif;font-weight:600;font-size:13px;color:var(--ink-3)} .ctr-cap{margin:22px 0 0;font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(1.5rem,2.5vw,1.95rem);color:var(--ink)} .ctr-cap b{color:var(--purple-deep)} .ctr-micro{margin:12px 0 0;font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.35;color:var(--ink-3)} .ctr-micro strong{font-weight:700;color:var(--teal-strong)} @media (prefers-reduced-motion:reduce){.ctr-ring .prog{transition:none}.ctr-ring .tip-halo{animation:none;opacity:0}} /* ============ TÍTULOS UNIFICADOS (mesmo formato do bloco "dor-line") ============ */ /* Peso/tamanho/entrelinha/tracking iguais em todos os títulos de seção; cor, margens e sombra continuam vindo das regras de cada título (por contexto). */ .hero h1, .sec-head h2, .cosmos-title, .split-title{ font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(1.7rem,3.8vw,3.2rem); line-height:1.24; letter-spacing:-.02em; } /* mobile: título do hero MAIOR e mais forte. Vem DEPOIS da regra agrupada acima de propósito — ela (mesma especificidade, fonte posterior) estava anulando a regra mobile lá de cima e derrubando o título pra ~27px. Só ≤768px, então o desktop fica intacto. */ @media(max-width:768px){ /* Escala tipográfica do mobile, 3 degraus: hero 46,4px › títulos de seção 34,8px › título de card 28,9px. O degrau do meio é uma quarta justa (4:3) abaixo do hero e uma terça menor (~6:5) acima do card. Antes os títulos de seção caíam no piso de 1.7rem e empatavam com o card. .hero h1 (0,1,1) vence .split-title (0,1,0), então o hero fica protegido. */ .dor-line, .sec-head h2, .cosmos-title, .split-title, .wl-card h2, .wl-success h3, .ad-title, .ad-kicker, #quemvalida p.qv-lead, .ctr-cap{font-size:clamp(2rem,8.92vw,2.5rem);line-height:1.16} /* subtítulo da seção do contador: mesmo degrau do título de card (28,9px @390). A margem de 8px foi feita pro texto de 14,7px — nesse tamanho ele colava no título. */ .ctr-micro{font-size:clamp(1.7rem,7.4vw,2.1rem);line-height:1.3;margin-top:14px} .ad-sub{font-size:clamp(1.7rem,7.4vw,2.1rem);line-height:1.3} .offer .lead{display:none} /* o título "Grátis. Simples assim." já basta no mobile */ /* HERO FULL-BLEED: título grande (pref do Franz "hero maior") sobre o vídeo + respiros compactos. O conteúdo ancora na BASE (align-items:flex-end herdado da base) sobre o scrim → o vídeo enche o hero e não sobra vazio. padding-bottom respeita a safe-area pros selos não colarem na borda. */ .hero h1{font-size:clamp(2.9rem,11.5vw,4rem);font-weight:800;line-height:1.0;letter-spacing:-.03em;text-wrap:balance} .hero .sub{margin-top:10px} .hero-form{margin-top:14px} .hero-creds{margin-top:12px} .hero-inner{padding-bottom:max(40px,calc(env(safe-area-inset-bottom) + 22px))} } /* telas curtas (SE/mini, landscape ≤640): só reduz o título pra tudo caber ancorado na base — sem esconder selo (full-bleed + flex-end não deixa vazio, então cabe). Vem DEPOIS → vence a cascata. */ @media(max-width:768px) and (max-height:640px){ .hero h1{font-size:clamp(2.3rem,8.5vw,3rem)} /* os outros dois degraus descem junto com o hero, senão a escala colapsa (num SE o hero cairia pra 36,8px e empataria com os títulos de seção). Mesmas razões da escala acima: hero 36,8px › títulos 27,5px (quarta justa) › card 22,4px. */ .dor-line, .sec-head h2, .cosmos-title, .split-title, .wl-card h2, .wl-success h3, .ad-title, .ad-kicker, #quemvalida p.qv-lead, .ctr-cap{font-size:clamp(1.72rem,7vw,2rem)} .cosmos-front-cap h3, .ctr-micro, .ad-sub{font-size:clamp(1.4rem,5.9vw,1.7rem)} } /* ============ DARK MODE (opt-in via [data-theme="dark"]) ============ */ /* As seções já escuras (dor · filme · oferta · waitlist · footer) não mudam. Aqui invertemos os tokens neutros e damos superfícies dark próprias às seções claras (pilares · comparação · tutores · equipe · FAQ · contador). Marca (teal/roxo) NÃO é invertida globalmente — só onde é texto sobre fundo que ficou escuro. */ :root[data-theme="dark"]{ --bg:#0E0A14; /* base roxo-quase-preto, família do #170B26 */ --bg-2:#171021; /* card elevado */ --bg-3:#120C1B; /* alt / footer */ --ink:#F5F1FA; /* headings */ --ink-2:#C7BFD4; /* body (AA) */ --ink-3:#9A90AC; /* fine print (AA) */ --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.17); --tint-teal:rgba(1,188,181,.16); --tint-purple:rgba(177,108,255,.18); --shadow-sm:0 2px 8px rgba(0,0,0,.5); --shadow-md:0 18px 50px -28px rgba(0,0,0,.75); --shadow-lg:0 40px 90px -40px rgba(0,0,0,.85); --shadow-float:0 2px 4px rgba(0,0,0,.5),0 16px 34px -14px rgba(0,0,0,.6),0 40px 78px -36px rgba(0,0,0,.7); --shadow-pill:0 1px 2px rgba(0,0,0,.5),0 5px 14px -8px rgba(0,0,0,.6); --glass:rgba(28,20,42,.56); --glass-strong:rgba(28,20,42,.72); --glass-dim:rgba(18,12,27,.55); --glass-bd:rgba(255,255,255,.14); --glass-bd-2:rgba(255,255,255,.10); --glass-sheen:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 46%); --wash-cool:linear-gradient(180deg,#130D1E 0%,#0B0811 100%); } /* superfície de seção branca vira dark */ [data-theme="dark"] .bg-white{background:var(--bg-2)} /* NAV sobre seções (scrolled): pílula + logo + ctrl legíveis no escuro */ [data-theme="dark"] #nav.scrolled .nav-pill{background:rgba(28,20,42,.55)} [data-theme="dark"] #nav.scrolled .brand img{filter:brightness(0) invert(1)} [data-theme="dark"] #nav.scrolled .nav-ctrl{color:var(--ink);background:rgba(255,255,255,.06);border-color:var(--line-2)} [data-theme="dark"] #nav.scrolled .nav-ctrl:hover{background:rgba(255,255,255,.12);color:#C9A6FF} /* HERO form: pílula branca em ambos temas → texto sempre escuro */ [data-theme="dark"] .hero-form .em{color:#15211F} [data-theme="dark"] .hero-form .em::placeholder{color:#5E6A66} /* "seu / diferente" roxo dos títulos, sobre fundo agora escuro */ [data-theme="dark"] .hlp{color:#C9A6FF} /* PROVA SOCIAL: cards brancos → dark */ [data-theme="dark"] .psr-card{background:var(--bg-2);border-color:var(--line-2)} [data-theme="dark"] .ps-quote{color:var(--ink)} [data-theme="dark"] .ps-quote em{color:#C9A6FF} [data-theme="dark"] .ps-av{box-shadow:0 0 0 2px var(--bg-2),0 6px 16px -6px rgba(0,0,0,.6)} /* EQUIPE */ [data-theme="dark"] #quemvalida .qv-lead{color:var(--ink)} [data-theme="dark"] #quemvalida .qv-lead .qv-strong{color:var(--purple)} [data-theme="dark"] #quemvalida .qv-ph{background:var(--bg-3);box-shadow:0 0 0 3px var(--bg-2),var(--shadow-md)} [data-theme="dark"] #quemvalida .qv-nm{color:var(--ink)} [data-theme="dark"] #quemvalida .qv-ar{color:#C9A6FF} [data-theme="dark"] #quemvalida .qv-li{background:#fff;color:#171021;border-color:var(--bg-2)} /* selo "Veterinários (CRMV)" no verso do card: fica branco, texto precisa continuar escuro no dark */ [data-theme="dark"] .cosmos-card-back .vet-seal .lbl,[data-theme="dark"] .cosmos-card-front .vet-seal .lbl{color:#171021} /* FAQ */ [data-theme="dark"] .faq-a-in a{color:#5EE6DC} /* CONTADOR */ [data-theme="dark"] .ctr-sec{background:linear-gradient(180deg,#120C1B,#0B0811)} [data-theme="dark"] .ctr-num{color:#4BE3D8} [data-theme="dark"] .ctr-cap b{color:#C9A6FF} [data-theme="dark"] .ctr-micro strong{color:#4BE3D8} [data-theme="dark"] .ctr-ring .track{stroke:rgba(255,255,255,.12)} /* botão ghost (compartilhar) */ [data-theme="dark"] .btn-ghost{background:var(--bg-2);border-color:var(--line-2);color:var(--ink)} [data-theme="dark"] .btn-ghost:hover{background:var(--bg-3);border-color:var(--purple);color:#C9A6FF} /* WAITLIST: o vídeo de fundo é claro; no dark o card ganha superfície escura própria */ [data-theme="dark"] .wl-card{background:rgba(18,12,27,.62);border-color:rgba(255,255,255,.16)} [data-theme="dark"] .wl-card h2 em{color:#C9A6FF} [data-theme="dark"] .wl-card .lead,[data-theme="dark"] .wl-guar,[data-theme="dark"] .wl-guar b{color:var(--ink)} [data-theme="dark"] .dl-sub,[data-theme="dark"] .dl-news-h,[data-theme="dark"] .dl-qr-tx span{color:var(--ink-2)} [data-theme="dark"] .dl-qr-tx b{color:var(--ink)} [data-theme="dark"] .wl-form .wl-email-field label{color:var(--ink)} [data-theme="dark"] .wl-form .wl-email-field input{background:rgba(10,7,16,.6);border-color:var(--line-2);color:var(--ink)} [data-theme="dark"] .wl-form .wl-email-field input::placeholder{color:var(--ink-3)} [data-theme="dark"] .field label{color:var(--ink-2)} [data-theme="dark"] .field input,[data-theme="dark"] .field select{background:rgba(10,7,16,.5);color:var(--ink);border-color:var(--line-2)} [data-theme="dark"] .field input::placeholder{color:var(--ink-3)} [data-theme="dark"] .wl-success p{color:var(--ink-2)} /* ritmo vertical mais apertado no mobile (96px de respiro é medida de desktop) */ @media (max-width:768px){ .sec{padding:64px 0} .sec-head{margin-bottom:36px} } /* ============ MOBILE MOTION PASS (mesma vida do desktop, sem scroll-lock) ============ */ /* 1) Reveals calibrados pra tela pequena: distâncias menores, resposta mais rápida, delays encurtados (no mobile os blocos entram um a um — delay grande vira latência) */ @media (max-width:768px){ .js .reveal{transform:translateY(18px);transition-duration:.55s,.55s} .js .reveal.rv-l{transform:translateX(-24px)} .js .reveal.rv-r{transform:translateX(24px)} .js .reveal[data-d="1"]{transition-delay:.05s} .js .reveal[data-d="2"]{transition-delay:.1s} .js .reveal[data-d="3"]{transition-delay:.15s} /* stagger dos títulos: blur mais leve (barato em GPU fraca) e passo mais ágil */ .js .split-title .tw{filter:blur(3px);transition-duration:.45s,.45s,.45s} } /* 2) Pilares (sticky-stack ≤768px): o card coberto "afunda" — escala + véu guiados por --stack-p (0→1 = quanto o próximo card já cobriu este), setado via rAF no JS. O reveal do card vira só fade: transform pertence ao scroll (sem transição de .7s brigando). */ @media (max-width:768px){ /* TODO(perf): --stack-p é escrito a cada rAF de scroll (landing.js bloco B) e aqui alimenta scale() + opacity num card que também carrega box-shadow (L455/L460ish, .cosmos-card-flip) — scale() recalcula o box-shadow a cada frame junto com o layout sticky. Se serrilhar em devices fracos, mover o box-shadow pro ::before/wrapper (que não escala) em vez do próprio elemento animado. */ .js .cosmos-card-flip{transform-origin:50% 0;transform:scale(calc(1 - .05*var(--stack-p,0)))} .js .cosmos-card-flip.reveal{transition:opacity .55s var(--ease)} .js .cosmos-card-flip.reveal.in{transform:scale(calc(1 - .05*var(--stack-p,0)))} .cosmos-card-flip::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:#14211F;opacity:calc(.18*var(--stack-p,0))} } /* 3) Depoimentos (≤900px, rotativa desligada): o grid revela em cascata, card a card */ @media (max-width:900px){ .js #psrGrid.reveal{transform:none;transition:opacity .5s var(--ease)} .js #psrGrid.reveal .psr-card{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease)} .js #psrGrid.reveal.in .psr-card{opacity:1;transform:none} .js #psrGrid.reveal.in .psr-card:nth-child(2){transition-delay:.12s} .js #psrGrid.reveal.in .psr-card:nth-child(3){transition-delay:.24s} } /* 3-bis) Depoimentos CABEM numa tela no mobile: aperta respiros/tipografia sem trocar o layout (1 grande + 2 menores que o Franz aprovou). Alvo: iPhone 14 Pro Max; telas menores ainda rolam. */ @media (max-width:768px){ #tutores.sec{padding:40px 0} #tutores .sec-head{margin-bottom:20px} #tutores .psr-grid{gap:12px} #tutores .psr-body{padding:16px 18px} #tutores .psr-card:first-child .ps-quote{font-size:1.06rem;line-height:1.38} #tutores .psr-card:not(:first-child) .ps-quote{font-size:.85rem;line-height:1.4} #tutores .ps-who{padding-top:10px} #tutores .ps-quote::before{font-size:1.8em;margin-bottom:.08em} } /* 5) Guarda reduced-motion do passe inteiro: tudo visível, nada se move */ @media (prefers-reduced-motion:reduce){ .js .reveal{transition:none!important} .js .cosmos-card-flip,.js .cosmos-card-flip.reveal.in{transform:none!important} .cosmos-card-flip::after{opacity:0!important} .js #psrGrid.reveal .psr-card{opacity:1!important;transform:none!important;transition:none!important} } /* Equipe "Editorial + rostos" — portado do teste eq11, escopado e namespaced (qv-) p/ não colidir com a l11 */ #quemvalida .qv-wrap{max-width:1060px} #quemvalida .qv-lead{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(1.35rem,2.9vw,2.45rem);line-height:1.26;letter-spacing:-.02em;color:var(--ink);max-width:42ch;margin:0 auto;text-align:center} #quemvalida .qv-lead .w{opacity:.13;transition:opacity .22s linear} #quemvalida .qv-lead .w.on{opacity:1} html:not(.js) #quemvalida .qv-lead .w,#quemvalida.qv-static .qv-lead .w{opacity:1} /* purple-800, não o purple-500 de marca: sobre fundo claro o #B16CFF dá 2,6:1 e reprova até como texto grande (mín. 3:1). O dark mode inverte pro purple-500, que aí contrasta. */ #quemvalida .qv-lead .qv-strong{color:var(--purple-strong);font-weight:700} #quemvalida .qv-deck{margin-top:clamp(40px,5.4vw,64px);padding-top:clamp(30px,4vw,46px);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;column-gap:clamp(8px,1.4vw,16px);row-gap:clamp(22px,3vw,30px)} /* neutraliza o fade-up padrão do .reveal no deck (mesma técnica da gaveta) — deixa só a animação da pilha */ #quemvalida .qv-member{--av:clamp(72px,10.4vw,108px);width:var(--av);display:flex;flex-direction:column;align-items:center;position:relative;transition:margin-left .85s var(--ease),z-index 0s;transition-delay:calc(var(--i,0)*45ms)} /* colapsado: cada avatar (menos o 1º) recua e sobrepõe o anterior; abre na entrada da viewport (.deck.in) / hover / foco */ #quemvalida .qv-member + .qv-member{margin-left:calc(var(--av) * -0.62)} #quemvalida .qv-deck.in .qv-member + .qv-member, #quemvalida .qv-deck:hover .qv-member + .qv-member, #quemvalida .qv-deck:focus-within .qv-member + .qv-member{margin-left:0} #quemvalida .qv-ph{width:var(--av);height:var(--av);border-radius:50%;overflow:hidden;position:relative;background:var(--bg-2);box-shadow:0 0 0 3px var(--bg-2),var(--shadow-md);transition:box-shadow .4s var(--ease)} #quemvalida .qv-ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(.12) saturate(.97);transition:filter .5s var(--ease),transform .5s var(--ease)} #quemvalida .qv-lbl{margin-top:12px;text-align:center;display:flex;flex-direction:column;gap:2px;opacity:0;transform:translateY(-8px) scale(.96);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0)*45ms + .2s)} #quemvalida .qv-deck.in .qv-lbl, #quemvalida .qv-deck:hover .qv-lbl, #quemvalida .qv-deck:focus-within .qv-lbl{opacity:1;transform:none} /* nome com altura reservada (ancorado na base) p/ TODAS as áreas ficarem na mesma altura, com nomes de 1 ou 2 linhas */ #quemvalida .qv-nm{font-family:'Poppins';font-weight:600;font-size:14px;color:var(--ink);line-height:1.2;min-height:2.4em;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;overflow-wrap:break-word;word-break:break-word} #quemvalida .qv-ar{font-family:'Poppins';font-weight:600;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--purple-strong)} #quemvalida .qv-member:hover{z-index:6} #quemvalida .qv-member:hover .qv-ph img,#quemvalida .qv-member:focus-within .qv-ph img{filter:none;transform:scale(1.05)} #quemvalida .qv-member:hover .qv-ph{box-shadow:0 0 0 3px var(--bg-2),0 0 0 5px var(--teal),var(--shadow-md)} /* link único e discreto: LinkedIn do fundador, no hover/foco */ #quemvalida .qv-li{position:absolute;right:-3px;bottom:-3px;width:26px;height:26px;border-radius:50%;background:var(--ink);border:2.5px solid var(--bg-2);color:#fff;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity .25s var(--ease),transform .25s var(--ease)} #quemvalida .qv-member:hover .qv-li,#quemvalida .qv-li:focus-visible{opacity:1;transform:none} #quemvalida .qv-li svg{width:12px;height:12px} /* guard no-JS: sem JS o .qv-deck.in nunca liga → as bolinhas do mobile ficariam invisíveis (opacity:0 na L≤560) */ html:not(.js) #quemvalida .qv-ph{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ #quemvalida .qv-lead .w{opacity:1!important} #quemvalida .qv-member,#quemvalida .qv-lbl,#quemvalida .qv-ph,#quemvalida .qv-ph img,#quemvalida .qv-li{transition:none!important} #quemvalida .qv-ph{opacity:1!important;transform:none!important} /* NO-OP: bolinhas visíveis com reduce-motion ligado */ } @media (max-width:560px){ #quemvalida .qv-deck{column-gap:clamp(6px,2vw,12px);row-gap:24px} /* largura fixa do membro força o nome a quebrar (sem width:auto, que estoura a viewport) */ /* 09/07: avatar +25% e tipografia legível (o rótulo estava em 11.5/9.5px) */ /* width derivada do deck (não da viewport): garante 3 por linha mesmo com o membro maior */ #quemvalida .qv-member{width:min(112px,calc((100% - 18px)/3));--av:clamp(68px,18.8vw,83px)} #quemvalida .qv-member + .qv-member,#quemvalida .qv-deck.in .qv-member + .qv-member{margin-left:0} #quemvalida .qv-nm{font-size:13px;min-height:3.6em} #quemvalida .qv-ar{font-size:11px;letter-spacing:.05em} /* entrada em cascata das bolinhas no mobile (substitui o "leque" do desktop, que aqui vira grade): fade + scale + leve subida, em stagger via --i; dispara no mesmo .qv-deck.in do reveal existente */ #quemvalida .qv-ph{opacity:0;transform:scale(.72) translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease),box-shadow .4s var(--ease);transition-delay:calc(var(--i,0)*70ms)} #quemvalida .qv-deck.in .qv-ph{opacity:1;transform:none} } /* ============ CTA FLUTUANTE — painel de vidro do BG20, conteúdo CTA07B ============ Painel: réplica do superior-direito do BG20 — 190 de largura, radius 18, rgba(255,255,255,.34) + blur(10), rotateY(22deg) rotateX(6deg). No original a projeção nasce da perspective-origin do PALCO (centro, 539×220), e o painel fica deslocado dele (+336, -98). Aqui o wrapper é do tamanho do painel, então a origem é recolocada em -241.2px / 158.4px pra recriar exatamente o mesmo ângulo. Não trocar por 50% 50%: isso reendireita o painel e muda o desenho. Conteúdo CTA07B: altura 120→100→77 (encolhida pra folga topo/base = folga esquerda, 13px, autorizada pelo Franz) e todo o conteúdo nos 152px da esquerda. O padding-right de 38px é a "zona morta" que sai da tela — é por isso que o `right` abaixo é calibrado pelo corte do conteúdo, não por uma fração do painel. */ #ctaOrb{ display:block; /* mobile + desktop; a visibilidade real é controlada por .is-on no JS */ position:fixed; z-index:40; /* acima do conteúdo (máx. 6), abaixo do drawer (49) e do nav (50) */ width:190px;height:77px; perspective:900px; perspective-origin:-241.2px 158.4px; bottom:calc(20px + env(safe-area-inset-bottom)); right:-47.6px; /* medido: corta em x=152 local — conteúdo inteiro dentro, zona morta fora */ pointer-events:none; opacity:0;visibility:hidden;transform:translateX(20px); transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s linear .45s; } #ctaOrb.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s} #ctaOrb .orb-pane{ position:absolute;left:0;top:0;width:190px;height:77px; border-radius:18px; background:rgba(255,255,255,.34); border:1px solid rgba(255,255,255,.7); box-shadow:0 30px 60px -30px rgba(20,33,31,.25); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); transform:rotateY(22deg) rotateX(6deg); animation:ctaOrbFloat 14s ease-in-out infinite alternate; pointer-events:auto; display:flex;align-items:center;gap:8px; padding:13px 38px 13px 13px; } #ctaOrb .orb-h{ font-family:'Poppins',sans-serif;font-weight:800;font-size:22px;line-height:1.08; letter-spacing:-.015em;white-space:nowrap; /* --ink já vira claro no tema escuro; .on-dark cobre o caso das seções escuras no tema claro */ color:var(--ink); transition:color .35s var(--ease); } #ctaOrb.on-dark .orb-h{color:#F5F1FA} #ctaOrb .orb-arr{ flex:none;width:45px;height:45px;border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--purple)); display:grid;place-items:center; box-shadow:0 6px 14px -6px rgba(143,6,205,.6); } #ctaOrb .orb-arr svg{width:19px;height:19px;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round} @keyframes ctaOrbFloat{from{margin-top:-10px}to{margin-top:12px}} @media (prefers-reduced-motion:reduce){ #ctaOrb{transition:opacity .01s,visibility 0s} #ctaOrb .orb-pane{animation:none} #ctaOrb .orb-h{transition:none} } /* ============ DESKTOP ≥769px — TÍTULOS UNIFORMES + CTA REPOSICIONADO (Franz, 2026-07-10) ============ */ @media(min-width:769px){ /* TÍTULOS UNIFORMES — mesmo tamanho/peso do "Pequenos cuidados." (.cosmos-title) */ .ad-title,.ctr-cap,#quemvalida .qv-lead{ font-weight:700; font-size:clamp(1.7rem,3.8vw,3.2rem); line-height:1.24; letter-spacing:-.02em; } /* CTA flutuante "Entre na lista": sobe pro meio da metade superior da tela (era colado embaixo) */ #ctaOrb{top:22vh;bottom:auto} } /* ============ DESKTOP CONFORTÁVEL — CORTINA EMPILHADA + TELA CHEIA (Franz, 2026-07-10) ============ O efeito que o Franz quer: cada seção sobe e fica POR CIMA da anterior — e isso só acontece quando a seção ANTERIOR está PARADA (grudada no topo). Então TODA seção precisa "prender": #dor e #pilares prendem via câmara scroll-driven nativa (que também revela o texto/os cards); as demais via position:sticky. Assim cada transição vira cortina. CSS puro, sem JS. GUARDAS: min-width:901px mantém o #dor em 2 colunas; min-height:700px liga o efeito na maioria dos desktops/laptops. Pra caber PARADAS já a partir de ~700px de altura, as 2 seções densas (oferta/faq) são compactadas SÓ neste modo (esconde o subtítulo da oferta — que já some no mobile —, aperta o disclaimer e o espaçamento das perguntas), sem tocar no card nem no conteúdo. Fora das guardas o layout rola normal (degradação graciosa). Mobile: scroll-snap próprio, não tocar. #dor NÃO é tocado aqui — usa a câmara nativa (is-locked no desktop). */ @media(min-width:901px) and (min-height:700px){ /* TELA CHEIA: seções-alvo ocupam a viewport, conteúdo centrado, padding enxuto. Se o conteúdo passar de 100vh (telas < guarda das densas), a seção cresce e rola (min-height, não height). */ #tutores,#comercial,#contador,#faq{min-height:100vh;display:flex;align-items:center;padding:22px 0 10px} #tutores>.wrap,#comercial>.wrap,#contador>.wrap,#faq>.wrap{width:100%} /* #oferta SAIU da cortina (planos v2, 2026-08-11): com 2 cards (Solo + Duo) a seção passa de 100vh em qualquer tela — sticky cortaria o rodapé dela. Rola normal; o #faq ainda cobre. */ /* compacta a seção densa pra caber parada a partir de ~700px de altura (só neste modo) */ #faq .faq-q{padding-top:17px;padding-bottom:17px} /* era 24px; aperta as 8 perguntas p/ caber */ #faq .faq-a-in{padding-bottom:18px} /* CORTINA EMPILHADA: cada seção grudada deixa a seguinte subir cobrindo (z-index:3 do .sheet-top + ordem do DOM garantem a cobertura). #dor e #pilares prendem via câmara própria. */ #tutores,#comercial,#quemvalida,#faq,#contador,#baixar{position:sticky;top:0} /* ÂNCORA/SNAP = TELA CHEIA: cada seção da cortina é 100vh e deve cobrir a tela toda quando ancorada (nav "Como funciona/Tutores/Oferta/Respostas" ou snap). O scroll-padding-top:100px global (L55) fazia elas aterrissarem 100px abaixo do topo, deixando aparecer uma fatia da seção anterior empilhada atrás. scroll-margin-top:-100px cancela esse padding só neste modo → top:0, sem fatia. Mesmo truque que o #waitlist já usa (L645). Fora da cortina fica intacto. */ #pilares,#tutores,#comercial,#quemvalida,#faq,#contador{scroll-margin-top:-100px} /* #dor e #pilares NÃO ficam grudados até o fim do body (soltam quando a câmara termina), então a seção seguinte precisa subir 1 tela ANTES pra cobri-los enquanto ainda estão parados no topo. margin-top:-100vh dá exatamente essa 1 tela de cortina sobre o fim da câmara anterior. */ #pilares{margin-top:-100vh} /* sobe cobrindo o #dor (câmara de revelação) parado */ #tutores{margin-top:-100vh} /* sobe cobrindo o #pilares (câmara de flip) parado */ } /* CTAs do hero pós-lançamento (86bbb6vh3): badge oficial da App Store + aviso de Android */ .hero-ctas{margin-top:28px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .hero-ctas .store-badge{display:inline-flex;border-radius:10px} .hero-ctas .store-badge img{display:block;height:52px;width:auto} /* Em tela de celular os dois badges a 52px somam ~345px e quebram em duas linhas, empurrando os selos (Web Summit / Coflint) pra fora da dobra. A 44px cabem lado a lado até 360px. */ @media(max-width:560px){ .hero-ctas{margin-top:20px;gap:10px} .hero-ctas .store-badge img{height:44px} } /* ============ PLANOS v2 — Solo (grátis) + Duo · design "Clean" (decidido 2026-08-11) ============ */ .plans-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(20px,2.6vw,36px);max-width:1000px;margin:0 auto;align-items:center} .plan{position:relative;display:flex;flex-direction:column;text-align:left} .plan-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap} .plan-name{font-family:'Poppins';font-weight:800;font-size:1.35rem;letter-spacing:-.01em;line-height:1;color:var(--ink)} /* medalhões de ícone: bolinha tint + texto em cor de corpo (remete a avatares tutor + pets) */ .plan-who{display:inline-flex;align-items:center;gap:16px} .who-item{display:inline-flex;align-items:center;gap:8px} .who-ic{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--tint-teal);display:grid;place-items:center;color:var(--teal-strong)} .who-ic svg{width:15px;height:15px;fill:currentColor} .who-t{font-family:'Poppins';font-weight:600;font-size:.85rem;color:var(--ink-2);white-space:nowrap} .plan-price{margin:18px 0 2px;font-family:'Poppins';font-weight:800;font-size:clamp(2.2rem,4.4vw,3rem);letter-spacing:-.03em;line-height:.96;color:var(--ink)} .plan-price .per{font-size:1.02rem;font-weight:600;letter-spacing:0;color:var(--ink-3);margin-left:2px} .plan-price small{display:block;font-size:.88rem;font-weight:600;letter-spacing:0;color:var(--teal-strong);margin-top:9px} .plan-plus-lite{margin:22px 0 0;font-family:'Poppins';font-weight:600;font-size:.92rem;color:var(--ink-2)} .plan-feats{display:grid;gap:13px;margin-top:16px} .plan-feats li{display:block;position:relative;padding-left:31px;color:var(--ink-2);font-size:.96rem;line-height:1.5} .plan-feats li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:rgba(1,188,181,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007D78' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat} .plan-feats li strong{color:var(--ink);font-weight:700} .plan-feats .was{color:var(--ink-3);font-size:.88em;text-decoration:line-through} .plan-feats .now{color:var(--ink);font-weight:800;font-size:1.05em} .plan-deal{display:inline-block;font-family:'Poppins';font-weight:700;font-size:.72rem;letter-spacing:.02em;background:var(--tint-teal);color:var(--teal-strong);padding:3px 9px;border-radius:999px;white-space:nowrap} .plan-sub{color:var(--ink-3);font-size:.86rem} /* lista com ícone por item (Duo V2) */ .plan-feats-ic li{display:flex;gap:12px;align-items:flex-start;padding-left:0} .plan-feats-ic li::before{display:none} .plan-feats-ic .fi{flex:0 0 20px;display:grid;place-items:center;margin-top:2px;color:var(--teal-strong)} .plan-feats-ic .fi svg{width:18px;height:18px} .plan-flag{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);z-index:2;font-family:'Poppins';font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--ink);background:var(--teal);padding:7px 16px;border-radius:999px;box-shadow:0 8px 22px -10px rgba(1,188,181,.6)} .plan-gift{display:flex;gap:13px;align-items:flex-start;margin-top:22px;border-radius:var(--r-md);padding:16px 18px;background:linear-gradient(140deg,rgba(1,188,181,.10),rgba(177,108,255,.12))} .plan-gift-ic{flex:0 0 34px;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--purple-deep);color:#fff;box-shadow:0 8px 20px -8px rgba(143,6,205,.6)} .plan-gift-ic svg{width:18px;height:18px} .plan-gift-tx b{display:block;font-family:'Poppins';font-weight:700;font-size:.92rem;color:var(--ink)} .plan-gift-tx p{margin:3px 0 0;font-size:.88rem;line-height:1.5;color:var(--ink-2)} .plan-cta{margin-top:auto;padding-top:20px} .plan-cta .btn{margin-top:0} .plan-cta .pass-micro{margin-top:11px} .plan-stores{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .plan-store{display:flex;justify-content:center;border-radius:10px;transition:transform .2s var(--ease)} .plan-store:hover{transform:translateY(-2px)} .plan-store img{height:40px;width:auto} .plan-price .pp{display:block} .plan-price .pp[hidden]{display:none} /* toggle de período — segmentado discreto dentro do card Duo (não compete com o CTA) */ .plan-toggle{display:inline-flex;align-self:flex-start;gap:2px;margin:16px 0 0;padding:3px;border-radius:999px;background:var(--bg-3)} .pt-opt{display:inline-flex;justify-content:center;font-family:'Poppins';font-weight:600;font-size:.76rem;color:var(--ink-3);padding:5px 13px;border-radius:999px;transition:background .2s,color .2s,box-shadow .2s} .pt-opt:hover{color:var(--ink)} .pt-opt.on{background:var(--bg-2);color:var(--ink);box-shadow:var(--shadow-pill)} /* faixa B2B (empresas) */ .plan-corp{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1000px;margin:clamp(22px,3vw,34px) auto 0;padding:18px 22px;border-radius:var(--r-md);background:var(--bg-2);border:1px solid var(--line);box-shadow:var(--shadow-sm)} .plan-corp .pc-tx{display:flex;flex-direction:column;gap:3px} .plan-corp .pc-tx b{font-family:'Poppins';font-weight:700;font-size:1rem;color:var(--ink)} .plan-corp .pc-tx span{color:var(--ink-2);font-size:.92rem} .plan-corp .btn{flex:0 0 auto} @media(max-width:720px){.plan-corp{flex-direction:column;align-items:flex-start}} /* above the fold: título + os 2 cards visíveis numa tela de desktop; yway/corp ficam abaixo */ @media(min-width:901px){ .plans-lite.sec{padding:20px 0 72px} .plans-lite .sec-head{margin-bottom:36px} /* respiro entre o subtítulo e o badge que sobressai do card Duo */ .plans-lite .sec-head h2{font-size:clamp(1.8rem,3.1vw,2.4rem)} .plans-lite .sec-head .lead{margin-top:10px} .plan-lite .plan-price{font-size:clamp(1.9rem,3.4vw,2.5rem)} } .yway{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px);max-width:1000px;margin:clamp(28px,4vw,44px) auto 0} .yway-card{border-radius:var(--r-md);padding:20px 22px} .yway-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;margin-bottom:12px;background:var(--tint-teal);color:var(--teal-strong)} .yway-ic svg{width:18px;height:18px} .yway-card b{display:block;font-family:'Poppins';font-weight:700;font-size:1rem;color:var(--ink);margin-bottom:6px} .yway-card p{font-size:.9rem;line-height:1.55;color:var(--ink-2)} @media(max-width:880px){ .plans-grid{grid-template-columns:1fr;max-width:540px;gap:34px} .yway{grid-template-columns:1fr;max-width:540px;gap:12px} .plan-flag{font-size:.62rem;padding:6px 14px} } @media(max-width:768px){ .plan-price{margin-top:12px} .yway-card{padding:16px 18px} } /* --- superfície clara da seção (tokens do site — dark-ready via [data-theme]) --- */ .plans-lite{background:radial-gradient(52% 44% at 10% 6%,rgba(1,188,181,.09),transparent 70%),radial-gradient(46% 42% at 90% 88%,rgba(177,108,255,.09),transparent 70%),var(--wash-cool)} .plans-lite .split-title em{font-style:normal;color:var(--teal-strong)} .plans-lite .pass-micro{color:var(--ink-3)} /* o BG12 pinta .pass-micro de lilás global — aqui é seção clara */ .plan-lite{border-radius:22px;background:var(--bg-2);border:1px solid var(--line);box-shadow:var(--shadow-float);padding:clamp(24px,2.8vw,34px)} .plan-lite.plan-feat{border:2px solid var(--teal);box-shadow:var(--shadow-float);padding:clamp(26px,3vw,36px) clamp(26px,3vw,36px) clamp(13px,1.5vw,18px)} /* hierarquia: o Solo é coadjuvante — menor, mais compacto, centrado na altura do Duo */ .plan-lite:not(.plan-feat){padding:clamp(20px,2.2vw,28px);box-shadow:var(--shadow-md)} .plan-lite:not(.plan-feat) .plan-price{font-size:clamp(1.9rem,3.3vw,2.4rem)} .plan-lite:not(.plan-feat) .plan-feats li{font-size:.92rem} .plans-lite .offer-disc{color:var(--ink-3)} [data-theme="dark"] .plans-lite .plan-price small{color:#4BE3D8} [data-theme="dark"] .plans-lite .plan-deal{color:#4BE3D8} [data-theme="dark"] .plans-lite .plan-feats-ic .fi{color:#4BE3D8} [data-theme="dark"] .plans-lite .plan-feats li::before{background:rgba(75,227,216,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234BE3D8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat} [data-theme="dark"] .plans-lite .yway-ic{color:#4BE3D8} [data-theme="dark"] .plans-lite .split-title em{color:#4BE3D8} [data-theme="dark"] .plans-lite .who-ic{color:#4BE3D8} /* ============ CONSENT BANNER (LGPD) ============ */ /* Fixo no rodapé, discreto; tokens fazem o dark mode sozinhos */ .consent-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:var(--z-consent);display:flex;align-items:center;justify-content:space-between;gap:14px 18px;flex-wrap:wrap;max-width:640px;margin:0 auto;padding:16px 20px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:var(--shadow-float);opacity:0;transform:translateY(12px);transition:opacity .25s var(--ease),transform .25s var(--ease)} .consent-banner.is-visible{opacity:1;transform:none} .consent-banner[hidden]{display:none} .cb-tx{flex:1 1 280px;min-width:220px;font-size:.92rem;line-height:1.5;color:var(--ink-2);margin:0} .cb-tx a{color:var(--teal-strong);font-weight:600;text-decoration:underline} [data-theme="dark"] .cb-tx a{color:#5EE6DC} .cb-actions{display:flex;gap:10px;margin-left:auto} @media (max-width:520px){.cb-actions{width:100%;margin-left:0}.cb-actions .btn{flex:1}} @media (prefers-reduced-motion:reduce){.consent-banner{transition:none;transform:none}}