/* ------------------------------
   RESET E VARIÁVEIS
------------------------------ */
:root {
  --black:#111111;
  --white:#ffffff;
  --gold:#d4af37;
  --emerald:#10b981;
  --stone:#f6f7f8;
  --muted:#4b5563;

  --radius:18px;
  --shadow:0 10px 25px rgba(0,0,0,.18);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{
  background:var(--black);
  color:var(--white);
  font-family:Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
a{ color:inherit; text-decoration:none }

.container{ max-width:1200px; margin:0 auto; padding:0 24px }

/* ------------------------------
   TIPOGRAFIA E UTILITÁRIOS
------------------------------ */
.headline{ font-family:"Playfair Display",serif; letter-spacing:.3px }
.title-xl{ font-size:48px; line-height:1.1; margin:0 }
.title-lg{ font-size:32px; line-height:1.15; margin:0 }
.title-md{ font-size:22px; margin:0 }
.sub{ color:#cfd3da }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  border:1px solid rgba(212,175,55,.35);
  background:linear-gradient(180deg,rgba(212,175,55,.18),rgba(212,175,55,.06));
  color:#f5e7ba; font-weight:600
}

.btn{
  display:inline-block; padding:12px 18px; border-radius:12px;
  background:linear-gradient(135deg,var(--gold),#c39b2a);
  color:var(--black); font-weight:700;
  box-shadow:0 6px 20px rgba(212,175,55,.35);
  transition:.2s ease
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.05) }

.btn-ghost{
  padding:10px 16px; border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.02)
}

/* ------------------------------
   SECTIONS
------------------------------ */
.section{
  padding:72px 0;
  border-top:1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(1200px 500px at 10% -20%,rgba(212,175,55,.06),transparent),
    radial-gradient(1000px 400px at 100% -20%,rgba(16,185,129,.06),transparent);
}

/* ------------------------------
   HERO
------------------------------ */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#0c0c0c,#111111 50%,#0e0e0e)
}
.hero .wrap{
  display:grid; grid-template-columns:1.2fr .8fr;
  gap:32px; align-items:center; padding:96px 0
}
@media (max-width:980px){ .hero .wrap{ grid-template-columns:1fr; padding:72px 0 } }
.logo{ font-family:"Playfair Display",serif; font-size:48px; color:var(--gold); letter-spacing:.5px }
.hero-points{ margin:18px 0 28px; color:#d6d6d6 }
.hero-card{
  background:#131313; border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)
}
.hero-img{
  position:relative; background:#0f0f0f;
  border-radius:24px; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 25px 60px rgba(0,0,0,.45);
  padding:28px; display:flex; align-items:center; justify-content:center
}
.badge{
  position:absolute; top:18px; left:18px;
  background:rgba(212,175,55,.1); color:#f7e6b0;
  border:1px solid rgba(212,175,55,.45);
  padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:700; backdrop-filter:blur(4px)
}
.hero-mock{
  width:88%; max-width:480px;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.45))
}

/* ------------------------------
   PERSONALIZADOR
------------------------------ */
.customizer{ display:grid; grid-template-columns:1fr 1fr; gap:28px }
@media (max-width:980px){ .customizer{ grid-template-columns:1fr } }

.panel{
  background:#131313; border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)
}

.mock-stage{
  position:relative; background:#0f0f0f;
  border-radius:16px; display:grid; place-items:center;
  padding:24px; min-height:420px
}
.tee{ width:320px; max-width:85% }
.stamp{
  position:absolute; top:43%; left:50%;
  transform:translate(-50%,-50%) rotate(0deg);
  width:45%; opacity:.95; pointer-events:none;
  mix-blend-mode:normal;
}

.controls{ display:grid; gap:10px }
.controls label{ font-size:13px; color:#d6d6d6 }
.controls input[type="range"],
.controls input[type="file"],
.controls select{ width:100% }
.hint{ font-size:12px; color:#a9b0ba }

.palette{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:12px
}
.color-swatch{
  width:32px; height:32px; border-radius:50%;
  border:2px solid #fff; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.25)
}
.color-swatch:hover{ transform:scale(1.1) }

/* ------------------------------
   CATÁLOGO
------------------------------ */
.catalog{ display:grid; gap:28px }
.grid{ display:grid; gap:24px }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
@media (max-width:1024px){
  .grid-3{ grid-template-columns:repeat(2,1fr) }
  .grid-4{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:640px){ .grid-3,.grid-4{ grid-template-columns:1fr } }

.card{
  background:#131313; border:1px solid rgba(255,255,255,.06);
  border-radius:16px; overflow:hidden; position:relative;
  transition:.25s ease
}
.card:hover{ transform:translateY(-4px); box-shadow:0 25px 60px rgba(0,0,0,.4) }
.card-media{
  position:relative; aspect-ratio:4/3; background:#0f0f0f; display:grid; place-items:center
}
.card img{ max-width:88%; filter:drop-shadow(0 20px 25px rgba(0,0,0,.35)) }
.card-body{ padding:16px }
.meta{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.badge-mini{
  position:absolute; top:12px; left:12px;
  background:rgba(212,175,55,.12); color:#f5e7ba;
  border:1px solid rgba(212,175,55,.45);
  padding:6px 10px; border-radius:999px;
  font-size:11px; font-weight:700
}
.cta-float{
  position:absolute; inset:auto 12px 12px auto;
  opacity:0; transform:translateY(6px); transition:.25s ease
}
.card:hover .cta-float{ opacity:1; transform:translateY(0) }

/* ------------------------------
   STATEMENT
------------------------------ */
.statement{
  display:grid; place-items:center; min-height:280px;
  background:radial-gradient(1000px 400px at 10% -20%,rgba(212,175,55,.08),transparent);
  text-align:center
}
.statement h2{
  font-size:42px; color:var(--gold);
  font-family:"Playfair Display",serif; margin:12px 0
}

/* ------------------------------
   FOOTER
------------------------------ */
footer{
  padding:38px 0; background:#0d0d0d;
  border-top:1px solid rgba(255,255,255,.06)
}
footer .row{
  display:flex; align-items:center; justify-content:space-between; gap:16px
}
@media (max-width:720px){ footer .row{ flex-direction:column; text-align:center } }
.icons{ display:flex; gap:12px }
.icon{
  width:38px; height:38px; border-radius:12px;
  display:grid; place-items:center;
  background:#141414; border:1px solid rgba(255,255,255,.08)
}
.icon i{ font-size:18px; color:var(--emerald) }

/* ------------------------------
   ANIMAÇÃO DE REVEAL
------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------
   SEÇÕES EXTRAS
------------------------------ */
#sobre,
#edicao-limitada,
#comunidade,
.cta-final {
  background: #0f0f0f;
  color: white;
  padding: 80px 20px;
}

#sobre h2,
#edicao-limitada h2,
#comunidade h2,
.cta-final h2 {
  color: var(--gold);
}

#sobre p,
#comunidade p,
.cta-final p {
  color: #e5e5e5;
  font-size: 1.1rem;
  line-height: 1.6;
}

#edicao-limitada .grid {
  margin-top: 28px;
}
#edicao-limitada .card,
#comunidade blockquote {
  background: #1a1a1a;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  transition: transform 0.25s ease;
}
#edicao-limitada .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

#comunidade blockquote {
  padding: 20px;
  font-size: 1rem;
  line-height: 1.5;
  position: relative;
}
#comunidade blockquote::before {
  content: "“";
  font-size: 3rem;
  color: var(--emerald);
  position: absolute;
  top: -10px;
  left: 20px;
}
#comunidade footer {
  margin-top: 10px;
  color: var(--gold);
  font-weight: 600;
}

.cta-final {
  text-align: center;
}
.cta-final .btn {
  margin-top: 20px;
}