/* ================= CUSTOM INDUSTRIAL STYLES ================= */
.material-symbols-outlined { 
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; 
}

.filled-icon { 
  font-variation-settings: 'FILL' 1; 
}

.trace-line { 
  stroke: #0087F5; 
  stroke-opacity: 0.35; 
}

.trace-dot { 
  fill: #0087F5; 
}

/* Micro-animaciones para Componentes de Tarjetas (Efecto Overlock) */
.card-industrial {
  background-color: #ffffff;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.03);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.3s ease;
}

/* Efecto Elevación y Color de Borde al Hover */
.card-industrial:hover {
  transform: translateY(-6px);
  border-color: #0087F5;
  box-shadow: 0 20px 25px -5px rgba(0, 84, 152, 0.08), 0 10px 10px -5px rgba(0, 84, 152, 0.03);
}

/* Transiciones internas del contenedor de íconos */
.card-industrial .icon-container {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.card-industrial:hover .icon-container {
  background-color: #005498;
  color: #ffffff;
}

/* Transiciones del indicador en esquina */
.card-industrial .corner-arrow {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.card-industrial:hover .corner-arrow {
  background-color: #005498;
  color: #ffffff;
}

/* Animaciones estructurales UI */
@keyframes menuFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: menuFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ================= NAV LINK SMOOTH UNDERLINE ANIMATION ================= */
.nav-link {
  position: relative;
  color: #4B5768 !important; /* ink-soft */
  font-weight: 500 !important;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nav-link:hover, .nav-link.active {
  color: #005498 !important; /* brand-deep */
  font-weight: 600 !important;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #0087F5; /* brand */
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nav-link.active::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Encabezado Centrado */
.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3.5rem auto; /* Aumentado de 3rem a 5.5rem para mayor espacio abajo hacia las tarjetas */
}

.subtitle-badge {
  color: #005CE6;
  font-weight: 800;
  font-size: 1rem; /* Aumentado de 0.85rem a 1rem */
  letter-spacing: 2px; /* Mayor espaciado */
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.section-title {
  font-size: 2.25rem; /* Tamaño base en móvil */
  font-weight: 900;
  color: #0f172a;
  margin: 0.5rem 0;
  line-height: 1.15;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 3.25rem; /* Letras de título mucho más grandes en desktop */
  }
}

/* Línea Azul Horizontal Centrada y Ancha */
.blue-divider-wide {
  width: 90%;
  max-width: 250px; /* Tamaño inicial */
  height: 4px;
  background-color: #005CE6;
  border-radius: 2px;
  margin-top: 1.5rem; /* Margen superior para separarlo del texto de arriba */
  transition: max-width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-description {
  color: #64748b;
  font-size: 1.05rem; /* Ligeramente más grande */
  line-height: 1.6;
}

/* Estado Inicial de Animación Zoom-In Scroll Reforzado (Mayor impacto visual) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px) scale(0.85); /* Mayor escala de zoom y desplazamiento vertical */
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

/* Estado Activo al Hacer Scroll */
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.reveal-on-scroll.is-visible .blue-divider-wide {
  max-width: 700px; /* Se expande de forma reactiva hasta abarcar el ancho del texto */
}