/* reset by rafaux */
* { margin: 0px; padding: 0px; border: 0px; font-weight: normal; font-size: 100%; list-style: none; line-height: 1; outline: 0px; background: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; }

/* var */
:root { --black: #414141; --red: #F12303; }

/* global class */
.container { display: block; width: auto; max-width: 1200px; height: auto; margin: 0px auto; }

/* base */
a { text-decoration: none; transition: all .5s ease; }
body { background: #fff; color: var(--black); font: 300 17px 'Inter', sans-serif; overflow-x: hidden; }
input, textarea, select, button { font: 300 17px 'CaInterbInterin', sans-serif; appearance: none; -webkit-appearance: none; border-radius: 0px; cursor: pointer; }
input[type=submit], button { transition: all .5s ease; }

/* feat */
#feat { position: relative; display: block; width: 100%; height: 100vh; background-color: #000; overflow: hidden; }
#feat section { position: absolute; z-index: 2; top: 50%; left: 50%; width: 760px; height: auto; transform: translate(-50%, -50%); text-align: center; }
#feat section figure.logo img { width: 220px; height: auto; }
#feat section h1 { display: block; margin: 10px 0px 20px 0px; font-weight: 900; font-size: 90px; color: #fff; line-height: 0.9; }
#feat section strong { display: block; font-weight: 600; font-size: 36px; color: #fff; line-height: 1.2; }
#feat figure.bg img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
#feat span { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 40px; }
#feat span a { padding: 20px 40px; background-color: #fff; color: var(--black); font-weight: 600; border-radius: 50px; }
#feat span a:hover { background-color: var(--red); color: #fff; }

/* txt 1 */
#txt1 { position: relative; padding: 60px 0px; }
#txt1 header h4 { display: block; margin-bottom: 40px; font-weight: 900; line-height: 0.9; }
#txt1 span.p { position: absolute; z-index: 2; top: -70px; left: -20px; width: 770px; height: 700px; background: transparent url('../img/p.png') no-repeat; background-size: contain; transition: all .5s ease; opacity: 0; }
#txt1 span.p.on { top: -140px; opacity: 1; }
#txt1 section p { display: block; margin-bottom: 20px; line-height: 1.6; }
#txt1 section p:first-of-type { font-weight: bold; }

/* tipologia */
#tipologia { display: block; margin-bottom: 60px; text-align: center; }
#tipologia section { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 60px; }
#tipologia section i { color: var(--red); font-size: 30px; }
#tipologia section strong { display: block; margin: 16px 0px; font-weight: bold; }
#tipologia section p { display: block; font-weight: 300; font-size: 16px; }

/* cta */
#cta { display: block; width: 100%; }
#cta aside { width: 100%; height: 70vh; background-color: #000; overflow: hidden; }
#cta aside figure { position: relative; width: 100%; height: 70vh; }
#cta aside figure img { width: 100%; height: 100%; object-fit: cover; opacity: .7; }
#cta aside figure strong { position: absolute; z-index: 2; top: 50%; width: 100%; padding: 0px 40px; font-weight: 900; font-size: 60px; color: #fff; line-height: 1.1; transform: translateY(-50%); text-align: center; }

/* faq */
#faq { display: block; margin: 80px 0px; }
#faq h2 { display: block; margin-bottom: 40px; font-weight: 900; }
#faq details { position: relative; margin-bottom: 10px; padding: 15px 20px; background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 20px; }
#faq details > div { height: auto; overflow: hidden; transition: height 0.4s ease; }
#faq details[open] > div { height: auto; }
#faq summary { position: relative; font-weight: bold; padding-right: 30px; cursor: pointer; }
#faq summary::after { content: '\f0dd'; font-family: 'Font Awesome 5 Pro'; font-weight: 900; position: absolute; right: 0; top: 0; font-size: 16px; transition: transform 0.3s ease; }
#faq details[open] summary::after { transform: rotate(180deg); }
#faq details p { display: block; margin-top: 16px; line-height: 1.6; }

/* form */
#form section { display: flex; align-items: center; margin: 100px auto 0px auto; background-color: #eee; border-radius: 40px 0px 40px 0px; overflow: hidden; }
#form section aside { width: 40%; height: 500px; background-color: #000; border-radius: 40px 0px 40px 0px; }
#form section aside img { width: 100%; height: 100%; object-fit: cover; }
#form section article { width: 60%; height: auto; padding: 60px; }
#form section article legend { display: block; font-weight: 900; font-size: 24px; line-height: 1.4; text-align: center; }
#form section article label { display: block; margin-top: 20px; }
#form section article label input { width: 100%; height: 40px; border-bottom: 1px solid var(--black); color: var(--black); }
#form section article label input::placeholder { color: var(--black); }
#form section article label input:focus, #cta section label input:active { border-color: var(--red); }
#form section article label input[type=submit] { height: auto; margin-top: 20px; padding: 20px; background-color: var(--black); color: #fff; border-radius: 20px; font-weight: bold; text-align: center; }
#form section article label input[type=submit]:hover { background-color: var(--red); color: #fff; border: none; }
#form section i { display: none; }

/* txt2 */
#txt2 { padding: 60px 0px; }
#txt2 h2 { display: block; margin-bottom: 40px; font-weight: 900; }
#txt2 p { display: block; margin-bottom: 20px; line-height: 1.6; }

/* ficha */
#ficha { margin-bottom: 80px; }
#ficha h2 { display: block; margin-bottom: 40px; font-weight: 900; font-size: 60px; }
#ficha span { display: flex; width: 100%; margin-bottom: 10px; background-color: #fff; border-radius: 60px; overflow: hidden; font-size: 18px; }
#ficha span strong { width: 40%; padding: 20px; text-align: right; background-color: #777; color: #fff; font-weight: bold; }
#ficha span em { width: 60%; padding: 20px; font-style: normal; line-height: 1.4; }
#ficha span em a { color: var(--black); text-decoration: underline; }

/* gal */
#gal { margin-bottom: 60px; }
#gal h2 { display: block; margin-bottom: 40px; font-weight: 900; }
#gal section { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 30px; }
#gal section figure { height: 300px; background-color: #000; border-radius: 30px; overflow: hidden; }
#gal section figure img { width: 100%; height: 100%; object-fit: cover; }

/* diferenciais */
#diferenciais { margin-bottom: 60px; }
#diferenciais h2 { display: block; margin-bottom: 40px; font-weight: 900; }
#diferenciais p { display: block; margin-bottom: 20px; line-height: 1.6; }
#diferenciais .cont { position: relative; padding-right: 300px; }
#diferenciais .cont span a { position: absolute; top: -30px; right: 0px; width: 210px; height: 136px; padding: 80px 0px 0px 25px; border-radius: 45px; background-color: rgba(0,0,0,.7); border: 1px solid rgba(0,0,0,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-weight: bold; font-size: 24px; color: #fff; }
#diferenciais .cont span a::after { position: absolute; top: 25px; right: 25px; transform: rotate(312deg); font-weight: 400; font-family: 'Font Awesome 5 Pro'; content: '\f061'; }
#diferenciais .cont span a:hover { background-color: rgba(255,255,255,.5); color: var(--black); }
#diferenciais .grid { display: grid; margin-top: 60px; grid-template-columns: repeat(2, 1fr); grid-gap: 60px; }
#diferenciais .grid i { display: block; width: auto; margin-bottom: 20px; font-size: 36px; color: var(--red); }
#diferenciais .grid strong { display: block; margin-bottom: 20px; font-weight: 900; font-size: 20px; line-height: 1.2; }

/* localizacao */
#localizacao { margin-bottom: 60px; }
#localizacao h2 { display: block; margin-bottom: 40px; font-weight: 900; }
#localizacao section { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
#localizacao section iframe { width: 100%; height: 550px; border-radius: 40px; }
#localizacao section aside { width: 100%; height: auto; padding: 40px; border-radius: 20px; background-color: #fff; box-shadow: 0px 60px 60px rgba(0,0,0,.2); }
#localizacao section aside h3 { display: block; margin-bottom: 30px; font-weight: 900; font-size: 24px; line-height: 1.1; }
#localizacao section aside nav ul { display: grid; grid-template-columns: repeat(3, 1fr); }
#localizacao section aside nav ul li { position: relative; display: block; margin-bottom: 20px; padding-left: 40px; line-height: 1.4; font-weight: bold; font-size: 18px; }
#localizacao section aside nav ul li::before { position: absolute; top: 0px; left: 5px; font-family: 'Font Awesome 5 Pro'; content: '\f00c'; }

/* valores */
#valores { display: block; margin-bottom: 60px; }
#valores h2 { display: block; margin-bottom: 40px; font-weight: 900; font-size: 48px; }
#valores .table { display: block; width: 100%; height: auto; border-radius: 10px; overflow: hidden; background-color: #fff; box-shadow: 0px 60px 60px rgba(0,0,0,.2); }
#valores .table .tr { display: grid; grid-template-columns: repeat(6, 1fr); }
#valores .table .tr.head { background-color: var(--black); color: #fff; }
#valores .table .tr.head span { border-right-color: var(--black) !important; font-weight: bold; }
#valores .table .tr span,
#valores .table .tr strong { padding: 10px; border-right: 1px solid #eee; font-size: 14px; }
#valores .table .tr.body:nth-of-type(even) { background-color: #eee; }
#valores .table .tr strong { font-weight: bold; }
#valores .table .tr a { color: var(--red); text-decoration: underline; }
#valores .table .tr b { display: none; }

/* footer */
#footer { margin: 100px 0px; text-align: center; }
#footer span { display: flex; justify-content: center; gap: 40px; align-items: center; }
#footer span img { height: 40px; }

/* chat */
#chat { position: fixed; z-index: 100; bottom: 40px; left: 20px; width: 60px; height: 60px; opacity: 0; transition: all .5s ease; }
#chat a { display: flex; width: 60px; height: 60px; align-items: center; background-color: rgba(255,255,255,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0px 30px 30px rgba(0,0,0,.3); color: var(--black); border-radius: 100% }
#chat a i { width: 50px; height: 50px; margin: 5px; background-color: #25D366; color: #fff; font-size: 24px; border-radius: 100%; line-height: 50px; text-align: center; transition: all .5s ease; }
#chat.on { bottom: 20px; opacity: 1; }
#chat a:hover { background-color: #25D366; color: #fff }
#chat a:hover i { background-color: #fff; color: #25D366; }

/* bt cta */
.bt-cta { display: block; margin-bottom: 60px; text-align: center; }
.bt-cta a { display: inline-block; width: auto; padding: 10px 20px; background-color: #25D366; color: #fff; font-weight: bold; border-radius: 50px; font-size: 0.8rem; }
.bt-cta a:hover { background-color: #14b44e; }
.bt-cta a i { display: inline-block; margin-right: 10px; font-size: 20px; vertical-align: middle; }

/* box */
#box { display: none; position: fixed; z-index: 9999; top: 0px; left: 0px; width: 100%; height: 100vh; }
#box form { position: absolute; top: 50%; left: 50%; width: 360px; height: auto; padding: 40px; background-color: rgba(255,255,255,.7); border-radius: 20px; transform: translate(-50%, -50%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0px 60px 60px rgba(0,0,0,.5); }
#box form legend { display: block; font-weight: 900; font-size: 18px; line-height: 1.2; }
#box form label { display: block; margin-top: 20px; }
#box form label input { width: 100%; height: 40px; border-bottom: 1px solid var(--black); color: var(--black); font-size: 15px; }
#box form label input::placeholder { color: var(--black); }
#box form label input:focus, #cta section label input:active { border-color: var(--red); }
#box form label input[type=submit] { height: auto; margin-top: 20px; padding: 20px; background-color: var(--black); color: #fff; border-radius: 20px; font-weight: bold; text-align: center; border: none; }
#box form label input[type=submit]:hover { background-color: var(--red); color: #fff; border: none; }
#box form i { position: absolute; top: 10px; right: 10px; font-size: 30px; cursor: pointer; }

/* wpcf7 */
.wpcf7 form { position: relative; }
.wpcf7 form.invalid .wpcf7-response-output { color: #F12303 !important; }
.wpcf7 form.sent .wpcf7-response-output { color: #25D366 !important; }
.wpcf7-not-valid-tip,
.wpcf7 br { display: none !important; }
.wpcf7 .wpcf7-response-output { margin: 0px !important; padding: 10px 0px 0px 0px !important; border: none !important; text-align: center; font-weight: bold; font-size: 14px; line-height: 1.2; }
.wpcf7-spinner { position: absolute !important; margin: 0px !important; }

/* titles */
#localizacao h2,
#diferenciais h2,
#gal h2,
#txt2 h2,
#faq h2,
#valores h2,
#txt1 header h4 { font-size: 36px; }

/* RESPONSIVE ######################################## */

@media (max-width: 1200px){

    /* global */
    .container { padding: 0px 30px; }
    body, input { font-size: 16px !important; }

}

@media (max-width: 820px){

    /* feat */
    #feat section h1 { font-size: 70px; }
    #feat section strong { font-size: 18px; }

    /* title */
    #localizacao h2, #diferenciais h2, #gal h2, #txt2 h2, #faq h2, #valores h2, #txt1 header h4 { font-size: 28px; }

    /* tipologia */
    #tipologia section { grid-template-columns: repeat(2, 1fr); }

    /* cta */
    #cta aside figure strong { font-size: 48px; }

}

@media (max-width: 760px){

    /* global */
    html, body { overflow-x: hidden; }
    body, input { font-size: 14px !important; }

    /* feat */
    #feat section { width: 100%; padding: 0px 25px; }
    #feat section h1 { font-size: 48px; }
    #feat section strong { font-size: 16px; }

    /* diferenciais */
    #diferenciais .grid { grid-template-columns: 1fr; grid-gap: 30px; }
    #diferenciais .grid strong { font-size: 16px; }

    /* localizacao */
    #localizacao section iframe { height: 300px; }

    /* cta */
    #cta aside figure strong { font-size: 36px; }
    #valores .table .tr { grid-template-columns: 1fr; }
    #valores .table .tr b { display: block; }
    #valores .table .tr span, #valores .table .tr strong { padding: 10px 20px; }

    /* table */
    #valores .table .tr.head { display: none; }

    /* gal */
    #gal section { grid-template-columns: 1fr; }

    /* form */
    #form section aside { display: none; }
    #form section article { width: 100%; padding: 20px; }
    #form section article legend { font-size: 20px; }

    /* titles */
    #localizacao h2, #diferenciais h2, #gal h2, #txt2 h2, #faq h2, #valores h2, #txt1 header h4 { font-size: 22px; }

}

@media (max-width: 680px){

    /* tipologia */
    #tipologia section p { font-size: 13px; }

}

@media (prefers-color-scheme: dark) {

    body { background: #222; color: #eee; }
    #tipologia section { grid-gap: 40px; }
    #tipologia section article { padding: 40px; border: 1px solid #333; border-radius: 20px; }
    #valores .table { background-color: var(--black); }
    #valores .table .tr.head { background-color: #111; }
    #valores .table .tr.body:nth-of-type(even) { background-color: #333; }
    #valores .table .tr span, #valores .table .tr strong { border: none !important; }
    #faq details { background-color: #333; border: none; }
    #form section { background-color: #333; }
    #form section article label input { color: #fff; border-bottom-color: #555; }
    #form section article label input::placeholder { color: #aaa; }
    #form section article label input[type=submit] { border: none; } 
    #box form { background-color: rgba(0,0,0,.7); }
    #box form label input { color: #fff; border-bottom-color: #555; }
    #box form label input::placeholder { color: #aaa; }
    #box form label input[type=submit] { border: none; }
    .bt-cta a { background-color: transparent; border: 1px solid #25D366; color: #25D366; }
    .bt-cta a:hover { color: #fff; }

}