/* Tudo Pet — nova identidade: base clara, grafite e azul. Montserrat (títulos) + Inter (textos). */
:root{
  --bg:#F5F7F9; --white:#FFFFFF; --band:#F5F7F9;
  --ink:#111315; --graphite:#1C2024; --graphite-2:#343A40; --soft:#343A40; --muted:#646C75; --gray:#737B84;
  --line:#E7EAEE; --line-2:#D9DFE6;
  --blue:#3F6FDC; --blue-600:#2F5BC4; --blue-400:#5B8DEF; --blue-50:#EAF0FD; --blue-100:#DCE6FA;
  --ok:#1E8E5A; --ok-bg:#E3F5EC; --late:#C0392B;
  --f-d:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif; --f-b:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --shadow:0 18px 40px -22px rgba(17,19,21,.35); --shadow-s:0 8px 22px -14px rgba(17,19,21,.35);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;color-scheme:light}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--f-b);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--f-d);margin:0;line-height:1.12;letter-spacing:-.02em;color:var(--ink)}
p{margin:0}
a{color:inherit}
.wrap{width:100%;max-width:1160px;margin-inline:auto;padding-inline:20px}
section{padding-block:92px}
.band{background:var(--band)}
:focus-visible{outline:3px solid var(--blue-400);outline-offset:3px;border-radius:8px}

/* títulos: parte leve + destaque azul */
h2{font-size:clamp(30px,4.2vw,46px);font-weight:700}
h2 .lt{font-weight:500}
h2 b,h1 b{color:var(--blue-400);font-weight:700}
.head2{max-width:700px}
.head2 h2{margin-top:14px}
.head2 p{color:var(--muted);margin-top:16px;font-size:18px}
.kick{display:inline-flex;align-items:center;gap:10px;font:600 12.5px var(--f-d);letter-spacing:.16em;text-transform:uppercase;color:var(--gray)}
.kick::before{content:"";width:26px;height:2px;background:var(--blue-400);border-radius:2px}
.kick i{width:4px;height:4px;border-radius:50%;background:var(--blue-400);display:inline-block}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border:0;border-radius:999px;font:600 16px var(--f-d);text-decoration:none;background:var(--blue);color:#fff;cursor:pointer;transition:transform .15s,background .15s,box-shadow .15s;box-shadow:0 10px 22px -12px rgba(63,111,220,.8)}
.btn:hover{background:var(--blue-600);transform:translateY(-2px)}
.btn.sm{min-height:42px;padding:0 20px;font-size:14px}
.btn:disabled{opacity:.6;cursor:default;transform:none}
.stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.store{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 22px 0 18px;border-radius:16px;background:var(--graphite);color:#fff;text-decoration:none;transition:transform .15s,background .15s}
.store:hover{transform:translateY(-2px);background:#000}
.store span{display:flex;flex-direction:column;line-height:1.15}
.store small{font:500 11.5px var(--f-b);opacity:.8}
.store b{font:600 17px var(--f-d)}
.store.light{background:#fff;color:var(--ink)}
.store.light:hover{background:var(--blue-50)}

/* barra fixa */
.sbar{position:fixed;inset:0 0 auto 0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transform:translateY(-110%);transition:transform .3s}
.sbar.on{transform:none}
.sbar .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.sbar img{height:34px;width:auto}

/* topo */
.hero{position:relative;overflow:hidden}
.hero .wave{position:absolute;right:0;top:0;height:100%;width:110px;opacity:.55;pointer-events:none}
.hero .wave svg{width:100%;height:100%}
.nav{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;height:84px}
.nav img{height:44px;width:auto}
.nav nav{display:flex;gap:30px}
.nav nav a{font:500 15px var(--f-d);text-decoration:none;color:var(--graphite-2);padding:6px 0;border-bottom:2px solid transparent;transition:border-color .15s,color .15s}
.nav nav a:hover{color:var(--blue);border-color:var(--blue-400)}
.heroin{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center;padding:34px 0 86px}
.htx h1{font-size:clamp(44px,6.6vw,82px);font-weight:500;letter-spacing:-.035em;line-height:1.02;margin-top:24px}
.htx h1 b{font-weight:700}
.htx h1 .b{color:var(--blue-400)}
.rule{display:block;width:56px;height:3px;border-radius:3px;background:var(--blue-400);margin:28px 0 22px}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--soft);max-width:460px}
.collage{position:relative;width:100%;max-width:600px;justify-self:end;aspect-ratio:1/1.04}
.collage .blob{position:absolute;left:0;bottom:0;width:70%;aspect-ratio:1;border-radius:50%;background:var(--blue-100)}
.collage .main{position:absolute;right:0;bottom:0;width:74%;aspect-ratio:1/1.1;border-radius:34px;overflow:hidden;background:#E7EAEE;box-shadow:0 30px 60px -30px rgba(17,19,21,.5)}
.collage .main img,.collage .round img{width:100%;height:100%;object-fit:cover}
.collage .main img{object-position:50% 28%}
.round{position:absolute;aspect-ratio:1;border-radius:50%;border:5px solid #fff;background:#fff;box-shadow:var(--shadow)}
.round img{border-radius:50%}
.round.a{left:0;top:7%;width:30%}
.round.d{left:34%;top:0;width:19%}
.round.b{right:-1%;top:2%;width:25%}
.round.c{left:3%;bottom:22%;width:25%}
.collage [data-l]::after{content:attr(data-l);position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:#fff;color:var(--graphite);font:600 12px var(--f-d);padding:4px 12px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 12px rgba(17,19,21,.15)}
.collage .round[data-l]::after{bottom:-4px;font-size:11.5px;padding:3px 10px}
.float{position:absolute;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px 16px;box-shadow:var(--shadow);font:600 14px var(--f-d)}
.float .fi{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--blue-50);color:var(--blue);flex:none}
.float .t{display:block;font:700 15px var(--f-d)}
.float .m{font:400 13px/1.35 var(--f-b);color:var(--muted)}
.float .ok{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;flex:none}
.float.f1{left:-3%;bottom:5%;max-width:62%}
.float.f2{right:3%;bottom:4%;padding:10px 16px 10px 10px;border-radius:999px}

/* faixa de frases (só texto) */
.marq{background:var(--graphite);color:#fff;overflow:hidden;white-space:nowrap;display:flex;padding:20px 0}
.marq .tr{display:flex;flex:none;animation:slide 40s linear infinite}
.marq span{display:inline-flex;align-items:center;font:600 15px var(--f-d);letter-spacing:.14em;text-transform:uppercase;padding-left:30px}
.marq span i{width:6px;height:6px;border-radius:50%;background:var(--blue-400);margin-left:30px;display:inline-block}
.marq:hover .tr{animation-play-state:paused}

/* benefícios */
.strip{background:#fff;border-bottom:1px solid var(--line);padding:34px 0}
.strip .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.strip .wrap>div{display:flex;gap:14px;align-items:flex-start}
.si{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--blue-50);color:var(--blue);flex:none}
.strip p b{display:block;font:700 16px var(--f-d)}
.strip p span{display:block;color:var(--muted);font-size:15px;line-height:1.5;margin-top:2px}

/* linhas de seção */
.row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.row+.row{margin-top:110px}
.row.flip .pnl{order:-1}
.row h2{margin-top:14px}
.row p{color:var(--soft);margin-top:18px;max-width:480px}
.ticks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--ink)}
.ticks svg{flex:none;margin-top:3px;width:22px;height:22px;padding:3px;border-radius:50%;background:var(--blue-50);color:var(--blue)}
.hintline{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--muted)!important;margin-top:20px!important}
.hintline svg{color:var(--blue);flex:none}

/* painéis de foto */
.pnl{position:relative;border-radius:36px;overflow:hidden;min-height:480px;display:flex;align-items:flex-end;justify-content:center;background:var(--line);box-shadow:var(--shadow)}
.pnl>img.ph{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.ui{position:relative;z-index:2;width:calc(100% - 32px);max-width:340px;margin:0 0 16px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.ui h4{display:flex;align-items:center;justify-content:space-between;font:700 16px var(--f-d)}
.ui h4 small{font:600 12px var(--f-d);color:var(--blue);background:var(--blue-50);padding:4px 10px;border-radius:999px}
.ui h4 small.ok{color:var(--ok);background:var(--ok-bg)}
.ui ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:2px}
.ui li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.ui li:first-child{border-top:0}
.ui li div{flex:1;min-width:0}
.ui li b{display:block;font:600 15px var(--f-d)}
.ui li div span{display:block;font-size:13px;color:var(--muted)}
.ui li em{font:600 11.5px var(--f-d);font-style:normal;color:var(--gray);letter-spacing:.04em}
.dot{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--line-2);color:transparent;flex:none;transition:all .2s}
.dot.on{background:var(--blue);border-color:var(--blue);color:#fff}
.rem{cursor:pointer;border-radius:12px}
.rem:hover .dot:not(.on){border-color:var(--blue-400)}
.rem[aria-pressed=true] em{color:var(--ok)}
.ui.left{align-self:flex-end;margin-left:16px;margin-right:auto}
.who{display:flex;align-items:center;gap:12px}
.who img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.who b{display:block;font:700 16px var(--f-d)}
.who span{font-size:13px;color:var(--muted)}
.lk{margin-top:14px;background:var(--blue-50);color:var(--graphite-2);font-size:14px;padding:12px 14px;border-radius:14px}
.wa{margin-top:10px;background:#25D366;color:#0B2F18;text-align:center;font:700 15px var(--f-d);padding:13px;border-radius:14px}

/* o app (telas reais) */
#app{padding-bottom:96px}
#app h2{margin-top:14px}
.feat{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;max-width:440px}
.feat li{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-2);font:500 16px var(--f-d);color:var(--graphite-2)}
.feat svg{color:var(--blue);flex:none}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.tb{font:600 14px var(--f-d);padding:10px 18px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;color:var(--graphite-2);cursor:pointer;transition:all .15s}
.tb:hover{border-color:var(--blue-400);color:var(--blue)}
.tb[aria-selected=true]{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 10px 20px -12px rgba(63,111,220,.9)}
.stage{position:relative;display:grid;place-items:center;padding:40px 20px;border-radius:40px;background:linear-gradient(160deg,#E9EEF6,#DCE6FA);overflow:hidden}
.stage::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.55);left:-12%;top:-14%}
.stage::after{content:"";position:absolute;width:60%;height:60%;border-radius:50%;border:2px solid rgba(91,141,239,.45);right:-22%;bottom:-18%}
.phone{position:relative;z-index:2;width:min(300px,72%);aspect-ratio:585/1170;border:9px solid var(--graphite);border-radius:44px;overflow:hidden;background:#fff;box-shadow:0 36px 60px -26px rgba(17,19,21,.6)}
.phone .scr{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);transition:opacity .5s,transform .5s}
.phone .scr.on{opacity:1;transform:none}

/* momentos */
.moms{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.mom{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;transition:transform .2s,box-shadow .2s}
.mom:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.mom .ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--blue-50);color:var(--blue)}
.mom h3{font:700 19px var(--f-d);margin-top:20px}
.mom p{color:var(--muted);margin-top:10px;font-size:16px}

/* passos */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px;counter-reset:s}
.step{position:relative;padding-top:22px;border-top:2px solid var(--line-2)}
.step::before{counter-increment:s;content:"0" counter(s);position:absolute;top:-1px;left:0;transform:translateY(-100%);font:700 15px var(--f-d);color:var(--blue);background:#fff;padding:0 12px 0 0}
.step::after{content:"";position:absolute;left:0;top:-2px;width:48px;height:2px;background:var(--blue-400)}
.step h3{font:700 20px var(--f-d)}
.step p{color:var(--muted);margin-top:10px}

/* carrossel da turma */
.mas{display:block;overflow:hidden;margin:34px -24px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mas .trk{display:flex;gap:16px;width:max-content;animation:car 40s linear infinite}
.mas:hover .trk{animation-play-state:paused}
.it{margin:0;flex:none;width:260px;aspect-ratio:3/4;border-radius:26px;overflow:hidden;position:relative;background:var(--line);box-shadow:var(--shadow-s)}
.it img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.it:hover img{transform:scale(1.06)}
.it figcaption{position:absolute;left:12px;bottom:12px;background:#fff;color:var(--graphite);font:600 13px var(--f-d);padding:6px 14px;border-radius:999px}
@keyframes car{to{transform:translateX(calc(-50% - 8px))}}

/* perguntas */
.faq{max-width:780px;margin-top:34px;display:flex;flex-direction:column;gap:10px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:18px;padding:0 22px;transition:border-color .2s,box-shadow .2s}
.faq details[open]{border-color:var(--blue-400);box-shadow:var(--shadow-s)}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;font:600 17px var(--f-d)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:500 26px/1 var(--f-d);color:var(--blue);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--soft);padding:0 0 20px;max-width:640px}

/* chamada final */
.cta{display:grid;grid-template-columns:1.05fr 1fr;background:var(--graphite);border-radius:36px;overflow:hidden;color:#fff;box-shadow:var(--shadow)}
.cta .tx{padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.cta .kick{color:#A3ABB4}
.cta h2{color:#fff;margin-top:18px;font-size:clamp(30px,4vw,46px)}
.cta h2 b{color:var(--blue-400)}
.cta p{color:#C9D0D8;margin-top:16px}
.cta .ph{min-height:340px;position:relative}
.cta .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* rodapé */
footer{background:var(--ink);color:#A3ABB4;margin-top:92px;padding:40px 0}
.foot{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;font-size:14px}
.foot img{height:38px;width:auto}
.foot .tag{font:600 12px var(--f-d);letter-spacing:.16em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px}
.foot .tag i{width:4px;height:4px;border-radius:50%;background:var(--blue-400);display:inline-block}

/* animações */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes grow{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes slide{to{transform:translateX(-100%)}}
.htx .w{display:inline-block;animation:rise .8s calc(var(--i)*.09s + .1s) cubic-bezier(.2,.8,.2,1) both}
.htx .kick,.htx .rule,.htx .lead,.htx .stores{animation:rise .8s .45s cubic-bezier(.2,.8,.2,1) both}
.collage .main{animation:grow .9s .15s cubic-bezier(.2,.8,.2,1) both}
.round{animation:pop .6s cubic-bezier(.2,.9,.3,1.3) both}
.round.a{animation-delay:.5s}.round.d{animation-delay:.62s}.round.b{animation-delay:.74s}.round.c{animation-delay:.86s}
.float{animation:rise .7s 1s both,bob 5s 1.7s ease-in-out infinite}
.float.f2{animation-delay:1.15s,2s}
.round.a,.round.d,.round.b,.round.c,.collage .main,.float{translate:calc(var(--mx,0)*var(--k,10)*1px) calc(var(--my,0)*var(--k,10)*1px)}
.round.a{--k:-16}.round.b{--k:14}.collage .main{--k:8}.float.f1{--k:-22}.float.f2{--k:18}
@supports (animation-timeline:view()){
  .rv{animation:rise linear both;animation-timeline:view();animation-range:entry 5% entry 40%}
}

/* telas menores */
@media(max-width:960px){
  section{padding-block:68px}
  .heroin{grid-template-columns:1fr;padding:10px 0 64px;gap:48px}
  .collage{justify-self:center}
  .hero .wave{display:none}
  .row{grid-template-columns:1fr;gap:36px}
  .row+.row{margin-top:80px}
  .row.flip .pnl{order:0}
  .strip .wrap,.moms,.steps{grid-template-columns:1fr}
  .cta{grid-template-columns:1fr}
  .cta .ph{min-height:300px;order:-1}
}
@media(max-width:700px){
  .nav nav{display:none}
  .it{width:210px}
  .mas{margin-left:-16px;margin-right:-16px}
  .pnl{min-height:440px}
  .feat{grid-template-columns:1fr}
  .stage{padding:32px 12px}
  .nav{height:72px}.nav img{height:38px}
  .float.f1{max-width:70%}
  .collage .round[data-l]::after{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .mas{overflow-x:auto;-webkit-mask:none;mask:none}
  .marq{overflow-x:auto}
  .round,.collage .main,.float{translate:none!important}
}

/* ===== versão escura: preto e azul ===== */
:root{--night:#0B0D10;--night-2:#12161B}
.dk{background:var(--night);color:#E7EAEE;--ink:#FFFFFF;--soft:#C9D0D8;--muted:#9AA3AD;--gray:#9AA3AD;--line:#262C33;--line-2:#39414A;--graphite-2:#C9D0D8}
.dk h1,.dk h2,.dk h3,.dk h4{color:#fff}
.dk .ui h4,.dk .ui li b,.dk .who b{color:var(--ink-card,#111315)}
.dk .ui{--ink:#111315;--muted:#646C75;--line:#E7EAEE;--line-2:#D9DFE6;color:#111315}
.dk .ui h4{color:#111315}
.hero.dk{background:radial-gradient(900px 600px at 78% 40%,rgba(63,111,220,.28),transparent 65%),radial-gradient(500px 400px at 5% 100%,rgba(63,111,220,.16),transparent 70%),linear-gradient(180deg,#0B0D10,#101419)}
.hero.dk .wave{opacity:.9}
.hero.dk .nav nav a{color:#C9D0D8}
.hero.dk .nav nav a:hover{color:#fff}
.dk .store{background:#1C2024;border:1px solid #39414A}
.dk .store:hover{background:#262C33}
.dk .store.light{background:#fff;color:#111315;border-color:#fff}
.dk .store.light:hover{background:var(--blue-50)}
.dk .htx h1 b,.dk h2 b{color:var(--blue-400)}
.collage .blob{background:radial-gradient(circle at 40% 40%,rgba(91,141,239,.55),rgba(63,111,220,.15))}
.hero.dk .collage .main{box-shadow:0 30px 70px -30px rgba(63,111,220,.6);background:#1C2024}
.hero.dk .round{border-color:#0B0D10;box-shadow:0 0 0 2px rgba(91,141,239,.55),var(--shadow)}
.marq{background:var(--blue);color:#fff}
.marq span i{background:#fff;opacity:.85}
.strip.dk{background:var(--night-2);border-bottom:1px solid var(--line)}
.strip.dk .si,.dk .ticks svg,.dk .feat svg{background:rgba(91,141,239,.16);color:var(--blue-400)}
.dk .ticks svg{background:rgba(91,141,239,.16)}
.dk .step::before{background:var(--night);color:var(--blue-400)}
.dk .step::after{background:var(--blue-400)}
.dk .step{border-color:var(--line-2)}
.dk .pnl{background:#1C2024;box-shadow:0 30px 70px -34px rgba(63,111,220,.5)}
.dk .hintline svg{color:var(--blue-400)}
.dk .kick::before{background:var(--blue-400)}
.dk .it{background:#1C2024;box-shadow:0 18px 40px -22px rgba(0,0,0,.8)}
.dk .mas{-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
#baixar.dk .cta{background:linear-gradient(135deg,#1C2024,#14213F);border:1px solid #2B3A5E}
#baixar.dk{background:var(--night)}
footer{margin-top:0;background:#07090B}
.sbar{background:rgba(11,13,16,.88);border-bottom-color:#262C33}
.sbar img{filter:none}
.dk .ph img{object-position:50% 30%}
.row.flip .pnl>img.ph,.pnl>img.ph{object-position:50% 25%}
.collage .main img{object-position:42% 25%}
.dk .float,.dk .lk,.dk .ui li,.dk .ui li div span,.dk .who span{color:#111315}
.dk .float .t,.dk .float{color:#111315}
.dk .float .m,.dk .ui li div span,.dk .who span{color:#646C75}
.dk .lk{color:#343A40}
.dk .ui li b,.dk .who b{color:#111315}
.dk .ui li em{color:#737B84}
.dk .ui .rem[aria-pressed=true] em{color:var(--ok)}
/* foto principal redonda */
.collage .main{width:76%;aspect-ratio:1;border-radius:50%;right:2%;bottom:3%}
.collage .main img{object-position:38% 28%}
.hero.dk .collage .main{border:5px solid rgba(91,141,239,.55)}
.collage .blob{width:80%;left:-4%;bottom:-2%}
.collage .main[data-l]::after{bottom:14px}
.round.a{left:0;top:10%;width:26%}
.round.d{left:30%;top:0;width:19%}
.round.b{right:0;top:6%;width:23%}
.round.c{left:2%;bottom:14%;width:24%}
/* distribuição dos animais em volta da foto principal */
.collage .main{width:68%;right:0;top:17%;bottom:auto}
.collage .blob{width:74%;left:auto;right:-2%;top:13%;bottom:auto}
.round.a{left:2%;top:9%;width:27%;bottom:auto}
.round.d{left:41%;top:0;width:19%;bottom:auto}
.round.b{right:0;top:2%;width:22%;bottom:auto}
.round.c{left:4%;bottom:5%;top:auto;width:25%}
.round.e{display:none}
.collage .main{width:72%;top:14%}
.collage .blob{width:78%;top:10%}
.round.a{left:3%;top:20%;width:25%}
.round.d{left:35%;top:0;width:19%}
.round.b{right:1%;top:1%;width:21%}
.round.c{left:14%;bottom:2%;top:auto;width:25%}
/* cinco círculos do mesmo tamanho, sem destaque para o cachorro */
.collage{max-width:520px}
.collage .blob{width:76%;left:12%;right:auto;top:12%;bottom:auto;opacity:.8}
.collage .main,.round{position:absolute;width:33%;aspect-ratio:1;border-radius:50%;overflow:visible;border:5px solid #0B0D10;background:#0B0D10;box-shadow:0 0 0 2px rgba(91,141,239,.55),var(--shadow);animation:pop .6s cubic-bezier(.2,.9,.3,1.3) both}
.collage .main img,.round img{border-radius:50%;width:100%;height:100%;object-fit:cover}
.hero.dk .collage .main,.hero.dk .round{border:5px solid #0B0D10;box-shadow:0 0 0 2px rgba(91,141,239,.55),var(--shadow)}
.collage .main{left:33.5%;right:auto;top:34%;bottom:auto}
.collage .main img{object-position:38% 28%}
.round.a{left:9%;top:0;width:33%;bottom:auto}
.round.d{left:57%;top:4%;width:33%;bottom:auto;right:auto}
.round.b{left:6%;top:68%;width:33%;right:auto;bottom:auto}
.round.c{left:60%;top:66%;width:33%;right:auto;bottom:auto}
.collage .main{animation-delay:.2s}
.round.a{animation-delay:.35s}.round.d{animation-delay:.5s}.round.c{animation-delay:.65s}.round.b{animation-delay:.8s}
.collage [data-l]::after,.collage .round[data-l]::after,.collage .main[data-l]::after{bottom:-6px;font-size:12px;padding:4px 12px;display:block}
@media(max-width:700px){.collage .round[data-l]::after{display:block}.collage [data-l]::after{font-size:11px;padding:3px 9px}}
#saude .pnl>img.ph{object-position:50% 12%}
#saude .pnl{min-height:640px}
#saude .pnl>img.ph{object-position:60% 0}
@media(max-width:700px){#saude .pnl{min-height:560px}}
#lembretes .pnl{min-height:720px}
#lembretes .pnl>img.ph{object-position:50% 0}
@media(max-width:700px){#lembretes .pnl{min-height:600px}}
#lembretes .pnl>img.ph{object-position:50% 100%;transform:scale(1.1);transform-origin:50% 20%}
@media(max-width:700px){#lembretes .pnl{min-height:700px}#lembretes .pnl>img.ph{object-position:50% 0;transform:none}}
#lembretes .pnl>img.ph{object-position:50% 0;transform:none}
#lembretes .pnl{min-height:640px}
@media(max-width:700px){#lembretes .pnl{min-height:600px}}
/* ===== inversão: topo claro, seções alternando ===== */
.hero{background:radial-gradient(800px 560px at 80% 40%,rgba(91,141,239,.22),transparent 65%),linear-gradient(180deg,#F5F7F9 0%,#EAEFF6 100%)}
.hero .collage .main,.hero .round{border:5px solid #fff;background:#fff;box-shadow:0 0 0 2px rgba(91,141,239,.45),var(--shadow)}
.hero .collage .blob{background:radial-gradient(circle at 40% 40%,rgba(91,141,239,.35),rgba(91,141,239,.08));opacity:1}
.sbar{background:rgba(255,255,255,.92);border-bottom-color:var(--line)}
.strip{background:#fff}
footer{margin-top:0}
#baixar{padding-bottom:92px}
/* itens dentro de seções escuras */
.dk .tb{background:#1C2024;border-color:#39414A;color:#C9D0D8}
.dk .tb:hover{border-color:var(--blue-400);color:#fff}
.dk .tb[aria-selected=true]{background:var(--blue);border-color:var(--blue);color:#fff}
.dk .mom{background:#14181D;border-color:#262C33}
.dk .mom .ic{background:rgba(91,141,239,.16);color:var(--blue-400)}
.dk .mom h3{color:#fff}
.dk .faq details{background:#14181D;border-color:#262C33}
.cta h2{font-size:clamp(30px,3.6vw,44px)}
.cta .stores{margin-top:30px}
/* elementos da marca: ondas e gotas */
.hero .wave{display:none}
.hero .waves{position:absolute;left:0;right:0;bottom:0;height:clamp(80px,10vw,140px);z-index:1;pointer-events:none}
.hero .waves svg{display:block;width:100%;height:100%}
.heroin{padding-bottom:calc(86px + 40px)}
.hero .drops{position:absolute;inset:0;pointer-events:none;z-index:0}
.drop{position:absolute;height:auto}
.drop.d1{width:92px;left:44%;top:16%;transform:rotate(14deg);opacity:.95;animation:bob 6s ease-in-out infinite}
.drop.d2{width:56px;left:41%;top:11%;transform:rotate(-18deg);opacity:.55;animation:bob 7s 1s ease-in-out infinite}
.marq{background:var(--graphite)}
.marq span i{background:var(--blue-400)}
@media(max-width:960px){.drop.d1{left:auto;right:6%;top:44%;width:64px}.drop.d2{display:none}.heroin{padding-bottom:90px}}
@media(prefers-reduced-motion:reduce){.drop{animation:none!important}}
.drop.d1{width:84px;left:46%;top:17%;transform:rotate(8deg)}
.drop.d2{width:62px;left:41.5%;top:11%;transform:rotate(-6deg);opacity:.8}
@media(max-width:960px){.drop.d1{left:auto;right:6%;top:44%;width:60px}.drop.d2{display:none}}
/* fundos azuis alternando com os pretos */
.dk.bl{background:linear-gradient(155deg,#3F6FDC 0%,#2F56B8 55%,#324A7D 100%);--muted:#DCE6FA;--soft:#EAF0FD;--gray:#DCE6FA}
.dk.bl h2 b{color:#fff}
.dk.bl .kick{color:#EAF0FD}
.dk.bl .kick::before{background:#fff}
.dk.bl .mom{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.dk.bl .mom .ic{background:rgba(255,255,255,.2);color:#fff}
.dk.bl .mom p{color:#EAF0FD}
.dk.bl .head2 p{color:#EAF0FD}
.marq{background:var(--blue)}
.marq span i{background:#fff;opacity:.9}
.htx h1,.htx h1 b{font-weight:700}
/* selos das lojas enquanto o app não foi lançado */
.store.soon{cursor:default}
.store.soon:hover{transform:none;background:var(--graphite)}
.store.light.soon:hover{background:#fff}
/* dúvidas e chamada final são duas seções claras seguidas: sem espaço dobrado */
#duvidas+#baixar{padding-top:0}
/* rodapé: links dos documentos */
.foot .legal{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot .legal a{color:#C9D0D8;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s,color .15s}
.foot .legal a:hover,.foot .legal a[aria-current=page]{color:#fff;border-bottom-color:var(--blue-400)}
/* páginas de documentos (privacidade e termos) */
.lg-top{background:#fff;border-bottom:1px solid var(--line)}
.lg-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.lg-top img{height:38px;width:auto}
.lg-doc{background:var(--bg);padding-block:56px 80px}
.lg-doc .wrap{max-width:780px}
.lg-doc h1{font-size:clamp(32px,5vw,48px);font-weight:700;margin-top:14px}
.lg-upd{color:var(--muted);font-size:15px;margin-top:10px}
.lg-lead{font-size:18px;color:var(--soft);margin-top:24px}
.lg-doc a{color:var(--blue)}
.lg-toc{margin-top:32px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 24px}
.lg-toc b{font:600 13px var(--f-d);letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.lg-toc ol{margin:10px 0 0;padding-left:22px;columns:2;column-gap:32px}
.lg-toc li{padding:3px 0;break-inside:avoid}
.lg-toc a{text-decoration:none}
.lg-toc a:hover{text-decoration:underline}
.lg-doc section{padding:0;margin-top:44px;scroll-margin-top:24px}
.lg-doc h2{font-size:22px;font-weight:700}
.lg-doc section p,.lg-doc section ul{margin-top:14px;color:var(--soft)}
.lg-doc section ul{padding-left:22px}
.lg-doc section li{margin-top:6px}
.lg-doc section b{color:var(--ink)}
.lg-table{margin-top:16px;overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
.lg-table table{width:100%;border-collapse:collapse;font-size:15px}
.lg-table th,.lg-table td{text-align:left;vertical-align:top;padding:12px 14px;border-top:1px solid var(--line)}
.lg-table thead th{border-top:0;font:600 14px var(--f-d);background:var(--blue-50)}
.todo{background:#FFF3B0;color:#5C4400;border-radius:4px;padding:0 4px;font-weight:600}
@media(max-width:700px){.lg-toc ol{columns:1}.lg-doc{padding-block:40px 64px}.lg-top .wrap{height:64px}.lg-top img{height:32px}}