/* ==========================================================================
   public.css — a superfície pública do InfinityMail
   ==========================================================================
   COMPLEMENTO do `panel.css`, nunca substituto. A cópia local de
   `views/layouts/main.php` carrega os dois, nesta ordem, em toda página
   pública: landing, login, cadastro, recuperação de senha, legal, contato e
   erro.

   POR QUE ESTE ARQUIVO É PEQUENO
   ------------------------------
   Porque o `panel.css` já traz o sistema inteiro — tokens, tema claro e
   escuro, base tipográfica e os componentes compartilhados (`c-container`,
   `c-section`, `c-card`, `c-button`, `c-field`, `c-form`, `c-alert`,
   `c-badge`, `c-empty`). O site e o painel usam o MESMO vocabulário porque
   usam a MESMA folha, não uma cópia dela.

   Aqui entra só o que existe fora do painel e o painel não tem: cabeçalho e
   rodapé de marketing, cookiebar, hero, features, steps, faq, cta, pricing,
   prose e a casca das telas de autenticação.

   A DISCIPLINA
   ------------
   Zero cor literal. Todo valor vem de `var(--color-*)`, `var(--space-*)`,
   `var(--font-size-*)` — os tokens do `panel.css`. É o que garante que o tema
   escuro funcione aqui sem uma regra a mais, e que trocar a marca continue
   sendo editar um bloco só.

   POR QUE O BUNDLE DO KIT SAIU
   ----------------------------
   Ele carregava o tema `emerald`. O painel usa a marca índigo. O site era
   verde, o painel índigo, e o logo trocava de cor conforme o usuário estivesse
   logado — dois produtos. Sobrescrever por token não bastou: parte dos
   componentes do bundle vence por especificidade, e a página ficava mista.
   Ver o comentário no `views/layouts/main.php`.

   ⚠️  Tela do kit sem estilo = componente ausente daqui. Acrescente; não
   volte a carregar o bundle.
   ========================================================================== */


/* ══ 1. Cabeçalho ═══════════════════════════════════════════════════════════
   Mesmo peso da topbar do painel: superfície branca, uma linha embaixo, nada
   de sombra. É o primeiro elemento que diz "é o mesmo produto". */

.c-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-bg-surface);
  border-bottom: var(--border-width) solid var(--color-border);
}

.c-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding: var(--space-3) var(--space-4);
}

.c-header__nav {
  display: none;
  gap: var(--space-5);
  margin-inline-start: auto;
}

/* O menu some no telefone em vez de virar hambúrguer: são três links, e o
   rodapé os repete. Menu escondido atrás de um botão que ninguém toca é pior
   que menu ausente. */
@media (min-width: 48rem) {
  .c-header__nav { display: flex; }
}

.c-header__nav a {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.c-header__nav a:hover { color: var(--color-text-primary); }

.c-header__cta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

@media (min-width: 48rem) {
  .c-header__cta { margin-inline-start: var(--space-5); }
}

/*
 * "Entrar" é o último item da navegação e precisa se destacar dos demais: ele
 * não é uma seção do site, é uma ação. Peso maior e cor de texto primária
 * fazem isso sem virar um segundo botão ao lado do "Criar conta" — dois botões
 * competindo é o que faz ninguém clicar em nenhum.
 */
.c-header__nav a:last-child {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
}


/* ══ 2. Logo ════════════════════════════════════════════════════════════════
   Cópia exata do `c-sidebar__brand` do painel: mesma marca quadrada, mesmo
   tamanho, mesma tipografia. Era aqui que a diferença mais saltava — o
   quadrado do site era verde e o do painel índigo. */

.c-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  text-decoration: none;
}

.c-logo:hover { color: var(--color-accent-text); }

.c-logo__mark {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-weight: var(--font-weight-bold);

  /* O símbolo de infinito é largo e baixo: no tamanho do texto normal ele
     desaparece dentro do quadrado. Precisa de corpo maior e de entrelinha 1
     para ficar centrado de fato — `place-items: center` alinha a CAIXA da
     linha, não o glifo. */
  font-size: 1.15rem;
  line-height: 1;
}

/*
 * ─── O SÍMBOLO VEM DO CSS, E NÃO DA MARCAÇÃO ──────────────────────────────
 *
 * A partial `partials/header.php` do kit emite o quadrado VAZIO:
 * `<span class="c-logo__mark" aria-hidden="true"></span>`. É por isso que o
 * cabeçalho do site mostrava um quadrado colorido sem nada dentro.
 *
 * Pôr o símbolo aqui evita copiar a partial inteira para o projeto só por um
 * caractere — cópia que congelaria e perderia as correções do kit no menu, no
 * CTA e na navegação.
 *
 * `content` em elemento decorativo é seguro: o `aria-hidden="true"` já está na
 * marcação do kit, então o leitor de tela ignora o quadrado e lê só o nome ao
 * lado. Sem isso ele anunciaria "infinito InfinityMail".
 *
 * No painel o mesmo símbolo está na MARCAÇÃO (`sidebar.php`), porque lá o
 * arquivo é nosso e texto real é sempre melhor que texto gerado por CSS.
 */
.c-logo__mark::before { content: "\221E"; }


/* ══ 3. Cabeçalho de seção ══════════════════════════════════════════════════
   O kit usa `c-section__head` / `__title` / `__lead`; o painel usa
   `c-section__header`. Vocabulários irmãos, então aqui só se completa o que
   falta — sem renomear nada nas views do kit. */

.c-section__head {
  max-width: var(--measure-base);
  margin-bottom: var(--space-8);
}

.c-section__head--center {
  margin-inline: auto;
  text-align: center;
}

.c-section__title {
  margin-top: var(--space-3);
  font-size: var(--font-size-3xl);
}

@media (min-width: 48rem) {
  .c-section__title { font-size: var(--font-size-4xl); }
}

.c-section__lead {
  margin-top: var(--space-4);
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
}


/* ══ 4. Hero ════════════════════════════════════════════════════════════════
   O hero do kit é dimensionado para produto de consumo: título enorme, coluna
   estreita, muito vazio. A escala aqui é a do painel — o maior título do
   sistema é `--font-size-5xl` (2.75rem), e passar disso é o que fazia as duas
   telas parecerem de empresas diferentes.

   `clamp()` em vez de media query: cresce com a viewport sem degrau. */

.c-hero {
  padding-block: var(--space-12) var(--space-10);
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--color-bg-surface);
}

@media (min-width: 48rem) {
  .c-hero { padding-block: var(--space-20) var(--space-16); }
}

.c-hero__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

/* Duas colunas só quando há imagem. Sem ela, o grid de uma coluna deixa o
   texto ocupar a medida legível inteira em vez de uma faixa estreita com
   metade da tela vazia ao lado — que é como estava. */
@media (min-width: 60rem) {
  .c-hero__grid:has(.c-hero__media) { grid-template-columns: 1.1fr 1fr; }
}

.c-hero__title {
  margin-top: var(--space-3);
  font-size: clamp(2rem, 1.3rem + 3vw, 2.75rem);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

/* O `<em>` é o trecho destacado ("chega."). Cor de acento, sem itálico —
   itálico numa display bold fica torto em quase toda fonte de sistema. */
.c-hero__title em {
  font-style: normal;
  color: var(--color-accent-text);
}

.c-hero__text {
  margin-top: var(--space-5);
  max-width: var(--measure-base);
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
}

.c-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.c-hero__note {
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.c-hero__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--color-border);
  box-shadow: var(--shadow-md);
}


/* ══ 5. Features, steps e faq ═══════════════════════════════════════════════
   Os três são grades de cartão com a mesma pele do `c-card` do painel. Um só
   bloco de regras porque a diferença entre eles é semântica, não visual —
   duplicar produziria três definições que divergem na primeira correção. */

.c-features,
.c-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 48rem) {
  .c-features,
  .c-steps { grid-template-columns: repeat(3, 1fr); }
}

.c-feature,
.c-step {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-sm);
}

.c-feature__title,
.c-step__title {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-3);
}

.c-feature__text,
.c-step__text {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}

.c-faq {
  max-width: var(--measure-base);
  margin-inline: auto;
}

.c-faq__item {
  border-bottom: var(--border-width) solid var(--color-border);
}

/* `<details>`/`<summary>` nativo: abre sem JavaScript, é anunciado como
   expansível pelo leitor de tela e o teclado já funciona. */
.c-faq__question {
  padding-block: var(--space-4);
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  list-style: none;
}

.c-faq__question::-webkit-details-marker { display: none; }

.c-faq__answer {
  padding-bottom: var(--space-5);
  color: var(--color-text-secondary);
}


/* ══ 6. Chamada final ═══════════════════════════════════════════════════════
   Único bloco de fundo forte da página. O painel tem `c-section--inverse` com
   o mesmo papel; a cor vem do mesmo token, então os dois combinam sem ajuste. */

.c-cta {
  padding: var(--space-12) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  text-align: center;
}

.c-cta__title {
  font-size: var(--font-size-3xl);
  color: var(--color-text-inverse);
}

.c-cta__text {
  margin-top: var(--space-4);
  margin-inline: auto;
  max-width: var(--measure-base);
  color: var(--color-text-muted);
}

.c-cta .c-button { margin-top: var(--space-8); }


/* ══ 7. Planos ══════════════════════════════════════════════════════════════ */

.c-pricing {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 48rem) {
  .c-pricing { grid-template-columns: repeat(3, 1fr); }
}

.c-plan {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-sm);
}

/* O plano destacado ganha borda de acento, e não fundo colorido: fundo
   diferente muda o contraste do texto e obriga a reescrever a cor de tudo
   dentro. Borda comunica o mesmo e não quebra nada. */
.c-plan--featured {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-accent);
}

.c-plan__name {
  font-size: var(--font-size-xl);
}

.c-plan__badge {
  display: inline-flex;
  align-items: center;
  margin-inline-start: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-accent-subtle);
  color: var(--color-accent-text);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.c-plan__badge--soon {
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
}

.c-plan__price {
  margin-top: var(--space-5);
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  font-variant-numeric: tabular-nums;
}

.c-plan__period {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

.c-plan__text,
.c-plan__limits {
  margin-top: var(--space-3);
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}

.c-plan__features {
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}

/*
 * A view do kit já emite um <svg> de visto dentro de cada <li>, com
 * `aria-hidden`. Estilizar o que existe é melhor que desenhar um marcador por
 * `::before` e ter dois — foi o que aconteceu na primeira versão desta folha.
 */
.c-plan__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.c-plan__features li svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.2em;
  color: var(--color-accent);
}

/* `margin-top: auto` empurra o botão para o rodapé do cartão: com listas de
   tamanhos diferentes, os três botões ficam na mesma linha. */
.c-plan__cta { margin-top: auto; padding-top: var(--space-6); }


/* ══ 8. Provas e prosa ══════════════════════════════════════════════════════ */

.c-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
}

.c-logos__label {
  width: 100%;
  text-align: center;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Documentos legais. Medida estreita porque é texto corrido longo — 46rem é o
   limite acima do qual o olho perde a linha ao voltar. */
.c-prose {
  max-width: var(--measure-base);
  margin-inline: auto;
  color: var(--color-text-secondary);
}

.c-prose > * + * { margin-top: var(--space-5); }

.c-prose h2 {
  margin-top: var(--space-10);
  font-size: var(--font-size-2xl);
  color: var(--color-text-primary);
}

.c-prose h3 {
  margin-top: var(--space-8);
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
}

.c-prose ul,
.c-prose ol { padding-inline-start: var(--space-6); }
.c-prose li + li { margin-top: var(--space-2); }

.c-prose-header {
  max-width: var(--measure-base);
  margin-inline: auto var(--space-10);
}

.c-prose__meta {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}


/* ══ 9. Autenticação ════════════════════════════════════════════════════════
   Login, cadastro, recuperação e redefinição de senha. Um cartão centrado, na
   mesma pele do `c-card` — quem acabou de sair da landing e quem vai entrar no
   painel veem a mesma coisa no meio do caminho. */

.c-auth__form-container {
  width: 100%;
  max-width: 26rem;
  margin: var(--space-12) auto;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-md);
}

.c-auth__form-header {
  margin-bottom: var(--space-8);
  text-align: center;
}

.c-auth__form-header h1 { font-size: var(--font-size-2xl); }

.c-auth__subtitle {
  margin-top: var(--space-3);
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}


/* ══ 10. Complementos de componentes do painel ══════════════════════════════
   O `panel.css` tem `c-button` e `c-button--small`; as views públicas usam
   também `--lg` e `--block`, que só fazem sentido fora do painel. Duas regras,
   não uma folha de botão nova. */

.c-button--lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-base);
}

.c-button--block {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* Página de erro pública. O `c-empty` do painel já é o vazio padrão; aqui só
   ganha respiro de página inteira. */
.c-empty--error { padding-block: var(--space-20); }


/* ══ 11. Cookiebar ══════════════════════════════════════════════════════════
   Fixa embaixo, acima de tudo. Não é modal: bloquear a leitura para pedir
   consentimento é o padrão que faz todo mundo clicar em "aceitar" sem ler. */

.c-cookiebar {
  position: fixed;
  inset-inline: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-overlay);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-md);
}

.c-cookiebar__text {
  flex: 1 1 18rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.c-cookiebar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}


/* ══ 12. Rodapé ═════════════════════════════════════════════════════════════ */

.c-footer {
  margin-top: var(--space-20);
  padding-block: var(--space-12);
  border-top: var(--border-width) solid var(--color-border);
  background: var(--color-bg-surface);
  font-size: var(--font-size-sm);
}

.c-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  width: 100%;
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 48rem) {
  .c-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; }
}

.c-footer__col h2,
.c-footer__col h3 {
  margin-bottom: var(--space-4);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.c-footer__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.c-footer__col a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.c-footer__col a:hover { color: var(--color-accent-text); }

.c-footer__brand { color: var(--color-text-secondary); }

.c-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--measure-wide);
  margin: var(--space-10) auto 0;
  padding: var(--space-6) var(--space-4) 0;
  border-top: var(--border-width) solid var(--color-border);
  color: var(--color-text-muted);
}


/* ── Botão e eyebrow do vocabulário público (c-btn / c-eyebrow) ──────────────
   O kit usa `c-btn`; o painel usa `c-button`. As regras que davam cara de
   botão ao `c-btn` viviam SÓ no `app.css` — que era emitido pelo
   `kit::layouts/main`, layout que o `views/layouts/main.php` local substituiu
   (ver o docblock "O BUNDLE DO KIT NÃO É CARREGADO AQUI" lá). Resultado até
   2026-09-08: os CTAs de /precos ("o clique mais importante da página", pelo
   comentário da própria view), o "Voltar ao início" da página de erro e o
   botão da conta bloqueada renderizavam como link cru — sem erro em lugar
   nenhum, o padrão do §0.2 do handoff.

   As regras vêm do `app.css` (seções 5 e 6), sem o prefixo `main` — lá ele
   existia para vencer o bundle do kit por especificidade; aqui não há bundle
   para vencer. Os valores espelham o `.c-button` do panel.css: mesma marca,
   dois vocabulários. Se um dia o kit renomear tudo para `c-button`, este bloco
   inteiro morre. */
.c-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  padding: var(--space-3) var(--space-5);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-bg-surface);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
}

.c-btn:hover { border-color: var(--color-accent); color: var(--color-accent-text); }

.c-btn--primary {
  background: var(--color-accent);
  border-color: transparent;
  color: var(--color-text-on-accent);
}

.c-btn--primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-text-on-accent);
}

/* Mesmo caso do c-btn: a regra vivia só no app.css órfão. Mono, caixa alta,
   cor de acento — o mesmo eyebrow do painel. */
.c-eyebrow {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-accent-text);
}