* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

:root {
  --gd: #2F443A;
  --gm: #4E6B5D;
  --rl: #E8A49B;
  --rm: #D37C72;
  --rd: #8E3E45;
  --bg: #F4F4F2;
  --gp: #EAF0EB;
  --txt: #1F1F1F;
  --w: #fff;
}

/* LOADER */
.loader-wrapper {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease-out, visibility 0.6s;
}

.loader-wrapper.fade-out {
  opacity: 0;
  visibility: hidden;
}

.loader-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.loader-logo {
  height: 80px;
  width: auto;
  animation: pulse-logo 2s infinite ease-in-out;
}

.loader-bar {
  width: 140px;
  height: 3px;
  background: rgba(47, 68, 58, 0.1);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.loader-progress {
  width: 100%;
  height: 100%;
  background: var(--gd);
  position: absolute;
  left: -100%;
  animation: load-slide 1.5s infinite ease-in-out;
}

@keyframes pulse-logo {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
}

@keyframes load-slide {
  0% { left: -100%; }
  50% { left: 0; }
  100% { left: 100%; }
}

html {
  scroll-behavior: smooth
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--txt);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input, textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

h1,
h2,
h3,
h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  line-height: 1.2
}

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.5rem
}

.c-rose {
  color: var(--rm)
}

.c-rose-lt {
  color: var(--rl)
}

.sec-tag {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rm);
  display: block;
  margin-bottom: .5rem
}

/* COOKIE BANNER */
.cookie-banner {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  background: var(--gd);
  color: #fff;
  padding: 1.2rem;
  z-index: 9999;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
  transition: bottom 0.5s ease-in-out;
}
.cookie-banner.show {
  bottom: 0;
}
.cookie-content {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
@media(min-width: 768px) {
  .cookie-content {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
.cookie-content p {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}
.cookie-content a {
  color: var(--rl);
  text-decoration: underline;
}
.cookie-btn {
  white-space: nowrap;
  padding: 0.6rem 1.2rem;
}

/* BUTTONS */
.btn-green {
  display: inline-block;
  background: var(--gd);
  color: #fff;
  padding: .85rem 1.8rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all .25s;
  border: none;
  cursor: pointer;
  font-size: .95rem;
  font-family: 'Poppins', sans-serif
}

.btn-green:hover {
  background: var(--rd);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(142, 62, 69, .3)
}

.btn-green.full {
  width: 100%;
  text-align: center;
  display: block;
  padding: 1rem
}

.btn-rose {
  display: inline-block;
  background: var(--rm);
  color: #fff;
  padding: .85rem 1.8rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all .25s
}

.btn-rose:hover {
  background: var(--rd);
  transform: translateY(-2px)
}

.btn-rose.mt {
  margin-top: 1.5rem
}

.btn-dark {
  display: inline-block;
  background: var(--gd);
  color: #fff;
  padding: .9rem 1.8rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all .25s
}

.btn-dark:hover {
  background: var(--rd)
}

.btn-hero-outline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255, 255, 255, 0.4);
  border: 1.5px solid var(--rl);
  color: var(--rl);
  padding: .85rem 1.8rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all .25s
}

.btn-hero-outline:hover {
  background: rgba(232, 164, 155, .15);
  border-color: #2F443A;
  color: #2F443A
}

.btn-arrow {
  font-style: normal;
  transition: transform .2s
}

a:hover .btn-arrow {
  transform: translateX(3px)
}

.btn-nav {
  background: var(--gd);
  color: #fff;
  padding: .55rem 1.3rem;
  border-radius: 7px;
  font-weight: 600;
  text-decoration: none;
  font-size: .875rem;
  transition: all .2s;
  white-space: nowrap
}

.btn-nav:hover {
  background: var(--rd)
}

.btn-outline-dark {
  display: inline-block;
  border: 2px solid var(--gd);
  color: var(--gd);
  padding: .8rem 1.6rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all .25s
}

.btn-outline-dark:hover {
  background: var(--gp)
}

.btn-outline-dark.mt-sm {
  margin-top: .75rem;
  display: block;
  text-align: center
}

.btn-white-cta {
  display: inline-block;
  background: #fff;
  color: var(--gd);
  padding: .85rem 1.8rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all .25s
}

.btn-white-cta:hover {
  background: var(--gp)
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #25D366;
  color: #fff;
  padding: .85rem 1.8rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all .25s;
  margin-top: 1rem
}

.btn-whatsapp:hover {
  background: #1da851
}

/* NAV */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: rgba(47, 68, 58, .97);
  backdrop-filter: blur(10px);
  transition: box-shadow .3s
}

.nav.scrolled {
  box-shadow: 0 2px 24px rgba(0, 0, 0, .25)
}

.nav-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: .85rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem
}

.logo {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  flex-shrink: 0
}

.logo-leaf {
  color: var(--rl);
  font-size: 1.8rem
}

.logo-name {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: .9rem;
  color: #fff;
  line-height: 1
}

.logo-loc {
  display: block;
  font-size: .68rem;
  color: var(--rl);
  letter-spacing: .08em
}

.nav-links {
  display: flex;
  gap: 1.4rem;
  list-style: none;
  margin-left: auto
}

.nav-links a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 500;
  transition: color .2s;
  white-space: nowrap
}

.nav-links a:hover {
  color: var(--rl)
}

.logo-img {
  height: 36px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1)
}

.logo-sq {
  height: 48px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1)
}

.hamburger {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  margin-left: auto;
  padding: .25rem
}

.mob-menu {
  display: none;
  flex-direction: column;
  gap: 1rem;
  padding: 1.2rem 1.5rem 1.5rem;
  background: var(--gd);
  border-top: 1px solid rgba(255, 255, 255, .1)
}

.mob-menu a {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem
}

.mob-menu .btn-green {
  text-align: center
}

.mob-menu.open {
  display: flex
}

/* HERO */
.hero {
  min-height: 100vh;
  position: relative;
  background-image: url('media/Portaria2.jpg');
  background-position: 65% center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #2a3d33;
  display: flex;
  flex-direction: column
}



.hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
  padding: 7rem 1.5rem 4rem;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 3rem;
  align-items: center
}

.hero-left {
  color: #2a3d33
}

.badge {
  display: inline-block;
  background: #2a3d33;
  border: 1px solid #2a3d33;
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35rem .9rem;
  border-radius: 50px;
  margin-bottom: 1.2rem
}

.hero-left h1 {
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  margin-bottom: 1.2rem;
  line-height: 1.25
}

@media (max-width: 768px) {
  .hero-left h1 {
    font-size: 1.9rem;
    line-height: 1.25;
    letter-spacing: -0.5px;
    max-width: 320px
  }
}

.hero-left h1 em {
  font-style: italic
}

.hero-sub {
  font-size: 1rem;
  color: #2a3d33;
  margin-bottom: 2rem;
  line-height: 1.7;
  max-width: 480px
}

@media (max-width: 768px) {

  .hero-sub {
    font-size: 1.2rem;
    color: #2a3d33;
    margin-bottom: 2rem;
    line-height: 1.7;
    max-width: 310px;
    /* força quebra semelhante ao layout */
  }
}

.hero-btns {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap
}

.scroll-hint {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .45);
  font-size: 1.3rem;
  z-index: 2;
  animation: bob 2s infinite
}

@keyframes bob {

  0%,
  100% {
    transform: translateX(-50%) translateY(0)
  }

  50% {
    transform: translateX(-50%) translateY(7px)
  }
}

.hero-right {
  z-index: 2
}

.form-card {
  background: rgba(255, 255, 255);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.25);
}

.form-card h3 {
  font-size: 1.35rem;
  color: var(--gd);
  margin-bottom: .4rem
}

.form-intro {
  font-size: .88rem;
  color: #666;
  margin-bottom: 1.3rem;
  line-height: 1.6
}

.inp-wrap {
  display: flex;
  align-items: center;
  gap: .7rem;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  padding: .8rem 1rem;
  margin-bottom: .9rem;
  transition: border-color .2s
}

.inp-wrap:focus-within {
  border-color: var(--gd)
}

.inp-icon {
  font-size: 1rem;
  flex-shrink: 0
}

.inp-wrap input {
  border: none;
  outline: none;
  width: 100%;
  font-size: .95rem;
  font-family: 'Inter', sans-serif;
  color: var(--txt)
}

.microcopy {
  font-size: .76rem;
  color: #888;
  margin-top: .8rem;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: .5rem
}

.inp-icon svg {
  color: #9aad9f
}

.inp-icon-sm {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--rm);
  margin-top: .05rem
}

.form-ok {
  text-align: center;
  padding: 1.5rem 0
}

.ok-icon {
  font-size: 3rem;
  color: var(--gd);
  margin-bottom: .8rem
}

.form-ok p {
  color: var(--gd);
  font-weight: 600
}

/* CONFLICT */
.conflict {
  padding: 5rem 0;
  background: #fefefe url('media/fundosessao2.png') right bottom / 50% auto no-repeat;
}

@media (max-width: 768px) {
  .conflict {
    background: #f9f9f9 url('media/fundosessao2Mobile.png') bottom / cover no-repeat;
  }
}

.conflict-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center
}

.clock-svg {
  margin-bottom: 1.5rem
}

.clock-svg svg {
  filter: drop-shadow(0 4px 12px rgba(211, 124, 114, .25))
}

.conflict-text h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-bottom: 1.2rem
}

.conflict-text p {
  color: #555;
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: .4rem;
  font-style: italic
}

.conflict-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 14px;
  opacity: .85
}

/* CONTEXT */
.context {
  padding: 5rem 0;
  background: var(--gd)
}

.context-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center
}

.ctx-text h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: #fff;
  margin-bottom: 1rem
}

.ctx-text p {
  color: rgba(255, 255, 255, .75);
  line-height: 1.7;
  margin-bottom: 1.2rem
}

.check-list {
  list-style: none;
  margin-bottom: 2rem
}

.check-list li {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: .7rem
}

.chk {
  color: var(--rl);
  font-size: 1.1rem
}

.video-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden
}

.video-thumb {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block
}

.play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s;
  color: var(--gd)
}

.play-btn:hover {
  background: #fff;
  transform: scale(1.08)
}

.video-cap {
  color: rgba(255, 255, 255, .6);
  font-size: .82rem;
  text-align: center;
  margin-top: .8rem
}

/* FEATURES */
.features {
  padding: 4rem 0;
  background: #fff;
  border-top: 1px solid #eee
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem
}

.feat {
  text-align: center;
  padding: 1.5rem 1rem
}

.feat-ico {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: .8rem
}

.feat-ico svg {
  width: clamp(40px, 6vw, 60px);
  height: clamp(40px, 6vw, 60px)
}

.feat h4 {
  font-size: .95rem;
  color: var(--gd);
  margin-bottom: .5rem
}

.feat p {
  font-size: .82rem;
  color: #666;
  line-height: 1.6
}

/* COMPARISON */
.comparison {
  padding: 5rem 0;
  background: var(--bg)
}

.comp-title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  text-align: center;
  margin-bottom: 2.5rem
}

.comp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 1.5rem;
  align-items: stretch
}

.comp-col {
  border-radius: 14px;
  padding: 2rem
}

.comp-bad {
  background: #fceaea;
  border: 1.5px solid #f0c0bc
}

.comp-bad h3 {
  color: var(--rd);
  margin-bottom: 1.2rem
}

.comp-bad ul li {
  color: #8a3535
}

.comp-good {
  background: var(--gp);
  border: 1.5px solid #b8d4c0
}

.comp-good h3 {
  color: var(--gd);
  margin-bottom: 1.2rem
}

.comp-good ul li {
  color: #1e4030
}

.comp-col ul {
  list-style: none
}

.comp-col ul li {
  padding: .5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  font-size: .93rem;
  font-weight: 500
}

.comp-col ul li:last-child {
  border: none
}

.comp-cta {
  background: var(--gd);
  border-radius: 14px;
  padding: 2rem;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 200px
}

.leaf-big {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem
}

.leaf-big svg {
  width: 2.6rem;
  height: 2.6rem;
  stroke: #fff
}

.comp-cta p {
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, .9);
  font-size: .95rem
}

/* GALLERY */
.gallery {
  padding: 5rem 0;
  background: #fff
}

.gallery-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 3rem;
  align-items: center
}

.gallery-text .sec-tag {
  font-size: .72rem
}

.gallery-text h2 {
  font-size: 2.5rem;
  color: var(--rm);
  font-style: italic;
  margin-bottom: .8rem
}

.gallery-text p {
  color: #555;
  font-size: .9rem;
  line-height: 1.7;
  margin-bottom: 1.5rem
}

.gallery-carousel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem
}

.car-viewport {
  overflow: hidden;
  border-radius: 12px
}

.car-track {
  display: flex;
  gap: 12px;
  transition: transform .4s ease
}

.car-card {
  flex: 0 0 calc(33.333% - 8px);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1/1
}

.car-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s
}

.car-card:hover img {
  transform: scale(1.05)
}

.car-dots {
  display: flex;
  justify-content: center;
  gap: .5rem
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ddd;
  transition: background .3s;
  cursor: pointer
}

.dot.active {
  background: var(--rm)
}

.car-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: #fff;
  border: 1.5px solid #ddd;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gd);
  transition: all .2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

.car-arrow:hover {
  border-color: var(--gd);
  background: var(--gp)
}

.car-prev {
  left: -19px
}

.car-next {
  right: -19px
}

/* IMPLANTACAO / MASTERPLAN */
.implantacao {
  background: var(--gd);
  overflow: hidden;
  position: relative
}

.impl-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 400px 1fr;
  align-items: center;
  min-height: 580px
}

.impl-text {
  padding: 5rem 3rem 5rem 4rem;
  position: relative;
  z-index: 2
}

.impl-text h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  color: #fff;
  margin: .5rem 0 1.2rem
}

.impl-text p {
  color: rgba(255, 255, 255, .75);
  line-height: 1.8;
  font-size: .95rem;
  margin-bottom: 2rem;
  max-width: 320px
}

.impl-stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem
}

.impl-stat {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  padding-bottom: .9rem
}

.impl-stat strong {
  font-family: 'Poppins', sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--rl);
  line-height: 1
}

.impl-stat span {
  color: rgba(255, 255, 255, .6);
  font-size: .85rem
}

.impl-map {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden
}

.impl-img {
  width: 100%;
  max-width: 920px;
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 60px rgba(0, 0, 0, .5));
  transform: rotate(-1.5deg);
  transition: transform .6s ease
}

.impl-img:hover {
  transform: rotate(0deg) scale(1.02)
}

.implantacao .btn-green {
  background: #fff;
  color: var(--gd)
}

.implantacao .btn-green:hover {
  background: var(--rl);
  color: #fff;
  box-shadow: none
}

/* DETAILS + CONDITIONS */
.dc-section {
  padding: 5rem 0;
  background: var(--bg);
}

.dc-grid {
  display: flex;
  flex-direction: row;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.details-col {
  flex: 1;
  background: var(--gd);
  color: #fff;
  padding: 4rem 3rem;
  position: relative;
}

.details-col h3 {
  font-size: 1.5rem;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 2rem;
  font-weight: 700;
  color: #fff;
}

.details-list {
  list-style: none;
}

.details-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 0;
  border: none;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.9);
}

.details-list li svg {
  flex-shrink: 0;
  opacity: 0.8;
}

.cond-col {
  flex: 1;
  background: #F4E8E5;
  padding: 4rem 3rem;
  position: relative;
  color: var(--txt);
  border-radius: 0;
}

.cond-col h3 {
  font-size: 1.8rem;
  color: #1a1a1a;
  margin-bottom: 1rem;
}

.cond-col p {
  color: #4a4a4a;
  line-height: 1.7;
  margin-bottom: 2.5rem;
  font-size: 1.05rem;
}

.cond-btn-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.cond-col .btn-green {
  background: var(--gd);
  color: #fff;
  display: inline-block;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all .25s;
}

.cond-col .btn-green:hover {
  background: #1f2e26;
}

.cond-col .btn-outline {
  background: transparent;
  border: 1px solid var(--rm);
  color: var(--rm);
  font-weight: 600;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: all .25s;
}

.cond-col .btn-outline:hover {
  background: var(--rm);
  color: #fff;
}

/* FAQ */
.faq {
  padding: 5rem 0;
  background: #fff
}

.faq-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 3rem;
  align-items: start
}

.faq-main h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 2rem
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2rem
}

.faq-item {
  border-bottom: 1.5px solid #eee
}

.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 1rem 0;
  font-family: 'Poppins', sans-serif;
  font-size: .92rem;
  font-weight: 600;
  color: var(--txt);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  transition: color .2s
}

.faq-q:hover,
.faq-q.active {
  color: var(--gd)
}

.faq-q span {
  font-size: 1.3rem;
  font-weight: 300;
  flex-shrink: 0;
  transition: transform .3s;
  color: var(--gd)
}

.faq-q.active span {
  transform: rotate(45deg)
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease
}

.faq-a.open {
  max-height: 300px
}

.faq-a p {
  padding: .2rem 0 1rem;
  color: #555;
  font-size: .88rem;
  line-height: 1.7
}

.faq-side {
  background: var(--gp);
  border-radius: 16px;
  padding: 2rem;
  text-align: center
}

.faq-side h4 {
  font-size: 1.1rem;
  color: var(--gd);
  margin-bottom: .6rem
}

.faq-side p {
  font-size: .85rem;
  color: #555;
  line-height: 1.6
}

.faq-side .btn-whatsapp {
  width: 100%;
  justify-content: center
}

/* CTA BAR + FOOTER */
.cta-bar {
  background: var(--gd)
}

.cta-bar-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2.5rem 1.5rem;
  flex-wrap: wrap;
  max-width: 1140px;
  margin: 0 auto
}

.cta-bar-logo {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-shrink: 0
}

.cta-bar-text {
  flex: 1;
  min-width: 220px
}

.cta-bar-text p {
  color: rgba(255, 255, 255, .9);
  font-size: 1rem;
  line-height: 1.6
}

.cta-bar-text strong {
  color: #fff
}

.cta-bar-btns {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
  flex-wrap: wrap
}

.btn-text-white {
  display: inline-block;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  transition: opacity .25s;
}
.btn-text-white:hover {
  opacity: 0.8;
}

.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: #25D366;
  color: #fff;
  padding: .85rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: .9rem;
  transition: all .25s;
  white-space: nowrap
}

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

.cta-bar-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 1.2rem 1.5rem;
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem
}

.foot-nav {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap
}

.foot-nav a {
  color: rgba(255, 255, 255, .55);
  text-decoration: none;
  font-size: .82rem;
  transition: color .2s
}

.foot-nav a:hover {
  color: var(--rl)
}

.mikasa-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.mikasa-label:hover {
  opacity: 1;
}

.mikasa-label img.logo-sq {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
}

.foot-copy {
  text-align: center;
  color: rgba(255, 255, 255, .3);
  font-size: .72rem;
  padding: .8rem 1.5rem 1.2rem
}

/* STICKY MOBILE */
.sticky {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 800;
  padding: .9rem 1rem;
  background: rgba(20, 30, 24, .97);
  backdrop-filter: blur(8px)
}

.sticky-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--gd);
  color: #fff;
  padding: .9rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none
}

/* RESPONSIVE */
@media(max-width:1024px) {
  .hero {
    background-position: 70% center
  }

  .hero-inner {
    grid-template-columns: 1fr 380px;
    gap: 2rem
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .comp-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto
  }

  .comp-cta {
    grid-column: 1/-1
  }

  .car-card {
    flex: 0 0 calc(50% - 6px)
  }

  .impl-inner {
    grid-template-columns: 320px 1fr
  }

  .impl-text {
    padding: 4rem 2rem 4rem 3rem
  }
}

@media(max-width:900px) {

  .nav-links,
  .btn-nav {
    display: none
  }

  .hamburger {
    display: block
  }

  .hero {
    background-image: url('media/portaria-mobile.png');
    background-size: center;
    background-repeat: no-repeat;
    background-position: center top;
    min-height: 100svh
  }

  .hero-inner {
    grid-template-columns: 1fr;
    padding-top: 5.5rem;
    padding-bottom: 3rem
  }

  .hero-right {
    max-width: 100%
  }

  .conflict-grid,
  .context-grid,
  .gallery-layout,
  .faq-layout {
    grid-template-columns: 1fr
  }

  .dc-grid {
    flex-direction: column;
  }

  .gallery-layout {
    gap: 2rem
  }

  .dc-section .cond-col {
    margin-top: 0
  }

  .faq-grid {
    grid-template-columns: 1fr
  }

  .cta-bar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem
  }

  .cta-bar-btns {
    width: 100%;
    flex-direction: column;
    gap: 1rem;
  }

  .cta-bar-btns .btn-green,
  .cta-bar-btns .btn-text-white,
  .cta-bar-btns .btn-whatsapp {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: .85rem;
  }

  .cta-bar-bottom {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  .mikasa-label {
    margin-top: 0.5rem;
  }

  .mikasa-label img.logo-sq {
    height: 28px;
  }


  .impl-inner {
    grid-template-columns: 1fr;
    min-height: auto
  }

  .impl-text {
    padding: 3rem 2rem 2rem
  }

  .impl-img {
    transform: rotate(0deg)
  }
}

@media(max-width:600px) {
  .features-grid {
    grid-template-columns: 1fr 1fr
  }

  .comp-grid {
    grid-template-columns: 1fr
  }

  .hero {
    background-position: center top;
    min-height: 100svh
  }

  .hero-btns {
    flex-direction: column
  }

  .car-card {
    flex: 0 0 calc(100% - 0px)
  }

  .car-arrow {
    display: none
  }

  .sticky {
    display: block
  }

  body {
    padding-bottom: 70px
  }
}


/* Customizando o tamanho do botao flutuante do Facilita */
whatsapp-lead-capture {
  transform: scale(0.8) !important;
  transform-origin: bottom right !important;
}