@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=League+Spartan&family=Montserrat:wght@300;400;500;700&family=Sorts+Mill+Goudy&display=swap');

@font-face {
  font-family: iconos;
  src: url('../fuentes/iconos.woff') format('woff');
}


:root {
    --color-fondo1: hsl(0, 0%, 100%);
    --color-fondo2: hsl(0, 0%, 85%);
    --color1: hsl(332, 100%, 21%);
    --color-botones-filtro: hsl(0, 0%, 38%);
    --color-links: hsl(332, 84%, 59%);
    --color-links-boton: hsl(332, 100%, 21%);
    --textos-principal: hsl(0, 0%, 0%);
    --textos-secundarios: hsl(0, 0%, 38%);

    --title-font: 'Sorts Mill Goudy', serif;;
    --font-1: 'Montserrat', sans-serif;
    --font-2: 'League Spartan', sans-serif;
}

/*reset*/
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  box-sizing: border-box;
}

/*generales*/
body {
  font-family: var(--font-1);
  background-color: var(--color-fondo1);
  color: var(--textos-principal);
  margin: 0;
}

h1 {
  font-family: var(--title-font);
  font-size: 1.7em;
  text-align: center;
  margin: 1em;
  padding: .5em;

  border-bottom: solid 3px var(--color1);
}


header, 
footer {
    background-color: var(--color1);
    margin: 0;
    color: var(--color-fondo1);
}

img {
  width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: var(--color-links);
}

ul,
ol {
  list-style: none;
  padding-inline: 0;
}

header.contenedora {
  width: min( 100%, 60rem );
  margin-inline: auto;
  padding: .5rem;
}

/*header*/

header #logo img {
  width: 3em;
  margin-left: .5em;
  margin: .8em auto .5em .5em;
}

header {
  position: sticky;
  top: 0;
  z-index: 9999;
}

header .contenedora {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* botón */
.menu-btn {
  padding: .75rem;
  width: 3rem;
  aspect-ratio: 1;
  cursor: pointer;
  transition: all 0.3s ease-out; /* anima el "hover" */

}

/* cuando "nav" tiene la clase "menuVisible" */
.menuVisible .menu-fondo {
  background: hsl(209 100% 35% / 0.95);
  width: 200vw;
  inset: -100vw -100vw auto auto;
}

/* barras manú */
.menu-btn .btn-linea {
  width: 25px;
  height: 3px;
  margin: 4px 0 4px 0;
  background: var(--color-fondo1);
  transition: all 0.3s ease-out;
  /* capa superior, pero no parece */
  position: relative;
  /* capa superior, casi arriba de todo */
  z-index: 9000;
}

/* cada barra, transformacion para formar la "X" */
.menuVisible .menu-btn .btn-linea {
  transform: rotate(180deg);
}
/* Las tres barras para formar la "X" */
.menuVisible .menu-btn .btn-linea:nth-child(1) {
  transform: rotate(45deg) translate(4px, 6px);
}
.menuVisible .menu-btn .btn-linea:nth-child(2) {
  opacity: 0;
}
.menuVisible .menu-btn .btn-linea:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -6px);
}

header nav ul {
  background-color: var(--color1);
  padding-bottom: 1em;
  border: solid 1px var(--color-fondo1);

  position: absolute;
  right: 0;
  left: 25vw;
  top: 81px;
  z-index: 9991;

  transition: all .3s ease; 

  /* 
  z-index: 9999;  */
}

/* cuando el menu se ve */
.menuVisible ul {
  visibility: visible;
  opacity: 100%;
  transition: all .5s .2s ease; 
}


header nav a {
  color: var(--color-fondo1);
  font-family: var(--font-2);
  text-transform: capitalize;
  font-size: 1em;
  display: block;
  text-align: center;
  padding: 1em;
}

nav ul {
  opacity: 0;
  visibility: hidden;
}

/* CAMBIAR IMGAGEN A SVG O PNG blanco!! */
header nav img {
  filter: invert();
  max-width: 3em;
}

/* hover cambia todo menos el ícono de perfil */
header nav li:not(:first-of-type) a:hover{
  background-color: var(--color-fondo1);
  color: var(--color1);
}

header .busqueda {
  position: relative;
  border: solid 2px var(--textos-principal);
  margin-left: 1em;
  margin-right: 1em;
}

header .busqueda input[type="search"] {
  width: 12em;
  height: 1.5em;
  padding-left: .5rem;
}

/* que no salga la cruz */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}

header button#lupita {
  position: absolute;
  right: .2em;
  top: .2rem;
}

header a.lupa::before {
  font-family: iconos;
  font-weight: bolder;
  font-size: 1.1em;
  content: "B";
  color: black;
}

header button {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

header button#lupita {
  color: var(--textos-principal);
}


/* main */

.cajita-gris {
  background-color: var(--color-fondo2);
  margin: 0 0 2em 0;
}

.subt {
  font-family: var(--font-1);
  font-size: .9em;
  padding-bottom: .5em;
}

.filtro-y-busqueda {
  margin: 1.7em;
  display: flex;
  gap: 1em;
  justify-content: space-between;
  align-items: center;
}

.filtro-y-busqueda .busqueda {
  position: relative;
  top:.6em;
}

.filtro-y-busqueda a.filtro {
  background-color: var(--color-botones-filtro);
  color: var(--color-fondo1);
  font-size: 1em;
  padding: 3px 1em 3px 1rem;
  font-family: var(--font-1);
}

.filtro-y-busqueda a.filtro::after {
  color: var(--color-fondo1);
  font-size: .9em;
  font-family: var(--font-1);
  content: "▼";
  margin-left: .5em;
}

#fcontent {
  display: none;
}

#fcontent:target {
  background-color: var(--color-fondo1);
  font-size: 1.5em;
  outline: solid 1px var(--textos-secundarios);
  position: absolute;
  top: 10em;
  left: 1.2em;
  right: 1em;
  bottom: 16em;
  padding: 1em;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  z-index: 9998;

  max-width: 500px;
}

#fcontent a {
  color: var(--textos-secundarios);
  border-bottom: solid 1px var(--textos-secundarios);
  margin-bottom: 1.5em;
}

.filtro-y-busqueda .busqueda-input {
  border: solid 1px var(--textos-principal);
  padding: 4px;
  width: 100%;
}

.filtro-y-busqueda a.lupa::before {
  font-family: iconos;
  font-weight: bolder;
  font-size: .9em;
  content: "B";
  color: black;
}

.filtro-y-busqueda button#lupita {
  position: relative;
  left: 90%;
  top: auto;
  bottom: 1.7em;

  background-color: transparent;
  border: none;
  cursor: pointer;
}


.contenedor-main {
  margin: 2em;
}

.contenedora-libros {
  margin: auto 1em auto 1em;
}

.contenedora-libros :not(first-child){
  display: flex; /*va a grid cuando sepamos hacer carousel?*/
  gap: .5em;
  flex-direction: row;
  flex-wrap: nowrap;

  padding: 5px;
}

.contenedora-libros h2 {
  font-size: 1.2em;
  font-weight: 700;
  padding: 0 0 1em 0;
  margin-top: 3em;
}


.carousel {
  display: flex;
  overflow-x: scroll;
}

.carousel article { 
  display: grid;
  grid-template-rows: 1fr 0 4em 2em auto;
  align-content: space-between;

  background-color: var(--color-fondo2);
  padding: 3px;
  /* margin-bottom: 4em; */
  box-shadow: 0 0 3px 2px hsl(0deg 0% 0% / 27%) ; 

  min-width: 180px;
  max-width: 250px;

  position: relative;
}


a.info {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  background-color: var(--color-fondo2);
  padding-block: 0.25em;
  text-align: center;
  border: solid 2px;
  margin: .8em;
}

a.info:hover{
  background-color: var(--color-botones-filtro);
  color: var(--color-fondo1);
}

a.descargarLibro::before {
  font-family: iconos;
  content: "A";
  color: var(--color-links);
  font-size: 3em;
  padding: 0;

  position: absolute;
  bottom: 4.2em;
  left: 2.3em;
  z-index: 9990;

  background-color: var(--color-fondo1);
  width: 3.2rem;
  text-align: center;
  border-radius: 100%;
  aspect-ratio: 1;
}



#boton-blanco {
  border: solid 1px var(--color-fondo2);
  background-color: var(--color-fondo1);
  font-family: var(--font-1);
  font-weight: 700;
  font-size: 1em;
  color: var(--color1);
  padding: 3px 1em 3px 1rem;
  box-shadow: var(--color-fondo2) 2px 2px 2px 2px;
}



/*footer*/

footer .contenedora {
  display: grid;
  grid-template-columns: 2em 1fr 2em;
  grid-template-rows: 2em 15vh 1fr;

  padding: 1em 1.5em 1em 1.5em;
}

footer a {
  color: var(--color-fondo1);
  grid-area: 1 / 2 / 2 / 3;
  text-align: center;
}

/* el logo de bibliotecas móviles no termina en la row 3 */
.footerLogos {
 grid-area: 2 / 2 / 3 / 2;
}

.footerLogos img#logo {
  max-width: 100px;
}

footer p {
  grid-area: 3 / 2 / 4 / 3;
  font-size: .7em;
}

div.footerLogos {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 2em;
  align-items: center;
}

/* INICIO específicos */
.cajita-gris h1 {
  border-bottom: none;
}
/* termina INICIO específicos */


/* AYUDA específicos */

  .ayudasection {
    padding: 1em 1.5em 1em 1.5em;
    margin-bottom: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
  } 

  .ayudasection h3 {
    font-family: var(--font-1);
    font-weight: 400;
    font-size: 1em;
    text-transform: uppercase;
    
    margin-bottom: .5em;
  }

  p.pregunta {
    background-color: var(--color-fondo2);
    font-family: var(--font-1);
    font-weight: 700;
    font-size: 1em;
    text-transform: uppercase;
    color: var(--color1);
    padding: .5em;
    width: 100%;
    text-align: start;
    cursor: pointer;
    margin-bottom: 1em;
  }

  .ayudasection ul li {
    color: var(--textos-secundarios);
  }

  .ayudasection .subt {
    border-bottom: solid 1px var(--textos-principal);
  }

  .respuesta{
    height: 0;
    width: 0;
    overflow: hidden;  
  }

  .showres {
    height: auto;
    width: auto;
    margin-bottom: 1em;
    padding: 0 .5em 0 .5em;
  }

/* termina AYUDA específicos */


/* BÚSQUEDA AVANZADA específicos */
  .desplegable-busqueda {
    display: none;
  }

  .contenedor-busqueda-a {
    display: flex;
    justify-content: space-around;
    margin-bottom: 5em;
  }

  .contenedor-busqueda-a .form__input{
    border: 3px solid var(--textos-principal);
    padding: .5em 1em .5em 1em;
    width: 100%;
    background: none;
    padding: 0.5em;
    border-radius: 0.25em;
  }

  .contenedor-busqueda-a button#lupita {
    position: relative;
    left: 14em;
    bottom: 2.1em;
  }

  .contenedor-busqueda-a a.lupa::before {
    font-family: iconos;
    font-weight: bolder;
    font-size: 1.2em;
    content: "B";
    color: black;
  }

  .contenedor-busqueda-a button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: var(--textos-principal);
  }

  .contenedor-promos h3 {
    font-family: var(--font-1);
    font-weight: 700;
    font-size: 1em;
    text-transform: uppercase;
    margin-bottom: 0.5em;
  }

  .promo-coleccion {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(auto-fit, minmax(10em, 100%), 1fr);
    justify-content: center;
  }

  .promo {
    background-color: var(--color-fondo2);
    box-shadow: 0 0 3px 2px hsl(0deg 0% 0% / 27%);
    padding: 2em;
    cursor: pointer;

    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: space-between;
  }

  .promo .img-promo {
    margin: 2em 2em 2em 2em;
    width: 6em;
    align-self: center;
  }

  .promo a {
    font-weight: 700;
    margin-top: .5em;
    display: block;
    text-align: right;
  }

  .promo a::after {
    font-family: iconos;
    font-size: 1em;
    content: "F";
    margin-left: .2rem;
    color: var(--color-links);
  } 
/* termina BÚSQUEDA AVANZADA específicos */


/* CATÁLOGO específicos */
  .head-catalogo p {
    margin: 1em;
    padding: 0.5em;
  }

  .catalogo-esp .carousel {
    overflow-x:initial;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }

  .catalogo-esp article {
    margin-bottom: 1.5em;
  }

  .catalogo-esp a.descargarLibro::before {
      left: 3.7em;
  }
/* termina CATÁLOGO específicos */


/* DATOS PERSONALES específicos */
  .datos-modificar h3 {
    font-weight: 700;
    font-size: medium;
  }

  .datos-modificar {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 35% 65%;
    gap: 1em;
  }

  .contenedor-avatar {
    grid-area: 1 / 1 / 3 / 3;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2fr 1.5em;
    
  }

  .avatar-img img{
    grid-area: 1 / 2 / 2/ 3;
  }

  .contenedor-avatar #avatar-datos {
    display: flex;
    align-items: center;
  }

  .contenedor-avatar a {
    grid-area: 2 / 2 / 3 /3;
    text-align: center;
  }

  .contenedora-datos {
    grid-area: 3 / 1 / 4 / 3;

    display: grid;
    grid-template-columns: auto auto;
    gap: .5em;
  }

  .botonesdatos {
    grid-area: 5 / 1 / 6 / 3;

    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .botonesdatos a:first-of-type{
    margin-top: 1.5em;
    margin-bottom: .7em;
  }

  .contenedora-datos .form__grupo {
    border: 1px solid var(--textos-principal);
    margin: px;
    max-height: 100%;
  }

/* termina DATOS PERSONALES específicos */


/* FORO específicos */
.contenedora-foro {
  margin: 1em;
}

.boton-herramientas {
  margin-right: 2em;
}

.foro-categoria {
  display: flex;
  flex-direction: column;
  margin-bottom: 3em;
}

.foro-categoria h3 {
  font-family: var(--font-1);
  font-weight: 400;
  font-size: 1.1em;
  text-transform: uppercase;

}

.foro-descripcion {
  background-color: var(--color-fondo2);
  padding: 10px 10px 10px 10px;
  border: 1px solid var(--textos-principal);
}

.foro-descripcion:first-of-type,:nth-of-type(2){
  border-bottom: none;
}

.foro-descripcion:last-of-type {
  border: 1px solid var(--textos-principal); ;
}

.foro-descripcion h4 {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1em;
  padding-bottom: .5em;
}

.foro-descripcion p:first-of-type {
  font-weight:400 ;
}

.foro-descripcion p:last-of-type {
  color: var(--textos-secundarios);
}
/* termina FORO específicos */


/* INICIO SESIÓN específicos */
  .todo-inicio {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .contenedora-datos-inicio .ingresar-dato {
    border: solid var(--textos-principal) 1px ;
    max-width: 280px;
    margin: .5rem;
  }

  .contenedora-datos-inicio a {
    display: inline-block;
    text-align: center;
    margin: .5rem;
  }
/* termina INICIO SESIÓN específicos */


/* LIBRO específicos */
  .contenedora-libro {
    margin: 3em 2em 1em 2em;
  }

  .libro-info-principal h3 {
    color: var(--textos-principal);
    font-family: var(--font-1);
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1em;
    padding-bottom: .5em;
    border-bottom: solid var(--textos-principal) 1px;
  }

  .libro-info-principal h2 {
    color: var(--textos-principal);
    font-family: var(--font-1);
    text-transform: uppercase;
    font-weight: 500;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: start;
    border: none;
  }

  .libro-info-principal p.subt {
    font-weight: 500;
    border-bottom: solid var(--textos-principal) 1px;
  }

  p.descripcion-libro {
    color: var(--textos-secundarios);
    font-size: 1em;
    margin-top: .5em;
    margin-bottom: 1em;
  }

  .libro-masinfo {
    display: grid;
    grid-template-columns: 45% 55%;
    grid-template-rows: 5em 2em 6em;
    gap: 1em;
  }

  .libro-masinfo .tapalibro img {
    max-width: 165px;
  }

  .libro-masinfo .tapalibro{
    grid-area: 1 / 1 / 4 / 2;
  }

  .libro-masinfo > ul {
    grid-area: 1 / 2 / 2 / 3;
    color: var(--textos-secundarios);
    font-family: var(--font-2);
  }

  .libro-masinfo li:not(:last-of-type) {
    padding-bottom: .5em;
  }

  .libro-masinfo .boton-no {
    grid-area: 2 / 2 / 3 / 3;
  }

  .libro-masinfo a#filtrar {
    background-color: var(--color-botones-filtro);
    color: var(--color-fondo1);
    font-size: .8em;
    padding: 3px 1em 3px 1rem;
    font-family: var(--font-1);
  }

  .libro-masinfo a#filtrar::after {
    color: var(--color-fondo1);
    font-size: .8em;
    font-family: var(--font-1);
    content: "▼";
    margin-left: 0.5em;
  }

  .libro-masinfo .calificacionlibro {
    grid-area: 3 / 2 / 4 / 3;
  }

  .libro-masinfo .calificacionlibro p {
    font-family: var(--font-1);
    font-weight: 500;
    font-size: .8em;
  }

  .estrellas {
    display: flex;
    margin-top: .5em;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .star img {
    width: 25px;
    height: 25px;
    margin-right: 5px;
  }

  .opciones-libro ul{
    display: flex;
    flex-direction: row;
    gap: 1em;
    justify-content: space-around;
  }

  .opciones-libro li {    
    text-align: center;
  }

  .opciones-libro img {
    width: 3em;
  }

  .opciones-libro p {
    font-family: var(--font-2);
    font-size: 1.1em;
    color: var(--color-links);
    padding: 0.2em 0.4em;
    text-align: center;
    border: solid 1px;
    margin-top: 0.8em;
  }
  
  .opciones-libro p:hover{
    background-color: var(--color-botones-filtro);
    color: var(--color-fondo1);
  }

  .comentarios {
    background-color: var(--color-fondo2);
    padding: 2em;
    margin-bottom: 2em;
  }

  .comentarios h3{
    border-bottom: 1px solid var(--textos-principal);
    padding-bottom: .5em;
    margin-bottom: .5em;
  }

  .comentarios a#filtrar{
    background-color: var(--color-botones-filtro);
    color: var(--color-fondo1);
    font-size: .8em;
    padding: 3px .5em 3px .5rem;
    font-family: var(--font-1);
    margin-bottom: 1em;
  }
  
  .comentarios a#filtrar::after {
    color: var(--color-fondo1);
    font-size: .8em;
    font-family: var(--font-1);
    content: "▼";
    margin-left: .5em;
  }

  .comentario {
    display: grid;
    grid-template-columns: 92px 1fr;
    grid-template-rows: 1em 1.5em 2.5em 100%;

    background-color: var(--color-fondo1);
    margin-bottom: 1em;
  }

  .comentario span#avatar img {
    width: 60px;
    border-radius: 100%;
    margin: 1em;
  }

  .comentario h4 {
    grid-area: 2 / 2 / 3 / 3;
  }

  .comentario .estrellas {
    grid-area: 3 / 2 / 4 / 3;  
  }

  .comentario p {
    grid-area: 4 / 2 / 5 / 4;
    font-family: var(--font-2);
    padding: .5em .5em .5em 0;
  }

/* termina LIBRO específicos */



/* empieza NOVEDADES espcíficos */
.contenedora-talleres {
  Display: flex;
  flex-wrap: wrap;
  gap: 1em;
  justify-content: space-around;
}

.taller{
  background-color:var(--color-fondo2);
  margin-block: .8em;
  padding: 1em;
  max-width: 300px;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
/* terminada NOVEDADES espcíficos */


/* empieza MÁS INFO específicos */
.taller-info{
  background-color: var(--color-fondo2);
  margin-block: .10em;
  padding: 2em;
  padding-block-start: 2em;
}
.contenedora-masinfo{
  text-align:left;
  display: flex;
  flex-direction: column;
}
.contenedora-masinfo p:first-child{
  margin: auto auto auto 2em;

}
.contenedora-masinfo h3{
  margin: auto auto auto 2em;}
/* termina MÁS INFO específicos */

/* RECOMENDADOS específicos */

/* termina RECOMENDADOS específicos */





/* 480px */
@media (min-width: 30em) {

}


/* 640px */
@media (min-width: 40em) {
  header nav ul {
    left: 40vw;
  }

  footer .contenedora {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
  }

  footer .contenedora > a {
    grid-area: 1 / 1 / 2 / 3 ; 
  }

  .footerLogos {
    grid-area: 2 / 1 / 3 / 2;
  }

  .footerLogos img#logo {
    max-width: 75px;
  }

  footer .contenedora p {
    grid-area: 2 / 2 / 3 / 3;
    display: flex;
    align-items: center;
  } 

  /* foro */  
  .talleres-wrapper {
    flex-direction: row;
  }

}

/* 768px */
@media (min-width:48em) {


}



/* 960px */
@media (min-width:60em) {
  main {
    margin: 0 12% 0 12%;
  }  

  header {
    position: static;
  }

  header .contenedora {
    display: flex;
    justify-content: space-evenly;
  }

  nav div.menu-btn {
    display: none;
  }

  header nav ul {
    position: static;
    opacity: 100%;
    visibility: visible;
  
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: no-wrap;
    align-items: center;
  
    border: none;
    padding-bottom: 0;
}

header nav ul a {
  font-size: medium;
  padding: 2px 1.5em 2px 1.5em;
}

nav ul li:not(:last-of-type, :first-of-type) a{
  border-right: solid 1px var(--color-fondo1);
}

header nav ul a img {
  order: 1;
  height: 35px;
  width: 35px;
}

.menu :nth-child(1) { 
  order: 2; 
}


footer .contenedora {
  grid-template-columns: 1fr 1fr;
  gap: .5em;
  margin-top: 0;
}

footer .contenedora > a {
  grid-area: 1 / 1 / 2 / 3 ; 
}

.footerLogos {
  grid-area: 2 / 1 / 3 / 2;
}

.footerLogos img#logo {
  max-width: 75px;
}

footer .contenedora p {
  grid-area: 2 / 2 / 3 / 3;
  display: flex;
  align-items: center;
} 

/* búsqueda */
.promo-coleccion {
  margin-top: 1em;
  grid-template-columns: repeat(auto-fit, minmax(20em, 30em));
}

.promo {
  flex-direction: row;
}

}



/* dark mode */
@media (prefers-color-scheme:dark) {
  :root {
    --color-fondo1: hsl(0, 0%, 100%);
    --color-fondo2: hsl(0, 0%, 85%);
    --color1: hsl(332, 100%, 21%);
    --color-botones-filtro: hsl(0, 0%, 38%);
    --color-links: hsl(332, 84%, 59%);
    --color-links-boton: hsl(332, 100%, 21%);
    --textos-principal: hsl(0, 0%, 0%);
    --textos-secundarios: hsl(0, 0%, 38%);
}
  .academicos img {
    -webkit-filter: invert(1);
    filter: invert(1);
    }
}