/* Variables de color personalizadas */
:root {
    --bg-dark: #0a0f1e;
    --bg-black: #050810;
    --color-cyan: #00e5ff;
    --color-orange: #ff6d00;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--bg-dark);
}

/* Utilidades de color personalizadas para Bootstrap */
.bg-dark { background-color: var(--bg-dark) !important; }
.bg-black { background-color: var(--bg-black) !important; }
.text-cyan { color: var(--color-cyan) !important; }
.text-orange { color: var(--color-orange) !important; }

.btn-cyan {
    background-color: var(--color-cyan);
    border-color: var(--color-cyan);
}
.btn-cyan:hover {
    background-color: #00bfe6;
    border-color: #00bfe6;
}

.btn-outline-cyan {
    color: var(--color-cyan);
    border-color: var(--color-cyan);
}
.btn-outline-cyan:hover {
    background-color: var(--color-cyan);
    color: #000;
}

.btn-orange {
    background-color: var(--color-orange);
    border-color: var(--color-orange);
}
.btn-orange:hover {
    background-color: #e65c00;
    border-color: #e65c00;
}

.border-cyan { border-color: var(--color-cyan) !important; }

/* Navbar transparente a oscura */
.navbar {
    transition: background-color 0.3s ease;
    background-color: rgba(5, 8, 16, 0.95) !important;
    backdrop-filter: blur(10px);
}

/* Configuracion del Carrusel Full-Screen */
.carousel-item {
    height: 100vh;
    min-height: 400px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* Ajustes de inputs */
.form-control:focus {
    background-color: #1a2235;
    border-color: var(--color-cyan);
    box-shadow: 0 0 0 0.25rem rgba(0, 229, 255, 0.25);
    color: #fff;
}