/* ============================================================
   PALETA E VARIÁVEIS
   ============================================================ */
:root{
  /* Paleta NOIVA — branco perolado + platina/prata com toque de champagne.
     (As variáveis mantêm os nomes; "ouro" agora é platina/prata.) */
  --marfim:    #FBFAF8;
  --creme:     #F1EFEB;
  --areia:     #E6E2DB;
  --espresso:  #2B2A2F;
  --espresso-suave: #5F5D64;
  --ouro:      #97A0A6;
  --ouro-claro:#C9CCD1;
  --ouro-fundo:#6E7178;
  --blush:     #E8E0D4;
  --prata:     #C2C6CD;
  --onix:      #1D1C20;
  --linha:     rgba(40,40,46,.12);

  --sombra-suave: 0 10px 30px -12px rgba(30,29,33,.20);
  --sombra-forte: 0 24px 60px -18px rgba(30,29,33,.34);

  --display: "Fraunces", Georgia, serif;
  --corpo:   "Jost", system-ui, sans-serif;

  --raio: 4px;
  --largura: 1240px;
}

/* ============================================================
   BASE
   ============================================================ */
*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--corpo);
  color:var(--espresso);
  background:var(--marfim);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* grão/textura sutil no fundo inteiro */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3{ font-family:var(--display); font-weight:400; line-height:1.08; letter-spacing:-.01em; }

::selection{ background:var(--ouro); color:var(--marfim); }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--corpo); font-weight:500; font-size:.82rem;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.85rem 1.6rem; border-radius:var(--raio);
  cursor:pointer; border:1px solid transparent;
  transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}
.btn:hover{ transform:translateY(-2px); }

.btn-solido{
  background:var(--espresso); color:var(--marfim);
  box-shadow:var(--sombra-suave);
}
.btn-solido:hover{ background:var(--ouro-fundo); box-shadow:var(--sombra-forte); }

.btn-vazado{
  background:transparent; color:var(--espresso);
  border-color:var(--espresso);
}
.btn-vazado:hover{ background:var(--espresso); color:var(--marfim); }

/* ============================================================
   CABEÇALHO
   ============================================================ */
.topo{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding:1rem clamp(1.2rem,4vw,3rem);
  background:rgba(251,247,240,.82);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--linha);
}
.marca{ display:flex; flex-direction:column; line-height:1.1; }
.marca-nome{ font-family:var(--display); font-size:1.4rem; font-weight:500; letter-spacing:.01em; }
.marca-tag{ font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ouro-fundo); margin-top:.15rem; }
.marca-logo{ height:42px; width:auto; max-width:62vw; display:block; }

.nav{ display:flex; gap:2rem; }
.nav a{
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--espresso-suave);
  position:relative; padding:.2rem 0;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--ouro);
  transition:width .3s ease;
}
.nav a:hover{ color:var(--espresso); }
.nav a:hover::after{ width:100%; }

.btn-wpp-topo{
  background:var(--espresso); color:var(--marfim);
  padding:.7rem 1.2rem; border-radius:var(--raio);
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
}
.btn-wpp-topo svg{ width:16px; height:16px; fill:currentColor; }
.btn-wpp-topo:hover{ background:var(--ouro-fundo); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; z-index:2;
  text-align:center;
  padding:clamp(4rem,10vw,8rem) clamp(1.2rem,5vw,2rem) clamp(3.5rem,7vw,6rem);
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(212,183,119,.28), transparent 70%),
    radial-gradient(45% 40% at 85% 30%, rgba(228,206,196,.45), transparent 70%),
    radial-gradient(40% 45% at 12% 60%, rgba(212,183,119,.18), transparent 70%),
    var(--marfim);
  overflow:hidden;
}
.hero-kicker{
  font-size:.78rem; letter-spacing:.34em; text-transform:uppercase; color:var(--ouro-fundo);
  margin-bottom:1.5rem;
  opacity:0; animation:sobe .8s ease .1s forwards;
}
.hero-titulo{
  font-size:clamp(2.6rem,7vw,5.6rem);
  font-weight:300;
  max-width:14ch; margin:0 auto;
  font-optical-sizing:auto;
  opacity:0; animation:sobe .9s ease .25s forwards;
}
.hero-titulo::first-letter{ color:var(--ouro-fundo); }
.hero-sub{
  max-width:46ch; margin:1.6rem auto 0;
  color:var(--espresso-suave); font-size:1.05rem; font-weight:300;
  opacity:0; animation:sobe .9s ease .45s forwards;
}
.hero-acoes{
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  margin-top:2.4rem;
  opacity:0; animation:sobe .9s ease .6s forwards;
}
.hero-stats{
  display:flex; align-items:center; justify-content:center; gap:clamp(1rem,4vw,2.6rem);
  margin-top:3.5rem;
  opacity:0; animation:sobe .9s ease .8s forwards;
}
.hero-stats > div:not(.risca){ display:flex; flex-direction:column; }
.hero-stats strong{ font-family:var(--display); font-size:1.7rem; font-weight:500; }
.hero-stats span{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--espresso-suave); }
.hero-stats .risca{ width:1px; height:34px; background:var(--linha); }

@keyframes sobe{ from{ opacity:0; transform:translateY(22px);} to{ opacity:1; transform:translateY(0);} }

/* ============================================================
   SEÇÕES
   ============================================================ */
.secao{
  position:relative; z-index:2;
  max-width:var(--largura); margin:0 auto;
  padding:clamp(4rem,8vw,7rem) clamp(1.2rem,4vw,3rem);
}
.secao-cabeca{ margin-bottom:3rem; }
.secao-kicker{
  font-size:.74rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ouro-fundo);
  margin-bottom:.7rem;
}
.secao-titulo{ font-size:clamp(2rem,5vw,3.4rem); font-weight:300; }

/* ---------- Pacotes ---------- */
.pacotes-grade{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem;
}
.pacote-card{
  position:relative; overflow:hidden;
  padding:2rem 1.5rem 1.6rem;
  background:var(--marfim);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  display:flex; flex-direction:column;
  min-height:240px;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.pacote-card:hover{ transform:translateY(-6px); box-shadow:var(--sombra-forte); border-color:transparent; }
.pacote-card .faixa{ position:absolute; top:0; left:0; right:0; height:4px; }
.pacote-card .p-nome{ font-family:var(--display); font-size:1.7rem; font-weight:500; }
.pacote-card .p-qtd{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ouro-fundo); margin:.3rem 0 1rem; }
.pacote-card .p-desc{ font-size:.92rem; color:var(--espresso-suave); font-weight:300; flex:1; }
.pacote-card .p-link{
  margin-top:1.2rem; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  color:var(--espresso); display:inline-flex; align-items:center; gap:.4rem;
  align-self:flex-start;
}
.pacote-card .p-link .seta{ transition:transform .3s ease; }
.pacote-card:hover .p-link .seta{ transform:translateX(5px); }

/* cores por nível */
.faixa.slim{    background:linear-gradient(90deg,var(--blush),#cdb3a6); }
.faixa.prata{   background:linear-gradient(90deg,#cfd4da,var(--prata)); }
.faixa.ouro{    background:linear-gradient(90deg,var(--ouro-claro),var(--ouro)); }
.faixa.premium{ background:linear-gradient(90deg,#3a332b,var(--ouro-fundo)); }

/* ---------- Filtros ---------- */
.filtros{
  display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.5rem;
  border-bottom:1px solid var(--linha); padding-bottom:1.4rem;
}
.filtro{
  font-family:var(--corpo); cursor:pointer;
  background:transparent; border:1px solid var(--linha);
  border-radius:100px; padding:.55rem 1.2rem;
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--espresso-suave);
  display:inline-flex; align-items:center; gap:.5rem;
  transition:all .25s ease;
}
.filtro .cont{
  font-size:.68rem; background:var(--areia); color:var(--espresso);
  border-radius:100px; padding:.05rem .5rem;
}
.filtro:hover{ border-color:var(--espresso); color:var(--espresso); }
.filtro.ativo{ background:var(--espresso); color:var(--marfim); border-color:var(--espresso); }
.filtro.ativo .cont{ background:rgba(255,255,255,.2); color:var(--marfim); }

/* ---------- Grade de vestidos ---------- */
.grade{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem;
}
.card{
  background:var(--marfim);
  border:1px solid var(--linha); border-radius:var(--raio);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .35s ease, box-shadow .35s ease;
  opacity:0; transform:translateY(18px);
}
.card.aparece{ opacity:1; transform:translateY(0); transition:opacity .6s ease, transform .6s ease, box-shadow .35s ease; }
.card:hover{ transform:translateY(-6px); box-shadow:var(--sombra-forte); }

.card-media{
  position:relative; aspect-ratio:3/4; overflow:hidden; cursor:zoom-in;
  background:linear-gradient(160deg,var(--creme),var(--areia));
}
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.card:hover .card-media img{ transform:scale(1.04); }
.card-media .lupa{
  position:absolute; inset:auto .7rem .7rem auto;
  width:34px; height:34px; border-radius:50%;
  background:rgba(251,247,240,.9); color:var(--espresso);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.8); transition:all .3s ease; font-size:.9rem;
}
.card:hover .card-media .lupa{ opacity:1; transform:scale(1); }

.card-corpo{ padding:1.1rem 1.1rem 1.3rem; display:flex; flex-direction:column; gap:.7rem; }
.card-topo{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.card-modelo{ font-family:var(--display); font-size:1.15rem; font-weight:500; }
.card-corpo .btn-card{
  margin-top:.2rem; width:100%;
  background:transparent; border:1px solid var(--espresso); color:var(--espresso);
  font-size:.74rem; padding:.7rem;
}
.card-corpo .btn-card:hover{ background:#25d366; border-color:#25d366; color:#fff; }
.card-corpo .btn-card svg{ width:15px; height:15px; fill:currentColor; }

/* selos de pacote */
.badge{
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  padding:.28rem .6rem; border-radius:100px; white-space:nowrap;
}
.badge.slim{    background:var(--blush); color:#7a5847; }
.badge.prata{   background:var(--prata); color:#3d4350; }
.badge.ouro{    background:var(--ouro-claro); color:#5e451a; }
.badge.premium{ background:var(--onix); color:var(--ouro-claro); }

.grade-vazia{ grid-column:1/-1; text-align:center; color:var(--espresso-suave); padding:3rem 0; }

/* ============================================================
   GALERIA DE FOTOS (card + lightbox)
   ============================================================ */
.galeria{ position:absolute; inset:0; }
.galeria-img{ display:block; }

/* setas */
.gal-seta{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer;
  background:rgba(251,247,240,.82); color:var(--espresso);
  font-size:1.5rem; line-height:1; font-family:var(--corpo);
  box-shadow:0 1px 6px rgba(20,16,12,.18);
  opacity:.5; transition:opacity .25s ease, background .25s ease, transform .25s ease;
}
.gal-seta:hover{ opacity:1; background:#fff; }
.gal-ant{ left:.45rem; }
.gal-prox{ right:.45rem; }
.card-media:hover .gal-seta{ opacity:.9; }

/* bolinhas */
.gal-bolinhas{
  position:absolute; left:0; right:0; bottom:.55rem; z-index:3;
  display:flex; justify-content:center; gap:6px; pointer-events:none;
}
.gal-bolinha{
  width:7px; height:7px; padding:0; border:none; border-radius:50%;
  background:rgba(255,255,255,.6); cursor:pointer; pointer-events:auto;
  box-shadow:0 0 0 1px rgba(20,16,12,.25);
  transition:background .2s ease, transform .2s ease;
}
.gal-bolinha.ativa{ background:#fff; transform:scale(1.25); }

/* selo de contagem (📷 N) no card */
.gal-selo{
  position:absolute; top:.6rem; left:.6rem; z-index:3;
  background:rgba(20,16,12,.6); color:#fbf7f0;
  font-size:.66rem; font-weight:500; letter-spacing:.02em;
  padding:.22rem .55rem; border-radius:100px;
  display:flex; align-items:center; gap:.2rem; pointer-events:none;
}

/* contador "2 / 5" no zoom */
.gal-contador{
  position:absolute; top:.8rem; left:50%; transform:translateX(-50%); z-index:3;
  background:rgba(20,16,12,.6); color:#fbf7f0;
  font-size:.78rem; letter-spacing:.04em;
  padding:.25rem .7rem; border-radius:100px; pointer-events:none;
}

/* galeria grande dentro do lightbox — mostra o vestido inteiro (sem cortar) */
.galeria-grande{
  position:relative; width:100%; min-height:300px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,var(--creme),var(--areia));
}
.lightbox-foto .galeria-img{
  width:auto; height:auto; max-width:100%; max-height:84vh; object-fit:contain;
}
.galeria-grande .gal-seta{ width:44px; height:44px; font-size:2rem; opacity:.8; }
.galeria-grande .gal-seta:hover{ opacity:1; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(20,16,12,.78); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease;
}
.lightbox.aberto{ opacity:1; visibility:visible; }
.lightbox-caixa{
  display:grid; grid-template-columns:1fr 320px;
  max-width:860px; width:100%; max-height:88vh;
  background:var(--marfim); border-radius:var(--raio); overflow:hidden;
  box-shadow:var(--sombra-forte);
  transform:translateY(20px) scale(.98); transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.lightbox.aberto .lightbox-caixa{ transform:translateY(0) scale(1); }
.lightbox-foto{ background:linear-gradient(160deg,var(--creme),var(--areia)); min-height:300px; }
.lightbox-foto img{ width:100%; height:100%; object-fit:cover; max-height:88vh; }
.lightbox-info{ padding:2.2rem; display:flex; flex-direction:column; gap:1rem; align-self:center; }
.lightbox-info h3{ font-size:2rem; }
.lightbox-desc{ color:var(--espresso-suave); font-weight:300; font-size:.95rem; }
.lightbox-info .badge{ align-self:flex-start; }
.lightbox-fechar{
  position:absolute; top:1.2rem; right:1.4rem; z-index:101;
  background:none; border:none; color:var(--marfim); font-size:2.4rem; line-height:1; cursor:pointer;
  transition:transform .25s ease; font-family:var(--corpo);
}
.lightbox-fechar:hover{ transform:rotate(90deg); }

/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape{
  position:relative; z-index:2;
  background:var(--onix); color:var(--creme);
  padding:clamp(3rem,6vw,5rem) clamp(1.2rem,4vw,3rem) 2rem;
  margin-top:2rem;
}
.rodape-conteudo{
  max-width:var(--largura); margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem;
  padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.12);
}
.rodape .marca-nome{ color:var(--marfim); font-size:1.7rem; }
.rodape-logo-link{ display:inline-block; }
.rodape-logo{ height:54px; width:auto; max-width:220px; display:block; margin-bottom:.7rem; }
.rodape-tag{ color:var(--ouro-claro); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; margin-top:.4rem; }
.rodape-bloco h3{ font-family:var(--corpo); font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ouro-claro); margin-bottom:1rem; font-weight:600; }
.rodape-bloco a, .rodape-bloco p{ display:block; color:var(--creme); font-weight:300; margin-bottom:.5rem; opacity:.85; transition:opacity .25s ease, color .25s ease; }
.rodape-bloco a:hover{ opacity:1; color:var(--ouro-claro); }
.rodape-credito{ max-width:var(--largura); margin:1.6rem auto 0; font-size:.74rem; color:rgba(242,233,220,.5); letter-spacing:.05em; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1024px){
  .pacotes-grade{ grid-template-columns:repeat(2,1fr); }
  .grade{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px){
  .nav{ display:none; }
  .grade{ grid-template-columns:repeat(2,1fr); gap:1rem; }
  .lightbox-caixa{ grid-template-columns:1fr; max-height:90vh; overflow-y:auto; }
  .lightbox-foto{ max-height:50vh; }
  .lightbox-foto .galeria-img{ max-height:46vh; }
  .galeria-grande{ min-height:auto; }
  .btn-wpp-topo span{ display:none; }
  .btn-wpp-topo{ padding:.7rem; }
}
@media (max-width:540px){
  .pacotes-grade{ grid-template-columns:1fr; }
  .hero-stats{ gap:1rem; }
  .marca-tag{ display:none; }
  .marca-logo{ height:34px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .card{ opacity:1; transform:none; }
}