/* Zera Hub (telas de acesso copiadas do ZeraSync 2 em 14/10/2026 e adaptadas) — entrar, criar conta, confirmar,
   esqueci, redefinir e convite. Dividida como no ZeraSync 2: formulário escuro à esquerda, lado da marca
   azul-aço -> índigo à direita, aqui com a vitrine dos ladrilhos acendendo (DESIGN do hub §8). Esqueci,
   redefinir e convite usam o mesmo cartão escuro, centralizado (.acesso-centro). */

.entrar-split { display: grid; grid-template-columns: minmax(380px, 46%) 1fr; min-height: 100vh; min-height: 100dvh; }

/* ---------------------------------------------------------- lado do formulário (escuro nos dois temas) */
.entrar-form, .acesso-centro {
  color-scheme: dark;
  --sup: #111b21; --sup-2: #17222a; --afundado: #0d171d; --linha: #26333c; --linha-forte: #34434e;
  --txt: #e9edef; --txt-2: #b4c0c8; --txt-3: #8d9ba5; --hover: rgba(255,255,255,.06);
  --zera: #8fb0cf; --zera-txt: #8fb0cf; --zera-brilho: rgba(143,176,207,.35);
  background: radial-gradient(1200px 600px at -10% -20%, rgba(91,122,153,.22), transparent 60%), #0e161d;
  color: var(--txt); display: flex; align-items: center; justify-content: center; padding: 40px 28px;
}
.caixa-entrar { width: min(400px, 100%); display: flex; flex-direction: column; gap: 22px; animation: surgir var(--t-entrada); }
.marca-login { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.marca-login img { height: 44px; width: auto; }
.entrar-bemvindo { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.subtitulo { color: var(--txt-2); margin-top: 6px; font-size: 14px; line-height: 1.5; }
.entrar-form form, .acesso-centro form { display: flex; flex-direction: column; gap: 16px; }
.entrar-form .campo input:not([type=checkbox]), .acesso-centro .campo input:not([type=checkbox]) { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; background: var(--afundado); border: 1px solid var(--linha-forte); color: var(--txt); font-size: 15px; transition: border-color var(--t-rapido), box-shadow var(--t-rapido); }
.entrar-form .campo input:focus, .acesso-centro .campo input:focus { outline: none; border-color: #6d8fb3; box-shadow: 0 0 0 3px rgba(109,143,179,.3), 0 0 22px rgba(109,143,179,.25); }
.entrar-form .campo input.invalido, .entrar-form .campo input.invalida, .acesso-centro .campo input.invalido { border-color: var(--erro); }
.entrar-form .campo label, .acesso-centro .campo label { color: var(--txt-2); font-size: 13px; }
.campo .opcional { color: var(--txt-3); font-weight: 500; }
.campo-senha { position: relative; }
.campo-senha input { padding-right: 46px !important; }
.campo-senha .olho { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.erro-msg { font-size: 12.5px; color: #f0918f; min-height: 0; }
.erro-msg:empty { display: none; }
.linha-opcoes { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; flex-wrap: wrap; }
.linha-opcoes label, .linha-aceite { display: inline-flex; align-items: center; gap: 8px; color: var(--txt-2); cursor: pointer; }
.linha-aceite { align-items: flex-start; font-size: 13.5px; line-height: 1.45; }
.linha-aceite input { margin-top: 2px; flex: none; }
.entrar-form a, .acesso-centro a { color: #9cc0e3; }
.entrar-form .btn, .acesso-centro .btn { --b-bg: #1b2731; --b-hover: #233240; --b-txt: var(--txt); }
.entrar-form .btn.btn-primario, .entrar-form .btn.btn-entrar, .acesso-centro .btn.btn-primario { --b-bg: #5b7a99; --b-hover: #6c8cab; --b-txt: #fff; height: 46px; border-radius: 12px; font-size: 15px; width: 100%; box-shadow: 0 8px 24px rgba(91,122,153,.35); }
.entrar-form .btn.btn-entrar, .acesso-centro .btn.btn-primario { position: relative; overflow: hidden; }
.btn-linha { width: 100%; height: 44px; border-radius: 12px; }
.link-botao { background: none; border: 0; padding: 0; color: #9cc0e3; font: inherit; font-size: 13.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.link-botao:hover { color: #c3dbf1; }
.link-botao[disabled] { color: var(--txt-3); cursor: default; text-decoration: none; }
.aviso-entrar { padding: 11px 13px; border-radius: 10px; background: rgba(229,113,111,.14); color: #f3a6a5; font-size: 13.5px; line-height: 1.45; }
.aviso-entrar.info { background: rgba(143,176,207,.14); color: #b9d0e6; }
.aviso-entrar.ok { background: rgba(37,211,102,.12); color: #8fe3b0; }
.aviso-entrar a { color: inherit; font-weight: 650; }
.oculto { display: none !important; }
.peq { font-size: 12.5px; color: var(--txt-3); line-height: 1.5; }
.mt8 { margin-top: 8px; }
.entrar-nota, .rodape-form { text-align: center; }
.rodape-form { font-size: 13.5px; color: var(--txt-2); }
.separador-ou { display: flex; align-items: center; gap: 12px; color: var(--txt-3); font-size: 12px; }
.separador-ou::before, .separador-ou::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
/* o texto de ajuda do campo (div.dica) não é a dica flutuante do componentes.css */
.campo .dica { position: static; padding: 0; background: none; box-shadow: none; white-space: normal; animation: none; border-radius: 0; color: var(--txt-3); font-size: 12px; clip-path: none; }

/* medidor de força da senha: quatro trechos com o corte na ponta; o texto diz o nível (nunca só cor) */
.medidor-senha { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.medidor-senha .trechos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; flex: 1; }
.medidor-senha .trechos i { height: 5px; border-radius: 2px; background: var(--linha-forte); clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 0 100%); transition: background var(--t-estado); }
.medidor-senha[data-nivel="1"] .trechos i:nth-child(-n+1) { background: #e5716f; }
.medidor-senha[data-nivel="2"] .trechos i:nth-child(-n+2) { background: #e3a34b; }
.medidor-senha[data-nivel="3"] .trechos i:nth-child(-n+3) { background: #8fb0cf; }
.medidor-senha[data-nivel="4"] .trechos i:nth-child(-n+4) { background: #25d366; }
.medidor-senha .nivel { font-size: 12px; color: var(--txt-3); min-width: 88px; text-align: right; }

/* código de 6 dígitos em 6 caixas: cola o código inteiro, avança sozinho */
.caixas-codigo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.caixas-codigo input { height: 56px; min-width: 0; text-align: center; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; border-radius: 12px; background: var(--afundado); border: 1px solid var(--linha-forte); color: var(--txt); caret-color: #8fb0cf; transition: border-color var(--t-rapido), box-shadow var(--t-rapido), transform var(--t-rapido); }
.caixas-codigo input:focus { outline: none; border-color: #6d8fb3; box-shadow: 0 0 0 3px rgba(109,143,179,.3); }
.caixas-codigo input.cheia { border-color: #6d8fb3; }
.caixas-codigo.errado input { border-color: var(--erro); animation: tremer 360ms; }
.caixas-codigo.certo input { border-color: #25d366; }
@keyframes tremer { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------------------------------------------------------- lado da marca (direita) */
.entrar-marca {
  position: relative; overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: center; gap: 36px;
  padding: 56px clamp(28px, 5vw, 80px);
  background: radial-gradient(900px 500px at 110% -10%, rgba(155,92,255,.35), transparent 60%),
              radial-gradient(700px 500px at -10% 110%, rgba(37,211,102,.14), transparent 60%),
              linear-gradient(150deg, #4b6a8a 0%, #3f5a86 45%, #4a4fb0 100%);
}
.entrar-marca::before { content: ""; position: absolute; inset: 0; opacity: .08; pointer-events: none; background-image: radial-gradient(circle at 2px 2px, #fff 1.2px, transparent 1.6px); background-size: 26px 26px; }
.entrar-marca-conteudo { position: relative; max-width: 560px; animation: surgir 700ms cubic-bezier(.16,1,.3,1) both; }
.entrar-titulo { font-size: clamp(26px, 3vw, 38px); line-height: 1.12; font-weight: 750; letter-spacing: -0.025em; }
.entrar-titulo em { font-style: normal; background: linear-gradient(90deg, #cfe0f0 0%, #ffffff 45%, #cfe0f0 70%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: brilho-titulo 5.5s linear infinite; }
@keyframes brilho-titulo { from { background-position: 120% 0; } to { background-position: -100% 0; } }
.entrar-sub { margin-top: 14px; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.84); max-width: 500px; }
.entrar-rodape-marca { position: absolute !important; bottom: 20px; left: clamp(28px, 5vw, 80px); display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(255,255,255,.7); }
.entrar-rodape-marca img { height: 22px; width: auto; opacity: .92; }
.rede-neural { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.entrar-marca > *:not(.rede-neural):not(.orbe) { position: relative; z-index: 1; }
.orbe { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .55; pointer-events: none; z-index: 0; animation: orbe-vagar 16s ease-in-out infinite; }
.orbe-1 { width: 340px; height: 340px; background: #9b5cff; top: -90px; right: -60px; }
.orbe-2 { width: 300px; height: 300px; background: #25d366; bottom: -120px; left: -80px; opacity: .26; animation-duration: 19s; animation-delay: -6s; }
.orbe-3 { width: 220px; height: 220px; background: #5b7a99; top: 42%; left: 46%; opacity: .5; animation-duration: 22s; animation-delay: -11s; }
@keyframes orbe-vagar { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(28px, -22px) scale(1.06); } 66% { transform: translate(-22px, 18px) scale(.96); } }

/* a vitrine do hub: três ladrilhos cinza; um cursor contrata o primeiro, ele acende; depois o segundo */
.vitrine-hub { position: relative; width: min(660px, 100%); display: flex; flex-direction: column; gap: 14px; }
.vitrine-hub .vh-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vitrine-hub .ladrilho { filter: drop-shadow(0 18px 30px rgba(10, 15, 40, .28)); }
.vitrine-hub .ladrilho.cinza { filter: grayscale(1) drop-shadow(0 12px 24px rgba(10, 15, 40, .22)); opacity: .86; }
.vitrine-hub .ladrilho.cinza:hover { transform: none; }
.vitrine-hub .ladrilho-desc { -webkit-line-clamp: 3; min-height: calc(12.5px * 1.45 * 3); }
.vitrine-hub .ladrilho-acoes .btn { pointer-events: none; }
.vitrine-hub .ladrilho-acoes .btn.apertado { transform: scale(.95); }
.vh-aviso { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 10px; border-radius: 999px; background: #fff; color: #0e6d3a; font-size: 13px; font-weight: 700;
  box-shadow: 0 12px 28px rgba(10, 15, 40, .28); opacity: 0; transform: translateY(6px); transition: opacity 260ms, transform 260ms cubic-bezier(.16,1,.3,1); }
.vh-aviso .vh-ok { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #053b1d; }
.vh-aviso.visivel { opacity: 1; transform: none; }
.vh-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 28px; z-index: 3; pointer-events: none; opacity: 0;
  background: #fff; clip-path: polygon(0 0, 100% 64%, 58% 66%, 76% 100%, 60% 100%, 42% 70%, 0 92%); filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
  transition: transform 1s cubic-bezier(.65, 0, .35, 1), opacity 300ms; }
.vh-cursor.visivel { opacity: 1; }
.vh-cursor.clique { animation: vh-clique 260ms; }
@keyframes vh-clique { 50% { scale: .82; } }
.vitrine-hub.saindo .vh-grade, .vitrine-hub.saindo .vh-aviso { opacity: 0; transition: opacity 420ms; }

@media (max-width: 1199px) { .vitrine-hub .vh-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vitrine-hub .ladrilho:nth-child(3) { display: none; } }
@media (max-width: 900px) {
  .entrar-split { grid-template-columns: 1fr; }
  .entrar-marca { display: none; }
}

/* ---------------------------------------------------------- cartão escuro centralizado (esqueci, redefinir, convite) */
.acesso-centro { min-height: 100vh; min-height: 100dvh; }
.acesso-centro .caixa-entrar { width: min(440px, 100%); padding: 32px 30px 28px; border-radius: 20px; background: rgba(17, 27, 33, .72); border: 1px solid var(--linha); box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  clip-path: none; }   /* G1.19: o cartão fechado, sem o recorte do canto (pedido do Albert) */
@media (max-width: 520px) { .acesso-centro { padding: 20px 14px; } .acesso-centro .caixa-entrar { padding: 26px 18px 22px; } }

/* ------------------------------------------------------------------ movimento */
.caixa-entrar > * { animation: surgir 560ms cubic-bezier(.16,1,.3,1) both; }
.caixa-entrar > *:nth-child(2) { animation-delay: 70ms; } .caixa-entrar > *:nth-child(3) { animation-delay: 140ms; } .caixa-entrar > *:nth-child(4) { animation-delay: 210ms; } .caixa-entrar > *:nth-child(5) { animation-delay: 280ms; }
.entrar-form .btn.btn-entrar::after, .acesso-centro .btn.btn-primario::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-120%) skewX(-18deg); animation: brilho-passa 3.6s ease-in-out 1.2s infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .orbe, .entrar-titulo em, .entrar-form .btn.btn-entrar::after, .acesso-centro .btn.btn-primario::after, .caixa-entrar > *, .entrar-marca-conteudo, .caixas-codigo.errado input { animation: none !important; }
  .vh-cursor, .vh-aviso { transition: none; }
}

/* ------------------------------------------------------------------ a faixa de cima: idioma e tema (DESIGN §10)
   Fica no topo do lado do formulário (escuro nos dois temas), à direita; o conteúdo desce para não encostar. */
.entrar-form, .acesso-centro { position: relative; padding-top: 84px; }
.faixa-acesso { position: absolute; top: 18px; right: 22px; z-index: 2; display: flex; align-items: center; gap: 10px; }
.faixa-acesso:empty { display: none; }
@media (max-width: 520px) {
  .entrar-form, .acesso-centro { padding-top: 76px; }
  .faixa-acesso { top: 14px; right: 14px; left: 14px; justify-content: flex-end; }
}

/* vínculo da conta do ZeraSync (vincular.html): resumo da conta e escolha entre manter e trocar a senha */
.vinculo-resumo { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 12px; font-size: 13.5px; color: var(--txt-2); }
.vinculo-linha { display: flex; flex-wrap: wrap; gap: 6px; overflow-wrap: anywhere; }
.vinculo-linha b { color: var(--txt-1); font-weight: 600; }
.vinculo-rotulo { color: var(--txt-3); }
.dica-vinculo { margin: 0; font-size: 12.5px; color: var(--txt-3); }
.escolha-senha { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; padding: 0; border: 0; font-size: 14px; }
.escolha-senha label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
/* desafio anti-robô (Turnstile, B12): o widget só aparece quando a Cloudflare pede interação */
.caixa-desafio { display: flex; justify-content: center; margin: 2px 0; }

/* ------------------------------------------------------------------ login social (F1, desenho do G1.13)
   Dois por linha (Google à esquerda, Facebook à direita) e o que sobra sozinho embaixo, centralizado, na largura de
   um deles. Cada marca com a cor das diretrizes dela: Google branco (texto #1f1f1f, borda #747775), Facebook no azul
   oficial #1877F2 com o "f" branco, GitHub preto com a marca branca e uma borda clara para não sumir no fundo escuro.
   Provedor sem regra própria fica no neutro da base. Botão estreito mostra só o nome ("Google"); o nome anunciado
   continua o inteiro (aria-label). O selo "Último usado" fica sobre a borda, para não espremer o rótulo. */
.bloco-social { display: flex; flex-direction: column; gap: 16px; }
.botoes-sociais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; container-type: inline-size; }
.botoes-sociais > .btn-social:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); }
.botoes-sociais > .btn-social:only-child { width: 100%; }
.btn-social {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px;
  padding: 8px 12px; border-radius: 12px; border: 1px solid var(--linha-forte); background: var(--sup-2); color: var(--txt);
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.25; text-align: center; cursor: pointer;
  transition: background var(--t-estado), border-color var(--t-estado);
}
.btn-social:hover { background: #1f2d38; border-color: #46596a; }
.btn-social:focus-visible { outline: 2px solid #9cc0e3; outline-offset: 2px; }
.btn-social:disabled { opacity: .6; cursor: progress; }
.btn-social .icone-social { flex: none; width: 20px; height: 20px; }
.btn-social .rotulo-social { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-social .rotulo-curto { display: none; white-space: nowrap; }
@container (max-width: 499px) {
  .btn-social .rotulo-social { display: none; }
  .btn-social .rotulo-curto { display: inline; }
}
.btn-social[data-provedor="google"] { background: #fff; color: #1f1f1f; border-color: #747775; }
.btn-social[data-provedor="google"]:hover { background: #f1f3f4; border-color: #747775; }
.btn-social[data-provedor="facebook"] { background: #1877f2; color: #fff; border-color: #1877f2; }
.btn-social[data-provedor="facebook"]:hover { background: #166fe5; border-color: #166fe5; }
.btn-social[data-provedor="github"] { background: #000; color: #fff; border-color: rgba(255,255,255,.3); }
.btn-social[data-provedor="github"]:hover { background: #161b22; border-color: rgba(255,255,255,.5); }
.btn-social .selo-ultimo {
  position: absolute; top: -9px; right: 10px; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(143,176,207,.55);
  background: #0e161d; color: #b9d0e6; font-size: 11px; font-weight: 600; line-height: 1.45; white-space: nowrap;
}
/* etapa pendente de entrar (?social=2fa ou ?social=codigo): só a marca, o aviso do topo e a etapa aparecem */
.caixa-entrar.etapa-social > :not(.marca-login):not(#etapa-social):not(#aviso-topo) { display: none !important; }
.caixa-entrar.etapa-social > #etapa-social { display: flex !important; }

/* ------------------------------------------------------------------ G1.13 e G1.13.1: entrar e cadastro largos e finos
   Campos, Entrar e botões sociais com até 680 px (85% do painel: 680 a 1920, 563 a 1440, 534 a 1366) e 35 px de
   altura, com fonte de 14,5 px (G1.13.1, pedido do Albert: "ainda mais largos e mais finos"). Em tela de toque
   (pointer: coarse) a altura volta a 44 px, o alvo mínimo de toque. No celular, a largura toda menos 18 px de cada
   lado. Em janela baixa (até 820 px de altura) o espaço de cima e os vãos encolhem. As demais telas de acesso não
   mudam. A seta do rodapé é SVG inline de traço (entrar.html e criar-conta.html), nítida em qualquer zoom. */
.entrar-form .caixa-entrar.caixa-larga { width: min(680px, calc((100% + 56px) * .85), 100%); gap: 18px; }
.caixa-larga form { gap: 12px; }
.caixa-larga .campo { gap: 5px; }
.entrar-form .caixa-larga .campo input:not([type=checkbox]) { height: 35px; font-size: 14.5px; padding: 0 13px; border-radius: 9px; }
.entrar-form .caixa-larga .campo label { font-size: 13px; }
.entrar-form .caixa-larga .campo-senha input { padding-right: 40px !important; }
.caixa-larga .campo-senha .olho { width: 30px; height: 30px; right: 3px; }
/* o Entrar (e o Continuar do cadastro) nasce no azul vivo de ação, como na Umbler (G1.13.1, pedido do Albert): branco
   sobre #2563eb dá 5,17:1 e o botão contra o painel 3,53:1; o azul-aço de antes dava 4,48:1. Desabilitado só enquanto
   o pedido vai (acesso.js::ocupado); campo vazio não trava o botão: o clique mostra o aviso e foca o que falta */
.entrar-form .caixa-larga .btn.btn-entrar { --b-bg: #2563eb; --b-hover: #1d4ed8; height: 35px; font-size: 14.5px; border-radius: 9px;
  box-shadow: 0 8px 22px rgba(37, 99, 235, .32); }
.caixa-larga .bloco-social { gap: 14px; }
.caixa-larga .botoes-sociais { gap: 8px; }
.caixa-larga .botoes-sociais > .btn-social:last-child:nth-child(odd) { width: calc(50% - 4px); }
.caixa-larga .botoes-sociais > .btn-social:only-child { width: 100%; }
.caixa-larga .btn-social { min-height: 35px; padding: 4px 12px; border-radius: 9px; font-size: 14px; gap: 9px; }
.caixa-larga .btn-social .icone-social { width: 17px; height: 17px; }
.caixa-larga .btn-social .selo-ultimo { top: -8px; font-size: 10.5px; padding: 0 7px; }
/* HUB-3: o mesmo selo no Entrar quando o último acesso foi o e-mail e a senha (login-social.js::seloNaSenha) */
.entrar-form .caixa-larga .btn.btn-entrar[data-selo] { overflow: visible; }
.entrar-form .caixa-larga .btn.btn-entrar[data-selo]::before {
  content: attr(data-selo); position: absolute; top: -8px; right: 10px; padding: 0 7px; border-radius: 999px;
  border: 1px solid rgba(143,176,207,.55); background: #0e161d; color: #b9d0e6; font-size: 10.5px; font-weight: 600;
  line-height: 1.45; white-space: nowrap; pointer-events: none;
}
@media (pointer: coarse) {
  .entrar-form .caixa-larga .campo input:not([type=checkbox]), .entrar-form .caixa-larga .btn.btn-entrar,
  .caixa-larga .btn-social { height: 44px; min-height: 44px; }
  .caixa-larga .campo-senha .olho { width: 38px; height: 38px; }
}
.rodape-form.rodape-seta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; color: var(--txt-3); font-size: 14px; }
.rodape-seta a { display: inline-flex; align-items: center; gap: 5px; color: #9cc0e3; font-weight: 650; text-decoration: none; }
.rodape-seta .seta { flex: none; width: 15px; height: 15px; transition: transform var(--t-rapido); }
.rodape-seta a:hover { color: #c3dbf1; }
.rodape-seta a:hover .seta { transform: translateX(2px); }
@media (min-width: 901px) and (max-height: 820px) {
  .entrar-form:has(.caixa-larga) { padding-top: 56px; padding-bottom: 16px; }
  .entrar-form .caixa-entrar.caixa-larga { gap: 15px; }
  .caixa-larga .marca-login img { height: 36px; }
  .caixa-larga .campo { gap: 4px; }
  .caixa-larga .bloco-social { gap: 12px; }
  .caixa-larga form { gap: 10px; }
  .caixa-larga > #etapa { gap: 14px !important; }
}
@media (max-width: 600px) {
  .entrar-form:has(.caixa-larga) { padding-left: 18px; padding-right: 18px; }
  .entrar-form .caixa-entrar.caixa-larga { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .btn-social, .rodape-seta .seta { transition: none; } }

/* ------------------------------------------------------------------ G1.15: acesso simples, plano e enquadrado
   Pedido do Albert de 20/10/2026 ("muito CHAMATIVA"), com a Umbler medida pela Coordenação. Desenho plano: campos sem
   fundo, borda de 2 px e raio de 16 px; botão em pílula, azul liso, sem sombra e sem o reflexo; rótulos de 14 px sem
   negrito; uma linha cinza sob a logo no lugar do título e do subtítulo. Altura de 35 px mantida (44 px no toque).
   Enquadramento: 50/50 a partir de 1280 px, coluna de 64% do painel (teto de 616 px), bloco no centro vertical
   (margem automática: em janela baixa ele começa a 48 px e a página rola, sem cortar), logo e linha no centro. A borda
   dos campos é #646b78 (3:1 sobre o painel; a da Umbler, rgb(61,64,71), daria 1,76:1). As telas de acesso ficam
   sempre no tema escuro (tema-inicial.js, data-tela="acesso"). */
@media (min-width: 1280px) { .entrar-split { grid-template-columns: 1fr 1fr; } }
.entrar-form:has(.caixa-larga) { background: #0e161d; align-items: flex-start; padding: 48px 24px; }
.entrar-form .caixa-entrar.caixa-larga { width: min(616px, calc((100% + 48px) * .64), 100%); margin: auto 0; gap: 24px; animation: none; }
.caixa-larga > * { animation: none; }
.faixa-acesso { top: 24px; right: 24px; }
.caixa-larga .marca-login { justify-content: center; margin: 0; }
.caixa-larga .marca-login img { height: 36px; }
.linha-acesso { margin: -8px 0 0; text-align: center; font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: 0; color: #898b90; }
.caixa-larga .etapa-acesso { gap: 24px; }
.caixa-larga form { gap: 16px; }
.caixa-larga .campo { gap: 8px; }
.entrar-form .caixa-larga .campo label { font-size: 14px; font-weight: 400; color: #d3d6dd; }
.entrar-form .caixa-larga .campo input:not([type=checkbox]), .entrar-form .caixa-larga .campo select {
  height: 35px; padding: 0 14px; border-radius: 16px; border: 2px solid #646b78; background: transparent; color: #e9edef;
  font-size: 14px; box-shadow: none;
}
.entrar-form .caixa-larga .campo input::placeholder { color: #8b9098; opacity: 1; }
.entrar-form .caixa-larga .campo input:focus, .entrar-form .caixa-larga .campo select:focus {
  outline: none; border-color: #557cf2; box-shadow: 0 0 0 2px rgba(85, 124, 242, .25);
}
.entrar-form .caixa-larga .campo input.invalido, .entrar-form .caixa-larga .campo select.invalido { border-color: var(--erro); }
.entrar-form .caixa-larga .btn.btn-entrar { height: 35px; border-radius: 30px; box-shadow: none; font-size: 16px; font-weight: 400; }
.entrar-form .caixa-larga .btn.btn-entrar::after { content: none; display: none; animation: none; }
/* G1.25 (decisão do Albert): o botão do cadastro diz a frase do aceite; quebra em linhas no celular, sem rolar de lado */
/* HUB-1: numa linha mede o mesmo de antes (35 px; 44 px no toque, o alvo do G1.13.1) e só cresce quando a frase quebra */
.entrar-form .caixa-larga #btn-criar { white-space: normal; height: auto; min-height: 35px; padding-block: 4px; line-height: 1.25;
  text-align: center; }
@media (pointer: coarse) { .entrar-form .caixa-larga #btn-criar { min-height: 44px; } }
.caixa-larga .btn-social { border-radius: 8px; box-shadow: none; font-weight: 500; }
.caixa-larga .bloco-social { gap: 16px; }
.caixa-larga .separador-ou { font-size: 14px; color: #898b90; }
.caixa-larga .linha-opcoes { font-size: 14px; }
.caixa-larga .linha-opcoes label { color: #d3d6dd; }
.entrar-form .caixa-larga a { color: #7c9cf5; }
.caixa-larga .rodape-form.rodape-seta { font-size: 14px; color: #898b90; }
.caixa-larga .rodape-seta a { font-weight: 500; }
/* o medidor de força nasce na primeira tecla da senha (criar-conta.js) e entra com a altura, sem pulo */
.medidor-vivo { overflow: hidden; animation: medidor-entra 180ms ease-out both; }
.medidor-vivo .dica-senha { margin: 6px 0 0; color: #898b90; }
@keyframes medidor-entra { from { max-height: 0; opacity: 0; } to { max-height: 64px; opacity: 1; } }
@media (pointer: coarse) {
  .entrar-form .caixa-larga .campo input:not([type=checkbox]), .entrar-form .caixa-larga .campo select,
  .entrar-form .caixa-larga .btn.btn-entrar, .caixa-larga .btn-social { height: 44px; min-height: 44px; }
}
@media (max-width: 900px) {
  .entrar-form .caixa-entrar.caixa-larga { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .medidor-vivo { animation: none; } }

/* o menu de idioma fechado (components/idioma.js::menuIdioma) */
.menu-idioma { position: relative; }
.menu-idioma-botao { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 16px;
  border: 1px solid #3d4047; background: transparent; color: #d3d6dd; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.menu-idioma-botao:hover { border-color: #646b78; }
.menu-idioma-botao:focus-visible, .menu-idioma-item:focus-visible { outline: 2px solid #557cf2; outline-offset: 2px; }
.menu-idioma-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 168px; padding: 6px; border-radius: 12px;
  background: #121a22; border: 1px solid #3d4047; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: 2px; }
.menu-idioma-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; border: 0; background: transparent;
  color: #d3d6dd; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.menu-idioma-item:hover { background: rgba(255, 255, 255, .06); }
.menu-idioma-item[aria-checked="true"] { background: rgba(85, 124, 242, .16); color: #fff; }
.menu-idioma-item .nome-idioma { color: #898b90; margin-left: auto; font-size: 12.5px; }
/* G1.15: o aviso dos termos sob o botão do cadastro (aceite.js::avisoDeTermos), como a Umbler */
.aviso-termos { margin: -4px 0 0; text-align: center; font-size: 14px; line-height: 1.5; color: #898b90; }
.entrar-form .aviso-termos a { color: #7c9cf5; }
/* G1.15: em janela baixa (até 820 px de altura) os vãos do bloco descem de 24 para 16 px, o cadastro cabe a 1366x768 */
@media (min-width: 901px) and (max-height: 820px) {
  .entrar-form .caixa-entrar.caixa-larga, .caixa-larga .etapa-acesso { gap: 16px; }
}