* {
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
	margin: 0;
    padding: 0; 
}

header{ 
    width: 100%; 
    height:70px;
    background: #fafafa;
    padding: 0  50px;
color: black;
display: flex;
top: 0%;
justify-content: space-between;
align-items: center;
position: absolute;




}




.logo{
    text-transform: uppercase;
    /* para poner los textos en mayuscula */
    color: black;
font-weight: 200;
height: 60px;
width: 70px;


}
.menu a{
    color: black;
    text-transform: uppercase;
text-decoration: none;
padding: 0 10px;
 transition:0.4s;
 border: 1px solid #46eb7e;
 border-radius: 50px;
}
.mostrar-menu,
.esconder-menu{
    font-size: 40px;
cursor: pointer;
 display: none;
transition: 0.4s;
/* transicion para que al selecccionar y salga el color encima sea mejor  */
}
.mostrar-menu{
order:1;
}
.menu a:hover,
.mostrar-menu-hover,
.esconder-menu:hover{
background: #25d366;
}
#check{
    display: none;
   
}


body {
	background: white;
	color: black;
	font-family: 'Poppins', sans-serif;
	min-height: 100vh;
	display: block;
	align-items: center;

}

.contenedor {
	max-width: 400px;
	width: 80%;
	margin: auto;
	margin-top: 30px;
}

/* --- --- CONTENEDOR PRINCIPAL --- --- */

.contenido-principal {
	margin-top: 30px;
	margin-bottom: 50px;
	display: flex;
	align-items: center;

}

.contenido-principal__imagen {
	vertical-align: top;
	margin-left: 30px;
	width: 50%;
	max-width: 300px;
	margin-right: 20px;
	border-radius: 15px;

}

.contenido-principal__contenedor {
	width: 50%;
}

.contenido-principal__titulo {
	font-weight: normal;
	font-size: 28px;
}

.contenido-principal__resumen {
	font-family: 'Open Sans', sans-serif;
	line-height: 30px;
	color: black;
}

/* --- --- CAROUSEL --- --- */
.carousel__contenedor {
	margin-top: 50px;
	position: relative;

}
.semp{
max-width: 600px;
align-items: center;
}

.carousel__anterior,
.carousel__siguiente {
	position: absolute;
	display: block;
	width: 30px;
	height: 30px;
	border: none;
	top: calc(50% - 35px);
	cursor: pointer;
	line-height: 30px;
	text-align: center;
	background: none;
	color: black;
	opacity: 80%;
}

.carousel__anterior:hover,
.carousel__siguiente:hover {
	opacity: 100%;
}

.carousel__anterior {
	left: -30px;
}

.carousel__siguiente {
	right: -30px;
}

.carousel__lista {
	overflow: hidden;
}

.carousel__elemento {
	text-align: center;
}

.carousel__indicadores .glider-dot {
	display: block;
	width: 30px;
	height: 4px;
	background:#666666;
	opacity: .2;
	border-radius: 0;
	
}

.carousel__indicadores .glider-dot:hover {
	opacity: .5;
}

.carousel__indicadores .glider-dot.active {
	opacity: 1;
}
.continuar{
	width: 100%;
	
 
}
.ver{
	color: black;
	cursor: pointer;
text-decoration: none;
background-color: #46eb7e;
border-radius: 12px;
padding:4px;

}
.verr{
cursor: pointer;
color: #46eb7e;

}
.ven{
	background-color: white;
	
}

.eml{
	cursor: pointer;
	color: #efb810;
}

h1{
text-align: center;
margin: 30px 0px;
}
h2{
	color: #000;
	font-size: medium;
	text-align: center;

}

.eryi {
	color: #24262b;
	font-size: small;
	text-align: center;

}

.descrip{
	padding: 10px;
	line-height: 1.5;
}

















 








.tablacomparativa{
	margin: 0;
	font-family: sans-serif;
	font-size: 1rem;
	line-height: 1.6em;
	color: #333;
	padding: 0.5rem;
	
   
	
}
* {
   box-sizing: border-box;   
}
.page-container{
	max-width: 700px;
	margin: 2rem auto;
}
.table-cebra{
	border-top: solid 1px #e7e7e7;
   
	border-spacing: 0;
}
.table-cebra thead th{
	background-color: #f2f2f2;
	color: black;
}
.table-cebra th,
.table-cebra td{
   border-right: 1px solid #e7e7e7;
   /* con el min widht se modifica el tamaño minimo de la celda */
   min-width: 150px; 
   /* paddin para el espaciado dentro de la celda */
   padding: 0.2rem;
   /* alineacion del texto de las tablas */
   text-align: center;
}
.table-cebra th:last-child,
.table-cebra td:last-child{
	border-right: 0;

}
.table-cebra td{
	border-bottom:solid 1px #e7e7e7 ;
   
}
.table-cebra tbody tr {
	background: white;
}
.table-cebra tbody tr:nth-child(2n) {
   background-color: #f2f2f2;

	
}

.table-container{
	/* con esto logramos que nunca exeda el tamaño de su contenedor */
	max-width: 100%;
	/* para esto es todo lo que se salga del div de manera horizontal  no aparezca con el atributo hidden y se le coloca scrool par aque aparezca y se pueda realizar scroll*/
	overflow-x: scroll;
	border-left: solid 1px #e7e7e7;
	border-right: solid 1px #e7e7e7;
}
.table-cebra .sticky{
	/* para que se quede pegado a 0 pixeles de distancia de su elemento padreck */
	position: sticky;
	left: 0;

}


.table-cebra tbody tr .sticky {
	background: white;

}
.table-cebra tbody tr:nth-child(2n) .sticky {
	background: #f2f2f2;

}


































caption{
	padding-top: 20px;
	color: #999;
}


p{
padding-left: 50px;
	color: #666666;
	padding: 5px;

}
.containerr{
	width: 75vw;
	max-width: 1000px  ;
	min-width: 350px  ;
	margin: auto;
}
.imagen{
	width: 100%;
	border-radius: 15px;
	box-shadow: 0px 3px 5px rgba(15, 15, 15, .5);

}
.rou{
	color: #efb810;


}

.sst{
	color: rgb(131, 129, 129);
}
.boton-saber-mas{
    display: inline-block;
    text-decoration: none;
    color: black;
    background-color: #0ae98a ;
    padding: 10px 80px;
    border: 3px solid #0ae98a ;
    border-radius: 12px;
    margin-top: 15px;
    transition: all 0,4s
    
    }
/* .boton-saber-mas:hover{
    background: white;
    color: black;
} */
.medio{
	text-align: center;
	padding: 20px;
	
	
}
.padre20{
text-align: center;


}
.pepe{
	font-size: small;
	color: #e0e0e0;
}
.tarjetas{
	text-align: center;
	height: 50px;
	
	

}
.dpñs{
	max-width: 90px;
	border-radius: 10px;
	
}


/* video de youtube */
 .video{

	padding: 5px 5px ;
	margin-top: 5px;
	

    /* width: 97%;
  position: relative;
  
  margin-left: auto;
  margin-right: auto; */
}

/* .video::after{
	content: "";
	display: block;
	width: 100%;
	padding-bottom: 90.25%;
} */
/* .esdacode_video{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}  */


/* .jav {
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	align-items: center;
	background-color: lightsteelblue;
  } */
  
  .container {

	max-width: 3000px;
	background-color: white;
	border-radius: 5px;
	padding: 10px;
	margin: auto 5px;
	
  }
  
  .content {
	display: flex;
	flex-direction: column;
	gap: 10px;
  }
  
  .accordion_item {
	border-radius: 5px;
  }
  
  /* .accordion_item:hover {
	opacity: 0.9;
  } */
  
  .accordion_header {
	padding: 10px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
  }
  
  .accordion_content {
	margin-left: 15px;
	margin-right: 15px;
	overflow: hidden;
	height: 0;
	transition: all .5s ease;
	font-size: 14px;
  }
  
  .active {
	padding-bottom: 10px;
  }
  
  span, .icon {
	font-weight: 600;
  }
  .conteimer{
	/* width: 75vw;
	 max-width:350px ;  */
	 width: 100%;
	 max-width: 700px;
	min-width:100px ;
	margin: auto;
	padding-top: 30px;
  }
  .sect{
	width: 100%;
	border-radius: 10px;
  }


  

 

@media(max-width: 1068px){
    /* header */
    .mostrar-menu,
    .esconder-menu{
    display: block;
    }
	
    .menu{
        position: fixed;

        width: 100%;
        height: 100vh;
        background: white;
        right: -100%; 
        top: 0;
        text-align: center;
        padding: 100px 0px;
        z-index: 100;
        transition: 0.8s;
/* para que las cosas no aparezcan tan toscas */
    
    }
.menu a{
    display: block;
    padding: 20px;
   }
.esconder-menu{
position: absolute;
top: 40px;
right: 40px;

}
#check:checked  ~ .menu{
    right: 0;
   }}

@media screen and (max-width: 800px) {
	body {
		padding: 40px 0;
	
	}
	.semp{
		max-width: 400px;
		}
	

	.contenido-principal {
		flex-direction: column;
	}

	.contenido-principal > * {
		width: 100%;
	}
}
.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
right: 30px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}
.float:hover {
	text-decoration: none;
	color: #FFF;
  background-color:#1ab152;
    
    animation: shake 1s;

 
  animation-iteration-count: infinite;
}

.my-float{
	margin-top:16px;
}

.pulse{
	animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
	0% {
	 box-shadow: 0 0 0 0px #25d3664d rgba(0, 0, 0, 0.2);
	}
	100% {
	  box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
	}
  }
@media screen and (max-width: 2560px) {
table{
	width: 90%;
	
}


}
























































.containermmm .btn-float .btn{
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 2px;
    background-color: #0ae98a;
    padding: 15px 25px;
    border-radius: 20px;
    color: black;
    position: fixed;
    right:0px;
    bottom: 0px;
    transition: all 0.3s ease 0s;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
    z-index: 99;

    
}

/* .containermmm .btn-float .btn:hover{
    color: #fff;
	box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.5);
	transform: translateY(-7px);
} */

























































.containes{
	
	max-width: 1170px;
   
	margin: auto;   
}
.row{
	display: flex;
	flex-wrap: wrap;
}
ul{
	list-style: none;
}
/* footer */
.footer{
	background-color: white;
padding: 70px 0;

}
.footer-col{
width: 25%;
padding: 0 15px;
}
.footer-col h4{
	font-size: 18px;
	color: black;
	text-transform: capitalize;
	margin-bottom: 35px;
	font-weight: 500;
	position: relative;
}
.footer-col h4::before{

	content:"";
	position: absolute;
	left:0;
	bottom: -10px;
	background-color: #25d366;
	/* este es el color de abajo de las letras del footer */
	height: 2px;
	box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child){
	margin-bottom: 10px;
}
.footer-col ul li a{
	font-size: 15px;
	text-transform: capitalize;
	color: black;
	text-decoration: none;
	font-weight: 300;
	color: #9e9e9e;
	display: block;
	transition: all 0.3s ease ;
}
.footer-col ul li a:hover{
	color: black;
	padding-left: 8 px;

}
.footer-col .social-links a{
	display: inline-block;
	height: 40px;
	width: 40px;
	background-color:  rgba(255,255,255,0.2);
	margin:0 10px 10px 0;
	text-align: center;
	line-height: 40px;
	border-radius: 50%;
	color: black;
	transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
	color:#24262b;
	background-color: #ffffff;
}



/* ⬇︎parte fundamental para que la web sea responsive⬇︎ */
@media(max-width: 1068px){


/* footer */

.footer-col {
   width: 50%;
   margin-bottom: 30px; 
}


.footer-col {
	width:50%;
   
 }
}





















 




























.contenedormkmk{

	display: block; 
	margin: 20px auto; 
	width: 100%; 
	max-width: 600px; 
	padding: 20px;
	
  }
  .reproductor { 
	display: block; 
	width: 100%; 
	height: 100%; 
	padding-bottom: 56.25%; 
	overflow: hidden; 
	position: relative; 
	cursor: hand; 
	cursor: pointer; 
  }
  img.imagen-previa { 
	 display: block; 
	 left: 0; 
	 bottom: 0;
	 margin: auto; 
	 max-width: 100%; 
	 width: 100%; 
	 position: absolute; 
	 right: 0; 
	 top: 0; 
	 height: auto 
  }
  div.youtube-play { 
	 height: 64px; 
	 width: 64px; 
	 left: 50%; 
	 top: 50%; 
	 margin-left: -36px; 
	 margin-top: -36px;
	 opacity:0.7;
	 position: absolute; 
	 background:   url("https://cdn2.iconfinder.com/data/icons/social-icons-color/512/youtube-64.png") no-repeat; 
  }
  div.youtube-play:hover{
	 opacity:1; 
  }
  #youtube-iframe { 
	 width: 100%; 
	 height: 100%; 
	 position: absolute; 
	 top: 0; 
	 left: 0; 
  }





















  .erty {
	background: #f4f4f7;
	font-family: 'Open Sans', sans-serif;
}

a {
	text-decoration: none;
}

.contenedorqwr {
	width: 90%;
	max-width: 1000px;
	margin: auto;
	padding: 40px 0;
}

.selectbox {
	width: 50%;
	margin: auto;
	position: relative;
	
}

.select {
	background: #fff;
	width: 100%;
	box-shadow: 0px 0px 0px rgba(0, 0, 0, .16);
	border-radius: 10px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: .2s ease all;
	margin-bottom: 30px;
	padding: 30px;
	position: relative;
	z-index: 200;
	border: 2px solid transparent;
	border: 2px solid #0ae98a;
}

.select.active,
.select:hover {
	box-shadow: 0px 5px 10px rgba(0, 0, 0, .16);
	
}

.select.active:before {
	content: "";
	display: block;
	height: 0;
	width: 0;
	border-top: 15px solid #0ae98a;
	border-right: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 15px solid transparent;
	position: absolute;
	bottom: -30px;
	left: calc(50% - 15px);
}

.select i {
	font-size: 30px;
	margin-left: 30px;
	color: #0ae98a;
}

.tituloqwe {
	margin-bottom: 10px;
	color: #000;
	font-weight: 600;
	font-size: 30px;
}

.descripcionqwe {
	font-size: 18px;
	color: #434343;
}

.opciones {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0px 5px 10px rgba(0,0,0,.16);
	max-height: 400px;
	overflow: auto;
	z-index: 100;
	width: 100%;
	display: none;
}

.opciones.active {
	display: block;
	animation: fadeIn .3s forwards;
}

@keyframes fadeIn {
	from {
		transform: translateY(-200px) scale(.5);
	}
	to {
		transform: translateY(0) scale(1);
	}
}

.contenido-opcion {
	width: 100%;
	display: flex;
	align-items: center;
	transition: .2s ease all;
}

.opciones .contenido-opcion {
	padding: 30px;
}

.contenido-opcion img {
	width: 100px;
	height: 100px;
	margin-right: 30px;
}

.opciones .contenido-opcion:hover {
	background: #0ae98a;
}

.opciones .contenido-opcion:hover .titulo,
.opciones .contenido-opcion:hover .descripcion {
	color: #fff;
}

@media screen and (max-width: 800px){
	.selectbox {
		width: 100%;
	}
} 













.sss {
	position: relative;
	height:100%;
	height: 100%;
	align-items: center;
   padding: 30px;
   padding-top: 30px;

	
  }
  


  .peño {
	background: #fff;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #000;

	
  }

  swiper-container {
	width:87vw ;
	height: 50vh;
  
  }

  swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
  }

  swiper-slide img {
	  border-radius: 12px;
	width: auto;
	height: auto;
	max-width:100%;
	max-height: 560px;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	position: absolute;
	left: 50%;
	top: 50%;

  }


  

  .proce {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 1rem 0;
	background-color: white;
	border-radius: 1.5rem 1.5rem 0 0;
	box-shadow: 0px 0px 20px rgba(17, 17, 17, 0.25);
	display: flex;
	justify-content: space-evenly;
	align-items: center;
  }
  
  .price__title {
	font-size: x-large;
	color: #000;
	
	
  }
  
  .price__button {
	background-color: #46eb7e;
	color: black;
	padding: 1.25rem 3.125rem;
	border-radius: .5rem;
	transition: box-shadow .4s;
	
  }


  .img-gallery{
	width: 80%;
	margin: 50px auto 50px;
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
	gap: 30px;
}
.img-gallery img{
	width: 100%;
	cursor: pointer;
	transition: 1s;
}
.img-gallery img:hover{
	transform: scale(1.2);
}
.ful-img{
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0,0, 0.9);
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 99;
}
.ful-img span{
	position: absolute;
	top: 5%;
	right: 5%;
	font-size: 30px;
	color: #fff;
	cursor: pointer;
}
.ful-img img{
	width: 90%;
	max-width: 600px;
}

.xse{

	width: 60px;
	height: 60px;
}
.imgcentio{
	margin: 0 auto;
	
	max-width: 200px;
	max-height: 200px;
	
}

.contal{
	width: 60%;
	
	
	
	 margin: 0 auto;
	
}
.hdos{
	color: #666666;
	font-size: medium;
	text-align: center;
}
.florecer{
	color: red;
}
.peletra{
font-size: small;
}
.contiene{
	text-align: left;
	color: #666666;
}







  
.banner {
	margin-top: 50px;

	  width: 100%;
	  max-width: 500px;
	  background: linear-gradient(to right, #000000, #434343);
	  color: white;
	  position: relative;
	  text-align: center;
	  padding: 20px;
	  font-family: 'Poppins', sans-serif;
   
  }

  .banner h1 {
	  margin: 0;
	  font-size: 1.5em;
	  text-transform: uppercase;
  }

  .banner h1 .animated-text {
	  background: linear-gradient(90deg, #515BD4, #8134AF, #DD2A7B, #FEDA77, #F58529);
	  background-size: 300%;
	  -webkit-background-clip: text;
	  color: transparent;
	  animation: gradient 15s infinite;
	  font-size: 40px;
	  font-weight: 700;
  }

  @keyframes gradient {
	  0% { background-position: 0% 50%; }
	  50% { background-position: 100% 50%; }
	  100% { background-position: 0% 50%; }
  }

  .profile {
	  display: flex;
	  align-items: center;
	  margin-top: 20px;
  }

  .profile img {
	  border-radius: 50%;
	  width: 60px;
	  height: 60px;
	  margin-right: 20px;
  }

  .profile-info {
	  text-align: left;
  }

  .profile-info span {
	  margin: 0;
	  font-size: 1.2em;
	  margin-left: 5px;
	 
  }

  .profile-info p {
	  margin: 5px 0 0;
	  font-size: 0.9em;
	  color: white;
  }

  .video {
	  margin-top: 20px;
	  position: relative;
  }

  .video img {
	  width: 100%;
	  border-radius: 10px;
  }

  .play-button {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  width: 50px;
	  height: 250px;
  }