/* VARIABLES *

/* definimos los colores que vamos a usar mediante :root */
:root {
  --blanco: #ffffff; /*color blanco*/
  --negro: #1f1f21; /*color negro*/
  --grisFondoSeccionOpiniones: #151515;
  --gris: #454545; /*color gris*/
  --Amarillo: #d5a326;
  --Azul: #496d8c;
}

/*fonts*/
@font-face {
  font-family: icomoon;
  src: url(../icons/Fonts/icomoon.woff);
}

/* RESET */

/*para toda la pagina aplicamos la siguiente propiedad */
* {
  margin: 0; /* quitar margen */
  padding: 0; /* quitar padding */
  box-sizing: border-box; /* tamaño de caja "box-sizing" indicamos al tamaño de caja, "border" mantener el tamaño de los elementos y "box" indica el tipo caja para no se rompa el diseño */
}

/* para el body aplicamos la siguiente propiedad */
body,
html {
  font-family: "icomoon", sans-serif; /* el estilo de fuente */
  font-size: 15px; /* Tamaño de fuente por defecto */
}

/* para las listas aplicamos la siguiente propiedad */
ul,
li {
  list-style: none; /* elimina las viñetas de las listas */
}

/* para todos los titulos aplicamos la siguiente propiedad */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 100%; /* altura de la fuente */
}

/* para los enlaces aplicamos la siguiente propiedad */
a {
  text-decoration: none; /* elimina el subrayado de los enlaces */
}

/* para las imagenes aplicamos la siguiente propiedad */
img {
  max-width: 100%; /* Evita que crezca mas y la imagen se pixele */
}

/* para titulo aplicamos la siguiente propiedad */
.tittle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tittle h1 {
  margin-top: 400px;
  font-size: 60px;
  margin-bottom: 41px;
}

.tittle h2 {
  font-size: 32px;
  margin-bottom: 450px;
}

/* INTRO: EL CIELO ES EL LIMITE */
/* contenedor */
.intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--negro);
  margin-top: 0;
  padding-top: 100px;
}

.intro h3 {
  font-size: 30px;
  margin-bottom: 25px;
  margin-right: 7%;
  margin-left: 7%;
}

.intro p {
  font-size: 20px;
  margin-right: 7%;
  margin-left: 7%;
  margin-bottom: 60px;
}

/* SECCION: AVENTURAS IMPRESIONANTES */
/* contenedor */
.aventure {
  background-color: var(--negro);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.aventure h3 {
  margin-top: 60px;
  font-size: 30px;
  margin-bottom: 30px;
}

.container_img {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.card_1,
.card_2,
.card_3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 75px;
  margin-right: 75px;
}

.container_label {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
  gap: 15px;
  margin-top: 25px;
  margin-bottom: 25px;
}
.container_label h4{
  color: white;
}

.boton {
  margin-bottom: 60px;
}
/* SECCION RECURSOS */
/* contenedor */
.resource {
  background-color: var(--negro);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.column {
  margin-bottom: 30px;
}

.resource h3 {
  margin-top: 20px;
  font-size: 30px;
  margin-bottom: 30px;
}

.colum h3 {
  font-size: 20px;
}

.container_colum {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 200px;
}

.container_colum h3 {
  margin-bottom: 15px;
}

.container_colum button {
  margin-top: 25px;
}

.container_colum p {
  text-align: justify;
}

.container_colum .black {
  background-color: var(--negro);
  border: 1px solid var(--blanco);
}

.colum {
  width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* SECCION OPINIONES */
/* contenedor */
.valoration {
  margin-bottom: 60px;
}

.preguntas {
  padding-top: 40px;
  margin: 0;
}

.preguntas h3 {
  font-size: 30px;
  margin-bottom: 25px;
  margin-right: 7%;
  margin-left: 7%;
}

.preguntas p{
  font-size: 20px;
  margin-right: 7%;
  margin-left: 7%;
  margin-bottom: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: justify;
}

/* SECCION SOCIOS */
.partners {
  background-color: var(--negro);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 40px;
}

.container_partners {
  width: 80%;
  gap: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.container_partners img {
  width: 180px;
}

.partners h3 {
  font-size: 30px;
  margin-bottom: 25px;
  margin-right: 7%;
  margin-left: 7%;
}

.partners p {
  font-size: 20px;
  margin-right: 7%;
  margin-left: 7%;
  margin-bottom: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: justify;
}

.socios h3 {
  font-size: 25px !important;
}

.container_partners .booking {
  margin-right: 7%;
  margin-left: 7%;
}

/* SECCION OPINIONES */
.valoration {
  padding-top: 40px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: var(--grisFondoSeccionOpiniones);
}

.container_google {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
  gap: 60px;
}

.google {
  gap: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 10px;
  margin-right: 10px;
}

.google img.logo {
  height: 40px;
}

.google img.star {
  height: 16px;
}

/* SECCION PREGUNTAS */
/* contenedor */
.preguntas {
  padding-top: 40px;
  background-color: var(--negro);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.preguntas h2 {
  margin-bottom: 20px;
}

.preguntas p {
  margin-bottom: 20px;
  font-size: 20px;
  margin-right: 7%;
  margin-left: 7%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: justify;
}

.preguntas boton{
  margin-bottom: 40px;
}

@media only screen and (max-width: 1060px) {
  .container_colum {
    gap: 30px;
  }
}

@media only screen and (max-width: 1092px) {
  .tittle {
    text-align: center;
  }

  .tittle h1 {
    font-size: 40px;
    margin-top: 200px;
  }

  .tittle h2 {
    font-size: 20px;
    margin-bottom: 250px;
  }

  .container_img {
    flex-direction: column;
  }

  .opinions p, .preguntas p {
    width: 300px;
  }
}

@media (max-width: 768px) {
  .container_partners {
 align-items: center;
    gap: 20px; /* Reduce el espacio entre elementos */
    justify-content: center; /* Centra los elementos cuando se envuelven */
  }

  .container_partners img {
    flex-basis: 120px; /* Reduce el ancho base de las imágenes */
  }
}

/* Media query para pantallas muy pequeñas (ej. móviles) */
@media (max-width: 480px) {
  .container_partners {
   justify-content: center;
   align-items: center;
    flex-direction: column; /* Apila los elementos verticalmente */
    gap: 15px; /* Reduce aún más el espacio */
  }

  .container_partners img {
    width: 80%; /* Las imágenes ocupan un porcentaje del ancho del contenedor */
    max-width: 200px; /* Opcional: establece un ancho máximo para imágenes muy grandes */
  }

  .container_partners h3.socios {
    text-align: center; /* Centra el título "Socios" en móviles */
  }
}