/*
Theme Name: Sparkling Child
Template: sparkling
*/

/* ----------------------  ---------------------- */
/* ----------------------  ---------------------- */
/* YEUNTEST --- El fue SK, pero se ha modificado */
/* ----------------------  ---------------------- */
/* ----------------------  ---------------------- */

/* ----------------------  ---------------------- */
/* ----------------------  ---------------------- */
/*  RESETS Y CAMBIOS GLOBALES EN TODA LA WEB */
/* ----------------------  ---------------------- */
/* ----------------------  ---------------------- */

@media only screen and (min-width: 768px) {
  .imagen-principal-home.iph-01 {
    width: 37%
  }

  .imagen-principal-home.iph-02 {
    width: 62%;
  }

  /* .contenedor-imagen-principal-home {
    display: flex !important;
  } */
}



* {
  font-family: sans-serif;
}

@media only screen and (max-width: 768px) {
  * {
    font-size: 15px !important;
  }
}

/* IMPORTANTE: el siguiente reset hace invisible un widget que no debería verse pero que por error de diseño del tema (supongo que será esa la razón) está visible en la URL https://www.sistemakalinka.com/product-category/intensive-lessons/ 
Si algún día quiero hacer visible ese widget, debería borrar esta clase de abajo */
#content>#secondary .well {
  display: none;
}

/* agrego esto el día 11/octubre/23 ya que aparece ese vidget en algunos lecciones dentro de curso español y no entiendo porque (Volodya) */
div#secondary.widget-area {
  display: none;
}

/* Este estilo busca que no haya contenido pegado al marco en la versión móvil */
/* Ojo, no debe afectar a la barra de menú porque si no crearía un hueco blanco a lados */
/* Log de cambios - 14.08.2020 he probado con div#content y parece funcionar */
div#content {
  padding-left: 5px;
  padding-right: 3px;
}

/* Ocultar el botón de "go to top" en toda la web que te hace subir hasta el principio suavemente */
div.scroll-to-top {
  display: none !important;
}


/* Hacer que todos los botones por defecto tengan el mismo aspecto */
/* Lo de .xoo-cp-btns a.xcp-btn es el pop-up que aparece cuando añades un producto al carrito*/
button,
.btn,
.xoo-cp-btns a.xcp-btn {
  background-color: var(--color-01-fondo-superclaro);
  border-color: none;
  color: white;
}

button:hover,
.btn:hover {
  background-color: var(--color-01-fondo-claro);
  border-color: var(--color-01-fondo-oscuro);
  color: white;
  opacity: 0.8;
}

/* Este reset sirve para evitar que cuando Wordpress o el navegador añada <p></p> automáticamente, varie la estética de la página*/
p:empty {
  height: 0;
  margin: 0;
  padding: 0;
}

/* Poner una fuente SANS en todos los h */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: 'arial', sans-serif;
}

/* COLECCIÓN QUITA-HUECOS: Cambios para quitar espacios en blanco en varias partes de cada página (antes del h1, márgenes varios, etc.) */

body header.entry-header.page-header {
  display: none;
}

/*si quito esto de arriba, tendría que añadir lo siguiente para que los títulos sigan invisibles:
.page .entry-title, .single .entry-title {display: none;}
      */

body .entry-content {
  margin-top: 0.75em;
}

body .post-inner-content {
  padding-top: 0;
}

body .container.main-content-area {
  margin-top: 0;
}


/* Ocultar marco de la capa de contenido de toda la web */
.post-inner-content {
  border: 0px !important;
}


/* --- Clases para toda la web --- */

.dar-fullwidth {
  width: 99.5vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.dar-flex {
  display: flex !important;
}

.dar-flex-wrap-wrap {
  flex-wrap: wrap !important;
}

.dar-white-space-nowrap {
  white-space: nowrap !important;
}

.dar-display-hidden {
  display: hidden !important;
}

/* Ocultar el badge de Recaptcha v3 */
.grecaptcha-badge {
  visibility: hidden;
}

/* ------------------------------- */
/* ----------- Mis resets ----------- */
/* ------------------------------- */

/* Estos estilos que empiezan por "ponle" fue una idea mía un poco absurda (menos en algún caso, como por ejemplo un toggle con javascript) porque es mejor hacer estas cosas con element.style.display = "none"; pero aquí se queda por si lo usé alguna vez   */

.ponle-visibility-visible {
  visibility: visible !important;
}

.ponle-display-list-item {
  display: list-item !important;
}

.ponle-display-none {
  display: none !important;
}


/* ------------------------------- */
/* ----------- COLORES ----------- */
/* ------------------------------- */

:root {

  /* --- COLOR PRINCIPAL --- */
  --color-01-fondo-claro: #ee3134;
  --color-01-letra-fondo-claro: white;
  --color-01-fondo-oscuro: #003664;
  --color-01-letra-fondo-oscuro: white;
  --color-01-fondo-superclaro: #4590d1;
  --color-01-fondo-clarosuave: #fc756f;


  /* --- COLOR SECUNDARIO --- */
  --color-02-fondo-claro: #914951;
  --color-02-letra-fondo-claro: white;
  --color-02-fondo-oscuro: #8c2a31;
  --color-02-letra-fondo-oscuro: white;
  --color-02-fondo-superclaro: #e69da5;


  /* --- COLOR TERCIARIO --- color muy neutro, grises sobre todo --- */
  --color-03-fondo-claro: #ECECEC;
  --color-03-letra-fondo-claro: black !important;

  /* --- BOTONES EN TIENDA --- */
  --color-tienda-comprar: #27b704;
  --color-tienda-valoraciones: #27b704;

  /* --- COLOR RESPUESTAS EJERCICIOS --- */
  --color-correcto-fuente: darkgreen;
  --color-correcto-fondo: #ccffcc;
  --color-incorrecto-fuente: darkred;
  --color-incorrecto-fondo: #ffc4c4;

  /* --- COLOR BOTON RARO HOMOGENEO --- */
  --color-boton-raro-homogeneo: #20B2AA;
  --color-boton-raro-homogeneo-hover: #9ACD32;

  /* --- COLOR FASES EN LEARNDASH (LIBROS DIGITALES) --- */
  --color-learndash-nivel-basico: #6dc066;
  --color-learndash-nivel-principiante: #6dc066;
  /* 16.09.2022 Por ahora los niveles básico y principiante tienen el mismo color, porque queda muy bien en el libro online */
  --color-learndash-nivel-medio: #ffa500;
  --color-learndash-nivel-avanzado: #ff4444;


  /* --- COLORES DE NIVELES EN LIBROS DE LA TIENDA--- */
  --color-nivel-basico: #52BE80;
  --color-nivel-principiante: green;
  --color-nivel-medio: #ee8436;
  --color-nivel-avanzado: #bb0000;
  --color-nivel-combo: #006fde;

  --color-nivel-a1: #66bc73;
  --color-nivel-a1-a2: #248c49;
  --color-nivel-a1-c2: #2c76bc;

  --color-nivel-basico-fondo-oscuro: #52BE80;
  --color-nivel-basico-fondo-claro: #d0e8cf;

  --color-nivel-principiante-fondo-oscuro: #52BE80;
  --color-nivel-principiante-fondo-claro: #d0e8cf;

  --color-nivel-medio-fondo-oscuro: #F5B041;
  --color-nivel-medio-fondo-claro: #fcd5c0;

  --color-nivel-avanzado-fondo-oscuro: #EC7063;
  --color-nivel-avanzado-fondo-claro: #f9c4c8;

}

/* --- CLASES QUE APLICAN LOS COLORES DE NIVELES --- */

.color-principiante {
  color: var(--color-nivel-principiante-fondo-oscuro);
}

.color-medio {
  color: var(--color-nivel-medio-fondo-oscuro);
}

.color-avanzado {
  color: var(--color-nivel-avanzado-fondo-oscuro);
}

.background-color-principiante {
  background-color: var(--color-nivel-principiante-fondo-oscuro);
}

.background-color-medio {
  background-color: var(--color-nivel-medio-fondo-oscuro);
}

.background-color-avanzado {
  background-color: var(--color-nivel-avanzado-fondo-oscuro);
}

.border-color-principiante {
  border: 2px solid var(--color-nivel-principiante-fondo-oscuro);
}

.border-color-principiante img {
  box-shadow: 3px 5px 5px 0px rgba(82, 190, 128, 0.75);
}

.border-color-medio {
  border: 2px solid var(--color-nivel-medio-fondo-oscuro);
}

.border-color-medio img {
  box-shadow: 3px 5px 5px 0px rgba(245, 176, 65, 0.75);
}

.border-color-avanzado {
  border: 2px solid var(--color-nivel-avanzado-fondo-oscuro);
}

.border-color-avanzado img {
  box-shadow: 3px 5px 5px 0px rgba(236, 112, 99, 0.75);
}




/* ------------------------------- */
/* ----------- TAMAÑO MOVIL ----------- */
/* ------------------------------- */

@media only screen and (max-width: 768px) {

  /* La clase "crear-hueco-para-ejercicios" se genera gracias a un js que detecta que estamos en la zona con ejercicios (lessons) */
  .container.main-content-area.crear-hueco-para-ejercicios {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .container.main-content-area {
    width: 100%;
  }

  .post-inner-content,
  .woocommerce .main-content-inner {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  h1 {
    font-size: 25px !important;
  }

  h2 {
    font-size: 20px !important;
  }

  h3 {
    font-size: 15px !important;
    font-weight: 600 !important;
  }

}


/* ------------------------------- */
/* ----------- TABLA DE DESCRIPCIÓN DE NIVELES ----------- */
/* ------------------------------- */

.tabla-descripcion-niveles {
  box-shadow: 0 0 20px rgb(0 0 0 / 15%);
  margin-top: 2em;
  margin-bottom: 3em;
}

.tabla-descripcion-niveles tbody tr {
  border-bottom: 1px solid #dddddd;
}

.tabla-descripcion-niveles tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.tabla-descripcion-niveles tr {
  border: hidden;
}

.tabla-descripcion-niveles .tdn-descripcion {
  padding: 1em;
}

td.tdn-nivel {
  width: 2em;
}

.tdn-basico .tdn-nivel {
  background-color: var(--color-nivel-basico-fondo-claro);
}

.tdn-basico .tdn-descripcion span {
  color: var(--color-nivel-basico);
  font-weight: 600;
}

.tdn-principiante .tdn-nivel {
  background-color: var(--color-nivel-principiante);
}

.tdn-principiante .tdn-descripcion span {
  color: var(--color-nivel-principiante);
  font-weight: 600;
}

.tdn-medio .tdn-nivel {
  background-color: var(--color-nivel-medio);
}

.tdn-medio .tdn-descripcion span {
  color: var(--color-nivel-medio);
  font-weight: 600;
}

.tdn-avanzado .tdn-nivel {
  background-color: var(--color-nivel-avanzado);
}

.tdn-avanzado .tdn-descripcion span {
  color: var(--color-nivel-avanzado);
  font-weight: 600;
}



/* ------------------------------- */
/* ----------- BARRA DE MENÚ (EL MEGA MENU ES MÁS ABAJO) ----------- */
/* ------------------------------- */

/* Inicio de: Resets de la plantilla original */
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover {
  background: none;
}

nav.navbar.navbar-default {
  border-radius: unset;
}

/* Fin de: Resets de la plantilla original */


/* Logo en la barra del menú */
/* --> Para la versión de la imagen sistema-kalinka-logo-header.png de 300x76 pixels*/
/* @media (max-width: 992px) {
div#logo img {
  margin-left: -8em;
  max-width: 20em;
}
}
@media (min-width: 992px) {
  div#logo img {
    position: absolute;
    left: -8em;
    z-index: 1;
}
} */
/* --> Para la versión de la imagen sistema-kalinka-logo-header-bold.png de 700x150 pixels*/
@media (max-width: 1200px) {
  div#logo img {
    max-width: 18em;
  }
}

@media (min-width: 1200px) {
  div#logo img {
    z-index: 1;
    width: 30em;
    margin-left: 20em;
  }
}

ul.navbar-nav li a {
  transition: 0.5s;
  color: white !important;
}

ul.navbar-nav li a:hover {
  color: pink !important;
}

.navbar.navbar-default,
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
  background-color: rgba(0, 0, 0, 0) !important;
  border: none;
}

.nav-cart a {
  color: #ffffff;
}

.navbar.navbar-default ul {
  margin-bottom: -2em;
}


/* --- Barra del menú para móviles --- */

/* --- IMPORTANTE ---- */
/* --- Mientras esta usando el megamenu / mega menu, tengo que hacer invisible el boton "toggle" original del tema */
.navbar-toggle {
  display: none;
}

/* --> Voy a comentar las clases de aquí abajo porque estoy usando megamenu y no son visibles (leer el comentario de un poco más arriba sobre el hacer invisible el botón "toggle" */
/* .navbar-default .navbar-toggle:focus {
  background-color: inherit;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: white;
}


button.btn.navbar-toggle {
  position: absolute;
  right: 0;
} */


/* fondo de la barra de menu */


/* .site-navigation-inner {
  background-color: var(--color-01-fondo-oscuro); */

/* staging color */
/* background-color: #248c49; */
/* } */


/* Si no hay boton "toggle", cambiamos el "display" para que el logo esté a la izquierda de la barra de menú */
/* 11.08.2020 Comenté el estilo de abajo para cambiar el logo de posición */
/* @media only screen and (min-width: 600px) {
  .site-navigation-inner {
    display: flex;
    padding-bottom: 1.5em;
  }
} */


.navbar.navbar-default a {
  padding-top: 0.5em;
  padding-bottom: 0;
}


.navbar.navbar-default .container {
  width: 100%;
}

.navbar-default .navbar-nav>li>a {
  line-height: 1.15em;
}

/* Submenús */

ul.dropdown-menu {
  top: 3em;
}

/* ------------------------------- */
/* ----------- BARRA DE MENÚ INFERIOR (FOOTER) ----------- */
/* ------------------------------- */
footer#colophon .site-info * {
  color: white;
  text-transform: none;
}

footer#colophon ul li {
  background: var(--color-01-fondo-superclaro);
  margin: 5px;
  width: 32ch;
  border-radius: 5px;
  font-size: 1.15em;
}

/* Poner el footer más ancho para que se lea incluso si está en pantalla el banner de aviso de la política de privacidad */
footer#colophon {
  padding-bottom: 0em;
  /* 12.09.2022 Lo cambié de 6em a 0em porque ahora en el footer también hay banderas de idiomas*/
  background-color: var(--color-01-fondo-oscuro);
  border-top: none;
}

.mi-footer-menu{
  display: flex;
  align-items: center;
  flex-direction: column;
}

/* Banderas de idiomas en el footer */
.wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer {
  background-color: var(--color-01-fondo-oscuro);
  margin-bottom: 0 !important;
}

.wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer ul li span {
  color: white;
  opacity: 0.75;
}

.wpml-ls-legacy-list-horizontal>ul {
  margin: 1em 0 !important;
}

/* footer tinylinks */
div#enlaces-footer a {
  color: #aaa;
  /* border-left: 1px solid #999; */
  border-right: 1px solid #999;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 14px;
  line-height: 18px;
}

div#enlaces-footer a.ultimo{
  border-right: none;
}
div#enlaces-footer{
  padding-top: 10px;
}

.copyright{
  font-size: 14px;
}

/* ------------------------------- */
/* ----------- MEGA MENU / MEGAMENU ----------- */
/* ------------------------------- */

/* posicionar el megamenu */
#mega-menu-wrap-primary #mega-menu-primary {
  padding: 1em;
  padding-top: 3em;
  /* Esto sirve para alinear el "suelo" del logo y de la barra del menú */
}

/* Que el toggle para móviles tenga el mismo color de fondo que el resto del menú */
#mega-menu-wrap-primary,
#mega-menu-wrap-primary .mega-menu-toggle {
  background: inherit;
  margin-bottom: 2em;
}

/* --> Banderas en el megamenú (aquí no se tratan los estilos de las banderas en el footer) */

.mega-wpml-ls-item-en,
.mega-wpml-ls-item-es,
.mega-wpml-ls-item-de,
.mega-wpml-ls-item-ru {
  margin-left: 8px !important;
}

.mega-wpml-ls-item-en a,
.mega-wpml-ls-item-es a,
.mega-wpml-ls-item-de a,
.mega-wpml-ls-item-ru a {
  padding: 0px 3px !important;
}

.mega-wpml-ls-item-en a:hover,
.mega-wpml-ls-item-es a:hover,
.mega-wpml-ls-item-de a:hover,
.mega-wpml-ls-item-ru a:hover {
  background: none !important;
  background-color: none !important;
}

.mega-wpml-ls-item-en img,
.mega-wpml-ls-item-es img,
.mega-wpml-ls-item-de img,
.mega-wpml-ls-item-ru img {
  margin-right: 0 !important;
}


/* --> Color de la categoría en la que estamos del menú (es decir, la página en la que estás) */
/* --> Color de hover */
#mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item.mega-current-menu-item>a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item.mega-current-menu-ancestor>a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item.mega-current-page-ancestor>a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item>a.mega-menu-link:hover,
.menu-item.wpmenucart.wpmenucartli:hover {
  background: var(--color-01-fondo-claro);
  border-radius: 5px;
}

/* --> Menu principal */
#mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item>a.mega-menu-link {
  font-size: 1.25em;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  padding: 0px 8px 0px 8px;
  white-space: nowrap;
}




@media only screen and (min-width: 768px) {
  ul#mega-menu-primary {
    /* Este número ayuda a que el menú no se superponga al logo (si esté está en position absolute) */
    /* width: 68% !important;  */
    margin: auto !important;
    text-align: center !important;
  }
}

/* --> Sub menu y elemento del sub menu*/
#mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-megamenu>ul.mega-sub-menu * {
  text-align: center !important;
  font-family: 'Oswald', sans-serif;
  color: white !important;
  text-transform: initial;
}

#mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-megamenu>ul.mega-sub-menu {
  background-color: var(--color-01-fondo-oscuro);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

#mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-megamenu>ul.mega-sub-menu h2 {
  font-size: 1.25em;
  margin-top: -1em;
}

#mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-megamenu>ul.mega-sub-menu p {
  font-weight: 300;
  text-transform: initial;
}

#mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-megamenu>ul.mega-sub-menu img {
  border: 3px #fff solid;
  -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.60);
  -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.60);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.60);
  transition: 0.2s;
}

#mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-megamenu>ul.mega-sub-menu img:hover {
  opacity: 0.5;
  cursor: pointer;
}

span.mi-sub-menu-horizontal {
  /* Esta es la franja/separador en el submenú de libros */
  margin-left: -15px !important;
  margin-right: -15px !important;
  margin-top: -15px !important;
  padding: 5px;
  display: block;
  background: var(--color-01-fondo-claro);
  text-transform: initial;
  letter-spacing: 1px;
  font-size: 1.25em;
  font-weight: 500;
}

h2.mi-submenu-horizontal-2 {
  text-transform: initial;
  display: inline-block;
}

button.btn.mi-submenu-horizontal-3 {
  font-size: 1em;
  text-transform: inherit;
}

li.mega-menu-item.mega-menu-item-type-widget.widget_media_image {
  /* Reducir los espacios en blanco en las imágenes de los submenús */
  padding: 0 0 0.75em 0 !important;
}

.mega-menu-item.mega-menu-item-type-widget.widget_media_image+li {
  /* Reducir los espacios en blanco en los nombres de cada sección del submenu */
  padding-bottom: 0.1em !important;
}


/* --> Link/item del acceso de alumnos (versión EN: 289) */
/* --> Link/item del acceso de alumnos (versión ES: 2378) */
/* --> Link/item del acceso de alumnos (versión DE: 2366) */
/* --> Link/item del acceso de alumnos (versión RU: 2386) */
li#mega-menu-item-289,
li#mega-menu-item-2378,
li#mega-menu-item-2366,
li#mega-menu-item-2386 {
  background-color: var(--color-boton-raro-homogeneo) !important;
  border-radius: 5px !important;
  transition: all .2s !important;
}

/* pisar icono para campus en el menú en todas idiomas */
#mega-menu-item-289 a.mega-menu-link:before,
#mega-menu-item-2378 a.mega-menu-link:before,
#mega-menu-item-2366 a.mega-menu-link:before,
#mega-menu-item-2386 a.mega-menu-link:before
{
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
  content: "\f501";
}

/* ------------------------------- */
/* ----------- SOLO HOME ----------- */
/* ------------------------------- */

/* xxxxx
nuevo para la home
xxxxx */
.home-global-new{
  overflow: hidden;
}

.home-global-new h1, .home-global-new h2, .home-global-new h3, .home-global-new h4, .home-global-new h5, .home-global-new small {
  font-family: 'Oswald',sans-serif;
}

.home-global-new h2{
  color: #484848;
}

.home-global-new h3{
  color: var(--color-01-fondo-superclaro);
}

.home-first-row {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 7em;
}

.home-first-row li {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.home-first-row h1 {
  margin-bottom: 1em;
  font-family: 'Oswald', sans-serif;
  font-size: 50px !important;
  color: var(--color-01-fondo-claro) !important;
}

.home-first-row h1 small {
  color: #ee3134;
}

.home-first-row h1 small {
  font-size: 20px !important;
  font-weight: 400;
}

.home-first-row ul {
  margin-bottom: 10em;
}

.home-global-new .home-first-row h1{
  font-weight: 600;
  color: #2d8fff !important;
  font-size: 40px !important;
  margin: 1em 1em 1em 0em;
}

.contenido-libros-home {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}

@media screen and (max-width: 1300px) {
  .home-global-new .home-first-row h1 {
    margin: 1em 1em 1em 1em;
    font-size: 35px !important;
  }
}

@media screen and (max-width: 1300px){
  .contenido-libros-home {
    justify-content: flex-start;
  }
}

@media screen and (max-width: 600px){
  .tarjetas-libros-home{
    min-width: unset;
  }
  .tarjeta-seleccionada{
    z-index: 100;
    background-color: #edededd4 !important;
  }
  .home-first-row{
    padding-bottom: 3em;
  }
}

@media screen and (max-width: 450px){
    .imagen-contenedor-home{
    display: none !important;
  }
  .tarjetas-libros-home{
    align-items: center !important;
  }
  .contenido-libros-home{
    justify-content: center;
  }
}

.tarjetas-libros-home {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  width: 40%;
  min-width: 26em;
  box-sizing: border-box;
}

.tarjeta-libros {
  display: flex;
  flex-direction: row;
  padding: 15px;
  width: 75%;
  box-shadow: 2px 3px 6px 0px rgb(0 0 0 / 7%);
  transition: background-color 0.5s ease;
  box-sizing: border-box;
  position: relative;
  align-items: flex-end;
  justify-content: space-between;
  border-radius: 15px;
  border: dotted #2d8fff 1px;
}

.tarjeta-libros .tarjeta-header i {
  font-size: 37px;
  color: #939393;
  margin-right: 14px;
}

.tarjeta-libros .tarjeta-icono i {
  font-size: 2em;
  color: #939393;
  margin-right: 0;
  margin-right: 4px;
}

@media screen and (max-width: 768px){
  .tarjeta-libros .tarjeta-icono i,
  .tarjeta-libros .tarjeta-header i
  {
    font-size: 37px !important;
  }
}

.tarjeta-header {
  display: flex;
}

.descripcion-tarjeta {
  font-size: 1.5rem;
  color: #636363;
  transition: opacity 0.5s ease;
  margin-top: 1.5rem;
}

.tarjeta-seleccionada {
  background-color: #ededed;
}

.tarjeta-seleccionada h2 {
  color: #ee3134 !important;
}

.tarjeta-seleccionada .descripcion-tarjeta {
  opacity: 1;
  position: inherit;
}

.tarjeta-seleccionada i {
  color: #ee3134 !important;
}

.tarjeta-libros h2 {
  font-size: 24px;
  font-family: 'Oswald';
  margin: 0;
}

.mi-telefono-home {
  border-radius: 36px;
  width: 237px;
  height: 497px;
  box-shadow: 0 50px 100px -20px rgba(50,50,93,0.25), 0 30px 60px -30px rgba(0,0,0,0.3), inset 0 -2px 6px 0 rgba(10,37,64,0.35);
  padding: 8px;
  background: #f6f9fc;
  user-select: none;
  position: relative;
  overflow: hidden;
  z-index: 20;
}

.mi-telefono-contenido {
  position: relative;
  height: 100%;
  border-radius: 27px;
  background: #fff;
  overflow: hidden;
}

.mi-navegador-home {
  width: 840px;
  height: 483px;
  padding:12px;
  border-radius: 8px;
  background: linear-gradient(hsla(0,0%,100%,.4),hsla(0,0%,100%,.3) 25%,rgba(246,249,252,.3) 50%,#f6f9fc 60%);
  box-shadow: inset 0 1px 1px 0 hsla(0,0%,100%,.1), 0 50px 100px -20px rgba(50,50,93,.25), 0 30px 60px -30px rgba(0,0,0,.3);
  position: absolute;
  top: -60px;
  left: 130px;
  z-index: 10;
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.n-panel {
    width: 10%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.n-panel img {
  width: 85%;
  margin-top: 18%;
}

.n-content {
  width: 90%;
  background-color: #ffffffd6;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}

.n-adressline {
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 4px;
  height: 21px;
  width: 70%;
  background: #0036640f;
  color: #62788d;
  position: relative;
  font-size: 11px;
  margin: 10px 10px 0 10px;
}

.n-adressline i {
  margin-left: 5px;
}

.n-imagenes {
  position: relative;
  height: 100%;
  margin: 10px 10px 0 10px;
  overflow: hidden;
}

.imagen-contenedor-home {
  position: relative;
  width: 60%;
  top: -5px;
  right: 74px;
}

.imagen-navegador,
.imagen-movil {
  position: absolute;
}

.imagen-navegador,
.imagen-movil {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.imagen-activa {
  opacity: 1 !important;
  border-radius: inherit;
}

.second-home-row {
  background-color: #ffc10729;
}

#mega-menu-wrap-primary #mega-menu-primary{
  display: flex;
  justify-content: center;
}


/*slider productos en home */

.slider-productos{
  /* visibility: hidden para que el slider no aparezca antes de cargar el script de slick-slider */
  visibility: hidden;
  margin-bottom: 3em !important;
  /* z-index: -1; */
}

.mi-imagen-producto{
  transition: 0.2s;
  margin: 10px;
}

.mi-imagen-producto:hover{
  opacity: 0.8;
}

.mi-nombre-producto {
  color: #1e73be;
  text-align: center;
  margin-top: 1em;
}

.slider-productos img {
  border-top-left-radius: 11px;
  border-top-right-radius: 11px
}

.slider-productos a{
text-decoration: none;
}

.slick-prev:before, .slick-next:before{
  color:#000
}

/* para que no se vean los ticks antes de los puntitos en el slider de los productos */
.slider-productos li::before {
  display: none;
}
@media screen and (max-width: 768px){
  .slick-dotted.slick-slider{
    margin-bottom: 0;
  }
}

/* slider productos (aparece en la home y otras páginas) */
.slick-list{
  overflow: unset!important;
}




/* Tamaños de fuente para la home */
.home-global-new h1, .home-global-new h2, .home-global-new h3, .home-global-new h4, .home-global-new h5, .home-global-new small {
font-family: 'Oswald',sans-serif;
}

@media only screen and (max-width: 1450px) {
  .home-global-new h2 {
    font-size: 32px !important; /* Se pone important para pisar alguna clase que nos molesta en pantallas pequeñas */
  } 
}

.home-global-new h3 {
font-size: 35px !important; /* Se pone important para que también afecte a pantallas pequeñas */
font-weight: 400 !important; /* Se pone important para que también afecte a pantallas pequeñas */
}


.home-global-new h2 {
/* margin: 1em 0; */
/* color: #d54e52; */
color: #484848;
/* text-align: center; */
/* margin-top: 2em; */
}
.home-global-new h2 hr {
border: solid #aacfef;
}


.home-global-new h3 {
color: var(--color-01-fondo-superclaro);
}

.home-global-new p, .home-global-new li, .home-global-new td {
font-size: 16px;
}


  /* para que el texto en primeer row de home no quede pegado a la esquina derecha en pantallas de menos de 1400 px ,como por ejemplo en portatil */
.col-lg-5.col-md-12.col-sm-12.col-xs-12.div-pegado {
    padding-left: 3em;
}

.home-global-new ul li:before {
/* Este es el tamaño de content: '✓' */
font-size: 150%;
font-weight: 900;
}
/* Fin de tamaños de fuente para la home */

  .svg-en-home {
    height: 0em;
  }
  
  .svg-en-home path {
    fill:  var(--color-01-fondo-oscuro);
  }

/* xxxxx
FIN nuevo para la home
xxxxx */

/* La curva que aparece en la home que se genera con un SVG  */
.mi-svg-home div {
  height: 0em;
}

.mi-svg-home svg {
  width: 99.5vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.mi-svg-home svg path {
  fill: var(--color-01-fondo-superclaro);
  fill: var(--color-01-fondo-oscuro);
}

#home-video-demo {
  margin-top: -8em;
}

#row-home-video-demo {
  margin-top: 10em;
}

#home-video-demo iframe {
  margin-bottom: 30px;
  box-shadow: 3px 12px 20px -5px #000000;
}

.home-fullwidth-con-fondo-container {
  padding-bottom: 4em;
  }

.home-fullwidth-con-fondo-container.dar-color-01 {
  background-color: var(--color-01-fondo-oscuro);
}

.home-fullwidth-con-fondo-container.dar-color-02 {
  background-color: var(--color-02-fondo-oscuro);
}

.home-fullwidth-con-fondo-container h2,
.home-fullwidth-con-fondo-container h3,
.home-fullwidth-con-fondo-container p {
  color: white !important;
}


@media only screen and (min-width: 1200px) {
  .home-fullwidth-con-fondo {
    margin-left: 25% !important;
    /* Al poner 25%, debemos incluir esta distributación de columnas: <div class="col-lg-6 col-md-12 home-fullwidth-con-fondo"> */
  }
}

.home-global-new .btn {
  padding: 0.75em;
  border-radius: 15px;
  border: solid 2px white;
  margin-top: 1em;
  color: white !important;
  font-family: 'arial', sans-serif;
  transition: all 0.2s;
}

.home-global-new .btn:hover {
  transform: scale(1.05);

}

.home-global-new .btn.dar-color-01 {
  background-color: var(--color-01-fondo-oscuro);
}

.home-global-new .btn.dar-color-01:hover {
  background-color: var(--color-01-fondo-superclaro);
  color: white !important;
  opacity: 1;
}


.home-global-new .btn.dar-color-02 {
  background-color: var(--color-02-fondo-oscuro);
}

.home-global-new .btn.dar-color-02:hover {
  background-color: var(--color-02-fondo-superclaro);
  color: var(--color-02-fondo-oscuro) !important;
}

.home-global-new ul {
  list-style: none;
  padding-inline-start: 25px;
}

@media screen and (max-width: 768px) {
  .home-global-new ul {
    padding-inline-start: 0em;
  }
}

.home-global-new ul li:before {
  /* content: '✓'; esto, a veces, muesta ✠en lugar del tick, así que lo cambio por lo de abajo */
  content: "\2713";
  /* No uses \2714 ("Heavy Check Mark") porque no se ve igual en todos los navegadores*/
  /* font-weight: 900; */
  margin-right: 5px;
  color: var(--color-01-fondo-superclaro);
}

.home-global-new .home-first-row ul li:before {
  color: var(--color-01-fondo-superclaro);
}

.home-global-new .home-first-row ul li {
  display: flex;
  /* Para que el tick '✓' no salta a una línea distinta*/
}

.pequeno-destaque-parrafo {
  /* Creo que esta clase no se usa para nada */
  background: var(--color-01-fondo-superclaro);
  display: inline-block;
  color: #292929 !important;
  padding: 1em;
  width: 65vw;
  border-radius: 5px;
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.25);
}

.pequeno-destaque {
  background-color: var(--color-01-fondo-oscuro);
  display: inline-block;
  color: #292929 !important;
  color: white !important;
  font-weight: 600;
  padding: 0.25em 1em;
  margin: 0.2em;
  border-radius: 3px;
  box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.25);
}

.home-fullwidth-con-fondo .pequeno-destaque {
  background-color: var(--color-01-fondo-superclaro);
}

.home-global-new .pequeno-destaque {
  width: 55ch;
}

@media screen and (max-width: 576px) {
  .home-global-new .pequeno-destaque {
    width: 85%;
  }
}

.pequeno-destaque-en-textos {
  background-color: #ffff59;
  color: #292929 !important;
  padding: 0.25em 0.25em;
}


.home-imagen-producto {
  /* background: var(--color-01-fondo-superclaro); Elimnado en esidioma */
  /* border-radius: 15px; */
  /* transform: rotate(10deg); Esto estaba en SK */
  margin-top: 2.5em;
}

.home-imagen-producto img {
  /* transform: rotate(-10deg); Esto estaba en SK */
}

@media screen and (max-width: 768px) {

  /* Debido al "transform: rotate" que ves arriba, el ancho del contenedor home-imagen-producto aumenta y crea un scroll lateral en la versión móvil. Así que disminuimos su width */
  .home-imagen-producto {
    width: 90vw;
    margin: 0 auto;
  }
}

.home-badges {
  margin-top: 1em;
  text-align: center;
  display: flex;
}

.home-badges img {
  max-width: 40%;
}

@media only screen and (max-width: 768px) {
  .home-badges img {
    max-width: 30%;
  }
}

.home-miniatura-productos-wrapper {
  /* Esto lo eliminé porque vi que no era necesario */
  /* display: flex;
  flex-wrap: wrap; */
}

.home-miniatura-productos {
  text-align: center;
  border: solid 3px white;
  padding: 0;
  background: var(--color-01-fondo-oscuro);
  color: white;
  box-shadow: 0px 2px 4px rgb(0 0 0 / 60%);
  margin: 1%;
  width: 23%;
  transition: opacity 0.3s;
  height: 13.5em;
}

@media only screen and (max-width: 768px) {
  .home-miniatura-productos {
    margin: 1%;
    width: 30%;
  }
}

.home-miniatura-productos img {
  width: 125%;
  transition: opacity 0.5s;
}

.home-miniatura-productos img:hover {
  opacity: 0.5;
}


.home-caracteristicas img {
  box-shadow: 5px 15px 15px 3px rgb(0 0 0);
  box-shadow: inset 5px 5px 10px #000000, 5px 10px 15px 1px rgb(0 0 0);
  margin-top: 1em;
  margin-right: auto;
  margin-left: auto;
  border-radius: 50%;
  border: solid 10px white;
  width: 10em;
  background-color: #ffaf69;
  /* background-color: #ffffff8c; */
  /* transform: rotate3d(13, 3, 1, -35deg); */
}

.home-caracteristicas h3 {
  color: #ffffff !important;
  text-align: center !important;
}


.home-caracteristicas * {
  text-align: center;
}


.texto-sobre-imagen-home {
  position: absolute;
  rotate: -6deg;
  margin-top: 0em;
  font-family: 'Oswald', sans-serif;
  background: var(--color-01-fondo-claro);
  color: white;
  padding: 0 0.35em;
  text-align: center;
  font-size: 2em !important;
  box-shadow: 2px 20px 30px 0px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  border: solid 2px white;
}

.subrayado-texto-negro-home {
  background: yellow;
  color: black !important;
  font-family: inherit;
  padding-right: 0.25em;
  padding-left: 0.25em;
  border-radius: 3px;
  font-size: inherit !important;
}

@media (max-width: 768px) {
  .subrayado-texto-negro-home {
    display: inline-block;
    margin-top: 5px;
  }
}

/* ------------------------------------------ */
/* ------------------------------------------ */
/* --------- FORMULARIO NEWSLETTERS  -------- */
/* ------------------------------------------ */
/* ------------------------------------------ */

/* Se usa para el marco de la newsletter */
.marco-fullwidth {
  background-color: var(--color-01-fondo-oscuro);
  /* Se pone el mismo color que la capa "id=colophon" que esté dentro de la etiqueta footer de toda la web */
  width: 99.5vw;
  position: relative;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw;
  margin-right: -50vw;
  color: #ffffff;
}

.mf-newsletter img {
  max-height: 14em !important;
  float: right;
  margin-top: -3em;
}

.mf-newsletter {
  margin-bottom: 2em;
}

.mf-newsletter h3 {
  /* Los estilos de este h3 los marca el estilo "home-global-new h3" */
}

#mc_embed_signup .button {
  background-color: var(--color-01-fondo-superclaro);
  margin-top: 0.5em;
  margin-bottom: 2em;
}

#mc_embed_signup {
  max-width: 500px;
  background: none;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

#mce-error-response a {
  color: lightblue !important;
}

#mce-responses {
  font-size: 1.5em !important;
  text-align: center;
}

.mc-field-group input {
  min-width: 50ch;
}

@media (max-width: 576px) {
  .mc-field-group input {
    min-width: 35ch;
  }

  #mc_embed_signup {
    width: 100%;
  }
}

.mc-field-group {
  margin-top: 1em;
  display: flex;
  flex-direction: column;
}

/* Mensaje de "te has suscrito con éxito" */
div#mce-success-response {
  background: #fffddd;
  color: black;
  margin: 5px 0;
  padding: 10px;
  border-radius: 5px;
  text-align: left;
}

.indicates-required{
  display: none;
}

/* //brevo */
.sib-form, #sib-container {
  padding: 0 !important;
}

.sib-input label {
  margin: 2px;
}

.sib-form-block button {
  margin-top: 0.5em;
}




/* ------------------------------- */
/* ----------- TIENDA SHOP WOOCOMMERCE ----------- */
/* ------------------------------- */


/* RESETS Y PISAR ESTILOS: Borrar elemenbos varios: marcos, nombres de categorías, menú desplegable para ordenar por precio,...*/
h1.woocommerce-products-header__title.page-title,
.woocommerce-ordering,
.woocommerce-result-count {
  display: none;
}

.woocommerce .main-content-inner {
  border: none;
}

/* Eliminar el "in stock" en la descripción de los productos justo antes del botón de comprar */
p.stock.in-stock {
  display: none;
}

/* Eliminar la etiqueta / badge que dice "SALE" cuando se le aplica un descuento a un producto*/
.woocommerce span.onsale {
  display: none;
}

/* Pisar estilo para que en el tamaño móvil las listas de productos tengan el aspecto que uso yo */
@media only screen and (max-width: 768px) {

  .woocommerce ul.products[class*=columns-] li.product,
  .woocommerce-page ul.products[class*=columns-] li.product {
    width: 46%;
    float: left;
    clear: both;
    margin: 0 3.8% 2.992em 0;
  }
}

/* Centrar el tick que aparece en el botón de "añadir al carrito" una vez añadido el producto */
.woocommerce #respond input#submit.added::after,
.woocommerce a.button.added::after,
.woocommerce button.button.added::after,
.woocommerce input.button.added::after {
  vertical-align: middle;
}

/* Fin de RESETS */

/* ------------------------------------------- */
/* Menú My account / Mi cuenta - Pero no los campos de edición de mi cuenta o mis direcciones (haz búsqueda de "formularios") */
/* ------------------------------------------- */

/* --> Botones de navegación de "My account" */
.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none;
  width: auto;
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link {
  display: inline-block;
  list-style-type: none;
  margin-bottom: 1em;
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a {
  color: white !important;
  width: 23ch;
}

li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--dashboard,
li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--subscriptions,
li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--payment-methods,
li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--customer-logout {
  display: none !important;
}

.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
}


/* Tabla mis descargas: ocultar la columna donde pone la fecha de caducidad de descargas de libros (para no confundir a la gente, porque dice que no caduca "nunca", pero hay un límite de 10 descargas)*/
section.woocommerce-order-downloads th.download-expires,
section.woocommerce-order-downloads td.download-expires {
  display: none !important;
}

/* Ocultar un botón para cancelar la suscripción que está en una parte muy rebuscada del menú de los clientes */
.shop_table.subscription_details a.button.cancel {
  display: none;
}

/* --> My downloads: Mostrar el botón de descarga con la capitalización del archivo a descargar (sin este reset, saldría siempre como "text-transform: capitalize") */
a.woocommerce-MyAccount-downloads-file {
  text-transform: none !important;
}


/* ------------------------------------------- */
/* Formatear el grid con el listado de productos para que el botón de "añadir a carrito" quede alineado, además de otras cosas */
/* ------------------------------------------- */

ul.products {
  display: flex;
  flex-wrap: wrap;
}


ul.products li.product {
  position: relative;
  border: solid 1px #ccc;
  transition: 0.2s;
}

ul.products li.product:hover {
  opacity: 0.8;
}

ul.products li.product h2 {
  min-height: 6rem;
}

ul.products li.product h2,
ul.products li.product .price {
  text-align: center;
}

ul.products li.product .button.add_to_cart_button.ajax_add_to_cart,
ul.products li.product .button.product_type_variable.add_to_cart_button.rtwpvs_ajax_add_to_cart {
  /* La clase "product_type_variable" aparece en los productos variables (en Esid en español) */
  background-color: var(--color-tienda-comprar);
  border-color: var(--color-tienda-comprar);
  /* 11.11.2022 Estas dos líneas ("position" y "bottom") las puse entre comentarios porque parece que no hay falta (pero en SK, sí)
  position: absolute; 
  bottom: 0; */
  width: 100%;
  text-align: center;
}

ul.products li.product .price {
  margin-bottom: -1rem !important;
  font-size: 1.75rem !important;
  font-weight: 600 !important;
}

/* Esto es un texto que dice "Checkout" que aparece en el grid de productos, debajo del producto que has añadido (en SK está oculto detrás del botón ".button.add_to_cart_button.ajax_add_to_cart", pero no pude conseguir el mismo efecto en ESid, así que le aplico este estilo  */
a.added_to_cart.wc-forward {
  background-color: var(--color-01-fondo-claro);
  color: white;
  text-align: center;
  border-radius: 4px;
  padding: 8px;
  margin-left: 4px;
  text-decoration: none;
}

li a.added_to_cart.wc-forward {
  display: none;
}

/* tick de ebooks o paperbooks, o verde encima del producto (aparece en el listado de productos y en la imagen del single product) */
li.product .texto-sobre-imagen-home,
.tick-pagina-producto .texto-sobre-imagen-home
{
  position: absolute;
  top: -2%;
  left: -3%;
  rotate: -6deg;
  margin-top: 0em;
  font-family: 'Oswald', sans-serif;
  background:rgba(255, 255, 255, 0.897);
  color: #2a9811;
  padding: 0 0.35em;
  text-align: center;
  font-size: 1em !important;
  box-shadow: 3px 4px 4px 0px rgba(0, 0, 0, 28%);
  border-radius: 8px;
  border: solid 1px rgb(184, 179, 179);
  cursor: pointer;
  z-index: 20;
}

.tick-pagina-producto .texto-sobre-imagen-home{
  top: -0.05%;
  left: 0.5%;
  transform: scale(1.3);
}

@media only screen and (max-width: 768px) {
  .tick-pagina-producto .texto-sobre-imagen-home{
    left: 2%;
  }
}

li.product .texto-sobre-imagen-home.libro-papel,
.tick-pagina-producto .texto-sobre-imagen-home.libro-papel
{
  color: #0d68cf;
  padding: 1px .7em;
}

li.product .texto-sobre-imagen-home.webinario,
.tick-pagina-producto .texto-sobre-imagen-home.webinario{
  color: #ee3134;
}

.texto-sobre-imagen-home:hover {
  transition: .3s;
  transform: scale(1.2);
}


li.product .info-notificacion
{
  background-color: #27b704;
  color: whitesmoke;
}


/* Filtros que aparecen encima de los productos (ebook, paper, todo) */
.boton-tipico-nuestro {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.filter-texto,
.boton-tipico-nuestro button {
  padding: 8px 12px;
  text-transform: uppercase;
  font-family: 'Oswald';
  font-weight: 400;
  font-size: 1.25em;
  background-color: var(--color-boton-raro-homogeneo);
}

.filter-texto{
  background-color: var(--color-01-fondo-claro);
  border-radius: 5px;
  color: white;
}

.fec-botones-envuelto .botones{
  display: flex;
  gap: 1em;
}

.boton-tipico-nuestro i {
  margin-right: 5px;
}

.filtros-en-categorias .filter-texto i{
  margin-left: 10px;
}

.filtros-en-categorias {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 2em;
  align-items: flex-start;
}

@media only screen and (max-width: 768px) {
  .filtros-en-categorias {
    gap: unset;
  }
  .boton-tipico-nuestro button {
    width: 20em;
  }
  .filtros-en-categorias{
    gap: unset;
    flex-direction: column;
    align-items: center;
  }
  .fec-botones-envuelto .botones{
    flex-direction: column;
    gap: unset;
  }
}



/* ------------------------------------------- */
/* Fin de formatear el listado de miniaturas de productos para que el botón de "añadir a carrito" quede alineado, además de otras cosas */
/* ------------------------------------------- */

/* ------------------------------------------- */
/* ------------------------------------------- */
/* ------------------------------------------- */
/* ----- DESCRIPCIÓN DE PRODUCTO ------ */
/* ------------------------------------------- */
/* ------------------------------------------- */
/* ------------------------------------------- */

/* Breadcrumbs */
.woocommerce-breadcrumb {
  color: white !important;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
}

.woocommerce-breadcrumb a {
  background-color: #555555;
  color: white !important;
  padding: 6px;
  border-radius: 5px;
  text-decoration: none;
  margin-top: 4px;
  white-space: nowrap;  
}

/* Hacer que la imagen principial de un producto sea más pequeña para que haya más texto a la derecha (pero no para tamaño móvil) */
@media only screen and (min-width: 768px) {

  div.woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images {
    width: 32% !important;
  }

  .woocommerce #content div.product div.summary,
  .woocommerce div.product div.summary,
  .woocommerce-page #content div.product div.summary,
  .woocommerce-page div.product div.summary {
    width: 63% !important;
  }

}

h1.product_title.entry-title {
  font-weight: 400;
  text-transform: none;
  font-family: 'Oswald', sans-serif;
  font-size: 1.75em;
  line-height: 120%;
}

/* Formatear el contador de unidades que quieres añadir al carrito */
.cart .quantity .input-text {
  background: var(--wp--preset--color--pale-cyan-blue);
  border-radius: 5px;
  height: 40px;
  border: none;
}

/* Invisibilizar el contardor de unidades */
/* En otro lugar de este archivos también se elimina el contador en variables (que son los que tienen atributos y variaciones) */

.summary.entry-summary>.cart>.quantity>.input-text.qty {
  display: none;
}

/* Dar forma a los párrafos (h) en la descripción del producto */
#tab-description h1,
#tab-description h2,
#tab-description h3,
#tab-description h4 {
  color: var(--color-01-fondo-superclaro);
}

/* Elminar el código SKU que aparece justo debajo de "añadir al carrito"*/
.sku_wrapper {
  display: none;
}

/* Hacer que el espacio de "descripción corta" de un producto no tenga los 15px que mete bootstrap de padding */
.woocommerce-product-details__short-description>.container-fluid>.row:first-child>.col-xs-12:first-child {
  padding-left: 0;
  padding-right: 0;
}

/* Hacer que la imagen principial de un producto sea clickeable */
.woocommerce-product-gallery__image {
  pointer-events: none;
}

/* BOTON "ADD TO CART" */
.cart .single_add_to_cart_button.button.alt.btn.btn-default {
  background-color: var(--color-tienda-comprar);
  font-size: 20px;
  text-transform: uppercase;
  height: 60px;
  min-width: 200px;
  border-radius: 6px;
  padding-top: 0;
  padding-bottom: 0;
  transition: opacity 0.3s;
  font-weight: inherit;
}

.single_add_to_cart_button:hover,
.subir-a-main:hover {
  /* --> la clase "subir-a-main" es solo para unos botones en el video curso de LR101*/
  opacity: 0.8;
}

.single_add_to_cart_button:before {
  margin-right: 6px;
  font-size: 1.333em;
  font-weight: 100;
  /* font-family: FontAwesome; Dejamos de usar Font Awesome el 22.08.2022 porque tiene un límite de 10.000 pageviews/mes */
  /* content: "\f07a"; */
  font-family: "Material Icons";
  content: "\e8cc";
}

.button.add_to_cart_button.ajax_add_to_cart:before {
  margin-right: 6px;
  font-size: 1.333em;
  font-weight: 100;
  /* font-family: FontAwesome; Dejamos de usar Font Awesome el 22.08.2022 porque tiene un límite de 10.000 pageviews/mes */
  /* content: "\f07a"; */
  font-family: "Material Icons";
  content: "\e8cc";
}

.button.add_to_cart_button.ajax_add_to_cart {
  text-transform: inherit;
}

.woocommerce div.product .woocommerce-tabs .panel {
  padding: 10px 0px 20px;
}

/* --> botón "añadir al carrito" en la version multiidioma */
.woocommerce div.product form.cart {
  display: flex;
  align-items: center;
}

@media only screen and (min-width: 992px) {
  .woocommerce div.product form.cart .variations {
    width: 20em;
  }
}

/* FIN DE BOTON "ADD TO CART" */




/* PRECIO: en la página de descripción del producto */

/* Precio del producto en las fichas de producto que hay por toda la web (este estilo hoy 21.08.2023 no está donde debería estar) */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  margin-bottom: 0;

}

p.price .woocommerce-Price-amount.amount {
  display: inline-block;
  height: 40px;
  margin-left: 10px;
  font-size: 1.5em !important;
}

/* --> Lo mismo de arriba, pero para móviles (donde aparece una etiqueta <bdi> que envuelve el precio */
p.price .woocommerce-Price-amount.amount bdi,
p.price .woocommerce-Price-amount.amount bdi span {
  font-size: 2rem !important;
}

/* --> Lo mismo de arriba, pero para móviles (donde aparece una etiqueta <bdi> que envuelve el precio */
span.price .woocommerce-Price-amount.amount bdi,
span.price .woocommerce-Price-amount.amount bdi span {
  font-size: 2rem !important;
  font-weight: 600;
}

/* para pisar el color de precio despues de actualizacion de woocommerce */
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price{
  color: #77a464;
}


/* PRECIO: en otras monedas */

.precio-todo {
  display: grid;
}

.precio-euros {
  margin-left: 10px;
  font-size: 1.5em !important;
  color: #77a464;
}

.precio-usd {
  margin-left: 10px;
  font-size: 1em;
  color: grey;
  font-size: 14px !important;

}

/* estilos tooltip */
.info-notificacion {
  display: none;
  cursor: pointer;
  position: absolute;
  z-index: 1;
  padding: 15px;
  background-color: #4f4f4f;
  border-radius: 8px;
  font-size: 14px;
  color: white;
  transform: translateY(-100%);
  opacity: 0;
  transition: opacity 0.5s;
}

.info-notificacion i {
  position: absolute;
  top: 4%;
  right: 1%;
}

.tooltip-precio {
  cursor: pointer;
  color: #464646;
}


/* PRECIO: en la página de "cart / carrito" */
.product-price .woocommerce-Price-amount.amount,
.product-subtotal .woocommerce-Price-amount.amount {
  font-size: 1.25em;
}

/* FIN DE PRECIO */

/* Links ebook - papael (LEP) */
.lep-envuelto {
  display: flex;
  padding: 15px;
}

.lep-contenido {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.lep-texto {
  display: flex;
  align-items: baseline;
  font-size: 14px;
}

.lep-texto i {
  color: #6f6f6f;
  margin-right: 0.4em;
}

.texto {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: large!important;
}

.lep-agregar-pto {
  /* display: flex; */
  gap: 1em;
}

.lep-agregar-pto .precio-usd{
  display: none;
}

.lep-agregar-otro {
  margin-top: 0.5em;
  padding: 9px;
  border-radius: 5px;
  background-color: #eeeeee;
}

.lep-agregar-otro .single_add_to_cart_button.button.alt.btn.btn-default{
  font-size: unset;
  height: 40px;
  background-color: #20b2aa;
}

.lep-agregar-otro .precio-euros{
  font-size: 1.25em !important;
}

.lep-ao-txt, 
.lep-ao-txt a
{
  font-size: x-large!important;
  color: #003664;
  margin-bottom: 5px;
}

.lep-ao-txt a {
  color: #003664;
}

.lep-ao-txt i {
  font-size: x-large !important;
}

.lep-ao-txt .lep-ao-icono {
  margin-right: 10px;
}

.lep-envuelto .quantity {
  display: none;
}

.lep-envuelto form{
  margin-bottom: 0 !important;
  font-size: unset;
}

.etiquetas-productos {
  margin-top: 2em;
}

/* solo para productos multiidioma */
.links-ebok-paper.multiidioma .lep-envuelto{
  background-color: #e5e5e5;
  /* border: solid grey 1px; */
  /* border-radius: 10px; */
}

.links-ebok-paper.multiidioma  .lep-agregar-otro{
  background-color: whitesmoke;
}


.links-ebok-paper.multiidioma .fa-circle-exclamation{
  color: red;
  font-size: 2em !important;
}

.links-ebok-paper.multiidioma .fa-chevron-down{
  margin-left: 0.3rem;
}

@media (max-width: 1200px) {
  .lep-agregar-pto {
    gap: unset;
    flex-direction: column;
  }
}
/* END Links ebook - papael (LEP)*/

/* aviso de worldwide shipping en los libros en papel */
.aviso-envio-libros-papel {
  display: flex;
  flex-direction: column;
  margin-top: 1em;
}

.aelp-aviso {
  color: #27b704;
}

.aelp-tiempos {
  font-size: small;
}

/* END aviso de worldwide shipping en los libros en papel */

._botonetiqueta.rklistenexample,
.ir-a-muestra {
  background-color: var(--color-01-fondo-superclaro);
  border-radius: 5px !important;
  color: #eee !important;
  cursor: pointer;
  float: left;
  font-size: 15px !important;
  margin: 0 10px 10px 0;
  padding: 6px 12px;
  transition: 0.3s;
}

._botonetiqueta.rklistenexample:hover,
.ir-a-muestra:hover {
  opacity: 0.85;
}


/* Dar forma a los títulos de las secciones "reviews / valoraciones" y "related products" */
section.related.products>h2,
#mi-seccion-de-valoraciones-reviews h2.review-title {
  font-family: 'Oswald', sans-serif;
  background: #4590d1;
  padding: 1em 10px;
  color: white !important;
  border-radius: 5px;
}

section.related.products {
  margin-top: 4em;
}

h2.woocommerce-Reviews-title,
h2.woocommerce-Reviews-title span {
  font-size: 2.5rem;
  font-family: 'Oswald', sans-serif;
}

h2.woocommerce-Reviews-title span {
  background-color: var(--color-tienda-valoraciones);
  color: white;
  padding: 0 10px;
  border-radius: 5px;
}

/* --> Dar forma al texto "propietario verificado" que aparece junto al nombre de la persona que escribe */
.woocommerce-review__verified.verified {
  color: var(--color-tienda-valoraciones);
  font-weight: 900;
}

/* Poner un poco de fondo a los campos del formulario, que no se ve nada */
.comment-form input,
.comment-form textarea {
  background-color: #f1f1f1;
  border-color: lightgrey;
}


.texto-sobre-imagen-descripcion-producto {
  position: absolute;
  rotate: -6deg;
  margin-top: 1em;
  font-family: 'Oswald', sans-serif;
  background-color: var(--color-01-fondo-claro);
  color: white;
  padding: 0 0.35em;
  text-align: center;
  font-size: 3em !important;
  box-shadow: 2px 20px 30px 0px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  border: solid 2px white;
}

.subrayado-texto-negro-descripcion-producto {
  background-color: var(--color-01-fondo-clarosuave);
  color: white !important;
  font-family: inherit;
  font-weight: 600;
  padding-right: 0.25em;
  padding-left: 0.25em;
  border-radius: 3px;
  font-size: inherit !important;
  padding: 3px;
}

.pequeno-destaque-descripcion-producto {
  border-bottom: solid 3px var(--color-01-fondo-clarosuave);
  display: inline-block;
  /* color: white !important; */
  font-weight: 600;
  /* padding: 0.25em 1em; */
  margin: 0.2em;
  border-radius: 3px;
  /* box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.25); */
  width: 40ch;
}


.indice-libro-texto-en-descripcion-producto h3 {
  border-bottom: solid 1px var(--color-01-fondo-clarosuave);
  width: 40ch;
  margin-bottom: 0;
}
.col-xs-12.indice-libro-texto-en-descripcion-producto p {
  background: #f7f7f7;
  padding: 2em 10px;
}

/* ------------------------------------------- */
/* ------------------------------------------- */
/* ------------------------------------------- */
/* ----- FIN DE DESCRIPCIÓN DE PRODUCTO ------ */
/* ------------------------------------------- */
/* ------------------------------------------- */
/* ------------------------------------------- */

/* ------------------------------------------- */
/* Formatear las páginas de categoría */
/* ------------------------------------------- */

.wrapper-mi-categoria {
  margin-bottom: 3em;
}

.wrapper-mi-categoria h1 {
  font-family: 'Oswald', sans-serif;
  color: var(--color-01-fondo-claro);
}

.wrapper-mi-categoria ul li span {
  width: 40ch;
}

.wrapper-mi-categoria ul {
  list-style-type: none;
  padding-inline-start: 0em;
}


/* ------------------------------------------- */
/* Fin de formatear las páginas de categoría */
/* ------------------------------------------- */

/* ------------------------------------------- */
/* Formatear la descripción de "productos variables" (que son los que tienen atributos y variaciones) 
/* cambios en los productos de la versión en español, 
/* donde el alumno puede escoger el idioma del libro que va a comprar  */
/* ------------------------------------------- */

table.variations tr th:first-child {
  display: none;
}

/* --> Invisibilizar el contardor de unidades */
/* En otro lugar de este archivos también se elimina el contador en "productos normales" */

.woocommerce-variation-add-to-cart .quantity {
  display: none !important;
  /* A veces se crear un estilo inline de "display", por eso hay que poner "important" */
}

.variations .reset_variations {
  display: none !important;
  /* A veces se crear un estilo inline de "display", por eso hay que poner "important" */
}

.mi-estilo-traduccion {
  /* La clase "mi-estilo-traduccion" se genera a través de un js de mis-scripts.js */
  background: #e5e5e5;
  padding: 5px;
  border-radius: 5px;
}

.mi-atributo-traduccion img {
  /* La clase "mi-atributo-traduccion" se genera a través de un js de mis-scripts.js */
  border-radius: 5px !important;
  border: solid 1px #a5a5a5;
  /* Para perfilar las banderas que, como la rusa, tienen un color blanco */
  background-color: #a5a5a5;
  /* Por si el contenedor no se ajusta a la imagen y quedan huecos (causados por el fondo y el hecho de tener un "border-solid") que hay que rellenar */
  width: 5em !important;
}


@media only screen and (max-width: 1200px) {

  /* Hacer que el botón de "añadir al carrito" se mueva de la derecha a la parte inferior para pantallas pequeñas (recuerda que esto solo funciona en "producto con variaciones") */
  .woocommerce div.product form.variations_form.cart {
    flex-wrap: wrap;
  }
}

/* ------------------------------------------- */
/* Formatear la página de carrito y checkout / check out, pero no los formularios (haz búsqueda de "formularios") */
/* ------------------------------------------- */




form.checkout.woocommerce-checkout>table>tfoot>tr.order-total {
  background-color: #ebe9eb;
}

.woocommerce-cart-form>.shop_table>tbody>tr>.actions>.coupon>input#coupon_code {
  width: 20ch;
}

/* Invisibilizar el botón de "actualiza carrito" "update cart" que actualiza el carrito cuando cambiar el número de uds. a comprar */
/* .woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
	display: none !important ;
} */

/* Ocultar un campo de "pon el código de tu cupón" ya que, al tener en una sola página "carrito" y "checkout" ya hay un campo para el cupón al principio de la página */
/* div.woocommerce > form > table .coupon {
  display: none;
} */

/* --> Mensaje de "¿Ya tienes una cuenta? Logueate" */
.woocommerce-info::before {
  font-family: WooCommerce;
  content: "\e029";
}

.woocommerce-info {
  font-size: 1.1em;
  background-color: #ebe9eb;
  border-radius: 8px;
}

.woocommerce-info .showlogin {
  display: block;
  background: var(--color-01-fondo-claro);
  width: 20ch;
  padding: 0.5em;
  text-align: center;
  color: white;
  margin-top: 1em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
}

.woocommerce-info .showlogin:hover {
  opacity: 0.8;
}


/* --> Dar forma a la tabla de "Resumen de carrito" que aparece tanto en la página "cart" como en "checkout" */
div.cart-collaterals>div>table>tbody>tr.recurring-totals,
div.cart-collaterals>div>table>tbody>tr.cart-subtotal.recurring-total,
div.cart-collaterals>div>table>tbody>tr.tax-total.recurring-total,
div.cart-collaterals>div>table>tbody>tr.order-total.recurring-total,
form.checkout.woocommerce-checkout>table>tfoot>tr.recurring-totals,
form.checkout.woocommerce-checkout>table>tfoot>tr.cart-subtotal.recurring-total,
form.checkout.woocommerce-checkout>table>tfoot>tr.tax-total.recurring-total,
form.checkout.woocommerce-checkout>table>tfoot>tr.order-total.recurring-total {
  display: none;
}

div.cart-collaterals>div>table>tbody>tr>td[data-title=Total] {
  margin-bottom: 3em;
  display: block;
}

div.cart-collaterals .order-total,
form.checkout.woocommerce-checkout .order-total {
  font-size: 1.5em;
}

div.cart-collaterals>div>table>tbody>tr.order-total.recurring-total,
form.checkout.woocommerce-checkout>table>tfoot>tr.order-total.recurring-total {
  background-color: var(--color-03-fondo-claro);
}

div.cart-collaterals>div>table>tbody>tr.cart-discount,
form.checkout.woocommerce-checkout>table>tfoot>tr.cart-discount

/* En algunas webs hay que poner "> table" y en otras, solo "table" */
  {
  background-color: greenyellow;
}

/* Ocultar un texto de "Your personal data is safe with us..." que además no se puede traducir con el WPML */
#payment>div>div.woocommerce-terms-and-conditions-wrapper>div.woocommerce-privacy-policy-text {
  display: none;
}

/* Ocultar un texto del tipo "tu próximo pago (de la suscripción) será el 3 de mayo" porque no aporta mucho y es exceso de información */
div.cart-collaterals .order-total.recurring-total .first-payment-date,
form.checkout.woocommerce-checkout .order-total.recurring-total .first-payment-date {
  display: none;
}

@media only screen and (max-width: 768px) {

  /* Vamos hacer que en la versión móvil aparezca la imagen del producto que compras (woocommerce pone un display:none por defecto para tamaño móvil) */
  .woocommerce #content table.cart .product-thumbnail,
  .woocommerce table.cart .product-thumbnail,
  .woocommerce-page #content table.cart .product-thumbnail,
  .woocommerce-page table.cart .product-thumbnail {
    display: block !important;

  }

  /* Modificamos un estilo por defecto de Woocommerce. En el tamaño móvil, el listado de productos a comprar intercala fondo blanco-gris-blanco para facilitar la lectura en móvil. Aquí simplemente cambio un valor que por defecto es .025 por .075 porque creo que se ve mejor */
  .woocommerce table.shop_table_responsive tr:nth-child(2n) td,
  .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
    background-color: rgba(0, 0, 0, .075);
  }
}

/* Invisibilizar el siguiente texto que está justo encima del checkbox para estar de acuerdo con las condiciones de venta: "Your personal data is safe with us. Here you can read our privacy policy." */
.woocommerce-privacy-policy-text {
  display: none;
}

/* Aviso de descuento en checkout */
.aviso-descuento-en-checkout {
  background: #ffffb1;
  padding: 0.5em 0.5em 0.1em 0.5em;
  border-radius: 5px;
  margin-top: -1em;
  margin-bottom: 3em;
  color: #202020;
}

.cantidad-falta-dto,
.super-descuento {
  font-size: 1.25em;
  font-weight: bold;
  color: #e32526;
}

/* tiempos del envio en checkout */
.aviso-envio-gratis p {
  font-weight: normal;
}

/* ------------------------------------------- */
/* Fin de formatear carrito y checkout */
/* ------------------------------------------- */


/* ------------------------------------------- */
/* Formatear FORMULARIOS en My Account / My cuenta, Addresses / mi direcciones y en checkout */
/* ------------------------------------------- */

/* Ocultar un texto en el formulario de registro/login que habla de la política de privacidad */
.woocommerce-privacy-policy-text {
  display: none;
  ;
}

/* Eliminar el texto "optional" en los campos que son opcionales (porque es absurdo, ya que los campos obligatorios ya vienen con un asterisco) */
.shipping_address .form-row.address-field .optional,
.woocommerce-address-fields .form-row.address-field .optional {
  display: none;
}

/* Ocultar un checkbox en la edición de mi dirección que dice "Update the Shipping Address used for all of my active subscriptions" */
.woocommerce-address-fields #update_all_subscriptions_addresses_field {
  display: none;
}

/* Ocultar un campo que  pone "Phone" (tanto en el checkout con en la pantalla de edición de dirección de "My account") y que no fui capaz de saber de dónde sale */

.woocommerce-address-fields__field-wrapper #shipping_phone_field,
form.checkout.woocommerce-checkout #shipping_phone_field {
  display: none;
}



/* --> Campos a rellenar en formularios varios como por ejemplo en My account y checkout */
.woocommerce-form-row input,
form.checkout.woocommerce-checkout input,
.woocommerce-form-row textarea,
form.checkout.woocommerce-checkout textarea,
.woocommerce-address-fields input,
.woocommerce-address-fields textarea,
.woocommerce-form.woocommerce-form-login.login #username,
.woocommerce-form.woocommerce-form-login.login #password {
  border: solid 1px lightsteelblue;
}

/* Ocultar un link de  información: "¿qué es Paypal?" */
label .about_paypal {
  display: none;
}

/* Ensanchar la opción de pago de Stripe para que los iconos de tarjeta queden en una sola línea vertical */
label[for=payment_method_stripe] {
  width: 50%;
}

/* Formatear el checkbox de "Acepto los términos y condiciones de venta" */
/* a) Formatear el checkbox: */
label.woocommerce-form__label.woocommerce-form__label-for-checkbox.checkbox input#terms {
  margin: inherit;
}

/* b) Formatear el texto a la derecha del checkbox */
span.woocommerce-terms-and-conditions-checkbox-text {
  margin-left: 3ch;
}

/* Formatear los placeholder de los formularios */
.woocommerce-shipping-fields ::placeholder,
.woocommerce-billing-fields ::placeholder,
.woocommerce-address-fields ::placeholder,
.woocommerce-additional-fields ::placeholder {
  font-style: italic;
  color: lightcoral;
}

/* Formatear los títulos de "Billing address" y "Shipping address" para que se vea mejor en móvil */
.woocommerce-shipping-fields h3,
.woocommerce-billing-fields h3 {
  background-color: var(--wp--preset--color--pale-cyan-blue);
  padding: 1.5em;
  text-align: center;
  border-radius: 5px;
  color: black;
}

/* Formatear el título de "Delivery address" para que sea igual que el de "Billing details" de la izquierda en el checkout */
h3#ship-to-different-address {
  float: none;
  width: 100%;
}

h3#ship-to-different-address label {
  font-weight: initial;
}

h3#ship-to-different-address * {
  margin-top: initial;
  margin-bottom: initial;
}

/*--> quitar el tick de "ship to a different address" */
#ship-to-different-address-checkbox:checked {
  display: none;  
}

/* MUY IMPORTANTE: El formulario para añadir la dirección de envío de libros está modificado con mi .js porque vi una especia de bug. El caso es que el encabezado de "Mi dirección de envío" tiene un checkbox oculto por lo que el código de abajo elimina la posibilidad de hacerle click */
.woocommerce .woocommerce-shipping-fields h3:first-child input {
  pointer-events: none !important;
}

.woocommerce .woocommerce-shipping-fields h3 {
  pointer-events: none !important;
}

/* ------------------------------------------- */
/* Fin de formatear FORMULARIOS en My Account / My cuenta, Addresses / mi direcciones y en checkout */
/* ------------------------------------------- */

/* ------- ETIQUETAS de descripción de productos en la tienda (sobre todo libros) ----------*/

.etiquetas-productos span {
  padding: 6px;
  color: white;
  border-radius: 5px;
  white-space: nowrap;
  margin: 0px 5px 5px 0px;
  display: inline-block;
}

.ep-formato,
.ep-campus {
  background: #555;
}


.ep-nivel.A1 {
  background: var(--color-nivel-basico);
}


.ep-nivel.A2,
.ep-nivel.A1-A2 {
  background: var(--color-nivel-principiante);
}

.ep-nivel.B1,
.ep-nivel.B2,
.ep-nivel.B1-B2 {
  background: var(--color-nivel-medio);
}


.ep-nivel.C1,
.ep-nivel.C2,
.ep-nivel.C1-C2 {
  background: var(--color-nivel-avanzado);
}

.ep-nivel.nivel-combo {
  background: var(--color-nivel-combo);
}

/* Etiqueta con información adicional del libro (que aparece justo al principio, en la descprición de la tienda) */
.ep-extras {
  background: orangered;
  background: #dbdbdb;
  color: #606060 !important;
}


/* -------------------------------------------------------- */
/* Inicio de --- Decoración en las descripciónes de libros */
/* -------------------------------------------------------- */


.rkfotos,
.mi-galeria-producto {
  background-color: #ccc;
  padding: 5px;
  border-radius: 8px;
}

.rkfotos img,
.mi-galeria-producto img {
  padding: 5px;
  transition: 0.3s;
}

.row.rkfotos img:hover,
.row.mi-galeria-producto img:hover {
  opacity: 0.5;
}

.rkdestacar,
.mi-cuadro-importante {
  padding: 15px;
  border-left: 5px solid #999;
  display: block;
  background-color: #eee;
  margin-bottom: 20px;
}

/* .mi-cuadro-importante li{
  font-weight: bold;
} */

/* Formatos de cada libro (imagenes de pdf, epub, mp3,...) y (si aplica) el mensaje de "+ Campus Online" */
.formatos-producto {
  display: flex;
  flex-wrap: wrap;
}
.formatos-producto * {
  display: inline-flex;
  align-items: center;
}

.formatos-producto .fp-texto {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  padding: 3px;
  border-radius: 8px;
}

.formatos-producto img{
  height: 60px;
  width: auto;
}


.formatos-producto .fp-texto,
.formatos-producto .fp-signo {
  font-size: 2em;
  font-weight: 600;
  padding-left: 10px;
  padding-right: 10px;
}
.formatos-producto .fp-signo {
  font-size: 3em !important;
  color: #424242;
}
.formatos-producto .fp-texto {
  background-color: #84b913;
  color: white;
}


.rkaudio,
.mi-img-audio {
  background-image: url("/wp-content/uploads/audio.png");
  padding-left: 65px;
  background-repeat: no-repeat;
  background-position-x: 15px;
  background-position-y: 15px;
}

/* Fin de --- Decoración en las descripciónes de libros */





/* ------------- Contact form - Formulario de contacto -------------- */

.wpcf7 {
  background-color: #f5f4f4;
  padding: 2em !important;
  border-radius: 8px;
  /* -webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75); */
}

.wpcf7 label{
  width: 100%!important;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="file"],
.wpcf7 input[type="email"]
{
  width: 100%;
}

.wpcf7-mail-sent-ok,
.wpcf7 form.sent .wpcf7-response-output {
  font-size: 2em;
  text-align: center;
  margin-top: 1em !important;
  background-color: lightgreen;
}


/* ----------------------------------------- */
/* --- Página "Gracias por tu compra" ------ */
/* ----------------------------------------- */

.gracias-por-tu-compra h2,
.gracias-por-tu-compra h3 {
  font-family: 'Oswald', sans-serif;
}

.gracias-por-tu-compra h2 {
  font-size: 3em;
  font-weight: 900;
  color: var(--color-01-fondo-claro);
}

.gracias-por-tu-compra h3 {
  margin-top: 2em;
  background: var(--color-01-fondo-claro);
  color: white;
  padding: 0.75em;
  border-radius: 5px;
  font-weight: 300 !important;
  font-size: 1.5em !important;
}

.gptc-destacar {
  background-color: yellow;
  display: inline-block;
  padding: 0.25em 0.5em;
  font-size: 120%;
  border-radius: 5px;
}


/* ------------------------------- */
/* ----------- Miscelanea ----------- */
/* ------------------------------- */


.transformar-en-foto {
  /* Esto se usa en la sección "about us" */
  padding: 4px 4px 4em 4px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
  transform: rotate(-5deg);
}



/* Banner superior para todas las páginas con publicidad sobre descuentos vigentes en la web (el comportamiento y contenido del banner está en mis-scripts.js */
.top-mi-publicidad {
  background: #363636;
  z-index: 1;
  padding: 5px;
  text-align: center;
}

.descuento-animado{
  border:none;
  background-color:#dc3545
  ;border: solid 2px;transform: rotate(-4deg);
  display: inline-block;
  animation: parpadeo 5s 0s ease-in-out infinite;
}

@keyframes parpadeo{
  0%, 100%{
    scale: 1;
  }
  20%{
    scale: 1.2;
  }
  60%{
    scale: 0.9;
  }
}


.top-mi-publicidad i{
    background-color: #dc3545;
    padding: 8px;
    margin-right: 3px;
    border-radius: 50%;
    font-size: xx-large;
    animation: parpadeo 5s 0s ease-in-out infinite;
}

.top-mi-publicidad .back-to-school{
  border: none;
}

.top-mi-publicidad .descuento-vcinco {
  border: solid red 2px;
  border-radius: 50%;
  padding: 6px;
  animation: parpadeo 5s 0s ease-in-out infinite;
}

/* Esto es un override, porque hay alguna clase que cambiar el color de los links (que me pasó en algunos tests)*/
.top-mi-publicidad a {
  color: #75b9ff !important; 
  font-weight: 600 !important;
}
.top-mi-publicidad span {
  font-size: 1.2em;
  font-weight: 600;
  border: solid white 2px;
  border-radius: 5px;
  padding: 5px;
  margin-right: 10px;
}
.top-mi-publicidad p{
  margin-left: 5em;
  margin-top: 1em;
  display: inline-block;
  color: whitesmoke;
  line-height: 28px;
}
@media only screen and (max-width: 700px) {
  .top-mi-publicidad{
    text-align: left;
  }
}


/* ------------------------------------------- */
/* Juego Leitner */
/* ------------------------------------------- */

/* Linea 0: Aspecto común a todas las cajas */
div[class*="lf-caja"],
div[class*="lc-caja"],
div[class*="lnc-caja"] {
  width: 20%;
  margin: 0 5px;
}

/* Linea 1: flechas que muestran el desplazamiento de las cartas */
div[class*="lf-caja"] {
  z-index: 10;
  height: 4em;
  text-align: center;
}

/* Linea 2: cajas */
div[class*="lc-caja"] {
  z-index: 1;
  padding: 2px;
  height: 5em;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  border-bottom: solid 3px var(--color-01-fondo-superclaro);
  border-right: solid 3px var(--color-01-fondo-superclaro);
  border-left: solid 3px var(--color-01-fondo-superclaro);
}

/*Dar un aspecto diferente a la caja final */
.leitner-cajas div p {
  text-align: center;
  margin-top: 0.5em;
  font-size: 1.15em;
  line-height: 1em;
  font-weight: 600;
  color: var(--color-01-fondo-superclaro);
}

.lc-caja-3 {
  background-color: var(--color-01-fondo-superclaro);
}

.lc-caja-3 p {
  color: white !important;
}

/* Linea 3: Nombre de las cajas */
div[class*="lnc-caja"] {
  text-align: center;
  margin-bottom: 6em;
  color: var(--color-01-fondo-superclaro);
}


/* Zona de preguntas y respuestas */

.row.leitner-pregunta-y-respuestas {
  margin-top: 1em;
  margin-bottom: 2em;
}

.leitner-pregunta-wrapper p,
.leitner-respuesta {
  font-size: 1.5em;
  font-weight: 600;
  padding: 0.5em;
}

.leitner-pregunta-wrapper {
  background: #eeeeee;
  border-radius: 8px;
  text-align: center;
}

.leitner-respuesta {
  background: #d2edfd;
  border-radius: 5px;
  cursor: pointer;
  transition: transform .3s;
}

.leitner-respuesta:hover {
  transform: scale(1.025);
}








.acierto-opcion-correcta-leitner {
  animation: acierto-opcion-correcta-leiner-animation 2s;
  animation-fill-mode: forwards;
}

@keyframes acierto-opcion-correcta-leiner-animation {
  30% {
    background: green;
    transform: scale(1.125);
    color: white;
  }

  70% {
    background: green;
    transform: scale(1.125);
    color: white;
  }

  100% {}
}

.error-opcion-incorrecta-leitner {
  animation: error-opcion-incorrecta-leitner-animation 2s;
}

@keyframes error-opcion-incorrecta-leitner-animation {
  30% {
    background: #801313;
  }

  70% {}
}


.efecto-flecha-leitner {
  animation: blink 2s;
  animation-iteration-count: 1;
}

@keyframes blink {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.efecto-aspecto-caja-actual {
  background-color: beige;
}



/* ------------------------------------------- */
/* Miscelanea Woocommerce */
/* ------------------------------------------- */

/* Hacer que el link de "ir a v er las reviews / valoraciones" muestre la mano (pointer) en hover */
a.woocommerce-review-link {
  cursor: pointer;
}

/* Dar formato a las estrellas de las reviews / valoraciones (en mi caso, se veía "SSSSS" en lugar de estrellas) */
.star-rating span {
  font-family: star !important;
  color: var(--color-tienda-valoraciones);
}

/* --> Dar formato al mensaje sobre las estrellas: "Only logged in customers who have purchased this product may leave a review." */
p.woocommerce-verification-required {
  font-style: italic;
  color: var(--color-tienda-valoraciones);
}


/* Ver los botones de "siguiente página de productos" salga más grande */
ul.page-numbers {
  font-size: 2em;
}


/* Dar formato el botón de "reset" del email customizer para dar miedo y que no se toque */
input#kt_woomail_reset {
  background-color: red !important;
  color: white !important;
}

/* Dar formato a los botones de atajo/navegación en las categorias de libros para poder filtrar entre "papel" "ebook" y "papel+ebook" */
.botones-filtro-navegacion {
  display: flex;
  flex-wrap: wrap;
}

.botones-filtro-navegacion a {
  margin-right: 1em;
  margin-bottom: 1em;
  text-transform: none !important;
}


/* volodya */
/* dar forma a las cajas del producto en el listado de productos */
li.product.type-product {
  border: solid 1px !important;
  box-shadow: 3px 4px 6px 0px rgba(0, 0, 0, 0.2);
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

li.product.type-product.A1 {
  border: solid 1px var(--color-nivel-a1) !important;
}

li.product.type-product.A1-A2 {
  border: solid 1px var(--color-nivel-a1-a2) !important;
}

li.product.type-product.B1,
li.product.type-product.B1-B2,
li.product.type-product.B2 {
  border: solid 1px var(--color-nivel-medio) !important;
}

li.product.type-product.C1-C2 {
  border: solid 1px var(--color-nivel-avanzado) !important;
}

li.product.type-product.A2-C2 {
  border: solid 1px var(--color-nivel-combo) !important;
}

li.product.type-product.A1-C2 {
  border: solid 1px var(--color-nivel-a1-c2) !important;
}

ul.products li.product .button.add_to_cart_button.ajax_add_to_cart,
ul.products li.product .button.product_type_variable.add_to_cart_button.rtwpvs_ajax_add_to_cart {
  background-color: #2b9a10;
  border-color: var(--color-tienda-comprar);
  border-bottom-left-radius: 11px;
  border-bottom-right-radius: 11px;
  border-top-right-radius: unset;
  border-top-left-radius: unset;
}

img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;
}

li.product.type-product .star-rating {
  margin: 0.5em auto;
}

ul.products li.product.A1 .button.add_to_cart_button.ajax_add_to_cart,
ul.products li.product.A1 .button.product_type_variable.add_to_cart_button.rtwpvs_ajax_add_to_cart {
  background-color: var(--color-nivel-a1);
}

ul.products li.product.A1-A2 .button.add_to_cart_button.ajax_add_to_cart,
ul.products li.product.A1-A2 .button.product_type_variable.add_to_cart_button.rtwpvs_ajax_add_to_cart {
  background-color: var(--color-nivel-a1-a2);
}

ul.products li.product.B1-B2 .button.add_to_cart_button.ajax_add_to_cart,
ul.products li.product.B1-B2 .button.product_type_variable.add_to_cart_button.rtwpvs_ajax_add_to_cart {
  background-color: var(--color-nivel-medio);
}

ul.products li.product.C1-C2 .button.add_to_cart_button.ajax_add_to_cart,
ul.products li.product.C1-C2 .button.product_type_variable.add_to_cart_button.rtwpvs_ajax_add_to_cart {
  background-color: var(--color-nivel-avanzado);
}

ul.products li.product.A1-C2 .button.add_to_cart_button.ajax_add_to_cart {
  background-color: var(--color-nivel-a1-c2);
}

p.non-star-rating {
  height: 1em;
  line-height: 1;
}


/* lista icono-texto en shortdescripcion del producto */
/* esto puede ser una lista  o un div con i+span por dentro */
.short-description-curso h2 {
  font-size: 24px !important;
  text-align: justify;
}

.lista-icono-texto {
  list-style-type: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  justify-content: center;
  /* flex-direction: column; */
}

.lista-icono-texto li,
.icono-texto
{
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 1em;
  border-radius: 10px;
}

.lista-icono-texto li{
  width: 15em;
}

.lista-icono-texto li:nth-child(odd) {
  background-color: #ffeedc;
}

.lista-icono-texto li:nth-child(even) {
  background-color: #d2f3de;
}

.lista-icono-texto li span {
  /* word-wrap: break-word;  */
  /* font-family: 'Oswald'; */
  /* text-align: center; */
  color: #676767;
  line-height: 1.3em;
  font-size: 15px;
  /* text-wrap: balance; */
  /* font-weight: bold; */
}

.lista-icono-texto i,
.icono-texto i
{
  font-size: 30px!important;
  color: #fe7900;
}

.siete-dias-free-course {
  background-color: #ffff80;
  padding: 10px;
  border-radius: 10px;
  margin: 0 0.5em;
}

.siete-dias-free-course strong {
  color: #fe7900;
}

@media screen and (max-width: 1200px) {
  .lista-icono-texto li {
    width: 12em;
  }
}

/* ------------------------------------------- */
/* Botones de cart y account/login en el header */
/* ------------------------------------------- */

/* Hacer que la carita cambie de tamaño con click */
.nav-logged-user:active {
  scale: 0.9;
}

/* header */
.home-global-new .row {
  margin-left: unset;
  margin-right: unset;
}

.navegador-header div#logo img{
  width: 15em;
}

@media screen and (max-width: 1200px) {
  .cart-login.iconos-navegador, 
  .menu-envuelto.menu-navegador
  {
    display: none;
  } 
}
@media screen and (min-width: 1200px) {
  .cart-login.iconos-movil, 
  .menu-envuelto.menu-movil
  {
    display: none;
  } 
}

.navbar-header {
  float: unset;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}

.cart-login a {
  text-decoration: none;
}

.cart-login {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 40px;
}


@media screen and (max-width: 767px) {
  .cart-login {
    margin-right: 0;
  }
}

.cart-login .no-tiene-cuenta a {
  background: #ebf4ff;
  padding: 5px;
  border-radius: 5px;
  border: solid 1px var(--color-01-fondo-superclaro) !important;
}

/* nombre usuario */
.nombre-usuario {
  display: flex;
  align-items: center;
}

.nombre-usuario p {
  overflow: hidden;
  margin: 0;
  color: whitesmoke;

}

@media screen and (max-width: 767px) {
  .nombre-usuario {
    flex-direction: column-reverse;
  }

  .nombre-usuario p {
    width: min-content;
    text-align: center;
  }
}

.nav-cart {
  font-size: 1.5em;
  color: whitesmoke;
  cursor: pointer;
  white-space: nowrap;
}

.nav-cart a:hover{
  color: inherit;
}

@media screen and (max-width: 767px) {
  .nav-cart {
    display: none;
  }

  .nav-logged-user .fa-user-circle {
    font-size: 2.3em !important;
  }

  .nav-logged-user {
    margin-right: 0 !important;
  }
}

.cartcontent {
  background-color: red;
  border-radius: 10px;
  color: white;
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  padding: 3px 7px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

div#logo img {
  margin-left: unset;
}

/* boton de login/logout */
.nav-login {
  background-color: var(--color-01-fondo-claro);
  color: white;
  border-radius: 7px;
  padding: 10px;
  margin: 15px;
  cursor: pointer;
}

/* login form en header */
.login-form-header {
  display: flex;
  flex-direction: column;
  max-width: max-content;
  position: absolute;
  top: 27%;
  z-index: 999;
  background-color: white;
  border-radius: 20px;
  visibility: hidden;
  transform: translate(0, 10px);
  opacity: 0;
  width: 29%;
  box-shadow: 1px 1px 13px 0px #666;
  transition: opacity 200ms ease-in, transform 200ms ease-in, visibility 200ms ease-in;
}

@media screen and (max-width: 1200px) {
  .login-form-header {
    width: 55%;
  }
}

@media screen and (max-width: 767px) {
  .login-form-header {
    width: 90%;
  }
}

.login-form-header .woocommerce-form {
  margin: 0 !important;
  border: none !important;
  padding-bottom: 0 !important;
}

.cerrar-form-login {
  position: absolute;
  right: 3%;
  top: 3%;
  cursor: pointer;
  color: var(--color-01-fondo-claro);
  font-size: 1.3em;
  z-index: 1001;
}

/* .login-form-header li a,
.login-form-header .no-tiene-cuenta a,
.login-form-header .woocommerce-error a,
.login-form-header .woocommerce-form:last-child a
{
  color: var(--color-01-fondo-superclaro)!important;
} */


.no-tiene-cuenta.woocommerce-LostPassword.lost_password {
  padding-left: 20px;
  padding-bottom: 20px;
}

.nav-logged-user {
  padding: 10px;
  margin-right: 0.5em;
  font-size: 2em;
  color: whitesmoke;
}

.account-menu-envuelto{
  cursor: pointer;
}

.account-menu-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(0, 0) !important;
}

.account-sub-menu {
  opacity: 0;
  visibility: hidden;
  transform: translate(0, 10px);
  transition: opacity 200ms ease-in, transform 200ms ease-in, visibility 200ms ease-in;
  z-index: 999;
  position: absolute;
  max-width: none;
  width: max-content;
  padding: 0px 0px 0px 0px;
  border: 0;
  background: #f1f1f1;
  border-radius: 0;
}

@media screen and (max-width: 767px) {
  .account-sub-menu {
    left: 50%;
  }
}

.account-sub-menu li {
  transition: none;
  border-radius: 0;
  box-shadow: none;
  background: none;
  border: 0;
  bottom: auto;
  box-sizing: border-box;
  clip: auto;
  color: #666;
  float: none;
  font-family: inherit;
  font-size: 14px;
  height: auto;
  left: auto;
  line-height: 1.7;
  list-style-type: none;
  margin: 0;
  min-height: auto;
  max-height: none;
  min-width: auto;
  max-width: none;
  opacity: 1;
  outline: none;
  overflow: visible;
  padding: 0;
  position: relative;
  pointer-events: auto;
  right: auto;
  text-align: left;
  text-decoration: none;
  text-indent: 0;
  text-transform: none;
  transform: none;
  top: auto;
  vertical-align: baseline;
  visibility: inherit;
  width: auto;
  word-wrap: break-word;
  white-space: normal;
}

.account-sub-menu a {
  /* background: #f1f1f1; */
  color: #666 !important;
  font-family: inherit;
  font-size: 14px;
  font-weight: normal;
  padding: 0px 10px 0px 10px;
  line-height: 35px;
  text-decoration: none;
  text-transform: none;
  vertical-align: baseline
}

.account-sub-menu li:hover {
  background: #ddd;
}

.account-sub-menu i {
  margin-right: 9px;
}

/* Ajax cart popup */
.xoo-cp-pqty,
.xoo-cp-ptotal {
  display: none;
}

.xoo-cp-pprice span.woocommerce-Price-amount.amount {
  font-weight: bold;
  color: #666;
}

/* carrito flotante en versión móvil */
.floating-cart {
  position: fixed;
  z-index: 9999999;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 10px 20px #ccc;
  transition: box-shadow .3s ease-in-out;
  display: none;
}

.floating-cart:hover {
  box-shadow: 0 10px 30px #888
}

.floating-cart a.floating-contents {
  text-decoration: none;
  color: #000
}

.floating-cart a.floating-contents i {
  position: relative
}

.floating-cart a.floating-contents i::before {
  margin-right: 0
}

.floating-cart a.floating-contents span.cartcontents {
  display: block;
  background: red;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  text-align: center;
  line-height: 20px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  position: absolute
}

.floating-cart a.empty-floating-visible span.cartcontents {
  background: #ccc
}

.floating-cart.floating-circle,
.floating-cart.floating-circle a.floating-contents {
  width: 60px;
  height: 60px;
}

.floating-cart.floating-circle {
  border-radius: 50%;
  line-height: 60px;
}

.floating-cart.floating-circle a.floating-contents {
  display: inline-block
}

.floating-cart.floating-circle a.floating-contents span.cartcontents {
  top: 0;
  right: 0
}

.floating-cart.floating-circle.top-left {
  top: 60px;
  left: 60px
}

@media screen and (max-width: 767px) {
  .floating-cart.small-devices-only {
    display: block;
  }

  .floating-cart.floating-circle.top-left {
    top: 15px;
    left: 5px
  }
}

.woocommerce-tabs ul.tabs.wc-tabs {
  display: none;
}

.aviso-lost-pass {
  color: red;
  font-weight: bold;
}

/* ------------------------------------------- */
/* Fin de miscelanea Woocomerce */
/* ------------------------------------------- */

/* ------------------------------------------- */
/* descarga audios de los libros digitales */
/* y descarga libro gratuito */
/* ------------------------------------------- */
/* descarga audios de los libros digitales */
/* descarga audios de los libros digitales */
.dl-banderitas {
  text-align: center;
}

form.form-descarga-libros {
text-align: center;
font-size: x-large;
}

.descarga-libros-envuelto {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 10px;
  margin-bottom: 10em;
}

.dl-agradecimiento {
  text-align: center;
  font-family: 'Oswald';
  margin-bottom: 1em;
}

.descarga-libros-envuelto img {
  width: 150px;
  height: auto;
}

.dl-libro {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}

.dl-libro h3{
  margin-left: 20px;
}

.dl-cajita-blanca {
  border: solid 1px #6666663d;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 13%);
  background-color: white;
  width: 100%;
}

.dl-cajita-blanca.dl-imagen-nombre {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
}

.dl-avisos-envuelto {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  align-items: flex-start;
  margin-top: 1em;
  gap: 10px;
}

@media (max-width: 768px) {
  .dl-avisos-envuelto{
    flex-direction: column; 
  } 
}

.dl-icon-text {
  font-size: large ;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: initial;
}

.dl-icon-text p span{
  color: #1e73be;
  text-transform: uppercase;
}


.dl-icon-text i {
  font-size: xx-large!important;
  margin-right: 10px;
  color: var(--color-01-fondo-oscuro);
}

.dl-icon-text p {
  text-align: center;
}


.form-descarga-libros .btn-default,
.dl-boton-descarga a.btn.btn-primary
 {
    background-color: #1e73be;
    border-color: #1e73be;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    padding: 6px 12px
}

.dl-boton-descarga a.btn.btn-primary
 {
    background-color: #1e73be;
    border-color: #1e73be;
    font-size: 1.25em;
    padding: 6px 22px;
    font-family: 'Oswald';
}



.dl-boton-descarga, .dl-boton-campus {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.dl-boton-campus button {
  padding: 8px 12px;
  text-transform: uppercase;
  font-family: 'Oswald';
  font-weight: 400;
  font-size: 1.25em;
  background-color: var(--color-boton-raro-homogeneo);
}

.dl-boton-campus button:hover{
  background-color:  #9acd32;
  color: #000;
}

.dl-anuncio {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1em
}

.dl-anuncio img {
  width: 18em;
}
.dl-anuncio p{
  margin: 0 !IMPORTANT;
}

.dl-anuncio p:first-child {
  font-weight: bolder;
}


/* .dl-boton-descarga a.btn.btn-primary{
  margin-top: 1em;
} */


.dl-aviso-usuario-no-logueado {
  font-size: large;
  margin-bottom: 10em;
  margin-top: 2em;
  line-height: 1.4;
  padding: 1em;
  background-color: lightgrey;
  border-radius: 30px;
  color: black;
}

.dl-aviso-usuario-no-logueado h2 {
  font-family: 'Oswald';
}

.dl-aviso-usuario-no-logueado a, .dl-aviso-usuario-no-logueado a:hover {
  color: white;
  text-decoration: none;
}

.dl-aviso-usuario-no-logueado button {
  margin: 2px;
}


header#masthead {
  /* background-image: linear-gradient(rgb(0 54 100 / 10%), rgb(0 54 100 / 30%), rgb(0 54 100 / 100%)), url(/wp-content/uploads/header-fondo-bn.jpg); */
  /* background-position: top left; */
  /* background-repeat: no-repeat; */
  /* background-blend-mode: initial; */
  /* background-size: cover; */
  background-color: var(--color-01-fondo-oscuro);
}

/* Estilos para popup  en la home y Student access*/
.nuestro-popup{
  display: none;
  background-color: #ffffff66;
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 100;
}

.nuestro-popup-wrapper {
  /* background-color: #ffffffeb; */
  /* border: solid 3px #fc7571; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20% 0 10% 0;
  width: 20%;
  max-width: 90vh;
  max-height: 90vh;
  overflow-x: auto;
}

@media only screen and (max-width: 768px) {
  .nuestro-popup-wrapper{
    width: 80%;
  }
}

.nuestro-popup-boton-cerrar {
  position: absolute;
  right: 11px;
  top: 28px;
  cursor: pointer;
  color: var(--color-01-fondo-claro);
  /* color: #003664; */
  z-index: 10001;
  transition: color 0.5s;
}

.nuestro-popup-boton-cerrar i{
  font-size: xx-large !important;
  position: absolute;
  top: 0;
  right: 0;
}

.nuestro-popup-boton-cerrar i.fa-solid.fa-circle {
  color: white;
}

@media only screen and (max-width: 768px) {
  .nuestro-popup-boton-cerrar{
    width: 3em;
    padding: 1em;
  }
}

.nuestro-popup-boton-cerrar:hover {
  color: black;
}

.nuestro-popup-content img{
  width: 100%;
  border-top-left-radius: 23%
}

.npc-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1em;
}

.npc-info-texto{
  font-size: x-large;
  color: #ee3134;
}

.npc-info-boton {
  background-color: red;
  border-radius: 5px;
  transition: 0.5s;
  padding: 12px;
  margin-top: 10px;
}

.npc-info-boton:hover {
  transform: scale(1.05);
}

.npc-info-boton a {
  color: white;
  font-size: x-large;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Oswald;
}

.npc-info-boton a:hover {
  color: white;
}


/* estilos para el popup del libro gratis */

.libro-gratis-publi {
  position: fixed;
  z-index: 101;
  background-color: #fffffff2;
  bottom: 20px;
  right: 20px;
  width: 17em;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  visibility: hidden;
  border-radius: 7px;
  border: solid #b7b4b4 1px;
  /* transition: transform 800ms, visibility 800ms; */
  transition: all 800ms;
}

.libro-gratis-publi .nuestro-popup-boton-cerrar{
  right: 4px;
  top: 4px;
}

.libro-gratis-publi .nuestro-popup-boton-cerrar i{
  font-size: x-large !important;
}

.hacer-popup-invisible{
  transform: scale3d(0.01, 0.01, 0.5);
  transform-origin: right;
  visibility: hidden;
  opacity: 0;
}

.hacer-popup-visible {
  visibility: visible;
  transform: scale3d(1, 1, 1);
  transform-origin: right;
}

.lgp-contet {
  padding: 0.5em 1.5em;
}

.lgp-c-textos {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.5em;
}

.lgp-c-titulo {
  color: red;
  font-size: x-large!important;
  font-family: 'Oswald';
  text-align: center;
}

.lgp-c-boton {
  display: block;
}

.lgp-c-boton button{
  width: 100%;
}

/* botoncito del libro gratis */
.libro-gratis-publi-boton {
  background-color: #ee3134;
  position: fixed;
  bottom: 10%;
  right: 0;
  cursor: pointer;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  z-index: 10;
  /* visibility: hidden; */
}

.lgpb-texto {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  padding: 9px 3px 9px 0;
  color: white;
  font-weight: 800;
}

@media only screen and (max-width: 768px) {
  .libro-gratis-publi {
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
  }

  .libro-gratis-publi .nuestro-popup-boton-cerrar{
    top: 3px;
  }

  .libro-gratis-publi .nuestro-popup-boton-cerrar i{
    font-size: 22px !important;
  }
}

/* estilos para nuestra cuenta  atras */
.cuentaatras{
  margin: 3rem;
}
.cuentaatras-envuelto {
  background: #0F131D;
  margin: 0 auto;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  box-shadow: 0 15px 29px 0 rgba(41, 45, 56, 0.26);
  max-width: 425px;
  border-radius: 10px;
}

.cuentaarras-reloj {
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
}

.cuentaatras-elemento {
  position: relative;
  width: 25%;
  padding: 10px 10px 15px;
  text-align: center;
}

span.ca-tiempo {
  display: block;
  font-size: 34px;
  color: #fff;
  text-align: center;
}

span.ca-label {
  display: block;
  text-transform: uppercase;
  font-size: x-small!important;
  color: #a7afc6;
  white-space: nowrap;
}

.cuentaatras-elemento.horas::before,
.cuentaatras-elemento.minutos::before,
.cuentaatras-elemento.segundos::before{
  content: ":";
  position: absolute;
  top: 25%;
  left: 0;
  /* margin-right: -5px;
  margin-top: -24px;
  width: 10px;
  height: 34px; */
  font-size: 18px;
  font-weight: bold;
  color: #a7afc6;
}

.cuentaatras .titulo {
  padding: 10px 0 0 10px;
  color: white;
}

.sib-input input {
  color: black !important;
}

/* //banner con svg BLACK FRIDAY */
.bf-banner-svg-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: 1s;
  z-index: 10000;
}

.deslizar-banner{
  animation: DeslizarBanner 2s;
}

.bf-banner-svg {
  max-width: 100%;
  height: auto;
}

@media only screen and (max-width: 768px) {
  .bf-banner-svg {
    width: 80%;
  }
  .bf-banner-svg-container{
    justify-content:  flex-end;
  }
}

.bf-banner-circle-shadow, .OffTextEx6 {
  -webkit-animation: fadeinout 1s linear forwards;
  animation: fadeinout 3s linear alternate infinite;
  animation-delay: 0s;
}

.bf-banner-border {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: BannerBorder 3s linear forwards;
  animation-delay: 1s;
}

.bf-banner-border-animation {
 stroke-dasharray: 4;
  stroke-dashoffset: 4;
  animation: BannerBorder 200s linear alternate infinite;
  animation-delay: 1s;
}

@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes BannerBorder {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 1;
  }
}


@keyframes DeslizarBanner {
  from {
    transform: scale(1.1) translatey(200%);
  }
  to {
    transform: scale(1) translatey(0);
  }
}





/* ---------------------------------------------------------------- */
/* ---------- CSS que uso en combinación con scripts -------------- */
/* ---------------------------------------------------------------- */


/* ---------------------------------------------------------------- */
/* ---------- CSS que uso en combinación con scripts -------------- */
/* ---------------------------------------------------------------- */