/*Los nombres de las clases provienen de Bootstrap, pero pueden modificarse ligeramente desde aquí*/
/*Esta hoja de estilos está hecha siguiendo los tutoriales de w3: 
https://www.w3schools.com/bootstrap/bootstrap_theme_band.asp*/
/*y https://www.w3schools.com/bootstrap/bootstrap_theme_company.asp*/
/*Hay que tener cuidado de dónde se coloca la liga a esta página en el html. No funciona el fondo de color en
la barra de navegación si la liga no es la última antes del </head>*/
/* CUIDADO: MUCHO DE LO QUE YA JALA EN LA PÁGINA, DEJA DE FUNCIONAR CUANDO SE CARGA ESTA PÁGINA
DE ESTILOS AL ÚLTIMO*/

/*COLORES
- Fondos -
Fondo Body: bg-gris = #F8F8F8
Fondo pie de página: #800010;
Fondo barra nav: #800010;
Fondo título: bg-gray = #F8F8F8
Fondo Nosotros: bg-nosotrososc = #66000c;
Fondo Convocatorias: bg-convoclight = #b7fae4
Fondo Libros: casi blanco neutro
Fondo Autores: bg-cuasibco = #FDFDFD;
Fondo Contacto: Silver #C0C0C0 / 

- Barra del navegador -
Fondo barra navegador: #800010;
Fondo letras hover y active barra nav: #cc0018
Texto normal: #ff808e; (#d5d5d5 orig)
Texto hover y active: #FFFFFF; o #fff;
Botón hamburguesa fondo: #cc0018

- Bloque Pie de página -
Fondo pie de página: #800010;
Color letras: #f5f5f5 WhiteSmoke
Color ligas: #ff808e
Color ligas hover y active: #fff

- Carrusel -
Color de las flechitas: #cc0018;
Color de las bolitas seleccionables: #cc0018;
Color de la orillas de las bolitas seleccionables: #cc0018;

- Bloque Título -
Color fondo: bg-gray = #F8F8F8
Color texto: --fbc-primary-text: #15141A; (viene de Bootstrap)
Tipo de letra: fredericka-the-great-regular, carattere-regular o charm

- Bloque Nosotros -
Color fondo: bg-nosotrososc = #66000c;
Color texto normal: #FAFAFA
Color ligas: #00ccb4
Color hover / active / focus: #14b8a4
Color texto botón: #330006
Color fondo h4 "Issoku...": #333
Color texto h4 "Issoku...": #fff !important

- Bloque Convocatorias -
Color fondo: bg-convocosc = #14b8a4, bg-convoclight = #b7fae4 o bg-convocclaro = #14b8a4;
Color texto normal: de Bootstrap
Color ligas: de Bootstrap
Color fondo h4 "BASES": #333
Color texto h4 "BASES": #fff !important

- Bloque Libros -
Color fondo: bg-libros = WhiteSmoke; = #F5F5F5
Color fondo cabecera modal h4: #333
Color texto cabecera modal h4: #fff !important
Color fondo subtit h4 genero: #330006
Color texto subtit h4 genero: #fff !important
Color texto normal: de Bootstrap
Color ligas: de Bootstrap

- Bloque Autores -
Color fondo: bg-cuasibco = #FDFDFD;
Color texto normal: de Bootstrap
Color ligas: de Bootstrap
Color halo alrededor de imágenes: #b81428

- Bloque Contacto -
Color fondo: bg-nosotros = #ffe6e8 / bg-libros = WhiteSmoke; = #F5F5F5
Color texto normal: de Bootstrap
Color ligas: de Bootstrap
*/

/*El padding es para evitar que la barra de menú se coma la parte superior del carrusel*/
body {
	padding-top: 50px;
	
}

h3 {
  letter-spacing: 5px;
  font-weight: bold !important;
  padding-bottom: 5px;
  font-size: 1.6em !important;
}

/*"container" se usa con un DIV, son las bases para casi todas las secciones de la página.*/
.container {
  padding: 80px 120px;
}

.containcontacto {
  padding: 40px 1px;
  border: 2px solid white;
  border-radius: 20px;
}


/*Todo lo que comienza con .bg- sirve para cambiar el color de fondo de un container o de un div específico para el color*/
.bg-gris {
  background-color: #F8F8F8;
  font-size: 16px;
}

.bg-nosotros {
  background-color: #ffe6e8/*#ffb3bb*/;
}

.bg-nosotrososc {
  background-color: #66000c;
  color: #FAFAFA;
}

.bg-nosotrososc a {
  color: #00ccb4; /*de la familia del cyan y el teal*/
}

.bg-nosotrososc a:hover, a:focus, a:active {
  color: #33ffe7; /*20% más claro que #00ccb4*/
  /*#f5a3ad;*/ /*de la familia del rosa*/
}

.bg-convocosc {
  background-color: #00665a;
}

.bg-convocclaro {
  background-color: #14b8a4;
}

.bg-convoclight {
  background-color: #dafff0/*#b3ffdf*//*#b7fae4*/;
}

.bg-convfab {
  background-color: #FABADA;
}

.bg-cuasibco {
  background-color: #FDFDFD;
}

.bg-libros {
  background-color: WhiteSmoke; /* = #F5F5F5*/
  /*font-size: 14px;*/
}

.bg-gris1 {
  background-color: #E8E8E8;
}

.bg-gris2 {
  background-color: #D8D8D8
}

.bg-contacto {
  background-color: Silver; /*=#C0C0C0*/
}

.bg-piepag {
  background-color: #800010;/*maroon;*/
}

.bg-autores {
  background-color: #E8E8E8;/*#FABADA; demasiado morado-rosaseo*/
}

.bg-apoyar {
  background-color: #a3f5cc;
  background-image:
    linear-gradient(
      #a3f5cc, #02d4e3, #a3f5cc
    );
}

/* .col-sm-4 es una clase de Bootstrap. Hay que ver si no se puede hacer esto de otra forma*/
/* Este cambio se metió para... ? */
/*@media screen and (max-width: 768px) {
  .col-sm-4 {
    text-align: center;
    margin: 25px 0;
  }
}
*/ 

/*CARRUSEL*/
/* Tamaño de las imágenes */
.carousel-inner img {
  /*-webkit-filter: grayscale(90%);
  filter: grayscale(90%); /* make all photos black and white */
  width: 100%; /* Set width to 100% */
  margin: auto;
}

/* Color de las flechitas para mover a la izq o a la der */
.carousel-control.right, .carousel-control.left {
   color: #cc0018 !important;
  }
  
/* Color de la orilla de la bolita del "indicator" */
.carousel-indicators li {
    border-color: #E8E8E8 !important;/*border-color: #cc0018 !important; bordes rojos*/
  }
  
/* Color de la bolita del "indicator" */
.carousel-indicators li.active {
    background-color: #cc0018;
  }

/* Botones para los libros*/
/* Black buttons with extra padding and without rounded borders */
.btn {
  padding: 10px 20px;
  background-color: #333;
  color: #f1f1f1;
  border-radius: 0;
  transition: .2s;
}

/* Botones para los libros*/
/* On hover, the color of .btn will transition to white with black text */
.btn:hover, .btn:focus {
  border: 1px solid #333;
  background-color: #fff;
  color: #000;
}

/* Modificaciones en el modal que también afectan a h4 en cualquier parte*/
/* Add a dark gray background color to the modal header and center text */
.modal-header, h4, .close {
  background-color: #333;
  color: #fff !important;
  text-align: center;
  font-size: 1.125em !important;
}

.modal-header, .modal-body {
  padding: 40px 50px;
}

/*Modificaciones para las imágenes de los autores*/
.person {
  border: 10px solid transparent;
  margin-bottom: 25px;
  max-width: 80%;
  max-height: 80%;
  /*opacity: 0.7;*/
}
.person:hover, .person:active, .person:focus {
  border-color: #b81428;
  /*opacity: 1;*/
}

/* Barra de navegación */ 
/* Add a dark background color with a little bit see-through */
 .navbar {
    font-size: 16px !important; /*venía en el código original*/
    font-weight: bold;
    letter-spacing: 4px;
    opacity: 0.9;
    /*Los últimos tres renglones acaban invalidados por las hojas de estilo en Bootstrap si el link
    a esta hoja no es el último.*/
    /*Para evitar que ocurra se le aplica un !important*/
    background-color: #800010 !important;
    margin-bottom: 0 !important;
    border: 0 !important;
  }

/* Add a gray color to all navbar links */
/*Se refiere a las letras del menú*/
.navbar li a, .navbar .navbar-brand {
  color: /*pink*/#ff808e !important; /*venía en el código original*/
}

/* On hover, the links will turn white */
.navbar-nav li a:hover {
  color: #fff !important; /*venía en el código original*/
}

/* The active link */
/* Fondo detrás de las letras en el menú */
.navbar-nav li.active a {
  color: #fff !important; /*venía en el código original*/
  background-color: #cc0018/*#29292c*/ !important; /*venía en el código original*/
}

/* Dropdown */
.open .dropdown-toggle {
  color: #fff ;
  background-color: cyan/*#555*/ !important;
}

/* Dropdown links */
.dropdown-menu li a {
  color: #000 !important;
}

/* On hover, the dropdown links will turn red */
.dropdown-menu li a:hover {
  background-color: red !important;
}

/*Modifica el relleno del header y navbar-brand para que el logo quede dentro de la barra. 
el original es padding; 15px 15px;*/
.navbar-brand {
  padding: 5px 15px !important;
}

/* Modifica el color de las rayas en el botón del menú en pantallas pequeñas */
.icon-bar {
  background-color: #e5e5e5 !important;
}

/*Modifica el color del hover y el active del botón del menú en pantallas pequeñas*/
.navbar-toggle:focus, .navbar-toggle:hover {
  background-color: #cc0018 !important;
}

/*Estilos footer*/
/* Add a dark background color to the footer */
/*footer {
  background-color: #2d2d30;
  color: #f5f5f5;
  padding: 32px;
}*/

footer a {
  color: #ff808e;
}

footer a:hover, footer a:focus {
  color: #fff;
  text-decoration: none;
}

/*____________________________________________________________________________________________*/

/* .rellenos sirve para darle padding al container-fluid en NOSOTROS y CONVOCATORIAS */
.rellenos {
  padding: 60px 50px;
  /*border: 1px solid #4CAF50;
  background-color: #aaffff;*/
}

/*Fonts*/
.charm-regular {
  font-family: "Charm", cursive;
  font-weight: 400;
  font-style: normal;
}

.charm-bold {
  font-family: "Charm", cursive;
  font-weight: 700;
  font-style: normal;
}

.carattere-regular {
  font-family: "Carattere", cursive;
  font-weight: 600;
  font-style: normal;
}

.fredericka-the-great-regular {
  font-family: "Fredericka the Great", serif;
  font-weight: 500;
  font-style: normal;
}


/* TÍTULO */

@media (max-width: 650px) {
    .titulo {
    padding: 20px;
    }
}

@media (min-width: 651px) {
    .titulo {
    font-size: 1.5em;
    padding: 40px;
    }
    .titulo h2{
    font-size: 2em;
    }
}

@media (min-width:1000px) {
    .titulo h2{
    font-size: 3.5em;
    }
}

/* Nosotros */

.nosboton {
  color: #330006;
}

.lineacorreo {
    margin-top: 1em;
    font-size: 1.25em;
}

.lineacorreo a {
    font-weight: bold;
}

/* CONVOCATORIAS */
.rellenolat {
  padding-left: 60px;
  padding-right: 60px;
}

.rellenoimgabajo {
  margin-bottom: 60px;
}

.nocobramos {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 1.1em;
  font-weight: bold;
}

/*Se coloca en un <p>*/
.rellenobtncv {
  padding-top: 10px;
  padding-bottom: 20px;
}

.rellenobtncv a:hover, a:focus, a:active {
  color: #ffffff !important;
}



.cnvlineacorreo { /*se pone sobre un p o un span. no funciona sobre <a>*/
  margin-top: 1em;
  font-size: 1.1em;
  font-weight: bold;
}

.cnvlineacorreo a {
  color: #ad33ff !important; /*primo del morado*/
}

.cnvlineacorreo a:hover, a:focus, a:active {
  color: #ff3385 !important; /*primo del rosa*/
}

/* LIBROS */

.thumbnail img {
  width: 66%;
  height: auto
}

.introlibros {
  padding-top: 5px;
  padding-bottom: 10px;
}

.introlibrostop {
  padding-top: 5px;
}

.genero h5 {
  /*background-color: #330006;*/
  color: #330006 !important;
  text-align: center;
  font-size: 1.25em; /*20px si el tamaño de letra base es 16px*/
  font-weight: bold;
  letter-spacing: 4px;
  padding-top: 5px;
  padding-bottom: 8px;
  border-bottom: 2px solid #330006;
}

.titlibro {
  margin-top: 0.5em;
  font-weight: bold;
  /*font-size: 1.1em;*/
}

.subtitlibro {
  margin-top: -0.5em;
  margin-bottom: 0.8em;
}

/* Autores */
.nomaut {
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: -15px;
}

/* Contacto */
.contcorreo {
    margin-top: -0.4em;
    margin-bottom: 1em;
    font-size: 1.1em;
}

.contcorreo a {
    font-weight: bold;
}

.contliga {
    margin-top: -0.6em;
    font-size: 1.1em;
}

.contliga a {
  font-weight: bold;
}

.contrelleno {
  padding-top: 20px;
  padding-bottom: 30px;
}

/* Estilos Pie de página míos */
.piepag p {
  margin-top: 2.5em;
  font-weight: bold;
  color: WhiteSmoke;
}

.pierelleno {
  padding-left: 20px;
  padding-right: 20px;  
}

#correo:hover, #fb:hover, #insta:hover, #yt:hover, #bsky:hover {
  opacity: 0.7;
}

#correo:focus, #fb:focus, #insta:focus, #yt:focus, #bsky:focus {
  opacity: 0.7;
}

/*Páginas de AUTORES*/
.autfoto img {
  padding-bottom: 30px;
}

.autores h5 {
  /*padding-top: 10px;*/
  padding-bottom: 10px;
  font-weight: bold;
  font-size: 2.25em; /*36px si el tamaño de letra base es 16px;*/
  font-family: "Charm", cursive;
}

.autlibros {
  padding-top: 20px;
  padding-bottom: 10px;
}

.autlibros img {
  width: auto;
  height: 150px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
}

.autport img {
  opacity: 1.0;
}

.autport:hover, .autport:focus, .autport:active {
  opacity: 0.7;
}

/*Página de CONVOCATORIAS*/

/* <weight>: Use a value from 300 to 800
   <uniquifier>: Use a unique and descriptive class name*/

.opensonsa{
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ejemserif {
  font-family: serif;
}

.ejemmono {
  font-family: monospace;
}

.ejemsans {
  font-family: "TikTok Sans";
}

.rellenoimgconv img {
  padding-bottom: 30px;
}

.margenbases {
  margin-top: 40px;
  margin-bottom: 30px;
}

/*Páginas de LIBROS*/
.fruncis {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-style: normal;
}

.libport {
  padding-bottom: 30px;
}

.libport img {
  max-width: 100%;
  padding-bottom: 25px;
}

.libro h5 {
  /*padding-top: 10px;*/
  padding-bottom: 10px;
  font-weight: bold;
  font-size: 2.25em; /*36px si el tamaño de letra base es 16px;*/
  font-family: "Fraunces", serif;
  text-align: center;
}

.libautores {
  padding-bottom: 10px;
  text-align: center;
  font-family: "Fraunces", serif;
}

.rellenotlibro {
  border-radius: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 15px;
  padding-right: 15px;
}

.contsinopsis {
  border-radius: 15px;
  padding-top: 3px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  margin-top: 8px;
  margin-bottom: 15px;
}

.rellenobtnlib {
  padding-top: 20px;
  padding-bottom: 20px;
}

.libtitulo {
  padding-bottom: 10px;
  font-weight: bold;
  font-size: 36px;
  font-family: "Charm", cursive;
}

/*PÁGINA APÓYANOS*/

.bg-apoyar h3 {
  text-shadow: 2px 2px yellow;
}

.apoyrelleno {
  padding-top: 20px;
  padding-bottom: 30px;
}