:root{
  --colorZp: #f3ab18;
  --colorVerif: #0050ff;
  --colorZwips: #f99df0;
  --FFAlata: 'Alata', sans-serif;
  --FFCagliostro: 'Poppins', sans-serif;
  --FFJost: "Jost", sans-serif;
}

.hide{
  display: none;
}

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

body{
  font-family: var(--FFCagliostro);
}


.overflow{
  overflow: hidden;
  height: auto!important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

div.flex-row{
  position: relative;
}

.plugin-tel-sesion .iti{
  display: none;
}

/* #body .iti {
  position: relative;
  display: flex; 
}

#body .iti input, .iti input[type=text], .iti input[type=tel] {
    position: relative;
    z-index: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-right: 36px;
    margin-right: 0; 
}
#body .iti__flag-container {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    padding: 1px; 
    background: #fff;
    width: 60px;
    margin-right: 10px;
    border-radius: 4px;
}

.postal-input{
  position: absolute;
  top: 21%;
  z-index: 10;
  left: 20%;
  font-family: var(--FFCagliostro);
  color: #000;
  font-size: 16px;
  margin-bottom: 0px;
  
} */



/*-----Header-----*/

header{
  width: 100%;
  height: 650px;
  background: url( ../img/fondo-2.jpg);
  background-attachment: fixed;
  background-position:  center;
  background-size:  cover;
}

header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6); /* Cambia el color y opacidad según tus necesidades */
  z-index: 1;
}

header > * {
  position: relative;
  z-index: 2;
  /* Aquí puedes añadir más estilos para el contenido */
}





nav{
  width: 100%;
  position: fixed;;
  box-shadow: 0 0 10px rgba(0,0,0.5);
  background: #fff;
  z-index: 10000;
  color: #333;
}

.nav1{
  background: #fff;
  height: 60px;
  color: #333;
}
.nav2{ 
  background:  #fff;
  height: 70px;
  color: #333;
}


div.logo{
  width: 130px;
  margin-top: -6px;
}
div.logo a{
  text-decoration: none;
  color: #f3ab18;
  width: 100%;
}

div.logo a img{
  width: 100%;
  margin-left: 10px;
}


div.contenedor-nav{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

nav div.enlaces{
  margin-right: 10px;
}
div.enlaces-2 a.btn-header{
  display: inline-block;;
  padding: 5px 0px;
  margin-right: 25px;
  font-size: 18px;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  color: #444;
  margin-bottom: 0px;
  font-family: var(--FFAlata);
  font-weight: bold;
}

div.enlaces-2 a.btn-header:hover{
  border-bottom: 2px solid #FBA919;
  transition: 0.6s;
  text-decoration: none;
  color: #444;
}

div.contacto a.contactar{
  background: #f3ab18;
  padding: 4px 15px;
  font-family: var(--FFAlata);
  color: #333;
  font-weight: bold;
  font-size: 15px;
  text-transform: uppercase;
  border: none;
  margin-bottom: 2px;
  display: inline-block;
  text-decoration: none;
  color: #444;
  margin-right: 15px;
}
div.contacto a.contactar:hover{
  text-decoration: none;
  border: none;
  background: #f3ab18;
}


div.icono{
  display: none;
  font-size: 24px;
  padding: 23.5px 20px;
}
span.span-abrir{
  font-size: 35px;
  text-align: center;
}

/*-----Centro de la imagen fixed---*/

div.caja-fondo{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/*---Div texto coach  */

div.tipo-ordenador{
  display: block;
}
div.tipo-movil{
  display: none;
}

div.bienvenida-coach{
  width: 100%;
  padding: 22px 15px;
  margin-top: 5%;
}
div.datos-coach{
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
div.img-coach{
  width: 70px;
  height: 70px;
  display: block;
  margin-right: 10px;
}
div.img-coach img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  margin: auto;
}

div.coach-texto{
  width: 300px;
  height: auto;
  background: #fff;
  border-radius: 0px 10px 10px 10px;
  padding: 5px 5px 5px 10px;
  font-family: var(--FFCagliostro);
}

div.coach-texto p{
  margin: 0px;
  font-size: 16px;
}
div.coach-texto p span{
  color: orange;
  font-weight: bold;
}

div.coach-eleccion{
  margin: auto;
  margin-top: 10px;
}
div.coachelección{
  width: 300px;
  margin: auto;
  margin-top: 20px;
  text-align: center;
  background: #39b900;
  border-radius: 20px;
  padding: 3px;
  cursor: pointer;
  transition: 0.5s;
}
div.coachelección:hover, div.coachelección:active{
  background: green;
}
div.coachelección h3{
  font-family: var(--FFCagliostro);
  font-size: 22px;
  margin: 0px;
  color: #fff;
}


div#sesion-registro{
  display: none;
  width: 50%;
}
/*--Form-sesion----  */

div.caja-registro-sesion{
  width: 100%;
  margin-top: 2%;
  display: none;
}

div.sesion{
  width: 100%;
  margin-top: 2%;
}
form.sesion{
  width: 400px;
  margin: auto;
  margin-top: 20px;
}

div.input-div{
  position: relative;
  display: grid;
  grid-template-columns:  7% 93%;
  margin: 20px 0px;
  padding: 0px 0;
  border-bottom: 1px solid #fff;

}

input.input{
  position: absolute;
  width: 100%;
  height: 75%;
  top: 11px;
  left: 0;
  border: none;
  outline: none;
  background: none;
  padding: 6px 0px 0px 5px;
  font-size: 17px;
  color: #fff;
  font-family: var(--FFCagliostro);
}

.input-div > div{
  position: relative;
  height: 45px;
  color: #fff;
}

.input-div > div h5{
  position: absolute;
  left: 2px;
  top: 25px;
  transform: translateY(-50%);
  font-size: 16px;
  transition: .3s;
  color: #fff;
  font-family: var(--FFCagliostro);
}


.input-div.one{
  margin-top: 0;
}

.input-div.two{
  margin-bottom: 4px;
}

.input-div.focus .i span{
  color: orange;
}

.input-div:after, .input-div:before{
  content: '';
  position: absolute;
  bottom: -2px;
  width: 0xp;
  height: 2px;
  background-color: orange;
  transition: .3s;
}
.input-div:after{
  right: 50%;
}

.input-div:before{
  left: 50%;
}

.input-div.focus:after, .input-div.focus:before{
  width: 50%;
}


.input-div.focus div h5{
  top: 10px;
  font-size: 12px;
}

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

div.i span{
  color: #fff;
  font-size: 20px;
  transition: .4s;
}

i#mensajeNombre, i#mensajePassword{
  color: red;
  font-family: tw cen mt;
  font-weight: bold;
  letter-spacing: 1px;
}

div.show-paswwor{
  float: right;
  position: absolute;
  bottom: 0px;
  right: 0px;
}
div.show-paswwor label{
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
div.show-paswwor input{
  display: none;
}
div.show-paswwor label#ocultar{
  display: none;
}


a.olvidar{
  display: block;
  text-align: right;
  text-decoration: none;
  color: #eee;
  font-size: 16px;
  transition: .3s;
  margin-top: 20px;
  margin-bottom: 20px;
  font-family: var(--FFCagliostro);
  
}
a.olvidar:hover, a.olvidar:active{
  color: skyblue;
}

div.sesionando{
  width: 100%;
  text-align: center;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.sesionando p{
  color: #fff;
  font-size: 25px;
  margin-bottom: 0px;
  position: relative;
  top: 0px;
  margin-right: 5px;
  color: #39b900;
  background: #fff;
  border-radius: 7px;
  cursor: pointer;
  transition: 0.2s;
  font-family: var(--FFCagliostro);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 37px
}
div.sesionando p:hover, div.sesionando p:active{
  background: #ccc;
  transition: 0.2s
}

div.sesion button, div.sesionando button{
  outline: none
}

button.bottonSesion{
  width: 50%;
  padding: 5px 5px;
  border: none;
  border-radius: 20px;
  background: #39b900;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  font-family: var(--FFCagliostro);
  outline: none;
}

button.bottonSesion:active, button.bottonSesionando:active{
  outline: none;
  text-decoration: none;
  border: none;
}

.bottonSesionando{
  background: rgba(23,219,41,0.47);
  color: #aaa;
  width: 50%;
  padding: 5px 5px;
  border: none;
  border-radius: 20px;
  font-size: 18px;
  font-weight: bold;
  cursor:  none;
  font-family: var(--FFCagliostro);
  outline: none;
}


div.caja-tipo-sesion{
  width: 100%;
}

div.tipo-sesion{
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  padding: 5px 10px;
  border: 1px solid #f3ab18;
  border-radius: 50px;
  background: linear-gradient(90deg, rgba(232,231,237,0.4107842966288078) 0%, rgba(226,241,244,0.11106440867362566) 100%);
  font-family: var(--FFCagliostro);
  font-weight: bold;
}

div.tipo-sesion p{
  margin-bottom: 0px;
  text-align: center;
  width: 100%;
  font-size: 18px;
}

div.tipo-sesion span{
  width: 50px;
  font-size: 25px;
  text-align: center;
  color: #f3ab18;
}


div.flex-sesion-telefono{
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 30px;
}

div.pais-sesion-telefono{
  margin-right: 10px;
}
div.pais-sesion-telefono select{
  width: 115px;
  height: 45px;
  text-align: center;
  font-size: 18px;
  font-family: var(--FFAlata);
  border: none;
}

div.numero-sesion-telefono{
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 45px;
}

div.numero-sesion-telefono p{
  position: absolute;
  left: 7px;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: var(--FFAlata);
  font-size: 18px;
  color: #444;
}

div.numero-sesion-telefono input{
  width: 100%;
  height: 100%;
  font-family: var(--FFAlata);
  font-size: 18px;
}

div.numero-sesion-telefono input.pd-sm{
  padding-left: 30px;
}

div.numero-sesion-telefono input.pd-md{
  padding-left: 45px;
}

div.numero-sesion-telefono input.pd-lg{
  padding-left: 60px;
}


div.flexVerificacionLogin{
  width: 300px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: auto;
  overflow: hidden;
  margin-bottom: 25px;
}

div.flexVerificacionLogin input{
  text-align: center;
  width: 15%;
  height: 45px;
  font-size: 18px;
  font-family: var(--FFAlata);
}

.back-next{
  font-family: var(--FFCagliostro);
  cursor: pointer;
}

/*---Registro  */

form.caja-registrando{
  padding: 0px 0px;
  width: 100%;
  margin: auto;
  margin-top: 20px;
}


div.datos-form{
  width: 100%;
  margin: auto;
  padding: 0px;
}

div.datos-inputs{
  width: 400px;
  margin: auto;
  margin-top: 20px;
}
div.datos-inputs input{
   margin-bottom: 10px;
   padding: 20px 12px;
  font-family: var(--FFCagliostro);
}
div.datos-inputs select{
  height: 42px;
  font-family: var(--FFCagliostro);
}

div.flex{
  width: 100%;
  display: flex;
  justify-content: space-between;
}

div.flex div.select{
  width: 50%;
  margin-bottom: 10px;
}
div.flex div.select-2{
  width: 50%
}


div.flex-row{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

div.flex-row input{
  width: 100%;
  border-left: ;
  border-radius: 5px 5px 5px 5px;
  display: block;
}
div.flex-row div.iti{
  width: 100%;
}


div.direciones-registro{
  width: 200px;
  margin: auto;
  text-align: center;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

div.direciones-registro p{
  color: #fff;
  font-size: 25px;
  margin-bottom: 0px;
  position: relative;
  top: 2px;
  margin-right: 5px;
  color: #39b900;
  background: #fff;
  border-radius: 7px;
  cursor: pointer;
  transition: 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 38px;
}

div.direciones-registro p:hover, div.direciones-registro p:active{
  background: #ccc;
  transition: 0.2s
}

div.registrando{
  width: 400px;
  margin: auto;
  text-align: center;
  margin-top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.registrando p{
  color: #fff;
  font-size: 25px;
  margin-bottom: 0px;
  position: relative;
  top: 0px;
  margin-right: 5px;
  color: #39b900;
  background: #fff;
  border-radius: 7px;
  cursor: pointer;
  transition: 0.2s;
  font-family: var(--FFCagliostro);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 38px;
}
div.registrando p:hover, div.registrando p:active{
  background: #ccc;
  transition: 0.2s
}

div.registrando button.bottonRegistro{
  outline: none;
}
button.bottonRegistro, div.bottonRegistro{
  width: 50%;
  padding: 5px 5px;
  border: none;
  border-radius: 20px;
  background: #39b900;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  font-family: var(--FFCagliostro);
  outline: none;
}

button.bottonRegistro:active, div.bottonRegistro{
  outline: none;
}

.bottonRegistrando{
  background: rgba(23,219,41,0.47);
  color: #aaa;
  width: 50%;
  border: none;
  border-radius: 20px;
  font-size: 18px;
  font-weight: bold;
  cursor:  none;
  font-family: var(--FFCagliostro);
}

div.flex-reenviar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

div.flex-reenviar p.numero{
  color: #fff;
  font-family: var(--FFCagliostro);
  font-size: 15px;
  margin-bottom: 0px;
}
div.flex-reenviar p.reenviar{
  color: #4374e0;
  font-family: var(--FFCagliostro);
  font-size: 15px;
  margin-bottom: 0px;
}

/*-- Diseño de imagen app --*/

div.caja-apps{
  width: 100%;
  height: 40px;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
a.caja-img-app{
  width: 140px;
  height: 40px;
  outline: none;
  margin: 0px 5px;
}
a.caja-img-app img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  outline: none;
}

/*--Loading del registro  */

div#loadingRegistro, div#loadingVerificacion{
  width: 20px;
  height: 20px;
  display: none;
}

div#loadingSesion{
  width: 20px;
  height: 20px;
  display: none;
}
div#loadingSesionTelefono .lds-ring, div#loadingSesion .lds-ring{
  width: 18px;
  height: 18px;
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 14px;
  height: 14px;
  margin: 6px;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/*-- Coach Loading----*/

div#loaderCoach, div#loaderCoachVerf{
  width: 100%;
  margin: auto;
  text-align: left;
  color: #eee;
  display: none;
}
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ccc;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

#resultadoCoachRegistro, #resultadoCoachVerificado{
  display: none;
}

div.coach-textoAjax{
  width: 300px;
  height: auto;
  border-radius: 0px 10px 10px 10px;
  color: #fff;
  font-family: var(--FFCagliostro);
}

div.resultadoCoachRojo{
  background: #ff2051;
  height: auto;
  border-radius: 0px 10px 10px 10px;
  padding: 5px 5px 5px 10px;
  color: #fff;
}
div.resultadoCoachRojo.password{
  font-size: 14px;
}
div.resultadoCoachRojo.password.dos{
  margin-top: 7px;
  border-radius: 10px;
}
.resultadoCoachVerde{
  background: #39b900;
  height: auto;
  border-radius: 0px 10px 10px 10px;
  padding: 5px 5px 5px 10px;
  color: #fff;
}


div.resultadoCoachEntrar{
  margin-top: 10px;
  background: #fff;
  height: auto;
  border-radius: 0px 10px 10px 10px;
  padding: 5px 5px 5px 10px;
}
div#resultadoCoachRegistro a.entrando{
  text-decoration: none;
  cursor: pointer;
  font-family: var(--FFCagliostro);
}


/*-- Esilos del Slogan-----  */

div.caja-eslogan{
  position: relative;
  top: -32px;
  display: flex;
  justify-content: space-between;
}
div.subcaja-slogan{
  display: flex;
  justify-content: space-between;
  width: 100%;
}


div.slogan{
  text-align: center;
  width: 100%;
  padding: 0px 5px;
}

div.slogan span{
  color: #fff;
  background: #ed147d;
  font-size: 40px;
  border-radius: 50%;
  margin: 0px;
  display: block;
  width: 70px;
  height: 70px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}
div.slogan p{
  margin-bottom: 0px;
  color: #222;
  font-family: var(--FFCagliostro);
  font-size: 15px;
}



/*-- Contactar  */
div.caja-editar-publicacion{
  display: none;
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  transition: display 0.3s all linear;
  z-index: 10005;

}

div.modalCompartirPub{
  background: #fff;
  position: fixed;
  bottom: 0px;
  width: 100%;
  padding: 10px 0px 0px 0px;
  border-radius: 10px 10px 0px 0px;
  z-index: 100;
}
.mostrarHeramientasPub{
  transform: translateY(0%);
  transition: transform 0.4s;
}
.ocultarHeramientasPub{
  transform: translateY(100%);
  transition: transform 0.2s;
}
div.borderHeramientasPub{
  padding: 2px;
  margin: auto;
  display: block;
  width: 50px;
  background: #ccc;
  border-radius: 15px;
  margin-bottom: 10px;
}
div.cerrarHeramientasPub{
  padding: 8px 0px;
  border-top: 1px solid #ddd;
  text-align: center;
  font-family: var(--FFTw);
  color: var(--colorVerif);
  position: absolute;
  bottom: 0;
  width: 100%;
  display: none;
}


div.flex-headerHeramientasPub{
  display: flex;
  align-items: center;
}
div.flex-headerHeramientasPub span{
  font-size: 23px;
  padding: 5px 15px;
}
div.flex-headerHeramientasPub h3{
  font-size: 23px;
  font-family: var(--FFAlata);
  padding: 5px 0px;
  position: relative;
  top: 3px;
}
div.cuerpo-compartirPub{
  padding: 5px 10px;
}
div.cuerpo-compartirPub h4.titulo-compartirPub{
  font-size: 16px;
  text-align: center;
  margin-bottom: 20px;
  font-family: var(--FFCagliostro);
}

div.enlaces-compartirPub{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
div.enlaces-compartirPub a{
  margin: 10px;
  font-size: 40px;
  color: #333;
}


/*--- Estilo de loader ----*/

.loader-inicio{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #fff;
  z-index: 100000;
/*   background: linear-gradient(350deg, rgba(243,171,24,1) 24%, rgba(233,12,89,1) 100%);  */
}


div.caja-loader-inicio{
  width: 100%;
  margin: auto;
}

div.img-loader {
  width: 200px;
  margin: auto;
  animation: img-loader 1.7s infinite;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.caja-loader-inicio img{
  width: 90%;
}


@keyframes img-loader {
  50% {
    transform:scale(1.2)
   }
}





/*-----Estilos Responsive*/


@media screen and (max-width: 1080px){

  
  div.caja-span-contacto{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  div.icono{
    display: block;
    font-size: 24px;
    padding: 2px 15px;
  }
  span.span-abrir{
    font-size: 35px;
    text-align: center;
    color: #333;
    cursor: pointer;
  }

  div.enlaces{
    position: fixed;
    top: 60px;
    background: rgba(0,0,0,0.3);
    left: 0;
    height: 100%;
    width: 0;
    overflow: hidden;
  }
  div.enlaces-2{
    position: fixed;
    top: 60px;
    background: #2c3e50;
    left: 0;
    height: 100%;
    width: 0;
    transition: 0.6s;
    overflow: hidden;
  }
  div.enlaces-2 a.btn-header{
    display: block;;
    width: 100%;
    height: 60px;
    padding: 20px 10px 20px 40px;
    text-align: left;
    background: #34495e;
    color: #fff;
    margin-right: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  div.enlaces-2 a.btn-header:hover{
    border-bottom: 0px;
    transition: 0.6s;
    text-decoration: none;
    color: orange;
  }
  div.enlaces-2 a.btn-header:active{
    border-bottom: 0px;
    transition: 0.6s;
    text-decoration: none;
    color: orange;
  }
  
  div#sesion-registro{
    display: none;
    width: 60%;
  }
 
}



@media screen and (max-width: 770px){
  
  
  div#sesion-registro{
    display: none;
    width: 80%;
  }
  
 div.caja-eslogan{
    position: relative;
    top: 0px;
    display: block;
    margin-top: 10px;
  }
  div.subcaja-slogan{
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  div.slogan{
   text-align: center;
    width: 100%;
    padding: 10px 5px;
  }

  div.slogan span{
    color: #fff;
    background: #ed147d;
    font-size: 40px;
    border-radius: 50%;
  }
  div.slogan p{
    margin-bottom: 0px;
  }
  
}



@media screen and (max-width: 640px){
  
  header{
    height: 100vh;
  }
  div.tipo-ordenador{
    display: none;
  }
  div.tipo-movil{
    display: block;
  }
  div.bienvenida-coach{
    width: 100%;
    padding: 22px 15px;
    margin-top: 10%;
  }
  div.datos-coach{
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  div.img-coach{
    width: 70px;
    height: 70px;
    display: block;
    margin-right: 10px;
  }
  div.img-coach img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    margin: auto;
  }

  div.coach-texto{
    width: 300px;
    height: auto;
    background: #fff;
    border-radius: 0px 10px 10px 10px;
    padding: 5px 5px 5px 10px;
  }
  
  div.coach-texto p{
    margin: 0px;
    font-size: 16px;
  }
  
  div.coach-texto p span{
    color: orange;
    font-weight: bold;
  }
  
  div.coach-textoAjax{
    font-size: 16px;
  }

  div.coach-eleccion{
    margin: auto;
    margin-top: 10px;
    width: 100%;
  }
  
  div.coachelección{
    width: 70%;
    margin: auto;
    margin-top: 20px;
    text-align: center;
    background: #39b900;
    border-radius: 20px;
    padding: 3px;
    cursor: pointer;
    transition: 0.5s;
  }
  div.coachelección:hover, div.coachelección:active{
    background: green;
  }
  div.coachelección h3{
    font-size: 21px;
    margin: 0px;
    color: #fff;
    padding: 2px 0px;
  }

  
  div#sesion-registro{
    display: none;
    width: 100%;
  }
  div.caja-registro-sesion{
    width: 100%;
    margin-top: 10%;
    padding: 0px 10px;
  }
  div.sesion{
    width: 100%;
    margin-top: 0%;
    padding: 0px 10px
  }
  
  form.sesion{
    width: 80%;
    margin: auto;
    margin-top: 20px;
  }
  div.input-div{
    position: relative;
    display: grid;
    grid-template-columns:  7% 93%;
    margin: 20px 0px;
    padding: 0px 0;
    border-bottom: 1px solid #fff;
  }
  input.input{
    position: absolute;
    width: 100%;
    height: 75%;
    top: 11px;
    left: 0;
    border: none;
    outline: none;
    background: none;
    padding: 6px 0px 0px 5px;
    font-size: 17px;
    color: #fff;
  }
  .input-div > div{
    position: relative;
    height: 45px;
    color: #fff;
  }
  .input-div > div h5{
    position: absolute;
    left: 2px;
    top: 25px;
    transform: translateY(-50%);
    font-size: 15px;
    transition: .3s;
    color: #fff;
  }
  .input-div.one{
    margin-top: 0;
  }
  .input-div.two{
    margin-bottom: 4px;
  }
  .input-div.focus .i span{
    color: orange;
  }
  .input-div:after, .input-div:before{
    content: '';
    position: absolute;
    bottom: -2px;
    width: 0xp;
    height: 2px;
    background-color: orange;
    transition: .3s;
  }
  .input-div:after{
    right: 50%;
  }
  .input-div:before{
    left: 50%;
  }
  .input-div.focus:after, .input-div.focus:before{
    width: 50%;
  }
  .input-div.focus div h5{
    top: 10px;
    font-size: 11px;
  }
  div.i{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  div.i span{
    color: #fff;
    font-size: 20px;
    transition: .4s;
  }
  div.show-paswwor{
    float: right;
    position: absolute;
    bottom: 0px;
    right: 0px;
  }
  div.show-paswwor label{
    color: #fff;
    font-size: 18px;
    cursor: pointer;
  }
  div.show-paswwor input{
    display: none;
  }
  div.show-paswwor label#ocultar{
    display: none;
  }


  a.olvidar{
    display: block;
    text-align: right;
    text-decoration: none;
    color: #eee;
    font-size: 15px;
    transition: .3s;
    margin-top: 20px;
    margin-bottom: 20px;

  }
  a.olvidar:hover, a.olvidar:active{
    color: skyblue;
  }

  div.sesionando{
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }

  div.sesionando p{
    color: #fff;
    font-size: 25px;
    margin-bottom: 0px;
    position: relative;
    margin-right: 5px;
    color: #39b900;
    background: #fff;
    border-radius: 7px;
    cursor: pointer;
    transition: 0.2s;
  }
  div.sesionando p:hover, div.sesionando p:active{
    background: #ccc;
    transition: 0.2s
  }
  div.sesionando button{
    width: 60%;
    padding: 7px 7px;
    border: none;
    border-radius: 20px;
    /*background: #39b900;*/
    color: #fff;
    font-size: 18px;
    font-weight: bold;
  }

  
 /*---Registro  */

  form.caja-registrando{
    padding: 0px 0px;
    width: 100%;
    margin: auto;
    margin-top: 0px;
  }

  div.datos-form{
    width: 100%;
    margin: auto;
    padding: 0px;
    padding: 0px 10px;
  }

  div.datos-inputs{
    width: 80%;
    margin: auto;
    margin-top: 20px;
  }
  
  div.datos-inputs input{
    margin-bottom: 10px;
    padding: 20px 12px;
  }
  
  div.datos-inputs select{
    height: 42px;
  }

  div.flex{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  div.flex div.select{
    width: 49%;
    margin-bottom: 10px;
  }
  div.flex div.select-2{
    width: 49%
  }

  div.flex-row{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  div.direciones-registro{
    width: 200px;
    margin: auto;
    text-align: center;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
  }

  div.direciones-registro p{
    color: #fff;
    font-size: 25px;
    margin-bottom: 0px;
    position: relative;
    margin-right: 5px;
    color: #39b900;
    background: #fff;
    border-radius: 7px;
    cursor: pointer;
    transition: 0.2s;
  }

  div.direciones-registro p:hover, div.direciones-registro p:active{
    background: #ccc;
    transition: 0.2s
  }

  div.registrando{
    width: 100%;
    margin: auto;
    text-align: center;
    margin-top: 15px;
  }

  div.registrando p{
    color: #fff;
    font-size: 25px;
    margin-bottom: 0px;
    position: relative;
    margin-right: 5px;
    color: #39b900;
    background: #fff;
    border-radius: 7px;
    cursor: pointer;
    transition: 0.2s;
  }
  div.registrando p:hover, div.registrando p:active{
    background: #ccc;
    transition: 0.2s
  }
  button.bottonRegistro, div.bottonRegistro{
    width: 50%;
    padding: 7px 7px;
    border: none;
    border-radius: 20px;
    background: #39b900;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
  }

  .bottonRegistrando{
    width: 50%;
    background: rgba(23,219,41,0.47);
    color: #aaa;
    width: 50%;
    padding: 7px 7px;
    border: none;
    border-radius: 20px;
    font-size: 18px;
    font-weight: bold;
    cursor:  none;
  }
  
  .label-terminos label{
    margin-top: 17px;
  }
  
  .label-terminos label span{
    color: #fff;
    font-family: var(--FFCagliostro);
    font-size: 13px;
    line-height:25px;
    display: block;
    padding-top: 0px;
   
  }
  
   
  div.caja-eslogan{
    position: relative;
    top: 0px;
    display: block;
    margin-top: 10px;
  }
  div.subcaja-slogan{
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  div.slogan{
   text-align: center;
    width: 100%;
    padding: 10px 5px;
  }

  div.slogan span{
    color: #fff;
    background: #ed147d;
    font-size: 35px;
    border-radius: 50%;
    width: 60px;
    height: 60px;
  }
  div.slogan p{
    margin-bottom: 0px;
    font-size: 15px;
  }
  
  
}



@media screen and (max-width: 425px){
  
  div.logo img{
    width: 160px;
    margin-left: 5px;
  }

  div.contacto a.contactar{
    background: #f3ab18;
    padding: 4px 10px;
    color: #333;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    border: none;
    margin-bottom: 6px;
    display: inline-block;
    text-decoration: none;
    color: #444;
    margin-right: 5px;
  }
  div.icono{
    display: block;
    font-size: 24px;
    padding: 2px 5px;
    margin-right: 5px;
  }
  span.span-abrir{
    font-size: 32px;
    text-align: center;
    color: #333;
    cursor: pointer;
  }
  div.enlaces-2 a.btn-header{
    display: block;;
    width: 100%;
    height: 60px;
    padding: 20px 10px 20px 20px;
    text-align: left;
    background: #34495e;
    color: #fff;
    margin-right: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  
  div.caja-registro-sesion{
    width: 100%;
    margin-top: 15%;
  }

  div.coach-texto p, div.coach-textoAjax{
    font-size: 15px;
  }
  
  div.sesion{
    width: 100%;
    margin-top: 15%;
    padding: 0px 10px
  }
  form.sesion{
    width: 98%;
    margin: auto;
    margin-top: 20px;
  }
  div.sesionando{
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }

  div.sesionando p{
    color: #fff;
    margin-bottom: 0px;
    position: relative;
    margin-right: 5px;
    color: #39b900;
    background: #fff;
    border-radius: 7px;
    cursor: pointer;
    transition: 0.2s;
  }
  div.sesionando p:hover, div.sesionando p:active{
    background: #ccc;
    transition: 0.2s
  }
  div.sesionando button{
    width: 60%;
    border: none;
    border-radius: 20px;
    color: #fff;
    font-weight: bold;
  }

  
 /*---Registro  */

  form.caja-registrando{
    width: 100%;
    margin: auto;
    margin-top: 0px;
  }
  div.datos-form{
    width: 100%;
    margin: auto;
    padding: 0px;
    padding: 0px 10px;
  }
  div.datos-inputs{
    width: 98%;
    margin: auto;
    margin-top: 20px;
  }
  

  div.registrando{
    width: 100%;
    margin: auto;
    text-align: center;
    margin-top: 15px;
  }

  div.registrando p{
    color: #fff;
    margin-bottom: 0px;
    position: relative;
    margin-right: 5px;
    color: #39b900;
    background: #fff;
    border-radius: 7px;
    cursor: pointer;
    transition: 0.2s;
  }

  button.bottonRegistro{
    width: 50%;
    border: none;
    border-radius: 20px;
    background: #39b900;
    color: #fff;
    font-weight: bold;
  }

  .bottonRegistrando{
    width: 50%;
    background: rgba(23,219,41,0.47);
    color: #aaa;
    width: 50%;
    border: none;
    border-radius: 20px;
    font-size: 18px;
    font-weight: bold;
    cursor:  none;
  }
  
  
  
  div.caja-eslogan{
    position: relative;
    top: 0px;
    display: block;
    margin-top: 10px;
  }
  div.subcaja-slogan{
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  div.slogan{
   text-align: center;
   width: 80%;
   padding: 10px 5px;
    
  }

  div.slogan span{
    color: #fff;
    background: #ed147d;
    font-size: 35px;
    border-radius: 50%;
  }
  div.slogan p{
    margin-bottom: 0px;
    color: #444;
    font-size: 14px;
  }
}



@media screen and (max-width: 378px){
  
  div.coachelección{
    width: 82%;
    margin: auto;
    margin-top: 20px;
    text-align: center;
    background: #39b900;
    border-radius: 20px;
    padding: 3px;
    cursor: pointer;
    transition: 0.5s;
  }
  
  div.sesionando button{
    width: 63%;
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
  }
  
  button.bottonRegistro{
    width: 60%;
    border: none;
    border-radius: 20px;
    background: #39b900;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
  }

  .bottonRegistrando{
    width: 60%;
    background: rgba(23,219,41,0.47);
    color: #aaa;
    width: 50%;
    border: none;
    border-radius: 20px;
    font-size: 18px;
    font-weight: bold;
    cursor:  none;
  }
  
}







/*--- Modal para recuperar contraseña  */
div.caja-modal-password{
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: º00%;
  background: #475b8d;
  z-index: 10000;
  overflow: hidden;
}

div.cerrar-modal-password{
  position: fixed;
  top: 15px;
  left: 15px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
div.cerrar-modal-password svg{
  color: #fff;
  font-size: 20px;
}

span.skip-passwor{
  position: fixed;
  right: 15px;
  top: 20px;
  display: block;
  z-index: 10;
  background: #eee;
  width: 70px;
  text-align: center;
  font-size: 14px;
  border-radius: 50px;
  color: ;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--FFCagliostro);
}

@media screen and (min-width: 300px){
  div.caja-img-password{
    width: 100%;
    height: 315px;
    overflow: hidden;
    border-radius: 0px 0px 30px 30px;
    background: #fff;
  }
}

@media screen and (min-width: 350px){
  div.caja-img-password{
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: 0px 0px 30px 30px;
    background: #fff;
  }
}

div.caja-img-password figure{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0px 0px 30px 30px;
}


div.caja-img-password figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

div.footer-password{
  background: #475b8d;
  border-radius: 30px 30px 0px 0px;
  height: 100%;
  width: 100%;
}

div.contenedor-texto-password{
  width: 100%;
  position: relative;
}
div.caja-texto-password{
  padding: 10px 15px;
  color: #fff;
  position: absolute;
  top: 0px;
  transform: translateX(0%);
  transition: transform 0.2s;
}
div.caja-texto-password.ocultarIzquierda{
  transform: translateX(100%);
  transition: transform 0.2s;
}
div.caja-texto-password.ocultarDerecha{
  transform: translateX(-100%);
  transition: transform 0.2s;
}



div.caja-texto-password h3{
  font-family: var(--FFAlata);
  font-size: 17px;
  text-align: center;
  margin-top: 10px;
}

div.caja-texto-password p{
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 5px; 
}

div.caja-sliders-password{
  width: 100%;
  
}

div.sliders-password{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: fixed;
  bottom: 65px;
}

div.sliders-password span{
  display: block;
  width: 5px;
  height: 5px;
  background: #fff;
  margin: 5px;
  border-radius: 50%;
}
div.sliders-password span.active{
  width: 17px;
  border-radius: 5px;
  background: var(--colorZp);
  transition: 0.2s all;
}

div.direcion-password{
  position: fixed;
  bottom: 20px;
  left: 0px;
  width: 100%;
  z-index: 10;
}

div.direcion-password p{
  margin: auto;
  display: block;
  width: 180px;
  text-align: center;
  padding: 2px 15px;
  color: #fff;
  background: var(--colorZp);
  border-radius: 50px;
  margin-bottom: 0px;
  font-size: 20px;
  font-family: var(--FFCagliostro);
}

span.volver-password{
  position: fixed;
  left: 20px;
  bottom: 21px;
  background: #fff;
  width: 40px;
  padding: 5px 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}
span.volver-password svg{
  font-size: 20px;
  color: #39b900;
}



div.contenedor-formulario-password{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  display: block;
  position: fixed;
  bottom: 0px;
}
div.flex-formulario-password{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.caja-formulario-password{
  width: 100%;
  padding: 0px 15px;
}

div.caja-form-recPassword{
  padding: 10px;
  padding-top: 15px;
}

p.nota-psw{
  width: 100%;
  color: #fff;
  position: fixed;
  bottom: 15px;
  left: 0px;
  padding: 0px 10px;

}

:root{
  --colorZp: #f3ab18;
  --colorVerif: #0050ff;
  --colorZwips: #f99df0;
  --FFAlata: 'Alata', sans-serif;
  --FFCagliostro: 'Poppins', sans-serif;
  --FFJost: "Jost", sans-serif;
}

.hide{
  display: none;
}

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

body{
  font-family: var(--FFCagliostro);
}


.overflow{
  overflow: hidden;
  height: auto!important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

div.flex-row{
  position: relative;
}

.plugin-tel-sesion .iti{
  display: none;
}

/* #body .iti {
  position: relative;
  display: flex; 
}

#body .iti input, .iti input[type=text], .iti input[type=tel] {
    position: relative;
    z-index: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-right: 36px;
    margin-right: 0; 
}
#body .iti__flag-container {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    padding: 1px; 
    background: #fff;
    width: 60px;
    margin-right: 10px;
    border-radius: 4px;
}

.postal-input{
  position: absolute;
  top: 21%;
  z-index: 10;
  left: 20%;
  font-family: var(--FFCagliostro);
  color: #000;
  font-size: 16px;
  margin-bottom: 0px;
  
} */



/*-----Header-----*/

header{
  width: 100%;
  height: 650px;
  background: url( ../img/fondo-2.jpg);
  background-attachment: fixed;
  background-position:  center;
  background-size:  cover;
}

header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6); /* Cambia el color y opacidad según tus necesidades */
  z-index: 1;
}

header > * {
  position: relative;
  z-index: 2;
  /* Aquí puedes añadir más estilos para el contenido */
}





nav{
  width: 100%;
  position: fixed;;
  box-shadow: 0 0 10px rgba(0,0,0.5);
  background: #fff;
  z-index: 10000;
  color: #333;
}

.nav1{
  background: #fff;
  height: 60px;
  color: #333;
}
.nav2{ 
  background:  #fff;
  height: 70px;
  color: #333;
}


div.logo{
  width: 130px;
  margin-top: -6px;
}
div.logo a{
  text-decoration: none;
  color: #f3ab18;
  width: 100%;
}

div.logo a img{
  width: 100%;
  margin-left: 10px;
}


div.contenedor-nav{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

nav div.enlaces{
  margin-right: 10px;
}
div.enlaces-2 a.btn-header{
  display: inline-block;;
  padding: 5px 0px;
  margin-right: 25px;
  font-size: 18px;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  color: #444;
  margin-bottom: 0px;
  font-family: var(--FFAlata);
  font-weight: bold;
}

div.enlaces-2 a.btn-header:hover{
  border-bottom: 2px solid #FBA919;
  transition: 0.6s;
  text-decoration: none;
  color: #444;
}

div.contacto a.contactar{
  background: #f3ab18;
  padding: 4px 15px;
  font-family: var(--FFAlata);
  color: #333;
  font-weight: bold;
  font-size: 15px;
  text-transform: uppercase;
  border: none;
  margin-bottom: 2px;
  display: inline-block;
  text-decoration: none;
  color: #444;
  margin-right: 15px;
}
div.contacto a.contactar:hover{
  text-decoration: none;
  border: none;
  background: #f3ab18;
}


div.icono{
  display: none;
  font-size: 24px;
  padding: 23.5px 20px;
}
span.span-abrir{
  font-size: 35px;
  text-align: center;
}

/*-----Centro de la imagen fixed---*/

div.caja-fondo{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/*---Div texto coach  */

div.tipo-ordenador{
  display: block;
}
div.tipo-movil{
  display: none;
}

div.bienvenida-coach{
  width: 100%;
  padding: 22px 15px;
  margin-top: 5%;
}
div.datos-coach{
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
div.img-coach{
  width: 70px;
  height: 70px;
  display: block;
  margin-right: 10px;
}
div.img-coach img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  margin: auto;
}

div.coach-texto{
  width: 300px;
  height: auto;
  background: #fff;
  border-radius: 0px 10px 10px 10px;
  padding: 5px 5px 5px 10px;
  font-family: var(--FFCagliostro);
}

div.coach-texto p{
  margin: 0px;
  font-size: 16px;
}
div.coach-texto p span{
  color: orange;
  font-weight: bold;
}

div.coach-eleccion{
  margin: auto;
  margin-top: 10px;
}
div.coachelección{
  width: 300px;
  margin: auto;
  margin-top: 20px;
  text-align: center;
  background: #39b900;
  border-radius: 20px;
  padding: 3px;
  cursor: pointer;
  transition: 0.5s;
}
div.coachelección:hover, div.coachelección:active{
  background: green;
}
div.coachelección h3{
  font-family: var(--FFCagliostro);
  font-size: 22px;
  margin: 0px;
  color: #fff;
}


div#sesion-registro{
  display: none;
  width: 50%;
}
/*--Form-sesion----  */

div.caja-registro-sesion{
  width: 100%;
  margin-top: 2%;
  display: none;
}

div.sesion{
  width: 100%;
  margin-top: 2%;
}
form.sesion{
  width: 400px;
  margin: auto;
  margin-top: 20px;
}

div.input-div{
  position: relative;
  display: grid;
  grid-template-columns:  7% 93%;
  margin: 20px 0px;
  padding: 0px 0;
  border-bottom: 1px solid #fff;

}

input.input{
  position: absolute;
  width: 100%;
  height: 75%;
  top: 11px;
  left: 0;
  border: none;
  outline: none;
  background: none;
  padding: 6px 0px 0px 5px;
  font-size: 17px;
  color: #fff;
  font-family: var(--FFCagliostro);
}

.input-div > div{
  position: relative;
  height: 45px;
  color: #fff;
}

.input-div > div h5{
  position: absolute;
  left: 2px;
  top: 25px;
  transform: translateY(-50%);
  font-size: 16px;
  transition: .3s;
  color: #fff;
  font-family: var(--FFCagliostro);
}


.input-div.one{
  margin-top: 0;
}

.input-div.two{
  margin-bottom: 4px;
}

.input-div.focus .i span{
  color: orange;
}

.input-div:after, .input-div:before{
  content: '';
  position: absolute;
  bottom: -2px;
  width: 0xp;
  height: 2px;
  background-color: orange;
  transition: .3s;
}
.input-div:after{
  right: 50%;
}

.input-div:before{
  left: 50%;
}

.input-div.focus:after, .input-div.focus:before{
  width: 50%;
}


.input-div.focus div h5{
  top: 10px;
  font-size: 12px;
}

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

div.i span{
  color: #fff;
  font-size: 20px;
  transition: .4s;
}

i#mensajeNombre, i#mensajePassword{
  color: red;
  font-family: tw cen mt;
  font-weight: bold;
  letter-spacing: 1px;
}

div.show-paswwor{
  float: right;
  position: absolute;
  bottom: 0px;
  right: 0px;
}
div.show-paswwor label{
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
div.show-paswwor input{
  display: none;
}
div.show-paswwor label#ocultar{
  display: none;
}


a.olvidar{
  display: block;
  text-align: right;
  text-decoration: none;
  color: #eee;
  font-size: 16px;
  transition: .3s;
  margin-top: 20px;
  margin-bottom: 20px;
  font-family: var(--FFCagliostro);
  
}
a.olvidar:hover, a.olvidar:active{
  color: skyblue;
}

div.sesionando{
  width: 100%;
  text-align: center;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.sesionando p{
  color: #fff;
  font-size: 25px;
  margin-bottom: 0px;
  position: relative;
  top: 0px;
  margin-right: 5px;
  color: #39b900;
  background: #fff;
  border-radius: 7px;
  cursor: pointer;
  transition: 0.2s;
  font-family: var(--FFCagliostro);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 37px
}
div.sesionando p:hover, div.sesionando p:active{
  background: #ccc;
  transition: 0.2s
}

div.sesion button, div.sesionando button{
  outline: none
}

button.bottonSesion{
  width: 50%;
  padding: 5px 5px;
  border: none;
  border-radius: 20px;
  background: #39b900;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  font-family: var(--FFCagliostro);
  outline: none;
}

button.bottonSesion:active, button.bottonSesionando:active{
  outline: none;
  text-decoration: none;
  border: none;
}

.bottonSesionando{
  background: rgba(23,219,41,0.47);
  color: #aaa;
  width: 50%;
  padding: 5px 5px;
  border: none;
  border-radius: 20px;
  font-size: 18px;
  font-weight: bold;
  cursor:  none;
  font-family: var(--FFCagliostro);
  outline: none;
}


div.caja-tipo-sesion{
  width: 100%;
}

div.tipo-sesion{
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  padding: 5px 10px;
  border: 1px solid #f3ab18;
  border-radius: 50px;
  background: linear-gradient(90deg, rgba(232,231,237,0.4107842966288078) 0%, rgba(226,241,244,0.11106440867362566) 100%);
  font-family: var(--FFCagliostro);
  font-weight: bold;
}

div.tipo-sesion p{
  margin-bottom: 0px;
  text-align: center;
  width: 100%;
  font-size: 18px;
}

div.tipo-sesion span{
  width: 50px;
  font-size: 25px;
  text-align: center;
  color: #f3ab18;
}


div.flex-sesion-telefono{
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 30px;
}

div.pais-sesion-telefono{
  margin-right: 10px;
}
div.pais-sesion-telefono select{
  width: 115px;
  height: 45px;
  text-align: center;
  font-size: 18px;
  font-family: var(--FFAlata);
  border: none;
}

div.numero-sesion-telefono{
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 45px;
}

div.numero-sesion-telefono p{
  position: absolute;
  left: 7px;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: var(--FFAlata);
  font-size: 18px;
  color: #444;
}

div.numero-sesion-telefono input{
  width: 100%;
  height: 100%;
  font-family: var(--FFAlata);
  font-size: 18px;
}

div.numero-sesion-telefono input.pd-sm{
  padding-left: 30px;
}

div.numero-sesion-telefono input.pd-md{
  padding-left: 45px;
}

div.numero-sesion-telefono input.pd-lg{
  padding-left: 60px;
}


div.flexVerificacionLogin{
  width: 300px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: auto;
  overflow: hidden;
  margin-bottom: 25px;
}

div.flexVerificacionLogin input{
  text-align: center;
  width: 15%;
  height: 45px;
  font-size: 18px;
  font-family: var(--FFAlata);
}

.back-next{
  font-family: var(--FFCagliostro);
  cursor: pointer;
}

/*---Registro  */

form.caja-registrando{
  padding: 0px 0px;
  width: 100%;
  margin: auto;
  margin-top: 20px;
}


div.datos-form{
  width: 100%;
  margin: auto;
  padding: 0px;
}

div.datos-inputs{
  width: 400px;
  margin: auto;
  margin-top: 20px;
}
div.datos-inputs input{
   margin-bottom: 10px;
   padding: 20px 12px;
  font-family: var(--FFCagliostro);
}
div.datos-inputs select{
  height: 42px;
  font-family: var(--FFCagliostro);
}

div.flex{
  width: 100%;
  display: flex;
  justify-content: space-between;
}

div.flex div.select{
  width: 50%;
  margin-bottom: 10px;
}
div.flex div.select-2{
  width: 50%
}


div.flex-row{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

div.flex-row input{
  width: 100%;
  border-left: ;
  border-radius: 5px 5px 5px 5px;
  display: block;
}
div.flex-row div.iti{
  width: 100%;
}


div.direciones-registro{
  width: 200px;
  margin: auto;
  text-align: center;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

div.direciones-registro p{
  color: #fff;
  font-size: 25px;
  margin-bottom: 0px;
  position: relative;
  top: 2px;
  margin-right: 5px;
  color: #39b900;
  background: #fff;
  border-radius: 7px;
  cursor: pointer;
  transition: 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 38px;
}

div.direciones-registro p:hover, div.direciones-registro p:active{
  background: #ccc;
  transition: 0.2s
}

div.registrando{
  width: 400px;
  margin: auto;
  text-align: center;
  margin-top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.registrando p{
  color: #fff;
  font-size: 25px;
  margin-bottom: 0px;
  position: relative;
  top: 0px;
  margin-right: 5px;
  color: #39b900;
  background: #fff;
  border-radius: 7px;
  cursor: pointer;
  transition: 0.2s;
  font-family: var(--FFCagliostro);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 38px;
}
div.registrando p:hover, div.registrando p:active{
  background: #ccc;
  transition: 0.2s
}

div.registrando button.bottonRegistro{
  outline: none;
}
button.bottonRegistro, div.bottonRegistro{
  width: 50%;
  padding: 5px 5px;
  border: none;
  border-radius: 20px;
  background: #39b900;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  font-family: var(--FFCagliostro);
  outline: none;
}

button.bottonRegistro:active, div.bottonRegistro{
  outline: none;
}

.bottonRegistrando{
  background: rgba(23,219,41,0.47);
  color: #aaa;
  width: 50%;
  border: none;
  border-radius: 20px;
  font-size: 18px;
  font-weight: bold;
  cursor:  none;
  font-family: var(--FFCagliostro);
}

div.flex-reenviar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

div.flex-reenviar p.numero{
  color: #fff;
  font-family: var(--FFCagliostro);
  font-size: 15px;
  margin-bottom: 0px;
}
div.flex-reenviar p.reenviar{
  color: #4374e0;
  font-family: var(--FFCagliostro);
  font-size: 15px;
  margin-bottom: 0px;
}

/*-- Diseño de imagen app --*/

div.caja-apps{
  width: 100%;
  height: 40px;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
a.caja-img-app{
  width: 140px;
  height: 40px;
  outline: none;
  margin: 0px 5px;
}
a.caja-img-app img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  outline: none;
}

/*--Loading del registro  */

div#loadingRegistro, div#loadingVerificacion{
  width: 20px;
  height: 20px;
  display: none;
}

div#loadingSesion{
  width: 20px;
  height: 20px;
  display: none;
}
div#loadingSesionTelefono .lds-ring, div#loadingSesion .lds-ring{
  width: 18px;
  height: 18px;
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 14px;
  height: 14px;
  margin: 6px;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/*-- Coach Loading----*/

div#loaderCoach, div#loaderCoachVerf{
  width: 100%;
  margin: auto;
  text-align: left;
  color: #eee;
  display: none;
}
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ccc;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

#resultadoCoachRegistro, #resultadoCoachVerificado{
  display: none;
}

div.coach-textoAjax{
  width: 300px;
  height: auto;
  border-radius: 0px 10px 10px 10px;
  color: #fff;
  font-family: var(--FFCagliostro);
}

div.resultadoCoachRojo{
  background: #ff2051;
  height: auto;
  border-radius: 0px 10px 10px 10px;
  padding: 5px 5px 5px 10px;
  color: #fff;
}
div.resultadoCoachRojo.password{
  font-size: 14px;
}
div.resultadoCoachRojo.password.dos{
  margin-top: 7px;
  border-radius: 10px;
}
.resultadoCoachVerde{
  background: #39b900;
  height: auto;
  border-radius: 0px 10px 10px 10px;
  padding: 5px 5px 5px 10px;
  color: #fff;
}


div.resultadoCoachEntrar{
  margin-top: 10px;
  background: #fff;
  height: auto;
  border-radius: 0px 10px 10px 10px;
  padding: 5px 5px 5px 10px;
}
div#resultadoCoachRegistro a.entrando{
  text-decoration: none;
  cursor: pointer;
  font-family: var(--FFCagliostro);
}


/*-- Esilos del Slogan-----  */

div.caja-eslogan{
  position: relative;
  top: -32px;
  display: flex;
  justify-content: space-between;
}
div.subcaja-slogan{
  display: flex;
  justify-content: space-between;
  width: 100%;
}


div.slogan{
  text-align: center;
  width: 100%;
  padding: 0px 5px;
}

div.slogan span{
  color: #fff;
  background: #ed147d;
  font-size: 40px;
  border-radius: 50%;
  margin: 0px;
  display: block;
  width: 70px;
  height: 70px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}
div.slogan p{
  margin-bottom: 0px;
  color: #222;
  font-family: var(--FFCagliostro);
  font-size: 15px;
}



/*-- Contactar  */
div.caja-editar-publicacion{
  display: none;
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  transition: display 0.3s all linear;
  z-index: 10005;

}

div.modalCompartirPub{
  background: #fff;
  position: fixed;
  bottom: 0px;
  width: 100%;
  padding: 10px 0px 0px 0px;
  border-radius: 10px 10px 0px 0px;
  z-index: 100;
}
.mostrarHeramientasPub{
  transform: translateY(0%);
  transition: transform 0.4s;
}
.ocultarHeramientasPub{
  transform: translateY(100%);
  transition: transform 0.2s;
}
div.borderHeramientasPub{
  padding: 2px;
  margin: auto;
  display: block;
  width: 50px;
  background: #ccc;
  border-radius: 15px;
  margin-bottom: 10px;
}
div.cerrarHeramientasPub{
  padding: 8px 0px;
  border-top: 1px solid #ddd;
  text-align: center;
  font-family: var(--FFTw);
  color: var(--colorVerif);
  position: absolute;
  bottom: 0;
  width: 100%;
  display: none;
}


div.flex-headerHeramientasPub{
  display: flex;
  align-items: center;
}
div.flex-headerHeramientasPub span{
  font-size: 23px;
  padding: 5px 15px;
}
div.flex-headerHeramientasPub h3{
  font-size: 23px;
  font-family: var(--FFAlata);
  padding: 5px 0px;
  position: relative;
  top: 3px;
}
div.cuerpo-compartirPub{
  padding: 5px 10px;
}
div.cuerpo-compartirPub h4.titulo-compartirPub{
  font-size: 16px;
  text-align: center;
  margin-bottom: 20px;
  font-family: var(--FFCagliostro);
}

div.enlaces-compartirPub{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
div.enlaces-compartirPub a{
  margin: 10px;
  font-size: 40px;
  color: #333;
}


/*--- Estilo de loader ----*/

.loader-inicio{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #fff;
  z-index: 100000;
/*   background: linear-gradient(350deg, rgba(243,171,24,1) 24%, rgba(233,12,89,1) 100%);  */
}


div.caja-loader-inicio{
  width: 100%;
  margin: auto;
}

div.img-loader {
  width: 200px;
  margin: auto;
  animation: img-loader 1.7s infinite;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.caja-loader-inicio img{
  width: 90%;
}


@keyframes img-loader {
  50% {
    transform:scale(1.2)
   }
}





/*-----Estilos Responsive*/


@media screen and (max-width: 1080px){

  
  div.caja-span-contacto{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  div.icono{
    display: block;
    font-size: 24px;
    padding: 2px 15px;
  }
  span.span-abrir{
    font-size: 35px;
    text-align: center;
    color: #333;
    cursor: pointer;
  }

  div.enlaces{
    position: fixed;
    top: 60px;
    background: rgba(0,0,0,0.3);
    left: 0;
    height: 100%;
    width: 0;
    overflow: hidden;
  }
  div.enlaces-2{
    position: fixed;
    top: 60px;
    background: #2c3e50;
    left: 0;
    height: 100%;
    width: 0;
    transition: 0.6s;
    overflow: hidden;
  }
  div.enlaces-2 a.btn-header{
    display: block;;
    width: 100%;
    height: 60px;
    padding: 20px 10px 20px 40px;
    text-align: left;
    background: #34495e;
    color: #fff;
    margin-right: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  div.enlaces-2 a.btn-header:hover{
    border-bottom: 0px;
    transition: 0.6s;
    text-decoration: none;
    color: orange;
  }
  div.enlaces-2 a.btn-header:active{
    border-bottom: 0px;
    transition: 0.6s;
    text-decoration: none;
    color: orange;
  }
  
  div#sesion-registro{
    display: none;
    width: 60%;
  }
 
}



@media screen and (max-width: 770px){
  
  
  div#sesion-registro{
    display: none;
    width: 80%;
  }
  
 div.caja-eslogan{
    position: relative;
    top: 0px;
    display: block;
    margin-top: 10px;
  }
  div.subcaja-slogan{
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  div.slogan{
   text-align: center;
    width: 100%;
    padding: 10px 5px;
  }

  div.slogan span{
    color: #fff;
    background: #ed147d;
    font-size: 40px;
    border-radius: 50%;
  }
  div.slogan p{
    margin-bottom: 0px;
  }
  
}



@media screen and (max-width: 640px){
  
  header{
    height: 100vh;
  }
  div.tipo-ordenador{
    display: none;
  }
  div.tipo-movil{
    display: block;
  }
  div.bienvenida-coach{
    width: 100%;
    padding: 22px 15px;
    margin-top: 10%;
  }
  div.datos-coach{
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  div.img-coach{
    width: 70px;
    height: 70px;
    display: block;
    margin-right: 10px;
  }
  div.img-coach img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    margin: auto;
  }

  div.coach-texto{
    width: 300px;
    height: auto;
    background: #fff;
    border-radius: 0px 10px 10px 10px;
    padding: 5px 5px 5px 10px;
  }
  
  div.coach-texto p{
    margin: 0px;
    font-size: 16px;
  }
  
  div.coach-texto p span{
    color: orange;
    font-weight: bold;
  }
  
  div.coach-textoAjax{
    font-size: 16px;
  }

  div.coach-eleccion{
    margin: auto;
    margin-top: 10px;
    width: 100%;
  }
  
  div.coachelección{
    width: 70%;
    margin: auto;
    margin-top: 20px;
    text-align: center;
    background: #39b900;
    border-radius: 20px;
    padding: 3px;
    cursor: pointer;
    transition: 0.5s;
  }
  div.coachelección:hover, div.coachelección:active{
    background: green;
  }
  div.coachelección h3{
    font-size: 21px;
    margin: 0px;
    color: #fff;
    padding: 2px 0px;
  }

  
  div#sesion-registro{
    display: none;
    width: 100%;
  }
  div.caja-registro-sesion{
    width: 100%;
    margin-top: 10%;
    padding: 0px 10px;
  }
  div.sesion{
    width: 100%;
    margin-top: 0%;
    padding: 0px 10px
  }
  
  form.sesion{
    width: 80%;
    margin: auto;
    margin-top: 20px;
  }
  div.input-div{
    position: relative;
    display: grid;
    grid-template-columns:  7% 93%;
    margin: 20px 0px;
    padding: 0px 0;
    border-bottom: 1px solid #fff;
  }
  input.input{
    position: absolute;
    width: 100%;
    height: 75%;
    top: 11px;
    left: 0;
    border: none;
    outline: none;
    background: none;
    padding: 6px 0px 0px 5px;
    font-size: 17px;
    color: #fff;
  }
  .input-div > div{
    position: relative;
    height: 45px;
    color: #fff;
  }
  .input-div > div h5{
    position: absolute;
    left: 2px;
    top: 25px;
    transform: translateY(-50%);
    font-size: 15px;
    transition: .3s;
    color: #fff;
  }
  .input-div.one{
    margin-top: 0;
  }
  .input-div.two{
    margin-bottom: 4px;
  }
  .input-div.focus .i span{
    color: orange;
  }
  .input-div:after, .input-div:before{
    content: '';
    position: absolute;
    bottom: -2px;
    width: 0xp;
    height: 2px;
    background-color: orange;
    transition: .3s;
  }
  .input-div:after{
    right: 50%;
  }
  .input-div:before{
    left: 50%;
  }
  .input-div.focus:after, .input-div.focus:before{
    width: 50%;
  }
  .input-div.focus div h5{
    top: 10px;
    font-size: 11px;
  }
  div.i{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  div.i span{
    color: #fff;
    font-size: 20px;
    transition: .4s;
  }
  div.show-paswwor{
    float: right;
    position: absolute;
    bottom: 0px;
    right: 0px;
  }
  div.show-paswwor label{
    color: #fff;
    font-size: 18px;
    cursor: pointer;
  }
  div.show-paswwor input{
    display: none;
  }
  div.show-paswwor label#ocultar{
    display: none;
  }


  a.olvidar{
    display: block;
    text-align: right;
    text-decoration: none;
    color: #eee;
    font-size: 15px;
    transition: .3s;
    margin-top: 20px;
    margin-bottom: 20px;

  }
  a.olvidar:hover, a.olvidar:active{
    color: skyblue;
  }

  div.sesionando{
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }

  div.sesionando p{
    color: #fff;
    font-size: 25px;
    margin-bottom: 0px;
    position: relative;
    margin-right: 5px;
    color: #39b900;
    background: #fff;
    border-radius: 7px;
    cursor: pointer;
    transition: 0.2s;
  }
  div.sesionando p:hover, div.sesionando p:active{
    background: #ccc;
    transition: 0.2s
  }
  div.sesionando button{
    width: 60%;
    padding: 7px 7px;
    border: none;
    border-radius: 20px;
    /*background: #39b900;*/
    color: #fff;
    font-size: 18px;
    font-weight: bold;
  }

  
 /*---Registro  */

  form.caja-registrando{
    padding: 0px 0px;
    width: 100%;
    margin: auto;
    margin-top: 0px;
  }

  div.datos-form{
    width: 100%;
    margin: auto;
    padding: 0px;
    padding: 0px 10px;
  }

  div.datos-inputs{
    width: 80%;
    margin: auto;
    margin-top: 20px;
  }
  
  div.datos-inputs input{
    margin-bottom: 10px;
    padding: 20px 12px;
  }
  
  div.datos-inputs select{
    height: 42px;
  }

  div.flex{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  div.flex div.select{
    width: 49%;
    margin-bottom: 10px;
  }
  div.flex div.select-2{
    width: 49%
  }

  div.flex-row{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  div.direciones-registro{
    width: 200px;
    margin: auto;
    text-align: center;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
  }

  div.direciones-registro p{
    color: #fff;
    font-size: 25px;
    margin-bottom: 0px;
    position: relative;
    margin-right: 5px;
    color: #39b900;
    background: #fff;
    border-radius: 7px;
    cursor: pointer;
    transition: 0.2s;
  }

  div.direciones-registro p:hover, div.direciones-registro p:active{
    background: #ccc;
    transition: 0.2s
  }

  div.registrando{
    width: 100%;
    margin: auto;
    text-align: center;
    margin-top: 15px;
  }

  div.registrando p{
    color: #fff;
    font-size: 25px;
    margin-bottom: 0px;
    position: relative;
    margin-right: 5px;
    color: #39b900;
    background: #fff;
    border-radius: 7px;
    cursor: pointer;
    transition: 0.2s;
  }
  div.registrando p:hover, div.registrando p:active{
    background: #ccc;
    transition: 0.2s
  }
  button.bottonRegistro, div.bottonRegistro{
    width: 50%;
    padding: 7px 7px;
    border: none;
    border-radius: 20px;
    background: #39b900;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
  }

  .bottonRegistrando{
    width: 50%;
    background: rgba(23,219,41,0.47);
    color: #aaa;
    width: 50%;
    padding: 7px 7px;
    border: none;
    border-radius: 20px;
    font-size: 18px;
    font-weight: bold;
    cursor:  none;
  }
  
  .label-terminos label{
    margin-top: 17px;
  }
  
  .label-terminos label span{
    color: #fff;
    font-family: var(--FFCagliostro);
    font-size: 13px;
    line-height:25px;
    display: block;
    padding-top: 0px;
   
  }
  
   
  div.caja-eslogan{
    position: relative;
    top: 0px;
    display: block;
    margin-top: 10px;
  }
  div.subcaja-slogan{
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  div.slogan{
   text-align: center;
    width: 100%;
    padding: 10px 5px;
  }

  div.slogan span{
    color: #fff;
    background: #ed147d;
    font-size: 35px;
    border-radius: 50%;
    width: 60px;
    height: 60px;
  }
  div.slogan p{
    margin-bottom: 0px;
    font-size: 15px;
  }
  
  
}



@media screen and (max-width: 425px){
  
  div.logo img{
    width: 160px;
    margin-left: 5px;
  }

  div.contacto a.contactar{
    background: #f3ab18;
    padding: 4px 10px;
    color: #333;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    border: none;
    margin-bottom: 6px;
    display: inline-block;
    text-decoration: none;
    color: #444;
    margin-right: 5px;
  }
  div.icono{
    display: block;
    font-size: 24px;
    padding: 2px 5px;
    margin-right: 5px;
  }
  span.span-abrir{
    font-size: 32px;
    text-align: center;
    color: #333;
    cursor: pointer;
  }
  div.enlaces-2 a.btn-header{
    display: block;;
    width: 100%;
    height: 60px;
    padding: 20px 10px 20px 20px;
    text-align: left;
    background: #34495e;
    color: #fff;
    margin-right: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  
  div.caja-registro-sesion{
    width: 100%;
    margin-top: 15%;
  }

  div.coach-texto p, div.coach-textoAjax{
    font-size: 15px;
  }
  
  div.sesion{
    width: 100%;
    margin-top: 15%;
    padding: 0px 10px
  }
  form.sesion{
    width: 98%;
    margin: auto;
    margin-top: 20px;
  }
  div.sesionando{
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }

  div.sesionando p{
    color: #fff;
    margin-bottom: 0px;
    position: relative;
    margin-right: 5px;
    color: #39b900;
    background: #fff;
    border-radius: 7px;
    cursor: pointer;
    transition: 0.2s;
  }
  div.sesionando p:hover, div.sesionando p:active{
    background: #ccc;
    transition: 0.2s
  }
  div.sesionando button{
    width: 60%;
    border: none;
    border-radius: 20px;
    color: #fff;
    font-weight: bold;
  }

  
 /*---Registro  */

  form.caja-registrando{
    width: 100%;
    margin: auto;
    margin-top: 0px;
  }
  div.datos-form{
    width: 100%;
    margin: auto;
    padding: 0px;
    padding: 0px 10px;
  }
  div.datos-inputs{
    width: 98%;
    margin: auto;
    margin-top: 20px;
  }
  

  div.registrando{
    width: 100%;
    margin: auto;
    text-align: center;
    margin-top: 15px;
  }

  div.registrando p{
    color: #fff;
    margin-bottom: 0px;
    position: relative;
    margin-right: 5px;
    color: #39b900;
    background: #fff;
    border-radius: 7px;
    cursor: pointer;
    transition: 0.2s;
  }

  button.bottonRegistro{
    width: 50%;
    border: none;
    border-radius: 20px;
    background: #39b900;
    color: #fff;
    font-weight: bold;
  }

  .bottonRegistrando{
    width: 50%;
    background: rgba(23,219,41,0.47);
    color: #aaa;
    width: 50%;
    border: none;
    border-radius: 20px;
    font-size: 18px;
    font-weight: bold;
    cursor:  none;
  }
  
  
  
  div.caja-eslogan{
    position: relative;
    top: 0px;
    display: block;
    margin-top: 10px;
  }
  div.subcaja-slogan{
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  div.slogan{
   text-align: center;
   width: 80%;
   padding: 10px 5px;
    
  }

  div.slogan span{
    color: #fff;
    background: #ed147d;
    font-size: 35px;
    border-radius: 50%;
  }
  div.slogan p{
    margin-bottom: 0px;
    color: #444;
    font-size: 14px;
  }
}



@media screen and (max-width: 378px){
  
  div.coachelección{
    width: 82%;
    margin: auto;
    margin-top: 20px;
    text-align: center;
    background: #39b900;
    border-radius: 20px;
    padding: 3px;
    cursor: pointer;
    transition: 0.5s;
  }
  
  div.sesionando button{
    width: 63%;
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
  }
  
  button.bottonRegistro{
    width: 60%;
    border: none;
    border-radius: 20px;
    background: #39b900;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
  }

  .bottonRegistrando{
    width: 60%;
    background: rgba(23,219,41,0.47);
    color: #aaa;
    width: 50%;
    border: none;
    border-radius: 20px;
    font-size: 18px;
    font-weight: bold;
    cursor:  none;
  }
  
}







/*--- Modal para recuperar contraseña  */
div.caja-modal-password{
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: º00%;
  background: #475b8d;
  z-index: 10000;
  overflow: hidden;
}

div.cerrar-modal-password{
  position: fixed;
  top: 15px;
  left: 15px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
div.cerrar-modal-password svg{
  color: #fff;
  font-size: 20px;
}

span.skip-passwor{
  position: fixed;
  right: 15px;
  top: 20px;
  display: block;
  z-index: 10;
  background: #eee;
  width: 70px;
  text-align: center;
  font-size: 14px;
  border-radius: 50px;
  color: ;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--FFCagliostro);
}

@media screen and (min-width: 300px){
  div.caja-img-password{
    width: 100%;
    height: 315px;
    overflow: hidden;
    border-radius: 0px 0px 30px 30px;
    background: #fff;
  }
}

@media screen and (min-width: 350px){
  div.caja-img-password{
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: 0px 0px 30px 30px;
    background: #fff;
  }
}

div.caja-img-password figure{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0px 0px 30px 30px;
}


div.caja-img-password figure img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

div.footer-password{
  background: #475b8d;
  border-radius: 30px 30px 0px 0px;
  height: 100%;
  width: 100%;
}

div.contenedor-texto-password{
  width: 100%;
  position: relative;
}
div.caja-texto-password{
  padding: 10px 15px;
  color: #fff;
  position: absolute;
  top: 0px;
  transform: translateX(0%);
  transition: transform 0.2s;
}
div.caja-texto-password.ocultarIzquierda{
  transform: translateX(100%);
  transition: transform 0.2s;
}
div.caja-texto-password.ocultarDerecha{
  transform: translateX(-100%);
  transition: transform 0.2s;
}



div.caja-texto-password h3{
  font-family: var(--FFAlata);
  font-size: 17px;
  text-align: center;
  margin-top: 10px;
}

div.caja-texto-password p{
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 5px; 
}

div.caja-sliders-password{
  width: 100%;
  
}

div.sliders-password{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: fixed;
  bottom: 65px;
}

div.sliders-password span{
  display: block;
  width: 5px;
  height: 5px;
  background: #fff;
  margin: 5px;
  border-radius: 50%;
}
div.sliders-password span.active{
  width: 17px;
  border-radius: 5px;
  background: var(--colorZp);
  transition: 0.2s all;
}

div.direcion-password{
  position: fixed;
  bottom: 20px;
  left: 0px;
  width: 100%;
  z-index: 10;
}

div.direcion-password p{
  margin: auto;
  display: block;
  width: 180px;
  text-align: center;
  padding: 2px 15px;
  color: #fff;
  background: var(--colorZp);
  border-radius: 50px;
  margin-bottom: 0px;
  font-size: 20px;
  font-family: var(--FFCagliostro);
}

span.volver-password{
  position: fixed;
  left: 20px;
  bottom: 21px;
  background: #fff;
  width: 40px;
  padding: 5px 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}
span.volver-password svg{
  font-size: 20px;
  color: #39b900;
}



div.contenedor-formulario-password{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  display: block;
  position: fixed;
  bottom: 0px;
}
div.flex-formulario-password{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.caja-formulario-password{
  width: 100%;
  padding: 0px 15px;
}


div.caja-form-recPassword{
  padding: 10px;
  padding-top: 15px;
}

p.nota-psw{
  width: 100%;
  color: #fff;
  position: fixed;
  bottom: 15px;
  left: 0px;
  padding: 0px 10px;
  text-align: center;
  font-family: var(--FFAlata);
  margin-bottom: 0px;
  font-size: 13px;
}
p.nota-psw span{
  color: #fff;
  display: block;
  background: #ff2051;
  width: 120px;
  margin: auto;
  border-radius: 5px;
  margin-top: 5px;
  font-size: 15px; 
  text-align: center;
  font-family: var(--FFAlata);
  margin-bottom: 0px;
  font-size: 13px;
}

p.nota-psw span{
  color: #fff;
  display: block;
  background: #ff2051;
  width: 120px;
  margin: auto;
  border-radius: 5px;
  margin-top: 5px;
  font-size: 15px; 
}


/*-----------------------------------*\
  #Call Us
\*-----------------------------------*/

.call-us {
  position: fixed;
  bottom: 25px;
  right: 9px;
  z-index: 6;
  transition: var(--transition);
  width: 49px;
  height: 49px;
  overflow: hidden;
  border-radius: var(--radius-4);
  visibility: visible;
  opacity: 1;
}

/*.call-us.active {
  visibility: visible;
  opacity: 1;
  transform: translateY(-65px);
}*/

.call-us img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: auto;
  transform: scale(1.1);
}