/* =====================================================================
   Genuo · /trabalhe v4 · CSS próprio (carregado depois de site.css)
   Copy v4: a ambição (desenhar um novo jeito de comprar e vender entre empresas).
   Uma linguagem de desenho em três tempos: a prancha em construção (hero),
   o espaço já nomeado (dobra 2) e o espaço dividido nas três áreas (dobra 3).
   Só tokens do sistema, nenhuma cor nova. Prefixo tb-.
   Versões anteriores: _legado/pagina-trabalhe_v1.css e _legado/pagina-trabalhe_v3.css.
   ===================================================================== */

/* ---------- D1 · HERO (split; a prancha técnica sangra a borda direita) ---------- */
.tb-hero .hero-grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:48px}
.tb-h1{font-size:clamp(40px,5.2vw,76px)}
.tb-hero .hero-sub{max-width:36ch}
.tb-hero .hero-vis{padding:0 0 0 8px}
.tb-prancha{position:relative;background:var(--folha);border-radius:var(--r-box) 0 0 var(--r-box);box-shadow:var(--sombra);overflow:hidden}
.tb-sv{display:block;width:100%;height:auto}
/* papel quadriculado e moldura aberta à direita (a prancha continua fora da tela) */
.tb-sv .q{fill:none;stroke:var(--linha);stroke-width:1}
.tb-sv .qq{fill:none;stroke:var(--cz-claro);stroke-opacity:.4;stroke-width:1}
.tb-sv .hc{stroke:var(--navy);stroke-opacity:.2;stroke-width:1.5}
.sv-mold{fill:none;stroke:var(--navy);stroke-width:1.5}
.sv-mold.fino{stroke-width:.75;stroke-opacity:.6}
/* os dois lados: blocos fechados, hachurados */
.sv-bl{fill:var(--aco)}
.sv-bl-c{fill:none;stroke:var(--navy);stroke-width:2}
/* o espaço do meio: linhas de construção em azul, ainda tracejadas */
.sv-cons *{fill:none;stroke:var(--azul-t);stroke-width:1.25;stroke-dasharray:6 5;stroke-opacity:.8}
.sv-cons .eixo{stroke-dasharray:16 4 2 4;stroke-opacity:.55}
.sv-cons .falta{stroke:var(--navy);stroke-opacity:.5}
/* os primeiros traços firmes, em navy */
.sv-tr path,.sv-fir path{fill:none;stroke:var(--navy);stroke-width:2.5;stroke-linecap:square}
.sv-tr .sv-seta{fill:var(--navy);stroke:none}
.sv-pt{fill:var(--folha);stroke:var(--navy);stroke-width:2}
/* cotas, como numa planta */
.sv-cotas path{fill:none;stroke:var(--navy);stroke-width:1;stroke-opacity:.7}
.sv-cotas .tk{stroke-width:1.5;stroke-opacity:1}
.sv-tr{transform-box:fill-box}
.sv-tr-a{transform-origin:left center}
.sv-tr-b{transform-origin:right center}

/* ---------- D2 · A CATEGORIA (abertura centralizada + corte que sangra as duas bordas) ---------- */
.tb-cat .h2{max-width:24ch}
.tb-cat-txt{margin:32px auto 0;max-width:60ch;text-align:center}
.tb-cat-txt .texto{font-size:var(--t-lead);line-height:1.45;max-width:none}
.tb-cat-txt .texto + .texto{margin-top:18px;color:var(--navy);font-weight:650}
.tb-sis{display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,400px) 96px minmax(0,1fr);align-items:stretch;margin:96px calc(50% - 50vw) 0;min-height:280px}
.tb-sis-lado{display:flex;align-items:center;padding:40px;background:var(--aco) repeating-linear-gradient(135deg,rgba(23,41,64,.07) 0 1.5px,transparent 1.5px 13px)}
.tb-sis-lado.esq{justify-content:flex-end;text-align:right;border-right:2px solid var(--navy)}
.tb-sis-lado.dir{justify-content:flex-start;border-left:2px solid var(--navy)}
.tb-sis-lb{font-size:clamp(20px,1.8vw,26px);font-weight:850;letter-spacing:-.02em;line-height:1.1;max-width:11ch;color:var(--navy)}
.tb-sis-cx{align-self:center;position:relative;height:2px;background:var(--navy)}
.tb-sis-cx::after{content:"";position:absolute;top:-6px;border-top:7px solid transparent;border-bottom:7px solid transparent}
.tb-sis-cx.esq{transform-origin:left center}
.tb-sis-cx.esq::after{right:-1px;border-left:12px solid var(--navy)}
.tb-sis-cx.dir{transform-origin:right center}
.tb-sis-cx.dir::after{left:-1px;border-right:12px solid var(--navy)}
.tb-sis-meio{display:flex;align-items:center;justify-content:center;padding:44px 0;border-top:2px solid var(--navy);border-bottom:2px solid var(--navy)}
.tb-sis-meio .et-w{width:min(100%,320px);--dx:10px}
.tb-sis-meio .et,.tb-sis-meio .et-bd{--cf:40px}
.tb-sis-meio .et{display:flex;align-items:center;gap:18px;padding:26px 56px 26px 24px}
.tb-sis-meio img{width:52px;height:52px;flex:0 0 auto}
.tb-sis-meio .cd.tx{font-size:44px;margin-top:0;line-height:1}

/* ---------- D3 · AS ÁREAS (navy; nomes grandes à esquerda, o espaço dividido fixo à direita) ---------- */
.tb-areas .h2{max-width:24ch}
.tb-areas-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0 80px;margin-top:88px;align-items:start}
.tb-area{position:relative;padding:44px 0 60px}
.tb-area-fio{position:absolute;top:0;left:-3000px;right:0;height:2px;background:rgba(242,245,248,.3);transform-origin:right center}
.tb-area-n{font-size:clamp(36px,4.2vw,60px);font-weight:850;letter-spacing:var(--tr-display);line-height:.98;color:var(--folha)}
.tb-area-t{margin-top:24px;font-size:var(--t-lead);line-height:1.45;color:var(--gelo-t);max-width:44ch}
.tb-area-p{margin-top:18px;font-size:var(--t-lead);line-height:1.45;font-weight:700;color:var(--gelo);max-width:44ch}
.tb-mapa-w{position:sticky;top:calc(var(--h-topo) + 56px);padding-top:44px}
.tb-mapa{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(0,1fr) 40px;grid-template-rows:236px 176px;gap:2px;padding:2px;background:rgba(242,245,248,.5)}
.tb-m-lado{grid-row:1 / span 2;background:var(--navy) repeating-linear-gradient(135deg,rgba(242,245,248,.22) 0 1.5px,transparent 1.5px 11px)}
.tb-m-lado.dir{grid-column:4}
.tb-m-z{position:relative;display:flex;align-items:flex-end;padding:20px;background:var(--navy)}
.tb-m-z.base{grid-column:2 / span 2}
.tb-m-z::before{content:"";position:absolute;inset:0;background:var(--azul-t);opacity:0;transition:opacity var(--d-lista) var(--ease)}
.tb-m-z::after{content:"";position:absolute;inset:12px;border:1px dashed rgba(242,245,248,.22);pointer-events:none}
.tb-m-z span{position:relative;z-index:1;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;line-height:1.35;color:var(--gelo);max-width:13ch}
.tb-m-seta{position:absolute;top:50%;width:30px;height:2px;background:var(--gelo);z-index:1}
.tb-m-seta::after{content:"";position:absolute;top:-6px;border-top:7px solid transparent;border-bottom:7px solid transparent}
.tb-m-seta.esq{left:0;transform-origin:left center}
.tb-m-seta.esq::after{right:-2px;border-left:12px solid var(--gelo)}
.tb-m-seta.dir{right:0;transform-origin:right center}
.tb-m-seta.dir::after{left:-2px;border-right:12px solid var(--gelo)}
/* a área que está na leitura acende no espaço (estado ligado pelo script da página) */
.tb-mapa[data-ativo="compras"] [data-z="compras"]::before,
.tb-mapa[data-ativo="vendedores"] [data-z="vendedores"]::before,
.tb-mapa[data-ativo="produto"] [data-z="produto"]::before{opacity:1}

/* ---------- D4 · CHAMADA (#contato; 7/5 com o carimbo da prancha, que abre o formulário) ---------- */
.tb-cham-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px 72px;align-items:center}
.tb-cham .h2{max-width:none}
.tb-cham-sub{margin-top:26px;max-width:40ch}
.tb-cham-acts{margin-top:36px}
.tb-carimbo{display:block;width:min(100%,480px);justify-self:end;border:0;background:none;padding:0;color:var(--navy);text-align:left;cursor:pointer;--dx:10px;position:relative;z-index:1}
.tb-carimbo .et,.tb-carimbo .et-bd{--cf:40px}
.tb-carimbo .et{display:block;padding:0}
.tb-cb-l{display:block;padding:24px 64px 26px 26px}
.tb-cb-l + .tb-cb-l{border-top:2px solid var(--navy)}
.tb-carimbo .lb{display:flex}
.tb-cb-op{display:flex;align-items:center;gap:12px;margin-top:14px;min-height:48px;padding:10px 26px 10px 14px;background:var(--navy);color:var(--folha);font-size:17px;font-weight:750;line-height:1.25;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);width:max-content;max-width:100%}
.tb-cb-op i{width:12px;height:12px;background:var(--laranja);flex:0 0 auto}
.tb-cb-pauta{display:block;margin-top:6px}
.tb-cb-pauta i{display:block;height:34px;border-bottom:1px solid var(--linha)}
.tb-carimbo:focus-visible{outline:3px solid var(--azul-t);outline-offset:6px}

/* ---------- MOTION PRÓPRIO (reveal pelo kit do site.js; aqui só o que é da página) ---------- */
.js .tb-area.cena .tb-area-fio{transform:scaleX(0);transition:transform var(--d-fio) var(--ease) .1s}
.js .tb-area.cena.in .tb-area-fio{transform:scaleX(1)}
.js .tb-mapa.cena .tb-m-seta{transform:scaleX(0);transition:transform var(--d-lista) var(--ease) .3s}
.js .tb-mapa.cena.in .tb-m-seta{transform:scaleX(1)}

/* ---------- RESPONSIVO ---------- */
@media (max-width:1100px){
  .tb-hero .hero-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .tb-hero .hero-vis{padding:0}
  .tb-areas-g,.tb-cham-g{grid-template-columns:minmax(0,1fr)}
  .tb-mapa-w{position:relative;top:auto;order:-1;padding-top:0;max-width:560px;margin-bottom:24px}
  .tb-carimbo{justify-self:start}
  .tb-sis{grid-template-columns:minmax(0,1fr) 48px minmax(0,340px) 48px minmax(0,1fr)}
  .tb-sis-lado{padding:32px 20px}
}
@media (max-width:860px){
  .tb-sis{grid-template-columns:minmax(0,1fr);margin-top:56px;min-height:0}
  .tb-sis-lado{padding:28px var(--gut);justify-content:flex-start!important;text-align:left!important;border:0!important}
  .tb-sis-lado.esq{border-bottom:2px solid var(--navy)!important}
  .tb-sis-lado.dir{border-top:2px solid var(--navy)!important}
  .tb-sis-lb{max-width:none}
  .tb-sis-cx{width:2px;height:44px;justify-self:center}
  .tb-sis-cx.esq{transform-origin:center top}
  .tb-sis-cx.dir{transform-origin:center bottom}
  .tb-sis-cx.esq::after{right:auto;left:-6px;top:auto;bottom:-1px;border:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:12px solid var(--navy)}
  .tb-sis-cx.dir::after{left:-6px;top:-1px;border:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid var(--navy)}
  .js .tb-sis .a-cx{transform:scaleY(0)}
  .js .tb-sis.in .a-cx{transform:scaleY(1)}
  .tb-sis-meio{padding:28px var(--gut);border:0}
}
@media (max-width:600px){
  .tb-h1{font-size:33px;line-height:1}
  .tb-h1 .b{display:inline}
  .tb-hero .hero-sub{margin-top:16px}
  .tb-hero .hero-vis{margin:4px calc(var(--gut) * -1) 0 0;padding:0}
  .tb-hero .hero-acts{margin-top:22px}
  .tb-cat-txt{margin-top:22px}
  .tb-cat-txt .texto{font-size:18px}
  .tb-sis-meio .et{padding:20px 44px 20px 18px;gap:14px}
  .tb-sis-meio .et,.tb-sis-meio .et-bd{--cf:28px}
  .tb-sis-meio img{width:40px;height:40px}
  .tb-sis-meio .cd.tx{font-size:34px}
  .tb-areas-g{margin-top:48px}
  .tb-mapa{grid-template-columns:24px minmax(0,1fr) minmax(0,1fr) 24px;grid-template-rows:150px 112px}
  .tb-m-z{padding:14px}
  .tb-m-z::after{inset:8px}
  .tb-m-z span{font-size:11.5px;letter-spacing:.07em}
  .tb-m-seta{width:18px}
  .tb-area{padding:32px 0 44px}
  .tb-area-t,.tb-area-p{font-size:18px}
  .tb-area-t{margin-top:18px}
  .tb-cb-l{padding:20px 44px 22px 18px}
  .tb-carimbo .et,.tb-carimbo .et-bd{--cf:28px}
  .tb-cb-op{font-size:16px}
}
@media (hover:hover){
  .tb-carimbo:hover .tb-cb-op{background:var(--navy-h)}
}
@media (prefers-reduced-motion:reduce){
  .js .tb-area.cena .tb-area-fio,.js .tb-mapa.cena .tb-m-seta{transform:none!important;transition:none!important}
  .tb-m-z::before{transition:none}
}