/* --- Estilos del Acordeón Personalizado (Seal of Hermeto) --- */

.custom-accordion-container {
    max-width: 900px; /* Ancho máximo para el acordeón */
    margin: 0px auto;
    padding: 5px;
    border-radius: 12px;
     /* Asegura que el borde redondeado se aplique a los ítems */
}

/* 🔑 ESTILO DEL HEADER (Fila sin abrir) */
.accordion-header {
    border-radius: 10px;
    display: block;
    width: 100%;
    margin:10px;
    height:150px;
    padding: 15px 15px;
    cursor: pointer;
    position: relative;
    
    /* Fondo inicial: Negro semitransparente */
    background-color: rgba(0, 0, 0, 0.5); 
    
    /* Transiciones para suavidad */
    transition: background-color 0.3s ease;
    
    /* 🔑 Imagen del Token y Gradiente a la derecha */
    background-size:auto 100% 100% 100%;
    
    background-position: left center, right center;
    background-repeat: no-repeat;

    /* Hover */
    filter: brightness(1);
    transition: filter 0.3s ease;
}

.lore-title{
    text-align: left;
    font-size:35px;
    border-bottom: #ffd5805b 1px solid;
    padding:5px;
    margin-bottom:10px;
}


.header-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative; /* Para que el texto flote sobre el fondo */
    z-index: 2;
    padding-left:500px;
}

.token-info  {
    text-align: left;
    margin-bottom: 0;
}

.seal-icon {
    width: 120px; /* Tamaño del Seal of Hermeto */
    height: auto;
    filter: drop-shadow(0 0 18px #ffd580); /* Pequeño glow al sello */
    
}

.on-pump-folio{
position:absolute;
top:16px;
right:10px;   
}

.address-seal{
    color: #16f384;
    font-size: 12px;
    margin-top:1px;
    margin-bottom:5px;
}

.pump-label{
color: #00ffea; 
text-shadow: 0 0 12px #00ffea, 0 0 24px #00ffea; /* Glow inicial */
animation: pulse-glow2 3s infinite ease-in-out; /* 3 segundos, infinito, suave */
}

.cto-label{
color: #ffffff; 
}

.category-label{
    position:absolute;
    bottom:10px;
    right:10px;  
}

.category-artcoin-label{
    color: #e4e01b; 
}

.category-irl-label{
    color: #16f384; 
}

.category-meme-label{
    color: #2baaff; 
}

.category-nft-label{
    color: #7701ff; 
    font-weight: bold;
}

 .category-media-label{
       
        color: #cd1be4; 
    }

.arrow{
position: absolute;
font-size:50px;
bottom:-5px !important;
opacity:0.5;
text-shadow: 0 0 12px #282828, 0 0 12px #282828; /* Glow inicial */
}

.seal-logo-wrapper{
position: absolute;
top:0px;
left:-10px;
}

.social-logos-seal{
    position: relative;
    text-align: right;
}

.social-logos-seal img{
    width:60px;
    height:60px;
}

.hermeto-seal-wrapper{
    position: relative;
display: flex;
  flex-direction: column; /* stacks items vertically */
  gap: 20px; /* space between rows */
  width: 650px; /* optional: width of the column */
  margin: 0 auto; /* center the column horizontally */
}

.hermeto-seal-wrapper img{
    height:auto;
    max-width:300px;
     filter: drop-shadow(0 0 5px #903bff) 
        drop-shadow(0 0 15px #d343ff)
        drop-shadow(0 0 35px #903bff)
        drop-shadow(0 0 160px #d68eff); 
        margin: 0 auto; /* center the column horizontally */
}

.seal-intro-text{
    padding:25px;
    font-size: 18px;    
     margin-top:-50px;
}

.seal-intro-text p{
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.399);
    margin:5px;
    padding:10px;   
}

#seal-deco{
    position:absolute;
    z-index:0;
    min-width:500px;
    top: 460px;
  left: 50%;
  opacity:0.5;
  transform: translate(-50%, -112%);
}


/* 🔑 CUERPO DEL ACORDEÓN (Contenido desplegable) */
.accordion-content {
    margin-left:15px;
    max-height: 0;
    overflow: hidden;
    margin-top:-10px;
    padding: 0px 25px;
    background: linear-gradient(rgba(4, 13, 23, 0.93),rgba(28, 7, 33, 0.93)),url('../images/seal/1_trencher_lore.png') no-repeat center bottom;
    text-shadow: 0 0 3px #282828, 0 0 3px #282828; /* Glow inicial */
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    text-align: left;
    color: #cfb8a3;
    border-bottom-left-radius:10px ;
    border-bottom-right-radius:10px ;  
}

.accordion-content-ftp {
    margin-left:15px;
    max-height: 0;
    overflow: hidden;
    margin-top:-10px;
    padding: 0px 25px;
    background: linear-gradient(rgba(4, 13, 23, 0.93),rgba(28, 7, 33, 0.93)),url('../images/seal/2_ftp_lore.png') no-repeat center bottom;
    text-shadow: 0 0 3px #282828, 0 0 3px #282828; /* Glow inicial */
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    text-align: left;
    color: #cfb8a3;
    border-bottom-left-radius:10px ;
    border-bottom-right-radius:10px ;  
}

.accordion-content-tokabu {
    margin-left:15px;
    max-height: 0;
    overflow: hidden;
    margin-top:-10px;
    padding: 0px 25px;
    background: linear-gradient(rgba(4, 13, 23, 0.93),rgba(28, 7, 33, 0.93)),url('../images/seal/3_tokabu_lore.png') no-repeat center bottom;
    text-shadow: 0 0 3px #282828, 0 0 3px #282828; /* Glow inicial */
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    text-align: left;
    color: #cfb8a3;
    border-bottom-left-radius:10px ;
    border-bottom-right-radius:10px ;  
}

.accordion-content-dollo{
    margin-left:15px;
    max-height: 0;
    overflow: hidden;
    margin-top:-10px;
    padding: 0px 25px;
    background: linear-gradient(rgba(4, 13, 23, 0.93),rgba(28, 7, 33, 0.93)),url('../images/seal/4_dollo_lore.png') no-repeat center bottom;
    text-shadow: 0 0 3px #282828, 0 0 3px #282828; /* Glow inicial */
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    text-align: left;
    color: #cfb8a3;
    border-bottom-left-radius:10px ;
    border-bottom-right-radius:10px ;  
}

.accordion-content-troll{
    margin-left:15px;
    max-height: 0;
    overflow: hidden;
    margin-top:-10px;
    padding: 0px 25px;
    background: linear-gradient(rgba(4, 13, 23, 0.93),rgba(28, 7, 33, 0.93)),url('../images/seal/5_troll_lore.png') no-repeat center bottom;
    text-shadow: 0 0 3px #282828, 0 0 3px #282828; /* Glow inicial */
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    text-align: left;
    color: #cfb8a3;
    border-bottom-left-radius:10px ;
    border-bottom-right-radius:10px ;  
}

.accordion-content-partyhats{
    margin-left:15px;
    max-height: 0;
    overflow: hidden;
    margin-top:-10px;
    padding: 0px 25px;
    background: linear-gradient(rgba(4, 13, 23, 0.93),rgba(28, 7, 33, 0.93)),url('../images/seal/6_partyhats_lore.png') no-repeat center bottom;
    text-shadow: 0 0 3px #282828, 0 0 3px #282828; /* Glow inicial */
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    text-align: left;
    color: #cfb8a3;
    border-bottom-left-radius:10px ;
    border-bottom-right-radius:10px ;  
}

.accordion-content-fric{
    margin-left:15px;
    max-height: 0;
    overflow: hidden;
    margin-top:-10px;
    padding: 0px 25px;
    background: linear-gradient(rgba(4, 13, 23, 0.93),rgba(28, 7, 33, 0.93)),url('../images/seal/7_fric_lore.png') no-repeat center bottom;
    text-shadow: 0 0 3px #282828, 0 0 3px #282828; /* Glow inicial */
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    text-align: left;
    color: #cfb8a3;
    border-bottom-left-radius:10px ;
    border-bottom-right-radius:10px ;  
}

.accordion-content-nub{
    margin-left:15px;
    max-height: 0;
    overflow: hidden;
    margin-top:-10px;
    padding: 0px 25px;
    background: linear-gradient(rgba(4, 13, 23, 0.93),rgba(28, 7, 33, 0.93)),url('../images/seal/8_nub_lore.png') no-repeat center bottom;
    text-shadow: 0 0 3px #282828, 0 0 3px #282828; /* Glow inicial */
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    text-align: left;
    color: #cfb8a3;
    border-bottom-left-radius:10px ;
    border-bottom-right-radius:10px ;  
}

.accordion-content-xavier{
    margin-left:15px;
    max-height: 0;
    overflow: hidden;
    margin-top:-10px;
    padding: 0px 25px;
    background: linear-gradient(rgba(4, 13, 23, 0.93),rgba(28, 7, 33, 0.93)),url('../images/seal/9_xavier_lore.png') no-repeat center bottom;
    text-shadow: 0 0 3px #282828, 0 0 3px #282828; /* Glow inicial */
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    text-align: left;
    color: #cfb8a3;
    border-bottom-left-radius:10px ;
    border-bottom-right-radius:10px ;  
}

.accordion-content-canelcorn{
    margin-left:15px;
    max-height: 0;
    overflow: hidden;
    margin-top:-10px;
    padding: 0px 25px;
    background: linear-gradient(rgba(4, 13, 23, 0.93),rgba(28, 7, 33, 0.93)),url('../images/seal/10_canelcorn_lore.png') no-repeat center bottom;
    text-shadow: 0 0 3px #282828, 0 0 3px #282828; /* Glow inicial */
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    text-align: left;
    color: #cfb8a3;
    border-bottom-left-radius:10px ;
    border-bottom-right-radius:10px ;  
}

.accordion-content-cupsey{
    margin-left:15px;
    max-height: 0;
    overflow: hidden;
    margin-top:-10px;
    padding: 0px 25px;
    background: linear-gradient(rgba(4, 13, 23, 0.93),rgba(28, 7, 33, 0.93)),url('../images/seal/11_cupsey_lore.png') no-repeat center bottom;
    text-shadow: 0 0 3px #282828, 0 0 3px #282828; /* Glow inicial */
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    text-align: left;
    color: #cfb8a3;
    border-bottom-left-radius:10px ;
    border-bottom-right-radius:10px ;  
}

.accordion-content-tbc{
    margin-left:15px;
    max-height: 0;
    overflow: hidden;
    margin-top:-10px;
    padding: 0px 25px;
    background: linear-gradient(rgba(4, 13, 23, 0.93),rgba(28, 7, 33, 0.93)),url('../images/seal/12_tbc_lore.png') no-repeat center bottom;
    text-shadow: 0 0 3px #282828, 0 0 3px #282828; /* Glow inicial */
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    text-align: left;
    color: #cfb8a3;
    border-bottom-left-radius:10px ;
    border-bottom-right-radius:10px ;  
}

.accordion-content-fwog{
    margin-left:15px;
    max-height: 0;
    overflow: hidden;
    margin-top:-10px;
    padding: 0px 25px;
    background: linear-gradient(rgba(4, 13, 23, 0.93),rgba(28, 7, 33, 0.93)),url('../images/seal/13_fwog_lore.png') no-repeat center bottom;
    text-shadow: 0 0 3px #282828, 0 0 3px #282828; /* Glow inicial */
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    text-align: left;
    color: #cfb8a3;
    border-bottom-left-radius:10px ;
    border-bottom-right-radius:10px ;  
}

.accordion-content-neet{
    margin-left:15px;
    max-height: 0;
    overflow: hidden;
    margin-top:-10px;
    padding: 0px 25px;
    background: linear-gradient(rgba(4, 13, 23, 0.93),rgba(28, 7, 33, 0.93)),url('../images/seal/14_neet_lore.png') no-repeat center bottom;
    text-shadow: 0 0 3px #282828, 0 0 3px #282828; /* Glow inicial */
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    text-align: left;
    color: #cfb8a3;
    border-bottom-left-radius:10px ;
    border-bottom-right-radius:10px ;  
}


/* 🔑 LÓGICA DE DESPLIEGUE (Basada en el checkbox) */
/* Cuando el checkbox está marcado, expande el contenido */
.accordion-item input:checked ~ .accordion-content {
    max-height: 100%; 
    padding: 20px 25px;
}

.accordion-item input:checked ~ .accordion-content-ftp {
    max-height: 100%; 
    padding: 20px 25px;
}

.accordion-item input:checked ~ .accordion-content-tokabu {
    max-height: 100%; 
    padding: 20px 25px;
}

.accordion-item input:checked ~ .accordion-content-dollo {
    max-height: 100%;
    padding: 20px 25px;
}

.accordion-item input:checked ~ .accordion-content-troll {
    max-height: 100%;
    padding: 20px 25px;
}

.accordion-item input:checked ~ .accordion-content-partyhats {
    max-height: 100%;
    padding: 20px 25px;
}

.accordion-item input:checked ~ .accordion-content-fric {
    max-height: 100%;
    padding: 20px 25px;
}

.accordion-item input:checked ~ .accordion-content-nub {
    max-height: 100%;
    padding: 20px 25px;
}

.accordion-item input:checked ~ .accordion-content-xavier {
    max-height: 100%;
    padding: 20px 25px;
}

.accordion-item input:checked ~ .accordion-content-canelcorn {
    max-height: 100%;
    padding: 20px 25px;
}

.accordion-item input:checked ~ .accordion-content-cupsey {
    max-height: 100%;
    padding: 20px 25px;
}

.accordion-item input:checked ~ .accordion-content-tbc {
    max-height: 100%;
    padding: 20px 25px;
}

.accordion-item input:checked ~ .accordion-content-fwog {
    max-height: 100%;
    padding: 20px 25px;
}

.accordion-item input:checked ~ .accordion-content-neet {
    max-height: 100%;
    padding: 20px 25px;
}

@media (hover: hover) and (pointer: fine) {
    .accordion-header:hover {
        filter: brightness(1.2); /* Ligeramente más brillante al pasar el mouse */
    }
}


@media (max-width: 1023px) {

    .social-logos-seal img{
    margin-top:20px;    
    width:130px;
    height:130px;
}

    .lore-title{
    text-align: center;
    font-size:45px;
    border-bottom: #ffd5805b 1px solid;
    padding:25px;
    margin-bottom:15px;
}

    .token-info  {
        position:absolute;
        left:0px;
        bottom:-540px;
    text-align: left;
    }

    .arrow-down{
        left:25px!important; 
    position: absolute;
    font-size:50px;
    bottom:20px!important;
    opacity:0.5;
    text-shadow: 0 0 12px #282828, 0 0 12px #282828; /* Glow inicial */
    }

    .accordion-item input:checked ~ .accordion-content {
    max-height: 100%; /* Suficientemente grande para el contenido */
    padding: 20px 25px;
}

    .title-seal{
        position:absolute;
        top:-158px;
        background-color: rgba(0, 0, 0, 0.7);
        padding:20px;
        width:100%;
        font-size:1.7vh !important;
        border-top-right-radius: 18px;
        border-bottom-right-radius: 18px;
    }

    .seal-icon {
        width: 220px; /* Tamaño del Seal of Hermeto */
        height: auto;
        filter: drop-shadow(0 0 18px #ffd580); /* Pequeño glow al sello */
    
    }

    
    .seal-logo-wrapper{
    position: absolute;
    top:180px;
    right:-500px;   
    }

    .token-card{
        font-size:28px;
        padding-left:25px !important;
    }

    .on-pump-folio{
    font-size:35px !important;
    position:absolute;
    bottom:60px;
    right:25px;   
    }

    .address-seal{
        font-size: 28px;
        padding-left:25px !important;
    }

    .pump-label{
    color: #00ffea; 
    text-shadow: 0 0 12px #00ffea, 0 0 24px #00ffea; /* Glow inicial */
    animation: pulse-glow2 3s infinite ease-in-out; /* 3 segundos, infinito, suave */
    }

    .cto-label{
    color: #ffffff; 
    }

    .category-label{
        position:absolute;
        bottom:16px;
        left:25px;  
        font-size: 35px;
    }

 
   

    .accordion-header {
    width: 100%;
    margin:0px;
    height:650px;
    padding:0px;
    cursor: pointer;
    position: relative;
    
    /* Fondo inicial: Negro semitransparente */
    background-color: rgba(0, 0, 0, 0.5); 
    
    /* Transiciones para suavidad */
    transition: background-color 0.3s ease;
    
    /* 🔑 Imagen del Token y Gradiente a la derecha */
    background-size:contain;
    
    background-position:top;
    background-repeat: no-repeat;
    
    

    /* Hover */
    filter: brightness(1);
    transition: filter 0.3s ease;
    }

    .accordion-content {
    height: 100%;
    padding: -1px 25px;
    font-size:35px;
    margin-left:0px;

    background: linear-gradient(rgba(4, 13, 23, 0.93),rgba(28, 7, 33, 0.93)),url('../images/seal/1_trencher_lore.png') no-repeat center bottom;
    text-shadow: 0 0 3px #282828, 0 0 3px #282828; /* Glow inicial */
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    text-align: left;
    color: #cfb8a3;
    border-bottom-left-radius:10px ;
    border-bottom-right-radius:10px ;
    
}

    #seal-deco{
        top:650px;
    min-width:700px;
    left: 50%;
    opacity:0.5;
    }


    .hermeto-seal-wrapper{
        position: relative;
    display: flex;
    flex-direction: column; /* stacks items vertically */
    gap: 20px; /* space between rows */
    width: 100%; /* optional: width of the column */
    margin: 0 auto; /* center the column horizontally */
    }

    .hermeto-seal-wrapper img{
     
    max-width:400px;
    height:auto;
    filter: drop-shadow(0 0 5px #903bff) 
        drop-shadow(0 0 15px #d343ff)
        drop-shadow(0 0 35px #903bff)
        drop-shadow(0 0 160px #d68eff); 
        margin: 0 auto; /* center the column horizontally */
    }

    .seal-intro-text{
        padding:25px;
        font-size: 35px;    
        margin-top:-50px;
    }


    .seal-intro-text p{
        border-radius: 6px;
        background-color: rgba(0, 0, 0, 0.399);
        margin:5px;
        padding:10px;

        
    }

    .custom-accordion-container {
    margin-bottom:10px;
    font-size: 35px; 
}
}