/* Portal: tela de entrada (proposta A · Dividida, escolhida em 13/11) e Início com os aplicativos contratados.
   O tema vem do endereço: <html data-tema="jcn"> em portal.jcnti.com.br, <html data-tema="arede"> em
   portal.aredecorretora.com.br. Mesmo desenho; muda só cor, fonte, logo e o desenho apagado ao fundo. */

:root[data-tema="jcn"] {
  --painel: radial-gradient(90% 60% at 100% 100%, rgba(46, 158, 62, 0.28) 0%, rgba(46, 158, 62, 0) 60%),
            linear-gradient(165deg, #0a1a26 0%, #10263a 55%, #0e2537 100%);
  --faixa: linear-gradient(90deg, #2e9e3e, #8cc63f);
  --traco: linear-gradient(90deg, #2e9e3e, #8cc63f);
  --painel-olho: #8cc63f;
  --painel-texto: #a9c3cf;
  --painel-borda: rgba(231, 238, 244, 0.14);
  --fundo: #f2f6f4;
  --cartao: #ffffff;
  --borda: #d9e3e2;
  --campo: #f7faf9;
  --campo-borda: #d9e3e2;
  --texto-forte: #10263a;
  --texto-suave: #4f6475;
  --rotulo: #1e5b3c;
  --foco: #2e9e3e;
  --foco-halo: rgba(46, 158, 62, 0.18);
  --botao: linear-gradient(90deg, #2e9e3e, #8cc63f);
  --botao-hover: linear-gradient(90deg, #2e9e3e, #8cc63f);
  --botao-texto: #0a1a26;
  --botao-sombra: 0 8px 20px -8px rgba(46, 158, 62, 0.7);
  --link: #1e5b3c;
  --barra: linear-gradient(90deg, #10263a, #18503f);
  --barra-texto: #ffffff;
  --barra-suave: rgba(255, 255, 255, 0.78);
  --barra-borda: transparent;
  --barra-botao-borda: rgba(255, 255, 255, 0.35);
  --sombra: 0 30px 60px -30px rgba(10, 26, 38, 0.35);
  --sombra-app: 0 8px 22px -10px rgba(16, 38, 58, 0.25);
  --f-titulo: Lexend, "Segoe UI", system-ui, sans-serif;
  --f-texto: Figtree, "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --titulo-peso: 700;
}

:root[data-tema="arede"] {
  --painel: radial-gradient(90% 60% at 100% 100%, rgba(79, 142, 247, 0.30) 0%, rgba(79, 142, 247, 0) 60%),
            linear-gradient(165deg, #091840 0%, #0f2460 55%, #1a3a8f 100%);
  --faixa: linear-gradient(90deg, #1a3a8f, #4f8ef7);
  --traco: #f0b429;
  --painel-olho: #8db6ff;
  --painel-texto: #c3d2f2;
  --painel-borda: rgba(214, 225, 251, 0.18);
  --fundo: #f5f7fd;
  --cartao: #ffffff;
  --borda: #e2e8f7;
  --campo: #f8faff;
  --campo-borda: #d3dcf2;
  --texto-forte: #0f2460;
  --texto-suave: #4a6fa5;
  --rotulo: #1a3a8f;
  --foco: #4f8ef7;
  --foco-halo: rgba(79, 142, 247, 0.22);
  --botao: #1a3a8f;
  --botao-hover: #14307a;
  --botao-texto: #ffffff;
  --botao-sombra: 0 8px 20px -8px rgba(26, 58, 143, 0.6);
  --link: #1d4fc4;
  --barra: #ffffff;
  --barra-texto: #0f2460;
  --barra-suave: #4a6fa5;
  --barra-borda: #e2e8f7;
  --barra-botao-borda: #d3dcf2;
  --sombra: 0 24px 60px -30px rgba(9, 24, 64, 0.35);
  --sombra-app: 0 8px 24px -12px rgba(15, 36, 96, 0.22);
  --f-titulo: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-texto: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titulo-peso: 800;
}

:root[data-tema="jr"] {
  --painel: radial-gradient(90% 60% at 100% 100%, rgba(98, 112, 255, 0.30) 0%, rgba(98, 112, 255, 0) 60%),
            linear-gradient(165deg, #08082e 0%, #16166e 55%, #2b2bab 100%);
  --faixa: linear-gradient(90deg, #16166e, #6270ff);
  --traco: #ffffff;
  --painel-olho: #b9c0ff;
  --painel-texto: #cfd3f5;
  --painel-borda: rgba(220, 224, 255, 0.18);
  --fundo: #f5f5fb;
  --cartao: #ffffff;
  --borda: #e3e3f1;
  --campo: #f8f8fd;
  --campo-borda: #d6d6ea;
  --texto-forte: #16166e;
  --texto-suave: #55557f;
  --rotulo: #16166e;
  --foco: #6270ff;
  --foco-halo: rgba(98, 112, 255, 0.22);
  --botao: #16166e;
  --botao-hover: #10104f;
  --botao-texto: #ffffff;
  --botao-sombra: 0 8px 20px -8px rgba(22, 22, 110, 0.6);
  --link: #2b2bab;
  --sombra: 0 24px 60px -30px rgba(8, 8, 46, 0.35);
  --f-titulo: Lexend, "Segoe UI", system-ui, sans-serif;
  --f-texto: Figtree, "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --titulo-peso: 700;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--fundo); color: var(--texto-forte); font: 400 14px/1.45 var(--f-texto); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .a-cartao * { transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s; }
}

/* ===== Entrada: painel da marca à esquerda, cartão claro à direita ===== */
.a { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1.1fr 1fr; }
.a::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--faixa); z-index: 2; }
.a-marca { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 48px 56px 28px; background: var(--painel); color: #ffffff; }
.a-marca .logo { width: 132px; height: auto; position: relative; z-index: 1; }
[data-tema="arede"] .a-marca .logo { width: 168px; }
.a-meio { position: relative; z-index: 1; display: grid; gap: 14px; max-width: 520px; }
.olho { font: 500 12px var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--painel-olho); }
[data-tema="arede"] .olho { font-weight: 600; }
.a-meio h1 { margin: 0; font: var(--titulo-peso) clamp(48px, 7vw, 84px)/0.95 var(--f-titulo); letter-spacing: -0.03em; color: #ffffff; }
.a-traco { width: 120px; height: 4px; border-radius: 999px; background: var(--traco); }
.a-meio p { margin: 0; font-size: 17px; color: var(--painel-texto); }
.a-rodape { position: relative; z-index: 1; padding-top: 16px; border-top: 1px solid var(--painel-borda); font: 400 12px var(--f-mono); color: var(--painel-texto); }
.a-fundo { position: absolute; right: -120px; bottom: -110px; width: 560px; max-width: none; opacity: .16; pointer-events: none; }
.a-fundo-simbolo { right: -80px; bottom: -130px; width: 460px; opacity: .09; }

.a-form { background: var(--fundo); display: grid; place-items: center; padding: 40px 24px; }
.a-cartao { width: min(400px, 100%); background: var(--cartao); border: 1px solid var(--borda); border-radius: 20px; padding: 34px 32px 26px; box-shadow: var(--sombra); display: grid; gap: 22px; color-scheme: light; }
.olho-linha { display: flex; align-items: center; gap: 12px; font: 700 11px var(--f-titulo); letter-spacing: .2em; text-transform: uppercase; color: var(--rotulo); }
.olho-linha::before { content: ""; width: 30px; height: 3px; border-radius: 999px; background: var(--faixa); }
.a-cartao h2 { margin: 0; font: 700 27px/1.15 var(--f-titulo); letter-spacing: -0.02em; }
.a-cartao .sub { margin: -14px 0 0; color: var(--texto-suave); }
form { display: grid; gap: 16px; }
.campo { display: grid; gap: 6px; }
.campo label { font: 700 10.5px var(--f-titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); }
.caixa { display: flex; align-items: center; gap: 8px; border-radius: 12px; padding: 0 12px; background: var(--campo); border: 1px solid var(--campo-borda); color: var(--texto-suave); }
.caixa:focus-within { border-color: var(--foco); box-shadow: 0 0 0 3px var(--foco-halo); }
.caixa input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 12px 0; outline: none; color: var(--texto-forte); font-size: 15px; }
.mostrar { border: 0; background: none; font: 600 12px var(--f-texto); cursor: pointer; padding: 4px; color: var(--link); }
.entrar { width: 100%; border: 0; border-radius: 12px; padding: 13px; font: 700 15px var(--f-titulo); cursor: pointer; background: var(--botao); color: var(--botao-texto); }
.entrar:hover { background: var(--botao-hover); box-shadow: var(--botao-sombra); }
.entrar:disabled { opacity: .7; cursor: progress; box-shadow: none; }
.ou { display: flex; align-items: center; gap: 12px; font: 700 10.5px var(--f-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .25; }
.passkey { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 12px; padding: 12px; font: 600 14px var(--f-texto); cursor: pointer; background: transparent; border: 1px solid var(--campo-borda); color: var(--texto-forte); }
.passkey:hover { border-color: var(--foco); }
.links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.link { border: 0; background: none; padding: 0; cursor: pointer; font-size: 12.5px; color: var(--texto-suave); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link:hover { color: var(--link); }
.erro { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fdecea; color: #b42318; font-size: 13px; }
.aviso { margin: 0; min-height: 18px; font-size: 12.5px; color: var(--rotulo); }
.assina { text-align: center; font: 400 11.5px var(--f-mono); color: var(--texto-suave); }

.a-fundo-triangulo { right: -60px; bottom: -60px; width: 460px; height: 400px; opacity: 1; background: rgba(255, 255, 255, .06); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* ===== Ícone do aplicativo: o mesmo no Início e no painel. Quadrado de cantos 26% na cor do app; cinza se não contratado ===== */
.app { --t: 44px; position: relative; width: var(--t); height: var(--t); flex: none; border-radius: calc(var(--t) * .26); background: var(--c); color: #fff; display: grid; place-items: center; }
.app svg { width: calc(var(--t) * .52); height: calc(var(--t) * .52); }
.app.g { --t: 64px; }
.app.cinza { filter: grayscale(1); opacity: .38; }

/* ===== Início do cliente em vidro (escolha de 14/11): degradê da marca com brilhos, barra e grade em vidro fosco ===== */
.inicio-vidro { background: #071521; }
.portal { position: relative; overflow: hidden; isolation: isolate; border-radius: 24px; color: #fff; font-family: var(--f-texto); min-height: 520px;
  background: radial-gradient(55% 65% at 10% 8%, var(--orb1) 0%, transparent 62%), radial-gradient(50% 60% at 95% 92%, var(--orb2) 0%, transparent 60%),
              radial-gradient(35% 40% at 70% 18%, var(--orb3) 0%, transparent 65%), linear-gradient(150deg, var(--p1) 0%, var(--p2) 55%, var(--p3) 100%); }
.portal.tela-cheia { border-radius: 0; min-height: 100vh; min-height: 100dvh; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.portal[data-tema="jcn"] { --p1: #061320; --p2: #0e2537; --p3: #17503e; --orb1: rgba(46, 158, 62, .55); --orb2: rgba(140, 198, 63, .45); --orb3: rgba(31, 111, 159, .35); }
.portal[data-tema="arede"] { --p1: #071338; --p2: #0f2460; --p3: #1a3a8f; --orb1: rgba(79, 142, 247, .6); --orb2: rgba(240, 180, 41, .32); --orb3: rgba(141, 182, 255, .35); }
.portal[data-tema="jr"] { --p1: #08082e; --p2: #16166e; --p3: #2b2bab; --orb1: rgba(98, 112, 255, .55); --orb2: rgba(170, 178, 255, .35); --orb3: rgba(60, 150, 255, .28); }
.decor { position: absolute; z-index: -1; pointer-events: none; right: -90px; bottom: -70px; width: 520px; max-width: none; opacity: .22; }
.decor-simbolo { right: -60px; bottom: -90px; width: 420px; opacity: .10; }
.decor-triangulo { right: -40px; bottom: -40px; width: 420px; height: 360px; opacity: 1; background: rgba(255, 255, 255, .07); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.vidro { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 24px 48px -28px rgba(0, 0, 0, .55); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .vidro { background: rgba(255, 255, 255, .16); } }
.portal-barra { margin: 14px max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px)); border-radius: 16px; min-height: 58px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 8px 16px; font: 700 15px var(--f-titulo); }
.portal-barra img { height: 26px; width: auto; display: block; }
.portal-barra .div { width: 1px; height: 20px; background: rgba(255, 255, 255, .45); }
.nome-vidro { font: 700 17px Georgia, "Times New Roman", serif; }
.portal-barra .eu { margin-left: auto; display: flex; align-items: center; gap: 10px; font: 500 13px var(--f-texto); color: rgba(255, 255, 255, .85); min-width: 0; }
.eu-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-barra .eu i { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--f-titulo); font-style: normal; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3); }
.link-vidro { border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: #fff; border-radius: 999px; padding: 5px 12px; font: 600 12.5px var(--f-texto); cursor: pointer; text-decoration: none; }
.link-vidro:hover { background: rgba(255, 255, 255, .16); }
.portal-corpo { max-width: 1100px; margin: 0 auto; padding: 34px max(16px, env(safe-area-inset-right, 0px)) 38px max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 18px; }
.portal-corpo h1, .portal-corpo h2 { margin: 0; font: 700 clamp(26px, 3.4vw, 34px)/1.1 var(--f-titulo); letter-spacing: -.02em; text-shadow: 0 2px 18px rgba(0, 0, 0, .25); color: #fff; }
.portal[data-tema="arede"] .portal-barra, .portal[data-tema="arede"] .portal-corpo h1, .portal[data-tema="arede"] .portal-corpo h2 { font-family: "Plus Jakarta Sans", var(--f-titulo); }
.portal[data-tema="arede"] .portal-corpo h1, .portal[data-tema="arede"] .portal-corpo h2 { font-weight: 800; }
.portal-corpo > p { margin: -8px 0 4px; color: rgba(255, 255, 255, .75); }
.portal-grade { border-radius: 24px; padding: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.portal-app { display: grid; justify-items: center; gap: 9px; padding: 16px 6px 12px; text-align: center; font: 600 14px var(--f-titulo); border-radius: 18px; color: #fff; border: 1px solid transparent; text-decoration: none; }
@media (prefers-reduced-motion: no-preference) { .portal-app { transition: background-color .2s, transform .2s, border-color .2s; } }
a.portal-app:hover, a.portal-app:focus-visible { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); transform: translateY(-2px); }
.portal-app .app { box-shadow: 0 14px 28px -14px var(--c), inset 0 0 0 1px rgba(255, 255, 255, .22); }
.portal-app .app::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 52%); pointer-events: none; }
.portal-app.apagada { color: rgba(255, 255, 255, .55); cursor: default; }
.portal-app.apagada .app { box-shadow: none; }
.portal-app small { display: block; font: 500 11px var(--f-texto); color: rgba(255, 255, 255, .5); margin-top: 1px; }
.portal :focus-visible { outline-color: #fff; }



@media (max-width: 860px) {
  .a { grid-template-columns: 1fr; min-height: 0; }
  .a-marca { padding: 28px 20px 24px; gap: 18px; }
  .a-meio h1 { font-size: 44px; }
  .a-meio p { font-size: 15px; }
  .a-fundo { width: 320px; right: -110px; bottom: -120px; }
  .a-fundo-simbolo { width: 260px; right: -60px; bottom: -90px; }
  .a-rodape { display: none; }
  .a-form { padding: 24px 16px 32px; }
  .a-cartao { padding: 26px 20px 20px; }
}