/* ==========================================================
   RESET
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    background:var(--cor-fundo);

    color:var(--cor-texto);

    line-height:1.7;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

main {
    padding: 0px 20px;
}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

button,
input{

    font:inherit;

}

/* ==========================================================
   VARIÁVEIS
========================================================== */

:root{

    --cor-fundo:#FDFBF8;

    --cor-fundo-tela-senha:#f6dcc1;

    --cor-branco:#FFFFFF;

    --cor-primaria:#CFA66A;

    --cor-texto:#3B2F26;

    --cor-texto-secundario:#7C746D;

    --sombra:

        0 20px 60px rgba(0,0,0,.08);

    --raio:22px;

    --largura:1200px;

    --transicao:.35s ease;

}

/* ==========================================================
   SITE
========================================================== */

.site{

    display:none;

}

section{

    width:100%;

    padding:100px 20px;

}

.container{

    width:min(var(--largura),100%);

    margin:auto;

}


/* ==========================================================
   SENHA
========================================================== */

.lock-screen{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--cor-fundo-tela-senha);

    z-index:9999;

}

.lock-box{

    width:min(420px,92vw);

    background:var(--cor-branco);

    padding:40px 25px;

    border-radius:24px;

    box-shadow:var(--sombra);

    text-align:center;
}

.logo-lock{

    width:260px;
    scale:1.3;
    margin:0 auto;

}

.lock-box h2{

    font-family:'Playfair Display', serif;
    font-size:26px;
    margin-top: 5px;
}

.lock-box p{

   opacity:.7;
}

.lock-box input{

    width:100%;
    margin-top: 22px;
    padding:10px;
    border-radius:30px;
    border:1px solid #CCC;
    outline:none;
    transition:var(--transicao);
    text-align:center;
    font-size:15px;

}

.lock-box input:focus{

    border-color:var(--cor-primaria);

}

.lock-box button{

    width:100%;
    margin-top:20px;
    padding:10px 40px;
    border:none;
    border-radius:30px;
    cursor:pointer;
    background:var(--cor-primaria);
    color:#FFF;
    transition:var(--transicao);
    font-size:15px;

}

.lock-box button:hover{

    transform:translateY(-2px);

}

.erro{
    color:#d63f3f;

}

@media (max-width: 768px){

    .lock-screen{
        padding: 35px;
    }
}


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

.hero{

    width:min(var(--largura),100%);

    margin:auto;

    min-height:100vh;

    display:grid;

    grid-template-columns:320px 1fr;

    gap:80px;

    align-items:center;

    padding:60px 20px;

}

.hero-imagem{

    flex:0 0 330px;

    height:520px;

    background:#f7f2ec;

    border-radius:22px;

    padding:14px;

    overflow:hidden;

    position:relative;

    transform:rotate(-4deg);

    box-shadow:
        0 40px 90px rgba(0,0,0,.22),
        inset 0 0 0 1px rgba(255,255,255,.7);

    transition:transform .45s ease,
               box-shadow .45s ease;

}


/* brilho sutil */

.hero-imagem::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            120deg,

            rgba(255,255,255,0) 42%,

            rgba(255,255,255,.35) 50%,

            rgba(255,255,255,0) 58%

        );

    transform:translateX(-130%);

    transition:transform 3.2s cubic-bezier(.19,1,.22,1);

    pointer-events:none;

}

.hero:hover .hero-imagem::after{

    transform:translateX(130%);

}

.hero-imagem:hover{

    transform:
        rotate(-2deg)
        translateY(-16px);

    box-shadow:
        0 50px 100px rgba(0,0,0,.26),
        inset 0 0 0 1px rgba(255,255,255,.8);

}

.hero-imagem img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    border-radius:14px;

    image-rendering:-webkit-optimize-contrast;

    backface-visibility:hidden;

}


.hero-texto{

    max-width:620px;

}

.logo{

    width:280px;
    scale:1.5;
    transform-origin:left center;
}

.hero-texto h1{

    font-family:'Playfair Display',serif;

    font-size:50px;

    line-height:1.1;

    font-weight:600;

    margin-bottom:25px;

}

.hero-texto p{

    font-size:18px;

    color:var(--cor-texto-secundario);

    margin-bottom:45px;

}

.btn-video{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:999px;

    background:var(--cor-primaria);

    color:#FFF;

    transition:var(--transicao);

}

.btn-video:hover{

    transform:translateY(-3px);

}


/* ==========================================================
   VÍDEO
========================================================== */

.video-section{

    width:min(var(--largura),100%);

    margin:auto;

    padding:80px 20px;

}

.video-header{

    text-align:center;

    margin-bottom:40px;

}

.video-tag{

    display:inline-block;

    margin-bottom:16px;

    font-size:12px;

    letter-spacing:3px;

    text-transform:uppercase;

    color:var(--cor-primaria);

}

.video-header h2{

    font-family:'Playfair Display',serif;

    font-size:42px;

    margin-bottom:16px;

}

.video-info{

    color:var(--cor-texto-secundario);

    font-size:15px;

}

.video-wrapper{

    border-radius:24px;

    overflow:hidden;

    box-shadow:var(--sombra);

    background:#000;

}

.video-wrapper iframe{

    width:100%;

    aspect-ratio:16 / 9;

    border:none;

    display:block;

}

.video-mobile{

    display:none;

    position:relative;

    border-radius:24px;

    overflow:hidden;

    box-shadow:var(--sombra);

}

.video-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:18px;

    color:#FFF;

    text-shadow:0 2px 10px rgba(0,0,0,.4);

}

.play-circle{

    width:90px;

    height:90px;

    border-radius:50%;

    background:rgba(255,255,255,.20);

    backdrop-filter:blur(8px);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    transition:.3s;

}

.video-mobile:hover .play-circle{

    transform:scale(1.08);

    background:rgba(255,255,255,.30);

}

.btn-video{

    display:inline-flex;

}

/* ==========================================================
   CENA FINAL
========================================================== */

.final-filme{
    width:calc(100% + 40px);

    margin-left:-20px;

    margin-right:-20px;

    min-height:100vh;

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:80px 20px;

    position:relative;

    overflow:hidden;

}

.final-filme::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            ellipse at center,

            rgba(255,255,255,.08) 0%,

            rgba(255,255,255,.03) 22%,

            rgba(0,0,0,.22) 58%,

            rgba(0,0,0,.68) 100%

        );

    z-index:1;

}

/* ==========================================================
   FOTO CINEMATOGRÁFICA
========================================================== */

.final-foto{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

   filter:

    grayscale(100%)

    brightness(.78)

    contrast(1.15)

    sepia(.06)

    saturate(.85);


    transform:scale(1.04);

}

.final-overlay{

    width:100%;

    max-width:760px;

    height:100%;

    min-height:100vh;

    position:relative;

    z-index:2;

    display:flex;

    justify-content:center;

    align-items:center;

}

.final-filme::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            rgba(32,22,14,.08),

            rgba(18,12,8,.42)

        );

    mix-blend-mode:multiply;

    z-index:1;

}

.final-conteudo{

    width:100%;

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:space-evenly;

    align-items:center;

    text-align:center;

    animation:fadeFinal 1.4s ease;

    text-shadow:0 8px 35px rgba(0,0,0,.45);

    padding:60px 20px;

}

.final-nome{

    display:block;

    font-family:'Playfair Display',serif;

    font-size:96px;

    line-height:1;

    font-weight:400;

    margin-bottom:30px;

    color:#FFF;

    text-shadow: 0 8px 40px rgba(0,0,0,.55);

}

.final-divisor{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    margin-bottom:40px;

}

.final-divisor::before,

.final-divisor::after{

    content:"";

    width:110px;

    height:1px;

    background:rgba(217,181,122,.75);

}

.final-divisor span{

    color:var(--cor-primaria);

    font-size:22px;

}

.final-conteudo h2{

    font-family:'Playfair Display',serif;

    font-size:58px;

    font-weight:500;

    margin-bottom:28px;

    color:#FFF;

}

.final-conteudo p{

    max-width:620px;

    margin:auto;

    font-size:24px;

    line-height:1.8;

    color:rgba(255,255,255,.92);

}

.assinatura{

    margin:70px 0 55px;

}

.assinatura h3{

    font-family:'Allura',cursive;

    font-size:78px;

    font-weight:400;

    color:var(--cor-dourado-filme);

    margin-bottom:8px;

}

.assinatura span{

    display:block;

    letter-spacing:5px;

    text-transform:uppercase;

    font-size:13px;

    color:rgba(255,255,255,.90);

}

.assinatura small{

    display:block;

    margin-top:8px;

    font-size:13px;

    color:rgba(255,255,255,.90);

}

.assinatura-links{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:16px;

    margin-top:26px;

    flex-wrap:wrap;

    color:rgb(255, 255, 255);

    font-size: 20px;

}

.assinatura-links span{

    color:rgba(255,255,255,.30);

}

.assinatura-links a{

    color:rgba(255,255,255,.78);

    letter-spacing:1px;

    font-size:14px;

    transition:.35s ease;

}

.assinatura-links a:hover{

    color:var(--cor-dourado-filme);

}

.btn-album{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    min-width:320px;

    padding:18px 34px;

    border-radius:999px;

    border:1px solid var(--cor-dourado-filme);

    background:rgba(255,255,255,.06);

    box-shadow:0 20px 60px rgba(0,0,0,.22);

    backdrop-filter:blur(12px);

    color:var(--cor-dourado-filme);

    font-size:17px;

    transition:.35s ease;

}

.btn-album:hover{

    background:rgba(255,255,255,.18);

    transform:translateY(-4px);

}

@keyframes fadeFinal{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/* ==========================================================
   RODAPÉ
========================================================== */

footer{

    padding:50px 20px;

    text-align:center;

    font-size:14px;

    color:var(--cor-texto-secundario);

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:960px){

    .hero{

        grid-template-columns:1fr;

        gap:50px;

        text-align:center;

        min-height:auto;

        padding:80px 20px;

    }

    .hero-imagem{

        order:1;

    }

    .hero-texto{

        order:2;

        margin:auto;

    }

    .logo{

        margin:0 auto;

    }

    .hero-texto h1{

        font-size:42px;

    }

    .hero-texto p{

        font-size:17px;

    }

}

/* ==========================================================
   CELULAR
========================================================== */

@media (max-width:600px){

    section{

        padding:70px 20px;

    }

    .lock-box{

        padding:35px 25px;

    }

    .logo-lock{

        width:190px;
        scale:1.3;

    }

    .hero{

        gap:35px;

        padding-top:50px;

    }

    .hero-imagem{

        flex:none;

        width:150px;

        height:150px;

        padding:10px;

        margin:0 auto;

        transform:rotate(-3deg);

    }

    .hero-imagem img{

        border-radius:10px;

    }

    .logo{
        width:190px;
        scale:1.5;
        transform-origin: center;

    }

    .hero-texto h1{

        font-size:30px;

    }

    .hero-texto p{

        font-size:16px;

    }

    .btn-video{

        width:100%;

    }

    .video-header h2{

        font-size:30px;

    }

    .video-info{

        font-size:13px;

        line-height:1.8;

    }

     #videoFrame{

        display:none;

    }

    .video-mobile{

        display:block;

        position:relative;

        border-radius:24px;

        overflow:hidden;

        box-shadow:var(--sombra);

    }

    .video-mobile img{

        width:100%;

        aspect-ratio:16/9;

        object-fit:cover;

        filter:brightness(.55);

    }

    .btn-video{

        display:none;

    }

    .mensagem-final{

        margin:80px auto;

    }

    .mensagem-final h2{

        font-size:30px;

    }

    .mensagem-final p{

        font-size:16px;

    }

.final-filme{

    min-height:100svh;

    padding:0;

}

.final-nome{

    font-size:54px;

}

.final-divisor::before,

.final-divisor::after{

    width:45px;

}

.final-conteudo h2{

    font-size:34px;

}

.final-conteudo p{

    font-size:17px;

}

.assinatura{

    margin:45px 0;

}

.assinatura h3{

    font-size:46px;

}

.texto-album{

    margin:55px 0 28px;

    color:rgba(255,255,255,.82);

    font-size:17px;

    letter-spacing:.4px;

}

.btn-album{

    width:100%;

    min-width:auto;

}

    footer{

        font-size:13px;

    }

}


/* ==========================================================
   Telas de baixa altura
========================================================== */

@media (max-height:680px){

    .hero{

        gap:20px;

    }

    .hero-imagem{

        flex:none;

        width:130px;

        height:130px;

        padding:8px;

        margin:0 auto;

        transform:rotate(-3deg);

    }

    .hero-imagem img{

        border-radius:8px;

    }

}