/*
  ==========================================================================
  VALSA HENLUI — Escola de Música & Arte
  Arquivo: css/style.css
  Descrição: Folha de estilos principal da landing page
  Estrutura:
    0. Fontes locais (@font-face)
    1. Variáveis CSS (design tokens)
    2. Reset & Base
    3. Tipografia global
    4. Componentes reutilizáveis (botões, labels)
    5. Navegação
    6. Seção Hero
    7. Seção Cursos
    8. Seção Sobre Nós
    9. Seção Contato
   10. Rodapé
   11. Botão flutuante do WhatsApp
   12. Animações
   13. Responsividade (media queries)
  ==========================================================================
*/


/* ==========================================================================
   0. FONTES LOCAIS — @font-face
   Registra fontes hospedadas dentro do próprio projeto (pasta /fonts).
   Isso garante que a fonte funcione offline e sem depender de CDN externo.

   INSTRUÇÃO: coloque o arquivo Zoika.ttf dentro da pasta fonts/ do projeto.
   Estrutura esperada:
     valsa-henlui/
     ├── fonts/
     │   └── Zoika.ttf   ← arquivo da fonte aqui
     ├── css/
     │   └── style.css
     ├── js/
     │   └── main.js
     └── index.html
   ========================================================================== */

/*
 * Fonte: Zoika
 * Uso: título principal "Valsa Henlui" na seção hero
 * Arquivo: ../fonts/Zoika.ttf (relativo a este CSS)
 * font-display: swap — exibe texto com fonte fallback enquanto Zoika carrega,
 * evitando FOIT (Flash of Invisible Text) e melhorando a experiência.
 */
@font-face {
  font-family: 'Zoika';
  src: url('../fonts/Zoika.ttf') format('truetype');
  font-weight: normal;
  font-style:  normal;
  font-display: swap;
}


/* ==========================================================================
   1. VARIÁVEIS CSS — Design Tokens
   Cores, fontes e espaçamentos centralizados aqui.
   Para alterar a identidade visual, basta editar este bloco.
   ========================================================================== */
:root {
  /* Paleta principal */
  --azul:        #1a3a7c;   /* Azul escuro — cor institucional primária      */
  --azul-medio:  #2457b5;   /* Azul médio — links, destaques                 */
  --azul-claro:  #4a87d5;   /* Azul claro — gradientes, acentos              */

  /* Paleta rosa */
  --rosa:        #e9388d;   /* Rosa principal — CTAs e acentos vibrantes     */
  --rosa-claro:  #e9388d;   /* Rosa claro — textos sobre fundos escuros      */
  --rosa-suave:  #fde8ef;   /* Rosa pastel — fundos de ícones                */

  /* WhatsApp */
  --verde-wa:    #25D366;   /* Verde oficial do WhatsApp                     */

  /* Neutros */
  --branco:      #ffffff;
  --off:         #f4f6fa;   /* Fundo alternativo levemente acinzentado       */
  --cinza:       #6b7280;   /* Textos secundários e labels                   */
  --dark:        #0f172a;   /* Texto principal — quase preto                 */

  /* Tipografia */
  --font-zoika:  'Zoika', 'Playfair Display', Georgia, serif; /* Fonte display exclusiva do hero   */
  --font-titulo: 'Playfair Display', Georgia, serif;           /* Títulos de seção                  */
  --font-corpo:  'Inter', system-ui, sans-serif;               /* Texto corrido e interface         */

  /* Espaçamento de seções */
  --section-padding: 96px 5%;

  /* Bordas arredondadas padrão */
  --radius-card: 20px;
  --radius-btn:  50px;

  /* Transições padrão */
  --transition: .2s ease;
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

/* Box-model consistente em todos os elementos */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Scroll suave ao clicar em âncoras de navegação */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-corpo);
  background: var(--branco);
  color: var(--dark);
  overflow-x: hidden;       /* Impede scroll horizontal indesejado           */
  line-height: 1.6;
}

/* Remove estilo padrão de listas usadas como componentes */
ul[role="list"] {
  list-style: none;
}

/* Imagens responsivas por padrão */
img {
  max-width: 100%;
  display: block;
}

/* Remove sublinhado padrão de links de endereço */
address {
  font-style: normal;
}


/* ==========================================================================
   3. TIPOGRAFIA GLOBAL — Labels e títulos de seção reutilizáveis
   ========================================================================== */

/* Pequeno label colorido acima dos títulos de seção (ex: "NOSSOS CURSOS") */
.sec-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cinza);
  margin-bottom: 10px;
  display: block;
}

/* Título principal de seção com destaque em itálico */
.sec-title {
  font-family: var(--font-titulo);
  font-size: clamp(32px, 4.5vw, 54px);  /* Fluido: cresce com a tela        */
  font-weight: 900;
  color: var(--dark);
  margin-bottom: 14px;
  line-height: 1.1;
}

/* Palavra de destaque dentro do título (cor azul + itálico) */
.sec-title span {
  color: var(--azul-medio);
  font-style: italic;
}

/* Subtítulo descritivo abaixo do título de seção */
.sec-sub {
  font-size: 16px;
  color: var(--cinza);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto;
}


/* ==========================================================================
   4. COMPONENTES REUTILIZÁVEIS — Botões
   ========================================================================== */

/* Botão verde (WhatsApp) — usado no hero e em destaque */
.btn-green {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--verde-wa);
  color: white;
  text-decoration: none;
  border-radius: var(--radius-btn);
  padding: 16px 36px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.45);
  transition: transform var(--transition), box-shadow var(--transition);
}

.btn-green:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(37, 211, 102, 0.6);
}

.btn-green svg {
  width: 22px;
  height: 22px;
  fill: white;
  flex-shrink: 0;
}

/* Botão transparente com borda — alternativo ao btn-green */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: white;
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-btn);
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  transition: background var(--transition), border-color var(--transition);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: white;
}


/* ==========================================================================
   5. NAVEGAÇÃO
   Barra fixa no topo com logo, links e CTA WhatsApp
   ========================================================================== */

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;             /* Fica acima de todos os outros elementos       */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 5%;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);   /* Efeito vidro fosco               */
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.08);
}

/* Wrapper do logo: contém apenas a imagem da logo */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

/*
 * Imagem da logo real da escola (img/logo-valsa.png).
 * Altura fixa de 56px para manter proporção na navbar.
 * transition suave ao passar o mouse.
 */
.nav-logo-img {
  height: 56px;
  width: auto;              /* Mantém proporção original da imagem           */
  display: block;
  transition: transform .2s ease, opacity .2s ease;
  /* Remove fundo branco da logo circular no contexto da nav branca */
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(26, 58, 124, 0.15);
}

.nav-logo:hover .nav-logo-img {
  transform: scale(1.06);
  opacity: 0.9;
}

/* Lista de links de navegação */
.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
}

.nav-links a {
  color: var(--dark);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color var(--transition);
}

.nav-links a:hover {
  color: var(--azul-medio);
}

/* Botão WhatsApp na navbar */
.btn-wa-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--verde-wa);
  color: white;
  text-decoration: none;
  border-radius: var(--radius-btn);
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
  transition: transform var(--transition), box-shadow var(--transition);
}

.btn-wa-nav:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.5);
}

.btn-wa-nav svg {
  width: 18px;
  height: 18px;
  fill: white;
}


/* ==========================================================================
   6. SEÇÃO HERO
   Tela cheia com foto de fundo, overlay e conteúdo central
   ========================================================================== */

.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* Imagem de fundo do hero — carregada via CSS para controle do overlay */
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    url('https://images.unsplash.com/photo-1511192336575-5a79af67a629?w=1600&q=80')
    center / cover no-repeat;
}

/* Overlay gradiente azul → roxo → rosa sobre a foto */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(26, 58, 124, 0.82)  0%,
    rgba(20, 10,  60, 0.75) 45%,
    rgba(180, 40, 100, 0.55) 100%
  );
}

/* Container das notas musicais flutuantes (populado pelo JS) */
.hero-notes {
  position: absolute;
  inset: 0;
  pointer-events: none;   /* Não interfere com cliques                      */
  overflow: hidden;
}

/* Cada nota individual — animação definida na seção de @keyframes */
.hero-notes span {
  position: absolute;
  color: rgba(255, 255, 255, 0.12);
  font-size: 48px;
  animation: floatNote linear infinite;
}

/* Conteúdo central do hero (acima dos layers de fundo) */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 20px;
}

/* Label pequeno acima do título ("Escola de Música & Arte") */
.hero-eyebrow {
  letter-spacing: .18em;
  font-size: 13px;
  font-weight: 600;
  color: var(--rosa-claro);
  margin-bottom: 20px;
  text-transform: uppercase;
  display: block;
}

/* Título principal do hero — usa a fonte Zoika carregada via @font-face.
   A variável --font-zoika tem Playfair Display como fallback caso o arquivo
   Zoika.ttf não seja encontrado (ex: pasta fonts/ ausente). */
.hero h1 {
  font-family: var(--font-zoika);
  font-size: clamp(52px, 8vw, 100px);
  font-weight: normal;      /* Zoika já tem peso visual forte por design     */
  line-height: 1;
  color: white;
  margin-bottom: 24px;
  letter-spacing: 0.02em;   /* Leve espaçamento entre letras favorece legibilidade em display */
}

/* "Henlui" em rosa — sem itálico para preservar o desenho original da Zoika */
.hero h1 span {
  color: var(--rosa-claro);
}

/* Parágrafo descritivo do hero */
.hero-desc {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.75;
  max-width: 580px;
  margin: 0 auto 40px;
}

/* Wrapper dos botões de ação */
.hero-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;          /* Quebra linha em telas pequenas               */
}

/* Seta de scroll animada na parte inferior do hero */
.scroll-arrow {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255, 255, 255, 0.5);
  font-size: 28px;
  animation: bob 2s ease-in-out infinite;
}


/* ==========================================================================
   7. SEÇÃO CURSOS
   Cards de categorias com foto, lista e link para WhatsApp
   ========================================================================== */

#cursos {
  padding: var(--section-padding);
  background: var(--branco);
}

/* Cabeçalho centralizado da seção */
.cursos-header {
  text-align: center;
  margin-bottom: 56px;
}

/* Grid principal — 3 colunas adaptáveis */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}

/* Grid secundário — categorias menores (linha 2) */
.cat-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin-top: 28px;
}

/* Card de categoria de instrumento */
.cat-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(26, 58, 124, 0.1);
  background: white;
  transition: transform .3s ease, box-shadow .3s ease;
}

.cat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(26, 58, 124, 0.18);
}

/* Área da imagem com sobreposição do título */
.cat-img {
  height: 200px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 20px;
}

/* Versão menor da área de imagem (linha 2 de cards) */
.cat-img--sm {
  height: 160px;
}

/* Foto do instrumento dentro do card */
.cat-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

/* Zoom suave na foto ao passar o mouse no card */
.cat-card:hover .cat-img img {
  transform: scale(1.06);
}

/* Gradiente escuro sobre a imagem para legibilidade do título */
.cat-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 60%);
}

/* Título da categoria sobre a imagem */
.cat-img-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-titulo);
  font-size: 22px;
  font-weight: 700;
  color: white;
}

/* Área de conteúdo abaixo da imagem */
.cat-body {
  padding: 24px;
}

/* Lista de cursos disponíveis na categoria */
.cat-list {
  list-style: none;
  margin-bottom: 20px;
}

.cat-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--dark);
  padding: 7px 0;
  border-bottom: 1px solid #f0f4f8;
}

.cat-list li:last-child {
  border-bottom: none;
}

/* Bolinha rosa antes de cada item da lista */
.cat-list li::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rosa);
  flex-shrink: 0;
}

/* Link "Saiba mais →" que abre o WhatsApp com mensagem específica */
.cat-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--azul-medio);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: gap var(--transition), color var(--transition);
}

.cat-link:hover {
  gap: 10px;
  color: var(--rosa);
}


/* ==========================================================================
   8. SEÇÃO SOBRE NÓS
   Fundo gradiente azul/roxo/rosa com texto + cards de diferenciais
   ========================================================================== */

#sobre {
  padding: var(--section-padding);
  background: linear-gradient(145deg, #0f2060 0%, #1a1060 40%, #7a1060 100%);
  position: relative;
  overflow: hidden;
}

/* Halo rosa decorativo no canto direito */
#sobre::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 80% at 100% 50%,
    rgba(232, 65, 122, 0.25) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* Layout de duas colunas: texto | cards */
.sobre-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Label acima do título da seção Sobre */
.sobre-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rosa-claro);
  margin-bottom: 14px;
  display: block;
}

/* Título da seção Sobre */
.sobre-title {
  font-family: var(--font-titulo);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 900;
  color: white;
  line-height: 1.1;
  margin-bottom: 24px;
}

/* "ganha vida" em rosa itálico */
.sobre-title span {
  color: var(--rosa-claro);
  font-style: italic;
}

/* Parágrafos de texto institucional */
.sobre-text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.8;
  margin-bottom: 14px;
}

/* Grid 2x2 dos cards de diferenciais */
.sobre-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Card individual de diferencial */
.sobre-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 24px 20px;
  transition: background .25s ease, transform .25s ease;
}

.sobre-card:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-3px);
}

/* Ícone SVG no topo do card de diferencial */
.sobre-card-icon {
  margin-bottom: 12px;
}

.sobre-card-icon svg {
  width: 32px;
  height: 32px;
  fill: var(--rosa-claro);
}

/* Título do diferencial */
.sobre-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: white;
  margin-bottom: 6px;
}

/* Descrição do diferencial */
.sobre-card p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
}


/* ==========================================================================
   9. SEÇÃO CONTATO
   Mapa + informações + card de agendamento
   ========================================================================== */

#contato {
  padding: var(--section-padding);
  background: var(--off);
}

/* Cabeçalho centralizado */
.contato-header {
  text-align: center;
  margin-bottom: 56px;
}

/* Subtítulo da seção contato */
.contato-sub {
  font-size: 16px;
  color: var(--cinza);
  line-height: 1.7;
  max-width: 540px;
  margin: 0 auto;
}

/* Grid: mapa à esquerda, informações à direita */
.contato-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* Container do mapa com posição relativa para o link de abertura */
.map-wrap {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(26, 58, 124, 0.15);
  height: 400px;
  position: relative;
}

/* Iframe do Google Maps ocupa 100% do container */
.map-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Botão "Abrir no Maps" flutuando sobre o mapa */
.map-open-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  background: white;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--azul);
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background var(--transition);
}

.map-open-link:hover {
  background: var(--off);
}

/* Coluna de informações de contato */
.contato-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Card de informação individual (endereço, telefone, horário) */
.info-card {
  background: white;
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 2px 16px rgba(26, 58, 124, 0.07);
}

/* Ícone circular colorido dentro do info-card */
.info-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* Variações de cor do ícone */
.info-icon--blue  { background: #dbeafe; }
.info-icon--pink  { background: var(--rosa-suave); }
.info-icon--gray  { background: #e5e7eb; }

/* Label e valor dentro do info-card */
.info-text h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--cinza);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}

.info-text p,
.info-text address {
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.5;
}

/* Link de telefone sem estilo */
.info-text a {
  color: var(--dark);
  text-decoration: none;
}

.info-text a:hover {
  color: var(--azul-medio);
  text-decoration: underline;
}

/* Card de agendamento com gradiente azul → rosa */
.agenda-card {
  background: linear-gradient(135deg, var(--azul-medio) 0%, var(--rosa) 100%);
  border-radius: var(--radius-card);
  padding: 32px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(36, 87, 181, 0.35);
}

.agenda-card h3 {
  font-family: var(--font-titulo);
  font-size: 22px;
  font-weight: 900;
  color: white;
  margin-bottom: 12px;
}

.agenda-card p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 24px;
  line-height: 1.6;
}

/* Botão WhatsApp dentro do card de agendamento */
.btn-wa-agenda {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: white;
  color: var(--azul);
  text-decoration: none;
  border-radius: var(--radius-btn);
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: transform var(--transition);
}

.btn-wa-agenda:hover {
  transform: translateY(-2px);
}

.btn-wa-agenda svg {
  width: 20px;
  height: 20px;
  fill: var(--verde-wa);
}


/* ==========================================================================
   10. RODAPÉ
   ========================================================================== */

footer {
  background: var(--azul);
  padding: 40px 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

/* Grupo esquerdo: logo + nome + tagline */
.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Logo real no rodapé — menor que na navbar */
.footer-logo-img {
  height: 64px;
  width: auto;
  display: block;
  border-radius: 50%;
  /* Sombra suave para destacar do fundo azul escuro */
  box-shadow: 0 2px 12px rgba(255, 255, 255, 0.15);
}

/* Nome da escola no rodapé */
.footer-logo-name {
  font-size: 20px;
  font-weight: 700;
  color: white;
  margin-bottom: 4px;
}

/* Segunda palavra em rosa */
.footer-logo-name span {
  color: var(--rosa-claro);
}

/* Tagline abaixo do nome */
.footer-tagline {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

/* Texto de copyright à direita */
.footer-right {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  text-align: right;
  line-height: 1.8;
}


/* ==========================================================================
   11. BOTÃO FLUTUANTE DO WHATSAPP
   Fixo no canto inferior direito, visível em todas as páginas
   ========================================================================== */

.wa-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;             /* Sempre acima de tudo                          */
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--verde-wa);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.55);
  animation: waPulse 2.5s ease-in-out infinite;
  transition: transform var(--transition);
}

.wa-float:hover {
  transform: scale(1.12);
  animation-play-state: paused;   /* Para a pulsação durante o hover         */
}

.wa-float svg {
  width: 30px;
  height: 30px;
  fill: white;
}


/* ==========================================================================
   12. ANIMAÇÕES — @keyframes
   ========================================================================== */

/* Nota musical sobe flutuando pela tela */
@keyframes floatNote {
  0%   { transform: translateY(110vh) rotate(0deg);   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; }
}

/* Seta de scroll sobe e desce suavemente */
@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0);   }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* Botão WhatsApp pulsa com brilho */
@keyframes waPulse {
  0%, 100% { box-shadow: 0 6px 24px rgba(37, 211, 102, 0.55); }
  50%       { box-shadow: 0 6px 44px rgba(37, 211, 102, 0.85); }
}

/* Elemento entra de baixo para cima (estado inicial — JS adiciona .visible) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}

/* Estado visível após o IntersectionObserver detectar o elemento na tela */
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================================================
   13. RESPONSIVIDADE — Media Queries
   Breakpoints: 1024px (tablet), 800px (tablet pequeno), 700px (mobile)
   ========================================================================== */

/* ── Tablet (max 1024px) ── */
@media (max-width: 1024px) {
  .sobre-inner {
    gap: 48px;
  }
}

/* ── Tablet pequeno (max 800px) ── */
@media (max-width: 800px) {
  /* Sobre: empilha as colunas verticalmente */
  .sobre-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ── Mobile (max 700px) ── */
@media (max-width: 700px) {

  /* Esconde os links de navegação (menu poderia ser implementado como hamburger) */
  .nav-links {
    display: none;
  }

  /* Cursos: coluna única */
  .cat-grid {
    grid-template-columns: 1fr;
  }

  /* Categorias menores: duas colunas */
  .cat-grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  /* Cards de diferenciais: coluna única */
  .sobre-cards {
    grid-template-columns: 1fr;
  }

  /* Contato: coluna única */
  .contato-grid {
    grid-template-columns: 1fr;
  }

  /* Rodapé: centralizado */
  footer {
    flex-direction: column;
    text-align: center;
  }

  .footer-right {
    text-align: center;
  }
}

/* ── Mobile pequeno (max 420px) ── */
@media (max-width: 420px) {
  .cat-grid-2 {
    grid-template-columns: 1fr;
  }
}