/* ============================================================
   style.css — Vestibular UEG 2026/2
   Paleta: Azul #1e3c71 | Verde #2ca149 | Amarelo #ffd500
   ============================================================ */

/* ─── Variáveis ───────────────────────────────────────────── */
:root {
  --azul:     #1e3c71;
  --verde:    #2ca149;
  --amarelo:  #ffd500;
  --azul-dk:  #152b52;
  --verde-dk: #1e7a38;
  --branco:   #ffffff;
  --cinza-bg: #f5f7fa;
  --sombra:   0 4px 20px rgba(0,0,0,.12);
  --sombra-hover: 0 8px 30px rgba(0,0,0,.18);
  --radius:   10px;
  --trans:    .25s ease;
}

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

body {
  font-family: 'Inter', Arial, sans-serif;
  background: var(--bg-gradient, linear-gradient(130deg, #1e3c71 0%, #1a6e35 100%));
  color: #fff;
  min-height: 100vh;
}

/* ─── Animações ───────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}

/* respeita preferência do sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ─── Scroll-reveal ───────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
}
[data-reveal].visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Navbar ──────────────────────────────────────────────── */
.navbar {
  background: #fff;
  width: 100%;
  z-index: 1000;
  transition: background var(--trans), box-shadow var(--trans);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.navbar.scrolled {
  background: var(--azul-dk);
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.navbar.scrolled .navbar-brand,
.navbar.scrolled .nav-link {
  color: #fff !important;
}
.navbar.scrolled .navbar-toggler-icon {
  filter: invert(1);
}
.navbar li:hover {
  background: var(--verde);
}
.navbar a:hover { color: #fff; }
.navbar a {
  color: var(--azul) !important;
  font-weight: 600;
}

/* ─── Hero ────────────────────────────────────────────────── */
.hero {
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  padding: 60px 0 48px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(255,213,0,.08) 0%, transparent 65%);
  pointer-events: none;
}
.hero-badge {
  display: inline-block;
  background: var(--amarelo);
  color: var(--azul);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 16px;
  animation: fadeIn .6s ease both;
}
.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.02em;
  animation: fadeInUp .7s .1s ease both;
}
.hero h3 {
  animation: fadeInUp .7s .3s ease both;
  font-size: 1.15rem;
  font-weight: 400;
  opacity: .9;
}
.texto_grande { color: #fff; text-align: left; }
.highlight     { color: var(--amarelo); }

.foto_destaque iframe {
  width: 100%;
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--sombra);
  animation: fadeInUp .7s .2s ease both;
}
.foto_destaque img { box-shadow: none !important; }

/* ─── Botões de ação (hero) ───────────────────────────────── */
.botao_padrao {
  border: none;
  border-radius: var(--radius);
  padding: 20px 12px;
  text-align: center;
  transition: transform var(--trans), box-shadow var(--trans);
  min-height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.botao_padrao:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(255,213,0,.30);
}
.botao_padrao i {
  font-size: 1.9rem;
  margin-bottom: 6px;
}
.col-4 a { text-decoration: none; }

/* ─── Seção Stats ─────────────────────────────────────────── */
.stats-section {
  background: var(--azul-dk);
  padding: 52px 0;
  border-top: 3px solid var(--amarelo);
  border-bottom: 3px solid var(--amarelo);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 16px;
}
.stat-card {
  text-align: center;
  padding: 28px 16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform var(--trans);
}
.stat-card:hover { transform: translateY(-4px); }
.stat-number {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--amarelo);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .75;
  margin-top: 6px;
}

/* ─── Seção FAQ / Perguntas ───────────────────────────────── */
.pergunta { margin-bottom: 15px; }

/* ─── Seção Filtro Cursos ─────────────────────────────────── */
h2#cidades {
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: -.01em;
}

#busca-curso {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 14px 12px;
  font-size: 16px;
  font-family: inherit;
  transition: border-color .2s;
}
#busca-curso:focus {
  border-color: var(--verde);
  outline: none;
  box-shadow: 0 0 0 3px rgba(44,161,73,.2);
}
#contador-resultados {
  font-size: .9em;
  color: #555;
  font-style: italic;
}
.container_cidade {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto 32px;
  background: #fff;
  padding: 15px;
  border-radius: var(--radius);
  box-shadow: var(--sombra);
}
.filtros {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 15px;
}
.filtro-item { width: 100%; }

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}
select {
  width: 100%;
  padding: 14px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  font-size: 16px;
  color: #333;
  transition: border-color .2s;
}
select:focus {
  border-color: var(--verde);
  outline: none;
  box-shadow: 0 0 0 3px rgba(44,161,73,.2);
}

#limpar-filtros-btn {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: var(--verde);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 20px;
  transition: background-color .3s, transform .2s;
}
#limpar-filtros-btn:hover {
  background-color: var(--verde-dk);
  transform: translateY(-1px);
}

/* ─── Tabela ──────────────────────────────────────────────── */
.tabela-container {
  width: 100%;
  overflow-x: auto;
  border-radius: 6px;
  box-shadow: 0 1px 6px rgba(0,0,0,.08);
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 10px;
  border-bottom: 1px solid #e8e8e8;
  text-align: left;
  font-size: .9em;
  color: #222;
}
td:not(:last-child) { border-right: 1px solid #f0f0f0; }
thead {
  background-color: var(--azul);
  color: #fff !important;
  position: sticky;
  top: 0;
}
.titulo_tabela { color: #fff; }
tbody tr {
  position: relative;
  transition: background-color .15s;
}
tbody tr:nth-child(even)  { background-color: #f8fafc; }
tbody tr:hover {
  background-color: #eef3fb;
  cursor: pointer;
}

/* Tooltip (apenas para dispositivos com mouse) */
@media (hover: hover) and (pointer: fine) {
  tbody tr:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    background-color: var(--azul);
    color: #fff;
    padding: 5px 11px;
    border-radius: 4px;
    font-size: .78em;
    white-space: nowrap;
    z-index: 10;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    margin-bottom: 4px;
    pointer-events: none;
  }
}

/* Badges de turno */
.badge-turno {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.badge-turno.matutino  { background: #dbeafe; color: #1d4ed8; }
.badge-turno.noturno   { background: #dcfce7; color: #166534; }
.badge-turno.integral  { background: #fef9c3; color: #854d0e; }
.badge-turno.vespertino { background: #fae8ff; color: #6b21a8; }

/* ─── Footer ──────────────────────────────────────────────── */
.footer {
  min-height: 60px;
  background-color: var(--azul-dk);
  margin-top: 0;
  color: rgba(255,255,255,.8);
  padding: 20px 16px;
  font-size: .88rem;
}
.footer a {
  color: var(--amarelo);
  text-decoration: none;
  font-weight: 600;
}
.footer a:hover { text-decoration: underline; }

/* ─── Responsivo ──────────────────────────────────────────── */
@media (min-width: 768px) {
  .container_cidade { padding: 20px; }
  .filtros { flex-direction: row; gap: 20px; }
  #limpar-filtros-btn { width: auto; padding: 10px 20px; }
  th, td { padding: 12px; font-size: 1em; }
}
@media (max-width: 500px) {
  .hero   { padding: 40px 0 32px; }
}