/* VARIABLES */

:root {
  --primary: #44c3ff;
  --secondary: #ecf5f8;
  --light: #fff;
  --dark: #0e223c;
  --font-clr-1: #333333;
  --font-clr-2: #3b3b3b;
  --font-clr-3: #fdfdfd;
  --font-clr-4: #f9fafa;
  --font-clr-5: #7a7a7a;
}

/* GENERAL STYLES */

@font-face {
  font-family: Roboto sans-serif;
  src: url(./assets/fonts/roboto-regular.ttf);
}

* {
  box-sizing: border-box;
  font-family: "Roboto" sans-serif;
  text-decoration: none; /* quita el formato link */
  list-style: none; /* quita el fortam lista */
}

body {
  margin: 0;
  padding: 0;
  color: var(--font-clr-1);
  font-size: 1rem;
  overflow-x: hidden;
}

/* quita el padding al menú */
ul {
  padding: 0;
}
/* quita el color al menú */
a {
  color: var(--font-clr-1);
}
/* agrega color al fondo al welcome*/
#welcome-section {
  background: linear-gradient(#ddf2f9, #9ce3fb);
}
/* agrega color al fondo al formulario*/
#subscription-section {
  background-color: var(--secondary);
}
/* agrega color al fondo al footer */
footer {
  background-color: var(--dark);
  color: var(--font-clr-4);
  padding: 2rem 0;
}
/* oculta el menu */
.hidden {
  display: none;
}

.show {
  display: inline;
}
/* las imágenes ocupan el 100% del ancho de la pantalla automáticamente */
img {
  max-width: 50%;
}
/* estilo del botón */
button {
  background-color: var(--primary); /* color de fondo */
  border: none; /* sin bordes */
  padding: 1em 2em; /* espaciado x e y según el font-size (em)*/
  border-radius: 5px; /* esquinas redondeadas */
  color: var(--light); /* color de texto */
  font-weight: 600; /* diámetro de los caracteres */
  font-size: 1rem; /* tamaño de los caracteres según el root */
}

/* Mobile-first */
/* incorporar grid */
header {
  display: grid;
}
/* posicionar la imagen del header en el grid */
header img {
  grid-column: 1/4;
  grid-row: 1/2;
  margin: 1rem;
}
/* posicionar el botón en el grid */
header button {
  grid-column: 4/6;
  grid-row: 1/2;
}
/* posicionar el menú en el grid */
header nav {
  grid-column: 1/6;
  grid-row: 2/3;
}
/* flexbox al menu */
header nav ul {
  display: flex; /* flexbox */
  flex-direction: column; /* encolumnado */
  align-items: center; /* alineación central */
  justify-content: space-between; /* espacio vertical */
  height: 40vh; /* altura proporcional */
}
/* estilo del texto en el welcome */
#welcome-section div {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--font-clr-5);
}
/* estilo del h1 en el welcome */
#welcome-section div h1 {
  font-size: 10vw; /* vw según la pantalla */
  color: var(--font-clr-1);
}
/* flexbox a los elementos de beneficios */
#benefits-section {
  display: flex; /* flexbox */
  flex-flow: row wrap; /* flex-direction:row + flex-wrap:wrap */
  margin: 2rem 0;
  justify-content: center; /* centra los objetos */
}
/* centra los elementos de beneficios */
#benefits-section div {
  width: 315px; /* para los celulares más chicos */
  text-align: center;
  margin: 0 2rem;
}
/* estilo a los íconos de beneficios */
#benefits-section div div {
  background-color: var(--secondary);
  color: var(--primary);
  width: 1.7em;
  height: 1.7em;
  border-radius: 100%;
  font-size: 3rem;
  margin: 2.5rem auto;
  display: grid;
}
/* centrar los íconos de beneficios */
#benefits-section div div i {
  grid-row: 2/3;
}
/* estilo a los párrados de beneficios */
#benefits-section div p {
  color: var(--font-clr-5);
  font-size: 0.9rem;
  line-height: 1.6rem;
}
/* estilo a cursos */
#Cursos {
  padding: 2rem 0;
  border-top: 1.3px solid var(--secondary);
  text-align: center;
}
/* estilo a los h2 */
h2 {
  font-size: 8vw;
  margin: 2rem 0;
}
/* estilos a los párrafos de cursos */
#Cursos > p {
  color: var(--font-clr-5);
  margin-bottom: 3.5rem;
}
/* estilos al link de cursos */
#Cursos p a {
  color: var(--primary);
  text-decoration: underline;
}
/* flexbox a las cajas de los cursos */
#Cursos > div {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
/* estilos de las cajas de los cursos */
#Cursos > div > div {
  width: 260px;
  margin: 2rem auto;
  border: solid 1.2px var(--secondary);
  border-radius: 10px;
}
/* estilos de los elementos en los cursos */
#Cursos div > div .details-container {
  text-align: left;
  margin: 0 1.8rem 1.8rem;
}
/* estilos de los elementos en los cursos */
#Cursos div > div .details-container > div {
  display: flex;
  align-items: center;
  gap: 0.4rem; /* espaciado entre iconos y textos */
  color: var(--font-clr-5);
}
/* estilos de los iconos en los cursos */
#Cursos div > div .details-container > div > i {
  color: var(--primary);
  width: 20px;
}
/* estilos de los párrafos en los cursos */
#Cursos div > div .details-container > div > p {
  margin: 0.35rem;
}
/* estilos del botón */
#Cursos div > div .button-container {
  border-top: solid 1.2px var(--secondary);
  padding: 1.15rem;
}
/* estilos del botón */
#Cursos div > div .button-container button {
  width: 97%;
  margin: 0;
}
/* anchos para pantallas tablet y computadoras  */
@media (min-width: 400px) {
  #Cursos > div > div {
    width: 320px;
  }
}
/* flexbox empresa */
#Empresa > .container {
  border-top: 1.3px solid var(--secondary);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
}
/* estilos a los divs de empresa + grid */
#Empresa > div > div {
  margin: 2rem;
  width: 280px;
  display: grid;
}
/* estilos a los íconos (comillas) */
#Empresa div div > i {
  color: var(--primary);
  margin: 0 1rem;
}
/* estilos a los párrafos */
#Empresa div div > p {
  text-align: center;
  line-height: 1.6rem;
  font-size: 1.2rem;
}
/* estilos al último elemento (comillas) */
#Empresa div div > i:last-of-type {
  text-align: right;
}
/* estilos a la imágen */
#Empresa div div > img {
  margin: 0 auto;
  width: 50%;
  filter: grayscale();
  -webkit-filter: grayscale();
  transition: ease-in-out 0.25s;
  -webkit-transition: ease-in-out 0.25s;
  -moz-transition: ease-in-out 0.25s;
  -ms-transition: ease-in-out 0.25s;
  -o-transition: ease-in-out 0.25s;
}
/* estilos a la imágen */
#Empresa div div > img:hover {
  filter: none;
  -webkit-filter: none;
}
/* estilo a la imágen por ser más oscura */
#Empresa div div > .clarin {
  opacity: 0.6;
}
/* estilo a la imágen por ser más oscura */
#Empresa div div > .clarin:hover {
  opacity: 1;
}
/* imágen de fondo */
#new-diplomatura {
  background-image: url(./assets/diplomatura.PNG);
  padding: 3rem 2rem;
}
/* color del 1er hijo (párrafo) */
#new-diplomatura > p:nth-child(1) {
  color: white;
}
/* color del 2do hijo (h2) */
#new-diplomatura > h2:nth-child(2) {
  color: white;
}
/* espesor del 3er hijo (span) */
#new-diplomatura > p:nth-child(3) span {
  font-weight: 600;
}
/* estilos del botón */
#new-diplomatura > button {
  background-color: var(--light);
  color: var(--primary);
  width: 230px;
  margin: 1.5rem 0;
}
/* estilos del ícono del botón */
#new-diplomatura > button i {
  margin-left: 2rem;
}
/* flexbox */
#worldwide {
  display: flex;
  flex-flow: row wrap;
}
/* ordenar los contenedores (flex items) */
/* order: VALOR POR DEFECTO: 0  */
#worldwide img {
  order: 1;
}
/* margenes */
#worldwide > div {
  margin: 2rem;
}
/* estilos al texto */
#worldwide > div p {
  color: var(--font-clr-5);
  line-height: 1.45rem;
}
/* estilos al texto */
#worldwide > div > div > div {
  text-align: center;
  font-size: 1.15rem;
}
/* estilos a los números */
#worldwide > div div > div > span {
  color: var(--primary);
  font-size: 2.5rem;
}
/* margenes a sponsors */
#sponsors-section {
  margin: 4rem 0;
}
/* margenes al párrafo y título */
#sponsors-section p,
#sponsors-section h2 {
  margin: 2rem;
  text-align: center;
}
/* espaciado del párrafo */
#sponsors-section p {
  line-height: 25px;
}
/* ocultar lo que excede el eje x, desactivando el scroll */
.slides-container {
  overflow-x: hidden;
}
/* flexbox a las imágenes */
.slides-items {
  display: flex;
  width: 350%;
  animation-name: slides;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}
/* ubicación de las imágenes */
.slides-items div {
  width: 50%;
}
/* ubicación de las imágenes */
.slides-items div > img {
  width: 140px;
  margin: 0 auto;
  display: grid;
}
/* animar las imágenes */
@keyframes slides {
  0% {
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
  }
  20% {
    transform: translateX(-50vw);
    -webkit-transform: translateX(-50vw);
    -moz-transform: translateX(-50vw);
    -ms-transform: translateX(-50vw);
    -o-transform: translateX(-50vw);
  }
  40% {
    transform: translateX(-100vw);
    -webkit-transform: translateX(-100vw);
    -moz-transform: translateX(-100vw);
    -ms-transform: translateX(-100vw);
    -o-transform: translateX(-100vw);
  }
  60% {
    transform: translateX(-150vw);
    -webkit-transform: translateX(-150vw);
    -moz-transform: translateX(-150vw);
    -ms-transform: translateX(-150vw);
    -o-transform: translateX(-150vw);
  }
  80% {
    transform: translateX(-200vw);
    -webkit-transform: translateX(-200vw);
    -moz-transform: translateX(-200vw);
    -ms-transform: translateX(-200vw);
    -o-transform: translateX(-200vw);
  }
  100% {
    transform: translateX(-250vw);
    -webkit-transform: translateX(-250vw);
    -moz-transform: translateX(-250vw);
    -ms-transform: translateX(-250vw);
    -o-transform: translateX(-250vw);
  }
}
/* estilos al titulo y párrafo */
#subscription-section {
  text-align: center;
  padding: 1rem 0 3rem;
}
/* estilos al párrafo */
#subscription-section p {
  color: var(--font-clr-5);
  margin: 2rem 2rem 1rem;
}
/* estilos al formulario de email */
#subscription-section input {
  padding: 0.75rem 1rem;
  width: 280px;
  border: none;
  margin-bottom: 2rem;
}
/* espaciado al footer */
#Contacto .footer-container {
  padding: 0 2rem;
}
/* espaciado al footer */
#Contacto .footer-container div img {
  margin-bottom: 2rem;
}
/* color al párrafo */
#Contacto .footer-container div p {
  color: var(--font-clr-5);
}
/* espaciado al footer */
#Contacto .footer-container div {
  margin: 3rem 0;
}
/* espaciado a los h3 */
#Contacto .footer-container h3 {
  margin-bottom: 2rem;
}
/* estilos a los elementos */
#Contacto .footer-container a {
  color: var(--font-clr-4);
  font-size: 0.9rem;
  display: block;
  margin: 0.5rem 0;
}
/* tamaño de letra de los párrafos */
#Contacto .footer-container div p {
  font-size: 0.9rem;
}
/* color de texto del tel e email */
#Contacto .footer-container div p:nth-child(3),
#Contacto .footer-container div p:nth-child(4) {
  color: var(--font-clr-4);
}
/* flexbox a los íconos */
#Contacto .footer-container div .icons-container {
  font-size: 1.25rem;
  display: flex;
  gap: 1rem;
  padding-bottom: 2rem;
}
/* hover a los íconos */
#Contacto .footer-container div .icons-container i:hover {
  color: var(--primary);
}
/* estilos a los h3 */
#Contacto .copyright-container {
  padding: 1.5rem 2rem 0 2rem;
  border-top: 1.2px solid var(--primary);
  color: var(--primary);
  font-size: 0.9rem;
  opacity: 0.6;
}

/* MEDIA QUERIES */
/* estilos para pantallas medianas */
@media (min-width: 630px) {
  :root {
    font-size: 16.5px;
  }
  #welcome-section div h1 {
    font-size: 10vh; /* ajusta el h1 a la altura de pantalla */
  }
  h2 {
    font-size: 6vh; /* ajusta el h2 a la altura de pantalla */
  }
  button {
    margin-top: 2rem; /* espaciar p y button */
  }
  #welcome-section div p {
    margin-left: 2rem;
    margin-right: 2rem;
  }
  #Cursos {
    margin-bottom: 2rem;
  }
  #Cursos > div {
    gap: 2rem; /* espaciar elementos */
  }
  #Empresa .container {
    padding: 2rem 0;
  }
  #worldwide > div > div {
    display: flex; /* elementos en fila */
    width: 100%;
    justify-content: space-evenly; /* espaciado de elementos horizontal */
    margin: 2rem 0; /* espaciado entre elementos vertical*/
  }
  #sponsors-section > p {
    max-width: 60%; /* limitar el ancho del párrafo */
    margin: 2rem auto;
  }
  #sponsors-section .slides-container {
    margin: 3rem 0;
  }
  .slides-items div > img {
    width: 200px; /* aumentar el tamaño de las img */
    margin: 0 auto;
    display: grid;
  }
  #Contacto .footer-container {
    display: flex; /* enfilar elementos */
    flex-wrap: wrap; /* ordena segun el ancho los elementos */
    justify-content: space-between; /* espaciado entre elementos */
  }
  #Contacto .footer-container > {
    width: 280px; /* espaciado proporcional */
  }
}

/* estilos para pantallas semi grandes */
@media (min-width: 850px) {
  :root {
    font-size: 17px;
  }
  header img {
    grid-row: 1/3; /* imagen en una fila */
    grid-column: 1/6;
  }

  header button {
    visibility: hidden; /* ocultar el boton hamburger */
  }
  .hidden {
    display: inline; /* estilo al ocultar el boton hamburger */
  }
  header nav {
    grid-row: 1/3; /* posicionar los elementos del nav */
    grid-column: 4/6;
    margin: auto 0;
  }
  header nav ul {
    flex-direction: row; /* menu en una fila */
    justify-content: space-evenly; /* espaciado proporcional */
    height: auto; /* ajusta la altura según requira */
  }
  header nav ul li a:hover {
    color: var(--primary); /* hover al menu  */
  }
  #welcome-section img {
    margin: 0 auto;
    display: grid;
    width: 50%; /* ajustes a la imagen */
  }
  #new-diplomatura > button i {
    margin-left: 0.5rem; /* ajustes al ícono del botón */
  }
  #Contacto .footer-container {
    justify-content: space-evenly; /* elementos del footer espaciado uno al lado del otro */
    gap: 2rem;
  }
  #Contacto .footer-container > div {
    width: auto;
    flex: 1; /* elementos del footer uno al lado del otro con el mismo ancho */
    margin: 2rem 0 1.5rem;
  }
  #Contacto .copyright-container {
    display: flex; /* elementos en la misma fila */
    justify-content: space-between;
  }
}

/* estilos para pantallas grandes */
@media (min-width: 1100px) {
  :root {
    font-size: 17.5px;
  }
  #welcome-section {
    display: flex; /* elementos en la misma fila */
  }
  #welcome-section div {
    text-align: left; /* alineado del texto a la izquierda */
    margin-left: 4rem;
  }
  #welcome-section div p {
    margin-left: 0;
  }
  #Empresa .container {
    padding: 3.5rem 0;
  }
  #new-diplomatura {
    height: 80vh; /* altura fija */
    background-size: cover;
    background-repeat: no-repeat; /* no repita la imagen si sobra espacio */
    background-position: center;
    display: flex; /* habilitar las funciones flex */
    flex-flow: column nowrap; /* encolumna los elementos */
    align-items: flex-start; /* empiezan los elementos a la izquierda */
    justify-content: center; /* centrado verticalmente */
    padding-left: 4rem;
  }
  #worldwide {
    padding: 3rem 0;
  }
  #worldwide img {
    order: 0; /* mantener el orden de los elementos en el html */
    width: 43%; /* ajustar el ancho para que entren dos elementos */
  }
  #worldwide > div {
    margin: 0 4rem;
    width: 43%; /* ajustar el ancho para que entren dos elementos */
  }
  #worldwide > div > div {
    justify-content: space-between; /* espaciado */
  }
  #worldwide > div > div > div > span {
    font-size: 2.5rem; /* tamaño de los números */
  }
  #Contacto .footer-container {
    justify-content: space-around;
    gap: 2rem;
  }
}