/* ============================================================
   COMPONENTES
   Cards de categoria, marcas, pilares, frentes e rodapé.
   ============================================================ */

/* ---------- grade de categorias ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px;background:var(--line)}
.ccard{position:relative;background:var(--white);padding:26px 24px 24px;text-align:left;min-height:210px;display:flex;flex-direction:column;gap:10px;overflow:hidden;transition:color .2s}
.ccard::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,transparent 0 50%,var(--yellow) 50% 100%);transform:translate(60%,60%);transition:transform .28s cubic-bezier(.3,.8,.4,1);z-index:0}
.ccard:hover::after{transform:translate(28%,28%)}
.ccard > *{position:relative;z-index:1}
.ccard .n{font-size:14px;font-weight:800;color:var(--ink-3);letter-spacing:.14em}
.ccard h3{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--navy)}
.ccard p{font-size:16px;color:var(--ink-2);flex:1}
.ccard .go{font-size:15px;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:8px}
.ccard:hover .go{gap:14px}

/* ---------- banda amarela / compat ---------- */
.compat-band{position:relative;overflow:hidden}
.compat-band .sym{left:-10%;bottom:-70%;width:min(700px,62vw);color:var(--navy);opacity:.07}
.cbgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(30px,5vw,70px);align-items:center;position:relative;z-index:2}
.cbcard{background:var(--navy);color:var(--cream);padding:clamp(22px,3vw,34px)}
.cbstep{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid rgba(234,232,225,.15)}
.cbstep:last-of-type{border-bottom:none}
.cbstep i{font-style:normal;width:30px;height:30px;flex:none;display:grid;place-items:center;background:rgba(234,217,10,.15);color:var(--yellow);font-weight:900;font-size:15px}
.cbstep b{display:block;font-size:18px;color:var(--white)}
.cbstep span{font-size:15.5px;color:#9db3c0}

/* ---------- marcas ---------- */
.brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:2px;background:rgba(234,232,225,.14)}
.bcard{background:var(--navy);padding:26px 18px;text-align:center;transition:background .2s}
.bcard:hover{background:var(--navy-l)}
/* A placa clara atrás do logotipo. O cartão é navy e a arte dos
   fabricantes vem escura sobre transparente — sem a placa, a
   TAKARADA e a CONTROL STAR sumiam no fundo. A placa também
   iguala logos de proporções diferentes, e o `contain` impede
   que algum deles estique. */
/* `.bcard .blogo` e não `.blogo`: a placa é um <span>, e logo
   abaixo mora `.bcard span`, que vale (0,0,1,1) contra (0,0,1,0)
   e venceria — o logotipo perdia o grid, encostava no canto e
   ainda herdava o margin-top da legenda. Duas classes resolvem. */
.bcard .blogo{display:flex;align-items:center;justify-content:center;
  background:var(--white);height:clamp(78px,8.6vw,104px);
  padding:clamp(6px,0.8vw,10px) clamp(8px,1.2vw,14px);margin:0 0 16px;
  font-size:0;overflow:hidden}
/* Sem logotipo, a placa fica com a cunha da marca em cinza claro:
   a fileira mantém a mesma altura, e o card não repete o nome que
   já está logo abaixo dele. */
.bcard .blogo--vazia{background:#eceae3}
.bcard .blogo-cunha{width:30px;height:30px;fill:#c3c0b6;flex:none}
/* O teto da altura é em PIXEL, não em 100%.
   A arte do fabricante é quadrada, 400×400. Com max-height:100% a
   porcentagem não resolvia contra a área do flex/grid e valia como
   `none`: o max-width dava 195px de largura, a imagem virava
   195×195 dentro de uma caixa de 58px e vazava 68px para cada
   lado, cobrindo o nome da marca logo abaixo.
   O overflow:hidden é o cinto: qualquer arte fora do previsto para
   dentro da placa, nunca por cima do texto. */
/* A ARTE JA VEM NORMALIZADA NO ARQUIVO.

   Os nove logotipos foram postos numa tela comum de 480x240,
   cada um dimensionado para ocupar a MESMA AREA de tinta — nao
   a mesma altura, nem a mesma largura.

   A diferenca importa: o da Takarada e seis vezes mais largo
   que alto, o da Interpump e mais alto que largo. Igualando a
   altura, o primeiro vira uma faixa de ponta a ponta; igualando
   a largura, o segundo vira um poste. Igualando a AREA, os dois
   pesam o mesmo na fileira, que e o que o olho compara.

   Com a tela igual em todos, aqui basta preencher: o recuo que
   cada um precisa ja esta dentro do proprio arquivo. */
.bcard .blogo img{width:100%;height:100%;object-fit:contain;display:block}
.bcard b{display:block;font-weight:900;font-size:19.5px;letter-spacing:.06em;color:var(--white)}
.bcard span{display:block;font-size:13px;color:#8ba3b2;margin-top:6px;letter-spacing:.06em}
.bcard.pend{border:1px dashed rgba(234,232,225,.3);background:transparent}
.bcard.pend b{color:#8ba3b2;font-size:15px;font-weight:600;letter-spacing:0}

/* ---------- pilares ---------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;background:var(--line)}
.pil{background:var(--cream-l);padding:30px 26px 34px}
.pil b{display:block;font-family:var(--fb);font-size:34.5px;color:var(--navy);line-height:1;margin-bottom:14px}
.pil h3{font-size:22px;font-weight:800;margin-bottom:8px;color:var(--navy)}
.pil p{font-size:16.5px;color:var(--ink-2)}

/* ---------- frentes do grupo ---------- */
.frentes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px}
.fr{padding:28px 26px;border:1px solid rgba(234,232,225,.22);position:relative;overflow:hidden}
.fr b{display:block;font-size:23px;font-weight:900;color:var(--white);letter-spacing:-.02em}
.fr span{display:block;font-size:15.5px;color:#9db3c0;margin-top:8px}
.fr i{position:absolute;right:0;top:0;bottom:0;width:8px}
.fr.is{border-color:var(--yellow)}

/* ---------- impacto ---------- */
.impact{font-family:var(--fb);font-size:clamp(30px,5.2vw,71.5px);line-height:1.1;letter-spacing:-.01em;max-width:15ch}

/* ---------- rodapé ---------- */
footer.site{background:var(--navy-x);padding:clamp(46px,6vw,80px) 0 28px;font-size:16.5px}
.fcols{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:36px}
footer.site img{height:96px;width:auto;margin-bottom:18px}
footer.site h4{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);margin-bottom:16px;font-weight:800}
footer.site li{margin-bottom:9px;color:#a8bcc7}
footer.site li:hover{color:var(--white)}
.flegal{margin-top:46px;padding-top:22px;border-top:1px solid rgba(234,232,225,.14);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#8ba3b2;font-size:14.5px}

/* O titulo do card varia de uma para duas linhas ("Motores hidraulicos"
   x "Kits hidraulicos Hyva e Marrucci"), e isso empurrava a descricao
   para alturas diferentes dentro da mesma fileira. Reservando as duas
   linhas, todo o texto abaixo do titulo comeca alinhado.            */
.ccard .cbody h3{min-height:calc(2 * 1.1em)}