/* ======================================================= */
/* 1. ANULACIÓN DE VARIABLES DE BOOTSTRAP 5 CON TUS COLORES */
/* ======================================================= */

:root {
    /* Celeste Fuerte: #206e95 (Usado para Primary) */
    --bs-primary: #206e95; 
    /* Celeste Claro: #66a4c9 (Usado para Info y Secondary) */
    --bs-secondary: #66a4c9; 
    --bs-info: #66a4c9;
    
    /* Variables de color para asegurar el contraste */
    --bs-light-rgb: 244, 244, 244;
    --bs-dark-rgb: 34, 34, 34;
    --bs-body-color: #333; 
    --bs-link-color: #206e95;
    
    /* Variables para el gradiente */
    --color-primary-rgb: 32, 110, 149;
    --color-secondary-rgb: 102, 164, 201;
}

/* ======================================================= */
/* 2. ESTILOS ESPECÍFICOS DEL EJEMPLO PRODUCT Y RESPONSIVIDAD */
/* ======================================================= */

/* Asegura que el texto en la sección primaria (azul fuerte) sea blanco */
.bg-primary {
    color: var(--bs-white)!important;
}

/* HEADER: Estilo moderno, similar al Product de Bootstrap */
.site-header {
    background-color: rgba(255, 255, 255, 1); 
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 10px rgba(42, 82, 192, 0.1);
    /* Asegura que el contenedor de navegación ocupe todo el espacio en móvil */
    padding-left: 1rem;
    padding-right: 1rem;
}

.site-header a {
    color: #206e95; 
    transition: color 0.3s ease-in-out;
}

.site-header a:hover {
    color: var(--bs-secondary); 
}

/* SECCIÓN HERO: Gradiente con imagen de fondo */


#hero-section {
    background-image: linear-gradient(rgba(var(--color-primary-rgb), 0.1), rgba(var(--color-secondary-rgb), 0.3)), url('fondobueno.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
}

#misionvision {
    background-image: url('fondo3.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
}

#cadena {
    background-image: url('fondolog.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
}

.imabotones

{

  margin-top: 20px;
  margin-bottom: 20px;

}

/* Títulos más impactantes */
.display-3 {
    font-weight: 700 !important;
}



/* SECCIÓN CLIENTES */
.client-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: 30px;
    margin-bottom: 70px;
}

.client-logos img {
    max-height: 50px;
    width: 120px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.client-logos img:hover {
    opacity: 1;
}



.feature-icon {
  width: 4rem;
  height: 4rem;
  border-radius: .75rem;
}

.icon-square {
  width: 3rem;
  height: 3rem;
  border-radius: .75rem;
}

.text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); }
.text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); }
.text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); }

.card-cover {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.feature-icon-small {
  width: 3rem;
  height: 3rem;
}


.social-links a {
  color: #1590b6;
}
.social-links a:hover {
  color: #175997; /* blanco suave al pasar el cursor */
}

.bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }
      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
      .b-example-divider {
        width: 100%;
        height: 3rem;
        background-color: #0000001a;
        border: solid rgba(0, 0, 0, 0.15);
        border-width: 1px 0;
        box-shadow:
          inset 0 0.5em 1.5em #0000001a,
          inset 0 0.125em 0.5em #00000026;
      }
      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }
      .bi {
        vertical-align: -0.125em;
        fill: currentColor;
      }
      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }
      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
      .btn-bd-primary {
        --bd-violet-bg: #712cf9;
        --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
        --bs-btn-font-weight: 600;
        --bs-btn-color: var(--bs-white);
        --bs-btn-bg: var(--bd-violet-bg);
        --bs-btn-border-color: var(--bd-violet-bg);
        --bs-btn-hover-color: var(--bs-white);
        --bs-btn-hover-bg: #6528e0;
        --bs-btn-hover-border-color: #6528e0;
        --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
        --bs-btn-active-color: var(--bs-btn-hover-color);
        --bs-btn-active-bg: #5a23c8;
        --bs-btn-active-border-color: #5a23c8;
      }
      .bd-mode-toggle {
        z-index: 1500;
      }
      .bd-mode-toggle .bi {
        width: 1em;
        height: 1em;
      }
      .bd-mode-toggle .dropdown-menu .active .bi {
        display: block !important;
      }




/* ======================================================= */
/* 3. ESTILOS DEL FOOTER OSCURO CON REDES SOCIALES */
/* ======================================================= */

/* 1. Fondo Oscuro (Ancho Completo) */
footer {
    background-color: var(--bs-dark); 
}

/* 2. Estilos generales de texto y títulos */
footer .container,
footer .text-muted {
    color: var(--bs-light) !important; 
}

/* Títulos de las columnas */
footer h5 {
    color: var(--bs-primary); /* Celeste Fuerte */
    border-bottom: 2px solid rgba(255, 255, 255, 0.1); 
    padding-bottom: 5px;
    margin-bottom: 20px;
    font-weight: 600; 
}

/* Enlaces (Links) */
footer .link-secondary {
    color: rgba(255, 255, 255, 0.7) !important; 
    transition: color 0.2s;
    font-weight: 300;
}

footer .link-secondary:hover {
    color: var(--bs-secondary) !important; /* Celeste Claro (al pasar el mouse) */
    text-decoration: none !important;
}

/* 3. Estilos de Iconos de Redes Sociales */
.social-links .social-icon {
    display: inline-block;
    color: var(--bs-white); /* Color por defecto: Celeste Fuerte */
    font-size: 1.5rem;
    margin-right: 15px; /* Espacio entre iconos */
    transition: color 0.3s ease-in-out, transform 0.2s;
}

.social-links .social-icon:hover {
    color: var(--bs-secondary); /* Resaltado: Celeste Claro */
    transform: translateY(-3px); /* Efecto sutil al pasar el mouse */
}

/* 4. Barra de Copyright */
.footer-bottom {
    /* Un gris muy oscuro para la franja inferior */
    background-color: #1a1a1a !important; 
}

.footer-bottom small.text-white-50 {
    color: rgba(255, 255, 255, 0.6) !important;
}





/* --- CLASES DE RESPONSIVIDAD ADICIONALES --- */

/* Ajuste de espacio para móviles en la sección HERO */
@media (max-width: 768px) {
    #hero-section {
        padding: 3rem 1rem !important; /* Más compacto en móvil */
        margin: 0 !important; /* Elimina márgenes laterales */
        min-height: 80vh; /* Asegura un buen espacio vertical */
    }
    
    .product-device, .product-device-2 {
        display: none !important; /* Ocultar los dispositivos en móvil */
    }
    
    .display-3 {
        font-size: 2.5rem !important; /* Reducir el tamaño del título principal */
    }
    
    /* Ajuste de los bloques de detalle para ocupar todo el ancho en móvil */
    .d-md-flex > div {
        margin: 0 !important;
        margin-bottom: 1rem !important;
    }
}