/* =========================================================================
   FinMatch — tela de login (layout 2026-09)
   Referência: 4 mockups aprovados + 4 fotos de fundo do Maxsuel
   (1920x1080, 2880x1080, 1536x1024, 1080x2340).

   COMO O FUNDO FICA "VIVO" SEM PERDER A FOTO
   A foto é a real. Por cima dela, uma camada do MESMO tamanho da foto
   (.fm-foto reproduz o "cover" à mão: max(100vw, 100vh*R) x max(100vh, 100vw/R))
   — então uma posição em % da foto cai sempre no mesmo pixel da imagem,
   em qualquer tela. É nessa camada que os números contam de 0 até o valor,
   sobre um remendo da cor do cartão; no fim o remendo some e aparece o
   número original da foto.

   Unidade-base nas telas deitadas: a ALTURA (vh). No ultralargo os elementos
   ficam do mesmo tamanho e o que cresce é o respiro — como no mockup 2.
   ========================================================================= */
:root { --u: 1vh; --R: 1.7778; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body.fm-login {
  margin: 0; min-height: 100vh; background: #03060b; color: #eef2f8;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
.fm-palco { position: relative; min-height: 100vh; overflow: hidden; isolation: isolate; }

/* ------------------------------------------------------- a foto (cover) */
.fm-foto {
  position: absolute; z-index: 0; left: 50%; top: 50%;
  width: max(100vw, calc(100vh * var(--R)));
  height: max(100vh, calc(100vw / var(--R)));
  transform: translate(-50%, -50%);
  animation: fm-respira 28s ease-in-out infinite alternate;
  transform-origin: 62% 62%;
}
@keyframes fm-respira { from { transform: translate(-50%,-50%) scale(1); } to { transform: translate(-50%,-50%) scale(1.035); } }
.fm-foto img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* escurece a esquerda (onde fica o texto) e esconde os textos que já vêm
   impressos na foto — o mockup pede os textos NOSSOS ali */
.fm-sombra {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3,6,11,.97) 0%, rgba(3,6,11,.93) 24%, rgba(3,6,11,.62) 38%, rgba(3,6,11,0) 54%),
    linear-gradient(180deg, rgba(3,6,11,.55) 0%, rgba(3,6,11,0) 22%, rgba(3,6,11,0) 78%, rgba(3,6,11,.55) 100%);
}

/* ------------------------------------------------ a camada viva na foto */
.fm-num {
  position: absolute;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  pointer-events: none;
}
.fm-num::before {             /* remendo da cor do cartão, bordas suaves */
  content: ""; position: absolute; inset: -38% -14% -30% -10%;
  background: var(--cor); border-radius: 6px;
  box-shadow: 0 0 6px 5px var(--cor);
  transition: opacity .9s ease;
}
.fm-num span {
  position: absolute; left: 0; bottom: -8%;
  font-style: italic; font-weight: 300; line-height: 1; white-space: nowrap;
  font-size: calc(var(--h) / 100 * max(100vh, calc(100vw / var(--R))) * 1.36);
  color: #f3f7ff; letter-spacing: .005em;
  text-shadow: 0 0 10px rgba(160,200,255,.25);
  transition: opacity .9s ease;
}
.fm-vivo.fm-fim .fm-num::before, .fm-vivo.fm-fim .fm-num span { opacity: 0; }

/* luz varrendo as barras do gráfico (vivo, discreto) */
.fm-varre {
  position: absolute; pointer-events: none; overflow: hidden;
  left: calc(var(--bx) * 1%); top: calc(var(--by) * 1%);
  width: calc(var(--bw) * 1%); height: calc(var(--bh) * 1%);
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(0deg, transparent, #000 20%, #000 80%, transparent);
          mask-image: linear-gradient(0deg, transparent, #000 20%, #000 80%, transparent);
}
.fm-varre::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 30%; left: -35%;
  background: linear-gradient(90deg, transparent, rgba(150,195,255,.30), transparent);
  animation: fm-varre 5.5s ease-in-out 2.6s infinite;
}
@keyframes fm-varre { 0% { left: -35%; } 55%, 100% { left: 110%; } }

/* ------------------------------------------------------------ cabeçalho */
.fm-topo {
  position: absolute; z-index: 3;
  top: calc(var(--u) * 6.5); left: calc(var(--u) * 6.5); right: calc(var(--u) * 6.5);
  display: flex; align-items: flex-start; justify-content: space-between;
}
.fm-marca { display: flex; align-items: center; gap: calc(var(--u) * 1.8); text-decoration: none; color: inherit; }
.fm-marca img { width: calc(var(--u) * 10.5); height: auto; filter: drop-shadow(0 0 8px rgba(255,255,255,.12)); }
.fm-marca-txt { display: flex; flex-direction: column; line-height: 1; }
.fm-nome { margin: 0; font-size: calc(var(--u) * 4.6); letter-spacing: .06em; font-weight: 300; color: #f3f5f9; }
.fm-nome strong { font-weight: 700; }
.fm-tag { margin: calc(var(--u) * 1.1) 0 0; font-size: calc(var(--u) * 1.15); letter-spacing: .18em;
          text-transform: uppercase; color: #a6b0c2; }
.fm-menu { display: flex; gap: calc(var(--u) * 1.6); align-items: center; margin-top: calc(var(--u) * 1.6);
           font-size: calc(var(--u) * 1.15); letter-spacing: .16em; text-transform: uppercase; color: #c9d1de; }
.fm-menu span + span::before { content: "|"; margin-right: calc(var(--u) * 1.6); color: #566175; }

/* --------------------------------------------------------------- herói */
.fm-heroi { position: absolute; z-index: 3; left: calc(var(--u) * 6.5); top: calc(var(--u) * 25.5); width: calc(var(--u) * 74); }
.fm-heroi h1 { margin: 0; font-weight: 600; letter-spacing: -.02em; font-size: calc(var(--u) * 6.1); line-height: 1.13; color: #f4f6fa; }
.fm-heroi h1 em { font-style: normal; color: #8ea4cc; }
.fm-heroi p.fm-sub { margin: calc(var(--u) * 2.6) 0 0; max-width: calc(var(--u) * 44);
                     font-size: calc(var(--u) * 1.95); line-height: 1.45; color: #c8cfdb; }
.fm-heroi hr { width: calc(var(--u) * 46); margin: calc(var(--u) * 4.2) 0 0; border: 0; height: 1px;
               background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,0)); }
.fm-benef { display: flex; gap: calc(var(--u) * 3.6); margin-top: calc(var(--u) * 5); }
.fm-benef div { display: flex; align-items: center; gap: calc(var(--u) * 1.1);
                font-size: calc(var(--u) * 1.3); line-height: 1.35; color: #c3cad6; }
.fm-benef svg { flex: none; width: calc(var(--u) * 4.8); height: calc(var(--u) * 4.8); color: #dfe5ef; }

.fm-frase { position: absolute; z-index: 3; left: calc(var(--u) * 6.5); bottom: calc(var(--u) * 8); margin: 0;
            font-size: calc(var(--u) * 1.5); letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; color: #d9dfe8; }
.fm-frase::after { content: ""; display: block; width: calc(var(--u) * 7); height: 1px;
                   margin-top: calc(var(--u) * 1.8); background: rgba(255,255,255,.4); }
.fm-pilares { display: none; }

/* ---------------------------------------------------------------- cartão */
.fm-cartao {
  position: absolute; z-index: 4; right: calc(var(--u) * 2.8); top: 57.5%; transform: translateY(-50%);
  width: calc(var(--u) * 54);
  padding: calc(var(--u) * 6.4) calc(var(--u) * 5.4) calc(var(--u) * 3.6);
  border-radius: calc(var(--u) * 2.2);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 40%, rgba(0,0,0,.10)), rgba(14,18,26,.74);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 3vh 8vh rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%);
}
.fm-cartao-marca { text-align: center; }
.fm-cartao-marca img { width: calc(var(--u) * 10.5); height: auto; filter: drop-shadow(0 0 10px rgba(255,255,255,.12)); }
.fm-cartao-marca .fm-nome { font-size: calc(var(--u) * 3.1); margin-top: calc(var(--u) * 1.3); letter-spacing: .12em; }
.fm-cartao-marca .fm-tag { margin-top: calc(var(--u) * .9); font-size: calc(var(--u) * .9); }

.fm-form { margin-top: calc(var(--u) * 4.6); }
.fm-form label.fm-rot { display: block; margin: 0 0 calc(var(--u) * 1); font-size: calc(var(--u) * 1.05);
                        letter-spacing: .12em; text-transform: uppercase; color: #d4dae4; font-weight: 500; }
.fm-campo { position: relative; margin-bottom: calc(var(--u) * 3); }
.fm-campo > svg { position: absolute; left: calc(var(--u) * 1.8); top: 50%; transform: translateY(-50%);
                  width: calc(var(--u) * 1.9); height: calc(var(--u) * 1.9); color: #8e98aa; pointer-events: none; }
.fm-campo input {
  width: 100%; height: calc(var(--u) * 5.4); padding: 0 calc(var(--u) * 5);
  border-radius: calc(var(--u) * .9); border: 1px solid rgba(255,255,255,.08); background: rgba(6,9,14,.72);
  color: #eef2f8; font: inherit; font-size: calc(var(--u) * 1.55); outline: none; transition: border-color .2s, box-shadow .2s;
}
.fm-campo input::placeholder { color: #8791a3; }
.fm-campo input:focus { border-color: rgba(156,193,255,.55); box-shadow: 0 0 0 3px rgba(156,193,255,.12); }
.fm-ver { position: absolute; right: calc(var(--u) * 1.4); top: 50%; transform: translateY(-50%);
          background: none; border: 0; padding: 4px; color: #aab3c3; cursor: pointer; line-height: 0; }
.fm-ver svg { width: calc(var(--u) * 2); height: calc(var(--u) * 2); }
.fm-ver.ativo { color: #fff; }

.fm-opcoes { display: flex; justify-content: space-between; align-items: center;
             margin: calc(var(--u) * .2) 0 calc(var(--u) * 3.6); font-size: calc(var(--u) * 1.3); color: #c9d0dc; }
.fm-lembrar { display: flex; align-items: center; gap: calc(var(--u) * 1); cursor: pointer; }
.fm-lembrar input { appearance: none; -webkit-appearance: none; margin: 0; width: calc(var(--u) * 1.7); height: calc(var(--u) * 1.7);
                    border: 1px solid #7d879a; border-radius: 3px; background: transparent; cursor: pointer; display: grid; place-content: center; }
.fm-lembrar input:checked { background: #e9eef6; border-color: #e9eef6; }
.fm-lembrar input:checked::after { content: ""; width: 45%; height: 25%; border: solid #0b0f16; border-width: 0 0 2px 2px;
                                   transform: rotate(-45deg) translate(1px,-1px); }
.fm-esqueci { background: none; border: 0; padding: 0; font: inherit; color: #e6ebf3; cursor: pointer;
              text-decoration: underline; text-underline-offset: 3px; }
.fm-ajuda { margin: calc(var(--u) * -1.6) 0 calc(var(--u) * 2.4); font-size: calc(var(--u) * 1.25); line-height: 1.45; color: #aeb7c6;
            background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 8px; padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4); }

.fm-entrar {
  width: 100%; height: calc(var(--u) * 5.6); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1);
  border: 0; border-radius: calc(var(--u) * .9); cursor: pointer; background: linear-gradient(180deg, #ffffff, #dfe4ec);
  color: #0b1018; font: inherit; font-weight: 600; font-size: calc(var(--u) * 1.65);
  box-shadow: 0 1vh 3vh rgba(0,0,0,.35), inset 0 -1px 0 rgba(0,0,0,.12); transition: transform .15s, box-shadow .2s, filter .2s;
}
.fm-entrar svg { width: calc(var(--u) * 1.9); height: calc(var(--u) * 1.9); }
.fm-entrar:hover { filter: brightness(1.03); box-shadow: 0 1.4vh 3.6vh rgba(0,0,0,.45); }
.fm-entrar:active { transform: translateY(1px); }

.fm-restrito { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * .8); margin: calc(var(--u) * 3) 0 0;
               font-size: calc(var(--u) * .95); letter-spacing: .16em; text-transform: uppercase; color: #8d97a8; }
.fm-restrito svg { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); }
.fm-versao { margin: calc(var(--u) * 6.4) 0 0; text-align: center; font-size: calc(var(--u) * 1.05); color: #8a93a4; }
.fm-alerta { margin: 0 0 calc(var(--u) * 2.2); padding: calc(var(--u) * 1.3) calc(var(--u) * 1.6); border-radius: calc(var(--u) * .9);
             font-size: calc(var(--u) * 1.35); line-height: 1.4; background: rgba(120,28,36,.28); border: 1px solid rgba(235,90,100,.35);
             border-left: 3px solid #e2515d; color: #f6dcdf; }

/* ======================================== posições medidas em cada foto
   (% da foto). Padrão = 1920x1080. */
.fm-n-anel     { --x: 65.73; --y: 54.17; --w: 3.54; --h: 2.13; --cor: rgb(2,16,32); }
.fm-n-entradas { --x: 59.17; --y: 62.13; --w: 2.92; --h: 1.85; --cor: rgb(4,22,40); }
.fm-n-pend     { --x: 58.33; --y: 68.43; --w: 1.30; --h: 1.57; --cor: rgb(5,24,43); }
.fm-varre      { --bx: 64.5; --by: 50; --bw: 22.5; --bh: 28; }

/* ultralarga (2880x1080) */
@media (min-aspect-ratio: 11/5) {
  :root { --R: 2.6667; }
  .fm-n-anel     { --x: 65.73; --y: 56.20; --w: 3.47; --h: 3.06; --cor: rgb(1,15,31); }
  .fm-n-entradas { --x: 59.17; --y: 67.96; --w: 2.95; --h: 2.87; --cor: rgb(5,22,41); }
  .fm-n-pend     { --x: 58.26; --y: 77.32; --w: 1.42; --h: 2.78; --cor: rgb(5,24,45); }
  .fm-varre      { --bx: 64.5; --by: 46; --bw: 22.5; --bh: 42; }
}

/* 3:2 e 4:3 (1536x1024): menos largura, o texto desce e aparecem os pilares */
@media (max-aspect-ratio: 8/5) and (min-aspect-ratio: 1/1) {
  :root { --R: 1.5; }
  .fm-n-anel     { --x: 67.19; --y: 54.00; --w: 4.10; --h: 2.34; --cor: rgb(9,22,36); }
  .fm-n-entradas { --x: 59.31; --y: 62.01; --w: 3.58; --h: 1.95; --cor: rgb(5,22,40); }
  .fm-n-pend     { --x: 58.27; --y: 68.16; --w: 1.76; --h: 2.05; --cor: rgb(5,24,45); }
  .fm-varre      { --bx: 65.8; --by: 50; --bw: 26; --bh: 28; }
  .fm-heroi { top: calc(var(--u) * 21); width: calc(var(--u) * 62); }
  .fm-heroi h1 { font-size: calc(var(--u) * 5.3); }
  .fm-heroi p.fm-sub { font-size: calc(var(--u) * 1.9); }
  .fm-cartao { width: calc(var(--u) * 47); right: calc(var(--u) * 4.5); top: calc(var(--u) * 8); transform: none; }
  .fm-frase { bottom: calc(var(--u) * 5); }
  .fm-pilares { display: block; position: absolute; z-index: 3; right: calc(var(--u) * 8); bottom: calc(var(--u) * 4.5); margin: 0;
                font-size: calc(var(--u) * 1.2); letter-spacing: .16em; line-height: 1.9; color: #c6cdd8; text-transform: uppercase; }
  .fm-sombra { background:
    linear-gradient(90deg, rgba(3,6,11,.96) 0%, rgba(3,6,11,.9) 30%, rgba(3,6,11,.45) 46%, rgba(3,6,11,0) 60%),
    linear-gradient(180deg, rgba(3,6,11,.5) 0%, rgba(3,6,11,0) 22%, rgba(3,6,11,0) 76%, rgba(3,6,11,.6) 100%); }
}

/* ======================================================== celular em pé
   Tudo empilhado; a unidade vira a largura (vw). */
@media (max-aspect-ratio: 1/1) {
  :root { --u: 0.52vw; --R: 0.4615; }
  .fm-n-anel     { --x: 47.96; --y: 54.06; --w: 13.33; --h: 2.14; --cor: rgb(2,15,31); }
  .fm-n-entradas { --x: 22.69; --y: 62.05; --w: 11.30; --h: 1.84; --cor: rgb(5,21,40); }
  .fm-n-pend     { --x: 19.07; --y: 68.16; --w: 5.37; --h: 1.92; --cor: rgb(5,24,45); }
  .fm-varre      { --bx: 43; --by: 58; --bw: 57; --bh: 18; }
  .fm-sombra { background: linear-gradient(180deg, rgba(3,6,11,.92) 0%, rgba(3,6,11,.75) 30%, rgba(3,6,11,.15) 48%, rgba(3,6,11,.1) 80%, rgba(3,6,11,.7) 100%); }
  .fm-palco { padding-bottom: calc(var(--u) * 10); }
  .fm-topo { position: relative; top: auto; left: auto; right: auto; padding: calc(var(--u) * 10) calc(var(--u) * 7) 0; display: block; text-align: center; }
  .fm-marca { flex-direction: column; gap: calc(var(--u) * 2); }
  .fm-marca img { width: calc(var(--u) * 16); }
  .fm-marca .fm-nome { font-size: calc(var(--u) * 6); }
  .fm-marca .fm-tag { font-size: calc(var(--u) * 1.9); margin-top: calc(var(--u) * 1.6); }
  .fm-menu { display: none; }
  .fm-pilares { display: block; position: absolute; z-index: 3; top: calc(var(--u) * 9); right: calc(var(--u) * 6); margin: 0;
                font-size: calc(var(--u) * 2); letter-spacing: .16em; line-height: 1.8; color: #c6cdd8; text-transform: uppercase; text-align: center; }
  .fm-heroi { position: relative; left: auto; top: auto; width: auto; padding: calc(var(--u) * 9) calc(var(--u) * 7) 0; }
  .fm-heroi h1 { font-size: calc(var(--u) * 9); max-width: 70%; }
  .fm-heroi p.fm-sub { font-size: calc(var(--u) * 3.4); max-width: 62%; }
  .fm-heroi hr { display: none; }
  .fm-benef { flex-direction: column; gap: calc(var(--u) * 3.2); max-width: 60%; margin-top: calc(var(--u) * 5); }
  .fm-benef div { font-size: calc(var(--u) * 2.6); }
  .fm-benef svg { width: calc(var(--u) * 5.5); height: calc(var(--u) * 5.5); }
  .fm-cartao { position: relative; right: auto; top: auto; transform: none; width: auto;
               margin: calc(var(--u) * 12) calc(var(--u) * 5) 0; padding: calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 5); }
  .fm-cartao-marca { display: none; }
  .fm-form { margin-top: 0; }
  .fm-form label.fm-rot, .fm-opcoes, .fm-restrito, .fm-versao { font-size: calc(var(--u) * 2.4); }
  .fm-campo input { height: calc(var(--u) * 10); font-size: 16px; padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 1.8); }
  .fm-campo > svg { left: calc(var(--u) * 3.4); width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); }
  .fm-ver svg { width: calc(var(--u) * 3.8); height: calc(var(--u) * 3.8); }
  .fm-lembrar input { width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); }
  .fm-entrar { height: calc(var(--u) * 10.5); font-size: calc(var(--u) * 3.1); border-radius: calc(var(--u) * 1.8); }
  .fm-entrar svg { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); }
  .fm-alerta { font-size: calc(var(--u) * 2.6); }
  .fm-frase { position: relative; left: auto; bottom: auto; margin: calc(var(--u) * 9) calc(var(--u) * 7) 0 auto; width: max-content;
              font-size: calc(var(--u) * 2.3); }
  .fm-frase::after { display: none; }
}

/* quem pediu menos movimento ao sistema recebe tudo pronto, parado */
@media (prefers-reduced-motion: reduce) {
  .fm-foto, .fm-varre::after { animation: none !important; }
  .fm-num { display: none; }
}
.fm-vivo { position: absolute; inset: 0; }

/* ===================== enquadramento da foto (rodada 8)
   Na foto o notebook está à direita (centro em ~72% da largura); no mockup
   ele fica ENTRE o texto e o cartão (~47%). Desloca e amplia um pouco a foto;
   a borda que sobra à direita fica sob o cartão e é escurecida — no mockup
   aquele canto é escuro. A camada viva está DENTRO da .fm-foto, então anda
   junto e continua alinhada ao pixel. */
:root { --s: 1.15; --dx: -28%; --dy: 0%; }
.fm-foto {
  transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(var(--s));
  transform-origin: 50% 50%;
  animation: fm-respira2 28s ease-in-out infinite alternate;
}
@keyframes fm-respira2 {
  from { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(var(--s)); }
  to   { transform: translate(-50%, -50%) translate(calc(var(--dx) - 0.6%), var(--dy)) scale(calc(var(--s) * 1.03)); }
}
.fm-sombra {
  background:
    linear-gradient(90deg, rgba(3,6,11,.97) 0%, rgba(3,6,11,.93) 22%, rgba(3,6,11,.55) 34%, rgba(3,6,11,0) 46%),
    linear-gradient(270deg, rgba(3,6,11,1) 0%, rgba(3,6,11,1) 19%, rgba(3,6,11,.6) 27%, rgba(3,6,11,0) 36%),
    linear-gradient(180deg, rgba(3,6,11,.55) 0%, rgba(3,6,11,0) 22%, rgba(3,6,11,0) 80%, rgba(3,6,11,.6) 100%);
}
@media (min-aspect-ratio: 11/5) {
  :root { --s: 1.05; --dx: -16%; --dy: 0%; }
  .fm-sombra { background:
    linear-gradient(90deg, rgba(3,6,11,.97) 0%, rgba(3,6,11,.92) 18%, rgba(3,6,11,.5) 26%, rgba(3,6,11,0) 34%),
    linear-gradient(270deg, rgba(3,6,11,1) 0%, rgba(3,6,11,1) 12%, rgba(3,6,11,.6) 20%, rgba(3,6,11,0) 28%),
    linear-gradient(180deg, rgba(3,6,11,.5) 0%, rgba(3,6,11,0) 22%, rgba(3,6,11,0) 80%, rgba(3,6,11,.6) 100%); }
}
@media (max-aspect-ratio: 8/5) and (min-aspect-ratio: 1/1) {
  :root { --s: 1.0; --dx: -40%; --dy: 15%; }
  .fm-sombra { background:
    linear-gradient(180deg, rgba(3,6,11,1) 0%, rgba(3,6,11,.96) 40%, rgba(3,6,11,.4) 56%, rgba(3,6,11,0) 64%),
    linear-gradient(270deg, rgba(3,6,11,1) 0%, rgba(3,6,11,1) 38%, rgba(3,6,11,.5) 46%, rgba(3,6,11,0) 54%),
    linear-gradient(0deg, rgba(3,6,11,.5) 0%, rgba(3,6,11,0) 15%); }
}
@media (max-aspect-ratio: 1/1) {
  :root { --s: 1.0; --dx: 0%; --dy: 0%; }
}
/* rodada 9: fonte medida por sobreposição ao número da foto (vermelho x branco) */
.fm-num span { font-size: calc(var(--h) / 100 * max(100vh, calc(100vw / var(--R))) * 1.18); left: -1%; }
.fm-num::before { inset: -16% -12% -14% -8%; }
/* rodada 10: ultralarga — notebook centralizado como no mockup 2 */
@media (min-aspect-ratio: 11/5) { :root { --dx: -24%; } }
/* rodada 11: 3:2 — notebook maior e mais baixo; esconde o texto impresso à direita */
@media (max-aspect-ratio: 8/5) and (min-aspect-ratio: 1/1) {
  :root { --s: 1.12; --dx: -42%; --dy: 19%; }
  .fm-sombra { background:
    linear-gradient(180deg, rgba(3,6,11,1) 0%, rgba(3,6,11,.96) 40%, rgba(3,6,11,.4) 56%, rgba(3,6,11,0) 64%),
    linear-gradient(270deg, rgba(3,6,11,1) 0%, rgba(3,6,11,1) 42%, rgba(3,6,11,.55) 47%, rgba(3,6,11,0) 53%),
    linear-gradient(0deg, rgba(3,6,11,.45) 0%, rgba(3,6,11,0) 14%); }
}
/* rodada 12: 3:2 — a frase fica sobre a BASE do notebook, não sobre a tela */
@media (max-aspect-ratio: 8/5) and (min-aspect-ratio: 1/1) { :root { --s: 1.12; --dx: -47%; --dy: 8%; } }
/* rodada 13: 3:2 — texto mais alto (título em ~19% como no mockup 3) */
@media (max-aspect-ratio: 8/5) and (min-aspect-ratio: 1/1) {
  .fm-heroi { top: calc(var(--u) * 18); }
  .fm-heroi hr { margin-top: calc(var(--u) * 3.2); }
  .fm-benef { margin-top: calc(var(--u) * 3.6); }
}

/* ============ rodada 14: celular refeito pela composição do mockup 4
   topo: logo ao centro, pilares à direita · meio: texto à esquerda, gráfico
   da foto à direita · baixo: formulário (64%) à esquerda e a frase à direita.
   Letra com piso legível: o mockup é um pôster de 1080px; reduzido para a
   tela do celular, a escala pura daria texto de 7px. */
@media (max-aspect-ratio: 1/1) {
  :root { --s: 1.18; --dx: 20%; --dy: -16%; }
  .fm-palco { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding-bottom: 0; }
  .fm-topo { padding: 7vw 6vw 0; }
  .fm-marca img { width: 17vw; }
  .fm-marca .fm-nome { font-size: max(20px, 6.2vw); }
  .fm-marca .fm-tag { font-size: max(8px, 2vw); letter-spacing: .16em; }
  .fm-pilares { top: 6vw; right: 5vw; font-size: max(8px, 2.1vw); line-height: 1.75; text-align: left; }
  .fm-heroi { padding: 7vw 6vw 0; }
  .fm-heroi h1 { font-size: max(24px, 7.4vw); line-height: 1.12; max-width: 58%; }
  .fm-heroi p.fm-sub { font-size: max(12.5px, 3.2vw); max-width: 52%; margin-top: 3.5vw; }
  .fm-benef { gap: 3.6vw; max-width: 52%; margin-top: 6vw; }
  .fm-benef div { font-size: max(11px, 2.7vw); gap: 2.2vw; }
  .fm-benef svg { width: max(22px, 6vw); height: max(22px, 6vw); }
  .fm-cartao { margin: auto 0 6vw 5vw; width: 64%; padding: 6vw 5.5vw 5vw; border-radius: 3.2vw; }
  .fm-form label.fm-rot { font-size: max(10px, 2.3vw); margin-bottom: 1.6vw; }
  .fm-campo { margin-bottom: 4vw; }
  .fm-campo input { height: max(40px, 10.5vw); font-size: 16px; padding: 0 9vw; border-radius: 1.8vw; }
  .fm-campo > svg { left: 3vw; width: max(14px, 3.6vw); height: max(14px, 3.6vw); }
  .fm-ver { right: 2vw; }
  .fm-ver svg { width: max(15px, 3.8vw); height: max(15px, 3.8vw); }
  .fm-opcoes { font-size: max(10px, 2.4vw); margin: 0 0 5vw; gap: 2vw; }
  .fm-lembrar input { width: max(13px, 3.2vw); height: max(13px, 3.2vw); }
  .fm-entrar { height: max(42px, 10.5vw); font-size: max(14px, 3.4vw); border-radius: 1.8vw; }
  .fm-entrar svg { width: max(15px, 3.6vw); height: max(15px, 3.6vw); }
  .fm-restrito { font-size: max(8.5px, 2vw); margin-top: 5vw; }
  .fm-versao { font-size: max(9px, 2vw); margin-top: 5vw; }
  .fm-alerta { font-size: max(12px, 2.8vw); }
  .fm-frase { position: absolute; left: auto; right: 5vw; bottom: 8vw; margin: 0; width: 24%;
              font-size: max(8.5px, 2.1vw); line-height: 1.6; letter-spacing: .1em; }
  .fm-sombra { background:
    linear-gradient(90deg, rgba(3,6,11,.85) 0%, rgba(3,6,11,.6) 40%, rgba(3,6,11,0) 60%),
    linear-gradient(180deg, rgba(3,6,11,.95) 0%, rgba(3,6,11,.55) 22%, rgba(3,6,11,0) 36%, rgba(3,6,11,0) 60%, rgba(3,6,11,.85) 78%, rgba(3,6,11,.95) 100%); }
}
/* rodada 15: celular — cartões da foto saem de baixo dos benefícios; opções numa linha */
@media (max-aspect-ratio: 1/1) {
  :root { --s: 1.12; --dx: 34%; --dy: -13%; }
  .fm-opcoes { font-size: max(9.5px, 2.25vw); }
  .fm-lembrar, .fm-esqueci { white-space: nowrap; }
  .fm-lembrar { gap: 1.4vw; }
}
@media (max-aspect-ratio: 1/1) { .fm-restrito svg { width: max(11px, 2.6vw); height: max(11px, 2.6vw); } }
/* alerta logo abaixo da marca do cartão: mesmo respiro que o formulário teria */
.fm-cartao-marca + .fm-alerta { margin-top: calc(var(--u) * 3.4); margin-bottom: 0; }
.fm-alerta + .fm-form { margin-top: calc(var(--u) * 2.6); }
@media (max-aspect-ratio: 1/1) { .fm-alerta { margin-bottom: 4vw; } .fm-alerta + .fm-form { margin-top: 0; } }

/* 20/10/2026 — celular: o quadro de login ocupa a largura toda (antes 64%, o
   campo cortava "Digite seu usuário" e "Esqueci minha senha" vazava), a frase
   do rodapé saía por cima do quadro, e o link do primeiro acesso herdava a
   escala do desenho (--u) e ficava com 2 px. */
.fm-primeiro { margin: calc(var(--u) * -1.6) 0 calc(var(--u) * 2.4); }
.fm-primeiro a { color: inherit; }
@media (max-aspect-ratio: 1/1) {
  .fm-cartao { width: auto; margin: 7vw 16px 6vw; padding: 24px 20px 20px; border-radius: 16px; }
  .fm-heroi h1, .fm-heroi p.fm-sub, .fm-benef { max-width: 64%; }
  .fm-frase { display: none; }
  .fm-pilares { top: 7vw; right: 4vw; }
  .fm-form label.fm-rot { font-size: 12px; margin-bottom: 8px; }
  .fm-campo { margin-bottom: 16px; }
  .fm-campo input { height: 48px; padding: 0 44px; border-radius: 10px; }
  .fm-campo > svg { left: 14px; width: 18px; height: 18px; }
  .fm-ver { right: 10px; }
  .fm-ver svg { width: 20px; height: 20px; }
  .fm-opcoes { font-size: 13px; margin: 0 0 14px; gap: 8px; flex-wrap: wrap; }
  .fm-lembrar input { width: 16px; height: 16px; }
  .fm-ajuda { font-size: 14px; margin: 0 0 14px; }
  .fm-primeiro { margin: 0 0 16px; padding: 12px 14px; border: 1px solid rgba(120,160,230,.35);
                 background: rgba(61,139,253,.10); border-radius: 10px; text-align: center; }
  .fm-entrar { height: 50px; font-size: 16px; border-radius: 10px; }
  .fm-entrar svg { width: 18px; height: 18px; }
  .fm-restrito { font-size: 11px; margin-top: 16px; }
  .fm-versao { font-size: 11px; margin-top: 12px; }
  .fm-alerta { font-size: 14px; }
  .fm-cartao-marca .fm-nome { font-size: 22px; }
  .fm-cartao-marca .fm-tag { font-size: 10px; }
}