/* Variables de Diseño - Paleta Construcción Moderna y Seria */
        :root {
            --primary-color: #1e293b;   /* Pizarra oscuro / Acero */
            --accent-color: #d97706;    /* Ámbar / Oro industrial (fuerza, construcción) */
            --accent-hover: #b45309;    /* Ámbar oscuro */
            --text-color: #334155;      /* Gris técnico legible */
            --bg-light: #f8fafc;        /* Fondo limpio e institucional */
            --white: #ffffff;
            --success-color: #16a34a;  /* Verde para botón de WhatsApp */
        }

        /* Estilos Generales */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            color: var(--text-color);
            background-color: var(--bg-light);
            line-height: 1.6;
        }

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

        /* Navegación */
        header {
            background-color: rgba(30, 41, 59, 0.95);
            backdrop-filter: blur(5px);
            position: sticky;
            top: 0;
            z-index: 1000;
            border-bottom: 3px solid var(--accent-color);
        }

        nav {
            display: table;
            width: 100%;
            padding: 20px 0;
        }

        .logo-container {
            display: table-cell;
            vertical-align: middle;
        }

        .logo {
            font-size: 24px;
            font-weight: 800;
            color: var(--white);
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .logo span {
            color: var(--accent-color);
        }

        .nav-links-container {
            display: table-cell;
            vertical-align: middle;
            text-align: right;
        }

        .nav-links {
            list-style: none;
            display: inline-block;
        }

        .nav-links li {
            display: inline-block;
            margin-left: 25px;
        }

        .nav-links a {
            text-decoration: none;
            color: #cbd5e1;
            font-weight: 600;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: var(--accent-color);
        }

        /* HERO SECTION CON CARRUSEL DE FONDO */
        #hero-carousel {
            position: relative;
            height: 600px;
            overflow: hidden;
            background-color: #0f172a;
        }

        /* Contenedor de las diapositivas */
        .carousel-inner {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .carousel-item {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            visibility: hidden;
            transition: opacity 1s ease-in-out, visibility 1s;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .carousel-item.active {
            opacity: 1;
            visibility: visible;
        }

        /* Capa oscura superpuesta para asegurar legibilidad del texto */
        .carousel-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(360deg, rgba(15,23,42,0.9) 0%, rgba(15,23,42,0.5) 100%);
            z-index: 2;
        }

        /* Contenido del Hero (Texto y Botones) */
        .hero-content {
            position: relative;
            z-index: 3;
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
            padding-top: 160px;
            color: var(--white);
        }

        .hero-content h1 {
            font-size: 48px;
            font-weight: 800;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            line-height: 1.2;
        }

        .hero-content h1 span {
            color: var(--accent-color);
            border-bottom: 4px solid var(--accent-color);
        }

        .hero-content p {
            font-size: 19px;
            margin-bottom: 35px;
            color: #e2e8f0;
            font-weight: 300;
        }

        /* Botones del Carrusel (Controles manuales opcionales) */
        .carousel-control {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 4;
            background: rgba(30, 41, 59, 0.4);
            border: 1px solid rgba(255,255,255,0.2);
            color: var(--white);
            width: 45px;
            height: 45px;
            border-radius: 50%;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .carousel-control:hover {
            background: var(--accent-color);
            border-color: var(--accent-color);
        }

        .carousel-control.prev { left: 20px; }
        .carousel-control.next { right: 20px; }

        /* Botones de Acción */
        .btn {
            display: inline-block;
            background-color: var(--accent-color);
            color: var(--white);
            padding: 14px 35px;
            text-decoration: none;
            border-radius: 4px;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 14px;
            letter-spacing: 1px;
            transition: background 0.3s, transform 0.2s;
            border: none;
        }

        .btn:hover {
            background-color: var(--accent-hover);
            transform: translateY(-2px);
        }

        .btn-outline {
            background-color: transparent;
            border: 2px solid var(--white);
            margin-left: 15px;
        }

        .btn-outline:hover {
            background-color: var(--white);
            color: var(--primary-color);
        }

        /* Secciones Comunes */
        section {
            padding: 90px 0;
        }

        .section-title {
            text-align: center;
            font-size: 34px;
            color: var(--primary-color);
            margin-bottom: 50px;
            text-transform: uppercase;
            font-weight: 800;
            position: relative;
        }

        .section-title::after {
            content: '';
            display: block;
            width: 60px;
            height: 4px;
            background-color: var(--accent-color);
            margin: 15px auto 0 auto;
        }

        /* Grid de Servicios con Estilo Robustez */
        .services-grid {
            display: table;
            width: 100%;
            table-layout: fixed;
            border-collapse: separate;
            border-spacing: 25px 0;
        }

        .service-card {
            display: table-cell;
            background-color: var(--white);
            padding: 45px 30px;
            border-radius: 4px;
            border-top: 5px solid var(--primary-color);
            box-shadow: 0 10px 30px rgba(0,0,0,0.04);
            text-align: left;
            transition: all 0.3s;
            vertical-align: top;
        }

        .service-card:hover {
            transform: translateY(-10px);
            border-top-color: var(--accent-color);
            box-shadow: 0 15px 35px rgba(0,0,0,0.08);
        }

        .service-card-icon {
            font-size: 36px;
            color: var(--accent-color);
            margin-bottom: 20px;
            font-weight: bold;
        }

        .service-card h3 {
            font-size: 20px;
            margin-bottom: 15px;
            color: var(--primary-color);
            text-transform: uppercase;
            font-weight: 700;
        }

        .service-card p {
            font-size: 15px;
            color: #64748b;
        }

        /* Sección Sobre Nosotros */
        #about {
            background-color: var(--white);
            border-top: 1px solid #e2e8f0;
            border-bottom: 1px solid #e2e8f0;
        }

        .about-content {
            max-width: 850px;
            margin: 0 auto;
            text-align: center;
        }

        .about-content p {
            font-size: 18px;
            color: var(--text-color);
            margin-bottom: 30px;
        }

        /* Estadísticas Destacadas de la Empresa */
        .stats-container {
            display: table;
            width: 100%;
            margin-top: 50px;
        }

        .stat-box {
            display: table-cell;
            text-align: center;
            width: 25%;
        }

        .stat-number {
            font-size: 40px;
            font-weight: 800;
            color: var(--accent-color);
        }

        .stat-label {
            font-size: 13px;
            text-transform: uppercase;
            font-weight: 700;
            color: #64748b;
            letter-spacing: 0.5px;
        }

        /* Formulario de Contacto Corporativo */
        .contact-form {
            max-width: 650px;
            margin: 0 auto;
            background: var(--white);
            padding: 45px;
            border-radius: 4px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.03);
            border: 1px solid #e2e8f0;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            font-size: 14px;
            text-transform: uppercase;
            color: var(--primary-color);
            letter-spacing: 0.5px;
        }

        .form-group input, .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #cbd5e1;
            border-radius: 4px;
            font-size: 15px;
            background-color: #f8fafc;
            transition: all 0.3s;
        }

        .form-group input:focus, .form-group textarea:focus {
            outline: none;
            border-color: var(--accent-color);
            background-color: var(--white);
            box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
        }

        /* Footer */
        footer {
            background-color: #0f172a;
            color: #94a3b8;
            text-align: center;
            padding: 30px 0;
            font-size: 14px;
            border-top: 1px solid #1e293b;
        }

        /* BOTONES FLOTANTES DE CONTACTO */
        .floating-buttons {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 2000;
        }

        .float-btn {
            display: block;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            color: var(--white);
            text-align: center;
            line-height: 56px;
            font-size: 24px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            transition: all 0.3s;
            margin-top: 15px;
            text-decoration: none;
            position: relative;
        }

        .float-btn:hover {
            transform: scale(1.1);
        }

        /* Estilo Botón WhatsApp */
        .float-btn.whatsapp {
            background-color: var(--success-color);
        }

        /* Estilo Botón Llamar */
        .float-btn.phone {
            background-color: var(--accent-color);
        }

        /* Hint/Tooltip para los botones flotantes */
        .float-btn .tooltip-text {
            visibility: hidden;
            width: 140px;
            background-color: #1e293b;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 6px 0;
            position: absolute;
            z-index: 1;
            right: 125%;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 12px;
            font-weight: 600;
            line-height: normal;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .float-btn:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }

        /* Ajustes Responsivos Básicos */
        @media (max-width: 768px) {
            .nav-links-container { display: none; }
            .services-grid { display: block; }
            .service-card { display: block; margin-bottom: 25px; }
            .stats-container { display: block; }
            .stat-box { display: inline-block; width: 50%; margin-bottom: 20px; }
            .hero-content h1 { font-size: 32px; padding: 0 10px; }
            .hero-content { padding-top: 120px; }
            #hero-carousel { height: 500px; }
            .btn-outline { margin-left: 0; margin-top: 15px; display: block; }
        }
		/* =========================
   SOBRE NOSOTROS
========================= */

.about{
    padding:100px 20px;
    background:#fff;
}

.about .container{
    max-width:1200px;
    margin:auto;
}

.section-tag{
    display:inline-block;
    padding:8px 18px;
    border-radius:30px;
    background:#DBEAFE;
    color:#2563EB;
    font-size:.9rem;
    font-weight:600;
    margin-bottom:20px;
}

.about h2{
    font-size:3rem;
    color:#0F172A;
    margin-bottom:25px;
    line-height:1.2;
    max-width:700px;
}

.about p{
    font-size:1.1rem;
    color:#475569;
    line-height:1.8;
    max-width:900px;
    margin-bottom:20px;
}

/* =========================
   ESTADISTICAS
========================= */

.stats{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:25px;
    margin-top:60px;
}

.stat{
    background:#F8FAFC;
    border:1px solid #E2E8F0;
    border-radius:20px;
    padding:35px 25px;
    text-align:center;

    transition:.3s ease;
}

.stat:hover{
    transform:translateY(-8px);

    box-shadow:
    0 15px 35px rgba(37,99,235,.12);
}

.stat h3{
    font-size:3rem;
    font-weight:800;
    color:#2563EB;
    margin-bottom:10px;
}

.stat span{
    color:#64748B;
    font-size:1rem;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

    .about{
        padding:80px 20px;
    }

    .about h2{
        font-size:2.2rem;
    }

    .about p{
        font-size:1rem;
    }

    .stat h3{
        font-size:2.3rem;
    }

}
.contact-header{
    text-align:center;
    margin-bottom:60px;
}

.contact-header h2{
    font-size:3rem;
    font-weight:800;
    color:#0F172A;
    margin-bottom:15px;
}

.contact-header p{
    max-width:700px;
    margin:auto;
    color:#64748B;
    font-size:1.1rem;
    line-height:1.8;
}

.contact-info{
    background:#FFFFFF;
    border-radius:20px;
    padding:40px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    border:1px solid #E2E8F0;
}

.contact-info h3{
    font-size:1.8rem;
    color:#0F172A;
    margin-bottom:30px;
}

.info-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:15px 0;
    color:#475569;
    font-size:1.05rem;
    border-bottom:1px solid #E2E8F0;
}

.info-item:last-child{
    border-bottom:none;
}

@media(max-width:768px){

    .contact-header h2{
        font-size:2.2rem;
    }

    .contact-header p{
        font-size:1rem;
    }

    .contact-info{
        padding:30px;
    }

}
.services{
    padding:100px 20px;
    background:#F8FAFC;
}

.section-header{
    text-align:center;
    margin-bottom:60px;
}

.section-header h2{
    font-size:3rem;
    color:#0F172A;
    margin-bottom:15px;
}

.section-header p{
    max-width:700px;
    margin:auto;
    color:#64748B;
    line-height:1.8;
}

.services-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:30px;
}

.service-card{
    background:#fff;
    padding:35px;
    border-radius:20px;
    border:1px solid #E2E8F0;
    transition:.3s ease;
}

.service-card:hover{
    transform:translateY(-8px);

    box-shadow:
    0 15px 35px rgba(37,99,235,.12);
}

.service-icon{
    font-size:2.5rem;
    margin-bottom:20px;
}

.service-card h3{
    font-size:1.4rem;
    color:#0F172A;
    margin-bottom:15px;
}

.service-card p{
    color:#64748B;
    line-height:1.7;
}

@media(max-width:768px){

    .section-header h2{
        font-size:2.2rem;
    }

}