body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
}

/*header {
    color: #fff;
    text-align: center;
    padding: 10px;
}*/

.header {
    color: #fff;
    text-align: center;
    padding: 10px;
    background: url(img/carrusel2.jpg) no-repeat center;
    background-size: cover;
    min-height: 50vh;
}
nav {
    overflow: visible;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0); /* Fondo inicial transparente */
    padding: 10px;
    transition: background-color 0.5s ease;
    z-index: 1000; 
}

nav.scrolled {
  
    background-color: #fdfdfd;
    color: #fff7f7 !important;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav li {
    display: inline;
    margin-right: 10px;
}

nav a {
    text-decoration: none;
    color: #333;
}

.carousel-inner img {
    max-width: 85%;height:auto;
}

.carousel img{
    max-width: 100%;
    height: 30%;
}


.cartas img {
    width: 100px; /* Cambia este valor según tus necesidades */
    height: 100px; /* Cambia este valor según tus necesidades */
    margin: 0 auto; /* Esto centrará la imagen horizontalmente */
    max-width: 100%; /* La imagen no superará el ancho del contenedor */
    height: auto; /* La altura se ajustará automáticamente */
    
}


main {
    background-color: #eee;
    padding: 20px;
}

.main2 {
    background-color: #ffffff;
    padding: 20px;
}

.seccion {
    margin: 30px; /* Puedes ajustar la cantidad de margen según tus necesidades */
    
  }

footer {
    background-color: #055c22;
    color: #fff;
    text-align: center;
    padding: 20px;
    
}


/*Segundo bloque*/



@media only screen and (max-width: 800px) {
    .container {
        width: 100%;
    }
}

#navbar.navbar {
    transition: background-color 0.5s ease, color 0.5s ease;
    color: #fff;
}

#navbar.navbar.scrolled {
    background-color: #fdfdfd;
    color: #fff7f7 !important;
}



  .cardL {
    width: 100%;
    max-width: 300px; /* Establece un ancho máximo para evitar que el card sea demasiado ancho en pantallas grandes */
    margin: 0 auto; /* Centra el card horizontalmente en la pantalla */
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Evita que el contenido se desborde del card en pantallas pequeñas */
  }
  
  
  
  .card-content {
    padding: 20px;
  } 

/* Estilos para el texto justificado */
.texto-justificado {
    text-align: justify; /* Justificar el texto */
    margin: 350px; /* Márgenes grandes entre la izquierda y la derecha */
    margin-top: -200px;

  }

  /* Estilos adicionales para hacer el diseño más responsivo */
  @media screen and (max-width: 768px) {
    /* Media query para ajustar el diseño en dispositivos más pequeños */
    .texto-justificado {
      margin: 0 10px; /* Reducir los márgenes para pantallas más pequeñas */
      margin-bottom: -2000px; /* Margen inferior negativo para compensar */
    padding-bottom: 20px; 
      margin-top: 50px;
    }
  }

  .texto-centrado {
    text-align: center; /* Centrar el texto */
    margin: 300px; /* Márgenes grandes entre la izquierda y la derecha */
    margin-top: 100px;
  }

  /* Estilos adicionales para hacer el diseño más responsivo */
  @media screen and (max-width: 768px) {
    /* Media query para ajustar el diseño en dispositivos más pequeños */
    .texto-centrado {
      margin: 0 10px; /* Reducir los márgenes para pantallas más pequeñas */
      margin-top: 100px;
    }
  }


  /* Estilos para el texto alineado a la izquierda */
.texto-Izquierda {
  text-align: left; /* ezquierda el texto */
  margin: 400px; /* Márgenes grandes entre la izquierda y la derecha */
  margin-top: 200px;

}

/* Estilos adicionales para hacer el diseño más responsivo */
@media screen and (max-width: 768px) {
  /* Media query para ajustar el diseño en dispositivos más pequeños */
  .texto-Izquierda {
    margin: 0 10px; /* Reducir los márgenes para pantallas más pequeñas */
    margin-bottom: -2000px; /* Margen inferior negativo para compensar */
  padding-bottom: 20px; 
    margin-top: 50px;
  }
}

/* ... Resto de tus estilos ... */
.black-box {
  position: relative;
  /*border: 2px solid rgba(5, 5, 5, 0.911);*/
  height: 20vh; /* Establece la altura al 20% del tamaño de la ventana del navegador */
  width: 90%; /* Establece el ancho al 90% del tamaño del contenedor padre */
  max-width: 500px; /* Establece el ancho máximo para evitar que el cuadro se vuelva demasiado ancho en pantallas grandes */
  margin: 40px auto; /* Centra el cuadro horizontalmente */
  margin-bottom: -70px;
  padding: 20px; /* Agrega relleno dentro del cuadro */
  text-align: justify;
}

/* Media query para ajustar el diseño en pantallas más pequeñas */
@media (max-width: 768px) {
  .black-box {
      width: 80%; /* Reducir el ancho en pantallas más pequeñas */
      max-width: none; /* Eliminar el ancho máximo */
      height: auto; /* Permitir que la altura se ajuste automáticamente según el contenido */
      margin: 20px auto; /* Ajustar el margen para que sea más pequeño en pantallas más pequeñas */
      text-align: left;
      
  }
}
  
  .black2-box {
    position: relative;
    /*border: 2px solid rgba(5, 5, 5, 0.911);*/
    height: 20vh; /* Establece la altura al 30% del tamaño de la ventana del navegador */
    width: 90%; /* Establece el ancho al 90% del tamaño del contenedor padre */
    max-width: 500px; /* Establece el ancho máximo para evitar que el cuadro se vuelva demasiado ancho en pantallas grandes */
    margin: 40px auto; /* Centra el cuadro horizontalmente */
    margin-bottom: -90px;
    padding: 20px; /* Agrega relleno dentro del cuadro */
    text-align: justify;
  }

  /* Media query para ajustar el diseño en pantallas más pequeñas */
  @media (max-width: 768px) {
    .black2-box {
        width: 80%; /* Reducir el ancho en pantallas más pequeñas */
        max-width: none; /* Eliminar el ancho máximo */
        height: auto; /* Permitir que la altura se ajuste automáticamente según el contenido */
        margin: 20px auto; /* Ajustar el margen para que sea más pequeño en pantallas más pequeñas */
        text-align: left;
        
    }
  }

  .black3-box {
    position: relative;
    border: 2px solid black;
    left: 15px;
    top: 40px;
  }

  .black4-box {
    position: relative;
    /*border: 2px solid rgb(255, 255, 255);*/
    left: -3px;
    top: 40px;
    
  }
  .card2 {
    background-color: #055c22; /* Fondo verde claro */
}

.card3-3 {
  background-color: #160381; /* Fondo verde claro */
}

.card3 {
    background-color: #160381; /* Fondo verde claro */
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.card4 {
  background-color: #ffffff; /* Fondo verde claro */
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

  .black5-box {
    position: relative;
    border: 2px solid black;
    left: -20px;
    top: 40px;
    
  }
  
  .blue-box {
    position: absolute;
    background: rgb(2,0,36);
    background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(12,70,183,1) 54%, rgba(0,212,255,1) 100%);
    width: 200%;
    left: -4px;
    top: -4px;
    height: 70px;
  }

/*  p.peque {
    font-size: small;
    }

    p.medio {
        font-size:medium;
    }

    p.grande {
        font-size: large;
        Top: 40px;
        text-align: center;
    }

    p.mas-grande {
        font-size: x-large;
        Top: 80px;
        text-align: center;
    }
*/
h1{
  font-size: 7em; /* Puedes ajustar el tamaño del texto según tus necesidades */
  text-align: center;
  top: 100px;
  
}

h2 {
    font-size: 1em; /* Puedes ajustar el tamaño del texto según tus necesidades */
    text-align: left;
    
  }

  .escalera {
    display: flex;
    flex-direction: column;
    margin: 20px;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.escalera div {
    padding: 10px;
    margin: 5px;
    background-color: #3498db;
    color: #fff;
    text-align: center;
    font-size: 18px;
}




.card-header h2 {
  color: #12248d; /* Color del texto del título */
  margin-bottom: 10px;
  position: relative; /* Posición relativa para los números */
}

.card-header h2::before {
  content: attr(data-counter);
  position: absolute; /* Posición absoluta para el número */
  left: -15px; /* Ajuste a la izquierda */
  top: 50%; /* Centrado verticalmente */
  transform: translateY(-50%); /* Alinear verticalmente */
  border-radius: 50%; /* Hacer un círculo */
  background-color: #1e6091; /* Color de fondo para el círculo */
  color: #fff; /* Color del texto del número */
  width: 25px; /* Tamaño del círculo */
  height: 25px; /* Tamaño del círculo */
  text-align: center; /* Centrar el número */
  line-height: 25px; /* Alinear verticalmente el número */
  font-size: 14px; /* Tamaño del número */
}

.card-body{
  text-align: justify;
}

.justificado {
    text-align: justify;
  }

  .texto-azul {
    color: rgb(2, 2, 141); /* Establecer el color azul para el texto */
  }
  .texto-azul-claro {
    color: rgb(57, 57, 216); /* Establecer el color azul para el texto */
  }


  .enlaces-fijos {
    position: fixed;
    top: 50%; /* Ajusta la posición vertical según tu preferencia */
    right: 0;
    transform: translateY(-50%);
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    z-index: 1000;
    width: 150px; /* Ajusta el ancho según tus necesidades */
    border-top-left-radius: 20px;
    
    border-bottom-left-radius: 20px;
    
  }
  
  .enlaces-fijos a {
    display: block;
    margin-bottom: 10px;
    text-decoration: none;
    color: #333;
  }
  


  .redes img {
    max-width: 50px; /* Establece el ancho máximo de la imagen */
    height: auto; /* Asegura que la altura se ajuste automáticamente para mantener las proporciones */
  }

  .boton-color {
    background-color: #160381; /* Color específico (tomato en este caso) */
    color: #fff; /* Color del texto */
    padding: 10px 70px; /* Ajusta el relleno según sea necesario */
    border: none; /* Quita el borde para un aspecto más limpio */
    border-radius: 5px; /* Ajusta el radio del borde para un aspecto más redondeado */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
  }

  .boton-color:hover {
    background-color: #160381; /* Cambia el color al pasar el ratón sobre el botón */
    color: #fff; /* Color del texto */

  }