/* ==========================================================================
   INTERACTION & UI — DEHONIANOS BRM
   Animações de conteúdo (reveals, entradas, GSAP/ScrollTrigger, Lenis, marquee,
   parallax, glow e progress bar) REMOVIDAS por decisão do usuário (09/2026):
   nada é escondido nem movido por scroll. Restam apenas transições de UI
   (hover de controles, dropdowns, modais, header retrátil e back-to-top).
   ========================================================================== */

/* === 1. SCROLL REVEALS — PROGRESSIVE ENHANCEMENT SEGURO ===
   Por padrão (sem JS ou se JS falhar): TUDO É 100% VISÍVEL (Sem tela branca).
   Somente quando o motor JS adiciona a classe 'has-motion' no <html>,
   os elementos recebem a preparação sutil de subida (16px) e fade suave.
   Ao atingir a viewport, o IntersectionObserver aplica .is-revealed. */
.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale,
.auto-reveal {
  opacity: 1;
  transform: none;
}

html.has-motion .reveal:not(.is-revealed),
html.has-motion .reveal-up:not(.is-revealed),
html.has-motion .auto-reveal:not(.is-revealed) {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

html.has-motion .reveal-left:not(.is-revealed) {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

html.has-motion .reveal-right:not(.is-revealed) {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

html.has-motion .reveal-scale:not(.is-revealed) {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

html.has-motion .reveal.is-revealed,
html.has-motion .reveal-up.is-revealed,
html.has-motion .reveal-left.is-revealed,
html.has-motion .reveal-right.is-revealed,
html.has-motion .reveal-scale.is-revealed,
html.has-motion .auto-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
  will-change: auto;
}

/* Suporte a delays de stagger refinados (50ms a 200ms) */
html.has-motion .reveal-delay-1 { transition-delay: 50ms; }
html.has-motion .reveal-delay-2 { transition-delay: 100ms; }
html.has-motion .reveal-delay-3 { transition-delay: 150ms; }
html.has-motion .reveal-delay-4 { transition-delay: 200ms; }

/* Lenis Smooth Scroll Rules */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* === 2. TRANSIÇÃO DE DROPDOWNS, MODAIS E PAINÉIS DE ABAS === */
[id$="-dropdown-menu"] {
  transform-origin: top center;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.group:hover > [id$="-dropdown-menu"] {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.tab-panel,
.continent-panel,
[data-panel] {
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.tab-panel.active,
.continent-panel:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
}

.modal-backdrop {
  transition: opacity 0.2s ease, backdrop-filter 0.2s ease;
}

.modal-container {
  transform: scale(0.96) translateY(8px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.modal-open .modal-container {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* === 3. SISTEMA DE HOVER EM CARDS (DIRETRIZ DEHONIANA & APPLE DESIGN) ===
   1. REGRA ABSOLUTA DE NÃO-DISTORÇÃO:
      - O hover é aplicado EXCLUSIVAMENTE aos cards (containers).
      - NENHUMA foto ou elemento interno sofre zoom, escala (scale) ou distorção.
      - As fotos permanecem 100% nítidas, estáveis e naturais (transform: none !important).
   2. ELEVAÇÃO E SOMBRA SUAVES NOS CARDS:
      - Sem distorção por scale(1.02) ou saltos exagerados (-8px).
      - Translação vertical sutil (translateY(-3px)) com sombra projetada suave.
   3. CONTRASTE DE TEXTO E CORES (WCAG AAA):
      - Em cards com fundo azul (#0c3a4a / navy): TODO texto, título e ícone passa para BRANCO (#ffffff).
      - Em cards com fundo branco: textos em azul/navy mantêm contraste perfeito (#0c3a4a / #1e293b).
      - Em cards azuis que invertem para branco: textos passam estritamente para AZUL (#0c3a4a).
      - NUNCA permitir texto branco sobre fundo branco ou texto azul sobre fundo azul.
*/

/* --- REGRA UNIVERSAL: FOTOS E ELEMENTOS INTERNOS NÃO SOFREM SCALE --- */
img,
picture img,
.card-hover img,
.rf-card img,
.obra-card img,
.local-card img,
.agenda-card img,
.noticia-card img,
.noticia-portal-card img,
.necrologio-card img,
.religioso-card img,
.home-gallery-card img,
.vocation-brand-card img,
.gallery-photo-thumb img,
#quick-cards-grid img,
#news-grid img,
#eventos-grid img,
#memorial-grid img,
#profile-galeria-grid img,
[class*="card"] img,
[class*="card"]:hover img,
.group:hover img,
a:hover img,
article:hover img {
  transform: none !important;
  transition: opacity 0.3s ease, filter 0.3s ease !important;
}

/* Desativação total de overlays que escurecem ou colorem fotos em hover */
.local-card .relative::after,
.obra-card .relative::after,
.agenda-card .relative::after,
.noticia-portal-card .relative::after,
#news-grid > div .relative::after,
body:has(#agenda-calendar) #eventos-grid article .relative::after,
.necrologio-card .relative::after,
#memorial-grid a .relative::after,
#profile-galeria-grid > div::after,
.memorial-photo-container::after {
  display: none !important;
}

/* Preserva visibilidade das badges sobre fotos */
.local-card .relative span,
.obra-card .relative span,
.agenda-card .relative span,
.noticia-portal-card .relative span,
#news-grid > div .relative span,
.necrologio-card .relative span,
#memorial-grid a .relative span {
  z-index: 10 !important;
}

/* --- 3a. CARDS DA HOME COM FOTOS (Fundo natural e elevação sutil de 3px) --- */
#quick-cards-grid a,
#quick-cards-grid > div,
.noticia-card,
.home-gallery-card,
.religioso-card,
#noticias-grid > a,
#eventos-grid > a,
#home-galeria-grid article,
.card-hover:has(img):not(.obra-card):not(.local-card):not(.necrologio-card):not(.agenda-card):not(#news-grid *):not(.vocation-brand-card),
.card-hover:has(.ph):not(.obra-card):not(.local-card):not(.necrologio-card):not(.agenda-card):not(#news-grid *):not(.vocation-brand-card),
.card-hover:has([style*="background-image"]):not(.obra-card):not(.local-card):not(.necrologio-card):not(.agenda-card):not(#news-grid *):not(.vocation-brand-card),
.rf-card:has(img) {
  background-color: transparent;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease !important;
}

#quick-cards-grid a:hover,
#quick-cards-grid > div:hover,
.noticia-card:hover,
.home-gallery-card:hover,
.religioso-card:hover,
#noticias-grid > a:hover,
#eventos-grid > a:hover,
#home-galeria-grid article:hover,
.card-hover:has(img):not(.obra-card):not(.local-card):not(.necrologio-card):not(.agenda-card):not(#news-grid *):not(.vocation-brand-card):hover,
.card-hover:has(.ph):not(.obra-card):not(.local-card):not(.necrologio-card):not(.agenda-card):not(#news-grid *):not(.vocation-brand-card):hover,
.card-hover:has([style*="background-image"]):not(.obra-card):not(.local-card):not(.necrologio-card):not(.agenda-card):not(#news-grid *):not(.vocation-brand-card):hover,
.rf-card:has(img):hover {
  background-color: transparent !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 28px -6px rgba(12, 58, 74, 0.16), 0 4px 10px -2px rgba(18, 85, 102, 0.08) !important;
}

/* Textos dos cards com fotos na Home mantêm suas cores com contraste */
#quick-cards-grid a:hover *,
#quick-cards-grid > div:hover *,
.noticia-card:hover *,
.home-gallery-card:hover *,
.religioso-card:hover *,
#noticias-grid > a:hover *,
#eventos-grid > a:hover *,
#home-galeria-grid article:hover * {
  color: inherit;
}

/* Cards vocacionais integrados à secção, com cantos suaves e hover em sombra */
.vocation-brand-card {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 12px !important;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.vocation-brand-card:hover {
  box-shadow: 0 14px 28px -6px rgba(12, 58, 74, 0.22), 0 4px 10px -2px rgba(18, 85, 102, 0.12) !important;
}

.vocation-brand-card img {
  filter: none !important;
  transform: none !important;
}

.vocation-brand-card:hover img {
  transform: none !important;
}

/* --- 3b. CARDS DAS OBRAS (Casas de Formação, Paróquias, Educacionais, Outros) --- */
.obra-card,
.local-card {
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease !important;
}

.obra-card:hover,
.local-card:hover {
  background: #0c3a4a !important;
  background-color: #0c3a4a !important;
  border-color: #125566 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px -8px rgba(10, 46, 59, 0.35), 0 4px 12px -2px rgba(18, 85, 102, 0.15) !important;
}

.obra-card:hover > div,
.obra-card:hover .bg-white,
.local-card:hover > div,
.local-card:hover .bg-white {
  background-color: transparent !important;
}

/* Títulos, parágrafos e textos: passam estritamente para BRANCO ao passar o mouse */
.obra-card:hover h3,
.local-card:hover h3,
.obra-card:hover .font-heading,
.local-card:hover .font-heading {
  color: #ffffff !important;
}

.obra-card:hover p,
.local-card:hover p,
.obra-card:hover .font-sans {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Textos em azul/teal/cinza passam estritamente para BRANCO ao card ficar azul */
.obra-card:hover span,
.local-card:hover span,
.obra-card:hover [class*="text-teal"],
.local-card:hover [class*="text-teal"],
.obra-card:hover [class*="text-navy"],
.local-card:hover [class*="text-navy"],
.obra-card:hover [class*="text-slate"],
.local-card:hover [class*="text-slate"] {
  color: #ffffff !important;
}

.obra-card:hover .border-t,
.local-card:hover .border-t {
  border-color: rgba(255, 255, 255, 0.22) !important;
}

.obra-card:hover .border-t span,
.local-card:hover .border-t span {
  color: #ffffff !important;
}

.obra-card:hover .border-t i,
.local-card:hover .border-t i,
.obra-card:hover [data-icon*="arrow"],
.local-card:hover [data-icon*="arrow"] {
  color: #ffffff !important;
  transform: translateX(4px) !important;
}

.obra-card:hover img,
.local-card:hover img {
  transform: none !important;
}

/* --- 3c. AGENDAS E NOTÍCIAS (Páginas Internas) --- */
.agenda-card,
body:has(#agenda-calendar) #eventos-grid article,
#news-grid > div,
.noticia-portal-card,
#featured-news-container > article {
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease !important;
}

.agenda-card:hover,
body:has(#agenda-calendar) #eventos-grid article:hover,
#news-grid > div:hover,
.noticia-portal-card:hover,
#featured-news-container > article:hover {
  background: #0c3a4a !important;
  background-color: #0c3a4a !important;
  border-color: #125566 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px -8px rgba(10, 46, 59, 0.35), 0 4px 12px -2px rgba(18, 85, 102, 0.15) !important;
}

.agenda-card:hover a,
body:has(#agenda-calendar) #eventos-grid article:hover a,
#news-grid > div:hover > div,
.noticia-portal-card:hover > div {
  background-color: transparent !important;
}

.agenda-card:hover h3,
body:has(#agenda-calendar) #eventos-grid article:hover h3,
#news-grid > div:hover h4,
.noticia-portal-card:hover h4,
#featured-news-container > article:hover h2 {
  color: #ffffff !important;
}

/* Quando o card passar para azul, todo texto que era azul/teal/cinza passa para BRANCO */
.agenda-card:hover span,
body:has(#agenda-calendar) #eventos-grid article:hover span,
.agenda-card:hover i,
body:has(#agenda-calendar) #eventos-grid article:hover i,
.agenda-card:hover [class*="text-teal"],
body:has(#agenda-calendar) #eventos-grid article:hover [class*="text-teal"],
.agenda-card:hover [class*="text-navy"],
body:has(#agenda-calendar) #eventos-grid article:hover [class*="text-navy"] {
  color: #ffffff !important;
}

#news-grid > div:hover p,
.noticia-portal-card:hover p,
#featured-news-container > article:hover p {
  color: rgba(255, 255, 255, 0.92) !important;
}

#news-grid > div:hover .text-\[\#707070\],
#news-grid > div:hover .text-\[\#474747\],
.noticia-portal-card:hover .text-\[\#707070\],
.noticia-portal-card:hover .text-\[\#474747\],
#featured-news-container > article:hover .text-\[\#707070\],
#featured-news-container > article:hover .text-\[\#474747\],
.noticia-portal-card:hover [class*="text-navy"],
.noticia-portal-card:hover [class*="text-teal"],
#news-grid > div:hover [class*="text-navy"],
#news-grid > div:hover [class*="text-teal"] {
  color: #ffffff !important;
}

#news-grid > div:hover .border-t,
.noticia-portal-card:hover .border-t,
#featured-news-container > article:hover .border-t {
  border-color: rgba(255, 255, 255, 0.22) !important;
}

#news-grid > div:hover a,
.noticia-portal-card:hover a {
  color: #ffffff !important;
}

#news-grid > div:hover a i,
.noticia-portal-card:hover a i {
  color: #ffffff !important;
  transform: translateX(4px) !important;
}

.agenda-card:hover img,
body:has(#agenda-calendar) #eventos-grid article:hover img,
#news-grid > div:hover img,
.noticia-portal-card:hover img,
#featured-news-container > article:hover img {
  transform: none !important;
}

/* Badge de categoria sobre a foto preserva fundo e texto legíveis */
#news-grid > div .relative span,
.noticia-portal-card .relative span {
  color: #1d1d1f !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
}

/* Itens de evento na barra lateral da agenda */
#agenda-day-events a {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#agenda-day-events a:hover {
  background-color: #0c3a4a !important;
  color: #ffffff !important;
  transform: translateX(3px) !important;
  box-shadow: 0 4px 14px rgba(12, 58, 74, 0.2) !important;
}
#agenda-day-events a:hover span,
#agenda-day-events a:hover * {
  color: #ffffff !important;
}

/* --- 3d. MEMORIAL BRM (Cards do Necrologium e Fotos In Memoriam) --- */
.necrologio-card,
#memorial-grid a {
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease !important;
}

.necrologio-card:hover,
#memorial-grid a:hover {
  background: #0c3a4a !important;
  background-color: #0c3a4a !important;
  border-color: #125566 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px -8px rgba(10, 46, 59, 0.35), 0 4px 12px -2px rgba(18, 85, 102, 0.15) !important;
}

.necrologio-card:hover .necrologio-nome,
#memorial-grid a:hover h4,
#memorial-grid a:hover .necrologio-nome,
.necrologio-card:hover h3,
.necrologio-card:hover h4 {
  color: #ffffff !important;
}

.necrologio-card:hover .necrologio-local,
.necrologio-card:hover .necrologio-data,
#memorial-grid a:hover p,
.necrologio-card:hover p {
  color: rgba(255, 255, 255, 0.92) !important;
}

.necrologio-card:hover .necrologio-icone,
#memorial-grid a:hover i,
.necrologio-card:hover span,
#memorial-grid a:hover span {
  color: #ffffff !important;
}

.necrologio-card:hover img,
#memorial-grid a:hover img {
  transform: none !important;
}

/* Miniaturas da galeria no perfil do religioso */
#profile-galeria-grid > div {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

#profile-galeria-grid > div:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px -4px rgba(12, 58, 74, 0.25) !important;
}

#profile-galeria-grid > div:hover img {
  transform: none !important;
}

/* --- 3e. CARDS SEM FOTOS (Cards informativos puramente textuais ganham fundo azul) --- */
.card-text-invert:hover,
.rf-card:not(:has(img)):not(:has(.ph)):not(:has([style*="background-image"])):not([class*="from-[#0c3a4a]"]):not([class*="bg-navy"]):not([class*="bg-deepnavy"]):hover,
.card-hover:not(:has(img)):not(:has(.ph)):not(:has([style*="background-image"])):not(#quick-cards-grid *):not([class*="from-[#0c3a4a]"]):not([class*="bg-navy"]):not([class*="bg-deepnavy"]):hover {
  background-color: #0c3a4a !important;
  border-color: #125566 !important;
  color: #ffffff !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px -8px rgba(10, 46, 59, 0.35) !important;
}

.card-text-invert:hover *,
.rf-card:not(:has(img)):not(:has(.ph)):not(:has([style*="background-image"])):not([class*="from-[#0c3a4a]"]):not([class*="bg-navy"]):not([class*="bg-deepnavy"]):hover *,
.card-hover:not(:has(img)):not(:has(.ph)):not(:has([style*="background-image"])):not(#quick-cards-grid *):not([class*="from-[#0c3a4a]"]):not([class*="bg-navy"]):not([class*="bg-deepnavy"]):hover * {
  color: #ffffff !important;
}

/* --- 3f. CARDS QUE JÁ SÃO AZUIS (Invertem para branco no hover) ---
   Se o card é azul e passa para branco no hover:
   TODO o texto passa estritamente para AZUL (#0c3a4a) para garantir contraste perfeito. */
.card-blue-invert:hover,
[class*="from-[#0c3a4a]"]:not(.absolute):not(#quick-cards-grid *):not([class*="inset-0"]):not(.vocation-brand-card):hover,
[class*="from-[#0c3a4a]"].card-hover:not(#quick-cards-grid *):not([class*="inset-0"]):not(.vocation-brand-card):hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #0c3a4a !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px -8px rgba(10, 46, 59, 0.2) !important;
}

.card-blue-invert:hover *,
[class*="from-[#0c3a4a]"]:not(.absolute):not(#quick-cards-grid *):not([class*="inset-0"]):not(.vocation-brand-card):hover *,
[class*="from-[#0c3a4a]"].card-hover:not(#quick-cards-grid *):not([class*="inset-0"]):not(.vocation-brand-card):hover * {
  color: #0c3a4a !important;
  fill: #0c3a4a !important;
}

.card-blue-invert:hover img,
[class*="from-[#0c3a4a]"]:not(.absolute):not(#quick-cards-grid *):not([class*="inset-0"]):hover img,
[class*="from-[#0c3a4a]"].card-hover:not(#quick-cards-grid *):not([class*="inset-0"]):hover img {
  filter: none !important;
  transform: none !important;
}

/* Proteção explícita para overlays de imagem e degradês nos cards */
.absolute.inset-0[class*="bg-gradient"],
#quick-cards-grid .absolute.inset-0,
.card-hover > .absolute.inset-0 {
  background-color: transparent !important;
}

/* === 4. SISTEMA UNIVERSAL DE BOTÕES E CONTROLES (ESTRITAMENTE MONOLÍTICOS) ===
   Garante que o botão e as letras se movam estritamente JUNTOS, sem atraso.
   - Onde o botão é AZUL: hover fica BRANCO com letras/objetos em AZUL (#0c3a4a).
   - Onde o botão é BRANCO/OUTLINE: hover fica AZUL (#0c3a4a) com letras/objetos em BRANCO. */

.rf-btn-primary,
.rf-btn-secondary,
.apple-pill-btn,
.apple-ghost-btn,
.dehon-btn-primary,
.dehon-btn-secondary,
a[class*="btn"],
button[class*="btn"]:not(#mobile-menu-btn):not(.carousel-dot),
a.bg-navy:not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):not([class*="rounded-["]):not([class*="p-5"]):not([class*="p-6"]):not([class*="p-7"]):not([class*="p-8"]):not([class*="group"]),
button.bg-navy:not(#mobile-menu-btn):not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):not([class*="rounded-["]):not([class*="p-5"]):not([class*="p-6"]):not([class*="p-7"]):not([class*="p-8"]):not([class*="group"]),
a.bg-teal:not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):not([class*="rounded-["]):not([class*="p-5"]):not([class*="p-6"]):not([class*="p-7"]):not([class*="p-8"]):not([class*="group"]),
button.bg-teal:not(#mobile-menu-btn):not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):not([class*="rounded-["]):not([class*="p-5"]):not([class*="p-6"]):not([class*="p-7"]):not([class*="p-8"]):not([class*="group"]),
.shimmer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  transform: translateZ(0); /* Aceleração de hardware acoplada */
  backface-visibility: hidden;
  transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Os elementos internos acompanham o botão rigidamente */
.rf-btn-primary > *,
.rf-btn-secondary > *,
.apple-pill-btn > *,
.apple-ghost-btn > *,
.dehon-btn-primary > *,
.dehon-btn-secondary > *,
a[class*="btn"] > *,
button[class*="btn"]:not(#mobile-menu-btn) > * {
  pointer-events: none;
  transform: none !important;
  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              fill 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* --- CASO 1: BOTÃO AZUL → Fica BRANCO no hover, letras/objetos em AZUL --- */
.rf-btn-primary:hover,
.apple-pill-btn:hover,
.dehon-btn-primary:hover,
a.bg-navy:not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):not([class*="rounded-["]):not([class*="p-5"]):not([class*="p-6"]):not([class*="p-7"]):not([class*="p-8"]):not([class*="group"]):hover,
button.bg-navy:not(#mobile-menu-btn):not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):not([class*="rounded-["]):not([class*="p-5"]):not([class*="p-6"]):not([class*="p-7"]):not([class*="p-8"]):not([class*="group"]):hover,
a.bg-teal:not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):not([class*="rounded-["]):not([class*="p-5"]):not([class*="p-6"]):not([class*="p-7"]):not([class*="p-8"]):not([class*="group"]):hover,
button.bg-teal:not(#mobile-menu-btn):not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):not([class*="rounded-["]):not([class*="p-5"]):not([class*="p-6"]):not([class*="p-7"]):not([class*="p-8"]):not([class*="group"]):hover,
a.bg-deepnavy:not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):not([class*="rounded-["]):not([class*="p-5"]):not([class*="p-6"]):not([class*="p-7"]):not([class*="p-8"]):not([class*="group"]):hover,
button.bg-deepnavy:not(#mobile-menu-btn):not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):not([class*="rounded-["]):not([class*="p-5"]):not([class*="p-6"]):not([class*="p-7"]):not([class*="p-8"]):not([class*="group"]):hover {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #0c3a4a !important;
  border: 1.5px solid #0c3a4a !important;
  box-shadow: 0 8px 24px -4px rgba(12, 58, 74, 0.3) !important;
  transform: translateY(-2px) !important;
}

.rf-btn-primary:hover *,
.apple-pill-btn:hover *,
.dehon-btn-primary:hover *,
a.bg-navy:not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):not([class*="rounded-["]):not([class*="p-5"]):not([class*="p-6"]):not([class*="p-7"]):not([class*="p-8"]):not([class*="group"]):hover *,
button.bg-navy:not(#mobile-menu-btn):not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):not([class*="rounded-["]):not([class*="p-5"]):not([class*="p-6"]):not([class*="p-7"]):not([class*="p-8"]):not([class*="group"]):hover *,
a.bg-teal:not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):not([class*="rounded-["]):not([class*="p-5"]):not([class*="p-6"]):not([class*="p-7"]):not([class*="p-8"]):not([class*="group"]):hover *,
button.bg-teal:not(#mobile-menu-btn):not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):not([class*="rounded-["]):not([class*="p-5"]):not([class*="p-6"]):not([class*="p-7"]):not([class*="p-8"]):not([class*="group"]):hover *,
a.bg-deepnavy:not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):not([class*="rounded-["]):not([class*="p-5"]):not([class*="p-6"]):not([class*="p-7"]):not([class*="p-8"]):not([class*="group"]):hover *,
button.bg-deepnavy:not(#mobile-menu-btn):not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):not([class*="rounded-["]):not([class*="p-5"]):not([class*="p-6"]):not([class*="p-7"]):not([class*="p-8"]):not([class*="group"]):hover * {
  color: #0c3a4a !important;
  fill: #0c3a4a !important;
}

/* --- CASO 2: BOTÃO BRANCO / OUTLINE → Fica AZUL no hover, letras/objetos em BRANCO --- */
.rf-btn-secondary:hover,
.apple-ghost-btn:hover,
.dehon-btn-secondary:hover,
a.bg-white:not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):hover,
button.bg-white:not(#mobile-menu-btn):not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):hover,
a.border-teal:not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):hover,
button.border-teal:not(#mobile-menu-btn):not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):hover {
  background-color: #0c3a4a !important;
  border-color: #0c3a4a !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px -4px rgba(12, 58, 74, 0.35) !important;
  transform: translateY(-2px) !important;
}

.rf-btn-secondary:hover *,
.apple-ghost-btn:hover *,
.dehon-btn-secondary:hover *,
a.bg-white:not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):hover *,
button.bg-white:not(#mobile-menu-btn):not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):hover *,
a.border-teal:not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):hover *,
button.border-teal:not(#mobile-menu-btn):not([class*="rounded-2xl"]):not([class*="rounded-3xl"]):hover * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* --- CASO 3: PROTEÇÃO E VISIBILIDADE DO MENU MOBILE NO DESKTOP --- */
@media (min-width: 1024px) {
  #mobile-menu-btn,
  .mobile-header-actions,
  .lg\:hidden {
    display: none !important;
  }
}

/* Feedback tátil de clique (:active) */
button:active,
input[type="button"]:active,
input[type="submit"]:active,
.rf-btn-primary:active,
.rf-btn-secondary:active,
.apple-pill-btn:active,
.apple-ghost-btn:active,
.dehon-btn-primary:active,
.dehon-btn-secondary:active,
[role="button"]:active {
  transform: scale(0.97) !important;
  transition-duration: 0.06s !important;
}

/* === 6. HEADER DINÂMICO RETRÁTIL === */
#main-header {
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#main-header #header-container {
  transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1), min-height 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#main-header #header-logo {
  transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#main-header.header-scrolled {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
  background-color: rgba(10, 46, 59, 0.98) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5), 0 0 1px 1px rgba(255, 255, 255, 0.1) !important;
}

#main-header.header-scrolled #header-container {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  min-height: 64px !important;
}
@media (min-width: 1024px) {
  #main-header.header-scrolled #header-container {
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
    min-height: 76px !important;
  }
}

#main-header.header-scrolled #header-logo {
  height: 56px !important;
  max-height: 56px !important;
}
@media (min-width: 640px) {
  #main-header.header-scrolled #header-logo {
    height: 60px !important;
    max-height: 60px !important;
  }
}

/* === PADRONIZAÇÃO DE HEROES INSTITUCIONAIS E EDITORIAIS (UTXICA-TASTESKILL) === */
.page-hero-standard {
  position: relative;
  background: linear-gradient(180deg, #0c3a4a 0%, #0a2e3b 60%, #07232d 100%);
  color: #ffffff;
  padding-top: 3.5rem;   /* 56px */
  padding-bottom: 3.5rem;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
  text-align: center;
}

@media (min-width: 640px) {
  .page-hero-standard {
    padding-top: 4.5rem;   /* 72px */
    padding-bottom: 4.5rem;
    min-height: 320px;
  }
}

@media (min-width: 1024px) {
  .page-hero-standard {
    padding-top: 5.5rem;   /* 88px */
    padding-bottom: 5.5rem;
    min-height: 350px;
  }
}

.page-hero-standard.has-bg-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-hero-standard .hero-backdrop-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 46, 59, 0.78) 0%, rgba(10, 46, 59, 0.94) 100%);
  pointer-events: none;
  z-index: 1;
}

.page-hero-standard .hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(94, 234, 212, 0.12), transparent 70%);
  pointer-events: none;
  z-index: 2;
}

.page-hero-standard .hero-content-wrap {
  position: relative;
  z-index: 10;
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
}

/* === 7. ACESSIBILIDADE — PREFERS REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .auto-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* === 8. MARQUEE ESTÁTICO (visual fixo, sem movimento) === */
.brm-marquee .marquee-track {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* === 9. DIVISÓRIAS TRIDIMENSIONAIS === */
.section-divider-3d {
  position: relative;
  z-index: 15;
  width: 100%;
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.section-divider-3d-line {
  height: 2px;
  border-radius: 9999px;
  background: linear-gradient(90deg, transparent 0%, rgba(18, 85, 102, 0.3) 25%, rgba(18, 85, 102, 0.7) 50%, rgba(18, 85, 102, 0.3) 75%, transparent 100%);
  box-shadow: 0 3px 10px rgba(12, 58, 74, 0.22);
}

.section-shadow-projected-top {
  box-shadow: 0 -12px 24px -4px rgba(10, 46, 59, 0.25);
}

.section-shadow-projected-bottom {
  box-shadow: 0 12px 24px -4px rgba(10, 46, 59, 0.25);
}

/* === 10. LAYOUT EDITORIAL DE NOTÍCIAS (2 COLUNAS: 70% MATÉRIA | 30% SIDEBAR) ===
   Padrão clássico de portal (G1, Vatican News, Folha) com leitura ampla e sem poluição. */
.news-layout-2col,
.news-editorial-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem !important;
  width: 100% !important;
  align-items: stretch !important;
}

.news-col-left {
  display: none !important;
}

.news-main-article,
.news-col-center {
  width: 100% !important;
  min-width: 0 !important;
}

.news-main-article.hidden,
.news-col-center.hidden {
  display: none !important;
}

.news-sidebar,
.news-col-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
  width: 100% !important;
}

@media (min-width: 1024px) {
  .news-layout-2col,
  .news-editorial-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 2.5rem !important;
    align-items: start !important;
  }

  .news-main-article,
  .news-col-center {
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
  }

  .news-sidebar,
  .news-col-right {
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
    position: sticky !important;
    top: 6.5rem !important;
  }
}

@media (min-width: 1280px) {
  .news-layout-2col,
  .news-editorial-grid {
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: 3rem !important;
  }
}

/* === RODAPÉ UNIVERSAL COM FOTO COMUNITÁRIA (DEEPNAVY + OPACIDADE SUAVE) === */
footer,
footer.bg-deepnavy {
  position: relative !important;
  background-color: #0a2e3b !important;
  background-image: none !important;
  overflow: hidden !important;
}

footer::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url('/assets/Novos%20Banner/rodap%C3%A9%20(1).png') !important;
  background-image: -webkit-image-set(
    url('/assets/Novos%20Banner/rodape-bg.webp') 1x,
    url('/assets/Novos%20Banner/rodap%C3%A9%20(1).png') 1x
  ) !important;
  background-image: image-set(
    url('/assets/Novos%20Banner/rodape-bg.webp') type('image/webp'),
    url('/assets/Novos%20Banner/rodap%C3%A9%20(1).png') type('image/png')
  ) !important;
  background-position: center 30% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  opacity: 0.20 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

footer > * {
  position: relative !important;
  z-index: 1 !important;
}

footer :is(h3, h4, p, a, span) {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}