/* ============================
   Estilo General para la Fila
   ============================ */

/* Configura el contenedor de filas para el diseño flexible */
.row {
    display: flex;
    /* Usa el modelo de caja flexible */
    flex-wrap: wrap;
    /* Permite que los elementos se ajusten a la siguiente línea si no caben en una sola */
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    /* Ajusta el margen derecho para compensar el espaciado */
    margin-left: calc(-0.5 * var(--bs-gutter-x));
    /* Ajusta el margen izquierdo para compensar el espaciado */
  }

  /* Configura el ancho y espaciado de los elementos hijos en la fila */
  .row>* {
    flex: 0 0 33.333%;
    /* Cada elemento ocupa el 33.333% del ancho de la fila para mantener la cuadrícula 3x3 */
    max-width: 33.333%;
    /* Asegura que el ancho máximo del elemento no exceda el 33.333% */
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    /* Aplica espaciado a la derecha del elemento */
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    /* Aplica espaciado a la izquierda del elemento */
    box-sizing: border-box;
    /* Incluye el padding y el borde en el cálculo del ancho y alto total del elemento */
  }

  /* ============================
     Estilo General para el Submenú
     ============================ */

  /* Configura la posición del contenedor del submenú */
  .sub-menu-container {
    position: absolute;
    /* Posiciona el contenedor de manera absoluta respecto al contenedor padre */
    top: 100%;
    /* Coloca el contenedor justo debajo del elemento padre */
    left: 0;
    /* Alinea el contenedor con el borde izquierdo del contenedor padre */
    right: 0;
    /* Alinea el contenedor con el borde derecho del contenedor padre */
    z-index: 100;
    /* Establece un índice z alto para que el submenú se muestre sobre otros elementos */
  }

  /* Estilo del submenú desplegable completo */
  .sub-nav-fullwidth {
    display: none;
    /* Oculta el submenú por defecto */
    position: absolute;
    /* Posiciona el submenú de manera absoluta respecto al contenedor padre */
    top: 100%;
    /* Coloca el submenú justo debajo del elemento padre */
    left: 0;
    /* Alinea el submenú con el borde izquierdo del contenedor padre */
    right: 0;
    /* Alinea el submenú con el borde derecho del contenedor padre */
    background-color: rgba(0, 0, 0, 0.1);
    /* Aplica un fondo semitransparente al submenú */
    border-top: 2px solid #ddd;
    /* Añade una línea de borde en la parte superior del submenú */
    padding: 20px 0;
    /* Aplica relleno vertical al submenú */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Aplica una sombra sutil al submenú */
    z-index: 1000;
    /* Establece un índice z alto para que el submenú se muestre sobre otros elementos */
    width: 100vw;
    /* Establece el ancho del submenú para que ocupe el 100% del ancho de la vista */
    box-sizing: border-box;
    /* Incluye el padding y el borde en el cálculo del ancho total */
  }

  /* Muestra el submenú al pasar el ratón sobre el elemento dropdown */
  .nav-item.dropdown:hover .sub-nav-fullwidth {
    display: block;
    /* Muestra el submenú cuando el elemento dropdown está en estado hover */
  }

  /* Configura el contenedor de fluidos dentro del submenú */
  .sub-nav-fullwidth .container-fluid {
    max-width: 28%;
    /* Establece el ancho máximo del contenedor para que ocupe el 100% */
    margin: 0;
    /* Elimina el margen del contenedor */
    padding: 0 5px;
    /* Aplica relleno horizontal al contenedor */
  }

  /* Ajuste para disminuir la distancia entre columnas */
  .sub-nav-fullwidth .container-fluid .row .col {
    padding: 0px;
    /* Relleno interno en cada columna */
    border: 1px solid #ddd;
    /* Borde de color claro entre columnas */
    border-radius: 5px;
    /* Bordes redondeados si lo deseas */
    margin: 0 2px;
    /* Ajustar el margen horizontal entre columnas (de 5px a 2px) */
    box-sizing: border-box;
    /* Incluye el padding y el borde en el cálculo del ancho total de la columna */
  }

  /* ============================
     Estilo para la Cuadrícula 3x3
     ============================ */

  /* Configura la cuadrícula para el submenú */
  .sub-nav-fullwidth .row {
    display: grid;
    /* Usa el modelo de caja de cuadrícula */
    grid-template-columns: repeat(3, 1fr);
    /* Configura una cuadrícula de 3 columnas */
    gap: 15px;
    /* Establece el espacio entre los elementos de la cuadrícula */
    padding: 10px 0;
    /* Aplica relleno vertical a la cuadrícula */
    width: 100%;
    /* Establece el ancho de la cuadrícula al 100% del contenedor padre */
    box-sizing: border-box;
    /* Incluye el padding y el borde en el cálculo del ancho total */
  }

  /* Estilo para los elementos individuales en el submenú */
  .sub-nav-item {
    display: flex;
    /* Usa el modelo de caja flexible */
    flex-direction: column;
    /* Organiza el contenido en una columna */
    align-items: center;
    /* Alinea los elementos al centro horizontalmente */
    justify-content: center;
    /* Alinea los elementos al centro verticalmente */
    text-decoration: none;
    /* Elimina el subrayado de los enlaces */
    color: #000;
    /* Establece el color del texto a negro */
    width: 100%;
    /* Establece el ancho del ítem al 100% del contenedor de la cuadrícula */
    padding: 10px;
    /* Aplica relleno alrededor del contenido del ítem */
    box-sizing: border-box;
    /* Incluye el padding y el borde en el cálculo del ancho total */
    background-color: rgba(255, 255, 255, 0.9);
    /* Aplica un fondo blanco semitransparente */
    border-radius: 10px;
    /* Aplica bordes redondeados al ítem */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Aplica una sombra sutil al ítem */
    margin: 5px auto;
    /* Aplica un margen superior e inferior de 5px, y centra el ítem horizontalmente */
    font-size: 12px;
    /* Tamaño de fuente reducido por defecto */
    text-align: center;
    /* Alinea el texto al centro */
    height: 50vh;
    /* Ajuste de altura para pantallas pequeñas, ocupa el 30% de la altura de la ventana */
  }

  /* Estilo para el ítem del submenú al pasar el ratón sobre él */
  .sub-nav-item:hover {
    background-color: rgba(0, 123, 255, 0.8);
    /* Cambia el color de fondo al pasar el ratón */
    color: #fff;
    /* Cambia el color del texto a blanco */
    transform: translateY(-5px);
    /* Mueve el ítem hacia arriba al pasar el ratón */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    /* Aplica una sombra más pronunciada al pasar el ratón */
  }

  /* Estilo para las imágenes dentro del ítem del submenú */
  .sub-nav-item img {
    margin-bottom: 5px;
    /* Aplica un margen inferior a las imágenes */
    width: 200px;
    /* Establece el ancho de las imágenes por defecto */
    height: 200px;
    /* Establece la altura de las imágenes por defecto */
    transition: transform 0.3s;
    /* Aplica una transición suave para la transformación */
  }

  /* Estilo para las imágenes al pasar el ratón sobre el ítem del submenú */
  .sub-nav-item:hover img {
    transform: scale(1.1);
    /* Amplía la imagen al pasar el ratón */
  }



  /* Estilos para los recuadros de servicios */
  .sub-nav-item {
    box-shadow:
        0 0 5px rgba(0, 71, 171, 0.5), /* Sombra interna suave */
        0 0 15px rgba(0, 71, 171, 0.4), /* Sombra media */
        0 0 30px rgba(0, 71, 171, 0.3); /* Sombra externa (efecto halógeno) */
    transition: box-shadow 0.3s ease; /* Transición suave */
  }

  /* 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 */
  }



  /* ============================
     Media Queries para Pantallas Grandes (PC)
     ============================ */
  @media (min-width: 1200px) {
    .sub-nav-fullwidth .row {
      grid-template-columns: repeat(3, 1fr);
      /* Mantiene la cuadrícula 3x3 en pantallas grandes */
      gap: 20px;
      /* Ajusta el espacio entre elementos en pantallas grandes */
    }

    .sub-nav-item {
      max-width: 200px;
      /* Establece el ancho máximo del ítem */
      height: 200px;
      /* Establece la altura del ítem */
      font-size: 14px;
      /* Tamaño de fuente ajustado */
    }

    .sub-nav-item img {
      width: 80px;
      /* Tamaño de ícono más grande */
      height: 80px;
      /* Tamaño de ícono más grande */
    }

    .text-center .section-heading {
      font-size: 2.5rem;
      /* Tamaño de fuente para el título principal */
      margin-bottom: 1.25rem;
      /* Margen inferior del título */
    }

    .text-center .section-subheading {
      font-size: 1.25rem;
      /* Tamaño de fuente para el subtítulo */
    }

    /* ============================
     Estilos específicos para la sección de servicios
     ============================ */
    #servicios {
      padding: 1rem 0;
      /* Ajusta el padding solo para la sección de servicios */
    }

  }

  /* ============================
     Media Queries para Pantallas Medias (Tablets)
     ============================ */
  @media (max-width: 1199px) and (min-width: 768px) {
    .sub-nav-fullwidth .row {
      grid-template-columns: repeat(3, 1fr);
      /* Mantiene la cuadrícula 3x3 en pantallas medias */
      gap: 15px;
      /* Ajusta el espacio entre elementos en pantallas medias */
    }

    .sub-nav-item {
      max-width: 150px;
      /* Establece el ancho máximo del ítem */
      height: 150px;
      /* Establece la altura del ítem */
      font-size: 14px;
      /* Tamaño de fuente ajustado */
    }

    .sub-nav-item img {
      width: 60px;
      /* Tamaño de ícono ajustado */
      height: 60px;
      /* Tamaño de ícono ajustado */
    }

    .text-center .section-heading {
      font-size: 2rem;
      /* Tamaño de fuente para el título principal */
      margin-bottom: 1rem;
      /* Margen inferior del título */
    }

    .text-center .section-subheading {
      font-size: 1.1rem;
      /* Tamaño de fuente para el subtítulo */
    }

    /* ============================
     Estilos específicos para la sección de servicios
     ============================ */
    #servicios {
      padding: 8rem 0;
      /* Ajusta el padding solo para la sección de servicios */
    }

  }

  /* ============================
     Media Queries para Pantallas Pequeñas (Móviles)
     ============================ */
  @media (max-width: 767px) {
    .sub-nav-fullwidth .row {
      grid-template-columns: repeat(3, 1fr);
      /* Mantiene la cuadrícula 3x3 en pantallas pequeñas */
      gap: 0.5rem;
      /* Ajusta el espacio entre elementos en pantallas pequeñas */
    }

    .sub-nav-item {
      max-width: 100%;
      /* Asegura que el ítem ocupe el 100% del ancho disponible */
      height: auto;
      /* Permite que la altura del ítem se ajuste automáticamente */
      font-size: 7px;
      /* Tamaño de fuente ajustado */
    }

    .sub-nav-item img {
      width: 7cap;
      /* Tamaño de ícono ajustado */
      height: 70px;
      /* Tamaño de ícono ajustado */
    }

    .text-center .section-heading {
      font-size: 0.7rem;
      /* Tamaño de fuente para el título principal */
      margin-bottom: 0.3rem;
      /* Margen inferior del título */
    }

    .text-center .section-subheading {
      font-size: 0.7rem;
      /* Tamaño de fuente para el subtítulo */
    }

    /* ============================
     Estilos específicos para la sección de servicios
     ============================ */
    #servicios {
      padding: 1rem 0;
      /* Ajusta el padding solo para la sección de servicios */
    }

  }