/* =============================================================
   GRAFCHEN | Landing Page Campanha 2026
   Identidade: barra CMYK, preto, tipografia limpa.
   Mobile first. Sem fonte externa, sem framework, sem requisicao
   de terceiro, para carregar rapido no 4G de quem clica no anuncio.
   ============================================================= */

/* ---------- fonte dos titulos ----------
   Montserrat Bold, hospedada aqui dentro. E a fonte do proprio logotipo:
   o vetor oficial da marca traz "Montserrat Regular" no GRAF e "Montserrat
   Bold" no CHEN. Antes os titulos usavam Archivo Black, escolhida antes de
   alguem ter visto a marca real, e a pagina ficava com o logotipo falando
   uma lingua e os titulos falando outra.
   Peso 700 de proposito, o mesmo do logotipo. Um peso mais pesado deixaria
   o titulo mais forte que a propria marca.
   Ver assets/fonts/LEIA-ME.txt para licenca e por que nao usar o link do
   Google. O swap faz o texto aparecer na hora com a fonte de sistema e
   trocar quando a Montserrat chegar, entao o titulo nunca fica invisivel. */
@font-face{
  font-family:"Montserrat";
  src:url("../fonts/montserrat-bold-latin.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  --titulo:"Montserrat", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  /* Valores tirados do vetor oficial da marca (logLOGO / assinatura),
     nao do CMYK padrao. Sao proximos, mas nao sao os mesmos. */
  --ciano:#009EEF;
  --magenta:#E61484;
  --amarelo:#FFE700;
  --marca-k:#373435;   /* o preto da marca e quente, mais claro que o texto */
  /* Azul de destaque. Nao e o ciano da barra CMYK: e o azul que domina o
     material impresso e os posts da GRAFCHEN, amostrado das pecas de 2024.
     Contraste 6,4:1 sobre branco, entao serve para texto, nao so enfeite. */
  --azul:#005FB8;
  /* Magenta para fundo escuro. O magenta da marca fica em 3,3:1 sobre
     preto e some; este sobe para 4,7:1. Mesma logica do par azul/ciano:
     no claro vai a versao fechada, no escuro vai a aberta. */
  --magenta-claro:#FF4FA3;
  --preto:#1A1A1A;
  --cinza:#6E6E6E;
  --linha:#D4D4D4;
  --fundo:#F4F4F4;
  --wa:#25D366;
  --wa-dark:#1DA851;
  --branco:#FFFFFF;
  --escuro:#111111;
  --max:1180px;
  --r:6px;
  --sombra:0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--preto);
  background:var(--branco);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
/* A Archivo Black era um peso unico ultrapesado e pedia tracking bem
   negativo para nao parecer solta. A Montserrat Bold e geometrica e mais
   aberta: o mesmo aperto deixaria as letras se tocando, principalmente em
   caixa alta. Entao o tracking afrouxa e a entrelinha ganha um respiro.
   O corpo sobe um pouco para compensar o peso menor no titulo do hero. */
h1,h2,h3{
  font-family:var(--titulo);
  font-weight:700;
  /* So existe o peso 700 no projeto. Sem isto, um font-weight maior em
     qualquer regra faria o navegador falsificar o negrito. */
  font-synthesis:none;
  line-height:1.1;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:2.3rem; letter-spacing:-.022em}
h2{font-size:1.85rem; letter-spacing:-.018em}
h3{font-size:1.05rem; line-height:1.25; letter-spacing:-.01em}
p{margin:0 0 1em}
ul,ol{margin:0; padding:0; list-style:none}

.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 20px}
.wrap--narrow{max-width:780px}

/* ---------- barra CMYK, assinatura da marca ---------- */
.brand__cmyk,.topbar__cmyk{display:inline-flex; height:4px; width:52px; flex:none}
.brand__cmyk i,.topbar__cmyk i{flex:1}
.brand__cmyk i:nth-child(1),.topbar__cmyk i:nth-child(1){background:var(--ciano)}
.brand__cmyk i:nth-child(2),.topbar__cmyk i:nth-child(2){background:var(--magenta)}
.brand__cmyk i:nth-child(3),.topbar__cmyk i:nth-child(3){background:var(--amarelo)}
.brand__cmyk i:nth-child(4),.topbar__cmyk i:nth-child(4){background:var(--marca-k)}
.brand__cmyk--lg{width:120px; height:6px}

/* ---------- CMYK como sistema, nao como enfeite ----------
   A barra de quatro cores e o unico elemento visual que e so da
   GRAFCHEN. Usada em toda a pagina ela vira identidade, e identidade
   nao se copia. Abaixo ela aparece como divisor de secao, marcador de
   lista e faixa de destaque nos cards. */

/* faixa fina no topo de cada secao clara */
.sec--alt::before, .sec--legal::before{
  content:""; display:block; height:3px; width:100%;
  position:absolute; top:0; left:0;
  background:linear-gradient(90deg,
    var(--ciano) 0 25%, var(--magenta) 25% 50%,
    var(--amarelo) 50% 75%, var(--marca-k) 75% 100%);
}
.sec--alt, .sec--legal{position:relative}

/* marcador das listas de beneficio: cada item recebe uma cor da barra */
.tick li::before{
  content:""; position:absolute; left:0; top:.45em;
  width:10px; height:10px; border:0; border-radius:2px;
  transform:none; background:var(--ciano);
}
.tick li:nth-child(2)::before{background:var(--magenta)}
.tick li:nth-child(3)::before{background:var(--amarelo)}
.tick li:nth-child(4)::before{background:var(--marca-k)}

/* faixa CMYK que acende no topo do card ao passar o mouse */
.card{position:relative}
.card::after{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,
    var(--ciano) 0 25%, var(--magenta) 25% 50%,
    var(--amarelo) 50% 75%, var(--marca-k) 75% 100%);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease; z-index:2;
}
.card:hover::after, .card:focus-within::after{transform:scaleX(1)}
.final .brand__cmyk i:nth-child(4),
.ft .brand__cmyk i:nth-child(4){background:#FFFFFF}

/* ---------- topbar contador ---------- */
.topbar{background:var(--preto); color:#fff; font-size:.8rem; padding:9px 0}
.topbar__in{display:flex; align-items:center; justify-content:center; gap:12px; text-align:center}
.topbar p{margin:0; font-weight:600; letter-spacing:.01em}
.topbar b{color:var(--amarelo)}
.topbar__cmyk{display:none}

/* ---------- cabecalho ---------- */
.hd{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96);
    backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--linha)}
.hd__in{display:flex; align-items:center; gap:16px; padding-top:12px; padding-bottom:12px}
.brand{text-decoration:none; display:flex; align-items:center; margin-right:auto}
/* O logotipo e o vetor oficial. A altura manda, a largura acompanha pela
   proporcao do viewBox. currentColor pinta a tipografia e o bloco K. */
.brand__logo{height:32px; width:auto; color:var(--marca-k); display:block}
.hd__nav{display:none; gap:22px; font-size:.9rem; font-weight:600}
.hd__nav a{text-decoration:none; color:var(--cinza); transition:color .15s}
.hd__nav a:hover{color:var(--azul)}

/* ---------- botoes ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--preto); color:#fff; text-decoration:none;
  font-weight:700; font-size:.95rem; letter-spacing:-.01em;
  padding:14px 22px; border-radius:var(--r); border:0; cursor:pointer;
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease;
  line-height:1.2; text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0); transition-duration:.05s}
.btn:focus-visible{outline:3px solid var(--ciano); outline-offset:3px}
.btn--wa{background:var(--wa); color:#0a2e18; box-shadow:0 3px 0 var(--wa-dark)}
.btn--wa:hover{background:#2AE372; box-shadow:0 5px 0 var(--wa-dark)}
.btn--wa:active{box-shadow:0 1px 0 var(--wa-dark)}
.btn .ico-wa{transition:transform .25s ease}
.btn:hover .ico-wa{transform:scale(1.12) rotate(-6deg)}
.btn--lg{font-size:1.05rem; padding:17px 30px; width:100%}
.btn--sm{padding:13px 16px; font-size:.85rem; min-height:44px}
.btn--full{width:100%}
.ico-wa{width:19px; height:19px; fill:currentColor; flex:none}

/* ---------- hero ---------- */
.hero{background:var(--escuro); color:#fff; padding:46px 0 52px; overflow:hidden}
.hero__in{display:grid; gap:34px}
.tag{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 18px;
  font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--amarelo); border:1px solid rgba(255,255,255,.22);
  padding:6px 13px; border-radius:100px;
}
.tag span{color:rgba(255,255,255,.62); border-left:1px solid rgba(255,255,255,.22); padding-left:8px}
/* Sem font-weight aqui: so existe o peso 700 da Montserrat no projeto, e
   pedir 800 fazia o navegador engordar a letra na marra, o que borra o
   desenho da fonte. Herda o 700 da regra de titulo. */
.hero h1{font-size:2.05rem; color:#fff; margin-bottom:18px; max-width:20ch}
.hero h1 em{font-style:normal; color:var(--amarelo)}
.lead{font-size:1.02rem; color:rgba(255,255,255,.78); max-width:56ch; margin-bottom:26px}
.lead strong{color:#fff}
.hero__cta{margin-bottom:24px}
.hero__micro{font-size:.8rem; color:rgba(255,255,255,.5); margin:11px 0 0; text-align:center}
.hero__pills{display:flex; flex-wrap:wrap; gap:8px}
.hero__pills li{
  font-size:.78rem; font-weight:600; color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13);
  padding:7px 13px; border-radius:100px;
}

/* ---------- imagens ---------- */
.hero__foto{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r); box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.card__foto{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-bottom:1px solid var(--linha); background:var(--fundo);
}
.gal__foto{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r); background:var(--fundo);
  transition:transform .25s ease, box-shadow .25s ease;
}
.gal__foto:hover{transform:scale(1.02); box-shadow:var(--sombra)}

/* ---------- faixa de prova ---------- */
/* Numeros em escala grande: sao ancora visual e argumento de venda ao
   mesmo tempo. Cada um recebe uma cor da barra CMYK acima dele. */
.strip{background:var(--fundo); border-bottom:1px solid var(--linha); padding:34px 0}
.strip__in{display:grid; grid-template-columns:repeat(2,1fr); gap:28px 16px; text-align:center}
.strip__in > div{position:relative; padding-top:14px}
.strip__in > div::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:34px; height:3px; background:var(--ciano);
}
.strip__in > div:nth-child(2)::before{background:var(--magenta)}
.strip__in > div:nth-child(3)::before{background:var(--amarelo)}
.strip__in > div:nth-child(4)::before{background:var(--preto)}
.strip strong{display:block; font-family:var(--titulo); font-weight:400;
              font-size:2.4rem; letter-spacing:-.05em; line-height:.95}
.strip span{display:block; font-size:.78rem; color:var(--cinza); margin-top:7px; line-height:1.35}

/* ---------- secoes ---------- */
.sec{padding:54px 0}
.sec--alt{background:var(--fundo)}
.sec--dark{background:var(--escuro); color:#fff}
.sec__hd{max-width:640px; margin-bottom:34px}
.sec__hd--center{margin-left:auto; margin-right:auto; text-align:center}
/* O rotulo que abre cada secao e o acento que mais se repete descendo a
   pagina, entao e ele que define a cor da marca na cabeca de quem le.
   No claro vai o azul do material impresso; no escuro vai o ciano, que e
   o mesmo azul puxado para cima para aguentar fundo preto. O amarelo saiu
   daqui de proposito: ele agora significa prazo, e so aparece no contador
   e no "48 horas". */
.eyebrow{
  font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--azul); margin:0 0 9px;
}
.eyebrow--light{color:var(--ciano)}
/* `.legal p` pinta todo paragrafo daquela secao de cinza, e como o rotulo
   tambem e um <p>, ele era capturado junto e ficava fora do sistema de cor.
   Especificidade maior que a da regra generica resolve. */
.legal .eyebrow{color:var(--azul)}
.sec--dark h2{color:#fff}
.sec__sub{color:var(--cinza); font-size:1rem; margin:0}
.sec__sub--light{color:rgba(255,255,255,.72)}

.grid{display:grid; gap:20px}
.grid--2{grid-template-columns:1fr}
.grid--4{grid-template-columns:1fr}

/* ---------- cards de produto ---------- */
.card{background:#fff; border:1px solid var(--linha); border-radius:var(--r); overflow:hidden;
      display:flex; flex-direction:column;
      transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease}
.card:hover{box-shadow:var(--sombra); transform:translateY(-3px); border-color:#b9b9b9}
.card__foto{transition:transform .4s ease}
.card:hover .card__foto{transform:scale(1.03)}
.card__bd{padding:20px; display:flex; flex-direction:column; flex:1}
/* Mesmo caso do rotulo da secao legal: `.card p` pinta todo paragrafo do
   card de cinza e capturava o selo junto, porque ele tambem e um <p>.
   Cinza sobre amarelo dava 4,05:1 e nao passava no criterio de leitura. */
.card .card__flag{color:var(--preto)}
.card__flag{
  display:inline-block; align-self:flex-start; font-size:.66rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; background:var(--amarelo);
  padding:4px 9px; border-radius:3px; margin:0 0 9px;
}
.card p{font-size:.9rem; color:var(--cinza)}
.card h3{margin-bottom:8px}
.tick{margin:0 0 16px; display:grid; gap:7px}
.tick li{position:relative; padding-left:21px; font-size:.85rem; color:var(--preto); line-height:1.45}
.tick li::before{
  content:""; position:absolute; left:0; top:.42em; width:11px; height:6px;
  border-left:2px solid var(--ciano); border-bottom:2px solid var(--ciano);
  transform:rotate(-45deg);
}
.card__preco{font-size:.9rem; font-weight:700; color:var(--preto); margin:0 0 12px}
.card__preco:empty{display:none}
.card__preco b{font-size:1.2rem}
.card .btn{margin-top:auto}

/* ---------- passos ---------- */
.steps{display:grid; gap:22px; counter-reset:s; margin-bottom:38px}
.steps li{position:relative; padding-left:56px}
.steps__n{
  position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; font-size:1.1rem;
  font-family:var(--titulo); font-weight:400;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.2); color:#fff;
}
/* Sao quatro passos e sao quatro cores de processo. Usar a sequencia CMYK
   aqui repete o sistema que ja aparece na faixa de prova e nos marcadores
   de lista, e tira o amarelo do lugar decorativo: ele voltou a significar
   so prazo. O quarto passo e o K, que em fundo escuro vira branco, do
   mesmo jeito que a versao negativa do logotipo. */
.steps li:nth-child(1) .steps__n{color:var(--ciano); border-color:var(--ciano)}
.steps li:nth-child(2) .steps__n{color:var(--magenta-claro); border-color:var(--magenta-claro)}
.steps li:nth-child(3) .steps__n{color:var(--amarelo); border-color:var(--amarelo)}
.steps li:nth-child(4) .steps__n{color:#fff; border-color:rgba(255,255,255,.55)}
.steps h3{color:#fff; margin-bottom:5px}
.steps p{color:rgba(255,255,255,.7); font-size:.92rem; margin:0}

.ctaband{
  display:grid; gap:16px; align-items:center; padding:24px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r);
}
.ctaband p{margin:0; color:rgba(255,255,255,.8); font-size:.95rem}
.ctaband strong{color:#fff}

/* ---------- regras do TSE ---------- */
/* Bloco de autoridade. Esta secao e o argumento comercial mais forte
   da pagina, entao ganha tratamento de documento tecnico: borda densa,
   cabecalho solido e listas com respiro, em vez de card generico. */
.lawbox{background:#fff; border:1px solid var(--preto); border-radius:var(--r);
        overflow:hidden; box-shadow:4px 4px 0 rgba(0,0,0,.06)}
.lawbox h3{
  display:flex; align-items:center; gap:11px; font-size:1.05rem;
  margin:0; padding:15px 20px; color:#fff; letter-spacing:-.02em;
}
/* O magenta da marca com texto branco fica em 4,38:1, logo abaixo do
   minimo de leitura. Um tom mais fechado aqui, so no fundo do cabecalho,
   resolve sem mexer no magenta da marca, que segue intacto na barra CMYK. */
.lawbox--ok h3{background:var(--ciano); color:#04283a}
.lawbox--no h3{background:#D4126F}
.lawbox h3 span{
  width:23px; height:23px; border-radius:3px; display:grid; place-items:center;
  font-size:.95rem; font-weight:700; flex:none; background:rgba(255,255,255,.85);
}
/* O + e o x ficam sobre pastilha branca translucida, entao herdam o fundo
   por baixo. Ciano e magenta puros ali davam 2,50:1 e 3,45:1: o simbolo
   sumia no sol. Versoes fechadas das mesmas cores mantem o codigo visual. */
.lawbox--ok h3 span{color:#04283a}
.lawbox--no h3 span{color:#7A0A44}
.lawbox ul{display:grid; gap:0; padding:0}
.lawbox li{
  font-size:.87rem; color:var(--cinza); line-height:1.5;
  padding:13px 20px; border-bottom:1px solid var(--linha);
}
.lawbox li:last-child{border-bottom:0}
.lawbox strong{color:var(--preto); font-weight:700}
.lawnote{
  margin-top:22px; padding:15px 18px; background:#fff;
  border:1px solid var(--linha); border-left:3px solid var(--azul);
  border-radius:0 var(--r) var(--r) 0;
}
.lawnote p{margin:0; font-size:.78rem; color:var(--cinza); line-height:1.55}

/* ---------- tarja legal ---------- */
.sec--legal{background:var(--branco); border-top:1px solid var(--linha)}
.legal{display:grid; gap:30px; align-items:center}
.legal h2{margin-bottom:14px}
.legal p{color:var(--cinza); font-size:.95rem}
.legal .btn{margin-top:6px}
.legal__demo{background:var(--fundo); border:1px solid var(--linha); border-radius:var(--r); padding:20px}
.legal__demo-t,.legal__demo-f{font-size:.72rem; color:var(--cinza); text-align:center; margin:0}
.legal__demo-t{text-transform:uppercase; letter-spacing:.1em; font-weight:800; margin-bottom:12px}
.legal__demo-f{margin-top:12px}
.legal__strip{
  background:#fff; border:1px solid var(--preto); border-radius:3px; padding:11px 13px;
  display:grid; gap:3px; font-size:.66rem; color:var(--preto);
  font-family:ui-monospace,Menlo,Consolas,monospace; line-height:1.45;
}
.legal__strip b{font-weight:700}

/* ---------- cobrimos orcamento ---------- */
.sec--match{background:var(--preto); color:#fff; padding:56px 0}
/* Era uma coluna de 680px num container de 1180, e a metade direita
   ficava vazia: a unica secao da pagina com cara de inacabada. As
   condicoes da cobertura, que estavam num paragrafo cinza denso no fim do
   texto, viraram uma caixa a direita. Preenche o vazio com conteudo em
   vez de enfeite, e o que era letra miuda vira lista escaneavel.
   Mesmo tratamento da caixa "como sai no seu material", que ja funciona
   bem na secao da tarja. */
.match{display:grid; gap:30px; align-items:start}
/* Entre 640 e 960px a secao ainda e de coluna unica, e sem limite o texto
   esticaria pela largura toda do container. Acima de 960 o grid ja aperta
   a coluna, entao este limite nao chega a valer. */
.match__txt{max-width:640px}
.match h2{color:#fff; font-size:1.9rem; margin-bottom:16px}
.match__lead{font-size:1.05rem; color:rgba(255,255,255,.82); margin-bottom:26px}
.match .btn--lg{width:auto; display:inline-flex}

.match__box{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r); padding:22px;
}
.match__box-t{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; font-weight:800;
  color:rgba(255,255,255,.66); margin:0 0 14px;
}
.match__list{display:grid; gap:10px; margin:0 0 16px; padding:0; list-style:none}
.match__list li{position:relative; padding-left:20px; font-size:.92rem; color:#fff; line-height:1.4}
/* Marcador em CMYK, o mesmo codigo das listas de beneficio dos cards */
.match__list li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:9px; height:9px; border-radius:2px; background:var(--ciano);
}
.match__list li:nth-child(2)::before{background:var(--magenta-claro)}
.match__list li:nth-child(3)::before{background:var(--amarelo)}
.match__list li:nth-child(4)::before{background:#fff}
.match__cond{font-size:.82rem; color:rgba(255,255,255,.6); line-height:1.6; margin:0}

/* ---------- galeria ---------- */
.gal{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}

/* ---------- faq ---------- */
.faq{display:grid; gap:10px}
.faq details{background:#fff; border:1px solid var(--linha); border-radius:var(--r); overflow:hidden}
.faq summary{
  cursor:pointer; padding:17px 46px 17px 18px; font-weight:700; font-size:.95rem;
  position:relative; list-style:none; line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:20px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--cinza); border-bottom:2px solid var(--cinza);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s;
}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq details[open] summary{color:var(--magenta)}
.faq details{transition:border-color .2s ease}
.faq details:hover{border-color:#b9b9b9}
.faq details[open]{border-color:var(--magenta)}
.faq summary:focus-visible{outline:3px solid var(--ciano); outline-offset:-3px}
.hd__nav a:focus-visible,.ft a:focus-visible{outline:3px solid var(--ciano); outline-offset:3px}
.hd__nav a{position:relative}
.hd__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px;
  background:var(--magenta); transform:scaleX(0); transform-origin:left;
  transition:transform .22s ease;
}
.hd__nav a:hover::after{transform:scaleX(1)}
.faq p{margin:0; padding:0 18px 18px; font-size:.9rem; color:var(--cinza)}

/* ---------- cta final ---------- */
.final{background:var(--escuro); color:#fff; padding:58px 0; text-align:center}
.final__in{display:grid; justify-items:center; gap:0}
.final .brand__cmyk{margin-bottom:22px}
.final h2{color:#fff; font-size:1.75rem; max-width:16ch; margin-bottom:12px}
.final p{color:rgba(255,255,255,.68); max-width:44ch; margin-bottom:26px}
.final b{color:var(--amarelo)}
.final .btn--lg{max-width:400px}

/* ---------- reticula de meio-tom ----------
   O ponto de meio-tom e como toda impressao, offset ou digital, forma cor:
   pontinhos numa grade deslocada, um ciclo por linha. E o motivo que ja
   aparece no logo do Grupo Chen, e e o unico enfeite desta pagina que nao
   caberia em site de outro ramo. Concorrente copia layout, nao copia isso.

   Duas grades iguais, uma deslocada em meio passo, formam o encaixe em
   losango da retícula de verdade, em vez de um quadriculado de tabela.

   A primeira camada e um degrade da propria cor do fundo por cima dos
   pontos: eles aparecem no topo da faixa e somem antes de encostar no
   texto. Textura de fundo, nao estampa.

   Tudo em gradiente, entao custa zero byte de imagem e nunca pixela.
   Esta regra vem depois das tres secoes escuras de proposito, para
   sobrescrever o `background` que cada uma define. */
.hero,
.sec--dark,
.final{
  background-color:var(--escuro);
  background-image:
    linear-gradient(180deg, rgba(17,17,17,0) 0%, rgba(17,17,17,.6) 42%, var(--escuro) 76%),
    radial-gradient(rgba(255,255,255,.15) 1.05px, transparent 1.15px),
    radial-gradient(rgba(255,255,255,.15) 1.05px, transparent 1.15px);
  background-size:auto, 13px 13px, 13px 13px;
  background-position:0 0, 0 0, 6.5px 6.5px;
  background-repeat:no-repeat, repeat, repeat;
}

/* ---------- rodape ---------- */
.ft{background:var(--preto); color:rgba(255,255,255,.62); padding:44px 0 0; font-size:.85rem}
.ft__in{display:grid; gap:28px; padding-bottom:32px}
.ft h3{color:#fff; font-size:.72rem; text-transform:uppercase; letter-spacing:.13em; margin-bottom:12px}
.ft p{margin:0 0 7px}
.ft a{color:rgba(255,255,255,.62); text-decoration:none;
      border-bottom:1px solid rgba(255,255,255,.2);
      display:inline-block; padding:14px 0; line-height:1.2}
.ft a:hover{color:#fff}
.ft__col p:has(a){margin-bottom:0}
/* Mesmo vetor do cabecalho, em branco. No negativo o bloco K acompanha a
   tipografia e fica branco tambem, igual a versao oficial da marca. */
.ft__logo{width:100%; max-width:230px; height:auto; color:#fff; display:block; margin-bottom:14px}
.ft__desc{font-size:.78rem; max-width:30ch}
/* .4 dava 3,81:1 num texto de 11px. Quem le isso esta no celular, na rua,
   com sol batendo na tela. .58 passa no minimo sem virar texto principal. */
.ft__mini{font-size:.72rem; color:rgba(255,255,255,.58); line-height:1.5}
.ft__bot{border-top:1px solid rgba(255,255,255,.12); padding-top:18px; padding-bottom:22px; display:grid; gap:8px}
.ft__bot p{font-size:.75rem; margin:0}

/* ---------- botao fixo mobile ---------- */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:60; padding:10px 14px
  calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-top:1px solid var(--linha);
}
body{padding-bottom:74px}

/* ---------- aviso de configuracao pendente ---------- */
.setup-warn{
  position:fixed; left:12px; right:12px; top:12px; z-index:999;
  background:#FFF3CD; border:2px solid #E0A800; border-radius:var(--r);
  padding:13px 16px; font-size:.83rem; color:#5a4300; box-shadow:var(--sombra);
  line-height:1.5;
}
.setup-warn b{display:block; margin-bottom:3px; font-size:.9rem}
.setup-warn code{background:rgba(0,0,0,.08); padding:1px 5px; border-radius:3px;
                 font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.9em}

/* ---------- imagem que nao carregou ----------
   Entra no lugar da foto quando o arquivo nao existe, dizendo qual
   caminho o site tentou abrir. Ver o bloco 9 do main.js. Herda a classe
   da imagem original, entao continua ocupando a mesma celula da grade. */
.img-falta{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; width:100%; padding:20px; aspect-ratio:4/3;
  border:2px dashed var(--linha); border-radius:var(--r);
  background:var(--fundo); color:var(--cinza);
  text-align:center; font-size:.78rem; line-height:1.4;
  box-shadow:none;
}
.img-falta b{
  font-family:var(--titulo); font-weight:400; font-size:.92rem;
  color:var(--preto); letter-spacing:-.02em;
}
.img-falta code{
  background:rgba(0,0,0,.06); padding:2px 6px; border-radius:3px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.92em;
  word-break:break-all; color:var(--preto);
}

/* =============================================================
   TABLET
   ============================================================= */
@media (min-width:640px){
  h1{font-size:2.95rem}
  h2{font-size:2.3rem}
  .hero h1{font-size:2.6rem}
  .strip__in{grid-template-columns:repeat(4,1fr)}
  .grid--2{grid-template-columns:1fr 1fr}
  .grid--4{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:repeat(3,1fr)}
  .btn--lg{width:auto}
  .hero__micro{text-align:left}
  .ctaband{grid-template-columns:1fr auto}
  .legal{grid-template-columns:1.3fr 1fr}
  .ft__in{grid-template-columns:repeat(2,1fr)}
  .ft__bot{grid-template-columns:auto 1fr; align-items:center; gap:20px}
  .ft__bot .ft__mini{text-align:right}
  .topbar__cmyk{display:inline-flex}
  .sec{padding:70px 0}
  .steps{grid-template-columns:repeat(2,1fr); gap:26px 30px}
}

/* =============================================================
   DESKTOP
   ============================================================= */
@media (min-width:960px){
  .hd__nav{display:flex}
  .hero{padding:64px 0 72px}
  .hero__in{grid-template-columns:1.08fr .92fr; align-items:center; gap:48px}
  /* Reduzido de 3.6rem. A Montserrat e mais larga que a Archivo Black no
     mesmo corpo, e a manchete passou a quebrar em seis linhas, deixando
     "estar" orfa numa linha e partindo "48 / horas" no ponto de maior
     impacto. Pior: empurrava o botao principal para fora da primeira tela,
     numa pagina que vive de trafego pago. */
  /* 24ch, e nao menos: "Seu adesivo pode estar" tem 22 caracteres, e com a
     medida mais curta ele quebrava deixando "estar" sozinho numa linha
     inteira. Com esta largura o balanceamento consegue fechar em tres
     linhas parelhas, uma frase inteira em cada. */
  .hero h1{font-size:2.9rem; letter-spacing:-.024em; max-width:24ch}
  .grid--4{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(4,1fr)}
  .ft__in{grid-template-columns:1.4fr 1fr 1fr 1fr}
  .sticky{display:none}
  body{padding-bottom:0}
  .final h2{font-size:2.5rem}
  .match{grid-template-columns:1.15fr .85fr; gap:56px}
  .match h2{font-size:2.5rem}
  .sec{padding:84px 0}
}

/* =============================================================
   ACESSIBILIDADE
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

@media print{
  .sticky,.hd,.topbar{display:none}
}