@charset "UTF-8";
/*Estilos globales*/
* {
  margin: 0rem;
  padding: 0rem;
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  scroll-behavior: smooth; }

body {
  overflow-x: hidden;
  background-color: black; }

/* PARTIALS */
/* CLASES GENÉRICAS */
.sombra {
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  width: 100%; }

.orden {
  display: flex;
  flex-flow: row wrap; }

.botones {
  height: 2rem;
  background-color: #dddddd;
  color: #222222;
  margin: auto;
  border: none;
  border-radius: 1rem;
  padding: 0 1rem;
  cursor: pointer; }

.botones:hover {
  background-color: #ff684e;
  color: #222222; }

/* BARRA NAVEGACIÓN */
#navbar {
  display: grid;
  grid-template-areas: "logo enlaces botones";
  grid-template-rows: 5rem;
  grid-template-columns: 18rem auto 14rem;
  position: fixed;
  top: 0rem;
  width: 100vw;
  z-index: 5;
  /* LOGO */
  /* ENLACES */
  /* BOTONES */ }
  #navbar #logo {
    grid-area: logo;
    margin: auto;
    margin-left: 4rem; }
    #navbar #logo a {
      color: transparent;
      font-weight: 900;
      font-size: 2rem;
      position: relative;
      width: 5rem;
      background-image: url(../media/backgrounds/background_17.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      transition: background-position 1s ease-in-out;
      background-position: -250px 0%;
      background-clip: text;
      -webkit-background-clip: text; }
    #navbar #logo a:hover {
      background-position: 0% 0%; }
  #navbar #enlaces {
    grid-area: enlaces;
    margin: auto;
    margin-top: 1.8rem; }
    #navbar #enlaces a {
      position: relative;
      color: #dddddd;
      margin-right: 2rem;
      font-weight: 300;
      padding-bottom: 0.5rem; }
    #navbar #enlaces a::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      right: 100%;
      height: 3px;
      opacity: 0;
      background-color: #dddddd; }
    #navbar #enlaces a:hover::before {
      transition: 0.5s all ease-in-out;
      left: 0;
      right: 0;
      opacity: 1;
      z-index: -1; }
    #navbar #enlaces .active {
      color: #ff684e;
      font-weight: 600; }
  #navbar #botones {
    grid-area: botones;
    margin: auto;
    margin-right: 6rem;
    align-items: center; }
    #navbar #botones div i {
      font-size: 1.5rem;
      color: #ffffff;
      margin: 0.5rem;
      cursor: pointer; }
    #navbar #botones div i:hover {
      color: #ff684e; }
    #navbar #botones .check {
      position: relative;
      width: 2rem;
      margin-bottom: 1rem;
      margin-left: 0.5rem;
      margin-right: 1.5rem;
      cursor: pointer; }
    #navbar #botones .check:hover::before {
      transition: 0.5s;
      background-color: rgba(39, 39, 39, 0.9); }
    #navbar #botones .check::before {
      content: '';
      position: absolute;
      width: 3rem;
      height: 1.5rem;
      background-color: #dddddd;
      border-radius: 1.5rem; }
    #navbar #botones .check:checked::before {
      background: #ff684e; }
    #navbar #botones .check::after {
      content: "ES";
      padding-left: 0.15rem;
      font-weight: 500;
      position: absolute;
      font-size: 0.75rem;
      width: 1.5rem;
      height: 1.5rem;
      background-color: #ffffff;
      border-radius: 1rem;
      border: 2px solid #dddddd;
      box-sizing: border-box; }
    #navbar #botones .check:checked::after {
      left: 1.5rem;
      border: 2px solid #ff684e;
      content: 'EN'; }

/* PRINCIPAL */
#principal {
  display: grid;
  grid-template-areas: "portada" "arriba" "recomendar" "categorias" "lista" "aportes" "footer";
  grid-template-rows: 100vh 0rem 100vh 100vh 100vh 100vh 100vh;
  grid-template-columns: 1fr; }
  #principal #portada {
    grid-area: portada; }
    #principal #portada .sombra {
      overflow: hidden;
      background-color: rgba(0, 0, 0, 0.1); }
      #principal #portada .sombra #trailer {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        position: relative;
        display: flex; }
      #principal #portada .sombra video {
        width: 100vw;
        height: 140vh;
        object-fit: cover;
        left: 0;
        right: 0;
        top: -10vh;
        bottom: 0;
        position: relative;
        margin: auto;
        margin-top: -10vh;
        /* margin-top: -10%;
            margin-left: -10%; */
        /* width: 120%;
            height: auto; */
        z-index: -4; }
      #principal #portada .sombra .titular {
        padding: 6rem 6rem 2rem 4rem;
        width: 100%; }
      #principal #portada .sombra h1 {
        margin: 1rem 0rem;
        padding: 0.2rem 1rem;
        width: fit-content;
        position: relative;
        font-size: 3rem;
        font-weight: 200;
        color: #ffffff;
        font-style: italic;
        text-shadow: 0 0 1rem #ff684e, 0 0 0.2rem #ff684e;
        line-height: 1.2;
        z-index: 1; }
        #principal #portada .sombra h1 span {
          color: #ffffff;
          font-weight: 700; }
      #principal #portada .sombra h1::before {
        content: '';
        height: 100%;
        position: absolute;
        left: 0;
        background-color: rgba(255, 103, 77, 0.7);
        z-index: -1; }
      #principal #portada .sombra #one::before {
        animation: resaltador_one 1.5s;
        animation-fill-mode: forwards;
        animation-delay: 1s; }
      #principal #portada .sombra #two::before {
        animation: resaltador_one 1.5s;
        animation-fill-mode: forwards;
        animation-delay: 3s; }
      #principal #portada .sombra #three::before {
        animation: resaltador_one 1.5s;
        animation-fill-mode: forwards;
        animation-delay: 5s; }

@keyframes resaltador_one {
  from {
    width: 0%; }
  to {
    width: 100%; } }

@keyframes two {
  from {
    width: 0%; }
  to {
    width: 100%; } }

@keyframes resaltador_three {
  from {
    width: 0%; }
  to {
    width: 100%; } }
      #principal #portada .sombra .subtitular {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start; }
      #principal #portada .sombra h2 {
        padding-left: 4rem;
        font-size: 1.2rem;
        color: #ffffff;
        font-weight: 300;
        width: 100%; }
      #principal #portada .sombra button {
        height: 3rem;
        width: fit-content;
        border-radius: 2rem;
        margin: 2rem 0rem 0rem 4rem; }
        #principal #portada .sombra button a {
          color: #222222;
          font-size: 1.2rem;
          padding: 1rem 2rem; }
      #principal #portada .sombra button:hover {
        background-color: #ff684e; }
  #principal .base {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    background-image: linear-gradient(to left, rgba(104, 79, 214, 0) 0%, rgba(10, 0, 48, 0.9) 100%);
    display: flex;
    flex-flow: column nowrap;
    justify-content: center; }
  #principal .to_top {
    grid-area: arriba;
    position: sticky;
    top: 40rem;
    margin-right: 5rem;
    text-align: right;
    z-index: 2; }
    #principal .to_top i {
      color: #ff684e;
      font-size: 2rem;
      transition: all 0.5s ease-in; }
    #principal .to_top i:hover {
      transform: translateY(-1rem); }
  #principal #recomendar {
    grid-area: recomendar;
    background-image: url(../media/backgrounds/background_5.jpg);
    background-repeat: no-repeat;
    background-size: cover; }
    #principal #recomendar .sombra {
      display: grid;
      grid-template-columns: 1fr 1fr 1.2fr;
      grid-template-rows: 1fr;
      grid-template-areas: "poster datos frase"; }
      #principal #recomendar .sombra .dia {
        grid-area: poster;
        margin: auto;
        position: relative; }
        #principal #recomendar .sombra .dia #poster {
          width: auto;
          height: 30rem;
          transition: 0.3s ease-in-out; }
        #principal #recomendar .sombra .dia #poster:hover {
          transform: scale(1.025);
          transition: 0.3s ease-in-out; }
      #principal #recomendar .sombra .datos {
        grid-area: datos;
        margin: auto;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        margin-left: -3rem;
        margin-right: 2rem;
        height: 27rem; }
        #principal #recomendar .sombra .datos div #id {
          font-size: 4rem;
          color: #ffffff;
          font-weight: 600; }
        #principal #recomendar .sombra .datos div #nombre {
          font-size: 2.8rem;
          font-weight: 400;
          color: #dddddd; }
        #principal #recomendar .sombra .datos div div #director {
          font-size: 1.5rem;
          font-weight: 300;
          color: #b6b6b6;
          display: inline;
          margin-right: 1rem; }
        #principal #recomendar .sombra .datos div div #año {
          font-size: 1.5rem;
          font-weight: 300;
          color: #ffffff;
          display: inline; }
        #principal #recomendar .sombra .datos div a .logos {
          height: 1.4rem;
          margin-right: 2rem; }
        #principal #recomendar .sombra .datos div a .puntuacion {
          font-size: 1.4rem;
          font-weight: 500;
          color: #ff684e;
          text-align: center;
          margin-right: 2rem; }
      #principal #recomendar .sombra .frase {
        grid-area: frase;
        display: flex;
        flex-flow: column nowrap;
        align-items: flex-end;
        justify-content: center;
        margin: auto;
        margin-right: 6rem;
        margin-left: 1rem;
        border-right: 1px solid white;
        height: 30rem;
        padding-right: 2rem; }
        #principal #recomendar .sombra .frase h3 {
          font-size: 3rem;
          font-weight: 100;
          color: #ffffff;
          font-style: italic;
          text-shadow: 0 0 1rem #ff684e, 0 0 0.2rem #ff684e;
          line-height: 1.1;
          text-align: right; }
        #principal #recomendar .sombra .frase p {
          margin-top: 4rem;
          margin-bottom: 4rem;
          font-size: 1.2rem;
          font-weight: 200;
          color: #ffffff;
          line-height: 1.5;
          text-align: right; }
        #principal #recomendar .sombra .frase .botones {
          font-size: 1.2rem;
          font-style: italic;
          background-color: #dddddd;
          height: auto;
          padding: 0.5rem 1rem;
          border-radius: 1.5rem;
          width: 60%;
          margin: initial; }
        #principal #recomendar .sombra .frase .botones:hover {
          background-color: #ff684e;
          color: #000000; }
  #principal #categorias {
    grid-area: categorias;
    background-image: url(../media/backgrounds/background_4.jpg);
    background-repeat: no-repeat;
    background-size: cover; }
    #principal #categorias #generos {
      padding-top: 10rem;
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      grid-template-rows: 25rem; }
      #principal #categorias #generos .borde_1 {
        border: 0.25rem solid transparent;
        opacity: 0; }
        #principal #categorias #generos .borde_1 .accion {
          background-image: url(../media/genres/accion.jpg);
          background-size: cover;
          background-repeat: no-repeat;
          filter: brightness(70%) saturate(40%);
          width: 100%;
          height: 100%; }
          #principal #categorias #generos .borde_1 .accion .subtitulo {
            width: 100%;
            height: 100%;
            display: none; }
      #principal #categorias #generos .borde_1:hover {
        height: 100%;
        width: 40rem; }
        #principal #categorias #generos .borde_1:hover .accion {
          filter: brightness(100%) saturate(100%); }
        #principal #categorias #generos .borde_1:hover .subtitulo {
          position: absolute;
          display: inline;
          color: #dddddd;
          font-size: 2.5rem;
          font-weight: 600;
          text-shadow: 3px 3px 3px rgba(14, 14, 14, 0.8); }
          #principal #categorias #generos .borde_1:hover .subtitulo span {
            position: absolute;
            right: 5rem;
            bottom: 3rem; }
      #principal #categorias #generos .borde_2 {
        border: 0.25rem solid transparent;
        opacity: 0; }
        #principal #categorias #generos .borde_2 .animadas {
          background-image: url(../media/genres/animadas.jpg);
          background-size: cover;
          background-repeat: no-repeat;
          filter: brightness(70%) saturate(40%);
          width: 100%;
          height: 100%; }
          #principal #categorias #generos .borde_2 .animadas .subtitulo {
            width: 100%;
            height: 100%;
            display: none; }
      #principal #categorias #generos .borde_2:hover {
        height: 100%;
        width: 40rem; }
        #principal #categorias #generos .borde_2:hover .animadas {
          filter: brightness(100%) saturate(100%); }
        #principal #categorias #generos .borde_2:hover .subtitulo {
          position: absolute;
          display: inline;
          color: #dddddd;
          font-size: 2.5rem;
          font-weight: 600;
          text-shadow: 3px 3px 3px rgba(14, 14, 14, 0.8); }
          #principal #categorias #generos .borde_2:hover .subtitulo span {
            position: absolute;
            right: 5rem;
            bottom: 3rem; }
      #principal #categorias #generos .borde_3 {
        border: 0.25rem solid transparent;
        opacity: 0; }
        #principal #categorias #generos .borde_3 .belico {
          background-image: url(../media/genres/belico.jpg);
          background-size: cover;
          background-repeat: no-repeat;
          filter: brightness(70%) saturate(40%);
          width: 100%;
          height: 100%; }
          #principal #categorias #generos .borde_3 .belico .subtitulo {
            width: 100%;
            height: 100%;
            display: none; }
      #principal #categorias #generos .borde_3:hover {
        height: 100%;
        width: 40rem; }
        #principal #categorias #generos .borde_3:hover .belico {
          filter: brightness(100%) saturate(100%); }
        #principal #categorias #generos .borde_3:hover .subtitulo {
          position: absolute;
          display: inline;
          color: #dddddd;
          font-size: 2.5rem;
          font-weight: 600;
          text-shadow: 3px 3px 3px rgba(14, 14, 14, 0.8); }
          #principal #categorias #generos .borde_3:hover .subtitulo span {
            position: absolute;
            right: 5rem;
            bottom: 3rem; }
      #principal #categorias #generos .borde_4 {
        border: 0.25rem solid transparent;
        opacity: 0; }
        #principal #categorias #generos .borde_4 .ciencia_ficcion {
          background-image: url(../media/genres/ciencia_ficcion.jpg);
          background-size: cover;
          background-repeat: no-repeat;
          filter: brightness(70%) saturate(40%);
          width: 100%;
          height: 100%; }
          #principal #categorias #generos .borde_4 .ciencia_ficcion .subtitulo {
            width: 100%;
            height: 100%;
            display: none; }
      #principal #categorias #generos .borde_4:hover {
        height: 100%;
        width: 40rem; }
        #principal #categorias #generos .borde_4:hover .ciencia_ficcion {
          filter: brightness(100%) saturate(100%); }
        #principal #categorias #generos .borde_4:hover .subtitulo {
          position: absolute;
          display: inline;
          color: #dddddd;
          font-size: 2.5rem;
          font-weight: 600;
          text-shadow: 3px 3px 3px rgba(14, 14, 14, 0.8); }
          #principal #categorias #generos .borde_4:hover .subtitulo span {
            position: absolute;
            right: 5rem;
            bottom: 3rem; }
      #principal #categorias #generos .borde_5 {
        border: 0.25rem solid transparent;
        opacity: 0; }
        #principal #categorias #generos .borde_5 .comedia {
          background-image: url(../media/genres/comedia.jpg);
          background-size: cover;
          background-repeat: no-repeat;
          filter: brightness(70%) saturate(40%);
          width: 100%;
          height: 100%; }
          #principal #categorias #generos .borde_5 .comedia .subtitulo {
            width: 100%;
            height: 100%;
            display: none; }
      #principal #categorias #generos .borde_5:hover {
        height: 100%;
        width: 40rem; }
        #principal #categorias #generos .borde_5:hover .comedia {
          filter: brightness(100%) saturate(100%); }
        #principal #categorias #generos .borde_5:hover .subtitulo {
          position: absolute;
          display: inline;
          color: #dddddd;
          font-size: 2.5rem;
          font-weight: 600;
          text-shadow: 3px 3px 3px rgba(14, 14, 14, 0.8); }
          #principal #categorias #generos .borde_5:hover .subtitulo span {
            position: absolute;
            right: 5rem;
            bottom: 3rem; }
      #principal #categorias #generos .borde_6 {
        border: 0.25rem solid transparent;
        opacity: 0; }
        #principal #categorias #generos .borde_6 .crimen {
          background-image: url(../media/genres/crimen.jpg);
          background-size: cover;
          background-repeat: no-repeat;
          filter: brightness(70%) saturate(40%);
          width: 100%;
          height: 100%; }
          #principal #categorias #generos .borde_6 .crimen .subtitulo {
            width: 100%;
            height: 100%;
            display: none; }
      #principal #categorias #generos .borde_6:hover {
        height: 100%;
        width: 40rem; }
        #principal #categorias #generos .borde_6:hover .crimen {
          filter: brightness(100%) saturate(100%); }
        #principal #categorias #generos .borde_6:hover .subtitulo {
          position: absolute;
          display: inline;
          color: #dddddd;
          font-size: 2.5rem;
          font-weight: 600;
          text-shadow: 3px 3px 3px rgba(14, 14, 14, 0.8); }
          #principal #categorias #generos .borde_6:hover .subtitulo span {
            position: absolute;
            right: 5rem;
            bottom: 3rem; }
      #principal #categorias #generos .borde_7 {
        border: 0.25rem solid transparent;
        opacity: 0; }
        #principal #categorias #generos .borde_7 .drama {
          background-image: url(../media/genres/drama.jpg);
          background-size: cover;
          background-repeat: no-repeat;
          filter: brightness(70%) saturate(40%);
          width: 100%;
          height: 100%; }
          #principal #categorias #generos .borde_7 .drama .subtitulo {
            width: 100%;
            height: 100%;
            display: none; }
      #principal #categorias #generos .borde_7:hover {
        height: 100%;
        width: 40rem; }
        #principal #categorias #generos .borde_7:hover .drama {
          filter: brightness(100%) saturate(100%); }
        #principal #categorias #generos .borde_7:hover .subtitulo {
          position: absolute;
          display: inline;
          color: #dddddd;
          font-size: 2.5rem;
          font-weight: 600;
          text-shadow: 3px 3px 3px rgba(14, 14, 14, 0.8); }
          #principal #categorias #generos .borde_7:hover .subtitulo span {
            position: absolute;
            right: 5rem;
            bottom: 3rem; }
      #principal #categorias #generos .borde_8 {
        border: 0.25rem solid transparent;
        opacity: 0; }
        #principal #categorias #generos .borde_8 .fantasia {
          background-image: url(../media/genres/fantasia.jpg);
          background-size: cover;
          background-repeat: no-repeat;
          filter: brightness(70%) saturate(40%);
          width: 100%;
          height: 100%; }
          #principal #categorias #generos .borde_8 .fantasia .subtitulo {
            width: 100%;
            height: 100%;
            display: none; }
      #principal #categorias #generos .borde_8:hover {
        height: 100%;
        width: 40rem; }
        #principal #categorias #generos .borde_8:hover .fantasia {
          filter: brightness(100%) saturate(100%); }
        #principal #categorias #generos .borde_8:hover .subtitulo {
          position: absolute;
          display: inline;
          color: #dddddd;
          font-size: 2.5rem;
          font-weight: 600;
          text-shadow: 3px 3px 3px rgba(14, 14, 14, 0.8); }
          #principal #categorias #generos .borde_8:hover .subtitulo span {
            position: absolute;
            right: 5rem;
            bottom: 3rem; }
      #principal #categorias #generos .borde_9 {
        border: 0.25rem solid transparent;
        opacity: 0; }
        #principal #categorias #generos .borde_9 .terror {
          background-image: url(../media/genres/terror.jpg);
          background-size: cover;
          background-repeat: no-repeat;
          filter: brightness(70%) saturate(40%);
          width: 100%;
          height: 100%; }
          #principal #categorias #generos .borde_9 .terror .subtitulo {
            width: 100%;
            height: 100%;
            display: none; }
      #principal #categorias #generos .borde_9:hover {
        height: 100%;
        width: 40rem; }
        #principal #categorias #generos .borde_9:hover .terror {
          filter: brightness(100%) saturate(100%); }
        #principal #categorias #generos .borde_9:hover .subtitulo {
          position: absolute;
          display: inline;
          color: #dddddd;
          font-size: 2.5rem;
          font-weight: 600;
          text-shadow: 3px 3px 3px rgba(14, 14, 14, 0.8); }
          #principal #categorias #generos .borde_9:hover .subtitulo span {
            position: absolute;
            right: 5rem;
            bottom: 3rem; }
      #principal #categorias #generos .borde_10 {
        border: 0.25rem solid transparent;
        opacity: 0; }
        #principal #categorias #generos .borde_10 .thriller {
          background-image: url(../media/genres/thriller.jpg);
          background-size: cover;
          background-repeat: no-repeat;
          filter: brightness(70%) saturate(40%);
          width: 100%;
          height: 100%; }
          #principal #categorias #generos .borde_10 .thriller .subtitulo {
            width: 100%;
            height: 100%;
            display: none; }
      #principal #categorias #generos .borde_10:hover {
        height: 100%;
        width: 40rem; }
        #principal #categorias #generos .borde_10:hover .thriller {
          filter: brightness(100%) saturate(100%); }
        #principal #categorias #generos .borde_10:hover .subtitulo {
          position: absolute;
          display: inline;
          color: #dddddd;
          font-size: 2.5rem;
          font-weight: 600;
          text-shadow: 3px 3px 3px rgba(14, 14, 14, 0.8); }
          #principal #categorias #generos .borde_10:hover .subtitulo span {
            position: absolute;
            right: 5rem;
            bottom: 3rem; }
      #principal #categorias #generos .accion {
        background-position: 80% 0%; }
      #principal #categorias #generos .animadas {
        background-position: 65% 0%; }
      #principal #categorias #generos .belico {
        background-position: 55% 0%; }
      #principal #categorias #generos .ciencia_ficcion {
        background-position: 75% 0%; }
      #principal #categorias #generos .comedia {
        background-position: 30% 0%; }
      #principal #categorias #generos .crimen {
        background-position: 15% 0%; }
      #principal #categorias #generos .drama {
        background-position: 30% 0%; }
      #principal #categorias #generos .fantasia {
        background-position: 55% 0%; }
      #principal #categorias #generos .terror {
        background-position: 70% 0%; }
      #principal #categorias #generos .thriller {
        background-position: 40% 0%; }
    #principal #categorias .gen {
      font-size: 3rem;
      font-weight: 100;
      color: #ffffff;
      font-style: italic;
      text-shadow: 0 0 1rem #ff684e, 0 0 0.2rem #ff684e;
      line-height: 1.1;
      position: absolute;
      padding-left: 4rem;
      margin-top: 3rem;
      z-index: 3; }
  #principal .animar {
    animation-name: aparecer;
    animation-duration: 0.5s;
    animation-fill-mode: forwards; }

@keyframes aparecer {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
  #principal #lista {
    grid-area: lista;
    background-image: url(../media/backgrounds/background_3.jpg);
    background-repeat: no-repeat;
    background-size: cover; }
    #principal #lista .sombra {
      display: grid;
      grid-template-columns: 1.35fr 1fr;
      grid-template-rows: 1fr;
      grid-template-areas: "imagen promocion"; }
      #principal #lista .sombra .imagen {
        grid-area: imagen;
        margin: auto;
        perspective: 1000px; }
        #principal #lista .sombra .imagen img {
          width: auto;
          height: 25rem;
          margin-top: 2rem;
          transform: rotateY(25deg);
          transition: 1s ease-in-out;
          filter: saturate(50%) brightness(90%); }
        #principal #lista .sombra .imagen img:hover {
          transform: rotateY(0deg) scale(110%) translateX(1.5rem);
          filter: saturate(100%) brightness(110%); }
      #principal #lista .sombra .promocion {
        grid-area: promocion;
        display: flex;
        flex-flow: column nowrap;
        align-items: flex-end;
        justify-content: center;
        margin: auto;
        margin-right: 6rem;
        margin-left: 1rem;
        border-right: 1px solid white;
        height: 30rem;
        padding-right: 2rem;
        z-index: 2; }
        #principal #lista .sombra .promocion h3 {
          font-size: 3rem;
          font-weight: 100;
          color: #ffffff;
          font-style: italic;
          text-shadow: 0 0 1rem #ff684e, 0 0 0.2rem #ff684e;
          line-height: 1.1;
          text-align: right; }
        #principal #lista .sombra .promocion p {
          margin-top: 4rem;
          margin-bottom: 4rem;
          font-size: 1.2rem;
          font-weight: 200;
          color: #ffffff;
          line-height: 1.5;
          text-align: right;
          width: 90%; }
        #principal #lista .sombra .promocion .botones {
          font-size: 1.2rem;
          font-style: italic;
          background-color: #dddddd;
          height: auto;
          padding: 0.5rem 1rem;
          border-radius: 1.5rem;
          width: 45%;
          margin: initial; }
          #principal #lista .sombra .promocion .botones a {
            color: #222222; }
        #principal #lista .sombra .promocion .botones:hover {
          background-color: #ff684e;
          color: #000000; }
  #principal #aportes {
    grid-area: aportes;
    background-image: url(../media/backgrounds/background_15.jpg);
    background-repeat: no-repeat;
    background-size: cover; }
    #principal #aportes .sombra {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr;
      grid-template-areas: "sugerencias donaciones"; }
      #principal #aportes .sombra .aporte {
        grid-area: sugerencias;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        margin: auto;
        margin-left: 6rem;
        margin-right: 1rem;
        border-left: 1px solid white;
        width: 30rem;
        height: 30rem;
        padding-left: 2rem; }
        #principal #aportes .sombra .aporte h3 {
          font-size: 3rem;
          font-weight: 100;
          color: #ffffff;
          font-style: italic;
          text-shadow: 0 0 1rem #ff684e, 0 0 0.2rem #ff684e;
          line-height: 1.1; }
        #principal #aportes .sombra .aporte p {
          margin-top: 4rem;
          margin-bottom: 4rem;
          font-size: 1.2rem;
          font-weight: 200;
          color: #ffffff;
          line-height: 1.5; }
        #principal #aportes .sombra .aporte .botones {
          font-size: 1.2rem;
          font-style: italic;
          background-color: #dddddd;
          height: auto;
          padding: 0.5rem 1rem;
          border-radius: 1.5rem;
          width: 60%;
          margin: initial; }
          #principal #aportes .sombra .aporte .botones a {
            color: #000000; }
        #principal #aportes .sombra .aporte .botones:hover {
          background-color: #ff684e; }
      #principal #aportes .sombra .box {
        grid-area: donaciones;
        margin: auto;
        border: 1px solid #ffffff;
        width: 30rem;
        height: 30rem;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        overflow: hidden;
        position: relative; }
        #principal #aportes .sombra .box .oracion {
          margin: 2rem 2rem 1.5rem 2rem;
          font-size: 1.2rem;
          font-weight: 200;
          color: #ffffff;
          line-height: 1.5; }
        #principal #aportes .sombra .box .redes {
          width: 85%;
          z-index: 2;
          display: flex;
          flex-flow: row wrap;
          margin-top: 1rem;
          margin-bottom: 1rem; }
          #principal #aportes .sombra .box .redes .red {
            margin: 0.6rem;
            margin-top: 2.5rem;
            position: relative; }
            #principal #aportes .sombra .box .redes .red .moneda {
              width: 5rem;
              height: auto;
              filter: saturate(20%);
              cursor: pointer;
              transition: all 0.5s; }
            #principal #aportes .sombra .box .redes .red .moneda:hover {
              filter: saturate(100%); }
  #principal .direccion {
    position: absolute;
    top: 0rem;
    left: 0rem;
    height: 30rem;
    width: 30rem;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    cursor: pointer;
    transform: translateY(-31rem);
    border-bottom: 5px solid #dddddd;
    z-index: 10; }
    #principal .direccion p {
      color: #dddddd;
      font-size: 0.8rem;
      margin-top: 3.5rem; }
    #principal .direccion img {
      width: 12rem; }
    #principal .direccion span {
      font-size: 2rem;
      color: #ffffff;
      padding-bottom: 3rem; }
  #principal .abierto {
    transform: translateY(0%); }
  #principal #btc::before {
    position: absolute;
    content: "Bitcoin";
    background-color: #dddddd;
    border-radius: 1rem;
    padding: 0.2rem 0.75rem;
    width: max-content;
    height: 1.5rem;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%) translateY(-100%) scale(0%);
    color: #222222;
    transition: 0.5s; }
  #principal #btc:hover::before {
    transform: translateX(-50%) translateY(-100%) scale(100%); }
  #principal #eth::before {
    position: absolute;
    content: "Ethereum";
    background-color: #dddddd;
    border-radius: 1rem;
    padding: 0.2rem 0.75rem;
    width: max-content;
    height: 1.5rem;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%) translateY(-100%) scale(0%);
    color: #222222;
    transition: 0.5s; }
  #principal #eth:hover::before {
    transform: translateX(-50%) translateY(-100%) scale(100%); }
  #principal #bsc::before {
    position: absolute;
    content: "Binance Smart Chain";
    background-color: #dddddd;
    border-radius: 1rem;
    padding: 0.2rem 0.75rem;
    width: max-content;
    height: 1.5rem;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%) translateY(-100%) scale(0%);
    color: #222222;
    transition: 0.5s; }
  #principal #bsc:hover::before {
    transform: translateX(-50%) translateY(-100%) scale(100%); }
  #principal #ltc::before {
    position: absolute;
    content: "Litecoin";
    background-color: #dddddd;
    border-radius: 1rem;
    padding: 0.2rem 0.75rem;
    width: max-content;
    height: 1.5rem;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%) translateY(-100%) scale(0%);
    color: #222222;
    transition: 0.5s; }
  #principal #ltc:hover::before {
    transform: translateX(-50%) translateY(-100%) scale(100%); }
  #principal #matic::before {
    position: absolute;
    content: "Polygon";
    background-color: #dddddd;
    border-radius: 1rem;
    padding: 0.2rem 0.75rem;
    width: max-content;
    height: 1.5rem;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%) translateY(-100%) scale(0%);
    color: #222222;
    transition: 0.5s; }
  #principal #matic:hover::before {
    transform: translateX(-50%) translateY(-100%) scale(100%); }
  #principal #terra::before {
    position: absolute;
    content: "Terra";
    background-color: #dddddd;
    border-radius: 1rem;
    padding: 0.2rem 0.75rem;
    width: max-content;
    height: 1.5rem;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%) translateY(-100%) scale(0%);
    color: #222222;
    transition: 0.5s; }
  #principal #terra:hover::before {
    transform: translateX(-50%) translateY(-100%) scale(100%); }
  #principal #avax::before {
    position: absolute;
    content: "Avalanche";
    background-color: #dddddd;
    border-radius: 1rem;
    padding: 0.2rem 0.75rem;
    width: max-content;
    height: 1.5rem;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%) translateY(-100%) scale(0%);
    color: #222222;
    transition: 0.5s; }
  #principal #avax:hover::before {
    transform: translateX(-50%) translateY(-100%) scale(100%); }
  #principal #rune::before {
    position: absolute;
    content: "THORChain";
    background-color: #dddddd;
    border-radius: 1rem;
    padding: 0.2rem 0.75rem;
    width: max-content;
    height: 1.5rem;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%) translateY(-100%) scale(0%);
    color: #222222;
    transition: 0.5s; }
  #principal #rune:hover::before {
    transform: translateX(-50%) translateY(-100%) scale(100%); }
  #principal #footer {
    grid-area: footer;
    background-image: url(../media/backgrounds/background_14.jpg);
    background-repeat: no-repeat;
    background-size: cover; }
    #principal #footer .sombra {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      grid-template-rows: 1fr 0.1fr;
      grid-template-areas: "titular formulario" "copyright copyright"; }
      #principal #footer .sombra .titular {
        grid-area: titular;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        margin: auto;
        margin-left: 6rem;
        margin-right: 1rem;
        margin-bottom: 5rem;
        border-left: 1px solid white;
        width: 30rem;
        height: 27.5rem;
        padding-left: 2rem; }
        #principal #footer .sombra .titular h3 {
          font-size: 3rem;
          font-weight: 100;
          color: #ffffff;
          font-style: italic;
          text-shadow: 0 0 1rem #ff684e, 0 0 0.2rem #ff684e;
          line-height: 1.1; }
        #principal #footer .sombra .titular p {
          width: 82%;
          margin-top: 4rem;
          margin-bottom: 4rem;
          font-size: 1.2rem;
          font-weight: 200;
          color: #ffffff;
          line-height: 1.5; }
          #principal #footer .sombra .titular p a {
            color: #ff684e; }
      #principal #footer .sombra .copyright {
        grid-area: copyright;
        color: #ffffff;
        font-weight: 100;
        text-align: center; }
      #principal #footer .sombra form {
        grid-area: formulario;
        display: flex;
        flex-flow: column nowrap;
        width: 80%;
        margin: auto;
        margin-bottom: 5rem; }
        #principal #footer .sombra form textarea,
        #principal #footer .sombra form input {
          background-color: transparent;
          border: 1px solid #ffffff;
          color: #ffffff;
          padding: 1rem;
          margin: 0.5rem;
          font-size: 1rem;
          outline: none; }
        #principal #footer .sombra form textarea {
          height: 14rem; }
        #principal #footer .sombra form textarea::placeholder,
        #principal #footer .sombra form input::placeholder {
          color: #9b9b9b;
          font-size: 1rem; }
        #principal #footer .sombra form input:focus,
        #principal #footer .sombra form textarea:focus {
          background-color: white;
          color: #000; }
        #principal #footer .sombra form button {
          width: 97.5%;
          font-size: 1rem;
          height: auto;
          padding: 1rem;
          border-radius: 0rem;
          margin: auto;
          margin-top: 0.5rem; }

/* LISTA COMPLETA */
.back {
  backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.7); }

#completa {
  background-color: #1f1f1f;
  transition: all 0.5s ease-in-out;
  width: 100%;
  height: auto; }
  #completa .sombra {
    width: 100%;
    height: auto;
    min-height: 100vh; }
  #completa .to_top {
    height: 0rem;
    position: sticky;
    top: 40rem;
    margin-right: 4rem;
    text-align: right;
    z-index: 2; }
    #completa .to_top i {
      color: #ff684e;
      font-size: 2rem;
      transition: all 0.5s ease-in; }
    #completa .to_top i:hover {
      transform: translateY(-1rem); }
  #completa .posters {
    width: 92%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, 9.15rem);
    grid-template-rows: auto;
    grid-gap: 0.5rem;
    filter: grayscale(20%) brightness(90%);
    padding-top: 8rem; }
    #completa .posters .movie {
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      height: 13.725rem;
      border-radius: 6px;
      box-shadow: 0px 0px 10px #000000; }
      #completa .posters .movie .resaltado {
        position: relative;
        color: #dddddd;
        width: 100%;
        height: 100%; }
        #completa .posters .movie .resaltado p {
          opacity: 0;
          position: relative;
          z-index: -1; }
        #completa .posters .movie .resaltado span {
          color: #ff684e;
          font-size: 1.3rem;
          position: absolute;
          right: 1rem;
          bottom: 0.5rem;
          font-weight: 600;
          z-index: 3;
          opacity: 0; }
      #completa .posters .movie .resaltado:hover p {
        opacity: 1;
        z-index: 2;
        font-size: 0.8rem;
        padding-left: 1rem;
        padding-top: 0.5rem;
        padding-right: 1rem;
        transition-delay: 0.3s; }
        #completa .posters .movie .resaltado:hover p strong {
          font-size: 1rem; }
      #completa .posters .movie .resaltado:hover span {
        transition-delay: 0.3s;
        opacity: 1; }
      #completa .posters .movie .resaltado::after {
        content: "";
        position: absolute;
        bottom: 100%;
        top: 0;
        right: 0;
        width: 9.15rem;
        opacity: 0;
        transition: all 0.5s ease;
        background-color: rgba(24, 24, 24, 0.7);
        backdrop-filter: blur(10px);
        border-radius: 5px; }
      #completa .posters .movie .resaltado:hover::after {
        bottom: 0;
        opacity: 1; }
  #completa .orden {
    justify-content: space-between;
    width: 50vw;
    margin-top: 4rem;
    padding-bottom: 3rem; }
    #completa .orden .mensaje a {
      color: #ff684e;
      font-size: 0.8rem;
      font-weight: 300;
      margin-left: 4rem; }
    #completa .orden .verMas i {
      color: #ff684e;
      font-size: 2rem;
      transition: 0.5s all ease-in;
      cursor: pointer; }
    #completa .orden .verMas i:hover {
      transform: rotate(90deg); }

#baseFiltro {
  position: fixed;
  background-color: #ff684e;
  width: 17.5rem;
  height: 100%;
  top: 0rem;
  left: -17.5rem;
  transition: 0.5s ease-in-out; }
  #baseFiltro form {
    height: 100%;
    width: 100%; }
    #baseFiltro form ul {
      margin: auto;
      height: 100%;
      display: flex;
      flex-flow: column nowrap;
      /* justify-content: space-between; */
      align-items: flex-start;
      padding-top: 8rem;
      padding-bottom: 4rem;
      padding-left: 4rem;
      width: 100%;
      /* .title {
                color: $focus;
            } */ }
      #baseFiltro form ul select, #baseFiltro form ul input {
        width: 10rem;
        height: auto;
        padding: 0.5rem;
        margin-bottom: 2rem; }
      #baseFiltro form ul li input {
        position: absolute;
        bottom: 2rem; }

.showMenu {
  transform: translateX(17.5rem); }