/* ============================================================
   Recicleplas — Landing Page v1
   CSS puro, sem framework. Tokens em :root, seções em ordem do
   estrutura-lp.md. Todo movimento respeita prefers-reduced-motion
   (ver .js-anim mais abaixo).
   ============================================================ */

/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ---------- Tokens ---------- */
:root {
  /* Verde — cor de marca (tradição + energia) */
  --verde-900: #0B3D2A;
  --verde-800: #0E4A33;
  --verde-700: #146C43;
  --verde-500: #1E8E5A;
  --verde-200: #BFE3CE;
  --verde-100: #E7F4EC;

  /* Neutros industriais */
  --grafite-900: #171B1A;
  --grafite-700: #34403C;
  --cinza-600: #5B6B66;
  --cinza-300: #C7D1CC;
  --cinza-100: #E7EBE8;
  --bg: #F6F8F6;
  --white: #FFFFFF;

  /* Acento de conversão (laranja queimado — WCAG AA em branco: 5.18:1) */
  --cta: #C2410C;
  --cta-hover: #9E3409;
  --cta-tint: #FBEAE0;

  /* Verde do WhatsApp — só para botões que abrem o WhatsApp de fato
     (o verde oficial #25D366 não passa em contraste AA com texto branco:
     ~2:1. Esta variante mais escura mantém o reconhecimento da marca
     com ~5:1 de contraste). */
  --whatsapp: #128047;
  --whatsapp-hover: #0D6B3A;

  /* Tipografia — Plus Jakarta Sans (corpo/técnico) + Lora (institucional/história) */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Lora', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  --shadow-sm: 0 1px 3px rgba(23, 27, 26, 0.08);
  --shadow-md: 0 8px 24px rgba(23, 27, 26, 0.10);
  --shadow-lg: 0 20px 48px rgba(11, 61, 42, 0.16);

  --wrap: 1180px;
  --dur-fast: 150ms;
  --dur-med: 300ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */
/* Escala geral do site: reduz ~12% a partir daqui, já que quase todo
   espaçamento/tipografia do arquivo usa rem (proporcional à raiz).
   Baseline final: 14px (era 16px). */
html { scroll-behavior: smooth; color-scheme: light; font-size: 87.5%; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--grafite-900);
  line-height: 1.55;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(11, 61, 42, 0.12);
}
a, button, input, select, textarea, .app-card, .product-card { touch-action: manipulation; }

/* Âncoras do menu não devem ficar escondidas atrás do header sticky */
section[id] { scroll-margin-top: 84px; }
h1, h2, h3, h4 { font-weight: 800; line-height: 1.15; color: var(--verde-900); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); }
p { color: var(--grafite-700); }
.lede { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); color: var(--grafite-700); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }

.tabular { font-variant-numeric: tabular-nums; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--verde-900); color: var(--white); padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--verde-500);
  outline-offset: 2px;
}

/* ---------- Barra de progresso de leitura ---------- */
.progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--cta); z-index: 300; transition: width 80ms linear;
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-weight: 700; font-size: 0.98rem;
  padding: 0.9rem 1.5rem; border-radius: 999px;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--cta); color: var(--white);
  box-shadow: var(--shadow-md); --pulse-glow: rgba(194, 65, 12, 0.35);
}
.btn-primary:hover { background: var(--cta-hover); }
/* Botões que abrem o WhatsApp de verdade (não navegação interna) usam o
   verde da marca, não o laranja genérico de CTA — evita confundir "isso
   vai abrir o WhatsApp" com o resto dos botões do site. */
.btn-whatsapp {
  background: var(--whatsapp); color: var(--white);
  box-shadow: var(--shadow-md); --pulse-glow: rgba(18, 128, 71, 0.35);
}
.btn-whatsapp:hover { background: var(--whatsapp-hover); }
.btn-ghost {
  background: transparent; color: var(--verde-900); border-color: var(--cinza-300);
}
.btn-ghost:hover { border-color: var(--verde-700); background: var(--verde-100); }
.btn-on-dark { color: var(--white); border-color: rgba(255,255,255,0.35); }
.btn-on-dark:hover { background: rgba(255,255,255,0.1); }
.btn-small { padding: 0.6rem 1.1rem; font-size: 0.88rem; }
.btn-large { padding: 1.1rem 1.9rem; font-size: 1.05rem; }

/* Pulso sutil e contínuo — a cor do brilho segue --pulse-glow de cada variante */
.js-anim .btn-pulse { animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--pulse-glow, rgba(194, 65, 12, 0.35)), var(--shadow-md); }
  50% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0), var(--shadow-md); }
}

.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--verde-700); background: var(--verde-100);
  padding: 0.4rem 0.85rem; border-radius: 999px;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  /* fixed (não sticky) de propósito: fica fora do wrapper que o
     ScrollSmoother transforma via translateY. #smoothContent recebe um
     padding-top igual à altura real do header (js/animations.js mede e
     seta --header-h no load). */
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(246, 248, 246, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cinza-100);
}
#smoothContent { padding-top: var(--header-h, 70px); }
#smoothWrapper { overflow: hidden; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 0.85rem; gap: 1rem; }
.brand { display: flex; align-items: center; gap: 0.85rem; font-weight: 800; color: var(--verde-900); }
.brand-mark {
  width: 58px; height: 58px; border-radius: 14px; flex-shrink: 0;
  object-fit: cover; mix-blend-mode: multiply; /* funde o fundo branco do logo ao header claro */
}
/* No rodapé escuro, mix-blend-mode não resolve o fundo branco do logo — usa um selo branco atrás */
.brand-mark-badge {
  display: inline-flex; width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: var(--white); padding: 3px; box-shadow: var(--shadow-sm); overflow: hidden;
}
.brand-mark-badge img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.brand-name { font-size: 1.65rem; line-height: 1.1; }
.brand-name small { display: block; font-weight: 600; font-size: 0.85rem; color: var(--cinza-600); letter-spacing: 0.02em; }

/* Rodapé: nome da marca com bastante destaque, maior que no header.
   Logo em versão branca (assets/logo-white.png), sem o selo/fundo do header,
   dimensionado em em a partir do tamanho do próprio nome — cresce junto se o
   font-size mudar. */
.footer-brand { gap: 0.85rem; }
.footer-brand-mark { display: inline-flex; flex-shrink: 0; font-size: 2rem; }
.footer-brand-mark img { display: block; height: 1.3em; width: auto; }
.footer-brand-name { font-size: 2rem; font-weight: 800; letter-spacing: -0.01em; color: var(--white); }
.footer-brand-name small { font-size: 0.78rem; font-weight: 600; color: var(--cinza-300); letter-spacing: 0.02em; margin-top: 0.2rem; }
.footer-tagline { color: var(--cinza-300); }

.nav-toggle-btn {
  display: none; background: none; border: 1.5px solid var(--cinza-300); border-radius: var(--radius-sm);
  width: 42px; height: 42px; align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle-btn svg { width: 20px; height: 20px; }

.main-nav { display: flex; align-items: center; gap: 1.6rem; }
.main-nav a:not(.btn) {
  font-size: 0.92rem; font-weight: 600; color: var(--grafite-700);
  padding-block: 0.3rem; border-bottom: 2px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.main-nav a:not(.btn):hover { color: var(--verde-800); border-color: var(--verde-500); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; overflow: clip; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem); }
.hero-bg {
  position: absolute; inset: 0; z-index: -1;
  /* Ecoa as cores dos pellets na margem visível ao redor da colagem de
     fotos (a colagem em si é opaca, então o gradiente precisa "vazar"
     nas bordas — acima, à direita e abaixo dela — não ficar embaixo). */
  background:
    radial-gradient(50% 55% at 100% 30%, rgba(39, 74, 110, 0.18) 0%, transparent 72%),
    radial-gradient(48% 50% at 78% 105%, rgba(91, 107, 102, 0.16) 0%, transparent 72%),
    radial-gradient(60% 55% at 85% 8%, var(--verde-100) 0%, transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.hero-copy h1 { font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem); }
.hero-copy h1 .accent { color: var(--cta); }
/* Largura travada via JS (js/animations.js mede as duas palavras no
   font-size real e trava no maior) — troca de texto sem empurrar o
   resto da linha ("samba" do container). Efeito "rolete": cada letra é
   uma célula de 1em de altura com a letra antiga em cima e a nova
   embaixo; a célula inteira sobe 1em pra revelar a de baixo, como um
   painel de placar rodando. */
.word-swap {
  display: inline-block; overflow: hidden; vertical-align: bottom; white-space: nowrap;
  /* vertical-align:bottom ancora no fundo da LINE BOX do h1, não na
     baseline do texto — como o h1 tem line-height:1.15 (não 1), sobra
     um "leading" extra dividido meio a meio acima/abaixo da linha, e
     alinhar pelo fundo da line box empurra a palavra pra baixo por
     essa metade: (1.15 - 1) / 2 = 0.075em. Corrige sem mexer no
     vertical-align (que precisa continuar em "bottom" pra não voltar
     o salto entre células/texto puro). Em `em` pra acompanhar o
     font-size responsivo (clamp) do h1. */
  transform: translateY(-0.075em);
}
/* Mesma caixa (altura/line-height/alinhamento) das células animadas,
   só que também no estado "parado" (texto puro, sem células) — sem
   isso o texto puro herdava o line-height do h1 e alinhava pela
   baseline, uma geometria diferente da das células (height:1em +
   vertical-align:bottom). Ao trocar innerHTML (células) por
   textContent no fim do roll, essa diferença de geometria é o que
   fazia a palavra "pular" pra cima de repente. */
.ws-visual { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: bottom; }
.ws-cell { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: bottom; }
.ws-reel { display: inline-block; vertical-align: top; }
.ws-row { display: block; height: 1em; line-height: 1; white-space: pre; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.hero-copy .lede { margin-top: 1.1rem; max-width: 46ch; }
/* Estado inicial "escondido" pro SplitText animar (ver js/animations.js).
   visibility (não display/opacity) no h1 evita flash de texto não-splitado
   antes do GSAP rodar, sem tirar o espaço reservado no layout. */
.js-anim #heroHeadline { visibility: hidden; }
.js-anim #heroLede, .js-anim #heroCtas, .js-anim .hero-media { opacity: 0; }
.char { display: inline-block; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.3rem; }
.hero-tag {
  font-size: 0.82rem; font-weight: 600; color: var(--verde-800);
  background: var(--white); border: 1px solid var(--cinza-100); border-radius: 999px;
  padding: 0.4rem 0.8rem; box-shadow: var(--shadow-sm);
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.8rem; }

.hero-media { position: relative; }

/* Colagem de fotos reais dos pellets (preto/cinza/azul) */
.pellet-collage {
  display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.6rem;
  aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
}
.pellet-collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pellet-collage .cell-main { grid-row: 1 / 3; position: relative; }
.pellet-collage .cell-main .tag-todo-replace { display: none; }
.pellet-collage figcaption {
  position: absolute; left: 12px; top: 12px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--white); background: rgba(11, 61, 42, 0.65); padding: 0.3rem 0.65rem; border-radius: 999px; backdrop-filter: blur(3px);
}

.image-slot {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--verde-800), var(--grafite-900));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem;
  color: rgba(255,255,255,0.75); text-align: center; padding: 2rem;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.image-slot::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 14px 14px; opacity: 0.5;
}
.image-slot svg { width: 40px; height: 40px; opacity: 0.9; }
.image-slot span { font-size: 0.85rem; max-width: 22ch; position: relative; }
.image-slot .tag-todo {
  position: absolute; top: 12px; left: 12px; font-size: 0.68rem; font-weight: 700;
  background: rgba(255,255,255,0.14); color: var(--white); padding: 0.25rem 0.55rem; border-radius: 999px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.hero-media-badge {
  position: absolute; bottom: -1.1rem; left: 1.5rem; right: 1.5rem;
  background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: 0.85rem 1.1rem; display: flex; align-items: center; gap: 0.7rem; font-size: 0.85rem; font-weight: 600;
}
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--verde-500); flex-shrink: 0; }
.js-anim .pulse-dot { animation: dotpulse 1.8s ease-in-out infinite; }
@keyframes dotpulse { 0%,100%{ opacity: 1; } 50%{ opacity: 0.35; } }

/* ============================================================
   BARRA DE CONFIANÇA
   ============================================================ */
.trust-bar { background: var(--verde-900); color: var(--white); padding-block: 1.8rem; }
.trust-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
.trust-item {
  display: flex; align-items: center; gap: 0.8rem;
  opacity: 0; transform: translateY(16px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.js-anim .trust-item.is-visible { opacity: 1; transform: translateY(0); }
html:not(.js-anim) .trust-item { opacity: 1; transform: none; }
.trust-item svg { width: 23px; height: 23px; flex-shrink: 0; color: var(--verde-200); }
.trust-item strong { display: block; font-size: 1.35rem; font-weight: 800; }
.trust-item span { display: block; font-size: 0.82rem; color: var(--verde-200); }

/* stroke-draw nos ícones da barra de confiança */
.icon-draw path, .icon-draw circle, .icon-draw rect, .icon-draw polyline {
  stroke-dasharray: 60; stroke-dashoffset: 60;
}
.js-anim .trust-item.is-visible .icon-draw path,
.js-anim .trust-item.is-visible .icon-draw circle,
.js-anim .trust-item.is-visible .icon-draw rect,
.js-anim .trust-item.is-visible .icon-draw polyline {
  animation: draw 900ms var(--ease) forwards;
}
html:not(.js-anim) .icon-draw path, html:not(.js-anim) .icon-draw circle,
html:not(.js-anim) .icon-draw rect, html:not(.js-anim) .icon-draw polyline { stroke-dashoffset: 0; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ============================================================
   SEÇÃO — genéricos de espaçamento e revelação
   ============================================================ */
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section-tight { padding-block: clamp(2.5rem, 6vw, 4rem); }
.section-alt { background: var(--white); }
.section-dark { background: var(--grafite-900); color: var(--cinza-100); }
.section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark p { color: var(--cinza-300); }

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 5vw, 3rem); }
.section-head h2 { margin-top: 0.6rem; }
.section-desc { margin-top: 0.9rem; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.js-anim .reveal.is-visible { opacity: 1; transform: none; }
html:not(.js-anim) .reveal { opacity: 1; transform: none; }
/* stagger: delay progressivo via custom property --d definida inline */
.reveal { transition-delay: var(--d, 0ms); }

/* ============================================================
   PRODUTOS
   ============================================================ */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.product-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 1.7rem;
  border: 1px solid var(--cinza-100); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.product-card:hover, .product-card:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.swatch {
  display: inline-block; width: 56px; height: 56px; border-radius: 50%; position: relative; margin-bottom: 1.1rem;
  box-shadow: var(--shadow-sm); overflow: visible;
}
.swatch img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
  box-shadow: inset 0 -6px 10px rgba(0,0,0,0.25), inset 0 4px 8px rgba(255,255,255,0.18);
}
.swatch-detail {
  position: absolute; right: -8px; bottom: -8px; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--white); box-shadow: var(--shadow-sm); object-fit: cover;
}
.product-card h3 { margin-bottom: 0.35rem; }
/* Área da foto grande, depois da mesma linha tracejada que separava
   as specs (mesmo border-top/espaçamento de .spec-mini, só troca o
   que vem abaixo). */
.product-photo { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--cinza-300); }
/* height:auto explícito é obrigatório aqui — a <img> carrega os
   atributos HTML width/height (640x480) do padrão do swatch; sem
   height:auto no CSS, esse height="480" do HTML "vence" por os dois
   lados (largura e altura) ficarem definidos, e aspect-ratio é
   ignorado nesse caso (só entra em ação quando um dos dois está em
   auto). Era por isso que mudar o aspect-ratio não tinha efeito
   nenhum na tela. */
.product-photo img { width: 100%; height: auto; aspect-ratio: 5 / 1; object-fit: cover; border-radius: var(--radius-md); display: block; }
.spec-mini { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--cinza-300); display: grid; gap: 0.45rem; }
.spec-mini div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.86rem; }
.spec-mini dt { color: var(--cinza-600); font-weight: 600; }
.spec-mini dd { color: var(--grafite-900); font-weight: 700; text-align: right; }
.spec-extra {
  max-height: 0; overflow: hidden; opacity: 0; transition: max-height var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease), margin var(--dur-med) var(--ease);
  font-size: 0.85rem; color: var(--verde-700);
}
.product-card:hover .spec-extra, .product-card:focus-within .spec-extra { max-height: 60px; opacity: 1; margin-top: 0.6rem; }

.addon-banner {
  margin-top: 1.5rem; display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; justify-content: space-between;
  background: var(--verde-100); border-radius: var(--radius-md); padding: 1.3rem 1.6rem;
}
.addon-banner p { color: var(--verde-900); font-weight: 600; margin: 0; }
.note-line { margin-top: 1.2rem; font-size: 0.85rem; color: var(--cinza-600); display: flex; align-items: center; gap: 0.5rem; }
.note-line svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--verde-700); }

/* ============================================================
   APLICAÇÕES
   ============================================================ */
.apps-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.app-card {
  background: var(--white); border: 1px solid var(--cinza-100); border-radius: var(--radius-md);
  padding: 1.4rem 1rem; text-align: center; transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.apps-grid:hover .app-card:not(:hover) { opacity: 0.45; }
.app-card:hover { transform: translateY(-4px); }
.app-card svg { width: 28px; height: 28px; margin-inline: auto; color: var(--verde-700); margin-bottom: 0.7rem; }
.app-card span { font-size: 0.85rem; font-weight: 600; color: var(--grafite-700); }

/* ============================================================
   DIFERENCIAIS — layout assimétrico
   ============================================================ */
.diff-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; }
.diff-hero-card {
  grid-row: span 2; background: linear-gradient(165deg, var(--verde-800), var(--verde-900));
  border-radius: var(--radius-lg); padding: 2rem; color: var(--white); position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px;
}
.diff-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Gradiente por cima da foto — mais escuro embaixo, onde fica o texto
   branco (justify-content: flex-end no .diff-hero-card), garantindo
   contraste sem esconder a foto no topo do card. */
.diff-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,61,42,0.15) 0%, rgba(6,26,18,0.82) 100%); }
.diff-hero-card .diff-content { position: relative; z-index: 1; }
.diff-hero-card .eyebrow-pill { background: rgba(255,255,255,0.14); color: var(--white); }
.diff-hero-card h3 { color: var(--white); margin-top: 0.7rem; font-size: 1.5rem; }
.diff-hero-card p { color: var(--verde-200); margin-top: 0.5rem; max-width: 40ch; }

.diff-mini { background: var(--white); border-radius: var(--radius-md); padding: 1.4rem; border: 1px solid var(--cinza-100); }
.diff-mini svg { width: 23px; height: 23px; color: var(--verde-700); margin-bottom: 0.7rem; }
.diff-mini h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.diff-mini p { font-size: 0.9rem; }

/* trajeto do caminhão (scrollytelling leve) */
.route-track { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--cinza-300) 0 8px, transparent 8px 16px); margin: 2.4rem 0 0.5rem; }
.route-truck { position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 30px; height: 30px; color: var(--cta); transition: left 100ms linear; }

/* ============================================================
   ESPECIFICAÇÕES TÉCNICAS
   ============================================================ */
/* Grid de cards de capacidades/garantias — cada card é um fato binário
   (tem ou não tem), de propósito: nada aqui compete em "tamanho" com o
   card vizinho, então não há leitura possível de "essa propriedade é
   fraca" (era o problema da versão anterior, com barras de magnitude
   para valores de datasheet genérico do setor, não medidos no material
   real da Recicleplas). Virou grid de cards (em vez de linha inteira
   ocupando a largura toda) porque, com só 4 fatos e sem dado numérico
   grande pra ancorar a linha, a versão em lista ficava com muito vazio
   entre o rótulo e o valor — o card contém esse espaço. */
.capability-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.capability-card {
  background: var(--white); border: 1px solid var(--cinza-100); border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: 0.9rem;
  box-shadow: var(--shadow-sm); transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.capability-card:hover, .capability-card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.capability-icon {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--verde-100); color: var(--verde-700);
  display: flex; align-items: center; justify-content: center;
}
.capability-icon svg { width: 20px; height: 20px; }
.capability-label { font-weight: 700; font-size: 0.94rem; color: var(--grafite-900); }
.capability-value { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }
.cap-badge {
  font-size: 0.82rem; font-weight: 600; color: var(--verde-800);
  background: var(--verde-100); border: 1px solid var(--cinza-100); border-radius: 999px;
  padding: 0.35rem 0.8rem;
}
.cap-value-text { font-weight: 700; color: var(--verde-800); }

/* ============================================================
   SUSTENTABILIDADE
   ============================================================ */
.sustain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }

/* Mini-dashboard — substitui o ícone decorativo solto por dados reais do
   levantamento de mercado (produção nacional de PCR, concentração no
   Sudeste, meta do Decreto do Plástico). Marca sequencial de um hue só
   (verde, claro→escuro), sem necessidade de legenda por ser série única. */
.sustain-dash { display: grid; gap: 1.3rem; max-width: 340px; margin-inline: auto; }
.dash-donut-wrap { position: relative; width: 172px; height: 172px; margin-inline: auto; }
.dash-donut { width: 100%; height: 100%; transform: rotate(-90deg); }
.dash-donut-track { fill: none; stroke: var(--cinza-100); stroke-width: 13; }
.dash-donut-fill { fill: none; stroke: var(--verde-700); stroke-width: 13; stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ease); }
.dash-donut-label {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 1.9rem;
}
.dash-donut-label strong { font-size: 1.7rem; font-weight: 800; color: var(--verde-900); line-height: 1; }
.dash-donut-label span { font-size: 0.72rem; color: var(--cinza-600); margin-top: 0.35rem; line-height: 1.35; }

.dash-bars { background: var(--white); border: 1px solid var(--cinza-100); border-radius: var(--radius-md); padding: 1rem 1.2rem; box-shadow: var(--shadow-sm); }
.dash-bars-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.78rem; font-weight: 700; color: var(--grafite-700); margin-bottom: 0.85rem; }
.dash-bars-delta { color: var(--verde-700); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.dash-bar-row { display: grid; grid-template-columns: 32px 1fr 62px; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.dash-bar-row:last-child { margin-bottom: 0; }
.dash-bar-year { font-size: 0.74rem; color: var(--cinza-600); font-weight: 600; }
.dash-bar-track { height: 8px; background: var(--cinza-100); border-radius: 999px; overflow: hidden; }
.dash-bar-fill { height: 100%; width: 0%; border-radius: 999px; background: var(--verde-200); transition: width 1s var(--ease); }
.dash-bar-fill-current { background: var(--verde-700); }
.js-anim .sustain-dash.is-visible .dash-bar-fill { width: var(--bar-target, 0%); }
html:not(.js-anim) .dash-bar-fill { width: var(--bar-target, 0%); }
.dash-bar-value { font-size: 0.74rem; font-weight: 700; color: var(--grafite-900); text-align: right; font-variant-numeric: tabular-nums; }

.dash-note {
  font-size: 0.78rem; font-weight: 600; color: var(--verde-900); background: var(--verde-100);
  border-radius: var(--radius-md); padding: 0.7rem 1rem; text-align: center; line-height: 1.4;
}

.sustain-facts { display: grid; gap: 1.1rem; margin-top: 1.6rem; }
.sustain-fact { display: flex; gap: 0.9rem; align-items: flex-start; }
.sustain-fact svg { width: 22px; height: 22px; color: var(--verde-700); flex-shrink: 0; margin-top: 0.15rem; }
.sustain-fact strong { color: var(--verde-900); }

/* ============================================================
   HISTÓRIA — tipografia serifada, timeline vertical
   ============================================================ */
.history-section { background: var(--white); }
.history-section h2, .history-lead { font-family: var(--font-serif); }
.history-lead { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); color: var(--verde-900); font-style: italic; max-width: 60ch; margin-top: 0.9rem; }

/* Grid da seção "Como funciona o pedido" — timeline + foto ao lado,
   pra ocupar o espaço em branco que sobrava à direita da timeline em
   telas largas (o texto dos passos é bem mais estreito que o .wrap). */
.como-funciona-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
/* .timeline normalmente tem margin-top:3rem pra abrir espaço embaixo
   do .section-head quando ele é o único conteúdo da seção (caso de
   "Nossa história"). Aqui o .section-head já fica FORA do grid, então
   essa margem só empurrava a timeline pra baixo da foto ao lado —
   dessincronizando o topo das duas colunas ("torto"). Zera só nesse
   contexto. */
.como-funciona-grid .timeline { margin-top: 0; }
/* Mesmo tratamento do card de foto de "Frota própria" em Diferenciais
   (.diff-hero-card/.diff-hero-overlay): filtro verde-escuro por cima
   da foto + tag/título/texto ancorados embaixo, pra manter as duas
   fotos "com legenda" do site consistentes entre si. */
.como-funciona-photo {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.6rem;
}
.como-funciona-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.como-funciona-photo-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,61,42,0.15) 0%, rgba(6,26,18,0.82) 100%); }
.como-funciona-photo-content { position: relative; z-index: 1; }
.como-funciona-photo .eyebrow-pill { background: rgba(255,255,255,0.14); color: var(--white); }
.como-funciona-photo h3 { color: var(--white); margin-top: 0.7rem; font-size: 1.2rem; }
.como-funciona-photo p { color: var(--verde-200); margin-top: 0.5rem; }

.timeline { position: relative; margin-top: 3rem; padding-left: 2.4rem; }
.timeline-line {
  position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--cinza-100);
}
.timeline-line-fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 0%; background: var(--verde-600, var(--verde-700));
  transition: height 700ms var(--ease);
}
.timeline-item { position: relative; padding-bottom: 2.6rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute; left: -2.4rem; top: 0.15rem; width: 20px; height: 20px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--cinza-300); transition: border-color 400ms var(--ease), background 400ms var(--ease);
}
.js-anim .timeline-item.is-visible .timeline-dot { border-color: var(--verde-700); background: var(--verde-700); }
html:not(.js-anim) .timeline-dot { border-color: var(--verde-700); background: var(--verde-700); }
.timeline-year { font-family: var(--font-serif); font-weight: 600; color: var(--cta); font-size: 0.95rem; }
.timeline-item h3 { margin-top: 0.3rem; font-family: var(--font-serif); }
.timeline-item p { margin-top: 0.4rem; max-width: 58ch; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { display: grid; gap: 0.9rem; max-width: 780px; }
.faq-item { background: var(--white); border: 1px solid var(--cinza-100); border-radius: var(--radius-md); overflow: hidden; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: none; border: none; text-align: left; padding: 1.15rem 1.4rem; cursor: pointer; font-weight: 700; font-size: 1rem;
  transition: background var(--dur-fast) var(--ease);
}
.faq-icon { width: 22px; height: 22px; flex-shrink: 0; position: relative; }
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; background: var(--verde-800); border-radius: 2px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.faq-icon::before { width: 14px; height: 2px; }
.faq-icon::after { width: 2px; height: 14px; transition: transform var(--dur-med) var(--ease); }
.faq-q:hover { background: var(--verde-100); }
.faq-q[aria-expanded="true"] .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-med) var(--ease); }
.faq-q[aria-expanded="true"] + .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner p { padding: 0 1.4rem 1.3rem; }

/* ============================================================
   CTA FINAL + FOOTER
   ============================================================ */
.cta-final { background: var(--verde-900); color: var(--white); text-align: center; }
.cta-final h2 { color: var(--white); }
.cta-final p { color: var(--verde-200); margin-top: 0.8rem; }
.cta-final .hero-ctas { justify-content: center; margin-top: 1.8rem; margin-bottom: 2.8rem; }

.site-footer { background: var(--grafite-900); color: var(--cinza-300); padding-block: 3rem 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; }
.footer-grid h4 { color: var(--white); font-size: 0.95rem; margin-bottom: 0.9rem; }
.footer-grid p, .footer-grid li { font-size: 0.88rem; }
.footer-grid ul { display: grid; gap: 0.55rem; }
.footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.8rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; color: var(--cinza-600); }

/* ---------- WhatsApp flutuante ---------- */
.wa-float {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 250;
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--whatsapp); color: var(--white); padding: 0.85rem 1.15rem; border-radius: 999px;
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(16px) scale(0.9); pointer-events: none;
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease), background var(--dur-fast) var(--ease);
}
.wa-float.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.wa-float:hover { background: var(--whatsapp-hover); }
.wa-float svg { width: 22px; height: 22px; }
.wa-float span { font-weight: 700; font-size: 0.9rem; }

/* ---------- Formulário ---------- */
.form-card { background: var(--white); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.4rem); box-shadow: var(--shadow-md); color: var(--grafite-900); text-align: left; max-width: 640px; margin-inline: auto; }
.form-card h3 { font-size: 1.2rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.3rem; }
.form-field { display: grid; gap: 0.4rem; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 0.85rem; font-weight: 700; color: var(--grafite-700); }
.form-field label .opt { font-weight: 500; color: var(--cinza-600); }
.form-field input, .form-field select, .form-field textarea {
  border: 1.5px solid var(--cinza-300); border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; font-size: 0.95rem;
  background-color: var(--white); color: var(--grafite-900); transition: border-color var(--dur-fast);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--verde-700); }
.form-card .btn { margin-top: 1.4rem; width: 100%; justify-content: center; }
.form-note { margin-top: 0.9rem; font-size: 0.8rem; color: var(--grafite-700); text-align: center; }
.cta-final .form-note { color: var(--grafite-700); }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 980px) {
  .main-nav { position: fixed; top: var(--header-h, 66px); right: 0; left: 0; height: calc(100vh - var(--header-h, 66px)); height: calc(100dvh - var(--header-h, 66px));
    z-index: 150; background: var(--white); flex-direction: column; align-items: stretch;
    padding: 1.5rem; gap: 0.2rem; transform: translateX(100%); transition: transform var(--dur-med) var(--ease);
    overflow-y: auto; overscroll-behavior: contain; }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav a:not(.btn) { padding: 0.9rem 0.3rem; border-bottom: 1px solid var(--cinza-100); }
  .main-nav .btn { margin-top: 1rem; justify-content: center; }
  .nav-toggle-btn { display: inline-flex; }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; max-width: 420px; margin-inline: auto; width: 100%; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: 1fr; }
  .apps-grid { grid-template-columns: repeat(3, 1fr); }
  .diff-grid { grid-template-columns: 1fr; }
  .diff-hero-card { grid-row: auto; }
  .como-funciona-grid { grid-template-columns: 1fr; }
  .como-funciona-photo { order: -1; max-width: 360px; margin-inline: auto; width: 100%; }
  .sustain-grid { grid-template-columns: 1fr; }
  .sustain-dash { max-width: 300px; margin-bottom: 1.5rem; }
  .dash-donut-wrap { width: 150px; height: 150px; }
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 640px) {
  .hero-copy h1 { font-size: clamp(1.85rem, 1.5rem + 3vw, 2.25rem); }
  .apps-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .capability-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
}

/* ---------- Acessibilidade de movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}