/* Tresek: quase preto esverdeado, texto claro quente, um verde-menta de destaque. Schibsted Grotesk no texto,
   Fragment Mono só no que é técnico de verdade (registro, horário, tecnologias). As telas desenhadas (WhatsApp,
   painel, livro) ficam claras, como são de verdade, em cima do fundo escuro. */
@font-face { font-family: "Schibsted Grotesk"; font-weight: 400; font-display: swap; src: url("/fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 500; font-display: swap; src: url("/fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 600; font-display: swap; src: url("/fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fragment Mono"; font-weight: 400; font-display: swap; src: url("/fonts/fragment-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  --fundo: #0C0F0E;
  --fundo-2: #101413;
  --sup: #141918;
  --sup-2: #1A201F;
  --sup-3: #0F1312;
  --linha: rgba(226, 236, 231, .085);
  --linha-2: rgba(226, 236, 231, .15);
  --tx: #ECEEE9;
  --tx-2: #A9B2AD;
  --tx-3: #808B86;
  --verde: #6FD8A8;
  --verde-claro: #93E4BF;
  --verde-tinta: #06140D;
  --azul: #8FB8F0;
  --f: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wa: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --wrap: 1200px;
  --topo: 64px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--fundo); overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--topo) + 8px); -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; touch-action: pan-y; background: var(--fundo); color: var(--tx); font: 400 17px/1.55 var(--f); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.pular { position: absolute; left: -9999px; top: 10px; z-index: 30; background: var(--verde); color: var(--verde-tinta); padding: 8px 12px; border-radius: 8px; text-decoration: none; }
.pular:focus { left: 16px; }

/* ------------------------------------------------------------------ botões */
.botao { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px; border-radius: 10px; background: var(--verde); color: var(--verde-tinta); font: 500 16px/1 var(--f); text-decoration: none; white-space: nowrap; transition: background-color .25s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease); }
.botao:hover { background: var(--verde-claro); }
.botao:active { transform: translateY(1px); }
.botao-linha { background: transparent; color: var(--tx); box-shadow: inset 0 0 0 1px var(--linha-2); }
.botao-linha:hover { background: rgba(236, 238, 233, .05); box-shadow: inset 0 0 0 1px rgba(226, 236, 231, .28); }
.botao-pq { height: 38px; padding: 0 16px; font-size: 15px; }
.seta { display: inline-flex; gap: 6px; color: var(--verde); font-weight: 500; text-decoration: none; transition: color .2s var(--ease); }
.seta:hover { color: var(--verde-claro); }
.setas { display: flex; flex-wrap: wrap; gap: 12px 28px; }

/* ------------------------------------------------------------------ topo fixo */
.topo { position: sticky; top: 0; z-index: 20; height: var(--topo); background: rgba(12, 15, 14, .78); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--linha); }
.topo-in { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.marca { display: inline-flex; align-items: center; gap: 9px; color: var(--tx); text-decoration: none; font: 600 19px/1 var(--f); letter-spacing: -.02em; justify-self: start; }
.marca-sinal { width: 22px; height: 22px; fill: var(--verde); }
.marca-pq { font-size: 16px; }
.marca-pq .marca-sinal { width: 18px; height: 18px; }
.menu { display: flex; gap: 30px; }
.menu a { color: var(--tx-2); text-decoration: none; font-size: 15px; transition: color .2s var(--ease); }
.menu a:hover { color: var(--tx); }
.topo-dir { justify-self: end; display: flex; align-items: center; gap: 14px; }
.linguas { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--linha-2); border-radius: 8px; }
.linguas button { appearance: none; border: 0; background: transparent; color: var(--tx-3); font: 400 12px/1 var(--mono); padding: 7px 8px; border-radius: 6px; cursor: pointer; transition: color .2s, background-color .2s; }
.linguas button:hover { color: var(--tx); }
.linguas button[aria-pressed="true"] { background: rgba(236, 238, 233, .1); color: var(--tx); }

/* ------------------------------------------------------------------ topo da página */
.heroi { position: relative; padding: 40px 24px 96px; text-align: center; isolation: isolate; }
.heroi::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--linha) 1px, transparent 1px), linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center -1px;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 28%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 28%, #000 25%, transparent 78%); }
.heroi::after { content: ""; position: absolute; left: 50%; top: -160px; width: 980px; height: 520px; transform: translateX(-50%); z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(111, 216, 168, .11), transparent); }
.heroi-txt { max-width: 1000px; margin: 0 auto; }
.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 7px 12px; border: 1px solid var(--linha-2); border-radius: 7px; background: rgba(12, 15, 14, .6); font: 400 13px/1 var(--mono); color: var(--tx-2); }
.kicker-ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgba(111, 216, 168, .16); }
.heroi h1 { margin: 18px auto 0; font-weight: 500; font-size: clamp(38px, 4.7vw, 66px); line-height: 1.02; letter-spacing: -.035em; max-width: 15.5em; }
.heroi-p { max-width: 760px; margin: 18px auto 0; color: var(--tx-2); font-size: 18px; line-height: 1.5; }
.acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }

/* ------------------------------------------------------------------ cena: tudo funcionando junto */
.cena { position: relative; max-width: 1240px; margin: 44px auto 0; display: grid; grid-template-columns: 300px minmax(0, 1fr) 330px; gap: 0 52px; align-items: start; text-align: left; }
.cena-fios { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.fio { fill: none; stroke: rgba(111, 216, 168, .3); stroke-width: 1; stroke-dasharray: 3 5; }
.pacote { fill: var(--verde); opacity: 0; filter: drop-shadow(0 0 6px rgba(111, 216, 168, .8)); }
.cena-col { position: relative; z-index: 1; min-width: 0; }
.cena-rot { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 400 12.5px/1 var(--mono); color: var(--tx-3); }
.rot-ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--tx-3); transition: background-color .3s, box-shadow .3s; }
.cena-col.ativa > .cena-rot .rot-ponto, .dir-bloco.ativa > .cena-rot .rot-ponto { background: var(--verde); box-shadow: 0 0 0 3px rgba(111, 216, 168, .18); }
.cena-dir { display: grid; gap: 28px; }

/* celular com WhatsApp */
.fone { width: 300px; padding: 9px; border-radius: 42px; background: #1D2322; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 40px 80px -30px rgba(0, 0, 0, .8); }
.fone-tela { height: 572px; border-radius: 33px; overflow: hidden; display: flex; flex-direction: column; background: #EFE7DD; color: #111B21; font-family: var(--wa); }
.wa-status { flex: none; height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 2px 24px 0; background: #008069; color: #fff; font-size: 12.5px; font-weight: 600; }
.wa-ic { display: flex; align-items: flex-end; gap: 3px; height: 10px; }
.wa-ic i { display: block; width: 3px; background: #fff; border-radius: 1px; }
.wa-ic i:nth-child(1) { height: 5px; } .wa-ic i:nth-child(2) { height: 7.5px; } .wa-ic i:nth-child(3) { height: 10px; width: 16px; border-radius: 2.5px; margin-left: 4px; background: transparent; box-shadow: inset 0 0 0 1.4px #fff, inset -6px 0 0 1.4px #fff; }
.wa-cab { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 14px 10px 12px; background: #008069; color: #fff; }
.wa-volta { width: 9px; height: 9px; margin: 0 2px 0 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); flex: none; }
.wa-av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.wa-av-tis { background: #13294B; color: #F5C400; font-size: 11.5px; letter-spacing: .02em; }
.wa-av-sun { background: #FFF1CC; }
.wa-av-sun svg { width: 22px; height: 22px; fill: #E09B12; }
.wa-nome { min-width: 0; line-height: 1.2; }
.wa-nome b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-nome small { display: block; font-size: 12px; opacity: .88; }
.wa-chat { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 8px 12px 10px;
  background-color: #EFE7DD;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23e3d9cc' stroke-width='1'%3E%3Ccircle cx='18' cy='20' r='6'/%3E%3Cpath d='M70 14l8 8m0-8l-8 8M96 64c6-6 14 2 8 8s-14-2-8-8zM24 84h14v10H24zM60 96c4-8 12-8 16 0'/%3E%3Ccircle cx='100' cy='108' r='3'/%3E%3Cpath d='M44 44l6 10 6-10z'/%3E%3C/svg%3E"); background-size: 120px 120px; }
.wa-dia { align-self: center; margin: 2px 0 6px; padding: 4px 10px; border-radius: 7px; background: #fff; color: #54656F; font-size: 11.5px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.msg, .mb { position: relative; max-width: 84%; margin: 0; padding: 6px 8px 7px 9px; border-radius: 8px; font-size: 13.6px; line-height: 1.36; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); color: #111B21; font-family: var(--wa); }
.wa-doc { display: flex; align-items: center; gap: 9px; margin: -2px -4px 6px -5px; padding: 8px 10px; border-radius: 6px; background: rgba(11, 20, 26, .06); }
.wa-doc-ic { flex: none; width: 28px; height: 34px; border-radius: 3px; display: grid; place-items: center; background: #E5484D; color: #fff; font-size: 8.5px; font-weight: 700; letter-spacing: .03em; }
.wa-doc-n { min-width: 0; line-height: 1.25; }
.wa-doc-n b { display: block; font-size: 13px; font-weight: 600; }
.wa-doc-n small { display: block; font-size: 11px; color: #667781; }
.msg i, .mb i { float: right; margin: 6px 0 -4px 10px; font-style: normal; font-size: 10.5px; line-height: 1; color: #667781; white-space: nowrap; }
.msg.ele, .mb.ele { align-self: flex-start; background: #fff; }
.msg.eu, .mb.eu { align-self: flex-end; background: #D9FDD3; }
.msg.rabo.ele, .mb.ele:first-child { border-top-left-radius: 0; }
.msg.rabo.eu { border-top-right-radius: 0; }
.msg.rabo::before { content: ""; position: absolute; top: 0; width: 0; height: 0; border-top: 9px solid; }
.msg.rabo.ele::before { left: -8px; border-left: 9px solid transparent; border-top-color: #fff; }
.msg.rabo.eu::before { right: -8px; border-right: 9px solid transparent; border-top-color: #D9FDD3; }
.vistos::before { content: "\2713\2713"; margin-left: 2px; letter-spacing: -3px; color: #53BDEB; font-size: 11px; font-weight: 700; }
.msg + .msg.eu, .msg + .msg.ele { margin-top: 2px; }
.msg.ele + .msg.eu, .msg.eu + .msg.ele { margin-top: 6px; }
.msg.digitando { display: flex; gap: 4px; padding: 11px 12px; }
.msg.digitando span { width: 6px; height: 6px; border-radius: 50%; background: #8696A0; animation: pula 1.1s infinite var(--ease); }
.msg.digitando span:nth-child(2) { animation-delay: .15s; } .msg.digitando span:nth-child(3) { animation-delay: .3s; }
@keyframes pula { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
.wa-barra { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 8px 12px; background: #EFE7DD; }
.wa-campo { flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 22px; background: #fff; color: #8696A0; font-size: 14.5px; }
.wa-campo > span:nth-child(2) { flex: 1; }
.wa-emo { width: 19px; height: 19px; border-radius: 50%; border: 1.7px solid #8696A0; flex: none; }
.wa-clip { width: 8px; height: 16px; border: 1.7px solid #8696A0; border-radius: 4px; transform: rotate(40deg); flex: none; }
.wa-cam { width: 19px; height: 14px; border: 1.7px solid #8696A0; border-radius: 4px; flex: none; }
.wa-mic { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #00A884; position: relative; }
.wa-mic::before { content: ""; position: absolute; left: 50%; top: 10px; width: 8px; height: 14px; margin-left: -4px; border-radius: 4px; background: #fff; }
.wa-mic::after { content: ""; position: absolute; left: 50%; top: 17px; width: 14px; height: 9px; margin-left: -7px; border: 1.7px solid #fff; border-top: 0; border-radius: 0 0 8px 8px; }

/* passos da cena aparecem na ordem do roteiro */
.js .cena .msg[data-passo]:not(.visto),
.js .cena .crm-linha[data-passo]:not(.visto),
.js .cena .voz-txt p[data-passo]:not(.visto) { display: none; }
.js .cena .registro p[data-passo]:not(.visto) { visibility: hidden; }
.visto { animation: entra .42s var(--ease) both; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }

/* janela do painel */
.janela { border-radius: 12px; overflow: hidden; background: #FBFAF7; color: #15201C; box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 40px 90px -30px rgba(0, 0, 0, .85); }
.janela-barra { height: 38px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: #EFEDE7; border-bottom: 1px solid #E2DFD7; font: 400 12px/1 var(--mono); color: #5F6A65; }
.janela-pts { display: flex; gap: 6px; flex: none; }
.janela-pts i { width: 10px; height: 10px; border-radius: 50%; background: #D3CFC5; }
.janela-url { flex: 1; min-width: 0; max-width: 300px; margin: 0 auto; height: 24px; line-height: 22px; padding: 0 10px; text-align: center; background: #fff; border: 1px solid #E2DFD7; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.janela-vivo { flex: none; display: flex; align-items: center; gap: 6px; color: #1E7A52; }
.janela-vivo i { width: 7px; height: 7px; border-radius: 50%; background: #22A06B; animation: brilha 2s infinite var(--ease); }
@keyframes brilha { 50% { opacity: .35; } }
.painel { display: grid; gap: 12px; padding: 14px; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kpis > div { padding: 10px 12px; border: 1px solid #E7E4DC; border-radius: 8px; background: #fff; }
.kpis small { display: block; font-size: 12px; line-height: 1.25; color: #66716C; }
.kpis b { display: block; margin-top: 4px; font: 500 26px/1.05 var(--f); letter-spacing: -.02em; font-variant-numeric: tabular-nums; transition: color .4s; }
.kpis b.sobe { color: #1E7A52; animation: sobe .6s var(--ease); }
@keyframes sobe { from { transform: translateY(5px); opacity: .3; } }
.crm { border: 1px solid #E7E4DC; border-radius: 8px; background: #fff; overflow: hidden; }
.crm-cab { display: flex; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid #EFECE5; font-size: 12px; color: #66716C; }
.crm-linha { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid #F1EEE7; }
.crm-linha:last-child { border-bottom: 0; }
.crm-linha.nova.visto { background: #F2FBF6; }
.crm-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; background: #DFF2E8; color: #1E6B4B; }
.crm-av.av2 { background: #F4EBDC; color: #7A5A1E; } .crm-av.av3 { background: #E9E8F5; color: #4B4A8A; } .crm-av.av4 { background: #E4ECF8; color: #2D5590; }
.crm-q { min-width: 0; }
.crm-q b { display: block; font-size: 13.5px; font-weight: 500; }
.crm-q small { display: block; font-size: 12px; color: #66716C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-tag { font: 400 11px/1 var(--mono); padding: 5px 7px; border-radius: 5px; background: #F1EFE9; color: #55605B; white-space: nowrap; }
.crm-tag.tag-novo { background: #DDF5EA; color: #146C45; }
.crm-tag.tag-voz { background: #E4ECF8; color: #2D5590; }
.registro { min-height: 122px; padding: 10px 12px; border-radius: 8px; background: #101514; font: 400 11.5px/1.75 var(--mono); color: #9AA6A0; }
.registro p { margin: 0; display: grid; grid-template-columns: 62px 70px minmax(0, 1fr); white-space: nowrap; }
.registro p > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.registro time { color: #5F6B66; }
.r-tipo { color: var(--verde); }
.r-tipo.r-voz { color: var(--azul); }

/* ligação atendida pela IA */
.voz { padding: 14px 16px 14px; border-radius: 12px; border: 1px solid var(--linha-2); background: var(--sup); }
.voz-cab { display: flex; align-items: center; gap: 10px; }
.voz-fone { flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(111, 216, 168, .13) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236FD8A8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3.5h2.7l1.4 4-2 1.4a11 11 0 0 0 6.4 6.4l1.4-2 4 1.4v2.7a2 2 0 0 1-2.2 2A16 16 0 0 1 4.6 5.7a2 2 0 0 1 2-2.2z'/%3E%3C/svg%3E") center / 17px no-repeat; transition: background-color .3s; }
.voz.ativa .voz-fone { animation: anel 1.6s infinite var(--ease); }
@keyframes anel { 0% { box-shadow: 0 0 0 0 rgba(111, 216, 168, .35); } 100% { box-shadow: 0 0 0 12px rgba(111, 216, 168, 0); } }
.voz-quem { min-width: 0; line-height: 1.25; }
.voz-quem b { display: block; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.voz-quem small { display: block; font-size: 12.5px; color: var(--tx-3); }
.voz.ativa .voz-quem small { color: var(--verde); }
.voz-tempo { margin-left: auto; font: 400 12.5px/1 var(--mono); color: var(--tx-2); font-variant-numeric: tabular-nums; }
.onda { display: flex; align-items: center; gap: 3px; height: 40px; margin: 14px 0 10px; }
.onda i { flex: 1; height: 100%; border-radius: 2px; background: rgba(169, 178, 173, .32); transform: scaleY(.1); transition: transform .14s var(--ease), background-color .3s; }
.onda.falando i { background: var(--verde); }
.voz-txt { min-height: 116px; }
.voz-txt p, .vvoz-txt p { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: baseline; }
.voz-txt p { margin: 0 0 7px; font-size: 13.5px; line-height: 1.4; }
.voz-txt b, .vvoz-txt b { font: 400 11.5px/1 var(--mono); color: var(--tx-3); }
.voz-txt p:nth-child(2) b, .vvoz-txt p:nth-child(2) b { color: var(--verde); }

/* a obra em 3D (trecho gravado do nosso passeio) */
.tres { position: relative; display: block; height: 248px; border-radius: 12px; overflow: hidden; border: 1px solid var(--linha-2); background: #0D1110; color: inherit; text-decoration: none; transition: border-color .3s var(--ease); }
.tres:hover, .tres:focus-visible { border-color: rgba(111, 216, 168, .55); }
.tres-vid { display: block; width: 100%; height: 100%; object-fit: cover; }
.tres-info { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; justify-items: start; }
.tres-info > span { grid-area: 1 / 1; max-width: 100%; padding: 6px 9px; border-radius: 5px; background: rgba(12, 15, 14, .8); font: 400 11.5px/1.2 var(--mono); color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .35s var(--ease); }
.tres-info > span.on { opacity: 1; }
.tres-prog { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; }
.tres-prog i { position: relative; flex: 1; height: 2px; border-radius: 1px; overflow: hidden; background: rgba(236, 238, 233, .28); }
.tres-prog i::after { content: ""; position: absolute; inset: 0; background: var(--tx); transform: scaleX(var(--prog, 0)); transform-origin: left; transition: transform .25s linear; }

/* ------------------------------------------------------------------ seções */
.secao { padding: clamp(84px, 10vw, 140px) 0; border-top: 1px solid var(--linha); }
.secao-2 { background: var(--fundo-2); }
.sec-cab { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px 48px; align-items: end; margin-bottom: 56px; }
.sec-cab h2, .nos-txt h2 { margin: 0; font-weight: 500; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.04; letter-spacing: -.03em; }
.sec-cab p { justify-self: end; max-width: 540px; margin: 0; color: var(--tx-2); font-size: 18px; }

/* o que fazemos: lista à esquerda, a tela de cada serviço à direita */
.serv-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
.serv-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.serv { position: relative; padding: 22px 0 22px 20px; border-bottom: 1px solid var(--linha); }
.serv::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 2px; border-radius: 1px; background: var(--verde); opacity: 0; transition: opacity .35s var(--ease); }
.serv.ativo::before { opacity: 1; }
.serv-bt { appearance: none; display: flex; align-items: center; gap: 14px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.serv-ic { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--tx-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.serv.ativo .serv-ic { stroke: var(--verde); }
.serv-nome { font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -.015em; color: var(--tx-2); transition: color .3s; }
.serv.ativo .serv-nome, .serv-bt:hover .serv-nome { color: var(--tx); }
.serv-p { margin: 8px 0 0 36px; max-width: 46ch; color: var(--tx-2); font-size: 16px; }
.serv-tec { margin: 10px 0 0 36px; font: 400 12.5px/1.4 var(--mono); color: var(--tx-3); }
.serv-palco { position: sticky; top: calc(var(--topo) + 40px); height: 500px; border-radius: 14px; overflow: hidden; border: 1px solid var(--linha-2); background-color: var(--sup);
  background-image: radial-gradient(rgba(226, 236, 231, .07) 1px, transparent 1px); background-size: 18px 18px; }
.vis { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 30px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .45s var(--ease), transform .55s var(--ease); }
.vis.ativo { opacity: 1; transform: none; }
.vis[data-vis="3d"] { padding: 0; }
.vis-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; }
.vis-chips li { padding: 6px 10px; border: 1px solid var(--linha-2); border-radius: 6px; font: 400 12.5px/1.2 var(--mono); color: var(--tx-2); background: rgba(12, 15, 14, .6); }

/* tela: WhatsApp */
.mwa { width: min(390px, 100%); border-radius: 16px; overflow: hidden; background: #EFE7DD; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .8); }
.mwa-cab { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #008069; color: #fff; font-family: var(--wa); }
.mwa-av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #DCEFE6; color: #0B5C40; font-size: 12px; font-weight: 600; }
.mwa-av-cairo { background: #5E1A24; color: #F1E4C8; }
.mwa-nome b { display: block; font-size: 14.5px; font-weight: 600; }
.mwa-nome small { font-size: 11.5px; opacity: .88; }
.mwa-chat { display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.vis.ativo .mb { animation: entra .45s var(--ease) both; }
.vis.ativo .mb:nth-child(2) { animation-delay: .5s; } .vis.ativo .mb:nth-child(3) { animation-delay: 1.1s; } .vis.ativo .mb:nth-child(4) { animation-delay: 1.6s; }

/* tela: voz */
.vvoz { width: min(450px, 100%); padding: 18px; border-radius: 14px; background: var(--sup-3); border: 1px solid var(--linha-2); }
.vvoz-cab { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.vvoz-pulso { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--verde); animation: anel 1.6s infinite var(--ease); }
.vvoz-t { margin-left: auto; font: 400 12.5px/1 var(--mono); color: var(--tx-2); }
.onda-g { height: 56px; margin: 16px 0 14px; }
.vvoz-txt p { margin: 0 0 8px; font-size: 14px; line-height: 1.4; }
.vvoz-fim { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--linha); font: 400 12.5px/1.4 var(--mono); color: var(--verde); }

/* tela: sistema (funil) */
.vsis { width: 100%; display: grid; gap: 12px; }
.vsis-barra { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linha); background: var(--sup-3); font-size: 13px; }
.vsis-barra b { font-weight: 500; }
.vsis-busca { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 28px; line-height: 26px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--linha); color: var(--tx-3); font: 400 12px/26px var(--mono); }
.vsis-novo { padding: 6px 10px; border-radius: 7px; background: var(--verde); color: var(--verde-tinta); font-size: 12.5px; font-weight: 500; }
.kan { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.kan-col { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 10px; border: 1px solid var(--linha); background: var(--sup-3); }
.kan-h { display: flex; justify-content: space-between; margin: 2px 2px 2px; font: 400 12px/1 var(--mono); color: var(--tx-2); }
.kan-h i { font-style: normal; color: var(--tx-3); }
.kan-c { padding: 10px; border-radius: 8px; border: 1px solid var(--linha); background: var(--sup-2); }
.kan-c b { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.25; }
.kan-c small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.3; color: var(--tx-3); }
.kan-c span { display: block; margin-top: 8px; font: 400 12.5px/1 var(--mono); color: var(--tx); }
.kan-c.ganho { border-color: rgba(111, 216, 168, .28); }
.kan-c.ganho span { color: var(--verde); }
.vis.ativo .kan-c { animation: entra .45s var(--ease) both; }
.vis.ativo .kan-col:nth-child(2) .kan-c { animation-delay: .12s; } .vis.ativo .kan-col:nth-child(3) .kan-c { animation-delay: .24s; }

/* tela: app */
.vapp { display: flex; align-items: center; gap: 22px; }
.vapp-fone { width: 232px; height: 420px; display: flex; flex-direction: column; gap: 8px; padding: 16px 13px 12px; border-radius: 30px; background: #FBFAF7; color: #15201C; box-shadow: 0 0 0 7px #1D2322, 0 0 0 8px rgba(255, 255, 255, .08), 0 30px 60px -25px rgba(0, 0, 0, .8); }
.vapp-topo small { display: block; font-size: 11px; color: #66716C; text-align: center; }
.vapp-topo b { display: block; margin: 8px 2px 4px; font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.vapp-item { display: flex; gap: 9px; padding: 9px 10px; border-radius: 10px; border: 1px solid #ECE9E1; background: #fff; }
.vapp-item i { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #C9C5BA; }
.vapp-item i.st-ok { background: #22A06B; } .vapp-item i.st-vai { background: #E3A008; }
.vapp-item b { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.vapp-item small { display: block; font-size: 11.5px; color: #66716C; }
.vapp-item.atual { border-color: #BFE6D3; background: #F1FAF5; }
.vapp-tab { margin-top: auto; display: flex; justify-content: space-around; padding-top: 10px; border-top: 1px solid #ECE9E1; }
.vapp-tab span { width: 18px; height: 18px; border-radius: 5px; background: #E2DED4; }
.vapp-tab span.on { background: #1E7A52; }
.vapp-not { width: 220px; margin: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--linha-2); background: var(--sup-2); font-size: 13px; line-height: 1.4; }
.vapp-not b { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 500; color: var(--tx-3); }
.vis.ativo .vapp-not { animation: entra .5s var(--ease) .5s both; }

/* tela: site */
.vweb { width: min(520px, 100%); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .8); }
.vweb-barra { height: 32px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: #EFEDE7; border-bottom: 1px solid #E2DFD7; }
.vweb-url { flex: 1; max-width: 220px; margin: 0 auto; height: 20px; line-height: 19px; text-align: center; border-radius: 5px; background: #fff; border: 1px solid #E2DFD7; font: 400 11px var(--mono); color: #5F6A65; }
.vweb-site { color: #0F1A2A; }
.vweb-print img { display: block; width: 100%; height: auto; }

/* tela: integrações */
.vint { width: 100%; max-width: 560px; height: auto; }
.vint-fios path { fill: none; stroke: rgba(111, 216, 168, .4); stroke-width: 1.2; stroke-dasharray: 4 6; }
.vis.ativo .vint-fios path { animation: fluxo 1.4s linear infinite; }
@keyframes fluxo { to { stroke-dashoffset: -20; } }
.vint-nos rect { fill: var(--sup-3); stroke: rgba(226, 236, 231, .2); }
.vint-nos text { fill: var(--tx); font: 400 13.5px var(--f); text-anchor: middle; }
.vint-nos .centro rect { fill: rgba(111, 216, 168, .1); stroke: var(--verde); }
.vint-nos .centro text { fill: var(--verde); font-weight: 500; }

/* tela: dados */
.vdad { width: 100%; display: grid; gap: 14px; }
.vdad-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vdad-kpis > div { padding: 12px; border-radius: 10px; border: 1px solid var(--linha); background: var(--sup-3); }
.vdad-kpis small { display: block; font-size: 12px; color: var(--tx-3); }
.vdad-kpis b { font-size: 23px; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vdad-kpis em { margin-left: 6px; font: 400 12px var(--mono); font-style: normal; color: var(--verde); }
.vdad-graf { display: block; width: 100%; height: 130px; }
.vdad-graf .area { fill: rgba(111, 216, 168, .1); }
.vdad-graf .linha { fill: none; stroke: var(--verde); stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-dasharray: 700; stroke-dashoffset: 0; }
.vis.ativo .vdad-graf .linha { animation: risca 1.4s var(--ease) both; }
@keyframes risca { from { stroke-dashoffset: 700; } }
.vdad-orig p { display: grid; grid-template-columns: 120px minmax(0, 1fr) 40px; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 13px; color: var(--tx-2); }
.vdad-orig p.vdad-t { display: block; margin-bottom: 10px; font: 400 12px var(--mono); color: var(--tx-3); }
.vdad-orig i { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--verde) var(--p), rgba(236, 238, 233, .07) var(--p)); }
.vdad-orig b { font: 400 12px var(--mono); text-align: right; color: var(--tx); }

/* tela: 3D */
.v3d { position: relative; width: 100%; height: 100%; }
.v3d-vid { display: block; width: 100%; height: 100%; object-fit: cover; background: #0D1110; }
.v3d-tag { position: absolute; top: 14px; left: 14px; padding: 6px 10px; border-radius: 6px; background: rgba(12, 15, 14, .78); font: 400 12px/1.2 var(--mono); color: var(--tx); }
.v3d-barra { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; border-radius: 9px; background: rgba(12, 15, 14, .8); }
.v3d-barra span { padding: 6px 10px; border-radius: 6px; font-size: 12.5px; color: var(--tx-2); white-space: nowrap; }
.v3d-barra span.on { background: rgba(236, 238, 233, .13); color: var(--tx); }

/* tela: saúde */
.vsau { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.vsau-lista, .vsau-inf { padding: 12px; border-radius: 10px; border: 1px solid var(--linha); background: var(--sup-3); }
.vsau-h { margin: 2px 4px 10px; font: 400 12px/1.2 var(--mono); color: var(--tx-3); }
.vsau-i { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0; padding: 9px 8px; border-radius: 7px; }
.vsau-i.on { background: rgba(236, 238, 233, .06); }
.vsau-i b { display: block; font-size: 13px; font-weight: 500; }
.vsau-i small { font: 400 11.5px var(--mono); color: var(--tx-3); }
.vsau-i em { flex: none; padding: 4px 6px; border-radius: 5px; border: 1px solid var(--linha-2); font: 400 11px/1 var(--mono); font-style: normal; color: var(--tx-3); }
.vsau-i em.ok { color: var(--verde); border-color: rgba(111, 216, 168, .3); }
.vsau-i em.vai { color: var(--azul); border-color: rgba(143, 184, 240, .3); }
.vsau-img { position: relative; height: 132px; margin-bottom: 12px; border-radius: 8px;
  background: radial-gradient(ellipse 22% 36% at 36% 52%, rgba(214, 222, 218, .5), transparent 72%), radial-gradient(ellipse 22% 36% at 64% 52%, rgba(214, 222, 218, .46), transparent 72%), radial-gradient(ellipse 7% 46% at 50% 50%, rgba(232, 238, 235, .55), transparent 78%), radial-gradient(ellipse 48% 44% at 50% 52%, rgba(120, 130, 126, .22), transparent 80%), #050707; }
.vsau-img::before, .vsau-img::after { position: absolute; font: 400 10px/1 var(--mono); color: rgba(236, 238, 233, .55); }
.vsau-img::before { content: "PA  1/2"; left: 8px; top: 8px; }
.vsau-img::after { content: "W 400  L 40"; right: 8px; bottom: 8px; }
.vsau-inf i { display: block; height: 7px; margin: 0 0 8px; border-radius: 4px; background: rgba(236, 238, 233, .1); }
.vsau-bt { display: inline-block; margin-top: 6px; padding: 7px 12px; border-radius: 7px; background: var(--verde); color: var(--verde-tinta); font-size: 12.5px; font-weight: 500; }

/* ------------------------------------------------------------------ produtos */
.abas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-bottom: 44px; padding: 4px; border-radius: 12px; border: 1px solid var(--linha-2); background: var(--fundo); }
.abas button { appearance: none; display: block; padding: 14px 18px; border: 0; border-radius: 9px; background: transparent; color: var(--tx-2); font: inherit; text-align: left; cursor: pointer; transition: background-color .25s var(--ease), box-shadow .25s var(--ease); }
.abas button:hover { background: rgba(236, 238, 233, .04); }
.abas button b { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 500; color: var(--tx); }
.abas button b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tx-3); transition: background-color .25s; }
.abas button span { display: block; margin-top: 3px; padding-left: 16px; font-size: 14px; line-height: 1.35; }
.abas button[aria-selected="true"] { background: var(--sup-2); box-shadow: inset 0 0 0 1px var(--linha-2); }
.abas button[aria-selected="true"] b::before { background: var(--verde); }
.aba-painel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.aba-painel[hidden] { display: none; }
@media (min-width: 961px) { #p-sunbook { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; } }
.aba-painel:not([hidden]) { animation: entra .45s var(--ease) both; }
.prod-txt h3 { margin: 0 0 16px; font-weight: 500; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; letter-spacing: -.02em; }
.prod-txt > p { margin: 0 0 22px; color: var(--tx-2); }
.lista { list-style: none; display: grid; gap: 10px; margin: 0 0 26px; padding: 0; }
.lista li { position: relative; padding-left: 22px; font-size: 16px; }
.lista li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1.5px; background: var(--verde); }
.prod-fig { margin: 0; }
.prod-fig img { border-radius: 12px; border: 1px solid var(--linha-2); }
.prod-fig figcaption { margin-top: 12px; font-size: 14px; color: var(--tx-3); }

/* Sunbook: o exemplo de Porto Rico */
.sun-cena { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px; align-items: center; }
.fone-sun { width: 290px; }
.fone-sun .fone-tela { height: 728px; }
.fone-sun .wa-chat { justify-content: flex-end; }
.fone-sun .msg { font-size: 13px; }
.msg.audio { min-width: 220px; }
.audio-linha { display: flex; align-items: center; gap: 8px; }
.audio-foto { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #DCE7F5; color: #2D5590; font-size: 11px; font-weight: 600; }
.audio-play { flex: none; width: 0; height: 0; border-left: 10px solid #54656F; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.audio-onda { flex: 1; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none' fill='%23A9B4BA'%3E%3Crect x='0' y='8' width='2' height='4'/%3E%3Crect x='4' y='6' width='2' height='8'/%3E%3Crect x='8' y='3' width='2' height='14'/%3E%3Crect x='12' y='7' width='2' height='6'/%3E%3Crect x='16' y='4' width='2' height='12'/%3E%3Crect x='20' y='1' width='2' height='18'/%3E%3Crect x='24' y='6' width='2' height='8'/%3E%3Crect x='28' y='8' width='2' height='4'/%3E%3Crect x='32' y='5' width='2' height='10'/%3E%3Crect x='36' y='2' width='2' height='16'/%3E%3Crect x='40' y='6' width='2' height='8'/%3E%3Crect x='44' y='4' width='2' height='12'/%3E%3Crect x='48' y='7' width='2' height='6'/%3E%3Crect x='52' y='3' width='2' height='14'/%3E%3Crect x='56' y='6' width='2' height='8'/%3E%3Crect x='60' y='8' width='2' height='4'/%3E%3Crect x='64' y='5' width='2' height='10'/%3E%3Crect x='68' y='2' width='2' height='16'/%3E%3Crect x='72' y='6' width='2' height='8'/%3E%3Crect x='76' y='7' width='2' height='6'/%3E%3Crect x='80' y='4' width='2' height='12'/%3E%3Crect x='84' y='8' width='2' height='4'/%3E%3Crect x='88' y='6' width='2' height='8'/%3E%3Crect x='92' y='3' width='2' height='14'/%3E%3Crect x='96' y='7' width='2' height='6'/%3E%3Crect x='100' y='8' width='2' height='4'/%3E%3Crect x='104' y='6' width='2' height='8'/%3E%3Crect x='108' y='8' width='2' height='4'/%3E%3Crect x='112' y='7' width='2' height='6'/%3E%3Crect x='116' y='8' width='2' height='4'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.audio-t { flex: none; font-size: 11px; color: #667781; }
.audio-txt { display: block; margin-top: 7px; padding-top: 6px; border-top: 1px solid #EEF0F1; font-size: 12.5px; font-style: italic; color: #3B4A54; }
.recibo { display: block; width: 176px; margin: 0 0 6px; padding: 10px 11px; border-radius: 6px; border: 1px solid #E5E1D8; background: #fff repeating-linear-gradient(transparent 0 11px, #F2EFE8 11px 12px); }
.recibo b { display: block; font-size: 15px; font-weight: 700; letter-spacing: .02em; color: #1F2A37; }
.recibo small { display: block; font-size: 11px; color: #667781; }
.recibo em { display: block; margin-top: 10px; font-size: 16px; font-weight: 600; font-style: normal; color: #1F2A37; }
.msg.aviso { margin-top: 6px; }
.livro { border-radius: 12px; overflow: hidden; background: #FBFAF7; color: #15201C; box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 40px 80px -30px rgba(0, 0, 0, .85); }
.livro-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #E7E4DC; }
.livro-cab b { font-size: 15px; font-weight: 600; }
.livro-cab span { font: 400 12px var(--mono); color: #66716C; }
.livro-l { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid #F0EDE6; font-size: 13.5px; }
.livro-l > span:first-child { font: 400 12px var(--mono); color: #66716C; }
.livro-l b { display: block; font-weight: 500; line-height: 1.3; }
.livro-l small { display: block; font-size: 12px; color: #66716C; }
.livro-l .num { font: 400 13px var(--mono); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.livro-l .num.mais { color: #1E7A52; }
.livro-h { padding-top: 8px; padding-bottom: 8px; background: #F5F3EE; }
.livro-h span, .livro-h > span:first-child { font: 400 11.5px var(--mono); color: #7C8580; }
.livro-pe { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #FFF5DC; color: #6E4B00; font-size: 13px; }
.livro-prazo { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #E3A008; }

/* trechos dos projetos 3D: tela grande e os três para escolher */
.takes { display: grid; gap: 12px; min-width: 0; }
.take-tela { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid var(--linha); background: #0D1110; }
.take-vid { display: block; width: 100%; height: 100%; object-fit: cover; }
.take-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.take-bt { position: relative; display: block; padding: 0; overflow: hidden; border: 1px solid var(--linha); border-radius: 10px; background: var(--sup-2); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s; }
.take-bt img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .62; transition: opacity .2s; }
.take-bt > span { display: block; padding: 10px 12px 12px; }
.take-bt b { display: block; font-size: 14px; font-weight: 500; line-height: 1.25; }
.take-bt small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--tx-3); }
.take-bt::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: calc(var(--prog, 0) * 100%); background: var(--verde); }
.take-bt:hover { border-color: var(--linha-2); }
.take-bt:hover img, .take-bt[aria-pressed="true"] img { opacity: 1; }
.take-bt[aria-pressed="true"] { border-color: rgba(111, 216, 168, .45); }
.take-bt:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

/* ------------------------------------------------------------------ como trabalhamos */
.trilha { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; margin: 0; padding: 0; }
.trilha::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 1px; background: var(--linha-2); }
.trilha li { position: relative; padding-top: 34px; }
.trilha-no { position: absolute; top: 0; left: 0; width: 11px; height: 11px; border-radius: 3px; border: 1.5px solid var(--verde); background: var(--fundo); }
.trilha h3 { margin: 0 0 8px; font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
.trilha p { margin: 0; color: var(--tx-2); font-size: 16px; }

/* ------------------------------------------------------------------ nós */
.nos-grade { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.nos-foto { margin: 0; }
.nos-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.nos-foto figcaption { margin-top: 12px; font: 400 12.5px/1.4 var(--mono); color: var(--tx-3); }
.nos-txt h2 { margin-bottom: 20px; }
.nos-txt > p { margin: 0; color: var(--tx-2); }
.fatos { margin: 32px 0 0; }
.fatos div { padding: 16px 0; border-top: 1px solid var(--linha); }
.fatos dt { font-weight: 500; }
.fatos dd { margin: 4px 0 0; color: var(--tx-2); font-size: 15.5px; }

/* ------------------------------------------------------------------ contato */
.contato { position: relative; isolation: isolate; padding: clamp(96px, 11vw, 150px) 0; text-align: center; border-top: 1px solid var(--linha); overflow: hidden; }
.contato::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--linha) 1px, transparent 1px), linear-gradient(90deg, var(--linha) 1px, transparent 1px); background-size: 56px 56px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 50% 70% at 50% 50%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 50% 70% at 50% 50%, #000 20%, transparent 75%); }
.contato h2 { max-width: 16em; margin: 0 auto; font-weight: 500; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -.03em; }
.contato p { margin: 18px auto 32px; color: var(--tx-2); font-size: 18px; }

.rodape { padding: 28px 0; border-top: 1px solid var(--linha); }
.rodape-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; font-size: 14px; color: var(--tx-3); }

/* ------------------------------------------------------------------ telas menores */
@media (max-width: 1240px) {
  .cena { max-width: 860px; grid-template-columns: 300px minmax(0, 1fr); gap: 0 40px; }
  .cena-dir { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 40px; }
  .tres { height: 100%; min-height: 248px; }
  .cena-dir .dir-bloco { display: flex; flex-direction: column; }
  .cena-dir .dir-bloco > :last-child { flex: 1; }
}
@media (max-width: 1080px) {
  .menu { display: none; }
  .topo-in { grid-template-columns: 1fr auto; }
}
@media (max-width: 960px) {
  .sec-cab { grid-template-columns: 1fr; margin-bottom: 40px; }
  .sec-cab p { justify-self: start; }
  .serv-grade { grid-template-columns: 1fr; gap: 0; }
  .serv-grade > .serv-palco { display: none; }
  .serv-lugar .serv-palco { position: relative; top: auto; height: auto; min-height: 340px; margin: 18px 0 4px; display: grid; }
  .serv-lugar .vis { position: relative; inset: auto; grid-area: 1 / 1; display: none; padding: 22px 16px; transform: none; }
  .serv-lugar .vis.ativo { display: flex; opacity: 1; }
  .serv-lugar .vis[data-vis="3d"] { padding: 0; min-height: 340px; }
  .serv-lugar .vis[data-vis="3d"] .v3d { position: absolute; inset: 0; }
  .serv-p { max-width: none; }
  .aba-painel { grid-template-columns: 1fr; gap: 36px; }
  .nos-grade { grid-template-columns: 1fr; gap: 36px; }
  .trilha { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
  .trilha::before { display: none; }
  .trilha li { border-top: 1px solid var(--linha-2); padding-top: 26px; }
  .trilha-no { top: -6px; }
}
@media (max-width: 760px) {
  .cena { max-width: 420px; grid-template-columns: 1fr; gap: 36px; margin-top: 44px; }
  .cena-fios { display: none; }
  .cena-fone { justify-self: center; }
  .cena-dir { grid-column: auto; grid-template-columns: 1fr; gap: 36px; margin-top: 0; }
  .tres { height: 248px; }
  .sun-cena { grid-template-columns: 1fr; justify-items: center; }
  .livro { width: 100%; }
}
@media (max-width: 560px) {
  :root { --topo: 58px; }
  body { font-size: 16.5px; }
  .wrap { padding: 0 16px; }
  .topo-dir { gap: 8px; }
  .linguas button { padding: 7px 6px; }
  .marca { font-size: 18px; }
  .heroi { padding: 36px 16px 72px; }
  .kicker { font-size: 11px; gap: 8px; padding: 7px 10px; }
  .heroi h1 { font-size: 38px; letter-spacing: -.03em; }
  .heroi-p { font-size: 16.5px; margin-top: 16px; }
  .acoes { flex-direction: column; align-items: stretch; margin-top: 24px; gap: 10px; }
  .fone { width: 300px; }
  .kpis { gap: 6px; }
  .kpis > div { padding: 8px 9px; }
  .kpis small { font-size: 11px; }
  .kpis b { font-size: 22px; }
  .registro p { grid-template-columns: 56px 62px minmax(0, 1fr); font-size: 10.5px; }
  .serv { padding-left: 0; }
  .serv::before { left: -16px; }
  .serv-nome { font-size: 19.5px; }
  .serv-p, .serv-tec { margin-left: 36px; }
  .serv-lugar { margin-left: 0; }
  .kan { gap: 6px; }
  .kan-col { padding: 6px; gap: 6px; }
  .kan-c { padding: 8px 7px; }
  .kan-c b { font-size: 12px; }
  .kan-c small { font-size: 11px; }
  .vapp { flex-direction: column; gap: 14px; }
  .vapp-fone { height: 360px; }
  .vapp-item:nth-of-type(4) { display: none; }
  .vapp-not { width: 232px; }
  .vdad-kpis b { font-size: 18px; }
  .vdad-kpis em { display: block; margin: 0; }
  .vdad-orig p { grid-template-columns: 96px minmax(0, 1fr) 34px; }
  .vsau { grid-template-columns: 1fr; }
  .vsau-inf { display: none; }
  .v3d-barra span { padding: 5px 7px; font-size: 11.5px; }
  .take-lista { grid-template-columns: 1fr; gap: 8px; }
  .take-bt { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; }
  .take-bt img { height: 100%; aspect-ratio: 16 / 10; }
  .take-bt > span { padding: 8px 12px; }
  .abas button { padding: 12px 10px; }
  .abas button b { font-size: 15.5px; gap: 7px; }
  .abas button span { padding-left: 0; font-size: 12.5px; }
  .abas button b::before { width: 6px; height: 6px; }
  .fone-sun { width: 300px; }
  .livro-l { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; padding: 10px 12px; }
  .livro-cab { flex-direction: column; gap: 2px; padding: 12px; }
  .livro-pe { padding: 12px; }
  .trilha { grid-template-columns: 1fr; }
  .rodape-in { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}