/* =========================================================
   FINESSE AGÊNCIA MUSICAL
   STYLE CSS
========================================================= */


/* =========================================================
   MÓDULOS
========================================================= */

@import url("header.css");
@import url("hero.css");
@import url("sobre.css");
@import url("formacoes.css");
@import url("galeria.css");
@import url("videos.css");
@import url("contato.css");
@import url("depoimentos.css");
@import url("footer.css");
@import url("responsive.css");


/* =========================================================
   VARIÁVEIS DA MARCA
========================================================= */

:root {

    --wine: #9d3835;
    --wine-dark: #7f2d2a;
    --wine-light: #b95a56;

    --cream: #f7e8d1;
    --cream-dark: #e8d2b3;
    --cream-light: #fff8ef;

    --black: #000000;
    --dark: #151515;
    --dark-soft: #292929;

    --white: #ffffff;

    --text: #555555;
    --text-light: #777777;

    --border: #eaded0;

    --container: 1200px;

    --shadow:
        0 18px 45px
        rgba(0, 0, 0, .08);

    --transition:
        all .3s ease;

}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

    color:
        var(--black);

    background:
        var(--white);

    line-height:
        1.7;

    overflow-x:
        hidden;

}


img {

    max-width:
        100%;

    height:
        auto;

    display:
        block;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


button,
input,
textarea,
select {

    font:
        inherit;

}


/* =========================================================
   CONTAINER
========================================================= */

.container {

    width:
        min(
            var(--container),
            90%
        );

    margin:
        0 auto;

}


/* =========================================================
   SEÇÕES
========================================================= */

section {

    position:
        relative;

}


.section {

    padding:
        110px 0;

}


.section-light {

    background:
        var(--cream-light);

}


/* =========================================================
   TAG / EYEBROW
========================================================= */

.section-tag,
.eyebrow {

    display:
        inline-block;

    margin-bottom:
        18px;

    color:
        var(--wine);

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        3px;

    text-transform:
        uppercase;

}


/* =========================================================
   TÍTULOS
========================================================= */

.section-title {

    margin-bottom:
        25px;

}


.section-title h2,
.section h2 {

    max-width:
        780px;

    margin-bottom:
        25px;

    font-family:
        "Playfair Display",
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            36px,
            4vw,
            56px
        );

    font-weight:
        400;

    line-height:
        1.15;

    color:
        var(--black);

    letter-spacing:
        -.5px;

}


.section-subtitle {

    max-width:
        760px;

    margin-bottom:
        40px;

    color:
        var(--text);

    font-size:
        16px;

    line-height:
        1.8;

}


.section p {

    max-width:
        760px;

    color:
        var(--text);

    font-size:
        16px;

    line-height:
        1.8;

}


/* =========================================================
   BOTÕES
========================================================= */

.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        52px;

    padding:
        0 30px;

    border:
        1px solid var(--wine);

    background:
        var(--wine);

    color:
        var(--white);

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;

    transition:
        var(--transition);

}


.btn:hover {

    background:
        var(--wine-dark);

    border-color:
        var(--wine-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(0, 0, 0, .18);

}


.btn-secondary {

    background:
        transparent;

    border-color:
        var(--white);

    color:
        var(--white);

}


.btn-secondary:hover {

    background:
        var(--white);

    border-color:
        var(--white);

    color:
        var(--black);

}


/* =========================================================
   LIGHTBOX
========================================================= */

body.lightbox-open {

    overflow:
        hidden;

}


.lightbox {

    position:
        fixed;

    inset:
        0;

    z-index:
        2000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        30px;

    background:
        rgba(
            0,
            0,
            0,
            .94
        );

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;

}


.lightbox.active {

    opacity:
        1;

    visibility:
        visible;

}


.lightbox-content {

    position:
        relative;

    width:
        min(
            100%,
            1100px
        );

    max-height:
        90vh;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

}


.lightbox-image {

    max-width:
        100%;

    max-height:
        75vh;

    width:
        auto;

    object-fit:
        contain;

}


.lightbox-caption {

    width:
        100%;

    margin-top:
        18px;

    text-align:
        center;

    color:
        var(--white);

}


.lightbox-caption h3 {

    margin-bottom:
        5px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        24px;

    font-weight:
        400;

}


.lightbox-caption p {

    margin:
        0;

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

    font-size:
        14px;

}


.lightbox-close,
.lightbox-prev,
.lightbox-next {

    position:
        absolute;

    z-index:
        2001;

    border:
        0;

    background:
        transparent;

    color:
        var(--white);

    cursor:
        pointer;

}


.lightbox-close {

    top:
        20px;

    right:
        25px;

    font-size:
        42px;

    line-height:
        1;

}


.lightbox-prev,
.lightbox-next {

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        50px;

    height:
        70px;

    font-size:
        48px;

}


.lightbox-prev {

    left:
        20px;

}


.lightbox-next {

    right:
        20px;

}


.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {

    color:
        var(--cream);

}


/* =========================================================
   FOOTER BASE
========================================================= */

.footer {

    padding:
        32px 0;

    background:
        var(--black);

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

    text-align:
        center;

}


.footer p {

    margin:
        0;

    font-size:
        12px;

    letter-spacing:
        .5px;

}