/*===================== FONTS ======================*/
@font-face {
  font-family: "Syne-ExtraBold";
  src: url(../assets/fonts/Syne/Syne-ExtraBold.ttf);
}
@font-face {
  font-family: "Syne-Bold";
  src: url(../assets/fonts/Syne/Syne-Bold.ttf);
}
@font-face {
  font-family: "Syne-Regular";
  src: url(../assets/fonts/Syne/Syne-Regular.ttf);
}
@font-face {
  font-family: "Syne-VariableFont_wght";
  src: url(../assets/fonts/Syne/Syne-VariableFont_wght.ttf);
}
@font-face {
  font-family: "Montserrat-Bold";
  src: url(../assets/fonts/Montserrat/static/Montserrat-Bold.ttf);
}
@font-face {
  font-family: "Montserrat-ExtraBold";
  src: url(../assets/fonts/Montserrat/static/Montserrat-ExtraBold.ttf);
}
@font-face {
  font-family: "Montserrat-Medium";
  src: url(../assets/fonts/Montserrat/static/Montserrat-Medium.ttf);
}
@font-face {
  font-family: "Montserrat-Thin";
  src: url(../assets/fonts/Montserrat/static/Montserrat-Thin.ttf);
}
@font-face {
  font-family: "Poppins-ExtraBold";
  src: url(../assets/fonts/Poppins/Poppins-ExtraBold.ttf);
}
@font-face {
  font-family: "Poppins-Bold";
  src: url(../assets/fonts/Poppins/Poppins-Bold.ttf);
}
@font-face {
  font-family: "Montserrat-Light";
  src: url(../assets/fonts/Montserrat/static/Montserrat-Light.ttf);
}

/*===================== VARIABLES ======================*/
*:root {
  --color-primario: #0052d4;
  --color-secuendario: #ffffff;
  /*--color-degradado: linear-gradient(to left, #6fb1fc, #4364f7, #0052d4);*/
  --Tipografia-buttons: "";
  --Tipografia-title-hero: "Montserrat-ExtraBold";
  --Tipografia-title: "Montserrat-Bold";
  --Tipografia-text: "Montserrat-Light";
  --Tipografia-Color: black;
  --Tipografia-subtitulo: "";
  --Tipografia-span: "";
}

html {
  box-sizing: border-box;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
*,
*::before,
::after {
  box-sizing: inherit;
}
body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  /* background-color: rgb(10, 10, 10); */
}
header {
  display: block;
  position: relative;
}
main {
  overflow-x: hidden;
}

section {
  margin: 0;
}
menu {
  margin: 0;
  padding: 0;
}

h2,
h3,
h4,
h5,
h6 {
  font-family: var(--Tipografia-subtitulo);
  margin: 0;
  color: var(--Tipografia-Color);
}
h1 {
  font-family: var(--Tipografia-title-hero);
  text-transform: capitalize;
  font-size: 65px;
  color: var(--Tipografia-Color);
}
h2 {
  font-family: var(--Tipografia-title);
  font-size: 40px;
}

a {
  font-family: var(--Tipografia-buttons);
  font-size: 16px;
}

p {
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-family: var(--Tipografia-text);
  color: black;

}

span {
  font-size: 12px;
  font-family: var(--Tipografia-span);
  color: var(--Tipografia-Color);
}

ul,
ol {
  margin: 0;
  padding: 0;
}
li {
  font-family: var(--Tipografia-text);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  color: var(--Tipografia-Color);
}
img {
  border-style: none;
  display: block;
}
/*=============================== EFECTOS ==================================*/

.shadow {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.783);
}

/*=============================== EFECTOS EN MOVIMIENTO ==================================*/

/*.fade-in{
  animation: fadeIn 5s;
}
@keyframes fadeIn{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

.moveToRight-fadeIn{
  position: relative;
  animation: ToRight-fadeIn 5s;
}

@keyframes ToRight-fadeIn{
  from{
    left: -100%;
    opacity: 0;
  }
  to{
    left: 0%;
    opacity: 1;
  }
}
*/
/*================= EXTRA ====================*/

/*PARA CENTAR CON POSITION ADSOLUTA O RELATIVA*/
/*  <<<<< SE TIENE QUE PONER 50% EN LA POSICION QUE SE VA HA CENTRAR Y 0 EN LA QUE NO >>>>
top: 50%; 
left: 50%;
transform: translate(50%,-50%); X, Y*/

/*  PARA HACER EL EFECTO DE TRANSICION*/
/*  opacity: 1;                 <<<<< la opacidad esta en 0 para el elemento que se movera
    transform: translate(0, 0); <<<<< se tiene que especificar cuantos pixels se movera el elemento
    transition-duration: 2s;
    transition-property: opacity, transform;
    transition-delay: 1.5s;
*/

/* 2° FORMA PARA CENTRAR ALGO EN POSICION ADSOLUTA O RELATIVA */
/*
  position: absolute; Posición absoluta 
  top: 0;  Alinea el borde superior con el borde superior del contenedor 
  bottom: 0;  Alinea el borde inferior con el borde inferior del contenedor 
  left: 0;  Alinea el borde izquierdo con el borde izquierdo del contenedor 
  right: 0;  Alinea el borde derecho con el borde derecho del contenedor 
  margin: auto;  Centra horizontal y verticalmente 
  width: fit-content;  Establece el ancho según su contenido 
  height: fit-content; Establece la altura según su contenido 
  */

/*

PARA PONER UNA SECCION CON PARALLAX
.banner{
    width: 100%;
    height: 500px; 
    overflow: hidden;
}
.parallax {
    width: 100%;
    height: 100%;
    background-image: url("");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

MOVIL GRANDE
@media (max-width: 425px) {
 
}

*/