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

.contenedor-1 {
  display: flex;
  background-color: #f2f3f4; /* Color de fondo por defecto en caso de que la imagen no cargue */
  background-image: url("./asset/IMAGENES CLEANPOOL/casa de campo3.jpg"); /* Ruta a la imagen de fondo */
  background-size: cover; /* Asegura que la imagen cubra todo el div */
  background-position: center; /* Centra la imagen dentro del div */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-size: 99%;
}



.div1-contenedor-a {
  color: white; /* Cambia el color del texto para mejorar contraste */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra de texto para hacerlo más legible sobre fondos claros */
  padding: 20px; /* Espaciado interno para no pegar el texto a los bordes */
  font-size: 2em; /* Ajusta el tamaño del texto según necesites */
  text-align: center; /* Alinea el texto al centro */
}



.div1-contenedor-1{
  width: 100%; /* Asegura que ambas secciones ocupen todo el ancho disponible */
  display: flex; /* Esto garantiza que se comporten como bloques, aunque <section> ya lo hace por defecto */
  margin: 5rem 0; /* Añade un espacio vertical entre las secciones */
  font-family: "Noto Sans JP", sans-serif;
  text-shadow: 2px 2px 4px #001524;
}
.div2-contenedor-1 {
  color: #f2f3f4;
  width: 100%; /* Asegura que ambas secciones ocupen todo el ancho disponible */
  display: block; /* Esto garantiza que se comporten como bloques, aunque <section> ya lo hace por defecto */
  margin-left: 5%;
  margin-right: 10%;
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);
 }
 .div2-contenedor-1 h3{
  
  font-size: 2rem;
 }
 .div2-contenedor-1 h2{
  font-size: 3rem;
 }

 .div2-contenedor-1 p{
  font-size: 1rem;
 }




 .titulo-div1-contenedor-c{
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);
 }



.contenedor-b > div {
  text-align: center;
  padding: 20px;
}

.contenedor-b img {
  max-width: 50%;
  height: auto;
  display: block;
  margin: auto;
}


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-CentradoV  {
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center;     /* Centra el contenido verticalmente si es necesario */
    height: 10%;    
    margin-left: 17em;
}

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

.contenedor-2 {
  display: flex;
  padding: 20px; 
  margin-inline: 20%;
  font-size: 30px;
  text-align: center;
  color: #037971;
  opacity: 80%;
margin-top: 1em;

}

.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(210%);
  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-3,
.contenedor-a,
.contenedor-b,
.contenedor-c {
  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 */
}

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

}
.contenedor-5{
display: flex;
justify-content: center; /* Centra las cards en el contenedor si no ocupan todo el ancho */
padding: 20px; 
margin-inline: 20%;
font-size: 30px;
text-align: center;
opacity: 80%;
color: #037971;
background-color: rgb(251, 253, 255);}

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

.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: 1%;
  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-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%;
 }

 

.contenedor-4-bis {
  justify-content: left;
}
.parrafo-contenedor-4 {
  justify-content: left;
}

.titulo-contenedor-4 {
  justify-content: left;
  font-size: 25px;
}

.btn-contenedor-4 {
  justify-content: left;
}

.contenedor-5 {
  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 */
}

.cabecera-div2-contenedor-d {
    display: flex;
    align-items: center;
    padding: 10px;
}
.img-cabecera-div2-contenedor-d img {
    width: 100px;
    height: auto;
    margin-right: 20px;
}
.texto-cabecera-div2-contenedor-d h1 {
    margin: 0;
    padding: 0;
}

.carrousel-contenedor-d {
  width: 50%;  /* Asegura que el contenedor ocupe todo el ancho disponible */
  height: 100%; /* Puede definir una altura específica si es necesario */
  overflow: hidden; /* Oculta cualquier parte de la imagen que sobresalga */
}

.carrousel-contenedor-d img {
  width: 100%;  /* Hace que la imagen sea tan ancha como el contenedor */
  height: 100%; /* Hace que la imagen sea tan alta como el contenedor */
  object-fit: cover; /* Asegura que la imagen cubra todo el espacio sin deformarse */
}

.loguito-div1-contenedor-d img {
  width: 100px;
  height: auto;
  margin-right: 20px;
}



.div1-contenedor-1 img{
  width: 600px;
 
  margin-left: 20px;
  
}

.div2-contenedor-1{
  display: flexbox;
  align-items: center;
}


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




#check{
  display: none;
}


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

.button-CentradoV2{
  display: none;
}

.contenedor-1{
  margin-top: 1em;
}


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

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center; /* Ajusta según sea necesario */
}
#check {display: none important!;
}

.titulo-consideraciones {
  background-color: #e0f7fa; /* Fondo de color suave */
  color: #168AAD;
   /* Color del texto */
    padding: 10px 15px; /* Espacio alrededor del texto */
    border-radius: 5px; /* Bordes redondeados */
    text-align: center; /* Centrar el texto */
    font-size: 50px;
    font-weight: bold; /* Hacer el texto más grueso */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para resaltar */
}
/*ACA EMPIEZAN LAS MEDIAQUERYS
VOY A ESCRIBIR MUCHO
PARA QUE SE ENCUENTRE MAS FACIL 
DESPUES*/

@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: 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*/
 
  .div2-contenedor-1 {
    color: #f2f3f4;
    width: 100%; /* Asegura que ambas secciones ocupen todo el ancho disponible */
    display: block; /* Esto garantiza que se comporten como bloques, aunque <section> ya lo hace por defecto */
     
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);
   }

  .div1-contenedor-1 img{
    width: 80%;  /* Ajusta el ancho de la imagen al 100% del contenedor o pantalla */
    height: auto; /* Mantiene la proporción original de la imagen */
    object-fit: contain; /* Asegura que toda la imagen sea visible dentro del contenedor */
    margin-left: 10%;
    margin-top: 3em;
  }

.div2-contenedor-1{
  margin-block: -4em;
}

  .div1-contenedor-1 div{
    margin-top: -3em;
    max-height: 20em;  /* Ajusta este valor según tu diseño */
     
  }

  .div2-contenedor-1{
  display: block;
  align-items: center;
  }

  .div2-contenedor-1 h3 {
   
    font-size: 85%;
  }
  .div2-contenedor-1 h2 {

    font-size: 130%;
   }
   .div2-contenedor-1 p {
    display: none;
   }

   .button-CentradoV  {
   display: none;
}

.button-CentradoV2{
  display: flex;
    justify-content: center; /* Centra el div horizontalmente */
    align-items: center; /* (Opcional) Si también deseas centrar verticalmente */
  
}



.contenedor-2{
  background-color: white;
  margin-inline: 0%;
  
  
}
.contenedor-2 div p{
  font-size: 70%;
}

/*loguitos raros*/
.contenedor-3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 65%;
  margin-left: 12%;
}

.card {
  background-color: #d5dff1;
  margin-bottom: 20px;
  padding: 2px; /* Ajusta el espacio interno para hacerlo más compacto */
}

.loguitos-cards {
  width: 19%; /* Ajusta el tamaño de las imágenes */
  height: 16%; /* Asegúrate de que las imágenes sean cuadradas */
}

.card-info h3 {
  font-size: 1.2rem; /* Ajusta el tamaño del texto del título */
}

.card-info p {
  font-size: 1rem; /* Ajusta el tamaño del texto del párrafo */
}

.titulo-cards{
  font-size: 60%;
  margin-bottom: -7%;
}


.contenedor-5{
  margin-top: 5%;
}
 
/*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);
}
  

  }