/* Efeitos e animações do site (início, lista de Dicas e artigos). Prévia aprovada: previas/previa-site-animado-enxuto/ (12/11/2026).
   O início carrega este arquivo direto; as páginas de Dicas (do Pages e do robô) recebem pelo @import do dicas.css.
   Tudo aqui some com "reduzir movimento" ligado no aparelho. Sem biblioteca externa. */

/* Troca de página suave (início <-> dicas <-> artigo), nos navegadores que suportam */
@view-transition{navigation:auto}
.bar img{view-transition-name:vp-logo}
.bar b{view-transition-name:vp-nome}

/* ---------- Água: luz, anéis, ondas e boia ---------- */
.hero,.final,.dtopo{position:relative;overflow:hidden;isolation:isolate}
.hero>*,.final>*,.dtopo>*{position:relative;z-index:1}
.agua{position:absolute!important;inset:0;z-index:0!important;pointer-events:none}
.agua .luz{position:absolute;inset:0;background:linear-gradient(118deg,#163A2D 0%,#14403A 55%,#0F4A57 100%)}
.onda{position:absolute;left:0;bottom:-1px;width:calc(100% + 600px);height:34px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 34' preserveAspectRatio='none'%3E%3Cpath d='M0 17Q150-3 300 17T600 17V34H0Z' fill='%23F5F2EA'/%3E%3C/svg%3E") repeat-x 0 100%/600px 100%}
.onda.b{height:46px;opacity:.28}
.onda.topo{bottom:auto;top:-1px;scale:1 -1}
.boia{position:absolute;right:clamp(26px,11%,190px);bottom:6px;width:22px;height:44px;transform-origin:50% 70%}
.hero{padding-bottom:74px}
.final{padding-top:86px}
@media (min-width:1024px){.hero{padding-bottom:96px}}

/* ---------- Toques que valem mesmo sem animação ---------- */
.btn.big{position:relative;overflow:hidden}
.live i{position:relative}
.card{transition:transform 120ms ease-out,border-color .18s,translate .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.card figure img{transition:scale .5s cubic-bezier(.2,.8,.2,1)}
.risco{display:block;width:56px;height:8px;margin-top:7px;fill:none;stroke:var(--petrol);stroke-width:2.5;stroke-linecap:round;overflow:visible}
.deal-col.old .deal-val{text-decoration:none;position:relative;justify-self:start}
.deal-col.old .deal-val::after{content:"";position:absolute;left:-3px;right:-3px;top:52%;height:2px;border-radius:2px;background:currentColor;transform-origin:0 50%}
.faq summary::after{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.final .aneis-logo{position:absolute!important;left:50%;top:122px;width:0;height:0;z-index:0!important}
.final .aneis-logo i{position:absolute;left:-36px;top:-36px;width:72px;height:72px;border-radius:50%;border:1.5px solid rgba(238,241,234,.4);opacity:0}

@media (hover:hover){
  .card:hover{translate:0 -4px;box-shadow:0 16px 30px -20px rgba(19,36,30,.55)}
  .card:hover figure img{scale:1.06}
  .dicas-box li a .seta{transition:translate .25s cubic-bezier(.2,.8,.2,1)}
  .dicas-box li a:hover .seta{translate:5px 0}
  .prod{transition:translate .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
  .prod:hover{translate:0 -3px;box-shadow:0 14px 28px -20px rgba(19,36,30,.5)}
}

/* ---------- Movimento (só com "reduzir movimento" desligado) ---------- */
@media (prefers-reduced-motion:no-preference){
  .onda{animation:onda 11s linear infinite}
  .onda.b{animation-duration:17s;animation-direction:reverse}
  .boia{animation:boia 3.4s ease-in-out infinite}
  .boia.fisgou{animation:fisga 1.15s cubic-bezier(.3,0,.2,1)}
  .final .aneis-logo i{animation:anel-logo 4.2s ease-out infinite}
  .final .aneis-logo i:nth-child(2){animation-delay:1.4s}
  .final .aneis-logo i:nth-child(3){animation-delay:2.8s}
  .final img{animation:flutua 4.2s ease-in-out infinite}

  /* brilho que passa no botão laranja de vez em quando */
  .btn.big::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);
    transform:translateX(-120%);animation:brilho 6s 2.2s ease-in-out infinite}
  .live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#5BD27A;animation:pulso 1.9s ease-out infinite}

  /* abertura: o título sobe palavra por palavra e o resto entra em sequência */
  .fx .hero h1:not(.pronto){visibility:hidden;animation:aparece 0s 2.5s forwards}
  .fx .hero h1 .w{display:inline-block;color:inherit;font-style:inherit;opacity:0;
    animation:palavra .75s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*60ms + 80ms)}
  .fx .hero .sub{animation:sobe .7s .5s both}
  .fx .hero .row{animation:desliza .7s .3s both}   /* o botão de entrar nunca fica invisível: só desliza */
  .fx .hero .micro{animation:sobe .7s .7s both}
  .fx .hero .trust{animation:sobe .7s .78s both}
  .fx .hero .trust span::before{display:inline-block;animation:pop .5s both}
  .fx .hero .trust span:nth-child(1)::before{animation-delay:1.05s}
  .fx .hero .trust span:nth-child(2)::before{animation-delay:1.2s}
  .fx .hero .trust span:nth-child(3)::before{animation-delay:1.35s}
  .fx .hero .hero-stores{animation:sobe .7s .9s both}
  .fx .hero .chat{animation:sobe .8s .55s both}
  .fx .dtopo h1{animation:sobe .7s .05s both}
  .fx .dtopo .dlede{animation:sobe .7s .18s both}
  .fx .dtopo .dchips{animation:sobe .7s .3s both}

  /* cada bloco aparece quando entra na tela */
  .fx [data-rv]{opacity:0;translate:0 22px;
    transition:opacity .55s ease-out,translate .75s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*75ms)}
  .fx [data-rv].rv-in{opacity:1;translate:0 0}
  .fx .visto .tag,.fx .visto .off{animation:pop .5s .3s both}
  .fx .risco path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s .3s ease-out}
  .fx .visto .risco path{stroke-dashoffset:0}

  /* preço conferido: o risco passa no preço antigo e o novo desce contando */
  .fx .deal-col.old .deal-val::after{transform:scaleX(0);transition:transform .5s .15s cubic-bezier(.6,0,.2,1)}
  .fx .cmp-on .deal-col.old .deal-val::after{transform:scaleX(1)}
  .fx .cmp-on .deal-col.highlight{animation:destaque .7s .25s both}
  .fx .cmp-on .deal-badge{animation:pop .45s both}
  .fx .cmp-on .deal-badge:nth-child(1){animation-delay:.95s}
  .fx .cmp-on .deal-badge:nth-child(2){animation-delay:1.05s}
  .fx .cmp-on .deal-badge:nth-child(3){animation-delay:1.15s}

  .cartao .foto{animation:flutua 5s ease-in-out infinite}
  .cartao:nth-child(2n) .foto{animation-delay:-2.4s}
  .esq i,.esq b{animation:esq 1.3s linear infinite}
}
@keyframes onda{to{transform:translateX(-600px)}}
@keyframes anel-logo{0%{transform:scale(.9);opacity:0}15%{opacity:.5}100%{transform:scale(3.4);opacity:0}}
@keyframes boia{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(5px) rotate(6deg)}}
@keyframes fisga{0%{transform:translateY(0) rotate(-4deg)}22%{transform:translateY(30px) rotate(10deg)}55%{transform:translateY(-8px) rotate(-8deg)}78%{transform:translateY(4px) rotate(3deg)}100%{transform:translateY(0) rotate(-6deg)}}
@keyframes flutua{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes brilho{0%{transform:translateX(-120%)}16%,100%{transform:translateX(120%)}}
@keyframes pulso{0%{transform:scale(1);opacity:.65}100%{transform:scale(3);opacity:0}}
@keyframes palavra{from{opacity:0;transform:translateY(.5em) rotate(4deg)}to{opacity:1;transform:none}}
@keyframes desliza{from{translate:0 14px}to{translate:0 0}}
@keyframes sobe{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes pop{0%{scale:.4;opacity:0}60%{scale:1.18;opacity:1}100%{scale:1;opacity:1}}
@keyframes destaque{0%{scale:.94}55%{scale:1.03}100%{scale:1}}
@keyframes esq{to{background-position:-200% 0}}
@keyframes aparece{to{visibility:visible;opacity:1}}

/* ---------- Aba Dicas: topo verde, cartões e filtros ---------- */
.dtopo{background:var(--pine);color:var(--pine-ink);padding-block:26px 70px}
.dtopo h1{font:800 clamp(2.5rem,11vw,4rem)/.95 var(--display);text-transform:uppercase;letter-spacing:-.01em}
.dtopo .dlede{margin-top:12px;max-width:52ch;font-size:1.0625rem;line-height:1.5;color:var(--pine-muted)}
.dchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.dchips button{min-height:44px;padding:0 15px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:var(--pine-ink);
  font:600 .9375rem/1 var(--font);cursor:pointer;transition:transform .12s ease-out,background-color .18s,color .18s,border-color .18s}
.dchips button:active{transform:scale(.95)}
.dchips button[aria-pressed="true"]{background:var(--pine-ink);border-color:var(--pine-ink);color:var(--pine)}
main.dmain{padding-top:8px}
.cartoes{display:grid;gap:16px}
.cartao{display:grid;grid-template-rows:auto 1fr;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;color:inherit;text-decoration:none;
  transition:translate .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .18s,transform .12s ease-out}
.cartao:active{transform:scale(.985)}
.cena{position:relative;display:grid;place-items:center;aspect-ratio:16/8.4;overflow:hidden;
  background:linear-gradient(118deg,#163A2D 0%,#12443F 55%,#0F4A57 100%)}
.cena::before,.cena::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;border:1.5px solid rgba(238,241,234,.14);
  width:74%;aspect-ratio:1;translate:-50% -50%;transition:scale .6s cubic-bezier(.2,.8,.2,1)}
.cena::after{width:108%;border-color:rgba(238,241,234,.08)}
.foto{position:relative;width:40%;max-width:170px;aspect-ratio:1;border-radius:18px;background:#fff;padding:9px;display:grid;place-items:center;
  rotate:-5deg;box-shadow:0 18px 30px -16px rgba(0,0,0,.6);transition:rotate .45s cubic-bezier(.2,.8,.2,1),scale .45s cubic-bezier(.2,.8,.2,1)}
.foto img,.foto svg{width:100%;height:100%;object-fit:contain}
.selo{position:absolute;z-index:2;left:12px;top:12px;padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.28);color:var(--pine-ink);
  font:700 .75rem/1 var(--font);letter-spacing:.05em;text-transform:uppercase}
.cartao .txt{display:grid;gap:6px;align-content:start;padding:16px 16px 18px}
.cartao b{font:800 1.5rem/1.08 var(--display);text-transform:uppercase;color:var(--pine);text-wrap:balance}
.cartao .resumo{font-size:.9375rem;line-height:1.45;color:var(--muted)}
.cartao .ler{margin-top:6px;font-weight:700;font-size:.9375rem;color:var(--petrol);display:inline-flex;align-items:center;gap:6px}
.cartao .ler i{font-style:normal;transition:translate .25s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  .cartao:hover{translate:0 -5px;box-shadow:0 22px 36px -24px rgba(19,36,30,.6);border-color:#C2B8A3}
  .cartao:hover .foto{rotate:0deg;scale:1.07}
  .cartao:hover .cena::before{scale:1.12}
  .cartao:hover .cena::after{scale:1.08}
  .cartao:hover .ler i{translate:5px 0}
}
@media (min-width:700px){
  .cartoes{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .cartao.destaque{grid-column:1/-1;grid-template-rows:none;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .cartao.destaque .cena{aspect-ratio:auto;min-height:260px}
  .cartao.destaque .txt{align-content:center;padding:26px}
  .cartao.destaque b{font-size:clamp(1.9rem,3.2vw,2.6rem)}
  .cartao.destaque .resumo{font-size:1rem}
}
@media (min-width:900px){.dtopo{padding-block:40px 84px}}

/* ---------- Artigo: barra de leitura, capa, esqueleto e botão fixo ---------- */
.leitura{position:fixed;left:0;top:0;z-index:60;width:100%;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
figure.capa{background:linear-gradient(118deg,#163A2D 0%,#12443F 55%,#0F4A57 100%);border:0;padding:26px;position:relative;overflow:hidden}
figure.capa::before{content:"";position:absolute;left:50%;top:50%;width:min(78%,360px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1.5px solid rgba(238,241,234,.14)}
figure.capa img{position:relative;width:min(58%,230px);height:auto;max-height:none;margin-inline:auto;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:18px;padding:12px;rotate:-4deg;box-shadow:0 18px 30px -16px rgba(0,0,0,.6)}
.esq{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px}
.esq i,.esq b{display:block;border-radius:10px;background:linear-gradient(90deg,#ECE6D9 25%,#F7F3EA 45%,#ECE6D9 65%) 0 0/200% 100%}
.esq i{width:96px;height:96px}
.esq span{display:grid;gap:10px;align-content:center}
.esq b{height:14px}
.esq b:nth-child(1){width:42%}.esq b:nth-child(2){width:88%}.esq b:nth-child(3){width:56%;height:20px}
.entrar-fixo{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;max-width:520px;margin-inline:auto;padding:8px;border-radius:20px;
  background:rgba(245,242,234,.82);border:1px solid rgba(255,255,255,.75);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.35);translate:0 140%;opacity:0;transition:translate .5s cubic-bezier(.2,.9,.2,1),opacity .3s}
.entrar-fixo.on{translate:0 0;opacity:1}
.entrar-fixo a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:54px;border-radius:14px;background:var(--accent);color:var(--accent-ink);
  font-weight:700;font-size:1.0625rem;text-decoration:none;box-shadow:0 3px 0 #C47D1E}
.entrar-fixo a:active{transform:scale(.97) translateY(1px)}
body.fixo-on .cookies{bottom:calc(94px + env(safe-area-inset-bottom,0px))}
.cookies{transition:bottom .3s ease-out}

/* ---------- Início enxuto: vitrine com 5 ofertas no celular e "Preço conferido" curto ---------- */
.proof-steps{gap:10px}
.proof-steps li{align-items:center}
.proof-steps b{font-size:.9375rem;line-height:1.3}
#ver-mais{margin-top:12px}
@media (max-width:719px){
  .proof-box>div{order:-1}
  #track:not(.tudo) .card:nth-child(n+6){display:none}
}
@media (min-width:720px){#ver-mais{display:none!important}}