/* ============================================================
   AURUM — Heritage Luxury Perfume House
   Shell agent stylesheet. Noir + liquid gold + spice.
   Bulletproof: visible by default; reveals only enhance under html.js.
   ============================================================ */

:root{
  --bg:#061319;
  --bg-2:#0b212b;
  --ink:#eaf4f7;
  --ink-dim:#84a0ab;
  --gold:#1fb6c7;          /* teal clinico (engine "gold" slot) */
  --gold-bright:#48d6e6;
  --gold-deep:#0e6171;
  --amber:#cfe9ef;         /* cromo claro secundario */
  --line:rgba(31,182,199,0.18);
  --maxw:1320px;

  /* "serif" slot now drives the athletic display face */
  --serif:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --sans:'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --ease:cubic-bezier(0.22,1,0.36,1);
  --pad:clamp(20px, 5vw, 80px);

  --accent:#1fb6c7; /* per-product override via inline style */

  /* Altura do #nav, que e position:fixed. Derivada dos valores reais dele
     (padding 26px em cima e embaixo + a logo), e nao chutada: e usada para o
     atalho "Produtos" do menu parar ABAIXO do cabecalho em vez de embaixo
     dele, e para a barra de busca do catalogo grudar no lugar certo. Mexeu no
     padding do #nav ou na altura da logo, mexa aqui junto. */
  --nav-h:calc(52px + clamp(34px,3.4vw,46px));
}
@media (max-width:680px){ :root{ --nav-h:70px; } }   /* #nav cai para padding 18px + logo 34px */

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; overflow-x:clip; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  letter-spacing:0.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p{ margin:0; }
button{ font-family:inherit; color:inherit; background:none; border:none; cursor:pointer; }

/* deep noir gradient base so screen is never flat black */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(200,161,78,0.10), transparent 55%),
    radial-gradient(90% 70% at 80% 110%, rgba(200,119,47,0.08), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 60%, var(--bg) 100%);
  pointer-events:none;
}
/* faint film grain */
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0.04;
  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");
}

/* ---------- 3D canvas ---------- */
#webgl{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:2; display:block; pointer-events:auto; cursor:grab;
}

/* ============================================================
   REVEAL PATTERN — visible by default, hidden ONLY under html.js
   ============================================================ */
html.js .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  will-change:opacity, transform;
}
html.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html.js .reveal{ opacity:1 !important; transform:none !important; transition:none; }
}

/* ============================================================
   CUSTOM CURSOR — REMOVIDO em 19/08/2026 (decisão do Boss)
   ============================================================
   A "bolinha" saiu de vez: em máquina fraca ela ficava parada e a regra
   cursor:none deixava a pessoa sem cursor visível. O JS não cria mais o
   elemento .cursor nem adiciona html.cursor-on; ainda assim escondemos .cursor
   e NÃO escondemos mais o cursor nativo, pra não sobrar risco caso algum HTML
   em cache ainda traga um .cursor antigo. */
.cursor{ display:none !important; }

/* ============================================================
   LOADER / ENTER GATE
   ============================================================ */
#loader{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(80% 60% at 50% 40%, rgba(124,94,38,0.20), transparent 60%),
    var(--bg);
  transition:opacity 1.1s var(--ease), visibility 1.1s;
}
#loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-inner{
  text-align:center; padding:0 24px; max-width:640px;
  display:flex; flex-direction:column; align-items:center; gap:34px;
}
.loader-brand{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.loader-logo{ width:clamp(150px,20vw,230px); height:auto; display:block; mix-blend-mode:screen; filter:drop-shadow(0 8px 44px rgba(200,161,78,0.22)); }
.loader-brand-mark{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(54px, 12vw, 132px);
  letter-spacing:0.22em; text-indent:0.22em;
  line-height:0.9;
  color:var(--ink);
  background:linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.loader-brand-sub{
  font-family:var(--sans); font-weight:400;
  font-size:clamp(10px,1.4vw,13px);
  letter-spacing:0.5em; text-indent:0.5em;
  text-transform:uppercase; color:var(--ink-dim);
}
.loader-meter{ display:flex; flex-direction:column; align-items:center; gap:14px; width:min(340px, 70vw); }
.loader-line{ position:relative; width:100%; height:1px; background:var(--line); overflow:hidden; }
.loader-bar{
  position:absolute; left:0; top:0; height:100%; width:0%;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  transition:width .5s var(--ease);
}
.loader-progress{
  font-family:var(--serif); font-size:clamp(28px,5vw,46px); font-weight:300;
  color:var(--gold-bright); letter-spacing:0.05em;
}
.loader-progress::after{ content:"%"; font-size:0.45em; color:var(--ink-dim); margin-left:2px; vertical-align:super; }

.enter-btn{
  position:relative;
  display:inline-flex; flex-direction:column; align-items:center; gap:10px;
  padding:6px 4px;
  opacity:0.35; pointer-events:none;
  transition:opacity .6s var(--ease), transform .4s var(--ease);
}
.enter-btn:not([disabled]){ opacity:1; pointer-events:auto; }
.enter-btn-label{
  font-family:var(--sans); font-weight:400;
  font-size:14px; letter-spacing:0.42em; text-indent:0.42em;
  text-transform:uppercase; color:var(--ink);
}
.enter-btn-rule{ display:block; width:0; height:1px; background:var(--gold-bright); transition:width .5s var(--ease); }
.enter-btn:not([disabled]):hover .enter-btn-rule,
.enter-btn:not([disabled]):focus-visible .enter-btn-rule{ width:100%; }
.enter-btn:not([disabled]):hover{ transform:translateY(-2px); }
.loader-note{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(15px,2.2vw,19px); color:var(--ink-dim); letter-spacing:0.02em;
}

/* ============================================================
   NAV
   ============================================================ */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px var(--pad);
  transition:transform .5s var(--ease), background-color .5s var(--ease),
             padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
#nav.is-solid{
  background:rgba(7,5,4,0.66);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  padding-top:18px; padding-bottom:18px;
}
#nav.is-hidden{ transform:translateY(-104%); }
.nav-brand{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(22px,3vw,28px); letter-spacing:0.28em; text-indent:0.28em;
  color:var(--ink);
}
.nav-links{ display:flex; gap:clamp(20px,3vw,48px); }
.nav-links a{
  position:relative;
  font-size:12px; font-weight:400; letter-spacing:0.26em; text-indent:0.26em;
  text-transform:uppercase; color:var(--ink-dim);
  padding:4px 0; transition:color .4s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold-bright); transition:width .45s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ width:100%; }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
#scene-root{ position:relative; z-index:3; }
section{ position:relative; z-index:3; background:transparent; }
#webgl:active{ cursor:grabbing; }
/* Distinct per-section background, crossfading behind the transparent 3D bottle */
#stage-bg{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; background:#070504; }
.stage-bg-layer{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.1s ease; will-change:opacity; }
.stage-bg-layer.is-on{ opacity:1; }
.stage-bg-scrim{ position:absolute; inset:0; background:radial-gradient(130% 130% at 50% 42%, rgba(7,5,4,0.10), rgba(7,5,4,0.36) 76%, rgba(7,5,4,0.68)); }

.section-head{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px;
}
.section-kicker{
  font-size:12px; font-weight:400; letter-spacing:0.5em; text-indent:0.5em;
  text-transform:uppercase; color:var(--gold);
}
.section-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(38px,7vw,86px); line-height:1.02; letter-spacing:0.01em;
  color:var(--ink);
}
.section-lede{
  max-width:54ch; font-size:clamp(15px,1.8vw,18px); color:var(--ink-dim);
  font-weight:300; line-height:1.8;
}

/* text scrim so copy stays legible over the 3D bottles */
.text-scrim, .hero-inner, .scent-head, .scent-detail,
.manifesto-inner, .craft-inner, .closing-inner{
  position:relative;
}

/* ============================================================
   HERO
   ============================================================ */
#hero{
  min-height:100svh; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:120px var(--pad) 60px;
}
.hero-inner{
  display:flex; flex-direction:column; align-items:center; gap:clamp(14px,2.6vw,26px);
  padding:42px clamp(20px,5vw,70px);
}
.hero-inner::before{
  content:""; position:absolute; inset:-10% -20%;
  background:radial-gradient(60% 60% at 50% 50%, rgba(7,5,4,0.66), transparent 72%);
  z-index:-1; pointer-events:none;
}
.hero-eyebrow{
  font-size:12px; font-weight:400; letter-spacing:0.5em; text-indent:0.5em;
  text-transform:uppercase; color:var(--gold);
}
.hero-title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(78px,22vw,260px); line-height:0.84;
  letter-spacing:0.16em; text-indent:0.16em;
  background:linear-gradient(178deg, var(--ink) 6%, var(--gold-bright) 46%, var(--gold) 66%, var(--gold-deep) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 12px 50px rgba(200,161,78,0.18));
}
.hero-tagline{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(20px,3.4vw,38px); color:var(--ink); letter-spacing:0.04em;
}
.hero-intro{
  max-width:40ch; font-size:clamp(14px,1.8vw,17px); color:var(--ink-dim);
  font-weight:300; letter-spacing:0.06em;
}
.scroll-cue{
  margin-top:clamp(30px,6vw,70px);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.scroll-cue-text{
  font-size:10px; letter-spacing:0.42em; text-indent:0.42em;
  text-transform:uppercase; color:var(--ink-dim);
}
.scroll-cue-line{
  width:1px; height:54px;
  background:linear-gradient(180deg, var(--gold), transparent);
  position:relative; overflow:hidden;
}
.scroll-cue-line::after{
  content:""; position:absolute; left:0; top:-50%; width:100%; height:50%;
  background:var(--gold-bright); animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(300%);} }

/* ============================================================
   MANIFESTO
   ============================================================ */
#manifesto{
  padding:clamp(90px,16vh,180px) var(--pad);
  display:flex; justify-content:center;
}
.manifesto-inner{
  max-width:1040px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:34px;
}
.manifesto-mark{
  font-size:12px; letter-spacing:0.5em; text-indent:0.5em;
  text-transform:uppercase; color:var(--gold);
}
.manifesto-body{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(24px,4.6vw,52px); line-height:1.28; color:var(--ink);
  letter-spacing:0.005em;
}

/* ============================================================
   SCENT CHAPTERS
   ============================================================ */
.chapter--scent{
  min-height:100svh; min-height:100vh;
  display:flex; align-items:center;
  padding:clamp(110px,16vh,180px) var(--pad);
}
/* Single text column on ONE side; the 3D bottle is panned to the opposite side
   by the engine so copy and bottle never overlap (works for light bottles too). */
.scent-grid{
  display:flex; flex-direction:column;
  gap:clamp(24px,3.2vw,40px);
  width:100%; max-width:clamp(420px,46vw,560px); margin:0;
}
.chapter--scent{ justify-content:flex-start; }
.chapter--scent[data-index="2"],
.chapter--scent[data-index="4"]{ justify-content:flex-end; text-align:right; }
.chapter--scent[data-index="2"] .scent-notes > *,
.chapter--scent[data-index="4"] .scent-notes > *{ text-align:right; }
.chapter--scent[data-index="2"] .scent-story,
.chapter--scent[data-index="4"] .scent-story{ margin-left:auto; }

.scent-head{ display:flex; flex-direction:column; gap:14px; }
.scent-head::before, .scent-detail::before{
  content:""; position:absolute; inset:-8% -10%;
  background:radial-gradient(70% 70% at 30% 40%, rgba(7,5,4,0.7), transparent 75%);
  z-index:-1; pointer-events:none;
}
.scent-num{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(48px,9vw,120px); line-height:0.8; color:var(--accent);
  opacity:0.9; letter-spacing:0.02em;
}
.scent-name{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(40px,7vw,84px); line-height:1.0; color:var(--ink);
  letter-spacing:0.01em;
}
.scent-subtitle{
  font-size:12px; letter-spacing:0.4em; text-indent:0.4em;
  text-transform:uppercase; color:var(--gold);
}
.scent-accord{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(17px,2.4vw,24px); color:var(--ink-dim);
}
.scent-detail{ display:flex; flex-direction:column; gap:clamp(26px,4vw,42px); }
.scent-notes{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,34px);
}
.note-group{ display:flex; flex-direction:column; gap:12px; }
.note-label{
  font-size:11px; font-weight:500; letter-spacing:0.34em; text-indent:0.34em;
  text-transform:uppercase; color:var(--accent);
  padding-bottom:10px; border-bottom:1px solid var(--line);
}
.note-group ul{ display:flex; flex-direction:column; gap:8px; }
.note-group li{
  font-size:clamp(13px,1.6vw,15px); color:var(--ink); font-weight:300; letter-spacing:0.02em;
}
.scent-story{
  font-size:clamp(15px,1.9vw,17px); line-height:1.85; color:var(--ink-dim);
  font-weight:300; max-width:52ch;
}

/* fallback bottle images: hidden until no-webgl */
.scent-fallback{
  display:none;
  position:absolute; right:6%; top:50%; transform:translateY(-50%);
  width:min(34vw,360px); height:auto; opacity:0.95;
  filter:drop-shadow(0 30px 70px rgba(0,0,0,0.6));
}

/* ============================================================
   ROOMS — pinned horizontal gallery (copy left / bottle centre / image plate right)
   ============================================================ */
#rooms{ position:relative; height:100vh; overflow:hidden; padding:0; pointer-events:none; }
/* GSAP's pin wrapper sits over the canvas; make it click-through so drag-to-rotate reaches the bottle */
.pin-spacer, .pin-spacer .rooms-content-track{ pointer-events:none; }
/* v3 horizontal content track (bottle shows through the transparent centre; drag to rotate) */
.rooms-content-track{ display:flex; flex-wrap:nowrap; height:100vh; width:max-content; will-change:transform; pointer-events:none; }
.room-content{ position:relative; flex:0 0 100vw; width:100vw; height:100vh; display:flex; align-items:center; padding:0 clamp(28px,6vw,116px); }
.room-content .room-copy{ position:relative; z-index:3; width:min(42%,560px); display:flex; flex-direction:column; gap:clamp(12px,1.7vw,22px); pointer-events:auto; }
.room-copy.glass{ padding:clamp(22px,3vw,40px); border-radius:20px;
  background:linear-gradient(150deg, rgba(22,15,9,0.46), rgba(8,6,4,0.28));
  border:1px solid rgba(200,161,78,0.24);
  box-shadow:0 36px 100px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,236,196,0.08);
  -webkit-backdrop-filter:blur(18px) saturate(125%); backdrop-filter:blur(18px) saturate(125%); }
.room-copy.glass::before{ display:none; }
.no-gsap .rooms-content-track{ flex-direction:column; width:auto; transform:none !important; }
.no-gsap .room-content{ flex:0 0 auto; height:100vh; }
/* v4: bottle centred + CLEAR (draggable); copy split into two flanking liquid-glass pills */
.room-content{ justify-content:space-between; align-items:center; gap:clamp(16px,3vw,56px); }
.room-side{ position:relative; z-index:3; width:clamp(258px,27vw,358px); pointer-events:auto; display:flex; flex-direction:column; gap:14px; }
.glass-pill{
  padding:clamp(20px,1.9vw,30px) clamp(20px,1.9vw,32px); border-radius:26px;
  background:linear-gradient(155deg, rgba(30,23,15,0.32), rgba(10,8,6,0.14));
  border:1px solid rgba(236,200,135,0.20);
  box-shadow:0 26px 76px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,240,205,0.10);
  -webkit-backdrop-filter:blur(22px) saturate(130%); backdrop-filter:blur(22px) saturate(130%);
}
.room-side .scent-num{ font-size:clamp(28px,3.2vw,44px); line-height:1; }
.room-side .scent-name{ font-size:clamp(26px,3.2vw,44px); line-height:1.03; }
.room-side .scent-subtitle{ font-size:10px; letter-spacing:0.34em; }
.room-side .scent-accord{ font-size:clamp(13px,1.3vw,16px); }
.room-side .scent-notes{ display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.room-side .note-label{ font-size:10px; letter-spacing:0.22em; padding-bottom:7px; }
.room-side .note-group li{ font-size:12px; }
.room-side .scent-story{ font-size:13px; line-height:1.7; max-width:none; }
.btn.buy-now{ margin-top:8px; align-self:flex-start; display:inline-flex; align-items:center; padding:12px 28px; border-radius:999px;
  border:1px solid var(--accent,#c8a14e); color:var(--ink); font-size:11px; letter-spacing:0.26em; text-transform:uppercase;
  background:linear-gradient(120deg, color-mix(in srgb, var(--accent,#c8a14e) 24%, transparent), transparent);
  transition:background .4s ease, transform .4s ease; }
.btn.buy-now:hover{ background:linear-gradient(120deg, color-mix(in srgb, var(--accent,#c8a14e) 58%, transparent), color-mix(in srgb, var(--accent,#c8a14e) 12%, transparent)); transform:translateY(-2px); }

/* Testimonials */
#testimonials{ min-height:auto; padding:clamp(90px,14vh,150px) var(--pad); }
.testimonial-grid{ max-width:var(--maxw); margin:48px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.testimonial{ display:flex; flex-direction:column; gap:18px; padding:34px; border-radius:24px; }
.testimonial blockquote{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300; font-size:clamp(17px,1.7vw,22px); line-height:1.5; color:var(--ink); margin:0; }
.testimonial figcaption{ font-size:10px; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold); }

/* ============================================================
   v5 — Goddess hero, scroll-illuminated headings, vibrancy, AURA trust
   ============================================================ */
/* Scroll-illuminate: dim, then brighten + gold glow as a heading enters view (filter-based so it works on gradient text too) */
html.js .hero-title, html.js .hero-tagline, html.js .section-title, html.js .craft-title,
html.js .closing-line, html.js .manifesto-body, html.js .scent-name, html.js .testimonial blockquote{
  filter:brightness(0.56) saturate(0.82);
  transition:filter 1.3s var(--ease);
}
html.js .hero-title.lit, html.js .hero-tagline.lit, html.js .section-title.lit, html.js .craft-title.lit,
html.js .closing-line.lit, html.js .manifesto-body.lit, html.js .scent-name.lit, html.js .testimonial blockquote.lit{
  filter:brightness(1.06) saturate(1.05) drop-shadow(0 0 26px rgba(232,200,135,0.30));
}
/* Vibrancy: lift the dull body/lede text across sections */
.section-lede, .craft-body, .manifesto-body, .scent-story, .scent-accord{ color:#d9d0bb; }
.section-kicker, .closing-kicker, .manifesto-mark{ color:var(--gold-bright); }

/* Goddess hero: copy on the LEFT over the scent-trail, goddess on the right */
#hero{ position:relative; }
#hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, rgba(7,5,4,0.88) 0%, rgba(7,5,4,0.55) 40%, rgba(7,5,4,0) 64%); }
#hero .hero-inner.hero-left{ position:relative; z-index:2; align-self:flex-start; align-items:flex-start; text-align:left;
  max-width:min(640px,56vw); margin-left:clamp(20px,5vw,80px); padding-left:0; padding-right:0; }
/* Contain the giant wordmark so AURUM always reads in full (no edge clipping) and sits over the dark scent-trail */
#hero .hero-title{ font-size:clamp(56px,14.5vw,200px); letter-spacing:0.05em; text-indent:0.05em; line-height:0.86; white-space:nowrap; }
#hero .hero-eyebrow{ color:var(--gold-bright); }
#hero .hero-intro{ color:#cdc4ad; }
#hero .scroll-cue{ position:relative; z-index:2; }
.hero-trust{ display:flex; align-items:center; gap:14px; margin-top:28px; }
.trust-faces{ display:flex; }
.trust-faces .face{ width:38px; height:38px; border-radius:50%; margin-left:-12px; border:2px solid rgba(7,5,4,0.85);
  background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold-deep)); box-shadow:0 6px 16px rgba(0,0,0,0.45); }
.trust-faces .face:first-child{ margin-left:0; }
.trust-faces .face:nth-child(2){ background:radial-gradient(circle at 35% 30%, #e8d2a0, #6b4f24); }
.trust-faces .face:nth-child(3){ background:radial-gradient(circle at 35% 30%, #d8b878, #5a4420); }
.trust-faces .face:nth-child(4){ background:radial-gradient(circle at 35% 30%, #f0dcae, #7c5e26); }
.trust-meta{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold-bright); }
.hero-cta-row{ display:flex; align-items:center; gap:26px; margin-top:30px; flex-wrap:wrap; }
.btn.hero-shop{ display:inline-flex; align-items:center; padding:15px 36px; border-radius:999px;
  background:linear-gradient(120deg, var(--gold), var(--gold-bright)); color:#1a1209; font-weight:600;
  font-size:12px; letter-spacing:0.2em; text-transform:uppercase; box-shadow:0 14px 40px rgba(200,161,78,0.32);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.btn.hero-shop:hover{ transform:translateY(-2px); box-shadow:0 22px 56px rgba(200,161,78,0.5); }
.hero-rating{ display:flex; flex-direction:column; gap:2px; font-size:12px; color:var(--ink-dim); }
.hero-rating .stars{ color:var(--gold-bright); letter-spacing:3px; }
/* #hero na frente NAO e estilo, e desempate: o <style> embutido do index.html
   declara `.glass-pill, .hero-card{ position:relative }` para o brilho, e o
   cartao carrega as DUAS classes. Com especificidade igual vence quem carrega
   por ultimo — o embutido — e o cartao caia no fluxo, em cima do "Entrega para
   todo o Brasil" (visto em 09/08/2026, viewport 1200x750, hero esticado para
   1294px). O id ganha do embutido sem !important e sem mexer no brilho, que
   funciona igual com position:absolute. */
#hero .hero-card{ position:absolute; right:clamp(20px,5vw,72px); bottom:clamp(44px,11vh,96px); z-index:2;
  width:min(300px,30vw); padding:24px 26px; }
.hero-card-top{ display:flex; justify-content:space-between; font-size:9px; letter-spacing:0.24em; text-transform:uppercase; color:var(--gold); }
.hero-card-title{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:26px; margin:14px 0 8px; color:var(--ink); }
.hero-card-body{ font-size:13px; line-height:1.6; color:var(--ink-dim); }
.hero-card-foot{ display:flex; justify-content:space-between; font-size:9px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gold-bright); margin-top:16px; border-top:1px solid var(--line); padding-top:12px; }
@media (max-width:900px){
  #hero .hero-inner.hero-left{ max-width:100%; }
  #hero::after{ background:linear-gradient(180deg, rgba(7,5,4,0.5), rgba(7,5,4,0.86)); }
  #hero .hero-card{ display:none; }
}

@media (max-width:900px){
  .room-content{ flex-direction:column; justify-content:center; gap:18px; padding:88px var(--pad); }
  .room-side{ width:100%; }
  .testimonial-grid{ grid-template-columns:1fr; }
}
.rooms-track{ display:flex; flex-wrap:nowrap; height:100vh; width:max-content; will-change:transform; }
.room{
  position:relative; flex:0 0 100vw; width:100vw; height:100vh;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(28px,6vw,112px);
}
.room-copy{
  position:relative; z-index:2; width:min(40%,520px);
  display:flex; flex-direction:column; gap:clamp(14px,2vw,24px);
}
.room-copy::before{
  content:""; position:absolute; inset:-10% -16% -10% -45%;
  background:radial-gradient(80% 80% at 22% 45%, rgba(6,4,3,0.86), transparent 78%);
  z-index:-1; pointer-events:none;
}
.room-plate{
  position:relative; z-index:2; width:min(33%,440px); height:min(72vh,620px);
  background-image:var(--img); background-size:cover; background-position:center;
  border:1px solid var(--line); box-shadow:0 50px 130px rgba(0,0,0,0.62);
  overflow:hidden;
}
.room-plate::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(155deg, color-mix(in srgb, var(--accent) 26%, transparent), rgba(6,4,3,0.45) 60%, rgba(6,4,3,0.88));
}
.room-plate::before{
  content:""; position:absolute; inset:12px; z-index:1; pointer-events:none;
  border:1px solid color-mix(in srgb, var(--accent) 42%, transparent);
}

/* No-GSAP fallback: rooms stack vertically (also the mobile/touch path) */
html.no-gsap #rooms{ height:auto; overflow:visible; pointer-events:auto; }
html.no-gsap .rooms-track{ flex-direction:column; width:auto; transform:none !important; }
html.no-gsap .room{ flex:0 0 auto; height:100vh; }
/* current DOM uses .rooms-content-track / .room-content — stack them for the vertical fallback.
   height:auto is critical: the base track is height:100vh, which would clip the column to one
   screen and let rooms 2..n overflow and collide with the sections below. */
html.no-gsap .rooms-content-track{ flex-direction:column; width:auto; height:auto; transform:none !important; }
html.no-gsap .room-content{ flex:0 0 auto; width:100%; height:auto; min-height:100svh; padding:84px var(--pad); }
@media (prefers-reduced-motion:reduce){ .stage-bg-layer{ transition:none; } }

@media (max-width:900px){
  .room{ flex-direction:column; justify-content:center; gap:26px; padding:96px var(--pad); }
  .room-copy{ width:100%; }
  .room-copy::before{ inset:-6% -8%; background:linear-gradient(180deg, rgba(6,4,3,0.86), rgba(6,4,3,0.5) 58%, rgba(6,4,3,0.88)); }
  .room-plate{ width:100%; height:30vh; }
}

/* ============================================================
   MARQUEE
   ============================================================ */
#marquee{
  padding:clamp(40px,8vh,90px) 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; white-space:nowrap;
  background:linear-gradient(180deg, transparent, rgba(13,9,7,0.5), transparent);
}
.marquee-track{
  display:inline-flex; align-items:center; gap:clamp(28px,5vw,70px);
  animation:marquee 38s linear infinite; will-change:transform;
}
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }
.marquee-item{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(30px,7vw,76px); color:transparent;
  -webkit-text-stroke:1px rgba(200,161,78,0.4);
  letter-spacing:0.02em; display:inline-flex; align-items:center; gap:clamp(28px,5vw,70px);
}
.marquee-item em{ font-style:normal; color:var(--gold); -webkit-text-stroke:0; font-size:0.5em; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ============================================================
   COLLECTION
   ============================================================ */
#collection{ padding:clamp(100px,16vh,180px) 0; }
#collection .section-head{ margin-bottom:clamp(50px,8vh,90px); }
.collection-list{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  border-top:1px solid var(--line);
}
.collection-row{ border-bottom:1px solid var(--line); }
.collection-row a{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center;
  gap:clamp(16px,3vw,40px);
  padding:clamp(22px,3.4vw,40px) clamp(6px,1.6vw,20px);
  position:relative; overflow:hidden;
  transition:padding-left .5s var(--ease);
}
.collection-row a::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0;
  background:linear-gradient(90deg, rgba(200,161,78,0.10), transparent);
  transition:width .55s var(--ease); z-index:-1;
}
.collection-row a:hover::before{ width:100%; }
.collection-row a:hover{ padding-left:clamp(16px,3vw,40px); }
.collection-num{
  font-family:var(--serif); font-size:clamp(18px,2.4vw,26px);
  color:var(--accent); width:2.4ch;
}
.collection-name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(26px,5vw,56px); color:var(--ink); line-height:1; letter-spacing:0.01em;
  transition:color .4s var(--ease), transform .5s var(--ease);
}
.collection-row a:hover .collection-name{ color:var(--gold-bright); transform:translateX(8px); }
.collection-accord{
  font-size:12px; letter-spacing:0.3em; text-indent:0.3em;
  text-transform:uppercase; color:var(--ink-dim); text-align:right;
}
.collection-arrow{
  font-size:22px; color:var(--gold);
  transform:translateX(-6px); opacity:0;
  transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.collection-row a:hover .collection-arrow{ transform:translateX(0); opacity:1; }

/* ============================================================
   CRAFT / HERITAGE
   ============================================================ */
#craft{
  padding:clamp(110px,18vh,200px) var(--pad);
  display:flex; justify-content:center;
}
.craft-inner{
  max-width:1100px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:clamp(24px,3.6vw,40px);
}
.craft-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(32px,6vw,72px); line-height:1.08; color:var(--ink);
  max-width:18ch;
}
.craft-body{
  max-width:60ch; font-size:clamp(15px,1.9vw,18px); line-height:1.9;
  color:var(--ink-dim); font-weight:300;
}
.craft-stats{
  margin-top:clamp(30px,5vw,56px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px);
  width:100%; border-top:1px solid var(--line); padding-top:clamp(34px,5vw,56px);
}
.craft-stat{ display:flex; flex-direction:column; gap:10px; align-items:center; }
.craft-stat > span:first-child{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(40px,6vw,72px); color:var(--gold-bright); line-height:1;
}
.craft-stat-suffix{ font-size:0.5em; color:var(--gold); margin-left:2px; }
.craft-stat-label{
  font-size:11px; letter-spacing:0.3em; text-indent:0.3em;
  text-transform:uppercase; color:var(--ink-dim);
}

/* ============================================================
   CLOSING / CTA
   ============================================================ */
#closing{
  min-height:92svh; min-height:92vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:clamp(110px,18vh,200px) var(--pad);
}
.closing-inner{
  display:flex; flex-direction:column; align-items:center; gap:clamp(28px,4vw,46px);
  padding:clamp(30px,5vw,60px);
}
.closing-inner::before{
  content:""; position:absolute; inset:-10% -20%;
  background:radial-gradient(60% 70% at 50% 50%, rgba(124,94,38,0.20), rgba(7,5,4,0.6) 60%, transparent 80%);
  z-index:-1; pointer-events:none;
}
.closing-kicker{
  font-family:var(--serif); font-size:clamp(20px,3vw,30px);
  letter-spacing:0.4em; text-indent:0.4em; color:var(--gold);
}
.closing-line{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(44px,10vw,140px); line-height:0.96; color:var(--ink);
  letter-spacing:0.01em; max-width:16ch;
  background:linear-gradient(178deg, var(--ink), var(--gold-bright) 60%, var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* button */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:18px 44px; overflow:hidden;
  border:1px solid var(--gold); color:var(--ink);
  font-size:12px; font-weight:500; letter-spacing:0.34em; text-indent:0.34em;
  text-transform:uppercase;
  transition:color .5s var(--ease), border-color .5s var(--ease);
  will-change:transform;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, var(--gold), var(--gold-bright));
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.btn:hover{ color:var(--bg); border-color:var(--gold-bright); }
.btn:hover::before{ transform:translateY(0); }
.btn-label{ position:relative; z-index:1; }

/* ============================================================
   FOOTER
   ============================================================ */
#footer{
  position:relative; z-index:2;
  border-top:1px solid var(--line);
  padding:clamp(60px,9vh,100px) var(--pad) clamp(30px,4vh,44px);
  background:rgba(7,5,4,0.7);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.footer-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(30px,5vw,60px);
}
.footer-brand{ display:flex; flex-direction:column; gap:12px; }
.footer-mark{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(34px,5vw,52px); letter-spacing:0.22em; text-indent:0.22em; color:var(--ink);
}
.footer-tag{
  font-family:var(--serif); font-style:italic; font-size:18px; color:var(--ink-dim);
}
.footer-col{ display:flex; flex-direction:column; gap:14px; }
.footer-col-title{
  font-size:11px; letter-spacing:0.32em; text-indent:0.32em;
  text-transform:uppercase; color:var(--gold); margin-bottom:6px;
}
.footer-col a{
  font-size:14px; color:var(--ink-dim); font-weight:300;
  position:relative; width:fit-content; transition:color .4s var(--ease);
}
.footer-col a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--gold); transition:width .4s var(--ease);
}
.footer-col a:hover{ color:var(--ink); }
.footer-col a:hover::after{ width:100%; }
.footer-base{
  max-width:var(--maxw); margin:clamp(40px,6vh,70px) auto 0;
  padding-top:26px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.footer-copy, .footer-fine{
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-dim);
}

/* ============================================================
   NO-WEBGL FALLBACK STAGE
   ============================================================ */
html.no-webgl #webgl{ display:none; }
html.no-webgl body::before{
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(200,161,78,0.16), transparent 55%),
    radial-gradient(80% 60% at 78% 108%, rgba(200,119,47,0.12), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 55%, var(--bg) 100%);
}
html.no-webgl .chapter--scent{
  padding-right:clamp(20px,5vw,80px);
}
html.no-webgl .scent-fallback{ display:block; }
/* on small screens, stack the fallback bottle below copy */
@media (max-width:900px){
  html.no-webgl .scent-fallback{
    position:static; transform:none; margin:36px auto 0;
    width:min(60vw,260px);
  }
}
/* give the fallback bottle a soft branded halo */
html.no-webgl .chapter--scent::after{
  content:""; position:absolute; right:6%; top:50%; transform:translate(0,-50%);
  width:min(40vw,440px); height:min(40vw,440px);
  background:radial-gradient(circle, rgba(200,161,78,0.18), transparent 65%);
  z-index:0; pointer-events:none;
}
@media (max-width:900px){ html.no-webgl .chapter--scent::after{ display:none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  /* 3 stats: mantem as tres numa linha so ate onde couber; sem coluna vazia. */
  .craft-stats{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .scent-grid{ max-width:none; width:100%; gap:clamp(28px,6vw,44px); position:relative; }
  .scent-grid::before{ content:""; position:absolute; inset:-7vw -8vw; z-index:-1;
    background:linear-gradient(180deg, rgba(5,4,3,0.84), rgba(5,4,3,0.5) 55%, rgba(5,4,3,0.86)); }
  .chapter--scent,
  .chapter--scent[data-index="2"],
  .chapter--scent[data-index="4"]{ justify-content:flex-start; text-align:left; }
  .chapter--scent[data-index="2"] .scent-notes > *,
  .chapter--scent[data-index="4"] .scent-notes > *{ text-align:left; }
  .chapter--scent[data-index="2"] .scent-story,
  .chapter--scent[data-index="4"] .scent-story{ margin-left:0; }
  .scent-head::before, .scent-detail::before{ inset:-6% -6%; }
}
@media (max-width:680px){
  #nav{ padding:18px var(--pad); gap:14px; }
  /* ------------------------------------------------------------------
     O CABECALHO NO CELULAR (09/08/2026, escolha do Boss: faixa rolavel).

     Antes: os quatro links somavam 294 px FIXOS e nunca encolhiam, entao o
     flex descontava a diferenca do unico item que aceitava ceder, o logo.
     Medido no site no ar: sobravam 60 px de logo em 390 px de tela, 30 px em
     360 px e ZERO em 320 px (o logo sumia), e "A UNIDENT" ainda quebrava em
     duas linhas. Era o cabecalho que o Boss fotografou em 09/08.

     Agora a marca nao cede e a faixa de links desliza com o dedo.
     ------------------------------------------------------------------ */
  .nav-brand{ flex:0 0 auto; }              /* a marca deixa de ser a que encolhe */
  .nav-links{
    gap:18px;
    flex-wrap:nowrap;                       /* "A UNIDENT" para de quebrar linha */
    /* `min-width:0` e o que autoriza o flex a encolher esta caixa abaixo do
       tamanho do conteudo. Sem ele nao ha overflow, e sem overflow nao ha o
       que rolar: a caixa voltaria a empurrar o logo. */
    min-width:0;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;       /* inercia no iOS */
    overscroll-behavior-x:contain;          /* nao dispara o "voltar" por gesto */
    scrollbar-width:none;                   /* Firefox */
    padding-inline-end:14px;                /* o ultimo link nao morre no esmaecido */
    /* Esmaece a borda direita: e o aviso de que ha mais link escondido. Sem
       isto a faixa parece cortada, e nao rolavel. */
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 16px),transparent 100%);
            mask-image:linear-gradient(to right,#000 calc(100% - 16px),transparent 100%);
  }
  .nav-links::-webkit-scrollbar{ display:none; }   /* Safari/Chrome */
  .nav-links a{
    flex:0 0 auto; white-space:nowrap;
    font-size:10px; letter-spacing:0.18em; text-indent:0.18em;
  }
  .scent-notes{ grid-template-columns:1fr; gap:22px; }
  .note-group{ border-bottom:1px solid var(--line); padding-bottom:18px; }
  .note-group:last-child{ border-bottom:none; }
  .collection-row a{
    grid-template-columns:auto 1fr; grid-template-rows:auto auto;
    row-gap:6px;
  }
  .collection-accord{ grid-column:1 / -1; text-align:left; padding-left:3.4ch; }
  .collection-arrow{ display:none; }
  .footer-grid{ grid-template-columns:1fr; gap:34px; }
  .footer-base{ flex-direction:column; gap:10px; }
}
@media (max-width:390px){
  :root{ --pad:18px; }
  .hero-title{ letter-spacing:0.1em; text-indent:0.1em; }
  /* Tela muito estreita: 3 stats empilhados e centrados, sem item orfao. */
  .craft-stats{ grid-template-columns:1fr; gap:22px; }
  .btn{ padding:16px 30px; letter-spacing:0.24em; text-indent:0.24em; }
}
@media (max-width:360px){
  .hero-title{ font-size:min(20vw,70px); }
  .scent-name{ font-size:34px; }
  .marquee-item{ font-size:42px; }
}

/* keep things visible if fonts fail (fallback stack already in vars) */
.no-js .cursor{ display:none; }

/* ============================================================
   VOLTA — ATHLETIC OVERRIDES (electric, heavy, de-serifed)
   ============================================================ */
/* Electric ambient glow instead of warm gold */
body::before{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(198,241,53,0.10), transparent 55%),
    radial-gradient(90% 70% at 82% 112%, rgba(35,227,196,0.09), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 60%, var(--bg) 100%);
}

/* Heavy, tight display type for an athletic read */
.hero-title{ font-weight:900; }
#hero .hero-title{ letter-spacing:-0.015em; text-indent:0; }
.section-title, .craft-title, .closing-line, .closing-kicker{ font-weight:800; letter-spacing:-0.01em; }
.scent-name, .room-side .scent-name{ font-weight:800; letter-spacing:0.004em; }
.collection-name{ font-weight:800; }
.scent-num, .collection-num{ font-weight:800; }
.nav-brand{ font-weight:900; letter-spacing:0.16em; text-indent:0.16em; }
.footer-mark{ font-weight:900; letter-spacing:0.12em; text-indent:0.12em; }
.manifesto-body{ font-weight:600; letter-spacing:0; }

/* De-serif / de-italic the accents into clean sans */
.hero-tagline{ font-style:normal; font-weight:700; color:var(--gold-bright); letter-spacing:0.01em; }
.scent-accord{ font-style:normal; font-weight:500; color:#c3ccd6; }
.hero-card-title{ font-style:normal; font-weight:800; }
.footer-tag{ font-style:normal; font-weight:600; letter-spacing:0.04em; }
.testimonial blockquote{ font-family:var(--sans); font-style:normal; font-weight:400; line-height:1.6; }

/* Marquee → bold electric ticker */
.marquee-item{ font-style:normal; font-weight:800; -webkit-text-stroke:1px rgba(198,241,53,0.42); letter-spacing:0.04em; }
.marquee-item em{ color:var(--gold-bright); }

/* Product spec grid (replaces the perfume note columns) */
.spec-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.6vw,22px);
}
.spec{ display:flex; flex-direction:column; gap:7px; padding-top:14px; border-top:1px solid var(--line); }
.spec-val{
  font-family:var(--serif); font-weight:800; line-height:0.95;
  font-size:clamp(22px,2.7vw,34px); color:var(--accent);
}
.spec-label{
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-dim); line-height:1.35;
}

/* Buy button: solid accent fill for an e-comm CTA feel */
.btn.buy-now{
  border-color:var(--accent,#c6f135);
  background:linear-gradient(120deg, color-mix(in srgb, var(--accent,#c6f135) 26%, transparent), transparent);
  font-weight:700;
}
.btn.buy-now:hover{
  background:linear-gradient(120deg, color-mix(in srgb, var(--accent,#c6f135) 70%, transparent), color-mix(in srgb, var(--accent,#c6f135) 16%, transparent));
  color:#06080c;
}

/* Trust faces → cool electric dots */
.trust-faces .face{ background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold-deep)); }
.trust-faces .face:nth-child(2){ background:radial-gradient(circle at 35% 30%, #6ff0ff, #155e6b); }
.trust-faces .face:nth-child(3){ background:radial-gradient(circle at 35% 30%, #c8b0ff, #4a2f8a); }
.trust-faces .face:nth-child(4){ background:radial-gradient(circle at 35% 30%, #d6ff5c, #5f7a14); }

/* Hero shop button: dark ink on lime reads as a real CTA */
.btn.hero-shop{ color:#06080c; }

/* Slightly stronger scrim so electric product pops over busy gym photos */
.stage-bg-scrim{ background:radial-gradient(130% 130% at 50% 42%, rgba(5,6,10,0.18), rgba(5,6,10,0.45) 72%, rgba(5,6,10,0.78)); }

/* ===== Formulario de contato / lead (integracao WeSales) ===== */
.lead-form{
  max-width:640px; margin:34px auto 8px; padding:26px 26px 22px;
  border-radius:20px; text-align:left;
  background:rgba(8,26,33,.62); border:1px solid rgba(72,214,230,.16);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.lead-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.lead-field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.lead-field > span{
  font-family:var(--sans); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-dim);
}
.lead-field input,
.lead-field select,
.lead-field textarea{
  width:100%; box-sizing:border-box; padding:12px 14px;
  border-radius:12px; border:1px solid rgba(207,233,239,.16);
  background:rgba(6,19,25,.6); color:var(--ink);
  font-family:var(--sans); font-size:.98rem; transition:border-color .2s ease, box-shadow .2s ease;
}
.lead-field textarea{ resize:vertical; min-height:78px; }
.lead-field input:focus,
.lead-field select:focus,
.lead-field textarea:focus{
  outline:none; border-color:var(--gold-bright);
  box-shadow:0 0 0 3px rgba(72,214,230,.16);
}
.lead-field select{ appearance:none; cursor:pointer; }
.lead-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
.lead-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px; }
.lead-actions .btn{ cursor:pointer; border:none; }
.lead-status{ font-family:var(--sans); font-size:.9rem; margin:0; }
.lead-status[data-kind="ok"]{ color:var(--gold-bright); }
.lead-status[data-kind="erro"]{ color:#ff9d8a; }
@media (max-width:640px){
  .lead-row{ grid-template-columns:1fr; gap:0; }
  .lead-form{ padding:20px 18px 18px; }
}

/* ============ BOTAO FLUTUANTE DE WHATSAPP ============
   Link direto pro WhatsApp de vendas da Unident. Sem script de terceiro,
   sem cookie, sem SDK: e so um <a href="wa.me/..."> estilizado. */
.wa-float{
  position:fixed; right:clamp(14px,2.2vw,28px); bottom:clamp(14px,2.2vw,28px);
  z-index:120; display:inline-flex; align-items:center; gap:10px;
  padding:13px 18px 13px 15px; border-radius:999px; text-decoration:none;
  color:#eafcff; background:linear-gradient(135deg,#1fb6c7,#0e6171);
  border:1px solid rgba(234,252,255,0.22);
  box-shadow:0 10px 30px rgba(0,0,0,0.42), 0 0 0 0 rgba(31,182,199,0.55);
  font-size:13px; letter-spacing:0.06em; font-weight:600; line-height:1;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  animation:wa-pulse 3.4s ease-out infinite;
}
.wa-float:hover, .wa-float:focus-visible{
  transform:translateY(-2px);
  background:linear-gradient(135deg,#48d6e6,#1fb6c7);
  box-shadow:0 14px 36px rgba(0,0,0,0.5), 0 0 0 6px rgba(31,182,199,0.16);
}
.wa-float:focus-visible{ outline:2px solid #eafcff; outline-offset:3px; }
.wa-float svg{ width:22px; height:22px; flex:none; fill:currentColor; }
@keyframes wa-pulse{
  0%   { box-shadow:0 10px 30px rgba(0,0,0,0.42), 0 0 0 0 rgba(31,182,199,0.55); }
  70%  { box-shadow:0 10px 30px rgba(0,0,0,0.42), 0 0 0 16px rgba(31,182,199,0); }
  100% { box-shadow:0 10px 30px rgba(0,0,0,0.42), 0 0 0 0 rgba(31,182,199,0); }
}
/* no celular vira so o icone, pra nao cobrir o conteudo */
@media (max-width:560px){
  .wa-float{ padding:14px; gap:0; }
  .wa-float .wa-label{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .wa-float{ animation:none; transition:none; }
}

/* ============ CATALOGO (listagem de produtos na home) ============ */
/* O scroll-margin-top e o que faz o atalho "Produtos" do menu (href="#catalogo")
   parar com o titulo do catalogo visivel. Sem ele o navegador encosta o topo da
   secao no topo da janela e o #nav, que e fixed, cobre justamente o titulo e a
   busca — quem clica acha que caiu no lugar errado. */
#catalogo{ position:relative; z-index:3; scroll-margin-top:var(--nav-h); padding:clamp(70px,9vw,140px) var(--pad); background:linear-gradient(180deg, rgba(6,19,25,0) 0%, rgba(6,19,25,0.92) 12%, #061319 100%); }
.cat-inner{ max-width:var(--maxw); margin:0 auto; }
.cat-head{ margin-bottom:clamp(32px,4vw,64px); }
.cat-kicker{ font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold); margin:0 0 12px; }
.cat-title{ font-family:var(--serif); font-size:clamp(30px,4.6vw,62px); line-height:1.02; margin:0 0 10px; color:var(--ink); }
.cat-count-total{ font-size:13px; letter-spacing:0.06em; color:var(--ink-dim); }

/* VITRINE DE DESTAQUES — o primeiro bloco que o visitante ve ao chegar na lista,
   logo depois das salas 3D. Conteudo vem de data/destaques.json via js/catalogo.js.
   Usa o mesmo .cat-grid e o mesmo .cat-card das linhas: card de destaque com arte
   propria seria mais um lugar pra manter em dia. O que muda e so a moldura. */
.cat-destaques{
  margin-bottom:clamp(44px,5.5vw,84px); padding:clamp(20px,2.4vw,34px) clamp(18px,2.2vw,32px) clamp(24px,2.8vw,38px);
  border:1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius:4px;
  background:linear-gradient(180deg, rgba(196,160,92,0.07), rgba(196,160,92,0));
}
.cat-destaques[hidden]{ display:none; }
.cat-destaques-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding-bottom:14px; margin-bottom:26px; border-bottom:1px solid color-mix(in srgb, var(--gold) 26%, transparent); }
/* Titulo da vitrine (Lancamentos, Destaques, Ofertas): mais hierarquia visual que o
   titulo de linha comum (Meg via Boss 17/08/2026 — o "Lancamentos" estava discreto).
   Maior, mais encorpado e com um acento de cor da casa a esquerda, mantendo o padrao
   sobrio do site. Vale para as tres vitrines por coerencia. */
.cat-destaques-nome{ font-family:var(--serif); font-weight:600; font-size:clamp(26px,3vw,40px);
  line-height:1.05; letter-spacing:0.01em; margin:0; color:var(--gold-bright);
  display:inline-flex; align-items:center; gap:0.5em; }
.cat-destaques-nome::before{ content:''; width:6px; height:1em; border-radius:3px; flex:0 0 auto;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); }
.cat-destaques-sub{ margin:0; font-size:13px; color:var(--ink-dim); flex:1 1 240px; }

/* etiqueta opcional do destaque (ex.: Lançamento). Fica no alto da miniatura, do lado
   oposto ao contador de fotos, que mora embaixo a direita. */
.cat-selo{ position:absolute; left:8px; top:8px; z-index:1; padding:4px 9px; border-radius:999px;
  font-size:10px; letter-spacing:0.12em; text-transform:uppercase; white-space:nowrap;
  color:#1a1206; background:var(--gold-bright); border:1px solid color-mix(in srgb, #1a1206 18%, transparent); }

.cat-linha{ margin-top:clamp(40px,5vw,80px); }
.cat-linha-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; padding-bottom:14px; margin-bottom:26px; border-bottom:1px solid var(--line); }
.cat-linha-nome{ font-family:var(--serif); font-size:clamp(20px,2.3vw,30px); margin:0; color:var(--accent); }
/* o titulo da linha e um link pra landing dela: sublinhado no hover e a seta andando,
   pra ficar obvio que da pra clicar mesmo sem passar o mouse (foco de teclado incluido) */
.cat-linha-link{ color:inherit; text-decoration:none; display:inline-flex; align-items:baseline; gap:0.35em;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 34%, transparent); padding-bottom:2px;
  transition:color .25s var(--ease), border-color .25s var(--ease); }
.cat-linha-link:hover, .cat-linha-link:focus-visible{ color:var(--gold-bright); border-bottom-color:currentColor; }
.cat-linha-link:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:5px; border-radius:2px; }
.cat-linha-seta{ font-size:0.62em; transition:transform .25s var(--ease); }
.cat-linha-link:hover .cat-linha-seta, .cat-linha-link:focus-visible .cat-linha-seta{ transform:translateX(4px); }
@media (prefers-reduced-motion:reduce){ .cat-linha-link, .cat-linha-seta{ transition:none; }
  .cat-linha-link:hover .cat-linha-seta, .cat-linha-link:focus-visible .cat-linha-seta{ transform:none; } }
.cat-linha-sub{ margin:0; font-size:13px; color:var(--ink-dim); flex:1 1 240px; }
.cat-linha-qtd{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-dim); white-space:nowrap; }

.cat-grid{ display:grid; gap:clamp(14px,1.6vw,24px); grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }

.cat-card{
  display:flex; flex-direction:column; text-decoration:none; overflow:hidden;
  border:1px solid var(--line); border-radius:18px; background:rgba(11,33,43,0.55);
  transition:transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.cat-card:hover, .cat-card:focus-visible{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 55%, transparent); background:rgba(14,97,113,0.22); }
.cat-card:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; }

.cat-thumb{ position:relative; display:block; aspect-ratio:1/1; background:#fff; overflow:hidden; }
.cat-thumb img{ width:100%; height:100%; object-fit:contain; padding:12px; transition:transform .45s var(--ease); }
.cat-card:hover .cat-thumb img{ transform:scale(1.05); }
.cat-noimg{ display:grid; place-items:center; height:100%; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:#7a8c93; }
.cat-count{ position:absolute; right:8px; bottom:8px; padding:4px 9px; border-radius:999px; font-size:10px; letter-spacing:0.1em; color:#eafcff; background:rgba(6,19,25,0.78); border:1px solid rgba(234,252,255,0.2); }
/* Faixa de "fora de estoque" no rodape da miniatura (desenhada em js/catalogo.js).
   Ocupa a largura toda porque a frase tem 31 caracteres e nao cabe numa pilula de
   canto como o .cat-selo, que cobriria o produto. A contagem de fotos sobe quando
   a faixa existe, senao as duas se sobrepoem no mesmo canto. */
.cat-esgotado{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:6px 10px;
  font-size:10px; letter-spacing:0.09em; text-transform:uppercase; text-align:center;
  color:#ffe9d6; background:rgba(24,10,4,0.86); border-top:1px solid rgba(255,233,214,0.22); }
.cat-thumb:has(.cat-esgotado) .cat-count{ bottom:36px; }

.cat-body{ display:flex; flex-direction:column; gap:7px; padding:16px 16px 18px; }
.cat-marca{ font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--accent); }
.cat-nome{ font-family:var(--serif); font-size:17px; line-height:1.18; color:var(--ink); }
.cat-desc{ font-size:12.5px; line-height:1.45; color:var(--ink-dim); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cat-cta{ margin-top:5px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-bright); }
.cat-cta::after{ content:' \2192'; }

@media (max-width:560px){ .cat-grid{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); } .cat-nome{ font-size:15px; } }
@media (prefers-reduced-motion:reduce){ .cat-card, .cat-thumb img{ transition:none; } }

/* ---------- busca do catalogo ----------
   Campo unico (nome, fornecedor ou codigo) mais os botoes de fornecedor.
   Fica grudado no topo enquanto a pessoa percorre a lista: com 646 produtos,
   um campo de busca que sobe embora na primeira rolada nao serve para nada.
   O `top` acompanha a altura do #nav para os dois nao se sobreporem. */
/* ---------------------------------------------------------------------------
   BUSCA DO TOPO (atalho logo abaixo do hero, antes das salas 3D)
   Discreta mas visivel; herda o glass-pill da casa. So um atalho: a logica de
   busca real vive no #catalogo (js/catalogo.js). Mobile sem scroll horizontal.
--------------------------------------------------------------------------- */
/* Barra de busca DENTRO do hero (17/08/2026): ancorada no topo do hero, logo abaixo
   do #nav fixo, na faixa entre o menu e o titulo gigante. Absoluta para nao empurrar
   o headline, que segue centralizado verticalmente. z-index 3 fica acima do scrim
   (#hero::after z-index:1) e do headline (.hero-inner z-index:2), mas o canvas/parallax
   ficam atras — a barra nao e engolida nem atrapalha o scroll hint (que e z-index:2 no
   rodape do hero). pointer-events so no form, para nao capturar cliques da faixa toda. */
#busca-topo{
  position:absolute; top:calc(var(--nav-h) + clamp(10px,2vw,22px)); left:0; right:0; z-index:3;
  display:flex; justify-content:center; padding:0 var(--pad); pointer-events:none;
}
.busca-topo-form{
  pointer-events:auto;
  display:flex; align-items:center; gap:10px;
  width:min(620px, 100%);
  padding:9px 9px 9px 16px; border-radius:16px;
  /* contraste sobre o topo escuro do hero: glass um pouco mais fechado que o glass-pill
     padrao, para o placeholder e a borda continuarem legiveis sobre a imagem. */
  background:rgba(6,19,25,0.82);
  border:1px solid color-mix(in srgb, var(--gold) 42%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 12px 34px rgba(0,0,0,0.34);
}
@media (max-width:680px){
  /* hero mais apertado no mobile: barra menor e mais colada no topo, para nao empurrar
     o "Unident" para fora da primeira dobra. */
  #busca-topo{ top:calc(var(--nav-h) + 8px); }
  .busca-topo-form{ width:min(440px,100%); padding:7px 7px 7px 13px; }
}
@media (min-width:901px){
  /* Desktop: o conteudo do hero e centralizado verticalmente e o eyebrow subia ate a
     altura da barra. Reservo espaco no topo (nav + barra + folga) para o bloco
     centralizar ABAIXO da barra, sem o eyebrow encostar nela. */
  #hero{ padding-top:calc(var(--nav-h) + 96px); }
}
.busca-topo-lupa-wrap{ display:grid; place-items:center; flex:0 0 auto; }
.busca-topo-lupa{
  width:20px; height:20px; pointer-events:none;
  fill:none; stroke:var(--gold-bright); stroke-width:2; stroke-linecap:round;
}
.busca-topo-input{
  flex:1 1 auto; min-width:0;
  padding:12px 6px; font-family:var(--sans); font-size:15px; color:var(--ink);
  background:transparent; border:0; -webkit-appearance:none; appearance:none;
}
.busca-topo-input::placeholder{ color:var(--ink-dim); }
.busca-topo-input:focus{ outline:none; }
.busca-topo-input:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; border-radius:6px; }
.busca-topo-input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.busca-topo-btn{
  flex:0 0 auto; cursor:pointer;
  padding:11px 22px; border-radius:12px;
  font-family:var(--sans); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink);
  background:linear-gradient(120deg, color-mix(in srgb, var(--gold) 34%, transparent), color-mix(in srgb, var(--gold) 10%, transparent));
  border:1px solid var(--gold);
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.busca-topo-btn:hover{ background:linear-gradient(120deg, color-mix(in srgb, var(--gold) 62%, transparent), color-mix(in srgb, var(--gold) 18%, transparent)); transform:translateY(-1px); }
.busca-topo-btn:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }
@media (max-width:560px){
  .busca-topo-form{ padding:8px 8px 8px 12px; gap:8px; }
  .busca-topo-input{ font-size:16px; padding:12px 4px; }   /* 16px evita zoom no iOS */
  .busca-topo-btn{ padding:11px 16px; letter-spacing:0.1em; }
  .busca-topo-btn-txt{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .busca-topo-btn::after{ content:'\2192'; font-size:18px; line-height:1; }
}

.cat-busca{
  position:sticky; top:calc(var(--nav-h) + 8px); z-index:6;
  display:flex; flex-direction:column; gap:12px;
  margin:clamp(28px,3.4vw,48px) 0 8px;
  padding:14px 14px 15px; border:1px solid var(--line); border-radius:18px;
  background:rgba(6,19,25,0.92);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.cat-busca[hidden]{ display:none; }

.cat-busca-campo{ position:relative; display:flex; align-items:center; }
.cat-busca-lupa{
  position:absolute; left:14px; width:19px; height:19px; pointer-events:none;
  fill:none; stroke:var(--gold-bright); stroke-width:2; stroke-linecap:round;
}
.cat-busca-input{
  width:100%; padding:14px 46px 14px 44px;
  font-family:var(--sans); font-size:15px; color:var(--ink);
  background:rgba(11,33,43,0.75); border:1px solid var(--line); border-radius:12px;
  transition:border-color .25s var(--ease), background .25s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.cat-busca-input::placeholder{ color:var(--ink-dim); }
.cat-busca-input:focus{ outline:none; border-color:var(--gold-bright); background:rgba(14,97,113,0.28); }
.cat-busca-input:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }
/* o "x" nativo do type=search e cinza sobre fundo escuro e some; usamos o nosso */
.cat-busca-input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }

.cat-busca-limpar{
  position:absolute; right:9px; display:grid; place-items:center;
  width:30px; height:30px; padding:0; cursor:pointer;
  background:transparent; border:0; border-radius:50%; color:var(--ink-dim);
}
.cat-busca-limpar svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.cat-busca-limpar:hover{ color:var(--ink); background:rgba(31,182,199,0.16); }
.cat-busca-limpar:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }
.cat-busca-limpar[hidden]{ display:none; }

/* ---------------------------------------------------------------------------
   AUTOCOMPLETE (typeahead) — dropdown de sugestoes da busca (js/catalogo.js)
   Preso ao campo por um wrapper position:relative. Mesmo visual nos dois campos
   (catalogo e hero); o modificador --hero so ajusta a cor de fundo para o vidro
   mais fechado do hero. Some sozinho quando vazio (atributo hidden). */
.ac-box{
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:40;
  border:1px solid color-mix(in srgb, var(--gold) 34%, transparent); border-radius:14px;
  background:rgba(6,19,25,0.97);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 18px 44px rgba(0,0,0,0.42);
  overflow:hidden;
}
.ac-box[hidden]{ display:none; }
.ac-box--hero{ top:calc(100% + 10px); background:rgba(6,19,25,0.98); }
/* o form do hero precisa virar contexto de posicionamento so quando tem dropdown */
.busca-topo-form--ac{ position:relative; }

.ac-lista{ list-style:none; margin:0; padding:6px; max-height:min(60vh,420px); overflow-y:auto; }
.ac-item{
  display:flex; align-items:center; gap:11px; cursor:pointer;
  padding:8px 10px; border-radius:10px;
  transition:background .12s var(--ease);
}
.ac-item.is-ativo,
.ac-item:hover{ background:rgba(31,182,199,0.16); }
.ac-thumb{
  flex:0 0 auto; width:40px; height:40px; border-radius:8px; object-fit:cover;
  background:rgba(11,33,43,0.9); border:1px solid var(--line);
}
.ac-thumb-vazio{ display:block; }
.ac-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ac-nome{
  font-family:var(--sans); font-size:14px; color:var(--ink); line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ac-marca{
  font-family:var(--sans); font-size:11.5px; letter-spacing:0.02em; color:var(--ink-dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:560px){
  .ac-nome{ font-size:15px; }
  .ac-item{ padding:10px 10px; }   /* alvo de toque maior no celular */
}
@media (prefers-reduced-motion: reduce){
  .ac-item{ transition:none; }
}

.cat-marcas{ display:flex; flex-wrap:wrap; gap:7px; }
.cat-marcas[hidden]{ display:none; }
.cat-marca-btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:7px 13px; font-family:var(--sans); font-size:12px; letter-spacing:0.03em;
  color:var(--ink-dim); background:rgba(11,33,43,0.6);
  border:1px solid var(--line); border-radius:999px;
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.cat-marca-btn:hover{ color:var(--ink); border-color:color-mix(in srgb, var(--gold) 55%, transparent); }
.cat-marca-btn:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }
.cat-marca-btn[aria-pressed="true"]{
  color:#06171d; background:var(--gold-bright); border-color:var(--gold-bright); font-weight:600;
}
.cat-marca-qtd{ font-size:10.5px; opacity:0.72; font-variant-numeric:tabular-nums; }

/* Barra de atalhos "tipo categoria" para as vitrines (Lancamentos/Ofertas).
   Mesma linguagem visual das pilulas de fornecedor. */
.cat-atalhos{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.cat-atalhos[hidden]{ display:none; }
.cat-atalho{
  display:inline-flex; align-items:center; cursor:pointer;
  padding:7px 15px; font-family:var(--sans); font-size:12px; letter-spacing:0.03em;
  color:var(--gold-bright); background:rgba(11,33,43,0.6);
  border:1px solid color-mix(in srgb, var(--gold) 40%, transparent); border-radius:999px;
  text-decoration:none;
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.cat-atalho:hover{ color:#06171d; background:var(--gold-bright); border-color:var(--gold-bright); }
.cat-atalho:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; }

.cat-busca-status{ margin:0; font-size:12.5px; color:var(--ink-dim); }
.cat-busca-status[hidden]{ display:none; }

/* ---------- estado vazio ----------
   Tom de sugestao, nao de erro: nada quebrou, so nao casou nada. Sem icone de
   alerta e sem vermelho de proposito. */
.cat-vazio{
  margin:clamp(30px,4vw,56px) auto; max-width:520px; text-align:center;
  padding:clamp(24px,3vw,38px); border:1px dashed var(--line); border-radius:18px;
  background:rgba(11,33,43,0.4);
}
.cat-vazio[hidden]{ display:none; }
.cat-vazio-titulo{ margin:0 0 8px; font-family:var(--serif); font-size:clamp(17px,2vw,21px); color:var(--ink); }
.cat-vazio-dica{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-dim); }
.cat-vazio-limpar{
  padding:0; font:inherit; color:var(--gold-bright); cursor:pointer;
  background:none; border:0; border-bottom:1px solid currentColor;
}
.cat-vazio-limpar:hover{ color:var(--ink); }
.cat-vazio-limpar:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; border-radius:2px; }

/* ---------- ver mais ----------
   Este bloco e ao mesmo tempo o botao e a sentinela que o IntersectionObserver
   observa. Por isso ele existe no DOM mesmo durante a rolagem automatica: se
   fosse criado so no fim, nao haveria o que observar. */
.cat-mais{ display:flex; justify-content:center; margin:clamp(34px,4vw,60px) 0 4px; }
.cat-mais[hidden]{ display:none; }
.cat-mais-btn{
  padding:14px 30px; cursor:pointer; font-family:var(--sans);
  font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gold-bright); background:rgba(11,33,43,0.6);
  border:1px solid var(--line); border-radius:999px;
  transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.cat-mais-btn:hover{ color:#06171d; background:var(--gold-bright); border-color:var(--gold-bright); }
.cat-mais-btn:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; }

@media (max-width:560px){
  .cat-busca{ padding:11px; border-radius:14px; }   /* o `top` ja vem do --nav-h */
  /* 16px e o minimo que o iOS aceita sem dar zoom sozinho ao focar o campo */
  .cat-busca-input{ font-size:16px; padding:12px 42px 12px 40px; }
  .cat-marcas{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .cat-marcas::-webkit-scrollbar{ display:none; }
  .cat-marca-btn{ flex:0 0 auto; }
}
@media (prefers-reduced-motion:reduce){
  .cat-busca-input, .cat-marca-btn, .cat-mais-btn{ transition:none; }
}

/* Sala 3D: dois caminhos, ver os produtos no catalogo ou pedir orcamento. */
.room-cta{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.btn.btn-ghost{ background:transparent; border-color:color-mix(in srgb, var(--accent,#1fb6c7) 45%, transparent); }
.btn.btn-ghost:hover{ background:color-mix(in srgb, var(--accent,#1fb6c7) 16%, transparent); }

/* ------------------------------------------------------------------ LOGO
   A marca virou imagem em 02/08/2026 (antes era o texto "Unident").
   O arquivo ja vem com o texto em branco e fundo transparente, feito para
   o fundo escuro do site — ver data/fontes/marca/LEIA-ME.txt.
   Altura fixa e width:auto para nao distorcer em nenhuma largura de tela. */
.nav-brand img{
  display:block;
  height:clamp(34px,3.4vw,46px);
  width:auto;
}
.footer-logo{
  display:block;
  height:clamp(46px,5vw,66px);
  width:auto;
  margin-bottom:10px;
}