/* ============================================================
   APP MAPA DO CATÓLICO — Design System
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Jost:wght@300;400;500;600;700&display=swap');

:root{
  /* Paleta */
  --azul-profundo: #0B1F3A;
  --azul-profundo-2: #122A4D;
  --azul-profundo-3: #1B3B6B;
  --dourado: #C9A227;
  --dourado-claro: #E4C766;
  --dourado-suave: rgba(201,162,39,.14);
  --creme: #FAF5EA;
  --creme-2: #F3EBDA;
  --branco: #FFFFFF;
  --texto: #16213A;
  --texto-suave: #5C6478;
  --texto-inverso: #F6F1E4;
  --linha: rgba(11,31,58,.10);
  --sombra: 0 10px 30px rgba(11,31,58,.10);
  --sombra-forte: 0 20px 45px rgba(11,31,58,.18);

  --fonte-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --fonte-corpo: 'Jost', 'Segoe UI', sans-serif;

  --raio: 18px;
  --raio-sm: 12px;
  --raio-lg: 28px;

  --header-h: 76px;
  --sidebar-w: 264px;
  --bottomnav-h: 68px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--fonte-corpo);
  color: var(--texto);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
h1,h2,h3,h4{
  font-family: var(--fonte-display);
  color: var(--azul-profundo);
  margin: 0 0 .4em;
  font-weight: 600;
  letter-spacing: .2px;
}
h1{ font-size: clamp(2.1rem, 3vw + 1rem, 3.4rem); line-height:1.08; }
h2{ font-size: clamp(1.6rem, 1.6vw + 1rem, 2.3rem); }
h3{ font-size: 1.35rem; }
p{ margin:0 0 1em; color: var(--texto-suave); }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; display:block; }
button{ font-family: inherit; cursor:pointer; }
input, select, textarea{ font-family: inherit; }

::selection{ background: var(--dourado-suave); }

/* Foco visível para acessibilidade */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--dourado);
  outline-offset: 3px;
}

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

.container{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--dourado); font-weight:600;
}
.eyebrow::before{ content:''; width:22px; height:1px; background: var(--dourado); }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .95rem; font-weight:600; letter-spacing:.2px;
  cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn-primario{
  background: linear-gradient(135deg, var(--dourado-claro), var(--dourado));
  color: var(--azul-profundo);
  box-shadow: 0 10px 24px rgba(201,162,39,.35);
}
.btn-primario:hover{ box-shadow: 0 14px 30px rgba(201,162,39,.45); transform: translateY(-1px); }
.btn-secundario{
  background: transparent;
  color: var(--creme);
  border-color: rgba(250,245,234,.4);
}
.btn-secundario:hover{ background: rgba(250,245,234,.1); border-color: var(--creme); }
.btn-outline{
  background: transparent;
  color: var(--azul-profundo);
  border-color: var(--linha);
}
.btn-outline:hover{ border-color: var(--dourado); color: var(--dourado); }
.btn-bloco{ width:100%; }
.btn-pequeno{ padding: 9px 18px; font-size:.82rem; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* ---------- Cards ---------- */
.card{
  background: var(--branco);
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  box-shadow: var(--sombra);
  padding: 24px;
}
.card-dourada{
  background: linear-gradient(160deg, var(--azul-profundo), var(--azul-profundo-3));
  color: var(--texto-inverso);
  border: 1px solid rgba(201,162,39,.35);
}
.card-dourada h2, .card-dourada h3{ color: var(--dourado-claro); }
.card-dourada p{ color: rgba(246,241,228,.78); }

/* ---------- Marca / logo ---------- */
.marca{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--fonte-display); font-weight:700; font-size:1.3rem;
  color: var(--azul-profundo);
}
.marca .marca-icone{
  width:36px; height:36px; border-radius:10px;
  background: linear-gradient(150deg, var(--azul-profundo), var(--azul-profundo-3));
  display:flex; align-items:center; justify-content:center;
  color: var(--dourado-claro); font-size:1.15rem; flex-shrink:0;
  box-shadow: inset 0 0 0 1px rgba(201,162,39,.4);
}
.marca span.destaque{ color: var(--dourado); }

/* ============================================================
   LOADER / TOASTS / ESTADOS
   ============================================================ */
.tela-carregando{
  position: fixed; inset:0; background: var(--azul-profundo);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px;
  z-index: 9999; transition: opacity .4s ease, visibility .4s ease;
}
.tela-carregando.escondida{ opacity:0; visibility:hidden; pointer-events:none; }
.rosario-loader{
  display:flex; gap:8px;
}
.rosario-loader span{
  width:10px; height:10px; border-radius:50%;
  background: var(--dourado);
  animation: contas 1.1s ease-in-out infinite;
}
.rosario-loader span:nth-child(2){ animation-delay:.12s; }
.rosario-loader span:nth-child(3){ animation-delay:.24s; }
.rosario-loader span:nth-child(4){ animation-delay:.36s; }
.rosario-loader span:nth-child(5){ animation-delay:.48s; }
@keyframes contas{
  0%,100%{ transform: translateY(0); opacity:.5; }
  50%{ transform: translateY(-8px); opacity:1; }
}
.tela-carregando p{ color: rgba(246,241,228,.7); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; }

.toast-wrap{
  position: fixed; top:16px; right:16px; z-index: 5000;
  display:flex; flex-direction:column; gap:10px;
  max-width: 340px;
}
.toast{
  background: var(--azul-profundo); color: var(--texto-inverso);
  padding: 14px 18px; border-radius: var(--raio-sm);
  box-shadow: var(--sombra-forte);
  font-size:.88rem; display:flex; align-items:center; gap:10px;
  border-left: 3px solid var(--dourado);
  animation: entra-toast .35s ease;
}
.toast.erro{ border-left-color:#D9603B; }
.toast.sucesso{ border-left-color:#6FA97A; }
@keyframes entra-toast{ from{ opacity:0; transform: translateX(16px); } to{ opacity:1; transform:none; } }

.estado-vazio{
  text-align:center; padding: 48px 20px; color: var(--texto-suave);
}
.estado-vazio .icone{ font-size:2.4rem; margin-bottom:10px; }

.erro-campo{
  color:#B4432A; font-size:.78rem; margin-top:6px; display:none;
}
.erro-campo.visivel{ display:block; }
.campo.invalido input{ border-color:#B4432A !important; }

/* ============================================================
   LANDING PAGE
   ============================================================ */
.header-site{
  position: sticky; top:0; z-index: 200;
  background: rgba(250,245,234,.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.header-site .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 78px;
}
.nav-site{ display:flex; align-items:center; gap:32px; }
.nav-site a{ font-size:.92rem; font-weight:500; color: var(--texto); transition:color .2s; }
.nav-site a:hover{ color: var(--dourado); }
.header-acoes{ display:flex; align-items:center; gap:14px; }

.hero{
  position:relative; overflow:hidden;
  background: radial-gradient(1100px 620px at 82% -10%, rgba(201,162,39,.16), transparent 60%),
              linear-gradient(180deg, var(--azul-profundo) 0%, var(--azul-profundo-2) 60%, #0d223f 100%);
  color: var(--texto-inverso);
  padding: 108px 0 130px;
}
.hero::after{
  content:'';
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(201,162,39,.35) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity:.10; pointer-events:none;
}
.hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns: 1.1fr .9fr; gap:56px; align-items:center;
}
.hero h1{ color: var(--texto-inverso); }
.hero h1 em{ color: var(--dourado-claro); font-style:normal; }
.hero .lead{ color: rgba(246,241,228,.8); font-size:1.08rem; max-width:520px; }
.hero-cta{ display:flex; gap:16px; align-items:center; margin-top: 30px; flex-wrap:wrap; }
.hero-nota{ font-size:.78rem; color: rgba(246,241,228,.55); margin-top:14px; }

.rosario-arte{
  position:relative; width: 100%; aspect-ratio: 1/1; max-width:420px; margin:0 auto;
}
.conta-orbita{
  position:absolute; inset:0; border-radius:50%;
  border: 1px dashed rgba(201,162,39,.35);
  animation: girar 60s linear infinite;
}
@keyframes girar{ to{ transform: rotate(360deg); } }
.conta{
  position:absolute; width:16px; height:16px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--dourado-claro), var(--dourado));
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
.cruz-central{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width:120px; height:120px; border-radius:50%;
  background: linear-gradient(160deg, var(--azul-profundo-3), var(--azul-profundo));
  border:1px solid rgba(201,162,39,.5);
  display:flex; align-items:center; justify-content:center;
  font-size:2.6rem; color: var(--dourado-claro);
  box-shadow: 0 0 0 10px rgba(201,162,39,.06), var(--sombra-forte);
}

.faixa{ padding: 96px 0; }
.faixa-titulo{ text-align:center; max-width:640px; margin:0 auto 56px; }
.faixa-titulo h2{ margin-bottom:12px; }

.grade-beneficios{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:22px;
}
.beneficio{
  padding: 30px 24px; text-align:center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.beneficio:hover{ transform: translateY(-6px); box-shadow: var(--sombra-forte); }
.beneficio .simbolo{
  width:56px; height:56px; border-radius:50%; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  background: var(--dourado-suave); font-size:1.5rem;
}
.beneficio h3{ font-size:1.15rem; margin-bottom:6px; }
.beneficio p{ font-size:.88rem; margin:0; }

.faixa-passos{ background: var(--branco); }
.grade-passos{
  display:grid; grid-template-columns: repeat(3,1fr); gap:26px; counter-reset: passo;
}
.passo{
  position:relative; padding: 34px 26px; border-radius: var(--raio);
  background: var(--creme); border: 1px solid var(--linha);
}
.passo .numero{
  font-family: var(--fonte-display); font-size:2.6rem; color: var(--dourado); line-height:1; margin-bottom:12px; display:block;
}

.faixa-escura{
  background: linear-gradient(180deg, var(--azul-profundo-2), var(--azul-profundo));
  color: var(--texto-inverso);
}
.faixa-escura .faixa-titulo h2{ color: var(--texto-inverso); }
.grade-depoimentos{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.depoimento{
  background: rgba(250,245,234,.05); border:1px solid rgba(201,162,39,.25);
  border-radius: var(--raio); padding:26px;
}
.depoimento p{ color: rgba(246,241,228,.85); font-style: italic; }
.depoimento .autor{ display:flex; align-items:center; gap:10px; margin-top:16px; font-style:normal; }
.avatar-inicial{
  width:38px; height:38px; border-radius:50%; background: var(--dourado); color: var(--azul-profundo);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-family: var(--fonte-display); font-size:1.1rem;
}
.autor strong{ display:block; color: var(--texto-inverso); font-size:.9rem; }
.autor span{ font-size:.76rem; color: rgba(246,241,228,.55); }

.faq-lista{ max-width: 760px; margin: 0 auto; }
.faq-item{
  border-bottom: 1px solid var(--linha); padding: 18px 0;
}
.faq-pergunta{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  cursor:pointer; font-weight:600; font-size:1rem; color: var(--azul-profundo);
}
.faq-pergunta .mais{ color: var(--dourado); font-size:1.3rem; transition: transform .25s; flex-shrink:0; }
.faq-item.aberto .mais{ transform: rotate(45deg); }
.faq-resposta{
  max-height:0; overflow:hidden; transition: max-height .3s ease;
  font-size:.9rem; color: var(--texto-suave);
}
.faq-item.aberto .faq-resposta{ max-height: 240px; margin-top:10px; }

.faixa-cta-final{
  text-align:center; background: var(--creme-2);
}
.footer-site{
  background: var(--azul-profundo); color: rgba(246,241,228,.6); padding: 46px 0 26px; font-size:.84rem;
}
.footer-site .container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-site .marca{ color: var(--texto-inverso); }
.footer-site .marca .destaque{ color: var(--dourado); }

/* ============================================================
   AUTENTICAÇÃO (login / cadastro)
   ============================================================ */
.tela-auth{
  min-height: 100vh; display:grid; grid-template-columns: 1fr 1fr;
}
.auth-lado{
  background: linear-gradient(160deg, var(--azul-profundo), var(--azul-profundo-2) 55%, #0d223f);
  color: var(--texto-inverso); padding: 60px; display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.auth-lado::after{
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(rgba(201,162,39,.3) 1px, transparent 1px);
  background-size: 24px 24px; opacity:.12;
}
.auth-lado .marca{ color: var(--texto-inverso); position:relative; z-index:2; }
.auth-lado .marca .destaque{ color: var(--dourado); }
.auth-citacao{ position:relative; z-index:2; max-width:400px; }
.auth-citacao p{ font-family: var(--fonte-display); font-size:1.5rem; color: var(--texto-inverso); font-style:italic; line-height:1.4; }
.auth-citacao span{ font-size:.82rem; color: var(--dourado-claro); }
.auth-lado-rodape{ position:relative; z-index:2; font-size:.78rem; color: rgba(246,241,228,.5); }

.auth-form-wrap{
  display:flex; align-items:center; justify-content:center; padding: 40px;
}
.auth-form{ width:100%; max-width: 400px; }
.auth-form .voltar{ font-size:.82rem; color: var(--texto-suave); display:inline-flex; align-items:center; gap:6px; margin-bottom:26px; }
.auth-form h1{ font-size:2rem; margin-bottom:6px; }
.auth-form > p.sub{ margin-bottom: 30px; }

.campo{ margin-bottom: 18px; }
.campo label{ display:block; font-size:.82rem; font-weight:600; color: var(--azul-profundo); margin-bottom:7px; }
.campo-senha{ position:relative; }
.campo input, .campo select, .campo textarea{
  width:100%; padding: 13px 16px; border-radius: var(--raio-sm);
  border: 1px solid var(--linha); background: var(--branco); font-size:.95rem; color: var(--texto);
  transition: border-color .2s, box-shadow .2s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  border-color: var(--dourado); box-shadow: 0 0 0 3px var(--dourado-suave); outline:none;
}
.alternar-senha{
  position:absolute; right:14px; top:50%; transform: translateY(-50%);
  background:none; border:none; color: var(--texto-suave); font-size:.85rem;
}
.linha-form{ display:flex; align-items:center; justify-content:space-between; margin: 18px 0 24px; font-size:.84rem; }
.checkbox-linha{ display:flex; align-items:center; gap:8px; }
.rodape-form{ margin-top: 24px; text-align:center; font-size:.88rem; color: var(--texto-suave); }
.rodape-form a{ color: var(--dourado); font-weight:600; }

.opcoes-objetivo{ display:flex; flex-direction:column; gap:12px; margin: 26px 0 30px; }
.opcao-objetivo{
  display:flex; align-items:center; gap:14px;
  border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 15px 16px;
  cursor:pointer; transition: all .2s ease; background: var(--branco);
}
.opcao-objetivo:hover{ border-color: var(--dourado-claro); }
.opcao-objetivo.selecionada{ border-color: var(--dourado); background: var(--dourado-suave); }
.opcao-objetivo .simbolo{ font-size:1.3rem; }
.opcao-objetivo input{ margin-left:auto; accent-color: var(--dourado); width:18px; height:18px; }

/* ============================================================
   APP INTERNO (dashboard e páginas logadas)
   ============================================================ */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width: var(--sidebar-w); flex-shrink:0;
  background: linear-gradient(180deg, var(--azul-profundo), var(--azul-profundo-2));
  color: var(--texto-inverso);
  display:flex; flex-direction:column; justify-content:space-between;
  position:fixed; top:0; left:0; bottom:0; padding: 28px 20px; z-index:150;
}
.sidebar .marca{ color: var(--texto-inverso); margin-bottom: 40px; padding-left:6px; }
.sidebar .marca .destaque{ color: var(--dourado); }
.menu-lateral a{
  display:flex; align-items:center; gap:13px;
  padding: 12px 14px; border-radius: var(--raio-sm);
  font-size:.92rem; color: rgba(246,241,228,.72); margin-bottom:4px;
  transition: background .2s, color .2s;
}
.menu-lateral a .icone{ font-size:1.15rem; width:22px; text-align:center; }
.menu-lateral a:hover{ background: rgba(250,245,234,.06); color: var(--texto-inverso); }
.menu-lateral a.ativo{ background: var(--dourado-suave); color: var(--dourado-claro); font-weight:600; }
.sidebar-rodape{ border-top: 1px solid rgba(250,245,234,.12); padding-top:18px; }
.mini-perfil{ display:flex; align-items:center; gap:12px; }
.mini-perfil .avatar{
  width:42px; height:42px; border-radius:50%; background: var(--dourado);
  color: var(--azul-profundo); display:flex; align-items:center; justify-content:center; font-weight:700; font-family: var(--fonte-display);
}
.mini-perfil strong{ display:block; font-size:.86rem; color: var(--texto-inverso); }
.mini-perfil span{ font-size:.72rem; color: rgba(246,241,228,.5); }
.link-sair{ display:flex; align-items:center; gap:8px; margin-top:14px; font-size:.82rem; color: rgba(246,241,228,.55); }
.link-sair:hover{ color: var(--dourado-claro); }

.conteudo-app{
  margin-left: var(--sidebar-w);
  flex:1; min-width:0;
  padding: 34px 40px 100px;
}

.topo-pagina{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom: 30px; flex-wrap:wrap;
}
.topo-pagina h1{ margin-bottom:4px; }
.pontos-espirituais{
  display:flex; align-items:center; gap:8px;
  background: var(--branco); border:1px solid var(--linha); border-radius: 999px; padding: 9px 18px;
  font-size:.85rem; font-weight:600; color: var(--azul-profundo); box-shadow: var(--sombra);
}
.pontos-espirituais .valor{ color: var(--dourado); }

.bottom-nav{
  display:none;
  position: fixed; bottom:0; left:0; right:0; z-index: 200;
  background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
  border-top: 1px solid var(--linha);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  justify-content: space-around;
}
.bottom-nav a{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:.66rem; color: var(--texto-suave); padding:6px 8px; border-radius:12px; flex:1;
}
.bottom-nav a .icone{ font-size:1.28rem; }
.bottom-nav a.ativo{ color: var(--dourado); }

/* Cartão de saudação */
.saudacao-card{
  background: linear-gradient(150deg, var(--azul-profundo), var(--azul-profundo-3));
  color: var(--texto-inverso); border-radius: var(--raio-lg); padding: 34px;
  margin-bottom: 26px; position:relative; overflow:hidden;
}
.saudacao-card::after{
  content:'✝'; position:absolute; right:26px; top:50%; transform:translateY(-50%);
  font-size:5.6rem; color: rgba(201,162,39,.14);
}
.saudacao-card h1{ color: var(--texto-inverso); font-size: clamp(1.6rem,2vw + 1rem,2.2rem); }
.saudacao-card p{ color: rgba(246,241,228,.78); margin:0; max-width:460px; }

.grade-jornada{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; margin-bottom: 30px; }
.metrica{
  padding: 22px; text-align:left; position:relative;
}
.metrica .simbolo{ font-size:1.5rem; margin-bottom:10px; display:block; }
.metrica .numero{ font-family: var(--fonte-display); font-size:2rem; color: var(--azul-profundo); font-weight:700; line-height:1; }
.metrica .rotulo{ font-size:.8rem; color: var(--texto-suave); margin-top:4px; }

.grade-dupla{ display:grid; grid-template-columns: 1.4fr 1fr; gap:22px; }
.lista-acoes-rapidas{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.acao-rapida{
  display:flex; flex-direction:column; gap:10px; padding: 20px; border-radius: var(--raio-sm);
  border: 1px solid var(--linha); transition: all .2s;
}
.acao-rapida:hover{ border-color: var(--dourado-claro); transform: translateY(-3px); box-shadow: var(--sombra); }
.acao-rapida .simbolo{ font-size:1.4rem; }
.acao-rapida strong{ font-size:.92rem; color: var(--azul-profundo); }
.acao-rapida span{ font-size:.78rem; color: var(--texto-suave); }

/* Barra de progresso */
.barra-progresso{
  width:100%; height:10px; background: var(--creme-2); border-radius:999px; overflow:hidden;
  border: 1px solid var(--linha);
}
.barra-progresso .preenchimento{
  height:100%; background: linear-gradient(90deg, var(--dourado), var(--dourado-claro));
  border-radius:999px; transition: width .5s ease;
}
.progresso-legenda{ display:flex; justify-content:space-between; font-size:.78rem; color: var(--texto-suave); margin-top:8px; }

/* Contas de rosário (progresso) */
.contas-progresso{ display:flex; gap:6px; flex-wrap:wrap; }
.contas-progresso .conta-p{
  width:14px; height:14px; border-radius:50%; background: var(--creme-2); border: 1px solid var(--linha);
}
.contas-progresso .conta-p.feita{ background: var(--dourado); border-color: var(--dourado); }

/* Medalhas */
.grade-medalhas{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.medalha{
  text-align:center; padding: 18px 10px; border-radius: var(--raio-sm); border: 1px solid var(--linha);
  opacity:.4; filter: grayscale(1);
}
.medalha.conquistada{ opacity:1; filter:none; border-color: var(--dourado-claro); background: var(--dourado-suave); }
.medalha .simbolo{ font-size:1.7rem; display:block; margin-bottom:8px; }
.medalha strong{ font-size:.76rem; color: var(--azul-profundo); display:block; }

/* ============================================================
   PÁGINAS INTERNAS ESPECÍFICAS
   ============================================================ */

/* Liturgia */
.cabecalho-liturgico{
  background: var(--branco); border-radius: var(--raio); border:1px solid var(--linha);
  padding: 26px 30px; margin-bottom: 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.cabecalho-liturgico .data{ font-size:.85rem; color: var(--dourado); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.cabecalho-liturgico h1{ margin: 4px 0 6px; }
.tabs-liturgia{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.tab-btn{
  padding: 10px 18px; border-radius:999px; border:1px solid var(--linha); background: var(--branco);
  font-size:.85rem; font-weight:500; color: var(--texto-suave); transition: all .2s;
}
.tab-btn.ativo{ background: var(--azul-profundo); color: var(--dourado-claro); border-color: var(--azul-profundo); }
.painel-leitura{ display:none; }
.painel-leitura.ativo{ display:block; }
.texto-liturgico{ font-family: var(--fonte-display); font-size:1.18rem; color: var(--texto); line-height:1.8; }
.texto-liturgico .referencia{ display:block; font-family: var(--fonte-corpo); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color: var(--dourado); margin-bottom:10px; font-weight:600; }
.player-audio{
  display:flex; align-items:center; gap:14px; background: var(--creme-2); border-radius: var(--raio-sm);
  padding: 14px 18px; margin: 18px 0;
}
.player-audio button{
  width:42px; height:42px; border-radius:50%; background: var(--azul-profundo); color: var(--dourado-claro);
  border:none; font-size:1.1rem; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.player-audio .info{ font-size:.8rem; color: var(--texto-suave); flex:1; }
.player-audio .onda{ display:flex; gap:2px; align-items:flex-end; height:18px; }
.player-audio .onda span{ width:3px; background: var(--dourado); border-radius:2px; animation: onda 1s ease-in-out infinite; }
.player-audio .onda span:nth-child(2){ animation-delay:.1s; } .player-audio .onda span:nth-child(3){ animation-delay:.2s; } .player-audio .onda span:nth-child(4){ animation-delay:.3s; } .player-audio .onda span:nth-child(5){ animation-delay:.4s; }
@keyframes onda{ 0%,100%{ height:5px; } 50%{ height:18px; } }
.player-audio.tocando .onda span{ animation-play-state: running; }
.player-audio:not(.tocando) .onda span{ animation-play-state: paused; height:4px; }

.caixa-reflexao{
  background: var(--dourado-suave); border-left: 3px solid var(--dourado); border-radius: var(--raio-sm);
  padding: 20px 22px; margin: 22px 0;
}
.caixa-reflexao h3{ font-size:1rem; margin-bottom:8px; }

/* Terço */
.terco-layout{ display:grid; grid-template-columns: 340px 1fr; gap:26px; }
.selecao-misterios{ display:flex; flex-direction:column; gap:10px; }
.misterio-opcao{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 16px 18px; border-radius: var(--raio-sm); border:1px solid var(--linha); background: var(--branco);
}
.misterio-opcao.ativo{ border-color: var(--dourado); background: var(--dourado-suave); }
.misterio-opcao strong{ font-size:.92rem; color: var(--azul-profundo); display:block; }
.misterio-opcao span{ font-size:.76rem; color: var(--texto-suave); }

.palco-terco{
  background: linear-gradient(160deg, var(--azul-profundo), var(--azul-profundo-2));
  border-radius: var(--raio-lg); padding: 42px; color: var(--texto-inverso);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; min-height: 480px; justify-content:center;
  position:relative; overflow:hidden;
}
.palco-terco::after{
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(rgba(201,162,39,.3) 1px, transparent 1px);
  background-size: 24px 24px; opacity:.1;
}
.contador-passo{ position:relative; z-index:2; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color: var(--dourado-claro); }
.passo-titulo{ position:relative; z-index:2; font-family: var(--fonte-display); font-size:1.9rem; color: var(--texto-inverso); }
.passo-oracao{ position:relative; z-index:2; font-size:1.05rem; color: rgba(246,241,228,.85); max-width:480px; line-height:1.85; }
.rosario-visual{ position:relative; z-index:2; display:flex; gap:7px; flex-wrap:wrap; justify-content:center; max-width:420px; }
.rosario-visual .ponto{ width:12px; height:12px; border-radius:50%; background: rgba(250,245,234,.18); transition: all .25s; }
.rosario-visual .ponto.feito{ background: var(--dourado); }
.rosario-visual .ponto.atual{ background: var(--dourado-claro); transform: scale(1.4); box-shadow: 0 0 0 4px rgba(201,162,39,.25); }
.controles-terco{ position:relative; z-index:2; display:flex; gap:12px; margin-top:8px; }

.tela-conclusao{ text-align:center; padding: 60px 20px; }
.tela-conclusao .simbolo{ font-size:3.4rem; margin-bottom:16px; }

/* Novenas */
.grade-novenas{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.novena-card{ overflow:hidden; padding:0; display:flex; flex-direction:column; }
.novena-capa{
  height:130px; background: linear-gradient(135deg, var(--azul-profundo-3), var(--azul-profundo));
  display:flex; align-items:center; justify-content:center; font-size:2.6rem; color: var(--dourado-claro);
}
.novena-corpo{ padding: 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.novena-corpo h3{ margin-bottom:0; }
.novena-corpo .status{ font-size:.75rem; font-weight:600; color: var(--dourado); text-transform:uppercase; letter-spacing:.05em; }

.detalhe-novena-topo{ display:grid; grid-template-columns: 220px 1fr; gap:26px; margin-bottom:26px; align-items:center; }
.detalhe-novena-topo .capa{
  height:200px; border-radius: var(--raio); background: linear-gradient(135deg, var(--azul-profundo-3), var(--azul-profundo));
  display:flex; align-items:center; justify-content:center; font-size:3.6rem; color: var(--dourado-claro);
}
.dias-novena{ display:flex; gap:8px; flex-wrap:wrap; margin: 18px 0; }
.dia-novena{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:600; border: 1px solid var(--linha); color: var(--texto-suave);
}
.dia-novena.feito{ background: var(--dourado); color: var(--azul-profundo); border-color: var(--dourado); }
.dia-novena.atual{ border-color: var(--dourado); color: var(--dourado); font-weight:700; }

/* Bíblia 365 */
.painel-biblia{ display:grid; grid-template-columns: 1fr 320px; gap:26px; }
.leitura-dia{ padding: 30px; }
.lista-referencias{ display:flex; flex-direction:column; gap:10px; margin: 18px 0 24px; }
.referencia-item{
  display:flex; align-items:center; gap:12px; padding: 14px 16px; border-radius: var(--raio-sm);
  border: 1px solid var(--linha); font-size:.9rem;
}
.referencia-item .marcador{ width:8px; height:8px; border-radius:50%; background: var(--dourado); }
.navegador-dias{ display:flex; align-items:center; justify-content:space-between; margin-top:22px; }

/* Orações */
.filtros-oracoes{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 24px; }
.grade-oracoes{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.oracao-card{ cursor:pointer; transition: all .2s; }
.oracao-card:hover{ transform: translateY(-4px); box-shadow: var(--sombra-forte); }
.oracao-topo{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.btn-favorito{ background:none; border:none; font-size:1.2rem; color: var(--linha); }
.btn-favorito.ativo{ color: var(--dourado); }
.categoria-tag{
  display:inline-block; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600;
  color: var(--dourado); background: var(--dourado-suave); padding:4px 10px; border-radius:999px; margin-bottom:10px;
}

.modal-fundo{
  position:fixed; inset:0; background: rgba(11,31,58,.55); backdrop-filter: blur(3px);
  display:flex; align-items:center; justify-content:center; z-index: 1000; padding:20px;
  opacity:0; visibility:hidden; transition: all .25s;
}
.modal-fundo.aberto{ opacity:1; visibility:visible; }
.modal-caixa{
  background: var(--branco); border-radius: var(--raio-lg); max-width:560px; width:100%; max-height:82vh; overflow:auto;
  padding: 34px; position:relative; transform: translateY(14px); transition: transform .25s;
}
.modal-fundo.aberto .modal-caixa{ transform: translateY(0); }
.modal-fechar{
  position:absolute; top:20px; right:20px; background: var(--creme-2); border:none; width:34px; height:34px; border-radius:50%;
  font-size:1rem; color: var(--texto-suave);
}

/* Perfil */
.perfil-topo{ display:flex; align-items:center; gap:22px; margin-bottom: 30px; flex-wrap:wrap; }
.avatar-grande{
  width:88px; height:88px; border-radius:50%; background: linear-gradient(150deg, var(--dourado-claro), var(--dourado));
  color: var(--azul-profundo); display:flex; align-items:center; justify-content:center;
  font-family: var(--fonte-display); font-weight:700; font-size:2.2rem; flex-shrink:0;
}
.grupo-config{ margin-bottom: 20px; }
.linha-config{
  display:flex; align-items:center; justify-content:space-between; padding: 16px 0; border-bottom: 1px solid var(--linha);
}
.linha-config:last-child{ border-bottom:none; }
.linha-config strong{ font-size:.92rem; color: var(--azul-profundo); display:block; }
.linha-config span{ font-size:.78rem; color: var(--texto-suave); }

.interruptor{ position:relative; width:44px; height:24px; flex-shrink:0; }
.interruptor input{ opacity:0; width:0; height:0; }
.trilho{ position:absolute; inset:0; background: var(--linha); border-radius:999px; cursor:pointer; transition: background .2s; }
.trilho::before{ content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:var(--branco); border-radius:50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.interruptor input:checked + .trilho{ background: var(--dourado); }
.interruptor input:checked + .trilho::before{ transform: translateX(20px); }

/* Skip link */
.pular-link{
  position:absolute; left:-999px; top:0; background: var(--dourado); color: var(--azul-profundo);
  padding:10px 16px; z-index:9999; border-radius: 0 0 8px 0; font-size:.85rem; font-weight:600;
}
.pular-link:focus{ left:0; }