/* ═══════════════════════════════════════════════════════════════════════════
   AS PECAS DA PAGINA SOBRE A QG (/sobre-a-qg.html)
   ═══════════════════════════════════════════════════════════════════════════
   A identidade (paleta, Inter, faixas, cabecalho, botoes, moldura, rodape)
   vem de /venda.css e nao se repete aqui. As decisoes moram em
   docs/seo/CONSELHO-SOBRE.md.

   Toda <figure> leva margin:0 (memoria figure-tem-margem) e toda img com
   width:100% leva height:auto (memoria height-vence-aspect-ratio).

   O MOVIMENTO SO' EXISTE com html.vivo (posto pelo /sobre.js) e dentro de
   prefers-reduced-motion:no-preference. O estado de partida de tudo e'
   visivel: entrada e' so' deslocamento, nunca opacidade zero. */

.pagina-sobre figure{margin:0}
.pagina-sobre section img{height:auto}
.pagina-sobre h2{font-size:clamp(28px,3.1vw,42px);line-height:1.1;letter-spacing:-.035em}
.pagina-sobre h2 em{font-style:normal;color:var(--acc)}
.pagina-sobre section a:not(.btn){color:var(--acc);text-underline-offset:3px}
.sb-nq{white-space:nowrap}
.pagina-sobre .faixa.fundo2.sb-fundo,
.pagina-sobre .sb-contato{background:radial-gradient(60% 160px at 50% 0,rgba(34,197,139,.07),transparent),#0E131A}
.sb-bloco{padding-top:clamp(72px,9vw,116px);padding-bottom:clamp(72px,9vw,116px)}
.sb-cab{max-width:760px}
.sb-lede{margin-top:18px !important;max-width:640px}
.sb-exemplo{display:block;font-size:12px;color:var(--mute);letter-spacing:.02em;margin-top:16px;text-align:center}

.btn{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.btn-pri:hover{transform:translateY(-1px);box-shadow:0 10px 30px -8px rgba(34,197,139,.55)}
.btn-fan:hover{border-color:var(--acc-borda)}
.sb-botoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

@media (prefers-reduced-motion:no-preference){
  html.vivo [data-entra]{transform:translateY(18px);transition:transform .8s cubic-bezier(.22,1,.36,1)}
  html.vivo [data-entra].ja{transform:none}
}

/* ── O HERO ─────────────────────────────────────────────────────────────── */
.sb-hero{position:relative;overflow:hidden}
.sb-brilho{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 60% at 80% 30%,rgba(34,197,139,.13),transparent 65%)}
.sb-brilho-baixo{background:radial-gradient(50% 70% at 85% 80%,rgba(34,197,139,.10),transparent 70%)}
.sb-hero-dentro{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:84px 44px 92px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px;align-items:center}
.sb-hero-texto{max-width:560px}
.sb-hero h1{font-size:44px;line-height:1.08}
.sb-hero-p{margin-top:22px !important;font-size:18px !important}
.sb-hero .btn-pri{font-size:16px;padding:15px 30px}
.sb-hero .btn-fan{font-size:16px;padding:14px 26px}

/* a arte passa da coluna para a direita (a faixa corta com overflow) */
.sb-hero-arte{position:relative;margin-right:-120px !important}
.sb-onibus{display:block;width:100%;
  -webkit-mask-image:radial-gradient(50% 50% at 50% 50%,#000 58%,transparent 100%);
          mask-image:radial-gradient(50% 50% at 50% 50%,#000 58%,transparent 100%)}
.sb-cracha{position:absolute;left:0;bottom:4%;width:330px;padding:18px 20px 16px;border-radius:18px;
  background:rgba(18,23,31,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(34,197,139,.35);box-shadow:0 30px 70px rgba(0,0,0,.6)}
.sb-cracha::before{content:"";position:absolute;left:50%;top:-7px;width:46px;height:10px;margin-left:-23px;border-radius:6px;background:#05070A;border:1px solid #2A323D}
.sb-cracha-topo{display:flex;align-items:center;gap:12px}
.sb-cracha-topo img{width:44px;display:block}
.sb-cracha-topo strong{display:block;font-size:16px;line-height:1.2}
.sb-cracha-topo span{display:block;font-size:12.5px;color:var(--mute);line-height:1.3}
.sb-cracha-cnpj{margin-top:14px !important;font-size:20px !important;font-weight:800;color:var(--txt) !important;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;line-height:1.2 !important;padding-top:12px;border-top:1px dashed #2A323D}
.sb-cracha-cnpj small{display:block;font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--acc);margin-bottom:3px}
.sb-cracha-pe{margin-top:8px !important;font-size:13px !important;color:var(--dim) !important;display:flex;align-items:center;gap:8px}
.sb-pino{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px rgba(34,197,139,.15);flex-shrink:0}
.sb-chip-qgzinho{position:absolute;right:150px;top:6%;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;
  background:rgba(23,27,34,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid #2A323D;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.sb-chip-qgzinho img{width:34px;border-radius:10px;display:block}
.sb-chip-qgzinho span{font-size:12.5px;color:var(--mute);line-height:1.25;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:6px}
.sb-chip-qgzinho b{grid-column:1 / -1;font-size:14px;color:var(--txt)}
.sb-chip-qgzinho i{width:7px;height:7px;border-radius:50%;background:var(--acc)}
@media (prefers-reduced-motion:no-preference){
  .sb-cracha{animation:sb-balanca 7s ease-in-out infinite;transform-origin:50% -8px}
  .sb-chip-qgzinho{animation:sb-flutua 6s ease-in-out infinite}
}
@keyframes sb-balanca{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
@keyframes sb-flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ── A ESTRADA ──────────────────────────────────────────────────────────── */
/* O asfalto e' uma faixa escura com a linha tracejada no meio. A parte acesa
   (esmeralda) cresce da esquerda quando a secao aparece; sem JS ela ja nasce
   inteira. Cada parada e' um marco em cima do asfalto. */
.sb-estrada{--asfalto:14px;list-style:none;margin:56px 0 0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px}
.sb-estrada::before,.sb-estrada::after{content:"";position:absolute;left:0;right:0;top:9px;height:var(--asfalto);border-radius:999px}
.sb-estrada::before{background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(234,240,246,.35) 10px 26px) center/100% 2px no-repeat,#1A212B;
  box-shadow:inset 0 0 0 1px #242C37}
.sb-estrada::after{background:linear-gradient(90deg,rgba(34,197,139,.25),rgba(34,197,139,.65));transform-origin:0 50%}
.sb-estrada li{position:relative;padding-top:44px;min-width:0}
.sb-estrada li::before{content:"";position:absolute;left:0;top:4px;width:24px;height:24px;border-radius:50%;z-index:2;
  background:#0E131A;border:3px solid var(--acc);box-shadow:0 0 0 5px rgba(14,19,26,1)}
.sb-estrada .sb-agora::before{background:var(--acc);box-shadow:0 0 0 5px rgba(14,19,26,1),0 0 22px 6px rgba(34,197,139,.55)}
.sb-estrada time{display:block;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.sb-estrada h3{font-size:17px;line-height:1.3;margin-top:8px;letter-spacing:-.015em}
.sb-estrada p{font-size:15px;line-height:1.55;margin-top:8px}
@media (prefers-reduced-motion:no-preference){
  html.vivo .sb-estrada.anda::after{transform:scaleX(0)}
  html.vivo .sb-estrada.anda.ja::after{transform:scaleX(1);transition:transform 1.8s cubic-bezier(.4,0,.2,1) .2s}
  html.vivo .sb-estrada.anda li::before{transform:scale(.4);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
  html.vivo .sb-estrada.anda.ja li::before{transform:none}
  html.vivo .sb-estrada.anda.ja li:nth-child(2)::before{transition-delay:.45s}
  html.vivo .sb-estrada.anda.ja li:nth-child(3)::before{transition-delay:.75s}
  html.vivo .sb-estrada.anda.ja li:nth-child(4)::before{transition-delay:1.05s}
  html.vivo .sb-estrada.anda.ja li:nth-child(5)::before{transition-delay:1.35s}
  html.vivo .sb-estrada.anda.ja li:nth-child(6)::before{transition-delay:1.65s}
}

/* ── OS NOMES ───────────────────────────────────────────────────────────── */
.sb-familia{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;margin-top:48px;align-items:stretch}
.sb-nome-grande{position:relative;overflow:hidden;isolation:isolate;border-radius:24px;padding:40px 36px 34px;
  background:radial-gradient(80% 70% at 30% 0,rgba(34,197,139,.16),transparent 70%),var(--card);border:1px solid var(--acc-borda)}
.sb-logo-halo{position:absolute;left:36px;top:30px;width:200px;height:200px;margin:-40px 0 0 -40px;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(34,197,139,.35),transparent)}
.sb-nome-grande img{width:120px;display:block;filter:drop-shadow(0 14px 30px rgba(34,197,139,.35))}
.sb-assinatura{margin-top:22px !important;font-size:clamp(34px,3.6vw,48px) !important;font-weight:800;line-height:1 !important;
  letter-spacing:-.04em;color:var(--txt) !important}
.sb-nome-grande > p:last-child{margin-top:18px;font-size:16.5px;max-width:42ch}
.sb-nomes{list-style:none;margin:0;padding:0;display:grid;gap:14px;align-content:center}
.sb-nomes li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:20px;align-items:center;padding:20px 22px;border-radius:18px;
  background:var(--card);border:1px solid var(--linha);transition:border-color .25s ease,transform .25s ease}
.sb-nomes li:hover{border-color:var(--acc-borda);transform:translateX(4px)}
.sb-nomes h3{font-size:19px}
.sb-nomes p{font-size:15.5px;margin-top:4px}
.sb-peca{width:72px;height:72px;border-radius:18px;display:grid;place-items:center;background:var(--card2);border:1px solid #2A323D}
.sb-peca img{width:56px;border-radius:14px;display:block;box-shadow:0 0 0 3px rgba(34,197,139,.18)}
.sb-peca svg{width:28px;height:28px;fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sb-peca-url{flex-direction:column;gap:2px;align-content:center}
.sb-peca-url svg{width:20px;height:20px}
.sb-peca-url span{font-size:10.5px;font-weight:700;color:var(--txt);letter-spacing:.01em}
.sb-nome-razao .sb-peca{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.015) 0 6px,transparent 6px 12px),var(--card2)}

/* ── O SISTEMA: a tela Hoje e o QGzinho por cima ────────────────────────── */
.sb-palco{position:relative;margin-top:52px !important;padding-right:220px}
.sb-tela img{max-height:none !important;height:auto !important;object-fit:fill}
.sb-chat{position:absolute;right:0;bottom:-36px;width:330px;border-radius:22px;overflow:hidden;border:1px solid #2A323D;
  box-shadow:0 50px 100px rgba(0,0,0,.7),0 0 0 6px rgba(34,197,139,.06)}
.sb-chat img{display:block;width:100%}
.sb-palco .sb-exemplo{text-align:left;margin-top:16px}
@media (prefers-reduced-motion:no-preference){
  html.vivo .sb-palco .sb-chat{transform:translateY(40px);transition:transform 1.1s .2s cubic-bezier(.22,1,.36,1)}
  html.vivo .sb-palco.ja .sb-chat{transform:none}
}

/* ── OS DADOS: a ficha ──────────────────────────────────────────────────── */
.sb-dados{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:64px;align-items:center}
.sb-homonima{margin-top:26px !important;font-size:15.5px !important;padding:16px 18px 16px 50px;border-radius:14px;position:relative;
  background:var(--card);border:1px solid var(--linha);max-width:560px}
.sb-homonima::before{content:"i";position:absolute;left:16px;top:17px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:13px;font-weight:800;font-style:italic;font-family:Georgia,serif;color:var(--acc);border:1.5px solid var(--acc-borda)}
.sb-ficha{position:relative;border-radius:22px;padding:28px 30px 26px;overflow:hidden;
  background:linear-gradient(180deg,rgba(34,197,139,.08),transparent 120px),var(--card);border:1px solid #2A323D;
  box-shadow:0 40px 90px rgba(0,0,0,.5)}
/* o picote do lado esquerdo: le como ficha destacada, e nao como cartao de app */
.sb-ficha::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:8px;
  background:radial-gradient(circle at 0 50%,#090C11 3.5px,transparent 4px) 0 0/8px 16px repeat-y}
.sb-ficha-topo{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px dashed #2F3743}
.sb-ficha-topo img{width:48px;display:block}
.sb-ficha-topo span{display:block;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.sb-ficha-topo strong{display:block;font-size:22px;letter-spacing:-.02em;line-height:1.2}
.sb-campos{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.sb-campo{padding:14px 0;border-bottom:1px solid #222A35;min-width:0}
.sb-campo:last-child{border-bottom:none}
.sb-largo,.sb-campo-cnpj{grid-column:1 / -1}
.sb-campos dt{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.sb-campos dd{margin:4px 0 0;font-size:15.5px;line-height:1.5;color:var(--txt);overflow-wrap:anywhere}
.sb-campo-cnpj dd{font-size:clamp(26px,2.6vw,32px);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--acc)}
.sb-carimbo{position:absolute;right:18px;top:16px;width:104px;height:104px;transform:rotate(-14deg);opacity:.5;pointer-events:none}
.sb-carimbo circle{fill:none;stroke:var(--acc);stroke-width:2}
.sb-carimbo circle + circle{stroke-width:1.2;stroke-dasharray:3 3}
.sb-carimbo text{fill:var(--acc);font-size:10.5px;font-weight:800;letter-spacing:1.6px;font-family:inherit}
.sb-carimbo .sb-carimbo-qg{font-size:24px;letter-spacing:0}

/* ── FALAR COM A GENTE ──────────────────────────────────────────────────── */
.sb-contato{position:relative;overflow:hidden}
.sb-contato-dentro{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:64px;align-items:center}
.sb-zap{border-radius:22px;overflow:hidden;background:#0B141A;border:1px solid #2A323D;box-shadow:0 40px 90px rgba(0,0,0,.55)}
.sb-zap-topo{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#1F2C33}
.sb-zap-topo img{width:38px;display:block;border-radius:50%;background:#0B141A;padding:4px}
.sb-zap-topo strong{display:block;font-size:16px;line-height:1.2}
.sb-zap-topo span{display:block;font-size:12.5px;color:#8696A0}
.sb-zap-corpo{padding:30px 18px 26px;display:flex;justify-content:flex-end;
  background:radial-gradient(circle,rgba(255,255,255,.035) 1px,transparent 1.5px) 0 0/18px 18px,#0B141A}
.sb-zap-msg{max-width:88%;margin:0 !important;background:#005C4B;color:#E9EDEF !important;font-size:16px !important;line-height:1.45 !important;
  padding:10px 14px 12px;border-radius:14px 4px 14px 14px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.sb-zap figcaption{font-size:12px;color:var(--mute);text-align:center;padding:0 0 14px;background:#0B141A;letter-spacing:.02em}
@media (prefers-reduced-motion:no-preference){
  html.vivo .sb-zap .sb-zap-msg{transform:translateY(14px) scale(.96);transform-origin:100% 0;transition:transform .7s .25s cubic-bezier(.34,1.56,.64,1)}
  html.vivo .sb-zap.ja .sb-zap-msg{transform:none}
}

/* ── ENTRE 900 E 1180 ───────────────────────────────────────────────────── */
@media (max-width:1180px){
  .sb-hero h1{font-size:38px}
  .sb-hero-arte{margin-right:-60px !important}
  .sb-chip-qgzinho{right:70px}
  .sb-estrada{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px}
  .sb-estrada::before,.sb-estrada::after{display:none}
  .sb-estrada li{border-top:3px solid #1A212B}
  .sb-estrada li::before{top:-14px}
  .sb-palco{padding-right:160px}
  .sb-chat{width:280px}
  .sb-dados{grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:44px}
  .sb-contato-dentro{grid-template-columns:minmax(0,1fr) 340px;gap:44px}
}

/* ── NO CELULAR ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .pagina-sobre h2{font-size:27px}
  .sb-hero-dentro{display:block;padding:40px 22px 36px}
  .sb-hero h1{font-size:30px;line-height:1.14;letter-spacing:-.03em}
  .sb-hero-p{font-size:16.5px !important}
  .sb-botoes .btn{flex:1 1 100%}
  .sb-hero-arte{margin:26px -22px 0 !important}
  .sb-onibus{-webkit-mask-image:radial-gradient(50% 50% at 50% 50%,#000 62%,transparent 100%);
                     mask-image:radial-gradient(50% 50% at 50% 50%,#000 62%,transparent 100%)}
  .sb-cracha{position:relative;left:auto;bottom:auto;width:auto;max-width:330px;margin:-60px auto 0}
  .sb-chip-qgzinho{right:22px;top:0}
  .sb-chip-qgzinho span{font-size:12px}

  .sb-estrada{grid-template-columns:minmax(0,1fr);row-gap:0;margin-top:36px;padding-left:40px}
  .sb-estrada::before,.sb-estrada::after{display:block;left:5px;right:auto;top:6px;bottom:6px;width:var(--asfalto);height:auto}
  .sb-estrada::before{background:repeating-linear-gradient(180deg,transparent 0 10px,rgba(234,240,246,.35) 10px 24px) center/2px 100% no-repeat,#1A212B}
  .sb-estrada::after{background:linear-gradient(180deg,rgba(34,197,139,.25),rgba(34,197,139,.65));transform-origin:50% 0}
  .sb-estrada li{border-top:none;padding:0 0 30px}
  .sb-estrada li:last-child{padding-bottom:0}
  .sb-estrada li::before{left:-40px;top:0}
  .sb-estrada h3{font-size:17px;margin-top:4px}
  @media (prefers-reduced-motion:no-preference){
    html.vivo .sb-estrada.anda::after{transform:scaleY(0)}
    html.vivo .sb-estrada.anda.ja::after{transform:scaleY(1)}
  }

  .sb-familia{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:32px}
  .sb-nome-grande{padding:30px 22px 26px}
  .sb-nome-grande img{width:92px}
  .sb-nomes li{grid-template-columns:56px minmax(0,1fr);gap:14px;padding:16px}
  .sb-peca{width:56px;height:56px;border-radius:14px}
  .sb-peca img{width:44px;border-radius:11px}
  .sb-peca-url span{font-size:8.5px}
  .sb-nomes p{font-size:15px}

  .sb-palco{padding-right:0;margin-top:34px !important}
  .sb-chat{position:relative;right:auto;bottom:auto;width:64%;max-width:280px;margin:-44px 10px 0 auto}
  .sb-palco .sb-exemplo{text-align:center}

  .sb-dados{grid-template-columns:minmax(0,1fr);gap:34px}
  .sb-ficha{padding:22px 18px 18px 22px}
  .sb-campos{grid-template-columns:minmax(0,1fr)}
  .sb-carimbo{width:78px;height:78px;right:10px;top:10px}
  .sb-ficha-topo{padding-right:70px}
  .sb-ficha-topo strong{font-size:19px}

  .sb-contato-dentro{grid-template-columns:minmax(0,1fr);gap:34px}
  .sb-zap{max-width:380px;width:100%;justify-self:center}
}