/* ============================================================
   VOLKY ENGENHARIA — VERTENTE & PRODUTOS (aprofundamento)
   Deriva de brand.css (Master) + herda o material da vertente:
   AÇO CORTEN — o ferro que o tempo prova.
   Carregar DEPOIS de brand.css.

   Modelo: a FAMÍLIA humana.
   - Face herdada (inegociável): mark, espinha branca, corten, tipo.
   - Vida própria (calibrada): wordmark, voz, temperatura, aplicação.
   - Passaporte de exit: cada produto se sustenta sozinho se sair de casa.
   ============================================================ */

/* ---------- o acento desta vertente É o corten ---------- */
:root {
  --accent: #B5683F;        /* corten core */
  --accent-strong: #CE8A5E; /* pátina clara */
  --accent-deep: #7A4530;   /* corten profundo */
  --accent-ink: #0A0C0F;
  --accent-tint: color-mix(in oklab, #B5683F 14%, transparent);
  --accent-line: color-mix(in oklab, #B5683F 38%, transparent);
  /* aço, presente na vertente como matéria-prima antes da pátina */
  --steel: #A7ADB3;
  --steel-2: #8B9097;
  --steel-deep: #5B6770;
  /* concreto, superfície da engenharia */
  --concrete: #C9C2B6;
  --concrete-2: #9A938657;
}

/* espinha branca no escuro; dark 90% no claro (regra travada) */
svg[viewBox="0 0 100 100"] { color: #FFFFFF; }
.canvas--light svg[viewBox="0 0 100 100"],
[data-mode="light"] svg[viewBox="0 0 100 100"] { color: #1A1A1A; }

/* ---------- HERO da vertente ---------- */
.ehero { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 0.85fr; border-bottom: 1px solid var(--line); }
.ehero__txt { padding: var(--s9) var(--s8); display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; }
.ehero__side { border-left: 1px solid var(--line); position: relative; overflow: hidden; background:
  radial-gradient(130% 90% at 70% 20%, color-mix(in oklab, #B5683F 22%, transparent), transparent 60%), #0C0A09; display: grid; place-items: center; }
.ehero__kick { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s5); }
.ehero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 0.98; letter-spacing: -0.02em; }
.ehero__title .sub { display:block; font-weight: 400; font-size: 0.42em; letter-spacing: 0.34em; text-transform: uppercase; color: var(--text-2); margin-top: var(--s4); }
.ehero__lead { max-width: 46ch; margin-top: var(--s6); font-size: var(--t-lg); line-height: 1.5; color: var(--text-2); font-weight: 300; }
.ehero__stats { display: flex; gap: var(--s7); margin-top: var(--s8); flex-wrap: wrap; }
.ehero__stats dt { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; color: var(--text); line-height: 1; }
.ehero__stats dd { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-top: 6px; }
.ehero__corten { position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
  background-image: repeating-linear-gradient(28deg, transparent, transparent 22px, color-mix(in oklab,#B5683F 18%, transparent) 22px, color-mix(in oklab,#B5683F 18%, transparent) 23px); }
@media (max-width: 920px) { .ehero { grid-template-columns: 1fr; } .ehero__side { border-left: 0; border-top: 1px solid var(--line); min-height: 320px; } }

/* lockup da vertente */
.elock { display: flex; align-items: center; gap: var(--s4); }
.elock .vmark { width: 52px; height: 52px; flex: none; }
.elock__txt { display: flex; flex-direction: column; gap: 4px; border-left: 1px solid var(--line-2); padding-left: var(--s4); }
.elock__master { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.2em; font-size: 1.15rem; line-height: 1; }
.elock__div { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--accent); }

/* ---------- A FAMÍLIA ---------- */
.family { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s5); }
@media (max-width: 980px){ .family { grid-template-columns: 1fr; } }

.fcard { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; background: var(--surface); position: relative; }
.fcard__top { padding: var(--s6) var(--s6) var(--s5); border-bottom: 1px solid var(--line); position: relative; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; }
.fcard__mat { position: absolute; inset: 0; opacity: 0.9; pointer-events: none; }
.fcard__role { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); position: relative; }
.fcard__body { padding: var(--s6); display: flex; flex-direction: column; gap: var(--s4); flex: 1; }
.fcard__pos { font-size: var(--t-sm); color: var(--text-2); line-height: 1.5; }
.fcard__meta { margin-top: auto; display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s4); border-top: 1px dashed var(--line-2); }
.fcard__meta div { display: flex; justify-content: space-between; gap: var(--s3); font-family: var(--font-mono); font-size: 0.64rem; color: var(--text-3); }
.fcard__meta b { color: var(--text-2); font-weight: 500; }
.maturity { display: inline-flex; gap: 3px; }
.maturity i { width: 16px; height: 4px; border-radius: 1px; background: var(--line-2); }
.maturity i.on { background: var(--accent); }

/* passaporte de exit */
.passport { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-line); border-radius: var(--r-pill); padding: 4px 10px; }

/* DNA herdado vs vida própria */
.dna { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.dna__col { padding: var(--s6); }
.dna__col:first-child { border-right: 1px solid var(--line); background: color-mix(in oklab, var(--accent) 5%, transparent); }
.dna__col h4 { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--s4); font-weight: 500; }
.dna__col--in h4 { color: var(--accent); }
.dna__col--free h4 { color: var(--text-2); }
.dna__col ul { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.dna__col li { font-size: var(--t-sm); display: flex; gap: var(--s3); align-items: baseline; color: var(--text-2); }
.dna__col--in li::before { content: "▰"; color: var(--accent); font-size: 0.7em; }
.dna__col--free li::before { content: "→"; color: var(--text-3); font-family: var(--font-mono); }
@media (max-width: 820px){ .dna { grid-template-columns: 1fr; } .dna__col:first-child { border-right: 0; border-bottom: 1px solid var(--line); } }

/* dial de liberdade */
.dial { display: flex; flex-direction: column; gap: var(--s5); }
.dial__row { display: grid; grid-template-columns: 130px 1fr; gap: var(--s5); align-items: center; }
.dial__name { font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); }
.dial__track { height: 8px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); position: relative; overflow: hidden; }
.dial__fill { position: absolute; top: 0; left: 0; bottom: 0; background: linear-gradient(90deg, var(--accent-deep), var(--accent-strong)); }
.dial__cap { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-top: var(--s2); }

/* ---------- PRODUTO (seção dedicada) ---------- */
.prod { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.prod__head { display: grid; grid-template-columns: 1fr 0.7fr; }
.prod__brandbox { padding: var(--s8) var(--s7); display: flex; flex-direction: column; justify-content: center; gap: var(--s5); min-height: 280px; position: relative; overflow: hidden; }
.prod__specimen { padding: var(--s7); border-left: 1px solid var(--line); display: grid; place-items: center; position: relative; background: #0C0A09; }
.prod__tag { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.prod__desc { padding: var(--s7); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s6); }
.prod__desc h5 { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s3); font-weight: 500; }
.prod__desc p { font-size: var(--t-sm); color: var(--text-2); line-height: 1.55; }
@media (max-width: 900px){ .prod__head { grid-template-columns: 1fr; } .prod__specimen { border-left: 0; border-top: 1px solid var(--line); min-height: 220px; } .prod__desc { grid-template-columns: 1fr; } }

/* wordmarks dos produtos — cada um com sua personalidade dentro do corten.
   REGRA: onde houver "Concre", é sempre BOLD. */
.wm-spp { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 0.9; }
.wm-spp .u { color: var(--accent); }
.wm-spp__rule { height: 5px; width: 64px; background: var(--accent); margin-top: var(--s3); }
.wm-spp__sub { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-2); margin-top: var(--s3); }

.wm-stones { font-family: var(--font-display); font-weight: 300; letter-spacing: 0.04em; font-size: clamp(1.8rem, 4.2vw, 3rem); line-height: 1; }
.wm-stones b { font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.wm-stones__sub { font-family: var(--font-read, 'Spectral'), serif; font-style: italic; font-size: 1.05rem; color: var(--text-2); margin-top: var(--s4); letter-spacing: 0; text-transform: none; }

.wm-build { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.01em; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 0.95; }
.wm-build .l { font-weight: 300; color: var(--text-2); }
.wm-build .markv { display: inline-block; height: 0.9em; width: 0.6em; vertical-align: -0.05em; margin: 0 -0.04em 0 -0.06em; color: #FFFFFF; }
.wm-build__future { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); border: 1px dashed var(--accent-line); border-radius: var(--r-pill); padding: 4px 10px; margin-top: var(--s4); }

/* superfícies de matéria para os specimens */
.surf-steel { background:
  repeating-linear-gradient(90deg, #14171A, #14171A 2px, #181B1F 2px, #181B1F 7px); }
.surf-patina { background:
  radial-gradient(120% 100% at 30% 20%, color-mix(in oklab,#CE8A5E 26%, transparent), transparent 55%),
  radial-gradient(100% 120% at 80% 90%, color-mix(in oklab,#7A4530 40%, transparent), transparent 60%), #14100D; }
.surf-concrete { background:
  linear-gradient(135deg, #1A1916, #131210); position: relative; }
.surf-author { background:
  radial-gradient(120% 120% at 70% 20%, color-mix(in oklab,#B5683F 22%, transparent), transparent 55%), #0E0B09; }

/* voz / copy */
.voice { display: grid; grid-template-columns: 160px 1fr; gap: var(--s5); padding: var(--s5) 0; border-top: 1px solid var(--line); }
.voice__who { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-3); line-height: 1.7; }
.voice__who b { color: var(--accent); display: block; font-weight: 500; }
.voice__say { display: flex; flex-direction: column; gap: var(--s3); }
.voice__line { font-family: var(--font-display); font-weight: 500; font-size: var(--t-lg); line-height: 1.25; color: var(--text); }
.voice__note { font-size: var(--t-sm); color: var(--text-2); }
@media (max-width: 720px){ .voice { grid-template-columns: 1fr; } }

/* arquitetura de nomes */
.tree { position: relative; padding: var(--s6) 0; }
.tree__root { display: inline-flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5); border: 1px solid var(--accent-line); border-radius: var(--r-md); background: var(--accent-tint); }
.tree__row { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s5); margin-top: var(--s6); position: relative; }
.tree__node { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s5); background: var(--surface); }
.tree__node h5 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-md); margin-bottom: var(--s2); }
.tree__node p { font-size: var(--t-xs); color: var(--text-3); font-family: var(--font-mono); letter-spacing: 0.04em; }
.tree__lvl { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s2); }
@media (max-width: 820px){ .tree__row { grid-template-columns: 1fr; } }

/* endosso ladder — quanto VOLKY aparece em cada produto */
.endorse-scale { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s5); }
.escale { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s6); text-align: center; }
.escale__lockup { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: var(--s3); margin-bottom: var(--s4); }
.escale__how { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
@media (max-width: 820px){ .endorse-scale { grid-template-columns: 1fr; } }