/* Tech Soluções · página principal: a rua de comércio de São José à noite, com as vitrines acesas */
:root {
  --navy: #0b1f3a;
  --navy-2: #12294b;
  --navy-3: #183660;
  --ink: #ffffff;
  --soft: #c3cfdf;
  --muted: #8fa3bf;
  --turq: #22d3c5;
  --turq-hover: #5ae3d8;
  --turq-deep: #0b6b64;
  --coral: #ff8a8a;
  --paper: #f3f6fa;
  --paper-2: #e4ebf3;
  --paper-soft: #3c5170;
  --wa-green: #25d366;
  --r: 15px;
  --m: clamp(16px, 2.2vw, 32px);
  --frame: max(var(--m), calc(50vw - 720px), env(safe-area-inset-left), env(safe-area-inset-right));   /* em vw: as faixas de ponta a ponta saem do conteúdo de 1440px */
  --gap: clamp(112px, 12vw, 176px);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scrollbar-color: #2a4a75 var(--navy); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(34, 211, 197, .18); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--navy); color: var(--ink); font: 400 18px/1.55 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
::selection { background: var(--turq); color: var(--navy); }
input { caret-color: var(--turq); }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; touch-action: manipulation; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--turq); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

h1, h2, h3 { font-family: "Space Grotesk", Inter, sans-serif; font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; }
h1 em { font-style: normal; color: var(--turq); }
p { text-wrap: pretty; }
.coral { color: var(--coral); font-weight: 600; }
.servicos .coral { color: #b83a3a; }   /* o coral da marca é para fundo escuro; no papel, o tom mais fundo passa de 4,5:1 */

.pular { position: absolute; left: var(--m); top: -80px; z-index: 20; background: var(--turq); color: var(--navy); padding: 12px 18px; border-radius: var(--r); font-weight: 600; text-decoration: none; }
.pular:focus { top: 12px; }

/* botões em pílula, como no post "Chama no direct" */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; background: var(--turq); color: var(--navy); font: 600 16px/1 Inter, sans-serif; text-decoration: none; white-space: nowrap; transition: background-color .18s, transform .18s; }
.btn:hover { background: var(--turq-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn .wa { width: 22px; height: 22px; flex: none; }
.btn.escuro { background: var(--navy); color: var(--ink); }
.btn.escuro:hover { background: var(--navy-3); }
.wa-oficial .btn .wa { color: #fff; background: var(--wa-green); border-radius: 50%; padding: 3px; width: 28px; height: 28px; }

/* ---------- barra ---------- */
.nav { position: absolute; inset: 0 0 auto 0; z-index: 5; display: flex; align-items: center; gap: 40px; padding: 20px var(--frame); }
.mark { display: inline-flex; align-items: center; gap: 12px; font: 700 23px/1 "Space Grotesk", sans-serif; letter-spacing: -0.02em; text-decoration: none; }
.logo { width: 52px; height: 52px; flex: none; }
.nav .links { display: flex; gap: 28px; margin-left: auto; font-size: 16px; }
.nav .links a { color: var(--soft); text-decoration: none; padding: 8px 0; transition: color .15s; }
.nav .links a:hover { color: var(--ink); }

/* ---------- abertura: texto em cima, a rua embaixo ---------- */
.hero { position: relative; padding: 116px var(--frame) 0; }
.hero-topo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: end; }
.hero h1 { font-size: clamp(32px, 5.3vw, 80px); }
.lead { margin-top: 22px; max-width: 54ch; font-size: 20px; color: var(--soft); }
.sua-loja { margin-top: 28px; max-width: 640px; }
.sua-loja label { display: block; margin-bottom: 12px; font-weight: 600; font-size: 17px; }
.campo { display: flex; gap: 8px; padding: 7px; border-radius: 999px; background: var(--navy-2); transition: background-color .2s; }
.campo:focus-within { background: var(--navy-3); outline: 2px solid var(--turq); outline-offset: 2px; }
.campo input { flex: 1; min-width: 0; padding: 0 18px; border: 0; background: transparent; color: var(--ink); font: 500 18px Inter, sans-serif; }
.campo input:focus { outline: none; }
.campo input::placeholder { color: var(--muted); }

/* cartão do Maps que sai do alfinete coral da loja vazia */
.perfil { justify-self: end; position: relative; width: min(100%, 420px); margin-bottom: 30px; padding: 22px 24px 20px; border-radius: var(--r); background: #fff; color: var(--navy); }
.perfil::after { content: ""; position: absolute; right: 150px; bottom: -14px; width: 28px; height: 15px; background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.perfil-tag { position: absolute; top: 18px; right: 18px; padding: 5px 11px; border-radius: 999px; background: var(--paper-2); color: var(--paper-soft); font-size: 13px; font-weight: 600; }
.perfil-nome { padding-right: 120px; font: 700 26px/1.15 "Space Grotesk", sans-serif; letter-spacing: -0.02em; overflow-wrap: anywhere; transition: color .25s; }
.perfil.mudou .perfil-nome { color: var(--turq-deep); }
.perfil-tipo { margin-top: 6px; font-size: 15px; color: var(--paper-soft); }
.perfil-hora { margin-top: 4px; font-size: 15px; color: var(--paper-soft); }
.perfil-hora b { color: #12804f; font-weight: 600; }
.perfil-acoes { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.perfil-acoes li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--turq-deep); }
.perfil-acoes svg { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: #dff7f4; }

/* a rua: quatro fachadas sobre a calçada, de margem a margem */
.rua { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.7vw, 26px); margin: 0 calc(-1 * var(--frame)); padding: 0 var(--frame); isolation: isolate; }
.rua::after { content: ""; position: absolute; inset: auto 0 0 0; height: 52px; background: var(--navy-2); z-index: -1; }
.loja { position: relative; display: flex; flex-direction: column; text-align: left; color: inherit; text-decoration: none; }
.alfinete { align-self: center; width: 34px; height: 44px; margin-bottom: 12px; color: var(--turq); transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.sua .alfinete { color: var(--coral); }
.fachada { display: flex; flex-direction: column; height: clamp(240px, 19.5vw, 285px); padding: 14px 14px 0; border-radius: var(--r) var(--r) 0 0; background: var(--f); }
.placa { padding: 12px 14px; border-radius: 8px; background: var(--placa); color: var(--placa-ink); font: 700 clamp(15px, 1.35vw, 20px)/1.1 "Space Grotesk", sans-serif; letter-spacing: -0.01em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s, background-color .3s; }
/* toldo: cor chapada; as listras claras são uma máscara SVG e a barra de baixo é outra peça chapada */
.toldo { position: relative; height: 35px; margin: 10px -6px 0; overflow: hidden; border-radius: 0 0 6px 6px; background: var(--t1); }
.toldo::before { content: ""; position: absolute; inset: 0 0 7px; background: var(--t2); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='10'%3E%3Crect x='18' width='18' height='10'/%3E%3C/svg%3E") 0 0 / 36px 100% repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='10'%3E%3Crect x='18' width='18' height='10'/%3E%3C/svg%3E") 0 0 / 36px 100% repeat-x; }
.toldo::after { content: ""; position: absolute; inset: auto 0 0; height: 7px; background: var(--t3); }
.frente { flex: 1; display: flex; gap: 10px; min-height: 0; padding-top: 12px; }
.vitrine { flex: 1; min-width: 0; overflow: hidden; border: 6px solid var(--caixilho); border-bottom: 0; border-radius: 6px 6px 0 0; background: var(--navy); }
.vitrine img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform .5s cubic-bezier(.2, .75, .25, 1); }
.vitrine { position: relative; }
.vitrine video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.vitrine video.tocando { opacity: 1; }
.otica .vitrine :is(img, video) { object-position: 52% 50%; }   /* a pilha de camadas do vídeo 3D */
.moda .vitrine :is(img, video) { object-position: 50% 30%; }    /* a peça no centro da arara */
.porta { position: relative; width: 24%; flex: none; border-radius: 6px 6px 0 0; background: var(--porta); }
.porta::after { content: ""; position: absolute; left: 14%; top: 52%; width: 6px; height: 20px; border-radius: 3px; background: var(--caixilho); }
.legenda { display: flex; align-items: center; height: 52px; padding: 0 4px; font-size: 15px; color: var(--soft); }
.legenda b { margin-left: 4px; color: var(--ink); font-weight: 600; }
.loja:hover .alfinete, .loja:focus-visible .alfinete { transform: translateY(-8px); }
.loja:hover .vitrine img { transform: scale(1.04); }
.loja:hover .legenda b { text-decoration: underline; }
.loja:focus-visible { outline-offset: 6px; }

.otica { --f: #dfe7f1; --placa: #16294a; --placa-ink: #fff; --t1: #e3a33a; --t2: #fbf3df; --t3: #b97e1c; --caixilho: #16294a; --porta: #b6c5d8; }
.moda  { --f: #efe5d6; --placa: #a44a30; --placa-ink: #fff8ef; --t1: #b9583c; --t2: #f7efe2; --t3: #8e3f29; --caixilho: #3a2a22; --porta: #cbb89c; }
.shake { --f: #f7d3da; --placa: #4a1020; --placa-ink: #ffe3ea; --t1: #e04a6b; --t2: #fff1f4; --t3: #a92f4c; --caixilho: #4a1020; --porta: #e5a9b6; }
.sua   { --f: var(--navy-3); --placa: var(--navy); --placa-ink: var(--muted); --t1: #1f4677; --t2: var(--navy-3); --t3: #163a66; --caixilho: var(--navy); --porta: var(--navy-2); }
.sua .vitrine { display: grid; place-items: center; padding: 8px; background: var(--navy-2); color: var(--muted); font: 600 15px/1.3 Inter, sans-serif; text-align: center; }
.sua.acesa { --placa-ink: var(--turq); }
.sua.acesa .vitrine { color: var(--soft); }

/* os alfinetes caem um a um quando a página abre */
@media (prefers-reduced-motion: no-preference) {
  .rua .alfinete { animation: cai .8s cubic-bezier(.16, 1, .3, 1) both; }
  .rua .loja:nth-child(1) .alfinete { animation-delay: .45s; }
  .rua .loja:nth-child(2) .alfinete { animation-delay: .6s; }
  .rua .loja:nth-child(3) .alfinete { animation-delay: .75s; }
  .rua .loja:nth-child(4) .alfinete { animation-delay: 1s; }
}
@keyframes cai { from { opacity: 0; transform: translateY(-48px); } to { opacity: 1; transform: none; } }

/* ---------- o que a gente faz ---------- */
.servicos { padding: var(--gap) var(--frame) 0; background: var(--paper); color: var(--navy); }
.servicos > h2 { max-width: 16ch; font-size: clamp(36px, 4.6vw, 66px); }
.servico { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; padding: 96px 0 var(--gap); }
.servico h3 { font-size: clamp(30px, 3vw, 44px); }
.servico .texto p { margin-top: 20px; max-width: 46ch; }
.site .texto { grid-column: 1 / span 4; }
.aparelhos { grid-column: 6 / -1; position: relative; padding: 0 0 8% 10%; }
.navegador { overflow: hidden; border-radius: var(--r); background: #fff; }
.navegador .barra { display: flex; align-items: center; gap: 8px; height: 34px; padding-left: 14px; background: #dfe6ef; }
.navegador .barra i { width: 10px; height: 10px; border-radius: 50%; background: #ff8a8a; }
.navegador .barra i:nth-child(2) { background: #f2c14e; }
.navegador .barra i:nth-child(3) { background: var(--turq); }
.celular { position: absolute; left: 0; bottom: 0; width: 25%; padding: 7px; border-radius: 30px; background: var(--navy); }
.celular img { border-radius: 23px; }

.servico.mapa { position: relative; display: block; min-height: clamp(520px, 44vw, 660px); margin: 0 calc(-1 * var(--frame)) var(--gap); padding: 0; overflow: hidden; background: var(--navy); color: var(--ink); }
.mapa-fundo, .mapa-alfinetes { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 3 / 2; transform: translateY(-8%); }
.mapa-fundo img { width: 100%; height: 100%; object-fit: cover; }
.mapa-alfinetes { list-style: none; pointer-events: none; }
.mapa-alfinetes li { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: flex-start; gap: 8px; transform: translate(-17px, -44px); }
.mapa-alfinetes svg { width: 34px; height: 44px; flex: none; color: var(--turq); }
.mapa-alfinetes span { padding: 7px 13px; border-radius: 999px; background: #fff; color: var(--navy); font-size: 14px; font-weight: 600; white-space: nowrap; }
.mapa .texto { position: absolute; left: var(--frame); bottom: clamp(32px, 4vw, 56px); max-width: 480px; padding: 36px 36px 40px; border-radius: var(--r); background: var(--navy); }
.mapa .texto p { color: var(--soft); }
.credito-mapa { position: absolute; right: var(--frame); bottom: 14px; font-size: 13px; color: var(--soft); }

.sistema { padding-top: 0; }
.sistema .painel { grid-column: 1 / span 7; }
.sistema .texto { grid-column: 9 / -1; }
.painel { padding: 24px 24px 18px; border-radius: var(--r); background: #fff; color: var(--navy); }
.painel-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; font-size: 16px; }
.abas { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: var(--paper); font-size: 14px; font-weight: 600; color: var(--paper-soft); }
.abas button { min-height: 34px; padding: 6px 14px; border-radius: 999px; transition: background-color .15s, color .15s; }
.abas button:hover { color: var(--navy); background: #fff; }
.abas [aria-selected="true"], .abas [aria-selected="true"]:hover { background: var(--navy); color: #fff; }
.aba-tela[hidden] { display: none; }
.aba-tela + .aba-tela { margin-top: 28px; }   /* sem JS as três tabelas aparecem empilhadas */
.aba-tela:focus-visible { outline-offset: 6px; }
.ok, .baixo { display: inline-block; padding: 6px 13px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.ok { background: #e2f4e9; color: #12663f; }
.baixo { background: #fde6e6; color: #a12f2f; }
.painel table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.painel caption { margin-bottom: 12px; text-align: left; font: 700 24px/1.2 "Space Grotesk", sans-serif; letter-spacing: -0.02em; }
.painel th { padding: 0 12px 10px; text-align: left; font-size: 14px; font-weight: 600; color: var(--paper-soft); }
.painel td { padding: 14px 12px; font-size: 16px; }
.painel tbody tr:nth-child(odd) td { background: var(--paper); }
.painel tbody td:first-child { border-radius: 10px 0 0 10px; font-weight: 600; }
.painel tbody td:last-child { border-radius: 0 10px 10px 0; text-align: right; }
#tela-vendas :is(td, th):nth-child(4), #tela-cobranca :is(td, th):nth-child(3), .painel tfoot td { text-align: right; }
.painel tfoot th, .painel tfoot td { padding: 18px 12px 4px; font: 700 20px "Space Grotesk", sans-serif; color: var(--navy); }
.cobrar { display: inline-block; padding: 6px 13px; border-radius: 999px; background: #dff7f4; color: var(--turq-deep); font-size: 14px; font-weight: 600; }
.painel figcaption { margin-top: 12px; font-size: 13px; color: var(--paper-soft); }

/* ---------- exemplos ---------- */
.work { padding: var(--gap) var(--frame); }
.work-topo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.work-topo h2 { grid-column: 1 / span 6; font-size: clamp(36px, 4.6vw, 66px); }
.work-topo p { grid-column: 8 / -1; max-width: 40ch; font-size: 20px; color: var(--soft); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; margin-top: 64px; }
.card { display: flex; flex-direction: column; gap: 28px; padding: 16px 16px 28px; border-radius: var(--r); background: var(--navy-2); color: inherit; text-align: left; text-decoration: none; transition: background-color .2s, transform .25s cubic-bezier(.2, .75, .25, 1); }
.card:hover { background: var(--navy-3); transform: translateY(-4px); }
.telas { position: relative; display: block; padding: 0 16% 18px 0; }
.tela { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; }
.tela img, .cel img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.cel { position: absolute; right: 0; bottom: 0; width: 27%; aspect-ratio: 390 / 844; overflow: hidden; border: 5px solid var(--navy); border-radius: 18px; background: var(--navy); }
.card .b { display: flex; flex-direction: column; gap: 8px; padding: 0 8px; }
.card .n { font: 700 26px/1.1 "Space Grotesk", sans-serif; letter-spacing: -0.02em; }
.card .t { font-size: 16px; color: var(--soft); }
.card .go { margin-top: 10px; font-weight: 600; color: var(--turq); }
.card:hover .go { text-decoration: underline; text-underline-offset: 0.25em; }

/* ---------- como funciona: a conversa no WhatsApp ---------- */
.como { display: flex; flex-direction: column; align-items: center; padding: var(--gap) var(--frame); background: var(--paper); color: var(--navy); text-align: center; }
.como h2 { font-size: clamp(36px, 4.6vw, 66px); }
.como-sub { margin-top: 18px; max-width: 40ch; font-size: 20px; }
.conversa { list-style: none; display: flex; flex-direction: column; gap: 12px; width: min(100%, 680px); margin: 56px 0 48px; padding: clamp(18px, 3vw, 32px); border-radius: var(--r); background: var(--paper-2); text-align: left; }
.conversa li { max-width: 82%; padding: 12px 18px 14px; border-radius: var(--r); font-size: 17px; line-height: 1.45; }
.conversa .voce { align-self: flex-start; border-top-left-radius: 4px; background: #fff; }
.conversa .ts { align-self: flex-end; border-top-right-radius: 4px; background: var(--navy); color: var(--ink); }
.quem { display: block; margin-bottom: 3px; font-size: 13px; font-weight: 600; color: var(--turq-deep); }
.ts .quem { color: var(--turq); }

/* ---------- instagram ---------- */
.insta { padding: var(--gap) var(--frame); background: var(--navy-3); }   /* os posts são marinho: o chão um tom acima deixa a borda deles visível */
.insta-topo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.insta-topo h2 { grid-column: 1 / span 6; font-size: clamp(36px, 4.6vw, 66px); }
.insta-topo p { grid-column: 8 / -1; max-width: 40ch; font-size: 20px; color: var(--soft); }
.insta-topo a { color: var(--turq); font-weight: 600; }
.posts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: end; margin-top: 64px; }
.posts a { display: block; overflow: hidden; border-radius: var(--r); }
.posts img { width: 100%; transition: transform .5s cubic-bezier(.2, .75, .25, 1); }
.posts a:hover img { transform: scale(1.03); }

/* ---------- contato: o campo turquesa ---------- */
.cta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 24px; align-items: end; padding: var(--gap) var(--frame); background: var(--turq); color: var(--navy); }
.cta h2 { grid-column: 1 / span 8; max-width: 21ch; font-size: clamp(40px, 5.4vw, 80px); }
.cta-linha { display: contents; }
.cta .btn { grid-column: 1 / span 6; grid-row: 2; justify-self: start; min-height: 60px; padding: 0 30px; font-size: 18px; }
.cta dl { grid-column: 10 / -1; grid-row: 1 / span 2; display: grid; gap: 24px; align-self: end; }
.cta dt { font-size: 15px; font-weight: 600; }
.cta dd { margin-top: 4px; font-size: 18px; }
.cta dd a { text-decoration-thickness: 2px; }
.cta dd a:hover { text-decoration-thickness: 4px; }

/* ---------- rodapé: o nome de ponta a ponta ---------- */
footer { padding: 96px var(--frame) 40px; }
.nome { display: block; width: 100%; height: auto; }
.nome text { font: 700 140px "Space Grotesk", sans-serif; fill: var(--ink); }
.rodape { display: grid; grid-template-columns: 1fr minmax(0, 2fr) auto; gap: 24px 40px; margin-top: 40px; font-size: 15px; color: var(--soft); }
.rodape .aviso { max-width: 62ch; }
.rodape .links { display: flex; gap: 24px; }
.rodape .links a { text-decoration: none; }
.rodape .links a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- janela dos exemplos ---------- */
#vitrine { width: 85vw; height: 85vh; max-width: none; max-height: none; margin: auto; padding: 0; border: 0; overflow: hidden; overscroll-behavior: contain; border-radius: var(--r); background: var(--navy-2); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
#vitrine::backdrop { background: rgba(5, 12, 24, .78); }
#vitrine iframe { display: block; width: 100%; height: 100%; border: 0; }
#vitrine .fechar { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--ink); font-size: 26px; line-height: 1; box-shadow: 0 4px 16px rgba(0, 0, 0, .35); }
#vitrine .fechar:hover { background: var(--turq); color: var(--navy); }
html:has(dialog[open]) { overflow: hidden; }

/* entradas: só com JS ligado, nunca escondem conteúdo sem script */
html.js [data-enter] { opacity: 0; transform: translateY(24px); }

/* ---------- tablet ---------- */
@media (max-width: 1080px) {
  .nav .links { display: none; }
  .nav .btn { margin-left: auto; }
  .hero-topo { grid-template-columns: 1fr; }
  .perfil { justify-self: stretch; width: auto; }
  .perfil::after { display: none; }
  .site .texto, .sistema .texto { grid-column: 1 / -1; }
  .aparelhos { grid-column: 1 / -1; }
  .sistema .painel { grid-column: 1 / -1; order: 2; }
  .work-topo h2, .work-topo p, .insta-topo h2, .insta-topo p { grid-column: 1 / -1; }
  .cta h2 { grid-column: 1 / -1; }
  /* mapa até tablet: o recorte do mapa em cima e o texto embaixo, para nenhum alfinete encostar no título */
  .servico.mapa { display: flex; flex-direction: column; min-height: 0; }
  .servico.mapa::before { content: ""; display: block; flex: none; height: 430px; }
  .mapa-fundo, .mapa-alfinetes { left: 50%; width: max(640px, 100%); transform: translateX(-50%); }
  .mapa-alfinetes .esq { flex-direction: row-reverse; transform: translate(calc(-100% + 17px), -44px); }
  .mapa .texto { position: relative; left: auto; bottom: auto; max-width: none; margin: 0 var(--m) 20px; padding: 28px 24px 32px; }
  .credito-mapa { position: relative; right: auto; bottom: auto; padding: 0 var(--m) 24px; }
  .cta dl { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 24px 48px; }
  .rodape { grid-template-columns: 1fr; }
}

/* ---------- celular: outra composição ---------- */
@media (max-width: 760px) {
  body { font-size: 17px; }
  .nav { gap: 12px; padding-top: 14px; }
  .mark { gap: 10px; font-size: 19px; }
  .logo { width: 44px; height: 44px; }
  .nav .btn { width: 48px; min-height: 48px; padding: 0; }
  .nav .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .hero { padding-top: 104px; }
  .lead { font-size: 18px; }
  .campo { flex-direction: column; padding: 6px; border-radius: 26px; }
  .campo input { min-height: 52px; }
  .campo .btn { width: 100%; }
  .perfil { margin: 28px 0 8px; padding: 18px 18px 16px; }
  .perfil-nome { margin-top: 30px; padding-right: 0; font-size: 22px; }
  .perfil-tag { top: 14px; left: 18px; right: auto; }
  .rua { display: flex; gap: 12px; margin-top: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m); scrollbar-width: none; overscroll-behavior-x: contain; }
  .rua::-webkit-scrollbar { display: none; }
  .loja { flex: 0 0 74vw; scroll-snap-align: start; }
  .fachada { height: 300px; }
  .placa { font-size: 18px; }
  .servico { padding-top: 64px; }
  .servicos > h2, .work-topo h2, .insta-topo h2, .como h2 { font-size: 36px; }
  .servico h3 { font-size: 30px; }
  .aparelhos { padding-left: 14%; }
  .celular { width: 30%; padding: 5px; border-radius: 22px; }
  .celular img { border-radius: 17px; }
  .mapa-alfinetes span { font-size: 13px; padding: 6px 11px; }
  .painel { padding: 18px 12px 14px; }
  .painel-topo { flex-direction: column; align-items: flex-start; }
  .painel td { padding: 12px 8px; font-size: 15px; }
  .painel th { padding: 0 8px 8px; }
  #tela-cobranca :is(thead, tbody) :is(td, th):nth-child(2), #tela-vendas :is(thead, tbody) :is(td, th):nth-child(3) { display: none; }
  #tela-vendas tfoot th { text-align: left; }
  .cards { margin-top: 40px; }
  .conversa li { max-width: 90%; font-size: 16px; }
  .posts { display: flex; gap: 12px; margin-inline: calc(-1 * var(--m)); padding-inline: var(--m); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .posts li { flex: 0 0 72vw; scroll-snap-align: center; }
  .cta { display: flex; flex-direction: column; align-items: stretch; gap: 40px; }
  .cta h2 { font-size: 34px; }
  .cta .btn { width: 100%; }
  footer { padding-top: 72px; }
  #vitrine { width: 94vw; height: 90dvh; }
}