.background_runes{
    width:1050px;
    height:auto;
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  z-index: 2;
  pointer-events: none;
}

.deco_runes{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

.deco_runes_a{
 z-index: 3;
    min-width: 2300px; 
    mix-blend-mode: screen; 
    z-index: -1;
    opacity: 0.4;
    filter: drop-shadow(0 0 25px rgb(58, 166, 255))   
}

.circle_mask {
  width: 170px;
  height: 170px;
  border-radius: 50%;

  /* Máscara circular con degradado radial */
  -webkit-mask-image: radial-gradient(
    circle,
    rgba(0,0,0,1) 50%,
    rgba(0,0,0,0) 100%
  );
  mask-image: radial-gradient(
    circle,
    rgba(0,0,0,1) 50%,
    rgba(0,0,0,0) 100%
  );
}

#runesparticles {
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: 350px;
  z-index: 8;
  pointer-events: none;
  background: transparent;
  mix-blend-mode: screen;
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
}

@keyframes sparkle-fade2 {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }
    50% {
        opacity: 1; 
        
    }
    100% {
        opacity: 0; 
        transform: translate(var(--dest-x), var(--dest-y)) scale(0.5);
    }
}

/* Nuevo contenedor para Hermeto y el resplandor */
.hermeto-container {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    width: 1100px; /* Tamaño del contenedor, igual que la imagen de Hermeto */
    height: auto;
}

/* Imagen de Hermeto (ahora se posiciona dentro del contenedor) */
.hermeto_runes {
    position: relative; /* Clave: se posiciona en relación a su padre */
    width: 100%; /* Ocupa el 100% del contenedor */
    height: auto;
    display: block;
}

.arrows:active {
    transform: scale(0.7);
    transition: transform 0.6s ease-out;
}

.arrows{
    transition: filter 0.5s ease-in-out, transform 0.5s ease;
    width:100px;
    height:auto;
}

.arrows:hover{
    /* Resplandor (glow) al pasar el mouse */
    filter: brightness(2) drop-shadow(0 0 10px #40b3ff) drop-shadow(0 0 20px #379eff) ;
    transform: scale(0.8);
    mix-blend-mode: screen;
}

/* El resplandor (ahora posicionado sobre el ojo del sombrero) */
.circular_light_runes {
    position: absolute;
    top: 27%; /* Ajusta el porcentaje para colocarlo verticalmente */
    left: 27%; /* Ajusta el porcentaje para colocarlo horizontalmente */
    width: 200px; /* Ajusta el tamaño del resplandor en relación con Hermeto */
    height: auto;
    transform: translate(-50%, -50%); /* Centra el resplandor con precisión */
    z-index: 6;
    mix-blend-mode: screen;
    pointer-events: none;
}
.circular_light_runes2 {
    position: absolute;
    top: 77%; /* Ajusta el porcentaje para colocarlo verticalmente */
    left: 24%; /* Ajusta el porcentaje para colocarlo horizontalmente */
    width: 300px; /* Ajusta el tamaño del resplandor en relación con Hermeto */
    height: auto;
    transform: translate(-50%, -50%); /* Centra el resplandor con precisión */
    z-index: 6;
    mix-blend-mode: screen;
    pointer-events: none;
}

#crystal-ball-particles{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index:11;
  background: transparent;
  mix-blend-mode:screen;
  filter: drop-shadow(0 0 10px #28a9ff) drop-shadow(0 0 20px #1fadff); 
  pointer-events: none;
}

.runes-swirl{
    top:55%;
    width:500px;
    height:auto;
    position: absolute;
    transform: translate(-50%, -55%);
    z-index: 5;
    opacity: 0.2;
    pointer-events: none;
    mix-blend-mode:screen;
}

/* Estilos para el Slider */
#runes-card-slider {
    position: absolute;
    top: 43%;
    left: 50%;
    transform: translate(-49%, -50%);
    width: 60%; /* Ajusta el ancho para el contenedor del slider */
    z-index: 10; /* Asegura que esté frente a la bola de cristal */
}

/* Contenedor del Carrusel (donde se ocultan las imágenes) */
.runes-slider {
    overflow: hidden;
    position: relative;
    min-width: 450px;
    border-radius: 10px;
    
    /* Máscara para desvanecer bordes izquierdo y derecho */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 20%,
        black 80%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 20%,
        black 80%,
        transparent 100%
    );
}

/* El contenedor interno que se desliza */
.slider-wrapper {
    display: flex;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
}


/* Estilos para las imágenes de las cartas */
.slider-wrapper img {
    width: 100%;
    height: auto;
    transform: scale(1.3);
    margin-top:17%;
    padding:70px;
    flex-shrink: 0; /* Evita que las imágenes se encojan */
    object-fit: contain;
    filter: contrast(110%) saturate(115%) brightness(98%);
}

/* Estilos de las flechas de navegación */
.slider-nav {
    border: none;
    background: rgba(0, 0, 0, 0);
    color: white;

    transition: background-color 0.3s ease, transform 0.3s ease;
}

.slider-nav:hover {
    background: rgba(0, 0, 0, 0);
    transform: scale(1.4);
    
}
    .runes-card-img {
    transition: filter 0.6s ease, transform 0.6s ease;
    
    
}

/* runes CARD DESCRIPTION POPUP */



  .runes-card-img:hover {
    filter: brightness(1.2) drop-shadow(0 0 10px #a55fff) drop-shadow(0 0 10px #b575ff) ;
    transform: scale(1.35);
    cursor: pointer;
   
    mix-blend-mode: screen;
}

    .runes-card-img:active {
        transform: scale(1.3); 
    }

    /* Efecto al pasar el mouse por el botón de cerrar */
.runes-close-x:hover {
    transform: scale(1.1);
}



/* Estilos del Pop-up de Información del runes */
#runes-info-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(18, 5, 27, 0.50); /* Oscurece el fondo */
    backdrop-filter: blur(8px); /* Blur sutil */
    -webkit-backdrop-filter: blur(8px);
    z-index: 999; /* Asegura que esté por encima de todo */
    display: none; /* 🔑 Inicialmente oculto */
    justify-content: center;
    align-items: center;
}

.runes-popup-content {
    position: relative;
    width: 900px; /* Tamaño del gráfico runes_card_background */
    max-width: 90vw;
    height: 600px;
    max-height: 90vh;
}

.runes-popup-content img.background-img {
    width: 90%;    
    height: 100%;
    overflow: visible;
    object-fit: cover;
}

/* Estructura Interna del Contenido (dentro del gráfico) */
.runes-info-grid {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* 1 columna para la imagen, 1.5 para el texto */
    gap: 20px;
    padding: 20px;
}

/* Columna de la Carta */
.runes-info-card-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

.runes-info-card-col img {
    max-width: 130%;
    max-height: 130%;
    margin-right:70px;
    object-fit: contain;


}

/* Columna de la Descripción */
.runes-info-text-col {
    text-align: left;
    overflow-y: auto; /* Permite scroll solo en la descripción si es muy larga */
    padding-right: 15px;
    color: #6d6258;
    font-size: clamp(1rem, 4.5vw, 1.2rem);
}

.runes-info-text-col h2 {
    color: #252525;
    font-size: clamp(1.2rem, 4.5vw, 2rem);
    margin-bottom: -0.5rem;
}

.runes-info-text-col h3 {
    font-size: clamp(0.9rem, 4.5vw, 1.5rem);
    color: #4b8f8f;
    margin-top: 1rem;
    margin-bottom: 0rem;
}



.runes-close-x {
    position: absolute;
    top: 46%; /* Ajusta la posición vertical */
    right: 2.5%; /* Ajusta la posición horizontal */
    width: 80px; /* Tamaño de la cruz */
    cursor: pointer;
    font-size: 45px;
    color:beige;
    background-color: rgba(0, 0, 0, 0.438);
    padding-top: 7px;;
    font-weight: bold;
    border-radius: 100%;
    z-index: 4; /* Asegura que esté por encima del fondo del popup */
    transition: transform 0.2s ease-in-out;
    
}


.background-img{
 width:200%;
 transform: rotate(90deg);
 filter: drop-shadow(0 0 5px #3b69ff) 
        drop-shadow(0 0 15px #5f43ff)
        drop-shadow(0 0 35px #3bc1ff)
        drop-shadow(0 0 160px #8ea8ff); 
}


@media (max-width: 1023px) {

   

    .deco_runes_a{
    z-index: 3;
    min-width: 2300px; 
    mix-blend-mode: screen; 
    z-index: -1;
    opacity: 0.4;
    filter: drop-shadow(0 0 25px rgb(58, 166, 255))   
}



    /* Fondo de runes */
    .background_runes {
        width: 130%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -58%);
    }

    /* Hermeto centrado como desktop */
    .hermeto-container {
        top: 42%;
        left: 50%;
        width: 140%;
        transform: translate(-50%, -50%);
    }

    /* Swirl detrás */
  .runes-swirl {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50%;
      opacity: 0.25;
  }

    /* Slider centrado como desktop */
    #runes-card-slider {
        top: 37%;
        left: 50%;
        transform: translate(-50%, -40%);
        width: 60%;
    }

    /* Flechas más grandes pero alineadas como desktop */
    .arrows {
        width: 150px;
        z-index: 25;
    }

    .arrow_left {
        position: absolute;
        top: 130%;
        left: 10%;
        transform: translateY(-50%);
        z-index: 25;
    }

    .arrow_right {
        position: absolute;
        top: 130%;
        right: 10%;
        transform: translateY(-50%);
        z-index: 25;
    }

    /* POPUP ================================================= */

    .background-img {
        width: 160%;
        transform: rotate(0deg);
    }

    .runes-popup-content {
        width: 100%;
        max-width: 95vw;
        height: auto;
    }

    .runes-popup-content img.background-img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* Carta grande del popup */
    .runes-info-card-col img {
    transform: scale(1.5);
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
  }

    /* Texto del popup bajo la carta */
    .runes-info-text-col {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 0);
        width: 90%;
        font-size: clamp(1.2rem, 4.5vw, 2rem);
        text-align: center;
    }

    .runes-info-text-col h2 {
        font-size: clamp(2rem, 4.5vw, 2.5rem);
        margin-bottom: .3rem;
    }

    .runes-info-text-col h3 {
        font-size: clamp(1.5rem, 4.5vw, 2.5rem);
        margin-bottom: .8rem;
    }

    /* Botón cerrar centrado abajo */
    .runes-close-x {
        color:beige;
        position: absolute;
        top: 85%;
        left: 44%;
        width: 110px;
        height: 110px;
        font-size: 50px;
        padding-top: 20px;
    }

}