/* --- Global Styles --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #0a0a0a; 
    font-family: 'Montserrat', sans-serif;
    color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    overflow: hidden; /* Evita que o body crie barras de scroll próprias */
}

/* --- Monitor Container (A Moldura Azul) --- */
.monitor-container {
    width: 100%;
    max-width: 1200px;
    height: 95vh; 
    min-height: 700px;
    border-radius: 16px;
    border: 1px solid #00bef1; 
    box-shadow: 0 0 40px rgba(0, 190, 241, 0.15);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Retiramos o padding lateral daqui para evitar erros de cálculo */
    padding: 25px 0; 
    z-index: 1;
}

/* --- Header, Main e Footer (Alinhamento Controlado) --- */
header, footer, main {
    width: 100%;
    /* Criamos a margem de 40px aqui, de forma idêntica para todos */
    padding-left: 40px !important;
    padding-right: 40px !important;
}

header {
    display: flex;
    justify-content: flex-end; 
    align-items: center;
    height: 60px;
}

.nav-pill {
    display: flex;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 20px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
}

/* --- O CORAÇÃO DO PROBLEMA: Centralização do Conteúdo --- */
main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow-y: auto;
    /* Esconde a barra de scroll que empurra o conteúdo para a esquerda */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
main::-webkit-scrollbar { display: none; }

/* ESTA REGRA MATA O DESVIO DE MARGEM EM TODAS AS PÁGINAS */
main > div, 
.services-wrapper, 
.portfolio-wrapper, 
.about-wrapper, 
.contact-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Imagens do Portfólio (Garante que a grelha não foge) */
.portfolio-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0 auto;
}

.logo img {
    height: auto;
    width: 100%;
    max-width: 450px;
    object-fit: contain;
}

/* Footer Simétrico */
footer {
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: auto;
}
.footer-content { display: flex; justify-content: center; align-items: center; gap: 20px; }

/* ========================================== */
/* MANTER MOBILE IGUAL (VISTO QUE JÁ ESTAVA OK) */
/* ========================================== */
@media (max-width: 768px) {
    body { padding: 10px; }
    .monitor-container { padding: 20px 15px !important; height: auto !important; min-height: 92vh !important; }
    header, footer, main { padding-left: 0 !important; padding-right: 0 !important; }
    .menu-toggle { display: block !important; color: white !important; font-size: 1.8rem; }
    .nav-pill { position: absolute !important; top: 50px !important; right: 0 !important; display: none; flex-direction: column !important; background: rgba(10, 10, 10, 0.98) !important; width: 180px !important; }
    .nav-pill.active-menu { display: flex !important; }
    .btn-glow { width: 100% !important; max-width: 260px !important; font-size: 0.95rem !important; }
}