/* Importação de fonte do Google Fonts para um visual moderno */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* As cores e fontes são definidas no tailwind.config.js no HTML para este projeto */

/* Reset básico para garantir consistência em navegadores */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* Font family e cores base são definidas no tailwind.config.js e aplicadas via classes no body do HTML */
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; /* Suaviza a renderização da fonte */
    scroll-behavior: smooth; /* Rolagem suave (para âncoras internas) */
}

/* Classes globais para o site, complementando o Tailwind */

/* Ajustes para o header (Tailwind já faz a maior parte) */
header .container {
    max-width: 1200px; /* Limita a largura do conteúdo interno do header */
}

/* Ajustes para a logo (Tailwind já faz a maior parte) */
.main-logo {
    /* Largura e responsividade já definidas no HTML via classes Tailwind (w-64 md:w-72 lg:w-80) */
    /* max-width: 90%; */ /* Já coberto por classes Tailwind como w-full e max-w-xs, etc. */
}

/* Ajustes para a navegação (Tailwind já faz a maior parte) */
.main-nav ul li a {
    /* Padding, border-radius, font-weight, font-size e transições já definidos no HTML via classes Tailwind */
}

/* Ajustes para seções principais (Tailwind já faz a maior parte) */
main .container {
    max-width: 1200px;
}

/* Hero Section (Tailwind já faz a maior parte) */
.hero-servicos h1 {
    /* Tamanho da fonte e letter-spacing já definidos no HTML via classes Tailwind */
}

/* Serviços Grid (Tailwind já faz a maior parte) */
.servico-item {
    /* Estilos como background, border-radius, box-shadow, transições e border já definidos no HTML */
}

.servico-item:hover {
    /* Efeitos de hover já definidos no HTML */
}

.servico-icon img {
    /* Tamanho dos ícones já definido no HTML */
}

.servico-item ul li::before {
    /* Estilo para o ícone de check nas listas */
    content: '✔'; /* Ícone de check para os pontos */
    color: var(--nexone-secondary); /* Cor do ponto */
    font-weight: bold;
    display: inline-block;
    width: 1.5em;
    margin-left: -2em;
    position: absolute;
    left: 0;
}

/* CTA Section (Tailwind já faz a maior parte) */
.cta-large {
    /* Estilos do botão CTA já definidos no HTML */
}

/* Footer (Tailwind já faz a maior parte) */
footer {
    /* Padding e font-size já definidos no HTML */
}

/* Media Queries (Tailwind já faz a maior parte com suas classes responsivas) */
/* Este arquivo CSS é minimalista porque a maior parte do estilo é feita com classes Tailwind diretamente no HTML.
   As regras aqui são para ajustes muito específicos ou para elementos que não são facilmente estilizados apenas com classes. */

/* Exemplo de como você adicionaria um CSS personalizado se necessário,
   mas para este projeto, o Tailwind já cobre a maioria das necessidades. */
/* @media (max-width: 768px) {
    .alguma-classe-especifica {
        font-size: 0.9em;
    }
} */