/* ==========================================================================
   ATANA — Área do Cliente (login)
   Vitrine escura com onda de partículas (canvas) à esquerda, cartão de
   acesso claro à direita. Em telas estreitas as duas partes empilham.
   ========================================================================== */

:root{
  --ink:        #04122a;
  --text:       #0f1b2d;
  --text-2:     #5b6b80;
  --line:       #d9e1ea;
  --paper:      #f3f6fa;
  --blue:       #0b63f6;
  --blue-2:     #0a52d6;
  --cyan:       #27c3d9;
  --green:      #2ee6a0;
  --danger:     #d92d4b;
  --ease:       cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100dvh;
  font-family:"Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text); background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,p,ul{ margin:0; }
ul{ padding:0; list-style:none; }
img{ display:block; max-width:100%; }
a{ color:inherit; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.login{
  display:grid;
  grid-template-columns:minmax(0, 60fr) minmax(440px, 40fr);
  min-height:100dvh;
}

/* ── Vitrine ─────────────────────────────────────────────────────────────── */
.showcase{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column;
  padding:clamp(2rem, 4.2vw, 4.2rem) clamp(1.5rem, 5vw, 5.2rem) clamp(2rem, 4vw, 3.6rem);
  color:#fff;
  background:
    radial-gradient(70% 55% at 12% 0%, rgba(20,70,160,.55), transparent 65%),
    radial-gradient(55% 45% at 100% 8%, rgba(14,110,110,.5), transparent 70%),
    radial-gradient(60% 50% at 60% 100%, rgba(10,90,90,.35), transparent 70%),
    linear-gradient(165deg, #061c40 0%, #04122a 48%, #031b24 100%);
}

.showcase__wave{
  position:absolute; left:0; right:0; bottom:0; z-index:-1;
  width:100%; height:62%;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 30%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 30%);
}

.brands{ display:flex; align-items:center; gap:clamp(1rem, 2.2vw, 1.8rem); }
.brands a{ display:block; border-radius:6px; transition:opacity .25s var(--ease); }
.brands a:hover{ opacity:.85; }
.brands img{ height:clamp(24px, 2.3vw, 34px); width:auto; }
.brands__sep{ width:1px; align-self:stretch; min-height:40px; background:rgba(255,255,255,.3); }

.motto{
  position:absolute; top:clamp(2rem, 4.2vw, 4.2rem); right:clamp(1.5rem, 4vw, 4rem);
  font-family:"Montserrat", sans-serif;
  font-size:.66rem; font-weight:500; line-height:1.9;
  letter-spacing:.42em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

.pitch{ margin-top:clamp(3rem, 11vh, 7rem); max-width:52rem; }
.pitch h1{
  font-family:"Montserrat", sans-serif; font-weight:800;
  font-size:clamp(2.3rem, 4.4vw, 4.6rem); line-height:1.04; letter-spacing:-.025em;
}
.pitch h1 span{
  display:block;
  background:linear-gradient(90deg, #2f86ff 0%, var(--cyan) 48%, var(--green) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pitch__sub{
  margin-top:1.1rem;
  font-size:clamp(1rem, 1.55vw, 1.55rem); font-weight:400;
  color:rgba(255,255,255,.8);
}

.features{
  display:flex; flex-wrap:wrap; align-items:center;
  margin-top:clamp(2rem, 4.5vh, 3.2rem);
}
.features li{
  display:flex; align-items:center; gap:1.1rem;
  padding-inline:clamp(1rem, 2.2vw, 2rem);
  font-size:clamp(.92rem, 1.1vw, 1.08rem); font-weight:600; line-height:1.4;
}
.features li:first-child{ padding-left:0; }
.features li + li{ border-left:1px solid rgba(255,255,255,.18); }
.features__ico{
  flex:none; display:grid; place-items:center;
  width:clamp(52px, 4.2vw, 68px); aspect-ratio:1; border-radius:50%;
  border:1.6px solid currentColor;
  box-shadow:0 0 22px -6px currentColor, inset 0 0 18px -10px currentColor;
}
.features__ico svg{ width:46%; height:46%; }
.features__ico.is-blue { color:#3f8cff; }
.features__ico.is-green{ color:#2fd9a0; }
.features__ico.is-cyan { color:#35b8e8; }

/* marcadores verticais sobre a onda */
.pins{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.pin{
  position:absolute; left:var(--l); bottom:var(--b);
  padding-left:1.8rem;
  font-family:"Montserrat", sans-serif;
  font-size:.66rem; font-weight:500; line-height:1.7;
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.pin::before{                                  /* linha */
  content:""; position:absolute; left:0; bottom:calc(-1 * var(--h) / 2);
  width:1px; height:var(--h);
  background:linear-gradient(180deg, rgba(120,230,255,.9), rgba(60,200,220,.15));
}
.pin::after{                                   /* ponto */
  content:""; position:absolute; left:-3px; bottom:calc(var(--h) / 2 - 3px);
  width:7px; height:7px; border-radius:50%;
  background:#8ff3ff; box-shadow:0 0 12px 2px rgba(120,240,255,.8);
  animation:blink 3.2s ease-in-out infinite;
}
.pin:nth-child(2)::after{ animation-delay:1.1s; }
.pin:nth-child(3)::after{ animation-delay:2.2s; }
@keyframes blink{ 50%{ opacity:.35; } }

.closing{
  margin-top:auto; padding-top:3rem;
  font-family:"Montserrat", sans-serif;
  font-size:.7rem; font-weight:500; line-height:1.9;
  letter-spacing:.34em; text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
.closing i{ display:block; width:32px; height:3px; margin-bottom:1.1rem; border-radius:2px; background:#3f8cff; }

/* ── Acesso ──────────────────────────────────────────────────────────────── */
.access{
  position:relative;
  display:grid; place-items:center;
  padding:clamp(4rem, 8vh, 5rem) clamp(1.2rem, 4vw, 4.2rem);
  background:
    radial-gradient(60% 40% at 100% 0%, rgba(11,99,246,.06), transparent 70%),
    var(--paper);
}
.access__back{
  position:absolute; top:1.6rem; left:clamp(1.2rem, 3vw, 2.4rem);
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.84rem; font-weight:500; color:var(--text-2); text-decoration:none;
  transition:color .2s var(--ease);
}
.access__back svg{ width:17px; height:17px; transition:transform .2s var(--ease); }
.access__back:hover{ color:var(--blue); }
.access__back:hover svg{ transform:translateX(-3px); }

.card{
  width:min(100%, 480px);
  padding:clamp(2rem, 3.4vw, 3.2rem) clamp(1.4rem, 3vw, 2.8rem) clamp(1.8rem, 3vw, 2.6rem);
  background:#fff;
  border:1px solid #e6ecf3; border-radius:28px;
  box-shadow:0 40px 80px -48px rgba(15,27,45,.45), 0 2px 6px rgba(15,27,45,.04);
}
.card__eyebrow{
  font-family:"Montserrat", sans-serif;
  font-size:.78rem; font-weight:700; letter-spacing:.34em; text-transform:uppercase;
  color:var(--blue);
}
.card h2{
  margin-top:.9rem;
  font-family:"Montserrat", sans-serif; font-weight:800;
  font-size:clamp(2.1rem, 3vw, 2.75rem); line-height:1.05; letter-spacing:-.025em;
  color:#0b1b33;
}
.card__sub{ margin-top:.55rem; font-size:1.05rem; color:var(--text-2); }

.form{ margin-top:2rem; display:flex; flex-direction:column; gap:1.35rem; }

.field label{ display:block; margin-bottom:.6rem; font-size:.98rem; font-weight:600; color:var(--text); }
.field__box{ position:relative; }
.field__box input{
  width:100%; height:56px;
  padding:0 3.2rem 0 3.3rem;
  font:400 1rem/1 "Inter", ui-sans-serif, system-ui, sans-serif; color:var(--text);
  background:#fff;
  border:1px solid var(--line); border-radius:10px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field__box input::placeholder{ color:#98a6b6; }
.field__box input:hover{ border-color:#c3cfdc; }
.field__box input:focus{
  outline:none; border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(11,99,246,.12);
}
.field__box input[aria-invalid="true"]{ border-color:var(--danger); }
.field__box input[aria-invalid="true"]:focus{ box-shadow:0 0 0 4px rgba(217,45,75,.12); }

.field__ico{
  position:absolute; left:1.05rem; top:50%; translate:0 -50%;
  width:22px; height:22px; color:#7d8ea3; pointer-events:none;
}
.field__box:focus-within .field__ico{ color:var(--blue); }

.field__eye{
  position:absolute; right:.55rem; top:50%; translate:0 -50%;
  display:grid; place-items:center;
  width:40px; height:40px; padding:0;
  border:0; border-radius:8px; background:none; color:#7d8ea3; cursor:pointer;
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.field__eye svg{ width:22px; height:22px; }
.field__eye:hover{ color:var(--text); background:#f1f5f9; }
.field__eye:focus-visible{ outline:2px solid var(--blue); outline-offset:1px; }

.field__err{ min-height:0; margin-top:.4rem; font-size:.82rem; color:var(--danger); }
.field__err:empty{ display:none; }

.form__row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1rem;
  margin-top:-.2rem;
}
.check{ display:inline-flex; align-items:center; gap:.6rem; font-size:.92rem; color:#3d4b5c; cursor:pointer; }
.check input{ width:18px; height:18px; margin:0; accent-color:var(--blue); cursor:pointer; }

.link{ font-size:.92rem; color:var(--blue); text-underline-offset:3px; }
.link:hover{ color:var(--blue-2); }

.submit{
  display:flex; align-items:center; justify-content:center; gap:.7rem;
  width:100%; height:56px; margin-top:.4rem;
  border:0; border-radius:10px; cursor:pointer;
  font:600 1rem/1 "Inter", ui-sans-serif, system-ui, sans-serif;
  letter-spacing:.04em; text-transform:uppercase; color:#fff;
  background:linear-gradient(100deg, #0d6bff, var(--blue) 50%, var(--blue-2));
  box-shadow:0 14px 28px -14px rgba(11,99,246,.7), inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.submit svg{ width:20px; height:20px; transition:transform .2s var(--ease); }
.submit:hover{ filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 18px 32px -14px rgba(11,99,246,.8), inset 0 1px 0 rgba(255,255,255,.25); }
.submit:hover svg{ transform:translateX(4px); }
.submit:active{ transform:translateY(0); }
.submit:focus-visible{ outline:3px solid rgba(11,99,246,.35); outline-offset:3px; }
.submit[aria-busy="true"]{ cursor:progress; filter:saturate(.85); }
.submit[aria-busy="true"] svg{ display:none; }
.submit[aria-busy="true"]::after{
  content:""; width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.notice{
  padding:.85rem 1rem; border-radius:10px;
  font-size:.9rem; line-height:1.5;
  color:#1e3a8a; background:#eef5ff; border:1px solid #d4e3ff;
}
.notice.is-error{ color:#9f1239; background:#fff1f3; border-color:#ffd5dc; }

.card hr{ margin:1.9rem 0 1.5rem; border:0; border-top:1px solid #e6ecf3; }
.help{ text-align:center; font-size:.95rem; color:#3d4b5c; }
.help .link{ font-size:inherit; }
.secure{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin-top:1.5rem; font-size:.88rem; color:#5b6b80;
}
.secure svg{ width:22px; height:22px; color:#22b45f; }

/* ── Entrada ─────────────────────────────────────────────────────────────── */
.brands, .motto, .pitch h1, .pitch__sub, .features li, .closing, .card{
  animation:rise .8s var(--ease) both;
}
.motto{ animation-delay:.08s; }
.pitch h1{ animation-delay:.12s; }
.pitch__sub{ animation-delay:.22s; }
.features li:nth-child(1){ animation-delay:.3s; }
.features li:nth-child(2){ animation-delay:.38s; }
.features li:nth-child(3){ animation-delay:.46s; }
.closing{ animation-delay:.55s; }
.card{ animation-delay:.15s; }
@keyframes rise{ from{ opacity:0; translate:0 14px; } to{ opacity:1; translate:none; } }

/* ── Responsivo ──────────────────────────────────────────────────────────── */
@media (max-width: 1180px){
  .login{ grid-template-columns:minmax(0, 1fr) minmax(400px, 44%); }
  .features li{ padding-inline:1rem; }
  .pin:nth-child(2){ display:none; }
}

@media (max-width: 960px){
  .login{ grid-template-columns:1fr; }
  .showcase{ padding-bottom:3rem; }
  .showcase__wave{ height:55%; }
  .pitch{ margin-top:3rem; }
  .pins{ display:none; }
  .closing{ padding-top:2.4rem; }
  .access{ padding-top:4.5rem; }
}

@media (max-width: 620px){
  .motto{ display:none; }
  .brands img{ height:22px; }
  .brands__sep{ min-height:30px; }
  .pitch{ margin-top:2.4rem; }
  .features{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .features li, .features li:first-child{ padding:0; }
  .features li + li{ border-left:0; }
  .features li br{ display:none; }
  .features__ico{ width:44px; }
  .features{ margin-top:1.6rem; gap:.8rem; }
  .showcase{ padding-bottom:2.2rem; }
  .closing{ display:none; }
  .showcase__wave{ height:45%; }
  .card{ border-radius:20px; }
  .form__row{ font-size:.9rem; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}