/* Tema temporário COLOR FRIDAY — peças encaixadas por colorfriday.py; tudo aqui só vale com html[data-tema^="color-friday"] */
:root{--cf-creme:#FBF4D8;--cf-lima:#A3BC2A;--cf-laranja:#DF892D;--cf-coral:#DF4A36;--cf-amarelo:#FFCD4C;--cf-magenta:#D8256B;--cf-azulc:#B9DEE8;--cf-rosa:#FF97CF;--cf-azul:#1B94B5;--cf-tinta:#9E2C1F;
  --cf-bloco:Archivo,"Archivo Black",Impact,sans-serif;--cf-cond:Anton,Impact,sans-serif;--cf-mao:Yellowtail,"Great Vibes",cursive;--cf-faixa:34px}
html:not([data-tema="color-friday"]) .cf-so{display:none !important}
html:not([data-tema^="color-friday"]) .cf-faixa{display:none !important}
[data-tema="color-friday"] .cf-nao,[data-tema="color-friday"] #hero,[data-tema="color-friday"] #hero + .fita-corre{display:none !important}
.cf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cf-bloco{font-family:var(--cf-bloco);font-stretch:125%;font-weight:900;text-transform:uppercase}

/* ---------- faixa do topo com contagem ---------- */
.cf-faixa{display:flex;align-items:stretch;height:var(--cf-faixa);background:var(--cf-coral);color:var(--cf-creme);font:900 .8rem/1 var(--cf-bloco);font-stretch:125%;text-transform:uppercase;letter-spacing:.04em}
.cf-faixa-trilho{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center}
.cf-faixa-trilho>div{display:flex;align-items:center;gap:16px;width:max-content;white-space:nowrap;animation:cf-corre 38s linear infinite;will-change:transform}
.cf-mini{width:13px;height:13px;flex:none}
.cf-conta-faixa{display:flex;align-items:center;flex:none;padding:0 14px;background:var(--cf-amarelo);color:var(--cf-tinta);white-space:nowrap;font-variant-numeric:tabular-nums}
.cf-conta-faixa:empty{display:none}
@keyframes cf-corre{to{translate:-33.333% 0}}
[data-tema^="color-friday"] .sec-hero,[data-tema^="color-friday"] .cf-hero{padding-top:calc(clamp(96px,12vw,140px) + var(--cf-faixa))}

/* ---------- botões ---------- */
.cf-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 26px;border-radius:14px;background:var(--cf-coral);color:var(--cf-creme) !important;text-decoration:none;
  font:900 .95rem/1 var(--cf-bloco);font-stretch:125%;text-transform:uppercase;letter-spacing:.02em;box-shadow:0 5px 0 var(--cf-tinta);transition:translate .15s,box-shadow .15s}
.cf-btn:hover{translate:0 -2px;box-shadow:0 7px 0 var(--cf-tinta)}
.cf-btn:active{translate:0 4px;box-shadow:0 1px 0 var(--cf-tinta)}
.cf-btn-2{background:transparent;color:var(--cf-coral) !important;box-shadow:inset 0 0 0 3px var(--cf-coral)}
.cf-btn-2:hover,.cf-btn-2:active{box-shadow:inset 0 0 0 3px var(--cf-coral)}

/* ---------- desenhos ---------- */
.cf-expl{position:absolute;pointer-events:none}
.cf-estrela{position:absolute;pointer-events:none}
.cf-expl,.cf-estrela,.cf-mini,.cf-fita-e{display:block;aspect-ratio:1}
.cf-expl>svg,.cf-estrela>svg,.cf-mini>svg,.cf-fita-e>svg{display:block;width:100%;height:100%}
@keyframes cf-gira{to{rotate:360deg}}
@keyframes cf-brilha{50%{scale:.72;rotate:20deg}}
.cf-tag svg,.cf-hero-selo svg,.cf-cab-selo svg{display:block;width:100%;height:auto}
.selo-volta{transform-origin:120px 120px;animation:selo-gira 28s linear infinite}
@keyframes selo-gira{to{rotate:360deg}}
.cf-cordao{position:absolute;left:50%;width:2px;background:var(--cf-tinta);translate:-1px 0}
@keyframes cf-chega{0%{rotate:9deg}22%{rotate:-6deg}44%{rotate:3.5deg}66%{rotate:-1.5deg}84%{rotate:.6deg}100%{rotate:0deg}}

/* ---------- topo da campanha (home) ---------- */
.cf-hero{background:var(--cf-creme);color:var(--cf-coral);padding-bottom:clamp(56px,8vw,96px)}
.cf-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,72px);align-items:center}
.cf-hero-txt{position:relative;min-width:0}
.cf-expl-1{width:clamp(76px,9vw,116px);top:-30px;left:-18px;z-index:0;opacity:.95}
.cf-kicker{position:relative;margin:0 0 14px;padding-left:clamp(84px,9.5vw,124px);min-height:40px;display:flex;align-items:center;font:800 .82rem/1.2 Figtree,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--cf-magenta)}
.cf-titulo{position:relative;margin:0;font:900 clamp(3.3rem,8.6vw,7.4rem)/.84 var(--cf-bloco);font-stretch:125%;text-transform:uppercase;letter-spacing:-.01em;color:var(--cf-coral)}
.cf-datas{position:relative;display:inline-block;margin:18px 0 0;font:900 clamp(2rem,4.6vw,3.6rem)/.9 var(--cf-bloco);font-stretch:125%;text-transform:uppercase;color:var(--cf-coral)}
.cf-e1{width:.95em;height:.95em;right:-1.25em;top:-.15em}
.cf-sub{margin:20px 0 0;padding-bottom:16px;max-width:15ch;border-bottom:3px solid var(--cf-laranja);font:900 clamp(1.45rem,3vw,2.3rem)/.95 var(--cf-bloco);font-stretch:125%;text-transform:uppercase;color:var(--cf-coral)}
.cf-lead{margin:18px 0 0;max-width:42ch;color:#5B2A22;font-size:1.05rem;line-height:1.55}
.cf-lead b{color:var(--cf-coral)}
.cf-botoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.cf-quando{margin:22px 0 0}
.cf-quando .cf-conta{display:inline-block;padding:8px 14px;border-radius:99px;background:var(--cf-rosa);color:var(--cf-tinta);font:900 .85rem/1 var(--cf-bloco);font-stretch:125%;text-transform:uppercase;font-variant-numeric:tabular-nums}
.cf-quando .cf-conta:empty{display:none}
.cf-hero-foto{position:relative;justify-self:center;width:min(100%,420px)}
.cf-hero-foto>img{display:block;width:100%;height:clamp(440px,62vh,600px);object-fit:cover;border-radius:999px 999px 26px 26px;border:6px solid var(--cf-azulc);background:var(--cf-azulc)}
.cf-hero-tag{position:absolute;top:12%;right:-34px;width:clamp(78px,8vw,104px);transform-origin:50% -46px;z-index:3}
.cf-hero-tag .cf-cordao{top:-46px;height:56px}
.cf-hero-selo{position:absolute;left:-58px;bottom:7%;width:clamp(140px,14vw,184px);z-index:3;rotate:-10deg}
.cf-e2{width:48px;height:48px;left:-26px;top:16%;color:var(--cf-amarelo)}
.cf-e3{width:34px;height:34px;right:8%;bottom:-16px;animation-delay:-1.2s}

/* ---------- desconto progressivo ---------- */
.cf-prog{background:var(--cf-azulc) !important;color:var(--cf-coral);text-align:center}
.cf-expl-2{width:clamp(130px,16vw,230px);top:-40px;right:-40px;opacity:.9}
.cf-expl-3{width:clamp(100px,12vw,170px);bottom:-30px;left:-30px;opacity:.9;animation-direction:reverse}
.cf-h2{margin:0;font:900 clamp(2rem,5vw,3.6rem)/.95 var(--cf-bloco);font-stretch:125%;text-transform:uppercase;color:var(--cf-coral);text-decoration:underline;text-decoration-thickness:.09em;text-underline-offset:.12em}
.cf-prog-lead{max-width:44ch;margin:18px auto 0;color:#3F2A2A;font-size:1.05rem;line-height:1.55}
.cf-prog-lead b{color:var(--cf-coral)}
.cf-degraus{position:relative;display:flex;justify-content:center;gap:clamp(18px,5vw,64px);list-style:none;margin:40px auto 0;padding:0;max-width:760px}
.cf-degraus::before{content:"";position:absolute;left:-4%;right:-4%;top:-1px;height:3px;border-radius:3px;background:var(--cf-tinta)}
.cf-degrau{position:relative;width:clamp(92px,16vw,150px);padding-top:30px;transform-origin:50% 0}
.cf-degrau .cf-cordao{top:0;height:calc(30px + 4%)}
.cf-degrau .cf-tag{transition:scale .3s cubic-bezier(.3,1.6,.5,1)}
.cf-degrau:hover .cf-tag,.cf-degrau.on .cf-tag{scale:1.07}
.cf-degrau.on::after{content:"você está aqui";position:absolute;left:50%;bottom:-30px;translate:-50% 0;white-space:nowrap;font:700 1.35rem/1 var(--cf-mao);color:var(--cf-magenta)}
.cf-prog-cta{margin:46px 0 0}
.cf-degraus{max-width:900px}
.cf-degrau-50{margin-left:clamp(10px,3vw,40px)}
.cf-degrau-50::before{content:"";position:absolute;left:calc(-1 * clamp(14px,4vw,52px));top:24px;bottom:10%;border-left:3px dashed rgba(158,44,31,.35)}
.cf-prog-nota{max-width:46ch;margin:44px auto 0;color:#3F2A2A;font-size:.95rem}
.cf-prog-nota b{color:var(--cf-magenta)}

/* ---------- fita colorida ---------- */
.cf-fita{border-block-color:rgba(223,74,54,.35)}
.cf-fita div{font:900 clamp(1.05rem,2.6vw,1.5rem)/1 var(--cf-bloco) !important;font-stretch:125% !important}
.cf-fita .cf-f1{color:var(--cf-rosa);-webkit-text-stroke:1px var(--cf-magenta)}
.cf-fita-e{width:26px;height:26px;flex:none}

/* ---------- a festa colorida do ano ---------- */
.cf-festa{position:relative;overflow:hidden;background:var(--cf-amarelo);text-align:center;padding:clamp(80px,12vw,150px) 20px clamp(70px,10vw,120px);z-index:1}
.cf-ef1{width:clamp(180px,26vw,340px);top:-70px;left:-60px}
.cf-ef2{width:clamp(90px,11vw,150px);top:22%;right:-30px;animation-direction:reverse}
.cf-ef3{width:clamp(80px,9vw,130px);bottom:12%;left:-34px;animation-direction:reverse}
.cf-ef4{width:clamp(150px,20vw,280px);bottom:-150px;right:6%}
.cf-festa-t{position:relative;margin:0;display:flex;flex-direction:column;align-items:center}
.cf-festa-a,.cf-festa-d{font:italic 900 clamp(1.8rem,5vw,3.6rem)/1 var(--cf-bloco);font-stretch:125%;text-transform:uppercase}
.cf-festa-a{color:var(--cf-azul);display:flex;gap:.2em}
.cf-festa-a i{width:2.6em}
.cf-festa-c{font:400 clamp(4rem,13vw,9.4rem)/.8 var(--cf-mao);color:var(--cf-magenta);rotate:-6deg;margin:-.18em 0 -.05em;text-shadow:3px 3px 0 rgba(255,255,255,.45)}
.cf-festa-d{color:var(--cf-coral);padding-left:1.6em}
.cf-festa-s{position:relative;margin:22px 0 26px;font:800 .9rem/1.3 Figtree,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--cf-tinta)}
.cf-festa .cf-btn{position:relative}

/* ---------- o resto do site nas cores da campanha ---------- */
[data-tema="color-friday"] #novidades{--bg:#DF4A36 !important}
[data-tema="color-friday"] .estampa-meio,[data-tema="color-friday"] .estampa{border-color:var(--cf-amarelo)}
[data-tema="color-friday"] #sobre{--bg:#FBF4D8 !important}
[data-tema="color-friday"] .onda[style*="--b:#0F9C92"]{--a:#FBF4D8 !important;--b:#1B94B5 !important}
[data-tema="color-friday"] #comprar{--bg:#1B94B5 !important}
[data-tema="color-friday"] .onda[style*="--a:#0F9C92"]{--a:#1B94B5 !important;--b:#F6D9D6 !important}
[data-tema="color-friday"] .cta-fixo .btn-cat{background:var(--cf-coral) !important;color:var(--cf-creme) !important}
[data-tema="color-friday"] .link-loja{background:var(--cf-coral)}

/* ---------- loja ---------- */
[data-tema="color-friday"] .cab{background:var(--cf-creme);padding:30px 0 26px}
[data-tema="color-friday"] .cab .wrap>:not(.cf-cab),[data-tema="color-friday"] .cab-adesivo{display:none !important}
.cf-cab{position:relative;display:grid;grid-template-columns:1fr auto auto;gap:28px;align-items:center;color:var(--cf-coral)}
.cf-cab .cf-kicker{padding-left:0;min-height:0;margin-bottom:8px}
.cf-cab .cf-titulo{font-size:clamp(2.3rem,5.4vw,4.2rem);line-height:.9}
.cf-cab-p{margin:12px 0 0;color:#5B2A22}
.cf-cab-p .cf-conta{display:inline-block;margin-left:6px;padding:5px 11px;border-radius:99px;background:var(--cf-rosa);color:var(--cf-tinta);font:900 .74rem/1 var(--cf-bloco);font-stretch:125%;text-transform:uppercase;font-variant-numeric:tabular-nums}
.cf-cab-p .cf-conta:empty{display:none}
.cf-expl-l{width:120px;top:-50px;right:30%;opacity:.55}
.cf-mini-degraus{position:relative;display:flex;gap:10px;list-style:none;margin:0;padding:0}
.cf-mini-degraus li{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:78px;padding:20px 6px 12px;border-radius:12px;color:var(--cf-creme);transition:translate .3s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
.cf-mini-degraus li::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--cf-creme);position:absolute;top:6px}
.cf-mini-degraus li:nth-child(1){background:var(--cf-lima)}
.cf-mini-degraus li:nth-child(2){background:var(--cf-coral);color:var(--cf-azulc)}
.cf-mini-degraus li:nth-child(3){background:var(--cf-amarelo);color:var(--cf-azul)}
.cf-mini-degraus li.cf-mini-50{background:var(--cf-magenta);color:var(--cf-amarelo);margin-left:8px}
.cf-mini-degraus b{font:900 1.6rem/1 var(--cf-bloco);font-stretch:125%}
.cf-mini-degraus span{font:800 .7rem/1 Figtree,sans-serif;text-transform:uppercase;letter-spacing:.06em}
.cf-mini-degraus li.on{translate:0 -6px;box-shadow:0 0 0 3px var(--cf-creme),0 0 0 6px var(--cf-tinta)}
.cf-cab-selo{width:120px;rotate:-8deg}
[data-tema="color-friday"] .card-img::after{content:"até 40% off";position:absolute;left:8px;bottom:8px;z-index:2;padding:5px 8px;border-radius:6px;background:var(--cf-coral);color:var(--cf-creme);font:900 .62rem/1 var(--cf-bloco);font-stretch:125%;text-transform:uppercase;letter-spacing:.02em;pointer-events:none}
[data-tema="color-friday"] .card.cf50 .card-img::after{content:"50% off";background:var(--cf-magenta);font-size:.8rem;padding:6px 10px}
[data-tema="color-friday"] .card.sem-estoque .card-img::after{display:none}
.cf-pd-50{border-color:var(--cf-magenta)}
.cf-pd-50 b{color:var(--cf-magenta)}
.cf-pd{margin:10px 0 2px;padding:10px 12px;border-radius:12px;background:var(--cf-creme);border:2px dashed var(--cf-coral);color:var(--cf-tinta);font-size:.88rem;line-height:1.4}
.cf-pd b{color:var(--cf-coral)}
.cf-meta{margin:0 0 12px;padding:12px 14px;border-radius:14px;background:var(--cf-creme);color:var(--cf-tinta);font-size:.88rem;line-height:1.35}
.cf-meta b{color:var(--cf-coral)}
.cf-meta-barra{display:flex;gap:4px;margin-top:9px}
.cf-meta-barra i{flex:1;height:8px;border-radius:9px;background:rgba(223,74,54,.18);transition:background .4s}
.cf-meta-barra i.ok{background:var(--cf-coral)}
.linha-desc{display:flex;justify-content:space-between;color:var(--cf-coral);font-weight:800}
.linha-de s{opacity:.6}

@media (max-width:899px){
  .cf-hero-grid{grid-template-columns:1fr}
  .cf-hero-foto{width:min(78%,340px);margin-top:8px}
  .cf-hero-foto>img{height:min(440px,108vw)}
  .cf-hero-selo{left:-22%;width:128px}
  .cf-hero-tag{right:-22px;width:70px}
  .cf-cab{grid-template-columns:1fr;gap:16px}
  .cf-cab-selo{position:absolute;top:-12px;right:-6px;width:84px}
  .cf-cab .cf-titulo{padding-right:80px}
}
@media (max-width:560px){
  :root{--cf-faixa:30px}
  .cf-faixa{font-size:.7rem}
  .cf-conta-faixa{padding:0 10px}
  .cf-botoes .cf-btn{flex:1 1 100%}
  .cf-kicker{font-size:.72rem;letter-spacing:.14em;margin-bottom:22px}
  .cf-titulo{font-size:clamp(3.3rem,15.5vw,4.6rem)}
  .cf-degraus{gap:12px}
  .cf-degraus{gap:8px}
  .cf-degrau{width:21vw}
  .cf-degrau-50{margin-left:6px}
  .cf-degrau-50::before{display:none}
  .cf-degrau.on::after{font-size:1.1rem;bottom:-26px}
  .cf-mini-degraus{gap:6px}
  .cf-mini-degraus li{flex:1;width:auto;min-width:0;padding:18px 4px 10px}
  .cf-mini-degraus b{font-size:1.25rem}
  .cf-mini-degraus span{font-size:.6rem}
  .cf-mini-degraus li.cf-mini-50{margin-left:4px}
  .cf-cab-p .cf-conta{display:table;margin:8px 0 0}
}
@media (prefers-reduced-motion:reduce){
  .cf-faixa-trilho>div,.cf-expl,.cf-estrela,.cf-hero-tag,.cf-degrau,.selo-volta{animation:none !important}
}

/* desempenho: animação só roda na parte que está na tela (cf.js põe .cf-vivo); selos parados */
/* animações: só na parte que está na tela (cf.js põe .cf-vivo). Os desenhos ficam dentro de <span> — o Chrome anima <span> na placa de vídeo, o <svg> não */
.cf-vivo .cf-expl{animation:cf-gira 50s linear infinite}
.cf-vivo .cf-expl:nth-of-type(even){animation-direction:reverse}
.cf-vivo .cf-estrela{animation:cf-brilha 2.6s ease-in-out infinite}
.cf-vivo .cf-hero-tag,.cf-vivo .cf-degrau{animation:cf-vai 3.4s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.9s)}
@media (hover:hover){.cf-vivo .cf-degrau:hover,.cf-vivo .cf-hero-tag:hover{animation:cf-chega 1.4s ease-out}}
.cf-fita:not(.cf-vivo)>div{animation:none !important}
@keyframes cf-vai{0%,100%{rotate:0deg}25%{rotate:2.6deg}75%{rotate:-2.6deg}}
[data-tema^="color-friday"] .topo,[data-tema^="color-friday"] .topo.solido{backdrop-filter:none;background:var(--cf-creme)}
.cf-hero-selo .selo-volta,.cf-cab-selo .selo-volta{animation:none !important}
.item-50{color:var(--cf-magenta)}
@media (min-width:761px){[data-tema^="color-friday"] .bilhete{top:calc(78px + var(--cf-faixa))}}
