/* =============================================================================
   Clari.IA · telas de conta (portal.css)
   =============================================================================
   Entrar, recuperar, nova senha e confirmar e-mail, no molde do login da kodety
   (30/09): no computador, o lado claro com a foto e a frase à esquerda e o
   painel carvão com o formulário à direita; no celular, só o painel, de tela
   cheia. Botão, campo com ícone, olho da senha e o painel escuro vêm do
   /padrao.css; aqui só a casca destas telas e o que muda no fundo escuro.
   ============================================================================= */

/* Só as quatro telas de conta carregam este arquivo; o fundo do body é o do
   painel, para o recuo elástico do celular não mostrar faixa clara. */
body {
  margin: 0;
  background: var(--c-surface-deep);
}

/* Paleta nova (01/10, decisão do Pedro): aurora no fundo, carvão, e a AÇÃO num
   terroso claro, areia (combina com o rosa sem ser da aurora). Nas telas de conta a "cor
   principal" deixa de ser a sálvia: botão, logo, links, foco e selos mudam
   juntos por estes tokens, sem tocar no resto do app. */
.portal {
  --c-primary: var(--c-terra);
  --c-primary-soft: var(--c-terra-hover);
  --c-primary-strong: var(--c-terra-claro);
  --c-primary-ink: var(--c-surface-deep);
  display: grid;
  min-height: 100dvh;
  background: var(--c-surface-deep);
  font-family: var(--f-ui);
  /* texto base pela variável (02/10: fontes do sistema maiores, ×1,125) */
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.portal *,
.portal *::before,
.portal *::after {
  box-sizing: border-box;
}

/* ── o lado claro (só no computador) ───────────────────────────────────────
   A aurora emoldurada no carvão (o mesmo do painel do formulário); a
   frase numa placa translúcida no canto de baixo. */
/* No celular o lado vira uma faixa com a aurora animada no topo (antes o
   celular não via cor nenhuma); a frase fica só no computador. */
.portal-lado {
  position: relative;
  display: block;
  height: 132px;
  margin: var(--s-3) var(--s-3) 0;
  border-radius: var(--r-xl);
  overflow: hidden;
}
.portal-lado .placa {
  display: none;
}
/* 02/10: a cor da marca mais leve nas 5 telas de conta (entrar, recuperar, nova
   senha, verificar, equipe): a aurora a 50% sobre uma base clara (sem a base ela
   escureceria sobre o carvão). */
.portal-lado .aurora {
  background: var(--c-marca-claro);
}
.portal-lado .aurora::before,
.portal-lado .aurora::after {
  opacity: 0.5;
}
.portal-lado-imagem {
  display: none;
}
@media (min-width: 1024px) {
  .portal {
    /* 70% / 30% (pedido do Pedro, 30/09); o formulário (392px + respiro) nunca
       fica abaixo de 440px. */
    grid-template-columns: minmax(0, 7fr) minmax(440px, 3fr);
  }
  .portal-lado {
    position: relative;
    display: flex;
    height: auto;
    margin: 0;
    border-radius: 0;
    overflow: visible;
    align-items: flex-end;
    padding: var(--s-5);
    /* O mesmo carvão do painel do formulário: a tela inteira escura, só a
       aurora acesa na moldura (pedido do Pedro, 30/09). */
    background: var(--c-surface-deep);
  }
  /* A moldura no creme continua; dentro dela, a aurora da Clari (padrao.css
     seção 16) no lugar da foto (pedido do Pedro, 30/09). */
  .portal-lado .aurora {
    inset: var(--s-5);
    border-radius: var(--r-xl);
  }
  /* A imagem do celular com o app (02/10, nas 5 telas de conta) dentro da
     aurora: "multiplicar" apaga o branco da foto e deixa a aurora aparecer
     atrás; a mão e o celular ficam. Encostada embaixo, à direita. */
  .portal-lado .portal-lado-imagem {
    display: block;
    position: absolute;
    right: var(--s-5);
    bottom: var(--s-5);
    width: calc(100% - 2 * var(--s-5));
    height: auto;
    max-height: calc(100% - 2 * var(--s-5));
    object-fit: contain;
    object-position: right bottom;
    border-radius: 0 0 var(--r-xl) var(--r-xl);
    mix-blend-mode: multiply;
    /* some no topo e na esquerda, sem a linha reta da borda da foto */
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0, #000 45%),
      linear-gradient(to right, transparent 0, #000 35%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to bottom, transparent 0, #000 45%),
      linear-gradient(to right, transparent 0, #000 35%);
    mask-composite: intersect;
    pointer-events: none;
  }
  .portal-lado .placa {
    display: block;
    position: relative;
    max-width: 440px;
    margin: 0 0 var(--s-4) var(--s-4);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-lg);
    background: rgb(242 238 230 / 0.9);
    backdrop-filter: blur(8px);
    font-family: var(--f-display);
    font-weight: var(--fw-display);
    font-size: var(--fs-h2);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-display);
    color: var(--c-ink);
  }
}

/* ── o painel escuro com o formulário ──────────────────────────────────────── */
.portal-painel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 6vw, 64px) 16px;
}
.portal-coluna {
  width: 100%;
  max-width: 392px;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.portal .marca {
  align-self: flex-start;
  font-family: var(--f-display);
  /* A mesma marca de todas as telas: Sora 400, 22px (revisão 30/09, I-4). */
  font-size: var(--fs-h2);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  color: var(--c-ink-inverse);
  text-decoration: none;
}
.portal .marca em {
  font-style: normal;
  color: var(--c-primary);
}

/* Título do formulário: Sora 600 no tamanho do login da kodety. O título grande
   e leve (400) é o das seções; aqui ele é curto e precisa de peso. */
.portal .titulo {
  font-size: clamp(1.8281rem, 4.5vw, 2.1094rem);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--c-ink-inverse);
}
.portal .apoio {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: rgb(242 238 230 / 0.66);
}

.portal .body,
.portal .foot,
.portal .pilha {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.portal .foot:empty {
  display: none;
}
.portal .foot .btn3,
.portal .btn3.google {
  width: 100%;
}

.portal .lnk {
  color: var(--c-primary);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  /* Alvo de toque maior sem mexer na linha (D-22). */
  padding-block: 12px;
}
.portal .lnk:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.portal .lnk .icone {
  margin-right: 0.4em;
  vertical-align: -0.15em;
}

/* "Esqueci a senha" colado ao campo de cima, à direita; "Ainda não tem conta?"
   centrado abaixo do botão (a ordem do login da kodety). */
.portal .linha-esqueci {
  margin: calc(-1 * var(--s-3)) 0 calc(-1 * var(--s-2));
  text-align: right;
  font-size: var(--fs-sm);
}
.portal .linha-conta {
  margin: 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: rgb(242 238 230 / 0.66);
}

.portal .ou3 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  color: rgb(242 238 230 / 0.5);
}
.portal .ou3::before,
.portal .ou3::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-filete-escuro);
}

.portal .rodape-lgpd {
  margin: 0;
  font-size: var(--fs-legenda);
  line-height: var(--lh-body);
  color: rgb(242 238 230 / 0.55);
}

/* Selo de proteção ao pé do painel (o "Access protected" da kodety). */
.portal-selo {
  display: flex;
  gap: var(--s-2);
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-filete-escuro);
  font-size: var(--fs-legenda);
  line-height: var(--lh-body);
  color: rgb(242 238 230 / 0.55);
}
.portal-selo .icone {
  flex: none;
  margin-top: 2px;
  color: var(--c-primary);
}

/* ── painéis de confirmação no fundo escuro ────────────────────────────────
   Sem cartão claro no carvão: contorno por filete, e o de sucesso num véu
   sálvia (a regra dos filetes, não da sombra). */
.portal .painel {
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--c-filete-escuro);
  color: var(--c-ink-inverse);
}
.portal .painel-salvia {
  background: color-mix(in srgb, var(--c-terra) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-terra) 28%, transparent);
}
.portal .painel .titulo + .apoio,
.portal .painel .etiqueta + .titulo {
  margin-top: var(--s-3);
}
.portal .selo-portal {
  width: 64px;
  height: 64px;
  margin-inline: auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--c-terra) 14%, transparent);
  color: var(--c-primary);
}
.portal .selo-portal svg {
  width: 26px;
  height: 26px;
}
/* Título dentro de painel de confirmação: um degrau abaixo do título da tela. */
.portal .painel .titulo.t-cartao {
  font-size: var(--fs-h2);
}

/* Links sobre o carvão no tom mais claro da areia (10,8:1). */
.portal .lnk {
  color: var(--c-terra-claro);
}

/* O botão do Google no topo (02/10): ícone e texto juntos, centrados. */
.portal .btn3.google {
  justify-content: center;
  gap: 10px;
}

/* "Voltar para a página inicial" no topo da tela de entrar (02/10). */
.portal .portal-voltar {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-bottom: calc(-1 * var(--s-3));
  font-size: var(--fs-sm);
  font-weight: 500;
  color: rgb(242 238 230 / 0.7);
}
.portal .portal-voltar:hover {
  color: var(--c-terra-claro);
}
.portal .portal-voltar .icone {
  width: 16px;
  height: 16px;
}

/* ── 02/10/2026, pedido do Pedro para as telas de conta (entrar, recuperar,
   nova senha, verificar, equipe) ──────────────────────────────────────────
   Marca maior (era 22px, o tamanho das outras telas); no celular saem a faixa
   de imagem do topo e o «Voltar para a página inicial» (a marca já leva ao
   início). */
.portal .marca {
  font-size: 2.1094rem;
}
@media (max-width: 1023px) {
  .portal-lado {
    display: none;
  }
  .portal .portal-voltar {
    display: none;
  }
}

/* Linha centrada (02/10): «Perdi o celular: usar um código de recuperação» no
   segundo fator, que antes ficava à direita como o «Esqueci a senha». */
.portal .linha-centro {
  margin: calc(-1 * var(--s-2)) 0 0;
  text-align: center;
  font-size: var(--fs-sm);
}
.portal button.lnk {
  padding: 8px 0;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}