/* Sistema visual da área do assinante — `login.html` e `assinante.html`.
   Arquivo próprio de propósito: o <style> do `index.html` vaza sobre outras views
   (AD-014), então nada de lá é importado. Os tokens abaixo são os mesmos valores da
   landing (AD-003, AD-011, AD-012), copiados — não herdados. */

/* T15b — as regras `.co-*` vêm da FONTE ÚNICA `checkout.css`, a mesma que o
   `index.html` importa. Antes desta task elas eram 195 linhas copiadas literalmente
   aqui; agora existe um arquivo só, e corrigir o checkout corrige nas duas páginas.

   SEM `layer()`, e isso é deliberado — é a mesma razão que o comentário antigo do
   bloco copiado dava. Esta folha não usa camadas: suas regras são todas SEM camada,
   e regra sem camada vence regra em camada seja qual for a especificidade. Importar
   dentro de `layer(checkout)` faria o `button, input { font: inherit }` logo abaixo
   passar por cima da tipografia de `.co-input` e `.co-btn`. Importado sem camada, o
   checkout disputa por especificidade normal — exatamente como as regras copiadas
   se comportavam. O `checkout.css` não declara camada nenhuma justamente para que
   cada consumidor decida: o `index.html` importa com `layer(checkout)`, esta folha
   importa sem.

   O @import precisa vir antes de qualquer outra regra — exigência da sintaxe. */
@import url("checkout.css");

:root {
  --paper: #160506;
  --card:  #240808;
  --gold:  #efb93f;
  --line:  #542019;
  --ink:   #fff7ea;
  --muted: #c9aa97;

  --sans:  'Montserrat', system-ui, sans-serif;
  /* AD-011 — o fallback é SERIFADO de propósito: se a Spectral não carregar, o texto
     longo cai em Georgia, nunca na sem serifa, que apagaria a hierarquia por família. */
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

body.area {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
}

button, input { font: inherit; }

/* AD-006 — alvo de toque nunca menor que 44px na menor dimensão. */
.area-voltar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  margin: 6px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}
.area-voltar:hover, .area-voltar:focus-visible { color: var(--ink); }
.area-voltar-seta { font-size: 1.1rem; line-height: 1; }

.area-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - 100px);
  padding: 24px;
}

.area-card {
  width: 100%;
  max-width: 440px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(24px, 5vw, 40px);
}

.area-selo {
  display: inline-block;
  margin: 0;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.area-titulo {
  margin: 20px 0 0;
  font-size: clamp(1.9rem, 5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* AD-011 — parágrafo longo é serifado; título e interface seguem em Montserrat. */
.area-lead {
  margin: 14px 0 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.7;
}

.area-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 30px;
}

.area-campo { display: flex; flex-direction: column; gap: 7px; }

.area-rotulo {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* AD-006 — 16px é o mínimo: abaixo disso o iOS dá zoom ao focar o campo. */
.area-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font-size: 16px;
}
.area-input::placeholder { color: #8f6a58; }
.area-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Cabeçalho fixo da área do assinante — porte de `page.tsx:416-430`. Só existe em
   `assinante.html`, então o espaçamento superior mora no contêiner do conteúdo. */
.area-cabecalho {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 10px 20px;
  background: rgba(22, 5, 6, 0.82);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.area-cabecalho-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
}

.area-saudacao {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
}

.area-cabecalho-rotulo {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
}

/* AD-006 — alvo de toque de no mínimo 44px. */
.area-sair {
  min-height: 44px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.area-sair:hover { color: var(--ink); border-color: var(--gold); }

#area-conteudo { padding-top: 78px; }

.area-principal {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 20px 56px;
}

/* AREA-02 — os três resumos da Visão geral. */
.area-resumos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.area-resumo {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
}

.area-resumo-rotulo {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
}

.area-resumo-valor {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 1.3rem;
  font-weight: 700;
}

/* AREA-03 — pendência é ESTADO, não convite a clicar: o dourado do AD-012 segue
   reservado ao CTA, e o alerta usa a mesma família de sinal que `.area-erro`. */
.area-resumo[data-pendente="true"] .area-resumo-valor {
  color: #f0b5ac;
  font-size: 1.05rem;
}

.area-resumo-alerta { font-size: 1rem; line-height: 1; }

/* AREA-05 — cartão de perfil, e a primitiva de cartão das demais seções. */
.area-cartao {
  margin-top: 18px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.area-campo-rotulo {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.area-perfil-nome {
  margin: 6px 0 0;
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.area-perfil-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.area-campo-valor {
  margin: 5px 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* AREA-08 — o cartão em modo de edição. */
.area-perfil-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.area-perfil-bloco-nome { min-width: 0; flex: 1; }

.area-perfil-bloco-nome .area-input { margin-top: 6px; }

.area-perfil-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

/* AD-012 — o dourado cheio fica no "Salvar"; o secundário é contorno, para não
   disputar a atenção com a ação principal. AD-006: 44px de alvo de toque. */
.area-botao-secundario {
  min-height: 44px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
}
.area-botao-secundario:hover:not(:disabled) { color: var(--ink); border-color: var(--gold); }

/* AD-011 — parágrafo de leitura é serifado. */
.area-perfil-apoio {
  margin: 22px 0 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 0.92rem;
  line-height: 1.65;
}

/* --- abas ---------------------------------------------------------------- */

/* A régua rola na horizontal quando não cabe, em vez de quebrar em duas linhas —
   é o que mantém a navegação legível em 360px (AD-006). */
.area-abas {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.area-abas::-webkit-scrollbar { display: none; }

.area-aba {
  flex-shrink: 0;
  min-height: 44px;
  padding: 11px 16px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}
.area-aba:hover { color: var(--ink); }
.area-aba[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }

/* --- aba Pagamentos ------------------------------------------------------- */

.area-secoes > .area-cartao:first-child { margin-top: 0; }

.area-selo-estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.area-cartao[data-pendente="false"] .area-selo-estado { color: var(--gold); }
/* Pendência é estado, não convite: mesma família de sinal que `.area-erro`. */
.area-cartao[data-pendente="true"] .area-selo-estado { color: #f0b5ac; border-color: #9a3e35; }

.area-status-rotulo { margin: 18px 0 0; color: var(--muted); font-size: 0.8rem; }
.area-status-valor { margin: 4px 0 0; font-size: clamp(1.9rem, 5vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; }
.area-status-detalhe { margin: 6px 0 0; color: var(--muted); font-size: 0.9rem; }
.area-status-titulo { margin: 16px 0 0; font-size: 1.3rem; font-weight: 800; }
.area-status-convite {
  margin: 8px 0 0;
  max-width: 46ch;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.65;
}

.area-planos-bloco { margin-top: 30px; }
.area-secao-titulo { margin: 0; font-size: 1.15rem; font-weight: 750; }
.area-secao-apoio { margin: 4px 0 0; color: var(--muted); font-size: 0.88rem; }

/* A grade era de duas colunas, uma por plano. Com o mensal fora do produto
   (2026-08-26) sobrou um card, e herdar a trilha de dois o deixaria ocupando metade
   do cartão com um vão à direita. A trilha tem teto para o card não esticar até a
   largura toda da área quando a tela é grande. */
.area-planos {
  display: grid;
  grid-template-columns: minmax(0, 420px);
  gap: 14px;
  margin-top: 16px;
}

.area-plano {
  display: flex;
  flex-direction: column;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.area-plano[data-atual="true"] { border-color: var(--gold); }

.area-plano-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.area-plano-selo {
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.area-plano-atual { color: var(--muted); font-size: 0.7rem; font-weight: 700; }

.area-plano-nome { margin: 12px 0 0; font-size: 1.05rem; font-weight: 750; }
.area-plano-preco { margin: 6px 0 0; font-size: 1.75rem; font-weight: 900; letter-spacing: -0.04em; }
.area-plano-preco small { font-size: 0.8rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.area-plano-nota { margin: 6px 0 18px; color: var(--muted); font-size: 0.84rem; }
.area-plano [data-plano-acao] { margin-top: auto; width: 100%; }

/* AREA-15 — cobranças anteriores. */
.area-cobrancas { list-style: none; margin: 14px 0 0; padding: 0; }

.area-cobranca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.area-cobranca:first-child { border-top: 0; }

.area-cobranca-valor { margin: 0; font-size: 1rem; font-weight: 750; }
.area-cobranca-detalhe { margin: 3px 0 0; color: var(--muted); font-size: 0.8rem; }

.area-cobranca-situacao {
  flex-shrink: 0;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

/* Mensagem de lista vazia — vale para as cobranças e para os devocionais. */
.area-vazio {
  margin: 14px 0 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 0.95rem;
}

/* Mensagem de erro do login. Vermelho é sinal de estado, não cor de ação — o AD-012
   trata de CTA, e o dourado segue sendo o único convite a clicar na página. */
.area-erro {
  margin: 0;
  padding: 11px 14px;
  background: rgba(154, 62, 53, 0.18);
  border: 1px solid #9a3e35;
  border-radius: 10px;
  color: #f0b5ac;
  font-size: 0.9rem;
}
.area-erro[hidden] { display: none; }

/* AD-012 — dourado é a única cor de ação. */
.area-botao {
  min-height: 48px;
  padding: 13px 20px;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 12px;
  color: #2b0904;
  font-size: 1rem;
  font-weight: 750;
  cursor: pointer;
}
.area-botao:hover:not(:disabled) { filter: brightness(1.07); }
.area-botao:disabled { cursor: default; opacity: 0.65; }

/* CKPG-52 — o CTA de assinar/renovar virou `<a href>`. Caixa inline ignora
   `min-height` e não cresce com o padding vertical: sem isto o link viraria uma
   pastilha achatada e furaria o piso de 44px de alvo de toque do AD-006. Mesma
   correção já escrita em `.area-guia-botao`, pelo mesmo motivo. */
a.area-botao,
a.area-botao-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* --- áudio do dia e mensagem do dia --------------------------------------- */

/* AREA-18, AREA-19 — o áudio ocupa a frente e a mensagem fica na lateral, como em
   `page.tsx:546`. Em tela estreita a T20 colapsa isto em coluna única. */
.area-faixa-do-dia {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 18px;
}

/* BLOQ-09 — o aviso de assinatura encerrada.
   Ele é um CARTÃO da área, e não um erro: quem parou de pagar não errou nada, e a tela
   que o convida a voltar não pode recebê-lo em vermelho. Por isso ele herda
   `.area-cartao` inteiro e só acrescenta o respiro do botão — o dourado do `.area-botao`
   já é o único convite a clicar da página (AD-012), e não precisa de ajuda. */
.area-bloqueio [data-campo="renovar"] { margin-top: 16px; }

/* Bloqueada, a faixa do dia tem UM filho só: sem isto ele ficaria preso à primeira
   coluna de `1fr 320px`, com um vão de 320px de nada ao lado. */
.area-faixa-do-dia:has(.area-bloqueio) { grid-template-columns: 1fr; }

.area-audio-do-dia-caixa { margin-top: 12px; }
[data-bloco="audio-do-dia"] [data-campo="data"] { margin: 14px 0 0; color: var(--muted); font-size: 0.85rem; }

.area-mensagem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-color: var(--gold);
}

.area-mensagem-rotulo {
  margin: 0;
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.area-mensagem-texto {
  margin: 12px 0 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* --- aba Últimos devocionais ---------------------------------------------- */

/* AREA-16 — data à esquerda, player à direita, como em `page.tsx:925-960`. */
.area-devocionais { list-style: none; margin: 14px 0 0; padding: 0; }

.area-devocional {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.area-devocional:first-child { border-top: 0; }

.area-devocional-data { margin: 0; font-size: 0.95rem; font-weight: 650; }

/* A coluna do áudio tem largura fixa para as cápsulas ficarem alinhadas entre linhas. */
.area-devocional-audio { flex-shrink: 0; width: 320px; }

.area-devocional-indisponivel {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

/* Régua de paginação do histórico. Fica separada da lista por uma linha, e não por
   espaço em branco: o mesmo separador que divide as entregas entre si fecha a lista. */
.area-paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* AD-006 — 44px de alvo de toque, o mesmo piso do resto da área. */
.area-pagina-botao {
  min-height: 44px;
  padding: 10px 18px;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
  background: rgba(255, 247, 234, 0.05);
  border: 1px solid rgba(239, 185, 63, 0.18);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.area-pagina-botao:hover:not([disabled]) {
  background: rgba(255, 247, 234, 0.1);
  border-color: var(--gold);
}
/* Apagado e inerte nos extremos — o botão continua ocupando o lugar dele para a
   régua não mudar de largura ao trocar de página. */
.area-pagina-botao[disabled] {
  opacity: 0.4;
  cursor: default;
}

.area-pagina-contador {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

/* --- aba Aulas bônus ------------------------------------------------------ */

/* AULA-A6 — a lista tem o mesmo esqueleto da de devocionais (linha com identidade à
   esquerda e ação à direita, separadas por uma régua), mas a peça aberta é um vídeo, e
   não uma cápsula de áudio: por isso o player desce para uma linha própria em vez de
   dividir a largura com o título. */
.area-aulas-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.area-aulas { list-style: none; margin: 16px 0 0; padding: 0; }

.area-aula { padding: 14px 0; border-top: 1px solid var(--line); }
.area-aula:first-child { border-top: 0; padding-top: 4px; }

.area-aula-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.area-aula-identidade { min-width: 0; }

.area-aula-titulo {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.area-aula-meta {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

/* A aula aberta acende o dourado no próprio botão, como o player de áudio faz com a
   cápsula: numa lista de doze, é o que diz qual está no ar sem procurar. */
.area-aula[data-aberta="true"] [data-campo="assistir"] {
  color: var(--ink);
  border-color: var(--gold);
}

.area-aula-player { margin-top: 14px; }
.area-aula-player[hidden] { display: none; }

/* A moldura é a proporção, e o player preenche — 16:9 vale para o Drive, para o
   YouTube e para o arquivo direto, e é o que impede o quadro de nascer com a altura
   padrão de 150px que o navegador dá a um `<iframe>` sem altura. */
/* O teto não é estético — sem ele, num monitor largo o quadro passa de 600px de altura e
   empurra o resto da lista para fora da tela. 880px já é mais que 720p; o que sobra de
   tela não acrescenta nitidez nenhuma. E CENTRALIZADO: encostado à esquerda, o vazio
   ficava todo de um lado só e o quadro parecia ter escorregado para fora do lugar. */
.area-aula-moldura {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  /* O fio de contorno é `inset` e não `border` de propósito: `border` fica FORA da caixa
     de conteúdo, então o 16:9 valeria para a moldura e o player receberia 2px a menos de
     largura — uma caixa 1,787:1 em vez de 1,778:1. Some com a diferença. */
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 14px;
}

.area-aula-moldura > iframe,
.area-aula-moldura > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* AULA-A8 — o quadro do Drive é renderizado GRANDE e reduzido por `scale()`, para a
   página de dentro enxergar um viewport de desktop (ver `escalarComoDesktop`). A largura
   e o `scale` vêm de lá, calculados; aqui fica só o que é fixo.
   `inset: 0` sairia: com `left` e `right` zerados MAIS uma largura explícita, a caixa
   fica superrestrita e o navegador descarta um dos três — melhor ancorar só no canto,
   que é também a origem da transformação. */
.area-aula-moldura[data-escalado="true"] > iframe {
  inset: 0 auto auto 0;
  transform-origin: 0 0;
}

/* `contain` e não `cover`: uma live gravada em outra proporção aparece inteira, com
   tarja, em vez de ter as bordas cortadas.
   Só no `<video>`: `object-fit` não vale para `<iframe>` — o Chrome a ignora ali, e um
   navegador que a honrasse encolheria a PÁGINA de dentro, que é outra coisa. Declará-la
   para os dois só servia para sugerir que o corte do player do Drive era nosso. */
.area-aula-moldura > video { object-fit: contain; }

/* --- aba Presenteados ----------------------------------------------------- */

.area-presentes-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.area-presentes-contador {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.area-presentes { list-style: none; margin: 14px 0 0; padding: 0; }

/* Mesma divisão por linha da lista de devocionais: o separador é o que agrupa, sem
   precisar de moldura por item. */
.area-presente {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.area-presente:first-child { border-top: 0; }

.area-presente-identidade { min-width: 0; flex: 1; }

.area-presente-nome {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.area-presente-telefone {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Situação é ESTADO, não ação: fica em texto secundário, sem o dourado que o AD-012
   reserva ao que se clica. */
.area-presente-situacao {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.area-presente-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Em edição, os dois campos ocupam a linha inteira — lado a lado com as ações não
   sobra largura para digitar. */
.area-presente[data-editando="true"] { align-items: stretch; }
.area-presente[data-editando="true"] .area-presente-identidade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  flex-basis: 100%;
}

.area-presentes-apoio {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

/* GIFT-10 — o botão desabilitado precisa PARECER desabilitado, senão vira promessa
   quebrada: quem clica não entende por que nada acontece. */
.area-botao[disabled],
.area-botao-secundario[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.area-presentes [data-campo="adicionar"],
.area-cartao > [data-campo="adicionar"] { margin-top: 18px; }

.area-presentes-aviso {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

/* --- player de áudio ------------------------------------------------------ */

/* AREA-17 — porte do `audio-player.tsx`. Cápsula com botão, barra e tempo. */
/* A cápsula tem profundidade em vez de um cinza chapado: o gradiente sutil dá a
   curvatura, a linha clara no topo (inset) simula a luz batendo na borda superior e a
   sombra externa a descola do cartão. É o que separa "controle nativo do navegador" de
   peça desenhada. */
.area-player {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 18px 7px 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(239, 185, 63, 0.16);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 10px rgba(0, 0, 0, 0.22);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
/* O player inteiro reage quando o áudio está tocando: a borda dourada acende de leve.
   Com vários na lista, é o que diz qual está no ar sem precisar procurar o ícone. */
.area-player:has(.area-player-botao[data-tocando="true"]) {
  border-color: rgba(239, 185, 63, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 2px 14px rgba(239, 185, 63, 0.09);
}

.area-player-botao {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  /* AD-006 — alvo de toque de 44px, e não os 32px da origem. O disco desenhado é menor
     (38px) e fica centrado nele: o alvo continua íntegro para o dedo, e o peso visual
     cai — o botão de 44px cheios dominava a cápsula. */
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  transition: transform 140ms ease;
}
/* O disco: gradiente do dourado claro para o quente, com aro interno de luz. */
.area-player-botao::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: linear-gradient(155deg, #f7cc63, var(--gold) 52%, #d99b28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.3);
  transition: box-shadow 160ms ease;
}
.area-player-botao:hover { transform: scale(1.045); }
.area-player-botao:active { transform: scale(0.97); }
.area-player-botao[data-tocando="true"]::after {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 0 4px rgba(239, 185, 63, 0.14);
}
.area-player-botao:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* O ícone é desenhado em CSS: um triângulo para tocar, duas barras para pausar. Assim
   o player não depende de biblioteca de ícones nem de mais uma requisição. */
.area-player-botao::before {
  content: "";
  display: block;
  /* Acima do disco (`::after`), que é irmão e vem depois na ordem de pintura. */
  position: relative;
  z-index: 1;
  /* Deslocamento PROPOSITAL, ao contrário do que o pause tinha: o centro de massa de um
     triângulo fica a 1/3 da base, então centrá-lo geometricamente o faz parecer torto
     para a esquerda. É a correção ótica padrão de botão de play. */
  margin-left: 3px;
  border-style: solid;
  /* Um pouco menor que os 7/12 originais: o triângulo cheio brigava com o disco. */
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #2b0904;
}
/* As duas barras do pause vêm de um gradiente sobre uma caixa de largura REAL, e não
   de `box-shadow`: sombra não entra na caixa do elemento, então o grid centrava só a
   barra de verdade e o ícone inteiro escorregava para a direita. Com a caixa medindo
   os 10px que se veem, o `place-items: center` do botão acerta sozinho — sem margem
   de compensação para recalcular a cada ajuste de tamanho. */
.area-player-botao[data-tocando="true"]::before {
  margin-left: 0;
  width: 10px;
  height: 13px;
  border: 0;
  background: linear-gradient(
    to right,
    #2b0904 0 3.5px,
    transparent 3.5px 6.5px,
    #2b0904 6.5px 10px
  );
}

/* AD-006 — a barra é FINA de ver e GRANDE de tocar, e as duas coisas são separadas:
   a altura de 44px é o alvo, e o trilho de 4px é desenhado no fundo, centralizado.
   Dar 44px de altura ao próprio trilho engordaria a linha; deixá-lo em 4px deixaria
   um alvo de toque de 4px, impossível de arrastar com o dedo. */
.area-player-barra {
  flex: 1;
  min-width: 0;
  height: 44px;
  appearance: none;
  -webkit-appearance: none;
  /* Trilho de 5px (era 4): o percorrido dourado ganha corpo suficiente para ser lido
     como progresso. O não-percorrido escurece — o cinza claro anterior competia em
     brilho com o dourado e achatava os dois. */
  background-image: linear-gradient(
    to right,
    #f7cc63 0%,
    var(--gold) var(--percorrido, 0%),
    rgba(0, 0, 0, 0.34) var(--percorrido, 0%)
  );
  background-size: 100% 5px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

/* O thumb é dourado, não branco: a bolinha branca era o elemento de maior contraste da
   peça inteira e puxava o olho para o lugar errado. Some quando parado e aparece no
   hover/foco/arraste — em repouso o que importa é a linha de progresso. */
.area-player-barra::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  background: #f7cc63;
  border-radius: 999px;
  box-shadow:
    0 0 0 3px rgba(43, 9, 4, 0.85),
    0 1px 4px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 150ms ease, transform 150ms ease;
}
.area-player-barra::-moz-range-thumb {
  width: 13px;
  height: 13px;
  background: #f7cc63;
  border: 0;
  border-radius: 999px;
  box-shadow:
    0 0 0 3px rgba(43, 9, 4, 0.85),
    0 1px 4px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 150ms ease, transform 150ms ease;
}
.area-player:hover .area-player-barra::-webkit-slider-thumb,
.area-player-barra:focus-visible::-webkit-slider-thumb,
.area-player-barra:active::-webkit-slider-thumb { opacity: 1; }
.area-player:hover .area-player-barra::-moz-range-thumb,
.area-player-barra:focus-visible::-moz-range-thumb,
.area-player-barra:active::-moz-range-thumb { opacity: 1; }
.area-player-barra:active::-webkit-slider-thumb { transform: scale(1.15); }
.area-player-barra:active::-moz-range-thumb { transform: scale(1.15); }

/* Tocando, o thumb fica visível mesmo sem o mouse em cima: é a cabeça de leitura. */
.area-player:has(.area-player-botao[data-tocando="true"]) .area-player-barra::-webkit-slider-thumb { opacity: 1; }
.area-player:has(.area-player-botao[data-tocando="true"]) .area-player-barra::-moz-range-thumb { opacity: 1; }

.area-player-barra:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* O decorrido é o dado vivo e o total é referência: dois pesos em vez do bloco cinza
   uniforme. `tabular-nums` mantém a largura fixa — sem ele o texto pulsa a cada
   segundo, porque os dígitos têm larguras diferentes. */
.area-player-tempo {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.area-player-tempo b {
  font-weight: 600;
  color: var(--ink);
}
/* Os espaços já vêm no conteúdo (audio-player.js); aqui só o peso visual. */
.area-player-tempo i {
  font-style: normal;
  opacity: 0.45;
}
/* Erro ocupa o lugar do tempo; vermelho é sinal de estado, como no `.area-erro`. */
.area-player-tempo[data-erro="true"] { color: #f0b5ac; }

/* --- checkout ------------------------------------------------------------- */

/* T15b — o que sobrou aqui do checkout são as DUAS peças que a partial NÃO traz,
   porque no `index.html` elas moram fora do bloco do checkout. Sem elas a partial
   sozinha não renderiza igual nas duas páginas.

   As 195 linhas de regras `.co-*` que ficavam abaixo saíram para `checkout.css` e
   são importadas no topo desta folha. */

/* O modal conta com este zeramento — em `index.html` ele mora na camada `vendas`.

   O `padding: 0` do reset original NÃO pode vir junto aqui. No `index.html` este
   reset está na camada `vendas`, ABAIXO da camada `checkout`, então `.co-input
   { padding: 13px 14px }` vence e o formulário mantém a altura desenhada. Nesta
   folha não há camada nenhuma: `.co-overlay *` e `.co-input` têm a MESMA
   especificidade (0,1,0), e o desempate é a ordem — este bloco está centenas de
   linhas depois do `@import` do topo, então o reset ganhava e zerava o padding de
   TODO o modal (campos, botões, cabeçalho, rodapé, cartões de plano). Era esse o
   achatamento visual que separava o modal da área do modal da página de vendas.

   `margin: 0` tinha o MESMO defeito do padding, e pela mesma razão de ordem: ele
   apagava o `margin-bottom` que separa um campo do outro (`.co-field`), o respiro
   abaixo dos planos (`.co-plans`) e o da barra de progresso (`.co-progress`), que
   é o que deixava o formulário com os campos colados e o rodapé encostado no CPF.
   Só `box-sizing` sobra no seletor universal — esse nenhuma regra `.co-*` declara. */
.co-overlay *, .co-overlay *::before, .co-overlay *::after { box-sizing: border-box; }

/* O que o reset de fato existia para zerar: a margem e o recuo que o navegador dá a
   `p`, `ul` e `h2` soltos dentro do modal. Alvo nomeado, em vez do `*` que atropelava
   as peças estilizadas acima. As classes `.co-*` que precisam de margem própria são
   mais específicas que estes seletores de elemento, então continuam valendo. */
.co-overlay p, .co-overlay ul, .co-overlay ol, .co-overlay h2, .co-overlay h3 {
  margin: 0;
  padding: 0;
}

/* Único token que o checkout usa e a área ainda não tinha (`index.html:109`). */
:root { --hot: #e7ad37; }

/* --- responsividade (AREA-20, AD-006) ------------------------------------- */

/* Até 760px a área vira uma coluna só. O breakpoint é o ponto em que a faixa do
   áudio do dia (1fr + 320px) e os dois planos lado a lado deixam de caber com
   folga — e não uma largura de aparelho específico. */
/* --- bloco do Guia dos 7 Primeiros Dias --- */

/* A capa ao lado do texto no desktop; embaixo dele no celular (ver a media query).
   `align-items: center` porque o cartão tem duas peças de altura muito diferente — a
   capa é uma faixa larga e baixa, o texto tem três linhas. */
.area-guia {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* A arte é a mesma da LP: 1200x500, uma faixa de 2,4:1. `object-fit: cover` num quadro
   mais estreito preserva o miolo, que é onde o título da capa está. */
.area-guia-capa {
  flex-shrink: 0;
  width: 200px;
  height: 96px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
}

.area-guia-corpo { min-width: 0; }

.area-guia-apoio {
  margin: 6px 0 0;
  max-width: 46ch;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* AD-006 — 44px de alvo de toque, o mesmo piso do resto da área. `inline-flex` para o
   link não virar uma barra de ponta a ponta: abrir o guia é ação secundária, e o CTA
   dourado cheio desta área é a assinatura. */
.area-guia-botao {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 14px;
  padding: 10px 18px;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  background: rgba(255, 247, 234, 0.05);
  border: 1px solid rgba(239, 185, 63, 0.18);
  border-radius: 10px;
  transition: background 0.15s, border-color 0.15s;
}
.area-guia-botao:hover {
  background: rgba(255, 247, 234, 0.09);
  border-color: rgba(239, 185, 63, 0.4);
}

@media (max-width: 760px) {
  .area-principal { padding: 20px 14px 44px; }

  .area-resumos,
  .area-planos,
  .area-faixa-do-dia { grid-template-columns: 1fr; }

  /* A coluna do áudio era fixa em 320px: em 360px ela transborda sozinha, somada ao
     padding do cartão. Solta, a cápsula do player ocupa o que sobrar. */
  .area-devocional-audio { width: 100%; }

  /* Data em cima, player embaixo — lado a lado não sobra largura para nenhum dos dois. */
  .area-devocional {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  /* A linha da aula NÃO vira coluna, ao contrário da do devocional: ali o que desce é
     uma cápsula de player de 320px, aqui é um botão de ~90px que cabe ao lado do título.
     Empilhado, ele virava uma barra dourada de ponta a ponta — peso de CTA para uma ação
     secundária. O que o título faz é quebrar em mais linhas, que é o que título faz. */
  .area-aula-linha { gap: 12px; }
  .area-aula-linha > [data-campo="assistir"] { flex-shrink: 0; }

  /* GIFT-12 — a linha do presenteado vira coluna: nome/telefone, situação e as ações
     empilhados. Lado a lado em 360px, os botões espremem o nome até quebrar letra a
     letra. Em edição, os dois campos também deixam de dividir a linha. */
  .area-presente {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .area-presente[data-editando="true"] .area-presente-identidade { grid-template-columns: 1fr; }
  .area-presente-acoes > * { flex: 1; }
  .area-presente-situacao { white-space: normal; }

  /* A régua de paginação em 360px: os dois botões dividem a linha e o contador desce
     para o meio, embaixo. Lado a lado, os três espremeriam os rótulos das setas. */
  .area-paginacao {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
  }
  .area-pagina-botao { flex: 1; }
  .area-pagina-contador { order: 1; width: 100%; text-align: center; }

  /* A situação da cobrança volta para baixo do valor pelo mesmo motivo. */
  .area-cobranca {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* O guia empilha: 200px de capa ao lado do texto deixariam ~110px para três linhas
     de conteúdo numa tela de 360px. Empilhada, a capa vira a faixa larga que ela é. */
  .area-guia { flex-direction: column; align-items: stretch; gap: 14px; }
  .area-guia-capa { width: 100%; height: 120px; }

  /* O cabeçalho do perfil: o botão "Editar" desce em vez de espremer o nome. */
  .area-perfil-topo {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .area-perfil-acoes > * { flex: 1; }
}