/*
Site:     APCelos
Arquivo:  CSS/ESTILOS.CSS
Local:    apcelos.com.br/css
Data:     15/04/2026
*/

/* ESTILO GERAL */
* {
    margin: 0;          /* Remove margens padrao */
    padding: 0;
    box-sizing: border-box;     /* Garante que padding nao aumente a largura */
    text-decoration: none;      /* Links nao devem exibir linha sublinhada */
    font-family: 'Poppins', sans-serif;     /* Estilo de fonte para todo o site */
}

:root {
    --corBranca: #ffffff;
    --corPreta: #000000;
    --corAmarela: #ffff00;
    --corVerde: #00ff08;
    --corBege: #f5f5dc;
    --corCinza: #5c5c5c;
    --corVerdeClaro: #90ee90;
    --corCinzaClaro: #dddddd;
    --corCinzaClaro2: #c4c4c4;
    --corAmarelaDoTimbre: #ecc930;
    --corVermelha: #ff0000;
}

body {
    background-color: var(--corPreta);      /* Cor de fundo padrao */
    color: var(--corBranca);            /* Cor de texto padrao */
    font-size: 1rem;                /* Tamanho de fonte padrao (16px) */
}

/* Definir tamanho padrão de fontes */
/* Define a fonte base do site como 100% (geralmente 16px) */ 
html {
  font-size: 100%; 
}

/* Título principal */ 
h1 {
  font-size: 2.5rem;    /* 40px */ 
}

/* Subtítulos podem ser 1,5x o tamanho base */ 
h2 {
  font-size: 1.5rem;    /* 24px */ 
}

/* Tamanho base */ 
h3 {
  font-size: 1rem;      /* 16px */ 
}

/* Texto normal do site (paragrafos) */ 
p {
  font-size: 1rem;      /* 16px */ 
}

/*
ORIENTACAO:
Para construir um site moderno e acessível, a melhor prática é usar as tags h1, h2, h3 para estruturar 
o texto (semântica) e controlar o tamanho visual delas usando a unidade rem no CSS. Evite usar medidas 
em px para textos, pois elas prejudicam a acessibilidade.
1. Tags de Cabeçalho (h1, h2, h3, etc.)
Função: Servem para organizar a hierarquia e o conteúdo do site. O h1 é o título principal, o h2 é um 
subtítulo, e assim por diante.
Por que usar: São essenciais para o SEO (mecanismos de busca como o Google entenderem a página) e para 
a acessibilidade (leitores de tela navegam pelos cabeçalhos).
Erro comum: Nunca use tags de h1 a h6 apenas para deixar o texto maior. Use-as conforme a estrutura 
do conteúdo.
2. A unidade rem no CSS
O que é: Significa Root Em. Ela se baseia no tamanho da fonte padrão definida na raiz do documento 
(na tag html).
Por que usar: É a unidade preferida pela acessibilidade e responsividade. Se um usuário com deficiência 
visual precisar aumentar o tamanho da fonte padrão no navegador dele, o layout inteiro (em rem) se 
ajustará proporcionalmente.
Como funciona: Geralmente, a tag html tem o tamanho de 16px por padrão. Se você definir 1rem, ele será 
equivalente a 16px. Se definir 2rem, equivalerá a 32px.
3. A unidade px (Pixels)
O que é: É uma medida absoluta.
Por que usar/evitar: Por ser absoluta, ela não escala caso o usuário altere as configurações do 
navegador ou do sistema. É recomendada apenas para elementos de alta precisão que não devem mudar 
de jeito nenhum, como larguras de borda (border) ou sombras.
*/

/* Nao quero as laterais do site coladas, encostadas na direita e esquerda da tela.
Para isso segue a classe tela para estabelecer esses limites. */

.tela {
    max-width: 1380px;    /* ou 1280px */
    /*  max-width: 100%;    /* Ocupar toda a largura da tela */
    padding: 0 6%;




/*  se fiz com 6% porque ainda coloco mais 3% em outros locais ...........  
xx
x
x
x
x
x
*/



    /*  margin: 0 auto;  */
}

.flex {
     display: flex;
}

form .btn-enviar {
    margin-top: 1.5rem;       /* Margem superior de 24px */ 
    text-align: center;
}

form .btn-enviar input {
    background-color: var(--corVerde);
    width: 7.5rem;          /* Botao com 120px de largura */
    font-weight: 700;
    border: .125rem;        /* Borda de 2px de espessura */
    border-radius: 1rem;    /* Borda de raio 16px */
    cursor: pointer;
    transition: .2s;
}

form .btn-enviar input:hover {
    background-color: var(--corAmarela);
    box-shadow: 0 0 .5rem var(--corVerde);        /* Sombra do botao de 8px */
    transform: scale(1.05);
}

  

/* ESTILO CABECALHO */
header {
    background-color: var(--corPreta);
    /* IMPORTANTE: Como tag body já estabelece cor preta pode parecer que nao precisa definir cor preta 
    aqui, mas é necessario para exibir uma cor permitindo as paginas rolarem por baixo do cabecalho, 
    sem esta tag aqui menu ficava transparente */

    position: fixed;    /* Para manter o cabecalho (nome e menu) fixo */  
    /*  top: 0;   nao entendo porque isso */
	width: 100%;        /* ocupa toda a largura da tela */
	z-index: 9999;     /* usar um valor alto para garantir que o menu fique acima de imagens e outros 
    elementos que devem rolar por tras do cabecalho. Por padrao o z-index de todos elementos é 1.
    Isto só vai funcionar se position for diferente de static */
}

header .nome h1 {
    color: var(--corAmarela);
    font-weight: 600;
    text-align: center;
}

header nav ul {
    list-style-type: none;  /* Apagar bolinhas antes dos itens de menu do desktop e mobile */ 
    text-align: center;     /* Centralizar menu */
}

header nav.menu-desktop ul li {
    display: inline-block; /* Exibir itens de menu na horizontal */
    padding: 0 2.5rem;       /* Criar espacamento entre os itens de menu (40px) */   
    /* Primeiro valor eh para cima e para baixo, o segundo eh para esquerda e direita */
}     

/* Para que itens de menu fiquem na cor branca (embora a tag body estabeleca cor branca como padrao) */
header a {
    color: var(--corBranca);
}

/* Nao exibir menu mobile na versao desktop */
.menu-mobile {    
    display: none;      /* Para ocultar o menu */
}     

/* Nao exibir o icone das 3 barrinhas (ou hamburguer) de abrir o menu mobile na versao desktop */  
.btn-abrir-menu {
    display: none;
}

/* Nao exibir o icone X de fechar o menu mobile na versao desktop */  
.btn-fechar-menu {
    display: none;
}



/* ESTILO INICIO */
.inicio {
     padding: 7.5rem 3%;        /* section com 120px acima e abaixo e 3% da largura nas laterais */
}

.inicio .flex {
    align-items: center;        /* Para centralizar na vertical */
    justify-content: center;    /* Para centralizar na horizontal */
    /*  gap: 2.5rem;      ... Espacamento central (40px) */
}

/*
.inicio .flex {
    align-items: center;    /* Para centralizar na vertical 
    justify-content: center;    /* Para centralizar na horizontal 
    gap: 2.5rem;      /* Espacamento central (40px) 
}
Trata-se de colocar um espaco de 40px entre a Mensagem aos Participantes
<div class="txt-inicio"> e a imagem flutuante apcelos.png.
INCOMPATIBILIDADE NO NAVEGADOR MICROSOFT EDGE:
A propriedade gap não funciona em elementos com o comportamento padrão de bloco 
(block) ou inline, e o Edge é historicamente mais rigoroso com essa regra do que 
as versoes recentes do Chrome e Firefox.
Para resolver esse problema nos tres navegadores foi feito:
Ao inves de aplicar a propriedade gap de 2.5rem na classe flex 
adotamos a separacao de 2.5rem como margem esquerda da imagem apcelos.png, assim:
.img-inicio img {
    position: relative;
    animation: flutuar 2s ease-in-out infinite alternate;
    margin-left: 2.5rem;
}    
*/

.txt-inicio h2 {
    color: var(--corVerde);
    text-align: center;
    margin-bottom: 2.5rem;
}

.txt-inicio p {
    margin: 1.5rem 0;
}

.txt-inicio h3 {
    text-align: center;
}

.img-inicio img {
     position: relative;
     animation: flutuar 2s ease-in-out infinite alternate;
     margin-left: 2.5rem;
}

@keyframes flutuar {
    0%{
        top: 0;
    }
    100%{
        top: 3rem;
    }
}



/* ESTILO SOBRE */
.sobre {
    background-color: var(--corBege);
    padding: 11rem 3%;        /* section com 176px acima e abaixo e 3% da largura nas laterais */
}

.sobre .flex {
    /* align-items: center;  ...tirei porque nao vou centralizar na vertical, 
    vai ficar alinhado na parte superior */
    justify-content: center;    /* Para centralizar na horizontal */
    /* gap: 5rem;      (Espacamento central de 80px entre imagem e texto) */
}

/*
.sobre .flex {
    /* align-items: center;  ...tirei porque nao vou centralizar na vertical, 
    vai ficar alinhado na parte superior    
    justify-content: center;    /* Para centralizar na horizontal 
    /* gap: 5rem;      (Espacamento central de 80px entre imagem e texto)     
}    
Trata-se de colocar um espaco de 80px entre a imagem juntos.png e o texto (uma div 
sem nome).
INCOMPATIBILIDADE NO NAVEGADOR MICROSOFT EDGE:
A propriedade gap não funciona em elementos com o comportamento padrão de bloco 
(block) ou inline, e o Edge é historicamente mais rigoroso com essa regra do que 
as versoes recentes do Chrome e Firefox.
Para resolver esse problema nos tres navegadores foi feito:
Ao inves de aplicar a propriedade gap de 5rem na classe flex 
adotamos a separacao de 5rem como margem direita da imagem juntos.png, assim:
.img-sobre img {
    margin-right: 5rem;     /* Margem direita de 80 px 
}     
*/

.img-sobre img {
    margin-right: 5rem;     /* Margem direita de 80 px */
}     

.sobre .titulo h2 {
    color: var(--corPreta);
    text-align: center;
    margin-bottom: 3rem;    /* Margem de 48px abaixo do titulo */
}

.txt-sobre p {
    color: var(--corPreta); /* Necessario embora cor padrao para body seja preta */
    text-align: justify;
    margin-bottom: 2.5rem;  /* Margem de 40px abaixo do texto e acima do link */
}

.txt-sobre a {
    color: var(--corCinza);
    transition: .2s;
}

.txt-sobre a:hover {
    font-size: 1.125rem;        /* Amplia de 1rem=16px para 18px ao passar o mouse */
    color: var(--corPreta);
}



/* ESTILO INSCRICAO */
.inscricao {
    background-color: var(--corVerdeClaro);     /* Lightgreen */
    padding: 10rem 3%;      /* Espacamento superior e inferior de 160px */
}

.form-inscricao .titulo h2 {
    color: var(--corPreta);
    text-align: center;
    padding: 2.5rem 0;      /* Espacamento superior e inferior de 40px */
}

.form-inscricao {
    background-color: var(--corBranca);
    max-width: 57rem;   /* Largura da area branca = 57 x 16 = 912px */
    /* Observar que a imagem timbre.png tem dimensoes de 900x158px 
    entao se max-width < 57 imagem fica aparecendo do lado */
    margin: 0 auto;     /* para centralizar formulario na tela */
    color: var(--corPreta);     /* Necessario embora cor padrao para body seja preta */
}

.form-inscricao form {
    background-color: var(--corCinzaClaro);  
    max-width: 50rem;   /* Largura da area cinza = 50 x 16 = 800px */
    margin: 0 auto;
    padding: 3rem 2rem;  
    /* O primeiro valor (48px) é para cima e para baixo.
    Espaco acima do campo "Nome completo" e abaixo do botao "Cadastrar".
    O segundo valor (32px) é para a esquerda e direita. */
    border: 1px solid var(--corCinzaClaro2);
    border-radius: 1.25rem;        /* Borda de raio 20px */
}

.form-inscricao .input-single {
    padding: 0 0 0 4rem;        /* Margem esquerda do formulario (64px) */
}

.form-inscricao .autorizacao {
    /*  font-size: 16px;  */
    text-align: justify;
    padding: 1.5rem 6.5rem;  
    /* O primeiro valor (24px) é para cima e para baixo do texto desta div.
    O segundo valor (104px) é para a esquerda e direita. */
}

.form-inscricao .img-timbre-final {
    background-color: var(--corAmarelaDoTimbre);
    height: 2rem;       /* altura da div de 32px */
    max-width: 100%;
}



/* ESTILO NOTICIAS */ 
.noticias {
    background-color: var(--corBege);
    padding: 11rem 3%;        /* section com 176px acima e abaixo e 3% da largura nas laterais */
}

.noticias .titulo h2 {
    color: var(--corPreta);
    text-align: center;
    margin-bottom: 3rem;    /* Margem de 48px abaixo do titulo */
}

.noticia {
    background-color: var(--corBranca);
    max-width: 57rem;   /* Largura da area para noticias = 57 x 16 = 912px */
    margin: 0 auto;     /* Para centralizar area na tela */
}

.noticia a {
    /* Tamanho da fonte de 1rem = 16px */
    padding: 1.25rem 2.5rem 0 2.5rem;      /* Espaco de 20px acima, 40px na direita, nada abaixo e 40px na esquerda */
    color: var(--corPreta); /* Necessario embora cor padrao para body seja preta */
    transition: .2s;
}

.noticia a:hover {
    color: var(--corVermelha);
    font-style: italic;
}

.noticia p {
    font-size: .75rem;          /* Tamanho da fonte de 8px */
    margin: 0 2.5rem 0 2.5rem;  /* Margem de 40px nas laterais esquerda e direita e nada acima e abaixo */
    color: var(--corPreta);     /* Necessario embora cor padrao para body seja preta */
    font-style: italic;
}    



/* ESTILO CONTATO */
.contato {
    padding: 6rem 3%;   /* section com 96px acima e abaixo e 3% da largura nas laterais */
}

.contato .flex {
    /* align-items: center;  ...tirei porque nao vou centralizar na vertical, 
    vai ficar alinhado na parte superior */
    justify-content: center;
    /* Centraliza na horizontal o Formulario e a relacao de Membros da Diretoria.
    Sem esta propriedade o formulario ficaria encostado no lado esquerdo */    
    /* gap: 8rem;      /* Espacamento central de 8 x 16 = 128px */
}

/*
.contato .flex {
    /* align-items: center;  ...tirei porque nao vou centralizar na vertical, 
    vai ficar alinhado na parte superior 
    justify-content: center;
    /* Centraliza na horizontal o Formulario e a relacao de Membros da Diretoria.
    Sem esta propriedade o formulario ficaria encostado no lado esquerdo     
    /* gap: 8rem;      /* Espacamento central de 8 x 16 = 128px 
}
Trata-se de colocar um espaco de 128px entre o Formulario <div class="form-contato">
e a relacao de Membros da Diretoria <div class="txt-contato">.
INCOMPATIBILIDADE NO NAVEGADOR MICROSOFT EDGE:
A propriedade gap não funciona em elementos com o comportamento padrão de bloco 
(block) ou inline, e o Edge é historicamente mais rigoroso com essa regra do que 
as versoes recentes do Chrome e Firefox.
Para resolver esse problema nos tres navegadores foi feito:
Ao inves de aplicar a propriedade gap de 8rem na classe flex 
adotamos a separacao de 8rem como margem direita do formulario assim:
.form-contato {
    . . . 
    margin-right: 8rem;
}    
*/

.contato .titulo h2 {
    color: var(--corVerde);
    text-align: center;
    padding: 5rem 0;        /* Espacamento superior e inferior de 80px */
}

.form-contato {
    background-color: var(--corBranca);
    max-width: 31rem;       /* Largura da area branca = 31 x 16 = 496px */
    /*  margin: 0 auto; */
    color: var(--corPreta); /* Necessario embora cor padrao para body seja preta */
    margin-right: 8rem;     /* Espacamento central de 8 x 16 = 128px */ 
}

.form-contato .img-contato {
    text-align: center;
}

.form-contato .input-single {
    padding: 0 0 0 .625rem;        /* Margem esquerda do formulario (10px) */
}

.form-contato .texto {
    text-align: center;      /* isto esta centralizando ou deveria estar no paragrafo */
    padding: 1.5rem 4rem;
    /* O primeiro valor (24px) é para cima e para baixo do texto desta div.
    O segundo valor (64px) é para a esquerda e direita. */
}

.form-contato .texto p {
    font-size: .8rem;
    padding: .25rem 0;  /* Espacamento superior e inferior de 4px entre paragrafos */
}

.form-contato form {
    background-color: var(--corCinzaClaro);
    max-width: 25rem;       /* Largura da area cinza = 25 x 16 = 400px */
    margin: 0 auto;
    padding: 2rem .5rem;
    /* O primeiro valor (32px) é para cima e para baixo.
    Espaco acima do campo "Nome completo" e abaixo do botao "Enviar".
    O segundo valor (32px) é para a esquerda e direita. */
    border: 1px solid var(--corCinzaClaro2);
    border-radius: .625rem;          /* Borda de raio 10px */
}

.form-contato .espaco-final {
    height: 6rem;       /* altura da div de 96px */
}

.uats-contato {
    text-align: center;
}

.txt-contato h3 {
    color: var(--corVerde);
}

.resposta-contato p {
    text-align: center;
    color: var(--corVermelha);
    font-weight: 600;
}    



/* ESTILO RODAPE */
footer {
    padding: 2.5rem 3%;       /* Espaco de 40px acima e abaixo e 3% da largura nas laterais */
}

footer .ia-fc {
    font-size: .5rem;        /* Fonte com tamanho 8px */ 
}

footer .nome {
    color: var(--corAmarela);
    text-align: center;
}

footer .linha {
    border-top: 1px solid var(--corVerde);
}



/*
footer .linha-footer {
    padding: 15px 0;
}
*/


footer .flex {
    justify-content: space-between;
    text-align: center;
    gap: 3rem;          /* Espacamento de 48px entre elementos */
}

footer .restrito a {
    font-size: 1rem;
    margin: 0 2.5rem 0 2.5rem;      /* Margem de 40px nas laterais esquerda e direita e nada acima e abaixo */
    color: var(--corCinza);
    transition: .2s;
}

footer .restrito a:hover {
    color: var(--corAmarela);
    transform: scale(1.05);
}

footer .topo a {
    font-size: 1rem;
    margin: 0 2.5rem 0 2.5rem;      /* Margem de 40px nas laterais esquerda e direita e nada acima e abaixo */
    color: var(--corCinza);
    transition: .2s;
}

footer .topo a:hover {
    color: var(--corAmarela);
    transform: scale(1.05);
}

footer .final {
    font-size: .75rem;        /* Fonte com tamanho 12px */ 
}

footer .whatsapp {
    font-size: .75rem;        /* Fonte com tamanho 12px */
    text-decoration: none;
    color: var(--corAmarela);
}



/* ESTILO RESPONSIVO */
/* Para definir largura de tela a ser adotada, clicar com botao direito no navegador 
e selecionar Inspecionar. Vai aparecer uma janela DevTools que deve ser diminuida e aumentada 
para se definir uma largura para mobile.
Dimensao que vai ser responsavel pela quebra de desktop para mobile: 900px ou 1020px.

Todos elementos que usaram a classe flex ficaram na horizontal, lado a lado, e devem ficar na vertical.
Como a classe flex ja tem o display:flex; por padrao, precisa-se aplicar apenas algumas variacoes, como o 
flex-direction. O flex-direction determina a direcao em que vao ficar os elementos.
Se quiser que fiquem em linha (padrao), aplicar flex-direction:row;
Se quiser que fiquem em linha, mas com troca de lado, aplicar flex-direction:row-reverse;              
Para passar os elementos da horizontal para vertical, aplicar flex-direction:column; 
Se quiser reverter os elementos na vertical (trocar de posicao em cima e em baixo), aplicar 
flex-direction:column-reverse;
Recomendavel entao aplicar "column" para manter tudo na vertical e reverter posicoes onde desejar com 
"column-reverse". */

/* Se tela tiver ate 1020px de largura as imagens desktop NAO devem ser exibidas. 
Se tela tiver ate 1020px de largura as imagens mobile devem ser exibidas. */

/* OBSERVAÇÃO - classe flex:
Todos elementos que usaram "display: flex" estavam na vertical e ficaram na horizontal, 
lado a lado, e na versão mobile devem retornar para a vertical. Para isso, precisa-se 
aplicar apenas algumas variacoes, como o flex-direction. O flex-direction determina a 
direcao em que vao ficar os elementos.
Se quiser que fiquem em linha (padrão), aplicar flex-direction:row;
Se quiser que fiquem em linha, mas com troca de lado, aplicar flex-direction:row-reverse;              
Para passar os elementos da horizontal para vertical, aplicar flex-direction:column; 
Se quiser reverter os elementos na vertical (trocar de posicao em cima e em baixo), aplicar 
flex-direction:column-reverse;
Recomendavel entao aplicar "column" para manter tudo na vertical e reverter posicoes onde 
desejar com "column-reverse". */

@media screen and (max-width: 1020px) {
    /* GERAL */
    /* Nao quero as laterais do site coladas, encostadas na direita e esquerda da tela do celular.
    Para isso alteramos a classe tela para estabelecer esses limites. */
    .tela {
        /*  max-width: 100%;    /* Ocupar toda a largura da tela */
        padding: 0 1%;      /* Sem espacamento acima e abaixo e espacamento lateral de 1% da largura */
        /*  margin: 0 auto;  */
    }

    .flex {
        flex-direction: column;     /* Todos elementos alinhados na horizontal passam para vertical */
    }

    
    /* CABECALHO */
    /* DESKTOP */
    /* Nao exibir menu desktop na versao mobile */
    .menu-desktop {
        display: none;
    }     

    /* MOBILE */
    /* Reduzir tamanho da fonte do titulo do site */
    header .nome h1 {
        font-size: 1.5rem;      /* h1 aqui equivale a 24px */
    }

    /* Exibir menu mobile */
    .menu-mobile {    
        display: block;    /* Torna o menu visivel */
    }    
     
    /* Estilizar o menu mobile */
    .menu-mobile {
        position: fixed;    /* Menu ficara fixo em uma unica posicao que a gente determinara */
   
        /* background-color: var(--corAmarela);  ou Branca */
        /* Cor temporaria da janela de menu mobile - apenas para testar */
        background-color: var(--corPreta);      /* Janela de menu com fundo preto */
        height: 50vh;   /* Para janela de menu ocupar 50% da altura da tela */
        top: 0;     /* Janela do menu mobile deve ficar colada junto ao topo */
        right: 0;   /* Janela do menu mobile deve ficar colada no lado direito */
        z-index: 99999;
        /* Determina que o menu-mobile com este valor de z-index ficará acima dos outros elementos que 
        tem valor menor.
        Obs.: Mesmo que nenhum elemento fique sobre a area de menu deve-se usar o z-index porque ele 
        deve ter essa preferencia de ser exibido. */ 
        
        /* width: 60%; */
        /* Temporario - janela de menu ocupara 60% da largura da tela (no lado direito), depois encolher 
        para zero (width: 0%;) para ficar escondida e só aparecer quando clicar nas 3 barrinhas */  
        width: 0%;

        /*
        overflow: hidden;       /* Para garantir que nenhum item de menu vai ficar do lado de fora */
        /* Esta linha acima soh é colocada após exibir o icone das 3 barrinhas */

        transition: .5s;        /* Menu abre em meio segundo */
    }

    /* Abrir janela de menu quando clicar nas tres barrinhas (ou hamburguer) */ 
    .menu-mobile.abrir-menu {
        width: 60%;     /* Estava com width: 0% */ 
    }

    /* Estabelecer a funcionalidade do overlay aparecer */
    /* Lembrando que este overlay tinha display:none para nao abrir. Abrir só agora, após abrir o menu mobile. */
    .menu-mobile.abrir-menu ~ .overlay-menu {
        display: block;
	}

    /* Estilizar os itens do menu mobile */ 
    .menu-mobile nav ul li {
        text-align: right;      /* Posiciona os itens de menu alinhados no lado direito. */
		margin-bottom: 1.25rem;    /* Cria um espaço abaixo de cada item de menu (20px) */
	}

	.menu-mobile nav ul li a {
		color: var(--corBranca);    /* Itens de menu na cor branca */
        font-size: 1.5rem;   	    /* Tamanho da fonte (24px) */
		font-weight: 300;	        /* Deixar a fonte um pouco mais leve, mais fina. */
		padding: 0 8%; 
		/* Não cria espaço acima e abaixo na linha de cada item de menu (linha ficaria com altura maior.
        Espacamento de 8% da largura da tela para itens de menu se afastarem das laterais (no caso, da lateral direita) */
	}

	/* Efeitos quando usuário tocar com o dedo nos itens do menu mobile */
	.menu-mobile nav ul li a:hover {
        color: var(--corVerde);     /* Nova cor do item de menu */
        font-weight: 800;           /* Item selecionado exibe em negrito */

        /* display: block;  ->  Se usar cria uma faixa horizontal de mesma largura da janela
        para o item de menu. Toda a linha exibe uma cor de fundo ao passar o mouse.
        Se nao usar cria uma faixa de largura do tamanho do item de menu. 
        Apenas o item de menu selecionado exibe essa cor a cor de fundo ao pasar o mouse. */
	}

    .overlay-menu {
	    /* Usado cor preta porque site tem fundo preto - background-color: var(--corPreta);
		E como todo bom overlay ele nao fica assim preto dessa forma para esconder todo o site. 
        Queremos que ele fique demonstrando o conteudo que tem por tras dele. 
		Então vamos diminuir a opacidade (especie de sombra) deste overlay (vai numa barra e escolhe 
        um pouco acima da metade que já escureceu bem).
      	Escolhido cor/opacidade: #000000a7	
		Fica entao: background-color: #000000a7; */
		background-color: #000000a7;
	
        width: 100%;        /* Para que overlay ocupe toda largura da tela */
		height: 100%;       /* Para que overlay ocupe toda altura da tela */ 
		position: fixed;    /* Para que saia do fluxo da pagina e fique na pagina inteira */	
		top: 0;
		left: 0;

		/* Pode ocorrer de alguma imagem ficar por cima de nossa pagina - aplicar z-index 
		Precisa ser inferior ao valor do z-index da classe menu-mobile */
        z-index: 88888;
		
	    /* Queremos que o overlay apareça, que fique em evidencia, apenas quando o menu mobile 
		estiver aberto. Por isso, por padrao, ele nao deve aparecer - display: none 
        Se nao colocar, já abre no celular com overlay em toda a tela. */
        display: none;
	}

    /* Exibir o icone X de fechar o menu mobile */    
    .btn-fechar-menu {
        display: block;
    }

    /* Estilizar o icone X */     
	.btn-fechar-menu {
		padding: 0 10%;
		/* Posicionar o icone com espaçamento zero acima e abaixo e 10% das laterais */ 	
	}

    .btn-fechar-menu i {
        color: var(--corAmarela);   /* Cor do icone X */ 
        font-size: 2.5rem;          /* Tamanho do icone X (40px) */   
    }

    /* Exibir o icone das 3 barrinhas (ou hamburguer) de abrir o menu mobile */ 
    .btn-abrir-menu {
        display: block;     /* Para menu ficar visivel */
        text-align: right;  /* Posicionar icone das 3 barrinhas no lado direito */
    }

    /* Estilizar o icone das 3 barrinhas (ou hamburguer) */
    .btn-abrir-menu i {
        color: var(--corAmarela);   /* Cor das 3 barrinhas */   
        font-size: 2.5rem;          /* Tamanho das tres barrinhas (40px) */ 
    }

    /* FUNCIONAMENTO DAS 3 BARRINHAS OU HAMBURGUER
    Para usar as 3 barrinhas para abrir o menu mobile ao ser clicado temos que proceder ao seguinte:
    1) Lembrar que o menu mobile se refere ao uso em celulares e, embora a maioria dos celulares modernos 
    suporta mouses (com fio ou bluetooth), geralmente a operação é com o toque dos dedos.
    Então, para facilitar o toque com dedos nos itens de menu, convem acertar no arquivo css e manter um 
    afastamento vertical maior entre os itens (escolhemos 1,25rem = 20px).  
    2) Alterar, no arquivo css, a tag width para esconder a janela de menu mobile:
            .menu-mobile {
                width: 60%;
                passar para:    width: 0%;  
    3) No arquivo index inserir a seguinte linha de chamada do arquivo javascript 
    para estabelecer as funcionalidades de abrir e fechar o menu mobile.
	        <head>
		        ...
		        <script src="js/menuteste.js" defer></script>
		        ...
	        </head>
    onde "defer" indica que deve carregar este script apenas quando este arquivo estiver totalmente carregado.
    4) No arquivo index incluir id em duas div. Fazer:
            <div class="btn-abrir-menu" id="btn-abrir-menu">
                <i class="bi bi-list"></i>
            </div>
	        <div class="menu-mobile" id="menu-mobile">
		        ...
	        </div>	
    5) Incluir no arquivo css para criar uma classe "abrir-menu" dinamicamente. Sempre que usuario clicar 
    nas 3 barrinhas vai criar esta classe dinamicamente e abrir a janela de menu mobile. Esta classe está 
    no script menu-teste.js e nao pode existir no css. Deve ser uma classe especifica para que o menu se abra.
            .menu-mobile.abrir-menu {
                width: 60%; 
            }

    CONFIGURAR OVERLAY
    6) Incluir no arquivo css para estabelecer a funcionalidade do overlay aparecer:
            .menu-mobile.abrir-menu ~ .overlay-menu {
		        /* Lembrando que este overlay tinha display:none para nao abrir. Abrir só agora.  
		        display: block;
	        }
    7) Incluir, no arquivo index, uma div para configurar o overlay que vai alterar a cor de fundo 
    do site sempre que o menu mobile estiver aberto:
            <header>
                <div class="tela">
                    . . . 
                    <div class="overlay-menu" id="overlay-menu"></div>
                </div>
            </header>
    8) No arquivo css estilizar o overlay:
            .overlay-menu {
                ...
            }    

    isso absixo nao foi feito
    Incluir, no arquivo css, para garantir que nenhum item de menu vai ficar do lado de fora: 
            .menu-mobile {
                overflow: hidden;
    */
     

    /* INICIO */ 
    .inicio {
        text-align: justify;
    }

    .txt-inicio {
        margin-top: 2rem;   /* Margem superior de 32px entre titulo MENSAGEM... e o menu */
    }  
   
    /*
    .inicio .img-inicio {
        width: 100vw;
        height: 100vh; 
       /*  display: flex;  */
       /*
        justify-content: center;    /* Centraliza na horizontal */
        /*  align-items: center;        /* Centraliza na vertical */
        /*  margin: 0; /
    }
    */

    .img-inicio img {
        /*  max-width: 100%;  */
        margin-left: 0;     /* Retirar espacamento central de 2.5 x 16 = 40px da
        versao desktop para imagem ocupar toda a largura da tela no celular */
        margin-top: 5rem;    /* Colocar espaço de 5 x 16 = 80px acima da imagem 
        flutuante para separar da mensagem aos participantes */     
    }


    /* SOBRE */
    /* Trocar de posicao a imagem e o texto - texto ficar acima  */
    section.sobre .flex {
        flex-direction: column-reverse;  
    }

    .img-sobre {
        justify-content: center;
    }   

    .img-sobre img {
        /*
        max-width: 100%;
        margin-top: 3rem;      /* Margem superior de 48px */  
        
        /*  nao serviu para nada
        margin-right: 0;     /* Margem direita zero 
        text-align: center;  */
    
        margin-right: 0;     /* Retirar espacamento central de 5 x 16 = 80px da
        versao desktop para imagem juntos.pgn ocupar toda a largura da tela cel. */
        margin-top: 5rem;    /* Colocar espaço de 5 x 16 = 80px acima da imagem para  
        separar do texto e link do menu sobre */     
    }     


    /* INSCRICAO */
    .inscricao {
        padding: 10rem 0;      /* Espacamento superior de 160px e nada de espaço lateral */
    }

    .form-inscricao .img-timbre-inicio img {
        max-width: 100%;
    }

    .form-inscricao form {
        max-width: 96%;     /* para deixar no celular uma pequena margem nas laterais do formulario */
        border-radius: 1rem;        /* Borda de raio 16px */
    }    

    .form-inscricao .input-single {
        padding: 0 0 0 .5rem;        /* Margem esquerda do formulario (8px) */
    }

    .form-inscricao .autorizacao {
       /* font-size: 12px;  */
        padding: 1.5rem .75rem;  
        /* O primeiro valor (24px) é para cima e para baixo do texto desta div.
        O segundo valor (12px) é para a esquerda e direita. */
    }


    /* NOTICIAS */
    .noticia a {
        padding: 1.25rem .5rem 0 0;      /* Espaco de 20px acima, 8px na direita, nada abaixo e nada na esquerda */
    }

    .noticia p {
        margin: 0 .5rem 0 .5rem;  /* Margem de 8px nas laterais esquerda e direita e nada acima e abaixo */
    }


    /* CONTATO */
    .contato {
        padding: 6rem 0;       /* section com 96px acima e abaixo e nada de largura nas laterais */
    }

    .form-contato {
        margin-right: 0;     /* Retirar espacamento central de 8 x 16 = 128px da
        versao desktop para formulario ocupar toda a largura da tela no celular */
        margin-bottom: 5rem;    /* Colocar espaço de 5 x 16 = 80px abaixo do 
        formulario para separar da relacao de membros da diretoria */        
    }

    .form-contato .texto {
        padding: 1.5rem 1rem;  
        /* O primeiro valor (24px) é para cima e para baixo do texto desta div.
        O segundo valor (12px) é para a esquerda e direita. */
    }    

    .form-contato .texto p {
        font-size: 1rem;        
    }    

    .txt-contato h3  {
        margin-left: 1rem;
    }

    .txt-contato p {
        margin-left: 2.5rem;
    }

    /* Embora nao deveria ser necessario, porque o que vem a seguir já esta no 
       desktop, mas coloquei porque escrevia a resposta em amarelo e nao vermelho */
    .resposta-contato p {
        text-align: center;
        padding-top: 3rem 0 0 0;    /* Espacamento superior de 48px */
        color: var(--corVermelha);
    }    


    /* RODAPE */
    footer .flex {
        gap: 10px;
    }

    footer .restrito {
        display: none;      /* Para nao permitir acesso na area restrita pelo celular */
    }

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