/*   
Theme Name: Travessia
Description: Tema para o site da Travessia.
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;}
input:focus, textarea:focus, button:focus, select:focus {outline:0;}
a:hover, a:active {outline:0;}
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:#492759; color:#F7FFFA; text-shadow:none;}
::selection {background:#492759; color:#F7FFFA; text-shadow:none;}

::-webkit-input-placeholder {color:#492759; text-transform:uppercase; font-size:28px; font-weight:400;}
::-moz-placeholder {color:#492759; text-transform:uppercase; font-size:28px; font-weight:400;}
::placeholder {color:#492759; text-transform:uppercase; font-size:28px; font-weight:400;}

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

/* Variáveis */
:root {
    --cor-verde-claro:#F7FFFA;
    --cor-verde:#7DC696;
    --cor-roxo:#492759;
    --cor-roxo-claro:#603F6F;

    --gap:30px;
}

/* Page style */
html {scroll-behavior:smooth; overscroll-behavior:none; background: var(--cor-verde-claro); scrollbar-color:var(--cor-roxo) var(--cor-verde-claro); 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-verde-claro);}
body::-webkit-scrollbar-thumb {background-color:var(--cor-roxo); border-radius:5px;}

body {font:300 20px/1.3 'Manrope', sans-serif; color:var(--cor-roxo); background:var(--cor-verde-claro); min-height:100vh;}

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

.mobile-check {display:none;}

#wrap {width:100%; max-width:1920px; min-height:100vh; overflow-x: hidden; margin:0 auto;}

.title {
    text-transform: uppercase;
    font-size:18px;
    font-weight:500;
    color:var(--cor-verde);
}

.wrapper {
    max-width:1068px;
    margin:0 auto;
    padding:0 var(--gap);
}

.icon {
    display:block;
    width:32px;
    height:32px;
    transition:all 250ms ease-out;
    flex-shrink: 0;

    &.whatsapp {
        background:url(img/layout/icon-whatsapp.svg) no-repeat center left;
    }

    &.instagram {
        background:url(img/layout/icon-instagram.svg) no-repeat center left;
    }

    &.email {
        background:url(img/layout/icon-email.svg) no-repeat center left;
    }
}

/* Header */
h1 {
    width:100%;

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

.nav-wrapper {
    display:flex;
    gap:var(--gap);
}

nav {
    width:100%;
    display:flex;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    font-size:18px;
    font-weight: 800;

    a {
        border-bottom:2px solid transparent;

        &:hover, &.active {
            border-bottom-color:var(--cor-verde);
        }
    }
}

.main-whatsapp {
    flex-shrink: 0;
    width:52px;
    height:52px;
    border-radius:100%;
    background:var(--cor-verde) url(img/layout/icon-whatsapp.svg) no-repeat center;
    text-indent: -99999px;

    &:hover {
        transform:scale(1.1);
    }
}

header {
    display:flex;

    h1 {
        max-width:228px;
        margin:18px 0 0 var(--gap);
    }

    .nav-wrapper {
        margin-left:auto;
        width:59.28%;
        padding:var(--gap);
    }
}

/* Footer */
footer {
    margin-top:100px;
    padding:var(--gap);

    .content {
        background:var(--cor-verde);
        border-radius:6px;
        padding:var(--gap);

        .flex {
            max-width:1008px;
            margin:0 auto;
            padding:100px 0;
            justify-content: space-between;
            align-items: center;
            gap:var(--gap);
        }

        #contact-form {
            position: relative;
            width:100%;
            max-width:440px;
            display:flex;
            flex-direction: column;
            gap:20px;

            input, textarea {
                width:100%;
                background:transparent;
                line-height:60px;
                height:60px;
                border-bottom:2px solid var(--cor-roxo);
                font-size:24px;
                font-weight: 400;
            }

            textarea {
                line-height:1.3;
            }

            button {
                background:var(--cor-roxo);
                color:var(--cor-verde);
                text-transform: uppercase;
                font-size:22px;
                line-height:60px;
                border-radius:6px;
                font-weight: 800;
                transition: all 250ms ease-out;

                &:hover, &:focus {
                    background:var(--cor-roxo-claro);
                }
            }

            .feedback {
                position: absolute;
                top:100%;
                left:0;
                right:0;
                text-align: center;
                padding-top:12px;
                font-size:16px;
                font-weight: 500;
            }

            .error {
                border-color:red;
            }
        }

        .info {
            width:100%;
            max-width:440px;

            h6 {
                margin-bottom:8px;
                color:var(--cor-roxo);
            }

            p {
                font-size:22px;

                strong {
                    font-weight: 500;
                }
            }

            .links {
                margin-top:50px;
                display:flex;
                flex-direction: column;
                gap:12px;

                a {
                    font-weight: 500;
                    display:flex;
                    align-items: center;
                    gap:12px;

                    &:hover {
                        color:var(--cor-roxo-claro);

                        .icon {
                            transform:scale(1.08);
                        }
                    }
                }
            }
        }

        .credit {
            font-size:14px;
            font-weight:400;
            text-align: center;

            .dev {
                font-size:12px;

                &:hover {
                    color:var(--cor-roxo-claro);
                }

                strong {
                    font-weight: 600;
                }
            }
        }
    }
}

/* Home */
#hero {
    display:flex;
    justify-content: space-between;

    .image {
        width:40.72%;
        border-radius:0 0 6px 0;
        overflow: hidden;

        img {
            object-fit: cover;
            width: 100%;
        }
    }

    .content {
        width:59.28%;
        padding:var(--gap);
        display:flex;
        flex-direction: column;

        h1 {
            margin:auto 0;
        }
    }
}

#about-snippet {
    display:flex;
    padding-top:80px;

    .right {
        margin-left:auto;
        max-width:644px;
    }

    p {
        font-size:26px;

        strong {
            font-weight: 600;
        }

        span {
            font-weight: 500;
        }

        &:first-of-type {
            margin-bottom:var(--gap);
        }
    }

    h3 {
        margin:60px 0 12px;
    }

    ul {
        display:flex;
        justify-content: space-between;

        strong {
            font-weight: 600;
        }

        span {
            font-weight: 500;
        }
    }
}

#who-snippet {
    padding-top:80px;

    ul {
        margin-top:30px;
        display:flex;
        gap:var(--gap);
        justify-content: space-between;

        li {
            width:100%;
            max-width: 156px;

            a {
                display:flex;
                flex-direction: column;
                align-items: center;
                gap:12px;

                &:hover {
                    .thumb {
                        img {
                            transform:scale(1.06);
                        }
                    }

                    span {
                        border-bottom-color:var(--cor-verde);
                    }
                }
            }

            .thumb {
                border-radius:100%;
                overflow: hidden;

                img {
                    transition:all 500ms ease-out;
                }
            }

            h3 {
                font-weight: 300;
                text-align: center;

                br {
                    display: none;
                }
            }

            span {
                font-size: 12px;
                font-weight: 700;
                text-transform: uppercase;
                color:var(--cor-verde);
                border-bottom:2px solid transparent;
                transition:all 250ms ease-out;
            }
        }
    }
}

/* Sobre – A Travessia */
#about {
    padding-top:100px;

    h2 {
        font-size:32px;
        font-weight:300;

        strong {
            font-weight: 800;
        }

        span {
            font-weight: 600;
        }

        em {
            font-style:normal;
            font-weight: 500;
        }
    }

    p {
        font-size:26px;
        margin-bottom:var(--gap);

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

        strong {
            font-weight: 600;
        }

        span {
            font-weight: 500;
        }

        em {
            font-style:normal;
            font-weight: 400;
        }
    }

    .carousel {
        margin:50px 0;
        padding-left: var(--gap);
        display: flex;
        gap:12px;
        cursor:grab;

        img {
            border-radius:6px;
        }
    }

    .where {
        padding-top:80px;

        p {
            font-size:22px;
            max-width:50%;
            margin-top:12px;
        }

        .flex {
            margin-top:50px;
            gap:12px;

            .place {
                display:flex;
                flex-direction: column;
                gap:6px;

                h5 {
                    font-size:18px;
                    font-weight: 300;
                }

                a {
                    display:block;

                    &:hover {
                        .map {
                            img {
                                transform:scale(1.1);
                            }
                        }
                    }
                }

                .map {
                    overflow: hidden;
                    border-radius:6px;

                    img {
                        transition: all 1s ease-out;
                        width: 100%;
                    }
                }
            }
        }
    }
}

/* Quem Somos */
#who {
    #main-photo {
        margin:0 var(--gap) 50px;
        overflow: hidden;
        border-radius: 6px;

        img {
            width: 100%;
            object-fit: cover;
        }
    }

    .intro {
        font-size:26px;
        margin:12px 0 50px;

        strong {
            font-weight: 600;
        }

        span {
            font-weight: 500;
        }
    }

    ul {
        margin-top:20px;
        display:flex;
        flex-direction: column;
        gap:var(--gap);

        li {
            display:flex;
            align-items: center;
            gap:20px;

            .thumb {
                flex-basis:250px;
                flex-shrink: 0;
                overflow: hidden;
                border-radius: 6px;

                img {
                    width:100%;
                    object-fit: cover;
                }
            }

            .content {
                flex-grow: 1;
                display:flex;
                flex-direction: column;
                gap:8px;

                .flex {
                    gap:8px;
                    align-items: center;
                }

                h4 {
                    text-transform: uppercase;
                    font-size:26px;
                    font-weight: 300;

                    strong {
                        font-weight: 600;
                    }
                }

                .whatsapp {
                    display:block;
                    width:32px;
                    height:32px;
                    text-indent: -99999px;
                    background: url(img/layout/icon-whatsapp-filled.svg) no-repeat center;

                    &:hover {
                        transform:scale(1.08);
                    }
                }

                .email {
                    display:block;
                    width:32px;
                    height:32px;
                    text-indent: -99999px;
                    background: url(img/layout/icon-email-green.svg) no-repeat center;

                    &:hover {
                        transform:scale(1.08);
                    }
                }

                span {
                    font-size:16px;
                    font-weight: 400;
                }

                p {
                    font-weight: 400;
                    font-size:18px;
                    line-height:1.4;
                }
            }
        }
    }
}


@media screen and (min-width:1925px) {
    #hero {
        .image {
            border-radius:0 0 6px 6px;
        }
    }
}

@media screen and (max-width:980px) {
    nav {
        a {
            &:first-of-type {
                display:none;
            }
        }
    }

    footer {
        .content {
            .flex {
                padding:0;
                flex-direction: column-reverse;
                gap:calc(var(--gap) * 2);
            }

            #contact-form, .info {
                max-width:100%;
            }

            .credit {
                padding-top:50px;
            }
        }
    }

    #about {
        .where {
            .flex {
                flex-direction: column;
                gap:calc(var(--gap) * 2);
            }
        }
    }
}

@media screen and (max-width:860px) {
    header {
        align-items: center;

        .nav-wrapper {
            width:100%;
        }

        h1 {
            margin:0 0 0 var(--gap);
            max-width:72px;
        }
    }

    h1 {
        max-width:72px;
        
        a, span {
            background:url(img/layout/logo-icon.svg) no-repeat top left / 100% auto;
            padding-bottom:69.44%;
        }
    }

    #hero {
        flex-direction: column-reverse;

        .image {
            width:auto;
            margin: 0 var(--gap);
            border-radius:6px;
        }

        .content {
            width: 100%;
            flex-direction: row-reverse;
            gap:var(--gap);

            h1 {
                margin:auto auto auto 0;
            }

            .nav-wrapper {
                width: 100%;
            }
        }
    }

    #about-snippet {
        flex-direction: column;
        gap:12px;

        .right {
            max-width:none;
        }
    }

    #who-snippet {
        ul {
            li {
                h3 {
                    br {
                        display: block;
                    }
                }
            }
        }
    }

    #about {
        padding-top:60px;

        h2 {
            font-size:28px;
        }

        p {
            font-size:24px;
        }

        .where {
            p {
                max-width: 100%;
            }
        }
    }
}

@media screen and (max-width:760px) {
    #who {
        ul {
            gap:calc(var(--gap) * 2);

            li {
                align-items: normal;
            }
        }
    }
}

@media screen and (max-width:630px) {
    nav {
        font-size:15px;
    }

    #who {
        ul {
            li {
                flex-direction: column;

                .thumb {
                    flex-basis: 100%;
                }
            }
        }
    }
}

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

    header, #hero {
        h1 {
            width:50px;
        }
    }

    nav {
        font-size:13px;
    }

    footer {
        .content {
            padding:calc(var(--gap) * 2);

            .info {
                .links {
                    a {
                        word-break: break-all;
                        font-size:18px;
                    }
                }
            }
        }
    }

    #about-snippet {
        padding-top:60px;
        
        p {
            font-size:24px;
        }
    }

    #who-snippet {
        ul {
            flex-wrap: wrap;
            gap:calc(var(--gap) * 2);

            li {
                width:44%;
                max-width:none;

                h3 {
                    br {
                        display:none;
                    }
                }
            }
        }
    }

    #about {
        padding-top:30px;
    }
}

@media screen and (max-width:450px) {
    .main-whatsapp {
        width:42px;
        height:42px;
    }

    #who-snippet {
        ul {
            li {
                width:42%;

                h3 {
                    br {
                        display:block;
                    }
                }
            }
        }
    }
}

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

    .title {
        font-size:16px;
    }

    footer {
        .content {
            .info {
                .links {
                    a {
                        gap:6px;
                    }
                }
            }
        }
    }

    #about {
        h2 {
            font-size:26px;
        }

        p {
            font-size:22px;
        }

        .where {
            p {
                font-size:20px;
            }
        }
    }
}

/* Tela de espera */
#soon {
    #wrap {
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    
        max-width:1800px;
        width: 80vw;
        margin:auto;
        gap:50px;

        h2 {
            font-weight: 300;
            text-transform: uppercase;
            font-size:32px;
        }
    }
}

/* Owl Carousel */
.owl-carousel {display:none; width:100%; -webkit-tap-highlight-color:transparent; position:relative; z-index:1;}
.owl-carousel .owl-stage {position:relative; -ms-touch-action:pan-Y; -moz-backface-visibility:hidden;}
.owl-carousel .owl-stage:after {content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0;}
.owl-carousel .owl-stage-outer {position:relative; overflow:hidden; -webkit-transform:translate3d(0px, 0px, 0px);}
.owl-carousel .owl-wrapper, .owl-carousel .owl-item {-webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0);}
.owl-carousel .owl-item {position:relative; min-height:1px; float:left; -webkit-backface-visibility:hidden; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none;}
.owl-carousel.owl-loaded {display:block;}
.owl-carousel.owl-loading {opacity:0; display:block;}
.owl-carousel.owl-hidden {opacity:0;}
.owl-carousel.owl-refresh .owl-item {visibility:hidden;}
.owl-carousel.owl-drag .owl-item {-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.owl-carousel.owl-grab {cursor:move; cursor:-webkit-grab; cursor:grabbing !important;}
.no-js .owl-carousel {display:block;}
.owl-carousel .animated {-webkit-animation-duration:400ms;animation-duration:400ms; -webkit-animation-fill-mode:both; animation-fill-mode:both;}
.owl-carousel .owl-animated-in {z-index:0;}
.owl-carousel .owl-animated-out {z-index:1;}
.owl-height {-webkit-transition:height 300ms ease-out;transition:height 300ms ease-out;}
.owl-carousel .owl-nav.disabled, .owl-carousel .owl-dots.disabled {display:none;}
.owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-dot {cursor:pointer; cursor:hand; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}