:root {

      --primary: #070720;

      --secondary: #e53637;

      --dark: #007bff;

      --light: #0b0c2a;



    }



    * {

      margin: 0;

      padding: 0;

      box-sizing: border-box;

      font-family: Arial, sans-serif;

    }



    body {

      background-color: var(--light);

      color: var(--dark); 

    }



    .header {

      background: var(--primary);

      padding: 1rem;

      box-shadow: 0 2px 5px rgba(0,0,0,0.2);

    }



    .nav {

      max-width: 1200px;

      margin: 0 auto;

      display: flex;

      flex-direction: column;

      gap: 1rem;

      padding: 0 1rem;

    }



    @media (min-width: 768px) {

      .nav {

        flex-direction: row;

        justify-content: space-between;

        align-items: center;

      }

    }



    .nav-links {

      display: flex;

      gap: 1.5rem;

      align-items: center;

    }



    .nav-link {

      color:#b7b7b7;

      text-decoration: none;

      font-size: 0.9rem;

      font-weight: 560;

    }



    .nav-link:hover {

      color: #f6f5f5;

    }



    .logo img {

  width: 100px; /* Ajusta el tamaño según tus necesidades */

  height: auto;

  /* Otros estilos que desees aplicar a la imagen */

}



    .search-bar {

      padding: 0.5rem;

      border-radius: 4px;

      border: none;

      width: 100%;

      max-width: 300px;

    }



    .main-content {

      max-width: 1200px;

      margin: 2rem auto;

      padding: 0 1rem;

    }



    .filters {

      background: white;

      border: 1px solid #ddd;

      padding: 1rem;

      border-radius: 4px;

      margin-bottom: 2rem;

      transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;

    }

    

    .filter-grid {

      display: grid;

      grid-template-columns: 1fr;

      gap: 1rem;

    }

    

    @media (min-width: 576px) {

      .filter-grid {

        grid-template-columns: repeat(2, 1fr);

      }

    }

    

    @media (min-width: 768px) {

      .filter-grid {

        grid-template-columns: repeat(3, 1fr);

      }

    }

    

    @media (min-width: 992px) {

      .filter-grid {

        grid-template-columns: repeat(5, 1fr);

      }

    }

    

    /* ✅ Ocultar el botón en PC y mostrar solo en móviles */

    .filter-toggle {

      display: none; /* Oculto por defecto */

    }

    

    @media (max-width: 768px) {

      .filters {

        max-height: 0;

        opacity: 0;

        overflow: hidden;

        padding: 0;

        margin-bottom: 0;

      }

    

      .filters.active {

        max-height: 500px; /* Ajusta según el contenido */

        opacity: 1;

        padding: 1rem;

        margin-bottom: 2rem;

      }

    

      .filter-toggle {

        display: block; /* Aparece solo en móviles */

        width: 100%;

        padding: 10px;

        background: var(--primary);

        color: white;

        border: none;

        border-radius: 4px;

        font-size: 1rem;

        cursor: pointer;

        margin-bottom: 10px;

        transition: background-color 0.2s;

      }

    

      .filter-toggle:hover {

        background: var(--secondary);

      }

    }

    

    /* ✅ Estilos de los select y botones */

    .filter-select {

      padding: 0.5rem;

      border-radius: 4px;

      background: white;

      color: var(--dark);

      border: 1px solid #ddd;

      cursor: pointer;

      width: 100%;

    }

    

    .filter-button {

      padding: 0.5rem 1rem;

      background: var(--primary);

      color: white;

      border: none;

      border-radius: 4px;

      cursor: pointer;

      transition: background-color 0.2s;

      margin-top: 1rem;

      width: 100%;

    }

    

    .filter-button:hover {

      background: var(--secondary);

    }

    

    .anime-grid {

      display: grid;

      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

      gap: 1rem;

      justify-items: center;

      padding: 0.5rem;

    }



    .anime-card {

      display: flex;

      flex-direction: column;

      background: white;

      background: rgb(255, 255, 255);

      border: 1px solid #040303;

      padding: 5px;

      position: relative;

      width: 100%;

      max-width: 173px;

      height: auto;

      aspect-ratio: 173/288;

      margin: 0;

      border-radius: 5px;

}



.anime-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 5px 20px rgba(0,0,0,0.15);

}



.anime-image {

      width: 100%;

      height: auto;

      aspect-ratio: 163/238;

      background: white;

      border-radius: 5px;

      overflow: hidden;

      box-shadow: 0 2px 4px rgba(0,0,0,0.1);

      transition: transform 0.2s;

      position: relative;

    }





.anime-image:hover {

  transform: translateY(-5px);

}



.anime-image svg {

  display: none; 

}



.anime-image img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 6px;

  display: block;

}



.anime-type {

  position: absolute;

  top: 5px;

  right: 5px;

  background: rgba(255, 0, 0, 0.9); 

  color: rgb(255, 255, 255);

  padding: 3px 8px;

  border-radius: 3px;

  font-size: 0.6rem;

  font-weight: 500;

  letter-spacing: 0.3px;

  text-transform: uppercase;

  backdrop-filter: blur(2px);

  box-shadow: 0 2px 4px rgba(0,0,0,0.1);

  z-index: 1;

}





.anime-genres {

  position: absolute;

  bottom: 5px;

  right: 5px;

  background: rgba(255, 17, 164, 0.95);

  color: white;

  padding: 3px 8px;

  border-radius: 3px;

  font-size: 0.6rem;

  font-weight: 500;

  letter-spacing: 0.3px;

  backdrop-filter: blur(4px);

  box-shadow: 0 1px 3px rgba(0,0,0,0.2);

  border: 1px solid rgba(255,255,255,0.1);

  z-index: 1;

}







.anime-info {

      padding: 0 rem;

      position: absolute;

      bottom: 0;

      left: 0;

      width: 100%;

      min-height: 40px;

      background: #ffffff;

      display: flex;

      align-items: center;

      justify-content: center;

      border-radius: 0 0 8px 8px;

      box-shadow: 0 -2px 10px rgba(0,0,0,0.05);

    }

  

    /*Quita el Subrayado*/

    .anime-title a {

  text-decoration: none !important; /* Quita el subrayado */

}

    





.anime-title {

  color: var(--primary);

  text-decoration: none;

  font-size: 0.85rem;

  font-weight: 500;

  line-height: 1.3;

  display: -webkit-box;

  -webkit-line-clamp: 2; /* Limita a 2 líneas por defecto */

  -webkit-box-orient: vertical;

  overflow: hidden;

  text-overflow: ellipsis;

  text-align: left;

  padding-left: 4px;

  max-width: 100%; /* Asegura que no haya un límite de ancho en la versión normal */

  transition: all 0.3s ease-in-out; /* Transición suave para expandir */

  position: relative; /* Necesario para aplicar la sombra y el desplazamiento */

}

.anime-card {

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.anime-card:hover {

  transform: scale(1.05); /* Aumenta ligeramente el tamaño de la tarjeta al pasar el mouse */

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* Aumenta la sombra para dar un efecto de elevación */

}









    .pagination {

      margin-top: 2rem;

      display: flex;

      flex-wrap: wrap;

      gap: 0.5rem;

      padding: 0 1rem;

      justify-content: center;

    }



    .page-btn {

      padding: 0.5rem 1rem;

      background: var(--primary);

      border: none;

      border-radius: 4px;

      color: white;

      cursor: pointer;

      min-width: 40px;

    }



    .page-btn:hover {

      background: var(--secondary);

    }



    .page-btn.active {

      background: var(--secondary);

    }



    .page-btn:disabled {

      opacity: 0.5;

      cursor: not-allowed;

    }



    .footer {

      background: var(--primary);

      padding: 2rem 1rem;

      margin-top: 3rem;

      margin-bottom: 0px; /*OJO AQUI COLOCAR 110px PARA DAR ESPACIO BANNER EN PIE DE PAGINA*/

      color: white;

    }

    

    .footer h3 a {

      text-decoration: none; /* Quita el subrayado */

      color: inherit; /* Mantiene el color original */

      transition: color 0.3s ease; /* Suaviza el cambio de color */

  }

  

  .footer h3 a:hover {

      color: #ff5500; /* Cambia a un color llamativo (puedes modificarlo) */

  }

  



    .footer-content {

      max-width: 1200px;

      margin: 0 auto;

      display: flex;

      flex-direction: column;

      text-align: center;

      gap: 1.5rem;

    }



    @media (min-width: 768px) {

      .footer-content {

        flex-direction: row;

        text-align: left;

        justify-content: space-between;

        align-items: center;

      }

    }



    .social-links {

      display: flex;

      gap: 1.5rem;

      justify-content: center;

    }



    @media (min-width: 768px) {

      .social-links {

        justify-content: flex-end;

      }

    }



    .social-link {

      color: white;

      text-decoration: none;

      display: flex;

      align-items: center;

      gap: 0.5rem;

    }



    .social-link:hover {

      color: #00ffbb;

    }



    .anime-image svg {

      position: absolute;

      top: 50%;

      left: 50%;

      transform: translate(-50%, -50%);

      opacity: 0.7;

    }



    .directory-title {

      font-size: 1.5rem;

      text-align: left;

      margin-bottom: 1.5rem;

      padding-bottom: 1rem;

      padding-left: 20px;

      border-bottom: 2px solid  rgba(255, 255, 255, 0.2);

      text-transform: uppercase;

      letter-spacing: 1px;

      color: #D9B57C;

      position: relative;

      line-height: 21px;

      font-weight: 600;

      font-family: "Oswald", sans-serif;

    }

    .directory-title::after {

      position: absolute;

      left: 0;

      top: -6px;

      height: 32px;

      width: 4px;

      background: #e53637;

      content: "";

    }



    @media (min-width: 768px) {

      .directory-title {

        font-size: 1.5rem;

        text-align: left;

      }

    }



    @media (max-width: 480px) {

      .anime-grid {

        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

      }



      .anime-card {

        max-width: 140px;

      }



      .anime-title {

        font-size: 0.7rem;

      }



      .anime-type,

      .anime-genres {

        font-size: 0.45rem;

        padding: 3px 8px;

      }

    }



    @media (max-width: 320px) {

      .anime-grid {

        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

      }



      .anime-card {

        max-width: 120px;

      }

    }

     /*Listón Comienza*/

     .status-ribbon {

  position: absolute;

  top: 15px;

  left: -30px;

  width: 120px;

  height: 25px;

  text-align: center;

  line-height: 25px;

  color: white;

  font-size: 12px;

  font-weight: bold;

  transform: rotate(-45deg);

  z-index: 2;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}





.status-ribbon.airing {

  background: linear-gradient(45deg, #27ae60, #00fbf7);

  box-shadow: 0 3px 10px rgba(46, 204, 113, 0.3);

  border: 1px solid rgba(255,255,255,0.3);

}



.status-ribbon.premium {

  background: linear-gradient(45deg, #fa7900, #ff0000); 

  box-shadow: 0 3px 10px rgba(231, 76, 60, 0.3);

  border: 1px solid rgba(255,255,255,0.3);

}



.status-ribbon:before,

.status-ribbon:after {

  content: "";

  position: absolute;

  width: 0;

  height: 0;

}



.status-ribbon:before {

  top: 0;

  left: -15px;

  border-top: 15px solid transparent;

  border-right: 15px solid rgba(0,0,0,0.2);

}



.status-ribbon:after {

  bottom: 0;

  right: -15px;

  border-bottom: 15px solid transparent;

  border-left: 15px solid rgba(0,0,0,0.2);

}



/*Boton nav Comienza*/

/* Ajustes del contenedor del menú desplegable */

.nav-link-container {

  position: relative; /* Para que el menú se alinee con su contenedor */

}



.dropdown-menu {

  display: none; /* El menú está oculto por defecto */

  position: absolute;

  top: 100%; /* Aparece justo debajo del botón */

  left: 0; /* Alineado a la izquierda */

  background: white;

  border: 1px solid #ddd;

  border-radius: 4px;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);

  z-index: 1000;

  width: 200px;

  max-height: 300px; /* Límite de altura para habilitar el scroll */

  overflow-y: auto; /* Activa el scroll si hay más de un cierto número de elementos */

}





/* Mostrar el menú cuando el contenedor es hover */

.nav-link-container:hover .dropdown-menu {

  display: block;

}



/* Estilo para los elementos del menú */

.dropdown-item {

  padding: 0.5rem 1rem;

  color: var(--dark);

  text-decoration: none;

  display: block;

}



.dropdown-item:hover {

  background: var(--light);

  color: white;

}



/* Ajustes para dispositivos móviles */

@media (max-width: 768px) {

  .dropdown-menu {

    left: 0; /* Mantener alineado a la izquierda */

    width: auto; /* Deja que el ancho se ajuste al contenido */

    max-width: 180px; /* Ancho máximo ajustado */

    min-width: auto; /* Elimina el ancho mínimo */

    max-height: 50vh; /* Limita la altura al 50% de la pantalla */

    overflow-y: auto; /* Activa el scroll vertical si el contenido excede la altura */

  }



  .dropdown-item {

    padding: 0.7rem 1rem; /* Aumenta el área de clic en móviles */

  }

}





/*publicidad pie pagina comienza*/

.ad-sticky {

  display: none !important;/*OJO AQUI ELIMINO ESTA LINEA DE CODIGO PARA ACTIVAR BANNERS 729X90 Y COLOCAR 110px EN EL FOOTER (margin-bottom: 110px) QUE ESTA ARRIBA*/

  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;

  background: var(--primary);

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 10px 0;

  z-index: 1000;

}



.ad-container {

  width: 728px;

  height: 90px;

  background: #0b0c2a;

  border-radius: 4px;

  overflow: hidden;

  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);

}





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

  .ad-container {

    width: 100%;

    max-width: 728px;

    margin: 0 10px;

  }

}







/*Donación brindame un cafe comienza*/

.kofi-button-wrapper {

  display: flex;

  justify-content: center;

  align-items: center;

  margin-top: 10px;

  flex-wrap: wrap;

}



.kofi-button img {

  height: 45px;

  width: auto;

  border-radius: 8px;

  box-shadow: 0 4px 10px rgba(0,0,0,0.1);

  transition: transform 0.2s ease;

}



.kofi-button img:hover {

  transform: scale(1.05);

}



@media (max-width: 480px) {

  .kofi-button img {

    height: 38px;

  }

}

/* Estilo para mensaje No Disponible by Hades */
.no-results-message {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
  font-size: 1.5rem;
  color: #ff5e00;
}

/* Estilo para select deshabilitados */
.filter-select:disabled {
  opacity: 0.7;
  background-color: #f5f5f5;
  cursor: not-allowed;
}

/* Opcional: Estilo para el texto dentro del select deshabilitado */
.filter-select:disabled option {
  color: #888;
}

/* Opcional: Estilo para el primer option (el placeholder) */
.filter-select option[value=""] {
  color: #999;
  font-style: italic;
}



/* Preloder */

/* PRELOADER FIX - EVITA EL "SALTO" */
html {
    overflow-y: scroll; /* Fuerza scrollbar siempre */
    margin-right: calc(-1 * (100vw - 100%)); /* Compensa el ancho del scrollbar */
}

body {
    overflow-x: hidden; /* Previene scroll horizontal */
    position: relative; /* Necesario para el preloader */
}

#preloder {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* 100% del viewport */
    height: 100vh;
    background: #000;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}

.loader {
    width: 40px;
    height: 40px;
    border: 4px solid #f44336;
    border-top-color: transparent;
    border-radius: 60%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/*ESTILOS PARA SEARCHBAR COMIENZA*/
   .search-summary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 10px 20px;
        border-radius: 8px;
        margin: 15px 0;
        font-size: 0.95rem;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        animation: slideDown 0.3s ease-out;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Nueva animación para desaparición */
    @keyframes slideUp {
        from {
            opacity: 1;
            transform: translateY(0);
        }
        to {
            opacity: 0;
            transform: translateY(-10px);
        }
    }