    <style>
        /* =========================================
           2. RESETEO Y ESTILOS BASE
           ========================================= */
        * {
            box-sizing: border-box; /* Evita que los padding rompan los anchos */
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth; /* Desplazamiento suave al hacer clic en enlaces internos */
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background-color: var(--bg-dark);
            color: var(--text-light);
            line-height: 1.6;
            overflow-x: hidden; /* Evita scroll horizontal indeseado */
        }

        /* =========================================
           3. ENCABEZADO Y BARRA SUPERIOR (HEADER)
           ========================================= */
        .main-header {
            background-color: #000;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 20px;
            width: 100%;
            border-bottom: 1px solid #222;
            /*position: sticky;  Opcional: Mantiene el header visible al bajar */
            top: 0;
            z-index: 1000;
        }

        /* Sistema de 3 columnas para centrado perfecto */
        .header-spacer, 
        .top-bar {
            flex: 1; 
        }

        .top-bar {
            display: flex;
            justify-content: flex-end;
        }

        .logo-container {
            flex: 0 0 auto;
            text-align: center;
        }

        .logo-container img {
            max-height: 150px; /* Tamaño optimizado */
            width: auto;
            transition: transform 0.3s ease;
        }
        
        .logo-container img:hover {
            transform: scale(1.1);
        /*  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);*/ utilizar si subo logo sin fondo
        }

        .top-bar-links {
            display: flex;
            gap: 20px;
            padding-right: 100px;
        }
        
        .top-bar-links a {
            color: #888;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 1.5em;
            font-weight: 600;
            transition: color 0.3s ease;
        }
        
        .top-bar-links a:hover {
            color: var(--text-light);
        }
        
        .top-bar-links a:hover i.fa-whatsapp { color: var(--whatsapp-green); }
        .top-bar-links a:hover i.fa-instagram { color: var(--instagram-pink); }

        /* =========================================
           4. SECCIÓN HERO (BIENVENIDA)
           ========================================= */
        .hero {
            text-align: center;
            padding: 120px 20px;
            background: radial-gradient(circle at center, #1f1f1f 0%, #0a0a0a 100%);
        }
        
        .hero h1 {
            font-size: 3.2em;
            margin-bottom: 20px;
            color: #fff;
            font-weight: 700;
            letter-spacing: 1px;
            text-wrap: balance; /* Evita viudas en títulos (solo navegadores modernos) */
        }
        
        .hero p {
            font-size: 1.2em;
            margin-bottom: 40px;
            color: var(--accent-silver);
            max-width: 750px;
            margin-left: auto;
            margin-right: auto;
            text-wrap: balance;
        }
        
        /* Botones */
        .btn-group {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 15px 35px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.9em;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background-color: var(--accent-silver);
            color: #000;
            box-shadow: 0 4px 15px rgba(192, 192, 192, 0.1);
        }
        
        .btn-primary:hover {
            transform: translateY(-5px);
            background-color: var(--accent-silver-hover);
            box-shadow: 0 8px 25px rgba(192, 192, 192, 0.3);
        }
        
        .btn-secondary {
            background-color: transparent;
            border: 2px solid var(--accent-silver);
            color: var(--accent-silver);
        }
        
        .btn-secondary:hover {
            transform: translateY(-5px);
            background-color: var(--accent-silver);
            color: #000;
        }

        /* =========================================
           5. SECCIONES Y TARJETAS DE SERVICIO
           ========================================= */
        .section {
            padding: 80px 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .section-title {
            text-align: center;
            font-size: 2.5em;
            margin-bottom: 60px;
            color: #fff;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .service-card {
            background-color: var(--bg-lighter);
            padding: 40px 30px;
            border-radius: 12px;
            text-align: center;
            border: 1px solid var(--card-border);
            transition: all 0.4s ease;
        }
        
        .service-card:hover {
            transform: translateY(-10px);
            border-color: var(--accent-silver);
            box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
        }
        
        .service-icon {
            font-size: 3.5em;
            color: var(--accent-silver);
            margin-bottom: 25px;
            transition: transform 0.4s ease;
        }

        .service-card:hover .service-icon {
            transform: scale(1.1);
            color: #fff;
        }
        
        .service-card h3 {
            font-size: 1.5em;
            margin-bottom: 15px;
            color: #fff;
            font-weight: 600;
        }
        
        .service-card p {
            color: #aaa;
            font-size: 1em;
            line-height: 1.7;
        }

        /* =========================================
           6. SECCIÓN MODALIDAD (DESARROLLO WEB)
           ========================================= */
        .modality-section {
            background-color: #111;
            padding: 80px 5%;
            text-align: center;
            border-top: 1px solid #222;
            border-bottom: 1px solid #222;
        }
        
        .modality-content {
            max-width: 850px;
            margin: 0 auto;
        }
        
        .modality-content i {
            font-size: 3.5em;
            color: var(--accent-silver);
            margin-bottom: 20px;
        }

        .modality-content h2 {
            color: #fff; 
            margin-bottom: 20px;
            font-size: 2.2em;
        }
        
        .modality-content p {
            font-size: 1.15em;
            color: #bbb;
            line-height: 1.8;
            text-wrap: balance;
        }

        .modality-content strong {
            color: #fff;
        }

        .modality-section:hover {
            box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
        }    

        .modality-section:hover .modality-content i {
            transform: scale(1.1);
            color: #fff;
        }
        
        /* =========================================
           7. SECCIÓN DE CONTACTO Y FOOTER
           ========================================= */
        .contact-section {
            text-align: center;
        }
        
        .contact-subtitle {
            color: #aaa;
            font-size: 1.15em;
            max-width: 650px;
            margin: 0 auto;
            line-height: 1.7;
            text-wrap: balance;
        }

        .social-links {
            display: flex;
            justify-content: center;
            gap: 50px;
            margin-top: 50px;
        }
        
        .social-links a {
            color: var(--accent-silver);
            font-size: 3.5em;
            transition: all 0.3s ease;
        }
        
        .social-links a:hover {
            transform: scale(1.15);
        }
        
        .social-links a.wa:hover { color: var(--whatsapp-green); filter: drop-shadow(0 0 10px rgba(37,211,102,0.4)); }
        .social-links a.ig:hover { color: var(--instagram-pink); filter: drop-shadow(0 0 10px rgba(225,48,108,0.4)); }
        .social-links a.em:hover { color: var(--email-blue); filter: drop-shadow(0 0 10px rgba(51,180,241,0.4)); }
        
        footer {
            text-align: center;
            padding: 30px 20px;
            background-color: #050505;
            font-size: 0.9em;
            color: #666;
            border-top: 1px solid #1a1a1a;
        }
        
        /* =========================================
           8. DISEÑO RESPONSIVO (MÓVILES)
           ========================================= */

        @media (max-width: 768px) {

            .main-header {
                flex-direction: column;
                gap: 15px;
                padding: 20px;
            }
            
            /* Ocultamos el espaciador porque en móvil ya no es necesario centrarlo con flex */
            .header-spacer { 
                display: none; 
            }
            
.header-spacer, 
            .top-bar { 
                display: none;
            
            .top-bar {
                justify-content: center;
                width: 100%;
            }

            .top-bar-links {
            display: none;
            padding-right: 0px;
            }
        
            
            .logo-container img { 
                max-height: 80px; 
            }

            .hero { padding: 80px 20px; }
            .hero h1 { font-size: 2.3em; }
            .hero p { font-size: 1.05em; }
            
            .section { padding: 60px 20px; }
            .section-title { font-size: 2em; margin-bottom: 40px; }
            
            .social-links { gap: 30px; }
            .social-links a { font-size: 3em; }
        }
    </style>