:root {
    --branco-principal: #FFFFFF;
    --cinza-secundario: #C0C0C0;
    --botao-azul: #167BF7;
    --cor-de-fundo: #00030C;
    --fonte-principal: 'Inter', sans-serif;
    --botao-azul-efeito: #3c92fa;
}

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

body {
    background-color: var(--cor-de-fundo);
    color: var(--branco-principal);
    font-family: var(--fonte-principal);
    font-size: 16px;
    font-weight: 400;
    overflow-x: hidden;
}

/* 1º Bloco - Hero Section sem vão em baixo */
.principal {
    background-image: url("img/Background.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 15%;
}

.container__caixa {
    max-width: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.container__titulo {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--branco-principal);
}

.container__imagem {
    margin: 1.5rem 0 2rem 0;
    max-width: 320px;
    width: 100%;
    height: auto;
}

.container__botao {
    background-color: var(--botao-azul);
    border-radius: 8px;
    padding: 1.1rem 1.5rem;
    color: var(--branco-principal);
    display: block;
    width: 100%;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.8rem;
    text-align: center;
    transition: all 0.25s ease;
}

.container__botao:hover {
    background-color: var(--botao-azul-efeito);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(22, 123, 247, 0.4);
}

.botao_secundario {
    background-color: transparent;
    border: 2px solid var(--branco-principal);
}

.botao_secundario:hover {
    background-color: var(--branco-principal);
    color: var(--cor-de-fundo);
}

.container__aviso {
    font-size: 11px;
    color: var(--cinza-secundario);
    margin-top: 0.4rem;
}

/* Seções Secundárias em Layout Quadrado/Compacto */
.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center; /* Centraliza as duas colunas do grid */
    padding: 3.5rem 15%;
    gap: 2rem;
}

.secundario {
    margin: 0;
}

.secundario__imagem {
    width: 100%;
    max-width: 480px;
    justify-self: center;
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.5));
}

/* Trava a largura da caixa de texto para formar um bloco quadrado/compacto */
.container__descricao {
    padding: 0;
    max-width: 420px; /* Impede o texto de ficar super largo */
    width: 100%;
}

.descricao__titulo {
    font-weight: 700;
    font-size: 2.2rem;
    color: var(--branco-principal);
    margin-bottom: 1rem;
    line-height: 1.25;
}

.descricao__texto {
    color: var(--cinza-secundario);
    line-height: 1.65;
    font-size: 1.1rem;
}

.secundario__botao {
    display: inline-block;
    margin-top: 1.5rem;
    width: auto;
    padding: 0.9rem 2.2rem;
}

/* Dispositivos */
.dispositivos {
    text-align: center;
    padding: 4rem 15% 2rem 15%;
}

.dispositivos__titulo {
    font-size: 2.2rem;
    color: var(--branco-principal);
    margin-bottom: 3rem;
}

.dispositivos__lista {
    display: flex;
    justify-content: center;
    gap: 5rem;
    list-style-type: none;
    flex-wrap: wrap;
}

.dispositivos__lista li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
}

.lista__item {
    font-size: 1.35rem;
    color: var(--branco-principal);
    font-weight: 700;
}

/* Rodapé */
.rodape {
    text-align: center;
    padding: 3rem 2rem 4rem 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.rodape__logo {
    margin-bottom: 1.5rem;
}

.rodape__lista {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    list-style-type: none;
    margin-bottom: 2rem;
}

.lista__link a {
    text-decoration: none;
    color: var(--branco-principal);
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.lista__link a:hover {
    color: var(--botao-azul);
}

.rodape__texto {
    margin: 0.8rem 0;
    color: var(--cinza-secundario);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Responsividade */
@media (max-width: 1024px) {
    .principal {
        background-image: none;
        justify-content: center;
        height: auto;
        padding: 5rem 5%;
    }

    .container {
        grid-template-columns: 1fr;
        padding: 3rem 5%;
        gap: 2.5rem;
        text-align: center;
    }

    .secundario:nth-child(even) {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }

    .container__descricao {
        max-width: 100%;
    }

    .descricao__titulo {
        font-size: 1.85rem;
    }

    .dispositivos__titulo {
        font-size: 1.75rem;
    }

    .dispositivos__lista {
        gap: 2.5rem;
    }
}