/* ==========================================================
   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;

}

/* ==========================================================
   MENSAGEM FINAL
========================================================== */

.mensagem-final{

    max-width:760px;

    margin:120px auto;

    padding:0 20px;

    text-align:center;

}

.mensagem-final h2{

    font-family:'Playfair Display',serif;

    font-size:40px;

    margin-bottom:24px;

}

.mensagem-final p{

    font-size:18px;

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

}

/* ==========================================================
   AUTORA
========================================================== */

.autora{

    padding:100px 0px;

    background:var(--cor-branco);

}

.autora-container{

    width:min(var(--largura),100%);
    margin:auto;
    display:flex;
    align-items:center;
    gap:120px;
    justify-content:center;

}

.autora-foto{
      width:100%;

    max-width:260px;

        height:340px;

    object-fit:cover;
    border-radius:28px;
    box-shadow:0 30px 70px rgba(0,0,0,.18);
    filter:grayscale(20%) contrast(1.05);
}

.autora-texto {
    max-width:520px;
    text-align:center;
}

.autora-texto h2{

    font-family:'Playfair Display',serif;

    font-size:40px;

    margin-bottom:20px;

}

.autora-texto p{

    font-size:17px;

    margin-bottom:35px;

}

.autora-links{

    display:flex;
    justify-content: center;
    gap:18px;

    flex-wrap:wrap;

}

.autora-links a{

    padding:14px 24px;

    border-radius:999px;

    border:1px solid var(--cor-primaria);

    transition:var(--transicao);

}

.autora-links a:hover{

    background:var(--cor-primaria);

    color:#FFF;

}

/* ==========================================================
   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;

    }

    .autora-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .autora-foto{

        max-width:320px;

        margin:auto;

    }

    .autora-links{

        justify-content:center;

    }

}

/* ==========================================================
   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;

    }

    .mensagem-final{

        margin:80px auto;

    }

    .mensagem-final h2{

        font-size:30px;

    }

    .mensagem-final p{

        font-size:16px;

    }

    .autora-container{
        flex-direction: column;
        gap: 40px;
    }

    .autora-texto h2{

        font-size:30px;

    }

    .autora-texto p{

        font-size:16px;

    }

    .autora-links{

        flex-direction:column;

    }

    .autora-links a{

        width:100%;

        text-align:center;

    }

    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;

    }

}