/* =========================================================
   AQUAG · SITE INSTITUCIONAL — BASE
   Variáveis de identidade visual (azuis + água), reset,
   tipografia e utilitários compartilhados por toda a Long
   Page (header, hero, seções, footer, auth).
   ========================================================= */

:root {
  /* Paleta fiel à identidade real do Portal do Aluno (Tailwind
     slate/sky/amber já usado em portal/css e portal/index.html)
     — conferida diretamente no código-fonte do Portal, não só
     de memória. */
  --aq-navy-950: #020617;
  --aq-navy-900: #0f172a;
  --aq-navy-800: #1e293b;
  --aq-blue-700: #075985;
  --aq-blue-600: #0369a1;
  --aq-blue-500: #0ea5e9;
  --aq-blue-400: #38bdf8;
  --aq-cyan-400: #22d3ee;
  --aq-cyan-300: #7dd3fc;
  --aq-amber-500: #f59e0b;
  --aq-amber-400: #fbbf24;
  --aq-white: #f8fafc;
  --aq-slate-300: #cbd5e1;
  --aq-slate-400: #94a3b8;
  --aq-slate-500: #64748b;
  --aq-border: rgba(148, 163, 184, .18);

  --aq-gradient-deep: linear-gradient(160deg, var(--aq-navy-950) 0%, var(--aq-navy-900) 45%, var(--aq-blue-700) 100%);
  --aq-gradient-sky: linear-gradient(135deg, var(--aq-blue-600) 0%, var(--aq-blue-400) 55%, var(--aq-cyan-400) 100%);
  --aq-gradient-amber: linear-gradient(135deg, var(--aq-amber-400) 0%, var(--aq-amber-500) 100%);
  --aq-gradient-glow: radial-gradient(circle at 20% 20%, rgba(14, 165, 233, .30), transparent 55%),
                      radial-gradient(circle at 85% 10%, rgba(34, 211, 238, .20), transparent 45%);

  --aq-shadow-soft: 0 20px 60px -25px rgba(2, 6, 23, .65);
  --aq-shadow-glow: 0 0 0 1px rgba(125, 211, 252, .08), 0 25px 70px -20px rgba(14, 165, 233, .45);
  --aq-radius-lg: 24px;
  --aq-radius-md: 16px;
  --aq-radius-sm: 10px;
  --aq-radius-btn: 10px;
  --aq-ease: cubic-bezier(.22, 1, .36, 1);
  --aq-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --aq-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Só a Long Page carrega a Plus Jakarta Sans; no admin cai para Inter. */
  --aq-font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--aq-navy-950);
  color: var(--aq-white);
  font-family: var(--aq-font-body);
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

::selection { background: var(--aq-cyan-400); color: var(--aq-navy-950); }

.aq-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 768px) {
  .aq-container { padding: 0 32px; }
}

.aq-section {
  position: relative;
  padding: 88px 0;
}

@media (max-width: 767px) {
  .aq-section { padding: 60px 0; }
}

.aq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--aq-cyan-300);
  margin-bottom: 14px;
}

.aq-eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--aq-gradient-sky);
  border-radius: 2px;
}

.aq-section-title {
  font-family: var(--aq-font-heading);
  font-size: clamp(1.85rem, 4.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--aq-white);
  margin: 0 0 14px;
  text-wrap: balance;
}

.aq-section-subtitle {
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
  line-height: 1.65;
  color: var(--aq-slate-300);
  max-width: 620px;
  margin: 0;
}

/* Cabeçalho centralizado das seções em grade. */
.aq-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

.aq-section-head .aq-eyebrow::after {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--aq-gradient-sky);
  border-radius: 2px;
}

.aq-gradient-text {
  background: var(--aq-gradient-sky);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Botões --- */

.aq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .01em;
  padding: 14px 26px;
  border-radius: var(--aq-radius-btn);
  border: 1px solid transparent;
  font-family: var(--aq-font-display);
  transition: transform .25s var(--aq-ease), box-shadow .25s var(--aq-ease), background-color .25s var(--aq-ease), color .25s var(--aq-ease);
  white-space: nowrap;
}

.aq-btn:active { transform: scale(.97); }
.aq-btn:focus-visible { outline: 2px solid var(--aq-cyan-300); outline-offset: 2px; }

.aq-btn-primary {
  background: var(--aq-gradient-sky);
  color: var(--aq-navy-950);
  box-shadow: 0 14px 34px -12px rgba(14, 165, 233, .55);
}

.aq-btn-primary:hover {
  box-shadow: 0 18px 42px -12px rgba(34, 211, 238, .7);
  transform: translateY(-1px);
}

.aq-btn-ghost {
  background: rgba(255, 255, 255, .06);
  color: var(--aq-white);
  border-color: rgba(255, 255, 255, .18);
  backdrop-filter: blur(10px);
}

.aq-btn-ghost:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .3);
  transform: translateY(-1px);
}

/* Laranja: reservado para a ação de matrícula/confirmação — não usar como cor padrão de botão. */
.aq-btn-amber {
  background: var(--aq-gradient-amber);
  color: var(--aq-navy-950);
  box-shadow: 0 14px 34px -12px rgba(245, 158, 11, .5);
}

.aq-btn-amber:hover {
  box-shadow: 0 18px 42px -12px rgba(245, 158, 11, .65);
  transform: translateY(-1px);
}

.aq-btn-sm { padding: 10px 20px; font-size: .82rem; }
.aq-btn-lg { padding: 16px 30px; font-size: .98rem; border-radius: 14px; }
.aq-btn-block { width: 100%; }

/* Variantes para fundo claro (CTA final em degradê azul). */
.aq-btn-dark {
  background: var(--aq-navy-950);
  color: var(--aq-white);
  box-shadow: 0 16px 36px -14px rgba(2, 6, 23, .7);
}

.aq-btn-dark:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -14px rgba(2, 6, 23, .8); }

.aq-btn-outline-dark {
  background: rgba(255, 255, 255, .18);
  color: var(--aq-navy-950);
  border-color: rgba(2, 6, 23, .25);
  backdrop-filter: blur(8px);
}

.aq-btn-outline-dark:hover { background: rgba(255, 255, 255, .3); transform: translateY(-2px); }

/* Brilho que atravessa o botão de tempos em tempos (chama atenção pro CTA principal). */

.aq-round-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--aq-white);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: background-color .2s, border-color .2s, transform .2s var(--aq-ease);
}

.aq-round-btn:hover { background: rgba(255, 255, 255, .12); border-color: rgba(125, 211, 252, .45); transform: translateY(-2px); }

/* --- Cards / glassmorphism --- */

.aq-glass-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--aq-radius-lg);
  backdrop-filter: blur(16px);
  box-shadow: var(--aq-shadow-soft);
}

.aq-card {
  background: var(--aq-navy-800);
  border: 1px solid var(--aq-border);
  border-radius: var(--aq-radius-md);
  box-shadow: var(--aq-shadow-soft);
  transition: transform .3s var(--aq-ease), border-color .3s var(--aq-ease);
}


/* --- Divisor de onda entre seções --- */

.aq-wave-divider {
  display: block;
  width: 100%;
  height: 60px;
  line-height: 0;
}

.aq-wave-divider svg { width: 100%; height: 100%; }

/* --- Loading state simples para conteúdo assíncrono --- */

.aq-skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
  border-radius: var(--aq-radius-sm);
}

.aq-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
  animation: aq-shimmer 1.6s infinite;
}

@keyframes aq-shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.aq-hidden { display: none !important; }

[data-section] { scroll-margin-top: 88px; }

body.aq-no-scroll { overflow: hidden; }

@media (max-width: 640px) {
  .aq-hide-mobile { display: none !important; }
}

@media (min-width: 641px) {
  .aq-hide-desktop { display: none !important; }
}