/*
  index.css (arquivo principal / agregador de estilos)

  O que ele faz?
  - Ele NÃO precisa ter estilos próprios.
  - Ele serve para "juntar" (importar) outros arquivos CSS menores.
  - Assim seu projeto fica modular e mais fácil de organizar.

  Observação importante sobre @import:
  - O @import funciona, mas pode impactar performance em sites grandes,
    porque o navegador precisa buscar arquivos em sequência.
  - Em projetos profissionais, muitas vezes se usa:
    a) um bundler (Vite/Webpack) para juntar tudo em 1 arquivo final, ou
    b) um único CSS com seções bem organizadas.
  - Para estudos e projetos pequenos/médios, está ótimo.
*/

/* Importa estilos globais:
   Normalmente inclui:
   - reset/normalize (padronizar estilos entre navegadores)
   - variáveis CSS (:root { --cor: ... })
   - fontes padrão, tamanhos base, body, links, etc.
*/
@import url(global.css);

/* Importa estilos do cabeçalho (header/topo):
   Deve estilizar, por exemplo:
   - <header class="top">
   - posicionamento do logo e do ícone do carrinho
   - badge do <span> com número do carrinho
*/
@import url(header.css);

/* Importa estilos da seção hero (destaque inicial):
   Deve estilizar:
   - .hero
   - h1, animação/troca das palavras (radical/divertida/saudável)
   - botões .button.buy e .button.play
   - imagens sobrepostas (ellipse, patins, estrelas)
*/
@import url(hero.css);

/* Importa estilos do banner rolando:
   Deve estilizar:
   - .banner
   - .scroller, .rolling
   - overflow hidden e animação de rolagem contínua
   - bg-gradient-animate (gradiente animado)
*/
@import url(banner.css);

/* Importa estilos da galeria:
   Deve estilizar:
   - .gallery
   - grid/flex das <figure>
   - figcaption (avatar + @username)
   - animações com [data-delay] (por exemplo, delay no hover ou na entrada)
*/
@import url(gallery.css);

/* Importa estilos do rodapé:
   Deve estilizar:
   - footer
   - .logo
   - nav links
   - .social-links e ícones
*/
@import url(footer.css);