/*
 * A página da conta (`conta.html`) e o selo "Fundador" do cabeçalho do app.
 *
 * Carregada nas duas páginas, por isso TODA regra aqui mora sob uma classe
 * `conta-*` ou sob `.conta-pagina` — nada vaza para a tela de comparação.
 * Todo valor visual sai de `tokens.css`; a única medida estrutural é o fio de
 * 1px, que vem de `--fio-comando`.
 *
 * O desenho segue o do app: superfícies neutras, um cartão só de
 * profundidade, hierarquia por tamanho e peso de letra, azul só na ação.
 */

/* ---------------------------------------------------------------- *
 * O selo no cabeçalho do app                                        *
 * ---------------------------------------------------------------- */

/* O link da conta é um `.icone-cabecalho` (44px, fantasma). Com o selo, ele
   cresce para o lado e leva a pastilha junto do ícone. */
.conta-entrada {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-xs);
  text-decoration: none;
}

.conta-entrada:has(.conta-entrada__selo:not([hidden])) {
  padding-inline: var(--e-sm);
}

/*
 * O link da conta é a quinta ação do cabeçalho, e a 390px cinco não cabiam
 * numa fileira ao lado do símbolo: o cabeçalho da tela inicial ia de 64 a
 * 113px, empurrando a dobra. As ações cedem como já cediam abaixo de 390px
 * (ver app.css), só que antes — primeiro o vão, depois o recuo dos botões de
 * texto e 4px de largura dos alvos de ícone, que seguem com 44px de altura.
 * Tudo preso a `:has(.conta-entrada)`: sem o link, nada muda.
 */
@media (max-width: 429px) {
  .cabecalho__acoes:has(.conta-entrada) {
    gap: 0;
  }
}

@media (max-width: 389px) {
  .cabecalho__acoes:has(.conta-entrada) .botao {
    padding-inline: var(--e-md);
  }

  .cabecalho__acoes:has(.conta-entrada) .paleta__abrir,
  .cabecalho__acoes:has(.conta-entrada) .icone-cabecalho {
    min-width: calc(var(--alvo-toque) - var(--e-xs));
  }
}

@media (max-width: 359px) {
  .cabecalho__acoes:has(.conta-entrada) .botao {
    padding-inline: var(--e-xs);
  }

  .cabecalho__acoes:has(.conta-entrada) .paleta__abrir,
  .cabecalho__acoes:has(.conta-entrada) .icone-cabecalho {
    min-width: calc(var(--alvo-toque) - var(--e-sm));
  }
}

/*
 * Logo acima do celular (601–679px), a marca volta com o nome e o botão do
 * idioma volta ao cabeçalho: com o link da conta, a fileira não cabia e a
 * marca descia para uma segunda linha (136px). O vão entre as ações cede.
 */
@media (min-width: 601px) and (max-width: 679px) {
  .cabecalho__acoes:has(.conta-entrada) {
    gap: 0;
  }

  .cabecalho__acoes:has(.conta-entrada) .botao {
    padding-inline: var(--e-md);
  }
}

/*
 * Em inglês, "See an example" é 24px mais largo que "Ver exemplo", e a mesma
 * fileira estourava de 459px para baixo (o cabeçalho ia a 105–113px). A
 * mesma cessão de cima, um degrau antes. Abaixo de 360px, em inglês, as ações passam a duas
 * fileiras: menos que isso nos alvos de ícone deixaria de ser um alvo de toque.
 */
@media (max-width: 459px) {
  :root[data-idioma="en"] .cabecalho__acoes:has(.conta-entrada) .botao {
    padding-inline: var(--e-md);
  }

  :root[data-idioma="en"] .cabecalho__acoes:has(.conta-entrada) .paleta__abrir,
  :root[data-idioma="en"] .cabecalho__acoes:has(.conta-entrada) .icone-cabecalho {
    min-width: calc(var(--alvo-toque) - var(--e-xs));
  }
}

@media (max-width: 389px) {
  :root[data-idioma="en"] .cabecalho__acoes:has(.conta-entrada) .botao {
    padding-inline: var(--e-xs);
  }

  :root[data-idioma="en"] .cabecalho__acoes:has(.conta-entrada) .paleta__abrir,
  :root[data-idioma="en"] .cabecalho__acoes:has(.conta-entrada) .icone-cabecalho {
    min-width: calc(var(--alvo-toque) - var(--e-sm));
  }
}

/*
 * Com a comparação aberta em tela larga, as abas e a contagem sobem para a
 * faixa do cabeçalho (app.css), e o link da conta empurrava a contagem para
 * cima das abas a 1280 e a 1440. Ele cede como o botão do idioma cede nessa
 * faixa: a conta continua no cabeçalho da tela inicial e volta aqui a partir
 * de 1600px, onde o vão sobra.
 */
@media (min-width: 1280px) and (max-width: 1599px) and (min-height: 641px) {
  body:has(.tela-resultado:not([hidden])) .cabecalho .conta-entrada {
    display: none;
  }
}

.conta-selo,
.conta-entrada__selo {
  display: inline-flex;
  align-items: center;
  padding: var(--vao-linha-dupla) var(--e-sm);
  border-radius: var(--raio-pilula);
  background: var(--marca-pastilha);
  color: var(--marca-pastilha-tinta);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-etiqueta);
  text-transform: uppercase;
  line-height: var(--entrelinha-interface);
}

/*
 * No celular a pastilha escrita não cabe: vira um ponto no canto do ícone. O
 * nome acessível do link já diz "Conta — Fundador" (js/conta-selo.js). Até
 * 719px, e não só no celular: logo acima dele a marca volta com o nome e o
 * idioma volta ao cabeçalho, e com a pastilha a marca descia de linha.
 */
@media (max-width: 719px) {
  .conta-entrada {
    position: relative;
  }

  .conta-entrada:has(.conta-entrada__selo:not([hidden])) {
    padding-inline: 0;
  }

  .conta-entrada__selo {
    position: absolute;
    top: var(--e-sm);
    right: var(--e-sm);
    width: var(--e-sm);
    height: var(--e-sm);
    padding: 0;
    overflow: hidden;
    font-size: 0;
    box-shadow: 0 0 0 var(--anel-foco) var(--vidro);
  }
}

/* ---------------------------------------------------------------- *
 * A página                                                          *
 * ---------------------------------------------------------------- */

.conta-pagina,
.conta-pagina *,
.conta-pagina *::before,
.conta-pagina *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.conta-pagina [hidden] {
  display: none !important;
}

.conta-pagina {
  min-height: 100dvh;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte-interface);
  font-size: var(--t-corpo);
  letter-spacing: var(--letra-corpo);
  line-height: var(--entrelinha-interface);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.conta-pagina :focus-visible {
  outline: var(--anel-foco) solid var(--acento);
  outline-offset: var(--anel-foco);
}

.conta-pagina ::selection {
  background: var(--selecao);
}

.conta-topo {
  position: sticky;
  top: 0;
  z-index: var(--camada-cabecalho);
  display: flex;
  align-items: center;
  min-height: var(--altura-cabecalho);
  padding: max(var(--e-sm), env(safe-area-inset-top)) max(var(--e-lg), env(safe-area-inset-right))
    var(--e-sm) max(var(--e-lg), env(safe-area-inset-left));
  background: var(--vidro);
  backdrop-filter: var(--vidro-desfoque);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  border-bottom: var(--fio-comando) solid var(--linha);
}

.conta-topo__voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--e-sm);
  min-height: var(--alvo-toque);
  margin-left: calc(var(--e-sm) * -1);
  padding: var(--e-sm);
  border-radius: var(--raio-md);
  color: var(--tinta);
  text-decoration: none;
  transition: background var(--rapido) var(--suave);
}

.conta-topo__voltar:hover {
  background: var(--fundo-realce);
}

.conta-topo__icone {
  flex: none;
}

.conta-topo__nome {
  font-size: var(--t-titulo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-titulo);
}

.conta {
  width: 100%;
  max-width: var(--painel-resumo); /* a mesma medida de leitura do resumo */
  margin: 0 auto;
  padding: var(--e-xxl) var(--e-lg) var(--e-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--e-lg);
  animation: conta-entrar var(--entrada) var(--suave);
}

@keyframes conta-entrar {
  from {
    opacity: 0;
    transform: translateY(calc(var(--deslocamento-entrada) * -1));
  }
}

.conta__sobretitulo {
  color: var(--tinta-suave);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-etiqueta);
  text-transform: uppercase;
}

.conta__titulo {
  margin-top: calc(var(--e-lg) * -1 + var(--e-xs));
  font-size: var(--t-destaque);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-destaque);
  line-height: var(--entrelinha-destaque);
}

/* Enquanto carrega, só o título: nada de oferta piscando antes de saber o estado. */
.conta[data-estado='carregando'] .conta__dados {
  visibility: hidden;
}

.conta__aviso {
  padding: var(--e-md) var(--e-lg);
  border-radius: var(--raio-md);
  background: var(--fundo-realce);
  color: var(--tinta);
  font-size: var(--t-apoio);
  letter-spacing: var(--letra-apoio);
}

.conta__pessoa {
  display: flex;
  flex-direction: column;
  gap: var(--vao-linha-dupla);
  min-width: 0;
}

.conta__nome {
  font-weight: var(--peso-forte);
  overflow-wrap: anywhere;
}

.conta__email {
  color: var(--tinta-suave);
  font-size: var(--t-apoio);
  letter-spacing: var(--letra-apoio);
  overflow-wrap: anywhere;
}

/* O único nível de profundidade da página. */
.conta__cartao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-md);
  padding: var(--e-xl) var(--e-lg);
  border-radius: var(--raio-lg);
  background: var(--papel);
  box-shadow: var(--sombra);
}

.conta__oferta-titulo {
  font-size: var(--t-titulo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-titulo);
}

.conta__preco {
  font-size: var(--t-destaque);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-destaque);
  line-height: var(--entrelinha-destaque);
  font-variant-numeric: tabular-nums;
}

.conta__validade {
  font-size: var(--t-titulo);
  letter-spacing: var(--letra-titulo);
}

.conta__validade strong {
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
}

.conta__apoio {
  color: var(--tinta-suave);
  font-size: var(--t-apoio);
  letter-spacing: var(--letra-apoio);
}

.conta__beneficios {
  display: flex;
  flex-direction: column;
  gap: var(--e-sm);
  padding-left: var(--e-lg);
}

.conta__beneficios li::marker {
  color: var(--acento);
}

.conta__acoes {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--e-sm);
  width: 100%;
  margin-top: var(--e-sm);
}

.conta__sair {
  display: flex;
  justify-content: flex-start;
}

.conta-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--alvo-toque);
  padding: var(--e-sm) var(--e-lg);
  border: none;
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--t-corpo);
  font-weight: var(--peso-medio);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--rapido) var(--suave), opacity var(--rapido) var(--suave),
    transform var(--rapido) var(--suave);
}

.conta-botao:active:not(:disabled) {
  transform: scale(var(--escala-toque));
}

.conta-botao:disabled {
  opacity: var(--opacidade-desligado);
  cursor: default;
}

.conta-botao--primario {
  background: var(--acento-superficie);
  color: var(--acento-tinta);
}

.conta-botao--primario:hover:not(:disabled) {
  background: var(--acento-superficie-forte);
}

.conta-botao--discreto {
  margin-left: calc(var(--e-lg) * -1);
  color: var(--acento);
}

.conta-botao--discreto:hover:not(:disabled) {
  background: var(--fundo-realce);
}

/* "Em breve": uma etiqueta, e não um botão desligado que parece quebrado. */
.conta-em-breve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: var(--alvo-toque);
  padding: var(--e-sm) var(--e-lg);
  border: var(--fio-comando) solid var(--linha-forte);
  border-radius: var(--raio-pilula);
  color: var(--tinta-suave);
  font-size: var(--t-apoio);
  font-weight: var(--peso-medio);
  letter-spacing: var(--letra-apoio);
}

.conta__dados {
  display: flex;
  flex-direction: column;
  gap: var(--e-sm);
  padding-top: var(--e-lg);
  border-top: var(--fio-comando) solid var(--linha);
  color: var(--tinta-suave);
  font-size: var(--t-apoio);
  letter-spacing: var(--letra-apoio);
}

.conta__dados-titulo {
  color: var(--tinta);
  font-size: var(--t-corpo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-corpo);
}

.conta__dados strong {
  color: var(--tinta);
  font-weight: var(--peso-forte);
}

.conta__dados a {
  color: var(--acento);
  overflow-wrap: anywhere;
}

@media (min-width: 600px) {
  .conta__acoes {
    align-items: flex-start;
  }
}