@charset "UTF-8";
/* Identidade visual comum (30/10/2026).
 *
 * O dono comparou com plataformas sólidas e notou duas coisas: a landing
 * parecia amadora, e as páginas "não se conversavam" — da landing escura e
 * desenhada caía-se numa tela de entrada branca e genérica. Este arquivo é a
 * linguagem que as portas de entrada dividem: landing, entrada do app, entrada
 * do profissional e pagamento. Profundidade (fundo com brilho), cartões de
 * vidro, botão principal em degradê e títulos grandes.
 *
 * Só CSS: nada de fonte ou imagem de terceiros (CSP e 4G). Dentro do app, depois
 * do login, nada daqui vale — as telas aprovadas ficam como estão.
 */
:root{
  --id-fundo:#fbf8f3;
  --id-menta:#14b8a6;
  --id-destaque:#0f766e;
  --id-brilho-a:color-mix(in srgb,#2dd4bf 16%,transparent);
  --id-brilho-b:color-mix(in srgb,#fb923c 11%,transparent);
  --id-vidro:color-mix(in srgb,#fffdf9 82%,transparent);
  --id-vidro-forte:color-mix(in srgb,#fffdf9 94%,transparent);
  --id-borda:color-mix(in srgb,#292524 11%,transparent);
  --id-borda-acento:color-mix(in srgb,#14b8a6 45%,transparent);
  --id-sombra:0 1px 0 rgb(255 255 255 / .7) inset,0 20px 50px -30px rgb(41 37 36 / .32);
  /* Paleta própria (30/10/2026, pedido do dono: "não copie as cores do
     Prime"): fundo quente (creme / grafite), brilhos menta e pêssego; o azul
     fica para a marca, e o degradê da ação principal vai do azul ao menta. */
  --id-grad:linear-gradient(135deg,var(--acento),var(--id-menta));
  --id-texto-grad:linear-gradient(100deg,var(--acento) 5%,var(--id-menta) 85%);
  --id-brilho-botao:0 14px 32px -14px color-mix(in srgb,var(--id-menta) 70%,transparent);
  --id-raio:22px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-modo='claro']){
    --id-fundo:#0f0d0b;
    --id-destaque:#5eead4;
    --id-brilho-a:color-mix(in srgb,#2dd4bf 13%,transparent);
    --id-brilho-b:color-mix(in srgb,#fb923c 9%,transparent);
    --id-vidro:color-mix(in srgb,#1c1917 72%,transparent);
    --id-vidro-forte:color-mix(in srgb,#1c1917 90%,transparent);
    --id-borda:rgb(231 229 228 / .10);
    --id-borda-acento:color-mix(in srgb,#2dd4bf 38%,transparent);
    --id-sombra:0 1px 0 rgb(255 255 255 / .04) inset,0 24px 60px -30px rgb(0 0 0 / .85);
  }
}
:root[data-modo='escuro']{
  --id-fundo:#0f0d0b;
  --id-destaque:#5eead4;
  --id-brilho-a:color-mix(in srgb,#2dd4bf 13%,transparent);
  --id-brilho-b:color-mix(in srgb,#fb923c 9%,transparent);
  --id-vidro:color-mix(in srgb,#1c1917 72%,transparent);
  --id-vidro-forte:color-mix(in srgb,#1c1917 90%,transparent);
  --id-borda:rgb(231 229 228 / .10);
  --id-borda-acento:color-mix(in srgb,#2dd4bf 38%,transparent);
  --id-sombra:0 1px 0 rgb(255 255 255 / .04) inset,0 24px 60px -30px rgb(0 0 0 / .85);
}

/* --- Fundo com profundidade --------------------------------------------------
   Na landing sempre; no app e no profissional só enquanto a tela de entrada
   (#portao) aparece. Camada fixa atrás de tudo: não pesa na rolagem. */
body.id-pagina,body:has(> #portao:not([hidden])){background:var(--id-fundo)}
body.id-pagina::before,body:has(> #portao:not([hidden]))::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 540px at 88% -10%,var(--id-brilho-a),transparent 62%),
    radial-gradient(760px 520px at -14% 34%,var(--id-brilho-b),transparent 60%),
    radial-gradient(820px 560px at 55% 112%,var(--id-brilho-a),transparent 66%)}

/* --- Peças comuns --------------------------------------------------------- */
.id-vidro{background:var(--id-vidro);border:1px solid var(--id-borda);border-radius:var(--id-raio);
  box-shadow:var(--id-sombra);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.id-pilula{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;
  border:1px solid var(--id-borda-acento);background:color-mix(in srgb,var(--id-menta) 10%,transparent);
  color:var(--id-destaque);font-size:11px;font-weight:750;letter-spacing:1.4px;text-transform:uppercase}
.id-texto-grad{background:var(--id-texto-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* --- Tela de entrada (app e profissional) ---------------------------------- */
#portao{gap:16px}
#portao .portao-cabecalho{padding-top:26px}
#portao .cartao{background:var(--id-vidro);border:1px solid var(--id-borda);border-radius:24px;box-shadow:var(--id-sombra);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:26px}
#portao .cartao h2,#portao .cartao>h3:first-child{font-size:24px;letter-spacing:-.5px}
#portao .botao-primario{background:var(--id-grad);border-color:transparent;color:#fff;box-shadow:var(--id-brilho-botao)}
#portao .botao-primario:hover{filter:brightness(1.06)}
#portao input:not([type='checkbox']):not([type='radio']),#portao select{background:var(--id-vidro-forte);border-color:var(--id-borda)}
#portao input:focus-visible,#portao select:focus-visible{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 22%,transparent)}
#portao .aviso{background:color-mix(in srgb,var(--id-menta) 7%,transparent);border-color:var(--id-borda)}
@media (prefers-reduced-motion: no-preference){
  #portao .cartao{animation:id-surgir .35s ease-out both}
}
@keyframes id-surgir{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* "Instalar app" e o seletor de tema, nas portas de entrada. */
body.id-pagina .rl-instalar-atalho,body:has(> #portao:not([hidden])) .rl-instalar-atalho,
body:has(> #portao:not([hidden])) .barra-aparencia select{background:var(--id-vidro);border:1px solid var(--id-borda);color:var(--tinta);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body.id-pagina .rl-instalar-atalho:hover,body:has(> #portao:not([hidden])) .rl-instalar-atalho:hover{border-color:var(--id-borda-acento)}
#portao .cartao>h2:first-of-type,#portao .cartao h2{font-size:26px;font-weight:780;letter-spacing:-.6px}

/* "Entrar com biometria" dentro do cartão de entrada (30/10/2026): outra forma
   de entrar na mesma conta, logo abaixo de "Entrar", como no app do banco. */
.entrada-biometria[hidden]{display:none}
.separador-ou{display:flex;align-items:center;gap:12px;margin:14px 0 12px;font-size:12px;color:var(--tinta-2);text-transform:lowercase}
.separador-ou:before,.separador-ou:after{content:"";flex:1;height:1px;background:var(--id-borda,var(--borda))}
.botao-biometria{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:650;
  border-color:var(--id-borda-acento,var(--acento));background:color-mix(in srgb,var(--id-menta,#14b8a6) 9%,transparent)}
.botao-biometria:hover{border-color:var(--acento)}
.icone-digital{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;color:var(--id-destaque,var(--acento))}