/* ==========================================================================
   1. Variáveis e Estilos Globais
   ========================================================================== */
   :root {
    --color-primary: #2c3e50;
    --color-secondary: #3498db;
    --color-accent: #e74c3c;
    --color-text-dark: #34495e;
    --color-text-light: #ecf0f1;
    --color-background: #f8f9fa;
    --font-family: 'Roboto', sans-serif;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    --spacing-xl: 64px;
    --border-radius: 8px;
    --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  }
  
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: var(--font-family); color: var(--color-text-dark); line-height: 1.7; background-color: var(--color-background); }
  .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-lg); }
  
  /* ==========================================================================
     2. Cabeçalho e Navegação
     ========================================================================== */
  .main-header { background-color: white; padding: var(--spacing-md) 0; box-shadow: var(--box-shadow); position: sticky; top: 0; z-index: 1000; }
  .main-header .container { display: flex; justify-content: space-between; align-items: center; }
  .logo img { height: 60px; display: block; }
  
  .menu-toggle { display: none; }
  .main-nav-list { list-style: none; display: flex; gap: var(--spacing-lg); align-items: center; }
  .main-nav-list a { text-decoration: none; color: var(--color-text-dark); font-weight: 500; padding: 8px 16px; transition: color 0.3s ease, background-color 0.3s ease; border-radius: var(--border-radius); }
  .main-nav-list a:hover { background-color: var(--color-secondary); color: var(--color-text-light); }
  
  .submenu { position: relative; }
  .submenu .submenu-itens { display: none; position: absolute; top: 110%; left: 0; background-color: white; box-shadow: var(--box-shadow); border-radius: var(--border-radius); z-index: 1001; padding: 8px 0; min-width: 200px; border-top: 3px solid var(--color-secondary); }
  .submenu:hover .submenu-itens { display: block; }
  .submenu-itens a { display: block; width: 100%; }
  
  /* ==========================================================================
     3. Estilos de Tamanho do Carrossel (SEM VISIBILIDADE)
     ========================================================================== */
  .swiper { width: 100%; margin: var(--spacing-lg) 0; border-radius: var(--border-radius); overflow: hidden; }
  .mobile-swiper { height: 50vh; max-height: 400px; }
  .desktop-swiper { height: 450px; }
  .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
  .swiper-pagination-bullet-active { background-color: var(--color-secondary); }
  .swiper-button-next, .swiper-button-prev { color: white; }
  
  /* ==========================================================================
     4. Conteúdo Principal e Cards
     ========================================================================== */
  section { padding: var(--spacing-xl) 0; }
  #inicio { padding-top: var(--spacing-lg); }
  h1 { font-size: 2.5rem; text-align: center; margin-bottom: var(--spacing-md); color: var(--color-primary); }
  h2 { font-size: 2.2rem; margin-bottom: var(--spacing-lg); border-bottom: 2px solid var(--color-secondary); padding-bottom: 10px; color: var(--color-primary); }
  h3 { font-size: 1.5rem; margin-bottom: var(--spacing-md); color: var(--color-primary); }
  #cursos-omega ul { list-style: none; padding-left: 0; margin-bottom: var(--spacing-lg); }
  #cursos-omega li { padding-left: 1.5em; position: relative; margin-bottom: 8px; }
  #cursos-omega li::before { content: '✔'; color: var(--color-secondary); position: absolute; left: 0; }
  .link-loja { display: inline-block; background-color: var(--color-accent); color: var(--color-text-light); padding: 12px 25px; border-radius: var(--border-radius); text-decoration: none; font-weight: bold; }
  
  .cards-informativos { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); margin-top: var(--spacing-xl); }
  .card { background-color: white; border-radius: var(--border-radius); text-align: center; box-shadow: var(--box-shadow); display: flex; flex-direction: column; padding: var(--spacing-md); }
  .card img { width: 96%; height: 160px; object-fit: cover; border-radius: var(--border-radius); margin-bottom: var(--spacing-md); }
  .card h3 { font-size: 1.2rem; }
  .card p { flex-grow: 1; margin-bottom: var(--spacing-md); }
  .card-link { display: inline-block; padding: 12px 25px; background-color: var(--color-secondary); color: var(--color-text-light); text-decoration: none; font-weight: bold; border-radius: var(--border-radius); margin-top: auto; transition: background-color 0.3s; }
  .card-link:hover { background-color: var(--color-accent); }
  
  /* ==========================================================================
     5. Rodapé e Botão Flutuante
     ========================================================================== */
  .main-footer { background-color: var(--color-primary); color: var(--color-text-light); padding: var(--spacing-xl) 0; text-align: center; }
  .main-footer address { font-style: normal; line-height: 1.8; margin-bottom: var(--spacing-md); }
  .main-footer a { color: var(--color-secondary); text-decoration: none; }
  .main-footer a:hover { text-decoration: underline; }
  .whatsapp-button { position: fixed; width: 60px; height: 60px; bottom: 30px; right: 30px; background-color: #25d366; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 1002; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; }
  .whatsapp-button:hover { transform: scale(1.1); }
  .whatsapp-button img { width: 32px; height: 32px; }
  
  /* ==========================================================================
     6. Responsividade (Menu e Layouts)
     ========================================================================== */
  @media (min-width: 768px) {
    .cards-informativos { grid-template-columns: repeat(3, 1fr); }
  }
  
  @media (max-width: 767px) {
    .container { padding: 0 var(--spacing-md); }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.8rem; }
  
    .menu-toggle { display: block; border: none; background: transparent; cursor: pointer; }
    .hamburger-line { display: block; width: 25px; height: 3px; background-color: var(--color-primary); margin: 5px 0; }
    
    .main-nav-list { display: none; }
    .main-nav-list.is-open {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 94px;
      left: 0;
      width: 100%;
      background-color: var(--color-primary);
      padding: var(--spacing-md) 0;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .main-nav-list.is-open a { color: var(--color-text-light); width: 100%; padding: var(--spacing-md); text-align: center; border-radius: 0; }
    .main-nav-list.is-open a:hover { background-color: var(--color-secondary); }
    
    .main-nav-list.is-open .submenu:hover .submenu-itens { display: none; }
    .main-nav-list.is-open .submenu .submenu-itens { display: block; position: static; box-shadow: none; background-color: rgba(0,0,0,0.2); border: none; padding: 0; margin-top: var(--spacing-sm); }
  }