/* Entrada neutra (cinzas do produto, sem azul de fundo nem de destaque). Tokens primeiro; o escuro só troca os valores. */
:root{color-scheme:light dark;--bg:#F4F4F2;--surface:#FFFFFF;--ink:#1C1C1B;--muted:#4F4F4D;--rule:#8B8B88;--focus:#1C1C1B;
--placa-0:#EFEFEC;--placa-1:#E4E4E1;--placa-borda:#D2D2CE;--placa-fio:#9A9A96;--luz:rgba(255,255,255,.6);--grao-opacidade:.35;
--p0:#3A3A38;--p1:#1C1C1B;--p2:#2E2E2C;--a0:#6E6E6B;--a1:#575755;--c:#74746F}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,sans-serif;min-height:100svh;display:grid;place-items:center;padding:24px}
main{width:100%;max-width:440px}
h1{font-size:30px;line-height:1.2;margin:0 0 12px}
p{color:var(--muted);margin:0 0 28px}
label{display:block;font-weight:600;margin-bottom:8px}
input{width:100%;min-height:48px;padding:12px;border:1px solid var(--rule);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:16px;margin-bottom:22px}
button{min-height:48px;border:0;border-radius:6px;background:var(--ink);color:var(--surface);font:600 15px system-ui;cursor:pointer;width:100%;padding:12px}
input:focus-visible,button:focus-visible,a.voltar:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.aviso{border-left:3px solid var(--ink);padding:12px 16px;background:var(--surface);margin-bottom:24px}
.apoio{font-size:13px;margin-top:24px}
a.voltar{display:inline-block;min-height:44px;padding:10px 0;color:var(--ink);font-weight:600}
.sair{margin-top:12px;background:transparent;color:var(--ink);border:1px solid var(--rule)}
footer{margin-top:40px;font-size:12px;color:var(--muted)}
/* Seletor de idioma: três links (funcionam sem script), no alto da página. O idioma atual fica marcado por aria-current e por sublinhado. */
.idiomas{display:flex;justify-content:flex-end;gap:4px;margin-bottom:16px}
.idiomas a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;border-radius:6px;color:var(--muted);font-weight:600;font-size:13px;letter-spacing:.04em;text-decoration:none}
.idiomas a:hover{color:var(--ink)}
.idiomas a[aria-current="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:6px}
.idiomas a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* Marca: VOICE (produto) em destaque e Deep Space Radiology (empresa) como assinatura, numa placa de papel. */
.efeitos{position:absolute;width:0;height:0;overflow:hidden}
.placa{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--placa-borda);background:linear-gradient(180deg,var(--placa-0),var(--placa-1));margin-bottom:36px}
.placa-conteudo{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;padding:40px 28px 32px}
.grao{position:absolute;inset:0;width:100%;height:100%;opacity:var(--grao-opacidade);pointer-events:none}
.grao-r{filter:url(#grao-c)}
.g-voice{display:block;width:min(220px,72%);height:auto}
.g-dsr{display:block;width:min(290px,100%);height:auto}
.fio{width:48px;margin:0;border:0;border-top:1px solid var(--placa-fio)}
.m-p,.m-a,.m-c{fill:var(--ink)}
.placa .m-p{fill:url(#mg-p) var(--ink)}
.placa .m-a{fill:url(#mg-a) var(--a0)}
.placa .m-c{fill:var(--c)}
.s-p0{stop-color:var(--p0)}.s-p1{stop-color:var(--p1)}.s-p2{stop-color:var(--p2)}.s-a0{stop-color:var(--a0)}.s-a1{stop-color:var(--a1)}
.luz-e{lighting-color:#fff}
.placa .g-voice,.placa .g-dsr{filter:url(#rel-c)}
.marca-compacta{margin-bottom:32px}
.marca-compacta svg{display:block;width:150px;height:auto}
.marca-compacta .m-a{fill:var(--a0)}
/* Luz rasante: um brilho que passa uma vez só e some. Sem movimento quando o sistema pede menos movimento. */
.placa::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,var(--luz) 50%,transparent 62%);transform:translateX(-100%);animation:luz 2.8s ease-out .5s 1 both}
@keyframes luz{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.placa::after{animation:none;display:none}}
@media(prefers-color-scheme:dark){
:root{--bg:#141414;--surface:#202020;--ink:#ECECEA;--muted:#B4B4B1;--rule:#7C7C79;--focus:#ECECEA;
--placa-0:#131313;--placa-1:#090909;--placa-borda:#2E2E2C;--placa-fio:#6A6A67;--luz:rgba(255,255,255,.08);--grao-opacidade:.38;
--p0:#F4F4F1;--p1:#B9B9B5;--p2:#E2E2DE;--a0:#AAAAA6;--a1:#8C8C89;--c:#8A8A87}
.grao-r{filter:url(#grao-e)}
.placa .g-voice,.placa .g-dsr{filter:url(#rel-e)}
}
/* Cores forçadas (alto contraste): sem relevo, grão nem degradê; o logo cai para o traço plano na cor do sistema. */
@media(forced-colors:active){
.placa{background:Canvas;border:1px solid CanvasText}
.grao,.efeitos,.placa::after{display:none}
.placa .g-voice,.placa .g-dsr{filter:none}
.m-p,.m-a,.m-c,.placa .m-p,.placa .m-a,.placa .m-c,.marca-compacta .m-a{fill:CanvasText}
.fio{border-top-color:CanvasText}
input,button{border:1px solid ButtonText}
}