/* ==================================================================
   Estilos Gerais e Reset
   ================================================================== */
   * {
    font-family: 'Roboto', sans-serif; /* Define a fonte padrão */
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Garante que o padding e a borda não afetem a largura */
}

body {
    display: flex;
    flex-direction: column; /* Organiza os elementos na coluna */
    height: 100vh; /* Faz o body ocupar toda a altura da tela */
    background-color: #1A1A1A;
    line-height: 1.6;
    font-size: 1rem; /* Usando rem para fonte */
}

/* Conteúdo principal (main) */
main {
    flex: 1; /* Faz o conteúdo ocupar o espaço restante */
    padding: 20px;
}

/* ==================================================================
   Estilos para Telas Maiores (1024px e acima)
   ================================================================== */
   @media only screen and (min-width: 1024px) {
    
    /* Estilos para o Header e Logo */
    header {
    position: relative; /* Garante que o logo seja posicionado relativamente ao header */
    z-index: 100; /* Garante que o header fique acima de outros elementos */
    }

    .logo-title {
        position: absolute;
        top: 1.5rem; /* Ajuste a distância do topo conforme necessário */
        left: 2rem; /* Ajuste a distância da esquerda conforme necessário */
        z-index: 101; /* Garante que o logo fique acima do menu lateral */
    }
    
    .logo-title a {
        color: #979797;
        font: 550 1.626rem / 1.75rem DIN_Regular, Arial, Verdana, sans-serif;
        font-style: italic;
        text-decoration: none; /* Remove o sublinhado do link */
    }

    .center-text {
        color: white;
        font-weight: 700;
        font-size: 2.25rem;
        line-height: 2.5rem;
        margin-top: 5rem;
        text-align: center;
    }

    .central-box {
        margin-top: 10vh;
        display: flex;
        justify-content: center;
    }
    
    .sub-box {
        background-color: #DDDEE0;
        margin: 2%;
        height: 600px;
        width: 21%; /* Usando % para responsividade */
        position: relative;
        border-radius: 1rem;
        border: 2px solid transparent;
    }

    .sub-box.highlight {
        border: 2px solid #F4A10B; /* Borda dourada */
        background-color: #E8E5C7;
    }

      .popular-badge {
        position: absolute;
        top: -1rem; /* Ajuste a posição para ficar logo acima da borda */
        left: 50%;
        transform: translateX(-50%); /* Centraliza a caixinha */
        background-color: #F4A10B;
        color: white;
        padding: 0.25rem 1rem;
        border-radius: 10px;
        font-weight: bold;
        font-size: 1rem;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Sombra suave para destacar */
    }

    .logo-box{
        box-sizing: border-box;
        text-align: center;
    }

    .logo-box i {
        color: #FF5722;
        font-size: 60px;
        padding-top: 20px;
    }

    h3 {
        text-align: center;
        font-size: 26px;
        padding: 15px;
    }

    .description{
        text-align: center;
        font-size: 18px;
        padding: 15px;
    }

    .price{
        text-align: center;
        font-size: 26px;
        padding: 15px;
        font-weight: bold;
    }

    #plan-options {
        width: 80%; /* Torna a largura proporcional à tela */
        max-width: 330px; /* Limita a largura máxima para não exagerar em telas grandes */
        height: 2.5rem; /* Usando rem para tornar a altura relativa ao tamanho da fonte */
        margin-left: 2rem;
        background-color: #ffffff80;
        border-radius: 8px; /* Para suavizar os cantos */
    }

    ul {
        list-style-type: none;
        padding-left: 15px;
    }

    ul li {
        padding: 5px;
    }

    .contractBtn {
        font: 1rem / 1.25rem Roboto, Helvetica, Arial, Verdana, sans-serif;
        font-weight: 600;
        position: absolute;
        color: white;
        border-radius: 10px;
        margin-left: 25px;
        width: 90%; /* Percentual para responsividade*/
        height: 3rem;
        bottom: 25px;
        background-color: black;
        border: 0px solid var(--cor-borda); /* Borda sutil */
        transition: background-color 0.3s; /* Transição suave na cor de fundo */
    }

    .contractBtn:hover {
        font-size: 16px;
        cursor: pointer;
        background-color: rgb(78, 75, 75);
    }

    .contractBtn-central{
        font: 1rem / 1.25rem Roboto, Helvetica, Arial, Verdana, sans-serif;
        font-weight: 600;
        position: absolute;
        color: white;
        border-radius: 10px;
        margin-left: 25px;
        width: 90%; /* Percentual para responsividade*/
        height: 3rem;
        bottom: 25px;
        background-color: #F4A10B;
        border: 0px solid var(--cor-borda); /* Borda sutil */
        transition: background-color 0.3s; /* Transição suave na cor de fundo */
    }

    .contractBtn-central:hover {
        font-size: 16px;
        cursor: pointer;
        background-color: #ce8602;
    }

    footer {
        color: #979797;
        text-align: center;
        padding-top: 1rem;
        margin-top: auto; /* Isso empurra o footer para o final */
    }

    footer ul {
        list-style: none;
        padding: 0;
    }

    footer ul li {
        display: inline;
        margin: 0 1rem;
    }

    footer ul li a {
        color: #979797;
        text-decoration: none;
    }

    footer ul li a:hover {
        text-decoration: underline;
    }
}

/* ==================================================================
   Estilos para Telas Menores (500px e abaixo)
   ================================================================== */
@media only screen and (max-width: 500px) {
    
    #plan-options {
        width: 90%; /* Em telas pequenas, ocupa 90% da largura */
        height: 2.25rem; /* Reduz um pouco a altura em telas menores */
    }
    
    footer {
        color: #979797;
        text-align: center;
        padding-top: 10px;
        margin-top: auto; /* Isso empurra o footer para o final */
    }

    footer ul {
        list-style: none;
        padding: 0;
    }

    footer ul li {
        display: inline;
        margin: 0 10px;
    }

    footer ul li a {
        color: #979797;
        text-decoration: none;
    }

    footer ul li a:hover {
        text-decoration: underline;
    }
}