@media (max-width: 600px) {
    /* --- Layout Geral e Cores --- */
    :root {    
        /* Mantém as variáveis de cor para uso consistente */
        --Orange400: hsl(12, 88%, 59%);
        --Blue950: hsl(228, 39%, 23%);
        --Gray950: hsl(233, 12%, 13%);
        --Orange50: hsl(13, 100%, 96%);
        --Gray50: hsl(0, 0%, 98%);
    }
    
    body {
        /* Adiciona um padding para evitar que o conteúdo toque as bordas */
        padding: 0 10px;
        overflow-x: hidden; /* Previne scroll horizontal acidental */
    }

    /* --- Header e Navegação (Menu Mobile) --- */
    header {
        justify-content: space-between;
        padding: 40px 10px;
        position: relative; /* Importante para que a logo e o botão de menu fiquem na frente do overlay */

        justify-content: space-between;
        padding: 40px 10px;
    }
    header .img, .btn-menu{
        z-index: 1000;
    }

    header .div-links {
        /* Esconde a navegação desktop */
        display: none;
    }

    .btn-menu {
        /* Mostra o botão do menu hambúrguer */
        display: block;
        background: none;
        border: none;
        font-size: 24px;
        color: var(--Gray950);
        cursor: pointer;
    }

    /* O menu suspenso (mobile) que deve ser controlado via JS (adicionado apenas para estilização) */
    .div-links-menu {
       position: fixed;
       top:0;
       left: 0;
       width: 100%;
       height: 100vh;
       display: flex;
       justify-content: center;
       align-items: flex-start;
       z-index: 999;
       display: none;
       background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.508));
       transition: opacity 0.3s ease-in-out visibility 0.3s ease-in-out;
    }

    .div-links-menu div{
        background-color: var(--Gray50);
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .div-links-menu div a{
        text-decoration: none;
        color: var(--Gray950);
    }
    .div-links-menu.ativo{
        display: flex;
        opacity: 1;
        visibility: visible;
    }

    .div-links-menu .menu-content{
        background-color: var(--Gray50);
        width: 90%;
        max-width: 350px;
        padding: 30px 20px;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 100px;
        position: relative;
    }
    
    .div-links-menu .links {
        padding: 10px 0;
        font-weight: 700;
        color: var(--Blue950);
        margin: 5px 0;
    }
    
    .div-links-menu .btn_get-started {
        display: none; /* O botão no menu suspenso não é usado no design mobile */
    }

    /* --- Main (Estrutura Grid) --- */
    main {
        display: block; /* Volta para layout de bloco para fluxo vertical */
    }

    /* --- Seção de Introdução (#intro) --- */
    main #intro {
        flex-direction: column-reverse; /* Imagem primeiro, depois texto */
        text-align: center;
        padding: 0;
    }
    
    main #intro .intro-img {
        width: 100%;
        margin-bottom: 30px;
    }
    
    main #intro .intro-img img {
        max-width: 100%;
        height: auto;
    }

    main #intro .intro-content {
        width: 100%; /* Ocupa a largura total */
        align-items: center;
        padding: 0 20px;
    }

    main #intro .intro-content h1 {
        font-size: 2.5em; /* Reduz o tamanho do título */
        margin-top: 0;
    }

    main #intro .intro-content p {
        font-size: 1.1em;
        margin: 20px 0;
        padding: 0 10px;
    }

    main #intro .intro-content .btn2 {
        width: auto; /* Deixa o botão se ajustar ao padding */
        margin-bottom: 50px;
    }
    
    /* --- Seção de Vantagens (#advantages) --- */
    main #advantages {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
        margin: 50px 0;
        padding: 0 20px;
    }

    main #advantages .advantages-content {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    main #advantages .advantages-content h1 {
        font-size: 2em;
    }

    main #advantages .advantages-content p {
        font-size: 1.1em;
    }
    
    main #advantages .advantages-items {
        width: 100%;
        align-items: flex-start;
    }
    
    main #advantages .advantages-items div {
        width: 100%;
    } 

    main #advantages .advantages-items div .ad-item {
        /* Ajusta o layout do item de vantagem */
        margin-bottom: 40px;
    } 

    main #advantages .advantages-items div .ad-item h3 {
        display: flex;
        align-items: center;
        background-color: var(--Orange50); /* Cor de fundo para mobile */
        padding: 5px 0;
        border-radius: 5px;
        color: var(--Blue950);
        font-size: 1.1em;
    }

    main #advantages .advantages-items div .ad-item h3 .number-item {
        /* O item numerado laranja */
        flex-shrink: 0; /* Impede que o número encolha */
        margin-right: 15px;
        border-radius: 20px;
        padding: 4px 25px;
        background-color: var(--Orange400);
        color: var(--Gray50);
    }
    
    main #advantages .advantages-items div .ad-item p {
        /* Alinha o texto da descrição */
        padding: 10px 0 0 70px; /* Alinha com o texto do título */
        font-size: 1.05em;
        line-height: 1.6;
        color: var(--Blue950);
    }

    /* --- Seção de Depoimentos (#testimonials) --- */
    main #testimonials {
        padding: 50px 0;
    }
    
    main #testimonials .title {
        font-size: 2em;
        margin-bottom: 20px;
    }
    
    main #testimonials .testimonials-list .avatar-container {
        /* Define a largura para que apenas um depoimento seja visível (ou a maior parte) */
        min-width: 85%;
        padding: 30px 10px;
    }
    
    main #testimonials .testimonials-list .avatar-container img {
        width: 70px;
        height: 70px;
        object-fit: cover;
        margin-bottom: 10px;
    }
    
    main #testimonials .testimonials-list .avatar-container h4 {
        margin-bottom: 15px;
        color: var(--Blue950);
    }
    
    main #testimonials .testimonials-list .avatar-container p {
        font-size: 1em;
        line-height: 1.6em;
        color: var(--Blue950);
    }
    
    /* --- Seção Simplify (#simplify-how) --- */
    main .simplify-how {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-image: url("images/bg-simplify-section-mobile.svg"); /* Se existir, senão usa o desktop */
        background-position: center;
        padding: 80px 20px;
    }

    main .simplify-how h1 {
        font-size: 2em;
        margin-bottom: 30px;
        line-height: 1.3;
    }
    
    main .simplify-how .btn_get-started {
        background-color: var(--Gray50); /* Botão branco */
        color: var(--Orange400);
        padding: 12px 30px;
    }

    /* --- Footer --- */
    footer {
        flex-direction: column-reverse; /* Reverte a ordem para o layout mobile */
        align-items: center;
        text-align: center;
        padding: 50px 20px;
        gap: 50px;
    }
    
    footer .form {
        width: 100%;
        order: -1; /* Coloca o formulário no topo */
    }
    
    footer .form div {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0;
        width: 100%;
    }
    
    footer .form div input {
        flex-grow: 1;
        margin-right: 5px;
    }
    
    footer .form span {
        margin: 30px 0px;
    }
    
    footer .footer-links {
        width: 100%;
        justify-content: space-around;
        gap: 0;
    }
    
    footer .footer-links div {
        align-items: flex-start;
    }
    
    footer .logo-container {
        width: 100%;
        height: auto;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
    }

    footer .logo-container div img {
        /* Garante que o logo use a versão branca para o footer escuro */
        filter: brightness(0) invert(1); 
    }
    
    footer .logo-container .social {
        display: flex;
        justify-content: space-around;
        width: 100%;
        max-width: 250px;
    }
    
    footer .logo-container .social + span {
        display: block;
        color: hsl(228, 39%, 75%); /* Cor mais clara */
        font-size: 0.8em;
        margin-top: 30px;
    }
    
    /* Alinhamento do logo para mobile */
    footer .logo-container > div:first-child {
        margin-top: 20px;
    }
    
    /* Ajuste final para o logo para ter a cor correta */
    footer .logo-container > div:first-child img {
        content: url('images/logo.svg'); /* Assumindo que você tem uma logo branca */
        width: 120px;
    }
}