/* ===========================
   ESTILOS GENERALES
   =========================== */
body {
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #555;
   /* background-image: url('../Images/Multimedia/Fondo_Pagina.png'); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Contenido principal */
.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    
}

/* Títulos */
h1, h2, h3, h4, h5, h6 {
    font-family: "Arial Narrow", Arial, sans-serif;
    font-weight: bold;
    color: #2A3F54; /* Azul acero oscuro */
    margin-bottom: 10px;
}

/* ===========================
   MENÚ DE NAVEGACIÓN (NAVBAR)
   =========================== */
.navbar {
    background: linear-gradient(to right, #422a72, #422a72, #de3d33, #de3d33);
    border-bottom: 3px solid #6C757D; 
    padding: 10px 15px;
}

    /* Estilos de los enlaces del menú */
    .navbar .nav-link, .navbar .dropdown-toggle {
        color: #FFFFFF !important; /* Blanco */
        font-size: 17px;
        padding: 10px 15px;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

        /* Hover en los enlaces */
        .navbar .nav-link:hover, .navbar .dropdown-item:hover {
            background-color: #de3d33 !important; /* Azul acero oscuro */
            color: #FFFFFF !important; /* Amarillo dorado */
        }


.mi-navbar a {
    color: #FFFFFF;
    font-size: 23px;
}

/* Fondo del submenú */
.dropdown-menu {
    background-color: #6C757D !important; /* Plomo */
    border: 1px solid #FFFFFF;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
}

    /* Enlaces dentro de los submenús */
    .dropdown-menu .dropdown-item {
        color: #FFFFFF !important;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

        /* Hover en los enlaces del submenú */
        .dropdown-menu .dropdown-item:hover {
            background-color: #2A3F54 !important; /* Azul acero oscuro */
            color: #FFD700 !important; /* Amarillo dorado */
        }

/* Botón del menú en dispositivos pequeños */
.navbar-toggler {
    background-color: #FFFFFF;
    border: none;
}

/* Icono del botón de menú */
.navbar-toggler-icon {
    filter: invert(1);
}

/* Ajuste del logo en la barra de navegación */
.navbar-brand img {
    width: 100px;
    width: 100px;
    height: 50px;
    margin-right: 10px;
    border-radius: 45%; /* Mantiene los bordes redondeados */
    box-shadow: 0 0 8px 7px rgba(255, 255, 255, 100); /* Difuminado blanco suave hacia afuera */
}

    /* Efecto hover en el logo */
    .navbar-brand img:hover {
        transform: scale(1.1);
        box-shadow: 0 0 8px 7px rgba(255, 255, 255, 100); /* Difuminado blanco suave hacia afuera */
        background-color: #ffffff; /* Plomo claro */
        border: 2px solid #ffffff;
    }

/* ===========================
   FOOTER
   =========================== */
footer {
    background: linear-gradient(to right, #422a72, #422a72, #de3d33, #de3d33);
    /*background-color: #2A3F54 !important;*/ /* Azul acero oscuro */
    color: #FFFFFF;
    padding: 10px;
    text-align: center;
}

/* ===========================
   SECCIÓN INICIO
   =========================== */
.Inicio_Header {
    height: 30%;
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

    .Inicio_Header video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
    }

    /* Filtro oscuro para el video */
    .Inicio_Header .bg-dark {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 0;
    }

    /* Contenedor del texto sobre el video */
    .Inicio_Header .container {
        position: relative;
        z-index: 1;
        text-align: center;
        color: white;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    }

/* ===========================
   SECCIÓN DE CONTACTO
   =========================== */
.contact-section {
    background-color: #F8F9FA;
    color: #333;
}

    .contact-section h2 {
        font-size: 2rem;
        margin-bottom: 20px;
        font-weight: bold;
    }

    .contact-section .form-control {
        border-radius: 5px;
        border: 1px solid #ddd;
    }

    .contact-section .btn-primary {
        background-color: #2A3F54;
        border: none;
        transition: background-color 0.3s ease;
    }

        .contact-section .btn-primary:hover {
            background-color: #4F83CC;
        }

/* ===========================
   IMÁGENES Y MEDIA
   =========================== */
.img-fluid {
    max-height: 400px;
    object-fit: cover;
}

/* Ajuste del texto centrado */
.text-center {
    margin-top: 10px;
}

/* ===========================
   CITAS Y DESTACADOS
   =========================== */
.blockquote {
    /*background: #f8f9fa;*/
    background: linear-gradient(to bottom, #FF1A1A, #A51E1E);
    border-left: 5px solid #007bff;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    color: #FFFFFF;
}

.blockquote-footer {
    color: #FFFFFF;
    font-size: 0.9rem;
    font-style: italic;
    background: linear-gradient(to bottom, #FF1A1A, #A51E1E);
}
/* Estilo general de los botones */
/* 🎨 Estilo general de los botones */
/* 🎨 Estilo base para todos los botones */

.btn-mabycorpservi {
    background-color: #de3d33;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 1.0rem;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

    .btn-mabycorpservi:hover {
        background-color: #422a72;
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    }

    .btn-mabycorpservi:active {
        transform: translateY(0);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    .btn-mabycorpservi i {
        margin-right: 8px;
    }

/* 🔵 Botón Azul (Principal) */
.btn-mabycorp-primary {
    background-color: #ae3f3f; /* Azul del logo */
    border-color: #D32F2F; /* Borde azul oscuro */
}

    .btn-mabycorp-primary:hover {
        background-color: #ae3f3f; /* Azul más oscuro */
        border-color: #D32F2F; /* Borde dorado */
        color: #88cec3; /* Texto amarillo dorado */
        transform: scale(1.07); /* Crece ligeramente */
        box-shadow: 4px 6px 10px rgba(0, 0, 0, 0.4); /* Aumenta la sombra */
    }

/* 🔴 Botón Rojo (Acción Importante) */
.btn-mabycorp-danger {
    background-color: #D32F2F; /* Rojo del logo */
    border-color: #A51E1E;
}

    .btn-mabycorp-danger:hover {
        background-color: #A51E1E; /* Rojo más oscuro */
        border-color: #FFD700;
        color: #FFD700;
        transform: scale(1.07);
        box-shadow: 4px 6px 10px rgba(0, 0, 0, 0.4);
    }

/* 🟢 Botón Verde (Secundario) */
.btn-mabycorp-success {
    background-color: #008B45; /* Verde del logo */
    border-color: #006837;
}

    .btn-mabycorp-success:hover {
        background-color: #006837; /* Verde más oscuro */
        border-color: #FFD700;
        color: #FFD700;
        transform: scale(1.07);
        box-shadow: 4px 6px 10px rgba(0, 0, 0, 0.4);
    }

/* 🏢 Botón Gris (Neutro) */
.btn-mabycorp-neutral {
    background-color: #6C757D; /* Gris plomo */
    border-color: #4E555B;
}

    .btn-mabycorp-neutral:hover {
        background-color: #4E555B; /* Gris más oscuro */
        border-color: #FFD700;
        color: #FFD700;
        transform: scale(1.07);
        box-shadow: 4px 6px 10px rgba(0, 0, 0, 0.4);
    }

/* Estilo del Footer */
.footer-mabycorp {
    background: linear-gradient(to right, #422a72, #422a72, #de3d33, #de3d33);
    /*background-color: #A51E1E;*/ /* Naranja oscuro */
    color: #FFFFFF; /* Texto blanco */
    text-align: center;
    padding: 4px 0; /* Menos padding vertical para hacerlo más fino */
    font-size: 12px; /* Tamaño de letra un poco más pequeño */
    font-weight: normal; /* Texto menos grueso para un diseño más sutil */
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2); /* Sombra más ligera */
}

    /* Texto dentro del Footer */
    .footer-mabycorp p {
        margin: 0;
        padding: 3px;
    }

    /* Resaltar "Gest Sistemas" */
    .footer-mabycorp strong {
        color: #FFD700; /* Amarillo dorado */
        font-weight: bold;
    }


/* ===========================
   RESPONSIVE DESIGN
   =========================== */
@media screen and (min-width: 768px) {
    .body-content {
        padding: 0;
    }
}

@media (max-width: 576px) {
    .navbar-brand {
        text-align: center;
        width: 100%;
    }
}