/* ==========================================================================
   Cordeirinho TV — Área de Membros · Design System
   Herda os tokens da marca (Briefing 2026 + ID VISUAL). Mesma família do site
   público, mas com escala e densidade de PRODUTO, não de página de venda.
   ========================================================================== */

:root {
  /* --- Paleta da marca (idêntica ao site) --- */
  --dourado: #F4D58D;
  --ambar: #D88A3F;
  --ambar-botao: #9C5A1E;
  --ambar-botao-hover: #834A14;
  --marrom: #5C3E20;
  --creme: #FBF6EC;
  --bege: #F5E6D3;
  --azul: #A8D8E8;
  --oliva: #C8D9A8;
  --texto: #3D2817;
  --texto-medio: #6B5340;
  --texto-suave: #7A6047;
  --texto-claro: #FBF6EC;
  --creme-quente: #FDFAF4;
  --bege-borda: #EBD9C0;
  --marrom-noite: #1A1008;

  /* --- Superfícies da plataforma ---
     A área de membros vive mais tempo na tela que a landing: o fundo é um
     grau mais quente e as superfícies têm contraste suficiente para o olho
     descansar em sessões longas. */
  --fundo: #FAF4E8;
  --superficie: #FFFFFF;
  --superficie-2: #FDF8EF;
  --borda: #EFE2CC;

  /* A cor de "deu errado". Nasceu em 13/08/2026 do achado 🟢12 da Rute: a
     plataforma não tinha nenhuma — o recado de erro saía com a mesma cor do
     texto de apoio, e nada distinguia informação de problema. É um terracota
     queimado, da mesma família quente da marca, e não um vermelho de alerta
     de sistema. Contraste 6,84:1 sobre o branco: passa AA com folga, e o
     branco por cima dele também. */
  --erro: #A3341F;

  /* --- Tipografia (só Fraunces + Nunito, regra do Briefing) --- */
  --fonte-display: 'Fraunces', ui-serif, Georgia, serif;
  --fonte-texto: 'Nunito', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --t-titulo: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
  --t-secao: clamp(1.05rem, .95rem + .5vw, 1.35rem);
  --t-base: 1rem;
  --t-sm: .875rem;
  --t-xs: .75rem;

  /* --- Espaçamento --- */
  --e-1: .25rem; --e-2: .5rem;  --e-3: .75rem; --e-4: 1rem;
  --e-5: 1.5rem; --e-6: 2rem;   --e-7: 3rem;   --e-8: 4rem;
  --gutter: clamp(1rem, .5rem + 2vw, 2.5rem);
  --largura: 1320px;

  /* --- Raios --- */
  --r-sm: .5rem; --r-md: .875rem; --r-lg: 1.25rem; --r-xl: 1.75rem; --r-pill: 999px;

  /* --- Sombras (duas camadas, quentes) --- */
  --s-sm: 0 1px 2px rgba(92,62,32,.05), 0 3px 8px rgba(92,62,32,.05);
  --s-md: 0 1px 3px rgba(92,62,32,.06), 0 8px 20px rgba(92,62,32,.08);
  --s-lg: 0 2px 5px rgba(92,62,32,.07), 0 16px 36px rgba(92,62,32,.11);

  /* --- Movimento --- */
  --mola: cubic-bezier(.34,1.4,.64,1);
  --suave: cubic-bezier(.4,0,.2,1);
  --t-rapido: .16s; --t-medio: .28s;

  /* --- Cromo da navegação --- */
  --topo-h: 64px;
  --fundo-nav-h: 68px;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--fonte-texto);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* respiro para a navegação inferior no celular */
  padding-bottom: env(safe-area-inset-bottom);
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--fonte-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--marrom);
  text-wrap: balance;
}

:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--dourado); color: var(--marrom); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); }

/* ==========================================================================
   Botões
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  font-weight: 800; font-size: var(--t-sm); line-height: 1;
  padding: .8rem 1.4rem; border-radius: var(--r-pill);
  border: 2px solid transparent;
  min-height: 44px;                       /* alvo de toque */
  transition: transform var(--t-medio) var(--mola), background-color var(--t-rapido) var(--suave);
}
.btn svg { width: 18px; height: 18px; }
.btn--principal { background: var(--ambar-botao); color: #fff; }
.btn--principal:hover { background: var(--ambar-botao-hover); transform: translateY(-1px); }
.btn--secundario { background: var(--superficie); color: var(--marrom); border-color: var(--borda); }
.btn--secundario:hover { border-color: var(--dourado); }
.btn--fantasma { background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(6px); }
.btn--bloco { width: 100%; }
.btn--grande { padding: 1rem 1.75rem; font-size: var(--t-base); min-height: 52px; }

/* ==========================================================================
   Cromo — topo e navegação
   ========================================================================== */

.topo {
  position: sticky; top: 0; z-index: 60;
  height: var(--topo-h);
  display: flex; align-items: center;
  background: rgba(250,244,232,.9);
  backdrop-filter: saturate(1.3) blur(12px);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid var(--borda);
}
.topo .container { display: flex; align-items: center; gap: var(--e-5); }
.topo-marca img { height: 34px; width: auto; }

.nav-desktop { display: flex; align-items: center; gap: var(--e-1); margin-inline-start: var(--e-4); }
.nav-desktop a {
  font-size: var(--t-sm); font-weight: 700; color: var(--texto-medio);
  padding: .5rem .8rem; border-radius: var(--r-pill);
  transition: background-color var(--t-rapido) var(--suave), color var(--t-rapido) var(--suave);
  white-space: nowrap;
}
.nav-desktop a:hover { background: var(--bege); color: var(--marrom); }
.nav-desktop a[aria-current="page"] { background: var(--marrom); color: var(--texto-claro); }

.topo-acoes { display: flex; align-items: center; gap: var(--e-3); margin-inline-start: auto; }

.busca-topo {
  display: flex; align-items: center; gap: var(--e-2);
  background: var(--superficie); border: 1.5px solid var(--borda);
  border-radius: var(--r-pill); padding: .45rem .9rem;
  min-width: 220px;
  transition: border-color var(--t-rapido) var(--suave);
}
.busca-topo:focus-within { border-color: var(--dourado); }
.busca-topo svg { width: 17px; height: 17px; color: var(--texto-suave); flex-shrink: 0; }
/* 16px e não `--t-sm` (14px): achado 🟢15 da Rute. Abaixo de 16 o iOS dá
   zoom sozinho ao focar o campo, e a pessoa perde a página de vista sem
   ter pedido nada. É a única razão do número solto aqui. */
.busca-topo input { border: 0; outline: 0; background: none; width: 100%; font-size: 16px; }

.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--dourado); color: var(--marrom);
  display: grid; place-items: center;
  font-family: var(--fonte-display); font-size: 1rem;
  border: 2px solid var(--superficie); box-shadow: var(--s-sm);
  flex-shrink: 0;
}
/* O desenho do perfil ativo preenche o círculo do topo.

   O recorte mora AQUI, não no `.avatar`. Até 13/08/2026 o pai tinha
   `overflow: hidden` — e ele recortava junto o `::after` de 44px que dá
   área de toque ao círculo de 38px. A Rute mediu: o alvo atendia 1 de 9
   pontos, e voltou a 9 de 9 assim que o `overflow` saiu.

   A regra que fica: `overflow: hidden` no pai apaga qualquer área de toque
   feita por pseudo-elemento. Quem precisa recortar, recorta o filho. */
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

/* Navegação inferior — 5 destinos, só no celular */
.nav-inferior {
  position: fixed; inset: auto 0 0 0; z-index: 70;
  display: none;
  background: rgba(253,248,239,.96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--borda);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-inferior ul { display: flex; }
.nav-inferior li { flex: 1; }
.nav-inferior a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: var(--fundo-nav-h);
  font-size: .625rem; font-weight: 700; letter-spacing: .01em;
  color: var(--texto-suave);
  transition: color var(--t-rapido) var(--suave);
}
.nav-inferior a svg { width: 22px; height: 22px; }
.nav-inferior a[aria-current="page"] { color: var(--ambar-botao); }
.nav-inferior a[aria-current="page"] svg { transform: translateY(-1px); }

/* ==========================================================================
   Página
   ========================================================================== */

.pagina { padding-block: var(--e-6) var(--e-8); min-height: 60vh; }
.pagina-topo { margin-bottom: var(--e-6); }
.pagina-topo h1 { font-size: var(--t-titulo); margin-bottom: var(--e-2); }
.pagina-topo p { color: var(--texto-medio); font-size: var(--t-sm); max-width: 46rem; }

.migalhas { font-size: var(--t-xs); font-weight: 600; color: var(--texto-suave); margin-bottom: var(--e-3); }
.migalhas a { color: var(--ambar-botao); }
.migalhas a:hover { text-decoration: underline; }
.migalhas span { margin-inline: .3rem; }

/* Página estreita: formulários (criar senha) não precisam da largura toda. */
.pagina--estreita { max-width: 30rem; }

/* --- Perfis: "quem está assistindo?" ------------------------------------ */
.perfis {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  margin-bottom: var(--e-6);
}
.perfil-cartao {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-2);
  background: var(--superficie); border: 2px solid var(--borda);
  border-radius: var(--r-lg); padding: var(--e-4) var(--e-2);
  cursor: pointer; font: inherit; color: var(--texto);
  transition: border-color .15s, transform .15s;
}
.perfil-cartao:hover { border-color: var(--dourado); transform: translateY(-2px); }
.perfil-cartao--ativo { border-color: var(--ambar-botao); }

/* O fantasma da grade de perfis — 14/08/2026, achado 🔴1 da Ruth.
   Ocupa exatamente o lugar de um cartão enquanto a lista não chega, para a
   caixa da acolhida não pular de tamanho quando ela chegar. Não é clicável e
   não é lido: quem usa leitor de tela ouve o `aria-busy` da grade. */
.perfil-cartao--fantasma {
  min-height: 138px; cursor: default; pointer-events: none;
  border-style: dashed; border-color: var(--borda);
  background: var(--superficie-2, var(--superficie)); opacity: .55;
}
.perfil-cartao--novo { border-style: dashed; color: var(--texto-suave); }
.perfil-rosto {
  display: grid; place-items: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--bege); font-size: 2.1rem; line-height: 1;
  object-fit: cover;
}
.perfil-rosto--mais { color: var(--texto-suave); }
.perfil-nome { font-weight: 700; font-size: var(--t-sm); text-align: center; word-break: break-word; }

/* "O que você quer ver hoje?" — azulejos grandes, dedo de criança acerta. */
.intencoes {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin-bottom: var(--e-5);
}
.intencao {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--e-3); min-height: 130px; padding: var(--e-5) var(--e-3);
  background: var(--superficie); border: 2px solid var(--borda);
  border-radius: var(--r-lg); cursor: pointer; font: inherit; color: var(--texto);
  transition: border-color .15s, transform .15s;
}
.intencao:hover { border-color: var(--cat-cor, var(--dourado)); transform: translateY(-2px); }
.intencao-icone { font-size: 2rem; line-height: 1; }
.intencao-nome { font-weight: 800; font-size: var(--t-sm); text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .intencao { transition: none; }
  .intencao:hover { transform: none; }
}

.avatares {
  display: flex; flex-wrap: wrap; gap: var(--e-2);
  border: 0; padding: 0; margin: 0 0 var(--e-4);
}
.avatares legend {
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texto-suave); margin-bottom: var(--e-2);
}
.avatar-opcao { cursor: pointer; }
.avatar-opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.avatar-desenho {
  display: block; width: 54px; height: 54px;
  border-radius: 50%; background: var(--bege);
  border: 2px solid transparent; object-fit: cover;
}
.avatar-opcao input:checked + .avatar-desenho { border-color: var(--ambar-botao); }
.avatar-opcao input:focus-visible + .avatar-desenho { outline: 3px solid var(--dourado); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .perfil-cartao { transition: none; }
  .perfil-cartao:hover { transform: none; }
}

/* Banner da Loja v2 — aprovado pelo Ícaro em 06/08/2026: faixa horizontal
   de largura TOTAL (vive fora do .container), mais baixa, com Jesus e as
   fotos reais dos produtos. O teste 15 dos favoritos vigia o que esta faixa
   não pode fazer: estourar a página na horizontal. */
.loja-faixa {
  background: linear-gradient(105deg, #F4D58D 0%, #E9BE6B 60%, #DFAE52 100%);
  margin-top: var(--e-7);
  overflow: hidden;
}
.loja-faixa-conteudo {
  max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: var(--e-5);
  min-height: 132px;
}
.loja-faixa-jesus { width: 150px; align-self: flex-end; margin-bottom: -5px; flex-shrink: 0; }
.loja-faixa-texto { flex: 1; min-width: 200px; padding-block: var(--e-4); }
.loja-faixa-texto h2 { color: var(--marrom); font-size: clamp(1.1rem, 1rem + .8vw, 1.4rem); margin: .15rem 0 .25rem; }
.loja-faixa-texto p { font-size: var(--t-sm); color: var(--texto-medio); max-width: 30rem; margin: 0; }
.banner-loja-olho {
  display: block; font-size: var(--t-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: #7A5A1E; margin-bottom: var(--e-1);
}
.loja-faixa-produtos { display: flex; gap: var(--e-3); flex-shrink: 0; }
.loja-faixa-produtos img {
  width: 86px; height: 86px; object-fit: cover; border-radius: 12px;
  border: 3px solid #FFF8E8; box-shadow: 0 4px 14px rgba(58, 42, 18, .25);
}
.loja-faixa-produtos img:nth-child(2) { transform: translateY(-6px) rotate(2deg); }
.loja-faixa-produtos img:nth-child(3) { transform: rotate(-2deg); }
.loja-faixa-cta { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 900px) {
  .loja-faixa-jesus { display: none; }
}
@media (max-width: 720px) {
  .loja-faixa-conteudo { flex-wrap: wrap; padding-block: var(--e-5); gap: var(--e-3); }
  .loja-faixa-produtos img { width: 72px; height: 72px; }
  .loja-faixa-cta { flex-basis: 100%; text-align: center; }
  /* No celular, a soma invisível de três margens (última trilha 3rem +
     padding da página 4rem + topo da faixa 3rem) virava meia tela de creme
     vazio antes da Loja — achado do Ícaro em 08/08. O :has escopa a
     redução SÓ à home (a única página seguida pela faixa); sem suporte a
     :has nada quebra, o vão apenas não encolhe. */
  .loja-faixa { margin-top: var(--e-4); }
  .pagina:has(+ .loja-faixa) { padding-bottom: var(--e-3); }
  .pagina:has(+ .loja-faixa) .trilha:last-of-type { margin-bottom: var(--e-4); }
}

/* O voltar do player é botão de verdade, não migalha — sem depender do
   voltar do navegador (observação do Ícaro em 02/08). */
.migalhas .btn--voltar {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem 1rem; font-size: var(--t-sm); color: var(--marrom);
}
.migalhas .btn--voltar:hover { text-decoration: none; }

/* --- Faixa de aviso: a plataforma é demonstração --- */
.aviso-demo {
  display: flex; align-items: flex-start; gap: var(--e-3);
  background: rgba(244,213,141,.28);
  border: 1px solid var(--dourado);
  border-radius: var(--r-md);
  padding: var(--e-3) var(--e-4);
  font-size: var(--t-sm);
  color: var(--marrom);
  margin-bottom: var(--e-5);
}
.aviso-demo svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 2px; color: var(--ambar-botao); }
.aviso-demo strong { font-weight: 800; }

/* ==========================================================================
   Destaque editorial (hero da home)
   ========================================================================== */

.destaque {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--marrom);
  min-height: 340px;
  display: flex; align-items: flex-end;
  margin-bottom: var(--e-7);
  box-shadow: var(--s-lg);
}
.destaque-arte { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Scrim em duas camadas: a vertical garante leitura do texto; a lateral
   segura o contraste quando a arte tem uma área clara justo atrás do título.
   Sem isso o rótulo dourado some em algumas capas. */
.destaque::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(26,16,8,.72) 0%, rgba(26,16,8,.34) 42%, transparent 72%),
    linear-gradient(to top, rgba(26,16,8,.92) 10%, rgba(26,16,8,.55) 46%, rgba(26,16,8,.12) 80%);
}
.destaque-conteudo { position: relative; z-index: 1; padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); max-width: 40rem; }
.destaque-olho {
  display: inline-block; font-size: var(--t-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--dourado); margin-bottom: var(--e-2);
}
.destaque-conteudo h2 { color: #fff; font-size: clamp(1.5rem, 1.1rem + 2vw, 2.4rem); margin-bottom: var(--e-3); }
.destaque-conteudo p { color: rgba(255,255,255,.86); font-size: var(--t-sm); margin-bottom: var(--e-4); max-width: 34rem; }
.destaque-acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* ==========================================================================
   Trilhas horizontais
   ========================================================================== */

.trilha { margin-bottom: var(--e-7); }
.trilha-topo { display: flex; align-items: baseline; gap: var(--e-3); margin-bottom: var(--e-4); }
.trilha-topo h2 { font-size: var(--t-secao); }
.trilha-topo p { font-size: var(--t-xs); color: var(--texto-suave); }
.trilha-topo a { margin-inline-start: auto; font-size: var(--t-xs); font-weight: 800; color: var(--ambar-botao); white-space: nowrap; }
.trilha-topo a:hover { text-decoration: underline; }

.trilha-lista {
  display: flex; gap: var(--e-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: var(--e-2);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  /* Sem isto o encaixe do scroll COME o padding: a prateleira nasce rolada
     e o primeiro card encosta na borda, desalinhado do título da seção
     (medido em 09/08: card em x=0, título em x=16). */
  scroll-padding-inline: var(--gutter);
}
.trilha-lista::-webkit-scrollbar { display: none; }
.trilha-lista > * { scroll-snap-align: start; flex: 0 0 auto; }

/* ==========================================================================
   Card de mídia — o componente central do produto
   ========================================================================== */

.card {
  width: 170px;
  display: flex; flex-direction: column; gap: var(--e-2);
  text-align: left;
  transition: transform var(--t-medio) var(--mola);
}
.card:hover, .card:focus-visible { transform: translateY(-4px); }

/* O trailer no hover cobre a capa por inteiro e só aparece depois de
   carregado — meio baixado piscando é pior que nada. */
.card-previa {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
.card-previa--pronta { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .card-previa { display: none; }
}

.card-arte {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bege);
  box-shadow: var(--s-sm);
}
.card-arte img { width: 100%; height: 100%; object-fit: cover; }
.card:hover .card-arte { box-shadow: var(--s-md); }

/* Capa ausente ou quebrada: fallback com a inicial e a cor da categoria.
   Nunca uma imagem cinza de "erro" — a grade continua íntegra. */
.card-vazio {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: linear-gradient(155deg, var(--cat-cor, var(--bege)) 0%, rgba(92,62,32,.35) 100%);
}
.card-vazio span { font-size: 2rem; filter: saturate(.9); }

.card-selo {
  position: absolute; top: .4rem; left: .4rem; z-index: 2;
  font-size: .625rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: .2rem .5rem; border-radius: var(--r-pill);
  background: rgba(26,16,8,.72); color: #fff;
  backdrop-filter: blur(4px);
}
.card-selo--demo { background: rgba(156,90,30,.9); }

.card-duracao {
  position: absolute; bottom: .4rem; right: .4rem; z-index: 2;
  font-size: .625rem; font-weight: 700;
  padding: .15rem .45rem; border-radius: var(--r-sm);
  background: rgba(26,16,8,.72); color: #fff;
  backdrop-filter: blur(4px);
}

.card-play {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  background: rgba(26,16,8,.25);
  opacity: 0; transition: opacity var(--t-medio) var(--suave);
}
.card:hover .card-play, .card:focus-visible .card-play { opacity: 1; }
.card-play span {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--dourado); color: var(--marrom);
  display: grid; place-items: center;
}
.card-play svg { width: 16px; height: 16px; margin-inline-start: 2px; }

.card-titulo {
  font-family: var(--fonte-display); font-size: .9rem; font-weight: 500;
  line-height: 1.25; color: var(--marrom);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;                       /* título longo nunca quebra o card */
}
.card-meta { font-size: var(--t-xs); color: var(--texto-suave); font-weight: 600; }

/* Variante larga (16:9) para músicas, meditações e devocionais */
.card--largo { width: 240px; }
.card--largo .card-arte { aspect-ratio: 16 / 9; }

/* Card de COLEÇÃO (08/08): a subpasta na prateleira, VERTICAL como os
   cards de conteúdo — card deitado no meio de cards em pé quebrava a
   harmonia (correção do Ícaro no mesmo dia). "Em breve" é vitrine
   trancada — sem link, sem cursor de mão, arte escurecida e cadeado. */
.card--colecao .card-meta {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card--em-breve .card-alvo { cursor: default; position: relative; }
.card--em-breve .card-arte--trancada { filter: saturate(.55) brightness(.82); }
/* A palavra gentil aparece só quando a pessoa toca — silêncio total num
   card parece aplicativo travado (avaliação de experiência de 08/08). */
.card-aviso {
  position: absolute; left: 0; right: 0; bottom: 34%;
  margin: 0 .5rem; padding: .5rem .6rem;
  background: rgba(26,16,8,.88); color: #fff;
  border-radius: var(--r-md); font-size: .78rem; line-height: 1.3; text-align: center;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity var(--t-medio) var(--suave), transform var(--t-medio) var(--suave);
}
.card--em-breve .card-alvo[data-tocado="sim"] .card-aviso { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .card-aviso { transition: none; } }
.card-cadeado {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.6rem; text-shadow: 0 2px 8px rgba(0,0,0,.35); z-index: 2;
}

/* ==========================================================================
   Grade da biblioteca
   ========================================================================== */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--e-5) var(--e-4);
}
.grade .card { width: 100%; }
/* A estante da porta (09/08): coleções em cards com capa, um pouco maiores
   que os de conteúdo porque carregam nome E motivo. */
.grade--colecoes { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.filtros { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-5); }
.filtro {
  font-size: var(--t-sm); font-weight: 700;
  padding: .5rem 1rem; border-radius: var(--r-pill);
  background: var(--superficie); border: 1.5px solid var(--borda);
  color: var(--texto-medio); min-height: 40px;
  transition: all var(--t-rapido) var(--suave);
}
.filtro:hover { border-color: var(--dourado); }
.filtro[aria-pressed="true"] { background: var(--marrom); border-color: var(--marrom); color: var(--texto-claro); }

/* ==========================================================================
   Categorias (tela Explorar)
   ========================================================================== */

.categorias { display: grid; gap: var(--e-3); }

/* As duas áreas da estante (decisão de 05/08/2026): "Disponíveis agora"
   primeiro, "Em breve" claramente separada — a família nunca fica em dúvida
   do que já pode assistir. */
.estante-titulo {
  font-size: var(--t-sm); font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--texto-suave);
  margin: var(--e-6) 0 var(--e-3);
}
.estante-titulo:first-child { margin-top: 0; }
.categoria-linha {
  position: relative;
  display: flex; align-items: center; gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-lg);
  background: linear-gradient(100deg, var(--cat-cor) 0%, color-mix(in srgb, var(--cat-cor) 55%, #1A1008) 100%);
  color: #fff;
  min-height: 92px;
  overflow: hidden;
  transition: transform var(--t-medio) var(--mola);
}
.categoria-linha:hover { transform: translateX(4px); }
.categoria-icone { font-size: 1.9rem; flex-shrink: 0; }
.categoria-texto h2 { color: #fff; font-size: var(--t-secao); margin-bottom: 2px; }
.categoria-texto p { font-size: var(--t-xs); color: rgba(255,255,255,.85); }
.categoria-contagem {
  margin-inline-start: auto; flex-shrink: 0;
  font-size: var(--t-xs); font-weight: 800;
  background: rgba(255,255,255,.2); padding: .25rem .6rem; border-radius: var(--r-pill);
}

/* ==========================================================================
   Detalhe do conteúdo
   ========================================================================== */

.detalhe { display: grid; grid-template-columns: 300px 1fr; gap: var(--e-7); align-items: start; }
.detalhe-arte { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--s-lg); aspect-ratio: 3/4; background: var(--bege); }
.detalhe-arte img { width: 100%; height: 100%; object-fit: cover; }
.detalhe-corpo h1 { font-size: var(--t-titulo); margin-bottom: var(--e-3); }
.detalhe-fichas { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-4); }
.ficha {
  font-size: var(--t-xs); font-weight: 700;
  padding: .3rem .7rem; border-radius: var(--r-pill);
  background: var(--bege); color: var(--marrom);
}
.ficha--idioma { background: rgba(168,216,232,.5); }
.ficha--demo { background: rgba(156,90,30,.14); color: var(--ambar-botao); }
.detalhe-corpo > p { color: var(--texto-medio); margin-bottom: var(--e-5); max-width: 44rem; }
.detalhe-acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-6); }

.detalhe-dados { border-top: 1px solid var(--borda); padding-top: var(--e-5); }
.detalhe-dados h2 { font-size: var(--t-sm); font-family: var(--fonte-texto); font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); margin-bottom: var(--e-3); }
.detalhe-dados dl { display: grid; grid-template-columns: auto 1fr; gap: var(--e-2) var(--e-4); font-size: var(--t-sm); }
.detalhe-dados dt { font-weight: 700; color: var(--texto-medio); }
.detalhe-dados dd { color: var(--texto-suave); }

/* ==========================================================================
   Players
   ========================================================================== */

.player-palco {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--marrom-noite);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid; place-items: center;
  box-shadow: var(--s-lg);
  margin-bottom: var(--e-5);
}
.player-palco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
/* O iframe do player não herda tamanho de ninguém: sem esta regra o
   navegador o desenha em 300×150 — o quadradinho perdido que o Ícaro viu
   em 02/08 assim que o Panda liberou o domínio. */
.player-palco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Placeholder honesto: diz que a mídia não está conectada, sem fingir player */
.player-aviso {
  position: relative; z-index: 1;
  text-align: center; color: var(--texto-claro);
  padding: var(--e-5); max-width: 30rem;
}
.player-aviso .icone {
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(244,213,141,.2); color: var(--dourado);
  display: grid; place-items: center; margin: 0 auto var(--e-4);
}
.player-aviso .icone svg { width: 26px; height: 26px; }
.player-aviso h2 { color: #fff; font-size: var(--t-secao); margin-bottom: var(--e-2); }
.player-aviso p { font-size: var(--t-sm); color: rgba(251,246,236,.75); }
.player-aviso code {
  display: inline-block; margin-top: var(--e-3);
  font-size: var(--t-xs); background: rgba(0,0,0,.35);
  padding: .2rem .5rem; border-radius: var(--r-sm); color: var(--dourado);
}

/* Player de áudio — meditações e músicas */
.audio-palco {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-4);
  background: linear-gradient(165deg, #3B2A5A 0%, #1A1230 100%);
  border-radius: var(--r-xl);
  padding: var(--e-7) var(--e-5);
  color: var(--texto-claro);
  box-shadow: var(--s-lg);
  margin-bottom: var(--e-5);
}
.audio-capa {
  width: min(230px, 60vw); aspect-ratio: 1;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
  background: rgba(255,255,255,.06);
}
.audio-capa img { width: 100%; height: 100%; object-fit: cover; }
.audio-palco h1 { color: #fff; font-size: var(--t-secao); text-align: center; }
.audio-palco .sub { font-size: var(--t-sm); color: rgba(251,246,236,.68); }
.audio-barra { width: min(420px, 100%); }
.audio-progresso { height: 4px; border-radius: var(--r-pill); background: rgba(255,255,255,.18); overflow: hidden; }
.audio-progresso i { display: block; height: 100%; width: 0%; background: var(--dourado); }
.audio-tempos { display: flex; justify-content: space-between; font-size: var(--t-xs); color: rgba(251,246,236,.6); margin-top: var(--e-2); }
.audio-controles { display: flex; align-items: center; gap: var(--e-5); }
.audio-btn {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; color: rgba(255,255,255,.75);
}
.audio-btn svg { width: 22px; height: 22px; }
.audio-btn--principal { width: 62px; height: 62px; background: var(--dourado); color: var(--marrom); }
.audio-btn--principal svg { width: 26px; height: 26px; }

/* ==========================================================================
   Leitura (devocional)
   ========================================================================== */

.leitura { max-width: 40rem; margin-inline: auto; }
.leitura h1 { font-size: var(--t-titulo); margin-bottom: var(--e-3); }
.leitura-corpo { font-size: 1.0625rem; line-height: 1.8; color: var(--texto-medio); }
.leitura-corpo p { margin-bottom: var(--e-4); }
.leitura-corpo h2 { font-size: var(--t-secao); margin: var(--e-6) 0 var(--e-3); }
.leitura-versiculo {
  font-family: var(--fonte-display); font-style: italic; font-size: 1.2rem;
  line-height: 1.5; color: var(--marrom);
  border-left: 3px solid var(--dourado);
  padding: var(--e-2) 0 var(--e-2) var(--e-5);
  margin: var(--e-5) 0;
}
.leitura-passos { counter-reset: passo; display: grid; gap: var(--e-4); margin: var(--e-5) 0; }
.leitura-passo {
  display: flex; gap: var(--e-4);
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r-md); padding: var(--e-4);
}
.leitura-passo::before {
  counter-increment: passo; content: counter(passo);
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50%; background: var(--dourado); color: var(--marrom);
  display: grid; place-items: center;
  font-family: var(--fonte-display); font-size: .9rem;
}
.leitura-passo b { display: block; color: var(--marrom); margin-bottom: 2px; }
.leitura-passo span { font-size: var(--t-sm); }

/* ==========================================================================
   Atividade para imprimir
   ========================================================================== */

.atividade-grade { display: grid; grid-template-columns: 1fr 320px; gap: var(--e-7); align-items: start; }
.atividade-previa {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r-lg); padding: var(--e-5);
  box-shadow: var(--s-sm);
}
.atividade-folhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: var(--e-3); }
.atividade-folha {
  aspect-ratio: 210/297;                 /* A4 */
  background: #fff; border: 1px solid var(--borda); border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-size: var(--t-xs); color: var(--texto-suave); font-weight: 700;
  box-shadow: var(--s-sm);
  overflow: hidden;
}
.atividade-folha img { width: 100%; height: 100%; object-fit: cover; }
.atividade-lado { display: flex; flex-direction: column; gap: var(--e-4); }
.atividade-caixa {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r-lg); padding: var(--e-5);
}
.atividade-caixa h2 { font-size: var(--t-sm); font-family: var(--fonte-texto); font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); margin-bottom: var(--e-3); }

/* ==========================================================================
   Estados: vazio, carregando, erro, assinatura
   ========================================================================== */

.estado {
  text-align: center; padding: var(--e-8) var(--e-5);
  max-width: 34rem; margin-inline: auto;
}
.estado-icone {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--bege); color: var(--ambar-botao);
  display: grid; place-items: center; margin: 0 auto var(--e-4);
}
.estado-icone svg { width: 32px; height: 32px; }
.estado h2 { font-size: var(--t-secao); margin-bottom: var(--e-2); }
.estado p { color: var(--texto-medio); font-size: var(--t-sm); margin-bottom: var(--e-5); }

/* Esqueleto de carregamento */
.esqueleto { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: var(--e-5) var(--e-4); }
.esq-card { display: flex; flex-direction: column; gap: var(--e-2); }
.esq-arte { aspect-ratio: 3/4; border-radius: var(--r-md); }
.esq-linha { height: 11px; border-radius: var(--r-pill); }
.esq-linha--curta { width: 60%; }
.esq-arte, .esq-linha {
  background: linear-gradient(90deg, var(--bege) 25%, #F9EFE0 50%, var(--bege) 75%);
  background-size: 200% 100%;
  animation: brilho 1.4s ease-in-out infinite;
}
@keyframes brilho { from { background-position: 200% 0 } to { background-position: -200% 0 } }

/* ==========================================================================
   Login
   ========================================================================== */

.tela-login {
  min-height: 100dvh;
  display: grid; grid-template-columns: 1fr 1fr;
}
.login-arte {
  position: relative;
  background:
    radial-gradient(ellipse 70% 60% at 50% 35%, rgba(244,213,141,.5), transparent 65%),
    linear-gradient(170deg, var(--creme-quente), var(--bege));
  display: grid; place-items: center; padding: var(--e-7);
  overflow: hidden;
}
.login-arte img { width: min(380px, 70%); filter: drop-shadow(0 16px 30px rgba(92,62,32,.18)); }
.login-arte-frase {
  position: absolute; bottom: var(--e-8); left: 50%; transform: translateX(-50%);
  text-align: center; max-width: 26rem; padding-inline: var(--e-5);
}
.login-arte-frase p { font-family: var(--fonte-display); font-style: italic; font-size: 1.15rem; color: var(--marrom); }
.login-arte-frase cite { display: block; font-family: var(--fonte-texto); font-style: normal;
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ambar-botao); margin-top: var(--e-2); }

.login-painel { display: grid; place-items: center; padding: var(--e-6) var(--gutter); background: var(--fundo); }
.login-caixa { width: 100%; max-width: 23rem; }
.login-caixa img.marca { height: 42px; width: auto; margin-bottom: var(--e-6); }
.login-caixa h1 { font-size: var(--t-titulo); margin-bottom: var(--e-2); }
.login-caixa > p { color: var(--texto-medio); font-size: var(--t-sm); margin-bottom: var(--e-6); }

.campo { margin-bottom: var(--e-4); }
.campo label { display: block; font-size: var(--t-sm); font-weight: 700; color: var(--marrom); margin-bottom: var(--e-2); }
.campo input {
  width: 100%; padding: .85rem 1rem; min-height: 48px;
  border: 1.5px solid var(--borda); border-radius: var(--r-md);
  background: var(--superficie); font-size: 1rem;      /* 16px evita zoom no iOS */
  transition: border-color var(--t-rapido) var(--suave);
}
/* 🟡6 da segunda revisão da Rute. Ela mediu o `#perfil-nome-campo` — o campo
   onde a família digita o nome da criança:

       outline no foco     : none
       borda SEM foco      : rgb(239, 226, 204)
       borda COM foco      : rgb(239, 226, 204)   ← idêntica
       razão entre as duas : 1.0

   Zero indicação. Era o único controle do onboarding sem anel, e falha o
   critério 2.4.7.

   A causa da borda idêntica: `--dourado` #F4D58D sobre o creme dá 1,3:1 —
   a borda MUDAVA e ninguém via. O anel usa `--ambar-botao` #9C5A1E, que ela
   mediu em 4,92:1 e é o único da casa que já passava. */
.campo input:focus { border-color: var(--ambar-botao); outline: none; }
.campo input:focus-visible {
  outline: 2px solid var(--ambar-botao);
  outline-offset: 2px;
}
.campo-ajuda { font-size: var(--t-xs); color: var(--texto-suave); margin-top: var(--e-2); }

.login-rodape { font-size: var(--t-sm); color: var(--texto-medio); margin-top: var(--e-5); text-align: center; }
.login-rodape a { color: var(--ambar-botao); font-weight: 800; text-decoration: underline; }

/* ==========================================================================
   Conta
   ========================================================================== */

.conta-grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-5); align-items: start; }
.conta-cartao {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r-lg); padding: var(--e-5);
}
.conta-cartao h2 { font-size: var(--t-sm); font-family: var(--fonte-texto); font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); margin-bottom: var(--e-4); }
.conta-linha { display: flex; justify-content: space-between; gap: var(--e-4);
  padding-block: var(--e-3); border-bottom: 1px solid var(--borda); font-size: var(--t-sm); }
.conta-linha:last-child { border-bottom: 0; }
.conta-linha dt { color: var(--texto-medio); font-weight: 600; }
.conta-linha dd { color: var(--marrom); font-weight: 700; text-align: right; }
.selo-status {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--t-xs); font-weight: 800;
  padding: .2rem .6rem; border-radius: var(--r-pill);
  background: rgba(200,217,168,.45); color: #3F5225;
}

/* ==========================================================================
   Responsivo — mobile é versão principal, não adaptação
   ========================================================================== */

/* O cabeçalho apertado. Desde 14/08 a navegação de topo só nasce a partir de
   1560px (ver a regra 3 lá embaixo), então esta faixa existe para os
   primeiros pixels acima do corte, onde ela cabe mas sem folga.

   O `min-width: 150px` da busca vale SÓ aqui: nesta faixa a navegação
   existe, e sem piso o campo era espremido a 4px. Não é o piso global que a
   lição de 12/08 proibiu — aquele valia em toda largura e empurrava a
   fileira para fora da tela. */
/* 🔴1 DA PASSAGEM FINAL DA RUTE — eu não consertei o defeito, mudei ele de
   lugar. Ele saiu da faixa 1400–1559 e reapareceu a partir de **1701px**,
   para sempre:

       1700px → caixa 187, campo 131px, mostra "davi"    ✅
       1701px → caixa  51, campo   4px, não mostra nada  ❌
       1728 (MacBook Pro 16") · 1920 (o monitor mais comum do Brasil) · 2560

   A causa que eu não tinha visto: `.container { max-width: 1320px }`. A
   fileira do topo NUNCA passa de 1320px — tela mais larga não dá um pixel a
   mais para ninguém. Eu fiz a conta contra a largura da TELA (1393+160=1553)
   e a régua é a largura do CONTAINER.

   Como a composição da fileira é idêntica em 1560 e em 2560, o teto de 1700
   não tinha razão de existir: era eu contando o que não muda. Sem teto, a
   faixa que a Rute mediu como certa vale para sempre. */
@media (min-width: 1560px) {
  .busca-topo { min-width: 150px; }
  .nav-desktop { gap: 0; margin-inline-start: var(--e-2); }
  .nav-desktop a { padding: .5rem .55rem; }
  .topo .container { gap: var(--e-3); }
}

@media (max-width: 1080px) {
  .detalhe { grid-template-columns: 230px 1fr; gap: var(--e-5); }
  .atividade-grade { grid-template-columns: 1fr; }
}

/* Abaixo de 1000 a busca vira só o ícone: o campo reaparece na tela Explorar */
@media (max-width: 1000px) and (min-width: 781px) {
  .busca-topo { min-width: 0; width: 44px; padding: .45rem; justify-content: center; }
  .busca-topo input { display: none; }
}

@media (max-width: 900px) {
  .tela-login { grid-template-columns: 1fr; }
  .login-arte { min-height: 34vh; padding: var(--e-5); }
  .login-arte img { width: min(220px, 46%); }
  .login-arte-frase { display: none; }
  .conta-grade { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  /* o topo enxuga: marca + busca + avatar; a navegação desce para o rodapé */
  .nav-desktop { display: none; }
  .nav-inferior { display: block; }
  body { padding-bottom: calc(var(--fundo-nav-h) + env(safe-area-inset-bottom)); }
  .busca-topo { min-width: 0; flex: 1; }
  .detalhe { grid-template-columns: 1fr; }
  .detalhe-arte { max-width: 220px; }
  .destaque { min-height: 300px; }
  .card { width: 142px; }
  .card--largo { width: 210px; }
  .grade { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}

@media (max-width: 420px) {
  .card { width: 132px; }
  .card--largo { width: 190px; }
  .grade { grid-template-columns: repeat(2, 1fr); }
  .destaque { min-height: 260px; }
  .detalhe-acoes .btn { width: 100%; }
  .topo-marca img { height: 28px; }
}

/* No celular a busca ficava com 48px para um texto de 124px e exibia
   "Busc" cortado (achado do Ícaro no print, medido em 09/08). O nome
   comprido da marca comia a barra: no celular o logotipo já identifica,
   então o texto sai e o campo respira. */
@media (max-width: 780px) {
  .topo-marca .marca-nome { display: none; }
  .busca-topo { min-width: 132px; }
}

/* ==========================================================================
   Impressão — a atividade sai limpa no papel
   ========================================================================== */

@media print {
  .topo, .nav-inferior, .aviso-demo, .atividade-lado, .btn, .migalhas { display: none !important; }
  body { background: #fff; padding: 0; }
  .atividade-grade { display: block; }
  .atividade-previa { border: 0; box-shadow: none; padding: 0; }
  .atividade-folha { page-break-inside: avoid; box-shadow: none; }
}

/* ==========================================================================
   Movimento reduzido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   REFINAMENTO — branding, favoritos, abas, atividades
   ========================================================================== */

/* --- Marca no topo: wordmark legível, não só o ícone ---
   Antes o cabeçalho trazia a logo pequena e a área parecia um template
   qualquer. O nome escrito cria continuidade com o site público e diz ao
   usuário em qual produto ele está. */
.topo-marca { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; }
.topo-marca img { height: 36px; width: auto; }
.topo-marca .marca-nome {
  display: flex; flex-direction: column; line-height: 1;
}
.topo-marca .marca-nome b {
  font-family: var(--fonte-display); font-size: 1.05rem; font-weight: 500;
  color: var(--marrom); letter-spacing: -.01em;
}
.topo-marca .marca-nome span {
  font-size: .5625rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--texto-suave); margin-top: 2px;
}
@media (max-width: 1180px) { .topo-marca .marca-nome { display: none; } }
@media (max-width: 780px)  { .topo-marca .marca-nome { display: flex; } .topo-marca img { height: 30px; } }
@media (max-width: 360px)  { .topo-marca .marca-nome { display: none; } }

/* --- Botão de favorito --- */
.card { position: relative; }
.card-alvo { display: flex; flex-direction: column; gap: var(--e-2); color: inherit; }

.fav {
  position: absolute; top: .4rem; right: .4rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .3rem;
  min-width: 34px; min-height: 34px;
  padding: 0 .45rem;
  border-radius: var(--r-pill);
  background: rgba(26,16,8,.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff;
  transition: background-color var(--t-rapido) var(--suave), transform var(--t-medio) var(--mola);
}
/* A área de TOQUE do coração passa de 34px para 44px sem o desenho mudar
   de tamanho (medição de 08/08: 39 corações a 32px na home do celular).
   Dedo de adulto com criança no colo erra alvo pequeno — e errar aqui
   abre o vídeo em vez de salvar. O retângulo invisível resolve. */
.fav::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.fav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; flex-shrink: 0; }
/* O texto acompanha o ícone: estado nunca depende só da cor do coração */
.fav-texto { font-size: .625rem; font-weight: 800; letter-spacing: .02em; }
.fav:hover { background: rgba(26,16,8,.8); transform: scale(1.04); }
.fav[aria-pressed="true"] { background: var(--ambar-botao); }
.fav[aria-pressed="true"] svg { fill: currentColor; }
.fav--ocupado { opacity: .6; pointer-events: none; }

/* no detalhe e no player o botão vira ação de linha */
.fav--linha {
  position: static; min-height: 44px; padding: .8rem 1.2rem;
  background: var(--superficie); color: var(--marrom);
  border: 2px solid var(--borda);
}
.fav--linha svg { width: 19px; height: 19px; }
.fav--linha .fav-texto { font-size: var(--t-sm); }
.fav--linha:hover { background: var(--bege); border-color: var(--dourado); }
.fav--linha[aria-pressed="true"] { background: var(--ambar-botao); color: #fff; border-color: var(--ambar-botao); }

/* --- Selo de tipo de mídia: distingue vídeo, áudio, leitura e impressão --- */
.card-midia {
  position: absolute; bottom: .4rem; left: .4rem; z-index: 2;
  font-size: .625rem; font-weight: 800; letter-spacing: .03em;
  padding: .18rem .45rem; border-radius: var(--r-sm);
  background: rgba(253,248,239,.92); color: var(--marrom);
  backdrop-filter: blur(4px);
}

/* --- Card de atividade: precisa NÃO parecer vídeo --- */
.card--atividade .card-arte {
  aspect-ratio: 4 / 3;
  border: 2px dashed var(--bege-borda);
  background: var(--superficie);
  padding: 6px;
  border-radius: var(--r-md);
}
.card--atividade .card-arte img { border-radius: calc(var(--r-md) - 6px); }
.card-acao {
  position: absolute; left: 50%; bottom: .5rem; transform: translateX(-50%);
  z-index: 2; white-space: nowrap;
  font-size: .625rem; font-weight: 800;
  padding: .3rem .7rem; border-radius: var(--r-pill);
  background: var(--ambar-botao); color: #fff;
  opacity: 0; transition: opacity var(--t-medio) var(--suave);
}
.card:hover .card-acao, .card:focus-within .card-acao { opacity: 1; }

/* --- Abas de idioma (Jesus Ensina) --- */
.abas {
  display: inline-flex; gap: 4px; padding: 5px;
  background: var(--superficie); border: 1.5px solid var(--borda);
  border-radius: var(--r-pill); margin-bottom: var(--e-5);
}
.aba {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .5rem 1.1rem;
  border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: 700; color: var(--texto-medio);
  transition: background-color var(--t-rapido) var(--suave), color var(--t-rapido) var(--suave);
}
.aba:hover { background: var(--bege); }
/* Estado ativo por fundo, cor E peso — nunca só por cor */
.aba[aria-selected="true"] { background: var(--marrom); color: var(--texto-claro); font-weight: 800; }
.aba-bandeira { font-size: 1.05rem; line-height: 1; }
.aba-contagem {
  font-size: .625rem; font-weight: 800;
  padding: .1rem .38rem; border-radius: var(--r-pill);
  background: var(--bege); color: var(--marrom);
}
.aba[aria-selected="true"] .aba-contagem { background: rgba(255,255,255,.22); color: #fff; }
@media (max-width: 420px) {
  .abas { display: flex; width: 100%; }
  .aba { flex: 1; justify-content: center; padding: .5rem .5rem; }
  .aba-nome { font-size: var(--t-xs); }
}

/* --- Banner de categoria com o personagem em contexto --- */
.cat-banner {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--e-5);
  border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(100deg, var(--cat-cor) 0%, color-mix(in srgb, var(--cat-cor) 62%, #1A1008) 100%);
  color: #fff;
  padding: var(--e-6) 0 var(--e-6) var(--e-6);
  margin-bottom: var(--e-5);
  min-height: 190px;
}
.cat-banner-texto { max-width: 34rem; }
.cat-banner-olho {
  display: inline-block; font-size: var(--t-xs); font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.82); margin-bottom: var(--e-2);
}
.cat-banner h1 { color: #fff; font-size: clamp(1.2rem, 1rem + 1.2vw, 1.8rem); margin-bottom: var(--e-2); }
.cat-banner p { font-size: var(--t-sm); color: rgba(255,255,255,.84); }
.cat-banner-arte { width: clamp(180px, 24vw, 300px); align-self: end; margin-bottom: -4px; }
@media (max-width: 720px) {
  .cat-banner { grid-template-columns: 1fr; padding: var(--e-5); text-align: left; }
  .cat-banner-arte { display: none; }
  .cat-banner { min-height: 0; }
}

/* --- Navegação inferior: contador de favoritos --- */
.nav-inferior a { position: relative; }
.nav-badge {
  position: absolute; top: 6px; left: 56%;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--ambar-botao); color: #fff;
  font-size: .5625rem; font-weight: 800; line-height: 16px; text-align: center;
}

/* --- Região viva para leitor de tela --- */
#aviso-vivo {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.topo-fav {
  position: relative;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--texto-medio); flex-shrink: 0;
  transition: background-color var(--t-rapido) var(--suave), color var(--t-rapido) var(--suave);
}
.topo-fav svg { width: 20px; height: 20px; }
.topo-fav:hover { background: var(--bege); color: var(--marrom); }
.topo-fav[aria-current="page"] { background: var(--marrom); color: var(--texto-claro); }
.topo-fav .nav-badge { top: 2px; left: 56%; }
@media (max-width: 780px) { .topo-fav { display: none; } }

.player-rodape {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap; margin-bottom: var(--e-2);
}

/* ==========================================================================
   Login refinado — a marca recebe, o formulário continua sendo a prioridade
   ========================================================================== */

.login-arte {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--e-5);
  background:
    radial-gradient(ellipse 62% 52% at 50% 44%, rgba(244,213,141,.55), transparent 68%),
    radial-gradient(ellipse 50% 40% at 84% 82%, rgba(168,216,232,.3), transparent 62%),
    linear-gradient(168deg, var(--creme-quente) 0%, var(--bege) 100%);
}
.login-marca { text-align: center; }
.login-marca-logo { height: 54px; width: auto; margin: 0 auto var(--e-2); }
.login-marca span {
  display: block;
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--texto-suave);
}
.login-cena {
  width: min(340px, 62%);
  filter: drop-shadow(0 16px 32px rgba(92,62,32,.16));
  /* respiração lenta: dá vida sem chamar atenção para si */
  animation: respira-login 7s ease-in-out infinite;
}
@keyframes respira-login {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.012); }
}
.login-arte-frase { position: static; transform: none; }

/* No celular a marca aparece no painel e o lado ilustrado encolhe:
   o formulário não pode ser empurrado para baixo da dobra. */
.marca--painel { display: none; }
@media (max-width: 900px) {
  .login-arte { min-height: 26vh; padding: var(--e-5) var(--e-4); gap: var(--e-3); }
  .login-cena { width: min(150px, 40%); animation: none; }
  .login-marca-logo { height: 38px; }
  .login-marca span { font-size: .625rem; letter-spacing: .14em; }
  .login-arte-frase { display: none; }
}
@media (max-width: 560px) {
  .login-arte { min-height: 0; padding: var(--e-4); flex-direction: row; justify-content: flex-start; }
  .login-cena { width: 76px; }
  .login-marca { text-align: left; }
  .login-marca-logo { height: 30px; margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce) { .login-cena { animation: none; } }

/* ==========================================================================
   Correções da revisão 2
   ========================================================================== */

/* O selo e o botão de favorito disputavam o topo do card em telas estreitas:
   o selo era truncado e os dois encostavam. Selo curto + botão redondo. */
.card .fav { min-width: 32px; width: 32px; height: 32px; padding: 0; justify-content: center; }
.card .fav svg { width: 16px; height: 16px; }
.card-selo { max-width: calc(100% - 44px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Atividade mantém a proporção dos demais para a grade não perder o
   alinhamento — a diferenciação vem da moldura tracejada, do selo
   "Para imprimir" e da chamada própria, não de um formato diferente. */
.card--atividade .card-arte { aspect-ratio: 3 / 4; }
.card--atividade .card-arte img { object-position: center top; }

/* A arte do banner vinha com fundo creme e virava um retângulo solto sobre
   o degradê da categoria. Recorte arredondado resolve sem mexer na arte. */
.cat-banner-arte {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 -2px 24px rgba(26,16,8,.18);
}

/* Selo verde: item cujo TEXTO já existe e foi revisado (falta só gravar).
   Distinguir isso do "demo" evita que a equipe confunda o que já é produto. */
.card-selo--pronto { background: rgba(110,140,70,.92); }
.ficha--pronto { background: rgba(200,217,168,.5); color: #3F5225; }

.leitura-tema {
  display: inline-block; font-size: var(--t-xs); font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ambar-botao); margin-bottom: var(--e-2);
}
.leitura-resumo { font-size: var(--t-sm); color: var(--texto-suave); margin-bottom: var(--e-4); }
.leitura-versiculo cite {
  display: block; font-style: normal; font-family: var(--fonte-texto);
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .06em;
  color: var(--ambar-botao); margin-top: var(--e-2);
}
.leitura-acoes { margin: var(--e-6) 0; }

/* ==========================================================================
   RODADA F — kit sem folhas vazias, roteiro no player de áudio
   ========================================================================== */

/* A prévia do kit deixou de ser uma grade de quadrados em branco. Agora tem a
   folha que existe, grande, e a lista nomeada do que vem no kit. */
.atividade-previa {
  display: grid;
  gap: var(--e-5);
}
.atividade-capa {
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--linha);
  background: #fff;
  display: block;
}
.atividade-sumario h2 {
  font-size: var(--t-h4);
  margin-bottom: var(--e-3);
}
.atividade-lista {
  list-style: none;
  display: grid;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
}
.atividade-lista li {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-sm);
  color: var(--texto-medio);
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--r-md);
  padding: .6rem .85rem;
}
.folha-n {
  flex: 0 0 auto;
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bege);
  color: var(--marrom);
  font-size: .78rem;
  font-weight: 800;
}

@media (min-width: 760px) {
  .atividade-previa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* Roteiro como ação secundária dentro do player de áudio */
.audio-roteiro {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: var(--e-5);
  padding: .6rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.audio-roteiro svg { width: 18px; height: 18px; }
.audio-roteiro:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }

/* Botão desativado precisa PARECER desativado. Sem isto o "Baixar PDF" ficava
   com a mesma cor do botão ativo: a pessoa clicava e nada acontecia — pior do
   que dizer que ainda não está disponível. */
.btn:disabled,
.audio-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.35);
}
.btn:disabled:hover,
.audio-btn:disabled:hover { transform: none; }

/* Explicação curta para o modo comercial, onde os avisos internos não são
   desenhados: o estado continua sendo comunicado, sem jargão de gestão. */
.nota-indisponivel {
  margin-top: var(--e-3);
  font-size: var(--t-xs);
  color: var(--texto-suave);
  text-align: center;
}

/* ==========================================================================
   G2 — acesso sem senha
   ========================================================================== */

/* O atributo `hidden` vale `display:none` no user-agent, mas QUALQUER regra
   de `display` no CSS o sobrescreve — foi o que aconteceu com `.aviso-demo`
   (display:flex), que aparecia vazio na tela de login. Esta regra devolve ao
   `hidden` a autoridade que se espera dele. */
[hidden] { display: none !important; }

/* Confirmação de "verifique seu e-mail" */
.login-confirmado {
  text-align: center;
  padding: var(--e-5) var(--e-4);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  background: #fff;
}
.login-confirmado-icone {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  margin: 0 auto var(--e-3);
  border-radius: 50%;
  background: var(--bege);
  color: var(--marrom);
}
.login-confirmado-icone svg { width: 26px; height: 26px; }
.login-confirmado h2 { font-size: var(--t-h4); margin-bottom: var(--e-2); }
.login-confirmado p { font-size: var(--t-sm); color: var(--texto-medio); margin: 0; }

/* Botão de terceira ordem: existe, mas não compete com os dois primeiros */
.btn--texto {
  background: none;
  border: 0;
  color: var(--texto-suave);
  font-size: var(--t-sm);
  text-decoration: underline;
  padding: .5rem;
  cursor: pointer;
}
.btn--texto:hover { color: var(--marrom); }

/* O widget anti-bot só ocupa espaço quando existe chave configurada.
 *
 * A regra aqui era `.cf-turnstile:empty { display: none }` e criava um nó que
 * apertava a si mesmo: a caixa nasce vazia, o CSS a escondia, e o Cloudflare
 * NÃO desenha dentro de elemento escondido — então ela continuava vazia, e por
 * continuar vazia continuava escondida. Para sempre.
 *
 * O sintoma era o pior possível: a tela de login parecia perfeita, sem erro no
 * console, e o servidor recusava todo pedido de acesso por falta de token. A
 * condição certa é a AUSÊNCIA DE CHAVE, que é o que a regra queria dizer desde
 * o começo — e que não muda depois que a página carrega. */
.cf-turnstile:not([data-sitekey]),
.cf-turnstile[data-sitekey=""] { display: none; }
.cf-turnstile { margin-bottom: var(--e-3); }

/* Código de 6 dígitos: monoespaçado e espaçado, para conferir sem esforço */
#codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.5rem;
  letter-spacing: .5em;
  text-align: center;
  padding-inline: .5rem;
}

/* Socorro do login: a lista de "não chegou?" que aparece depois de 20s */
.login-socorro {
  margin: .4rem 0 0;
  padding-left: 1.1rem;
  font-size: var(--t-sm);
  color: var(--texto-medio);
  line-height: 1.55;
}
.login-socorro li { margin-bottom: .25rem; }

/* ==========================================================================
   Jornada por perfil (06/08/2026) — o ✓ e o convite de continuar.
   Guia, nunca tranca: todos os cartões seguem clicáveis.
   ========================================================================== */
.card-jornada {
  position: absolute; top: 8px; left: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--marrom); color: var(--texto-claro);
  display: grid; place-items: center;
  font-size: .85rem; font-weight: 800;
  box-shadow: var(--s-sm);
}
.jornada-convite {
  display: block;
  background: linear-gradient(100deg, #F4D58D 0%, #E9BE6B 100%);
  color: var(--marrom);
  border-radius: var(--r-lg);
  padding: var(--e-4) var(--e-5);
  margin-bottom: var(--e-5);
  box-shadow: var(--s-sm);
}
.jornada-convite-olho {
  display: block; font-size: var(--t-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: #7A5A1E; margin-bottom: 2px;
}
.jornada-convite strong { font-size: var(--t-md); }
.jornada-convite--completa { text-align: center; }

/* ==========================================================================
   A fileira do topo passa a caber — correção de 13/08/2026

   Medido no navegador, nas três larguras, antes de mexer:

     celular  390px → o documento tinha 402px  (12px de rolagem lateral)
     tablet   820px → 990px                    (170px)
     desktop 1440px → 1446px                   (66px)

   A causa não era margem nem largura fixa: era a fileira do topo NUNCA
   ENCOLHER. Item de flex nasce com `min-width: auto`, que significa "não
   fico menor que o meu conteúdo" — então marca + navegação + ações somavam
   1393px dentro de um container de 1320px e empurravam a página para fora.

   Rolagem lateral em plataforma de assinante é defeito caro: no celular a
   pessoa arrasta e a tela "escapa"; no desktop aparece a barra embaixo e o
   layout parece quebrado. E não aparecia em teste nenhum porque nenhum
   teste media a largura do documento nesta tela.
   ========================================================================== */

/* 1. A fileira e seus filhos podem encolher. */
.topo .container { min-width: 0; }
.topo-marca,
.topo-acoes { min-width: 0; }
.topo-acoes { flex-shrink: 1; }

/* O nome da marca cede antes de tudo: ele é reconhecimento, e o logo já
   cumpre esse papel sozinho. */
.topo-marca .marca-nome { min-width: 0; }
.topo-marca .marca-nome b,
.topo-marca .marca-nome span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 2. A busca cede depois. `min-width: 220px` era o que travava as ações em
   322px no desktop — um campo que não encolhe num topo que precisava.

   🟡4 DA QUARTA REVISÃO DA RUTE: ceder sem piso virou ceder até sumir. Ela
   mediu, digitando "davi" de verdade:

       1400px → caixa 195, campo 139   ✅
       1440px → caixa  57, campo   4   ❌  e piora até 1920

   A causa é a fileira: abaixo de 1400 a navegação de topo some e sobra
   espaço; acima dela, os oito destinos espremem quem tem `flex-shrink`. O
   campo continuava aceitando o texto — a pessoa digitava e não via nada.

   A minha primeira correção foi pôr um piso de 132px aqui — e ela REPROVOU a
   prova de 12/08, com razão: piso na busca foi exatamente o que empurrou a
   fileira para fora da tela naquele dia. Duas lições da casa em conflito, e
   as duas certas.

   A saída não é escolher uma: é atacar a causa comum. O aperto não vem da
   busca, vem da NAVEGAÇÃO DE TOPO nascendo antes de haver espaço para ela e
   para o campo. O corte dela sobe (regra 3, logo abaixo), e a busca continua
   sem piso — cedendo, como deve, num topo que agora só a espreme quando
   sobra lugar para as duas. */
.busca-topo { min-width: 0; flex: 0 1 220px; }

/* 3. A navegação de topo só existe onde ela CABE.
   Ela mede ~819px; com marca (204) e ações (322) a fileira pede ~1393px.
   Abaixo disso, quem navega é a barra de baixo — que é o padrão certo para
   tablet, e não um remendo. O corte era em 780px, e entre 781 e 1399 o
   tablet recebia uma navegação espremida que vazava da tela.

   14/08/2026 — o corte sobe de 1399 para 1559. "Caber" não é a fileira não
   transbordar: é todo mundo dentro dela continuar SERVINDO. A Rute mediu o
   preço do corte antigo, digitando "davi" de verdade:

       1400px → caixa 195, campo 139   ✅
       1440px → caixa  57, campo   4   ❌  e piora até 1920

   Um campo de 4px aceita o dedo, aceita o texto, e não mostra a letra —
   pior que não existir, porque parece que existe. Os ~1393px da fileira
   mais os 160px de um campo usável dão 1553; 1560 é o primeiro múltiplo
   redondo acima disso. Entre 1400 e 1559 quem navega é a barra de baixo,
   que sempre coube. */
@media (max-width: 1559px) {
  .nav-desktop { display: none; }
  .nav-inferior { display: block; }
  body { padding-bottom: calc(var(--fundo-nav-h) + env(safe-area-inset-bottom)); }
  .busca-topo { flex: 1 1 auto; }
}

/* 4. No celular pequeno, o nome ao lado do logo é o que sobra de fora.
   Era escondido só abaixo de 360px; a conta mostra que precisa sair antes:
   marca (192) + ações (182) já enchem os 358px úteis de um iPhone de 390. */
@media (max-width: 480px) {
  .topo-marca .marca-nome { display: none; }
}

/* 5. Cinto de segurança: nenhuma tela desta plataforma rola de lado.
   Se um card novo nascer largo demais, ele é cortado em vez de arrastar a
   página inteira — e o passeio automático acusa. */
html, body { overflow-x: hidden; }

/* ==========================================================================
   A BARRA DE BAIXO EM VIDRO — decisão dele em 13/08/2026

   Ele pediu: "quero que você mantenha a barra de menu na parte de baixo
   quando mobile, porque tem que ficar mais bonito também... se você
   conseguiu achar algum modo de deixar o estilo do iPhone, com tela Liquid
   Glass, vai ficar excelente."

   O QUE FAZ O VIDRO PARECER VIDRO — e não um retângulo meio transparente:

   1. `backdrop-filter` com blur E saturação. O blur sozinho dá fosco; a
      saturação é o que devolve a cor viva por trás e faz parecer vidro de
      verdade (é o que o iOS faz).
   2. Uma borda especular no TOPO — um fio de luz de 1px, mais claro que o
      vidro. É a quina do material pegando luz; sem ela a barra flutua sem
      espessura.
   3. Sombra pra cima, não pra baixo. A barra está NA FRENTE do conteúdo, e
      sombra na direção errada é o detalhe que faz o olho não acreditar.
   4. A bolha central sobe e ganha o dourado da marca: o polegar descansa no
      meio da tela, e é lá que fica a coisa nova e maior da plataforma.

   E O QUE ACONTECE QUANDO O VIDRO NÃO PODE EXISTIR:
   navegador sem `backdrop-filter`, ou pessoa que pediu menos transparência,
   recebe a MESMA barra em cor sólida. Sólido é bonito; ilegível não é.
   ========================================================================== */

.nav-inferior {
  /* O fallback vem primeiro e vale sozinho onde o vidro não existe. */
  background: var(--superficie);
  border-top: 1px solid var(--borda);
  box-shadow: 0 -1px 3px rgba(62, 42, 20, .05);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-inferior {
    background: rgba(253, 248, 239, .72);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    backdrop-filter: blur(20px) saturate(1.8);
    border-top: 0;
    box-shadow:
      /* o fio de luz na quina de cima — a "espessura" do vidro */
      inset 0 1px 0 rgba(255, 255, 255, .85),
      /* e a sombra PARA CIMA, porque a barra está na frente do conteúdo */
      0 -8px 24px rgba(62, 42, 20, .10);
  }
}

/* A pessoa que pediu menos transparência recebe sólido — preferência
   declarada vence efeito bonito, como já vale para o trailer no hover. */
@media (prefers-reduced-transparency: reduce) {
  .nav-inferior {
    background: var(--superficie);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: 1px solid var(--borda);
    box-shadow: 0 -1px 3px rgba(62, 42, 20, .05);
  }
}

/* --------------------------------------------------- a bolha do centro */

.nav-inferior .nav-centro > a {
  /* O rótulo desce um pouco para caber embaixo da bolha, que sobe. */
  justify-content: flex-end;
  padding-bottom: .5rem;
  gap: 0;
}

.nav-bolha {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 18px;                    /* quina do iOS, não círculo */
  margin-top: -22px;                      /* sobe e sai da barra */
  margin-bottom: 4px;
  background: linear-gradient(160deg, var(--dourado), var(--ambar));
  color: var(--marrom);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 4px 12px rgba(184, 113, 47, .35);
  transition: transform var(--t-rapido) var(--suave), box-shadow var(--t-rapido) var(--suave);
}

.nav-bolha svg { width: 26px; height: 26px; }

.nav-inferior .nav-centro > a[aria-current="page"] .nav-bolha {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 6px 18px rgba(184, 113, 47, .45);
}

/* O rótulo do centro fica escuro mesmo quando a página é outra: ele está
   sobre a bolha dourada, e cinza sobre dourado não se lê. */
.nav-inferior .nav-centro > a { color: var(--texto-medio); }
.nav-inferior .nav-centro > a[aria-current="page"] { color: var(--ambar-botao); }

@media (prefers-reduced-motion: reduce) {
  .nav-bolha { transition: none; }
  .nav-inferior .nav-centro > a[aria-current="page"] .nav-bolha { transform: none; }
}

/* A bolha sobe 22px: o conteúdo precisa desse respiro a mais no fim da
   página, senão o último card fica atrás dela.

   🟡5 do Esdras (14/08/2026): o corte da barra de baixo subiu hoje de 1399
   para 1559, e ESTA regra ficou em 1399 — a única das quatro que não
   acompanhou. Entre 1400 e 1559 a barra existia, a bolha subia 22px, e o
   `body` não reservava o espaço: o último card ficava atrás dela, que é
   exatamente o que este bloco existe para evitar.

   A faixa não é teórica: o MacBook Pro de 14" tem 1512px lógicos e cai bem
   no meio dela. */
@media (max-width: 1559px) {
  body { padding-bottom: calc(var(--fundo-nav-h) + 22px + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------ o convite do aplicativo

   Aparece na segunda visita, uma vez só, e some para sempre quando a pessoa
   diz "agora não". Fica ACIMA da barra de baixo, nunca em cima dela — a
   navegação continua alcançável enquanto o convite está na tela. */

.convite-app {
  position: fixed; z-index: 80;
  left: 12px; right: 12px;
  bottom: calc(var(--fundo-nav-h) + 22px + env(safe-area-inset-bottom) + 12px);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(62, 42, 20, .18);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  animation: convite-sobe .22s ease-out;
}
@keyframes convite-sobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .convite-app { animation: none; } }

.convite-app-texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.convite-app-texto b { font-size: 14.5px; }
.convite-app-texto span { font-size: 12.5px; color: var(--texto-medio); }
.convite-app-acoes { display: flex; align-items: center; gap: 10px; }
.convite-nao {
  font: inherit; font-size: 13px; background: none; border: 0; cursor: pointer;
  color: var(--texto-medio); text-decoration: underline; text-underline-offset: 2px;
  padding: 10px 4px; min-height: 44px;
}

/* No desktop o convite não faz sentido: ele fala de "tela do celular". */
/* O convite de instalar acompanha a barra de baixo: onde ela não existe,
   ele também não — ancorar num elemento ausente foi o que fez ele pousar em
   cima da grade da acolhida (🔴2 da quarta revisão). */
@media (min-width: 1560px) { .convite-app { display: none; } }


/* ==========================================================================
   A acolhida — a primeira tela de quem acabou de comprar

   Uma coluna estreita e centrada, sem prateleira e sem botão concorrente.
   Quem chega aqui acabou de pagar: a tela tem uma coisa para dizer e um
   caminho para seguir, e é só isso que ela mostra.
   ========================================================================== */

.acolhida { display: grid; place-items: center; min-height: 70vh; }

.acolhida-caixa {
  max-width: 560px; width: 100%; text-align: center;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg, 18px);
  padding: 36px 30px 32px;
  box-shadow: var(--sombra, 0 1px 3px rgba(62,42,20,.08));
}

.acolhida-marca { height: 54px; width: auto; margin-bottom: 18px; }

.acolhida h1 {
  font-family: var(--fonte-display);
  font-size: clamp(26px, 5vw, 34px);
  line-height: 1.12;
  margin: 0 0 14px;
}

.acolhida-texto {
  font-size: 15.5px; line-height: 1.65; color: var(--texto-medio);
  margin: 0 auto 14px; max-width: 46ch;
}

.acolhida-passos {
  list-style: none; margin: 22px 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
  text-align: left; counter-reset: passo;
}
.acolhida-passos li {
  display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start;
  background: var(--bege); border-radius: var(--r-md, 12px); padding: 13px 15px;
}
.acolhida-passos li::before {
  counter-increment: passo; content: counter(passo);
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--dourado); color: var(--marrom);
  font-weight: 800; font-size: 13px; display: grid; place-items: center;
}
/* O número ocupa a coluna 1; título E texto ficam na 2. Sem dizer isso, a
   grade joga o <span> para a linha de baixo NA COLUNA DE 30px, e o texto
   sai uma palavra por linha. */
.acolhida-passos b { grid-column: 2; font-size: 14.5px; }
.acolhida-passos span { grid-column: 2; font-size: 13px; color: var(--texto-medio); line-height: 1.5; }

.acolhida-assina {
  font-family: var(--fonte-display); font-style: italic;
  font-size: 14.5px; color: var(--texto-suave); margin: 0 0 20px;
}

@media (max-width: 480px) {
  .acolhida-caixa { padding: 26px 20px 24px; border: 0; box-shadow: none; background: transparent; }
}

/* ==========================================================================
   O ONBOARDING — os quatro passos depois do pagamento

   Ele pediu em 13/08/2026: "uma tela bem trabalhada com perguntas-chave para
   coletar os dados e direcionar a pessoa para a melhor visualização".

   A régua que governa o desenho: **uma pergunta por tela, e cada resposta
   muda alguma coisa visível**. Pergunta que não muda nada é coleta de dado
   vestida de cuidado.

   E a régua que governa o que NÃO se pergunta está no código, junto das
   telas: idade de criança é proibida pela migração 011, por ordem dele.
   ========================================================================== */

.ob { display: grid; place-items: center; min-height: 72vh; }

/* A caixa é VIDRO, não papel — pedido dele em 13/08: "tem que ser liquid
   glass, ou seja, translúcido. Não tem que ter essa barra branca." O
   sólido vem primeiro e vale sozinho onde o vidro não existe, como na
   barra de baixo. */
.ob-caixa {
  max-width: 540px; width: 100%; text-align: center;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 18px;
  padding: 32px 30px 28px;
  box-shadow: var(--sombra, 0 1px 3px rgba(62,42,20,.08));
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ob-caixa {
    background: rgba(253, 250, 244, .62);
    -webkit-backdrop-filter: blur(22px) saturate(1.7);
    backdrop-filter: blur(22px) saturate(1.7);
    border: 0;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .8),
      0 12px 34px rgba(62, 42, 20, .14);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .ob-caixa {
    background: var(--superficie);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--borda);
  }
}

/* Centralizada — correção dele: "a logo do Cordeirinho deve estar
   centralizada na página". `img` é inline, mas o herdado pode mudar;
   block + margin auto centraliza por construção, não por sorte. */
.ob-marca { display: block; height: 52px; width: auto; margin: 0 auto 16px; }

.ob h1 {
  font-family: var(--fonte-display);
  font-size: clamp(24px, 4.6vw, 31px);
  line-height: 1.14;
  margin: 0 0 12px;
}

.ob-texto {
  font-size: 15.5px; line-height: 1.62; color: var(--texto-medio);
  margin: 0 auto 14px; max-width: 44ch;
}

.ob-assina {
  font-family: var(--fonte-display); font-style: italic;
  font-size: 14.5px; color: var(--texto-suave); margin: 18px 0;
}

/* ------------------------------------------------------------- a régua

   "Passo 2 de 4" não é enfeite: onboarding sem fim visível é onboarding
   que a pessoa abandona, porque ela não sabe se está no começo ou a três
   telas do fim. */

.ob-regua { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.ob-regua-trilho {
  flex: 1; height: 5px; border-radius: 999px;
  background: var(--bege); overflow: hidden;
}
.ob-regua-preenche {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--dourado), var(--ambar));
  transition: width .3s var(--suave, ease);
}
.ob-regua-texto {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--texto-suave); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .ob-regua-preenche { transition: none; } }

/* ------------------------------------------------------------ as opções */

.ob-opcoes { display: grid; gap: 10px; margin: 20px 0 6px; }
/* A GRADE DO PASSO 3 NASCE MAIS ABAIXO, DE PROPÓSITO — 🔴3 da Rute, 15/08/2026.

   Ela mediu a 390px, e eu reproduzi antes de mexer:

       passo 2, cartão "Maria" .......... centro (111, 343)
       passo 3, porta "Histórias curtas" . centro (112, 350)
       distância: 7px

   Sete pixels. Quem escolhe a primeira criança e toca na primeira porta —
   o caminho mais provável de todos depois de pagar — encontra a porta
   **exatamente onde o dedo acabou de encostar**. A trava de dedo faz o que
   foi projetada para fazer e engole o toque por 1,5 segundo, 100% das vezes.

   E o pior: aos 600ms o CSS já soltou o botão. Ele recebe `:active`, afunda
   sob o dedo, parece que respondeu — e o manipulador desiste em silêncio.
   Pior que um botão desabilitado, porque o desabilitado avisa.

   A trava CONTINUA (ela protege contra controles que ainda nem existem, e
   correção pontual não substitui correção de classe). O que sai é a
   COINCIDÊNCIA: a grade desce, e nenhuma porta nasce sob o cartão de perfil.
   `testes/plataforma.mjs` mede as distâncias e reprova se elas voltarem. */
.ob-opcoes--portas { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-top: 64px; }
.ob-opcoes--momentos { grid-template-columns: 1fr; }

.ob-opcao {
  font: inherit; cursor: pointer; text-align: left;
  background: var(--superficie); color: var(--texto-forte);
  border: 1.5px solid var(--borda);
  border-radius: 14px; padding: 15px 16px;
  display: flex; align-items: center; gap: 12px;
  min-height: 60px;
  transition: border-color var(--t-rapido, .15s) var(--suave, ease),
              background-color var(--t-rapido, .15s) var(--suave, ease);
}
.ob-opcao:hover { border-color: var(--cat-cor, var(--ambar)); background: var(--bege); }
.ob-opcao:focus-visible { outline: 2px solid var(--ambar-botao); outline-offset: 2px; }

.ob-opcoes--portas .ob-opcao { flex-direction: column; text-align: center; gap: 7px; padding: 18px 12px; }

/* O cartão com ARTE: a capa preenche, e o nome mora numa faixa de vidro na
   base. Ele reprovou o bloco branco com emoji; a capa é quem apresenta a
   porta agora — e a cor da categoria vira o fundo de reserva enquanto a
   imagem carrega (ou se ela faltar). */
.ob-opcao--arte {
  position: relative; overflow: hidden; padding: 0;
  /* 4/3 e não 16/10: com o cartão mais baixo, a faixa de vidro comia
     quase metade da arte quando o nome quebrava em duas linhas
     ("Atividades para imprimir"). Mais altura devolve a imagem. */
  aspect-ratio: 4 / 3;
  background: var(--cat-cor, var(--bege));
  border: 0;
  display: block;
}
.ob-opcao--arte:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(62,42,20,.22); }
.ob-opcao--arte { transition: transform var(--t-rapido, .15s) var(--suave, ease), box-shadow var(--t-rapido, .15s) var(--suave, ease); }
@media (prefers-reduced-motion: reduce) { .ob-opcao--arte { transition: none; } .ob-opcao--arte:hover { transform: none; } }

.ob-arte {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* A faixa de vidro que segura o nome — o liquid glass que ele pediu. */
.ob-vidro {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px 11px;
  font-size: 13.5px; line-height: 1.25; font-weight: 800; color: var(--marrom, #5C3E20);
  background: rgba(253, 248, 239, .68);
  border-top: 1px solid rgba(255, 255, 255, .75);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ob-vidro {
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    background: rgba(253, 248, 239, .55);
  }
}

.ob-vidro--linha { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.ob-vidro--linha b { font-size: 15px; }
.ob-vidro--linha span { font-size: 12.5px; font-weight: 600; opacity: .85; }

.ob-opcoes--momentos .ob-opcao--arte { aspect-ratio: 16 / 5.5; }

/* A saída. Formulário sem saída não é conversa, é pedágio — e pedágio logo
   depois do pagamento é o pior lugar possível para um. */
.ob-pular {
  display: block; width: 100%; margin-top: 14px; padding: 10px;
  border: 0; background: transparent; font: inherit; font-size: 13.5px;
  color: var(--texto-medio); text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer; min-height: 44px;
}
.ob-pular:hover { color: var(--texto-forte); }

/* O formulário de perfil, dentro do onboarding, herda o alinhamento da
   caixa mas volta a ser alinhado à esquerda: campo centralizado é campo
   difícil de preencher. */
.ob-caixa #form-perfil { text-align: left; margin-top: 18px; }

@media (max-width: 480px) {
  .ob-caixa { padding: 24px 18px 22px; border: 0; box-shadow: none; background: transparent; }
  .ob-opcoes--portas { grid-template-columns: 1fr 1fr; }
}

/* Achado 🟢13 da Rute: com `display:flex` no `<ul>`, os `<li>` viram itens
   de flex e o navegador descarta o marcador — a lista virava texto
   indentado. O respiro entre linhas volta pelo `margin`, que não custa o
   ponto. */
.conta-lista { margin: 0 0 14px; padding-left: 20px; list-style: disc; }
.conta-lista li { font-size: 13.5px; color: var(--texto-medio); }
.conta-lista li + li { margin-top: 5px; }

.conta-recado { font-size: 13px; color: var(--texto-medio); margin: 10px 0 0; }

/* Achado 🟢12: o recado de erro tinha a mesma cor e o mesmo tamanho do
   texto de apoio logo acima. Contraste passava, mas nada dizia "deu
   errado". Cor de alerta + um sinal antes do texto — dois canais, não só
   a cor. */
.conta-recado--erro {
  color: var(--erro, #a3341f);
  font-weight: 600;
  display: flex; align-items: flex-start; gap: 7px;
}
.conta-recado--erro::before {
  content: "!";
  flex: none;
  width: 17px; height: 17px; margin-top: 1px;
  border-radius: 50%;
  background: var(--erro, #a3341f); color: #fff;
  font-size: 12px; line-height: 17px; text-align: center; font-weight: 700;
}

/* ==========================================================================
   O onboarding sozinho na tela — o corte que a Rute propôs em 13/08/2026
   ==========================================================================
   Durante os 4 passos, o cabeçalho e a barra de baixo somem. São sete alvos
   competindo com a única pergunta da tela, e um deles era a saída silenciosa
   que não marcava a acolhida como vista — a família reencontrava a mesma
   recepção para sempre.

   Custo em segurança: ZERO. Nenhum desses controles é proteção: não há
   sessão, senha nem portão envolvido. A única perda é a saída de emergência,
   e ela volta melhor — visível, nomeada ("Agora não") e marcando.

   Peso de seletor de propósito: `.nav-inferior { display: block }` reaparece
   dentro de três media queries, e uma regra fraca perderia para elas. */
body.so-onboarding .topo,
body.so-onboarding .nav-inferior { display: none !important; }

/* 🔴2 da quarta revisão da Rute, e é o mesmo princípio do corte, num lugar
   que eu não tinha visto: o convite de instalar o aplicativo é `fixed` e se
   ancora acima da barra de baixo. A acolhida NÃO tem barra de baixo — então
   ele pousa em cima da grade de portas.

   Ela mediu a 390px: "Atividades para imprimir" com **0% da área
   respondendo ao toque**. Os quatro cantos do cartão caíam no convite. Uma
   das sete portas simplesmente não existia para quem usa celular.

   Convite de instalar durante uma conversa de quatro perguntas é a mesma
   fricção que o corte tirou — e aqui ele não competia: ele tapava. */
body.so-onboarding .convite-app { display: none !important; }
body.so-onboarding .ob { min-height: 92vh; }

/* A trava de dedo — achado 🔴1. Meio segundo em que o passo recém-pintado
   não aceita ponteiro, para que o segundo toque de um duplo-toque não caia
   num cartão que apareceu embaixo do dedo. Só o ponteiro: quem usa teclado
   não é travado aqui. */
.ob-travado { pointer-events: none; }

/* O contador de caracteres do nome — achado 🟡8. Discreto, ao lado do
   rótulo, e só aparece perto do limite. */
.campo-conta {
  float: right;
  font-size: 12px; font-weight: 500;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

/* Achado 🟢14: o campo de busca do topo era a única parada do Tab sem anel
   de foco, nas três larguras.

   Na segunda passagem ela mediu o anel que eu tinha acabado de criar:
   `--dourado` #F4D58D sobre o creme dá **1,3:1**, e o mínimo é 3:1. O anel
   existia e não se via — pior que não ter, porque parecia resolvido.
   `--ambar-botao` #9C5A1E dá 4,92:1. */
.busca-topo:focus-within {
  border-color: var(--ambar-botao);
  outline: 2px solid var(--ambar-botao);
  outline-offset: 2px;
}

/* 🟢8: `.pular-conteudo` é a PRIMEIRA parada do Tab de toda tela, e fica
   escondida em 1×1px fora da tela. Tem anel, e ninguém o vê — quem navega
   por teclado começa a jornada num alvo invisível. Ao receber foco, ela
   aparece. */
.pular-conteudo:focus,
.pular-conteudo:focus-visible {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  width: auto; height: auto; clip: auto; clip-path: none;
  /* o `.sr-only` esconde por SEIS propriedades; desfazer três deixaria a
     caixa de 1px por baixo do texto */
  margin: 0; overflow: visible;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--superficie); color: var(--ambar-botao);
  font-weight: 800; text-decoration: underline;
  outline: 2px solid var(--ambar-botao); outline-offset: 2px;
  box-shadow: var(--s-md);
}

/* ==========================================================================
   🟡7 — os alvos pequenos que a Rute inventariou fora do onboarding
   ==========================================================================
   Ela mediu, na segunda passagem: `.avatar` 38×38 em toda tela, o coração
   "Salvar" 32×34 vinte e sete vezes na home, e "Ver todos" com 19,2px de
   altura em sete prateleiras. Dentro dos 4 passos: zero.

   UMA RESSALVA À MEDIÇÃO DELA, e ela importa: o coração **já** tinha área de
   toque de 44px desde 08/08 (regra logo acima, com teste próprio que mede
   `elementFromPoint`, não o retângulo). O `getBoundingClientRect` devolve o
   DESENHO, não quem atende o dedo — e por isso o coração aparece na lista
   sem ser defeito. Minha primeira tentativa de "corrigir" duplicou a regra e
   REPROVOU o teste que já existia. Ficam só os dois que faltavam mesmo.

   A correção não cresce o desenho — cresce a área que aceita o toque, com um
   pseudo-elemento centrado. Crescer o avatar de 38 para 44 somaria 6px numa
   fileira de topo que já transbordou uma vez a 390px, e trocar um defeito
   por outro não é conserto. */
.avatar, .trilha-topo a, .migalhas a, .topo-marca { position: relative; }

.avatar::after,
.trilha-topo a::after,
.migalhas a::after,
.topo-marca::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}

/* Gerenciar perfis: o campo de nome (184×31,6) e o seletor de desenho
   (118×26) são onde a família corrige o nome escrito errado. */
.perfil-nome-campo, .perfil-avatar-campo { min-height: 44px; }

/* Os dois últimos da lista dela, medidos na terceira revisão: as migalhas de
   `#/conteudo` ("Explorar", "Devocionais") com 16px de altura, e a marca do
   topo com 30px a 390 — e a marca é o caminho de volta para a home. */
.migalhas a::after { width: auto; min-width: 100%; height: 44px; }
.topo-marca::after { width: auto; min-width: 100%; height: 44px; }

/* Achado 🟢16: no zoom de 200% a 390px os rótulos da barra de baixo se
   encostavam ("Início Explorar") e "Conta" tocava a borda. */
@media (max-width: 480px) {
  .nav-inferior ul { gap: 2px; padding-inline: 4px; }
  .nav-inferior a { padding-inline: 2px; }
  .nav-inferior a span:not(.nav-badge):not(.nav-bolha) { max-width: 100%; }
}