@font-face {
    font-family: 'Didot';
    src: url('fonts/Didot-Bold.eot');
    src: url('fonts/Didot-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Didot-Bold.woff2') format('woff2'),
        url('fonts/Didot-Bold.woff') format('woff'),
        url('fonts/Didot-Bold.ttf') format('truetype'),
        url('fonts/Didot-Bold.svg#Didot-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Didot';
    src: url('fonts/italico/Didot-Italic.eot');
    src: url('fonts/italico/Didot-Italic.eot?#iefix') format('embedded-opentype'),
        url('fonts/italico/Didot-Italic.woff2') format('woff2'),
        url('fonts/italico/Didot-Italic.woff') format('woff'),
        url('fonts/italico/Didot-Italic.ttf') format('truetype'),
        url('fonts/italico/Didot-Italic.svg#Didot-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}


@font-face {
    font-family: 'Didot Title';
    src: url('fonts/DidotTitle.eot');
    src: url('fonts/DidotTitle.eot?#iefix') format('embedded-opentype'),
        url('fonts/DidotTitle.woff2') format('woff2'),
        url('fonts/DidotTitle.woff') format('woff'),
        url('fonts/DidotTitle.ttf') format('truetype'),
        url('fonts/DidotTitle.svg#DidotTitle') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Didot';
    src: url('fonts/Didot.eot');
    src: url('fonts/Didot.eot?#iefix') format('embedded-opentype'),
        url('fonts/Didot.woff2') format('woff2'),
        url('fonts/Didot.woff') format('woff'),
        url('fonts/Didot.ttf') format('truetype'),
        url('fonts/Didot.svg#Didot') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



@font-face {
    font-family: 'Andale Mono';
    src: url('fonts/AndaleMono.eot');
    src: url('fonts/AndaleMono.eot?#iefix') format('embedded-opentype'),
        url('fonts/AndaleMono.woff2') format('woff2'),
        url('fonts/AndaleMono.woff') format('woff'),
        url('fonts/AndaleMono.ttf') format('truetype'),
        url('fonts/AndaleMono.svg#AndaleMono') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



.gfs-didot-regular {
  font-family: "Didot", serif;
  font-weight: 400;
  font-style: normal;
}

/* ===========================================================
   Paleta + utilitários de cor  (text-<cor> / bg-<cor>)
   =========================================================== */
:root {
  --cor-branco:      #ffffff;
  --cor-terracota:   #a56c4d;
  --cor-verde:       #807c5b;
  --cor-verde-input: #e5ded9;
  --cor-marrom:      #90623b;
  --cor-bege:        #f0ebe6;

  --font-serif: "GFS Didot", serif;
  --font-didot: "Didot", serif;   /* Didot local (tem italic real) */
  --font-sans:  "Montserrat", sans-serif;
}

.text-branco    { color: var(--cor-branco) !important; }
.text-terracota { color: var(--cor-terracota) !important; }
.text-verde     { color: var(--cor-verde) !important; }
.text-marrom    { color: var(--cor-marrom) !important; }
.bg-branco      { background-color: var(--cor-branco) !important; }
.bg-terracota   { background-color: var(--cor-terracota) !important; }
.bg-verde       { background-color: var(--cor-verde) !important; }
.bg-bege        { background-color: var(--cor-bege) !important; }

/* ===========================================================
   Base
   =========================================================== */
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); }

/* respeita quem prefere sem animacao */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* cursor de zoom nos slides da galeria 24h */
.s24-slide { cursor: zoom-in; }

/* ===========================================================
   Preloader
   =========================================================== */
body.preloading { overflow: hidden; }

.preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cor-marrom);
  transition: opacity .6s ease, visibility .6s ease;
}

.preloader-logo {
  width: clamp(170px, 22vw, 300px);
  height: auto;
  animation: preloaderPulse 1.6s ease-in-out infinite;
}

@keyframes preloaderPulse {
  0%, 100% { opacity: .5;  transform: scale(.97); }
  50%      { opacity: 1;   transform: scale(1); }
}

.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .preloader-logo { animation: none; opacity: 1; }
}

/* ===========================================================
   Reveal on scroll (animações suaves ao rolar)
   =========================================================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s cubic-bezier(.22, .61, .36, 1),
              transform .9s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* variante só-fade (p/ elementos que já têm transform próprio) */
.reveal-fade {
  opacity: 0;
  transition: opacity 1s ease;
  will-change: opacity;
}

.reveal-fade.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===========================================================
   HERO
   =========================================================== */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1696 / 895;
  background-image: url('../img/header.png');
  background-size: cover;
  background-position: bottom left;
  background-repeat: no-repeat;
}

.container {
  max-width: 80vw !important  ;
  margin: 0 auto;
}

.hero .container {
  height: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  padding-inline: clamp(1.5rem, 4vw, 4rem);
}

/* topo */
.hero-topo { padding-top: clamp(1.4rem, 2.6vw, 2.4rem); }

.hero-logo img {
  width: clamp(150px, 15vw, 220px);
  height: auto;
  display: block;
}

.hero-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: clamp(.55rem, 1.15vw, 1.6rem);
  min-width: 0;
}

.hero-menu a {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-small);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cor-branco);
  text-decoration: none;
  transition: opacity .25s ease;
}

.hero-menu a:hover { opacity: .6; }

/* botao hamburguer (mobile) — escondido no desktop */
.hero-burger { display: none; }

/* corpo — centralizado na vertical (largura via col-lg-7) */
.hero-corpo {
  margin-top: auto;
  margin-bottom: auto;
}

.hero-titulo {
  font-family: "Didot", serif;  /* Didot local (tem italic real) */
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2rem, 3.046vw, 51.663px); /* Figma: 51.663px @1696 */
  line-height: 1.06;                        /* 106% (Figma: 54.8px) */
  margin: 0 0 clamp(1.6rem, 3vh, 2.4rem);
}

.hero-titulo i,
.hero-titulo em {
  font-style: italic;
  font-weight: 400;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9.959px;                    /* Figma */
  font-family: var(--font-sans);
  font-weight: 500;                /* Figma */
  font-size: 14.538px;             /* Figma */
  line-height: 1.714;              /* Figma: 24.923px */
  letter-spacing: 2.326px;         /* Figma */
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  padding: 7.968px 15.935px;       /* Figma */
  border-radius: 8.673px;          /* Figma */
  transition: filter .25s ease;
}

.hero-btn:hover { filter: brightness(1.08); }

.hero-endereco {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: clamp(1.4rem, 2.6vh, 2rem) 0 0;
  font-family: var(--font-sans);
  font-weight: 600;                /* Figma */
  font-size: 16.448px;             /* Figma */
  line-height: 1.811;              /* Figma: 29.793px */
  letter-spacing: 0.987px;         /* Figma */
  text-transform: uppercase;
}

.hero-endereco img {
  width: 18px;
  height: auto;
  display: block;
}

/* ===========================================================
   CONTATO
   =========================================================== */
.contato-row { align-items: stretch; }

/* ---- coluna esquerda (info sobre gradiente) ---- */
#contato {
  position: relative;
  overflow: hidden;
  background-image: url('../img/linhadaesquerda.png'), url('../img/degrade.png');
  background-size: contain, cover ;
  background-position: left center;
  display: flex;
  align-items: center;
  background-repeat: no-repeat, no-repeat;
}

/* marcador de altura 0 exatamente na divisa hero -> contato */
.sol-seam {
  position: relative;
  height: 0;
  z-index: 5;          /* acima do hero e do contato */
}

.contato-sol {
  position: absolute;
  top: 0;                        /* 0 = a linha da emenda */
  right: 0;                      /* encosta na direita (ajuste aqui) */
  transform: translateY(-50%);   /* sobe metade da PROPRIA altura -> meio na emenda */
  height: auto;                  /* tamanho do sol (ajuste aqui) */
  width: 20vw;
  min-width: 300px;
  pointer-events: none;
}

.contato-info-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.8rem, 4vw, 4rem);
  padding-left: clamp(1.8rem, 6vw, 6rem);
}

.contato-titulo {
  font-family: var(--font-sans);
  line-height: 1.15;
  margin: 0 0 clamp(1.6rem, 3vw, 2.4rem);
}

.contato-titulo span { display: block; }

.ct-studios  { font-size: 32.59px;  font-weight: 500; line-height: 39.258px; } /* Figma */
.ct-suite    { font-size: 26.337px; font-weight: 400; line-height: 33.712px; } /* Figma */
.ct-metragem { font-size: 27.21px;  font-weight: 500; line-height: 31.339px; } /* Figma */

/* boxes */
.contato-cards {
  display: flex;
  gap: clamp(.9rem, 1.6vw, 1.5rem);
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.contato-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 10px;
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(.8rem, 1.5vw, 1.3rem);
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 400;                /* Figma */
  font-size: 20.399px;             /* Figma */
  line-height: 1.492;              /* Figma: 30.442px */
  letter-spacing: -0.408px;        /* Figma */
}

.contato-card b,
.contato-card strong { font-weight: 600; } /* Figma: Charlie / Airbnb */

.contato-legal {
  font-family: var(--font-sans);
  font-weight: 500;                /* Figma */
  font-size: 9px;                  /* Figma */
  line-height: 1.889;              /* Figma: 17px */
  margin: 0;
  max-width: 640px;
}

/* ---- coluna direita (formulario) ---- */
.contato-form-col {
  display: flex;
  align-items: center;
  padding: clamp(2.5rem, 4vw, 4rem) clamp(1.8rem, 3.5vw, 3.5rem);
}

.contato-form { width: 100%; }

.campo { margin-bottom: clamp(1.1rem, 2vh, 1.6rem); }

.campo label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-small);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  margin-bottom: .5rem;
}

.campo input {
  width: 100%;
  border: none;
  outline: none;
  background-color: var(--cor-verde-input);
  color: #5b5745;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  padding: .85rem 1rem;
  border-radius: 2px;
}

.campo input:focus { box-shadow: 0 0 0 2px rgba(255, 255, 255, .4); }

.contato-btn {
  display: block;
  width: 100%;
  border: none;
  cursor: pointer;
  margin-top: clamp(1.4rem, 2.5vh, 2rem);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-small);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 1rem 1.2rem;
  border-radius: 2px;
  transition: filter .25s ease;
}

.contato-btn:hover { filter: brightness(1.08); }

/* ===========================================================
   VIDEO
   =========================================================== */
.video-titulo {
  font-family: "Didot", serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.12vw, 36px);
  line-height: 1.194;                 /* 43/36 */
  margin: 0 0 clamp(1.4rem, 2.5vw, 2.2rem);
}

.video-titulo i,
.video-titulo em {
  font-family: "Didot", serif;
  font-style: italic;
  font-weight: 400;
}

.video-wrap { overflow: hidden; cursor: pointer; }

.video-thumb {
  display: block;
  width: 100%;
  height: auto;
}

.play{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  width: clamp(58px, 6vw, 92px);
  height: auto;
  cursor: pointer;
  transition: transform .25s ease;
}

.play:hover { transform: translate(-50%, -50%) scale(1.08); }

.video-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.8rem, 3.5vw, 3rem);
}

/* ===========================================================
   LOCALIZACAO (Barra Olímpica / mapa)
   =========================================================== */
.loc {
  position: relative;
  background-image: url('../img/degrademapa.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.loc .container {
  max-width: 1600px;
  padding-inline: clamp(1.5rem, 4vw, 4rem);
}

/* badge */
.loc-badge {
  display: inline-block;
  font-family: "Andale Mono", monospace;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 25.538px);
  line-height: 1.524;
  padding: .1em .7em;
  border-radius: 12.161px;
}

/* titulo */
.loc-titulo {
  font-family: var(--font-didot);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.3vw, 36px);
  line-height: 1.194;                 /* 43/36 */
  margin: clamp(1.1rem, 2vw, 1.6rem) 0 clamp(1.8rem, 3.5vw, 2.8rem);
  max-width: 720px;
}

.loc-titulo em {
  font-style: italic;
  font-weight: 400;
}

/* blocos de listas (desktop: Conveniência | Mobilidade lado a lado) */
.loc-listas {
  display: flex;
  gap: clamp(2rem, 5vw, 5rem);
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}

.loc-cat { flex: 1 1 0; min-width: 0; }

.loc-cat-titulo {
  font-family: var(--font-didot);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.6vw, 26px);
  line-height: 1.222;
  margin: 0 0 clamp(.6rem, 1vw, 1rem);
}

.loc-cat-cols {
  display: flex;
  gap: clamp(1.2rem, 3vw, 2.6rem);
}

.loc-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 0;
  min-width: 0;
}

.loc-lista li {
  display: flex;
  align-items: center;
  gap: .5em;
  font-family: "Andale Mono", monospace;
  font-weight: 400;
  font-size: clamp(.82rem, 1vw, 16.729px);
  line-height: 1.9;
  white-space: nowrap;
}

.loc-lista li img {
  height: .7em;          /* mesma altura p/ carro e pessoa manterem proporção */
  width: auto;
  flex: none;
}

/* navegação do carrossel (só mobile) */
.loc-nav { display: none; }

/* mapa */
.loc-mapa {
  display: block;
  cursor: zoom-in;
}

.loc-mapa img {
  display: block;
  width: 100%;
  height: auto;
}

/* cta */
.loc-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.8rem, 3.5vw, 3rem);
}

/* ===========================================================
   IMAGINE (Futuro Complexo Imagine)
   =========================================================== */

#imagine {
  background-image: url('../img/linha\ imagine.png');
  
  background-position: right  10rem;
  background-repeat: no-repeat;
  background-size: contain;
  

}

.imagine { padding-block: clamp(2.8rem, 5vw, 4.5rem); }

.imagine .container {
  position: relative;
  max-width: 1600px;
  padding-inline: clamp(1.5rem, 4vw, 4rem);
}

/* titulo */
.imagine-titulo {
  font-family: var(--font-sans);
  text-transform: uppercase;
  margin: 0 0 clamp(1.4rem, 2.5vw, 2rem);
}

.imagine-sup {
  display: block;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.12vw, 36px);
  line-height: 1.293;
}

.imagine-nome {
  display: block;
  font-weight: 500;
  font-size: clamp(2rem, 3.17vw, 53.818px);
  line-height: 1.054;
}

.imagine-nome sup {
  font-size: .5em;
  top: -.7em;
}

/* texto */
.imagine-texto {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(.95rem, 1.12vw, 19px);
  line-height: 1.684;                 /* 32/19 */
  max-width: 980px;
}

.imagine-texto p { margin: 0; }

.imagine-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.imagine-lista li {
  position: relative;
  padding-left: 1.1em;
}

.imagine-lista li::before {
  content: "·";
  position: absolute;
  left: .2em;
}

/* texto vertical decorativo */
.imagine-vert {
  position: absolute;
  top: clamp(4rem, 12vw, 9rem);
  right: clamp(.4rem, 1vw, 1rem);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #a56c4d;
  font-family: "Andale Mono", monospace;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.65vw, 28px);
  letter-spacing: .25em;
  white-space: nowrap;
  pointer-events: none;
}

.imagine-vert-future {
  font-family: var(--font-didot);
  font-weight: 700;
  font-style: normal;
}

/* imagem */
.imagine-img {
  margin-top: clamp(1.8rem, 3.5vw, 3rem);
}

.imagine-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* legal */
.imagine-legal {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(7px, .55vw, 9px);
  line-height: 1.5;
  text-align: center;
  margin: clamp(1rem, 2vw, 1.6rem) 0 0;
}

/* ===========================================================
   24H (carrossel full-width)
   =========================================================== */
.s24 {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.s24-slide {
  position: relative;
  height: clamp(380px, 44vw, 640px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* mascara escura p/ leitura do texto (aplicada do 2o slide em diante) */
.s24-slide--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
  z-index: 1;
}

/* linha decorativa (linhagaleria.png) na esquerda */
.s24-linha {
  position: absolute;
  top: 20%;
  left: 0;
  height: 100%;
  width: auto;
  z-index: 2;
  pointer-events: none;
}

/* overlay fixo no canto inferior esquerdo */
.s24-overlay {
  position: absolute;
  left: 5%;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.1rem, 2vw, 1.8rem);
  padding: clamp(1.8rem, 4vw, 3.5rem) clamp(3rem, 8vw, 8rem);
  
}

.s24-titulo {
  font-family: var(--font-didot);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.5rem, 2.24vw, 38px);
  line-height: 1;
  
}

.s24-titulo em { font-style: italic; }

/* dots do slick (canto inferior direito) */
.s24-carousel .slick-dots {
  position: absolute;
  right: clamp(2.5rem, 7vw, 7rem);
  bottom: clamp(1.4rem, 3vw, 2.4rem);
  z-index: 3;
  display: flex;
  gap: .6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.s24-carousel .slick-dots li { line-height: 0; }

.s24-carousel .slick-dots li button {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background: transparent;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  transition: background .25s ease;
}

.s24-carousel .slick-dots li.slick-active button { background: #fff; }

/* ===========================================================
   FACILIDADES (cards trocam a foto da direita)
   =========================================================== */
.facil {
  position: relative;
  background-color: var(--cor-branco);
  background-image: url('../img/grqadientes facilidades.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  padding-block: clamp(2.8rem, 5vw, 4.5rem);
  overflow: hidden;
}

/* ---- coluna esquerda ---- */
.facil-titulo {
  font-family: var(--font-didot);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.12vw, 36px);
  line-height: 1.444;                 /* 52/36 */
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}

.facil-titulo em { font-style: italic; }

.facil-sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(.95rem, 1.12vw, 19px);
  line-height: 1.579;                 /* 30/19 */
  max-width: 460px;
  margin: 0 0 clamp(1.8rem, 3.5vw, 2.6rem);
}

/* ---- cards (slick) ---- */
.facil-cards {
  margin-bottom: clamp(1.3rem, 2.5vw, 1.8rem);
  padding-inline: clamp(.4rem, 1vw, .8rem);
}

/* todos os slides com a msm altura (do maior) para nao "andar" o layout */
.facil-cards .slick-track { display: flex; align-items: stretch; }
.facil-cards .slick-slide { height: auto; float: none; }
.facil-cards .slick-slide > div { height: 100%; }

.facil-card {
  border: 1px solid rgba(128, 124, 91, .35);
  border-radius: 10px;
  padding: clamp(1.4rem, 2.2vw, 2rem);
  background: rgba(255, 255, 255, .35);
  margin: 0 clamp(.6rem, 1.2vw, 1rem);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.facil-card-icone {
  display: block;
  width: clamp(38px, 3vw, 48px);
  height: auto;
  margin-bottom: clamp(1rem, 2vw, 1.6rem);
}

.facil-card-titulo {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1rem, 1.06vw, 18px);
  line-height: 1.756;
  text-transform: uppercase;
  margin: 0 0 .3rem;
}

.facil-card-texto {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1rem, 1.06vw, 18px);
  line-height: 1.756;                 /* 31.6/18 */
  margin: 0;
}

/* ---- setas (fundo marrom + setabranca.png) ---- */
.facil-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.7rem, 1.5vw, 1.2rem);
}

.facil-seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(120px, 12vw, 175px);
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 3px;
  background: #a56c4d;
  cursor: pointer;
  transition: opacity .25s ease;
}

.facil-seta img { display: block; width: 100%; height: auto; }

.facil-seta-next img { transform: rotate(180deg); }

.facil-seta.slick-disabled { opacity: .4; cursor: default; }

/* ---- coluna direita (foto) ---- */
.facil-right { text-align: center; }

.facil-foto {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin-left: auto;
}

/* ===========================================================
   PLANTAS
   =========================================================== */
.plantas { padding-block: clamp(2.8rem, 5vw, 4.5rem); }

.plantas-wrap { position: relative; }

.plantas-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* texto sobre a imagem (canto superior esquerdo) */
.plantas-titulo {
  position: absolute;
  top: clamp(1.4rem, 3vw, 2.6rem);
  left: clamp(1.4rem, 3.5vw, 3rem);
  z-index: 2;
  
  margin: 0;
  color: var(--cor-branco);
  font-family: var(--font-didot);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.71vw, 29px);
  line-height: 1.379;                 /* 40/29 */
}

.plantas-titulo em { font-style: italic; }

/* botao sobre a imagem (canto inferior esquerdo) */
.plantas-cta {
  position: absolute;
  bottom: clamp(1.4rem, 3vw, 2.6rem);
  left: clamp(1.4rem, 3.5vw, 3rem);
  z-index: 2;
  padding: 10px 2rem;
}

/* ===========================================================
   POR QUE INVESTIR (cards clicaveis)
   =========================================================== */
.pqi { padding-block: clamp(2.8rem, 5vw, 4.5rem); }

.pqi-titulo {
  color: #807C5B;
  text-align: left;
  font-family: var(--font-didot);
  font-size: 26px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 123.077% */
  margin: 0 0 clamp(1.6rem, 3vw, 2.6rem);
}

.pqi-titulo em { font-style: italic; }

/* grade de cards */
.pqi-cards {
  display: flex;
  gap: clamp(.6rem, 1.2vw, 1.1rem);
}

.pqi-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: clamp(320px, 30vw, 470px);
  border: 0;
  padding: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  text-align: center;
  transition: flex-grow .6s cubic-bezier(.22,.61,.36,1);
}

.pqi-card.is-active {
  flex-grow: 1.6;
}

/* overlay p/ leitura do texto branco */
.pqi-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 100%);
  transition: opacity .6s ease;
}

/* mascara verde (degrade) - no desktop so aparece no card ativo */
.pqi-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/degradeinvestir.png') no-repeat center / 100% 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}

/* no card ativo o overlay escuro some e a mascara verde entra */
.pqi-card.is-active::before { opacity: 0; }
.pqi-card.is-active::after { opacity: 1; }

.pqi-card-inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.6rem);
  padding: clamp(1.2rem, 2vw, 1.8rem);
}

.pqi-card-titulo {
  font-family: var(--font-didot);
  font-weight: 400;
  color: #fff;
  font-size: clamp(1.15rem, 1.53vw, 26px);
  line-height: 1.154;
  -webkit-text-stroke: 0.31px #fff;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}

.pqi-card.is-active .pqi-card-titulo {
  transform: translateY(-4px);
}

.pqi-card-texto {
  display: block;
  font-family: "Andale Mono", monospace;
  font-weight: 400;
  color: #fff;
  font-size: clamp(.8rem, .88vw, 15px);
  line-height: 1.493;
  max-width: 90%;
  max-height: 0;
  opacity: 0;
  transform: translateY(8px);
  overflow: hidden;
  margin: 0;
  transition:
    max-height .55s cubic-bezier(.22,.61,.36,1),
    opacity .35s ease .1s,
    transform .55s cubic-bezier(.22,.61,.36,1);
}

.pqi-card.is-active .pqi-card-texto {
  max-height: 260px;
  opacity: 1;
  transform: translateY(0);
}

/* setas (só mobile) */
.pqi-nav { display: none; }

/* cta */
.pqi-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.8rem, 3.5vw, 3rem);
}

/* ===========================================================
   FAQ
   =========================================================== */
.faq { padding-block: clamp(3rem, 5.5vw, 5rem); }

.faq-titulo {
  text-align: center;
  font-family: var(--font-didot);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 34px);
  line-height: 1.23;
  margin: 0 0 clamp(2rem, 4vw, 3.2rem);
}

.faq-titulo em { font-style: italic; }

.faq-lista {
  max-width: 860px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(.7rem, 1.4vw, 1rem);
}

/* cada item = card sobre o terracota */
.faq-item {
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  overflow: hidden;
  transition: background .3s ease, border-color .3s ease;
}

.faq-item[open] {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .6);
}

.faq-pergunta {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(.9rem, 1.8vw, 1.25rem) clamp(1.1rem, 2.2vw, 1.6rem);
  font-family: var(--font-didot);
  font-weight: 400;
  color: var(--cor-branco);
  font-size: clamp(1rem, 1.25vw, 21px);
  line-height: 1.3;
}

.faq-pergunta::-webkit-details-marker { display: none; }

/* sinal + / - */
.faq-pergunta::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.6em;
  line-height: 1;
  color: var(--cor-branco);
  transition: transform .3s ease;
}

.faq-item[open] .faq-pergunta::after {
  content: "\2212"; /* minus */
}

.faq-resposta {
  padding: 0 clamp(1.1rem, 2.2vw, 1.6rem) clamp(1rem, 2vw, 1.4rem);
}

.faq-item[open] .faq-resposta {
  animation: faqIn .32s ease;
}

.faq-resposta p {
  margin: 0;
  font-family: "Andale Mono", monospace;
  font-weight: 400;
  color: var(--cor-branco);
  font-size: clamp(.85rem, .95vw, 15px);
  line-height: 1.6;
}

@keyframes faqIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ===========================================================
   CHARLIE
   =========================================================== */
.charlie { padding-block: clamp(2.8rem, 5vw, 4.5rem); }

/* foto (chapeu + arco ja vem na imagem) */
.charlie-foto { text-align: center; }

.charlie-foto img {
  display: block;
  width: 100%;
  max-width: 405px;
  height: auto;
  margin: 0 auto;
}

/* coluna direita */
.charlie-col-info { padding-left: clamp(1rem, 3vw, 3rem); }

.charlie-logo {
  display: block;
  width: clamp(130px, 11vw, 170px);
  height: auto;
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}

.charlie-titulo {
  font-family: var(--font-didot);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.12vw, 36px);
  line-height: 1.194;                 /* 43/36 */
  margin: 0 0 clamp(1.6rem, 3vw, 2.4rem);
}

.charlie-titulo em { font-style: italic; }

/* blocos de texto */
.charlie-blocos { margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); }

.charlie-item {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1rem, 1.12vw, 19px);
  line-height: 1.526;                 /* 29/19 */
  margin: 0 0 clamp(1.1rem, 2vw, 1.6rem);
  max-width: 620px;
}

.charlie-item:last-child { margin-bottom: 0; }

.charlie-lead {
  display: block;
  font-family: var(--font-didot);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.65vw, 28px);
  line-height: 1.036;                 /* 29/28 */
}

/* metricas */
.charlie-metricas {
  width: 100%;
  max-width: 792px;
  height: auto;
  margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
}

.charlie-cta { display: flex; }

/* ===========================================================
   MODAL FORMULARIO
   =========================================================== */
.form-modal {
  border: 0;
  border-radius: 12px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
}

.form-modal .btn-close {
  margin-bottom: .4rem;
  opacity: .9;
}

.form-modal-titulo {
  font-family: var(--font-didot);
  font-weight: 400;
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.15;
  margin: 0 0 .4rem;
}

.form-modal-sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(.85rem, 1vw, .95rem);
  line-height: 1.5;
  margin: 0 0 clamp(1.2rem, 2.5vw, 1.8rem);
  opacity: .9;
}

/* ===========================================================
   MARCA LIVING
   =========================================================== */
.marca { padding-block: clamp(1.8rem, 3.5vw, 3rem); }

.marca-logo {
  display: block;
  width: clamp(120px, 12vw, 190px);
  height: auto;
}

.marca-texto {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(.9rem, .94vw, 16px);
  line-height: 1.625;                 /* 26/16 */
  margin: 0;
}

/* ===========================================================
   FOOTER
   =========================================================== */
.footer { padding-block: clamp(1.4rem, 2.2vw, 2rem); }

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer-marcas {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.footer-marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.footer-label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(.55rem, .7vw, .68rem);
  letter-spacing: .04em;
  opacity: .85;
}

.footer-logo {
  display: block;
  width: auto;
}

.footer-logo-living { height: clamp(26px, 2.4vw, 34px); }
.footer-logo-cyrela { height: clamp(20px, 1.9vw, 27px); }

.footer-credito {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(.6rem, .78vw, .74rem);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.footer-credito strong { font-weight: 400; }


 /* button#slick-slide-control00 {
    display: none;
} */