/***********************************************************************************************************************************************************************************
                                                    ESTILOS GENÉRICOS GLOBALES
***********************************************************************************************************************************************************************************/

/* NOTA: Ojo que si algún elemento supera el límite derecho de la pantalla, rompe toda la responsividad */
/* Ejemplo: A uno de los orbes de la cuadrícula del hero le puse un porcentaje negativo en el right y las cosas empezaron a desbordarse por ese límite */

/* Todos los elementos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Al pulsar desde la tablet en cualquier elemento tipo botón o enlace, aparece un cuadradito azul alrededor */
    /* La siguiente propiedad hace que para todos los elementos (*) ese cuadradito sea transparente */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Cabecera + Cuerpo */
html {
    scroll-behavior: smooth; /* Scroll suave al desplazarse a cualquier sección */
    scroll-padding-top: 80px; /* Para que, durante el scroll de TODOS los enlaces, la barra de navegación no cubra el título de la sección (detiene el scroll 100px más arriba) (no afecta al layout visual, solo al comportamiento del scroll) */
}

/* Cuerpo */
body {
    font-family: 'Inter', sans-serif; /* Fuente general de letras (excepto títulos de sección) */
    background: black; /* Fondo por defecto (cuando no se especifique ninguno) */
    color: white; /* Color de letra por defecto (cuando no se especifique ninguno) */
    line-height: 1.6; /* Distancia entre renglones */
    overflow-x: hidden; /* Esconder por defecto lo que sobresalga de los límites laterales */
}

/* Todas las secciones */
section {
    padding: 5rem 0;
}

/* Contenedor de todas las secciones */
.container {
    /* Unificar tamaño máximo de todas las secciones */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Título de todas las secciones */
.section-title {
    font-family: 'Orbitron', monospace; /* Fuente de letras */
    font-size: clamp(2rem, 4vw, 3rem); /* tamaño de letras */
    text-align: center; /* Alineación centrada */
    margin-bottom: 3rem; /* Espacio por debajo */
}

/* Movimiento de la animación de los títulos de sección */
@keyframes gradienteBoomerang {
    /* Mueve el gradiente de un lado a otro (va y vuelve) */
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Animación de los títulos de sección */
.gradient-text {
    /* Dejar estas 3 propiedades en este sitio (si lo pones debajo de las siguientes propiedades no funciona) */
    background: linear-gradient(45deg, #00CED1, #ACF9FA, #00CED1); /* Fondo gradiente (le damos vida con la animación) */
    animation: gradienteBoomerang 3s ease-in-out infinite; /* Animación para mover el gradiente */
    /* Amplía el gradiente al 200% del tamaño (ancho x alto), crea un espacio extra más allá del texto */
    /* Sin este tamaño ampliado, el gradiente se cortaría en los bordes del texto */
    background-size: 200% 200%;

    -webkit-background-clip: text; /* Recorta el fondo a la forma del texto */
    -webkit-text-fill-color: transparent; /* Hace el color del texto transparente (navegadores iOS) */
    background-clip: text; /* Hace el color del texto transparente (en todos los navegadores) */
}


/***********************************************************************************************************************************************************************************
                                                         BARRA DE NAVEGACIÓN
***********************************************************************************************************************************************************************************/

/* Estilos para la barra de navegación fija ante el scroll */
#barra-navegacion {
    position: fixed; /* Siempre fija arriba */
    display: flex;
    align-items: center;
    top: 0; /* Arriba del todo */
    width: 100%; /* Ocupando todo el ancho de pantalla */
    height: 78px; /* Altura de la barra de navegación (dejarlo en píxeles [así lo encuentras fácil con Ctrl+F], funciona tanto en móviles como en 4k a 100% de zoom. Si lo tocas, debes cambiar el triángulo y sus bordes) */
    /*padding: 1px; /* NO TOCAR, necesario para cuadrar la barra y sus bordes al milímetro */
    background: rgba(255, 255, 255, 0.975); /* La transparencia se la da el 0.975 */
    z-index: 1000; /* Le da prioridad, mostrándose por delante de cualquier elemento de la página (excepto elementos de la barra y subpantallas) */
}

/********************************************************** TRIÁNGULO CENTRAL *******************************************************************/

/* Triángulo central de la barra de navegación, donde aparece el logo de Avisania */
#post-barra {
    content: '';
    position: fixed;
    top: 78px; /* A la misma altura que el final de la barra de navegación (100% de altura de su contenedor padre) */
    left: 50%;
    transform: translateX(-50%); /* Centrado horizontalmente */
    width: 0;
    height: 0;
    border-left: 45px solid transparent;   /* De un cuadrado formado por 4 triángulos, esto es el triángulo de la izquierda (invisible) */
    border-right: 45px solid transparent;  /* De un cuadrado formado por 4 triángulos, esto es el triángulo de la derecha (invisible) */
    border-bottom: 45px solid transparent; /* De un cuadrado formado por 4 triángulos, esto es el triángulo de abajo (invisible) */
    
    /* De un cuadrado formado por 4 triángulos, esto es el triángulo de arriba (que sí es visible, formando el triángulo del logo) */
    border-top: 45px solid rgba(255,255,255,0.975); /* La transparencia se la da el 0.975 */
    z-index: 1000; /* Al mismo nivel que el fondo blanco de la barra de navegación */
    will-change: transform; /* Optimiza los transforms. NO TOCAR: Evita bug que separa triángulo al llegar al límite sup/inferior del scroll */
}

/* Borde izquierdo del triángulo central (hay que dibujarlo así porque el triángulo en realidad está dibujado por la misma propiedad "border") */
#post-barra::before {
    content: '';
    position: absolute;
    z-index: 1001; /* Por delante del fondo blanco de la barra de navegación */
    top: -45px; /* Posición de la esquina izquierda de la línea. 0 es la punta del triángulo, y 45 es la altura total del triángulo */
    width: 3px; /* Grosor de la línea */
    height: 63px; /* Longitud de la línea */
    background-color: black; 
    box-shadow: 0 0 8px white; /* Sombra hacia el lado izquierdo (ojo, si la tocas debes reajustar todas las demás sombras y la del menú hamburguesa) */
    transform-origin: top right; /* Rota desde la punta derecha */
    transform: translateX(-45px) rotate(-45deg); /* Ángulo */
    will-change: transform; /* Optimiza los transforms. NO TOCAR: Evita bug que separa triángulo al llegar al límite sup/inferior del scroll */
}

/* Borde derecho del triángulo central (hay que dibujarlo así porque el triángulo en realidad está dibujado por la misma propiedad "border") */
#post-barra::after {
    content: '';
    position: fixed;
    z-index: 1001; /* Por delante del fondo blanco de la barra de navegación */
    top: -45px; /* Posición de la esquina derecha de la línea. 0 es la punta del triángulo, y 45 es la altura total del triángulo */
    width: 3px; /* Grosor de la línea */
    height: 63px; /* Longitud de la línea */
    background-color: black; /* Color de la línea */
    box-shadow: 0 0 8px white;; /* Sombra hacia el lado derecho (ojo, si la tocas debes reajustar todas las demás sombras y la del menú hamburguesa) */
    transform-origin: top left; /* Rota desde la punta izquierda */
    transform: translateX(-50%) translateX(45px) rotate(45deg); /* Ángulo */
    will-change: transform; /* Optimiza los transforms. NO TOCAR: Evita bug que separa triángulo al llegar al límite sup/inferior del scroll */
}


/********************************************************** BORDES DE LA BARRA ******************************************************************/

/* Borde inferior izquierdo de la barra de navegación (hay que hacerlo así para que no dibuje borde en la cara del triángulo que conecta con la barra) */
#barra-navegacion::before {
    content: '';
    position: fixed;
    z-index: 1001; /* Por delante del fondo blanco de la barra de navegación */
    top: 77.5px; /* Altura de la barra de navegación (menos 0.5px) */
    left: calc(50% - 42px); /* Punto de partida: esquina izquierda del triángulo */
    width: 50%; /* Longitud hasta el límite izquierdo de la pantalla */
    height: 3px; /* Grosor de la línea */
    background-color: black; /* Color de la línea */
    box-shadow: 0 0 8px white; /* Sombra inferior (ojo, si la tocas debes reajustar todas las demás sombras y la del menú hamburguesa) */
    transform: translateX( calc(-100%) ); /* Invertir dirección (en vez de ir hacia la derecha, va hacia la izquierda) */
}

/* Borde inferior derecho de la barra de navegación (hay que hacerlo así para que no dibuje borde en la cara del triángulo que conecta con la barra) */
#barra-navegacion::after {
    content: '';
    position: fixed;
    z-index: 1001; /* Por delante del fondo blanco de la barra de navegación */
    top: 77.5px; /* Altura de la barra de navegación (menos 0.5px, para que el borde derecho del menú hamburguesa desplegado no supere en altura al borde derecho de la barra de navegación) */
    left: calc(50% + 43.8px); /* Punto de partida: esquina derecha del triángulo */
    width: 50%; /* Longitud hasta el límite derecho de la pantalla */
    height: 3px; /* Grosor de la línea */
    background-color: black; /* Color de la línea */
    box-shadow: 0 0 8px white; /* Sombra inferior (ojo, si la tocas debes reajustar todas las demás sombras y la del menú hamburguesa) */
}

/************************************************************* LOGO CENTRAL *********************************************************************/

#logo-empresa {
    position: absolute;
    display: flex;
    align-items: center;
    z-index: 1100; /* Asegura que esté por encima de la barra de navegación */
    /* Centrar verticalmente dentro de la barra de navegación */
    top: 10px; /*5%;*/
    /* Centrar horizontalmente dentro de la barra de navegación*/
    left: 50.15%; 
    transform: translateX(-50.15%);
    /* Ancho y alto del recuadro del logo */
    width: 76px;
    height: auto;
    max-width: 100%; /* Asegura que la imagen no se desborde de su recuadro */
}

/**************************************************************** ENLACES ***********************************************************************/

#menu-navegacion {
    display: flex;
    width: 100%; /* Ocupa todo el ancho disponible */
}

#menu-navegacion ul {
    display: flex;
    list-style-type: none; /* Quitar puntos de lista no numerada (<ul>) */
    margin: 0;
    padding: 0;
    gap: clamp(0.6rem, -3.61rem + 14.004vw, 30rem); /* Distancia entre los elementos del menú (tanto entre los del izquierdo, como entre los del derecho) */
    z-index: 1100; /* Mostrar enlaces por delante del fondo blanco de la barra de navegación */
}

#menu-navegacion-izquierda {
    position: fixed; /* Necesario para que guarde la misma distancia al límite izquierdo, que el menú derecho al límite derecho */
    left: clamp(0.3rem, -2.521rem + 9.384vw, 20rem); /* Distancia al límite izquierdo, entre 481px y 3840px */
}

#menu-navegacion-derecha {
    position: fixed; /* Necesario para que se mantenga a la derecha */
    right: clamp(0.3rem, -2.521rem + 9.384vw, 20rem); /* Distancia al límite derecho, entre 481px y 3840px */
}

/* Enlaces del menú */
#menu-navegacion a {
    text-decoration: none; /* Quitar subrayado de los enlaces */
    font-weight: bold; /* Negrita */
    font-size: clamp(0.85rem, 0.542rem + 1.024vw, 3rem); /* Tamaño letra entre 481px y 3840px. En versiones móviles (480px hacia abajo) cambia */
    text-align: center;

    line-height: 20px; /* Centrar verticalmente (es la única forma en este caso) con respecto a la altura de la barra */

    padding-top: 0.15rem; /*Espaciado entre letra y borde (arriba) */
    padding-bottom: 0.15rem; /*Espaciado entre letra y borde (abajo) */
    padding-left: 0.3rem; /*Espaciado entre letra y borde (izquierda) */
    padding-right: 0.3rem; /*Espaciado entre letra y borde (derecha) */

    border-radius: 5px; /* Borde redondeado */
    -webkit-text-stroke-width: 0.3px; /* Grosor del borde de la letra */
    -webkit-text-stroke-color: #ffffff; /* Color del borde de la letra */
    color: #aaaaaa; /* Color de letra */
    text-shadow: 0 0 5.5px #f0f0f0; /* Sombra de letra */
    background-color: #404040; /* Color de fondo */
    border: 2px solid #f0f0f0; /* Color del borde del recuadro que contiene el texto */
    box-shadow: inset 0 0 7px #f0f0f0, 0 0 8px #858585; /*Sombra hacia dentro del recuadro + Sombra hacia afuera del recuadro */
    /* Tarda 1 segundo en ir cambiando las propiedades indicadas poco a poco */
    transition: fill 1.5s, stroke 1.5s, background-color 1.5s, box-shadow 1.5s, border 1.5s;
}

/* Enlaces del menú al hacer hover */
#menu-navegacion a:hover {
    background-color: #dadada; /* Sombra verde agua */
    color: #ffffff; /* Color de letra */
    text-shadow: 0 0 7.5px #00CED1; /* Sombra de letra */
    -webkit-text-stroke-width: 0.7px; /* Grosor del borde de la letra */
    -webkit-text-stroke-color: #ACF9FA; /* Color del borde de la letra */
    box-shadow: inset 0 0 6px #00CED1, 0 0 10px #00CED1; /*Sombra hacia dentro del recuadro + Sombra hacia afuera del recuadro */
    border: 2px solid #ACF9FA; /* Color del borde del recuadro que contiene el texto */
    /* Tarda 1 segundo en ir cambiando todas las propiedades poco a poco */
    transition: all 1s;
}

/***********************************************************************************************************************************************************************************
                                                                 MENÚ HAMBURGUESA
***********************************************************************************************************************************************************************************/

/* La imagen del menú hamburguesa lleva un checkbox oculto, que se activa al clickarlo */
#checkbox-hamburguesa{
    visibility: hidden; /* Checkbox SIEMPRE oculto, tanto en móviles como en PC */
}

/**************************************************************** SVG **************************************************************************/

/* Para el recuadro del SVG del menú hamburguesa */
.icono-hamburguesa {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center; /* Centrar verticalmente */
    padding-left: 0.5rem; /* Separarlo del lado izquierdo */
}

/* Para el SVG hamburguesa */
#svg-hamburguesa{
    fill: #cfcfcf; /* Color relleno de la flecha */
    stroke: #ffffff; /* Color del borde de la flecha */
    stroke-width: 700; /* Ancho del borde de la flecha */
    filter: drop-shadow( 2px 1px 5px rgba(255, 255, 255, 0.7)); /* Sombra interna del SVG */
    /* Tarda 1 segundo en ir cambiando las propiedades indicadas poco a poco */
    transition: fill 1.5s, stroke 1.5s, background-color 1.5s, box-shadow 1.5s, border 1.5s;
}

/* Para el SVG del menú hamburguesa cuando está desplegado (checkbox activo) */
#checkbox-hamburguesa:checked ~ #menu-hamburguesa #svg-hamburguesa {
    stroke-width: 0.6px; /* Grosor del borde */
    stroke: #ACF9FA; /* Color del borde */
    fill: #ffffff; /* Color interno */
    filter: drop-shadow( 2px 1px 5px rgba(0, 206, 209, 0.9)); /* Sombra que emite propio SVG */
    transition: all 1s; /* Tarda 1 segundo en ir cambiando todas las propiedades poco a poco */
}

/**************************************************************** TEXTO "MENÚ" ****************************************************************/

/* Para el texto "Menú" al lado del icono de la hamburguesa */
#txt-hamburguesa {
    /* Posicionarlo a la derecha del icono de hamburguesa */
    position: absolute;
    left: 2rem;
    /* Centrar verticalmente el texto dentro de su recuadro */
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold; /* Negrita */
    font-size: 1.1rem;/*clamp(0.75rem, 0.568rem + 0.909vw, 2.75rem); /* Tamaño letra responsiva */
    color: #aaaaaa; /* Color de letra */
    text-shadow: 0 0 5.5px #f0f0f0; /* Sombra de la letra */
    -webkit-text-stroke-width: 0.3px; /* Grosor del borde de la letra */
    -webkit-text-stroke-color: #ffffff; /* Color del borde de la letra */
}

/* Estilo texto "Menú" cuando está desplegado (checkbox activo) */
#checkbox-hamburguesa:checked ~ #menu-hamburguesa #txt-hamburguesa {
    color: #ffffff; /* Color de letra */
    text-shadow: 0 0 4.5px #00CED1;
    -webkit-text-stroke-width: 0.3px; /* Grosor del borde de la letra */
    -webkit-text-stroke-color: #ACF9FA; /* Color del borde de la letra */
    /* Tarda 1 segundo en ir cambiando todas las propiedades poco a poco */
    transition: all 1s;
}

/**************************************************************** RECUADRO PARA SVG + TEXTO "MENÚ" ********************************************/

/* Recuadro que engloba el icono de la hamburguesa y el texto "Menú" a su lado, cuando está sin desplegar (checkbox inactivo) */
#menu-hamburguesa {
    display: none; /* Oculto por defecto, visible solo en móviles */
    position: absolute; /* Siempre en el mismo lugar */
    z-index: 1100; /* Se muestra por delante del fondo blanco de la barra de avegación */
    left: 0.65rem; /* Distancia al borde izquierdo de la pantalla */
    /* Centrar verticalmente dentro de la barra de navegación */
    top: 50%;
    transform: translateY(-50%);
    /* Tamaño */
    width: 6rem;
    height: 2rem;
    
    background-color: #404040; /* Color de fondo del recuadro */
    border: 2px solid #f0f0f0; /* Color del borde del recuadro */
    box-shadow: inset 0 0 7px #f0f0f0, 0 0 8px #858585; /*Sombra hacia dentro del recuadro + Sombra hacia afuera del recuadro */
    /* Tarda 1 segundo en ir cambiando las propiedades indicadas poco a poco */
    transition: fill 1.5s, stroke 1.5s, background-color 1.5s, box-shadow 1.5s, border 1.5s;
    cursor: pointer; /* Que la flecha del ratón se convierta en una mano al pasar por el recuadro */
}

/* Recuadro que engloba el icono de la hamburguesa y el texto "Menú" a su lado, cuando está desplegado (checkbox activo) */
#checkbox-hamburguesa:checked ~ #menu-hamburguesa {
    background-color: #dadada; /* Color fondo recuadro */
    border: 2px solid #ACF9FA; /* Color del borde del recuadro que contiene el texto */
    color: #ffffff; /* Color de letra */
    -webkit-text-stroke-width: 0.7px; /* Grosor del borde de la letra */
    -webkit-text-stroke-color: #ACF9FA; /* Color del borde de la letra */
    text-shadow: 0 0 5.5px #00CED1; /* Sombra de la letra */
    box-shadow: inset 0 0 6px #00CED1, 0 0 10px #00CED1; /*Sombra hacia dentro del recuadro + Sombra hacia afuera del recuadro */
    transition: all 1s; /* Tarda 1 segundo en ir cambiando todas las propiedades poco a poco */
}


/************************************************** COMPORTAMIENTO RESPONSIVO HAMBURGUESA *********************************************************/

/* Comportamiento para móviles (ancho 480 píxeles hacia abajo) */
@media (max-width: 480px) {

    /* Mostrar menú ÚNICAMENTE en móviles */
    #menu-hamburguesa{
        display: block;
    }

    /* Menú hamburguesa: ocultar enlaces de navegación (hasta que se despliegue el menú) */
    .enlaces-menu-navegacion {
        visibility: hidden;
    }

    /* Convertir el triángulo de la barra de navegación en un recuadro (cuando el checkbox oculto del menú hamburguesa se active) */
    #checkbox-hamburguesa:checked ~ .post-barra {
        /* El ancho del recuadro llega siempre hasta la punta derecha del triángulo, en cualquier pantalla de entre 320px y 480px */
        width: clamp(13rem, 3rem + 50vw, 18rem);
        height: 45lvh; /* Hasta algo menos de la mitad de la altura de la pantalla */
        left: 0; /* Recuadro pegado al lado izquierdo */
        background-color: rgba(255,255,255,0.975); /* Mismo color y transparencia que la barra de navegación */
        /* Revertir todas las propiedades del triángulo que puedan afectar a nuestro recuadro */
        transform: revert;
        border-left: revert;
        border-right: revert;
        border-bottom: revert;
        border-top: revert;
        /* Nuevos bordes inferior y derecho del recuadro desplegado */
        border-right: 3px solid black;
        border-bottom: 3px solid black;
        /* Sombra hacia abajo/derecha (ojo, si la tocas debes reajustar todas las otras sombras de la barra) */
        box-shadow: 3px 3px 5px rgba(255, 255, 255, 0.2);
        /* NO TOCAR: Evita bug que separa triángulo al llegar al límite sup/inferior del scroll de la página*/
        margin-top: -0.005px; /* Subir el recuadro para que se superponga mínimamente con la barra de navegación */
    }

    /* Ocultar borde izquierdo del triángulo cuando se despliegue el menú hamburguesa (ese triángulo ahora es un recuadro) */
    #checkbox-hamburguesa:checked ~ .post-barra::before {
        display: none;
    }

    /* Ocultar borde derecho del triángulo cuando se despliegue el menú hamburguesa (ese triángulo ahora es un recuadro) */
    #checkbox-hamburguesa:checked ~ .post-barra::after {
        display: none;
    }

    /* Ocultar borde inferior izquierdo de la barra de navegación cuando se despliegue el menú hamburguesa */
    #barra-navegacion:has(#checkbox-hamburguesa:checked)::before {
        display: none;
    }

    /* Ajustar borde inferior derecho de la barra de navegación cuando se despliegue el menú hamburguesa */
    #barra-navegacion:has(#checkbox-hamburguesa:checked)::after {
        left: calc(50% + 45.8px); /* Si no ajustamos su longitud, la línea rebasa el borde del recuadro (con esta medida cumple entre 320 y 480px) */
    }

    /* Estilos para enlaces agrupados del menú hamburguesa desplegado (al activar el checkbox haciendo click en la hamburguesa) */
    #checkbox-hamburguesa:checked ~ .enlaces-menu-navegacion {
        /* Volvemos a hacer visibles los enlaces de la barra de navegación */
        visibility: visible;
        /* Altura a la que se muestra el primer enlace (siempre por debajo del logo), en cualquier pantalla de entre 320px y 480px */
        top: clamp(13rem, 11rem + 10vw, 14rem);
        /* Distancia al borde izquierdo de la pantalla (misma que la distancia del recuadro del menú) */
        left: 0.65rem;
        /* Para que se ponga un enlace debajo de otro en forma de columna */
        display: flex; 
        flex-direction: column;
        position: relative;
        /* Quitar distancia entre enlaces (solo aplica dentro de cada agrupación de enlaces, no entre agrupaciones), los separa verticalmente de forma irregular */
        gap: revert;
    }

    /* Para los enlaces <a> dentro de elementos con clase "enlaces-menu-navegacion" (cuando el checkbox esté activo) */
    /* Debemos seleccionarlos así para que este tamaño sobreescriba al de "#menu-navegacion a", por motivos de especificidad del selector */
    #barra-navegacion #checkbox-hamburguesa:checked ~ .enlaces-menu-navegacion a {
        font-size: clamp(1.2rem, 0.8rem + 2vw, 1.4rem); /* Tamaño letra aumenta entre pantallas 320px y 480px */
        width: clamp(11rem, 3rem + 40vw, 15rem); /* Ancho del recuadro a su alrededor (siempre menor que el ancho de post-barra desplegado) */
        display: block; /* Necesario para que funcione la propiedad width */
        box-sizing: border-box; /* Incluye padding y border en el width */
    }

    /* Para el hover de los enlaces <a> dentro de elementos con clase "enlaces-menu-navegacion" (cuando el checkbox esté activo) */
    #barra-navegacion #checkbox-hamburguesa:checked ~ .enlaces-menu-navegacion a:hover {
        /* Reducimos de 1s a 0.5s para que, al pulsar en un enlace, tarde menos en transicionar (mismo tiempo que por javascript tarda en realizar su función, dando tiempo a visualizar el efecto hover completo) */
        transition: all 0.5s;
    }

    /* Para los enlaces <a> dentro de elementos con clase "enlaces-menu-navegacion" (cuando el checkbox NO esté activo) */
    #barra-navegacion #checkbox-hamburguesa:not(:checked) ~ .enlaces-menu-navegacion a {
        transition: none; /* Quitamos transición para evitar que tarde en desaparecer el enlace al cerrar el menú */
    }

    /* Para los elementos <li> dentro de elementos con clase "enlaces-menu-navegacion" (cuando el checkbox esté activo) */
    #barra-navegacion #checkbox-hamburguesa:checked ~ .enlaces-menu-navegacion li {
        /* Controlamos mejor la separación vertical de cada enlace (si la cambias, hay que reajustar el TOP que controla la altura del primer enlace) */
        margin-bottom: 2.5rem;
    }

    /* Cambia #menu-navegacion (padre de los enlaces), solo cuando #barra-navegacion contiene un #checkbox-hamburguesa activado */
    #barra-navegacion:has(#checkbox-hamburguesa:checked) #menu-navegacion {
        flex-direction: column; /* Necesario para que se ponga un enlace debajo de otro en forma de columna */
    }

}


/************************************************* ANIMACIÓN ONDAS BARRA NAVEGACIÓN *************************************************************/

/* SVG de todas las ondas */
.svg-ondas {
    /* Ocupar el 100% del recuadro padre (las ondas siempre se colocan en el centro, el resto del recuadro es transparencia) */
    width: 100%;
    height: 100%;
}

/* Recuadro padre del SVG de las ondas */
#recuadro-ondas-barra{
    position: fixed; /* Fijo arriba junto a la barra de navegación */
    top: -112px; /* Posición superior (para colocarse centrado en la barra de navegación) */
    height: 300px; /* Altura del contenedor (incluyendo las transparencias por arriba y por abajo) */
    width: 100%; /* Ancho completo del recuadro padre */
}

/* Cada onda individual */
.wave-path {
    fill: none; /* Relleno entre ondas transparente */
    stroke-width: 4px; /* Anchura de línea de cada onda */
    stroke-linecap: round; /* Extremos de las líneas del trazo redondeados. Suaviza las ondas en inicio y fin de cada curva: mayor fluidez */
    opacity: 1; /* Sin transparencias ninguna. Refuerza un poquitín la onda morada */
}

/* Colores y sombras de las ondas */
.onda-azul { 
    stroke: #0044ff; /* Color de la línea */
    filter: drop-shadow(0 0 10px #0044ff) drop-shadow(0 0 10px #0044ff); /* Sombra */
}

.onda-turquesa { 
    stroke: #00f7ff; /* Color de la línea */
    filter: drop-shadow(0 0 10px #00f7ff) drop-shadow(0 0 10px #00f7ff); /* Sombra */
}

.onda-morada { 
    stroke: #9985ec; /* Color de la línea */
    filter: drop-shadow(0 0 9px #9985ec) drop-shadow(0 0 9px #9985ec); /* Es el color que menos se ve, por eso tiene sombra menos dispersa */
}

/* Animación de desplazamiento */
.wave-group {
    animation-name: fluir-ondas;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes fluir-ondas {
    from { transform: translateX(0); }
    to { transform: translateX(-2400px); } /* Hasta el final del viewBox del SVG */
}

/* Velocidad de cada onda */
#g-onda-azul { animation-duration: 4s; } /* La más lenta porque es el color más llamativo */
#g-onda-turquesa { animation-duration: 3s; }
#g-onda-morada { animation-duration: 2s; } /* La más rápida porque es el color menos llamativo */


/***********************************************************************************************************************************************************************************
                                                        HERO - CUADRÍCULA
***********************************************************************************************************************************************************************************/

/* Sección completa */
.hero {
    /* Centrado ocupando todo el alto de pantalla */
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100dvh;
    /* Borde y sombra con la siguiente sección */
    border-bottom: 5px solid black;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Sombra hacia abajo de la cuadrícula (10px es la altura, 30px el difuminado, y 0.5 la oscuridad) */
}

/* Contenedor padre del título + texto + botones + estadísticas (excluye cuadrícula y orbes) */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Para ALTURA en móviles/tablets en horizontal */
@media (max-height: 768px) {

    /* Contenedor padre del título + texto + botones + estadísticas (excluye cuadrícula y orbes) */
    .hero-content {
        /* Separación para que la barra de navegación nunca cubra el título */
        margin-top: 12dvh;
    }

}

/********************************************************* TÍTULO Y SUBTÍTULO *******************************************************************/

/* Contenedor del título */
.hero-title {
    font-family: 'Orbitron', monospace;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

/* Título Principal */
#titulo-atlas {
    font-weight: 1000;
    margin-bottom: 1.5rem;
}

/* Contenedor del subtítulo */
.hero-subtitle {
    font-size: 1.2rem;
    color: #cccccc;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Para tamaños móviles (y un poquito más) */
@media (max-width: 508px) {

    /* Título */
    .hero-title {
        font-size: 2.3rem;
    }

    /* Texto debajo del título */
    .hero-subtitle {
        font-size: 1rem; /* Tamaño de letra */
        font-weight: 600; /* Anchura de letra (un poco más para hacer la letra más visible sin aumentar más su tamaño) */
    }

}

/****************************************************** BANDERA CAMBIAR IDIOMA *******************************************************************/

/* Enlace (contenedor padre del SVG) */
.bandera-idioma-enlace {
    margin-left: 10px; /* Separación por la izquierda con el texto */
    display: inline-block; /* Para que permita aumentar tamaño al hacer hover */
    transition: transform 0.05s; /* Tiempo que tarda en aumentar tamaño al hacer hover */
}

/* Enlace (contenedor padre del SVG) al pasar ratón por encima */
.bandera-idioma-enlace:hover {
    transform: scale(1.1); /* Aumentar tamaño al hacer hover */
}

/* SVG que contiene la imagen de la bandera */
.bandera-idioma-svg {
    /* Dimensiones */
    width: 40px; 
    height: 30px;
    /* Sombra alrededor */
    filter: drop-shadow(0 0 5px white) drop-shadow(0 0 5px white); /* Sombra */
}

/* Ocultar bandera que se muestra en tamaños pequeños en la barra de navegación */
#bandera-tlf{
    display: none; /* Ocultar */
    position: fixed;
    right: 3%;
    padding-bottom: 0px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    background-color: #404040; /* Color de fondo del recuadro */
    border: 2px solid #f0f0f0; /* Color del borde del recuadro */
    box-shadow: inset 0 0 7px #f0f0f0, 0 0 8px #858585; /*Sombra hacia dentro del recuadro + Sombra hacia afuera del recuadro */
    /* Tarda 1 segundo en ir cambiando las propiedades indicadas poco a poco */
    transition: fill 1.5s, stroke 1.5s, background-color 1.5s, box-shadow 1.5s, border 1.5s;
}

/* Comportamiento para móviles (ancho 480 píxeles hacia abajo) */
@media (max-width: 480px) {
    
    /* Ocultar bandera que se muestra en tamaños grandes */
    #bandera-pc{
        display: none; /* Ocultar */
    }

    /* Mostrar bandera que se muestra en tamaños pequeños en la barra de navegación */
    #bandera-tlf{
        display: block; /* Mostrar */
    }

    /* SVG que contiene la imagen de la bandera */
    .bandera-idioma-svg {
        /* Reducir dimensiones */
        width: 35px; 
        height: 25px;
        filter: drop-shadow(0 0 2px white) drop-shadow(0 0 2px white); /* Reducir sombra propia de la bandera (NO es la del recuadro) */
    }
}

/************************************************** BOTONES COMENZAR AHORA Y VER DEMO ***********************************************************/

/* Contenedor de ambos botones */
.hero-buttons {
    /* Permite que el segundo botón salte de línea si no cabe */
    display: flex;
    flex-wrap: wrap;
    /* Centrar horizontalmente */
    justify-content: center;
    /* Separación entre ambos botones */
    gap: 1.5rem;
    /* Distancia inferior, separando las estadísticas */
    margin-bottom: 3rem;
}

/* Estilo común de ambos botones */
.btn-primary, .btn-secondary {
    padding: 1rem 2rem; /* Distancia entre letra y bordes */
    border-radius: 8px; /* Borde redondeado */
    font-size: 1.1rem; /* Tamaño de letra */
    font-weight: 600; /* Anchura de letra */
    cursor: pointer; /* Convertir mouse en mano */
    transition: all 0.3s ease; /* Tiempo que tarda en aplicar efecto hover */
    letter-spacing: 1px; /* Aumentar un poco el espaciado entre letras */
}

/* Botón "COMENZAR AHORA" */
.btn-primary {
    color: black; /* Color de letra */
    box-shadow: 0 0 20px rgba(0, 206, 209, 0.4); /* Sombra del botón */
    border: none; /* Sin borde */
    background: linear-gradient(45deg, #00CED1, #ACF9FA, #00CED1); /* Tercer color para fluidez sin "salto" visual al reiniciar animación */
    background-size: 200% 200%; /* Necesario para que se mueva. Asegura que el gradiente sea más ancho que el contenedor */
    animation: gradienteBoomerang 5s ease-in-out infinite; /* Añadir animación de movimiento */
}

/* Botón "COMENZAR AHORA" (al pasar el ratón por encima) */
.btn-primary:hover {
    transform: translateY(-2px); /* Subir un poco el botón */
    box-shadow: 0 0 30px rgba(0, 206, 209, 0.6); /* Sombra del botón */
}

/* Botón "VER DEMO" */
.btn-secondary {
    background: transparent; /* Fondo transparente */
    color: black; /* Color de letra */
    border: 2px solid #00CED1; /* Borde del botón */
    box-shadow: 0 0 10px rgba(0, 206, 209, 0.3); /* Sombra del botón */
    background: linear-gradient(45deg, transparent, #00CED1, transparent); /* Tercer color para fluidez sin "salto" visual al reiniciar animación */
    background-size: 200% 100%; /* Amplía el gradiente para permitir el movimiento */
    animation: gradienteBoomerang 5s ease-in-out infinite; /* Añadir animación de movimiento */
}

/* Botón "VER DEMO" (al pasar el ratón por encima) */
.btn-secondary:hover {
    transform: translateY(-2px); /* Subir un poco el botón */
    box-shadow: 0 0 30px rgba(83, 252, 255, 0.6); /* Sombra del botón */
}

#enlace-ver-repositorio {
    text-decoration: none; /* Quitar subrayado enlace */
    color: black; /* Color de letra */
}

#enlace-ver-demo {
    text-decoration: none; /* Quitar subrayado enlace */
    color: black; /* Color de letra */
}

/* Para tamos móviles */
@media (max-width: 480px) {

    /* Contenedor de ambos botones */
    .hero-buttons {
        gap: 1rem; /* Separación entre ambos botones */
        margin-bottom: 2rem; /* Reducir distancia inferior (separación con las estadísticas) */
    }

    /* Estilo común de ambos botones */
    .btn-primary, .btn-secondary {
        padding: 0.75rem 0.75rem; /* Distancia entre letra y bordes */
        font-size: 0.9rem; /* Tamaño de letra */
        font-weight: 1000; /* Anchura de letra (aumentar para hacer la letra más visible sin aumentar más su tamaño) */
    }

}

/*********************************************************** ESTADÍSTICAS ***********************************************************************/

/* Contenedor padre de todas las estadísticas */
.stats {
    /* Permite que la tercera estadística salte de línea si no cabe */
    display: flex;
    flex-wrap: wrap;
    /* Centrar horizontalmente */
    justify-content: center;
    /* Separación entre estadísticas */
    gap: 3rem;
}

/* Contenedor de cada estadística individual */
.stat-item {
    align-items: center; /* Asegurar centrado de número y texto */
}

/* Número de la estadística */
.stat-number {
    font-family: 'Orbitron', monospace; /* Fuente de la letra */
    font-size: 2.5rem; /* Tamaño de letra */
    font-weight: 900; /* Anchura de letra */
    color: #76fdff; /* Color de letra */
    text-shadow: 0 0 10px rgba(0, 206, 209, 0.5); /* Sombra */
}

/* Descripción de la estadística */
.stat-label {
    color: #cccccc; /* Color de letra */
    font-size: 0.9rem; /* Tamaño de letra */
    letter-spacing: 1px; /* Espaciado entre letras */
}

/* Para tamaños tablet pequeña vertical */
@media (max-width: 768px) {
    
    /* Contenedor padre de todas las estadísticas */
    .stats {
        gap: 1rem; /* Separación entre estadísticas (reducir) */
    }

    /* Número de la estadística */
    .stat-number {
        font-size: 1.9rem; /* Tamaño de letra (algo más pequeño) */
    }

    /* Descripción de la estadística */
    .stat-label {
        font-size: 0.6rem; /* Tamaño de letra (reducir) */
        font-weight: 1000; /* Anchura de letra (aumentar para que no se vea tan pequeña la letra, aunque ocupe menos) */
    }

}

/***************************************************************** CUADRÍCULA *******************************************************************/

/* Contenedor padre de la cuadrícula y los orbes */
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    /* La cuadrícula ocupa siempre el 100% de la pantalla donde se visualice */
    width: 100%;
    height: 100%;
    /* Colores de fondo de la cuadrícula */
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
}

/* Cuadrícula */
.hero-cuadricula {
    /* Fijo, punto de partida arriba del todo a la izquierda */
    position: absolute;
    top: 0;
    left: 0;
    /* La cuadrícula completa ocupa siempre el 100% de su contenedor padre */
    width: 100%;
    height: 100%;
    /* Tamaño de cada cuadrito de la rejilla */
    background-size: 60px 60px;
    /* Líneas de los cuadros que conforman la cuadrícula (dos linear-gradient perpendiculares) */
    background-image: 
        linear-gradient(rgba(0, 206, 209, 0.2) 1px, transparent 1px), /* Líneas horizontales (0.2 = intensidad color, 1px = grosor) */
        linear-gradient(90deg, rgba(0, 206, 209, 0.2) 1px, transparent 1px); /* Líneas verticales (0.2 = intensidad color, 1px = grosor) */
    /* Movimiento infinito y velocidad de la cuadrícula */
    animation: moverCuadricula 3s linear infinite;

    /* Efecto de desvanecimiento en los bordes de la cuadrícula */
    mask-image: radial-gradient(ellipse at center, black, transparent 99%); /* 99% es la transparencia + Tamaño del desvanecimiento */
    -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 99%); /* Con webkit para compatibilidad */    
}

/* Animación de la cuadrícula */
@keyframes moverCuadricula {
    0% { background-position: 0 0; } /* Posición inicial */
    /* Dirección en diagonal hacia abajo, si lo pones en negativo va hacia arriba */
    100% { background-position: 60px 60px; } /* Debe llevar el mismo tamaño que los recuadros*/
}

/* Capa degradado sobre la cuadrícula */
.hero-gradiente {
    /* Fijo, punto de partida arriba del todo a la izquierda */
    position: absolute;
    top: 0;
    left: 0;
    /* La capa completa ocupa siempre el 100% de su contenedor padre */
    width: 100%;
    height: 100%;
    /* Degradados */
    background: radial-gradient(ellipse at 30% 20%, rgba(0, 206, 209, 0.15) 0%, transparent 50%), /* Esquina superior izquierda */
                radial-gradient(ellipse at 70% 80%, rgba(172, 249, 250, 0.1) 0%, transparent 50%); /* Esquina inferior derecha */
}

/************************************************************** ORBES FLOTANTES *****************************************************************/

/* Todos los orbes */
.orbe-neon {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 206, 209, 0.8) 0%, transparent 70%);
    animation: float 6s ease-in-out infinite;
}

/* Orbe grande */
.hero-orbe1 {
    width: 200px; /* Ancho del orbe */
    height: 200px; /* Alto del orbe */
    top: 20%; /* Distancia al borde superior de su contenedor padre */
    left: 10%; /* Distancia al límite izquierdo de su contenedor padre */
    animation-delay: 0s; /* Velocidad de animación */
}

/* Orbe mediano */
.hero-orbe2 {
    width: 150px; /* Ancho del orbe */
    height: 150px; /* Alto del orbe */
    top: 60%; /* Distancia al borde superior de su contenedor padre */
    right: 15%; /* Distancia al límite derecho de su contenedor padre */
    animation-delay: 2s; /* Velocidad de animación */
}

/* Orbe pequeño */
.hero-orbe3 {
    width: 100px; /* Ancho del orbe */
    height: 100px; /* Alto del orbe */
    bottom: 10%; /* Distancia al borde inferior de su contenedor padre */
    left: 20%; /* Distancia al límite izquierdo de su contenedor padre */
    animation-delay: 4s; /* Velocidad de animación */
}

/* Animación de flotación de todos los orbes */
@keyframes float {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-20px) scale(1.05); }
}

/* Hasta tamaño tablet pequeña en vertical */
@media (max-width: 768px) {

    /* Orbe grande (en móviles ahroa pasa a ser el mediano) */
    .hero-orbe1 {
        width: 110px; /* Ancho del orbe */
        height: 110px; /* Alto del orbe */
        top: 10%; /*25%; /* Distancia al borde superior del contenedor padre */
        left: -5%; /* Distancia al límite izquierdo del contenedor padre */
    }

    /* Orbe mediano */
    .hero-orbe2 {
        width: 120px; /* Ancho del orbe */
        height: 120px; /* Alto del orbe */
        top: 30%; /*45%; /* Distancia al borde superior del contenedor padre */
        right: 1%; /* Distancia al límite derecho del contenedor padre (OJO, si desborda lo más mínimo produce bug que activa scroll horizontal) */
    }

    /* Orbe pequeño */
    .hero-orbe3 {
        bottom: 10%; /* Distancia al borde inferior del contenedor padre */
        left: 20%; /* Distancia al límite izquierdo del contenedor padre */
    }

}

/********************************************************* PARTÍCULAS FLOTANTES *****************************************************************/

/* Contenedor donde Javascript crea todas las partículas flotantes */
#contenedor-particulas {
    /* Fijo ocupando el 100% del hero */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Oculta partículas que se desborden (evita bug que activa el scroll horizontal de forma intermitentente) */
}

/* Estilo común para todas las pequeñas partículas flotantes (esta clase se asigna por Javascript) */
/* El resto de estilos son aleatorios, por eso se añaden dinámicamente por Javascript */
.particula-flotante {
    position: absolute; /* Dentro de su contenedor */
    border-radius: 50%; /* Forma redonda */
    pointer-events: none; /* Las partículas no interceptan eventos del mouse */
}

/* Animación de flotación las partículas (movimiento suave y errático) */
/* Van cambiando de posición, tamaño y opacidad en cada punto de la animación */
@keyframes flotarParticula {
        0%, 100% {
            transform: translate(0, 0) scale(1); /* Translate = Dirección movimiento + Scale = Tamaño */
            opacity: 0.3;                        /* Transparencia */
        }
        25% {
            transform: translate(10px, -20px) scale(1.2);
            opacity: 0.6;
        }
        50% {
            transform: translate(-5px, -40px) scale(1);
            opacity: 0.4;
        }
        75% {
            transform: translate(-15px, -20px) scale(0.8);
            opacity: 0.5;
        }
    }

/********************************************************** SCROLL PARA EXPLORAR ****************************************************************/
    
/* Contenedor padre del ratón + rueda + flecha + texto */
.hero-indicador-scroll {
    /* Fijado en la parte inferior de la pantalla */
    position: absolute;
    bottom: 1rem;
    /* Centrado horizontal */
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
    /* Alineación vertical de elementos hijos */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Separación entre texto e icono */
    gap: 0.5rem;
    /* Mover hacia arriba y abajo */
    animation: botarRaton 2s infinite;
}

/* Animación mover hacia arriba y abajo, tanto el ratón como el texto */
@keyframes botarRaton {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } /* TranslateX = Centrar horizontal + TranslateY = Mover vertical */
    40% { transform: translateX(-50%) translateY(-10px); }
    60% { transform: translateX(-50%) translateY(-5px); }
}

/* Contorno del ratón */
.hero-raton {
    /* Medidas totales del ratón */
    width: 26px;
    height: 40px;
    /* Línea contorno */
    border: 2px solid #00CED1; /* Ancho de línea + color */
    border-radius: 13px; /* Redondear para dar forma de ratón */
    /* Separación contorno-rueda */
    padding-top: 6px;
    /* Centrar la rueda del ratón dentro del contorno */
    display: flex;
    justify-content: center;
}

/* Rueda del ratón */
.hero-rueda-raton {
    /* Medidas totales de la rueda */
    width: 4px;
    height: 8px;
    /* Color de la rueda */
    background: #00CED1;
    /* Redondear para dar forma de rueda */
    border-radius: 2px;
    /* Animación de mover hacia abajo y desvanecer */
    animation: moverRuedaRaton 2s infinite;
}

/* Animación mover hacia abajo y desvanecer rueda del ratón */
@keyframes moverRuedaRaton {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(6px); } /* Opacity = Desvanecer + TranslateY = mover vertical */
}

/* Flecha (sustituye al ratón en tamaños móviles) */
.hero-flecha-scroll {
    /* Ocultar por defecto (solo se muestra en tamaños móviles) */
    display: none;
    /* Tamaño de la flecha */
    width: 30px;
    height: 30px;
    /* Color del borde de la flecha */
    stroke: #00CED1;
    /* Sombra de la flecha */
    filter: drop-shadow(0 0 5px rgba(0, 206, 209, 0.5));
}

/* Texto "Scroll para explorar" */
.hero-txt-raton {
    font-size: 0.75rem;
    color: #9f9f9f; /* Gris para dar aspecto de "desvanecer hacia abajo" */
    letter-spacing: 1px;
}

/* Para tamaños móviles + tablet pequeña vertical */
@media (max-width: 768px) {

    /* Flecha (sustituye al ratón en tamaños móviles) */
    .hero-flecha-scroll {
        display: flex; /* Mostrar en dispositivos móviles */
    }

    /* Contenedor padre del ratón + rueda + flecha + texto */
    .hero-indicador-scroll {
        bottom: 0rem; /* Pegar la flecha a la parte de abajo de la pantalla */
    }

    /* Contorno del ratón */
    .hero-raton {
        display: none; /* Ocultar */
    }

    /* Rueda del ratón */
    .hero-rueda-raton {
        display: none; /* Ocultar */
    }

    /* Texto "Scroll para explorar" */
    .hero-txt-raton {
        display: none; /* Ocultar */
    }
}

/* Para ALTURA en móviles/tablets en horizontal */
@media (max-height: 768px) {

    /* Flecha (sustituye al ratón en tamaños móviles) */
    .hero-flecha-scroll {
        display: flex; /* Mostrar en dispositivos móviles */
    }

    /* Contenedor padre del ratón + rueda + flecha + texto */
    .hero-indicador-scroll {
        bottom: 0rem; /* Pegar la flecha a la parte de abajo de la pantalla */
    }

    /* Contorno del ratón */
    .hero-raton {
        display: none; /* Ocultar */
    }

    /* Rueda del ratón */
    .hero-rueda-raton {
        display: none; /* Ocultar */
    }

    /* Texto "Scroll para explorar" */
    .hero-txt-raton {
        display: none; /* Ocultar */
    }
}


/***********************************************************************************************************************************************************************************
                                                         SECCIÓN SERVICIOS
***********************************************************************************************************************************************************************************/

/* Toda la sección */
.services {
    background: linear-gradient(180deg, #1a1a2e 0%, black 100%); /* Fondo gradiente inicial */
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.services-grid a {
    text-decoration: none;
}

.service-card {
    background: linear-gradient(135deg, rgba(64, 64, 64, 0.8), rgba(26, 26, 46, 0.8));
    border: 1px solid rgba(0, 206, 209, 0.3);
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.service-card:hover {
    transform: translateY(-10px);
    border-color: #00CED1;
    box-shadow: 0 20px 40px rgba(0, 206, 209, 0.2);
}

.service-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: radial-gradient(circle, #ACF9FA, #00CED1);
    box-shadow: 0 0 30px #00CED1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: iconGlow 4s ease-in-out infinite;
}

@keyframes iconGlow {
    0%, 100% { box-shadow: 0 0 20px currentColor; }
    50% { box-shadow: 0 0 40px currentColor, 0 0 60px currentColor; }
}


.service-icon::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(45deg, #00CED1, #ACF9FA);
    border-radius: 50%;
    z-index: -1;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.1); opacity: 1; }
}

.icon-brain, .icon-robot, .icon-chart, .icon-shield, .icon-language, .icon-vision {
    width: 40px;
    height: 40px;
    background: black;
    border-radius: 8px;
    position: relative;
}

.icon-brain::before {
    content: '🛡️';
    font-size: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-robot::before {
    content: '🧠';
    font-size: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-chart::before {
    content: '📊';
    font-size: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-shield::before {
    content: '☁️';
    font-size: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-language::before {
    content: '🌐';
    font-size: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-vision::before {
    content: '🔬';
    font-size: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.service-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #ffffff;
}

.service-card p {
    color: #cccccc;
    line-height: 1.6;
}

.service-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(0, 206, 209, 0.1) 0%, transparent 70%);
    border-radius: 15px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-card:hover .service-glow {
    opacity: 1;
}


/***********************************************************************************************************************************************************************************
                                                    PARADIGMA Y ARQUITECTURA
***********************************************************************************************************************************************************************************/

/* Toda la sección */
.technology {
    background: linear-gradient(180deg, black 0%, #1a1a2e 100%); /* Fondo gradiente inverso */
}

.tech-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.tech-description {
    font-size: 1.1rem;
    color: #cccccc;
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* Enlaces del apartado */
.tech-description a {
    color: #3267be; /* Color de letra */
}

/* Negritas del apartado */
.tech-description b {
    color: white; /* Color de letra */
}

.tech-features {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.feature {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.feature-icon {
    font-size: 2rem;
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, #00CED1, #ACF9FA);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature h4 {
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.feature p {
    color: #cccccc;
    font-size: 0.9rem;
}

/********************************************************* CEREBRO ORBES FLOTANTES ***************************************************************/

/* Contenedor de todo */
.brain-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 800px;
    position: relative;
}

/* Contenedor padre del orbe grande y de los pequeños */
.ai-brain {
    position: relative;
    width: 600px;
    height: 600px;
}

/* Orbe central (cerebro, núcleo) */
.brain-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, #00CED1, #ACF9FA);
    border-radius: 50%;
    box-shadow: 0 0 50px rgba(0, 206, 209, 0.6);
    animation: brainPulse 2s ease-in-out infinite;
}

/* Contenedor padre de todos los orbes pequeños */
.neural-network {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Todo orbe pequeño */
.node {
    position: absolute;
    width: 40px;
    height: 40px;
    background: #00CED1;
    border-radius: 50%;
    box-shadow: 0 0 10px #00CED1;
    animation: nodeFloat 4s ease-in-out infinite;
}

/* Dos orbes de arriba */
.node:nth-child(1) { top: 20%; left: 20%; animation-delay: 0s; }
.node:nth-child(2) { top: 20%; right: 20%; animation-delay: 0.5s; }
/* Dos orbes del centro */
.node:nth-child(3) { bottom: 20%; left: 20%; animation-delay: 1s; }
.node:nth-child(4) { bottom: 20%; right: 20%; animation-delay: 1.5s; }
/* Dos orbes de anajo */
.node:nth-child(5) { top: 50%; left: 10%; animation-delay: 2s; }
.node:nth-child(6) { top: 50%; right: 10%; animation-delay: 2.5s; }

/* Animación cerebro (núcleo) */
@keyframes brainPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

/* Animación orbes de alrededor del núcleo */
@keyframes nodeFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/******************************************************** RESPONSIVIDAD TECNOLOGIAS *************************************************************/

/* Para todos los tamaños por debajo del PC */
@media (max-width: 1200px) {

    /* Contenedor de todo */
    .brain-visual {
        height: 400px;
    }

    /* Contenedor padre del orbe grande y de los pequeños */
    .ai-brain {
        width: 300px;
        height: 300px;
    }

    /* Orbe central (cerebro, núcleo) */
    .brain-core {
        width: 100px;
        height: 100px;
    }

    /* Todo orbe pequeño */
    .node {
        width: 20px;
        height: 20px;
    }
}


/***********************************************************************************************************************************************************************************
                                                    FUNDAMENTOS TECNICOS
***********************************************************************************************************************************************************************************/

/* Toda la sección */
.team {
    background: linear-gradient(180deg, #1a1a2e 0%, black 100%); /* Fondo gradiente inicial */
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.team-member {
    text-align: center;
    background: linear-gradient(135deg, rgba(64, 64, 64, 0.8), rgba(26, 26, 46, 0.8));
    border: 1px solid rgba(0, 206, 209, 0.3);
    border-radius: 15px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.team-member:hover {
    transform: translateY(-10px);
    border-color: #00CED1;
    box-shadow: 0 20px 40px rgba(0, 206, 209, 0.2);
}

.member-avatar {
    width: 120px;
    height: 120px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(45deg, #00CED1, #ACF9FA);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.member-avatar::after {
    content: '';
    position: absolute;
    inset: -10px;
    border: 2px dashed #00CED1;
    border-radius: 50%;
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Imagen tesarcto de todas las tarjetas */
.avatar-teseracto {
    width: 120px;
    padding-bottom: 10px;
}

/* Todos los títulos de cada tarjeta */
.team-member h3 {
    /* NOTA: El subrayado del enlace tiene el mismo color derivado de los enlaces */
    color: white; /* Color de letra */
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

/* Todos los enlaces de cada tarjeta */
.team-member a {
    color: #6cefca; /* Color de letra (y del subrayado de los títulos) */
}

.member-role {
    color: #00CED1;
    font-weight: 600;
    margin-bottom: 1rem;
}

.member-description {
    color: #cccccc;
    font-size: 0.9rem;
}


/***********************************************************************************************************************************************************************************
                                                             FLECHAS
***********************************************************************************************************************************************************************************/

/* Estilos comunes a flechas de toda la página */
.boton-flecha{
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Redondear el contenedor para darle forma circular */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Estilo flecha apagada (estado normal por defecto) */
    fill: #cfcfcf; /* Color relleno de la flecha */
    stroke: #ffffff; /* Color del borde de la flecha */
    stroke-width: 700; /* Ancho del borde de la flecha */
    background-color: #404040; /* Color de fondo del botón */
    box-shadow: inset 0 0 7px #f0f0f0, 0 0 8px #c1c1c1; /*Sombra hacia dentro del borde del círculo + Sombra hacia afuera del borde */
    border: 2px solid #f0f0f0; /* Color del borde del círculo del botón */

    /* Tarda 1 segundo en ir cambiando las propiedades indicadas poco a poco */
    transition: fill 1.5s, stroke 1.5s, background-color 1.5s, box-shadow 1.5s, border 1.5s;
    overflow: hidden; /* Limitar el área de click, cortará cualquier parte del SVG que exceda los 50x50px del botón */
}

/* Aplica por defecto sombra de flecha apagada a los elementos SVG con estos IDs asignados */
.boton-flecha > #flecha-carrusel-derecha{ filter: drop-shadow( 2px 1px 5px rgba(255, 255, 255, 0.7)); } /* Sombra interna de la flecha SVG apagada */
.boton-flecha > #flecha-carrusel-izquierda{ filter: drop-shadow( 2px 1px 5px rgba(255, 255, 255, 0.7)); } /* Sombra interna de la flecha SVG apagada */
.boton-flecha > #flecha-cerrar-tecnologias{ filter: drop-shadow( 2px 1px 5px rgba(255, 255, 255, 0.7)); } /* Sombra interna de la flecha SVG apagada */

/* Al pasar ratón sobre la flecha */
.boton-flecha:hover {
    /* Estilo flecha encendida */
    fill: #ffffff; /* Color relleno de la flecha */
    stroke: #ACF9FA; /* Color del borde de la flecha */
    background-color: #e6e6e6; /* Color de fondo del botón */
    box-shadow: inset 0 0 6px #00CED1, 0 0 10px #00CED1; /*Sombra borde hacia dentro del borde del círculo + Sombra borde hacia afuera */
    border: 2px solid #ACF9FA; /* Color del borde del círculo del botón */
}

/* Aplica sombra de flecha encendida a los elementos SVG con estos IDs asignados */
/* OJO: Hay que hacerlo de esta manera (usando IDs y selectores) para que tenga suficiente especificidad para sobreescribir las sombras originales) */
#boton-flecha-carrusel-derecha:hover > #flecha-carrusel-derecha{ filter: drop-shadow(2px 1px 5px rgba(0, 206, 209, 0.9)); } /* Sombra interna de la flecha SVG apagada */
#boton-flecha-carrusel-izquierda:hover > #flecha-carrusel-izquierda{ filter: drop-shadow(2px 1px 5px rgba(0, 206, 209, 0.9)); } /* Sombra interna de la flecha SVG apagada */
#boton-cerrar-tecnologias > #flecha-cerrar-tecnologias{ filter: drop-shadow(2px 1px 5px rgba(0, 206, 209, 0.2)); } /* Sombra interna de la flecha SVG apagada */


/******************************************************** RESPONSIVIDAD FLECHAS *****************************************************************/

/* Para tamaños móviles */
@media (max-width: 480px) {
    .boton-flecha{
        width: 30px;
        height: 30px;
    }
}


/***********************************************************************************************************************************************************************************
                                                CRISIS GLOBAL DEL SOFTWARE
**********************************************************************************************************************************************************************************/

/* Toda la sección */
.about-us {
    background: linear-gradient(180deg, black 0%, #1a1a2e 100%); /* Fondo gradiente inverso */
}

/* Contenedor de todo (menos del título) */
.about-content {
    margin-top: 2rem; /* Separación entre carrusel y título */
}

/* Recuadro (visible) alrededor del carrusel + logos + video */
.image-frame {
    background: linear-gradient(135deg, rgba(64, 64, 64, 0.8), rgba(26, 26, 46, 0.8)); /* Fondo por detrás */
    border: 2px solid rgba(0, 206, 209, 0.5); /* Ancho + Color borde */
    box-shadow: 0 0 30px rgba(0, 206, 209, 0.2); /* Sombra borde */
    border-radius: 15px; /* Borde redondeado */
    padding: 1rem; /* Espaciado entre el borde y el contenido */
    position: relative;
    transition: all 0.3s ease; /* Tiempo que tarda en aplicar hover */
    width: 100%; /* Ocupar 100% de su espacio disponible */
}

/* Recuadro alrededor del carrusel + logos + video (cuando tenga clase secundaria full width) */
.image-frame.full-width {
   max-width: 100%; /* Ajustar al mismo ancho máximo que el resto de secciones (no lo muevas de aquí, sino deja de funcionar y se salen las flechas) */ 
}

/* Recuadro alrededor del carrusel + logos + video (al pasar con el ratón por encima) */
.image-frame:hover {
    border-color: #00CED1; /* Color borde */
    box-shadow: 0 0 30px rgba(0, 206, 209, 0.4); /* Sombra borde */
}

/********************************************************* CARRUSEL DE IMÁGENES ***************************************************************/

/* Contenedor padre de imágenes + flechas + bolitas */
.about-image-wrapper {
    position: relative; /* Necesario para que las flechas y bolitas se muestren dentro del contenedor */
}

/* Clase de toda imagen del carrusel */
.imagen-carrusel {
    width: 100%; /* Ocupar 100% del ancho de la sección */
    height: auto; /* Auto ajustar altura */
    border-radius: 15px; /* Borde redondeado */
    display: none; /* Imágenes ocultas por defecto */
}

/* Para hacer visible imagen del carrusel al pulsar flechas */
.imagen-carrusel.active {
    display: block;
}

/********************************************************* BOLITAS DEL CARRUSEL ***************************************************************/

/* Para todo el conjunto de bolitas */
#indicadores-carrusel {
    position: absolute;
    bottom: 22px;
    right: 17px;
    display: flex;
}

/* Para cada bolita individualmente */
.indicador {
    /* Tamaño */
    width: 23px;
    height: 23px;
    /* Redondear el contenedor para darle forma circular */
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer; /* Convertir ratón en mano al pasar por encima */
    transition: background 0.7s; /* Se encienden lentamente */

    /* Estilo de bolitas apagadas (por defecto) */
    border: 2px solid #f0f0f0;
    background-color: #404040;
    box-shadow: inset 0 0 7px #f0f0f0, 0 0 8px #c1c1c1;
} 

/* Al pasar el ratón sobre una bolita, estilo semi-encendido */
.indicador:hover {
    border: 2px solid #00fbff; /* Ancho + Color borde */
    background-color: #e6e6e6; /* Color fondo */
    box-shadow: inset 0 0 8.5px #00fbff, 0 0 10px #00f4fc; /* Sombra interna + externa */
}

/* Estilo de bolita encendida */
.indicador.activo {
    border: 2px solid #ACF9FA; /* Ancho + Color borde */
    background-color: #ffffff; /* Color fondo */
    box-shadow: inset 0 0 8.5px #00CED1, 0 0 10px #9efdff; /* Sombra interna + externa */
}

/********************************************************* FLECHAS DEL CARRUSEL ***************************************************************/

/* Posición fija de la flecha izquierda del carrusel */
#boton-flecha-carrusel-izquierda {
    top: 45%; /* Distancia del borde superior del contenedor*/
    left: 2%; /* Distancia del borde izquierdo del contenedor*/
    transform: rotate(180deg); /* Rotar flecha para que mire a la izquierda */
}

/* Posición fija de la flecha derecha del carrusel */
#boton-flecha-carrusel-derecha {
    top: 45%; /* Distancia del borde superior del contenedor*/
    right: 2%; /* Distancia del borde derecho del contenedor*/
}

/********************************************************* TEXTO QUIENES SOMOS ***************************************************************/

/* Parte central: Textos + Logo */
.about-center-content {
    display: flex; /* Un elemento al lado del otro */
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

/* Contenedor de los textos (y del logo) */
.about-text-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Todos los textos de la sección */
.about-text {
    color: #cccccc;
    font-size: 1.1rem;
    line-height: 1.7;
    text-align: left;
    margin-bottom: 1rem;
}

/********************************************************* LOGO QUIENES SOMOS ***************************************************************/

/* Recuadro (invisible) de ambos logos de la sección (hay uno oculto) */
.about-logo {
    flex-shrink: 0; /* Evita deformación, impide que el logo se encoja. Mantiene su tamaño original incluso cuando no hay espacio en el contenedor flex. */
    align-self: center; /* Centrar verticalmente en diferentes tamaños de pantalla. Si el texto se hace más alto, el logo siempre estará centrado verticalmente */
    /* NOTA: El recuadro visible es ".image-frame", este recuadro solo está para ajustar formato */
}

/* Logo 1 (solo se muestra en versión móvil, entre los dos párrafos de "quiénes somos") */
#about-logo1{
    display: none; /* Oculto por defecto (solo se muestra en tamaños móviles) */
}

/* Logo 2 (se muestra en todo tamaño, menos en móvil) */
#about-logo2{
    display: block; /* Mostrar por defecto */
}

/* Logo (<img>) */
.maxquality-logo {
    display: block; /* Posicionar a la derecha (en PC) */
    width: 100%; /* Ocupar 1000% de su espacio disponible */
    max-width: 200px; /* Ancho máximo */
    height: auto; /* Auto ajustar altura */
    border-radius: 10px; /* Borde redondeado */
    transition: all 0.3s ease; /* Tardar 0,3 segundos en aplicar efectos al hacer hover */
}

/* Logo (al pasar el ratón) */
.maxquality-logo:hover {
    transform: scale(1.05); /* Aumentar tamaño */
    filter: brightness(1.2) contrast(1.2); /* Dar más brillo y contraste */
}

/********************************************************* VIDEO QUIENES SOMOS ***************************************************************/

/* Contenedor padre del video */
.video-container {
    position: relative;
    width: 100%; /* Ocupar el 100% de lo que permite su elemento padre */
    padding-bottom: 56.25%; /* 16:9 aspect ratio (es necesario para que el iframe se muestre dentro del recuadro) */
}

/* Video */
.video-container iframe {
    /* Ocupar el 100% de lo que permite su recuadro */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px; /* Borde redondeado */
}

/******************************************************* RESPONSIVIDAD QUIENES SOMOS *********************************************************/

/* Tamaño: De tablet vertical, hacia abajo */
@media (max-width: 768px) {

    /* Parte central: Textos + Logos */
    .about-center-content {
        flex-direction: column; /* Comportarse como columna (un elemento bajo otro) cuando no quepan en pantalla */
        text-align: center; /* Alinear horizontalmente */
        align-items: center; /* Alinear verticalmente */
        gap: 2rem; /* Espacio entre elementos */
    }
    
    /* Textos */
    .about-text {
        text-align: center; /* Centrar texto */
    }
    
    /* Recuadro (visible) alrededor del carrusel + logo + video */
    .image-frame {
        max-width: 350px;
        margin: 0 auto;
    }

    /* Logo (solo se muestra en versiones móviles, entre los dos párrafos de "quiénes somos") */
    #about-logo1{
        display: block; /* Mostrar solo en tamaños móviles */
        padding-bottom: 1rem; /* Separar texto de abajo (este logo se encuentra entre los dos textos) */
    }

    /* Logo (se muestra en todo tamaño, menos en móvil) */
    #about-logo2{
        display: none; /* Ocultar */
    }

    /* Logo (<img>) */
    .maxquality-logo {
        max-width: 150px;
    }
    
    /* Recuadro (invisible) alrededor del logo */
    .logo-frame {
        max-width: 180px;
    }
}

/* Tamaño: De móvil, hacia abajo */
@media (max-width: 480px) {

    /* Textos */
    .about-text {
        font-size: 1rem;
    }

    /* Reacuadro alrededor de la imagen del carrusel */
    .image-frame {
        padding: 0.5rem; /* Reducir espacio entre la imagen y el borde de su recuadro */
        max-width: 280px; /* Ancho máximo */
    }
    
    /* Logo (<img>) */
    .maxquality-logo {
        max-width: 120px; /* Ancho máximo */
    }
    
    /* Recuadro (invisible) alrededor del logo */
    .logo-frame {
        max-width: 150px;
    }
    
    /* Para cada bolita del carrusel */
    .indicador{
        /* Reducimos tamaño */
        width: 17.5px;
        height: 17.5px;
    }

    /* Estilo de bolita encendida */
    .indicador.activo {
        box-shadow: inset 0 0 5.5px #00CED1, 0 0 10px #9efdff; /* Reducimos sombra interna (al ser la bolita de menor tamaño, debe ocupar menos) */
    }
}


/***********************************************************************************************************************************************************************************
                                                    SECCIÓN CTA (Call To Action)
***********************************************************************************************************************************************************************************/

/* Contenedor de la sección completa */
.cta {
    text-align: center; /* Texto centrado */
    /*padding: 2rem 0; /* Tamaño de la sección */
    padding-top: 1rem; /* Tamaño de la sección */
    padding-bottom: 2rem; /* Tamaño de la sección */
    background: linear-gradient(90deg, #00CED1 0%, #ACF9FA 50%, #00CED1 100%); /* Tercer color para fluidez sin "salto" visual al reiniciar animación */
    background-size: 200% 100%; /* Necesario para que se mueva. Asegura que el gradiente sea más ancho que el contenedor */
    animation: ctaGradienteBoomerang 4s ease-in-out infinite; /*Añadir animación de movimiento */
}

/* Animación fondo moviéndose horizontalmente */
@keyframes ctaGradienteBoomerang {
    0% { background-position: 0% 50%; }      /* Izquierda */
    50% { background-position: 100% 50%; }   /* Derecha */
    100% { background-position: 0% 50%; }    /* Vuelve a izquierda */
}

/* Título de la sección */
.cta-content h2 {
    font-family: 'Orbitron', monospace; /* Fuente de la letra */
    font-size: clamp(2rem, 4vw, 3rem); /* Tamaño letra */
    color: black; /* Color letra */
    margin-bottom: 1rem; /* Separación del título con el texto */
}

/* Texto de la sección */
.cta-content p {
    font-size: 1.2rem; /* Tamaño letra */
    color: black; /* Color letra */
    margin-bottom: 2rem; /* Separación del texto con el botón */
}

/* Botón "Solicitar Consulta Gratuita" */
#boton-consulta {
    font-weight: bold; /* Negrita */
    font-size: clamp(1.2rem, 0.942rem + 0.857vw, 3rem); /* Tamaño letra entre 481px y 3840px */
    text-align: center; /* Centrar horizontalmente */
    letter-spacing: 1px; /* Aumentar un poco el espaciado entre letras */
    line-height: 20px; /* Centrar verticalmente (es la única forma en este caso) con respecto a la altura de la barra */
    -webkit-text-stroke-width: 0.5px; /* Grosor del borde de la letra */
    -webkit-text-stroke-color: #ffffff; /* Color del borde de la letra */
    padding: 1rem 2rem; /* Distancia entre letra y bordes */
    color: #aaaaaa; /* Color de letra */
    text-shadow: 0 0 5.5px #f0f0f0; /* Sombra de letra */
    background: #404040; /* Color de fondo */
    border-radius: 8px; /* Borde redondeado */
    border: 2px solid #f0f0f0; /* Color del borde del recuadro que contiene el texto */
    box-shadow: inset 0 0 7px #f0f0f0, 0 0 8px #858585; /*Sombra hacia dentro del recuadro + Sombra hacia afuera del recuadro */
    /* Tarda 1 segundo en ir cambiando las propiedades indicadas poco a poco */
    transition: fill 1.5s, stroke 1.5s, background-color 1.5s, box-shadow 1.5s, border 1.5s;
}

/* Botón "Solicitar Consulta Gratuita" al hacer hover */
#boton-consulta:hover {
    background-color: #dadada; /* Sombra verde agua */
    color: #ffffff; /* Color de letra */
    text-shadow: 0 0 7.5px #00CED1; /* Sombra letra */
    -webkit-text-stroke-width: 0.7px; /* Grosor del borde de la letra */
    -webkit-text-stroke-color: #ACF9FA; /* Color del borde de la letra */
    box-shadow: inset 0 0 20px #00CED1, 0 0 20px #00CED1; /*Sombra hacia dentro del recuadro + Sombra hacia afuera del recuadro */
    border: 2px solid #ACF9FA; /* Color del borde del recuadro que contiene el texto */
    /* Tarda 1 segundo en ir cambiando todas las propiedades poco a poco */
    transition: all 1s;
}

/* Enlace interno del botón "Solicitar Consulta Gratuita" */
#boton-consulta a {
    text-decoration: none; /* Quitar estilo enlace */
}


/***********************************************************************************************************************************************************************************
                                                         PIÉ DE PÁGINA
***********************************************************************************************************************************************************************************/

.footer {
    background: #0a0a0a;
    border-top: 1px solid rgba(0, 206, 209, 0.3);
    padding: 3rem 0 1rem;
}

.neon-text {
    color: #00CED1;
    text-shadow: 0 0 10px #00CED1;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section {
    line-height: 0.8;
}

.footer-section h3,
.footer-section h4 {
    color: #00CED1;
    margin-bottom: 1rem;
}

.footer-section p {
    color: #cccccc;
    line-height: 1.6;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section ul li a {
    color: #cccccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: #00CED1;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-link {
    color: #cccccc;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(0, 206, 209, 0.3);
    border-radius: 5px;
    transition: all 0.3s ease;
}

.social-link:hover {
    color: #00CED1;
    border-color: #00CED1;
    box-shadow: 0 0 10px rgba(0, 206, 209, 0.3);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #888888;
}


/***********************************************************************************************************************************************************************************
                                                         RESPONSIVIDAD
***********************************************************************************************************************************************************************************/

@media (max-width: 768px) {
    
    .services-grid {
        grid-template-columns: 1fr;
    }

    .tech-content {
        grid-template-columns: 1fr; /* Colocar cada elemento uno debajo de otro (tabla de 1 columna) */
        text-align: center;
        gap: revert; /* Para controlar la distancia entre texto y cerebro mediante márgenes */
    }

    .brain-visual {
        height: 150px; /* Reducir altura de 400px a 150px */
        margin-top: 7rem; /* Distancia entre el texto y el cerebro */
        margin-bottom: 3rem; /* Distancia entre el cerebro y el límite inferior de su sección */
    }
    
    .team-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .social-links {
        justify-content: center;
    }
}

@media (max-width: 480px) {

    /* Contenedor de todas las secciones */
    .container {
        padding: 0 1rem;
    }
    
    section {
        padding: 3rem 0;
    }
    
    

    .tech-content {
        grid-template-columns: 1fr; /* Colocar cada elemento uno debajo de otro (tabla de 1 columna) */
        text-align: center;
        gap: revert; /* Para controlar la distancia entre texto y cerebro mediante márgenes */
    }

    .brain-visual {
        height: 150px; /* Reducir altura de 400px a 150px */
        margin-top: 7rem; /* Distancia entre el texto y el cerebro */
        margin-bottom: 3rem; /* Distancia entre el cerebro y el límite inferior de su sección */
    }
}