@media (max-width: 1440px) {
    .character-layout { grid-template-columns: 320px 1fr 320px; }
}

@media (max-width: 1100px) {
    .character-layout { grid-template-columns: 1fr 1fr; }
    /* El centro (historia y retrato) sube arriba en tablet */
    .col-center { grid-column: 1 / -1; order: -1; } 
    .portrait-wrapper { height: 400px; }
    .bottom-layout { grid-template-columns: 1fr 1fr; }
    .footer-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .character-layout, .bottom-layout, .conditions-wrap { grid-template-columns: 1fr; }
    .character-header { flex-direction: column; text-align: center; gap: 10px; }
    .book-nav-top, .book-nav-bottom { flex-direction: column; gap: 15px; }
    .nav-left, .nav-right { justify-content: center; flex-wrap: wrap; width: 100%; }
    .portrait-wrapper { height: 350px; }
    .character-title h1 { font-size: 2.5rem; }
}