/* Reset y estilos base */
* {
    margin: 0; /* Elimina los márgenes predeterminados */
    padding: 0; /* Elimina el padding predeterminado */
    box-sizing: border-box; /* Incluye el padding y el borde en el tamaño total del elemento */
  }

  body {
    font-family: 'Segoe UI', system-ui, sans-serif; /* Fuente principal del cuerpo */
    background-color: #ffffff; /* Fondo blanco */
    color: #0a0a1a; /* Color de texto principal */
    line-height: 1.6; /* Altura de línea para mejor legibilidad */
    overflow-x: hidden; /* Oculta el desbordamiento horizontal */
  }

  /* Animación de fondo */
  .background-animation {
    position: fixed; /* Fija el fondo en la pantalla */
    top: 0; /* Alinea el fondo en la parte superior */
    left: 0; /* Alinea el fondo a la izquierda */
    width: 100%; /* Ocupa el ancho completo */
    height: 100%; /* Ocupa la altura completa */
    background: linear-gradient(45deg, #ffffff 0%, #f0f8ff 100%); /* Gradiente de fondo */
    z-index: -1; /* Coloca el fondo detrás de otros elementos */
  }


  .background-animation::after {
    content: ''; /* Crea un pseudo-elemento */
    position: absolute; /* Posición absoluta respecto al contenedor */
    top: 0; /* Alinea en la parte superior */
    left: 0; /* Alinea a la izquierda */
    width: 100%; /* Ocupa el ancho completo */
    height: 100%; /* Ocupa la altura completa */
    background: radial-gradient(circle at center, transparent 0%, #ffffff 70%); /* Gradiente radial */
  }

  /* Estilos del encabezado */
  .main-header {
    padding: 4rem 2rem 1.5rem; /* Espaciado interno del encabezado (reducido el margen inferior) */
    text-align: center; /* Centra el texto */
    background: rgba(255, 255, 255, 0.9); /* Fondo semi-transparente */
    backdrop-filter: blur(10px); /* Efecto de desenfoque */
    border-bottom: 1px solid #0047AB; /* Borde inferior azul cobalto */
    box-shadow:
      0 0 10px rgba(0, 71, 171, 0.6), /* Sombra interna */
      0 0 20px rgba(0, 71, 171, 0.5), /* Sombra media */
      0 0 40px rgba(0, 71, 171, 0.4); /* Sombra externa (efecto halógeno) */
    margin-top: 2.5rem; /* Margen superior */
  }
/* Estilos del encabezado */
.main-header {
  padding: 0.5rem 2rem; /* Padding reducido (altura y ancho) */
  margin-top: 1rem; /* Margen superior ajustado */
  margin-bottom: 0.5rem; /* Margen inferior reducido */
  text-align: center; /* Centra el contenido del encabezado */
    backdrop-filter: blur(10px); /* Efecto de desenfoque */
    border-bottom: 1px solid #0047AB; /* Borde inferior azul cobalto */
    box-shadow:
      0 0 10px rgba(0, 71, 171, 0.6), /* Sombra interna */
      0 0 20px rgba(0, 71, 171, 0.5), /* Sombra media */
      0 0 40px rgba(0, 71, 171, 0.4); /* Sombra externa (efecto halógeno) */
    margin-top: 2.5rem; /* Margen superior */
  }

/* Estilos para el contenedor del logo */
.logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Estilos para la imagen del logo */
.logo-image {
  width: 50px; /* Tamaño de la imagen */
  height: 50px; /* Tamaño de la imagen */
  border-radius: 50%; /* Forma circular */
  object-fit: cover; /* Ajusta la imagen sin deformarla */
  border: 2px solid #0047AB; /* Borde azul cobalto */
  box-shadow: 0 0 10px rgba(0, 71, 171, 0.5); /* Sombra suave */
}

.purpose-image {
  max-width: 100%; /* La imagen no superará el ancho de su contenedor */
  height: auto; /* La altura se ajustará automáticamente para mantener la proporción */
  display: block; /* Asegura que la imagen se comporte como un bloque */
  margin: 1px auto; /* Separa la imagen 5px del contenedor y la centra */
  border-radius: 15px; /* Redondeo de las esquinas */
  box-shadow: 0px 4px 10px rgba(0, 71, 171, 1); /* Sombra sutil azul cobalto */
  background-color: white; /* Asegura que el fondo dentro del borde sea blanco */
}

.value-image img {
  max-width: 100%; /* La imagen no superará el ancho de su contenedor */
  height: auto; /* La altura se ajustará automáticamente para mantener la proporción */
  display: block; /* Asegura que la imagen se comporte como un bloque */
  margin: 1px auto; /* Separa la imagen 1px del contenedor y la centra */
  border-radius: 5px; /* Redondeo de las esquinas */
  box-shadow: 0px 4px 10px rgba(0, 71, 171, 1) !important; /* Sombra sutil azul cobalto */
  background-color: white; /* Asegura que el fondo dentro del borde sea blanco */
}

/* Estilos para el título */
.main-header h1 {
  font-size: 2rem;
  background: linear-gradient(90deg, #0047AB, #000000);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center; /* Centra el texto del título */
  margin: 0; /* Elimina el margen predeterminado */
  padding: 0; /* Elimina el padding predeterminado */
}

/* Estilos para el subtítulo */
.tagline {
  font-size: 1rem;
  color: #0047AB;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center; /* Centra el texto del subtítulo */
  margin: 0; /* Elimina el margen predeterminado */
  padding: 0; /* Elimina el padding predeterminado */
}


  /* Estilos de sección */
  .section {
    padding: 4rem 2rem; /* Espaciado interno */
    background: #ffffff; /* Fondo blanco */
  }

  .section-banner {
    text-align: center; /* Centra el texto */
    margin-bottom: 3rem; /* Margen inferior */
  }

  .section-banner h2 {
    font-size: 1.8rem; /* Tamaño de fuente */
    color: #0047AB; /* Color del texto */
    margin-bottom: 0.8rem; /* Margen inferior */
  }

  .banner-line {
    width: 80px; /* Ancho reducido de la cinta */
    height: 4px; /* Altura de la cinta */
    background: linear-gradient(90deg, #0047AB, #000000); /* Gradiente de fondo */
    margin: 0 auto; /* Centra horizontalmente */
    border-radius: 2px; /* Bordes redondeados */
  }

  /* Estilos de tarjeta de propósito */
  .purpose-card {
    display: flex; /* Usa flexbox para alinear elementos */
    background: #ffffff; /* Fondo blanco */
    border-radius: 20px; /* Bordes redondeados */
    overflow: hidden; /* Oculta el desbordamiento */
    border: 1px solid rgba(0, 71, 171, 3); /* Borde sutil */
    margin: 0 auto; /* Centra horizontalmente */
    max-width: 1200px; /* Ancho máximo */
    position: relative; /* Posición relativa */
    filter: drop-shadow(0 0 15px rgba(0, 71, 171, 1)); /* Efecto neón fijo */
  }

  .purpose-card::before {
    content: ''; /* Crea un pseudo-elemento */
    position: absolute; /* Posición absoluta */
    inset: 0; /* Ocupa todo el espacio */
    border-radius: 20px; /* Bordes redondeados */
    padding: 1px; /* Espaciado interno */
    background: linear-gradient(45deg, #ffffff, #ffffff); /* Gradiente de fondo */
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0); /* Máscara para el borde */
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0); /* Máscara para el borde */
    -webkit-mask-composite: xor; /* Combinación de máscaras */
    mask-composite: exclude; /* Combinación de máscaras */
    pointer-events: none; /* Ignora eventos de ratón */
  }

  .purpose-visual {
    flex: 1; /* Ocupa 1 parte del espacio disponible */
    padding: 2rem; /* Espaciado interno */
    display: flex; /* Usa flexbox para alinear elementos */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    background: linear-gradient(135deg, #f0f8ff, #ffffff); /* Gradiente de fondo */
  }

  .tech-circle {
    width: 200px; /* Ancho del círculo */
    height: 200px; /* Altura del círculo */
  }

  .tech-icon {
    width: 100%; /* Ocupa el ancho completo */
    height: 100%; /* Ocupa la altura completa */
  }

  .tech-icon .pulse {
    fill: none; /* Sin relleno */
    stroke: #0047AB; /* Color del trazo */
    stroke-width: 2; /* Grosor del trazo */
    animation: pulse 2s infinite; /* Animación de pulso */
  }

  .tech-icon .shield {
    fill: none; /* Sin relleno */
    stroke: #00BFFF; /* Color del trazo */
    stroke-width: 3; /* Grosor del trazo */
    animation: draw 3s infinite; /* Animación de dibujo */
  }

  .tech-icon .check {
    fill: none; /* Sin relleno */
    stroke: #0047AB; /* Color del trazo */
    stroke-width: 3; /* Grosor del trazo */
    stroke-linecap: round; /* Extremos redondeados */
    stroke-linejoin: round; /* Uniones redondeadas */
    animation: check 3s infinite; /* Animación de verificación */
  }

  .purpose-content {
    flex: 2; /* Ocupa 2 partes del espacio disponible */
    padding: 3rem; /* Espaciado interno */
    background: #ffffff; /* Fondo blanco */
  }

  .purpose-content h3 {
    font-size: 1.6rem; /* Tamaño de fuente */
    margin-bottom: 1rem; /* Margen inferior */
    color: #0047AB; /* Color del texto */
  }

  .purpose-content p {
    font-size: 0.95rem; /* Tamaño de fuente */
    line-height: 1.5; /* Altura de línea */
    color: #0a0a1a; /* Color del texto */
  }

  .neon-button {
    background: #ffffff; /* Fondo blanco */
    border: 2px solid #0047AB; /* Borde */
    color: #0047AB; /* Color del texto */
    padding: 0.8rem 1.5rem; /* Espaciado interno */
    border-radius: 25px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar */
    transition: all 0.3s ease; /* Transición suave */
    margin-top: 1.5rem; /* Margen superior */
    font-size: 1rem; /* Tamaño de fuente */
    text-transform: uppercase; /* Texto en mayúsculas */
    letter-spacing: 1px; /* Espaciado entre letras */
  }

  .neon-button:hover {
    background: #0047AB; /* Cambia el fondo al pasar */
    box-shadow: 0 0 20px rgba(0, 71, 171, 0.3); /* Sombra al pasar */
    color: #ffffff; /* Cambia el color del texto al pasar */
  }

  /* Estilos de la cuadrícula de valores */
  .values-grid {
    display: grid; /* Usa CSS Grid */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Columnas responsivas */
    gap: 2rem; /* Espacio entre elementos */
    max-width: 1200px; /* Ancho máximo */
    margin: 0 auto; /* Centra horizontalmente */
  }

  .value-card {
    aspect-ratio: 1; /* Relación de aspecto 1:1 */
    display: flex; /* Usa flexbox para alinear elementos */
    flex-direction: column; /* Alinea elementos en columna */
    align-items: center; /* Centra horizontalmente */
    justify-content: flex-start; /* Alinea elementos al inicio */
    background: #ffffff; /* Fondo blanco */
    border-radius: 20px; /* Bordes redondeados */
    padding: 1.5rem; /* Espaciado interno */
    text-align: center; /* Centra el texto */
    transition: all 0.3s ease; /* Transición suave */
    border: 1px solid rgba(0, 71, 171, 3); /* Borde sutil */
    position: relative; /* Posición relativa */
    overflow: hidden; /* Oculta el desbordamiento */
    filter: drop-shadow(0 0 15px rgba(0, 71, 171, 0.7)); /* Efecto neón fijo */
  }

  .value-card::before {
    content: ''; /* Crea un pseudo-elemento */
    position: absolute; /* Posición absoluta */
    inset: 0; /* Ocupa todo el espacio */
    border-radius: 20px; /* Bordes redondeados */
    background: linear-gradient(45deg, #ffffff, #ffffff); /* Gradiente de fondo */
    padding: 1px; /* Espaciado interno */
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0); /* Máscara para el borde */
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0); /* Máscara para el borde */
    -webkit-mask-composite: xor; /* Combinación de máscaras */
    mask-composite: exclude; /* Combinación de máscaras */
    pointer-events: none; /* Ignora eventos de ratón */
  }

  .value-image {
    width: 100%; /* Ocupa el ancho completo */
    height: 50%; /* Ocupa la mitad de la altura */
    margin: 0 0 1.5rem; /* Margen inferior */
    border-radius: 20px; /* Bordes redondeados */
    overflow: hidden; /* Oculta el desbordamiento */
    background: #f0f8ff; /* Fondo azul claro */
    display: flex; /* Usa flexbox para alinear elementos */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
  }

  .value-image svg {
    width: 100%; /* Ocupa el ancho completo */
    height: 100%; /* Ocupa la altura completa */
    object-fit: contain; /* Ajusta la imagen sin deformarla */
  }

  .value-card h4 {
    font-size: 1.2rem; /* Tamaño de fuente */
    margin-bottom: 0.8rem; /* Margen inferior */
    color: #0047AB; /* Color del texto */
  }

  .value-card p {
    font-size: 0.9rem; /* Tamaño de fuente */
    line-height: 1.4; /* Altura de línea */
    color: #0a0a1a; /* Color del texto */
  }

  /* Estilos de contenido adicional */
  .extra-content {
    max-height: 0; /* Altura inicial */
    overflow: hidden; /* Oculta el contenido */
    transition: max-height 0.3s ease-out; /* Transición suave */
    margin-top: 1rem; /* Margen superior */
  }

  .extra-content p {
    margin-top: 1rem; /* Margen superior */
    line-height: 1.6; /* Altura de línea */
  }

  /* Animaciones */
  @keyframes pulse {
    0% { transform: scale(1); opacity: 1; } /* Estado inicial */
    50% { transform: scale(1.1); opacity: 0.7; } /* Escala y opacidad */
    100% { transform: scale(1); opacity: 1; } /* Vuelve al estado inicial */
  }

  @keyframes draw {
    0% { stroke-dasharray: 0 1000; } /* Inicia sin trazo */
    100% { stroke-dasharray: 1000 1000; } /* Completa el trazo */
  }

  @keyframes check {
    0% { stroke-dasharray: 0 100; } /* Inicia sin trazo */
    100% { stroke-dasharray: 100 100; } /* Completa el trazo */
  }



  /* Efecto al pasar el mouse */
  .sub-nav-item:hover {
    box-shadow:
        0 0 10px rgba(0, 71, 171, 0.6), /* Sombra interna más intensa */
        0 0 25px rgba(0, 71, 171, 0.5), /* Sombra media más intensa */
        0 0 50px rgba(0, 71, 171, 0.4); /* Sombra externa más intensa */
  }

  /* ===== TÍTULO CENTRADO CON GRADIENTE ===== */
  .modal-body h2.text-uppercase {
    background: linear-gradient(90deg, #0047AB, #000000) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    width: fit-content !important;
    margin: 0 auto !important; /* Centrado real */
    display: block !important; /* Necesario para margin:auto */
  }

  /* ===== SUBTÍTULO CENTRADO AZUL COBALTO ===== */
  .modal-body p.item-intro.text-muted {
    color: #0047AB !important;
    text-align: center !important; /* Centrado explícito */
    width: 100% !important;
  }



  /* Diseño responsivo */
  @media (max-width: 767px) {
    .section {
      padding: 2rem 0.5rem; /* Espaciado interno reducido */
    }

    .main-header {
      padding: 6rem 2rem 2rem; /* Espaciado interno reducido */
    }

    .main-header h1 {
      font-size: 1.6rem; /* Tamaño de fuente reducido */
    }

    .tagline {
      font-size: 0.9rem; /* Tamaño de fuente reducido */
    }

    .section-banner h2 {
      font-size: 1.5rem; /* Tamaño de fuente reducido */
    }

    .values-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.5rem;
      width: 100%;
      max-width: 100%;
    }

    .value-card {
      padding: 0.8rem; /* Espaciado interno reducido */
      border-radius: 10px; /* Bordes redondeados reducidos */
    }

    .value-image {
      height: 50%; /* Altura reducida */
      margin-bottom: 0.8rem; /* Margen inferior reducido */
    }

    .value-card h4 {
      font-size: 0.9rem; /* Tamaño de fuente reducido */
      margin-bottom: 0.4rem; /* Margen inferior reducido */
    }

    .value-card p {
      font-size: 0.75rem; /* Tamaño de fuente reducido */
      line-height: 1.3; /* Altura de línea reducida */
    }

    .purpose-card {
      filter: drop-shadow(0 0 15px rgba(0, 71, 171, 1)); /* Efecto neón fijo */
      flex-direction: column; /* Cambia a disposición en columna */
      margin: 0 0.5rem; /* Margen reducido */
    }

    .purpose-visual {
      width: 100%; /* Ancho completo */
      height: 120px; /* Altura reducida */
      padding: 1rem; /* Espaciado interno reducido */
    }

    .tech-circle {
      width: 100px; /* Ancho reducido */
      height: 100px; /* Altura reducida */
    }

    .purpose-content {
      padding: 1.2rem; /* Espaciado interno reducido */
    }

    .purpose-content h3 {
      font-size: 1.1rem; /* Tamaño de fuente reducido */
      margin-bottom: 1rem; /* Margen inferior reducido */
    }

    .purpose-content p {
      font-size: 0.75rem; /* Tamaño de fuente reducido */
      line-height: 1.5; /* Altura de línea reducida */
    }
  }

  @media (max-width: 500px) {
    .section {
      padding: 0.2rem 0.1rem; /* Espaciado interno reducido */
    }

    .main-header {
      padding: 0.2rem 0.2rem 0.2rem; /* Espaciado interno reducido */
    }

    .main-header h1 {
      font-size: 1rem; /* Tamaño de fuente reducido */
    }

    .tagline {
      font-size: 0.5rem; /* Tamaño de fuente reducido */
    }

    .section-banner h2 {
      font-size: 1rem; /* Tamaño de fuente reducido */
    }

    .section-banner {
      margin-bottom: 0.1rem; /* Margen inferior reducido */
    }

    .banner-line {
      width: 40px; /* Ancho reducido para pantallas pequeñas */
      height: 2px; /* Altura reducida para pantallas pequeñas */
    }

    .values-grid {
      grid-template-columns: repeat(2, 1fr); /* Dos columnas en dispositivos muy pequeños */
      gap: 0.3rem; /* Espacio reducido */
    }

    .value-card {
      padding: 0.5rem; /* Espaciado interno reducido */
      border-radius: 8px; /* Bordes redondeados reducidos */
      aspect-ratio: 1; /* Relación de aspecto 1:1 */
    }

    .value-image {
      height: 50%; /* Altura reducida */
      margin-bottom: 0.5rem; /* Margen inferior reducido */
    }

    .value-card h4 {
      font-size: 0.7rem; /* Tamaño de fuente reducido */
      margin-bottom: 0.3rem; /* Margen inferior reducido */
    }

    .value-card p {
      font-size: 0.65rem; /* Tamaño de fuente reducido */
      line-height: 1.2; /* Altura de línea reducida */
    }

    .purpose-card {
      margin: 0 0.3rem; /* Margen reducido */
    }

    .purpose-visual {
      height: 80px; /* Altura reducida */
      padding: 0.4rem; /* Espaciado interno reducido */
    }

    .tech-circle {
      width: 60px; /* Ancho reducido */
      height: 60px; /* Altura reducida */
    }

    .purpose-content {
      padding: 0.6rem; /* Espaciado interno reducido */
    }

    .purpose-content h3 {
      font-size: 0.7rem; /* Tamaño de fuente reducido */
      margin-bottom: 0.3rem; /* Margen inferior reducido */
    }

    .purpose-content p {
      font-size: 0.65rem; /* Tamaño de fuente reducido */
      line-height: 1.2; /* Altura de línea reducida */
    }

    .neon-button {
      padding: 0.3rem 0.6rem; /* Espaciado interno reducido */
      font-size: 0.65rem; /* Tamaño de fuente reducido */
      margin-top: 0.6rem; /* Margen superior reducido */
    }

    .extra-content p {
      font-size: 0.65rem; /* Tamaño de fuente reducido */
      line-height: 1.2; /* Altura de línea reducida */
      margin-top: 0.6rem; /* Margen superior reducido */
    }
  }