/*
Theme Name: Feraltime
Author: Dappy
Version: 1.0
*/

/* =====================================================
   1. VARIABLES Y TEMAS
===================================================== */
:root {
    --border-radius: 10px;
    --border-radius-mobile: 3.4666666667vw;
    --max-main-width: 1100px;
    --max-main-width-tablet: 790px;
    --max-secondary-width: 900px;
    
    --color-primary: #f02897;
    --color-secundary: #0051ff;
    --color-tercary: #00c566;
    --font-size-normal: 13px;
    --font-color-normal: #333333;
    
    --margin-main-container: 0 auto;
    --margin-secondary-container: 60px auto;

    /* Tamaño de secciones */
    --header-height: 116px;
    --header-height-mobile: 93px;
    --hero-slider-height: 350px;

    /* Grids */
    --columns-mini: repeat(4, 1fr);
    --columns-normal: repeat(5, 1fr);
    --columns-special: repeat(6, 1fr);

    --gap-normal: 12px;
    --gap-special: 15px;
    --gap-ad-banner: 35px;
    --gap-actions-separation: 20px;

    --transition-fast: 0.2s ease;
    --transition-fast-soft: transform 0.3s ease, opacity 0.3s ease;
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --font-main: 'Nunito', sans-serif;
    
    --blur: blur(10px);
    --mini-click-scale: scale(1.05);

}

[data-theme="dark"] {
    --bg: black;
    --text: white;
}

/* =====================================================
   2. ESTILOS BASE Y RESET
===================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Usa esta configuración en su lugar para evitar desbordamientos laterales sin bloquear el scroll vertical */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Evita scroll horizontal por los animales laterales */
    width: 100%;
    -webkit-overflow-scrolling: touch; /* Mejora scroll en iOS */
}

body {
    min-height: 100vh;
    margin: 0;
    overflow-y: auto !important; /* Fuerza a que el scroll vertical sea posible */
}

#reader-container, main, .site-content {
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
}

body {
    margin: 0;
    height: 100%;
    overflow-y: auto;
    font-family: var(--font-main);
    font-weight: 300;
    position: relative;
}
#wpadminbar { display: block; }

/* =====================================================
   3. SISTEMA DE FONDOS (BACKGROUND LAYERS)
===================================================== */

/* Capa 1: Huellitas orgánicas */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23f02897' fill-opacity='0.035' d='M30.4,43.2c3.2,0,5.8-3.4,5.8-7.6s-2.6-7.6-5.8-7.6s-5.8,3.4-5.8,7.6S27.1,43.2,30.4,43.2z M43.4,32.3c3.2,0,5.8-3.4,5.8-7.6 s-2.6-7.6-5.8-7.6s-5.8,3.4-5.8,7.6S40.2,32.3,43.4,32.3z M57.2,32.3c3.2,0,5.8-3.4,5.8-7.6s-2.6-7.6-5.8-7.6s-5.8,3.4-5.8,7.6 S54,32.3,57.2,32.3z M70.5,43.2c3.2,0,5.8-3.4,5.8-7.6s-2.6-7.6-5.8-7.6s-5.8,3.4-5.8,7.6S67.3,43.2,70.5,43.2z M50.5,47.8 c-10,0-18.4,7.4-18.4,18.4c0,9.1,5.2,12.3,8.4,12.3c2.7,0,4.8-1.7,7.1-1.7c2.3,0,4.3,1.7,7.1,1.7c3.2,0,8.4-3.2,8.4-12.3 C73.1,55.1,60.5,47.8,50.5,47.8z'/%3E%3C/svg%3E");
    background-size: 320px 320px, 500px 500px, 700px 700px;
    background-position: 0 0, 180px 120px, -120px 260px;
    background-repeat: repeat;
    z-index: -10;
    pointer-events: none;
}

/* Capa 2: Mesh gradient suave */
body::after, html::before {
    content: "";
    position: fixed;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    filter: blur(120px);
    will-change: transform;
    z-index: -9;
    opacity: 0.07;
    pointer-events: none;
}

html::before {
    bottom: -150px;
    left: -150px;
    background: var(--color-secundary);
}

/* Capa 3: Noise (grano sutil) */
html::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("noise.png");
    background-size: 200px 200px;
    background-repeat: repeat;
    opacity: 0.02;
    pointer-events: none;
    z-index: -8;
}

/* Contenedor del patrón detrás de las mascotas */
.home-layout::before {
    content: "";
    position: absolute;
    top: 500px;
    left: 0;
    width: 100%;
    height: 600px;
    background-image: radial-gradient(#d1d1d1 1px, transparent 1px);
    background-size: 25px 25px;
    opacity: 0.3;
    mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
    z-index: -2;
    pointer-events: none; 
}


/* --- CAPAS DE PROFUNDIDAD --- */

/* NIVEL 5: Todo el contenido interactivo y bloques (ARRIBA) */
body, .main_container, .secondary_container, .hero-slider, .series, .new-stories, .promo-banner, .btn-filter, .archive-sidebar {
    position: relative;
    background-color: transparent;
}


/* Aseguramos que el HTML y el Body ocupen todo el alto */
html, body {
    height: 100%;
    margin: 0;
}

/* Configuramos el body para que sea un contenedor flexible vertical */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* El contenedor principal (donde están tus posts) debe estirarse */
/* Ajusta '.archive-page-container' o el ID de tu wrapper principal */
#page, .archive-page-container { 
    flex: 1 0 auto; 
}

/* El footer se queda en su sitio, pero al final del flex */
footer {
    flex-shrink: 0;
}







/* =====================================================
   4. LAYOUTS Y CONTENEDORES PRINCIPALES
===================================================== */
.home-layout {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

/* PC: orden normal */
.logo-nav { order: 1; }
.hero-slider { order: 2; }

.main_container {
    width: min(90vw, var(--max-main-width));
    margin: var(--margin-main-container);
}

.main_container section {
    margin: 20px auto;
}

@media (max-width: 768px) {
    .kinks-explorer,
    .fanfic-collections {
        margin: 0 !important;
    }
}

.secondary_container {
    max-width: var(--max-secondary-width);
    margin: var(--margin-secondary-container);
}

.promo-banner,
.contenido {
    position: relative;
    z-index: 2;
}

/* =====================================================
   5. GRIDS Y BANNERS
===================================================== */
.grid { display: grid; }

.grid.mini {
    gap: var(--gap-special);
    grid-template-columns: var(--columns-mini);
}

.grid.normal {
    gap: var(--gap-normal);
    grid-template-columns: var(--columns-normal);
}

.grid.special {
    gap: var(--gap-special);
    grid-template-columns: var(--columns-special);
}

.promo-banner {
    display: grid;
    gap: var(--gap-ad-banner);
}

.promo-banner.one { grid-template-columns: 1fr; }
.promo-banner.two { grid-template-columns: repeat(2, 1fr); margin: 40px 0 0 0 !important; }
.promo-banner.three { grid-template-columns: repeat(3, 1fr); }

/* =====================================================
   6. MASCOTAS LATERALES (DEER & WOLF)
===================================================== */
.side-wolf, .side-deer {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.05));
}

.side-deer {
    top: 750px;
    left: 0;
    width: 620px;
    transform: translateX(-58%);
}

.side-wolf {
    top: 550px;
    right: 0;
    width: 220px;
    transform: translateX(15%);
}

/* =====================================================
   7. COMPONENTES: TÍTULOS Y ANIMACIONES
===================================================== */
.section_title_line {
    position: relative;
    flex-grow: 1;
    will-change: transform, opacity;
    height: 2px;
    background-color: var(--color-primary);
    overflow: hidden;
    transform-origin: left;
    animation: line-grow 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.section_title_line::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 150px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    animation: line-shimmer 3.5s infinite;
    animation-delay: 1s;
}

@keyframes line-grow {
    0% { transform: scaleX(0); opacity: 0; }
    100% { transform: scaleX(1); opacity: 1; }
}

@keyframes line-shimmer {
    0% { left: -150%; }
    15% { left: 150%; }
    100% { left: 150%; }
}

/* =====================================================
   8. COMPONENTES: TARJETAS (CARDS)
===================================================== */

.story-card, .site-header {
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
}

.story-card {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.series a {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    cursor: pointer;
}

.novel-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 10px 20px rgba(240, 40, 151, 0.2);
}

/* =====================================================
   9. COMPONENTES: BOTONES Y TAGS
===================================================== */

.btn-filter {
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: 20px;
    padding: 6px 16px;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}

.btn-filter:hover {
    background-color: rgba(240, 40, 151, 0.1);
    transform: translateY(-2px);
}

.btn-filter[data-active="true"] {
    background-color: var(--color-primary);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(240, 40, 151, 0.3);
}

[data-theme="dark"] .btn-filter { color: var(--color-primary); }
[data-theme="dark"] .btn-filter[data-active="true"] { color: var(--bg); }

.kink-filter-tag, .kink-tag-mini, .kink-count, .p-in-data {
    font-family: 'Space Mono', monospace;
    letter-spacing: -0.5px;
}

.kink-tag-mini {
    background: rgba(240, 40, 151, 0.08);
    color: var(--color-primary);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

/* =====================================================
   10. COMPONENTES: LISTAS DE CAPÍTULOS Y BLOQUEOS
===================================================== */
.chapter-list-scroll li.is-locked {
    background-color: #f5f5f5;
    pointer-events: none;
}

.chapter-list-scroll li.is-locked a {
    color: #999 !important;
    cursor: not-allowed;
}

.chapter-list-scroll li.is-locked:hover { background-color: #eeeeee; }

.chapter-list-scroll li .dashicons-lock {
    color: #bbb;
    margin-left: 8px;
    transition: color 0.3s ease;
}

.chapter-list-scroll li.is-locked:hover .dashicons-lock { color: #444; }

.is-locked-item {
    background-color: #f9f9f9 !important;
    color: #bbb !important;
}

.is-locked-item .dashicons-lock {
    color: #ccc;
    font-size: 16px;
}

/* Banner de Capítulos Avanzados */
.advanced-chapters-banner {
    background: #000 !important;
    padding: 15px !important;
    margin: 10px 0 !important;
    border-radius: 4px;
    pointer-events: auto !important;
}

.banner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.banner-content span {
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.buy-membership-btn {
    background: #fff;
    color: #000 !important;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    transition: transform 0.2s;
}

.buy-membership-btn:hover, .btn-kofi:hover, .collection-item:hover .collection-bg, .series-item:hover img{
    transform: var(--mini-click-scale)
}

/* Animación Lock Shake */
@keyframes shake-blocked {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}

.shake-now {
    animation: shake-blocked 0.3s ease-in-out;
    background-color: #ffeaea !important;
}

/* =====================================================
   11. MEDIA QUERIES (DESKTOP)
===================================================== */
@media (min-width: 769px) {
    .animal-item.all {
        display: none;
    }

    /* Seleccionamos el grid de New Stories */
    #new-stories-grid {
        display: grid;
        grid-template-columns: var(--columns-special); /* Tus 6 columnas */
        overflow: hidden;
    }
    
    /* Ocultamos cualquier tarjeta que pase de la sexta posición */
    .kinks-cloud-wrapper a.button_tech-white:nth-child(n+7) {
        display: none !important;
    }

}

/* En móvil mantenemos el scroll horizontal si así lo tenías */
@media (max-width: 1023px) {
    #new-stories-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}




/* =====================================================
   12. MEDIA QUERIES (MOBILE)
===================================================== */

@media (max-width: 1600px) {
    .side-deer, .side-wolf { display: none; }
}

@media (max-width: 768px) {
    /* Layout Swap Mobile */
    .logo-nav { order: 2; }
    .hero-slider { order: 1; }
    
    .btn-filter {
        border-radius: 10px;
        padding: 3px 10px;
    }

    /* Mascotas sutiles en móvil */

    /* Márgenes Contenedor */
    .main_container section:not(.kinks-explorer):not(.fanfic-collections) {
        margin: 0px auto 15px auto;
    }

    /* Scroll Horizontal Kink Explorer & New Stories */
    .kinks-explorer,
    .new-stories {
        width: 100%; /* Cambiado de 100vw a 100% */
        margin-left: 0;
        margin-right: 0;
        overflow: hidden;
    }

    #new-stories-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 15px !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none; 
        /* Elimina o cambia margin-right por padding-right */
        margin-right: 0; 
        padding-right: 40px; /* Esto da el espacio al final del scroll sin desbordar el layout */
    }

    #new-stories-grid::-webkit-scrollbar { display: none; }

    .story-card {
        flex: 0 0 150px !important;
        width: 150px;
    }

    .kinks-cloud-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding: 18px 20px 18px 0px !important; 
        gap: 10px !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none; 
    }
    .kinks-cloud-wrapper::-webkit-scrollbar { display: none; }

    .kink-filter-tag, .click_to_action_button {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center;
    }
}




/*  =====================================================
        NUEVO
  ===================================================== */

/* --- ESTILOS PARA EL LABEL DE CAPÍTULOS (POSICIÓN EXTERNA) --- */

.series-item {
    position: relative;
    /* IMPORTANTE: Eliminamos o cambiamos overflow:hidden para que el badge se vea por fuera */
    overflow: visible !important; 
}

/* --- CONFIGURACIÓN DEL BADGE (ESTADO REPOSO) --- */

/* --- CONFIGURACIÓN DEL BADGE ACTUALIZADA --- */

.chapter-label-badge {
    position: absolute;
    top: -5px;
    right: -15px;
    width: 100px;
    height: 31px;
    z-index: 20;
    
    /* Centrado Flexbox */
    display: flex;
    align-items: center;      /* Centrado vertical */
    justify-content: center;   /* Centrado horizontal */
    
    /* Ajuste fino: el SVG tiene una 'cola' abajo, 
       subimos el texto un poco para que se vea centrado visualmente */
    padding-bottom: 4px; 
    
    transition: var(--transition-normal);
    pointer-events: none;
}

.chapter-label-badge span {
    color: #ffffff;
    font-family: var(--font-main);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    line-height: 1; /* Evita que el interlineado mueva el texto */
    transition: color var(--transition-normal);
    
    /* Aseguramos que el span ocupe el ancho necesario */
    display: inline-block;
    width: 100%;
}

/* El resto del código (::before y hover) se mantiene igual */
.chapter-label-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-primary);
    -webkit-mask-image: url('assets/img/Chapter-Label.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center; /* Asegura que la máscara esté centrada */
    z-index: -1;
    transition: background-color var(--transition-normal);
}

.chapter-label-badge span {
    color: #ffffff;
    font-family: var(--font-main);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    transition: color var(--transition-normal);
}

/* --- EFECTO HOVER ENFOCADO EN LA IMAGEN --- */

.series-item:hover img.black_square_border {
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    z-index: 5;
}

.series-item:hover .chapter-label-badge {
    /* 1. Se hace más pequeño */
    transform: scale(0.85) translate(-5px, 10px); 
    /* 2. Baja la opacidad para no distraer */
    opacity: 0.6; 
}

.series-item:hover .chapter-label-badge::before {
    /* 3. El SVG se vuelve blanco o gris muy claro */
    background-color: #ffffff; 
}

.series-item:hover .chapter-label-badge span {
    /* 4. El texto cambia para mantener legibilidad (o se oculta si prefieres) */
    color: var(--font-color-normal);
    text-shadow: none;
}










/* Contenedor padre relativo */
.story-card {
    position: relative; /* Base para el círculo azul */
}

/* El círculo azul sobre la imagen y el card */
.new-series-badge {
    position: absolute;
    top: -5px;      /* Un poco hacia arriba para que sobresalga */
    right: -5px;    /* Un poco hacia la derecha para que sobresalga */
    background-color: var(--color-secundary);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    z-index: 100; /* Asegura que esté por encima de todo */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    pointer-events: none; /* Permite hacer click a través del círculo */
}



/* Nuevo badge para posts del día */
.new-post-badge {
    position: absolute;
    top: -5px;      /* Sobresale un poco hacia arriba */
    right: -5px;    /* Sobresale un poco hacia la derecha */
    background-color: var(--color-primary); /* Color Rosa Feraltime */
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    text-transform: uppercase;
}





.story-details {
    text-align: center; /* Centra todo el contenido de la tarjeta */
    padding: 10px 5px;
}

.story-title-group h3 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

/* Contenedor del nombre de la Serie/Colección */
.story-parent-name {
    display: flex;
    align-items: center;
    justify-content: center; /* Centrado horizontal */
    gap: 5px;
    margin-bottom: 8px;
}

.parent-text {
    font-size: 11px;
    color: #777;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%; /* Evita que rompa el diseño si es muy largo */
}

/* Centrado de los Kinks */
.story-kinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Asegura que los #hashtags también se centren */
    gap: 6px;
    margin-top: 5px;
}

.kink-tag-mini {
    font-size: 10px;
    color: #999;
}






/* --- Estilos Base --- */
.library-container {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
}

.library-header h1 {
    font-size: 2.2rem;
    color: #003366;
    margin-bottom: 5px;
}

.library-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 30px;
}

/* --- Encabezados de Sección --- */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #f0f0f0;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.section-header h2 {
    font-size: 1.3rem;
    color: #111;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.clear-btn {
    background: none;
    border: 1px solid #ddd;
    color: #888;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.clear-btn:hover {
    background: #fdf2f2;
    color: #e74c3c;
    border-color: #e74c3c;
}

/* --- Items y Wrapper --- */
.library-item-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.library-item {
    display: flex;
    align-items: center;
    flex-grow: 1;
    padding: 10px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.library-item:hover {
    border-color: #003366;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.item-thumb {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
    margin-right: 15px;
    background: #f9f9f9;
}

.item-title {
    display: block;
    color: #111;
    font-weight: 700;
    font-size: 0.95rem;
}

.item-meta {
    font-size: 0.8rem;
    color: #999;
}

/* --- Botón de Eliminar Individual --- */
.remove-item-btn {
    background: transparent;
    border: none;
    color: #ccc;
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s;
}

.remove-item-btn:hover {
    color: #e74c3c;
}

.empty-notice {
    padding: 30px;
    background: #fafafa;
    border-radius: 8px;
    text-align: center;
    color: #aaa;
    font-style: italic;
}

/* --- Mobile --- */
@media (max-width: 800px) {
    .library-grid { grid-template-columns: 1fr; }
}




/* Asegura que el body ocupe toda la altura de la ventana */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

/* El contenedor principal crecerá para ocupar el espacio disponible */
/* Ajusta el nombre de la clase si el contenedor de tu header/footer es distinto */
.main_container, 
main { 
    flex: 1 0 auto; 
}

/* El footer se queda al final */
footer {
    flex-shrink: 0;
}


















:root {
    --primary-pink: #ff2d78; /* Ajusta a tu tono exacto */
    --dark-bg: #0a0a0a;
    --card-bg: #161616;
    --text-gray: #b0b0b0;
}

.membership-page {
    background-color: #fbeded;
    color: B;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

.mem-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 20px;
    font-family: var(--font-main);
}

/* Hero Section */
.mem-hero {
    background: radial-gradient(circle at top right, rgba(255, 45, 120, 0.15), transparent),
                radial-gradient(circle at bottom left, rgba(255, 45, 120, 0.05), transparent);
    text-align: center;
    padding: 120px 0;
}

.badge {
    background: rgba(255, 45, 120, 0.2);
    color: var(--primary-pink);
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
}

.mem-hero h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin: 20px 0;
    font-weight: 900;
}

.u-pink { color: var(--primary-pink); }

.hero-subtitle {
    font-size: 1.25rem;
    color: black;
    max-width: 600px;
    margin: 0 auto 40px;
}

/* Buttons */
.cta-button {
    background-color: var(--color-primary);
    color: white;
    font-size: 1.2rem;
    font-weight: 800;
    padding: 20px 50px;
    border-radius: 50px;
    text-transform: none;
    box-shadow: 0 10px 0px #970036;
    transition: all 0.2s ease;
    text-decoration: none;
}

.cta-button:hover {
    transform: translateY(-3px);
}

p.small-text {
    margin-top: 50px;
    color: white;
}

/* Benefits Cards */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.benefit-card {
    background: var(--card-bg);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid #222;
    transition: 0.3s;
}

.benefit-card.highlighted {
    border-color: var(--primary-pink);
    position: relative;
}

.benefit-card:hover {
    border-color: #444;
    background: #1c1c1c;
}

.benefit-icon {
    font-size: 40px;
    margin-bottom: 20px;
}

/* Explanation Section */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
}

.check-list {
    list-style: none;
    padding: 0;
}

.check-list li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.image-wrapper {
    background: linear-gradient(45deg, var(--primary-pink), #8a2be2);
    padding: 10px;
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* Payment Box */
.payment-card {
    background: #111;
    border-radius: 30px;
    padding: 60px;
    text-align: center;
    border: 1px dashed #333;
}

.payment-status {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
}

.status-item {
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 50px;
    background: #000;
}

.status-item .dot {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.status-item.active .dot { background: #00ff88; box-shadow: 0 0 10px #00ff88; }
.status-item.pending { opacity: 0.5; }

/* Responsive */
@media (max-width: 768px) {
    .mem-hero h1 { font-size: 2.5rem; }
    .grid-2 { grid-template-columns: 1fr; text-align: center; }
    .explanation-image { order: -1; }
}

.point-visual.library-visual {
    margin-left: auto;
}



/* 1. Preparamos el body para que sea un contenedor flexible */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Obliga al body a medir al menos el alto de la pantalla */
    margin: 0;
}

/* 2. Hacemos que el div principal de la membresía "empuje" al footer */
.membership-page {
    flex: 1 0 auto; /* Esto ocupa todo el espacio disponible arriba del footer */
}

/* 3. Aseguramos que el footer no tenga posiciones fijas heredadas */
footer {
    flex-shrink: 0; /* Evita que el footer se comprima */
    position: relative !important;
    bottom: auto !important;
}


/* --- ESTILO SHONEN JUMP --- */

.shonen-title {
    font-size: 2.5rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 60px;
    text-transform: none;
}

.shonen-points-list {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.shonen-point {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: 40px;
    position: relative;
}

.shonen-point.reverse {
    grid-template-columns: 1fr 1.2fr;
}

.shonen-point.reverse .point-content {
    order: 2;
}

/* El Número del Punto */
.point-number {
    font-size: 1.5rem;
    font-weight: 800;
    border-bottom: 2px solid var(--primary-pink);
    display: inline-block;
    padding-right: 50px;
    margin-bottom: 20px;
    position: relative;
}

.point-number span {
    font-size: 5rem;
    color: var(--primary-pink);
    line-height: 1;
    position: absolute;
    bottom: -5px;
    right: 0;
}

.point-content h3 {
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 700;
}

.point-content p {
    color: var(--text-gray);
    font-size: 1.1rem;
    max-width: 450px;
}

/* Visuales e Imágenes */
.floating-covers {
    position: relative;
    height: 300px;
}

.cover-main {
    width: 180px;
    transform: rotate(-5deg);
    border: 3px solid #fff;
    position: absolute;
    z-index: 2;
}

.cover-sub {
    width: 150px;
    left: 100px;
    top: 30px;
    transform: rotate(10deg);
    position: absolute;
    z-index: 1;
}

/* Estilo para el mini-grid del Punto 2 */
.mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    background: #222;
    padding: 15px;
    border-radius: 8px;
}

.mini-item {
    aspect-ratio: 2/3;
    background: #333;
    border: 1px solid #444;
}

.floating-covers img {
    width: 260px;
}


/* Ajuste Mobile para este estilo */
@media (max-width: 768px) {
    .shonen-point, .shonen-point.reverse {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .shonen-point.reverse .point-content {
        order: 0;
        padding: 0 20px;
    }

    .library-preview-img {
        width: 80% !important;
    }

    .point-content p {
        margin: 0 auto;
    }

    .point-number {
        padding-right: 40px;
    }
    
    .point-number span {
        font-size: 4rem;
    }

    .cover-sub {
        left: 35px;
    }

    .cover-main {
        right: 25px;
    }


    .floating-covers img {
        width: 200px;
    }


}




/* --- OPTIMIZACIÓN MOBILE --- */

@media (max-width: 768px) {
    /* Ajustes de Contenedores */
    .mem-container {
        padding: 40px 30px; /* Reducimos padding vertical en móviles */
    }

    /* Hero Section Mobile */
    .mem-hero {
        padding: 60px 0;
        background: radial-gradient(circle at center, rgba(255, 45, 120, 0.1), transparent);
    }

    .mem-hero h1 {
        font-size: 2.2rem; /* Tamaño más legible en vertical */
        line-height: 1.2;
        letter-spacing: -1px;
    }

    .hero-subtitle {
        font-size: 1.1rem;
        padding: 0 10px;
    }

    .cta-button {
        width: 100%; /* Botón ancho completo para facilitar el clic táctil */
        text-align: center;
        padding: 16px 20px;
    }

    /* Grid de Beneficios */
    .benefits-grid {
        grid-template-columns: 1fr; /* Una sola columna */
        gap: 20px;
    }

    .benefit-card {
        padding: 30px 20px;
        text-align: center;
    }

    /* Vanguard System (Explanation) */
    .grid-2 {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .explanation-image {
        order: -1; /* La imagen aparece arriba del texto en móvil */
        max-width: 250px;
        margin: 0 auto;
    }

    .check-list li {
        justify-content: center; /* Centramos la lista en móvil */
        text-align: left;
    }

    /* Payment Box Mobile */
    .payment-card {
        padding: 40px 20px;
        border-radius: 20px;
    }

    .payment-status {
        flex-direction: column; /* Estados de pago uno sobre otro */
        gap: 10px;
        align-items: center;
    }

    .status-item {
        width: 100%;
        max-width: 280px;
    }

    .checkout-img {
        width: 100%;
        height: auto;
        margin-top: 20px;
    }

    /* Footer CTA */
    .mem-footer-cta h2 {
        font-size: 1.8rem;
    }
}




/* --- SHONEN JUMP EDITORIAL THEME --- */

:root {
    --jump-red: #d32f2f; /* Rojo vibrante de Shonen Jump */
    --shonen-bg: #fdf2f2; /* Fondo rosa pálido/crema muy suave */
    --text-black: #1a1a1a;
    --text-gray-dark: #444;
}

.membership-page.shonen-theme {
    background-color: var(--shonen-bg);
    color: var(--text-black);
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overflow-x: hidden;
}

.u-red { color: var(--color-primary); }

/* Títulos Impactantes */
.shonen-main-title {
    font-size: 2.5rem !important;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -1.5px;
    margin-bottom: 80px;
    color: var(--text-black);
}

.jump-title {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1.1;
    color: var(--text-black);
}

/* --- Estructura de Puntos (Benefits) --- */

.shonen-points-list {
    display: flex;
    flex-direction: column;
    gap: 120px; /* Gran espacio entre puntos */
}

.shonen-point {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: 60px;
    position: relative;
    margin-top: 30px;
}

/* Disposición Inversa (Texto a la derecha) */
.shonen-point.reverse {
    grid-template-columns: 1fr 1.2fr;
}

/* El Número del Punto y la Línea Roja */
.point-number-wrapper {
    position: relative;
    display: flex;
    align-items: flex-end;
    margin-bottom: 30px;
}

.point-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-black);
    margin-right: 10px;
    text-decoration: underline;
}

.point-digit {
    font-size: 6rem;
    font-weight: 800;
    line-height: 0.8;
    color: var(--color-primary);
}

.red-line {
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100vw; /* Cruza toda la pantalla */
    height: 3px;
    background-color: var(--jump-red);
    z-index: -1; /* Detrás del texto */
}

/* Contenido de Texto */
.point-content h3 {
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 25px;
    color: var(--text-black);
    font-weight: 700;
}

.point-content p {
    color: var(--text-gray-dark);
    font-size: 1.15rem;
    line-height: 1.6;
    max-width: 500px;
    font-weight: 600;
}

/* --- Visuales Shonen --- */

/* Punto 1: Portadas Flotantes */
.floating-covers {
    position: relative;
    height: 350px;
}

.cover-sub {
    width: 170px;
    right: 20px;
    top: 60px;
    transform: rotate(5deg);
    position: absolute;
    z-index: 1;
}

/* Punto 2: Preview de la librería */
.library-preview-img {
    width: 100%;
    max-width: 550px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-radius: 20px;
}

/* Punto 3: Ilustración especial */
.point-three-img {
    width: 100%;
    max-width: 600px;
    height: auto;
}

/* --- Botón de Suscripción Temático (Amarillo) --- */
.cta-button {
    background-color: var(--color-primary); /* Amarillo vibrante */
    color: white;
    font-size: 1.2rem;
    font-weight: 800;
    padding: 20px 50px;
    border-radius: 50px; /* Muy redondeado */
    text-transform: none;
    transition: all 0.2s ease;
}

.cta-button:hover {
    transform: translateY(3px);
}

/* --- Optimización Mobile --- */
@media (max-width: 992px) {
    .shonen-point, .shonen-point.reverse {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .shonen-point.reverse .point-visual {
        order: 2; /* Imagen abajo en mobile */
    }

    .point-number-wrapper {
        justify-content: center;
    }

    .point-digit { font-size: 5rem; }
    .point-content p { margin: 0 auto; }

    .shonen-main-title {
        display: block !important;
        text-align: center;
    }

    .u-red {
        font-size: 60px;
    }

    .shonen-points-list {
        gap: 20px;
    }

}




/* Hero Section con Imagen de Fondo (Nala) */
.mem-hero.premium-kv {
    position: relative;
    text-align: center;
    padding: 120px 0;
    overflow: hidden;
    background-color: #000; /* Fondo de seguridad */
}

.mem-hero.premium-kv::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Ruta dinámica hacia la imagen de Nala */
    background-image: url('assets/img/Nala.jpg'); 
    background-size: cover;
    background-position: center 20%;
    /* FILTROS: Ajusta el blur (desenfoque) y el brightness (brillo) según necesites */
    filter: blur(4px) brightness(0.5) saturate(0.8);
    transform: scale(1.1); /* Evita bordes blancos por el blur */
    z-index: 1;
}


/* Asegura que el contenido esté por encima del fondo */
.mem-hero .mem-container {
    position: relative;
    z-index: 2;
}

/* Ajuste de contraste para el texto sobre la imagen */
.jump-title {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

.badge {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 0 15px rgba(240, 40, 151, 0.4);
}





/* Estilos para la sección About Subscription */
.mem-about-subscription {
    padding: 80px 0;
    background-color: #ffffff;
}

.professional-title {
    font-size: 2.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -1px;
    margin-bottom: 10px;
}

.section-subtitle {
    color: #666;
    margin-bottom: 50px;
}

.subscription-steps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

.step-card {
    background: #f8f9fa;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #eee;
    position: relative;
    transition: transform 0.3s ease;
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.step-card.featured {
    border-color: #e62117; /* Tu color u-red */
    background: #fff;
}

.step-badge {
    background: #e62117;
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    margin-bottom: 20px;
}

.step-info h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #1a1a1a;
}

.step-info p {
    color: #444;
    line-height: 1.6;
    font-size: 0.95rem;
}

.support-notice {
    text-align: center;
    font-size: 0.85rem;
    color: #999;
}

/* Responsivo */
@media (max-width: 768px) {
    .subscription-steps-grid {
        grid-template-columns: 1fr;
    }
        
    .mem-hero.premium-kv::before {
        filter: blur(12px) brightness(0.7) saturate(0.7);
    }

}




/* Contenedor principal del encabezado */
.subscription-header {
    display: flex;
    flex-direction: column; /* Apila los elementos uno sobre otro en móvil */
    align-items: center;
    text-align: center;
    padding: 0 20px;
    margin-bottom: 40px;
}

/* Ajuste del Título Principal */
.main-step-title {
    font-size: 2rem; /* Tamaño reducido para móvil */
    line-height: 1.1;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 15px;
    width: 100%;
}

.main-step-title .u-red {
    display: block; /* Fuerza a que "Beast Tier" baje a una nueva línea si es necesario */
    font-size: 2.5rem;
}

/* Ajuste del Subtítulo */
.section-subtitle {
    font-size: 1rem;
    line-height: 1.4;
    color: #666;
    max-width: 300px; /* Limita el ancho para que no se extienda demasiado */
    margin: 15px auto;
}

/* Media Query para Escritorio (Desktop) */
@media (min-width: 768px) {
    .main-step-title {
        font-size: 3rem;
    }
    
    .main-step-title .u-red {
        display: inline; /* En escritorio vuelve a estar en la misma línea */
    }

    .section-subtitle {
        max-width: 600px;
        font-size: 1.1rem;
    }
}










/* 2. Clase de Activación (Lo que el JS activa) */
#chapters-menu.is-visible {
    display: flex !important; /* Forzamos la visibilidad */
    flex-direction: column;
    animation: slideInUp 0.2s ease-out;
}

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

/* 3. Estilos de los items para que se vea profesional */
.chapter-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
}

.episode-row {
    border-bottom: 1px solid #f9f9f9;
}

.episode-row a, .ep-link-wrapper {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    text-decoration: none;
    font-size: 14px;
}

.episode-row:hover { background: #fdfdfd; }

.ep-number {
    font-weight: 700;
    color: #ccc;
    margin-right: 10px;
    min-width: 30px;
}

.ep-title { flex-grow: 1; font-weight: 500; }

/* 4. Estilo de Bloqueo (Imagen BEAST) */
.locked-chapter { background: #fafafa; opacity: 0.8; }
.locked-trigger {
    background: #000;
    color: #fff;
    font-size: 10px;
    padding: 3px 7px;
    border-radius: 4px;
    font-weight: 800;
}

/* 5. Banner Inferior */
.beast-membership-banner {
    background: #000;
    position: sticky;
    bottom: 0;
}

.beast-membership-banner a {
    display: block;
    padding: 10px;
    text-align: center;
    color: #fff !important;
    font-size: 12px;
    text-decoration: none;
}




/* Asegura que el contenedor no corte el menú que sale hacia arriba */
.reader-toolbar, 
.toolbar-inner, 
.novel-selector, 
.dropdown-wrapper {
    overflow: visible !important;
}

/* Forzamos que el menú esté por encima de todo */
#chapters-menu {
    display: none; 
    z-index: 999999 !important;
}

/* Esta es la clase que el JS activará ahora */
#chapters-menu.is-visible {
    display: flex !important;
}