/* ==========================================================================
   WMC Distribuidora — Reset, tipografia e layout
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--line-strong) var(--ink-900);
  /* A largura da página não pode mudar quando a barra de rolagem some
     (modal aberto, preloader). Sem isto, o pin do ScrollTrigger mede a
     página sem barra e o site ganha 15px de estouro horizontal. */
  scrollbar-gutter: stable;
}

/* Lenis controla o scroll. Quando ele está ativo, o scroll nativo sai de cena. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  min-height: 100svh;
  background: var(--ink-900);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Trava o scroll com modal/menu aberto sem causar salto de layout. */
body.is-locked { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; background-color: var(--ink-800); }
/* O fundo acima é placeholder de carregamento das fotos. O logo é PNG
   transparente — nele o placeholder viraria um quadrado atrás do selo. */
img[src^="assets/img/logo-wmc"] { background-color: transparent; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

/* O atributo hidden precisa vencer qualquer display de componente. Sem isto,
   um `.classe { display: flex }` reativa um elemento marcado como hidden
   (foi o que fazia os três estados do preloader aparecerem de uma vez). */
[hidden] { display: none !important; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

::selection { background: var(--amber); color: var(--ink-900); }

/* --- Tipografia ---------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--cream);
  text-wrap: balance;
}

p { text-wrap: pretty; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--amber);
}
/* Traço curto antes do rótulo — ecoa o filete do logo. */
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--amber);
  flex: none;
}
.eyebrow--plain::before { display: none; }
.eyebrow--muted { color: var(--gold); }
.eyebrow--muted::before { background: var(--gold-24); }

.display-1 { font-size: var(--fs-hero); letter-spacing: var(--tr-hero); font-weight: 900; }
.display-2 { font-size: var(--fs-3xl); font-weight: 800; }
.display-3 { font-size: var(--fs-2xl); font-weight: 800; }

.lead {
  font-size: var(--fs-md);
  color: var(--muted);
  max-width: var(--measure);
}

.text-muted { color: var(--muted); }
.text-faint  { color: var(--faint); }
.text-amber  { color: var(--amber); }
.text-cream  { color: var(--cream); }

/* Números tabulares para preço, quantidade e estatística. */
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* --- Layout -------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 980px; }

.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--ink-850); }
.section--flush-top { padding-top: 0; }

/* Cabeçalho de seção: rótulo, título e texto de apoio na mesma métrica. */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}
.section-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
}
.section-head p { max-width: var(--measure); }

/* Variante centralizada: rótulo, título, apoio e ação no eixo do meio. */
.section-head--centro {
  align-items: center;
  text-align: center;
}
.section-head--centro p { margin-inline: auto; }
.section-head--centro .btn { margin-top: var(--s-2); }

.grid { display: grid; gap: var(--s-5); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }

/* Régua fina de separação. Sólida, sem sombra e sem degradê. */
.rule { height: 1px; background: var(--line); border: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Pula para o conteúdo — visível só no teclado. */
.skip-link {
  position: fixed; top: var(--s-3); left: var(--s-3);
  z-index: var(--z-toast);
  padding: var(--s-3) var(--s-5);
  background: var(--amber); color: var(--ink-900);
  font-weight: 700; font-size: var(--fs-sm);
  border-radius: var(--r-sm);
  transform: translateY(-200%);
  transition: transform var(--d-micro) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* --- Estados de reveal ---------------------------------------------------
   Só escondem quando o JS está de pé. Sem JS, o conteúdo aparece normal. */

html.js [data-reveal] { opacity: 0; will-change: transform, opacity; }
html.js [data-reveal='up']    { transform: translate3d(0, 32px, 0); }
html.js [data-reveal='fade']  { transform: none; }
html.js [data-reveal='left']  { transform: translate3d(-28px, 0, 0); }
html.js [data-reveal='scale'] { transform: scale(1.06); }
[data-reveal].is-in { will-change: auto; }

/* --- Acessibilidade de movimento ------------------------------------------
   Com movimento reduzido, nada de scrub, parallax ou reveal. O conteúdo
   simplesmente já está lá. */

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