/* Garimpinhos — folha da NRS.
 *
 * Extraida do mockup APROVADO pelos donos (docs/mockup.html no repo do tema).
 * O mockup e especificacao, nao rascunho: qualquer divergencia visual aqui e
 * defeito a corrigir, nao adaptacao a plataforma.
 *
 * NRS · Sites, aplicativos, sistemas & IA · oi@n-rs.dev
 */

:root{
  --creme:#F4F0E0; --papel:#FBF8EF; --cafe:#2B2620; --cafe2:#6E6355;
  --laranja:#E87B3B; --laranja2:#F0975C;
  --rosa:#F5A8B8; --menta:#9ED4B5; --ceu:#9CC8E8; --sol:#F5C86B;
  --red:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
/* overflow-x:CLIP, não hidden: hidden no body vira contêiner de rolagem no
   Safari iOS e mata o position:sticky — era isso que impedia o varal de
   grudar no celular. clip corta o vazamento sem criar rolagem. */
body{margin:0;background:var(--creme);color:var(--cafe);font-family:var(--red);overflow-x:clip;transition:background-color .8s ease}
body.modo-desapega{background-color:#C25A1F}
body.modo-desapega .lava{opacity:0}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.14 0 0 0 0 0.12 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

.lava{position:fixed;border-radius:46% 54% 58% 42%/48% 42% 58% 52%;filter:blur(2px);z-index:0;
  transition:opacity .8s ease;
  animation:morfa 16s ease-in-out infinite alternate, boia 9s ease-in-out infinite alternate}
.lava.b1{width:min(44vmax,660px);height:min(44vmax,660px);left:-14vmax;top:-10vmax;background:radial-gradient(circle at 30% 30%,#F7DFC4,#F3C89B)}
.lava.b2{width:min(34vmax,520px);height:min(34vmax,520px);right:-10vmax;top:16vh;background:radial-gradient(circle at 35% 30%,#FBD9DF,var(--rosa));opacity:.8;animation-delay:-5s,-4s}
.lava.b3{width:min(30vmax,460px);height:min(30vmax,460px);left:4vmax;bottom:-12vmax;background:radial-gradient(circle at 35% 30%,#CDEBDA,var(--menta));opacity:.8;animation-delay:-9s,-1s}
.lava.b4{width:min(22vmax,340px);height:min(22vmax,340px);right:16vw;bottom:8vh;background:radial-gradient(circle at 35% 30%,#CEE4F6,var(--ceu));opacity:.75;animation-delay:-12s,-6s}
@keyframes morfa{0%{border-radius:46% 54% 58% 42%/48% 42% 58% 52%}50%{border-radius:58% 42% 40% 60%/42% 58% 44% 56%}100%{border-radius:40% 60% 55% 45%/56% 44% 60% 40%}}
@keyframes boia{from{transform:translateY(-2vh) rotate(-1.5deg)}to{transform:translateY(2vh) rotate(1.5deg)}}

.mundo{position:relative;z-index:1}
.vidro{background:linear-gradient(135deg,rgba(255,255,255,.52),rgba(255,255,255,.22));
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(43,38,32,.05),0 14px 40px -18px rgba(43,38,32,.35)}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit;padding:0}

/* ── nav cápsula ── */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:11px;padding:9px 12px 9px 14px;border-radius:999px;width:min(760px,93vw);
  transition:padding .3s ease,width .3s ease}
.nav img{height:50px;cursor:pointer;transition:height .3s ease,transform .2s cubic-bezier(.34,1.6,.64,1)}
.nav img:hover{transform:rotate(-4deg) scale(1.06)}
/* rolou: a cápsula compacta e sai da frente do conteúdo */
.nav.rolada{padding:5px 8px 5px 11px;width:min(700px,93vw)}
.nav.rolada img{height:34px}
.nav.rolada .menu-btn,.nav.rolada .ver-tudo{padding:7px 12px}
.nav.rolada .busca{padding:7px 12px}
.nav .menu-btn{display:flex;align-items:center;gap:7px;font:800 13px var(--red);color:var(--cafe);
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:9px 15px;
  transition:transform .15s cubic-bezier(.34,1.6,.64,1),padding .3s ease}
.nav .menu-btn:hover{transform:scale(1.06)}
.nav .ver-tudo{font:800 13px var(--red);color:var(--cafe);background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:9px 15px;white-space:nowrap;
  transition:transform .15s cubic-bezier(.34,1.6,.64,1),padding .3s ease}
.nav .ver-tudo:hover{transform:scale(1.06)}
@media (max-width:640px){.nav .ver-tudo{display:none}}
.nav .menu-btn i{display:flex;flex-direction:column;gap:3px;font-style:normal}
.nav .menu-btn i b{width:14px;height:2px;border-radius:2px;background:var(--cafe);display:block}
.nav .busca{flex:1;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--cafe2);cursor:text;
  background:rgba(255,255,255,.55);border-radius:999px;padding:9px 14px;border:1px solid rgba(255,255,255,.7);
  transition:padding .3s ease,box-shadow .2s}
.nav .busca:focus-within{box-shadow:0 0 0 2.5px rgba(232,123,59,.45)}
.nav .busca input{flex:1;min-width:0;border:0;background:none;outline:none;font:600 13px var(--red);color:var(--cafe)}
.nav .busca input::placeholder{color:var(--cafe2)}
.nav .busca svg{flex-shrink:0}
.nav .sacola{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  transition:transform .15s cubic-bezier(.34,1.6,.64,1);cursor:pointer;
  background:linear-gradient(180deg,var(--laranja2),var(--laranja));color:#fff;font-weight:800;font-size:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 14px -6px rgba(232,123,59,.8)}
.nav .sacola:hover{transform:scale(1.1)}
.nav .sacola i{position:absolute;top:-3px;right:-3px;width:16px;height:16px;border-radius:50%;background:var(--cafe);color:#fff;font:800 9px/16px var(--red);text-align:center;font-style:normal}
@media (max-width:560px){.nav .busca{display:none}}

/* ── menu overlay de categorias ── */
.menu-overlay{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(43,38,32,.25);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.menu-overlay.aberto{display:flex}
.menu-caixa{width:min(560px,94vw);border-radius:30px;padding:26px;position:relative;animation:menu-entra .3s cubic-bezier(.34,1.4,.64,1) both;
  max-height:calc(100svh - 36px);overflow-y:auto}
@keyframes menu-entra{from{opacity:0;transform:scale(.94) translateY(14px)}}
.menu-caixa h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--cafe2);margin:14px 0 10px;font-family:var(--mono);font-weight:600}
.menu-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.menu-cat{border-radius:20px;padding:18px 10px;text-align:center;font:800 15px var(--red);transition:transform .15s cubic-bezier(.34,1.4,.64,1)}
.menu-cat:hover{transform:scale(1.05) rotate(-1deg)}
.menu-cat small{display:block;font:600 9.5px var(--mono);color:var(--cafe2);margin-top:3px;text-transform:uppercase;letter-spacing:.06em}
.menu-idades{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
/* bolhas menores dentro do menu, sem flutuação (o overlay já tem movimento) */
.menu-idades .bolha{width:68px;height:68px;font-size:13.5px;animation:none}
.menu-idades .bolha small{font-size:8px}
.menu-secoes{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding-bottom:14px;max-width:420px;margin:0 auto}
.mini-portal{position:relative;transform:rotate(var(--rot,0deg));cursor:pointer;
  transition:transform .2s cubic-bezier(.34,1.5,.64,1)}
.mini-portal:hover{transform:rotate(0deg) translateY(-5px) scale(1.04);z-index:2}
.mini-portal .portal-foto{aspect-ratio:3/3.3;border-radius:999px 999px 22px 22px}
.mini-portal .portal-nome{bottom:-12px;font-size:13.5px;padding:8px 16px;display:flex;flex-direction:column;gap:1px}
.mini-portal .portal-nome small{font:600 8.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cafe2)}
.menu-pecas{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.menu-peca{display:inline-flex;align-items:center;gap:6px;font:700 12.5px var(--red);color:var(--cafe);
  padding:8px 13px;border-radius:999px;
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.75);
  transition:transform .13s cubic-bezier(.34,1.6,.64,1)}
.menu-peca:hover{transform:scale(1.07)}
/* ícone flat (mesmo desenho do motinho): forma chapada, laranja */
.menu-peca svg{width:14px;height:14px;fill:var(--laranja);flex-shrink:0}
.menu-pe{display:flex;gap:10px;margin-top:22px}
.menu-desapego{font:800 14px var(--red);color:var(--cafe);padding:0 18px;border-radius:999px;min-height:48px;
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.75);white-space:nowrap;
  transition:transform .15s cubic-bezier(.34,1.6,.64,1)}
.menu-desapego:hover{transform:scale(1.05)}
/* entrada em escada dos blocos do menu */
.menu-caixa>*{animation:menu-filho .4s cubic-bezier(.34,1.4,.64,1) both}
.menu-caixa>*:nth-child(2){animation-delay:.05s}
.menu-caixa>*:nth-child(3){animation-delay:.1s}
.menu-caixa>*:nth-child(4){animation-delay:.15s}
.menu-caixa>*:nth-child(5){animation-delay:.2s}
.menu-caixa>*:nth-child(6){animation-delay:.25s}
.menu-caixa>*:nth-child(7){animation-delay:.3s}
.menu-caixa>*:nth-child(8){animation-delay:.35s}
@keyframes menu-filho{from{opacity:0;transform:translateY(12px)}}
.menu-x{position:absolute;top:14px;right:16px;font:800 14px var(--red);color:var(--cafe2)}

/* ── views ── */
.view{display:none}
.view.ativa{display:block}
.secao{padding:112px 18px;max-width:1080px;margin:0 auto;position:relative}
/* título de seção na voz da marca: laranja gorducho, centrado, assinado com o
   arco do logo — nada de h2 preto seco destoando da página */
.secao>h2{font-size:clamp(26px,4.6vw,42px);font-weight:800;margin:0 0 10px;letter-spacing:-.01em;
  color:var(--laranja);text-align:center;transition:color .5s}
body.modo-desapega .secao>h2{color:#FBF4E6}
.secao>h2::after{content:"";display:block;width:66px;height:5px;border-radius:99px;margin:14px auto 0;
  background:linear-gradient(90deg,var(--sol),var(--rosa),var(--menta),var(--ceu))}
.secao>.sub{color:var(--cafe2);font-weight:600;margin:0 auto 30px;font-size:14.5px;text-align:center;max-width:54ch}
.cta{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 28px;border-radius:999px;color:#fff;font:800 16px var(--red);
  background:linear-gradient(180deg,var(--laranja2) 0%,var(--laranja) 55%,#D96C2C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.08),0 14px 30px -12px rgba(232,123,59,.8);
  transition:transform .15s cubic-bezier(.23,1,.32,1)}
.cta:hover{transform:translateY(-2px) scale(1.02)}
.volta{font:800 13px var(--red);color:var(--cafe2);display:inline-flex;align-items:center;gap:6px;margin-bottom:14px}

/* ── HOME: herói compacto ── */
.heroi{min-height:88svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 18px 30px}
.logo-heroi{height:clamp(130px,18vw,190px);margin-bottom:20px;animation:boia 7s ease-in-out infinite alternate;filter:drop-shadow(0 10px 22px rgba(43,38,32,.25))}
.heroi .olho{font:700 11px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#B4581E;background:rgba(255,255,255,.5);padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.7)}
.heroi h1{font-size:clamp(40px,8.4vw,92px);line-height:.98;font-weight:800;margin:18px 0 12px;letter-spacing:-.015em}
.heroi h1 .l{display:inline-block;animation:entra-letra .7s cubic-bezier(.34,1.45,.64,1) both}
.heroi h1 em{font-style:normal;color:var(--laranja);position:relative;display:inline-block}
.heroi h1 em::after{content:"";position:absolute;left:2%;right:2%;bottom:.05em;height:.13em;border-radius:99px;background:linear-gradient(90deg,var(--sol),var(--rosa),var(--menta),var(--ceu));opacity:.85;z-index:-1;animation:arco-cresce 1.1s cubic-bezier(.23,1,.32,1) .6s both}
@keyframes arco-cresce{from{transform:scaleX(0)}}
@keyframes entra-letra{
  0%{opacity:0;transform:translateY(32px) rotate(7deg) scaleY(.7)}
  60%{opacity:1;transform:translateY(-7px) rotate(-3deg) scaleY(1.12)}
  100%{opacity:1;transform:none}}
.heroi p{max-width:46ch;color:var(--cafe2);font-size:15.5px;font-weight:600;margin:0 0 22px}

/* ── VARAL: a assinatura ── */
/* Pista alta: o "quanto" de página que a seção sequestra. O palco fica
   grudado enquanto ela passa, e o progresso vertical vira deslocamento
   horizontal do varal — sem barra de rolagem, sem gesto lateral. */
.varal-pista{height:260vh;position:relative}
.varal-palco{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:84px}
.varal{position:relative;display:flex;gap:26px;padding:34px 30px 40px;width:max-content;will-change:transform}
.varal::before{content:"";position:absolute;top:16px;left:-40px;right:-40px;height:3px;border-radius:3px;
  background:repeating-linear-gradient(90deg,#B7A990 0 14px,transparent 14px 20px)}
/* o trecho do fio já percorrido acende em laranja — o próprio varal é a barra
   de progresso: a fronteira laranja/cinza varre a tela junto com o scroll */
.varal::after{content:"";position:absolute;top:16px;left:-40px;height:3px;border-radius:3px;width:var(--fio,0%);
  background:repeating-linear-gradient(90deg,var(--laranja) 0 14px,transparent 14px 20px)}
/* balanço na propriedade `rotate` (não em transform): assim o hover pode
   levantar o card com transform sem brigar com a animação */
.pendurada{position:relative;width:200px;padding:12px 12px 14px;border-radius:24px;transform-origin:top center;
  rotate:var(--rot);animation:balanca 5s ease-in-out infinite alternate;cursor:pointer;
  transition:transform .25s cubic-bezier(.34,1.4,.64,1),rotate .25s cubic-bezier(.34,1.4,.64,1),box-shadow .25s}
.pendurada:hover{animation:none;rotate:0deg;transform:translateY(-10px) scale(1.05);z-index:3;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 30px 56px -22px rgba(43,38,32,.5)}
.pendurada:hover .foto::after{transform:scale(1.09) rotate(-2.5deg)}
.pendurada:hover .preco{transform:scale(1.12) rotate(-5deg)}
@keyframes balanca{from{rotate:calc(var(--rot) - 1.2deg)}to{rotate:calc(var(--rot) + 1.2deg)}}
.pendurada::before{content:"";position:absolute;top:-19px;left:50%;transform:translateX(-50%);width:14px;height:20px;border-radius:4px;
  background:linear-gradient(180deg,#E8B44C,#D9A03A);box-shadow:0 2px 4px rgba(43,38,32,.3)}
.pendurada .foto{aspect-ratio:1;border-radius:16px;position:relative;overflow:hidden}
.pendurada .estado{position:absolute;z-index:2;left:7px;top:7px;font:800 8px var(--red);color:#2E8B50;background:rgba(255,255,255,.9);border-radius:999px;padding:3px 8px}
/* o título é uma PLAQUINHA dentro do card — mesma linguagem da plaquinha dos
   portais: superfície própria, não texto solto sobre o vidro */
.pendurada .nome{display:flex;align-items:center;justify-content:center;height:44px;overflow:hidden;
  font:700 12px/1.3 var(--red);color:#4A4038;text-align:center;
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.78);border-radius:13px;
  padding:6px 10px;margin:10px 1px 5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 6px -3px rgba(43,38,32,.18)}
.pendurada .meta{font:600 9.5px var(--red);color:var(--cafe2);text-align:center;letter-spacing:.04em;margin:0 6px;text-transform:uppercase}
/* ancorada no canto da FOTO (topo fixo: 12px de padding + foto quadrada de 176px,
   card de 200px), nunca no rodapé — a altura do card varia e o preço caía no texto */
.pendurada .preco{position:absolute;right:-8px;top:156px;font:800 13px var(--red);color:#fff;
  background:linear-gradient(180deg,var(--laranja2),var(--laranja));border-radius:999px;padding:6px 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px -7px rgba(232,123,59,.9);
  transition:transform .2s cubic-bezier(.34,1.6,.64,1)}

/* ── grade desconstruída ── */
.bagunca{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-items:start}
@media (max-width:760px){.bagunca{grid-template-columns:repeat(2,1fr)}}
.solta{border-radius:26px;padding:12px 12px 14px;cursor:pointer;transition:transform .2s cubic-bezier(.23,1,.32,1);position:relative}
.solta:hover{transform:translateY(-6px) rotate(0deg) !important}
.solta .foto{border-radius:18px;position:relative;overflow:hidden}
.solta .adesivo{position:absolute;z-index:2;top:2px;right:-6px;transform:rotate(8deg);font:800 9px var(--red);background:#fff;color:var(--cafe);padding:6px 10px;border-radius:999px;box-shadow:0 4px 12px -4px rgba(43,38,32,.4);border:1.5px dashed var(--laranja)}
.solta .info{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:10px;padding:0 3px}
.solta .nome{font:800 13px/1.25 var(--red)}
.solta .meta{font:600 10px var(--red);color:var(--cafe2);margin-top:2px}
.solta .preco{font:800 14px var(--red);color:#fff;background:linear-gradient(180deg,var(--laranja2),var(--laranja));border-radius:999px;padding:6px 12px;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px -7px rgba(232,123,59,.9)}
.g1{grid-column:span 3;grid-row:span 2;transform:rotate(-1.2deg)}
.g1 .foto{aspect-ratio:1/1.05}
.g2{grid-column:span 3;transform:rotate(1.4deg) translateY(26px)}
.g2 .foto{aspect-ratio:2.2/1}
.g3{grid-column:span 2;transform:rotate(-2deg) translateY(-8px)}
.g3 .foto{aspect-ratio:1}
.g4{grid-column:span 2;transform:rotate(1.6deg) translateY(20px)}
.g4 .foto{aspect-ratio:1}
.g5{grid-column:span 2;transform:rotate(-1deg)}
.g5 .foto{aspect-ratio:1}
.g6{grid-column:span 2;transform:rotate(2deg) translateY(-14px)}
.g6 .foto{aspect-ratio:1/1.25}
.g7{grid-column:span 2;transform:rotate(-1.4deg) translateY(28px)}
.g7 .foto{aspect-ratio:1}
.g8{grid-column:span 2;transform:rotate(1.2deg)}
.g8 .foto{aspect-ratio:1/1.1}
.g9{grid-column:span 3;transform:rotate(-1.6deg) translateY(10px)}
.g9 .foto{aspect-ratio:2.3/1}
.g10{grid-column:span 3;transform:rotate(1deg) translateY(-8px)}
.g10 .foto{aspect-ratio:2.5/1}
@media (max-width:760px){.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10{grid-column:span 2;transform:none;grid-row:auto}}
/* a vitrine ocupa a página: seção larga, quase de borda a borda */
.secao.larga{max-width:1560px}

/* ── arara completa: portfólio infinito ── */
.arara{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (min-width:761px){.arara{grid-template-columns:repeat(4,1fr);gap:22px}}

/* ── filtro-varal: filtros ativos ficam PENDURADOS no fio, com pregador ── */
.filtros-arara{max-width:1080px;margin:0 auto 44px}
.filtro-varal{position:relative;min-height:78px;margin-bottom:28px}
.filtro-varal .fio-linha{position:absolute;top:14px;left:6%;right:6%;height:3px;border-radius:3px;
  background:repeating-linear-gradient(90deg,#B7A990 0 14px,transparent 14px 20px)}
.filtro-varal .dica{position:absolute;top:30px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cafe2);opacity:.75}
#pendurados{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;padding-top:10px}
.pendurado{position:relative;margin-top:8px;font:700 12.5px var(--red);color:var(--cafe);cursor:pointer;
  background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.9);border-radius:12px;padding:8px 13px;
  box-shadow:0 10px 20px -10px rgba(43,38,32,.4);transform-origin:top center;
  animation:prende .5s cubic-bezier(.3,1.4,.5,1) both, balanca 4.5s ease-in-out .5s infinite alternate}
.pendurado::before{content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  width:10px;height:15px;border-radius:3px;background:linear-gradient(180deg,#E8B44C,#D9A03A)}
.pendurado b{color:var(--laranja);margin-left:7px;font-weight:800}
@keyframes prende{0%{opacity:0;translate:0 -32px;rotate:8deg}60%{opacity:1;translate:0 4px;rotate:-4deg}100%{opacity:1;translate:0 0}}
.facetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}
@media (max-width:760px){.facetas{grid-template-columns:repeat(2,1fr)}}
.faceta h4{font:700 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cafe2);margin:0 0 10px}
.ops{display:flex;flex-wrap:wrap;gap:8px}
.op{font:700 12px var(--red);color:var(--cafe);padding:8px 13px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);
  transition:transform .15s cubic-bezier(.34,1.6,.64,1),opacity .3s}
.op:hover{transform:scale(1.07)}
.op.na-linha{opacity:.35;pointer-events:none}
.op .bolinha{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:6px;vertical-align:-1px;
  border:1px solid rgba(43,38,32,.22)}
.sugestoes-titulo{text-align:center;font:800 22px var(--red);color:var(--laranja);margin:48px 0 6px}
.sugestoes-sub{text-align:center;font:600 12.5px var(--red);color:var(--cafe2);margin:0 0 24px}

/* ── motinho de entrega: flat illustration cruzando o painel ── */
.moto-pista{position:absolute;left:0;right:0;bottom:84px;height:76px;pointer-events:none;z-index:1}
.motinho{position:absolute;bottom:0;left:-170px;width:156px;height:92px;
  animation:entrega-vai 11s linear infinite}
@keyframes entrega-vai{to{transform:translateX(calc(100vw + 320px))}}
.motinho .roda{transform-box:fill-box;transform-origin:center;animation:roda-gira .55s linear infinite}
@keyframes roda-gira{to{transform:rotate(360deg)}}
.motinho .salta{animation:moto-salta .5s ease-in-out infinite alternate}
@keyframes moto-salta{to{transform:translateY(-1.6px)}}
.motinho .vento{animation:vento-passa .5s ease-in-out infinite alternate}
.motinho .v2{animation-delay:-.2s}
.motinho .v3{animation-delay:-.35s}
@keyframes vento-passa{from{opacity:.1;transform:translateX(4px)}to{opacity:.4;transform:translateX(-3px)}}
.fundo1{background:radial-gradient(110px 110px at 50% 44%,var(--ceu) 0 46%,transparent 47%),linear-gradient(160deg,#F0F6FB,#E2EEF8)}
.fundo2{background:radial-gradient(80px 80px at 30% 50%,var(--sol) 0 46%,transparent 47%),radial-gradient(70px 70px at 72% 46%,var(--rosa) 0 46%,transparent 47%),linear-gradient(160deg,#FBF4E4,#F8ECD8)}
.fundo3{background:radial-gradient(80px 80px at 50% 44%,var(--rosa) 0 46%,transparent 47%),linear-gradient(160deg,#FDF3EC,#FAE3DC)}
.fundo4{background:radial-gradient(80px 80px at 50% 44%,var(--menta) 0 46%,transparent 47%),linear-gradient(160deg,#F0F8F2,#E1F1E7)}
.fundo5{background:radial-gradient(80px 80px at 50% 44%,var(--sol) 0 46%,transparent 47%),linear-gradient(160deg,#FBF6E8,#F6EBCE)}

/* ── bolhas idades (home) ── */
.idades{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.bolha{width:100px;height:100px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font:800 15px var(--red);color:var(--cafe);cursor:pointer;position:relative;animation:boia-suave 5.5s ease-in-out infinite alternate;transition:transform .18s cubic-bezier(.34,1.45,.64,1)}
@keyframes boia-suave{from{transform:translateY(-7px)}to{transform:translateY(7px)}}
.bolha small{font-size:9px;font-weight:700;color:var(--cafe2);letter-spacing:.06em;text-transform:uppercase}
.bolha::before{content:"";position:absolute;top:14%;left:20%;width:26%;height:14%;border-radius:50%;background:rgba(255,255,255,.85);filter:blur(1.5px);transform:rotate(-25deg)}
.bolha:hover{transform:scale(1.12) rotate(-3deg)}
.bolha:nth-child(1){background:linear-gradient(135deg,rgba(245,200,107,.65),rgba(245,200,107,.3))}
.bolha:nth-child(2){background:linear-gradient(135deg,rgba(245,168,184,.65),rgba(245,168,184,.3));animation-delay:-1.2s}
.bolha:nth-child(3){background:linear-gradient(135deg,rgba(158,212,181,.7),rgba(158,212,181,.32));animation-delay:-2.4s}
.bolha:nth-child(4){background:linear-gradient(135deg,rgba(156,200,232,.7),rgba(156,200,232,.32));animation-delay:-3.6s}
.bolha:nth-child(5){background:linear-gradient(135deg,rgba(240,151,92,.6),rgba(240,151,92,.28));animation-delay:-4.2s}
.bolha:nth-child(6){background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.35));animation-delay:-2s}

/* ── manifesto / institucional ── */
.manifesto{text-align:center;padding-top:170px}
.manifesto .olho-sobre{font:700 11px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#B4581E;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.6);padding:8px 14px;border-radius:999px;
  display:inline-block;margin-bottom:24px}
.historia{max-width:62ch;margin:28px auto 0;font:600 15px/1.8 var(--red);color:var(--cafe2);transition:color .5s}
.manifesto .aspas,.manifesto .quem{transition:color .5s}
/* enquanto o pôr-do-sol do desapego ainda cobre a tela, o institucional clareia junto */
body.modo-desapega .manifesto .aspas,body.modo-desapega .manifesto .quem{color:#FBF4E6}
body.modo-desapega .manifesto .historia{color:rgba(251,244,230,.85)}
.quem{margin:28px auto 8px;font:800 16px var(--red)}
.quem small{display:block;font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cafe2);margin-top:5px}
.aspas{font-size:clamp(22px,4.2vw,36px);font-weight:800;line-height:1.3;max-width:26ch;margin:0 auto}
.ass{font:600 11px var(--mono);letter-spacing:.08em;color:var(--cafe2);margin-top:14px;text-transform:uppercase}

/* ── fotos reais em recorte (Vision tira o fundo; a peça pousa no pastel) ── */
.rf1,.rf2,.rf3,.rf4,.rf5{position:relative;overflow:hidden}
.rf1::after,.rf2::after,.rf3::after,.rf4::after,.rf5::after{content:"";position:absolute;inset:5%;
  background:center/contain no-repeat;transition:transform .35s cubic-bezier(.34,1.4,.64,1);
  filter:drop-shadow(0 10px 16px rgba(43,38,32,.22))}
.rf1{background:linear-gradient(135deg,rgba(245,168,184,.55),rgba(245,168,184,.22))}
.rf1::after{background-image:url(fotos/rec1.png)}
.rf2{background:linear-gradient(135deg,rgba(245,200,107,.55),rgba(245,200,107,.22))}
.rf2::after{background-image:url(fotos/rec2.png)}
.rf3{background:linear-gradient(135deg,rgba(156,200,232,.6),rgba(156,200,232,.25))}
.rf3::after{background-image:url(fotos/rec3.png)}
.rf4{background:linear-gradient(135deg,rgba(158,212,181,.6),rgba(158,212,181,.25))}
.rf4::after{background-image:url(fotos/rec4.png)}
.rf5{background:linear-gradient(135deg,rgba(240,151,92,.5),rgba(240,151,92,.2))}
.rf5::after{background-image:url(fotos/rec5.png)}

/* ── faixas: PAINEL arredondado com as ondas dentro das próprias bordas.
   Os banners da Rê são cards de carrossel — um objeto com limites — e é assim
   que a faixa entra no nosso mundo de vidro: tiras soltas sobre o fundo
   infinito não marcam seção nenhuma. ── */
.faixa{position:relative;width:min(1080px,calc(100% - 28px));margin:100px auto;padding:120px 26px 130px;
  text-align:center;overflow:hidden;border-radius:36px;
  background:linear-gradient(180deg,#FAF6E9,#F5EFDD);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 26px 60px -30px rgba(43,38,32,.35)}
.faixa .onda{position:absolute;left:0;width:100%;height:92px;display:block}
.faixa .onda.topo{top:0}
.faixa .onda.base{bottom:0}
.faixa .arco{position:absolute;left:66%;bottom:-6px;transform:translateX(-50%);width:min(640px,94vw);aspect-ratio:2/1;pointer-events:none;opacity:.6;
  background:radial-gradient(farthest-side at 50% 100%,transparent 30%,rgba(245,200,107,.5) 30% 46%,transparent 46% 52%,rgba(245,168,184,.48) 52% 68%,transparent 68% 74%,rgba(158,212,181,.48) 74% 92%,transparent 92%)}
.faixa-b .arco{left:34%}
.faixa .miolo{position:relative;z-index:1;max-width:780px;margin:0 auto}
.faixa h2{font-size:clamp(28px,5vw,46px);font-weight:800;color:var(--laranja);margin:0 0 10px;letter-spacing:-.01em}
.faixa .forte{font:800 clamp(16px,2.6vw,22px)/1.35 var(--red);color:#C96A2F;margin:0 0 14px}
.faixa .calmo{font:800 15px/1.5 var(--red);color:#8FB6A6;margin:0 auto;max-width:44ch}

/* ── passos: o caminho da peça (garimpo → pente fino → varal) ── */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:920px;margin:0 auto;padding-top:8px}
@media (max-width:700px){.passos{grid-template-columns:1fr;max-width:340px}}
.passo{border-radius:28px;padding:28px 22px 26px;text-align:center;transform:rotate(var(--rot));
  transition:transform .25s cubic-bezier(.34,1.4,.64,1)}
.passo:hover{transform:rotate(0deg) translateY(-6px)}
.passo-n{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;
  margin:0 auto 16px;font:800 21px var(--red);color:var(--cafe);position:relative;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.7),0 6px 14px -8px rgba(43,38,32,.4)}
.passo h3{font:800 17px var(--red);margin:0 0 8px}
.passo p{font:600 13px/1.65 var(--red);color:var(--cafe2);margin:0}

/* ── ensaio: polaroids com as fotos reais ── */
.ensaio{display:flex;flex-wrap:wrap;justify-content:center;gap:34px 24px;padding-top:18px}
.polaroid{margin:0;background:#FFFDF7;padding:10px 10px 44px;border-radius:8px;width:196px;position:relative;
  transform:rotate(var(--rot));transition:transform .25s cubic-bezier(.34,1.4,.64,1);
  box-shadow:0 22px 44px -20px rgba(43,38,32,.45),0 2px 6px rgba(43,38,32,.08)}
.polaroid:hover{transform:rotate(0deg) scale(1.07);z-index:2}
.polaroid::before{content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-3deg);width:76px;height:24px;border-radius:3px;
  background:rgba(245,200,107,.45);border:1px solid rgba(255,255,255,.55)}
.polaroid img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px}
.polaroid figcaption{position:absolute;left:10px;right:10px;bottom:13px;text-align:center;font:700 12.5px var(--red);color:var(--cafe2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── marcas: fita que desfila sozinha ── */
.marcas-fita{overflow:clip;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marcas-trilho{display:flex;width:max-content;animation:desfila 26s linear infinite;padding:6px 0}
.marcas-fita:hover .marcas-trilho{animation-play-state:paused}
.marca-chip{font:800 15px var(--red);color:var(--cafe);padding:13px 24px;border-radius:999px;white-space:nowrap;margin-right:12px}
.marca-chip.mais{color:#fff;background:linear-gradient(180deg,var(--laranja2),var(--laranja));border:0}
@keyframes desfila{to{transform:translateX(-50%)}}

/* ── portais de categoria: o arco do logo virando porta ── */
.portais{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:920px;margin:0 auto;padding-top:10px}
@media (max-width:700px){.portais{grid-template-columns:1fr;max-width:320px}}
.portal{position:relative;display:block;width:100%;transform:rotate(var(--rot));
  transition:transform .28s cubic-bezier(.34,1.4,.64,1)}
.portal:hover{transform:rotate(0deg) translateY(-10px) scale(1.03);z-index:2}
.portal-foto{display:block;aspect-ratio:3/4;border-radius:999px 999px 32px 32px;overflow:hidden;position:relative;
  border:1px solid rgba(255,255,255,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 24px 50px -24px rgba(43,38,32,.42)}
.portal:hover .portal-foto::after{transform:scale(1.08)}
/* fotos humanas (do site atual da Rê) preenchendo o arco */
.ph1::after,.ph2::after,.ph3::after{content:"";position:absolute;inset:0;
  background:center/cover no-repeat;transition:transform .35s cubic-bezier(.34,1.4,.64,1)}
.ph1::after{background-image:url(fotos/gente3.webp)}
.ph2::after{background-image:url(fotos/gente2.webp)}
.ph3::after{background-image:url(fotos/gente1.webp)}
/* na arara o card é produto: o enquadramento privilegia o tênis, não o rosto */
.arara .ph3::after{background-position:12% 55%}
.portal-nome{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);font:800 17px var(--red);color:var(--cafe);
  padding:12px 28px;border-radius:999px;white-space:nowrap;transition:transform .2s cubic-bezier(.34,1.6,.64,1)}
.portal:hover .portal-nome{transform:translateX(-50%) scale(1.1)}

/* ── desapego: momento-tomada — a página inteira muda de cor ao chegar ── */
.ceu-desapega{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .8s ease;
  background:radial-gradient(120% 120% at 50% 18%,#E28948 0%,#CE6127 48%,#B54E1C 100%)}
body.modo-desapega .ceu-desapega{opacity:1}
.desapega{min-height:88svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.desapega .olho-desapega{font:700 11px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:#B4581E;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.6);padding:8px 14px;border-radius:999px;
  margin-bottom:20px;transition:color .5s,background .5s}
.desapega h2{font-size:clamp(34px,6vw,64px);letter-spacing:-.015em;margin:0 0 12px;transition:color .5s}
.desapega .sub{font-size:16.5px;max-width:52ch;margin:0 auto 28px;transition:color .5s}
.desapega .cta{transition:transform .15s cubic-bezier(.23,1,.32,1),background .5s,color .5s,box-shadow .5s}
body.modo-desapega .desapega h2{color:#FBF4E6}
body.modo-desapega .desapega .sub{color:rgba(251,244,230,.85)}
body.modo-desapega .desapega .olho-desapega{color:#FBF4E6;background:rgba(255,255,255,.16)}
body.modo-desapega .desapega .cta{background:#FBF4E6;color:#C25A1F;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 18px 40px -14px rgba(60,25,5,.55)}
/* batimento do botão: dois toques (coração) na propriedade `scale` — o hover
   continua livre para usar transform sem interromper a batida */
.desapega .cta{position:relative}
body.modo-desapega .desapega .cta{animation:bate 2.4s cubic-bezier(.45,0,.55,1) infinite}
body.modo-desapega .desapega .cta::before{content:"";position:absolute;inset:-4px;border-radius:999px;
  border:2px solid rgba(251,244,230,.6);pointer-events:none;animation:pinga 2.4s ease-out infinite}
@keyframes bate{0%,48%,100%{scale:1}12%{scale:1.055}24%{scale:1}36%{scale:1.04}}
@keyframes pinga{0%,30%{opacity:0;scale:1}42%{opacity:.85}100%{opacity:0;scale:1.5 2}}

/* ── entradas: aparição fluida, com personalidade por elemento.
   Usa translate/rotate/scale (propriedades independentes), que COMPÕEM com o
   transform que cada peça já tem — nada de brigar com rotações existentes. ── */
@media (prefers-reduced-motion: no-preference){
  /* fora de cena = destino da SAÍDA (rápida, sem escada). A ENTRADA é
     coreografia com massa: squash & stretch de desenho animado, cada tipo
     de elemento com física própria — nada de fade-up genérico. */
  .surge{opacity:0;translate:0 34px;
    transition:opacity .32s ease,translate .45s ease,rotate .45s ease,scale .45s ease}
  .bolha.surge{translate:0 0;scale:.3}
  .portal.surge{translate:0 52px;scale:.92 1.06}
  .marcas-fita.surge{translate:44px 0}
  .surge.viu{opacity:1;translate:0 0;rotate:0deg;scale:1;
    animation:plop .62s cubic-bezier(.3,1.4,.5,1) var(--espera,0s) both}
  @keyframes plop{
    0%{opacity:0;translate:0 34px;scale:.94 .86}
    55%{opacity:1;translate:0 -6px;scale:1.02 1.06}
    76%{translate:0 2px;scale:1.03 .97}
    100%{opacity:1;translate:0 0;scale:1}}
  .bolha.surge.viu{animation:infla .6s cubic-bezier(.3,1.5,.5,1) var(--espera,0s) both}
  @keyframes infla{0%{opacity:0;scale:.3}62%{opacity:1;scale:1.16 1.1}82%{scale:.94 .97}100%{opacity:1;scale:1}}
  .portal.surge.viu{animation:abre-porta .7s cubic-bezier(.3,1.35,.5,1) var(--espera,0s) both}
  @keyframes abre-porta{0%{opacity:0;translate:0 52px;scale:.92 1.06}60%{opacity:1;translate:0 -7px;scale:1.05 .95}100%{opacity:1;translate:0 0;scale:1}}
  .marcas-fita.surge.viu{animation:desliza-fita .6s cubic-bezier(.3,1.3,.5,1) var(--espera,0s) both}
  @keyframes desliza-fita{0%{opacity:0;translate:44px 0}70%{opacity:1;translate:-7px 0}100%{opacity:1;translate:0 0}}
  /* títulos: o contêiner só aparece — quem se mexe são as PALAVRAS,
     pulando como bloquinhos empilhados */
  :is(.secao>h2,.selecao-inicio h2).surge{translate:0 0}
  :is(.secao>h2,.selecao-inicio h2).surge.viu{animation:none;transition-duration:.3s}
  .palavra{display:inline-block;opacity:0}
  .viu .palavra{animation:pula-palavra .55s cubic-bezier(.3,1.5,.5,1) both;
    animation-delay:calc(var(--espera,0s) + var(--pi)*.065s)}
  @keyframes pula-palavra{
    0%{opacity:0;translate:0 26px;rotate:5deg;scale:1 .75}
    60%{opacity:1;translate:0 -6px;rotate:-2.5deg;scale:.97 1.1}
    100%{opacity:1;translate:0 0;rotate:0deg;scale:1}}
  /* parallax de profundidade: cada bolha de lava anda num passo diferente */
  .lava.b1{translate:0 calc(var(--rolagem,0)*-0.030px)}
  .lava.b2{translate:0 calc(var(--rolagem,0)*0.050px)}
  .lava.b3{translate:0 calc(var(--rolagem,0)*-0.055px)}
  .lava.b4{translate:0 calc(var(--rolagem,0)*0.035px)}
}

/* ── rodapé ── */
.rodape{position:relative;text-align:center;padding:70px 18px 46px;margin-top:20px}
.rodape .arco-mini{width:78px;height:39px;margin:0 auto 12px;
  background:radial-gradient(farthest-side at 50% 100%,transparent 26%,var(--sol) 26% 44%,transparent 44% 50%,var(--rosa) 50% 68%,transparent 68% 74%,var(--menta) 74% 92%,transparent 92%)}
.rodape .marca-rodape{font:800 26px var(--red);letter-spacing:-.01em}
.rodape p{font:600 13px var(--red);color:var(--cafe2);margin:8px 0 0}

/* ── CATEGORIA ── */
.cat-cab{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.cat-bolha{width:86px;height:86px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font:800 17px var(--red);background:linear-gradient(135deg,rgba(245,168,184,.7),rgba(245,168,184,.35));position:relative}
.cat-bolha small{font-size:8.5px;color:var(--cafe2);text-transform:uppercase;font-weight:700}
.cat-bolha::before{content:"";position:absolute;top:14%;left:20%;width:26%;height:14%;border-radius:50%;background:rgba(255,255,255,.85);filter:blur(1.5px);transform:rotate(-25deg)}
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 26px}
/* seleção da semana: esquerda fixa (título + tags), direita o mosaico */
#selecao .duas{display:grid;grid-template-columns:minmax(270px,330px) 1fr;gap:46px;align-items:start}
@media (max-width:860px){#selecao .duas{grid-template-columns:1fr;gap:20px}}
.selecao-inicio{position:sticky;top:104px}
@media (max-width:860px){.selecao-inicio{position:static}}
.selecao-inicio h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;color:var(--laranja);margin:0;letter-spacing:-.01em}
.selecao-inicio h2::after{content:"";display:block;width:66px;height:5px;border-radius:99px;margin-top:14px;
  background:linear-gradient(90deg,var(--sol),var(--rosa),var(--menta),var(--ceu))}
.selecao-inicio .sub{color:var(--cafe2);font-weight:600;font-size:14.5px;margin:16px 0 18px}
#selecao .filtros{margin:0}
#selecao .cat-nuvem{columns:2}
.tags-lista{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.tags-lista .solta:nth-child(odd){transform:rotate(-1.3deg)}
.tags-lista .solta:nth-child(even){transform:rotate(1.2deg) translateX(4px)}
.chegando{animation:chega .55s cubic-bezier(.3,1.4,.5,1) both}
@keyframes chega{
  0%{opacity:0;translate:0 18px;scale:.92 .85}
  60%{opacity:1;translate:0 -4px;scale:1.02 1.06}
  100%{opacity:1;translate:0 0;scale:1}}
.chegando-tag{animation:vira-tag .5s cubic-bezier(.3,1.5,.5,1) both}
@keyframes vira-tag{
  0%{opacity:0;translate:-28px 0;rotate:-5deg}
  65%{opacity:1;translate:5px 0;rotate:1.5deg}
  100%{opacity:1;translate:0 0;rotate:0deg}}
.filtro{font:800 12px var(--red);padding:9px 15px;border-radius:999px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);color:var(--cafe2)}
.filtro.on{background:linear-gradient(180deg,var(--laranja2),var(--laranja));color:#fff;border-color:transparent;box-shadow:0 6px 14px -7px rgba(232,123,59,.9)}
.cat-nuvem{columns:2;column-gap:18px}
.cat-nuvem .foto{aspect-ratio:1/1.1}
@media (min-width:761px){.cat-nuvem{columns:3}}
.cat-nuvem .solta{break-inside:avoid;margin-bottom:18px;display:block}
.cat-nuvem .solta:nth-child(odd){transform:rotate(-1.2deg)}
.cat-nuvem .solta:nth-child(even){transform:rotate(1.2deg) translateY(6px)}
.cat-nuvem .solta .foto{aspect-ratio:auto}
.cat-nuvem .f-a{height:210px}.cat-nuvem .f-b{height:150px}.cat-nuvem .f-c{height:250px}
/* etiqueta de roupa: tira de vidro tortinha com furinho — o "bug bonito" virou modelo */
.tag-peca{padding:24px 18px 24px 38px}
.tag-peca::before{content:"";position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:11px;height:11px;border-radius:50%;background:var(--creme);
  border:1px solid rgba(43,38,32,.14);box-shadow:inset 0 1.5px 2.5px rgba(43,38,32,.28),0 1px 0 rgba(255,255,255,.8)}
.tag-peca .info{margin-top:0}

/* ── PRODUTO ── */
.prod{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:start}
@media (max-width:820px){.prod{grid-template-columns:1fr}}
.prod-gal{position:sticky;top:90px}
.prod-foto{aspect-ratio:1/1.06;border-radius:36% 64% 55% 45%/46% 42% 58% 54%;overflow:hidden;position:relative;
  animation:morfa 14s ease-in-out infinite alternate;box-shadow:inset 0 2px 10px rgba(43,38,32,.08),0 26px 60px -30px rgba(43,38,32,.5)}
.prod-thumbs{display:flex;gap:10px;margin-top:14px;justify-content:center}
.prod-thumb{width:64px;height:64px;border-radius:16px;border:2px solid rgba(255,255,255,.8);box-shadow:0 8px 18px -10px rgba(43,38,32,.4)}
.prod-thumb.et{background:repeating-linear-gradient(0deg,#EFE7DA 0 4px,#F8F3EA 4px 8px);position:relative}
.prod-thumb.et::after{content:"etiqueta";position:absolute;inset-inline:0;bottom:3px;font:700 6.5px var(--mono);text-align:center;color:var(--cafe2)}
.prod-folha{border-radius:30px;padding:26px 26px 28px;display:flex;flex-direction:column;gap:11px}
.prod-folha .ref{font:700 10px var(--mono);color:var(--cafe2);letter-spacing:.06em}
.prod-folha h1{font-size:clamp(24px,3.6vw,32px);font-weight:800;margin:0;line-height:1.12}
.prod-preco{font-size:36px;font-weight:800;color:var(--laranja);line-height:1}
.prod-parc{font:600 11.5px var(--red);color:var(--cafe2)}
.selos{display:flex;gap:8px;flex-wrap:wrap}
.selo{font:800 10.5px var(--red);padding:6px 12px;border-radius:999px}
.ficha{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font:600 12.5px var(--red);color:var(--cafe2);
  background:rgba(255,255,255,.5);border-radius:18px;padding:14px 16px;border:1px solid rgba(255,255,255,.7)}
.ficha b{color:var(--cafe);font-weight:800}
.medidas{font:600 11px var(--red);color:var(--cafe2);background:rgba(255,255,255,.4);border-radius:14px;padding:10px 14px;border:1px dashed rgba(43,38,32,.15)}
.impacto{font:600 11px var(--red);color:#2E8B50}
.tambem{margin-top:44px}
.tambem h3{font-size:19px;font-weight:800;margin:0 0 12px}
.mini-fila{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px}
.mini{flex-shrink:0;width:130px;border-radius:18px;padding:9px;cursor:pointer;transition:transform .15s}
.mini:hover{transform:translateY(-4px)}
.mini .foto{aspect-ratio:1;border-radius:12px}
.mini .nome{font:800 10px/1.2 var(--red);margin-top:6px}
.mini .preco{font:800 11px var(--red);color:var(--laranja)}


@media (prefers-reduced-motion:reduce){
  .lava,.bolha,.logo-heroi,.heroi h1 .l,.heroi h1 em::after,.pendurada,.prod-foto,.menu-caixa,.marcas-trilho,.desapega .cta,.desapega .cta::before,.motinho,.motinho .roda,.motinho .salta,.motinho .vento,.pendurado{animation:none}
}

/* ═══════════════════════════════════════════════════════════════
   DO MOCKUP PARA A LOJA

   No mockup a peça era <div onclick> e a categoria era <button>, porque tudo
   acontecia na mesma página. Na loja de verdade cada um desses vira <a>: é o
   que dá clique do meio, "abrir em nova aba", link copiável — e é o que o
   Google percorre para achar os produtos.

   Trocar a tag traz junto o estilo padrão do navegador (sublinhado, azul,
   herança de fonte). Estas regras devolvem a aparência aprovada. Elas NÃO
   mudam o desenho; existem só para que a troca de tag não apareça.
   ═══════════════════════════════════════════════════════════════ */
a.pendurada, a.solta, a.portal, a.bolha{
  text-decoration:none; color:inherit; font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}
a.bolha{ display:flex }

/* 🪤 O .cta NAO entra na regra acima, e por um motivo que ja custou um botao.
   O botao tem cor e fonte proprias (branco, arredondada); mandar o link herdar
   cor e familia atropelava as duas — e "Ver a arara completa" saiu preto, com
   a fonte do texto corrido, parecendo defeito de renderizacao. Aqui so cai o
   sublinhado, que e a unica coisa que a troca de <button> para <a> trouxe. */
a.cta{
  text-decoration:none; -webkit-tap-highlight-color:transparent;
  /* Repetido de proposito. O Amazonas tem regra propria de cor para link, com
     peso maior que o `.cta` sozinho — e era ELA, nao a minha herança, que
     pintava o botao de marrom. Declarar aqui (a.cta, mais especifico) devolve o
     botao aprovado sem espalhar !important pelo arquivo. A variante clara do
     desapego continua ganhando: a regra dela e mais especifica ainda. */
  color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font:800 16px var(--red);
}

/* A foto do mockup era um degradê num quadrado vazio; agora tem foto de
   verdade dentro. Ela preenche o quadro sem esticar a criança. */
.pendurada .foto img, .solta .foto img{
  display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit;
}
/* A altura do mosaico vem das classes f-a/f-b/f-c; sem foto, o quadro
   colapsaria e a bagunça viraria uma lista. */
.solta .foto{ background:var(--creme2, #EDE0C8) }
.solta .foto img{ position:absolute; inset:0 }

/* Varal curto: a arara cabe na tela e não há percurso para desfilar.
   Some o palco alto e o grude no topo; fica a mesma faixa, sem o vazio. */
.varal-pista.varal-curto{ height:auto }
.varal-pista.varal-curto .varal-palco{
  position:static; min-height:0; padding-top:34px; padding-bottom:34px;
}
.varal-pista.varal-curto .varal{ justify-content:center }

/* A bagunça foi desenhada para 10 peças: os spans somam exatamente as colunas.
   Hoje a loja alimenta 5, e o que sobrava era buraco no meio do mosaico.
   `dense` manda o grid recuar e preencher o vazio com o que vem depois — quando
   as 10 estiverem lá, não há vazio para preencher e o arranjo aprovado fica
   idêntico. É rede de segurança, não redesenho. */
.bagunca{ grid-auto-flow:dense }

/* ═══ O hero sob um cabeçalho que ocupa espaço ═══

   No mockup a barra de navegação era fixa e flutuava POR CIMA do hero, então o
   hero reservava 120px de topo para não ficar escondido atrás dela. O cabeçalho
   do Amazonas não flutua: ele empurra a página. Os 120px, que antes eram
   compensação, viraram buraco — no celular o logo só aparecia depois de 393px
   de tela vazia, quase metade do aparelho antes da marca dizer quem é.

   🪤 Quando a barra do mockup substituir a do Amazonas, ela volta a flutuar e
   estes 120px voltam a ser necessários. Isto aqui é ajuste de convivência com o
   cabeçalho atual, não correção do desenho aprovado. */
.heroi{ padding-top:30px }

@media (max-width:760px){
  /* No celular o cabeçalho sozinho come 202px. Somar a isso um hero de 88svh
     jogava o botão para fora da tela: a pessoa via logo e título, e precisava
     rolar para descobrir que havia o que clicar. Sem altura mínima, o hero fica
     do tamanho do que tem dentro e o conjunto cabe numa tela. */
  .heroi{ min-height:0; padding-bottom:24px }
}

/* ═══ MODAL DE DESAPEGO ═══ */
.desapego-modal[hidden]{display:none}
.desapego-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:flex-end;justify-content:center;padding:0}
@media (min-width:761px){.desapego-modal{align-items:center;padding:24px}}
.desapego-fundo{position:absolute;inset:0;background:rgba(43,38,32,.45);backdrop-filter:blur(6px);animation:desapego-fundo-entra .25s ease both}
@keyframes desapego-fundo-entra{from{opacity:0}to{opacity:1}}
.desapego-caixa{position:relative;width:100%;max-width:520px;max-height:92svh;overflow-y:auto;
  border-radius:28px 28px 0 0;padding:26px 22px 30px;background:var(--creme,#F4EFE2);
  animation:desapego-sobe .34s cubic-bezier(.23,1,.32,1) both}
@media (min-width:761px){.desapego-caixa{border-radius:28px;padding:32px 30px 34px}}
@keyframes desapego-sobe{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.desapego-x{position:absolute;top:12px;right:14px;width:36px;height:36px;border:0;border-radius:50%;
  background:rgba(43,38,32,.07);color:var(--cafe);font:400 24px/1 var(--red);cursor:pointer}
.desapego-caixa h2{font:800 clamp(24px,6vw,32px)/1.08 var(--red);color:var(--cafe);margin:12px 0 6px;text-align:center}
.desapego-sub{font:600 14px/1.5 var(--red);color:var(--cafe2);text-align:center;margin:0 0 18px}
.desapego-caixa .olho-desapega{display:block;width:max-content;margin:0 auto}
.desapego-caixa .cta{display:flex;width:100%;margin-top:20px}

.desapego-lista{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.desapego-lista li{display:flex;gap:13px;align-items:flex-start}
.desapego-lista .n{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font:800 14px var(--red);color:#fff;background:linear-gradient(180deg,var(--laranja2),var(--laranja))}
.desapego-lista strong{display:block;font:800 15px var(--red);color:var(--cafe)}
.desapego-lista p{margin:2px 0 0;font:600 13px/1.45 var(--red);color:var(--cafe2)}
/* Destaque DENTRO do parágrafo usa <b>: o <strong> daqui é bloco (é o título
   do item) e quebraria a frase no meio — foi o que aconteceu com "40 minutos". */
.desapego-lista p b{font-weight:800;color:var(--cafe)}

/* O aviso da fila e o motivo do modal existir: ganha peso proprio, senao vira
   mais uma linha que ninguem le — e a pessoa aparece sem hora do mesmo jeito. */
.desapego-aviso{margin:20px 0 0;padding:14px 16px;border-radius:18px;
  background:rgba(232,123,59,.1);border:1.5px dashed var(--laranja);
  font:600 13px/1.5 var(--red);color:var(--cafe)}
.desapego-aviso strong{color:#B4581E}
.desapego-voltar{display:block;margin:16px auto 0;border:0;background:none;cursor:pointer;
  font:700 13px var(--red);color:var(--cafe2)}

.desapego-carregando{text-align:center;padding:26px 0}
.desapego-carregando p{margin:12px 0 0;font:600 13px var(--red);color:var(--cafe2)}
.desapego-carregando .pulso{display:inline-block;width:9px;height:9px;margin:0 3px;border-radius:50%;
  background:var(--laranja);animation:desapego-pulso 1.05s ease-in-out infinite}
.desapego-carregando .pulso:nth-child(2){animation-delay:.14s}
.desapego-carregando .pulso:nth-child(3){animation-delay:.28s}
@keyframes desapego-pulso{0%,80%,100%{transform:scale(.7);opacity:.4}40%{transform:scale(1);opacity:1}}

.desapego-dias{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px}
.desapego-dia{flex:0 0 auto;min-width:64px;padding:9px 10px;border-radius:18px;border:1.5px solid rgba(43,38,32,.12);
  background:rgba(255,255,255,.5);cursor:pointer;text-align:center;font-family:var(--red)}
.desapego-dia[aria-pressed="true"]{background:linear-gradient(180deg,var(--laranja2),var(--laranja));border-color:transparent;color:#fff}
.desapego-dia .sem{display:block;font:700 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.desapego-dia .num{display:block;font:800 19px var(--red);line-height:1.1}
.desapego-dia .mes{display:block;font:700 9.5px var(--mono);text-transform:uppercase;opacity:.65}
.desapego-horas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.desapego-hora{min-height:48px;border-radius:16px;border:1.5px solid rgba(43,38,32,.12);
  background:rgba(255,255,255,.5);cursor:pointer;font:800 15px var(--red);color:var(--cafe)}
.desapego-hora[aria-pressed="true"]{background:linear-gradient(180deg,var(--laranja2),var(--laranja));border-color:transparent;color:#fff}
.desapego-vazio{text-align:center;font:600 13px/1.5 var(--red);color:var(--cafe2);padding:20px 6px}

/* ═══ RODAPÉ DA LOJA ═══
   O rodapé do Amazonas é laranja chapado com títulos gigantes e links do mesmo
   peso do título — tudo grita junto, então nada se lê. Aqui ele vira a mesma
   linguagem do resto da página: fundo do marrom da marca, títulos pequenos em
   caixa alta como etiqueta, e o link com o peso de link. */
.footer, footer[class*="footer"]{ background:var(--cafe,#2B2620) !important; color:#F4EFE2 }
.footer h3,.footer h4,.footer .footer-title,.footer [class*="title"]{
  font:700 11px var(--mono) !important; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,239,226,.55) !important; margin-bottom:14px !important;
}
.footer a{ color:rgba(244,239,226,.9) !important; font:600 14px var(--red) !important; text-decoration:none }
.footer a:hover{ color:var(--sol,#F5C86B) !important }
.footer li{ margin-bottom:9px }
/* Os selos de bandeira e segurança vinham em cartão branco sobre laranja, que
   virava um retalho. No fundo escuro eles se acomodam sozinhos. */
.footer img{ opacity:.85; border-radius:6px }
.footer hr,.footer [class*="border"]{ border-color:rgba(244,239,226,.14) !important }

/* Nossa assinatura. Discreta de propósito: quem assina obra não compete com o
   nome de quem é dono dela. */
.nrs-assina{ display:block; text-align:center; padding:22px 18px 26px;
  background:var(--cafe,#2B2620); border-top:1px solid rgba(244,239,226,.12) }
.nrs-assina a{ font:600 10.5px var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:rgba(244,239,226,.5); text-decoration:none; transition:color .2s }
.nrs-assina a:hover{ color:var(--sol,#F5C86B) }
.nrs-assina strong{ font-weight:800; letter-spacing:.06em }

/* Campos do agendamento. Aparecem só DEPOIS da escolha do horário: pedir nome
   e telefone antes é o formulário que faz desistir antes de saber se existe
   horário bom. */
.desapego-campos{display:flex;flex-direction:column;gap:12px;margin:16px 0 4px}
.desapego-campos label{display:flex;flex-direction:column;gap:5px;
  font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cafe2)}
.desapego-campos small{font:600 9.5px var(--mono);opacity:.65;text-transform:none;letter-spacing:.04em}
.desapego-campos input{min-height:48px;border-radius:16px;padding:0 14px;
  border:1.5px solid rgba(43,38,32,.14);background:rgba(255,255,255,.65);
  font:600 15px var(--red);color:var(--cafe)}
.desapego-campos input:focus{outline:none;border-color:var(--laranja);
  box-shadow:0 0 0 3px rgba(232,123,59,.18)}
.desapego-erro{margin:10px 0 0;font:700 12.5px var(--red);color:#B4581E;text-align:center}

.desapego-pronto{text-align:center;padding:14px 0 4px}
.desapego-tique{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 12px;
  border-radius:50%;font:800 26px var(--red);color:#fff;
  background:linear-gradient(180deg,#9ED4B5,#5FAE83);
  animation:desapego-tique .45s cubic-bezier(.34,1.5,.64,1) both}
@keyframes desapego-tique{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.desapego-pronto h3{font:800 22px var(--red);color:var(--cafe);margin:0 0 6px}
.desapego-pronto p{font:600 14px/1.5 var(--red);color:var(--cafe);margin:0 0 4px}

/* Instruções pós-marcação: lista à esquerda dentro de um cartão centrado — o
   olho acha "Endereço" e "40 minutos" sem ler um parágrafo corrido. */
.desapego-instrucoes{list-style:none;margin:12px 0 16px;padding:12px 14px;text-align:left;
  background:var(--areia,#F6F0E7);border-radius:14px}
.desapego-instrucoes li{font:600 13.5px/1.5 var(--red);color:var(--cafe);padding:5px 0 5px 22px;position:relative}
.desapego-instrucoes li::before{content:'•';position:absolute;left:6px;color:var(--cafe2)}
.desapego-instrucoes li+li{border-top:1px dashed rgba(90,74,58,.18)}

/* ── cabeçalho: o do Amazonas dorme, a nav cápsula assume ──
   display:none e não remoção do snipplet: o JS do tema base referencia nós
   do cabeçalho (carrinho ajax, busca) e removê-los quebra o que não se vê. */
.js-head-main{display:none!important}

/* ── página da arara (categoria/busca): o varal assume, o Amazonas dorme ──
   Escondido, nunca removido: o store.js referencia os nós da barra lateral
   e do modal de filtros do celular. */
.category-body .col-md-2.d-md-block{display:none!important}
.category-controls [data-component="filter-button"]{display:none!important}
.category-controls .chip,.category-controls .js-remove-all-filters{display:none!important}
.container.d-md-none .chip{display:none!important}

/* O varal em cima da grade real */
.nrs-varal{padding:0 16px}
.nrs-varal .op{text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.nrs-varal .op b{font-weight:800;color:var(--laranja);font-size:10.5px}
.nrs-varal .faceta{min-width:0}
.nrs-varal #pendurados{min-height:44px}
.pendurado b{margin-left:7px}

/* ── pilha: a nav acima das barras sticky do Amazonas ──
   O category-controls (breadcrumb + ordenar) é sticky com z-index de
   Bootstrap (~1020) e pintava POR CIMA do miolo da cápsula na página de
   categoria — sobrava um blob vazio com a sacola espiando embaixo. A nav
   sobe para 1040 e o menu para 1050; o modal de desapego já vivia em 9000. */
.nav{z-index:1040}
.menu-overlay{z-index:1050}

/* ── controles de categoria: fora da sombra da cápsula ──
   A migalha e o "ordenar" moravam ATRÁS da nav fixa (o select aparecia
   espremido atrás da sacola). A faixa desce para baixo da cápsula, e a
   migalha sai: o varal já diz onde a pessoa está. */
.template-category .js-category-controls,.template-search .js-category-controls{padding-top:96px}
.js-category-controls .col-auto.align-self-center{display:none}
.template-category section.container .d-md-none .breadcrumbs{display:none}

/* ═══ RODAPÉ, segunda passada: elegância ═══
   Arco-íris da marca como marca d'água no canto direito; letra com peso de
   texto (não de título); selos discretos; copyright centrado numa faixa que
   continua o café em vez de gritar em laranja. */
.footer{position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;right:-70px;bottom:-34px;width:min(460px,70vw);aspect-ratio:2/1;opacity:.16;pointer-events:none;
  background:radial-gradient(farthest-side at 50% 100%,transparent 26%,var(--sol) 26% 44%,transparent 44% 50%,var(--rosa) 50% 68%,transparent 68% 74%,var(--menta) 74% 92%,transparent 92%)}
.footer>*{position:relative;z-index:1}
.footer a{font:500 13.5px var(--red) !important;color:rgba(244,239,226,.78) !important}
.footer li{font:500 13.5px var(--red);color:rgba(244,239,226,.85);margin-bottom:10px}
.footer h3,.footer h4,.footer .footer-title,.footer [class*="title"]{font-weight:600 !important;color:rgba(244,239,226,.45) !important}
.footer .footer-logo img,.footer .custom-seal img,.footer .custom-seal-code img{max-height:32px !important;width:auto !important;opacity:.45;filter:grayscale(1) brightness(1.5)}
.footer .footer-payments-shipping-logos img{max-height:20px;opacity:.75}
.footer .footer-legal,.js-footer-legal{background:transparent !important;border-top:1px solid rgba(244,239,226,.12);padding:18px 0 8px}
.footer-legal,.footer-legal a{font:500 11px var(--mono) !important;letter-spacing:.08em;color:rgba(244,239,226,.5) !important}
.footer-legal .row>div{flex:0 0 100% !important;max-width:100% !important;text-align:center !important;margin:0 0 6px !important}

/* ── busca da cápsula: sugestões enquanto digita ── */
.nav .busca{position:relative}
.busca-sugere{position:absolute;top:calc(100% + 12px);left:-8px;right:-8px;border-radius:20px;padding:8px;z-index:1060;
  background:rgba(255,252,244,.97);box-shadow:0 22px 44px -18px rgba(43,38,32,.45);border:1px solid rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.busca-sugere a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;font:600 13px var(--red);color:var(--cafe);text-decoration:none}
.busca-sugere a:hover{background:rgba(232,123,59,.12)}
.busca-sugere img{width:38px;height:38px;object-fit:cover;border-radius:10px;background:#EDE7DA;flex-shrink:0}
.busca-sugere .preco-s{margin-left:auto;font:800 12.5px var(--red);color:var(--laranja);white-space:nowrap}
.busca-sugere .tudo-s{justify-content:center;font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cafe2)}

/* Rodapé, terceira passada: submenu com peso de nota de rodapé, não de botão.
   A família redonda engorda no negrito — aqui é 400 seco, cor mais recolhida,
   e o ícone acompanha baixando a opacidade. */
.footer a{font:400 13px var(--red) !important;color:rgba(244,239,226,.66) !important;letter-spacing:.01em}
.footer a:hover{color:var(--sol,#F5C86B) !important}
.footer li{font:400 13px var(--red);color:rgba(244,239,226,.68);margin-bottom:11px}
.footer .contact-link{font-weight:400 !important}
.footer li svg{opacity:.55}

/* ═══ RODAPÉ — o conserto de verdade ═══
   O <footer> do Amazonas NÃO tem classe .footer: tem "js-hide-footer-while-
   scrolling", e o seletor [class*="footer"] casava por ACIDENTE de substring —
   só a regra do fundo pegava; links, títulos, selos e marca d'água nunca
   aplicaram. O gancho honesto é o data-store="footer". */
footer[data-store="footer"]{position:relative;overflow:hidden;background:var(--cafe,#2B2620) !important;color:#F4EFE2}
footer[data-store="footer"]::before{content:"";position:absolute;right:-70px;bottom:-34px;width:min(460px,70vw);aspect-ratio:2/1;opacity:.16;pointer-events:none;
  background:radial-gradient(farthest-side at 50% 100%,transparent 26%,var(--sol) 26% 44%,transparent 44% 50%,var(--rosa) 50% 68%,transparent 68% 74%,var(--menta) 74% 92%,transparent 92%)}
footer[data-store="footer"]>*{position:relative;z-index:1}
footer[data-store="footer"] h3,footer[data-store="footer"] h4,footer[data-store="footer"] [class*="title"]{
  font:600 11px var(--mono) !important;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(244,239,226,.45) !important;margin-bottom:14px !important}
footer[data-store="footer"] a{font:400 13px var(--red) !important;color:rgba(244,239,226,.66) !important;text-decoration:none;letter-spacing:.01em}
footer[data-store="footer"] a:hover{color:var(--sol,#F5C86B) !important}
footer[data-store="footer"] li{font:400 13px var(--red);color:rgba(244,239,226,.68);margin-bottom:11px}
footer[data-store="footer"] li svg{opacity:.55}
footer[data-store="footer"] .footer-logo img,footer[data-store="footer"] .custom-seal img,footer[data-store="footer"] .custom-seal-code img{
  max-height:32px !important;width:auto !important;opacity:.45;filter:grayscale(1) brightness(1.5)}
footer[data-store="footer"] .footer-payments-shipping-logos img{max-height:20px;opacity:.75}
footer[data-store="footer"] hr,footer[data-store="footer"] [class*="border"],footer[data-store="footer"] .divider{border-color:rgba(244,239,226,.14) !important}

/* Rodapé, lapidação final (18/08, pedido do Nicholas):
   ícone social sem o botão branco gritando; título de coluna sem bold;
   bandeiras de pagamento juntinhas; selos em cinza, um passo mais visíveis. */
footer[data-store="footer"] .social-icon-rounded{
  background:transparent !important;border:1.5px solid rgba(244,239,226,.28) !important;
  color:rgba(244,239,226,.75) !important;width:42px;height:42px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  transition:border-color .2s,color .2s}
footer[data-store="footer"] .social-icon-rounded:hover{border-color:var(--sol,#F5C86B) !important;color:var(--sol,#F5C86B) !important}
footer[data-store="footer"] .social-icon-rounded svg{fill:currentColor}
footer[data-store="footer"] h3,footer[data-store="footer"] h4,footer[data-store="footer"] [class*="title"]{font-weight:400 !important}
footer[data-store="footer"] .footer-payments-shipping-logos img{margin:2px 3px !important;max-height:18px}
footer[data-store="footer"] .footer-logo img,footer[data-store="footer"] .custom-seal img,footer[data-store="footer"] .custom-seal-code img{
  opacity:.7;filter:grayscale(1) brightness(2.1) contrast(.75)}

/* Selos em fundo escuro: INVERTE — selo preto vira traço cinza-claro, o
   tratamento de dark mode que os deixa visíveis sem cor nem grito. */
footer[data-store="footer"] .footer-logo img,footer[data-store="footer"] .custom-seal img,footer[data-store="footer"] .custom-seal-code img{
  opacity:.6;filter:grayscale(1) invert(1) brightness(.9) contrast(.85)}

/* Selos e bandeiras — recuo do exagero (18/08):
   filtro em cima de selo virou borrão, e bandeira a 18px virou confete.
   Selo fica ORIGINAL, só menor e levemente contido; bandeira volta a 24px,
   legível, com as vizinhas por perto. Discrição vem do tamanho, não da mutilação. */
footer[data-store="footer"] .footer-logo img,footer[data-store="footer"] .custom-seal img,footer[data-store="footer"] .custom-seal-code img{
  filter:none;opacity:.85;max-height:30px !important;border-radius:6px}
footer[data-store="footer"] .footer-payments-shipping-logos img{
  filter:none;opacity:.95;max-height:24px;margin:2px 3px !important;border-radius:4px}

/* ═══ BALÃO DE ROLAGEM ═══
   A barra de scroll nativa some e no lugar sobe um balão pela borda direita:
   ele ENCHE e SOBE conforme a página desce — o indicador de progresso da casa,
   com cara de criança. Só a raiz esconde a barra: contêiner interno com
   rolagem própria continua com a dele. */
html{scrollbar-width:none}
html::-webkit-scrollbar{width:0;height:0;display:none}
.balao-scroll{position:fixed;right:10px;top:0;width:44px;height:72px;z-index:1035;
  pointer-events:none;will-change:transform;transition:opacity .3s}
.balao-scroll svg{width:100%;height:100%;overflow:visible}
@media (max-width:640px){.balao-scroll{width:30px;height:50px;right:5px}}

/* Assinatura da casa: fio de letra, sem negrito — quem assina sussurra. */
.nrs-assina a{font-weight:300 !important}
.nrs-assina strong{font-weight:400 !important;letter-spacing:.06em}


/* ── régua de crescimento com girafa (o indicador escolhido) ──
   A trilha é uma régua de parede na borda direita (traço curto a cada 14px,
   longo a cada 70px) e a girafa sobe medindo. A plaquinha conta a IDADE —
   RN embaixo, 14 anos no topo: a mesma faixa que a loja veste. */
.vs-regua{width:56px;height:74px;right:16px}
.regua-trilho{position:fixed;top:0;right:0;width:22px;height:100vh;z-index:1030;pointer-events:none;opacity:.45;
  background:
    linear-gradient(to bottom,var(--cafe2) 0 1.6px,transparent 1.6px) right top/15px 70px repeat-y,
    linear-gradient(to bottom,rgba(110,99,85,.65) 0 1.2px,transparent 1.2px) right top/8px 14px repeat-y}
.vs-regua .girafa-cabeca{transform-box:fill-box;transform-origin:60% 88%;
  animation:girafa-espia 4.2s ease-in-out infinite alternate}
@keyframes girafa-espia{from{transform:rotate(-3.5deg)}to{transform:rotate(4deg)}}
.regua-idade{position:absolute;right:100%;top:6px;margin-right:6px;white-space:nowrap;
  font:700 9.5px var(--mono);letter-spacing:.08em;color:var(--cafe);
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.85);
  padding:3px 7px;border-radius:999px;box-shadow:0 4px 10px -6px rgba(43,38,32,.35)}
@media (max-width:640px){.vs-regua{width:40px;height:54px;right:12px}.regua-idade{font-size:8.5px}}
@media (prefers-reduced-motion: reduce){.vs-regua .girafa-cabeca{animation:none}}

/* Assinatura, mais um passo atrás: corpo menor, tinta mais rala, menos ar —
   presença de carimbo discreto no verso, não de rodapé segundo. */
.nrs-assina{padding:14px 18px 16px}
.nrs-assina a{font-size:8.5px !important;letter-spacing:.1em;color:rgba(244,239,226,.32) !important}
.nrs-assina a:hover{color:rgba(244,239,226,.6)}