/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/

:root {
  --verde: #28a61c;
  --rojo: #a6357b;
  --blanco: white;
  --trainlang1: #009dcc;
  --trainlang2: #166899;
  --trainlang3: #2459a5;
}

.has-verde-trainlang-background-color {
  background-color: var(--verde);
}

.has-verde-trainlang-color {
  color: var(--verde);
}

.has-rojo-trainlang-background-color {
  background-color: var(--rojo);
}

.has-rojo-trainlang-color {
  color: var(--rojo);
}

.has-azul-trainlang-1-background-color {
  background-color: var(--trainlang1);
}

.has-azul-trainlang-1-color {
  color: var(--trainlang1);
}

.has-azul-trainlang-2-background-color {
  background-color: var(--trainlang2);
}

.has-azul-trainlang-2-color {
  color: var(--trainlang2);
}

.has-azul-trainlang-3-background-color {
  background-color: var(--trainlang3);
}

.has-azul-trainlang-3-color {
  color: var(--trainlang3);
}

.has-negro-trainlang-background-color {
  background-color: var(--trainlang3);
}

.has-negro-trainlang-color {
  color: #000;
}

.leccion {
  color: var(--color-trainlang);
  font-size: 3rem;
  text-align: center;
  margin: 50px 200px 0px 200px;
  padding-bottom: 3rem;
  font-weight: 700;
}

.intro,
.ending {
  margin: 0px 100px 0px 100px;
  text-align: justify;
  padding: 10px 10px 10px 10px;
  border-style: solid;
}

ul {
  margin: 0px 100px 0px 100px;
  text-align: justify;
  list-style-type: circle;
}

.image-content {
  display: flex;
  justify-content: center;
}

.image-content:nth-child(1) {
  width: 60%;
}

/* 05/06/2025 Dani: Desactivamos esta regla ya que no sólo afecta a LazyBlocks sino a la web en general y a Hanyu. 
    Además es una mala praxis que un CSS concebido para lazy-blocks modifique estilos fuera de su ámbito. 
  */
/* 
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .widget-title,
  .show-support h6,
  label {
    color: var(--trainlang3) !important;
  } 
  */

h1.entry-title {
  /* color: white; */
}

.titulo1,
.titulo.ol {
  font-family: "League Spartan";
  color: var(--blanco);
  background: -prefix-linear-gradient(
    right,
    var(--trainlang1),
    var(--trainlang3)
  );
  background: linear-gradient(to right, var(--trainlang1), var(--trainlang3));
  text-align: center;
  padding: 1.1em 0.5em 1.1em 0.5em;
  margin: 0.5em 0em 2em 0em;
  font-weight: 100;
  font-size: 1.2em;
}

.centrar-texto,
.centrar-texto li,
.centrar-texto p {
  display: flex;
  justify-content: center;
}

.titulo2,
.cuadro {
  font-family: "League Spartan";
  color: var(--trainlang3);
  text-transform: uppercase;
}

.cuadro {
  margin: 0.2em;
  padding: 1em;
  box-shadow: 2px 2px 5px #555;
  text-align: center;
}

/* .bb-icon-minimize:before { content: '\e8af'; } */
/* i.bb-icon-minimize::before { content: '\e903'}  '<i class="bb-icon-list-view">...</i>'*/
.bb-icon-minimize::before {
  content: "\e903";
}

span.bb-pages {
  padding-left: 30px;
}

/* El resto debería tener 100 px*/

.html5-video-player {
  width: 80% !important;
  height: 80% !important;
}

.txt-indent {
  text-indent: 80px;
}

.container-notice,
.container-message {
  display: flex;
  justify-content: center;
}

.notice__card,
.notice__card-end,
.message__card {
  display: flex;
  align-items: center;
}

.message__card {
  justify-content: center;
}

.notice__card {
  justify-content: flex-start;
}

.notice__card-end {
  justify-content: flex-end;
}

.notice__img,
.message__img {
  max-width: 25%;
  padding: 1.5%;
}

.notice__content,
.notice__content-end {
  width: 70%;
  padding: 1.5%;
  align-items: center;
}

.notice__content-end {
  text-align: right;
}

.notice__content h3,
.notice__content-end h3,
.message__content h3 {
  font-family: "League Spartan";
  font-size: 1.6em;
  margin: 1px;
}

.notice__content p,
.notice__content-end p {
  font-family: "Montserrat Regular";
  margin: 0 0 0.5em 0;
}

/* Tarjetas FlipCard y StaticCard*/

.flip-card-container-general {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
}

/* Bloque ControlAudio */

.controlaudio-container {
  justify-content: flex-end;
  margin-bottom: 2em;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  display: flex;
  align-items: baseline;
}

.controlaudio__text {
  display: flex;
  text-align: left;
  justify-content: flex-start;
  margin: 0 auto;
}

.controlaudio__text p {
  height: 2em;
  margin: 0.5em 0em 0em 0em;
}

.controlaudio__text ul,
.controlaudio-audio {
  margin-top: -10px;
}

.controlaudio__audio {
  height: 5em;
}

.controlaudio__button {
  box-shadow: 2px 2px 5px #999;
  padding-bottom: 30px;
  position: absolute;
  left: 10em;
}

.controlaudio__icono {
  position: relative;
  top: -1.1em;
  left: 0.6em;
}

.flip-card-container {
  width: 11em;
  max-width: 100%;
  height: 11em;
  margin: 1em 0.5em 3em 0.5em;
  perspective: 1000px;
  -webkit-perspective: 1000px; /* Safari */
  -moz-perspective: 1000px; /* Firefox*/
}

.static-card-container {
  /*width: 15%;*/
  display: flex;
  justify-content: center;
  margin: 1em 1em 3em 1em;
  flex-direction: column;
}

.static-card-container .card-img,
.static-card-container .flip-card-text {
  margin-bottom: 2em;
}

.flip-card,
.static-card,
.flip-card-click {
  position: relative;
  height: 100%;
  max-width: 100%;
  -moz-transition: transform 1s; /* Firefox */
  -webkit-transition: transform 1s; /* Safari */
  transition: transform 1s;
  -webkit-transform-style: preserve-3d; /*Safari*/
  -moz-transform-style: preserve-3d; /* Firefox */
  transform-style: preserve-3d;
}

/* 
  * author: Dani
  * date: 2025-03-27
  * description: Reactivamos esta regla porque es la que hace que al pasar encima el ratón se gire la tarjeta 
  */
.flip-card:hover {
  transform: rotateY(180deg);
}
.flip-card-click-toggle {
  transform: rotateY(180deg);
}

label:hover .flip-card {
  /* transform: rotateX(2deg); */
  -webkit-transform: rotateY(180deg); /* Safari */
  -moz-transform: rotateY(180deg); /* Firefox */
  transform: rotateY(180deg);
  /* box-shadow: 0 20px 20px rgba(50, 60, 60, 0.2); */
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 90%;
  height: 90%;
  -webkit-backface-visibility: hidden; /* Safari */
  -moz-backface-visibility: hidden; /* Firefox */
  backface-visibility: hidden;
  display: flex;
}

.flip-card-back {
  -webkit-transform: rotateY(180deg); /* Safari */
  -moz-transform: rotateY(180deg); /* Firefox */
  transform: rotateY(180deg);
}

.flip-card-front p,
.flip-card-back p {
  -webkit-text-transform: uppercase;
  -moz-text-transform: uppercase;
  text-transform: uppercase;
  font-size: 80%;
}

/* Solo para el caso del Click Feature*/

.flip-card-container input {
  display: none;
}

:checked + .flip-card-click {
  -webkit-transform: rotateY(180deg); /* Safari */
  -moz-transform: rotateY(180deg); /* Firefox */
  transform: rotateY(180deg);
}

label:hover :checked + .flip-card-click {
  -webkit-transform: rotateY(175deg); /* Safari */
  -moz-transform: rotateY(175deg); /* Firefox */
  transform: rotateY(175deg);
  /* box-shadow: 0 20px 20px rgba(255, 255, 255, 0.2); */
}

/* Fin Click feature */

.flip-card-audio {
  margin-left: 65%;
}

.flip-card-audio,
.static-card-audio {
  display: flex;
  justify-content: center;
  /* padding-bottom: 2em; */
}

.space-box-audio {
  padding-left: 2em;
}

.flip-card__button,
.static-card__button {
  height: 2em;
  box-shadow: 2px 2px 5px #999;
  padding-bottom: 30px;
  /* margin-top: 10px; */
  position: absolute;
}

.audio__button {
  height: 2em;
  box-shadow: 2px 2px 5px #999;
  padding-bottom: 30px;
}

@media screen and (max-width: 1300px) {
  .notice__card,
  .notice__card-end,
  .message__card {
    flex-direction: column;
    /* justify-content: center;
      align-items: center; */
  }

  .notice__content,
  .notice__content-end,
  .message__content {
    text-align: center;
    margin: 0px;
    width: auto;
    order: 0;
  }

  .notice__img,
  .message__img {
    max-width: 45%;
    padding: 1.5%;
    order: -1;
  }
}

@media screen and (max-width: 800px) {
  .flip-card-container-general {
    flex-wrap: wrap;
  }
}

a.bb-toggle-panel {
  color: lightblue !important;
}

.bb-icon-volume-up:before {
  /* content: "\e8f0"; */
  position: relative;
  top: 10px;
  color: white;
  cursor: pointer;
  margin-left: 0px;
}

.bb-icon-volume:before {
  content: "\e8f0";
  position: relative;
  top: 16px;
  color: white;
  left: -26px;
}

.flip-card-text {
  display: flex;
  font-family: "League Spartan";
  font-size: 1.6em;
  /* color: var(--trainlang2); */
  background: -webkit-linear-gradient(var(--trainlang1), var(--trainlang3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  justify-content: center;
  align-items: center;
  text-align: right;
  text-transform: uppercase;
  width: 6.7em;
  padding: 1.8em 0.3em 0.3em 0.3em;
  box-shadow: 2px 2px 5px #999;
  backface-visibility: hidden;
  margin-left: 3vw;
  /* padding-right: 60px; */
  padding: 47px;
}

/* .flip-card-text p {
    color: -prefix-linear-gradient(right, var(--trainlang1), var(--trainlang3));
    color: linear-gradient(to right, var(--trainlang1), var(--trainlang3));
  } */

.card-img {
  width: 11em;
  box-shadow: 2px 2px 5px #999;
  /* object-fit: cover; */
  margin: auto 0;
  margin-left: 70px;
}

.size-xl .card-img {
  width: auto;
}

.size-sm .card-img {
  width: 5em;
}

/* Posibilidad de Aplicar Zoom a la Imagen */
.zoom-img:hover {
  transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  transition: all 2s ease;
  z-index: 1;
}

.example-block {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1em 0 1em 0;
}

.example__title,
.static-card-title {
  font-family: "League Spartan";
}

.example__title,
.example__divisor,
.static-card-title {
  color: var(--trainlang3);
  font-size: 1.6em;
}

.example__content {
  display: flex;
  align-items: center;
  padding: 0.3em;
}

.example__divisor {
  align-self: stretch;
  margin: 0em 0.7em;
  font-size: 0.9em;
  background: var(--trainlang3);
}

.example__text p {
  margin: 0px;
  padding: 0px;
}

.learndash-wrapper .learndash_content_wrap .ld-content-actions {
  justify-content: center;
  margin-bottom: 3em;
}

.navigation-buttons-content {
  display: flex;
  justify-content: space-between;
}

.sfwd-course-nav,
.audiodialog {
  display: flex;
  justify-content: center;
  padding-bottom: 3em;
}

.navigation-buttons__styles .prev-link,
.navigation-buttons__styles .next-link {
  color: white;
}

/*** Carousel Trainlang ***/

/* .container {
  padding: 2rem;
} */

.slider-wrapper {
  position: relative;
  max-width: 48rem;
  margin: 0 auto;
}

.slider {
  display: flex;
  aspect-ratio: 16 / 9;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  box-shadow: 0 1.5rem 3 rem -0.75rem hsla(0, 0%, 0%, 0.25);
  border-radius: 0.5rem;
  overflow: hidden;
}

.slider img {
  flex: 1 0 100%;
  scroll-snap-align: start;
}

.slider-nav {
  display: flex;
  column-gap: 1rem;
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 1;
}

.slider-nav a {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: black;
  opacity: 0.75;
  -webkit-transition: opacity ease 250ms;
  -moz-transition: opacity ease 250ms;
  transition: opacity ease 250ms;
}

.slide-nav a :hover {
  opacity: 1;
}

@media (max-width: 640px) {
  .learndash-wrapper .ld-content-actions div:nth-child(2) {
    width: max-content;
  }

  .learndash-wrapper .ld-content-actions div:first-child,
  .learndash-wrapper .ld-content-actions div:nth-child(3) {
    width: max-content;
  }
}

/* Contenido que afecta posición de botones de navegacion en la seccion inferior de la pantalla */

.learndash-wrapper .wpProQuiz_content .wpProQuiz_button,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button2 {
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

@media (max-width: 640px) {
  .intro {
    margin: 0px 50px 0px 0px;
  }

  ul {
    margin: 0px 0px 0px 50px;
  }

  .image-content:nth-child(1) {
    width: 50%;
  }

  /* .learndash-wrapper .ld-content-actions div:first-child,
    .learndash-wrapper .ld-content-actions div:nth-child(3) {
      width: auto;
    } */

  .zoom-img:hover {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    transform: scale(2);
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    transition: all 2s ease;
    z-index: 1;
  }

  .example-block {
    flex-direction: column;
  }
}

@media (max-width: 960px) {
  .learndash-wrapper .wpProQuiz_content .wpProQuiz_button,
  .learndash-wrapper .wpProQuiz_content .wpProQuiz_button2 {
    /* min-width: 150px;
      padding: 1em 2em; */
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }
}

@media (max-width: 794px) {
  .controlaudio-container {
    display: flex;
    /* justify-content: center; */
    margin-bottom: 2em;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    gap: 50px;
  }

  .flip-card-container-general {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
  }
  .flip-card-audio {
    margin-left: 0%;
  }
}

.flip-card-audio audio {
  display: none;
}

.enter {
  background-color: var(
    --color-background
  ); /* Cambia el color según tus preferencias */
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.enter:hover {
  background-color: var(
    --color-background-hover
  ); /* Cambia el color al pasar el mouse */
}