/* =========================================================================
   LINARTE BANHO — Design System
   Paleta da marca LINARTE: ouro escovado #C39851 · bronze de ação #7B5822 · grafite #28282A
   ========================================================================= */

:root{
  /* — Marca — */
  --brand:        #7B5822;
  --brand-700:    #5C4118;
  --brand-800:    #4D3C1E;
  --brand-400:    #C39851;
  --brand-200:    #DBC295;
  --brand-050:    #FAF5EC;

  /* — Tinta e neutros quentes — */
  --ink:          #1A1A1C;
  --ink-2:        #28282A;
  --ink-3:        #4A4A4F;
  --muted:        #6E6E76;
  --muted-2:      #8E8E96;
  --line:         #D5D2CB;
  --line-strong:  #8B8983;
  --line-2:       #ECEAE5;
  --bg:           #FFFFFF;
  --bg-soft:      #FAF9F5;
  --bg-tint:      #F5F3EC;

  /* — Elevação — */
  --sh-sm: 0 1px 2px rgba(26,26,28,.05), 0 1px 1px rgba(26,26,28,.03);
  --sh-md: 0 4px 16px rgba(26,26,28,.06), 0 1px 3px rgba(26,26,28,.04);
  --sh-lg: 0 18px 48px rgba(45,35,20,.12), 0 4px 12px rgba(26,26,28,.05);
  --sh-brand: 0 10px 30px rgba(92,65,26,.28);

  /* — Ritmo — */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;
  --container: 1220px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(64px, 9vw, 128px);

  /* — Tipografia — */
  --font-display: "Outfit", "Josefin Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-hero:  clamp(2.3rem, 1.05rem + 4vw, 3.75rem);
  --t-h1:    clamp(2rem, 1.2rem + 2.8vw, 3.35rem);
  --t-h2:    clamp(1.65rem, 1.1rem + 2vw, 2.6rem);
  --t-h3:    clamp(1.15rem, .95rem + .7vw, 1.5rem);
  --t-body:  clamp(1rem, .96rem + .18vw, 1.075rem);
  --t-sm:    .9375rem;
  --t-xs:    .8125rem;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ————————————————————————————— Reset ————————————————————————————— */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px;
  /* o menu off-canvas fica posicionado fora da tela; clip evita a barra horizontal
     sem transformar o body em contêiner de rolagem (o que quebraria o header sticky) */
  overflow-x:clip;
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--t-body);
  line-height:1.68;
  color:var(--ink-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); font-weight:500; line-height:1.12; letter-spacing:-.018em; margin:0 0 .5em; }
h1{ font-size:var(--t-h1); }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); letter-spacing:-.01em; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
a{ color:var(--brand); text-decoration:none; transition:color .2s var(--ease); }
a:hover{ color:var(--brand-700); }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
hr{ border:0; border-top:1px solid var(--line); margin:0; }
::selection{ background:var(--brand-200); color:var(--ink); }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:var(--r-xs); }
/* Sobre fundo escuro o bronze de ação não alcança 3:1 — o anel de foco vira ouro claro. */
.hero :focus-visible,
.page-hero:not(.page-hero--plain) :focus-visible,
.band-dark :focus-visible,
.site-footer :focus-visible,
.lightbox :focus-visible{ outline-color:var(--brand-200); }

/* ————————————————————————————— Layout ————————————————————————————— */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container--wide{ max-width:1480px; }
.container--narrow{ max-width:820px; }
.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:clamp(48px,6vw,84px); }
.section--soft{ background:var(--bg-soft); }
.section--tint{ background:var(--bg-tint); }
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brand); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-sm) 0; font-weight:600;
}
.skip-link:focus{ left:0; color:#fff; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ————————————————————————————— Tipografia utilitária ————————————— */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-display);
  font-size:var(--t-xs); font-weight:600;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--brand); margin:0 0 1rem;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--brand-400); opacity:1; }
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{ content:""; width:26px; height:1px; background:var(--brand-400); opacity:1; }

.lead{ font-size:clamp(1.05rem,.98rem + .45vw,1.28rem); color:var(--ink-3); line-height:1.62; }
.muted{ color:var(--muted); }
.text-center{ text-align:center; }
.balance{ text-wrap:balance; }
.pretty{ text-wrap:pretty; }

.section-head{ max-width:720px; margin-bottom:clamp(36px,4.5vw,64px); }
.section-head--center{ margin-inline:auto; text-align:center; }

/* ————————————————————————————— Botões ————————————————————————————— */
.btn{
  --btn-bg:var(--brand); --btn-fg:#fff; --btn-bd:var(--brand);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--font-display); font-size:var(--t-sm); font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  padding:.95em 1.9em; border-radius:var(--r-pill);
  background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-bd);
  cursor:pointer; text-align:center; white-space:nowrap;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.btn:hover{ --btn-bd:var(--brand-200); color:var(--btn-fg); transform:translateY(-2px); box-shadow:var(--sh-brand); }
.btn:active{ transform:translateY(0); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line-strong); }
.btn--ghost:hover{ --btn-bd:var(--brand); --btn-fg:var(--brand); box-shadow:var(--sh-md); }
.btn--light{ --btn-bg:#fff; --btn-fg:var(--ink); --btn-bd:#fff; }
.btn--light:hover{ --btn-bd:#fff; box-shadow:0 12px 30px rgba(0,0,0,.22); }
.btn--outline-light{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.55); }
.btn--outline-light:hover{ --btn-bg:rgba(255,255,255,.12); --btn-bd:#fff; box-shadow:none; }
.btn--sm{ padding:.7em 1.35em; font-size:var(--t-xs); }
.btn .ico{ width:1.05em; height:1.05em; flex:none; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-display); font-weight:600; font-size:var(--t-sm);
  letter-spacing:.05em; text-transform:uppercase; color:var(--brand);
}
.link-arrow .ico{ width:1em; height:1em; transition:transform .25s var(--ease); }
.link-arrow:hover .ico{ transform:translateX(5px); }

/* ————————————————————————————— Header ————————————————————————————— */
/* Header sólido de propósito: backdrop-filter criaria um bloco contêiner para o
   menu position:fixed, deslocando o drawer no mobile. */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--bg);
  border-bottom:1px solid var(--line-2);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck{ border-bottom-color:var(--line); box-shadow:0 2px 24px rgba(26,26,28,.07); }
.nav-shell{ display:contents; }
.site-header__inner{
  display:flex; align-items:center; gap:clamp(16px,3vw,44px);
  min-height:76px; padding-block:12px;
}
.brand{ display:inline-flex; align-items:center; flex:none; }
.brand picture{ display:flex; }
.brand img{ width:auto; height:38px; }
.nav{ margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:clamp(4px,1.6vw,10px); }
.nav__link{
  position:relative; display:block;
  font-family:var(--font-display); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-2); padding:.85em .8em; border-radius:var(--r-sm);
}
.nav__link::after{
  content:""; position:absolute; left:.8em; right:.8em; bottom:.42em; height:1.5px;
  background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease);
}
.nav__link:hover{ color:var(--brand); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after{ transform:scaleX(1); }
.nav__link[aria-current="page"]{ color:var(--brand); }
.header__actions{ display:flex; align-items:center; gap:10px; flex:none; }
/* Instagram e Facebook saíram do header por ora (seguem no rodapé). As regras
   ficam para que reativar seja só devolver o markup em build.mjs > header(). */
.header__social{ display:flex; gap:2px; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--r-pill);
  color:var(--muted); background:transparent; border:0; cursor:pointer;
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.icon-btn:hover{ color:var(--brand); background:var(--brand-050); }
.icon-btn .ico{ width:18px; height:18px; }
.nav-toggle{ display:none; }
.nav__close{ display:none; }

@media (max-width:1240px){
  .nav__link{ padding-inline:.55em; letter-spacing:.1em; }
}
@media (max-width:1150px){
  .header__social{ display:none; }
}
@media (max-width:1010px){
  .header__actions > .btn{ display:none; }
}
@media (max-width:900px){
  .nav-toggle{ display:inline-flex; margin-left:auto; }
  .header__actions .btn{ display:none; }

  /* overlay fixo do tamanho da viewport: recorta o drawer deslizante, de modo que
     ele nunca gera rolagem horizontal no documento */
  .nav-shell{
    display:block; position:fixed; inset:0; z-index:99;
    overflow:hidden; visibility:hidden; pointer-events:none;
  }
  .nav-shell.is-open{ visibility:visible; pointer-events:auto; }

  .nav{
    position:absolute; top:0; right:0; bottom:0; width:min(360px,86vw);
    background:#fff; box-shadow:-20px 0 60px rgba(26,26,28,.16);
    padding:96px 32px 40px; margin:0;
    transform:translateX(100%); transition:transform .4s var(--ease-out);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .nav-shell.is-open .nav{ transform:translateX(0); }
  .nav__close{ display:inline-flex; position:absolute; top:20px; right:22px; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:2px; }
  .nav__link{ font-size:.95rem; letter-spacing:.1em; padding:1em .2em; border-bottom:1px solid var(--line-2); border-radius:0; }
  .nav__link::after{ display:none; }
  .nav__link[aria-current="page"]{ color:var(--brand); }
  .nav__cta{ margin-top:28px; display:grid; gap:12px; }
  .nav__cta .btn{ width:100%; }
  .nav-backdrop{
    position:absolute; inset:0; background:rgba(26,26,28,.45);
    opacity:0; transition:opacity .35s var(--ease);
  }
  .nav-shell.is-open .nav-backdrop{ opacity:1; }
}
@media (min-width:901px){ .nav__cta{ display:none; } }

/* ————————————————————————————— Hero ————————————————————————————— */
/* O banner do slider é 1920x700. A altura do hero acompanha essa proporção para a
   arte aparecer inteira em vez de recortada pelo object-fit:cover. */
.hero{ --banner:2.7429; position:relative; isolation:isolate; background:var(--ink); overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__slide{
  position:absolute; inset:0; opacity:0;
  transition:opacity 1.4s var(--ease), transform 9s linear;
  transform:scale(1.06);
}
.hero__slide.is-active{ opacity:1; transform:scale(1); }
/* As fotos originais trazem legendas gravadas na arte; o desfoque leve as dissolve
   e transforma o fundo em profundidade de campo, sem perder o clima do ambiente. */
.hero__slide img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  /* O zoom existe só para o blur de 5px não deixar a borda vazar; 1.5% basta.
     Antes era 1.06, que sozinho comia 6% da largura do banner. */
  filter:blur(5px) saturate(1.05); transform:scale(1.015);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(102deg, rgba(22,22,24,.93) 0%, rgba(40,30,15,.84) 40%, rgba(26,26,28,.62) 74%, rgba(26,26,28,.52) 100%),
    linear-gradient(to top, rgba(22,22,24,.72), rgba(22,22,24,.18) 38%, transparent 62%);
}
.hero__inner{
  display:flex; flex-direction:column; justify-content:center;
  /* 36.46vw = 100vw / 2.7429: a altura exata em que o banner cabe inteiro. */
  min-height:clamp(400px,36.46vw,940px);
  padding-block:clamp(40px,3.4vw,64px);
  max-width:940px; color:#fff;
}
.hero__eyebrow{ color:#fff; opacity:.82; }
.hero h1{
  font-size:var(--t-hero); color:#fff; font-weight:300;
  line-height:1.03; letter-spacing:-.032em; margin-bottom:.42em;
}
/* traço da marca como background: acompanha a quebra de linha no mobile */
.hero h1 em{
  font-style:normal; font-weight:600; color:#fff;
  padding-bottom:.08em;
  background-image:linear-gradient(90deg,var(--brand-200),var(--brand-400));
  background-repeat:no-repeat; background-size:100% .1em; background-position:0 100%;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.hero__text{ font-size:clamp(1.02rem,.96rem + .5vw,1.24rem); color:rgba(255,255,255,.86); max-width:56ch; margin-bottom:2.4rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-stats{ background:var(--ink); color:#fff; }
.hero__meta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(20px,4vw,56px);
  padding-block:clamp(26px,3vw,40px);
  border-top:1px solid rgba(255,255,255,.18);
}
@media (max-width:560px){
  .hero__meta{ display:grid; grid-template-columns:1fr 1fr; gap:22px 18px; }
}
.hero__stat{ text-align:center; }
.hero__stat b{
  display:block; font-family:var(--font-display); font-size:clamp(1.6rem,1.2rem + 1.2vw,2.2rem);
  font-weight:300; color:#fff; line-height:1;
}
.hero__stat span{ display:block; margin-top:.5em; font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.hero__dots{
  position:absolute; bottom:26px; z-index:2;
  /* acompanha a borda do texto: o .container tem max-width e fica centralizado */
  left:max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  display:flex; gap:8px;
}
.hero__dot{
  width:30px; height:3px; border-radius:2px; border:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,.32); transition:background-color .3s var(--ease), width .3s var(--ease);
}
.hero__dot[aria-selected="true"]{ background:#fff; width:46px; }
/* Até 1200px o conteúdo do hero é mais alto do que a altura em que o banner caberia
   inteiro, então como fundo recortado ele perderia de 20% (notebook) a 80% (celular)
   da largura. Aqui o banner vira um bloco próprio, inteiro e sem desfoque, e o
   título/CTAs vêm logo abaixo sobre o grafite. */
@media (max-width:1200px){
  .hero{ display:block; }
  .hero__media{ position:relative; inset:auto; z-index:auto; aspect-ratio:1920/700; }
  .hero__slide,
  .hero__slide.is-active{ transform:none; }
  .hero__slide img{ object-fit:contain; filter:none; transform:none; }
  .hero::after{ display:none; }
  .hero__inner{ min-height:0; padding-block:clamp(30px,7vw,48px); }
  .hero__dots{ top:calc(100vw / var(--banner) - 20px); bottom:auto; left:50%; transform:translateX(-50%); }
}

/* Hero interno (páginas) */
.page-hero{ position:relative; background:var(--ink); color:#fff; isolation:isolate; overflow:hidden; }
.page-hero__bg{ position:absolute; inset:0; z-index:-2; }
.page-hero__bg img{ width:100%; height:100%; object-fit:cover; opacity:.55; filter:blur(6px); transform:scale(1.08); }
.page-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg, rgba(24,24,26,.94), rgba(77,60,30,.82) 55%, rgba(26,26,28,.72));
}
.page-hero__inner{ padding-block:clamp(64px,8.5vw,116px); max-width:760px; }
.page-hero h1{ color:#fff; font-weight:300; letter-spacing:-.028em; margin-bottom:.35em; }
.page-hero__text{ color:rgba(255,255,255,.82); font-size:clamp(1rem,.95rem + .4vw,1.18rem); max-width:58ch; }
.page-hero--plain{ background:var(--bg-tint); color:var(--ink); }
.page-hero--plain .page-hero__inner{ padding-block:clamp(40px,5vw,72px) clamp(52px,6.5vw,92px); }
.page-hero--plain strong{ color:var(--ink); font-weight:600; }
.page-hero--plain::after{ display:none; }
.page-hero--plain h1{ color:var(--ink); }
.page-hero--plain .page-hero__text{ color:var(--ink-3); }

/* ————————————————————————————— Breadcrumb ————————————————————————— */
.breadcrumb{ padding-block:14px; font-size:var(--t-xs); color:var(--muted); }
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:.5em; list-style:none; margin:0; padding:0; }
.breadcrumb li{ display:flex; align-items:center; gap:.5em; }
.breadcrumb li + li::before{ content:"/"; color:var(--line); }
.breadcrumb a{ color:var(--muted); }
.breadcrumb a:hover{ color:var(--brand); }
.breadcrumb [aria-current]{ color:var(--ink-2); }
.breadcrumb--onDark{ color:rgba(255,255,255,.6); }
.breadcrumb--onDark a{ color:rgba(255,255,255,.72); }
.breadcrumb--onDark a:hover{ color:#fff; }
.breadcrumb--onDark [aria-current]{ color:#fff; }
.breadcrumb--onDark li + li::before{ color:rgba(255,255,255,.3); }

/* ————————————————————————————— Grids e cards ————————————————————— */
.grid{ display:grid; gap:clamp(16px,2.2vw,28px); }
.grid--lines{ grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); }
.grid--products{ grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr)); }

/* Card de linha de produto */
.line-card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-md); background:#fff; border:1px solid var(--line);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s var(--ease);
}
.line-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--brand-200); }
/* 16/9 alinhado ao topo corta a faixa inferior da capa, onde o nome da linha vem
   gravado na arte original — o nome aparece uma única vez, em texto, logo abaixo. */
.line-card__media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#fff; }
.line-card__media img{ width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform .7s var(--ease-out); }
.line-card:hover .line-card__media img{ transform:scale(1.05); }
.line-card__body{
  display:flex; align-items:center; gap:12px;
  padding:15px 18px 17px; border-top:1px solid var(--brand-200);
}
.line-card__name{
  flex:1 1 auto; min-width:0;
  font-family:var(--font-display); font-size:.98rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink); line-height:1.3;
}
.line-card__count{ font-size:var(--t-xs); color:var(--muted); white-space:nowrap; }
.line-card__go{
  flex:none; display:grid; place-items:center; width:30px; height:30px;
  border-radius:var(--r-pill); background:var(--brand-050); color:var(--brand);
  transition:background-color .28s var(--ease), color .28s var(--ease), transform .28s var(--ease);
}
.line-card__go .ico{ width:15px; height:15px; }
.line-card:hover .line-card__go{ background:var(--brand); color:#fff; transform:translateX(3px); }
.line-card__tag{
  position:absolute; top:12px; left:12px; z-index:1;
  font-family:var(--font-display); font-size:.6875rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  background:rgba(255,255,255,.94); color:var(--brand);
  padding:.42em .85em; border-radius:var(--r-pill); box-shadow:var(--sh-sm);
}

/* Card de produto: o botão da foto abre o lightbox; as bolinhas de cor ficam fora
   dele (botão dentro de botão não vale), na mesma moldura. */
.product-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .3s var(--ease);
}
.product-card__open{
  display:flex; flex-direction:column; flex:1; width:100%; padding:0; margin:0; border:0;
  background:none; color:inherit; font:inherit; text-align:left; cursor:zoom-in;
}
.product-card__media{ position:relative; aspect-ratio:676/460; background:#fff; overflow:hidden; }
.product-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out), opacity .2s var(--ease); }
.product-card.is-busy .product-card__media img{ opacity:.55; }
.product-card__zoom{
  position:absolute; top:10px; right:10px;
  width:34px; height:34px; border-radius:var(--r-pill);
  display:grid; place-items:center;
  background:rgba(255,255,255,.92); color:var(--brand); box-shadow:var(--sh-sm);
  opacity:0; transform:scale(.85); transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.product-card__open:focus-visible .product-card__zoom{ opacity:1; transform:scale(1); }
/* Só com mouse: no celular o toque ativa o hover e o card ficava levantado e com a
   foto ampliada depois de fechar a peça. */
@media (hover:hover){
  .product-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--brand-200); }
  .product-card__open:hover .product-card__media img{ transform:scale(1.06); }
  .product-card__open:hover .product-card__zoom{ opacity:1; transform:scale(1); }
  .product-card__dot:hover{ transform:scale(1.12); }
}
.product-card__zoom .ico{ width:16px; height:16px; }
.product-card__body{ flex:1; padding:14px 16px 12px; border-top:1px solid var(--line-2); }
.product-card__cores{ display:flex; align-items:center; gap:7px; padding:0 16px 16px; }
.product-card__dot{
  flex:none; width:20px; height:20px; padding:0; border-radius:50%; cursor:pointer;
  background:var(--dot); border:1px solid rgba(26,26,28,.16);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.product-card__dot[aria-pressed="true"]{ box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--brand); }
.product-card__mais{
  margin-left:2px; padding:2px 4px; border:0; background:none; cursor:pointer;
  font-family:var(--font-display); font-size:.75rem; font-weight:600; letter-spacing:.04em; color:var(--muted);
}
.product-card__mais:hover{ color:var(--brand); }
.product-card__mais.is-active{ color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
.product-card__name{
  font-family:var(--font-display); font-size:.98rem; font-weight:500;
  color:var(--ink); line-height:1.3; margin:0;
}
.product-card__codes{ display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.code-chip{
  font-family:var(--font-display); font-size:.6875rem; font-weight:600; letter-spacing:.055em;
  color:var(--brand-700); background:var(--brand-050); border:1px solid var(--brand-200);
  padding:.3em .6em; border-radius:var(--r-sm);
  /* O chip pode quebrar entre o código e a medida quando o card é estreito,
     mas nunca no meio de um deles. Sem o max-width ele é um flex item de
     largura max-content e vazaria para fora do card no celular. */
  white-space:normal; max-width:100%;
}
.code-chip b, .code-chip span{ white-space:nowrap; }
.code-chip b{ font-weight:600; }
.code-chip span{ font-weight:400; color:var(--muted); }

/* Card genérico / feature */
.feature{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:clamp(24px,3vw,34px);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .3s var(--ease);
}
.feature:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--brand-200); }
.feature__icon{
  width:46px; height:46px; border-radius:var(--r-pill);
  display:grid; place-items:center; margin-bottom:20px;
  background:var(--brand-050); color:var(--brand);
}
.feature__icon .ico{ width:22px; height:22px; }
.feature h3{ margin-bottom:.45em; }
.feature p{ color:var(--muted); font-size:var(--t-sm); line-height:1.62; }

/* ————————————————————————————— Segmentos ————————————————————————— */
.filters{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-bottom:clamp(28px,3.5vw,42px);
}
.chip{
  font-family:var(--font-display); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.7em 1.25em; border-radius:var(--r-pill);
  background:#fff; color:var(--ink-3); border:1px solid var(--line-strong);
  cursor:pointer; transition:all .22s var(--ease);
}
.chip:hover{ border-color:var(--brand-200); color:var(--brand); }
.chip[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:var(--sh-brand); }
.search{
  position:relative; margin-left:auto; flex:1 1 240px; max-width:320px;
}
.search .ico{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--muted-2); pointer-events:none;
}
.search input{
  width:100%; font:inherit; font-size:var(--t-sm);
  padding:.78em 1em .78em 2.9em; border-radius:var(--r-pill);
  border:1px solid var(--line-strong); background:#fff; color:var(--ink);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search input::placeholder{ color:var(--muted-2); }
.search input:focus{ outline:0; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-200); }
@media (max-width:720px){ .search{ margin-left:0; max-width:none; } }
.is-hidden{ display:none !important; }
.empty-state{ padding:56px 0; text-align:center; color:var(--muted); }

/* ————————————————————————————— Faixa escura ————————————————————— */
.band-dark{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(115deg, var(--ink) 0%, #2E2417 52%, var(--brand-800) 100%);
  color:#fff;
}
.band-dark::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.32;
  background:radial-gradient(60% 90% at 88% 10%, rgba(195,152,81,.45), transparent 62%);
}
.band-dark h2, .band-dark h3{ color:#fff; }
.band-dark p{ color:rgba(255,255,255,.78); }
.band-dark .eyebrow{ color:var(--brand-200); }
.cta-band{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:clamp(24px,4vw,56px); }
.cta-band__text{ max-width:620px; }
.cta-band__actions{ display:flex; flex-wrap:wrap; gap:14px; }

/* ————————————————————————————— Acabamentos ————————————————————— */
/* Um grupo por textura: título e explicação à esquerda, as cores numa fileira de
   até seis à direita. No celular o título sobe e as cores ficam três por linha. */
.finish-group{
  display:grid; grid-template-columns:minmax(180px,240px) 1fr; gap:clamp(24px,4vw,56px);
  padding-block:clamp(28px,3.5vw,44px); border-top:1px solid var(--line-2);
}
.finish-group:first-child{ padding-top:0; border-top:0; }
.finish-group__title{ margin:0; font-size:var(--t-h3); }
.finish-group__head p{ margin:.5em 0 0; font-size:var(--t-sm); color:var(--muted); line-height:1.55; }
.finish-group__count{
  display:inline-block; margin-top:1em; font-family:var(--font-display); font-size:.6875rem;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brand);
}
.swatches{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px); align-items:start; }
.swatch{ margin:0; }
.swatch__photo{
  display:block; width:100%; aspect-ratio:1; object-fit:cover;
  border-radius:var(--r-md); border:1px solid var(--line-2); background:#fff;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.swatch:hover .swatch__photo{ transform:translateY(-3px); box-shadow:var(--sh-md); }
.swatch figcaption{ margin-top:.75em; }
.swatch__num{ display:block; font-size:.6875rem; font-weight:600; letter-spacing:.08em; color:var(--muted-2); }
.swatch__name{ display:block; margin-top:.15em; font-family:var(--font-display); font-size:var(--t-sm); font-weight:500; line-height:1.3; color:var(--ink); }
.finish-note{ margin-top:clamp(20px,3vw,32px); }
@media (max-width:900px){
  .finish-group{ grid-template-columns:1fr; gap:20px; }
  .finish-group__head{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:14px; }
  .finish-group__head p{ flex-basis:100%; order:3; margin-top:.35em; }
  .finish-group__count{ margin-top:0; }
}
@media (max-width:640px){
  .swatches{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .swatch__name{ font-size:.8125rem; }
}

/* ————————————————————————————— Split (imagem + texto) ————————————— */
.split{
  display:grid; gap:clamp(32px,5vw,72px); align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
}
.split--reverse .split__media{ order:2; }
.split__media{ position:relative; }
.split__media img{
  width:100%; border-radius:var(--r-lg); box-shadow:var(--sh-lg);
}
.split__media::after{
  content:""; position:absolute; inset:auto -18px -18px auto; width:58%; height:58%;
  border:1px solid var(--brand-200); border-radius:var(--r-lg); z-index:-1;
}
@media (max-width:900px){ .split--reverse .split__media{ order:0; } .split__media::after{ display:none; } }

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:clamp(20px,3vw,40px); }
.stat{ text-align:center; }
.stat b{
  display:block; font-family:var(--font-display); font-weight:300;
  font-size:clamp(2rem,1.4rem + 2vw,3rem); color:var(--brand); line-height:1;
  letter-spacing:-.03em;
}
.hero__stat b .stat__prefixo,
.stat b .stat__prefixo{
  display:inline; margin:0; font-size:.5em; font-weight:400;
  letter-spacing:.02em; text-transform:none; color:inherit;
}
.stat span{ display:block; margin-top:.6em; font-size:var(--t-xs); letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }

/* ————————————————————————————— FAQ ————————————————————————————— */
.faq{ max-width:820px; margin-inline:auto; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:1.35em 0; font-family:var(--font-display); font-size:clamp(1rem,.96rem + .3vw,1.15rem);
  font-weight:500; color:var(--ink); line-height:1.4;
  transition:color .2s var(--ease);
}
.faq__q:hover{ color:var(--brand); }
.faq__icon{
  flex:none; width:26px; height:26px; margin-top:2px; border-radius:var(--r-pill);
  display:grid; place-items:center; background:var(--brand-050); color:var(--brand);
  transition:transform .35s var(--ease), background-color .25s var(--ease);
}
.faq__q[aria-expanded="true"] .faq__icon{ transform:rotate(45deg); background:var(--brand); color:#fff; }
.faq__icon .ico{ width:13px; height:13px; }
.faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .38s var(--ease-out); }
.faq__item.is-open .faq__a{ grid-template-rows:1fr; }
.faq__a > div{ overflow:hidden; }
.faq__a p{ color:var(--muted); font-size:var(--t-sm); line-height:1.72; padding-bottom:1.5em; max-width:66ch; }

/* ————————————————————————————— Formulário ————————————————————— */
.form-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.field{ display:flex; flex-direction:column; gap:.45em; }
.field--full{ grid-column:1/-1; }
.field label{
  font-family:var(--font-display); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.field input, .field textarea, .field select{
  font:inherit; font-size:var(--t-sm); color:var(--ink);
  padding:.85em 1.05em; border-radius:var(--r-sm);
  border:1px solid var(--line-strong); background:#fff; width:100%;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{ resize:vertical; min-height:140px; line-height:1.6; }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:0; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-200);
}
.field input:user-invalid, .field textarea:user-invalid{ border-color:#C0392B; }
.field__hint{ font-size:var(--t-xs); color:var(--muted-2); }
.hp-field{ position:absolute !important; left:-9999px !important; opacity:0; height:0; width:0; }
.form-note{ font-size:var(--t-xs); color:var(--muted); margin-top:6px; }
.form-status{ display:none; margin-top:16px; padding:14px 18px; border-radius:var(--r-sm); font-size:var(--t-sm); }
.form-status.is-visible{ display:block; }
.form-status--ok{ background:#EDF7F0; color:#1E7A46; border:1px solid #BEE3CC; }
.form-status--err{ background:#FDF1F0; color:#9B2C21; border:1px solid #F3C9C4; }

.contact-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,40px); box-shadow:var(--sh-sm);
}
.contact-list{ display:grid; gap:22px; }
.contact-list li{ display:flex; gap:16px; align-items:flex-start; }
.contact-list .feature__icon{ margin-bottom:0; width:42px; height:42px; flex:none; }
.contact-list dt{
  font-family:var(--font-display); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.3em;
}
.contact-list dd{ margin:0; font-size:var(--t-sm); color:var(--ink); line-height:1.7; }
.contact-list dd a{ color:var(--ink); }
.contact-list dd a:hover{ color:var(--brand); }

/* ————————————————————————————— Catálogo ————————————————————————— */
.catalog-frame{
  position:relative; width:100%; aspect-ratio:16/10;
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--sh-lg); background:var(--bg-soft);
}
.catalog-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width:700px){ .catalog-frame{ aspect-ratio:3/4; } }

/* ————————————————————————————— Mapa ————————————————————————————— */
.map-frame{
  position:relative; width:100%; aspect-ratio:16/7;
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--sh-md); background:var(--bg-tint);
}
.map-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width:700px){ .map-frame{ aspect-ratio:4/3; } }

.footer__address{
  display:flex; flex-direction:column; gap:.35em;
  margin-top:1.6em; padding-top:1.4em;
  border-top:1px solid rgba(255,255,255,.1);
  font-style:normal; font-size:var(--t-sm); color:rgba(255,255,255,.6); line-height:1.6;
}
.footer__address a{ color:rgba(255,255,255,.68); margin-top:.3em; }
.footer__address a:hover{ color:#fff; }

/* ————————————————————————————— Lightbox ————————————————————————— */
.lightbox{
  position:fixed; inset:0; z-index:200; display:none; overflow-y:auto;
  align-items:flex-start; justify-content:center; padding:clamp(16px,4vw,56px);
  background:rgba(16,14,10,.92); backdrop-filter:blur(6px);
}
.lightbox.is-open{ display:flex; animation:fade .25s var(--ease); }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }
/* margin auto centraliza na vertical sem cortar o topo quando o conteúdo passa da tela.
   As laterais repetem a margem padrão do <figure>, que no celular vai a zero. */
.lightbox__figure{ max-width:min(960px,100%); width:100%; margin:auto 40px; text-align:center; }
.lightbox__img{
  /* A foto cede altura para legenda, códigos e cores caberem sem rolar (notebook baixo). */
  max-width:100%; max-height:min(60vh, calc(100vh - 360px)); width:auto; margin-inline:auto;
  border-radius:var(--r-md); background:#fff; box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.lightbox__cap{ margin-top:20px; color:#fff; }
.lightbox__cap > strong{
  display:block; font-family:var(--font-display); font-size:1.2rem; font-weight:500; letter-spacing:.01em;
}
.lightbox__cap > span{ display:block; margin-top:.35em; font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.lightbox__codes{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:14px; }
.lightbox__codes .code-chip{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.22); color:#fff; }
.lightbox__codes .code-chip span{ color:rgba(255,255,255,.6); }
.lightbox__img{ transition:opacity .2s var(--ease); }
.lightbox.is-busy .lightbox__img{ opacity:.55; }

/* Prévia de acabamento: uma bolinha por cor, com os tons tirados da foto real */
.finishes{ margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.12); color:#fff; }
.finishes__label{ margin:0 0 12px; font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.finishes__label b{ font-weight:500; letter-spacing:.06em; color:#fff; }
.finishes__dots{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:660px; margin-inline:auto; }
.finish-dot{
  width:30px; height:30px; padding:0; border-radius:50%; cursor:pointer;
  background:var(--dot); border:1px solid rgba(255,255,255,.28);
  box-shadow:0 0 0 2px transparent; transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.finish-dot:hover{ transform:scale(1.12); }
.finish-dot[aria-pressed="true"]{ box-shadow:0 0 0 2px rgba(16,14,10,.92), 0 0 0 4px var(--brand-200); }
/* "foto original": sem cor, só o traço de "nenhum" */
.finish-dot--original{ background:linear-gradient(135deg, transparent calc(50% - 1px), rgba(255,255,255,.6) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), rgba(255,255,255,.08); }
.finishes__note{ margin:12px 0 0; font-size:.75rem; color:rgba(255,255,255,.5); }
.lightbox__close, .lightbox__nav{
  position:absolute; display:grid; place-items:center;
  width:46px; height:46px; border-radius:var(--r-pill); cursor:pointer;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff;
  transition:background-color .2s var(--ease), transform .2s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover{ background:rgba(255,255,255,.22); transform:scale(1.06); }
.lightbox__close{ top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px); }
.lightbox__nav--prev{ left:clamp(10px,2.5vw,28px); top:50%; margin-top:-23px; }
.lightbox__nav--next{ right:clamp(10px,2.5vw,28px); top:50%; margin-top:-23px; }
.lightbox__nav .ico, .lightbox__close .ico{ width:20px; height:20px; }
@media (max-width:640px){
  /* No celular o conteúdo pode passar da altura da tela e rolar: o X e as setas ficam
     presos à tela (não ao conteúdo), com espaço reservado em cima e embaixo. */
  /* backdrop-filter faz o fixed se comportar como absolute (o X e as setas rolariam
     junto), então sai aqui; sem o desfoque o fundo fica opaco para a página não vazar. */
  .lightbox{ padding:60px 16px 68px; backdrop-filter:none; background:rgb(16,14,10); }
  .lightbox__figure{ margin-inline:0; }
  .lightbox__close, .lightbox__nav{ position:fixed; z-index:2; width:42px; height:42px; }
  /* Faixas atrás do X e das setas: o que rola por baixo some em vez de embaralhar. */
  .lightbox::before, .lightbox::after{ content:""; position:fixed; left:0; right:0; z-index:1; pointer-events:none; }
  .lightbox::before{ top:0; height:60px; background:linear-gradient(rgb(16,14,10) 60%, rgba(16,14,10,0)); }
  .lightbox::after{ bottom:0; height:72px; background:linear-gradient(rgba(16,14,10,0), rgb(16,14,10) 40%); }
  .lightbox__close{ top:9px; right:9px; }
  .lightbox__nav{ top:auto; bottom:12px; margin-top:0; }
  .lightbox__nav--prev{ left:calc(50% - 52px); }
  .lightbox__nav--next{ right:calc(50% - 52px); }
  .lightbox__img{ max-height:40vh; }
  .lightbox__cap{ margin-top:14px; }
  .lightbox__codes{ margin-top:10px; }
  .finishes{ margin-top:14px; padding-top:12px; }
  .finishes__label{ margin-bottom:10px; }
  .finishes__dots{ gap:6px; }
  .finish-dot{ width:26px; height:26px; }
  .finishes__note{ margin-top:10px; }
}
/* Celular com pouca altura útil (barra do navegador aberta): foto um pouco menor para
   as cores caberem sem rolar. */
@media (max-width:640px) and (max-height:620px){
  .lightbox__img{ max-height:32vh; }
}
body.no-scroll{ overflow:hidden; }

/* ————————————————————————————— Footer ————————————————————————————— */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.68); padding-top:clamp(56px,7vw,88px); }
.site-footer h4{
  font-family:var(--font-display); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:#fff; margin:0 0 1.35em;
}
.footer__grid{
  display:grid; gap:clamp(32px,4vw,56px);
  grid-template-columns:minmax(240px,1.4fr) repeat(auto-fit,minmax(150px,1fr));
  padding-bottom:clamp(40px,5vw,64px);
}
/* Abaixo de 900px os mínimos de 240px + 150px somam mais que a largura do
   celular e o grid transbordava. Como html/body têm overflow-x:clip (por causa
   do menu off-canvas), o excesso era CORTADO em vez de rolar: a coluna Contato
   — telefones, e-mail e endereço — simplesmente sumia da tela.
   minmax(0,1fr) no lugar de 1fr impede que o conteúdo mais largo (o e-mail)
   volte a esticar a coluna. */
@media (max-width:900px){
  .footer__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer__brand,
  .footer__grid > :last-child{ grid-column:1 / -1; }
}
@media (max-width:420px){
  .footer__grid{ grid-template-columns:minmax(0,1fr); }
}
.footer__brand picture{ display:block; margin-bottom:20px; }
/* A logo é metálica (aço escovado + ouro): sobre o rodapé escuro ela aparece
   em cor natural — nada de brightness(0) invert(1), que a achataria em branco. */
.footer__brand img{ height:36px; width:auto; }
.footer__brand p{ font-size:var(--t-sm); line-height:1.72; max-width:42ch; color:rgba(255,255,255,.6); }
.footer__links li + li{ margin-top:.72em; }
.footer__links a{ color:rgba(255,255,255,.68); font-size:var(--t-sm); overflow-wrap:anywhere; }
.footer__links a:hover{ color:#fff; }
.footer__social{ display:flex; gap:10px; margin-top:22px; }
.footer__social a{
  display:grid; place-items:center; width:40px; height:40px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.08); color:#fff;
  transition:background-color .22s var(--ease), transform .22s var(--ease);
}
.footer__social a:hover{ background:var(--brand-400); color:var(--ink); transform:translateY(-2px); }
.footer__social .ico{ width:18px; height:18px; }
.footer__bottom{
  display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; justify-content:space-between;
  padding-block:26px; border-top:1px solid rgba(255,255,255,.1);
  font-size:var(--t-xs); color:rgba(255,255,255,.48);
}
.footer__bottom a{ color:rgba(255,255,255,.62); }
.footer__bottom a:hover{ color:#fff; }
.footer__mark{ height:26px; width:auto; opacity:.9; }
/* O WhatsApp flutuante fica fixo no canto inferior direito o tempo todo; sem esta
   folga ele cobriria os créditos e o endereço no fim do rodapé. */
.footer__bottom{ padding-bottom:calc(26px + 68px); }
@media (min-width:521px){ .footer__bottom{ padding-bottom:26px; padding-right:210px; } }

/* ————————————————————————————— WhatsApp flutuante ————————————————— */
.wa-float{
  position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:90;
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 20px 13px 15px; border-radius:var(--r-pill);
  background:#25D366; color:#fff; font-family:var(--font-display); font-weight:600;
  font-size:var(--t-sm); letter-spacing:.02em;
  box-shadow:0 10px 30px rgba(37,211,102,.4);
  transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.wa-float:hover{ color:#fff; box-shadow:0 14px 38px rgba(37,211,102,.55); }
.wa-float .ico{ width:22px; height:22px; flex:none; }
@media (max-width:520px){ .wa-float span{ display:none; } .wa-float{ padding:15px; } }

/* ————————————————————————————— Selo de prévia ————————————————————— */
.preview-flag{
  position:fixed; left:clamp(12px,2.5vw,22px); bottom:clamp(12px,2.5vw,22px); z-index:95;
  display:inline-flex; align-items:center; gap:.55em;
  padding:.6em 1.05em; border-radius:var(--r-pill);
  background:rgba(26,26,28,.88); color:rgba(255,255,255,.9);
  font-family:var(--font-display); font-size:.6875rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  box-shadow:0 8px 24px rgba(0,0,0,.24); backdrop-filter:blur(6px);
  pointer-events:none; user-select:none;
}
.preview-flag::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:#F0B429; box-shadow:0 0 0 3px rgba(240,180,41,.25);
}
@media (max-width:520px){ .preview-flag{ font-size:.625rem; padding:.5em .85em; } }

/* ————————————————————————————— Reveal ————————————————————————————— */
[data-reveal]{ opacity:0; transform:translateY(18px); }
.js-ready [data-reveal]{ transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
[data-reveal-delay="4"]{ transition-delay:.32s; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hero__slide{ transform:none !important; }
}

/* ————————————————————————————— Impressão ————————————————————————— */
@media print{
  .site-header,.site-footer,.wa-float,.hero__dots,.filters,.lightbox{ display:none !important; }
  body{ color:#000; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.75em; color:#555; }
}