/* ====== Fonte ====== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* ====== Tokens (mesma linha visual do "entrada") ====== */
:root{
  --accent-blue: #87CEFA; /* LightSkyBlue (para hovers/detalhes) */

  /* azul CLARO da direita do hero (clean) */
  --hero-clean: #98c6ee;  /* <— cor do fundo à direita e do botão */

  /* bandas claras usadas no restante do site */
  --band-1: #f3f9ff;
  --band-2: #edf6ff;

  --ink-950: #0b1220;
  --ink-800: #1f2937;
  --ink-700: #334155;
  --muted:   #5f6b7a;

  --bg: #ffffff;
  --surface: #ffffff;
  --border: #e5e8f0;

  --radius: 18px;
  --radius-lg: 22px;

  --shadow:    0 22px 48px rgba(23, 74, 130, .18);
  --shadow-sm: 0 10px 24px rgba(23, 74, 130, .12);

  --container: 1120px;
  --nav-h: 72px;

  /* Paleta auxiliar (usada em misturas) */
  --blue-400: #5ABAF7;
  --blue-500: #2D9CF4;
}

/* ====== Reset curto ====== */
*,
*::before,
*::after{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--ink-950);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--accent-blue) 70%, white);
  outline-offset: 2px; border-radius: 12px;
}

/* ====== Navbar (transparente sobre o hero) ====== */
.navbar{
  position: absolute; inset: 0 0 auto 0; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 3vw, 28px);
  z-index: 10; background: transparent;
}
.logo{ display: flex; align-items: center; gap: .75rem; color: var(--ink-950); }
.logo img{ width: 36px; height: 36px; object-fit: contain; }
.logo span{ font-weight: 700; font-size: 1.05rem; letter-spacing: .2px; }

.navbar nav{ display:flex; align-items:center; gap: .75rem; }
.btn-voltar{
  display:inline-flex; align-items:center; justify-content:center;
  height: 40px; padding: 0 1rem; border-radius: 999px;
  background: #fff; color: var(--ink-800); font-weight: 600;
  box-shadow: var(--shadow-sm); transition: transform .06s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
}
.btn-voltar:hover, .btn-voltar:focus-visible{
  background: var(--accent-blue); color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px color-mix(in oklab, var(--accent-blue) 45%, transparent);
}

/* ====== Hero do login (curva branca à esquerda + AZUL CLEAN à direita) ====== */
.login-hero{
  position: relative;
  min-height: 100svh;

  /* centralização robusta do conteúdo */
  display: grid; place-items: center;
  justify-items: center; align-items: center;

  padding: calc(var(--nav-h) + 56px) 0 72px;
  background: var(--hero-clean);   /* <— azul claro e clean */
  overflow: hidden;
}

/* curva branca estável (fallback cross-browser) */
.login-hero::before{
  content:""; position:absolute; inset:0 auto 0 0; width: 62%;
  background: var(--bg);
  -webkit-clip-path: ellipse(92% 120% at 0% 50%);
          clip-path: ellipse(92% 120% at 0% 50%);
  z-index: 0;
}
/* curva orgânica quando suportado */
@supports (clip-path: path("M0,0 L0,100% C 32% 95%, 34% 72%, 48% 65% C 62% 58%, 58% 28%, 52% 0 Z")){
  .login-hero::before{
    left: 0; right: auto; width: auto; inset: 0;
    -webkit-clip-path: path("M0,0 L0,100% C 32% 95%, 34% 72%, 48% 65% C 62% 58%, 58% 28%, 52% 0 Z");
            clip-path: path("M0,0 L0,100% C 32% 95%, 34% 72%, 48% 65% C 62% 58%, 58% 28%, 52% 0 Z");
  }
}

/* brilho pontilhado BEM sutil para não poluir o clean */
.login-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(2px 2px at 78% 26%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.7px 1.7px at 88% 48%, rgba(255,255,255,.85), transparent 60%);
  opacity:.12;
}

/* ====== Card de login (centralizado + SALTO no hover/focus) ====== */
.login-box{
  position: relative; z-index: 1;
  width: min(440px, 90vw);
  margin-inline: auto;

  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, color-mix(in oklab, var(--accent-blue) 55%, transparent),
                           color-mix(in oklab, var(--band-2) 55%, transparent)) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: 28px 24px 26px;
  box-shadow: var(--shadow);

  /* animação do “salto” */
  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease;
  will-change: transform, box-shadow;
  backface-visibility: hidden;
}
.login-box:hover,
.login-box:focus-within{
  transform: translateY(-6px);
  box-shadow:
    0 28px 60px color-mix(in oklab, var(--hero-clean) 36%, rgba(0,0,0,.12)),
    0 6px 20px rgba(0,0,0,.06);
  border-color: color-mix(in oklab, var(--hero-clean) 55%, var(--blue-500) 45%);
}
.login-box:hover::after,
.login-box:focus-within::after{
  content:"";
  position:absolute; inset:-10px;
  border-radius: inherit;
  pointer-events:none;
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--hero-clean) 18%, white);
}

.login-box h1{
  margin: 0 0 6px;
  font-size: 1.6rem;
  line-height: 1.15;
  letter-spacing: .2px;
  font-weight: 700;
  color: #0f172a;
  text-align: center;   /* centraliza o “Login” */
}
.login-box p{
  margin: 0 0 18px;
  color: var(--muted);
  text-align: center;   /* centraliza o subtítulo “Digite seus dados...” */
}

/* Mensagem de erro */
.erro-msg{
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff5f5;
  color: #b42318;
  border: 1px solid #f4cccc;
  box-shadow: 0 4px 12px rgba(180,35,24,.08);
}

/* ====== Form ====== */
form{ display: grid; gap: 12px; }
label{
  font-size: .92rem; font-weight: 600; color: var(--ink-700);
}

/* Inputs com “salto” no foco (efeito botão) */
input[type="email"],
input[type="password"]{
  appearance: none; width: 100%;
  height: 48px; padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  color: var(--ink-800);
  font-size: 1rem;
  transition: border-color .2s ease, box-shadow .25s ease, background .2s ease, transform .12s ease;
  will-change: transform, box-shadow;
}
input::placeholder{ color: #94a3b8; }
input:focus{
  border-color: color-mix(in oklab, var(--hero-clean) 65%, #bcdfff);
  box-shadow:
    0 12px 24px color-mix(in oklab, var(--hero-clean) 30%, transparent),
    0 0 0 4px color-mix(in oklab, var(--hero-clean) 24%, white);
  background: #fff;
  transform: translateY(-2px);  /* “salta” como botão */
  outline: none;
}

/* ====== Botão Entrar = MESMA COR DA DIREITA ====== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height: 52px; padding: 0 1.35rem;
  border: 1px solid color-mix(in oklab, var(--hero-clean) 65%, var(--blue-500) 35%);
  border-radius: 999px; cursor: pointer;

  background: var(--hero-clean); /* <— mesma cor da direita */
  color: #0f172a;                /* texto escuro p/ contraste */
  font-weight: 700; letter-spacing: .15px;

  box-shadow: 0 10px 24px color-mix(in oklab, var(--hero-clean) 40%, transparent);
  transition: transform .08s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{
  transform: translateY(-2px);
  background: color-mix(in oklab, var(--hero-clean) 85%, var(--blue-500) 15%);
  border-color: color-mix(in oklab, var(--hero-clean) 55%, var(--blue-500) 45%);
  box-shadow: 0 18px 38px color-mix(in oklab, var(--hero-clean) 48%, transparent);
}
.btn:focus-visible{
  box-shadow:
    0 10px 24px color-mix(in oklab, var(--hero-clean) 40%, transparent),
    0 0 0 5px color-mix(in oklab, var(--hero-clean) 30%, white);
}
.btn:active{
  transform: translateY(0);
  box-shadow: 0 8px 16px color-mix(in oklab, var(--hero-clean) 36%, transparent);
}

/* ====== Rodapé ====== */
.rodape{
  padding: 36px 0 44px; background: #fff; border-top: 1px solid var(--border);
  color: var(--muted); text-align: center;
}
.rodape .social{
  display:flex; gap: 14px; justify-content:center; align-items:center; margin-bottom: 8px;
}
.rodape .social img{
  width: 22px; height: 22px; object-fit: contain; filter: grayscale(20%);
  transition: transform .12s ease, filter .2s ease;
}
.rodape .social a:hover img{ transform: translateY(-2px); filter: none; }

/* ====== Responsivo ====== */
@media (max-width: 860px){
  .login-hero{ padding: calc(var(--nav-h) + 36px) 0 56px; }
  .login-hero::before{
    width: 100%;
    -webkit-clip-path: ellipse(138% 62% at 50% -14%);
            clip-path: ellipse(138% 62% at 50% -14%);
  }
}

/* ====== Acessibilidade/Motion ====== */
@media (prefers-reduced-motion: reduce){
  .btn, .btn-voltar, .rodape .social img,
  .login-box, input[type="email"], input[type="password"]{
    transition: none; transform: none;
  }
}