:root {
  --color-principal: #0f3368; /* Azul Oscuro */
  --color-secundario: #f8f9fa; 
  --color-texto: #212529; /* Negro de Bootstrap */
}

body {
  font-family: "Poppins", sans-serif;
  color: var(--color-texto);
  margin: 0; 
  padding: 0;
}

/* Navegación */
header .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}
.nav-item{
  padding: 0.5rem 1rem;
}
.nav-link {
  color: var(--color-texto);
  transition: color 0.3s;
}
.nav-link:hover {
  color: #26353b;
  text-decoration: underline;
  text-decoration-color: #26353b;
  text-underline-offset: 2px;

}
    
/* HERO */
.encabezado {
  background-image: url("../assets/img/bogota.jpg");
  background-size: cover;
  background-position: center; /* Asegura que la imagen esté centrada */
  background-repeat: no-repeat;
  text-align: center;
  padding: 9rem 1rem;
  color: white;
  min-height: 100vh; /* Uso de min-height es más flexible */
  display: flex; /* Añadir flex para centrar mejor el contenido */
  align-items: center;
  justify-content: center;

}


/* Asegurar que los títulos y párrafos dentro de HERO sean blancos */
.hero-section h1,
.hero-section p {
  color: white !important;
  text-shadow: 0px 1px 10px rgb(3, 3, 3); /* Añadir sombra de texto para mejor contraste */

}

/* SECCIONES (General) */
section {
  padding-top: 5rem;
  padding-bottom: 5rem;
  /* Mover el padding general aquí para todas las secciones */
}


.quienes {
  background-image: url("../assets/img/quienes-somos2.jpg");
  background-size: cover;
  background-position: center;
  color: white; 
  position: relative;
  height: 100vh; 
  ;
}
/* Capa de superposición para mejorar el contraste del texto */
.quienes::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(75, 212, 86, 0.356)!important;/* Capa oscura semi-transparente */
  z-index: -1;
  
}
.container.quienes {
  font-size: 100%; /* Asegurar tamaño de fuente adecuado */
  color: white; /* Asegurar que el texto dentro del contenedor sea blanco */
  text-align: center;
  align-items: center;
  justify-content: center;
}
.quienes h2 {
  color: white; /* Asegurar que el título sea blanco */
}

/* Cobertura Nacional */

.cobertura-nal  {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  color: rgb(2, 2, 2);
  min-height: 100vh;
}




/* Keyframes para la animación de aparición */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* SERVICIOS */

.unidades  {
  background-image: url("../assets/img/unidaes-negocio.jpg");
  background-size: cover;
  background-position: center;
  color: white;
  position: relative;
  z-index: 1;
  min-height: 100vh;
}
.unidades::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(199, 94, 162, 0.192); /* Overlay con color principal */
  z-index: -1;
}

.unidades  h2 {
  color: white !important; /* Asegurar que el texto del título sea blanco */
  font-size: 3rem;
} 
/* Mantén el CSS base que ya te di */
.card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Añade background-color a la transición */
    border: none;
    border-radius: 12px;
    overflow: hidden;
}

.card-img-top {
    height: 150px;
    object-fit: cover;
}

/* Efecto al pasar el mouse (Hover) */
.card:hover {
    transform: translateY(-15px); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.247); /* Sombra un poco más pronunciada */
    background-color: #f8f9fa; /* Un fondo ligeramente más claro */
    
}

/* Efecto hover en el título (opcional, pero mejora mucho la interactividad) */
.card:hover .card-title {
    color: #17163d; /* Color amarillo para el título */
    transition: color 0.1s ease-in-out;
}

/* Efecto hover en el texto del párrafo (opcional) */
.card:hover .card-text {
    color: #343a40; /* Un gris más oscuro para el texto */
    transition: color 0.1s ease-in-out;
}

/* Estilos para el efecto de relleno en los botones de navegación */
.button-fill {
    position: relative;
    overflow: hidden; /* Oculta el pseudo-elemento inicialmente */
    z-index: 1; /* Asegura que el texto esté por encima */
    transition: color 0.4s ease; /* Transición para el color del texto */
    text-align: left; /* Alinea el texto a la izquierda */
    border: 1px solid rgba(var(--bs-primary-rgb), 0.5); /* Borde sutil */
    color: var(--bs-primary); /* Color del texto inicial */
    font-weight: bold;
}

/* Pseudo-elemento que crea el efecto de relleno */
.button-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0; /* Empieza con ancho cero */
    height: 100%;
    background-color: var(--bs-primary); /* Color de relleno (cambia este si quieres otro) */
    z-index: -1; /* Envía el relleno detrás del texto */
    transition: width 0.4s ease; /* Transición para el efecto de relleno */
}

/* Efecto al pasar el mouse (hover) */
.button-fill:hover {
    color: #fff; /* Color del texto al rellenarse */
    background-color: transparent; /* Evita el color de fondo predeterminado de list-group-item:hover */
}

.button-fill:hover::before {
    width: 100%; /* Rellena completamente el botón */
}

/* Estado activo del botón */
.list-group-item.active {
    z-index: 2; /* Para que el activo se vea siempre por encima */
    color: #fff !important; /* Texto blanco para el botón activo */
    background-color: var(--bs-primary) !important; /* Fondo del color primario */
    border-color: var(--bs-primary) !important;
}

/* Para el botón activo, aseguramos que el pseudo-elemento no interfiera */
.list-group-item.active::before {
    width: 0 !important; /* Desactiva el pseudo-elemento para el botón activo */
}

/* Estilo para los cards de contenido */
.tab-content .card {
    border: none;
    transition: transform 0.3s ease;
}

.tab-content .card-img-top {
    height: 300px;
    object-fit: cover;
}



/* Responsabilidad Social Empresarial */
.resp {
  background-image: url("../assets/img/responsabilidad.jpg");
  background-size: cover;
  background-position: center;
  color: rgb(255, 255, 255) !important;
  position: relative;
  z-index: 1;
  padding-top: 80px;
  padding-bottom: 80px;
}

.resp::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(2, 26, 94, 0.521); /* Overlay más legible */
  z-index: -1;
}

/* Icon-box mejora visual */  
.icon-box {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;

}

.icon-box:hover {
  background: rgba(255, 255, 255, 0.863);
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgb(0, 0, 0);
}


/* ICON BOX */
.icon-box {
  background: rgba(0, 0, 0, 0.486);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  color: white; /* Asegurar que el texto dentro del box sea oscuro */
}

.icon-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
}

.icon-box i {
  font-size: 2.5rem;
  color: var(--color-principal); /* Usar el color principal */
}

/* contactanos */
.contactanos {
  background-image: url("../assets/img/contactanos.jpg");
  background-size: cover;
  background-position: center;
  color: rgb(0, 0, 0);
  font-style: normal;
  font-size: large;
  position: relative;
 
  min-height: 100vh;
}

.contactanos::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(250, 170, 84, 0.247);
}
.contactanos h2 {
  color: rgb(0, 0, 0) !important; 
}


/* Uso de selectores más específicos */
#contacto form .btn-primary {
  background-color: #212529;
  border: none;
  transition: background 0.3s ease;
}

#contacto form .btn-primary:hover {
  /* Usar un color secundario o un tono más oscuro del principal */
  background-color: #1d3455;
  opacity: 0.9;
}



/* FOOTER */
footer {
  background-color: #212529;
  color: #ccc;
  text-align: center;
  /* Eliminado padding fijo, uso de clases de Bootstrap: pt-5 pb-3 */
  font-size: 0.9rem;
}

footer a {
  color: white; /* Cambiado a blanco para mejor contraste en fondo oscuro */
  text-decoration: none;
  /* Removida la variable, usar color fijo para consistencia en el footer */
}

footer a:hover {
  color: var(--color-principal); /* Efecto hover con color principal */
  text-decoration: underline;
}


/* RESPONSIVE */
@media (max-width: 768px) {
  /* Corregido de 'header' a '.encabezado' (hero section) o dejar en 'section' */
  .encabezado {
    padding: 6rem 1rem;
  }
  .quienes .col-md-6 {
    width: 100%;
    margin-bottom: 2rem;
  }
}
/* --- BOTÓN WHATSAPP --- */
.whatsapp-float {
  position: fixed; bottom: 70px; right: 22px; z-index: 9999;
  width: 58px; height: 58px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background:#25d366; box-shadow:0 6px 18px rgba(0,0,0,0.18);
  opacity: 0; transform: translateY(20px); pointer-events:none;
  transition: opacity .35s ease, transform .35s ease;
}
.whatsapp-float.show { opacity:1; transform: translateY(0); pointer-events:auto; animation: pulse 1.8s infinite; }
.whatsapp-float img { width:40px; height:40px; filter: brightness(0) invert(1); }
@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37,211,102,0.45); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}