/* Telas do cliente (entrada, criar senha, início): visual aprovado na prévia. */
  body { color: var(--texto); background: radial-gradient(70% 50% at 100% 0%, rgba(0,117,189,.10), transparent 70%),
                                       radial-gradient(60% 50% at 0% 100%, rgba(46,155,230,.08), transparent 70%), #fff; }
  canvas.camada { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
  .topo { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; max-width: 1240px; margin: 0 auto; padding: 22px 28px; }
  .topo nav { display: flex; gap: 8px; }
  .pilula { padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--tinta);
            background: rgba(255,255,255,.7); border: 1px solid rgba(0,117,189,.16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
            transition: border-color .25s, box-shadow .25s; }
  .pilula:hover { border-color: rgba(0,117,189,.4); box-shadow: 0 8px 24px rgba(0,117,189,.12); }
  .privada { display: inline-flex; align-items: center; gap: 8px; padding-left: 12px; }
  .cadeado { width: 20px; height: 20px; overflow: visible; }
  .cadeado .arco { transition: transform .45s cubic-bezier(.3,1.6,.5,1); transform-origin: 16.5px 11px; }
  .privada:hover .cadeado .arco { transform: translateY(-2.5px) rotate(18deg); }
  .privada:hover .cadeado rect { filter: drop-shadow(0 0 4px rgba(46,155,230,.7)); }

  .palco { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 8px 28px 60px; min-height: calc(100vh - 90px);
           display: grid; grid-template-columns: 1.1fr 470px; gap: 60px; align-items: center; }

  /* ---------- cartão de visita do escritório ---------- */
  .visita .logo-vivo { width: 132px; --mascara: url(/comum/img/logo.png); filter: drop-shadow(0 14px 24px rgba(0,117,189,.22)); }
  /* L em vidro: o fundo cinza do vídeo some na página branca (brilho + multiplicar + borda esfumada) */
  /* logotipo no canto de cima, sem aumentar a altura do topo (assim o cartão não desce nem cria rolagem) */
  .logo-topo-entrada { position: absolute; left: 28px; top: 12px; display: block; height: 88px; width: auto; }
  .topo nav { margin-left: auto; }
  .visita .letra-l { display: block; width: 150px; aspect-ratio: 1; margin: -18px 0 -14px -22px; }
  .visita .letra-l video { width: 100%; height: 100%; display: block; object-fit: cover; filter: brightness(1.09); mix-blend-mode: multiply;
                           -webkit-mask-image: radial-gradient(closest-side, #000 80%, transparent); mask-image: radial-gradient(closest-side, #000 80%, transparent); }
  .selo-anos { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 7px 16px 7px 8px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
               color: #0068A8; background: rgba(255,255,255,.78); border: 1px solid rgba(0,117,189,.16); box-shadow: 0 10px 26px rgba(18,51,74,.06); }
  .selo-anos b { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; color: #fff; font-size: 13px;
                 background: linear-gradient(180deg, var(--brilho), var(--azul)); box-shadow: 0 0 16px rgba(46,155,230,.45); font-variant-numeric: tabular-nums; }
  h1 { margin: 18px 0 14px; font-size: clamp(46px, 6.4vw, 84px); line-height: .96; letter-spacing: -.058em; font-weight: 700; color: var(--tinta); }
  h1 .grad { background: linear-gradient(100deg, #0F2A40 0%, #0075BD 55%, #2E9BE6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .2em; margin-bottom: -.2em; }
  .frase { margin: 0; max-width: 470px; font-size: 19px; line-height: 1.45; color: var(--suave); }
  .diferenciais { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
  .dif { display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border-radius: 18px; font-size: 14px; font-weight: 600; color: var(--tinta);
         background: rgba(255,255,255,.75); border: 1px solid rgba(0,117,189,.14); box-shadow: 0 12px 30px rgba(18,51,74,.07);
         -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform .35s var(--curva), box-shadow .35s; }
  .dif:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,117,189,.16); }
  .dif i { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; color: var(--azul);
           background: radial-gradient(circle at 35% 30%, #fff, #E1EFFA 70%); box-shadow: inset 0 0 0 1px rgba(0,117,189,.15); }
  .dif i svg { width: 18px; height: 18px; }
  .dif:hover i svg { animation: balanca .6s var(--curva); }
  @keyframes balanca { 30% { transform: rotate(-12deg) scale(1.1); } 70% { transform: rotate(8deg); } }
  .acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
  .acao { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 999px; font-weight: 650; font-size: 15px; text-decoration: none;
          transition: transform .2s var(--curva), box-shadow .3s, background .3s; }
  .acao.cheia { color: #fff; background: linear-gradient(180deg, #2E9BE6, #0075BD); box-shadow: 0 10px 30px rgba(0,117,189,.32); }
  .acao.cheia:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,117,189,.42); }
  .acao.vidro { color: var(--tinta); background: rgba(255,255,255,.75); border: 1px solid rgba(0,117,189,.25); }
  .acao.vidro:hover { transform: translateY(-2px); background: #fff; }
  .acao svg { width: 18px; height: 18px; }

  /* ---------- cartão de acesso ---------- */
  .cena { perspective: 1400px; }
  .inclina { transition: transform .5s var(--curva); transform-style: preserve-3d; }
  .cartao { position: relative; transform-style: preserve-3d; transition: transform .9s var(--curva); }
  .cartao.virado { transform: rotateY(180deg); }
  .face { position: relative; padding: 32px 32px 26px; border-radius: 30px; background: rgba(255,255,255,.80); border: 1px solid rgba(0,117,189,.14);
          box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 30px 70px rgba(18,51,74,.14); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
          backface-visibility: hidden; -webkit-backface-visibility: hidden; }
  .face.verso { position: absolute; inset: 0; transform: rotateY(180deg); }
  /* contorno de luz girando, como no escritório */
  .face::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
                  background: conic-gradient(from var(--giro, 0deg), transparent 0 68%, rgba(46,155,230,.95) 80%, rgba(154,202,238,.9) 86%, transparent 93%);
                  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: contorno 6s linear infinite; }
  @property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
  @keyframes contorno { to { --giro: 360deg; } }
  .face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
                 background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(46,155,230,.13), transparent 50%); }
  .face:hover::after { opacity: 1; }
  .face h2 { margin: 0 0 4px; font-size: 27px; letter-spacing: -.04em; color: var(--tinta); }
  .face .sub { margin: 0 0 6px; color: var(--suave); font-size: 14.5px; }
  .logo-portal { display: block; width: 100%; max-width: none; height: auto; margin: 4px 0 18px; font-family: var(--fonte); overflow: visible; }
  .logo-portal.pequeno { max-width: 250px; }
  .logo-portal .quadro { transform-box: fill-box; transform-origin: center; animation: quadro .7s .3s var(--curva) both; }
  @keyframes quadro { from { opacity: 0; transform: scale(.7) rotate(-8deg); } }
  .logo-portal .doc { transform-box: fill-box; animation: doc .9s .7s var(--curva) both; }
  @keyframes doc { from { transform: translateY(70px); } }
  .logo-portal .linhas { stroke-dasharray: 30; stroke-dashoffset: 30; animation: traco .6s 1.3s ease forwards; }
  .logo-portal .selo { transform-box: fill-box; transform-origin: center; animation: salto .6s 1.5s cubic-bezier(.3,1.6,.5,1) both; }
  @keyframes salto { from { opacity: 0; transform: scale(.2); } }
  .logo-portal .seta { animation: envia 2.8s 2.4s ease-in-out infinite; }
  @keyframes envia { 0%, 60%, 100% { transform: none; opacity: 1; } 30% { transform: translateY(-5px); opacity: .2; } 31% { transform: translateY(5px); opacity: 0; } }
  .logo-portal .t1, .logo-portal .t2 { opacity: 0; animation: aparece .8s var(--curva) forwards; }
  .logo-portal .t1 { animation-delay: 1.1s; } .logo-portal .t2 { animation-delay: 1.25s; }
  @keyframes traco { to { stroke-dashoffset: 0; } }
  @keyframes aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  /* movimento aprovado (prévia 1·2): o símbolo se desenha, "portal do" entra letra a letra e "Cliente" é revelado com uma luz */
  .logo-portal .risca { stroke-dasharray: 1; animation: risca 1s .75s var(--curva) both; }
  .logo-portal .quadro.risca { animation: quadro .7s .3s var(--curva) both, risca 1.1s .25s var(--curva) both; }
  @keyframes risca { from { stroke-dashoffset: 1; } }
  .logo-portal .t1 { opacity: 1; animation: none; }
  .logo-portal .t1 tspan { animation: letra-svg .5s var(--curva) both; animation-delay: calc(1.05s + var(--i) * .045s); }
  @keyframes letra-svg { from { fill-opacity: 0; } }
  .logo-portal .t2 { opacity: 1; animation: revela-svg .8s 1.45s var(--curva) both; }
  @keyframes revela-svg { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  .logo-portal .t2-brilho { pointer-events: none; }
  @media (prefers-reduced-motion: reduce) { .logo-portal .t2-brilho { display: none; } }
  .face:hover .logo-portal .selo { filter: drop-shadow(0 0 6px rgba(46,155,230,.8)); transition: filter .3s; }
  .sub-portal { margin-top: 0 !important; }
  .so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .acao.zap { gap: 10px; }
  .acao.zap svg { color: #1F9D55; }
  .rotulo-portal { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: #0068A8; }
  .rotulo-portal i { width: 8px; height: 8px; border-radius: 50%; background: var(--brilho); box-shadow: 0 0 10px var(--brilho); }
  .campo input { border: 1px solid #D3DEE8; background: rgba(255,255,255,.9); color: var(--tinta); }
  .campo input:focus { border-color: var(--azul); box-shadow: 0 0 0 4px rgba(0,117,189,.12), 0 10px 30px rgba(0,117,189,.08); background: #fff; }
  .campo label { color: #7D8C99; }
  .campo input:focus + label { color: var(--azul); }
  .olho { color: #7D8C99; }
  .olho:hover { color: var(--azul); background: #EEF5FB; }
  .dica-campo { color: var(--erro); }
  .dica-campo.aviso { color: #9A6512; }
  .botao.magnetico { transition: transform .25s var(--curva), box-shadow .3s; }
  .linha-links { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; font-size: 14px; }
  .link { border: 0; background: none; padding: 0; color: #0068A8; font-weight: 600; text-decoration: none; }
  .link:hover { text-decoration: underline; }
  .seguro { display: inline-flex; align-items: center; gap: 6px; color: var(--suave); font-size: 12.5px; }
  .seguro svg { width: 14px; height: 14px; color: var(--ok); }
  .rodape-cartao { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--linha); font-size: 13px; color: var(--suave); }
  .enviado { text-align: center; padding: 20px 0 6px; display: none; }
  .enviado.mostra { display: block; animation: sobe .7s var(--curva); }
  .envelope { width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 24px; display: grid; place-items: center; color: var(--azul);
              background: radial-gradient(circle at 35% 30%, #fff, #E6F1FA 65%); box-shadow: 0 16px 40px rgba(0,117,189,.22); animation: pousa .8s var(--curva); }
  @keyframes pousa { from { transform: translateY(-30px) rotate(-12deg); opacity: 0; } }

  /* conferência do acesso, passo a passo */
  .conferencia { display: none; }
  .face.conferindo .formulario { display: none; }
  .face.conferindo .conferencia { display: block; animation: sobe .5s var(--curva); }
  .anel { position: relative; width: 96px; height: 96px; margin: 6px auto 20px; border-radius: 50%;
          background: radial-gradient(circle, rgba(46,155,230,.14), transparent 65%); border: 1px solid rgba(0,117,189,.18); }
  .anel::before { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: gira 1.4s linear infinite;
                  background: conic-gradient(from 0deg, transparent 0 72%, rgba(0,117,189,.75) 100%); }
  .anel span { position: absolute; inset: 20px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--azul); font-weight: 700; font-size: 22px;
               box-shadow: 0 8px 24px rgba(0,117,189,.18); }
  .anel.ok::before { animation: none; background: conic-gradient(#2FB37A, #2FB37A); opacity: .25; }
  .anel.ok span { color: var(--ok); }
  .passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .passos li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; font-size: 14px; color: #9AA8B5;
               border: 1px solid var(--linha); background: rgba(255,255,255,.6); transition: all .4s var(--curva); }
  .passos li i { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1.5px solid #C9D6E0; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; }
  .passos li.vez { color: var(--tinta); border-color: rgba(0,117,189,.35); background: #F2F8FD; }
  .passos li.vez i { border-color: var(--azul); border-top-color: transparent; animation: gira .8s linear infinite; }
  .passos li.feito { color: var(--tinta); }
  .passos li.feito i { border-color: #2FB37A; background: #2FB37A; color: #fff; animation: pulo-passo .38s cubic-bezier(.3,1.6,.5,1); }
  .passos li i svg { width: 14px; height: 14px; overflow: visible; }
  .passos li i .tique { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: traco-tique .36s .08s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes traco-tique { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes pulo-passo { 50% { transform: scale(1.22); } }

  .boas-vindas { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; text-align: center; pointer-events: none; opacity: 0;
                 background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.96), rgba(255,255,255,.88)); transition: opacity .5s; }
  .boas-vindas.mostra { opacity: 1; pointer-events: auto; }
  .boas-vindas h3 { margin: 0; font-size: clamp(36px, 5vw, 60px); letter-spacing: -.05em; color: var(--tinta); }
  .boas-vindas p { margin: 8px 0 0; color: var(--suave); font-size: 17px; }

  @media (max-width: 960px) {
    .palco { grid-template-columns: 1fr; gap: 30px; padding-top: 0; }
    .diferenciais { display: none; }
    h1 { font-size: 46px; }
  }
  @media (max-width: 480px) {
    .face { padding: 24px 20px 20px; } .palco, .topo { padding-left: 16px; padding-right: 16px; }
    .topo { padding-top: 14px; padding-bottom: 6px; }
    .palco { gap: 20px; min-height: 0; }
    .visita .logo-vivo { width: 92px; }
    .visita .letra-l { width: 104px; margin: 0 0 -10px -14px; }
    .logo-topo-entrada { position: static; height: 72px; }
    .selo-anos { margin-top: 14px; }
    h1 { font-size: 38px; margin: 12px 0 8px; }
    .frase { font-size: 16px; }
    .acoes { display: none; }
  }

/* ---------- criar senha ---------- */
.forca { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 2px 0; }
.forca i { height: 5px; border-radius: 5px; background: #E3EBF2; transition: background .3s; }
.forca[data-nivel="1"] i:nth-child(-n+1) { background: #D9534F; }
.forca[data-nivel="2"] i:nth-child(-n+2) { background: #E0A11B; }
.forca[data-nivel="3"] i:nth-child(-n+3) { background: #2E9BE6; }
.forca[data-nivel="4"] i { background: #2FB37A; }
.regras { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; color: var(--suave); }
.regras li::before { content: "○"; display: inline-block; width: 20px; color: #B7C6D3; }
.regras li.ok { color: var(--ok); }
.regras li.ok::before { content: "✓"; color: var(--ok); font-weight: 800; }

/* ---------- início do cliente ---------- */
.topo-inicio { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 16px; max-width: 1100px; margin: 0 auto; padding: 18px 28px; }
.logo-topo { height: 58px; width: auto; }
.topo-inicio .quem { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--suave); }
.inicio { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 20px 28px 60px; }
.ola { margin: 10px 0 6px; font-size: clamp(36px, 5vw, 56px); line-height: 1; letter-spacing: -.05em; color: var(--tinta); }
.ola .grad { background: linear-gradient(100deg, #0F2A40 0%, #0075BD 55%, #2E9BE6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .2em; margin-bottom: -.2em; }
.empresas { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 8px; }
.empresa { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 18px; text-align: left; cursor: pointer;
           background: rgba(255,255,255,.75); border: 1px solid rgba(0,117,189,.14); box-shadow: 0 10px 26px rgba(18,51,74,.06); transition: all .3s var(--curva); }
.empresa .letra { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; color: var(--azul); background: #E6F1FA; }
.empresa b { display: block; color: var(--tinta); font-size: 15px; }
.empresa small { color: var(--suave); font-size: 12.5px; }
.empresa[aria-selected="true"] { border-color: rgba(0,117,189,.5); box-shadow: 0 0 0 3px rgba(0,117,189,.12), 0 14px 30px rgba(0,117,189,.12); }
.faixa-suspensa { margin: 14px 0; padding: 14px 18px; border-radius: 16px; background: #FBF1DE; color: #7A4F0D; font-size: 14.5px; }
.portas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 18px; }
.porta { position: relative; display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 24px; text-align: left;
         background: rgba(255,255,255,.8); border: 1px solid rgba(0,117,189,.14); box-shadow: 0 18px 40px rgba(18,51,74,.08);
         -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: transform .35s var(--curva), box-shadow .35s; animation: sobe .7s var(--curva) both; }
.porta:hover { transform: translateY(-5px); box-shadow: 0 26px 50px rgba(0,117,189,.14); }
.porta img { width: 60px; height: 60px; filter: drop-shadow(0 10px 16px rgba(0,117,189,.2)); transition: transform .5s var(--curva); }
.porta:hover img { transform: translateY(-3px) rotate(-4deg) scale(1.05); }
.porta b { display: block; color: var(--tinta); font-size: 17px; letter-spacing: -.02em; }
.porta small { display: block; color: var(--suave); font-size: 13.5px; margin-top: 2px; }
.porta .ultimo-envio { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 3px 10px 3px 8px; border-radius: 999px;
  background: #EAF4FC; color: #00578C; font-size: 13.5px; font-weight: 600; }
.porta .ultimo-envio::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7FA7C6; }  /* neutra: o portal não tem prazos */
.porta .breve { position: absolute; top: 14px; right: 14px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #0068A8; background: #E6F1FA; }
.aviso-breve { display: flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 14px; color: var(--suave); }
.aviso-breve i { width: 8px; height: 8px; border-radius: 50%; background: var(--brilho); box-shadow: 0 0 10px var(--brilho); flex: none; }
@media (max-width: 480px) { .topo-inicio, .inicio { padding-left: 16px; padding-right: 16px; } .logo-topo { height: 46px; } .topo-inicio .quem span { display: none; } }

/* mascote e pedido do nome */
.cena { position: relative; }
.mascote.mascote-cartao { position: absolute; left: -96px; bottom: 26px; width: 92px; z-index: 6; }
.mascote.mascote-cartao .mascote-balao { right: 45%; left: auto; bottom: 100%; margin: 0 0 4px; border-radius: 16px 16px 4px 16px; transform-origin: bottom right; }
.mascote.mascote-canto { position: fixed; right: 22px; bottom: 18px; width: 84px; z-index: 20; }
/* em pé sobre a linha do rodapé (a linha fica a 34px do topo do rodapé) */
.mascote.mascote-rodape { position: absolute; right: max(108px, calc((100% - 1240px) / 2 + 28px)); /* longe do botão do WhatsApp */ bottom: calc(100% - 42px); width: 76px; z-index: 3; }
.pedir-nome { margin: 22px 0 6px; padding: 18px 20px; border-radius: 22px; max-width: 560px; background: rgba(255,255,255,.85); border: 1px solid rgba(0,117,189,.2);
              box-shadow: 0 18px 40px rgba(0,117,189,.10); animation: sobe .6s var(--curva) both; }
.pedir-nome label b { display: block; color: var(--tinta); font-size: 16px; }
.pedir-nome label small { color: var(--suave); }
.pedir-nome-linha { display: flex; gap: 10px; margin-top: 12px; }
.pedir-nome-linha .entrada { flex: 1; min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 1px solid #D3DEE8; font-size: 16px; }
@media (max-width: 960px) {
  .mascote.mascote-cartao { left: auto; right: 16px; bottom: auto; top: -36px; width: 56px; }
  .mascote.mascote-cartao .mascote-balao { left: auto; right: 100%; bottom: 40%; margin: 0 6px 0 0; min-width: 0; width: 160px; border-radius: 16px 16px 4px 16px; transform-origin: bottom right; }
}
@media (max-width: 480px) { .mascote.mascote-canto { width: 62px; right: 10px; bottom: 10px; } .mascote.mascote-rodape { width: 60px; right: 84px; bottom: calc(100% - 40px); } }
/* "Esqueci minha senha" chamando atenção depois de uma senha errada */
#esqueci.chama { animation: chama 1.1s ease-in-out 3; border-radius: 8px; }
@keyframes chama { 50% { background: rgba(46,155,230,.14); box-shadow: 0 0 0 6px rgba(46,155,230,.14); } }
.dica-campo.sugestao .link { margin-left: 4px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { #esqueci.chama { animation: none; text-decoration: underline; } }
/* botão "Entrar" atendendo o clique: círculo girando no lugar da seta */
.botao.carregando { cursor: progress; opacity: .92; }
.botao.carregando svg { display: none; }
.botao.carregando::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.45);
  border-top-color: #fff; animation: gira-botao .8s linear infinite; }
@keyframes gira-botao { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .botao.carregando::before { animation-duration: 2.4s; } }

/* aviso "Coloque o portal na tela do celular" (uma vez por aparelho) */
.dica-icone { display: grid; grid-template-columns: 48px 1fr; gap: 12px 14px; align-items: center; margin: 20px 0 18px; padding: 14px 16px; border-radius: 18px;
  background: rgba(255,255,255,.82); border: 1px solid rgba(0,117,189,.18); box-shadow: 0 14px 34px rgba(18,51,74,.08); }
.dica-icone[hidden] { display: none; }
.dica-icone img { border-radius: 12px; }
.dica-icone b { display: block; color: var(--tinta); font-size: 15px; }
.dica-icone small { display: block; color: var(--suave); font-size: 13px; line-height: 1.45; margin-top: 2px; }
.dica-icone-bts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.dica-icone-bts .lv-btn, .dica-icone-bts .pilula { min-height: 44px; padding: 8px 18px; font-size: 14px; }

/* troca de página (prévia 3): o logotipo do topo e o título da página "voam" para a página seguinte */
.topo-inicio .logo-topo { view-transition-name: logo-topo; }
.inicio .ola { view-transition-name: titulo-pagina; }
::view-transition-group(logo-topo), ::view-transition-group(titulo-pagina) { animation-duration: .6s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

/* janela de confirmação própria */
.jl-fundo { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: rgba(6,17,28,.45); animation: jl-entra .2s ease both; }
.jl-caixa { width: min(440px, 100%); background: #fff; border-radius: 22px; padding: 22px; box-shadow: 0 30px 80px rgba(6,17,28,.35); animation: jl-sobe .28s cubic-bezier(.2,.8,.2,1) both; }
.jl-caixa h2 { margin: 0 0 10px; font-size: 20px; letter-spacing: -.02em; color: var(--tinta); }
.jl-caixa p { margin: 0 0 10px; font-size: 15px; line-height: 1.5; color: var(--texto); }
.jl-campo { width: 100%; box-sizing: border-box; border: 1px solid #DCE6EF; border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 15px; margin: 4px 0 6px; }
.jl-aviso { color: #B4321F !important; font-weight: 600; min-height: 1em; }
.jl-botoes { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; }
.jl-botoes .lv-btn { min-height: 46px; padding: 10px 20px; }
.jl-perigo { background: #B4321F; color: #fff; border: 0; }
@keyframes jl-entra { from { opacity: 0; } } @keyframes jl-sobe { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .jl-fundo, .jl-caixa { animation: none; } }
/* aviso de navegador embutido */
.aviso-navegador { position: relative; z-index: 60; display: grid; gap: 6px; margin: 0; padding: 12px 16px; background: #FFF8EC; border-bottom: 1px solid #F0D9A8; color: #6B4A0E; font-size: 14px; line-height: 1.45; }
.aviso-navegador b { font-size: 15px; } .aviso-navegador .pilula { justify-self: start; min-height: 44px; }

/* troca de página comum: sem cortina; só o logotipo e o título se movem */
html.troca-suave::view-transition-old(root), html.troca-suave::view-transition-new(root) { animation: none; }
/* abertura já vista hoje: tudo pronto, parado */
html.abertura-vista .logo-portal *, html.abertura-vista .logo-portal { animation: none !important; }
html.abertura-vista .logo-portal .t2-brilho { display: none; }
/* 5.5 (C4): entrar sem senha (link no e-mail) */
#campoSenha[hidden], .linha-links .link[hidden] { display: none; }
.linha-links { flex-wrap: wrap; gap: 6px 14px; }
.modo-link .dica-campo.ok { color: #1F7A4D; }
/* 5.5 (C5): modo calmo — sem ondas no fundo, letras maiores, sem entradas animadas; mascote só para comemorar */
html.modo-calmo canvas.camada { display: none; }
html.modo-calmo .sobe, html.modo-calmo .porta { animation: none !important; opacity: 1 !important; transform: none !important; }
html.modo-calmo :is(p, li, label, small, dd, dt, .arq-msg, .ultimo-envio, .pedido-porta) { font-size: max(1em, 16px); line-height: 1.55; }
html.modo-calmo .em-calma { opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
/* 5.6: código de 6 números no verso do cartão */
.bloco-codigo { margin-top: 14px; text-align: left; }
.bloco-codigo[hidden] { display: none; }
.bloco-codigo input { letter-spacing: .3em; font-variant-numeric: tabular-nums; }
/* 5.7: data na janela própria ("mando até") */
.jl-data { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; font-size: 13.5px; color: #5B6B7A; }
.jl-data input { border: 1px solid #DCE6EF; border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 15px; color: var(--tinta, #0F2A40); }
.jl-atalhos { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.jl-atalho { min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid #DCE6EF; background: #fff; font: inherit; font-size: 14px; color: #0F2A40; cursor: pointer; }
.jl-atalho.escolhido { background: #0075BD; border-color: #0075BD; color: #fff; }
.jl-data input[hidden] { display: none; }