/* ============================================================
   ZARTTE BRASÍLIA — style.css
   Klass Company · 2025
   Cor: #000 fundo, #fff texto, sem dourado
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

:root {
  --preto:       #000000;
  --preto2:      #0a0a0a;
  --preto3:      #111111;
  --preto4:      #181818;
  --branco:      #ffffff;
  --cinza:       rgba(255,255,255,0.55);
  --cinza-fraco: rgba(255,255,255,0.12);
  --linha:       rgba(255,255,255,0.08);
  --max:         1200px;
  --nav-h:       80px;
}

/* ---- RESET ---- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body {
  font-family:'DM Sans', sans-serif;
  background:var(--preto);
  color:var(--branco);
  overflow-x:hidden;
  line-height:1.6;
}
img { max-width:100%; display:block; }
a   { text-decoration:none; color:inherit; }
ul  { list-style:none; }

/* cursor customizado removido — cursor padrão do sistema */
.cursor, .cursor-ring { display:none; }

/* ---- CONTAINER ---- */
.container {
  max-width:var(--max);
  margin:0 auto;
  padding:0 clamp(20px,5%,72px);
  width:100%;
}

/* ---- TIPOGRAFIA ---- */
.display {
  font-family:'Bebas Neue', sans-serif;
  letter-spacing:0.04em;
  line-height:0.95;
}

.eyebrow {
  display:inline-flex; margin-bottom:20px;
}
.eyebrow--center { display:block; text-align:center; width:100%; }
.eyebrow::before { display:none; }
.eyebrow span {
  display:inline-block;
  font-size:0.65rem; letter-spacing:3px;
  text-transform:uppercase; color:var(--cinza);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:999px;
  padding:6px 16px;
}

.titulo-secao {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(3rem,6vw,5.5rem);
  line-height:0.95;
  letter-spacing:0.03em;
  margin-bottom:12px;
}

.subtitulo-secao {
  font-size:clamp(0.9rem,1.4vw,1rem);
  color:var(--cinza);
  margin-bottom:60px;
  max-width:560px;
}

/* ---- BOTÕES ---- */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family:'DM Sans', sans-serif;
  font-size:0.72rem; font-weight:500;
  letter-spacing:3px; text-transform:uppercase;
  padding:16px 40px;
  transition:all 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
  position:relative; overflow:hidden;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:var(--branco); transform:translateX(-101%);
  transition:transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
  z-index:-1;
}
.btn:hover::after { transform:translateX(0); }
.btn:hover { color:var(--preto); }

.btn-branco {
  border:1px solid var(--branco);
  color:var(--branco);
}

.btn-preto {
  background:var(--branco); color:var(--preto);
}
.btn-preto::after { background:var(--preto); }
.btn-preto:hover { color:var(--branco); border-color:var(--branco); }

.btn-ghost {
  border:1px solid var(--linha);
  color:var(--cinza);
}
.btn-ghost::after { background:rgba(255,255,255,0.06); }
.btn-ghost:hover { color:var(--branco); border-color:rgba(255,255,255,0.3); }

/* ---- NAVBAR ---- */
.navbar {
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h); z-index:500;
  display:flex; align-items:center;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:background 0.3s;
  opacity:0; transform:translateY(-20px);
  animation:navbarIn 0.7s cubic-bezier(0.22,1,0.36,1) 0.1s forwards;
}
@keyframes navbarIn {
  to { opacity:1; transform:translateY(0); }
}
.navbar.scrolled {
  background:rgba(0,0,0,0.55);
}
.navbar .container {
  display:flex; align-items:center;
  justify-content:space-between;
}
.nav-logo img {
  height:52px; width:auto;
}
.nav-logo-text {
  font-family:'Bebas Neue', sans-serif;
  font-size:1.6rem; letter-spacing:0.12em; color:var(--branco);
}
.nav-links {
  display:flex; align-items:center; gap:40px;
}
.nav-links a {
  font-size:0.7rem; letter-spacing:3px;
  text-transform:uppercase; color:var(--cinza);
  transition:color 0.2s;
  position:relative;
}
.nav-links a::after {
  content:''; position:absolute; left:0; bottom:-4px;
  width:0; height:1px; background:var(--branco);
  transition:width 0.3s;
}
.nav-links a:hover { color:var(--branco); }
.nav-links a:hover::after { width:100%; }
.nav-links a.ativo { color:var(--branco); }
.nav-links a.ativo::after { width:100%; }

.nav-cta {
  font-size:0.65rem; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--preto);
  background:var(--branco); padding:10px 24px;
  transition:background 0.3s, color 0.3s;
  white-space:nowrap;
}
.nav-cta:hover { background:rgba(255,255,255,0.85); }

/* ---- MEGAMENU PRODUTOS — 2 níveis com JS ---- */
.nav-item--dropdown { position:relative; }
.nav-item--dropdown > a {
  display:flex; align-items:center; gap:6px; cursor:pointer;
}
.nav-dropdown-arrow {
  display:inline-block; width:5px; height:5px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform 0.2s; flex-shrink:0;
}
.nav-item--dropdown.aberto .nav-dropdown-arrow {
  transform:rotate(225deg) translateY(2px);
}
.nav-item--dropdown > a .nav-link-txt { position:relative; }
.nav-item--dropdown > a .nav-link-txt::after {
  content:''; position:absolute; left:0; bottom:-4px;
  width:0; height:1px; background:var(--branco); transition:width 0.3s;
}
.nav-item--dropdown.aberto > a { color:var(--branco); }
.nav-item--dropdown.aberto > a .nav-link-txt::after { width:100%; }

/* Painel de categorias */
.megamenu {
  position:absolute; top:calc(100% + 14px); left:50%;
  transform:translateX(-50%);
  opacity:0; pointer-events:none;
  transition:opacity 0.18s ease;
  z-index:600;
}
.megamenu__inner {
  background:#141414;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 24px 64px rgba(0,0,0,0.85);
  min-width:220px;
  padding:8px 0;
}
.nav-item--dropdown.aberto .megamenu {
  opacity:1; pointer-events:all;
}

/* Item de categoria */
.megamenu__cat-item { position:relative; }
.megamenu__cat-btn {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:11px 22px;
  font-size:0.72rem; letter-spacing:2.5px; text-transform:uppercase;
  color:rgba(255,255,255,0.65); background:none; border:none;
  cursor:pointer; transition:color 0.15s, background 0.15s;
  font-family:'DM Sans',sans-serif; text-align:left; gap:14px;
}
.megamenu__cat-btn:hover,
.megamenu__cat-item.aberto .megamenu__cat-btn {
  color:#fff; background:rgba(255,255,255,0.06);
}
.megamenu__cat-arrow {
  display:inline-block; width:5px; height:5px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(-45deg); flex-shrink:0; transition:transform 0.2s;
}
.megamenu__cat-item.aberto .megamenu__cat-arrow { transform:rotate(45deg); }

/* Submenu de linhas */
.megamenu__sub {
  position:absolute; top:0; left:calc(100% + 6px);
  opacity:0; pointer-events:none;
  transition:opacity 0.15s ease;
  z-index:601;
}
.megamenu__sub-inner {
  background:#141414;
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 24px 64px rgba(0,0,0,0.85);
  padding:8px 0; min-width:200px;
}
.megamenu__cat-item.aberto .megamenu__sub {
  opacity:1; pointer-events:all;
}
.megamenu__link {
  display:block; padding:9px 22px;
  font-size:0.88rem; color:rgba(255,255,255,0.75);
  transition:color 0.12s, padding-left 0.12s; white-space:nowrap;
}
.megamenu__link::after { display:none !important; }
.megamenu__link:hover { color:#fff; padding-left:28px; }

.megamenu__div {
  height:1px; background:rgba(255,255,255,0.06); margin:5px 0;
}

/* Mobile: produtos como subcategorias */
.nav-mobile__cat {
  font-size:0.58rem; letter-spacing:3px; text-transform:uppercase;
  color:rgba(255,255,255,0.25); padding:16px 0 4px;
  display:block; width:100%; text-align:center;
}
.nav-mobile__sub {
  font-family:'DM Sans',sans-serif !important;
  font-size:1rem !important; padding:10px 8px !important;
  color:rgba(255,255,255,0.5) !important; letter-spacing:0.5px !important;
  text-align:left !important; border-bottom:none !important;
}
.nav-mobile__sub:hover { color:var(--branco) !important; }

.nav-toggle {
  display:none; flex-direction:column; gap:6px;
  background:none; border:none; cursor:none; padding:4px;
}
.nav-toggle span {
  display:block; width:26px; height:1px; background:var(--branco);
  transition:all 0.35s;
}
.nav-toggle.aberto span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.aberto span:nth-child(2) { opacity:0; }
.nav-toggle.aberto span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Menu mobile */
.nav-mobile {
  position:fixed; inset:0; background:var(--preto);
  z-index:450; display:flex; flex-direction:column;
  align-items:stretch; gap:0;
  padding:100px 28px 60px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  clip-path:circle(0% at calc(100% - 40px) 36px);
  transition:clip-path 0.6s cubic-bezier(0.76,0,0.24,1);
  pointer-events:none;
}
.nav-mobile.aberto {
  clip-path:circle(150% at calc(100% - 40px) 36px);
  pointer-events:all;
}
.nav-mobile a {
  font-family:'Bebas Neue', sans-serif;
  font-size:1.9rem; letter-spacing:0.05em;
  color:var(--cinza); padding:12px 8px;
  transition:color 0.2s;
  display:block; width:100%; text-align:left;
  flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.nav-mobile a:hover { color:var(--branco); }

/* Mobile: Produtos colapsável */
.nav-mobile__produtos-btn {
  font-family:'Bebas Neue', sans-serif;
  font-size:1.9rem; letter-spacing:0.05em;
  color:var(--cinza); padding:12px 8px;
  background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  width:100%; text-align:left; flex-shrink:0;
  transition:color 0.2s;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.nav-mobile__produtos-btn:hover, .nav-mobile__produtos-btn.aberto { color:var(--branco); }
.nav-mobile__produtos-arrow {
  display:inline-block; width:10px; height:10px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform 0.25s; flex-shrink:0;
}
.nav-mobile__produtos-btn.aberto .nav-mobile__produtos-arrow {
  transform:rotate(-135deg);
}
.nav-mobile__produtos-list {
  display:block; width:100%;
  max-height:0; opacity:0;
  overflow:hidden;
  transition:max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.3s ease;
}
.nav-mobile__produtos-list.aberto {
  max-height:2000px; opacity:1;
}
.nav-mobile__produtos-list > div { padding-left:8px; }

/* Nível 2: categorias colapsáveis dentro de Produtos */
.nav-mobile__cat-btn {
  font-family:'DM Sans',sans-serif;
  font-size:1rem; letter-spacing:2px; text-transform:uppercase;
  color:rgba(255,255,255,0.5); background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  width:100%; text-align:left; padding:14px 8px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:color 0.2s;
}
.nav-mobile__cat-btn:hover, .nav-mobile__cat-btn.aberto { color:#fff; }
.nav-mobile__cat-arrow {
  display:inline-block; width:8px; height:8px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform 0.25s; flex-shrink:0;
}
.nav-mobile__cat-btn.aberto .nav-mobile__cat-arrow { transform:rotate(-135deg); }
.nav-mobile__cat-list {
  display:block; width:100%;
  max-height:0; opacity:0;
  overflow:hidden;
  transition:max-height 0.35s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.25s ease;
}
.nav-mobile__cat-list.aberto {
  max-height:800px; opacity:1;
}
.nav-mobile__cat-list > div { padding-left:16px; }

/* ---- SCROLL REVEAL ---- */
[data-reveal] {
  opacity:0; transform:translateY(24px);
  transition:opacity 0.6s cubic-bezier(0.25,0.46,0.45,0.94),
             transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}
[data-reveal].visivel { opacity:1; transform:translateY(0); }

[data-reveal-left] {
  opacity:0; transform:translateX(-48px);
  transition:opacity 0.65s cubic-bezier(0.25,0.46,0.45,0.94),
             transform 0.65s cubic-bezier(0.25,0.46,0.45,0.94);
}
[data-reveal-left].visivel { opacity:1; transform:translateX(0); }

[data-reveal-right] {
  opacity:0; transform:translateX(48px);
  transition:opacity 0.65s cubic-bezier(0.25,0.46,0.45,0.94),
             transform 0.65s cubic-bezier(0.25,0.46,0.45,0.94);
}
[data-reveal-right].visivel { opacity:1; transform:translateX(0); }

[data-reveal-up] {
  opacity:0; transform:translateY(32px);
  transition:opacity 0.65s cubic-bezier(0.25,0.46,0.45,0.94),
             transform 0.65s cubic-bezier(0.25,0.46,0.45,0.94);
}
[data-reveal-up].visivel { opacity:1; transform:translateY(0); }

/* ---- FOOTER ---- */
.footer {
  background:var(--preto2);
  border-top:1px solid var(--linha);
  padding:60px 0 0;
}
.footer__grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:48px; padding-bottom:48px;
}
.footer__logo img {
  height:28px; margin-bottom:16px;
}
.footer__logo p {
  font-size:0.8rem; color:var(--cinza); line-height:1.7;
  max-width:260px;
}
.footer__col h4 {
  font-size:0.65rem; letter-spacing:3px;
  text-transform:uppercase; color:var(--cinza);
  margin-bottom:20px;
}
.footer__col a {
  display:block; font-size:0.85rem;
  color:rgba(255,255,255,0.6);
  padding:5px 0; transition:color 0.2s;
}
.footer__col a:hover { color:var(--branco); }
.footer__bottom {
  border-top:1px solid var(--linha);
  padding:20px 0;
}
.footer__bottom .container {
  display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:10px;
}
.footer__bottom span {
  font-size:0.72rem; color:var(--cinza);
}
.footer__bottom strong { color:var(--branco); }

/* ---- WHATSAPP FLUTUANTE ---- */
.wpp-float {
  position:fixed; bottom:28px; right:28px;
  width:56px; height:56px; border-radius:50%;
  background:#25d366; z-index:400;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 32px rgba(37,211,102,0.3);
  transition:transform 0.3s, box-shadow 0.3s;
}
.wpp-float:hover {
  transform:scale(1.1);
  box-shadow:0 12px 40px rgba(37,211,102,0.45);
}

/* ---- LINHA DECORATIVA ---- */
.linha-h {
  width:100%; height:1px;
  background:var(--linha); margin:0;
}

/* ---- RESPONSIVIDADE ---- */
@media (max-width:960px) {
  .nav-links, .nav-cta { display:none; }
  .nav-toggle { display:flex; }
  .footer__grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .footer__grid { grid-template-columns:1fr; }
  .footer__bottom .container { flex-direction:column; text-align:center; }
}

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