body {
  background-color: white;
  margin: 0; /* Elimina el margen por defecto */
  font-family: Arial, sans-serif; /* Establece la fuente predeterminada */
}

.contenedor-nav {
  width: 100%; /* Ocupa el ancho completo de la ventana */
  background-color: white; /* Un ligero gris para distinguir la barra de navegación */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra sutil para dar profundidad */
  padding: 10px 0; /* Espacio superior e inferior dentro del div */
}

nav {

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0; /* Elimina padding */
  margin: 0; /* Elimina margin */
}


/* Estilo del logo */
nav img {
  height: 55px; /* Altura del logo */
  margin-right: -5px; /* Espacio a la derecha del logo */
  margin-left: 10px;
}
/* Estilo de la lista de navegación */
nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center; /* Ajusta según sea necesario */
}

/* Estilo de los items de la lista */
nav ul li {
  margin-right: 23px; /* Espacio entre los ítems */
}

/* Estilo de los enlaces de la lista */
nav ul li a {
  text-decoration: none; /* Elimina el subrayado de los enlaces */
  color: #8d99ae; /* Color del texto de los enlaces */
  font-weight: bold; /* Negrita para los textos de los enlaces */
}

/* Añade un efecto al pasar el ratón sobre los enlaces */
nav ul li a:hover {
  color: #5ab3df; /* Cambia el color al pasar el ratón */
}

nav ul li {
  margin-right: 23px; /* Espacio entre los ítems */
}

 
.contenedor-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contenedor-nav nav ul {
  list-style-type: none;
  margin-left: 450px;
 }

 .contenedor-nav nav ul li {
  display: inline;
  margin-left: 20px; /
  
}

button {
  background-color: #168AAD; /* Color celeste */
  border: none; /* No border */
  color: white; /* Texto blanco */
  padding: 10px 20px; /* Padding alrededor del texto */
  text-align: center; /* Texto centrado */
  text-decoration: none; /* Sin decoración de texto */
  font-size: 26px; /* Tamaño del texto */
  margin: 4px 2px; /* Margen alrededor del botón */
  cursor: pointer; /* Cursor de mano al pasar el mouse */
  border-radius: 12px; /* Bordes redondeados */
  transition: all 0.3s ease; /* Transición suave para hover */
}

button:hover {
background-color: #52B69A; /* Un celeste un poco más oscuro al hacer hover */
}


.footer{
  background-color: #001524;
 width: 100%;
 height: 90px;
}

.footer-conteiner{
  display: flex;
  justify-content: space-between;
}
.logosFC {
  display: flex; /* Utiliza flexbox para los logos */
  align-items: center; /* Centra verticalmente los logos */
  margin-left: 5%;
}

.loguitosF {
  margin-right: 20px; /* Ajusta el espacio entre los logos */
}

.footer-izquierdo pre {
  color: #f2f3f2;
  font-family: "Nunito Sans", sans-serif;
  margin-left: 9%; 
  align-self: center; /* Centra verticalmente el texto izquierdo */
}


.contenedor-a {
  position: relative;
  width: 100%;
  height: 100%;
}

.imagenGigante {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center; 
  display: block;
}

.div1-contenedor-a {
  background-image: url("./asset/chicos-pileta.jpg ");
  height: 500px;
  background-size: cover;
  position: relative;
  background-attachment: fixed;
  z-index: 1;
  display: flex; 
  justify-content: center; 
  align-items: center; 
}

.div1-contenedor-a h1 {
  color: #f2f3f2;
  font-size: 5em;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
}

.logoF {
  position: absolute;
  top: 92%;
  left: 50%;
  transform: translate(-50%,50%);
  z-index: 2;
  height: 40px; 
  filter: drop-shadow( -3px  5px  4px #4b4a48);
  }


  .contenedor-6{
      margin-top: 100px;
      display: flex;
      justify-content: center;
      position: relative; 
      margin-left: -4%;
      
      }

      .card2{
          width: 300px;
          text-align: center;
          margin-top: 20px;
          box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1); /* Sombra ligera para 3D efecto */
          border-radius: 5%;
          margin-left: 3%;
          transition: transform 0.3s; /* Agrega una transición suave al cambio de escala */
        }
        .card2:hover {
          transform: scale(1.05); /* Agrandar al 105% del tamaño original */
        }
  
.card2 img {
  width: 100%; /* La imagen ocupará el 100% del ancho del contenedor */
  border-radius: 5%;
}


.card-info2{
 margin-left: 3%;
}
.card-info2:hover{
  transform: scale(1.05); /* Agrandar al 105% del tamaño original */
  text-align: center;
}

.card-info2 h3 {
  color: #0c837b;
  font-family: "Noto Sans JP", sans-serif;
}

.contenedor-4{
  display: flex;
  justify-content: center;
  color: #1E6091;

}

  
.contenedor-7 {
  display: flex;
  background-color: #f2f3f2;
  width: 100%;
 }
 .texto-niños{
   justify-content: center;
   margin-top: 7%;
  }
  
  .img-niños img {
    margin-left: 10%;
   width: 85%;
  }
 
  .parrafo-contenedor-7 pre{
   font-family: "Noto Sans JP", sans-serif;
   font-size: large;
  }
 
  .titulo-contenedor-7{
   font-family: "Noto Sans JP", sans-serif;
   font-size: 25px;
   text-align: center;
   color: #1E6091;
   margin-left: -20%;
   
  }

  .btn-contenedor-7{
      margin-left: 11%;
     }

  .titulo-listado-preguntas{
      text-align: center;
      font-size: 27px;
      color: #001524;
      text-shadow: 2px 2px 4px rgba(54, 54, 54, 0.5);
      
      
  }

.listado2{
  display: block;
  width: 50%;
}

.respuesta {
  display: none;
}
.pregunta-activa .respuesta {
  display: block;
}
  


#check{
  display: none;
}


.active{
  color:#52B69A;
}
.checkbtn{
  display: none;
}

.pregunta{
  cursor: pointer;
}

.pregunta:hover{
  color: #0c837b;
}

/*INICIO DE MEDIA QUERYS*/

/* Media Query para pantallas pequeñas */
/* Media Query para pantallas pequeñas */

@media (max-width: 730px) {
  /* Mostrar el botón de hamburguesa en pantallas pequeñas */
  .checkbtn {
    display: block;
    position: absolute;
    right: 20px;
   
    color:#001524;
  }

  /* Esconder el menú inicialmente (movido hacia arriba) */
  nav ul {
    position: absolute;
    width: 50%;
    height: auto;
    background: #168AAD;
    top: -100%; /* Menú está oculto fuera de la vista, en la parte superior */
    right: 0; /* Mover el menú al lado derecho */
    text-align: center;
    display:flex;
    transition: all 0.5s ease; /* Animación suave */
    z-index: 10; /* Coloca el menú por encima de la imagen */
    flex-direction: column; /* Asegura que los li se alineen en columna */
}

/* Mostrar el menú cuando el checkbox está activado (se despliega hacia abajo desde la derecha) */
#check:checked ~ ul {
  top: 80px; /* Menú visible, desplegándose desde arriba */
  right: 0; /* Mantenerlo en el lado derecho */
}

  /* Los enlaces en formato de bloque */
  nav ul li {
    margin: 20px 0;
    flex-direction: column;
  }

  /* Ajustar el tamaño de los enlaces en pantallas pequeñas */
  nav ul li a {
    font-size: 20px;
    color: #f2f3f2;
  }
  .active{
    color: #c7e4f3;
  }
  /*ahi termina el bendito menu hamburguesa*/
  .div1-contenedor-a {
    font-size: 60%;
  }

  .listado2{
    text-align: center;
  }
  .listado-preguntas {
    width: 100%; /* Ajusta el porcentaje según lo necesites */
    margin: 0 auto; /* Centra horizontalmente */
    text-align: center; /* Esto alineará el texto en el centro */
}

.preguntas-listado-preguntas {
    display: flex;
    flex-direction: column;
    align-items: center;
}


 
/*calculadoras*/
.contenedor-6{

  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.card-info2 h3{
  font-size: 140%;
}

.card2 img {
  width: 70%;
}

.contenedor-7{
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
}

.titulo-contenedor-7{
  font-size: 100%;
  margin-left: -1%;
}
.parrafo-contenedor-7 pre { 
  font-size: 90%; /* Reduce un poco el tamaño de la fuente en pantallas pequeñas */
    padding: 10px; /* Ajusta el padding para que el texto tenga más espacio */
    line-height: 1.4; /* Ajusta el espacio entre líneas para mejorar la legibilidad */
    white-space: normal; /* Asegura que el texto se ajuste dentro del contenedor */
    text-align: center;
}

.btn-contenedor-7{
  transform: scale(0.9); /* Reduce el tamaño del botón un 20% */
  margin-left: 13%;
}

.img-niños img{
  margin-left: 3%;
}

.footer-izquierdo{
  margin-top: 5%;
  font-size: 50%;
 
}
.logosFC{
  transform: scale(0.8);
}

.div1-contenedor-a{
  height: 26em;
  width: auto;
  margin-block: 2em;
}
  
  }