/* Estilo geral dos botões */
.tab-button {
    background-color: #ffdddd;      /* Cor de fundo */
    color: #ff0000;                 /* Cor do texto  */
    padding: 10px 20px;             /* Espaçamento interno para formar a elipse */
    border: 2px solid #8f0000;      /* Contorno vermelho forte */
    border-radius: 50px;            /* Faz a borda ficar em formato de elipse */
    font-size: 16px;                /* Tamanho do texto */
    cursor: pointer;                /* Cursor de ponteiro ao passar o mouse */
    margin: 10px;                   /* Espaçamento entre os botões */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;  /* Transição suave */
}

/* Estilo dos botões ao passar o mouse */
.tab-button:hover {
    background-color: #ff0000;      /* Fundo vermelho ao passar o mouse */
    color: #ffffff;                    /* Cor do texto branco ao passar o mouse */
    border-color: #8f0000;          /* Manter o contorno vermelho forte no hover */
}

/* Centralizando os botões no contêiner */
.tab-container {
    text-align: center;             /* Centraliza os botões */
}
/* Estilo geral do body */
body {
    display: flex;                 /* Usar flexbox para o layout */
    flex-direction: column;       /* Organiza os itens na coluna */
    min-height: 100vh;           /* Garante que o body ocupe pelo menos 100% da altura da tela */
    margin: 0;                  /* Remove as margens */
    background-color: #ffffff;   /* Cor de fundo branco */
}
.container {
    margin: 0 2cm;               /* Margem lateral de 2 cm, sem margem superior e inferior */
    flex: 1;                     /* Faz o contêiner ocupar o espaço restante */
}

/* Estilo do main para ocupar o espaço restante */
main {
    flex: 1;                     /* Faz o main ocupar o espaço disponível */
}

/* Estilo do rodapé */
footer {
    display: flex; 
    justify-content: space-between;
    margin-top: 5px;           /* Espaçamento acima do rodapé */
    padding: 5px;              /* Espaçamento interno do rodapé */
    background-color: #ff0000;   /* Cor de fundo branco */
    align-items: center;
}

footer span:nth-child(2) {
    position: absolute;
    left: 50%;              /* coloca o centro do elemento no meio */
    transform: translateX(-50%); /* corrige o deslocamento */
}

/* Estilo para centralizar os títulos */
h1 {
    text-align: center;             /* Centraliza o texto */
    color: #ff0202;               /* Define a cor do título como vermelho  (opcional) */
    margin-top: 10px;               /* Adiciona um espaço acima do título */
    margin-bottom: 10px;            /* Adiciona um espaço abaixo do título */
    font-size: 2.8em;               /* Responsivo */
}
h3, h2 {
    text-align: center;            /* Centraliza o texto */
    color: #8f0000;               /* Define a cor do título como vermelho forte (opcional) */
    font-size: 1.8em;               /* Responsivo */
}
p {
    color: #ff0000;      /* cor do texto */
    font-size: 20px;                /* Tamanho do texto */
    text-align: justify;          /* Justifica o texto */
    text-indent: 2em;             /* Recuo na primeira linha */
    margin: 5px 0; /* 5 pixels de margem superior e inferior */
}
li {
    color: #ff0000;      /* cor do texto */
    font-size: 20px;                /* Tamanho do texto */
    text-align: justify;          /* Justifica o texto */
}

/* Estilo para centralizar a imagem */
.centralizada {
    display: block;             /* Faz a imagem ser um bloco */
    margin: 0 auto;            /* Centraliza horizontalmente */
}

#imagem1 {
    max-width: 250px;
    width: 100%;
    height: auto;              /* Mantém a proporção da largura */
}

#imagem2, #imagem3, #imagem4, #imagem7, #imagem8, #imagem9, #imagem10, #imagem11, #imagem12, #imagem13, #imagem14 {
    max-width: 500px;
    width: 100%;
    height: auto;              /* Mantém a proporção da largura */
}
#imagem5, #imagem6 {
    max-width: 800px;
    width: 100%;
    height: auto;              /* Mantém a proporção da largura */
}

.credito {
    text-align: center;            /* Centraliza o texto */
    font-size: 0.7rem;                /* Tamanho do texto */
    text-indent: 0; /* Remove o recuo da primeira linha */
}

/* Alinhar à direita apenas a última coluna */
table td:last-child {
    text-align: right;
}

table {
    margin: 20px auto; /* Centraliza a tabela horizontalmente */
}

.centro {
    text-align: center;            /* Centraliza o texto */
    text-indent: 0; /* Remove o recuo da primeira linha */
}
.video {
    width: 100%; /* O vídeo ocupará 100% da largura do elemento pai */
    max-width: 800px; /* A largura máxima do vídeo será 800px */
    height: auto; /* Mantém a proporção do vídeo */
}

.cookie-popup {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    text-align: center;
    display: none;
    z-index: 1000;
}

.cookie-popup .cookie-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cookie-popup .cookie-content a {
    color: #ff0000;
    text-decoration: underline;
}

.cookie-popup .cookie-content button {
    background-color: #ff0000;
    color: black;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 5px;
}

.cookie-popup .cookie-content button:hover {
    background-color: #ffffff;
}

/* Margem para dispositivos móveis */
@media (max-width: 768px) { /* Ajuste a largura conforme necessário */
    .container {
        margin: 0 0.2cm;        /* Margem lateral de 0.2 cm, sem margem superior e inferior */
    }
    footer {
        margin-top: 0;           /* Espaçamento acima do rodapé */
        background-color: #f7b7d0;   /* Cor de fundo claro */
        border-top: 2px solid #000; /* Linha horizontal em dispositivos móveis */
        border-bottom: 2px solid #000; /* Linha horizontal em dispositivos móveis */
    }
    h2 {
        font-size: 1.5em;               /* Responsivo */
        margin: 0 0.2cm;        /* Margem lateral de 0.2 cm, sem margem superior e inferior */
    }
    .cookie-popup {
        margin: 0 0.2cm;
        width: 50%;
        font-size: 1.2em;
    }
}