/* --- Variables de Color y Fuentes --- */
:root {
    --primary-color: #0d1661; 
    --accent-color: #f27405;  /* Naranja Trendy */
    --light-gray: #f8f9fa;   
    --white-color: #ffffff;
    --text-color: #343a40;
    font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif; /* Fuente más moderna */
}

body {
    padding-top: 76px; /* Ajuste para el navbar fijo */
    color: var(--text-color);
}

/* --- Componentes de Bootstrap Personalizados --- */
.logo {
    font-size: 1.8rem;
    color: var(--primary-color) !important;
    font-weight: 700; /* Más grueso */
}
.logo strong {
    color: var(--accent-color);
    font-weight: 700;
}

.navbar {
    transition: box-shadow 0.3s ease;
}

.btn-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    padding: 10px 25px;
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn-primary:hover {
    background-color: #d86804;
    border-color: #d86804;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.nav-link {
    font-weight: 500;
}
.nav-link.active {
    color: var(--accent-color) !important;
    font-weight: 700;
}
.icon-accent {
    color: var(--accent-color);
}

/* --- Estilos de Secciones --- */
#hero {
    background: linear-gradient(rgba(13, 22, 97, 0.85), rgba(13, 22, 97, 0.85)), url('images/lab3.jpg') no-repeat center center/cover;
    height: 80vh;
    min-height: 500px;
}
.page-title-section {
    background-color: var(--light-gray);
    padding: 5rem 0;
}
#cta {
    background-color: var(--primary-color);
}
.main-footer {
    background-color: var(--primary-color);
}

/* --- Mejoras de Tarjetas y Componentes --- */
.card {
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.175) !important;
}
.service-icon {
    font-size: 3rem;
    color: var(--accent-color);
}

/* --- BOTÓN WHATSAPP --- */
.whatsapp-float {
    position: fixed; width: 60px; height: 60px; bottom: 40px; right: 40px;
    background-color: #25d366; border-radius: 50px; text-align: center;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3); z-index: 100;
    display: flex; justify-content: center; align-items: center;
    transition: transform 0.3s ease;
}
.whatsapp-float:hover { transform: scale(1.1); }
.whatsapp-float img { width: 35px; height: 35px; }

/* --- SECCIÓN DE CONTADORES ANIMADOS --- */
#impacto { background-color: var(--light-gray); }
.counter-box { text-align: center; }
.counter-number { font-size: 3rem; font-weight: 700; color: var(--primary-color); }
.counter-box .counter-text { font-size: 1.1rem; color: var(--text-color); }

/* --- CLASES DE ANIMACIÓN AVANZADAS --- */
.animated {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-up { transform: translateY(40px); }
.fade-in-down { transform: translateY(-40px); }
.fade-in-left { transform: translateX(-40px); }
.fade-in-right { transform: translateX(40px); }
.zoom-in { transform: scale(0.9); }

/* Activador de animación */
.animated.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.value-card.animated:nth-child(3) {
  transition-delay: 0.4s;
}

/* --- Estilos para la nueva sección de contadores --- */
.counter-item {
  text-align: center;
}
.counter-number {
  font-size: 3.5rem;
  font-weight: bold;
  color: var(--accent-color); /* Color de acento para los números */
}
.counter-item p {
  font-size: 1.1rem;
  color: var(--primary-color);
  margin-top: 10px;
}

/* Retraso para animaciones en cascada */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }


/*          ESTILOS PARALAJE          */
#parallax-section {
    position: relative; /* Necesario para el overlay */
    min-height: 400px; /* Altura de la sección, ajústala a tu gusto */
    
    /* La imagen de fondo. ¡Cambia esta URL por una imagen tuya! */
    background-image: url('images/lab2.jpg');
    
    /* Magia del paralaje */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    /* Para asegurar que el contenido de texto esté por encima del overlay */
    z-index: 1; 
}

/* Creamos un overlay oscuro para que el texto blanco sea legible */
#parallax-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(235, 113, 14, 0.6);
    background-color: rgba(13, 22, 97, 0.6); /* Azul oscuro de tu paleta con 60% de opacidad */
    z-index: -1; /* Coloca el overlay detrás del contenido de texto */
}

/*          ESTILOS PARA VIDEO          */
/* --- SECCIÓN VIDEO HERO --- */
.video-container {
  position: relative;
  height: 60vh; /* Puedes ajustar esta altura */
  width: 100%;
  overflow: hidden;
  display: flex; /* Usamos flex para centrar el contenido de texto */
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--primary-color); /* Color de fondo mientras carga el video */
}

.video-background {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 1; /* Estará por debajo del overlay y el texto */
  transform: translateX(-50%) translateY(-50%);
  object-fit: cover; /* Asegura que el video cubra todo el espacio sin deformarse */
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  /* Usamos el color primario de tu paleta con 50% de opacidad */
  /*background-color: rgba(13, 22, 97, 0.5); */
  z-index: 2; /* Se posiciona entre el video y el texto */
}

.video-content {
  position: relative; /* Para que se posicione correctamente */
  color: var(--white-color);
  z-index: 3; /* La capa más alta, para que el texto sea visible */
  padding: 20px;
}

.video-content h1 {
  font-size: 3rem;
  font-weight: bold;
  color: var(--white-color); /* Forzamos el color blanco para el título */
  margin-bottom: 1rem;
}

.video-content p {
  font-size: 1.2rem;
  color: var(--white-color);
}