/* Tracking de texto para el logo */
.tracking-wider {
    letter-spacing: 1px;
}

/* Efecto hover suave en los enlaces */
.navbar-dark .navbar-nav .nav-link {
    color: #rgba(255,255,255,0.75);
    transition: color 0.3s ease;
    font-weight: 500;
}

    .navbar-dark .navbar-nav .nav-link:hover {
        color: #38bdf8; /* Azul hielo al pasar el cursor */
    }

/* Ajuste del botón de cotización */
.btn-outline-danger {
    border-color: #dc3545;
    color: #ffffff;
    transition: all 0.3s ease;
}

    .btn-outline-danger:hover {
        background-color: #dc3545; /* Rojo fuego al hacer hover */
        box-shadow: 0 0 12px rgba(220, 53, 69, 0.5);
    }








/* Contenedor principal a pantalla completa --------------------------------------------------------------------------------------------*/
/* PRELOADER FIJO */
.loading-screen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: #0f172a !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 999999 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease !important;
}
    /* CLASE CORREGIDA QUE LIBERA EL SCROLL */
    .loading-screen.fade-out-mega {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important; /* Hace que los clics pasen a través del div invisible */
    }

/* Bloque central (La Card de carga) */
.loading-content {
    background-color: #1e293b !important; /* Fondo tipo card un poco más claro */
    padding: 40px 30px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
    text-align: center !important;
    max-width: 360px !important;
    width: 90% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centra el logo y la barra internamente */
    justify-content: center !important;
}

/* Contenedor del Logo */
.logo-container {
    width: 100px !important;
    height: 100px !important;
    margin: 0 auto 20px auto !important; /* Corregido el margen */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    animation: pulseMega 2s infinite ease-in-out !important;
}

    /* Forzar tamaño correcto del logo real o svg */
    .logo-container img, .logo-svg {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

/* Títulos y Textos */
.app-title {
    color: #ffffff !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}

.loading-text {
    color: #94a3b8 !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    font-size: 0.95rem !important;
    margin: 0 0 25px 0 !important;
    padding: 0 !important;
}

/* Contenedor base de la barra de carga */
.loading-bar {
    width: 100% !important;
    height: 6px !important;
    background-color: #334155 !important; /* Fondo gris de la barra */
    border-radius: 10px !important;
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
}

/* Indicador físico interno que se desplaza (Línea de progreso) */
.loading-progress {
    position: absolute !important;
    top: 0 !important;
    left: -40% !important;
    height: 100% !important;
    width: 40% !important;
    background: linear-gradient(90deg, #38bdf8, #22c55e) !important; /* Degradado azul a verde */
    border-radius: 10px !important;
    animation: loadingSlideMega 1.5s infinite ease-in-out !important;
}

/* =========================================================
   ANIMACIONES ÚNICAS COMPATIBLES CON RAZOR (Doble Arroba)
   ========================================================= */

@@keyframes pulseMega {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

@@keyframes loadingSlideMega {
    0% {
        left: -40%;
    }

    50% {
        width: 60%; /* Efecto elástico al medio */
    }

    100% {
        left: 100%;
    }
}



/* =========================================================
       NUEVOS ESTILOS: EFECTOS DE RAYOS Y DESTELLOS ELÉCTRICOS
       ========================================================= */
.logo-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Aura de energía de fondo */
.lightning-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.4) 0%, rgba(34, 197, 94, 0) 70%);
    border-radius: 50%;
    animation: energyPulseMega 1.5s infinite alternate ease-in-out;
    z-index: 1;
}


/* Simulación de arco eléctrico / Rayos rápidos */
.lightning-spark {
    position: absolute;
    width: 106%;
    height: 106%;
    border: 2px solid transparent;
    border-radius: 48%;
    z-index: 2;
}

    /* Rayo cian de alta frecuencia */
    .lightning-spark.stroke-1 {
        border-top-color: #38bdf8;
        border-bottom-color: #38bdf8;
        filter: drop-shadow(0 0 8px #38bdf8);
        animation: lightningShockMega1 0.12s infinite linear;
    }

    /* Rayo verde de contra-frecuencia */
    .lightning-spark.stroke-2 {
        border-left-color: #4ade80;
        border-right-color: #4ade80;
        filter: drop-shadow(0 0 10px #22c55e);
        animation: lightningShockMega2 0.18s infinite linear;
    }

.logo-container {
    width: 100px !important;
    height: 100px !important;
    margin: 0 !important;
    position: relative;
    z-index: 3;
    animation: pulseMega 2s infinite ease-in-out !important;
}

/* =========================================================
       ANIMACIONES DE RAYOS (Doble Arroba para evitar choques con Razor)
       ========================================================= */
/*@@keyframes energyPulse {
    0% {
        transform: scale(0.85);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.15);
        opacity: 0.9;
    }
}*/
@@keyframes energyPulseMega {
    0% {
        transform: scale(0.9);
        opacity: 0.4;
    }

    100% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* Movimiento ultra rápido e irregular tipo cortocircuito */
@@keyframes lightningShockMega1 {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.9;
    }

    25% {
        transform: rotate(90deg) scale(1.03);
        opacity: 0.4;
    }

    50% {
        transform: rotate(180deg) scale(0.98);
        opacity: 1;
    }

    75% {
        transform: rotate(270deg) scale(1.05);
        opacity: 0.3;
    }

    100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.9;
    }
}

@@keyframes lightningShockMega2 {
    0% {
        transform: rotate(360deg) scale(1.02);
        opacity: 0.4;
    }

    33% {
        transform: rotate(240deg) scale(0.97);
        opacity: 1;
    }

    66% {
        transform: rotate(120deg) scale(1.04);
        opacity: 0.5;
    }

    100% {
        transform: rotate(0deg) scale(1);
        opacity: 0.4;
    }
}





/*********************************Card Tarejetas seccion *****************************/
/*------------------------------------------------------------------------------------*/
/* Contenedor general de la tarjeta moderna */
.workshop-card {
    background-color: #1e293b !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease !important;
    height: 100% !important;
    text-align: left !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

    .workshop-card a {
        text-decoration: none !important;
        display: block !important;
    }

    .workshop-card:hover {
        transform: translateY(-8px) !important;
        box-shadow: 0 15px 35px rgba(56, 189, 248, 0.25) !important; /* Brillo cian en hover */
        border-color: rgba(56, 189, 248, 0.3) !important;
    }

/* Caja contenedora de la imagen */
.img-wrapper {
    position: relative !important;
    overflow: hidden !important;
    height: 220px !important;
    background-color: #0f172a !important;
}

    .img-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        transition: transform 0.5s ease !important;
    }

.workshop-card:hover .img-wrapper img {
    transform: scale(1.08) !important; /* Sutil zoom de la imagen al hacer hover */
}

/* Efecto de capa flotante (Overlay) moderna */
.card-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(15, 23, 42, 0.6) !important; /* Fondo translúcido */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.workshop-card:hover .card-overlay {
    opacity: 1 !important;
}

.overlay-icon {
    color: #ffffff !important;
    font-size: 1.8rem !important;
    background: linear-gradient(135deg, #38bdf8 0%, #ef4444 100%) !important;
    width: 55px !important;
    height: 55px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
    transform: scale(0.8) !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.workshop-card:hover .overlay-icon {
    transform: scale(1) !important;
}
/* Contenido informativo de la tarjeta (Abajo de la foto) */

.card-info-content {
    padding: 24px !important;
}

.badge-service {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    color: #38bdf8 !important; /* Color azul cian */
    display: inline-block !important;
    margin-bottom: 8px !important;
}

.card-item-title {
    color: #ffffff !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
}

.card-item-text {
    color: #94a3b8 !important; /* Gris azulado legible */
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
}
/*************End Card Tarejetas seccion *****************************/
/*---------------------------------------------------------------------------------------------*/




/*********************Form Usuarios*****************************************************/
/* Estilizado estricto para los campos de texto del Taller */
.form-group-custom {
    margin-bottom: 22px !important;
    width: 100% !important;
    text-align: left !important;
}

.form-label-custom {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #cbd5e1 !important; /* Gris claro legible */
    margin-bottom: 8px !important;
    display: block !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Nueva clase limpia libre de choques con Bootstrap */
/* Inputs elípticos con brillo de neón DodgerBlue fijo y garantizado */
.form-input-custom-premium {
    width: 100% !important;
    display: block !important;
    background-color: #0f172a !important; /* Forzamos un fondo oscuro sólido para que resalte el neón */
    /* 🔹 Truco clave: Borde nítido de 2px color dodgerblue */
    border: 2px solid #1e90ff !important;
    border-radius: 58px !important;
    padding: 12px 20px !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
    /* Aura de luz de neón constante alrededor del cuadro */
    box-shadow: 0 0 8px rgba(30, 144, 255, 0.4) !important;
    transition: all 0.25s ease-in-out !important;
}

    /* Efecto intenso cuando el usuario hace clic para escribir (Focus) */
    .form-input-custom-premium:focus {
        outline: none !important;
        border-color: #38bdf8 !important; /* Cambia a un tono cian más brillante */
        background-color: #1e293b !important; /* Aclara ligeramente el fondo al escribir */
        /* Intensifica el destello de luz a 14 píxeles */
        box-shadow: 0 0 14px rgba(56, 189, 248, 0.75) !important;
    }

    /* Asegurar que el texto que escribe el usuario se vea grande y nítido */
    .form-input-custom-premium, .form-input-custom-premium:focus {
        font-weight: 500 !important;
        letter-spacing: 0.5px !important;
    }

/* =========================================================
       ANIMACIÓN DE RESPIRACIÓN DE NEÓN (Doble Arroba para Razor)
       ========================================================= */
@@keyframes glowDodgerBlue {
    0% {
        border-color: rgba(30, 144, 255, 0.35) !important;
        box-shadow: 0 0 4px rgba(30, 144, 255, 0.15) !important;
    }

    100% {
        border-color: rgba(30, 144, 255, 0.8) !important;
        box-shadow: 0 0 10px rgba(30, 144, 255, 0.4) !important; /* Destello de luz suave */
    }
}
/* Checkbox alineado */
.form-check-custom {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
    color: #94a3b8 !important;
    user-select: none !important;
    gap: 8px !important;
}

    .form-check-custom input {
        width: 16px !important;
        height: 16px !important;
        accent-color: #dc3545 !important; /* Check en color rojo */
        cursor: pointer !important;
    }

/* Botón de acción con degradado de fuego */
.btn-submit-premium {
    width: 100% !important;
    background: linear-gradient(90deg, #dc3545 0%, #ef4444 100%) !important;
    border: none !important;
    color: white !important;
    padding: 14px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    letter-spacing: 0.5px !important;
    border-radius: 58px !important; /* Redondeado idéntico a los inputs */
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2) !important;
}

    .btn-submit-premium:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4) !important;
        filter: brightness(1.1) !important;
    }


/********************End Form Usuarios*****************************************************/

/* ============================================
   NAVBAR LANDING - RESPONSIVE DEFINITIVO
   ============================================ */
.mega-navbar-landing {
    position: sticky;
    top: 0;
    z-index: 1050;
    width: 100%;
    background: rgba(0, 0, 0, 0.95);
}

    .mega-navbar-landing .navbar-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0.8rem 1.2rem;
        position: relative;
    }

    .mega-navbar-landing .navbar-brand {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        color: #fff;
        text-decoration: none;
        font-size: 1.2rem;
        font-weight: 800;
        letter-spacing: 1px;
        z-index: 10;
    }

        .mega-navbar-landing .navbar-brand img {
            height: 40px;
            width: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #0d6efd;
        }

    /* Botón hamburguesa */
    .mega-navbar-landing .navbar-toggle {
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        background: transparent;
        border: 2px solid rgba(255,255,255,0.2);
        border-radius: 8px;
        cursor: pointer;
        padding: 8px;
        z-index: 10;
    }

        .mega-navbar-landing .navbar-toggle .bar {
            display: block;
            width: 22px;
            height: 2.5px;
            background: #fff;
            border-radius: 2px;
        }

    /* Links desktop */
    .mega-navbar-landing .navbar-links {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .mega-navbar-landing .navbar-links li a {
            color: #ddd;
            text-decoration: none;
            font-weight: 500;
            font-size: 0.92rem;
            transition: color 0.3s;
        }

            .mega-navbar-landing .navbar-links li a:hover {
                color: #fff;
            }

            .mega-navbar-landing .navbar-links li a.btn-ingresar {
                background: #0d6efd;
                color: #fff;
                padding: 0.5rem 1.2rem;
                border-radius: 25px;
            }

/* ============================================
   MÓVIL
   ============================================ */
@media screen and (max-width: 991px) {
    .mega-navbar-landing .navbar-toggle {
        display: flex;
    }

    .mega-navbar-landing .navbar-links {
        display: none;
    }
}