:root{
  --ciano:#009ADA;
  --ciano-esc:#0086BF;
  --grafite:#434142;
  --suave:#8A8889;
  --linha:#E2E2DE;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  min-height:100vh;min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  -webkit-font-smoothing:antialiased;
}

/* ─────────── entrada ─────────── */
.entrada{background:var(--ciano);color:#fff}
.entrada main{width:min(22rem,86vw);text-align:center}

.logo{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:3rem}
.logo svg{width:2.4rem;height:2.4rem;fill:#fff}
.logo span{font-size:2.6rem;font-weight:700;letter-spacing:-.045em;line-height:1;color:#fff}

.entrada form{
  display:flex;align-items:center;gap:.5rem;
  border-bottom:2px solid rgba(255,255,255,.45);
  padding-bottom:.5rem;transition:border-color .15s;
}
.entrada form:focus-within{border-bottom-color:#fff}
.entrada form.errado{border-bottom-color:#ffd2cd}

.entrada input{
  flex:1;background:none;border:0;color:#fff;font:inherit;font-size:1.05rem;
  padding:.4rem .1rem;letter-spacing:.06em;
}
.entrada input::placeholder{color:rgba(255,255,255,.6);letter-spacing:0}
.entrada input:focus{outline:none}

.entrada button{
  background:none;border:0;color:#fff;cursor:pointer;padding:.35rem;
  border-radius:50%;display:flex;opacity:.75;transition:opacity .15s,transform .15s;
}
.entrada button:hover{opacity:1;transform:translateX(2px)}
.entrada button:focus-visible{outline:2px solid #fff;outline-offset:2px}

.erro{margin-top:1rem;font-size:.88rem;color:#ffe3e0}

/* ─────────── menu ─────────── */
.menu{background:#fff;color:var(--grafite);align-items:flex-start}
.menu main{width:min(34rem,90vw);margin:0 auto;padding:4rem 0}

.cabeca{display:flex;justify-content:space-between;align-items:center;margin-bottom:3.5rem}
.logo-escuro{display:flex;align-items:center;gap:.5rem}
.logo-escuro svg{width:1.5rem;height:1.5rem;fill:var(--ciano)}
.logo-escuro span{font-size:1.6rem;font-weight:700;letter-spacing:-.04em;color:var(--grafite)}
.sair{color:var(--suave);font-size:.85rem;text-decoration:none}
.sair:hover{color:var(--grafite)}

.opcoes{display:flex;flex-direction:column}
.opcoes a{
  display:block;padding:1.5rem .25rem;text-decoration:none;color:inherit;
  border-top:1px solid var(--linha);transition:padding-left .15s;
}
.opcoes a:last-child{border-bottom:1px solid var(--linha)}
.opcoes a:hover{padding-left:.75rem}
.opcoes a:hover .t{color:var(--ciano)}
.opcoes .t{display:block;font-size:1.45rem;font-weight:500;letter-spacing:-.02em;transition:color .15s}
.opcoes .d{display:block;color:var(--suave);font-size:.9rem;margin-top:.15rem}
.opcoes a:focus-visible{outline:2px solid var(--ciano);outline-offset:3px}

.extra{margin-top:2.5rem;font-size:.88rem}
.extra a{color:var(--suave)}
.extra a:hover{color:var(--ciano)}

@media (max-width:600px){
  .menu main{padding:2.5rem 0}
  .cabeca{margin-bottom:2.5rem}
  .opcoes .t{font-size:1.25rem}
  .logo span{font-size:2.2rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}