/*   
Theme Name: Belgrano
Description: Tema para o site da Belgrano.
Author: Camila Lins
Author URI: http://camilalins.co
Version: 2025
*/

@charset "utf-8";

/* Reset */
*, *:before, *:after {box-sizing:border-box; -moz-box-sizing:border-box;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display:block;}
audio, canvas, progress, video {display:inline-block;}
img, object, embed, video, iframe {max-width:100%;}
ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
del {text-decoration:line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted #000; cursor:help;}
table {border-collapse:collapse; border-spacing:0; font-size:inherit; font:100%;}
th {font-weight:bold; vertical-align:bottom;}
td {font-weight:normal; vertical-align:middle;}
hr {display:block; height:1px; border:0; border-top:1px solid #CCC; margin:10px 0; padding:0;}
input, select {vertical-align:middle;}
pre {white-space:pre; white-space:pre-wrap; white-space:pre-line; word-wrap:break-word;}
input[type="radio"] {vertical-align:text-bottom;}
input[type="checkbox"] {vertical-align:bottom; vertical-align:baseline;}
:where(a, button, input, textarea, select):focus-visible {outline:2px solid currentColor; outline-offset:3px;}
small {font-size:85%;}
strong, th {font-weight:bold;}
td, td img {vertical-align:top;}
sub, sup {font-size:75%; line-height:0; position:relative;}
sup {top:-0.5em;}
sub {bottom:-0.25em;}
pre, code, kbd, samp {font-family:monospace, sans-serif;}
label, input[type=button], input[type=submit], button {cursor:pointer;}
body, select, input, textarea {-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
button, input, select, textarea {margin:0; resize:none; color:inherit; font:inherit; border:0; border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
button {width:auto; overflow:visible; background-position:center;}
textarea {overflow:auto;}
ins {background:#FDD900; color:#000; text-decoration:none;}
mark {background:#FDD900; color:#000; font-style:italic; font-weight:bold;}
audio, canvas, iframe, img, svg, video {vertical-align:middle;}
html {font-family:sans-serif; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;}

::-moz-selection{background:#86717b; color:#241F21; text-shadow:none;}
::selection {background:#86717b; color:#241F21; text-shadow:none;}

::-webkit-input-placeholder {color:#241F21;}
::-moz-placeholder {color:#241F21;}
::placeholder {color:#241F21;}

/* Toolbox */
.hidden {display:none !important;}
.flex {display:flex;}

/* Variáveis */
:root {
    --cor-branco:#FFF;
    --cor-chumbo:#241F21;
    --cor-chumbo-950:#241F21;
    --cor-chumbo-800:#4C4046;
    --cor-chumbo-600:#6E5B63;
    --cor-chumbo-500:#86717b;
    --cor-chumbo-400:#A18F97;
    --cor-chumbo-200:#DFD8DB;
    --cor-chumbo-100:#F0EEEF;
    --cor-chumbo-50: #F8F7F8;
    --cor-cinza:#F8F7F8;

    --gap:24px;
}

@font-face {font-family: 'Stndrd Mono'; src:local('Stndrd Mono Regular'), local('StndrdMono-Regular'), url('fonts/StndrdMono-Regular.woff2') format('woff2'), url('fonts/StndrdMono-Regular.woff') format('woff'), url('fonts/StndrdMono-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap;}
@font-face {font-family: 'F37 Analog'; src: url('fonts/F37Analog-Regular.woff2') format('woff2'), url('fonts/F37Analog-Regular.woff') format('woff'), url('fonts/F37Analog-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap;}
@font-face {font-family: 'F37 Analog'; src: url('fonts/F37Analog-Medium.woff2') format('woff2'), url('fonts/F37Analog-Medium.woff') format('woff'), url('fonts/F37Analog-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap;}

/* Page style */
html {overscroll-behavior:none; background: var(--cor-branco); scrollbar-color:var(--cor-chumbo) var(--cor-branco); min-height:100vh;}
body::-webkit-scrollbar {width:8px;}
body::-webkit-scrollbar-track {box-shadow:inset 0 0 3px rgba(0, 0, 0, .2); background: var(--cor-chumbo);}
body::-webkit-scrollbar-thumb {background-color:var(--cor-chumbo); border-radius:5px;}

body {font:400 14px/1.2 'Stndrd Mono', sans-serif; color:var(--cor-chumbo); background:var(--cor-branco); min-height:100vh;}

a {color:var(--cor-chumbo); text-decoration:none; -webkit-tap-highlight-color:transparent; transition:all 300ms ease-out;}
a:hover {color:var(--cor-chumbo-500);}

.mobile-check {display:none;}
.mobile-nav {display:none;}

#wrap {width:100%; min-height:100vh; overflow-x: hidden;}

.button {
    height:64px;
    border-radius:64px;
    padding:0 32px;
    display:flex;
    align-items: center;
    justify-content: center;
    background:var(--cor-chumbo);
    color:var(--cor-chumbo-50);
    text-transform: uppercase;
    font-size:12px;

    &.small {
        height:32px;
        padding:0 20px;
    }

    &:hover {
        background:var(--cor-chumbo-800);
        color:var(--cor-chumbo-50);
    }

    &.dark {
        background:var(--cor-chumbo-50);
        color:var(--cor-chumbo-950);

        &:hover {
            background:var(--cor-chumbo-500);
            color:var(--cor-chumbo-50);
        }
    }
}

/* Header */
header {
    position:fixed;
    z-index: 1000;
    top:0;
    left:0;
    right:0;
    padding:var(--gap);
    display:flex;
    align-items: center;
    
    h1 {
        width:25%;
        max-width:61px;

        a {
            display:block;
            text-indent: -99999px;
            width:100%;
            height:0;
            padding-bottom:131.20%;
            background:url(img/layout/logo.svg) no-repeat top left / 100%;
        }
    }

    &.dark {
        h1 {
            a {
                background:url(img/layout/logo-white.svg) no-repeat top left / 100%;
            }
        }
    }

    nav {
        /* commented while without the full menu → width: 450px; */
        margin-left:auto;
        display:flex;
        align-items: center;
        background:var(--cor-chumbo);
        padding:4px;
        gap:8px;
        border-radius:72px;
        justify-content: space-between;

        a {
            width:141px;
            height:64px;
            border-radius:64px;
            display:flex;
            align-items: center;
            justify-content: center;
            color:var(--cor-chumbo-50);
            text-transform: uppercase;
            font-size:12px;

            &:hover, &.active {
                background:var(--cor-chumbo-800);
                color:var(--cor-chumbo-50);
            }
        }

        button.close {
            display: none;
        }
    }
}

/* Footer */
body.home {
    .footer-buffer {
        background:var(--cor-chumbo-50);
    }
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    transform: translate(0, 100%);
    padding:var(--gap);
    text-transform: uppercase;

    .wrapper {
        padding:48px 40px;
        border-radius:8px;
        background:var(--cor-chumbo);
        color:var(--cor-chumbo-200);
        display:flex;
        gap: 8px;
    }

    .logo {
        width:33.33%;
        max-width:290px;

        span {
            display:block;
            text-indent: -99999px;
            width:100%;
            height:0;
            padding-bottom:28.62%;
            background:url(img/layout/logo-footer.svg) no-repeat center / 100%;
        }
    }

    .text {
        margin:0 0 0 auto;
        min-width:410px;
    }

    h6 {
        font-weight: 400;
        margin:40px 0 8px;

        &:first-of-type {
            margin-top:0;
        }
    }

    a {
        color:var(--cor-chumbo-400);
        display:block;
        padding-bottom:4px;
    }

    p {
        color:var(--cor-chumbo-400);
    }

    .copy {
        margin-top:120px;
        font-size:12px;
        color:var(--cor-chumbo-200);
    }
}

/* Home */
#hero {
    min-height:100vh;
    padding:var(--gap) var(--gap) 40px;
    display:flex;

    background:url(img/content/hero.png) no-repeat center / cover;

    .text {
        margin:auto 0 0 auto;
        display:flex;
        flex-direction: column;
        color: var(--cor-chumbo-50);

        span {
            text-transform:uppercase;
        }

        h2 {
            font:48px/48px 'F37 Analog', sans-serif;
            margin:24px 0 40px;
        }

        a {
            align-self: baseline;
        }
    }
}

#display {
    position: relative;
    min-height:100vh;
    overflow: hidden;
    display:flex;
    padding:32px var(--gap);

    img.main {
        position: absolute;
        top:50%;
        left:50%;
        min-width: 100%;
        min-height:100%;
        object-fit: cover;
        transform:translate(-50%, -50%);
    }

    .content {
        position: relative;
        z-index: 10;
        margin-left:auto;
        max-width:450px;
        width: 90%;
        display: flex;
        flex-direction: column;
        gap:24px;
    }
}

.product-info {
    margin:auto 0 0;
    border-radius: 8px;
    text-transform: uppercase;
    background-color: var(--cor-branco);

    &.opened {
        background:var(--cor-chumbo-50);

        .expand {
            background:#FFF;
            border:1px solid var(--cor-chumbo-100);

            .plus {
                display:none;
            }

            .minus {
                display:block;
            }
        }

        .meta {
            display: flex;
        }
    }

    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:24px;
        border-radius: 8px;
        cursor: pointer;

        &:hover {
            .expand {
                background:var(--cor-chumbo-100);
            }
        }
    }

    h3 {
        font:24px 'F37 Analog', sans-serif;
    }

    .expand {
        cursor:pointer;
        display:block;
        width:64px;
        height:64px;
        aspect-ratio: 1 / 1;
        border-radius: 100%;
        display:flex;
        justify-content: center;
        align-items: center;
        background:var(--cor-chumbo-50);
        border:1px solid transparent;
        transition:all 300ms ease-out;

        &:hover {
            background:var(--cor-chumbo-100);
        }

        .minus {
            display:none;
        }
    }

    .meta {
        display: none;

        margin-top:24px;
        flex-direction: column;
        gap:40px;
        padding: 0 24px 24px;

        p {
            color:var(--cor-chumbo-600);
        }

        .flex {
            justify-content: space-between;

            div {
                width:100%;

                h4 {
                    margin-bottom:16px;
                    font-weight: 400;
                }

                ul {
                    display:flex;
                    flex-direction: column;
                    gap:16px;

                    li {
                        display: flex;
                        align-items: center;
                        gap:8px;
                        color: var(--cor-chumbo-600);
                    }
                }

                .swatch {
                    display:inline-block;
                    width:17px;
                    height:17px;
                    border-radius: 100%;
                }
            }
        }
    }
}

.carousel {
    display:flex;
    justify-content: space-between;

    .thumb {
        cursor: pointer;
        width:80px;
        height:auto;
        aspect-ratio: 1 / 1;
        border-radius:8px;
        display: flex;
        justify-content: center;
        overflow: hidden;
        background: var(--cor-branco);

        img {
            max-width: none;
            height:100%;
            object-fit: cover;
            transition:all 800ms ease-out;
        }

        &.active {
            background:var(--cor-chumbo-100);
        }

        &:hover {
            img {
                transform:scale(1.15);
            }
        }
    }
}

#collections {
    background:var(--cor-chumbo-50);

    .wrapper {
        display:flex;
        flex-direction: column;
        min-height:100vh;
        padding:80px var(--gap) 40px;
        position: relative;

        .flex {
            margin:auto 0;
            justify-content: space-between;
        }

        .button-wrapper {
            margin:auto 0 0 auto;
            display:flex;
            align-items: baseline;
            width:450px;
        }
    }

    .info {
        position: relative;

        p {
            text-transform: uppercase;
            color:var(--cor-chumbo-500);
            margin-bottom:24px;
        }

        h3 {
            font:64px/64px 'F37 Analog', sans-serif;
        }
    }

    #floating-images {
        pointer-events: none;

        position: absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        overflow: hidden;
        border-radius:8px;
        display: flex;
        align-items: center;
        justify-content: center;

        img.floating-image {
            max-width: 80px;
            height: auto;
            position: absolute;
            transform: translate(-50%, -50%);
            opacity: 1;
            transition: opacity 0.6s ease;

            &.is-fading {
               opacity: 0;
            }
        }
    }

    .menu {
        flex-shrink: 0;
        width:450px;
        text-transform: uppercase;

        h4 {
            font-weight:400;
            margin-bottom: 8px;
        }

        ul {
            display:flex;
            flex-direction: column;

            li {
                cursor: pointer;
                color:var(--cor-chumbo-500);
                padding:8px 0;
                border-radius: 4px;
                transition: all 300ms ease-out;

                &:hover {
                    padding:8px;
                    background:var(--cor-chumbo);
                    color:var(--cor-chumbo-50);

                    a {
                        color:var(--cor-chumbo-50);
                    }
                }

                a {
                    color:var(--cor-chumbo-500);
                }
            }
        }
    }
}

/* Cerâmicas (PDP) */
#ceramicas {
    position: relative;
    min-height:100vh;
    overflow: hidden;

    .images-scroll {
        position: relative;
        width: 100%;

        .wrap {
            position: relative;
            width: 100%;
            height:100vh;
            overflow: hidden;

            img {
                min-width: 100%;
                min-height: 100vh;
                object-fit: cover;
                position: absolute;
                top:50%;
                left:50%;
                transform:translate(-50%, -50%);
            }
        }
    }

    .content {
        position: absolute;
        right:var(--gap);
        left:var(--gap);
        top:0;
        z-index: 10;
        padding-bottom:var(--gap);
        
        width: calc(100% - (var(--gap) * 2));
        height:100vh;
        display: flex;
        flex-direction: column;
        gap:24px;

        .navigation {
            background:var(--cor-branco);
            display: flex;
            flex-direction: column;
            position: absolute;
            top:50%;
            transform:translateY(-50%);
            border-radius:8px;
            overflow: hidden;

            button {
                display: block;
                width:32px;
                height:32px;
                position: relative;
                cursor: pointer;

                &::after {
                    content:'';
                    position: absolute;
                    top:50%;
                    left:50%;
                    transform: translate(-50%, -50%);
                    width: 6px;
                    height:6px;
                    border-radius:100%;
                    background:var(--cor-chumbo-200);
                    transition:all 300ms ease-out;
                }

                &:hover, &.active {
                    &::after {
                        background:var(--cor-chumbo-950);
                    }
                }
            }
        }
    }

    .product-info {
        margin-left:auto;
        max-width: 450px;
        width: 100%;
        position: relative;
        z-index: 99;
    }

    .carousel {
        justify-content: center;
        gap:12px;
    }
}

/* Sobre */
#sobre {
    #banner {
        min-height:100vh;
        display: flex;
        position: relative;
        overflow: hidden;

        h2 {
            font-weight: 400;
            text-transform: uppercase;
            color:var(--cor-chumbo-50);
            position: absolute;
            top:50%;
            left:0;
            right:0;
            padding:0 var(--gap);
            display:flex;
            gap:8px;

            span {
                margin-left:auto;
                display: block;
                width:450px;
            }
        }

        .thumb {
            margin:auto 0 0 auto;
            width:calc(450px + var(--gap));
            height:50vh;
            display: flex;
            align-items: center;

            img {
                border-radius: 4px;
            }
        }

        .background {
            position: absolute;
            top: 50%;
            left: 50%;
            transform:translate(-50%, -50%);
            width: 100%;
            min-height: 100%;
            object-fit: cover;
            z-index: -1;
        }
    }

    #content {
        padding:160px var(--gap) 0;

        .highlight {
            h3 {
                font-weight: 400;
                text-transform: uppercase;
                color:var(--cor-chumbo-600);
                margin-bottom:24px;
            }
    
            p {
                font:64px/64px 'F37 Analog', sans-serif;

                span {
                    color:var(--cor-chumbo-600);
                }
            }
        }

        .info {
            width:450px;
            margin:120px 0 0 auto;
            display: flex;
            flex-direction: column;
            gap:var(--gap);

            p {
                color:var(--cor-chumbo-600);
                text-transform: uppercase;
            }

            img {
                border-radius: 8px;
                margin:120px 0 80px;
                width: 100%;
                height: auto;
            }
        }
    }
}

/* Contato */
#contato {
    padding:200px var(--gap) var(--gap);
    min-height:100vh;
    display:flex;

    h2 {
        font:64px/64px 'F37 Analog', sans-serif;
    }
    
    .content {
        width:450px;
        margin-left:auto;
        text-transform: uppercase;

        p {
            display:flex;
            padding:20px 0;
            border-bottom:1px solid var(--cor-chumbo-100);

            strong {
                font-weight:400;
                margin-right:auto;
            }

            a, span {
                color:var(--cor-chumbo-600);
                text-align: right;

                &:hover:not(span) {
                    color: var(--cor-chumbo-400);
                }
            }

            &:last-of-type {
                border-bottom:0px;

                span {
                    font-size:12px;
                }
            }
        }

        .thumb {
            justify-self: baseline;
            overflow: hidden;
            border-radius:4px;
            margin:50px 0;
        }
    }
}

/* 404 */
#error404 {
    min-height:100vh;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:var(--gap);
    gap:12px;

    h2 {
        font:64px/64px 'F37 Analog', sans-serif;
        text-align: center;
    }

    a {
        padding:8px;
        text-transform: uppercase;
        border-radius:4px;

        &:hover {
            background:var(--cor-chumbo);
            color:var(--cor-chumbo-50);
        }
    }
}

@media screen and (max-width:1220px) and (min-width:960px) {
    #collections {
        .info {
            h3 {
                font-size: clamp(3.125rem, -0.1058rem + 5.3846vw, 4rem);
                line-height: clamp(3.125rem, -0.1058rem + 5.3846vw, 4rem);

                br:nth-of-type(2) {
                    display:none;
                }
            }
        }
    }
}

@media screen and (max-width:960px) {
    #collections {
        .wrapper {
            .flex {
                flex-direction: column;
                gap:48px;
            }

            .button-wrapper {
                margin:24px 0 0;
            }
        }

        .info {
            .thumb {
                position: static;
                transform:none;
                margin-top: 48px;
            }
        }

        .menu {
            width: 100%;
        }
    }
}

@media screen and (max-width:760px) {
    :root {
        --gap:16px;
    }

    .button {
        height:48px;
        font-size:14px;
    }
    
    footer {
        .wrapper {
            flex-direction: column;
            gap:80px;
        }

        .logo {
            width: 80%;
        }

        .text {
            margin:0;
        }
    }

    #hero {
        background:url(img/content/hero-mobile.png) no-repeat center top / cover;

        .text {
            width:100%;
            margin:auto 0 0;
            
            h2 {
                font-size: clamp(2.5rem, 1.8554rem + 2.4096vw, 3rem);
                line-height: clamp(2.5rem, 1.8554rem + 2.4096vw, 3rem);

            }
        }
    }

    #collections {
        .info {
            h3 {
                font-size: clamp(3rem, 1.7108rem + 4.8193vw, 4rem);
                line-height: clamp(3rem, 1.7108rem + 4.8193vw, 4rem);

                br {
                    display:none;
                }
            }
        }
    }

    #sobre {
        #content {
            padding-top:120px;

            .highlight {
                p {
                    font-size: clamp(3rem, 1.7108rem + 4.8193vw, 4rem);
                    line-height: clamp(3rem, 1.7108rem + 4.8193vw, 4rem);
                }
            }

            .info {
                margin-top: 80px;
                width: 75%;

                img {
                    margin-top: 80px;
                }
            }
        }
    }

    #contato {
        flex-direction: column;
        gap:64px;

        h2 {
            font-size: clamp(3rem, 1.7108rem + 4.8193vw, 4rem);
        }

        .content {
            margin:0;
            width: 100%;
        }
    }
}

@media screen and (max-width:575px) {
    body {
        font-size:16px;
    }

    header {
        h1 {
            max-width: 42px;

            &.open {
                z-index: 9999;

                a {

                    background:url(img/layout/logo-white.svg) no-repeat top left / 100%;
                }
            }
        }

        nav {
            /* display: none; */
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            background:rgba(14, 12, 13, 0.7);
            backdrop-filter: blur(8px);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 9999;
            width: auto;
            border-radius: 0px;
            flex-direction: column;
            align-items: flex-end;
            justify-content: center;
            gap:24px;
            padding:var(--gap);

            transition:all 300ms ease-out;

            &.open {
                /* display:flex; */
                opacity: 1;
                visibility: visible;
                pointer-events: all;
            }

            a {
                background:var(--cor-chumbo-50);
                color:var(--cor-chumbo-950);
                font-size: 14px;
                padding:0 32px;
                width: auto;
                height:48px;

                &:last-of-type {
                    margin-bottom:auto;
                }
            }

            button.close {
                display: block;
                margin-bottom:auto;
                cursor: pointer;

                background:#FFF;
                color:var(--cor-chumbo-950);
                font-size: 14px;
                padding:0 32px;
                width: auto;
                line-height:48px;
                text-transform: uppercase;
                border-radius:48px;
            }
        }

        .mobile-nav {
            display: block;
            margin-left:auto;
            display:flex;
            align-items: center;
            background:var(--cor-chumbo);
            padding:4px;
            gap:8px;
            border-radius:48px;
            justify-content: space-between;

            button {
                cursor: pointer;
                width:98px;
                height:40px;
                border-radius:40px;
                display:flex;
                align-items: center;
                justify-content: center;
                color:var(--cor-chumbo-50);
                text-transform: uppercase;
                transition: all 300ms ease-out;
                background-color: transparent;

                &:hover, &.active {
                    background:var(--cor-chumbo-800);
                    color:var(--cor-chumbo-50);
                }
            }
        }
    }
    
    .content {
        max-width: none;
        width: 100%;
    }

    .product-info {
        .title {
            padding:16px;
        }
        
        h3 {
            font-size:20px;
        }

        .expand {
            width:48px;
            height: auto;
        }

        .meta {
            padding:0 16px 16px;
        }
    }

    #sobre {
        #banner {
            .thumb {
                margin:auto var(--gap) 0;
            }
        }
    }

    #contato {
        padding-top:120px;

        .content {
            p {
                &:last-of-type {
                    span {
                        font-size: 14px;
                    }
                }
            }
        }
    }
}

@media screen and (max-width:495px) {
    .carousel {
        gap:8px;

        .thumb {
            flex-shrink: 1;
            aspect-ratio: 1 / 1;
            width: 100%;
            height: auto;
        }
    }
}

@media screen and (max-width:428px) {

}