/* =========================== */
/* ESTILO GERAL */
/* =========================== */

* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0b4c9e;
  color: #ffffff;
  margin: 0;
}

a {
  color: inherit;
}

/* Container padrão */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* =========================== */
/* TOPO */
/* =========================== */

.topo {
  background: #0b4c9e;
  padding: 12px 0;
}

.topo-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* Logo + nome */
.logo-area {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #ffffff;
  padding: 4px;
}

.radio-info {
  display: flex;
  flex-direction: column;
}

.radio-name {
  font-weight: 700;
  font-size: 1rem;
}

.destaque-slogan {
  font-size: 1.2rem;
  color: #ffea00;
  font-weight: 700;
}

/* Menu + Ao vivo */
.topo-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Menu */
.menu {
  display: flex;
  align-items: center;
  gap: 6px;
}

.menu a {
  background: #ffd700;
  color: #0b1730 !important;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}

.menu a:hover {
  background: #ffcc00;
}

/* Botão AO VIVO */
.btn-ao-vivo {
  background: #ffd700;
  color: #b00000 !important;
  padding: 7px 14px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}

/* =========================== */
/* HERO */
/* =========================== */

.hero {
  padding: 40px 0 24px; /* pouco espaço embaixo pra não ficar buraco */
}

.hero-inner {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}

.hero-texto {
  flex: 1 1 320px;
}

.hero-texto h1 {
  font-size: 2.2rem;
  margin-bottom: 8px;
}

.hero-texto p {
  margin-top: 0;
  margin-bottom: 16px;
}

/* Social */
.social-bar {
  margin: 16px 0 12px;
}

.social-links {
  margin-top: 8px;
}

.social-links a {
  background: #ffd700;
  color: #0b1730 !important;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  margin-right: 6px;
  display: inline-block;
}

/* Botões grandes */
.hero-botoes {
  margin-top: 10px;
}

.app-download-btn,
.whats-main-btn {
  background: #ffd700;
  color: #0b1730 !important;
  padding: 12px 20px;
  border-radius: 25px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  margin-top: 8px;
}

.app-download-btn {
  margin-right: 8px;
}

/* Card do player */
.hero-card {
  flex: 1 1 360px;
  background: #ffffff;
  color: #000000;
  padding: 16px;
  border-radius: 14px;
}

.hero-card h2 {
  margin-top: 0;
}

.player-wrapper iframe {
  border: none;
  border-radius: 8px;
}

.hero-card-text {
  margin-top: 10px;
}

/* =========================== */
/* CONTATO */
/* =========================== */

.contato {
  padding: 24px 0 40px;
  background: #0b4c9e;
}

.contato-inner {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.contato-col {
  flex: 1 1 280px;
}

.contato h2 {
  margin-top: 0;
  margin-bottom: 12px;
}

/* Botão WhatsApp contato */
.whats-contato-btn {
  background: #ffd700;
  color: #0b1730 !important;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  margin-top: 12px;
}

/* Lista */
.contato ul {
  padding-left: 18px;
}

/* =========================== */
/* RODAPÉ */
/* =========================== */

.rodape {
  background: #0b1730;
  color: #ffffff;
  text-align: center;
  padding: 15px 0;
}

.rodape-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* =========================== */
/* RESPONSIVO */
/* =========================== */

@media (max-width: 768px) {
  .topo-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .topo-right {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .menu {
    flex-wrap: wrap;
  }

  .hero-inner {
    flex-direction: column;
  }

  .hero-card {
    width: 100%;
  }
}