/* ===========================================================================
   PPF E VINIL — pele escura da página (só desta pasta)

   Este arquivo entra DEPOIS do ../assets/site.css e reescreve por cima dele.
   Nada aqui vaza para /acm, /ps, /policarbonato, /sombrite ou para a home:
   aquelas páginas continuam no azul e laranja de sempre.

   A ideia visual: preto profundo, vermelho de sinalização, tipografia
   condensada em caixa alta e textura de favo ao fundo. É a linguagem que o
   público de envelopamento já reconhece. As artes de referência não foram
   copiadas nem usadas como arquivo: o clima é todo feito em CSS, então não
   existe logo nem foto de terceiro dentro da página.

   Para voltar atrás em qualquer momento: apague a linha que chama este CSS
   no index.html e a página volta ao visual antigo, inteira.
   =========================================================================== */

:root{
  --red:#e10600;          /* vermelho principal, usado em botão e destaque */
  --red-2:#ff2a18;        /* vermelho claro do hover e dos brilhos */
  --red-deep:#8f0400;     /* vermelho escuro dos fundos */
  --bg:#08080a;           /* preto do site */
  --bg-2:#0e0e11;         /* preto um tom acima, das faixas alternadas */
  --panel:#121216;        /* fundo de cartão */
  --panel-2:#191920;      /* fundo de campo de formulário */
  --line-d:#26262e;       /* linha divisória */
  --txt:#f4f4f6;          /* texto claro */
  --txt-2:#b6b6c0;        /* texto de apoio */
  --txt-3:#83838f;        /* texto discreto */

  /* As variáveis abaixo já existiam no site.css. Trocamos o valor delas para
     que tudo que era laranja e azul vire vermelho e preto sem precisar caçar
     cada regra uma por uma. */
  --brand:#e10600;
  --brand-dark:#b00400;
  --navy:#0e0e11;
  --navy-2:#0a0a0c;
  --navy-3:#050506;
  --ink:#f4f4f6;
  --ink-soft:#b6b6c0;
  --muted:#83838f;
  --line:#26262e;
  --bg-alt:#0e0e11;

  /* Textura de favo. Aparece de leve atrás das seções escuras, igual ao fundo
     das artes de referência. */
  --favo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='52' viewBox='0 0 90 52'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='1'%3E%3Cpath d='M0 26 L15 0 L45 0 L60 26 L45 52 L15 52 Z'/%3E%3Cpath d='M60 26 L75 0 L90 26 L75 52 L60 26'/%3E%3C/g%3E%3C/svg%3E");
}

body{
  background:var(--bg);
  color:var(--txt);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---------------------------------------------------------------- TIPOGRAFIA
   Anton nos títulos grandes (a condensada pesada das artes), Barlow Condensed
   nos rótulos e botões, Inter no texto corrido, que é onde se lê de verdade. */
.hero h1,
.sec-head h2,
.vant-copy h2,
.forn h2,
.cta-band h2,
.card h1,
.stat b{
  font-family:"Anton",Impact,"Arial Narrow Bold",sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.005em;
}
.btn,.kicker,.hero-extra-label,.trust-item,.prod .num,.espec-item .num,
.outro .ver,.tab thead th,footer h5,.cidade,.aplic h3,.prod h3,.outro h3,
.espec-item h4,.hero-mat-nome,.faq summary,.passo h2{
  font-family:"Barlow Condensed","Inter",sans-serif;
}

/* -------------------------------------------------------------------- BOTÃO
   Reto, sem canto arredondado, texto em caixa alta e bem espaçado. */
.btn{
  background:var(--red);color:#fff;border-radius:2px;
  font-size:17px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:16px 30px;
  transition:background .14s ease,box-shadow .18s ease,transform .14s ease;
}
.btn:hover{background:var(--red-2);box-shadow:0 10px 30px rgba(225,6,0,.34);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--txt);border:1.5px solid var(--line-d)}
.btn-ghost:hover{background:#17171c}
.rule{background:var(--red);height:4px;border-radius:0}

/* ------------------------------------------------------------------- HEADER */
header{background:#050506;border-bottom:1px solid #1c1c22}
header::after{
  content:"";display:block;height:3px;
  background:linear-gradient(90deg,var(--red) 0%,var(--red) 38%,transparent 38%,transparent 100%);
}
.nav .btn{padding:13px 22px;font-size:15px}

/* --------------------------------------------------------------------- HERO
   Fundo montado inteiro em CSS: brilho vermelho vindo da direita, favo por
   cima e preto por baixo. Se um dia entrar uma foto própria de aplicação,
   é só apontar a variável --hero-foto para o arquivo e ela entra por baixo
   do brilho, sem mexer em mais nada:
   .hero{ --hero-foto:url("../img/hero-ppf-vinil.jpg") center/cover no-repeat; } */
.hero{
  background:
    var(--favo) 0 0 repeat,
    radial-gradient(120% 130% at 88% 8%,rgba(225,6,0,.42) 0%,rgba(143,4,0,.16) 34%,transparent 62%),
    radial-gradient(90% 100% at 0% 100%,rgba(225,6,0,.14) 0%,transparent 55%),
    var(--hero-foto,none),
    linear-gradient(180deg,#0b0b0e 0%,#08080a 100%);
  border-bottom:3px solid var(--red);
  color:#fff;
}
/* A grade azulada de blueprint do site antigo sai daqui: quem faz a textura
   agora é o favo. */
.hero::before{
  background-image:none;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55) 100%);
  opacity:1;-webkit-mask-image:none;mask-image:none;
}
/* Marca gigante atrás do conteúdo, no lugar em que as artes usam a assinatura
   da marca. Fica no fundo e não atrapalha a leitura. */
.hero::after{
  content:"PPF";position:absolute;right:-2vw;bottom:-6vh;z-index:0;pointer-events:none;
  font-family:"Anton",Impact,sans-serif;font-size:34vw;line-height:.8;
  color:#fff;opacity:.028;letter-spacing:-.02em;
}
.crumb{color:var(--txt-3)}
.crumb span{color:#e9e9ee}
.kicker{
  color:var(--red);font-size:13px;font-weight:700;letter-spacing:.22em;
}
.kicker .rule{width:34px;height:2px;background:var(--red)}
.hero h1{
  font-size:clamp(38px,6.2vw,74px);line-height:1.08;letter-spacing:0;
  text-shadow:0 6px 30px rgba(0,0,0,.55);
}
.hero h1 em{color:var(--red);font-style:normal}
.hero p.sub{color:var(--txt-2);max-width:540px}
.hero-badge{color:#e9e9ee;font-size:15px}
.hero-badge svg{stroke:var(--red)}
.hero-extra{border-top:1px solid rgba(255,255,255,.12)}
.hero-extra-label{color:var(--red);letter-spacing:.22em;font-size:12px}
.hero-mat{border-bottom:1px solid rgba(255,255,255,.08)}
.hero-mat-num{color:var(--red)}
.hero-mat-nome{font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;width:148px}
.hero-mat-desc{color:var(--txt-3)}
.hero-atend-txt{color:var(--txt-3)}
.hero-atend a{color:#fff}
.hero-atend a:hover{color:var(--red)}
.hero-atend svg{stroke:var(--red)}

/* ---------------------------------------------------------------- FORMULÁRIO
   Cartão escuro no lugar do branco. O campo continua com contraste alto e
   fonte de 16px, que é o que evita o zoom automático no iPhone. */
.form-card{
  background:linear-gradient(180deg,#141419 0%,#0e0e12 100%);
  color:var(--txt);
  border:1px solid #26262e;border-top:4px solid var(--red);border-radius:3px;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  position:relative;z-index:1;
}
.form-card h2{font-family:"Barlow Condensed","Inter",sans-serif;font-size:27px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#fff}
.form-card .fc-sub{color:var(--txt-3)}
.field label{color:var(--txt-2);text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;font-weight:700}
.field input,.field select,.field textarea{
  background:var(--panel-2);border:1.5px solid #2c2c36;color:#fff;border-radius:2px;
}
.field input::placeholder,.field textarea::placeholder{color:#6a6a76}
/* Preenchimento automático do navegador: o Chrome pinta o campo de azul claro
   por conta própria, o que destoava do cartão escuro. As linhas abaixo mantêm
   o campo escuro e a letra branca mesmo quando ele completa nome, e-mail e
   telefone sozinho. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.tel-wrap input:-webkit-autofill{
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
  -webkit-box-shadow:0 0 0 1000px var(--panel-2) inset;
          box-shadow:0 0 0 1000px var(--panel-2) inset;
  transition:background-color 9999s ease-in-out 0s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--red);box-shadow:0 0 0 3px rgba(225,6,0,.22);background:#1d1d24;
}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23e10600' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E")}
.tel-wrap{background:var(--panel-2);border:1.5px solid #2c2c36;border-radius:2px}
.tel-wrap:focus-within{border-color:var(--red);box-shadow:0 0 0 3px rgba(225,6,0,.22)}
.tel-ddi{background:#23232c;border-right:1.5px solid #2c2c36;color:#e9e9ee}
.field-dica{color:var(--txt-3)}
.form-note{color:var(--txt-3)}
.form-note svg{stroke:#6a6a76}
.form-erro{background:rgba(225,6,0,.12);border:1px solid rgba(225,6,0,.45);color:#ff8b82}
.form-erro a{color:#ff8b82}
.form-ok h3{color:#fff;text-transform:uppercase;font-family:"Barlow Condensed","Inter",sans-serif;font-size:26px;letter-spacing:.04em}
.form-ok p{color:var(--txt-2)}
.form-ok svg{stroke:#3ddc84}

/* --------------------------------------------------------------------- TRUST */
.trust{background:#050506;border-bottom:1px solid #1c1c22;border-top:1px solid #1c1c22}
.trust-item{
  color:#e9e9ee;text-transform:uppercase;letter-spacing:.06em;font-size:16px;font-weight:600;
}
.trust-item svg{stroke:var(--red)}

/* ------------------------------------------------------------------ SEÇÕES */
section.block{background:var(--bg);position:relative}
section.block.alt{background:var(--bg-2);border-top:1px solid #16161b;border-bottom:1px solid #16161b}
.sec-head h2{font-size:clamp(30px,4.4vw,52px);line-height:1.12;color:#fff}
.sec-head p{color:var(--txt-2)}

/* Cartões das linhas do material */
.prod{
  background:var(--panel);border:1px solid var(--line-d);border-radius:3px;
  transition:border-color .14s ease,transform .14s ease,box-shadow .14s ease;
  overflow:hidden;
}
.prod:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.5)}
.prod .num{
  font-size:46px;font-weight:700;color:rgba(225,6,0,.9);line-height:1;display:block;
  letter-spacing:0;
}
.prod h3{font-size:27px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#fff;margin-top:6px}
.prod .lead{color:var(--txt-2)}
.prod li{color:var(--txt-2)}
.prod li::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e10600' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-11'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Aplicações */
.aplic{background:var(--panel);border:1px solid var(--line-d);border-radius:3px;transition:border-color .14s ease}
.aplic:hover{border-color:var(--red)}
.aplic .aic{background:rgba(225,6,0,.14);border-radius:2px}
.aplic .aic svg{stroke:var(--red)}
.aplic h3{font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#fff}
.aplic p{color:var(--txt-3)}

/* Vantagens */
.vant-copy h2{font-size:clamp(29px,4vw,48px);line-height:1.12;color:#fff}
.vant-copy p{color:var(--txt-2)}
.vant-list li{color:var(--txt-2)}
.vant-list li b{color:#fff;text-transform:uppercase;font-family:"Barlow Condensed","Inter",sans-serif;font-size:18px;letter-spacing:.03em}
.vant-list li::before{
  border-radius:2px;
  background:rgba(225,6,0,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e10600' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-11'/%3E%3C/svg%3E") center/13px no-repeat;
}
.vant-img{border-radius:3px;border:1px solid var(--line-d)}
/* A foto do estoque é colorida e destoa do preto. Deixamos em preto e branco
   com um véu vermelho por cima, que é o tratamento das artes de referência. */
.vant-img img{filter:grayscale(1) contrast(1.12) brightness(.72)}
.vant-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(225,6,0,.30) 0%,transparent 55%),linear-gradient(0deg,rgba(0,0,0,.5),transparent 60%);
}
.vant-img .tag{background:var(--red);border-radius:2px;text-transform:uppercase;letter-spacing:.06em;font-family:"Barlow Condensed","Inter",sans-serif;font-size:16px;z-index:1}

/* Como especificar — faixa mais escura, com favo ao fundo */
.espec{background:#050506;position:relative;overflow:hidden}
.espec::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--favo) 0 0 repeat,radial-gradient(80% 90% at 100% 0%,rgba(225,6,0,.22),transparent 60%);
}
.espec .wrap{position:relative;z-index:1}
.espec-grid{background:#1e1e26;border:1px solid #2a2a33;border-radius:3px}
.espec-item{background:#0c0c10}
.espec-item .num{color:var(--red);border-color:var(--red);border-radius:2px;font-size:15px;font-weight:700}
.espec-item h4{font-size:20px;text-transform:uppercase;letter-spacing:.04em;color:#fff;font-weight:700}
.espec-item p{color:var(--txt-2)}
.stats{border-top:1px solid rgba(255,255,255,.12)}
.stat b{color:var(--red);font-size:clamp(42px,5.4vw,64px)}
.stat span{color:var(--txt-2);text-transform:uppercase;letter-spacing:.08em;font-size:13px}

/* Tabelas */
.tab-wrap{background:var(--panel);border:1px solid var(--line-d);border-radius:3px}
.tab thead th{background:#1a1a21;color:var(--red);letter-spacing:.14em;font-size:12.5px;font-weight:700;border-bottom:1px solid var(--line-d)}
.tab th,.tab td{border-bottom:1px solid #1e1e25}
.tab tbody td{color:var(--txt-2)}
.tab tbody td:first-child{color:#fff}
.tab tbody tr:hover td{background:rgba(225,6,0,.06)}
.tab-nota{color:var(--txt-3)}
.tab-nota b{color:#fff}

/* Amostras de cor — no preto elas ganham destaque, então só ajustamos a borda */
.cor .amostra{border:1px solid #2b2b33;border-radius:3px;box-shadow:inset 0 -24px 36px rgba(0,0,0,.35)}
.cor .nome{color:var(--txt-2);font-size:13.5px}
.cores-nota{color:var(--txt-3)}

/* Bloco de posicionamento */
.forn{background:var(--panel);border:1px solid var(--line-d);border-left:4px solid var(--red);border-radius:3px}
.forn h2{font-size:clamp(26px,3.4vw,42px);line-height:1.14;color:#fff}
.forn p{color:var(--txt-2)}

/* Cidades atendidas */
.cidade{background:var(--panel);border:1px solid var(--line-d);color:var(--txt-2);border-radius:2px;text-transform:uppercase;letter-spacing:.05em;font-size:15px;font-weight:600}
.cidade.base{border-color:var(--red);color:var(--red);background:rgba(225,6,0,.1)}
.cob-nota{color:var(--txt-3)}

/* FAQ */
.faq details{background:var(--panel);border:1px solid var(--line-d);border-radius:3px}
.faq details[open]{border-color:#3a3a45}
.faq summary{color:#fff;font-size:19px;font-weight:600;letter-spacing:.02em}
.faq summary::after{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23e10600' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.faq .resp{color:var(--txt-2)}

/* Outros materiais */
.outro{background:var(--panel);border:1px solid var(--line-d);border-radius:3px}
.outro:hover{border-color:var(--red)}
.outro h3{font-size:23px;text-transform:uppercase;letter-spacing:.04em;color:#fff;font-weight:700}
.outro p{color:var(--txt-3)}
.outro .ver{color:var(--red);text-transform:uppercase;letter-spacing:.07em;font-weight:700;font-size:16px}

/* Faixa final de chamada — vermelho chapado, o ponto mais forte da página */
.cta-band{background:var(--red);position:relative;overflow:hidden}
.cta-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:var(--favo) 0 0 repeat;
}
.cta-band .wrap{position:relative;z-index:1}
.cta-band h2{font-size:clamp(28px,3.8vw,46px);line-height:1.16;color:#fff}
.cta-band .btn{background:#050506;color:#fff}
.cta-band .btn:hover{background:#1c1c22;box-shadow:0 10px 30px rgba(0,0,0,.4)}

/* Rodapé */
footer{background:#050506;color:var(--txt-3);border-top:1px solid #17171d}
footer p.about{color:var(--txt-3)}
footer h5{color:var(--red);letter-spacing:.18em;font-size:14px;font-weight:700}
.foot-item svg{stroke:var(--red)}
.foot-item a,.foot-item span,.foot-links a{color:var(--txt-2)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.07);color:#5a5a66}

/* ------------------------------------------------------- PÁGINA DE OBRIGADO */
body.obrigado main{background:var(--bg);position:relative}
body.obrigado main::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--favo) 0 0 repeat,radial-gradient(70% 80% at 50% 0%,rgba(225,6,0,.2),transparent 60%);
}
body.obrigado main .wrap{position:relative;z-index:1}
.card{background:var(--panel);border:1px solid var(--line-d);border-top:4px solid var(--red);border-radius:3px}
.card h1{font-size:clamp(30px,4.6vw,44px);line-height:1.14;color:#fff}
.card .lead{color:var(--txt-2)}
.passos{border-top:1px solid var(--line-d)}
.passo .num{color:var(--red);border-color:var(--red);border-radius:2px}
.passo h2{color:#fff;text-transform:uppercase;letter-spacing:.04em;font-size:18px;font-weight:700}
.passo p{color:var(--txt-3)}
.aviso{color:var(--txt-3)}
.aviso svg{stroke:var(--txt-3)}
body.obrigado footer .end{color:var(--txt-3)}

/* --------------------------------------------------------------- RESPONSIVO
   No celular a tipografia gigante precisa respirar mais e a marca do fundo do
   hero sai de cena, senão come o texto. */
@media (max-width:680px){
  .hero::after{display:none}
  /* A linha de cima do hero é longa e o espaçamento entre letras é grande:
     no celular ela precisa poder quebrar em duas, senão passa da tela. */
  .kicker{flex-wrap:wrap;justify-content:center;text-align:center;line-height:1.5;font-size:11px;letter-spacing:.13em}
  .hero h1{font-size:clamp(34px,9vw,44px)}
  .sec-head h2{font-size:clamp(28px,7.4vw,36px)}
  .prod .num{font-size:38px}
  .btn{font-size:16px;padding:15px 24px}
  .trust-item{font-size:15px}
}