/* ═══════════════════════════════════════════════════════════════════
   LENS — lens-publico.css
   Páginas públicas (entrar, criar conta, planos, senha, contato) com
   EXATAMENTE os tokens e componentes da home (lens/index.html).
   Tema claro/escuro pelo mesmo "lens-theme" da home.
   ═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --navy: #0A3D62; --ok: #12A16B; --warn: #E0A100; --bad: #D64545;
  --f-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --maxw: 1220px; --ease: cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="light"], :root:not([data-theme]) {
  --bg: #F3F5F8; --bg-2: #E9EEF3; --surface: #FFFFFF; --surface-2: #EEF2F6;
  --ink: #0C1824; --ink-2: #2A3A48; --mute: #5B6B7A;
  --line: #D8E0E7; --line-2: #C2CDD8;
  --brand: #0A3D62; --brand-ink: #FFFFFF; --accent: #2C7FD6; --accent-2: #5AA5F0;
  --logo-dark: block; --logo-light: none;
}
:root[data-theme="dark"] {
  --bg: #06111A; --bg-2: #0A1924; --surface: #0D1D2A; --surface-2: #112636;
  --ink: #E6EDF3; --ink-2: #C2CFDA; --mute: #8EA2B3;
  --line: #1A3042; --line-2: #27445B;
  --brand: #3C91E6; --brand-ink: #04111C; --accent: #6AB0F2; --accent-2: #9CCBF6;
  --logo-dark: none; --logo-light: block;
}
html { -webkit-text-size-adjust: 100%; }
html, body { background: var(--bg); color: var(--ink); }
body { font-family: var(--f-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; transition: background .3s, color .3s; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--navy); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--f-display); color: var(--ink); letter-spacing: -.02em; line-height: 1.08; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .wrap { padding: 0 16px; } }
.lede { color: var(--mute); font-size: 18px; max-width: 58ch; margin-top: 16px; }

/* Botões (iguais à home) */
.btn { white-space: nowrap; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 10px; font-weight: 600; font-size: 16px; overflow: hidden; isolation: isolate; transition: color .3s var(--ease), border-color .3s var(--ease), opacity .2s; }
.btn .lbl { position: relative; z-index: 1; }
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-primary::before { content: ''; position: absolute; inset: 0; background: var(--accent); transform: translateY(101%); transition: transform .45s var(--ease); z-index: 0; }
.btn-primary:hover::before { transform: translateY(0); }
:root[data-theme="light"] .btn-primary:hover { color: #fff; }
.btn-line { border: 1.5px solid var(--line-2); color: var(--ink); background: transparent; }
.btn-line::before { content: ''; position: absolute; inset: 0; background: var(--ink); transform: translateY(101%); transition: transform .45s var(--ease); z-index: 0; }
.btn-line:hover { color: var(--bg); border-color: var(--ink); }
.btn-line:hover::before { transform: translateY(0); }
.btn-sm { height: 42px; padding: 0 18px; font-size: 15px; }
.btn-block { width: 100%; }
.btn svg { width: 16px; height: 16px; position: relative; z-index: 1; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }
.btn[disabled]::before { display: none; }

/* Cabeçalho */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; gap: 20px; height: 72px; }
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 30px; width: auto; }
.logo .l-dark { display: var(--logo-dark); }
.logo .l-light { display: var(--logo-light); }
.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.icon-btn { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-2); transition: background .2s; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn svg { width: 19px; height: 19px; }
.ic-sun { display: none; }
:root[data-theme="dark"] .ic-sun { display: block; }
:root[data-theme="dark"] .ic-moon { display: none; }
@media (max-width: 560px) { .nav-actions .hide-xs { display: none; } }

/* Layout de autenticação (entrar / criar conta / senha) */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - 73px); }
.auth-form { display: flex; flex-direction: column; justify-content: center; padding: 56px clamp(16px, 6vw, 88px); }
.auth-form > div { width: 100%; max-width: 440px; margin: 0 auto; }
.auth h1 { font-size: clamp(32px, 4vw, 46px); font-weight: 900; letter-spacing: -.035em; line-height: 1; }
.auth .lede { font-size: 16.5px; margin-top: 12px; }
.auth-side { position: relative; background: var(--navy); color: #E6EDF3; padding: 56px clamp(24px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
:root[data-theme="dark"] .auth-side { background: var(--surface); border-left: 1px solid var(--line); }
.auth-side::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 80% 20%, rgba(90,165,240,.22), transparent 70%); pointer-events: none; }
.auth-side > * { position: relative; }
.auth-side h2 { color: #fff; font-size: clamp(30px, 3.4vw, 48px); font-weight: 900; letter-spacing: -.035em; line-height: 1.02; max-width: 13ch; }
.auth-side p { color: #B9CAD8; margin-top: 18px; max-width: 42ch; font-size: 16.5px; }
.auth-side ul { list-style: none; margin-top: 30px; display: grid; gap: 12px; }
.auth-side li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; color: #D6E2EC; font-size: 15px; }
.auth-side li svg { width: 20px; height: 20px; color: #9CCBF6; margin-top: 2px; }
.auth-side li b { color: #fff; font-weight: 600; }
.auth-side .kpi { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 460px; }
.auth-side .kpi div { border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 14px; background: rgba(255,255,255,.04); }
.auth-side .kpi b { display: block; font-family: var(--f-display); font-weight: 800; font-size: 22px; color: #fff; }
.auth-side .kpi span { font-size: 12.5px; color: #9FB3C4; }
@media (max-width: 960px) { .auth { grid-template-columns: 1fr; } .auth-side { display: none; } }

/* Formulários */
.form { display: grid; gap: 16px; margin-top: 30px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .form .row2 { grid-template-columns: 1fr; } }
.fld label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.fld .hint { font-size: 12.5px; color: var(--mute); margin-top: 6px; }
.inp { display: flex; align-items: center; border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--surface); transition: border-color .2s, box-shadow .2s; }
.inp:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.inp input, .inp select { width: 100%; border: 0; background: none; padding: 13px 14px; font-size: 16px; outline: none; min-width: 0; color: var(--ink); }
.inp select { appearance: none; cursor: pointer; }
.inp .eye { width: 44px; height: 44px; display: grid; place-items: center; color: var(--mute); flex-shrink: 0; border-radius: 8px; }
.inp .eye:hover { color: var(--ink); }
.inp .eye svg { width: 18px; height: 18px; }
.inp.invalido { border-color: var(--bad); }
.linha-acoes { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.link { color: var(--brand); font-weight: 600; }
.link:hover { text-decoration: underline; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--mute); }
.check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--brand); flex-shrink: 0; }
.rodape-form { margin-top: 22px; font-size: 14.5px; color: var(--mute); text-align: center; }
.alerta { display: none; border-radius: 10px; padding: 12px 14px; font-size: 14.5px; line-height: 1.45; }
.alerta.on { display: block; }
.alerta.erro { background: color-mix(in srgb, var(--bad) 10%, transparent); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); }
.alerta.ok { background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
.alerta.info { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--ink-2); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.forca { height: 4px; border-radius: 4px; background: var(--line); margin-top: 8px; overflow: hidden; }
.forca i { display: block; height: 100%; width: 0; background: var(--bad); transition: width .3s, background .3s; }

/* Planos (iguais à home) */
.sec { padding: 64px 0 96px; }
.sec-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: end; margin-bottom: 36px; }
.sec-head h1 { font-size: clamp(34px, 4.4vw, 58px); font-weight: 900; letter-spacing: -.035em; line-height: 1; max-width: 16ch; }
.sec-head .lede { margin-top: 0; }
@media (max-width: 900px) { .sec-head { grid-template-columns: 1fr; gap: 16px; } }
.billing { display: inline-flex; border: 1px solid var(--line-2); border-radius: 12px; padding: 4px; background: var(--surface); position: relative; }
.billing button { position: relative; z-index: 1; padding: 9px 18px; border-radius: 9px; font-size: 15px; font-weight: 600; color: var(--mute); transition: color .3s, background .3s; }
.billing button[aria-pressed="true"] { color: var(--brand-ink); background: var(--brand); }
.billing small { font-weight: 600; font-size: 12px; margin-left: 4px; opacity: .85; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 32px; align-items: stretch; }
@media (max-width: 980px) { .plans { grid-template-columns: 1fr; max-width: 520px; } }
.plan { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 30px; }
.plan.pro { border: 2px solid var(--brand); }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 30px; }
.plan h3 { font-size: 24px; font-weight: 800; }
.plan .flag { font-size: 12px; font-weight: 700; background: var(--brand); color: var(--brand-ink); padding: 5px 11px; border-radius: 20px; }
.plan .for { color: var(--mute); font-size: 15px; margin-top: 8px; min-height: 48px; }
.price { margin-top: 22px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price .v { font-family: var(--f-display); font-size: 46px; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.price .v.txt { font-size: 34px; }
.price .p { color: var(--mute); font-size: 15px; }
.price-sub { font-size: 14px; color: var(--mute); min-height: 22px; margin-top: 4px; }
.plan ul { list-style: none; margin: 24px 0 28px; display: grid; gap: 11px; font-size: 15px; }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.plan li svg { width: 18px; height: 18px; color: var(--brand); margin-top: 2px; }
.plan li span { color: var(--ink-2); }
.plan li b { font-weight: 600; color: var(--ink); }
.plan .btn { margin-top: auto; width: 100%; }
.plan.atual { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.aviso { display: none; margin-bottom: 22px; border-radius: 12px; padding: 14px 16px; font-size: 15px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); }
.aviso.on { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.aviso.alerta-pag { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.aviso .btn { margin-left: auto; }
.quem { font-size: 14px; color: var(--mute); }
.garantias { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; color: var(--mute); font-size: 14px; }
.garantias span { display: inline-flex; gap: 8px; align-items: center; }
.garantias svg { width: 16px; height: 16px; color: var(--ok); }

/* Rodapé simples */
.rodape { border-top: 1px solid var(--line); padding: 26px 0; color: var(--mute); font-size: 14px; }
.rodape .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rodape a:hover { color: var(--ink); }