/*custon properties, no existen en el código lo de root, son pseudoselectores*/
:root {

  --blanco: #ffffff;
  --negro: #000000;
  --azuldos: #00a6ff;
  --azuloscuro: rgb(1, 42, 70);
  --negro2: #0000008f;


}

html {
  font-size: 62.5%;
  box-sizing: border-box;
  scroll-snap-type: y mandatory;
}

/*
.card .navegacion-principal{
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
*/

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-size: 16px;
  font-family: "Nunito Sans", sans-serif;
  margin: 0;
  min-height: 100vh;
  background-image: linear-gradient(to top, var(--blanco) 0%, var(--azuloscuro) 100%);
}


h1 {
  font-size: 3.3rem;
  font-family:"Nunito Sans", sans-serif;
  color: #ffffff;

}

h2 {
  font-size: 2.8rem
}

h3 {
  font-size: 1.8rem
}

h6 {
  font-weight: bold;
  color: #000000;
  font-size: 1.6rem;
}

h1,
h2,
h3,
h6 {
  text-align: center;
}

/*
h1 span {
  font-size: 16px !important;

}
*/



.navegacion-principal {
  background: linear-gradient(to right, var(--azuldos) 30%, var(--negro) 40%);
}



.barra-superior {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 120rem;
  margin: 0 auto;
  padding: 0.6rem;
  border-radius: 2rem;

}



@media (min-width: 768px) {
  .barra-superior {
    flex-direction: row;
    justify-content: space-around;
  }
}



.barra-superior a {
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
  line-height: 1.5;

}

.barra-superior a:hover {
  animation: fadepulse 1s infinite;
}

@keyframes fadepulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}







.imagen-inicio {
  background-image: url(https://raw.githubusercontent.com/Domingo99vg/P-ginaFSL/refs/heads/main/Z10.png);
  background-size: cover;
  background-position: center 50%;
  /*background-position: [horizontal] [vertical];*/
  height: 250px;
  position: relative;
}

.imagen-oscurece {
  position: absolute;
  background-color: #000000a2;
  width: 100%;
  height: 100%;
  display: flex;
  /*esto centra la imagen del parche del leon*/
  justify-content: center;
  /*esto centra horizontalmente*/
  align-items: center;
  /*esto centra verticalmente, margin: 0 auto; aqui no haría nada*/

}





.contenedor {
  /*Hay dos de contenedor lo de los enlaces y donde los servicios*/
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 120rem;
  margin: 0 auto;
  padding: 0.5rem;
  border-radius: 2rem;
}





/* 
space-between:
Manda el primer elemento a la izquierda y el último a la derecha,
repartiendo el espacio únicamente ENTRE los elementos.
*/

/* 
space-around:
Añade espacio alrededor de cada elemento.
Los extremos tienen algo menos de separación.
*/

/* 
space-evenly:
Reparte todo el espacio de forma totalmente uniforme,
incluyendo los bordes laterales.
*/






.sombra {
  -webkit-box-shadow: 1px 10px 32px 11px rgba(0, 0, 0, 0.46);
  -moz-box-shadow: 1px 10px 32px 11px rgba(0, 0, 0, 0.46);
  box-shadow: 1px 10px 32px 11px rgba(0, 0, 0, 0.46);
  background-color: var(--blanco);
  padding: 2rem;
  margin: 1rem auto;

}






.servicios {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  column-gap: 2rem;
  row-gap: 2rem;
}



/* Tablet *  DEBEN DE ORDENARSE DE MENOR A MAYOR*/
@media (min-width: 600px) {
  .servicios {
    grid-template-columns: 1fr 1fr;
  }
}

/* Desktop */
@media (min-width: 1000px) {
  .servicios {
    grid-template-columns: 1fr 1fr 1fr;
  }
}



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


.leon {
  width: 12rem;
  height: 17rem;
}

.card {
  width: 30rem;
  height: 20rem;
  perspective: 100rem;
  /* da profundidad le da profundidad como si lo viera de lejos el efecto*/
  padding: 1rem;
  border-radius: 1rem;
  border-color: #003a6a;
  border-style: groove;

}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s ease;
  /*Ease a diferencia de linear es que empieza lento, sigue rápido y acaba lento*/
  transform-style: preserve-3d;
  /*Con preserve a diferencia de flat lo que se hace es que se vea la cara de atrás y no en 2d y al revés la inicial*/

}


/* EFECTO AL HACER HOVER */
.card:hover .card-inner {
  transform: rotateY(180deg);


}



.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  /* oculta la cara trasera es decir la del texto y el acceso */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

}

/* Parte frontal */
.card-front {
  background: #f5f5f5;
}

/* Parte trasera */
.card-back {
  background: #003a6a;
  color: white;
  transform: rotateY(180deg);
  padding: 1rem;
  border-radius: 2rem;
  /* La tarjeta está formada por un contenedor (card-inner) que es el que gira.
   La cara trasera (.card-back) ya está girada 180º desde el inicio para quedar oculta detrás.
   Al hacer hover sobre .card, se rota el contenedor 180º en el eje Y,
   lo que hace que la cara frontal desaparezca y la trasera aparezca al frente. */
}






.libro-ingles {
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
}







.instagram {
  font-weight: bold;
  text-decoration: none;
  color: #000000;
  display: flex;
  justify-content: center;
  padding: 1rem;
  margin-top: 2rem;
}
















.boton-jm {
  background-color: #0064d5;
  color: #ffffff;
  width: max-content;
  height: max-content;
  border-radius: 2rem;
  margin: 0 auto;
  border-style: groove;


}











.custom-cursor {
  width: 10px;
  height: 10px;
  background: #00ff1a;
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transition: 0.15s;
}

@media (max-width: 1400px) {
  .custom-cursor {
    display: none;
  }
}






.noFinalizado{
  display: flex;   
  max-width: 30%;
  height: min-content;
  align-items: center; 
  margin: 0 auto; 
  background-color: rgb(255, 255, 255); 
  justify-content: center; 
  border-radius: 1rem;
  padding: 1rem;

}


.proximamente{
  text-transform: uppercase;
  font-weight: bold;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: rgb(109, 255, 255);
  font-size: 1rem;
}




























.marcado2 {
  color: var(--azuldos) !important;
  font-weight: bold;
  animation: none !important;

}

.marcado3 {
  color: #ffffff;
  font-weight: bold;
}

.marcado3:hover {
  animation: fadepulse 1s infinite;

}

@keyframes fadepulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}