:root{
  --parede:#F2639F;      /* parede da loja */
  --parede-clara:#FFD9EA;
  --pink:#E5157F;        /* diamante da logo */
  --vinho:#8E0B50;
  --preto:#000;          /* fundo da logo */
  --tinta:#2B0718;       /* texto */
  --ouro:#C8894B;        /* manequins */
  --ouro-claro:#F1C58F;
  --papel:#FFF5FA;
  --branco:#fff;
  --display:"Unbounded",system-ui,sans-serif;
  --script:"Pinyon Script",cursive;
  --texto:"Figtree",system-ui,sans-serif;
  --r:4px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--texto);font-size:1.0625rem;line-height:1.6;color:var(--tinta);background:var(--papel);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--preto);outline-offset:3px}
h2{font-family:var(--display);font-weight:800;line-height:1.08;letter-spacing:-.02em;font-size:clamp(1.9rem,4.4vw,3.4rem)}
.script{font-family:var(--script);font-size:clamp(2rem,4vw,2.9rem);line-height:1;color:var(--pink);margin-bottom:.4rem}

/* topo */
.topo{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;gap:1.5rem;padding:.8rem clamp(1rem,4vw,3rem);transition:background .3s,box-shadow .3s}
.topo.rolou{background:rgba(255,245,250,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(43,7,24,.08)}
.marca{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:.02em}
.marca-gema{width:34px;height:29px;background:var(--preto);padding:4px 3px;border-radius:3px}
.menu{display:flex;gap:1.4rem;margin-left:auto}
.menu a{text-decoration:none;font-weight:600;font-size:.95rem;position:relative}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:2px;background:currentColor;transition:right .25s}
.menu a:hover::after{right:0}
.btn-sacola{display:flex;align-items:center;gap:.4rem;border:0;background:var(--preto);color:#fff;font:600 .9rem var(--texto);padding:.55rem .9rem;border-radius:var(--r);cursor:pointer}
.btn-sacola svg{width:20px;height:20px}
.conta{background:var(--pink);min-width:1.4rem;height:1.4rem;border-radius:99px;display:grid;place-items:center;font-size:.75rem}
.conta.pula{animation:pula .45s}
@keyframes pula{40%{transform:scale(1.5)}}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:700;padding:.95rem 1.4rem;border-radius:var(--r);transition:transform .2s,background .2s,color .2s;border:2px solid var(--preto)}
.btn:active{transform:scale(.97)}
.btn-escuro{background:var(--preto);color:#fff}
.btn-escuro:hover{background:var(--pink);border-color:var(--pink)}
.btn-claro{background:transparent;color:var(--preto)}
.btn-claro:hover{background:var(--preto);color:#fff}

/* HERO */
.hero{min-height:100svh;background:var(--parede);display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:2rem;padding:7rem clamp(1rem,5vw,4.5rem) 4rem;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 45%,rgba(255,255,255,.28),transparent 55%);pointer-events:none}
.hero-texto{position:relative;z-index:2}
.logo-grande{font-family:var(--display);font-weight:800;color:var(--preto);font-size:clamp(3.6rem,11vw,9.5rem);line-height:.86;letter-spacing:-.04em;position:relative;padding-bottom:.25em}
.lg-palavra{display:block;white-space:nowrap}
.lg-palavra span{display:inline-block}
.lg-script{position:absolute;left:18%;bottom:-.05em;width:78%;overflow:visible;pointer-events:none}
.lg-script text{font-family:var(--script);font-size:150px;font-weight:400;fill:#fff;stroke:#fff;stroke-width:1.2;letter-spacing:0}
.lg-linha{display:flex;align-items:center;gap:.7rem;font-weight:700;font-size:clamp(.85rem,1.4vw,1rem);letter-spacing:.32em;color:var(--preto);margin:1.4rem 0 1.2rem}
.lg-linha i{width:7px;height:7px;background:var(--branco);transform:rotate(45deg)}
.hero-frase{max-width:34ch;font-size:clamp(1.05rem,1.6vw,1.2rem);font-weight:500}
.hero-acoes{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.hero .btn-escuro:hover{background:#fff;color:var(--preto);border-color:#fff}

.hero-gema{position:relative;width:min(100%,560px);aspect-ratio:200/170;justify-self:center;z-index:1}
.janela{position:absolute;inset:0;clip-path:polygon(27.5% 5.9%,72.5% 5.9%,100% 35.3%,50% 97%,0% 35.3%);background:var(--vinho)}
.janela img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:0;transform:scale(1.12);transition:opacity 1.2s ease,transform 6s ease}
.janela img.ativa{opacity:1;transform:scale(1)}
.facetas{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.facetas .f{mix-blend-mode:multiply;opacity:.38;transform-box:fill-box;transform-origin:center}
.contorno{stroke-dasharray:1;stroke-dashoffset:0}
.brilho{position:absolute;width:26px;height:26px;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:pisca 2.8s infinite ease-in-out;opacity:0}
.b1{top:2%;left:24%}.b2{top:30%;right:-2%;animation-delay:.9s;width:18px;height:18px}.b3{bottom:20%;left:16%;animation-delay:1.8s;width:20px;height:20px}
@keyframes pisca{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}

/* coreografia de entrada (só com JS) */
.js .lg-palavra span{opacity:0;transform:translateY(.6em) rotate(6deg)}
.js .carregou .lg-palavra span{animation:letra .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*55ms + .15s)}
@keyframes letra{to{opacity:1;transform:none}}
.js .lg-script text{fill-opacity:0;stroke-dasharray:1400;stroke-dashoffset:1400}
.js .carregou .lg-script text{animation:escreve 2.2s ease forwards .9s}
@keyframes escreve{70%{fill-opacity:0}to{stroke-dashoffset:0;fill-opacity:1}}
.js .lg-linha,.js .hero-frase,.js .hero .hero-acoes{opacity:0;transform:translateY(14px)}
.js .carregou .lg-linha{animation:sobe .6s ease forwards 1.5s}
.js .carregou .hero-frase{animation:sobe .6s ease forwards 1.65s}
.js .carregou .hero .hero-acoes{animation:sobe .6s ease forwards 1.8s}
@keyframes sobe{to{opacity:1;transform:none}}
.js .facetas .f{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.6)}
.js .carregou .facetas .f{animation:monta 1.1s cubic-bezier(.2,.9,.25,1.1) forwards;animation-delay:calc(var(--i)*70ms + .2s)}
@keyframes monta{0%{opacity:0}35%{opacity:1}75%{opacity:1;transform:none;mix-blend-mode:normal}100%{opacity:.38;transform:none}}
.js .janela{opacity:0;transition:opacity .9s ease 1.25s}
.js .carregou .janela{opacity:1}
.js .contorno{stroke-dashoffset:1}
.js .carregou .contorno{transition:stroke-dashoffset 1.6s ease 1s;stroke-dashoffset:0}

/* faixa */
.faixa{background:var(--preto);color:#fff;overflow:hidden;padding:1rem 0;border-block:3px solid var(--pink)}
.faixa-trilho{display:flex;width:max-content;animation:corre 32s linear infinite}
.faixa span{font-family:var(--display);font-weight:600;font-size:clamp(1rem,2vw,1.35rem);display:flex;align-items:center;white-space:nowrap}
.faixa span::after{content:"";width:12px;height:10px;margin:0 1.6rem;background:var(--pink);clip-path:polygon(27% 6%,73% 6%,100% 35%,50% 97%,0 35%)}
@keyframes corre{to{transform:translateX(-50%)}}

/* entrada da loja: diamante abre até virar janela inteira */
.entrada{height:220vh;background:var(--papel)}
.entrada-cola{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3rem;padding:5rem clamp(1rem,5vw,4.5rem) 2rem;overflow:hidden}
.entrada-foto{height:min(78svh,720px);position:relative;--p:0;clip-path:var(--clip,polygon(27.5% 5.9%,72.5% 5.9%,100% 35.3%,50% 97%,50% 97%,0% 35.3%))}
.entrada-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transform:scale(calc(1.25 - var(--p)*.25))}
.entrada-texto{max-width:31rem}
.entrada-texto h2{margin-bottom:1.2rem}
.entrada-texto>p:last-child{font-size:1.1rem}

/* vitrine */
.vitrine{padding:6rem clamp(1rem,5vw,4.5rem);background:var(--papel)}
.secao-cab{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:end;margin-bottom:2rem}
.secao-cab p{max-width:42ch}
.filtros{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.pilula{font:600 .95rem var(--texto);padding:.55rem 1.1rem;border-radius:99px;border:2px solid var(--tinta);background:transparent;color:var(--tinta);cursor:pointer;transition:background .2s,color .2s}
.pilula:hover{background:var(--parede-clara)}
.pilula.ativa{background:var(--tinta);color:#fff}
.grade{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2.2rem 1.4rem}
.peca{display:flex;flex-direction:column;transition:opacity .35s,transform .35s}
.peca.some{display:none}
.peca-foto{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r);background:var(--parede-clara)}
.peca-foto img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.peca:hover .peca-foto img{transform:scale(1.06)}
.peca-tag{position:absolute;top:.7rem;left:.7rem;background:#fff;font-size:.78rem;font-weight:700;padding:.25rem .55rem;border-radius:3px}
.peca h3{font-size:1.05rem;font-weight:700;line-height:1.3;margin-top:.8rem}
.peca p{font-size:.92rem;color:#6b3a52;line-height:1.45;margin-top:.2rem}
.peca-acao{margin-top:auto;padding-top:.8rem;display:flex;gap:.5rem;align-items:center}
.quero{flex:1;border:2px solid var(--preto);background:#fff;font:700 .92rem var(--texto);padding:.65rem .8rem;border-radius:var(--r);cursor:pointer;transition:background .2s,color .2s}
.quero:hover{background:var(--preto);color:#fff}
.quero.dentro{background:var(--pink);border-color:var(--pink);color:#fff}

/* cerejinha: rolagem lateral presa */
.cerejinha{height:300vh;background:var(--parede-clara);position:relative}
.cer-cola{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:2rem;padding:5rem 0 2rem}
.cer-cab{padding:0 clamp(1rem,5vw,4.5rem);max-width:46rem;position:relative}
.cer-cab p{max-width:40ch;margin-top:.6rem}
.cereja-grande{width:74px;height:74px;position:absolute;right:-1rem;top:-2.4rem;animation:balanca 3s ease-in-out infinite;transform-origin:50% 10%}
@keyframes balanca{50%{transform:rotate(12deg)}}
.cer-trilho{display:flex;gap:1.4rem;padding:0 clamp(1rem,5vw,4.5rem);width:max-content;will-change:transform}
.cer-trilho figure{width:clamp(220px,24vw,330px);flex:none}
.cer-trilho img{aspect-ratio:3/4;width:100%;object-fit:cover;border-radius:var(--r)}
.cer-trilho figure:nth-child(even){margin-top:3rem}
.cer-trilho figcaption{font-weight:600;margin-top:.6rem;font-size:.95rem}
.cereja-cai{position:absolute;width:34px;height:34px;pointer-events:none;top:-40px;animation:cai linear infinite;opacity:.85}
@keyframes cai{to{transform:translateY(calc(100svh + 80px)) rotate(240deg)}}

/* gospel */
.gospel{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;padding:7rem clamp(1rem,5vw,4.5rem);background:var(--papel)}
.gospel-fotos{display:grid;grid-template-columns:1.3fr 1fr;gap:1rem;align-items:end}
.gospel-fotos img{border-radius:var(--r);aspect-ratio:3/4;object-fit:cover;width:100%}
.gospel-fotos img:last-child{margin-bottom:-3rem}
.gospel-texto h2{margin-bottom:1rem}
.gospel-texto p:not(.script){max-width:40ch;margin-bottom:1.6rem}

/* acessórios */
.acessorios{background:var(--preto);color:#fff;display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:center;padding:7rem clamp(1rem,5vw,4.5rem) 0;overflow:hidden}
.aces-foto{position:relative;aspect-ratio:200/170;max-width:520px}
.aces-foto img{width:100%;height:100%;object-fit:cover;object-position:30% 40%;clip-path:polygon(27.5% 5.9%,72.5% 5.9%,100% 35.3%,50% 97%,0% 35.3%)}
.aces-texto h2{color:#fff;margin-bottom:1rem}
.aces-texto p{max-width:42ch;color:#f6d6e6}
.aces-lista{list-style:none;padding:0;margin-top:1.8rem;display:grid;gap:.9rem}
.aces-lista li{display:flex;align-items:center;gap:.9rem;font-family:var(--display);font-weight:600;font-size:1.15rem}
.aces-lista svg{width:34px;height:29px;flex:none}
.aces-bolsas{grid-column:1/-1;margin:0 calc(-1*clamp(1rem,5vw,4.5rem))}
.aces-bolsas img{width:100%;height:clamp(90px,14vw,200px);object-fit:cover;object-position:50% 40%}

/* visite */
.visite{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;padding:7rem clamp(1rem,5vw,4.5rem);background:var(--parede)}
.visite h2{color:var(--preto);margin-bottom:.6rem}
.endereco{font-family:var(--display);font-weight:600;font-size:1.25rem;margin-bottom:1rem}
.visite-texto>p:not(.endereco){max-width:44ch;font-weight:500}
.visite .btn-escuro:hover{background:#fff;color:var(--preto);border-color:#fff}
.insta{display:inline-block;margin-top:1.6rem;font-weight:700}
.visite-foto img{aspect-ratio:4/5;object-fit:cover;width:100%;border-radius:var(--r);border:8px solid #fff;transform:rotate(2.5deg);box-shadow:0 30px 60px -30px rgba(43,7,24,.6)}

/* rodapé */
.rodape{background:var(--preto);color:#f2cfe0;padding:3.5rem clamp(1rem,5vw,4.5rem) 6rem;display:grid;gap:.8rem;justify-items:start}
.rodape-logo{display:flex;align-items:center;gap:1rem}
.rodape-logo svg{width:64px;height:54px}
.rodape-logo p{display:flex;flex-direction:column;line-height:1}
.rodape-logo b{font-family:var(--display);font-weight:800;font-size:1.8rem;color:#fff}
.rodape-logo span{font-family:var(--script);font-size:2rem;color:var(--pink);margin-top:-.2rem}
.demo{font-size:.85rem;opacity:.7}

/* WhatsApp flutuante */
.whats-flutua{position:fixed;right:1rem;bottom:1rem;z-index:30;width:58px;height:58px;border-radius:50%;background:#1FAF55;color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.45);animation:chama 3.5s ease-in-out infinite}
.whats-flutua svg{width:30px;height:30px}
@keyframes chama{0%,80%,100%{transform:none}85%{transform:rotate(-12deg)}90%{transform:rotate(10deg)}95%{transform:rotate(-6deg)}}

/* sacola */
.sacola{position:fixed;top:0;right:0;bottom:0;z-index:60;width:min(420px,100%);background:var(--papel);padding:1.4rem;display:flex;flex-direction:column;gap:1rem;box-shadow:-20px 0 50px -20px rgba(0,0,0,.4);transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.sacola.aberta{transform:none}
.sacola[hidden],.veu[hidden]{display:none}
.sacola-cab{display:flex;justify-content:space-between;align-items:center}
.sacola-cab h2{font-size:1.5rem}
.fechar{border:0;background:none;font-size:2rem;line-height:1;cursor:pointer;width:44px;height:44px;border-radius:50%}
.fechar:hover{background:var(--parede-clara)}
.sacola-itens{list-style:none;padding:0;display:grid;gap:.8rem;overflow:auto;flex:1;align-content:start}
.sacola-itens li{display:grid;grid-template-columns:56px 1fr auto;gap:.8rem;align-items:center}
.sacola-itens img{width:56px;height:70px;object-fit:cover;border-radius:3px}
.sacola-itens b{display:block;font-size:.95rem;line-height:1.3}
.sacola-itens small{color:#6b3a52}
.tira{border:0;background:none;color:var(--vinho);font-weight:700;cursor:pointer;text-decoration:underline;font-family:inherit}
.sacola-vazia{color:#6b3a52}
.campo{display:grid;gap:.3rem;font-weight:600;font-size:.92rem}
.campo input{font:inherit;font-weight:400;padding:.75rem .8rem;border:2px solid var(--tinta);border-radius:var(--r);background:#fff}
.enviar[aria-disabled=true]{opacity:.4;pointer-events:none}
.veu{position:fixed;inset:0;z-index:50;background:rgba(43,7,24,.45)}

/* revelar ao rolar */
.js .revela{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.js .revela.visto{opacity:1;transform:none}

/* celular */
@media (max-width:860px){
  .menu{display:none}
  .btn-sacola span{display:none}
  .marca{margin-right:auto}
  .hero{grid-template-columns:1fr;padding-top:6.5rem;gap:1.4rem;min-height:auto;padding-bottom:3rem}
  .hero-gema{order:-1;width:min(74%,340px)}
  .lg-script{left:34%;width:66%;bottom:-.2em}
  .lg-linha{letter-spacing:.14em;font-size:.78rem;gap:.5rem}
  .entrada{height:200vh}
  .entrada-cola{grid-template-columns:1fr;gap:1.2rem;padding-top:4.5rem;align-content:center}
  .entrada-foto{height:48svh}
  .entrada-texto h2{font-size:1.6rem;margin-bottom:.6rem}
  .entrada-texto>p:last-child{font-size:1rem}
  .secao-cab,.gospel,.acessorios,.visite{grid-template-columns:1fr}
  .grade{grid-template-columns:repeat(2,1fr);gap:1.6rem .8rem}
  .peca h3{font-size:.95rem}
  .peca p{display:none}
  .quero{font-size:.85rem;padding:.6rem .4rem}
  .cer-trilho figure{width:62vw}
  .gospel-fotos img:last-child{margin-bottom:-1.5rem}
  .aces-foto{max-width:100%}
  .visite-foto{max-width:420px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .faixa-trilho{animation:none}
}