/* efeitos e animações (12/11/2026): arquivo único, usado também pelo início */
@import url("/efeitos.css?v=1");
/* Aba Dicas: artigos de compra (mesma identidade do index.html) */
:root{
  --bg:#F5F2EA;--bg-2:#EBE5D8;--surface:#FFFFFF;--ink:#13241E;--muted:#475650;--line:#DDD5C5;
  --pine:#163A2D;--pine-2:#1E4B3B;--pine-ink:#EEF1EA;--pine-muted:#B8C9C0;
  --accent:#F2A23A;--accent-ink:#1E1407;--accent-dark:#A0480A;--tint:#E0ECEE;--petrol:#0F4A57;
  --font:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:100%/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
h1,h2,h3,p,ul,ol{margin:0}
a{color:var(--petrol);text-underline-offset:3px}
.col{max-width:680px;margin-inline:auto;padding-inline:20px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}

/* topo */
.bar{position:sticky;top:0;z-index:20;background:rgba(22,58,45,.94);color:var(--pine-ink);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.bar .col{display:flex;align-items:center;gap:10px;min-height:56px}
.bar .marca{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;min-width:0}
.bar img{width:34px;height:34px;border-radius:50%;flex:none}
.bar b{font:800 1.15rem/1 var(--display);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.bar nav{margin-left:auto}
.bar nav a{color:var(--pine-ink);font-weight:600;font-size:.9375rem;text-decoration:none;padding:8px 4px}
.bar nav a[aria-current]{color:var(--accent)}
@media (max-width:359px){.bar b{font-size:1.02rem}.bar img{width:30px;height:30px}}

/* artigo */
main{padding-block:22px 40px}
.migalha{font-size:.8125rem;color:var(--muted)}
.migalha a{color:var(--muted)}
h1.t{font:800 clamp(2rem,9vw,3rem)/1.05 var(--display);text-transform:uppercase;color:var(--pine);margin-top:8px;text-wrap:balance}
.meta{font-size:.8125rem;color:var(--muted);margin-top:8px}
.lede{font-size:1.0625rem;margin-top:16px}
.capa{margin:18px 0 0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.capa img{width:100%;max-height:220px;object-fit:contain}
.aviso{font-size:.875rem;color:var(--muted);background:var(--tint);border-radius:10px;padding:12px 14px;margin-top:18px}
article h2{font:800 1.6rem/1.15 var(--display);text-transform:uppercase;color:var(--pine);margin:34px 0 10px}
article h3{font:700 1.125rem/1.3 var(--font);color:var(--ink);margin:20px 0 6px}
article p+p{margin-top:12px}
article ul,article ol{padding-left:22px;margin-top:10px}
article li+li{margin-top:6px}
.dica{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:16px}
.dica::before{content:"Dica: ";font-weight:700;color:var(--accent-dark)}

/* ofertas ao vivo */
.ofertas{margin-top:14px}
.ofertas .nota{font-size:.875rem;color:var(--muted);margin-bottom:12px}
.lista{display:grid;gap:12px}
.prod{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px}
.prod figure{margin:0;width:96px;height:96px;border-radius:10px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;overflow:hidden}
.prod figure img{width:100%;height:100%;object-fit:contain}
.prod .s{font-size:.8125rem;color:var(--muted);font-weight:600}
.prod h3{font:600 1rem/1.3 var(--font);margin:2px 0 4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.preco{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.preco s{color:var(--muted);font-size:.875rem}
.preco b{font-size:1.125rem}
.preco .off{background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:.75rem;border-radius:6px;padding:2px 6px}
.prod ul{list-style:none;padding:0;margin:6px 0 0;font-size:.875rem;color:var(--ink)}
.prod li{margin:2px 0 0}
.prod li::before{content:"✓ ";color:var(--accent-dark);font-weight:700}
.ver{grid-column:1/-1;display:block;text-align:center;background:var(--accent);color:var(--accent-ink);font-weight:700;
  border-radius:12px;padding:12px;text-decoration:none;box-shadow:0 3px 0 #C47D1E}
.ver:active{transform:translateY(1px)}
.vazio{background:var(--surface);border:1px dashed var(--line);border-radius:14px;padding:16px;font-size:.9375rem}

/* convite para o grupo */
.grupo{background:var(--pine);color:var(--pine-ink);border-radius:18px;padding:22px 20px;margin-top:36px}
.grupo strong{display:block;font:800 1.75rem/1.1 var(--display);text-transform:uppercase}
.grupo p{color:var(--pine-muted);margin:10px 0 16px}
.grupo a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;background:var(--accent);color:var(--accent-ink);
  font-weight:700;font-size:1.0625rem;border-radius:16px;text-decoration:none;box-shadow:0 3px 0 #C47D1E}
.grupo small{display:block;text-align:center;color:var(--pine-muted);font-size:.875rem;margin-top:10px}

/* lista de artigos */
.itens{display:grid;gap:12px;margin-top:20px}
.item{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:12px;color:inherit;text-decoration:none}
.item:hover{border-color:#C2B8A3}
.item .mini{width:88px;height:88px;border-radius:10px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;overflow:hidden;font-size:34px}
.item .mini img{width:100%;height:100%;object-fit:contain}
.item b{display:block;font-size:1.0625rem;line-height:1.3}
.item small{display:block;color:var(--muted);font-size:.875rem;margin-top:4px}

footer{border-top:1px solid var(--line);padding-block:24px 90px;font-size:.875rem;color:var(--muted)}
footer p+p{margin-top:8px}
footer a{color:var(--muted)}

.cookies{position:fixed;left:12px;right:12px;bottom:12px;z-index:30;display:flex;gap:12px;align-items:center;justify-content:space-between;
  max-width:560px;margin-inline:auto;background:var(--ink);color:#fff;border-radius:14px;padding:12px 14px;font-size:.875rem}
.cookies a{color:#fff}
.cookies button{flex:none;border:0;border-radius:10px;background:var(--accent);color:var(--accent-ink);font:700 .9375rem var(--font);padding:10px 16px;cursor:pointer}

/* v2 (10/11/2026): no computador a lista ocupava só 680 px no meio da tela. Agora o site usa até 1.120 px;
   a lista vira 2 colunas e o texto do artigo continua numa coluna de leitura no centro. */
@media (min-width:900px){
  .col{max-width:1120px;padding-inline:32px}
  main.col>article{max-width:760px;margin-inline:auto}
  main.col>.lede{max-width:70ch}
  .itens{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .item{padding:14px;min-height:116px}
  main.col>.grupo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);column-gap:28px;align-items:center}
  main.col>.grupo strong,main.col>.grupo p{grid-column:1}
  main.col>.grupo a,main.col>.grupo small{grid-column:2}
  main.col>.grupo a{grid-row:1/span 2}
}

/* ===== Dicas v2 (12/11/2026, prévia aprovada previas/previa-dicas-v2/): topo verde do artigo, índice, ofertas numeradas,
   passos, "Outras dicas" e ofertas ao vivo nos cartões da lista. O robô gera a mesma marcação (app/artigos.py). ===== */

/* ================= ARTIGO ================= */

/* Topo verde: título, selos e abertura de um lado, foto do outro */
.ahero{position:relative;overflow:hidden;isolation:isolate;background:var(--pine);color:var(--pine-ink);padding-block:20px 76px}
.ahero>*{position:relative;z-index:1}
.ahero-g{display:grid;gap:26px}
.ahero .migalha,.ahero .migalha a{color:var(--pine-muted)}
.ahero h1.t{margin-top:12px;color:var(--pine-ink);font-size:clamp(2.25rem,9.6vw,3.7rem);line-height:.97;letter-spacing:-.01em}
.ahero .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.ahero .meta span{padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.1);color:var(--pine-ink);font-weight:600;font-size:.8125rem;line-height:1.2}
.ahero .lede{margin-top:16px;max-width:54ch;font-size:1.0625rem;line-height:1.55;color:var(--pine-muted)}
.ahero figure.capa{margin:0;padding:0;border:0;background:none;overflow:visible;display:grid;place-items:center;min-height:168px}
.ahero figure.capa::before,.ahero figure.capa::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(238,241,234,.16)}
.ahero figure.capa::before{width:min(58%,230px)}
.ahero figure.capa::after{width:min(88%,350px);border-color:rgba(238,241,234,.08)}
.ahero figure.capa img,.ahero figure.capa svg{position:relative;z-index:1;width:min(42%,160px);height:auto;max-height:none;aspect-ratio:1;object-fit:contain;
  background:#fff;border-radius:22px;padding:14px;rotate:-5deg;box-shadow:0 22px 36px -18px rgba(0,0,0,.65)}
@media (min-width:900px){
  .ahero{padding-block:44px 100px}
  .ahero-g{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:center;gap:56px}
  .ahero .lede{font-size:1.125rem}
  .ahero figure.capa{min-height:300px}
  .ahero figure.capa::before{width:min(74%,300px)}
  .ahero figure.capa::after{width:min(108%,440px)}
  .ahero figure.capa img,.ahero figure.capa svg{width:min(70%,270px)}
}
@media (prefers-reduced-motion:no-preference){
  .fx .ahero .migalha{animation:sobe .6s .02s both}
  .fx .ahero h1.t{animation:sobe .7s .08s both}
  .fx .ahero .meta{animation:sobe .7s .2s both}
  .fx .ahero .lede{animation:sobe .7s .3s both}
  .ahero figure.capa img,.ahero figure.capa svg{animation:flutua 5s ease-in-out infinite}
}

/* Corpo: coluna de leitura + índice que acompanha (no computador) */
main.amain{padding-top:4px}
.alado{margin-top:14px}
.aindice{display:flex;flex-wrap:wrap;gap:8px}
.aindice b{display:none}
.aindice a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);
  color:var(--ink);font-weight:600;font-size:.875rem;text-decoration:none;transition:background-color .18s,color .18s,border-color .18s}
.alado .mini{display:none}
@media (min-width:1000px){
  main.col.amain{display:grid;grid-template-columns:minmax(0,720px) 290px;justify-content:space-between;column-gap:56px;align-items:start}
  main.col.amain>article{grid-column:1;grid-row:1;max-width:none;margin:0}
  .alado{grid-column:2;grid-row:1;position:sticky;top:76px;margin-top:38px;display:grid;gap:16px}
  .aindice{display:grid;gap:2px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:18px}
  .aindice b{display:block;margin:0 0 8px 10px;font:800 1.2rem/1 var(--display);text-transform:uppercase;color:var(--pine)}
  .aindice a{min-height:0;padding:10px;border:0;border-radius:10px;background:none;color:var(--muted)}
  .aindice a:hover{color:var(--ink)}
  .aindice a.on{background:var(--tint);color:var(--petrol)}
  .alado .mini{display:block;padding:18px;border-radius:18px;background:var(--pine);color:var(--pine-ink)}
  .alado .mini strong{display:block;font:800 1.45rem/1.05 var(--display);text-transform:uppercase}
  .alado .mini p{margin:8px 0 14px;font-size:.875rem;line-height:1.45;color:var(--pine-muted)}
  .alado .mini a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:14px;background:var(--accent);color:var(--accent-ink);
    font-weight:700;font-size:.9375rem;text-decoration:none;box-shadow:0 3px 0 #C47D1E}
  .alado .mini a:active{transform:translateY(1px) scale(.98)}
  .entrar-fixo{display:none}   /* no computador o convite fica no índice ao lado */
}

article>h2{margin-top:42px;font-size:clamp(1.75rem,6.4vw,2.15rem);scroll-margin-top:76px;counter-reset:passo}
article>p{font-size:1.0625rem;line-height:1.65}
/* "Como escolher": cada item vira um passo numerado */
article>h3{counter-increment:passo;display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center;margin:28px 0 8px;font-size:1.1875rem}
article>h3::before{content:counter(passo);width:36px;height:36px;border-radius:10px;background:var(--tint);color:var(--petrol);display:grid;place-items:center;font:800 1.3rem/1 var(--display)}
.aviso{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;margin-top:26px;padding:14px 16px;border-radius:14px;line-height:1.5}
.aviso::before{content:"i";width:22px;height:22px;border-radius:50%;background:var(--petrol);color:#fff;display:grid;place-items:center;font:700 .8125rem/1 var(--font)}
.dica{margin-top:26px;padding:18px 18px 18px 64px;border:0;border-radius:18px;color:var(--pine-ink);font-size:1rem;line-height:1.55;
  background:var(--pine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2A23A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='14' cy='4.5' r='2'/%3E%3Cpath d='M14 6.5V16a5 5 0 0 1-10 0v-2l3 2'/%3E%3C/svg%3E") 18px 18px/32px no-repeat}
.dica::before{content:"Dica de pescador";display:block;margin-bottom:4px;font:800 1.05rem/1.1 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}

/* Ofertas: posição, preço grande e botão verde (laranja fica só para entrar no grupo) */
.ofertas .nota{margin-bottom:16px}
.lista{counter-reset:pos;gap:14px}
.prod{position:relative;counter-increment:pos;grid-template-columns:104px minmax(0,1fr);gap:14px;padding:14px;border-radius:18px}
.prod figure{position:relative;width:104px;height:104px;border-radius:14px}
[data-ofertas] .prod figure::after{content:counter(pos);position:absolute;left:5px;top:5px;min-width:24px;height:24px;padding:0 6px;border-radius:8px;background:var(--pine);color:var(--pine-ink);
  font:800 .9375rem/24px var(--display);text-align:center}
.prod h3{font-size:1.0625rem}
.preco{margin-top:2px}
.preco b{font:800 clamp(1.35rem,6.2vw,1.75rem)/1 var(--display);color:var(--pine)}
.preco .off{padding:4px 8px;border-radius:8px;font-size:.8125rem}
.prod li::before{color:var(--petrol)}
.ver{padding:13px 16px;border-radius:12px;background:var(--pine);color:var(--pine-ink);box-shadow:none;transition:transform .12s ease-out,background-color .18s}
.ver::after{content:" →"}
.ver:hover{background:var(--pine-2)}
.ver:active{transform:scale(.98)}
[data-ofertas] .prod:first-child:has(.off){border:2px solid var(--pine);margin-top:10px}
[data-ofertas] .prod:first-child:has(.off)::before{content:"Maior desconto";position:absolute;left:14px;top:-12px;padding:5px 11px;border-radius:999px;background:var(--pine);color:var(--pine-ink);
  font:700 .75rem/1 var(--font);letter-spacing:.05em;text-transform:uppercase}
@media (min-width:700px){
  [data-ofertas] .prod{grid-template-columns:128px minmax(0,1fr) auto;align-items:center;gap:18px;padding:16px}
  [data-ofertas] .prod figure{width:128px;height:128px}
  [data-ofertas] .prod .ver{grid-column:3;white-space:nowrap}
}

/* Convite do fim do artigo com os anéis de água */
.grupo{position:relative;overflow:hidden;margin-top:44px;padding:26px 22px}
.grupo::before,.grupo::after{content:"";position:absolute;right:-70px;top:-70px;width:220px;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(238,241,234,.12);pointer-events:none}
.grupo::after{width:340px;right:-130px;top:-130px;border-color:rgba(238,241,234,.07)}
.grupo>*{position:relative}

/* Outras dicas, no fim do artigo */
.outras{padding-bottom:44px}
.outras>h2{margin-bottom:16px;font:800 clamp(1.75rem,6.4vw,2.15rem)/1 var(--display);text-transform:uppercase;color:var(--pine)}
.outras .cartoes{grid-template-columns:1fr}
.outras .cartao b{font-size:1.3rem}
.outras .cena{aspect-ratio:16/7}
@media (min-width:760px){.outras .cartoes{grid-template-columns:repeat(3,minmax(0,1fr))}.outras .cena{aspect-ratio:16/9}}

/* ================= LISTA ================= */
.num{position:absolute;right:14px;top:4px;font:800 3.6rem/1 var(--display);color:rgba(238,241,234,.13);letter-spacing:-.02em}
.dresumo{display:inline-flex;align-items:center;gap:8px;margin:16px 0 0;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.1);color:var(--pine-ink);font-weight:600;font-size:.875rem;font-variant-numeric:tabular-nums}
.dresumo i,.aovivo i{position:relative;width:8px;height:8px;border-radius:50%;background:#5BD27A;flex:none}
.aovivo{position:absolute;z-index:2;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:var(--pine-ink);color:var(--pine);
  font:700 .8125rem/1 var(--font);font-variant-numeric:tabular-nums;box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
.aovivo i{background:#2E9E57}
@media (prefers-reduced-motion:no-preference){
  .dresumo i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#5BD27A;animation:pulso 1.9s ease-out infinite}
  .aovivo{animation:pop .5s both}
  .fx .dtopo .dresumo{animation:sobe .6s both}
}