:root {
  --font-family-principal: "Epilogue", sans-serif;
  --font-family-titulos: "Eczar", serif;
  --color-principal: #235789;
  --color-secundario: #d05353;
  --color-blanco: #fff;
  --color-bg: #f3e9dc;
  --overlay: #22222288;
  --txt-22: 2.2rem;
  --txt-18: 1.8rem;
  --txt-12: 1.2rem;
}

html {
  box-sizing: border-box;
  font-size: 62.5%; /* 1rem = 10px*/
  scroll-behavior: smooth;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  background-color: var(--color-bg);
  font-family: var(--font-family-principal);
  font-size: var(--txt-12);
  color: var(--color-principal);
  overscroll-behavior: none;
}

h1,
h2,
h3 {
  font-family: var(--font-family-titulos);
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
  padding-inline: 0;
}
/**Globales**/
.contenedor {
  max-width: 1440px;
  width: 95%;
  margin: 0 auto;
}

.titulo {
  font-weight: 800;
  color: var(--color-secundario);
  size: var(--txt-18);
  transition: all 0.5s;
}

.texto {
  line-height: 1.4;
  letter-spacing: 0.1rem;
}

.enlace {
  color: var(--color-principal);
  font-size: var(--txt-12);
  font-weight: 600;
}

/* Container-Sys
---------------------------------------------------------------- */
*/ .animaciones-activado {
  transition: all 0.7s ease;
}

/* Preloader
---------------------------------------------------------------- */
#preloader {
  display: block;
  width: 100%;
  height: 100vh;
  background: var(--color-blanco);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  opacity: 1;
  transition: opacity 0.3s linear;
}

#preloader .spinner {
  display: inline-block;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#preloader .spinner::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid var(--color-principal);
  border-color: var(--color-principal) transparent var(--color-principal)
    transparent;
  animation: spinner 0.7s ease infinite;
  -webkit-animation: spinner 0.7s ease infinite;
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

#preloader img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.navegacion-barra {
  padding-block: 20px;
  position: sticky;
}

.navegacion {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: center;
}

.nav-logo {
  font-size: var(--txt-22);
  font-family: var(--font-family-titulos);
}

.navegacion-contacto {
  display: flex;
  gap: 1.5rem;
}

@media (min-width:580px) {
  .navegacion {
    flex-direction: row;
  }
}

.main-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

.intro-texto {
  text-align: justify;
}

/*Carrusel*/

.carrusel {
  width: 100%;
  margin: auto;
}

.inner-carrusel {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  transition: 0.2s ease;
}

.proyecto-enlace img {
  height: auto;
  width: 200px;
  transition: 0.5s ease;
}

.proyecto-enlace:hover .portada-proyecto {
  transform: scale(1.1);
}

.inner-carrusel::-webkit-scrollbar {
  height: 0.3em;
}

.inner-carrusel::-webkit-scrollbar-track {
  background-color: var(--color-principal);
}

.inner-carrusel::-webkit-scrollbar-thumb {
  background-color: var(--color-secundario);
  border-radius: 25px;
}

@media (min-width:767px) {
  .main-grid {
    display: grid;
    grid-template-columns: 1fr 3fr;
    margin-top: 4rem;
    gap: 4rem;
  }
  .col-1 {
    grid-column: 1 / 2;
  }
  
  .col-2 {
    grid-column: 2 / 4;
  }

  .proyecto-enlace img {
    width: 280px;
  }

}

@media (min-width:860px) {
  .proyecto-enlace img {
    width: 400px;
  }
}

/*Proyecto*/
.galeria-proyecto {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  grid-auto-rows: repeat(2, 1fr);
}

.galeria-img {
  width: 100%;
  object-fit: cover;
}

.galeria-proyecto .elt-01 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
.galeria-proyecto .elt-02 {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}
.galeria-proyecto .elt-03 {
  grid-column: 4 / 5;
  grid-row: 1 / 2;
}
.galeria-proyecto .elt-04 {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}
.galeria-proyecto .elt-05 {
  grid-column: 4 / 5;
  grid-row: 2 / 3;
}
.galeria-proyecto .elt-06 {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}
.galeria-proyecto .elt-07 {
  grid-column: 5 / 6;
  grid-row: 1 / 2;
}

.galeria-proyecto-v2 {
  grid-template-columns: repeat(5, 1fr);
}

.galeria-proyecto-v3 {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: repeat(10, 1fr);
}


/*Metlife*/

.galeria-proyecto-v3 .elt-01 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.galeria-proyecto-v3 .elt-02 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

/*Emprende con proposito*/

.galeria-proyecto-v3 .elt-03 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  z-index: 2;
}

.galeria-proyecto-v3 .elt-04 {
  grid-column: 2 / 3;
  grid-row: 2 / 4;
}

.galeria-proyecto-v3 .elt-05 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

.galeria-proyecto-v3 .elt-06 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

/*Juegos Metlife*/
.galeria-proyecto-v3 .elt-07 {
  grid-column: 3 / 4;
  grid-row: 5 / 6;
}

.galeria-proyecto-v3 .elt-08 {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

.galeria-proyecto-v3 .elt-09 {
  grid-column: 2 / 3;
  grid-row: 4 / 5;
}

.galeria-proyecto-v3 .elt-10 {
  grid-column: 3 / 4;
  grid-row: 4 / 5;
}

/*Lecciones Extraordinarias*/
.galeria-proyecto-v3 .elt-11 {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
}

.galeria-proyecto-v3 .elt-12 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.galeria-proyecto-v3 .elt-13 {
  grid-column: 1 / 3;
  grid-row: 5 / 6;
}

/*Campaña*/
.galeria-proyecto-v3 .elt-14 {
  grid-column: 1 / 2;
  grid-row: 6 / 7;
}
.galeria-proyecto-v3 .elt-15 {
  grid-column: 2 / 3;
  grid-row: 7 / 8;
}
.galeria-proyecto-v3 .elt-16 {
  grid-column: 3 / 4;
  grid-row: 6 / 7;
}
.galeria-proyecto-v3 .elt-17 {
  grid-column: 2 / 3;
  grid-row: 6 / 7;
}


@media (min-width:767px) {
  .galeria-proyecto-v3 {
    grid-template-columns: repeat(8, 1fr);
  }

  .galeria-proyecto-v3 .elt-01 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
  .galeria-proyecto-v3 .elt-02 {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
  }

  .galeria-proyecto-v3 .elt-03 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
  }

  .galeria-proyecto-v3 .elt-04 {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
  }
  
  .galeria-proyecto-v3 .elt-05 {
    grid-column: 4 / 6;
    grid-row: 1 / 2;
  }
  
  .galeria-proyecto-v3 .elt-06 {
    grid-column: 4 / 6;
    grid-row: 2 / 3;
  }
  
  /*Juegos Metlife*/
  .galeria-proyecto-v3 .elt-07 {
    grid-column: 6 / 7;
    grid-row: 2 / 3;
  }
  
  .galeria-proyecto-v3 .elt-08 {
    grid-column: 6 / 7;
    grid-row: 1 / 2;
  }
  
  .galeria-proyecto-v3 .elt-09 {
    grid-column: 7 / 9;
    grid-row: 2 / 4;
  }
  
  .galeria-proyecto-v3 .elt-10 {
    grid-column: 7 / 9;
    grid-row: 1 / 2;
  }
  
  /*Lecciones Extraordinarias*/
  .galeria-proyecto-v3 .elt-11 {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
  }
  
  .galeria-proyecto-v3 .elt-12 {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }
  
  .galeria-proyecto-v3 .elt-13 {
    grid-column: 2 / 5;
    grid-row: 3 / 4;
  }
  
  /*Campaña*/
  .galeria-proyecto-v3 .elt-14 {
    grid-column: 7 / 9;
    grid-row: 4 / 5;
  }
  .galeria-proyecto-v3 .elt-15 {
    grid-column: 3 / 5;
    grid-row: 4 / 5;
  }
  .galeria-proyecto-v3 .elt-16 {
    grid-column: 5 / 6;
    grid-row: 3 / 4;
  }
  .galeria-proyecto-v3 .elt-17 {
    grid-column: 5 / 7;
    grid-row: 4 / 5;
  }

}

/*Grid V4 OPPO*/
.galeria-proyecto-v4 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  grid-auto-rows: repeat(3, 1fr);
}

.galeria-proyecto-v4 .elt-01 {
  grid-column: 5 / 7;
  grid-row: 1 / 2;
}

.galeria-proyecto-v4 .elt-02 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.galeria-proyecto-v4 .elt-03 {
  grid-column: 1/ 4;
  grid-row: 1 / 3;
}

.galeria-proyecto-v4 .elt-04 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.galeria-proyecto-v4 .elt-05 {
  grid-column: 4 / 5;
  grid-row: 1 / 2;
}

.galeria-proyecto-v4 .elt-06 {
  grid-column: 4 / 5;
  grid-row: 2 / 3;
}

.galeria-proyecto-v4 .elt-07 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

.galeria-proyecto-v4 .elt-08 {
  grid-column: 5 / 7;
  grid-row: 2 / 3;
}

.galeria-proyecto-v4 .elt-11 {
  grid-column: 4 / 6;
  grid-row: 3 / 4;
}

.galeria-proyecto-v4 .elt-12 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.galeria-proyecto-v4 .elt-13 {
  grid-column: 2 / 4;
  grid-row: 3 / 4;
}

.galeria-proyecto-v4 .elt-14 {
  grid-column: 6 / 7;
  grid-row: 3 / 4;
}


/**TECNO Mobile**/
.galeria-tecno {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  grid-auto-rows: repeat(3, 1fr);
}

.galeria-tecno .elt-01 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.galeria-tecno .elt-02 {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}

.galeria-tecno .elt-03 {
  grid-column: 4 / 5;
  grid-row: 1 / 2;
}

.galeria-tecno .elt-04 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}

.galeria-tecno .elt-05 {
  grid-column: 3 / 5;
  grid-row: 3 / 4;
}

.galeria-tecno .elt-06 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

.galeria-tecno .elt-07 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.galeria-tecno .elt-08 {
  grid-column: 5 / 6;
  grid-row: 1 / 3;
}

.galeria-tecno .elt-09 {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

.galeria-tecno .elt-10 {
  grid-column: 4 / 5;
  grid-row: 2 / 3;
}
.galeria-tecno .elt-11 {
  grid-column: 5 / 6;
  grid-row: 3 / 4;
}

.enlace-padding {
  padding-block: 5px;
}

.enlace-cv {
  display: flex;
  flex-direction: column;
}

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