/* =============================================================================================
                              --- 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');

/* ---------------------- ESTUDE CONOSCO ----------------------- */
.align {
    display: flex;
    justify-content: space-between; align-items: center;

    width: calc(var(--base-resolution-width) - 150px);
    margin: 70px auto;
}
.align:first-of-type { margin-top: 50px; position: relative; }

.icone-flutuante { position: absolute; }
.align:first-of-type .icone-flutuante:nth-of-type(1) { width: 115px; top: -20px; left: 500px; }
.align:first-of-type .icone-flutuante:nth-of-type(2) { width: 110px; bottom: -20px; left: -155px; }
.align:first-of-type .icone-flutuante:nth-of-type(3) { width: 95px; top: 150px; right: calc(-22vw + 210px); }

main .align:first-of-type > div:first-of-type { width: 55%; }

main .align .title {
    color: var(--third-color);
    text-align: left;
    font-size: 2.2rem; font-family: 'Fredoka'; font-weight: bold;
    margin-bottom: 20px;
}

main .align .text {
    color: var(--third-color);
    text-align: justify;
    font-size: 1.05rem; font-family: 'Nunito'; font-weight: bold;
    margin-top: 10px;
}

main .align:first-of-type div:nth-of-type(2) img { width: 380px; }

.btn-conhecer {
    background-color: var(--secondary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Fredoka';
    font-weight: bold;
    padding: 12px 35px;
    margin-top: 30px;
    border-radius: 50px;
    width: max-content;
}
.btn-conhecer a { color: white; text-decoration: none; }

.btn-conhecer a:hover {
    opacity: 1;
    color: white;
    transition: 0.5s;
}

/* -------------------- AGENDA DE VISITAS ---------------------- */
main .align:nth-of-type(2) > div:first-of-type { width: 55%; }

.item {
    display: flex;
    column-gap: 30px;
    width: 100%; max-width: 470px;
    margin-top: 25px;
}

.item .text-item .title { font-size: 1.5rem; margin-bottom: 10px; }
.item .text-item .text { font-size: 1rem; }

.icon {
    display: flex;
    align-items: center;
}
.icon img { width: 55px; height: 55px; }

iframe {
    border: 0; border-radius: 20px;
    margin-right: -35px;
    width: 460px;
}

/* --------------------- GALERIA DE FOTOS ---------------------- */
.align:nth-of-type(3) { flex-direction: column; margin: 80px auto 50px; position: relative; }
.align:nth-of-type(3) .text { 
    width: 60%;
    text-align: center; 
    margin-top: 0;
}

.align:nth-of-type(3) .icone-flutuante:nth-of-type(1) { width: 90px; bottom: -500px; left: -85px; }
.align:nth-of-type(3) .icone-flutuante:nth-of-type(2) { width: 140px; bottom: 0px; left: -70px; }
.align:nth-of-type(3) .icone-flutuante:nth-of-type(3) { width: 95px; top: 30px; right: calc(-20vw + 210px); }

.galeria-imagem {
    display: flex;
    flex-flow: row wrap; justify-content: center;
    gap: 40px 45px;
    margin: 50px auto 0;
}

.img-size {
    width: 220px; height: 220px;
    border-radius: 18px;
}

.align:nth-of-type(5) {
    justify-content: center;
    margin: 10px auto 60px;
}
.align:nth-of-type(5) .btn-conhecer { padding: 12px 45px; }

/* =============================================================================================
                             --- Media Query para Desktop Menores ---
============================================================================================= */
@media (max-width: 1366px) and (min-width: 981px) {
    /* ---------------------- ESTUDE CONOSCO ----------------------- */
    main .align:first-of-type > div:first-of-type { width: 50%; }
    main .align:first-of-type div:nth-of-type(2) img { width: 30vw; max-width: 350px; }

    .align:first-of-type .icone-flutuante:nth-of-type(1) { width: 100px; top: -20px; left: 360px; }
    .align:first-of-type .icone-flutuante:nth-of-type(3) { display: none; }

    /* -------------------- AGENDA DE VISITAS ---------------------- */
    main .align:nth-of-type(2) > div:first-of-type { width: 50%; }
    main .align:nth-of-type(2) iframe { 
        width: 33vw; height: clamp(360px, 33vw, 390px);
        margin-right: -2vw;
        border-radius: 15px;
    }

    /* --------------------- GALERIA DE FOTOS ---------------------- */
    .galeria-imagem { gap: 30px 30px; }
    .img-size { width: 155px; height: 155px; border-radius: 15px; }

    .align:nth-of-type(3) .icone-flutuante:nth-of-type(3) { right: calc(-10vw + 70px); }
}

/* =============================================================================================
                                --- Media Query para Celulares ---
============================================================================================= */
@media (max-width: 980px) {
    /* ---------------------- ESTUDE CONOSCO ----------------------- */
    .align { 
        width: var(--base-resolution-width); max-width: 600px;
        margin: 60px auto;
    }

    .align:first-of-type { flex-direction: column-reverse; row-gap: 40px; }
    main .align:first-of-type > div:first-of-type { width: 100%; }
    
    main .align:first-of-type div:nth-of-type(2) img { width: clamp(230px, 40vw, 350px); }
    main .align .title, main .align .text { text-align: center; }
    .btn-conhecer { margin: 30px auto 0; padding: 10px 30px; }

    .align:first-of-type .icone-flutuante:nth-of-type(1) { top: 40px; left: -25px; }
    .align:first-of-type .icone-flutuante:nth-of-type(2) { bottom: -50px; left: -90px; }
    .align:first-of-type .icone-flutuante:nth-of-type(3) { right: calc(-22vw + 185px); }
    
    /* -------------------- AGENDA DE VISITAS ---------------------- */
    .align:nth-of-type(2) { flex-direction: column; row-gap: 20px; }
    main .align:nth-of-type(2) > div:first-of-type { width: 100%; }
    .item { 
        width: 100%; max-width: 420px; 
        margin: 25px auto;
    }

    .item .text-item .title, .item .text-item .text { text-align: left; }

    .align:nth-of-type(2) div:nth-of-type(2) { width: 100%; }
    iframe { width: 100%; }

    /* --------------------- GALERIA DE FOTOS ---------------------- */
    .align:nth-of-type(3) { margin: 50px auto 50px; }
    .align:nth-of-type(3) .text { width: 100%; }
    .galeria-imagem { gap: 30px 35px; margin-bottom: 0;}
    .img-size { width: 250px; height: 250px; }
    .align:nth-of-type(5) .btn-conhecer { padding: 10px 40px; }

    .align:nth-of-type(3) .icone-flutuante:nth-of-type(2) { display: none; }
    .align:nth-of-type(3) .icone-flutuante:nth-of-type(3) { top: 1270px; right: calc(-20vw + 150px); }

    /* -------------------- DEMAIS RESPONSIVO ---------------------- */
    body {
        overflow-x: hidden;
        /* Previne rolagem horizontal */
    }

    .text {
        text-align: left;
        /* 'Justify' fica ruim em telas pequenas */
    }

    /* --- PADRÃO DE LAYOUT (Mobile) --- */
    /* ta aplicando 'empilhamento' (column) a todos os .align
      que estão sendo usados 
    */
    .align[style*="space-evenly"] {
        flex-direction: column;
        gap: 30px;
        padding: 0 20px;
    }

    /* Ajusta o bloco de 'redes sociais' que já era column */
    .align[style*="flex-direction: column"] {
        padding: 0 20px;
    }

    /* --- SEÇÃO 2 (Mapa): Inverte a ordem */
    /* Alvo: <div class="align" style="margin-top: 100px; justify-content: space-evenly;"> */
    /* Coloca o mapa DEPOIS do texto no mobile */
    .align[style*="margin-top: 100px"][style*="space-evenly"] {
        flex-direction: column-reverse;
    }

    /* --- LARGURAS (Anulando !important) --- */
    /* Remove todas as larguras fixas dos parágrafos de texto */
    /* Usamos !important para anular o style="..." do HTML */
    p[style*="width: 546px"],
    p[style*="width: 526px"],
    p[style*="width: 608px"] {
        width: 100% !important;
    }

    /* Centraliza os títulos */
    .title[style*="width: 546px"],
    .title[style*="width: 526px"] {
        text-align: center !important;
    }

    /* Centraliza o texto de redes sociais */
    p[style*="width: 608px"] {
        text-align: center !important;
    }

    /* --- ELEMENTOS ESPECÍFICOS --- */

    /* Imagem da Seção 1 */
    .align[style*="margin-top: 50px"] img {
        max-width: 100%;
        height: auto;
    }

    /* --- GALERIA DE IMAGENS --- */
    /* Alvo: Os .align que contêm as .img-size.
      Eles precisam ser 'row' (para ter colunas) e 'wrap' (para quebrar a linha)
    */
    .align[style*="justify-content: space-evenly"][style*="margin-top: 50px"] {
        flex-direction: row;
        /* Sobrescreve o 'column' que definimos antes */
        flex-wrap: wrap;
        /* FAZ AS IMAGENS QUEBRAREM A LINHA */
        gap: 10px;
        padding: 0 10px;
        margin-top: 30px;
    }

    /* Desativa o efeito de hover no mobile */
    .img-size:hover {
        height: 150px;
        width: 48%;
        transform: none;
        transition: none;
    }

    /* --- BOTÃO FINAL --- */
    .align[style*="margin-bottom: 100px"] {
        margin-top: 30px;
        margin-bottom: 50px;
        /* Reduz a margem */
    }
}

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