/* =========================
   Responsive tablet
   992px hacia abajo
========================= */

@media(max-width:992px){

    .intro-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .history-image{
        justify-content:center;
    }

    .history-image img{
        max-width:320px;
    }

    .chapters-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .transmedia-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .timeline-step,
    .timeline-step:nth-child(odd),
    .timeline-step:nth-child(even){
        grid-template-columns:64px 1fr;
        gap:22px;
        align-items:start;
    }

    .timeline-s::before{
        left:32px;
    }

    .timeline-step:nth-child(odd) .timeline-content,
    .timeline-step:nth-child(even) .timeline-content{
        grid-column:2;
        grid-row:1;
        text-align:left;
        max-width:100%;
    }

    .timeline-step:nth-child(odd) .timeline-image,
    .timeline-step:nth-child(even) .timeline-image{
        grid-column:2;
        grid-row:2;
        justify-self:start;
        max-width:320px;
    }

    .timeline-point{
        grid-column:1;
        grid-row:1 / span 2;
        width:62px;
        height:62px;
    }
}


/* =========================
   Navbar escritorio
   1024px hacia arriba
========================= */

@media(min-width:1024px){

    .desktop-nav{
        display:flex;
    }

    .menu-toggle{
        display:none;
    }
}


/* =========================
   Navbar tablet y móvil
   1023px hacia abajo
========================= */

@media(max-width:1023px){

    .desktop-nav{
        display:none;
    }

    .menu-toggle{
        display:flex;
    }
}


/* =========================
   Responsive móvil
   768px hacia abajo
========================= */

@media(max-width:768px){

    section{
        padding:80px 6%;
    }

    .navbar{
        top:20px;
        left:20px;
        padding:0;
    }

    .menu-toggle{
        width:46px;
        height:46px;
    }

    .fullscreen-menu{
        height:100dvh;
        min-height:100vh;
        padding:85px 6% 42px;
        gap:16px;
        justify-content:center;
    }

    .fullscreen-menu a{
        font-size:clamp(1.45rem,6vw,2rem);
        line-height:1.05;
    }

    .hero{
    background-image:
        linear-gradient(
            180deg,
            rgba(32,54,74,.18) 0%,
            rgba(32,54,74,.56) 48%,
            rgba(32,54,74,.96) 100%
        ),
        url('../../img/hero/hero-mobile.png');

    background-size:cover;
    background-position:center center;
    align-items:flex-end;
}

    .hero-overlay{
        background:
        linear-gradient(
            180deg,
            rgba(32,54,74,.22) 0%,
            rgba(32,54,74,.62) 52%,
            rgba(32,54,74,.94) 100%
        );
    }

    .hero-content{
        padding:0 6% 64px 6%;
        text-align:left;
    }

    .hero h1{
        font-size:3.6rem;
        line-height:1;
    }

    .hero p{
        font-size:1rem;
    }

    .intro h2{
        font-size:2.15rem;
        line-height:1.18;
        max-width:100%;
    }

    .intro p{
        font-size:.95rem;
    }

    .history-image img{
        max-width:280px;
    }

    .section-header h2{
        font-size:2.25rem;
        line-height:1.16;
    }

    .chapters-grid,
    .transmedia-grid{
        grid-template-columns:1fr;
    }

    .chapter-card{
        min-height:230px;
    }

    .curiosity-slider{
        min-height:520px;
        margin-top:60px;
    }

    .curiosity-track{
        height:500px;
    }

    .curiosity-card{
        width:86%;
        grid-template-columns:1fr;
        min-height:auto;
        padding:24px;
    }

    .curiosity-card.prev-card{
        transform:translate(-90%,-50%) scale(.7);
    }

    .curiosity-card.next-card{
        transform:translate(-10%,-50%) scale(.7);
    }

    .curiosity-card img{
        aspect-ratio:16 / 10;
    }

    .slider-btn{
    width:44px;
    height:44px;
    font-size:1.8rem;
    z-index:20;
    }

    .slider-btn.prev{
    left:14px;
    }

    .slider-btn.next{
    right:14px;
    }

    .timeline-section{
        margin-top:80px;
    }

    .timeline-section > .section-tag{
        margin-bottom:50px;
    }

    .timeline-s{
        gap:54px;
    }

    .timeline-step,
    .timeline-step:nth-child(odd),
    .timeline-step:nth-child(even){
        grid-template-columns:54px 1fr;
        gap:18px;
        align-items:start;
    }

    .timeline-s::before{
        left:27px;
    }

    .timeline-point{
        grid-column:1;
        grid-row:1 / span 2;
        width:54px;
        height:54px;
    }

    .timeline-point span{
        font-size:.75rem;
    }

    .timeline-content{
        grid-column:2;
        grid-row:1;
        padding:24px;
        border-radius:16px;
        max-width:100%;
    }

    .timeline-step:nth-child(odd) .timeline-content,
    .timeline-step:nth-child(even) .timeline-content{
        grid-column:2;
        grid-row:1;
        text-align:left;
    }

    .timeline-content h3{
        font-size:1.35rem;
    }

    .timeline-content p{
        font-size:.92rem;
        line-height:1.6;
    }

    .timeline-step:nth-child(odd) .timeline-image,
    .timeline-step:nth-child(even) .timeline-image{
        grid-column:2;
        grid-row:2;
        justify-self:start;
        max-width:260px;
    }

    .timeline-image{
        min-height:auto;
        max-width:260px;
        border-radius:14px;
    }

    .choice-section{
        padding:80px 6% 90px;
        margin-top:-60px;
    }

    .choice-header{
        margin-bottom:42px;
    }

    .choice-grid{
        flex-direction:column;
        min-height:auto;
    }

    .choice-card{
        min-height:360px;
        padding:30px;
    }

    .choice-grid:hover .choice-card,
    .choice-grid .choice-card:hover{
        flex:1;
        opacity:1;
    }

    .footer-container{
        grid-template-columns:1fr;
        gap:40px;
    }

    .footer-column{
        text-align:left;
    }

    .modal-content{
        grid-template-columns:1fr;
        width:90vw;
        max-height:86vh;
    }

    .modal-image{
        padding:22px;
        min-height:220px;
        border-right:none;
        border-bottom:1px solid rgba(32,54,74,.15);
    }

    .modal-image img{
        aspect-ratio:16 / 10;
    }

    .modal-text{
        padding:38px 28px;
    }

    .modal-text h2{
        font-size:2rem;
    }
}


/* =========================
   Responsive móvil pequeño
   480px hacia abajo
========================= */

@media(max-width:480px){

    section{
        padding:70px 6%;
    }

    .hero h1{
        font-size:3rem;
    }

    .hero-tag,
    .section-tag{
        font-size:.72rem;
    }

    .btn-primary{
        width:100%;
        text-align:center;
    }

    .fullscreen-menu{
        gap:14px;
        padding:80px 6% 35px;
    }

    .fullscreen-menu a{
        font-size:1.55rem;
    }

    .intro h2,
    .section-header h2{
        font-size:1.9rem;
        line-height:1.2;
    }

    .curiosity-card{
        width:88%;
    }

    .curiosity-info h3{
        font-size:1.45rem;
    }

    .curiosity-info p{
        font-size:.9rem;
    }

    .timeline-step,
    .timeline-step:nth-child(odd),
    .timeline-step:nth-child(even){
        grid-template-columns:48px 1fr;
        gap:16px;
    }

    .timeline-s::before{
        left:24px;
    }

    .timeline-point{
        width:48px;
        height:48px;
    }

    .timeline-point span{
        font-size:.7rem;
    }

    .timeline-content{
        padding:20px;
    }

    .timeline-content h3{
        font-size:1.2rem;
    }

    .timeline-content p{
        font-size:.88rem;
    }

    .timeline-image{
        max-width:230px;
    }

    .choice-card{
        min-height:330px;
        padding:24px;
    }

    .choice-content h2{
        font-size:1.8rem;
    }

    .choice-content p{
        font-size:.92rem;
    }

    .slider-btn.prev{
    left:10px;
    }

    .slider-btn.next{
    right:10px;
    }

}

/* =========================
   Responsive capítulos
========================= */

@media(max-width:992px){

    .chapters-intro-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .chapters-grid-page{
        grid-template-columns:repeat(2,1fr);
    }

    .chapters-next{
        flex-direction:column;
        align-items:flex-start;
    }
}

@media(max-width:768px){

    .chapters-hero{
        min-height:72vh;
        align-items:flex-end;
    }

    .chapters-hero-content{
        padding-bottom:70px;
    }

    .chapters-hero h1{
        font-size:3.4rem;
    }

    .chapters-grid-page{
        grid-template-columns:1fr;
    }

    .chapter-item{
        min-height:420px;
    }
}

@media(max-width:480px){

    .chapters-hero h1{
        font-size:2.8rem;
    }

    .chapter-item{
        min-height:390px;
        padding:26px;
    }

    .chapter-info h2{
        font-size:1.65rem;
    }
}

/* =========================
   Responsive archivo
========================= */

@media(max-width:992px){

    .archive-featured{
        grid-template-columns:1fr;
        gap:45px;
    }

    .archive-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .archive-hero{
        min-height:72vh;
        align-items:flex-end;
    }

    .archive-hero-content{
        padding-bottom:70px;
    }

    .archive-hero h1{
        font-size:3.2rem;
    }

    .archive-grid{
        grid-template-columns:1fr;
    }

    .featured-audio-card{
        min-height:280px;
    }
}

@media(max-width:480px){

    .archive-hero h1{
        font-size:2.65rem;
    }

    .archive-intro h2,
    .featured-text h2,
    .archive-grid-header h2{
        font-size:2rem;
    }
}

/* =========================
   Responsive cómic / Publuu
========================= */

@media(max-width:992px){

    .publuu-reader{
        max-width:100%;
    }

    .publuu-reader iframe,
    .publuuflip{
        height:640px;
    }
}

@media(max-width:768px){

    .comic-hero{
        min-height:72vh;
        align-items:flex-end;
    }

    .comic-hero-content{
        padding-bottom:70px;
    }

    .comic-hero h1{
        font-size:3.4rem;
    }

    .comic-reader-section{
        padding:90px 6%;
    }

    .publuu-reader{
        padding:14px;
        border-radius:22px;
    }

    .publuu-reader iframe,
    .publuuflip{
        height:560px;
        border-radius:14px;
    }
}

@media(max-width:480px){

    .comic-hero h1{
        font-size:2.8rem;
    }

    .reader-header h2{
        font-size:2rem;
    }

    .reader-header p{
        font-size:.95rem;
    }

    .publuu-reader{
        padding:10px;
    }

    .publuu-reader iframe,
    .publuuflip{
        height:460px;
    }
}

/* =========================
   Responsive capítulo individual
========================= */

@media(max-width:992px){

    .chapter-intro-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

    .chapter-content{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .chapter-hero{
        min-height:72vh;
        align-items:flex-end;
    }

    .chapter-hero-content{
        padding-bottom:70px;
    }

    .chapter-hero h1{
        font-size:3.3rem;
    }

    .chapter-content{
        grid-template-columns:1fr;
    }

    .chapter-highlight{
        padding:80px 6%;
    }

    .chapter-navigation{
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:26px;
    }

    .nav-next{
        text-align:center;
    }
}

@media(max-width:480px){

    .chapter-hero h1{
        font-size:2.8rem;
    }

    .chapter-intro h2,
    .chapter-highlight h2{
        font-size:1.9rem;
    }

    .content-card{
        padding:26px;
        min-height:auto;
    }

    .content-card h3{
        font-size:1.4rem;
    }
}

/* =========================
   Pantallas bajas
========================= */

@media(max-height:650px){

    .fullscreen-menu{
        gap:10px;
        padding:70px 6% 28px;
    }

    .fullscreen-menu a{
        font-size:1.35rem;
        line-height:1;
    }
}

@media(max-width:768px){

    .chapter-visual{
        grid-template-columns:1fr;
        gap:38px;
        text-align:center;
        padding:70px 6% 45px;
    }

    .chapter-visual-text{
        margin:0 auto;
    }

    .chapter-visual-image img{
        width:min(260px,72vw);
    }

    .visual-points{
        justify-content:center;
    }
}

@media(max-width:480px){

    .chapter-visual-text h2{
        font-size:1.9rem;
    }

    .chapter-visual-image img{
        width:min(220px,70vw);
    }

    .visual-points span{
        font-size:.72rem;
        padding:10px 14px;
    }
}