/* Reset simples */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Container centralizado */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.site-header {
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

/* Container do logo */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    font-weight: 700;
}

/* Imagem do logo */
.logo-image {
    display: inline-block;
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.logo-nome {
    display: inline-block;
    height: 45px;
    object-fit: contain;
}

.main-nav ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

.main-nav a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

.main-nav a:hover,
.main-nav a.active {
    color: #0066cc;
    border-bottom: 2px solid #0066cc;
    padding-bottom: 0.25rem;
    transition: all 0.3s ease;
}

/* Hero Section */
.hero {
    padding: 6rem 0;
    /* CORREÇÃO AQUI */
    background: #f9f9f9;
}

.hero-content {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.hero-text p {
    margin-bottom: 1.5rem;
    max-width: 500px;
    line-height: 1.7;
}

/* Estilos para o título personalizado */
.hero-main-title {
    width: fit-content;
    /* Mantém a largura baseada no conteúdo mais longo */
    margin: 0 auto 2rem auto;
    /* Centraliza o bloco e adiciona margem inferior */
    font-size: 2.5rem;
    color: #222;
}

.hero-main-title span {
    display: block;
    /* Cada parte do título em uma nova linha */
    line-height: 1.2;
    margin: 0;
    padding: 0;
}

.hero-main-title .highlight {
    color: #6f779d;
    font-weight: 700;
    text-align: right;
    /* Alinha "Personalizado" à direita da primeira linha */
}

/* Botões */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
}

.btn-primary {
    background: #0066cc;
    color: #fff;
    margin-top: 1rem;
    transition: background 0.3s ease;
    /* Adiciona transição para o hover */
}

.btn-primary:hover {
    background: #0056b3;
    /* Cor mais escura no hover */
}


/* Why Us Section */
.why-us {
    padding: 4rem 0;
    /* Aumenta um pouco o padding para mais respiro */
    text-align: center;
}

.why-us h2 {
    margin-bottom: 2.5rem;
    /* Mais espaço para o título */
}

.cards {
    display: flex;
    flex-wrap: wrap;
    /* Permite que os cards quebrem a linha */
    gap: 1.5rem;
    justify-content: center;
}

.card {
    background: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    max-width: 300px;
    text-align: center;
    flex: 1 1 30%;
    /* Permite 3 cards por linha, mas com flexibilidade */
}

.card img {
    margin-bottom: 1rem;
    max-width: 100px;
    height: auto;
    object-fit: contain;
}

/* Services Section */
.services {
    padding: 4rem 0;
    /* Aumenta um pouco o padding */
    background: #f9f9f9;
    text-align: center;
}

.services h2 {
    margin-bottom: 2.5rem;
}

.services-cards {
    /* flex-wrap: wrap; já definido na classe .cards */
    /* gap: 1.5rem; já definido na classe .cards */
}

.services-cards .card {
    flex: 1 1 30%;
    /* Permite 3 cards por linha, com flexibilidade */
    /* max-width: 300px; já definido na classe .card */
}

/* Process Section */
.process {
    padding: 4rem 0;
    /* Aumenta um pouco o padding */
}

.process h2 {
    text-align: center;
    margin-bottom: 2.5rem;
}

.process-list {
    list-style: none;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    /* Permite que os itens quebrem a linha */
    gap: 1rem;
    /* Espaço entre os itens do processo */
}

.process-list li {
    flex: 1 1 23%;
    /* Permite 4 itens por linha, com um pouco de espaço */
    text-align: center;
    padding: 1rem;
}

.process-list .step {
    display: inline-block;
    background: #0066cc;
    color: #fff;
    width: 2.5rem;
    /* Ligeiramente maior */
    height: 2.5rem;
    /* Ligeiramente maior */
    line-height: 2.5rem;
    border-radius: 50%;
    margin-bottom: 0.75rem;
    /* Mais espaço */
    font-weight: 700;
}

/* Footer */
.site-footer {
    background: #333;
    color: #eee;
    padding: 3rem 0 1.5rem;
    /* Ajuste no padding */
}

.site-footer .container {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    /* Aumenta o gap entre as colunas do footer */
    justify-content: space-around;
    /* Distribui as colunas */
}

.footer-about,
.footer-contact,
.footer-social {
    flex: 1 1 250px;
    /* Base para as colunas do footer */
}

.site-footer h3,
.site-footer h4 {
    margin-bottom: 1rem;
    /* Mais espaço para os títulos do footer */
    color: #fff;
    /* Garante que os títulos sejam brancos */
}

.site-footer p {
    font-size: 0.95rem;
}

.site-footer a {
    color: #bbb;
    /* Cor mais clara para links no footer */
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-footer a:hover {
    color: #0066cc;
    /* Cor primária no hover */
}

.site-footer ul {
    list-style: none;
    padding: 0;
}

.footer-social ul li {
    display: inline-block;
    margin-right: 10px;
}

.footer-social img {
    vertical-align: middle;
    /* Alinha a imagem com o texto, se houver */
}

.footer-bottom {
    text-align: center;
    padding-top: 1.5rem;
    /* Ajuste no padding */
    border-top: 1px solid #444;
    margin-top: 2rem;
    /* Mais espaço antes da linha */
    font-size: 0.85rem;
    color: #aaa;
}

/* ========================================= */
/*               MEDIA QUERIES               */
/* ========================================= */

/* Para telas menores que 992px (desktops menores e tablets paisagem) */
@media (max-width: 991px) {
    .card {
        flex: 1 1 45%;
        /* 2 cards por linha */
        max-width: 45%;
    }

    .services-cards .card {
        flex: 1 1 45%;
        /* 2 cards por linha */
    }

    .process-list li {
        flex: 1 1 45%;
        /* 2 itens do processo por linha */
    }
}


/* Para telas menores que 768px (tablets retrato e celulares grandes) */
@media (max-width: 767px) {
    .container {
        width: 95%;
        /* Aumenta a largura do container em telas menores */
    }

    /* Header */
    .site-header .container {
        flex-direction: column;
        /* Stacks logo and nav vertically */
        padding: 1rem;
        gap: 1rem;
        /* Espaço entre logo e nav */
    }

    .main-nav ul {
        flex-direction: column;
        /* Stacks nav items vertically */
        text-align: center;
        gap: 0.8rem;
        /* Smaller gap for nav items */
    }

    /* Hero Section */
    .hero {
        padding: 4rem 0;
        /* Menor padding para mobile */
    }

    .hero-content {
        flex-direction: column;
        /* Stacks text and image vertically */
        gap: 1.5rem;
        /* Menor gap entre eles */
    }

    .hero-text {
        order: 2;
        /* Texto abaixo da imagem */
        text-align: center;
        /* Centraliza o texto no mobile */
    }

    .hero-image {
        order: 1;
        /* Imagem acima do texto */
        width: 100%;
        max-width: 350px;
        /* Limita o tamanho da imagem hero em mobile */
    }

    .hero-image img {
        max-width: 100%;
        height: auto;
    }

    .hero-main-title {
        font-size: 2rem;
        /* Menor font-size para H1 em mobile */
        width: 100%;
        /* Ocupa a largura total para centralizar */
        margin: 0 auto 1.5rem auto;
        /* Centraliza o bloco do título */
        text-align: center;
        /* Alinha o h1 inteiro ao centro */
    }

    .hero-main-title span {
        text-align: center;
        /* Centraliza ambas as linhas do título */
    }

    .hero-main-title .highlight {
        text-align: center;
        /* Centraliza também a palavra "Personalizado" */
    }

    .hero-text p {
        max-width: 100%;
        /* Permite que o parágrafo ocupe toda a largura */
        font-size: 1rem;
        /* Ajusta o tamanho da fonte do parágrafo */
        margin-bottom: 1.5rem;
    }

    /* Why Us / Services Sections (Cards) */
    .cards {
        flex-direction: column;
        /* Stacks cards vertically */
        gap: 1rem;
    }

    .card {
        max-width: 100%;
        /* Cards ocupam a largura total */
        flex: 1 1 100%;
    }

    /* Process Section */
    .process-list {
        flex-direction: column;
        /* Stacks process steps vertically */
        gap: 1.5rem;
    }

    .process-list li {
        flex: 1 1 100%;
        /* Cada passo ocupa a largura total */
        text-align: center;
        /* Centraliza o conteúdo do passo */
    }

    /* Footer */
    .site-footer .container {
        flex-direction: column;
        /* Stacks footer columns */
        text-align: center;
        /* Centraliza o texto do footer */
        gap: 2rem;
    }

    .footer-social ul {
        display: flex;
        justify-content: center;
        padding: 0;
    }

    .footer-social ul li {
        margin: 0 10px;
        /* Ajusta margem para ícones sociais */
    }
}

/* Para telas muito pequenas (celulares pequenos, largura < 480px) */
@media (max-width: 479px) {
    .logo-image {
        width: 50px;
        /* Reduz um pouco o logo */
        height: 50px;
    }

    .logo-nome {
        height: 35px;
        /* Reduz um pouco o nome do logo */
    }

    .hero-main-title {
        font-size: 1.8rem;
        /* Font-size ainda menor para H1 */
    }

    .hero-text p {
        font-size: 0.95rem;
        /* Font-size ainda menor para parágrafo */
    }
}