@charset "UTF-8";
/* REGLAS @FONT-FACE (familias de fuentes descargadas desde Google Fonts) */
/* 'Montagu Slab' */
@font-face {
  font-family: "Montagu Slab";
  src: local("Montagu Slab"), url(../fonts/Montagu_Slab/MontaguSlab-VariableFont_opsz-wght.ttf);
}
/* "Roboto Mono" */
@font-face {
  font-family: "Roboto Mono";
  src: local("Roboto Mono"), url(../fonts/Roboto_Mono/RobotoMono-VariableFont_wght.ttf);
}
/* RESETEO DE ESTILOS */
* {
  margin: 0;
  padding: 0;
}

.body {
  background: linear-gradient(90deg, rgb(62, 0, 143), black, rgb(62, 0, 143));
  color: white;
  font-family: "Roboto Mono", monospace;
}
.body ul {
  list-style: none;
}
.body .main {
  font-size: calc(0.7rem + 1vw);
  text-align: justify;
  padding-left: 5%;
  padding-right: 5%;
}
.body .main a {
  color: white;
  font-weight: bolder;
  position: relative;
  text-decoration: none;
  transition: color 0.25s;
}
.body .main a::before {
  content: "";
  position: absolute;
  border-bottom: 0.02em solid;
  inset: 0 100% auto 0;
  transition: right 0.25s;
}
.body .main a:hover::before {
  right: 0;
}
.body .main a::after {
  content: "";
  position: absolute;
  border-top: 0.02em solid;
  inset: auto 0 0 100%;
  transition: left 0.25s;
}
.body .main a:hover::after {
  left: 0;
}
.body .main a:active {
  color: black;
}
.body .mainBotonSidebar {
  animation: parpadeo 2s ease-in-out infinite alternate;
  background-color: rgb(62, 0, 143);
  border: thin solid black;
  position: sticky;
  transition: border-color 0.2s, scale 0.5s;
  z-index: 5;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
  margin-top: 2vw;
  margin-bottom: 0;
}
.body .mainBotonSidebar:hover {
  scale: 1.2;
}
.body .mainBotonSidebar:active {
  background-color: rgb(62, 0, 143);
}
.body .mainSidebar {
  width: fit-content;
}
.body .mainSidebar-IndiceBox--Indice .nav-link {
  font-weight: normal;
  transition-property: color, font-weight, scale;
  transition-duration: 0.25s;
  transition-timing-function: ease;
  transition-delay: 0s;
}
.body .mainSidebar-IndiceBox--Indice .nav-link:hover, .body .mainSidebar-IndiceBox--Indice .nav-link.active {
  font-weight: bold;
  scale: 1.05;
}
.body .mainSidebar-IndiceBox--Indice .nav-link.active {
  background-color: rgba(62, 0, 143, 0.5);
}

/* REGLAS @MEDIA */
/* MOBILE - upper breakpoint: 575.98px, breakpoint 'sm' de Bootstrap (originalmente 428px, ancho de pantalla de iPhone 12/13 Pro Max) - */
@media only screen and (width <= 575.98px) {
  /* Abreviación de @media only screen and (max-width: 575.98px) { */
  /* HTML */
  html {
    scroll-padding-top: 19vw;
  }
  html h2,
  html h3,
  html h4 {
    margin-top: 4vw;
    margin-bottom: 2vw;
  }
  html h3,
  html h4 {
    text-align: center;
  }
  html .mainBotonSidebar {
    font-size: 3.5vw;
    margin-left: 72vw;
    top: calc(25px + 13.25vw);
  }
}
/* TABLET - upper breakpoint: 834.98px (iPad Pro, versión de 11 pulgadas) - */
@media only screen and (575.98px <= width <= 834.98px) {
  /* Abreviación de @media only screen and (min-width: 575.98px) and (max-width: 834.98px) { */
  /* HTML */
  html {
    scroll-padding-top: 18.5vw;
  }
  html h2,
  html h3,
  html h4 {
    margin-top: 2vw;
    margin-bottom: 1vw;
  }
  html .mainBotonSidebar {
    font-size: 3vw;
    top: 14.5vw;
  }
}
/* DESKTOP */
@media only screen and (834.98px <= width) {
  /* Abreviación de @media only screen and (min-width: 834.98px) { */
  /* HTML */
  html {
    scroll-padding-top: 12.5vw;
  }
  html h2,
  html h3,
  html h4 {
    margin-top: 2vw;
    margin-bottom: 1vw;
  }
  html .mainBotonSidebar {
    font-size: 2vw;
    top: 10.25vw;
  }
}
/* FIN DEL RESETEO DE ESTILOS */
/* FIN DEL RESETEO DE ESTILOS */
/* FIN DEL RESETEO DE ESTILOS */
/* HEADER */
.header {
  background-color: rgb(62, 0, 143);
  border: solid black thin;
  border-radius: 0 0 25px 25px;
  display: flex;
  justify-content: space-between;
  top: 0px;
  width: 100%;
  z-index: 10;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.5);
  padding-left: 1%;
  padding-right: 1%;
}
.headerNavbar {
  display: flex;
}
.headerNavbar-TituloPrincipal {
  font-family: "Montagu Slab", serif;
  font-variant-caps: small-caps;
  text-align: center;
  transition: scale 0.15s;
}
.headerNavbar-TituloPrincipal--Titulo {
  font-weight: bolder;
}
.headerNavbar-TituloPrincipal--Titulo:hover {
  scale: 1.025;
}
.headerNavbar-TituloPrincipal--Titulo:active {
  scale: 0.975;
}
.headerNavbar-TituloPrincipal--Slogan {
  font-style: italic;
}
.headerNavbar-List {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  width: 100%;
}
.headerNavbar-List .nav-item {
  transition-property: font-size, font-weight, scale;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-delay: 0s;
}
.headerNavbar-List .nav-item:hover {
  font-weight: 900;
}
.headerNavbar-List .nav-item .nav-link.active {
  font-weight: bold;
}
.header:not(.headerIndex) {
  position: sticky;
}
.headerIndex {
  position: fixed;
}

/* REGLAS @MEDIA */
/* MOBILE - upper breakpoint: 575.98px, breakpoint 'sm' de Bootstrap (originalmente 428px, ancho de pantalla de iPhone 12/13 Pro Max) - */
@media only screen and (width <= 575.98px) {
  /* Abreviación de @media only screen and (max-width: 575.98px) { */
  /* HEADER */
  .header {
    flex-direction: column;
  }
  .headerNavbar-TituloPrincipal--Titulo {
    font-size: 7.5vw;
  }
  .headerNavbar-TituloPrincipal--Slogan {
    font-size: 4vw;
  }
  .headerNavbar-List {
    justify-content: space-around;
    margin-bottom: 8px;
    width: 100%;
  }
  .headerNavbar-List .nav-item {
    font-size: 5.5vw;
  }
  .headerNavbar-List .nav-item:hover {
    font-size: 6vw;
  }
  .headerNavbar-List .nav-item:active {
    font-size: 5vw;
  }
  .headerNavbar-List .nav-item:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  }
}
/* TABLET - upper breakpoint: 834.98px (iPad Pro, versión de 11 pulgadas) - */
@media only screen and (575.98px <= width <= 834.98px) {
  /* Abreviación de @media only screen and (min-width: 575.98px) and (max-width: 834.98px) { */
  /* HEADER */
  .header {
    padding-top: 1%;
    padding-bottom: 1%;
  }
  .headerNavbar-TituloPrincipal {
    margin-bottom: 0;
  }
  .headerNavbar-TituloPrincipal--Titulo {
    font-size: 4vw;
  }
  .headerNavbar-TituloPrincipal--Slogan {
    font-size: 1.8vw;
    width: 35%;
  }
  .headerNavbar-List {
    justify-content: center;
    margin-bottom: 0;
    width: 50%;
  }
  .headerNavbar-List .nav-item {
    font-size: 2.4vw;
    margin: 0;
  }
  .headerNavbar-List .nav-item:active {
    scale: 0.9;
  }
  .headerNavbar-List .nav-item .nav-link {
    padding-top: 0;
    padding-bottom: 0;
  }
}
/* DESKTOP */
@media only screen and (834.98px <= width) {
  /* Abreviación de @media only screen and (min-width: 834.98px) { */
  /* HEADER */
  .headerNavbar-TituloPrincipal--Titulo {
    font-size: 3.5vw;
  }
  .headerNavbar-TituloPrincipal--Slogan {
    font-size: 2vw;
    width: 35%;
  }
  .headerNavbar-List {
    justify-content: center;
    margin-bottom: 0;
    width: 60%;
  }
  .headerNavbar-List .nav-item {
    font-size: 1.7vw;
  }
  .headerNavbar-List .nav-item:active {
    scale: 0.9;
  }
}
/* FOOTER */
.footer a {
  color: white;
  text-decoration: none;
}
.footerNavzone {
  background-color: rgb(62, 0, 143);
  border-radius: 25px;
  display: grid;
  gap: 5vw;
  padding: 5vw;
}
.footerNavzone-Boxes {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footerNavzone-Boxes--ImgLinks {
  border-radius: 25px;
  box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.5);
  transition-property: box-shadow, scale;
  transition-duration: 0.25s;
  transition-timing-function: ease;
  transition-delay: 0s;
}
.footerNavzone-Boxes--ImgLinks:hover {
  box-shadow: 8px 8px 8px 8px rgba(0, 0, 0, 0.5);
  scale: 1.025;
}
.footerNavzone-Boxes--ImgLinks:active {
  scale: 0.975;
}
.footerNavzone-Boxes--ImgLinks img {
  border-radius: 25px;
  max-width: 100%;
  height: 100%;
}
.footerNavzone-Boxes--TxtLinks {
  background-color: black;
  border-radius: 25px;
  margin-top: 1.5%;
  padding: 15px;
  box-shadow: 1.5px 1.5px 1.5px 1.5px rgba(0, 0, 0, 0.5);
  transition-property: box-shadow, color, font-weight, scale;
  transition-duration: 0.25s;
  transition-timing-function: ease;
  transition-delay: 0s;
}
.footerNavzone-Boxes--TxtLinks:hover {
  box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.5);
  color: rgb(62, 0, 143);
  font-weight: bolder;
  scale: 1.05;
}
.footerNavzone-Boxes--TxtLinks:active {
  scale: 0.95;
}
.footerNavzone-Bis--Box {
  grid-area: bis;
}
.footerNavzone-Wack--Box {
  grid-area: wack;
  /* Lo que sigue es un arreglo algo 'hacky' ('a lo bruto') de la propiedad 'height', pero es para salir del paso y que las dos imágenes (BiS y WACK) queden similares en alto; es una solución rápida al problema de que la imagen de WACK salió casi 40px (en escritorio) más pequeña que la de BiS (su contigua a la izquierda). height: 88.61% */
}
.footerNavzone-Wack--Box---ImgLink {
  height: 88.61%;
  background-color: white;
}
.footerNavzone-OtrosGrupos--Box {
  grid-area: otrosGrupos;
}
.footerNavzone-OtrosGrupos--Box---ImgLink {
  background-color: rgba(0, 0, 0, 0.5);
  display: grid;
  grid-template-areas: "bisBikini			bellringPlaya" "babymetalFuego	atarashiiGakkoFormacion";
}
.footerNavzone-OtrosGrupos--Box---ImgLink #OtrosGruposImg-bisBikini {
  grid-area: bisBikini;
}
.footerNavzone-OtrosGrupos--Box---ImgLink #OtrosGruposImg-bellringPlaya {
  grid-area: bellringPlaya;
}
.footerNavzone-OtrosGrupos--Box---ImgLink #OtrosGruposImg-babymetalFuego {
  grid-area: babymetalFuego;
}
.footerNavzone-OtrosGrupos--Box---ImgLink #OtrosGruposImg-atarashiiGakkoFormacion {
  grid-area: atarashiiGakkoFormacion;
}
.footerNavzone-Quiz--Box {
  grid-area: quiz;
}
.footerNavzone-Quiz--Box---ImgLink {
  width: 100%;
  display: flex;
  justify-content: center;
  /* Lo siguiente es para que la imagen en cuestión no quede gigante y se encasille en su celda grid (es la única imagen cuadrada en todo el Navzone). width: 56.25% */
}
.footerNavzone-Quiz--Box---ImgLink img {
  width: 56.25%;
}
.footerDatosPersonales {
  display: grid;
}
.footerDatosPersonales-Texto {
  grid-area: textoDP;
}
.footerDatosPersonales-Texto--Curiosidades[id] {
  list-style: disc;
}
.footerDatosPersonales-Texto--EmailYUbicacion {
  font-style: italic;
}
.footerDatosPersonales-Texto--EmailYUbicacion #emailAddress {
  animation: parpadeo 1s ease-in-out infinite alternate;
}
@keyframes parpadeo {
  from {
    font-weight: lighter;
  }
  to {
    font-weight: bolder;
  }
}
.footerDatosPersonales-Texto--EmailYUbicacion #emailAddress::after {
  content: " Dirección de e-mail: dvillarroela@pm.me";
  vertical-align: middle;
  transition: font-size 0.5s;
  font-size: 0px;
}
.footerDatosPersonales-FotoPersonal {
  grid-area: fotoDP;
  max-width: 100%;
  border-radius: 250px;
}
.footerDatosPersonales-IconosSociales {
  grid-area: socialDP;
  display: flex;
  justify-content: space-around;
}
.footerDatosPersonales-IconosSociales--Links---Logos {
  max-width: 100%;
  transition: scale 0.25s;
}
.footerDatosPersonales-IconosSociales--Links---Logos:hover {
  scale: 1.1;
}
.footerDatosPersonales-IconosSociales--Links---Logos:active {
  scale: 0.95;
}
.footerDerechos {
  background-color: rgb(62, 0, 143);
  border-radius: 25px;
  display: block;
  padding: 0.5% 7.5%;
  text-align: center;
}
.footer #goToTopBox {
  position: fixed;
  inset: auto 10px 10px auto;
  z-index: 10;
  transform-origin: bottom right;
  transition-property: filter, scale;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-delay: 0s;
}
.footer #goToTopBox:hover {
  filter: invert(1);
  scale: 1.25;
}
.footer #goToTopBox-Link--Img {
  animation: rotacion 4s linear infinite alternate;
}
@keyframes rotacion {
  from {
    rotate: y 0deg;
  }
  to {
    rotate: y 180deg;
  }
}
.footerIndex {
  background: linear-gradient(90deg, rgb(62, 0, 143), black, rgb(62, 0, 143));
}

/* REGLAS @MEDIA */
/* MOBILE - upper breakpoint: 575.98px, breakpoint 'sm' de Bootstrap (originalmente 428px, ancho de pantalla de iPhone 12/13 Pro Max) - */
@media only screen and (width <= 575.98px) {
  /* Abreviación de @media only screen and (max-width: 575.98px) { */
  /* FOOTER */
  .footerNavzone {
    grid-template-areas: "bis" "wack" "otrosGrupos" "quiz";
  }
  .footerNavzone-Wack--Box---ImgLink img {
    width: 100vw;
  }
  .footerDatosPersonales {
    grid-template-areas: "textoDP	textoDP" "fotoDP		socialDP";
    grid-template-columns: 1fr 1fr;
    row-gap: 25px;
    margin: 7.5% 5%;
  }
  .footerDatosPersonales-Texto {
    font-size: 4vw;
  }
  .footerDatosPersonales-Texto--EmailYUbicacion #emailAddress:hover::after {
    font-size: 2.3vw;
  }
  .footerDatosPersonales-FotoPersonal {
    margin-left: 5vw;
    width: 100%;
  }
  .footerDatosPersonales-IconosSociales {
    flex-direction: column;
    align-items: center;
    margin-left: 5vw;
  }
  .footerDatosPersonales-IconosSociales--Links {
    width: 40%;
  }
  .footer #goToTopBox {
    width: 15vw;
  }
}
/* TABLET - upper breakpoint: 834.98px (iPad Pro, versión de 11 pulgadas) - */
@media only screen and (575.98px <= width <= 834.98px) {
  /* Abreviación de @media only screen and (min-width: 575.98px) and (max-width: 834.98px) { */
  /* FOOTER */
  .footerNavzone {
    grid-template-areas: "bis					wack" "otrosGrupos	quiz";
  }
  .footerNavzone-Wack--Box---ImgLink img {
    width: 50vw;
  }
  .footerDatosPersonales {
    grid-template-areas: "textoDP	fotoDP" "textoDP	socialDP";
    grid-template-columns: 3.5fr 1.5fr;
    grid-template-rows: 2fr 1fr;
    align-items: center;
    column-gap: 75px;
    margin: 2% 5%;
  }
  .footerDatosPersonales-Texto {
    /* font-size: calc(0.5px + 2.5vw), la solución que se me ocurrió para que el texto sea medianamente responsive */
    font-size: calc(0.5px + 2.5vw);
  }
  .footerDatosPersonales-Texto--EmailYUbicacion #emailAddress:hover::after {
    font-size: 1.5vw;
  }
  .footerDatosPersonales-IconosSociales--Links {
    width: 40%;
  }
  .footer #goToTopBox {
    width: 7.5vw;
  }
}
/* DESKTOP */
@media only screen and (834.98px <= width) {
  /* Abreviación de @media only screen and (min-width: 834.98px) { */
  /* FOOTER */
  .footerNavzone {
    grid-template-areas: "bis					wack" "otrosGrupos	quiz";
  }
  .footerNavzone-Boxes--TxtLinks {
    font-size: calc(15px + 1vw);
  }
  .footerNavzone-Wack--Box---ImgLink img {
    width: 50vw;
  }
  .footerDatosPersonales {
    grid-template-areas: "textoDP	fotoDP" "textoDP	socialDP";
    grid-template-columns: 4fr 1fr;
    grid-template-rows: 2fr 1fr;
    align-items: center;
    column-gap: 100px;
    margin: 2% 5%;
  }
  .footerDatosPersonales-Texto {
    /* font-size: 2vw, la solución que se me ocurrió para que el texto sea medianamente responsive */
    font-size: 2vw;
  }
  .footerDatosPersonales-Texto--EmailYUbicacion #emailAddress:hover::after {
    font-size: 1.5vw;
  }
  .footerDatosPersonales-IconosSociales--Links {
    width: 37.5%;
  }
  .footer #goToTopBox {
    width: 5vw;
  }
}
/* PORTADA - index.html */
.portadaIndex {
  position: relative;
}
.portadaIndex-Screenshot {
  display: none;
  position: fixed;
  width: 100%;
  z-index: -11;
}
.portadaIndex-Video {
  position: fixed;
  width: 100%;
  z-index: -10;
}
.portadaIndex-Logo {
  filter: invert(1);
  inset: calc(6vw + 9vh) auto auto 3vw;
  position: fixed;
  width: 10vw;
  z-index: -9;
}

/* MAIN - index.html */
.mainIndex {
  background: linear-gradient(90deg, rgb(62, 0, 143), black, rgb(62, 0, 143));
  border-radius: 25px 25px 0 0;
}
.mainIndex-TextoLlamativo--Bienvenida, .mainIndex-TextoLlamativo--Solucion {
  background-color: rgb(62, 0, 143);
  border-radius: 25px;
  font: small-caps bold 100% "Montagu Slab", serif;
  letter-spacing: 0.1vw;
  text-align: center;
  box-shadow: 1.5px 1.5px 1.5px 1.5px rgba(0, 0, 0, 0.5);
}
.mainIndex-TextoLlamativo--Problema, .mainIndex-TextoLlamativo--Esperanza {
  font-size: calc(11px + 1vw);
  text-align: center;
}
.mainIndex-TextoLlamativo--DefinicionAltIdol {
  font-size: calc(11px + 1vw);
}
.mainIndex-TextoLlamativo--DefinicionAltIdol #dfnAlt,
.mainIndex-TextoLlamativo--DefinicionAltIdol #dfnAnti {
  font-family: "Montagu Slab", serif;
}
.mainIndex-VideoGrid {
  display: grid;
  gap: 3%;
}
.mainIndex-VideoGrid iframe {
  width: 100%;
}
.mainIndex-VideoGrid iframe#bis-Video {
  grid-area: bis-Video;
}
.mainIndex-VideoGrid iframe#bellring-Video {
  grid-area: bellring-Video;
}
.mainIndex-VideoGrid iframe#babymetal-Video {
  grid-area: babymetal-Video;
}
.mainIndex-VideoGrid iframe#atarashii-Video {
  grid-area: atarashii-Video;
}

/* REGLAS @MEDIA */
/* PREFIERE REDUCCIÓN DE MOVIMIENTO (para desactivar el video hero de index.html, y mostrar un screenshot del mismo en su lugar) */
@media only screen and (prefers-reduced-motion: reduce) {
  .portadaIndex-Screenshot {
    display: initial;
  }
  .portadaIndex-Video {
    display: none;
  }
}
/* MOBILE - upper breakpoint: 575.98px, breakpoint 'sm' de Bootstrap (originalmente 428px, ancho de pantalla de iPhone 12/13 Pro Max) - */
@media only screen and (width <= 575.98px) {
  /* Abreviación de @media only screen and (max-width: 575.98px) { */
  /* PORTADA - index.html */
  .portadaIndex {
    height: 60vw;
  }
  .portadaIndex-Screenshot, .portadaIndex-Video {
    top: 12.5vw;
  }
  /* MAIN - index.html */
  .mainIndex-TextoLlamativo--TextoConFondo, .mainIndex-TextoLlamativo--Bienvenida, .mainIndex-TextoLlamativo--Solucion {
    padding: 12.5px;
    margin-top: 4%;
    margin-bottom: 4%;
  }
  .mainIndex-TextoLlamativo--Bienvenida {
    font-size: calc(0.9em + 1vw);
  }
  .mainIndex-VideoGrid {
    grid-template-areas: "bis-Video" "bellring-Video" "babymetal-Video" "atarashii-Video";
    /* Curiosamente, en mobile este Grid Container se ve parcialmente cubierto por el siguiente (.footerNavzone tapa parte del último video de .mainIndex-VideoGrid), así que la solución que se me ocurrió fue ponerle estos PADDINGS VERTICALES que encontré aceptables para resolver el problema de la forma más armónica posible Y A LA VEZ TAPAR EL ESPACIO DESCUBIERTO Y QUE EL VIDEO HERO NO SE VEA DONDE NO DEBE (razón por la cual unos MARGINS VERTICALES no habrían resuelto el problema): */
    padding-top: 5%;
    padding-bottom: 35%;
    /* Ajuste necesario para que los iframes de YouTube, siendo responsive, sigan manteniendo su PROPORCIÓN de tamaño:  */
  }
  .mainIndex-VideoGrid iframe {
    height: calc(50px + 50vw);
  }
}
/* TABLET - upper breakpoint: 834.98px (iPad Pro, versión de 11 pulgadas) - */
@media only screen and (575.98px <= width <= 834.98px) {
  /* Abreviación de @media only screen and (min-width: 575.98px) and (max-width: 834.98px) { */
  /* PORTADA - index.html */
  .portadaIndex {
    height: 55vw;
  }
  .portadaIndex-Screenshot, .portadaIndex-Video {
    top: 7%;
  }
  /* MAIN - index.html */
  .mainIndex-TextoLlamativo--TextoConFondo, .mainIndex-TextoLlamativo--Bienvenida, .mainIndex-TextoLlamativo--Solucion {
    padding: 1% 3%;
    margin-top: 1.5%;
    margin-bottom: 1.5%;
  }
  .mainIndex-TextoLlamativo--Bienvenida {
    font-size: calc(4px + 2.5vw);
  }
  .mainIndex-TextoLlamativo--Solucion {
    font-size: calc(1rem + 0.5vw);
  }
  .mainIndex-VideoGrid {
    grid-template-areas: "bis-Video				bellring-Video" "babymetal-Video	atarashii-Video";
    padding-bottom: 5vw;
    /* Ajuste necesario para que los iframes de YouTube, siendo responsive, sigan manteniendo su PROPORCIÓN de tamaño:  */
  }
  .mainIndex-VideoGrid iframe {
    height: 25vw;
  }
}
/* DESKTOP */
@media only screen and (834.98px <= width) {
  /* Abreviación de @media only screen and (min-width: 834.98px) { */
  /* PORTADA - index.html */
  .portadaIndex {
    height: 40vw;
  }
  .portadaIndex-Screenshot, .portadaIndex-Video {
    top: 10%;
  }
  /* MAIN - index.html */
  .mainIndex-TextoLlamativo--TextoConFondo, .mainIndex-TextoLlamativo--Bienvenida, .mainIndex-TextoLlamativo--Solucion {
    padding: 1% 3%;
    margin-top: 1.5%;
    margin-bottom: 1.5%;
  }
  .mainIndex-TextoLlamativo--Solucion {
    font-size: calc(1rem + 0.5vw);
  }
  .mainIndex-VideoGrid {
    grid-template-areas: "bis-Video				bellring-Video" "babymetal-Video	atarashii-Video";
    padding-bottom: 5vw;
    /* Ajuste necesario para que todos los iframes de YouTube, siendo responsive, sigan manteniendo su PROPORCIÓN de tamaño:  */
  }
  .mainIndex-VideoGrid iframe {
    height: 25vw;
  }
}
/* PORTADA - bis.html */
.portadaBis .carousel-item img {
  border-radius: 25px;
  height: 100%;
}
.portadaBis .carousel-item .carousel-caption h5,
.portadaBis .carousel-item .carousel-caption p {
  background-color: rgba(62, 0, 143, 0.5);
  border-radius: 25px;
  opacity: 0;
  padding: 2%;
  transition: opacity 0.5s;
}
.portadaBis .carousel-item .carousel-caption:hover h5,
.portadaBis .carousel-item .carousel-caption:hover p {
  opacity: 1;
}
.portadaBis .carousel-control-icons, .portadaBis .carousel-control-next-icon, .portadaBis .carousel-control-prev-icon {
  /* ***ALARMA: importante***: LA RUTA CORRECTA ES "../icons/flecha-Arriba.avif"...DA IGUAL LO QUE VS CODE, LIVE SERVER O (LO MÁS IMPORTANTE) _bis.scss DIGAN...LO ÚNICO CORRECTO ES LA RUTA DESDE EL PUNTO DE VISTA DE bis.HTML, O MEJOR DICHO, DE STYLE.CSS YA QUE ESE SERÁ EL ARCHIVO QUE RECUPERARÁ LA IMAGEN (no importa si la ruta se autocompleta o no). */
  background-image: url("../icons/flecha-Arriba.avif");
  transition-property: filter, scale;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-delay: 0s;
}
.portadaBis .carousel-control-icons:hover, .portadaBis .carousel-control-next-icon:hover, .portadaBis .carousel-control-prev-icon:hover {
  filter: invert(1);
  scale: 1.5;
}
.portadaBis .carousel-control-prev-icon {
  rotate: -90deg;
}
.portadaBis .carousel-control-next-icon {
  rotate: 90deg;
}
.portadaBis .carousel-indicators button {
  background-color: rgb(62, 0, 143);
  opacity: 0.5;
  transition-property: opacity, scale;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-delay: 0s;
}
.portadaBis .carousel-indicators button:hover, .portadaBis .carousel-indicators button.active {
  scale: 1 2;
}
.portadaBis .carousel-indicators button.active {
  opacity: 1;
}

/* MAIN - bis.html */
.mainBis-Articulo--Canciones---Videos {
  width: 100%;
}
.mainBis-Articulo--Presente ul {
  list-style: square;
}

/* REGLAS @MEDIA */
/* MOBILE - upper breakpoint: 575.98px, breakpoint 'sm' de Bootstrap (originalmente 428px, ancho de pantalla de iPhone 12/13 Pro Max) - */
@media only screen and (width <= 575.98px) {
  /* Abreviación de @media only screen and (max-width: 575.98px) { */
  /* PORTADA - bis.html */
  .portadaBis {
    padding: 0;
  }
  .portadaBis .carousel-item {
    height: 65vw;
  }
  .portadaBis .carousel-item .carousel-caption * {
    font-size: calc(1px + 2vw);
  }
  /* MAIN - bis.html */
  .mainBis-Articulo--Canciones---Videos {
    height: 50vw;
  }
}
/* TABLET - upper breakpoint: 834.98px (iPad Pro, versión de 11 pulgadas) - */
@media only screen and (575.98px <= width <= 834.98px) {
  /* Abreviación de @media only screen and (min-width: 575.98px) and (max-width: 834.98px) { */
  /* PORTADA - bis.html */
  .portadaBis {
    padding-left: 10%;
    padding-right: 10%;
  }
  .portadaBis .carousel-item {
    height: 55vw;
  }
  .portadaBis .carousel-item .carousel-caption * {
    font-size: calc(1px + 1.8vw);
  }
  /* MAIN - bis.html */
  .mainBis-Articulo--Canciones---Videos {
    height: 50vw;
  }
}
/* DESKTOP */
@media only screen and (834.98px <= width) {
  /* Abreviación de @media only screen and (min-width: 834.98px) { */
  /* PORTADA - bis.html */
  .portadaBis {
    padding-left: 27.5%;
    padding-right: 27.5%;
  }
  .portadaBis .carousel-item {
    height: 30vw;
  }
  .portadaBis .carousel-item .carousel-caption * {
    font-size: calc(3px + 1vw);
  }
  /* MAIN - bis.html */
  .mainBis-Articulo--Canciones---Videos {
    height: 30vw;
    padding-left: 20%;
    padding-right: 20%;
  }
}
/* MAIN - wack.html */
.mainWack-Articulo--Grupos {
  display: grid;
  grid-template-areas: "titulo" "asp" "exwhyz" "gang-parade" "bis3" "bish";
}
.mainWack-Articulo--Grupos---Titulo {
  grid-area: titulo;
}
.mainWack-Articulo--Grupos #cinco-grupos-de-wack_asp {
  grid-area: asp;
}
.mainWack-Articulo--Grupos #cinco-grupos-de-wack_exwhyz {
  grid-area: exwhyz;
}
.mainWack-Articulo--Grupos #cinco-grupos-de-wack_gang-parade {
  grid-area: gang-parade;
}
.mainWack-Articulo--Grupos #cinco-grupos-de-wack_bis3 {
  grid-area: bis3;
}
.mainWack-Articulo--Grupos #cinco-grupos-de-wack_bish {
  grid-area: bish;
}
.mainWack-Articulo--Grupos---VideoFlexBoxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 1vw;
}

/* REGLAS @MEDIA */
/* MOBILE - upper breakpoint: 575.98px, breakpoint 'sm' de Bootstrap (originalmente 428px, ancho de pantalla de iPhone 12/13 Pro Max) - */
@media only screen and (width <= 575.98px) {
  /* Abreviación de @media only screen and (max-width: 575.98px) { */
  /* PORTADA - wack.html */
  .portadaWack-Icono {
    width: 100%;
  }
  /* MAIN - wack.html */
  .mainWack-Articulo--Grupos {
    margin-top: 4.5vw;
    margin-bottom: 9vw;
  }
  .mainWack-Articulo--Grupos iframe {
    height: calc(50px + 50vw);
    width: 100%;
  }
}
/* TABLET - upper breakpoint: 834.98px (iPad Pro, versión de 11 pulgadas) - */
@media only screen and (575.98px <= width <= 834.98px) {
  /* Abreviación de @media only screen and (min-width: 575.98px) and (max-width: 834.98px) { */
  /* PORTADA - wack.html */
  .portadaWack-Icono {
    width: 75%;
  }
  /* MAIN - wack.html */
  .mainWack-Articulo--Grupos {
    margin-top: 6vw;
    margin-bottom: 6vw;
  }
  .mainWack-Articulo--Grupos iframe {
    height: 25vw;
    width: 43vw;
  }
}
/* DESKTOP */
@media only screen and (834.98px <= width) {
  /* Abreviación de @media only screen and (min-width: 834.98px) { */
  /* PORTADA - wack.html */
  .portadaWack-Icono {
    width: 50%;
  }
  /* MAIN - wack.html */
  .mainWack-Articulo--Grupos {
    margin-top: 3vw;
    margin-bottom: 3vw;
  }
  .mainWack-Articulo--Grupos iframe {
    height: 25vw;
    width: 43vw;
  }
}
/* PORTADA - otrosGrupos.html */
.portadaOtrosGrupos {
  margin-left: auto;
  margin-right: auto;
}
.portadaOtrosGrupos img {
  padding: 0;
}

/* MAIN - otrosGrupos.html */
.mainOtrosGrupos-VideoFlexBox {
  row-gap: 2vw;
  margin-top: 6.25vw;
  margin-bottom: 6.25vw;
}

/* REGLAS @MEDIA */
/* MOBILE - upper breakpoint: 575.98px, breakpoint 'sm' de Bootstrap (originalmente 428px, ancho de pantalla de iPhone 12/13 Pro Max) - */
@media only screen and (width <= 575.98px) {
  /* Abreviación de @media only screen and (max-width: 575.98px) { */
  /* PORTADA - otrosGrupos.html */
  .portadaOtrosGrupos {
    width: 100%;
  }
  /* MAIN - otrosGrupos.html */
  .mainOtrosGrupos-VideoFlexBox iframe {
    height: calc(50px + 50vw);
    width: 100%;
  }
}
/* TABLET - upper breakpoint: 834.98px (iPad Pro, versión de 11 pulgadas) - */
@media only screen and (575.98px <= width <= 834.98px) {
  /* Abreviación de @media only screen and (min-width: 575.98px) and (max-width: 834.98px) { */
  /* PORTADA - otrosGrupos.html */
  .portadaOtrosGrupos {
    width: 75%;
  }
  /* MAIN - otrosGrupos.html */
  .mainOtrosGrupos-VideoFlexBox iframe {
    height: 25vw;
    width: 50%;
  }
}
/* DESKTOP */
@media only screen and (834.98px <= width) {
  /* Abreviación de @media only screen and (min-width: 834.98px) { */
  /* PORTADA - otrosGrupos.html */
  .portadaOtrosGrupos {
    width: 50%;
  }
  /* MAIN - otrosGrupos.html */
  .mainOtrosGrupos-VideoFlexBox iframe {
    height: 25vw;
    width: 50%;
  }
}
:root {
  --icono-Correcto: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%2375b798" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>');
  --icono-Incorrecto: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ea868f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>');
}

/* PORTADA - quiz.html */
.portadaQuiz-Icono {
  filter: invert(1);
}

/* MAIN - quiz.html */
.mainQuiz-Form .valid-feedback,
.mainQuiz-Form .invalid-feedback {
  text-align: start;
}
.mainQuiz-Form #bisLegendaria-Legend,
.mainQuiz-Form #wackImpostoras-Legend {
  font-size: calc(0.7rem + 1vw);
}
.mainQuiz-Form #submitBox {
  margin-top: 25px;
  margin-bottom: 25px;
}
.mainQuiz-Form #submitBox-Button {
  background-color: rgb(62, 0, 143);
  font-family: "Montagu Slab", serif;
  font-variant-caps: small-caps;
  transition-property: color, font-weight, scale;
  transition-duration: 0.25s;
  transition-timing-function: ease;
  transition-delay: 0s;
}
.mainQuiz-Form #submitBox-Button:hover {
  color: black;
  font-weight: bold;
  scale: 1.05;
}
.mainQuiz-Form #submitBox-Button:active {
  scale: 0.95;
}
.mainQuiz .form-control.is-valid,
.mainQuiz .was-validated .form-control:valid {
  background-image: var(--icono-Correcto);
}
.mainQuiz .form-select.is-valid:not([multiple]):not([size]), .mainQuiz .form-select.is-valid:not([multiple])[size="1"],
.mainQuiz .was-validated .form-select:valid:not([multiple]):not([size]),
.mainQuiz .was-validated .form-select:valid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: var(--icono-Correcto);
}
.mainQuiz .form-control.is-invalid,
.mainQuiz .was-validated .form-control:invalid {
  background-image: var(--icono-Incorrecto);
}
.mainQuiz .form-select.is-invalid:not([multiple]):not([size]), .mainQuiz .form-select.is-invalid:not([multiple])[size="1"],
.mainQuiz .was-validated .form-select:invalid:not([multiple]):not([size]),
.mainQuiz .was-validated .form-select:invalid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: var(--icono-Incorrecto);
}

/* REGLAS @MEDIA */
/* MOBILE - upper breakpoint: 575.98px, breakpoint 'sm' de Bootstrap (originalmente 428px, ancho de pantalla de iPhone 12/13 Pro Max) - */
@media only screen and (width <= 575.98px) {
  /* Abreviación de @media only screen and (max-width: 575.98px) { */
  /* PORTADA - quiz.html */
  .portadaQuiz-Icono {
    width: 50%;
  }
}
/* TABLET - upper breakpoint: 834.98px (iPad Pro, versión de 11 pulgadas) - */
@media only screen and (575.98px <= width <= 834.98px) {
  /* Abreviación de @media only screen and (min-width: 575.98px) and (max-width: 834.98px) { */
  /* PORTADA - quiz.html */
  .portadaQuiz-Icono {
    width: 25%;
  }
}
/* DESKTOP */
@media only screen and (834.98px <= width) {
  /* Abreviación de @media only screen and (min-width: 834.98px) { */
  /* PORTADA - quiz.html */
  .portadaQuiz-Icono {
    width: 25%;
  }
}

/*# sourceMappingURL=style.css.map */