/* =========================================
   GIGASYSTEM - Estilos Principales
   ========================================= */

:root {
    --color-primario: #4e54c8;
    --color-secundario: #8f94fb;
    --color-acento: #ff416c;
    --color-texto: #2b2b2b;
    --color-fondo: #f8f9fa;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    overflow-x: hidden;
}

/* --- Barra de Navegación --- */
.navbar {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.navbar-brand img {
    max-height: 40px; /* Ajusta este valor según el tamaño de tu logo real */
}

.nav-link {
    font-weight: 600;
    font-size: 0.9rem;
    color: #444;
    transition: color 0.3s;
}

.nav-link:hover, .nav-item.active .nav-link {
    color: var(--color-primario);
}

.dropdown-menu {
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 10px;
}

.dropdown-item {
    font-size: 0.85rem;
    padding: 10px 20px;
    transition: all 0.2s;
}

.dropdown-item:hover {
    background-color: rgba(78, 84, 200, 0.05);
    color: var(--color-primario);
    padding-left: 25px; /* Pequeño efecto de movimiento al pasar el ratón */
}

/* --- Botones --- */
.btn-acento {
    background: linear-gradient(to right, #2337eb, #4eafdb);
    border: none;
    color: white;
    font-weight: 600;
    border-radius: 50px;
    padding: 10px 25px;
    box-shadow: 0 4px 15px rgba(131, 177, 207, 0.4);
    transition: transform 0.3s, box-shadow 0.3s;
}

.btn-acento:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(58, 159, 190, 0.6);
    color: white;
}

/* --- Hero Section (Inicio) --- */
.hero-section {
    background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-secundario) 100%);
    color: white;
    padding: 160px 0 100px;
    position: relative;
}

.hero-title {
    font-weight: 800;
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero-subtitle {
    font-weight: 300;
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Onda Inferior */
.custom-shape-divider-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 70px;
}

.custom-shape-divider-bottom .shape-fill {
    fill: var(--color-fondo);
}

/* --- Tarjetas de Características --- */
.feature-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    height: 100%;
    border: 1px solid rgba(0,0,0,0.02);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.feature-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, var(--color-primario), var(--color-secundario));
    transform: scaleX(0);
    transition: transform 0.4s ease;
    transform-origin: left;
}

.feature-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.feature-card:hover::before {
    transform: scaleX(1);
}

.feature-icon-wrapper {
    width: 80px;
    height: 80px;
    background: rgba(78, 84, 200, 0.1);
    color: var(--color-primario);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 25px;
    transition: all 0.3s;
}

.feature-card:hover .feature-icon-wrapper {
    background: var(--color-primario);
    color: white;
    transform: rotateY(360deg);
}

/* --- Footer --- */
.footer-tech {
    background: #111;
    color: #888;
    padding: 80px 0 30px;
}

.footer-tech h5 {
    color: white;
    font-weight: 700;
    margin-bottom: 25px;
}

.footer-tech .social-links a {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: #222;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    margin-right: 10px;
    transition: all 0.3s;
}

.footer-tech .social-links a:hover {
    background: var(--color-primario);
    transform: translateY(-3px);
}
/* --- Sección Misión y Visión --- */
.img-moderna {
    border-radius: 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
.img-moderna:hover {
    transform: translateY(-10px);
}

/* --- Testimonios --- */
.testimonial-box {
    background: white;
    padding: 50px;
    border-radius: 30px;
    position: relative;
    box-shadow: 0 15px 50px rgba(0,0,0,0.05);
}
.testimonial-box i.quote-icon {
    font-size: 3rem;
    color: var(--color-primario);
    opacity: 0.2;
    position: absolute;
    top: 20px;
    left: 20px;
}

/* --- Carrusel de Logos --- */
.client-logo-slider img {
    height: 60px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s;
    margin: 0 20px;
}
.client-logo-slider img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* --- Ajuste Carrusel Principal --- */
.carousel-item {
    height: 80vh;
    min-height: 500px;
    background: no-repeat center center scroll;
    background-size: cover;
}
.carousel-caption {
    bottom: 20%;
    z-index: 10;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
/* =========================================
   MODO OSCURO
   ========================================= */

body.modo-oscuro {
    /* Cambiamos las variables principales */
    --color-fondo: #121212;
    --color-texto: #e0e0e0;
}

/* Oscurecer la barra de navegación */
body.modo-oscuro .navbar {
    background: rgba(30, 30, 30, 0.98);
    box-shadow: 0 4px 30px rgba(255, 255, 255, 0.05);
}
body.modo-oscuro .nav-link, 
body.modo-oscuro .navbar-toggler-icon {
    color: #e0e0e0 !important;
}

/* Oscurecer fondos blancos y claros de Bootstrap */
body.modo-oscuro .bg-white, 
body.modo-oscuro .bg-light {
    background-color: #1e1e1e !important;
    color: #e0e0e0;
}

/* Menú desplegable oscuro */
body.modo-oscuro .dropdown-menu {
    background-color: #2b2b2b;
}
body.modo-oscuro .dropdown-item {
    color: #e0e0e0;
}
body.modo-oscuro .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Ajustar las tarjetas de características */
body.modo-oscuro .feature-card {
    background: #1e1e1e;
    border-color: #333;
    color: #e0e0e0;
}
body.modo-oscuro .feature-card p.text-muted {
    color: #a0a0a0 !important;
}

/* Ajustar el botón del modo oscuro */
body.modo-oscuro #btn-modo-oscuro {
    background-color: rgba(255,255,255,0.1) !important;
}
body.modo-oscuro #icono-modo {
    color: #f1c40f !important; /* Color amarillo para el sol */
}
/* --- Mejoras de Visibilidad en Modo Oscuro --- */
body.modo-oscuro .text-muted {
    color: #b0b0b0 !important; /* Gris claro para que sea legible */
}

body.modo-oscuro .lead {
    color: #f8f9fa !important; /* Texto principal más brillante */
}

body.modo-oscuro .bg-light {
    background-color: #1e1e1e !important;
}

body.modo-oscuro h2, 
body.modo-oscuro h4, 
body.modo-oscuro h5 {
    color: #ffffff; /* Títulos en blanco puro */
}

/* Ajuste para las secciones que tienen bg-white */
body.modo-oscuro section.bg-white {
    background-color: #121212 !important;
}

/* Ajuste para el ícono moderno */
body.modo-oscuro #icono-modo {
    color: #ffffff !important; 
    transform: rotate(180deg);
    transition: transform 0.5s ease;
}
/* =========================================
   SISTEMA DE MODO OSCURO (OPTIMIZADO)
   ========================================= */

/* Definición de la clase en la raíz para mayor control */
.modo-oscuro {
    --color-fondo: #0f172a; /* Azul noche profundo y moderno */
    --color-texto: #f1f5f9;
    --color-nav: #1e293b;
}

body.modo-oscuro {
    background-color: var(--color-fondo);
    color: var(--color-texto);
}

/* --- Arreglo de Visibilidad de Textos --- */
body.modo-oscuro .text-muted, 
body.modo-oscuro .lead.text-muted {
    color: #cbd5e1 !important; /* Gris claro azulado de alta visibilidad */
}

body.modo-oscuro .bg-white, 
body.modo-oscuro .bg-light,
body.modo-oscuro section {
    background-color: var(--color-fondo) !important;
    color: var(--color-texto);
}

/* Barra de navegación */
body.modo-oscuro .navbar {
    background-color: var(--color-nav) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

body.modo-oscuro .nav-link {
    color: #f1f5f9 !important;
}

/* Tarjetas y elementos flotantes */
body.modo-oscuro .feature-card,
body.modo-oscuro .dropdown-menu {
    background-color: #1e293b !important;
    border: 1px solid #334155;
    color: #f1f5f9;
}

body.modo-oscuro .dropdown-item {
    color: #cbd5e1;
}

body.modo-oscuro .dropdown-item:hover {
    background-color: #334155;
}

/* Ajuste del botón de modo oscuro */
#btn-modo-oscuro {
    transition: transform 0.3s ease;
}

body.modo-oscuro #btn-modo-oscuro {
    background-color: #334155 !important;
    color: #fbbf24 !important; /* Color ámbar suave para el ícono */
}
/* =========================================
   AJUSTES DEL ACORDEÓN PARA MODO OSCURO
   ========================================= */

/* 1. Fondo y borde de los cuadros del acordeón */
body.modo-oscuro .accordion-item {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
}

/* 2. El botón (texto dinámico) cuando está cerrado */
body.modo-oscuro .accordion-button {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* 3. El contenido interior (que tenía la clase bg-light) */
body.modo-oscuro .accordion-body,
body.modo-oscuro .accordion-body.bg-light {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
}

/* 4. Cambiar la flechita del acordeón a color blanco para que se vea */
body.modo-oscuro .accordion-button::after {
    filter: brightness(0) invert(1);
}

/* 5. Mantener tu color azul/morado cuando el cuadro está abierto */
body.modo-oscuro .accordion-button:not(.collapsed) {
    background-color: #4e54c8 !important;
    color: #ffffff !important;
}

/* Ajuste adicional para las tarjetas de Características y Propiedades (parte de abajo) */
body.modo-oscuro .card.bg-light {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
}
body.modo-oscuro .card-body ul li {
    color: #cbd5e1 !important;
}
/* =========================================
   TARJETAS DE CARACTERÍSTICAS (MODO OSCURO MULTI-PÁGINA)
   ========================================= */

/* 1. Oscurecer el fondo de la sección (atrapa tanto bg-white como bg-light) */
body.modo-oscuro section.border-top {
    background-color: #0f172a !important; 
    border-top: 1px solid #1e293b !important;
}

/* 2. Forzar a TODAS las tarjetas dentro de esas secciones a oscurecerse */
body.modo-oscuro section.border-top div.card,
body.modo-oscuro div.card.bg-light {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

/* 3. Aclarar el texto de la lista y los íconos de check */
body.modo-oscuro div.card-body ul.feature-list li {
    color: #cbd5e1 !important;
}

body.modo-oscuro div.card-body ul.feature-list li i.text-primary {
    color: #8f94fb !important; /* Vistos en morado claro */
}

/* 4. Aclarar el título principal de la sección */
body.modo-oscuro section.border-top h2.text-primary {
    color: #f1f5f9 !important;
}

/* 5. ARREGLO EXTRA: Oscurecer la sección superior de "COMPROBANTES ELECTRÓNICOS" */
body.modo-oscuro section.bg-light div.bg-white.border-start {
    background-color: #1e293b !important;
    border-color: #4e54c8 !important;
}
/* =========================================
   PÁGINA DE CONTACTO (MODO OSCURO)
   ========================================= */

/* 1. Oscurecer los contenedores blancos (Formulario y Datos) */
body.modo-oscuro .bg-white.rounded-4,
body.modo-oscuro .contact-info-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9;
}

/* 2. Oscurecer el cuadro pequeño de "Horarios" (que usa bg-light) */
body.modo-oscuro .contact-info-card .bg-light {
    background-color: #0f172a !important;
}

/* 3. Estilos para los campos del formulario (Inputs y Textarea) */
body.modo-oscuro .form-control {
    background-color: #0f172a !important; /* Fondo interior muy oscuro */
    border: 1px solid #334155 !important; /* Borde gris oscuro */
    color: #f1f5f9 !important; /* Texto blanco al escribir */
}

/* Color del texto de sugerencia (Placeholder) */
body.modo-oscuro .form-control::placeholder {
    color: #64748b !important; 
}

/* Color cuando el usuario hace clic en el cuadro (Focus) */
body.modo-oscuro .form-control:focus {
    background-color: #0f172a !important;
    border-color: #4e54c8 !important;
    color: #f1f5f9 !important;
    box-shadow: 0 0 0 0.25rem rgba(78, 84, 200, 0.25) !important;
}

/* Textos (Labels y Títulos) del formulario */
body.modo-oscuro .form-label {
    color: #cbd5e1 !important;
}
body.modo-oscuro h2.fw-bold {
    color: #f1f5f9 !important;
}

/* 4. EL TRUCO DEL MAPA: Invertir colores y corregir tonos */
body.modo-oscuro .google-map iframe {
    filter: invert(90%) hue-rotate(180deg) brightness(95%) contrast(85%);
    transition: filter 0.5s ease; /* Transición suave al cambiar de modo */
}