/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* ESTILOS MODO BASE (dark) *******/
:root.light {
  /* Background */

  --bg: #fff;
  --bg1: #fff;
  --bg2: #e4eeff;
  --bg3: #c4e2fe;

  /*boton */

  --bg-boton: #000;
  --bg-boton-span: #e4eeff;
  --bg-capa: #fff;
  --texto-boton: #fff;
  --texto-boton-hover: #000;

  /* texto general  y otros*/

  --text: #000;
  --text-1: #fff;

  --invert: invert(100%);
  /*header*/
  --gradient:rgb(255 255 255 /0.1);
}

/* ESTILOS MODO OSCURO DEFAULT************* */
:root {

/* Background */
--bg: #1e202c;
--bg1:#1e202c;
/* --bg1: #2d5e60;*/
--bg2: #272935;
--bg3: #363b69;

/*boton */
--bg-boton: #fff;
--bg-boton-span: #000;
--texto-boton: #000;
--texto-boton-hover: #fff;

/* texto general y otros*/

--text: #fff;
--text-1: #000;

--invert: invert(0%);
--opacidad: opacity(1);
 /*header*/
 --gradient:rgb(0 0 0 / 0.6);

}

html {
  font-size: 62.5%;
  margin: 0;
  
  scroll-behavior: smooth;
  scroll-padding-top: var(--scroll-padding, 100px);

}
body {
 
  font-family: Montserrat;
  background: var(--bg);
  color: var(--text);
  /* Transición entre los colores en modo claro y oscuro */
  transition: background, color 300ms ease;
}

body nabvar {
  margin: auto !important;
  flex-grow: unset;
}

li.nav-item {
  padding-left: 45px !important;
}

section {
  padding: 4em 0 4em 0;
}

.roundex{

  border-radius: 4em 4em 0 0;
}

/* CUSTOMIZE text 
-------------------------------------------------- */

h1.titulo {
  font-size: clamp(4rem, 3vw + 1rem, 6.2rem);
}

h1 {
  font-size: clamp(2.5rem, 3vw + 1rem, 5rem);
}

h2 {
  font-size: clamp(1.5rem, 3vw + 1rem, 3rem);
}

h3 {
  font-size: clamp(1rem, 3vw + 1rem, 2rem);
}

p {
  font-size: clamp(1rem, 3vw + 1rem, 1.8rem);
}

a {
  font-size: clamp(0.8rem, 3vw + 1rem, 1.8rem);
}

.emo span{

  font-size: clamp(18rem, 10vw + 1rem, 25rem);

}
/***********************************************/

/*404*******************************************/

.emo{

  height:90vw;
  
}

.separate {
  margin: 55px 10px 75px 10px !important;
}


/* Seccion menú */

.nav-link {
  color: var(--text);
}

.nav-link:hover {
  color: var(--text) !important;
}

.nav-link:visited {
  color: var(--text) !important;
}

.invertir {
  filter: var(--invert);
}

/*ESTILOS HEADER */
.header-section{
padding: 3em 0 0 0;
}

.contenedor {
  padding: 3% 10% 4% 10%;

}


.header-lmti {
  
  background: linear-gradient(to top, var(--gradient ), var(--gradient)), url("../img/header/header3.png") no-repeat center;
  background-size: cover;
  background-position: center;
  min-height: 300px;
  position: relative;
}


/*ESTILOS PARA ANIMACIÓN SCROLL */
.scroll-container {
  width: 10px;
  height: 60px;
  border: 1px solid var(--text);
  border-radius: 15px;
  position: relative;
  margin-bottom: 80px;
}

.scroller {
  width: 3px;
  border-radius: 8px;
  background-color: var(--text);
  position: absolute;
  top: 8px;
  left: 3px;
  bottom: 40px;
  animation: scroller 1500ms ease-out infinite;
}

@keyframes scroller {
  0% {
    bottom: 40px;
  }
  5% {
    top: 8px;
  }
  32% {
    bottom: 8px;
  }
  66% {
    top: 40px;
    bottom: 8px;
  }
  100% {
    top: 80x;
    bottom: 40px;
  }
}

/*ESTILOS PARA banner */

.banner {
  
  background: url("../img/banner/teclado.jpg") no-repeat center;
  background-size: cover;
  min-height: 300px;
  position: relative;
}
.banner1 {
  padding-top: 5rem;
  background: url("../img/banner/img2.jpg") no-repeat center;
  background-size: cover;
  background-position: center;
  min-height: 300px;
  position: relative;

}

.tar {
  padding: 10px;
  
  background-color: var(--bg);
}

/*ESTILOS PARA SOBRE NOSOTROS */

.counter {
  background-color: var(--bg2);
}

/*BACKGROUND    ******/

.bg-0 {
  background-color: #1e202c;
}
.bg-1 {
  background-color: #2d5e60;
}

.bg-2{

  background-color: #3c3c4f;
}

.bg-3 {
  background-color: #e4eeff;
}

.bgd {
  background-color: #000 !important;
}

.bgd-0 {
  background-color: #e8f3fd;
}

.bgd-1 {
  background-color: #fff;
}

.bgd-2 {
  background-color: #4a5568;
}

.bgd-3 {
  background-color: #272935;
}

.bgd-4 {
  background-color: #c4e2fe;
}

.bgd-5 {
  background-color: #8b96a8;
}
.bgd-6 {
  background-color: #4875ff;
}

.bgd-7 {
  background-color: #94bdf1;
}

.bgd-8 {
  background-color: #25282e;
}

.bgd-9 {
  background-color: #313b4b;
}

.bgd-10 {
  background-color: #363b69;
}

.bgd-11 {
  background-color: #9095c8;
}

.bgd-12 {
  background-color: #b2cffd;
}


/*---Fin Backgrounds*/

/*---Font Color*/
.txt-0 {
  color: #000;
}

.txt-1 {
  color: #fff;
}

.txt-2 {
  color: #4a5568;
}

.txt-3 {
  color: #ffd74e;
}

.txt-4 {
  color: #c4e2fe;
}

.txt-5 {
  color: #8b96a8;
}

/*---Fin  fontcolor*/

/*---ESTILOS SERVICIOS ---*/

/* Fin CUSTOMIZE service
---------------------------------------------------*/

/* CUSTOMIZE Heros 
-------------------------------------------------- */

.cabecera {
  margin-top: 6rem;
  height: 42rem;
}

/* CUSTOMIZE plataformas
-------------------------------------------------- */

/* CUSTOMIZE text 
-------------------------------------------------- */

/* CUSTOMIZE brands 
-------------------------------------------------- */

.cambio {
  filter: invert(100%);
}

.grey {
  filter: grayscale(0.5);
}

.gray {
  filter: grayscale(1);
}

.acolor:hover {
  filter: none;
}

.lateral {
  height: 520pt;
  background-color: #fff;
}

/* CUSTOMIZE text 
-------------------------------------------------- */

/* Text claro end 

.contenedor{

	padding-right: 80pt !important;
	padding-left: 80pt !important;

}


/* slider logos*/

/* fIN slider logos*/

/* CUSTOMIZE iconos 
-------------------------------------------------- */

/* fin icon */

.boton {
  background-color: #c4e2fe !important;
  border: none;
  color: #4a5568 !important;
}

/* CUSTOMIZE filas 
-------------------------------------------------- */

/* Text claro end */
.menu-boton {
  text-align: right !important;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* MARKETING CONTENT
-------------------------------------------------- */



/* 404
------------------------- */

.emoticon{

  font-size:var (--text-emo);
}

/* RESPONSIVE CSS
-------------------------------------------------- */
@media (max-width: 991.98px) {
  .cabecera {
    height: 380pt;
  }

  section {
    padding: 2em 0 2em 0;
  }
 .header-section{
   padding: 5% 0 0 0 ;
 }
 .contenedor {
     padding: 4% 2% 4% 2%;
  }

  .banner {
   
    padding-bottom: 0 !important;
    padding-left: 0 !important;
  }
 
}

@media (max-width: 600px) {
  .cabecera {
    height:30%;
  }

  section {
    padding: 2em 0 2em 0;
  }
  .header-section{
    padding: 12% 0 0 0 ;
  }
  .contenedor {
    padding: 1% 2% 4% 2%;
  }
}

/*fin*/