/* Fabrisense · demo — animação 3D contada em PASSOS (a página não rola).
   Geometria do texto medida nos mockups aprovados (renders/supermercado/telas/mockups-5-pausas-folha.png):
   quadro de referência 1920×1080 (= a área segura do master), --u = largura dela na tela / 1920. Todo
   tamanho é <número do mockup> × --u.
   16/09 (manhã): cabeçalho com o menu do site, lista de vantagens no hero, botão de WhatsApp em contorno,
   vidro claro na tela 3, contatos e popup de orçamento na tela 5, dica de gesto fixa no rodapé.
   29/09 (leveza, README §9): os brilhos saíram de cima do vídeo (vão queimados nele; aqui só no fundo do
   body); #quadro sem recorte, posto só por transform; sem backdrop-filter no modo leve; reservas para o
   Safari 12 do iPhone 6 (nada de inset, clamp() com reserva antes, margem onde falta o gap de flex,
   <dialog> sem showModal). */

@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../assets/inter-400.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../assets/inter-600.woff2) format("woff2")}
@font-face{font-family:Comfortaa;font-style:normal;font-weight:700;font-display:swap;src:url(../assets/comfortaa-700.woff2) format("woff2")}

:root{
  --fundo:#0b0a16;
  --roxo:#6b68af;
  --tx:#f4f3fa;
  --tx2:rgba(244,243,250,.80);
  --eye:#a3a1db;
  --fnt:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fnt-marca:Comfortaa,var(--fnt);

  /* --largv e --altv são reescritos em px pelo JS (tira a barra de rolagem da conta e acompanha a
     barra do navegador no celular); os valores abaixo valem até o JS rodar. */
  --largv:100vw;
  --altv:100vh;
  /* 1º paint, antes do JS: a MESMA conta do medirQuadro() da paisagem, em comprimentos. --sw = largura
     da área segura (1920×1080 em 320,180 do master 2560×1440) na tela: cabe inteira e sobe até 6 % só
     para cobrir janela fora da faixa (o vertical, abaixo de 1,3, tem a conta dele no bloco vertical). --u/--fx/--fy
     o JS reescreve em px. */
  --sw:min(max(min(var(--largv), calc(var(--altv) * 1.777778)), calc(var(--largv) * .75), calc(var(--altv) * 1.333333)), calc(min(var(--largv), calc(var(--altv) * 1.777778)) * 1.06));
  --u:calc(var(--sw) / 1920);
  --fx:calc(var(--largv) / 2 - var(--sw) / 2);
  --fy:calc(var(--altv) / 2 - var(--sw) * .28125);
}
@supports (height:100dvh){ :root{ --altv:100dvh } }

*{box-sizing:border-box}
/* Sem rolagem nativa: quem avança a demo é o gesto, não o scroll. */
html,body{height:100%; overflow:hidden; overscroll-behavior:none}
html{background:var(--fundo)}
/* Os dois brilhos radiais do site vão QUEIMADOS no vídeo (encode.py); aqui são só o fundo do body, que
   aparece fora do vídeo nas proporções extremas. Nada mais por cima do vídeo com mistura por quadro. */
body{
  margin:0; color:var(--tx); font-family:var(--fnt); -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(120% 80% at 50% 0%,  rgba(107,104,175,.22) 0%, rgba(107,104,175,0) 60%),
    radial-gradient(90% 60% at 80% 100%, rgba(67,64,122,.28) 0%, rgba(67,64,122,0) 65%),
    var(--fundo);
}

/* ---------- cabeçalho: marca + menu do site, fixo sobre todas as telas ----------
   Valores do site institucional (css/style.css): links .95rem/500 em branco 90 %, sublinhado de
   2 px na cor de destaque, Login em pílula com borda 2 px branca 50 %, raio 8 px, 8×24 de padding. */
.topo{
  position:fixed; z-index:7; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:14px 24px; padding:14px clamp(16px,3vw,40px);
  padding-top:max(14px,env(safe-area-inset-top));
  pointer-events:none;
}
/* faixa do cabeçalho (30/09, celular e computador; era um véu em degradê e os links "flutuavam" sobre o vídeo): escura
   quase opaca, da altura do .topo (pseudo-elemento: a altura que o JS lê não muda), filete lilás que some nas pontas */
.topo::before{
  content:""; position:absolute; left:0; right:0; top:0; bottom:0; z-index:-1; pointer-events:none;
  background:rgba(11,10,22,.86); border-bottom:1px solid rgba(244,243,250,.08);
}
.topo::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(163,161,219,0) 0%, rgba(163,161,219,.6) 50%, rgba(163,161,219,0) 100%);
}
.topo a, .topo button{pointer-events:auto}
.marca{display:flex; align-items:center; gap:10px; min-height:30px; text-decoration:none; color:var(--tx)}
/* o símbolo na altura da escrita (30/09 noite): viewBox justo no desenho, 17 px (o "fabrisense" vai do alto do f à
   linha de base em ~17 px); a caixa da marca continua com 30 px, a altura do cabeçalho que o JS lê não muda */
.marca-simbolo{display:block; flex:0 0 auto; width:50px; height:17px; margin-top:-2px; fill:#fff}
.marca-nome{font-family:var(--fnt-marca); font-weight:700; font-size:22px; letter-spacing:.01em; line-height:1}
.menu{display:flex; align-items:center; gap:24px; gap:clamp(18px,2.2vw,32px)}
.menu a{
  position:relative; padding:4px 0; font-size:.95rem; font-weight:500; white-space:nowrap;
  color:rgba(255,255,255,.9); text-decoration:none; transition:color .25s;
}
.menu a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--eye); transition:width .25s ease;
}
.menu a:hover{color:#fff}
.menu a:hover::after{width:100%}
.menu a.login{
  margin-left:8px; padding:8px 24px; border:2px solid rgba(255,255,255,.5); border-radius:8px;
  font-size:.9rem; font-weight:600; color:#fff;
  transition:background-color .25s, color .25s, border-color .25s;
}
.menu a.login::after{display:none}
.menu a.login:hover{background:#fff; color:var(--roxo); border-color:#fff}
.hamburger{
  display:none; flex-direction:column; gap:5px; padding:6px; cursor:pointer;
  background:none; border:0; -webkit-appearance:none; appearance:none;
}
.hamburger span{display:block; width:26px; height:2px; border-radius:2px; background:#fff; transition:transform .25s, opacity .25s}
.topo.aberto .hamburger span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.topo.aberto .hamburger span:nth-child(2){opacity:0}
.topo.aberto .hamburger span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
@media (max-width:1023px){
  .menu{display:none}
  .hamburger{display:flex; position:relative; z-index:9}
  .topo.aberto .menu{
    display:flex; position:fixed; top:0; right:0; bottom:0; left:0; z-index:8; pointer-events:auto;
    flex-direction:column; align-items:center; justify-content:center; gap:28px;
    background:rgba(11,10,22,.96);
  }
  .topo.aberto .menu a{font-size:1.25rem; font-weight:600}
  .topo.aberto .menu a.login{margin:8px 0 0; padding:10px 32px}
}

.aviso{
  position:fixed; z-index:4; left:0; right:0; bottom:0; margin:0;
  padding:10px 16px; padding-bottom:max(10px,env(safe-area-inset-bottom));
  text-align:center; font-size:11px; letter-spacing:.04em;
  color:rgba(244,243,250,.45); pointer-events:none;
}

/* ---------- palco fixo (100 % da janela) ---------- */
.palco{
  position:fixed; z-index:1; top:0; right:0; bottom:0; left:0; height:var(--altv);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; touch-action:none;   /* o swipe é nosso: nada de rolagem/zoom nativo aqui */
}
.cenario{position:relative; width:100%; height:100%}

/* O quadro é o MASTER inteiro: o JS (medirQuadro) põe a caixa em px da variante (w×h) e
   transform: translate3d(x,y,0) scale(k) — composição, sem layout, sem recorte (o .palco corta a janela).
   Transição, se houver, só de transform. Antes do JS vale a conta da paisagem em comprimentos. */
.quadro{
  position:absolute; z-index:1; transform-origin:0 0; will-change:transform; transition-property:none;
  left:calc(var(--largv) / 2 - var(--sw) * .666667); top:calc(var(--altv) / 2 - var(--sw) * .375);
  width:calc(var(--sw) * 1.333333); height:calc(var(--sw) * .75);
}
/* 1º paint fora da faixa do master deitado (a conta do medirQuadro()): acima de ~2,51 o COBRE não cobre: área segura
   inteira e faixa lateral (o fundo do body). Abaixo de 1,3 vale o bloco vertical (30/09 noite; era o master em pé na
   largura com a área segura centrada) */
@media (min-aspect-ratio:2513/1000){ :root{--sw:calc(var(--altv) * 1.777778)} }
.quadro > *{
  position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .15s linear;
  border:0; display:block;
}
.quadro > .visivel{opacity:1}
.cartaz-inicial{opacity:1}
.cartaz img{width:100%; height:100%; object-fit:cover; display:block}

/* ---------- texto das cinco telas ---------- */
.textos{position:absolute; z-index:3; top:0; right:0; bottom:0; left:0; pointer-events:none; transition-property:none}
.virando .textos{visibility:hidden}   /* giro: até chegar a mídia da outra família (JS) */
.texto{
  position:absolute; pointer-events:auto;
  /* x/y continuam sendo as do mockup (px de 1920×1080), medidas a partir do canto da área segura
     escalada (--fx/--fy) — o texto cai no mesmo ponto da imagem com qualquer corte da tela cheia.
     O max/min é só a garantia de que a coluna não sai da janela: ≥ 24 px de margem. */
  left:calc(var(--fx) + var(--x) * var(--u));
  left:max(24px, calc(var(--fx) + var(--x) * var(--u)));
  top:calc(var(--fy) + var(--y) * var(--u));
  width:calc(var(--w) * var(--u));
  width:min(calc(var(--w) * var(--u)), calc(var(--largv) - 48px));
  padding:calc(40 * var(--u));
  border-radius:calc(20 * var(--u));
  opacity:0; transform:translateY(calc(16 * var(--u)));
  transition:opacity .36s ease, transform .36s ease;   /* fade de entrada curto: o texto tem de estar legivel bem antes de 400 ms */
}
.texto.ativo{opacity:1; transform:none}
.texto:not(.ativo){pointer-events:none}   /* botão invisível não recebe clique */
.tem-scrim{background:rgba(11,10,22,.55)}
.texto-escuro{--tx:#0b0a16; --tx2:rgba(11,10,22,.82); --eye:#43407a}
/* tela 3: texto escuro sobre um vidro claro, para ler de longe sobre o painel do sensor */
.tem-vidro{
  background:rgba(244,243,250,.68);
  box-shadow:0 calc(12 * var(--u)) calc(40 * var(--u)) rgba(11,10,22,.18);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
/* modo leve (30 fps ou aparelho fraco, classe posta pelo JS no <html>): o desfoque seria recalculado a
   cada quadro do vídeo; um vidro mais opaco lê igual sem custo */
@media (min-aspect-ratio:1/1){
  .leve .tem-vidro{-webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(244,243,250,.86)}
}

.texto p, .texto h1, .texto h2{margin:0; font-weight:400}
.eyebrow{
  font-size:calc(12.58 * var(--u)); font-weight:600; text-transform:uppercase;
  letter-spacing:calc(1.85 * var(--u)); line-height:1; color:var(--eye);
  margin-bottom:calc(15.94 * var(--u));
}
.titulo{
  font-size:calc(52 * var(--u)); font-weight:600; line-height:1.129;
  letter-spacing:calc(-0.4 * var(--u)); color:var(--tx);
  margin-bottom:calc(6.71 * var(--u));
}
.sub{
  font-size:calc(18.45 * var(--u)); line-height:1.4545; color:var(--tx2);
  margin-bottom:calc(18.45 * var(--u));
}
/* lista de vantagens do hero: quatro linhas curtas, marcador em círculo */
.lista{list-style:none; margin:0 0 calc(22 * var(--u)); padding:0; display:flex; flex-direction:column; gap:calc(8 * var(--u))}
.lista li{display:flex; align-items:flex-start; gap:calc(10 * var(--u)); font-size:calc(17 * var(--u)); line-height:1.35; color:var(--tx2)}
.lista b{font-weight:600; color:var(--tx)}
.ok{
  flex:0 0 auto; width:calc(19 * var(--u)); height:calc(19 * var(--u)); margin-top:calc(2 * var(--u));
  padding:calc(4 * var(--u)); border-radius:50%; background:rgba(163,161,219,.2);
  fill:none; stroke:var(--eye); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}
/* tela 2: a especificação do sensor só em símbolos, cada um num selo de borda lilás (30/09: eram três pílulas de
   texto; a leitura a cada 60 s saiu, o texto das outras duas ficou no aria-label e no title). Traço como o do .ok. */
.selos{display:flex; gap:calc(12 * var(--u))}
.selo{
  display:inline-flex; align-items:center; justify-content:center; width:calc(44 * var(--u)); height:calc(44 * var(--u));
  border:calc(1 * var(--u)) solid rgba(163,161,219,.55); border-radius:calc(10 * var(--u)); color:var(--tx);
}
.selo svg{width:calc(26 * var(--u)); height:calc(26 * var(--u)); fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.acao{display:flex; align-items:center; gap:calc(12 * var(--u)); line-height:0}
.botao{
  display:inline-flex; align-items:center; justify-content:center;
  height:calc(40.26 * var(--u)); padding:0 calc(18.45 * var(--u));
  border:0; border-radius:calc(10.06 * var(--u)); background:var(--roxo); color:#fff;
  font-family:inherit; font-size:calc(15.1 * var(--u)); font-weight:600; line-height:1; text-decoration:none;
  cursor:pointer; transition:background-color .2s;
}
.botao:hover{background:#7a77c0}
/* WhatsApp no verde do WhatsApp, ícone branco (30/09: pedido do chefe; o verde deixa o contato mais claro e chama
   atenção). Verde e sombra do site institucional (.btn-whatsapp / .whatsapp-float, --color-success).
   Traço 2,3 (1,7 some no verde na DPR 1); retrato em 1,7. */
.zap{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:calc(40.26 * var(--u)); height:calc(40.26 * var(--u));
  border-radius:calc(10.06 * var(--u)); background:#25d366; color:#fff; text-decoration:none;
  box-shadow:0 calc(4 * var(--u)) calc(15 * var(--u)) rgba(37,211,102,.3);
  transition:background-color .2s, transform .2s;
}
.zap svg{width:calc(22 * var(--u)); height:calc(22 * var(--u)); fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round}
.zap:hover{background:#1ebe5a; transform:translateY(-1px)}
.contatos{
  display:flex; flex-wrap:wrap; align-items:center; gap:calc(10 * var(--u));
  margin-top:calc(20 * var(--u)); font-size:calc(15 * var(--u)); color:var(--tx2);
}
.contatos a{color:var(--tx); text-decoration:none; border-bottom:1px solid rgba(244,243,250,.35); transition:border-color .2s}
.contatos a:hover{border-color:var(--tx)}
.botao:focus-visible, .zap:focus-visible, .topo a:focus-visible, .hamburger:focus-visible, .contatos a:focus-visible{outline:2px solid var(--eye); outline-offset:3px}

/* ---------- aviso de gesto junto das barras (30/09; era a .dica no centro do rodapé) ----------
   Irmão do nav (dentro da cápsula o Edge pintava errado), preso a ela: mesmo right e mesmo font-size (as @media de
   .pontos), logo abaixo dela (a cápsula tem 18,3 em + 2 px de altura, centrada) e com a largura dela (3,775 em + 2 px).
   Tudo em em. Nas telas 1–4 (na 5 não há próxima); o ícone mexe só na tela 1, 6 vezes. data-tela vem do JS. */
.gesto{
  position:fixed; z-index:6; top:50%; margin-top:calc(9.65em + 1px);
  right:20px; right:calc(1vw + 8px + env(safe-area-inset-right, 0px));
  width:calc(3.775em + 2px); padding:.6em .15em .55em; font-size:16px;
  display:flex; flex-direction:column; align-items:center;
  border-radius:.9em; background:rgba(11,10,22,.66); border:1px solid rgba(244,243,250,.2);
  color:rgba(244,243,250,.8); text-align:center; white-space:nowrap; pointer-events:none;
  transition:opacity .3s; animation:surge .8s ease .9s backwards;
}
.gesto-mouse{display:block; position:relative; width:1.1em; height:1.7em; margin-bottom:.45em; border:.125em solid rgba(244,243,250,.85); border-radius:.55em}
.gesto-mouse i{position:absolute; left:50%; top:.3em; width:.14em; height:.4em; margin-left:-.07em; border-radius:.07em; background:#b9b7f0; animation:roda 1.6s ease-in-out 1.7s 6}
.gesto-dedo{display:none; width:1.6em; height:1.6em; margin-bottom:.3em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; animation:sobe 1.6s ease-in-out 1.7s 6}
.gesto-txt{font-size:.75em; font-size:max(10.5px, .75em); line-height:1.2; white-space:normal}   /* piso: com a cápsula de 12 e 10,5 px o texto quebra ("ou / clique"), a caixa não passa dela */
.gesto-txt b{display:block; font-weight:600; color:#fff}
.gesto-txt-dedo{display:none}
[data-tela]:not([data-tela="1"]) .gesto-mouse i, [data-tela]:not([data-tela="1"]) .gesto-dedo{animation:none}
[data-tela="5"] .gesto{opacity:0}
@keyframes roda{0%{transform:translateY(0); opacity:1} 70%{transform:translateY(.5em); opacity:0} 100%{transform:translateY(0); opacity:0}}
@keyframes sobe{0%,100%{transform:translateY(.12em); opacity:.55} 50%{transform:translateY(-.12em); opacity:1}}
@keyframes surge{from{opacity:0} to{opacity:1}}

/* ---------- convite da tela 1 (30/09 madrugada, README §9): as três formas de avançar ----------
   Só na tela 1 e só até a 1ª navegação (o JS põe .navegou no <html>; de volta à 1, não volta). Sobreposto (fixed), não
   mexe em nada. Deitada e celular deitado: a mini-cápsula do gesto alargada para a esquerda (mesmo right, mesmo topo,
   as mesmas @media de font-size), que fica escondida enquanto ele está no ar e aparece no 1º gesto. Surge em 1 s, o
   ícone mexe 3 vezes; texto pelo tipo de entrada, como o .gesto. Sai na hora, sem fade nem surge
   (revisão, README §9). */
.convite{
  position:fixed; z-index:6; top:50%; margin-top:calc(9.65em + 1px);
  right:20px; right:calc(1vw + 8px + env(safe-area-inset-right, 0px));
  display:flex; flex-direction:column; align-items:center; padding:.6em .7em .65em; font-size:16px;
  border-radius:.9em; background:rgba(11,10,22,.8); border:1px solid rgba(163,161,219,.45); box-shadow:0 .5em 1.5em rgba(0,0,0,.3);
  color:rgba(244,243,250,.8); text-align:center; white-space:nowrap; pointer-events:none;
  animation:surge .6s ease 1s backwards;
}
.navegou .convite{opacity:0; visibility:hidden; animation:none}
html:not(.navegou) .gesto{opacity:0; visibility:hidden}
.convite-txt, .convite-mouse, .convite-dedo{font-size:13px; font-size:max(13px, .8125em)}
.convite-txt{line-height:1.3}
.convite-txt b, .convite-txt span{display:block}
.convite-txt b{font-weight:600; color:#fff}
.convite-mouse{display:block; position:relative; width:1.05em; height:1.6em; margin-bottom:.4em; border:.13em solid rgba(244,243,250,.9); border-radius:.55em}
.convite-mouse i{position:absolute; left:50%; top:.28em; width:.15em; height:.38em; margin-left:-.075em; border-radius:.075em; background:#b9b7f0; animation:roda 1.6s ease-in-out 1.6s 3}
.convite-dedo{display:none; width:1.55em; height:1.55em; margin-bottom:.3em; fill:none; stroke:#e2e0fb; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; animation:arrasta 1.6s ease-in-out 1.6s 3}
.convite-txt-dedo{display:none}
@keyframes arrasta{0%{transform:translateY(.3em); opacity:0} 25%{opacity:1} 75%{transform:translateY(-.25em); opacity:1} 100%{transform:translateY(-.3em); opacity:0}}
@media (hover:none) and (pointer:coarse){
  .gesto-mouse, .gesto-txt-mouse, .convite-mouse, .convite-txt-mouse{display:none}
  .gesto-dedo, .gesto-txt-dedo, .convite-dedo, .convite-txt-dedo{display:block}
}

/* ---------- navegação: cinco barras de progresso na lateral direita (30/09) ----------
   Cápsula escura (contraste também sobre o painel claro da tela 3) com um botão por tela: número + barra. As
   barras até a tela atual ficam cheias (.cheia, do JS); a que muda enche, ou esvazia na volta, em --t (a duração
   da transição, que o JS escreve no nav). O nome aparece à esquerda: o da atual sempre, todos ao passar o mouse e
   por 3 s na chegada (convite ao clique). Tamanho só pelo font-size do nav (tudo em em); só opacity e transform
   animam. Sem gap de flex (Safari 12). */
.pontos{
  position:fixed; z-index:6; top:50%; transform:translateY(-50%);
  right:20px; right:calc(1vw + 8px + env(safe-area-inset-right, 0px));
  display:flex; flex-direction:column; font-size:16px; padding:.4em .3em; border-radius:1em;
  background:rgba(11,10,22,.6); border:1px solid rgba(244,243,250,.2); box-shadow:0 .5em 1.5em rgba(0,0,0,.3);
  pointer-events:none;   /* a caixa do nav não pode roubar o swipe do palco; os botões, sim */
}
.ponto{
  -webkit-appearance:none; appearance:none; position:relative; cursor:pointer; pointer-events:auto;
  display:flex; align-items:center; justify-content:flex-end; height:3.5em; margin:0; padding:0 .55em;
  border:0; border-radius:.6em; background:transparent; color:var(--tx); font:inherit;
  transition:background-color .2s;
}
.ponto:hover{background:rgba(244,243,250,.1)}
.ponto:focus-visible{outline:2px solid var(--eye); outline-offset:1px}
.ponto-num{margin-right:.6em; font-size:.8125em; font-weight:600; line-height:1; letter-spacing:.04em; color:rgba(244,243,250,.7); transition:color .2s}
.ponto-barra{position:relative; display:block; overflow:hidden; width:.45em; height:2.5em; border-radius:.25em; background:rgba(244,243,250,.3); transition:transform .2s}
.ponto-barra::after{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0; border-radius:inherit; background:var(--eye);
  transform:scaleY(0); transform-origin:50% 0; transition:transform var(--t,.25s) linear;
}
.cheia .ponto-barra::after{transform:none}
.ponto:hover .ponto-num, .ponto[aria-current] .ponto-num{color:var(--tx)}
.ponto:hover .ponto-barra{background:rgba(244,243,250,.5); transform:scaleX(1.4)}
.ponto[aria-current] .ponto-barra{transform:scaleX(1.4); box-shadow:0 0 .8em rgba(163,161,219,.85)}
.ponto[aria-current] .ponto-barra::after{background:#fff}
.ponto-nome{
  position:absolute; top:50%; right:100%; margin-right:.7em; transform:translate(.5em,-50%);
  padding:.5em .8em; border-radius:.55em; white-space:nowrap;
  font-size:.8125em; font-weight:600; line-height:1; letter-spacing:.01em; color:var(--tx);
  background:rgba(11,10,22,.8); border:1px solid rgba(244,243,250,.14);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  animation:apresenta 3.4s ease 1.2s;   /* sem 0 %/100 %: parte e volta do valor de cada um (o da atual fica aceso) */
}
.ponto-nome::after{content:""; position:absolute; top:0; bottom:0; left:100%; width:1.6em}   /* ponte até a barra */
.ponto[aria-current] .ponto-nome{opacity:1; transform:translate(0,-50%)}
.ponto:focus-visible .ponto-nome{opacity:1; transform:translate(0,-50%)}   /* à parte: seletor que o Safari < 15.4 não conhece derrubaria a regra toda */
@media (hover:hover){ .pontos:hover .ponto-nome{opacity:1; transform:translate(0,-50%); pointer-events:auto} }
@keyframes apresenta{12%,82%{opacity:1; transform:translate(0,-50%)}}
/* gesto com a transição ainda baixando: a barra da tela de destino pulsa (até ESPERA_TRANS no JS) */
.ponto.espera{animation:pulsa .6s ease-in-out infinite alternate}
@keyframes pulsa{to{opacity:.3}}
/* a cápsula tem 18,3 em de altura: menor em janela baixa, maior em tela grande */
@media (max-height:820px){ .pontos, .gesto, .convite{font-size:14px} }
@media (max-height:560px){ .pontos, .gesto, .convite{font-size:12px} }
@media (max-height:400px){ .pontos, .gesto, .convite{font-size:10.5px} }
@media (min-width:1700px) and (min-height:1050px){ .pontos, .gesto, .convite{font-size:18px} }
/* convite na janela deitada baixa: ícone ao lado do texto (em coluna passava do pé); só o que o vertical também
   escreve; < 640 px, só o texto (README §9) */
@media (max-height:360px){
  .convite{flex-direction:row; padding:4px 10px 4px 8px; border-radius:12px; text-align:left}
  .convite-txt{line-height:1.25}
  .convite-mouse, .convite-dedo{margin:0 .5em 0 0}
}
@media (max-height:360px) and (max-width:639px) and (min-aspect-ratio:13/10){ .convite{padding:4px 7px} .convite-mouse, .convite-dedo{display:none} }

/* ---------- popup de orçamento (os campos do contato do site) ----------
   Fixo e centrado por conta própria: vale com showModal e sem ele (Safari < 15.4, onde <dialog> é
   elemento desconhecido e o JS abre com o atributo open + o .orc-veu por baixo). */
.orc{
  display:none; position:fixed; z-index:21; top:50%; left:50%; right:auto; bottom:auto; margin:0;
  transform:translate(-50%,-50%);
  width:calc(100% - 32px); max-width:560px; max-height:calc(100% - 32px); padding:0; overflow:auto;
  border:1px solid rgba(244,243,250,.14); border-radius:20px;
  background:rgba(17,16,34,.98); color:var(--tx); box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.orc[open]{display:block}
.orc::backdrop{background:rgba(5,4,12,.72)}
.orc-veu{position:fixed; z-index:20; top:0; right:0; bottom:0; left:0; background:rgba(5,4,12,.72)}
.orc-form{position:relative; display:flex; flex-direction:column; gap:14px; padding:32px 28px 28px; padding:32px clamp(20px,4vw,36px) 28px}
.orc-form .eyebrow{font-size:12px; letter-spacing:.14em; margin-bottom:0}
.orc-titulo{margin:0; font-size:26px; font-size:clamp(22px,3vw,28px); font-weight:600; line-height:1.15; letter-spacing:-.01em}
.orc-sub{margin:0; color:var(--tx2); font-size:15px; line-height:1.4}
.orc-fechar{
  position:absolute; top:12px; right:12px; width:40px; height:40px; border:0; border-radius:50%;
  background:transparent; color:var(--tx2); font-size:26px; line-height:1; cursor:pointer;
}
.orc-fechar:hover{background:rgba(244,243,250,.1); color:var(--tx)}
.orc-campos{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-gap:12px 14px; gap:12px 14px; margin-top:6px}
.orc-campos label{display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--eye)}
.orc-largo{grid-column:1 / -1}
.orc-campos input, .orc-campos textarea{
  width:100%; font:400 15px/1.35 var(--fnt); color:var(--tx);
  background:rgba(244,243,250,.06); border:1px solid rgba(244,243,250,.16); border-radius:10px;
  padding:11px 12px; outline:0; transition:border-color .2s, background-color .2s;
}
.orc-campos input::placeholder, .orc-campos textarea::placeholder{color:rgba(244,243,250,.38)}
.orc-campos input:focus, .orc-campos textarea:focus{border-color:var(--eye); background:rgba(244,243,250,.09)}
.orc-campos textarea{resize:vertical; min-height:84px}
.orc-erro{margin:0; color:#ffb3b3; font-size:14px}
.orc-acoes{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin:6px 0 0}
.orc-acoes .botao{height:44px; padding:0 22px; border-radius:10px; font-size:15px}
.orc-email{color:var(--tx2); font-size:14px; text-decoration:underline; text-underline-offset:3px}
.orc-email:hover{color:var(--tx)}
@media (max-width:560px){ .orc-campos{grid-template-columns:repeat(1, minmax(0, 1fr))} }

/* ---------- diagnóstico (?diag=1): variante, fps, quadros perdidos, downloads ---------- */
.diag{
  position:fixed; z-index:30; left:8px; top:64px; max-width:calc(100% - 16px); margin:0; padding:6px 8px;
  border-radius:6px; background:rgba(0,0,0,.74); color:#e9e8f4; pointer-events:none;
  font:11px/1.35 ui-monospace,Menlo,Consolas,monospace; white-space:pre-wrap;
}

/* ---------- Safari < 14.1 (iPhone 6, iOS 12): flex sem gap → margem nos filhos ----------
   inset chegou com o gap de flex no Safari (14.1) e poucas versões depois no Chrome (87 × 84) e no Firefox
   (66 × 63): onde ele falta, o gap também pode faltar. (aspect-ratio não serve: Safari 14.1–14.8, Chrome 84–87 e
   Firefox 63–88 têm o gap sem ele, e somariam gap + margem.) */
@supports not (inset:0){
  .marca-simbolo{margin-right:10px}
  .menu a + a{margin-left:24px}
  .menu a.login{margin-left:32px}
  .hamburger span + span{margin-top:5px}
  .topo.aberto .menu a + a{margin:28px 0 0}
  .topo.aberto .menu a.login{margin:36px 0 0}
  .lista li + li{margin-top:calc(8 * var(--u))}
  .ok{margin-right:calc(10 * var(--u))}
  .selo + .selo{margin-left:calc(12 * var(--u))}
  .acao > * + *{margin-left:calc(12 * var(--u))}
  .contatos > * + *{margin-left:calc(10 * var(--u))}
  .orc-form > * + *{margin-top:14px}
  .orc-campos input, .orc-campos textarea{margin-top:6px}
  .orc-acoes > * + *{margin-left:16px}
}

/* ---------- peças da tela deitada (30/09): fora dela somem ou ficam inline, e o texto lê como antes ---------- */
.so-p, .vivo, .lista .ic, .zap-rot, .medidas .selo, .nota .ic, .it .ic, .cn svg, .l-ic, .l-rot, .l-seta, .zap .l-txt{display:none}

/* ---------- telas VERTICAIS e QUADRADAS (30/09 noite, README §9): tudo abaixo de 1,3 de proporção ----------
   Celular e tablet em pé, monitor em pé e janela quase quadrada: vídeo em cima e, nos 45 % de baixo da janela (eram 35 %
   até 30/09 madrugada), os textos da tela deitada (título, itens com ícone, grade, colunas, contato) sobre o degradê, sem
   caixas. UMA decisão para layout e master: o layout() do JS reescreve pelo CSSOM a condição deste @media e a do portão da
   paisagem com a família do master na tela (mestre(), histerese 1,26/1,34). Esta condição (abaixo de 1,3) é a reserva
   do 1º paint, igual à do mestre() sem histórico. O que some quando não cabe: .ap1–.ap5 no fim do bloco. */
@media not all and (min-aspect-ratio:13/10){
  /* 1º paint (antes do JS), a conta do JS: a loja + o painel (x 360–1026, y 1108–1462 do master de 1080) na largura
     menos a margem das barras (15 + 1,39 × a fonte da cápsula, --pc: 14 px/em, 18 no tablet, menos se a área de vídeo
     não comporta os 18,3 em dela), centrados na área de vídeo (cabeçalho de 58 px, 65 no menu largo, até 55 %) e acima
     dos 60 px do aviso de gesto; --pw = largura do master na tela. --av = 1 % da altura da
     janela (innerHeight, do JS): a letra acompanha a área de texto, não o vh (no celular o vh conta a barra do navegador
     escondida e a página, que não rola, fica com ela à mostra) */
  :root{--ht:58px; --av:calc(var(--altv) / 100)}
  :root{--pc:14px; --pc:max(6px, min(14px, calc((var(--altv) * .55 - var(--ht) - 24px) / 18.3))); --mg:calc(30px + 2.78 * var(--pc)); --pw:calc((var(--largv) - var(--mg)) * 1.621622); --pw:min(calc((var(--largv) - var(--mg)) * 1.621622), calc((var(--altv) * .55 - 72px - var(--ht)) * 3.050847))}
  .quadro{
    left:calc(var(--largv) / 2 - var(--pw) * .641667); width:var(--pw); height:calc(var(--pw) * 2.4);
    top:calc(var(--altv) * .275 + var(--ht) / 2 - var(--pw) * 1.189815); top:calc(min(var(--altv) * .275 + var(--ht) / 2, var(--altv) * .55 - 60px - var(--pw) * .163889) - var(--pw) * 1.189815);
  }
  @media (min-width:600px){ :root{--pc:18px; --pc:max(6px, min(18px, calc((var(--altv) * .55 - var(--ht) - 24px) / 18.3)))} }
  @media (min-width:1024px){ :root{--ht:65px} }
  .quadro.anima{transition-property:transform}
  /* a base do master some no fundo (sem emenda onde ele acaba antes da janela); anda junto com o transform */
  .quadro::after{content:""; position:absolute; z-index:4; left:0; right:0; bottom:0; height:10%; background:linear-gradient(rgba(11,10,22,0), #0b0a16)}
  /* telas 1 e 5: com a loja no centro a borda direita do master entra na janela (JS: .borda; na quadrada baixa, a
     esquerda também); os 5 % dele de cada ponta, fora da loja, somem no fundo, liso aqui (os brilhos do body faziam
     degrau), no tempo do transform: acende logo no começo (0,8 em 20 % do tempo) e apaga só no fim, na frente da faixa,
     para a borda do vídeo aceso (zoom-final) não sair seca */
  body{background:var(--fundo)}
  .quadro::before{content:""; position:absolute; z-index:4; top:0; right:0; bottom:0; left:0; background:linear-gradient(90deg, #0b0a16, rgba(11,10,22,0) 5%, rgba(11,10,22,0) 95%, #0b0a16); opacity:0; transition:inherit; transition-property:opacity; transition-timing-function:cubic-bezier(.8,0,1,.2)}
  .quadro.borda::before{opacity:1; transition-timing-function:cubic-bezier(0,.8,.2,1)}

  /* a área de texto: os 45 % de baixo, fixa (não anda com o quadro); o degradê começa 44 px acima dela */
  .textos{top:55%}
  .textos::before{content:""; position:absolute; z-index:-1; left:0; right:0; top:-44px; bottom:0; background:linear-gradient(rgba(11,10,22,0) 0, rgba(11,10,22,.9) 76px)}
  /* o texto COMEÇA um respiro abaixo dos 55 % (2 % da altura, 14–40 px) e desce; a tela 1 (sem a linha pequena)
     reserva a altura dela (.reserva): o título na mesma altura nas 5 telas. Embaixo, 38 px (4,4 % da altura) + a área
     segura. JS (apertar): --g abre ou aperta os vãos (0,6–2,2×), --f a letra do corpo (1–1,2×) */
  .texto{
    left:0; right:0; top:0; bottom:38px; bottom:calc(38px + env(safe-area-inset-bottom)); bottom:calc(max(38px, 4.4 * var(--av)) + env(safe-area-inset-bottom));
    width:auto; max-width:920px; margin:0 auto;
    padding:17px 18px 0; padding:max(14px, min(2 * var(--av), 40px)) max(16px, min(5vw, 48px)) 0;
    display:flex; flex-direction:column; border-radius:0; border:0; background:none; box-shadow:none;
    pointer-events:none; transform:translateY(8px);
    --tx:#f4f3fa; --tx2:rgba(244,243,250,.8); --eye:#a3a1db; --f:1; --fe:max(10px, min(2.75vw, 1.6 * var(--av), 14px));
  }
  .reserva{padding-top:38px; padding-top:calc(max(14px, min(2 * var(--av), 40px)) + 2 * var(--fe))}
  .texto > *{flex-shrink:0}
  .texto.ativo a, .texto.ativo button{pointer-events:auto}
  .tem-vidro, .leve .tem-vidro{background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none}
  .so-r, .itens .vsep, .t1 .ok, .t1 .sub br, .t5 .sub br, .medidas br, .alertas br, .itens br, .t2 .selos, .contatos > span, .zap .l-val, .botao .l-rot{display:none}
  .so-p{display:inline}
  .gz-t::first-letter, .it-t::first-letter, .it-s::first-letter, .gt::first-letter, .cn-t::first-letter{text-transform:uppercase}

  .texto .eyebrow{
    display:flex; align-items:flex-start; margin:0 0 .75em; white-space:nowrap; font-weight:600; line-height:1.25; letter-spacing:.1em; color:var(--eye);
    font-size:10.5px; font-size:var(--fe);
  }
  .texto .titulo{
    margin:0 0 calc(.5em * var(--g, 1)); font-weight:600; line-height:1.12; letter-spacing:-.015em; color:var(--tx);
    font-size:22px; font-size:max(19px, min(6.3vw, 3.6 * var(--av), 46px));
  }
  .t1 .sub, .t5 .sub{margin:0 0 calc(.6em + .4em * var(--g, 1)); line-height:1.45; color:var(--tx2); font-size:14px; font-size:max(13px, var(--f) * min(3.6vw, 2.15 * var(--av), 20px))}

  /* tela 1: o subtítulo (o 1º a sair quando falta altura), as 4 vantagens em linhas com o ícone da tela deitada (título
     em branco, o resto em cinza), os botões */
  .lista{display:block; flex-direction:row; gap:0; margin:0 0 calc(.65em + .5em * var(--g, 1)); font-size:13px; font-size:max(12.5px, var(--f) * min(3.35vw, 2 * var(--av), 19px))}
  .lista li{display:flex; align-items:flex-start; gap:0; margin:0; font-size:1em; line-height:1.35; color:var(--tx2)}
  .lista li + li{margin-top:calc(.25em + .2em * var(--g, 1))}
  .lista .ic{
    display:block; flex:0 0 auto; width:1.4em; height:1.4em; margin:-.03em .6em 0 0;
    fill:none; stroke:#b9b7f0; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  }
  .vt, .lista b{font-weight:600; color:var(--tx)}
  .acao{display:flex; align-items:center; gap:0; margin:0; line-height:0}
  .acao > * + *{margin-left:10px}
  .botao, .zap{
    height:42px; height:max(38px, min(11vw, 6.2 * var(--av), 54px)); border-radius:10px; white-space:nowrap;
    font-size:14px; font-size:max(13px, min(3.7vw, 2.15 * var(--av), 19px)); font-weight:600; line-height:1;
  }
  .botao{padding:0 1.1em; box-shadow:0 6px 18px rgba(107,104,175,.3)}
  .zap{width:auto; padding:0 .95em 0 .75em; box-shadow:0 4px 15px rgba(37,211,102,.3)}
  .zap svg{width:1.4em; height:1.4em; stroke-width:2}
  .zap-rot{display:inline; margin-left:.5em}

  /* tela 2: as 4 grandezas com o símbolo (os dois selos de 30/09 são os de temperatura e porta), a IA à parte */
  .medidas{display:flex; justify-content:space-between; flex-wrap:wrap; margin:.1em 0 0; font-size:0; line-height:0}
  .gz{display:flex; flex-direction:column; align-items:center; flex:0 0 auto; text-align:center}
  .medidas .selo{
    display:flex; margin:0 0 .5em; border:1px solid rgba(163,161,219,.5); background:rgba(163,161,219,.08); color:var(--tx);
    width:40px; height:40px; width:max(36px, var(--f) * min(12.5vw, 6.5 * var(--av), 60px)); height:max(36px, var(--f) * min(12.5vw, 6.5 * var(--av), 60px)); border-radius:12px;
  }
  .medidas .selo svg{width:55%; height:55%; stroke-width:1.6}
  .gz-t{display:block; font-weight:600; line-height:1.25; color:var(--tx); font-size:13.5px; font-size:max(12px, var(--f) * min(3.6vw, 2 * var(--av), 18px))}
  .gz:nth-child(4) .gz-t{width:-webkit-min-content; width:min-content}
  .nota{
    display:flex; align-items:flex-start; flex:0 0 100%; margin-top:calc(.5em + .4em * var(--g, 1)); padding-top:calc(.45em + .35em * var(--g, 1)); border-top:1px solid rgba(244,243,250,.13);
    line-height:1.4; color:var(--tx2); font-size:13.5px; font-size:max(12.5px, var(--f) * min(3.6vw, 2 * var(--av), 19px));
  }
  .nota .ic, .it .ic, .painel .l-ic{display:block; flex:0 0 auto; fill:none; stroke:#b9b7f0; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
  .nota .ic{width:1.25em; height:1.25em; margin:.08em .55em 0 0}

  /* tela 3: bateria e comunicação própria, cada uma com o ícone num quadrado lilás claro */
  .itens{display:flex; margin:.1em 0 0; font-size:0; line-height:0}
  .it{display:grid; grid-template-columns:auto minmax(0, 1fr); grid-template-rows:auto 1fr; align-items:start; flex:1 1 0; min-width:0; font-size:15px; font-size:max(13px, var(--f) * min(4.2vw, 2.3 * var(--av), 21px))}
  .it + .it{margin-left:1.1em}
  .it .ic{grid-row:1 / span 2; width:2.4em; height:2.4em; padding:.5em; margin-right:.7em; border-radius:.7em; background:rgba(163,161,219,.16); stroke:#e2e0fb}
  .it-t, .it-s{grid-column:2}
  .it-t{display:block; font-size:1.04em; font-weight:600; line-height:1.25; color:var(--tx)}
  .it-s{display:block; margin-top:.2em; font-size:.96em; line-height:1.4; color:var(--tx2)}

  /* tela 4: "Quando" (os três gatilhos com o ponto vermelho) | "O aviso chega por" (os canais) */
  .alertas{display:flex; margin:.1em 0 0; font-size:0; line-height:0}
  .col{display:block; flex:1 1 auto}
  .col + .col{flex:0 0 auto; margin-left:12px; padding-left:12px; border-left:1px solid rgba(244,243,250,.14)}
  .t4 .rotulo{
    display:block; margin:0 0 .75em; white-space:nowrap; font-weight:600; line-height:1.3; letter-spacing:.1em; text-transform:uppercase; color:var(--eye);
    font-size:10.5px; font-size:var(--fe);
  }
  .gt, .cn{line-height:1.3; color:var(--tx); font-size:13px; font-size:max(12px, var(--f) * min(3.45vw, 2 * var(--av), 19px))}
  /* gatilhos na altura das linhas dos canais (o ícone de 1,6 em manda): as duas colunas ficam alinhadas linha a linha;
     bloco, não flex (o ::first-letter da maiúscula não vale em flex). Numa linha só; sem caber na largura (320–336 px),
     .estreito (JS): quebra */
  .gt{display:block; position:relative; padding:.15em 0 .15em 1.15em; white-space:nowrap}
  .estreito .gt{white-space:normal}
  .estreito .col{min-width:0}
  .gt::before{content:""; position:absolute; left:0; top:.8em; width:.45em; height:.45em; margin-top:-.225em; border-radius:50%; background:#ff6b6b; box-shadow:0 0 0 .2em rgba(255,107,107,.2)}
  .gt ~ .gt{margin-top:calc(.2em + .2em * var(--g, 1))}
  .cn{display:flex; align-items:center}
  .cn + .cn{margin-top:calc(.2em + .2em * var(--g, 1))}
  .cn svg{
    display:block; flex:0 0 auto; width:1.6em; height:1.6em; padding:.32em; margin-right:.55em; border-radius:50%;
    background:rgba(163,161,219,.2); fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  }
  .cn-zap svg{background:#25d366; stroke-width:2.1}
  .cn-t{display:block}
  /* telas 3 e 4 com folga (.solto, JS): um item por linha; os canais numa linha, embaixo dos gatilhos */
  .solto .itens, .solto .alertas{display:block}
  .solto .it + .it{margin:calc(.45em + .35em * var(--g, 1)) 0 0}
  .solto .gt:last-of-type{margin-bottom:calc(.45em + .35em * var(--g, 1))}
  .solto .col + .col{margin:0; padding:0; border:0; white-space:nowrap}
  .solto .cn{display:inline-flex; margin:0}
  .solto .cn + .cn{margin-left:1.3em}

  /* tela 5: os dois botões (orçamento em roxo, WhatsApp verde escrito) e, embaixo, e-mail e telefone com ícone */
  .painel{margin:.1em 0 0}
  .painel .acao{margin-bottom:calc(.6em + .4em * var(--g, 1))}
  .painel .l-txt{display:inline}
  .painel .zap .l-txt{display:inline; margin-left:.5em}
  .painel .zap .l-rot{display:inline; font:inherit; letter-spacing:0; text-transform:none; color:inherit}
  .painel .botao .l-ic{width:1.3em; height:1.3em; margin-right:.5em; stroke:#fff}
  .painel .zap > svg:first-child{width:1.4em; height:1.4em}
  .contatos{display:flex; flex-wrap:wrap; gap:0; margin:0; font-size:13.5px; font-size:max(12.5px, var(--f) * min(3.6vw, 2 * var(--av), 19px)); line-height:1.3}
  .contatos a{display:flex; align-items:center; margin:0 1.4em 0 0; border:0; color:var(--tx); text-decoration:none}
  .contatos a:hover{text-decoration:underline}
  .painel .contatos .l-ic{width:1.35em; height:1.35em; margin-right:.5em}

  /* barras na lateral direita, sobre o vídeo: --pt e --pf (JS) centram a cápsula na área de vídeo (do cabeçalho aos
     55 %), o mesmo lugar em todas as telas; sem o nome. Nas telas 1 e 5 (a loja inteira no meio) e na 4 (o celular da
     cena) ficam só as barras: a loja vai até perto delas e o fundo e os números não cobrem nada */
  .pontos{
    top:calc(var(--altv) * .275 + var(--ht) / 2 - 1px - 9.15em); top:var(--pt, calc(var(--altv) * .275 + var(--ht) / 2 - 1px - 9.15em)); transform:none; right:8px;
    font-size:14px; font-size:var(--pf, var(--pc)); transition:background-color .3s, border-color .3s, box-shadow .3s;
  }
  .ponto-nome{display:none}
  .ponto-num{transition:color .2s, opacity .3s}
  html:not([data-tela]) .pontos, [data-tela="1"] .pontos, [data-tela="4"] .pontos, [data-tela="5"] .pontos{background:transparent; border-color:transparent; box-shadow:none}
  html:not([data-tela]) .ponto-num, [data-tela="1"] .ponto-num, [data-tela="4"] .ponto-num, [data-tela="5"] .ponto-num{opacity:0}
  /* aviso de gesto: o convite da tela 1 no lugar da pílula "Arraste ou toque" (30/09 madrugada; ela aparecia só na tela
     1), no centro da faixa entre a loja e o texto (o JS reserva GESTO_V px embaixo da loja): ícone e 2 linhas, 1 na tela
     larga */
  .gesto{display:none}
  .convite{
    top:calc(var(--altv) * .55 - 25px); left:50%; right:auto; margin:0; transform:translate(-50%,-50%);
    flex-direction:row; padding:6.5px 15px 6.5px 12px; border-radius:14px; font-size:13px; text-align:left;
  }
  .convite-txt, .convite-mouse, .convite-dedo{font-size:1em}
  .convite-txt{line-height:1.25}
  .convite-mouse, .convite-dedo{margin:0 .7em 0 0}
  .aviso{padding:6px 16px; padding-bottom:6px; padding-bottom:max(6px, env(safe-area-inset-bottom)); font-size:10.5px}

  /* janela larga (tablet em pé, quase quadrada, monitor em pé): o texto cresce pela largura até o teto da altura, o
     título da tela 1 em 2 linhas, grade e colunas juntas à esquerda (não se espalham pela largura) */
  @media (min-width:600px){
    .texto .titulo{font-size:36px; font-size:min(5.4vw, 4.2 * var(--av), 52px)}
    .texto{--fe:min(1.65vw, 1.6 * var(--av), 17px)}
    .texto .eyebrow, .t4 .rotulo{font-size:12px; font-size:var(--fe)}
    .t1 .sub, .t5 .sub{font-size:18px; font-size:calc(var(--f) * min(2.5vw, 2.35 * var(--av), 27px))}
    .lista, .gz-t, .nota, .contatos{font-size:17px; font-size:calc(var(--f) * min(2.3vw, 2.2 * var(--av), 26px))}
    .it{font-size:20px; font-size:calc(var(--f) * min(3vw, 2.6 * var(--av), 30px))}
    .gt, .cn{font-size:18px; font-size:calc(var(--f) * min(2.6vw, 2.3 * var(--av), 28px))}
    .botao, .zap{height:46px; height:max(44px, min(6.4vw, 6.4 * var(--av), 64px)); font-size:16px; font-size:min(2.4vw, 2.25 * var(--av), 25px)}
    .acao > * + *{margin-left:14px}
    .t1 .titulo br:first-child{display:none}
    .medidas{max-width:640px}
    .medidas .selo{width:56px; height:56px; width:max(44px, var(--f) * min(8.5vw, 6.6 * var(--av), 84px)); height:max(44px, var(--f) * min(8.5vw, 6.6 * var(--av), 84px)); border-radius:14px}
    .col{flex:0 1 auto}
    .col + .col{margin-left:32px; padding-left:32px}
    .itens{max-width:760px}
    .convite{top:calc(var(--altv) * .55 - 26px); font-size:14px; font-size:max(14px, min(1.7vw, 1.4 * var(--av), 17px)); padding:.5em 1.1em .5em .85em; border-radius:2em}
    .convite-txt b, .convite-txt span{display:inline}
  }
  /* monitor em pé: as vantagens em 2 × 2 (título e texto um sobre o outro, o ícone ao lado, como os cartões da tela
     deitada, sem caixa) */
  @media (min-width:1060px) and (min-height:1500px){
    .lista{display:flex; flex-wrap:wrap}
    .lista li{display:block; position:relative; flex:0 0 50%; min-width:0; padding:0 1.2em 0 2.3em}
    .lista li + li{margin:0}
    .lista li:nth-child(n+3){margin-top:calc(.5em + .4em * var(--g, 1))}
    .lista .ic{position:absolute; left:0; top:.05em; margin:0; width:1.5em; height:1.5em}
    .lista li > span, .vt, .vs{display:block}
    .lista .vsep{display:none}
    .vt{margin-bottom:.25em}
    .vs::first-letter{text-transform:uppercase}
  }

  /* o que não cabe: o secundário sai, do menos ao mais importante, só no bloco que não coube (README §9). O JS (apertar)
     põe .ap1–.ap5 no .texto: todo bloco parte do 0 (tudo à mostra) e sobe até caber na altura e nada passar da largura.
     Antes do JS o texto não aparece */
  .ap2 .nota{margin-top:calc(.3em + .25em * var(--g, 1)); padding-top:0; border:0}
  .ap2 .lista{display:flex; flex-wrap:wrap}
  .ap2 .lista li{flex:0 0 50%}
  .ap2 .lista li + li{margin:0}
  .ap2 .lista li:nth-child(n+3){margin-top:calc(.3em + .2em * var(--g, 1))}
  .ap5 .gt ~ .gt, .ap5 .cn + .cn{margin-top:.1em}
  .ap1.t1 .sub, .ap2.t2 .eyebrow, .ap2.t5 .sub, .ap2 .vs, .ap2 .lista .vsep, .ap3.t4 .eyebrow, .ap4 .nota, .ap4 .rotulo, .ap4.t3 .eyebrow,
  .ap4.t5 .eyebrow, .ap4 .lista li:nth-child(n+3), .ap5 .lista, .ap5 .it-s, .ap5 .contatos{display:none}
}

/* ---------- tela DEITADA retangular (30/09, README §9): ≥ 13:10, qualquer altura ----------
   Vertical e quadrada (abaixo de 1,3) não passam por aqui; abaixo de 500 px de altura (celular deitado, janela baixa) a
   variante compacta, mais abaixo, ajusta (30/09 noite: até então o celular deitado lia o layout antigo). Por tela, a
   proposta escolhida: 1 B, 2 A, 3 B, 4 A, 5 C. Px do mockup 1920×1080 × --u a partir de --fx/--fy; pisos de leitura em
   px com o calc() puro antes. Medido nos cartazes 1440: painel flutuante x 633–917 y 205–368, aresta da loja
   (776,546)–(1562,836), sensor da tela 3 x ≥ 785, TV da tela 4 até y 495, fumaça x ≥ 735, celular x ≥ 1390, sensor
   aberto da tela 5 x ≥ 785. */
@media (min-aspect-ratio:13/10){
  .so-r{display:none}
  .so-p{display:inline}
  .aviso{left:auto; right:0; text-align:right; padding-right:calc(1vw + 8px)}   /* o centro do rodapé é da faixa da tela 1 */
  .texto .titulo{font-weight:600}   /* .texto h1/h2 (0,1,1) força 400 no resto */
  .texto .eyebrow{font-size:calc(13 * var(--u)); font-size:max(11px, calc(13 * var(--u))); letter-spacing:.15em; line-height:1.3; margin-bottom:calc(18 * var(--u))}
  .vsep, .t1 .ok, .t1 .sub br, .t5 .sub br, .medidas br, .alertas br, .itens br, .t2 .selos, .painel .contatos > span{display:none}
  .vs::first-letter, .gz-t::first-letter, .it-t::first-letter, .it-s::first-letter, .gt::first-letter, .cn-t::first-letter{text-transform:uppercase}

  /* ---- tela 1: a seção é a área segura; coluna à esquerda (o selo "ao vivo" numa linha, 20 px acima do painel) e as
     vantagens em cartões numa faixa ancorada na base da área segura ---- */
  .texto.t1{
    left:var(--fx); top:var(--fy); width:calc(1920 * var(--u)); height:calc(1080 * var(--u)); height:min(calc(1080 * var(--u)), calc(var(--altv) - var(--fy)));
    padding:calc(197 * var(--u) - 34.6px) 0 0 calc(120 * var(--u));
    padding-top:calc(197 * var(--u) - 22px - 1.2 * max(10.5px, calc(12.5 * var(--u))));
    border-radius:0; pointer-events:none;
  }
  .texto.t1.ativo > *{pointer-events:auto}
  .t1 .eyebrow, .t3 .eyebrow{
    display:flex; align-items:center; width:-webkit-max-content; width:max-content; white-space:nowrap;
    padding:calc(4 * var(--u)) calc(15 * var(--u)) calc(4 * var(--u)) calc(12 * var(--u)); margin-bottom:calc(18 * var(--u));
    border-radius:calc(15 * var(--u)); background:rgba(107,104,175,.2); border:1px solid rgba(163,161,219,.34);
    font-size:calc(12.5 * var(--u)); font-size:max(10.5px, calc(12.5 * var(--u))); line-height:1.2;
    letter-spacing:calc(1.1 * var(--u)); letter-spacing:max(.7px, calc(1.1 * var(--u))); color:#dedcf8;
  }
  .t3 .eyebrow{padding-left:calc(15 * var(--u))}
  .vivo{
    display:block; flex:0 0 auto; width:calc(8 * var(--u)); height:calc(8 * var(--u)); min-width:6px; min-height:6px;
    margin-right:calc(10 * var(--u)); border-radius:50%; background:#5fe3a1; box-shadow:0 0 0 3px rgba(95,227,161,.18);
  }
  .t1 .titulo{font-size:calc(58 * var(--u)); line-height:1.06; letter-spacing:calc(-1.2 * var(--u)); margin-bottom:calc(20 * var(--u))}
  .t1 .sub, .t5 .sub{
    max-width:calc(470 * var(--u)); margin-bottom:calc(30 * var(--u)); color:var(--tx2);
    font-size:calc(19.5 * var(--u)); font-size:max(13.5px, calc(19.5 * var(--u))); line-height:1.5;
  }
  .t1 .botao, .t1 .zap{
    height:calc(52 * var(--u)); height:max(40px, calc(52 * var(--u))); border-radius:calc(12 * var(--u)); white-space:nowrap;
    font-size:calc(16.5 * var(--u)); font-size:max(13.5px, calc(16.5 * var(--u))); font-weight:600; line-height:1;
  }
  .t1 .botao{padding:0 calc(26 * var(--u)); box-shadow:0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(107,104,175,.35)}
  .t1 .zap{width:auto; padding:0 calc(20 * var(--u)) 0 calc(16 * var(--u))}
  .t1 .zap svg{width:calc(22 * var(--u)); height:calc(22 * var(--u)); min-width:17px; min-height:17px}
  .zap-rot{display:inline; margin-left:calc(10 * var(--u))}
  .t1 .lista{
    position:absolute; left:calc(120 * var(--u)); bottom:calc(32 * var(--u)); width:calc(1280 * var(--u)); margin:0;
    display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); grid-gap:calc(18 * var(--u)); gap:calc(18 * var(--u));
  }
  .t1 .lista li{
    position:relative; display:flex; align-items:flex-start; gap:0; margin:0; padding:calc(22 * var(--u)) calc(20 * var(--u));
    border-radius:calc(18 * var(--u)); background:rgba(16,15,34,.84); border:1px solid rgba(163,161,219,.26);
    box-shadow:0 calc(10 * var(--u)) calc(28 * var(--u)) rgba(5,4,12,.28);
  }
  .t1 .lista li::before, .texto.t3::before{content:""; position:absolute; top:-1px; height:calc(3 * var(--u)); min-height:3px; border-radius:0 0 3px 3px; background:#b9b7f0}
  .t1 .lista li::before{left:calc(20 * var(--u)); width:calc(40 * var(--u))}
  .t1 .lista .ic, .it .ic{
    display:block; flex:0 0 auto; background:rgba(163,161,219,.22);
    fill:none; stroke:#e2e0fb; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  }
  .t1 .lista .ic{width:calc(50 * var(--u)); height:calc(50 * var(--u)); min-width:30px; min-height:30px; padding:calc(12 * var(--u)); margin-right:calc(16 * var(--u)); border-radius:calc(13 * var(--u))}
  .t1 .lista li > span{display:block; min-width:0}
  .vt{display:block; margin:calc(2 * var(--u)) 0 calc(5 * var(--u)); font-size:calc(21 * var(--u)); font-size:max(14px, calc(21 * var(--u))); font-weight:600; line-height:1.22; color:var(--tx)}
  .vs{display:block; font-size:calc(16.5 * var(--u)); font-size:max(12.5px, calc(16.5 * var(--u))); line-height:1.4}

  /* ---- telas 2 e 4: cartão a 24 px do pé da janela (no 4:3 e no 16:10 desce abaixo da área segura), cresce para cima;
     20 px de tela à esquerda do x 92: a borda direita da tela 4 (x 732) ficava a 2–3 px da fumaça do compressor (x 735) ---- */
  .texto.t2, .texto.t4{
    left:calc(var(--fx) + 92 * var(--u) - 20px); left:max(24px, calc(var(--fx) + 92 * var(--u) - 20px)); top:auto; bottom:24px;
    padding:calc(36 * var(--u)) calc(44 * var(--u)); padding:max(18px, calc(36 * var(--u))) max(22px, calc(44 * var(--u)));
    border-radius:calc(28 * var(--u)); border-radius:max(16px, calc(28 * var(--u))); border:1px solid rgba(244,243,250,.12);
    background:rgba(12,11,24,.8); box-shadow:0 calc(20 * var(--u)) calc(56 * var(--u)) rgba(0,0,0,.22);
  }
  .texto.t2{width:calc(680 * var(--u))}
  .t2 .titulo, .t4 .titulo{font-size:calc(46 * var(--u)); line-height:1.1; letter-spacing:-.022em}
  .t2 .medidas, .t4 .alertas{
    display:flex; margin:calc(24 * var(--u)) 0 0; padding:calc(22 * var(--u)) 0 0; border-top:1px solid rgba(244,243,250,.14);
    font-size:0; line-height:0;
  }
  /* tela 2: as quatro grandezas com o seu símbolo (os selos de 30/09 são os de temperatura e porta); a IA à parte */
  .t2 .medidas{flex-wrap:wrap}
  /* cada grandeza na largura dela, espaços iguais entre elas (em colunas iguais "Temperatura" encostava em "Umidade" em
     1024–1366: 3–15 px); "Abertura / de porta" em 2 linhas */
  .gz{display:block; flex:0 0 auto}
  .gz + .gz{margin-left:auto; padding-left:calc(16 * var(--u)); padding-left:max(12px, calc(16 * var(--u)))}
  .gz:nth-child(4) .gz-t{width:-webkit-min-content; width:min-content}
  .t2 .gz .selo{
    display:flex; margin-bottom:calc(14 * var(--u)); border-width:1px; background:rgba(163,161,219,.1);
    width:calc(58 * var(--u)); width:max(40px, calc(58 * var(--u))); height:calc(58 * var(--u)); height:max(40px, calc(58 * var(--u)));
    border-radius:calc(14 * var(--u)); border-radius:max(10px, calc(14 * var(--u)));
  }
  .t2 .gz .selo svg{width:calc(32 * var(--u)); width:max(24px, calc(32 * var(--u))); height:calc(32 * var(--u)); height:max(24px, calc(32 * var(--u))); stroke-width:1.6}
  .gz-t{display:block; font-size:calc(16 * var(--u)); font-size:max(12.5px, calc(16 * var(--u))); font-weight:600; line-height:1.3; color:var(--tx)}
  .nota{
    display:flex; align-items:flex-start; flex:0 0 100%; margin-top:calc(30 * var(--u)); padding-top:calc(24 * var(--u));
    border-top:1px solid rgba(244,243,250,.14); font-size:calc(17 * var(--u)); font-size:max(13px, calc(17 * var(--u))); line-height:1.45; color:var(--tx2);
  }
  .nota .ic{display:block; flex:0 0 auto; width:1.25em; height:1.25em; margin:.05em .6em 0 0; fill:none; stroke:var(--eye); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

  /* tela 4: "Quando" (os três gatilhos) | "O aviso chega por" (os canais); fundo quase opaco sobre os canos e o fio branco */
  .texto.t4{width:calc(640 * var(--u)); background:rgba(12,11,24,.9)}
  .col{display:block; flex:1 1 0; min-width:0}
  .col + .col{flex:0 0 auto; margin-left:calc(26 * var(--u)); padding-left:calc(26 * var(--u)); border-left:1px solid rgba(244,243,250,.14)}
  .t4 .rotulo{
    display:block; margin:0 0 calc(12 * var(--u)); white-space:nowrap; font-size:calc(12 * var(--u)); font-size:max(10.5px, calc(12 * var(--u)));
    font-weight:600; line-height:1.3; letter-spacing:.1em; text-transform:uppercase; color:var(--eye);
  }
  .gt, .cn{font-size:calc(17.5 * var(--u)); font-size:max(13px, calc(17.5 * var(--u))); line-height:1.3; color:var(--tx)}
  .gt{display:block; position:relative; padding-left:1.2em}
  .gt::before{content:""; position:absolute; left:0; top:.43em; width:.45em; height:.45em; border-radius:50%; background:#ff6b6b; box-shadow:0 0 0 .22em rgba(255,107,107,.2)}
  .gt ~ .gt{margin-top:calc(11 * var(--u))}
  .cn{display:flex; align-items:center}
  .cn + .cn{margin-top:calc(10 * var(--u))}
  .cn svg{
    display:block; flex:0 0 auto; width:1.8em; height:1.8em; padding:.36em; margin-right:.65em; border-radius:50%;
    background:rgba(163,161,219,.2); fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  }
  .cn-zap svg{background:#25d366; stroke-width:2.1}
  .cn-t{display:block}

  /* ---- tela 3: cartão escuro (o vidro claro sai daqui: lê melhor sobre a parede e não desfoca o vídeo), dois blocos ---- */
  .texto.t3{
    left:calc(var(--fx) + 120 * var(--u)); left:max(24px, calc(var(--fx) + 120 * var(--u))); top:calc(var(--fy) + 368 * var(--u)); width:calc(600 * var(--u));
    padding:calc(30 * var(--u)) calc(34 * var(--u)); border-radius:calc(22 * var(--u));
    background:rgba(13,12,28,.84); border:1px solid rgba(163,161,219,.24); box-shadow:0 calc(16 * var(--u)) calc(44 * var(--u)) rgba(5,4,12,.3);
    -webkit-backdrop-filter:none; backdrop-filter:none; --tx:#f4f3fa; --tx2:rgba(244,243,250,.80); --eye:#a3a1db;
  }
  .texto.t3::before{left:calc(34 * var(--u)); width:calc(56 * var(--u))}
  .t3 .titulo{font-size:calc(44 * var(--u)); line-height:1.1; letter-spacing:calc(-.6 * var(--u)); margin-bottom:calc(20 * var(--u))}
  .t3 .itens{display:flex; align-items:stretch; margin:0; padding:calc(20 * var(--u)) 0 0; border-top:1px solid rgba(244,243,250,.14); font-size:0; line-height:0}
  .it{
    display:flex; flex-direction:column; align-items:flex-start; flex:1 1 0; min-width:0;
    padding:calc(18 * var(--u)) calc(18 * var(--u)) calc(20 * var(--u)); border-radius:calc(14 * var(--u));
    background:rgba(244,243,250,.07); border:1px solid rgba(244,243,250,.16);
  }
  .it + .it{margin-left:calc(12 * var(--u))}
  .it .ic{width:calc(42 * var(--u)); height:calc(42 * var(--u)); min-width:26px; min-height:26px; padding:calc(8 * var(--u)); margin-bottom:calc(12 * var(--u)); border-radius:calc(10 * var(--u))}
  .it-t{display:block; font-size:calc(17.5 * var(--u)); font-size:max(13.5px, calc(17.5 * var(--u))); font-weight:600; line-height:1.25; color:var(--tx)}
  .it-s{display:block; margin-top:calc(4 * var(--u)); font-size:calc(14.5 * var(--u)); font-size:max(12.5px, calc(14.5 * var(--u))); line-height:1.4; color:var(--tx2)}

  /* ---- tela 5: título, subtítulo e o painel de contato em linhas (a linha inteira é o link ou o botão), embaixo ---- */
  .texto.t5{
    left:var(--fx); top:var(--fy); width:calc(1920 * var(--u)); height:calc(1080 * var(--u)); height:min(calc(1080 * var(--u)), calc(var(--altv) - var(--fy)));
    padding:0 0 calc(64 * var(--u)) calc(120 * var(--u)); border-radius:0; pointer-events:none;
    display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  }
  .texto.t5.ativo > *{pointer-events:auto}
  .t5 .titulo{font-size:calc(58 * var(--u)); line-height:1.06; margin-bottom:calc(20 * var(--u))}
  .painel{
    width:calc(540 * var(--u)); font-size:calc(17 * var(--u)); font-size:max(12.5px, calc(17 * var(--u)));
    background:rgba(11,10,22,.55); border:1px solid rgba(244,243,250,.13); border-radius:calc(18 * var(--u)); overflow:hidden;
  }
  .painel .acao, .painel .contatos{display:block; margin:0; font-size:1em; line-height:1.2}
  .painel .botao, .painel .zap, .painel .contatos a{
    display:flex; align-items:center; justify-content:flex-start; width:100%; height:auto; margin:0; padding:.85em 1.15em;
    border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--tx);
    font:inherit; text-align:left; text-decoration:none; transform:none; transition:background-color .2s;
  }
  .painel .zap, .painel .contatos a, .painel .contatos a:hover{border-top:1px solid rgba(244,243,250,.1)}
  .painel .botao{background:var(--roxo)}
  .painel .botao:hover{background:#7a77c0}
  .painel .zap:hover, .painel .contatos a:hover{background:rgba(244,243,250,.07); transform:none}
  .painel .botao:focus-visible{outline-offset:-3px; outline-color:#fff}   /* lilás sobre o roxo dava 2,05:1; branco ≈ 5:1 */
  .painel .zap:focus-visible{outline-offset:-3px}
  .painel .contatos a:focus-visible{outline-offset:-3px}
  .painel .l-ic, .painel .zap > svg:first-child{
    display:block; flex:0 0 auto; width:2.55em; height:2.55em; padding:.62em; margin-right:.95em; border-radius:.7em;
    background:rgba(163,161,219,.16); fill:none; stroke:var(--eye); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  }
  .painel .botao .l-ic{background:rgba(255,255,255,.18); stroke:#fff}
  .painel .zap > svg:first-child{background:#25d366; stroke:#fff; stroke-width:2.2; box-shadow:0 .25em .9em rgba(37,211,102,.3)}
  .l-txt, .painel .zap .l-txt{display:flex; flex-direction:column; flex:1 1 auto; min-width:0}
  .l-rot{
    display:block; margin-bottom:.35em; font-size:calc(11.5 * var(--u)); font-size:max(10.5px, calc(11.5 * var(--u)));
    font-weight:600; line-height:1.2; letter-spacing:.15em; text-transform:uppercase; color:var(--eye);
  }
  .l-val{font-size:1.12em; font-weight:600; line-height:1.2; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .painel .botao .l-val{font-size:1.2em}
  .painel .botao .l-rot{order:2; margin:.4em 0 0; font-size:.86em; font-weight:400; letter-spacing:0; text-transform:none; color:rgba(255,255,255,.86)}
  .painel .l-seta{
    display:block; flex:0 0 auto; width:1.25em; height:1.25em; margin-left:.8em; opacity:.5; transition:transform .2s, opacity .2s;
    fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  }
  .painel .botao .l-seta{opacity:.9}
  .painel a:hover .l-seta, .painel button:hover .l-seta{opacity:1; transform:translateX(3px)}

  /* Safari < 14.1: as margens de reserva do gap (acima) não valem na grade nem nas linhas empilhadas */
  @supports not (inset:0){
    .t1 .lista li + li{margin-top:0}
    .painel .acao > * + *, .painel .contatos > * + *{margin-left:0}
  }
}
/* u ≥ 0,85 (≥ 1632 × 918): a fonte do selo escala e ele cabe à esquerda do painel; a coluna desce à altura da proposta B */
@media (min-aspect-ratio:13/10) and (min-width:1632px) and (min-height:918px){ .texto.t1{padding-top:calc(262 * var(--u))} }
/* iPad deitado (4:3 até 1180 px) e notebook baixo (≤ 625 px, --u < 0,58): as vantagens em 2 × 2, mais estreitas (a ponta
   direita fica longe da loja); em 4 colunas o piso da fonte partia "R$ 499 por mês" e punha 4 linhas num cartão */
@media (min-aspect-ratio:13/10) and (min-height:500px) and (max-aspect-ratio:3/2) and (max-width:1180px), (min-aspect-ratio:13/10) and (min-height:500px) and (max-height:625px){
  .t1 .lista{grid-template-columns:repeat(2, minmax(0, 1fr)); width:calc(940 * var(--u))}
}
/* ---------- tela DEITADA BAIXA (30/09 noite, README §9): ≥ 13:10 e < 500 px de altura ----------
   Celular deitado e janela de computador baixa: o layout acima, compacto, com o mesmo conteúdo e o mesmo desenho, entre o
   cabeçalho (--ht) e o aviso "Demonstração" (de volta ao centro: a direita é do convite e da mini-cápsula), sem cobrir as
   peças da cena (as medidas do mockup no alto do bloco acima; a borda direita de cada bloco vem delas, pelo right) nem as
   barras. Telas 1 e 5: coluna à esquerda (na 1 as vantagens em linhas com o ícone); 2–4: cartões mais baixos, da base
   para cima. À esquerda, a linha da marca. O JS (apertar, pela --baixo) põe .ap1–.ap5 no bloco que não cabe na
   altura: o secundário sai, do menos ao mais importante (no fim). */
@media (min-aspect-ratio:13/10) and (max-height:499.98px){
  :root{--baixo:1; --ht:58px}
  .aviso{left:0; text-align:center; padding:6px 16px; padding-bottom:6px; padding-bottom:max(6px, env(safe-area-inset-bottom)); font-size:10.5px}
  .texto.t1, .texto.t2, .texto.t3, .texto.t4, .texto.t5{
    left:16px; left:max(16px, min(3vw, 40px), env(safe-area-inset-left)); width:auto;
    top:auto; bottom:27px; bottom:calc(27px + env(safe-area-inset-bottom)); height:auto;
    max-height:calc(var(--altv) - var(--ht) - 35px); max-height:calc(var(--altv) - var(--ht) - 35px - env(safe-area-inset-bottom));
  }
  @media (min-width:1024px){ :root{--ht:65px} }
  .texto .eyebrow, .t4 .rotulo{margin-bottom:6px; font-size:10.5px}
  .t1 .sub, .t5 .sub, .t1 .lista li, .nota, .gt, .cn, .it-t, .painel{font-size:12.5px; font-size:max(12.5px, min(13.5px, calc(var(--altv) * .032)))}

  /* telas 1 e 5: a coluna até a parede da loja (x 760), o texto à esquerda do painel flutuante (x 633); centrada (1) ou
     embaixo (5) por espaçadores que somem sem folga: o que não cabe passa por baixo e o JS vê */
  .texto.t1, .texto.t5{top:calc(var(--ht) + 8px); max-height:none; padding:0; display:flex; flex-direction:column; justify-content:flex-start}
  .texto.t1{right:calc(var(--largv) - var(--fx) - 748 * var(--u) + 10px); max-width:440px}
  .texto.t1 > *, .texto.t5 > *{flex-shrink:0}
  .texto.t1::before, .texto.t1::after, .texto.t5::before{content:""; flex:1 1 0}
  .t1 .titulo, .t5 .titulo{font-size:19px; font-size:max(19px, calc(58 * var(--u))); margin-bottom:8px}
  .t1 .sub, .t5 .sub{max-width:none; margin-bottom:10px; line-height:1.4}
  .t1 .titulo, .t1 .sub, .t1 .lista, .t5 .titulo{max-width:calc(var(--fx) + 623 * var(--u) - 16px); max-width:calc(var(--fx) + 623 * var(--u) - max(16px, min(3vw, 40px), env(safe-area-inset-left)))}
  .t1 .lista{position:static; display:block; width:auto; margin:0 0 12px}
  .t1 .lista li{display:flex; align-items:center; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; line-height:1.35; color:var(--tx2)}
  .t1 .lista li + li{margin-top:7px}
  .t1 .lista li::before{display:none}
  .t1 .lista .ic{width:24px; height:24px; min-width:0; min-height:0; padding:5px; margin:0 9px 0 0; border-radius:7px}
  .t1 .vt{margin:0; font-size:1em; line-height:1.3}
  .t1 .vs{font-size:.88em; line-height:1.3}
  .t1 .acao{gap:0}
  .t1 .acao > * + *{margin-left:10px}
  .t1 .botao, .t1 .zap{height:36px; height:max(36px, min(42px, calc(var(--altv) * .098))); border-radius:10px; font-size:13px}
  .t1 .botao{padding:0 14px; box-shadow:0 4px 14px rgba(107,104,175,.3)}
  .t1 .zap{padding:0 13px 0 11px}
  .t1 .zap svg{width:18px; height:18px; min-width:0; min-height:0}
  .zap-rot{margin-left:7px}

  /* telas 2 e 4: o cartão mais baixo; a 4 abaixo da TV (y 495) e à esquerda da fumaça (x 735) */
  .texto.t2, .texto.t4{padding:12px 14px 6px; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.22)}
  /* a folga de baixo dos cartões (2–4): 6 px de padding + 6 de conteúdo, o ::after; o texto que come mais de 6 px dela o
     JS vê (o scrollHeight não conta o padding) */
  .texto.t2::after, .texto.t3::after, .texto.t4::after{content:""; display:block; height:6px}
  .texto.t2{width:calc(640 * var(--u) + 110px); width:max(310px, calc(640 * var(--u) + 110px))}   /* as 4 grandezas numa linha */
  .t2 .titulo, .t3 .titulo, .t4 .titulo{font-size:18px; font-size:max(18px, calc(46 * var(--u)))}
  .t2 .medidas, .t4 .alertas{margin:10px 0 0; padding:10px 0 0}
  .t2 .gz .selo{width:32px; height:32px; margin-bottom:5px; border-radius:9px}
  .t2 .gz .selo svg{width:18px; height:18px}
  .gz-t{font-size:12px}
  .nota{margin-top:10px; padding-top:8px; line-height:1.4}
  .texto.t4{
    right:calc(var(--largv) - var(--fx) - 727 * var(--u) + 10px); max-width:400px;
    max-height:calc(var(--altv) - var(--fy) - 503 * var(--u) - 27px); max-height:calc(var(--altv) - var(--fy) - 503 * var(--u) - 27px - env(safe-area-inset-bottom));
  }
  .col + .col{margin-left:12px; padding-left:12px}
  .gt ~ .gt, .cn + .cn{margin-top:4px}

  /* tela 3: o cartão à esquerda do sensor (x 785) */
  .texto.t3{right:calc(var(--largv) - var(--fx) - 760 * var(--u) + 10px); max-width:380px; padding:12px 14px 6px; border-radius:14px}
  .texto.t3::before{left:14px; width:36px}
  .t3 .eyebrow{padding:2px 10px; margin-bottom:8px; border-radius:10px; letter-spacing:.7px}
  .t3 .titulo{margin-bottom:10px}
  .t3 .itens{padding:10px 0 0}
  .it{padding:9px 10px 10px; border-radius:10px}
  .it + .it{margin-left:8px}
  .it .ic{width:26px; height:26px; min-width:0; min-height:0; padding:5px; margin-bottom:6px; border-radius:7px}
  .it-s{margin-top:2px; font-size:11.5px}

  /* tela 5: o painel de contato em linhas de 38–41 px (alvo de toque) */
  .texto.t5{right:calc(var(--largv) - var(--fx) - 754 * var(--u) + 8px); max-width:360px}
  .t5 .titulo{margin-bottom:6px}
  .painel{width:100%; max-width:330px; border-radius:12px}
  .painel .botao, .painel .zap, .painel .contatos a{padding:6px 10px}
  .painel .l-ic, .painel .zap > svg:first-child{width:26px; height:26px; padding:5px; margin-right:10px; border-radius:7px}
  .l-rot{margin-bottom:1px; font-size:10.5px}
  .l-val{font-size:1.04em}
  .painel .botao .l-val{font-size:1.08em}
  .painel .botao .l-rot{margin:1px 0 0; font-size:11.5px}   /* corpo, não rótulo */
  .painel .l-seta{width:14px; height:14px; margin-left:6px}
  /* celular 16:9 (568–667 de largura: a coluna tem 190–230 px): sem a seta, o e-mail inteiro; o título da 4 sem a quebra */
  @media (max-width:719px){
    .t4 .titulo br{display:none}
    .painel{font-size:12.5px}
    .painel .l-seta{display:none}
    .painel .botao, .painel .zap, .painel .contatos a{padding:6px 7px}
    .painel .l-ic, .painel .zap > svg:first-child{width:24px; height:24px; padding:4.5px; margin-right:8px}
    .l-val, .painel .botao .l-val{font-size:.96em}
    .texto.t5{min-width:200px}   /* e-mail inteiro também em 1,26–1,3 */
  }
  /* palavra mais larga que o cartão da 3 ou a 1ª coluna da 4 (JS, .estreito): um cartão por linha, o ícone ao lado; os
     canais embaixo dos gatilhos */
  .estreito .itens, .estreito .alertas{display:block}
  .estreito .it{position:relative; justify-content:center; min-height:47px; padding-left:46px}
  .estreito .it .ic{position:absolute; left:10px; top:50%; margin:-13px 0 0}
  .estreito .it + .it{margin:6px 0 0}
  .estreito .col + .col{margin:8px 0 0; padding:8px 0 0; border:0; border-top:1px solid rgba(244,243,250,.14)}
  .estreito .cn, .estreito .cn + .cn{display:inline-flex; margin:2px 12px 2px 0}

  /* o que não cabe (JS, por bloco). Tela 1: o texto das vantagens, os vãos, o subtítulo, as vantagens 3 e 4, as outras;
     2: a linha pequena, a IA, as grandezas; 3: a linha pequena, o texto dos cartões, os cartões; 4: a linha pequena,
     "Quando"/"O aviso chega por", os gatilhos (os canais numa linha), os canais; 5: o subtítulo, a linha pequena, os
     rótulos e as setas das linhas, e-mail e telefone. Título e botões nunca saem */
  .ap1.t1 .vs, .ap3.t1 .sub, .ap4.t1 .lista li:nth-child(n+3), .ap5.t1 .lista,
  .ap1.t2 .eyebrow, .ap2 .nota, .ap4 .medidas,
  .ap1.t3 .eyebrow, .ap2 .it-s, .ap4 .itens,
  .ap1.t4 .eyebrow, .ap2 .rotulo, .ap3 .col:first-child, .ap4.t4 .alertas,
  .ap1.t5 .sub, .ap2.t5 .eyebrow, .ap3 .painel .l-rot, .ap3 .painel .l-seta, .ap4 .painel .contatos{display:none}
  .ap2.t1 .titulo{margin-bottom:6px}
  .ap2.t1 .lista{margin-bottom:10px}
  .ap2.t1 .lista li + li{margin-top:4px}
  .ap2.t1 .lista .ic{width:22px; height:22px; padding:4px}
  .ap3.t4{padding:10px 12px 4px}
  .ap3 .alertas{margin-top:8px; padding-top:8px}
  .ap3 .col + .col{flex:1 1 auto; min-width:0; margin:0 -9px 0 0; padding:0; border:0}   /* a margem do último canal da linha não quebra */
  .ap3 .cn, .ap3 .cn + .cn{display:inline-flex; margin:0 9px 0 0; font-size:12px}
  .ap3 .cn svg{margin-right:.45em}
}

/* ---------- sem movimento: corte direto, sem transição e sem animação ---------- */
@media (prefers-reduced-motion:reduce){
  .quadro > *{transition:none}
  .quadro.anima, .textos{transition:none}
  .texto{transition:none; transform:none}
  .pontos, .ponto, .ponto-num, .ponto-barra, .ponto-barra::after, .ponto-nome{transition:none}
  .gesto, .gesto *, .ponto.espera, .ponto-nome{animation:none}
  /* o convite: aparece em 1 s sem fade (corte), o ícone parado, sai na hora */
  .convite i, .convite svg{animation:none}   /* (0,1,1): vence o .convite-mouse i */
  .convite{animation:surge 1s step-end}
}