/* RESET UNIVERSAL para garantir consistência de layout */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Isso é CRUCIAL: borda e padding são incluídos na largura/altura */
}

@charset "UTF-8";

/* ===================================================================================================================== */
/* ATENÇÃO: Os @import url() das fontes foram REMOVIDOS daqui. */
/* Eles agora são carregados de forma mais eficiente via tags <link> no HTML para evitar atrasos de renderização. */
/* ===================================================================================================================== */

:root {
    --fonte-xpunto1: 'Montserrat', Arial, sans-serif;
    --fonte-xpunto2: 'Gothan', Verdana, Arial; /* Nota: 'Gothan' é um provável erro de digitação para 'Gotham', mas mantido como estava no código original. */
    --fonte-destaque: 'Bebas Neue', Arial;
    --solirario: #981310;
    --comercial: #65A99B;
    --locacao: #E7BE20;
    --pessoal: #DD5D11;
    --permuta: #183F47;
    --profissional: #367687;
}

/* ------------------------------------------- */
/* REGRAS CSS GERAIS E PARA MOBILE (DEFAULT)  */
/* ------------------------------------------- */

/* Regra global para todas as imagens: garante que nunca ultrapassem o pai e mantenham a proporção */
img {
    border-radius: 20px;
    max-width: 100%; /* ALTERADO de 85% para 100% para melhor responsividade */
    height: auto;
    margin: auto;
    display: block;
    margin-top: 40px;
    margin-bottom: 40px;
    box-shadow: 1px 2px 2px rgba(53, 53, 53, 0.655);
}

/* Afeta o logo principal e outras imagens genéricas que estão em div's */
div img {
    max-width: 100%; /* Garante que não ultrapasse o pai */
    width: auto;     /* Remove a largura fixa de 400px para que se ajuste em mobile */
    height: auto;    /* Mantém a proporção */
    background-color: white;
    box-shadow: 1px 2px 3px rgba(76, 76, 76, 0.593);
}

/* Logo principal XPUNTO no topo (ESPECÍFICO PARA MOBILE) */
.logo img {
    max-width: 60%; /* NOVO AJUSTE: Diminui a largura máxima do logo para 70% em mobile. Experimente 60%, 80% se 70% não for ideal. */
    height: auto;    /* Mantém a proporção da imagem */
    width: auto;     /* Garante que a largura se ajuste à max-width definida */
    margin-top: 30px; /* Ajusta a margem superior (se 20px for muito pouco ou 40px muito) */
    margin-bottom: 30px; /* Ajusta a margem inferior */
}

/* Nova regra para a imagem APP.png usando seu ID */
#img-app-xpunto {
    max-width: 90%; /* Limita a largura para mobile para dar um respiro nas bordas */
    height: auto;    /* Mantém proporção */
    margin: 0 auto 80px auto; /* Centraliza horizontalmente e aplica margem inferior */
    display: block;
    /* background-color: var(--comercial); (Removido/comentado se não for intencional, pois o APP.png provavelmente não é transparente) */
}

/* Títulos h1 e h2: Tamanho menor para mobile */
h1, h2 {
    font-size: 1.8em; /* AJUSTE: Diminuído de 2em para 1.8em para mobile */
    font-family: var(--fonte-destaque);
    font-weight: normal;
    color: white;
    text-align: center;
    margin-bottom: 30px;
    text-shadow: 2px 2px 0px rgb(91, 91, 91);
    letter-spacing: 1px;
}

/* Seção ".web": Removida altura fixa para ser responsiva */
.web {
    width: 100%; /* OCUPA A LARGURA TOTAL */
    height: auto; /* REMOVE A ALTURA FIXA */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px; /* Ajusta o padding para mobile */
    box-sizing: border-box; /* Garante que padding não adicione largura total */
}

/* Imagem dentro de ".web": Garante responsividade */
.web img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
}

/* Seção ".fale": Removida altura fixa para ser responsiva */
.fale {
    width: 100%; /* OCUPA A LARGURA TOTAL */
    height: auto; /* REMOVE A ALTURA FIXA */
    display: flex;
    margin: 1px auto 40px auto; /* Margem ajustada e corrigida */
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px; /* Adiciona padding para mobile */
    box-sizing: border-box;
}

/* Imagem dentro de ".fale": Garante responsividade */
.fale img {
    max-width: 100%;
    max-height: 100%;
}

/* Contêiner principal ".main": Comportamento responsivo */
/* Contêiner principal ".main" */
.main {
    color: white;
    font-family: var(--fonte-xpunto1);
    /* REMOVIDO: min-width: 300px; */ /* Teste: removemos para ver se era o causador do fundo branco */
    border: 5px solid var(--solirario) !important;
    border-radius: 20px;
    box-shadow: 3px 3px 15px rgb(69, 69, 69);
    width: 90%; /* NOVO: Ocupa 90% da largura do body */
    max-width: 900px; /* Limita a largura máxima para telas maiores */
    margin: 0 auto; /* ISSO VAI CENTRALIZAR O BLOCO DE 90% */
    padding: 0; /* Removemos padding do .main, a largura de 90% já cria o espaçamento externo */
}

/* Base HTML e Body */
html, body {
    width: 100%;
    height: 100%; /* Garante que o body preencha a altura total, útil para backgrounds */
    overflow-x: hidden; /* IMPEDE ROLAGEM HORIZONTAL */
}

body {
    /* Removemos max-width e margin: auto daqui, o .main vai cuidar disso */
    background: linear-gradient(to bottom, #65a99b, #65A99b); /* Fundo da página inteira */
    background-size: cover; /* Garante que o fundo preencha toda a área */
    background-repeat: no-repeat;
    background-attachment: fixed; /* Mantém o fundo fixo ao rolar */
    font-size: 15px; /* Base font size para mobile */
    min-width: 320px; /* NOVO: Garante que o body tenha uma largura mínima para evitar elementos muito espremidos */
}

/* Grupo de botões de App Store: Layout responsivo */
.image-group {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* PERMITE QUE OS ITENS QUEBREM LINHA EM TELAS PEQUENAS */
    gap: 20px; /* REDUZ O ESPAÇAMENTO PARA MOBILE */
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Contêiner individual de imagem em ".image-group" */
.image-container {
    margin-top: 10px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    background-color: var(--comercial);
    display: block;
}

/* Imagens dentro de ".image-container" (Botões de App Store): Responsividade */
.image-container img {
    max-width: 100%;
    height: auto;
    width: auto;     /* Remove a largura fixa de 200px para mobile */
    border-radius: 10px;
}

/* --- REGRAS CSS PARA A SEÇÃO DO VÍDEO --- */
/* Contêiner principal do vídeo */
#video-wrapper {
    position: relative;
    width: 75%;
    max-width: 800px;
    margin: 15px auto 40px auto;
}

/* Contêiner da thumbnail e do iframe: Mantém proporção 16:9 */
#video-placeholder-container,
.video-responsive-iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Proporção 16:9 */
    height: 0;
    overflow: hidden;
    background-color: #000;
    border-radius: 20px;
    box-shadow: 1px 2px 2px rgba(53, 53, 53, 0.655);
    cursor: pointer;
    border: 5px solid var(--solirario) !important;
    box-sizing: border-box;
    background-color: #183F47;
    display: block;
}

/* Imagem de thumbnail do vídeo: Responsividade e posicionamento */
#video-placeholder-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border: none !important;
    margin: 0 !important;
    border-radius: 20px;
    box-shadow: none !important;
    display: block;
    max-width: 100%;
}

/* Iframe do vídeo: Responsividade e posicionamento */
.video-responsive-iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Botão de Play do vídeo: Tamanho menor para mobile */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px; /* TAMANHO MENOR PARA MOBILE */
    height: 60px;
    background-color: rgba(255, 0, 0, 0.8);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transition: background-color 0.3s ease;
}

/* Efeito hover do botão de Play */
.play-button:hover {
    background-color: rgba(255, 0, 0, 1);
}

/* Triângulo do ícone de Play */
.play-button::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 30px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 5px;
}
/* --- FIM DAS REGRAS CSS PARA A SEÇÃO DO VÍDEO --- */

/* Contêiner de botões sociais (AQUI ESTÁ A CHAVE DA DISPOSIÇÃO HORIZONTAL DO RODAPÉ) */
.social-buttons {
    display: flex;
    justify-content: center; /* Centraliza os itens horizontalmente */
    align-items: center;    /* Centraliza os itens verticalmente */
    flex-wrap: wrap;        /* Permite que os itens quebrem linha SE NÃO HOUVER ESPAÇO SUFICIENTE (ex: em telas MUITO pequenas) */
    gap: 8px;               /* REDUZIDO: Espaçamento menor entre os itens para mobile */
    padding: 10px 0;        /* Adiciona um pouco de padding vertical para não ficar colado */
    margin-top: 10px;       /* Adiciona margem superior para afastar do conteúdo acima */
    margin-bottom: 5px;    /* Adiciona margem inferior */
}

/* Links dos botões sociais do rodapé (.facebook-icon e .instagram-icon) */
.social-buttons a {
    width: 35px;    /* REDUZIDO: Tamanho menor para os ícones no mobile */
    height: 35px;   /* Mantém igual ao width para ser um círculo */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;  border-radius: 50%;
    flex-shrink: 0; /* Impede que os botões diminuam mais do que seu tamanho */
}

/* Imagens dentro dos botões sociais (Face e Instagram) */
.social-buttons a img { /* Mais específico para não afetar o logo-footer */
    max-width: 80%; /* Garante que a imagem do ícone caiba dentro do círculo */
    height: auto;
    display: block;
    margin: 0;
}

/* Seção de imagens genérica (seção.imagens): Responsividade */
section.imagens {
    position: relative;
    color: white;
    background-size: cover;
    background-attachment: fixed;
    text-align: center;
}

/* Imagens dentro de seção.imagens: Corrigida de 200% para 100% e responsiva */
section.imagens img {
    max-width: 100%; /* CORRIGIDA DE 200% PARA 100% */
    height: auto;    /* ADICIONADO PARA MANTER PROPORÇÃO */
    width: auto;     /* ADICIONADO PARA REMOVER O WIDTH FIXO */
    border-radius: 15px;
    margin: auto;
    display: block;
    margin-top: 10px;
    margin-bottom: 15px;
    box-shadow: 1px 1px 2px rgba(14, 13, 13, 0.447);
}

/* Seção com texto e imagem de fundo (section#img01): Responsividade de largura e fonte */
section#img01 {
    background-image: url('../imagens/Aurora.jpg');
    background-position: center;
    background-size: cover;
    border-radius: 20px;
    max-width: 94%; /* Mantenha seu valor atual */
    margin: auto;
    text-align: left;
    font-size: 1.6em; /* AJUSTE FORTE: Este será o tamanho para MOBILE */
    padding: 15px; /* Mantenha seu valor atual */
}

/* Navegação principal ".main-nav" */
.main-nav {
    width: 98%;
    border-radius: 15px;
    background-color: var(--locacao);
    /* Removido padding-top, padding-left, padding-bottom e substituído por uma única linha: */
    padding: 8px 10px; /* AJUSTE: Aplica 8px de padding vertical e 10px de padding horizontal */
    box-shadow: 0px 7px 9px rgba(30, 30, 30, 0.785);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* IMPORTANTE: Garante que o padding seja incluído na largura total de 98% */
    margin: 0 auto; /* NOVO: Centraliza o bloco main-nav DENTRO do seu contêiner pai (o .main) */
}

/* Grupo de links de navegação ".nav-group": Layout responsivo para mobile */
.nav-group {
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* PERMITE QUE OS LINKS QUEBREM LINHA NO MOBILE */
    gap: 15px; /* REDUZ O ESPAÇAMENTO PARA MOBILE */
}

/* Links individuais de navegação ".nav-link": Tamanho de fonte menor para mobile */
.nav-link {
    color: white;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1.1em; /* TAMANHO MENOR PARA MOBILE */
    transition-duration: .1s;
    position: relative;
    /* align-items e justify-content aqui não fazem sentido para um item flex, REMOVIDOS */
}

/* Divisor nos links de navegação */
.nav-link:not(:first-child)::before {
    content: "-";
    position: absolute;
    left: -26px;
    color: white;
}

/* Estilos de hover e ativo para links de navegação */
.nav-link.active,
.nav-link:hover {
    background-color: #981310;
    border-radius: 5px;
    color: #ffffff;
}

/* Rodapé: Layout responsivo */
footer {
    width: 100%;
    border-radius: 15px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0px;
    background-color: white;
    padding-left: 0px;
    box-shadow: 0px -3px 5px rgba(30, 30, 30, 0.2);
    display: flex;
    flex-direction: column; /* PARA QUE LOGO E BOTOES SOCIAIS FIQUEM EM LINHAS SEPARADAS POR PADRÃO */
    justify-content: center;
    align-items: center;
}

/* Logo do rodapé ".logo-footer": Responsividade */
.logo-footer {
    max-width: 120px; /* REDUZIDO AINDA MAIS: Tamanho máximo do logo no mobile para dar mais espaço aos botões sociais */
    height: auto;   /* MANTÉM PROPORÇÃO */
    border-radius: 10px; /* Um pouco menor para mobile */
    margin: 10px 0; /* Centralizado verticalmente com espaçamento */
    flex-shrink: 0; /* Impede que o logo diminua mais do que seu max-width */
}

/* Esconde o vídeo quando não está ativo */
#myVideo {
    display: none;
}

/* ===================================================================================================================== */
/* MEDIA QUERIES PARA DESKTOP E TELAS MAIORES (a partir de 768px de largura) */
/* ===================================================================================================================== */
@media (min-width: 768px) {
    /* Logo principal */
    .logo img {
        width: 400px; /* Volta ao tamanho desejado para desktop */
    section#img01 {
        font-size: 2.8em; /* AJUSTE: Este será o tamanho para DESKTOP (volta ao tamanho grande original) */
    }    
    }

    /* Títulos h1 e h2 */
    h1, h2 {
        font-size: 3.5em; /* Volta ao tamanho original para desktop */
    }

    /* Grupo de botões de App Store */
    .image-group {
        gap: 40px; /* Volta ao espaçamento original para desktop */
    }

    /* Imagens dentro de image-container (Botões de App Store) */
    .image-container img {
        width: 200px; /* Volta ao tamanho original para desktop */
    }

    /* Imagem APP.png */
    #img-app-xpunto {
        max-width: 290px; /* Volta ao tamanho original para desktop */
    }

    /* Botão de play do vídeo */
    .play-button {
        width: 80px; /* Volta ao tamanho original para desktop */
        height: 80px;
    }

    /* Rodapé: Disposição para desktop */
    footer {
        flex-direction: row; /* Volta para row para desktop */
        justify-content: space-evenly; /* Distribui os itens no espaço */
        padding: 10px 0;
    }

    /* Ícones sociais do rodapé */
    .social-buttons {
        gap: 40px; /* Volta ao espaçamento original para desktop */
        padding: 0;
        margin: 0;
    }
    .social-buttons a {
        width: 70px;    /* Volta ao tamanho original para desktop */
        height: 70px;
    }

    /* Logo do rodapé */
    .logo-footer {
        max-width: 200px; /* Volta ao max-width original para desktop */
        margin: 0; /* Remove margens extras */
    }

    /* Seção com texto e imagem de fundo */
    section#img01 {
        max-width: 80%; /* Volta ao original para desktop */
        font-size: 2.8em; /* Volta ao tamanho original para desktop */
    }

    /* Menu de Navegação */
    .nav-group {
        gap: 35px; /* Volta ao espaçamento original para desktop */
    }
    .nav-link {
        font-size: 35px; /* Volta ao tamanho original para desktop */
    }
}