/*=============== GOOGLE FONTS ===============*/
 /* @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap'); */
 /* @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); */
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  --first-color: #5353d5;
  --title-color: #0d2f59;
  --text-color: #5a5e72;
  --body-color: #f4e5ff;
  --container-color: #fff;
  --border-color: #bfc4d9;

  /*========== Font and typography ==========*/
  --body-font: "Poppins", serif;
  --h2-font-size: 1.25rem;
  --normal-font-size: .938rem;

  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== z index ==========*/
  --z-fixed: 100;
  --z-modal: 1000;
}

/*========== Responsive typography ==========*/
@media screen and (min-width: 1023px) {
  :root {
    --h2-font-size: 1.5rem;
    --normal-font-size: 1rem;
  }
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body{
  width: 100%;
  height:100%;
  display: flex;
  flex-direction: column;
  background-color:#25282e;
  background-image:
  radial-gradient(at 49% 56%, hsla(220,11%,16%,1) 0px, transparent 50%),
  radial-gradient(at 51% 0%, hsla(240,59%,55%,0.51) 0px, transparent 50%);
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-repeat: no-repeat;
  background-size: cover;
}


input,
select,
button {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  color: var(--text-color);
}


/* input, */
button {
  border: none;
  outline: none;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

#main{
  display:none;
  width: 100%;
  flex: 1; 
  flex-direction: column;
  justify-content: center; 
  gap: 40px;
}

.home{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}

.information{
  display: flex;
  flex-direction: column;
  height: auto;
  align-items: center;
  /* margin-top: -3%; */
}


.firstTitle{
  font-size: clamp(20px, 5vw, 45px);
  font-weight: 250;
  color: #fff;
  opacity: 0.8;
  margin-bottom: -10px;
}

.secondTitle{
  display: flex;
  gap: 20px;
  color: #fff;
  opacity: 0.8;
  font-size: clamp(20px, 5vw, 60px);
  justify-content: center;
}

.desing{
  height: auto;
  width: clamp(50px, 10vw, 160px);
}

.svgDasboard{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
 margin-top: 8%;
  align-items: center;
  justify-content: center;
  row-gap: 70px;
}


#dasboard{
  display: flex;
  margin: 50px;
  width: max(280px, 40%);
  display: none;
  transform: skewX(20deg);
  transition: all ease-in 1s;
}


#dasboard{
  mask-image: linear-gradient(
    #000000 50%, transparent
  )
}


/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  display: flex;
  align-items: center;
  max-width: 1920px;
  height: auto;
  margin-inline: 2rem;
  padding: 50px;
}

/*=============== HEADER & NAV ===============*/


header{
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 80px;
  color: rgb(255,255,255);
  background: linear-gradient(to bottom, #212329, #25282e0c);
  display: none;
}

header .contenedor{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
  padding: 0 30px;
}

/*LOGO*/
header .logo{
  display: flex;
  align-items: center;
}
header .logo ion-icon{
  font-size: 35px;
  color: rgb(237,135,60);
  margin-right: 5px;
}
header .logo span{
  font-size: 25px;
  font-weight: 600;
  color: rgb(234, 217, 200);
}

.fondo-activado{
  background: #212329;
}

/*Menú opciones*/
header .menu-opciones{
  height: auto;
  mask-image: linear-gradient(
    #000000 50%, transparent
  )
}
header .menu-opciones ul{

  display: flex;
  flex-direction: row;
}
header .menu-opciones li{
  list-style: none;
  margin: 15px;
}
header .menu-opciones a{
  color: rgb(255,255,255);
  text-decoration: none;
  transition: color 0.2s ease;
}
header .menu-opciones a:hover{
  text-shadow: 1px 1px 10px #a767ec;
}

/*Controles usuario*/
header .controles-usuario{

  display: flex;
  gap: 20px;
  align-items: center;
  order: 1;
}
header .controles-usuario ion-icon{
  font-size: 25px;
  cursor: pointer;
  color: #5151d5;
}
header .controles-usuario ion-icon:hover{
  color: #5151d5;
  text-shadow: 1px 1px 10px #a767ec;
}



.btn_etikect {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 40px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  background-size: 500% auto;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  border-radius: 5px;
  border: 1px solid #fff;
  cursor: pointer;
}

.btn_etikect:hover {
  background-position: right center;
  border-image-source: linear-gradient(90deg, #d53a9d,#5352d5 );
  -webkit-box-shadow: 0 0 20px #5352d5;
  box-shadow: 0 0 20px #5352d5;
  color: rgb(255, 255, 255);
  text-shadow: 1px 1px 10px #d53a9d;
}

.space {
  background-image: -webkit-gradient(linear, left top, right top, from(#5352d5), color-stop(51%, #d53a9d), to(#5352d5));
  background-image: linear-gradient(to right, #5352d5 0%, #d53a9d 51%, #5352d5 100%);
  border-image-source: linear-gradient(45deg, #5352d5, #d53a9d );
  border-image-outset: 1em;
}

header #btn-menu{
  display: none;
  z-index: 1000;
}

/*Responsive*/
@media (max-width: 865px){
  header #btn-menu{
      display: block;
      z-index: 1000;
  }
  header .menu-opciones{
      height: 0vh;
      overflow: hidden;
      transition: height 0.5s ease;
  }
  header .menu-opciones.mostrar{
      height: 100vh;
  }
  header .menu-opciones.min{
      height: calc(100vh - 80px);
      overflow-y: auto;
  }
  header .menu-opciones ul{
      flex-direction: column;
      align-items: center;
  }
}
@media (max-width:325px){
  header .logo ion-icon{
      display: none;
  }
  header .logo span{
      font-size: 20px;
  }
}


/*=============== register ===============*/

.login {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-modal);
  background-color: hsla(230, 75%, 15%, .1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px); /* For safari */
  padding: 8rem 1.5rem 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
  overflow-y: auto;
}

.login__close {
  position: absolute;
  top: 1.2rem;
  left: 72.3%;
  font-size: 1.2rem;
  color: rgb(161, 161, 162);
  background-color: var(--body-color);
  border-radius: 50%;
  cursor: pointer;
}


/* Show login */
.show-login {
  opacity: 1;
  pointer-events: initial;
}

.show-login .login__form {
  transform: translateY(0);
}

.login__form{
  display: flex;
  justify-content: center;
}

.head__plan{
  display: flex;
  width: 100%;
  height: 50px;
  background-color: red;
}

.conteiner__general{
  display: flex;
  width: 100%;
  height: auto;
  justify-content: center;
}

.container__info{
  display: flex;
  min-width: 50%;
  flex-direction: column;
  flex-wrap: wrap;
  background-color: #fff;
  padding: 30px;
  gap: 35px;
  border-radius: 5px;
  /* overflow-y: scroll; */
  overflow: auto;
  margin-bottom: 30px;
}

.container__info h2{
  font-weight: bold;
  color: hsla(230, 12%, 40%, 0.819);
}

.container__info img{
  width: 80px;
  height: 80px;
}


.conteiner01{
  display: flex;
  position: relative;
  width: 20%;
  flex-grow: 2 ;
  flex-basis: 200;
  flex-direction: column;
  gap: 20px;
}


.contenedor__input{
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 5px;
}

.group_input_icon{
  display: flex;
  align-items: center;
  width: 100%;
  flex-direction: row;
  gap: 5px;
}

.obligatorio{
  font-size: 15px;
  color: #f66060;
}

.group_input_icon input,select{
  display: flex;
  width: 100%;
  height: 40px;
  font-size: 14px;
  border: none;
  outline: none;
  padding: 5px;
  line-height: 45px;

  transition: .3s ease all;
}


input:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(161, 118, 255, 0.5);
}


.form_error{
  font-size: 12px;
  margin-bottom: 0;
  display: none;
  color: #bb2929;
}

.form_error-activo{
  display: block;
}

.valid_estado{
  position: absolute;
  right: 10px;
  font-size: 13px;
  opacity: 0;
}

.contenedor__input label{
  display: flex;
  gap: 5px;
  font-size: 15px;
  font-weight: bold;
}

.contenedor__input span{
margin: 2.6px;
}

.container__datos{
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

::placeholder{
  padding: 5px;
  color: hsla(213, 75%, 20%, 0.168);
}

.conteiner__head{
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 30px;
}

.container__img_head{
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.container__img_head h6{
  display: flex;
  gap: 5px;
  font-size: 14px;
  color: var(--first-color);
}

.conteiner02{
  display: flex;
  flex-grow: 1 ;
  flex-basis: 200;
  flex-direction: column;
  gap: 8px;
  border: solid 1px #5858582c;
  padding: 8px;
  border-radius: 5px;
}

.conteiner02 strong{
  color: #5352d5;
  font-size: 16px;
}

.conteiner02 span{
  font-size: 14px;
}

.conteiner02 i{
  font-size: 18px;
}

.container__anual{
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.container__btn{
  display: flex;
  width: 100%;
  align-items: center;
}

.btn_group{
  display: flex;
  width: 100%;
  justify-content: end;
  gap: 20px;
}

.btn_group button {
  width: 150px;
  height: 45px;
  border-radius: 5px;
  font-weight: bold;
  letter-spacing: 0.5px;
  cursor: pointer;
}

.cancelar{
  display: flex;
  background-color: #e74c3c;
  color: #fff;
  width: auto;
  height: 45px;
  border-radius: 5px;
  font-weight: bold;
  letter-spacing: 0.5px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding:  0px 50px; 
}

.comprar{
  background-color: #5352d5;
  color: #fff;
}

.container__btn span{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 90%;
}




/* For large devices */
@media screen and (min-width: 1023px) {
  /* .nav {
    height: calc(var(--header-height) + 2rem);
    column-gap: 3rem;
  }
  .nav__close, 
  .nav__toggle {
    display: none;
  }
  .nav__menu {
    margin-left: auto;
  }
  .nav__list {
    flex-direction: row;
    column-gap: 3rem;
  } */

}

@media screen and (min-width: 1150px) {
  .container {
    margin-inline: auto;
  }
  
}

@media screen and (max-width: 600px) {
  .btn_group{
    justify-content: center;
    flex-direction: column;
  }

  .container__datos{
    flex-direction: column;
  }

  .conteiner01{
    width: 100%;
  }

  .container__btn{
    flex-direction: column-reverse;
    justify-content: center;
  }

  .btn_group button{
    width: 100%;
    height: 45px;
  }

  .container__btn span{
    width: 100%;
    justify-content: center;
    margin-top: 20px;
  }

.conteiner__head span{
  font-size: 20px;
}

.container__info h2{
  font-size: 20px;
}
  
}

/* VALIDACION FORM */

.contenedor__input-correcto 
.valid_estado {
  color: #1ed22d;
  opacity: 1;
}

.contenedor__input-correcto 
.group_input_icon input{
  border: solid 1px #1ed22d;
}

.contenedor__input-correcto 
.group_input_icon select{
  border: solid 1px #1ed22d;
}

.contenedor__input-incorrecto 
.valid_estado {
  color: #e74c3c;
  opacity: 1;
}

.contenedor__input-incorrecto 
.group_input_icon input {
  border: solid 1px #e74c3c;
}

.contenedor__input-incorrecto 
.group_input_icon select {
  border: solid 1px #e74c3c;
}

.my-swal{
  width: 350px !important; /* Ajusta el ancho */
  height: auto; /* Altura automática para ajustarse al contenido */
  padding: 0.7em !important; /* Espaciado interno */
  font-size: 0.9rem; /* Tamaño de fuente */
}

.my-swal2{
  width: 350px !important; /* Ajusta el ancho */
  height: auto; /* Altura automática para ajustarse al contenido */
  padding: 0.7em !important; /* Espaciado interno */
  font-size: 0.8rem; /* Tamaño de fuente */
  text-align: justify;
}

.titulo{
  font-size: 1.3rem;
}

.icon_swal{
  font-size: 7px;
}

.botones{
  cursor: pointer;
}

.selected{
  cursor: pointer;
  border: 2px solid #5352d5;
  border-radius: 5px;
  background-color: #f5f6ff;
}

.contenCheck{
  display: flex;
  justify-content: space-between;
}

.contenCheck input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 12px;
  height: 12px;
  border: 2px solid #333;
  border-radius: 2px;
  position: relative;
  cursor: pointer;
  margin-right: 10px;
  transition: background-color 0.3s, border 0.3s;
}

/* Estilo cuando el checkbox está marcado */
.contenCheck input[type="checkbox"]:checked {
  background-color: #5151d5; /* Color verde */
  border-color: #5151d5;
}

/* Marca de verificación personalizada */
.contenCheck input[type="checkbox"]:checked::before {
  content: '✓';
  position: absolute;
  top: -2px;
  left: 0px;
  color: rgb(255, 255, 255);
  font-size: 10px;
}

/* ========== ANIMATION SVG =============/ */


#retanngulo1  {
  animation: cambiarTamanoYTraslacion 6s ease-out infinite ;
}

#retanngulo2{
  animation: cambiarTamanoYTraslacion2 6s ease-out infinite ;
}

#retanngulo3{
  animation: cambiarTamanoYTraslacion3 6s ease-out infinite ;
}

#retanngulo4{
  animation: cambiarTamanoYTraslacion4 6s ease-out infinite ;
}

#retanngulo5{
  animation: cambiarTamanoYTraslacion5 6s ease-out infinite ;
}


@keyframes cambiarTamanoYTraslacion  {
  0%{
      height: 0px; 
      
  }

 100% {
      height: 88.16px;
      transform-origin: top !important;
  }
}

@keyframes cambiarTamanoYTraslacion2  {
  0%{
      height: 0px; 
      
  }

 100% {
      height: 119.58px;
      transform-origin: top !important;
  }

}

@keyframes cambiarTamanoYTraslacion3  {
  0%{
      height: 0px; 
      
  }

 100% {
      height: 18.24px;
      transform-origin: top !important;
  }

}

@keyframes cambiarTamanoYTraslacion4  {
  0%{
      height: 0px; 
      
  }

 100% {
      height: 35.47px;
      transform-origin: top !important;
  }

}

@keyframes cambiarTamanoYTraslacion5  {
  0%{
      height: 0px;
  }

 100% {
      height: 9.12px;
      transform-origin: top !important;
  }

}


#circulo {
  fill: #5352d5;
  stroke: #5352d5;
  stroke-width: 2;
  animation: animateCircle 4s ease-in infinite ;
}

@keyframes animateCircle {
  0% {
    stroke-width: 0;
  }
  50% {
    stroke-width: 5;
  }
  100% {
    stroke-width: 0;
  }
}

.st28 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000; 
animation: drawLine 5s ease-in-out forwards infinite; 
}

#st28{
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000; 
  animation: drawLine 5s ease-in-out forwards infinite; 
}

@keyframes drawLine {
to {
  stroke-dashoffset: 0;
}
}

.card1 {
  display: flex;
  position: absolute;
  width: 300px;
  height:200px;
  top: 50%;
  right: 20%;
  /* transform: skewX(20deg); */
  /* animation: agrandarCard1 3s ease-out infinite; */
}

@keyframes agrandarCard1 {
  0% {
    top: -5%;
    left: 32%;
    transform: skewX(20deg);
  }
  
  50% {
    top: 13.1%;
    left: 33.5%;
    transform: skewX(20deg) 
  }

  75% {
    top: 13.1%;
    left: 33.5%;
    transform: skewX(20deg) 
  }
  
  100% {
    top: 13.1%;
    left: 33.5%;
    transform: skewX(20deg);
    opacity: 0;
  }
}

.contentButton{
  display: flex;
  flex-direction: row;
  gap: 15px;
}



.typing-text::after {
  content: "";
  display: inline-block;
  color: #5352d5; 
  width: 7ch;
  animation: changeWord  10s ease-out  infinite;
}

/* Cambio de palabras */
@keyframes changeWord {
  0%, 100% {
    content: "Custom";
  }
  25% {
    content: "Users";
  }
  50% {
    content: "Storage";
  }
  75% {
    content: "Rent car";
  }
}

/* ===============SLIDER================== */

.slider {
  width: 45vw;
  height: auto;
  margin: auto;
  overflow: hidden;
  /* display: none; */
  margin-top: 100px;
}

.slider .slide-track {
  display: flex;
  animation: scroll 40s linear infinite;
  -webkit-animation: scroll 40s linear infinite;
  width: calc(100px * 12);
}

.slide-track img{
  width: 80px;
  height: auto;
  opacity: 0.1;
}

.slider .slide {
  width: 200px;
  /* filter: grayscale(100%); */
}



@keyframes scroll {
  0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
  }
  100% {
      -webkit-transform: translateX(calc(-200px * 7));
      transform: translateX(calc(-100px * 7));
  }
}


/* ============= NEW BTN============= */

.contenButton{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
}


.space2:hover {
  transition: all ease 2s;
  background-image: -webkit-gradient(linear, left top, right top, from(#5352d5), color-stop(51%, #d53a9d), to(#5352d5));
  background-image: linear-gradient(to right, #5352d5 0%, #d53a9d 51%, #5352d5 100%);
  border-image-source: linear-gradient(45deg, #5352d5, #d53a9d );
  border-image-outset: 1em;
}

/* ============dark mode============= */

.toggle {
  width: 45px;
  height: 45px;
  border-radius: 5%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  line-height: 1;
  background-color: transparent;
}

.toggle:hover {
  filter: drop-shadow(10px 10px 15px rgb(81, 81, 213));
}


.input {
  display: none;
}

.icon {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  transition: transform 500ms;
}

.icon--moon {
  transition-delay: 200ms;
}

.icon--sun {
  transform: scale(0);
}

#switch:checked + .icon--moon {
  transform: rotate(360deg) scale(0);
}

#switch:checked ~ .icon--sun {
  transition-delay: 200ms;
  transform: scale(1) rotate(360deg);
}

.iconsGroup{
  width: 89%;
  top: 23%;
  height: 500px;
  position: absolute;
  background-color: red
  var(--z-fixed)-1
}

.i01{
  left: 10%;
  top: -20%;
  position: absolute;
  animation: cambio-tamano 3s forwards infinite;
}
.i02{
  left: 3%;
  top: 10%;
  position: absolute;
  animation: cambio-tamano 5s forwards infinite
}

.i03{
  left: 15%;
  top: 40%;
  position: absolute;
  animation: cambio-tamano 7s forwards infinite
}

.i04{
  left: 8%; 
  top: 90%;
  position: absolute;
  animation: cambio-tamano 3s forwards infinite
}

.i05{
  right: 10%;
  top: -15%;
  position: absolute;
  animation: cambio-tamano 5s forwards infinite
}

.i06{
  right: 4%;
  top: 20%;
  position: absolute;
  animation: cambio-tamano 7s forwards infinite
}

.i07{
  right: 18%;
  top: 40%;
  position: absolute;
  animation: cambio-tamano 3s forwards infinite
}

.i08{
  right: 12%;
  top: 80%;
  position: absolute;
  animation: cambio-tamano 5s forwards infinite
}


.icons {
  background-color: #5151d5;
  font-size: 35px;
  color: #fff;
  padding: 10px;
  border-radius: 50%;
}

.icons{
  transition: all ease 2s;
  background-image: -webkit-gradient(linear, left top, right top, from(#5352d5), color-stop(10%, #d53a9c4d), to(#5352d5));
  background-image: linear-gradient(to right, hsl(240, 61%, 58%) 0%, #d53a9c50 0%, #5352d5 50%);
  border-image-source: linear-gradient(45deg, #5352d5, #d53a9c50 );
  border-image-outset: 1em;
}

@keyframes cambio-tamano {
  0% {
      transform: scale(0); /* Empieza muy pequeño */
      opacity: 0; 
      filter: blur(3px);
  }
  50% {
      transform: scale( 1); /* Se hace grande */
  }

  100% {
    transform: scale(0); /* Se hace grande */
}
  
}




.btn {
  width: 40px;
  height: 40px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  outline: 2px solid rgb(105, 127, 255);
  box-shadow: 0px 0px 10px rgb(105, 127, 255);
  position: relative;
  cursor: pointer;
}

.scroll {
  width: 5px;
  height: 13px;
  border-radius: 10px;
  background-color: rgb(105, 127, 255);
  box-shadow: 0px 0px 10px rgb(105, 127, 255);
  animation: scroll_4013 2s linear infinite;
  transform: translateY(40%);
  margin-top: -15px;
}

.btn:after {
  content: 'Explorar';
  opacity: 0.2;
  position: absolute;
  top: 140%;
  color: whitesmoke;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

@keyframes scroll_4013 {
  0% {
    transform: translateY(50%);
  }

  50% {
    transform: translateY(100%);
  }
};


.titleText{
  width: 100%;
  height: 100vh;
  display: block;
} 

span{
  flex-direction: row;
  color: #fff;
  font-size: 5rem;
  font-weight: 400;
  opacity: 0.9;
  text-shadow: 
                0 0 5px #5151d550,   /* Sombra púrpura */
                0 0 5px #5151d550,  /* Sombra más difusa */
                0 0 5px #5151d550,  /* Aumenta el tamaño */
                0 0 5px #5151d550,  /* Aumenta aún más */
                0 0 5px #5151d550,  /* Sombra aún más difusa */
                0 0 5px #5151d550,  /* Sombra más intensa */
                0 0 20px #5151d550;  /* Sombra más grande */
}

.titleText span {
  display: inline-block;
  animation: fadeInOut 6s forwards ;
  margin-top: -150px;
}



/* Animación inicial de las letras (desvanecerse y aumentar) */
@keyframes fadeInOut {
  0% {
      opacity: 1;
      transform: scale(1);
      filter: blur(0);
  }

  100% {
      opacity: 0;
      transform: scale(2);
      filter: blur(15px);
  }
}


/* Retrasos progresivos usando keyframes */
.titleText  span:nth-child(1) {
  animation-delay: 0s;
}

.titleText  span:nth-child(2) {
  animation-delay: 0.1s;
}

.titleText  span:nth-child(3) {
  animation-delay: 0.2s;
}

.titleText  span:nth-child(4) {
  animation-delay: 0.3s;
}

.titleText  span:nth-child(5) {
  animation-delay: 0.4s;
}

.titleText  span:nth-child(6) {
  animation-delay: 0.5s;
}

.titleText  span:nth-child(7) {
  animation-delay: 0.6s;
}

.titleText  span:nth-child(8) {
  animation-delay: 0.7s;
}

.porduct{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center ;
  width: 100%;
  min-height: 100vh;
  margin-top: 10%;
  gap: 50px;
}

.contenInfo{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 70px;
}

.contenInfo h1{
  display: flex;
  color: #fff;
  font-size: 2.5em;
  font-weight: 500;
  opacity: 0.8;
}

.contenInfo h3{
  display: flex;
  color: #fff;
  font-size: 1.1em;
  font-weight: 250;
  opacity: 0.8;
}

.contenProduct{
  display: flex;
  width: 65%;
  align-items: center;
  justify-content: space-between;
  gap: 100px;
}

.contenFeatures{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 50px;
}


.feature1 img{
  width: 100px;
  height: 100px;
}

.feature2 {
  display: flex;
  flex-direction: column;
 width: 100%;
 gap: 2px;
}

.feature2 h1{
  color: #fff;
  margin-bottom: 5px;
  opacity: 0.8;
}

.feature2 h3 {
  width:100%;
  height: 4.5em;
  font-size: 0.9em;
  font-weight: 350;
  color: #fff;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  text-overflow: ellipsis;
  text-align: justify;
  hyphens: auto;
  text-align-last: left;
  opacity: 0.9;
}

.btnMore{
  display: flex;
  color: #5151d5;
  font-size: 1em;
  align-items: center;
  gap: 5px;
}

.btnMore i{
  font-size: 1.5em;
}

.sectionCarateristica{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center ;
  width: 100%;
  min-height: 100vh;
  margin-top: 10%;
}

.contenCaracteristica{
  display: flex;
  height: auto;
  align-items: center;
  justify-content: center;
  margin-top: -60px;
  gap: 60px;
}



.imgCarateristica img{
  display: flex;
  width: 450px;
  height: auto;
  opacity: 0.7;
}

.infoCaracteristica{
  display: flex;
  width: 100%;
  height: auto;
  flex-direction: column;
}
.contenCheck{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.infoCaracteristica h1{
  display: flex;
  color: #fff;
  opacity: 0.8;
  margin-bottom: 5px;
}

.contenCheck p{
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  font-size: 1em;
  font-weight: 350;
  color: #fff;
  opacity: 0.8;
  gap: 8px;
}

.contenCheck p i{
  display: flex;
  font-size: 1.2em;
  color: #5352d5;
}

.reverseLeft{
  flex-direction: row-reverse;


  margin-top: -40px;
}

/* .reverseRight{
  margin-right: 10%;
} */

.flecha{
  width: 300px;
  transform: rotate(-80deg);
  margin-top: 200px;
  opacity: 0.2;
}

.tralateFlecha{
  transform: scaleY(-1);
}

.sectionCliente{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
  margin-top: 8%;
  margin-bottom: 8%;
}

.contenClinete{
  display: flex;
}

.clienteInfo{
  display: flex;
  width: 300px;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid #fff;
  opacity: 0.8;
}

.ecepcion{
  border-right: 1px solid transparent;
}

.clienteInfo h1{
  color: #5151d5;
  font-size: 3em;
  margin-bottom: -13px;
}

.clienteInfo h3{
  color: #fff;
  font-weight: 300;
  font-size: 1.2em;
}

/* Container for the carousel */
.carousel-container {
  width: 80%;
  max-width: 750px;
  overflow: hidden;
  border-radius: 5px;
}

/* Carousel itself */
.carousel {
  display: flex;
  animation: slide 20s  linear infinite;
}

/* Individual testimonials */
.testimonial {
  display: flex;
  flex-direction: row;
  min-width: 50%;
  padding: 10px;
  transition: transform 3s ease;
}

.testimonial-text {
  font-size: 14px;
  color: #fff;
  opacity: 0.8;
}

.testimonial-author {
  font-size: 17px;
  color: #5151d5;
  opacity: 0.8;
  font-weight: bold;
}

.contenCard{
  width: 350px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 5px;
  border: 2px solid #5151d532;
  padding: 10px;
}

/* Animation for sliding effect */
@keyframes slide {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-100%);
  }
}

.footer{
  display: flex;
  width: 100%;
  height: auto;
  color: #fff;
  align-items: center;
  justify-content: center;
  margin-top: 10%;
  gap: 40px;
  border-top: 1px solid #fff2;
}

@media (max-width: 920px){
    .footer{
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .contenLinks{
      gap: 50px;
      flex-wrap: wrap;
    }

    .contenFooter{
      width: 100%;
      align-items: start;
    }

    .contenComentario  textarea {
      justify-content: center;
      width: 100%;
    }

    .contenFooter{
      width: 90%  !important
    }
}

.contenFooter{
  display: flex;
  flex-direction: column;
  padding: 15px;
  width: 30%;
}

.contenFooter img{
  width: 150px;
  height: auto;
}

.contenFooter p{
  font-size: 0.9em;
  opacity: 0.8;
}

.contenFooter img{
  width: 150px;
  margin-bottom: -15px;
}

.contenLinks{
  display: flex;
  width: auto;
  gap: 50px;
  padding: 15px;
}

.contenLinks h1{
  display: flex;
  font-size: 1em;
  font-weight: 450;
  margin-bottom: 5px;
  color: #5151d5;
}

.contenLinks p{
  display: flex;
  font-size: 0.9em;
  font-weight: 300;
  opacity: 0.8;
}

.links{
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 9px;
}

.contenComentario{
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
}

.contenComentario label{
  color: #5151d5;
}

textarea{
  width: 220px;
  height: 60px;
  resize: none;
  outline: none;
  padding: 10px;
  background-color: transparent;
  border: 1px solid #fff 50;
  border-radius: 5px;
  font-family: Arial, Helvetica, sans-serif;
}

.largoBtn{
  width: 100%;
  cursor: pointer;
}


.button {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  border: none;
  background: linear-gradient(120deg, #833ab4, #fd1d1d, #fcb045);
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  transition: 0.1s;
}

.button svg {
  color: white;
  width: 30px;
  height: 30px;
  z-index: 9;
}

.button:nth-child(3) {
  background: linear-gradient(120deg, #02ff2c, #008a12);
}

.button:nth-child(4) {
  background: rgb(69, 187, 255);
}

.button:nth-child(5) {
  background: rgb(255, 33, 33);
}

.button:nth-child(6) {
  background: black;
}

.button:active {
  transform: scale(0.85);
}

.button::before {
  content: "";
  position: absolute;
  width: 55px;
  height: 55px;
  background-color: #25282e;
  border-radius: 50px;
  z-index: -1;
  border: 0px solid rgba(255, 255, 255, 0.411);
  transition: 0.4s;
}

.button:hover::before {
  width: 0px;
  height: 0px;
}

.contenMedia{
  display: flex;
  width: 100%;
  margin-top: 10px;
  gap: 5px;
}

.conteCopy{
  display: flex;
  width: 100%;
  padding: 4% 0% 4% 0%;
  align-items: center;
  gap: 20px;
  flex-direction: column;
}

.copy {
  display: flex;
  text-align: center;
  font-size: clamp(10px 10vw 10px);
  flex-direction: column;
  color: #ffffff;
  opacity: 0.8;
}

.linea{
  display: flex;
  width: 100%;
  background-color: #fff;
  opacity: 0.1;
}

.contact{
  display: flex;
  width: 100%;
  height: auto;
  align-items: center;
  justify-content: center;
}

.contenContact{
  margin-top: 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.headContact{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: -10px;
}

.headContact hr{
  background-color: #ffffff8f;
  width: 70px;
  opacity: 0.1;
  transform: rotate(90deg);
}

.headContact img{
  display: flex;
  width: 150px;
  height: auto;
  opacity: 0.8;
}

.headContact h2{
  color: #fff;
  opacity: 0.8;
}

.headContact p{
  color: #fff;
  font-size: 14px;
  opacity: 0.8;
}

hr{
  width: 640px;
 background-color: #fff;
 opacity: 0.1;
}

.cuadroEmail{
  display: flex;
  width: auto;
  padding: 20px;
  height: 130px;
  align-items: center;
  gap: 30px;
  background-color: #5151d5;
  border-radius: 5px;
  margin-top: 2%;
  cursor: pointer;
}


.cuadroEmail img {
  width: 100px;
  height: auto;
  font-size: 60px;
  color: #fff;
  opacity: 0.8;
}

.textContact h2{
  color: #fff;
  opacity: 0.8;
}

.textContact p{
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  opacity: 0.8;
}

.cuadroEmail button{
  width: 220px;
  height: 45px;
  border-radius: 5px;
  color: #fff;
  background-color: transparent;
  border: 2px solid #fff;
  opacity: 0.8;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.cuadroEmail button:hover{
  transform: scale(1.1);
  transition: ease-in 0.4s;
}


.footerContat{
  margin-top: 2%;
  gap: 15px;
}

.footerContat h1{
  color: #fff;
  font-size: 23px;
  font-weight: 300;
  opacity: 0.8;
}

.socialContact{
  display: flex;
  align-items: center;
  justify-content: center;
}


.detailContact{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contactNum{
  display: flex;
  gap: 5px;
  flex-direction: column;
}

.contactNum a{
  color: #fff;
  font-size: 13px;
  font-weight: 300;
  gap: 5px;
}

.contactNum i{
  color: #5151d5;
  font-size: 15px;
  margin-right: 2px;
}

.contactNum h1{
  color: #fff;
  font-size: 24px;
  font-weight: 400;
  opacity: 0.8;
}

.detailContact img{
  width: 170px;
  height: auto;
  display: flex; 
}

.plans{
  display: flex;
  flex-direction: row;
  gap:30px;
  width: 100%;
  height: auto;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}

.containerPLans{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: auto;
  gap: 50px;
  align-items: center;
  justify-content: center;
  margin-top: 10%;
}

.mySvg {
  stroke: #fff;
  opacity: 0.2;
}

.cardPlans h2{
  display: flex;
  color: #5151d5;
  font-weight: 400;
  /* justify-content: center; */
}

.cardPlans h1{
  display: flex;
  align-items: center;
  /* justify-content: center; */
  flex-direction: row;
  color: #5151d5;
  font-size: 3.5em;
}

.cardPlans p{
  display: flex;
  color: #fff;
  font-size: 12px;
  opacity: 0.8;

}

.cardPlans label{
  display: flex;
  margin-top: 15px;
  font-weight: 400;
  color: #fff;
  opacity: 0.8;
  font-size: 20px;
}

.cardPlans{
  display: flex;
  flex-direction: column;
  width: 250px;
  height: 600px;
  padding: 10px;
  gap: 10px;
  /* border:  1px solid #ffffff1f; */
  border-radius: 5px;
}

.contenFeactures{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 10px;
  gap: 15px;
}

.contenFeactures i{
  color: #5151d5;
  font-size: 18px;
}

  .contenFeactures p {
    display: flex;
    align-items: center;
    font-size: 14px;
    opacity: 0.8;
    gap: 10px;
  } 

  .plansBtn{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 40px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    background-size: 500% auto;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    border-radius: 5px;
    border: 1px solid #fff;
    cursor: pointer;
    margin-top: 15px;
  }

  .plansBtn:hover {
    background-position: right center;
    border-image-source: linear-gradient(90deg, #d53a9d,#5352d5 );
    -webkit-box-shadow: 0 0 20px #5352d5;
    box-shadow: 0 0 20px #5352d5;
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 10px #d53a9d;
  }
  
  .space {
    background-image: -webkit-gradient(linear, left top, right top, from(#5352d5), color-stop(51%, #d53a9d), to(#5352d5));
    background-image: linear-gradient(to right, #5352d5 0%, #d53a9d 51%, #5352d5 100%);
    border-image-source: linear-gradient(45deg, #5352d5, #d53a9d );
    border-image-outset: 1em;
  }

  .faq-container {
    width: 50%;
    margin: 20px auto;
    border-radius: 8px;
    padding: 20px;
}

.faq-item {
    margin-bottom: 10px;
}

.faq-question {
  display: flex;
  align-items: center;
    font-size: 17px;
    font-weight:600px;
    padding: 10px;
    color: #ffffffbc;
    background-color: #36363645;
    border-radius: 5px;
    cursor: pointer;
    justify-content: space-between;
}

.faq-question i{
  color: #5151d5;
}

.faq-question:hover {
    background-color: #5151d5;
}

.faq-answer {
    display: none; 
    padding: 10px;
    background-color: #7b7b7b3a;
    margin-top: 5px;
    border-radius: 5px;
    color: #fff;
}

#secsionFaq{
  margin-top: 8%;
}