/* ============================================
   FRANCISCO 909 — stylesheet
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;1,6..96,400;1,6..96,500;1,6..96,600;1,6..96,700&family=Roboto+Mono:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');

:root{
  --cream: #EAE3DA;
  --navy: #181F2C;
  --navy-soft: #1F2A3D;
  --plantas-blue: #10192B;
  --ink: #23241F;
  --line: rgba(35,36,31,0.25);
  --line-light: rgba(255,255,255,0.35);
  --gold: #B79A73;

  --font-display: "Bodoni Moda", Georgia, serif;
  --font-mono: "Roboto Mono", "Courier New", monospace;

  --gutter: clamp(24px, 6vw, 96px);
  --max: 1440px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  overflow-x: hidden; /* precisa estar no <html> também: no mobile (Safari em especial)
    o overflow-x:hidden só no <body> não é suficiente pra bloquear o scroll
    horizontal — o navegador ainda permite arrastar a página pros lados */
  width: 100%;
}

body{
  margin: 0;
  overflow-x: hidden; /* rede de segurança: nenhum losango (ou reveal lateral) criará scroll horizontal */
  width: 100%;
  max-width: 100vw;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

.eyebrow-line{
  display: inline-block;
  width: 40px;
  border-top: 1px solid currentColor;
  margin: 18px 0;
}

.slash{
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  margin: 14px 0;
  opacity: 0.7;
}

/* Bodoni em peso 400 regular ficava fina/difícil de ler nos títulos grandes;
   itálico + bold (igual ao estilo "Título" configurado no Framer) deixa mais
   encorpada sem perder a elegância. */
h1, h2, h3{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  letter-spacing: .01em;
  margin: 0;
}

/* rótulos/subtítulos em caixa alta — Roboto Mono semibold */
.credit-label,
.carousel-label,
.carousel-title,
.about__subtitle{
  font-weight: 600;
}

/* placeholder media blocks — swap for real assets */
.ph{
  background: repeating-linear-gradient(135deg, #cfc6b8, #cfc6b8 10px, #c3b9a9 10px, #c3b9a9 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5b5548;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-align: center;
  padding: 12px;
  min-height: 120px;
}
.ph.dark{
  background: repeating-linear-gradient(135deg, #2a3243, #2a3243 10px, #232a39 10px, #232a39 20px);
  color: #c9cedb;
}

/* ============ HEADER / HERO ============ */
.hero{
  position: relative;
  height: 100vh;
  min-height: 560px;
  width: 100%;
  overflow: hidden;
  color: #fff;
}

.hero__bg-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* retângulo preto com opacidade por cima do vídeo */
.hero__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1;
}

.hero__top{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px var(--gutter) 0;
}

.hero__eyebrow{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 35px;
  letter-spacing: .08em;
}

.hero__menu{
  position: absolute;
  right: var(--gutter);
  top: 32px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 6px;
}

.hero__center{
  position: relative;
  z-index: 2;
  height: calc(100% - 90px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
}

.hero__logo{
  max-width: 550px;
  width: 60vw;
}

.hero__tagline{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 30px;
  letter-spacing: .03em;
}

.hero__scroll{
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: #fff;
  opacity: .85;
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob{
  0%, 100%{ transform: translate(-50%, 0); }
  50%{ transform: translate(-50%, 6px); }
}

.hero__deco{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 90px;
  z-index: 2;
}

/* ---------- losangos decorativos de canto (reutilizável em qualquer seção) ---------- */
.deco{
  position: absolute;
  width: 140px;
  pointer-events: none;
  z-index: 1;
  --deco-base: none;
  --parallax: 0px;
  --deco-rotate: 0deg;
  transform: var(--deco-base) translateY(var(--parallax)) rotate(var(--deco-rotate));
}
.deco--tl{ top: -20px; left: -20px; }
.deco--tr{ top: -20px; right: -20px; --deco-base: scaleX(-1); }
.deco--bl{ bottom: -20px; left: -20px; --deco-base: scaleY(-1); }
.deco--br{ bottom: -20px; right: -20px; --deco-base: scale(-1, -1); }
.deco--lg{ width: 220px; }
.deco--sm{ width: 90px; }

@media (max-width: 640px){
  .deco{ width: 80px; }
  .deco--lg{ width: 120px; }
}

/* ---------- composições decorativas maiores, uma por ponto específico da página ---------- */
/* Mesma lógica do .deco: deslocamento fixo negativo pra ficar na margem, fora do texto/fotos. */
.deco-cluster{
  position: absolute;
  pointer-events: none;
  /* mais baixo que o texto (position:relative + z-index:2 nos blocos de
     título/texto abaixo) — antes estava em 3, mais alto que qualquer título,
     e por isso o losango podia pintar por cima do texto em telas estreitas */
  z-index: 1;
  width: 140px;
}
/* 1. Hero → Sobre (cubo + losango solto) — encostado na borda esquerda real da
   janela (não na borda do texto), senão em monitores menores (onde --gutter
   encolhe) o losango passa a invadir o título "Um quintal particular" */
.deco-1{
  top: -70px;
  left: calc(-1 * ((100vw - min(100vw, var(--max))) / 2 + var(--gutter)) - 20px);
  width: 150px;
}
/* 2. Sobre — pendurado logo abaixo da foto da fachada, encostando só a ponta */
.deco-2{ top: 100%; margin-top: -20px; bottom: auto; right: -30px; width: 130px; }
/* 3. Início da seção História — mesma correção de borda real da janela do item 1 */
.deco-3{
  top: -30px;
  left: calc(-1 * ((100vw - min(100vw, var(--max))) / 2 + var(--gutter)) - 20px);
  width: 140px;
}
/* 4. Banner "Venha conhecer" (1) → Credenciais — encostado na borda real da janela,
   não na borda do container centralizado (max-width: 1440px) */
.deco-4{
  top: -260px;
  left: auto;
  right: calc(-10px - (100vw - min(100vw, var(--max))) / 2);
  width: 140px;
}
/* 5. Entre a foto do Escritório Burle Marx (linha acima) e o texto da Haganá —
   encostado na borda esquerda real da janela (soma o recuo do container centralizado
   com o padding lateral da seção) */
.deco-5{
  top: -110px;
  left: calc(-1 * ((100vw - min(100vw, var(--max))) / 2 + var(--gutter)) - 20px);
  width: 110px;
}
/* 6. Banner "Venha conhecer" (2) → Galeria de ambientes — mesma correção de borda real da janela */
.deco-6{
  top: -60px;
  left: auto;
  right: calc(-30px - (100vw - min(100vw, var(--max))) / 2);
  width: 140px;
}
/* 7. Formulário final — fica contido dentro da própria seção, sem invadir "Plantas" */
.deco-7{ top: 0; left: -20px; width: 260px; }

@media (max-width: 860px){
  .deco-cluster{ width: 90px !important; }
}

/* ---------- revelação ao rolar a página ----------
   data-reveal="up"    -> textos/informações: sobem de baixo pra cima
   data-reveal="left"  -> imagens que ficam do lado ESQUERDO do layout: entram vindo da esquerda
   data-reveal="right" -> imagens que ficam do lado DIREITO do layout: entram vindo da direita
   (o JS decide qual direção cada bloco recebe, ver script.js) */
[data-reveal]{
  opacity: 0;
  transition: opacity 1s cubic-bezier(.25,.7,.35,1), transform 1s cubic-bezier(.25,.7,.35,1);
  will-change: transform, opacity;
}
[data-reveal="up"]{ transform: translateY(90px); }
[data-reveal="left"]{ transform: translateX(-130px); }
[data-reveal="right"]{ transform: translateX(130px); }
[data-reveal].is-visible{
  opacity: 1;
  transform: translate(0, 0);
}
@media (max-width: 860px){
  /* no mobile os blocos viram coluna única — mantém o efeito só na vertical,
     pra não sair "puxando" imagem de largura cheia de lado pra lado */
  [data-reveal="left"],
  [data-reveal="right"]{ transform: translateY(90px); }
}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
}

/* WhatsApp floating button — fixed so it travels with scroll */
.whatsapp-float{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.whatsapp-float svg{ width: 26px; height: 26px; fill: #fff; }

/* ============ SECTION: Sobre / endereço ============ */
.about{
  position: relative;
  background: var(--cream);
  padding: 96px var(--gutter);
}

.about__row{
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
  /* fica acima do losango decorativo (.deco tem z-index:1) — em monitores
     "médios" o losango encosta perto do título, e sem isso ele pintava por
     cima do texto e tampava a palavra */
  position: relative;
  z-index: 2;
}
.about__row + .about__row{ margin-top: 96px; }
.about__row--reverse .about__text{ order: 2; }
.about__row--reverse .about__media{ order: 1; }

.about__title{
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.25;
  /* fica acima do losango decorativo (.deco-cluster, z-index:1) — no mobile
     a foto e o título ficam empilhados e o "deco-2" (pendurado na borda da
     foto) podia sobrar por cima da primeira linha do título */
  position: relative;
  z-index: 2;
}

.about__specs{
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 13.5px;
}
.about__specs strong{
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  margin-bottom: 4px;
}

.about__media img:not(.deco-cluster),
.about__media .ph{ width: 100%; aspect-ratio: 4/3; object-fit: cover; }

.about__subtitle{
  font-size: 12px;
  letter-spacing: .04em;
  opacity: .7;
  margin-top: 6px;
}

.about__body{
  margin-top: 18px;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.75;
}

.map__frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16/11;
  overflow: hidden;
  background: var(--cream);
}
.map__frame iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* preto e branco + um pouco mais de contraste: some com as cores
     "poluídas" do Maps (verde, amarelo, ícones coloridos) sem perder
     a legibilidade das ruas e do pino de localização */
  filter: grayscale(1) contrast(1.05) brightness(1.03);
}

/* ============ SECTION: história / vídeo ============ */
.story{
  position: relative;
  background: var(--cream);
  padding: 40px var(--gutter) 96px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.story__title{
  font-size: clamp(30px, 2.6vw, 30px);
  max-width: 20ch;
  margin: 0 auto;
  /* mesmo motivo do .about__row: fica acima do losango decorativo do canto
     (.deco, z-index:1) para nunca tampar o texto */
  position: relative;
  z-index: 2;
  margin-top: 30px;
}
.story__sub{
  margin-top: 5px;
  font-size: 13px;

}
.story__video{
  position: relative;
  max-width: 960px;
  width: 100%;
  margin: 40px auto 0;
  overflow: hidden;
}
.story__video::before{
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 — garante a proporção em qualquer navegador */
}
.story__video iframe,
.story__video img,
.story__video .ph{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story__play{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border: none;
}
.story__play svg{ width: 20px; height: 20px; margin-left: 3px; }

/* ============ BANNER: venha conhecer ============ */
.visit-banner{
  position: relative;
  height: 266px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;

}
.visit-banner__bg{
  position: absolute; inset: 0;
  background: url("imgs/visit-bg.jpg") center/cover no-repeat;
}
.visit-banner__bg::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(18,20,20,.55);
}
.visit-banner__content{ position: relative; z-index: 1; }
.visit-banner__title{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
}
.visit-banner .slash{ color: #fff; margin: 10px auto; }
.btn{
  display: inline-block;
  padding: 13px 30px;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.btn:hover{ background: #fff; color: var(--navy); }
.btn--dark{ border-color: var(--ink); color: var(--ink); }
.btn--dark:hover{ background: var(--ink); color: #fff; }

/* ============ SECTION: equipe (credenciais) ============ */
.credits{
  position: relative;
  background: var(--cream);
  padding: 96px var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}
.credit-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  /* mesmo motivo do .about__row/.story__title: fica acima do losango
     decorativo (.deco-cluster, z-index:1) pra nunca tampar o texto */
  position: relative;
  z-index: 2;
}
.credit-row + .credit-row{ margin-top: 80px; }
.credit-row--flip .credit-text{ order: 2; }
.credit-row--flip .credit-media{ order: 1; }
.credit-row--hagana{ position: relative; }

.credit-label{
  font-size: 11px;
  letter-spacing: .06em;
  opacity: .7;
}
.credit-name{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  margin-top: 4px;
}
.credit-text p{
  margin: 16px 0 0;
  max-width: 42ch;
  font-size: 13.5px;
  line-height: 1.75;
}
.credit-media img, .credit-media .ph{
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.credit-media picture{
  display: block;
  width: 100%;
}

.credit-list{
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  max-width: 42ch;
}
.credit-list li{
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.9;
}
.credit-list li::before{
  content: "/";
  position: absolute;
  left: 0;
  opacity: .6;
}

/* ============ SECTION: diferenciais (navy) ============ */
.differentials{
  background: var(--navy);
  color: #fff;
  padding: 90px var(--gutter);
  text-align: center;
}
.differentials__title{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
}
.differentials .slash{ color: #fff; }

.accordion{
  max-width: 560px;
  margin: 24px auto 0;
}
.accordion-item{
  border-bottom: 1px solid var(--line-light);
}
.accordion-item summary{
  list-style: none;
  cursor: pointer;
  padding: 18px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
}
.accordion-item summary::-webkit-details-marker{ display: none; }
.accordion-item summary::after{
  content: "⌄";
  font-family: var(--font-mono);
  transition: transform .25s ease;
}
.accordion-item[open] summary::after{ transform: rotate(180deg); }
.accordion-item .accordion-body{
  padding: 0 4px 30px;
  font-size: 13px;
  opacity: .85;
  line-height: 1.8;
  max-width: 46ch;
  margin: 0 auto;
}

/* ---------- carrossel de diferenciais ---------- */
.carousel-intro{
  max-width: 42ch;
  margin: 0 auto 24px;
  font-size: 13px;
  opacity: .8;
  line-height: 1.8;
}

.carousel{
  position: relative;
  max-width: 46ch;
  margin: 0 auto;
}

.carousel-dots{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 26px;
}
.carousel-dots button{
  width: 6px;
  height: 6px;
  border-radius: 1px;
  border: none;
  padding: 0;
  background: rgba(255,255,255,.25);
  cursor: pointer;
}
.carousel-dots button.is-active{
  background: var(--gold);
}

.carousel-viewport{ overflow: hidden; }
.carousel-track{
  display: flex;
  transition: transform .45s ease;
}
.carousel-slide{
  flex: 0 0 100%;
  min-width: 0;
  text-align: center;
}

.carousel-icon{
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  color: var(--gold);
}
.carousel-icon svg{ width: 100%; height: 100%; }

.carousel-title{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
  line-height: 1.6;
}

.carousel-text{
  font-size: 13px;
  line-height: 1.8;
  opacity: .8;
  margin: 0;
}
.carousel-text--single{ opacity: .85; }

.carousel-label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
}

.carousel-list{
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  display: inline-block;
}
.carousel-list li{
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.85;
  opacity: .85;
}
.carousel-list li::before{
  content: "/";
  position: absolute;
  left: 0;
  color: var(--gold);
}

.carousel-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  font-size: 22px;
  cursor: pointer;
  padding: 6px 10px;
  transition: color .2s ease;
}
.carousel-arrow:hover{ color: #fff; }
.carousel-arrow.prev{ left: -46px; }
.carousel-arrow.next{ right: -46px; }

@media (max-width: 640px){
  .carousel-slide{ padding: 0 26px; }
  .carousel-arrow.prev{ left: -4px; }
  .carousel-arrow.next{ right: -4px; }
}

/* ============ SECTION: galerias ============ */
.gallery-section{
  position: relative;
  background: var(--cream);
  padding: 90px var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}

.gallery-row{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  /* mesmo motivo do .about__row/.credit-row: fica acima do losango
     decorativo (.deco-cluster, z-index:1) pra nunca tampar o texto */
  position: relative;
  z-index: 2;
}

.gallery-frame{
  position: relative;
}

/* Galeria "Ambientes": a foto fica presa na borda real da janela (canto
   esquerdo da tela), independente do tamanho da tela — o texto ao lado
   continua no lugar normal, dentro do container. */
.gallery-section:not(.gallery-section--two) .gallery-frame{
  margin-left: calc(-1 * (var(--gutter) + (100vw - min(100vw, var(--max))) / 2));
  width: calc(100% + var(--gutter) + (100vw - min(100vw, var(--max))) / 2);
}

.gallery-frame img, .gallery-frame .ph{
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
/* Transição suave entre as fotos da galeria: fade + leve zoom,
   aplicada via JS (classe is-fading) antes da troca de src. */
.gallery-frame img{
  transition: opacity .45s ease, transform .6s ease;
  opacity: 1;
  transform: scale(1);
}
.gallery-frame img.is-fading{
  opacity: 0;
  transform: scale(1.03);
}
.gallery-frame .arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 16px;
}
.gallery-frame .arrow.prev{ left: 14px; }
.gallery-frame .arrow.next{ right: 14px; }

.gallery-info h3{
  font-size: 34px;
  font-weight: 200;
  font-style: normal;
  font-family: var(--font-display);
}
.gallery-list{
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  font-size: 13px;
}
.gallery-list li{
  padding: 7px 0;
  opacity: .75;
}
.gallery-list li.is-active{
  opacity: 1;
  padding-left: 14px;
  position: relative;
}
.gallery-list li.is-active::before{
  content: "/";
  position: absolute;
  left: 0;
}

.gallery-section--two{
  margin-top: -100px;
}
.gallery-section--two .gallery-row{
  display: flex;
  flex-direction: column;
  align-items: stretch; /* a .gallery-row base é grid com align-items:center;
    sem isso aqui o título ficava centralizado em vez de esticar/alinhar
    com a borda esquerda da imagem */
  gap: 20px;
}
.gallery-section--two h3{
  margin: 0 0 0 clamp(0px, 8vw, 120px);
  text-align: left;
  font-size: 34px;
  font-weight: 200;
  font-style: normal;
}
.gallery-section--two .gallery-frame{
  /* mesmo recuo do título à esquerda — sobra visivelmente mais espaço do
     lado esquerdo da imagem do que do lado direito */
  width: calc(100% - clamp(0px, 8vw, 120px));
  margin-left: clamp(0px, 8vw, 120px);
  margin-top: 5px;
}

@media (max-width: 640px){
  .gallery-frame .arrow{ font-size: 14px; }
}

/* ============ SECTION: plantas ============ */
.plans{
  background: var(--plantas-blue);
  color: #fff;
  padding: 70px var(--gutter);
}
.plans__row{
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.plans__media img, .plans__media .ph{ width: 100%; }
.plans__title{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
}
.plans .slash{ color: #fff; }
.plans__note{
  max-width: var(--max);
  margin: 22px auto 0;
  font-size: 11px;
  opacity: .65;
}

/* ============ SECTION: formulário final ============ */
.cta-form{
  position: relative;
  background: var(--cream);
  padding: 90px var(--gutter);
  text-align: center;
}
.cta-form__title{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 24px;
  max-width: 18ch;
  margin: 0 auto;
  /* fica acima do losango decorativo (.deco-cluster, z-index:1) — sem isso
     ele pintava por cima do título em telas estreitas */
  position: relative;
  z-index: 2;
}
.cta-form__sub{
  margin-top: 10px;
  font-size: 13px;
  opacity: .75;
  position: relative;
  z-index: 2;
}
form.lead-form{
  max-width: 420px;
  margin: 32px auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lead-form input{
  width: 100%;
  padding: 13px 4px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
}
.lead-form input::placeholder{ color: #7a7566; }
.lead-form input:focus{ outline: none; border-color: var(--ink); }
.lead-form input:disabled{ opacity: .5; }
.lead-form button{ margin-top: 10px; align-self: center; }
.lead-form button:disabled{ opacity: .6; cursor: not-allowed; }

.form-status{
  min-height: 18px;
  margin: 4px 0 0;
  font-size: 12px;
  letter-spacing: .02em;
}
.form-status--ok{ color: #3c7a4e; }
.form-status--error{ color: #b3423a; }

/* ============ FOOTER ============ */
footer{
  background: var(--navy);
  color: #fff;
  padding: 80px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}
footer .footer-col strong{
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  margin-bottom: 4px;
}
footer .footer-logos{
  display: flex;
  gap: 16px;
  align-items: center;
}
footer .footer-logos img{ height: 40px; }

/* ============ MENU OVERLAY ============ */
.menu-overlay{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  transform: translateY(-100%);
  transition: transform .4s ease;
}
.menu-overlay.is-open{ transform: translateY(0); }

.menu-overlay__media{
  position: relative;
  width: 40%;
  overflow: hidden;
}
.menu-overlay__logo{
  position: absolute;
  top: 24px;
  left: 24px;
  width: 52px;
  height: auto;
  z-index: 2;
}

.menu-overlay__panel{
  position: relative;
  width: 60%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-overlay__close{
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
.menu-overlay nav{
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
}
.menu-overlay nav a{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
}

@media (max-width: 640px){
  .menu-overlay__logo{ width: 40px; top: 18px; left: 18px; }
  .menu-overlay__close{ top: 18px; right: 18px; }
  .menu-overlay nav{ gap: 20px; }
  .menu-overlay nav a{ font-size: 17px; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 860px){
  .about__row,
  .credit-row,
  .gallery-section:not(.gallery-section--two) .gallery-row,
  .plans__row{
    grid-template-columns: 1fr !important;
  }

  /* imagem sempre antes do texto no mobile, independente da variação desktop */
  .about__row .about__media,
  .credit-row .credit-media{ order: 1; }
  .about__row .about__text,
  .credit-row .credit-text{ order: 2; }

  .hero__logo{ width: 78vw; }
  .gallery-section--two h3{ margin-left: 0; text-align: left; }
  .gallery-section--two .gallery-frame{ margin-left: 0; width: 100%; }

  /* vídeo da seção "Toda grande história" ocupa a largura inteira da tela,
     ignorando o padding lateral da seção */
  .story__video{
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* fotos coladas só na borda esquerda, com uma folga proposital na direita —
     usado em "Sobre" (fachada/mapa) e nas 3 primeiras linhas de credenciais
     (Arquea, Faisal Arquitetos, Boscardin Corsi) */
  .about__media,
  .credit-media{
    margin-left: calc(-1 * var(--gutter));
    width: calc(100% + var(--gutter));
  }
  .about__media img, .about__media .ph,
  .credit-media img, .credit-media .ph{
    padding-right: 32px;
    box-sizing: border-box;
  }

  /* a partir da Burle Marx (intervenção artística) as fotos ficam coladas
     nas duas bordas da tela */
  .credit-media--full-bleed{
    width: calc(100% + (var(--gutter) * 2));
    margin-right: calc(-1 * var(--gutter));
  }
  .credit-media--full-bleed img, .credit-media--full-bleed .ph{
    padding-right: 0;
  }

  /* "Toda grande história": vídeo primeiro, título e texto embaixo dele */
  .story__video{ order: 1; }
  .story__title,
  .story .slash,
  .story__sub{ order: 2; }

  /* Galerias "Ambientes" e "Entre o concreto e o infinito": título (com barra)
     antes da imagem, sem a lista de itens */
  .gallery-info{ order: 1; }
  .gallery-frame{ order: 2; }
  .gallery-info h3::after,
  .gallery-section--two h3::after{
    content: "/";
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 20px;
    opacity: .7;
    margin-top: 14px;
  }
  .gallery-list{ display: none; }

  /* footer em cascata: um bloco embaixo do outro, centralizado */
  footer{
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }
  footer .footer-col strong{ font-size: 16px; margin-bottom: 8px; }
  footer .footer-col{ font-size: 20px; }

  /* títulos das galerias menores no mobile — estavam quebrando em 3 linhas gigantes */
  .gallery-info h3,
  .gallery-section--two h3{ font-size: 22px; }

  /* história: reduz o respiro sobrando embaixo do texto pequeno
     (o padding-bottom da seção foi pensado pra quando o vídeo vinha por último) */
  .story{ padding-bottom: 48px; }
  .story__sub{ font-size: 14px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .hero__scroll{ animation: none; }
}