:root {
    --azul-obra: #0a192f;
    --amarillo-seguridad: #ffcc00;
    --gris-concreto: #f4f4f4;
    --blanco: #ffffff;
    --negro: #1a1a1a;
}

* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }

body { font-family: 'Roboto', sans-serif; line-height: 1.6; color: var(--negro); background-color: var(--blanco); }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Navegación */
header { background: var(--azul-obra); padding: 15px 0; color: white; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.3); }
nav { display: flex; justify-content: space-between; align-items: center; }
.logo-text { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.4rem; letter-spacing: -1px; }
.logo-text span { color: var(--amarillo-seguridad); }
.nav-links { list-style: none; display: flex; align-items: center; }
.nav-links li { margin-left: 25px; }
.nav-links a { color: white; text-decoration: none; font-size: 0.85rem; font-weight: 500; text-transform: uppercase; transition: 0.3s; }
.nav-links a:hover { color: var(--amarillo-seguridad); }
.btn-nav { background: var(--amarillo-seguridad); color: var(--azul-obra) !important; padding: 8px 18px; border-radius: 4px; font-weight: 700 !important; }

/* Hero */
.hero { 
    height: 75vh; 
    background: url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?q=80&w=2070') center/cover; 
    position: relative; 
    display: flex; 
    align-items: center; 
    color: white; 
}
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 25, 47, 0.75); }
.hero-content { position: relative; z-index: 1; max-width: 850px; }
.hero h1 { font-family: 'Montserrat', sans-serif; font-size: 3.5rem; line-height: 1.1; margin: 15px 0; font-weight: 800; }
.badge { color: var(--amarillo-seguridad); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 0.85rem; }
.hero p { font-size: 1.2rem; opacity: 0.9; margin-bottom: 35px; }

/* Botones */
.btn { padding: 14px 28px; text-decoration: none; font-weight: 700; border-radius: 4px; display: inline-block; transition: 0.3s; border: none; cursor: pointer; }
.btn-primary { background: var(--amarillo-seguridad); color: var(--azul-obra); }
.btn-outline { border: 2px solid white; color: white; margin-left: 15px; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.btn-full { width: 100%; margin-top: 15px; }

/* Pilares */
.pilares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: -60px; position: relative; z-index: 10; }
.pilar-card { background: white; padding: 35px; text-align: center; border-bottom: 5px solid var(--amarillo-seguridad); box-shadow: 0 15px 35px rgba(0,0,0,0.1); border-radius: 4px; }
.pilar-icon { font-size: 2rem; margin-bottom: 10px; }

/* Servicios */
.servicios-section { padding: 100px 0; background: var(--gris-concreto); }
.section-header { text-align: center; margin-bottom: 60px; }
.line { width: 50px; height: 5px; background: var(--amarillo-seguridad); margin: 15px auto; }
.servicios-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.servicio-item { background: white; padding: 35px; border-left: 6px solid var(--azul-obra); border-radius: 4px; transition: 0.3s; }
.servicio-item:hover { transform: scale(1.02); }

/* Maquinaria */
.maquinaria-seccion { padding: 80px 0; text-align: center; }
.maquinaria-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.maquina-chip { background: var(--azul-obra); color: white; padding: 10px 25px; border-radius: 4px; font-weight: 600; font-size: 0.9rem; }

/* Contacto */
.contacto-seccion { padding: 100px 20px; }
.contacto-wrapper { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; background: var(--azul-obra); color: white; padding: 60px; border-radius: 12px; }
.detalles-contacto { list-style: none; margin: 25px 0; }
.detalles-contacto li { margin-bottom: 15px; font-size: 1rem; opacity: 0.9; }

.btn-download { background: transparent; border: 2px solid var(--amarillo-seguridad); color: var(--amarillo-seguridad); margin-top: 20px; display: inline-flex; align-items: center; gap: 10px; }
.btn-download:hover { background: var(--amarillo-seguridad); color: var(--azul-obra); }

.formulario-contacto { background: white; padding: 35px; border-radius: 8px; color: var(--negro); }
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 15px; }
.campo label { font-weight: 700; font-size: 0.85rem; }
.campo input, .campo textarea { padding: 12px; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; }

/* Footer & WA */
footer { background: #050c16; color: rgba(255,255,255,0.4); padding: 30px 0; text-align: center; font-size: 0.75rem; }
.whatsapp-float { position: fixed; width: 60px; height: 60px; bottom: 35px; right: 35px; background: #25d366; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; text-decoration: none; box-shadow: 0 10px 25px rgba(0,0,0,0.3); z-index: 1000; transition: 0.3s; }
.whatsapp-float:hover { transform: scale(1.1); }

@media (max-width: 768px) {
    .hero h1 { font-size: 2.2rem; }
    .pilares, .servicios-grid, .contacto-wrapper { grid-template-columns: 1fr; }
    .nav-links { display: none; }
    .contacto-wrapper { padding: 30px; }
}