/* ============================================================
   KFG Clean — higienização de estofado, automóvel e cadeirinha.
   Sem build, sem framework, sem dependência externa.

   Paleta: as duas cores da marca foram amostradas do logo e NÃO
   sustentam texto sobre branco — azul #46B8E7 dá 2,24:1 e verde
   #6FB237 dá 2,53:1. Elas ficam para superfície, borda e acento;
   texto usa os derivados escurecidos (--azul-txt 5,69:1 e
   --verde-txt 5,13:1) ou a tinta. A seção da prova é escura de
   propósito: tecido claro sobre fundo escuro é onde a sujeira
   aparece.
   ============================================================ */

@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:300 800;      /* variável: um arquivo cobre a escala toda */
  font-display:swap;
  src:url('../fonts/jost-latin.woff2?v=20260907') format('woff2');
}

:root{
  --azul:#46b8e7;
  --verde:#6fb237;
  --azul-txt:#0e6e96;
  --verde-txt:#4a7a20;
  --tinta:#0b1b22;
  --tinta-2:#16323d;
  --cinza:#5c6b73;
  --papel:#fff;
  --areia:#f4f7f8;
  --linha:#dfe7ea;

  --r:14px;
  --r-sm:9px;
  --r-lg:22px;
  --sh:0 1px 2px rgba(11,27,34,.05), 0 10px 30px rgba(11,27,34,.07);
  --sh-2:0 18px 50px rgba(11,27,34,.16);
  --ease:cubic-bezier(.2,.7,.3,1);
  --f:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;font-family:var(--f);font-size:17px;line-height:1.62;
  color:var(--tinta);background:var(--papel);-webkit-font-smoothing:antialiased
}
img,video{max-width:100%;display:block}
h1,h2,h3{line-height:1.16;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,5.4vw,3.5rem);font-weight:700}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:700}
h3{font-size:1.16rem;font-weight:600}
p{margin:0}
a{color:var(--azul-txt)}

.wrap{width:min(1140px,100% - 44px);margin-inline:auto}
.sec{padding-block:clamp(56px,8vw,104px)}
.sec--areia{background:var(--areia)}
.sec__hd{max-width:56ch;margin-bottom:clamp(28px,4vw,44px)}
.sec__hd p{margin-top:12px;color:var(--cinza);font-size:1.06rem}
.olho{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
  font-size:.78rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--verde-txt)
}
.olho::before{content:"";width:26px;height:2px;background:var(--verde);flex:none}

/* ── aviso de rascunho: apagar antes de publicar (ver PENDENTE.md) ── */
.rascunho{
  background:#fff4e5;border-bottom:1px solid #f0d9b5;color:#7a4a00;
  font-size:.9rem;padding:11px 22px;text-align:center
}
.rascunho b{font-weight:600}

/* ── botões ─────────────────────────────────────────────── */
.btn{
  --bg:var(--verde-txt); --fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:var(--r-sm);border:0;cursor:pointer;
  background:var(--bg);color:var(--fg);font-family:inherit;font-size:1rem;
  font-weight:600;text-decoration:none;transition:transform .18s var(--ease),filter .18s
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn--wa{--bg:#0f7d42}   /* verde do WhatsApp escurecido até passar AA: 5,21:1 com branco (o #128c4a dava 4,31) */
.btn--vazado{--bg:transparent;--fg:var(--tinta);border:2px solid var(--linha)}
.btn--claro{--bg:#fff;--fg:var(--tinta)}
.btn svg{width:20px;height:20px;fill:currentColor;flex:none}

/* ── cabeçalho ──────────────────────────────────────────── */
.hd{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.94);
    border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
/* O blur fica no pseudo-elemento: `backdrop-filter` no próprio .hd o tornaria
   bloco contentor de descendentes `position:fixed` e prenderia o menu nele. */
.hd::before{content:"";position:absolute;inset:0;z-index:-1;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:none}
.hd.fixo{border-bottom-color:var(--linha);box-shadow:0 4px 18px rgba(11,27,34,.06)}
.hd__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.marca{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex:none}
.marca img{height:42px;width:auto}
.marca__txt{display:flex;flex-direction:column;line-height:1.06}
.marca__txt b{font-size:1.12rem;font-weight:700;letter-spacing:-.01em}
.marca__txt i{font-style:normal;font-size:.7rem;letter-spacing:.22em;color:var(--verde-txt);
              text-transform:uppercase;font-weight:600}
.nav{display:flex;align-items:center;gap:26px}
.nav a{text-decoration:none;color:var(--tinta);font-size:.95rem;font-weight:500}
.nav a:hover{color:var(--azul-txt)}
.nav a.btn{color:#fff}
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;
        flex-direction:column;gap:5px;align-items:center;justify-content:center}
.burger span{display:block;width:23px;height:2px;background:var(--tinta);border-radius:2px}

/* ── herói ──────────────────────────────────────────────── */
.hero{background:var(--tinta);color:#fff;overflow:hidden}
.hero__in{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,56px);
  align-items:center;padding-block:clamp(38px,6vw,76px)
}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:var(--azul)}
.hero__sub{margin-top:18px;max-width:46ch;color:#cfdde3;font-size:1.1rem}
.hero__local{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.1);
  font-size:.9rem;color:#e6f1f5
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero__cta .btn--vazado{--fg:#fff;border-color:rgba(255,255,255,.4)}
.hero__vid{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);
           background:#0d2028;aspect-ratio:540/730;max-width:420px;justify-self:end;width:100%}
.hero__vid video{width:100%;height:100%;object-fit:cover}

/* ── prova: antes e depois ──────────────────────────────── */
.prova{background:var(--tinta-2);color:#fff}
.prova .olho{color:#8fd0f0}
.prova .olho::before{background:var(--azul)}
.prova .sec__hd p{color:#c3d5dc}
.pares{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(20px,3vw,34px)}
.par{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
     border-radius:var(--r);overflow:hidden}
.par__fotos{display:grid;grid-template-columns:1fr 1fr}
.par figure{margin:0;position:relative}
.par figcaption{
  position:absolute;left:8px;top:8px;padding:4px 10px;border-radius:999px;
  background:rgba(11,27,34,.82);font-size:.72rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase
}
.par img{width:100%;aspect-ratio:340/206;object-fit:cover}
.par p{padding:14px 16px;font-size:.92rem;color:#c3d5dc}
.prova__nota{margin-top:26px;font-size:.9rem;color:#9fb6bf;max-width:64ch}

/* ── chamada contextual ───────────────────────────────────
   Aqui o WhatsApp não é um dos caminhos de conversão: é o único (não há
   formulário, por decisão de projeto). Então cada momento de decisão sem
   botão é uma venda que não acontece. Este bloco fecha a seção da prova,
   que é o pico da página. */
.cta-ctx{
  margin-top:clamp(28px,4vw,42px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(16px,3vw,32px);padding:clamp(22px,3vw,30px);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-lg)
}
.cta-ctx__t{margin:0;font-size:clamp(1.14rem,2vw,1.4rem);font-weight:700;color:#fff}
.cta-ctx__s{margin:6px 0 0;color:#c3d5dc;max-width:46ch;font-size:.98rem}
.cta-ctx .btn{flex:none}
@media (max-width:620px){
  .cta-ctx{flex-direction:column;align-items:stretch}
  .cta-ctx .btn{width:100%}
}

.hero__atalho{
  margin-top:14px;font-size:.94rem;color:#a9c2cc
}


/* ── a passagem do bico ──────────────────────────────────────
   O ESTADO BASE é o de baixo: três figuras lado a lado, cada uma com a
   legenda à vista. É o que aparece sem JavaScript, no celular e com
   movimento reduzido — e é legível assim.

   O palco dirigido pelo scroll só existe sob `.js-passagem`, classe que o
   próprio JavaScript põe no <html> depois de decidir que a tela, o
   movimento e a rede permitem. Mesmo contrato do `.js-rv` logo abaixo:
   nada nasce escondido. */
.palco__in{width:min(1140px,100% - 44px);margin-inline:auto}
.palco__quadro{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
               gap:clamp(16px,2.4vw,28px)}
.beat{margin:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
      border-radius:var(--r);overflow:hidden}
/* `height:auto` não é enfeite: o atributo height="570" do HTML entra como
   dica de apresentação e, com largura E altura definidas, o `aspect-ratio`
   é ignorado — a imagem sairia com 570px de altura dentro de um cartão de
   330px de largura. */
.beat img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.beat figcaption{padding:14px 16px;font-size:.95rem;color:#dbe8ed}
.beat figcaption b{color:#8fd0f0;font-weight:700;margin-right:3px}
.bico,.palco__legenda,.palco__dica,.palco__scrub,.palco__olho{display:none}
.palco__nota{margin-top:24px;font-size:.9rem;color:#9fb6bf;max-width:66ch}
.sec__hd--2{margin-top:clamp(48px,7vw,84px)}

.js-passagem .palco{
  height:100svh;min-height:530px;display:grid;align-content:center;
  padding:78px 0 28px      /* o cabeçalho fixo tem 72px: o quadro não passa por baixo dele */
}
.js-passagem .palco__in{display:grid;gap:clamp(12px,1.6vw,18px);justify-items:center}
.js-passagem .palco__olho{
  display:block;font-size:.78rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:#8fd0f0
}
/* 760px é a largura real do arquivo: passar disso seria ampliar pixel de vídeo. */
.js-passagem .palco__quadro{
  display:block;position:relative;overflow:hidden;border-radius:var(--r-lg);
  height:min(56svh,56vw);aspect-ratio:4/3;max-width:min(100%,760px);
  background:#0d2028;box-shadow:var(--sh-2)
}
.js-passagem .beat{position:absolute;inset:0;background:none;border:0;border-radius:0}
/* Estado inicial do empilhamento: os dois de cima entram recortados. Fica no
   CSS de propósito — assim depende da classe, e tirar a classe já devolve os
   três quadros inteiros, sem depender do revert do GSAP. */
.js-passagem .beat:nth-of-type(2){clip-path:inset(0% 100% 0% 0%)}
.js-passagem .beat:nth-of-type(3){clip-path:inset(0% 0% 0% 100%)}
.js-passagem .beat img{height:100%;aspect-ratio:auto}
/* A legenda vira texto só para leitor de tela — some da vista, não da página.
   O `clip-path` que o GSAP anima em `.beat` é pintura: não tira nada da
   árvore de acessibilidade, então as três legendas seguem legíveis por leitor. */
.js-passagem .beat figcaption{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0
}

.js-passagem .bico{
  display:block;position:absolute;top:0;bottom:0;left:-85px;width:170px;
  z-index:3;pointer-events:none;will-change:transform;opacity:0
}
.bico__risco{
  position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;
  background:linear-gradient(180deg,rgba(238,248,253,0),rgba(238,248,253,.88) 16%,
             rgba(238,248,253,.88) 84%,rgba(238,248,253,0));
  box-shadow:0 0 26px 8px rgba(70,184,231,.4)
}
/* O rastro molhado fica ATRÁS da borda. Como a segunda passagem inverte o
   elemento inteiro com scaleX:-1, ele passa para o outro lado sozinho — que
   continua sendo o lado por onde o bico acabou de passar. */
.bico__risco::before{
  content:"";position:absolute;right:1px;top:0;bottom:0;width:70px;
  background:linear-gradient(270deg,rgba(70,184,231,.28),rgba(70,184,231,0))
}
.bico__svg{position:absolute;left:50%;top:50%;width:150px;height:auto;
           transform:translate(-50%,-52%);filter:drop-shadow(0 10px 20px rgba(11,27,34,.55))}

.js-passagem .palco__legenda{
  display:block;text-align:center;max-width:52ch;line-height:1.4;
  font-size:clamp(1.02rem,1.5vw,1.24rem);color:#eaf4f8;min-height:2.6em;
  transition:opacity .22s var(--ease)
}
.js-passagem .palco__legenda.trocando{opacity:0}
.js-passagem .palco__dica{display:block;font-size:.82rem;color:#9fb6bf}
.js-passagem .palco__scrub{
  display:block;width:min(430px,100%);height:26px;background:transparent;
  accent-color:var(--azul);cursor:pointer
}

/* ── serviços ───────────────────────────────────────────── */
.servico{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,54px);align-items:center
}
.servico + .servico{margin-top:clamp(48px,7vw,90px)}
.servico--inv .servico__foto{order:-1}
.servico__foto img{width:100%;border-radius:var(--r);box-shadow:var(--sh)}
.servico ul{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.servico li{display:flex;gap:10px;align-items:flex-start;color:var(--cinza)}
.servico li::before{content:"";flex:none;margin-top:9px;width:7px;height:7px;border-radius:50%;
                    background:var(--verde)}
.servico .btn{margin-top:24px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.duo img{width:100%;border-radius:var(--r);box-shadow:var(--sh)}

/* ── como funciona ──────────────────────────────────────── */
.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:clamp(18px,2.6vw,28px)}
.passo{background:var(--papel);border:1px solid var(--linha);border-radius:var(--r);padding:24px}
.passo b{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
         border-radius:50%;background:var(--azul-txt);color:#fff;font-size:.95rem;margin-bottom:14px}
.passo p{margin-top:8px;color:var(--cinza);font-size:.97rem}

/* ── perguntas ──────────────────────────────────────────── */
.faq{display:grid;gap:12px;max-width:820px}
.faq details{background:var(--papel);border:1px solid var(--linha);border-radius:var(--r);
             padding:4px 20px}
.faq summary{cursor:pointer;padding:16px 0;font-weight:600;list-style:none;
             display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--azul-txt);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{padding-bottom:18px;color:var(--cinza)}

/* ── contato ────────────────────────────────────────────── */
.contato{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,60px)}
.vias{display:grid;gap:18px;margin:0;padding:0;list-style:none}
.vias li{display:flex;gap:14px;align-items:flex-start}
.vias__ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;
          background:#e8f6fc;color:var(--azul-txt)}
.vias__ic svg{width:20px;height:20px;fill:currentColor}
.vias b{display:block;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;
        color:var(--cinza);font-weight:600}
.vias span,.vias a{font-size:1.06rem;font-weight:500;color:var(--tinta);text-decoration:none}

/* ── rodapé ─────────────────────────────────────────────── */
.ft{background:var(--tinta);color:#a8bcc4;padding-block:44px;font-size:.94rem}
.ft__in{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:center}
.ft__marca{display:flex;align-items:center;gap:12px}
.ft__marca img{height:40px;filter:brightness(1.15)}
.ft__marca b{color:#fff;display:block}
.ft a{color:#cfe0e6}

/* ── botão flutuante ────────────────────────────────────── */
.fab{
  position:fixed;right:18px;bottom:18px;z-index:70;display:inline-flex;align-items:center;
  gap:10px;padding:14px 20px;border-radius:999px;background:#0f7d42;color:#fff;
  text-decoration:none;font-weight:600;box-shadow:0 10px 30px rgba(11,27,34,.28);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s
}
.fab.vis{opacity:1;visibility:visible;transform:none}
.fab svg{width:22px;height:22px;fill:currentColor}

/* ── acessibilidade ─────────────────────────────────────── */
.skip{position:absolute;left:-9999px;top:10px;z-index:200;background:var(--tinta);color:#fff;
      padding:12px 18px;border-radius:var(--r-sm)}
.skip:focus{left:10px}
:focus-visible{outline:3px solid var(--azul-txt);outline-offset:3px;border-radius:4px}
.prova :focus-visible,.hero :focus-visible,.ft :focus-visible{outline-color:#8fd0f0}

/* ── revelação ─────────────────────────────────────────────
   O estado final é o padrão do CSS. Quem esconde é o `.js-rv`, que o próprio
   JavaScript coloca no <html> — se main.js não carregar, a página aparece
   pronta em vez de em branco. */
.js-rv .rv{opacity:0;transform:translateY(12px);
    transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js-rv .rv.dentro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1!important;transform:none!important;transition:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ── responsivo ─────────────────────────────────────────── */
@media (max-width:900px){
  .burger{display:flex}
  .hero__in,.servico,.contato{grid-template-columns:1fr}
  .servico--inv .servico__foto{order:0}
  .hero__vid{max-width:100%;justify-self:stretch;aspect-ratio:16/11}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(310px,84vw);flex-direction:column;
    align-items:stretch;justify-content:flex-start;gap:2px;background:var(--papel);
    padding:88px 22px 30px;box-shadow:-18px 0 46px rgba(11,27,34,.2);
    transform:translateX(100%);
    /* Fechado precisa sair da ordem de tabulação, senão o teclado entra num
       painel invisível e o navegador arrasta o layout para revelá-lo. */
    visibility:hidden;
    transition:transform .3s var(--ease),visibility .3s;
    transition-behavior:allow-discrete;
    overflow-y:auto;z-index:95
  }
  .nav.aberto{transform:none;visibility:visible}
  .nav a{padding:14px 4px;border-bottom:1px solid var(--linha)}
  .nav a.btn{margin-top:14px;border-bottom:0}
  body.menu-aberto{overflow:hidden}
}
@media (max-width:560px){
  .duo{grid-template-columns:1fr}
  .par__fotos{grid-template-columns:1fr}
  .par img{aspect-ratio:16/10}
}