/* ============================================================
   SPP · O ALICERCE DA VOLKY — piso industrial, 30 anos.
   Não vende: credencia. Ficha técnica premium, não landing de desejo.
   Paleta: corten + grafite + branco técnico. Sem ouro (salvo selo).
   Tipo: IBM Plex Mono dominante · Archivo corpo · Spectral 1 frase.
   Movimento: NENHUM. Sobriedade radical = credibilidade.
   ============================================================ */

.spp{
  --paper:#EAE8E2;        /* branco técnico */
  --paper-2:#F2F0EA;      /* folha */
  --card:#F5F3ED;
  --ink:#202326;          /* grafite */
  --ink-2:#565A5F;
  --ink-3:#8A8D91;
  --line:#CFCCC4;
  --line-2:#BBB8AF;
  --corten:#A0522D;
  --corten-d:#8A4523;
  --corten-l:#B96A3E;
  --graphite:#1C1F21;     /* fundo escuro */
  --graphite-2:#25292B;
  --on:#E7E4DE;
  --on-2:#A6A9A5;
  --on-3:#74777A;
  --gold:#C9A24E;         /* só no selo do rodapé */

  --fm:'IBM Plex Mono', ui-monospace, monospace;
  --fs:'Archivo', system-ui, sans-serif;
  --fe:'Spectral', Georgia, serif;
  --wrap:1180px;

  font-family:var(--fs);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.spp *{ box-sizing:border-box; }
.spp img{ display:block; max-width:100%; }
.spp ::selection{ background:var(--corten); color:#fff; }
.spp a{ color:inherit; text-decoration:none; }
.spp .mono{ font-family:var(--fm); }

.sp-wrap{ max-width:var(--wrap); margin:0 auto; padding:0 40px; width:100%; }
@media(max-width:720px){ .sp-wrap{ padding:0 22px; } }

/* rótulos técnicos */
.sp-lab{ font-family:var(--fm); font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--corten); }
.sp-lab--dim{ color:var(--ink-3); }
.sp-flag{ color:var(--corten); font-family:var(--fm); font-weight:500; }
.sp-flag::before{ content:"⚑ "; }

/* selo OBRA REAL / IMAGEM-CONCEITO */
.sp-seal{ display:inline-flex; align-items:center; gap:6px; font-family:var(--fm); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid var(--corten); color:var(--corten); padding:4px 9px; background:color-mix(in oklab,var(--corten) 8%, transparent); }
.sp-seal--on{ border-color:var(--corten-l); color:#F0DFD3; background:rgba(160,82,45,.34); }

/* ============================================================
   NAV
   ============================================================ */
.sp-nav{ position:sticky; top:0; z-index:50; background:var(--graphite); border-bottom:1px solid var(--graphite-2);
  height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; color:var(--on); }
@media(max-width:720px){ .sp-nav{ padding:0 22px; } }
.sp-brand{ display:flex; align-items:baseline; gap:12px; }
.sp-brand__wm{ font-family:var(--fs); font-weight:800; font-size:1.15rem; letter-spacing:.02em; }
.sp-brand__wm u{ color:var(--corten-l); text-decoration:none; }
.sp-brand__tag{ font-family:var(--fm); font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--on-3); }
.sp-nav__links{ display:flex; align-items:center; gap:28px; }
.sp-nav__links a{ font-family:var(--fm); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-2); transition:color .15s; white-space:nowrap; }
.sp-nav__links a:hover{ color:var(--on); }
.sp-nav__cta{ border:1px solid var(--on-3); padding:9px 16px; color:var(--on)!important; }
.sp-nav__cta:hover{ border-color:var(--corten-l); background:rgba(160,82,45,.2); }
@media(max-width:820px){ .sp-nav__links a:not(.sp-nav__cta){ display:none; } }

/* ============================================================
   HERO
   ============================================================ */
.sp-hero{ background:var(--graphite); color:var(--on); padding:100px 0 0; position:relative; }
.sp-hero__grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:64px; align-items:end; }
.sp-hero__eye{ color:var(--corten-l); }
.sp-hero__wm{ font-family:var(--fs); font-weight:800; font-size:clamp(5rem,15vw,11rem); line-height:.82; letter-spacing:-.02em; margin:26px 0 0; color:#F3F0EA; }
.sp-hero__wm u{ color:var(--corten); text-decoration:none; }
.sp-hero__ed{ font-family:var(--fe); font-weight:300; font-size:clamp(1.5rem,3.2vw,2.35rem); line-height:1.28; color:#DDD9D2; margin-top:30px; max-width:20ch; }
.sp-hero__sub{ font-family:var(--fm); font-size:.82rem; letter-spacing:.06em; line-height:1.7; color:var(--on-2); margin-top:20px; max-width:44ch; text-transform:uppercase; }
.sp-hero__stat{ border:1px solid var(--graphite-2); border-left:2px solid var(--corten); padding:26px 28px; background:#202426; }
.sp-hero__statn{ font-family:var(--fs); font-weight:800; font-size:3.2rem; line-height:1; letter-spacing:-.03em; color:#F3F0EA; }
.sp-hero__statn .u{ font-size:1.1rem; font-weight:500; color:var(--on-2); margin-left:8px; letter-spacing:0; }
.sp-hero__statl{ font-family:var(--fm); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--on-3); margin-top:14px; line-height:1.6; }
.sp-hero__rule{ height:1px; background:var(--graphite-2); margin-top:64px; }
.sp-hero__strip{ display:flex; flex-wrap:wrap; gap:0; }
.sp-hero__chip{ font-family:var(--fm); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-3);
  padding:16px 26px 16px 0; margin-right:26px; border-right:1px solid var(--graphite-2); }
.sp-hero__chip:last-child{ border-right:0; }
.sp-hero__chip b{ color:var(--on); font-weight:500; }
@media(max-width:820px){ .sp-hero__grid{ grid-template-columns:1fr; gap:40px; } .sp-hero__stat{ align-self:start; } }

/* ============================================================
   SEÇÃO base
   ============================================================ */
.sp-sec{ padding:88px 0; border-bottom:1px solid var(--line); }
.sp-sec--dark{ background:var(--graphite); color:var(--on); border-bottom-color:var(--graphite-2); }
.sp-sec--dark .sp-h2{ color:#F3F0EA; }
.sp-head{ display:grid; grid-template-columns:180px 1fr; gap:32px; margin-bottom:52px; align-items:start; }
.sp-head__meta{ font-family:var(--fm); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); line-height:1.8; padding-top:6px; }
.sp-sec--dark .sp-head__meta{ color:var(--on-3); }
.sp-h2{ font-family:var(--fs); font-weight:700; font-size:clamp(1.8rem,3.6vw,2.7rem); line-height:1.06; letter-spacing:-.02em; color:var(--ink); }
@media(max-width:720px){ .sp-head{ grid-template-columns:1fr; gap:14px; margin-bottom:36px; } }

/* O QUE É — texto */
.sp-lede{ font-family:var(--fs); font-weight:400; font-size:1.25rem; line-height:1.7; color:var(--ink-2); max-width:62ch; }
.sp-lede b{ color:var(--ink); font-weight:600; }
.sp-lede + .sp-lede{ margin-top:24px; }

/* NÚMEROS — grid seco */
.sp-nums{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-bottom:0; }
.sp-num{ padding:34px 26px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.sp-num:nth-child(4n){ border-right:0; }
.sp-num__n{ font-family:var(--fs); font-weight:800; font-size:2.6rem; line-height:1; letter-spacing:-.03em; color:var(--ink); }
.sp-num__n .sp-flag{ font-size:1.5rem; }
.sp-num__n--txt{ font-size:1.9rem; padding-top:9px; }
.sp-num__l{ font-family:var(--fm); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-top:16px; line-height:1.6; }
.sp-num__note{ font-family:var(--fm); font-size:.56rem; letter-spacing:.08em; color:var(--corten); margin-top:8px; }
@media(max-width:820px){ .sp-nums{ grid-template-columns:repeat(2,1fr); } .sp-num:nth-child(4n){ border-right:1px solid var(--line); } .sp-num:nth-child(2n){ border-right:0; } }

/* SISTEMAS — tabela de especificação */
.sp-sys{ border-top:1px solid var(--line-2); }
.sp-sysrow{ display:grid; grid-template-columns:56px 240px 1fr 150px; gap:26px; align-items:start;
  padding:26px 0; border-bottom:1px solid var(--line); }
.sp-sysrow__id{ font-family:var(--fm); font-size:.68rem; color:var(--corten); letter-spacing:.08em; padding-top:4px; }
.sp-sysrow__name{ font-family:var(--fs); font-weight:600; font-size:1.2rem; letter-spacing:-.01em; }
.sp-sysrow__name small{ display:block; font-family:var(--fm); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:6px; font-weight:400; }
.sp-sysrow__d{ font-size:.95rem; color:var(--ink-2); line-height:1.6; }
.sp-sysrow__spec{ font-family:var(--fm); font-size:.66rem; letter-spacing:.04em; color:var(--ink-2); line-height:1.9; text-transform:uppercase; }
.sp-sysrow__spec b{ color:var(--ink); }
@media(max-width:900px){ .sp-sysrow{ grid-template-columns:44px 1fr; row-gap:12px; } .sp-sysrow__d,.sp-sysrow__spec{ grid-column:2; } }

/* SETORES — lista objetiva */
.sp-sectors{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--graphite-2); }
.sp-sectors--two{ grid-template-columns:1fr 1fr; }
.sp-sectors--two .sp-sector{ padding:30px 28px; }
.sp-sectors--two .sp-sector:nth-child(2n){ border-right:0; }
.sp-sector{ padding:24px 26px; border-right:1px solid var(--graphite-2); border-bottom:1px solid var(--graphite-2); display:flex; align-items:baseline; gap:14px; }
.sp-sector:nth-child(3n){ border-right:0; }
.sp-sector__n{ font-family:var(--fm); font-size:.62rem; color:var(--corten-l); }
.sp-sector__t{ font-family:var(--fs); font-weight:500; font-size:1.02rem; color:var(--on); }
.sp-sector__t span{ display:block; font-family:var(--fm); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-3); margin-top:5px; }
@media(max-width:820px){ .sp-sectors{ grid-template-columns:1fr 1fr; } .sp-sector:nth-child(3n){ border-right:1px solid var(--graphite-2); } .sp-sector:nth-child(2n){ border-right:0; } }
@media(max-width:520px){ .sp-sectors{ grid-template-columns:1fr; } .sp-sector{ border-right:0!important; } }

/* PROVA — obras reais */
.sp-proof{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.sp-pcell{ position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line); }
.sp-pcell image-slot{ width:100%; height:100%; }
.sp-pcell__frame img{ width:100%; height:100%; object-fit:cover; }
.sp-pcell__frame{ aspect-ratio:4/3; }
.sp-pcell--w{ grid-column:span 2; }
.sp-pcell--w .sp-pcell__frame{ aspect-ratio:8/3; }
.sp-pcell__bar{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 15px; border-top:1px solid var(--line); background:var(--paper-2); }
.sp-pcell__cap{ font-family:var(--fm); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
@media(max-width:820px){ .sp-proof{ grid-template-columns:1fr 1fr; } .sp-pcell--w{ grid-column:span 2; } }
@media(max-width:520px){ .sp-proof{ grid-template-columns:1fr; } .sp-pcell--w{ grid-column:span 1; } .sp-pcell--w .sp-pcell__frame{ aspect-ratio:4/3; } }

/* CONTATO — formulário técnico */
.sp-contact{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start; }
.sp-contact__side .sp-lede{ color:var(--on-2); font-size:1.05rem; }
.sp-contact__side .sp-lede b{ color:var(--on); }
.sp-cinfo{ margin-top:36px; border-top:1px solid var(--graphite-2); }
.sp-cinfo__row{ display:grid; grid-template-columns:130px 1fr; gap:14px; padding:15px 0; border-bottom:1px solid var(--graphite-2); }
.sp-cinfo__k{ font-family:var(--fm); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-3); }
.sp-cinfo__v{ font-family:var(--fm); font-size:.9rem; color:var(--on); }
.sp-form{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.sp-f{ display:flex; flex-direction:column; gap:8px; }
.sp-f--full{ grid-column:1/3; }
.sp-f label{ font-family:var(--fm); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-3); }
.sp-f input, .sp-f select, .sp-f textarea{
  font-family:var(--fm); font-size:.92rem; color:var(--on); background:var(--graphite-2);
  border:1px solid #33383A; padding:13px 15px; border-radius:0; }
.sp-f input::placeholder, .sp-f textarea::placeholder{ color:var(--on-3); }
.sp-f input:focus, .sp-f select:focus, .sp-f textarea:focus{ outline:none; border-color:var(--corten); }
.sp-f select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2374777A' stroke-width='1.4' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; }
.sp-f select option{ background:var(--graphite-2); }
.sp-f textarea{ resize:vertical; min-height:100px; }
.sp-submit{ grid-column:1/3; }
.sp-btn{ font-family:var(--fm); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  display:inline-flex; align-items:center; gap:10px; padding:16px 30px; border:1px solid var(--corten); background:var(--corten); color:#F5EDE7; cursor:pointer;
  transition:background .15s, border-color .15s; }
.sp-btn:hover{ background:var(--corten-d); border-color:var(--corten-d); }
.sp-form__note{ grid-column:1/3; font-family:var(--fm); font-size:.6rem; letter-spacing:.06em; color:var(--on-3); }
@media(max-width:900px){ .sp-contact{ grid-template-columns:1fr; gap:44px; } }
@media(max-width:520px){ .sp-form{ grid-template-columns:1fr; } .sp-f--full,.sp-submit,.sp-form__note{ grid-column:1; } }

/* RODAPÉ DE VERTENTE */
.sp-foot{ background:#141618; color:var(--on-3); padding:40px 0; }
.sp-foot__row{ display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap; }
.sp-foot__brand{ display:flex; align-items:baseline; gap:12px; }
.sp-foot__brand .sp-brand__wm{ color:var(--on); }
.sp-foot__seal{ display:flex; align-items:center; gap:9px; }
.sp-foot__seal svg{ width:18px; height:18px; }
.sp-foot__seal a{ font-family:var(--fm); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-2); border-bottom:1px solid transparent; transition:color .15s, border-color .15s; }
.sp-foot__seal a:hover{ color:var(--gold); border-color:var(--gold); }
.sp-foot__meta{ font-family:var(--fm); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; line-height:1.9; text-align:right; }
@media(max-width:640px){ .sp-foot__meta{ text-align:left; } }

.spp a.sp-textlink{ color:var(--corten); border-bottom:1px solid color-mix(in oklab,var(--corten) 40%, transparent); }
.spp a.sp-textlink:hover{ color:var(--corten-d); }