:root{
  --padding-container: 100px 0; /* padding del contenedor */
  --color-title: #001A49;
}
  
/*CODIGO PARA MODIFICAR EL TIPO DE FUENTE DE LA PAGINA*/
body {
 font-family: poopins, sans-serif; /* 2 */
  
}

/*CODIGO PARA MODIFICAR EL CONTENEDOR DE LA PAGINA PRINCIPAL LLAMADO HERO */


.container{

  width: 90%; /* ancho maximo del contenedor */
  max-width: 1200px; /* ancho maximo del contenedor */
  margin: 0 auto; /* margen automatico */
  overflow: hidden; /* ocultar el desbordamiento */
  padding: var(--padding-container); /* padding del contenedor */ 
}
/*AQUI TERMINA CODIGO PARA MODIFICAR EL CONTENEDOR DE LA PAGINA*/

/*CODIGO PARA MODIFICAR SOLO LA SECCION DE HERO*/

.hero{  /* configuracion de la seccion hero */
  width: 100%;   /* ancho de la seccion hero */ 
  height: 100vh; /* alto de la seccion hero */
  min-height: 600px;    /* alto minimo de la seccion hero*/
  max-height: 800px;  /* alto maximo de la seccion he (para problemas con ipads) */
  position: relative ;    /* para que un elemento en relacione al contenedor*/
  display: grid;   /* display grid de la seccion hero (esto es para crear filas)*/
  grid-template-rows: 200px 1fr;    /* 1 fila de la seccion hero tomara 100px, 1fr es para que la sig tome el sobrante (ver en inspector grill en la seccion de layout */ 
  color: #fff ; /* color del texto de la seccion hero */
 
}
      
 
         /*vamos a crear un elemento a partir de hero (Padre)con la siguiente instruccion, ESTO ES PARA que el elemento que deseemos añadir (en este caso imagen) se añada al hijo y no al padre (al contenedor y no al navegador*/
   .hero::before{
    content: "";
    position: absolute;  
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;  
    /*EN ESTA SECCION VAMOS A EDITAR EL BACKGROUND THE LA PAGINA WEB*/
    background-image: linear-gradient(180deg, #0000008C 0%,#0000008C 100%), url('../IMAGES/FRONTPAGE12.png'); /* imagen de fondo de la seccion hero FALTA SABER QUE IMAGEN VOY A COLOCAR*/
    background-size:cover; /* para que la imagen de fondo cubra todo el contenedor */
    background-repeat:no-repeat; /* para que la imagen de fondo no se repita */
    background-position:center; /* para que la imagen de fondo se centre en el contenedor */
    clip-path: polygon(100% 0, 100% 80%, 50% 95%, 0 80%, 0 0); /* clip-path de la seccion hero */
    z-index: -1; /* para que el elemento se coloque debajo de los otros elementos */
    filter: brightness(2.8); /* para que la imagen de fondo se vea mas clara */
    
    background-attachment: fixed;  /*para que la imagen de fondo se quede fija al hacer scroll */
  }
 
   
  /*LAS SIGUIENTES CONFIGURACIONES DE NAV VAN ENFOCADAS A EL DISEÑO DE POSICIONAMIENTO DE LA NAVBAR*/
  /*CODIGO PARA MODIFICAR LA NAVBAR*/
  
  .nav{
    --padding-container:0; /* padding del contenedor */
    height: 100px; /* alto del contenedor */
    display: flex; /* display flex del contenedor */  
    align-items: center; /* alinear los elementos al centro */
  }

  .nav_title{
    font-weight: 300; /* peso de la fuente del contenedor */
    font-size: 40px; /* tamaño de la fuente del contenedor */
    text-align: center;
   
    
  } 
    
  /*esta configuaracion es para la cinta de opticiones de la navbar*/
  .nav_link{
    margin-left:auto;  /* margen izquierdo automatico */
    padding:0;
    display: grid; /* display grid del contenedor */
    grid-auto-flow: column; /* para que los elementos se coloquen en una sola fila */
    grid-auto-columns: max-content; /* para que los elementos se coloquen en una sola columna */
    gap: 2em; /* espacio entre los elementos */


  }
  .nav_items{
    list-style: none; /* quitar los puntos de la lista */
  }
  
 .nav_links{
    text-decoration: none; /* quitar el subrayado de los enlaces */
    color: #fff; /* color del texto de los enlaces */
    
  }

  .nav_menu{
    margin-left: auto; /* margen izquierdo automatico */
    cursor: pointer;
    display: none; 
    filter: brightness(0) invert(1); /* para que los iconos sean blancos cuando son imagenes*/
    

  }

  .nav_close{
    display: var(--show,none); /* ocultar el contenedor ya que solo es para disposiivos moviles*/
    filter: brightness(0) invert(1) /* para que los iconos sean blancos cuando son imagenes*/

  }


  .nav_img{
    display: block; 
    width: 150%; /* ancho del contenedor */
   
      }

/*OK, AQYUI TERMINA EL CODIGO DE LA NAVBAR (LA SECCION DE NAVEGACION)*/

/*CODIGO PARA MODIFICAR LA SECCION DE HERO (LA SECCION PRINCIPAL)*/
.hero_container{
  max-width: 800px; /* ancho maximo del contenedor */
  --padding-container:0; /* padding del contenedor */
  display: grid; /* display grid del contenedor */
  grid-template-rows: max-content; /* para que la fila tome el maximo del contenedor */
  gap: 2em; /* espacio entre los elementos */
  padding-bottom: 300px; /* padding inferior del contenedor */
  text-align: center;

}

 .hero_title{
  font-size: 1.5rem; /* tamaño de la fuente del contenedor */
   text-align: center; /* alinear el texto al centro horizontalmente */
  justify-content: center;
}

 .hero_paragraph{
 
  margin-bottom: 20px; /* margen inferior del contenedor */
  text-align: justify; /* alinear el texto al centro horizontalmente */

 }
  

 .cta{
  display: inline-block; /* display inline-block del contenedor */
  background-color: #2091f9;
  justify-self: center; /* alinear el contenedor al centro */
  color: #fff;
  text-decoration: none;
  padding:13px 25px; /* padding del contenedor */
  border-radius: 32px; /* borde redondeado del contenedor */
 }

/*AQUI TERMINA EL CODIGO DE LA SECCION HERO (LA SECCION PRINCIPAL)*/



/*AQUI INICIAR CODIGO DE LA SEGUNDA SECCION ABOUT**********************************/

/*lo sig es general para about*/
.about{
  text-align: center; /* alinear el texto al centro horizontalmente */ 
}

.subtitle{
  font-size: 2rem; /* tamaño de la fuente del contenedor */
  color: var(--color-title); /* color del texto del contenedor */
  margin-bottom: 25px; /* margen inferior del contenedor */
  text-align: center;
}
.about_paragraph{
  line-height: 1.7; /* altura de la linea del contenedor */
}


/*lo sig es para la cofiguracion de espacios entre about y el contenedor de articulos y icons*/
.about_main{
  padding-top: 80px; /* padding superior del contenedor */  
  display: flex; /* display grid del contenedor */  /*esto lo vamos a agregar como prueba cambiamos de grid a flex*/
  flex-wrap: wrap; /*esto lo vamos a agregar como prueba*/
  align-items: center;  /*esto lo vamos a agregar como prueba*/
  width: 90%; /* ancho maximo del contenedor */
  max-width: 1200px;
  margin: 0 auto; /* margen automatico */
  gap: 2.5em; /* espacio entre los elementos */
  overflow: visible; /* ocultar el desbordamiento */
  /*IMPORTANTE: LO SIG ES PARA COLOCARLOS EN FORMA HORIZONTAL, PERO CREAR COLUMNAS INDEFINIDAS PARA CUALQUIER DISPOSITIVO*/
  grid-template-columns: repeat(auto-fit, minmax(280px, 300px)); /* para que los elementos se coloquen en una sola fila y se adapten al tamaño del contenedor */
  justify-content: center;
  transition: transform 0.3s ease;  /* transicion del contenedor */

}

.about_main:hover{
  transform: translateY(-10px); /* para que el contenedor se mueva hacia arriba al pasar el mouse por encima */

}

/*lo sig es para el contenedor de la seccion de icons (los articulos)*/
.about_icons{
  display: grid; /* display grid tipo lista del contenedor */
  justify-items: center; /* alinear los elementos al centro */
  width: 250px; /* ancho del contenedor */
  overflow: hidden; /* ocultar el desbordamiento solo lo que sobresalga */
  padding: 2rem; /* padding del contenedor */
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, #00c18b, #00a3e0) border-box;
  border: 4Px solid transparent;
  border-radius: 20px 20px 0 0; /* borde redondeado del contenedor */
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
  text-align: justify; /* alinear el texto al centro horizontalmente */
  /*vamos a crear unas customs properties*/ 
  
 
}
/*lo sig es para cada icono*/
.about_icon{
  width: 40px; /* ancho del contenedor */
}

/*AQUI TERMINA EL CODIGO DE LA SECCION ABOUT (LA SECCION DE ARTICULOS Y ICONOS)*/



/*AQUI INICIA DE KNOWLEDGE**********************************/

.knowledge{
  /*lo sig se otuvo de copiar el codigo de la pagina de background de css POLKA V2 solo se elemino opacidad y se añadio el overflow */
background-image: url('../IMAGES/backgroundknowledge10.png'); /* imagen de fondo de la seccion de knowledge */
background-size: cover; /* para que la imagen de fondo cubra todo el contenedor */
background-position: center; /* para que la imagen de fondo se centre en el contenedor */
background-repeat: no-repeat; /* para que la imagen de fondo no se repita */
border-radius: 20px; /* borde redondeado del contenedor */
box-shadow: 0px 0px 20px rgba(0,0,0,0.1); /* sombra del contenedor */
text-align: justify;
padding:2em;
color:#fff; /* color del texto de la seccion hero */
}


/*lo sig es para la configuracion de la seccion de Knowledge*/
.knowledge_container{
  display: grid; /* display grid del contenedor */
  grid-template-columns: 1fr 1fr; /* para que los elementos se coloquen en una sola fila equitativamente */
  gap: 1em; /* espacio entre los elementos */
  align-items: center; /* alinear los elementos al centro */
 
}

.Knowledge_subtitle{
  font-size: 2rem; /* tamaño de la fuente del contenedor */
  color: #fff; /* color del texto del contenedor */
  margin-bottom: 25px; /* margen inferior del contenedor */
  text-align: center;
}

/*lo sig es para la configuracion de la List de la seccion de knowledge*/
.knowledge_list{
  line-height: 1.7; /* altura de la linea del contenedor */
  margin-bottom: 15px; /* margen inferior del contenedor */
  list-style: none; /* quitar los puntos de la lista */
  padding: 0; /* quitar el padding de la lista */
  margin: 0; /* quitar el margen de la lista */
  text-align: justify;
  gap: 5em; /* espacio entre los elementos */

} 

.knowledge_item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.2em;
}
.icon_knowledge{
  width: 24px; /* ancho del contenedor */
  height: 24px; /* alto del contenedor */
  margin-right: 10px; /* margen derecho del contenedor */
  margin-top: 4px; /* margen superior del contenedor */
  flex-shrink: 0; /* para que el icono no se reduzca al cambiar el tamaño del contenedor */
  }

  .knowledge_item span {
  line-height: 1.6;
  text-align: justify;
}

/*lo sig es para que la imagen ocupe el contenedor padre y no se pase o tenga problemas con espacios verticales*/
.knowledge_img{
  width: 100%; /* ancho del contenedor */
  height: 100%; /* alto del contenedor */ 
  object-fit: cover; /* para que la imagen se ajuste al contenedor */
  border-radius: 10%;
  -webkit-mask-image: radial-gradient(circle, black 70%, transparent 100%);
  mask-image: radial-gradient(circle, black 70%, transparent 100%);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.05); /* soft blend */
  filter: brightness(1.1); /* para que la imagen se vea mas clara */
  
}

.cta{
  margin-top: 30px; /* margen superior del contenedor para separarlo de la lista */
  display: block;
  width: fit-content;
  align-items: center;
  background-color: #1a50b3;
}



/*AQUI TERMINA LA SECCION KNOWLEDGE*/

/*AQUI INICIA LA SECCION DE COSTOS **********************************/

.price{
text-align: center; /* alinear el texto al centro horizontalmente */ 
}

.price_container{
 text-align: justify;
  padding-top: 50px; /* padding superior del contenedor */  
  padding-bottom: 50px; /* padding inferior del contenedor */
  display: grid; /* display grid del contenedor */
  
}
 

/*lo sg es para la configuracion de tabla de costos*/
.price_table{
  padding-top: 60px; /* padding superior del contenedor */
  display: flex; /* display flex del contenedor se puede ver si pasamos a crome*/
  flex-wrap: wrap; /* para que los elementos se coloquen en una sola fila y no se desborden*/;
  gap: 2.5em; /* espacio entre los elementos */
  align-items: center;  /* alinear los elementos al centro */
  justify-content: center; /* alinear los elementos al centro */
  
}

.price_element{
  width: 300px; /* ancho del contenedor */
  padding: 2rem; /* padding del contenedor */
  background-image: linear-gradient(to right, #00c18b, #00a3e0);
  background: white;
  border-top: 4 px solid transparent;
  border-radius: 20px 20px 0 0; /* borde redondeado del contenedor */
  box-shadow: 0 -3px 10px rgba(0, 201, 139, 0.6); /* sombra del contenedor */
  text-align: center; /* alinear el texto al centro horizontalmente */
  /*vamos a crear unas customs properties*/ 
  transition: transform 0.3s ease;  /* transicion del contenedor */
  position: relative;  /*SE AGREGO PARA LA SECCION DE OFERTA, ES IMPORTANTE*/
  
  
}


.price_element:hover{
  transform: translateY(-10px); /* para que el contenedor se mueva hacia arriba al pasar el mouse por encima */
}

.price_price{
  color: #72d9ff; /* color del texto del contenedor */
  margin-bottom: 15px; /* margen inferior del contenedor */
  font-weight: 300;
  font-size: 2.5rem; /* tamaño de la fuente del contenedor */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* sombra del texto del contenedor */
  background-color: #fff; /* color de fondo del contenedor */
  border: 1px solid #e0e0e0; /* borde del contenedor */
  padding: 1rem;
  border-radius: 12px;
  display: inline-block;
  font-family: 'Segoe UI', sans-serif;
  text-align: center;

}

.price-price .currency {
  font-size: 1.6rem;
  vertical-align: top;
  margin-right: 4px;
  
  /*AÑADIDO POR OFERTA*/
  text-decoration: line-through;
  color: #999;
}

/*ANIDIR SOLO SI HAY OFERTA*/
.discounted-price {
  color: #00c18b;
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 10px;
  font-family: 'Segoe UI', sans-serif;
}


.price_name{
  color: #0f254f;
  font-weight: 600; /* peso de la fuente del contenedor */
  font-size: 1.5rem; /* tamaño de la fuente del contenedor */
  margin-bottom: 10px; /* margen inferior del contenedor */
}

.price_items{
  margin-top: 35px; /* margen inferior del contenedor */
  display: grid; /* display grid del contenedor */
  gap: 1em; /* espacio entre los elementos */ 
  margin-bottom: 50px; /* margen inferior del contenedor */
  font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
  font-size: 1rem;                  /* ~16px */
  color: #4a4a4a;                   /* Soft gray */
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.3px;
  max-width: 600px;
  margin: auto;
  text-align: justify;              /* or 'left' if needed */
  opacity: 0.85; 
}

.price_cta{
  display: block; /* display block del contenedor */
  padding: 12px 32PX; /* padding del contenedor */
  border-radius: 9999px; /* borde redondeado del contenedor */
  text-decoration: none; /* quitar el subrayado de los enlaces */
  background-color: #00c17c;
  background:#007BFF; /* color de fondo del contenedor */
  color: #fff;
  font-size: 1rem;
  border: none; /* quitar el borde del contenedor */
  font-weight: bold; /* peso de la fuente del contenedor */
  box-shadow: 0px 0px 1px rgba(0,0,0,0.5); /* sombra del contenedor */
  transition: background 0.3s ease, transform 0.2s ease ;
  cursor: pointer; /* cursor de mano al pasar el mouse por encima */
  box-shadow:  0 2px 6px rgba(0, 0, 0, 0.15) ;
  

}

.price_cta:hover{
  background:  #00a86b; /* color de fondo del contenedor al pasar el mouse por encima */
  transform: scale(1.05); /* para que el contenedor se mueva hacia arriba al pasar el mouse por encima */
}

.price_cta::after {
  content: ' 🐾';
}

/*LO SIGUIENTE ES PARA LA CONFIGURACION DE DESCUENTO*/
.discount-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ff7b54;
  color: #fff;
  font-weight: bold;
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  font-family: 'Segoe UI', sans-serif;
  z-index: 10;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}



/*AQUI TERMINA LA SECCION DE COSTOS*/


/*AQUI INICIAR LA SECCION DE FORMS**********************************/
.Contact_form{
  border-radius: 20px; /* borde redondeado del contenedor */
  text-align: center; /* alinear el texto al centro horizontalmente */
  padding: 50px 55px; /* padding del contenedor */
  box-shadow: 0 0 20px rgba(0,0,0,0.2); /* sombra del contenedor */
 
}

.input-group{
  display: flex; /* display flex del contenedor */
  flex-direction: column; /* para que los elementos se coloquen en una sola columna */
  text-align: left; /* alinear el texto a la izquierda */
}

.form_WhatsApp  {
  color:#283629;
  font-size: 15px; /* tamaño de la fuente del contenedor */
  font-weight: 600; /* peso de la fuente del contenedor */
  margin-bottom: 15px; /* margen inferior del contenedor */
}

.form_label{
  color:#283629; /* color del texto del contenedor */
  font-size: 15px; /* tamaño de la fuente del contenedor */
  font-weight: 600; /* peso de la fuente del contenedor */
  margin-bottom: 15px; /* margen inferior del contenedor */ 
}

input, textarea{
  padding: 17px 25px; /* padding del contenedor */
  border-radius: 25px; /* borde redondeado del contenedor */
  border: 2px solid #f0faf0; /* borde del contenedor */
  background-color: #edfff0; /* color de fondo del contenedor */
  font-size: 14px; /* tamaño de la fuente del contenedor */
  margin-bottom: 20px; /* margen inferior del contenedor */
  color: #283629; /* color del texto del contenedor */
  outline: none; /* quitar el contorno del contenedor */
}

input::placeholder, textarea::placeholder{
  color: #b5cab6  ; /* color del texto del contenedor */
  opacity: 0.7; /* opacidad del texto del contenedor */
}

.form_txt{
  margin-bottom: 30px; /* margen inferior del contenedor */
  display: flex; /* display flex del contenedor */
  justify-content: space-between; /* alinear los elementos al centro */
  text-align: center; /* alinear el texto al centro horizontalmente */
}

.form_txt a{
  color: #76b28e; /* color del texto del contenedor */
  font-size: 14px; /* tamaño de la fuente del contenedor */
  font-weight: 600; /* peso de la fuente del contenedor */
  text-align: none; /* quitar el subrayado de los enlaces */  
}

/*lo sin es para las politicas de privacidad y terminos y condiciones*/
.privacy-check {
  margin: 20px 0;
  font-size: 14px;
  color: #333;
}

.privacy-check input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.2);
  vertical-align: middle;
}

.privacy-check a {
  color: #0044ff;
  text-decoration: underline;
  cursor: pointer;
}

/*aqui termina la configuracion de las politicas de privacidad y terminos y condiciones*/

  .form_btn{
    font-size: 16px; /* tamaño de la fuente del contenedor */ 
    color: #fff; /* color del texto del contenedor */
    border: 0;
    border-radius: 25px; /* borde redondeado del contenedor */
    background-color: #0935f9; /* color de fondo del contenedor */
    box-shadow: 0 0 20px rgba(25,254,0,0.4); /* sombra del contenedor */
    cursor: pointer;  
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* transicion del contenedor */

  }

  .form_btn:hover{
    background-color: #50e04b; /* color de fondo del contenedor al pasar el mouse por encima */
    box-shadow: 0 0 20px rgba(25,254,0,0.6); /* sombra del contenedor al pasar el mouse por encima */
    background-color:#00a86b;
    transform: scale(1.05); /* para que el contenedor se mueva hacia arriba al pasar el mouse por encima */

  }



  /* Animacion para la seccion de formulario */
  .modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.6);
  z-index: 999;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.4s ease forwards;
}

/* Inner form box */
  .modal-content {
  background-color: white;
  padding: 30px;
  border-radius: 15px;
  width: 90%;
  max-width: 500px;
  transform: translateY(-100px);
  animation: slideIn 0.4s ease forwards;
  position: relative;
 }

/* Close button */
  .close-btn {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 28px;
  color: #333;
  cursor: pointer;
}

/* Animations */
@keyframes slideIn {
  from { transform: translateY(-100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeIn {
  from { background-color: rgba(0,0,0,0); }
  to { background-color: rgba(0,0,0,0.6); }
}

/*LO SIG ES PARA LINKS TERMS AND CONDITIONS, PRIVACY POLICY Y COOKIES*/
.form-txt{
 font-size: 0.9em;
  text-align: center;
  padding: 20px;
  color: #777;

}

.form-txt a{
  text-decoration: none;
  color: #555;
  margin: 0 10px;
}

.form-txt a:hover{
  color: #000;
}

/*AQUI TERMINA EL CODIGO DE LA SECCION DE FORMS*/


/*AQUI INICIA LA SECCION DE TERMS AND CONDITIONS**********************************/

.terms_form{
   position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 800px;
  background: rgb(105, 101, 101);
  border: 2px solid #ccc;
  padding: 20px;
  z-index: 9999;
  box-shadow: 0px 4px 15px rgba(0,0,0,0.3);
  border-radius: 12px;
}

.terms-box{
  max-width: 460px; /* ancho maximo del contenedor */
  background-color: rgb(83,83,83,0.1); /* color de fondo del contenedor */
  color: #fff; /* color del texto del contenedor */
  font-family: Verdana, Geneva, Tahoma, sans-serif; /* fuente del contenedor */
  padding: 0 20px; /* padding del contenedor */
  height: 400px; /* alto del contenedor */
  overflow-y: auto; /* ocultar el desbordamiento */
  font-size: 14px; /* tamaño de la fuente del contenedor */

}

.terms-text{
  padding: 0 20px; /* padding del contenedor */
  height: 400px; /* alto del contenedor */
  overflow-y: auto; /* ocultar el desbordamiento vertical */
  font-size: 14; /* tamaño de la fuente del contenedor */
  font-weight: 500;
  color: #111; /* color del texto del contenedor */

}

.terms-text::-webkit-scrollbar {
  width: 2px; /* ancho de la barra de desplazamiento */
  background-color: #282828; /* color de fondo de la barra de desplazamiento */
}

.terms-text::-webkit-scrollbar-thumb {
  background-color: #f1f1f1; /* color del pulgar de la barra de desplazamiento */
  border-radius: 10px; /* borde redondeado del pulgar de la barra de desplazamiento */
}

.terms-text h2{
  text-transform: uppercase; /* transformar el texto a mayusculas */
}

.terms-text h4{
  font-size: 13px; /* tamaño de la fuente del contenedor */
  text-align: center;
  padding: 0 40px; /* padding del contenedor */
}

.terms-text h4 span{
  color:red;
  text-transform: uppercase; /* transformar el texto a mayusculas */
}

.buttons_terms{
  display: flex; /* display flex del contenedor */
  padding: 0 20px; /* padding del contenedor */
  justify-content: space-between; /* alinear los elementos al centro */
  padding-bottom: 50px; /* padding inferior del contenedor */
}

.btn_terms{
  height: 50px; /* alto del contenedor */
  width: calc(50% - 6px); /* ancho del contenedor */
  border: 0;  
  border-radius: 6px; /* borde redondeado del contenedor */
  font-size: 19px; /* tamaño de la fuente del contenedor */
  font-weight: 500; /* peso de la fuente del contenedor */
  color: #fff; /* color del texto del contenedor */
  cursor: pointer; /* cursor de mano al pasar el mouse por encima */
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* transicion del contenedor */


}

.red-btn_terms{
  background-color: #808080; /* color de fondo del contenedor */
  box-shadow: 0 0 20px rgba(128,128,128,0.6); /* sombra del contenedor */
}

.gray-btn_terms{
  background-color: #808080; /* color de fondo del contenedor */
  box-shadow: 0 0 20px rgba(128,128,128,0.6); /* sombra del contenedor */
}

.btn_terms:hover{
  background-color: #00a86b; /* color de fondo del contenedor al pasar el mouse por encima */
  box-shadow: 0 0 20px rgba(25,254,0,0.6); /* sombra del contenedor al pasar el mouse por encima */
  transform: scale(1.05); /* para que el contenedor se mueva hacia arriba al pasar el mouse por encima */
}

/*lo sig es para el boton de cerrar la ventana de terminos y condiciones*/
.close_termsbtn {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 24px;
  color: #888;
  cursor: pointer;
}




/*AQUI TERMINA LA SECCION DE FORMS*/





/*AQUI INICIA LA SECCION DE TESTIMONIOS**********************************/


.testimony{
  /*lo siguientes lineas son solo para la imagen de fondo de la seccion de testimonios*/
  background-image: url('../IMAGES/backgroundknowledge9.png'); /* imagen de fondo de la seccion de testimonios */
  background-size: cover; /* para que la imagen de fondo cubra todo el contenedor */  
  background-position: center; /* para que la imagen de fondo se centre en el contenedor */
  background-repeat: no-repeat; /* para que la imagen de fondo no se repita */
  border-radius: 20px; /* borde redondeado del contenedor */
  box-shadow: 0px 0px 20px rgba(0,0,0,0.1); /* sombra del contenedor */
  height: 110vh;
  
}

.testimony_container{
  display: grid; /* display grid del contenedor */
  grid-template-columns: 50px 1fr 50px; /* son tres elementos las flechas izq y der y el material central(aqui subimos el porcentaje del izq a 70% por que no cabia la flecha*/
  gap: 1em; /* espacio entre los elementos */
  align-items:center; /* alinear los elementos al inicio (flechas */
}

 /*caja del testimonio (slider)*/
.testimony_body{
  display: grid;
  grid-template-columns: 1fr max-content; /* dos elementos(testimonios y photo face, la primera de una fraccion y la segunda el restante) */
  justify-content:space-between; /* alinear los elementos en la esquina */
  align-items: center; /* alinear los elementos al centro */
  gap:2em; /* espacio entre los elementos */
  /*con la sig configuracion centramos el contenido en el contenedor los 3 elementos que vamos a scrollear*/
  grid-column: 2/3; /* para que el contenedor ocupe dos columnas */
  grid-row: 1/2; /* para que el contenedor ocupe dos filas */
  opacity: 0; /* para que el contenedor no se vea */
  pointer-events: none; /* para que el contenedor no reciba eventos del mouse */
  
}

 /*siguiente conf para que el slider*/
.testimony_body--show{
  align-items:center; /* alinear los elementos al centro */
  opacity: 1; /* para que el contenedor se vea */
  pointer-events: unset; /* para que vaya a la propiedad original*/
  transition: opacity 1.5s ease-in-out; /* transicion del contenedor */
}

/*lo sig es para la configuracion de la imagen de la seccion de testimonio*/	
.testimony_img{
  width: 250px; /* ancho del contenedor */
  height: 250px; /* alto del contenedor */
  border-radius: 50%; /* borde redondeado del contenedor */
  object-fit: cover; 
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  object-position: 50% 30%; /* para que la imagen se centre en el contenedor */
  
}


.testimony_texts{
  max-width: 500px; /* ancho maximo del contenedor */
  color:#fff; /* color del texto del contenedor */
}
.testimony_title{
  font-size: 1.2rem; /* tamaño de la fuente del contenedor */
  font-weight: 600; /* peso de la fuente del contenedor */
  margin-bottom: 0.5rem; /* margen inferior del contenedor */
  color:#fff;
}
.testomony_review{
  font-size: 1rem; /* tamaño de la fuente del contenedor */
  line-height: 1.6; /* altura de la linea del contenedor */
  margin-bottom: 1.5rem; /* margen inferior del contenedor */
  color:#fff;

}

 /*conf paraa slider*/
.testimony_course{
  background-color: royalblue; /* color de fondo del contenedor */
  color: #fff; /* color del texto del contenedor */
  display: inline-block; /* display inline-block del contenedor */
  padding: 5px; /* padding del contenedor */
}

.testimony_arrow{
  width: 50px; /* ancho del contenedor */
  cursor: pointer; /* cursor de mano al pasar el mouse por encima */
  filter: brightness(0) invert(1); 
}

/*UNA VEZ QUE TERMINAMOS CON EL CODIGO DE LA SECCION DE TESTIMONIOS, AHORA VAMOS A CREAR EL SLIDER CREANDO UN ARCHIVO EN JI*/

/*AQUI TERMINA LA SECCION DE TESTIMONIOS*/

/*AQUI INICIA LA SECCION DE QUESTIONS**********************************/

.questions{
  text-align: justify; /* alinear el texto al centro horizontalmente */
}

.questions_container{
  display: grid; 
  gap: 2em;  
  padding-top: 50px; 
  padding-bottom:100px; 
  text-align: justify; /* alinear el texto al centro horizontalmente */ 
}

/*esto es para hacer un padding dinamico*/
.questions_padding{
  padding: 0;
  transition: padding .3s; 
  border:1px solid #5454d4; /* borde del contenedor */
  border-radius: 6px;

  
}
/*esto esta en funcion al padding dinamico*/
.questions_padding--add{
  padding-bottom: 10px;

}

.questions_answer{
  padding:0 30px 0 ; /* padding del contenedor */
  overflow: hidden;
}

.questions_title{ /*el el contenedor de H3*/
  text-align: left;
  display: flex;
  font-size: 20px;  
  padding: 30px 0 30px; /* padding del contenedor */
  cursor: pointer;
  color: var(--color-title);
  justify-content: space-between;
  
  }

  .questions_arrow{
    border-radius: 50%;
    background-color: #fff; /* color de fondo del contenedor */
    width: 25px; /* ancho del contenedor */
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: flex-end; 
    margin-left: 10px; /* margen izquierdo del contenedor */
    transition: transform .3s; /* transicion del contenedor */
    
  }

.questions_img{
    display: block; /* display block del contenedor */
    height: 30px; /* tamano de la imagen */
    
    
  }


  .questions_arrow--rotate{
    transform: rotate(180deg); /* rotar el contenedor */
 
  }


  .questions_show{
    text-align: left;
    height: 0;
    overflow: hidden;
    transition: height .3s; /* transicion del contenedor */
    text-align: justify; /* alinear el texto al centro horizontalmente */
  }

  /*En esta seccion se centro el texto de preguntas con el contenedor*/
  .questions_copy{
    width: 60%;
    margin: 0 auto; /* margen automatico */
    margin-bottom: 30px; /* margen inferior del contenedor */
    text-align: center; /* alinear el texto al centro horizontalmente */
    }
 



.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

  .footer{
    background-color: #1d293f;
    border-radius: 10px;
  }

  
footer.footer {
  margin-top: auto;
  background-color: #0e1f38;
  color: white;
  padding: 40px 20px;
  text-align: center;
}

  .footer_title{
    font-weight: 300;
    font-size: 2rem; /* tamaño de la fuente del contenedor */
    margin-bottom: 30px;
  }

  .footer_title, .footer_newsletter{
    color: #fff; /* color del texto del contenedor */
  }

  .footer_container{
    display: flex; 
    justify-content: space-between;
    align-items: center; /* alinear los elementos al centro */
    border-bottom: 1px solid #fff; /* borde inferior del contenedor */
    padding-bottom: 60px;
    
  }

  .nav--footer{
    padding-bottom: 20px;
    display: grid;
    gap: 1em; /* espacio entre los elementos */
    grid-auto-flow: row; /* para que los elementos se coloquen en una sola fila */
    height: 100px; /* alto del contenedor */
  }

  .nav_items--footer{
    display: flex; /* display flex del contenedor */
    margin: 0; /* quitar el margen de la lista */
    margin-right: 20px;
    flex-wrap: wrap; /* para que los elementos se coloquen en una sola fila y no se desborden*/;

  }

  .footer_inputs{
    margin-top: 10px;
    display: flex; /* display flex del contenedor */
    overflow: hidden;
  }

  .footer_input{
    background-color: #fff;
    height: 50px; /* alto del contenedor */
    display: block; /* display block del contenedor */
    padding-left: 10px; /* padding del contenedor */
    border-radius: 6px; /* borde redondeado del contenedor */
    font-size: 1rem; /* tamaño de la fuente del contenedor */
    border: none; /* quitar el borde del contenedor */
    outline: none; /* quitar el contorno del contenedor */
    margin-right: 16px; /* margen derecho del contenedor */
  }

  .footer_submit{
    margin-left: auto; /* margen izquierdo automatico */
    display: inline-block;
    height: 50px; /* alto del contenedor */
    padding: 0 20px; /* padding del contenedor */
    background-color: #2091f9;
    border: none; /* quitar el borde del contenedor */
    font-size: 1rem; /* tamaño de la fuente del contenedor */
    color: #fff; /* color del texto del contenedor */
    border-radius: 6px; /* borde redondeado del contenedor */
    cursor: pointer; /* cursor de mano al pasar el mouse por encima */

  }

  .footer_copy{
    --padding-container: 30px 0;
    text-align: center; /* alinear el texto al centro horizontalmente */
    color: #fff; /* color del texto del contenedor */
  }

  .footer_copyright{
    font-weight: 300; /* peso de la fuente del contenedor */
  }

  .footer_icons{
    display: inline-flex; /*para que se coloquen en una sola fila */
    margin-bottom: 10px;
    filter: brightness(0) invert(1) /* para que los iconos sean blancos cuando son imagenes*/
   
    }


  .footer_img{
    width: 30px;
    fill: #fff; 
  }

/*CONFIGURACION PARA EL BOTON DE WHATSAPP*/
  .footer_whatsapp{
    position : fixed; /* para que el contenedor se coloque en una posicion fija */
    right: 5px; /* posicion derecha del contenedor */
    bottom: 250px; /* posicion inferior del contenedor */  
    padding: 50px; /* padding del contenedor */ 
    font-size: 48px; /* tamaño de la fuente del contenedor */
    display: flex; /* display flex del contenedor */
    align-items: center; /* alinear los elementos al centro */
    flex-direction: column; /* para que los elementos se coloquen en una sola columna */
    z-index: 1000; /* para que el contenedor se coloque encima de los otros elementos */
    
  }

  .Label_whatsapp{
  position: fixed; /* para que el contenedor se coloque en una posicion fija */
  right: 40px; /* posicion derecha del contenedor */
  bottom: 250px;
  color: white; /* or any color that fits your footer */
  font-size: 1.2em;
  margin-bottom: 5px;
  font-weight: bold;
   margin-top: 6px;
  background-color: #25D366;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    
  
  }

  .footer_whatsapp_img {
  width: auto; /* ancho de la imagen */
  height: auto;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  }


  /*MEDIA QUERIES ADAPTACION PARA DISPOSITIVOS MOVILES*/

  @media (max-width: 800px) {
    .nav_menu{
      display: block; /* ocultar el contenedor */
    }
    .nav_link--menu{
      position: fixed;
      background-color: #000;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column; /* para que los elementos se coloquen en una sola fila */
      justify-content: space-evenly;
      align-items: center;
      z-index: 100;
      opacity: 0; /* para que el contenedor no se vea */
      pointer-events: none; /* para que el contenedor no reciba eventos del mouse */
      transition: -7s opacity; /* transicion del contenedor */
        
    }

    .nav_link--show{
      --show:block; /* mostrar el contenedor */
      opacity: 1; /* para que el contenedor se vea */
      pointer-events: unset; /* para que vaya a la propiedad original*/
    }
    .nav_close{
      position: absolute;
      top: 30px;
      right: 30px;
      width: 30px; /* ancho del contenedor */
      cursor: pointer; /* cursor de mano al pasar el mouse por encima */
    }

    .hero_title{
      font-size: 2-5rem; /* tamaño de la fuente del contenedor */
    }

    .hero{
      background-size: contain; /* para que la imagen de fondo se ajuste al contenedor */
      background-position: center; /* para que la imagen de fondo se centre en el contenedor */
      background-repeat: no-repeat;
      height: 90vh; /* alto de la seccion hero */
    }

    .hero-content {
    padding: 2em;
    backdrop-filter: blur(4px);        /* Opcional: mejora contraste del texto */
    background-color: rgba(0,0,0,0.2); /* Fondo semitransparente para legibilidad */
  }

    .about_main{
      gap: 2em; /* espacio entre los elementos */
      
    }
    

    /*esto es para que el contenedor centre dinamicamente todos los cuadros de la seccion knowledge*/
    .knowledge_icons:last-of-type{
      grid-column: 1/-1; /* para que el contenedor ocupe dos columnas */
    }

    .knowledge_container{
      grid-template-columns: 1fr; /* para que los elementos se coloquen en una sola fila */
      grid-template-rows: max-content 1fr;
      text-align: center; /* alinear el texto al centro horizontalmente */
      gap: 3em; /* espacio entre los elementos */
    }

    .knowledge_picture{
      display: grid;
      grid-row: 1/2; /* para que el contenedor ocupe dos filas */
      justify-self: center; /* alinear el contenedor al centro */
      
    }

    .testimony_container{
      grid-template-columns: 20px 1fr 20px; /* son tres elementos las flechas izq y der y el material central(aqui subimos el porcentaje del izq a 70% por que no cabia la flecha*/
      
    }
    
    .testimony_body{
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto; /* para que el contenedor ocupe dos filas */
      gap: 6em; /* espacio entre los elementos */
      align-items: center; /* alinear los elementos al centro */
      padding: 2rem 1rem; /* padding del contenedor */
      justify-content: center; /* alinear los elementos al centro */
      text-align: justify; /* alinear el texto al centro horizontalmente */
      justify-items: center;
    } 

    .testimony_picture{
      align-items: center;
      justify-content: center;  
      
      
    }
    
    

    .testimony_arrow{
      position: relative; /* para que el elemento se coloque en relacione al contenedor*/
    } 

    .testimony_img{
      width: 200px; /* ancho del contenedor */
      height: 200px; /* alto del contenedor */
    }

    .questions_copy{
      width: 100%; /* ancho del contenedor */
    }

    .footer_container{
      flex-wrap: wrap;/*si los elementos ya no entran en la linea se desborden a la sig */
      align-items: center; /* alinear los elementos al centro */
      justify-content: center; /* alinear los elementos al centro */
      gap: 1.5em; /* espacio entre los elementos */
      padding: 2rem 1rem; /* padding del contenedor */
      height: auto; /* alto del contenedor */
      
  } 
    

    .nav_footer{
      width: 100%; /* ancho del contenedor */
      justify-content: center; /* alinear los elementos al centro */
    }

    .nav_link--footer{
      width: 100%; /* ancho del contenedor */
      margin: 0; /* quitar el margen derecho del contenedor */
      justify-content: space-evenly; /* alinear los elementos al centro */
    
    }

    .footer_form{
      width: 100%; /* ancho del contenedor */
      justify-content: space-evenly
    
    }


    .footer_input{
      flex:1; /* para que el contenedor ocupe todo el espacio disponible */
    }
    .footer_social{
      height: auto;
    }
  

  }

  @media (max-width: 600px) {


    .hero_title{
      font-size: 2rem; /* tamaño de la fuente del contenedor */
    }
    

    .hero_paragraph{
      font-size: 1 rem; /* tamaño de la fuente del contenedor */
    } 

    .subtitle{
      font-size: 1.8rem; /* tamaño de la fuente del contenedor */
    }
    
    .price_element{
      width: 90%; /* ancho del contenedor */
    }
    .price_element--best{
      width: 90%; /* ancho del contenedor */
      padding: 40px; /* padding del contenedor */
    }

    .price_price{
      font-size: 2rem; /* tamaño de la fuente del contenedor */
    }

    .testimony{
      --padding-container: 60px 0; /* padding del contenedor */

    }
    
    .testimony_container{
      grid-template-columns:28px 1fr 28px; /* para que los elementos se coloquen en una sola fila */
      gap: .9em; /* espacio entre los elementos */
    }

    .testimony_arrow{
      width: 100px; /* ancho del contenedor */
    }
    .testimony_body{
      text-align: justify; /* alinear el texto al centro horizontalmente */
    }

    .testimony_course{
      margin-top: 15px; /* margen superior del contenedor */
    }

    .questions_title{
      font-size: 1rem; /* tamaño de la fuente del contenedor */
    } 

    .footer_title{
      justify-self: center;
      margin-bottom: 15px; /* margen inferior del contenedor */

    }

    .nav_footer{
      padding-bottom: 30px; /* padding inferior del contenedor */ 
    }

    .nav_link--footer{
      justify-content: space-between;
      }


    .footer_container{
      padding-bottom: 200px;
      
  }
    

    .footer_inputs{
      flex-wrap: wrap; /* para que los elementos se coloquen en una sola fila y no se desborden*/;
      
    }

    .footer_input{
      flex-basis: 100%; /* para que el contenedor ocupe todo el espacio disponible */
      margin: 0;
      margin-bottom: 16px; /* margen inferior del contenedor */
      
    }

    .footer_submit{
      margin-right: auto; /* margen izquierdo automatico */
      margin-left: 0; /* margen izquierdo automatico */
    }

    .footer_social{
       padding-bottom: 100px; /* padding inferior del contenedor */
        height: auto;
      }
  
    }


  @media (max-width: 991px){
    
      .form{
        padding: 50px 30px; /* padding del contenedor */
        width: 100%; /* ancho del contenedor */

      }
      input{
        padding: 15px ; /* padding del contenedor */
      }

      .footer_social{
       padding-bottom: 100px; /* padding inferior del contenedor */
        height: auto;
      }
  

       
    }