* {
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Quicksand', sans-serif;

    overflow-x: hidden;


	
}

p {
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
}
/*---------------------------------------
   ESTILOS COMUNES            
-----------------------------------------*/


.section_title h2 {
    text-transform: uppercase;
    text-align: center;
    position: relative;
    color: #333;
    font-size: 30px;
    font-weight: 400;
}
.section_title h2:after {
    content: "";
    position: absolute;
    bottom: -20px;
    width: 60px;
    height: 1px;
    background-color: #f39c12;
    left: 50%;
    margin-left: -30px;
}
.section_title p {
    text-align: center;
    margin-top: 45px;
    color: #333;
    font-size: 18px;
    line-height: 28px;
    font-weight: 300;
}
.parallax {
    background-attachment: fixed !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
/*---------------------------------------
   SECCION HOME           
-----------------------------------------*/
/*menu*/

.header h2 {
    height: 0px;
    margin: 0px;
}


@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.header .section_overlay {
    background-color: rgba(127, 151, 181, .1);
}
.logo{
    padding-bottom: 0px;

}
.home_text{
    text-align: left;
}
.home-iphone{
    text-align: center;
}
.home-iphone img{
    width: 100%;
}

@media (max-width: 768px){
    .home-iphone{
        display: none;
    }
    .home_text{
        text-align: center;
    }

}
.home_text h1 {
    color: #96adbe;
    text-transform: uppercase;
    font-size: 25px;
    font-weight: 300;
    line-height: 45px;

}
.home_text p {
    color: #fff;
    font-size: 20px;
    line-height: 28px;
    margin-top: 0px;
    font-weight: 300;
}
.download-btn {
    margin-top: 50px;
    margin-bottom: 50px
}
.home-btn,
.home-btn:focus,
.home-btn:active,
.home-btn:visited {
    background: rgba(255, 255, 255, 0.5);

    color: #555252;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 16px;
	font-weight: 500;
    text-transform: uppercase;
    border-radius: 5px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;

}
.home-btn:hover {
    background: rgba(85, 82, 82, 0.5);
    color: #fff;

}

.home-btn2,
.home-btn2:focus,
.home-btn2:active,
.home-btn2:visited {
    background: rgba(223, 72, 78, 0.4);

    color: #fff;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 19x;
    text-transform: uppercase;
    border-radius: 3px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.home-btn2:hover {
    background-color: #fe7373;
    color: #fff;
}

.home-btn3,
.home-btn3:focus,
.home-btn3:active,
.home-btn3:visited {
    background: rgba(127, 151, 182, 0.4);

    color: #fff;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 19px;
    text-transform: uppercase;
    border-radius: 3px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;

}
.home-btn3:hover {
    background-color: #7f97b6;
    color: #fff;
}

.home-btn4,
.home-btn4:focus,
.home-btn4:active,
.home-btn4:visited {
    background: rgba(130, 181, 126, 0.4);

    color: #fff;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 19px;
    text-transform: uppercase;
    border-radius: 3px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.home-btn4:hover {
    background-color: #82b57e;
    color: #fff;
}

.home-btn5,
.home-btn5:focus,
.home-btn5:active,
.home-btn5:visited {
    background: rgba(236, 166, 119, 0.4);

    color: #fff;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 19px;
    text-transform: uppercase;
    border-radius: 3px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.home-btn5:hover {
    background-color: #eca677;
    color: #fff;
}

/*---------------------------------------
   SECTION FEATURES              
-----------------------------------------*/

.features {
/*background: #c0d1e5;*/
background-image: url("images/papel.jpg");
background-size: cover; 
background-position: center; 
background-repeat: no-repeat;
}
.feature_inner {
    padding-top: 30px;
    padding-bottom: 30px;
	
}
.feature_iphone {} .feature_iphone img {
    width: 100%;
}
.right_single_feature {
    position: relative;
    padding-left: 90px;
    margin-bottom: 15px;

}
.right_single_feature div {
    position: absolute;
    font-size: 40px;
    color: #f39c12;
    left: 0;
    width: 90px;
    height: 90px;
    text-align: center;

}
.right_single_feature h3 {
    text-transform: uppercase;
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 21px;
    color: #333333;
}
.right_single_feature h3 span {
    color: #f39c12;
}
.right_single_feature p {
    color: #333;
    font-size: 16px;
    font-weight: 300;
    line-height: 25px;
	margin-left: 25px;
}
/*left feature*/

.left_single_feature {
    position: relative;
    padding-right: 90px;
    margin-bottom: 15px;
    text-align: right;

}
.left_single_feature div {
    position: absolute;
    font-size: 40px;
    color: #f39c12;
    right: 0;
    width: 90px;
    height: 90px;
    text-align: center;

}
.left_single_feature h3 {
    text-transform: uppercase;
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 21px;
    color: #333333;
}
.left_single_feature h3 span {
    color: #f39c12;
}
.left_single_feature p {
    color: #333;
    font-size: 16px;
    font-weight: 300;
    line-height: 25px;
	margin-left: 25px;
}
.right_no_padding {
    padding-left: 15px;
}
.left_no_padding {
    padding-right: 15px;
}


@media (max-width: 768px) {
    .right_single_feature,
    .left_single_feature {
        padding-left: 0;
        padding-right: 0;
        text-align: center; /* Centra títulos y párrafos */
        margin: 0 10px; /* Márgenes laterales de 10px */
        box-sizing: border-box; /* Asegura que el padding/margen no rompa el ancho */
        max-width: calc(100% - 20px); /* Evita que sobresalga */
    }
	
	.left_single_feature h3,
	.right_single_feature h3 {
		text-transform: uppercase;
		font-size: 25px;
		font-weight: 700;
		margin-top: 20px;
		color: #333333;

	}	

		.right_single_feature p,
		.left_single_feature p {
			margin: 0;
			padding: 0;
			text-align: center; /* Centra el texto */
			word-wrap: break-word; /* Evita que palabras largas sobresalgan */
			margin-bottom: 30px !important; /* Reduce espacio entre elementos */
			margin: 0 20px; /* Márgenes laterales de 10px */
		}
		
	}







#planes,#planes ul,#planes ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}

#preciosPlanes:after {
	content: '';
	display: table;
	clear: both;
}

#preciosPlanes {
  width: 100vw !important;

  overflow-y: auto; /* si el contenido supera el alto, permite scroll */
  padding: 0;
  margin: 0;
  box-sizing: border-box;

}

#preciosPlanes {
	max-width: 89em;
	margin: 0 auto;
}

#preciosPlanes #planes {
  display: flex;
  flex-wrap: nowrap; /* evita que se rompan a la siguiente línea */
  justify-content: space-between;
  justify-content: center;     /* CENTRA los planes horizontalmente */
  gap: 2%;          
}

#preciosPlanes #planes .plan {
  background: transparent; /* o el color que prefieras */
  width: 33.333%;
  text-align: center;
  background-color: #f5f5f5;
  border-radius: 5px;
  box-shadow: none; /* opcional: elimina sombra si molesta */
}


@media (max-width: 768px) {
  #preciosPlanes #planes {
    flex-direction: column;
  }

  #preciosPlanes #planes .plan {
    width: 100%;
  }
}



.planContainer .title h2 {
	font-size: 25px;
	font-weight: 700;
	color: #3e4f6a;
	margin: 0;
	padding: .6em 0;
}

.planContainer .title h2.bestPlanTitle {
	background: #3e4f6a;

	background: -webkit-linear-gradient(top, #475975, #364761);
	background: -moz-linear-gradient(top, #475975, #364761);
	background: -o-linear-gradient(top, #475975, #364761);
	background: -ms-linear-gradient(top, #475975, #364761);
	background: linear-gradient(top, #475975, #364761);
	color: #fff;
	border-radius: 5px 5px 0 0;
}


.planContainer .price p {
	background: #82b57e;
font-family: 'Questrial', sans-serif;

	color: #fff;
	font-size: 40px;
	font-weight: 700;
	height: 1.4em;
	line-height: 1.6em;
	margin: 0 0 1em;
	display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    height: 100%; /* Asegura que ocupe toda la altura del contenedor */
    margin: 0; /* Elimina márgenes predeterminados del <p> */
    text-align: center; /* Fallback para compatibilidad */
	
	

}


.planContainer .price p.rojo {
	background: #fd7373;
}

.planContainer .price p.azul {
	background: #7f97b5;
}

.planContainer .price p.verde {
	background: #307260;
}

.planContainer .price p.naranja {
	background: #fd9773;
}

.planContainer .price p span {
	color: #8394ae;
}

.planContainer .options {
	margin-top: 10em;

}

.planContainer .options li {
	font-weight: 400;
	color: #364762;

}

.planContainer .options li span {
	font-weight: 700;
	color: #364762;

	
}

.planContainer .button a {
	text-transform: uppercase;
	text-decoration: none;
	color: #ed6e21;
	font-weight: 700;
	letter-spacing: 3px;
	line-height: 2.8em;
	border: 2px solid #ed6e21;
	display: inline-block;
	width: 80%;
	height: 2.8em;
	border-radius: 4px;
	margin: 1.5em 0 1.8em;
}

.planContainer .button a.bestPlanButton {
	color: #fff;
	background: #f7814d;
	border: 2px solid #f7814d;
}

#creditos {
	text-align: center;
	font-size: .8em;
	font-style: italic;
	color: #777;
}

#creditos a {
	color: #333;
}

#creditos a:hover {
	text-decoration: none;
}

@media screen and (min-width: 481px) and (max-width: 768px) {

#preciosPlanes #planes .plan {
	width: 49%;
	margin: 0 2% 20px 0;
}

#preciosPlanes #planes > li:nth-child(2n) {
	margin-right: 0;
}

}

@media screen and (min-width: 769px) and (max-width: 1024px) {

#preciosPlanes #planes .plan {
	width: 49%;
	margin: 0 2% 20px 0;
}

#preciosPlanes #planes > li:nth-child(2n) {
	margin-right: 0;
}

}

@media screen and (min-width: 1025px) {

#preciosPlanes {
	margin: 2em auto;
}

#preciosPlanes #planes .plan {
	width: 24%;
	margin: 0 1.33% 20px 0;

	-webkit-transition: all .25s;
	   -moz-transition: all .25s;
	    -ms-transition: all .25s;
	     -o-transition: all .25s;
	        transition: all .25s;
}

#preciosPlanes #planes > li:last-child {
	margin-right: 0;
}

#preciosPlanes #planes .plan:hover {
	-webkit-transform: scale(1.04);
	   -moz-transform: scale(1.04);
	    -ms-transform: scale(1.04);
	     -o-transform: scale(1.04);
	        transform: scale(1.04);
}

.planContainer .button a {
	-webkit-transition: all .25s;
	   -moz-transition: all .25s;
	    -ms-transition: all .25s;
	     -o-transition: all .25s;
	        transition: all .25s;
}

.planContainer .button a:hover {
	background: #ed6e21;
	color: #fff;
}

.planContainer .button a.bestPlanButton:hover {
	background: #ff9c70;
	border: 2px solid #ff9c70;
}

}







.planContainer .button01 a {
	text-transform: uppercase;
	text-decoration: none;
	color: #82b57e;
	font-weight: 700;
	letter-spacing: 3px;
	line-height: 2.8em;
	border: 2px solid #82b57e;
	display: inline-block;
	width: 80%;
	height: 2.8em;
	border-radius: 4px;
	margin: 0.5em 0 0.8em;

}
.planContainer .button01 a {
	-webkit-transition: all .25s;
	   -moz-transition: all .25s;
	    -ms-transition: all .25s;
	     -o-transition: all .25s;
	        transition: all .25s;
}

.planContainer .button01 a:hover {
	background: #82b57e;
	color: #fff;
}


.planContainer .button02 a {
	text-transform: uppercase;
	text-decoration: none;
	color: #7f97b5;
	font-weight: 700;
	letter-spacing: 3px;
	line-height: 2.8em;
	border: 2px solid #7f97b5;
	display: inline-block;
	width: 80%;
	height: 2.8em;
	border-radius: 4px;
	margin: 0.5em 0 0.8em;

}
.planContainer .button02 a {
	-webkit-transition: all .25s;
	   -moz-transition: all .25s;
	    -ms-transition: all .25s;
	     -o-transition: all .25s;
	        transition: all .25s;
}

.planContainer .button02 a:hover {
	background: #7f97b5;
	color: #fff;
}


.planContainer .button03 a {
	text-transform: uppercase;
	text-decoration: none;
	color: #fd9773;
	font-weight: 700;
	letter-spacing: 3px;
	line-height: 2.8em;
	border: 2px solid #fd9773;
	display: inline-block;
	width: 80%;
	height: 2.8em;
	border-radius: 4px;
	margin: 0.5em 0 0.8em;

}
.planContainer .button03 a {
	-webkit-transition: all .25s;
	   -moz-transition: all .25s;
	    -ms-transition: all .25s;
	     -o-transition: all .25s;
	        transition: all .25s;
}

.planContainer .button03 a:hover {
	background: #fd9773;
	color: #fff;
}


.planContainer .button04 a {
	text-transform: uppercase;
	text-decoration: none;
	color: #fd7373;
	font-weight: 700;
	letter-spacing: 3px;
	line-height: 2.8em;
	border: 2px solid #fd7373;
	display: inline-block;
	width: 80%;
	height: 2.8em;
	border-radius: 4px;
	margin: 0.5em 0 0.8em;

}
.planContainer .button04 a {
	-webkit-transition: all .25s;
	   -moz-transition: all .25s;
	    -ms-transition: all .25s;
	     -o-transition: all .25s;
	        transition: all .25s;
}

.planContainer .button04 a:hover {
	background: #fd7373;
	color: #fff;
}



.planContainer .descuento p {
	text-transform: uppercase;
	text-decoration: none;
	color: #fd7373;
	font-weight: 700;
	letter-spacing: 1px;
font-family: 'Questrial', sans-serif;
	font-size:35px;
	display: inline-block;
	width: 80%;

	border-radius: 4px;
	margin: 0.5em 0 0.8em;

}






.planContainer .app p {
	background: #ef9e1f;
font-family: 'Questrial', sans-serif;
	text-transform: uppercase;
	line-height: 1.1em;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
    margin-top:10px;		



}

.planContainer .app p.naranja {
	background: #ef551f;
}


.planContainer .adaptable p {

font-family: 'Questrial', sans-serif;
	text-transform: uppercase;
	line-height: 1.1em;
	color: #ef551f;
	font-size: 15px;
	font-weight: 600;
	margin-top:10px;
}

.planContainer .appregalo p {

font-family: 'Questrial', sans-serif;
	text-transform: uppercase;
	line-height: 1.1em;
	color: #319f38;
	font-size: 15px;
	font-weight: 600;
	margin-top:10px;
}

.planContainer .idealpara p {

font-family: 'Questrial', sans-serif;
	text-transform: uppercase;
	line-height: 1.1em;
	color: #375583;
	font-size: 15px;
	font-weight: 600;
	margin-top:10px;
}




/* ===========================
--- Contact
============================ */
.marginbot-80{margin-bottom:80px !important;}
.marginbot-20{margin-bottom:20px !important;}

.form-group {
  margin-bottom: 20px;
}

form#contact-form .form-group label {
	text-align: left !important;
	display: block;
	text-transform: uppercase;
	font-size: 16px;
}
form#contact-form input,form#contact-form select,form#contact-form textarea {
	font-size: 18px;
	line-height: 1.6em;
	border: 1px solid #eee;
	background:#e2e7ee;
  -webkit-box-shadow: none;
          box-shadow:  none;
	border-radius: 2px;
}

.btn-lg,
.btn-group-lg > .btn {
  border-radius: 2px;
}

form#contact-form input:focus,form#contact-form select:focus,form#contact-form textarea:focus {
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
          box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.input-group-addon {
  background-color: #fefefe;
  border: 1px solid #eee;
}

.widget-contact {
	text-align: left;
}



/* --- button --- */
.btn {
	border-radius: 2px;
	position: relative;
	display: inline-block;
	outline: none;

	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;	
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 14px;
}

.btn.btn-noradius {
	border-radius: 0;
}

a.btn:focus{
	outline: 0;
}

.btn-red {
  color: #fff;
  background-color: #c83539;
  border-color: #c83539;
}
.btn-red:hover,
.btn-red:focus,
.btn-red:active,
.btn-red.active {
  color: #fff;
  background-color: #666;
  border-color: #666;
}
.btn-red:active {
  background-image: none;
}


.btn-skin:hover,
.btn-skin:focus,
.btn-skin:active,
.btn-skin.active {
  color: #fff;
  background-color: #666;
  border-color: #666;
}


.btn-default:hover,
.btn-default:focus {
    border: 1px solid #28c3ab;
    outline: 0;
    color: #000;
    background-color: #28c3ab;
}

.btn-huge {
    padding: 25px;
    font-size: 26px;
}

.banner-social-buttons {
    margin-top: 0;
}




.spoiler{
     display:none;
}

#home {position:relative;}
.padbot0 {padding-bottom:0 !important;}







* { box-sizing: border-box; }
.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#vidtop-content {
	top: 0;
	color: #fff;
}
.vid-info { position: absolute; top: 0; right: 0; width: 33%; background: rgba(0,0,0,0.3); color: #fff; padding: 1rem; font-family: Avenir, Helvetica, sans-serif; }
.vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; }
.vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5); transition: .6s background; border-bottom: none; margin: 1rem auto; text-align: center; }
@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}






.arrow {
  text-align: center;
  margin-top: 8%;
  color: rgba(255, 255, 255, 0.5);

}
.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}



  .contenedor-logo {
    position: absolute;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }