/* ==========================================================================
   GEEDEM — camada "alma da casa" sobre o template
   Base clara e fria, com as cores do logo e serifa Fraunces.
   Espelha o papel do book.css do Eu Melhor, porém em paleta leve.
   ========================================================================== */
/* Paleta do mascote: branco e o azulzinho suave da bandana,
   com o azul-marinho do letreiro "GEEDEM" nos textos. Nada além disso. */
:root{
  --bg:      #ffffff;
  --bg-2:    #f3f8fd;   /* seções alternadas — azul quase imperceptível */
  --panel:   #ffffff;
  --line:    rgba(27, 58, 99, .10);
  --ink:     #1b3a63;   /* azul-marinho do "GEEDEM" */
  --ink-2:   #2f527f;
  --muted:   #6c8199;
  --azul:    #7aa5d2;   /* o azulzinho */
  --azul-2:  #4a7cb0;   /* versão mais firme, para links e leitura */
  --azul-luz:rgba(122, 165, 210, .13);
  --ciano:   #a8c8e6;   /* azul da bandana */
  --ciano-2: #5b8cbe;
  --ciano-luz:#dcebf8;
  --ciano-veu:rgba(168, 200, 230, .22);
  --rosa:    #8fa9c4;   /* tons antes coloridos, agora variações do mesmo azul */
  --rosa-luz:#eef4fa;
  --verde:   #5b8cbe;
  --verde-2: #4a7cb0;
  --verde-luz:#e6f0f9;
  --erro:    #b06a6a;
  --serif:   "Fraunces", Georgia, "Times New Roman", serif;
  --sans:    "Poppins", sans-serif;
  --curva:   cubic-bezier(.22, .61, .36, 1);
  --sombra:  0 16px 44px -16px rgba(27, 58, 99, .16);
  --sombra-2:0 34px 80px -30px rgba(27, 58, 99, .28);
}

/* ---- Base clara ---- */
body, main{ background:var(--bg) !important; color:var(--ink); }
body{ font-family:var(--sans); font-weight:300; }
::selection{ background:var(--ciano-luz); color:var(--ink); }
a{ color:var(--azul-2); }
a:hover{ color:var(--ink); text-decoration:none; }
.container{ position:relative; z-index:2; }

/* O template deixa main como flex-row: sem largura total os blocos encolhem
   até o conteúdo e grudam à esquerda (a .left-side é a exceção proposital). */
main > section, main > header, main > footer, main > .proximo-faixa{
  flex:0 0 100%; width:100%;
}
section{ scroll-margin-top:40px; }

/* ---- Títulos de seção (serifa) ---- */
.section-title{
  font-family:var(--serif) !important;
  font-weight:500 !important;
  letter-spacing:-.005em !important;
  color:var(--ink);
  line-height:1.04 !important;
  margin-bottom:44px !important;
  font-size:clamp(2.3rem, 4.4vw, 4rem) !important;
}
.section-title em{ font-style:italic; font-weight:400; color:var(--azul); }

.eyebrow{
  display:inline-block; font-family:var(--sans); font-weight:600;
  letter-spacing:.3em; text-transform:uppercase; font-size:11.5px;
  color:var(--ciano-2); margin-bottom:20px;
}
.eyebrow.centro{ display:block; text-align:center; }

/* ==========================================================================
   PRELOADER / TRANSIÇÃO / NAV — versão clara
   ========================================================================== */
.preloader{ background:var(--ciano-luz); }
.preloader .layer{ background:var(--bg); }
.preloader .inner span{ color:var(--ciano-2); letter-spacing:.34em; }
.preloader .inner figure{ animation:girar 7s linear infinite; display:flex; justify-content:center; }
@keyframes girar{ to{ transform:rotate(360deg); } }

.page-transition{ background:var(--ciano-luz); }
.page-transition .layer{ background:var(--bg); }

.site-navigation{ background:var(--ciano-luz); }
.site-navigation .layer{ background:#fbfdff; }
.site-navigation .inner ul li a{
  font-family:var(--serif); font-weight:500; color:var(--ink);
  font-size:clamp(2rem, 5.2vh, 3.2rem); letter-spacing:0;
}
.site-navigation .inner ul li a:hover{ color:var(--azul); font-style:italic; }
.site-navigation .inner ul li small{
  color:var(--ciano-2); opacity:1; font-size:10.5px; letter-spacing:.24em;
  transform:translateY(-8px);
}

/* ==========================================================================
   BARRA DO TOPO
   Discreta: some no fundo enquanto a página está no alto e ganha corpo
   quando o visitante rola. Os links são pequenos de propósito — é
   navegação, não conteúdo.
   ========================================================================== */
.topo-fixo{
  position:fixed; top:0; left:0; right:0; z-index:30;
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
  padding:14px 0;
}
.topo-fixo.rolou{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 6px 26px -14px rgba(27,58,99,.4);
  padding:8px 0;
}
.topo-inner{
  max-width:1240px; margin:0 auto; padding:0 clamp(18px, 4vw, 40px);
  display:flex; align-items:center; gap:22px;
}

.topo-marca{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.topo-marca img{ width:34px; height:34px; object-fit:contain; }
.topo-marca-texto{ display:flex; flex-direction:column; line-height:1.05; }
.topo-marca-texto strong{
  font-family:var(--serif); font-weight:600; font-size:1.15rem;
  letter-spacing:.05em; color:var(--ink);
}
.topo-marca-texto small{
  font-size:.56rem; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--azul-2);
}

.topo-menu{ display:flex; align-items:center; gap:1px; margin-left:auto; }

.topo-grupo{ position:relative; }
.topo-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:500; color:var(--ink-2);
  padding:8px 12px; border-radius:99px; white-space:nowrap;
  transition:background .2s, color .2s;
}
.topo-link:hover{ background:var(--azul-luz); color:var(--azul-2); }
.topo-link.ativo{ color:var(--azul-2); font-weight:600; background:var(--azul-luz); }
.topo-link i{ font-size:9px; opacity:.6; transition:transform .2s; }
.topo-grupo:hover .topo-link i{ transform:rotate(180deg); }

/* ---- submenu ----
   Abre no hover e também no foco pelo teclado. A ponte invisível acima
   evita que ele feche quando o ponteiro atravessa o vão. */
.topo-sub{
  position:absolute; top:100%; left:0; min-width:230px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 18px 40px -18px rgba(27,58,99,.4);
  padding:8px; margin-top:10px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.topo-sub::before{
  content:""; position:absolute; left:0; right:0; top:-12px; height:12px;
}
.topo-grupo:hover .topo-sub,
.topo-grupo:focus-within .topo-sub{
  opacity:1; visibility:visible; transform:translateY(0);
}
.topo-sub a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 13px; border-radius:9px;
  font-size:13px; font-weight:400; color:var(--ink-2); white-space:nowrap;
}
.topo-sub a:hover{ background:var(--azul-luz); color:var(--azul-2); }
.topo-sub a.atual{ color:var(--azul-2); font-weight:600; background:var(--azul-luz); }
.topo-sub a i{ font-size:10px; opacity:.5; }

/* o último grupo abre para a esquerda, para não sair da tela */
.topo-grupo:nth-last-child(-n+2) .topo-sub{ left:auto; right:0; }

@media (max-width: 1240px){
  .topo-link{ padding:8px 9px; font-size:13px; }
}

.topo-acoes{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.topo-restrito{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:500; color:var(--muted);
  border:1px solid var(--line); border-radius:99px; padding:7px 14px;
  transition:.2s;
}
.topo-restrito:hover{ border-color:var(--azul); color:var(--azul-2); background:var(--panel); }

/* botão do menu completo: some no desktop, aparece no celular */
.topo-fixo .hamburger{
  display:none; width:40px; height:40px; border:0; background:none; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0;
}
.topo-fixo .hamburger span{
  display:block; width:20px; height:2px; background:var(--ink); border-radius:2px;
  transition:.3s var(--curva);
}
body.nav-aberta .topo-fixo .hamburger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.nav-aberta .topo-fixo .hamburger span:nth-child(2){ opacity:0; }
body.nav-aberta .topo-fixo .hamburger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px){
  .topo-menu{ display:none; }
  .topo-fixo .hamburger{ display:flex; }
  .topo-restrito span{ display:none; }
  .topo-restrito{ padding:8px 11px; }
  .topo-acoes{ margin-left:auto; }
}

/* ==========================================================================
   MENU LATERAL — só entra em cena no celular/tablet.
   No desktop quem navega é a barra do topo, então ele nem existe.
   ========================================================================== */
@media (min-width: 1081px){
  .site-navigation{ display:none !important; }
}

@media (max-width: 1080px){
  /* painel que desliza pela direita, deixando o site à mostra atrás */
  .site-navigation{
    width:min(84vw, 340px); left:auto; right:-100%;
    box-shadow:-18px 0 50px -20px rgba(27,58,99,.45);
    background:var(--panel);
  }
  .site-navigation .layer{ background:var(--panel); }
  .site-navigation.active{ right:0; }
  .site-navigation .inner{ padding:0 26px; }

  /* véu escurecendo o restante da página */
  body.nav-aberta::after{
    content:""; position:fixed; inset:0; z-index:25;
    background:rgba(27,58,99,.32);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  }
  .site-navigation{ z-index:35; }
  .topo-fixo{ z-index:40; }
}

.site-navigation .inner{
  padding:88px 26px 30px; overflow-y:auto; max-height:100vh;
  opacity:1;   /* o conteúdo já vem visível; quem anima é o painel */
}
.menu-grupo{
  padding:14px 0; border-bottom:1px solid rgba(27,58,99,.08);
  opacity:0; transform:translateX(16px);
  transition:opacity .35s var(--curva), transform .35s var(--curva);
}
.menu-grupo:last-of-type{ border-bottom:0; }
.menu-titulo{
  display:block; font-size:.66rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--azul-2); margin-bottom:8px;
}
.site-navigation .inner a{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--sans); font-weight:500; font-size:.94rem;
  color:var(--ink); padding:7px 0; line-height:1.35;
}
.site-navigation .inner a:hover,
.site-navigation .inner a.atual{ color:var(--azul-2); }
.site-navigation .inner a.atual{ font-weight:600; }

body.nav-aberta .menu-grupo{ opacity:1; transform:none; }
body.nav-aberta .menu-grupo:nth-of-type(1){ transition-delay:.28s; }
body.nav-aberta .menu-grupo:nth-of-type(2){ transition-delay:.33s; }
body.nav-aberta .menu-grupo:nth-of-type(3){ transition-delay:.38s; }
body.nav-aberta .menu-grupo:nth-of-type(4){ transition-delay:.43s; }
body.nav-aberta .menu-grupo:nth-of-type(5){ transition-delay:.48s; }

/* ==========================================================================
   LATERAL ESQUERDA (não usada mais — o topo assumiu a navegação)
   ========================================================================== */
.left-side{ border-right:1px solid var(--line); }
/* logo oficial (images/logo.*) — o template limita a 50px, aqui ele respira */
.left-side .logo img{ width:auto; max-width:72px; max-height:72px; object-fit:contain; }
.preloader .inner figure img.logo-preloader{
  width:auto; max-width:180px; max-height:120px; object-fit:contain;
}
/* o logo não gira junto com o sol do fallback */
.preloader .inner figure:has(img){ animation:none; }
.left-side .follow-us{
  font-family:var(--sans) !important; font-weight:600; font-size:11px;
  letter-spacing:.34em; color:var(--ciano-2);
}
.left-side .lado-sigla{
  font-family:var(--sans); font-weight:600; font-size:10px; letter-spacing:.3em;
  color:var(--muted); writing-mode:vertical-rl; transform:rotate(180deg);
  margin:auto auto 0; opacity:.75;
}
/* linhas do hambúrguer (o CSS do template as pinta de branco) */
.hamburger__line-in::after, .hamburger__line-in::before{ background-color:var(--ink) !important; }

/* ==========================================================================
   HERO
   ========================================================================== */
.casa-hero{
  position:relative; width:100%; min-height:100vh; display:flex; align-items:center;
  overflow:hidden; padding:120px 0 100px;
  background:
    radial-gradient(58vw 44vw at 82% 8%,  #dbeaf8 0%, rgba(219,234,248,0) 62%),
    radial-gradient(52vw 40vw at 6% 4%,   #eaf3fc 0%, rgba(234,243,252,0) 58%),
    radial-gradient(66vw 50vw at 46% 112%,#e8f2fb 0%, rgba(232,242,251,0) 62%),
    linear-gradient(180deg, #ffffff 0%, #f2f8fd 100%);
}
/* vídeo de fundo: nuvens de luz em loop, atrás de tudo */
.casa-hero .hero-video{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.casa-hero .hero-video video{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* O véu clareia forte só onde mora o texto (faixa da esquerda) e vai sumindo
   para a direita, onde as nuvens podem aparecer à vontade. */
.casa-hero .hero-video::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.88) 0%,
      rgba(255,255,255,.66) 30%,
      rgba(255,255,255,.18) 58%,
      rgba(255,255,255,0)   100%),
    linear-gradient(180deg,
      rgba(255,255,255,.30) 0%,
      rgba(255,255,255,0)   28%,
      rgba(255,255,255,0)   72%,
      rgba(255,255,255,.42) 100%);
}
@media (max-width: 991px){
  /* no celular o texto ocupa a largura toda: o véu precisa ser parelho */
  .casa-hero .hero-video::after{
    background:linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.72) 100%);
  }
}
.casa-hero #ceu{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.casa-hero .hero-aura{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(44vw 32vw at 70% 40%, rgba(122,165,210,.3), transparent 66%);
}
/* a barra lateral fixa tem 120px: o herói precisa começar depois dela */
.casa-hero .container{ z-index:3; }
@media (min-width: 992px){
  .casa-hero .container{ max-width:1240px; }
}
.hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:4vw; }

.hero-text .eyebrow{ margin-bottom:22px; }
.hero-title{
  font-family:var(--serif); font-weight:500; color:var(--ink);
  font-size:clamp(3.4rem, 8.4vw, 7rem); line-height:.94; letter-spacing:-.015em;
  margin:0 0 26px;
}
.hero-title em{ display:block; font-style:italic; font-weight:400; color:var(--azul); }
.hero-sub{
  font-family:var(--serif); font-style:italic; color:var(--azul-2);
  font-size:clamp(1.05rem, 1.9vw, 1.45rem); line-height:1.42; max-width:32ch; margin:0 0 12px;
}
.hero-tag{ color:var(--muted); font-size:1rem; margin-bottom:34px; }
.hero-tag em{ color:var(--ink); font-style:italic; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; }

.btn-solid, .btn-line{
  display:inline-flex; align-items:center; gap:.6rem; font-family:var(--sans);
  font-weight:600; font-size:14px; padding:16px 32px; border-radius:999px;
  transition:.3s var(--curva); cursor:pointer;
}
.btn-solid{
  background:linear-gradient(135deg, var(--azul), var(--azul-2)); color:#ffffff;
  box-shadow:0 14px 30px -12px rgba(122,165,210,.6);
}
.btn-solid:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -14px rgba(122,165,210,.75); color:#ffffff; }
.btn-line{ color:var(--ink); border:1.5px solid rgba(27,58,99,.22); }
.btn-line:hover{ border-color:var(--azul); color:var(--azul-2); transform:translateY(-3px); }

/* cartão da mensagem do dia (no lugar da capa do livro) */
.hero-card{ display:flex; justify-content:center; perspective:1600px; }
.msg-frame{
  position:relative; width:min(400px, 88%);
  background:linear-gradient(168deg, #ffffff 0%, #f6fafe 100%);
  border:1px solid rgba(122,165,210,.34); border-radius:20px;
  padding:46px 40px 38px;
  transform:rotateY(-12deg) rotateX(3deg); transform-style:preserve-3d;
  animation:flutuar 6.5s ease-in-out infinite;
  box-shadow:0 2px 5px rgba(27,58,99,.05), 32px 44px 78px -32px rgba(27,58,99,.32);
}
.msg-frame::before{
  content:""; position:absolute; inset:9px; border:1px solid rgba(122,165,210,.22);
  border-radius:13px; pointer-events:none;
}
.msg-frame::after{
  content:""; position:absolute; inset:-14% -16% -24%; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(122,165,210,.55), transparent 72%); filter:blur(22px);
}
@keyframes flutuar{
  0%,100%{ transform:rotateY(-12deg) rotateX(3deg) translateY(0); }
  50%    { transform:rotateY(-12deg) rotateX(3deg) translateY(-16px); }
}
.msg-selo{
  display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:.32em;
  text-transform:uppercase; color:var(--ciano-2); margin-bottom:14px;
}
.msg-aspas{
  position:absolute; top:24px; right:32px; line-height:1;
  font-family:var(--serif); font-size:5rem; color:var(--ciano); opacity:.26;
}
.msg-texto{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem, 1.7vw, 1.4rem);
  line-height:1.5; color:var(--ink); margin:0;
}
.msg-frame cite{
  display:block; margin-top:18px; font-style:normal; font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--azul-2);
}

.hero-scroll{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:4;
  color:var(--muted); font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.hero-scroll:hover{ color:var(--ciano-2); text-decoration:none; }
.hero-scroll span{
  width:1px; height:44px; background:linear-gradient(var(--ciano), transparent);
  animation:respirar 2.2s ease-in-out infinite;
}
@keyframes respirar{ 0%,100%{ transform:scaleY(1); opacity:1 } 50%{ transform:scaleY(.5); opacity:.5 } }

/* ==========================================================================
   FAIXA "PRÓXIMO ENCONTRO"
   ========================================================================== */
.proximo-faixa{ position:relative; z-index:5; margin-top:-40px; }
.proximo-card{
  display:flex; align-items:center; justify-content:center; gap:10px 16px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  box-shadow:var(--sombra-2); padding:16px 34px; text-align:center;
  max-width:920px; margin:0 auto;
}
.proximo-card i{ color:var(--ciano); font-size:1.2rem; }
.proximo-card p{ margin:0; color:var(--muted); font-size:.97rem; }
.proximo-card strong{ color:var(--ink); font-weight:600; }
.pill{
  background:var(--verde-luz); color:var(--verde); font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:5px 14px; border-radius:999px;
}

/* ==========================================================================
   INTRO / A CASA / PRIMEIRA VISITA
   ========================================================================== */
.intro{ background:var(--bg); padding:110px 0; }
.intro .section-title{ margin-bottom:22px !important; }
.intro p{ color:var(--muted); font-size:clamp(1.02rem, 1.4vw, 1.2rem); line-height:1.95; }
.intro p strong{ color:var(--ink); font-weight:600; }
.intro a{
  color:var(--azul-2) !important; font-weight:600;
  border-bottom:1.5px solid rgba(97,131,201,.4); padding-bottom:3px;
}
.intro a:hover{ color:var(--ink) !important; border-color:var(--ink); text-decoration:none; }

.visita{ background:var(--bg-2); }

/* ---------- o carneirinho da casa, recebendo quem chega ----------
   Montado em camadas: os olhos ficam atrás da cabeça e aparecem pelas
   órbitas vazadas dela, o que permite piscar trocando só a peça do olho. */
.mascote-vivo{
  position:relative; width:100%; max-width:300px;
  margin:26px 0 0;
  aspect-ratio:1 / 0.94;   /* a altura acompanha a largura do próprio bloco */
  filter:drop-shadow(0 20px 28px rgba(27, 58, 99, .16));
}
/* navegador sem aspect-ratio: garante altura mínima para as camadas caberem */
@supports not (aspect-ratio: 1 / 1){
  .mascote-vivo{ height:282px; }
}
.mascote-vivo .mv-corpo{
  position:absolute; left:11%; bottom:0; width:78%; z-index:1;
  transform-origin:50% 100%;
  animation:mvRespira 4.6s ease-in-out infinite;
}
.mascote-vivo .mv-cabeca{
  position:absolute; left:0; top:0; width:100%; z-index:2;
  transform-origin:50% 92%;
  animation:mvBalanca 6.4s ease-in-out infinite;
}
.mascote-vivo .mv-base{ position:relative; z-index:2; display:block; width:100%; }

.mascote-vivo .mv-olho{ position:absolute; z-index:1; }

/* Fundo da órbita: fica PARADO enquanto o globo se mexe, para nunca aparecer
   o vazado da cabeça. Sobra bastante para os lados — o excesso fica escondido
   atrás da própria cabeça. */
.mascote-vivo .mv-olho::before{
  content:""; position:absolute;
  left:-42%; top:-34%; width:184%; height:172%;
  border-radius:50%;
  background:radial-gradient(58% 52% at 50% 36%, #efedf4 0%, #dedce7 58%, #c6c4d4 100%);
}

.mascote-vivo .mv-globo{ position:relative; width:100%; }
.mascote-vivo .mv-olho img{ display:block; width:100%; }

/* Estas três precisam ficar UMA SOBRE A OUTRA. O seletor repete `img` de
   propósito: sem isso a regra genérica acima (mais específica, por incluir o
   elemento) devolve position:static e as peças empilham numa coluna. */
.mascote-vivo .mv-olho img.mv-aberto{ position:relative; }
.mascote-vivo .mv-olho img.mv-meio,
.mascote-vivo .mv-olho img.mv-fechado{ position:absolute; left:0; top:0; opacity:0; }

/* ---- olho em partes: branco parado + só a íris correndo ----
   Mover o globo inteiro dava a impressão de que o olho escorregava para fora
   da cabeça. Aqui o branco fica firme (é o ::before, desenhado em CSS) e só a
   íris desliza por cima — que é como um olho de verdade se comporta. */
/* Neste modo nenhuma imagem fica no fluxo (o branco é CSS e a íris é absoluta),
   então a caixa precisa ganhar altura sozinha — senão ela colapsa para zero e
   as íris escorrem para fora da órbita. A proporção é a do olho original. */
.mascote-vivo .mv-partes{ z-index:1; aspect-ratio:110 / 107; }
@supports not (aspect-ratio: 1 / 1){
  .mascote-vivo .mv-partes{ height:0; padding-bottom:97%; }
}

/* o branco do olho, com a sombra da pálpebra em cima, como no desenho */
.mascote-vivo .mv-partes::before{
  left:-9%; top:-8%; width:118%; height:116%;
  background:
    radial-gradient(52% 46% at 50% 62%, #ffffff 0%, #f4f2f8 42%, #e2e0ec 78%, #cfcddc 100%),
    linear-gradient(180deg, #bfbdd0 0%, rgba(191,189,208,0) 34%);
  box-shadow:inset 0 2px 5px rgba(80, 78, 105, .18);
}

.mascote-vivo .mv-partes img.mv-esclera{ position:relative; z-index:1; }

/* a íris: fica centrada no branco e é ela que se mexe */
.mascote-vivo .mv-partes .mv-globo{
  position:absolute; left:0; top:0; width:100%; height:100%; z-index:2;
  display:flex; align-items:center; justify-content:center;
}
.mascote-vivo .mv-partes img.mv-iris{
  width:62%;    /* proporção que a íris ocupa dentro do olho */
  height:auto;
  filter:drop-shadow(0 1px 1px rgba(60, 58, 84, .25));
}
.mascote-vivo .mv-partes img.mv-cornea{
  position:absolute; left:0; top:0; z-index:3; pointer-events:none;
}
/* as pálpebras da piscada entram por cima de tudo */
.mascote-vivo .mv-partes img.mv-meio,
.mascote-vivo .mv-partes img.mv-fechado{ z-index:4; }

/* posições tiradas das órbitas reais da cabeça */
.mascote-vivo .mv-olho-esq{ left:31.5%; top:53.5%; width:17.5%; }
.mascote-vivo .mv-olho-dir{ left:56.4%; top:47.8%; width:17.3%; }

@keyframes mvRespira{
  0%, 100%{ transform:scale(1) translateY(0); }
  50%     { transform:scale(1.018) translateY(-2px); }
}
@keyframes mvBalanca{
  0%, 100%{ transform:rotate(-1.5deg) translateY(0); }
  50%     { transform:rotate(1.5deg) translateY(-5px); }
}

/* imagem única, caso as peças não estejam disponíveis */
.mascote{ margin:26px 0 0; max-width:280px; }
.mascote img{
  width:100%; height:auto; display:block;
  animation:mvBalanca 5.5s ease-in-out infinite;
  filter:drop-shadow(0 18px 26px rgba(27, 58, 99, .16));
}

@media (max-width: 991px){
  .mascote-vivo{ margin-left:auto; margin-right:auto; max-width:240px; }
  .mascote{ margin-left:auto; margin-right:auto; max-width:220px; }
}
@media (prefers-reduced-motion: reduce){
  .mascote-vivo .mv-corpo, .mascote-vivo .mv-cabeca, .mascote img{ animation:none !important; }
}
.checks{ list-style:none; margin:26px 0 0; padding:0; }
.checks li{
  display:flex; align-items:flex-start; gap:13px; color:var(--muted);
  padding:7px 0; font-size:.97rem;
}
.checks li i{
  flex:0 0 24px; width:24px; height:24px; margin-top:3px; border-radius:50%;
  background:linear-gradient(135deg, var(--azul), var(--azul-2)); color:#ffffff;
  font-size:.7rem; display:flex; align-items:center; justify-content:center;
}

/* ==========================================================================
   PILARES
   ========================================================================== */
.icon-content-block{ background:var(--bg-2); padding:100px 0; }
.icon-content-block .section-title{ text-align:center; margin-bottom:56px !important; }
.icon-content-block .content-block{
  background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:38px 28px; height:100%; transition:.35s var(--curva);
  text-align:left; /* o template centraliza; aqui o bloco é editorial */
}
/* o template põe uma malha de pontinhos atrás do card destacado; no tema claro
   ela fica por cima do texto e polui — fora com ela (e sem pedir a imagem) */
.icon-content-block .content-block.selected:before{ content:none !important; display:none !important; }

.icon-content-block .content-block:hover,
.icon-content-block .content-block.selected{
  transform:translateY(-8px); border-color:rgba(97,131,201,.45);
  background:linear-gradient(180deg, rgba(97,131,201,.07), var(--panel));
  box-shadow:var(--sombra);
}
.icon-content-block .content-block figure{
  width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:var(--azul-luz); margin-bottom:22px;
}
.icon-content-block .content-block figure i{ font-size:24px; color:var(--azul); }

/* os quatro pilares variam só na intensidade do mesmo azul */
.icon-content-block .col-lg-3:nth-child(2) figure{ background:var(--azul-luz); }
.icon-content-block .col-lg-3:nth-child(2) figure i{ color:var(--azul); }
.icon-content-block .col-lg-3:nth-child(3) figure{ background:var(--rosa-luz); }
.icon-content-block .col-lg-3:nth-child(3) figure i{ color:var(--rosa); }
.icon-content-block .col-lg-3:nth-child(4) figure{ background:var(--ciano-veu); }
.icon-content-block .col-lg-3:nth-child(4) figure i{ color:var(--ciano-2); }
.icon-content-block .col-lg-3:nth-child(5) figure{ background:var(--verde-luz); }
.icon-content-block .col-lg-3:nth-child(5) figure i{ color:var(--verde-2); }
.icon-content-block .content-block h6{
  font-family:var(--serif); font-size:1.32rem; font-weight:600; color:var(--ink); margin-bottom:12px;
}
.icon-content-block .content-block p{ color:var(--muted); font-size:.94rem; line-height:1.8; margin:0; }

/* ==========================================================================
   AGENDA (chapters/parts)
   ========================================================================== */
.chapters{ background:var(--bg); padding:110px 0; }
.chapters h5{ color:var(--muted); font-weight:300; line-height:1.85; font-size:1.05rem; }
.parts{ margin-top:56px; display:grid; gap:16px; }
.part{
  background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:28px 34px; transition:.35s ease;
}
.part:hover{ border-color:rgba(97,131,201,.42); box-shadow:var(--sombra); }
.part.hoje{
  border:1.5px solid rgba(122,165,210,.6);
  background:linear-gradient(180deg, rgba(122,165,210,.15), var(--panel));
  box-shadow:0 24px 56px -26px rgba(122,165,210,.5);
}
.part-head{ display:flex; align-items:center; gap:22px; margin-bottom:0; }
.part-num{
  font-family:var(--serif); font-style:italic; font-weight:500; font-size:1.9rem;
  color:var(--azul); line-height:1; min-width:66px;
}
.part.hoje .part-num{ color:var(--ciano-2); }
.part-head > div{ flex:1; }
.part-head h4{ font-family:var(--sans); font-weight:600; font-size:1.02rem; color:var(--ink); margin:0; }
.part-head p{ color:var(--muted); font-size:.85rem; margin:0; }
.part-count{
  background:linear-gradient(135deg, var(--azul), var(--azul-2)); color:#ffffff;
  font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  padding:4px 13px; border-radius:999px; white-space:nowrap;
}
.dia-vazio{
  color:var(--muted); font-style:italic; font-size:.94rem; margin:16px 0 0;
  padding-top:16px; border-top:1px dashed var(--line);
}
.evento-lista{ list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px dashed var(--line); }
.evento-lista li{
  display:grid; grid-template-columns:78px 1fr auto; gap:18px; align-items:center;
  padding:11px 0; border-top:1px dashed var(--line);
}
.evento-lista li:first-child{ border-top:0; padding-top:0; }
.evento-lista li:last-child{ padding-bottom:0; }
.ev-hora{ font-family:var(--serif); font-weight:500; font-size:1.3rem; color:var(--ciano-2); }
.ev-corpo strong{ display:block; font-weight:600; font-size:.98rem; color:var(--ink); line-height:1.35; }
.ev-corpo span{ display:block; color:var(--muted); font-size:.88rem; line-height:1.6; }
.ev-tag{
  font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  background:var(--azul-luz); color:var(--azul-2); padding:4px 12px; border-radius:999px; white-space:nowrap;
}
.ev-tag.privativa{ background:#f3edf7; color:#8a5f9c; }
.ev-tag.inscricao{ background:var(--ciano-veu); color:var(--ciano-2); }
.ev-tag.infantil{ background:var(--verde-luz); color:var(--verde); }

/* ==========================================================================
   DOUTRINA + EVANGELHO NO LAR (text-content-block)
   ========================================================================== */
.text-content-block{ background:var(--bg-2); padding:110px 0; }
.text-content-block .section-title{ text-align:center; margin-bottom:30px !important; }
.text-content-block h5{
  color:var(--muted); max-width:58rem; margin:0 auto 66px; text-align:center;
  font-weight:300; line-height:1.95; font-size:clamp(1.02rem, 1.4vw, 1.2rem);
}
/* o template deixa os numerais com opacity .1 — aqui eles precisam ser lidos */
.text-content-block small,
.text-content-block .col-lg-3 small{
  font-family:var(--serif); font-style:italic; font-weight:500;
  color:var(--ciano-2); font-size:1.4rem; opacity:1;
}
.text-content-block h6{
  font-family:var(--sans); font-weight:600; letter-spacing:.18em; color:var(--ink);
  font-size:.8rem; margin:14px 0 12px; padding-top:16px; border-top:1px solid var(--line);
}
.text-content-block p{ color:var(--muted); font-size:.93rem; line-height:1.8; }
.text-content-block .eyebrow.centro{ text-align:center; width:100%; }

.lar{
  background:
    radial-gradient(900px 420px at 82% 0%, rgba(122,165,210,.24), transparent 66%),
    var(--bg);
  border-top:1px solid rgba(122,165,210,.2);
  border-bottom:1px solid rgba(122,165,210,.14);
}

/* ==========================================================================
   CITAÇÃO ROTATIVA
   ========================================================================== */
.quote-block{
  padding:110px 0; text-align:center;
  background:
    radial-gradient(50vw 28vw at 50% 0%, rgba(226,236,253,.85), transparent 68%),
    var(--bg);
}
.quote-caixa{ position:relative; max-width:58rem; margin:0 auto; min-height:12rem; }
.quote-item{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:20px;
  opacity:0; transform:translateY(14px); transition:opacity .9s ease, transform .9s ease;
  pointer-events:none;
}
.quote-item.ativa{ opacity:1; transform:none; }
.quote-block blockquote{
  font-family:var(--serif); font-style:italic; color:var(--ink);
  font-size:clamp(1.45rem, 2.9vw, 2.35rem); line-height:1.45; margin:0;
}
.quote-block cite{
  font-style:normal; font-size:11.5px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--azul-2);
}

/* ==========================================================================
   OBRAS (stores)
   ========================================================================== */
.stores{ background:var(--bg-2); padding:110px 0; }
.stores h5{ color:var(--muted); font-weight:300; line-height:1.85; font-size:1.05rem; }
.store-grid{ margin-top:52px; display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px; }
.store-card{
  display:flex; align-items:center; gap:16px; background:var(--panel);
  border:1px solid var(--line); border-radius:16px; padding:22px 24px;
  transition:.3s var(--curva); color:inherit;
}
a.store-card:hover{
  transform:translateY(-5px); border-color:rgba(97,131,201,.5);
  box-shadow:var(--sombra); text-decoration:none; color:inherit;
}
.store-ic{
  width:48px; height:48px; flex:0 0 auto; border-radius:13px; background:var(--azul-luz);
  color:var(--azul); display:flex; align-items:center; justify-content:center; font-size:18px;
}
.store-meta{ flex:1; min-width:0; }
.store-name{ display:block; color:var(--ink); font-weight:600; font-size:1rem; line-height:1.35; }
.store-format{ display:block; color:var(--muted); font-size:.82rem; margin-top:2px; }
.store-arrow{ color:var(--azul); opacity:.45; transition:.3s ease; }
a.store-card:hover .store-arrow{ opacity:1; transform:translateX(4px); }
.store-card.featured{
  border-color:rgba(122,165,210,.55);
  background:linear-gradient(180deg, rgba(122,165,210,.2), var(--panel));
}
.store-card.featured .store-ic{ background:linear-gradient(135deg, var(--azul), var(--azul-2)); color:#ffffff; }
.store-card.featured .store-arrow{ color:var(--ciano-2); }
.store-card.biblioteca{ border-style:dashed; background:transparent; }
.store-card.biblioteca .store-ic{ background:var(--ciano-veu); color:var(--ciano-2); }

/* ==========================================================================
   CONTATO
   ========================================================================== */
.contact-book{ background:var(--bg); padding:110px 0 120px; }
.contact-side{ color:var(--muted); line-height:1.85; margin:0 0 26px; max-width:32ch; }
.contact-info{ list-style:none; margin:0 0 28px; padding:0; }
.contact-info li{
  color:var(--muted); font-size:.94rem; line-height:1.7; margin-bottom:16px;
  padding-left:18px; border-left:2px solid rgba(122,165,210,.45);
}
.contact-info strong{
  display:block; font-size:10.5px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink); margin-bottom:2px;
}
.contact-social{ display:flex; gap:12px; }
.contact-social a{
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(43,48,73,.16);
  background:var(--panel); display:flex; align-items:center; justify-content:center;
  color:var(--ink); transition:.3s ease;
}
.contact-social a:hover{ background:var(--azul); border-color:var(--azul); color:#fff; transform:translateY(-3px); }

.book-form .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.book-form .field{ position:relative; margin-bottom:22px; }
.book-form .field input, .book-form .field textarea{
  width:100%; background:var(--panel); border:1px solid var(--line); border-radius:14px;
  color:var(--ink); padding:24px 18px 10px; height:auto; font-family:var(--sans);
  font-size:1rem; font-weight:300; transition:.25s ease;
}
.book-form .field textarea{ min-height:158px; resize:vertical; padding-top:28px; }
.book-form .field span{
  position:absolute; left:19px; top:17px; color:var(--muted); pointer-events:none;
  transition:.2s ease; font-size:1rem;
}
.book-form .field input:focus, .book-form .field textarea:focus{
  border-color:var(--azul); box-shadow:0 0 0 4px rgba(97,131,201,.13);
}
.book-form .field input:focus + span, .book-form .field textarea:focus + span,
.book-form .field span.label-up{
  top:8px; font-size:.7rem; font-weight:600; letter-spacing:.05em; color:var(--azul-2);
}
.book-form .hp{ position:absolute; left:-9999px; }
.book-form button{
  background:linear-gradient(135deg, var(--azul), var(--azul-2)); color:#ffffff;
  border:none; border-radius:999px; padding:16px 38px; height:auto; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:14px;
  box-shadow:0 14px 30px -12px rgba(122,165,210,.6); transition:.3s var(--curva);
}
.book-form button:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -14px rgba(122,165,210,.75); }
.book-form button:disabled{ opacity:.55; cursor:wait; transform:none; }
.form-foot{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.form-status{ font-size:.94rem; font-weight:500; margin:0; }
.form-status.ok{ color:var(--verde); }
.form-status.err{ color:var(--erro); }
.book-form .field.invalid input, .book-form .field.invalid textarea{ border-color:var(--erro); }

/* ==========================================================================
   RODAPÉ (o template usa position:fixed + margin-bottom no body)
   ========================================================================== */
.footer{
  color:var(--ink); background:none;
  background-image:
    radial-gradient(60vw 32vw at 50% 116%, rgba(122,165,210,.4), transparent 70%),
    radial-gradient(44vw 28vw at 10% 0%, rgba(226,236,253,.6), transparent 62%);
  background-color:var(--bg-2);
  border-top:1px solid var(--line);
  padding-top:96px; text-align:center;
}
.footer .row > .col-12:first-child{ display:flex; flex-direction:column; align-items:center; }
.footer ul{ float:none; margin-bottom:30px; }
.footer ul li{ margin:0 5px; }
.footer ul li a{
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(43,48,73,.16);
  background:var(--panel); display:flex; align-items:center; justify-content:center;
  color:var(--ink); font-size:15px; transition:.3s ease;
}
.footer ul li a:hover{ background:var(--ciano); border-color:var(--ciano); color:#ffffff; transform:translateY(-3px); }
.footer h6{
  font-family:var(--serif) !important; font-style:italic; font-weight:400;
  font-size:1.05rem !important; color:var(--muted); margin-bottom:16px;
}
.footer h2{
  font-family:var(--serif); font-weight:500; color:var(--ink); opacity:1;
  font-size:clamp(2.2rem, 4.6vw, 3.8rem); line-height:1.12; margin-bottom:34px;
}
.footer h2 em{ font-style:italic; font-weight:400; color:var(--azul); }
.footer .link{
  color:var(--ciano-2); font-size:15px; font-weight:600;
  border-bottom:1.5px solid rgba(122,165,210,.5);
}
.footer .link:hover{ color:var(--ink); border-color:var(--ink); }
.footer .footer-bar{
  border-top:1px solid var(--line); margin-top:76px; padding:30px 0;
  color:var(--muted); font-size:12.5px; align-items:center; justify-content:space-between;
}
.footer .footer-bar .copyright{ margin:0; }
.footer .footer-bar .creation{ margin-left:0; }
.footer .footer-bar .creation a{ color:var(--azul-2); text-decoration:none; border-bottom:1px solid rgba(97,131,201,.4); }
.footer .footer-bar .visits{ display:inline-flex; align-items:center; gap:7px; }
.footer .footer-bar .visits i{ color:var(--ciano); }
.footer .footer-bar .visits b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }

/* ==========================================================================
   PÁGINAS INTERNAS (diretoria, história, estatuto, agendas)
   ========================================================================== */
.pagina-interna main > section{ flex:0 0 100%; width:100%; }

.capa-interna{
  flex:0 0 100%; width:100%; padding:150px 0 70px; text-align:center;
  background:
    radial-gradient(60vw 40vw at 50% -10%, #dbeaf8 0%, rgba(219,234,248,0) 62%),
    linear-gradient(180deg, #ffffff 0%, var(--bg-2) 100%);
}

.capa-titulo{
  font-family:var(--serif); font-weight:500; color:var(--ink);
  font-size:clamp(2.4rem, 5.4vw, 4rem); line-height:1.05; margin:0;
}
.capa-titulo em{ font-style:italic; font-weight:400; color:var(--azul); }
.capa-sub{ color:var(--muted); margin-top:14px; font-size:1.02rem; }

.secao-clara{ background:var(--bg); padding:80px 0; }
.secao-alt{ background:var(--bg-2); padding:80px 0; }
.bloco-titulo{ margin-bottom:12px; }
.apoio-largo{ color:var(--muted); font-size:1.05rem; line-height:1.9; max-width:62rem; margin-bottom:40px; }
.nota-rodape{ margin-top:40px; font-size:.86rem; color:var(--muted); font-style:italic; }

/* ---------- diretoria ---------- */
.cargos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin-bottom:50px; }
.cargo{
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px 22px;
}
.cargo-nome{
  display:block; font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--azul-2); margin-bottom:5px;
}
.cargo strong{ font-family:var(--serif); font-weight:500; font-size:1.2rem; color:var(--ink); line-height:1.25; }
.cargo-destaque{
  border-color:rgba(122,165,210,.55);
  background:linear-gradient(180deg, rgba(122,165,210,.12), var(--panel));
}

.conselhos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.conselho{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px 28px; }
.conselho h3{ font-family:var(--serif); font-weight:500; font-size:1.3rem; margin-bottom:16px; }
.lista-nomes{ list-style:none; }
.lista-nomes li{
  padding:7px 0 7px 20px; position:relative; color:var(--ink); font-size:.96rem;
  border-bottom:1px dashed var(--line);
}
.lista-nomes li:last-child{ border-bottom:0; }
.lista-nomes li::before{
  content:""; position:absolute; left:0; top:15px; width:7px; height:7px;
  border-radius:50%; background:var(--azul); opacity:.55;
}
.suplentes-rotulo{
  margin-top:16px; font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.lista-suplentes li{ color:var(--muted); font-size:.92rem; }

.linha-tempo{ display:grid; gap:12px; }
.periodo{ background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.periodo summary{
  display:flex; align-items:center; gap:16px; padding:18px 24px; cursor:pointer;
  list-style:none; font-size:.98rem;
}
.periodo summary::-webkit-details-marker{ display:none; }
.periodo summary:hover{ background:var(--bg-2); }
.periodo-anos{ font-family:var(--serif); font-size:1.15rem; color:var(--azul-2); min-width:120px; }
.periodo-presidente{ color:var(--muted); flex:1; }
.periodo summary i{ color:var(--azul); transition:transform .25s; }
.periodo[open] summary i{ transform:rotate(180deg); }
.periodo-corpo{ padding:0 24px 22px; border-top:1px dashed var(--line); }
.periodo-ata{ font-size:.85rem; color:var(--muted); margin:14px 0; }
.lista-cargos{ list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:8px; }
.lista-cargos li{ font-size:.94rem; }
.lista-cargos li span{
  display:block; font-size:.7rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--azul-2);
}

/* ---------- história ---------- */
.texto-longo{ max-width:52rem; }
.texto-longo p{ color:var(--muted); font-size:1.05rem; line-height:1.95; margin-bottom:22px; }
.paragrafo-abertura{
  font-family:var(--serif); font-size:1.3rem !important; font-style:italic;
  color:var(--ink) !important; line-height:1.7 !important;
}
.fecho-historia{
  max-width:52rem; margin-top:40px; padding:26px 30px;
  border-left:3px solid var(--azul); background:var(--panel); border-radius:0 14px 14px 0;
  font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--ink); line-height:1.7;
}
.mentores{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.mentor{
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:24px;
  display:flex; flex-direction:column; gap:6px;
}
.mentor-marca{
  width:42px; height:42px; border-radius:12px; margin-bottom:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--azul-luz); color:var(--azul-2);
}
.mentor strong{ font-family:var(--serif); font-weight:500; font-size:1.15rem; }
.mentor span{ color:var(--muted); font-size:.9rem; }
.par-blocos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.bloco-missao{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:30px; }
.frase-missao{ font-family:var(--serif); font-size:1.25rem; line-height:1.6; color:var(--ink); }

/* ---------- estatuto ---------- */
.pontos-estatuto{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.ponto{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px; }
.ponto-num{ font-family:var(--serif); font-style:italic; font-size:1.4rem; color:var(--azul); }
.ponto h3{ font-family:var(--sans); font-weight:600; font-size:1rem; margin:8px 0 8px; padding-top:12px; border-top:1px solid var(--line); }
.ponto p{ color:var(--muted); font-size:.93rem; line-height:1.8; }
.caixa-documento{
  margin-top:34px; display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  background:var(--panel); border:1px dashed var(--azul); border-radius:16px; padding:26px 30px;
}
.caixa-documento > i{ font-size:2rem; color:var(--azul-2); }
.caixa-documento div{ flex:1; min-width:200px; }
.caixa-documento strong{ display:block; font-size:1.05rem; }
.caixa-documento span{ color:var(--muted); font-size:.92rem; }

/* ---------- educação continuada (EAD) ---------- */
.ead-como{
  background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:28px 30px; margin-bottom:44px;
}
.lista-passos{ list-style:none; display:grid; gap:14px; }
.lista-passos li{
  display:flex; gap:14px; align-items:flex-start;
  color:var(--muted); font-size:.97rem; line-height:1.7;
}
.passo-num{
  flex:0 0 26px; width:26px; height:26px; border-radius:50%;
  background:var(--azul-luz); color:var(--azul-2);
  font-size:.8rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  margin-top:2px;
}
.ead-cursos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px; }
.ead-curso{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:26px 26px 24px; transition:.3s var(--curva);
}
.ead-curso:hover{ border-color:var(--azul); box-shadow:var(--sombra); transform:translateY(-4px); }
.ead-icone{
  width:46px; height:46px; border-radius:13px; margin-bottom:14px;
  display:flex; align-items:center; justify-content:center; font-size:19px;
  background:var(--azul-luz); color:var(--azul-2);
}
.ead-curso h3{ font-family:var(--serif); font-weight:500; font-size:1.25rem; line-height:1.25; }
.ead-modulos{
  display:inline-block; margin-top:8px;
  font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  background:var(--ciano-veu); color:var(--ciano-2); padding:3px 10px; border-radius:99px;
}
.ead-base{ margin-top:12px; font-size:.86rem; color:var(--azul-2); }
.ead-base i{ margin-right:6px; opacity:.7; }
.ead-texto{ margin-top:10px; color:var(--muted); font-size:.93rem; line-height:1.8; }

.lista-workshops{ list-style:none; display:grid; gap:10px; }
.lista-workshops li{
  display:flex; align-items:center; gap:12px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:16px 20px; font-size:1rem; color:var(--ink);
}
.lista-workshops i{ color:var(--azul-2); }

/* ---------- agendas (palestras e reuniões) ---------- */
.horarios-fixos{
  background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:28px 30px; margin-bottom:34px;
}
.horarios-titulo{ font-family:var(--serif); font-weight:500; font-size:1.3rem; margin-bottom:18px; }
.horarios-grade{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.horarios-grade > div{ border-left:2px solid var(--azul); padding-left:16px; }
.horarios-grade strong{ display:block; font-size:.95rem; }
.horarios-grade span{ display:block; font-family:var(--serif); font-size:1.3rem; color:var(--azul-2); }
.horarios-grade small{ color:var(--muted); font-size:.8rem; }

.proxima-palestra{
  background:linear-gradient(135deg, var(--azul), var(--azul-2)); color:#fff;
  border-radius:18px; padding:28px 32px; margin-bottom:34px;
}
.pp-etiqueta{
  font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; opacity:.85;
}
.pp-tema{ font-family:var(--serif); font-size:clamp(1.3rem,2.6vw,1.9rem); line-height:1.3; margin:8px 0 6px; }
.pp-quando{ font-size:.95rem; opacity:.9; }

.mes-bloco{ margin-bottom:44px; }
.mes-titulo{
  font-family:var(--serif); font-weight:500; font-size:1.6rem; color:var(--ink);
  padding-bottom:12px; margin-bottom:20px; border-bottom:1px solid var(--line);
}

.palestras-lista, .reunioes-lista{ display:grid; gap:12px; }
.palestra, .reuniao{
  position:relative; display:flex; gap:22px; align-items:flex-start;
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px 26px;
  transition:.25s var(--curva);
}
.palestra:hover, .reuniao:hover{ border-color:var(--azul); box-shadow:var(--sombra); }
.palestra-hoje, .reuniao-hoje{
  border:1.5px solid var(--azul);
  background:linear-gradient(180deg, rgba(122,165,210,.12), var(--panel));
}
.pl-data, .rn-data{
  flex:0 0 74px; text-align:center; padding-right:20px; border-right:1px solid var(--line);
}
.pl-dia, .rn-dia{ display:block; font-family:var(--serif); font-size:2rem; line-height:1; color:var(--ink); }
.pl-semana, .rn-semana{
  display:block; font-size:.7rem; font-weight:600; letter-spacing:.12em; color:var(--azul-2); margin-top:3px;
}
.pl-hora{ display:block; font-size:.85rem; color:var(--muted); margin-top:6px; }
.pl-corpo h3, .rn-corpo h3{
  font-family:var(--serif); font-weight:500; font-size:1.25rem; line-height:1.3; color:var(--ink);
}
.pl-refs{ color:var(--muted); font-size:.86rem; margin-top:6px; line-height:1.6; }
.pl-pessoas, .rn-detalhe{
  display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:12px;
  font-size:.86rem; color:var(--muted);
}
.pl-pessoas i, .rn-detalhe i{ color:var(--azul); margin-right:5px; }
.rn-obs{ margin-top:10px; font-size:.88rem; color:var(--muted); font-style:italic; }
.pl-hoje{
  position:absolute; top:18px; right:20px;
  background:var(--azul-2); color:#fff; font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; padding:3px 11px; border-radius:99px;
}

.etiqueta{
  display:inline-block; font-size:.7rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; padding:4px 12px; border-radius:99px; margin-bottom:8px;
  background:var(--azul-luz); color:var(--azul-2);
}
.etiqueta-ciano{ background:rgba(91,140,190,.14); color:#4a7cb0; }
.etiqueta-verde{ background:rgba(79,157,118,.14); color:#3f8a63; }
.etiqueta-destaque{ background:rgba(168,111,150,.15); color:#a86f96; }
.legenda-tipos{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; }

.aviso-vazio{
  background:var(--panel); border:1px dashed var(--azul); border-radius:16px;
  padding:30px; color:var(--muted); display:flex; gap:14px; align-items:flex-start;
}
.aviso-vazio i{ font-size:1.4rem; color:var(--azul); }

.ja-aconteceu{ margin-top:36px; }
.ja-aconteceu summary{
  cursor:pointer; color:var(--azul-2); font-weight:600; font-size:.95rem;
  padding:12px 0; list-style:none;
}
.ja-aconteceu summary::-webkit-details-marker{ display:none; }
.ja-aconteceu summary span{
  background:var(--azul-luz); border-radius:99px; padding:1px 9px; font-size:.8rem; margin-left:6px;
}
.lista-passadas{ list-style:none; margin-top:10px; }
.lista-passadas li{
  display:flex; gap:16px; align-items:baseline; padding:9px 0;
  border-bottom:1px dashed var(--line); font-size:.9rem; color:var(--muted);
}
.lp-data{ min-width:86px; color:var(--ink); }
.lp-titulo{ flex:1; }
.lp-tipo{ font-size:.78rem; }

.nav-rodape{ margin-top:5vh; }
.nav-rodape a{ font-size:.85rem; color:var(--muted); }
.nav-rodape a:hover{ color:var(--azul-2); }
.site-navigation .inner li a.atual{ color:var(--azul); font-style:italic; }

@media (max-width: 640px){
  .capa-interna{ padding:120px 0 50px; }
  .secao-clara, .secao-alt{ padding:56px 0; }
  .palestra, .reuniao{ flex-direction:column; gap:14px; }
  .pl-data, .rn-data{ display:flex; gap:12px; align-items:baseline; border-right:0; border-bottom:1px solid var(--line); padding:0 0 12px; width:100%; flex:none; text-align:left; }
  .pl-hora{ margin-top:0; }
}

/* ==========================================================================
   AUDIOLIVROS (Espiritismo Player)
   ========================================================================== */
.player{
  padding:100px 0;
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(122,165,210,.16), transparent 66%),
    var(--bg-2);
  border-top:1px solid var(--line);
}
.player .section-title{ margin-bottom:0 !important; }
.player-texto{ color:var(--muted); line-height:1.9; margin-bottom:16px; }
.player-texto strong{ color:var(--ink); font-weight:600; }
.player-texto em{ font-style:italic; }

.player-vantagens{ list-style:none; margin:24px 0 28px; padding:0; }
.player-vantagens li{
  display:flex; align-items:center; gap:12px;
  color:var(--muted); font-size:.95rem; padding:7px 0;
}
.player-vantagens li i{
  flex:0 0 34px; width:34px; height:34px; border-radius:10px;
  background:var(--azul-luz); color:var(--azul-2);
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
.player-nota{
  margin-top:14px; font-size:.8rem; color:var(--muted); opacity:.85;
}

@media (max-width: 991px){
  .player .section-title{ margin-bottom:26px !important; }
}

/* ==========================================================================
   MÚSICA AMBIENTE
   ========================================================================== */
.botao-musica{
  position:fixed; right:22px; bottom:22px; z-index:30;
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel); border:1.5px solid var(--azul);
  color:var(--azul-2); cursor:pointer;
  box-shadow:0 10px 26px -8px rgba(27, 58, 99, .35);
  transition:.25s var(--curva);
}
.botao-musica:hover{ transform:translateY(-2px); background:var(--azul); color:#fff; }
.botao-musica .bm-notas{ display:flex; }
.botao-musica:not(.desligado) .bm-notas{ animation:bmBalanca 2.4s ease-in-out infinite; }
@keyframes bmBalanca{ 0%,100%{ transform:rotate(-8deg) } 50%{ transform:rotate(8deg) } }

/* quando está mudo, o botão fica apagado e ganha a barrinha cortando */
.botao-musica.desligado{
  border-color:rgba(27, 58, 99, .22); color:var(--muted); opacity:.9;
}
.botao-musica.desligado::after{
  content:""; position:absolute; width:26px; height:1.8px; border-radius:2px;
  background:currentColor; transform:rotate(-45deg);
}
@media (max-width: 640px){
  .botao-musica{ right:14px; bottom:14px; width:46px; height:46px; }
}
@media (prefers-reduced-motion: reduce){
  .botao-musica .bm-notas{ animation:none !important; }
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1199px){
  .icon-content-block .content-block{ margin-bottom:16px; }
}
@media (max-width: 991px){
  .hero-grid{ grid-template-columns:1fr; text-align:center; gap:44px; }
  .hero-card{ order:-1; }
  .msg-frame{ width:min(340px, 86%); transform:rotateY(-8deg); }
  @keyframes flutuar{ 0%,100%{ transform:rotateY(-8deg) translateY(0) } 50%{ transform:rotateY(-8deg) translateY(-12px) } }
  .hero-cta{ justify-content:center; }
  .hero-sub{ margin-left:auto; margin-right:auto; }
  
  .section-title{ font-size:clamp(2.2rem, 6.6vw, 3rem) !important; }
  .part-head{ flex-wrap:wrap; gap:14px; }
  .text-content-block .col-lg-3{ margin-bottom:18px; }
}
@media (max-width: 767px){
  .container{ padding-left:26px; padding-right:26px; }
  /* no celular a faixa lateral vira um traço fino: o conteúdo precisa do espaço */

  .casa-hero{ min-height:auto; padding:104px 0 80px; }
  .hero-title{ font-size:clamp(2.9rem, 15vw, 4rem); }
  .msg-frame{ width:100%; padding:34px 26px 30px; }
  .msg-aspas{ font-size:3.6rem; top:18px; right:22px; }
  .intro, .icon-content-block, .chapters, .text-content-block, .quote-block, .stores, .contact-book{
    padding-top:74px; padding-bottom:74px;
  }
  .book-form .field-row{ grid-template-columns:1fr; gap:0; }
  .part{ padding:24px 22px; }
  .evento-lista li{ grid-template-columns:64px 1fr; }
  .evento-lista li .ev-tag{ grid-column:2; justify-self:start; }
  .proximo-faixa{ margin-top:-28px; }
  .proximo-card{ border-radius:20px; padding:16px 22px; }
  .quote-caixa{ min-height:16rem; }
  .footer .footer-bar{ flex-direction:column; gap:10px; text-align:center; }
  .site-navigation{ padding-left:0; }
  .site-navigation .inner{ padding-left:34px; }
}

/* ==========================================================================
   ENTRADA DOS BLOCOS
   O WOW.js revela cada .wow ao entrar na tela; aqui damos o movimento.
   Sem a classe .animated o conteúdo permanece legível — nada depende de JS
   para existir, só para ganhar movimento.
   ========================================================================== */
.wow.animated{ animation:subirSuave .9s var(--curva) both; }
@keyframes subirSuave{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:none; }
}
/* nos títulos divididos, quem anima são as letras — o bloco só aparece */
.wow.animated:has(.char){ animation-name:aparecer; }
@keyframes aparecer{ from{ opacity:0 } to{ opacity:1 } }

/* ==========================================================================
   ACESSIBILIDADE — movimento reduzido
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .wow{ visibility:visible !important; opacity:1 !important; }
  .preloader{ display:none !important; }
}

/* ==========================================================================
   IDENTIDADE VISUAL — o guia da marca (identidade_visual.php)
   Página de referência: usa a própria paleta que documenta, porque um guia
   que não se parece com a marca não serve para julgar a marca.
   ========================================================================== */
.iv-titulo{
  font-family:var(--serif); font-weight:500; color:var(--ink);
  font-size:clamp(1.7rem, 3.2vw, 2.5rem); line-height:1.1;
  margin:0 0 18px; letter-spacing:-.005em;
}
.iv-titulo em{ font-style:italic; color:var(--azul); }
.iv-titulo-2{ margin-top:64px; }

/* ---- as duas cores de origem ---- */
.iv-duas{
  display:flex; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); margin-top:10px;
}
.iv-duas > div{ flex:1; min-height:104px; display:flex; align-items:flex-end; padding:14px 18px; }
.iv-duas span{
  font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
}

/* ---- grade de amostras ---- */
.iv-grade{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(172px, 1fr));
  gap:20px; margin-top:36px;
}
.iv-cor{ display:flex; flex-direction:column; gap:8px; }
.iv-tinta{
  height:86px; border-radius:12px;
  border:1px solid rgba(27, 58, 99, .18);
}
.iv-var{
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:.8rem; font-weight:600; color:var(--azul-2);
  background:var(--azul-luz); border-radius:5px; padding:2px 7px;
  align-self:flex-start;
}
.iv-num{
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:.74rem; color:var(--muted); line-height:1.6;
  font-variant-numeric:tabular-nums; word-break:break-all;
}
.iv-papel{ font-size:.79rem; color:var(--muted); line-height:1.45; }

/* ---- espécimes de tipo ---- */
.iv-especime{
  border:1px solid var(--line); border-radius:18px; background:var(--bg);
  padding:34px 32px; margin-top:26px;
  display:flex; flex-direction:column; gap:22px;
}
.iv-especime-topo{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 18px; }
.iv-nome-fonte{
  font-family:var(--serif); font-weight:500; font-size:1.5rem;
  color:var(--ink); margin:0;
}
.iv-nome-fonte.iv-sans{ font-family:var(--sans); font-weight:600; }
.iv-tag{
  font-family:var(--sans); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ciano-2);
  border:1px solid var(--line); border-radius:99px; padding:3px 12px;
}
.iv-frase{
  font-family:var(--serif); font-weight:500; color:var(--ink);
  font-size:clamp(1.8rem, 3.8vw, 2.9rem); line-height:1.12; margin:0;
}
.iv-frase em{ font-style:italic; color:var(--azul); }
.iv-alfabeto{
  font-family:var(--serif); color:var(--ink);
  font-size:1.45rem; line-height:1.45; margin:0; word-spacing:.05em;
}
.iv-alfabeto.iv-sans{ font-family:var(--sans); font-weight:400; font-size:1.3rem; }
.iv-pesos{ display:flex; flex-direction:column; gap:11px; }
.iv-pesos > div{ display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 16px; }
.iv-rot{
  font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:.73rem; color:var(--muted); min-width:106px;
  font-variant-numeric:tabular-nums;
}
.iv-rot em{ font-style:normal; opacity:.7; }
.iv-serif{ font-family:var(--serif); font-size:1.1rem; color:var(--ink); }
span.iv-sans{ font-family:var(--sans); font-size:1.02rem; color:var(--ink); }
/* linha de leitura: acima de ~70 caracteres o olho perde o começo da próxima */
.iv-obs{ font-size:.88rem; color:var(--muted); line-height:1.7; margin:0; max-width:70ch; }

/* ---- tabelas ---- */
.iv-rolagem{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:30px; }
.iv-tabela{ width:100%; border-collapse:collapse; font-size:.88rem; min-width:560px; }
.iv-tabela th, .iv-tabela td{
  text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top;
}
.iv-tabela th{
  font-family:var(--sans); font-weight:600; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ciano-2);
  border-bottom:1px solid rgba(27, 58, 99, .18); white-space:nowrap;
}
.iv-tabela tr:last-child td{ border-bottom:0; }
.iv-mono{
  font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:.79rem; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.iv-bolinha{
  display:inline-block; width:11px; height:11px; border-radius:50%;
  border:1px solid rgba(27, 58, 99, .18); vertical-align:-1px; margin-right:5px;
}
.iv-sobre{ color:var(--muted); margin:0 6px 0 9px; font-family:var(--sans); font-size:.76rem; }
.iv-selo{
  display:inline-block; font-family:var(--sans); font-size:10.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:2px 9px;
  border-radius:99px; white-space:nowrap;
}
.iv-selo-ok{ background:#e9f5ee; color:#3f8a63; }
.iv-selo-atencao{ background:#fdf3e2; color:#9a7430; }
.iv-selo-erro{ background:#fbeded; color:#b4595c; }

/* ---- marcas ---- */
.iv-marcas{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:22px; margin-top:36px;
}
.iv-marca{
  margin:0; border:1px solid var(--line); border-radius:18px; background:var(--bg);
  padding:26px 22px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.iv-marca-cx{ min-height:130px; display:flex; align-items:center; justify-content:center; }
.iv-marca-cx img{ max-height:130px; width:auto; max-width:100%; }
.iv-marca figcaption{ display:flex; flex-direction:column; gap:5px; align-items:center; }
.iv-marca strong{ font-family:var(--sans); font-weight:600; font-size:.92rem; color:var(--ink); }

/* ---- regras ---- */
.iv-regras{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
  gap:32px; margin-top:34px;
}
.iv-regras-tit{
  font-family:var(--sans); font-weight:600; font-size:1rem;
  color:var(--ink); margin:0 0 16px;
}
.iv-regras ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.iv-regras li{ display:flex; gap:13px; align-items:flex-start; font-size:.95rem; line-height:1.6; }
.iv-mk{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%; margin-top:2px;
  display:flex; align-items:center; justify-content:center; font-size:11px;
}
.iv-mk-sim{ background:#e9f5ee; color:#3f8a63; }
.iv-mk-nao{ background:#fbeded; color:#b4595c; }

@media (max-width:700px){
  .iv-duas{ flex-direction:column; }
  .iv-duas > div{ min-height:74px; }
  .iv-especime{ padding:26px 22px; }
  .iv-grade{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:16px; }
}


/* ==================================================================================
   AJUSTES 2026-08 (pedidos da Priscila) — gerado por _deploy/build_site.php a partir de _deploy/mudancas/NNN/patch.css.
   NÃO editar aqui: edite o patch e rode o build. Base original: _deploy/_ref/casa.css (15/08/2026).
   ================================================================================== */

/* ======== 001-hero-justificado ======== */
/* =========================================================================
   MUDANÇA 001 — Hero (index.php): TODO o quadrante do título justificado na
   largura exata da 1ª linha do título ("Um lugar")
   Pedido: Priscila (túnel priGeedem, msgs #3/#4/#7, 17-18/08/2026):
     "O texto de referência é [Um lugar]. O selo de cima (GEEDEM · Casa Espírita ·
      desde 1976), o subtítulo (Grupo de Estudos…) e a frase (Estudo, fraternidade…)
      ficam justificados dentro dessa largura, sem ultrapassar; os botões também com
      a mesma largura; e o botão [Ver a agenda da semana] vira [Agenda da semana]."

   ONDE APLICAR (2 arquivos):
   1) css/casa.css — colar este bloco depois de `.btn-solid, .btn-line{...}` (≈ linha 358)
      ou no fim do arquivo (precisa vir DEPOIS das regras .hero-* originais).
   2) index.php — no hero, trocar o texto do botão:
        <a href="#atividades" class="btn-solid">Ver a agenda da semana</a>
      por
        <a href="#atividades" class="btn-solid">Agenda da semana</a>
      (só esse botão; o link do rodapé "Ver a agenda da semana" continua igual)

   Só desktop (≥992px): no celular o hero é centralizado em coluna única
   (.hero-grid{text-align:center}) e o título é mais estreito que a tela → continua igual.
   ========================================================================= */
@media (min-width: 992px){
  /* o bloco encolhe para a largura do título; a 1ª linha "Um lugar" é a mais larga → vira a régua.
     Truque: filhos com width:0 + min-width:100% não "empurram" a largura do bloco (só o H1 define),
     mas depois ocupam 100% dela. */
  .hero-text{ justify-self:start; }
  .hero-text .eyebrow, .hero-sub, .hero-tag, .hero-cta{ width:0; min-width:100%; }

  /* selo de cima: espalhado exatamente na largura de "Um lugar" (tamanho acompanha o título) */
  .hero-text .eyebrow{
    display:block; text-align:justify; text-align-last:justify; white-space:nowrap;
    font-size:clamp(9px, .84vw, 11.5px);
  }

  /* subtítulo + frase de apoio: justificados dentro dessa largura, última linha à esquerda (padrão Word) */
  .hero-sub, .hero-tag{ text-align:justify; text-align-last:left; }
  .hero-sub{ max-width:none; }                       /* tinha max-width:32ch */
  .hero-tag{ font-size:clamp(14px, 1.15vw, 16px); }  /* encolhe um pouco em telas menores p/ ficar em 2 linhas */

  /* botões: os dois juntos ocupam a largura de "Um lugar" */
  .hero-cta{ gap:10px; }
  .hero-cta .btn-solid, .hero-cta .btn-line{
    flex:1 1 0; justify-content:center; padding:15px 10px; gap:.4rem;
    font-size:clamp(12px, 1.02vw, 14px); white-space:nowrap;
  }
}


/* ======== 002-intro-justificado ======== */
/* =========================================================================
   MUDANÇA 002 — index.php, seção "A casa é sua" (#casa / .intro): parágrafo justificado
   Pedido: Priscila (túnel priGeedem, msg #11 + print, 18/08/2026): "aqui também mantenha o texto justificado"
   ONDE APLICAR: css/casa.css — logo depois de `.intro p{...}` (≈ linha 442) ou no fim do arquivo.
   ========================================================================= */
.intro p{ text-align:justify; }
/* no celular a coluna é estreita: hifeniza (pt-BR) p/ não abrir "rios" de espaço entre palavras */
@media (max-width: 767px){ .intro p{ hyphens:auto; -webkit-hyphens:auto; } }


/* ======== 003-tipografia-intro-player ======== */
/* =========================================================================
   MUDANÇA 003 — index.php: seções "A casa é sua" (.intro, #casa) e "A doutrina também
   se escuta" (.player, #audiolivros) com o MESMO padrão tipográfico e a MESMA coluna de leitura.
   Pedido: Priscila (túnel priGeedem, msg #13, 18/08/2026) — mesma família, tamanho, entrelinha,
   peso (negritos preservados), mesma max-width, mesmas margens esq/dir (uma régua vertical única),
   mesmo alinhamento (justificado). Fundo das seções pode continuar diferente.

   ONDE APLICAR: css/casa.css — no fim do arquivo (precisa vir DEPOIS de `.intro p{...}` ≈ l.442
   e de `.player-texto{...}` ≈ l.1149). Inclui/substitui a mudança 002 (o `.intro p{text-align:justify}`).
   Só CSS: a coluna do texto do player vira 7/12 (igual à da seção de cima) por override das
   classes .col-lg-6 já existentes no HTML — sem mexer no index.php.
   Referência do padrão adotado = o da seção "A casa é sua" (Poppins 300, clamp(1.02rem,1.4vw,1.2rem), lh 1.95).
   ========================================================================= */
/* 1) texto corrido idêntico nos dois blocos (família, peso, tamanho, entrelinha, cor, alinhamento) */
.intro p, .player-texto{
  font-family:var(--sans); font-weight:300; color:var(--muted);
  font-size:clamp(1.02rem, 1.4vw, 1.2rem); line-height:1.95;
  text-align:justify;
}
.intro p strong, .player-texto strong{ color:var(--ink); font-weight:600; }
@media (max-width: 767px){ .intro p, .player-texto{ hyphens:auto; -webkit-hyphens:auto; } }
/* 2) mesma coluna de leitura: título 5/12 + texto 7/12 (igual à seção de cima) → mesma margem esquerda/direita e mesma largura */
@media (min-width: 992px){
  .player .row > .col-lg-6:first-child{ flex:0 0 41.6667%; max-width:41.6667%; }
  .player .row > .col-lg-6:last-child { flex:0 0 58.3333%; max-width:58.3333%; }
}
/* 3) mesmo respiro vertical das duas seções (a de cima tem 110px; no celular 74px) */
.player{ padding:110px 0; }
@media (max-width: 767px){ .player{ padding:74px 0; } }


/* ======== 004-agenda-cabecalho-hoje ======== */
/* =========================================================================
   MUDANÇA 004 — index.php, seção AGENDA "Uma semana de encontros" (#atividades / .chapters)
   Pedido: Priscila (túnel priGeedem, msg #15 + print, 18/08/2026):
     • texto introdutório ("Reuniões públicas, estudos, passes…") justificado, na MESMA régua da área útil
       do box de atividades (não ultrapassa a borda interna do box — padding lateral 34px), mesma coluna
       7/12 do resto do site (margem esquerda igual à das outras seções);
     • bloco de texto centralizado VERTICALMENTE em relação ao título (um único cabeçalho), com respiro
       equilibrado até o box;
     • selo "HOJE" do dia atual em DOURADO sutil (texto branco, arredondado, discreto) em vez de azul.
       O selo/.hoje já são gerados pelo PHP só para o dia atual — nada muda nisso.
   ONDE APLICAR: css/casa.css — no fim do arquivo (depois de `.chapters…`, `.part-count`, ≈ l.621-647).
   ========================================================================= */
:root{ --dourado:#c2a25c; --dourado-2:#9d7c37; }
/* 1) cabeçalho: título à esquerda + texto à direita centralizados verticalmente (um só cabeçalho).
      O título tinha margin-bottom:44px (empurrava o centro); o respiro passa para o .parts (72px). */
.chapters .row{ align-items:center; }
.chapters .section-title{ margin-bottom:0 !important; }
.chapters .parts{ margin-top:72px; }
.chapters h5{ margin:0; text-align:justify; }
@media (max-width: 767px){ .chapters h5{ hyphens:auto; -webkit-hyphens:auto; } }
@media (max-width: 991px){ .chapters .section-title{ margin-bottom:26px !important; } .chapters .parts{ margin-top:48px; } }
/* 2) régua: o texto termina exatamente na área útil do box (borda do box − padding lateral de 34px) */
@media (min-width: 992px){ .chapters h5{ padding-right:34px; } }
/* 3) selo HOJE em dourado sutil (texto branco, arredondado) — só o card do dia atual recebe .hoje + o selo */
.part.hoje .part-count{
  background:linear-gradient(135deg, var(--dourado), var(--dourado-2)); color:#ffffff;
  text-shadow:0 1px 1px rgba(0,0,0,.14);
  box-shadow:0 6px 14px -8px rgba(157,124,55,.65);
}


/* ======== 005-doutrina-centro-regua ======== */
/* =========================================================================
   MUDANÇA 005 (rev. 2) — index.php, seções DOUTRINA "O que o Espiritismo nos ensina" (#doutrina) e
   EVANGELHO NO LAR (.text-content-block.lar) — ambas usam a classe .text-content-block
   Pedidos: Priscila (túnel priGeedem, msgs #17 e #25 + prints, 18/08/2026): título e texto introdutório
   centralizados DENTRO da régua geral (não da tela), texto com largura máxima controlada e integrado ao título;
   na doutrina os 4 pilares do limite esquerdo ao direito; no Evangelho no lar os 6 passos ficam COMO ESTÃO.
   CAUSA: o tema base (css/style.css l.1688 e l.1709) aplica `padding-right:20%` no h5 e nos <p> — o intro era
   centralizado dentro de 80% da caixa (saía do centro) e o texto do 4º pilar terminava antes da régua.
   ONDE APLICAR: css/casa.css — no fim (depois de `.text-content-block h5{...}` ≈ l.675 e `.text-content-block p{...}` ≈ l.689).
   ========================================================================= */
/* O tema base (style.css) aplica padding-right:20% no h5 e nos <p> dessas seções: o texto introdutório
   ficava centralizado dentro de 80% da caixa (saía do centro, "solto") e o 4º pilar terminava antes da régua. */
.text-content-block h5{ padding-left:0; padding-right:0; }        /* vale p/ #doutrina E p/ "O Evangelho no lar": centro real, sob o título; largura controlada (max-width 58rem) dentro da régua */
#doutrina .col-lg-3 p{ padding-right:0; }                          /* SÓ os 4 pilares da doutrina: 1º começa no limite esquerdo, 4º termina no direito. Os 6 passos do "Evangelho no lar" ficam como estão (pedido #25). */


/* ======== 006-livros-cabecalho-cards ======== */
/* =========================================================================
   MUDANÇA 006 — index.php, seção OBRAS "Cinco livros, uma doutrina" (#estudos / .stores)
   Pedido: Priscila (túnel priGeedem, msg #19 + print, 18/08/2026):
     1) texto "A Codificação de Allan Kardec…" centralizado verticalmente com o bloco completo do título
        (não pelo topo), dentro da mesma régua/limites laterais das demais seções;
     2) todos os 6 cards (5 livros + Biblioteca da casa) com EXATAMENTE a mesma altura e o mesmo esqueleto
        (padding, ícone, título, descrição, seta, raio), independentemente do texto.
   Solução: cabeçalho igual ao das seções 004/… (align-items:center + título sem margin-bottom);
   grade dos cards vira 3×2 (era 4+2) com grid-auto-rows:1fr (todas as linhas da grade com a mesma altura),
   conteúdo alinhado pelo topo, seta sempre no centro vertical, espaçador no card sem seta.
   ONDE APLICAR: css/casa.css — no fim (depois de `.stores…`/`.store-*` ≈ l.728-756).
   ========================================================================= */
/* 1) cabeçalho: texto da direita centralizado verticalmente com o bloco completo do título; mesma régua (col 5/12 + 7/12) */
.stores .row{ align-items:center; }
.stores .section-title{ margin-bottom:0 !important; }
.stores h5{ margin:0; text-align:justify; }
@media (max-width: 767px){ .stores h5{ hyphens:auto; -webkit-hyphens:auto; } }
@media (max-width: 991px){ .stores .section-title{ margin-bottom:26px !important; } }
.stores .store-grid{ margin-top:64px; }
/* 2) cards: grade 3×2 (em vez de 4+2), todas as linhas com a mesma altura, mesmo esqueleto interno */
.store-grid{ grid-template-columns:repeat(3, 1fr); grid-auto-rows:1fr; }
@media (max-width: 991px){ .store-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 575px){ .store-grid{ grid-template-columns:1fr; } }
.store-card{ align-items:flex-start; min-height:112px; padding:22px 24px; border-radius:16px; }  /* ícone + título alinhados pelo topo; padding/raio iguais */
.store-ic{ margin-top:-2px; }                                                                    /* ícone (48px) casa com título+descrição */
.store-arrow{ align-self:center; flex:0 0 auto; }                                                /* seta sempre no centro vertical do card */
.store-card.biblioteca::after{ content:""; flex:0 0 14px; }                                      /* sem seta: espaçador p/ mesma largura de texto */


/* ======== 007-biblioteca-dourada ======== */
/* =========================================================================
   MUDANÇA 007 — index.php, card "Biblioteca da casa" (#estudos .store-card.biblioteca): dourado institucional
   Pedido: Priscila (túnel priGeedem, msg #21 + print, 18/08/2026): mesmo dourado sutil do selo HOJE, suave no
   fundo, legível, mesma estrutura/tamanho/raio dos outros cards; discreto, sem amarelo/saturação.
   Depende das variáveis --dourado/--dourado-2 criadas na mudança 004 (aplicar a 004 antes, ou copiar o :root abaixo).
   ONDE APLICAR: css/casa.css — no fim (depois de `.store-card.biblioteca{...}` ≈ l.755-756 e da 006).
   ========================================================================= */
:root{ --dourado:#c2a25c; --dourado-2:#9d7c37; }   /* (idem 004 — repetir não faz mal) */
.store-card.biblioteca{
  border-style:solid; border-color:rgba(157,124,55,.42);                       /* mesma família dos outros cards; só a cor muda */
  background:linear-gradient(180deg, rgba(194,162,92,.16), var(--panel));     /* dourado suave no fundo (espelho do card "featured" azul) */
  box-shadow:0 18px 40px -28px rgba(157,124,55,.45);
}
.store-card.biblioteca .store-ic{ background:linear-gradient(135deg, var(--dourado), var(--dourado-2)); color:#ffffff; }
.store-card.biblioteca .store-name{ color:var(--ink); }
.store-card.biblioteca .store-format{ color:var(--muted); }


/* ======== 009-contato-atendimentos-pombinha ======== */
/* MUDANÇA 009 (parte CSS) — pombinha dourada na confirmação do formulário. Ver README.md p/ HTML + JS. */
:root{ --dourado:#c2a25c; --dourado-2:#9d7c37; }   /* (idem 004) */
.form-status.ok{ display:inline-flex; align-items:center; gap:.5rem; }
.form-status .ico-pomba{ font-size:1.3em; line-height:1; color:var(--dourado); flex:0 0 auto; }


/* ======== 012-rodape-redes-sociais ======== */
/* MUDANÇA 012 — redes sociais no rodapé (.footer ul): Facebook · Instagram · Threads · YouTube, dourado suave */
:root{ --dourado:#c2a25c; --dourado-2:#9d7c37; }   /* (idem 004) */
.footer ul li a{ color:var(--dourado-2); border-color:rgba(157,124,55,.38); }                     /* ícone dourado, círculo branco como hoje */
.footer ul li a:hover{ background:linear-gradient(135deg, var(--dourado), var(--dourado-2)); border-color:transparent; color:#ffffff; }
.footer ul li a svg{ width:15px; height:15px; fill:currentColor; display:block; }                 /* Threads (SVG inline; FA 5.8 não tem esse ícone) */


/* ======== 015-versao-no-rodape ======== */
/* MUDANÇA 015 — versão no rodapé (.footer-bar .versao) — discreta, mesmo tom da barra */
.footer .footer-bar .versao{ font-size:12px; color:var(--muted); opacity:.85; white-space:nowrap; }
.footer .footer-bar .versao i{ margin-right:4px; color:var(--azul); }
.footer .footer-bar .versao small{ font-size:11px; opacity:.8; letter-spacing:.02em; }