<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font-family: "Public Sans", sans-serif;
  font-size: 1.2rem;
  min-height: 100%;
  
  /* Fondo con las banderas de las Naciones */
  background-image: url('../img/background.jpg'); /* Ajusta la ruta a tu imagen */
  background-size: cover; /* Asegura que la imagen cubra el contenedor completo */
  background-position: center; /* Centra la imagen de fondo */
  
}

.grid-container > * {
  box-shadow: -1px 1px 7px 0px rgba(0, 0, 0, 0.75);
  border-radius: 4px;
  padding: 10px;
  text-align: center;

}

.header {
  grid-area: header;
  background-color: #1f3c90;  /* Azul institucional Uninaciones */
  color: #FFFFFF; /* Establece el color del texto a blanco */
  font-family: 'Montserrat', sans-serif; /* Usa Montserrat como la fuente, con una fuente sans-serif como alternativa */
}

.navbar {
  grid-area: navbar;
  background-color: rgba(255, 255, 255, 0.2); /* Color blanco con transparencia */

  backdrop-filter: blur(10px); /* Desenfoque del fondo */
  -webkit-backdrop-filter: blur(10px); /* Prefijo para soporte de Safari */
  border: 1px solid rgba(255, 255, 255, 0.18); /* Borde sutil para definir los bordes del navbar */
}


.navbar a i {
    margin-right: 5px; /* Espacio a la derecha del ícono para separarlo del texto */
    /* Puedes ajustar el tamaño de los íconos directamente o usar clases de FontAwesome */
}

/* Opcional: ajustar el tamaño de los íconos si lo consideras necesario */
.navbar a i {
    font-size: 1.1em; /* Ajusta este valor según necesites */
}



.sidebar {
  grid-area: sidebar;
  
  background-color: rgba(255, 255, 255, 0.2); /* Color blanco con transparencia */

  backdrop-filter: blur(10px); /* Desenfoque del fondo */
  -webkit-backdrop-filter: blur(10px); /* Prefijo para soporte de Safari */
  border: 1px solid rgba(255, 255, 255, 0.18); /* Borde sutil para definir los bordes del navbar */
}







/* Sidebar Styles */
.sidebar {
  grid-area: sidebar;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  margin-top: -1px; /* Solapa cada botón con el siguiente */
}

.sidebar a {
  display: block;
  padding: 10px 0;
  background-color: #1f3c90;
  color: white;
  text-decoration: none;
  transition: background-color 0.3s;
}

.sidebar a:hover {
  background-color: #0e2147;
}

.sidebar a i {
  margin-right: 8px;
  font-size: 1.1em;
}





/* Asegúrate de que .main tenga una altura definida para que Swiper se muestre correctamente */

.main {
  grid-area: main;
 background-color: rgba(255, 255, 255, 0.2); /* Color blanco con transparencia para lograr el efecto esmerilado */
  backdrop-filter: blur(10px); /* Aplica un desenfoque para el efecto de vidrio esmerilado */
  -webkit-backdrop-filter: blur(10px); /* Prefijo para soporte de Safari */
  border: 1px solid rgba(255, 255, 255, 0.18); /* Borde sutil para definir los bordes */

 
}



.footer {
  grid-area: footer;
  color: #FFFFFF; /* Establece el color del texto a blanco */
  background-color: #1f3c90; /* Azul institucional Uninaciones */
  font-size: 14px; /* Hace la fuente 2 puntos m叩s peque単a */
}


.grid-container {
  display: grid;
  gap: 10px;
  grid-template:
    "header"  130px
    "navbar"  50px
    "main"    auto
    "sidebar" 100px
    "footer"  50px;
}

/* Estilos para dispositivos más grandes primero (desktops) */
@media (min-width: 900px) {
  .grid-container {
    grid-template:
      "header  header header"  130px
      "navbar  main   sidebar" auto
      "footer  footer footer"  50px /
      200px    auto   200px;
  }
}

/* Estilos para dispositivos medianos (tablets) */
@media (min-width: 600px) and (max-width: 899px) { /* Esto asegura que solo afecte pantallas entre 600px y 899px */
  .grid-container {
    grid-template:
      "header  header" 130px
      "navbar  navbar" 50px
      "sidebar main"   auto
      "footer  footer" 50px /
      200px    auto;
  }
}

/* Estilos para dispositivos móviles (teléfonos) */
@media (max-width: 599px) { /* Esto asegura que solo afecte pantallas de hasta 599px */
 

  .grid-container {
    grid-template-areas:
      "header"
      "main"
      "navbar"
      "sidebar"
      "footer";
    grid-template-columns: 1fr; /* Hace que main ocupe todo el ancho */
    grid-template-rows: auto 1fr auto; /* Ajusta el tamaño de las filas según sea necesario */
  }

  .main {
    grid-area: main; /* Esto asegura que main ocupe el área definida */
  }
}



.logo-container {
  background-color: rgba(255, 255, 255, 0); /* Fondo blanco */
  border-radius: 10px; /* Esquinas redondeadas */
  display: inline-block; /* Hace que el contenedor se ajuste al tama単o del contenido */
  padding: 5px; /* Espaciado alrededor del logotipo */
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.1); /* Opcional: a単ade sombra para resaltar el cuadrado */
}

.logo-container img {
  display: block; /* Asegura que la imagen no tenga espacio extra alrededor */
  max-width: 100%; /* Asegura que la imagen se ajuste al contenedor */
  height: 100px; /* Mantiene las proporciones de la imagen */
}



/* Estilos existentes */

/* Agrega tus personalizaciones de Swiper aquí si es necesario */
.swiper {
  width: 100%;      /* Si lo quitamos deja de verse */
  height: 100%;      /* Si lo quitamos deja de verse */
  max-width: 62.5vw; /* Ajusta el ancho máximo basado en el ancho de la ventana del navegador */
   min-height: 75vh; /* Ejemplo basado en conversión y ajuste */

}

.swiper-slide {
  background-position: center;
  background-size: cover;
}



.slide-overlay {
  position: absolute;
  bottom: 10%; /* Ajusta la posición vertical de la cinta dentro de la diapositiva */
  left: 0;
  width: 100%; /* La cinta se extenderá a lo largo de todo el ancho de la diapositiva */
  background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente para la cinta */
  color: white; /* Color del texto */
  padding: 30px 0; /* Añade un poco de padding vertical, hace más ancha la cinta */
  align-items: flex-end; /* Alinea verticalmente hacia abajo */

  z-index: 2; /* Asegura que la cinta esté por encima de la imagen de la diapositiva */
}


.swiper-button-prev, .swiper-button-next, .swiper-pagination-bullet {
  z-index: 3;
}


.swiper-slide video.slide-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Esto hará que el video cubra la diapositiva como background-size: cover; */
  position: absolute;
  top: 0;
  left: 0;
}


  
  /* Centrado horizontal y vertical con flexbox */
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Alinea verticalmente hacia abajo */
  
  z-index: 2; /* Asegura que la cinta esté por encima de la imagen de la diapositiva */
}




/* Asegúrate de que el navbar no tenga padding que afecte el ancho de los elementos internos */
.navbar {
  padding: 0; /* Elimina cualquier padding interno del navbar */
  /* Resto de tus estilos del navbar aquí... */
}

/* Elimina las viñetas y los márgenes/paddings por defecto de la lista */
.navbar ul {
  list-style: none; /* Elimina las viñetas */
  margin: 0; /* Elimina cualquier margen por defecto */
  padding: 0; /* Elimina cualquier padding por defecto */
  width: 100%; /* Establece el ancho al 100% del elemento padre */
  /* Resto de tus estilos de ul aquí... */
}

/* Hace que cada elemento de la lista llene todo el ancho del contenedor del navbar */
.navbar li {
  width: 100%; /* Ajusta el ancho al 100% del navbar */
  margin: 0; /* Elimina los márgenes para evitar cualquier espacio extra */
  /* Resto de tus estilos de li aquí... */
}

/* Estiliza los enlaces dentro de la navbar para que ocupen todo el espacio disponible en el li */
.navbar a {
  display: block; /* Asegura que el enlace sea tratado como un bloque, ocupando todo el espacio horizontal */
  padding: 10px 0; /* Añade padding arriba y abajo, pero no a los lados, para llenar el li */
  background-color: #1f3c90; /* Color de fondo */
  color: white; /* Color de texto */
  text-decoration: none; /* Elimina el subrayado */
  width: 100%; /* Ajusta el ancho al 100% del li */
    transition: background-color 0.3s; /* Agrega una transición suave para el cambio de color */

  /* Resto de tus estilos de a aquí... */
}

/* Para que los botones se unan, ajusta los márgenes entre ellos */
.navbar li + li {
  margin-top: -1px; /* Solapa cada botón con el siguiente para eliminar el espacio entre ellos */
}


/* Estilos para que los bordes solo aparezcan en los lados exteriores */
.navbar a:first-child {
  border-top-left-radius: 5px; /* Bordes redondeados solo en la esquina superior izquierda del primer botón */
  border-top-right-radius: 5px; /* Bordes redondeados solo en la esquina superior derecha del primer botón */
}

.navbar a:last-child {
  border-bottom-left-radius: 5px; /* Bordes redondeados solo en la esquina inferior izquierda del último botón */
  border-bottom-right-radius: 5px; /* Bordes redondeados solo en la esquina inferior derecha del último botón */
}

/* Cambia el color de fondo al pasar el mouse sobre el botón */
.navbar a:hover {
  background-color: #0e2147; /* Un azul más oscuro para el efecto hover */
}


/* Botón azul con texto blanco */
.navbar a:nth-child(odd) {
  background-color: #1f3c90; /* Azul */
  color: white;
}

/* Botón blanco con texto azul */
.navbar a:nth-child(even) {
  background-color: white; /* Blanco */
  color: #1f3c90; /* Azul */
}

/* Cambia el color de fondo y texto al pasar el mouse sobre los botones */
.navbar a:nth-child(odd):hover {
  background-color: #0e2147; /* Un azul más oscuro para el hover */
  color: white;
}

.navbar a:nth-child(even):hover {
  background-color: #e6e6e6; /* Un gris claro para el hover */
  color: #1f3c90;
}










/* Asegurando visibilidad en tablets */
@media (min-width: 600px) and (max-width: 899px) {
  .navbar a {
    /* No cambia los estilos esenciales, pero puede ajustar el tamaño o el margen si es necesario */
    font-size: 1rem; /* Ajusta el tamaño del texto según sea necesario */
  }
}

/* Para dispositivos móviles */
@media (max-width: 599px) {
  /* Este espacio asegura que no se apliquen estilos que oculten los botones accidentalmente */
  .navbar, .sidebar {
    /* Si decides mostrar estos elementos en móviles, asegúrate de que sean completamente visibles */
    display: block; /* Cambiado para demostración */
  }
}

/* iPad Pro 11" en modo retrato y otros dispositivos con ancho similar */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 834px) 
  and (-webkit-min-device-pixel-ratio: 2) {

    .navbar a {
      /* Ajustes específicos para mejorar la visualización en iPad Pro 11" en modo retrato */
      padding: 10px 15px; /* Ajuste de ejemplo */
    }
}

/* Estilos para los iPads Pro y dispositivos con ancho similar */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 1112px) 
  and (-webkit-min-device-pixel-ratio: 2) {
  .navbar a {
    padding: 10px 15px; /* Ajusta el padding para estos dispositivos si es necesario */
  }
}





/* Estilo para la lista como cintas */
.lista-cintas {
    list-style: none; /* Elimina los bullets de la lista */
    padding: 0; /* Elimina el padding por defecto */
    margin: 0; /* Elimina el margen por defecto */
}

.lista-cintas li {
    background-color: rgba(59, 29, 241, 0.4); /* Color azul con transparencia para el fondo de cada cinta */
    color: white; /* Color de texto */
    padding: 15px 1px; /* Espaciado interno para cada cinta */
    margin-bottom: 1px; /* Espacio entre cintas */
    width: 100%; /* Ocupa todo el ancho disponible */
    backdrop-filter: blur(5px); /* Efecto de vidrio esmerilado */
    border-radius: 5px; /* Bordes ligeramente redondeados para un efecto más suave */
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease; /* Suaviza la transición de los efectos */
}

.lista-cintas a {
    color: white; /* Asegura que los enlaces sean de color blanco */
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    display: block; /* Hace que el enlace ocupe todo el espacio de la cinta */
}

.lista-cintas li:hover {
    background-color: rgba(59, 29, 241, 0.9); /* Color azul más sólido al hacer hover */
    backdrop-filter: blur(8px); /* Aumenta el desenfoque al hacer hover */
}

.lista-cintas i {
    margin-right: 8px; /* Ajusta el margen derecho de los íconos */
    width: 20px; /* Ajusta el ancho de los íconos si es necesario */
}
















<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font-family: "Public Sans", sans-serif;
  font-size: 1.2rem;
  min-height: 100%;
  
  /* Fondo con las banderas de las Naciones */
  background-image: url('../img/background.jpg'); /* Ajusta la ruta a tu imagen */
  background-size: cover; /* Asegura que la imagen cubra el contenedor completo */
  background-position: center; /* Centra la imagen de fondo */
  
}

.grid-container > * {
  box-shadow: -1px 1px 7px 0px rgba(0, 0, 0, 0.75);
  border-radius: 4px;
  padding: 10px;
  text-align: center;

}

.header {
  grid-area: header;
  background-color: #1f3c90;  /* Azul institucional Uninaciones */
  color: #FFFFFF; /* Establece el color del texto a blanco */
  font-family: 'Montserrat', sans-serif; /* Usa Montserrat como la fuente, con una fuente sans-serif como alternativa */
}

.navbar {
  grid-area: navbar;
  background-color: rgba(255, 255, 255, 0.2); /* Color blanco con transparencia */

  backdrop-filter: blur(10px); /* Desenfoque del fondo */
  -webkit-backdrop-filter: blur(10px); /* Prefijo para soporte de Safari */
  border: 1px solid rgba(255, 255, 255, 0.18); /* Borde sutil para definir los bordes del navbar */
}


.navbar a i {
    margin-right: 5px; /* Espacio a la derecha del ícono para separarlo del texto */
    /* Puedes ajustar el tamaño de los íconos directamente o usar clases de FontAwesome */
}

/* Opcional: ajustar el tamaño de los íconos si lo consideras necesario */
.navbar a i {
    font-size: 1.1em; /* Ajusta este valor según necesites */
}



.sidebar {
  grid-area: sidebar;
  
  background-color: rgba(255, 255, 255, 0.2); /* Color blanco con transparencia */

  backdrop-filter: blur(10px); /* Desenfoque del fondo */
  -webkit-backdrop-filter: blur(10px); /* Prefijo para soporte de Safari */
  border: 1px solid rgba(255, 255, 255, 0.18); /* Borde sutil para definir los bordes del navbar */
}


/* Asegúrate de que .main tenga una altura definida para que Swiper se muestre correctamente */

.main {
  grid-area: main;
 background-color: rgba(255, 255, 255, 0.2); /* Color blanco con transparencia para lograr el efecto esmerilado */
  backdrop-filter: blur(10px); /* Aplica un desenfoque para el efecto de vidrio esmerilado */
  -webkit-backdrop-filter: blur(10px); /* Prefijo para soporte de Safari */
  border: 1px solid rgba(255, 255, 255, 0.18); /* Borde sutil para definir los bordes */

 
}



.footer {
  grid-area: footer;
  color: #FFFFFF; /* Establece el color del texto a blanco */
  background-color: #1f3c90; /* Azul institucional Uninaciones */
  font-size: 14px; /* Hace la fuente 2 puntos m叩s peque単a */
}


.grid-container {
  display: grid;
  gap: 10px;
  grid-template:
    "header"  130px
    "navbar"  50px
    "main"    auto
    "sidebar" 100px
    "footer"  50px;
}

/* Estilos para dispositivos más grandes primero (desktops) */
@media (min-width: 900px) {
  .grid-container {
    grid-template:
      "header  header header"  130px
      "navbar  main   sidebar" auto
      "footer  footer footer"  50px /
      200px    auto   200px;
  }
}

/* Estilos para dispositivos medianos (tablets) */
@media (min-width: 600px) and (max-width: 899px) { /* Esto asegura que solo afecte pantallas entre 600px y 899px */
  .grid-container {
    grid-template:
      "header  header" 130px
      "navbar  navbar" 50px
      "sidebar main"   auto
      "footer  footer" 50px /
      200px    auto;
  }
}

/* Estilos para dispositivos móviles (teléfonos) */
@media (max-width: 599px) { /* Esto asegura que solo afecte pantallas de hasta 599px */
 

  .grid-container {
    grid-template-areas:
      "header"
      "main"
      "navbar"
      "sidebar"
      "footer";
    grid-template-columns: 1fr; /* Hace que main ocupe todo el ancho */
    grid-template-rows: auto 1fr auto; /* Ajusta el tamaño de las filas según sea necesario */
  }

  .main {
    grid-area: main; /* Esto asegura que main ocupe el área definida */
  }
}



.logo-container {
  background-color: white; /* Fondo blanco */
  border-radius: 10px; /* Esquinas redondeadas */
  display: inline-block; /* Hace que el contenedor se ajuste al tama単o del contenido */
  padding: 5px; /* Espaciado alrededor del logotipo */
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.1); /* Opcional: a単ade sombra para resaltar el cuadrado */
}

.logo-container img {
  display: block; /* Asegura que la imagen no tenga espacio extra alrededor */
  max-width: 100%; /* Asegura que la imagen se ajuste al contenedor */
  height: 100px; /* Mantiene las proporciones de la imagen */
}



/* Estilos existentes */

/* Agrega tus personalizaciones de Swiper aquí si es necesario */
.swiper {
  width: 100%;      /* Si lo quitamos deja de verse */
  height: 100%;      /* Si lo quitamos deja de verse */
  max-width: 62.5vw; /* Ajusta el ancho máximo basado en el ancho de la ventana del navegador */
   min-height: 75vh; /* Ejemplo basado en conversión y ajuste */

}

.swiper-slide {
  background-position: center;
  background-size: cover;
}



.slide-overlay {
  position: absolute;
  bottom: 10%; /* Ajusta la posición vertical de la cinta dentro de la diapositiva */
  left: 0;
  width: 100%; /* La cinta se extenderá a lo largo de todo el ancho de la diapositiva */
  background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente para la cinta */
  color: white; /* Color del texto */
  padding: 30px 0; /* Añade un poco de padding vertical, hace más ancha la cinta */
  align-items: flex-end; /* Alinea verticalmente hacia abajo */

  z-index: 2; /* Asegura que la cinta esté por encima de la imagen de la diapositiva */
}


.swiper-button-prev, .swiper-button-next, .swiper-pagination-bullet {
  z-index: 3;
}


.swiper-slide video.slide-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Esto hará que el video cubra la diapositiva como background-size: cover; */
  position: absolute;
  top: 0;
  left: 0;
}


  
  /* Centrado horizontal y vertical con flexbox */
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Alinea verticalmente hacia abajo */
  
  z-index: 2; /* Asegura que la cinta esté por encima de la imagen de la diapositiva */
}




/* Asegúrate de que el navbar no tenga padding que afecte el ancho de los elementos internos */
.navbar {
  padding: 0; /* Elimina cualquier padding interno del navbar */
  /* Resto de tus estilos del navbar aquí... */
}

/* Elimina las viñetas y los márgenes/paddings por defecto de la lista */
.navbar ul {
  list-style: none; /* Elimina las viñetas */
  margin: 0; /* Elimina cualquier margen por defecto */
  padding: 0; /* Elimina cualquier padding por defecto */
  width: 100%; /* Establece el ancho al 100% del elemento padre */
  /* Resto de tus estilos de ul aquí... */
}

/* Hace que cada elemento de la lista llene todo el ancho del contenedor del navbar */
.navbar li {
  width: 100%; /* Ajusta el ancho al 100% del navbar */
  margin: 0; /* Elimina los márgenes para evitar cualquier espacio extra */
  /* Resto de tus estilos de li aquí... */
}

/* Estiliza los enlaces dentro de la navbar para que ocupen todo el espacio disponible en el li */
.navbar a {
  display: block; /* Asegura que el enlace sea tratado como un bloque, ocupando todo el espacio horizontal */
  padding: 10px 0; /* Añade padding arriba y abajo, pero no a los lados, para llenar el li */
  background-color: #1f3c90; /* Color de fondo */
  color: white; /* Color de texto */
  text-decoration: none; /* Elimina el subrayado */
  width: 100%; /* Ajusta el ancho al 100% del li */
    transition: background-color 0.3s; /* Agrega una transición suave para el cambio de color */

  /* Resto de tus estilos de a aquí... */
}

/* Para que los botones se unan, ajusta los márgenes entre ellos */
.navbar li + li {
  margin-top: -1px; /* Solapa cada botón con el siguiente para eliminar el espacio entre ellos */
}


/* Estilos para que los bordes solo aparezcan en los lados exteriores */
.navbar a:first-child {
  border-top-left-radius: 5px; /* Bordes redondeados solo en la esquina superior izquierda del primer botón */
  border-top-right-radius: 5px; /* Bordes redondeados solo en la esquina superior derecha del primer botón */
}

.navbar a:last-child {
  border-bottom-left-radius: 5px; /* Bordes redondeados solo en la esquina inferior izquierda del último botón */
  border-bottom-right-radius: 5px; /* Bordes redondeados solo en la esquina inferior derecha del último botón */
}

/* Cambia el color de fondo al pasar el mouse sobre el botón */
.navbar a:hover {
  background-color: #0e2147; /* Un azul más oscuro para el efecto hover */
}


/* Botón azul con texto blanco */
.navbar a:nth-child(odd) {
  background-color: #1f3c90; /* Azul */
  color: white;
}

/* Botón blanco con texto azul */
.navbar a:nth-child(even) {
  background-color: white; /* Blanco */
  color: #1f3c90; /* Azul */
}

/* Cambia el color de fondo y texto al pasar el mouse sobre los botones */
.navbar a:nth-child(odd):hover {
  background-color: #0e2147; /* Un azul más oscuro para el hover */
  color: white;
}

.navbar a:nth-child(even):hover {
  background-color: #e6e6e6; /* Un gris claro para el hover */
  color: #1f3c90;
}










/* Asegurando visibilidad en tablets */
@media (min-width: 600px) and (max-width: 899px) {
  .navbar a {
    /* No cambia los estilos esenciales, pero puede ajustar el tamaño o el margen si es necesario */
    font-size: 1rem; /* Ajusta el tamaño del texto según sea necesario */
  }
}

/* Para dispositivos móviles */
@media (max-width: 599px) {
  /* Este espacio asegura que no se apliquen estilos que oculten los botones accidentalmente */
  .navbar, .sidebar {
    /* Si decides mostrar estos elementos en móviles, asegúrate de que sean completamente visibles */
    display: block; /* Cambiado para demostración */
  }
}

/* iPad Pro 11" en modo retrato y otros dispositivos con ancho similar */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 834px) 
  and (-webkit-min-device-pixel-ratio: 2) {

    .navbar a {
      /* Ajustes específicos para mejorar la visualización en iPad Pro 11" en modo retrato */
      padding: 10px 15px; /* Ajuste de ejemplo */
    }
}

/* Estilos para los iPads Pro y dispositivos con ancho similar */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 1112px) 
  and (-webkit-min-device-pixel-ratio: 2) {
  .navbar a {
    padding: 10px 15px; /* Ajusta el padding para estos dispositivos si es necesario */
  }
}





/* Estilo para la lista como cintas */
.lista-cintas {
    list-style: none; /* Elimina los bullets de la lista */
    padding: 0; /* Elimina el padding por defecto */
    margin: 0; /* Elimina el margen por defecto */
}

.lista-cintas li {
    background-color: rgba(59, 29, 241, 0.4); /* Color azul con transparencia para el fondo de cada cinta */
    color: white; /* Color de texto */
    padding: 15px 1px; /* Espaciado interno para cada cinta */
    margin-bottom: 1px; /* Espacio entre cintas */
    width: 100%; /* Ocupa todo el ancho disponible */
    backdrop-filter: blur(5px); /* Efecto de vidrio esmerilado */
    border-radius: 5px; /* Bordes ligeramente redondeados para un efecto más suave */
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease; /* Suaviza la transición de los efectos */
}

.lista-cintas a {
    color: white; /* Asegura que los enlaces sean de color blanco */
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    display: block; /* Hace que el enlace ocupe todo el espacio de la cinta */
}

.lista-cintas li:hover {
    background-color: rgba(59, 29, 241, 0.9); /* Color azul más sólido al hacer hover */
    backdrop-filter: blur(8px); /* Aumenta el desenfoque al hacer hover */
}

.lista-cintas i {
    margin-right: 8px; /* Ajusta el margen derecho de los íconos */
    width: 20px; /* Ajusta el ancho de los íconos si es necesario */
}