/* 04 · Estética automotiva · Atlas (grafite, caixa alta, grid vertical, loader) + Dovetail escuro (mono, colchetes, grid de quadrados) + V7 escuro (labels ●, números gigantes, tabs verticais) */
:root {
  --pad: 104px;          /* margem do conteúdo (logo depois da linha dupla) */
  --c2: 384px;           /* início da coluna principal (depois da linha em 360) */
  --preto: #0D0D0D; --soft: #A8A29F; --ponto: #F26B3A;
}
body { background: var(--bg); color: var(--fg); font-size: 16px; }
::selection { background: var(--fg); color: var(--preto); }

.sec { background: var(--bg); }
.sec.preto { background: var(--preto); }

/* ---------- textura de concreto + linhas verticais (Atlas) ---------- */
.noise::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .07; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vgrid { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.vgrid span { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(239, 233, 230, .09);
  transform-origin: top; transform: scaleY(0); transition: transform 1.4s var(--ease); transition-delay: calc(var(--k) * 60ms + var(--vg-d, 0ms)); }
.in .vgrid span { transform: scaleY(1); }
.vgrid .l1 { left: 72px; } .vgrid .l2 { left: 80px; } .vgrid .l3 { left: 360px; }
.vgrid .l4 { left: 1080px; } .vgrid .l5 { right: 80px; } .vgrid .l6 { right: 72px; }

/* ---------- tipografia ---------- */
.caps { font-family: var(--f-titulo); font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; line-height: .95; }
.ext { font-family: var(--f-titulo); font-stretch: 125%; font-weight: 400; text-transform: uppercase; letter-spacing: .22em; }
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mono b { color: var(--fg); font-weight: 400; }
.t2 { font-family: var(--f-titulo); font-weight: 400; font-size: 44px; line-height: 1.08; letter-spacing: -.02em; }
.t2 span { display: block; }
.t2 span + span { color: var(--muted); }
.lbl { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: var(--fg); }
.lbl::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 3px rgba(239,233,230,.14); }
.tag { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.tag::before { content: '[ '; } .tag::after { content: ' ]'; }

/* ---------- logo ---------- */
.ring { display: inline-block; width: 1em; height: 1em; color: var(--fg); }
.ring svg { width: 100%; height: 100%; display: block; }
.ring.gira svg { animation: gira 24s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.logo { display: inline-flex; align-items: center; gap: 14px; font-size: 40px; line-height: 1; }
.logo .ext { font-size: 24px; letter-spacing: .24em; }

/* ---------- botões (Atlas: retangulares, borda fina, sem canto) ---------- */
.bq { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid rgba(239,233,230,.75);
  font-family: var(--f-titulo); font-weight: 600; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; color: var(--fg);
  transition: background .2s var(--ease), color .2s var(--ease), transform .16s var(--ease); }
.bs { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; background: var(--fg); color: var(--preto);
  font-family: var(--f-titulo); font-weight: 600; font-size: 13px; letter-spacing: .02em; text-transform: uppercase;
  transition: background .2s var(--ease), transform .16s var(--ease); }
.bs.g { height: 52px; padding: 0 22px; font-size: 15px; }
.bq.g { height: 52px; padding: 0 22px; font-size: 15px; }
.bq:active, .bs:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .bq:hover { background: var(--fg); color: var(--preto); }
  .bs:hover { background: #fff; }
}
.seta { width: 14px; height: 14px; }

/* chip aberto/fechado */
.aberto { display: inline-flex; align-items: center; gap: 10px; }
.aberto::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #5BD27A; box-shadow: 0 0 0 0 rgba(91,210,122,.5); animation: pulso 2.2s var(--ease) infinite; }
.aberto.is-fechado::before { background: var(--ponto); animation: none; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(91,210,122,.45); } 70%, 100% { box-shadow: 0 0 0 9px rgba(91,210,122,0); } }

/* fotos sempre P&B cinematográfico (Atlas) */
.pb { filter: grayscale(1) contrast(1.08) brightness(.92); }

/* dovetail: grade de quadrados */
.quad { display: grid; grid-template-columns: repeat(var(--cols, 18), 60px); grid-auto-rows: 60px; }
.quad i { border: 1px solid rgba(239,233,230,.07); margin: 0 -1px -1px 0; background: rgba(239,233,230,0); transition: background 1.2s var(--ease); }
.quad i.on { background: rgba(239,233,230,.06); transition-duration: .3s; }