@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
  position: relative;
  box-sizing: border-box;
}

@font-face {
  font-family: "Mori";
  src: url(founders-grotesk-regular.woff2) format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Mori";
  src: url(founders-grotesk-medium.woff2) format("woff");
  font-weight: 600;
  font-display: swap;
}
:root {
  --preto: #1c1e1c;
  --cinza: #787878;
  --branco: #f3f7f3;
  --laranja: #EA8C1C;
  --verde: #4D5A2C;
  --azul: #1F4F6F;
  --ease: cubic-bezier(.87, 0, .13, 1);
  --space: 8vw;
}

@media (orientation: portrait) {
  html {
    font-size: 2.8vw;
  }
}
@media (orientation: landscape) {
  html {
    font-size: 1vw;
  }
}

body, main, header, section, footer, div, figure, figcaption, form, nav, menu, label, span, a, i {
  display: flex;
}

body {
  position: fixed;
  overflow: hidden;
  font-family: "Mori", sans-serif;
  font-style: normal;
  font-weight: 400;
  background: var(--branco);
}

main {
  scroll-behavior: smooth;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  background: var(--branco);
}

section {
  flex-direction: column;
  scroll-snap-align: start;
  scroll-margin-top: 5rem;
}

h1, h2, h3, p, a, span {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

img {
  width: 100%;
  height: auto;
}

h1 {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--branco);
  text-align: center;
}
@media (orientation: portrait) {
  h1 {
    font-size: 2rem;
  }
  h1 br {
    display: block;
  }
}

h2 {
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--preto);
}

h3 {
  font-size: 1.75rem;
  font-weight: 600;
}

p, a, button, label, figcaption {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--branco);
}

@media (orientation: portrait) {
  p, label {
    font-size: 1.4rem;
  }
}
a, button, label {
  font-family: "Mori", sans-serif;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.02rem;
  transition: font-variation-settings 0.3s, letter-spacing 0.3s;
}

input, button {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  outline: none;
  border: 0;
  background: transparent;
  color: var(--branco);
}

::-moz-placeholder {
  font-family: "Mori", sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--branco);
  padding: 1rem 0;
}

:-ms-input-placeholder {
  font-family: "Mori", sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--branco);
  padding: 1rem 0;
}

input, ::placeholder {
  font-family: "Mori", sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--branco);
  padding: 1rem 0;
}

.btn {
  font-weight: 600;
  padding: 1rem 1.5rem 0.8rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.5rem;
  line-height: 1;
  background: var(--laranja);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

.fade {
  transform: translate3d(0, 3rem, 0);
  transition-property: opacity, transform;
  transition-duration: 0.8s, 1.4s;
  transition-timing-function: linear, cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@media (orientation: landscape) {
  .fade.d1 {
    transition-delay: 0.2s;
  }
  .fade.d2 {
    transition-delay: 0.4s;
  }
  .fade.d3 {
    transition-delay: 0.6s;
  }
}
.fade.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

menu {
  position: fixed;
  width: 100vw;
  padding: 1.2rem var(--space);
  z-index: 10;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  transition: background 1s, transform 0.5s;
}
menu.scroll {
  background: var(--preto);
}
menu nav {
  pointer-events: all;
  gap: 2rem;
  align-items: center;
}
@media (orientation: portrait) {
  menu nav a:not(.btn) {
    display: none;
  }
}
menu > img {
  width: 10rem;
}
menu .menu-icon {
  flex-direction: column;
  justify-content: space-between;
  width: 4.4vw;
  height: 4.4vw;
  gap: 6px;
  z-index: 1000;
  pointer-events: auto;
}
@media (orientation: landscape) {
  menu .menu-icon {
    display: none;
  }
}
menu .menu-icon a {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  background-color: transparent;
  transition: background-color 0.4s;
  transition-delay: 0s;
}
menu .menu-icon a[href="#mobile"] {
  display: block;
}
menu .menu-icon a[href="/"] {
  display: none;
}
menu .menu-icon span {
  transform: scaleX(1.5);
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 100%;
  height: 2px;
  background-color: var(--branco);
  transition: 0.7s var(--ease);
}
menu .menu-icon span:nth-of-type(1), menu .menu-icon span:nth-of-type(3) {
  transition-delay: 0.1s;
}

nav#mobile {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  padding: 10rem var(--space);
  z-index: 9;
  background: #786024;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  transition: 0.7s var(--ease);
  transform: translateX(100vw);
}
nav#mobile:target {
  transform: translateX(0);
}
nav#mobile:target ~ menu .menu-icon a[href="#mobile"] {
  display: none;
}
nav#mobile:target ~ menu .menu-icon a[href="#"] {
  display: block;
}
nav#mobile:target ~ menu .menu-icon span:nth-of-type(1) {
  transform: rotate(45deg) scaleX(1.3);
  transform-origin: left top;
}
nav#mobile:target ~ menu .menu-icon span:nth-of-type(2) {
  transform: scaleX(0);
  transform-origin: left;
}
nav#mobile:target ~ menu .menu-icon span:nth-of-type(3) {
  transform: rotate(-45deg) scaleX(1.3);
  transform-origin: left bottom;
}
nav#mobile a {
  font-size: 2rem;
  flex: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid var(--branco);
}
nav#mobile a:first-of-type {
  border-top: 1px solid var(--branco);
}
@media (orientation: landscape) {
  nav#mobile {
    display: none;
  }
}

.loaded header .bg {
  transform: scale(1.2);
}
.loaded header .logo path {
  stroke-dashoffset: 0 !important;
}
.loaded .loading {
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.loading {
  position: fixed;
  width: 100vw;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  justify-content: center;
  align-items: center;
  z-index: 99999999;
  background: var(--preto);
  pointer-events: none;
  -webkit-animation-name: loading-box;
          animation-name: loading-box;
  -webkit-animation-duration: 1.4s;
          animation-duration: 1.4s;
  -webkit-animation-timing-function: var(--ease);
          animation-timing-function: var(--ease);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
}
.loading svg path:first-child {
  transform-origin: 438px 139px;
  -webkit-animation: loading 1s var(--ease) infinite;
          animation: loading 1s var(--ease) infinite;
}

menu.scroll ~ .loading {
  visibility: hidden;
}

@-webkit-keyframes loading {
  to {
    transform: rotate(360deg);
  }
}

@keyframes loading {
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes loading-box {
  from {
    -webkit-clip-path: polygon(-50% 0, 200% 0, 0 200%, 0 -50%);
            clip-path: polygon(-50% 0, 200% 0, 0 200%, 0 -50%);
  }
  to {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 50%);
            clip-path: polygon(0 0, 0 0, 0 0, 0 50%);
  }
}
@keyframes loading-box {
  from {
    -webkit-clip-path: polygon(-50% 0, 200% 0, 0 200%, 0 -50%);
            clip-path: polygon(-50% 0, 200% 0, 0 200%, 0 -50%);
  }
  to {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 50%);
            clip-path: polygon(0 0, 0 0, 0 0, 0 50%);
  }
}
header {
  width: 100vw;
  min-height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  background: var(--preto);
  overflow: hidden;
}
header h1 {
  display: flex;
  gap: 10px;
  flex-flow: wrap;
  justify-content: center;
  padding: 0 20px;
}
header .bg {
  position: absolute;
  width: 100vw;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.25;
  transition: transform 30s linear;
}
header .logo {
  width: 40rem;
  fill: none;
}
@media (orientation: portrait) {
  header .logo {
    width: 30rem;
  }
}
header .logo path {
  fill: none;
  stroke: var(--branco);
  stroke-width: 8;
  transition: stroke-dashoffset 2s cubic-bezier(0, 0.55, 0.45, 1);
}
header .logo path:nth-of-type(1) {
  stroke-dasharray: 263;
  stroke-dashoffset: 263;
  transition-delay: 0.4s;
}
header .logo path:nth-of-type(2) {
  stroke-dasharray: 285;
  stroke-dashoffset: 285;
  transition-delay: 0.6s;
}
header .logo path:nth-of-type(3) {
  stroke-dasharray: 342;
  stroke-dashoffset: 342;
  transition-delay: 0.8s;
}
header .logo path:nth-of-type(4) {
  stroke-dasharray: 88;
  stroke-dashoffset: 88;
  transition-delay: 1s;
}
header .logo path:nth-of-type(5) {
  stroke-dasharray: 297;
  stroke-dashoffset: 297;
  transition-delay: 1.2s;
}
header .logo path:nth-of-type(6) {
  stroke-dasharray: 278;
  stroke-dashoffset: 278;
  transition-delay: 1.4s;
}

#sobre {
  align-items: center;
  padding: 64px 0;
}
#sobre h2 {
  text-align: center;
}
#sobre > p {
  font-size: 1.625rem;
  text-align: center;
  color: var(--preto);
  margin: 2rem 0 8rem 0;
}
@media (orientation: portrait) {
  #sobre > p {
    padding: 0 3rem;
  }
  #sobre > p br {
    display: none;
  }
}
#sobre div {
  gap: 5rem;
  padding: 0 var(--space);
}
@media (orientation: portrait) {
  #sobre div {
    flex-direction: column;
  }
}
#sobre div span {
  flex: 1;
  background: var(--branco);
}
#sobre div span:first-of-type {
  flex: 1.5;
}
#sobre div span:last-of-type {
  flex-direction: column;
  gap: 2.25rem;
}
#sobre div span:last-of-type p {
  color: var(--preto);
}
#sobre div span img {
  mix-blend-mode: multiply;
  width: 100%;
}

#vista {
  align-items: center;
}
#vista h2 {
  text-align: center;
  margin-bottom: 4.5rem;
}
#vista figure {
  width: 100%;
  height: 90vh;
  background: var(--branco);
}
@media (orientation: portrait) {
  #vista figure {
    height: 50vh;
  }
}
#vista figure > img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  mix-blend-mode: multiply;
}
#vista figure div {
  align-self: flex-start;
  padding: 5.4rem var(--space);
  align-items: center;
  gap: 1rem;
}
#vista figure div img {
  width: 3rem;
  height: 2rem;
}

#fullscreen {
  display: none;
}
#fullscreen:checked + menu {
  transform: translateY(-20rem);
}
#fullscreen:checked ~ main .slider {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 666;
  background: var(--preto);
  padding: 3rem;
}
#fullscreen:checked ~ main .slider .fakenav {
  padding: 0;
  min-width: calc(100vw - 6rem);
}
#fullscreen:checked ~ main .slider figure {
  align-items: center;
  padding: 0;
  min-width: 100vw;
}
#fullscreen:checked ~ main .slider figure img {
  height: 70vh;
  -o-object-fit: contain;
     object-fit: contain;
}
#fullscreen:checked ~ main .slider figure figcaption {
  color: var(--branco);
}
#fullscreen:checked ~ main .slider figure label {
  cursor: zoom-out;
}
#fullscreen:checked ~ main .slider .apt194::before, #fullscreen:checked ~ main .slider .apt144::before, #fullscreen:checked ~ main .slider .decorado::before, #fullscreen:checked ~ main .slider .comuns::before {
  display: none;
}
#fullscreen:checked ~ main .slider .close_modal {
  display: flex;
  align-self: flex-start;
  min-width: 3rem;
  left: 0;
  background: var(--preto);
  border: 1px solid var(--branco);
}
#fullscreen:checked ~ main .slider .close_modal::after, #fullscreen:checked ~ main .slider .close_modal::before {
  background: var(--branco);
}

#perspectivas input {
  display: none;
}
#perspectivas .title {
  justify-content: space-between;
  align-items: baseline;
  padding: 64px var(--space);
  padding-bottom: 0;
}
@media (orientation: portrait) {
  #perspectivas .title {
    flex-direction: column;
    padding: 48px var(--space);
    gap: 2rem;
  }
}
#perspectivas .title nav {
  gap: 0;
}
#perspectivas .title nav label {
  color: var(--cinza);
  font-size: 1.5rem;
  padding: 12px 24px;
}
#perspectivas .slider {
  width: 100%;
  padding: 0 var(--space);
  align-items: center;
  gap: 1rem;
  overflow-x: scroll;
  scroll-behavior: smooth;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  scrollbar-width: none;
  transition: 0.5s;
}
#perspectivas .slider::-webkit-scrollbar {
  display: none;
}
#perspectivas .fakenav {
  justify-content: space-between;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  padding: 0 2rem;
  min-width: calc(100vw - var(--space) * 2);
  z-index: 2;
  pointer-events: none;
}
#perspectivas .fakenav i {
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 1px solid   ;
  background: #1C1E1C;
}
#perspectivas .fakenav i::after {
  content: "";
  width: 1rem;
  height: 1rem;
  border-top: 1px solid var(--branco);
  border-right: 1px solid var(--branco);
  transform: translateX(0.25rem) rotate(-135deg);
}
#perspectivas .fakenav i:last-of-type::after {
  transform: translateX(-0.25rem) rotate(45deg);
}
@media (orientation: portrait) {
  #perspectivas .fakenav i {
    width: 3rem;
    height: 3rem;
  }
  #perspectivas .fakenav i::after {
    width: 0.75rem;
    height: 0.75rem;
  }
}
#perspectivas figure {
  display: none;
  padding: var(--space) 0;
  min-width: calc(100vw - var(--space) * 2);
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: center;
}
@media (orientation: portrait) {
  #perspectivas figure {
    padding: 8rem 0;
  }
}
#perspectivas figure.first figcaption {
  opacity: 1;
}
#perspectivas figure:target figcaption {
  opacity: 1;
}
#perspectivas figure nav {
  position: absolute;
  margin-bottom: 2.5rem;
  width: 100%;
  justify-content: space-between;
}
#perspectivas figure nav a {
  flex: 1;
  height: 75vh;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}
@media (orientation: portrait) {
  #perspectivas figure nav a {
    height: 50vh;
  }
}
#perspectivas figure nav label {
  flex: 4;
  cursor: zoom-in;
  height: 75vh;
}
@media (orientation: portrait) {
  #perspectivas figure nav label {
    height: 50vh;
  }
}
#perspectivas figcaption {
  color: var(--preto);
  margin-top: 1rem;
  opacity: 0;
  transition: opacity 0.3s;
}
#perspectivas img {
  width: 100%;
  height: 75vh;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (orientation: portrait) {
  #perspectivas img {
    height: 50vh;
  }
}

#apt194:checked ~ div .apt194 {
  display: flex;
}
#apt194:checked ~ div label[for=apt194] {
  color: var(--preto);
  border: 1px solid var(--preto);
  border-radius: 100px;
}

.apt194::before, .apt144::before, .decorado::before, .comuns::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3005 10.9961C20.3005 8.52842 19.3206 6.16141 17.5757 4.4165C15.8308 2.67159 13.4638 1.69171 10.9961 1.69171C8.52842 1.69171 6.16141 2.67159 4.4165 4.4165C2.67159 6.16141 1.69171 8.52842 1.69171 10.9961C1.69171 13.4638 2.67159 15.8308 4.4165 17.5757C6.16141 19.3206 8.52842 20.3005 10.9961 20.3005C13.4638 20.3005 15.8308 19.3206 17.5757 17.5757C19.3206 15.8308 20.3005 13.4638 20.3005 10.9961ZM21.9922 10.9961C21.9922 13.6291 21.0445 16.1618 19.3434 18.1473L24 22.8039L22.8039 24L18.1473 19.3434C16.1618 21.0445 13.6291 21.9922 10.9961 21.9922C8.07975 21.9922 5.28258 20.834 3.22041 18.7718C1.15824 16.7096 0 13.9124 0 10.9961C0 8.07975 1.15824 5.28258 3.22041 3.22041C5.28258 1.15824 8.07975 0 10.9961 0C13.9124 0 16.7096 1.15824 18.7718 3.22041C20.834 5.28258 21.9922 8.07975 21.9922 10.9961Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    top: 18%;
    right: 24px;
    z-index: 1;
}

#apt144:checked ~ div .apt144 {
  display: flex;
}
#apt144:checked ~ div label[for=apt144] {
  color: var(--preto);
  border: 1px solid var(--preto);
  border-radius: 100px;
}

#comuns:checked ~ div .comuns {
  display: flex;
}
#comuns:checked ~ div label[for=comuns] {
  color: var(--preto);
  border: 1px solid var(--preto);
  border-radius: 100px;
}

#decorado:checked ~ div .decorado {
  display: flex;
}
#decorado:checked ~ div label[for=decorado] {
  color: var(--preto);
  border: 1px solid var(--preto);
  border-radius: 100px;
}

#plantas {
  padding: 64px var(--space);
  background: var(--verde);
}
#plantas h2 {
  margin-bottom: 8rem;
}
#plantas::after {
  content: "";
  position: absolute;
  top: 12rem;
  right: 0;
  width: 26.8rem;
  height: 2rem;
  background: var(--branco);
  opacity: 0.15;
}
@media (orientation: portrait) {
  #plantas::after {
    top: 22rem;
  }
}
#plantas::before {
  content: "";
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  border: 2rem solid var(--branco);
  opacity: 0.15;
}
@media (orientation: portrait) {
  #plantas::before {
    left: -10rem;
  }
}
#plantas h2, #plantas h3 {
  color: var(--branco);
}
#plantas .textos {
  gap: 3rem;
  margin-bottom: 8rem;
}
@media (orientation: portrait) {
  #plantas .textos {
    flex-direction: column;
  }
}
#plantas .textos span {
  flex: 1;
  flex-direction: column;
  gap: 1.375rem;
}
#plantas .textos span::before {
  content: "";
  width: 2rem;
  height: 2rem;
  border: 0.25rem solid #9CA8C2;
  border-radius: 50%;
}
#plantas #plantas_wrapper {
  background: var(--branco);
  padding: var(--space);
  border-radius: 2.75rem;
  transition: 0.5s;
}
#plantas #plantas_wrapper:target {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 666;
  border-radius: 0;
  padding: 2rem 0;
}
#plantas #plantas_wrapper div:last-of-type::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3005 10.9961C20.3005 8.52842 19.3206 6.16141 17.5757 4.4165C15.8308 2.67159 13.4638 1.69171 10.9961 1.69171C8.52842 1.69171 6.16141 2.67159 4.4165 4.4165C2.67159 6.16141 1.69171 8.52842 1.69171 10.9961C1.69171 13.4638 2.67159 15.8308 4.4165 17.5757C6.16141 19.3206 8.52842 20.3005 10.9961 20.3005C13.4638 20.3005 15.8308 19.3206 17.5757 17.5757C19.3206 15.8308 20.3005 13.4638 20.3005 10.9961ZM21.9922 10.9961C21.9922 13.6291 21.0445 16.1618 19.3434 18.1473L24 22.8039L22.8039 24L18.1473 19.3434C16.1618 21.0445 13.6291 21.9922 10.9961 21.9922C8.07975 21.9922 5.28258 20.834 3.22041 18.7718C1.15824 16.7096 0 13.9124 0 10.9961C0 8.07975 1.15824 5.28258 3.22041 3.22041C5.28258 1.15824 8.07975 0 10.9961 0C13.9124 0 16.7096 1.15824 18.7718 3.22041C20.834 5.28258 21.9922 8.07975 21.9922 10.9961Z' fill='black'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    top: 0%;
    right: 0;
    transform: translate(120%, -50%);
    z-index: 3;
}
#plantas #plantas_wrapper:target div:first-of-type {
  display: none;
}
@media (orientation: portrait) {
  #plantas #plantas_wrapper:target div:last-of-type {
    overflow-x: scroll;
  }
  #plantas #plantas_wrapper div:last-of-type::before {
    transform: translate(50%, -100%);
  }
}
#plantas #plantas_wrapper:target figure {
  padding: 0 2rem;
}
@media (orientation: portrait) {
  #plantas #plantas_wrapper:target figure {
    width: 200vw;
  }
}
#plantas #plantas_wrapper:target figcaption {
  display: none;
}
#plantas #plantas_wrapper:target .open_modal {
  display: none;
}
#plantas #plantas_wrapper:target div:last-of-type::before {
  display: none;
}
#plantas #plantas_wrapper:target .close_modal {
  display: flex;
}
@media (orientation: portrait) {
  #plantas #plantas_wrapper {
    flex-direction: column;
    gap: 4rem;
  }
}
#plantas #plantas_wrapper input {
  display: none;
}
#plantas #plantas_wrapper div {
  max-width: 100%;
  flex-direction: column;
}
#plantas #plantas_wrapper div:first-of-type {
  flex: 1;
  justify-content: space-between;
  gap: 2rem;
}
#plantas #plantas_wrapper div:last-of-type {
  flex: 2;
  aspect-ratio: 40/25;
}
@media (orientation: portrait) {
  #plantas #plantas_wrapper div:last-of-type {
    aspect-ratio: 40/30;
  }
}
#plantas #plantas_wrapper span {
  flex-direction: column;
  gap: 0;
}
#plantas #plantas_wrapper span label {
  font-size: 1.5rem;
  color: var(--cinza);
  width: fit-content;
  padding: 12px 24px;
}
#plantas #plantas_wrapper label, #plantas #plantas_wrapper h2, #plantas #plantas_wrapper figcaption {
  color: var(--preto);
}
#plantas #plantas_wrapper figure {
  position: absolute;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  gap: 1.125rem;
  opacity: 0;
  transition: opacity 1s;
}
#plantas #plantas_wrapper figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
#plantas #plantas_wrapper .open_modal {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
  z-index: 3;
}

.close_modal {
  display: none;
  position: -webkit-sticky;
  position: sticky;
  left: 2rem;
  top: 0;
  width: 3rem;
  height: 3rem;
  justify-content: center;
  align-items: center;
  z-index: 3;
  background: var(--branco);
  border: 1px solid var(--preto);
  border-radius: 50%;
}
.close_modal::after, .close_modal::before {
  content: "";
  position: absolute;
  width: 2rem;
  height: 1px;
  background: var(--preto);
}
.close_modal::after {
  transform: rotate(45deg);
}
.close_modal::before {
  transform: rotate(-45deg);
}

#planta_194_1:checked ~ div .planta_194_1 {
  opacity: 1 !important;
  z-index: 2;
}
#planta_194_1:checked ~ div label[for=planta_194_1] {
  color: var(--preto) !important;
  border: 1px solid var(--preto);
  border-radius: 100px;
}

#planta_194_2:checked ~ div .planta_194_2 {
  opacity: 1 !important;
  z-index: 2;
}
#planta_194_2:checked ~ div label[for=planta_194_2] {
  color: var(--preto) !important;
  border: 1px solid var(--preto);
  border-radius: 100px;
}

#planta_194_3:checked ~ div .planta_194_3 {
  opacity: 1 !important;
  z-index: 2;
}
#planta_194_3:checked ~ div label[for=planta_194_3] {
  color: var(--preto) !important;
  border: 1px solid var(--preto);
  border-radius: 100px;
}

#planta_194_4:checked ~ div .planta_194_4 {
  opacity: 1 !important;
  z-index: 2;
}
#planta_194_4:checked ~ div label[for=planta_194_4] {
  color: var(--preto) !important;
  border: 1px solid var(--preto);
  border-radius: 100px;
}

#planta_144_1:checked ~ div .planta_144_1 {
  opacity: 1 !important;
  z-index: 2;
}
#planta_144_1:checked ~ div label[for=planta_144_1] {
  color: var(--preto) !important;
  border: 1px solid var(--preto);
  border-radius: 100px;
}

#planta_144_2:checked ~ div .planta_144_2 {
  opacity: 1 !important;
  z-index: 2;
}
#planta_144_2:checked ~ div label[for=planta_144_2] {
  color: var(--preto) !important;
  border: 1px solid var(--preto);
  border-radius: 100px;
}

#planta_144_3:checked ~ div .planta_144_3 {
  opacity: 1 !important;
  z-index: 2;
}
#planta_144_3:checked ~ div label[for=planta_144_3] {
  color: var(--preto) !important;
  border: 1px solid var(--preto);
  border-radius: 100px;
}

#diferenciais {
  padding: 64px var(--space);
}
#diferenciais input {
  display: none;
}
#diferenciais img {
  position: absolute;
  width: 100%;
  max-width: 30%;
  height: 100%;
  max-height: 80%;
  object-fit: cover;
  border-radius: 24px;
  top: 50%;
  right: 30px;
  transform: translate(0, -50%);
}
#diferenciais input:checked ~ div span {
  max-height: 100vh;
  padding: 3rem 0;
}
#diferenciais input:checked + label::after {
  transform: translate(1rem, 0rem) rotate(-45deg);
}
#diferenciais h2 {
  margin-bottom: 3rem;
}
#diferenciais label, #diferenciais p {
  color: var(--preto);
  gap: 12px;
}
#diferenciais div, #diferenciais span {
  flex-direction: column;
}
#diferenciais label {
  padding: 3rem 0;
  align-items: center;
  text-transform: uppercase;
  font-weight: 600;
}
#diferenciais label::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-top: 0.125rem solid var(--preto);
  border-right: 0.125rem solid var(--preto);
  transition: transform 0.7s var(--ease);
  transform: translate(1rem, -0.25rem) rotate(135deg);
}
#diferenciais .fade {
  border-top: 0.125rem solid var(--preto);
}
#diferenciais .fade:first-child {
  border-top: none;
}
#diferenciais span {
  gap: 3rem;
  overflow: hidden;
  max-height: 0;
  padding: 0;
  transition: padding 0.7s var(--ease), max-height 0.7s var(--ease);
}
#diferenciais p::before {
  content: "";
  position: absolute;
  top: -1rem;
  width: 1.5rem;
  height: 0.125rem;
  background: var(--azul);
}

#localizacao {
  padding: 8rem var(--space);
  background: #786024;
  gap: 4.5rem;
}
#localizacao h2 {
  color: var(--branco);
}
#localizacao div {
  border-radius: 2rem;
  overflow: hidden;
  height: 60vh;
  background: var(--branco);
}
#localizacao iframe {
  width: 100%;
  height: 100%;
}

#ficha {
  padding: 8rem var(--space);
  gap: 8rem;
}
#ficha div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5rem;
}
@media (orientation: portrait) {
  #ficha div {
    grid-template-columns: repeat(2, 1fr);
    gap: 5rem 3rem;
  }
}
#ficha h3 {
  font-size: 2.5rem;
  color: var(--preto);
}
#ficha h3::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  width: 1.5rem;
  height: 0.25rem;
  background: var(--azul);
}
@media (orientation: portrait) {
  #ficha h3 {
    font-size: 1.4rem;
  }
}

@media (orientation: landscape) {
  #contato {
    display: grid;
    flex-direction: row;
    grid-template-columns: 1fr 1fr;
  }
}
#contato img {
  flex: 1;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#contato form {
  flex: 1;
  flex-direction: column;
  gap: 1.5rem;
  padding: 8rem var(--space);
  background: var(--azul);
}
#contato form p.inline {
  display: inline;
}
#contato form p.inline > a {
  display: inline;
  color: var(--laranja);
}
#contato form p:nth-of-type(1) {
  display: none;
  color: var(--laranja);
}
#contato form.sended p {
  display: block;
}
#contato form.sended button {
  display: none;
}
#contato form > input:focus::-moz-placeholder {
  color: transparent;
}
#contato form > input:focus:-ms-input-placeholder {
  color: transparent;
}
#contato form > input:focus::placeholder {
  color: transparent;
}
#contato input {
  border-bottom: 1px solid var(--branco);
  border-radius: 0;
  width: 100%;
}
#contato h2 {
  color: var(--branco);
  margin-bottom: 1rem;
}
#contato button {
  align-self: flex-start;
  margin-top: 2rem;
}

footer {
  flex-direction: row;
  background: var(--preto);
}
@media (orientation: portrait) {
  footer {
    flex-direction: column;
    padding-bottom: 10rem;
  }
}
footer div {
  padding: var(--space);
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space);
}
footer img {
  width: auto;
  height: 2.5rem;
}
footer .mos {
  height: 3.8rem;
}
footer span {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 1rem var(--space);
}
footer small {
  color: var(--branco);
  font-size: 0.8rem;
  line-height: 1.6;
}
@media (orientation: portrait) {
  footer small {
    font-size: 1.2rem;
  }
}

#tour-virtual {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  right: 0px;
  bottom: 0px;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 60px 20px;
  height: 100vh;
  border: none;
}
#tour-virtual h2 {
  font-family: "Mori", sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 28px;
  line-height: 34px;
  color: #FFEFD7;
  margin-bottom: 40px;
  text-align: center;
}
#tour-virtual iframe {
  width: 100%;
  height: 600px;
  max-width: 1100px;
}
@media (max-width: 800px) {
  #tour-virtual {
    padding: 0 10px;
    padding-top: 100px;
  }
  #tour-virtual h2 {
    font-size: 20px;
    line-height: 26px;
    margin-bottom: 30px;
  }
  #tour-virtual iframe {
    height: 350px;
    margin-left: 0px;
  }
  #perspectivas .title nav {
    flex-direction: column;
  }
  
  #sobre {
    padding: 48px 0;
  }
  #plantas, #diferenciais {
    padding: 48px var(--space);
  }
  #diferenciais img {
    max-height: 130px;
    max-width: 100%;
    border-radius: 15px;
    top: 5px;
    left: 0;
    transform: translate(0, -15%);
  }
  #diferenciais input:checked ~ div span {
    padding: 14rem 0 3rem 0;
  }
}

.pht-whatsapp > form > div {
  margin: 1rem 3rem 1rem 1rem !important;
  display: flex;
  flex-direction: column;
}
.pht-whatsapp > form > div .chat-header .chat-admin-details {
  display: flex;
  flex-direction: column;
}
.pht-whatsapp > form > div .chat-form {
  /* Para alterar o texto do placeholder, usamos o pseudo-elemento específico do navegador */
}
.pht-whatsapp > form > div .chat-form > input {
  font-size: 1rem;
  width: 75% !important;
}
@media (orientation: portrait) {
  .pht-whatsapp > form > div .chat-form > input {
    font-size: 2rem;
    width: 100% !important;
  }
}
.pht-whatsapp > form > div .chat-form input::-moz-placeholder {
  font-size: 1rem; /* Altera o tamanho do texto do placeholder */
}
.pht-whatsapp > form > div .chat-form input:-ms-input-placeholder {
  font-size: 1rem; /* Altera o tamanho do texto do placeholder */
}
.pht-whatsapp > form > div .chat-form input::placeholder {
  font-size: 1rem; /* Altera o tamanho do texto do placeholder */
}
@media (orientation: portrait) {
  .pht-whatsapp > form > div .chat-form input::-moz-placeholder {
    font-size: 2rem;
  }
  .pht-whatsapp > form > div .chat-form input:-ms-input-placeholder {
    font-size: 2rem;
  }
  .pht-whatsapp > form > div .chat-form input::placeholder {
    font-size: 2rem;
  }
}
.pht-whatsapp > form > div .chat-form input::-webkit-input-placeholder {
  font-size: 1rem; /* Para navegadores baseados em Webkit (Chrome, Safari) */
}
@media (orientation: portrait) {
  .pht-whatsapp > form > div .chat-form input::-webkit-input-placeholder {
    font-size: 2rem;
  }
}
.pht-whatsapp > form > div .chat-form input::-moz-placeholder {
  font-size: 1rem; /* Para Firefox */
}
@media (orientation: portrait) {
  .pht-whatsapp > form > div .chat-form input::-moz-placeholder {
    font-size: 2rem;
  }
}
.pht-whatsapp > form > div .chat-form input:-ms-input-placeholder {
  font-size: 1rem; /* Para Internet Explorer */
}
@media (orientation: portrait) {
  .pht-whatsapp > form > div .chat-form input:-ms-input-placeholder {
    font-size: 2rem;
  }
}

.grecaptcha-badge {
  visibility: hidden;
}/*# sourceMappingURL=styles.css.map */

label.error {
    color: #eb3838;
    font-size: 13px;
    text-transform: none;
    position: absolute;
    bottom: -25px;
    right: 0;
}
.box-mensagem-ativo {
    display: flex;
}
.box-mensagem {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: none;
    justify-content: center;
    align-items: center;
}
.box-mensagem-ativo {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #1F4F6F;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-mensagem-ok {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    gap: 20px;
}
.box-mensagem-tit {
    font-family: Sinkinsans, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 44px;
    color: #fff;
}
.box-mensagem-texto {
    font-family: Sinkinsans, sans-serif;
    font-size: 14px;
    line-height: 28px;
    color: #fff;
}
.btnCallBack {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    background-color: #EA8C1C;
    border-radius: 100px;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 200px;
    height: 54px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0;
    padding-bottom: 0;
    text-decoration: none;
    display: flex;
    color: #fff;
    text-transform: uppercase;
    font-family: Sinkinsans, sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 22px;
}

/* Variáveis para o modal */
        :root {
            --modal-bg: rgba(0, 0, 0, 0.8);
            --modal-content-bg: #ffffff;
            --primary-color: #1c1e1c;
            --whatsapp-green: #25D366;
            --primary-dark: #1c1e1c;
        }

        /* Modal */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--modal-bg);
            z-index: 1000;
            animation: fadeIn 0.3s ease;
        }

        .modal.active {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background: var(--modal-content-bg);
            border-radius: 12px;
            width: 90%;
            max-width: 900px;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            animation: slideUp 0.3s ease;
        }

        .modal-close {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 28px;
            cursor: pointer;
            color: #666;
            z-index: 10;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .btn-primary {
          margin-top: 15px;
        }

        .modal-close:hover {
            background-color: #f5f5f5;
            color: #333;
        }

        .modal-container {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            min-height: 500px;
        }

        /* Lado Esquerdo - Logo */
        .modal-left {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            padding: 40px 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .modal-left .modal-logo {
            max-width: 200px;
            margin-bottom: 30px;
        }

        .modal-left .modal-info h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            font-weight: 600;
        }

        .modal-left .modal-info p {
            font-size: 1rem;
            line-height: 1.6;
            opacity: 0.9;
        }

        /* Lado Direito - Formulário */
        .modal-right {
            padding: 40px;
        }

        .modal-right form {
          flex-direction: column;
        }

        .modal-right .modal-form h3 {
            color: var(--primary-color);
            margin-bottom: 25px;
            font-size: 1.5rem;
            text-align: center;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
            color: #000;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
        }

        .form-group input::placeholder,
        .form-group select::placeholder,
        .form-group textarea::placeholder {
            color: #94a3b8;
        }

        .form-group textarea {
            resize: vertical;
            min-height: 100px;
        }

        .btn-primary {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 14px 30px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background: #1d3fa3;
            transform: translateY(-2px);
        }

        /* Botão Saiba Mais */
        .btn-saiba-mais {
            background: var(--laranja);
            color: var(--branco);
            padding: 1rem 1.5rem 0.8rem;
            border-radius: 1.5rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 32px;
            max-width: 250px;
            margin-inline: auto;
            text-transform: uppercase;
            min-height: 44px;
        }

        /* Botão Flutuante WhatsApp */
        .whatsapp-float {
            position: fixed;
            bottom: 25px;
            right: 25px;
            width: 54px;
            height: 54px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 999;
            transition: all 0.3s ease;
            animation: pulse 2s infinite;
        }

        .whatsapp-float:hover {
            transform: scale(1.1);
        }

        .whatsapp-float img {
            width: 30px;
            height: 30px;
        }

        /* Animações */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Responsivo */
        @media (max-width: 768px) {
            .modal-container {
                grid-template-columns: 1fr;
            }

            .modal-left {
                padding: 30px 20px;
            }
            
            .modal-left .modal-logo {
                max-width: 150px;
            }

            .modal-right {
                padding: 30px 20px;
            }

            .whatsapp-float {
                width: 50px;
                height: 50px;
                bottom: 20px;
                right: 20px;
            }
            
            .whatsapp-float img {
                width: 25px;
                height: 25px;
            }

            .btn-saiba-mais {
              width: 100%;
              max-width: 95%;
              font-size: 15px;
            }
        }