:root {
    --primary: #84cc16; /* Verde Hanoi */
    --dark: #0f172a;
    --white: #ffffff;
    --gray-bg: #f8fafc;
    --transition: all 0.4s ease;
}

/* ANTI-SCROLL */
html, body { overflow-x: hidden; width: 100%; margin: 0; padding: 0; }
* { box-sizing: border-box; }
body { font-family: 'Plus Jakarta Sans', sans-serif; color: #334155; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.text-center { text-align: center; }
.underline { width: 40px; height: 5px; background: var(--primary); margin: 20px auto; }

/* HEADER COMPACTO APILADO */
.main-header {
    position: fixed; top: 0; width: 100%; z-index: 2000;
    background: transparent; transition: var(--transition);
    padding: 10px 0;
}
.main-header.scrolled {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(10px);
    padding: 8px 0;
}

.header-stack { display: flex; flex-direction: column; align-items: center; gap: 0px; }

/* LOGO BICOLOR SOLICITADO */
.logo { 
    font-family: 'Archivo Black', sans-serif; 
    font-size: 2rem; color: var(--white); /* HANOI en Blanco */
    text-transform: uppercase;
}
.logo span { color: var(--primary); } /* CITY en Verde */

.nav-links { display: flex; list-style: none; gap: 30px; margin-top: 5px; margin-left:-30px; }
.nav-links a { 
    text-decoration: none; color: var(--white); 
    font-weight: 800; font-size: 0.75rem; 
    text-transform: uppercase; letter-spacing: 1.5px;
}
.nav-links a:hover { color: var(--primary); }

/* HERO */
.hero {
    height: 100vh;
    background: linear-gradient(rgba(15,23,42,0.7), rgba(15,23,42,0.7)), 
                url('../img/header1.jpg');
    background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center; text-align: center; color: var(--white);
}
.hero-title { font-family: 'Archivo Black', sans-serif; font-size: clamp(2.2rem, 8vw, 4.5rem); line-height: 1; margin-bottom: 25px; }
.hero-title span { color: var(--primary); }

/* BOTÓN HONOR */
.btn-primary { 
    background: var(--primary); color: var(--dark); padding: 18px 45px; 
    font-family: 'Archivo Black', sans-serif; font-size: 0.85rem; 
    border: none; cursor: pointer; text-decoration: none; display: inline-block; 
    transition: 0.3s; margin-top: 45px; 
}
.btn-primary:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(132, 204, 22, 0.3); }

/* IDENTIDAD - FIX IMAGEN */
.identidad-section { padding: 100px 0; background: #fff; }
.identidad-extra-desc { max-width: 800px; margin: 0 auto 40px; font-size: 1.1rem; color: #64748b; }
.identidad-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 50px; }
.card-identidad { flex: 1; min-width: 280px; padding: 40px; background: var(--gray-bg); border-radius: 4px; }
.dark-card { background: var(--dark); color: #fff; }
.card-icon { font-size: 2rem; color: var(--primary); margin-bottom: 15px; }

.identidad-image-container { width: 100%; max-width: 1000px; margin: 0 auto; overflow: hidden; border-radius: 8px; }
.img-identidad { width: 100%; height: auto; display: block; object-fit: cover; }
.spacer-extra { height: 60px; }

/* SERVICIOS */
.services-section { padding: 100px 0; background: var(--dark); color: #fff; }
.services-modern-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); border: 1px solid rgba(255,255,255,0.1); }
.service-block { padding: 50px 30px; border: 1px solid rgba(255,255,255,0.1); transition: 0.3s; }
.service-block:hover { background: var(--white); color: var(--dark); }
.s-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.s-icon { font-size: 1.8rem; color: var(--primary); }
.s-num { font-family: 'Archivo Black', sans-serif; font-size: 2rem; opacity: 0.2; }

/* FORMULARIO */
.contact-section { padding: 100px 0; background: var(--gray-bg); }
.form-wrapper { max-width: 850px; margin: 0 auto; background: #fff; padding: 60px 40px; border-radius: 4px; }
.form-main-title { font-family: 'Archivo Black', sans-serif; font-size: clamp(1.6rem, 5vw, 2.5rem); margin-bottom: 30px; }
.form-row { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.input-group { flex: 1; min-width: 250px; text-align: left; }
.input-group label { display: block; font-weight: 800; font-size: 0.7rem; text-transform: uppercase; margin-bottom: 8px; }
.input-group input, .input-group textarea { width: 100%; padding: 18px; border: 1px solid #e2e8f0; font-family: inherit; border-radius: 4px; }
.btn-cta { width: 100%; max-width: 400px; }

/* REDES SOCIALES - COLORES ORIGINALES */
.footer-modern { background: var(--dark); color: #fff; padding: 40px 0; border-top: 6px solid var(--primary); }
.footer-flex { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.footer-right a { font-size: 1.4rem; margin-left: 20px; transition: 0.3s; }
.social-fb { color: #fff; } 
.social-li { color: #fff; } 
.footer-right a:hover { opacity: 0.8; transform: scale(1.1); }

/* RESPONSIVE TOGGLER */
.menu-toggle { display: none; cursor: pointer; flex-direction: column; gap: 5px; position: absolute; right: 20px; top: 25px; }
.menu-toggle .bar { width: 28px; height: 3px; background: var(--white); border-radius: 2px; }

@media (max-width: 900px) {
    .header-stack { flex-direction: row; justify-content: center; }
    .nav-links {
        position: fixed; top: 0; right: -100%; height: 100vh; width: 100%; 
        background: var(--dark); flex-direction: column; justify-content: center; align-items: center; transition: 0.5s;
    }
    .nav-links.active { right: 0; }
    .nav-links a { font-size: 1.5rem; }
    .menu-toggle { display: flex; }
    .logo { margin-bottom: 0; }
}

.shadow-deep { box-shadow: 0 30px 60px rgba(0,0,0,0.12); }
.shadow-soft { box-shadow: 0 10px 30px rgba(0,0,0,0.04); }