/*====================================================
    HISTORIA | PERRO SOLAR
    PARTE 1
    Hero + Base + Capítulo I
=====================================================*/

/*====================================================
    VARIABLES
=====================================================*/

:root{

    --historia-bg:#050505;
    --texto:#ece7df;
    --texto-sec:#cfcfcf;
    --dorado:#d49e4a;

}

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

.page-hero{

    position:relative;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    text-align:center;

}

/*---------------------------------------------------*/

.hero-background{

    position:absolute;

    inset:0;

    background-image:url("../images/Banda/historiahero.webp");

    background-size:cover;

    background-position:center;

    z-index:0;

}

/*---------------------------------------------------*/

.page-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(

        rgba(0,0,0,.45),

        rgba(0,0,0,.55)

    );

    z-index:1;

}

/*---------------------------------------------------*/

.page-hero-content{

    position:relative;

    z-index:2;

    max-width:760px;

    padding:0 30px;

}

/*---------------------------------------------------*/

.page-tag{

    display:inline-block;

    font-family:"Manrope",sans-serif;

    font-size:.85rem;

    letter-spacing:8px;

    text-transform:uppercase;

    color:var(--dorado);

    margin-bottom:25px;

}

/*---------------------------------------------------*/

.page-hero h1{

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(5rem,8vw,8rem);

    font-weight:600;

    color:var(--texto);

    line-height:.9;

    letter-spacing:-2px;

    margin-bottom:35px;

}

/*---------------------------------------------------*/

.page-hero p{

    font-family:"Manrope",sans-serif;

    font-size:1.25rem;

    font-weight:300;

    line-height:1.9;

    color:var(--texto-sec);

    max-width:620px;

    margin:auto;

}

/*====================================================
    CAPÍTULOS (BASE)
=====================================================*/

.chapter-01,
.chapter-02,
.chapter-02-story,
.chapter-03{

    min-height:100vh;

    padding:120px 8%;

    display:flex;

    justify-content:center;

    align-items:center;

}
/*====================================================
    ESTILO EDITORIAL GLOBAL
=====================================================*/

.story-content{

    max-width:540px;

}

.story-tag{

    display:inline-block;

    padding:10px 24px;

    border:1px solid rgba(212,158,74,.35);

    border-radius:40px;

    color:var(--dorado);

    letter-spacing:5px;

    font-size:.8rem;

    margin-bottom:35px;

    font-family:"Manrope",sans-serif;

}

.story-content h2{

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(5rem,7vw,7rem);

    line-height:.9;

    color:#f4f1ea;

    margin-bottom:35px;

}

.story-content h2::after{

    content:"";

    display:block;

    width:100px;

    height:2px;

    margin-top:25px;

    background:var(--dorado);

}

.story-content p{

    font-family:"Manrope",sans-serif;

    font-size:1.1rem;

    line-height:2;

    font-weight:400;

    color:#d4d4d4;

    text-align:justify;

    text-justify:inter-word;

}

.story-content p + p{

    margin-top:35px;

}

/*====================================================
    CAPÍTULO I
=====================================================*/

.chapter-01{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:180px 8%;

    background:
    radial-gradient(circle at top,#242424 0%,#111 45%,#050505 100%);

}

.manifesto-container{

    width:100%;

    max-width:1700px;

    display:grid;

    grid-template-columns:42% 58%;

    gap:60px;

    align-items:center;

}

.manifesto-text{

    max-width:760px;

}

.manifesto-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 24px;

    border:1px solid rgba(212,158,74,.35);

    border-radius:50px;

    font-family:"Manrope",sans-serif;

    font-size:.78rem;

    letter-spacing:5px;

    text-transform:uppercase;

    color:var(--dorado);

    margin-bottom:40px;

}

.manifesto-text h2{

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(5rem,7vw,7rem);

    font-weight:600;

    line-height:.9;

    color:#f4f1ea;

    margin-bottom:35px;

}

.manifesto-text h2::after{

    content:"";

    display:block;

    width:110px;

    height:2px;

    margin-top:28px;

    background:var(--dorado);

}

.manifesto-text p{

    font-family:"Manrope",sans-serif;

    font-size:1.35rem;

    font-weight:300;

    line-height:2;

    color:#cfcfcf;

    margin-bottom:28px;

    text-align:justify;

    text-justify:inter-word;

}

.highlight{

    font-size:2rem;

    font-weight:500;

    color:#ffffff;

    line-height:1.6;

    margin-top:45px;

    padding-top:35px;

    border-top:1px solid rgba(212,158,74,.35);

    text-align:left;

}
.manifesto-image{

    overflow:hidden;
    border-radius:26px;

}

.manifesto-image img{

    width:100%;
    height:100%;
    object-fit:cover;

    animation:heroZoom 24s ease-in-out infinite alternate;

}

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.06);

    }

}



.image-caption{

    margin-top:26px;

    text-align:right;

    font-family:"Manrope",sans-serif;

    font-size:.82rem;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#777;
    padding-right:20px;

}
/*====================================================
    ANIMACIÓN GLOBAL
=====================================================*/

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}
/*====================================================
    HISTORIA | PERRO SOLAR
    PARTE 2
    Capítulo II + Capítulo III + Responsive
=====================================================*/


/*====================================================
    CAPÍTULO II
=====================================================*/

.chapter-02{

    min-height:100vh;

    display:grid;

    grid-template-columns:55% 45%;

    align-items:center;

    gap:90px;

    padding:140px 8%;

    background:

    radial-gradient(
        circle at 18% 50%,
        rgba(138,43,226,.55) 0%,
        rgba(116,52,180,.45) 20%,
        rgba(82,39,140,.32) 38%,
        rgba(35,18,60,.18) 58%,
        rgba(8,6,18,.95) 82%,
        #050505 100%
    );

}

.chapter-image{

    position:relative;

    width:100%;

    max-width:820px;

    height:560px;

    margin:auto;

    overflow:hidden;

    border-radius:26px;

    box-shadow:
    0 45px 90px rgba(0,0,0,.55);

}

.chapter-image .slide{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:0;

    transition:

        opacity 1.4s ease,

        transform 8s linear;

}

.chapter-image .slide.active{

    opacity:1;

    transform:scale(1.05);

}

.chapter-text{

    max-width:760px;

    padding-right:0;

}

.chapter-text span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 24px;

    border:1px solid rgba(212,158,74,.35);

    border-radius:50px;

    font-family:"Manrope",sans-serif;

    font-size:.78rem;

    letter-spacing:5px;

    text-transform:uppercase;

    color:var(--dorado);

    margin-bottom:40px;

}

.chapter-text h2{

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(5rem,7vw,7rem);
    font-weight:600;

    line-height:.9;

    color:#f4f1ea;

    margin-bottom:40px;

}

.chapter-text h2::after{

    content:"";

    display:block;

    width:110px;

    height:2px;

    margin-top:28px;

    background:var(--dorado);

}

.chapter-text p,
.identity-content p{

    font-family:"Manrope",sans-serif;

    font-size:1.35rem;

    font-weight:300;

    line-height:2;

    color:#cfcfcf;

    margin-bottom:28px;

    text-align:justify;

    text-justify:inter-word;

}

/*==========================================
CAPÍTULO III
==========================================*/

.chapter-03{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:150px 8%;

    overflow:hidden;

    background:

radial-gradient(
    ellipse at 20% 50%,
    rgba(255,214,120,.18) 0%,
    transparent 45%
),

radial-gradient(
    ellipse at 85% 25%,
    rgba(233,180,55,.15) 0%,
    transparent 40%
),

radial-gradient(
    ellipse at 70% 90%,
    rgba(150,97,20,.12) 0%,
    transparent 45%
),

linear-gradient(
    135deg,
    #4a2f0d 0%,
    #7b5318 18%,
    #b17d2f 42%,
    #d7a34b 50%,
    #b07a2d 62%,
    #7a4d17 82%,
    #2c1807 100%
);
}
/*====================================================
    CAPÍTULO III
=====================================================*/

.identity{

    min-height:100vh;

    display:grid;

    grid-template-columns:55% 45%;

    align-items:center;

    gap:90px;

    padding:140px 8%;

    position:relative;

    background:

    radial-gradient(
        circle at 70% 45%,
        rgba(255,214,120,.35) 0%,
        rgba(210,155,70,.25) 28%,
        rgba(120,80,30,.18) 55%,
        rgba(25,15,8,.90) 82%,
        #050505 100%
    );

}
.identity::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.22) 0%,
            rgba(0,0,0,.12) 35%,
            rgba(0,0,0,0) 65%
        ),
        radial-gradient(
            circle at 70% 40%,
            rgba(255,220,120,.18),
            transparent 45%
        );

    animation:goldLight 12s ease-in-out infinite;

    pointer-events:none;

    z-index:0;

}

@keyframes goldLight{

    0%,100%{

        opacity:.45;
        transform:translateX(-40px);

    }

    50%{

        opacity:.9;
        transform:translateX(40px);

    }

}


.identity-layout{

    width:min(1400px,92%);
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    align-items:center;
    position:relative;
    z-index:1;

}

.identity-logo{

    display:flex;

    justify-content:center;

    align-items:center;

}

.identity-logo img{

    width:100%;
    max-width:820px;

    animation:logoFloat 10s ease-in-out infinite;

}

@keyframes logoFloat{

    0%{

        transform:translateY(0);

        filter:drop-shadow(
            0 18px 45px rgba(0,0,0,.35)
        );

    }

    50%{

        transform:translateY(-6px);

        filter:drop-shadow(
            0 22px 55px rgba(255,208,90,.12)
        );

    }

    100%{

        transform:translateY(0);

        filter:drop-shadow(
            0 18px 45px rgba(0,0,0,.35)
        );

    }

}

.identity-content{

    max-width:760px;

    padding-right:0;

}
.identity-content .meaning-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 24px;

    border:1px solid rgba(212,158,74,.35);

    border-radius:50px;

    font-family:"Manrope",sans-serif;

    font-size:.78rem;

    letter-spacing:5px;

    text-transform:uppercase;

    color:var(--dorado);

    margin-bottom:40px;

}


.identity-content h2{

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(5rem,7vw,7rem);

    font-weight:600;

    line-height:.9;

    margin-bottom:40px;

    background:linear-gradient(
        90deg,
        #fff9e8 0%,
        #f7d37b 20%,
        #fffdf8 40%,
        #d9a63f 60%,
        #fff7dd 80%,
        #ffffff 100%
    );

    background-size:250% auto;

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:titleGold 8s linear infinite;

}
@keyframes titleGold{

    from{

        background-position:0% center;

    }

    to{

        background-position:250% center;

    }

}

.identity-content h2::after{

    content:"";

    display:block;

    width:110px;

    height:2px;

    margin-top:28px;

    background:var(--dorado);

}

.identity-content p{

    font-family:"Manrope",sans-serif;

    font-size:1.35rem;

    font-weight:300;

    line-height:2;

    color:#6f675d;

    margin-bottom:28px;

    text-align:justify;

    text-justify:inter-word;

}


.identity-content strong{

    color:#ffd36b;

    font-weight:600;

}

/*====================================================
RESPONSIVE
=====================================================*/

@media (max-width:992px){

    .manifesto-container,
    .meaning-container,
    .chapter-02,
    .identity-layout{

        grid-template-columns:1fr;
        gap:60px;
        text-align:center;

    }

    .chapter-02{

        display:flex;
        flex-direction:column;

    }

    .chapter-image,
    .chapter-text,
    .identity-logo{

        margin:auto;

    }

    .manifesto-text h2::after,
    .chapter-text h2::after,
    .meaning-left h2::after,
    .identity-content h2::after{

        margin:20px auto 0;

    }

}


@media (max-width:768px){

    .page-hero{

        min-height:100svh;
        height:auto;
        padding:110px 20px 40px;

    }

    .page-hero-content{

        width:100%;

    }

    .page-hero h1{

        font-size:3.5rem;

    }

    .page-hero p{

        font-size:1rem;

        max-width:100%;

    }

    .chapter-image{

        height:300px;

    }

    .highlight{

        font-size:1.5rem;

    }

    .identity-layout{

        grid-template-columns:1fr;

        gap:45px;

    }

    .identity-logo{

        order:1;

    }

    .identity-content{

        order:2;

        max-width:100%;

    }

    .identity-logo img{

        width:260px;

        margin:auto;

    }

    .identity-content h2{

        font-size:3.2rem;

    }

    .identity-content p{

        font-size:1rem;

        text-align:left;

        line-height:1.8;

    }

}


@media (max-width:480px){

    .page-hero h1{

        font-size:2.9rem;

    }

    .chapter-image{

        height:230px;

    }

    .identity-logo img{

        width:210px;

    }

    .identity-content h2{

        font-size:2.7rem;

    }

}