:root{
  --page-bg-1:#0b1118;
  --page-bg-2:#0a0f16;

  --card-bg-top:#0f1624;
  --card-bg-bottom:#0b1119;

  --border-glass:rgba(255,255,255,.08);

  --text:#eaf1ff;
  --muted:#aab7cc;

  --accent:#0084ff;

  --radius-xl:20px;
  --radius-md:12px;

  --shadow-card:0 30px 60px rgba(0,0,0,.6);
}

*{box-sizing:border-box}

html,body{
  height:100%;
  margin:0;
  font-family:Inter, system-ui, -apple-system,"Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 10% -20%, rgba(0,132,255,.10) 0%, transparent 60%),
    radial-gradient(900px 500px at 110% -10%, rgba(0,132,255,.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--page-bg-1), var(--page-bg-2));
  color:var(--text);
}

/* ===== container ===== */
.cadastro-section{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:24px;
  position:relative;
  overflow:hidden;
}

.cadastro-section::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(800px 600px at 15% 10%, rgba(0,132,255,.18) 0%, transparent 70%),
    radial-gradient(800px 600px at 80% 0%, rgba(0,132,255,.10) 0%, transparent 70%);
  filter:blur(60px);
  opacity:.25;
  pointer-events:none;
}

/* ===== grid principal (desktop 50/50) ===== */
.auth-wrap{
  position:relative;
  width:min(900px,100%);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border-radius:var(--radius-xl);
  background:transparent;
}

/* ===== banner (esquerda) ===== */
.hero-card{
  position:relative;
  background:linear-gradient(180deg,#0f1624 0%,#0a0f16 100%);
  border:1px solid var(--border-glass);
  border-radius:var(--radius-xl) 0 0 var(--radius-xl);
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.07);
  min-height:380px;
  display:flex;
  align-items:stretch;
  justify-content:center;
  overflow:hidden;
}

.hero-img-desktop,
.hero-img-mobile{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  display:block;
}

.hero-img-mobile{ display:none; }

.hero-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(80% 60% at 50% 110%, rgba(0,0,0,.55) 0%, transparent 60%),
    linear-gradient(to top, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 60%);
  pointer-events:none;
}

/* ===== formulário (direita) ===== */
.auth-card{
  position:relative;
  background:linear-gradient(180deg,var(--card-bg-top) 0%,var(--card-bg-bottom) 100%);
  border:1px solid var(--border-glass);
  border-left:0;
  border-radius:0 var(--radius-xl) var(--radius-xl) 0;
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.07);
  min-height:380px;
  display:flex;
  flex-direction:column;
  padding:24px 24px 20px;
  color:var(--text);
}

/* ===== abas ===== */
.auth-tabs{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:24px;
  margin-top:8px;
}
.auth-tab{
  font-size:16px;
  font-weight:600;
  color:var(--muted);
  text-decoration:none;
  padding-bottom:8px;
  position:relative;
  line-height:1.2;
}
.auth-tab.is-active{ color:var(--text); }
.auth-tab.is-active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2px; border-radius:2px; background:var(--accent);
}

/* ===== títulos ===== */
.auth-headline-wrap{ margin-top:16px; margin-bottom:20px; }
.auth-title{
  margin:0 0 6px;
  font-size:18px;
  line-height:1.3;
  font-weight:800;
  color:var(--text);
}
.auth-sub{
  margin:0;
  font-size:13px;
  line-height:1.4;
  font-weight:500;
  color:var(--muted);
}
.auth-sub b{ color:#10b981; font-weight:600; }

/* ===== formulário ===== */
.auth-form{ display:grid; gap:12px; }

.field{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,#111a27 0%,#0e1622 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  transition:box-shadow .15s, border-color .15s, transform .15s;
}
.field:focus-within{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 14px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
}

.field-ico{ color:#9acbff; font-size:16px; line-height:1; }

.field-input{
  background:transparent; border:0; outline:0; width:100%;
  color:var(--text); font-size:15px; font-family:inherit;
}
.field-input::placeholder{ color:var(--muted); }

/* ===== termos ===== */
.checkbox-row{ margin-top:2px; font-size:13px; line-height:1.4; color:var(--text); }
.check-wrap{ display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.check-wrap input{ display:none; }
.checkmark{
  width:20px; height:20px; border-radius:6px;
  border:1px solid #ffffff2a;
  background:linear-gradient(180deg,#0f1824,#0c1420);
  position:relative; flex-shrink:0;
}
.check-wrap input:checked + .checkmark{
  border-color:transparent;
  background:linear-gradient(90deg, var(--accent), var(--accent));
  box-shadow:0 10px 20px rgba(0,132,255,.4), inset 0 1px 0 rgba(255,255,255,.4);
}
.checkmark::after{
  content:""; position:absolute; inset:0; display:none;
  width:10px; height:10px; margin:auto; border-radius:2px; background:#071E3A;
}
.check-wrap input:checked + .checkmark::after{ display:block; }
.checkbox-row a{ color:var(--accent); text-decoration:none; font-weight:500; }
.checkbox-row a:hover{ text-decoration:underline; }

/* ===== botão principal ===== */
.btn-primary{
  appearance:none; border:0; border-radius:8px; width:100%; height:48px;
  font-size:15px; font-weight:600; line-height:1; cursor:pointer;
  color:#071E3A; background:var(--accent);
  box-shadow:0 16px 32px rgba(0,132,255,.5), inset 0 1px 0 rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:filter .12s, box-shadow .12s, transform .12s; margin-top:8px;
}
.btn-primary:hover{
  filter:brightness(1.05); transform:translateY(-1px);
  box-shadow:0 20px 36px rgba(0,132,255,.6), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-primary:active{ transform:none; filter:saturate(1.07); }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }
.spinner{ display:none; font-size:16px; line-height:1; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.btn-primary.is-loading .spinner{ display:inline-block; }

/* ===== rodapé ===== */
.auth-footer{
  margin-top:16px; font-size:13px; line-height:1.4; text-align:center; color:var(--muted);
}
.auth-footer a{ font-weight:600; color:var(--accent); text-decoration:none; }
.auth-footer a:hover{ text-decoration:underline; }

/* ===== separador "ou" ===== */
.auth-divider{ display:grid; place-items:center; margin-top:16px; }
.auth-divider span{
  font-size:12px; color:var(--muted); padding:6px 10px;
  border-radius:999px; border:1px solid #ffffff12;
  background:linear-gradient(180deg,#101826,#0c131d);
}

/* ========== MOBILE COMPACTO ==========
   Empilha e reduz espaços / fontes / alturas
*/
@media (max-width:900px){
  /* compacção global mobile */
  :root{
    --radius-xl:16px;
    --radius-md:10px;
  }

  .cadastro-section{ padding:16px; }

  .auth-wrap{
    grid-template-columns:1fr;
    max-width:360px;           /* mais estreito no mobile */
    margin-inline:auto;
  }

  .hero-card{
    display:block;
    min-height:auto;
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    border-right:1px solid var(--border-glass);
    border-bottom:0;
    box-shadow:0 18px 36px rgba(0,0,0,.45); /* sombra reduzida */
  }

  .hero-img-desktop{ display:none; }
  .hero-img-mobile{
    display:block;
    width:100%;
    height:auto;
    max-height:200px;          /* banner mais baixo */
    object-fit:contain;
    object-position:center center;
  }

  .auth-card{
    border-radius:0 0 var(--radius-xl) var(--radius-xl);
    border-left:1px solid var(--border-glass);
    border-top:0;
    min-height:auto;
    padding:16px 16px 14px;    /* menos padding */
    box-shadow:0 18px 36px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  }

  .auth-tabs{ gap:12px; margin-top:2px; }
  .auth-tab{ font-size:14px; padding-bottom:6px; }

  .auth-headline-wrap{ margin-top:10px; margin-bottom:12px; }
  .auth-title{ font-size:16px; margin-bottom:4px; }
  .auth-sub{ font-size:12px; }

  .auth-form{ gap:10px; }

  .field{
    gap:8px;
    padding:10px 12px;         /* campos mais baixos */
  }
  .field-ico{ font-size:15px; }
  .field-input{ font-size:14px; }

  .checkbox-row{ font-size:12px; }
  .checkmark{ width:18px; height:18px; border-radius:5px; }
  .checkmark::after{ width:9px; height:9px; }

  .btn-primary{
    height:42px;               /* botão mais baixo */
    font-size:14px;
    margin-top:6px;
    box-shadow:0 14px 24px rgba(0,132,255,.45), inset 0 1px 0 rgba(255,255,255,.35);
  }
  .spinner{ font-size:15px; }

  .auth-footer{ margin-top:12px; font-size:12px; }
  .auth-divider{ margin-top:12px; }
  .auth-divider span{ font-size:11px; padding:6px 8px; }
}

/* ultra compacto para telas muito pequenas */
@media (max-width:360px){
  .auth-wrap{ max-width:330px; }
  .auth-tabs{ gap:10px; flex-wrap:wrap; row-gap:4px; }
  .auth-tab{ font-size:13px; }
  .auth-title{ font-size:15px; }
  .auth-sub{ font-size:11.5px; }
  .field{ padding:9px 11px; }
  .field-input{ font-size:13.5px; }
  .btn-primary{ height:40px; font-size:13.5px; }
  .auth-footer{ font-size:11.5px; }
}

/* fallback extremo (mini devices) */
@media (max-width:320px){
  .auth-wrap{ max-width:300px; }
  .hero-img-mobile{ max-height:180px; }
  .auth-card{ padding:14px 14px 12px; }
  .field{ padding:8px 10px; }
  .btn-primary{ height:38px; }
}

  /* ==== iOS: travar arrasto lateral e preencher o fundo do viewport ==== */

/* 1) Fundo sólido por trás do gradiente (evita "fundo branco" no bounce) */
html,
body{
  background-color: var(--page-bg-2); /* fallback do gradiente */
}

/* 2) Bloquear pan-x e evitar chain/bounce horizontal (iOS 16+) */
html, body{
  max-width:100%;
  overflow-x:hidden;                 /* corta qualquer overflow lateral */
  overscroll-behavior-x:none;        /* sem bounce horizontal */
  overscroll-behavior-inline:contain;/* idem em eixo inline quando suportado */
  touch-action:pan-y pinch-zoom;     /* permite rolar só no eixo Y e dar zoom */
}

/* 3) Garantir que o wrapper não ultrapasse a viewport */
.login-section{
  width:100%;
  max-width:100%;
  overflow-x:clip;                   /* Safari 16+/iOS 16+: melhor que hidden p/ perf */
}
@supports not (overflow: clip){
  .login-section{ overflow-x:hidden; }  /* fallback universal */
}

/* 4) Pequena proteção extra p/ subpixel: nenhum filho "alarga" a viewport */
.login-section,
.auth-wrap{
  contain:layout paint;  /* isola layout/pintura e evita jitter lateral */
}

/* 5) Imagens/banners nunca forçam largura > viewport */
.hero-card,
.hero-img-desktop,
.hero-img-mobile{
  max-width:100%;
}