*, *::before, *::after 
{
    box-sizing: border-box;
}

/* *seletor universal - seleciona todos os elementos da página ex: div, a, h1...
    ::before ::after "como conteúdo fantasma", que o css pode criar antes ou depois de um elemento, sem precisar do HTML
    border-box tamanho total, sem somar "separado" o valor das propriedades;*/

html, body
{
    background-color: #F8F8FF;
    padding: 0;
    margin: 0;
    max-width: 100%;
    overflow-x: hidden; /* impede o estouro horizontal */
}

header
{
    background-image: linear-gradient(to top, #040030, #0d0166, #040030);
}

#topo
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px; 
}

#topo img
{
    width: 40px;
    margin-left: 10px;
}

.topo-conteudo
{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 20px;
    color: #F8F8FF;
}

.topo-conteudo h1
{
    margin: 0 15px 0 0;
    font-size: clamp(1rem, 3vw, 1.5rem);
}

.topo-link
{
    margin: 5px;
    margin-top: 10px;
    background-color: #11e80a;
    color: #040030;
    padding: 8px;
    border-radius: 20px;
    font-size: 1.0rem;
    cursor: pointer;
    text-decoration: none;
}

.topo-link:hover
{
    background-color: #6cf467;
}

.subtitulo
{
    text-align: left;
    font-size: clamp(0.95rem, 2.5vw, 1.2rem); 
    margin: 10px 10px 4px 10px;              
    padding: 0;
}

main
{
    width: 100%;
    box-sizing: border-box;
}

.servicos
{
    flex-wrap: wrap;
    background-image: linear-gradient(to top, #040030, #0d0166, #040030);
    display: flex;
    justify-content: center;
    padding: 10px;
}

.servicos, 
#selecoes, 
.apresentacao 
{
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}


.opcao
{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1 1 260px;
    max-width: 100%; /*obriga a mesma largura nos cards*/
    padding: 10px 10px;
    background-color: #F8F8FF;
    margin: 20px;
    border-radius: 10px;
    text-align: center;
    justify-content: space-between; /*empurra o botão, alinha os itens*/
}

.opcao img
{
    width: 100%; 
    height: 120px; /* Altura fixa para alinhar todos */
    object-fit: contain; /* Garante que a imagem não distorça */
    margin-bottom: 15px;
}

.opcao p
{
    text-align: justify;
}

.opcao h3
{
    text-align: left;
    font-size: clamp(0.95rem, 2.5vw, 1.2rem); 
    margin: 10px 10px 4px 10px;              
    padding: 0;
}

.valor
{
    color: #000;
}

.seleciona
{
    margin: 5px;
    margin-top: 10px;
    background-color: #11e80a;
    padding: 8px;
    border-radius: 10px;
    border-style: outset;
    border-color: #11e80a;
    font-size: 1.0rem;
    cursor: pointer;
}

.seleciona:hover
{
    background-color: #6cf467;
}

#selecoes
{
    background-image: linear-gradient(to top, #040030, #0d0166, #040030);
    display: flex;
    flex-direction: column;
}

#lista
{
    color: #F8F8FF;
}

#total
{
    margin-left: 10px;
    color: #F8F8FF;
}

#finalizar,
#btnFechar
{
    width: fit-content; /* só ocupa o espaço necessário */
    margin: 10px;
    margin-top: 10px;
    background-color: #11e80a;
    padding: 8px;
    border-radius: 10px;
    border-style: outset;
    border-color: #11e80a;
    font-size: 1.0rem;
    cursor: pointer;
}

#finalizar:hover
{
    background-color: #6cf467;
}

.apresentacao
{
    background-image: linear-gradient(to top, #040030, #0d0166, #040030);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #F8F8FF;
}

.apresentacao img
{
    width: 60%;
    object-fit: contain; /* Garante que a imagem não distorça */
    margin: 20px;
}

.apresentacao h2
{
    margin: 5px;
    min-width: 150px; /* garante largura mínima para o texto respirar */
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: clamp(1.2rem, 3vw, 1.8rem); /* tamanho proporcional à tela */
    white-space: nowrap; /* impede quebra de linha indesejada */
}

.apresentacao p
{
    text-align: justify;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px;
}

footer
{
    margin-top: 20px;
}

#rodape
{
    background-image: linear-gradient(to top, #040030, #0d0166, #040030);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#rodape img
{
    height: 40px;
}

#rodape p
{
    margin: 10px;
    display: flex;
    align-items: center;
    color: #F8F8FF;
}

#final-links
{
    margin: 10px;
}

@media (min-width: 768px) /*largura de tela mínima 768pixels*/
{
    main
    {
        width: 100%;
    }

    .servicos,
    .apresentacao
    {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .apresentacao 
    {
        display: flex;
        flex-direction: row;
    }

    .apresentacao img 
    {
        width: 20%;
    }

    .servicos 
    {
        display: flex;
    }
}

dialog {
    padding: 10px 10px;
    font-size: clamp(1.2rem, 3vw, 1.8rem); /* tamanho proporcional à tela */
    color: #F8F8FF;
    border: 5px;
    border-style: outset;
    border-color: #040030;
    background-image: linear-gradient(to top, #040030, #0d0166, #040030);
    border-radius: 15px 
}

span {
    font-family: 'Times New Roman', Times, serif; /*Fonte*/
    color: #F8F8FF;
    margin: 10px auto; /*espaço nas laterais*/
    font-size: 25px; /*tamanho da fonte*/
    display: flex;
    flex-direction: column;
    padding: 10px; /*área ao redor da escrita*/
    text-align: center;
}