<link rel="stylesheet" href="css/tokens.css">
<style>
/* Tela de entrada: foto de verdade ao fundo + cartão com as cores do tema (claro/escuro, só tokens). */
* { box-sizing:border-box; margin:0; }
body { min-height:100vh; font:15px/1.55 var(--f-texto); color:var(--tx); background:var(--bg) url("../comum/img/fotos/entrada.jpg") center/cover no-repeat fixed; display:grid; grid-template-columns:1.1fr 1fr; }
body::before { content:""; position:fixed; inset:0; background:linear-gradient(180deg, rgba(20,31,24,.15), rgba(20,31,24,.55) 55%, rgba(20,31,24,.92)); }
.lado { position:relative; z-index:1; padding:48px; display:flex; flex-direction:column; justify-content:flex-end; min-height:100vh; color:#fff; }
.marca { display:flex; align-items:center; gap:12px; margin-bottom:auto; }
.marca img { height:46px; width:auto; filter:drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.marca { flex-direction:column; align-items:flex-start; gap:6px; }
.marca small { display:block; font-size:12px; letter-spacing:.24em; text-transform:uppercase; opacity:.9; font-weight:600; }
.cursiva { font-family:var(--f-titulo); font-weight:800; font-size:44px; color:var(--gold); line-height:1.05; margin-bottom:8px; }
h1 { font-family:var(--f-titulo); font-weight:600; font-size:38px; line-height:1.15; max-width:520px; }
.lado p { opacity:.9; max-width:460px; margin-top:12px; font-size:16px; }
.painel { position:relative; z-index:1; display:grid; place-items:center; padding:32px 24px; }
.cartao { background:var(--card); color:var(--tx); border:1px solid var(--ln); border-radius:24px; padding:28px; width:100%; max-width:430px; box-shadow:0 30px 60px rgba(0,0,0,.35); }
.cartao h2 { font-family:var(--f-titulo); color:var(--head); font-size:22px; font-weight:600; }
.cartao h2 + p, .sub { color:var(--mt); font-size:13.5px; margin:4px 0 18px; }
.campo { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; font-size:13px; color:var(--mt); }
.campo input { padding:12px 14px; border-radius:12px; border:1px solid var(--ln); background:var(--bg); font:inherit; font-size:15px; color:var(--tx); }
.campo input:focus-visible, button:focus-visible, a:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
.entrar { width:100%; border:0; border-radius:12px; padding:13px; background:var(--acc); color:var(--onacc); font:900 15px var(--f-texto); cursor:pointer; margin-top:4px; }
.sec { width:100%; border:1px solid var(--ln); border-radius:12px; padding:11px; background:transparent; color:var(--acc-tx); font:700 14px var(--f-texto); cursor:pointer; margin-top:8px; }
.links { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:13px; margin-top:12px; }
.links a, .link { color:var(--acc-tx); font-weight:700; text-decoration:none; background:none; border:0; font:700 13px var(--f-texto); cursor:pointer; padding:0; }
.div { display:flex; align-items:center; gap:10px; color:var(--mt); font-size:12px; margin:18px 0 10px; }
.div::before, .div::after { content:""; flex:1; height:1px; background:var(--ln); }
.perfis { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.perfis button { display:block; text-align:center; padding:10px 8px; border-radius:12px; border:1px solid var(--ln); background:var(--bg); color:var(--head); font:700 13px var(--f-texto); cursor:pointer; }
.perfis button:hover { border-color:var(--acc); }
.perfis small { display:block; font-weight:400; font-size:11px; color:var(--mt); }
.erro { background:var(--warnbg); color:var(--warn); padding:10px 12px; border-radius:10px; font-size:13.5px; margin:4px 0 10px; }
.ok { background:var(--okbg); color:var(--ok); padding:10px 12px; border-radius:10px; font-size:13.5px; margin:4px 0 10px; }
.dica { background:var(--surface); color:var(--tx); padding:10px 12px; border-radius:10px; font-size:12.5px; margin:10px 0 0; }
.passos { display:flex; gap:6px; margin:0 0 14px; }
.passos span { flex:1; height:5px; border-radius:99px; background:var(--surface); }
.passos span.on { background:var(--acc); }
.lista-eq button { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:12px; border-radius:12px; border:1px solid var(--ln); background:var(--bg); color:var(--tx); font:inherit; cursor:pointer; margin-bottom:8px; }
.lista-eq button:hover { border-color:var(--acc); }
.lista-eq b { color:var(--head); display:block; }
.lista-eq small { color:var(--mt); }
.av { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:900; font-size:13px; flex:none; }
.codigo { font-size:22px; letter-spacing:6px; text-align:center; }
.tema { position:fixed; top:14px; right:14px; z-index:3; width:42px; height:42px; border-radius:50%; border:1px solid var(--ln); background:var(--card); color:var(--head); font-size:19px; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.2); }
/* bandeirinha de idioma: só nas telas do hóspede (login e recuperação de senha) */
.idioma-linha { display:flex; justify-content:flex-end; margin:-12px -10px 6px; }
.aviso { position:fixed; right:12px; bottom:12px; z-index:2; background:var(--head); color:var(--bg); font-size:12px; padding:6px 10px; border-radius:999px; opacity:.85; }
/* cadastro de anfitrião */
.campo select { padding:12px 14px; border-radius:12px; border:1px solid var(--ln); background:var(--bg); font:inherit; font-size:15px; color:var(--tx); }
.duas { display:grid; grid-template-columns:1fr 1fr; gap:0 10px; }
.termos { max-height:180px; overflow:auto; white-space:pre-wrap; font-size:12px; background:var(--bg); border:1px solid var(--ln); border-radius:12px; padding:10px 12px; margin:6px 0 10px; color:var(--tx); }
.aceite { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; margin:8px 0 12px; color:var(--tx); cursor:pointer; }
.aceite input { margin-top:3px; width:18px; height:18px; accent-color:var(--acc); flex:none; }
.resumo { background:var(--surface); border-radius:12px; padding:10px 12px; font-size:13px; margin-bottom:12px; }
.resumo b { color:var(--head); }
.demo { border:1px dashed var(--ln); border-radius:14px; padding:4px 10px 10px; margin-top:18px; }
.demo .div { margin:8px 0 10px; }
.convite { background:var(--surface); color:var(--tx); padding:10px 12px; border-radius:10px; font-size:13px; margin:0 0 12px; }
.criar { width:100%; border:1px dashed var(--acc); border-radius:12px; padding:11px; background:transparent; color:var(--acc-tx); font:900 14px var(--f-texto); cursor:pointer; margin-top:10px; }
/* link mágico */
a.mag-wa { display:block; text-align:center; text-decoration:none; }
.mag-ola { font-size:40px; line-height:1; margin-bottom:8px; }
.mag-carregando { height:5px; border-radius:99px; background:var(--surface); overflow:hidden; margin:14px 0 4px; }
.mag-carregando i { display:block; height:100%; width:30%; background:var(--acc); border-radius:99px; animation:mag-vai 1.2s ease-in-out infinite; }
@keyframes mag-vai { 0% { margin-left:-30%; } 100% { margin-left:100%; } }
@media (prefers-reduced-motion: reduce) { .mag-carregando i { animation:none; width:100%; } }
@media (max-width: 480px) { .duas { grid-template-columns:1fr; } }
@media (max-width: 860px) {
  body { grid-template-columns:minmax(0, 1fr); align-content:start; } /* minmax: nada da coluna empurra a tela para os lados no celular */
  .lado h1, .cartao { overflow-wrap:anywhere; min-width:0; }
  .cartao { box-sizing:border-box; } /* width:100% + padding passava 58 px da tela no celular */
  .lado { min-height:auto; padding:28px 22px 8px; justify-content:flex-start; }
  .marca { margin-bottom:26px; }
  .cursiva { font-size:44px; } h1 { font-size:28px; }
  .painel { padding:16px 16px 56px; }
}
/* Fase 2 */
.carregando { opacity:.6; pointer-events:none; }
.ambiente { position:fixed; right:12px; bottom:12px; z-index:2; background:var(--warn); color:#fff; font-size:12px; padding:6px 10px; border-radius:999px; }
.oculto { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* fim do acesso à Chave Mestra (ACESSO-E-PDI.md): gentil, sem alarme */
.fim-acesso .mag-ola { font-size:34px; }
.fim-acesso a.entrar, .fim-acesso a.sec { display:block; text-align:center; text-decoration:none; box-sizing:border-box; }
.fim-acesso .fim-nota { color:var(--mt); font-size:12.5px; margin:14px 0 0; }
