/* ============================================================
   FIFI Profissional — LP
   Paleta amostrada do deck oficial. Escuro dominante, lima raro.
   ============================================================ */

/* Fonte local, nao Google Fonts. O `<link>` para fonts.googleapis.com era
   RECURSO BLOQUEANTE em origem de terceiro: DNS + TLS + CSS, e so entao o
   pedido do woff2 num SEGUNDO dominio (fonts.gstatic.com). Tres viagens antes
   do primeiro texto pintar. Servido daqui e uma so, na conexao ja aberta.
   Arquivo com a versao no nome (v15) para poder ser `immutable` sem risco.
   latin-ext fica declarado mas so baixa se aparecer glifo do range dele —
   o texto da pagina e todo latin. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/outfit-v15-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/outfit-v15-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --green-950: oklch(20% 0.055 167);
  --green-900: oklch(27% 0.075 166);
  --green-850: oklch(31% 0.09 166);
  --green-800: oklch(42% 0.105 165);
  --green-700: oklch(49% 0.105 165);
  --lime: oklch(89% 0.19 126);
  --lime-deep: oklch(80% 0.185 122);
  --paper: oklch(97.5% 0.009 113);
  --cream: oklch(94% 0.018 100);
  --ink: oklch(22% 0.025 160);
  --muted: oklch(48% 0.02 160);
  --line: oklch(82% 0.02 150);
  --white: oklch(98.8% 0.004 120);

  /* texto sobre fundo escuro — mais claro que o padrão porque tipo claro
     em fundo escuro lê como mais fino */
  --on-dark: oklch(91% 0.014 155);
  --on-dark-soft: oklch(80% 0.018 158);
  --hairline: oklch(92% 0.01 150 / .18);

  --space-xs: 4px;  --space-sm: 8px;  --space-md: 12px; --space-lg: 16px;
  --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px;
  --space-4xl: 64px; --space-5xl: 96px; --space-6xl: 128px;

  --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* Responsividade em monitor grande: sem teto o conteúdo estica de ponta a ponta
     em 1440+, e a linha de texto passa de 75ch. O max() aumenta o padding lateral
     sozinho quando a tela ultrapassa --maxw, centralizando sem wrapper no HTML. */
  --maxw: 1520px;
  --gutter: clamp(20px, 5vw, 88px);
  --pad-x: max(var(--gutter), (100% - var(--maxw)) / 2);
}

* { box-sizing: border-box; }
/* overflow-x: clip e não hidden. `hidden` no html cria contexto de rolagem e
   quebra o position:sticky do header; `clip` corta sem criar scroller. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Outfit", system-ui, sans-serif;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* height:auto é obrigatório: os atributos width/height no HTML (que evitam layout shift)
   viram presentational hints e, sem isso, esmagam a imagem quando o CSS define só a largura. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { color: inherit; }
h1, h2, h3, p, dl, dd, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2 {
  font-family: "Outfit", sans-serif;
  /* 600 e não 500: em 500 as hastes finas da Eczar ficam delicadas demais no
     tamanho de display para uma marca de químico industrial. 600 dá presença
     sem achatar o contraste grosso/fino, que é o que separa esta página de
     um layout todo em sans. */
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: .95;
  text-wrap: balance;
}
/* Fórmula fluida única (intercepto + vw) em vez de um clamp por breakpoint.
   Com regras separadas o h1 ENCOLHIA ao cruzar 760px e 1100px, porque cada
   faixa usava um coeficiente vw diferente. Esta cresce monotonicamente. */
h1 { font-size: clamp(2.1rem, 1.2rem + 4.8vw, 6.6rem); }
h2 { font-size: clamp(2.4rem, 4.4vw, 5rem); }
h1 em, h2 em { color: var(--lime); font-style: italic; font-weight: 600; }

.sr-only {
  clip: rect(0 0 0 0); clip-path: inset(50%);
  height: 1px; width: 1px; overflow: hidden; position: absolute; white-space: nowrap;
}
.skip-link {
  position: fixed; left: var(--space-lg); top: var(--space-lg); z-index: 100;
  background: var(--lime); color: var(--green-950); font-weight: 700;
  padding: var(--space-md) var(--space-lg); border-radius: var(--radius-sm);
  transform: translateY(-200%); transition: transform .2s;
}
.skip-link:focus-visible { transform: translateY(0); }

.section { padding: clamp(72px, 8vw, 128px) var(--pad-x); }

/* ---------------- header ---------------- */
.site-header {
  height: 78px; padding: 0 var(--pad-x);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3xl);
  background: color-mix(in oklch, var(--green-950) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--hairline);
  color: var(--on-dark);
  position: sticky; top: 0; z-index: 50;
}
.brand { display: inline-flex; align-items: center; gap: var(--space-md); width: max-content; }
.brand-mark { width: auto; height: 30px; }
.site-header .brand-mark { filter: brightness(0) invert(1); }
.brand-sub {
  padding-left: var(--space-md);
  border-left: 1px solid color-mix(in oklch, currentColor 30%, transparent);
  font-size: .6rem; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; line-height: 1;
}
.site-header nav { display: flex; gap: var(--space-2xl); }
.site-header nav a { font-size: .82rem; font-weight: 600; position: relative; padding-block: 4px; }
.site-header nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--lime); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.site-header nav a:hover::after { transform: scaleX(1); }
.site-header > .button { justify-self: end; }
.menu-button, .mobile-menu { display: none; }

/* ---------------- botões ---------------- */
/* `appearance: none` + `background: transparent` na BASE, não só nas variantes.
   Todo botão daqui era <a>, que não tem fundo do agente; o primeiro <button> de
   verdade (o da demonstração) herdava o `buttonface` cinza do navegador e virava
   uma pílula clara com texto ilegível sempre que a variante não carregava. */
.button {
  appearance: none; -webkit-appearance: none;
  background: transparent; color: inherit;
  min-height: 52px; padding: 0 var(--space-xl);
  display: inline-flex; justify-content: center; align-items: center;
  border: 0; border-radius: 999px;
  font-size: .85rem; font-weight: 750; letter-spacing: .01em;
  cursor: pointer; white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.button-small { min-height: 42px; padding-inline: 20px; font-size: .78rem; }
.button-lime { background: var(--lime); color: var(--green-950); }
.button-lime:hover { background: var(--white); }
.button-dark { background: var(--green-950); color: var(--white); }
.button-dark:hover { background: var(--green-800); }
/* Botão da demonstração: fantasma sobre o verde escuro. Lima cheia aqui
   competiria com o CTA principal — o lima entra só na seta do play e no
   hover, seguindo o "lima raro" do resto da página. */
.button-play {
  margin-top: var(--space-2xl); gap: var(--space-md);
  background: transparent; color: var(--white);
  border: 1px solid var(--hairline);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.button-play .play-mark {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 999px;
  background: var(--lime); position: relative;
  transition: background .3s var(--ease);
}
.button-play .play-mark::after {
  content: ""; position: absolute; top: 50%; left: 52%;
  transform: translate(-50%, -50%);
  border-left: 7px solid var(--green-950);
  border-block: 4.5px solid transparent;
}
.button-play:hover { background: var(--lime); color: var(--green-950); border-color: var(--lime); }
.button-play:hover .play-mark { background: var(--green-950); }
.button-play:hover .play-mark::after { border-left-color: var(--lime); }

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 4px;
}
.text-link {
  display: inline-flex; align-items: center; gap: var(--space-md);
  font-size: .88rem; font-weight: 700; color: var(--on-dark);
}
.text-link span { font-size: 1.15rem; transition: transform .3s var(--ease); }
.text-link:hover span { transform: translate(4px, 4px); }

/* Sem o tracinho antes do rótulo: pedido da Ivonete, "traço deixa cara de IA".
   Mesma origem da regra de zero travessão no corpo do texto. */
.eyebrow {
  display: flex; align-items: center; gap: var(--space-md);
  font-size: .7rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lime);
}
.eyebrow > span { display: none; }
.eyebrow-dark { color: var(--green-800); }

/* ---------------- hero ---------------- */
.hero {
  position: relative;
  min-height: calc(100svh - 78px);
  padding: clamp(48px, 5vw, 88px) var(--pad-x) clamp(56px, 6vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
  align-items: center; gap: clamp(40px, 6vw, 100px);
  background:
    linear-gradient(105deg, transparent 63%, color-mix(in oklch, var(--green-700) 26%, transparent) 63.1%),
    var(--green-900);
  color: var(--on-dark);
  overflow: hidden;
}
/* O headline mora numa coluna de ~44%, mas era dimensionado em vw (janela inteira).
   Em 1366px isso pedia 101px de fonte para uma coluna de 743px: a maior linha
   precisa de 9,42x o tamanho da fonte, então quebrava em 5 linhas em vez de 3 e
   o hero estourava a altura da tela. cqw mede a COLUNA, não a janela.
   10,2cqw = o maior tamanho em que "O maior custo não está" cabe numa linha. */
.hero-copy { position: relative; z-index: 2; container-type: inline-size; }
.hero h1 {
  margin-top: var(--space-xl); color: var(--white);
  font-size: clamp(2rem, 10.2cqw, 6.6rem);
}
.hero h1 .h1-line { display: block; overflow: hidden; }
.hero h1 .anim-mask { display: block; }
.hero-lead {
  margin-top: var(--space-2xl); max-width: 54ch;
  color: var(--on-dark); font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.7;
}
.hero-actions { margin-top: var(--space-2xl); display: flex; align-items: center; gap: var(--space-xl); flex-wrap: wrap; }

/* Altura amarrada à do viewport, não fixa: num notebook 1366x768 a janela útil
   tem ~660px, e um visual de 620px fixos jogava o hero pra fora da tela. */
.hero-visual { min-height: min(620px, 58vh); position: relative; display: grid; place-items: center; }
.hero-visual::before { display: none; }
.orbit {
  display: none;
  position: absolute; border: 1px solid oklch(98% 0.01 150 / .22); border-radius: 50%;
  animation: spin 22s linear infinite;
}
.orbit::after {
  content: ""; position: absolute; width: 7px; height: 7px;
  border-radius: 50%; background: var(--white); top: 7%; left: 23%;
}
.orbit-one { width: 104%; aspect-ratio: 1; }
.orbit-two { width: 82%; aspect-ratio: 1; animation-direction: reverse; animation-duration: 30s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* O "calc(100% - 16px)" e o freio: sem ele, entre ~1100 e 1400px o palco fica
   mais largo que a propria coluna e o galao da direita era cortado pela borda.
   O deslocamento a esquerda compensa o galao frontal, que fica em right:0. */
.product-stage {
  width: min(50vw, 680px, 84vh, calc(100% - 16px));
  aspect-ratio: 1; position: relative; z-index: 2;
  transform: translateX(-8%);
}
.product { position: absolute; object-fit: contain; filter: drop-shadow(0 26px 22px oklch(20% 0.05 165 / .28)); }
/* Os galões saem do mesmo enquadramento (canvas 620², conteúdo 0.67), então a base
   visual alinha compensando o padding transparente: (1 - 0.844) / 2 ≈ 7,8% da largura. */
.product-main  { width: 70%; left: 50%; bottom: 14%; transform: translateX(-50%) rotate(-1.5deg); z-index: 3; }
.product-back  { width: 58%; left: 0;   bottom: 19%; transform: rotate(-7deg); z-index: 1; }
.product-front { width: 56%; right: 0;  bottom: 16%; transform: rotate(6deg);  z-index: 2; }
@keyframes cue { 0%,100% { transform: scaleX(.35); opacity: .5 } 50% { transform: scaleX(1); opacity: 1 } }

/* ---------------- prova social / marquee ---------------- */
.proof { padding: var(--space-3xl) 0 clamp(48px, 5vw, 80px); background: var(--cream); overflow: hidden; }
.proof > p {
  padding-inline: var(--pad-x); margin-bottom: var(--space-xl);
  font-size: .7rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; gap: var(--space-md); animation: slide 64s linear infinite; will-change: transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track img {
  flex: 0 0 auto; width: 158px; height: 74px; object-fit: contain;
  padding: 12px 18px; background: var(--paper); border-radius: var(--radius-sm);
  opacity: .92; transition: opacity .3s, transform .3s var(--ease);
}
.marquee-track img:hover { opacity: 1; transform: translateY(-3px); }
@keyframes slide { to { transform: translateX(calc(-50% - var(--space-md) / 2)); } }

/* ---------------- custo invisível (agora dentro da seção do sistema) ------- */
.pain-list { margin-top: var(--space-xl); }
.pain-list li {
  display: grid; grid-template-columns: 48px 1fr; align-items: baseline; gap: var(--space-lg);
  padding-block: var(--space-lg); border-top: 1px solid var(--hairline);
}
.pain-list li:last-child { border-bottom: 1px solid var(--hairline); }
.pain-list span { font-family: "Outfit", sans-serif; color: var(--lime); font-size: .95rem; }
.pain-list p { font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.35; }

/* ---------------- sistema ---------------- */
.system { background: var(--green-900); color: var(--on-dark); }
.system-head { max-width: 1000px; }
.system-head h2 { margin-top: var(--space-xl); color: var(--white); }
.system-lead { margin-top: var(--space-xl); max-width: 52ch; line-height: 1.7; }
/* Foto do sistema à esquerda e, à direita, os 5 problemas que ele resolve.
   Alinhado ao topo: a lista costuma ser mais alta que a foto. */
.system-split {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 4vw, 64px); align-items: start;
}
.system-fix h3 {
  margin-top: var(--space-md); font-family: "Outfit", sans-serif;
  font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 500; color: var(--white);
}
.system-media {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden; position: relative;
}
.system-media img { width: 100%; }
.system-media figcaption {
  position: absolute; right: var(--space-lg); bottom: var(--space-lg);
  padding: 6px 12px; border-radius: 999px;
  background: oklch(20% 0.055 167 / .72); backdrop-filter: blur(6px);
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-soft);
}
/* 3 colunas fixas: 6 itens dividem exato em 2 fileiras. Com auto-fit sobrava
   uma célula órfã e o gap virava um buraco visível. */
.steps {
  margin-top: clamp(48px, 6vw, 90px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline);
}
.steps li { padding: var(--space-2xl) var(--space-xl); background: var(--green-900); }
.steps span {
  display: grid; place-items: center; width: 40px; aspect-ratio: 1;
  border: 1px solid var(--lime); border-radius: 50%; color: var(--lime); font-size: .85rem;
}
.steps h3 { margin-top: var(--space-lg); font-family: "Outfit", sans-serif; font-size: 1.6rem; font-weight: 500; color: var(--white); }
.steps p { margin-top: var(--space-sm); font-size: .84rem; line-height: 1.55; color: var(--on-dark-soft); }

/* ---------------- consumo real ---------------- */
.usage { background: var(--cream); }

/* ---------------- antes x depois ---------------- */
.shift { background: var(--paper); }
.shift h2 { max-width: 14ch; }

/* ---------------- linha 5L ---------------- */
.lineup { background: var(--green-900); color: var(--on-dark); }
.lineup-head { max-width: 980px; }
.lineup-head h2 { margin-top: var(--space-xl); color: var(--white); }
.lineup-head > p:last-child { margin-top: var(--space-xl); max-width: 54ch; line-height: 1.7; color: var(--on-dark-soft); }
/* Abas por embalagem. Preferi abas a carrossel: numa pagina de captacao o
   comprador nao arrasta, e carrossel esconde produto. Aqui tudo esta a 1 clique. */
/* Flexbox e nao grid: 20 produtos nao dividem exato em 3 colunas (sobram 2
   na ultima fileira). Com `flex: 1 1` os cards da ultima fileira incompleta
   CRESCEM pra preencher a largura (2 viram metade, 1 vira inteiro) — some o
   bloco vazio, sem filler nem caso especial, e vale em qualquer breakpoint. */
/* Grid de verdade, e as divisorias sao BORDA DE CADA CARD.
   Duas coisas que a versao flex+`gap:1px`+fundo do container quebrava:
   1. Cada item flex arredondava a propria largura por conta. Em algumas
      larguras o gap de 1px sumia por subpixel e a linha desaparecia so em
      certas celulas — a grade parecia furada. Trilha de grid e calculada
      uma vez, entao as colunas alinham em qualquer largura.
   2. Com `flex: 1 1` os cards da ultima fileira incompleta CRESCIAM, e a
      divisoria deles caia fora das colunas de cima.
   A celula vaga que sobra na ultima fileira nao precisa de filler: sem
   borda ela some no fundo da secao, que e a mesma cor do card. */
.lineup-grid {
  margin-top: clamp(32px, 4vw, 56px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline);
}
.lineup-grid article {
  min-width: 0;
  border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: var(--space-xl); background: var(--green-900);
  display: flex; flex-direction: column; gap: var(--space-lg);
  position: relative; overflow: hidden; transition: background .4s var(--ease);
}
/* Altura fixa e base alinhada: como cada aba mistura galao, frasco e spray,
   e a altura que da ritmo a grade. A largura varia com a forma da embalagem. */
.prod-shot {
  height: 190px; margin: 20px auto 0; position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: center;
  transition: transform .55s var(--ease);
}
.prod-shot img {
  height: 100%; width: auto; object-fit: contain; display: block;
  position: relative; z-index: 1;
}
.lineup-grid article:hover .prod-shot { transform: translateY(-8px); }
.lineup-grid article div { position: relative; z-index: 2; margin-top: auto; }
.lineup-grid article p { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.lineup-grid article h3 { margin-top: 6px; font-family: "Outfit", sans-serif; font-size: 1.5rem; font-weight: 500; color: var(--white); }
/* Selos de tamanho: em quais litragens o produto e vendido (pedido Ivonete
   23/07). Especificidade p.prod-sizes p/ vencer o `.lineup-grid article p`
   generico (uppercase + tracking), que estragaria "500ml". */
.lineup-grid article p.prod-sizes {
  margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px;
  letter-spacing: 0; text-transform: none;
}
.prod-sizes span {
  font-size: .66rem; font-weight: 600; letter-spacing: .01em; line-height: 1;
  padding: 4px 9px; border-radius: 999px;
  background: color-mix(in oklch, var(--lime) 14%, transparent);
  color: var(--lime);
  border: 1px solid color-mix(in oklch, var(--lime) 32%, transparent);
}
/* descricao real de cada produto, vinda do e-commerce fifilimpeza.com */
.lineup-grid article p.prod-desc {
  margin-top: 10px; font-size: .84rem; line-height: 1.45; letter-spacing: 0;
  text-transform: none; color: var(--white); opacity: .72;
}

.areas { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-xl); }
.areas article { padding-top: var(--space-xl); border-top: 2px solid var(--lime); }
.areas h3 { font-family: "Outfit", sans-serif; font-size: 1.5rem; font-weight: 500; color: var(--white); }
.areas p { margin-top: var(--space-md); font-size: .86rem; line-height: 1.6; color: var(--on-dark-soft); }
.areas-tag { font-size: .72rem !important; color: var(--lime) !important; letter-spacing: .02em; }

/* ---------------- casos ---------------- */
.cases { background: var(--cream); }
.case { padding: clamp(28px, 3vw, 44px); background: var(--paper); border-radius: var(--radius-md); border: 1px solid var(--line); }
.case-co { font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--green-800); }
.case h3 { margin-top: var(--space-lg); font-family: "Outfit", sans-serif; font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 500; line-height: 1.15; }
.case dl { margin-top: var(--space-xl); }
.case dt {
  font-size: .62rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-700); margin-top: var(--space-lg);
}
.case dd { margin: 6px 0 0; font-size: .88rem; line-height: 1.6; color: var(--muted); }

/* ---------------- vantagens ---------------- */
.perks { background: var(--paper); }
.perks h2 { max-width: 16ch; }
.perks-grid { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-2xl); }
.perks-grid article { padding-top: var(--space-lg); border-top: 1px solid var(--line); }
.perks-grid span { font-family: "Outfit", sans-serif; font-size: .9rem; color: var(--green-700); }
.perks-grid h3 { margin-top: var(--space-md); font-family: "Outfit", sans-serif; font-size: 1.6rem; font-weight: 500; }
.perks-grid p { margin-top: var(--space-md); font-size: .88rem; line-height: 1.65; color: var(--muted); }

/* ---------------- esg ---------------- */
.esg { background: var(--green-950); color: var(--on-dark); display: grid; grid-template-columns: 1fr .9fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.esg h2 { margin-top: var(--space-xl); color: var(--white); }
.esg-copy > p:last-child { margin-top: var(--space-xl); max-width: 46ch; line-height: 1.7; color: var(--on-dark-soft); }
.ods { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.ods img { width: 100%; border-radius: var(--radius-sm); }

/* ---------------- formulário ---------------- */
.contact { background: var(--green-900); color: var(--on-dark); display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(48px, 8vw, 130px); }
.contact-copy h2 { margin-top: var(--space-xl); color: var(--white); font-size: clamp(2.4rem, 4vw, 4.4rem); }
.contact-copy > p:nth-of-type(2) { margin-top: var(--space-xl); max-width: 48ch; line-height: 1.7; }
.whatsapp-link { display: inline-flex; gap: var(--space-md); margin-top: var(--space-2xl); color: var(--lime); font-weight: 700; font-size: .86rem; }
.whatsapp-link span { transition: transform .3s var(--ease); }
.whatsapp-link:hover span { transform: translate(3px, -3px); }

.lead-form { padding: clamp(28px, 4vw, 56px); background: var(--paper); color: var(--ink); border-radius: var(--radius-lg); align-self: start; }
.field { display: grid; gap: var(--space-sm); }
.field + .field, .field-row, .field-row + .field { margin-top: var(--space-xl); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.field-row .field { margin: 0; }
.field label { font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .1em; }
.field input, .field select {
  min-height: 52px; padding: 0 var(--space-lg); border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--white); color: var(--ink);
  transition: border-color .2s;
}
.field input:hover, .field select:hover { border-color: var(--green-700); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: oklch(55% 0.19 27); }
.consent { display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); margin-top: var(--space-xl); align-items: start; }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--green-800); flex: 0 0 auto; }
.consent span { font-size: .76rem; line-height: 1.55; color: var(--muted); }
.consent a { text-decoration: underline; text-underline-offset: 2px; }
.lead-form .button { width: 100%; margin-top: var(--space-xl); }
.form-status { margin-top: var(--space-lg); font-size: .8rem; line-height: 1.5; }
.form-status:empty { margin: 0; }
.form-status[data-state="ok"] { padding: var(--space-lg); background: color-mix(in oklch, var(--lime) 30%, var(--paper)); border-radius: var(--radius-sm); }
.form-status[data-state="erro"] { color: oklch(48% 0.19 27); }

/* ---------------- footer ---------------- */
footer { padding: var(--space-4xl) var(--pad-x) var(--space-2xl); background: var(--green-950); color: var(--on-dark); }
.foot-top { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3xl); align-items: center; }
.foot-claim { font-family: "Outfit", sans-serif; font-size: 1.3rem; color: var(--lime); line-height: 1.15; }
.foot-links { display: flex; gap: var(--space-xl); font-size: .78rem; }
.foot-links a:hover { color: var(--lime); }
footer > small {
  display: block; margin-top: var(--space-3xl); padding-top: var(--space-lg);
  border-top: 1px solid var(--hairline); font-size: .7rem; color: var(--on-dark-soft);
}

/* ---------------- motion ---------------- */
/* Sem JS as entradas não podem ficar invisíveis — o estado inicial só é aplicado
   quando o script confirma que vai animar (html.js-anim). */
.js-anim .anim-up { opacity: 0; transform: translateY(26px); }
.js-anim .anim-mask { transform: translateY(105%); }

/* ---------------- responsivo ---------------- */
@media (max-width: 1100px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav, .site-header > .button { display: none; }
  .menu-button {
    width: 44px; height: 44px; justify-self: end; display: grid; place-content: center;
    gap: 6px; border: 0; background: transparent; cursor: pointer;
  }
  .menu-button > span:not(.sr-only) { width: 24px; height: 2px; background: var(--on-dark); }
  .mobile-menu {
    position: absolute; left: 0; right: 0; top: 78px; padding: var(--space-xl) var(--pad-x);
    background: var(--green-950); border-bottom: 1px solid var(--hairline);
  }
  .mobile-menu:not([hidden]) { display: grid; gap: var(--space-lg); }
  .hero { grid-template-columns: 1fr; }
  .hero-visual { min-height: 560px; max-width: 700px; width: 100%; margin-inline: auto; }
  /* empilhado o palco fica centralizado: sem zerar o transform os galoes
     vazavam pela esquerda da tela */
  .product-stage { width: min(64vw, 545px); transform: none; }
  .system-split { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .esg { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr; gap: var(--space-xl); }
}

@media (max-width: 760px) {
  .site-header { height: 66px; }
  .mobile-menu { top: 66px; }
  .section { padding-block: 72px; }
  .hero { min-height: auto; padding-top: 56px; background: var(--green-900); gap: 20px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  /* min-height 0: empilhado, o palco (quadrado, galões ancorados embaixo) já
     traz altura de sobra. Os 400px de antes centravam o palco e abriam um vão
     grande entre o CTA e os galões. */
  .hero-visual { min-height: 0; }
  .hero-visual::before { width: 90vw; }
  .product-stage { width: min(86vw, 400px); }
  .marquee-track img { width: 128px; height: 62px; }
  .steps { grid-template-columns: 1fr; }
  .lineup-grid { grid-template-columns: repeat(2, 1fr); }   /* 2 por fileira */
  .ods { grid-template-columns: repeat(3, 1fr); }
  .field-row { grid-template-columns: 1fr; }
  .foot-links { flex-direction: column; gap: var(--space-md); }
}

/* Faixa intermediária: o hero já empilhou (1 coluna) mas ainda sobra largura.
   Sem isto o galão fica pequeno demais no meio de um bloco vazio. */
@media (min-width: 761px) and (max-width: 1100px) {
  /* 2 por fileira e nao 3: com 3, o card fica com ~195px uteis e nomes longos
     ("Limpador de Uso Geral") quebram em quatro linhas. */
  .lineup-grid { grid-template-columns: repeat(2, 1fr); }
  .perks-grid { grid-template-columns: repeat(2, 1fr); }
  .ods { grid-template-columns: repeat(6, 1fr); }
}

/* Telas muito estreitas (360px e abaixo, iPhone SE / Android antigo) */
@media (max-width: 400px) {
  .brand-mark { height: 26px; }
  .brand-sub { display: none; }          /* o wordmark já identifica a marca */
  .lineup-grid { grid-template-columns: 1fr; }   /* 1 por fileira */
  .ods { grid-template-columns: repeat(2, 1fr); }
}

/* Monitor grande: o --pad-x já centraliza, aqui só evita que o hero fique
   com uma faixa de vazio enorme entre a copy e o galão. */
@media (min-width: 1700px) {
  .hero { gap: clamp(80px, 6vw, 140px); }
  .hero-visual { min-height: 680px; }
}

/* Tela baixa e larga (notebook 1366x768): o hero de 100svh empurra tudo
   pra fora da primeira dobra. */
@media (min-width: 1100px) and (max-height: 900px) {
  .hero { min-height: auto; padding-block: clamp(32px, 4.5vh, 64px); }
  .hero-lead { margin-top: var(--space-lg); }
  .hero-actions { margin-top: var(--space-lg); }
}

/* ---------------- movimento reduzido ----------------
   Dois níveis em vez de tudo-ou-nada. A WCAG 2.3.3 mira gatilho vestibular
   (parallax, giro, deslocamento grande), não fade de opacidade. Desligar tudo
   deixava a página completamente estática para quem tem animação off no SO,
   que no Windows é o padrão de muita máquina.
   O nível completo pode ser forçado com ?motion=full (útil para demo). */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-full) { scroll-behavior: auto; }
  html:not(.motion-full) .orbit { animation: none !important; }
  /* O marquee das logos continua girando mesmo com animação desligada no SO:
     decisão do cliente. É movimento linear, lento (64s por volta) e decorativo,
     longe do gatilho vestibular que a WCAG 2.3.3 mira (parallax, rotação,
     deslocamento brusco). A saída exigida pela 2.2.2 existe: passar o mouse
     pausa a faixa (.marquee:hover). */
  /* As entradas MANTÊM deslocamento, só que curto (14px em vez de 26px).
     Deslocamento pequeno e pontual não é gatilho vestibular; o que a WCAG mira
     é parallax, rotação contínua e scroll sequestrado, e esses ficam desligados.
     Zerar o transform deixava a página morta para quem tem animação off no SO. */
  html:not(.motion-full).js-anim .anim-up { transform: translateY(14px); }
  html:not(.motion-full).js-anim .anim-mask { transform: none; opacity: 0; }
}

/* ---------------- modal da demonstração ---------------- */
/* Vídeo é vertical (540x960). O limite é a ALTURA da janela, não a largura:
   `height: min(...)` + `aspect-ratio` deixa o modal encolher junto com a
   viewport sem nunca cortar o vídeo nem estourar a tela. */
.demo-modal {
  padding: 0; border: 0; background: transparent; overflow: visible;
  max-width: none; max-height: none;
  height: min(82vh, 960px); aspect-ratio: 9 / 16; width: auto;
}
.demo-modal::backdrop { background: oklch(15% 0.03 165 / .82); backdrop-filter: blur(6px); }
.demo-modal video {
  display: block; width: 100%; height: 100%;
  border-radius: var(--radius-md); background: #000;
}
.demo-close {
  position: absolute; top: -14px; right: -14px; z-index: 2;
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--lime); color: var(--green-950);
  font-size: 1.5rem; line-height: 1;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.demo-close:hover { background: var(--white); transform: scale(1.06); }

@media (max-width: 640px) {
  /* Na tela pequena o X sai da borda e vira overlay no canto do vídeo,
     senão ele fica cortado fora da viewport. */
  .demo-modal { height: min(78vh, 960px); }
  .demo-close { top: 8px; right: 8px; }
}