/* FlyRemote — site institucional · folha de estilo
   Paleta e formas espelham o TEMA CLARO dos programas.
   Nada de CDN: tudo local, o site abre com file:// sem servidor. */

/* ═══════════════════════════════════════════════════════════════
     FlyRemote — landing
     Base: o TEMA CLARO do app (creme / cacau / laranja #ff6700).
     Efeito: um CÉU. O nome é FlyRemote — então o herói é um amanhecer
     laranja com nuvens em três camadas de parallax, desenhadas em canvas.
     As mesmas nuvens que agora existem no painel lateral dos programas.
     ═══════════════════════════════════════════════════════════════ */
  :root {
    --creme:      #e1dfda;
    --creme-alto: #edece8;
    --branco:     #f7f6f3;
    --areia:      #dcd7d1;
    --areia-forte:#b0aba5;
    --cacau:      #232020;
    --cacau-mid:  #5f5852;
    --cacau-fraco:#86817b;
    --laranja:    #ff6700;
    --laranja-esc:#c75000;
    --laranja-cl: #ff8d40;
    --verde:      #106e61;
    --verde-neon: #00baa6;

    --ico-teal:   #70e0c0;
    --ico-laranja:#f04000;
    --ico-azul:   #30a0e0;
    --ico-indigo: #5060e0;

    --sombra:      0 1px 2px rgba(35,32,32,.05), 0 12px 32px rgba(35,32,32,.07);
    --sombra-alta: 0 2px 6px rgba(35,32,32,.06), 0 30px 70px rgba(35,32,32,.14);
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --nav-h: 62px;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    margin: 0; background: var(--creme); color: var(--cacau);
    font-family: var(--sans); font-size: 17px; line-height: 1.55;
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
  }

  h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -.028em; font-weight: 820; }
  h1 { font-size: clamp(2.5rem, 7vw, 5rem); line-height: 1.02; }
  h2 { font-size: clamp(1.7rem, 4vw, 2.9rem); line-height: 1.09; }
  h3 { font-size: clamp(1.02rem, 1.9vw, 1.26rem); line-height: 1.22; letter-spacing: -.018em; }
  p { margin: 0; }
  .lead { font-size: clamp(1.02rem, 1.8vw, 1.25rem); color: var(--cacau-mid); line-height: 1.56; max-width: 62ch; }
  .olho { font-size: 11px; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; color: var(--laranja-esc); }
  .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  em { font-style: normal; color: var(--cacau); font-weight: 640; }

  .env { width: min(1180px, 100% - 40px); margin-inline: auto; }
  @media (max-width: 640px) { .env { width: calc(100% - 30px); } }
  section { padding: clamp(58px, 8vw, 116px) 0; }

  /* ───────── navegação ───────── */
  nav {
    position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h);
    display: flex; align-items: center;
    background: color-mix(in srgb, var(--creme) 72%, transparent);
    backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
    border-bottom: 1px solid transparent; transition: border-color .25s, background .25s;
  }
  nav.rolou { border-bottom-color: var(--areia); background: color-mix(in srgb, var(--creme) 94%, transparent); }
  nav .env { display: flex; align-items: center; gap: 12px; }
  .marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
  .marca b { font-size: 16.5px; font-weight: 820; letter-spacing: -.02em; }
  /* os dois ícones sobrepostos — a mesma dupla que o produto é */
  .par-ico { position: relative; width: 44px; height: 28px; flex: none; }
  .par-ico img {
    position: absolute; top: 0; width: 28px; height: 28px; border-radius: 8px; display: block;
    box-shadow: 0 2px 7px rgba(35,32,32,.18);
    transition: transform .3s cubic-bezier(.2,.8,.3,1);
  }
  .par-ico img:first-child { left: 0; z-index: 2; }
  .par-ico img:last-child  { left: 16px; z-index: 1; }
  .marca:hover .par-ico img:first-child { transform: translateX(-2px) rotate(-5deg); }
  .marca:hover .par-ico img:last-child  { transform: translateX(3px) rotate(5deg); }
  .cresce { flex: 1 1 auto; }
  .links { display: flex; align-items: center; gap: 3px; }
  /* `.links a` é mais específico que `.btn-p`, então ele vencia e roubava a cor
     dos botões da barra. Por isso os links de MENU vêm com :not(.btn). */
  .links a:not(.btn) {
    color: var(--cacau-mid); text-decoration: none; font-size: 14px; font-weight: 560;
    padding: 8px 11px; border-radius: 9px; transition: color .18s, background .18s;
  }
  .links a:not(.btn):hover { color: var(--cacau); background: color-mix(in srgb, var(--areia) 55%, transparent); }
  /* separa o menu dos botões de ação */
  .links .divisor { width: 1px; height: 20px; background: var(--areia-forte); opacity: .7; margin: 0 8px; }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer;
    padding: 13px 24px; border-radius: 11px; border: 1px solid transparent;
    transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .2s, background .2s, border-color .2s, color .2s;
  }
  /* laranja com texto BRANCO, inclusive no hover */
  .btn-p { background: var(--laranja); color: #fff; box-shadow: 0 6px 20px rgba(255,103,0,.3); }
  .btn-p:hover, .btn-p:focus-visible { background: var(--laranja-cl); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(255,103,0,.4); }
  .btn-s { background: color-mix(in srgb, var(--branco) 70%, transparent); color: var(--cacau); border-color: var(--areia-forte); }
  .btn-s:hover { transform: translateY(-2px); border-color: var(--cacau-mid); background: var(--branco); }
  .btn-sm { padding: 8px 14px; font-size: 13.5px; border-radius: 9px; font-weight: 680; }
  .btn:focus-visible, .links a:focus-visible, .sanduiche:focus-visible, .aba:focus-visible, .pergunta:focus-visible { outline: 2px solid var(--laranja); outline-offset: 3px; }

  .sanduiche { display: none; width: 42px; height: 38px; padding: 0; cursor: pointer; background: transparent; border: 1px solid var(--areia-forte); border-radius: 10px; position: relative; }
  .sanduiche i { position: absolute; left: 11px; width: 18px; height: 2px; border-radius: 2px; background: var(--cacau); transition: transform .28s cubic-bezier(.2,.8,.3,1), opacity .18s; }
  .sanduiche i:nth-child(1) { top: 13px; } .sanduiche i:nth-child(2) { top: 18px; } .sanduiche i:nth-child(3) { top: 23px; }
  .sanduiche[aria-expanded="true"] i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .sanduiche[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
  .sanduiche[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  .gaveta {
    position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 99;
    background: var(--creme-alto); border-bottom: 1px solid var(--areia);
    padding: 12px 0 18px; display: none; box-shadow: var(--sombra);
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
  .gaveta.aberta { display: block; animation: desce .26s cubic-bezier(.2,.8,.3,1); }
  @keyframes desce { from { opacity: 0; transform: translateY(-10px); } }
  /* `.env` só define largura — sem este display:flex os links caíam em fluxo de
     texto e quebravam na horizontal, um do lado do outro. */
  .gaveta .env { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
  .gaveta a:not(.btn) {
    display: flex; align-items: center; justify-content: space-between;
    color: var(--cacau); text-decoration: none;
    font-size: 15.5px; font-weight: 620; line-height: 1.3;
    padding: 13px 14px; border-radius: 10px; min-height: 48px;
  }
  /* setinha discreta à direita, que só aparece no toque/hover */
  .gaveta a:not(.btn)::after {
    content: "›"; font-size: 20px; color: var(--areia-forte);
    line-height: 1; opacity: 0; transition: opacity .18s, transform .18s;
  }
  .gaveta a:not(.btn):hover, .gaveta a:not(.btn):active { background: var(--areia); }
  .gaveta a:not(.btn):hover::after { opacity: 1; transform: translateX(2px); }
  /* separa a navegação das ações */
  .gaveta .risco { height: 1px; background: var(--areia); margin: 10px 2px; }
  .gaveta .acoes-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .gaveta .acoes-menu .btn { width: 100%; padding: 14px 12px; font-size: 15px; }
  @media (max-width: 380px) { .gaveta .acoes-menu { grid-template-columns: 1fr; } }
  @media (max-width: 1040px) { .links { display: none; } .sanduiche { display: block; } }

  /* ═════════ O CÉU ═════════ */
  .ceu {
    position: relative; overflow: hidden;
    padding-top: calc(var(--nav-h) + clamp(48px, 7vw, 96px));
    padding-bottom: clamp(80px, 11vw, 168px);
  }
  #ceu-cv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
  .ceu::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 30%;
    background: linear-gradient(to bottom, transparent, var(--creme) 94%); z-index: 1; pointer-events: none;
  }
  .ceu .env { position: relative; z-index: 2; }
  .heroi { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 58px); align-items: center; }
  @media (max-width: 940px) { .heroi { grid-template-columns: 1fr; } }

  .selo-topo {
    display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px;
    padding: 7px 15px 7px 11px; border-radius: 999px;
    background: rgba(255,255,255,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.9); font-size: 13px; font-weight: 640; color: var(--cacau-mid);
    box-shadow: 0 2px 10px rgba(35,32,32,.06);
  }
  .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--verde-neon); flex: none; }
  .pisca { animation: bat 1.6s ease-in-out infinite; }
  @keyframes bat { 0%,100% { opacity: 1; } 50% { opacity: .18; } }
  @media (prefers-reduced-motion: reduce) { .pisca { animation: none; } }

  h1 .risca { background: linear-gradient(96deg, var(--ico-laranja), var(--laranja) 46%, #ff9d5c 96%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .ceu p.lead { margin-top: 20px; color: #4a433e; }
  .acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
  .sob-btn { margin-top: 16px; font-size: 13.5px; color: var(--cacau-mid); display: flex; flex-wrap: wrap; gap: 6px 16px; }
  .sob-btn span { display: inline-flex; align-items: center; gap: 6px; }
  /* trio de modos de acesso */
  .modos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 26px; }
  @media (max-width: 620px) { .modos { grid-template-columns: 1fr; } }
  .modo {
    background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9);
    border-radius: 12px; padding: 12px 14px;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgba(35,32,32,.07);
  }
  .modo b { display: block; font-size: 13px; font-weight: 780; letter-spacing: -.01em; }
  .modo span { display: block; font-size: 11.5px; color: var(--cacau-mid); margin-top: 3px; line-height: 1.4; }
  .tique { color: var(--verde); font-weight: 800; }

  /* ═══ os dois ícones ═══
     Não é só balançar: cada ícone é um cartão 3D com BRILHO ESPECULAR — uma
     faixa de luz que varre a superfície conforme o ponteiro anda, como acontece
     num cartão holográfico. Entre os dois corre um feixe com partículas: o dado
     indo de uma ponta à outra. */
  .palco { position: relative; z-index: 1; display: grid; place-items: center; min-height: 340px; perspective: 1200px; }
  .duo { position: relative; width: min(340px, 76vw); aspect-ratio: 1; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.3,1); }

  .cartao3d {
    position: absolute; width: 60%; aspect-ratio: 1; border-radius: 22%;
    transform-style: preserve-3d; overflow: hidden;
    transition: box-shadow .4s;
  }
  .cartao3d img { width: 100%; height: 100%; display: block; border-radius: inherit; }
  /* o brilho: uma elipse de luz posicionada por --bx/--by (o JS move) */
  .cartao3d::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(60% 60% at var(--bx, 50%) var(--by, 40%),
      rgba(255,255,255,.62), rgba(255,255,255,.14) 42%, transparent 72%);
    opacity: 0; transition: opacity .3s;
    mix-blend-mode: overlay;
  }
  .palco:hover .cartao3d::after { opacity: 1; }
  /* aro de luz na borda, que também acompanha o ponteiro */
  .cartao3d::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
    border: 1px solid transparent;
    background: linear-gradient(var(--ang, 130deg), rgba(255,255,255,.85), transparent 38%, transparent 62%, rgba(255,255,255,.5)) border-box;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: .55;
  }

  /* Mais afastados que antes, mas ainda com as quinas se sobrepondo — é a
     sobreposição que conta a história dos dois lados ligados.
     O balanço tem três tempos diferentes por eixo (subir, girar, deslizar), com
     durações que não são múltiplas entre si. Assim o ciclo demora muito a se
     repetir e o movimento não parece um metrônomo. */
  .ico-cli {
    left: -4%; top: 2%;
    box-shadow: 0 26px 60px rgba(48,60,160,.32);
    animation: voa-cli 11.3s ease-in-out infinite, gira-cli 8.7s ease-in-out infinite;
  }
  .ico-srv {
    right: -4%; top: 36%;
    box-shadow: 0 30px 70px rgba(200,70,10,.34);
    animation: voa-srv 13.1s ease-in-out infinite, gira-srv 9.9s ease-in-out infinite;
  }
  @keyframes voa-cli {
    0%   { translate: 0 0; }
    27%  { translate: -5px -22px; }
    58%  { translate: 4px -9px; }
    81%  { translate: -3px -26px; }
    100% { translate: 0 0; }
  }
  @keyframes voa-srv {
    0%   { translate: 0 0; }
    31%  { translate: 5px 21px; }
    62%  { translate: -4px 8px; }
    85%  { translate: 3px 25px; }
    100% { translate: 0 0; }
  }
  @keyframes gira-cli {
    0%,100% { rotate: -9deg; } 40% { rotate: -5.5deg; } 70% { rotate: -10.5deg; }
  }
  @keyframes gira-srv {
    0%,100% { rotate: 8deg; } 45% { rotate: 4.5deg; } 75% { rotate: 9.5deg; }
  }
  /* translateZ fica no elemento (transform), livre do `translate`/`rotate` que
     as animações usam — assim as três coisas não brigam pela mesma propriedade */
  .ico-cli { transform: translateZ(24px); }
  .ico-srv { transform: translateZ(70px); }
  @media (prefers-reduced-motion: reduce) { .ico-cli, .ico-srv { animation: none; } }

  /* o "duo" inteiro sobe e desce com o vento — os dois juntos, então a distância
     entre eles não muda e a ligação nunca se desfaz */
  .duo { will-change: transform; }

  /* o feixe entre os dois — canvas por cima, sem capturar clique */
  #feixe { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

  /* ═══ os dois selos de identidade ═══
     Recriam o cabeçalho de cada programa: "FlyRemote" forte e, embaixo, a
     descrição — Acesso remoto seguro no client, Console do técnico no console.
     Cada um herda o fundo do seu próprio ícone: laranja para o técnico, azul
     para o client. Sombra em duas camadas (uma curta e opaca, outra longa e
     difusa) — é o que faz parecer objeto pousado, e não retângulo colado. */
  .selo-app {
    display: inline-flex; flex-direction: column; align-items: flex-start;
    padding: 11px 18px 12px; border-radius: 13px; position: relative; overflow: hidden;
    text-align: left; color: #fff;
  }
  .selo-app b {
    font-size: 17px; font-weight: 850; letter-spacing: -.025em; line-height: 1.1;
    text-shadow: 0 1px 3px rgba(0,0,0,.28);
  }
  .selo-app span {
    font-size: 12px; font-weight: 600; margin-top: 2px; opacity: .92;
    text-shadow: 0 1px 2px rgba(0,0,0,.24);
  }
  /* brilho suave no topo, como o verniz dos ícones */
  .selo-app::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(160deg, rgba(255,255,255,.3), rgba(255,255,255,.05) 42%, transparent 70%);
  }
  .selo-cliente {
    background: linear-gradient(150deg, #3aa8ea, #4a6fe0 55%, #6a4fd0);
    box-shadow: 0 2px 6px rgba(40,60,150,.34), 0 16px 34px -10px rgba(40,60,150,.55);
  }
  .selo-tecnico {
    background: linear-gradient(150deg, #ff8c2b, #e2550a 58%, #b23c08);
    box-shadow: 0 2px 6px rgba(170,60,10,.34), 0 16px 34px -10px rgba(170,60,10,.55);
  }
  .linha-selo { display: flex; position: relative; z-index: 5; }
  .linha-selo.dir { justify-content: flex-end; }
  .linha-selo.esq { justify-content: flex-start; }
  @media (max-width: 940px) { .linha-selo { justify-content: center; } }

  /* ───────── blocos ───────── */
  .cabeca { max-width: 730px; margin-bottom: clamp(26px, 3.4vw, 46px); }
  .cabeca h2 { margin-top: 11px; }
  .cabeca p { margin-top: 15px; }
  .cartao { background: var(--creme-alto); border: 1px solid var(--areia); border-radius: 16px; padding: clamp(21px, 2.5vw, 31px); box-shadow: var(--sombra); }
  .cartao.branco { background: var(--branco); }
  .duas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  @media (max-width: 900px) { .tres { grid-template-columns: 1fr; } }
  @media (max-width: 720px) { .duas { grid-template-columns: 1fr; } }
  .numero { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--laranja-esc); border: 1px solid var(--areia-forte); border-radius: 7px; padding: 3px 8px; display: inline-block; }
  .cartao h3 { margin: 14px 0 9px; }
  .cartao p { color: var(--cacau-mid); font-size: 15.5px; }

  /* dor → solução */
  .dor { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--areia); }
  @media (max-width: 800px) { .dor { grid-template-columns: 1fr; } }
  .dor > div { padding: clamp(22px, 2.8vw, 34px); }
  .dor .antes { background: var(--creme-alto); }
  .dor .depois { background: var(--branco); border-left: 1px solid var(--areia); }
  @media (max-width: 800px) { .dor .depois { border-left: none; border-top: 1px solid var(--areia); } }
  .lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 11px; }
  .lista li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15.5px; color: var(--cacau-mid); }
  .lista li b { color: var(--cacau); font-weight: 700; }
  .x { color: var(--areia-forte); font-weight: 800; }

  /* telas */
  .abas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
  .aba { font: inherit; font-size: 14px; font-weight: 640; cursor: pointer; padding: 9px 16px; border-radius: 10px; background: transparent; color: var(--cacau-mid); border: 1px solid var(--areia); transition: background .18s, color .18s, border-color .18s; }
  .aba:hover { color: var(--cacau); border-color: var(--areia-forte); }
  .aba[aria-selected="true"] { background: var(--cacau); color: var(--branco); border-color: var(--cacau); }
  .moldura { border-radius: 14px; overflow: hidden; border: 1px solid var(--areia); box-shadow: var(--sombra-alta); background: var(--creme-alto); }
  .moldura-topo { display: flex; align-items: center; gap: 7px; padding: 9px 13px; background: var(--areia); border-bottom: 1px solid var(--areia-forte); }
  .moldura-topo i { width: 10px; height: 10px; border-radius: 50%; background: var(--areia-forte); display: block; }
  .moldura-topo span { margin-left: 6px; font-size: 11.5px; color: var(--cacau-mid); font-weight: 620; }
  .painel { display: none; }
  .painel.ativo { display: block; animation: aparece .3s ease; }
  @keyframes aparece { from { opacity: 0; transform: translateY(6px); } }
  .legenda { margin-top: 13px; font-size: 14.5px; color: var(--cacau-mid); max-width: 68ch; }

  .app { background: var(--creme); padding: 15px; font-size: 13px; }
  .app-topo { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
  .app-topo img { width: 26px; height: 26px; border-radius: 7px; }
  .app-topo b { font-size: 14px; font-weight: 800; }
  .app-topo small { display: block; font-size: 10px; color: var(--cacau-fraco); }
  .selo-v { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: #d7dfda; color: var(--verde); border: 1px solid #90b7af; }
  .cx { background: var(--branco); border: 1px solid var(--areia); border-radius: 10px; padding: 12px 14px; }
  .cx + .cx { margin-top: 9px; }
  .rot { font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cacau-fraco); }
  .val { font-family: var(--mono); font-size: 21px; font-weight: 700; letter-spacing: .05em; margin-top: 2px; }
  .bt { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 6px 13px; border-radius: 8px; }
  .bt-lar { background: var(--laranja); color: #fff; }
  .bt-ver { background: #d7dfda; color: var(--verde); border: 1px solid #90b7af; }
  .bt-vaz { background: transparent; color: var(--cacau); border: 1px solid var(--areia); }
  .grade-maq { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 9px; margin-top: 9px; }
  .maq { position: relative; background: var(--branco); border: 1px solid var(--areia); border-radius: 10px; padding: 9px 11px 9px 13px; overflow: hidden; }
  .maq::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--verde-neon); }
  .maq.off::before { background: var(--laranja); }
  .maq .nm { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
  .maq .id { font-family: var(--mono); font-size: 10px; color: var(--cacau-fraco); margin: 3px 0 7px; }
  .pt-lar { background: var(--laranja); }
  .video { background: #1f2429; border-radius: 8px; height: 118px; display: grid; place-items: center; color: #9aa3ab; font-size: 11px; }
  .trilho { display: flex; flex-direction: column; gap: 5px; }
  .trilho span { font-size: 9px; text-align: center; color: var(--cacau-fraco); padding: 7px 4px; border-radius: 7px; background: var(--branco); border: 1px solid var(--areia); font-weight: 640; }
  .trilho span.on { background: #fdf1e4; color: var(--laranja-esc); border-color: #f4b990; }

  .passos-tela { display: grid; gap: clamp(20px, 3vw, 34px); }
  .passo-linha { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(20px, 3.4vw, 46px); align-items: center; }
  .passo-linha.inverte .passo-txt { order: 2; }
  .passo-txt h3 { margin: 13px 0 10px; }
  .passo-txt p { color: var(--cacau-mid); font-size: 15.5px; }
  @media (max-width: 880px) { .passo-linha, .passo-linha.inverte { grid-template-columns: 1fr; } .passo-linha.inverte .passo-txt { order: 0; } }

  /* comparativo */
  .rolagem { overflow-x: auto; border-radius: 16px; border: 1px solid var(--areia); background: var(--creme-alto); -webkit-overflow-scrolling: touch; }
  table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 720px; }
  th, td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--areia); vertical-align: top; }
  thead th { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--cacau-mid); font-weight: 800; background: var(--areia); }
  thead th.nosso { color: #fff; background: var(--laranja); }
  tbody tr:last-child td { border-bottom: none; }
  td.nosso { background: color-mix(in srgb, var(--laranja) 8%, transparent); font-weight: 620; }
  td:first-child { font-weight: 660; }
  td small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 420; color: var(--cacau-fraco); }
  .sim { color: var(--verde); font-weight: 800; }
  .meio { color: var(--laranja-esc); font-weight: 700; }
  .nao { color: var(--areia-forte); font-weight: 700; }

  .marcos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 18px; }
  @media (max-width: 860px) { .marcos { grid-template-columns: repeat(2, 1fr); } }
  .marco b { display: block; font-size: clamp(1.8rem, 4vw, 2.7rem); font-weight: 850; letter-spacing: -.035em; line-height: 1; }
  .marco span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--cacau-mid); }

  /* dúvidas */
  .duvida { border: 1px solid var(--areia); border-radius: 13px; background: var(--branco); overflow: hidden; }
  .duvida + .duvida { margin-top: 9px; }
  .pergunta {
    width: 100%; text-align: left; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
    background: transparent; border: none; padding: 17px 20px; color: var(--cacau);
    display: flex; align-items: center; gap: 12px;
  }
  .pergunta i { margin-left: auto; font-style: normal; font-size: 19px; color: var(--laranja-esc); transition: transform .24s cubic-bezier(.2,.8,.3,1); flex: none; }
  .pergunta[aria-expanded="true"] i { transform: rotate(45deg); }
  .resposta { padding: 0 20px 18px; color: var(--cacau-mid); font-size: 15.5px; max-width: 72ch; }
  .resposta[hidden] { display: none; }

  /* planos */
  .preco { display: flex; align-items: baseline; gap: 4px; margin: 12px 0 4px; }
  .preco b { font-size: 2rem; font-weight: 850; letter-spacing: -.035em; }
  .preco span { font-size: 14px; color: var(--cacau-fraco); }
  .marca-plano { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--laranja); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }

  /* faixa final */
  .final { position: relative; overflow: hidden; border-radius: 22px; padding: clamp(38px, 5.5vw, 74px) clamp(22px, 4vw, 54px); text-align: center; }
  #ceu-final { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
  .final > * { position: relative; z-index: 1; }
  .final h2 { color: #fff; text-shadow: 0 2px 20px rgba(120,40,0,.3); }
  .final p { color: rgba(255,255,255,.94); margin: 16px auto 0; max-width: 56ch; text-shadow: 0 1px 12px rgba(120,40,0,.25); }
  .final .acoes { justify-content: center; }
  .btn-branco { background: #fff; color: var(--cacau); }
  .btn-branco:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,.24); background: #fff; color: var(--cacau); }
  .btn-vidro { background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .btn-vidro:hover { background: rgba(255,255,255,.28); color: #fff; transform: translateY(-2px); }

  footer { border-top: 1px solid var(--areia); padding: 38px 0 50px; }
  .rodape { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
  footer a { color: var(--cacau-mid); text-decoration: none; font-size: 14.5px; }
  footer a:hover { color: var(--laranja-esc); }
  .miudo { font-size: 13px; color: var(--cacau-fraco); }

  .surge { opacity: 0; transform: translateY(20px); transition: opacity .68s cubic-bezier(.2,.8,.3,1), transform .68s cubic-bezier(.2,.8,.3,1); }
  .surge.vis { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .surge { opacity: 1; transform: none; transition: none; } }

  /* barra fixa de conversão no celular */
  .barra-mob {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: none;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--creme-alto) 96%, transparent);
    border-top: 1px solid var(--areia); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    gap: 9px;
  }
  .barra-mob .btn { flex: 1 1 0; padding: 12px 10px; font-size: 14.5px; }
  @media (max-width: 720px) { .barra-mob { display: flex; } body { padding-bottom: 78px; } }

  /* ─────────── planos vindos do servidor, cupom e cadastro ─────────── */

  /* caixa do cupom, acima da grade */
  .caixa-cupom {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-bottom: 18px; padding: 14px 18px;
    background: var(--branco); border: 1px dashed var(--areia-forte); border-radius: 14px;
  }
  .caixa-cupom label { font-size: 14.5px; font-weight: 700; color: var(--cacau); }
  .caixa-cupom input {
    font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em;
    padding: 9px 12px; font-size: 14px; width: 190px;
    border: 1px solid var(--areia-forte); border-radius: 9px;
    background: var(--creme-alto); color: var(--cacau);
  }
  .caixa-cupom input:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; }
  .aviso-cupom { font-size: 14px; font-weight: 650; }
  .aviso-cupom.ok  { color: var(--verde); }
  .aviso-cupom.nao { color: #b3261e; }

  /* um cartão de plano */
  .plano-cartao { display: flex; flex-direction: column; position: relative; }
  .plano-cartao.destaque { border-color: var(--laranja); box-shadow: 0 0 0 1px var(--laranja), var(--sombra); }
  .plano-cartao h3 { margin: 11px 0 0; }
  .plano-cartao .desc { color: var(--cacau-mid); font-size: 15px; margin-top: 8px; }
  .plano-cartao .lista { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
  .plano-cartao .lista li { display: flex; gap: 9px; font-size: 14.5px; color: var(--cacau-mid); }
  .plano-cartao .rodape-plano { margin-top: auto; padding-top: 20px; }
  .plano-cartao .btn { width: 100%; justify-content: center; }

  /* o "de / por" */
  .preco-bloco { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .preco-de {
    font-size: 17px; font-weight: 650; color: var(--cacau-fraco);
    text-decoration: line-through; text-decoration-thickness: 2px;
  }
  .preco-por { font-size: clamp(30px, 3.4vw, 38px); font-weight: 850; letter-spacing: -.035em; color: var(--cacau); line-height: 1; }
  .preco-ciclo { font-size: 14px; color: var(--cacau-mid); font-weight: 600; }
  .selo-desconto {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
    background: color-mix(in srgb, var(--laranja) 13%, transparent);
    color: var(--laranja-esc); border: 1px solid color-mix(in srgb, var(--laranja) 40%, transparent);
    font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    padding: 5px 11px; border-radius: 999px;
  }
  .nota-planos { margin-top: 20px; font-size: 14.5px; color: var(--cacau-mid); text-align: center; }
  .carregando-planos { grid-column: 1 / -1; text-align: center; color: var(--cacau-fraco); padding: 30px 0; }

  /* ─── modal de cadastro ─── */
  .tapa-modal {
    position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
    padding: 20px; overflow-y: auto;
    background: color-mix(in srgb, var(--cacau) 55%, transparent);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    animation: aparece .2s ease-out;
  }
  @keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
  .tapa-modal[hidden] { display: none; }
  .modal {
    position: relative; width: min(470px, 100%); margin: auto;
    background: var(--branco); border: 1px solid var(--areia); border-radius: 18px;
    padding: clamp(24px, 3vw, 34px); box-shadow: var(--sombra-alta);
    animation: sobe .28s cubic-bezier(.2,.8,.3,1);
  }
  @keyframes sobe { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .fecha-modal {
    position: absolute; top: 12px; right: 12px; width: 34px; height: 34px;
    display: grid; place-items: center; font-size: 22px; line-height: 1;
    background: transparent; border: none; border-radius: 9px; cursor: pointer;
    color: var(--cacau-fraco);
  }
  .fecha-modal:hover { background: var(--areia); color: var(--cacau); }
  .modal h3 { margin-top: 9px; }
  .sub-modal { margin-top: 10px; color: var(--cacau-mid); font-size: 15px; }
  .campo { display: block; margin-top: 16px; }
  .campo > span { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 6px; }
  .campo > span i { font-weight: 500; font-style: normal; color: var(--cacau-fraco); }
  .campo input {
    width: 100%; padding: 12px 13px; font-size: 15px; font-family: inherit;
    border: 1px solid var(--areia-forte); border-radius: 10px;
    background: var(--creme-alto); color: var(--cacau);
  }
  .campo input:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; }
  .campo input[name="cupom"] { font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; }
  .com-olho { position: relative; display: block; }
  .olhinho {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border: none; background: transparent; cursor: pointer;
    font-size: 16px; opacity: .55; border-radius: 8px;
  }
  .olhinho:hover { opacity: 1; background: var(--areia); }
  #form-cadastro .btn { margin-top: 20px; }
  .erro-modal {
    margin-top: 14px; padding: 11px 13px; border-radius: 10px; font-size: 14.5px;
    background: #fdecea; border: 1px solid #f3c1bb; color: #8f1d13;
  }
  .erro-modal[hidden] { display: none; }
  .selo-pronto {
    width: 54px; height: 54px; display: grid; place-items: center;
    border-radius: 50%; background: var(--verde); color: #fff;
    font-size: 28px; font-weight: 800; margin-bottom: 6px;
  }
  #passo-pronto .acoes { justify-content: flex-start; }

  /* ═══════════════════════════════════════════════════════════════════════
     REESCRITA DE 20/09/2026 — o site passou a vender TRÊS ferramentas (acesso
     remoto, bloqueio de instalação e inventário) e a mostrar FOTOS REAIS do
     programa. Paleta, nuvens e formas são as mesmas: ele pediu para manter.

     O que entra aqui: o ícone ÚNICO do herói (antes eram dois), as molduras de
     foto, as grades novas e os ajustes de fundo entre seções.
     ═══════════════════════════════════════════════════════════════════════ */

  /* ───────── o ícone único do herói ─────────
     Herda .cartao3d (brilho especular + aro de luz que o JS move). O balanço tem
     dois tempos não múltiplos entre si, como os dois ícones antigos tinham: assim
     o ciclo demora a se repetir e não parece metrônomo. */
  .ico-unico {
    position: absolute; left: 50%; top: 50%; width: 68%;
    margin: -34% 0 0 -34%;
    border-radius: 24%;
    box-shadow: 0 34px 80px rgba(200,70,10,.34), 0 10px 26px rgba(35,32,32,.18);
    transform: translateZ(60px);
    animation: voa-unico 12.7s ease-in-out infinite, gira-unico 9.3s ease-in-out infinite;
  }
  @keyframes voa-unico {
    0%   { translate: 0 0; }
    29%  { translate: 3px -20px; }
    61%  { translate: -4px -7px; }
    84%  { translate: 2px -24px; }
    100% { translate: 0 0; }
  }
  @keyframes gira-unico {
    0%,100% { rotate: -6deg; } 43% { rotate: -2.5deg; } 74% { rotate: -7.5deg; }
  }
  @media (prefers-reduced-motion: reduce) { .ico-unico { animation: none; } }

  /* o ícone da barra e do rodapé */
  .ico-marca { border-radius: 8px; box-shadow: 0 2px 7px rgba(35,32,32,.18); display: block; }

  /* ───────── botão grande (herói e faixa final) ───────── */
  .btn-lg { padding: 15px 26px; font-size: 16px; border-radius: 12px; }
  @media (max-width: 480px) { .btn-lg { width: 100%; justify-content: center; } }

  /* ───────── FOTOS REAIS do programa ─────────
     A foto é escura (o app tem tema escuro) e a página é creme. A moldura clara
     com sombra alta é o que faz a foto pousar na página em vez de brigar com ela. */
  .foto { margin: 0; }
  .foto img { width: 100%; height: auto; display: block; }
  .foto .moldura { background: #0e1524; }        /* o fundo do próprio app, para o WebP não mostrar costura */
  .foto.larga { max-width: 1120px; margin-inline: auto; }
  .foto .legenda { margin-top: 12px; }
  .foto .legenda b { color: var(--cacau); font-weight: 700; }
  /* foto sem moldura de janela (a faixa de aviso, que é um recorte) */
  .foto-solta {
    width: 100%; height: auto; display: block; border-radius: 12px;
    border: 1px solid var(--areia); box-shadow: var(--sombra-alta);
  }

  /* duas colunas: foto + texto (bloqueio de instalação) */
  .par-fotos { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(20px, 3.4vw, 44px); align-items: center; }
  @media (max-width: 880px) { .par-fotos { grid-template-columns: 1fr; } }
  .lado-texto h3 { margin-bottom: 14px; }
  .lado-texto .legenda { margin-top: 16px; }

  /* ───────── fundo alternado entre seções ─────────
     Sem isto a página vira um rolo creme de 12 blocos: o olho perde onde um
     assunto acaba e o outro começa. */
  .fundo-alto { background: var(--creme-alto); border-block: 1px solid var(--areia); }
  .pouco-topo { padding-top: clamp(34px, 4.5vw, 62px); }

  /* ───────── grade do "o que vem junto" ───────── */
  .grade-junto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .grade-junto .cartao { padding: 20px 22px; }
  .grade-junto h3 { margin: 0 0 8px; font-size: 1.04rem; }
  .grade-junto p { font-size: 14.8px; }
  @media (max-width: 980px) { .grade-junto { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px)  { .grade-junto { grid-template-columns: 1fr; } }

  /* ───────── faixa final: selo e texto claros sobre o céu ───────── */
  .selo-topo.claro {
    background: rgba(255,255,255,.22); color: #fff; border-color: rgba(255,255,255,.45);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  .selo-topo.claro b { font-weight: 800; }
  .miudo.claro { color: rgba(255,255,255,.9); }
  .link-claro { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
  .link-claro:hover { color: #fff; opacity: .85; }

  /* a grade de planos precisa de posição para o selo "mais escolhido" não ser cortado */
  .grade-planos { align-items: start; }
  .grade-planos .plano-cartao { position: relative; }

  /* ───────── ajustes do herói na reescrita (20/09) ─────────
     O H1 novo tem 5 palavras longas ("impeça que estrague de novo") e o tamanho
     antigo (até 5rem) o quebrava em quatro linhas, empurrando os botões para fora
     da primeira tela. Mais contido, ele cabe em duas ou três linhas e a chamada
     inteira aparece sem rolar. */
  .ceu h1 { font-size: clamp(2.15rem, 4.6vw, 3.5rem); }
  .heroi { grid-template-columns: 1.15fr .85fr; }
  .heroi .lead { max-width: 54ch; margin-top: 18px; }
  .heroi .acoes { margin-top: 26px; }

  /* A linha de selos era feita para 3 itens curtos alinhados; agora são 4 provas
     de risco zero. Vira uma fila que quebra sozinha, cada item com o ponto antes. */
  .linha-selo {
    list-style: none; margin: 24px 0 0; padding: 0;
    flex-wrap: wrap; gap: 8px 20px;
  }
  .linha-selo li {
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
    font-size: 14px; font-weight: 640; color: var(--cacau-mid);
  }
  .linha-selo li::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--laranja); flex: none;
  }
  @media (max-width: 400px) { .linha-selo li { white-space: normal; } }

  /* A vitrine tem QUATRO planos hoje (Diário, Básico, Pro, Empresa) e a grade era
     de três colunas — o quarto caía sozinho numa linha. Agora ela se ajusta ao que
     a API mandar: 4 em telas largas, 2 no tablet, 1 no celular. */
  .grade-planos { grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: 16px; }
  .grade-planos .plano-cartao { padding: 26px 22px 22px; }
  .grade-planos .preco-por { font-size: clamp(1.7rem, 2.6vw, 2.1rem); }
  @media (max-width: 1080px) { .grade-planos { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px)  { .grade-planos { grid-template-columns: 1fr; } }

  /* 🚨 ORDEM IMPORTA: a regra `.heroi { grid-template-columns: 1.15fr .85fr }` acima
     vem DEPOIS da media query original de 940px e por isso a vencia — no celular o
     herói continuava com duas colunas, o texto ficava numa faixa de 180 px e o H1
     quebrava em sete linhas, com o ícone por cima. A media query precisa vir aqui,
     no fim, para valer. */
  @media (max-width: 940px) {
    .heroi { grid-template-columns: 1fr; }
    .heroi .palco { order: -1; min-height: 210px; }
    .heroi .duo { width: min(220px, 52vw); }
    .heroi .lead, .heroi .linha-selo { max-width: none; }
  }
  @media (max-width: 560px) {
    .ceu h1 { font-size: clamp(1.95rem, 8.6vw, 2.5rem); }
    .heroi .acoes { flex-direction: column; align-items: stretch; }
    .heroi .acoes .btn { width: 100%; justify-content: center; }
    .linha-selo { gap: 7px 16px; }
    .linha-selo li { font-size: 13.5px; }
  }

  /* A tira da telemetria: uma faixa larga e baixa, que precisa de canto e borda
     próprios porque não tem a moldura de janela em volta. */
  .foto.tira { max-width: 1020px; margin: 16px auto 0; }
  .foto.tira img {
    border-radius: 10px; border: 1px solid var(--areia);
    box-shadow: var(--sombra);
  }

  /* O H1 passou a ser a CATEGORIA do produto ("Acesso remoto, bloqueio de instalação
     e inventário de hardware") — são palavras longas, e no tamanho anterior isso dava
     quatro linhas. Um pouco menor, cabe em três e a chamada inteira fica na primeira tela. */
  .ceu h1 { font-size: clamp(2.05rem, 4.05vw, 3.15rem); }

  /* ───────── etiqueta numerada das fotos (andaime de 20/09) ─────────
     Ele vai mandar as capturas novas uma a uma; a etiqueta é como a gente combina qual é
     qual ("troca a imagem 4"). Sai da página quando as trocas terminarem. */
  .etiqueta-foto {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px;
    font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--laranja-esc); background: #fdf1e4; border: 1px dashed #f4b990;
    border-radius: 999px; padding: 5px 13px;
  }
  .etiqueta-foto b {
    font-family: var(--mono); font-size: 10.5px; font-weight: 600;
    letter-spacing: 0; text-transform: none; color: var(--cacau-mid);
  }

  /* O aviso de sessão é uma janelinha de 294x84 pontos: esticado até a largura da coluna
     ficaria borrado. Fica no tamanho real, centralizado. */
  .foto-solta.miolo { width: auto; max-width: 100%; margin-inline: auto; }

  /* Foto em tamanho real, centralizada: para recortes pequenos (os cartões da proteção,
     o aviso de sessão) que perdem nitidez se forem esticados. */
  .foto.justa { max-width: 560px; margin-inline: auto; }
  .foto.justa .moldura { display: inline-block; }

  /* A imagem do inventário tem 1192 de largura: dentro de uma coluna de metade da página ela
     cai para 47% e volta a ficar ilegível — o defeito que ele apontou. Aqui ela usa a largura
     inteira do bloco, como a foto da sessão. */
  #inventario .foto.larga { max-width: 1120px; }

  /* "Por que tão barato" (21/09): entra depois da grade de planos, com um traço laranja na
     borda de cima — é uma explicação, não um quarto plano, e não pode parecer cartão de preço. */
  .por-que-barato {
    margin-top: 22px; border-top: 3px solid var(--laranja);
    max-width: 860px; margin-inline: auto;
  }
  .por-que-barato h3 { margin: 0 0 10px; }
  .por-que-barato .lista li { font-size: 15px; }