:root {
--bg-light: #f5e6c8; --bg-paper: #fdf6e3; --bg-paper-dark: #f0e0c0;
--text-light: #2c1810; --text-light-muted: #6b4e3d;
--accent-gold: #c9a84c; --accent-gold-dark: #a08030;
--border-light: #d4b896; --shadow-light: rgba(139,90,43,0.15);
--bg-dark: #0d0d1a; --bg-dark-card: #1a1a2e; --bg-dark-elevated: #252540;
--text-dark: #e8e0d0; --text-dark-muted: #a09080;
--accent-purple: #062863; --accent-purple-light: #607ec9;
--border-dark: #3a3a5c; --shadow-dark: rgba(0,0,0,0.4);
--font-title: 'Cinzel',serif; --font-body: 'Cormorant Garamond',serif; --font-ui: 'Noto Sans JP',sans-serif; --font-oswald: 'Oswald',sans-serif;
}
* {
    margin:0;
    padding:0;
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    font-family:var(--font-body);
    transition:background-color .5s ease,color .5s ease;
    min-height:100vh;
    overflow-x:hidden
}
body.light-mode{
    background:var(--bg-light);
    color:var(--text-light)
}
body.dark-mode{
    background:var(--bg-dark);
    color:var(--text-dark)
}

.navbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    padding:12px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    backdrop-filter:blur(12px);
    transition:all .5s ease;
    border-bottom:1px solid transparent
}
.light-mode .navbar{
    background:rgba(253,246,227,.85);
    border-bottom-color:var(--border-light)
}
.dark-mode .navbar{
    background:rgba(13,13,26,.85);
    border-bottom-color:var(--border-dark)
}
.logo{
    font-family:var(--font-title);
    font-size:1.4rem;
    font-weight:700;
    letter-spacing:2px;
    cursor:pointer
}
.light-mode .logo{
    color:var(--accent-gold-dark)
}.dark-mode .logo{
    color:var(--accent-purple-light)
}
.nav-links{
    display:flex;
    gap:28px;
    align-items:center;
    font-family:var(--font-ui);
    font-size:.85rem;
    font-weight:500;
    letter-spacing:1px
}
.nav-links a{
    text-decoration:none;
    transition:opacity .3s;
    cursor:pointer
}
.light-mode .nav-links a{
    color:var(--text-light-muted)
}.dark-mode .nav-links a{
    color:var(--text-dark-muted)
}
.nav-links a:hover{
    opacity:.7
}
.theme-toggle{
    width:44px;
    height:24px;
    border-radius:12px;
    position:relative;
    cursor:pointer;
    transition:background .4s;
    border:none
}
.light-mode .theme-toggle{
    background:var(--border-light)
}.dark-mode .theme-toggle{
    background:var(--accent-purple)
}
.theme-toggle::after{
    content:'';
    position:absolute;
    width:20px;
    height:20px;
    border-radius:50%;
    top:2px;
    transition:all .4s cubic-bezier(.68,-.55,.27,1.55)
}
.light-mode .theme-toggle::after{
    background:var(--accent-gold);
    left:2px;
    box-shadow:0 0 8px rgba(201,168,76,.5)
}
.dark-mode .theme-toggle::after{
    background:#e8e0d0;
    left:22px;
    box-shadow:0 0 12px rgba(123,104,238,.6)
}

/* ===== FONDO ESTRELLADO ===== */
.stars-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.star-dot {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    animation: twinkle 3s ease-in-out infinite;
}

.light-mode .star-dot {
    background: var(--accent-gold);
    opacity: 0.3;
}

.dark-mode .star-dot {
    background: var(--accent-purple-light);
    opacity: 0.4;
}

.star-dot:nth-child(1) { top: 10%; left: 15%; animation-delay: 0s; }
.star-dot:nth-child(2) { top: 20%; left: 80%; animation-delay: 0.5s; width: 3px; height: 3px; }
.star-dot:nth-child(3) { top: 35%; left: 25%; animation-delay: 1s; }
.star-dot:nth-child(4) { top: 45%; left: 70%; animation-delay: 1.5s; width: 3px; height: 3px; }
.star-dot:nth-child(5) { top: 55%; left: 10%; animation-delay: 0.3s; }
.star-dot:nth-child(6) { top: 65%; left: 85%; animation-delay: 0.8s; }
.star-dot:nth-child(7) { top: 75%; left: 40%; animation-delay: 1.2s; width: 3px; height: 3px; }
.star-dot:nth-child(8) { top: 15%; left: 50%; animation-delay: 1.8s; }
.star-dot:nth-child(9) { top: 30%; left: 90%; animation-delay: 0.2s; }
.star-dot:nth-child(10) { top: 50%; left: 5%; animation-delay: 1.1s; width: 3px; height: 3px; }
.star-dot:nth-child(11) { top: 80%; left: 60%; animation-delay: 0.6s; }
.star-dot:nth-child(12) { top: 5%; left: 35%; animation-delay: 1.4s; }
.star-dot:nth-child(13) { top: 60%; left: 30%; animation-delay: 0.9s; width: 3px; height: 3px; }
.star-dot:nth-child(14) { top: 40%; left: 55%; animation-delay: 1.7s; }
.star-dot:nth-child(15) { top: 25%; left: 65%; animation-delay: 0.4s; }
.star-dot:nth-child(16) { top: 70%; left: 15%; animation-delay: 1.3s; width: 3px; height: 3px; }
.star-dot:nth-child(17) { top: 85%; left: 75%; animation-delay: 0.7s; }
.star-dot:nth-child(18) { top: 12%; left: 95%; animation-delay: 1.6s; }
.star-dot:nth-child(19) { top: 90%; left: 45%; animation-delay: 0.1s; width: 3px; height: 3px; }
.star-dot:nth-child(20) { top: 8%; left: 5%; animation-delay: 1.9s; }

@keyframes twinkle {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.5); }
}


/* ===== HERO ===== */
.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    padding:80px 20px 40px
}
.hero-bg-pattern{
    position:absolute;
    inset:0;
    opacity:.03;
    background-image:radial-gradient(circle at 20% 50%,currentColor 1px,transparent 1px),radial-gradient(circle at 80% 50%,currentColor 1px,transparent 1px);
    background-size:40px 40px
}
.book-container{
    position:relative;
    perspective:1500px;
    width:min(420px,90vw);
    height:min(580px,70vh)
}
.book{
    width:100%;
    height:100%;
    position:relative;
    transform-style:preserve-3d;
    transition:transform .8s cubic-bezier(.25,.46,.45,.94);cursor:pointer
}
.book:hover{
    transform:rotateY(-8deg) rotateX(3deg)
}
.book-cover{
    position:absolute;
    inset:0;
    border-radius:4px 12px 12px 4px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:40px;
    text-align:center;
    backface-visibility:hidden;
    transition:all .5s
}
.light-mode .book-cover{
    background:linear-gradient(135deg,#3d2317,#5a3525,#3d2317);
    box-shadow:0 20px 60px var(--shadow-light),inset 0 0 30px rgba(0,0,0,.3),4px 0 0 #2a1810,8px 0 0 #1a1008;
    border:2px solid #6b4423
}
.dark-mode .book-cover{
    background:linear-gradient(135deg,#0a0a1a,#1a1a3a,#0a0a1a);
    box-shadow:0 20px 60px var(--shadow-dark),inset 0 0 30px rgba(123,104,238,.1),4px 0 0 #1a1a2e,8px 0 0 #0d0d1a;
    border:2px solid #3a3a5c}
.book-spine{
    position:absolute;
    left:-12px;
    top:0;
    bottom:0;
    width:16px;
    border-radius:4px 0 0 4px;
    transform:rotateY(-90deg);
    transform-origin:right
}
.light-mode .book-spine{
    background:linear-gradient(to right,#2a1810,#4a2e1a)
}.dark-mode .book-spine{
    background:linear-gradient(to right,#0a0a1a,#1a1a3a)
}
.book-ornament{
    width:80px;
    height:80px;
    border:2px solid;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:30px;
    position:relative
}
.light-mode .book-ornament{
    border-color:var(--accent-gold)
}.dark-mode .book-ornament{
    border-color:var(--accent-purple)
}
.book-ornament::before,.book-ornament::after{
    content:'';
    position:absolute;
    border-radius:50%;
    border:1px solid
}
.light-mode .book-ornament::before,.light-mode .book-ornament::after{
    border-color:var(--accent-gold)
}.dark-mode .book-ornament::before,.dark-mode .book-ornament::after{
    border-color:var(--accent-purple)
}
.book-ornament::before{
    width:60px;
    height:60px
}.book-ornament::after{
    width:40px;height:40px}
.book-ornament svg{
    width:24px;
    height:24px;
    z-index:2
}
.book-title{
    font-family:var(--font-title);
    font-size:2rem;
    font-weight:700;
    letter-spacing:4px;
    line-height:1.3;
    margin-bottom:12px
}
.light-mode .book-title{
    color:var(--accent-gold)
}.dark-mode .book-title{
    color:var(--accent-purple-light)
}
.book-subtitle{font-family:var(--font-body);font-size:1rem;font-style:italic;opacity:.7;letter-spacing:3px}
.light-mode .book-subtitle{color:#d4b896}.dark-mode .book-subtitle{color:#a090c0}
.book-author{
    margin-top:40px;
    font-family:var(--font-body);
    font-size:.9rem;
    letter-spacing:2px;
    opacity:.5
}
.light-mode .book-author{
    color:#d4b896
}.dark-mode .book-author{
    color:#a090c0
}
.book-decoration-line{
    width:60px;
    height:1px;
    margin:20px 0
}
.light-mode .book-decoration-line{
    background:var(--accent-gold)
}.dark-mode .book-decoration-line{
    background:var(--accent-purple)
  }
.hero-info{
    margin-left:60px;
    max-width:400px;
    animation:fadeInUp 1s ease .3s both
}

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

.hero-info h1{
    font-family:var(--font-title);
    font-size:3rem;
    font-weight:700;
    letter-spacing:3px;
    line-height:1.2;
    margin-bottom:20px
}
.light-mode .hero-info h1{
    color:var(--text-light)
}.dark-mode .hero-info h1{
    color:var(--text-dark)
}
.hero-info p{
    font-family:var(--font-body);
    font-size:1.2rem;
    line-height:1.8;
    margin-bottom:30px
}
.light-mode .hero-info p{
    color:var(--text-light-muted)
}.dark-mode .hero-info p{
    color:var(--text-dark-muted)
}

.btn-primary{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 36px;
    border-radius:4px;
    font-family:var(--font-ui);
    font-size:.85rem;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    border:none;
    cursor:pointer;
    transition:all .3s ease;
    text-decoration:none
}
.light-mode .btn-primary{
    background:var(--accent-gold-dark);
    color:#fff;
    box-shadow:0 4px 20px rgba(201,168,76,.3)
}
.dark-mode .btn-primary{
    background:var(--accent-purple);
    color:#fff;
    box-shadow:0 4px 20px rgba(123,104,238,.3)
}
.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 30px rgba(0,0,0,.2)
}
.btn-secondary{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 36px;
    border-radius:4px;
    font-family:var(--font-ui);
    font-size:.85rem;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    border:2px solid;
    cursor:pointer;
    transition:all .3s ease;
    background:transparent;
    margin-left:16px
}
.light-mode .btn-secondary{
    border-color:var(--border-light);
    color:var(--text-light-muted)
}.dark-mode .btn-secondary{
    border-color:var(--border-dark);
    color:var(--text-dark-muted)
}
.btn-secondary:hover{
    opacity:.7
}

/* ===== CHARACTERS SECTION ===== */
.characters-section{
    position:relative;
    z-index:3;
    padding:min(calc(80 / 350 * 100vw),80px) 0
}
.section-title{
    font-family:var(--font-title);
    font-size:2rem;
    font-weight:700;
    letter-spacing:3px;
    text-align:center;
    margin-bottom:60px;
    position:relative
}
.section-title::after{
    content:'';
    display:block;
    width:60px;
    height:2px;
    margin:16px auto 0
}
.light-mode .section-title::after{
    background:var(--accent-gold)}
.dark-mode .section-title::after{
    background:var(--accent-purple)
}

.character-grid{
    list-style:none;
    padding:0;
    margin:0 auto;
    max-width:1400px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:0
}

/* ===== CHARACTER CARD (EXACT TBHX STYLE) ===== */
.character-item{
    position:relative;
    flex:0 0 auto;
    width:calc(100% / 5 - 2px);
    min-width:220px;
    aspect-ratio:1 / 1.15;
    overflow:hidden;
    cursor:pointer;
    transition:all .4s ease;
    margin:1px
}
.character-item:nth-child(n+6){width:calc(100% / 5 - 2px)}
@media(max-width:1200px){
    .character-item{width:calc(100% / 3 - 2px)}
}
@media(max-width:768px){
    .character-item{width:calc(100% / 2 - 2px)}
}
@media(max-width:480px){
    .character-item{width:100%}
}

.character-item a{
    display:block;
    position:relative;
    width:100%;
    height:100%;
    text-decoration:none;
    color:inherit
}
.character-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;
    display:block
}
.character-item:hover img{
    transform:scale(1.08)
}

/* Diagonal clip — X shape (esquinas) */
.character-item::before,
.character-item::after{
    content:'';
    position:absolute;
    z-index:2;
    pointer-events:none
}
.character-item::before{
    top:0;
    left:0;
    width:0;
    height:0;
    border-style:solid;
    border-width:60px 60px 0 0;
    border-color:#000 transparent transparent transparent
}
.character-item::after{
    bottom:0;
    right:0;
    width:0;
    height:0;
    border-style:solid;
    border-width:0 0 60px 60px;
    border-color:transparent transparent #000 transparent
}

.light-mode .character-item::before{
    border-color:#f5e6c8 transparent transparent transparent
}
.light-mode .character-item::after{
    border-color:transparent transparent #f5e6c8 transparent
}
.dark-mode .character-item::before{
    border-color:#0d0d1a transparent transparent transparent
}
.dark-mode .character-item::after{
    border-color:transparent transparent #0d0d1a transparent
}

/* ===== SOMBRA SUPERIOR PARA LEGIBILIDAD DEL TEXTO ===== */
.character-shadow{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,0.6) 0%,
        rgba(0,0,0,0.2) 40%,
        rgba(0,0,0,0) 100%
    );
    z-index:1;
    pointer-events:none;
    transition:opacity .3s
}
.character-item:hover .character-shadow{
    opacity:1
}

/* Hero name wrap (top-right area) */
.character-heroNameWrap{
    position:absolute;
    top:12px;
    right:12px;
    z-index:3;
    text-align:right
}

.character-heroTitle{
    font-family:var(--font-oswald);
    font-size:.55rem;
    letter-spacing:1.5px;
    text-transform:uppercase;
    font-weight:500;
    margin-bottom:2px
}
.light-mode .character-heroTitle{
    color:rgba(255,255,255,.7)
}.dark-mode .character-heroTitle{
    color:rgba(255,255,255,.7)
}
.character-heroName{
    font-family:var(--font-oswald);
    font-size:.9rem;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase
}
.light-mode .character-heroName{
    color:#fff
}.dark-mode .character-heroName{
    color:#fff
}

/* Number wrap (bottom-left) */
.character-numWrap{
    position:absolute;
    bottom:12px;
    left:12px;
    z-index:3
}

.character-numTitle{
    font-family:var(--font-oswald);
    font-size:.5rem;
    letter-spacing:1.5px;
    text-transform:uppercase;
    font-weight:500;
    margin-bottom:-4px
}

.light-mode .character-numTitle{
    color:rgba(255,255,255,.7)
}.dark-mode .character-numTitle{
    color:rgba(255,255,255,.7)
}

.character-num{
    font-family:var(--font-oswald);
    font-size:2.8rem;
    font-weight:700;
    line-height:1;
    color:#ff4444;
    text-shadow:0 2px 10px rgba(255,68,68,.4);
    letter-spacing:-2px
}

/* ===== FOOTER ===== */
.footer{
    text-align:center;
    padding:60px 20px;
    font-family:var(--font-body);
    font-style:italic;
    opacity:.5;
    font-size:.9rem;
    letter-spacing:2px
}

@media(max-width:768px){
.hero{flex-direction:column;padding-top:100px}
.hero-info{margin-left:0;margin-top:40px;text-align:center}
.hero-info h1{font-size:2rem}
.nav-links{display:none}
}

/* ===== PREVENT FLASH: Tema oscuro aplicado en <html> antes de que body cargue ===== */
html.theme-dark {
  background: #0d0d1a; /* color de fondo oscuro */
}

html.theme-dark body {
  background: #0d0d1a;
  color: #607ec9;
}

/* ===== RESPONSIVE MÓVIL OPTIMIZADO ===== */
@media(max-width:768px){
    .hero{flex-direction:column;padding:80px 16px 40px;text-align:center}
    .hero-info{margin-left:0;margin-top:32px;max-width:100%;animation:none}
    .hero-info h1{font-size:1.6rem;letter-spacing:2px}
    .hero-info p{font-size:1rem;line-height:1.6;margin-bottom:20px}
    .btn-primary,.btn-secondary{padding:12px 24px;font-size:.75rem;width:100%;margin:0 0 10px 0}
    .btn-secondary{margin-left:0}
    .book-container{width:260px;height:380px;margin:0 auto}
    .book-title{font-size:1.4rem}
    .book-ornament{width:60px;height:60px}
    .nav-links{display:none}
    .navbar{padding:10px 16px}
    .logo{font-size:1.2rem}
    
    /* Character grid móvil */
    .character-item{width:calc(50% - 4px);min-width:140px;aspect-ratio:1/1.2;margin:2px}
    .character-heroName{font-size:.75rem}
    .character-num{font-size:2rem}
    .character-numTitle{font-size:.45rem}
    .section-title{font-size:1.4rem;margin-bottom:32px}
    .section-title::after{width:40px;margin-top:10px}
    .characters-section{padding:40px 0}
    
    .footer{padding:30px 16px;font-size:.75rem}
}

@media(max-width:480px){
    .character-item{width:100%;min-width:auto;aspect-ratio:1/1}
    .book-container{width:220px;height:320px}
    .hero-info h1{font-size:1.4rem}
}