/* =====================================================
   ZDIBU ANIME EXPLORER
   FUTURE SEARCH EXPERIENCE
===================================================== */


/* =====================================================
   GLOBAL
===================================================== */


#anime-home{

position:relative;

min-height:100vh;

padding:20px 15px 100px;

color:white;

overflow:hidden;


background:

linear-gradient(
180deg,
rgba(5,7,18,.88),
rgba(5,5,12,.97)
),

url("/assets/img/anime/oshi-no-ko.webp");


background-size:cover;

background-position:center top;

background-attachment:scroll;

}



#anime-home::before{

content:"";

position:absolute;

inset:0;


background:

radial-gradient(
circle at top,
rgba(0,217,255,.12),
transparent 35%
);

pointer-events:none;

}



#anime-home > *{

position:relative;

z-index:2;

}



/* =====================================================
 HERO
===================================================== */


.anime-hero{

min-height:520px;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

}



.anime-hero-content{

width:100%;

max-width:1000px;

margin:auto;

}



.hero-badge{

display:inline-flex;

padding:10px 25px;

border-radius:50px;


background:

linear-gradient(
90deg,
#ff4fd8,
#7b2fff
);


font-size:13px;

font-weight:900;

letter-spacing:2px;


box-shadow:

0 0 30px rgba(255,79,216,.35);

}





.anime-hero h1{

margin:25px auto 15px;


font-size:

clamp(38px,6vw,75px);


font-weight:1000;


line-height:1.05;


background:

linear-gradient(
90deg,
#00d9ff,
#7b2fff,
#ff4fd8
);


-webkit-background-clip:text;

color:transparent;


max-width:900px;

}



.anime-hero p{

max-width:700px;

margin:auto;


font-size:18px;

color:#ddd;

line-height:1.6;

}



/* =====================================================
 SEARCH
===================================================== */


.hero-search{

width:100%;

max-width:750px;


margin:45px auto;


display:flex;

padding:8px;


border-radius:60px;


background:

rgba(255,255,255,.08);


border:

1px solid rgba(255,255,255,.25);


background:rgba(255,255,255,.12);


box-shadow:

0 0 50px rgba(0,217,255,.25);

}



.hero-search input{

flex:1;

border:0;

outline:none;


background:transparent;


padding:20px 28px;


font-size:18px;


color:white;

}



.hero-search input::placeholder{

color:#aaa;

}



.hero-search button{


width:65px;

height:65px;


border-radius:50%;


border:0;


cursor:pointer;


font-size:24px;


background:

linear-gradient(
135deg,
#00d9ff,
#7b2fff
);


color:white;

}





/* =====================================================
 STATS
===================================================== */


.hero-stats{


display:flex;


justify-content:center;


align-items:center;


flex-wrap:wrap;


gap:15px;


}



.hero-stats div{


min-width:130px;


padding:20px;


border-radius:20px;


background:

rgba(255,255,255,.08);


border:

1px solid rgba(255,255,255,.15);


backdrop-filter:blur(15px);

}



.hero-stats strong{


display:block;


font-size:32px;


color:#00d9ff;


}



.hero-stats span{

color:#ccc;

}



/* =====================================================
 CHIPS
===================================================== */


.anime-chip-section{


display:flex;


justify-content:center;


align-items:center;


flex-wrap:wrap;


gap:12px;


margin:30px auto;


}



.anime-chip{


padding:12px 22px;


border-radius:50px;


background:

rgba(255,255,255,.08);


border:

1px solid rgba(255,255,255,.15);


cursor:pointer;


font-weight:800;


transition:.3s;


}



.anime-chip:hover{


transform:translateY(-5px);


background:

linear-gradient(
90deg,
#7b2fff,
#ff4fd8
);


}





/* =====================================================
 TITULOS
===================================================== */


.section h2,
.anime-results-section h2,
#filtros-anime h2{


display:flex;

align-items:center;

justify-content:center;


gap:12px;


margin:45px auto 25px;


font-size:28px;


font-weight:900;


text-align:center;


}



.section h2::after,
.anime-results-section h2::after{


content:"";


height:3px;


width:120px;


background:

linear-gradient(
90deg,
#00d9ff,
transparent
);


}





/* =====================================================
 FILTROS
===================================================== */


.anime-filters{


max-width:1000px;

margin:auto;


display:flex;


justify-content:center;


gap:15px;


flex-wrap:wrap;


padding:25px;


border-radius:25px;


background:

rgba(255,255,255,.07);


border:

1px solid rgba(255,255,255,.15);


}



.anime-filters select{


min-width:200px;


padding:15px;


border-radius:15px;


border:0;


background:#111827;


color:white;


font-weight:700;

}





/* =====================================================
 RESULTADOS + DISCOVERY PREMIUM
===================================================== */


.anime-results-section{

max-width:1300px;

margin:60px auto 0;

}



/* TITULOS DE SECCION */

.anime-results-section h2,
.discovery-title h2{

font-size:26px;

font-weight:1000;

color:white;

display:flex;

align-items:center;

gap:12px;

}



.anime-results-section h2::after,
.discovery-title h2::after{

content:"";

height:2px;

flex:1;

background:

linear-gradient(
90deg,
#00d9ff,
transparent
);

}









/* =====================================================
 DISCOVERY
===================================================== */


.anime-discovery{


max-width:1300px;

margin:45px auto;


}



.discovery-block{


margin-bottom:40px;


}



.discovery-title{


display:flex;

justify-content:space-between;

align-items:center;


margin-bottom:18px;


}




.discovery-title a{


display:none;


}



/* MINI CARDS */


.mini-anime-row{


display:flex;

gap:15px;


overflow-x:auto;


scrollbar-width:none;


}



.mini-anime-row::-webkit-scrollbar{

display:none;

}



.mini-card{


flex:

0 0 auto;


width:125px;


height:175px;


border-radius:18px;


overflow:hidden;


position:relative;


background:#111;


box-shadow:

0 10px 25px rgba(0,0,0,.35);


}



.mini-card img{


width:100%;

height:100%;


object-fit:cover;


}



.mini-card::after{


content:"";

position:absolute;

inset:0;


background:

linear-gradient(
transparent,
rgba(0,0,0,.85)
);


}



.mini-card span{


position:absolute;

bottom:10px;

left:10px;

right:10px;


z-index:2;


font-size:12px;

font-weight:900;


}




/* =====================================================
 EXPLORAR
===================================================== */


.explore-menu{


display:grid;


grid-template-columns:

repeat(4,1fr);


gap:15px;


}




.explore-menu a{


height:90px;


border-radius:20px;


background:

rgba(255,255,255,.06);


border:

1px solid rgba(255,255,255,.12);


display:flex;

flex-direction:column;

justify-content:center;

align-items:center;


color:white;


font-weight:800;


}





.explore-menu span{


font-size:24px;

margin-bottom:5px;


}




/* =====================================================
   BOTON CARGAR MAS - PREMIUM MINIMAL
===================================================== */

.anime-cargar-mas{

    display:flex;

    align-items:center;

    justify-content:center;


    margin:35px auto;


    padding:11px 26px;


    width:max-content;


    border-radius:14px;


    border:1px solid rgba(255,255,255,.14);


    background:#171722;


    color:#ffffff;


    font-size:14px;


    font-weight:700;


    letter-spacing:.3px;


    cursor:pointer;


    position:relative;

    overflow:hidden;


    transition:

        transform .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;


}


/* pequeño movimiento al pasar */

.anime-cargar-mas:hover{


    transform:translateY(-3px);


    background:#202033;


    border-color:rgba(255,255,255,.35);


    box-shadow:

        0 8px 25px rgba(0,0,0,.25);


}



/* efecto de pulsación suave */

.anime-cargar-mas:active{


    transform:translateY(-1px) scale(.98);


}



/* pequeño brillo lateral */

.anime-cargar-mas::before{


    content:"";


    position:absolute;


    inset:0;


    background:rgba(255,255,255,.06);


    transform:translateX(-110%);


    transition:transform .45s ease;


}



.anime-cargar-mas:hover::before{


    transform:translateX(110%);


}




/* =====================================================
 MOBILE
===================================================== */


@media(max-width:700px){


#anime-home{

padding-left:10px;

padding-right:10px;

background-attachment:scroll;

}



.anime-hero{

min-height:430px;

}



.anime-hero p{

font-size:14px;

}



.hero-search{

margin:30px auto;

}



.hero-search input{


font-size:14px;


padding:15px;


}



.hero-search button{


width:50px;

height:50px;

}



.hero-stats div{


min-width:90px;

padding:15px;

}



.hero-stats strong{


font-size:24px;

}



.section h2,
.anime-results-section h2,
#filtros-anime h2{


font-size:20px;

}



.explore-menu{


grid-template-columns:

repeat(4,1fr);


gap:8px;

}



.explore-menu a{


height:75px;


font-size:10px;


}



.explore-menu span{


font-size:20px;


}


}