/*
Theme Name: RAAF Premium Novo
Theme URI: https://raaf.co
Author: RAAF.CO
Author URI: https://raaf.co
Description: Tema premium de confecção B2B para marcas que não podem errar.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: raaf-premium-novo
*/

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--blk:#0d0d0d;--ofw:#f5f2ec;--gld:#a07a3a;--glg:#c8a96e;--gry:#888780;--bdr:rgba(255,255,255,0.08)}
body{background:#fff;color:#1a1a18;font-family:'DM Sans',sans-serif;font-weight:300}
.gld{color:var(--gld)}
.kk{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.22em;color:var(--gld);display:flex;align-items:center;gap:10px;text-transform:uppercase}
.kk::before{content:'';width:20px;height:1px;background:var(--gld);display:inline-block}

/* NAV — fundo preto */
nav{background:var(--blk);padding:1rem 3rem;display:flex;justify-content:space-between;align-items:center;border-bottom:.5px solid var(--bdr);position:sticky;top:0;z-index:100}
.logo{font-size:20px;font-weight:500;letter-spacing:.12em;color:#f5f2ec}
.nl{display:flex;gap:2rem;font-size:13px;color:#888780}
.nl a{color:#888780;text-decoration:none;transition:color .2s}
.nl a:hover{color:var(--glg)}
.nb{background:var(--glg);color:var(--blk);font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.1em;padding:8px 18px;border-radius:4px;cursor:pointer;text-decoration:none}

/* HERO */
.hero{padding:5rem 3rem 4rem;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
h1{font-family:'Playfair Display',serif;font-size:52px;line-height:1.05;margin-bottom:1.5rem}
.hs{font-size:15px;color:#888780;line-height:1.7;max-width:380px;margin-bottom:2rem}
.hb{display:flex;gap:12px}
.bd{background:#1a1a18;color:#fff;font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.1em;padding:12px 24px;border-radius:4px;cursor:pointer;text-decoration:none;display:inline-block}
.bo{border:.5px solid rgba(0,0,0,.2);color:#888780;font-size:13px;padding:12px 24px;border-radius:4px;cursor:pointer}
.hi{border-radius:12px;width:100%;aspect-ratio:4/3;object-fit:cover;display:block}

/* CLIENTES TICKER */
.ticker-track{display:flex;align-items:center;gap:0;white-space:nowrap;animation:ticker 40s linear infinite}
.ticker-track:hover{animation-play-state:paused}
.ticker-item{font-size:13px;font-weight:500;color:#1a1a18;padding:0 1.2rem}
.ticker-sep{color:#c8a96e;font-size:14px;flex-shrink:0}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* PORTFÓLIO */
.pf{padding:4rem 3rem;background:#fff}
.sh{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2rem}
.st{font-family:'Playfair Display',serif;font-size:32px}
.vt{font-size:12px;color:#888780;border:.5px solid rgba(0,0,0,.15);padding:7px 14px;border-radius:4px;cursor:pointer}
.foto{position:relative;overflow:hidden}
.foto:hover img{transform:scale(1.04)}
.ov{position:absolute;bottom:0;left:0;right:0;padding:1rem;background:linear-gradient(transparent,rgba(13,13,13,.85))}
.fk{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.18em;color:var(--glg);margin-bottom:4px;text-transform:uppercase}
.ft{font-size:13px;font-weight:500;color:#fff}
.g2{display:grid;grid-template-columns:2fr 1fr;gap:2px;margin-bottom:2px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-bottom:2px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-bottom:2px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;margin-bottom:2px}
.g6{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;margin-bottom:2px}
.g7{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cat-block{margin-bottom:3rem}
.cat-label{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;font-size:14px;font-weight:500;color:#1a1a18}
.cat-num{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.2em;color:var(--glg);background:rgba(200,169,110,0.12);padding:4px 10px;border-radius:2px}

/* STATS (mini cards no portfólio) */
.sc{background:#fff;border:.5px solid rgba(0,0,0,.07);padding:1.25rem}
.sc.cr{background:var(--ofw)}
.sn{font-size:22px;font-weight:500;margin-bottom:4px}
.sl{font-size:11px;color:#888780;line-height:1.4}

/* COMO TRABALHAMOS */
.como{background:var(--blk);padding:5rem 3rem}
.como .kk{color:var(--glg)}
.como .kk::before{background:var(--glg)}
.como-title{font-family:'Playfair Display',serif;font-size:32px;color:#f5f2ec;margin:0.5rem 0 3rem}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.step{padding:2rem 1.5rem;border-left:.5px solid rgba(255,255,255,0.1);position:relative}
.step:first-child{border-left:none}
.step-num{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--glg);margin-bottom:1rem}
.step-title{font-size:15px;font-weight:500;color:#f5f2ec;margin-bottom:.5rem}
.step-desc{font-size:13px;color:#5f5e5a;line-height:1.6}
.step-arrow{position:absolute;right:-1px;top:50%;transform:translateY(-50%);color:var(--glg);font-size:18px;z-index:1}

/* SOLUÇÕES */
.sol{background:var(--ofw);padding:4rem 3rem}
.sg{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:2rem}
.sk{background:#fff;padding:1.5rem 1.25rem}
.skn{font-size:14px;font-weight:500;margin:10px 0 6px}
.skd{font-size:12px;color:#888780;line-height:1.5}

/* CTA */
.cta{background:var(--glg);padding:3.5rem 3rem;display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.ctat{font-family:'Playfair Display',serif;font-size:28px;color:var(--blk);margin-bottom:4px}
.ctas{font-size:13px;color:#6b4e1a}

/* FOOTER — fundo preto */
footer{background:var(--blk);padding:4rem 3rem 2rem;border-top:.5px solid rgba(255,255,255,0.06)}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.footer-logo{font-size:22px;font-weight:500;letter-spacing:.12em;color:#f5f2ec;margin-bottom:1rem}
.footer-tagline{font-size:13px;color:#5f5e5a;line-height:1.7;max-width:280px;margin-bottom:1.5rem}
.footer-socials{display:flex;gap:12px}
.social-link{width:36px;height:36px;border:.5px solid rgba(255,255,255,0.12);border-radius:4px;display:flex;align-items:center;justify-content:center;color:#888780;font-size:14px;text-decoration:none;transition:border-color .2s,color .2s}
.social-link:hover{border-color:var(--glg);color:var(--glg)}
.footer-col-title{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.2em;color:#444441;text-transform:uppercase;margin-bottom:1.2rem}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.footer-links a{font-size:13px;color:#5f5e5a;text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--glg)}
.footer-contact-item{font-size:13px;color:#5f5e5a;margin-bottom:.6rem;display:flex;align-items:flex-start;gap:.5rem}
.footer-bottom{border-top:.5px solid rgba(255,255,255,0.06);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-copy{font-family:'DM Mono',monospace;font-size:11px;color:#444441}
.footer-legal{display:flex;gap:1.5rem}
.footer-legal a{font-family:'DM Mono',monospace;font-size:11px;color:#444441;text-decoration:none;transition:color .2s}
.footer-legal a:hover{color:var(--glg)}

/* RESPONSIVO */
@media(max-width:900px){
  nav{padding:1rem 1.5rem;flex-wrap:wrap;gap:1rem}
  .nl{display:none}
  .hero{grid-template-columns:1fr;gap:2rem;padding:3rem 1.5rem}
  h1{font-size:36px}
  .pf{padding:3rem 1.5rem}
  .g5,.g7{grid-template-columns:repeat(2,1fr)}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .g2{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:0}
  .step{border-left:none;border-top:.5px solid rgba(255,255,255,0.1)}
  .step:first-child{border-top:none}
  .step-arrow{display:none}
  .sg{grid-template-columns:repeat(2,1fr)}
  .cta{padding:2.5rem 1.5rem}
  .footer-top{grid-template-columns:1fr 1fr;gap:2rem}
  .como{padding:3rem 1.5rem}
  .sol{padding:3rem 1.5rem}
}
@media(max-width:600px){
  .footer-top{grid-template-columns:1fr}
  .sg{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
}
