/* Tela de entrar — porte de login.html/login.css do redesign aprovado (23/09/2026), escopado em .entrar-pagina
   para não vazar para o painel. Diferenças em relação ao protótipo: fontes locais (fontes.css), sem código de
   demonstração, e cores de texto pequeno escurecidas até o contraste AA — a mesma regra das outras telas. */
body.entrando { background: #f5f5f2; }
body.entrando .lateral, body.entrando .casca, body.entrando .pular { display: none; }

.entrar-pagina {
  --navy: #17263c; --gold: #c5a16c; --muted: #6a7584; --ink: #25334a; --ease: cubic-bezier(.22, 1, .36, 1);
  color: #1c2b40; font-family: var(--f-texto); font-size: 16px; line-height: 1.5;
}
.entrar-pagina svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.entrar-pagina button, .entrar-pagina input { font: inherit; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
.entrar-pagina button { cursor: pointer; color: inherit; border: 0; background: transparent; padding: 0; touch-action: manipulation; }
.entrar-pagina button:disabled { cursor: wait; opacity: .65; }
.entrar-pagina a { text-decoration: none; color: inherit; }
.entrar-pagina :is(button, a, input):focus-visible { outline: 3px solid #c5a16c; outline-offset: 5px; }
.entrar-pagina h1, .entrar-pagina h2, .entrar-pagina p { margin-top: 0; }
.entrar-pagina .so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.login-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0; padding: 14px; height: 100svh; overflow: hidden; }

/* ---------- Mundo da marca (esquerda) ---------- */
.brand-world {
  position: relative; isolation: isolate; color: #fff; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 20px; min-height: 0;
  background: radial-gradient(ellipse at 50% 30%, #283c51 0, #17283d 43%, #0c192b 100%);
  box-shadow: inset 0 0 0 1px #ffffff0c, 0 12px 30px #11213615;
}
.brand-world::after { content: ''; inset: 0; position: absolute; pointer-events: none; z-index: -1; background: linear-gradient(135deg, #d0b48604, transparent 38%, #08132366); }
.fine-grid { position: absolute; inset: 0; z-index: -1; opacity: .12; background-image: linear-gradient(#d5e2f10a 1px, transparent 1px), linear-gradient(90deg, #d5e2f10a 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at center, black, transparent 75%); }
.ambient { position: absolute; border-radius: 50%; filter: blur(70px); z-index: -2; pointer-events: none; }
.ambient-one { width: 650px; height: 600px; background: radial-gradient(ellipse, #57738a65, transparent 69%); left: -8%; top: -12%; filter: blur(60px); animation: ambientDrift 19s ease-in-out infinite alternate; }
.ambient-two { width: 480px; height: 500px; background: radial-gradient(ellipse, #9473412b, transparent 66%); right: -20%; bottom: 12%; animation: ambientDrift 14s ease-in-out infinite alternate-reverse; }
.light-curtain { position: absolute; left: 25%; top: -40%; width: 75%; height: 130%; background: linear-gradient(110deg, transparent 20%, #e4d2a809 41%, #dbd9cf09 48%, transparent 62%); transform: rotate(15deg); z-index: -1; animation: curtain 16s ease-in-out infinite alternate; pointer-events: none; }
.edge-light { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #d8c09675, transparent); pointer-events: none; }
.brand-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 35px 39px; position: relative; z-index: 2; animation: reveal 1s var(--ease) both; }
.wordmark { font-family: var(--f-marca); font-size: 33px; letter-spacing: -1.2px; display: inline-flex; align-items: center; gap: 12px; text-transform: lowercase; }
.wordmark .monograma { width: 34px; height: 39px; filter: drop-shadow(0 0 15px #d5b88509); }
.wordmark .monograma .fundo { fill: none; stroke: #c5a16c99; stroke-width: 1.6; }
.brand-edition { font-size: 8px; letter-spacing: 1.8px; color: #a2adbc; }
.brand-composition { display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; position: relative; padding: 0 35px 22px; }

.seal-scene { width: min(450px, 100%, 50svh); aspect-ratio: 1; position: relative; margin-top: -23px; margin-bottom: 0; perspective: 1100px; animation: sceneEnter 1.8s var(--ease) both; }
.orbital-plane { position: absolute; inset: 0; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 1.2s var(--ease); transform-style: preserve-3d; }
.orbit { position: absolute; border-radius: 50%; border: 1px solid #c7ad7819; inset: 3%; transition: border-color 1.4s; }
.orbit-outer { inset: 0; border-color: #c4ae8020; }
.orbit-middle { inset: 8%; border: 1px dashed #c1b08e17; animation: spin 100s linear infinite; }
.orbit-inner { inset: 18%; border-color: #c1b08e14; box-shadow: 0 0 65px #cfb27504; }
.orbit-core { display: none; }
.orbit-tracer { position: absolute; inset: 8%; border-radius: 50%; border: 1px solid transparent; border-top-color: #e0c08570; transform: rotate(-40deg); animation: spin 35s linear infinite; }
.tracer-one::after { content: ''; position: absolute; width: 4px; height: 4px; left: 14%; top: 14%; background: #e5c58d; box-shadow: 0 0 15px 3px #e5c58d40; border-radius: 50%; }
.tracer-two { inset: 0; border-top-color: #b6c8d52e; animation: spin 41s linear infinite reverse; }
.tracer-two::after { content: ''; position: absolute; width: 3px; height: 3px; right: 14%; top: 14%; background: #9bafc3; box-shadow: 0 0 9px #9bafc3; border-radius: 50%; }
.axis { position: absolute; background: linear-gradient(90deg, transparent, #e7d1a71c, transparent); height: 1px; left: -6%; right: -6%; top: 50%; transform: rotate(-35deg); opacity: .5; }
.axis-v { transform: rotate(55deg); }
.star { position: absolute; height: 5px; width: 5px; background: #d6ba83; border-radius: 50%; box-shadow: 0 0 15px 2px #d6ba8340; animation: twinkle 5s ease-in-out infinite; }
.star-one { top: 15%; right: 15%; height: 3px; width: 3px; }
.star-two { bottom: 16%; left: 14%; animation-delay: 2s; height: 3px; width: 3px; }
.star-three { top: 34%; left: 25%; width: 2px; height: 2px; animation-delay: 1s; }
.seal-halo { position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(circle, #dac39712, transparent 67%); animation: haloBreath 7s ease-in-out infinite; }
.sculpture { position: absolute; inset: 13%; perspective: 900px; transform-style: preserve-3d; animation: sculptureArrival 2.4s var(--ease) .15s both; }
.metal-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid #bba57480; transform-style: preserve-3d; background: transparent; box-shadow: inset 1px 0 1px #ffe3aa70, -1px 0 1px #111e35, 1px 1px 0 #f4d69860, 0 0 15px #eac08108; }
.metal-ring::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; padding: 2px; background: conic-gradient(from 30deg, #79613e10, #fff0ce, #c2a16c10 22%, #49391d00 39%, #b49658a0 58%, #efd6a196 67%, #4a3e2620 81%, #fff0ce 96%, #79613e10); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; }
.ring-a { transform: rotateZ(-32deg) rotateY(64deg); animation: ringA 18s ease-in-out infinite alternate; }
.ring-b { transform: rotateZ(35deg) rotateX(67deg); animation: ringB 23s ease-in-out infinite alternate; }
.ring-c { inset: 7%; transform: rotateZ(-15deg) rotateY(-32deg) rotateX(27deg); border-color: #a3b5c033; box-shadow: inset 1px 0 1px #d5dde252, -1px 0 1px #111e35; animation: ringC 25s ease-in-out infinite alternate; }
.ring-c::before { background: conic-gradient(transparent, #d0dbe96b, transparent 35%, #d0dbe94d, transparent 75%); padding: 1px; }
.sculpture-shadow { position: absolute; left: 20%; right: 20%; bottom: 3%; height: 14%; background: #060e1d; filter: blur(23px); transform: translateY(25px) rotateX(65deg); opacity: .65; }
.seal-center { position: absolute; inset: 31%; display: grid; place-items: center; transform: translateZ(35px); transition: transform 1.4s var(--ease), filter 1.4s; isolation: isolate; }
.glass-face { position: absolute; inset: 4% 5%; border: 1px solid #dfc49038; border-radius: 16px 4px 16px 4px; background: linear-gradient(145deg, #8194a014, #09182d8c 60%, #d9bb7e0b); box-shadow: 0 18px 40px #050e2340, inset 1px 1px 0 #fff3ce18, inset -1px -1px 0 #c7a46c0f; backdrop-filter: blur(6px); z-index: -1; transform: rotate(-6deg); animation: glassArrival 2s var(--ease) .5s both; }
.glass-face::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, transparent 25%, #ffedc409 48%, transparent 60%); background-size: 220% 100%; animation: glassGleam 11s ease-in-out infinite; }
.entrar-pagina .seal-mark { height: 135px; width: 119px; overflow: visible; stroke: url(#ouro-selo); stroke-width: 1; fill: none; filter: drop-shadow(0 1px 2px #071326); }
.seal-outline { stroke-width: .65; opacity: .65; stroke-dasharray: 620; stroke-dashoffset: 620; animation: trace 2.6s var(--ease) .25s forwards; }
.seal-letter { stroke-width: 2.3; stroke-dasharray: 180; stroke-dashoffset: 180; animation: trace 1.8s var(--ease) .8s forwards; }
.seal-dot { stroke-width: 5; opacity: 0; animation: reveal .8s var(--ease) 1.6s forwards; }
.orbit-label { font-size: 8px; position: absolute; letter-spacing: 2px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.label-top { top: 4%; color: #c7b38780; }
.label-bottom { bottom: 4%; font-size: 7px; letter-spacing: 2px; color: #b0b5b957; }
.verification-track { position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; opacity: 0; transition: opacity .7s; }
.verification-track i { width: 4px; height: 4px; border-radius: 50%; background: #ffffff25; transition: background .3s, box-shadow .3s, transform .3s; }
.otp-active .verification-track { opacity: 1; }
.verification-track i.lit { background: #efd09c; box-shadow: 0 0 8px #efd09c80; transform: scale(1.2); }

.brand-copy { text-align: center; position: relative; margin-top: 1px; }
.brand-rule { height: 1px; background: linear-gradient(90deg, transparent, #cbb48270, transparent); width: 70px; margin: 0 auto 23px; animation: ruleReveal 1.8s var(--ease) 1s both; }
.brand-overline { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 8px; letter-spacing: 2.3px; color: #c4aa7a; margin: 0 0 15px; animation: reveal 1s var(--ease) .55s both; }
.entrar-pagina .brand-copy h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; line-height: .98; letter-spacing: -2px; font-size: clamp(40px, 9svh, 76px); margin: 0 0 19px; color: #fff; animation: reveal 1.3s var(--ease) .7s both; }
.brand-copy h1 em { font-weight: 400; line-height: 1.2; background: linear-gradient(100deg, #a48a5d, #f3dfb6 42%, #cdb585 63%, #f1dcb4); background-size: 200% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: goldFlow 14s ease-in-out infinite alternate; }
.brand-description { font-size: 13px; line-height: 1.9; color: #9aaabd; margin: 0; animation: reveal 1s var(--ease) .9s both; }
.brand-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 28px 38px 28px; color: #8f9fb4; font-size: 10px; animation: reveal 1s var(--ease) 1.1s both; }
.brand-footer button { color: #a6b5c6; display: flex; align-items: center; gap: 7px; font-size: 10px; padding: 7px; }
.brand-footer svg { height: 12px; width: 12px; }

/* ---------- Mundo do acesso (direita) ---------- */
/* Se mesmo comprimido algo não couber (zoom alto), rola só esta coluna — a página e a marca ficam paradas. */
.access-world { background: transparent; display: flex; flex-direction: column; position: relative; isolation: isolate; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.access-world::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 80% 20%, #f9f3e740, transparent 65%); }
.access-top { margin: 34px 34px 0; display: flex; align-items: center; justify-content: flex-end; gap: 18px; font-size: 11px; color: var(--muted); animation: reveal 1s var(--ease) .2s both; }
.access-badge { font-size: 8px; letter-spacing: 1.2px; padding: 6px 8px; border: 1px solid #e1e5eb; border-radius: 4px; color: #6a7584; display: inline-flex; align-items: center; gap: 6px; }
.access-badge svg { width: 11px; height: 11px; }
.access-center { position: relative; width: 100%; max-width: 444px; padding: 42px 29px 35px; margin: auto; animation: reveal 1.2s var(--ease) .4s both; }
.access-corner { position: absolute; width: 14px; height: 14px; pointer-events: none; opacity: .6; }
.corner-top { top: 13px; right: 8px; border-top: 1px solid #cbb88c; border-right: 1px solid #cbb88c; }
.corner-bottom { bottom: 13px; left: 8px; border-bottom: 1px solid #cbb88c; border-left: 1px solid #cbb88c; }

.step-indicator { display: flex; align-items: center; gap: 17px; list-style: none; padding: 0; margin: 0 0 34px; font-size: 12px; color: var(--muted); }
.step-indicator > li { display: flex; gap: 9px; align-items: center; transition: color .4s; }
.step-indicator b { font-size: 10px; font-weight: 500; border: 1px solid #d5dbe3; border-radius: 50%; width: 25px; height: 25px; display: grid; place-items: center; transition: .4s; background: transparent; }
.step-indicator .sep { width: 35px; height: 1px; background: #dfe5ec; }
.step-indicator .current { color: #7d6948; }
.step-indicator .current b { border-color: #b9a278; background: #eee9dd; color: #8c744e; }
.step-indicator .complete { color: #5f7a63; }
.step-indicator .complete b { border-color: #9bae9d; }

.view[hidden] { display: none; }
.form-stage { position: relative; min-height: 0; }
.welcome-symbol { width: 49px; height: 49px; border-radius: 50%; background: #fafbf8; border: 1px solid #dbdfdf; box-shadow: 0 3px 8px #1f304a05; display: grid; place-items: center; color: #6b8198; margin-bottom: 25px; position: relative; }
.welcome-symbol::after { content: ''; position: absolute; inset: -5px; border: 1px solid #d8d5ca70; border-radius: 50%; border-right-color: transparent; transform: rotate(-30deg); }
.welcome-symbol svg { width: 21px; height: 21px; }
.form-eyebrow { font-size: 9px; letter-spacing: 2px; font-weight: 600; color: #8a6a36; margin: 0 0 17px; }
.entrar-pagina .view h2 { font-family: var(--f-titulo); font-size: 35px; line-height: 1.25; letter-spacing: -1.4px; font-weight: 700; margin: 0 0 18px; color: #1c2b40; }
.view h2 > span { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 47px; font-weight: 500; font-style: italic; letter-spacing: -1px; color: #7f6c4c; line-height: 1.1; }
.form-description { font-size: 14px; line-height: 1.85; color: var(--muted); margin: 20px 0 32px; }
.form-description strong { font-weight: 500; color: #526078; overflow-wrap: anywhere; }
.entrar-pagina form label, .entrar-pagina legend { font-size: 13px; font-weight: 550; color: #536177; display: block; margin-bottom: 10px; padding: 0; }
.entrar-pagina fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.input-wrap { display: flex; align-items: center; background: #ffffffb0; border: 1px solid #d6dcdf; border-radius: 9px; padding: 0 15px; gap: 12px; height: 57px; box-shadow: 0 2px 2px #19283d02; transition: box-shadow .3s, border-color .3s, background .3s; }
.input-wrap:focus-within { background: #fff; box-shadow: 0 0 0 4px #be9d6312, 0 4px 15px #24334a05; border-color: #bea778; }
.input-wrap svg { width: 18px; color: #7d8c9c; }
.entrar-pagina .input-wrap input { background: transparent; min-width: 0; width: 100%; height: 100%; border: 0; outline: none; font-size: 14px; color: #243750; padding: 0; box-shadow: none; }
.entrar-pagina .input-wrap input::placeholder { color: #6c7686; }
.entrar-pagina .input-wrap input:focus-visible { outline: 0; }
.input-wrap.invalid { border-color: #bb7770; box-shadow: 0 0 0 3px #bb777010; }
.error-message { color: #a33a3a; font-size: 12px; line-height: 1.5; margin: 7px 0; font-weight: 500; }
.error-message:empty { margin: 0; }
.entrar-pagina .submit-button {
  margin-top: 14px; /* respiro fixo: a mensagem de erro só ocupa altura quando existe */
  border: 1px solid #1b2e46; color: #fff; background: linear-gradient(110deg, #243a52, #15273d); width: 100%; min-height: 55px;
  display: flex; justify-content: center; align-items: center; gap: 16px; font-size: 14px; font-weight: 550; border-radius: 9px;
  box-shadow: 0 6px 14px #14243a17, inset 0 1px 0 #ffffff15; position: relative; overflow: hidden; transition: box-shadow .25s, transform .25s, background .25s;
}
.submit-button::before { content: ''; position: absolute; inset: -100%; background: linear-gradient(110deg, transparent 40%, #ffffff12 50%, transparent 60%); transform: translateX(-50%); transition: transform .7s; }
.submit-button::after { content: ''; position: absolute; left: 15%; right: 15%; height: 1px; top: 0; background: linear-gradient(90deg, transparent, #dfc48e88, transparent); }
.submit-button:hover::before { transform: translateX(50%); }
.entrar-pagina .submit-button:hover { box-shadow: 0 9px 21px #14243a22; transform: translateY(-1px); color: #fff; }
.entrar-pagina .submit-button:active { transform: translateY(1px); }
.entrar-pagina .submit-button:disabled { opacity: .75; }
.submit-button > span { position: relative; }
.submit-button > svg { position: absolute; right: 19px; height: 17px; width: 17px; transition: transform .3s; }
.submit-button:hover > svg { transform: translateX(4px); }
.submit-button:disabled:hover { transform: none; }
.loading-spinner { position: absolute; right: 19px; display: inline-block; width: 16px; height: 16px; border: 1.5px solid #ffffff40; border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.access-note { display: flex; align-items: center; gap: 14px; margin-top: 27px; font-size: 8px; letter-spacing: 1.4px; color: #6a7584; white-space: nowrap; }
.note-line { height: 1px; background: #e7ebef; flex: 1; }
.password-note { display: flex; gap: 7px; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); margin: 20px 0 0; }
.password-note svg { width: 14px; height: 14px; }
.access-footer { display: flex; justify-content: space-between; gap: 20px; margin: 0 34px 27px; color: var(--muted); font-size: 10px; }

.entrar-pagina .back-button { display: flex; align-items: center; gap: 8px; color: #5f6b7b; font-size: 11px; margin: 0 0 20px; }
.back-button svg { width: 14px; height: 14px; }
.entrar-pagina .back-button:hover { color: #283d58; }
.otp-symbol { margin-bottom: 20px; }
.otp-fields { display: flex; gap: 10px; }
.entrar-pagina .otp-fields input {
  width: calc((100% - 50px) / 6); min-width: 0; height: 63px; border: 1px solid #d6dce0; border-radius: 9px; text-align: center; background: #ffffffb0; padding: 0;
  font-family: var(--f-titulo); font-weight: 500; font-size: 24px; color: #24364e; caret-color: #b49158;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.entrar-pagina .otp-fields input:focus { outline: none; border-color: #b59664; box-shadow: 0 0 0 4px #c5a16c15; transform: translateY(-3px); }
.entrar-pagina .otp-fields input.filled { background: #f1ecdf; border-color: #caba98; }
.entrar-pagina .otp-fields.invalid input { border-color: #c8877e; background: #fffaf8; }
.entrar-pagina .otp-fields.success input { border-color: #92ac9c; background: #f1f6f1; color: #357254; transform: translateY(-4px); }
.otp-hint { font-size: 11px; color: var(--muted); margin: 12px 0 0; }
.resend-line { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 23px 0 0; font-size: 11px; color: var(--muted); }
.resend-line button { font-size: 11px; color: #8a6a36; font-weight: 500; padding: 5px; }
.resend-line button:disabled { color: var(--muted); cursor: default; }
.entrar-pagina form label.lembrar { display: flex; align-items: center; gap: 10px; margin: 18px 0 18px; font-size: 12px; font-weight: 500; color: #536177; cursor: pointer; }
.entrar-pagina .lembrar input { width: 17px; height: 17px; margin: 0; flex: none; accent-color: var(--navy); appearance: auto; -webkit-appearance: auto; }
.turnstile:empty { display: none; }
.turnstile { margin: 14px 0 0; display: flex; justify-content: center; }

.success-view { text-align: center; padding-top: 37px; }
.success-emblem { position: relative; margin: 0 auto 35px; width: 115px; height: 115px; display: grid; place-items: center; }
.success-emblem::after { content: ''; position: absolute; inset: -15px; border: 1px solid #b0bda625; border-radius: 50%; animation: successBloom 1.7s var(--ease) .2s both; }
.success-emblem svg { width: 85px; height: 85px; stroke: #678a73; stroke-width: 1.2; overflow: visible; z-index: 1; }
.success-emblem circle { stroke-dasharray: 220; stroke-dashoffset: 220; animation: trace 1s var(--ease) .1s forwards; }
.success-emblem path { stroke-width: 2; stroke-dasharray: 70; stroke-dashoffset: 70; animation: trace .8s var(--ease) .5s forwards; }
.success-emblem span { position: absolute; inset: 0; background: #eaf0e8; border-radius: 50%; animation: successBloom 1.5s var(--ease) both; }
.entrar-pagina .success-view h2 { font-size: 33px; }
.success-view h2 > span { font-size: 43px; }
.success-view .form-description { font-size: 13px; }
.success-caption { font-size: 12px; color: var(--muted); margin-top: 26px; }

.screen-transition { position: fixed; inset: 0; z-index: 20; background: #15263c; display: grid; place-items: center; transform: translateY(100%); transition: transform .8s var(--ease), visibility 0s .8s; pointer-events: none; visibility: hidden; }
.transition-brand { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 65px; color: #ddc397; opacity: 0; transform: translateY(20px); transition: opacity .45s .2s, transform .6s .2s; }
.leaving .screen-transition { transform: translateY(0); visibility: visible; transition: transform .8s var(--ease); }
.leaving .transition-brand { opacity: 1; transform: translateY(0); }
.verified .seal-center { filter: drop-shadow(0 0 22px #d4b67b40); transform: translateZ(25px) scale(1.07); }
.verified .orbit { border-color: #ceb68540; }
.verified .glass-face { border-color: #dfc49080; box-shadow: 0 0 60px #d8b77b18, 0 18px 40px #050e2340; }
.verified .sculpture { filter: drop-shadow(0 0 10px #ddc79320); }
.verified .ring-a { animation-duration: 30s; }
.verified .seal-halo { background: radial-gradient(circle, #dac39735, transparent 68%); }
.otp-active .orbit-tracer { animation-duration: 16s; }
.paused .brand-world *, .paused .brand-world::before, .paused .brand-world::after { animation-play-state: paused !important; }
.shake { animation: shake .35s ease-in-out; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes reveal { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sceneEnter { from { opacity: 0; transform: scale(.92) rotate(-8deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes ambientDrift { to { transform: translate(50px, 40px) scale(1.15); } }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes haloBreath { 0%, 100% { transform: scale(.9); opacity: .5; } 50% { transform: scale(1.2); opacity: 1; } }
@keyframes successBloom { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes ringA { from { transform: rotateZ(-32deg) rotateY(64deg) rotateX(-7deg); } to { transform: rotateZ(-12deg) rotateY(53deg) rotateX(10deg); } }
@keyframes ringB { from { transform: rotateZ(35deg) rotateX(67deg) rotateY(12deg); } to { transform: rotateZ(60deg) rotateX(54deg) rotateY(-9deg); } }
@keyframes ringC { from { transform: rotateZ(-15deg) rotateY(-32deg) rotateX(27deg); } to { transform: rotateZ(-30deg) rotateY(-48deg) rotateX(15deg); } }
@keyframes sculptureArrival { from { opacity: 0; transform: rotate(-35deg) scale(.7); } to { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes glassArrival { from { opacity: 0; transform: rotate(-15deg) translateY(15px); } to { opacity: 1; transform: rotate(-6deg) translateY(0); } }
@keyframes curtain { to { transform: translateX(-60px) rotate(5deg); opacity: .4; } }
@keyframes goldFlow { to { background-position: 100% 50%; } }
@keyframes glassGleam { 0%, 35% { background-position: 150% 0; } 70%, 100% { background-position: -100% 0; } }
@keyframes ruleReveal { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

@media (min-width: 1600px) {
  .brand-header { margin: 42px 50px; }
  .seal-scene { width: 490px; }
  .entrar-pagina .seal-mark { width: 135px; height: 153px; }
  .entrar-pagina .brand-copy h1 { font-size: 87px; }
  .brand-description { font-size: 15px; }
  .access-center { max-width: 486px; padding-left: 35px; padding-right: 35px; }
  .entrar-pagina .view h2 { font-size: 39px; }
  .view h2 > span { font-size: 54px; }
  .form-description { font-size: 16px; }
  .brand-footer { margin: 30px 50px; }
  .access-top { margin: 40px 45px 0; }
  .access-footer { margin: 0 45px 32px; }
}
@media (max-height: 850px) and (min-width: 801px) {
  .brand-header { margin: 24px 39px 14px; }
  .seal-scene { width: min(345px, 100%, 44svh); margin-top: -10px; }
  .entrar-pagina .seal-mark { height: 110px; width: 97px; }
  .brand-rule { margin-bottom: 14px; }
  .brand-overline { margin-bottom: 10px; }
  .brand-description { font-size: 12px; line-height: 1.7; }
  .brand-footer { margin: 14px 38px 20px; }
  .access-top { margin-top: 22px; }
  .access-center { padding: 20px 29px 16px; }
  .access-corner.corner-top { top: 4px; }
  .access-corner.corner-bottom { bottom: 4px; }
  .step-indicator { margin-bottom: 20px; }
  .welcome-symbol { width: 42px; height: 42px; margin-bottom: 16px; }
  .welcome-symbol svg { width: 18px; height: 18px; }
  .form-eyebrow { margin-bottom: 10px; }
  .entrar-pagina .view h2 { font-size: 30px; margin-bottom: 10px; }
  .view h2 > span { font-size: 40px; }
  .form-description { font-size: 13px; line-height: 1.65; margin: 10px 0 20px; }
  .entrar-pagina form label, .entrar-pagina legend { margin-bottom: 8px; }
  .input-wrap { height: 50px; }
  .entrar-pagina .submit-button { min-height: 50px; }
  .access-note { margin-top: 16px; }
  .password-note { margin-top: 10px; }
  .entrar-pagina .back-button { margin-bottom: 12px; }
  .entrar-pagina .otp-fields input { height: 52px; font-size: 22px; }
  .otp-hint { margin-top: 8px; }
  .entrar-pagina form label.lembrar { margin: 12px 0 12px; }
  .resend-line { margin-top: 14px; }
  .success-view { padding-top: 10px; }
  .success-emblem { width: 96px; height: 96px; margin-bottom: 22px; }
  .success-emblem svg { width: 72px; height: 72px; }
  .entrar-pagina .success-view h2 { font-size: 30px; }
  .success-view h2 > span { font-size: 38px; }
  .success-caption { margin-top: 16px; }
  .access-footer { margin-bottom: 16px; }
}
/* Degrau 2: notebooks com a barra do navegador (por volta de 650–700 px úteis). */
@media (max-height: 720px) and (min-width: 801px) {
  .brand-header { margin: 18px 34px 8px; }
  .seal-scene { width: min(300px, 100%, 40svh); margin-top: 0; }
  .entrar-pagina .seal-mark { height: 96px; width: 85px; }
  .brand-description, .brand-rule { display: none; }
  .brand-overline { margin-bottom: 8px; }
  .entrar-pagina .brand-copy h1 { margin-bottom: 0; }
  .brand-footer { margin: 10px 34px 14px; }
  .access-top { margin-top: 14px; }
  .access-center { padding: 12px 29px 10px; }
  .access-corner { display: none; }
  .step-indicator { margin-bottom: 14px; }
  .welcome-symbol, .access-note { display: none; }
  .form-eyebrow { margin-bottom: 8px; }
  .entrar-pagina .view h2 { font-size: 27px; margin-bottom: 8px; }
  .view h2 > span { font-size: 35px; }
  .form-description { font-size: 12.5px; margin: 8px 0 14px; }
  .input-wrap { height: 46px; }
  .entrar-pagina .submit-button { min-height: 46px; font-size: 13px; }
  .password-note { margin-top: 10px; font-size: 10.5px; }
  .entrar-pagina .back-button { margin-bottom: 8px; }
  .entrar-pagina .otp-fields input { height: 46px; font-size: 20px; }
  .otp-hint { margin-top: 6px; font-size: 10.5px; }
  .entrar-pagina form label.lembrar { margin: 10px 0 10px; }
  .resend-line { margin-top: 10px; }
  .success-emblem { width: 80px; height: 80px; margin-bottom: 14px; }
  .success-emblem svg { width: 60px; height: 60px; }
  .access-footer { margin-bottom: 10px; font-size: 9px; }
}
/* Degrau 3: janelas muito baixas — só o essencial, ainda sem rolar. */
@media (max-height: 600px) and (min-width: 801px) {
  .brand-overline, .orbit-label { display: none; }
  .seal-scene { width: min(240px, 100%, 36svh); }
  .entrar-pagina .seal-mark { height: 80px; width: 70px; }
  .brand-footer { margin: 6px 34px 10px; }
  .access-top { display: none; }
  .access-center { padding-top: 12px; }
  .step-indicator { margin-bottom: 10px; }
  .form-eyebrow { display: none; }
  .entrar-pagina .view h2 { font-size: 24px; margin-bottom: 6px; }
  .view h2 > span { font-size: 30px; }
  .form-description { margin: 6px 0 10px; }
  .otp-hint, .password-note { display: none; }
  .entrar-pagina form label.lembrar { margin: 8px 0 8px; }
  .access-footer { display: none; }
}
@media (max-width: 1100px) {
  .login-layout { grid-template-columns: 1fr 1fr; padding: 10px; }
  .brand-world { border-radius: 16px; }
  .brand-header { margin-left: 25px; margin-right: 25px; }
  .brand-edition { display: none; }
  .brand-footer { margin-left: 25px; margin-right: 25px; font-size: 9px; }
  .brand-footer button span { display: none; }
  .seal-scene { width: min(380px, 100%); }
  .entrar-pagina .brand-copy h1 { font-size: 65px; }
  .brand-rule { margin-bottom: 18px; }
  .brand-overline { font-size: 8px; }
  .brand-description { font-size: 12px; }
  .access-top { margin-left: 25px; margin-right: 25px; font-size: 10px; }
  .access-center { padding-left: 28px; padding-right: 28px; max-width: 420px; }
  .access-corner { display: none; }
  .access-footer { margin-left: 25px; margin-right: 25px; }
  .access-badge { font-size: 7px; letter-spacing: .7px; }
  .entrar-pagina .view h2 { font-size: 31px; }
  .view h2 > span { font-size: 42px; }
  .form-description { font-size: 13px; }
  .submit-button { font-size: 13px; }
  .submit-button > svg, .loading-spinner { right: 15px; }
  .otp-fields { gap: 7px; }
  .entrar-pagina .otp-fields input { width: calc((100% - 35px) / 6); height: 55px; }
}
@media (max-width: 800px) {
  .login-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 9px; gap: 0; height: auto; min-height: 100svh; overflow: visible; }
  .brand-world { height: 185px; min-height: 185px; border-radius: 15px; }
  .brand-world::after { background: linear-gradient(90deg, #101d3030, transparent); }
  .brand-header { margin: 23px 24px; }
  .wordmark { font-size: 28px; }
  .brand-edition { display: block; font-size: 8px; letter-spacing: 1px; }
  .brand-composition { position: absolute; inset: 0; padding: 0; pointer-events: none; }
  .brand-copy { position: absolute; left: 24px; bottom: 21px; text-align: left; }
  .entrar-pagina .brand-copy h1 { font-size: 28px; letter-spacing: -.6px; margin: 0; }
  .brand-copy h1 br { display: none; }
  .brand-copy h1 em { margin-left: 4px; }
  .brand-rule, .brand-overline, .brand-description { display: none; }
  .seal-scene { width: 260px; max-width: none; position: absolute; right: -43px; top: -30px; opacity: .7 !important; margin: 0; }
  .seal-center { inset: 33%; }
  .entrar-pagina .seal-mark { height: 80px; width: 70px; }
  .sculpture { inset: 12%; }
  .glass-face { border-radius: 9px 2px 9px 2px; }
  .orbit-label, .verification-track { display: none; }
  .brand-footer { display: flex; position: absolute; right: 8px; bottom: 5px; margin: 0; z-index: 5; }
  .brand-footer > span { display: none; }
  .brand-footer button { padding: 8px; }
  .brand-footer svg { height: 14px; width: 14px; }
  .access-world { min-height: calc(100svh - 203px); overflow: visible; }
  .access-top { margin: 23px 22px 0; }
  .access-center { padding: 30px 24px; max-width: 420px; }
  .entrar-pagina .view h2 { font-size: 33px; }
  .view h2 > span { font-size: 46px; }
  .form-description { font-size: 14px; }
  .welcome-symbol { width: 43px; height: 43px; margin-bottom: 22px; }
  .step-indicator { margin-bottom: 27px; }
  .access-footer { margin: 3px 22px 21px; }
  .form-stage { min-height: 0; }
  .otp-fields { gap: 8px; }
  .entrar-pagina .otp-fields input { width: calc((100% - 40px) / 6); height: 59px; }
  .success-view { padding: 10px 0 40px; }
  .entrar-pagina .success-view h2 { font-size: 32px; }
  .success-view h2 > span { font-size: 40px; }
}
@media (max-width: 380px) {
  .entrar-pagina .brand-copy h1 { font-size: 24px; }
  .brand-edition { display: none; }
  .access-center { padding-left: 18px; padding-right: 18px; }
  .access-badge { font-size: 7px; }
  .entrar-pagina .view h2 { font-size: 30px; }
  .view h2 > span { font-size: 41px; }
  .otp-fields { gap: 6px; }
  .entrar-pagina .otp-fields input { width: calc((100% - 30px) / 6); height: 51px; font-size: 21px; }
  .access-top { margin-left: 17px; margin-right: 17px; }
  .access-footer { margin-left: 17px; margin-right: 17px; font-size: 9px; }
}
/* Sem movimento: o traçado do selo já aparece completo (estilo.css desliga toda animação) e o botão de pausa some. */
@media (prefers-reduced-motion: reduce) {
  .seal-outline, .seal-letter, .success-emblem circle, .success-emblem path { stroke-dashoffset: 0; }
  .seal-dot { opacity: 1; }
  .orbital-plane { transform: none !important; }
  .orbit-tracer { opacity: .5; }
  .brand-footer button { display: none; }
  .brand-copy h1 em { background-position: 50% 50%; }
}

/* Sem resposta do servidor ao abrir: um aviso simples no lugar da tela. */
.aviso-conexao { max-width: 420px; margin: 20vh auto; padding: 32px; background: #fff; border: 1px solid #e1e5eb; border-radius: 14px; display: grid; gap: 12px; }
.entrar-pagina .aviso-conexao h1 { font-family: var(--f-titulo); font-size: 22px; letter-spacing: -.5px; margin: 0; }
.aviso-conexao .botao { justify-content: center; }