/* Engefisic Engenharia — prévia do site novo (Elemento Digital, 2026)
   Linguagem: a placa de identificação do vaso de pressão (logo e calculadora) e a escala de tensões do MEF (cores de navegação). */
p, li, dd, small, figcaption { text-wrap: pretty }
h1, h2, h3, h4, blockquote p { text-wrap: balance }

:root {
  --tinta: #0b1412; --tinta2: #101c19; --tinta3: #172622; --le: rgba(255, 255, 255, .12);
  --papel: #f2f4f2; --texto: #121b18; --cinza: #55625e; --linha: #d4dbd7;
  --verde: #0a7a42; --verde2: #10904f; --verde-c: #3fbf74; --ouro: #c9a813; --wa: #25d366; --wa2: #4ae085;
  --e0: #2e48d6; --e1: #1e86e8; --e2: #14b4d4; --e3: #16c0a0; --e4: #36b84f; --e5: #93c42c; --e6: #e7bf1c; --e7: #ee8a1f; --e8: #de3b22;
  --f: 'SUSE', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --m: 'B612 Mono', ui-monospace, 'Cascadia Mono', monospace;
  --ease: cubic-bezier(.7, 0, .2, 1);
  --malha: url(/img/malha.svg);
}

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
body { margin: 0; background: var(--papel); color: var(--texto); font: 400 17px/1.6 var(--f); -webkit-font-smoothing: antialiased; overflow-x: clip }
img, svg { display: block; max-width: 100% }
img { height: auto }
a { color: inherit }
h1, h2, h3 { margin: 0; font-weight: 300; line-height: 1.1; letter-spacing: -.02em }
p { margin: 0 }
ul { margin: 0; padding: 0 }
button, input, select { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--e6); outline-offset: 3px }
[style*="var(--e0)"] { --t: #fff }
.sr { position: absolute; left: -9999px; top: 0; z-index: 99; background: #fff; color: var(--texto); padding: 10px 14px }
.sr:focus { left: 12px; top: 12px }
.wrap { width: min(1320px, 100% - 2 * clamp(16px, 4vw, 48px)); margin-inline: auto }

/* ---------------------------------------------------------------- botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 8px; border: 1px solid transparent;
  font: 600 .98rem/1.15 var(--f); letter-spacing: .005em; text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .25s, transform .25s var(--ease) }
.btn svg { width: 20px; height: 20px; flex: none }
.btn .arr { width: 18px; height: 18px; transition: transform .3s var(--ease) }
.btn:hover { transform: translateY(-1px) }
.btn:hover .arr { transform: translateX(4px) }
.btn--verde { background: var(--verde); color: #fff }
.btn--verde:hover { background: var(--verde2); box-shadow: inset 0 -3px 0 var(--ouro), 0 14px 26px -16px rgba(10, 122, 66, .9) }
.btn--wa { background: var(--wa); color: #06341b }
.btn--wa:hover { background: var(--wa2); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16), 0 14px 26px -16px rgba(37, 211, 102, .9) }
.btn--linha { background: transparent; color: var(--texto); border-color: rgba(18, 27, 24, .5) }
.btn--linha:hover { background: var(--texto); border-color: var(--texto); color: #fff }
.btn--claro { background: #fff; color: var(--tinta) }
.btn--claro:hover { background: #eef6f1; box-shadow: inset 0 -3px 0 var(--verde) }

/* escala de tensões (marca das seções) */
.esc { display: flex; gap: 3px }
.esc i { width: 15px; height: 5px; border-radius: 1px }
.esc i:nth-child(1), .eq__escala i:nth-child(1) { background: var(--e0) }
.esc i:nth-child(2), .eq__escala i:nth-child(2) { background: var(--e1) }
.esc i:nth-child(3), .eq__escala i:nth-child(3) { background: var(--e2) }
.esc i:nth-child(4), .eq__escala i:nth-child(4) { background: var(--e3) }
.esc i:nth-child(5), .eq__escala i:nth-child(5) { background: var(--e4) }
.esc i:nth-child(6), .eq__escala i:nth-child(6) { background: var(--e5) }
.esc i:nth-child(7), .eq__escala i:nth-child(7) { background: var(--e6) }
.esc i:nth-child(8), .eq__escala i:nth-child(8) { background: var(--e7) }
.esc i:nth-child(9), .eq__escala i:nth-child(9) { background: var(--e8) }

/* ---------------------------------------------------------------- cabeçalho (rola com a página) */
.cb { position: absolute; top: 0; left: 0; right: 0; z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start;
  padding: 0 clamp(16px, 2.2vw, 36px); color: #fff }
.cb__nav { position: relative; z-index: 2; display: flex; align-items: center; gap: 2px; height: 82px }
.cb__nav--esq { justify-content: flex-end; padding-right: 22px }
.cb__nav--dir { justify-content: flex-start; padding-left: 22px }
.cb__item { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 13px; border: 0; border-radius: 6px; background: none;
  font: 500 .94rem/1 var(--f); color: #fff; text-decoration: none; white-space: nowrap; cursor: pointer; isolation: isolate; overflow: hidden; transition: color .25s }
.cb__item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .32s var(--ease) }
.cb__item::after { content: ""; position: absolute; left: 13px; bottom: 6px; width: 14px; height: 2px; background: var(--c); transition: opacity .2s }
.cb__item:hover, .cb__item[aria-expanded="true"], .cb__item[aria-current="page"] { color: var(--t, var(--tinta)) }
.cb__item:hover::before, .cb__item[aria-expanded="true"]::before, .cb__item[aria-current="page"]::before { transform: scaleY(1) }
.cb__item:hover::after, .cb__item[aria-expanded="true"]::after { opacity: 0 }
.cb__seta { width: 11px; height: 8px; transition: transform .3s var(--ease) }
.cb__item[aria-expanded="true"] .cb__seta { transform: rotate(180deg) }
.cb__wa { margin-left: auto; min-height: 44px; padding: 0 18px; font-size: .92rem }
.cb__wa-ico, .cb__menu { display: none }

/* a placa de identificação (logo) pendurada no topo */
.placa, .vs__placa, .rd__placa { position: relative; display: block;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 2px, rgba(0, 0, 0, .022) 2px 3px), linear-gradient(180deg, #f6f8f7 0%, #e3e8e6 55%, #d6dcd9 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 0 rgba(0, 0, 0, .1), 0 22px 44px -22px rgba(0, 0, 0, .75) }
.placa { position: relative; z-index: 3; width: 252px; padding: 26px 28px 14px; border-radius: 0 0 10px 10px; text-align: center; text-decoration: none;
  transform-origin: 50% 0; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1) }
.placa:hover { transform: rotate(-1.4deg) }
.placa__logo { width: 100%; height: auto }
.placa__gravado { display: block; margin-top: 9px; font: 700 .6rem/1 var(--m); letter-spacing: .24em; color: #69726f; text-shadow: 0 1px 0 rgba(255, 255, 255, .85) }
.placa__rebite { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #fff 0 18%, #b5bcb9 46%, #7c8481 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16), 0 1px 0 rgba(255, 255, 255, .8) }
.placa__rebite:nth-of-type(1) { left: 9px; top: 9px }
.placa__rebite:nth-of-type(2) { right: 9px; top: 9px }
.placa__rebite:nth-of-type(3) { left: 9px; bottom: 9px }
.placa__rebite:nth-of-type(4) { right: 9px; bottom: 9px }

/* mega menu Projetos: largura total, desce por trás do cabeçalho */
.mg { position: absolute; left: 0; right: 0; top: 0; z-index: 1; padding-top: 132px; color: #fff;
  background: var(--malha) 0 0 / 640px, linear-gradient(180deg, #08100e 0, #0e1a17 100%); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7);
  clip-path: inset(0 0 100% 0); transition: clip-path .45s var(--ease) }
.mg.is-aberto { clip-path: inset(0 0 0 0) }
.mg[hidden] { display: block; visibility: hidden }
.mg.is-aberto { visibility: visible }
.mg__in { width: min(1320px, 100% - 80px); margin-inline: auto; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px 54px; padding-bottom: 34px }
.mg__fig { position: relative; margin: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--tinta3) }
.mg__img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s }
.mg__img.is-troca { opacity: .25 }
.mg__fig figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; background: linear-gradient(0deg, rgba(5, 10, 8, .9), rgba(5, 10, 8, 0)) }
.mg__fig-nome { display: block; font: 400 1.35rem/1.1 var(--f) }
.mg__fig-sub { display: block; margin-top: 6px; font: 400 .68rem/1 var(--m); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .65) }
.mg__grupos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px }
.mg__tit { padding-top: 14px; border-top: 3px solid var(--c); font: 400 .7rem/1.2 var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--c); white-space: nowrap }
.mg__grupo ul { list-style: none; margin-top: 14px }
.mg__grupo a { position: relative; display: block; padding: 9px 0 9px 0; font: 400 1.04rem/1.25 var(--f); color: #fff; text-decoration: none; white-space: nowrap; transition: color .2s, padding .3s var(--ease) }
.mg__grupo a::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 2px; background: var(--c); transition: width .3s var(--ease) }
.mg__grupo a:hover, .mg__grupo a:focus-visible { color: var(--c); padding-left: 22px }
.mg__grupo a:hover::before, .mg__grupo a:focus-visible::before { width: 14px }
.mg__pe { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 18px; border-top: 1px solid var(--le);
  font: 400 .74rem/1.3 var(--m); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6) }
.mg__pe a { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font: 500 .95rem var(--f); letter-spacing: 0; text-transform: none }
.mg__pe a .arr { width: 18px; transition: transform .3s var(--ease) }
.mg__pe a:hover { color: var(--e2) }
.mg__pe a:hover .arr { transform: translateX(4px) }

/* gaveta do celular */
.gaveta { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; overflow-y: auto; background: var(--malha) 0 0 / 640px, var(--tinta); color: #fff;
  opacity: 0; transform: translateY(-12px); transition: opacity .3s, transform .35s var(--ease) }
.gaveta[hidden] { display: none }
.gaveta.is-aberta { opacity: 1; transform: none }
.gaveta__topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; background: linear-gradient(180deg, #f6f8f7, #dfe4e2) }
.gaveta__logo { width: 160px }
.gaveta__fecha { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(0, 0, 0, .18); border-radius: 8px; background: #fff; color: var(--tinta); cursor: pointer }
.gaveta__fecha svg { width: 22px }
.gaveta__nav { display: flex; flex-direction: column; padding: 18px 16px }
.gaveta__nav > a, .gaveta__nav summary { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 4px 0 20px;
  border-bottom: 1px solid var(--le); font: 300 1.45rem/1.1 var(--f); color: #fff; text-decoration: none; cursor: pointer; list-style: none }
.gaveta__nav summary::-webkit-details-marker { display: none }
.gaveta__nav > a::before, .gaveta__nav summary::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 22px; margin-top: -11px; border-radius: 2px; background: var(--c) }
.gaveta__nav summary::after { content: "+"; font: 300 1.6rem var(--f); color: rgba(255, 255, 255, .6) }
.gaveta__nav details[open] summary::after { content: "–" }
.gaveta__nav details ul { list-style: none; padding: 8px 0 14px 20px; columns: 2; column-gap: 16px }
.gaveta__nav details a { display: block; padding: 8px 0; font-size: .98rem; color: rgba(255, 255, 255, .85); text-decoration: none; break-inside: avoid }
.gaveta__pe { display: grid; gap: 12px; margin-top: auto; padding: 18px 16px 28px }
.gaveta__tel { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; border: 1px solid var(--le); border-radius: 8px; color: #fff; text-decoration: none }
.gaveta__tel svg { width: 20px }

/* ---------------------------------------------------------------- abertura */
.hr { position: relative; display: grid; justify-items: center; align-content: start; min-height: min(max(660px, 100svh), 1000px); overflow: hidden; background: var(--tinta); color: #fff; isolation: isolate }
.hr__foto { position: absolute; inset: 0 }
.hr__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62% }
.hr::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6, 12, 10, .93) 0%, rgba(6, 12, 10, .8) 30%, rgba(6, 12, 10, .4) 56%, rgba(6, 12, 10, .06) 76%, rgba(6, 12, 10, .3) 100%) }
.hr__malha { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none }
.hr__veu { display: none; position: absolute; inset: 0; z-index: 2; background: var(--tinta) }
.hr__txt { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; width: min(1040px, 100% - 32px); padding: clamp(170px, 19vh, 210px) 0 80px; text-align: center }
.hr__h1 { font: 400 .8rem/1.4 var(--m); letter-spacing: .2em; text-transform: uppercase; color: #a9e3c1 }
.hr__frase { margin: .32em 0 .34em; font: 200 clamp(2.7rem, 6.3vw, 6rem)/.98 var(--f); letter-spacing: -.04em }
.hr__sub { max-width: 62ch; font-size: clamp(1.02rem, 1.25vw, 1.16rem); color: rgba(255, 255, 255, .84) }
.hr__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px }

@media (min-width: 900px) and (hover: hover) {
  .fx .hr__veu { display: block; animation: veu-sai .6s 2.8s forwards }
  .fx .hr__txt > * { animation: sobe 1s cubic-bezier(.2, .7, .2, 1) both }
  .fx .hr__h1 { animation-delay: .55s }
  .fx .hr__frase { animation-delay: .7s }
  .fx .hr__sub { animation-delay: .9s }
  .fx .hr__acoes { animation-delay: 1.05s }
}
@keyframes veu-sai { to { opacity: 0; visibility: hidden } }
@keyframes sobe { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }

/* ---------------------------------------------------------------- seções */
.sec { position: relative; padding: clamp(76px, 9vw, 128px) 0 }
.sec--papel { background: var(--papel) }
.sec--branco { background: #fff }
.sec--tinta { background: var(--malha) 0 0 / 640px, var(--tinta); color: #e8eeeb }
.sc { max-width: 780px; margin-bottom: clamp(38px, 5vw, 60px) }
.sc h2 { margin: 18px 0 16px; font-size: clamp(2.05rem, 3.7vw, 3.3rem); font-weight: 300; letter-spacing: -.03em }
.sc p { font-size: 1.1rem; color: var(--cinza) }
.sc--claro p { color: rgba(255, 255, 255, .72) }
.sc--centro { margin-inline: auto; text-align: center }
.sc--centro .esc { justify-content: center }

/* ---------------------------------------------------------------- equipamentos: foto real e, no hover, a simulação */
.eqs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 264px; grid-auto-flow: dense; gap: 14px }
.eq--g { grid-column: span 2; grid-row: span 2 }
.eq--l, .eq--mais { grid-column: span 2 }
.eq--a { grid-row: span 2 }
.eq { position: relative; display: block; overflow: hidden; border-radius: 10px; background: #dde3e0; color: #fff; text-decoration: none; isolation: isolate }
.eq__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1) }
a.eq::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(5, 11, 9, .86) 0%, rgba(5, 11, 9, .35) 42%, rgba(5, 11, 9, 0) 70%); transition: opacity .4s }
.eq__mef { position: absolute; inset: 0; z-index: 2; background: #fff; opacity: 0; transition: opacity .45s }
.eq__mef img { position: absolute; inset: 9% 6% 22%; width: 88%; height: 69%; object-fit: contain }
.eq__escala { position: absolute; left: 20px; top: 20px; display: flex; gap: 2px }
.eq__escala i { width: 15px; height: 6px }
.eq__rot { position: absolute; left: 20px; top: 34px; font: 400 .66rem/1 var(--m); letter-spacing: .12em; text-transform: uppercase; color: #59625f }
.eq__txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 22px 22px 20px; transition: color .35s }
.eq h3 { font: 400 clamp(1.3rem, 1.6vw, 1.6rem)/1.1 var(--f); letter-spacing: -.015em }
.eq--g h3 { font-size: clamp(1.7rem, 2.4vw, 2.3rem) }
.eq__frase { display: block; max-width: 46ch; margin-top: 8px; font-size: .92rem; line-height: 1.45; color: rgba(255, 255, 255, .82); transition: color .35s }
.eq:not(.eq--g):not(.eq--l) .eq__frase { display: none }
.eq__ver { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font: 400 .7rem/1 var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--e6) }
.eq__ver .arr { width: 16px; transition: transform .3s var(--ease) }
@media (hover: hover) {
  a.eq:hover .eq__mef { opacity: 1 }
  a.eq:hover::after { opacity: 0 }
  a.eq:hover .eq__txt, a.eq:hover .eq__frase { color: var(--texto) }
  a.eq:hover .eq__ver { color: var(--verde) }
  a.eq:hover .eq__ver .arr { transform: translateX(4px) }
  a.eq:hover .eq__foto img { transform: scale(1.05) }
}
.eq--mais { display: flex; flex-direction: column; justify-content: center; padding: 24px 30px; background: var(--malha) 0 0 / 640px, var(--tinta) }
.eq__mais-tit { font: 400 .7rem/1 var(--m); letter-spacing: .16em; text-transform: uppercase; color: var(--e6) }
.eq--mais ul { list-style: none; margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px }
.eq--mais a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--le); color: #fff; text-decoration: none; font-size: .98rem; transition: color .2s }
.eq--mais a .arr { width: 16px; flex: none; opacity: .5; transition: transform .3s var(--ease), opacity .2s }
.eq--mais a:hover { color: var(--e2) }
.eq--mais a:hover .arr { transform: translateX(4px); opacity: 1 }

/* ---------------------------------------------------------------- pré-dimensionador */
.vs { display: grid; grid-template-columns: 370px minmax(0, 1fr) 300px; grid-template-areas: "form desenho desenho" "form res placa" "nota nota nota"; gap: 18px 24px; align-items: start }
.vs__form { grid-area: form; display: grid; gap: 22px; padding: 22px; border: 1px solid var(--le); border-radius: 12px; background: rgba(16, 28, 25, .92) }
.vs__grupo { margin: 0; padding: 0; border: 0; min-width: 0 }
.vs__grupo legend { margin-bottom: 12px; padding: 0; font: 400 .7rem/1 var(--m); letter-spacing: .16em; text-transform: uppercase; color: var(--e6) }
.vs__seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 9px; background: rgba(255, 255, 255, .06) }
.vs__seg--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px }
.vs__seg label { position: relative; display: block }
.vs__seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer }
.vs__seg span { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 4px; border-radius: 6px; font-size: .86rem; line-height: 1.15; text-align: center;
  color: rgba(255, 255, 255, .78); cursor: pointer; transition: background-color .2s, color .2s }
.vs__seg label:hover span { color: #fff; background: rgba(255, 255, 255, .06) }
.vs__seg input:checked + span { background: var(--verde); color: #fff; box-shadow: inset 0 -2px 0 var(--ouro) }
.vs__seg input:focus-visible + span { outline: 2px solid var(--e6); outline-offset: 1px }
.vs__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.vs__campo { display: grid; gap: 6px; margin-top: 12px; min-width: 0 }
.vs__campo > span:first-child { font-size: .84rem; color: rgba(255, 255, 255, .72) }
.vs__num { position: relative; display: block }
.vs__num i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 400 .74rem var(--m); font-style: normal; color: rgba(255, 255, 255, .45); pointer-events: none }
.vs input[type="number"], .vs select { width: 100%; height: 46px; padding: 0 44px 0 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; background: #08110f; color: #fff;
  font: 400 .98rem var(--m); transition: border-color .2s, box-shadow .2s; -moz-appearance: textfield }
.vs select { padding-right: 34px; font: 400 .9rem var(--f); text-overflow: ellipsis; appearance: none; -webkit-appearance: none; cursor: pointer;
  background: #08110f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%23e7bf1c' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center / 11px 8px }
.vs select option { background: #0b1412; color: #fff }
.vs input::-webkit-outer-spin-button, .vs input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }
.vs input:hover, .vs select:hover { border-color: rgba(255, 255, 255, .32) }
.vs input:focus, .vs select:focus { outline: 0; border-color: var(--e2); box-shadow: 0 0 0 3px rgba(20, 180, 212, .22) }
.vs__desenho { grid-area: desenho; margin: 0; padding: 12px 16px 14px; border: 1px solid var(--le); border-radius: 12px; background: rgba(8, 16, 14, .85) }
.vs__svg { width: 100%; height: auto; overflow: visible }
.vs__svg text { font-family: var(--m); }
.vs__leg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-top: 10px; border-top: 1px solid var(--le); font: 400 .68rem/1.2 var(--m); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6) }
.vs__leg-esc { display: flex; gap: 3px }
.vs__leg-esc i { display: grid; place-items: center; width: 34px; height: 20px; border-radius: 3px; font: 700 .66rem/1 var(--m); font-style: normal; color: #0b1412; opacity: .32; transition: opacity .25s, box-shadow .25s }
.vs__leg-esc i:nth-child(1) { background: var(--e8) }
.vs__leg-esc i:nth-child(2) { background: var(--e7) }
.vs__leg-esc i:nth-child(3) { background: var(--e6) }
.vs__leg-esc i:nth-child(4) { background: var(--e4) }
.vs__leg-esc i:nth-child(5) { background: var(--e1) }
.vs__leg-esc i.on { opacity: 1; box-shadow: 0 0 0 2px #fff }
.vs__leg-txt { text-transform: none; letter-spacing: .02em }
.vs__res { grid-area: res; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--le); border-left: 1px solid var(--le) }
.vs__r { padding: 16px 18px 18px; border-right: 1px solid var(--le); border-bottom: 1px solid var(--le); min-width: 0 }
.vs__r-tit { font: 400 .68rem/1.2 var(--m); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55) }
.vs__r-val { margin-top: 8px; font: 300 clamp(1.7rem, 2.3vw, 2.15rem)/1 var(--f); letter-spacing: -.02em; color: #fff }
.vs__r-sub { margin-top: 8px; font-size: .86rem; line-height: 1.4; color: rgba(255, 255, 255, .66) }
.vs__r--nr .vs__r-val { color: var(--catc, #fff) }
.vs__aviso { grid-column: 1 / -1; padding: 12px 16px; border-left: 3px solid var(--e8); background: rgba(222, 59, 34, .14); font-size: .92rem; color: #ffd9d2 }
.vs__placa-col { grid-area: placa }
.vs__placa { padding: 28px 22px 18px; border-radius: 8px; color: #26302d }
.vs__placa-tit { margin-bottom: 12px; font: 700 .62rem/1 var(--m); letter-spacing: .18em; text-transform: uppercase; text-align: center; color: #66706c }
.vs__placa dl { margin: 0 }
.vs__placa dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(0, 0, 0, .1); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset }
.vs__placa dt { font: 400 .64rem/1.2 var(--m); letter-spacing: .08em; text-transform: uppercase; color: #5d6763 }
.vs__placa dd { margin: 0; font: 700 .86rem/1.2 var(--m); white-space: nowrap; text-align: right; text-shadow: 0 1px 0 rgba(255, 255, 255, .8) }
.vs__envia { width: 100%; margin-top: 14px }
.vs__dica { margin-top: 8px; font-size: .8rem; line-height: 1.45; color: rgba(255, 255, 255, .55) }
.vs__nota { grid-area: nota; max-width: 120ch; font-size: .82rem; line-height: 1.55; color: rgba(255, 255, 255, .5) }

/* ---------------------------------------------------------------- Petrobras */
.pb__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(36px, 5vw, 84px); align-items: start }
.pb__lado .sc { margin-bottom: 28px }
.pb__foto { margin: 0; border-radius: 10px; overflow: hidden }
.pb__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover }
.pb__conta { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 22px 0 26px; border-top: 1px solid var(--linha) }
.pb__conta li { display: grid; gap: 4px; padding: 14px 10px 0 0 }
.pb__conta li + li { padding-left: 14px; border-left: 1px solid var(--linha) }
.pb__conta b { font: 200 2.6rem/1 var(--f); letter-spacing: -.03em; color: var(--verde) }
.pb__conta span { font: 400 .68rem/1.3 var(--m); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--cinza) }
.pb__rot { padding-bottom: 14px; font: 400 .7rem/1 var(--m); letter-spacing: .16em; text-transform: uppercase; color: var(--cinza) }
.pb__cols { columns: 2; column-gap: 34px }
.pb__mais { display: none }
.pb__linha { position: relative; break-inside: avoid; padding: 16px 0 18px; border-top: 1px solid var(--linha) }
.pb__linha::before { content: ""; position: absolute; left: 0; top: -1px; width: 28px; height: 3px; background: var(--c); transition: width .5s var(--ease) }
.pb__linha:hover::before { width: 100% }
.pb__nome { margin-bottom: 10px; font: 200 2.3rem/.95 var(--f); letter-spacing: -.03em; color: var(--texto); white-space: nowrap }
.pb__linha ul { list-style: none; display: grid; gap: 7px }
.pb__linha li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 9px; font-size: .93rem; line-height: 1.35 }
.pb__linha code { padding: 3px 7px; border-radius: 4px; background: #eef2f0; font: 400 .68rem/1.3 var(--m); letter-spacing: .02em; color: #3d4945; overflow-wrap: anywhere }

/* ---------------------------------------------------------------- clientes */
.cl { list-style: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border-top: 1px solid var(--linha); border-left: 1px solid var(--linha) }
.cl li { position: relative; display: grid; place-items: center; height: 118px; padding: 0 12px; border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); transition: background-color .3s }
.cl li::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 3px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease) }
.cl img { width: auto; max-width: 78%; max-height: 42px; object-fit: contain; filter: grayscale(1); opacity: .62; transition: filter .3s, opacity .3s, transform .4s var(--ease) }
.cl li:hover { background: #fff }
.cl li:hover::after { transform: scaleX(1) }
.cl li:hover img { filter: none; opacity: 1; transform: scale(1.06) }

/* ---------------------------------------------------------------- empresa e códigos */
.em__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center }
.em__eq { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .22em; margin-bottom: 26px; font: 200 clamp(3.3rem, 6.6vw, 6.2rem)/.92 var(--f); letter-spacing: -.045em }
.em__eq span:first-child { color: #fff }
.em__eq b { font-weight: 200; color: var(--ouro) }
.em__eq span:last-child { color: var(--verde-c) }
.em__txt h2 { margin-bottom: 22px; font-size: clamp(1.9rem, 3vw, 2.7rem); letter-spacing: -.03em }
.em__txt p { margin-top: 14px; color: rgba(255, 255, 255, .76) }
.em__selos { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 30px }
.em__selos li { display: grid; gap: 6px; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px }
.em__selos span { font: 400 .64rem/1 var(--m); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55) }
.em__selos b { font: 700 1.02rem/1 var(--m); color: #fff }
.cd { padding: clamp(24px, 3vw, 36px); border: 1px solid var(--le); border-radius: 12px; background: rgba(16, 28, 25, .9) }
.cd__tit { margin-bottom: 20px; font: 400 1.32rem/1.2 var(--f); letter-spacing: -.01em; color: #fff }
.cd__lista { list-style: none; display: flex; flex-wrap: wrap; gap: 8px }
.cd__lista button { position: relative; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .17); border-radius: 7px; background: none; color: #fff; font: 400 1.02rem/1.1 var(--f);
  cursor: pointer; isolation: isolate; overflow: hidden; transition: color .25s, border-color .25s }
.cd__lista button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease) }
.cd__lista button:hover, .cd__lista button.on { color: var(--t, var(--tinta)); border-color: var(--c) }
.cd__lista button:hover::before, .cd__lista button.on::before { transform: scaleX(1) }
.cd__nota { min-height: 4.4em; margin-top: 24px; padding: 2px 0 2px 16px; border-left: 3px solid var(--cn, var(--e0)); color: rgba(255, 255, 255, .8) }
.cd__nota span { display: block; margin-bottom: 6px; font: 400 .7rem/1 var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--e6) }

/* ---------------------------------------------------------------- contato */
.ct__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 84px); align-items: center }
.ct__foto { margin: 0; height: 100%; min-height: 520px; border-radius: 12px; overflow: hidden }
.ct__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50% }
.ct__txt .sc { margin-bottom: 30px }
.ct__linhas { list-style: none; border-top: 1px solid var(--linha) }
.ct__linhas a { position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 17px 14px 17px 16px; border-bottom: 1px solid var(--linha);
  color: var(--texto); text-decoration: none; isolation: isolate }
.ct__linhas a::before { content: ""; position: absolute; inset: 0 0 -1px; z-index: -1; background: color-mix(in srgb, var(--c) 16%, #fff); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease) }
.ct__linhas a::after { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; background: var(--c) }
.ct__linhas a:hover::before { transform: scaleX(1) }
.ct__rot { font: 400 .68rem/1 var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--cinza) }
.ct__val { font: 300 1.5rem/1.2 var(--f); letter-spacing: -.015em; overflow-wrap: anywhere }
.ct__val--mail { font-size: 1.12rem }
.ct__linhas .arr { width: 20px; transition: transform .3s var(--ease) }
.ct__linhas a:hover .arr { transform: translateX(4px) }
.ct__hora { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--cinza); font-size: .95rem }
.ct__hora svg { width: 18px; flex: none }
.ct__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px }

/* ---------------------------------------------------------------- páginas internas */
.pi { position: relative; padding: 196px 0 76px; background: var(--malha) 0 0 / 640px, linear-gradient(180deg, #08100e, var(--tinta)); color: #fff }
.pi__in { max-width: 900px }
.pi h1 { margin: 14px 0 16px; font: 200 clamp(2.4rem, 5vw, 4.4rem)/1 var(--f); letter-spacing: -.04em }
.pi p { max-width: 64ch; font-size: 1.1rem; color: rgba(255, 255, 255, .78) }
.pi--curta { display: grid; align-items: center; min-height: 82vh }
.pi--curta .btn { margin-top: 30px }
.trilha { display: flex; gap: 10px; font: 400 .72rem/1 var(--m); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6) }
.trilha a { color: #fff; text-decoration: none }
.trilha a:hover { color: var(--e6) }
.vsx--pagina { padding-top: 56px }
.mt__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px }
.mt__bloco h3 { margin-bottom: 12px; font: 400 1.3rem/1.2 var(--f); letter-spacing: -.01em }
.mt__bloco p { color: var(--cinza) }
.mt__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; margin-top: 54px }
.tb { width: 100%; border-collapse: collapse; background: #fff; font-size: .95rem }
.tb caption { padding-bottom: 12px; text-align: left; font: 400 .72rem/1.3 var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--cinza) }
.tb th, .tb td { padding: 11px 12px; border-bottom: 1px solid var(--linha); text-align: center }
.tb thead th { font: 600 .82rem/1.2 var(--f); background: var(--tinta); color: #fff }
.tb thead small { display: block; margin-top: 3px; font: 400 .64rem/1.2 var(--m); color: rgba(255, 255, 255, .6) }
.tb tbody th { font-weight: 600 }
.tb .c1, .tb .c2, .tb .c3, .tb .c4, .tb .c5 { font: 700 .9rem var(--m) }
.tb .c1 { background: color-mix(in srgb, var(--e8) 24%, #fff) }
.tb .c2 { background: color-mix(in srgb, var(--e7) 24%, #fff) }
.tb .c3 { background: color-mix(in srgb, var(--e6) 30%, #fff) }
.tb .c4 { background: color-mix(in srgb, var(--e4) 22%, #fff) }
.tb .c5 { background: color-mix(in srgb, var(--e1) 20%, #fff) }
.mt__cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 54px; padding: 26px 30px; border-radius: 12px;
  background: var(--malha) 0 0 / 640px, var(--tinta); color: #fff }
.mt__cta p { font: 300 1.35rem/1.3 var(--f); max-width: 52ch }

/* ---------------------------------------------------------------- rodapé: a escala de tensões vira o mapa do site */
.rd { background: #070d0b; color: rgba(255, 255, 255, .76) }
.rd__escala { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)) }
.rd__escala a { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 72px; padding: 0 10px; text-align: center;
  border-top: 8px solid var(--c); color: #fff; font: 500 .86rem/1.15 var(--f); text-decoration: none; transition: background-color .3s, color .3s, border-top-width .3s var(--ease) }
.rd__escala a:hover { background: var(--c); color: var(--t, var(--tinta)) }
.rd__topo svg { width: 18px; height: 18px; flex: none; transition: transform .3s var(--ease) }
.rd__topo:hover svg { transform: translateY(-3px) }
.rd__corpo { width: min(1320px, 100% - 2 * clamp(16px, 4vw, 48px)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto; gap: clamp(32px, 4vw, 64px); padding: 64px 0 52px }
.rd__placa { width: 230px; padding: 18px 22px; border-radius: 8px }
.rd__lema { margin-top: 24px; font: 300 1.6rem/1.15 var(--f); letter-spacing: -.02em; color: #fff }
.rd__crea { margin-top: 12px; max-width: 42ch; font-size: .9rem }
.rd__ficha { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px }
.rd__ficha div { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); min-width: 0 }
.rd__ficha div:first-child { grid-column: 1 / -1 }
.rd__ficha dt { font: 400 .66rem/1 var(--m); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .48) }
.rd__ficha dd { margin: 8px 0 0; font-size: .98rem; color: #fff; overflow-wrap: anywhere }
.rd__ficha a { text-decoration: none; transition: color .2s }
.rd__ficha a:hover { color: var(--e2) }
.rd__redes { display: flex; flex-direction: column; gap: 10px }
.rd__redes a { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; color: #fff; text-decoration: none;
  font-size: .92rem; transition: background-color .25s, color .25s, border-color .25s }
.rd__redes svg { width: 20px; height: 20px }
.rd__redes a:hover { background: #fff; color: var(--tinta); border-color: #fff }
.rd__base { width: min(1320px, 100% - 2 * clamp(16px, 4vw, 48px)); margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px;
  padding: 22px 0 30px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .86rem; color: rgba(255, 255, 255, .55) }
.rd__base a { color: #fff; text-underline-offset: 3px }
.rd__base a:hover { color: var(--e6) }

.wa-flut { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--wa); color: #fff;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5); transition: transform .3s var(--ease), background-color .2s }
.wa-flut svg { width: 32px; height: 32px }
.wa-flut:hover { transform: scale(1.07); background: var(--wa2) }


/* ================================================================ páginas internas */
/* abertura das internas: texto + placa de identificação, faixa de fotos embaixo */
.ph { position: relative; padding: 186px 0 0; background: var(--malha) 0 0 / 640px, linear-gradient(180deg, #08100e, var(--tinta)); color: #fff }
.ph__in { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px clamp(32px, 5vw, 80px); align-items: end; padding-bottom: 56px }
.ph h1 { margin: 16px 0 18px; font: 200 clamp(2.3rem, 4.6vw, 4.1rem)/1.02 var(--f); letter-spacing: -.04em; max-width: 18ch }
.ph__lead { max-width: 62ch; font-size: 1.12rem; color: rgba(255, 255, 255, .78) }
.ph__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px }
.ph__placa { position: relative; padding: 30px 24px 20px; border-radius: 8px; color: #26302d;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 2px, rgba(0, 0, 0, .022) 2px 3px), linear-gradient(180deg, #f6f8f7 0%, #e3e8e6 55%, #d6dcd9 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 0 rgba(0, 0, 0, .1), 0 24px 50px -24px rgba(0, 0, 0, .8) }
.ph__placa-tit { margin-bottom: 12px; font: 700 .64rem/1 var(--m); letter-spacing: .18em; text-transform: uppercase; text-align: center; color: #66706c }
.ph__placa dl { margin: 0 }
.ph__placa dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; border-top: 1px solid rgba(0, 0, 0, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6) }
.ph__placa dt { font: 400 .66rem/1.2 var(--m); letter-spacing: .08em; text-transform: uppercase; color: #5d6763; white-space: nowrap }
.ph__placa dd { margin: 0; font: 700 .86rem/1.3 var(--m); text-align: right; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); overflow-wrap: anywhere }
.ph__placa a { color: inherit; text-decoration: none }
.ph__placa a:hover { color: var(--verde) }
.ph__placa--ct { align-self: center }
.ph__mail { font-size: .76rem !important }
.ph__faixa { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 8px; padding: 0 8px 8px }
.ph__faixa--3 { --n: 3 }
.ph__faixa--2 { --n: 2 }
.ph__faixa--1 { --n: 1 }
.ph__f, .ph__faixa figure { position: relative; height: clamp(170px, 19vw, 260px); margin: 0; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #fff; cursor: zoom-in }
.ph__faixa figure { cursor: default }
.ph__f img, .ph__faixa figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1) }
.ph__f::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 0 var(--e6); transition: box-shadow .3s }
.ph__f:hover img { transform: scale(1.06) }
.ph__f:hover::after, .ph__f:focus-visible::after { box-shadow: inset 0 -4px 0 0 var(--e6) }

/* família: texto e lista do que calculamos */
.fm__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 96px); align-items: start }
.fm__txt h2 { margin: 18px 0 20px; font-size: clamp(1.9rem, 3.2vw, 2.8rem); letter-spacing: -.03em }
.fm__txt p { margin-top: 14px; font-size: 1.06rem; color: var(--cinza) }
.fm__lista { padding: 28px 28px 26px; border-radius: 12px; background: #fff; box-shadow: 0 1px 0 var(--linha), 0 30px 60px -40px rgba(11, 20, 18, .35) }
.fm__lista h3 { font: 400 1.3rem/1.2 var(--f) }
.fm__calc { list-style: none; margin: 16px 0 24px }
.fm__calc li { position: relative; padding: 11px 0 11px 26px; border-top: 1px solid var(--linha); font-size: .98rem; line-height: 1.4 }
.fm__calc li::before { content: ""; position: absolute; left: 0; top: 18px; width: 14px; height: 5px; border-radius: 1px; background: var(--c) }
.fm__nt { font: 400 .68rem/1 var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--cinza) }
.fm__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 18px }
.fm__chips li { padding: 6px 10px; border: 1px solid var(--linha); border-radius: 6px; font: 400 .74rem/1.2 var(--m); color: var(--texto); background: var(--papel) }
.fm__link { display: inline-flex; align-items: center; gap: 8px; color: var(--verde); font-weight: 600; text-decoration: none; font-size: .95rem }
.fm__link .arr { width: 18px; transition: transform .3s var(--ease) }
.fm__link:hover .arr { transform: translateX(4px) }

/* faixa de chamada (pré-dimensionamento, Petrobras) */
.tz { background: var(--verde); color: #fff }
.tz__in { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 40px 0 }
.tz__rot { font: 400 .68rem/1 var(--m); letter-spacing: .16em; text-transform: uppercase; color: #f4e08a }
.tz h2 { margin: 10px 0 8px; font: 300 clamp(1.6rem, 2.6vw, 2.2rem)/1.1 var(--f); letter-spacing: -.02em }
.tz p { max-width: 64ch; color: rgba(255, 255, 255, .85) }
.tz .btn { flex: none }

/* galeria em fileiras justificadas */
.gl { display: flex; flex-wrap: wrap; gap: 8px }
.gl__item { position: relative; display: block; flex: var(--r) 1 calc(var(--r) * 210px); height: 210px; overflow: hidden; border-radius: 6px; background: #eef2f0; cursor: zoom-in }
.gl.is-pronta { display: grid; gap: 8px }
.gl__fila { display: flex; gap: 8px }
.gl__fila .gl__item { min-width: 0; height: 100% }
.gl__resto[hidden] { display: none }
.gl__mais { display: none }
.gl__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1) }
.gl__item::after { content: ""; position: absolute; inset: 0; background: rgba(11, 20, 18, .28); opacity: 0; transition: opacity .3s }
.gl__lupa { position: absolute; right: 10px; bottom: 10px; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: #fff; color: var(--tinta);
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease) }
.gl__lupa svg { width: 18px; height: 18px }
.gl__item:hover img { transform: scale(1.05) }
.gl__item:hover::after, .gl__item:focus-visible::after { opacity: 1 }
.gl__item:hover .gl__lupa, .gl__item:focus-visible .gl__lupa { opacity: 1; transform: none }

/* visualizador */
.lb { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; align-content: center; gap: 14px; padding: 20px; opacity: 0; transition: opacity .28s }
.lb[hidden] { display: none }
.lb.is-aberto { opacity: 1 }
.lb__fundo { position: absolute; inset: 0; background: var(--malha) 0 0 / 640px, rgba(6, 12, 10, .96) }
.lb__palco { position: relative; margin: 0; border-radius: 6px; overflow: hidden; background: #0e1916; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9); transition: width .3s var(--ease), height .3s var(--ease) }
.lb__img { width: 100%; height: 100%; object-fit: contain; background: #fff; user-select: none; -webkit-user-drag: none }
.lb__malha { position: absolute; inset: 0; width: 100%; height: 100% }
.lb__palco.is-vem .lb__img { animation: lb-vem .35s ease both }
.lb__palco.is-vem-dir .lb__img { animation: lb-dir .32s cubic-bezier(.2, .7, .2, 1) both }
.lb__palco.is-vem-esq .lb__img { animation: lb-esq .32s cubic-bezier(.2, .7, .2, 1) both }
@keyframes lb-vem { from { opacity: 0; transform: scale(.985) } to { opacity: 1; transform: none } }
@keyframes lb-dir { from { opacity: 0; transform: translateX(26px) } to { opacity: 1; transform: none } }
@keyframes lb-esq { from { opacity: 0; transform: translateX(-26px) } to { opacity: 1; transform: none } }
.lb__barra { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; width: min(1280px, 86vw); color: #fff }
.lb__leg { display: flex; align-items: baseline; gap: 14px; min-width: 0 }
.lb__nome { font: 400 1.02rem/1.3 var(--f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lb__conta { flex: none; font: 400 .74rem/1 var(--m); letter-spacing: .12em; color: var(--e6) }
.lb__bts { display: flex; gap: 8px; flex: none }
.lb__bt { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 8px; background: rgba(255, 255, 255, .04); color: #fff; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s }
.lb__bt svg { width: 20px; height: 20px }
.lb__bt:hover { background: #fff; border-color: #fff; color: var(--tinta) }
.lb__bt--x:hover { background: var(--e8); border-color: var(--e8); color: #fff }

/* perguntas frequentes */
.faq__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start }
.faq__cab h2 { margin: 18px 0 22px; font-size: clamp(1.9rem, 3.1vw, 2.7rem); letter-spacing: -.03em }
.faq__ajuda { margin-bottom: 14px; color: var(--cinza) }
.faq__lista { border-top: 1px solid var(--linha) }
.fq { position: relative; border-bottom: 1px solid var(--linha); transition: background-color .3s }
.fq::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 3px; background: var(--c); transition: width .45s var(--ease) }
.fq.is-aberta { background: #fff }
.fq.is-aberta::before, .fq:hover::before { width: 64px }
.fq summary { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 22px 20px 22px 4px; cursor: pointer; list-style: none; transition: padding .35s var(--ease) }
.fq summary::-webkit-details-marker { display: none }
.fq.is-aberta summary { padding-left: 22px }
.fq__p { font: 400 clamp(1.08rem, 1.4vw, 1.24rem)/1.35 var(--f); letter-spacing: -.01em; transition: color .2s }
.fq summary:hover .fq__p { color: var(--verde) }
.fq__ico { position: relative; flex: none; width: 36px; height: 36px; border: 1px solid var(--linha); border-radius: 8px; background: #fff; transition: background-color .3s, border-color .3s }
.fq__ico::before, .fq__ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--texto); transition: transform .35s var(--ease), background-color .3s }
.fq__ico::after { transform: rotate(90deg) }
.fq.is-aberta .fq__ico { background: var(--tinta); border-color: var(--tinta) }
.fq.is-aberta .fq__ico::before, .fq.is-aberta .fq__ico::after { background: #fff }
.fq.is-aberta .fq__ico::after { transform: rotate(0) }
.fq__r { overflow: hidden }
.fq__r > div { padding: 0 64px 24px 22px }
.fq__r p { max-width: 70ch; color: var(--cinza); font-size: 1rem }

/* cartões de família (Projetos e relacionados) */
.pj { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 10px; background: #fff; color: var(--texto); text-decoration: none;
  box-shadow: 0 1px 0 var(--linha); transition: transform .4s var(--ease), box-shadow .4s }
.pj::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease) }
.pj__foto { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #eef2f0 }
.pj__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1) }
.pj__txt { display: flex; flex-direction: column; padding: 18px 20px 20px }
.pj__nome { font: 400 1.28rem/1.15 var(--f); letter-spacing: -.01em }
.pj__curto { margin: 8px 0 14px; font-size: .9rem; line-height: 1.45; color: var(--cinza) }
.pj__n { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font: 400 .68rem/1 var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--verde) }
.pj__n .arr { width: 16px; transition: transform .3s var(--ease) }
.pj:hover { transform: translateY(-3px); box-shadow: 0 1px 0 var(--linha), 0 26px 50px -30px rgba(11, 20, 18, .5) }
.pj:hover::after { transform: scaleX(1) }
.pj:hover .pj__foto img { transform: scale(1.05) }
.pj:hover .pj__n .arr { transform: translateX(4px) }
.rl .pj { background: #13211d; color: #fff; box-shadow: none }
.rl .pj__curto { color: rgba(255, 255, 255, .66) }
.rl .pj__n { color: var(--e6) }
.rl__grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px }
.rl__todos { margin-top: 30px }
.pjg + .pjg { margin-top: clamp(56px, 7vw, 88px) }
.pjg__tit { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; padding-top: 16px; border-top: 3px solid var(--c);
  font: 300 clamp(1.7rem, 2.8vw, 2.4rem)/1.1 var(--f); letter-spacing: -.03em }
.pjg__tit span { font: 400 .7rem/1 var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--cinza) }
.pjg__grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px }

/* faixa final de contato */
.ctb { background: #e2e8e5; color: var(--texto); border-top: 1px solid #d3dbd7 }
.ctb__in { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 56px 0 }
.ctb h2 { font: 300 clamp(1.7rem, 2.8vw, 2.4rem)/1.1 var(--f); letter-spacing: -.03em }
.ctb p { margin-top: 10px; max-width: 58ch; color: var(--cinza) }
.ctb__acoes { display: flex; flex-wrap: wrap; gap: 12px; flex: none }

/* empresa */
.ori__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center }
.ori__eq { display: flex; flex-direction: column; font: 200 clamp(4rem, 9vw, 8.4rem)/.86 var(--f); letter-spacing: -.05em }
.ori__eq span:first-child { color: var(--tinta) }
.ori__eq b { font-weight: 200; color: var(--ouro); line-height: .7 }
.ori__eq span:last-child { color: var(--verde) }
.ori__txt h2 { margin: 18px 0 18px; font-size: clamp(1.9rem, 3.1vw, 2.7rem); letter-spacing: -.03em }
.ori__txt p { margin-top: 14px; font-size: 1.04rem; color: var(--cinza) }
.at { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; border-top: 1px solid var(--le) }
.at li { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--le); color: rgba(255, 255, 255, .86) }
.at__n { font: 400 .78rem/1 var(--m); color: var(--c) }
.at li::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: var(--c); transition: width .4s var(--ease) }
.at li:hover::before { width: 100% }
.sg { list-style: none; display: flex; flex-wrap: wrap; gap: 10px }
.sg li { position: relative; flex: 1 1 200px; display: flex; align-items: center; min-height: 64px; padding: 14px 18px 14px 22px; border: 1px solid var(--linha); border-radius: 8px; background: var(--papel);
  font: 400 1.04rem/1.25 var(--f); transition: border-color .3s, background-color .3s }
.sg li::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 2px 2px 0; background: var(--c) }
.sg li:hover { border-color: var(--c); background: #fff }
.pl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
.pl__i { padding: 30px 28px; border-radius: 10px; background: #fff; border-top: 4px solid var(--c); box-shadow: 0 1px 0 var(--linha) }
.pl__i h3 { font: 300 1.7rem/1 var(--f); letter-spacing: -.02em }
.pl__i p { margin-top: 14px; color: var(--cinza) }

/* normas */
.nms { list-style: none; border-top: 1px solid var(--linha) }
.nm { position: relative; display: grid; grid-template-columns: 150px minmax(0, 5fr) minmax(0, 6fr); gap: 28px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--linha) }
.nm::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 3px; background: var(--c); transition: width .45s var(--ease) }
.nm:hover::before { width: 100% }
.nm__logo { display: grid; place-items: center; height: 72px; padding: 10px; border-radius: 8px; background: #fff }
.nm__logo img { max-height: 48px; width: auto; max-width: 100%; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s }
.nm:hover .nm__logo img { filter: none; opacity: 1 }
.nm__sigla { font: 700 1rem/1 var(--m); letter-spacing: .06em; color: var(--tinta) }
.nm__txt h3 { font: 400 1.25rem/1.2 var(--f) }
.nm__txt p { margin-top: 6px; font-size: .95rem; color: var(--cinza) }
.nm__onde-t { margin-bottom: 8px; font: 400 .64rem/1 var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--cinza) }
.nm__chips { display: flex; flex-wrap: wrap; gap: 6px }
.nm__chips a { padding: 6px 10px; border: 1px solid var(--linha); border-radius: 6px; background: #fff; color: var(--texto); font-size: .86rem; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s }
.nm__chips a:hover { background: var(--tinta); border-color: var(--tinta); color: #fff }
.nm__geral { font-size: .9rem; color: var(--cinza) }

/* Petrobras: lista completa com busca */
.pf__busca { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 40px }
.pf__campo { position: relative; flex: 1; max-width: 560px }
.pf__campo svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--cinza) }
.pf__campo input { width: 100%; height: 56px; padding: 0 18px 0 48px; border: 1px solid var(--linha); border-radius: 8px; background: #fff; font: 400 1rem var(--f); color: var(--texto); transition: border-color .2s, box-shadow .2s }
.pf__campo input:focus { outline: 0; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(10, 122, 66, .15) }
.pf__conta { font: 400 .74rem/1 var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--cinza) }
.pf__bloco + .pf__bloco { margin-top: 64px }
.pf__tit { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; font: 300 clamp(1.7rem, 2.8vw, 2.4rem)/1.1 var(--f); letter-spacing: -.03em }
.pf__tit span { font: 400 .7rem/1 var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--cinza) }
.pb__cols--3 { columns: 3 }
.pf__on { list-style: none; columns: 2; column-gap: 34px; border-top: 1px solid var(--linha) }
.pf__on li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 0; border-bottom: 1px solid var(--linha); break-inside: avoid; font-size: .94rem; line-height: 1.35 }
.pf__on code { padding: 3px 7px; border-radius: 4px; background: #e8edea; font: 400 .68rem/1.3 var(--m); color: #3d4945; overflow-wrap: anywhere }
.pf__vazio { padding: 24px 0; color: var(--cinza) }
.pf [hidden] { display: none !important }

/* clientes com nome */
.cl--nomes { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.cl--nomes li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 150px }
.cl--nomes span { font: 400 .64rem/1.2 var(--m); letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); text-align: center }

/* contato: formulário */
.ctf__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start }
.ctf__form h2 { margin: 18px 0 26px; font-size: clamp(1.9rem, 3.1vw, 2.6rem); letter-spacing: -.03em }
.ctf__lado-tit { margin-bottom: 16px; font: 300 1.6rem/1.1 var(--f); letter-spacing: -.02em }
.ctf__foto { margin: 24px 0 0; border-radius: 12px; overflow: hidden }
.ctf__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover }
.fo { padding: clamp(22px, 3vw, 34px); border-radius: 12px; background: #fff; box-shadow: 0 1px 0 var(--linha), 0 30px 60px -40px rgba(11, 20, 18, .35) }
.fo__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
.fo__c { display: grid; gap: 7px; min-width: 0 }
.fo__c--l { grid-column: 1 / -1 }
.fo__c > span { font-size: .88rem; color: var(--cinza) }
.fo__c b { color: var(--e8); font-weight: 600 }
.fo input, .fo select, .fo textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 8px; background: var(--papel); color: var(--texto);
  font: 400 1rem/1.4 var(--f); transition: border-color .2s, box-shadow .2s, background-color .2s }
.fo textarea { resize: vertical; min-height: 130px }
.fo select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background: var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%230a7a42' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center / 11px 8px }
.fo input:hover, .fo select:hover, .fo textarea:hover { border-color: #b9c4bf }
.fo input:focus, .fo select:focus, .fo textarea:focus { outline: 0; border-color: var(--verde); background-color: #fff; box-shadow: 0 0 0 3px rgba(10, 122, 66, .14) }
.fo [aria-invalid="true"] { border-color: var(--e8); background-color: #fff5f3 }
.fo__arq { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px dashed #b9c4bf; border-radius: 8px; cursor: pointer; transition: border-color .2s, background-color .2s }
.fo__arq:hover { border-color: var(--verde); background: var(--papel) }
.fo__arq.is-erro { border-color: var(--e8) }
.fo__arq input { position: absolute; inset: 0; opacity: 0; cursor: pointer; min-height: 0 }
.fo__arq-ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 8px; background: var(--tinta); color: #fff }
.fo__arq-ico svg { width: 20px; height: 20px }
.fo__arq-txt { display: grid; gap: 3px; font-size: .96rem; overflow-wrap: anywhere }
.fo__arq-txt small { font-size: .8rem; color: var(--cinza) }
.fo__isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.fo__pe { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 22px }
.fo__envia { min-width: 250px }
.fo__envia:disabled { opacity: .6; cursor: progress }
.fo__msg { font-size: .94rem; color: var(--cinza) }
.fo__msg[data-tipo="ok"] { color: var(--verde) }
.fo__msg[data-tipo="erro"] { color: var(--e8) }

.mg__links { display: flex; flex-wrap: wrap; gap: 8px 26px }
.cb__item--mg.is-atual { color: var(--tinta) }
.cb__item--mg.is-atual::before { transform: scaleY(1) }
.gaveta__todos a { color: var(--e6) !important }

/* ---------------------------------------------------------------- desktop: texto corrido justificado */
@media (min-width: 900px) {
  .sc p, .em__txt p, .vs__nota, .fm__txt p, .ori__txt p { text-align: justify; hyphens: auto }
  .sc--centro p { text-align: center }
}

/* ---------------------------------------------------------------- larguras intermediárias */
@media (max-width: 1279px) {
  .cb { grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: start; gap: 10px; padding-right: 16px }
  .cb__nav, .mg { display: none !important }
  .placa { grid-column: 1; grid-row: 1; width: 196px; padding: 20px 22px 11px }
  .placa__gravado { margin-top: 7px; font-size: .54rem }
  .cb__wa-ico, .cb__menu { display: grid; place-items: center; margin-top: 16px; height: 48px; border-radius: 8px }
  .cb__wa-ico { grid-column: 3; width: 48px; background: var(--wa); color: #fff }
  .cb__wa-ico svg { width: 26px; height: 26px }
  .cb__menu { grid-column: 4; grid-auto-flow: column; gap: 10px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(8, 16, 14, .5); color: #fff; cursor: pointer; font: 500 .92rem var(--f) }
  .cb__menu-l { display: grid; gap: 4px }
  .cb__menu-l i { display: block; width: 20px; height: 2px; background: currentColor }
  .cb__menu-l i:nth-child(2) { width: 14px; background: var(--e6) }
  .vs { grid-template-columns: 330px minmax(0, 1fr); grid-template-areas: "form desenho" "form res" "placa placa" "nota nota" }
  .vs__placa-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: end }
  .vs__envia { margin-top: 0 }
  .rd__corpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) }
  .rd__redes { grid-column: 1 / -1; flex-direction: row }
  .rd__ficha div:nth-child(4), .rd__ficha div:nth-child(5) { grid-column: 1 / -1 }
}
@media (max-width: 1100px) {
  .eqs { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 250px }
  .eq--a { grid-row: span 1 }
  .eq--mais, .eq--t { grid-column: span 2 }
  .pb__in, .em__in { grid-template-columns: minmax(0, 1fr) }
  .pb__lado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 34px; align-items: start }
  .pb__lado .sc { grid-column: 1 / -1 }
  .pb__foto { grid-row: span 2 }
  .pb__conta { margin-top: 0 }
  .pb__cols { columns: 2 }
  .cl { grid-template-columns: repeat(5, minmax(0, 1fr)) }
  .ct__in { grid-template-columns: minmax(0, 1fr) }
  .ct__foto { min-height: 0; aspect-ratio: 16 / 9 }
  .mt__grade { grid-template-columns: minmax(0, 1fr) }
  .mt__tabs { grid-template-columns: minmax(0, 1fr) }
  .rd__escala { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}
@media (max-width: 860px) {
  .vs { grid-template-columns: minmax(0, 1fr); grid-template-areas: "form" "desenho" "res" "placa" "nota" }
  .vs__placa-col { grid-template-columns: minmax(0, 1fr) }
  .vs__envia { margin-top: 14px }
}

/* ---------------------------------------------------------------- celular */
@media (max-width: 760px) {
  body { font-size: 16px }
  .placa { width: 160px; padding: 17px 18px 9px }
  .placa__gravado { font-size: .48rem; letter-spacing: .2em }
  .cb__menu-t { display: none }
  .cb__menu { padding: 0 14px }
  .hr { min-height: 0 }
  .hr__foto img { object-position: 46% 70% }
  .hr::before { background: linear-gradient(180deg, rgba(6, 12, 10, .94) 0%, rgba(6, 12, 10, .84) 45%, rgba(6, 12, 10, .5) 72%, rgba(6, 12, 10, .3) 100%) }
  .hr__txt { padding: 150px 0 64px }
  .hr__h1 { font-size: .7rem; letter-spacing: .16em }
  .hr__frase { font-size: clamp(2.35rem, 11vw, 3.2rem) }
  .hr__acoes { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px }
  .sc, .sc--centro { margin-inline: auto; text-align: center }
  .sc .esc { justify-content: center }
  .sc h2 { font-size: clamp(1.85rem, 8vw, 2.3rem) }
  .sc p { font-size: 1.02rem }
  .eqs { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 12px }
  .eq, .eq--g, .eq--l, .eq--a, .eq--t { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3 }
  .eq--mais { grid-column: auto; aspect-ratio: auto; padding: 26px 20px }
  .eq__txt { text-align: center }
  .eq__frase { margin-inline: auto }
  .eq--g h3 { font-size: 1.6rem }
  .eq__mais-tit { text-align: center }
  .eq--mais ul { grid-template-columns: minmax(0, 1fr) }
  .vs__form { padding: 18px 16px }
  .vs__seg--3 span { font-size: .8rem }
  .vs__desenho { padding: 8px 10px 12px }
  .vs__res { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
  .vs__r { padding: 14px 12px 16px }
  .vs__r-val { font-size: 1.55rem }
  .vs__r-sub { font-size: .8rem }
  .pb__lado { display: block }
  .pb__lado .btn { width: 100%; max-width: 360px; margin-inline: auto; display: flex }
  .pb__conta { margin: 18px 0 22px; text-align: center }
  .pb__conta li, .pb__conta li + li { padding: 14px 4px 0 }
  .pb__conta b { font-size: 2.1rem }
  .pb__conta span { font-size: .6rem; letter-spacing: .04em }
  .pb__rot { text-align: center }
  .pb__cols { columns: 1 }
  .pb__cols:not(.is-tudo) .pb__linha:nth-child(n+5) { display: none }
  .pb__mais { display: flex; width: 100%; max-width: 360px; margin: 18px auto 0 }
  .pb__mais[hidden] { display: none }
  .pb__nome { font-size: 2.1rem; text-align: center }
  .pb__linha::before { left: 50%; margin-left: -14px }
  .pb__linha:hover::before { width: 28px }
  .pb__linha li { justify-content: center; text-align: center }
  .cl { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .cl li { height: 78px; padding: 0 6px }
  .cl img { max-height: 28px; max-width: 86% }
  .em__eq { justify-content: center }
  .em__txt h2, .cd__tit { text-align: center }
  .em__selos { justify-content: center }
  .em__txt .btn, .ct__acoes .btn { width: 100%; max-width: 360px }
  .em__txt { display: flex; flex-direction: column; align-items: stretch }
  .em__txt .btn { align-self: center }
  .cd__lista { justify-content: center }
  .ct__foto { aspect-ratio: 4 / 3 }
  .ct__linhas a { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 10px 14px 16px }
  .ct__rot { grid-column: 1 }
  .ct__val { grid-column: 1; font-size: 1.25rem }
  .ct__val--mail { font-size: 1rem }
  .ct__linhas .arr { grid-column: 2; grid-row: 1 / span 2 }
  .ct__hora { justify-content: center; text-align: center }
  .ct__acoes { flex-direction: column; align-items: center }
  .pi { padding: 150px 0 56px; text-align: center }
  .pi p { margin-inline: auto }
  .trilha { justify-content: center }
  .pi .esc { justify-content: center }
  .mt__bloco h3 { text-align: center }
  .mt__tabs { overflow-x: auto }
  .tb { font-size: .85rem }
  .tb th, .tb td { padding: 9px 6px }
  .mt__cta { flex-direction: column; text-align: center; padding: 24px 18px }
  .mt__cta p { font-size: 1.15rem }
  .mt__cta .btn { width: 100% }
  .rd__escala a { min-height: 60px; padding: 0 6px; font-size: .8rem }
  .rd__corpo { grid-template-columns: minmax(0, 1fr); text-align: center; padding: 48px 0 40px }
  .rd__placa { margin-inline: auto }
  .rd__crea { margin-inline: auto }
  .rd__ficha { grid-template-columns: minmax(0, 1fr); gap: 16px }
  .rd__redes { justify-content: center }
  .rd__base { flex-direction: column; align-items: center; text-align: center }
  .wa-flut { right: 14px; bottom: 14px; width: 56px; height: 56px }
}

@media (max-width: 1100px) {
  .ph__in, .fm__in, .faq__in, .ori__in, .ctf__in { grid-template-columns: minmax(0, 1fr) }
  .ph__placa { max-width: 520px }
  .rl__grade, .pjg__grade { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .pl { grid-template-columns: minmax(0, 1fr) }
  .nm { grid-template-columns: 120px minmax(0, 1fr) }
  .nm__onde { grid-column: 2 }
  .pb__cols--3 { columns: 2 }
  .cl--nomes { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .ctb__in, .tz__in { flex-direction: column; align-items: flex-start }
  .ori__eq { flex-direction: row; gap: .2em; font-size: clamp(3.4rem, 10vw, 6rem) }
}
@media (max-width: 760px) {
  .ph { padding-top: 140px; text-align: center }
  .ph .trilha { justify-content: center; flex-wrap: wrap }
  .ph h1 { margin-inline: auto; font-size: clamp(2rem, 9vw, 2.6rem) }
  .ph__lead { margin-inline: auto; font-size: 1.02rem }
  .ph__acoes { flex-direction: column; align-items: stretch; max-width: 360px; margin-inline: auto }
  .ph__placa { margin-inline: auto; width: 100%; text-align: left }
  .ph__in { padding-bottom: 36px; gap: 30px }
  .ph__faixa { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .ph__faixa--3 > :first-child { grid-column: 1 / -1 }
  .ph__faixa--1 { grid-template-columns: minmax(0, 1fr) }
  .ph__f, .ph__faixa figure { height: 140px }
  .fm__txt { text-align: center }
  .fm__txt .esc { justify-content: center }
  .fm__txt p { text-align: left }
  .fm__lista { padding: 22px 18px }
  .fm__lista h3, .fm__nt { text-align: center }
  .fm__chips { justify-content: center }
  .fm__link { display: flex; justify-content: center }
  .tz__in, .ctb__in { align-items: center; text-align: center; padding: 40px 0 }
  .tz .btn, .ctb__acoes { width: 100%; max-width: 360px }
  .ctb__acoes { flex-direction: column }
  .faq__cab { text-align: center }
  .faq__cab .esc { justify-content: center }
  .faq__cab .btn { width: 100%; max-width: 360px }
  .fq summary { padding: 18px 4px; gap: 14px }
  .fq.is-aberta summary { padding-left: 14px }
  .fq__r > div { padding: 0 14px 20px }
  .rl__grade, .pjg__grade { grid-template-columns: minmax(0, 1fr) }
  .rl__todos { display: flex; width: 100%; max-width: 360px; margin-inline: auto }
  .pjg__tit { flex-direction: column; align-items: center; text-align: center; gap: 10px }
  .ori__in { text-align: center }
  .ori__eq { justify-content: center }
  .ori__txt .esc { justify-content: center }
  .ori__txt p { text-align: left }
  .at { grid-template-columns: minmax(0, 1fr) }
  .at li { grid-template-columns: 40px minmax(0, 1fr) }
  .sg li { flex-basis: 140px; min-height: 56px; padding: 12px 12px 12px 18px; font-size: .95rem }
  .pl__i { text-align: center; padding: 26px 20px }
  .nm { grid-template-columns: minmax(0, 1fr); gap: 12px; text-align: center }
  .nm__logo { width: 160px; margin-inline: auto }
  .nm__onde { grid-column: auto }
  .nm__chips { justify-content: center }
  .pf__busca { flex-direction: column; align-items: stretch; text-align: center }
  .pf__tit { flex-direction: column; align-items: center; text-align: center; gap: 8px }
  .pb__cols--3, .pf__on { columns: 1 }
  .pf__on li { justify-content: center; text-align: center }
  .cl--nomes { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .cl--nomes li { height: 120px }
  .ctf__form { text-align: center }
  .ctf__form .esc { justify-content: center }
  .fo { text-align: left }
  .fo__grade { grid-template-columns: minmax(0, 1fr) }
  .fo__pe { flex-direction: column; align-items: stretch; text-align: center }
  .fo__envia { min-width: 0; width: 100% }
  .ctf__lado-tit { text-align: center }
  .gl { margin-inline: -8px }
  .gl__mais { display: flex; width: 100%; max-width: 360px; margin: 18px auto 0 }
  .gl__mais[hidden] { display: none }
  .lb { padding: 12px }
  .lb__barra { width: 94vw; flex-direction: column; align-items: stretch; gap: 12px }
  .lb__leg { justify-content: space-between }
  .lb__bts { justify-content: center }
  .lb__bt { width: 56px; height: 52px }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important }
  html { scroll-behavior: auto }
}