/* =============================================================================================
                              --- Código CSS para Desktop Grandes ---
============================================================================================= */
/* ------------------- IMPORTAR TIPOGRAFIAS -------------------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

/* -------------------------- BANNER --------------------------- */
.banner {
    background-image: url("../images/IMG-20250918-WA0003.jpg");
    height: 514px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.text-banner {
    display: flex;
    color: var(--neutral-text-color);
    position: relative;
}

.text-banner div { width: 550px; }
.text-banner .title { font-size: 2.4rem; margin-bottom: 20px; }
.text-banner .text { font-size: 1.1rem; text-align: center; }

.text-banner img:first-of-type { 
    width: 145px;
    height: fit-content;
    transform: rotate(5deg);
    margin-right: -25px;
}

.text-banner img:nth-of-type(2) { 
    width: 120px;
    height: fit-content;
    transform: rotate(35deg);
    margin-left: -30px;
    margin-top: 20px;
}

/* ------------------------- HISTÓRIA -------------------------- */
.box-historia {
    position: relative;
    width: calc(var(--base-resolution-width) - 150px); 
    margin: 30px auto 0;
}

.icone-flutuante { position: absolute; }
.box-historia .icone-flutuante:nth-of-type(1) { width: 100px; top: -50px; left: 40px; }
.box-historia .icone-flutuante:nth-of-type(2) { width: 150px; bottom: -110px; left: -200px; }
.box-historia .icone-flutuante:nth-of-type(3) { width: 70px; top: 30px; right: calc(-20vw + 210px); }
.box-historia .icone-flutuante:nth-of-type(4) { width: 100px; bottom: -140px; right: 70px; }

.title { 
    color: var(--third-color);
    text-align: center;
    font-size: 2.2rem; font-family: 'Fredoka'; font-weight: bold; 
}

.box-historia > .text:nth-of-type(2) { margin-top: 20px; }
.text {
    color: var(--third-color);
    text-align: justify;
    font-size: 1.05rem; font-family: 'Nunito'; font-weight: 700;
    margin-top: 10px;
}

/* ---------------------- LINHA DO TEMPO ----------------------- */
.align {
    display: flex;
    flex-direction: column;
    justify-content: center; align-items: center;

    margin: 70px 0 0;
}

.timeline {
    position: relative;
    max-width: var(--base-resolution-width);
    margin: 20px 48% 20px 51%;
}

.timeline .icone-flutuante:nth-of-type(1) { width: 100px; top: 200px; right: calc(-20vw + 100px); }
.timeline .icone-flutuante:nth-of-type(2) { width: 120px; bottom: 180px; left: calc(-18vw); }
.timeline .icone-flutuante:nth-of-type(3) { width: 70px; bottom: 80px; right: calc(-25vw + 210px); }

.timeline::after {
    content: '';
    position: absolute;
    width: 10px;
    background-color: #FF013A;
    top: 90px;
    bottom: 0;
    border-radius: 10px;
    height: 65%;
}

.content {
    padding: 20px 30px;
    position: relative;
    border-radius: 6px;
    margin-bottom: 25px;
    margin-left: 30px;
    width: 45vw;
}

.content p:nth-of-type(1) { text-align: left; font-size: 1.9rem; }
.content p:nth-of-type(2) { width: 45vw; }

.container {
    padding: 0px 40px;
    position: relative;
    background-color: inherit;
}

.container::after {
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 95px;
    height: 95px;
    margin-left: -33px;
    background-color: #FCBF0E;
    border: 4px solid #FCBF0E;
    top: 35px;
    border-radius: 50%;
    z-index: 1;
    font-size: 1.8rem;
    font-family: 'Fredoka';
    font-weight: 700;
    text-align: center;
    line-height: 45px;
}

.container-content1::after{
    content: '1997';    
}
.container-content2::after{
    content: '2012';    
}
.container-content3::after{
    content: '2013';    
}

.right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
}

.right::after { left: -16px; }

/* ----------------- MISSÃO, VISÃO E VALORES ------------------- */
.mvv {
    display: flex;
    justify-content: center; align-items: center;
    column-gap: 60px;
    
    background-image: url("../images/bg_yellow_continuous_wave.png");
    background-size: cover; background-repeat: no-repeat;
    padding: 230px 0 80px;
}

.mvv .topic {
    display: flex;
    flex-direction: column;
    background-color: white;
    width: 340px;
    padding: 40px 40px 40px;
    border-radius: 20px;
    text-align: center;
}

.mvv .topic img {
    width: 100px;
    margin: -70px auto 0;
}

.mvv .title {
    font-size: 1.8rem;
    margin-top: 10px;
}

.mvv .subtitle {
    color: var(--light-text-color);
    font-size: 1.3rem; font-family: 'Fredoka'; font-weight: bold;
    margin-top: 5px;
}

.mvv .text {
    font-size: 1.05rem; margin-top: 20px;
}

/* =============================================================================================
                             --- Media Query para Desktop Menores ---
============================================================================================= */
@media (max-width: 1366px) and (min-width: 981px) {
    /* ------------------------- HISTÓRIA -------------------------- */
    .box-historia .icone-flutuante:nth-of-type(1) { width: 90px; top: -35px; left: -10px; }
    .box-historia .icone-flutuante:nth-of-type(3) { top: -25px; right: calc(-20vw + 190px); }

    /* ---------------------- LINHA DO TEMPO ----------------------- */
    .timeline { margin: 20px 46% 20px 51%; }
    .container::after {
        width: 90px; height: 90px;
        top: 45px;
    }
    .right::after { left: -10px; }

    .timeline .icone-flutuante:nth-of-type(1) { width: 90px; top: 200px; right: calc(-20vw + 65px); }

    /* ----------------- MISSÃO, VISÃO E VALORES ------------------- */
    .mvv { background-size: 100% 105%; padding: 180px 0 60px; column-gap: 30px; }
    .mvv .topic { width: 27%; padding: 40px 20px; }
    .mvv .topic img { margin: -90px auto 0; }
}

/* =============================================================================================
                                --- Media Query para Celulares ---
============================================================================================= */
@media screen and (max-width: 980px) {
    /* -------------------------- BANNER --------------------------- */
    .banner { 
        height: 400px;
        background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; 
    }

    .text-banner div { width: calc(var(--base-resolution-width) - 100px); max-width: 500px; }

    .text-banner img:first-of-type { 
        position: absolute;
        left: -80px; top: -40px;
        width: 105px;
        transform: rotate(325deg);
    }

    .text-banner img:nth-of-type(2) {
        position: absolute;
        right: -65px; top: -45px;
        width: 90px;
        transform: rotate(65deg);
    }

    /* ------------------------- HISTÓRIA -------------------------- */
    .box-historia { width: calc(var(--base-resolution-width) - 50px); max-width: 600px; }

    .box-historia .icone-flutuante:nth-of-type(1) { width: 90px; top: -50px; left: -60px; }
    .box-historia .icone-flutuante:nth-of-type(3) { width: 70px; top: -20px; right: calc(-20vw + 100px); }
    .box-historia .icone-flutuante:nth-of-type(4) { bottom: -110px; right: 15px; }

    /* ---------------------- LINHA DO TEMPO ----------------------- */
    .align { margin-top: 50px; }
    .timeline { margin: 20px 46% 20px 53%; }
    .content p:nth-of-type(2) { width: 55vw; max-width: 460px; }
    .content { margin-left: 10px; }
    
    .content .text { text-align: left; }

    .container::after { width: 80px; height: 80px; top: 45px; }
    .right::after { left: 25px;}

    .timeline .icone-flutuante:nth-of-type(1) { right: calc(-20vw + 90px); }
    .timeline .icone-flutuante:nth-of-type(3) { display: none; }

    /* ----------------- MISSÃO, VISÃO E VALORES ------------------- */
    .mvv { 
        background-size: 300% 105%;
        flex-direction: column; row-gap: 60px; 
        padding: 200px 0 60px;
    }
    .mvv .topic { width: 80%; max-width: 600px; padding: 40px 20px 40px; }
    .mvv .topic img { width: 90px; margin: -80px auto 0; }
    .mvv .text { margin-top: 15px; }

    /* -------------------- DEMAIS RESPONSIVO ---------------------- */

    /* Place the timelime to the left */
    .timeline::after {
        left: 31px;
    }

    /* Full-width containers */
    .container {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

    /* Make sure that all arrows are pointing leftwards */
    .container::before {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }

    /* Make all right containers behave like the left ones */
    .right {
        left: 0%;
    }

    /* --- ADIÇÃO: Correção de largura do conteúdo --- */
    /* Ajusta o card de conteúdo para caber na tela */
    .content {
        width: 100%;
        /* Era 878px */
        padding: 15px 20px;
    }

    /* Ajusta o texto dentro do card (que tinha style inline) */
    .content .text[style*="width: 878px"] {
        width: 100% !important;
        text-align: left;
        /* 'justify' fica ruim em tela pequena */
    }
}

/* =============================================================
   --- NOVO: Media Query Principal (Telas de Tablet e Celular) ---
============================================================= */
@media screen and (max-width: 1px) {

    .container::after {
        width: 80px;
        height: 80px;
        left: 38px;
    }

    .timeline::after {
        left: 45px;
    }

    /* --- GERAL --- */
    .title {
        font-size: 30px;
        /* Reduz o título principal */
    }

    .subtitle {
        font-size: 22px;
        /* Reduz o subtítulo */
    }

    .text {
        text-align: left;
        /* Melhora a leitura em telas menores */
    }

    /* --- BANNER --- */
    .banner {
        height: auto;
        /* Altura automática */
        padding: 40px 20px;
        background-size: cover;
        /* Cobre a tela sem distorcer */
        background-position: center;
    }

    .text-banner {
        width: 100%;
        flex-direction: column;
        /* Empilha as imagens e o texto */
        align-items: center;
        gap: 20px;
    }

    /* --- BLOCO DE TEXTO PRINCIPAL --- */
    /* !important para anular o 'width' inline do HTML */
    div[style*="width: 1013px"] {
        width: 90% !important;
        /* Ajusta a largura */
        margin-top: 50px;
    }

    /* --- FUNDO (Missão, Visão, Valores) --- */
    .fundo {
        flex-direction: column;
        /* Empilha os 3 cards */
        height: auto;
        /* Altura automática */
        background-size: cover;
        background-position: center;
        padding: 150px 20px 80px 20px;
        /* Mais padding inferior */
        gap: 120px;
        /* Espaço entre os cards (considerando o -100px da imagem) */
    }

    /* Anula as larguras e alturas fixas dos cards */
    .fundo>.align[style*="width: 311px"] {
        width: 90% !important;
        max-width: 311px;
        /* Mantém um limite */
        height: auto !important;
        /* Altura automática */
        padding-bottom: 30px !important;
        /* Espaço extra */
    }

    /* --- LINHA DO TEMPO (Conteúdo) --- */
    /* Ajusta o conteúdo da timeline para telas de tablet */
    .content {
        width: 100%;
        padding: 15px 35px;
        /* Remove a largura fixa de 878px */
    }

    /* Anula o style inline 'width: 878px' do parágrafo */
    .content .text[style*="width: 878px"] {
        width: 100% !important;
    }
}

/* =============================================================================================
                            --- Media Query para Celulares Pequenos ---
============================================================================================= */
@media (max-width: 650px) {
    .box-historia .icone-flutuante:nth-of-type(1),
    .box-historia .icone-flutuante:nth-of-type(2),
    .box-historia .icone-flutuante:nth-of-type(3),
    .box-historia .icone-flutuante:nth-of-type(4),
    .timeline .icone-flutuante:nth-of-type(1),
    .timeline .icone-flutuante:nth-of-type(2),
    .timeline .icone-flutuante:nth-of-type(3) {
        display: none;
    }
}