/* ---------- Tokens ---------- */
:root{
  --bg: #0c0b0a;
  --bg-soft: #131110;
  --surface: #1a1815;
  --surface-2: #211e19;
  --line: rgba(245,241,232,.10);
  --line-strong: rgba(245,241,232,.18);
  --text: #f5f1e8;
  --text-dim: #b7b0a2;
  --text-faint: #837c6f;
  --accent: #f2a93b;
  --accent-2: #d9480f;
  --accent-grad: linear-gradient(100deg, #f7b83f 0%, #e8590c 100%);
  --shadow: 0 20px 50px -20px rgba(0,0,0,.6);
  --radius: 6px;
  --radius-lg: 10px;
  --font-head: "Poppins", "Manrope", sans-serif;
  --font-body: "Manrope", sans-serif;
  --container: 1180px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family: var(--font-head); margin:0 0 .5em; line-height:1.15; font-weight:700; }
p{ margin:0 0 1em; color: var(--text-dim); }
button, input, textarea{ font-family: inherit; font-size: 1rem; color: inherit; }
.container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.text-accent{ background: var(--accent-grad); -webkit-background-clip:text; background-clip:text; color: transparent; }

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- Intro ---------- */
html.intro-lock, html.intro-lock body{ overflow:hidden; height:100%; }

.intro-overlay{
  position:fixed; inset:0; z-index:3000;
  background: var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition: opacity .5s ease, visibility .5s ease;
}
.intro-overlay.is-done{ opacity:0; visibility:hidden; pointer-events:none; }

.intro-logo-stage{ position:relative; }

.intro-lockup{
  display:flex; flex-direction:column; align-items:flex-start;
  font-family: var(--font-head); font-weight:800; line-height:1;
  font-size: clamp(2.3rem, 6.5vw, 3.8rem);
}
.intro-row{ display:flex; align-items:center; }
.intro-word{ color: var(--text); white-space:nowrap; }
.intro-word-accent{
  background: var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.intro-letter{
  display:inline-block; opacity:0; transform: translateY(.22em);
  transition: opacity .4s ease, transform .4s ease;
}
.intro-letter.is-in{ opacity:1; transform:none; }

.intro-mark-img{
  height: .8em; width:auto; margin-left:.07em; transform-origin:center; transform: translateY(-.04em) scale(.8);
  opacity:0; transition: opacity .4s ease, transform .4s ease;
}
.intro-mark-img.is-in{ opacity:1; transform: translateY(-.04em) scale(1); }

.intro-tagline{
  opacity:0; margin:16px 0 0; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color: var(--text-faint); transition: opacity .5s ease;
}
.intro-tagline.is-in{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .intro-logo-stage, .intro-letter, .intro-mark-img{ transition:none !important; }
}

/* ---------- Progress bar ---------- */
.progress-bar{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background: var(--accent-grad); z-index:1000; transition: width .1s linear;
}

/* ---------- Header ---------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 900;
  background: rgba(12,11,10,0); border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.site-header.is-scrolled{
  background: rgba(12,11,10,.85);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px; }
.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand-mark{ height:48px; width:auto; display:block; }
.main-nav{ display:flex; gap:28px; margin:0 auto; }
.main-nav a{ font-size:.92rem; font-weight:600; color: var(--text-dim); position:relative; padding:6px 0; }
.main-nav a:hover, .main-nav a.is-active{ color: var(--text); }
.main-nav a.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--accent-grad); border-radius:2px;
}
.header-actions{ display:flex; align-items:center; gap:16px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 26px; border-radius: 999px; font-weight:700; font-size:.92rem;
  border: 1px solid transparent; cursor:pointer; white-space:nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--accent-grad); color:#161206; box-shadow: 0 10px 30px -10px rgba(232,89,12,.55); }
.btn-primary:hover{ box-shadow: 0 14px 34px -8px rgba(232,89,12,.7); }
.btn-outline{ border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn-outline:hover{ border-color: var(--accent); }
.btn-ghost{ padding: 10px 18px; border-radius: 999px; border:1px solid var(--line-strong); font-size:.85rem; font-weight:700; }
.btn-ghost:hover{ border-color: var(--accent); color: var(--accent); }
.btn-block{ width:100%; }

.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:36px; background:none; border:none; cursor:pointer; }
.nav-toggle span{ display:block; width:100%; height:2px; background: var(--text); border-radius:2px; transition: transform .25s ease, opacity .25s ease; }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ position:relative; padding: 168px 0 0; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-hide{ position:absolute; border-radius:50%; filter: blur(90px); opacity:.35; }
.hero-hide-1{ width:520px; height:520px; background: var(--accent-2); top:-160px; right:-120px; }
.hero-hide-2{ width:420px; height:420px; background: var(--accent); bottom:-180px; left:-140px; opacity:.18; }
.hero-grain{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(245,241,232,.05) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay; opacity:.5;
}
.hero-inner{ position:relative; z-index:1; max-width: 820px; text-align:center; margin:0 auto; }
.eyebrow{ display:inline-block; font-weight:700; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color: var(--accent); margin-bottom:18px; }
.hero-title{ font-size: clamp(2.2rem, 5.2vw, 3.6rem); letter-spacing:-.01em; }
.hero-sub{ font-size: 1.1rem; max-width: 620px; margin:0 auto 32px; }
.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom: 64px; }

.stats-bar{ position:relative; z-index:1; border-top:1px solid var(--line); background: var(--bg-soft); }
.stats-inner{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; padding: 40px 24px; }
.stat{ text-align:center; }
.stat-number{ display:block; font-family: var(--font-head); font-size: clamp(1.8rem,4vw,2.6rem); font-weight:800; background: var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-label{ font-size:.82rem; color: var(--text-dim); font-weight:600; }

/* ---------- Sections ---------- */
.section{ padding: 110px 0; }
.section-alt{ background: var(--bg-soft); }
.section-head{ max-width: 720px; margin: 0 auto 56px; text-align:center; }
.section-head h2{ font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.section-lead{ font-size: 1.05rem; margin-top:14px; }

/* ---------- História ---------- */
.historia-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:56px; align-items:start; }
.historia-lead{ color: var(--text); font-weight:600; }
.historia-cards{ display:flex; flex-direction:column; gap:20px; }
.mv-card{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 28px; }
.mv-tag{ display:inline-block; font-size:.75rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color: var(--accent); margin-bottom:10px; }
.mv-card p{ margin:0; font-size:.95rem; }

/* ---------- Diferenciais ---------- */
.diff-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.diff-card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 26px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.diff-card:hover{ transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.diff-icon{ width:46px; height:46px; border-radius:12px; background: rgba(242,169,59,.12); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.diff-icon svg{ width:24px; height:24px; fill:none; stroke: var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.diff-card h3{ font-size:1.1rem; margin-bottom:8px; }
.diff-card p{ font-size:.92rem; margin:0; }

/* ---------- Catálogo ---------- */
.catalog-controls{ display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:center; margin-bottom: 40px; }
.filter-tabs{ display:flex; flex-wrap:wrap; gap:10px; }
.filter-btn{
  background: transparent; border:1px solid var(--line-strong); color: var(--text-dim);
  padding: 9px 18px; border-radius:999px; font-weight:700; font-size:.85rem; cursor:pointer;
  transition: all .2s ease;
}
.filter-btn:hover{ border-color: var(--accent); color: var(--text); }
.filter-btn.is-active{ background: var(--accent-grad); border-color: transparent; color:#161206; }

.search-box{ position:relative; flex: 0 1 320px; }
.search-box svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px; fill:none; stroke: var(--text-faint); stroke-width:2; }
.search-box input{
  width:100%; background: var(--surface); border:1px solid var(--line); border-radius:999px;
  padding: 12px 16px 12px 40px; color: var(--text); outline:none; transition: border-color .2s ease;
}
.search-box input:focus{ border-color: var(--accent); }
.search-box input::placeholder{ color: var(--text-faint); }

.catalog-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.catalog-empty{ text-align:center; padding: 40px 0; }

.leather-card{
  background: transparent; border:none; padding:0;
  perspective: 1400px;
  position: relative; z-index: 1;
  transition: opacity .3s ease, z-index .3s ease;
}
.leather-card.is-hidden{ display:none; }
.leather-card:hover, .leather-card:focus-within{ z-index: 6; }

.lc-inner{
  position:relative; width:100%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.22,.85,.3,1.1);
}
.leather-card.is-flipped .lc-inner{ transform: rotateY(180deg); }

.lc-face{
  position:absolute; top:0; left:0; right:0;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px; display:flex; flex-direction:column;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.leather-card:hover .lc-face{ border-color: var(--line-strong); }
.lc-front{ cursor: pointer; }
.lc-back{ transform: rotateY(180deg); cursor: pointer; }

.lc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.lc-name{ font-family: var(--font-head); font-size:1.15rem; font-weight:700; margin:0; }
.lc-tagline{ font-size:.82rem; color: var(--accent); font-weight:700; margin:2px 0 0; }
.lc-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.lc-tags span{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:4px 9px; border-radius:999px; background: var(--surface-2); color: var(--text-faint); }
.lc-desc{ font-size:.88rem; margin-bottom:16px; }

/* Leque de couro: amostras empilhadas que se abrem ao passar o mouse */
.lc-fan{
  position:relative; height:92px; margin: 4px 0 20px;
}
.fan-piece{
  position:absolute; left:50%; bottom:0; width:36px; height:82px; margin-left:-18px;
  border-radius: 7px 7px 3px 3px;
  transform-origin: 50% 100%;
  transform: rotate(var(--rest-angle, 0deg));
  transition: transform .55s cubic-bezier(.22,.9,.28,1.1), filter .2s ease;
  box-shadow: 0 6px 14px -4px rgba(0,0,0,.6), inset 0 0 0 1px rgba(245,241,232,.14);
  cursor: default;
}
.fan-piece::before{
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:.55; mix-blend-mode:overlay; pointer-events:none;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.12) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(25deg, rgba(0,0,0,.22) 0 1px, transparent 1px 5px);
}
.fan-piece::after{
  content: attr(data-name); position:absolute; bottom:calc(100% + 10px); left:50%; transform: translateX(-50%);
  background:#000; color:#fff; font-size:.68rem; font-weight:600; padding:4px 8px; border-radius:6px;
  white-space:nowrap; opacity:0; pointer-events:none; transition: opacity .15s ease; z-index:20;
}
.fan-piece:hover{ filter: brightness(1.18); }
.fan-piece:hover::after{ opacity:1; }

@media (hover: hover) and (pointer: fine){
  .leather-card:hover .fan-piece{ transform: rotate(var(--angle, 0deg)); }
}
.leather-card.is-fanned .fan-piece{ transform: rotate(var(--angle, 0deg)); }

.lc-flip-btn{
  margin-top:auto; align-self:flex-start; background:none; border:none; color: var(--accent);
  font-weight:700; font-size:.85rem; cursor:pointer; padding:0; display:flex; align-items:center; gap:6px;
}
.lc-flip-btn svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; }

.lc-back-title{ font-family: var(--font-head); font-size:1.05rem; margin-bottom:12px; }
.lc-bullets{ margin:0 0 16px; padding-left:18px; list-style: disc; font-size:.85rem; }
.lc-bullets li{ margin-bottom:6px; color: var(--text-dim); }

@media (prefers-reduced-motion: reduce){
  .lc-inner, .fan-piece{ transition: transform .01s linear; }
}

/* ---------- Cobertura / Regiões ---------- */
.regions-grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap:18px; }
.region-card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 18px; text-align:center; transition: transform .25s ease, border-color .25s ease;
}
.region-card:hover{ transform: translateY(-5px); border-color: var(--accent); }
.region-name{ display:block; font-family: var(--font-head); font-weight:700; font-size:1.05rem; margin-bottom:6px; }
.region-states{ display:block; font-size:.8rem; color: var(--text-faint); }
.regions-note{ text-align:center; margin: 28px 0 0; font-size:.9rem; }

/* ---------- Contato ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:start; }
.contact-list{ display:flex; flex-direction:column; gap:20px; margin-bottom:26px; }
.contact-list li{ display:flex; flex-direction:column; gap:4px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.contact-list li:last-child{ border-bottom:none; padding-bottom:0; }
.contact-label{ font-size:.75rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color: var(--accent); }
.contact-list a:hover{ color: var(--accent); }
.map-frame{ border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line); height:260px; }
.map-frame iframe{ width:100%; height:100%; border:0; filter: grayscale(.3) invert(.92) contrast(.9); }

.contact-form{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; display:flex; flex-direction:column; gap:16px; }
.contact-form h3{ font-size:1.2rem; margin-bottom:4px; }
.contact-form label{ display:flex; flex-direction:column; gap:6px; font-size:.85rem; font-weight:700; color: var(--text-dim); }
.contact-form input, .contact-form textarea{
  background: var(--surface-2); border:1px solid var(--line-strong); border-radius: var(--radius);
  padding:12px 14px; color: var(--text); outline:none; resize: vertical; transition: border-color .2s ease;
  font-weight:400;
}
.contact-form input:focus, .contact-form textarea:focus{ border-color: var(--accent); }
.form-note{ font-size:.78rem; color: var(--text-faint); margin:0; text-align:center; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--line); padding-top: 64px; background: var(--bg-soft); }
.footer-inner{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:40px; padding-bottom: 40px; }
.footer-brand img{ height:38px; width:auto; margin-bottom:14px; }
.footer-brand p{ max-width:280px; font-size:.9rem; }
.footer-social{
  display:inline-flex; align-items:center; gap:8px; font-size:.85rem; font-weight:700; color: var(--text-dim);
  margin-top:4px; transition: color .2s ease;
}
.footer-social svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; }
.footer-social:hover{ color: var(--accent); }
.footer-heading{ display:block; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color: var(--accent); margin-bottom:14px; }
.footer-col{ display:flex; flex-direction:column; gap:10px; font-size:.9rem; color: var(--text-dim); }
.footer-col a:hover{ color: var(--accent); }
.footer-bottom{ border-top:1px solid var(--line); padding: 20px 24px; font-size:.8rem; color: var(--text-faint); }

/* ---------- WhatsApp FAB ---------- */
.whatsapp-fab{
  position:fixed; right:24px; bottom:24px; width:58px; height:58px; border-radius:50%;
  background: var(--accent-grad); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 30px -8px rgba(232,89,12,.7); z-index: 800; transition: transform .2s ease;
}
.whatsapp-fab:hover{ transform: scale(1.08); }
.whatsapp-fab svg{ width:28px; height:28px; fill:#161206; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .historia-grid{ grid-template-columns:1fr; }
  .diff-grid{ grid-template-columns: repeat(2,1fr); }
  .catalog-grid{ grid-template-columns: repeat(2,1fr); }
  .regions-grid{ grid-template-columns: repeat(3,1fr); }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 720px){
  .main-nav{
    position:fixed; top:76px; left:0; right:0; background: rgba(12,11,10,.98); backdrop-filter: blur(10px);
    flex-direction:column; align-items:center; padding: 24px; gap:22px;
    border-bottom:1px solid var(--line);
    transform: translateY(-8px); opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease;
  }
  .main-nav.is-open{ opacity:1; transform:none; pointer-events:auto; }
  .nav-toggle{ display:flex; }
  .header-actions .btn-ghost{ display:none; }
  .stats-inner{ grid-template-columns: repeat(2,1fr); }
  .diff-grid{ grid-template-columns: 1fr; }
  .catalog-grid{ grid-template-columns: 1fr; }
  .regions-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-inner{ grid-template-columns:1fr; }
  .section{ padding: 76px 0; }
  .hero{ padding-top: 140px; }
  .catalog-controls{ flex-direction:column; align-items:stretch; }
  .search-box{ flex-basis:auto; }
}