/* ==========================================================================
   PORTAL APRH v2 — 15-10-2026
   Associação Portuguesa dos Recursos Hídricos
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Identidade Cromática Oficial APRH */
  --color-primary: #005A9C;
  --color-primary-dark: #002D5A;
  --color-primary-deep: #071D36;
  --color-primary-light: #EBF5FB;

  --color-secondary: #0284C7;
  --color-secondary-dark: #0369A1;
  --color-secondary-light: #E0F2FE;

  --color-accent-blue: #0284C7;
  --color-accent-cyan: #0EA5E9;
  --color-accent-gold: #F59E0B;

  /* Fundos e Superfícies */
  --bg-page: #F8FAFC;
  --bg-white: #FFFFFF;
  --bg-dark-section: #0B1F36;
  --bg-dark-surface: #102A45;

  /* Linhas e Contornos */
  --border-light: #E2E8F0;
  --border-subtle: rgba(226, 232, 240, 0.85);

  /* Textos */
  --text-dark: #0F172A;
  --text-body: #334155;
  --text-muted: #64748B;
  --text-white: #FFFFFF;

  /* Sombras Suaves e Naturais */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.08);
  --shadow-hover: 0 8px 20px rgba(0, 90, 156, 0.12);

  /* Raios */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 9999px;

  /* Gradientes institucionais */
  --gradient-water: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  --gradient-water-soft: linear-gradient(135deg, rgba(0, 90, 156, 0.06) 0%, rgba(2, 132, 199, 0.08) 100%);

  /* Transições */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: all 0.25s var(--ease-out);
}

/* Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: 'Source Sans 3', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-body);
  background-color: var(--bg-page);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(2, 132, 199, 0.22);
  color: var(--color-primary-deep);
}

:focus-visible {
  outline: 3px solid var(--color-accent-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: 'Raleway', 'Source Sans 3', sans-serif;
  color: var(--color-primary-dark);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--color-secondary);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================================================
   1. BARRA SUPERIOR (TOPBAR)
   ========================================================================== */
.topbar {
  display: none !important;
  background: var(--color-primary-deep);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.82rem;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.topbar-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar-left {
  display: flex;
  gap: 22px;
  align-items: center;
}

.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.9);
}

.topbar-item a {
  color: rgba(255, 255, 255, 0.9);
}

.topbar-item a:hover {
  color: #38BDF8;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar-pill {
  background: rgba(2, 132, 199, 0.22);
  color: #BAE6FD;
  border: 1px solid rgba(186, 230, 253, 0.35);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.74rem;
}

/* ==========================================================================
   2. HEADER & NAVEGAÇÃO
   ========================================================================== */
.header-main,
.site-header {
  position: sticky;
  top: 0;
  z-index: 1500;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 6px 24px rgba(7, 29, 54, 0.06);
}

.nav-wrap,
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 86px;
}

.logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  margin-right: 18px;
}

.logo-link img {
  height: 54px;
  width: 122px;
  max-width: 100%;
  aspect-ratio: 105.34 / 46.48;
  object-fit: contain;
  display: block;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 4px;
  align-items: center;
}

.nav-item {
  position: relative;
}

/* Oculta no desktop os itens adicionais da grelha mobile (Agenda e Fazer Sócio) */
.nav-item.nav-item-mobile-only {
  display: none !important;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 13px;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 0.81rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: var(--color-primary-dark);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: var(--transition);
}

/* Sublinhado animado em gradiente institucional */
.nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-water);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}

.nav-link:hover,
.nav-item:hover>.nav-link {
  color: var(--color-primary);
  background: rgba(235, 245, 251, 0.7);
}

.nav-link:hover::after,
.nav-item:hover>.nav-link::after {
  transform: scaleX(1);
}

.nav-arrow {
  font-size: 0.62rem;
  opacity: 0.6;
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
}

.nav-item:hover .nav-arrow {
  transform: rotate(180deg);
  opacity: 1;
}

/* Dropdown */
.dropdown-box {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: #FFFFFF;
  border-radius: var(--radius-md);
  border-top: 3px solid var(--color-secondary);
  padding: 8px;
  box-shadow: var(--shadow-lg);
  border-left: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: var(--transition);
  list-style: none;
  z-index: 1100;
}

.nav-item:hover .dropdown-box {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-box li a {
  display: block;
  padding: 9px 14px;
  font-family: 'Source Sans 3', 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-dark);
  border-radius: var(--radius-sm);
  text-transform: none;
  letter-spacing: 0.01em;
}

.dropdown-box li a:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding-left: 18px;
}

.btn-header-cta {
  background: linear-gradient(135deg, #005A9C 0%, #0284C7 100%);
  border: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: var(--transition);
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-header-cta:hover {
  background: linear-gradient(135deg, #00457A 0%, #0369A1 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.45);
}

/* Botão de Alternância de Menu (Mobile Hamburger) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 8px;
  cursor: pointer;
  z-index: 1200;
  transition: var(--transition);
}

.nav-toggle:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--color-primary-dark);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-out), opacity 0.25s ease, background-color 0.25s ease;
  transform-origin: center;
}

.nav-toggle.is-active span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
  background: var(--color-primary);
}

.nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
  background: var(--color-primary);
}

/* ==========================================================================
   3. BARRA DE ACESSO RÁPIDO ANTERIOR (PRESERVADA / COMENTADA)
   ==========================================================================
.acesso-rapido-bar {
  background: #FFFFFF;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.acesso-rapido-flex {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.acesso-rapido-flex::-webkit-scrollbar { display: none; }

.acesso-rapido-title {
  color: var(--color-primary-dark);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-right: 6px;
  flex-shrink: 0;
}

.acesso-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F1F5F9;
  color: #334155;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid #E2E8F0;
  transition: var(--transition);
  flex-shrink: 0;
}

.acesso-pill:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 90, 156, 0.12);
}

.acesso-pill.destaque-amarelo {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
  font-weight: 700;
}

.acesso-pill.destaque-amarelo:hover {
  background: #FDE68A;
  color: #78350F;
}
========================================================================== */

/* ==========================================================================
   3. NOVO: HUB DE BOTÕES ESTILIZADOS DE TELEMÓVEL (APP MENU SMARTPHONE)
   ========================================================================== */
.mobile-app-menu-hub {
  background: #F8FAFC;
  padding: 14px 0 16px;
  border-bottom: 1px solid #E2E8F0;
  position: relative;
}

.mobile-app-hub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 2px;
}

.mobile-app-hub-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  background: #EBF3FE;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0, 90, 156, 0.15);
}

.mobile-app-hub-hint {
  font-size: 0.75rem;
  color: #64748B;
  font-weight: 500;
}

/* Ocultar botão exclusivo mobile no cabeçalho desktop */
.nav-item-cta-mobile {
  display: none;
}

/* Grelha de Botões Estilo Smartphone */
.mobile-app-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* Cartão do Botão Estilo Smartphone */
.mobile-menu-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border: 1px solid rgba(15, 45, 74, 0.08);
  border-radius: 16px;
  padding: 10px 12px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(7, 29, 54, 0.04), 0 1px 2px rgba(7, 29, 54, 0.02);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Feedback tátil e dinâmico de toque (smartphone press) */
.mobile-menu-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 90, 156, 0.3);
  box-shadow: 0 6px 16px rgba(0, 90, 156, 0.1);
}

.mobile-menu-card:active {
  transform: scale(0.96);
  background: #F1F5F9;
  box-shadow: 0 1px 4px rgba(7, 29, 54, 0.08);
  transition: transform 0.08s ease;
}

/* Ícone Squircle Estilo Aplicação Móvel (iOS / Android) */
.mobile-card-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), 0 2px 6px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.mobile-menu-card:hover .mobile-card-icon {
  transform: scale(1.08) rotate(-2deg);
}

/* Gradientes Suaves Temáticos por Menu */
.icon-blue {
  background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%);
  color: #0284C7;
  border: 1px solid #BAE6FD;
}

.icon-emerald {
  background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%);
  color: #16A34A;
  border: 1px solid #BBF7D0;
}

.icon-amber {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  color: #D97706;
  border: 1px solid #FDE68A;
}

.icon-indigo {
  background: linear-gradient(135deg, #EDE9FE 0%, #DDD6FE 100%);
  color: #6D28D9;
  border: 1px solid #DDD6FE;
}

.icon-cyan {
  background: linear-gradient(135deg, #CFFAFE 0%, #A5F3FC 100%);
  color: #0891B2;
  border: 1px solid #A5F3FC;
}

.icon-purple {
  background: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%);
  color: #9333EA;
  border: 1px solid #E9D5FF;
}

.icon-rose {
  background: linear-gradient(135deg, #FFE4E6 0%, #FECDD3 100%);
  color: #E11D48;
  border: 1px solid #FECDD3;
}

.icon-gold {
  background: linear-gradient(135deg, #FEF08A 0%, #FACC15 100%);
  color: #854D0E;
  border: 1px solid #FDE047;
}

/* Conteúdo de Texto do Botão */
.mobile-card-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.mobile-card-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.mobile-card-sub {
  font-size: 0.69rem;
  color: #64748B;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.mobile-card-arrow {
  color: #94A3B8;
  font-size: 1.1rem;
  font-weight: 700;
  margin-left: auto;
  padding-left: 2px;
  transition: transform 0.2s ease, color 0.2s ease;
  line-height: 1;
}

.mobile-menu-card:hover .mobile-card-arrow {
  transform: translateX(2px);
  color: var(--color-primary);
}

/* Cartão Destaque VIP (Sócio) */
.mobile-menu-card.destaque-vip {
  background: linear-gradient(135deg, #FFFDF5 0%, #FEFCE8 100%);
  border-color: #FDE047;
}

.mobile-menu-card.destaque-vip:hover {
  border-color: #EAB308;
  box-shadow: 0 6px 18px rgba(234, 179, 8, 0.2);
}

.mobile-card-badge {
  font-size: 0.65rem;
  font-weight: 800;
  background: #F59E0B;
  color: #FFFFFF;
  padding: 2px 6px;
  border-radius: 6px;
  letter-spacing: 0.05em;
  margin-left: auto;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.3);
}

/* Adaptação Responsiva da Grelha */
@media (max-width: 1200px) {
  .mobile-app-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==========================================================================
   4. HERO SHOWCASE COM BANNER VISUAL
   ========================================================================== */
.hero-showcase {
  padding: 28px 0 20px;
}

.hero-grid,
.hero-showcase-grid {
  display: grid;
  grid-template-columns: 1.8fr 1.2fr;
  gap: 24px;
}

/* Banner Principal à Esquerda: 17.º Congresso da Água (Imagem e Dados Oficiais) */
.hero-banner-main {
  position: relative;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-banner-main:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.hero-banner-img-wrap {
  position: relative;
  width: 100%;
  height: 330px;
  background: #0B192C;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-banner-backdrop {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background-size: cover;
  background-position: center;
  filter: blur(24px) brightness(0.38);
  transform: scale(1.15);
  pointer-events: none;
}

.hero-banner-link {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.hero-banner-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100%;
  object-fit: contain;
  display: block;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  transition: transform 0.4s ease;
}

.hero-banner-main:hover .hero-banner-img-wrap img {
  transform: scale(1.025);
}

.hero-banner-content {
  padding: 24px 28px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #FFFFFF;
}

.hero-banner-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.hero-banner-tag {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #DBEAFE;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  display: inline-block;
  align-self: flex-start;
}

.hero-date-chip {
  font-size: 0.8rem;
  font-weight: 600;
  color: #0369A1;
  background: #F0F9FF;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid #BAE6FD;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hero-banner-title {
  color: var(--color-primary-dark);
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 10px;
}

.hero-banner-desc {
  color: var(--text-body);
  font-size: 0.94rem;
  line-height: 1.55;
  margin-bottom: 20px;
  flex: 1;
}

.hero-banner-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* Coluna de Destaques à Direita (Cards com Dados e Capas Oficiais) */
.hero-side-column {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hero-card-blue {
  position: relative;
  overflow: hidden;
  background: #003366;
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  box-shadow: var(--shadow-sm);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-card-blue::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg, rgba(7, 29, 54, 0.42) 0%, rgba(0, 51, 102, 0.52) 100%), url('/public/images/IMG837.JPG');
  background-size: cover;
  background-position: center 25%;
  transition: transform 0.4s ease;
  z-index: 0;
}

.hero-card-blue:hover::before {
  transform: scale(1.04);
}

.hero-card-blue > * {
  position: relative;
  z-index: 1;
}

.hero-card-blue:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(7, 29, 54, 0.35);
}

.hero-card-blue h3 {
  color: #FFFFFF;
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 8px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}

.hero-card-blue p {
  color: #FFFFFF;
  font-size: 0.88rem;
  margin-bottom: 16px;
  line-height: 1.5;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.85);
}

.hero-card-green {
  background: linear-gradient(135deg, #008775 0%, #005C50 100%);
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  box-shadow: var(--shadow-sm);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-card-green:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 135, 117, 0.25);
}

.hero-card-green h3 {
  color: #FFFFFF;
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.hero-card-green p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.88rem;
  margin-bottom: 16px;
  line-height: 1.5;
}

.hero-side-column .card-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 6px;
}

.hero-side-column .btn-solid-white {
  display: inline-block;
  align-self: flex-start;
  padding: 8px 18px;
  background: #FFFFFF;
  color: #005A9C;
  font-weight: 700;
  font-size: 0.88rem;
  border-radius: var(--radius-md, 6px);
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.hero-side-column .btn-solid-white.is-green {
  color: #008775;
}

.hero-side-column .btn-solid-white:hover {
  background: #F8FAFC;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   5. BARRA DE PESQUISA RÁPIDA NO ACERVO
   ========================================================================== */
.search-strip {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 16px 24px;
  margin-bottom: 30px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.search-strip-label {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.search-strip-box {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  padding: 5px 6px 5px 16px;
  transition: var(--transition);
}

.search-strip-box:focus-within {
  border-color: var(--color-primary);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(0, 90, 156, 0.1);
}

.search-strip-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.92rem;
  color: var(--text-dark);
}

/* Espaçamentos de Secções */
.section-search {
  padding: 10px 0 25px;
}

.section-highlights {
  padding: 15px 0 45px;
}

.section-news {
  padding: 20px 0 45px;
}

.section-stats {
  margin-bottom: 45px;
}

.section-associados {
  margin-bottom: 55px;
}

/* Dropdown de Resultados da Pesquisa Rápida */
.search-results {
  display: none;
  background: #FFFFFF;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  margin-top: -20px;
  margin-bottom: 25px;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border-light);
  position: relative;
  z-index: 50;
}

.search-result {
  padding: 10px 14px;
  border-bottom: 1px solid #F1F5F9;
  font-size: 0.88rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-radius: var(--radius-sm);
  transition: background 0.2s ease;
}

.search-result:last-child {
  border-bottom: none;
}

.search-result:hover {
  background: var(--color-primary-light);
}

.search-result-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.search-result-cat {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primary);
  background: #EBF5FB;
  padding: 2px 8px;
  border-radius: 4px;
}

.search-result-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 340px;
}

.search-result-title {
  font-weight: 600;
  color: var(--text-dark);
  text-decoration: none;
  line-height: 1.35;
  margin-top: 2px;
}

.search-result-title:hover {
  color: var(--color-primary);
}

.search-result-authors {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.search-empty {
  padding: 14px;
  color: var(--text-muted);
  font-size: 0.88rem;
  text-align: center;
}

/* ==========================================================================
   6. DESTAQUES VISUAIS EM GRELHA (COM IMAGENS REAIS)
   ========================================================================== */
.section-headline {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 14px;
}

/* Barra de destaque em gradiente sob o título da secção */
.section-headline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 72px;
  height: 3px;
  border-radius: 3px;
  background: var(--gradient-water);
}

.headline-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.02em;
}

.headline-link {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-primary);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-light);
  white-space: nowrap;
}

.headline-link:hover {
  background: var(--color-primary);
  color: #FFFFFF;
}

.visual-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.visual-card {
  position: relative;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.visual-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2;
  background: var(--gradient-water);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}

.visual-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(0, 90, 156, 0.25);
}

.visual-card:hover::before {
  transform: scaleX(1);
}

.visual-card-thumb {
  height: 230px;
  overflow: hidden;
  position: relative;
  background: #0B192C;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.visual-card-backdrop {
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  background-size: cover;
  background-position: center;
  filter: blur(20px) brightness(0.38);
  transform: scale(1.15);
  pointer-events: none;
}

.visual-card-img-link {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.visual-card-thumb img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.4s ease;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.4));
}

.visual-card:hover .visual-card-thumb img {
  transform: scale(1.05);
}

.visual-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: rgba(15, 23, 42, 0.85);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.visual-card-badge.is-green {
  background: rgba(0, 140, 120, 0.95);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.visual-card-badge.is-blue {
  background: rgba(2, 132, 199, 0.95);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.visual-card-body {
  padding: 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.visual-card-date {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.visual-card-title {
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 10px;
  color: var(--color-primary-dark);
}

.visual-card:hover .visual-card-title {
  color: var(--color-primary);
}

.visual-card-desc {
  font-size: 0.9rem;
  color: var(--text-body);
  line-height: 1.5;
  margin-bottom: 16px;
  flex: 1;
}

.visual-card-action {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-secondary-dark);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-light);
}

.visual-card:hover .visual-card-action {
  color: var(--color-primary);
  letter-spacing: 0.01em;
}

/* ==========================================================================
   7. FAIXA VITRINE EDITORIAL (REVISTAS CIENTÍFICAS DA APRH)
   ========================================================================== */
.vitrine-section {
  background: linear-gradient(135deg, #071D36 0%, #0D2D52 50%, #003366 100%);
  color: #FFFFFF;
  padding: 60px 0;
  margin: 50px 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(7, 29, 54, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.vitrine-section::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 168, 204, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.vitrine-flex {
  display: grid;
  grid-template-columns: 1.15fr 1.85fr;
  gap: 45px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.vitrine-cover-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
  position: relative;
  max-width: 320px;
  margin: 0 auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vitrine-cover-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
}

.vitrine-cover-card img {
  max-height: 330px;
  width: auto;
  margin: 0 auto 14px;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease;
  display: block;
}

.vitrine-cover-card:hover img {
  transform: scale(1.02);
}

.vitrine-info > .vitrine-pill-item:first-child {
  display: inline-block;
  margin-bottom: 14px;
  background: rgba(94, 234, 212, 0.15);
  color: #5EEAD4;
  border: 1px solid rgba(94, 234, 212, 0.35);
  font-weight: 700;
}

.vitrine-info h2 {
  color: #FFFFFF;
  font-size: 2.3rem;
  font-weight: 900;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.vitrine-info p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 22px;
}

.vitrine-info p strong {
  color: #FFFFFF;
}

.vitrine-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.vitrine-pill-item {
  background: rgba(255, 255, 255, 0.1);
  color: #E2E8F0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.vitrine-section .btn-solid-white {
  display: inline-block;
  background: #FFFFFF;
  color: #005A9C;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 22px;
  border-radius: var(--radius-md, 8px);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease;
}

.vitrine-section .btn-solid-white.is-green {
  color: #008775;
}

.vitrine-section .btn-solid-white:hover {
  background: #F0F7FD;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   8. NOTÍCIAS RECENTES & WIDGET "MEMÓRIA VIVA" (LADO A LADO)
   ========================================================================== */
.news-memory-grid {
  display: grid;
  grid-template-columns: 1.8fr 1.2fr;
  gap: 30px;
  margin-bottom: 45px;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.news-item-row {
  position: relative;
  background: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 18px 20px;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 20px;
  align-items: center;
  transition: var(--transition);
  overflow: hidden;
}

.news-item-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--gradient-water);
  transform: scaleY(0);
  transition: transform 0.35s var(--ease-out);
}

.news-item-row:hover {
  transform: translateX(4px);
  border-color: rgba(0, 90, 156, 0.25);
  box-shadow: var(--shadow-md);
}

.news-item-row:hover::before {
  transform: scaleY(1);
}

.news-date-badge {
  background: var(--gradient-water);
  color: #FFFFFF;
  text-align: center;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  min-width: 72px;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(0, 90, 156, 0.22);
}

.news-date-day {
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1;
}

.news-date-month {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.news-date-month {
  opacity: 0.9;
  letter-spacing: 0.04em;
}

.news-item-body h4 {
  font-size: 1.05rem;
  margin-bottom: 5px;
}

.news-item-body h4 a {
  color: var(--color-primary-dark);
}

.news-item-row:hover .news-item-body h4 a {
  color: var(--color-primary);
}

.news-item-body p {
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* Caixa "Memória Viva da Agenda" */
.memory-widget-box {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(2, 132, 199, 0.25);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
}

.memory-widget-header {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
  color: #FFFFFF;
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.memory-widget-header h3 {
  color: #FFFFFF;
  font-size: 1.15rem;
}

.memory-widget-body {
  position: relative;
  padding: 22px 22px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F0F9FF 100%);
}

/* Entradas em formato de linha cronológica.
   .memory-event-* = HTML estático | .card-memoria* = HTML gerado por memoria_agenda.js */
.memory-event-entry,
.card-memoria {
  position: relative;
  border-left: 2px solid rgba(0, 90, 156, 0.18);
  padding: 2px 0 2px 18px;
  transition: border-color 0.3s ease;
}

.memory-event-entry::before,
.card-memoria::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid var(--color-secondary);
  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15);
  transition: var(--transition);
}

.memory-event-entry:hover,
.card-memoria:hover {
  border-left-color: var(--color-secondary);
}

.memory-event-entry:hover::before,
.card-memoria:hover::before {
  background: var(--color-secondary);
  transform: scale(1.15);
}

.memory-event-tag,
.card-memoria-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.memory-event-text,
.card-memoria-titulo {
  font-family: 'Raleway', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-dark);
  margin: 4px 0;
}

.memory-event-link,
.link-memoria {
  font-size: 0.8rem;
  color: var(--color-secondary-dark);
  font-weight: 600;
}

.memory-event-link:hover,
.link-memoria:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.memory-widget-date {
  font-size: 0.82rem;
  font-weight: 700;
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.18);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.memory-widget-footer {
  margin-top: 10px;
  text-align: right;
  padding-top: 10px;
  border-top: 1px dashed var(--border-light);
}

.memory-widget-footer a {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: var(--transition);
}

.memory-widget-footer a:hover {
  color: var(--color-secondary);
  transform: translateX(3px);
}

/* ==========================================================================
   9. MÉTRICAS (APRH EM NÚMEROS) & FILIAÇÃO DE ASSOCIADOS
   ========================================================================== */
.stats-strip {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(600px 240px at 10% 0%, rgba(14, 165, 233, 0.22), transparent 70%),
    radial-gradient(600px 240px at 90% 100%, rgba(2, 132, 199, 0.20), transparent 70%),
    linear-gradient(135deg, #071D36 0%, #0B2A4A 100%);
  color: #FFFFFF;
  padding: 48px 24px;
  border-radius: var(--radius-lg);
  margin-bottom: 45px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.stats-4cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}

.stats-4cols>div {
  padding: 0 12px;
}

.stats-4cols>div+div {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-figure {
  font-family: 'Raleway', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #38BDF8;
  background: linear-gradient(135deg, #BAE6FD 0%, #38BDF8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 10px;
}

.stat-title {
  color: #FFFFFF;
  font-weight: 800;
  font-size: 1rem;
}

.stat-sub {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
}

/* Membros Dual Banner */
.associados-dual-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 45px;
}

.dual-card {
  border-radius: var(--radius-lg);
  padding: 40px;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
}

.dual-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.dual-card.singular {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.dual-card.coletivo {
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
}

.dual-card h3 {
  color: #FFFFFF;
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.dual-card p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 24px;
}

/* Botões */
.btn-solid-white {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  color: var(--color-primary-dark) !important;
  font-weight: 800;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  align-self: flex-start;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: var(--transition);
}

/* ==========================================================================
   ESTILOS ANTERIORES DE BOTÕES (PRESERVADOS / COMENTADOS)
   ==========================================================================
.btn-solid-white {
  background: #FFFFFF;
  color: var(--color-primary) !important;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: var(--transition);
}

.btn-solid-white:hover {
  background: #F8FAFC;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gradient-water);
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 90, 156, 0.25);
  transition: var(--transition);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 90, 156, 0.35);
  filter: brightness(1.06);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-light);
  text-decoration: none;
  transition: var(--transition);
}

.btn-ghost:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
}
========================================================================== */

/* ==========================================================================
   NOVO SISTEMA: BOTÕES ESTILIZADOS DE TELEMÓVEL EM TODO O SITE
   ========================================================================== */

/* 1. Botão Primário Estilo Smartphone */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #005A9C 0%, #003F73 100%);
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 12px 24px;
  border-radius: 14px;
  text-decoration: none;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 14px rgba(0, 90, 156, 0.28), 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  min-height: 44px;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 90, 156, 0.38);
  filter: brightness(1.05);
}

.btn-primary:active {
  transform: scale(0.95);
  box-shadow: 0 2px 6px rgba(0, 90, 156, 0.2);
  filter: brightness(0.97);
  transition: transform 0.08s ease;
}

/* 2. Botão Secundário / Ghost Estilo Smartphone */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #FFFFFF;
  color: var(--color-primary-dark) !important;
  font-weight: 700;
  font-size: 0.90rem;
  padding: 11px 22px;
  border-radius: 14px;
  border: 1.5px solid #CBD5E1;
  border-top: 1.5px solid #E2E8F0;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(7, 29, 54, 0.05), 0 1px 2px rgba(7, 29, 54, 0.03);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  min-height: 44px;
}

.btn-ghost:hover {
  background: #F8FAFC;
  border-color: var(--color-primary);
  color: var(--color-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 90, 156, 0.14);
}

.btn-ghost:active {
  transform: scale(0.95);
  background: #F1F5F9;
  box-shadow: 0 1px 4px rgba(7, 29, 54, 0.08);
  transition: transform 0.08s ease;
}

/* 3. Botão Branco Sólido (Usado em banners azuis/verdes) */
.btn-solid-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #FFFFFF;
  color: var(--color-primary-dark) !important;
  font-weight: 700;
  font-size: 0.90rem;
  padding: 12px 22px;
  border-radius: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  min-height: 44px;
}

.btn-solid-white:hover {
  background: #F8FAFC;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}

.btn-solid-white:active {
  transform: scale(0.95);
  background: #F1F5F9;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform 0.08s ease;
}

.btn-solid-white.is-green {
  color: #005A9C !important;
}

/* 4. Botão Outline Light */
.btn-outline-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 0.90rem;
  padding: 11px 22px;
  border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  min-height: 44px;
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.btn-outline-light:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.25);
  transition: transform 0.08s ease;
}

.btn-sm {
  padding: 8px 16px !important;
  font-size: 0.84rem !important;
  border-radius: 10px !important;
  min-height: 38px !important;
}

.card-eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  align-self: flex-start;
  margin-bottom: 12px;
  backdrop-filter: blur(4px);
}

/* ==========================================================================
   10. RODAPÉ INSTITUCIONAL (FOOTER)
   ========================================================================== */
.footer-main {
  background: #061524;
  color: rgba(255, 255, 255, 0.75);
  padding: 60px 0 25px;
  border-top: 4px solid transparent;
  border-image: var(--gradient-water) 1;
  background-image: radial-gradient(800px 300px at 85% 0%, rgba(2, 132, 199, 0.12), transparent 70%);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 36px;
  margin-bottom: 40px;
}

.footer-col h4 {
  color: #FFFFFF;
  font-size: 1.05rem;
  margin-bottom: 16px;
}

.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  margin-bottom: 8px;
}

.footer-col h4 {
  position: relative;
  padding-bottom: 10px;
}

.footer-col h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  background: var(--gradient-water);
  border-radius: 2px;
}

.footer-col ul li a {
  display: inline-block;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.88rem;
}

.footer-col ul li a:hover {
  color: #38BDF8;
  transform: translateX(4px);
}

.footer-logo {
  filter: brightness(0) invert(1);
  height: 48px;
  width: auto;
  margin-bottom: 16px;
}

.footer-about {
  font-size: 0.88rem;
  line-height: 1.6;
}

.footer-about a {
  color: #38BDF8;
}

.footer-about a:hover {
  text-decoration: underline;
}

.footer-legal {
  display: flex;
  gap: 18px;
  align-items: center;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
  transition: var(--transition);
}

.footer-legal a:hover {
  color: #38BDF8;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
}

/* ==========================================================================
   11. ANIMAÇÕES DE ENTRADA (progressivas — só em browsers compatíveis)
   ========================================================================== */
@keyframes aprh-reveal {
  from {
    opacity: 0;
    translate: 0 24px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@supports (animation-timeline: view()) {

  .visual-card,
  .news-item-row,
  .vitrine-cover-card,
  .stats-strip,
  .dual-card {
    animation: aprh-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 22%;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Responsivo — Otimização Mobile & APESB Clean Aesthetic */
@media (max-width: 992px) {
  .hero-showcase-grid {
    grid-template-columns: 1fr;
  }

  .visual-cards-grid {
    grid-template-columns: 1fr;
  }

  .vitrine-flex {
    grid-template-columns: 1fr;
  }

  .news-memory-grid {
    grid-template-columns: 1fr;
  }

  .stats-4cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .associados-dual-banner {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .stats-4cols>div:nth-child(odd) {
    border-left: none;
  }

  .topbar-left .topbar-item:first-child {
    display: none;
  }

  .header-main {
    position: sticky;
    top: 0;
    z-index: 1500;
  }

  .nav-wrap {
    position: static;
    height: 68px;
  }

  .logo-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .logo-link img {
    height: 44px;
    width: 100px;
    max-width: 100%;
    aspect-ratio: 105.34 / 46.48;
    object-fit: contain;
    display: block;
  }

  /* Navegação Mobile em Dropdown Ancorado */
  .nav-toggle {
    display: flex;
    z-index: 1300;
  }

  .btn-header-cta {
    display: none;
  }

  #nav-principal {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    max-height: calc(100vh - 68px);
    max-height: calc(100dvh - 68px);
    background: #FFFFFF;
    border-top: 3px solid var(--color-secondary);
    box-shadow: 0 16px 36px rgba(7, 29, 54, 0.15);
    z-index: 1250;
    padding: 16px 20px 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: none;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
  }

  #nav-principal.is-open {
    display: flex;
    opacity: 1;
    transform: translateY(0);
  }

  /* ========================================================================
     ESTILOS ANTERIORES DA NAVEGAÇÃO MOBILE (PRESERVADOS / COMENTADOS)
     ========================================================================
  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
  }

  .nav-item {
    width: 100%;
  }

  .nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
  }

  .nav-link:hover,
  .nav-item.is-expanded > .nav-link {
    background: var(--color-primary-light);
    color: var(--color-primary);
  }

  .nav-item.is-expanded .nav-arrow {
    transform: rotate(180deg);
  }

  .dropdown-box {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--color-secondary);
    border-radius: 0;
    margin: 4px 0 8px 14px;
    padding: 4px 0 4px 10px;
    display: none;
    background: #FAFCFE;
  }

  .nav-item.is-expanded .dropdown-box {
    display: block;
  }

  .dropdown-box li a {
    padding: 8px 10px;
    font-size: 0.88rem;
  }
  ======================================================================== */

  /* ========================================================================
     ESTILOS ANTERIORES DA NAVEGAÇÃO LINEAR (PRESERVADOS / COMENTADOS)
     ========================================================================
  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .nav-item { width: 100%; }
  .nav-link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 11px 14px;
    background: #FFFFFF;
    border: 1px solid rgba(15, 45, 74, 0.08);
    border-radius: 14px;
    font-size: 0.94rem;
    font-weight: 700;
  }
  ======================================================================== */

  /* ========================================================================
     NOVO: MENU SANDWICH EM LINHAS DE 3 GRANDES QUADRADOS ESTILIZADOS
     ======================================================================== */
  .nav-links {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    width: 100%;
    list-style: none;
    padding: 8px 0 14px;
    margin: 0;
  }

  .nav-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: static !important;
  }

  .nav-item.nav-item-mobile-only {
    display: flex !important;
  }

  /* ========================================================================
     VERSÃO ANTERIOR: QUADRADOS BRANCOS BÁSICOS (PRESERVADOS / COMENTADOS)
     ========================================================================
  .nav-link {
    width: 100%;
    aspect-ratio: 1 / 1.05;
    min-height: 94px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px 4px 8px;
    background: #FFFFFF;
    border: 1.5px solid rgba(15, 45, 74, 0.08);
    border-radius: 18px;
    box-shadow: 0 4px 12px rgba(7, 29, 54, 0.05), 0 1px 2px rgba(7, 29, 54, 0.03);
    text-decoration: none;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    gap: 6px;
    position: relative;
    overflow: hidden;
    font-size: 0.77rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    line-height: 1.18;
    letter-spacing: -0.01em;
  }
  ======================================================================== */

  /* ========================================================================
     NOVA VERSÃO: GRANDES QUADRADOS ESTILIZADOS (TILES PREMIUM SMARTPHONE OS)
     ======================================================================== */
  .nav-link {
    width: 100%;
    aspect-ratio: 1 / 1 !important;
    /* Grande Quadrado Perfeito */
    min-height: 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 6px 10px;
    background: #FFFFFF;
    border: 1.5px solid rgba(15, 45, 74, 0.10);
    border-top: 1.5px solid rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    /* Grande quadrado com cantos arredondados de smartphone */
    box-shadow: 0 4px 16px rgba(7, 29, 54, 0.06), 0 1px 3px rgba(7, 29, 54, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    gap: 6px;
    position: relative;
    overflow: hidden;
    font-size: 0.80rem;
    font-weight: 750;
    color: var(--color-primary-dark);
    line-height: 1.18;
    letter-spacing: -0.01em;
  }

  /* Efeito de Pressão Tátil (Haptic Push) ao tocar */
  .nav-link:active {
    transform: scale(0.91) !important;
    box-shadow: 0 1px 4px rgba(7, 29, 54, 0.12), inset 0 2px 4px rgba(0, 0, 0, 0.04) !important;
    filter: brightness(0.97);
  }

  .nav-link:hover,
  .nav-item.is-expanded>.nav-link {
    border-color: rgba(0, 90, 156, 0.4);
    box-shadow: 0 8px 22px rgba(0, 90, 156, 0.16), 0 2px 6px rgba(0, 90, 156, 0.08);
  }

  .nav-item.is-expanded>.nav-link {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 90, 156, 0.2), 0 8px 22px rgba(0, 90, 156, 0.16);
  }

  .nav-arrow {
    display: none !important;
  }

  /* Ícones Squircle Grandes Flutuantes no Topo do Quadrado */
  .nav-item>.nav-link::before {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 14px;
    font-size: 1.55rem;
    margin: 0;
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(7, 29, 54, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.95);
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .nav-link:hover::before {
    transform: scale(1.10);
  }

  /* Personalização Estilizada por Grande Quadrado (Cores e Gradientes Exclusivos) */
  .nav-item:nth-child(1) .nav-link {
    background: linear-gradient(150deg, #FFFFFF 0%, #E0F2FE 100%);
    border-color: #BAE6FD;
  }

  .nav-item:nth-child(1)>.nav-link::before {
    content: "🏛️";
  }

  .nav-item:nth-child(2) .nav-link {
    background: linear-gradient(150deg, #FFFFFF 0%, #DCFCE7 100%);
    border-color: #BBF7D0;
  }

  .nav-item:nth-child(2)>.nav-link::before {
    content: "👥";
  }

  .nav-item:nth-child(3) .nav-link {
    background: linear-gradient(150deg, #FFFFFF 0%, #FEF3C7 100%);
    border-color: #FDE68A;
  }

  .nav-item:nth-child(3)>.nav-link::before {
    content: "📅";
  }

  .nav-item:nth-child(4) .nav-link {
    background: linear-gradient(150deg, #FFFFFF 0%, #EDE9FE 100%);
    border-color: #DDD6FE;
  }

  .nav-item:nth-child(4)>.nav-link::before {
    content: "📚";
  }

  .nav-item:nth-child(5) .nav-link {
    background: linear-gradient(150deg, #FFFFFF 0%, #CFFAFE 100%);
    border-color: #A5F3FC;
  }

  .nav-item:nth-child(5)>.nav-link::before {
    content: "💧";
  }

  .nav-item:nth-child(6) .nav-link {
    background: linear-gradient(150deg, #FFFFFF 0%, #F3E8FF 100%);
    border-color: #E9D5FF;
  }

  .nav-item:nth-child(6)>.nav-link::before {
    content: "🌍";
  }

  .nav-item:nth-child(7) .nav-link {
    background: linear-gradient(150deg, #FFFFFF 0%, #FFE4E6 100%);
    border-color: #FECDD3;
  }

  .nav-item:nth-child(7)>.nav-link::before {
    content: "📢";
  }

  .nav-item:nth-child(8) .nav-link {
    background: linear-gradient(150deg, #FFFFFF 0%, #E0E7FF 100%);
    border-color: #C7D2FE;
  }

  .nav-item:nth-child(8)>.nav-link::before {
    content: "🗓️";
  }

  /* Grande Quadrado Dourado VIP (Fazer Sócio) */
  .nav-item-vip .nav-link,
  .nav-item:nth-child(9) .nav-link {
    background: linear-gradient(150deg, #FEFCE8 0%, #FEF08A 100%) !important;
    border: 1.5px solid #FACC15 !important;
    box-shadow: 0 4px 18px rgba(234, 179, 8, 0.28), inset 0 1px 0 #FFFFFF !important;
  }

  .nav-item:nth-child(9)>.nav-link::before {
    content: "⭐";
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(234, 179, 8, 0.35), inset 0 1px 1px #FFFFFF;
  }

  /* Submenus em Action Sheet / Painel Tátil Fluido a Toda a Largura */
  .dropdown-box {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    top: 10px !important;
    bottom: 14px !important;
    width: auto !important;
    max-height: calc(100% - 24px) !important;
    background: #FFFFFF !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 48px rgba(7, 29, 54, 0.35), 0 0 0 1px rgba(7, 29, 54, 0.1) !important;
    padding: 16px 16px 20px !important;
    overflow-y: auto !important;
    z-index: 1700 !important;
    display: none;
    animation: mobileSheetUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: none !important;
    margin: 0 !important;
  }

  .nav-item.is-expanded .dropdown-box {
    display: block !important;
  }

  .dropdown-box::before {
    content: "✕ Voltar aos 9 menus";
    display: block;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-primary);
    background: #EBF3FE;
    padding: 7px 12px;
    border-radius: 10px;
    margin-bottom: 12px;
    cursor: pointer;
  }

  /* Puxador táctil estilo iOS no topo */
  .dropdown-box::before {
    content: "";
    display: block;
    width: 44px;
    height: 5px;
    border-radius: 4px;
    background: #CBD5E1;
    margin: 0 auto 14px;
  }

  .dropdown-box li {
    margin-bottom: 4px;
    list-style: none;
  }

  .dropdown-box li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #1E293B;
    border-radius: 12px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    transition: all 0.15s ease;
  }

  .dropdown-box li a::after {
    content: "›";
    font-size: 1.15rem;
    color: #94A3B8;
    font-weight: 700;
  }

  .dropdown-box li a:active,
  .dropdown-box li a:hover {
    background: #FFFFFF;
    color: var(--color-primary);
    border-color: rgba(0, 90, 156, 0.3);
    box-shadow: 0 2px 8px rgba(0, 90, 156, 0.1);
  }

  /* Submenus em gaveta tátil / acordeão com aspeto de cartões smartphone */
  .dropdown-box {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: inset 0 2px 4px rgba(7, 29, 54, 0.03);
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    margin: 6px 0 10px 0;
    padding: 6px;
    display: none;
    background: #F8FAFC;
    list-style: none;
  }

  .nav-item.is-expanded .dropdown-box {
    display: block;
    animation: mobileDrawerSlide 0.25s var(--ease-out);
  }

  @keyframes mobileDrawerSlide {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .dropdown-box li {
    margin-bottom: 2px;
  }

  .dropdown-box li:last-child {
    margin-bottom: 0;
  }

  .dropdown-box li a {
    display: flex;
    align-items: center;
    padding: 9px 12px;
    font-size: 0.86rem;
    font-weight: 600;
    color: #334155;
    border-radius: 8px;
    transition: all 0.15s ease;
  }

  .dropdown-box li a:active,
  .dropdown-box li a:hover {
    background: #FFFFFF;
    color: var(--color-primary);
    padding-left: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  /* Overlay de fundo */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(7, 29, 54, 0.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .nav-backdrop.is-active {
    opacity: 1;
    visibility: visible;
  }

  body.menu-open {
    overflow: hidden;
  }
}

/* ==========================================================================
   COMPACTAÇÃO VERTICAL MOBILE (< 768px)
   ========================================================================== */
@media (max-width: 768px) {

  /* Barra Superior */
  .topbar {
    padding: 5px 0;
    font-size: 0.76rem;
  }

  .topbar-right {
    display: none;
  }

  /* ========================================================================
     ESTILOS ANTERIORES DO ACESSO RÁPIDO MOBILE (PRESERVADOS / COMENTADOS)
     ========================================================================
  .acesso-rapido-bar {
    padding: 6px 0;
  }
  .acesso-rapido-flex {
    padding: 0 16px;
    gap: 6px;
  }
  .acesso-rapido-title {
    display: none;
  }
  .acesso-pill {
    padding: 4px 10px;
    font-size: 0.74rem;
  }
  ======================================================================== */

  /* NOVO: Hub de Botões Estilo Telemóvel em Grelha 2 Colunas */
  .mobile-app-menu-hub {
    padding: 10px 0 14px;
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
  }

  .mobile-app-hub-header {
    margin-bottom: 8px;
    padding: 0 4px;
  }

  .mobile-app-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .mobile-menu-card {
    padding: 8px 10px;
    border-radius: 14px;
    gap: 8px;
    min-height: 56px;
  }

  .mobile-card-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    font-size: 1.15rem;
  }

  .mobile-card-title {
    font-size: 0.82rem;
    font-weight: 700;
  }

  .mobile-card-sub {
    font-size: 0.66rem;
    line-height: 1.15;
  }

  .mobile-card-arrow {
    font-size: 0.95rem;
  }

  /* Hero Showcase Compacto */
  .hero-showcase {
    padding: 14px 0 12px;
  }

  .hero-showcase-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .hero-banner-main {
    border-radius: 12px;
  }

  .hero-banner-img-wrap {
    height: 190px;
    max-height: 190px;
  }

  .hero-banner-img-wrap img {
    height: 100%;
    max-height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  .hero-banner-content {
    padding: 14px 14px 16px;
  }

  .hero-banner-meta {
    gap: 6px;
    margin-bottom: 8px;
  }

  .hero-banner-tag {
    font-size: 0.68rem;
    padding: 3px 8px;
  }

  .hero-date-chip {
    font-size: 0.72rem;
    padding: 3px 8px;
  }

  .hero-banner-title {
    font-size: 1.35rem;
    line-height: 1.22;
    margin-bottom: 6px;
  }

  .hero-banner-desc {
    font-size: 0.85rem;
    line-height: 1.42;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hero-banner-actions {
    gap: 8px;
  }

  .btn-primary,
  .btn-ghost {
    padding: 8px 14px;
    font-size: 0.82rem;
  }

  /* Coluna de Destaques: Compactada em 2 Colunas Lado a Lado (poupa ~300px!) */
  .hero-side-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .hero-card-blue,
  .hero-card-green {
    padding: 12px 10px;
    border-radius: 10px;
    justify-content: space-between;
  }

  .hero-card-blue .card-eyebrow,
  .hero-card-green .card-eyebrow {
    font-size: 0.62rem;
    padding: 2px 6px;
    margin-bottom: 4px;
  }

  .hero-card-blue h3,
  .hero-card-green h3 {
    font-size: 0.92rem;
    line-height: 1.22;
    margin-bottom: 4px;
  }

  .hero-card-blue p,
  .hero-card-green p {
    display: none;
    /* Oculta parágrafo longo no telemóvel para poupar altura */
  }

  .hero-card-blue .btn-solid-white,
  .hero-card-green .btn-solid-white {
    padding: 6px 10px;
    font-size: 0.75rem;
    margin-top: 6px;
  }

  /* Pesquisa Rápida */
  .section-search {
    padding: 6px 0 14px;
  }

  .search-strip {
    padding: 10px 12px;
    gap: 8px;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 12px;
    border-radius: 10px;
  }

  .search-strip-label {
    font-size: 0.84rem;
  }

  .search-strip-box {
    padding: 3px 4px 3px 12px;
  }

  .search-strip-input {
    font-size: 0.84rem;
  }

  #global-search-btn {
    padding: 6px 12px !important;
    font-size: 0.78rem !important;
  }

  /* Destaques em Cartões Horizontais Compactos (estilo notícias ágeis) */
  .section-highlights {
    padding: 10px 0 20px;
  }

  .section-headline {
    margin-bottom: 14px;
    padding-bottom: 8px;
    flex-direction: row;
    align-items: center;
  }

  .headline-title {
    font-size: 1.15rem;
  }

  .headline-link {
    font-size: 0.76rem;
    padding: 4px 10px;
  }

  .visual-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .visual-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
  }

  .visual-card-thumb {
    width: 80px;
    min-width: 80px;
    height: 80px;
    border-radius: 8px;
    padding: 4px;
    flex-shrink: 0;
    background: #F1F5F9;
  }

  .visual-card-thumb img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
  }

  .visual-card-backdrop {
    display: none;
  }

  .visual-card-badge {
    display: none;
    /* Oculta badge sobreposta para manter thumbnail limpa */
  }

  .visual-card-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
  }

  .visual-card-date {
    font-size: 0.7rem;
    margin-bottom: 2px;
  }

  .visual-card-title {
    font-size: 0.86rem;
    line-height: 1.3;
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .visual-card-desc {
    display: none;
    /* Oculta resumo no mobile */
  }

  /* ========================================================================
     VERSÃO ANTERIOR: LINK DE TEXTO SIMPLES (PRESERVADO / COMENTADOS)
     ========================================================================
  .visual-card-action {
    font-size: 0.74rem;
    padding-top: 0;
    border-top: none;
  }
  ======================================================================== */

  /* Botão Estilo Smartphone Tátil no Cartão de Evento Mobile */
  .visual-card-action {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 4px;
    padding: 5px 11px;
    margin-top: 4px;
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    color: #0284C7 !important;
    border: 1px solid rgba(2, 132, 199, 0.22);
    border-radius: 9px;
    font-size: 0.72rem;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(2, 132, 199, 0.08);
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .visual-card-action:active {
    transform: scale(0.94);
    background: #BAE6FD;
  }

  /* Vitrine Editorial: Capas lado a lado compactas */
  .vitrine-section {
    padding: 24px 0;
    margin: 18px 0;
  }

  .vitrine-flex {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .vitrine-covers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }

  .vitrine-cover-card {
    min-width: unset;
    max-width: unset;
    padding: 10px 8px;
    border-radius: 10px;
  }

  .vitrine-cover-card img {
    max-height: 150px;
    margin: 0 auto 6px;
  }

  .cover-title {
    font-size: 0.74rem;
    margin-top: 4px;
  }

  .cover-issue {
    font-size: 0.68rem;
  }

  .cover-issn {
    font-size: 0.62rem;
  }

  .vitrine-info h2 {
    font-size: 1.35rem;
    margin-bottom: 8px;
  }

  .vitrine-info p {
    font-size: 0.84rem;
    line-height: 1.45;
    margin-bottom: 12px;
  }

  .vitrine-pills {
    gap: 6px;
    margin-bottom: 14px;
  }

  .vitrine-pill-item {
    font-size: 0.72rem;
    padding: 3px 8px;
  }

  .vitrine-actions {
    gap: 8px;
  }

  .vitrine-actions a {
    padding: 8px 14px;
    font-size: 0.78rem;
  }

  /* Notícias Recentes & Memória */
  .section-news {
    padding: 12px 0 18px;
  }

  .news-memory-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 18px;
  }

  .news-list {
    gap: 10px;
  }

  .news-item-row {
    padding: 10px 12px;
    gap: 10px;
    border-radius: 10px;
  }

  .news-date-badge {
    min-width: 48px;
    padding: 6px 4px;
    border-radius: 6px;
  }

  .news-date-day {
    font-size: 1.1rem;
  }

  .news-date-month {
    font-size: 0.62rem;
  }

  .news-item-body h4 {
    font-size: 0.88rem;
    line-height: 1.25;
    margin-bottom: 2px;
  }

  .news-item-body p {
    font-size: 0.76rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .memory-widget-box {
    border-radius: 10px;
  }

  .memory-widget-header {
    padding: 10px 14px;
  }

  .memory-widget-header h3 {
    font-size: 0.92rem;
  }

  .memory-widget-body {
    padding: 12px 14px;
    gap: 10px;
  }

  /* Ocultar eventos de memória acima de 2 no telemóvel para poupar altura */
  .memory-event-entry:nth-child(n+3),
  .card-memoria:nth-child(n+3) {
    display: none;
  }

  .memory-widget-footer {
    padding-top: 6px;
    font-size: 0.76rem;
  }

  /* Estatísticas em 2x2 Compacto */
  .section-stats {
    margin-bottom: 18px;
  }

  .stats-strip {
    padding: 18px 12px;
    border-radius: 12px;
    margin-bottom: 18px;
  }

  .stats-4cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 8px;
  }

  .stats-4cols>div {
    padding: 0 4px;
  }

  .stat-figure {
    font-size: 1.6rem;
    margin-bottom: 2px;
  }

  .stat-title {
    font-size: 0.8rem;
  }

  .stat-sub {
    font-size: 0.68rem;
    line-height: 1.25;
  }

  /* Membros Dual Banner */
  .section-associados {
    margin-bottom: 20px;
  }

  .associados-dual-banner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
  }

  .dual-card {
    padding: 16px 14px;
    border-radius: 10px;
  }

  .dual-card h3 {
    font-size: 1.1rem;
    margin-bottom: 4px;
  }

  .dual-card p {
    font-size: 0.82rem;
    line-height: 1.38;
    margin-bottom: 12px;
  }

  .btn-solid-white {
    padding: 8px 14px;
    font-size: 0.8rem;
  }

  /* Rodapé */
  .footer-main {
    padding: 28px 0 18px;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 18px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

/* ==========================================================================
   SISTEMA DE PUBLICAÇÕES, REVISTAS E ARTIGOS CIENTÍFICOS (COMPATÍVEL OJS)
   ========================================================================== */

/* 1. Barra de Navegação Estrutural (Breadcrumbs) */
.breadcrumbs {
  padding: 14px 0 10px;
  font-size: 0.84rem;
  color: var(--color-text-muted);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  gap: 6px;
  padding: 0;
  margin: 0;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumbs li+li::before {
  content: "›";
  color: #94A3B8;
  font-weight: 700;
  font-size: 0.95rem;
}

.breadcrumbs a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumbs a:hover {
  text-decoration: underline;
  color: var(--color-primary-dark);
}

.breadcrumbs [aria-current="page"] {
  color: var(--color-text-dark);
  font-weight: 600;
}

/* 2. Topo do Artigo / Paper com Thumbnail Diferenciador da Publicação */
.article-header {
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--border-light);
  padding: 24px 0 28px;
  position: relative;
  overflow: hidden;
}

.article-header-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 36px;
}

.article-header-main {
  flex: 1;
  min-width: 0;
}

/* Badges e Identificadores no Topo */
.article-badges-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.article-pub-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #E0F2FE;
  color: #0369A1;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(3, 105, 161, 0.18);
  transition: all 0.2s ease;
}

.article-pub-pill:hover {
  background: #BAE6FD;
  color: #0284C7;
}

.article-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #F1F5F9;
  color: #475569;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.article-open-access-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FEF3C7;
  color: #92400E;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 750;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

/* Títulos Canónicos */
.article-title {
  font-family: 'Raleway', sans-serif;
  font-size: 1.88rem;
  font-weight: 600;
  line-height: 1.28;
  color: #0A2540;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.article-subtitle {
  font-family: 'Source Sans 3', 'Inter', sans-serif;
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 400;
  color: #4A5568;
  margin-bottom: 10px;
  line-height: 1.4;
}

/* Linha de Autores */
.article-authors-line {
  font-family: 'Source Sans 3', 'Inter', sans-serif;
  font-size: 0.94rem;
  color: #1E293B;
  margin-bottom: 10px;
  line-height: 1.4;
}

.article-authors-line strong {
  font-weight: 600;
}

.article-author-sup {
  font-size: 0.70rem;
  color: var(--color-primary);
  font-weight: 700;
  margin-left: 2px;
}

/* Faixa de Metadados Canónicos OJS */
.article-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding-top: 9px;
  border-top: 1px dashed #CBD5E1;
  font-family: 'Raleway', 'Source Sans 3', sans-serif;
  font-size: 0.77rem;
  line-height: 1.35;
  color: #64748B;
  letter-spacing: 0.02em;
}

.article-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.article-meta-item strong {
  color: #1E293B;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
}

/* Identificador DOI Oficial Canónico (Discreto e sem moldura/caixa) */
.article-doi-badge {
  display: inline;
  color: #1E293B;
  font-weight: 600;
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: none;
  font-size: 0.78rem;
  line-height: 1.3;
  user-select: all;
}

/* Links Secundários no Meta-Bar (ex.: Fascículo ou Atas) */
.article-meta-link,
.article-doi-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #0284C7;
  font-weight: 700;
  text-decoration: none;
  background: #F0F9FF;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.74rem;
  border: 1px solid rgba(2, 132, 199, 0.2);
  transition: all 0.15s ease;
  line-height: 1.3;
}

.article-meta-link:hover,
.article-doi-link:hover {
  background: #E0F2FE;
  color: #0369A1;
}

/* Botão / Link de Download do PDF Oficial no Meta-Bar */
.article-pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FEF2F2;
  color: #B91C1C !important;
  font-weight: 700;
  font-size: 0.74rem;
  padding: 1px 7px;
  border-radius: 4px;
  border: 1px solid rgba(185, 28, 28, 0.25);
  text-decoration: none;
  transition: all 0.18s ease;
  line-height: 1.3;
}

.article-pdf-link:hover {
  background: #DC2626;
  color: #FFFFFF !important;
  border-color: #DC2626;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(220, 38, 38, 0.25);
}

.article-pdf-link svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke: currentColor;
}

.article-pdf-link .pdf-tag {
  font-size: 0.67rem;
  font-weight: 750;
  background: rgba(185, 28, 28, 0.1);
  color: #991B1B;
  padding: 0 4px;
  border-radius: 3px;
  transition: background 0.18s ease, color 0.18s ease;
}

.article-pdf-link:hover .pdf-tag {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

/* O Factor Diferenciador: Thumbnail Oficial da Publicação-Mãe */
.article-header-thumb {
  width: 170px;
  min-width: 170px;
  flex-shrink: 0;
  text-align: center;
}

.article-thumb-card {
  display: block;
  background: #FFFFFF;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(15, 45, 74, 0.12);
  box-shadow: 0 10px 28px rgba(7, 29, 54, 0.14), 0 2px 6px rgba(7, 29, 54, 0.05);
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.article-thumb-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 16px 36px rgba(0, 90, 156, 0.22);
  border-color: var(--color-primary);
}

.article-thumb-img {
  width: 100%;
  aspect-ratio: 1 / 1.414;
  /* Proporção A4 / Fascículo */
  object-fit: contain;
  border-radius: 6px;
  display: block;
  background: #FFFFFF;
}

.article-thumb-info {
  display: block;
  margin-top: 8px;
  text-align: center;
}

.article-thumb-label {
  display: block;
  margin-top: 8px;
  font-size: 0.74rem;
  font-weight: 750;
  color: var(--color-primary-dark);
  line-height: 1.25;
}

.article-thumb-info .article-thumb-label {
  margin-top: 0;
}

.article-thumb-issue-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: #0284C7;
  text-decoration: none;
  font-weight: 600;
}

.article-thumb-issue-link:hover {
  text-decoration: underline;
}

.article-thumb-action {
  display: none;
}

/* 3. Grelha Principal do Artigo (Corpo + Barra Lateral OJS) */
.article-body-section {
  padding: 36px 0 60px;
  background: #FFFFFF;
}

.article-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 36px;
  align-items: start;
}

.article-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Cartões de Conteúdo Estruturado */
.article-section-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: 0 2px 10px rgba(7, 29, 54, 0.03);
}

.article-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: 'Raleway', sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: #0C2340;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid #E2E8F0;
}

.article-section-heading span.badge-lang {
  font-family: 'Source Sans 3', 'Inter', sans-serif;
  font-size: 0.70rem;
  font-weight: 600;
  background: #E2E8F0;
  color: #334155;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

.article-text {
  font-family: 'Source Sans 3', 'Inter', -apple-system, sans-serif;
  font-size: 0.98rem;
  line-height: 1.72;
  color: #2D3748;
  margin: 0;
  text-align: justify;
}

/* Afiliações Académicas */
.article-affiliations-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.90rem;
  color: #475569;
}

.article-affiliations-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.45;
}

.affiliation-num {
  font-weight: 800;
  color: var(--color-primary);
  min-width: 18px;
}

/* Palavras-chave em Chips Táteis */
.keywords-group {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed #E2E8F0;
}

.keywords-group strong {
  display: block;
  font-size: 0.82rem;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.chips-wrap,
.article-keywords-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.keyword-chip,
.kw-tag {
  display: inline-flex;
  align-items: center;
  background: #F1F5F9;
  color: #1E293B;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid #E2E8F0;
  transition: all 0.15s ease;
  text-decoration: none;
}

.keyword-chip:hover,
.kw-tag:hover {
  background: #E0F2FE;
  border-color: #BAE6FD;
  color: #0369A1;
}

/* Caixa "Como Citar" Interativa com Cópia Rápida */
.citation-box {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 16px 18px;
  position: relative;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #1E293B;
  margin-bottom: 12px;
}

.citation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-citation-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #FFFFFF;
  color: #0F2D4A;
  border: 1.5px solid #CBD5E1;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-citation-copy:hover {
  background: #F1F5F9;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-citation-copy:active {
  transform: scale(0.95);
}

/* Lista de Referências Bibliográficas (Cited-by) */
.references-list {
  padding-left: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: 'Source Sans 3', 'Inter', sans-serif;
  font-size: 0.90rem;
  line-height: 1.6;
  color: #334155;
}

.references-list li {
  word-break: break-word;
}

.references-list a {
  color: #0284C7;
  text-decoration: none;
}

.references-list a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   MÉTRICAS DE IMPACTO & CITAÇÕES RECEBIDAS (CITED-IN / CITADO POR)
   ========================================================================== */
.article-citations-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #EFF6FF;
  color: #1D4ED8;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.74rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(29, 78, 216, 0.2);
  transition: all 0.15s ease;
  line-height: 1.3;
}

.article-citations-pill:hover {
  background: #DBEAFE;
  color: #1E40AF;
  text-decoration: underline;
}

.citation-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.metric-badge-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

a.metric-badge-box:hover {
  background: #F8FAFC;
  border-color: #93C5FD;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.12);
}

.metric-brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.metric-brand-icon img,
.metric-brand-img {
  max-height: 24px;
  max-width: 78px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.metric-box-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.metric-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 0.70rem;
  font-weight: 700;
  color: #0369A1;
  background: #E0F2FE;
  border: 1px solid rgba(2, 132, 199, 0.25);
  line-height: 1;
}

.metric-label {
  font-family: 'Raleway', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  color: #334155;
  letter-spacing: 0.02em;
  margin-top: 2px;
}

.cited-in-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cited-in-item {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px 16px;
  transition: all 0.15s ease;
}

.cited-in-item:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  box-shadow: 0 4px 14px rgba(7, 29, 54, 0.05);
}

.cited-in-title {
  font-size: 0.94rem;
  font-weight: 750;
  line-height: 1.4;
  margin-bottom: 6px;
}

.cited-in-title a {
  color: #0F2D4A;
  text-decoration: none;
}

.cited-in-title a:hover {
  color: #0284C7;
  text-decoration: underline;
}

.cited-in-meta {
  font-size: 0.82rem;
  color: #64748B;
  line-height: 1.45;
}

.cited-in-meta a {
  color: #0284C7;
  text-decoration: none;
}

.cited-in-meta a:hover {
  text-decoration: underline;
}

/* 4. Barra Lateral OJS (Galley, Downloads e Ações Rápidas) */
.article-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Cartão Principal de Download (Galley OJS) */
.sidebar-galley-card {
  background: linear-gradient(135deg, #005A9C 0%, #003F73 100%);
  color: #FFFFFF;
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: 0 10px 24px rgba(0, 90, 156, 0.28);
}

.sidebar-galley-title {
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #93C5FD;
  margin: 0 0 12px;
}

.btn-galley-download {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 18px;
  background: #FFFFFF;
  color: #0F2D4A !important;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.94rem;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
}

.btn-galley-download:hover {
  transform: translateY(-2px);
  background: #F8FAFC;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.btn-galley-download:active {
  transform: scale(0.96);
}

.galley-filesize {
  font-size: 0.76rem;
  font-weight: 600;
  color: #64748B;
  background: #F1F5F9;
  padding: 3px 8px;
  border-radius: 6px;
}

.btn-galley-ojs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-galley-ojs:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Cartões Secundários da Barra Lateral */
.sidebar-info-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(7, 29, 54, 0.03);
}

.sidebar-info-card h4 {
  font-family: 'Raleway', sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0C2340;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid #F1F5F9;
}

.meta-key-value-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.84rem;
}

.meta-key-value-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meta-key-value-list span.key {
  font-size: 0.72rem;
  color: #64748B;
  text-transform: uppercase;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.meta-key-value-list span.val {
  color: #1E293B;
  font-weight: 600;
  word-break: break-word;
}

/* Cartão de Editoras e Consórcio Editorial na Barra Lateral */
.publisher-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.publisher-logo-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.publisher-logo-card a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
}

.publisher-logo-img {
  max-width: 180px;
  height: auto;
  max-height: 52px;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.publisher-logo-card:hover .publisher-logo-img {
  transform: scale(1.03);
}

.consortium-logos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  align-items: stretch;
}

.consortium-logo-item {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 10px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 62px;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.consortium-logo-item:hover {
  border-color: #0284C7;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(2, 132, 199, 0.12);
  background: #F8FAFC;
}

.consortium-logo-item img {
  max-width: 88%;
  max-height: 42px;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.consortium-logo-item:hover img {
  transform: scale(1.06);
}

/* 5. Responsividade Específica para Artigos e Publicações */
@media (max-width: 992px) {
  .article-header {
    padding: 24px 0 28px;
  }

  .article-header-wrap {
    flex-direction: column;
    gap: 20px;
  }

  .article-header-thumb {
    width: 100%;
    min-width: 100%;
    display: block;
    text-align: left;
    background: transparent;
    padding: 0;
    border-radius: 0;
  }

  .article-thumb-card {
    display: grid;
    grid-template-columns: 130px 1fr;
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: 18px;
    row-gap: 6px;
    width: 100%;
    max-width: 100%;
    padding: 14px 18px 14px 14px;
    background: #FFFFFF;
    border: 1px solid rgba(15, 45, 74, 0.12);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(7, 29, 54, 0.08);
    text-align: left;
    box-sizing: border-box;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .article-thumb-card:hover {
    border-color: #0284C7;
    box-shadow: 0 8px 26px rgba(2, 132, 199, 0.18);
    transform: translateY(-2px);
  }

  .article-thumb-img {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 130px;
    min-width: 130px;
    max-width: 140px;
    aspect-ratio: 1 / 1.414;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
    display: block;
    background: #FFFFFF;
  }

  .article-thumb-info {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-top: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-width: 0;
  }

  .article-thumb-label {
    grid-column: 2;
    margin-top: 0;
    font-size: 1.05rem;
    font-weight: 750;
    color: #0F2D4A;
    line-height: 1.35;
  }

  .article-thumb-issue-link {
    grid-column: 2;
    margin-top: 0;
    font-size: 0.90rem;
    color: #0284C7;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .article-thumb-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.80rem;
    font-weight: 700;
    color: #0284C7;
    background: #F0F9FF;
    border: 1px solid #BAE6FD;
    padding: 6px 12px;
    border-radius: 8px;
    align-self: flex-start;
    transition: all 0.2s ease;
  }

  .article-thumb-card:hover .article-thumb-action {
    background: #0284C7;
    color: #FFFFFF;
    border-color: #0284C7;
  }

  .article-title {
    font-size: 1.45rem;
  }

  .article-subtitle {
    font-size: 0.98rem;
  }

  .article-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .article-section-card {
    padding: 18px 16px;
  }
}

@media (max-width: 540px) {
  .article-thumb-card {
    grid-template-columns: 100px 1fr;
    column-gap: 12px;
    row-gap: 4px;
    padding: 10px 12px;
    border-radius: 12px;
  }

  .article-thumb-img {
    width: 100px;
    min-width: 100px;
    border-radius: 6px;
  }

  .article-thumb-info {
    gap: 4px;
    min-width: 0;
  }

  .article-thumb-label {
    font-size: 0.92rem;
    line-height: 1.25;
  }

  .article-thumb-issue-link {
    font-size: 0.80rem;
    line-height: 1.25;
  }

  .article-thumb-action {
    font-size: 0.72rem;
    padding: 4px 8px;
    margin-top: 2px;
    max-width: 100%;
  }
}

/* ==========================================================================
   HUB DE PUBLICAÇÕES E CATÁLOGO EDITORIAL APRH
   ========================================================================== */

.pub-page-header {
  background: linear-gradient(135deg, #071D36 0%, #003F73 60%, #005A9C 100%);
  color: #FFFFFF;
  padding: 44px 0 50px;
  position: relative;
}

.pub-page-header .breadcrumbs {
  color: rgba(255, 255, 255, 0.7);
}

.pub-page-header .breadcrumbs a {
  color: #93C5FD;
}

.pub-page-header .breadcrumbs a:hover {
  color: #FFFFFF;
}

.pub-page-header .breadcrumbs [aria-current="page"] {
  color: #FFFFFF;
}

.pub-header-content {
  max-width: 820px;
}

.pub-header-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #E0F2FE;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.pub-header-title {
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 12px;
  color: #FFFFFF;
}

.pub-header-desc {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* Grelha de Categorias Editoriais */
.pub-hub-section {
  padding: 44px 0 64px;
  background: #F8FAFC;
}

.pub-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 24px;
}

.pub-card {
  background: #FFFFFF;
  border: 1.5px solid var(--border-light);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(7, 29, 54, 0.05);
  display: flex;
  flex-direction: column;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  color: inherit;
  position: relative;
}

.pub-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 90, 156, 0.35);
  box-shadow: 0 12px 28px rgba(0, 90, 156, 0.12);
}

.pub-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #F1F5F9;
}

.pub-card-badge {
  font-size: 0.76rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  background: #E0F2FE;
  color: #0369A1;
}

.pub-card-count {
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748B;
}

.pub-card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pub-card-thumb-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.pub-card-thumb {
  width: 68px;
  min-width: 68px;
  aspect-ratio: 1 / 1.414;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.pub-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0F2D4A;
  margin: 0 0 6px;
  line-height: 1.3;
}

.pub-card-desc {
  font-size: 0.90rem;
  color: #475569;
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1;
}

.pub-card-footer {
  padding: 12px 20px 16px;
  border-top: 1px solid #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pub-card-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 750;
  color: var(--color-primary);
  transition: all 0.15s ease;
}

.pub-card:hover .pub-card-link-btn {
  color: var(--color-primary-dark);
  gap: 10px;
}

/* Catálogo de Edições / Fascículos de Revistas */
.issues-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 24px;
}

.issue-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 14px rgba(7, 29, 54, 0.04);
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
}

.issue-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
  box-shadow: 0 10px 24px rgba(0, 90, 156, 0.12);
}

.issue-cover-img {
  width: 140px;
  aspect-ratio: 1 / 1.414;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  margin-bottom: 12px;
}

.issue-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: #0F2D4A;
  margin: 0 0 4px;
}

.issue-date {
  font-size: 0.82rem;
  color: #64748B;
  margin-bottom: 10px;
}

.issue-badge-articles {
  font-size: 0.76rem;
  font-weight: 700;
  background: #F1F5F9;
  color: #334155;
  padding: 4px 10px;
  border-radius: 999px;
}

/* ==========================================================================
   CAMADA DE COMPATIBILIDADE NATIVA COM OJS (PKP OPEN JOURNAL SYSTEMS 3.x)
   ==========================================================================
   Permite que este mesmo ficheiro CSS seja carregado como "Custom Journal Style"
   (Painel OJS -> Definições -> Website -> Aspeto -> Folha de Estilos do Diário)
   e estilize nativamente a interface do OJS 3 (temas Default, Health Sciences,
   Pragma e Bootstrap3) com a identidade institucional da APRH.
   ========================================================================== */

/* 1. Mapeamento do Contentor Principal do Artigo no OJS */
.obj_article_details {
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  gap: 36px !important;
  align-items: start !important;
  max-width: var(--container-max) !important;
  margin: 30px auto !important;
  padding: 0 20px !important;
}

/* 2. Área Central de Leitura (Resumo, Afiliações, Citações) no OJS */
.obj_article_details .main_entry {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

/* 3. Barra Lateral de Metadados e Galley no OJS */
.obj_article_details .entry_details {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

/* 4. Bloco de Capa da Publicação (Thumbnail) no OJS */
.obj_article_details .item.cover_image {
  background: #FFFFFF !important;
  padding: 8px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(15, 45, 74, 0.12) !important;
  box-shadow: 0 10px 28px rgba(7, 29, 54, 0.14) !important;
  margin-bottom: 20px !important;
  text-align: center !important;
}

.obj_article_details .item.cover_image img {
  width: 100% !important;
  max-width: 180px !important;
  aspect-ratio: 1 / 1.414 !important;
  object-fit: cover !important;
  border-radius: 6px !important;
}

/* 5. Cartões de Resumo e Secções no OJS */
.obj_article_details .item.abstract,
.obj_article_details .item.keywords,
.obj_article_details .item.citations,
.obj_article_details .item.references,
.obj_article_details .item.how_to_cite {
  background: #FFFFFF !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 16px !important;
  padding: 24px 28px !important;
  box-shadow: 0 2px 10px rgba(7, 29, 54, 0.03) !important;
}

/* 6. Botões Galley (Download de PDF / HTML) no OJS */
.obj_article_details .item.galleys .obj_galley_link,
.obj_galley_link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 13px 18px !important;
  background: linear-gradient(135deg, #005A9C 0%, #003F73 100%) !important;
  color: #FFFFFF !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 0.94rem !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0, 90, 156, 0.28) !important;
  border: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.obj_galley_link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(0, 90, 156, 0.38) !important;
  color: #FFFFFF !important;
}

.obj_galley_link:active {
  transform: scale(0.96) !important;
}

/* 7. DOI e Identificadores no OJS */
.obj_article_details .item.doi .value a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: #0284C7 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  background: #F0F9FF !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(2, 132, 199, 0.2) !important;
}

/* 8. Responsividade OJS em Ecrãs Pequenos */
@media (max-width: 992px) {
  .obj_article_details {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 14px !important;
  }
}

/* ==========================================================================
   9. AFILIAÇÕES COMPACTAS EM ESTILO ACADÉMICO
   ========================================================================== */
.article-affiliations-compact {
  margin-top: 10px;
  margin-bottom: 16px;
  padding: 0;
}

.affiliations-list-clean {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.affiliation-item-clean {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #64748B;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
}

.affiliation-item-clean .affil-marker {
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
  vertical-align: super;
}

.affiliation-item-clean .affil-text {
  color: #556270;
}

.affiliation-item-clean .affil-text strong {
  color: #334155;
  font-weight: 600;
}

.corresponding-line-clean {
  margin-top: 5px;
  font-size: 0.81rem;
  color: #64748B;
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
}

.corresponding-line-clean a {
  color: var(--color-primary, #005A9C);
  text-decoration: none;
}

.corresponding-line-clean a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   10. PALAVRAS-CHAVE (TEXTO FLUIDO, LIMPO E SEM MOLDURAS/QUADRADOS)
   ========================================================================== */
.article-keywords-cloud {
  display: block;
  margin-top: 8px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #334155;
  font-family: var(--font-body, 'Source Sans 3', sans-serif);
}

.keyword-tag {
  display: inline;
  color: #1E293B;
  font-weight: 500;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  font-family: inherit;
  transition: color 0.15s ease;
}

.keyword-tag:hover {
  color: #0284C7;
  background: none;
  border: none;
}

.keyword-comma {
  color: #64748B;
  font-size: inherit;
  margin-right: 4px;
}

/* ==========================================================================
   11. CITAÇÕES RECEBIDAS (CITED-IN)
   ========================================================================== */
.cited-in-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}

.cited-in-subcard {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 16px 20px;
}

.cited-in-subtitle {
  font-size: 0.90rem;
  font-weight: 600;
  color: #1E293B;
  margin: 0 0 10px 0;
  font-family: var(--font-heading, 'Raleway', sans-serif);
}

.cited-in-loading {
  font-size: 0.85rem;
  color: #64748B;
  font-style: italic;
  margin: 0;
}

/* ==========================================================================
   12. NOVO CABEÇALHO EM 2 NÍVEIS COM TRANSIÇÃO ZOOM OUT & MENU SANDWICH
   - Nível 1: Masthead com logótipo oficial centrado amplo, sandwich menu e lupa
   - Nível 2: Barra azul (#3C50A5) fixa com 4 tópicos principais, logótipo branco centrado e lupa
   - Transição: Zoom out fluido do logótipo ao rolar a página
   ========================================================================== */
.header-two-level-wrapper {
  width: 100%;
  background: #FFFFFF;
}

/* Nível 1: Masthead com logótipo oficial centrado */
.header-masthead {
  background: #FFFFFF;
  border-bottom: 1px solid rgba(15, 45, 74, 0.08);
  padding: 12px 0;
  position: relative;
  transition: all 0.3s ease;
}

.container-header {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 24px;
  box-sizing: border-box;
}

.header-masthead-flex {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 88px;
}

/* Esquerda: Sandwich Menu */
.masthead-left {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Botão Sandwich Menu (estilo Science.org) */
.btn-sandwich-menu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  color: #1E293B;
  transition: all 0.2s ease;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  user-select: none;
}

.btn-sandwich-menu:hover {
  background: rgba(15, 23, 42, 0.06);
  color: #3C50A5;
}

.sandwich-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 18px;
  height: 13px;
}

.sandwich-icon span {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: all 0.2s ease;
}

.btn-sandwich-bluebar {
  color: #FFFFFF;
}

.btn-sandwich-bluebar:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
}

/* Espaçador central para manter alinhamento natural nas barras */
.masthead-center-spacer {
  width: 180px;
  height: 78px;
  flex-shrink: 0;
  pointer-events: none;
}

/* Direita: Lupa de Pesquisa + Botão Tornar-se Associado */
.masthead-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

/* Botão Lupa de Pesquisa */
.btn-search-trigger {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(15, 23, 42, 0.12);
  color: #1E293B;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.btn-search-trigger:hover {
  background: #3C50A5;
  color: #FFFFFF;
  border-color: #3C50A5;
  transform: scale(1.05);
}

.btn-search-bluebar {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.35);
}

.btn-search-bluebar:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: #FFFFFF;
  color: #FFFFFF;
}

/* Botão Tornar-se Associado Mais Pequeno e Apelativo */
.btn-masthead-cta {
  background: linear-gradient(135deg, #3C50A5 0%, #2B3D82 100%);
  color: #FFFFFF !important;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(60, 80, 165, 0.25);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.btn-masthead-cta:hover {
  background: linear-gradient(135deg, #2B3D82 0%, #1D2A5B 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(60, 80, 165, 0.38);
}

/* Nível 2: Barra Azul Oficial (#3C50A5) */
.header-blue-bar {
  background: #3C50A5;
  position: fixed;
  top: -80px;
  left: 0;
  width: 100%;
  z-index: 1500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, top;
}

.header-blue-flex {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
}

.bluebar-left-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  z-index: 5;
}

.bluebar-center-spacer {
  width: 110px;
  height: 38px;
  flex-shrink: 0;
  pointer-events: none;
}

.bluebar-right-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
  z-index: 5;
}

/* 4 Grandes Tópicos: ASSOCIADO, APRH, EVENTOS, PUBLICAÇÕES (Sem Submenus) */
.nav-two-level-principal {
  display: flex;
  align-items: center;
}

.nav-links-two-level {
  display: flex;
  list-style: none;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.nav-links-two-level .nav-link {
  color: #FFFFFF;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 0.80rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 13px 12px;
  border-radius: 4px;
  transition: all 0.15s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.nav-links-two-level .nav-link:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
}

.btn-bluebar-cta {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-bluebar-cta:hover {
  background: #FFFFFF;
  color: #3C50A5 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   LOGÓTIPO UNIFICADO — TIMELINE CONTÍNUA E POSICIONAMENTO IRREPREENSÍVEL
   O mesmo elemento em coordenadas perfeitas, interpolando escala
   (78px -> 36px) e cores (azul original -> branco puro) sem saltos.
   ========================================================================== */
.unified-aprh-logo {
  position: fixed;
  left: 50%;
  top: 56px;
  transform: translate3d(-50%, -50%, 0) scale(1);
  transform-origin: center center;
  z-index: 1600;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, top;
}

.unified-logo-link {
  position: relative;
  display: block;
  width: 176px;
  height: 78px;
  text-decoration: none;
}

.logo-state-blue,
.logo-state-white {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  will-change: opacity;
}

.logo-state-blue {
  opacity: 1;
}

.logo-state-white {
  opacity: 0;
}

/* ==========================================================================
   PAINEL LATERAL COMPLETO (SANDWICH DRAWER)
   ========================================================================== */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  z-index: 2900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.aprh-side-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 360px;
  max-width: 86vw;
  height: 100vh;
  background: #FFFFFF;
  z-index: 3000;
  box-shadow: 6px 0 32px rgba(0, 0, 0, 0.22);
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.aprh-side-drawer.is-open {
  transform: translateX(0);
}

.drawer-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #E2E8F0;
  background: #F8FAFC;
}

.drawer-brand-logo {
  height: 38px;
  width: auto;
  display: block;
}

.drawer-close-btn {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  color: #64748B;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.15s ease;
  line-height: 1;
}

.drawer-close-btn:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.drawer-search-wrap {
  padding: 16px 24px;
  border-bottom: 1px solid #F1F5F9;
  background: #FFFFFF;
}

.drawer-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 8px 12px;
  transition: border-color 0.2s;
}

.drawer-search-box:focus-within {
  border-color: #3C50A5;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(60, 80, 165, 0.12);
}

.drawer-search-icon {
  color: #64748B;
  flex-shrink: 0;
}

.drawer-search-input {
  border: none;
  background: transparent;
  width: 100%;
  font-size: 0.88rem;
  color: #0F172A;
  outline: none;
  font-family: inherit;
}

.drawer-nav-content {
  flex: 1;
  padding: 16px 24px 32px;
  overflow-y: auto;
}

.drawer-section {
  margin-bottom: 22px;
}

.drawer-section-heading {
  display: block;
  font-family: 'Raleway', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #3C50A5;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid #F1F5F9;
}

.drawer-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drawer-menu-list a {
  display: block;
  font-family: 'Raleway', sans-serif;
  font-size: 0.88rem;
  color: #1E293B;
  font-weight: 500;
  padding: 6px 0;
  text-decoration: none;
  transition: all 0.15s ease;
}

.drawer-menu-list a:hover {
  color: #3C50A5;
  padding-left: 4px;
}

.drawer-cta-bottom {
  padding: 18px 24px;
  border-top: 1px solid #E2E8F0;
  background: #F8FAFC;
}

.btn-drawer-action {
  display: block;
  text-align: center;
  background: #3C50A5;
  color: #FFFFFF !important;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 11px 18px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-drawer-action:hover {
  background: #2E3E80;
  box-shadow: 0 4px 12px rgba(60, 80, 165, 0.3);
}

/* ==========================================================================
   MODAL DE PESQUISA GLOBAL (pesquisa_global.json)
   ========================================================================== */
.search-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 3500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.search-modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.search-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  z-index: 3501;
}

.search-modal-container {
  position: relative;
  z-index: 3502;
  width: 90%;
  max-width: 660px;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  border: 1px solid #E2E8F0;
  transform: translateY(-20px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-modal-overlay.is-open .search-modal-container {
  transform: translateY(0);
}

.search-modal-header {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #E2E8F0;
  gap: 12px;
  background: #FFFFFF;
}

.search-modal-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-modal-icon {
  color: #3C50A5;
  flex-shrink: 0;
}

.search-modal-input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 1.05rem;
  color: #0F172A;
  font-family: inherit;
  background: transparent;
}

.search-modal-kbd {
  font-family: monospace;
  font-size: 0.70rem;
  background: #F1F5F9;
  color: #64748B;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #CBD5E1;
}

.search-modal-close {
  background: transparent;
  border: none;
  font-size: 1.25rem;
  color: #64748B;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
  transition: all 0.15s ease;
}

.search-modal-close:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.search-modal-results {
  max-height: 420px;
  overflow-y: auto;
  padding: 12px 18px;
}

.search-modal-hint {
  padding: 24px 12px;
  text-align: center;
  color: #64748B;
  font-size: 0.90rem;
}

.search-modal-item {
  padding: 10px 12px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  transition: background 0.15s ease;
  border-bottom: 1px solid #F1F5F9;
}

.search-modal-item:last-child {
  border-bottom: none;
}

.search-modal-item:hover {
  background: #F8FAFC;
}

.search-modal-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-modal-cat-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: #EEF2FF;
  color: #3C50A5;
}

.search-modal-sub-badge {
  font-size: 0.68rem;
  color: #64748B;
}

.search-modal-item-title {
  color: #0F172A;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}

.search-modal-item-sub {
  color: #64748B;
  font-size: 0.78rem;
}

/* ==========================================================================
   13. NOVO RODAPÉ INSTITUCIONAL (AZUL OFICIAL APRH) & ESPAÇAMENTO GLOBAL
   ========================================================================== */

/* Espaçamento respirável garantido entre o conteúdo e o rodapé em TODO o site */
main,
.page-main-content,
main.page-main-content,
.event-detail-main,
.pub-hub-section,
.hub-content-section,
.article-body-section,
.events-section,
.event-detail-content {
  padding-bottom: 56px !important;
}

.footer-institutional-main {
  margin-top: 64px !important;
  background: #3C50A5; /* Azul Oficial APRH */
  color: rgba(255, 255, 255, 0.88);
  border-top: none;
  position: relative;
  z-index: 10;
}

@media (max-width: 768px) {
  main,
  .page-main-content,
  main.page-main-content,
  .event-detail-main,
  .pub-hub-section,
  .hub-content-section,
  .article-body-section,
  .events-section,
  .event-detail-content {
    padding-bottom: 40px !important;
  }
  .footer-institutional-main {
    margin-top: 40px !important;
  }
}

/* Faixa Cinzenta Superior do Rodapé (estilo Science.org) */
.footer-ribbon {
  background: #E5E7EB; /* Faixa cinzenta sóbria */
  border-bottom: 1px solid #D1D5DB;
  padding: 16px 0;
}

.footer-ribbon-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 48px;
}

/* Logótipos das Revistas Científicas APRH no Rodapé (estilo Science.org) */
.footer-ribbon-brand-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: 0.88;
  transition: all 0.2s ease-in-out;
  padding: 4px 8px;
  border-radius: 6px;
}

.footer-ribbon-brand-link:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.footer-ribbon-brand-img {
  display: block;
  width: auto;
  object-fit: contain;
}

.footer-ribbon-rh {
  height: 66px !important;
  max-height: 70px !important;
  max-width: 280px !important;
}

.footer-ribbon-rgci {
  height: 89px !important;
  max-height: 94px !important;
  max-width: 432px !important;
}

/* Recursos Hídricos (Myriad Pro, Bold) — legado/fallback */
.brand-rh {
  font-family: 'Myriad Pro', 'Myriad', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: #111827;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}

.brand-rh:hover {
  color: #005A9C;
}

/* gestão Costeira Integrada (Helvetica Neue LT Pro, Black extended) — legado/fallback */
.brand-rgci {
  font-family: 'Helvetica Neue LT Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: 0.98rem;
  letter-spacing: 0.08em;
  font-stretch: expanded;
  text-transform: none;
  border: 2px solid #275b9b;
  padding: 5px 14px;
  border-radius: 4px;
  color: #111827;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.15s ease;
}

.brand-rgci:hover {
  background: #275b9b;
  color: #FFFFFF;
}

.footer-body-content {
  padding: 44px 0 28px;
}

/* 1. Secção Connect: SEGUIR A APRH & Newsletter */
.footer-connect-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 28px;
  margin-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.footer-social-block {
  display: flex;
  align-items: center;
  gap: 18px;
}

.footer-connect-title {
  color: #FFFFFF;
  font-family: 'Raleway', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0;
}

.footer-social-icons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.social-circle-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.social-circle-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.social-circle-btn:hover {
  background: #FFFFFF;
  color: #3C50A5 !important;
  border-color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.footer-newsletter-block {
  display: flex;
  align-items: center;
}

.btn-footer-newsletter {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.45);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.80rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-footer-newsletter:hover {
  background: #FFFFFF;
  color: #3C50A5 !important;
  border-color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

/* 3. Menus em 4 Colunas */
.footer-links-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}

.footer-links-col {
  display: flex;
  flex-direction: column;
}

.footer-links-title {
  color: #FFFFFF;
  font-family: 'Raleway', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 8px;
  display: inline-block;
  align-self: flex-start;
}

.footer-links-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 1px;
}

.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links-list li {
  line-height: 1.45;
}

.footer-links-list a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.86rem;
  transition: all 0.15s ease;
}

.footer-links-list a:hover {
  color: #FFFFFF;
  text-decoration: underline;
  padding-left: 2px;
}

.footer-contact-list li {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.85rem;
  line-height: 1.5;
}

.footer-contact-list strong {
  color: #FFFFFF;
  font-weight: 700;
}

.footer-contact-list a {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-contact-list a:hover {
  color: #E0E7FF;
}

/* 4. Logótipo APRH sob Horário na Coluna de Contactos */
.footer-contact-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
  margin: 14px 0;
}

.footer-contact-logo {
  display: block;
  padding: 4px 0;
}

.footer-contact-logo a {
  display: inline-block;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer-contact-logo a:hover {
  transform: scale(1.03);
  opacity: 1;
}

.footer-brand-mark {
  display: none;
}

.footer-logo-img {
  height: 44px;
  width: auto;
  opacity: 0.95;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* 5. Direitos e Legal */
.footer-bottom-bar {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.82rem;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 18px;
}

.footer-legal-links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-legal-links a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

.legal-sep {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.75rem;
}

/* ==========================================================================
   RESPONSIVIDADE CABEÇALHO & RODAPÉ
   ========================================================================== */
@media (max-width: 1080px) {
  .nav-links-two-level .nav-link {
    padding: 12px 7px;
    font-size: 0.74rem;
  }
}

@media (max-width: 991px) {
  /* Em ecrãs móveis e tablets:
     - A faixa branca com o logo fica FIXA no topo permanente
     - A barra azul NUNCA aparece (display: none !important)
     - O body recebe padding-top compensatório de 56px para nada ficar tapado */
  .header-two-level-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 2000 !important;
  }

  .header-masthead {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body {
    padding-top: 56px !important;
  }

  .header-blue-bar {
    display: none !important;
  }

  /* No scroll em mobile, o cabeçalho branco permanece sempre ativo, visível e 100% opaco */
  body.header-scrolled .header-masthead {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .header-masthead-flex {
    min-height: 56px !important;
    height: 56px !important;
    padding: 0 16px !important;
  }

  /* O logótipo unificado fica fixo e centrado a 50% na barra branca com tamanho ideal */
  .unified-aprh-logo {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important;
  }

  .unified-logo-link {
    width: 105px !important;
    height: 46px !important;
  }

  .logo-state-blue {
    opacity: 1 !important;
  }

  .logo-state-white {
    opacity: 0 !important;
  }

  .masthead-center-spacer {
    width: 110px !important;
    height: 46px !important;
  }

  /* Na responsividade, apenas 3 elementos existem em cima:
     1. Sandwich Menu (esquerda)
     2. Logótipo APRH centrado (centro)
     3. Lupa para search (direita) */
  .btn-masthead-cta {
    display: none !important;
  }

  .sandwich-label {
    display: none !important; /* Apenas o ícone sandwich no telemóvel */
  }

  .btn-sandwich-menu {
    padding: 6px !important;
  }

  /* Rodapé Responsivo em Tablet e Telemóvel (Hierarquia Estrita Solicitada) */
  .footer-connect-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
    padding-bottom: 24px;
    margin-bottom: 28px;
  }

  .footer-social-block {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .footer-connect-title {
    font-size: 0.86rem;
    letter-spacing: 0.12em;
  }

  .footer-social-icons {
    justify-content: center;
    gap: 12px;
  }

  .social-circle-btn {
    width: 40px;
    height: 40px;
  }

  .footer-newsletter-block {
    justify-content: center;
  }

  .btn-footer-newsletter {
    padding: 9px 22px;
    font-size: 0.82rem;
  }

  .footer-links-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 24px;
  }

  .footer-brand-mark {
    margin: 28px auto 12px;
    padding-top: 20px;
    text-align: center;
  }

  .footer-logo-img {
    height: 40px;
  }

  .footer-bottom-bar {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
  }

  .footer-legal-links {
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .masthead-logo-img {
    height: 42px;
  }

  /* Faixa Cinzenta do Rodapé no Telemóvel */
  .footer-ribbon {
    padding: 14px 16px;
  }

  .footer-ribbon-flex {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .brand-rh {
    font-size: 1.05rem;
  }

  .brand-rgci {
    font-size: 0.80rem;
    letter-spacing: 0.04em;
    padding: 5px 10px;
    max-width: 95%;
    box-sizing: border-box;
    white-space: normal;
    text-align: center;
    justify-content: center;
  }

  /* Corpo do Rodapé no Telemóvel: Estruturação dos Menus */
  .footer-body-content {
    padding: 32px 16px 24px;
  }

  .footer-links-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .footer-links-col {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 16px 18px;
    text-align: left;
  }

  .footer-links-title {
    margin-bottom: 12px;
    font-size: 0.84rem;
  }

  .footer-links-list {
    gap: 8px;
  }

  .footer-links-list li {
    padding: 2px 0;
  }

  .footer-links-list a {
    font-size: 0.88rem;
    display: inline-block;
  }

  .footer-contact-list li {
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   MÓDULO DE ASSOCIADOS: FORMULÁRIOS, QUOTAS E DIRETÓRIO DE PERFIS
   ========================================================================== */

.page-intro-header {
  background: linear-gradient(135deg, #0F2D4A 0%, #1E3A8A 50%, #3C50A5 100%);
  color: #FFFFFF;
  padding: 48px 0 52px;
  margin-bottom: 40px;
}

.page-intro-content {
  max-width: 860px;
}

.page-intro-tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  backdrop-filter: blur(4px);
}

.page-intro-header h1,
.page-intro-header .page-intro-title,
.page-intro-title {
  color: #FFFFFF !important;
  font-family: 'Raleway', sans-serif;
  font-size: 2.35rem;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}

.page-intro-desc {
  font-size: 1.08rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
}

/* Grelha e Cartões da Página de Vantagens da Comunidade */
.vantagens-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.vantagem-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
}

.vantagem-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  border-color: #CBD5E1;
}

.vantagem-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.vantagem-title {
  font-family: 'Raleway', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #0F2D4A;
  margin: 0 0 10px;
}

.vantagem-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #475569;
  margin: 0;
}

/* ==========================================================================
   PÁGINAS INDIVIDUAIS DE PERFIL DE ASSOCIADO
   ========================================================================== */

.perfil-hero-header {
  background: linear-gradient(135deg, #0F2D4A 0%, #1E3A8A 50%, #3C50A5 100%);
  color: #FFFFFF;
  padding: 44px 0 48px;
  margin-bottom: 36px;
}

.perfil-hero-flex {
  display: flex;
  align-items: center;
  gap: 36px;
}

.perfil-avatar-wrap {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.perfil-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.perfil-avatar-placeholder {
  width: 100%;
  height: 100%;
  background: #E2E8F0;
  color: #0F2D4A;
  font-size: 2.2rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Raleway', sans-serif;
}

.perfil-info-main {
  flex-grow: 1;
}

.perfil-badges-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.perfil-badge-ouro {
  background: #FEF3C7;
  color: #B45309;
  border: 1px solid #FCD34D;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}

.perfil-badge-coletivo {
  background: rgba(59, 130, 246, 0.25);
  border: 1px solid rgba(147, 197, 253, 0.5);
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}

.perfil-badge-singular {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}

.perfil-badge-num {
  background: rgba(255, 255, 255, 0.12);
  color: #E2E8F0;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
}

.perfil-nome-title {
  font-family: 'Raleway', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: #FFFFFF !important;
  line-height: 1.25;
  margin: 0 0 14px;
}

.perfil-quick-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.88);
}

.meta-item-link {
  color: #BAE6FD;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s ease;
}

.meta-item-link:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

.meta-item-static {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #E2E8F0;
}

/* Layout Grid da Página de Perfil */
.perfil-layout-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 36px;
  align-items: start;
  margin-bottom: 60px;
}

.perfil-section-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
}

.perfil-card-header {
  background: #F8FAFC;
  border-bottom: 1.5px solid #E2E8F0;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sec-icon {
  font-size: 1.2rem;
}

.perfil-card-title {
  font-family: 'Raleway', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0F2D4A;
  margin: 0;
}

.perfil-card-body {
  padding: 24px;
}

.perfil-text-formatted {
  font-size: 0.96rem;
  line-height: 1.7;
  color: #334155;
}

.perfil-field-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.perfil-field-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  background: #F8FAFC;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
}

.field-label-pill {
  font-weight: 700;
  color: #0F2D4A;
  min-width: 190px;
  font-size: 0.88rem;
  flex-shrink: 0;
}

.field-value-text {
  color: #1E293B;
  font-size: 0.95rem;
  line-height: 1.5;
  word-break: break-word;
}

.perfil-tags-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.perfil-tag-bubble {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1D4ED8;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 6px 14px;
  border-radius: 20px;
  display: inline-block;
}

@media (max-width: 640px) {
  .perfil-field-row {
    flex-direction: column;
    gap: 4px;
  }
  .field-label-pill {
    min-width: unset;
  }
}

.perfil-bottom-actions {
  margin-top: 32px;
}

.btn-back-directory {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  color: #0F2D4A;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.92rem;
  transition: all 0.15s ease;
}

.btn-back-directory:hover {
  background: #0F2D4A;
  color: #FFFFFF;
  border-color: #0F2D4A;
}

/* ==========================================================================
   DIRETÓRIO OFICIAL DE ASSOCIADOS (PERFIS & QUADRO DE HONRA)
   ========================================================================== */
.perfis-control-bar {
  margin-bottom: 36px;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.perfis-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.perfis-stat-card {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  padding: 16px 20px;
  text-align: center;
}

.perfis-stat-card.is-ouro {
  background: #FFFBEB;
  border-color: #FCD34D;
}

.perfis-stat-card .stat-number {
  display: block;
  font-family: 'Raleway', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  color: #0F2D4A;
  line-height: 1.2;
}

.perfis-stat-card.is-ouro .stat-number {
  color: #B45309;
}

.perfis-stat-card .stat-label {
  font-size: 0.85rem;
  color: #64748B;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.perfis-search-wrap {
  position: relative;
}

.perfis-search-input-box {
  position: relative;
  display: flex;
  align-items: center;
}

.perfis-search-input-box .search-icon {
  position: absolute;
  left: 16px;
  color: #94A3B8;
  pointer-events: none;
}

.perfis-input {
  width: 100%;
  padding: 14px 16px 14px 48px;
  border: 1.5px solid #CBD5E1;
  border-radius: 8px;
  font-size: 1rem;
  background: #FFFFFF;
  color: #0F2D4A;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.perfis-input:focus {
  outline: none;
  border-color: #3C50A5;
  box-shadow: 0 0 0 3px rgba(60, 80, 165, 0.15);
}

.filtro-count-badge {
  position: absolute;
  right: 14px;
  font-size: 0.82rem;
  color: #64748B;
  background: #F1F5F9;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 600;
}

.filtro-count-badge.is-active {
  background: #EFF6FF;
  color: #2563EB;
}

/* Secções do Diretório */
.perfis-section {
  margin-bottom: 48px;
}

.perfis-section-head {
  margin-bottom: 20px;
}

.head-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.head-title-wrap h2 {
  font-family: 'Raleway', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #0F2D4A;
  margin: 0;
}

.section-badge-ouro {
  background: #FEF3C7;
  color: #B45309;
  border: 1px solid #FCD34D;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
}

.section-badge-blue {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
}

.section-badge-green {
  background: #F0FDF4;
  color: #15803D;
  border: 1px solid #BBF7D0;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
}

.section-lead {
  color: #64748B;
  font-size: 0.95rem;
  margin: 0;
}

/* Grelhas de Membros */
.ouro-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}

.socio-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 10px 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.socio-card.is-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.socio-card.is-link:hover {
  transform: translateY(-2px);
  border-color: #3C50A5;
  box-shadow: 0 4px 12px rgba(15, 45, 74, 0.08);
}

.socio-ouro-item {
  border-color: #FCD34D;
  background: linear-gradient(180deg, #FFFDF5 0%, #FFFFFF 100%);
  padding: 10px 12px;
}

.socio-ouro-item:hover {
  border-color: #F59E0B;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.15);
}

.socio-badge-ouro {
  align-self: flex-start;
  background: #FEF3C7;
  color: #B45309;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
}

.socio-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.socio-logo-wrap {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F8FAFC;
  border-radius: 6px;
  border: 1px solid #F1F5F9;
  padding: 3px 8px;
  margin-bottom: 6px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.socio-ouro-item .socio-logo-wrap {
  height: 52px;
  background: #FFFFFF;
  border-color: #FEF08A;
}

.socio-card:hover .socio-logo-wrap {
  background: #FFFFFF;
  border-color: #E2E8F0;
}

.socio-logo-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.socio-logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #94A3B8;
  opacity: 0.85;
}

.socio-nome {
  font-family: 'Raleway', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: #0F2D4A;
  margin: 0 0 3px;
  line-height: 1.25;
}

.socio-tag {
  font-size: 0.72rem;
  color: #B45309;
  font-weight: 600;
}

.socios-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.socio-num-pill {
  align-self: flex-start;
  background: #F1F5F9;
  color: #475569;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}

.socio-num-pill.is-singular {
  background: #EFF6FF;
  color: #1D4ED8;
}

.socio-tipo {
  font-size: 0.72rem;
  color: #64748B;
}

.socio-card.is-link .socio-tipo {
  color: #2563EB;
  font-weight: 600;
}

.perfis-cta-banner {
  background: linear-gradient(135deg, #0F2D4A 0%, #1E3A8A 50%, #3C50A5 100%);
  border-radius: 14px;
  padding: 36px;
  color: #FFFFFF;
  text-align: center;
  margin-top: 48px;
}

.perfis-cta-banner h2 {
  color: #FFFFFF !important;
  font-size: 1.5rem;
  margin: 0 0 10px;
}

.perfis-cta-banner p {
  color: #E2E8F0;
  margin: 0 auto 20px;
  max-width: 600px;
}

.cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-solid-white {
  background: #FFFFFF;
  color: #0F2D4A;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.92rem;
  transition: all 0.15s ease;
}

.btn-solid-white:hover {
  background: #EFF6FF;
  transform: translateY(-2px);
}

@media (max-width: 860px) {
  .perfil-hero-flex {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  .perfil-badges-row, .perfil-quick-meta {
    justify-content: center;
  }
  .perfil-layout-grid {
    grid-template-columns: 1fr;
  }
}

/* Layout Grid dos Formulários (Formulário + Sidebar) */
.associados-layout-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 36px;
  align-items: start;
  margin-bottom: 60px;
}

/* Cartão do Formulário */
.form-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 18px;
  padding: 36px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.form-card-header {
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1.5px solid #F1F5F9;
}

.form-card-title {
  font-family: 'Raleway', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #0F2D4A;
  margin: 0 0 8px;
}

.form-card-subtitle {
  font-size: 0.94rem;
  color: #64748B;
  margin: 0;
  line-height: 1.5;
}

.form-section-title {
  font-family: 'Raleway', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: #3C50A5;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 28px 0 16px;
  padding-bottom: 6px;
  border-bottom: 1px dashed #E2E8F0;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 6px;
}

.form-label .required {
  color: #EF4444;
  margin-left: 2px;
}

.form-control {
  width: 100%;
  padding: 11px 14px;
  font-size: 0.95rem;
  color: #0F172A;
  background: #FFFFFF;
  border: 1.5px solid #CBD5E1;
  border-radius: 8px;
  outline: none;
  transition: all 0.2s ease;
  font-family: inherit;
  box-sizing: border-box;
}

.form-control:focus {
  border-color: #3C50A5;
  box-shadow: 0 0 0 3px rgba(60, 80, 165, 0.14);
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

/* Opções de Pagamento */
.payment-options-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 24px;
}

.radio-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.radio-option input[type="radio"] {
  margin-top: 4px;
  accent-color: #3C50A5;
  transform: scale(1.15);
}

.radio-option label {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-size: 0.92rem;
  color: #1E293B;
}

.radio-option .option-desc {
  font-size: 0.82rem;
  color: #64748B;
  margin-top: 2px;
  line-height: 1.4;
}

.form-check-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 24px 0 28px;
  font-size: 0.88rem;
  color: #334155;
  line-height: 1.5;
}

.form-check-group input[type="checkbox"] {
  margin-top: 3px;
  accent-color: #3C50A5;
  transform: scale(1.2);
}

.btn-submit {
  width: 100%;
  padding: 14px 24px;
  font-size: 1.05rem;
  font-weight: 700;
  justify-content: center;
  border-radius: 10px;
  cursor: pointer;
}

.form-feedback-message {
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: 10px;
  font-size: 0.92rem;
  line-height: 1.5;
}

.form-feedback-message.is-success {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #065F46;
}

/* Sidebar de Quotas e Vantagens */
.associados-sidebar-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sidebar-info-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.sidebar-info-card h4 {
  font-family: 'Raleway', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F2D4A;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pricing-mini-tier {
  padding: 14px 0;
  border-bottom: 1px solid #F1F5F9;
}

.pricing-mini-tier:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pricing-mini-tier .tier-name {
  font-weight: 700;
  color: #1E293B;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.pricing-mini-tier .tier-price {
  font-size: 1.6rem;
  font-weight: 900;
  color: #3C50A5;
}

.pricing-mini-tier .price-period {
  font-size: 0.85rem;
  font-weight: 500;
  color: #64748B;
}

.pricing-mini-tier .tier-joia {
  font-size: 0.82rem;
  color: #475569;
  margin-top: 2px;
}

.pricing-mini-tier .tier-note {
  font-size: 0.78rem;
  color: #94A3B8;
  font-style: italic;
  margin-top: 3px;
}

.benefits-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.benefits-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #334155;
}

.benefits-checklist .check-icon {
  background: #E0E7FF;
  color: #3C50A5;
  font-weight: 800;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.sidebar-info-card.is-contact {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

.contact-desc {
  font-size: 0.85rem;
  color: #64748B;
  line-height: 1.5;
  margin-bottom: 12px;
}

.contact-entry {
  font-size: 0.86rem;
  color: #1E293B;
  margin-bottom: 6px;
}

/* Escalões Coletivos Stack */
.coletivos-tiers-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tier-card-badge {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 14px;
}

.tier-card-badge.is-ouro {
  background: #FFFDF0;
  border-color: #FDE047;
}

.tier-card-badge.is-platina {
  background: #F0F9FF;
  border-color: #BAE6FD;
}

.tier-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.badge-regular {
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  color: #0F2D4A;
}

.badge-ouro {
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  color: #B45309;
}

.badge-platina {
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  color: #0369A1;
}

.badge-estudante {
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  color: #4B5563;
}

.tier-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
}

.tier-val small {
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748B;
}

.tier-card-badge .tier-joia {
  font-size: 0.78rem;
  color: #64748B;
  margin-bottom: 8px;
}

.tier-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: #334155;
  line-height: 1.35;
}

/* ==========================================================================
   DIRETÓRIO DE ASSOCIADOS E PERFIS (/associados/perfis/)
   ========================================================================== */

.perfis-control-bar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.perfis-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.perfis-stat-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.perfis-stat-card.is-ouro {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border-color: #F59E0B;
}

.perfis-stat-card.is-ouro .stat-number {
  color: #92400E;
}

.perfis-stat-card .stat-number {
  display: block;
  font-size: 2.2rem;
  font-weight: 900;
  color: #3C50A5;
  line-height: 1;
  margin-bottom: 6px;
}

.perfis-stat-card .stat-label {
  font-size: 0.86rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.perfis-search-wrap {
  position: relative;
}

.perfis-search-input-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border: 2px solid #CBD5E1;
  border-radius: 12px;
  padding: 10px 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.perfis-search-input-box:focus-within {
  border-color: #3C50A5;
  box-shadow: 0 0 0 4px rgba(60, 80, 165, 0.12);
}

.perfis-search-input-box .search-icon {
  color: #64748B;
  flex-shrink: 0;
}

.perfis-input {
  border: none;
  background: transparent;
  width: 100%;
  font-size: 1rem;
  color: #0F172A;
  outline: none;
  font-family: inherit;
}

.filtro-count-badge {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  background: #F1F5F9;
  color: #64748B;
  white-space: nowrap;
}

.filtro-count-badge.is-active {
  background: #DBEAFE;
  color: #1E40AF;
}

/* Secções de Perfis */
.perfis-section {
  margin-bottom: 48px;
}

.perfis-section-head {
  margin-bottom: 24px;
}

.perfis-section-head .head-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.perfis-section-head h2 {
  font-family: 'Raleway', sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  color: #0F2D4A;
  margin: 0;
}

.section-badge-ouro {
  background: #FEF3C7;
  color: #92400E;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
}

.section-badge-blue {
  background: #DBEAFE;
  color: #1E40AF;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
}

.section-badge-green {
  background: #DCFCE7;
  color: #166534;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
}

.perfis-section-head .section-lead {
  font-size: 0.94rem;
  color: #64748B;
  margin: 0;
}



.perfis-cta-banner {
  background: linear-gradient(135deg, #0F2D4A 0%, #1E3A8A 100%);
  color: #FFFFFF;
  border-radius: 18px;
  padding: 40px 32px;
  text-align: center;
  margin-top: 48px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

.perfis-cta-banner h2 {
  font-family: 'Raleway', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 10px;
}

.perfis-cta-banner p {
  font-size: 0.98rem;
  color: #E2E8F0;
  max-width: 640px;
  margin: 0 auto 24px;
  line-height: 1.5;
}

.perfis-cta-banner .cta-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Responsividade de Associados */
@media (max-width: 991px) {
  .associados-layout-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .form-row-2,
  .form-row-3 {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .perfis-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   EVENTO DETALHE (PÁGINAS INDIVIDUAIS DE EVENTOS APRH)
   ========================================================================== */
.event-hero-banner {
  background: linear-gradient(135deg, #071D36 0%, #0D2D52 50%, #003366 100%);
  color: #FFFFFF;
  padding: 42px 0 38px;
  margin-bottom: 35px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(7, 29, 54, 0.2);
}

.event-hero-header-content {
  max-width: 960px;
}

.event-hero-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}

.event-type-badge {
  background: rgba(94, 234, 212, 0.2);
  color: #5EEAD4;
  border: 1px solid rgba(94, 234, 212, 0.4);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.event-year-badge {
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
}

.event-acronym-badge {
  background: #0284C7;
  color: #FFFFFF;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.event-id-badge {
  background: rgba(255, 255, 255, 0.1);
  color: #CBD5E1;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: monospace;
}

.event-hero-title {
  font-family: 'Raleway', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

.event-hero-theme {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  margin: 0 0 16px;
}

.event-meta-chips-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
}

.event-meta-chip {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #F8FAFC;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Grelha de Detalhe */
.event-detail-main {
  margin-bottom: 60px;
}

.event-detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 36px;
  align-items: flex-start;
}

/* Coluna Principal */
.event-poster-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.event-poster-image {
  max-width: 100%;
  max-height: 520px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  display: inline-block;
}

.event-article-body {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 34px 38px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 28px;
  color: var(--text-dark);
  font-size: 0.98rem;
  line-height: 1.7;
}

.event-article-body h2 {
  font-family: 'Raleway', sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  margin-top: 26px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid #E2E8F0;
}

.event-article-body h2:first-child {
  margin-top: 0;
}

.event-article-body h3 {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: 20px;
  margin-bottom: 10px;
}

.event-article-body p {
  margin-bottom: 14px;
}

.event-article-body ul, .event-article-body ol {
  margin: 12px 0 18px 24px;
}

.event-article-body li {
  margin-bottom: 6px;
}

.event-article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 28px;
  font-size: 0.92rem;
  background: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.event-article-body th {
  background: #E8F0F8;
  color: var(--color-primary-dark);
  font-weight: 700;
  text-align: left;
  padding: 11px 14px;
  border: 1px solid #CBD5E1;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.event-article-body td {
  padding: 10px 14px;
  border: 1px solid #E2E8F0;
  vertical-align: middle;
}

.event-article-body tr:nth-child(even) td {
  background-color: #F8FAFC;
}

.event-article-body tr:hover td {
  background-color: #EDF4FB;
}

.event-article-body th:first-child,
.event-article-body td:first-child {
  text-align: center;
  font-weight: 700;
  width: 60px;
  color: var(--color-primary);
}

.event-article-body th:last-child,
.event-article-body td:last-child {
  text-align: center;
  white-space: nowrap;
  width: 180px;
}

.event-article-body td a[href$=".pdf"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  background: #0284C7;
  color: #FFFFFF !important;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.82rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: all 0.2s ease;
}

.event-article-body td a[href$=".pdf"]:hover {
  background: #0369A1;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(2,132,199,0.25);
  text-decoration: none;
}

.event-section-subtitle {
  font-family: 'Raleway', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  margin: 0 0 16px;
}

.event-documents-section {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 28px;
}

.event-docs-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.event-doc-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 12px 18px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.event-doc-card:hover {
  background: #EFF6FF;
  border-color: #93C5FD;
  transform: translateX(3px);
}

.event-doc-icon {
  font-size: 1.4rem;
}

.event-doc-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.event-doc-name {
  font-weight: 700;
  color: var(--color-primary-dark);
  font-size: 0.92rem;
}

.event-doc-meta {
  font-size: 0.78rem;
  color: #64748B;
  margin-top: 2px;
}

.event-doc-download {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}

.event-links-section {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 28px;
}

.event-links-list {
  margin: 0;
  padding-left: 20px;
}

.event-links-list li {
  margin-bottom: 8px;
}

.event-links-list a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.event-links-list a:hover {
  text-decoration: underline;
}

/* Sidebar Ficha Técnica */
.event-specs-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
}

.event-specs-title {
  font-family: 'Raleway', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-primary-dark);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #E2E8F0;
}

.event-specs-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.event-specs-dl dt {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748B;
  margin-bottom: 2px;
}

.event-specs-dl dd {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-dark);
  line-height: 1.4;
  padding-bottom: 8px;
  border-bottom: 1px solid #F1F5F9;
}

.event-specs-dl dd:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.event-actions-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}

.btn-event-primary {
  display: block;
  text-align: center;
  background: #005A9C;
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 90, 156, 0.25);
}

.btn-event-primary:hover {
  background: #003366;
  transform: translateY(-1px);
}

.btn-event-secondary {
  display: block;
  text-align: center;
  background: #F1F5F9;
  color: #1E293B !important;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-event-secondary:hover {
  background: #E2E8F0;
  color: #0F172A !important;
}

.btn-event-ghost {
  display: block;
  text-align: center;
  background: transparent;
  color: #64748B !important;
  font-size: 0.82rem;
  padding: 6px 12px;
  text-decoration: none;
}

.btn-event-ghost:hover {
  color: #0F172A !important;
  text-decoration: underline;
}

.event-contact-card {
  background: #EFF6FF;
  border: 1px solid #DBEAFE;
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  font-size: 0.86rem;
  color: #1E3A8A;
}

.event-contact-card h4 {
  font-size: 0.95rem;
  font-weight: 800;
  margin: 0 0 8px;
  color: #1E3A8A;
}

.event-contact-card p {
  margin: 0 0 8px;
  line-height: 1.45;
}

.event-contact-card p:last-child {
  margin-bottom: 0;
}

.event-contact-card a {
  color: #1D4ED8;
  font-weight: 700;
}

@media (max-width: 991px) {
  .event-detail-grid {
    grid-template-columns: 1fr;
  }

  .event-hero-title {
    font-size: 1.7rem;
  }
}

/* ==========================================================================
   PERFIS DE ASSOCIADOS — LAYOUT EM 2 COLUNAS & CARDS COMPACTOS
   ========================================================================== */

/* Layout de 2 colunas no perfil individual */
.perfil-two-cols-layout {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 32px;
  align-items: start;
  margin-bottom: 50px;
}

@media (max-width: 960px) {
  .perfil-two-cols-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.perfil-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 2px solid #E2E8F0;
}

.col-head-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.col-head-title h2 {
  font-size: 1.3rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
}

.col-icon {
  font-size: 1.35rem;
}

.col-badge {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.col-badge.is-verified {
  background: #E0F2FE;
  color: #0284C7;
}

.col-badge.is-empty {
  background: #F1F5F9;
  color: #64748B;
}

.col-badge.is-history {
  background: #EEF2FF;
  color: #4F46E5;
}

.col-badge.is-neutral {
  background: #F8FAFC;
  color: #475569;
  border: 1px solid #CBD5E1;
}

/* Card para associados sem perfil biográfico */
.perfil-empty-card {
  background: #FFFFFF;
  border: 1.5px dashed #CBD5E1;
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
}

.empty-badge-pill {
  display: inline-block;
  background: #F1F5F9;
  color: #64748B;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
  text-transform: lowercase;
}

.empty-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1E293B;
  margin: 0 0 10px;
}

.empty-desc {
  font-size: 0.92rem;
  color: #475569;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 20px;
}

.empty-callout {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 18px 20px;
  text-align: left;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.callout-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.callout-content strong {
  display: block;
  font-size: 0.95rem;
  color: #0F172A;
  margin-bottom: 4px;
}

.callout-content p {
  font-size: 0.85rem;
  color: #64748B;
  margin: 0 0 12px;
  line-height: 1.45;
}

.btn-sm {
  padding: 7px 14px !important;
  font-size: 0.85rem !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Coluna Direita — Timeline / Lista Histórica */
.perfil-hist-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.perfil-hist-item {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-left: 3.5px solid #3C50A5;
  border-radius: 8px;
  padding: 14px 16px;
  transition: all 0.15s ease;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.02);
}

.perfil-hist-item:hover {
  border-color: #CBD5E1;
  border-left-color: #1D4ED8;
  box-shadow: 0 4px 10px rgba(30, 58, 138, 0.06);
}

.hist-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.hist-bienio-pill {
  background: #0F2D4A;
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

.hist-funcao-pill {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.hist-orgao-main {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 4px;
  line-height: 1.35;
}

.hist-orgao-sub {
  color: #64748B;
  font-weight: 500;
  font-size: 0.88rem;
}

.hist-meta-line {
  font-size: 0.84rem;
  color: #334155;
  margin-top: 3px;
  line-height: 1.4;
}

.hist-meta-label {
  font-weight: 600;
  color: #475569;
}

.hist-dates-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #64748B;
  margin-top: 6px;
  font-weight: 500;
}

.hist-obs-line {
  font-size: 0.8rem;
  color: #64748B;
  margin-top: 4px;
  border-top: 1px dashed #E2E8F0;
  padding-top: 4px;
}

/* Card para associados sem histórico de órgãos sociais */
.perfil-hist-empty-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
}

.hist-empty-icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

.hist-empty-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1E293B;
  margin: 0 0 8px;
}

.hist-empty-desc {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.55;
  max-width: 440px;
  margin: 0 auto 16px;
}

.hist-empty-note {
  font-size: 0.8rem;
  color: #64748B;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 8px 12px;
  display: inline-block;
  line-height: 1.4;
}

/* ==========================================================================
   CARDS COMPACTOS NO DIRETÓRIO DE ASSOCIADOS (/associados/perfis/)
   ========================================================================== */
.socios-directory-grid.is-singulares {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 8px;
}

.socio-card.is-compact {
  padding: 6px 12px;
  min-height: 46px;
  border-radius: 8px;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  transition: all 0.15s ease;
}

.socio-card.is-compact:hover {
  border-color: #3C50A5;
  background: #F8FAFC;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(60, 80, 165, 0.08);
}

.socio-mini-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F1F5F9;
  color: #3C50A5;
  font-size: 0.76rem;
  font-weight: 700;
  border: 1px solid #CBD5E1;
}

.socio-mini-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.socio-card.is-compact .socio-info {
  flex: 1;
  min-width: 0;
}

.socio-card.is-compact .socio-nome {
  font-family: 'Raleway', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0F2D4A;
  line-height: 1.25;
  margin: 0 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.socio-titulo {
  color: #64748B;
  font-size: 0.92rem;
  font-weight: 500;
}

.socio-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.socio-num-tag {
  font-size: 0.72rem;
  font-weight: 800;
  color: #1D4ED8;
  background: #EFF6FF;
  padding: 1px 6px;
  border-radius: 4px;
  line-height: 1.3;
  border: 1px solid #DBEAFE;
  flex-shrink: 0;
}

.socio-badge-perfil {
  font-size: 0.68rem;
  font-weight: 700;
  background: #E0F2FE;
  color: #0284C7;
  padding: 1px 5px;
  border-radius: 3px;
}

.socio-badge-sem-perfil {
  font-size: 0.68rem;
  font-weight: 600;
  color: #94A3B8;
  background: #F1F5F9;
  padding: 1px 5px;
  border-radius: 3px;
}

.socio-badge-hist {
  font-size: 0.68rem;
  font-weight: 700;
  background: #EEF2FF;
  color: #4338CA;
  padding: 1px 5px;
  border-radius: 3px;
}