/* ═══════════════════════════════════════════════════════
   NForce — PPF e Window Film
   Direção: cabine de pintura. Fundo claro, fotos densas,
   uma única cor de acento. O motivo é sempre o mesmo:
   uma borda que atravessa e revela.
   ═══════════════════════════════════════════════════════ */

:root{
  /* Todas retiradas do logo da NForce, não inventadas.
     Medidas de contraste sobre --cabine anotadas ao lado.  */
  --cabine:   #E7EBEE;   /* fundo claro, frio — derivado do #EAF4FB da marca */
  --gelo:     #EAF4FB;   /* claro da marca, para texto sobre escuro          */
  --aluminio: #B1C2CB;   /* cinza frio da marca — fios e bordas              */
  --grafite:  #4A555C;   /* texto de apoio                          6.4:1    */
  --breu:     #041115;   /* preto-azulado da marca                 16.0:1    */
  --nforce:   #005DF4;   /* AZUL DA MARCA — preenchimentos e marcas  4.3:1   */

  /* O azul da marca dá 4.3:1 sobre o fundo claro: aprovado para botão
     e borda (mínimo 3:1), reprovado para texto pequeno (mínimo 4.5:1).
     Por isso dois tokens — e ambos trocam de valor no escuro.        */
  --acento:     #005DF4;   /* preenchimento, borda, fio              */
  --acento-txt: #004ACC;   /* texto pequeno sobre claro       5.8:1  */

  --disp: 'Archivo', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --pad-i: clamp(1.25rem, 5vw, 4rem);
  --pad-b: clamp(4.5rem, 12vw, 9rem);
  --max: 1240px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin:0;
  background: var(--cabine);
  color: var(--breu);
  font-family: var(--disp);
  font-variation-settings: 'wdth' 100;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; height:auto; display:block; }
h1,h2,h3{ margin:0; }
p{ margin:0 0 1em; }

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background: var(--breu); color: var(--cabine);
  padding:.75rem 1rem; font-family: var(--mono); font-size:.8rem;
}
.skip:focus{ left:0; }

/* ── tipografia de sistema ───────────────────────────── */
.label{
  font-family: var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color: var(--grafite); margin:0 0 1.75rem;
}
.label--claro{ color: var(--grafite); }

.h2{
  font-size: clamp(1.9rem, 5.2vw, 3.4rem);
  font-variation-settings: 'wdth' 125;
  font-weight:700; line-height:1.02; letter-spacing:-.022em;
  text-transform: uppercase; margin:0 0 1.5rem;
}
.h2--claro{ color: var(--gelo); }

.intro{ max-width: 46ch; color: var(--grafite); }
.sec--escura .intro{ color: var(--grafite); }

.cap{
  font-family: var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform: uppercase; color: var(--grafite); margin-top:1rem;
}

.rule{
  border:0; height:1px; background: var(--aluminio);
  margin:0 0 3rem; transform-origin:left center;
}

/* ── botões e links ──────────────────────────────────── */
.btn{
  display:inline-block; text-decoration:none;
  font-family: var(--mono); font-size:.78rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  padding:1rem 1.6rem; border:1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--accent{ background: var(--acento); color:#fff; }
.btn--accent:hover{ background:#0049CC; }
.btn--ghost{ border-color: currentColor; color: var(--breu); }
.btn--ghost:hover{ background: var(--breu); color: var(--cabine); }
.btn--g{ padding:1.25rem 2.4rem; font-size:.85rem; }

.link{
  font-family: var(--mono); font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; color: var(--breu);
  text-decoration:none; border-bottom:1px solid var(--acento);
  padding-bottom:.2rem;
}
.link:hover{ color: var(--acento-txt); }
.link--claro{ color: var(--gelo); }

/* ── topo ────────────────────────────────────────────── */
.top{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:1.5rem;
  padding:.9rem var(--pad-i);
  background: color-mix(in srgb, var(--cabine) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--aluminio);
}
.top__logo{ line-height:0; }
.top__logo img{ width:108px; height:auto; }
.top__nav{ display:none; }
.top__cta{ margin-left:auto; padding:.7rem 1.1rem; font-size:.7rem; }

@media (min-width:900px){
  .top__nav{
    display:flex; gap:2rem; margin-left:2rem;
    font-family: var(--mono); font-size:.75rem;
    letter-spacing:.08em; text-transform:uppercase;
  }
  .top__nav a{ color: var(--grafite); text-decoration:none; }
  .top__nav a:hover{ color: var(--breu); }
}

/* ── hero ────────────────────────────────────────────── */
.hero{
  padding-block: clamp(3rem,9vw,5.5rem) 0;
  padding-inline: max(var(--pad-i), calc((100% - var(--max)) / 2));
}
.hero > *{ max-width: var(--max); }

/* O título ocupa a largura inteira. A palavra "PROTEÇÃO" mede ~7× o
   font-size, então em coluna estreita ela estoura — itens de grid têm
   min-width:auto e não encolhem abaixo do min-content.                */
.hero__h1{
  font-size: clamp(2.6rem, 10.5vw, 8.4rem);
  font-variation-settings: 'wdth' 125;
  font-weight:800; line-height:.9; letter-spacing:-.038em;
  text-transform:uppercase; margin:0 0 2.5rem;
  /* flex porque margem de item flex não colapsa: as margens negativas
     abaixo precisam somar para devolver exatamente o espaço do padding. */
  display:flex; flex-direction:column;
}
/* Em português, os diacríticos de caixa alta (Ã, Ê, Ç) passam de 1em: com
   line-height .9 a tinta sai ~0.11em acima e ~0.09em abaixo da caixa. Como
   inset() recorta exatamente na caixa — e não aceita valor negativo — o
   padding amplia a área de recorte e a margem negativa devolve o espaço,
   deixando o layout idêntico. */
.hero__h1 .wipe{
  display:block;
  padding-block:.18em .16em;
  margin-block:-.18em -.16em;
}

.hero__base{ display:grid; gap:2.5rem; }
.hero__intro{ min-width:0; }
.hero__lead{ max-width:42ch; color: var(--grafite); font-size:1.05em; }
.hero__acoes{ display:flex; flex-wrap:wrap; gap:.75rem; margin:2rem 0 3rem; }

.hero__foto{
  position:relative; margin:0 calc(var(--pad-i) * -1);
  overflow:hidden; min-width:0;
}
.hero__foto img{ width:100%; }

/* a borda: fio de luz que atravessa a foto */
.edge{
  position:absolute; top:0; bottom:0; left:0; width:2px;
  background: linear-gradient(180deg,
    transparent, rgba(255,255,255,.9) 18%, rgba(255,255,255,.9) 82%, transparent);
  mix-blend-mode: screen; pointer-events:none; opacity:0;
}

@media (min-width:900px){
  /* Meia tela para o texto, meia para a foto.
     `display:contents` dissolve a caixa de .hero__base para que .hero__intro e
     .hero__foto entrem direto na grade do hero — sem isso a foto ficaria presa
     dentro da coluna do texto e não teria como ocupar a metade direita.        */
  .hero{
    display:grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    column-gap: clamp(2rem,4vw,4rem);
    align-items:center;
    padding-block: clamp(4rem,7vw,6.5rem) clamp(3rem,6vw,6rem);
  }
  .hero__base{ display:contents; }

  .hero .label { grid-column:1; grid-row:1; align-self:end; }
  .hero__h1    { grid-column:1; grid-row:2; }
  .hero__intro { grid-column:1; grid-row:3; align-self:start; min-width:0; }
  .hero__foto  {
    grid-column:2; grid-row:1 / 4; align-self:stretch;
    margin:0; aspect-ratio:auto; min-height:clamp(400px,40vw,560px);
  }
  .hero__foto img{ width:100%; height:100%; object-fit:cover; object-position:62% center; }

  /* "PROTEÇÃO" mede 7.89× o font-size. Com a coluna valendo metade da tela,
     o teto tem de respeitar a coluna mais larga possível: em 1920px+ ela para
     de crescer em 588px, então o máximo que cabe é 588/7.89 ≈ 74.5px. */
  .hero__h1{ font-size: clamp(2.8rem, 5vw, 4.6rem); }
  .hero__acoes{ margin-bottom:0; }
}

/* ── seções ──────────────────────────────────────────── */
.sec{
  padding-block: var(--pad-b);
  /* O padding lateral absorve a centralizacao. Antes cada filho se centralizava
     sozinho com margin-inline:auto — e qualquer regra com o atalho `margin: X 0 0`
     zerava isso e jogava o bloco para a esquerda. Assim a caixa de conteudo ja
     nasce centrada e nenhum filho precisa se virar. */
  padding-inline: max(var(--pad-i), calc((100% - var(--max)) / 2));
}
.sec > *{ max-width: var(--max); }
.sec--escura, .rodape{
  /* Sobre o preto da marca o azul #005DF4 cai para 2.9:1. Nas seções
     invertidas o acento clareia para 6.1:1 e continua sendo o azul.  */
  --acento:     #4D8FFF;
  --acento-txt: #4D8FFF;
  --aluminio:   #2A3439;
  --grafite:    #9BA9B2;
}
.sec--escura{ background: var(--breu); color: var(--gelo); }
/* As seções claras abrem com um <hr class="rule"> que soma 3rem antes do rótulo;
   as escuras não têm esse fio. Sem compensar, o vão entre seções alterna entre
   288px e 336px. Só no desktop — no mobile o ritmo fica como está. */
@media (min-width:900px){
  .sec--escura{ padding-top: calc(var(--pad-b) + 3rem); }
}
.sec--escura .h2{ color: var(--gelo); }

.dupla{ display:grid; gap:1.5rem; }
.corpo{ color: var(--grafite); max-width:56ch; }
.corpo--claro{ color: var(--grafite); }

@media (min-width:900px){
  .dupla{ grid-template-columns: 5fr 6fr; gap: clamp(2rem,5vw,5rem); align-items:start; }
}

/* pilares */
.pilares{
  list-style:none; margin:3.5rem 0 0; padding:0;
  display:grid; gap:0; border-top:1px solid var(--aluminio);
}
.pilares li{
  display:flex; gap:1.25rem; align-items:baseline;
  padding:1.1rem 0; border-bottom:1px solid var(--aluminio);
  font-variation-settings:'wdth' 110; font-weight:600;
  font-size: clamp(1rem,2.6vw,1.25rem);
}
.pilares__n{
  font-family: var(--mono); font-size:.7rem; font-weight:500;
  color: var(--acento-txt); letter-spacing:.1em;
}
@media (min-width:760px){ .pilares{ grid-template-columns:1fr 1fr; column-gap:3rem; } }

/* ── 02 antes/depois — o gesto de assinatura ─────────── */
.ba{
  --p: 50%;
  position:relative; margin:3rem 0 0; overflow:hidden;
  background: var(--breu);
}
.ba__img{ width:100%; display:block; }
.ba__depois{
  position:absolute; inset:0;
  clip-path: inset(0 calc(100% - var(--p)) 0 0);
}
.ba__depois .ba__img{ height:100%; object-fit:cover; }
.ba__edge{
  position:absolute; top:0; bottom:0; left:var(--p); width:2px;
  margin-left:-1px; background:#fff;
  box-shadow:0 0 12px rgba(255,255,255,.55); pointer-events:none;
}
.ba__tag{
  position:absolute; bottom:.85rem;
  font-family: var(--mono); font-size:.62rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.4rem .6rem; background: rgba(14,15,17,.72); color:#fff;
}
.ba__tag--a{ left:.85rem; }
.ba__tag--b{ right:.85rem; }
@media (min-width:700px){
  .ba__tag{ font-size:.68rem; bottom:1.25rem; }
  .ba__tag--a{ left:1.25rem; } .ba__tag--b{ right:1.25rem; }
}
.sec--escura .cap{ color:#9AA1A6; }

/* ── 03 a camada ─────────────────────────────────────── */
.camada{ display:grid; gap:2.5rem; }
.camada__foto{ margin:0; }
.padrao{
  list-style:none; margin:2rem 0 0; padding:0;
  display:grid; gap:.65rem;
  font-family: var(--mono); font-size:.8rem;
  letter-spacing:.06em; text-transform:uppercase; color: var(--grafite);
}
.padrao li::before{ content:'—'; color: var(--acento-txt); margin-right:.6rem; }
@media (min-width:900px){
  .camada{ grid-template-columns: 5fr 6fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
}

/* ── 04 soluções ─────────────────────────────────────── */
.solucoes{ display:grid; gap:2.5rem; margin-top:2.5rem; }
.card__foto{ margin:0 0 1.5rem; overflow:hidden; background: var(--breu); }
.card__foto img{ width:100%; aspect-ratio:1; object-fit:cover; }
/* Os títulos vêm antes da imagem para que as duas colunas alinhem no topo:
   com as fotos primeiro, a diferença de largura vira desalinho e lê como erro. */
.card__t{
  font-size: clamp(1.4rem,4vw,2.1rem); font-variation-settings:'wdth' 125;
  font-weight:700; text-transform:uppercase; letter-spacing:-.015em;
  line-height:1.05; margin:0 0 1.25rem; min-height:3.2em;
}
.card__t span{
  display:block; font-family: var(--mono); font-size:.72rem; font-weight:400;
  letter-spacing:.14em; color: var(--grafite); margin-top:.5rem;
  text-transform:none;
}
@media (min-width:760px){ .card__t{ min-height:0; } }
.card p{ color: var(--grafite); max-width:42ch; }
.lista{ list-style:none; margin:0 0 1.25rem; padding:0; color: var(--grafite); }
.lista li{ padding:.45rem 0; border-bottom:1px solid var(--aluminio); }
@media (min-width:760px){
  .solucoes{ grid-template-columns: 7fr 5fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
}

/* ── 05 processo ─────────────────────────────────────── */
.processo{
  list-style:none; margin:3rem 0 0; padding:0;
  display:grid; gap:2.5rem; counter-reset:etapa;
}
.etapa figure{ margin:0 0 1.25rem; overflow:hidden; }
.etapa img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.etapa__n{
  font-family: var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.14em; color: var(--acento-txt); margin:0 0 .5rem;
}
.etapa__t{
  font-size:1.25rem; font-variation-settings:'wdth' 115; font-weight:700;
  text-transform:uppercase; letter-spacing:-.01em; margin:0 0 .5rem;
}
.etapa__d{ color: var(--grafite); font-size:.95em; margin:0; }
@media (min-width:760px){ .processo{ grid-template-columns:repeat(3,1fr); gap:2rem; } }

/* ── 06 galeria ──────────────────────────────────────── */
.galeria{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:.75rem; margin-top:2.5rem;
}
.galeria figure{ margin:0; overflow:hidden; background: var(--aluminio); }
.galeria img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
@media (min-width:760px){ .galeria{ grid-template-columns:repeat(4,1fr); gap:1rem; } }

/* ── 07 faq ──────────────────────────────────────────── */
.faq{ margin-top:2.5rem; border-top:1px solid var(--aluminio); }
.faq details{ border-bottom:1px solid var(--aluminio); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.4rem 2.5rem 1.4rem 0;
  position:relative; font-weight:600; font-variation-settings:'wdth' 110;
  font-size: clamp(1rem,2.6vw,1.2rem);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; position:absolute; right:.25rem; top:50%;
  transform:translateY(-50%); font-family:var(--mono);
  color: var(--acento-txt); font-size:1.2rem;
}
.faq details[open] summary::after{ content:'–'; }
.faq p{ color: var(--grafite); max-width:60ch; padding-bottom:1.4rem; margin:0; }

/* ── fim ─────────────────────────────────────────────── */
.fim{
  padding-block: var(--pad-b);
  padding-inline: max(var(--pad-i), calc((100% - var(--max)) / 2));
  text-align:left;
}
.fim > *{ max-width: var(--max); }
.fim__h{
  font-size: clamp(2.4rem,9vw,5.5rem); font-variation-settings:'wdth' 125;
  font-weight:800; line-height:.95; letter-spacing:-.03em;
  text-transform:uppercase; margin:0 0 2.5rem;
}
.ponto{ color: var(--acento); }

/* ── rodapé ──────────────────────────────────────────── */
.rodape{
  background: var(--breu); color: var(--grafite);
  padding-block: clamp(3rem,7vw,4.5rem);
  padding-inline: max(var(--pad-i), calc((100% - var(--max)) / 2));
  display:grid; gap:1.75rem;
}
.rodape__logo{ width:120px; }
.rodape__links{
  display:flex; gap:1.75rem; font-family:var(--mono);
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
}
.rodape__links a{ color: var(--gelo); text-decoration:none; border-bottom:1px solid var(--acento); padding-bottom:.15rem; }
.rodape__c{ font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; line-height:1.8; margin:0; }
@media (min-width:760px){
  .rodape{ grid-template-columns:auto 1fr auto; align-items:center; gap:2rem; }
  .rodape__c{ text-align:right; }
}