/* DOCUMENTAÇÃO DO CSS */
/* 1. Reset Básico: Removemos margens e paddings padrão dos navegadores.
   2. Variáveis de Cor e Fonte: Centralizamos nossas escolhas de design para fácil manutenção.
   3. Estilos Globais (body): Definimos o estilo base para todo o site.
   4. Estilos do Cabeçalho e Navegação: Alinhamos a logo e o menu.
   5. Estilo da Seção Hero: Criamos o banner principal com o título e o botão.
   6. Estilo do Rodapé: Formatamos a área final da página.
*/

/* 1. Reset Básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. Variáveis de Cor e Fonte (Nossa Paleta de Design) */
:root {
    --cor-primaria: #0099FF; /* Azul Vibrante */
    --cor-fundo: #111111;    /* Preto/Cinza Escuro */
    --cor-texto: #FFFFFF;     /* Branco */

    --fonte-titulos: 'Bebas Neue', sans-serif;
    --fonte-texto: 'Roboto', sans-serif;
}

/* 3. Estilos Globais */
body {
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    font-family: var(--fonte-texto);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 4. Estilos do Cabeçalho e Navegação */
.main-header {
    background-color: #000;
    padding: 15px 0px;
    border-bottom: 3px solid var(--cor-primaria);
    width: 100%;
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* NOVAS REGRAS PARA OCUPAR A TELA TODA */
    max-width: none;     /* Remove o limite de largura do container */
    padding: 0 30px;     /* Adiciona um pequeno respiro nas laterais da tela */
}

.main-nav ul {
    list-style: none;
    display: flex;
}

.main-nav ul li {
    margin-left: 25px;
}

.main-nav a {
    color: var(--cor-texto);
    text-decoration: none;
    font-weight: 700;
    font-size: 17px;
    transition: color 0.3s ease;
}

.main-nav a:hover {
    color: var(--cor-primaria);
}

/* 5. Estilo da Seção Hero */
.hero-section {
    /* Futuramente, aqui podemos colocar uma imagem ou vídeo de fundo */
    background-color: #1a1a1a; 
    text-align: center;
    padding: 100px 0;
}

.hero-section h1 {
    font-family: var(--fonte-titulos);
    font-size: 5rem; /* 80px */
    color: var(--cor-primaria);
    margin-bottom: 10px;
}

.hero-section p {
    font-size: 1.25rem; /* 20px */
    margin-bottom: 30px;
}

.cta-button {
    display: inline-block;
    background-color: var(--cor-primaria);
    color: var(--cor-texto);
    padding: 15px 30px;
    font-family: var(--fonte-titulos);
    font-size: 1.5rem; /* 24px */
    text-decoration: none;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

.cta-button:hover {
    transform: scale(1.05); /* Efeito de crescimento leve */
}

/* 6. Estilo do Rodapé */
.main-footer {
    background-color: #000;
    text-align: center;
    padding: 20px 0;
    margin-top: 50px;
    border-top: 1px solid #333;
}

/* ====================================================== */
/* COLE O CÓDIGO ABAIXO NO FINAL DO SEU ARQUIVO style.css   */
/* ====================================================== */

/* 7. Estilos Gerais para Seções */
.section-title {
    font-family: var(--fonte-titulos);
    font-size: 3rem; /* 48px */
    text-align: center;
    margin-bottom: 40px;
    color: var(--cor-primaria);
}

/* 8. Estilos da Seção "Próximos Jogos" */
.games-section {
    padding: 60px 0;
}

.matches-container {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Espaçamento entre os cards */
}

.match-card {
    background-color: #1c1c1c;
    border-radius: 10px;
    padding: 20px;
    width: 32%;
    text-align: center;
    border: 1px solid #333;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.match-card:hover {
    transform: translateY(-5px);
    border-color: var(--cor-primaria);
}

.match-info {
    font-size: 0.9rem;
    color: #aaa;
    display: block;
    margin-bottom: 15px;
}

.match-details {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 15px;
}

.team {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team img {
    width: 60px; /* Tamanho ajustado dos escudos */
    height: 60px;
    margin-bottom: 10px;
}

.team span {
    font-weight: 700;
}

.versus {
    font-family: var(--fonte-titulos);
    font-size: 2rem;
    color: var(--cor-primaria);
}

.match-location {
    font-size: 0.9rem;
    font-style: italic;
}

/* 9. Estilos da Seção "Últimas Notícias" */
.news-section {
    padding: 60px 0;
    background-color: #1c1c1c; /* Fundo levemente diferente para destacar */
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Cria um grid de 3 colunas */
    gap: 30px; /* Espaçamento entre as notícias */
}

.news-card {
    background-color: var(--cor-fundo);
    border-radius: 10px;
    overflow: hidden; /* Garante que a imagem não saia das bordas arredondadas */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.news-card:hover {
    transform: translateY(-5px);
}

.news-card img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* Faz a imagem cobrir o espaço sem distorcer */
}

.news-content {
    padding: 20px;
    flex-grow: 1; /* Faz esta área crescer para ocupar o espaço disponível */
    display: flex;
    flex-direction: column;
}

.news-content h3 {
    font-family: var(--fonte-titulos);
    font-size: 1.5rem; /* 24px */
    margin-bottom: 10px;
}

.news-content p {
    margin-bottom: 20px;
    flex-grow: 1; /* Empurra o botão "Leia Mais" para baixo */
}

.news-content a {
    color: var(--cor-primaria);
    text-decoration: none;
    font-weight: 700;
    align-self: flex-start; /* Alinha o link à esquerda */
}

.news-content a:hover {
    text-decoration: underline;
}

/* ====================================================== */
/* COLE O CÓDIGO ABAIXO NO FINAL DO SEU ARQUIVO style.css   */
/* ====================================================== */

/* 10. Estilos da Seção "Chamada para Peneiras" */
.tryouts-section {
    background-color: var(--cor-primaria);
    padding: 60px 0;
    text-align: center;
}

.tryouts-section h2 {
    font-family: var(--fonte-titulos);
    font-size: 3.5rem;
    color: var(--cor-texto);
    margin-bottom: 15px;
}

.tryouts-section p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Reutilizando e ajustando o botão de CTA */
.tryouts-section .cta-button {
    background-color: var(--cor-texto);
    color: var(--cor-fundo);
}

.tryouts-section .cta-button:hover {
    background-color: #e0e0e0;
    transform: scale(1.05);
}

/* ====================================================== */
/* --- ESTILOS DOS PATROCINADORES (VERSÃO ESTÁTICA FINAL) --- */
/* ====================================================== */

.sponsors-section {
    padding: 60px 0;
}

/* Vamos manter o nome da classe por consistência */
.sponsors-carousel {
    display: flex;
    flex-wrap: wrap;         /* Permite que os itens quebrem para a próxima linha */
    justify-content: center; /* Centraliza os logos horizontalmente */
    align-items: center;
    gap: 40px;               /* Espaço entre os logos */
}

.sponsor-logo {
    width: 150px;
    flex-shrink: 0; 
}

.sponsor-logo img {
    width: 100%;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.sponsor-logo img:hover {
    filter: grayscale(0%);
}

/* ====================================================== */
/* --- ESTILOS PÁGINA "O CLUBE" ---                       */
/* ====================================================== */

/* 12. Cabeçalho Padrão das Páginas Internas */
.page-header {
    background-color: #1c1c1c;
    padding: 40px 0;
    text-align: center;
    border-bottom: 3px solid var(--cor-primaria);
}

.page-header h1 {
    font-family: var(--fonte-titulos);
    font-size: 4rem;
    color: var(--cor-texto);
}

/* 13. Seção "Nossa História" */
.about-section {
    padding: 60px 0;
}



.about-section img {
    max-width: 45%;
    border-radius: 10px;
}

.about-section .text-content h3 {
    font-family: var(--fonte-titulos);
    font-size: 2.5rem;
    color: var(--cor-primaria);
    margin-bottom: 20px;
}

.about-section .text-content p {
    margin-bottom: 15px;
    line-height: 1.8;
}

/* 14. Seção "Diretoria" e "Profissionais" */
.staff-section {
    padding: 60px 0;
}

/* Fundo diferente para a segunda seção de staff para criar contraste */
.professional-staff {
    background-color: #1c1c1c;
}

.staff-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.staff-card {
    background-color: var(--cor-fundo);
    text-align: center;
    padding-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #333;
}

.staff-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    margin-bottom: 15px;
    filter: grayscale(1);
    transition: filter 0.3s ease;
}

.staff-card:hover img {
    filter: grayscale(0);
}

.staff-card h4 {
    font-family: var(--fonte-titulos);
    font-size: 1.8rem;
    color: var(--cor-primaria);
    margin-bottom: 5px;
}

.staff-card p {
    font-size: 1rem;
    color: #ccc;
}

/* ====================================================== */
/* --- Continuação Estilos Página "O Clube" ---           */
/* ====================================================== */

/* 15. Seção "Projetos Sociais" */
.social-projects-section {
    padding: 60px 0;
    background-color: #1c1c1c;
}


/* 16. Seção "Contato e Localização" */
.contact-section {
    padding: 60px 0;
}

.contact-wrapper {
    display: flex;
    gap: 50px;
}

.contact-info, .contact-map {
    width: 50%;
}

.contact-info h3 {
    font-family: var(--fonte-titulos);
    font-size: 2.5rem;
    color: var(--cor-primaria);
    margin-bottom: 15px;
}

.contact-info p {
    margin-bottom: 30px;
}

.contact-details {
    list-style: none;
    margin-bottom: 30px;
}

.contact-details li {
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.contact-details i {
    color: var(--cor-primaria);
    margin-right: 15px;
    width: 20px; /* Alinha os ícones */
    text-align: center;
}

.contact-map iframe {
    border-radius: 10px;
    height: 100%;
    min-height: 450px;
}

/* ====================================================== */
/* --- CORREÇÃO E MELHORIA DO LAYOUT DE CONTEÚDO ---      */
/* ====================================================== */

/* 13. (CORRIGIDO) Layout Padrão de Conteúdo (História, Projetos, etc.) */
.content-wrapper {
    display: flex;
    align-items: center; /* Alinha verticalmente no centro */
    gap: 50px; /* Espaço entre texto e imagem */
}

.content-wrapper img,
.content-wrapper .text-content {
    width: 50%; /* Cada um ocupa metade do espaço */
    flex-shrink: 0;
}

.content-wrapper.reversed {
    flex-direction: row-reverse; /* Inverte a ordem de imagem e texto */
}

.content-wrapper .text-content h3 {
    font-family: var(--fonte-titulos);
    font-size: 2.5rem;
    color: var(--cor-primaria);
    margin-bottom: 20px;
}

.content-wrapper .text-content p {
    margin-bottom: 15px;
    line-height: 1.8;
}


/* 15. (MELHORADO) Seção "Projetos Sociais" */
.social-projects-section {
    padding: 60px 0;
    background-color: var(--cor-fundo); /* Mudado para o fundo principal */
}

/* Adicionando um estilo de "card" para a seção de projetos */
.social-projects-section .content-wrapper {
    background-color: #1c1c1c; /* Cor de fundo do card */
    padding: 40px;
    border-radius: 10px;
    border: 1px solid #333;
    overflow: hidden; /* <<---- ADICIONE ESTA LINHA */
}

/* ====================================================== */
/* --- ESTILOS PÁGINA "FUTEBOL" ---                       */
/* ====================================================== */

/* 17. Seção Time Profissional (Galeria de Jogadores) */
.team-section {
    padding: 60px 0;
}

.player-gallery {
    display: grid;
    /* Cria um grid responsivo: 4 colunas em telas grandes, 2 em tablets, 1 em celular */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.player-card {
    position: relative; /* Essencial para o posicionamento do overlay */
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.player-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* Remove espaço extra embaixo da imagem */
    transition: transform 0.4s ease;
}

.player-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    color: var(--cor-texto);
    padding: 40px 20px 20px 20px;
    transform: translateY(30%); /* Esconde parcialmente a informação */
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.player-card:hover .player-info {
    transform: translateY(0);
    opacity: 1;
}

.player-card:hover img {
    transform: scale(1.05); /* Efeito de zoom na imagem */
}

.player-info h4 {
    font-family: var(--fonte-titulos);
    font-size: 2rem;
    color: var(--cor-primaria);
    margin-bottom: 5px;
}

.player-info p {
    font-size: 1.1rem;
}

/* 18. Seção Categorias de Base */
.academy-section {
    padding: 60px 0;
    background-color: #1c1c1c;
}

.philosophy-text {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto;
    font-size: 1.1rem;
    line-height: 1.7;
}

.categories-wrapper {
    display: flex;
    justify-content: center;
    gap: 100px;
}

.category-list h3 {
    font-family: var(--fonte-titulos);
    font-size: 2.2rem;
    color: var(--cor-primaria);
    margin-bottom: 20px;
    border-bottom: 2px solid var(--cor-primaria);
    padding-bottom: 10px;
}

.category-list h3 i {
    margin-right: 10px;
}

.category-list ul {
    list-style: none;
}

.category-list ul li {
    font-size: 1.2rem;
    padding: 10px 0;
    border-bottom: 1px solid #333;
}

/* ====================================================== */
/* --- Continuação Estilos Página "Futebol" ---           */
/* ====================================================== */

/* 19. Sistema de Abas e Tabelas */
.team-stats-container {
    margin-top: 60px; /* Espaço depois da galeria de jogadores */
}

.tabs-nav {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    gap: 10px;
}

.tab-link {
    font-family: var(--fonte-titulos);
    font-size: 1.5rem;
    padding: 10px 30px;
    border: 2px solid #555;
    background-color: transparent;
    color: var(--cor-texto);
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.tab-link:hover {
    background-color: #333;
    border-color: var(--cor-primaria);
}

.tab-link.active {
    background-color: var(--cor-primaria);
    color: var(--cor-texto);
    border-color: var(--cor-primaria);
}

.tab-pane {
    display: none; /* Esconde todas as abas por padrão */
}

.tab-pane.active {
    display: block; /* Mostra apenas a aba ativa */
}

/* ====================================================== */
/* SUBSTITUA O CÓDIGO ANTIGO DA TABELA POR ESTE BLOCO NOVO */
/* ====================================================== */

/* Estilos Gerais da Tabela (CORRIGIDO) */
.stats-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #1c1c1c;
}

.stats-table th, .stats-table td {
    padding: 15px;
    text-align: center; /* Centraliza todo o texto por padrão */
    border-bottom: 1px solid #333;
    /* Evita que textos longos quebrem a linha e desalinhem a tabela */
    white-space: nowrap; 
}

.stats-table th {
    font-family: var(--fonte-titulos);
    font-size: 1.2rem;
    color: var(--cor-primaria);
}

.stats-table tbody tr:hover {
    background-color: #2a2a2a;
}

/* ======================================================================= */
/* SUBSTITUA O BLOCO DE ESTILOS ANTIGO DA TABELA DE RESULTADOS POR ESTE NOVO */
/* ======================================================================= */

/* Estilos Específicos da Tabela de Resultados (VERSÃO FINAL CORRIGIDA) */
.team-cell {
    /* A célula em si não tem mais 'display: flex'. Ela se comporta como uma célula de tabela normal. */
    font-weight: 700;
}

/* A DIV INTERNA é quem recebe o alinhamento flexível */
.cell-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.team-home .cell-content {
    justify-content: flex-end; /* Alinha o time da casa à direita */
}

.team-away .cell-content {
    justify-content: flex-start; /* Alinha o time visitante à esquerda */
}

.team-cell img {
    width: 25px;
    height: 25px;
    flex-shrink: 0; /* Impede que a imagem encolha */
}

.score-cell {
    font-family: var(--fonte-titulos);
    font-size: 1.5rem;
    width: 80px;
}

/* Estilos Específicos da Tabela de Estatísticas */
.simple-stats td:first-child {
    font-weight: 700;
    text-align: left;
}
.simple-stats td:last-child {
    font-family: var(--fonte-titulos);
    font-size: 1.5rem;
    text-align: right;
}

/* ====================================================== */
/* --- ESTILOS PÁGINA "INSCRIÇÕES" ---                    */
/* ====================================================== */

/* 20. Seção da Página de Inscrições */
.tryouts-page-section {
    padding: 60px 0;
}

/* ====================================================== */
/* --- ESTILOS PÁGINA FORMULÁRIO DE INSCRIÇÃO ---         */
/* ====================================================== */

.form-page-section {
    padding: 60px 0;
}

.registration-form {
    max-width: 800px;
    margin: 0 auto;
    background-color: #1c1c1c;
    padding: 40px;
    border-radius: 10px;
    border: 1px solid #333;
}

.category-summary {
    background-color: rgba(0, 153, 255, 0.1);
    border: 1px solid var(--cor-primaria);
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 40px;
    text-align: center;
    font-size: 1.1rem;
}

.registration-form fieldset {
    border: none;
    margin-bottom: 30px;
    padding: 0;
}

.registration-form legend {
    font-family: var(--fonte-titulos);
    font-size: 2rem;
    color: var(--cor-primaria);
    margin-bottom: 20px;
    width: 100%;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select {
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #555;
    background-color: #333;
    color: var(--cor-texto);
    font-family: var(--fonte-texto);
    font-size: 1rem;
}

.form-group-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.form-group-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 12px;
}

.form-group-checkbox a {
    color: var(--cor-primaria);
    text-decoration: none;
}
.form-group-checkbox a:hover {
    text-decoration: underline;
}

.registration-form .cta-button {
    width: 100%;
    font-size: 1.8rem;
}

/* ====================================================== */
/* --- ESTILOS PÁGINA NOTÍCIAS ---                        */
/* ====================================================== */

.news-page-section {
    padding: 60px 0;
}

.posts-grid {
    display: grid;
    /* Em telas grandes, 2 colunas. Em telas menores, 1 coluna. */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}

.post-card {
    background-color: #1c1c1c;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #333;
    transition: transform 0.3s ease;
}

.post-card:hover {
    transform: translateY(-5px);
}

.post-image-link img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.post-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Faz este container crescer e ocupar o espaço */
}

.post-meta {
    font-size: 0.9rem;
    color: #aaa;
    margin-bottom: 10px;
}

.post-content h2 {
    font-family: var(--fonte-titulos);
    font-size: 2rem;
    margin-bottom: 15px;
}

.post-title-link {
    color: var(--cor-texto);
    text-decoration: none;
    transition: color 0.3s ease;
}

.post-title-link:hover {
    color: var(--cor-primaria);
}

.post-excerpt {
    margin-bottom: 20px;
    flex-grow: 1; /* Empurra o link "Leia Mais" para baixo */
}

.read-more-link {
    color: var(--cor-primaria);
    text-decoration: none;
    font-weight: 700;
    align-self: flex-start; /* Alinha o link à esquerda */
}

.read-more-link:hover {
    text-decoration: underline;
}

/* ====================================================== */
/* --- ESTILOS PÁGINA POST INDIVIDUAL ---                 */
/* ====================================================== */

.post-page-section {
    padding: 60px 0;
}

.single-post {
    /* Define uma largura máxima para o conteúdo e centraliza na página */
    max-width: 800px;
    margin: 0 auto;
}

.post-full-header {
    margin-bottom: 30px;
    text-align: center;
}

.post-full-meta {
    color: #aaa;
    margin-bottom: 10px;
}

.post-full-title {
    font-family: var(--fonte-titulos);
    font-size: 4rem;
    line-height: 1.2;
    color: var(--cor-primaria);
}

.post-full-image {
    margin: 0 0 40px 0;
}

.post-full-image img {
    width: 100%;
    border-radius: 10px;
}

.post-full-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 25px;
}

.post-full-content h2 {
    font-family: var(--fonte-titulos);
    font-size: 2.5rem;
    color: var(--cor-primaria);
    margin: 40px 0 20px 0;
}

.post-full-content blockquote {
    border-left: 4px solid var(--cor-primaria);
    padding-left: 25px;
    margin: 40px 0;
    font-style: italic;
    font-size: 1.2rem;
    color: #ccc;
}
.post-full-content blockquote cite {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-weight: 700;
    font-size: 1rem;
}

.back-to-news-link {
    display: inline-block;
    margin-top: 40px;
    color: var(--cor-primaria);
    text-decoration: none;
    font-weight: 700;
}

.back-to-news-link:hover {
    text-decoration: underline;
}

/* ====================================================== */
/* --- ESTILOS PÁGINA AGENDA E EVENTOS ---                */
/* ====================================================== */

.agenda-page-section {
    padding: 60px 0;
}

.agenda-list {
    max-width: 900px;
    margin: 0 auto;
}

.month-title {
    font-family: var(--fonte-titulos);
    font-size: 2.5rem;
    color: var(--cor-primaria);
    margin: 40px 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #333;
}

.event-item {
    display: flex;
    align-items: center;
    background-color: #1c1c1c;
    border: 1px solid #333;
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 20px;
}

/* Estilo para eventos futuros */
.future-event {
    border-left: 5px solid var(--cor-primaria);
}

/* Estilo para eventos passados */
.past-event {
    opacity: 0.7; /* Deixa o item um pouco mais 'apagado' */
}

.event-date {
    text-align: center;
    padding-right: 20px;
    margin-right: 20px;
    border-right: 1px solid #444;
}

.event-date .day-number {
    display: block;
    font-family: var(--fonte-titulos);
    font-size: 3rem;
    color: var(--cor-texto);
}

.event-date .day-of-week {
    font-size: 1rem;
    color: #ccc;
}

.event-details {
    flex-grow: 1; /* Faz esta área ocupar o máximo de espaço */
}

.match-schedule, .match-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.event-details .team {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 700;
    font-size: 1.2rem;
}
.event-details .team img {
    width: 35px;
    height: 35px;
}

.time, .score {
    font-family: var(--fonte-titulos);
    font-size: 2.2rem;
    color: var(--cor-primaria);
    padding: 0 20px;
}

.event-meta {
    text-align: right;
    font-size: 0.9rem;
    color: #aaa;
    min-width: 200px; /* Largura mínima para alinhar */
}

.event-meta p {
    margin: 0;
}

.event-meta i {
    margin-right: 5px;
}

/* ====================================================== */
/* --- ESTILOS PÁGINA PORTAL DA TRANSPARÊNCIA ---         */
/* ====================================================== */

.transparency-page-section {
    padding: 60px 0;
}

.transparency-page-section .container {
    max-width: 900px; /* Layout mais contido para leitura */
}

.intro-text {
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 60px;
    color: #ccc;
}

.section-title-clean {
    font-family: var(--fonte-titulos);
    font-size: 2.5rem;
    border-bottom: 2px solid #333;
    padding-bottom: 15px;
    margin-bottom: 30px;
}

/* Lista de Documentos */
.document-list {
    list-style: none;
}

.document-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #333;
}

.doc-info {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 700;
}

.doc-info i {
    font-size: 1.8rem;
    color: var(--cor-primaria);
}

.download-button {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--cor-primaria);
    color: var(--cor-primaria);
    text-decoration: none;
    border-radius: 5px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.download-button:hover {
    background-color: var(--cor-primaria);
    color: var(--cor-texto);
}

/* Seção de Parceiros */
.partners-section {
    margin-top: 60px;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.partner-card {
    background-color: #1c1c1c;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 25px;
    text-align: center;
}

.partner-card img {
    max-width: 100%;
    height: 80px;
    object-fit: contain;
    margin-bottom: 20px;
    filter: brightness(0.8) grayscale(1);
    transition: filter 0.3s ease;
}

.partner-card:hover img {
    filter: brightness(1) grayscale(0);
}

.partner-card h4 {
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: var(--cor-texto);
}

.partner-card p {
    font-size: 0.9rem;
    color: #aaa;
}

/* ====================================================== */
/* --- ESTILOS PÁGINA GALERIA ---                         */
/* ====================================================== */
.gallery-page-section {
    padding: 60px 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
    aspect-ratio: 1 / 1; /* Força os itens a serem quadrados */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.video-item {
    aspect-ratio: 16 / 9; /* Proporção padrão de vídeos */
}

/* ESTILOS DO LIGHTBOX (MODAL) */
.lightbox {
    display: none; /* Escondido por padrão */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    /* Adicionado display: none no JS, mas mantemos aqui por segurança */
    display: none; 
}

.lightbox-content {
    max-width: 90%;
    max-height: 80%;
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.lightbox-close:hover {
    color: #bbb;
}

/* Regra para esconder o botão hambúrguer no desktop */
.hamburger-menu {
    display: none;
}

.radio-page-section .container {
    text-align: center;
    padding-top: 40px;
}
.radio-image img {
    max-width: 400px;
    width: 100%;
    border-radius: 10px;
    margin-bottom: 40px;
}
.radio-link .cta-button {
    font-size: 2rem;
    padding: 20px 40px;
}

/* Estilos para os links de redes sociais no rodapé */
.social-links {
    margin-bottom: 15px;
}

.social-links a {
    color: var(--cor-texto);
    text-decoration: none;
    font-size: 1.5rem; /* Tamanho do ícone */
    margin: 0 10px;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: var(--cor-primaria);
}

/* Estilos para a galeria de uniformes */
.uniform-gallery-section {
    padding: 60px 0;
}
.uniform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.uniform-card {
    background-color: #1c1c1c;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
}
.uniform-image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.uniform-info {
    padding: 20px;
}
.uniform-info h3 {
    font-family: var(--fonte-titulos);
    font-size: 2rem;
    color: var(--cor-primaria);
}
.uniform-info p {
    color: #ccc;
}

/* Estilos para o Carrossel de Notícias */
.featured-news-carousel {
    padding: 40px 0;
}
.swiper {
    width: 100%;
    height: auto;
    padding: 10px;
}
.swiper-slide {
    height: auto; /* Garante que a altura se ajuste ao card */
    display: flex;
}
.swiper-slide .post-card {
    width: 100%; /* Faz o card ocupar todo o espaço do slide */
}
/* Estilo dos botões de navegação */
.swiper-button-next, .swiper-button-prev {
    color: var(--cor-primaria);
}

/* Estilos para a Loja */
.shop-section {
    padding: 60px 0;
}
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.product-card {
    background-color: #1c1c1c;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.product-image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.product-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.product-info h3 {
    font-family: var(--fonte-titulos);
    font-size: 1.8rem;
    color: var(--cor-texto);
}
.product-description {
    color: #ccc;
    flex-grow: 1;
    margin: 10px 0 20px 0;
}
.product-price {
    font-family: var(--fonte-titulos);
    font-size: 2.2rem;
    color: var(--cor-primaria);
    margin-bottom: 20px;
}

/* Estilos para a Página de Doação */
.donation-section .container { max-width: 800px; }
.donation-cause { text-align: center; margin-bottom: 50px; }
.donation-cause img { width: 100%; max-width: 500px; border-radius: 10px; margin-bottom: 20px; }
.donation-cause h2 { font-family: var(--fonte-titulos); font-size: 2.5rem; color: var(--cor-primaria); }
.donation-form-wrapper { background-color: #1c1c1c; padding: 30px; border-radius: 10px; text-align: center;}
.donation-amounts { display: flex; justify-content: center; gap: 15px; margin-bottom: 25px;}
.donation-amount-btn { background: #333; border: 1px solid #555; color: white; padding: 15px 25px; cursor: pointer; border-radius: 5px; font-size: 1.2rem; font-weight: 700;}
.donation-amount-btn:hover { background-color: var(--cor-primaria); }
.custom-amount-wrapper { margin-bottom: 30px; }
.custom-amount-wrapper label { margin-bottom: 10px; display: block; }
.custom-amount-wrapper input { padding: 10px; font-size: 1.2rem; width: 150px; text-align: center; background-color: #333; border: 1px solid #555; color: white; border-radius: 5px;}
.donation-form-wrapper .cta-button { width: 100%; }


/* Estilos para a Página de Campanhas */
.campaign-section { padding: 60px 0; }
.campaign-grid { display: grid; grid-template-columns: 1fr; gap: 40px; max-width: 800px; margin: 0 auto; }
.campaign-card { background-color: #1c1c1c; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.campaign-image img { width: 100%; height: 400px; object-fit: cover; }
.campaign-content { padding: 25px; }
.campaign-content h3 { font-family: var(--fonte-titulos); font-size: 2.2rem; color: var(--cor-primaria); }
.campaign-content h4 { font-size: 1.2rem; color: #ccc; margin-top: -5px; margin-bottom: 20px; }
.campaign-content p { margin-bottom: 25px; }
.progress-bar-container { background-color: #333; border-radius: 10px; height: 15px; width: 100%; overflow: hidden; margin-bottom: 5px;}
.progress-bar { background-color: var(--cor-primaria); height: 100%; border-radius: 10px; }
.progress-info { display: flex; justify-content: space-between; font-size: 0.9rem; font-weight: 700; margin-bottom: 25px; }
.campaign-content .cta-button { width: 100%; text-align: center; }

/* Estilos para os botões da Hero Section */
.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Garante que os botões quebrem a linha em telas muito pequenas */
}

/* Estilo para o botão secundário (vazado) */
.cta-button-secondary {
    background-color: transparent;
    color: var(--cor-primaria);
    border: 2px solid var(--cor-primaria);
}

.cta-button-secondary:hover {
    background-color: var(--cor-primaria);
    color: var(--cor-texto);
}

/* Estilos para os Cards de Álbum */
.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.album-card {
    display: block;
    text-decoration: none;
    background-color: #1c1c1c;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 4 / 3;
    transition: transform 0.3s ease;
}
.album-card:hover {
    transform: translateY(-5px);
}
.album-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.album-card .album-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 20px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    color: white;
}
.album-card h3 {
    font-family: var(--fonte-titulos);
    font-size: 1.8rem;
    margin: 0;
}
.album-card span {
    font-size: 0.9rem;
    font-weight: 700;
    color: #ccc;
}

/* Estilos para a legenda na página de detalhe do álbum */
.gallery-item-with-caption {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gallery-caption {
    color: #ccc;
    font-size: 0.9rem;
    text-align: center;
}

/* Estilos para o visualizador de PDF */
.document-list-viewer {
    list-style: none;
    margin-bottom: 30px;
}
.document-list-viewer li {
    padding: 15px 0;
    border-bottom: 1px solid #333;
}
.document-list-viewer a {
    text-decoration: none;
    color: var(--cor-texto);
    font-weight: 700;
    cursor: pointer;
}
.document-list-viewer a:hover {
    color: var(--cor-primaria);
}
.pdf-viewer {
    border: 1px solid #444;
    border-radius: 5px;
}

/* Estilos para o layout de opções de inscrição */
.inscription-options-wrapper {
    display: flex;
    gap: 40px;
}

.option-column {
    width: 50%;
    background-color: #1c1c1c;
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #333;
}

/* Centraliza o conteúdo da coluna EscFut na página de inscrição da escolinha */
.escfut-content {
    display: flex;
    flex-direction: column; /* Empilha a imagem e o botão verticalmente */
    align-items: center;   /* Centraliza tudo horizontalmente */
}

/* ====================================================== */
/* --- ESTILOS PARA OS PILARES (HERO SECTION) ---         */
/* ====================================================== */

.hero-pillars {
    display: grid;
    /* Cria 4 colunas em telas grandes */
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 50px; /* Espaço abaixo do parágrafo */
}

.pillar-card {
    background-color: rgba(255, 255, 255, 0.05); /* Fundo sutil */
    border: 1px solid #333;
    padding: 25px 20px;
    border-radius: 10px;
    text-align: center;
    backdrop-filter: blur(5px); /* Efeito de vidro (opcional) */
}

.pillar-card i {
    font-size: 2.5rem; /* Tamanho do ícone */
    color: var(--cor-primaria); /* Cor azul */
    margin-bottom: 15px;
}

.pillar-card h3 {
    font-family: var(--fonte-titulos);
    font-size: 1.5rem;
    color: var(--cor-texto);
}

/* Estilos para a nova descrição do documento de transparência */
.doc-info {
    align-items: flex-start; /* Alinha no topo se a descrição tiver várias linhas */
}

.doc-text {
    display: flex;
    flex-direction: column; /* Faz o título e a descrição ficarem um em cima do outro */
}

.document-description {
    font-size: 0.9rem;
    color: #aaa;
    margin-top: 5px; /* Pequeno espaço entre o título e a descrição */
}

.document-list li {
    flex-direction: column; /* Empilha os itens verticalmente */
    align-items: center;    /* Centraliza os itens no card */
    gap: 15px;
}

.document-list .doc-info {
    flex-direction: column; /* Empilha a imagem/ícone e o texto */
    align-items: center;
    text-align: center;
}

/* Remove a margem desnecessária da imagem no mobile */
.document-list .doc-info img {
    margin-right: 0;
    margin-bottom: 10px;
}

/* ====================================================== */
/* --- ESTILOS PARA A SEÇÃO DE MÍDIA DAS ESCOLINHAS ---   */
/* ====================================================== */

.school-media-section {
    padding: 60px 0;
    /* Você pode mudar a cor se quiser alternar com as outras seções */
    /* background-color: #1c1c1c; */
}

.school-media-grid {
    display: grid;
    /* Cria 3 colunas de tamanho igual */
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.media-item {
    border-radius: 10px;
    overflow: hidden; /* Garante que o vídeo/imagem respeite a borda */
    border: 1px solid #333;
    /* Força um formato vertical (proporção de celular), que parece ser o formato dos seus vídeos */
    aspect-ratio: 9 / 16; 
}

.media-item img,
.media-item video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que o conteúdo preencha o espaço sem distorcer */
}

.frase {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 3rem;
    color: #0099FF;
    font-size: 2rem;
}

/* ====================================================== */
/* --- ESTILOS P/ CARD DE CATEGORIA (Layout Flex) ---     */
/* ====================================================== */

/* ====================================================== */
/* --- ESTILOS P/ CARD DE CATEGORIA (Layout Flex) ---     */
/* ====================================================== */

.category-grid {
 /* Fazemos o grid ter 1 coluna, pois o card agora é horizontal */
 grid-template-columns: 1fr;
    /* Adicione o gap de volta, se quiser espaço entre os cards */
    gap: 30px; 
    margin-top: 40px;
}

.category-card {
    /* Adicione o fundo e a borda de volta */
    background-color: #1c1c1c;
    border: 1px solid #333;
    border-radius: 10px;

 padding: 0; /* Remove o padding antigo */
  display: flex; /* A mágica do layout lado a lado */
 align-items: stretch; /* Faz as duas colunas terem a mesma altura */

    /* Adicione a transição de volta */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Adicione o :hover de volta */
.category-card:hover {
  transform: translateY(-5px);
  border-color: var(--cor-primaria);
}


/* Coluna da Esquerda (Conteúdo) */
.category-content-wrapper {
  padding: 30px;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Faz esta coluna crescer */
}

.category-card h3 {
     font-family: var(--fonte-titulos);
 font-size: 3rem;
 color: var(--cor-primaria);
  margin-bottom: 5px;
}

.category-card p {
  color: #ccc;
  margin-bottom: 20px;
 flex-grow: 1;
}

.category-card .price-tag {
  font-family: var(--fonte-titulos);
  font-size: 2.5rem;
  color: var(--cor-texto);
  margin-bottom: 25px;
}

.category-card .cta-button {
  width: 100%;
}

/* Coluna da Direita (Imagem) */
.category-image-wrapper {
  width: 40%; 
  flex-shrink: 0; 
  border-radius: 0 10px 10px 0; 
  overflow: hidden;
}

.category-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ====================================================== */
/* --- AJUSTE PARA VÍDEOS CLICÁVEIS NA HOMEPAGE ---       */
/* ====================================================== */

/* Muda o cursor para "mãozinha" sobre os vídeos daquela seção */
.school-media-section .media-item video {
    cursor: pointer;
}
/* ... (o resto do seu @media query) ... */


/* Estilos para a Página Vitrine (Showcase) */
.showcase-section {
    padding: 60px 0;
}
.showcase-grid {
    display: grid;
    grid-template-columns: 1fr; /* Padrão de 1 coluna em todas as telas */
    gap: 60px;
    max-width: 900px;
    margin: 0 auto;
}
.player-showcase-card {
    display: flex;
    flex-direction: column;
    background-color: #1c1c1c;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #333;
}
.player-image {
    width: 100%;
    max-height: 500px;
    overflow: hidden;
}
.player-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.player-details {
    padding: 25px;
    text-align: center;
}
.player-details h2 {
    font-family: var(--fonte-titulos);
    font-size: 2.8rem;
    color: var(--cor-primaria);
    margin-bottom: 5px;
}
.player-details h3 {
    font-size: 1.2rem;
    color: #ccc;
    margin-bottom: 25px;
}
.description-box {
    text-align: left;
    line-height: 1.6;
    color: #ddd;
    border-top: 1px solid #333;
    padding-top: 20px;
}

/* ====================================================== */
/* --- ESTILOS PARA A PÁGINA DE MODALIDADES ---           */
/* ====================================================== */

.modalities-section {
    padding: 60px 0 80px 0;
}

.intro-text {
    text-align: center;
    color: #ccc;
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto 50px auto;
}

.modalities-grid {
    display: grid;
    /* 4 colunas no desktop */
    grid-template-columns: repeat(4, 1fr); 
    gap: 25px;
}

.modality-card {
    /* Estilo similar ao card da Home, mas como um link */
    background-color: #1c1c1c;
    border: 1px solid #333;
    padding: 30px 20px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s ease;
}

.modality-card:hover {
    transform: translateY(-5px);
    border-color: var(--cor-primaria);
}

.modality-card i {
    font-size: 3rem; 
    color: var(--cor-primaria);
    margin-bottom: 20px;
}

.modality-card h3 {
    font-family: var(--fonte-titulos);
    font-size: 1.8rem;
    color: var(--cor-texto);
    margin-bottom: 10px;
}

.modality-card p {
    font-size: 0.95rem;
    color: #ccc;
    line-height: 1.5;
}

.modality-card-link {
    text-decoration: none;
    color: inherit;
    display: block; /* Ocupa todo o espaço do grid cell */
}

/* Responsividade: 2 colunas em tablets, 1 coluna em celulares */
@media (max-width: 1024px) {
    .modalities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .modalities-grid {
        grid-template-columns: 1fr;
    }
}

/* Regras para Desktop (2 Colunas, Imagem na Esquerda) */
@media (min-width: 768px) {
    .player-showcase-card {
        flex-direction: row;
    }
    .player-image {
        width: 40%;
        max-height: none;
    }
    .player-details {
        width: 60%;
        text-align: left;
    }
}

/* --- Ajuste de Responsividade --- */
@media (max-width: 850px) {
    .category-card {
        flex-direction: column; /* No celular, empilha (imagem em cima) */
    }

    .category-image-wrapper {
        width: 100%;
        height: 200px;
        border-radius: 10px 10px 0 0; /* Arredonda cantos de cima */
        order: -1; /* Manda a imagem para cima */
    }

    .category-content-wrapper {
        padding: 20px;
    }
}
/* --- Ajuste de Responsividade para a Seção --- */
@media (max-width: 850px) {
    .school-media-grid {
        /* Em telas menores, vira 1 coluna */
        grid-template-columns: 1fr;
    }

    .media-item {
        /* Ajusta a proporção para ficar um pouco mais largo no celular */
        aspect-ratio: 4 / 5;
    }
}

/* --- Ajuste de Responsividade para os Pilares --- */
/* Em telas menores (como celular), faz 2 colunas em vez de 4 */
@media (max-width: 850px) {
    .hero-pillars {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Ajuste de responsividade para o novo layout */
@media (max-width: 992px) {
    .inscription-options-wrapper {
        flex-direction: column;
    }
    .option-column {
        width: 100%;
    }
}

@media (min-width: 768px) { .campaign-card { flex-direction: row; } .campaign-image { width: 40%; } .campaign-content { width: 60%; } }

/* ====================================================== */
    /* --- MEDIA QUERIES PARA RESPONSIVIDADE (MOBILE) ---     */
    /* ====================================================== */

    @media (max-width: 850px) { /* Estas regras só aplicam se a tela for menor que 850px */
        
        /* 1. Ajuste do Header */
        .main-header .container {
            flex-wrap: wrap; /* Permite que o menu quebre a linha */
        }
        
        /* 2. Esconde o menu de desktop e mostra o botão hambúrguer */
        .main-nav {
            display: none; /* Esconde o menu por padrão no mobile */
            width: 100%; /* Faz o menu ocupar a largura toda quando visível */
            text-align: center;
            margin-top: 15px;
        }

        .main-nav ul {
            flex-direction: column; /* Deixa os links um embaixo do outro */
            gap: 10px;
        }
        .main-nav ul li {
            margin-left: 0;
            padding: 10px 0;
            border-bottom: 1px solid #333;
        }

        /* 3. Estilo do Botão Hambúrguer */
        .hamburger-menu {
            display: flex; /* Mostra o botão no mobile */
            flex-direction: column;
            justify-content: space-around;
            width: 30px;
            height: 25px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
        }

        .hamburger-menu .bar {
            height: 3px;
            width: 100%;
            background-color: white;
            border-radius: 10px;
        }
        
        /* 4. Classe 'active' que o JavaScript vai adicionar */
        .main-nav.active {
            display: block; /* Mostra o menu quando o botão for clicado */
        }

        .matches-container {
            flex-direction: column; /* Coloca os cards um embaixo do outro */
            gap: 15px; /* Ajusta o espaçamento vertical */
        }

        .match-card {
            width: 100%; /* Faz cada card ocupar a largura total */
        }

        /* 6. Ajustes para os Cards de Notícias na Homepage */
        .news-grid {
            grid-template-columns: 1fr; /* Muda o grid para apenas 1 coluna em telas pequenas */
        }

        .content-wrapper {
            flex-direction: column; /* Coloca os itens um embaixo do outro */
            text-align: center; /* Centraliza o texto para um visual mais agradável */
        }

        /* Garante que tanto a imagem quanto o container de texto ocupem a largura total */
        .content-wrapper img,
        .content-wrapper .text-content {
            width: 100%;
            max-width: 100%; /* Garante que a imagem não ultrapasse os limites */
        }

        .social-projects-section .content-wrapper {
            padding: 20px; /* Ajusta o padding do card de projetos para telas menores */
        }

        /* 8. Ajustes para a grade de membros (Diretoria / Profissionais) */
        .staff-grid {
            grid-template-columns: 1fr; /* Muda o grid para apenas 1 coluna */
        }

        .contact-wrapper {
            flex-direction: column; /* Coloca o mapa embaixo das informações */
        }

        /* Garante que tanto as infos quanto o mapa ocupem 100% da largura */
        .contact-wrapper .contact-info,
        .contact-wrapper .contact-map {
            width: 100%;
        }

        .table-wrapper {
            overflow-x: auto; /* A mágica acontece aqui! Cria a rolagem horizontal. */
        }


.event-item {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start; 
}

.event-date {
    border-right: none;
    border-bottom: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.event-date .day-number,
.event-date .day-of-week {
    font-family: var(--fonte-titulos);
    font-size: 1.8rem;
    color: var(--cor-primaria); 
    line-height: 1;
}

.event-details {
    width: 100%;
}

.match-schedule, .match-result {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    width: 100%;
    align-items: center;
    gap: 10px;
}

.match-schedule .team, .match-result .team {
    display: flex;
    align-items: center;
    gap: 10px;
}

.match-schedule .team:first-of-type,
.match-result .team:first-of-type {
    justify-content: flex-end;
}

.match-schedule .team:last-of-type,
.match-result .team:last-of-type {
    justify-content: flex-start;
}

.event-meta {
    min-width: auto;
    text-align: center; 
    width: 100%;
    margin-top: 5px;
}
    }