/* ================================================================
   RESPONSIVO.CSS - LAYOUT MOBILE BASEADO NO DESKTOP
   Novo layout mobile proporcional sem sobreposições
   ================================================================ */

/* Media query principal para mobile - mostrar #mobile e ocultar #desktop */
@media only screen and (max-width: 960px) {    
    #mobile { display: block; }
    #desktop { display: none; }
}

/* Media query para orientação landscape - aplicar mesmo tratamento do mobile */
@media only screen and (orientation: landscape) and (max-height: 768px) {
    #mobile { display: block; }
    #desktop { display: none; }
}

/* ================================================================
   LAYOUT MOBILE BASEADO NO DESKTOP
   ================================================================ */

@media only screen and (max-width: 960px) {
    
    /* HEADER MOBILE */
    #mobile #header {
        background-color: #000;
        text-align: center;
        padding: 4vw 0 0 0;
    }
    
    #mobile #header img {
        width: 25vw;
        max-width: 200px;
        height: auto;
        /*align-self: center; */
    }
    
    /* HERO SECTION MOBILE - Baseado no desktop */
    #mobile #hero {
        width: 100%;
        background: #000;
        background: #0090a5;
        color: #fff;
        position: relative;
        padding: 0 0 2.4vw 0;
        overflow: hidden;
        min-height: 16vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    
    /* Título principal - adaptado do desktop */
    #mobile #hero h1 {
        color: #fff;
        font-weight: bold;
        font-size: 6vw;
        line-height: 1.2;
        text-align: center;
        margin: 8vw 0 6vw 0;
        padding: 0 4vw;
        z-index: 10;
        position: relative;
        order: 2;
    }
    
    /* Container da chamada - adaptado do desktop */
    #mobile #hero .chamada-esquerda {
        width: 100%;
        position: relative;
        z-index: 5;
        order: 1;
    }
    
    /* Imagem principal - responsiva */
    #mobile #hero .chamada-esquerda img {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    
    /* Texto da chamada - adaptado do desktop */
    #mobile #hero p.texto-chamada {
        width: 100%;
        background: #0090a5;
        color: #fff;
        padding: 2vw;
        margin: 0;
        font-size: 3.5vw;
        line-height: 1.4;
        text-align: justify;
        position: relative;
        z-index: 10;
    }
    
    /* Imagem seta-left - oculta no mobile para evitar sobreposições */
    #mobile #hero img.seta-left {
        display: none;
    }
    
    /* SEÇÃO DE CONTEÚDO - Título das etapas */
    #mobile #conteudo {
        padding: 8vw 4vw;
        text-align: center;
        background: #fff;
    }
    
    #mobile #conteudo h1#titulo_intro {
        font-size: 6vw;
        color: #0090a5;
        margin: 0 0 2vw 0;
        line-height: 1.3;
    }
    
    #mobile #conteudo h1#titulo_intro .slow {
        display: block;
        color: #000;
        font-size: 4vw;
        font-weight: normal;
        margin-bottom: 2vw;
    }
    
    /* SEÇÃO TÓPICOS MOBILE - Baseada no desktop mas sem posicionamento absoluto */
    #mobile #topicos_mobile {
        position: relative;
        background: #f8f8f8;
        padding: 8vw 4vw;
        overflow: hidden;
    }
    
    /* Imagem de fundo dos números - responsiva */
    #mobile #topicos_mobile .bg-numbers {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto 6vw auto;
        opacity: 0.1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }
    
    /* Container dos tópicos */
    #mobile #descricao {
        position: relative;
        z-index: 2;
    }
    
    /* Tópicos individuais - layout vertical limpo */
    #mobile #descricao .topico_mobile {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 3vw;
        padding: 5vw;
        margin-bottom: 4vw;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 10;
    }
    
    #mobile #descricao .topico_mobile strong {
        font-size: 4.5vw;
        color: #0091a7;
        font-weight: bold;
        display: block;
        margin-bottom: 2vw;
    }
    
    #mobile #descricao .topico_mobile p {
        font-size: 3.2vw;
        line-height: 1.4;
        margin: 0;
        color: #333;
    }
    
    /* Chamada para contato */
    #mobile #conteudo h2.titulo-chamada {
        font-size: 5vw;
        color: #0091a7;
        text-align: center;
        margin: 6vw 0 0 0;
        padding: 4vw;
    }
    
    /* RODAPÉ MOBILE - Baseado no desktop */
    #mobile #rodape_mobile {
        background-color: #000;
        padding: 8vw;
        color: #fff;
        position: relative;
    }
    
    /* Assinatura */
    #mobile #rodape_mobile #assinatura {
        text-align: center;
        margin-bottom: 6vw;
    }
    
    #mobile #rodape_mobile #assinatura img {
        width: 30vw;
        max-width: 200px;
        height: auto;
        margin-bottom: 4vw;
    }
    
    #mobile #rodape_mobile #assinatura #infos div strong {
        color: #fff;
        display: block;
        margin-bottom: 1vw;
        font-size: 3.5vw;
    }
    
    #mobile #rodape_mobile #assinatura #infos div a {
        color: #fff;
        text-decoration: none;
        font-size: 3vw;
        display: block;
        margin-bottom: 3vw;
    }
    
    /* Formulário */
    #mobile #rodape_mobile #formulario {
        width: 100%;
    }
    
    #mobile #rodape_mobile #formulario .linha {
        margin-bottom: 4vw;
        display: flex;
        flex-direction: column;
    }
    
    #mobile #rodape_mobile #formulario label {
        color: #fff;
        font-size: 3.5vw;
        margin-bottom: 2vw;
        display: block;
    }
    
    #mobile #rodape_mobile #formulario input,
    #mobile #rodape_mobile #formulario textarea {
        width: 100%;
        padding: 3vw;
        background-color: transparent;
        border: 1px solid #0090a5;
        color: #fff;
        font-size: 3.5vw;
        box-sizing: border-box;
    }
    
    #mobile #rodape_mobile #formulario textarea {
        min-height: 20vw;
        resize: vertical;
    }
    
    #mobile #rodape_mobile #formulario button {
        background: #0090a4;
        border: none;
        color: #fff;
        padding: 4vw 8vw;
        font-size: 4vw;
        cursor: pointer;
        border-radius: 1vw;
        margin-top: 4vw;
        width: 100%;
    }
    
    #mobile #rodape_mobile #formulario button:hover {
        background-color: #056775;
    }
    
    #mobile #rodape_mobile #formulario .captcha {
        margin: 4vw 0;
        display: flex;
        justify-content: center;
    }
    
    /* Copyright */
    #mobile #rodape_mobile #copyright {
        color: #666;
        text-align: center;
        margin-top: 6vw;
        font-size: 2.8vw;
    }
}

/* ================================================================
   AJUSTES PARA TABLETS (768px - 960px)
   ================================================================ */

@media only screen and (min-width: 768px) and (max-width: 960px) {
    
    /* Ajustes específicos para tablets */
    #mobile #hero {
        min-height: 75vh;
        padding: 6vw 0 10vw 0;
    }
    
    #mobile #hero h1 {
        font-size: 5vw;
    }
    
    #mobile #hero p.texto-chamada {
        font-size: 3vw;
    }
    
    #mobile #conteudo h1#titulo_intro {
        font-size: 5vw;
    }
    
    #mobile #conteudo h1#titulo_intro .slow {
        font-size: 3.5vw;
    }
    
    #mobile #descricao .topico_mobile strong {
        font-size: 4vw;
    }
    
    #mobile #descricao .topico_mobile p {
        font-size: 2.8vw;
    }
    
    /* Rodapé em duas colunas para tablets */
    #mobile #rodape_mobile {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
    }
    
    #mobile #rodape_mobile #assinatura {
        width: 45%;
        margin-bottom: 0;
    }
    
    #mobile #rodape_mobile #formulario {
        width: 50%;
    }
    
    #mobile #rodape_mobile #copyright {
        width: 100%;
        margin-top: 4vw;
    }
}

/* ================================================================
   AJUSTES PARA ORIENTAÇÃO LANDSCAPE
   ================================================================ */

@media only screen and (orientation: landscape) and (max-height: 768px) {
    
    /* Ajustar altura mínima do hero em landscape */
    #mobile #hero {
        min-height: 60vh;
        padding: 4vw 0 16vw 0;
        margin-bottom: 10vw;
    }
    
    #mobile #hero h1 {
        font-size: 7vw;
        margin-top: 12vw;
        margin-bottom: 1vw;
    }
    
    #mobile #hero p.texto-chamada {
        font-size: 4vw;
    }
    
    /* Reduzir espaçamentos em landscape */
    #mobile #conteudo {
        padding: 6vw 4vw;
    }
    
    #mobile #topicos_mobile {
        padding: 6vw 4vw;
    }
    
    #mobile #descricao .topico_mobile {
        padding: 4vw;
        margin-bottom: 3vw;
    }
    
    #mobile #rodape_mobile {
        padding: 6vw;
    }
}

/* ================================================================
   AJUSTES PARA TELAS MUITO PEQUENAS (max-width: 480px)
   ================================================================ */

@media only screen and (max-width: 480px) {
    
    #mobile #header img {
        width: 40vw;
    }
    
    #mobile #hero {
        min-height: 60vh;
        padding: 6vw 0 15vw 0;
    }
    
    #mobile #hero h1 {
        font-size: 7vw;
    }
    
    #mobile #hero p.texto-chamada {
        font-size: 4vw;
    }
    
    #mobile #conteudo h1#titulo_intro {
        font-size: 7vw;
    }
    
    #mobile #conteudo h1#titulo_intro .slow {
        font-size: 4.5vw;
    }
    
    #mobile #descricao .topico_mobile strong {
        font-size: 5vw;
    }
    
    #mobile #descricao .topico_mobile p {
        font-size: 3.8vw;
    }
}