/* ============================================================
   SGI · Design System
   Tokens derivados do DESIGN.md (Meta) — mesmos valores usados
   na Central de Operações, para consistência entre os dois sistemas.
   Base: Bootstrap 5.3.3 (estrutura) + estes tokens (aparência).
   ============================================================ */

:root {
  /* ---- cor ---- */
  --sgi-primary:        #0064e0;   /* cobalt */
  --sgi-primary-deep:   #0457cb;   /* estado pressionado */
  --sgi-primary-soft:   #0091ff;
  --sgi-on-primary:     #ffffff;
  --sgi-ink-button:     #000000;   /* ação de marketing */
  --sgi-canvas:         #ffffff;
  --sgi-surface-soft:   #f1f4f7;
  --sgi-surface-sunken: #f8fafc;
  --sgi-ink-deep:       #0a1317;
  --sgi-ink:            #1c1e21;
  --sgi-charcoal:       #444950;
  --sgi-steel:          #5d6c7b;
  --sgi-stone:          #8595a4;
  --sgi-hairline:       #ced0d4;
  --sgi-hairline-soft:  #dee3e9;

  /* ---- semânticos ---- */
  --sgi-success:        #31a24c;
  --sgi-attention:      #f2a918;
  --sgi-warning:        #f7b928;
  --sgi-critical:       #e41e3f;
  --sgi-critical-strong:#f0284a;

  /* ---- tipografia ---- */
  --sgi-font: "Optimistic VF", -apple-system, BlinkMacSystemFont, "Segoe UI",
              Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --sgi-fs-hero:   64px;
  --sgi-fs-display:48px;
  --sgi-fs-h-lg:   36px;
  --sgi-fs-h-md:   28px;
  --sgi-fs-h-sm:   24px;
  --sgi-fs-sub:    18px;
  --sgi-fs-body:   16px;
  --sgi-fs-sm:     14px;
  --sgi-fs-caption:12px;

  /* ---- raio ---- */
  --sgi-r-xs: 2px;  --sgi-r-sm: 4px;  --sgi-r-md: 6px;  --sgi-r-lg: 8px;
  --sgi-r-xl: 16px; --sgi-r-xxl: 24px; --sgi-r-xxxl: 32px;
  --sgi-r-full: 100px; --sgi-r-circle: 9999px;

  /* ---- espaçamento ---- */
  --sgi-sp-xxs: 4px; --sgi-sp-xs: 8px; --sgi-sp-sm: 10px; --sgi-sp-md: 12px;
  --sgi-sp-base: 16px; --sgi-sp-lg: 20px; --sgi-sp-xl: 24px; --sgi-sp-xxl: 32px;
  --sgi-sp-section: 64px;

  /* ---- elevação ---- */
  --sgi-shadow-card: 0 1px 2px rgba(10,19,23,.06), 0 1px 4px rgba(20,22,26,.05);
  --sgi-shadow-lift: 0 4px 12px rgba(10,19,23,.10), 0 2px 4px rgba(10,19,23,.06);

  /* ---- transições ---- */
  --sgi-ease: cubic-bezier(.2,.7,.3,1);
  --sgi-t-fast: 160ms var(--sgi-ease);
  --sgi-t-mid:  240ms var(--sgi-ease);
}

/* ============================================================
   Base
   ============================================================ */
body {
  font-family: var(--sgi-font);
  color: var(--sgi-ink);
  letter-spacing: -.16px;
  -webkit-font-smoothing: antialiased;
  /* No design system, branco e a cor do CARTAO e o cinza e a cor da PAGINA.
     Sem o fundo cinza, tudo fica branco chapado e as superficies se perdem. */
  background: var(--sgi-surface-soft);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--sgi-ink-deep);
  line-height: 1.25;
  letter-spacing: -.3px;
}
/* A regra acima usa seletor de tag e escurece todo titulo do sistema,
   inclusive os que ficam sobre fundo escuro (hero, sidebar, cabecalhos
   coloridos). As utilitarias do Bootstrap tem especificidade de classe e
   vencem; o reforço abaixo cobre hero e sidebar, que nao usam classe. */
.sgi-hero h1, .sgi-hero h2, .sgi-hero h3,
.sgi-hero h4, .sgi-hero h5, .sgi-hero h6,
.sgi-sidebar h1, .sgi-sidebar h2, .sgi-sidebar h3,
.sgi-sidebar h4, .sgi-sidebar h5, .sgi-sidebar h6 {
  color: #fff;
}
/* Onde o fundo e definido por variavel (cor da igreja), o branco continua
   correto; onde o elemento usa .text-white do Bootstrap, ja funciona. */
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4,
.bg-primary h5, .bg-primary h6,
.text-white h1, .text-white h2, .text-white h3, .text-white h4,
.text-white h5, .text-white h6 { color: #fff; }

.text-muted    { color: var(--sgi-steel) !important; }
.text-secondary { color: var(--sgi-charcoal) !important; }
small, .small  { letter-spacing: -.14px; }

/* ============================================================
   Botões — pill, sempre
   O design system proíbe botão quadrado: sinaliza widget de terceiros.
   ============================================================ */
.btn {
  border-radius: var(--sgi-r-full);
  font-family: var(--sgi-font);
  font-weight: 700;
  letter-spacing: -.14px;
  transition: background var(--sgi-t-fast), color var(--sgi-t-fast),
              border-color var(--sgi-t-fast), transform var(--sgi-t-fast);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--sgi-primary);
  border-color: var(--sgi-primary);
  color: var(--sgi-on-primary);
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--sgi-primary-deep);
  border-color: var(--sgi-primary-deep);
  color: var(--sgi-on-primary);
}

.btn-light {
  background: var(--sgi-canvas);
  border-color: var(--sgi-canvas);
  color: var(--sgi-ink-deep);
}
.btn-light:hover { background: var(--sgi-surface-soft); color: var(--sgi-ink-deep); }

.btn-outline-primary {
  color: var(--sgi-primary);
  border-color: var(--sgi-primary);
}
.btn-outline-primary:hover {
  background: var(--sgi-primary);
  border-color: var(--sgi-primary);
  color: var(--sgi-on-primary);
}

.btn-outline-light { border-width: 2px; }
.btn-link { border-radius: var(--sgi-r-md); font-weight: 700; }

/* Botão pequeno dentro de card — mantém pill, texto sem caixa */
.btn-sm {
  border-radius: var(--sgi-r-full);
  padding-inline: 14px;
  font-size: var(--sgi-fs-caption);
}

/* ============================================================
   Cartões
   ============================================================ */
.card {
  background: var(--sgi-canvas);
  border: 1px solid var(--sgi-hairline-soft);
  border-radius: var(--sgi-r-xl);
  box-shadow: var(--sgi-shadow-card);
  transition: transform var(--sgi-t-mid), box-shadow var(--sgi-t-mid),
              border-color var(--sgi-t-mid);
}
.card:hover {
  box-shadow: var(--sgi-shadow-lift);
  border-color: var(--sgi-hairline);
}

.card-culto {
  background: var(--sgi-canvas);
  border: 1px solid var(--sgi-hairline-soft);
  border-radius: var(--sgi-r-xl);
  padding: var(--sgi-sp-xl);
  transition: transform var(--sgi-t-mid), box-shadow var(--sgi-t-mid);
}
.card-culto:hover {
  transform: translateY(-4px);
  box-shadow: var(--sgi-shadow-lift);
}

/* ============================================================
   Seções
   ============================================================ */
.section-title {
  position: relative;
  font-weight: 700;
  color: var(--sgi-ink-deep);
  letter-spacing: -.4px;
  margin-bottom: var(--sgi-sp-xxl);
  padding-bottom: var(--sgi-sp-md);
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 60px; height: 4px;
  background: var(--sgi-primary);
  border-radius: 2px;
}

/* ============================================================
   Tabelas
   ============================================================ */
.table thead th {
  font-size: var(--sgi-fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sgi-charcoal);
  background: var(--sgi-surface-soft);
  border-bottom: 1px solid var(--sgi-hairline-soft);
}
.table td { border-bottom: 1px solid var(--sgi-hairline-soft); }
.table-hover tbody tr:hover { background: var(--sgi-surface-soft); }

/* ============================================================
   Badges e formulários
   ============================================================ */
.badge {
  border-radius: var(--sgi-r-full);
  font-weight: 700;
  padding: 4px 10px;
  letter-spacing: -.14px;
}

.form-control, .form-select {
  border-radius: var(--sgi-r-lg);
  border-color: var(--sgi-hairline);
  min-height: 44px;          /* alvo de toque mínimo */
}
.form-control:focus, .form-select:focus {
  border-color: var(--sgi-primary);
  box-shadow: 0 0 0 4px rgba(0,100,224,.12);
}

.form-label {
  font-weight: 700;
  color: var(--sgi-ink-deep);
  margin-bottom: var(--sgi-sp-xs);
}

/* ============================================================
   Sidebar do portal
   ============================================================ */
/* A sidebar do portal usa fundo escuro (cor da igreja). Por isso as regras
   de item aqui operam sobre superficie escura, com texto claro. */
.sgi-sidebar .nav-link {
  color: rgba(255,255,255,.78);
  font-weight: 700;
  font-size: var(--sgi-fs-sm);
  letter-spacing: -.14px;
  border-radius: var(--sgi-r-lg);
  padding: 10px var(--sgi-sp-base);
  transition: background var(--sgi-t-fast), color var(--sgi-t-fast);
}
.sgi-sidebar .nav-link:hover {
  background: rgba(255,255,255,.10);
  color: #fff;
}
/* Item ativo: pílula branca, para standout sobre a cor da igreja */
.sgi-sidebar .nav-link.active {
  background: #fff;
  color: var(--sgi-ink-deep);
}
.sgi-sidebar .sidebar-header,
.sgi-sidebar .sidebar-footer { color: rgba(255,255,255,.8); }

/* ============================================================
   Navbar pública
   ============================================================ */
.sgi-navbar {
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--sgi-hairline-soft);
}
.sgi-navbar .nav-link {
  color: var(--sgi-ink);
  font-weight: 700;
  font-size: var(--sgi-fs-sm);
  border-radius: var(--sgi-r-full);
  padding: 8px var(--sgi-sp-base);
  transition: background var(--sgi-t-fast), color var(--sgi-t-fast);
}
.sgi-navbar .nav-link:hover { background: var(--sgi-surface-soft); color: var(--sgi-ink-deep); }
.sgi-navbar .nav-link.active {
  background: var(--sgi-ink-deep);
  color: var(--sgi-canvas);
}

/* ============================================================
   Hero
   ============================================================ */
.sgi-hero {
  position: relative;
  min-height: 85vh;
  color: #fff;
}
/* Reforco: cabecalhos dentro do hero ignoram a cor global de h1..h6 */
.sgi-hero h1, .sgi-hero h2, .sgi-hero h3,
.sgi-hero h4, .sgi-hero h5, .sgi-hero h6 { color: #fff; }
.sgi-hero__slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.sgi-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
              rgba(15,23,42,.35) 0%,
              rgba(15,23,42,.55) 55%,
              rgba(15,23,42,.85) 100%);
}
.sgi-hero__content {
  position: absolute; bottom: 0; left: 0; width: 100%;
  padding: var(--sgi-sp-xxl) 0 var(--sgi-sp-section);
}
.sgi-hero__title {
  font-size: var(--sgi-fs-display);
  font-weight: 700;
  letter-spacing: -.02em;
  /* A regra global de h1..h6 usa seletor de tag e define ink-deep, que
     vence o color herdado do .sgi-hero. Por isso o título precisa declarar
     a própria cor. */
  color: #fff;
}
.sgi-hero__lead {
  font-size: var(--sgi-fs-sub);
  opacity: .95;
}

/* ============================================================
   Clamp de descrição (componente existente no projeto)
   ============================================================ */
.desc-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.desc-clamp.open { -webkit-line-clamp: unset; }

/* ============================================================
   Acessibilidade
   ============================================================ */
/* O sublinhado automatico do navegador compete com o peso da tipografia do
   design system. Aqui o sublinhado so aparece em link dentro de texto corrido. */
a { text-decoration: none; }
a:hover { text-decoration: none; }
a:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--sgi-primary);
  outline-offset: 2px;
  border-radius: var(--sgi-r-sm);
}

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

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width: 1023px) {
  .sgi-hero__title { font-size: var(--sgi-fs-h-lg); }
}
@media (max-width: 767px) {
  .sgi-hero { min-height: 70vh; }
  .sgi-hero__title { font-size: var(--sgi-fs-h-md); }
  .sgi-hero__lead  { font-size: var(--sgi-fs-body); }
  .section-title   { font-size: var(--sgi-fs-h-md); margin-bottom: var(--sgi-sp-xl); }
}

/* ============================================================
   Cabeçalho de página (usado nas páginas internas da landing)
   Dá a mesma entrada visual da home para o resto do site.
   ============================================================ */
.cabecalho-pagina {
  padding: calc(76px + var(--sgi-sp-xxl)) 0 var(--sgi-sp-xxl);
  background: var(--sgi-canvas);
  border-bottom: 1px solid var(--sgi-hairline-soft);
}
.cabecalho-pagina__titulo {
  font-size: var(--sgi-fs-display);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: var(--sgi-sp-xs);
  color: var(--sgi-ink-deep);
}
.cabecalho-pagina__legenda {
  font-size: var(--sgi-fs-sub);
  color: var(--sgi-charcoal);
  margin-bottom: 0;
}

/* Lista de dados (células, notícias, gravados) */
.lista-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sgi-sp-base);
  padding: var(--sgi-sp-lg) var(--sgi-sp-xl);
  background: var(--sgi-canvas);
  border: 1px solid var(--sgi-hairline-soft);
  border-radius: var(--sgi-r-xl);
  box-shadow: var(--sgi-shadow-card);
  transition: transform var(--sgi-t-mid), box-shadow var(--sgi-t-mid), border-color var(--sgi-t-mid);
  height: 100%;
}
.lista-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--sgi-shadow-lift);
  border-color: var(--sgi-hairline);
}
.lista-item__corpo { min-width: 0; flex: 1; }
.lista-item__titulo {
  font-weight: 700;
  color: var(--sgi-ink-deep);
  line-height: 1.25;
  margin-bottom: var(--sgi-sp-xs);
}

/* Estado vazio */
.estado-vazio {
  text-align: center;
  padding: var(--sgi-sp-section) var(--sgi-sp-xl);
  background: var(--sgi-canvas);
  border: 1px dashed var(--sgi-hairline);
  border-radius: var(--sgi-r-xl);
  color: var(--sgi-steel);
}
/* Todo o conteudo do estado vazio e centralizado. O <i> e inline por padrao,
   entao sem display:block ele ficaria colado ao lado do texto. */
.estado-vazio > i.bi {
  display: block;
  font-size: 40px;
  line-height: 1;
  color: var(--sgi-stone);
  margin: 0 auto var(--sgi-sp-lg);
}
.estado-vazio__titulo {
  font-size: var(--sgi-fs-h-sm);
  font-weight: 700;
  color: var(--sgi-ink-deep);
  margin: 0 0 var(--sgi-sp-xs);
}
.estado-vazio__texto {
  font-size: var(--sgi-fs-body-sm);
  color: var(--sgi-steel);
  margin: 0 auto var(--sgi-sp-lg);
  max-width: 44ch;
}
.estado-vazio > small,
.estado-vazio > p { display: block; }
.estado-vazio > small { margin-bottom: var(--sgi-sp-base); }
.estado-vazio > .btn { margin-top: var(--sgi-sp-xs); }
/* Link dentro do estado vazio mantem a cor de acao */
.estado-vazio__texto a { color: var(--sgi-primary); font-weight: 700; }

/* Cartão com ícone à esquerda */
.cartao-icone {
  display: flex;
  gap: var(--sgi-sp-base);
  padding: var(--sgi-sp-xl);
  background: var(--sgi-canvas);
  border: 1px solid var(--sgi-hairline-soft);
  border-radius: var(--sgi-r-xl);
  box-shadow: var(--sgi-shadow-card);
  height: 100%;
}
.cartao-icone__marca {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--sgi-r-circle);
  display: grid; place-items: center;
  background: var(--sgi-primary); color: var(--sgi-on-primary);
  font-size: 20px;
}

@media (max-width: 767px) {
  .cabecalho-pagina { padding: calc(76px + var(--sgi-sp-xl)) 0 var(--sgi-sp-xl); }
  .cabecalho-pagina__titulo { font-size: var(--sgi-fs-h-lg); }
}

/* ============================================================
   Card de evento
   Mostra data em destaque, local, e um badge que indica o quao proximo
   o evento esta (hoje, amanha, dentro de N dias).
   ============================================================ */
.card-evento {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0;
}
.card-evento__foto {
  position: relative;
  background: var(--sgi-surface-soft);
  overflow: hidden;
}
.card-evento__foto img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: cover;
}
.card-evento__foto--vazia {
  display: grid; place-items: center;
  color: var(--sgi-stone);
}
.card-evento__foto--vazia i { font-size: 40px; }

.card-evento__selo {
  position: absolute;
  top: var(--sgi-sp-md); left: var(--sgi-sp-md);
  padding: 5px 12px;
  border-radius: var(--sgi-r-full);
  font-size: var(--sgi-fs-caption);
  font-weight: 700;
  letter-spacing: -.14px;
  background: rgba(255,255,255,.94);
  color: var(--sgi-ink-deep);
}
.card-evento__selo--hoje   { background: var(--sgi-critical); color: #fff; }
.card-evento__selo--amanha { background: var(--sgi-attention); color: var(--sgi-ink-deep); }
.card-evento__selo--semana { background: var(--sgi-primary);   color: #fff; }

.card-evento__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sgi-sp-md);
  padding: var(--sgi-sp-xl);
}
.card-evento__titulo {
  font-size: var(--sgi-fs-h-sm);
  font-weight: 700;
  line-height: 1.25;
  color: var(--sgi-ink-deep);
  margin: 0;
}
/* Faixa com dia e hora, no lugar da linha de metadado */
.card-evento__quando {
  display: flex;
  align-items: center;
  gap: var(--sgi-sp-sm);
  padding: var(--sgi-sp-md) var(--sgi-sp-base);
  background: var(--sgi-surface-soft);
  border-radius: var(--sgi-r-lg);
}
.card-evento__dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
  padding-right: var(--sgi-sp-md);
  border-right: 1px solid var(--sgi-hairline);
  line-height: 1.1;
}
.card-evento__dia-num { font-size: var(--sgi-fs-h-sm); font-weight: 700; color: var(--sgi-primary); }
.card-evento__dia-mes { font-size: 10px; font-weight: 700; color: var(--sgi-steel); text-transform: uppercase; letter-spacing: .06em; }
.card-evento__hora { font-size: var(--sgi-fs-body-sm); font-weight: 700; color: var(--sgi-ink-deep); }
.card-evento__quando-txt { font-size: var(--sgi-fs-caption); color: var(--sgi-steel); }

.card-evento__local {
  display: flex; align-items: flex-start; gap: var(--sgi-sp-xs);
  font-size: var(--sgi-fs-body-sm); color: var(--sgi-charcoal);
}
.card-evento__local i { color: var(--sgi-stone); margin-top: 2px; }

.card-evento__desc {
  font-size: var(--sgi-fs-body-sm);
  color: var(--sgi-charcoal);
  line-height: 1.5;
  margin: 0;
}
.card-evento__rodape { margin-top: auto; padding-top: var(--sgi-sp-sm); }

/* ============================================================
   Trilha com rolagem horizontal (carrossel)
   3 cards por vez no desktop, menos em telas menores. Sem JS:
   o proprio container rola, com o snap do navegador.
   ============================================================ */
.trilha {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--sgi-sp-lg)) / 3);
  gap: var(--sgi-sp-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* a barra de rolagem nativa some, mas a rolagem por toque/mouse continua */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
  /* evita que o card encoste na borda da section */
  margin-inline: calc(-1 * var(--sgi-sp-xs));
  padding-inline: var(--sgi-sp-xs);
}
.trilha::-webkit-scrollbar { display: none; }
.trilha > * { scroll-snap-align: start; }

/* Setas: so aparecem quando ha mais conteudo para ver */
.trilha-controle {
  display: flex;
  align-items: center;
  gap: var(--sgi-sp-sm);
}
.trilha-seta {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--sgi-r-circle);
  border: 1px solid var(--sgi-hairline);
  background: var(--sgi-canvas);
  color: var(--sgi-ink-deep);
  cursor: pointer;
  transition: background var(--sgi-t-fast), border-color var(--sgi-t-fast);
}
.trilha-seta:hover:not(:disabled) { background: var(--sgi-surface-soft); border-color: var(--sgi-steel); }
.trilha-seta:disabled { opacity: .3; cursor: default; }
.trilha-seta svg { width: 18px; height: 18px; }

/* Contador de posicao */
.trilha-contagem {
  font-size: var(--sgi-fs-caption);
  color: var(--sgi-steel);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1199px) {
  .trilha { grid-auto-columns: calc((100% - var(--sgi-sp-lg)) / 2); }
}
@media (max-width: 767px) {
  .trilha { grid-auto-columns: 84%; gap: var(--sgi-sp-md); }
}

/* ============================================================
   Card de noticia
   Foto maior que a do card de evento: a imagem e o principal
   atrativo da noticia.
   ============================================================ */
.card-noticia {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0;
}
.card-noticia__foto {
  position: relative;
  background: var(--sgi-surface-soft);
  overflow: hidden;
}
/* A altura acompanha a proporcao da imagem em vez de cortar. Com altura
   fixa, o cartaz da igreja perdia 66% do conteudo e o titulo inteiro
   ficava fora do quadro. O teto existe apenas para a foto panoramica
   nao virar uma faixa fina. */
.card-noticia__foto img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
}
.card-noticia__foto--vazia {
  display: grid; place-items: center;
  color: var(--sgi-stone);
}
.card-noticia__foto--vazia i { font-size: 40px; }

.card-noticia__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--sgi-sp-sm);
  padding: var(--sgi-sp-xl);
}
.badge-categoria { align-self: flex-start; }
.card-noticia__titulo {
  font-size: var(--sgi-fs-h-sm);
  font-weight: 700;
  line-height: 1.25;
  color: var(--sgi-ink-deep);
  margin: 0;
}
.card-noticia__data {
  display: flex; align-items: center; gap: var(--sgi-sp-xs);
  font-size: var(--sgi-fs-caption);
  color: var(--sgi-steel);
  margin: 0;
}
.card-noticia__data i { color: var(--sgi-stone); }
.card-noticia__desc {
  font-size: var(--sgi-fs-body-sm);
  color: var(--sgi-charcoal);
  line-height: 1.5;
  margin: 0;
}
.card-noticia__rodape { margin-top: auto; }

/* ============================================================
   Card de noticia clicavel
   O <a> envolve o card inteiro: a area clicavel e a do card,
   nao so o texto do titulo.
   ============================================================ */
a.card-noticia {
  text-decoration: none;
  color: inherit;
  transition: transform var(--sgi-t-mid), box-shadow var(--sgi-t-mid), border-color var(--sgi-t-mid);
}
a.card-noticia:hover {
  transform: translateY(-3px);
  box-shadow: var(--sgi-shadow-lift);
  border-color: var(--sgi-hairline);
  text-decoration: none;
}
a.card-noticia:focus-visible {
  outline: 2px solid var(--sgi-primary);
  outline-offset: 2px;
}
/* O cursor de mao so no card que navega */
a.card-noticia, a.card-evento { cursor: pointer; }

/* ============================================================
   Pagina de detalhe da noticia
   ============================================================ */
.pagina-noticia {
  max-width: 820px;
  margin: 0 auto;
  padding: calc(76px + var(--sgi-sp-xxl)) 0 var(--sgi-sp-section);
}
/* A foto aparece inteira: sem cover, sem corte */
.pagina-noticia__figura {
  margin: 0 0 var(--sgi-sp-xxl);
  border-radius: var(--sgi-r-xl);
  overflow: hidden;
  box-shadow: var(--sgi-shadow-card);
  background: var(--sgi-surface-soft);
}
/* Mesmo padrao do projeto carros: a imagem tem altura fixa e o cover
   preenche o quadro. Sem teto, foto vertical ocupava a tela inteira. */
/* Mesma regra dos cards: altura pela proporcao, com teto. O cover so
   entra em cena quando a imagem excede o teto. */
.pagina-noticia__figura img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
}

.pagina-noticia__voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--sgi-sp-xs);
  font-size: var(--sgi-fs-body-sm);
  font-weight: 700;
  color: var(--sgi-primary);
  margin-bottom: var(--sgi-sp-md);
}
.pagina-noticia__voltar:hover { color: var(--sgi-primary-deep); text-decoration: none; }

.pagina-noticia__titulo {
  font-size: var(--sgi-fs-display);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.17;
  color: var(--sgi-ink-deep);
  margin: var(--sgi-sp-sm) 0 var(--sgi-sp-base);
}
.pagina-noticia__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sgi-sp-base);
  padding-bottom: var(--sgi-sp-xl);
  border-bottom: 1px solid var(--sgi-hairline-soft);
  margin-bottom: var(--sgi-sp-xl);
  font-size: var(--sgi-fs-body-sm);
  color: var(--sgi-steel);
}
.pagina-noticia__meta span { display: inline-flex; align-items: center; gap: 6px; }

.pagina-noticia__texto { font-size: var(--sgi-fs-body); line-height: 1.7; color: var(--sgi-ink); }
.pagina-noticia__texto p { margin: 0 0 var(--sgi-sp-base); }

.pagina-noticia__outras {
  margin-top: var(--sgi-sp-section);
  padding-top: var(--sgi-sp-xl);
  border-top: 1px solid var(--sgi-hairline-soft);
}
.pagina-noticia__outras-titulo {
  font-size: var(--sgi-fs-h-sm);
  font-weight: 700;
  color: var(--sgi-ink-deep);
  margin-bottom: var(--sgi-sp-lg);
}
.card-noticia-mini {
  display: flex;
  flex-direction: column;
  background: var(--sgi-canvas);
  border: 1px solid var(--sgi-hairline-soft);
  border-radius: var(--sgi-r-xl);
  overflow: hidden;
  text-decoration: none;
  height: 100%;
  transition: transform var(--sgi-t-mid), box-shadow var(--sgi-t-mid), border-color var(--sgi-t-mid);
}
.card-noticia-mini:hover {
  transform: translateY(-3px);
  box-shadow: var(--sgi-shadow-lift);
  border-color: var(--sgi-hairline);
  text-decoration: none;
}
.card-noticia-mini__foto {
  display: block;
  position: relative;
  flex-shrink: 0;
  background: var(--sgi-surface-soft);
  overflow: hidden;
}
/* Mesma regra dos demais cards: altura pela proporcao, com teto.
   Com altura fixa, a foto do cartaz perdia o titulo inteiro. */
.card-noticia-mini__foto img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 180px;
  object-fit: cover;
}
.card-noticia-mini__foto--vazia { display: grid; place-items: center; color: var(--sgi-stone); }
.card-noticia-mini__titulo {
  display: block;
  padding: var(--sgi-sp-base) var(--sgi-sp-lg);
  font-weight: 700;
  font-size: var(--sgi-fs-body-sm);
  color: var(--sgi-ink-deep);
  line-height: 1.35;
}

@media (max-width: 767px) {
  .pagina-noticia { padding: calc(76px + var(--sgi-sp-xl)) 0 var(--sgi-sp-xxl); }
  .pagina-noticia__titulo { font-size: var(--sgi-fs-h-lg); }
}

/* Botoes de acao da pagina de detalhe */
.pagina-noticia__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sgi-sp-md);
  margin-top: var(--sgi-sp-xl);
  padding-top: var(--sgi-sp-xl);
  border-top: 1px solid var(--sgi-hairline-soft);
}