/* VoltByte — páginas internas (Soluções, Sobre, Projetos, Contato e projetos) */

/* ===== Abertura de página ===== */
.cab{padding-top:clamp(140px,18vh,200px);padding-bottom:var(--s6)}
.cab-grade{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--s5);align-items:end}
.cab .olho .indice{margin-left:auto;padding-left:var(--s3);color:color-mix(in srgb,currentColor 40%,transparent)}
.cab h1{font-size:clamp(44px,6.4vw,108px);line-height:.96;letter-spacing:-.05em;margin-top:var(--s4);max-width:15ch}
.cab h1 .serif{font-weight:300;letter-spacing:-.03em}
.cab .lede{margin-top:var(--s4)}
.cab .acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s4)}
.cab .faixa{margin-top:var(--s6)}
.origem-pag::after{content:"";position:absolute;inset:-9px;border:1px solid var(--verde);border-radius:1px;opacity:0;animation:pulso-pag 2.4s var(--ease) 1.2s infinite}
@keyframes pulso-pag{0%{opacity:.8;transform:scale(.6)}100%{opacity:0;transform:scale(1.8)}}
.sumario{border-top:1px solid var(--linha);padding-top:var(--s2)}
.sumario > .num{color:var(--suave);text-transform:uppercase;letter-spacing:.14em;font-size:11px}
.sumario ol{list-style:none;margin-top:var(--s2)}
.sumario a{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--linha);font-size:15px;color:var(--suave);transition:color .25s,padding .35s var(--ease)}
.sumario a .num{color:color-mix(in srgb,currentColor 50%,transparent);padding-top:3px}
.sumario a:hover{color:currentColor;color:var(--tinta-clara);padding-left:6px}
@media (max-width:900px){.cab-grade{grid-template-columns:1fr}.sumario{display:none}.cab .olho .indice{display:none}}

/* ===== Seções comuns ===== */
.clara,.quadro-sec,.alem,.fazemos,.vitrine,.canais-sec,.entregas,.detalhes{padding-block:var(--s6)}
.clara h2,.quadro-sec h2,.alem h2,.fazemos h2,.entregas h2,.detalhes h2,.canais-sec h2{margin-top:var(--s3);font-size:clamp(34px,4.6vw,72px);max-width:18ch}
.duas-colunas{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s5)}
.sob-grade{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.sob-texto{display:grid;gap:var(--s3);padding-top:var(--s5)}
.sob-texto .btn{justify-self:start;margin-top:var(--s2)}
.destaque-frase{font-size:clamp(24px,2.4vw,36px);line-height:1.15;letter-spacing:-.025em;font-weight:500;max-width:22ch}
.alem-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s5);align-items:end}
.alem-intro .lede{padding-bottom:6px}
.grade-spec{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid currentColor;margin-top:var(--s4)}
.grade-spec li{display:flex;flex-direction:column;gap:var(--s3);min-height:132px;padding:var(--s3) var(--s3) var(--s3) 0;border-bottom:1px solid var(--linha);font-size:clamp(17px,1.4vw,21px);letter-spacing:-.015em;line-height:1.25}
.grade-spec li + li{padding-left:var(--s3);border-left:1px solid var(--linha)}
.grade-spec li:nth-child(4n+1){padding-left:0;border-left:0}
.grade-spec .num{color:var(--suave)}
.grade-spec--escura{margin-top:var(--s5)}
.exemplos{margin-top:var(--s6)}
@media (max-width:900px){
  .duas-colunas,.sob-grade,.alem-intro{grid-template-columns:1fr;gap:var(--s3)}
  .sob-texto{padding-top:0}
  .grade-spec{grid-template-columns:1fr 1fr}
  .grade-spec li{min-height:110px}
  .grade-spec li:nth-child(4n+1){padding-left:var(--s3);border-left:1px solid var(--linha)}
  .grade-spec li:nth-child(2n+1){padding-left:0;border-left:0}
}

/* ===== Soluções: quadro de distribuição ===== */
.quadro-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s5);align-items:end}
.quadro{margin-top:var(--s6);border:1px solid var(--linha);border-radius:4px;padding:0 var(--s4)}
.quadro-topo{display:flex;justify-content:space-between;gap:var(--s3);padding:18px 0;border-bottom:1px solid var(--linha);color:var(--suave);text-transform:uppercase;letter-spacing:.14em;font-size:11px}
.quadro-topo b{color:var(--verde);font-weight:500}
.circ{display:grid;grid-template-columns:72px minmax(0,1.15fr) minmax(0,1fr);gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--linha);align-items:start}
.circ:last-child{border-bottom:0}
.disjuntor{position:relative;width:44px;height:84px;margin-inline:auto;border-radius:3px;background:linear-gradient(180deg,#1E2523,#141917);border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 24px -12px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.07)}
.disjuntor::before{content:"";position:absolute;left:50%;top:14px;width:18px;height:46px;margin-left:-9px;border-radius:2px;background:#060807;box-shadow:inset 0 1px 3px rgba(0,0,0,.9)}
.disjuntor .alavanca{position:absolute;left:50%;top:15px;width:16px;height:22px;margin-left:-8px;border-radius:2px;background:linear-gradient(180deg,#46514D,#2B3330);box-shadow:0 2px 4px rgba(0,0,0,.6);transform:translateY(22px);transition:transform .5s cubic-bezier(.5,-.5,.3,1.6),background .35s}
.disjuntor.energizado .alavanca{transform:none;background:linear-gradient(180deg,#F4F6F3,#C7CDC9)}
.disjuntor .marca-i,.disjuntor .marca-o{position:absolute;right:4px;font:500 8px/1 var(--mono);color:rgba(238,241,238,.35)}
.disjuntor .marca-i{top:16px}.disjuntor .marca-o{top:50px}
.disjuntor .led{position:absolute;left:50%;bottom:9px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#2A322F;transition:background .3s,box-shadow .3s}
.disjuntor.energizado .led{background:var(--verde);box-shadow:0 0 10px var(--verde)}
.circ-corpo,.circ-itens{transition:opacity .6s var(--ease)}
.circ:not(:has(.energizado)) .circ-corpo,.circ:not(:has(.energizado)) .circ-itens{opacity:.42}
.circ-cod{display:flex;gap:14px;color:var(--suave)}
.estado{text-transform:uppercase;letter-spacing:.14em;font-size:10px;padding-top:1px}
.estado .on{display:none;color:var(--verde)}
.circ:has(.energizado) .estado .on{display:inline}
.circ:has(.energizado) .estado .off{display:none}
.circ h3{font-size:clamp(24px,2.4vw,34px);margin-top:var(--s2)}
.circ-corpo > p:last-child{margin-top:var(--s2);color:var(--suave);font-size:16px;max-width:46ch}
.circ-itens{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px var(--s3);padding-top:30px;font-size:15px}
.circ-itens li{display:flex;gap:10px;align-items:baseline}
.circ-itens li::before{content:"";flex:none;width:6px;height:6px;border:1px solid currentColor;opacity:.5;transform:translateY(-1px)}
@media (max-width:900px){
  .quadro-intro{grid-template-columns:1fr;gap:var(--s3)}
  .quadro{padding:0 16px;margin-inline:-4px}
  .quadro-topo{flex-direction:column;gap:6px}
  .circ{grid-template-columns:48px minmax(0,1fr);gap:var(--s2) var(--s3)}
  .disjuntor{width:36px;height:72px}
  .disjuntor::before{height:40px}
  .disjuntor .alavanca{transform:translateY(17px)}
  .disjuntor .marca-o{top:44px}
  .circ-itens{grid-column:2;grid-template-columns:1fr;padding-top:0}
}

.tag-premium{color:var(--verde)!important;border-color:var(--verde)!important}
.projeto-texto .olho .tag-premium{margin-left:4px;padding:4px 7px;border:1px solid;border-radius:2px;font-size:10px;letter-spacing:.14em}
.site-no-ar{margin-top:var(--s4)}
.premium-caso{margin-top:var(--s2);font-size:15px}
.premium-caso a{color:var(--verde);border-bottom:1px solid currentColor}

.proj-ad{padding-block:var(--s6)}
.proj-ad h2{margin-top:var(--s3);font-size:clamp(34px,4.6vw,72px);max-width:16ch}
.ad-cab{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s5);align-items:end;margin-bottom:var(--s5)}
@media (max-width:900px){.ad-cab{grid-template-columns:1fr;gap:var(--s3)}}

/* destaque premium no quadro */
.circ--destaque{position:relative}
.circ--destaque::before{content:"";position:absolute;inset:0 calc(-1 * var(--s4));background:linear-gradient(90deg,color-mix(in srgb,var(--verde) 7%,transparent),transparent 70%);pointer-events:none;opacity:0;transition:opacity .8s var(--ease)}
.circ--destaque:has(.energizado)::before{opacity:1}
.selo-premium{display:flex;gap:12px;align-items:baseline;margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--linha);font-size:15px;line-height:1.5;max-width:50ch}
.selo-premium .num{flex:none;padding:5px 8px;border:1px solid var(--verde);border-radius:2px;color:var(--verde);text-transform:uppercase;letter-spacing:.14em;font-size:10px}
.circ--destaque .circ-itens li:first-child{color:var(--verde)}
.premium-faixa{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s5);align-items:end;margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--linha)}
.premium-faixa > .pad{position:absolute;left:0;top:-6px}
.premium-faixa h3{margin-top:var(--s3);font-size:clamp(30px,3.4vw,52px);letter-spacing:-.04em;line-height:1.02}
.premium-faixa p:not(.olho){color:var(--suave);max-width:48ch}
.premium-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s3)}
@media (max-width:900px){
  .circ--destaque::before{inset:0 -16px}
  .selo-premium{flex-direction:column;gap:8px}
  .premium-faixa{grid-template-columns:1fr;gap:var(--s3)}
  .premium-faixa > .pad{left:-17px;width:9px;height:9px;top:-5px}
}

/* bornes de 4 (Além do desenvolvimento) */
.bornes4{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--s6);border-top:1px solid var(--linha)}
.borne4{padding:var(--s3) var(--s3) 0 0;display:grid;gap:10px;align-content:start}
.borne4 .pad{margin-top:calc(-1 * var(--s3) - 6px)}
.borne4 b{font-weight:500;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em;margin-top:var(--s2)}
.borne4 span:last-child{font-size:15px;color:var(--suave);line-height:1.5;max-width:28ch}
@media (max-width:900px){
  .bornes4{grid-template-columns:1fr;border-top:0}
  .borne4{position:relative;padding:var(--s3) 0;border-top:1px solid var(--linha)}
  .borne4 .pad{position:absolute;left:-17px;top:-5px;margin:0;width:9px;height:9px}
  .borne4 b{margin-top:0}
}

/* ===== Sobre ===== */
.editorial{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s5);margin-top:var(--s5)}
.editorial .abre{font-family:var(--serif);font-style:italic;font-weight:350;font-size:clamp(26px,2.6vw,40px);line-height:1.22;letter-spacing:-.015em}
.colunas-texto{display:grid;gap:var(--s3);font-size:17px;color:var(--suave);border-left:1px solid var(--linha);padding-left:var(--s4)}
.fazemos-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.fazemos .lede{margin-top:var(--s3)}
.fazemos .btn{margin-top:var(--s4)}
.indice-lista{list-style:none;border-top:1px solid currentColor;margin-top:var(--s4)}
.indice-lista li{display:grid;grid-template-columns:48px 1fr auto;align-items:baseline;gap:var(--s2);padding:18px 0;border-bottom:1px solid var(--linha);font-size:clamp(19px,1.7vw,24px);letter-spacing:-.02em}
.indice-lista li::after{content:"";width:28px;height:1px;background:var(--linha);align-self:center}
.indice-lista .num{color:var(--suave)}
.doc{position:relative;margin-top:var(--s5);margin-left:40px;background:var(--papel);color:var(--tinta-escura);border:1px solid rgba(12,15,14,.1);border-radius:2px;box-shadow:0 1px 0 rgba(12,15,14,.04),0 30px 60px -40px rgba(12,15,14,.45)}
.doc-cab,.doc-pe{display:flex;justify-content:space-between;gap:var(--s3);padding:16px var(--s4);text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:rgba(12,15,14,.6)}
.doc-cab{border-bottom:1.5px solid var(--tinta-escura)}
.doc-pe{border-top:1px solid rgba(12,15,14,.12)}
.doc-regua{height:12px;margin:0 var(--s4);background:repeating-linear-gradient(90deg,rgba(12,15,14,.35) 0 1px,transparent 1px 12px) 0 0/100% 6px no-repeat,repeating-linear-gradient(90deg,rgba(12,15,14,.5) 0 1px,transparent 1px 60px) 0 0/100% 12px no-repeat}
.doc-linha{position:relative;display:grid;grid-template-columns:90px minmax(0,1fr) minmax(0,1.3fr);gap:var(--s3);padding:var(--s4);border-top:1px solid rgba(12,15,14,.12);align-items:baseline}
.doc-pad{position:absolute;left:-46px;top:calc(var(--s4) + 6px)}
.doc-pad::after{content:"";position:absolute;left:100%;top:50%;width:34px;height:1px;background:currentColor;opacity:.25}
.doc-pad.energizado::after{background:var(--verde);opacity:1}
.doc-cod{color:rgba(12,15,14,.55)}
.doc-linha h3{font-size:clamp(20px,1.8vw,26px)}
.doc-linha p{font-size:16px;line-height:1.55;color:rgba(12,15,14,.7)}
.destaque{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s5);margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--linha);align-items:end}
.destaque > .pad{position:absolute;left:0;top:-6px}
.destaque .destaque-frase{font-size:clamp(28px,3.4vw,52px);max-width:20ch}
@media (max-width:900px){
  .editorial,.fazemos-grade,.destaque{grid-template-columns:1fr;gap:var(--s3)}
  .colunas-texto{border-left:0;padding-left:0}
  .doc{margin-left:0}
  .doc-cab,.doc-pe{flex-direction:column;gap:6px;padding:14px 18px}
  .doc-cab span:last-child{display:none}
  .doc-regua{margin:0 18px}
  .doc-linha{grid-template-columns:1fr;gap:8px;padding:var(--s3) 18px}
  .doc-pad{left:-26px;width:9px;height:9px;top:calc(var(--s3) + 3px)}
  .doc-pad::after{width:16px}
}

/* ===== Monitor (projetos) ===== */
.monitor{display:block;position:relative;padding:10px 10px 0;border-radius:8px;background:linear-gradient(180deg,#1B2220,#121715);border:1px solid rgba(255,255,255,.08);box-shadow:0 50px 90px -50px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06);color:var(--tinta-clara)}
.tela{display:block;position:relative;overflow:hidden;border-radius:3px;background:#040605}
.tela img{width:100%;height:100%;object-fit:cover;object-position:top center;transform:scale(1,.006);opacity:0;filter:brightness(3) saturate(0);transition:transform .75s cubic-bezier(.7,0,.2,1),opacity .2s linear,filter 1.1s var(--ease)}
.tela::before{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:rgba(238,241,238,.18);transition:opacity .3s}
.tela::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 30%),repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 1px,transparent 1px 3px);opacity:.6}
.monitor:has(.led-mon.energizado) .tela img,.monitor.ligada .tela img{transform:none;opacity:1;filter:none}
.monitor:has(.led-mon.energizado) .tela::before,.monitor.ligada .tela::before{opacity:0}
.queixo{display:flex;align-items:center;justify-content:space-between;height:30px;padding:0 6px}
.queixo .num{font-size:10px;letter-spacing:.2em;color:rgba(238,241,238,.3)}
.led-mon{width:7px;height:7px;border-radius:50%;background:#2A322F;transition:background .3s,box-shadow .3s}
.led-mon.energizado,.monitor.ligada .led-mon{background:var(--verde);box-shadow:0 0 8px var(--verde)}
a.monitor{transition:transform .5s var(--ease),border-color .3s}
a.monitor:hover{transform:translateY(-4px);border-color:rgba(0,193,106,.4)}
.monitor--celular{width:min(340px,78vw);margin-inline:auto;padding:12px 12px 0;border-radius:30px}
.monitor--celular .tela{border-radius:20px}

/* vitrine */
.filtro{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-bottom:var(--s3);border-bottom:1px solid var(--linha)}
.filtro button{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px;border:1px solid var(--linha);border-radius:2px;background:transparent;color:inherit;font:500 14px/1 var(--display);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.filtro button .num{font-size:11px;color:var(--suave)}
.filtro button:hover{border-color:rgba(238,241,238,.4)}
.filtro button[aria-pressed="true"]{background:var(--tinta-clara);color:var(--grafite);border-color:transparent}
.filtro button[aria-pressed="true"] .num{color:var(--grafite)}
.filtro-status{margin-left:auto;color:var(--suave);text-transform:uppercase;letter-spacing:.12em;font-size:11px}
.filtro-status .mostrando{color:var(--verde)}
.monitores{display:grid;gap:var(--s6);margin-top:var(--s6)}
.projeto{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--s5);align-items:center}
.projeto.lado-b .monitor{order:2}
.projeto[hidden]{display:none}
.projeto .monitor--celular{width:min(300px,70vw)}
.projeto-texto .olho{gap:14px}
.projeto-texto .olho .num{color:var(--verde)}
.cliente{margin-top:var(--s3);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--suave)}
.projeto h3{font-size:clamp(28px,2.8vw,44px);letter-spacing:-.035em;line-height:1.05;margin-top:12px}
.projeto h3 a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.projeto h3 a:hover{background-size:100% 1px}
.projeto-texto > p:not([class]){margin-top:var(--s2);color:var(--suave);font-size:16px;max-width:44ch}
.ver{display:inline-flex;gap:10px;margin-top:var(--s3);font:500 14px/1 var(--mono);color:var(--verde)}
.ver .seta{transition:transform .35s var(--ease)}
.ver:hover .seta{transform:translateX(4px)}
@media (max-width:900px){
  .filtro-status{margin-left:0;width:100%}
  .monitores{gap:var(--s5)}
  .projeto{grid-template-columns:1fr;gap:var(--s3)}
  .projeto.lado-b .monitor{order:0}
  .projeto-texto{padding-left:26px}
  .monitor{padding:6px 6px 0;border-radius:6px}
  .queixo{height:24px}
}

/* ===== Página de projeto ===== */
.voltar{display:inline-flex;gap:10px;font-size:13px;letter-spacing:.06em;color:var(--suave);transition:color .25s}
.voltar:hover{color:var(--verde)}
.cab-proj .proj-texto{max-width:1000px}
.cab-proj h1{max-width:18ch;font-size:clamp(40px,5.6vw,92px)}
.cab-proj .olho{margin-top:var(--s5)}
.proj-capa{margin-top:var(--s6)}
.cab-proj--celular .proj-grade{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s5);align-items:end}
.cab-proj--celular .proj-capa{margin-top:0}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s4)}
.tags li{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:9px 12px;border:1px solid var(--linha);border-radius:2px;color:var(--suave)}
.proj-sobre .lede{font-size:clamp(18px,1.5vw,21px)}
.telas{display:grid;gap:var(--s6);margin-top:var(--s6)}
.tela-det{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s5);align-items:center}
.tela-det:nth-child(even) .monitor{order:2}
.tela-det figcaption .num{color:var(--verde)}
.tela-det h3{font-size:clamp(24px,2.2vw,34px);margin-top:var(--s2)}
.tela-det p{margin-top:var(--s2);color:var(--suave);font-size:16px;max-width:40ch}
.proximo-sec{padding-block:var(--s5) 0}
.proximo{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:auto 1fr;gap:var(--s2) var(--s5);padding:var(--s4) 0;border-block:1px solid var(--linha);align-items:center}
.proximo > .pad{position:absolute;left:0;top:-6px}
.proximo-rot{text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--suave)}
.proximo-titulo{grid-row:2;font-size:clamp(30px,4.2vw,64px);font-weight:500;letter-spacing:-.04em;line-height:1}
.proximo-titulo .seta{font-family:var(--mono);display:inline-block;transition:transform .4s var(--ease);color:var(--verde)}
.proximo:hover .seta{transform:translateX(10px)}
.proximo-img{grid-column:2;grid-row:1 / span 2;aspect-ratio:16/9;overflow:hidden;border-radius:3px;border:1px solid var(--linha)}
.proximo-img img{width:100%;height:100%;object-fit:cover;object-position:top;filter:saturate(.6) brightness(.8);transition:filter .5s,transform .8s var(--ease)}
.proximo:hover .proximo-img img{filter:none;transform:scale(1.04)}
@media (max-width:900px){
  .cab-proj--celular .proj-grade{grid-template-columns:1fr}
  .cab-proj--celular .proj-capa{margin-top:var(--s5)}
  .tela-det{grid-template-columns:1fr;gap:var(--s3)}
  .tela-det:nth-child(even) .monitor{order:0}
  .proximo{grid-template-columns:1fr}
  .proximo-img{grid-column:1;grid-row:auto}
}

/* ===== Contato: canais + ordem de serviço ===== */
.canais-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s5);align-items:start}
.canais-sec .lede{margin-top:var(--s3)}
.canais{border-top:1px solid currentColor}
.canal{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px var(--s3);padding:var(--s4) 0 var(--s4) var(--s3);border-bottom:1px solid var(--linha);transition:padding .4s var(--ease)}
.canal > .pad{position:absolute;left:-6px;top:calc(var(--s4) + 2px)}
.canal-tipo{text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--suave)}
.canal-valor{grid-row:2;font-size:clamp(26px,3vw,44px);letter-spacing:-.035em;font-weight:500;line-height:1.05;overflow-wrap:anywhere}
.canal-desc{grid-row:3;font-size:15px;color:var(--suave);max-width:46ch}
.canal > .seta{grid-column:2;grid-row:1 / span 3;align-self:center;font-size:22px;transition:transform .35s var(--ease),color .25s}
.canal:hover{padding-left:var(--s4)}
.canal:hover > .seta{transform:translateX(6px);color:var(--verde)}
.canais-nota{margin-top:var(--s3);font-size:15px;color:var(--suave)}
.ordem{padding-block:var(--s6) var(--s7)}
.ordem-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--s5);align-items:start}
.ordem .lede{margin-top:var(--s3)}
.comecar{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--linha)}
.comecar h3{margin-top:var(--s2);font-size:clamp(22px,2vw,28px)}
.comecar > p:not(.olho){margin-top:12px;color:var(--suave);font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3)}
.chip{font:400 14px/1.2 var(--display);padding:10px 14px;border:1px solid rgba(12,15,14,.18);border-radius:2px;background:transparent;color:inherit;cursor:pointer;text-align:left;transition:background .25s,border-color .25s,color .25s}
.chip:hover{border-color:var(--tinta-escura)}
.chip[aria-pressed="true"]{background:var(--tinta-escura);color:var(--tinta-clara);border-color:var(--tinta-escura)}
.os{position:relative;background:var(--papel);color:var(--tinta-escura);border:1px solid rgba(12,15,14,.1);border-radius:2px;box-shadow:0 1px 0 rgba(12,15,14,.04),0 40px 80px -50px rgba(12,15,14,.5)}
.os::before{content:"";position:absolute;left:0;right:0;top:-1px;height:4px;background:radial-gradient(circle at 6px 0,transparent 3px,var(--papel) 3.5px) 0 0/12px 4px repeat-x;transform:translateY(-3px)}
.os-pad{position:absolute;left:-30px;top:28px}
.os-cab{display:flex;justify-content:space-between;gap:var(--s3);align-items:flex-start;padding:var(--s3) var(--s4);border-bottom:1.5px solid var(--tinta-escura)}
.os-cab .num{text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:rgba(12,15,14,.6)}
.os-titulo{margin-top:8px;font-size:22px;font-weight:500;letter-spacing:-.02em}
.os-meta{display:grid;justify-items:end;gap:10px}
.os-meta b{font-weight:500;color:var(--tinta-escura)}
.os-status{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid rgba(12,15,14,.2);border-radius:2px}
.os-status i{width:7px;height:7px;border-radius:50%;background:#C4A400}
.os-status[data-estado="pronta"]{border-color:var(--verde-fundo)}
.os-status[data-estado="pronta"] i{background:var(--verde)}
.os-status[data-estado="enviada"] i{background:var(--verde);box-shadow:0 0 8px var(--verde)}
.os-campos{display:grid;grid-template-columns:1fr 1fr}
.os-campo{display:grid;gap:8px;padding:18px var(--s4);border-bottom:1px solid rgba(12,15,14,.12)}
.os-campo:nth-child(odd):not(.os-campo--larga){border-right:1px solid rgba(12,15,14,.12)}
.os-campo--larga{grid-column:1 / -1}
.os-rot{text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:rgba(12,15,14,.55)}
.os input,.os select,.os textarea{width:100%;border:0;background:transparent;color:var(--tinta-escura);font:400 17px/1.5 var(--display);padding:4px 0;border-radius:0;outline:none;resize:vertical}
.os select{appearance:none;-webkit-appearance:none;cursor:pointer;background: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' fill='none' stroke='%230C0F0E' stroke-width='1.4'/%3E%3C/svg%3E") right 2px center no-repeat}
.os input::placeholder,.os textarea::placeholder{color:rgba(12,15,14,.38)}
.os-campo:focus-within{background:color-mix(in srgb,var(--verde) 6%,transparent)}
.os-campo:focus-within .os-rot{color:var(--verde-fundo)}
.os-campo.erro .os-rot{color:#B3261E}
.os-campo.marcado{animation:marca 1s var(--ease)}
@keyframes marca{0%{background:color-mix(in srgb,var(--verde) 22%,transparent)}100%{background:transparent}}
.os-pe{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4)}
.os-enviar{background:var(--tinta-escura);color:var(--tinta-clara);border-color:transparent;cursor:pointer}
.os-enviar .led{width:8px;height:8px;border-radius:50%;background:rgba(238,241,238,.25);transition:background .3s}
.os-status[data-estado="pronta"] ~ * .os-enviar .led,.os.pronta .os-enviar .led{background:var(--verde)}
.os-enviar:hover{background:var(--verde-fundo)}
.os-enviar[disabled]{opacity:.6;cursor:progress}
.os-nota{flex:1 1 240px;font-size:13px;line-height:1.5;color:rgba(12,15,14,.6)}
.os-retorno{padding:0 var(--s4);font:400 14px/1.5 var(--mono);color:var(--verde-fundo)}
.os-retorno:not(:empty){padding-bottom:var(--s3)}
.os-retorno a{border-bottom:1px solid currentColor}
@media (max-width:900px){
  .canais-grade,.ordem-grade{grid-template-columns:1fr}
  .canal{padding-left:var(--s2)}
  .canal > .pad{left:-17px;width:9px;height:9px}
  .os-pad{left:-21px;width:9px;height:9px}
  .os-campos{grid-template-columns:1fr}
  .os-campo{padding:16px 18px}
  .os-campo:nth-child(odd):not(.os-campo--larga){border-right:0}
  .os-cab,.os-pe{padding:18px}
  .os-retorno{padding:0 18px}
}

/* ===== Movimento reduzido ===== */
.fx-reduzido .tela img{transition:none}
.fx-reduzido .disjuntor .alavanca{transition:none}
.fx-reduzido .origem-pag::after{animation:none}

/* ===== Páginas legais ===== */
.doc-grade{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--s6);align-items:start}
.doc-dados dl{display:grid;gap:var(--s3);margin-top:var(--s3)}
.doc-dados dt{font:400 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:rgba(12,15,14,.55)}
.doc-dados dd{margin:6px 0 0;font-size:15px;line-height:1.5}
.doc-corpo{max-width:72ch}
.doc-corpo section + section{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid rgba(12,15,14,.12)}
.doc-corpo h2{margin-top:0;font-size:clamp(24px,2.3vw,34px);letter-spacing:-.03em;line-height:1.1;max-width:none}
.doc-corpo p,.doc-corpo li{margin-top:var(--s2);font-size:17px;line-height:1.65;color:rgba(12,15,14,.78)}
.doc-corpo ul{padding-left:1.15em}
.doc-corpo li{margin-top:10px}
.doc-tabela-wrap{margin-top:var(--s3);overflow-x:auto}
.doc-tabela{width:100%;min-width:520px;border-collapse:collapse;font-size:15px}
.doc-tabela th,.doc-tabela td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid rgba(12,15,14,.12)}
.doc-tabela th{font:400 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:rgba(12,15,14,.55)}
.os-nota a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){
  .doc-grade{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .doc-corpo p,.doc-corpo li{font-size:16px}
}
.doc-corpo code{font:400 .9em var(--mono);padding:1px 5px;border-radius:3px;background:rgba(12,15,14,.06)}
.doc-corpo a{text-decoration:underline;text-underline-offset:3px}
.doc-tabela{min-width:680px}