/* ═══════════════════════════════════════════════════════════════════════
   Site institucional da Paróquia de Almeirim
   ───────────────────────────────────────────────────────────────────────
   Mesma identidade do portal e das aulas: pergaminho e vitral, ouro velho
   e azul-noite. Os tokens de cor/tipografia seguem Catequese_Online/publico/
   css/base.css (a fonte única de verdade); aqui ficam só os componentes
   próprios do site público.
   ═══════════════════════════════════════════════════════════════════════ */
/* Claro por omissão — pergaminho e vitral, ouro velho e azul-noite.
   Recomendação para um site de paróquia: claro, acolhedor, legível para
   qualquer idade e qualquer ecrã, coerente com "comunidade, proximidade,
   tradição" pedido na conceção do site. Um tema escuro por omissão é uma
   escolha estética moderna, mas não a mais adequada a este público — fica
   disponível automaticamente para quem já usa o sistema em modo escuro,
   nunca forçado a quem não pediu. */
:root{
  --ink:#2b2013; --ink-soft:#5a4c38; --bg:#F7F1E1; --card:#FFFDF6; --line:#e8dcc0;
  --gold:#A8841A; --gold-d:#7C610F; --gold-soft:#F3E7BE;
  --blue:#1B3A6B; --blue-d:#12274a; --blue-soft:#E3E9F3;
  --wine:#7B2D3E; --green:#2E6B4F; --green-soft:#E2EEE7;
  --radius:20px; --radius-sm:12px;
  --shadow-sm:0 2px 10px rgba(43,32,19,.08);
  --shadow:0 16px 34px -14px rgba(43,32,19,.28);
  --display:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
  /* Fundo escuro fixo (hero, rodapé): sempre o mesmo, claro ou escuro — estes
     blocos têm sempre texto claro por cima. */
  --fundo-escuro:linear-gradient(150deg,var(--blue-d),var(--blue) 60%,var(--gold-d));
  --rodape-bg:var(--blue-d);
}
@media(prefers-color-scheme:dark){
  :root{
    --ink:#F0E7D3; --ink-soft:#CBBFA3; --bg:#171310; --card:#221C14; --line:#3D3423;
    --gold:#D2AC3C; --gold-d:#E4C567; --gold-soft:#2b2417;
    --blue:#6E93CC; --blue-d:#A9C2E8; --blue-soft:#20293a;
    --wine:#C98494; --green:#77B394; --green-soft:#1c2b22;
    --shadow-sm:0 2px 10px rgba(0,0,0,.35);
    --shadow:0 16px 34px -14px rgba(0,0,0,.6);
    color-scheme:dark;
    --fundo-escuro:linear-gradient(150deg,#0d1a30,#16305c 60%,#7C610F);
    --rodape-bg:#0d1a30;
  }
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--bg);color:var(--ink);line-height:1.65}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
a{color:var(--blue);text-underline-offset:3px}
img{max-width:100%;display:block}

.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:12px;top:12px;background:var(--card);color:var(--ink);
                 padding:10px 16px;border-radius:10px;z-index:99}

/* ── Cabeçalho / menu ─────────────────────────────────────────────────── */
.cabecalho{background:color-mix(in srgb, var(--card) 88%, transparent);backdrop-filter:blur(10px);
           -webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.cabecalho .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.marca img{width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--line)}
.marca span{font-family:var(--display);font-weight:700;font-size:17px;color:var(--blue-d);letter-spacing:-.01em}
nav.menu{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
nav.menu a{position:relative;color:var(--ink-soft);text-decoration:none;font-size:14.5px;font-weight:600;
           padding:9px 14px;border-radius:10px;transition:background .18s ease,color .18s ease}
nav.menu a:hover,nav.menu a:focus-visible{background:var(--gold-soft);color:var(--blue-d)}
nav.menu a.catequese{color:var(--blue-d);background:var(--blue-soft);margin-left:6px}
nav.menu a.catequese:hover{filter:brightness(0.97)}
.menu-botao{display:none;background:none;border:0;font-size:24px;cursor:pointer;color:var(--blue-d);line-height:1;padding:4px}
@media(max-width:760px){
  nav.menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--card);
           border-bottom:1px solid var(--line);flex-direction:column;padding:10px;box-shadow:var(--shadow);gap:2px}
  nav.menu.aberto{display:flex}
  nav.menu a{padding:12px 14px}
  nav.menu a.catequese{margin-left:0;text-align:center}
  .menu-botao{display:block}
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{position:relative;color:#fff;padding:96px 0 84px;text-align:center;overflow:hidden;
      background:var(--fundo-escuro) center/cover no-repeat}
.hero.com-foto{background-image:
      linear-gradient(180deg,rgba(13,22,42,.55) 0%,rgba(13,22,42,.72) 55%,rgba(13,22,42,.92) 100%),
      var(--hero-foto-url);
      background-size:cover;background-position:center 30%}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:70px;
      background:linear-gradient(180deg,transparent,var(--bg));pointer-events:none}
.hero .conteudo-hero{position:relative;z-index:1}
.credito-foto{position:absolute;right:8px;bottom:6px;z-index:2;color:rgba(255,255,255,.55);
      font-size:10.5px;text-decoration:none;letter-spacing:.01em}
.credito-foto:hover{color:rgba(255,255,255,.85)}
.hero .selo-grande{width:104px;height:104px;border-radius:50%;object-fit:cover;margin:0 auto 22px;
      box-shadow:0 0 0 4px rgba(255,255,255,.85),0 20px 40px -12px rgba(0,0,0,.55)}
.hero h1{font-family:var(--display);font-size:clamp(30px,5.5vw,46px);font-weight:700;line-height:1.12;
      text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero p{opacity:.95;margin-top:14px;font-size:clamp(15.5px,2.5vw,19px);max-width:600px;margin-inline:auto;
      text-shadow:0 1px 10px rgba(0,0,0,.3)}
.hero .acoes{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.botao{display:inline-block;padding:14px 26px;border-radius:999px;font-weight:700;font-size:15px;
       text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.botao:hover,.botao:focus-visible{transform:translateY(-2px)}
.botao.principal{background:var(--gold);color:#2b2013;box-shadow:0 10px 24px -8px rgba(124,97,15,.55)}
.botao.principal:hover{filter:brightness(1.05);box-shadow:0 14px 28px -8px rgba(124,97,15,.65)}
.botao.secundario{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.55);
      backdrop-filter:blur(4px)}
.botao.secundario:hover{background:rgba(255,255,255,.2)}

/* ── Secções ───────────────────────────────────────────────────────────── */
section.seccao{margin:56px 0}
section.seccao > .cabec{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:20px}
section.seccao h2{font-family:var(--display);font-size:clamp(21px,3vw,26px);color:var(--blue-d);letter-spacing:-.01em}
section.seccao .ver-tudo{font-size:14px;font-weight:700;white-space:nowrap;color:var(--blue-d);
      padding:6px 4px;border-bottom:2px solid transparent;transition:border-color .18s ease}
section.seccao .ver-tudo:hover{border-color:var(--gold)}
.grelha{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}

.cartao{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
        overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
        transition:transform .22s ease,box-shadow .22s ease;position:relative}
.cartao:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.cartao .imagem{aspect-ratio:16/9;background:var(--gold-soft) center/cover no-repeat;
                 display:flex;align-items:center;justify-content:center;color:var(--gold-d);font-size:34px}
.cartao .corpo{padding:18px;display:flex;flex-direction:column;gap:7px;flex:1}
.cartao .data{font-size:12px;color:var(--gold-d);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.cartao h3{font-family:var(--display);font-size:17.5px;color:var(--blue-d);line-height:1.3}
.cartao p{font-size:14.5px;color:var(--ink-soft)}
.cartao a.cobrir{position:absolute;inset:0}

.lista-simples{display:grid;gap:10px}
.bloco-horario{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
      padding:8px;box-shadow:var(--shadow-sm)}
.bloco-horario + .bloco-horario{margin-top:16px}
.bloco-horario .titulo-local{display:flex;align-items:center;gap:10px;padding:12px 14px 10px;
      font-family:var(--display);color:var(--blue-d);font-size:16px}
.bloco-horario .titulo-local .marcador{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none}
.linha-horario{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;
               border-radius:var(--radius-sm);transition:background .15s ease}
.linha-horario:hover{background:var(--bg)}
.linha-horario strong{color:var(--ink);font-weight:600}
.linha-horario span.hora{font-weight:700;color:var(--gold-d);font-variant-numeric:tabular-nums;white-space:nowrap}

.atalho-catequese{background:linear-gradient(155deg,var(--card),var(--green-soft,#e2eee7));
        border:1px solid var(--line);border-left:6px solid var(--green);
        border-radius:var(--radius);padding:26px;text-decoration:none;color:inherit;display:block;
        transition:transform .2s ease,box-shadow .2s ease;box-shadow:var(--shadow-sm)}
.atalho-catequese:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.atalho-catequese h3{font-family:var(--display);color:var(--blue-d);margin-bottom:4px;font-size:18px}
.atalho-catequese p{font-size:14px;color:var(--ink-soft)}

.vazio{color:var(--ink-soft);font-size:14.5px;font-style:italic}

/* ── Faixa do calendário litúrgico (homepage) ────────────────────────────── */
.faixa-calendario{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:baseline;
      background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
      padding:12px 16px}
.fc-hoje strong{font-family:var(--display);color:var(--blue-d);font-size:15px;margin-right:6px}
.fc-hoje span{color:var(--ink-soft);font-size:13.5px}
.fc-item{display:flex;flex-direction:column;gap:1px}
.fc-rotulo{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-d)}
.fc-item span:not(.fc-rotulo){font-size:13.5px;color:var(--ink);font-weight:600}
.fc-reflexao{margin-top:10px;font-size:13.5px;font-style:italic;color:var(--ink-soft);
      border-left:3px solid var(--gold);padding-left:10px}

/* ── Rodapé ────────────────────────────────────────────────────────────── */
footer.rodape{background:var(--rodape-bg);color:#fff;padding:48px 0 24px;margin-top:64px}
footer.rodape .colunas{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;margin-bottom:28px}
footer.rodape h4{font-family:var(--display);font-size:14.5px;margin-bottom:12px;opacity:.85;
      text-transform:uppercase;letter-spacing:.06em}
footer.rodape p,footer.rodape a{font-size:14.5px;color:#fff;opacity:.88;text-decoration:none;line-height:1.9}
footer.rodape a:hover{opacity:1;text-decoration:underline}
footer.rodape .redes{display:flex;gap:10px;margin-top:8px}
footer.rodape .redes a{opacity:.9;font-size:19px;width:38px;height:38px;border-radius:50%;
      background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:background .15s}
footer.rodape .redes a:hover{background:rgba(255,255,255,.2);opacity:1}
footer.rodape .base{border-top:1px solid rgba(255,255,255,.15);padding-top:18px;text-align:center;font-size:12.5px;opacity:.65}

/* ── Conteúdo de página (A Paróquia, notícia, evento) ─────────────────── */
.pagina-cabec{background:var(--card-2,var(--card));border-bottom:1px solid var(--line);padding:36px 0}
.pagina-cabec h1{font-family:var(--display);font-size:clamp(24px,4vw,32px);color:var(--blue-d)}
.texto-livre{font-size:16px;line-height:1.8;max-width:760px}
.texto-livre p{margin-bottom:14px}
.texto-livre img{border-radius:var(--radius);margin:18px 0}

@media(max-width:600px){ .hero{padding:48px 0 40px} section.seccao{margin:36px 0} }

/* ── Homepage: tudo visível num ecrã, seja qual for a resolução ──────────
   A regra é sempre a mesma — página presa a 100dvh, tudo dimensionado em
   função da altura da janela (vh/dvh), nunca em pixels fixos — por isso
   não há um "modo grande" e um "modo pequeno" a saltar entre si: a mesma
   fórmula encolhe sozinha à medida que a janela encolhe.
   Só abaixo de ~820px de largura é que o hero e o conteúdo deixam de
   caber lado a lado e passam a empilhar-se (aí sim, o conteúdo mais longo
   pode precisar de um scroll interno — nunca da página toda). */
body.pagina-inicial{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
body.pagina-inicial .tela-inicial{display:flex;flex-direction:column;height:100%;min-height:0}
body.pagina-inicial .cabecalho{flex:none}
body.pagina-inicial .faixa-principal{flex:1;min-height:0;display:grid;grid-template-columns:1.1fr 1fr;overflow:hidden}

body.pagina-inicial .hero-inicial{padding:2dvh 0;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden}
body.pagina-inicial .hero-inicial::after{display:none}
body.pagina-inicial .hero-inicial .conteudo-hero{max-width:92%}
body.pagina-inicial .hero-inicial .selo-grande{width:clamp(40px,8dvh,88px);height:clamp(40px,8dvh,88px);margin:0 auto clamp(6px,1.4dvh,14px)}
body.pagina-inicial .hero-inicial h1{font-size:clamp(18px,4.2dvh,36px);line-height:1.1}
body.pagina-inicial .hero-inicial p{font-size:clamp(11px,1.9dvh,16px);margin-top:clamp(4px,1dvh,8px)}
body.pagina-inicial .hero-inicial .acoes{margin-top:clamp(10px,2dvh,18px);gap:10px}
body.pagina-inicial .hero-inicial .botao{padding:clamp(7px,1.4dvh,10px) clamp(12px,2vw,18px);font-size:clamp(11px,1.6dvh,13.5px)}

body.pagina-inicial .coluna-info{overflow-y:auto;padding-block:clamp(10px,2.5dvh,28px);display:flex;flex-direction:column;justify-content:center;gap:clamp(8px,1.6dvh,16px)}
body.pagina-inicial .coluna-info section.seccao{margin:0}
body.pagina-inicial .coluna-info section.seccao h2{font-size:clamp(15px,2.4dvh,21px)}
body.pagina-inicial .coluna-info section.seccao .cabec{margin-bottom:clamp(6px,1.4dvh,14px)}
body.pagina-inicial .coluna-info .bloco-horario{padding:clamp(4px,.8dvh,8px)}
body.pagina-inicial .coluna-info .bloco-horario .titulo-local{padding:clamp(6px,1.2dvh,10px) 12px clamp(4px,.8dvh,7px);font-size:clamp(12px,1.7dvh,14.5px)}
body.pagina-inicial .coluna-info .linha-horario{padding:clamp(5px,1.1dvh,9px) 12px}
body.pagina-inicial .coluna-info .linha-horario strong,
body.pagina-inicial .coluna-info .linha-horario span.hora{font-size:clamp(12px,1.7dvh,14.5px)}
body.pagina-inicial .coluna-info .atalho-catequese{padding:clamp(10px,2dvh,18px)}
body.pagina-inicial .coluna-info .faixa-calendario{padding:clamp(8px,1.4dvh,12px) clamp(10px,1.6vw,16px);gap:clamp(6px,1.2dvh,14px) 20px}
body.pagina-inicial .coluna-info .fc-hoje strong,
body.pagina-inicial .coluna-info .fc-item span:not(.fc-rotulo){font-size:clamp(12px,1.6dvh,14.5px)}
body.pagina-inicial .coluna-info .fc-reflexao{margin-top:clamp(6px,1.2dvh,10px);font-size:clamp(11.5px,1.5dvh,13.5px)}
body.pagina-inicial .coluna-info .atalho-catequese h3{font-size:clamp(13.5px,1.9dvh,16px)}
body.pagina-inicial .coluna-info .atalho-catequese p{font-size:clamp(11.5px,1.6dvh,13px)}

/* Rodapé sempre reduzido a uma linha nesta página — os contactos completos
   já vivem em /contactos/, não precisam de se repetir aqui a ocupar altura. */
body.pagina-inicial footer.rodape-compacto{flex:none;margin-top:0;padding:clamp(6px,1.2dvh,10px) 0}
body.pagina-inicial footer.rodape-compacto .colunas,
body.pagina-inicial footer.rodape-compacto h4{display:none}
body.pagina-inicial footer.rodape-compacto .base{border-top:0;padding-top:0;font-size:clamp(10px,1.4dvh,12.5px)}

/* Janela estreita a mais para caber hero + conteúdo lado a lado: empilha-se,
   mas continua preso a 100dvh — o hero fica com uma altura pequena e fixa
   (não o ecrã todo) e é só a coluna de conteúdo, se for mesmo mais longa do
   que o espaço restante, que ganha scroll interno. */
@media(max-width:820px){
  body.pagina-inicial .faixa-principal{display:flex;flex-direction:column}
  body.pagina-inicial .hero-inicial{flex:none;height:38dvh;padding:1.5dvh 0}
  body.pagina-inicial .hero-inicial .selo-grande{width:clamp(36px,7dvh,56px);height:clamp(36px,7dvh,56px)}
  body.pagina-inicial .hero-inicial h1{font-size:clamp(17px,4.5dvh,26px)}
  body.pagina-inicial .hero-inicial p{display:none}
  body.pagina-inicial .hero-inicial .acoes{margin-top:clamp(8px,1.6dvh,14px)}
  body.pagina-inicial .coluna-info{flex:1;min-height:0;justify-content:flex-start}
}