/* Importação da fonte Roboto do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

/* Importação dos Material Icons do Google Fonts (para ícones) */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* Variáveis de Cores */
:root {
    --bg-dark: #022c3b;
    --bg-accent: #cddf09;
    --bg-light: #f0f2f5;

    --text-on-dark: #ffffff;
    --text-on-light: #022c3b;
    --text-highlight: #cddf09;
    --text-muted: #6c757d;

    --btn-bg-default: #cddf09;
    --btn-hover-default: #ffc107;
    --btn-text-dark-bg: #ffffff; /* Texto do botão para quando o background da tela é escuro */
    --btn-text-light-bg: #022c3b; /* Texto do botão para quando o background da tela é claro */
}

/* Classes para destaque de texto */
.highlight-green {
    color: var(--text-highlight) !important; /* Adicionado !important */
}

.highlight-yellow {
    color: var(--btn-hover-default) !important; /* Adicionado !important */
}

.highlight-light {
    color: var(--text-on-dark) !important;
}

.highlight-dark {
    color: var(--text-on-light) !important;
}

/* Reset básico e configurações globais */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%; /* Garante que HTML e Body ocupem 100% da altura da viewport */
    width: 100%; /* Garante que HTML e Body ocupem 100% da largura da viewport */
    overflow: hidden; /* **MUUITO IMPORTANTE:** Evita o scroll da página principal e força o slider a ser o único elemento de scroll */
    font-family: 'Roboto', sans-serif; /* Define Roboto como fonte padrão */
    line-height: 1.6;
    color: var(--text-on-dark); /* Cor de texto padrão, assumindo background escuro por padrão ou para slide 1 */
}

/* Container principal que gerencia os slides */
.slider-container {
    width: 100vw; /* Ocupa 100% da largura da viewport */
    height: 100vh; /* Ocupa 100% da altura da viewport */
    display: flex; /* **NOVO:** Usa flexbox para organizar os slides lado a lado */
    overflow-x: scroll; /* **NOVO:** Permite a rolagem horizontal dentro do container */
    overflow-y: hidden; /* **NOVO:** Impede a rolagem vertical dentro do container */
    scroll-snap-type: x mandatory; /* **NOVO:** Habilita o scroll-snap horizontal e obrigatório */
    scroll-behavior: smooth; /* Adiciona rolagem suave */
    -webkit-overflow-scrolling: touch; /* Melhora a rolagem em dispositivos iOS */
}

/* Estilo para cada slide individual */
.slide {
    width: 100vw; /* Cada slide ocupa EXATAMENTE 100% da largura da viewport */
    height: 100vh; /* Cada slide ocupa EXATAMENTE 100% da altura da viewport */
    flex-shrink: 0; /* **IMPORTANTE:** Impede que os slides diminuam em telas menores */
    display: flex; /* Usa flexbox para centralizar conteúdo */
    flex-direction: column; /* Conteúdo em coluna */
    justify-content: center; /* Centraliza verticalmente */
    align-items: center; /* Centraliza horizontalmente */
    text-align: center; /* Alinha texto ao centro */
    scroll-snap-align: start; /* **NOVO:** Fixa o slide no início da viewport ao rolar horizontalmente */
    position: relative; /* Para posicionamento de elementos internos */
    padding: 20px; /* Espaçamento interno */
    transition: background-color 0.5s ease, color 0.5s ease; /* Transição suave para cores */
}

/* Cores de fundo e texto para cada slide */
#slide-1 {
    background-color: var(--bg-dark);
    color: var(--text-on-dark);
}

/* #slide-2 {
    background-color: var(--bg-accent);
    color: var(--text-on-light); /* Texto escuro para background claro */
/* } */
#slide-2 {
    /* Degradê circular: começa com um azul um pouco mais claro no centro e vai para o azul padrão */
    background: radial-gradient(circle at center, rgba(6, 74, 102, 0.8), var(--bg-dark) 70%);
    color: var(--text-on-dark); /* Mantemos o texto claro para o fundo escuro/degradê */
}

#slide-3 {
    background-color: var(--bg-light);
    color: var(--text-on-light); /* Texto escuro para background claro */
}

#slide-4 {
    background-color: var(--bg-dark);
    color: var(--text-on-dark);
}

/* Estilos básicos para o footer fixo */
.fixed-footer {
    position: fixed; /* Fixa o footer na tela */
    bottom: 0; /* Na parte inferior */
    left: 0;
    width: 100%; /* Ocupa toda a largura */
    background-color: var(--bg-dark); /* Fundo escuro */
    color: var(--text-on-dark); /* Texto branco */
    text-align: center; /* Texto centralizado */
    padding: 10px 0; /* Espaçamento interno */
    font-size: 0.9em; /* Tamanho da fonte menor */
    z-index: 1000; /* Garante que fique acima de outros elementos */
}

/* Estilos de cabeçalhos e parágrafos dentro dos slides */
.slide h1 {
    font-size: 2.8em; /* Fonte principal um pouco maior */
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.slide h2 { /* Manter h2 um pouco menor que h1 */
    font-size: 2.2em;
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.slide p {
    font-size: 1.3em; /* Texto de baixo um pouco maior */
    max-width: 800px;
    margin-bottom: 30px;
}

/* Estilo para textos destacados */
.highlight-text {
    color: var(--text-highlight);
}

/* Estilo para textos mutados */
.muted-text {
    color: var(--text-muted);
}

/* Estilos para placeholder (ex: em inputs, se houver) */
::placeholder {
    color: var(--text-muted);
    opacity: 1; /* Necessário para garantir que a cor seja aplicada em alguns browsers */
}

/* Estilos gerais de botão */
.btn {
    padding: 15px 30px;
    border: none;
    border-radius: 50px;
    font-size: 1.2em;
    cursor: pointer;
    display: inline-flex; /* Para alinhar texto e possível ícone */
    align-items: center;
    gap: 10px; /* Espaçamento entre texto e ícone */
    text-decoration: none; /* Remover sublinhado se for um link */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    margin-top: 20px;
    font-weight: 700;
}

/* Botão para background escuro */
.btn-dark-bg {
    background-color: var(--btn-bg-default);
    color: var(--btn-text-dark-bg);
}

.btn-dark-bg:hover {
    background-color: var(--btn-hover-default);
    transform: translateY(-3px);
}

/* Botão para background claro */
.btn-light-bg {
    background-color: var(--btn-bg-default);
    color: var(--btn-text-light-bg);
}

.btn-light-bg:hover {
    background-color: var(--btn-hover-default);
    transform: translateY(-3px);
}

/* Estilos para o botão WhatsApp */
.whatsapp-button {
    background-color: var(--btn-bg-default); /* Cor verdinha */
    color: var(--btn-text-dark-bg); /* Texto branco para background escuro */
    padding: 15px 35px; /* **AJUSTADO**: Menos padding para não ficar tão comprido */
    border: none;
    border-radius: 50px; /* **ARREDONDADO**: Mantém arredondado */
    font-size: 1.25em; /* Fonte do texto do botão */
    cursor: pointer;
    display: inline-flex; /* Para alinhar ícone e texto */
    align-items: center; /* Alinha verticalmente no centro */
    gap: 10px; /* Espaçamento entre o ícone e o texto */
    text-decoration: none; /* Remove sublinhado */
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-top: 40px;
    font-weight: 700;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    white-space: nowrap; /* Impede que o texto quebre em várias linhas */
}

/* Estilo para o ícone do Font Awesome dentro do botão */
.whatsapp-button .fa-whatsapp {
    font-size: 1.4em; /* Tamanho do ícone do WhatsApp */
}

.whatsapp-button:hover {
    background-color: var(--btn-hover-default); /* Cor de hover padrão (amarelo) */
    transform: translateY(-5px); /* Efeito de elevação sutil no hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Ajustes responsivos para o botão WhatsApp em telas menores */
@media (max-width: 768px) {
    .whatsapp-button {
        width: auto; /* Deixa a largura automática pelo conteúdo */
        padding: 12px 25px; /* Padding menor */
        font-size: 1.1em; /* Fonte menor */
        gap: 8px;
    }
    .whatsapp-button .fa-whatsapp {
        font-size: 1.2em; /* Ícone menor */
    }
}

/* Estilos para cards de serviço */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsivo, mínimo de 280px por card */
    gap: 30px; /* Aumentado o gap para melhor visual */
    max-width: 1200px; /* Largura máxima para a grade */
    margin-top: 40px;
    padding: 0 20px;
}

.service-card {
    background-color: var(--text-on-dark); /* Cards brancos no slide de fundo claro */
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text-on-light); /* Texto escuro dentro do card branco */
}

.service-card:hover {
    transform: translateY(-10px); /* Efeito de elevação no hover */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.service-card h3 {
    margin-bottom: 10px;
    font-size: 1.5em;
    color: var(--bg-dark); /* Título do card em cor escura */
}

.service-card p {
    font-size: 1em;
    margin-bottom: 0;
    color: var(--text-muted); /* Descrição do card em muted-text */
}


/* Responsividade Básica */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr; /* Uma coluna em telas menores */
        gap: 20px;
    }

    .slide h1 {
        font-size: 2.2em;
    }

    .slide h2 {
        font-size: 1.8em;
    }

    .slide p {
        font-size: 1em;
        padding: 0 10px; /* Mais padding em p para celular */
    }

    .btn {
        width: 90%; /* Botão ocupa mais largura no celular */
        font-size: 1em;
        padding: 12px 20px;
    }
}

/* Classe para animações (será usada com JS) */
/* Inicialmente invisível e ligeiramente deslocado */
.animated {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Estado visível para animação */
.animated.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* Estilos para o Menu de Navegação Flutuante (Desktop Only) */
.desktop-nav {
    position: fixed; /* Fixa o menu na tela */
    top: 0; /* No topo */
    left: 0;
    width: 100%; /* Ocupa toda a largura */
    background-color: rgba(2, 44, 59, 0.7); /* Fundo escuro semitransparente */
    padding: 15px 0; /* Espaçamento interno */
    z-index: 1001; /* Acima de todos os outros elementos, incluindo o footer */
    backdrop-filter: blur(5px); /* Efeito de desfoque para o fundo transparente (modern browsers) */
    display: flex; /* Para centralizar os itens de navegação */
    justify-content: center; /* Centraliza horizontalmente */
    transition: background-color 0.3s ease; /* Transição suave para o fundo */
}

.desktop-nav ul {
    list-style: none; /* Remove marcadores de lista */
    display: flex; /* Itens da lista lado a lado */
    gap: 40px; /* Espaçamento entre os itens do menu */
}

.desktop-nav ul li a {
    color: var(--text-on-dark); /* Texto branco */
    text-decoration: none; /* Remove sublinhado */
    font-weight: 400; /* Peso da fonte padrão */
    font-size: 1.1em; /* Tamanho da fonte */
    padding: 5px 10px; /* Espaçamento interno para os links */
    border-radius: 5px; /* Bordas arredondadas */
    transition: color 0.3s ease, background-color 0.3s ease; /* Transições suaves */
    position: relative; /* Para o indicador de slide ativo */
}

.desktop-nav ul li a:hover {
    color: var(--text-highlight); /* Cor de destaque no hover */
    /* background-color: rgba(205, 223, 9, 0.1); Opcional: fundo suave no hover */
}

/* Indicador de slide ativo */
.desktop-nav ul li a.active {
    color: var(--text-highlight); /* Cor de destaque para o item ativo */
    font-weight: 700; /* Negrito para o item ativo */
    /* Removemos o border-bottom aqui */
    /* padding-bottom: 3px; Também não é mais necessário sem a borda */
}


/* Esconder o menu em dispositivos móveis */
@media (max-width: 768px) {
    .desktop-nav {
        display: none; /* Oculta o menu em telas menores que 768px */
    }
}

/* Wrapper para o conteúdo de texto nos slides (para alinhamento esquerdo em bloco centralizado) */
.text-content-wrapper {
    max-width: 900px; /* Largura máxima do seu bloco de texto */
    width: 100%; /* Garante que ele ocupe 100% da largura disponível até o max-width */
    text-align: left; /* Alinha o texto à esquerda dentro deste wrapper */
    padding: 0 40px; /* Espaçamento interno para evitar que o texto encoste nas bordas laterais do wrapper */
    box-sizing: border-box; /* Garante que o padding seja incluído na largura */
}

/* Ajustes responsivos para o wrapper em telas menores */
@media (max-width: 768px) {
    .text-content-wrapper {
        padding: 0 20px; /* Menor padding em telas pequenas */
    }

    .slide h1 {
        font-size: 2.2em; /* Ajuste para celular */
    }

    .slide p {
        font-size: 1.1em; /* Ajuste para celular */
    }
}


/* Estilo para a logo */
.main-logo {
    max-width: 250px; /* Tamanho máximo da logo */
    height: auto;
    margin-bottom: 40px; /* Espaçamento abaixo da logo */
}

/* Responsividade da logo */
@media (max-width: 768px) {
    .main-logo {
        max-width: 180px; /* Logo menor em telas de celular */
        margin-bottom: 30px;
    }
}


/* Ajustes para o slide de serviços (#slide-3) em telas pequenas (mobile) */
@media (max-width: 768px) {
    #slide-3 {
        overflow-y: auto; /* Habilita a rolagem vertical apenas para este slide */
        scroll-snap-type: none; /* Desabilita o scroll-snap para este slide, permitindo rolagem livre */
        justify-content: flex-start; /* Alinha o conteúdo ao topo, para que a rolagem comece de cima */
        padding-top: 80px; /* Adiciona um padding no topo para o conteúdo não colar na parte superior */
        padding-bottom: calc(80px + var(--fixed-footer-height, 50px) + 20px); /* **AJUSTADO**: Aumenta o padding-bottom para considerar o footer e uma margem extra */
        align-items: center; /* Mantém centralizado horizontalmente, mas permite scroll vertical */
        
    }

    /* Ajuste para o título dentro do slide 3 para não ter margin-top excessivo quando rolável */
    #slide-3 h2 {
        margin-top: 0; /* Remove a margem superior padrão do h2 para começar mais ao topo */
        margin-bottom: 25px; /* Ajusta a margem inferior */
        padding-top: 0;
    }

    /* Ajuste para a grade de serviços para garantir que o conteúdo não se comprima */
    #slide-3 .services-grid {
        flex-grow: 0; /* Impede que a grade ocupe todo o espaço disponível, deixando-o para rolagem */
        padding: 0 10px; /* Ajusta o padding lateral da grade no mobile */
    }
}


/* Estilo para os ícones dentro dos cards de serviço */
.service-card .service-icon {
    font-size: 3.5em; /* Tamanho grande para destaque */
    color: var(--bg-accent); /* Cor verdinha para o ícone */
    margin-bottom: 20px; /* Espaçamento abaixo do ícone */
    transition: transform 0.3s ease;
}

/* Efeito de hover no card para o ícone */
.service-card:hover .service-icon {
    transform: scale(1.1); /* Ícone cresce um pouco no hover */
}

/* Ajustes responsivos para os ícones em telas menores */
@media (max-width: 768px) {
    .service-card .service-icon {
        font-size: 2.8em; /* Ícone menor em mobile */
        margin-bottom: 15px;
    }
    .service-card h3 {
        font-size: 1.3em; /* Título do card um pouco menor */
    }
    .service-card p {
        font-size: 0.95em; /* Parágrafo do card um pouco menor */
    }
}


/* Estilo para o ícone de Login no Footer (apenas Mobile) */
.footer-login-mobile {
    display: none; /* Por padrão, escondido no desktop */
    color: var(--bg-accent); /* Cor verdinha */
    font-size: 1.2em; /* Tamanho do ícone */
    margin-left: 10px; /* Espaçamento da frase */
    text-decoration: none; /* Sem sublinhado */
    transition: color 0.3s ease;
}

.footer-login-mobile:hover {
    color: var(--btn-hover-default); /* Cor de hover padrão (amarelo) */
}

/* Mostrar o ícone no footer apenas em telas menores (mobile) */
@media (max-width: 768px) {
    .footer-login-mobile {
        display: inline-block; /* Aparece no mobile */
        vertical-align: middle; /* Alinha com o texto do copyright */
    }

    /* Ajuste para o texto do footer para garantir que o ícone caiba */
    .fixed-footer p {
        display: flex; /* Transforma o parágrafo em flex para centralizar e alinhar o ícone */
        justify-content: center;
        align-items: center;
        flex-wrap: wrap; /* Permite que o texto e o ícone quebrem linha se não houver espaço */
        padding: 0 10px; /* Adiciona um pouco de padding lateral para não colar nas bordas */
    }
}



/* Estilos para as setas de navegação (desktop) */
.navigation-arrows {
    position: fixed; /* Fixa as setas na tela */
    bottom: calc(var(--fixed-footer-height, 50px) + 20px); /* Posição acima do footer + 20px de margem */
    left: 0;
    width: 100%; /* Ocupa toda a largura para posicionar as setas nos cantos */
    display: flex;
    justify-content: space-between; /* Coloca as setas nos extremos */
    padding: 0 20px; /* Espaçamento das bordas */
    z-index: 999; /* Fica acima do conteúdo, mas abaixo do menu e do botão mobile */
    pointer-events: none; /* Permite clicar através da div, apenas as setas serão clicáveis */
}

.nav-arrow {
    font-size: 3em; /* Tamanho do ícone */
    color: rgba(255, 255, 255, 0.4); /* Branco semi-transparente discreto */
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
    pointer-events: auto; /* Habilita o clique apenas nas setas */
    user-select: none; /* Impede a seleção do texto do ícone */
}

.nav-arrow:hover {
    color: rgba(255, 255, 255, 0.8); /* Fica mais visível no hover */
    transform: scale(1.1); /* Efeito de leve zoom no hover */
}

/* Ocultar as setas de navegação no mobile */
@media (max-width: 768px) {
    .navigation-arrows {
        display: none; /* Esconde as setas em telas menores */
    }
}


/* Estilos para a instrução de arrastar para mobile */
.swipe-instruction {
    display: none; /* Por padrão, escondido */
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
    color: var(--text-highlight); /* Cor verdinha */
    opacity: 0; /* Começa invisível para ser animado pelo JS */
    transition: opacity 0.5s ease;
}

.swipe-instruction.is-visible {
    opacity: 1; /* Torna visível */
}

.swipe-instruction .material-icons {
    font-size: 4em; /* Ícone grande */
    animation: swipe-hint 1.5s infinite ease-in-out; /* Animação de pulso/movimento */
}

.swipe-instruction p {
    font-size: 1.1em;
    margin-top: 10px;
    color: var(--text-on-dark); /* Texto branco */
}

/* Animação para o ícone de arrastar */
@keyframes swipe-hint {
    0% { transform: translateX(0); opacity: 0.8; }
    50% { transform: translateX(20px); opacity: 1; }
    100% { transform: translateX(0); opacity: 0.8; }
}


/* Exibir a instrução apenas em telas menores (mobile) */
@media (max-width: 768px) {
    .swipe-instruction.mobile-only {
        display: flex; /* Exibe a instrução no mobile */
        /* Será visível por JS */
    }
}


/* Estilo para o canvas do efeito de fundo dinâmico de estrelas */
#starfield-canvas {
    position: fixed; /* Fixa o canvas na tela */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2; /* Fica bem atrás de todo o conteúdo e do contêiner do slider */
    background-color: transparent; /* Permite que a cor de fundo de cada slide seja visível */
    pointer-events: none; /* Crucial: Permite clicar através do canvas, não interfere com o site */
}