/* --- VARIABLES --- */
:root {
    --deep-ocean: #001a33;
    --electric-blue: #00d4ff;
    --white: #ffffff;
    --glass: rgba(0, 50, 100, 0.4);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.services-section {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Capa 1: Intro */
.intro-block {
    max-width: 800px;
    padding: 25px;
    margin-bottom: 80px; 
    border: 1px solid var(--electric-blue);
    border-radius: 15px;
}

.justified-text {
    text-align: justify;
    font-family: 'Exo 2';
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Capa 2: Carrusel (Estructura) */
.carousel-container {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 350px; /* Ajustado para dar espacio al slide y botones */
    perspective: 1000px;
    display: flex;
    flex-direction: column; /* Apila el Track arriba y los Controles abajo */
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}

.carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.service-card {
    position: absolute;
    width: 300px;
    left: calc(50% - 150px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    pointer-events: none;
    text-align: center;
    padding: 20px;
}

.service-card.active { opacity: 1; transform: translateZ(100px) scale(1.1); z-index: 10; pointer-events: auto; }
.service-card.prev { opacity: 0.5; transform: translateX(-280px) scale(0.8) rotateY(25deg); z-index: 5; }
.service-card.next { opacity: 0.5; transform: translateX(280px) scale(0.8) rotateY(-25deg); z-index: 5; }

.service-card h3 {
    font-family: 'Orbitron';
    color: var(--electric-blue);
    font-size: 1.2rem;
}

/* CORRECCIÓN: Alineación de Botones */
.carousel-controls {
    display: flex;
    flex-direction: row;    /* FLECHAS UNA AL LADO DE LA OTRA */
    justify-content: center;
    align-items: center;
    gap: 60px;              /* Espacio horizontal entre las flechas */
    margin-top: 30px;       /* Distancia bajo el slide */
    width: 100%;
    z-index: 20;
}

.nav-btn {
    background: var(--glass);
    border: 1px solid var(--electric-blue);
    color: var(--white);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition);
}

/* Capa 3: Detalle */
.detail-section {
    width: 90%;
    max-width: 1000px;
    margin-top: 40px;
    padding: 30px;
    border-top: 2px solid var(--electric-blue);
    min-height: 150px;
}

.detail-internal-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0, 243, 255, 0.2);
}

.detail-internal-header i {
    font-size: 1.8rem;
    color: var(--electric-blue);
}

.detail-internal-header h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    color: var(--electric-blue);
    margin: 0;
    text-transform: uppercase;
}

/* Sección Contacto y Formulario */
.contact-section {
    width: 90%;
    max-width: 550px;  
    margin: 40px auto 5px auto; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.micro-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 300px;
    margin: 0 auto;
}

.form-group input, 
.form-group textarea {
    width: 100%;
    padding: 10px;
    font-size: 0.85rem;
    background: rgba(0, 26, 51, 0.6);
    border: 1px solid var(--electric-blue);
    border-radius: 6px;
    color: white;
}

.glow-button {
    padding: 8px 25px;
    align-self: center;
    font-size: 0.8rem;
    border-radius: 20px;
    background: transparent;
    color: var(--electric-blue);
    border: 1px solid var(--electric-blue);
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.glow-button:hover {
    background: var(--electric-blue);
    color: var(--deep-ocean);
    box-shadow: 0 0 15px var(--electric-blue);
}

/* Footer */
.services-footer {
    margin-top: 20px;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 50px;
}

.social-links a i {
    font-size: 2.0rem;
    color: var(--electric-blue);
    transition: var(--transition);
}

.footer-signature p {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.85rem;
    color: var(--white);
    opacity: 0.5;
}/* --- VARIABLES --- */
:root {
    --deep-ocean: #001a33;
    --electric-blue: #00d4ff;
    --white: #ffffff;
    --glass: rgba(0, 50, 100, 0.4);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.services-section {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Capa 1: Intro */
.intro-block {
    max-width: 800px;
    padding: 25px;
    margin-bottom: 80px; 
    border: 1px solid var(--electric-blue);
    border-radius: 15px;
}

.justified-text {
    text-align: justify;
    font-family: 'Exo 2';
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Capa 2: Carrusel (Estructura) */
.carousel-container {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 220px; /* Ajustado para dar espacio al slide y botones */
    perspective: 1000px;
    display: flex;
    flex-direction: column; /* Apila el Track arriba y los Controles abajo */
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}

.carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.service-card {
    position: absolute;
    width: 300px;
    left: calc(50% - 150px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    pointer-events: none;
    text-align: center;
    padding: 20px;
}

.service-card.active { opacity: 1; transform: translateZ(100px) scale(1.1); z-index: 10; pointer-events: auto; }
.service-card.prev { opacity: 0.5; transform: translateX(-280px) scale(0.8) rotateY(25deg); z-index: 5; }
.service-card.next { opacity: 0.5; transform: translateX(280px) scale(0.8) rotateY(-25deg); z-index: 5; }

.service-card h3 {
    font-family: 'Orbitron';
    color: var(--electric-blue);
    font-size: 1.2rem;
}

/* CORRECCIÓN: Alineación de Botones */
.carousel-controls {
    display: flex;
    flex-direction: row;    /* FLECHAS UNA AL LADO DE LA OTRA */
    justify-content: center;
    align-items: center;
    gap: 60px;              /* Espacio horizontal entre las flechas */
    margin-top: 30px;       /* Distancia bajo el slide */
    width: 100%;
    z-index: 20;
}

.nav-btn {
    background: var(--glass);
    border: 1px solid var(--electric-blue);
    color: var(--white);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition);
}

/* Capa 3: Detalle */
.detail-section {
    width: 90%;
    max-width: 1000px;
    margin-top: 40px;
    padding: 30px;
    border-top: 2px solid var(--electric-blue);
    min-height: 150px;
}

.detail-internal-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0, 243, 255, 0.2);
}

.detail-internal-header i {
    font-size: 1.8rem;
    color: var(--electric-blue);
}

.detail-internal-header h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    color: var(--electric-blue);
    margin: 0;
    text-transform: uppercase;
}

/* Sección Contacto y Formulario */
.contact-section {
    width: 90%;
    max-width: 550px;  
    margin: 40px auto 5px auto; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.micro-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 300px;
    margin: 0 auto;
}

.form-group input, 
.form-group textarea {
    width: 100%;
    padding: 10px;
    font-size: 0.85rem;
    background: rgba(0, 26, 51, 0.6);
    border: 1px solid var(--electric-blue);
    border-radius: 6px;
    color: white;
}

.glow-button {
    width: fit-content;  /* NO ocupa todo el ancho */
    padding: 8px 25px;   /* Botón compacto */
    align-self: center;  /* Lo centra solito */
    font-size: 0.8rem;   /* Letra pequeña y elegante */
    border-radius: 20px; /* Más redondeado para que se vea Pro */
    background: transparent;
    color: var(--electric-blue);
    border: 1px solid var(--electric-blue);
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.glow-button:hover {
    background: var(--electric-blue);
    color: var(--deep-ocean);
    box-shadow: 0 0 15px var(--electric-blue);
}

/* Footer */
.services-footer {
    margin-top: 20px;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 50px;              /* Separa los iconos para que no estén amontonados */
}

.social-links a i {
    font-size: 2.0rem;      /* Iconos grandes y visibles */
    color: var(--electric-blue);
    transition: var(--transition);
    filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.3));
}

/* Efecto al pasar el mouse */
.social-links a:hover i {
    color: white;
    transform: scale(1.2);   /* Crece un poco al señalarlo */
    filter: drop-shadow(0 0 15px var(--electric-blue));
}

.footer-signature p {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.85rem;
    color: var(--white);
    opacity: 0.5;
}

#detail-content p {
    margin-bottom: 15px; /* Crea la separación entre el párrafo 1, 2, etc. */
    display: block;      /* Asegura que cada uno tome su propia línea */
    line-height: 1.6;    /* Mejora la legibilidad */
}

/* Estilo base para el botón (oculto por defecto) */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--electric-blue);
    font-size: 1.8rem;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}

/* Media Query para móviles */
@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* Aparece el botón */
    }

.sticky-nav {
    display: flex;
    justify-content: space-between; /* Esto empuja el idioma a la izquierda y el menú a la derecha */
    align-items: center;
    padding: 10px 20px;
    background: rgba(0, 26, 51, 0.95); /* Un fondo oscuro para que resalte */
    backdrop-filter: blur(10px); /* Efecto cristal */
    position: sticky;
    top: 0;
    z-index: 2000;
}

    #nav-links {
        display: none; /* Oculto inicialmente */
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 20px;
        background: var(--deep-ocean);
        border: 1px solid var(--electric-blue);
        border-radius: 10px;
        width: 200px;
        padding: 20px;
        gap: 15px;
        z-index: 1000;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }

    /* Clase que activaremos con JS */
    #nav-links.active {
        display: flex;
    }

    #nav-links li {
        margin: 0;
        text-align: left;
    }
}/* Estilo base para el botón (oculto por defecto) */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--electric-blue);
    font-size: 1.8rem;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}

/* Media Query para móviles */
@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* Aparece el botón */
    }

 .sticky-nav {
    display: flex;
    justify-content: space-between; /* Esto separa el idioma de los links */
    align-items: center;
    padding: 10px 40px; /* Más espacio a los lados */
    background: rgba(0, 26, 51, 0.9);
    position: sticky;
    top: 0;
    z-index: 1000;
}

    #nav-links {
        display: none; /* Oculto inicialmente */
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 20px;
        background: var(--deep-ocean);
        border: 1px solid var(--electric-blue);
        border-radius: 10px;
        width: 200px;
        padding: 20px;
        gap: 15px;
        z-index: 1000;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }

    /* Clase que activaremos con JS */
    #nav-links.active {
        display: flex;
    }

    #nav-links li {
        margin: 0;
        text-align: left;
    }
}


/* Contenedor del idioma en la barra (Escritorio) */
#lang-trigger {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 12px;
    border: 1px solid var(--electric-blue);
    border-radius: 20px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    transition: var(--transition);
    background: rgba(0, 212, 255, 0.05); /* El toque sutil de color */
}

#lang-trigger:hover {
    box-shadow: 0 0 10px var(--electric-blue);
    background: rgba(0, 212, 255, 0.15);
}

/* El menú de banderas (Cerrarlo y posicionarlo) */
#lang-menu {
    display: none; /* Se mantiene oculto */
    position: absolute;
    top: 125%; /* Aparece justo debajo del botón */
    left: 0;
    background: var(--deep-ocean);
    border: 1px solid var(--electric-blue);
    border-radius: 8px;
    list-style: none;
    padding: 10px 0;
    min-width: 150px;
    z-index: 3000; /* Asegura que esté por encima de cualquier capa de servicios */
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}

/* Solo se muestra cuando tu JS añade la clase 'active' */
#lang-menu.active {
    display: block;
}

#lang-menu li {
    padding: 8px 15px;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.9rem;
    color: var(--white);
    transition: background 0.2s;
}

#lang-menu li:hover {
    background: var(--electric-blue);
    color: var(--deep-ocean);
}