:root {
            --primary-blue: #007bff;
            --primary-blue-hover: #0056b3;
            --primary-blue-light: #e7f3ff;
            --primary-blue-dark: #004085;
            --secondary-teal: #20c997;
            --secondary-teal-hover: #1ba085;
            
            --neutral-white: #ffffff;
            --neutral-gray-50: #f9f9f9;
            --neutral-gray-100: #f8f9fa;
            --neutral-gray-200: #f5f5f5;
            --neutral-gray-300: #f1f1f1;
            --neutral-gray-400: #e9ecef;
            --neutral-gray-500: #dee2e6;
            --neutral-gray-600: #ccc;
            --neutral-gray-700: #adb5bd;
            --neutral-gray-800: #666;
            --neutral-gray-900: #333;
            
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
            --shadow-md: 0 2px 8px rgba(0,0,0,0.1);
            --shadow-lg: 0 4px 16px rgba(0,0,0,0.15);
            
            --border-radius-sm: 4px;
            --border-radius-md: 6px;
            --border-radius-lg: 8px;
            
            --transition-fast: 0.15s ease;
            --transition-normal: 0.2s ease;
            --transition-slow: 0.3s ease;
            
            --spacing-xs: 0.25rem;
            --spacing-sm: 0.5rem;
            --spacing-md: 1rem;
            --spacing-lg: 1.5rem;
            --spacing-xl: 2rem;
            --spacing-2xl: 3rem;
            --spacing-3xl: 4rem;
        }

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

        body {
            font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            line-height: 1.6;
            color: var(--neutral-gray-900);
            background: var(--neutral-white);
        }

        /* Header */
        .header {
            background: var(--neutral-white);
            padding: var(--spacing-md) 0;
            border-bottom: 1px solid var(--neutral-gray-500);
            /* Add browser prefixes and fallback */
            background: rgba(255, 255, 255, 0.95);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
        }

        /* Fallback for older browsers */
        @supports not (backdrop-filter: blur(10px)) {
            .header {
                background: var(--neutral-white);
            }
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-lg);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            text-decoration: none;
        }

        .logo img {
            height: 70px; /* Ajusta esta altura según tu diseño */
            width: auto;  /* Mantiene la proporción original */
            display: block;
        }

        .nav-links {
            display: flex;
            gap: var(--spacing-xl);
            align-items: center;
        }

        .nav-link {
            color: var(--neutral-gray-800);
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition-normal);
        }

        .nav-link:hover {
            color: var(--primary-blue);
        }

        .btn-secondary:hover {
            background: var(--primary-blue);
            color: var(--neutral-white);
        }

        /* Hero Section */
        .hero {
            position: relative; /* Allows child elements to position absolutely inside it */
            min-height: 80vh;   /* Sets a standard height for the banner */
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;   /* Prevents the video from spilling out */
            background: #004085; /* Fallback color while video loads */
            text-align: center;
        }

        .hero-video {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            transform: translate(-50%, -50%);
            object-fit: cover; /* Acts like background-size: cover */
            z-index: 1;
        }

        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 80, 120, 0.25); /* Adjust the opacity (0.45) to make text pop */
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
        }

        .hero-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-lg);
            z-index: 3; 
        }

        .hero-badge {
            background: var(--primary-blue);
            color: var(--neutral-white);
            padding: var(--spacing-sm) var(--spacing-lg);
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 600;
            display: inline-block;
            margin-bottom: var(--spacing-lg);
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 800;
            color: var(--neutral-white); /* Changed to white */
            margin-bottom: var(--spacing-lg);
            line-height: 1.2;
        }

        .hero-subtitle {
            font-size: 1.4rem;
            color: var(--neutral-gray-300); /* Changed to light gray */
            margin-bottom: var(--spacing-2xl);
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        .hero-buttons {
            display: flex;
            gap: var(--spacing-lg);
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }

        .btn-hero-primary {
            background: var(--primary-blue);
            color: var(--neutral-white);
            padding: var(--spacing-lg) var(--spacing-2xl);
            border: none;
            border-radius: var(--border-radius-md);
            font-weight: 600;
            font-size: 1.1rem;
            text-decoration: none;
            transition: var(--transition-normal);
            box-shadow: var(--shadow-md);
        }

        .btn-hero-primary:hover {
            background: var(--primary-blue-hover);
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .btn-hero-secondary {
            background: rgba(255, 255, 255, 0.1);
            color: var(--neutral-white);
            padding: var(--spacing-lg) var(--spacing-2xl);
            border: 2px solid var(--neutral-white);
            border-radius: var(--border-radius-md);
            font-weight: 600;
            font-size: 1.1rem;
            text-decoration: none;
            transition: var(--transition-normal);
            
            /* Safari and iOS Support Fix */
            -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
        }

        .btn-hero-secondary:hover {
            background: var(--neutral-white);
            color: var(--primary-blue-dark);
        }

        /* Product Features */
        .product-features {
            padding: 80px 0;
            background: var(--neutral-white);
        }

        .features-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-lg);
        }

        .section-header {
            text-align: center;
            margin-bottom: var(--spacing-3xl);
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--neutral-gray-900);
            margin-bottom: var(--spacing-md);
        }

        .section-subtitle {
            font-size: 1.2rem;
            color: var(--neutral-gray-700);
            max-width: 600px;
            margin: 0 auto;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: var(--spacing-2xl);
        }

        .feature-card {
            background: var(--neutral-gray-50);
            padding: var(--spacing-2xl);
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-sm);
            transition: var(--transition-normal);
            border: 1px solid var(--neutral-gray-400);
        }

        .feature-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
        }

        .feature-icon {
            width: 60px;
            height: 60px;
            background: var(--primary-blue-light);
            color: var(--primary-blue);
            border-radius: var(--border-radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: var(--spacing-lg);
            font-size: 1.5rem;
            font-weight: 700;
        }

        .feature-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--neutral-gray-900);
            margin-bottom: var(--spacing-md);
        }

        .feature-description {
            color: var(--neutral-gray-700);
            line-height: 1.6;
        }

        /* Value Proposition */
        .proyectos {
            padding: 80px 0;
            background: var(--neutral-gray-50);
        }

        .btn-learn-more:hover {
            background: var(--secondary-teal-hover);
        }

        /* Company Section */
        .company-section {
            padding: 80px 0;
            background: var(--neutral-white);
        }

        .company-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-lg);
        }

        .company-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: var(--spacing-2xl);
        }

        .company-card {
            background: var(--neutral-white);
            padding: var(--spacing-2xl);
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-sm);
            transition: var(--transition-normal);
            border: 1px solid var(--neutral-gray-400);
        }

        .company-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
        }

        .company-icon {
            width: 60px;
            height: 60px;
            background: var(--primary-blue-light);
            color: var(--primary-blue);
            border-radius: var(--border-radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: var(--spacing-lg);
            font-size: 1.5rem;
            font-weight: 700;
        }

        .company-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--neutral-gray-900);
            margin-bottom: var(--spacing-md);
        }

        .company-description {
            color: var(--neutral-gray-700);
            line-height: 1.6;
        }

        /* Footer */
        .footer {
            background: var(--neutral-gray-900);
            color: var(--neutral-gray-400);
            padding: 40px 0;
        }

        .footer-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-lg);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: var(--spacing-lg);
        }

        .footer-text {
            font-size: 0.9rem;
        }

        .footer-links {
            display: flex;
            gap: var(--spacing-lg);
        }

        .footer-link {
            color: var(--neutral-gray-400);
            text-decoration: none;
            font-size: 0.9rem;
            transition: var(--transition-normal);
        }

        .footer-link:hover {
            color: var(--neutral-white);
        }

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .hero-buttons, .cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .section-title {
        font-size: 2rem;
    }

    .company-grid {
        grid-template-columns: 1fr;
    }

    .footer-container {
        flex-direction: column;
        text-align: center;
    }
} /* AQUÍ SE CIERRA EL MEDIA QUERY DE CELULARES */

/* --- CONTROL PANEL LAYOUT (Fuera del media query para que se vea en PC) --- */
.control-panel-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px var(--spacing-lg);
}

.control-panel {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: var(--spacing-xl);
    background: var(--neutral-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    border: 1px solid var(--neutral-gray-400);
}

.project-nav {
    background: var(--neutral-gray-50);
    border-right: 1px solid var(--neutral-gray-400);
    display: flex;
    flex-direction: column;
}

.project-btn {
    width: 100%;
    padding: var(--spacing-xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    background: none;
    border: none;
    border-bottom: 1px solid var(--neutral-gray-400);
    cursor: pointer;
    text-align: left;
    transition: var(--transition-normal);
    font-family: inherit; /* Asegura que herede la fuente Raleway */
}

.project-btn:hover { background: var(--primary-blue-light); }

.project-btn.active {
    background: var(--neutral-white);
    border-left: 5px solid var(--primary-blue);
}

.project-number {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--neutral-gray-500);
}

.project-btn.active .project-number { color: var(--primary-blue); }

.project-info h4 {
    font-size: 1.1rem;
    color: var(--neutral-gray-900);
    margin-bottom: var(--spacing-xs);
}

.project-info p {
    font-size: 0.85rem;
    color: var(--neutral-gray-700);
    margin: 0;
}

.project-viewer {
    position: relative;
    min-height: 500px;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholder-content {
    text-align: center;
    color: var(--neutral-gray-400);
    padding: var(--spacing-3xl);
}

.icon-placeholder {
    font-size: 4rem;
    margin-bottom: var(--spacing-lg);
}

.project-specs {
    position: absolute;
    bottom: 20px;
    right: 20px;
    /* Usamos un fondo con transparencia para que se note el desenfoque */
    background: rgba(0, 0, 0, 0.6); 
    color: white;
    padding: var(--spacing-md);
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    display: flex;
    gap: var(--spacing-lg);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Ajuste específico para el panel en tablets/laptops pequeñas */
@media (max-width: 992px) {
    .control-panel { 
        grid-template-columns: 1fr; 
    }
    .project-viewer { 
        min-height: 400px; 
    }
}

/* --- SECCIÓN COTIZACIÓN (2 COLUMNAS) --- */
.contacto {
    padding: 80px 0;
    background: var(--neutral-gray-50);
}

.container-wide {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--spacing-xl); /* Añade margen interno lateral */
}

.quote-columns-container {
    display: flex;
    gap: var(--spacing-3xl); /* Espacio amplio entre info y form */
    align-items: flex-start;
    margin-top: var(--spacing-2xl);
}

/* Columna de Información (Izquierda) */
.info-content {
    flex: 1;
    padding-right: var(--spacing-md); /* Evita que el texto toque el centro */
}

.contact-item {
    margin-bottom: var(--spacing-2xl);
}

.contact-item h4 {
    font-size: 1.4rem;
    color: var(--neutral-gray-900); /* Gris oscuro profesional */
    margin-bottom: var(--spacing-md);
    font-weight: 700;
}

.contact-item p {
    color: var(--neutral-gray-700);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Columna de Formulario (Derecha - Estilo Simple y Gris) */
.quote-form-simple {
    flex: 1.2;
    background: var(--neutral-white);
    padding: var(--spacing-2xl);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--neutral-gray-400);
    box-shadow: var(--shadow-md);
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group input, 
.form-group select, 
.form-group textarea {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--neutral-gray-500);
    border-radius: var(--border-radius-md);
    font-family: 'Raleway', sans-serif;
    font-size: 1rem;
    background: var(--neutral-gray-50); /* Gris muy suave */
    transition: all var(--transition-normal);
}

.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
    background: var(--neutral-white); /* Se vuelve blanco al escribir */
}

/* Responsive */
@media (max-width: 850px) {
    .quote-columns-container {
        flex-direction: column;
        gap: var(--spacing-2xl);
    }
    
    .info-content {
        text-align: center;
        padding-right: 0;
    }
}

#button-send:disabled {
    cursor: not-allowed;
    filter: grayscale(0.5);
    transform: none;
}

/* ==========================================================================
   FAQ ACCORDION (DESPLEGABLES)
   ========================================================================== */
.faq-section {
    padding: 80px 0;
    background: var(--neutral-white);
}

.faq-container {
    max-width: 900px; /* Un ancho más angosto (900px) hace que los acordeones se lean mucho mejor que en 1200px */
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.faq-item {
    background: var(--neutral-gray-50);
    border: 1px solid var(--neutral-gray-500);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition: var(--transition-fast);
}

/* Remueve la flecha por defecto de la etiqueta summary en navegadores modernos y Safari */
.faq-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    cursor: pointer;
    font-family: inherit;
    list-style: none; /* Oculta flecha por defecto */
    
    /* Soporte para Safari e iOS */
    -webkit-user-select: none;
    user-select: none;
    
    transition: var(--transition-fast);
}

.faq-trigger::-webkit-details-marker {
    display: none; /* Oculta flecha por defecto en Safari */
}

.faq-trigger:hover {
    background: var(--primary-blue-light);
}

.faq-trigger:hover .faq-title {
    color: var(--primary-blue-dark);
}

.faq-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--neutral-gray-900);
    padding-right: var(--spacing-md);
}

.faq-arrow {
    font-size: 0.75rem;
    color: var(--neutral-gray-700);
    transition: transform var(--transition-normal);
}

/* EFECTOS INTERACTIVOS AL ABRIR EL DESPLEGABLE */
/* Cambia el color del borde completo del ítem abierto */
.faq-item[open] {
    border-color: var(--primary-blue);
    background: var(--neutral-white);
    box-shadow: var(--shadow-sm);
}

/* Modifica el contenedor del trigger cuando está abierto */
.faq-item[open] .faq-trigger {
    border-bottom: 1px solid var(--neutral-gray-400);
    background: var(--neutral-white);
}

/* Rota la flecha indicadora 180 grados de forma animada */
.faq-item[open] .faq-arrow {
    transform: rotate(180deg);
    color: var(--primary-blue);
}

/* Contenedor de la respuesta interna */
.faq-content {
    padding: var(--spacing-lg);
    background: var(--neutral-white);
}

.faq-answer {
    color: var(--neutral-gray-800);
    font-size: 1rem;
    line-height: 1.6;
}

/* Ajustes Responsive para teléfonos */
@media (max-width: 768px) {
    .faq-title {
        font-size: 1.05rem;
    }
    
    .faq-answer {
        font-size: 0.95rem;
    }
}