@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;600;800&family=Playfair+Display:wght@498&display=swap");

/* __________________________________________________REGLAS GENERALES__________________________________________________ */
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  list-style: none;
  box-sizing: border-box;
}

img {
  /* para que una imagen nunca sea mayor
        que la caja que las contiene */
  max-width: 100%;
  height: auto;
}

/* Body */
body {
  background-color: black;
  font-family: "Playfair Display", serif;
}

/* selector múltiple */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  /* redefine los márgenes inferiores
    para que midan el tamaño de la tipografía */
  margin-bottom: 1em;
}

/* TODOS los vínculos */
a {
  /* elimina los subrayados */
  text-decoration: none;
  font-size: 0.9em;
  color: white;
}

p,
li {
  font-size: 1em;
  color: #ffffff;
  font-family: verdana;
}
h1 {
  font-size: 2.5em;
  color: #fdd513;
}
h2 {
  font-size: 2em;
  color: #fbd513;
}
h3 {
  font-size: 1.1em;
  color: #fbd513;
}
h4 {
  color: white;
}
figcaption {
  color: #fdb513;
  font-size: 0.9em;
  font-family: serif;
}

/* TODAS las listas */
ul,
ol {
  /* elimina bullets, números etc. */
  list-style: none;
  /* retira el relleno izquierdo predeterminado */
  padding: 0;
}

/* selector clase: grupo de elementos con características comunes */
.bloques {
  max-width: 100rem;
  /* centra la caja horizontalmente */
  margin: 0 auto;
  padding: 1rem;
  height: auto;
}

/* lo que tienen en común el encabezado y el pie */
header,
footer {
  background-color: #000000;
}

/*-----------------------------------------------------------------------------------------------------------------------------------*/

/*********
MOBILE FIRTS
*********/

/*----------------------------
             HEADER
------------------------------*/

/* caja que "limita" al logo y al menu */
header .encabezado {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  padding: 0.5rem;
  margin-top: 1em;
}

.logo {
  background-color: rgb(255, 255, 255);
  border-radius: 0.35em;
  padding: 0.35em;
  width: 6em;
  height: 3.5em;
  border: 0.1em ridge #fbd513;
}

/*Color al pasar el mouse sobre el logo*/
.logo:hover {
  background-color: #fdd513;
}

/*********
Navegacion
*********/

header nav ul {
  /* caja flexible */
  display: flex;
  /* elementos que no caben van a otra linea */
  flex-wrap: wrap;
  /* eje principal */
  justify-content: flex-end;
  margin-top: 0.8em;
}

/* items de lista  que contienen los vínculos del menu */
header nav ul li {
  /* que no midan menos que: */
  min-width: 5em;
  /* separados */
  margin: 0.25em 0 0.25em 0.25em;
}

/* vínculos del menu principal */
header nav ul li a {
  color: white;
  font-weight: bold;
  padding: 0.25em 0.5em;
  text-align: center;
  /* para que estas etiquetas "a" sean "cajas" */
  display: block;
}

/* cuando el cursor se posiciona sobre los vínculos y le agrega color/subrayado */
header nav ul li a:hover {
  color: #fdd513;
  text-decoration: underline;
}

/*----------------------------
             MAIN 
------------------------------*/

/********* SECCIONES *********/

.modulo-one {
  margin-top: 1em;
  padding: 1em;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-flow: column wrap;
  text-align: center;
}
.modulo-one h1 {
  padding: 0;
  font-size: 2.4em;
}
.modulo-one figure {
  width: 20em;
  filter: drop-shadow(0.1em 0.1em 0.2em #898989);
  margin-top: 1em;
}
#sobreMi p {
  margin: 1.5em;
}

/*--------------  Seccion 2: Materias ----------------*/

#materias {
  width: 98%;
  display: flex;
  flex-flow: column wrap;
  text-align: center;
  margin-top: 4em;
}

/*En comun, ambas cajas*/
.materias-aprobadas,
.datos-academicos {
  border: 0.1em ridge #fdb513;
  padding: 1em;
  border-radius: 1em;
}

.materias-aprobadas img,
.datos-academicos img {
  width: 10em;
  margin-bottom: 2em;
}

.materias-aprobadas ul,
.datos-academicos ul {
  padding-bottom: 1em;
}

/*Separarlas*/
.datos-academicos {
  margin-top: 2em;
}

/*--------------  Seccion 3: Trabajos ----------------*/

#trabajos {
  width: 98%;
  margin-top: 2em;
  display: flex;
  flex-flow: column wrap;
  text-align: center;
  border-bottom: 0.1em ridge #fdb513;
}

.videos-trabajos {
  display: flex;
  flex-direction: column;
  padding: 1em;
}

.video-uno p,
.video-dos p {
  margin: 0.5em;
}

.video-dos {
  margin-top: 4em;
}

#obito,
#losQueNoVuelven {
  filter: drop-shadow(0.1em 0.1em 0.1em #898989);
  margin-bottom: 1.6em;
}

/*--------------  Seccion 4: Acumar ----------------*/

#comitente {
  max-width: 98%;
  margin-top: 4em;
  display: flex;
  flex-flow: column wrap;
  text-align: center;
  align-items: center;
}

#acumar {
  border: 0.1em ridge #898989;
  padding: 1em;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
}

#acumar p {
  margin: 1em;
}

#acumar figure {
  width: 10em;
  margin: 2em 0;
}

#logoAcumar {
  width: 20em;
  margin-bottom: 1.5em;
}

/*--------------  Seccion 5: En clase ----------------*/

.enClase {
  width: 100%;
  height: 10em;
  margin-top: 3em;
  display: flex;
  justify-content: space-around;
  flex-flow: column wrap;
  align-items: center;
  border: 0.1em ridge #fdb513;
}

.botones {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 1em;
}

.botones button {
  width: 6em;
  height: 3em;
  border-radius: 1em;
  color: #fdb513;
  border: 0.1em solid #fdb513;
  background-color: black;
}
.botones button:hover {
  filter: drop-shadow(0.1em 0.1em 0.6em #fdb513);
}

/*----------------------------
             ALUMNOS
------------------------------*/
.contenedora-alumnos {
  margin: 6em 0;
  display: flex;
  flex-flow: column wrap;
  text-align: center;
  justify-content: space-between;
  align-items: center;
}

.contenedora-alumnos nav ul li a {
  display: block;
  min-width: 13em;
  height: 1.8em;
  border-bottom: 0.1em ridge #fdb513;
  padding: 0.2em;
  color: #fdb513;
}

.contenedora-alumnos nav ul li:hover {
  filter: drop-shadow(0.1em 0.1em 0.6em #fdb513);
}

.contenedora-alumnos img {
  background-color: white;
  width: 160px;
  height: 85px;
  margin-top: 1em;
}
.contenedora-alumnos ul {
  padding: 1em;
}

/*----------------------------
             FOOTER
------------------------------*/

footer p {
  margin: 1em;
  font-size: 0.7em;
}

/*-----------------------------------------------------------------------------------------------------------------------------------*/

/*********
  DESKTOP
*********/

@media (min-width: 1024px) {
  /*----------------------------
             HEADER
------------------------------*/
  header .encabezado {
    margin: 0;
    justify-content: space-between;
    align-items: center;
    padding: 1em 2em;
  }

  /********* SECCIONES *********/
  .modulo-one {
    width: 100%;
    flex-flow: row wrap;
    justify-content: space-around;
  }

  .modulo-one h1 {
    font-size: 4.5em;
  }
  .modulo-one figure {
    width: 20em;
    filter: drop-shadow(0.1em 0.1em 0.2em #898989);
    margin-top: 1em;
    width: 25em;
  }

  #sobreMi {
    width: 50rem;
  }
  #sobreMi p {
    margin: 1.5em;
    font-size: 1.1em;
    padding: 0 5em;
  }

  /*--------------  Seccion 2: Materias ----------------*/

  #materias {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    text-align: center;
    margin-top: 4em;
    justify-content: space-around;
  }

  /*En comun, ambas cajas*/
  .materias-aprobadas,
  .datos-academicos {
    border: 0.1em ridge #fdb513;
    padding: 2em;
    height: 39em;
    margin: 0;
  }

  /*--------------  Seccion 3: Trabajos ----------------*/

  #trabajos {
    margin-top: 4em;
  }
  .videos-trabajos {
    flex-flow: row;
    justify-content: space-around;
  }

  .video-uno,
  .video-dos {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
  }

  .video-uno p,
  .video-dos p {
    width: 30em;
  }

  .video-dos {
    margin: 0;
  }

  #obito,
  #losQueNoVuelven {
    width: 30em;
    height: 20em;
  }

  #obito iframe,
  #losQueNoVuelven iframe {
    width: 100%;
    height: 100%;
  }

  /*--------------  Seccion 4: Acumar ----------------*/
  #acumar {
    border: none;
  }

  #acumar p {
    width: 50rem;
  }

  #comitente {
    max-width: 98%;
    margin-top: 4em;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    align-items: center;
    background-color: #080707;
    border: 0.1em ridge #898989;
  }

  #comitente figure {
    margin-top: 3em;
  }

  #logoAcumar {
    width: 40em;
    margin-bottom: 3em;
  }

  /*-------------- En clase ----------------*/
  .enClase {
    margin: 6em 0;
    height: 15em;
  }
  .botones {
    justify-content: center;
  }
  .botones button {
    width: 20em;
    height: 5em;
    margin: 2em;
  }
  .botones button span {
    font-size: 1.7em;
  }

  /*--------------  Alumnos ----------------*/

  .contenedora-alumnos {
    margin-top: 8em;
  }

  .contenedora-alumnos {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .contenedora-alumnos ul {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .contenedora-alumnos li {
    margin: 1em;
  }

  .contenedora-alumnos nav a {
    border: 0.1em ridge #fbd513;
    border-radius: 1em;
    display: inline-block;
    min-width: 15em;
    height: 3em;
    padding: 0.8em;
  }

  .contenedora-alumnos img {
    background-color: white;
    width: 7em;
    height: 4em;
    margin: 0;
  }

  /*--------------  Footer ----------------*/

  footer {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  footer p {
    margin: 1em;
    font-size: 0.8em;
    border-top: 0.1em solid #898989;
  }

  footer p {
    margin: 1em;
    font-size: 0.9em;
  }
}