/* =========================
   Tokens
========================= */
:root{
  --bg:#F8F4EC;
  --text:#1F2430;
  --muted:#6B7280;
  --primary:#333852;
  --primary-contrast:#fff;
  --accent:#19B37A;

  --radius:16px;
  --shadow:0 6px 18px rgba(0,0,0,.08);

  --backboard:#1f2430;      /* “álbum” atrás da foto */
  --paper:#ffffff;

  --tape-1:#f6c7d9;
  --tape-1-alt:#ffd9e7;
  --tape-2:#bfe9db;
  --tape-2-alt:#d6f3ea;
  --tape-len-desk: 65%;
  --tape-len-mob:  65%;

  --ring-1: rgba(51,56,82,.18);   /* focus ring externo */
  --ring-2: rgba(25,179,122,.35); /* focus ring interno */

  --topbar-h: 64px;               /* altura do topo fixo */
}

/* =========================
   Base & helpers
========================= */
*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-top: var(--topbar-h); /* compensa topo fixo */
}
img{ max-width:100%; display:block }
.container{
  max-width:1120px; width:100%;
  padding-inline:clamp(12px,4vw,24px);
  margin-inline:auto;
}
.center{ text-align:center }
.mt-2{ margin-top:16px }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* impedir overflow horizontal */
section,header,footer{ max-width:100vw }
img,video,svg,canvas{ max-width:100%; height:auto }

/* =========================
   Topbar (fixo)
========================= */
:root{ --topbar-h: 58px; }
.topbar{
  position: sticky; top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(248,244,236,.92);             /* #F8F4EC com leve transparência */
  backdrop-filter: saturate(160%) blur(2px);
  -webkit-backdrop-filter: saturate(160%) blur(2px);
  border-bottom: 1px solid #E8DFD0;              /* filete */
  box-shadow: 0 0 0 rgba(0,0,0,0);               /* quase sem “peso” */
  transition: box-shadow .12s ease, backdrop-filter .12s ease, background-color .12s ease;
}
.topbar.topbar--scrolled{
  background: rgba(248,244,236,.95);
  backdrop-filter: saturate(170%) blur(4px);
  -webkit-backdrop-filter: saturate(170%) blur(4px);
  box-shadow: 0 6px 14px rgba(0,0,0,.045);
}
.topbar__grid{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: var(--topbar-h);
  padding-block: 8px;                           /* respiro vertical 8–10px */
}
.topbar__left{  display:flex; align-items:center; }
.topbar__center{display:flex; align-items:center; justify-content:center; min-width: 0; }
.topbar__logoLink{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; cursor: pointer;
  text-decoration: none;
}
.topbar__title:hover{ text-decoration: none; }
/* =========================
   Botões
========================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:0; cursor:pointer; font-weight:700;
  transition: transform .12s ease, box-shadow .20s ease,
              background-color .20s ease, border-color .20s ease, color .20s ease;
  position:relative; overflow:hidden; /* ripple */
}
.btn--primary{ background:var(--primary); color:var(--primary-contrast) }
.btn--secondary{ background:#fff; color:var(--primary); border:1px solid #d7d7d7 }
.btn--block{ width:100% }
.btn:disabled{ opacity:.55; cursor:not-allowed }
.btn:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.10) }
.btn:active{ transform:translateY(0);   box-shadow:0 3px 10px rgba(0,0,0,.12) }
.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--ring-1), 0 0 0 6px var(--ring-2);
}

/* ripple */
.ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  transform:scale(0); opacity:.25; background:currentColor; mix-blend-mode:multiply;
  animation:ripple .6s ease-out forwards;
}
.btn--primary .ripple{ opacity:.3; mix-blend-mode:screen; background:#fff; }
@keyframes ripple{ to{ transform:scale(12); opacity:0 } }

/* =========================
   Banner full-width
========================= */
.banner__img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block }

/* =========================
   Storycards (álbum + fitas)
========================= */
.storycards{ padding:12px 0 24px }
.storycards__grid{ display:grid; gap:14px; grid-template-columns:1fr; }
.storycard{
  background:transparent; border-radius:0; padding:0 0 18px;
  box-shadow:none; position:relative;
}
.storycard__media{
  position:relative; isolation:isolate;
  width:100%; max-width:clamp(220px,62vw,330px);
  aspect-ratio:1/1; overflow:visible; margin:0 auto 32px; z-index:1;
}
/* “álbum” atrás da foto */
.storycard__media::before{
  content:""; position:absolute; inset:-12px;
  background:var(--backboard); transform:rotate(-9deg);
  z-index:0; box-shadow:0 12px 28px rgba(0,0,0,.22);
}
/* foto */
.storycard__media img{
  position:relative; z-index:2;
  width:100%; height:100%; object-fit:cover;
  border:0; border-radius:0; box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.storycard__title, .storycard p{ position:relative; z-index:2 }

/* Fitas (opacas, acima de tudo) */
.tape{
  position:absolute; z-index:9;
  width:var(--tape-len-desk); max-width:none;
  height:22px; transform-origin:50% 50%;
  opacity:1; pointer-events:none; mix-blend-mode:normal;
  background:
    radial-gradient(circle at 10% 40%, rgba(255,255,255,.45) 0 2px, transparent 3px) 0 0 / 18px 18px,
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.28) 0 1px, transparent 2px) 6px 8px / 18px 18px,
    conic-gradient(from 0deg, rgba(255,255,255,.12) 0 25%, transparent 0 100%) 0 0 / 10px 10px repeat,
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.15));
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}
.storycard .tape{ background-color:var(--tape-1) }
.storycard:nth-child(even) .tape{ background-color:var(--tape-2) }
/* textura “artesanal” */
.storycard .tape::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.08) 8px 16px),
    linear-gradient(0deg, transparent 40%, rgba(255,255,255,.18) 100%);
}
/* bordas rasgadinhas */
.tape::before, .tape::after{
  content:""; position:absolute; top:0; bottom:0; width:10px; filter:blur(.2px); opacity:.45;
}
.tape::before{
  top:-1px; bottom:-1px; width:14px;
  background:linear-gradient(90deg, transparent 0 45%, rgba(0,0,0,.14) 48%, transparent 52%, rgba(0,0,0,.14) 55%, transparent 100%);
  filter:blur(.3px);
}
.tape::after{ right:-6px; background:linear-gradient(90deg, rgba(0,0,0,.15), transparent) }
/* posições */
.tape.tl{ top:-14px; left:-10%;  transform:rotate(-9deg) }
.tape.tr{ top:-16px; right:-10%; transform:rotate(7deg)  }
.tape.bl{ bottom:-16px; left:-10%;  transform:rotate(8deg)  }
.tape.br{ bottom:-14px; right:-10%; transform:rotate(-7deg) }
/* variação “natural” por card */
.storycard:nth-child(2) .storycard__media::before{ transform:rotate(8deg) }
.storycard:nth-child(3) .storycard__media::before{ transform:rotate(-11deg) }
.storycard:nth-child(4) .storycard__media::before{ transform:rotate(10deg) }

/* =========================
   Novena (compact)
========================= */
.novena{ padding:8px 0 28px }
.novena__headline{ font-size:clamp(18px,4vw,24px); margin:0 0 12px; text-align:center; padding:0 6px }
.novena__wrap{ display:grid; gap:12px; grid-template-columns:1fr }
.novena__coverbox,
.novena__resumo{
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none; /* se quiser manter a sombra suave, remova esta linha */
  border-radius: 14px; 
  overflow: hidden;
}
.novena__coverbox{
  border-radius: 14px;
  overflow: hidden;          /* esconde sobras do recorte */
  aspect-ratio: 1080 / 614 !important;       /* garante “moldura” quadrada */
}
.novena__cover{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* corta sem distorcer */
  object-position: center;   /* foco central; troque p/ 'top' se preferir mais “rosto” */
  border-radius: 0;          /* quem arredonda é o container */
}
.novena__resumo-img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;          /* container já arredonda */
}
.novena__cta{ text-align:center }
.novena__cta .btn{ margin-top:6px }

/* =========================
   Comentários
========================= */
.comments{ padding:10px 0 16px }
.comments__list{ list-style:none; margin:0; padding:0; display:grid; gap:12px }
.comment{ background:#fff; border-radius:var(--radius); padding:12px; box-shadow:var(--shadow) }
.comment__name{ font-weight:700; margin:0 0 4px }
.comment__text{ margin:0 }

/* =========================
   Status / progresso
========================= */
.status{ padding:10px 0 18px }
.status h2{ font-size:clamp(18px,4vw,24px); margin:0 0 10px }
.status__row{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:10px }
.goal__bar{ height:14px; background:#e9e4d7; border-radius:999px; overflow:hidden; box-shadow:inset 0 2px 4px rgba(0,0,0,.06) }
.goal__bar-fill{ height:100%; background:linear-gradient(90deg, var(--accent), #6CD0AE) }
.goal__percent{ font-weight:600; margin-top:6px }

/* =========================
   Doação
========================= */
.donate{ padding:14px 0 30px }
.donate__wrap{ display:grid; grid-template-columns:1fr; gap:16px }
.donate__card{ background:#fff; border-radius:var(--radius); padding:14px; box-shadow:var(--shadow) }
.donate__amounts{ display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 14px; border:0; padding:0 }
.chip{
  border:1px solid #ddd; background:#fff; border-radius:999px; padding:8px 14px; cursor:pointer;
  transition: transform .12s ease, box-shadow .20s ease,
              background-color .20s ease, border-color .20s ease, color .20s ease;
  position:relative; overflow:hidden; /* ripple */
}
.chip:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.10) }
.chip:active{ transform:translateY(0);   box-shadow:0 3px 10px rgba(0,0,0,.12) }
.chip:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--ring-1), 0 0 0 6px var(--ring-2);
}
.chip.is-active{
  border-color:var(--primary);
  background:linear-gradient(0deg,#EEF0F7,#F6F7FB);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 10px rgba(0,0,0,.06);
  transform:translateY(-1px);
  font-weight:700;
}

/* =========================
   FAQ (sanfona refinada)
========================= */
.faq{ padding:8px 0 10px }
.faq__item{
  border-radius:18px; background:#fff; border:1px solid rgba(0,0,0,.06);
  box-shadow:var(--shadow); overflow:hidden; margin-bottom:14px;
}
.faq__item summary{
  cursor:pointer; list-style:none;
  display:grid; grid-template-columns:28px 1fr; align-items:center; gap:10px;
  padding:16px 44px 16px 16px;  /* espaço para a seta à direita */
  font-weight:800; color:var(--primary);
  position:relative;
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFBFB 100%);
  transition:background .25s ease, box-shadow .25s ease;
}
.faq__item summary::-webkit-details-marker{ display:none }
/* badge à esquerda */
.faq__item summary::before{
  content:""; width:28px; height:28px; border-radius:8px;
  background:linear-gradient(135deg,#E8FFF5,#DDF8EF);
  border:1px solid rgba(25,179,122,.25);
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
/* seta (chevron) */
.faq__item summary::after{
  content:""; position:absolute; right:14px; top:50%; width:10px; height:10px;
  border-right:2px solid var(--primary); border-bottom:2px solid var(--primary);
  transform:translateY(-50%) rotate(45deg);
  transition:transform .25s ease, opacity .25s ease; opacity:.85;
}
.faq__item summary:hover{ background:#FAFCFB }
.faq__item summary:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--ring-1), 0 0 0 6px var(--ring-2);
  border-radius:16px;
}
.faq__item[open] summary::after{ transform:translateY(-50%) rotate(225deg) }
/* conteúdo com divisor e respiro inferior */
.faq__content{
  color:var(--muted); overflow:hidden; padding:0 16px 16px;
}
.faq__content::before{
  content:""; display:block; height:1px; background:rgba(0,0,0,.06);
  margin:0 -16px 12px; /* divisor na largura do card */
}
.faq__content > *{ margin:0 0 12px }
.faq__content > *:last-child{ margin-bottom:0 }

/* =========================
   Toasts (notificações)
========================= */
.toasts{
  position:fixed; top:12px; right:12px;
  display:flex; flex-direction:column; gap:10px;
  z-index:1000; pointer-events:none;
}
.toast{
  background:#fff; color:var(--text); border:1px solid rgba(0,0,0,.06);
  border-radius:12px; box-shadow:var(--shadow);
  padding:10px 12px; min-width:240px; max-width:min(90vw,360px);
  display:grid; grid-template-columns:26px 1fr; align-items:center; gap:8px;
  opacity:0; transform:translateY(-8px);
  animation:toast-in .42s ease-out forwards,
            toast-flash .8s ease-in-out .42s 1,
            toast-out .35s ease-in forwards 4.8s;
}
.toast__icon{ font-size:18px; line-height:1 }
.toast__text{ font-weight:600; font-size:.95rem }
.toast__sub{ margin-top:2px; font-size:.85rem; color:var(--muted) }
@keyframes toast-in{ from{opacity:0;transform:translateY(-8px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes toast-flash{ 0%{box-shadow:0 0 0 rgba(25,179,122,0);background:#fff}45%{box-shadow:0 0 0 rgba(25,179,122,.25);background:#f0fbf6}100%{box-shadow:0 0 0 rgba(25,179,122,0);background:#fff} }
@keyframes toast-out{ to{opacity:0;transform:translateY(-8px)} }

/* =========================
   Modal "gate" (interstitial)
========================= */
.gate[hidden]{ display:none!important; }
.gate{
  position:fixed; inset:0; z-index:1100;
  display:grid; place-items:center;
}
.gate__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(2px) }
.gate__box{
  position:relative; width:min(92vw,540px);
  background:#fff; border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.25);
  overflow:hidden; animation:gate-in .25s ease-out;
}
.gate__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid rgba(0,0,0,.06); background:#FAFAFA;
}
.gate__title{ margin:0; font-size:clamp(18px,3.2vw,22px); color:var(--primary); font-weight:800 }
.gate__x{ appearance:none; border:0; background:transparent; cursor:pointer; font-size:22px; line-height:1; padding:4px 8px; border-radius:8px }
.gate__x:hover{ background:rgba(0,0,0,.06) }
.gate__content{ padding:16px }
.gate__lead{ font-size:1.05rem; margin:0 0 8px }
.gate__cta{ display:grid; gap:10px; margin:14px 0 8px }
.gate__note{ margin:8px 0 0 }
@keyframes gate-in{ from{transform:translateY(8px);opacity:0} to{transform:translateY(0);opacity:1} }
/* evita scroll do fundo com modal aberto */
body.gate-open{ overflow:hidden }

/* aviso do modal (cartão 2 linhas, mobile-first) */
.gate__warn{
  display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:start;
  background:#FFF7E9; color:#7A5A1A;
  border:1px solid #F1D7A6; border-left:6px solid #F6B33B;
  border-radius:12px; padding:12px; margin:12px 0;
}
.gate__warn-ico{ font-size:18px; line-height:1; margin-top:1px }
.gate__warn-text strong{ display:block; font-weight:800; line-height:1.25 }
.gate__warn-text strong::after{ content:":" }
.gate__warn-sub{ display:block; margin-top:2px; font-weight:600; line-height:1.35 }

/* =========================
   Breakpoints
========================= */
@media (max-width:480px){
  .storycard__media::before{
    inset:-8px; transform:rotate(-7deg);
    box-shadow:0 10px 24px rgba(0,0,0,.20);
  }
  .gate__warn{ grid-template-columns:22px 1fr; padding:10px }
  .gate__warn-text strong{ font-size:.96rem }
  .gate__warn-sub{ font-size:.92rem }
}
@media (min-width:960px){
  .storycards__grid{ grid-template-columns:repeat(2,1fr); gap:16px }
  .novena__wrap{ grid-template-columns:.9fr 1.1fr; align-items:start }
  .novena__content{ padding:16px }
}

/* =========================
   Acessibilidade (reduzir movimento)
========================= */
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important }
  .toast, .gate__box{ animation:none!important }
}
/* =========================
   Notas mais discretas
   (mantém exatamente os mesmos textos)
========================= */

/* nota abaixo do botão Continuar (seção Doação) */
.donate__card .muted.xs{
  color: var(--muted);
  opacity: .66;           /* fica mais “suave” */
  font-size: .78rem;      /* um pouco menor que .xs */
  letter-spacing: .1px;
  margin-top: 6px;
}

/* nota do rodapé do modal (gate) */
.gate__note{
  color: var(--muted);
  opacity: .66;           /* mais discreta */
  font-size: .78rem;
  text-align: center;
}

/* =========================
   Remover “azul” tosco do toque em mobile
   (sem perder acessibilidade no teclado)
========================= */

/* iOS/Android tap highlight */
a, button, .chip, summary{
  -webkit-tap-highlight-color: transparent;
}

/* remove o outline padrão no toque; o teclado continua com o :focus-visible que já estilizamos */
.btn:focus, .chip:focus, summary:focus, a:focus{
  outline: none;
}

/* opcional: em dispositivos touch, evite o outline do UA */
@media (hover: none) and (pointer: coarse){
  .btn:focus, .chip:focus, summary:focus, a:focus{ outline: none; }
}
:root{
  /* cor do halo derivada do primary */
  --cta-pulse: rgba(51,56,82,.26); /* fallback (usa #333852 com ~26% opacidade) */
}
@supports (color: color-mix(in srgb, white, black)){
  :root{
    --cta-pulse: color-mix(in srgb, var(--primary) 28%, transparent);
  }
}
/* CTA do modal com pulsação sutil e contínua */
#gateProceed{
  position: relative;
  animation: pulse-cta-primary 1.8s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, box-shadow;
}

/* pausa a pulsação enquanto o usuário interage (opcional) */
#gateProceed:hover,
#gateProceed:active,
#gateProceed:focus-visible{
  animation-play-state: paused;
}

@keyframes pulse-cta-primary{
  0%   { transform: scale(1);      box-shadow: 0 0 0 0 var(--cta-pulse); }
  50%  { transform: scale(1.035);  box-shadow: 0 0 0 6px var(--cta-pulse); }
  100% { transform: scale(1);      box-shadow: 0 0 0 0 var(--cta-pulse); }
}

/* respeita acessibilidade: desativa animações se o usuário preferir menos movimento */
@media (prefers-reduced-motion: reduce){
  #gateProceed{ animation: none !important; }
}
/* ====== Comentários – box só para nome+data+texto; avatar fora; ações+likes abaixo ====== */

/* Thread “jogada” na página (sem cartão geral) */
.fb-thread{
  display:block;
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
}

/* Cada comentário: avatar + corpo */
.fb-comment{
  display:grid;
  grid-template-columns:46px 1fr; /* avatar + conteúdo */
  gap:10px;
  background:transparent;
  border:none;
  box-shadow:none;
  padding:10px 12px 12px;
  position:relative;
}

/* separador sutil entre comentários de 1º nível */
.fb-comment + .fb-comment{
  border-top:1px solid #e5e7eb;
  padding-top:12px;
}

/* avatar fora da box, com leve deslocamento */
.fb-avatar img{
  width:44px; height:44px;
  border-radius:999px; object-fit:cover;
  transform:translate(-2px,-2px);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}

/* Corpo do comentário (sem fundo) */
.fb-body{ padding:0; min-width:0; }

/* ========== A BOX (apenas meta + texto) ========== */
.fb-meta, .fb-text{
  background: linear-gradient(180deg,#FCFCFD,#F7F8FA);
  border: 1px solid #e6e8ee;
}
.fb-meta{
  display:flex; align-items:center; gap:6px;
  font-size:.95rem;
  margin:0;                 /* encosta na borda superior */
  padding:12px 14px 6px;
  border-radius:14px 14px 0 0;     /* topo arredondado */
}
.fb-text{
  margin:0;                 /* cola na meta */
  padding:0 14px 10px;
  border-top:0;                     /* une as duas partes */
  border-radius:0 0 14px 14px;      /* base arredondada */
  color:var(--text);
  font-size: 0.79rem;
}

/* Tipografia dentro da meta */
.fb-name{ font-weight:700; color:#1d2129;font-size: 0.73rem;}
.fb-dot{ display: none !important; }
.fb-date{ color:#65676b; font-size:.7rem; }

/* ========== Footer do comentário: ações + likes numa mesma linha (fora da box) ========== */
.fb-actions{
  display:inline-flex; gap:10px; font-size:.7rem; color:#65676b;
  margin-top:10px;
}
.fb-actions a{ color:#1b74e4; text-decoration:none; font-weight:600; }
.fb-actions a:hover{ text-decoration:underline; }

.fb-likes{
  display:inline-flex; align-items:center; gap:4px;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  float:right;                      /* alinha à direita na mesma linha */
  margin-top:8px;
  border: 0 !important;
}
.fb-likes img{ width:16px; height:16px; display:block }
.fb-likes-count{ font-size:.82rem; color:#1d2129; font-weight:600 }

/* Clear do float de likes para não invadir itens abaixo */
.fb-body::after{ content:""; display:block; clear:both; }

/* ====== Respostas ====== */
.fb-replies{
  display:block;
  margin-top:10px;
  margin-left:0px;                 /* leve recuo em relação ao comentário pai */
}

/* Resposta usa o MESMO padrão (box própria) */
.fb-reply{
  background:transparent; border:none; box-shadow:none;
  padding:8px 12px 0;
}
.fb-replies .fb-comment + .fb-comment{
  border-top:1px solid #eef2f6;     /* separador entre respostas */
}

/* avatar menor nas respostas */
.fb-replies .fb-avatar img{
  width: 32px !important;
  height: 32px !important;
  transform: translate(-1px,-1px);
}

/* notas/créditos (se existirem) */
.fb-note{ margin-top:8px; opacity:.66; font-size:.82rem; }
.fb-plugin-credit{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:8px; opacity:.6;
}
.fb-plugin-credit img{ width:14px; height:14px; display:block }

/* Mobile estreito: microajustes */
@media (max-width: 380px){
  .fb-replies{ margin-left: 8px !important; }
  .fb-replies .fb-comment{ grid-template-columns: 30px 1fr !important; }
  .fb-replies .fb-avatar img{ width: 28px !important; height: 28px !important; }
}
/* some a linha entre nome/data (.fb-meta) e texto (.fb-text) */
.fb-meta{ border-bottom: 0 !important; }
.fb-text{ border-top: 0 !important; }

/* (opcional) garante colagem perfeita em telas com sub-pixel */
.fb-text{ margin-top: -1px; } /* remova se não precisar */
.fb-replies .fb-comment{
  grid-template-columns: 34px 1fr !important; /* era 46px 1fr */
  gap: 8px !important;                        /* um pouco menor */
}
/* ===== Respostas: caixa mais larga (mais espaço horizontal) ===== */

/* 1) Zero (ou quase) de recuo do bloco de respostas */
.fb-replies{
  margin-left: 0 !important; /* já estava baixo; garantimos 0 */
}

/* 2) Respostas: coluna de avatar mais estreita + menos gap + menos padding lateral */
.fb-replies .fb-comment{
  grid-template-columns: 28px minmax(0,1fr) !important; /* era 34/46px */
  gap: 6px !important;                                   /* era 8/10px */
  padding-left: 4px !important;                          /* era 12px */
  padding-right: 4px !important;                         /* era 12px */
}

/* 3) Avatar menor nas respostas (acompanha a coluna) */
.fb-replies .fb-avatar img{
  width: 28px !important;
  height: 28px !important;
  transform: translate(-1px,-1px);
}

/* 4) Box da resposta com menos padding interno (ganha largura de texto) */
.fb-replies .fb-meta{ padding: 10px 10px 6px !important; }
.fb-replies .fb-text{ padding: 0 10px 10px !important; }

/* 5) “Sangra” levemente a box além da célula para ganhar mais 2px de cada lado */
.fb-replies .fb-meta,
.fb-replies .fb-text{
  margin-left: -2px !important;
  margin-right: -2px !important;
}

/* Telas bem estreitas: espreme um pouco mais para manter o ganho de largura */
@media (max-width: 380px){
  .fb-replies .fb-comment{
    grid-template-columns: 24px minmax(0,1fr) !important;
    gap: 6px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  .fb-replies .fb-avatar img{
    width: 24px !important;
    height: 24px !important;
  }
  .fb-replies .fb-meta{ padding: 10px 8px 6px !important; }
  .fb-replies .fb-text{ padding: 0 8px 8px !important; }
  .fb-replies .fb-meta,
  .fb-replies .fb-text{
    margin-left: -1px !important;
    margin-right: -1px !important;
  }
}
/* ===== Laudo médico ===== */
.laudo__figure{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px;
  margin: 0 0 10px;
}

.laudo__img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.laudo__cap{
  margin-top: 6px;
  text-align: center;
}

.laudo__note{
  text-align: center;
  font-size: .78rem;   /* menor que o padrão */
  opacity: .75;        /* mais suave */
  margin-top: 6px;
}
/* Botões como links sem sublinhado (vale para ambos os CTAs) */
a.btn,
a.btn:link,
a.btn:visited,
a.btn:hover,
a.btn:focus,
a.btn:active{
  text-decoration: none !important;
}
/* ===== Topbar: logo mais à direita ===== */
.topbar__left{
  padding-left: clamp(14px, 6vw, 38px); /* aumenta a “folga” da logo do canto esquerdo */
}
/* sublinhado discreto, com a cor de destaque da campanha */
.topbar__title::after{
  content: none !important;
  position: absolute;
  left: 0;
  right: 0;                                 /* ocupa a largura do título */
  margin-inline: auto;                      /* mantém centralizado no container da coluna */
  bottom: -3px;
  width: 46%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), #6CD0AE);
  opacity: .9;
}
/* === Topbar: altura exata, sem “respiro” extra e sempre visível === */
:root{
  --topbar-h: 56px !important;  /* 56–60px: escolhi 56px */
}

/* a barra ganha fundo um pouco menos transparente para não “sumir” sobre o banner */
.topbar{
  z-index: 999 !important;
  background: rgba(248,244,236,.96) !important;     /* #F8F4EC, mais sólido */
}

/* grid com ALTURA fixa (sem padding vertical que inflava a barra) */
.topbar__grid{
  height: var(--topbar-h) !important;
  min-height: 0 !important;
  padding-block: 0 !important;                       /* remove respiro extra */
  align-items: center;
}
/* garante compensação do conteúdo exatamente = altura da topbar */
body{ padding-top: var(--topbar-h) !important; }
/* === TOPBAR: fixa de verdade, sem espaço sobrando e com título cabendo === */

/* 1) Altura única da barra (e usada como referência) */
:root{ --topbar-h: 56px !important; }

/* 2) Fixa no topo e sempre acima de tudo */
.topbar{
  position: fixed !important;   /* em vez de sticky */
  top: 0; left: 0; right: 0;
  z-index: 1000 !important;
  background: #F8F4EC !important;          /* sólido p/ não “sumir” sobre o banner */
  border-bottom: 1px solid #E8DFD0 !important;
  box-shadow: 0 0 0 rgba(0,0,0,0) !important;
  backdrop-filter: none !important;         /* remove “apagado” do blur */
}

/* realce sutil só quando rolar */
.topbar.topbar--scrolled{
  box-shadow: 0 6px 14px rgba(0,0,0,.05) !important;
}

/* 3) Sem respiro vertical que inflava a barra */
.topbar__grid{
  height: var(--topbar-h) !important;
  min-height: 0 !important;
  padding-block: 0 !important;
  align-items: center;
}

/* 4) Remove o “vazio” geral embaixo da barra */
body{ padding-top: 0 !important; }

/* 5) Garantia de encaixe do banner logo abaixo da barra */
.banner{ margin-top: 0 !important; }

/* 6) Título cabendo no mobile (sem reticências) */
.topbar__title{
  font-family: "Cormorant Garamond","Playfair Display", Georgia, Cambria, "Times New Roman", Times, serif !important;
  font-weight: 600 !important;
  color: #4A3B2A !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;                       /* tira o espaçamento extra */
  font-size: clamp(16px, 3.6vw, 19px) !important;     /* ligeiramente mais compacto */
  white-space: nowrap !important;
  overflow: visible !important;                        /* sem “…” */
  text-overflow: clip !important;
}

/* 7) “Coluna fantasma” pode encolher em telas estreitas para dar espaço ao título */
.topbar__right{ width: clamp(28px, 7vw, 44px) !important; }

/* 9) Seções ancoradas respeitam a barra fixa (rolagem com margem) */
section[id],
.novena, .status, .donate, .faq, .comments, .laudo{
  scroll-margin-top: calc(var(--topbar-h) + 8px);
}
.topbar__logoLink{ min-width: 40px !important; height: 40px !important; }
.logo{ height: 40px !important; width: auto !important; } /* antes: ~26–30px */
:root{ --topbar-h: 56px; } /* já deve existir; ajuste aqui se mudar a altura */
main{
  padding-top: calc(var(--topbar-h)) !important; /* +8px de respiro */
}
#doacao{
  scroll-margin-top: calc(var(--topbar-h) + 100px) !important; /* ajuste o 80px ao seu gosto */
}