.hero {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* mantém mesma altura entre texto e imagem */
    padding: 30px 50px;
    border-radius: 12px;
    gap: 2rem;
}

.hero-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-right: 20px;
}

.text-content {
    flex: 1; /* faz o bloco de texto crescer e ocupar espaço */
    display: flex;
    flex-direction: column;
    justify-content: center; /* centraliza verticalmente o h1 e p */
    padding: 40px 40px 40px 0;
}

.hero-text h1 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333;
}

.hero-text p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #555;
    margin: 0;
    line-height: 1.4;
}

.hero-text .btn {
    align-self: flex-start; /* mantém o botão à esquerda */
    margin-top: auto;       /* empurra o botão para o fim da coluna */
    text-decoration: none;
    background-color: #f2c94c;
    color: #000;
    padding: 10px 20px;
    border-radius: 5px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    transition: background-color 0.3s;
}

.hero-text .btn:hover {
    background-color: #e0b800;
}

.hero-img {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* alinha a imagem ao fundo da box */
}

.hero-img img {
    width: 100%;
    max-width: 650px;
    height: auto;
}

/* Configuração da página diferenca.html */

.cabecalho {
    text-align: center; /* Centraliza o conteúdo do container */
}

.cabecalho h1 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin: 20px 15px;
    color: #333;
    /* O h1 já está centralizado pelo text-align do pai */
}

.img {
    display: flex;            /* ativa o Flexbox */
    justify-content: center;  /* centraliza horizontalmente */
    align-items: center;      /* centraliza verticalmente */
    margin: 20px 0;           /* opcional: espaçamento acima e abaixo */
}

.img img {
    max-width: 100%;          /* para a imagem não ultrapassar o container */
    height: 300px;             /* mantém proporção */
}

.corpo {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;       /* deixa o texto mais legível */
    color: #333;             /* cor do texto */
    max-width: 800px;        /* limita a largura do conteúdo */
    margin: 0 auto;          /* centraliza horizontalmente */
    padding: 20px;
}

.corpo h3 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px; /* Reduzi o espaço abaixo do h3 */
    color: #333;
    text-align: left;
}

.corpo p {
    margin-bottom: 15px;
}

.corpo p.fonte {
    font-size: 0.9em;
    color: #555;
    margin-top: 20px;
}

.corpo ul {
    list-style: none;        /* remove bullets padrão */
    padding-left: 0;
    margin-bottom: 15px;
}

.corpo ul li {
    position: relative;
    padding-left: 25px;      /* espaço para o símbolo */
    margin-bottom: 10px;
}

.corpo ul li::before {
    content: '•';            /* símbolo do bullet */
    position: absolute;
    left: 0;
    color: #e0b800;          /* cor do bullet */
    font-weight: bold;
}

.corpo b {
    font-weight: bold;        /* garante que os <b> fiquem em negrito */
}

/* -------------------- Responsividade -------------------- */
@media (max-width: 768px) {
    .hero {
        padding: 20px;
        gap: 1rem;
    }

    .hero-text {
        flex: 1 1 48%; /* ajusta proporção */
    }

    .hero-img {
        flex: 1 1 48%;
    }

    .hero-img img {
        max-width: 100%;
    }

    .hero-text h1 {
        font-size: 22px;
    }

    .hero-text p {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .hero {
        flex-direction: column; /* imagem em cima, texto embaixo */
        
        gap: 15px;
        padding: 15px;
    }

    .hero-img {
        order: 1; 
        width: 100%;
        display: flex;
        justify-content: center; /* centraliza imagem */
    }

    .hero-img img {
        max-width: 60%;
        height: auto;
    }

    .hero-text {
        order: 2;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;    /* centraliza texto e botão */
        text-align: center;     /* centraliza parágrafos e h1 */
    }

    .hero-text h1 {
        font-size: 20px;
    }

    .hero-text p {
        font-size: 13px;
    }

    .hero-text .btn {
        padding: 8px 16px;
        font-size: 14px;
        align-self: center; /* centraliza botão */
    }
}