/* Establece el color de fondo de todo el cuerpo de la página a blanco */
body {
  background-color: white;
  margin: 0; /* Elimina el margen por defecto */
  font-family: Arial, sans-serif; /* Establece la fuente predeterminada */
}

/* Estilo general del div contenedor */
.contenedor-nav {
  width: 100%;
  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;
}

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



.contenedor-3 {
  background-color: #f2f3f4;
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Espacio entre las cards */
  justify-content: center; /* Centra las cards en el contenedor si no ocupan todo el ancho */
  padding: 20px; /* Espacio alrededor del contenido dentro del contenedor-2 */
  margin-inline: 100px;
}
.loguitos-cards {
  width: 50px;
  transform: translateX(250%);
  margin-top: 20px;
  
}


.card {
  flex: 1 1 180px; /* Cada card puede crecer y encogerse pero base es 300px */
  display: flexbox;
  justify-content: center;
  border-radius: 8px; /* Bordes redondeados */
  overflow: hidden; /* Asegura que todo dentro de la card se quede dentro de los bordes redondeados */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1); /* Sombra ligera para 3D efecto */
  background-color: #f2f3f2; /* Fondo blanco para las cards */

  font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  transition: transform 0.5s ease;  
  
}

.card:hover {
  transform: scale(1.05); /* Ajusta la escala si es necesario */
  box-shadow: 0 0px 8px #99D98C;
}



.card-info {
  padding: 15px; /* Espacio interior alrededor del texto dentro de la card-info */
  text-align: center; /* Centra el texto horizontalmente */
  
}

.card h3 {
  margin: 10px 0; /* Espacio vertical arriba y abajo del título */
  color: #333; /* Color oscuro para el texto del título */
}

.card p {
  font-size: 14px; /* Tamaño de fuente para la descripción */
  color: #666; /* Color gris para el texto descriptivo */
  line-height: 1.5; /* Espaciado de línea para mejorar la legibilidad */
}


.contenedor-1,
.contenedor-2,
.contenedor-3,
.contenedor-a,
.contenedor-b,
.contenedor-c,
.contenedor-7 {
background-color: #f8f9fa;
margin-top: 20px; /* Espacio en la parte superior */
margin-bottom: 20px; /* Espacio en la parte inferior */
padding: 20px; /* Espacio alrededor del contenido */
}

.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-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; /
  
}
.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 */
  }
  
  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 */
    }
    .contenedor-6{
      margin-top: 100px;
      display: flex;
      justify-content: center;
      position: relative; 
     margin-left: -3%;
      }

      .contenedor-7 {
        display: flex;
        background-color: #f2f3f2;
        width: 97%;
       }
       .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%;
        }
       
        
      .contenedor-4{
        display: flex;
        justify-content: center;
        color: #1E6091;
      
      }



/* Contenedor principal de las tarjetas de productos */
.contenedor-cards-productos {
background-color: #f2f3f4;
padding: 20px;
display:flex;
flex-direction: column;
align-items: center;

}

/* Título del contenedor de las tarjetas de productos */
.titulo-contenedor-cards-productos h2 {
text-align: center;
color:#001524;
margin-bottom: 20px;
font-size: 50px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); /* Sombra para el texto */
}

/* Fondo de las tarjetas de productos */
.fondo-card-producto {
display: flex;
flex-direction: column;
gap: 5em; /* Espacio entre las tarjetas */
width: 90%;
max-width: 110em;

}

/* Estilos de cada tarjeta de producto */
.card-producto {
display: flex;
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
background-color: #fff;
padding: 20px;
}

/* Estilos de la sección izquierda de la tarjeta */
.izquierda-card-producto {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}

.izquierda-card-producto img {
width: 60%; /* Ancho de la imagen */
height: auto;
margin-bottom: 10px;
}

/* Estilos de la sección derecha de la tarjeta */
.derecha-card-producto {
text-align: left;
}

.derecha-card-producto p {
font-size: 14px;
color: #666;
line-height: 1.5;
}

.derecha-card-producto h3 {
margin-top: 20px;
color: #333;
}

.derecha-card-producto h4 {
color: #666;
}

.filasCards{
display: flex;
flex-direction: row;
gap: 2em; /* Espacio entre las cards en la fila */
justify-content: center; /* Centra las cards en la fila */
 /* Permite que las cards envuelvan a la siguiente línea si es necesario */
}
;


#check{
  display: none
  important!;
}

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

/*INICIO DE MEDIA QUERYS*/

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

@media (max-width: 730px) {
  #check{
    display: none;
  }
 /* 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: 2; /* 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*/
 


.filasCards{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.card-producto{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
/*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);
}


  
  }