.formDatoEstilo, .contacto__formulario-form .form__dato label, .contacto__formulario-form .form__dato input, .contacto__formulario-form .form__dato select, .contacto__formulario-form .form__dato textarea, .contacto__formulario-form .form__dato button {
  color: #ffffff;
  outline: none;
  border: none;
  background-color: #0000005e;
  padding: 5px; }

.contenedorPDetalles, .filtro, .cards, .presentacionPersonaje, .contenido, .pasivas, .habilidades, .constelaciones, .presentacionArma, .estadisticasArma, .materialesAscensionArma {
  width: 85%;
  margin: 0 auto;
  padding: 20px; }

.parrafoDetalles, .presentacionPersonaje__info-descripcion p {
  text-align: justify;
  line-height: 1.6;
  text-indent: 20px; }

.tituloH3Seccion, .contenido__container h3, .pasivas h3, .habilidades h3, .constelaciones h3, .estadisticasArma h3, .materialesAscensionArma h3 {
  font-weight: bold;
  font-size: 30px;
  margin-bottom: 20px;
  border-bottom: 2px solid #000000; }

.containerDescripcionTexto, .pasivas .pasiva__descripcion, .habilidades .habilidad__descripcion, .constelaciones .constelacion__descripcion {
  width: 60%;
  text-align: center;
  padding: 10px;
  margin: 20px; }

.tituloH4Descripcion, .pasivas .pasiva__descripcion h4, .habilidades .habilidad__descripcion h4 {
  font-weight: bold;
  font-size: 25px;
  margin-bottom: 20px; }

.containerHabConsPas, .pasivas .pasiva, .habilidades .habilidad, .constelaciones .constelacion {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
  align-items: center; }

.scrollTablas, .estadisticasArma .tableContainer, .materialesAscensionArma .tableContainer {
  overflow-x: auto; }

.table, .estadisticasArma .tableContainer .estadisticasArma__table, .materialesAscensionArma .tableContainer .materialesAscensionArma__table {
  width: 50%;
  border-collapse: collapse;
  margin: 30px auto;
  border-radius: 5px;
  overflow: hidden;
  text-align: center; }

.cabezeraTable, .estadisticasArma .tableContainer .estadisticasArma__table thead tr, .materialesAscensionArma .tableContainer .materialesAscensionArma__table thead tr {
  background-color: #b0e1f5e3;
  font-size: 20px; }

.contenidoTableBloque, .estadisticasArma .tableContainer .estadisticasArma__table thead tr th, .estadisticasArma .tableContainer .estadisticasArma__table tbody tr td, .estadisticasArma .tableContainer .estadisticasArma__table tfoot tr td, .materialesAscensionArma .tableContainer .materialesAscensionArma__table thead tr th, .materialesAscensionArma .tableContainer .materialesAscensionArma__table tbody tr td, .materialesAscensionArma .tableContainer .materialesAscensionArma__table tfoot tr td {
  font-weight: bold;
  padding: 12px 15px;
  border: 2px solid black; }

.fondoColorTableCuerpo, .estadisticasArma .tableContainer .estadisticasArma__table tbody tr, .estadisticasArma .tableContainer .estadisticasArma__table tfoot tr, .materialesAscensionArma .tableContainer .materialesAscensionArma__table tbody tr, .materialesAscensionArma .tableContainer .materialesAscensionArma__table tfoot tr {
  background-color: #c8dcfc; }

.card, .cards__card, .materialesAscensionArma .tableContainer .materialesAscensionArma__table tbody tr td .cardTable {
  background-color: #ffffff;
  position: relative;
  border-radius: 20px;
  border: 2px solid #000000;
  overflow: hidden;
  transition: all .4s; }
  .card:hover, .cards__card:hover, .materialesAscensionArma .tableContainer .materialesAscensionArma__table tbody tr td .cardTable:hover {
    transform: scale(1.1);
    box-shadow: 2px 2px 2px 0 #666666; }

.cardTexto, .cards__card-text, .materialesAscensionArma .tableContainer .materialesAscensionArma__table tbody tr td .cardTable__texto {
  font-size: 12px;
  padding: 0 10px;
  text-align: center;
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: #000000; }

.cardImg, .cards__card-img, .materialesAscensionArma .tableContainer .materialesAscensionArma__table tbody tr td .cardTable__img {
  width: 100%;
  height: 90%;
  border-bottom: 2px solid #000000; }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body {
  font-family: 'Lexend Deca', sans-serif; }

a {
  text-decoration: none; }

li {
  list-style-type: none; }

ul, ol {
  padding: 0; }

img {
  width: 100%;
  height: 100%; }

textarea {
  resize: none; }

.paginaBackground {
  background: url(../../images/backgroundPaginaPersonajes.png);
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  overflow-x: hidden; }

.paginaBackgroundTexto {
  background-color: #e0e0e0ab; }

.cards__card1Star {
  background: url(../../images/Fondo_de_rareza_Normal.png) no-repeat center/cover; }

.cards__card2Star {
  background: url(../../images/Fondo_de_rareza_Verde.png) no-repeat center/cover; }

.cards__card3Star {
  background: url(../../images/Fondo_de_rareza_Azul.png) no-repeat center/cover; }

.cards__card4Star {
  background: url(../../images/Fondo_de_rareza_Violeta.png) no-repeat center/cover; }

.cards__card5Star {
  background: url(../../images/Fondo_de_rareza_Legendario.png) no-repeat center/cover; }

footer {
  width: 100%;
  background-color: #000000;
  padding: 9px 0;
  text-align: center;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center; }
  footer p {
    color: #e0dddd;
    font-size: 14px; }

header {
  position: sticky;
  z-index: 70;
  top: 0; }
  header .navbar {
    width: 100%;
    background: linear-gradient(#a5a5a5, #ffffff); }
    header .navbar .container-fluid {
      padding: 0 32px; }
      header .navbar .container-fluid .navbar-brand {
        transition: all .4s;
        height: 100%;
        padding: 0;
        margin: 0; }
        header .navbar .container-fluid .navbar-brand:hover {
          transform: scale(1.1); }
        header .navbar .container-fluid .navbar-brand img {
          width: 140px; }
      header .navbar .container-fluid .navbar-collapse {
        flex-grow: initial; }
        header .navbar .container-fluid .navbar-collapse .nav-item {
          margin: 0 16px;
          position: relative; }
          header .navbar .container-fluid .navbar-collapse .nav-item::before {
            content: "";
            height: 3px;
            width: 0%;
            background-color: #061a28;
            position: absolute;
            left: 0;
            bottom: -5px;
            transition: 0.4s ease-out; }
          header .navbar .container-fluid .navbar-collapse .nav-item:hover::before {
            width: 100%; }
          header .navbar .container-fluid .navbar-collapse .nav-item .nav-link {
            font-size: 15px;
            font-weight: bold;
            color: #000000;
            padding: 0;
            margin: 10px 0; }
            header .navbar .container-fluid .navbar-collapse .nav-item .nav-link:hover {
              color: #424242; }

.inicio {
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 1;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center; }
  .inicio h1 {
    -webkit-text-stroke: 1px #000000;
    color: #ffffff;
    font-size: 75px;
    margin: 10px 0;
    animation: animacionDeAparicion ease-in 1.1s; }
  .inicio nav {
    margin-top: 25px;
    animation: animacionDeAparicion ease-out 1.2s; }
    .inicio nav .inicio__navBar {
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      align-items: center; }
      .inicio nav .inicio__navBar li {
        width: 170px;
        display: inline-block;
        margin: 15px;
        border-radius: 7px;
        background-color: #99aab74b;
        text-align: center;
        font-weight: bold;
        transition: all 0.4s; }
        .inicio nav .inicio__navBar li:hover {
          transform: scale(1.2);
          color: #061a28; }
      .inicio nav .inicio__navBar img {
        margin-top: 10px; }
      .inicio nav .inicio__navBar a {
        font-size: 25px;
        color: #ffffff; }
        .inicio nav .inicio__navBar a:hover {
          color: #061a28; }
  .inicio__video {
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: -1;
    object-fit: cover; }

@keyframes animacionDeAparicion {
  0% {
    transform: scale(0); }
  100% {
    transform: scale(1); } }

/* SECCCION REDES */
.redes {
  width: 100%;
  height: 70vh;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  background: url(https://genshin.hoyoverse.com/_nuxt/img/5d86b58.jpg) no-repeat center/cover; }
  .redes__titulo {
    color: #ffffff;
    font-size: 70px;
    text-align: center;
    margin-bottom: 50px; }
  .redes__navBar {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center; }
    .redes__navBar li {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      margin: 0 40px;
      background-color: #868e9496;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
      transition: all 0.4s; }
      .redes__navBar li:hover {
        transform: scale(1.2); }
    .redes__navBar i {
      color: #ffffff;
      font-size: 35px; }
      .redes__navBar i:hover {
        color: #061a28; }

/* contactos */
.contacto {
  width: 100%;
  background: url(https://genshin.hoyoverse.com/_nuxt/img/b57475e.jpg) no-repeat center/cover;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: center;
  padding: 50px; }
  .contacto__imgPaimon {
    width: 300px;
    height: 300px; }
  .contacto__formulario {
    background-color: #0000005e;
    padding: 20px; }
    .contacto__formulario-titulo {
      color: #ffffff;
      font-weight: bold;
      font-size: 70px;
      margin-bottom: 30px; }
    .contacto__formulario-form .form__dato {
      margin: 10px;
      display: flex; }
      .contacto__formulario-form .form__dato::placeholder {
        color: #ffffff; }
      .contacto__formulario-form .form__dato label {
        font-size: 22px;
        width: 50%; }
      .contacto__formulario-form .form__dato input {
        width: 50%; }
        .contacto__formulario-form .form__dato input:focus::placeholder {
          color: #b9b9b9; }
      .contacto__formulario-form .form__dato select {
        width: 50%; }
      .contacto__formulario-form .form__dato textarea {
        font-size: 17px;
        width: 100%; }
        .contacto__formulario-form .form__dato textarea:focus::placeholder {
          color: #b9b9b9; }
      .contacto__formulario-form .form__dato button {
        font-size: 17px;
        width: 100%;
        height: 30px;
        cursor: pointer;
        transition: all 0.8s; }
        .contacto__formulario-form .form__dato button:hover {
          font-size: 15px;
          color: #b9b9b9; }

/* SECCION FILTRO */
.filtro {
  width: 70%;
  display: flex;
  flex-flow: column nowrap; }
  .filtro h1 {
    font-size: 30px;
    font-weight: bold;
    margin: 20px 0; }
  .filtro__seccion {
    width: 100%;
    padding: 10px;
    display: flex;
    flex-flow: column wrap; }
    .filtro__seccion::placeholder {
      color: #000000; }
    .filtro__seccion span {
      font-weight: bold;
      font-size: 18px; }
    .filtro__seccion .filtro__container-button {
      display: flex;
      flex-wrap: wrap; }
    .filtro__seccion button {
      border-width: 2px;
      background-color: #e0e0e0; }
    .filtro__seccion .filtro__seccion-botonImg {
      width: 40px;
      height: 40px;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
      margin: 4px;
      padding: 3px;
      cursor: pointer; }
    .filtro__seccion .filtro__seccion-botonTextoImg {
      width: 55px;
      padding: 2px; }
      .filtro__seccion .filtro__seccion-botonTextoImg span {
        font-size: 20px;
        margin: 4px; }
      .filtro__seccion .filtro__seccion-botonTextoImg img {
        width: 50%;
        height: 70%; }
    .filtro__seccion-search {
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      align-items: stretch; }
      .filtro__seccion-search input {
        color: #000000;
        width: 300px;
        border: none;
        border: 3px solid black;
        background: transparent;
        outline: none;
        text-align: center;
        border-radius: 40px 0 0 40px;
        font-size: 16px;
        text-overflow: ellipsis; }
      .filtro__seccion-search .filtro__seccion-botonBuscar {
        margin: 0;
        border: none;
        border-top: 3px solid black;
        border-bottom: 3px solid black;
        border-right: 3px solid black;
        border-radius: 0 40px 40px 0;
        cursor: pointer;
        background-color: #e0e0e000; }

/* SECCION CARD */
.cards {
  width: 70%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px 10px;
  padding: 10px 10px 30px 10px; }
  .cards__card {
    min-height: 200px; }
    .cards__card-text {
      margin: 0; }
    .cards__card-iconElemento {
      position: absolute;
      top: 4%;
      left: 4%;
      width: 25px;
      height: 25px;
      z-index: 2; }

/* SECCION PERSONAJE MAS DETALLE */
.presentacionPersonaje {
  height: 100vh; }
  .presentacionPersonaje__titulo {
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 40px;
    padding-top: 15px;
    text-align: center; }
  .presentacionPersonaje__info {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center; }
    .presentacionPersonaje__info-img {
      height: 360px; }
    .presentacionPersonaje__info-descripcion {
      width: 50%;
      text-align: center;
      padding: 10px;
      margin: 20px; }
      .presentacionPersonaje__info-descripcion h2 {
        font-weight: bold;
        margin-bottom: 50px; }

.contenido {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center; }
  .contenido__container {
    border: 2px solid black; }
    .contenido__container h3 {
      font-size: 40px;
      text-align: center;
      padding: 10px; }
    .contenido__container li {
      font-size: 18px;
      padding: 10px;
      margin: 10px 0;
      list-style-type: disc;
      list-style-position: inside; }

.pasivas .pasiva__img {
  width: 100px; }

.habilidades .habilidad__container {
  border-radius: 10%;
  overflow: hidden;
  position: relative;
  width: 50%; }
  .habilidades .habilidad__container img {
    width: 60px;
    height: auto;
    position: absolute;
    right: 85%;
    top: 5%; }
  .habilidades .habilidad__container video {
    width: 100%; }

.habilidades .habilidad__descripcion {
  width: 50%; }
  .habilidades .habilidad__descripcion p {
    line-height: 1.2; }
  .habilidades .habilidad__descripcion h6 {
    font-weight: bold;
    text-align: left;
    font-size: 17px;
    margin: 10px 0; }
  .habilidades .habilidad__descripcion li {
    font-size: 18px;
    padding: 10px;
    margin: 10px 0;
    list-style-type: disc;
    list-style-position: inside; }

.habilidades .habilidad__inverso {
  order: 2; }

.constelaciones .constelacion__img {
  width: 100px; }

.constelaciones .constelacion__descripcion h4 {
  font-weight: bold;
  font-size: 22px;
  margin-bottom: 20px; }

.presentacionArma {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center; }
  .presentacionArma__img {
    height: 470px;
    margin-right: 30px; }
  .presentacionArma__descripcion {
    padding: 20px;
    text-align: center; }
    .presentacionArma__descripcion-titulo {
      font-size: 50px;
      font-weight: bold;
      margin-bottom: 10px; }
    .presentacionArma__descripcion-img {
      margin: 0 auto;
      width: 50px;
      height: 50px;
      margin-bottom: 15px; }
    .presentacionArma__descripcion-containerEstadistica {
      display: flex;
      margin-top: 40px; }
      .presentacionArma__descripcion-containerEstadistica .containerEstadistica__descripcion {
        margin: 0 8px; }
        .presentacionArma__descripcion-containerEstadistica .containerEstadistica__descripcion h3 {
          font-weight: bold;
          font-size: 20px;
          margin-bottom: 8px; }
        .presentacionArma__descripcion-containerEstadistica .containerEstadistica__descripcion p {
          font-size: 20px; }

.contenido {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center; }
  .contenido__container {
    border: 2px solid black; }
    .contenido__container h3 {
      font-size: 40px;
      text-align: center;
      padding: 10px; }
    .contenido__container li {
      font-size: 18px;
      padding: 10px;
      margin: 10px 0;
      list-style-type: disc;
      list-style-position: inside; }

.materialesAscensionArma .tableContainer .materialesAscensionArma__table {
  width: 80%; }
  .materialesAscensionArma .tableContainer .materialesAscensionArma__table tbody tr td .cardTable {
    margin: 20px auto;
    width: 80px;
    height: auto; }
    .materialesAscensionArma .tableContainer .materialesAscensionArma__table tbody tr td .cardTable__span {
      font-weight: bold; }

@media screen and (max-width: 1024px) {
  .inicio nav .inicio__navBar li {
    margin: 10px; }
  .cards {
    grid-template-columns: repeat(5, 1fr); }
  .presentacionPersonaje {
    height: auto; }
    .presentacionPersonaje__info-img {
      height: 300px; }
  .habilidades .habilidad__container img {
    width: 50px; } }

@media screen and (max-width: 960px) {
  /* HEADER */
  header .navbar .container-fluid .navbar-collapse .nav-item {
    margin: 0 12px; }
  /* INICIO */
  .inicio nav .inicio__navBar li {
    width: 150px; }
  .inicio nav .inicio__navBar a {
    font-size: 20px; }
  .contacto__imgPaimon {
    margin-bottom: 15px; }
  /* PERSONAJES */
  .cards {
    grid-template-columns: repeat(4, 1fr); }
  /* PERSONAJE MAS DETALLE */
  .presentacionPersonaje__titulo {
    font-size: 30px; }
  .presentacionPersonaje__info {
    flex-direction: column; }
    .presentacionPersonaje__info-descripcion {
      width: 100%; }
  .habilidades .habilidad {
    flex-direction: column; }
    .habilidades .habilidad__container {
      width: 90%; }
    .habilidades .habilidad__descripcion {
      width: 90%; }
      .habilidades .habilidad__descripcion img {
        width: 60px; }
    .habilidades .habilidad__inverso {
      order: 0; } }

@media screen and (max-width: 728px) {
  .inicio__video {
    object-position: 40%; }
  .inicio h1 {
    font-size: 45px; }
  .inicio nav .inicio__navBar li {
    width: 130px; }
  .inicio nav .inicio__navBar a {
    font-size: 18px; }
  .redes__titulo {
    font-size: 50px; }
  .contacto__imgPaimon {
    width: 250px; }
  .contacto__formulario {
    width: 800px; }
    .contacto__formulario-titulo {
      font-size: 50px;
      text-align: center; }
  /* FILTRO */
  .filtro {
    width: 90%; }
    .filtro__seccion input {
      width: 80%; }
  /* PERSONAJES */
  .cards {
    width: 90%;
    grid-template-columns: repeat(3, 1fr); }
  /* PERSONAJE MAS DETALLE */
  .presentacionPersonaje__info img {
    height: 300px; }
  .habilidades .habilidad__container img {
    right: 80%; }
  .habilidades .habilidad__descripcion {
    width: 100%; }
  .pasivas .pasiva__descripcion {
    width: 100%; }
  .constelaciones .constelacion__descripcion {
    width: 100%; }
  .presentacionArma__img {
    order: 1; } }

@media screen and (max-width: 450px) {
  /* INICIO */
  .inicio {
    height: 130vh; }
    .inicio__video {
      object-position: 30%;
      height: 130vh; }
  .redes {
    height: 80vh; }
    .redes__navBar li {
      margin: 20px; }
    .redes__titulo {
      font-size: 40px; }
  .contacto__imgPaimon {
    width: 200px;
    height: 200px; }
  .contacto__formulario-titulo {
    font-size: 40px; }
  .contacto__formulario-form .form__dato {
    flex-direction: column; }
    .contacto__formulario-form .form__dato label,
    .contacto__formulario-form .form__dato input,
    .contacto__formulario-form .form__dato select,
    .contacto__formulario-form .form__dato option,
    .contacto__formulario-form .form__dato textarea {
      font-size: 15px;
      width: 100%; }
  /* FILTRO */
  .filtro__seccion input {
    width: 70%; }
  /* PERSONAJES */
  .cards {
    grid-template-columns: repeat(2, 1fr); }
  /* PERSONAJE MAS DETALLE */
  .habilidades .habilidad {
    flex-direction: column; }
    .habilidades .habilidad__container img {
      width: 40px; }
  .pasivas .pasiva {
    flex-direction: column; }
    .pasivas .pasiva__img {
      width: 80px; }
  .constelaciones .constelacion {
    flex-direction: column; }
    .constelaciones .constelacion__img {
      width: 80px; }
  /* ARMA MAS DETALLE */
  .presentacionArma__descripcion-titulo {
    font-size: 35px; }
  .presentacionArma__descripcion-containerEstadistica {
    flex-direction: column; } }

@media screen and (max-width: 330px) {
  footer {
    padding: 10px; }
  /* INICIO */
  .inicio {
    height: 200vh; }
    .inicio__video {
      object-position: 30%;
      height: 200vh; }
    .inicio h1 {
      font-size: 40px; }
    .inicio nav .inicio__navBar {
      flex-direction: column; }
      .inicio nav .inicio__navBar li {
        width: 130px; }
      .inicio nav .inicio__navBar a {
        font-size: 18px; }
  .redes {
    height: 100vh; }
  ol, ul {
    padding: 0; }
  /* FILTRO */
  .filtro__seccion input {
    width: 60%; }
  /* PERSONAJES */
  .cards {
    grid-template-columns: repeat(1, 1fr); }
  /* PERSONAJE MAS DETALLE */
  .contenido h3 {
    font-size: 30px; }
  .habilidades h3 {
    font-size: 20px; }
  .habilidades .habilidad h4 {
    font-size: 18px; }
  .habilidades .habilidad__container img {
    width: 30px; }
  .pasivas h3 {
    font-size: 20px; }
  .pasivas .pasiva__descripcion h4 {
    font-size: 18px; }
  .constelaciones h3 {
    font-size: 20px; }
  .constelaciones .constelacion__descripcion h4 {
    font-size: 18px; } }