/*GERAIS*/
* {
    margin: 0px;
    padding: 0px;
    scroll-behavior: smooth;
}

@font-face {
    font-family: 'Questrial-Regular';
    src: url(imagens/Questrial-Regular.ttf);
}

body {
    background-color: #ffffff;
    overflow-x: hidden; /*Impede a barra de rolagem horizontal*/
}

#content {
    /* NOVO: Centraliza o conteúdo e limita a largura máxima no PC */
    width: 100%;
    max-width: 1200px; /* Limita a largura em telas grandes */
    background-color: rgb(254, 255, 255);
    /* CORREÇÃO FIXA: margin-top removido para evitar sobreposição com header fixo */
    margin: 0 auto; 
    float: none; /* Remove float */
    padding-top: 70px; 
}

h1 {
    font-family: 'Questrial-Regular';
    margin-top: 60px;
    margin-bottom: 2%;
    padding: 0 15px; /* Adiciona padding lateral básico */
}

p {
    font-family: 'Calibri';
    padding: 0 15px; /* Adiciona padding lateral básico */
}

/*CABEÇALHO*/
#header {
    width: 100%;
    height: 50px;
    background-color: #ffffff;
    position: fixed;
    border-bottom: 1px solid rgb(211, 209, 209);
    z-index: 100; /* Garante que o cabeçalho fique por cima */
    
    /* NOVO: Usa Flexbox para alinhamento estável */
    display: flex;
    align-items: center; /* Centraliza verticalmente */
    justify-content: space-between; /* Espaça logo e navegação */
    padding: 0 3%;
    box-sizing: border-box;
}

#nav {
    list-style: none;
    /* NOVO: Usa Flexbox para alinhar itens horizontalmente */
    display: flex;
    padding: 0;
    margin: 0;
}

#nav li {
    /* Remove float e usa margem para espaçamento */
    margin-left: 25px; 
}

#nav a {
    text-decoration: none;
    color: black;
    font-family: 'Calibri';
    font-weight: bold;
}

#nav a:hover {
    color: #9EA8B7;
    transition: 0.2s all;
}

.logo img {
    /* Margens e floats removidos, agora controlados pelo #header */
    width: 40px; /* Tamanho fixo para o logo */
    height: auto;
}
/*FIM CABEÇALHO*/

/*RODAPÉ*/
#footer {
    width: 100%;
    height: 50px;
    background-color: rgb(255, 255, 255);
    border-top: 1px solid rgb(211, 209, 209);
    
    /* NOVO: Usa Flexbox para alinhamento estável */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3%;
    box-sizing: border-box;
}

#footer h5 {
    font-family: 'Calibri';
    font-weight: normal; 
    margin: 0;
    line-height: 1.2;
}

.seta img,
.setaindex img {
    /* Margens e floats removidos */
    width: 20px;
    height: auto;
}
/*FIM RODAPÉ*/
/*FIM GERAIS*/


/*INDEX*/
.bannerindex {
    width: 100%;
    margin-top: 65px;
}

.bannerindex1,
.bannerindex2,
.bannerindex3 {
    width: 100%;
    height: 80vh;
    background-size: cover;
    background-position: center;
}

.bannerindex1 {
    background-image: url(imagens/b1.png);
}

.bannerindex2 {
    background-image: url(imagens/bannerblack.png);
}

.bannerindex3 {
    background-image: url(imagens/bannermodelos.png);
}

/* FIM INDEX */


/*SOBRE*/
.p-historia {
    margin-top: 80px;
}

/* NEW: Base Flexbox styles for Image/Text blocks (Mobile-first: stacked) */
.image-text-group {
    display: flex;
    flex-direction: column; /* Stacks image and text on top of each other by default */
    margin: 40px 0;
    padding: 0 15px; /* Inherits base padding */
}

.image-text-group .text-content h1 {
    margin-top: 20px;
    margin-bottom: 2%;
    padding: 0; /* h1 inside text-content doesn't need global padding */
}
.image-text-group .text-content p {
    padding: 0; /* p inside text-content doesn't need global padding */
}

.image-text-group .image-wrapper {
    width: 100%;
    text-align: center;
    order: -1; /* Image first on mobile */
    margin-bottom: 20px;
}

.image-text-group .image-wrapper img {
    max-width: 90%;
    height: auto;
    margin: 0 auto;
}

.image-text-group .text-content {
    width: 100%;
    order: 1;
}

/* Hide PC image wrapper on mobile (or default) view */
.image-text-group .pc-only {
    display: none; 
}

/* Hide old image wrappers that were used for floating. 
   These are now redundant in the new sobre.html structure. */
.imagem1-pc, .imagem2 {
    display: none; 
}
/*FIM ESTILIZAÇÃO SOBRE*/


/*MODELOS*/
.modelos {
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    /* Removido float: left; */
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 4%;
    margin-top: 1%;
    gap: 20px; /* Adiciona espaçamento entre os modelos */
    padding: 20px 0;
}

.modelos img {
    /* Margens fixas removidas. Usando `gap` acima */
    box-sizing: border-box;
    width: 250px; /* Tamanho padrão */
    height: 250px;
    max-width: 100%;
}

.modelo p {
    padding: 0;
    text-align: center;
    font-size: 20px;
}

.modelo h2 {
    font-family: 'Calibri';
    text-align: center;
    font-size: 20px;
}

.efeito {
    transition: all 0.5s;
    cursor: pointer;
}

.efeito:hover {
    transform: scale(1.05);
}

.minha-tabela {
    border-collapse: collapse;
    margin: 30px auto;
    width: 95%; 
    max-width: 800px;
}

.minha-tabela td,
th {
    border: 1px solid rgb(211, 209, 209);
    text-align: left;
    padding: 8px;
    font-family: 'Calibri';
    font-size: 15px;
}

.minha-tabela tr:hover {
    background-color: #ddd;
}

/*FIM MODELOS*/


/*CONTATO*/
input,
textarea {
    border: none;
    border-bottom: 2px solid black;
    padding: 5px;
    margin: 10px 0; /* Ajustado */
    font-size: 16px; /* Aumentado */
    box-sizing: border-box;
    width: 100%; 
}

textarea {
    resize: none;
    font-family: 'Calibri';
    width: 100%;
    margin-bottom: 20px;
}

.form {
    width: 100%;
    /* CORREÇÃO FIXA: Adiciona padding-top para compensar o header fixo de 50px + espaço extra */
    padding-top: 70px;
}

form [type="submit"],
form [type="reset"] {
    background-color: #000000;
    font-family: Calibri;
    font-weight: bold;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px; 
    width: 48%; 
    font-size: 15px;
    border: none;
    padding: 0; 
}

form [type="submit"]:hover {
    cursor: pointer;
}

form {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding-top: 2%;
    width: 90%; /* Responsivo */
    max-width: 600px; /* Limita a largura do formulário */
}

.buttons-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px; /* Espaço para o rodapé */
}

.h2contato {
    font-family: 'Questrial-Regular';
    font-weight: bold;
    text-align: center;
    padding: 0 15px;
}

h3 {
    font-family: Calibri;
    font-weight: lighter;
    margin: 0 auto;
    width: 90%; 
    max-width: 600px;
    text-align: center;
    padding-bottom: 20px;
}
/*FIM CONTATO*/


/*RESPONSIVIDADE*/
/*PC ESCOLA*/
@media (min-width: 1600px) {

    /*GERAIS*/
    h1 {
        font-size: 40px;
        padding: 0 80px; /* Padding ajustado para PC */
    }

    p {
        font-size: 17px;
        padding: 0 80px; /* Padding ajustado para PC */
        padding-bottom: 30px;
    }
    
    #content {
        max-width: 1600px; /* Aumenta o max-width para este breakpoint */
    }
    /*FIM GERAIS*/


    /*CABEÇALHO*/
    #header {
        height: 70px;
    }
    
    #nav li {
        margin-left: 50px; /* Maior espaçamento */
    }

    #nav a {
        font-size: 18px;
    }

    .logo img {
        width: 4.5%;
    }
    /*FIM CABEÇALHO*/


    /*RODAPÉ*/
    #footer h5 {
        font-size: 15px;
    }

    .seta img,
    .setaindex img {
        width: 2.6%;
    }
    /*FIM RODAPÉ*/


    /*INDEX*/
    .bannerindex {
        height: 500px;
        margin-top: 70px; /* Ajusta margem com a nova altura do header */
    }
    
    .bannerindex1 {
        /* Apenas a altura foi ajustada */
        height: 100%;
    }

    .bannerindex2 {
        height: 100%;
    }

    .bannerindex3 {
        height: 100%;
    }
    /*FIM INDEX*/


    /*HISTÓRIA: NEW FLEXBOX FOR SIDE-BY-SIDE */
    
    /* Hide the mobile-only image div */
    .imagem1-mobile {
        display: none;
    }

    /* Show PC image wrapper */
    .image-text-group .pc-only {
        display: block; 
    }

    .image-text-group {
        flex-direction: row; /* Side-by-side */
        justify-content: space-between;
        align-items: flex-start;
        padding: 0 80px; /* Replaces the old h1/p padding for grouped content */
        max-width: 100%;
        box-sizing: border-box;
    }

    .image-text-group .image-wrapper {
        flex: 0 0 350px; /* Fixed width for image container */
        padding: 0; 
        order: 2; /* Default image to the right */
    }

    .image-text-group .image-wrapper img {
        width: 100%;
        max-width: 350px; 
        height: auto;
        margin-top: 20px;
    }

    .image-text-group .text-content {
        flex: 1; /* Takes remaining space */
        order: 1; /* Default text to the left */
    }

    .image-text-group .text-content h1 {
        margin-top: 0; /* Remove top margin on h1 inside group to align with top of group */
    }
    
    /* Image to the LEFT (align-left) */
    .image-text-group.align-left .image-wrapper {
        order: 1; 
        margin-right: 30px; /* Space between image and text */
    }
    .image-text-group.align-left .text-content {
        order: 2; 
    }
    /* Image to the RIGHT (align-right) */
    .image-text-group.align-right .image-wrapper {
        margin-left: 30px; /* Space between text and image */
    }
    
    
    /* Restore global h1/p padding for sections outside the image-text-group */
    h1 {
        padding: 0 80px; 
    }
    p {
        padding: 0 80px;
    }
    
    /* FIM HISTÓRIA */


    /*MODELOS*/
    .modelos img {
        height: 200px;
        width: 200px;
        margin-bottom: 20px;
    }

    .minha-tabela {
        width: 75%;
        margin-bottom: 50px;
    }
    /*FIM MODELOS*/


    /*CONTATO*/
    form {
        width: 40%; 
        padding-bottom: 8.5%;
    }

    .h2contato {
        font-size: 40px;
        /* Já compensado pelo .form */
        padding-top: 0; 
        padding-bottom: 1%;
    }

    h3 {
        font-size: 15px;
        width: 50%;
    }
    /*FIM CONTATO*/
}





/*CELULAR (max-width: 414px)*/
@media (max-width: 414px) {

    /*GERAIS*/
    h1 {
        font-size: 30px;
        padding: 0 20px; /* Padding ajustado */
    }

    p {
        font-size: 20px;
        padding: 0 20px; /* Padding ajustado */
    }
    /*FIM GERAIS*/


    /*CABEÇALHO*/
    #header {
        height: 60px;
    }
    
    #nav li {
        margin-left: 15px; /* Menor espaçamento */
    }

    #nav a {
        font-size: 16px; 
    }

    .logo img {
        width: 15%; 
    }
    /*FIM CABEÇALHO*/


    /*RODAPÉ*/
    #footer {
        height: 60px;
    }

    #footer h5 {
        font-size: 14px;
        text-align: left;
    }

    .seta img,
    .setaindex img {
        width: 10%;
        margin: 0; /* Margens negativas removidas */
    }
    /*FIM RODAPÉ*/


    /*INDEX*/
    .bannerindex {
        margin-top: 60px;
        margin-bottom: 20px;
        height: 400px; 
    }

    .bannerindex1 {
        background-image: url(imagens/b1celular.png);
        height: 100%;
        background-size: cover;
    }

    .bannerindex2 {
        background-image: url(imagens/celularblackbanner.png);
        height: 100%;
        background-size: cover;
    }

    .bannerindex3 {
        background-image: url(imagens/celularbannermodelos.png);
        height: 100%;
        background-size: cover;
    }
    /*FIM INDEX*/


    /*HISTÓRIA*/
    /* O bloco .image-text-group já está empilhado (column) por padrão */
    .image-text-group .pc-only {
        display: none; 
    }

   .imagem1-pc { 
        display: none;
    }

    .imagem1-mobile, .imagem2 { 
        text-align: center;
        width: 100%;
    }

    .imagem1-mobile img, .imagem2 img {
        width: 90%;
        height: auto;
        margin: 20px auto;
    }
    /*FIM HISTÓRIA*/


    /*MODELOS*/
    .modelos {
        gap: 15px;
    }
    
    .modelos img {
        /* NOVO: Usa largura relativa para adaptar a telas menores que 414px */
        width: 90%; 
        max-width: 300px;
        height: auto;
        margin: 0 auto; 
    }

    .modelo h2 {
        margin-bottom: 5px;
    }

    .minha-tabela {
        width: 95%; 
        margin-top: 20px;
        margin-bottom: 20px;
    }
    /*FIM MODELOS*/


    /*CONTATO*/
    form [type="submit"],
    form [type="reset"] {  
        border-radius: 15px;
        width: 48%;
    }

    form {
        width: 90%;
        padding-bottom: 6%;
    }

    .buttons-container {     
        margin-bottom: 50px; /* Margem ajustada */
    }

    .h2contato {
        font-size: 32px;
        /* Já compensado pelo .form */
        padding-top: 0; 
        padding-bottom: 5%;
    }

    h3 {
        font-size: 18px;
        padding: 0px 10px 30px 10px; /* Padding reduzido */
        width: 100%;
        max-width: 100%;
    }
    /*FIM CONTATO*/
}