/* =========================================================
   BELLAS PRATAS STORE — FOLHA DE ESTILO
   1. Tokens        5. Perfil / Benefícios
   2. Base          6. Produtos (cards, trilhos, grade)
   3. Utilitários   7. Modal
   4. Cabeçalho     8. Depoimentos / Feed / Rodapé
   ========================================================= */

/* ============ 1. TOKENS ============ */
:root{
  /* cor */
  --branco:#ffffff;
  --neve:#f7f7f5;
  --cinza:#ececea;
  --prata:#c0c0c0;
  --prata-clara:#dedede;
  --prata-escura:#8b8b8b;
  --grafite:#1c1c1c;
  --preto:#0b0b0b;
  --lilas:#9b6fc4;
  --lilas-escuro:#5e3d73;
  --lilas-medio:#c3a0e0;
  --lilas-claro:#efe6f8;
  --lilas-vidro:#f8f3fc;
  --lavanda:#f7f0fb;
  --lavanda-escura:#eadff8;
  --texto-suave:#4a3d58;
  --zap:#1fa855;

  /* tipografia */
  --f-display:'Cormorant Garamond', Georgia, serif;
  --f-corpo:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --t-hero:clamp(2.6rem, 7vw, 5.6rem);
  --t-secao:clamp(1.9rem, 4vw, 3.1rem);
  --t-corpo:clamp(.95rem, 1.6vw, 1.02rem);

  /* espaço */
  --gutter:clamp(1.25rem, 5vw, 4rem);
  --largura:1320px;
  --ritmo:clamp(4.5rem, 10vw, 9rem);

  /* movimento */
  --suave:cubic-bezier(.22,.61,.36,1);
  --lento:.75s var(--suave);

  /* raio e elevação — acabamento premium mantendo a identidade atual */
  --raio-sm:10px;
  --raio-md:18px;
  --raio-lg:28px;
  --sombra-sm:0 2px 10px rgba(28,20,40,.06);
  --sombra-md:0 16px 36px -12px rgba(28,20,40,.16);
  --sombra-lg:0 30px 60px -18px rgba(28,20,40,.24);
  --sombra-lilas:0 16px 34px -12px rgba(155,111,196,.38);
}

/* ============ 2. BASE ============ */
*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}

/* Folga para o cabeçalho fixo (sticky) não tampar o início das seções ao
   navegar pelo menu — --header-h é medido e atualizado em script.js
   (altura real da barra, que muda um pouco com .encolhido). */
section[id]{scroll-margin-top:var(--header-h,84px);}

body{
  margin:0;
  background-color:var(--branco);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(192,192,192,.10) 0%, rgba(192,192,192,.05) 16%, transparent 30%),
    radial-gradient(circle at 82% 12%, rgba(192,192,192,.08) 0%, rgba(192,192,192,.04) 14%, transparent 24%),
    radial-gradient(ellipse at 78% 82%, rgba(155,111,196,.06) 0%, rgba(155,111,196,.03) 24%, transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #fbfaf9 32%, #ffffff 100%);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--grafite);
  font-family:var(--f-corpo);
  font-size:var(--t-corpo);
  font-weight:300;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(ellipse at 18% 62%, rgba(128,92,156,.16) 0%, transparent 18%),
    radial-gradient(ellipse at 74% 56%, rgba(128,92,156,.11) 0%, transparent 24%),
    radial-gradient(ellipse at 30% 85%, rgba(128,92,156,.12) 0%, transparent 16%);
  opacity:.9;
}

body.travado{overflow:hidden;}

[hidden]{display:none !important;}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button,input,select{font:inherit;color:inherit;}
h1,h2,h3{margin:0;font-weight:400;line-height:1.1;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}

svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
svg[data-preenchido],.ico-zap,.flutuante--zap svg{fill:currentColor;stroke:none;}

::selection{background:var(--grafite);color:var(--branco);}

:focus-visible{outline:2px solid var(--lilas);outline-offset:3px;}

/* ============ 3. UTILITÁRIOS ============ */
.wrap{width:100%;max-width:var(--largura);margin-inline:auto;padding-inline:var(--gutter);}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.skip-link{
  position:fixed;top:-100px;left:1rem;z-index:200;
  background:var(--grafite);color:var(--branco);
  padding:.75rem 1.25rem;border-radius:2px;font-size:.8rem;
  transition:top .2s;
}
.skip-link:focus{top:1rem;}

.eyebrow{
  margin:0 0 .9rem;
  font-size:.68rem;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--prata-escura);
}
.eyebrow--claro{color:rgba(255,255,255,.72);}
.eyebrow--lilas{color:var(--lilas);}

.titulo-secao{
  font-family:var(--f-display);
  font-size:var(--t-secao);
  font-weight:300;
  letter-spacing:-.015em;
}

/* --- botões --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.05rem 2.1rem;
  border:1px solid transparent;border-radius:var(--raio-sm);
  font-size:.76rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;
  transition:background .4s var(--suave),color .4s var(--suave),border-color .4s var(--suave),
    transform .35s var(--suave),box-shadow .35s var(--suave);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sombra-md);}
.btn:active{transform:translateY(0);box-shadow:var(--sombra-sm);}
.btn svg{width:17px;height:17px;flex:none;}

.btn--escuro{background:var(--grafite);color:var(--branco);}
.btn--escuro:hover{background:var(--preto);}

.btn--claro{background:var(--branco);color:var(--grafite);}
.btn--claro:hover{background:var(--neve);}

.btn--linha{border-color:var(--prata);color:var(--grafite);background:transparent;}
.btn--linha:hover{border-color:var(--grafite);background:var(--grafite);color:var(--branco);}

.btn--zap{background:var(--zap);color:#fff;}
.btn--zap:hover{background:#178f47;box-shadow:0 16px 34px -12px rgba(31,168,85,.45);}

.btn--grande{padding:1.2rem 2.8rem;}
.btn--bloco{width:100%;}

/* --- animação de entrada --- */
.reveal{opacity:0;transform:translateY(28px);}
.reveal.visivel{opacity:1;transform:none;transition:opacity .9s var(--suave),transform .9s var(--suave);}

/* --- assinatura: varredura de luz sobre a prata --- */
.brilho{
  background:linear-gradient(100deg,#fff 20%,var(--prata) 38%,#fff 52%,#fff 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:varrer 7s var(--suave) infinite;
}
@keyframes varrer{
  0%,65%{background-position:130% 0;}
  100%{background-position:-30% 0;}
}

/* ============ 4. CABEÇALHO ============ */
.header{
  position:sticky;top:0;z-index:90;
  background:transparent;
  transition:background .45s var(--suave),box-shadow .45s var(--suave),backdrop-filter .45s var(--suave);
}
.header.solido{
  background:rgba(247,240,252,.94);
  backdrop-filter:saturate(140%) blur(14px);
  box-shadow:0 1px 0 rgba(109,78,122,.08),0 12px 24px -18px rgba(94,61,115,.28);
}

.header__inner{
  position:relative;z-index:2;
  max-width:1220px;margin-inline:auto;
  padding:.75rem var(--gutter) .6rem;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  transition:padding .4s var(--suave);
}

/* barra ainda mais compacta assim que o usuário começa a rolar (efeito
   suave, independente do fundo sólido, que só aparece mais adiante) */
.header.encolhido .header__inner{padding-block:.5rem .4rem;}
.header.encolhido .brand__mark{width:36px;height:36px;}

main#topo{position:relative;z-index:1;}

.brand{display:flex;align-items:center;gap:.75rem;justify-self:center;}
.brand__mark{
  display:grid;place-items:center;
  width:42px;height:42px;flex:none;
  border:1px solid rgba(94,61,115,.28);border-radius:50%;
  background:rgba(255,255,255,.45);
  color:var(--lilas-escuro);
  box-shadow:0 6px 20px -12px rgba(94,61,115,.7);
  transition:background .4s var(--suave),border-color .4s var(--suave),transform .5s var(--suave),width .4s var(--suave),height .4s var(--suave);
}
.brand__mark svg{width:16px;height:16px;}
.brand:hover .brand__mark{background:var(--lilas-claro);border-color:var(--lilas);transform:rotate(90deg);}
.brand__name{
  font-family:var(--f-display);font-size:clamp(1.65rem,2.3vw,2.1rem);line-height:1;
  letter-spacing:.02em;color:var(--lilas-escuro);
}
.brand__name em{
  display:block;font-style:normal;
  font-family:var(--f-corpo);font-size:.55rem;font-weight:500;
  letter-spacing:.42em;text-transform:uppercase;
  color:rgba(94,61,115,.72);margin-top:.3rem;
}

.header:not(.solido) .brand__name,
.header:not(.solido) .nav__list a,
.header:not(.solido) .header__search,
.header:not(.solido) .header__burger span{color:var(--lilas-escuro);}
.header:not(.solido) .brand__mark{
  border-color:rgba(94,61,115,.25);background:rgba(255,255,255,.28);color:var(--lilas-escuro);
}
.header:not(.solido) .brand__name em{color:rgba(94,61,115,.72);}
.header:not(.solido) .header__burger span{background:var(--lilas-escuro);}

.nav__list{display:flex;align-items:center;gap:1.85rem;}
.nav__list a{
  position:relative;
  font-size:.74rem;font-weight:400;
  letter-spacing:.13em;text-transform:uppercase;
  padding-block:.35rem;
  transition:color .3s;
}
.nav__list a::after{
  content:"";position:absolute;left:0;bottom:0;
  width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--suave);
}
.nav__list a:hover::after{transform:scaleX(1);transform-origin:left;}

.header__search{
  justify-self:end;background:none;border:0;padding:.35rem;cursor:pointer;
  display:grid;place-items:center;
}
.header__search svg{width:19px;height:19px;}

/* título "Menu" + botão × da gaveta mobile: só existe visualmente dentro
   do painel deslizante do celular (ver @media max-width:980px) */
.nav__topo{display:none;}

.header__burger{
  display:none;
  justify-self:start;flex-direction:column;gap:5px;
  background:none;border:0;padding:.4rem;cursor:pointer;
}
.header__burger span{
  display:block;width:22px;height:1px;background:var(--grafite);
  transition:transform .4s var(--suave),opacity .3s;
}
.header__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.header__burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.header__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ============ CAPA ============ */
.hero{
  position:relative;isolation:isolate;
  min-height:100vh;
  min-height:100svh;
  display:flex;align-items:flex-end;
  padding:7rem var(--gutter) clamp(2.5rem,4vw,4rem);
  background:linear-gradient(180deg,#f2e7f7 0%,#efe3f5 28%,#f4edf8 100%);
  overflow:hidden;
}
.hero__media{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(circle at 30% 15%, rgba(255,255,255,.24), transparent 20%),
    linear-gradient(90deg, rgba(242,231,247,.92) 0%, rgba(242,231,247,.8) 32%, rgba(242,231,247,.38) 62%, rgba(242,231,247,.2) 100%);
  overflow:visible;
}
.hero__media::before,
.hero__media::after{
  content:""; position:absolute; border-radius:50%;
}
.hero__media::before{
  left:-8rem;top:-4rem;width:34rem;height:34rem;
  background:radial-gradient(ellipse at 50% 40%, rgba(157,118,180,.10), rgba(157,118,180,.06) 32%, transparent 64%);
  border:1px solid rgba(94,61,115,.08);
}
.hero__media::after{
  right:-10rem;top:-4rem;width:30rem;height:30rem;
  border:1px solid rgba(94,61,115,.08);
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.04), transparent 70%);
}
.hero__deco{
  position:absolute; border:1px solid rgba(94,61,115,.1); border-radius:50%;
  background:rgba(255,255,255,.02);
}
.hero__deco--one{width:21rem;height:21rem;right:5%;top:1%;}
.hero__deco--two{width:14rem;height:14rem;left:12%;bottom:12%;}
.hero__img{display:none;}

.hero__joias{
  position:absolute;
  right:-8%;
  bottom:-10%;
  width:min(48vw, 620px);
  height:min(35vw, 420px);
  z-index:1;
  pointer-events:none;
  filter:drop-shadow(0 18px 25px rgba(94,61,115,.12));
}
.hero__joia{
  position:absolute;
  display:block;
  background:transparent;
  border:2px solid rgba(169,139,198,.55);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
.hero__joia--colar{
  right:18%;
  bottom:20%;
  width:64%;
  height:24%;
  border-radius:50%;
  border-left-color:rgba(169,139,198,.4);
  border-right-color:rgba(169,139,198,.4);
  border-top-color:rgba(169,139,198,.7);
  border-bottom-color:rgba(169,139,198,.3);
  transform:rotate(-18deg);
  opacity:.9;
}
.hero__joia--colar::before{
  content:"";
  position:absolute;
  left:26%;
  right:26%;
  top:16%;
  height:24%;
  border:2px solid rgba(169,139,198,.5);
  border-top:none;
  border-radius:0 0 50% 50%;
  transform:translateY(42%);
}
.hero__joia--colar::after{
  content:"";
  position:absolute;
  left:44%;
  bottom:-8%;
  width:12%;
  height:12%;
  border-radius:50%;
  border:2px solid rgba(169,139,198,.55);
  background:linear-gradient(135deg, rgba(255,255,255,.9), rgba(214,200,233,.7));
}
.hero__joia--pulseira{
  right:3%;
  bottom:0%;
  width:42%;
  height:17%;
  border-radius:50%;
  transform:rotate(12deg);
  border-top-color:rgba(169,139,198,.4);
  border-bottom-color:rgba(169,139,198,.6);
  background:rgba(255,255,255,.08);
}
.hero__joia--pulseira::before{
  content:"";
  position:absolute;
  inset:14% 12%;
  border:2px solid rgba(169,139,198,.38);
  border-radius:50%;
}
.hero__joia--pulseira::after{
  content:"";
  position:absolute;
  width:56%;
  height:34%;
  left:10%;
  top:28%;
  border:2px solid rgba(169,139,198,.4);
  border-radius:50%;
}
.hero__joia--brinco{
  right:42%;
  bottom:8%;
  width:18%;
  height:18%;
  border-radius:50%;
  transform:rotate(12deg);
  background:rgba(255,255,255,.08);
}
.hero__joia--brinco::before{
  content:"";
  position:absolute;
  inset:18%;
  border-radius:50%;
  border:2px solid rgba(169,139,198,.42);
}
.hero__joia--brinco::after{
  content:"";
  position:absolute;
  left:34%;
  top:34%;
  width:32%;
  height:32%;
  border-radius:50%;
  border:2px solid rgba(169,139,198,.5);
  background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(214,200,233,.72));
}

.hero__veil{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.45), transparent 25%),
    linear-gradient(90deg, rgba(242,231,247,.72) 0%, rgba(242,231,247,.65) 26%, rgba(242,231,247,.18) 62%, rgba(242,231,247,.18) 100%);
}

.hero__conteudo{position:relative;z-index:1;max-width:720px;color:var(--texto-suave);padding-top:1.5rem;}
.hero__meta{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  margin:0 0 1.8rem;font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lilas-escuro);
}
.hero__meta span:nth-child(2n){opacity:.7;}
.hero__titulo{
  font-family:var(--f-display);font-size:clamp(4.1rem,8vw,9rem);color:var(--lilas-escuro);line-height:.83;letter-spacing:-.04em;
  margin-bottom:1.6rem;
}
.hero__sub{
  font-size:clamp(1.08rem,2vw,1.8rem);font-weight:300;line-height:1.45;color:var(--texto-suave);
  max-width:22ch;margin-bottom:2.3rem;
}
.hero__acoes{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;}
.hero__acoes .btn{min-height:4.2rem;}
.hero__acoes .btn--claro{
  background:rgba(255,255,255,.82);border:1px solid rgba(94,61,115,.12);color:var(--texto-suave);
  font-size:.76rem;letter-spacing:.16em;padding-inline:1.9rem;box-shadow:0 18px 26px -22px rgba(94,61,115,.5);
}
.hero__acoes .btn--zap{
  background:var(--lilas-escuro);color:var(--branco);box-shadow:0 18px 26px -20px rgba(94,61,115,.6);
}
.hero__acoes .btn--zap:hover{background:#4d325f;}

.hero__scroll{display:none;}

/* ============ 5. PERFIL ============ */
.perfil{padding-block:var(--ritmo);}

/* --- painel de apresentação da marca: fundo em degradê lilás (tons
   extraídos da foto da marca) com a bio centralizada numa área limpa, e
   um cartão fotográfico com as semijoias reais no canto — em vez de
   esticar a foto (retrato) como banner largo, o que cortava as peças. */
.perfil__intro{
  position:relative;
  isolation:isolate;
  border-radius:var(--raio-lg);
  margin-bottom:clamp(2.6rem,6vw,4rem);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1.5rem,4vw,3rem);
  padding:clamp(2.2rem,5vw,3.2rem);
  background:linear-gradient(135deg,var(--lavanda) 0%,#ecdff3 45%,#ddc9ea 100%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--sombra-md);
}
.perfil__intro-inner{
  position:relative;z-index:1;
  max-width:520px;
  text-align:center;
  margin-inline:auto;
}
.perfil__intro-inner .eyebrow{color:var(--lilas-escuro);}
.perfil__intro-inner .titulo-secao{margin-bottom:1.1rem;}
.perfil__intro-inner .perfil__bio{margin-inline:auto;}

/* cartão com a foto real das semijoias (anéis, corrente e brincos) */
.perfil__intro-joia{
  flex:none;
  position:relative;
  width:clamp(180px,16vw,240px);
  aspect-ratio:4/5;
  border-radius:var(--raio-md);
  overflow:hidden;
  background:url("img/catalogo-joias.jpg") 68% 42%/cover no-repeat;
  box-shadow:var(--sombra-sm);
}
.perfil__intro-joia::after{
  content:"";
  position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
  border-radius:inherit;
}

.perfil__corpo{
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(2rem,6vw,5rem);align-items:center;
}
.perfil__foto{position:relative;aspect-ratio:1;}
.perfil__foto img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;
  position:relative;z-index:1;
}
.perfil__anel{
  position:absolute;inset:-14px;border-radius:50%;
  border:1px solid var(--prata-clara);
}
.perfil__anel::after{
  content:"";position:absolute;inset:-14px;border-radius:50%;
  border:1px solid var(--cinza);
}

.perfil__bio{max-width:52ch;color:#4a4a4a;margin:1.2rem 0 1.6rem;line-height:1.85;}

.perfil__tipo{color:var(--prata-escura);font-size:.55em;letter-spacing:.02em;}

.perfil__numeros{
  display:flex;align-items:center;gap:.4rem 1.5rem;flex-wrap:wrap;
  font-size:.82rem;color:var(--prata-escura);
}
.perfil__numeros strong{font-weight:500;color:var(--grafite);}

.destaques{
  display:flex;gap:clamp(1rem,3vw,2.4rem);
  justify-content:center;flex-wrap:wrap;
  margin-top:clamp(2.8rem,6vw,4.5rem);
}
.destaque-item{
  background:none;border:0;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:.65rem;
  width:78px;
}
.destaque-item__circulo{
  width:66px;height:66px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--lilas-claro),var(--lilas-medio));
  border:1px solid var(--branco);
  box-shadow:0 0 0 1px var(--lilas-medio);
  color:var(--branco);
  transition:transform .45s var(--suave),box-shadow .45s var(--suave);
}
.destaque-item__circulo svg{width:20px;height:20px;}
.destaque-item:hover .destaque-item__circulo{
  transform:translateY(-4px);box-shadow:0 0 0 1px var(--lilas);
}
.destaque-item__nome{
  font-size:.7rem;letter-spacing:.04em;color:#5c5c5c;line-height:1.3;text-align:center;
}
.estrelas{color:var(--lilas);letter-spacing:.22em;font-size:.95rem;}
.perfil__clientes{font-size:.8rem;letter-spacing:.05em;color:var(--prata-escura);}

.perfil__selos{
  display:flex;flex-wrap:wrap;gap:.55rem;
  margin:1.6rem 0 2.2rem;
}
.perfil__selos li{
  border:1px solid var(--cinza);border-radius:100px;
  padding:.5rem 1.1rem;
  font-size:.72rem;letter-spacing:.08em;color:#555;
}

/* ============ BENEFÍCIOS ============ */
.beneficios{
  border-block:1px solid var(--cinza);
  background:var(--neve);
  padding-block:clamp(2rem,4vw,2.8rem);
}
.beneficios__lista{
  display:grid;gap:1.5rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.beneficio{display:flex;gap:.85rem;align-items:flex-start;}
.beneficio__ico{
  flex:none;display:grid;place-items:center;
  width:28px;height:28px;border-radius:50%;
  background:var(--branco);border:1px solid var(--lilas-medio);
  color:var(--lilas);
}
.beneficio__ico svg{width:13px;height:13px;}
.beneficio strong{display:block;font-size:.82rem;font-weight:500;letter-spacing:.02em;}
.beneficio span{display:block;font-size:.74rem;color:var(--prata-escura);line-height:1.5;}

/* ============ SEÇÕES ============ */
.secao{padding-block:var(--ritmo);}
.secao--claro{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(244,236,248,.97) 0%, rgba(237,228,244,.98) 100%);
}
.secao--claro::before{
  content:"";
  position:absolute;
  inset:-2% -2% -2% -2%;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 14% 18%, rgba(161,124,192,.18) 0%, rgba(161,124,192,.12) 18%, transparent 34%),
    radial-gradient(circle at 82% 12%, rgba(161,124,192,.16) 0%, rgba(161,124,192,.08) 16%, transparent 30%),
    radial-gradient(ellipse at 30% 74%, rgba(161,124,192,.12) 0%, transparent 25%),
    linear-gradient(90deg, transparent 0 65%, rgba(255,255,255,.44) 65% 72%, transparent 72%);
  opacity:1;
}
.secao--claro::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1200'%3E%3Cdefs%3E%3Cfilter id='b' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='12'/%3E%3C/filter%3E%3C/defs%3E%3Cg opacity='.75' fill='%23bca6d5'%3E%3Cg transform='translate(40 140) rotate(-18 340 390)'%3E%3Cpath d='M551 390c-96-102-182-150-274-145-98 5-178 57-247 133 52 53 125 92 211 110 90 19 180 6 310-98Z'/%3E%3Cpath d='M462 177c-58 65-88 122-94 193-8 93 25 176 94 249-87-17-162-57-220-121-39-44-67-94-81-157 40-74 104-124 199-151 32-9 71-14 102-13Z'/%3E%3Cpath d='M610 365c72-69 130-106 205-111 74-6 161 25 257 104-63 28-127 51-193 63-71 13-170 2-269-56Z'/%3E%3Cpath d='M620 510c41-11 84-16 129-15 74 2 156 25 238 72-59 44-132 63-218 59-63-3-122-26-171-80 6-15 13-25 22-36Z'/%3E%3C/g%3E%3Cg transform='translate(1100 90) rotate(22 270 340)'%3E%3Cpath d='M363 107c-54 86-73 161-57 231 19 82 80 146 177 195-110-17-206-77-266-169-49-75-60-144-37-212 46-138 132-198 183-245Z'/%3E%3Cpath d='M430 451c64-36 110-86 149-151 57-93 89-171 123-257-56 28-120 58-185 87-95 42-180 85-261 148 61 76 120 141 174 173Z'/%3E%3C/g%3E%3C/g%3E%3Cg opacity='.38' fill='white'%3E%3Ccircle cx='220' cy='220' r='8'/%3E%3Ccircle cx='1260' cy='170' r='7'/%3E%3Ccircle cx='1360' cy='400' r='8'/%3E%3Ccircle cx='500' cy='850' r='7'/%3E%3C/g%3E%3Cg opacity='.5' fill='%23f8f2fd'%3E%3Cpath d='M460 880c50-8 90-26 121-54 89-80 121-196 116-278-27 28-55 48-89 61-79 31-163 34-258 7 17 67 25 142 26 213 0 19 0 35 2 51 29 0 58 0 82 0Z'/%3E%3Cpath d='M1010 1030c54-18 93-61 109-103 23-58 11-139-32-192 46 12 83 40 112 82 45 64 44 141 2 207-27 41-72 71-121 88-30 10-54 12-70 14Z'/%3E%3C/g%3E%3Cg opacity='.7' fill='%23f1e9f8'%3E%3Cpath d='M560 760c149 18 254 106 276 235-66 89-177 145-302 157-128 12-260-38-349-148 78-2 146-27 205-80 46-40 92-111 170-164Z'/%3E%3Cpath d='M894 692c112 21 206 98 256 201-64 51-153 79-252 79-118 0-221-47-295-124 18-51 67-103 147-145 42-23 87-33 144-11Z'/%3E%3C/g%3E%3Cg opacity='.9' fill='white'%3E%3Cpath d='M645 660c106-52 207-69 329-41 69 15 123 41 175 79-42 20-88 37-136 48-126 30-249 32-367 0-11-2-18-8-1-86Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;
  background-position:center center;
  opacity:.9;
}
.secao--claro > .wrap{position:relative;z-index:1;}

.secao--escuro{background:var(--preto);color:var(--branco);}
.secao--escuro .titulo-secao{color:var(--branco);}

.secao__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem 3rem;flex-wrap:wrap;
  padding-bottom:1.6rem;margin-bottom:2.6rem;
  border-bottom:1px solid var(--cinza);
}
.secao--escuro .secao__head{border-color:rgba(255,255,255,.16);}
.secao__nota{
  max-width:44ch;font-size:.84rem;color:var(--prata-escura);line-height:1.7;
}
.secao--escuro .secao__nota{color:rgba(255,255,255,.6);}

/* ============ 6. CONTROLES DO CATÁLOGO ============ */
.controles{
  display:flex;gap:1rem;flex-wrap:wrap;
  align-items:center;margin-bottom:1.5rem;
}
.busca{
  flex:1 1 320px;position:relative;display:flex;align-items:center;
  background:var(--branco);border:1px solid var(--cinza);border-radius:var(--raio-md);
  transition:border-color .3s,box-shadow .3s;
}
.busca:focus-within{border-color:var(--lilas);box-shadow:0 0 0 4px var(--lilas-claro);}
.busca svg{width:17px;height:17px;margin-left:1rem;color:var(--prata-escura);flex:none;}
.busca input{
  flex:1;border:0;background:none;outline:none;
  padding:1rem;font-size:.88rem;font-weight:300;
}
.busca input::placeholder{color:#a9a9a9;}
.busca button{
  background:none;border:0;cursor:pointer;
  font-size:1.4rem;line-height:1;color:var(--prata-escura);
  padding:0 1rem;
}

.ordenar{position:relative;display:flex;align-items:center;}
.ordenar select{
  appearance:none;
  background:var(--branco);border:1px solid var(--cinza);border-radius:var(--raio-md);
  padding:1rem 3rem 1rem 1.2rem;
  font-size:.78rem;letter-spacing:.06em;cursor:pointer;
  transition:border-color .3s,box-shadow .3s;
}
.ordenar select:hover{border-color:var(--prata);}
.ordenar select:focus-visible{border-color:var(--lilas);box-shadow:0 0 0 4px var(--lilas-claro);}
.ordenar svg{
  position:absolute;right:1.1rem;width:15px;height:15px;
  pointer-events:none;color:var(--prata-escura);
}

.filtros{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.8rem;}
.filtro{
  background:none;border:1px solid var(--cinza);border-radius:100px;
  padding:.6rem 1.35rem;cursor:pointer;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:#666;
  transition:all .35s var(--suave);
}
.filtro:hover{border-color:var(--prata);color:var(--grafite);}
.filtro.is-ativo{background:var(--grafite);border-color:var(--grafite);color:var(--branco);box-shadow:var(--sombra-sm);}

/* ============ GRADE E TRILHOS ============ */
.grade{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.1rem,2.4vw,2.2rem) clamp(.9rem,2vw,1.8rem);
}

.trilho{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.1rem,2.4vw,2.2rem) clamp(.9rem,2vw,1.8rem);
}

/* ============ CARD DE PRODUTO ============ */
.card{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--branco);
  cursor:pointer;
  opacity:0;transform:translateY(22px);
}
.card.visivel{opacity:1;transform:none;transition:opacity .7s var(--suave),transform .7s var(--suave);}

.secao--escuro .card{background:transparent;}

.card__foto{
  position:relative;overflow:hidden;border-radius:var(--raio-lg);
  aspect-ratio:4/5;background:var(--neve);
  box-shadow:var(--sombra-sm);
  transition:box-shadow .5s var(--suave);
}
.secao--escuro .card__foto{background:#141414;}
.card:hover .card__foto{box-shadow:var(--sombra-lilas);}

.card__foto img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--suave);
}
.card:hover .card__foto img{transform:scale(1.06);}

/* varredura de luz no hover — a assinatura da marca */
.card__foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%);
  transition:transform 1s var(--suave);
  pointer-events:none;
}
.card:hover .card__foto::after{transform:translateX(120%);}

.card__etiquetas{
  position:absolute;top:.9rem;left:.9rem;z-index:2;
  display:flex;flex-direction:column;gap:.4rem;align-items:flex-start;
}
.etiqueta{
  background:var(--branco);color:var(--grafite);
  padding:.35rem .75rem;border-radius:var(--raio-sm);
  font-size:.6rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  box-shadow:var(--sombra-sm);
}
.etiqueta--novo{background:var(--grafite);color:var(--branco);}
.etiqueta--off{background:var(--lilas);color:var(--branco);}

.card__comprar{
  position:absolute;left:.9rem;right:.9rem;bottom:.9rem;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem;border:0;border-radius:var(--raio-sm);
  background:var(--grafite);color:var(--branco);
  font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;
  opacity:0;transform:translateY(10px);
  box-shadow:var(--sombra-md);
  transition:opacity .45s var(--suave),transform .45s var(--suave),background .3s;
}
.card__comprar:hover{background:var(--zap);}
.card__comprar svg{width:15px;height:15px;}
.card:hover .card__comprar,
.card:focus-within .card__comprar{opacity:1;transform:none;}

.card__corpo{padding:1.15rem .15rem 0;display:flex;flex-direction:column;gap:.3rem;}
.card__nome{
  font-size:.92rem;font-weight:400;letter-spacing:.005em;line-height:1.4;
}
.card__categoria{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--prata-escura);
}
.secao--escuro .card__categoria{color:#8f8f8f;}

.card__precos{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-top:.2rem;}
.card__preco{font-size:1.02rem;font-weight:500;letter-spacing:.01em;}
.card__antigo{font-size:.8rem;color:var(--prata-escura);text-decoration:line-through;}
.card__parcelas{font-size:.72rem;color:var(--prata-escura);}
.secao--escuro .card__parcelas{color:#8f8f8f;}

.card__detalhes{
  display:inline-flex;align-items:center;gap:.35rem;align-self:flex-start;
  margin-top:.7rem;background:none;border:0;padding:0;cursor:pointer;
  font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lilas);
  transition:gap .3s var(--suave),color .3s;
}
.card__detalhes svg{width:12px;height:12px;transition:transform .3s var(--suave);}
.card__detalhes:hover{color:var(--grafite);gap:.55rem;}
.secao--escuro .card__detalhes{color:var(--lilas-medio);}
.secao--escuro .card__detalhes:hover{color:var(--branco);}

/* --- skeleton (carregando) --- */
.card-esqueleto{display:flex;flex-direction:column;}
.card-esqueleto .card__foto{background:var(--neve);}
.esqueleto-bloco{
  border-radius:var(--raio-md);
  background:linear-gradient(100deg,var(--neve) 25%,var(--cinza) 45%,var(--neve) 65%);
  background-size:250% 100%;
  animation:esqueleto-brilho 1.6s ease-in-out infinite;
}
.card-esqueleto .card__foto{aspect-ratio:4/5;}
.card-esqueleto .card__corpo{padding-top:1.15rem;gap:.55rem;}
.esqueleto-linha{height:.8rem;border-radius:5px;}
.esqueleto-linha--categoria{width:36%;height:.6rem;}
.esqueleto-linha--nome{width:78%;height:1rem;}
.esqueleto-linha--preco{width:44%;height:1.05rem;margin-top:.15rem;}
@keyframes esqueleto-brilho{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
@media (prefers-reduced-motion:reduce){
  .esqueleto-bloco{animation:none;}
}

/* estado vazio */
.vazio{text-align:center;padding:clamp(3rem,8vw,6rem) 1rem;}
.vazio__titulo{font-family:var(--f-display);font-size:1.8rem;margin-bottom:.6rem;}
.vazio__texto{color:var(--prata-escura);max-width:44ch;margin:0 auto 2rem;font-size:.88rem;}

/* ============ ABAS DAS COLEÇÕES ============ */
.abas{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem;}
.aba{
  background:none;border:1px solid rgba(255,255,255,.22);border-radius:100px;
  color:rgba(255,255,255,.72);
  padding:.6rem 1.5rem;cursor:pointer;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  transition:all .35s var(--suave);
}
.aba:hover{border-color:var(--branco);color:var(--branco);}
.aba.is-ativa{background:var(--branco);border-color:var(--branco);color:var(--preto);}
.colecao__descricao{
  color:rgba(255,255,255,.6);font-size:.86rem;
  max-width:56ch;margin-bottom:2.6rem;
}

/* ============ 7. MODAL ============ */
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:1rem;}
.modal__fundo{
  position:absolute;inset:0;
  background:rgba(11,11,11,.55);backdrop-filter:blur(6px);
  animation:aparecer .4s var(--suave);
}
@keyframes aparecer{from{opacity:0;}to{opacity:1;}}

.modal__caixa{
  position:relative;
  width:min(1120px,100%);max-height:92svh;overflow-y:auto;
  background:var(--branco);border-radius:var(--raio-lg);
  padding:clamp(1.5rem,4vw,3.2rem);
  box-shadow:var(--sombra-lg);
  animation:subir .5s var(--suave);
}
@keyframes subir{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}

.modal__fechar{
  position:absolute;top:.8rem;right:1rem;z-index:3;
  background:none;border:0;cursor:pointer;
  font-size:2rem;line-height:1;color:var(--prata-escura);
  transition:color .3s,transform .3s;
}
.modal__fechar:hover{color:var(--grafite);transform:rotate(90deg);}

.modal__conteudo{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.4rem);
}
.modal__principal{
  position:relative;aspect-ratio:1;background:var(--neve);
  overflow:hidden;border-radius:var(--raio-md);cursor:zoom-in;
}
.modal__principal img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--suave);
  transform-origin:center;
}
.modal__principal.is-ampliada{cursor:zoom-out;}
.modal__principal.is-ampliada img{transform:scale(1.9);}
.modal__principal__dica{
  position:absolute;right:.8rem;bottom:.8rem;z-index:2;
  display:flex;align-items:center;gap:.4rem;
  background:rgba(11,11,11,.55);color:#fff;backdrop-filter:blur(4px);
  padding:.45rem .8rem;border-radius:100px;
  font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  pointer-events:none;opacity:0;transition:opacity .3s;
}
.modal__principal:hover .modal__principal__dica{opacity:1;}
.modal__principal.is-ampliada .modal__principal__dica{opacity:0;}
.modal__principal__dica svg{width:13px;height:13px;}

.modal__galeria{display:flex;gap:.6rem;margin-top:.6rem;flex-wrap:wrap;}
.miniatura{
  width:66px;height:66px;padding:0;flex:none;border-radius:var(--raio-sm);
  border:1px solid var(--cinza);background:var(--neve);cursor:pointer;
  overflow:hidden;transition:border-color .3s,box-shadow .3s;
}
.miniatura img{width:100%;height:100%;object-fit:cover;}
.miniatura.is-ativa,.miniatura:hover{border-color:var(--lilas);box-shadow:0 0 0 3px var(--lilas-claro);}

.modal__info{display:flex;flex-direction:column;}
.modal__nome{
  font-family:var(--f-display);
  font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:300;letter-spacing:-.01em;
  margin-bottom:.9rem;
}
.modal__descricao{color:#4a4a4a;font-size:.92rem;margin-bottom:1.6rem;}

.ficha{margin:0 0 1.8rem;display:grid;gap:.1rem;}
.ficha > div{
  display:grid;grid-template-columns:110px 1fr;gap:1rem;
  padding:.75rem 0;border-top:1px solid var(--cinza);
}
.ficha > div:last-child{border-bottom:1px solid var(--cinza);}
.ficha dt{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--prata-escura);
  padding-top:.15rem;
}
.ficha dd{margin:0;font-size:.85rem;}

.modal__preco{display:flex;align-items:baseline;flex-wrap:wrap;gap:.7rem;margin-bottom:1.4rem;}
.preco__antigo{color:var(--prata-escura);text-decoration:line-through;font-size:.9rem;}
.preco__valor{font-size:1.9rem;font-weight:500;letter-spacing:-.01em;}
.preco__parcelas{width:100%;font-size:.8rem;color:var(--prata-escura);}

.modal__acoes{display:flex;gap:.7rem;flex-wrap:wrap;}
.modal__acoes .btn{flex:1 1 180px;}

.modal__aviso{
  font-size:.74rem;color:var(--prata-escura);line-height:1.6;
  margin-top:.9rem;text-align:center;
}

/* --- aviso flutuante (ex.: link copiado) --- */
.aviso-flutuante{
  position:fixed;left:50%;bottom:1.5rem;z-index:250;
  transform:translateX(-50%) translateY(16px);
  background:var(--grafite);color:var(--branco);
  padding:.85rem 1.5rem;border-radius:100px;
  font-size:.78rem;letter-spacing:.02em;
  box-shadow:var(--sombra-lg);
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--suave),transform .3s var(--suave);
}
.aviso-flutuante.is-visivel{opacity:1;transform:translateX(-50%) translateY(0);}

.modal__similares{margin-top:clamp(2.4rem,5vw,3.6rem);}
.modal__subtitulo{
  font-family:var(--f-display);font-size:1.5rem;font-weight:300;
  padding-bottom:1rem;margin-bottom:1.8rem;border-bottom:1px solid var(--cinza);
}
.trilho--modal{grid-template-columns:repeat(4,minmax(0,1fr));}
.trilho--modal .card__comprar{display:none;}

/* --- modal de informação (medidas, cuidados, envio) --- */
.modal__caixa--estreita{width:min(620px,100%);}
.info__corpo{margin:1.2rem 0 1.8rem;font-size:.9rem;color:#4a4a4a;}
.info__corpo p{margin-bottom:1rem;}
.info__corpo ul{display:grid;gap:.55rem;margin-bottom:1.2rem;}
.info__corpo li{padding-left:1.3rem;position:relative;line-height:1.65;}
.info__corpo li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--lilas-medio);
}
.info__tabela{width:100%;border-collapse:collapse;margin-bottom:1.2rem;font-size:.85rem;}
.info__tabela th{
  text-align:left;font-weight:500;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--prata-escura);
  padding:.6rem .5rem;border-bottom:1px solid var(--cinza);
}
.info__tabela td{padding:.62rem .5rem;border-bottom:1px solid var(--cinza);}
.info__tabela tr:hover td{background:var(--lilas-vidro);}
.info__dica{
  background:var(--lilas-vidro);border-left:2px solid var(--lilas-medio);
  padding:1rem 1.2rem;font-size:.85rem;line-height:1.7;
}
.modal__aviso a{color:var(--lilas);text-decoration:underline;text-underline-offset:3px;}

/* ============ 8. DEPOIMENTOS ============ */
.depoimentos{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.6rem);
}
.depo{
  background:var(--branco);border:1px solid var(--cinza);border-radius:var(--raio-md);
  padding:2rem 1.7rem;display:flex;flex-direction:column;gap:1rem;
  box-shadow:var(--sombra-sm);
  transition:transform .4s var(--suave),box-shadow .4s var(--suave);
}
.depo:hover{transform:translateY(-4px);box-shadow:var(--sombra-md);}
.depo__aspas{
  font-family:var(--f-display);font-size:3rem;line-height:.6;
  color:var(--prata-clara);
}
.depo__texto{font-size:.87rem;color:#4a4a4a;flex:1;}
.depo__pessoa{display:flex;align-items:center;gap:.8rem;padding-top:1rem;border-top:1px solid var(--cinza);}
.depo__avatar{
  width:40px;height:40px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:var(--neve);border:1px solid var(--prata-clara);
  font-size:.78rem;font-weight:500;color:var(--prata-escura);
}
.depo__info{display:flex;flex-direction:column;}
.depo__nome{font-size:.85rem;font-weight:500;line-height:1.3;}
.depo__cidade{font-size:.72rem;color:var(--prata-escura);}
.depo__nota{color:var(--lilas);font-size:.8rem;letter-spacing:.18em;}

/* ============ FEED ============ */
.feed{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:.6rem;
}
.post{
  position:relative;aspect-ratio:1;overflow:hidden;border-radius:var(--raio-sm);
  background:var(--neve);display:block;
}
.post img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--suave);}
.post:hover img{transform:scale(1.07);}
.post__info{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;gap:1.2rem;
  background:linear-gradient(160deg,rgba(155,111,196,.82),rgba(11,11,11,.72));color:var(--branco);
  font-size:.82rem;letter-spacing:.04em;
  opacity:0;transition:opacity .4s var(--suave);
}
.post:hover .post__info,.post:focus-visible .post__info{opacity:1;}
.post__info span{display:flex;align-items:center;gap:.35rem;}

/* ============ CONTATO ============ */
.contato{background:var(--preto);color:var(--branco);padding-block:var(--ritmo);}
.contato__inner{text-align:center;display:flex;flex-direction:column;align-items:center;}
.contato__titulo{
  font-family:var(--f-display);
  font-size:clamp(1.9rem,4.4vw,3.4rem);font-weight:300;line-height:1.1;
  margin-bottom:1.1rem;
}
.contato__texto{color:rgba(255,255,255,.62);max-width:46ch;margin-bottom:2.4rem;font-size:.9rem;}

/* ============ RODAPÉ ============ */
.rodape{background:var(--branco);border-top:1px solid var(--cinza);padding-top:clamp(3rem,6vw,5rem);}
.rodape__grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:2.5rem;padding-bottom:3rem;
}
.brand--rodape{margin-bottom:1.1rem;}
.rodape__frase{font-size:.85rem;color:var(--prata-escura);max-width:32ch;}
.rodape__col h3{
  font-size:.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  margin-bottom:1.1rem;color:var(--grafite);
}
.rodape__col li{font-size:.84rem;color:#5c5c5c;padding-block:.32rem;}
.rodape__col a{transition:color .3s;}
.rodape__col a:hover{color:var(--grafite);text-decoration:underline;text-underline-offset:4px;}
.rodape__base{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--cinza);
  padding-block:1.6rem;
  font-size:.74rem;color:var(--prata-escura);
}

/* ============ FLUTUANTES ============ */
.flutuante{
  position:fixed;z-index:80;
  display:grid;place-items:center;
  border-radius:50%;cursor:pointer;
  transition:transform .4s var(--suave),opacity .4s var(--suave),background .3s;
}
.flutuante--zap{
  right:1.25rem;bottom:1.25rem;
  width:56px;height:56px;
  background:var(--zap);color:#fff;border:0;
  box-shadow:0 10px 30px rgba(31,168,85,.32);
}
.flutuante--zap svg{width:29px;height:29px;}
.flutuante--zap:hover{transform:scale(1.07);}
.flutuante--zap::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--zap);
  animation:pulso 2.8s var(--suave) infinite;
}
@keyframes pulso{
  0%{transform:scale(1);opacity:.7;}
  70%,100%{transform:scale(1.5);opacity:0;}
}

.flutuante--topo{
  right:1.25rem;bottom:5.6rem;
  width:44px;height:44px;
  background:var(--branco);border:1px solid var(--cinza);color:var(--grafite);
}
.flutuante--topo svg{width:18px;height:18px;}
.flutuante--topo:hover{background:var(--grafite);color:var(--branco);border-color:var(--grafite);}

/* ============ 9. NAVEGAÇÃO MOBILE ============ */

/* --- bottom nav fixo, some acima de 760px --- */
.bottom-nav{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:rgba(255,255,255,.96);backdrop-filter:saturate(140%) blur(16px);
  border-top:1px solid rgba(94,61,115,.12);box-shadow:0 -8px 30px -22px rgba(94,61,115,.36);
  padding:.5rem clamp(.4rem,3vw,1.1rem) calc(.5rem + env(safe-area-inset-bottom));
  align-items:stretch;justify-content:space-between;gap:.25rem;
}
.bottom-nav__item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:.25rem;
  background:none;border:0;padding:.45rem .2rem;cursor:pointer;
  font-size:.58rem;letter-spacing:.02em;color:#6a6572;
  border-radius:12px;
  transition:color .25s,background .25s,transform .25s ease;
}
.bottom-nav__item svg{width:20px;height:20px;}
.bottom-nav__item:hover,.bottom-nav__item:focus-visible{
  color:var(--lilas-escuro);background:rgba(158,126,188,.08);transform:translateY(-1px);
}
.bottom-nav__item.is-ativo{
  color:var(--lilas-escuro);background:rgba(158,126,188,.12);box-shadow:inset 0 0 0 1px rgba(158,126,188,.12);
}
.bottom-nav__item--zap{color:var(--lilas-escuro);}
.bottom-nav__item--zap:hover,.bottom-nav__item--zap:focus-visible{color:var(--lilas-escuro);background:rgba(158,126,188,.08);}
.bottom-nav__badge{
  position:absolute;top:.15rem;right:22%;
  min-width:15px;height:15px;padding:0 3px;border-radius:100px;
  background:var(--lilas);color:#fff;font-size:.55rem;font-weight:600;
  display:grid;place-items:center;
}

/* --- painel de filtros: bloco normal no desktop, bottom-sheet no mobile --- */
.painel-filtros__topo,.painel-filtros__aplicar{display:none;}
.painel-filtros__fundo{display:none;}

@media (max-width:760px){
  .flutuante--zap,.flutuante--topo{display:none;}
  .bottom-nav{display:flex;}

  .painel-filtros{
    position:fixed;left:0;right:0;bottom:0;z-index:130;
    max-height:85svh;overflow-y:auto;
    background:var(--branco);
    border-radius:var(--raio-lg) var(--raio-lg) 0 0;
    box-shadow:var(--sombra-lg);
    padding:1rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
    transform:translateY(105%);
    transition:transform .4s var(--suave);
  }
  .painel-filtros.is-aberto{transform:translateY(0);}

  .painel-filtros__fundo{
    display:block;position:fixed;inset:0;z-index:125;
    background:rgba(11,11,11,.5);backdrop-filter:blur(2px);
    opacity:0;pointer-events:none;transition:opacity .3s var(--suave);
  }
  .painel-filtros__fundo.is-visivel{opacity:1;pointer-events:auto;}

  .painel-filtros__topo{
    display:flex;align-items:center;justify-content:space-between;
    padding-bottom:.9rem;margin-bottom:.9rem;border-bottom:1px solid var(--cinza);
  }
  .painel-filtros__titulo{font-family:var(--f-display);font-size:1.3rem;}
  .painel-filtros__fechar{
    background:var(--neve);border:0;border-radius:50%;
    width:34px;height:34px;font-size:1.2rem;line-height:1;cursor:pointer;color:var(--prata-escura);
  }
  .painel-filtros__aplicar{display:flex;width:100%;margin-top:1.2rem;}

  /* botão "Buscar" da navegação inferior abre só a pesquisa, sem misturar
     com ordenação/categorias (isso fica no botão "Filtrar") */
  .painel-filtros--somente-busca .ordenar,
  .painel-filtros--somente-busca .filtros,
  .painel-filtros--somente-busca .painel-filtros__aplicar{display:none;}
}

/* ============ RESPONSIVO ============ */
@media (max-width:1100px){
  .depoimentos{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:980px){
  .header__burger{display:flex;}

  .header__inner{
    padding-inline:1.25rem;
  }

  body{
    background-position:50% 12%, 18% 12%, 86% 78%, center center;
    background-attachment:scroll;
  }

  body::before{
    opacity:.7;
    background:
      radial-gradient(ellipse at 18% 68%, rgba(128,92,156,.18) 0%, transparent 18%),
      radial-gradient(ellipse at 82% 22%, rgba(128,92,156,.16) 0%, transparent 20%),
      radial-gradient(ellipse at 58% 78%, rgba(128,92,156,.12) 0%, transparent 20%);
  }

  /* IMPORTANTE: backdrop-filter em .header.solido cria um novo containing
     block para os descendentes com position:fixed — e o menu (.nav) e o
     fundo escurecido (.nav__fundo) estão dentro do <header>. Sem esta
     linha, ao abrir o menu (que força .solido no header) a gaveta some
     de ser "relativa à tela toda" e passa a ser "relativa ao cabeçalho",
     encolhendo para a altura da barra do topo. Backdrop-filter é só um
     efeito cosmético (vidro fosco) — remover no mobile não muda nada
     funcionalmente e não afeta o desktop (essa regra só existe aqui).  */
  .header.solido{backdrop-filter:none;-webkit-backdrop-filter:none;}

  /* Capa: em telas estreitas e altas, 50% 35% pode cortar o assunto
     principal da foto pra um dos lados. Centraliza nos dois eixos só no
     mobile — mantém object-fit:cover (sem distorcer/esticar), o desktop
     continua com o enquadramento original (50% 35%). */
  .hero__img{object-position:center center;}

  .hero{
    padding:5rem 1.25rem 2.5rem;
  }

  .hero__media::before,
  .hero__media::after{
    transform:scale(.75);
  }

  .hero__joias{
    right:-14%;
    bottom:-12%;
    width:min(62vw, 340px);
    opacity:.85;
  }

  .hero__meta{
    gap:.45rem .7rem;
    margin-bottom:1.4rem;
    font-size:.56rem;
    letter-spacing:.12em;
    line-height:1.6;
  }

  .hero__titulo{
    font-size:clamp(3.2rem, 13vw, 5.1rem);
    line-height:.9;
    margin-bottom:1rem;
    max-width:7.2ch;
  }

  .hero__sub{
    font-size:clamp(1.05rem, 4.2vw, 1.35rem);
    line-height:1.5;
    max-width:18ch;
    margin-bottom:1.6rem;
  }

  .hero__acoes{
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:.8rem;
  }

  .hero__acoes .btn{
    width:100%;
    min-height:3.5rem;
    justify-content:center;
  }

  .hero__acoes .btn--claro,
  .hero__acoes .btn--zap{
    padding-inline:1.1rem;
  }

  /* --- menu lateral (gaveta), como nos apps/e-commerces comuns ---
     Painel estreito que desliza da esquerda, com fundo escurecido atrás,
     independente do cabeçalho (não é mais um "modo tela cheia" preso
     visualmente ao header). */
  .nav{
    position:fixed;top:0;left:0;bottom:0;z-index:89;
    width:clamp(272px,75vw,360px);
    border-radius:0 var(--raio-sm) var(--raio-sm) 0;
    background:var(--branco);
    padding:1.1rem 1.6rem 2.5rem;
    transform:translateX(-100%);
    transition:transform .4s var(--suave);
    overflow-y:auto;
    box-shadow:10px 0 34px -6px rgba(28,20,20,.16);
  }
  .nav.aberto{transform:none;}

  .nav__topo{
    display:flex;align-items:center;justify-content:space-between;
    padding-bottom:1rem;margin-bottom:.6rem;border-bottom:1px solid var(--cinza);
  }
  .nav__titulo{
    font-family:var(--f-display);font-size:1.15rem;color:var(--grafite);
  }
  .nav__fechar{
    background:var(--neve);border:0;border-radius:50%;
    width:34px;height:34px;font-size:1.3rem;line-height:1;cursor:pointer;
    color:var(--prata-escura);transition:background .3s,color .3s;
  }
  .nav__fechar:hover{background:var(--grafite);color:var(--branco);}

  .nav__list{flex-direction:column;align-items:flex-start;gap:.05rem;}
  .header:not(.solido) .nav.aberto .nav__list a{color:var(--grafite);}
  .nav__list li{width:100%;border-bottom:1px solid var(--cinza);}
  .nav__list a{
    display:block;width:100%;padding:.85rem 0;
    font-family:var(--f-display);font-size:1.15rem;
    letter-spacing:0;text-transform:none;font-weight:300;
  }
  .nav__list a::after{display:none;}

  /* fundo escurecido atrás da gaveta */
  .nav__fundo{
    position:fixed;inset:0;z-index:88;
    background:rgba(11,11,11,.5);backdrop-filter:blur(2px);
    opacity:0;pointer-events:none;
    transition:opacity .4s var(--suave);
  }
  .nav__fundo.visivel{opacity:1;pointer-events:auto;}

  /* o menu aberto força o cabeçalho a ficar sólido via JS */
  .grade,.trilho{grid-template-columns:repeat(3,minmax(0,1fr));}
  .trilho--modal{grid-template-columns:repeat(3,minmax(0,1fr));}
  .modal__conteudo{grid-template-columns:1fr;}
  .perfil__corpo{grid-template-columns:1fr;justify-items:center;text-align:center;}
  .perfil__foto{max-width:230px;}
  .perfil__numeros,.perfil__selos{justify-content:center;}

  /* bio: layout próprio para celular — não é só fonte menor. Fica logo
     no topo da seção, em faixa compacta; o cartão com as joias desce
     para baixo do texto (empilhado), então nunca há sobreposição. */
  .perfil__intro{
    flex-direction:column;
    border-radius:var(--raio-md);
    padding:1.7rem 1.3rem 1.9rem;
    margin-bottom:2rem;
    gap:1.3rem;
  }
  .perfil__intro-inner{
    max-width:100%;
    margin-inline:auto;
  }
  .perfil__intro-inner .titulo-secao{font-size:clamp(1.7rem,7vw,2.2rem);}
  .perfil__intro-inner .perfil__bio{
    max-width:34ch;
    font-size:.92rem;
    line-height:1.7;
    letter-spacing:.005em;
  }
  .perfil__intro-joia{
    width:100%;
    max-width:280px;
    aspect-ratio:16/9;
  }
  .rodape__grid{grid-template-columns:1fr 1fr;}
  .feed{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media (max-width:640px){
  .grade,.trilho,.trilho--modal{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.6rem .8rem;
  }
  .depoimentos{grid-template-columns:1fr;}
  .hero{align-items:flex-end;padding-bottom:5.5rem;}
  .hero__acoes{width:100%;}
  .hero__acoes .btn{flex:1 1 100%;}
  .hero__scroll{display:none;}
  .secao__head{align-items:flex-start;flex-direction:column;}
  /* .busca usa "flex:1 1 320px" pensado pra linha (desktop); com
     flex-direction:column os 320px de flex-basis viram altura em vez de
     largura e a caixa de busca fica enorme e vazia — reseta pra auto. */
  .controles{flex-direction:column;align-items:stretch;}
  .busca{flex:1 1 auto;}
  .ordenar select{width:100%;}
  .card__comprar{opacity:1;transform:none;position:static;margin-top:.9rem;}
  .card__foto::after{display:none;}
  .ficha > div{grid-template-columns:1fr;gap:.15rem;}
  .rodape__grid{grid-template-columns:1fr;gap:2rem;}
  .rodape__base{flex-direction:column;gap:.3rem;}
  .modal{padding:0;}
  .modal__caixa{max-height:100svh;border-radius:0;}
}

@media (max-width:430px){
  .header__inner{padding-inline:1.1rem;}
  .brand__name{font-size:clamp(1.55rem, 7vw, 1.9rem);}
  .brand__name em{letter-spacing:.28em;}
  .hero{padding-top:4.6rem;}
  .hero__meta{font-size:.52rem;letter-spacing:.1em;}
  .hero__titulo{max-width:6.5ch;}
  .hero__sub{max-width:17ch;}
  .hero__acoes .btn{min-height:3.35rem;}
}

@media (max-width:390px){
  .header__inner{padding-inline:1rem;}
  .hero__meta{gap:.35rem .55rem;}
  .hero__titulo{font-size:clamp(2.85rem, 14vw, 3.8rem);}
  .hero__sub{font-size:1rem;}
  .hero__acoes .btn{font-size:.71rem;letter-spacing:.14em;}
}

@media (max-width:375px){
  .brand{gap:.55rem;}
  .brand__mark{width:38px;height:38px;}
  .hero__meta{font-size:.5rem;}
  .hero__titulo{max-width:6ch;}
}

@media (max-width:320px){
  .header__inner{padding-inline:.75rem;}
  .hero{padding-inline:.8rem;}
  .hero__meta{font-size:.47rem;letter-spacing:.08em;}
  .hero__titulo{font-size:2.6rem;}
  .hero__sub{font-size:.96rem;}
  .hero__acoes .btn{letter-spacing:.12em;}
}

/* ============ MOVIMENTO REDUZIDO ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,.card{opacity:1;transform:none;}
}

/* ============ IMPRESSÃO ============ */
@media print{
  .header,.flutuante,.controles,.filtros,.hero__scroll,.modal{display:none !important;}
  .card,.reveal{opacity:1 !important;transform:none !important;}
  .secao--escuro,.contato{background:#fff !important;color:#000 !important;}
}