/* ═══════════════════════════════════════════════════════════════════════════
   O QUE E' SO' DA LANDING DO QGZINHO (/ia)
   ═══════════════════════════════════════════════════════════════════════════
   A identidade (paleta, Inter, faixas, botoes, moldura) vem de /venda.css e
   nao se repete aqui. Este arquivo tem as pecas desta pagina: o celular do
   hero, o chat que responde, o cartao que se confirma, o comparador da mesa,
   as telas da estrada, os cartoes de seguranca, o FAQ e a barra do celular.
   A decisao de cada peca esta em docs/landing-ia/CONSELHO-VISUAL.md.

   Toda <figure> leva margin:0 (memoria figure-tem-margem: ela nasce com 40px
   de cada lado) e toda img com width:100% leva height:auto (memoria
   height-vence-aspect-ratio: o atributo height vira altura fixa).

   O MOVIMENTO SO' EXISTE DENTRO DE prefers-reduced-motion:no-preference E
   COM html.vivo (posto pelo /ia.js). O estado de partida de tudo e' visivel:
   a entrada das secoes e' so' deslocamento, nunca opacidade zero. */

:where(.pagina-ia) figure{margin:0}  /* :where() zera a especificidade: senao este reset vencia o margin:auto que centraliza as pecas no celular */
.pagina-ia section img{height:auto}
/* so' nas secoes: no cabecalho e no rodape o logo tem altura fixa (34px, da
   venda.css), e um height:auto geral aqui o deixava do tamanho do arquivo */

.ia-exemplo{display:block;font-size:12px;color:var(--mute);letter-spacing:.02em;margin-top:14px;text-align:center}

/* ── O RITMO DA PAGINA ──────────────────────────────────────────────────── */
/* a faixa escura alternada: #0D1117 contra #090C11 era quase invisivel e as
   faixas liam como uma parede so'. Um degrau a mais e um brilho no topo. */
.pagina-ia .faixa.fundo2{background:radial-gradient(60% 160px at 50% 0,rgba(34,197,139,.07),transparent),#0E131A}
.pagina-ia .bloco{padding-top:clamp(72px,9vw,120px);padding-bottom:clamp(72px,9vw,120px)}
/* h2 de impacto: o trecho-chave em esmeralda, sem italico. O texto e' o do
   TEXTO.md; o <em> so' muda a cor. */
.pagina-ia h2{font-size:clamp(28px,3.1vw,42px);line-height:1.1;letter-spacing:-.035em}
.pagina-ia h2 em{font-style:normal;color:var(--acc)}
.ia-legenda{font-size:15px !important;color:var(--mute) !important;margin-top:18px !important}

.btn{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .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)}
.btn:active{transform:scale(.98)}

/* a entrada das secoes: de 18px abaixo para o lugar. Sem opacidade, de
   proposito: o que ainda nao "entrou" ja esta legivel. */
@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}
  html.vivo [data-entra] + [data-entra]{transition-delay:.08s}
}

/* ── O HERO ─────────────────────────────────────────────────────────────── */
/* o titulo tem 15 palavras (o da pagina de busca tem 11, o da home 7): a
   escala e' calculada para ele caber em 4 linhas sem engolir os botoes */
.ia-hero{min-height:720px}
.ia-hero .dentro{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:56px;align-items:center;padding:96px 44px 100px}
.ia-hero .texto{max-width:620px}
/* 42px desde o h1 de 01/10 (CONSELHO-HERO.md): a frase nova tem 104 letras e
   em 46px ia a 5 linhas, empurrando os botoes para o pe da tela em 1366x768 */
.ia-hero h1{font-size:42px;line-height:1.1}
.ia-hero p{max-width:540px}
.ia-linha-300{font-size:14px !important;color:var(--mute) !important;margin-top:18px !important}
.ia-hero-arte{position:absolute;right:-6%;top:-5%;bottom:-5%;width:64%;z-index:1;pointer-events:none}
/* top e bottom negativos: a arte tem uma moldura escura propria, e cabendo
   inteira na faixa ela aparecia como uma linha de emenda no alto do hero */
.ia-hero-fundo{width:100%;height:100% !important;object-fit:cover;object-position:center right;opacity:.85;
  transform:translate3d(0,var(--py,0px),0) scale(1.06);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 38%,#000 100%);
          mask-image:linear-gradient(to right,transparent 0%,#000 38%,#000 100%)}
.ia-celular{position:relative;z-index:2;justify-self:end;width:300px}
/* o halo esmeralda atras do aparelho: a luz do QGzinho "ligado" */
.ia-halo{position:absolute;left:50%;top:44%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;
  pointer-events:none;z-index:-1;background:radial-gradient(closest-side,rgba(34,197,139,.24),rgba(34,197,139,.06) 55%,transparent)}
/* o aparelho e' CSS, e nao uma foto de celular: a tela dentro dele e' a
   captura real em 390x844 @2x */
.ia-aparelho{border-radius:42px;padding:10px;background:#05070A;border:1px solid #2A323D;
  box-shadow:0 50px 100px rgba(0,0,0,.65),0 0 0 6px rgba(255,255,255,.02)}
.ia-aparelho img{display:block;width:100%;border-radius:32px}
.ia-celular .ia-exemplo{color:var(--dim)}
@media (prefers-reduced-motion:no-preference){
  .ia-halo{animation:ia-respira 5s ease-in-out infinite}
  .ia-aparelho{animation:ia-flutua 7s ease-in-out infinite}
}
@keyframes ia-respira{0%,100%{opacity:.6;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@keyframes ia-flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ── DUAS COLUNAS: texto e peca ─────────────────────────────────────────── */
.ia-duas{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:72px;align-items:center}
.ia-duas-mesa{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px}

/* ── O FIM DO ACHISMO: o placar logo abaixo do hero ─────────────────────── */
/* No lugar da tirinha (CONSELHO-SECAO-2.md). A mesma pergunta em dois
   cartoes: o de sempre apagado, sem esmeralda, e o da QG com a estetica do
   hero (fundo escuro, borda e halo esmeralda), maior e a direita, onde o olho
   termina. Letra minima de 16px no que se le (publico de 35 a 65 anos); so'
   os rotulos em caixa alta ficam em 13px. */
.ia-simples{font-size:16px !important;color:var(--dim) !important;margin-top:16px !important;padding-left:18px;position:relative;line-height:1.55 !important}
.ia-simples::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px rgba(34,197,139,.15)}

.ia-achismo > .sec{padding-top:clamp(64px,8vw,104px);padding-bottom:clamp(64px,8vw,104px)}
.ia-achismo-topo{max-width:820px;margin:0 auto;text-align:center}
.ia-achismo h2{font-size:clamp(28px,3.3vw,44px)}
.ia-par{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);gap:24px;margin-top:48px;align-items:stretch}
.ia-lado{position:relative;border-radius:24px;padding:28px 30px 26px;min-width:0;display:flex;flex-direction:column}
.ia-lado-antes{background:#0E131A;border:1px solid var(--linha)}
.ia-lado-qg{background:radial-gradient(90% 70% at 85% 0,rgba(34,197,139,.13),transparent 70%),#0E131A;border:1px solid rgba(34,197,139,.38);
  box-shadow:0 40px 90px rgba(0,0,0,.5);overflow:hidden;isolation:isolate}
.ia-halo-placar{left:auto;right:-140px;top:-120px;margin:0;width:420px;height:420px}
.ia-lado-rotulo{font-size:13px !important;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin:0 !important;color:#A9B4C2 !important}
.ia-lado-qg .ia-lado-rotulo{color:var(--acc) !important}
/* o tempo e' a primeira coisa que se le em cada cartao */
.ia-tempo{display:flex;align-items:center;gap:14px;margin:14px 0 0 !important}
.ia-tempo span{display:flex;flex-direction:column;font-size:clamp(28px,2.8vw,38px);font-weight:800;letter-spacing:-.035em;line-height:1.05}
.ia-tempo small{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.ia-tempo-antes span{color:#A9B4C2}
.ia-tempo-antes small{color:var(--mute)}
.ia-tempo-qg span{color:var(--acc)}
.ia-tempo-qg small{color:var(--dim)}
.ia-relogio{width:52px;height:52px;flex-shrink:0;fill:none;stroke-width:3.5}
.ia-relogio-trilho{stroke:#2A323D}
.ia-tempo-antes .ia-relogio-trilho{stroke:#3A4552}
.ia-relogio-ok{stroke:var(--acc);stroke-linecap:round;stroke-linejoin:round}
.ia-relogio-ponteiro{stroke:#A9B4C2;stroke-linecap:round;stroke-linejoin:round}
/* o arco: comeca no alto (rotate -90) e FECHA uma vez. Sem JS ele nasce
   fechado; com JS e movimento, so' se a faixa nasceu abaixo da tela (classe
   "anda" do /ia.js) ele espera vazio e fecha quando ela aparece ("ja"). O
   trilho continua visivel o tempo todo. */
.ia-relogio-arco{stroke:var(--acc);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:22px 22px}
@media (prefers-reduced-motion:no-preference){
  /* a transicao mora SO' no "ja": no "anda" ela esvaziava o arco animando
     (de cheio para vazio) logo ao carregar, e ele piscava antes de fechar */
  html.vivo .ia-achismo.anda .ia-relogio-arco{stroke-dashoffset:100}
  html.vivo .ia-achismo.anda.ja .ia-relogio-arco{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1) .25s}
}

.ia-passos-antes{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.ia-passos-antes li{position:relative;padding-left:22px;font-size:17px;line-height:1.5;color:#A9B4C2}
.ia-passos-antes li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;border-radius:50%;border:2px solid #4A5563}
.ia-passos-antes b{color:var(--txt);font-weight:700}
.ia-lado-fim{margin-top:auto !important;padding-top:20px;font-size:18px !important;font-weight:700;color:var(--txt) !important;line-height:1.4 !important}
.ia-lado-fim-qg{color:var(--acc) !important}

/* a conversa da QG: o desenho do chat do QGzinho (as mesmas cores do #chat
   logo abaixo), so' com a resposta, sem "digitando": o chat de verdade vem
   na secao seguinte */
.ia-placar-chat{margin-top:22px;display:grid;gap:14px}
.ia-placar-minha{justify-self:end;max-width:86%;margin:0 !important;background:#1A3A31;border-radius:16px 16px 6px 16px;padding:10px 16px 11px;
  font-size:17px !important;color:var(--txt) !important;font-weight:600;line-height:1.4 !important}
.ia-placar-quem{display:block;font-size:12.5px;font-weight:700;color:var(--acc);letter-spacing:.04em;margin-bottom:2px}
.ia-placar-dele{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;background:#171B22;border:1px solid #2A323D;
  border-left:4px solid var(--acc);border-radius:16px;padding:14px 16px}
.ia-placar-dele img{width:32px;border-radius:9px;display:block;margin-top:2px}
.ia-placar-dele p{margin:0;font-size:17px;line-height:1.5;color:var(--txt)}
.ia-placar-dele b{font-size:22px;font-weight:800;color:var(--acc)}
.ia-placar-nota{margin-top:16px}

.ia-ganhos{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ia-ganhos li{border-top:2px solid var(--acc);padding-top:16px}
.ia-ganhos h3{font-size:19px;margin:0 0 6px}
.ia-ganhos p{font-size:16.5px;margin:0;color:var(--dim)}

/* ── 1 · O CHAT QUE RESPONDE ────────────────────────────────────────────── */
/* As cores sao as do QGzinho de verdade (cena-4.webp): caixa #171B22, balao
   do usuario verde-escuro, pilula "de onde saiu" com a seta em esmeralda. */
.ia-toque{margin-top:30px !important;font-size:14px !important;font-weight:700;color:var(--txt) !important;letter-spacing:.01em}
.ia-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.ia-chip{font-family:inherit;font-size:15px;font-weight:600;color:var(--txt);background:var(--card);border:1px solid var(--linha);
  border-radius:999px;padding:10px 16px;min-height:44px;cursor:pointer;line-height:1.3;text-align:left;
  transition:border-color .18s ease,background .18s ease,transform .18s ease}
.ia-chip:hover{border-color:var(--acc-borda);background:var(--card2)}
.ia-chip:focus-visible,.ia-confirmar:focus-visible,.ia-cancelar:focus-visible,.ia-desfazer:focus-visible,.ia-ver:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.ia-chip.ativo{border-color:var(--acc);background:var(--acc-soft);color:var(--acc)}
.ia-chip:disabled{cursor:default}
.ia-chip:disabled:not(.ativo){opacity:.5}
html.sem-js .ia-chips,html.sem-js .ia-toque{display:none}

.ia-chat-lugar{width:440px;justify-self:end}
.ia-chat{background:#171B22;border:1px solid #2A323D;border-radius:20px;overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.02)}
.ia-chat-topo{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #262D38}
.ia-chat-topo img{width:40px;border-radius:12px;display:block;box-shadow:0 0 0 3px rgba(34,197,139,.18)}
.ia-chat-topo strong{display:block;font-size:16.5px;line-height:1.2}
.ia-chat-estado{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--mute);line-height:1.3}
.ia-chat-estado i{width:8px;height:8px;border-radius:50%;background:var(--acc);flex-shrink:0;position:relative}
/* o pulso e' um ::after com transform e opacidade (o compositor faz sozinho);
   animar box-shadow repintava a cada quadro, sem parar */
.ia-chat-estado i::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(34,197,139,.55);opacity:0}
@media (prefers-reduced-motion:no-preference){
  .ia-chat-estado i::after{animation:ia-ponto 2s ease-out infinite}
}
@keyframes ia-ponto{0%{transform:scale(1);opacity:.8}80%,100%{transform:scale(2.75);opacity:0}}
/* ALTURA FIXA: a conversa troca e a pagina nao pula embaixo do dedo */
.ia-chat-log{height:300px;padding:20px 18px;display:flex;flex-direction:column;gap:16px;overflow:hidden}
.ia-msg{font-size:15.5px;line-height:1.5;color:var(--txt)}
.ia-msg p{font-size:15.5px;color:var(--txt);margin:0;line-height:1.55}
.ia-msg b{font-weight:800}
.ia-minha{align-self:flex-end;max-width:82%;background:#1A3A31;border-radius:16px 16px 6px 16px;padding:11px 16px}
.ia-dele{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start}
.ia-dele img{width:28px;border-radius:8px;display:block;margin-top:2px}
.ia-fonte{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px !important;font-size:13px !important;color:var(--mute) !important}
.ia-pilula{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;font-weight:600;color:var(--txt);border:1px solid #2F3743;
  border-radius:999px;padding:4px 12px;background:#1C222B}
.ia-pilula small{font-size:13px;font-weight:500;color:var(--mute)}
.ia-pilula i{font-style:normal;color:var(--acc)}
.ia-pilula.acende{box-shadow:0 0 0 2px var(--acc),0 0 22px 4px rgba(34,197,139,.45);transition:box-shadow .4s ease}
.ia-ver{font-family:inherit;font-size:13.5px;font-weight:700;color:var(--acc-txt);background:var(--acc);border:none;border-radius:999px;
  padding:7px 14px;cursor:pointer;margin-top:10px}
.ia-pensando{display:flex;align-items:center;gap:10px;min-height:28px;font-size:13px;color:var(--mute)}
.ia-pontos{display:inline-flex;gap:4px}
.ia-pontos i{width:6px;height:6px;border-radius:50%;background:var(--acc);opacity:.5}
@media (prefers-reduced-motion:no-preference){
  .ia-pontos i{animation:ia-pulo 1s ease-in-out infinite}
  .ia-pontos i:nth-child(2){animation-delay:.15s}
  .ia-pontos i:nth-child(3){animation-delay:.3s}
  .ia-msg.entra{animation:ia-sobe .28s cubic-bezier(.22,1,.36,1) both}
}
@keyframes ia-pulo{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(-4px);opacity:1}}
@keyframes ia-sobe{from{transform:translateY(8px)}to{transform:none}}
.ia-chat-campo{display:flex;align-items:center;gap:10px;margin:0 16px 16px;padding:10px 10px 10px 16px;border:1px solid #2F3743;border-radius:16px;
  background:#0E1117;font-size:14.5px;color:var(--mute);min-height:54px}
.ia-chat-campo span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ia-chat-campo.escrevendo span{color:var(--txt)}
.ia-enviar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;flex-shrink:0;background:#1B6B4E;color:#CFF5E6}
.ia-enviar svg{width:18px;height:18px}

/* ── 2 · O CARTAO QUE SE CONFIRMA ───────────────────────────────────────── */
.ia-pedido{margin-top:26px !important;display:inline-block;background:#1A3A31;color:var(--txt) !important;font-weight:600;
  border-radius:16px 16px 6px 16px;padding:11px 16px;font-size:16px !important}
.ia-pedido span{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:2px}
.ia-sabe{margin-top:28px !important;color:var(--txt) !important;font-weight:600;font-size:15px !important}
.ia-etiquetas{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ia-etiquetas li{font-size:14px;color:var(--dim);border:1px solid var(--linha);border-radius:999px;padding:6px 13px;background:var(--card)}

.ia-cartao-lugar{width:440px;justify-self:end}
.ia-cartao{position:relative;background:#1A1F27;border:1px solid #2A323D;border-left:4px solid var(--acc);border-radius:18px;padding:22px 22px 20px;
  box-shadow:0 40px 90px rgba(0,0,0,.55);transition:opacity .3s ease}
.ia-selo{display:inline-block;font-size:12.5px;font-weight:700;color:var(--acc);background:rgba(34,197,139,.12);border-radius:999px;padding:5px 12px}
.ia-cartao-titulo{font-size:19px !important;font-weight:700;color:var(--txt) !important;margin-top:14px !important;letter-spacing:-.01em}
.ia-itens{list-style:none;margin:14px 0 0;padding:0}
.ia-itens li{border-top:1px solid #29303A;padding:11px 0}
.ia-itens label{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;cursor:pointer}
.ia-itens input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--acc);cursor:pointer}
.ia-item b{display:block;font-size:15.5px;font-weight:600;color:var(--txt);line-height:1.35}
.ia-item small{display:block;font-size:12.5px;color:var(--mute)}
.ia-precos{display:block;margin-top:4px;font-size:14px;color:var(--mute)}
.ia-precos s{color:var(--mute)}
.ia-precos strong{font-size:17px;font-weight:800;color:var(--txt);font-variant-numeric:tabular-nums;transition:color .3s ease}
.ia-itens li.fora .ia-precos strong{color:var(--mute);text-decoration:line-through}
.ia-itens li.fora .ia-precos s{text-decoration:none}
.ia-itens li.ok .ia-precos s{opacity:.45}
.ia-itens li.ok .ia-precos strong{color:var(--acc)}
.ia-itens .ia-mais{font-size:13.5px;color:var(--mute);padding-left:36px}
.ia-aviso{margin-top:6px !important;font-size:13.5px !important;color:#F0B33A !important;background:rgba(240,179,58,.10);border:1px solid rgba(240,179,58,.32);
  border-radius:10px;padding:9px 13px}
.ia-cartao-botoes{display:flex;gap:10px;margin-top:16px}
.ia-confirmar{font-family:inherit;font-size:16px;font-weight:700;color:var(--acc-txt);background:var(--acc);border:none;border-radius:12px;
  padding:13px 20px;min-height:48px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.ia-confirmar:hover{transform:translateY(-1px);box-shadow:0 10px 30px -8px rgba(34,197,139,.6)}
.ia-confirmar:disabled{opacity:.75;cursor:default;transform:none;box-shadow:none}
.ia-cancelar,.ia-desfazer{font-family:inherit;font-size:15px;font-weight:600;color:var(--dim);background:transparent;border:1px solid #2F3743;
  border-radius:12px;padding:12px 18px;min-height:48px;cursor:pointer}
.ia-cancelar:hover,.ia-desfazer:hover{border-color:var(--acc-borda);color:var(--txt)}
.ia-cartao-pe{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:12px 14px;
  border:1px solid var(--acc-borda);border-radius:12px;background:rgba(34,197,139,.08)}
.ia-feito{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--txt);font-size:15px}
.ia-feito i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--acc);color:var(--acc-txt);flex-shrink:0}
.ia-feito i svg{width:14px;height:14px;stroke-width:3}
.ia-desfazer{min-height:40px;padding:8px 14px;font-size:14px}
/* os estados. SEM JS: o pe "Feito" aparece e os botoes somem. */
html.sem-js .ia-cartao-botoes,html.sem-js .ia-desfazer{display:none}
html.vivo .ia-cartao[data-estado="pendente"] .ia-cartao-pe,
html.vivo .ia-cartao[data-estado="gravando"] .ia-cartao-pe{display:none}
html.vivo .ia-cartao[data-estado="feito"] .ia-cartao-botoes,
html.vivo .ia-cartao[data-estado="cancelado"] .ia-cartao-botoes{display:none}
.ia-cartao[data-estado="cancelado"] .ia-itens,.ia-cartao[data-estado="cancelado"] .ia-aviso{opacity:.4}
.ia-cartao[data-estado="cancelado"] .ia-cartao-pe{border-color:var(--linha);background:transparent}
.ia-cartao[data-estado="cancelado"] .ia-feito i{background:var(--mute)}
.ia-cartao[data-estado="feito"] input,.ia-cartao[data-estado="cancelado"] input{pointer-events:none}
.ia-cartao.pisca{box-shadow:0 0 0 3px var(--acc),0 40px 90px rgba(0,0,0,.55)}
@media (prefers-reduced-motion:no-preference){
  .ia-cartao.pisca{transition:box-shadow .5s ease}
  .ia-cartao-pe{animation:ia-sobe .35s cubic-bezier(.22,1,.36,1) both}
  .ia-itens li.ok .ia-precos strong{animation:ia-brilho .6s ease both}
}
@keyframes ia-brilho{0%{text-shadow:0 0 0 rgba(34,197,139,0)}40%{text-shadow:0 0 14px rgba(34,197,139,.8)}100%{text-shadow:0 0 0 rgba(34,197,139,0)}}

/* ── 3 · A LINHA DO DIA E O COMPARADOR DA MESA ──────────────────────────── */
.ia-dia{list-style:none;margin:30px 0 0;padding:0;position:relative}
.ia-dia::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--acc),rgba(34,197,139,.15))}
.ia-dia li{position:relative;display:grid;gap:2px;padding:0 0 18px 32px}
.ia-dia li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--acc)}
.ia-dia-hora{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.ia-dia li span:last-child{font-size:16.5px;color:var(--txt);line-height:1.45}

/* O RECORTE: as duas fotos sao 85% preto, e a mesa mora no terco direito.
   A foto fica com 185% da largura do quadro, encostada a direita e subida
   51%: o quadro mostra de 46% a 100% da largura e de 33% a 97% da altura,
   que e' onde estao a janela com o onibus, o relogio e a mesa. */
.ia-mesa-lugar{min-width:0}
.ia-compara{position:relative;aspect-ratio:3/2;border-radius:20px;overflow:hidden;border:1px solid #2A323D;background:#05070A;
  box-shadow:0 40px 90px rgba(0,0,0,.6);touch-action:pan-y;user-select:none;-webkit-user-select:none}
/* AS DUAS FOTOS TEM O MESMO BOX (mesma regra abaixo), e a quente mora numa
   camada do tamanho do quadro. O corte e a linha usam a MESMA --x sobre a
   MESMA largura (a do quadro):
   · a camada: clip-path inset(0 0 0 --x), porcentagem da camada = quadro;
   · a linha: um elemento da largura do quadro, andando por translateX(--x),
     porcentagem dele = quadro; o traco e' o ::before em left:-1px.
   Antes o clip-path estava na propria foto, de 185%: o corte caia em
   W*(1,85x - 0,85) e, com a linha em 78%, a luz comecava em 59%.
   Nada aqui muda layout no arraste: so' clip-path e transform. */
.ia-compara-noite,.ia-compara-quente{position:absolute;right:0;top:-51%;width:185%;max-width:none;display:block;pointer-events:none}
.ia-compara-camada{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x,50%));pointer-events:none}
.ia-compara-linha{position:absolute;top:0;left:0;width:100%;height:100%;transform:translate3d(var(--x,50%),0,0);pointer-events:none;will-change:transform}
.ia-compara-linha::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:rgba(255,255,255,.75);
  box-shadow:0 0 14px rgba(240,179,58,.6)}
/* sem backdrop-filter: o desfoque se refazia a cada quadro do arraste */
.ia-compara-linha i{position:absolute;left:0;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(9,12,17,.88);
  border:2px solid #fff}
.ia-compara-linha i::before,.ia-compara-linha i::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-4px;border-left:2px solid #fff;border-bottom:2px solid #fff}
.ia-compara-linha i::before{left:10px;transform:rotate(45deg)}
.ia-compara-linha i::after{right:10px;transform:rotate(-135deg)}
.ia-compara-rotulo{position:absolute;top:14px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:6px 11px;border-radius:999px;
  background:rgba(9,12,17,.7);pointer-events:none}
.ia-rotulo-esq{left:14px;color:#A9C1D9}
.ia-rotulo-dir{right:14px;color:#F0B33A}
/* o range nativo, invisivel: SO' teclado e leitor de tela. pointer-events
   none porque ele calcula o valor descontando o botao nativo, e o quadro
   calcula pela largura cheia: os dois escrevendo no mesmo arraste faziam a
   linha tremer. Mouse e dedo sao do quadro (/ia.js). */
.ia-compara-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:3;pointer-events:none}
html.vivo .ia-compara{cursor:ew-resize}
/* o anel so' para quem chegou pelo teclado (o clique tambem foca o range) */
.ia-compara:not(.ponteiro):has(.ia-compara-range:focus-visible) .ia-compara-linha i{box-shadow:0 0 0 3px var(--acc)}
.ia-mesa-quadro{position:relative}
.ia-mesa-quadro > .ia-notif{position:absolute;right:14px;bottom:14px;z-index:4;max-width:300px;pointer-events:none}
.ia-arraste{font-weight:700;color:var(--dim);letter-spacing:.06em;text-transform:uppercase;font-size:11.5px}

.ia-notif{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;width:100%;
  padding:12px 14px;border-radius:20px;background:rgba(30,36,46,.86);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 70px rgba(0,0,0,.55)}
.ia-notif img{width:40px;border-radius:10px;display:block}
.ia-notif-topo{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--dim)}
.ia-notif-topo strong{color:var(--txt);font-weight:700}
.ia-hora::after{content:"16:00";font-variant-numeric:tabular-nums}
.ia-notif p{margin:2px 0 0;font-size:14px;line-height:1.4;color:var(--txt)}
@media (prefers-reduced-motion:no-preference){
  .ia-notif.chega{animation:ia-chega .7s cubic-bezier(.22,1,.36,1) both}
}
@keyframes ia-chega{from{transform:translateY(-18px) scale(.97)}to{transform:none}}

/* ── VENDA DE EXCURSÃO (#excursao) ─────────────────────────────────────────
   O celular é o do hero (mesmo aparelho, halo e flutuação); a tela é a
   captura real do link com o mapa. O cenário gerado fica atrás, à direita,
   e some para a esquerda, como a arte do hero. */
.ia-excursao{position:relative;overflow:hidden;background:#090C11}
.ia-exc-cena{position:absolute;right:0;top:0;bottom:0;width:62%;z-index:0;pointer-events:none}
.ia-exc-cena img{width:100%;height:100% !important;object-fit:cover;object-position:left 62%;opacity:.7;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 45%,#000 100%);
          mask-image:linear-gradient(to right,transparent 0%,#000 45%,#000 100%)}
.ia-excursao > .sec{position:relative;z-index:1}
.ia-duas-exc{grid-template-columns:minmax(0,1fr) 300px}
.ia-exc-celular{justify-self:center}
.ia-duas-exc .col > p:not(.olho){margin-top:18px}
.ia-exc-itens{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.ia-exc-itens li{position:relative;padding-left:26px;color:var(--txt);line-height:1.45}
.ia-exc-itens li::before{content:"";position:absolute;left:0;top:.42em;width:12px;height:12px;border-radius:4px;
  background:#22C58B;box-shadow:0 0 0 3px rgba(34,197,139,.18)}
.ia-exc-guia{display:inline-block;margin-top:26px;color:#22C58B;font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(34,197,139,.4);padding-bottom:2px}
.ia-exc-guia:hover{border-bottom-color:#22C58B}
.ia-exc-guia::after{content:" →"}
/* a tela: a captura em 390x844 @2x, e a poltrona 31 desenhada por cima, na
   posição medida (34,36% / 68,55% da tela; 30 px de caixa em 390) */
.ia-exc-tela{position:relative;container-type:inline-size;border-radius:32px;overflow:hidden}
.ia-exc-tela img{border-radius:0 !important}
.ia-exc-banco{position:absolute;left:34.36%;top:68.55%;width:7.69%;height:3.555%;box-sizing:border-box;
  display:grid;place-items:center;border-radius:2.1cqw;font:700 3.75cqw/1 Inter,system-ui,sans-serif;
  /* o estado de partida SEM JS é o final: vendida (as cores da legenda real) */
  background:#090D14;border:.26cqw solid #181D26;color:#434A54;text-decoration:line-through}
.ia-exc-pix{display:flex;gap:8px;align-items:center;width:max-content;max-width:100%;margin:18px auto 0;
  padding:8px 14px;border-radius:999px;font-size:13.5px;color:var(--txt);
  background:rgba(30,36,46,.86);border:1px solid rgba(34,197,139,.35)}
.ia-exc-pix b{color:#22C58B;font-variant-numeric:tabular-nums}
.ia-exc-celular .ia-exemplo{text-align:center}
@media (prefers-reduced-motion:no-preference){
  /* só com o JS ligado e a seção nascida abaixo da tela (classe "anda"): a
     poltrona parte livre, fica verde quando é tocada e riscada quando o Pix
     cai; a etiqueta do Pix sobe junto com a venda */
  html.vivo .ia-excursao.anda .ia-exc-banco{background:#0D1117;border-color:#2A323D;color:#B2BCC8;text-decoration:none}
  html.vivo .ia-excursao.anda .ia-exc-pix{transform:translateY(14px);opacity:0}
  html.vivo .ia-excursao.anda.ja .ia-exc-banco{animation:ia-exc-venda 3.6s ease .5s forwards}
  html.vivo .ia-excursao.anda.ja .ia-exc-pix{transition:transform .6s cubic-bezier(.22,1,.36,1) 3s,opacity .6s ease 3s;
    transform:none;opacity:1}
}
@keyframes ia-exc-venda{
  0%,22%{background:#0D1117;border-color:#2A323D;color:#B2BCC8;text-decoration:none}
  30%,62%{background:#22C58B;border-color:#22C58B;color:#06110C;text-decoration:none}
  74%,100%{background:#090D14;border-color:#181D26;color:#434A54;text-decoration:line-through}
}

/* ── 4 · A ESTRADA ──────────────────────────────────────────────────────── */
.ia-frentes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.ia-frentes > div{border-top:2px solid var(--acc);padding-top:14px}
.ia-frentes h3{font-size:17px;margin-bottom:6px}
.ia-frentes p{font-size:15.5px}
/* A ESCALA INTEIRA, NA PROPORCAO DELA (01/10). Antes a coluna era 1fr + 230px
   com o celular entrando 90px por cima, e a foto vinha forcada em 16/7 com
   object-fit:cover: o Gabriel achou "achatado, esquisito", e a direita da
   tabela sumia. Agora a moldura tem a coluna toda e a imagem a altura dela;
   o celular desce para o pe' e encosta so' na faixa vazia de 64px que a foto
   traz embaixo da ultima linha (62px na tela em 1092px; o celular entra 40,
   e o teste confere que ele nao toca a ultima linha). As tres frentes descem
   para o lado esquerdo do celular, empilhadas: e' o vazio que ele deixava. */
.ia-telas{display:grid;grid-template-columns:minmax(0,1fr) 266px;column-gap:48px;margin-top:48px;perspective:1800px}
.ia-telas > .ia-escala{grid-column:1 / -1;grid-row:1}
.ia-telas > .ia-motorista{grid-column:2;grid-row:2}
.ia-telas > .ia-frentes{grid-column:1;grid-row:2;align-self:start;grid-template-columns:minmax(0,1fr);gap:22px;margin-top:44px}
.ia-telas > .ia-frentes p{max-width:62ch}
.ia-telas .ia-escala img{max-height:none;height:auto;aspect-ratio:auto;object-fit:fill}
.ia-escala{transform-origin:50% 100%}
.ia-motorista{position:relative;z-index:2;width:230px;margin:-40px 0 0;align-self:start;border-radius:30px;padding:8px;background:#05070A;border:1px solid #2A323D;
  box-shadow:0 36px 80px rgba(0,0,0,.7)}
.ia-motorista img{display:block;width:100%;border-radius:23px}
@media (prefers-reduced-motion:no-preference){
  html.vivo .ia-escala{transform:rotateX(10deg) scale(.97);transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
  html.vivo .ia-telas.reta .ia-escala{transform:none}
  html.vivo .ia-motorista{transform:translateY(30px);transition:transform 1.2s .15s cubic-bezier(.22,1,.36,1)}
  html.vivo .ia-telas.reta .ia-motorista{transform:none}
}

/* ── 5 · QUEM JA USA: faixa curta ───────────────────────────────────────── */
.ia-faixa-curta .sec{padding-top:64px;padding-bottom:64px}
.ia-citacao{margin:0;max-width:900px;position:relative;padding-left:58px}
.ia-citacao::before{content:"\201C";position:absolute;left:-4px;top:22px;font-family:Georgia,serif;font-size:110px;line-height:1;color:var(--acc);opacity:.45}
.ia-citacao-frase{font-size:clamp(21px,2.3vw,29px) !important;font-weight:600;color:var(--txt) !important;line-height:1.35 !important;letter-spacing:-.02em;margin:0}

/* ── 6 · SEGURANCA E MENSALIDADE: tres cartoes ──────────────────────────── */
.ia-cartoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
.ia-c{background:var(--card);border:1px solid var(--linha);border-radius:20px;padding:28px 26px;transition:transform .25s ease,border-color .25s ease}
.ia-c:hover{transform:translateY(-4px);border-color:var(--acc-borda)}
.ia-c h3{font-size:19px;margin:18px 0 8px}
.ia-c p{font-size:15.5px}
.ia-c-icone{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--acc-soft);border:1px solid var(--acc-borda)}
/* os icones da pagina sao SVG de contorno no mesmo molde (grade 24, traco 2,
   pontas e cantos redondos, sem preenchimento) e ficam no centro do quadrado
   por grid. Antes eram desenho de CSS com posicao em px: o cadeado era cheio,
   o check era contorno e os dois saiam do centro (Gabriel, 01/10) */
.ia-c-icone svg,.ia-enviar svg,.ia-feito i svg{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ia-c-icone svg{width:24px;height:24px;color:var(--acc)}
.ia-c-300{display:flex;flex-direction:column;justify-content:center;background:radial-gradient(80% 90% at 20% 0,rgba(34,197,139,.14),transparent 70%),var(--card)}
.ia-300{display:block;font-size:clamp(84px,9vw,120px);font-weight:800;letter-spacing:-.06em;line-height:.95;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#EAF0F6 20%,#22C58B);-webkit-background-clip:text;background-clip:text;color:transparent}
.ia-c-300 p{margin-top:10px}
/* os planos exclusivos da IA: nome e quantidade, sem valor em reais (regra
   do Gabriel) */
/* em tres colunas curtas: em lista, o cartao do 300 esticava os outros dois
   e deixava meio cartao vazio neles */
.ia-c-300 .ia-planos-titulo{margin-top:18px;font-size:13.5px;font-weight:700;color:var(--txt)}
.ia-planos{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ia-planos li{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:1px;padding:8px 10px;border:1px solid var(--linha);border-radius:10px;background:rgba(255,255,255,.02)}
.ia-planos li span{font-size:12px;color:var(--dim);line-height:1.25}
.ia-planos li b{font-size:17px;color:var(--txt);font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}
.ia-c-300 .ia-planos-pe{margin-top:6px;font-size:12.5px;color:var(--mute)}

/* ── PERGUNTAS FREQUENTES, recolhiveis ──────────────────────────────────── */
.ia-faq{margin-top:28px;max-width:860px;border-top:1px solid var(--linha)}
.ia-faq details{border-bottom:1px solid var(--linha)}
.ia-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:20px 2px;font-size:17px;font-weight:700;color:var(--txt);line-height:1.4}
.ia-faq summary::-webkit-details-marker{display:none}
.ia-faq summary::after{content:"+";flex-shrink:0;width:30px;height:30px;border-radius:50%;border:1px solid var(--linha);display:flex;align-items:center;
  justify-content:center;font-size:20px;font-weight:500;color:var(--acc);transition:transform .2s ease,border-color .2s ease}
.ia-faq summary:hover::after{border-color:var(--acc-borda)}
.ia-faq details[open] summary::after{transform:rotate(45deg)}
.ia-faq details p{font-size:16px;padding:0 44px 22px 2px;margin:0}

/* ── O FORMULARIO ───────────────────────────────────────────────────────── */
.ia-botoes-fim{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ia-rotulo{font-size:13.5px;color:var(--dim);margin-top:6px;font-weight:600}
.ia-rotulo span{font-weight:500;color:var(--mute)}
.ia-funcionario{font-size:13.5px;line-height:1.55;color:var(--dim);margin:16px 0 0;padding-top:14px;border-top:1px solid var(--linha)}
.ia-funcionario a{color:var(--txt);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.campos textarea::placeholder{color:var(--mute)}
.campos textarea{width:100%;padding:12px 13px;font-size:14.5px;border-radius:9px;border:1px solid var(--linha);
  background:var(--bg2);color:var(--txt);outline:none;font-family:inherit;resize:vertical;min-height:64px;line-height:1.45}
.campos textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(34,197,139,.15)}
.ia-email{color:var(--dim);text-decoration:none}

/* ── A BARRA DO CELULAR ─────────────────────────────────────────────────── */
.ia-barra{display:none}

/* ── ENTRE 900 E 1180: o hero e as duas colunas apertam ─────────────────── */
@media (max-width:1180px){
  .ia-hero h1{font-size:38px}
  .ia-hero .dentro{grid-template-columns:minmax(0,1fr) 280px;gap:40px}
  .ia-celular{width:280px}
  .ia-duas{grid-template-columns:minmax(0,1fr) 400px;gap:48px}
  .ia-chat-lugar,.ia-cartao-lugar{width:400px}
  .ia-duas-mesa{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
}

/* ── NO CELULAR ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .ia-hero{min-height:auto}
  .ia-hero .dentro{display:block;padding:40px 22px 44px}
  .ia-hero h1{font-size:28px;line-height:1.14}
  .ia-hero .texto{text-align:left}
  .ia-hero-arte{position:absolute;inset:auto 0 0 0;width:auto;height:480px}
  .ia-hero-fundo{transform:none;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 30%);
            mask-image:linear-gradient(to bottom,transparent 0%,#000 30%)}
  .ia-celular{width:220px;margin:36px auto 0;justify-self:auto}
  .ia-duas-exc{grid-template-columns:minmax(0,1fr)}
  .ia-exc-celular{width:min(250px,70vw)}
  .ia-exc-tela{border-radius:26px}
  .ia-exc-pix{font-size:12px;white-space:nowrap;padding:7px 12px}
  .ia-exc-cena{left:0;right:0;top:auto;bottom:0;width:auto;height:520px}
  .ia-exc-cena img{object-position:center 60%;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 40%);
            mask-image:linear-gradient(to bottom,transparent 0%,#000 40%)}
  .ia-halo{width:360px;height:360px;margin:-180px 0 0 -180px}
  .ia-aparelho{border-radius:32px;padding:7px}
  .ia-aparelho img{border-radius:26px}

  .pagina-ia h2{font-size:27px}

  /* O PLACAR EM UMA COLUNA, NA ORDEM DA HISTORIA: o de sempre primeiro,
     compacto, para o cartao da QG comecar ainda na primeira tela da faixa */
  .ia-achismo > .sec{padding-top:44px;padding-bottom:52px}
  .ia-achismo-topo{text-align:left}
  .ia-par{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:30px}
  .ia-lado{padding:22px 20px 20px;border-radius:20px}
  .ia-relogio{width:44px;height:44px}
  .ia-tempo span{font-size:28px}
  .ia-passos-antes{margin-top:16px;gap:8px}
  .ia-passos-antes li{font-size:16px}
  .ia-lado-fim{font-size:17px !important;padding-top:14px}
  .ia-placar-chat{margin-top:18px}
  .ia-placar-minha,.ia-placar-dele p{font-size:16.5px !important}
  .ia-placar-dele{padding:12px 14px}
  .ia-halo-placar{width:320px;height:320px;right:-120px;top:-110px}
  .ia-ganhos{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:34px}
  .ia-simples{font-size:15.5px !important}

  .ia-duas,.ia-duas-mesa{grid-template-columns:minmax(0,1fr);gap:32px}
  .ia-chat-lugar,.ia-cartao-lugar{width:100%;max-width:440px;justify-self:center}
  /* NO CELULAR O CHIP FICA COLADO NO CHAT: empilhados, os cinco ocupavam a
     tela inteira e a resposta aparecia fora da vista de quem tocou. Viram
     uma fileira que rola de lado, logo acima do chat, e a legenda desce. */
  .ia-duas-chat{gap:0}
  .ia-duas-chat > div:first-child{display:contents}
  .ia-duas-chat .olho{order:1}
  .ia-duas-chat h2{order:2}
  .ia-duas-chat .ia-toque{order:3;margin-top:24px !important}
  .ia-duas-chat .ia-chips{order:4;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;margin:10px -22px 0;padding:0 22px 14px;scroll-padding-left:22px;
    scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .ia-duas-chat .ia-chips::-webkit-scrollbar{display:none}
  .ia-duas-chat .ia-chat-lugar{order:5;margin-top:4px}
  .ia-duas-chat .ia-legenda{order:6;text-align:center}
  .ia-chip{font-size:14.5px;padding:9px 14px;white-space:nowrap;flex-shrink:0;scroll-snap-align:start}
  /* o mesmo no cartao: ele vem logo depois do pedido, e a legenda e as
     etiquetas descem para depois dele */
  .ia-duas-faz{gap:0}
  .ia-duas-faz > div:first-child{display:contents}
  .ia-duas-faz .olho{order:1}
  .ia-duas-faz h2{order:2}
  .ia-duas-faz .ia-pedido{order:3;justify-self:start;margin-bottom:22px}
  .ia-duas-faz .ia-cartao-lugar{order:4}
  .ia-duas-faz .ia-legenda{order:5}
  .ia-duas-faz .ia-sabe{order:6}
  .ia-duas-faz .ia-etiquetas{order:7}
  .ia-chat-log{height:290px;padding:16px 14px}
  .ia-msg,.ia-msg p{font-size:15px}
  .ia-cartao{padding:18px 16px 16px}
  .ia-cartao-botoes .ia-confirmar{flex:1}

  .ia-compara-rotulo{top:10px;font-size:10px;padding:5px 9px}
  .ia-rotulo-esq{left:10px}
  .ia-rotulo-dir{right:10px}
  /* no celular a notificacao sai de cima da foto e encosta embaixo dela:
     em 340px de largura ela cobria a mesa inteira */
  .ia-mesa-quadro > .ia-notif{position:relative;right:auto;bottom:auto;margin:-26px auto 0;width:calc(100% - 24px);max-width:360px}

  .ia-frentes{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:30px}
  .ia-telas{grid-template-columns:minmax(0,1fr);margin-top:34px}
  /* no celular a faixa vazia do pe' da escala tem ~19px: entrar 70px, como
     antes, cobria as tres ultimas linhas */
  .ia-telas > .ia-motorista{grid-column:1;grid-row:2;width:190px;margin:-10px 14px 0 auto}
  .ia-telas > .ia-frentes{grid-column:1;grid-row:3;gap:18px;margin-top:30px}
  .ia-faixa-curta .sec{padding-top:48px;padding-bottom:48px}
  .ia-citacao{padding-left:40px}
  .ia-citacao::before{font-size:80px;left:-2px;top:24px}
  .ia-cartoes{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:30px}
  .ia-c{padding:22px 20px}
  .ia-faq summary{font-size:16px;padding:17px 2px}
  .ia-faq details p{font-size:15.5px;padding-right:8px}
  .ia-botoes-fim .btn{flex:1 1 100%}
  .campos textarea{font-size:16px}

  /* a barra fixa: Agendar e WhatsApp sempre a mao */
  body.pagina-ia{padding-bottom:76px}
  .ia-barra{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:90;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(9,12,17,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--linha)}
  .ia-barra .btn-pri{flex:1;padding:13px 16px;font-size:15px}
  .ia-barra .btn-fan{padding:12px 16px;font-size:15px}
  .ia-barra.escondida{transform:translateY(115%)}
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .ia-barra{transition:transform .3s cubic-bezier(.22,1,.36,1)}
}
/* sem JS o range nao move nada: some, junto com o convite de arrastar, e a
   mesa fica na metade, que ja se le */
html.sem-js .ia-compara-range,html.sem-js .ia-arraste,html.sem-js .ia-compara-linha i{display:none}

/* ── OS GUIAS NO CABEÇALHO (02/10/2026) ──────────────────────────────────
   <details> que abre um painel com as páginas de busca. Sem JS ele abre e
   fecha no próprio botão; o /ia.js fecha ao tocar fora e no Esc. */
.guias{position:relative}
.guias summary{list-style:none;cursor:pointer;font-size:14px;font-weight:600;color:var(--dim);padding:10px 14px;border-radius:10px;
  display:inline-flex;align-items:center;gap:7px;user-select:none}
.guias summary::-webkit-details-marker{display:none}
.guias summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .18s ease}
.guias[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.guias summary:hover,.guias[open] summary{color:var(--txt);background:var(--card)}
.guias summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.guias-painel{position:absolute;right:0;top:calc(100% + 8px);width:360px;max-height:calc(100vh - 100px);overflow-y:auto;
  background:#11161E;border:1px solid var(--linha);border-radius:14px;padding:10px;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.guias-rot{margin:10px 10px 4px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.guias-rot:first-child{margin-top:4px}
.guias-painel a{display:block;padding:9px 10px;border-radius:9px;text-decoration:none}
.guias-painel a:hover,.guias-painel a:focus-visible{background:var(--card);outline:none}
.guias-painel b{display:block;font-size:14.5px;font-weight:700;color:var(--txt)}
.guias-painel span{display:block;font-size:13px;color:var(--dim);margin-top:2px}
@media (max-width:760px){
  .topo{position:relative}
  .guias{position:static}
  .guias summary{padding:9px 11px}
  .guias-painel{left:16px;right:16px;width:auto;top:calc(100% + 4px)}
}