/* ═══════════════════════════════════════════════════════════════
   App "Cartas de Madalena" — Design System DS-2 "Templo à Luz de Velas"
   Cinzel (títulos) + EB Garamond (corpo) · noite/dourado · angular
   Mobile-first. Tokens em :root.
   ═══════════════════════════════════════════════════════════════ */

/* ── Fontes self-hosted (Variable Fonts, latin subset) ─────────
   Substitui Google Fonts CDN — resolve LGPD (sem IP→Google),
   CSP estrito (sem 'fonts.googleapis.com' nem 'fonts.gstatic.com'),
   perf (sem fetch externo) e disponibilidade (sem terceiro).
   Variable Fonts cobrem a faixa completa de pesos num único arquivo.
   ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/cinzel-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/eb-garamond-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/eb-garamond-variable-italic.woff2') format('woff2');
}

:root {
  /* Paleta DS-2 (PLANO-DE-ACAO §3) */
  --noite:        #0B0706;
  --noite-2:      #14100E;
  --noite-3:      #1E1814;
  --dourado:      #CDA85E;
  --dourado-claro:#E8C879;
  --dourado-fosco:#A07C3A;
  --bordo:        #5C1A2B;
  --bordo-luz:    #C7415F;  /* peso semântico legível em fundo escuro (~4.1:1) — usado em .carta-num--peso (cartas safe_for_ads:false). Mesma família simbólica do bordô, mais clara pra passar WCAG AA em texto grande. */
  --purpura:      #3A1530;
  --pergaminho:   #F0E6D2;
  --pergaminho-2: #C9BCA2;

  /* Tipografia */
  --font-titulo: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-corpo:  'EB Garamond', Georgia, serif;

  /* Forma — revisão 15/09 pra bater com os mockups da Rosiane (12/09): botão
     é pílula completa, card é só levemente arredondado, não pílula também.
     --raio era 2px ("angular" de propósito, decisão antiga) — os mockups
     mostram cantos suaves em tudo, mas em intensidades diferentes por
     componente. Ainda não mexi em telas inteiras (Escola/Ciclos/Cartas
     seguem travados até a Rosiane responder os 4 pontos em aberto). */
  --raio: 14px;
  --raio-pilula: 999px;
  /* Escala de espaçamento formalizada (2026-07-08) — usar em novos componentes */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --borda-ouro: 1px solid var(--dourado-fosco);
  --sombra: 0 8px 40px rgba(0,0,0,.55);
  --max: 480px; /* largura de leitura mobile-first / altar centralizado */

  --shadow-ouro: 0 0 0 1px rgba(205,168,94,.25), 0 0 24px rgba(205,168,94,.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background:
    radial-gradient(120% 80% at 50% 0%, var(--noite-2) 0%, var(--noite) 60%) fixed,
    var(--noite);
  color: var(--pergaminho);
  font-family: var(--font-corpo);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* brilho dourado sutil de fundo (sem JS) */
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(40% 30% at 50% 12%, rgba(205,168,94,.10), transparent 70%),
    radial-gradient(30% 25% at 80% 80%, rgba(92,26,43,.18), transparent 70%);
  pointer-events: none; z-index: 0;
}

/* ── Tipografia ────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--font-titulo);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--dourado-claro);
  line-height: 1.2;
}
h1 { font-size: 1.7rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase; }

p { margin: 0 0 1rem; }
a { color: var(--dourado-claro); text-decoration: none; }
em { color: var(--pergaminho-2); }
small { color: var(--pergaminho-2); font-size: .82rem; }

.eyebrow {
  font-family: var(--font-titulo);
  font-size: .82rem; /* 13px mín. — regra do projeto (era .72rem/11.5px) */
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--dourado-fosco);
}

/* font-variant-emoji: text força renderização text em vez de colored emoji
   (Chrome 132+, Safari 16+ — fix iOS pra ✦ ❦ ☾ viraram coloridos) */
.serif-ornament, .verso-ornamento, .badge-free, .ribbon {
  font-variant-emoji: text;
}
.serif-ornament { color: var(--dourado); opacity: .6; letter-spacing: .4em; }

/* ── Layout / shell ────────────────────────────────────────── */
#app, .screen {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--max);
  margin: 0 auto;
  padding: 24px 22px 96px; /* espaço pra tab bar */
  min-height: 100dvh;
}

.center { text-align: center; }
.stack > * + * { margin-top: 16px; }
.muted { color: var(--pergaminho-2); }
.hidden { display: none !important; }

/* topo */
.topbar {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 8px 0 22px;
}
.topbar .mark {
  width: 30px; height: 30px; flex: none;
}
.topbar .brand {
  font-family: var(--font-titulo); font-size: .9rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--dourado);
}

/* divisor ornamental */
.divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--dourado-fosco); margin: 22px 0;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--dourado-fosco), transparent);
}

/* ── Cartões (moldura dourada, angular) ────────────────────── */
.card {
  background: linear-gradient(180deg, var(--noite-3), var(--noite-2));
  border: var(--borda-ouro);
  border-radius: var(--raio);
  padding: 22px;
  box-shadow: var(--shadow-ouro);
}
.card--altar { text-align: center; }

/* carta de baralho (placeholder visual da carta sorteada) */
.tarot {
  aspect-ratio: 3 / 5;
  border: 1px solid var(--dourado);
  border-radius: var(--raio);
  background:
    repeating-linear-gradient(45deg, rgba(205,168,94,.05) 0 6px, transparent 6px 12px),
    linear-gradient(180deg, var(--purpura), var(--noite));
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.tarot::after {
  content: ""; position: absolute; inset: 8px;
  border: 1px solid rgba(205,168,94,.4);
}
.tarot .num {
  font-family: var(--font-titulo); font-size: 2.4rem; color: var(--dourado-claro);
}

/* ── Carta do dia (flip 3D) ────────────────────────────────── */
.flip { perspective: 1200px; max-width: 200px; margin: 0 auto 18px; }
.flip-inner {
  position: relative; width: 100%; aspect-ratio: 3 / 5;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.flip.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 16px; text-align: center;
  border: 1px solid var(--dourado); border-radius: var(--raio);
}
.flip-front {
  background:
    url('/assets/verso-card.webp') center/cover no-repeat,
    linear-gradient(180deg, var(--purpura), var(--noite));
  padding: 0;
}
/* moldura ::after preservada como reforço sutil sobre o SVG */
.flip-front::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(205,168,94,.25); pointer-events: none; }
/* Ornamento ✦ inline escondido — o SVG carrega o ornamento completo agora */
.verso-ornamento { display: none; }
.flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(180deg, var(--noite-3), var(--noite-2));
}
/* Variante com arte real (img preenche a carta inteira). Fallback tipográfico
   continua quando arte_url=="" (rascunho até a Rosiane mandar arte). */
.flip-back--com-arte { padding: 0; background: var(--noite); overflow: hidden; }
.flip-back--com-arte .carta-arte {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block; border-radius: var(--raio);
}
.carta-num { font-family: var(--font-titulo); font-size: 2.6rem; line-height: 1; color: var(--dourado-claro); }
/* Onda 7: numerologia em bordô-luz para as 6 cartas safe_for_ads:false
   (Caixão, Foice, Chicote, Montanha, Ratos, Cruz). Comunica peso semântico
   sem alarmar — bordô é cor de templo/sangue/profundidade na Tsara, não vermelho de perigo. */
.carta-num--peso { color: var(--bordo-luz); }
.carta-nome { font-family: var(--font-titulo); font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pergaminho); }
.carta-kw { font-size: .9rem; font-style: italic; color: var(--pergaminho-2); }
.carta-titulo { font-family: var(--font-titulo); font-size: 1.2rem; letter-spacing: .06em; color: var(--dourado-claro); }
.carta-kw-2 { font-style: italic; margin-top: 2px; }
.rascunho-nota { margin-top: 14px; opacity: .75; }
.leitura-texto { line-height: 1.75; }
.sintese { margin-top: 16px; text-align: center; font-family: var(--font-titulo); font-style: italic; letter-spacing: .04em; font-size: .98rem; color: var(--dourado-claro); }

/* ── Tiragem multi-carta (S5) ───────────────────────────────── */
.tiragem-desc { max-width: 36ch; margin: 0 auto 22px; line-height: 1.6; font-size: .95rem; }
.tiragem-cartas { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 12px; margin-bottom: 8px; }
.tiragem-carta { display: flex; flex-direction: column; align-items: center; width: 92px; }
.tiragem-carta .flip { width: 92px; max-width: 92px; margin: 0; }
.tiragem-pos {
  font-family: var(--font-titulo); font-size: .82rem; /* 13px mín. — regra do projeto (era .72rem/11.5px) */ letter-spacing: .05em;
  text-transform: uppercase; color: var(--dourado-claro); text-align: center;
  min-height: 2.4em; display: flex; align-items: center; justify-content: center; margin-bottom: 6px;
}
#acao { max-width: 320px; margin: 0 auto; }

/* ── Mesa Real (Grand Tableau) — grade 6×6 ──────────────────────── */
.mesa-nota { max-width: 42ch; margin: 0 auto 16px; line-height: 1.55; }
.mesa-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.mesa {
  display: grid;
  grid-template-columns: 64px repeat(6, minmax(0, 1fr));
  gap: 5px 4px;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}
.mesa-corner { grid-column: 1; }
.mesa-tempo {
  grid-column: span 2;
  font-family: var(--font-titulo); font-size: .82rem; /* 13px mín. — regra do projeto (era .64rem/10.2px); .mesa-scroll tem overflow-x:auto como reforço */ letter-spacing: .06em;
  text-transform: uppercase; color: var(--dourado-claro); text-align: center;
  padding-bottom: 2px;
}
.mesa-area-label {
  grid-column: 1;
  font-size: .82rem; /* 13px mín. — regra do projeto (era .5rem/8px); já tem overflow-wrap:anywhere pra acomodar */ letter-spacing: 0; text-transform: uppercase;
  color: var(--pergaminho-2); text-align: right; padding-right: 4px; line-height: 1.15;
  white-space: normal; overflow-wrap: anywhere;
}
.mesa-cel { padding: 0; margin: 0; border: none; background: none; cursor: default; }
.mesa-cel:not([disabled]) { cursor: pointer; }
.mesa-cel .flip { width: 100%; max-width: none; margin: 0; }
.mesa-cel .flip-face { padding: 4px; border-radius: 5px; }
.mesa-cel:not([disabled]):hover .flip-inner { outline: 1px solid var(--dourado); outline-offset: 1px; border-radius: 5px; }
.mesa-cel--central .flip-back { box-shadow: inset 0 0 0 1.5px var(--dourado); }
.carta-num--mesa { font-size: 1.15rem; }
.mesa-dica { max-width: 34ch; margin: 0 auto; }
.mesa-detalhe-card { max-width: 34ch; margin-left: auto; margin-right: auto; }
.mesa-detalhe-pos {
  text-align: center; text-transform: uppercase; letter-spacing: .06em;
  font-size: .82rem; /* 13px mín. — regra do projeto (era .68rem/10.9px) */ color: var(--dourado-claro); margin-bottom: 6px;
}
.mesa-detalhe-area { font-weight: 700; }

/* ── Botões ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-titulo); font-size: .82rem;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 15px 26px; width: 100%;
  border: none; border-radius: var(--raio-pilula); cursor: pointer;
  background: linear-gradient(180deg, var(--dourado-claro), var(--dourado));
  color: #2A1C08; font-weight: 700;
  transition: filter .2s ease, transform .1s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--dourado-claro); outline-offset: 2px; }

.btn--ghost {
  background: transparent; color: var(--dourado-claro);
  border: var(--borda-ouro);
}
.btn--link {
  /* Touch target ≥44px (WCAG 2.5.5 + iOS HIG). padding antigo 6px era ~28px. */
  background: none; border: none; width: auto; padding: 12px 8px; min-height: 44px;
  color: var(--pergaminho-2); text-transform: none; letter-spacing: normal;
  font-family: var(--font-corpo); font-size: .95rem;
}
.btn--link:focus-visible { outline: 2px solid var(--dourado-claro); outline-offset: 2px; }

/* Focus indicators DS-2 — sobrescreve outline azul-default do Chrome em
   elementos de navegação/cards/details. Mantém WCAG 2.4.7 + coerência DS-2. */
.spread:focus-visible,
.tabbar a:focus-visible,
.faq summary:focus-visible,
.btn--ghost:focus-visible {
  outline: 2px solid var(--dourado-claro);
  outline-offset: 2px;
}

/* ── Inputs ────────────────────────────────────────────────── */
label { display: block; font-size: .85rem; color: var(--pergaminho-2); margin: 0 0 6px; }
input[type="email"], input[type="text"], input[type="tel"] {
  width: 100%; padding: 14px 16px;
  background: var(--noite); color: var(--pergaminho);
  border: var(--borda-ouro); border-radius: var(--raio);
  font-family: var(--font-corpo); font-size: 1.05rem;
}
input:focus { outline: 2px solid var(--dourado-claro); outline-offset: 1px; border-color: var(--dourado-claro); box-shadow: var(--shadow-ouro); }

.note {
  font-size: .88rem; padding: 12px 14px;
  border-left: 2px solid var(--dourado-fosco);
  background: rgba(205,168,94,.05); color: var(--pergaminho-2);
}

/* Card de opt-in (WhatsApp D+3) — discreto, não modal full screen */
.consent-card {
  margin-top: 26px;
  border-left: 3px solid var(--dourado);
}
.consent-card h3 { font-family: var(--font-titulo); color: var(--dourado-claro); }
.consent-card input[type="tel"] {
  width: 100%; padding: 12px 14px;
  background: var(--noite); color: var(--pergaminho);
  border: var(--borda-ouro); border-radius: var(--raio);
  font-family: var(--font-corpo); font-size: 1rem;
}
.consent-card input[type="tel"]:focus {
  outline: 2px solid var(--dourado-claro); outline-offset: 1px;
  border-color: var(--dourado-claro); box-shadow: var(--shadow-ouro);
}

/* Checkbox row pra LGPD consent (login 18+, whatsapp opt-in) */
.check-row {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: .88rem; color: var(--pergaminho-2); line-height: 1.55;
  cursor: pointer; margin: 0; padding: 3px 0;
}
.check-row input[type="checkbox"] {
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  accent-color: var(--dourado); cursor: pointer;
}
.check-row a { color: var(--dourado-claro); text-decoration: underline; }
.note--erro { border-left-color: var(--bordo); background: rgba(92,26,43,.15); color: #E8B9C2; }
.note--ok   { border-left-color: var(--dourado); color: var(--pergaminho); }

/* ── Grade de tiragens ─────────────────────────────────────── */
.grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  grid-auto-rows: 1fr; /* cards da mesma linha com altura igual (títulos de tamanhos diferentes) */
}
/* Eyebrows de seção (Grátis vs Premium) — comunica escada de valor antes do clique */
.grid-section-title {
  margin: 8px 0 12px;
  color: var(--dourado);
}
.grid-section-title--premium {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(160, 124, 58, .25);
}
.spread {
  position: relative; text-align: left;
  padding: 16px; min-height: 104px;
  background: var(--noite-2); border: var(--borda-ouro); border-radius: var(--raio);
  cursor: pointer; transition: border-color .2s ease, transform .1s ease;
}
.spread:hover { border-color: var(--dourado); }
.spread:active { transform: translateY(1px); }
.spread .titulo { font-family: var(--font-titulo); color: var(--dourado-claro); font-size: .95rem; letter-spacing: .04em; text-wrap: balance; }
.spread .qtd { font-size: .82rem; /* 13px mín. — regra do projeto (era .8rem/12.8px) */ color: var(--pergaminho-2); }
.spread.is-locked { opacity: .72; }
.spread .lock {
  position: absolute; top: 12px; right: 12px; color: var(--dourado);
  display: inline-flex; align-items: center; justify-content: center;
}
.spread .lock svg { display: block; }
.badge-free {
  display: inline-block; margin-top: 8px; font-size: .82rem; /* 13px mín. — regra do projeto (era .68rem/10.9px); pílula auto-size, só engorda um pouco */ letter-spacing: .14em;
  text-transform: uppercase; color: #2A1C08; background: var(--dourado);
  padding: 2px 8px; border-radius: var(--raio-pilula);
}
.badge-atendimento {
  display: inline-block; margin-top: 8px; font-size: .82rem; /* 13px mín. — regra do projeto (era .68rem/10.9px); pílula auto-size, só engorda um pouco */ letter-spacing: .14em;
  text-transform: uppercase; color: var(--dourado-claro); background: transparent;
  border: 1px solid rgba(160, 124, 58, .5);
  padding: 2px 8px; border-radius: var(--raio-pilula);
}
.spread--convite { border-style: dashed; }
/* Rodapé de links legais/ajuda no Perfil */
.perfil-legais {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
}
.perfil-legais a {
  color: var(--dourado-claro); text-decoration: none; font-size: .82rem;
  border-bottom: 1px solid transparent;
}
.perfil-legais a:hover { border-bottom-color: var(--dourado); }

/* CTA da comunidade WhatsApp (tela Hoje, zona grátis — junto da Carta de Madalena) */
.comunidade-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  max-width: 320px; margin: 22px auto 0; padding: 12px 18px; min-height: 44px;
  border: 1px solid var(--dourado-fosco); border-radius: var(--raio-pilula);
  color: var(--dourado-claro); text-decoration: none; font-size: .9rem;
  letter-spacing: .02em; background: rgba(205,168,94,.06); text-align: center;
  transition: border-color .2s ease, background .2s ease;
}
.comunidade-cta:hover { border-color: var(--dourado); background: rgba(205,168,94,.12); }
.comunidade-ico { color: var(--dourado); }

/* Carta de Madalena semanal (tela Hoje, zona grátis, abaixo da carta do dia) */
.madalena-card {
  max-width: 340px; margin: 26px auto 0; padding: 18px 20px;
  border: 1px solid var(--dourado-fosco); border-radius: var(--raio);
  background: rgba(205,168,94,.06);
}
.madalena-texto {
  font-family: var(--font-corpo); font-style: italic; font-size: 1rem;
  line-height: 1.6; text-align: center; margin: 10px 0 0;
}
.madalena-fechamento {
  margin: 12px 0 0; font-size: .82rem; color: var(--dourado-claro);
  letter-spacing: .04em;
}
/* Selo de mensagem provisória (rascunho até a Rosiane mandar as dela).
   Discreto de propósito: sinaliza sem quebrar a experiência da leitura. */
.madalena-provisorio {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(205,168,94,.18);
  color: var(--pergaminho-2);
  opacity: .8;
}

/* ── Diário (placeholder "carta lacrada") ──────────────────── */
.diario-placeholder {
  margin-top: 24px;
  padding: 36px 22px 28px;
}
.envelope {
  position: relative;
  width: 120px; height: 80px;
  margin: 0 auto 28px;
  color: var(--dourado-fosco);
}
.envelope-svg { width: 100%; height: 100%; display: block; }
.envelope-selo {
  position: absolute;
  left: 50%; top: 30%;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px;
  background: radial-gradient(circle at 30% 30%, #7C2336, var(--bordo) 60%, #3A0E1A);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-titulo); font-weight: 900; font-size: 1.1rem;
  color: var(--dourado-claro);
  box-shadow: 0 1px 4px rgba(0,0,0,.4), inset 0 0 5px rgba(0,0,0,.4);
}
.diario-texto {
  font-family: var(--font-corpo); font-style: italic;
  font-size: 1.05rem; color: var(--pergaminho); line-height: 1.65;
  text-align: center; margin: 0 auto 22px;
  max-width: 28ch;
}
.diario-linha-tempo {
  display: flex; gap: 14px; justify-content: center;
  margin: 0 auto 16px;
  color: var(--dourado-fosco); letter-spacing: .3em;
  font-variant-emoji: text;
}
.diario-linha-tempo span { display: inline-block; font-size: 1.1rem; }
.diario-nota { text-align: center; margin: 0; }

/* ── Diário: lista de tiragens guardadas ─────────────────────── */
.diario-lista { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.diario-item {
  background: linear-gradient(180deg, var(--noite-3), var(--noite-2));
  border: var(--borda-ouro); border-radius: var(--raio);
  padding: 14px 16px;
}
.diario-item.is-fixada { border-color: var(--dourado); box-shadow: var(--shadow-ouro); }
.diario-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.diario-item-head { display: flex; flex-direction: column; gap: 2px; }
.diario-item-nome { font-family: var(--font-titulo); color: var(--dourado-claro); font-size: 1.05rem; }
.diario-item-data { font-size: .82rem; } /* 13px mín. — regra do projeto (era .8rem/12.8px) */
.diario-item-acoes { display: flex; gap: 6px; flex: none; }
.diario-btn-fixar, .diario-btn-remover {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--dourado-fosco); background: transparent;
  color: var(--dourado-fosco); cursor: pointer; line-height: 1;
  font-size: 1.05rem; display: flex; align-items: center; justify-content: center;
}
.diario-btn-fixar.is-on { color: var(--dourado-claro); border-color: var(--dourado); }
.diario-btn-remover { font-size: 1.3rem; }
.diario-btn-fixar:focus-visible, .diario-btn-remover:focus-visible {
  outline: 2px solid var(--dourado-claro); outline-offset: 2px;
}
.diario-item-cartas {
  margin: 10px 0 8px; font-size: .86rem; color: var(--pergaminho-2); line-height: 1.6;
}
.diario-item-cartas strong { color: var(--pergaminho); font-weight: 600; }
.diario-item-leitura { margin: 4px 0 10px; }
.diario-item-leitura > summary {
  cursor: pointer; color: var(--dourado-claro); font-size: .88rem;
  list-style: none; padding: 4px 0;
}
.diario-item-leitura > summary::-webkit-details-marker { display: none; }
.diario-item-leitura > summary::before { content: '❦ '; opacity: .7; }
.diario-item-leitura[open] > summary::before { content: '✦ '; }
.diario-nota-campo {
  width: 100%; resize: vertical; min-height: 44px;
  background: var(--noite); color: var(--pergaminho);
  border: 1px solid var(--dourado-fosco); border-radius: var(--raio);
  padding: 8px 10px; font-family: var(--font-corpo); font-size: .95rem;
}
.diario-nota-campo:focus {
  outline: 2px solid var(--dourado-claro); outline-offset: 1px; border-color: var(--dourado-claro);
}

/* ── Tab bar inferior ──────────────────────────────────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; justify-content: space-around;
  max-width: var(--max); margin: 0 auto;
  background: rgba(11,7,6,.92);
  backdrop-filter: blur(8px);
  border-top: var(--borda-ouro);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  /* 13px mín. — regra do projeto (era .62rem/9.9px). Em 360px (Android mais
     estreito) com Cinzel maiúsculo, "Jornadas" é o rótulo mais largo: precisa de
     68px e a aba dá 66px. Medido no navegador — faltavam exatamente 2px, então
     o padding lateral foi a zero em vez de deixar hifenizar em 2 linhas. O
     hyphens/overflow-wrap fica como rede de segurança pra telas ainda menores. */
  font-size: .82rem; letter-spacing: 0; text-transform: uppercase;
  color: var(--pergaminho-2); padding: 6px 0; flex: 1; min-width: 0;
  text-align: center; hyphens: auto; overflow-wrap: break-word; line-height: 1.05;
}
.tabbar a .ico {
  font-size: 1.15rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.tabbar a .ico svg { display: block; }
.tabbar a.is-active { color: var(--dourado-claro); }

/* ── Onboarding / splash ───────────────────────────────────── */
.hero {
  min-height: 78dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 18px;
}
.hero .mark-lg { width: 96px; height: 96px; }

/* ── Loader ────────────────────────────────────────────────── */
.spinner {
  width: 40px; height: 40px; margin: 24px auto;
  border: 3px solid rgba(205,168,94,.2); border-top-color: var(--dourado);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.fade-in { animation: fade .5s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PAYWALL (Sprint 4) — Premium + planos + garantia + FAQ + toast
   Mantém DS-2: angular, dourado sobre noite, Cinzel + EB Garamond.
   ═══════════════════════════════════════════════════════════════ */

.paywall { padding: 4px 0 24px; }

.paywall-headline { font-size: 1.9rem; margin: 14px 0 8px; }
.paywall-promessa {
  font-family: var(--font-corpo); font-style: italic;
  font-size: 1.1rem; color: var(--pergaminho);
  margin: 0 0 22px;
}
.paywall-trigger {
  margin: -6px 0 22px; color: var(--dourado-claro); opacity: .85;
}

/* Oferta 1:1 — sketch da leitura privada com a Sacerdotisa Rosiane (briefing 2026-06-09) */
.oferta-1on1 {
  margin: 28px 0 8px;
  padding: 22px 16px 6px;
  border-top: 1px solid rgba(205, 168, 94, 0.18);
  text-align: center;
}
.oferta-1on1 .eyebrow { font-size: .82rem; } /* 13px mín. — regra do projeto (era .78rem/12.5px) */

/* Value stack — lista vertical com check dourado */
.value-stack {
  list-style: none; margin: 8px 0 28px; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.value-stack li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px;
  background: rgba(205,168,94,.04);
  border-left: 2px solid var(--dourado-fosco);
}
.value-stack .vs-check {
  color: var(--dourado); font-size: 1.1rem; line-height: 1;
  flex: none; padding-top: 2px;
}
.value-stack li strong {
  display: block;
  font-family: var(--font-titulo);
  color: var(--dourado-claro);
  font-size: .98rem; letter-spacing: .04em;
  margin: 0 0 4px;
}
.value-stack li p {
  margin: 0; color: var(--pergaminho-2);
  font-size: .96rem; line-height: 1.55;
}

/* Grade de planos — 1 coluna mobile-first (largura travada em --max) */
.plano-grid {
  display: flex; flex-direction: column; gap: 16px;
  margin: 0 0 28px;
}

.plano {
  position: relative;
  background: linear-gradient(180deg, var(--noite-3), var(--noite-2));
  border: var(--borda-ouro); border-radius: var(--raio);
  padding: 28px 22px 22px;
  box-shadow: var(--shadow-ouro);
}
.plano--destaque {
  border-color: var(--dourado);
  box-shadow: 0 0 0 1px var(--dourado),
              0 0 32px rgba(205,168,94,.18),
              var(--sombra);
  padding-top: 36px;
}
.plano h2 {
  font-size: 1.4rem; margin: 0 0 14px;
  letter-spacing: .12em; text-transform: uppercase;
}

.ribbon {
  position: absolute; top: -1px; right: -1px;
  background: linear-gradient(180deg, var(--dourado-claro), var(--dourado));
  color: #2A1C08;
  font-family: var(--font-titulo); font-weight: 700;
  font-size: .82rem; /* 13px mín. — regra do projeto (era .68rem/10.9px) */ letter-spacing: .2em; text-transform: uppercase;
  padding: 6px 14px;
  border-left: 1px solid var(--dourado-fosco);
  border-bottom: 1px solid var(--dourado-fosco);
}

.preco-riscado { font-size: .88rem; color: var(--pergaminho-2); margin: 0 0 4px; }
.preco-riscado s { color: var(--pergaminho-2); opacity: .8; }

.preco {
  font-family: var(--font-titulo); font-size: 2.4rem;
  color: var(--dourado-claro); line-height: 1;
  margin: 0 0 4px; letter-spacing: .02em;
}
.preco-unit {
  font-family: var(--font-corpo); font-size: .95rem;
  color: var(--pergaminho-2); font-style: italic;
  letter-spacing: 0; margin-left: 4px;
}
.preco-equiv { margin: 0 0 10px; }
.preco-ancora {
  font-style: italic; color: var(--pergaminho);
  margin: 10px 0 18px;
  font-size: .98rem; line-height: 1.55;
}

.bonus {
  margin: 16px 0 18px; padding: 14px 16px;
  background: rgba(58,21,48,.35);
  border: 1px dashed var(--dourado-fosco);
}
.bonus-titulo {
  font-family: var(--font-titulo);
  color: var(--dourado-claro);
  font-size: .82rem; /* 13px mín. — regra do projeto (era .8rem/12.8px) */ letter-spacing: .18em;
  text-transform: uppercase; margin: 0 0 8px;
}
.bonus ul { list-style: none; padding: 0; margin: 0; }
.bonus li {
  font-size: .95rem; color: var(--pergaminho);
  padding: 3px 0 3px 18px; position: relative;
}
.bonus li::before {
  content: "✦"; position: absolute; left: 0;
  color: var(--dourado); opacity: .8;
}
.bonus-nota { margin: 10px 0 0; font-style: italic; }

.btn--anual { box-shadow: 0 0 24px rgba(205,168,94,.25); }
.trial-nota { margin: 10px 0 0; }

/* Garantia 7 dias */
.garantia {
  display: flex; align-items: flex-start; gap: 16px;
  margin: 0 0 28px; padding: 18px;
  background: rgba(205,168,94,.05);
  border: var(--borda-ouro);
  border-left: 3px solid var(--dourado);
}
.garantia-selo {
  flex: none; width: 58px; height: 58px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border: 2px solid var(--dourado);
  color: var(--dourado-claro);
  font-family: var(--font-titulo); font-size: 1.7rem; line-height: 1;
  background: var(--noite);
}
.garantia-selo small {
  font-size: .82rem; /* 13px mín. — regra do projeto (era .55rem/8.8px); testado visualmente, ainda cabe na caixa fixa 58x58 */ letter-spacing: .22em;
  text-transform: uppercase; color: var(--dourado-fosco);
  margin-top: 2px;
}
.garantia strong {
  display: block;
  font-family: var(--font-titulo);
  color: var(--dourado-claro);
  font-size: 1rem; letter-spacing: .03em;
  margin: 0 0 6px; font-weight: 600;
}
.garantia p { margin: 0; line-height: 1.55; }

/* FAQ */
.faq {
  margin: 0 0 22px;
  border: var(--borda-ouro);
  background: rgba(20,16,14,.6);
}
.faq summary {
  cursor: pointer; padding: 14px 16px;
  font-family: var(--font-titulo);
  letter-spacing: .14em; text-transform: uppercase;
  font-size: .82rem; color: var(--dourado-claro);
  list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "✦"; position: absolute; right: 16px;
  color: var(--dourado-fosco); transition: transform .2s ease;
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq-item {
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(160,124,58,.3);
}
.faq-p { margin: 0 0 6px; color: var(--pergaminho); }
.faq-r { margin: 0; line-height: 1.6; font-size: .95rem; }

.assinatura-tsara {
  font-family: var(--font-titulo); font-style: italic;
  font-size: 1.05rem; letter-spacing: .12em;
  color: var(--dourado-claro);
  margin: 24px 0 0;
}

/* Toast — feedback do checkout/portal sem config (não simula compra) */
.toast {
  position: fixed; left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: calc(var(--max) - 32px);
  width: calc(100% - 32px);
  z-index: 20;
  padding: 14px 18px;
  background: var(--noite-3);
  border: var(--borda-ouro);
  border-left: 3px solid var(--dourado);
  color: var(--pergaminho);
  font-size: .95rem; line-height: 1.5;
  box-shadow: var(--sombra);
  animation: toast-in .25s ease both;
}
.toast--off { animation: toast-out .5s ease both; }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translate(-50%, 12px); }
}

/* ═══════════════════════════════════════════════════════════════
   DEV / DEMO — visível só com DEV_MODE=1 no .env
   ═══════════════════════════════════════════════════════════════ */
.dev-badge {
  margin-left: 10px;
  padding: 3px 8px;
  font-family: var(--font-titulo);
  font-size: .82rem; /* 13px mín. — regra do projeto (era .58rem/9.3px) */
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--pergaminho);
  background: var(--bordo);
  border: 1px solid var(--dourado-fosco);
  font-weight: 700;
  vertical-align: middle;
}
.dev-card {
  margin-top: 18px;
  border-color: var(--bordo);
  background: linear-gradient(180deg, rgba(92,26,43,.20), var(--noite-2));
}
.dev-card .eyebrow { color: var(--dourado-claro); }
.dev-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.dev-actions .btn--ghost {
  width: auto;
  flex: 1 1 auto;
  padding: 10px 12px;
  font-size: .82rem; /* 13px mín. — regra do projeto (era .68rem/10.9px) */
  letter-spacing: .1em;
}

/* ═══════════════════════════════════════════════════════════════
   A4 (Onda 9) — classes utility + semantic
   Substitui style="..." inline em app.js / privacidade.html / termos.html
   Destrava remoção de 'unsafe-inline' do style-src CSP.
   ═══════════════════════════════════════════════════════════════ */

/* ── Legal pages (privacidade + termos) — antes era <style> inline ── */
main.legal { max-width: 720px; margin: 0 auto; padding: 40px 22px 80px; }
main.legal h1 { text-align: center; margin-bottom: 8px; font-size: 1.8rem; }
main.legal .eyebrow { text-align: center; margin-bottom: 28px; }
main.legal h2 {
  font-size: 1.1rem; margin: 32px 0 12px;
  letter-spacing: .08em; color: var(--dourado-claro);
  border-bottom: 1px solid var(--dourado-fosco);
  padding-bottom: 6px;
}
main.legal p, main.legal li {
  line-height: 1.75; font-size: 1rem; color: var(--pergaminho);
}
main.legal ul, main.legal ol { margin: 8px 0 8px 22px; }
main.legal li { margin-bottom: 6px; }
main.legal a { color: var(--dourado-claro); text-decoration: underline; }
main.legal .meta {
  color: var(--pergaminho-2); font-size: .88rem;
  text-align: center; margin-top: 28px; padding-top: 16px;
  border-top: 1px solid var(--noite-3);
}
main.legal .meta strong { color: var(--dourado-claro); }
.placeholder {
  color: var(--dourado-fosco); font-style: italic;
  border-bottom: 1px dashed var(--bordo);
}

/* ── Utility (genérico) ── */
.u-mw-34ch { max-width: 34ch; }
.u-mw-320 { max-width: 320px; }
.u-mw-340 { max-width: 340px; }
.u-mt-4  { margin-top: 4px; }
.u-mt-8  { margin-top: 8px; }
.u-mt-14 { margin-top: 14px; }
.u-mt-18 { margin-top: 18px; }
.u-mt-20 { margin-top: 20px; }
.u-mt-24 { margin-top: 24px; }
.u-mt-32 { margin-top: 32px; }
.u-mb-14 { margin-bottom: 14px; }
.u-mb-18 { margin-bottom: 18px; }
.u-mb-20 { margin-bottom: 20px; }
.u-mb-24 { margin-bottom: 24px; }
.u-pad-top-40 { padding-top: 40px; }
.u-pad-top-80 { padding-top: 80px; }

/* ── Semantic (componentes específicos) ── */
.onboarding-form { width: 100%; max-width: 320px; }
.login-form { width: 100%; max-width: 340px; }
.cta-stack { max-width: 320px; margin: 0 auto; }
.cta-stack-full { max-width: 320px; width: 100%; }
.btn-narrow { max-width: 240px; }
.btn-narrow-c { max-width: 240px; margin: 0 auto; }
.tarot-small { max-width: 120px; margin: 8px auto 20px; }
.spinner-paywall { margin: 80px auto; }
.hero-narrow { max-width: 34ch; margin: 0 auto 22px; }
.muted-narrow-stack { margin: 4px auto 14px; max-width: 34ch; }
.note-erro-lp { max-width: 340px; margin: 20px auto; }
.note-erro-block { max-width: 340px; margin: 0 auto 20px; }

/* ── Consent card (WhatsApp opt-in D+3) ── */
.consent-heading {
  margin: 8px 0 6px; font-size: 1.05rem;
  letter-spacing: .06em; text-transform: none;
}
.consent-desc { font-size: .95rem; }
.consent-form { margin-top: 14px; }
.consent-actions { display: flex; gap: 10px; }

/* ── Profile page ── */
.profile-row-edit {
  display: flex; gap: 10px;
  align-items: center; justify-content: space-between;
}
.profile-actions-top {
  display: flex; gap: 10px;
  flex-wrap: wrap; margin-top: 4px;
}
.profile-actions-bottom {
  display: flex; flex-direction: column;
  gap: 8px; margin-top: 20px;
}

/* ── Cores semânticas ── */
.c-dourado-claro { color: var(--dourado-claro); }
.c-bordo-underline { color: var(--bordo); text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   Pacote 🅺 — Acessibilidade + UX polish
   ═══════════════════════════════════════════════════════════════ */

/* ── Skip-link (WCAG 2.4.1 Bypass Blocks) ──
   Escondido até receber :focus (acessível via primeiro Tab) */
.skip-link {
  position: absolute;
  top: -100px; left: 0;
  background: var(--dourado);
  color: var(--noite);
  padding: 12px 18px;
  z-index: 999;
  font-family: var(--font-titulo);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .85rem;
  text-decoration: none;
  border: 2px solid var(--dourado-fosco);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 2px solid var(--noite);
  outline-offset: 2px;
}

/* ── sr-only (screen-reader only · WCAG 1.3.1) ── */
.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;
}

/* ── Toast de SW update (Pacote 🅺) ──
   Aparece quando deploy novo é detectado · oferece reload manual */
.toast--update {
  background: var(--noite-3);
  border-left: 3px solid var(--dourado-claro);
  display: flex; align-items: center; gap: 12px;
}
.toast--update .btn--link {
  color: var(--dourado-claro);
  font-family: var(--font-titulo);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .82rem; /* 13px mín. — regra do projeto (era .8rem/12.8px) */
  padding: 4px 8px;
  min-height: auto;
}

/* ── Convites pros cursos e canais da Rosiane (2026-07-28) ──
   Aparecem DEPOIS da leitura, nunca antes — a leitura é o produto, o convite
   é o convite. Borda lateral em vez de card cheio pra não competir com a
   carta: peso visual menor que .card de propósito. */
.convite {
  border-left: 2px solid var(--dourado-fosco);
  background: linear-gradient(90deg, rgba(205,168,94,.06), transparent 70%);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  margin-top: var(--space-5);
  border-radius: 0 var(--raio) var(--raio) 0;
}
.convite-frase {
  font-family: var(--font-titulo);
  color: var(--dourado-claro);
  font-size: 1.02rem;
  line-height: 1.4;
}
.convite-texto {
  color: var(--pergaminho-2);
  font-size: .95rem;
  margin-top: var(--space-2);
}
.convite-produto {
  font-family: var(--font-titulo);
  color: var(--pergaminho);
  font-size: .95rem;
  letter-spacing: .04em;
  margin-top: var(--space-3);
}
.convite-preco {
  color: var(--dourado);
  white-space: nowrap;
}
.convite-cta {
  display: inline-block;
  margin-top: var(--space-3);
  text-decoration: none;
}
.convite--canal { margin-top: var(--space-4); }

/* Opt-in da Carta de Madalena por e-mail (Perfil) */
.optin-madalena {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: .95rem;
  line-height: 1.5;
}
.optin-madalena input[type="checkbox"] {
  accent-color: var(--dourado);
  width: 18px; height: 18px;
  margin-top: 3px;
  flex-shrink: 0;
}

/* Vitrine dos 4 cursos — só no Perfil, onde a pessoa está explorando */
.caminhe { margin-top: var(--space-6); }
.caminhe-titulo {
  font-family: var(--font-titulo);
  font-size: 1.15rem;
  color: var(--dourado-claro);
  letter-spacing: .06em;
}
.caminhe-sub {
  font-size: .9rem;
  margin-top: var(--space-1);
  margin-bottom: var(--space-4);
}
.vitrine { display: flex; flex-direction: column; gap: var(--space-2); }
.vitrine-item {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: var(--borda-ouro);
  border-radius: var(--raio);
  background: var(--noite-2);
  text-decoration: none;
  color: inherit;
}
.vitrine-item:hover, .vitrine-item:focus-visible {
  background: var(--noite-3);
  border-color: var(--dourado);
}
.vitrine-nome {
  display: block;
  font-family: var(--font-titulo);
  color: var(--pergaminho);
  font-size: .95rem;
  letter-spacing: .04em;
}
.vitrine-resumo {
  display: block;
  color: var(--pergaminho-2);
  font-size: .88rem;
  line-height: 1.5;
  margin-top: var(--space-1);
}
.vitrine-preco {
  display: block;
  color: var(--dourado);
  font-family: var(--font-titulo);
  font-size: .9rem;
  margin-top: var(--space-2);
}


/* ── Entrada do templo (portal + ritual diário · Fase 2 Templo, 2026-08-05) ──
   Cena = FOTOGRAFIAS (assets/templo/*.webp, geradas 05/08 a partir de
   PROMPTS-IMAGENS-TEMPLO.md). A porta faz crossfade fechada → mão → aberta.
   Sem foto (respiração), o fundo escuro padrão segura a tela. */
.portal { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100dvh; }
.portal-eyebrow { margin-bottom: var(--space-2); }
.portal-titulo { margin-top: var(--space-2); }
.portal-sub { max-width: 34ch; margin: var(--space-2) auto 0; }
.portal-corpo { margin-top: var(--space-5); }

/* Camadas fotográficas: cobrem a viewport, atrás do conteúdo */
.portal-camadas { position: fixed; inset: 0; z-index: 0; }
.portal-camada {
  position: absolute; inset: 0;
  background: center top / cover no-repeat;
  opacity: 0;
  transition: opacity .9s ease;
}
.portal-camada.is-visivel { opacity: 1; }
/* CSP: style-src 'self' sem unsafe-inline bloqueia style="" — as fotos moram AQUI */
.f-curso-iniciatico { background-image: url('/assets/templo/curso-iniciatico.webp'); }
.f-curso-avancado   { background-image: url('/assets/templo/curso-avancado.webp'); }
.f-curso-reiki      { background-image: url('/assets/templo/curso-reiki.webp'); }
.f-curso-velas      { background-image: url('/assets/templo/curso-velas.webp'); }
.f-porta-fechada { background-image: url('/assets/templo/porta-fechada.webp'); }
.f-porta-mao     { background-image: url('/assets/templo/porta-mao.webp'); }
.f-porta-aberta  { background-image: url('/assets/templo/porta-aberta.webp'); }
.f-vela          { background-image: url('/assets/templo/vela.webp'); }
.f-incenso       { background-image: url('/assets/templo/incenso.webp'); }
.f-agua          { background-image: url('/assets/templo/agua.webp'); }
.f-intencao      { background-image: url('/assets/templo/intencao.webp'); }
.f-fechamento    { background-image: url('/assets/templo/fechamento.webp'); }
/* feedback do toque (acender a vela, receber a água): a cena responde */
.portal-camada.is-pulso { animation: portal-pulso .9s ease; }
@keyframes portal-pulso {
  0%, 100% { filter: brightness(1); }
  45% { filter: brightness(1.35); }
}
/* véu de legibilidade: escurece de cima pra baixo, texto vive no terço inferior */
.portal-camadas::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(11,7,6,.30) 0%,
    rgba(11,7,6,.16) 34%,
    rgba(11,7,6,.62) 62%,
    rgba(11,7,6,.94) 86%,
    var(--noite) 100%);
}
.portal-conteudo { position: relative; z-index: 1; padding-bottom: var(--space-5); }
.portal--foto .portal-titulo { text-shadow: 0 2px 18px rgba(0,0,0,.8); }
@media (prefers-reduced-motion: reduce) {
  .portal-camada { transition: none; }
  .portal-camada.is-pulso { animation: none; }
}
.portal-pular { font-size: .82rem; color: var(--pergaminho-2); }

/* Sem foto (respiração): centraliza no vazio escuro */
.portal:not(.portal--foto) { justify-content: center; }

/* Respiração: círculo que cresce (inspira) e recolhe (solta) em 4s */
.portal-respira {
  width: 130px; height: 130px; margin: 0 auto var(--space-4);
  display: flex; align-items: center; justify-content: center;
}
.portal-respira-nucleo {
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,200,121,.85) 0%, rgba(205,168,94,.25) 60%, transparent 75%);
  box-shadow: 0 0 30px rgba(205,168,94,.35);
}
.portal-respira.is-respirando .portal-respira-nucleo {
  animation: portal-respira 8s ease-in-out infinite;
}
@keyframes portal-respira {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(2.4); }
}

/* Escolhas (incenso / intenção) + escrever intenção */
.portal-opcoes {
  display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center;
  max-width: 320px; margin: 0 auto;
}
.portal-opcoes .portal-opcao { min-width: 44%; }
.portal-escrever {
  display: flex; gap: var(--space-2); max-width: 320px;
  margin: var(--space-4) auto 0;
}
.portal-escrever input { flex: 1; min-width: 0; }
/* .btn global é width:100% (mobile-first) — dentro do flex esmagava o input */
.portal-escrever .btn, .portal-escrever .btn--ghost {
  width: auto; flex: 0 0 auto; padding-left: 18px; padding-right: 18px;
}
.portal-selo {
  font-size: 2rem; color: var(--dourado-claro); text-align: center;
  margin-bottom: var(--space-3); font-variant-emoji: text;
}
.portal-intencao-eco {
  font-family: var(--font-titulo); color: var(--dourado);
  letter-spacing: .08em; margin-top: var(--space-3);
}

/* Intenção entregue no ritual da manhã, ecoada na tela Hoje (portal → dia) */
.intencao-dia {
  font-size: .92rem;
  color: var(--pergaminho-2);
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
}
.intencao-dia strong { color: var(--dourado); font-weight: 600; }

/* ── Fotos nos cards de curso e no card da Madalena (lote 2, 2026-08-05) ──
   A foto entra como faixa no topo do item; o texto segue no corpo, legível. */
.vitrine-item { padding: 0; overflow: hidden; }
.vitrine-foto {
  display: block;
  aspect-ratio: 4 / 3;
  /* longhand de propósito: o shorthand `background:` zeraria o background-image
     das classes .f-curso-* (declaradas ANTES no arquivo) */
  background-color: var(--noite-3);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--dourado-fosco);
  position: relative;
}
/* escurece a base da foto pro nome não brigar com a imagem */
.vitrine-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11,7,6,.75) 100%);
}
.vitrine-corpo { display: block; padding: var(--space-3) var(--space-4) var(--space-4); }

/* Escola do Templo (Lote 3) — as 4 Salas, mesmo padrão de foto-topo da vitrine */
.grid-escola { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.sala {
  display: block; width: 100%; text-decoration: none; text-align: left;
  font: inherit; color: inherit; padding: 0; cursor: pointer;
  border: var(--borda-ouro); border-radius: var(--raio);
  background: var(--noite-2); overflow: hidden;
}
.sala:hover, .sala:focus-visible { border-color: var(--dourado); }
.sala-foto--detalhe { aspect-ratio: 16 / 10; border-radius: var(--raio); border-bottom: none; }
.sala-voltar { display: block; margin-bottom: 4px; }
.sala-inclui-lista { margin: var(--space-1) 0 0; padding-left: 1.2em; color: var(--pergaminho-2); font-size: .9rem; }
.sala-inclui-lista li { margin-top: 4px; }
.sala-foto {
  display: block; aspect-ratio: 4 / 3;
  background-color: var(--noite-3);
  background-position: center; background-size: cover; background-repeat: no-repeat;
  border-bottom: 1px solid var(--dourado-fosco);
  position: relative;
}
.sala-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11,7,6,.75) 100%);
}
.sala-corpo { display: block; padding: var(--space-3) var(--space-4) var(--space-4); }
.sala-simbolo { display: block; font-size: 1.4rem; }
.sala-nome {
  display: block; font-family: var(--font-titulo); color: var(--dourado-claro);
  font-size: 1.1rem; letter-spacing: .04em; margin-top: 2px;
}
.sala-subtitulo { display: block; font-size: .82rem; /* 13px mín. — regra do projeto (era .78rem/12.5px) */ color: var(--pergaminho-2); margin-top: 2px; }
.sala-porta { color: var(--pergaminho); font-size: .92rem; margin: var(--space-2) 0 0; }
.sala-resumo { color: var(--pergaminho-2); font-size: .85rem; margin: var(--space-1) 0 0; }
.sala-preco { display: block; color: var(--dourado); font-family: var(--font-titulo); margin-top: var(--space-2); }
.sala--em-breve { opacity: .8; }

/* Card da Carta de Madalena: a mentora como presença de fundo */
.madalena-card {
  position: relative;
  overflow: hidden;
  /* véu forte: a Madalena é PRESENÇA de fundo, o texto é o protagonista */
  background-image:
    linear-gradient(180deg, rgba(11,7,6,.86) 0%, rgba(11,7,6,.78) 40%, rgba(11,7,6,.90) 100%),
    url('/assets/templo/madalena.webp');
  background-size: cover;
  background-position: center 22%;
}

/* ── Calendário do Templo (2026-08-05) ──────────────────────────────
   Datas calculadas (js/lunar.js), não digitadas. */
.cal-lua { display: block; margin: 0 auto; }
.cal-hoje { text-align: center; }
.cal-fase-nome {
  font-family: var(--font-titulo);
  font-size: 1.15rem; color: var(--dourado-claro);
  letter-spacing: .05em; margin: var(--space-1) 0 var(--space-2);
}
.cal-item {
  display: block;
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(205,168,94,.14);
}
.cal-item:last-of-type { border-bottom: 0; }
.cal-item--destaque {
  border-left: 2px solid var(--dourado);
  padding-left: var(--space-4);
  background: linear-gradient(90deg, rgba(205,168,94,.06), transparent 70%);
}
.cal-item-topo { display: flex; align-items: center; gap: var(--space-3); }
.cal-item-topo .cal-lua { flex: 0 0 auto; margin: 0; }
.cal-ico {
  flex: 0 0 auto; width: 26px; text-align: center;
  color: var(--dourado); font-size: 1.1rem; font-variant-emoji: text;
}
.cal-ico--tradicao { color: var(--bordo-luz); }
.cal-nome {
  font-family: var(--font-titulo); font-size: 1rem;
  color: var(--pergaminho); letter-spacing: .04em; margin: 0;
}
.cal-quando { font-size: .85rem; color: var(--dourado-fosco); margin: 2px 0 0; }
.cal-texto {
  font-size: .92rem; color: var(--pergaminho-2);
  line-height: 1.6; margin: var(--space-2) 0 0;
}
.cal-nota { opacity: .75; }

/* Card "Próximo ritual" na tela Início — porta de entrada do calendário */
.proximo-ritual {
  display: block;
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--borda-ouro);
  border-radius: var(--raio);
  background: var(--noite-2);
  text-decoration: none;
}
.proximo-ritual:hover, .proximo-ritual:focus-visible { background: var(--noite-3); border-color: var(--dourado); }
.proximo-ritual .eyebrow { display: block; font-size: .82rem; } /* 13px mín. — regra do projeto (era .66rem/10.6px) */
.proximo-ritual-nome {
  display: block;
  font-family: var(--font-titulo); color: var(--pergaminho);
  font-size: .98rem; letter-spacing: .04em; margin-top: 2px;
}
.proximo-ritual-quando { display: block; font-size: .85rem; color: var(--dourado); margin-top: 2px; }

/* Estatísticas do Perfil (mockup: jornadas · dias de prática · guardadas) */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2); margin-bottom: var(--space-4);
}
.stat {
  text-align: center; padding: var(--space-3) var(--space-1);
  border: var(--borda-ouro); border-radius: var(--raio);
  background: var(--noite-2);
}
.stat-num {
  display: block; font-family: var(--font-titulo);
  font-size: 1.5rem; color: var(--dourado-claro); line-height: 1.1;
}
.stat-rot {
  display: block; font-size: .82rem; /* 13px mín. — regra do projeto (era .7rem/11.2px); frases com espaço, já quebram linha normalmente */ color: var(--pergaminho-2);
  margin-top: var(--space-1); line-height: 1.3;
}

/* Mestre do mês (Calendário 2026 da Rosiane) — card na Início, porta pro Calendário.
   Foto é conteúdo (<img>), não background: não precisa de classe .f-* nem toca CSP. */
.mestre-card {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); margin-top: var(--space-4);
  border: var(--borda-ouro); border-radius: var(--raio);
  background: var(--noite-2); text-decoration: none;
}
.mestre-foto {
  width: 62px; height: 62px; flex: 0 0 62px;
  object-fit: cover; border-radius: 50%;
  border: 1px solid var(--dourado-fosco);
}
.mestre-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mestre-nome {
  font-family: var(--font-titulo); color: var(--pergaminho);
  font-size: .98rem; letter-spacing: .04em;
}
.mestre-rege { font-size: .82rem; color: var(--pergaminho-2); line-height: 1.35; }

/* ── Jornadas (Lote 4) — trilhas guiadas de 7/21 dias ────────────── */
.f-jornada-abrir-caminhos { background-image: url('/assets/jornadas/abrir-caminhos.webp'); }
.f-jornada-libertacao     { background-image: url('/assets/jornadas/libertacao.webp'); }
.f-jornada-prosperidade   { background-image: url('/assets/jornadas/prosperidade.webp'); }
.f-jornada-amor-proprio   { background-image: url('/assets/jornadas/amor-proprio.webp'); }

.jornadas-lista { display: flex; flex-direction: column; gap: var(--space-3); }
.jornada-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--noite-2); border: var(--borda-ouro); border-radius: var(--raio);
  padding: 0; overflow: hidden; transition: border-color .2s ease, transform .1s ease;
}
.jornada-card:hover { border-color: var(--dourado); }
.jornada-card:active { transform: translateY(1px); }
.jornada-foto {
  display: block; aspect-ratio: 4 / 3;
  background-color: var(--noite-3);
  background-position: center; background-size: cover; background-repeat: no-repeat;
  border-bottom: 1px solid var(--dourado-fosco);
  position: relative;
}
.jornada-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11,7,6,.75) 100%);
}
.jornada-corpo { display: block; padding: var(--space-3) var(--space-3) var(--space-4); }
.jornada-nome {
  display: block; font-family: var(--font-titulo); color: var(--dourado-claro);
  font-size: 1rem; letter-spacing: .04em;
}
.jornada-resumo { display: block; font-size: .85rem; color: var(--pergaminho-2); line-height: 1.4; margin-top: 4px; }
.jornada-status { display: block; font-size: .82rem; /* 13px mín. — regra do projeto (era .78rem/12.5px) */ color: var(--dourado-fosco); margin-top: var(--space-2); }
.jornada-status--ok { color: var(--dourado-claro); }

.jornada-voltar { display: block; margin-bottom: 4px; }

.jornada-dias-lista { display: flex; flex-direction: column; gap: var(--space-2); }
.jornada-dia {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left;
  padding: 14px 16px; background: var(--noite-2); border: var(--borda-ouro); border-radius: var(--raio);
  cursor: pointer; transition: border-color .2s ease;
}
.jornada-dia:not([disabled]):hover { border-color: var(--dourado); }
.jornada-dia[disabled] { opacity: .55; cursor: not-allowed; }
.jornada-dia-num {
  flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-titulo); font-size: .85rem; color: var(--dourado-claro);
  border: 1px solid var(--dourado-fosco); border-radius: 50%;
}
.jornada-dia-info { flex: 1; min-width: 0; }
.jornada-dia-titulo { display: block; font-size: .92rem; color: var(--pergaminho); }
.jornada-dia-hint { display: block; font-size: .82rem; /* 13px mín. — regra do projeto (era .74rem/11.8px) */ color: var(--pergaminho-2); margin-top: 2px; }
.jornada-dia-icone { flex: none; color: var(--dourado); display: inline-flex; }
.jornada-dia--feito .jornada-dia-num { background: var(--dourado); color: #2A1C08; border-color: var(--dourado); }

.jornada-rotulo {
  font-family: var(--font-titulo); font-size: .82rem; /* 13px mín. — regra do projeto (era .72rem/11.5px) */ letter-spacing: .2em; text-transform: uppercase;
  color: var(--dourado-fosco); margin-bottom: 6px;
}
.jornada-texto { font-size: .98rem; line-height: 1.55; color: var(--pergaminho); margin: 0; }
.jornada-pergunta { font-style: italic; color: var(--pergaminho-2); }
.jornada-textarea {
  width: 100%; margin-top: 10px; padding: 12px 14px;
  background: var(--noite); color: var(--pergaminho);
  border: var(--borda-ouro); border-radius: var(--raio);
  font-family: var(--font-corpo); font-size: .98rem; line-height: 1.5; resize: vertical;
}
.jornada-textarea:focus { outline: 2px solid var(--dourado-claro); outline-offset: 1px; border-color: var(--dourado-claro); }

/* Ciclo da semana (Lote 2) — tema que rotaciona dentro do mês, card na Início. */
.ciclo-card {
  display: block;
  padding: var(--space-3);
  margin-top: var(--space-4);
  border: var(--borda-ouro);
  border-radius: var(--raio);
  background: var(--noite-2);
}
.ciclo-card .eyebrow { display: block; font-size: .82rem; } /* 13px mín. — regra do projeto (era .66rem/10.6px) */
.ciclo-nome {
  display: block;
  font-family: var(--font-titulo); color: var(--dourado-claro);
  font-size: .98rem; letter-spacing: .04em; margin-top: 2px;
}
.ciclo-desc {
  font-size: .85rem; color: var(--pergaminho-2); line-height: 1.4;
  margin: var(--space-1) 0 0;
}