/* ==========================================================================
   Indparts + Puma Compressores — Secadores DPS
   page.css — só o que NÃO existe em components.css/utilities.css.
   Reaproveita o Digital Design System 2026 (Nova Identidade 2026/css/) —
   ver <link> em index.html. Nada de token novo, nada de cor solta.
   ========================================================================== */

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ background:var(--color-bg); }

/* Menu mobile — hamburger + painel (.mobile-menu, já vendorizado no Design
   System com JS pronto em design-system.js: abrir/fechar, focus trap, Escape).
   Só faltava o CSS específico do botão de rodapé do painel e o
   header__hamburger some no desktop (nav completo já cobre isso). */
.site-header__cta{ display:none; }
@media (min-width:1024px){ .site-header__cta{ display:flex; } }
@media (max-width:1023px){ .site-header__inner{ gap:14px; } }

/* BUG REAL corrigido: esta página usa a classe .wrap (padrão antigo da
   landing-puma) em vez de .u-container (padrão do Design System novo) —
   .wrap nunca tinha sido definida em lugar nenhum do CSS vendorizado, então
   todo o conteúdo ficava sem max-width e sem respiro lateral (sangrando até
   a borda da tela). Definindo aqui com os mesmos tokens de container do
   Design System, em vez de trocar 11 ocorrências de classe no HTML. */
.wrap{ max-width:var(--container-max-lg); margin-inline:auto; padding-inline:var(--container-padding-inline); }

.section{ padding:var(--space-9) 0; border-top:var(--border-width) solid var(--color-border); }
.section:first-of-type{ border-top:none; }
main > .section:nth-of-type(even){ background:var(--color-surface); }
h2.h-sec{ font-size:clamp(30px,3.6vw,40px); font-weight:700; letter-spacing:-.03em; line-height:1.1; margin-bottom:16px; }

/* Nav do header (desktop) — âncoras pras seções da página. */
.site-header__nav a{ color:var(--color-text-muted); font-size:13px; font-weight:var(--fw-semibold); transition:color var(--duration-base) var(--ease-standard); }
.site-header__nav a:hover{ color:var(--color-primary); }

/* BUG REAL corrigido (histórico): o botão do header não encolhia nem quebrava
   linha (white-space:nowrap herdado de .btn) — em telas estreitas ele
   estourava a viewport e criava scroll horizontal na página inteira
   (confirmado via scrollWidth > innerWidth). Resolvido de vez escondendo o
   botão abaixo de 1024px (mesmo breakpoint do hamburguer) — o CTA mobile
   agora mora dentro do painel do menu, não precisa mais encolher texto. */
h3.h-sub{ font-size:var(--text-h4); font-weight:var(--fw-semibold); margin-bottom:10px; }

/* Como funciona — mascote Técnico Indparts ao lado do texto explicativo. */
.how-grid{ display:grid; grid-template-columns:1fr; gap:24px; align-items:end; }
@media (min-width:760px){ .how-grid{ grid-template-columns:1fr minmax(0,200px); gap:32px; } }
.how-grid__mascot{ display:flex; justify-content:center; align-items:flex-end; min-width:0; }
.how-grid__mascot-img{ display:block; width:100%; max-width:200px; height:auto; animation:robo-float 4.2s .2s ease-in-out infinite; }
@media (max-width:759px){ .how-grid__mascot{ order:-1; } .how-grid__mascot-img{ max-width:150px; } }
@media (prefers-reduced-motion:reduce){ .how-grid__mascot-img{ animation:none; } }

/* Hero co-branding sobre fundo Indparts (institucional + partner-lockup no topo).
   Vídeo real (assets/video/hero-bg.mp4) cobre a seção inteira; o gradiente que
   antes era o próprio fundo virou um véu semitransparente por cima do vídeo
   (::before), pra manter o texto branco legível sem esconder a filmagem. */
.hero-dps{ position:relative; overflow:hidden; background:linear-gradient(160deg,var(--blue-900) 0%,var(--blue-950) 100%); color:#fff; padding:64px var(--container-padding-inline) 56px; }
.hero-dps__bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-dps::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(160deg,rgba(7,26,51,.88) 0%,rgba(6,20,38,.82) 100%); pointer-events:none; }
.hero-dps::after{ content:""; position:absolute; inset:0; z-index:2; opacity:.5; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:32px 32px; mask-image:radial-gradient(ellipse at 68% 22%, black, transparent 72%); }
.hero-dps .wrap{ position:relative; z-index:3; }
@media (prefers-reduced-motion:reduce){ .hero-dps__bg-video{ display:none; } }
.hero-dps .partner-lockup{ margin-bottom:24px; }
.hero-dps .partner-lockup img:first-child{ height:26px; }
.hero-dps__grid{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; }
@media (min-width:900px){ .hero-dps__grid{ grid-template-columns:1.15fr .85fr; } }
.hero-dps h1{ color:#fff; font-size:clamp(34px,5.6vw,58px); line-height:1.02; letter-spacing:-.03em; font-weight:700; max-width:15ch; text-transform:uppercase; }
.hero-dps h1 strong{ color:var(--blue-500); font-weight:700; }
.hero-dps__sub{ color:rgba(255,255,255,.78); font-size:18px; line-height:1.6; margin-top:18px; max-width:52ch; }
.hero-dps__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; align-items:center; }

/* Chips de benefício — 3 mini-selos qualitativos entre o subtítulo e os CTAs. */
.hero-dps__benefits{ display:flex; flex-wrap:wrap; gap:20px; margin-top:26px; }
.hero-dps__benefit{ display:flex; align-items:center; gap:10px; max-width:170px; }
.hero-dps__benefit-icon{ flex:none; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(24,145,255,.5); border-radius:50%; color:var(--blue-500); }
.hero-dps__benefit-icon svg{ width:18px; height:18px; }
.hero-dps__benefit span:last-child{ font-size:12px; line-height:1.35; color:rgba(255,255,255,.75); }

/* Foto real do produto (fundo estúdio recortado) — substitui o card/vídeo que
   antes ocupava a coluna direita, glow sutil atrás pra separar do vídeo de
   fundo em movimento. */
.hero-dps__product{ position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:center; min-width:0; padding:20px 0; }
.hero-dps__product::before{ content:""; position:absolute; left:-10%; right:-10%; bottom:0; height:75%; background:radial-gradient(ellipse at center bottom,rgba(24,145,255,.35),transparent 70%); pointer-events:none; }
.hero-dps__product img{ position:relative; z-index:1; width:100%; max-width:420px; height:auto; filter:drop-shadow(0 30px 40px rgba(0,0,0,.4)); }
.hero-dps__product-badge{ position:absolute; top:8px; left:50%; transform:translateX(calc(-50% - 100px)); z-index:2; background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.25); }
@media (max-width:640px){ .hero-dps__product-badge{ transform:translateX(-50%); left:auto; right:8px; } }

/* Diagnóstico — painel elevado (fundo sutil + borda) pra separar visualmente
   da seção anterior, com o mascote Técnico Indparts ao lado da introdução. */
.diag-panel{ background:var(--color-surface-subtle); border:var(--border-width) solid var(--color-border); border-radius:var(--radius-lg); padding:clamp(28px,4vw,44px); }
.diag-panel__intro{ display:grid; grid-template-columns:1fr; gap:24px; align-items:center; }
@media (min-width:760px){ .diag-panel__intro{ grid-template-columns:1fr minmax(0,168px); gap:32px; } }
.diag-panel__mascot{ display:flex; justify-content:center; min-width:0; }
.diag-panel__mascot-img{ display:block; width:100%; max-width:168px; height:auto; animation:robo-float 4s ease-in-out infinite; }
@media (max-width:759px){ .diag-panel__mascot{ order:-1; } .diag-panel__mascot-img{ max-width:130px; } }
.diag-panel .flow{ margin-top:36px; }

@media (prefers-reduced-motion:reduce){ .diag-panel__mascot-img{ animation:none; } }

/* Fluxo Geração → Umidade → Tratamento → Aplicação, com nó/conexão/módulo */
/* Fluxo Geração → Umidade → Tratamento → Aplicação — construído com a
   gramática Nó/Conexão/Módulo da marca (nó circular, linha de conexão,
   módulo com acento de estado), não ícones genéricos soltos. Estado de cor
   por etapa conta a história: neutro → alerta (umidade) → ação (tratamento,
   é onde o Puma DPS entra) → resolvido (aplicação). */
.flow{ display:flex; flex-direction:column; gap:0; margin-top:40px; counter-reset:flow-step; }
@media (min-width:860px){ .flow{ flex-direction:row; align-items:flex-start; } }

.flow__stage{ position:relative; flex:1; display:flex; flex-direction:row; align-items:flex-start; gap:18px; padding:22px 0; counter-increment:flow-step; }
.flow__stage:first-child{ padding-top:0; }
.flow__stage:last-child{ padding-bottom:0; }
@media (min-width:860px){ .flow__stage{ flex-direction:column; align-items:center; text-align:center; padding:0 14px; } }

/* linha de conexão — vertical no mobile (atravessa os nós), horizontal no
   desktop; ganha a cor da etapa concluída conforme o fluxo avança */
.flow__stage:not(:last-child)::after{
  content:""; position:absolute; background:var(--color-border-strong);
  left:25px; top:52px; width:2px; bottom:-22px;
}
@media (min-width:860px){
  .flow__stage:not(:last-child)::after{ left:calc(50% + 26px); top:25px; width:calc(100% - 52px); bottom:auto; height:2px; }
}
.flow__node{
  position:relative; width:52px; height:52px; border-radius:50%; flex:none;
  background:var(--color-surface); border:2px solid var(--color-border-strong);
  color:var(--color-text-muted);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(15,23,42,.06);
}
.flow__node .icon{ width:22px; height:22px; }
.flow__node::before{
  content:counter(flow-step, decimal-leading-zero);
  position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 4px;
  border-radius:999px; background:var(--color-surface); border:var(--border-width) solid var(--color-border-strong);
  font-family:var(--font-mono); font-size:9.5px; font-weight:var(--fw-bold); color:var(--color-text-muted);
  display:flex; align-items:center; justify-content:center; line-height:1;
}
/* Ícones em emoji (fluxo "Para que serve...") — pedido explícito, mesmos
   glifos usados na referência do usuário, em vez do sprite SVG do sistema. */
.flow__node--emoji{ font-size:22px; line-height:1; border-color:var(--blue-300); color:var(--blue-600); }

.flow__module{ background:var(--color-surface); border:var(--border-width) solid var(--color-border); border-top:3px solid var(--color-border-strong); border-radius:var(--radius-sm); padding:16px 18px; flex:1; box-shadow:0 1px 3px rgba(15,23,42,.04); }
@media (min-width:860px){ .flow__module{ margin-top:16px; width:100%; } }
.flow__module .k{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--color-text-muted); font-weight:var(--fw-semibold); display:block; margin-bottom:6px; }
.flow__module p{ font-size:13.5px; color:var(--color-text); font-weight:var(--fw-medium); line-height:1.45; }

/* Linha DPS — seção escura (quebra a alternância clara/surface padrão de
   propósito, pra dar ritmo com o hero) + grid compacto de cards. */
.section--dark{ background:linear-gradient(160deg,var(--blue-900) 0%,var(--blue-950) 100%) !important; border-top:none; }

.dps-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:28px; }
@media (min-width:560px){ .dps-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:860px){ .dps-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1200px){ .dps-grid--compact{ grid-template-columns:repeat(6,1fr); } }

/* Cards compactos: foto + nome + 3 specs essenciais + botão — sem SKU nem
   grade técnica completa (esses detalhes ficam na nota abaixo do grid e a
   equipe aprofunda por WhatsApp). Card continua claro mesmo com a seção
   escura ao fundo, pra manter contraste e reaproveitar o componente base. */
.dps-grid--compact .product-card__media{ aspect-ratio:1/1; padding:14px; }
.dps-grid--compact .product-card__body{ padding:14px 14px 16px; }
.dps-grid--compact .product-card__name{ font-size:16px; font-weight:700; }
.product-card__compact-specs{ display:flex; flex-direction:column; gap:2px; margin:8px 0 12px; font-family:var(--font-mono); font-size:12px; color:var(--color-text-muted); }
.product-card__compact-specs span:first-child{ color:var(--color-text); font-weight:var(--fw-semibold); }
.dps-grid--compact .btn{ width:100%; }

/* Como escolher — 5 módulos */
.choose-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:28px; }
@media (min-width:640px){ .choose-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .choose-grid{ grid-template-columns:repeat(5,1fr); } }
.choose-card{ background:var(--color-surface); border:var(--border-width) solid var(--color-border); border-left:3px solid var(--color-primary); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:20px; transition:transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); }
.choose-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.choose-card .k{ font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-link); display:block; margin-bottom:8px; }
.choose-card p{ font-size:13.5px; color:var(--color-text); line-height:1.5; }
.choose-mascot{ display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:32px; }
.choose-mascot__img{ width:104px; height:auto; flex:none; animation:robo-float 3.6s ease-in-out infinite; }
@keyframes robo-float{ 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-10px) rotate(3deg); } }
@media (prefers-reduced-motion:reduce){ .choose-mascot__img{ animation:none; } }
.choose-close{ text-align:center; margin:0; font-size:clamp(19px,2.4vw,24px); font-weight:var(--fw-bold); color:var(--color-text); }

/* Indparts — fotos reais */
.photo-strip{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:28px; }
@media (min-width:760px){ .photo-strip{ grid-template-columns:1fr 1fr; } }
.photo-frame{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3; background:var(--color-surface-subtle); }
.photo-frame img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-standard); }
.photo-frame:hover img{ transform:scale(1.04); }

/* Pronta entrega — seção comercial */
.avail-section{ background:linear-gradient(160deg,var(--blue-900) 0%,var(--blue-950) 100%); border-radius:var(--radius-lg); padding:48px var(--space-6); text-align:center; color:#fff; }
.avail-section .eyebrow{ background:rgba(255,255,255,.12); color:#fff; }
.avail-section h2{ color:#fff; }
.avail-section p{ color:rgba(255,255,255,.78); margin:12px auto 0; max-width:60ch; }
.avail-models{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:24px 0; }
.avail-models .badge{ background:rgba(255,255,255,.12); color:#fff; }
.avail-models .badge--stock{ background:rgba(30,130,76,.35); color:#c9f2da; }

/* Formulário */
.lead-grid{ display:grid; grid-template-columns:1fr; gap:36px; }
@media (min-width:960px){ .lead-grid{ grid-template-columns:.85fr 1.15fr; } }
.lead-form{ background:var(--color-surface); border:var(--border-width) solid var(--color-border); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-sm); }
.lead-aside{ display:flex; flex-direction:column; gap:14px; }
.lead-point{ display:flex; gap:12px; align-items:flex-start; }
.lead-point .icon{ color:var(--color-primary); margin-top:2px; flex:none; }
.lead-point p{ font-size:14px; color:var(--color-text-muted); line-height:1.55; }
.form-status{ margin-top:14px; font-size:13.5px; font-weight:600; }
.form-status[data-state="ok"]{ color:var(--color-success); }
.form-status[data-state="err"]{ color:var(--color-error); }

/* FAQ em 2 colunas no desktop — mais escaneável que uma lista longa de coluna
   única para 7 perguntas; cada item mantém sua própria borda inferior. */
@media (min-width:760px){
  .accordion--2col{ display:grid; grid-template-columns:1fr 1fr; column-gap:32px; border-top:none; }
  .accordion--2col .accordion-item:nth-child(-n+2){ border-top:var(--border-width) solid var(--color-border); }
}

/* CTA final — mascotes Indy + Técnico Indparts ancorando o encerramento,
   texto alinhado à esquerda em vez de centralizado (variante da base
   .cta-final, que segue em components.css sem mexer no componente genérico). */
.cta-final--mascots{ position:relative; text-align:left; display:grid; grid-template-columns:1fr; gap:28px; align-items:end; }
@media (min-width:760px){ .cta-final--mascots{ grid-template-columns:1fr minmax(0,680px); } }
.cta-final--mascots .hero__ctas{ justify-content:flex-start; }
/* Mascotes em position:absolute, ancoradas na borda inferior/direita do
   próprio card (.cta-final--mascots é position:relative) — saem do fluxo do
   grid de propósito, pra altura delas não ficar limitada à altura da coluna
   de texto. Como a caixa de recorte (425px em desktop) é mais alta que a
   coluna de texto, a cabeça ultrapassa a borda superior do card sozinha,
   sem precisar de margin-top negativo chutado (pedido explícito: "a cabeça
   fica pra cima", "tem que passar a parte do box"). */
.cta-final__mascots{ position:absolute; right:32px; bottom:0; display:flex; justify-content:center; align-items:flex-end; }
.cta-final__mascot-crop{ width:100%; max-width:365px; aspect-ratio:4/5; overflow:hidden; }
.cta-final__mascot-crop img{ width:100%; height:auto; object-fit:cover; object-position:top center; }
.cta-final__mascot-crop:first-child{ margin-right:-30px; z-index:1; }
.cta-final__mascot-crop:last-child{ z-index:2; }
@media (max-width:759px){
  .cta-final--mascots{ text-align:center; }
  .cta-final--mascots .hero__ctas{ justify-content:center; }
  .cta-final__mascots{ position:static; margin-top:-24px; justify-content:center; }
  .cta-final__mascot-crop{ max-width:230px; }
}

/* Títulos das seções escuras (CTA final, disponibilidade) acompanham o
   mesmo ajuste de peso/tracking do resto da página nesta rodada de redesign. */
.cta-final .ids-h2, .avail-section .ids-h2{ font-weight:700; letter-spacing:-.025em; }

footer.site-footer-min{ background:var(--blue-900); color:rgba(255,255,255,.55); font-size:12.5px; padding:26px 0; text-align:center; }

@media (max-width:640px){
  .hero-dps{ padding-top:48px; }
}

/* ==========================================================================
   MOVIMENTO — scroll-reveal leve (IntersectionObserver em page.js) + entrada
   do hero. Progressive enhancement: sem JS ou com prefers-reduced-motion,
   tudo fica 100% visível desde o primeiro render (ver regra final do bloco).
   ========================================================================== */
/* padrão sem JS: tudo visível. Só quando page.js registra o observer com
   sucesso ele marca <html class="js-reveal"> — a partir daí .reveal começa
   oculto e anima ao entrar no viewport. Isso evita conteúdo sumido caso o
   JS falhe ou demore (progressive enhancement de verdade). */
.reveal{ transition:opacity .55s var(--ease-standard), transform .55s var(--ease-standard); }
html.js-reveal .reveal{ opacity:0; transform:translateY(16px); }
html.js-reveal .reveal.is-in{ opacity:1; transform:translateY(0); }

.reveal-group > .reveal:nth-child(1){ transition-delay:.02s; }
.reveal-group > .reveal:nth-child(2){ transition-delay:.08s; }
.reveal-group > .reveal:nth-child(3){ transition-delay:.14s; }
.reveal-group > .reveal:nth-child(4){ transition-delay:.20s; }
.reveal-group > .reveal:nth-child(5){ transition-delay:.26s; }
.reveal-group > .reveal:nth-child(6){ transition-delay:.32s; }
.reveal-group > .reveal:nth-child(7){ transition-delay:.38s; }

.hero-dps__grid > div:first-child{ opacity:0; transform:translateX(-14px); animation:hero-in-l .7s .1s var(--ease-standard) forwards; }
.hero-dps__product{ opacity:0; transform:translateX(14px); animation:hero-in-r .7s .22s var(--ease-standard) forwards; }
@keyframes hero-in-l{ to{ opacity:1; transform:translateX(0); } }
@keyframes hero-in-r{ to{ opacity:1; transform:translateX(0); } }

@media (prefers-reduced-motion:reduce){
  html.js-reveal .reveal{ opacity:1; transform:none; transition:none; }
  .hero-dps__grid > div:first-child, .hero-dps__product{ animation:none; opacity:1; transform:none; }
}