/* Estilos CSS para la página About US*/
        /* fuentes */
        @font-face {
            font-family: 'Nunito'; /* Nombre de la fuente */
            src: url(/fuentes/Nunito/Nunito-Regular.ttf) format('truetype'); /* Ruta a la fuente */
        }
        
        * {
            box-sizing: border-box; /* Ajusta el modelo de caja para todos los elementos */
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Nunito', sans-serif; /* Fuente personalizada */
            line-height: 1.6; /* Espaciado entre líneas */ 
            color: #333; /* Color del texto */
            background-color: #f8f8f8; /* Color de fondo */
        }
        
        /* Navegación */
        .navbar {  
            background-color: #161B0C; /* Color de fondo de la barra de navegación */
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);     /* Sombra de la barra de navegación */
            padding: 15px 5%; /* Espaciado interno */
            display: flex; /* Flexbox para alinear elementos */
            justify-content: space-between; /* Espacio entre elementos */
            align-items: center; /* Alinear verticalmente */
            position: fixed; /* Fija la barra de navegación en la parte superior */
            width: 100%; /* Ancho completo */
            top: 0; /* Posición en la parte superior */
            z-index: 1000; /* Asegura que esté por encima de otros elementos */
        }
        
        .logo {
            font-weight: 900; /* Peso de la fuente */
            font-size: 24px; /* Tamaño de la fuente */
            color: #6a0dad; /* Color del logo */
            text-decoration: none; /* Sin subrayado */
        }
        
        .nav-links { /* Contenedor de enlaces de navegación */
            display: flex; /* Flexbox para alinear enlaces */
            gap: 20px; /* Espacio entre enlaces */
        }
        
        .nav-links a {  /* Estilo de los enlaces */
            text-decoration: none; /* Sin subrayado */
            color: #333; /* Color del texto */
            font-weight: 600;   /* Peso de la fuente */
            transition: color 0.3s; /* Transición suave para el color */
        }
        
        .nav-links a:hover { /* Efecto al pasar el ratón */
            color: #6a0dad; /* Color al pasar el ratón */
        }
        
        .btn-contacto { /* Botón de contacto */
            background-color: #6a0dad; /* Color de fondo del botón */
            color: white !important; /* Color del texto */
            padding: 8px 16px;  /* Espaciado interno */
            border-radius: 50px; /* Bordes redondeados */
        }
        
        /* Hero Section */
        .hero { /* Sección principal */
            background-color: #161B0C; /* Color de fondo */
            padding: 140px 5% 80px;     /* Espaciado interno */
            text-align: center; /* Alinear texto al centro */
            position: relative; /* Posición relativa para elementos absolutos */
            overflow: hidden; /* Ocultar elementos que sobresalen */
        }
        
        .hero h1 { /* Título principal */
            font-size: 48px; /* Tamaño de la fuente */
            font-weight: 900; /* Peso de la fuente */
            margin-bottom: 15px;    /* Espacio inferior */
            color: #333; /* Color del texto */
        } 
        
        .hero p { /* Descripción */
            font-size: 18px; /* Tamaño de la fuente */
            max-width: 700px; /* Ancho máximo */
            margin: 0 auto 30px; /* Espacio automático a los lados y espacio inferior */
            color: #555; /* Color del texto */
        }
        
        .decorative-element {  /* Elementos decorativos */
            position: absolute; /* Posición absoluta */
            background-color: rgb(255 255 255 / 3%); /*color del elemento*/
            border-radius: 50%; /* Bordes redondeados */
        }
        
        .element-1 { /* Primer elemento decorativo circular */ 
            width: 80px; /* Ancho */
            height: 80px; /* Alto */
            top: 20%; /* Posición superior */
            right: 15%; /* Posición derecha */
        }
        
        .element-2 { /* Segundo elemento decorativo circular */
            width: 40px;
            height: 40px;
            bottom: 30%;
            left: 20%;
        }
        
        /* Team Section */
        .team-section { /* Sección del equipo */ 
            padding: 80px 5%; /* Espaciado interno */
            text-align: center; /* Alinear texto al centro */
        }
        
        .team-title { /* Título del equipo */
            font-size: 36px; /* Tamaño de la fuente */
            font-weight: 800; /* Peso de la fuente */
            margin-bottom: 40px;  /* Espacio inferior */
            color: #333; /* Color del texto */
        }
        
        .team-grid { /* Contenedor de la cuadrícula del equipo */
            display: grid; /* Cuadrícula */
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Columnas automáticas */
            gap: 30px; /* Espacio entre elementos */
            margin-bottom: 60px;    /* Espacio inferior */
        }
        
        .team-member { /* Miembro del equipo */
            border-radius: 10px; /* Bordes redondeados */
            overflow: hidden; /* Ocultar elementos que sobresalen */
            box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Sombra */
            transition: transform 0.3s; /* Transición suave para el movimiento */
        }
        
        .team-member:hover { /* Efecto al pasar el ratón */
            transform: translateY(-5px); /* Mover hacia arriba */
        }
        
        .team-member img { /* Imagen del miembro del equipo */
            width: 100%; /* Ancho completo */
            height: 250px; /* Alto fijo */
            object-fit: cover; /* Ajustar imagen al contenedor */
        } 
        
        .team-info { /* Información del miembro del equipo */
            padding: 20px; /* Espaciado interno */
            background-color: white; /* Color de fondo */
        }
        
        .team-info h3 { /* Nombre del miembro */
            font-size: 20px; /* Tamaño de la fuente */
            margin-bottom: 5px; /* Espacio inferior */
        }
        
        .team-info p { /* Descripción del miembro */
            color: #666; /* Color del texto */
            font-size: 14px; /* Tamaño de la fuente */
        }
        
        /* Content Sections */
        .content-section { /* Sección de contenido */
            padding: 80px 5%; /* Espaciado interno */
            display: flex; /* Flexbox para alinear elementos */
            align-items: center; /* Alinear verticalmente */
            gap: 50px; /* Espacio entre elementos */
        }
        
        .light-bg { /* Fondo claro */
            background-color: white;
        }
        
        .gray-bg { /* Fondo gris */
            background-color: #f8f8f8;
        }
        
        .content-text { /* Texto de contenido */
            flex: 1; /* Ocupa el espacio restante */
        }
        
        .content-text h2 { /* Título de contenido */
            font-size: 36px; /* Tamaño de la fuente */
            font-weight: 800; /* Peso de la fuente */
            margin-bottom: 20px; /* Espacio inferior */
            color: #333; /* Color del texto */
        }
        
        .content-text p { /* Párrafo de contenido */
            color: #666; /* Color del texto */
            margin-bottom: 20px;    /* Espacio inferior */
            font-size: 16px; /* Tamaño de la fuente */
        }
        
        .content-image { /* Imagen de contenido */
            flex: 1; /* Ocupa el espacio restante */
            text-align: center; /* Alinear texto al centro */
        } 
        
        .content-image img { /* Imagen */
            max-width: 100%; /* Ancho máximo */
            border-radius: 10px; /* Bordes redondeados */
            box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Sombra */
        }
        
        /* Features Section */
        .features-section {
            padding: 80px 5%;
            text-align: center;
            background-color: white;
        }
        
        .features-title { /* Título de características */
            font-size: 36px;
            font-weight: 800;
            margin-bottom: 50px; /* Espacio inferior */
            color: #333;
        }
        
        .features-grid { /* Cuadrícula de características */
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
        }
        
        .feature-card { /* Tarjeta de características */
            padding: 30px;
            border-radius: 10px;
            background-color: #f8f8f8;
            transition: transform 0.3s; /* Transición suave para el movimiento */
        }
        
        .feature-card:hover { /* Efecto al pasar el ratón */
            transform: translateY(-5px); /* Mover hacia arriba */
        }
        
        .feature-icon { /* Icono de características */
            width: 70px; /* Ancho */
            height: 70px;
            background-color: #161B0C;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 30px;
            color: #6a0dad;
        }
        
        .feature-card h3 { /* Título de características */
            font-size: 20px;
            margin-bottom: 15px;
        }
        
        /* Contact Section */
        .contact-section { /* Sección de contacto */
            padding: 80px 5%;
            background-color: #6a0dad;
            color: white;
            text-align: center;
        }
        
        .contact-title {    /* Título de contacto */
            font-size: 36px; 
            font-weight: 800;
            margin-bottom: 30px;
        }
        
        .contact-info { /* Información de contacto */
            display: flex;
            justify-content: center;
            gap: 50px;
            flex-wrap: wrap;
            margin-bottom: 40px;
        }
        
        .contact-item { /* Elemento de contacto */
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .contact-item i { /* Icono de contacto */
            font-size: 24px;
        }
        
        /* .contact-buttons { Botones de contacto */
            /* display: flex;
            justify-content: center;
            gap: 20px;
        } */
        
        .btn {  /* Botón */
            padding: 12px 24px; /* Espaciado interno */
            border-radius: 50px; /* Bordes redondeados */
            font-weight: 700;
            text-decoration: none; /* Sin subrayado */
            transition: all 0.3s; /* Transición suave para todos los efectos */
            display: inline-block; /* Mostrar como bloque en línea */
        }
        
        .btn-white { /* Botón blanco */
            background-color: white;
            color: #6a0dad; /* Color del texto */
        }
        
        .btn-outline { /* Botón con borde */
            border: 2px solid white;
            color: white;
        }
        
        .btn:hover {    /* Efecto al pasar el ratón */
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        /* Footer */
        footer { /* Pie de página */
            background-color: #222;
            color: white;
            padding: 30px 5%;
            text-align: center;
        }
        
        .footer-links { /* Enlaces del pie de página */
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .footer-links a { /* Enlace del pie de página */
            color: white; 
            text-decoration: none;
        }
        
        .footer-links a:hover { /* Efecto al pasar el ratón */
            text-decoration: underline;
        }
        
        .social-icons { /* Iconos sociales */
            margin-bottom: 20px;
        }
        
        .social-icons a { /* Enlace de icono social */
            color: white;
            font-size: 20px;
            margin: 0 10px;
        }
        
        .copyright { /* Derechos de autor */
            color: #aaa;
            font-size: 14px;
        }
        /* === MENÚ RESPONSIVE === */
        .menu-toggle {
            display: none;
            background: transparent;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 5px 10px;
        }
        /* Dropdown Menu */
        .dropdown-menu {
            display: none;
            position: absolute;
            right: 0;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            z-index: 1000;
        }

        .dropdown-menu a {
            display: block;
            padding: 12px 20px;
            text-decoration: none;
            color: #333;
        }

        .dropdown-menu a:hover {
            background-color: #f5f5f5;
        }
        /*-- ESTILOS RESPONSIVOS --*/
        /* Responsive */
        /* Responsive Styles */
        @media (max-width: 768px) {
            /* Navigation */
            .nav-links {
                display: none;
            }
            
            .menu-toggle {
                display: block;
            }
            
            nav.active ul {
                display: flex;
                flex-direction: column;
                position: absolute;
                top: 50px;
                left: 0;
                right: 0;
                background-color: #161B0C;
                padding: 10px 0;
                box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
            }
            
            nav ul li {
                margin: 0;
                text-align: center;
                width: 100%;
            }
            
            nav ul li a {
                display: block;
                padding: 12px 15px;
            }
            
            /* Header */
            header {
                padding: 10px 15px;
            }
            
            .logo {
                font-size: 24px;
            }
            
            .user-menu {
                right: 15px;
            }
            
            /* Content Sections */
            .content-section {
                flex-direction: column;
            }
            
            /* Hero Section */
            .hero {
                padding: 100px 15px 40px;
            }
            
            .hero h1 {
                font-size: 28px;
            }
            
            /* Categories */
            .categorias {
                gap: 15px;
            }
            
            .categoria {
                width: 100px;
                height: 100px;
            }
        }