/* ============================================================
   main.css — Portal Escolar VespeR
   Sistema de design: variáveis, animações, utilitários
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Montserrat:wght@400;500;600;700;800;900&display=swap');

/* ────────────────────────────────────────────────────────────
   Variáveis — Paleta VespeR
   ──────────────────────────────────────────────────────────── */
:root {
  /* Cores principais (-30% magenta -> azul escuro / midnight navy profundo) */
  --color-primary:    #1A264F;   /* Azul escuro nobre */
  --color-secondary:  #ffa100;   /* Âmbar / Laranja Oficial VespeR — CTAs e destaques */
  --color-accent:     #2C4A87;   /* Azul médio — hover, bordas */
  --color-dark:       #0A1124;   /* Azul escuro profundo (backgrounds e rodapé) */
  --color-surface:    #121D38;   /* Cards e painéis */
  --color-surface2:   #19284D;   /* Cards secundários */
  --color-light:      #F1F5F9;   /* Texto claro */
  --color-muted:      #8E9EB8;   /* Texto secundário/placeholder */
  --color-border:     #1E305C;   /* Bordas sutis */

  /* Gradientes */
  --gradient-hero:    linear-gradient(135deg, rgba(10,17,36,0.88) 0%, rgba(26,38,79,0.65) 100%);
  --gradient-card:    linear-gradient(180deg, rgba(18,29,56,0) 60%, rgba(10,17,36,0.95) 100%);
  --gradient-amber:   linear-gradient(135deg, #ffa100 0%, #F97316 100%);
  --gradient-purple:  linear-gradient(135deg, #0A1124 0%, #1A264F 55%, #2C4A87 100%);

  /* Sombras */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.5);
  --shadow-amber: 0 4px 24px rgba(249,160,27,0.35);
  --shadow-glow:  0 0 40px rgba(44,74,135,0.4);

  /* Tipografia */
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Bordas */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-full: 9999px;

  /* Transições */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index */
  --z-base:    1;
  --z-overlay: 100;
  --z-modal:   200;
  --z-nav:     300;
  --z-toast:   400;
}

/* ────────────────────────────────────────────────────────────
   Variáveis — Paleta Tema Claro (Light Mode)
   ──────────────────────────────────────────────────────────── */
:root[data-theme="light"],
body.theme-light {
  --color-primary:    #1A264F;
  --color-secondary:  #ffa100;
  --color-accent:     #2C4A87;
  --color-dark:       #F8FAFC;
  --color-surface:    #FFFFFF;
  --color-surface2:   #F1F5F9;
  --color-light:      #0F172A;
  --color-muted:      #64748B;
  --color-border:     #E2E8F0;

  --gradient-hero:    linear-gradient(135deg, #F8FAFC 0%, #EEF2FF 60%, #FEF3C7 100%);
  --gradient-card:    linear-gradient(180deg, rgba(255,255,255,0.7) 60%, rgba(248,250,252,0.98) 100%);
  --gradient-purple:  linear-gradient(135deg, #0A1124 0%, #1A264F 55%, #2C4A87 100%);

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.07);
  --shadow-lg:  0 12px 32px rgba(0,0,0,0.08);
  --shadow-amber: 0 4px 20px rgba(230,138,0,0.25);
  --shadow-glow:  0 0 30px rgba(44,74,135,0.2);
}

/* Refinamentos específicos para Tema Claro */
body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light h5,
body.theme-light h6,
body.theme-light .section-title,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] .section-title {
  color: #ffa100 !important; /* Títulos em Laranja Oficial VespeR (#ffa100) */
}

body.theme-light .section-subtitle,
[data-theme="light"] .section-subtitle {
  color: #64748B !important;
}

body.theme-light .curso-card .curso-title,
[data-theme="light"] .curso-card .curso-title {
  color: #FFFFFF !important; /* Título dentro do card com foto e overlay */
}

body.theme-light #vesper-carousel-container h3,
[data-theme="light"] #vesper-carousel-container h3 {
  color: #FFFFFF !important; /* Título dentro do carrossel escuro de fotos */
}

/* Rodapé Institucional — Sempre Azul Escuro em Ambos os Temas */
.site-footer,
body.theme-light .site-footer,
[data-theme="light"] .site-footer {
  background: #0A1124 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #F1F5F9 !important;
}

.site-footer h3,
body.theme-light .site-footer h3,
[data-theme="light"] .site-footer h3 {
  color: #ffa100 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

.site-footer p,
.site-footer span,
.site-footer a,
body.theme-light .site-footer p,
body.theme-light .site-footer span,
body.theme-light .site-footer a,
[data-theme="light"] .site-footer p,
[data-theme="light"] .site-footer span,
[data-theme="light"] .site-footer a {
  color: #9B93C0 !important;
}

.site-footer a:hover,
body.theme-light .site-footer a:hover,
[data-theme="light"] .site-footer a:hover {
  color: #F9A01B !important;
}

.site-footer .footer-bottom-bar,
body.theme-light .site-footer .footer-bottom-bar,
[data-theme="light"] .site-footer .footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Footer Grid de 3 Colunas: 1 Coluna Institucional/Links + 2 Colunas Maiores de Unidades */
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1.35fr;
  gap: 48px;
  margin-bottom: 48px;
  align-items: stretch;
}

.site-footer .footer-cidade-grupo {
  margin-bottom: 16px;
}
.site-footer .footer-cidade-grupo:last-child {
  margin-bottom: 0 !important;
}

.site-footer .footer-cidade-titulo,
body.theme-light .site-footer .footer-cidade-titulo,
[data-theme="light"] .site-footer .footer-cidade-titulo {
  color: #F9A01B !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.site-footer .footer-phone,
body.theme-light .site-footer .footer-phone,
[data-theme="light"] .site-footer .footer-phone {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

@media (max-width: 1024px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .site-footer .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .footer-col-spacer {
    display: none !important;
  }
}

/* Botão Acesso Restrito em Amarelo Ouro do Logo VespeR */
.btn-acesso-restrito,
.site-footer .btn-acesso-restrito,
body.theme-light .site-footer .btn-acesso-restrito,
[data-theme="light"] .site-footer .btn-acesso-restrito {
  background: linear-gradient(135deg, #FFB800 0%, #FFA100 100%) !important;
  color: #0A1124 !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 2px 10px rgba(255, 161, 0, 0.35) !important;
  transition: all 0.2s ease !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.btn-acesso-restrito span,
.site-footer .btn-acesso-restrito span,
body.theme-light .site-footer .btn-acesso-restrito span,
[data-theme="light"] .site-footer .btn-acesso-restrito span {
  color: #0A1124 !important;
  font-weight: 700 !important;
}

.btn-acesso-restrito svg,
.site-footer .btn-acesso-restrito svg {
  stroke: #0A1124 !important;
}

.btn-acesso-restrito:hover,
.site-footer .btn-acesso-restrito:hover,
body.theme-light .site-footer .btn-acesso-restrito:hover,
[data-theme="light"] .site-footer .btn-acesso-restrito:hover {
  background: linear-gradient(135deg, #FFC72C 0%, #FFB800 100%) !important;
  color: #0A1124 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(255, 161, 0, 0.6) !important;
}

body.theme-light .card,
[data-theme="light"] .card {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

body.theme-light .noticia-card,
[data-theme="light"] .noticia-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

body.theme-light .timeline-item-body,
[data-theme="light"] .timeline-item-body {
  background: #FFFFFF;
  border-color: #E2E8F0;
}

body.theme-light #curso-drawer,
[data-theme="light"] #curso-drawer {
  background: #FFFFFF;
  color: #0F172A;
}

body.theme-light .curso-drawer-title,
[data-theme="light"] .curso-drawer-title {
  color: #ffa100 !important;
}

body.theme-light .curso-drawer-text p,
[data-theme="light"] .curso-drawer-text p {
  color: #475569;
}

body.theme-light .curso-drawer-close,
[data-theme="light"] .curso-drawer-close {
  background: #F1F5F9;
  color: #0F172A;
  border: 1px solid #E2E8F0;
}

body.theme-light .form-input,
[data-theme="light"] .form-input {
  background: #FFFFFF;
  border-color: #CBD5E1;
  color: #0F172A;
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  background-color: var(--color-dark);
  font-family: var(--font-base);
  color: var(--color-light);
  line-height: 1.6;
}

#main-content, main, .site-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* Container padrão para alinhamento em grid do site e unidades (1240px) */
.container,
body .container,
#main-content .container {
  width: 100% !important;
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

/* ────────────────────────────────────────────────────────────
   Animações Globais
   ──────────────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideLeft {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulse-amber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249,160,27,0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(249,160,27,0); }
}

@keyframes shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Classes de animação utilitária */
.animate-fade-in  { animation: fadeIn  var(--transition-base) both; }
.animate-fade-up  { animation: fadeUp  0.6s cubic-bezier(0.22,1,0.36,1) both; }
.animate-fade-down { animation: fadeDown var(--transition-base) both; }
.animate-slide-left { animation: slideLeft 0.5s cubic-bezier(0.22,1,0.36,1) both; }

/* Delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }

/* Visibilidade para IntersectionObserver */
.scroll-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ────────────────────────────────────────────────────────────
   Componentes — Botões
   ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.btn-primary {
  background: var(--gradient-amber);
  color: #fff;
  box-shadow: var(--shadow-amber);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(249,160,27,0.5);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: transparent;
  color: var(--color-light);
  border: 1.5px solid var(--color-border);
}
.btn-secondary:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  background: rgba(249,160,27,0.08);
}

.btn-ghost {
  color: var(--color-muted);
  padding: 10px 20px;
}
.btn-ghost:hover { color: var(--color-light); }

.btn-sm { padding: 8px 18px; font-size: 0.85rem; }
.btn-lg { padding: 16px 40px; font-size: 1.05rem; }

/* ────────────────────────────────────────────────────────────
   Componentes — Cards
   ──────────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent);
}

/* ────────────────────────────────────────────────────────────
   Componentes — Badge / Tag
   ──────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge-amber,
.badge-purple { background: rgba(249,160,27,0.15); color: var(--color-secondary); border: 1px solid rgba(249,160,27,0.3); }
.badge-green { background: rgba(34,197,94,0.15); color: #4ADE80; border: 1px solid rgba(34,197,94,0.3); }
.badge-red { background: rgba(239,68,68,0.15); color: #F87171; border: 1px solid rgba(239,68,68,0.3); }

/* Card Área do Aluno — Azul Escuro Nobre */
.area-aluno-card {
  background: linear-gradient(135deg, #0A1124 0%, #1A264F 55%, #23386E 100%) !important;
  border-radius: 24px;
  padding: 60px 40px;
  text-align: center;
  box-shadow: 0 16px 40px rgba(10, 17, 36, 0.28);
  border: 1px solid rgba(44, 74, 135, 0.4);
  position: relative;
  overflow: hidden;
}

.area-aluno-card h2 {
  font-size: 2.2rem;
  font-weight: 800;
  color: #ffa100 !important;
  margin-bottom: 12px;
}

.area-aluno-card p {
  color: #CBD5E1 !important;
  margin-bottom: 40px;
  font-size: 1.05rem;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.area-aluno-botoes {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.btn-aluno-servico {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 185px;
  box-sizing: border-box;
}

.btn-aluno-servico span {
  font-weight: 700;
  white-space: nowrap;
}

.btn-aluno-servico .btn-aluno-icon {
  height: 18px;
  width: auto;
  max-width: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: contain;
  flex-shrink: 0;
}

/* Botões de Serviços do Aluno (Fundo e Texto Idênticos para os 3 Serviços) */
.btn-aluno-totvs,
.btn-aluno-ms,
.btn-aluno-yt {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(8px);
}

.btn-aluno-totvs:hover,
.btn-aluno-ms:hover,
.btn-aluno-yt:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}

@media (max-width: 640px) {
  .area-aluno-card {
    padding: 40px 20px;
  }
  .area-aluno-card h2 {
    font-size: 1.8rem;
  }
  .btn-aluno-servico {
    width: 100%;
    max-width: 320px;
    justify-content: space-between;
  }
}

/* ────────────────────────────────────────────────────────────
   Grid e Cards — Missão, Visão, Valores e Propósito (MVVP)
   ──────────────────────────────────────────────────────────── */
.mvvp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

@media (max-width: 768px) {
  .mvvp-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.mvvp-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 40px 32px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.mvvp-card:hover {
  border-color: #F97316 !important;
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(249, 115, 22, 0.18);
}

.mvvp-card-icon {
  width: 42px;
  height: 42px;
  display: block;
  margin: 0 auto 16px;
  stroke: #F97316 !important;
  flex-shrink: 0;
}

.mvvp-card-eyebrow {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffa100 !important;
  display: block;
  margin-bottom: 8px;
  text-align: center;
}

.mvvp-card-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #ffa100 !important;
  margin-bottom: 16px;
  text-align: center;
  line-height: 1.3;
}

.mvvp-card-text {
  color: var(--color-muted);
  font-size: 0.98rem;
  line-height: 1.75;
  font-weight: 400;
  font-style: normal !important;
  text-align: center;
  margin: 0;
  flex: 1;
}

body.theme-light .mvvp-card,
[data-theme="light"] .mvvp-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
}

body.theme-light .mvvp-card-text,
[data-theme="light"] .mvvp-card-text {
  color: #475569 !important;
}

/* ────────────────────────────────────────────────────────────
   Layout — Container
   ──────────────────────────────────────────────────────────── */
.container {
  width: 100% !important;
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .section {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

/* ────────────────────────────────────────────────────────────
   Componentes — Seção
   ──────────────────────────────────────────────────────────── */
.section { padding-top: 80px; padding-bottom: 80px; }
.section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-light);
}
.section-subtitle {
  font-size: 1.05rem;
  color: var(--color-muted);
  margin-top: 12px;
  max-width: 560px;
}
[style*="text-align:center"] .section-subtitle,
[style*="text-align: center"] .section-subtitle,
.text-center .section-subtitle,
.section-subtitle.text-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ────────────────────────────────────────────────────────────
   Componentes — Formulários
   ──────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 0.875rem; font-weight: 500; color: var(--color-muted); }
.form-input {
  background: var(--color-surface2);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-light);
  padding: 12px 16px;
  font-size: 0.95rem;
  transition: border-color var(--transition-fast);
  outline: none;
}
.form-input:focus { border-color: var(--color-secondary); }
.form-input::placeholder { color: var(--color-muted); opacity: 0.7; }

/* ────────────────────────────────────────────────────────────
   Componentes — Loading / Skeleton
   ──────────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-surface2) 50%, var(--color-surface) 75%);
  background-size: 1000px 100%;
  animation: shimmer 1.8s infinite;
  border-radius: var(--radius-md);
}

.spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-secondary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}



/* ────────────────────────────────────────────────────────────
   Componentes — Lightbox
   ──────────────────────────────────────────────────────────── */
#lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(10, 10, 25, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s both;
  backdrop-filter: blur(8px);
}
#lightbox-overlay.hidden { display: none; }

#lightbox-img,
#lightbox-video {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--radius-lg);
  object-fit: contain;
  box-shadow: var(--shadow-lg);
}

.sb-item:hover .sb-play-badge {
  transform: translate(-50%, -50%) scale(1.15) !important;
  box-shadow: 0 6px 24px rgba(249, 160, 27, 0.7) !important;
}

.lightbox-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast);
  backdrop-filter: blur(4px);
}
.lightbox-btn:hover { background: rgba(249,160,27,0.3); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-close {
  position: absolute;
  top: 24px; right: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast);
}
.lightbox-close:hover { background: rgba(239,68,68,0.3); }

/* ────────────────────────────────────────────────────────────
   Scrollbar customizada
   ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-dark); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

/* ────────────────────────────────────────────────────────────
   Seleção de texto
   ──────────────────────────────────────────────────────────── */
::selection { background: rgba(249,160,27,0.3); color: var(--color-light); }

/* ────────────────────────────────────────────────────────────
   Menu Responsivo e Mobile Drawer
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  #nav-desktop {
    display: none !important;
  }
  #hamburger-btn {
    display: flex !important;
  }
}

@media (min-width: 1025px) {
  #nav-desktop {
    display: flex !important;
  }
  #hamburger-btn {
    display: none !important;
  }
}

.mobile-drawer-link {
  transition: all 0.2s ease !important;
}

.mobile-drawer-link:hover {
  background: rgba(249, 160, 27, 0.15) !important;
  color: #F9A01B !important;
  transform: translateX(4px);
}

/* ────────────────────────────────────────────────────────────
   Rodapé Responsivo Mobile — Centralização Total
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .site-footer {
    text-align: center !important;
  }

  .site-footer .footer-grid {
    text-align: center !important;
    justify-items: center !important;
  }

  .site-footer .footer-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .site-footer .footer-logo img {
    margin: 0 auto !important;
  }

  .site-footer .footer-links {
    align-items: center !important;
    text-align: center !important;
  }

  .site-footer .footer-bottom-bar {
    justify-content: center !important;
    text-align: center !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
}

/* ────────────────────────────────────────────────────────────
   Acordeon Horizontal de Cursos
   ──────────────────────────────────────────────────────────── */
.section-cursos {
  width: 100%;
  max-width: 1240px;
  margin: 60px auto;
  padding: 0 20px;
}

.cursos-accordion {
  display: flex;
  gap: 16px;
  height: 500px;
  width: 100%;
}

.cursos-accordion.cursos-accordion-1 {
  height: 480px;
}

.cursos-accordion.cursos-accordion-1 .curso-card {
  flex: 1 !important;
  width: 100%;
}

.cursos-accordion.cursos-accordion-1 .curso-content {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* O card inteiro é a tag <a> clicável */
.curso-card {
  position: relative;
  flex: 1;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  background-image: var(--bg-curso);
  background-size: cover;
  background-position: center;
  transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: flex-end;
  cursor: pointer;
}

/* Camada escura / degradê para leitura do texto */
.curso-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.85) 90%);
  transition: opacity 0.3s ease;
  z-index: 1;
}

/* Expansão no Hover ou Classe Active */
.curso-card.active {
  flex: 3.5;
}

/* Conteúdo de Texto e Botão — Oculto por padrão quando fechado */
.curso-content {
  position: relative;
  z-index: 2;
  padding: 32px 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.4s ease 0.1s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

/* Mostra o conteúdo quando o card está ativo */
.curso-card.active .curso-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Efeitos de Hover exclusivos para desktop com mouse */
@media (hover: hover) and (pointer: fine) {
  .cursos-accordion:hover .curso-card {
    flex: 1;
  }

  .cursos-accordion .curso-card:hover {
    flex: 3.5 !important;
  }

  .cursos-accordion:hover .curso-card .curso-content {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
  }

  .cursos-accordion .curso-card:hover .curso-content {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
}

.curso-title {
  color: #ffffff;
  font-family: 'Montserrat', sans-serif, system-ui;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.curso-title small {
  display: block;
  font-size: 0.85rem;
  line-height: 1.35;
  font-weight: 500;
  opacity: 0.9;
  margin-top: 4px;
  white-space: normal;
  letter-spacing: 0.5px;
}

/* Botão "Conheça Mais" */
.curso-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #f7a81b; /* Tom amarelo/dourado institucional */
  color: #1a1a1a;
  font-family: 'Montserrat', sans-serif, system-ui;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  transition: all 0.3s ease;
}

.curso-btn:hover {
  background-color: #ffffff;
  color: #000000;
}

/* Responsivo para celulares/tablets verticais */
@media (max-width: 900px) {
  .section-cursos {
    margin: 30px auto;
    padding: 0 20px !important;
    box-sizing: border-box;
  }

  .cursos-accordion {
    flex-direction: column;
    height: 750px;
    gap: 12px;
  }

  .cursos-accordion.cursos-accordion-1 {
    height: 380px;
  }

  .cursos-accordion.cursos-accordion-2 {
    height: 460px;
  }

  .cursos-accordion.cursos-accordion-5 {
    height: 860px;
  }

  .curso-card {
    flex: 1;
  }

  .curso-card.active {
    flex: 2.8 !important;
  }

  .curso-content {
    padding: 20px 16px;
  }

  .curso-title {
    white-space: normal;
    font-size: 1.2rem;
  }
}

/* ────────────────────────────────────────────────────────────
   Drawer Lateral de Cursos (Popup da Direita)
   ──────────────────────────────────────────────────────────── */
#curso-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 550;
  background: rgba(10, 10, 25, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

#curso-drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

#curso-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 92vw;
  max-width: 520px;
  z-index: 551;
  background: #FFFFFF;
  color: #1A1A1A;
  box-shadow: -10px 0 50px rgba(0, 0, 0, 0.5);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#curso-drawer.active {
  transform: translateX(0);
}

.curso-drawer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #271F4B;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
  border: 0;
}

.curso-drawer-close:hover {
  background: #F9A01B;
  color: #000;
  transform: scale(1.08);
}

.curso-drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 32px 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.curso-drawer-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.curso-drawer-title {
  font-family: 'Montserrat', sans-serif, system-ui;
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffa100 !important;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0;
}

.curso-drawer-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #4B5563;
  font-size: 0.975rem;
  line-height: 1.75;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.curso-drawer-text strong {
  color: #1F2937;
  font-weight: 700;
}

.curso-drawer-cta {
  margin-top: 10px;
  padding-top: 20px;
  border-top: 1px solid #E5E7EB;
  display: flex;
  gap: 12px;
}

/* ────────────────────────────────────────────────────────────
   Editor de Postagens — Layout de 3 Colunas & Live Preview
   ──────────────────────────────────────────────────────────── */
.editor-grid-3col {
  display: grid;
  grid-template-columns: 280px 1.15fr 400px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1400px) {
  .editor-grid-3col {
    grid-template-columns: 250px 1fr 350px;
    gap: 16px;
  }
}

@media (max-width: 1150px) {
  .editor-grid-3col {
    grid-template-columns: 230px 1fr 320px;
    gap: 12px;
  }
}

@media (max-width: 950px) {
  .editor-grid-3col {
    grid-template-columns: 1fr !important;
  }
  .editor-col-left, .editor-col-preview {
    position: static !important;
  }
  #editor-view-toggles {
    display: flex !important;
  }
}

/* Switch Toggle Moderno para Admin */
.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-toggle .switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.15);
  transition: 0.25s ease;
  border-radius: 26px;
  border: 1px solid var(--color-border);
}
.switch-toggle .switch-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  transition: 0.25s ease;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
.switch-toggle input:checked + .switch-slider {
  background-color: var(--color-secondary, #F9A01B);
  border-color: var(--color-secondary, #F9A01B);
}
.switch-toggle input:checked + .switch-slider:before {
  transform: translateX(20px);
}

/* ────────────────────────────────────────────────────────────
   Títulos de Postagens no Admin (Tema Escuro & Claro)
   ──────────────────────────────────────────────────────────── */
.post-table-title,
.post-grid-title {
  color: #FFFFFF !important;
  transition: color 0.2s ease;
}

[data-theme="light"] .post-table-title,
body.theme-light .post-table-title,
[data-theme="light"] .post-grid-title,
body.theme-light .post-grid-title {
  color: #1A264F !important; /* Azul Escuro VespeR */
}

[data-theme="light"] table thead th,
body.theme-light table thead th {
  color: #334155 !important;
  font-weight: 700 !important;
}

[data-theme="light"] table tbody tr:hover,
body.theme-light table tbody tr:hover {
  background: rgba(26, 38, 79, 0.05) !important;
}

/* Tipografia e elementos do Live Preview */
.preview-typography p {
  margin-bottom: 1rem;
}
.preview-typography p:last-child {
  margin-bottom: 0;
}
.preview-typography h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin: 1.25rem 0 0.6rem;
}
.preview-typography h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-secondary);
  margin: 1rem 0 0.5rem;
}
.preview-typography ul, .preview-typography ol {
  padding-left: 1.4rem;
  margin-bottom: 1rem;
}
.preview-typography li {
  margin-bottom: 0.35rem;
}
.preview-typography blockquote {
  border-left: 3px solid var(--color-secondary);
  background: rgba(249, 160, 27, 0.08);
  padding: 10px 16px;
  border-radius: 0 8px 8px 0;
  margin: 1.2rem 0;
  color: #F9A01B;
  font-style: italic;
}
.preview-typography a {
  color: #38BDF8;
  text-decoration: underline;
}

/* ────────────────────────────────────────────────────────────
   Toolbar do Editor Estilo Word / WordPress
   ──────────────────────────────────────────────────────────── */
.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--color-surface2);
  border-bottom: 1px solid var(--color-border);
  user-select: none;
}

.editor-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(0, 0, 0, 0.25);
  padding: 3px 5px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.editor-toolbar-group .editor-btn {
  background: transparent;
  border: none;
  color: var(--color-light);
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 5px;
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.editor-toolbar-group .editor-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-secondary);
}

.editor-toolbar-group .editor-btn:active {
  transform: scale(0.94);
}

.editor-toolbar-select {
  background: var(--color-surface);
  color: var(--color-light);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.78rem;
  height: 28px;
  outline: none;
  cursor: pointer;
}

.editor-toolbar-select:focus {
  border-color: var(--color-secondary);
}

.editor-color-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.editor-color-btn input[type="color"] {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

#post-editor {
  padding: 20px;
  min-height: 320px;
  background: var(--color-surface);
  color: var(--color-light);
  line-height: 1.75;
  outline: none;
  font-size: 0.95rem;
}

#post-editor p { margin-bottom: 1rem; }
#post-editor h1 { font-size: 1.5rem; font-weight: 800; color: #fff; margin: 1.4rem 0 0.8rem; }
#post-editor h2 { font-size: 1.3rem; font-weight: 700; color: #fff; margin: 1.25rem 0 0.6rem; }
#post-editor h3 { font-size: 1.1rem; font-weight: 700; color: var(--color-secondary); margin: 1rem 0 0.5rem; }
#post-editor h4 { font-size: 1rem; font-weight: 700; color: #38BDF8; margin: 0.9rem 0 0.4rem; }
#post-editor ul, #post-editor ol { padding-left: 1.6rem; margin-bottom: 1rem; }
#post-editor blockquote {
  border-left: 3px solid var(--color-secondary);
  background: rgba(249, 160, 27, 0.08);
  padding: 10px 16px;
  border-radius: 0 8px 8px 0;
  margin: 1.2rem 0;
  color: #F9A01B;
  font-style: italic;
}
#post-editor hr {
  border: 0;
  height: 1px;
  background: var(--color-border);
  margin: 1.5rem 0;
}
#post-editor table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0;
}
#post-editor table td, #post-editor table th {
  border: 1px solid var(--color-border);
  padding: 8px 12px;
}
#post-editor table th {
  background: var(--color-surface2);
}

/* ────────────────────────────────────────────────────────────
   Painel Admin — Suporte Avançado a Tema Claro & Escuro
   ──────────────────────────────────────────────────────────── */
[data-theme="light"] body,
body.theme-light {
  background-color: var(--color-dark) !important;
  color: var(--color-light) !important;
}

[data-theme="light"] #admin-shell,
body.theme-light #admin-shell {
  background-color: var(--color-dark);
}

[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
body.theme-light .form-input,
body.theme-light .form-select {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}

[data-theme="light"] .form-input:focus,
body.theme-light .form-input:focus {
  border-color: var(--color-secondary) !important;
  box-shadow: 0 0 0 3px rgba(230, 138, 0, 0.15) !important;
}

[data-theme="light"] .sidebar-link,
body.theme-light .sidebar-link {
  color: #475569;
}

[data-theme="light"] .sidebar-link:hover,
[data-theme="light"] .sidebar-link.active,
body.theme-light .sidebar-link:hover,
body.theme-light .sidebar-link.active {
  background: rgba(109, 40, 217, 0.08);
  color: #0F172A;
}

[data-theme="light"] .unit-main-tab,
body.theme-light .unit-main-tab {
  background: #FFFFFF;
  color: #475569;
  border-color: #E2E8F0;
}

[data-theme="light"] .unit-main-tab:hover,
body.theme-light .unit-main-tab:hover {
  color: #0F172A;
  background: #F8FAFC;
}

[data-theme="light"] .unit-main-tab.active,
body.theme-light .unit-main-tab.active {
  background: var(--gradient-purple) !important;
  color: #FFFFFF !important;
}

[data-theme="light"] .editor-toolbar,
body.theme-light .editor-toolbar {
  background: #F8FAFC;
  border-color: #E2E8F0;
}

[data-theme="light"] .editor-toolbar-group,
body.theme-light .editor-toolbar-group {
  background: #EDF2F7;
  border-color: #CBD5E1;
}

[data-theme="light"] .editor-toolbar-group .editor-btn,
body.theme-light .editor-toolbar-group .editor-btn {
  color: #334155;
}

[data-theme="light"] .editor-toolbar-group .editor-btn:hover,
body.theme-light .editor-toolbar-group .editor-btn:hover {
  background: #E2E8F0;
  color: #0F172A;
}

[data-theme="light"] #post-editor,
body.theme-light #post-editor {
  background: #FFFFFF;
  color: #0F172A;
}

/* ────────────────────────────────────────────────────────────
   Gerenciamento de Usuários — Cards Grid, Lista & Avatar Crop
   ──────────────────────────────────────────────────────────── */
.usuarios-view-toggle {
  display: inline-flex;
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
}

.usuarios-view-toggle button {
  background: transparent;
  border: none;
  color: var(--color-muted);
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.usuarios-view-toggle button.active {
  background: var(--color-surface);
  color: var(--color-light);
  box-shadow: var(--shadow-sm);
}

/* Grid de Usuários */
.usuarios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.usuario-card {
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.usuario-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(249, 160, 27, 0.3);
}

.usuario-card-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-secondary);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  margin-bottom: 14px;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-light);
}

.usuario-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.usuario-badge-admin {
  background: rgba(249, 160, 27, 0.15);
  color: #F9A01B;
  border: 1px solid rgba(249, 160, 27, 0.3);
}

.usuario-badge-gestor {
  background: rgba(109, 40, 217, 0.15);
  color: #A78BFA;
  border: 1px solid rgba(109, 40, 217, 0.3);
}

.usuario-badge-professor {
  background: rgba(56, 189, 248, 0.15);
  color: #38BDF8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

/* Tabela de Usuários */
.usuarios-table-container {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface2);
}

.usuarios-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.usuarios-table th {
  padding: 14px 18px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  background: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid var(--color-border);
}

.usuarios-table td {
  padding: 14px 18px;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.usuarios-table tr:last-child td {
  border-bottom: none;
}

.usuarios-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

/* Área de Upload e Crop de Avatar */
.avatar-crop-zone {
  border: 2px dashed var(--color-border);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--color-surface);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.avatar-crop-zone:hover,
.avatar-crop-zone.dragover {
  border-color: var(--color-secondary);
  background: rgba(249, 160, 27, 0.04);
}

.avatar-crop-preview-circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--color-secondary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  position: relative;
  background: var(--color-surface2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-crop-preview-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Faixa Laranja Institucional das Unidades
   ========================================================================== */
.unidade-strip {
  background: #F9A01B;
  background: linear-gradient(90deg, #F9A01B 0%, #F59E0B 100%);
  padding: 16px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 5;
}

.strip-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #0E0E27;
  box-shadow: 0 4px 12px rgba(14, 14, 39, 0.15);
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
  flex-shrink: 0;
}

.strip-icon-btn:hover {
  transform: scale(1.18);
  box-shadow: 0 6px 20px rgba(14, 14, 39, 0.28);
}

.strip-icon-btn:active {
  transform: scale(1.05);
}

.strip-icon-btn svg {
  stroke: #0A1124;
  transition: stroke 0.2s ease;
}

.strip-icon-btn:hover svg {
  stroke: #1A264F;
}

.unidade-strip h1,
.unidade-strip-nome {
  color: #FFFFFF !important;
}

body.theme-light .unidade-strip h1,
body.theme-light .unidade-strip-nome,
[data-theme="light"] .unidade-strip h1,
[data-theme="light"] .unidade-strip-nome {
  color: #1A264F !important; /* Azul escuro oficial no tema claro */
}

.unidade-strip-cidade,
body.theme-light .unidade-strip-cidade,
[data-theme="light"] .unidade-strip-cidade {
  color: #FFFFFF !important;
  opacity: 0.95;
}

/* ────────────────────────────────────────────────────────────
   Seção História da Unidade - Galeria Compacta
   ──────────────────────────────────────────────────────────── */
.unidade-historia-grid {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 400px);
  gap: 48px;
  align-items: center;
}

.unidade-historia-galeria-col {
  max-width: 400px;
  width: 100%;
  margin-left: auto;
}

@media (max-width: 860px) {
  .unidade-historia-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .unidade-historia-galeria-col {
    max-width: 420px;
    margin: 0 auto;
  }
}

/* ────────────────────────────────────────────────────────────
   Mega Menu Dropdown (Dark & Light Theme)
   ──────────────────────────────────────────────────────────── */
.mega-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: 780px;
  max-width: 92vw;
  background: rgba(10, 17, 36, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 400;
}

.mega-panel-title {
  font-size: 0.675rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #9B93C0;
  margin-bottom: 16px;
  font-weight: 700;
}

.mega-unidade-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  transition: all 0.2s ease;
}

.mega-unidade-item:hover {
  background: rgba(249, 160, 27, 0.2);
  border-color: rgba(249, 160, 27, 0.4);
  transform: translateY(-2px);
}

.mega-unidade-rede {
  font-size: 0.68rem;
  color: #ffa100;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.mega-unidade-nome {
  font-weight: 700;
  font-size: 0.84rem;
  color: #1A264F; /* Azul Marinho Oficial VespeR */
  line-height: 1.2;
  transition: color 0.2s ease;
}

body:not(.theme-light):not([data-theme="light"]) .mega-unidade-nome {
  color: #93C5FD; /* Tom de azul marinho legível no tema escuro */
}

.mega-unidade-cidade {
  font-size: 0.68rem;
  color: #9B93C0;
  line-height: 1.2;
  transition: color 0.2s ease;
}

.mega-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.mega-footer-link {
  font-size: 0.74rem;
  color: #F9A01B;
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s ease;
}
.mega-footer-link:hover {
  text-decoration: underline;
}

/* ── Light Mode do Mega Menu ── */
body.theme-light .mega-panel,
[data-theme="light"] .mega-panel {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

body.theme-light .mega-panel-title,
[data-theme="light"] .mega-panel-title {
  color: #64748B !important;
}

body.theme-light .mega-unidade-item,
[data-theme="light"] .mega-unidade-item {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
}

body.theme-light .mega-unidade-item:hover,
[data-theme="light"] .mega-unidade-item:hover {
  background: #FFF7ED !important;
  border-color: #F97316 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.16);
}

body.theme-light .mega-unidade-rede,
[data-theme="light"] .mega-unidade-rede {
  color: #EA580C !important;
}

body.theme-light .mega-unidade-nome,
[data-theme="light"] .mega-unidade-nome {
  color: #1A264F !important; /* Azul Marinho Oficial VespeR */
}

body.theme-light .mega-unidade-cidade,
[data-theme="light"] .mega-unidade-cidade {
  color: #64748B !important;
}

body.theme-light .mega-footer,
[data-theme="light"] .mega-footer {
  border-top-color: #E2E8F0 !important;
}

body.theme-light .mega-footer-link,
[data-theme="light"] .mega-footer-link {
  color: #EA580C !important;
}

/* ── Light Mode no Mobile Drawer ── */
body.theme-light #mobile-drawer,
[data-theme="light"] #mobile-drawer {
  background: rgba(255, 255, 255, 0.98) !important;
  border-right: 1px solid #E2E8F0 !important;
}

body.theme-light .mobile-drawer-link,
[data-theme="light"] .mobile-drawer-link {
  color: #0F172A !important;
}

body.theme-light .mobile-drawer-link .unidade-nome-mobile,
[data-theme="light"] .mobile-drawer-link .unidade-nome-mobile {
  color: #EA580C !important;
  font-weight: 700;
}

/* ────────────────────────────────────────────────────────────
   Acesso Aluno Dropdown
   ──────────────────────────────────────────────────────────── */
.aluno-dropdown,
body.theme-light .aluno-dropdown,
[data-theme="light"] .aluno-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: rgba(10, 17, 36, 0.98) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 20px;
  padding: 12px;
  width: 275px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(20px);
  z-index: 400;
  flex-direction: column;
  gap: 10px;
}

.aluno-dropdown .btn-aluno-servico {
  width: 100% !important;
  min-width: 0 !important;
  padding: 9px 15px !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.02em !important;
  box-sizing: border-box !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 0 !important;
}

.aluno-dropdown .btn-aluno-icon {
  height: 15px !important;
  max-width: 58px !important;
}

.aluno-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  margin-bottom: 8px;
  transition: all 0.2s ease;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.aluno-logo-card:last-child {
  margin-bottom: 0;
}

.aluno-logo-card:hover {
  transform: scale(1.02);
  background: #FFFFFF;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

body.theme-light .aluno-logo-card,
[data-theme="light"] .aluno-logo-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

body.theme-light .aluno-logo-card:hover,
[data-theme="light"] .aluno-logo-card:hover {
  border-color: #F97316 !important;
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.15);
}

/* ────────────────────────────────────────────────────────────
   Logos e Navegação do Header (Adaptação ao Scroll e Temas)
   ──────────────────────────────────────────────────────────── */

/* Padrão no topo da página (transparente sobre a Hero):
   Sempre logo branco e links brancos em ambos os temas */
.logo-dark-theme {
  display: block;
}
.logo-light-theme {
  display: none;
}

.nav-link-item {
  color: #FFFFFF;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.835rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-link-item:hover {
  color: #F9A01B !important;
}

#hamburger-btn {
  background: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
}

#hamburger-btn span {
  background: #F9A01B !important;
}

/* ────────────────────────────────────────────────────────────
   FUNDO DO CABEÇALHO (SITE HEADER):
   - Tema Claro: Fundo BRANCO (#FFFFFF ou rgba(255, 255, 255, 0.98)) quando rolado ou sem hero.
   - Tema Escuro: Fundo AZUL ESCURO (#0E0E27 ou rgba(14, 14, 39, 0.98)) quando rolado ou sem hero.
   ──────────────────────────────────────────────────────────── */
html[data-theme="light"] #site-header.header-scrolled,
html[data-theme="light"] #site-header.header-no-hero,
body.theme-light #site-header.header-scrolled,
body.theme-light #site-header.header-no-hero {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

html:not([data-theme="light"]) body:not(.theme-light) #site-header.header-scrolled,
html:not([data-theme="light"]) body:not(.theme-light) #site-header.header-no-hero {
  background: rgba(14, 14, 39, 0.98) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

/* No Tema Claro (light theme) em qualquer estado (rolado ou no topo),
   ou no topo de páginas com fundo claro (.force-navy-header:not(.header-scrolled)):
   O menu fica em azul marinho (#1A264F) e a logo muda para a versão marinho (logo-navy) para dar contraste com o fundo claro */
html[data-theme="light"] #site-header.force-navy-header:not(.header-scrolled) .logo-dark-theme,
body.theme-light #site-header.force-navy-header:not(.header-scrolled) .logo-dark-theme,
body.theme-light #site-header .logo-dark-theme,
[data-theme="light"] #site-header .logo-dark-theme {
  display: none !important;
}

html[data-theme="light"] #site-header.force-navy-header:not(.header-scrolled) .logo-light-theme,
body.theme-light #site-header.force-navy-header:not(.header-scrolled) .logo-light-theme,
body.theme-light #site-header .logo-light-theme,
[data-theme="light"] #site-header .logo-light-theme {
  display: block !important;
}

html[data-theme="light"] #site-header.force-navy-header:not(.header-scrolled) .nav-link-item,
body.theme-light #site-header.force-navy-header:not(.header-scrolled) .nav-link-item,
body.theme-light #site-header .nav-link-item,
[data-theme="light"] #site-header .nav-link-item {
  color: #1A264F !important; /* Azul marinho */
}

html[data-theme="light"] #site-header.force-navy-header:not(.header-scrolled) .nav-link-item:hover,
body.theme-light #site-header.force-navy-header:not(.header-scrolled) .nav-link-item:hover,
body.theme-light #site-header .nav-link-item:hover,
[data-theme="light"] #site-header .nav-link-item:hover {
  color: #EA580C !important; /* Laranja no hover */
}

html[data-theme="light"] #site-header.force-navy-header:not(.header-scrolled) #theme-toggle-btn,
body.theme-light #site-header.force-navy-header:not(.header-scrolled) #theme-toggle-btn,
body.theme-light #site-header #theme-toggle-btn,
[data-theme="light"] #site-header #theme-toggle-btn {
  background: rgba(26, 38, 79, 0.08) !important;
  border-color: rgba(26, 38, 79, 0.2) !important;
}

/* No Tema Escuro (dark theme):
   O logo DEVE SER BRANCO (.logo-dark-theme) e as letras do menu DEVEM SER BRANCAS (#FFFFFF) para alto contraste */
html:not([data-theme="light"]) body:not(.theme-light) #site-header .logo-dark-theme {
  display: block !important;
}

html:not([data-theme="light"]) body:not(.theme-light) #site-header .logo-light-theme {
  display: none !important;
}

html:not([data-theme="light"]) body:not(.theme-light) #site-header .nav-link-item {
  color: #FFFFFF !important;
}

html:not([data-theme="light"]) body:not(.theme-light) #site-header .nav-link-item:hover {
  color: #F9A01B !important;
}

html:not([data-theme="light"]) body:not(.theme-light) #site-header #theme-toggle-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Drawer Lateral Mobile no Tema Claro */
body.theme-light #mobile-drawer,
[data-theme="light"] #mobile-drawer {
  background: rgba(255, 255, 255, 0.98) !important;
  border-right: 1px solid #E2E8F0 !important;
}

body.theme-light #mobile-drawer .logo-dark-theme,
[data-theme="light"] #mobile-drawer .logo-dark-theme {
  display: none !important;
}

body.theme-light #mobile-drawer .logo-light-theme,
[data-theme="light"] #mobile-drawer .logo-light-theme {
  display: block !important;
}

body.theme-light #mobile-drawer .mobile-drawer-link,
[data-theme="light"] #mobile-drawer .mobile-drawer-link {
  color: #1A264F !important;
}

body.theme-light #mobile-drawer-close,
[data-theme="light"] #mobile-drawer-close {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #1A264F !important;
}

/* Botões de Acesso Aluno / Sistemas no Menu Lateral Mobile (Tema Claro) */
body.theme-light #mobile-drawer .btn-aluno-servico,
[data-theme="light"] #mobile-drawer .btn-aluno-servico {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

body.theme-light #mobile-drawer .btn-aluno-servico span,
[data-theme="light"] #mobile-drawer .btn-aluno-servico span {
  color: #0F172A !important;
  font-weight: 700 !important;
}

body.theme-light #mobile-drawer .btn-aluno-servico:hover,
[data-theme="light"] #mobile-drawer .btn-aluno-servico:hover {
  background: #E2E8F0 !important;
  border-color: #94A3B8 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

body.theme-light #mobile-drawer .btn-aluno-totvs img,
[data-theme="light"] #mobile-drawer .btn-aluno-totvs img {
  filter: brightness(0) opacity(0.85) !important;
}

body.theme-light #mobile-drawer div[style*="border-top"],
[data-theme="light"] #mobile-drawer div[style*="border-top"] {
  border-top-color: #E2E8F0 !important;
}

/* ────────────────────────────────────────────────────────────
   Sessão: Palavra do Presidente (Altura Reduzida 1/2 e Imagens Separadas)
   ──────────────────────────────────────────────────────────── */
#presidente-section {
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #0b0c10 !important;
  background-image: url('/static/images/presidente-bg-clean.webp?v=1') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  border-top: 1px solid rgba(255, 161, 0, 0.25) !important;
  border-bottom: 1px solid rgba(255, 161, 0, 0.25) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  padding: 0;
  min-height: 270px;
  display: flex;
  align-items: stretch;
}

body.theme-light #presidente-section,
[data-theme="light"] #presidente-section {
  background-color: #0b0c10 !important;
  background-image: url('/static/images/presidente-bg-clean.webp?v=1') !important;
  background-position: center !important;
  border-top: 1px solid rgba(255, 161, 0, 0.35) !important;
  border-bottom: 1px solid rgba(255, 161, 0, 0.35) !important;
}

#presidente-section .container {
  max-width: 1220px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
}

.presidente-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 52px);
  position: relative;
  width: 100%;
  min-height: 270px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.theme-light .presidente-card,
[data-theme="light"] .presidente-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Coluna Esquerda: Nome e Cargo do Padre (Equidistante da Foto) */
.presidente-author-col {
  flex: 0 1 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  align-items: flex-end;
  position: relative;
  z-index: 2;
  text-align: right;
}

.presidente-author-name {
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  font-weight: 800;
  color: #ffa100 !important;
  margin: 0 0 6px 0;
  line-height: 1.25;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.presidente-author-role {
  font-size: 0.95rem;
  font-weight: 600;
  color: #FFFFFF !important;
  margin: 0;
  letter-spacing: 0.04em;
  opacity: 0.95;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

body.theme-light .presidente-author-role,
[data-theme="light"] .presidente-author-role {
  color: #FFFFFF !important;
}

/* Coluna Central: Imagem Recortada do Padre */
.presidente-img-col {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  align-self: flex-end;
  height: 100%;
  margin: 0;
  position: relative;
  z-index: 1;
}

.presidente-padre-img {
  height: 242px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom;
  display: block;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.6));
}

/* Coluna Direita: Palavra do Presidente e Botão Leia Mais (Equidistante da Foto) */
.presidente-right-col {
  flex: 0 1 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  align-items: flex-start;
  position: relative;
  z-index: 2;
  text-align: left;
}

.presidente-title {
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 900;
  color: #ffa100 !important;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 16px 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.btn-leia-mais-presidente {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffa100 0%, #F97316 100%);
  color: #0E0E27 !important;
  font-weight: 800;
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(255, 161, 0, 0.35);
  transition: all 0.25s ease;
  width: fit-content;
}

.btn-leia-mais-presidente:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(255, 161, 0, 0.45);
}

.btn-leia-mais-presidente .btn-arrow {
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.btn-leia-mais-presidente:hover .btn-arrow {
  transform: translateX(3px);
}

@media (max-width: 860px) {
  #presidente-section {
    display: block !important;
    padding: 36px 0 40px 0 !important;
    min-height: auto !important;
    height: auto !important;
  }

  #presidente-section .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 20px !important;
    width: 100% !important;
    height: auto !important;
  }

  .presidente-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 14px !important;
    min-height: auto !important;
    height: auto !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /* 1. Imagem Centralizada sem espaço vazio superior */
  .presidente-img-col {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    height: auto !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .presidente-img-col picture {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    width: auto !important;
  }

  .presidente-padre-img {
    height: 195px !important;
    max-height: 220px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
  }

  /* 2. Nome e Cargo Centralizados */
  .presidente-author-col {
    order: 2 !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  .presidente-author-name {
    text-align: center !important;
    font-size: 1.35rem !important;
    margin: 0 0 4px 0 !important;
  }

  .presidente-author-role {
    text-align: center !important;
    font-size: 0.925rem !important;
    margin: 0 !important;
    opacity: 0.9 !important;
  }

  /* 3. Título e Botão Centralizados */
  .presidente-right-col {
    order: 3 !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  .presidente-title {
    text-align: center !important;
    font-size: 1.6rem !important;
    margin: 6px 0 16px 0 !important;
  }

  .presidente-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  .btn-leia-mais-presidente {
    margin: 0 auto !important;
  }
}

/* Modal do Presidente */
#presidente-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 17, 36, 0.85);
  backdrop-filter: blur(8px);
  z-index: 99998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#presidente-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

#presidente-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%) scale(0.96);
  width: 92%;
  max-width: 780px;
  max-height: 90vh;
  overflow-y: auto;
  background: #121D38;
  border: 1px solid rgba(255, 161, 0, 0.35);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #F1F5F9;
}

body.theme-light #presidente-modal,
[data-theme="light"] #presidente-modal {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2) !important;
}

#presidente-modal.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.presidente-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.presidente-modal-close:hover {
  background: #ffa100;
  color: #0E0E27;
}

body.theme-light .presidente-modal-close,
[data-theme="light"] .presidente-modal-close {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border-color: #E2E8F0 !important;
}

/* ────────────────────────────────────────────────────────────
   Página Especial Matrículas 2026
   ──────────────────────────────────────────────────────────── */
.matricula-card:hover {
  transform: translateY(-14px);
}

.matricula-card:hover .card-img-wrapper img {
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 16px rgba(249, 160, 27, 0.25)) !important;
}

.diferencial-item:hover .diferencial-icon-box {
  transform: scale(1.22);
}

.diferencial-item:hover .diferencial-icon-box img {
  filter: drop-shadow(0 6px 16px rgba(249, 160, 27, 0.6)) !important;
}

.colegio-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 14px;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 14px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  min-height: 110px;
}

.colegio-logo-card img {
  max-width: 100%;
  max-height: 72px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.colegio-logo-card:hover {
  transform: translateY(-6px) scale(1.04);
  border-color: #F9A01B;
  box-shadow: 0 14px 28px rgba(249, 160, 27, 0.2), 0 6px 12px rgba(0, 0, 0, 0.08);
}

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

@media (max-width: 900px) {
  .matriculas-logos-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 480px) {
  .matriculas-logos-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ────────────────────────────────────────────────────────────
   Banner de Consentimento LGPD & ECA Digital
   ──────────────────────────────────────────────────────────── */
#lgpd-banner {
  position: fixed !important;
  bottom: 24px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 32px) !important;
  max-width: 980px !important;
  box-sizing: border-box !important;
  z-index: 99999 !important;
  background: rgba(14, 17, 36, 0.96);
  border: 1px solid rgba(249, 160, 27, 0.35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(249, 160, 27, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, visibility 0.35s ease !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

#lgpd-banner.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate(-50%, 40px) !important;
  pointer-events: none !important;
}

body.theme-light #lgpd-banner,
[data-theme="light"] #lgpd-banner {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(26, 38, 79, 0.2);
  box-shadow: 0 16px 40px rgba(26, 38, 79, 0.15), 0 0 20px rgba(249, 160, 27, 0.1);
}

@media (max-width: 768px) {
  #lgpd-banner {
    bottom: 12px !important;
    width: calc(100% - 24px) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 18px 20px !important;
    gap: 14px !important;
    transform: translateX(-50%) !important;
  }
  #lgpd-banner.hidden {
    transform: translate(-50%, 40px) !important;
  }
}

/* ────────────────────────────────────────────────────────────
   MOSAICO DE NOTÍCIAS (SMART POSTS TILES CAROUSEL)
   - Layout de Grade Crocoblock JetBlog
   - Tile Destaque Maior (Esquerda) + Grade 2x2 (Direita)
   - Navegação por Carrossel com cantos arredondados (border-radius: 20px)
   ──────────────────────────────────────────────────────────── */
.mosaico-tile-destaque:hover .mosaico-bg-img,
.mosaico-tile-secundaria:hover .mosaico-bg-img {
  transform: scale(1.06) !important;
}

.mosaico-tile-destaque,
.mosaico-tile-secundaria {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.mosaico-tile-destaque:hover,
.mosaico-tile-secundaria:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}

@media (max-width: 991px) {
  .mosaico-slide-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .mosaico-tile-destaque {
    min-height: 320px !important;
    height: 320px !important;
  }
  .mosaico-grid-secundarias {
    height: auto !important;
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 640px) {
  .mosaico-grid-secundarias {
    grid-template-columns: 1fr !important;
  }
  .mosaico-tile-secundaria {
    min-height: 160px !important;
  }
}

/* ────────────────────────────────────────────────────────────
   LAYOUT DE 4 COLUNAS EM NOTÍCIAS (3 PARA CARDS DE POSTAGENS + 1 PARA ÁRVORE DE DATAS)
   - 3 Colunas (Esquerda): Grid de Cards de Notícias (repeat(3, 1fr))
   - 1 Coluna (Direita): Árvore Hierárquica de Datas de Postagens (Sidebar)
   ──────────────────────────────────────────────────────────── */
.noticias-3col-layout {
  display: grid;
  grid-template-columns: 3.1fr 1fr;
  gap: 32px;
  align-items: start;
}

#noticias-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px;
}

.arvore-mes-link.active-filter {
  background: rgba(249, 160, 27, 0.18) !important;
  color: var(--color-secondary) !important;
  font-weight: 700 !important;
}

@media (max-width: 1200px) {
  #noticias-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 991px) {
  .noticias-3col-layout {
    grid-template-columns: 1fr !important;
  }
  #noticias-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  }
  .noticias-sidebar {
    position: static !important;
    margin-top: 24px;
  }
}

@media (max-width: 640px) {
  #noticias-grid {
    grid-template-columns: 1fr !important;
  }
  #ticker-date-container {
    display: none !important;
  }
}

/* --- TEXT TICKER DE NOTÍCIAS (FUNDO DA BARRA POR TEMA) --- */
@keyframes tickerBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

#text-ticker-section {
  background: #F9A01B !important;
  background: linear-gradient(90deg, #F9A01B 0%, #F97316 100%) !important;
  padding: 14px 0 !important;
  box-shadow: 0 4px 20px rgba(249, 160, 27, 0.25) !important;
}

.text-ticker-bar {
  font-family: 'Montserrat', sans-serif !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

/* --- TEMA CLARO: TICKER BRANCO (#FFFFFF) --- */
[data-theme="light"] .text-ticker-bar,
body.theme-light .text-ticker-bar {
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] #ticker-title-text,
body.theme-light #ticker-title-text {
  color: #0E0E27 !important;
  font-weight: 800 !important;
}

[data-theme="light"] #ticker-date-text,
body.theme-light #ticker-date-text,
[data-theme="light"] #ticker-date-container,
body.theme-light #ticker-date-container {
  color: #1E293B !important;
  font-weight: 700 !important;
}

[data-theme="light"] #ticker-cursor,
body.theme-light #ticker-cursor {
  color: #F9A01B !important;
}

[data-theme="light"] .ticker-divider-line,
body.theme-light .ticker-divider-line {
  background: #E2E8F0 !important;
}

[data-theme="light"] .ticker-nav-btn,
body.theme-light .ticker-nav-btn {
  background: #F1F5F9 !important;
  color: #0E0E27 !important;
  border: 1px solid #CBD5E1 !important;
}

[data-theme="light"] .ticker-nav-btn:hover,
body.theme-light .ticker-nav-btn:hover {
  background: #0E0E27 !important;
  color: #FFFFFF !important;
}

/* --- TEMA ESCURO: TICKER AZUL ESCURO (#0E0E27) --- */
[data-theme="dark"] .text-ticker-bar,
html:not([data-theme="light"]) .text-ticker-bar {
  background: #0E0E27 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] #ticker-title-text,
html:not([data-theme="light"]) #ticker-title-text {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

[data-theme="dark"] #ticker-date-text,
html:not([data-theme="light"]) #ticker-date-text,
[data-theme="dark"] #ticker-date-container,
html:not([data-theme="light"]) #ticker-date-container {
  color: #9B93C0 !important;
  font-weight: 700 !important;
}

[data-theme="dark"] #ticker-cursor,
html:not([data-theme="light"]) #ticker-cursor {
  color: #F9A01B !important;
}

[data-theme="dark"] .ticker-divider-line,
html:not([data-theme="light"]) .ticker-divider-line {
  background: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .ticker-nav-btn,
html:not([data-theme="light"]) .ticker-nav-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .ticker-nav-btn:hover,
html:not([data-theme="light"]) .ticker-nav-btn:hover {
  background: #F9A01B !important;
  color: #0E0E27 !important;
}

/* ═══════════════════════════════════════════════════════
   EFEITO GROW NOS LOGOS DO CABEÇALHO E RODAPÉ (HOVER)
   ═══════════════════════════════════════════════════════ */
.site-header-logo-link,
.footer-logo,
.footer-brand .footer-logo img,
.site-header-logo-link img,
.site-header-logo-link picture {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  display: inline-flex !important;
}

.site-header-logo-link:hover,
.site-header-logo-link:hover img,
.site-header-logo-link:hover picture,
.footer-logo:hover,
.footer-logo:hover img,
.footer-logo:hover picture,
.footer-brand .footer-logo:hover img {
  transform: scale(1.08) !important;
}

/* ────────────────────────────────────────────────────────────
   Página Contato — Grid de 2 Colunas Responsivo
   ──────────────────────────────────────────────────────────── */
.contato-grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}

@media (max-width: 900px) {
  .contato-grid-layout {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

/* ────────────────────────────────────────────────────────────
   Barra de Estatísticas das Unidades (Mantém 3 itens na mesma linha no celular)
   ──────────────────────────────────────────────────────────── */
.unidade-stats-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.unidade-stat-item {
  flex: 1 1 0px !important;
  min-width: 0 !important;
}

@media (max-width: 767px) {
  .unidade-stats-bar {
    padding: 22px 0 !important;
  }
  .unidade-stats-container {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 0 10px !important;
  }
  .unidade-stat-item {
    flex: 1 1 0px !important;
    min-width: 0 !important;
    padding: 0 2px !important;
  }
  .unidade-stat-number {
    font-size: clamp(1.6rem, 6.8vw, 2.2rem) !important;
    line-height: 1.1 !important;
  }
  .unidade-stat-label {
    font-size: clamp(0.58rem, 2.4vw, 0.72rem) !important;
    letter-spacing: 0.03em !important;
    margin-top: 4px !important;
    text-align: center !important;
    line-height: 1.2 !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   Carrossel Hero da HOME (Rotativo até 5 Banners)
   ───────────────────────────────────────────────────────────── */
.home-hero-carousel-section {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
  line-height: 0;
  user-select: none;
}

.home-hero-carousel-section #home-hero-track {
  display: flex;
  width: 100%;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.home-hero-slide {
  flex: 0 0 100%;
  width: 100%;
  position: relative;
  line-height: 0;
}

.home-hero-slide picture,
.home-hero-slide img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Setas de navegação */
.home-hero-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.25s ease;
  opacity: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.home-hero-carousel-section:hover .home-hero-nav-arrow {
  opacity: 0.9;
}

.home-hero-nav-arrow:hover {
  opacity: 1 !important;
  background: rgba(249, 160, 27, 0.9);
  border-color: #F9A01B;
  color: #fff;
  transform: translateY(-50%) scale(1.1);
}

.home-hero-nav-arrow.prev {
  left: 24px;
}

.home-hero-nav-arrow.next {
  right: 24px;
}

@media (max-width: 767px) {
  .home-hero-nav-arrow {
    width: 38px;
    height: 38px;
    opacity: 0.75;
  }
  .home-hero-nav-arrow.prev {
    left: 10px;
  }
  .home-hero-nav-arrow.next {
    right: 10px;
  }
}

/* Indicadores / Dots */
.home-hero-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.home-hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.45);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-hero-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

.home-hero-dot.active {
  width: 28px;
  background: #F9A01B;
  box-shadow: 0 0 10px rgba(249, 160, 27, 0.6);
}

@media (max-width: 767px) {
  .home-hero-dots {
    bottom: 14px;
    padding: 4px 8px;
    gap: 6px;
  }
  .home-hero-dot {
    width: 8px;
    height: 8px;
  }
  .home-hero-dot.active {
    width: 22px;
  }
}

/* ────────────────────────────────────────────────────────────
   Seção Acompanhe nas Redes Sociais — Animações e Cards
   ──────────────────────────────────────────────────────────── */
.redes-sociais-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
  justify-content: center;
  gap: 28px;
  margin-top: 36px;
}

.social-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 34px 24px;
  border-radius: var(--radius-lg, 20px);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Animação suave de flutuação contínua alternada */
@keyframes floatSocial {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.social-card-fb {
  animation: floatSocial 4.8s ease-in-out infinite;
  animation-delay: 0s;
}

.social-card-ig {
  animation: floatSocial 4.8s ease-in-out infinite;
  animation-delay: 1.6s;
}

.social-card-yt {
  animation: floatSocial 4.8s ease-in-out infinite;
  animation-delay: 3.2s;
}

/* Efeito de feixe de luz refletida (shimmer beam) ao passar o mouse */
.social-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  transform: skewX(-25deg);
  pointer-events: none;
}

.social-card:hover::before {
  left: 200%;
  transition: left 0.85s ease;
}

/* Wrapper dos ícones com gradiente de marca e sombra volumétrica */
.social-icon-wrapper {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

.social-icon-wrapper svg {
  width: 38px;
  height: 38px;
  fill: #FFFFFF;
  transition: transform 0.3s ease;
}

/* Cores, auras e gradientes de cada rede social */
/* Facebook */
.social-card-fb .social-icon-wrapper {
  background: linear-gradient(135deg, #1877F2 0%, #0D5AC1 100%);
  box-shadow: 0 10px 24px rgba(24, 119, 242, 0.38);
}
.social-card-fb:hover {
  border-color: rgba(24, 119, 242, 0.55);
  box-shadow: 0 20px 42px rgba(24, 119, 242, 0.28), 0 0 28px rgba(24, 119, 242, 0.18);
  transform: translateY(-10px) scale(1.03);
}

/* Instagram */
.social-card-ig .social-icon-wrapper {
  background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4);
  box-shadow: 0 10px 24px rgba(221, 42, 123, 0.38);
}
.social-card-ig:hover {
  border-color: rgba(221, 42, 123, 0.55);
  box-shadow: 0 20px 42px rgba(221, 42, 123, 0.28), 0 0 28px rgba(221, 42, 123, 0.18);
  transform: translateY(-10px) scale(1.03);
}

/* YouTube */
.social-card-yt .social-icon-wrapper {
  background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
  box-shadow: 0 10px 24px rgba(255, 0, 0, 0.38);
}
.social-card-yt:hover {
  border-color: rgba(255, 0, 0, 0.55);
  box-shadow: 0 20px 42px rgba(255, 0, 0, 0.28), 0 0 28px rgba(255, 0, 0, 0.18);
  transform: translateY(-10px) scale(1.03);
}

.social-card:hover .social-icon-wrapper {
  transform: scale(1.12) rotate(4deg);
}

.social-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-light, #F1F5F9);
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
}

.social-handle {
  font-size: 0.875rem;
  color: var(--color-muted, #8E9EB8);
  margin: 0 0 18px 0;
}

.social-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #F1F5F9;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.3s ease;
}

.social-action-btn svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}

.social-card:hover .social-action-btn {
  background: #ffa100;
  color: #0A1124;
  border-color: #ffa100;
  box-shadow: 0 4px 16px rgba(255, 161, 0, 0.45);
}

.social-card:hover .social-action-btn svg {
  transform: translateX(4px);
}

/* Adaptação específica para Tema Claro */
[data-theme="light"] .social-card,
body.theme-light .social-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .social-handle,
body.theme-light .social-handle {
  color: #64748B !important;
}

[data-theme="light"] .social-action-btn,
body.theme-light .social-action-btn {
  background: #F1F5F9 !important;
  color: #1E293B !important;
  border: 1px solid #CBD5E1 !important;
}

[data-theme="light"] .social-card:hover .social-action-btn,
body.theme-light .social-card:hover .social-action-btn {
  background: #ffa100 !important;
  color: #0A1124 !important;
  border-color: #ffa100 !important;
}

/* ────────────────────────────────────────────────────────────
   Página de Valores e Mensalidades & Modal do Visualizador de PDF
   ──────────────────────────────────────────────────────────── */
.valores-page-header {
  padding: 120px 0 40px;
  background: radial-gradient(circle at 50% 20%, rgba(249, 160, 27, 0.12) 0%, rgba(10, 17, 36, 0) 70%), var(--color-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

body.theme-light .valores-page-header,
[data-theme="light"] .valores-page-header {
  background: radial-gradient(circle at 50% 20%, rgba(249, 160, 27, 0.15) 0%, rgba(248, 250, 252, 0) 70%), #F8FAFC;
  border-bottom-color: #E2E8F0;
}

.valores-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 32px 0 20px;
  flex-wrap: wrap;
}

.valores-tab-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--color-light);
  padding: 8px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.25s ease;
}

.valores-tab-btn:hover {
  background: rgba(249, 160, 27, 0.15);
  border-color: #F9A01B;
  color: #F9A01B;
}

.valores-tab-btn.active {
  background: #F9A01B;
  border-color: #F9A01B;
  color: #0A1124;
  box-shadow: 0 4px 16px rgba(249, 160, 27, 0.35);
}

body.theme-light .valores-tab-btn,
[data-theme="light"] .valores-tab-btn {
  background: #FFFFFF;
  border-color: #CBD5E1;
  color: #1E293B;
}

body.theme-light .valores-tab-btn.active,
[data-theme="light"] .valores-tab-btn.active {
  background: #F9A01B;
  border-color: #F9A01B;
  color: #0A1124;
}

.valores-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 900px;
  margin: 0 auto 60px;
}

.valores-row-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  transition: all 0.25s ease;
  backdrop-filter: blur(12px);
}

.valores-row-card:hover {
  border-color: rgba(249, 160, 27, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

body.theme-light .valores-row-card,
[data-theme="light"] .valores-row-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

body.theme-light .valores-row-card:hover,
[data-theme="light"] .valores-row-card:hover {
  border-color: #F9A01B;
  box-shadow: 0 8px 24px rgba(249, 160, 27, 0.12);
}

.valores-unidade-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 10px;
}

body.theme-light .valores-unidade-title,
[data-theme="light"] .valores-unidade-title {
  color: #0F172A;
}

.valores-buttons-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-ano-pdf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #F9A01B 0%, #D97706 100%);
  color: #0A1124 !important;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 9px 18px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 12px rgba(249, 160, 27, 0.28);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-ano-pdf:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #FBBF24 0%, #EA580C 100%);
  box-shadow: 0 6px 20px rgba(249, 160, 27, 0.5);
}

.btn-ano-pdf svg {
  width: 14px;
  height: 14px;
}

/* Modal de Visualização de PDF */
.modal-pdf-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(5, 10, 25, 0.88);
  backdrop-filter: blur(8px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.modal-pdf-overlay.active {
  display: flex;
}

.modal-pdf-container {
  background: #0A1124;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  width: 100%;
  max-width: 1000px;
  height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75);
}

body.theme-light .modal-pdf-container,
[data-theme="light"] .modal-pdf-container {
  background: #FFFFFF;
  border-color: #CBD5E1;
}

.modal-pdf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  gap: 12px;
  flex-wrap: wrap;
}

body.theme-light .modal-pdf-header,
[data-theme="light"] .modal-pdf-header {
  background: #F8FAFC;
  border-bottom-color: #E2E8F0;
}

.modal-pdf-title {
  font-size: 1rem;
  font-weight: 700;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

body.theme-light .modal-pdf-title,
[data-theme="light"] .modal-pdf-title {
  color: #0F172A;
}

.modal-pdf-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-pdf-btn-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F9A01B;
  color: #0A1124 !important;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 6px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.modal-pdf-btn-download:hover {
  background: #FBBF24;
  transform: translateY(-1px);
}

.modal-pdf-btn-close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #FFFFFF;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.modal-pdf-btn-close:hover {
  background: #EF4444;
  color: #FFFFFF;
}

body.theme-light .modal-pdf-btn-close,
[data-theme="light"] .modal-pdf-btn-close {
  background: #E2E8F0;
  color: #1E293B;
}

.modal-pdf-body {
  flex: 1;
  position: relative;
  background: #1E293B;
}

.modal-pdf-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Galeria Compacta da Seção História da Unidade */
.unidade-historia-grid {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 390px);
  gap: 48px;
  align-items: center;
}

.unidade-historia-galeria-col {
  max-width: 390px;
  width: 100%;
  margin-left: auto;
}

@media (max-width: 860px) {
  .unidade-historia-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .unidade-historia-galeria-col {
    max-width: 390px;
    margin: 0 auto;
  }
}