body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -10; /* fica atrás de tudo */
  background-image: url('fundo.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.35; /* ajuste conforme quiser */
  filter: contrast(1.05) brightness(0.98) saturate(1.05);
}


/* ===== PALETA & TOKENS ===== */
:root{
  /* bases quentes (luz de fim de tarde) */
  --sand-50:    #F7F3ED; /* fundo principal - linho/areia clara */
  --sand-100:   #EBD6B3; /* blocos/seções - amarelo pêssego suave */
  /* tipografia */
  --ink-900:    #463F3A; /* texto principal (grafite amendoado) */
  --taupe-600:  #AFA89F; /* texto suave/legendas */
  /* acentos */
  --capp-600:   #7B513A; /* primário: links/botões (marrom cappuccino) */
  --capp-700:   #6A452F; /* hover/active do primário */
  --olive-500:  #A3A27C; /* secundário: ícones/detalhes naturais */
  /*--gold-500:   #CDA566; luxo sutil: bordas finas/realces */
  --bronze-500: #B48B5E; /* títulos/destaques elegantes (opcional) */
  /* UI */
  --line:       rgba(70,63,58,.14);  /* divisórias suaves */
  --radius:     18px;
  --shadow:     0 8px 28px rgba(70,63,58,.12);
  --container:  1100px;
  --header-h: 64px;            /* altura da faixa do header */

  --condo-hero-h: clamp(70vh, 86vh, 980px);
  --condo-focus-y: 50%;
  --side-padding: clamp(16px, 4vw, 24px);

  --gold-500:#C2A469;   /* ouro suave do site */
  --paper:   #F8F5F0;   /* areia clara (apenas se usar em transições) */

   --title-serif: "Cormorant Garamond", "Libre Caslon Text", "Lora", serif;
     --header-h: clamp(64px, 9vh, 88px);

 }

*{ box-sizing: border-box; }

html,body{ height:100%; }

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;   /* CORTA qualquer coisa que tente passar da largura */
}

body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  color:var(--ink-900);
  background:var(--sand-50);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-top: var(--header-h); /* pra não ficar coisa escondida atrás do header fixo */
   padding-top: 60px;
}


img{ max-width:100%; display:block; height:auto; border-radius:0px; }
a{ color:var(--petrol-600); text-decoration:none; }


.container{
  width:min(100% - 2rem, var(--container));
  margin-inline:auto;
}

/* ===== TIPOGRAFIA ===== */
h1,h2,h3{
  font-family:'Playfair Display', Georgia, 'Times New Roman', serif;
  line-height:1.2; color:var(--ink-900);
}
.title-2{ font-size: clamp(1.6rem, 2vw + 1rem, 2.25rem); margin:0 0 .6rem; }
.title-3{ font-size: clamp(1.15rem, 1vw + .9rem, 1.4rem); margin:.3rem 0 .5rem; }
.lead{ font-size:1.05rem; color:var(--taupe-600); }
.small{ font-size:.9rem; }
.micro{ font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; color:var(--taupe-600); }
.align-center{ text-align:center; }
.no-mb{ margin-bottom:0; }

/* ===================================================================== HEADER ================================================================================= */

.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 60px;
  display: flex;
  align-items: center;
  background: rgba(247, 243, 237, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-block: 10px;
  position: relative; /* pra nav absoluta no mobile se ancorar aqui */
}

/* Marca */

.brand{
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.brand__title{
  font-family: "Playfair Display", ui-serif, Georgia, serif; 
 font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1.5;
}

.brand__tag{
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;	
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
 
}

/* Navegação desktop */

.nav {
  display: flex;
  align-items: center;
   gap: clamp(10px, 1.6vw, 22px);  /* mais espaçamento entre botões */
  font-size: clamp(0.78rem, 1.05vw, 0.9rem);/* reduz levemente o texto */
  font-weight: 400;
  letter-spacing: 0.05em;
  white-space: nowrap; /* impede quebra de linha */
  font-family: "Segoe UI", system-ui, sans-serif;

}


.nav__link {
  color: color-mix(in srgb, var(--ink-900) 85%, var(--taupe-600) 15%);
  text-decoration: none;
  transition: color 0.25s ease;
}

.nav__link:hover {
  color: color-mix(in srgb, var(--gold-500) 75%, var(--ink-900) 25%);
  transition: color 0.3s ease, transform 0.25s ease;
  transform: translateY(-1px);
}

.whatsapp-link:hover {
  color: var(--gold-500);
  transition: color 0.25s ease;
}
/* Contato (Whats + CRECI) */

.header__contact{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-left: 24px;
}

.whatsapp-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  text-decoration: none;
}

.whatsapp-number{
  font-weight: 500;
}

.creci{
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* ========================= BOTÃO HAMBÚRGUER ========================= */

.nav-toggle{
  display: none; /* só aparece no mobile */
  border: none;
  background: none;
  padding: 4px;
  cursor: pointer;
  margin-left: auto;
}

.nav-toggle__line{
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-900) 85%, transparent);
  transition: transform 0.2s ease, opacity 0.2s ease, translate 0.2s ease;
}

.nav-toggle__line + .nav-toggle__line{
  margin-top: 4px;
}

/* Animação pra virar "X" quando aberto */

.site-header.is-open .nav-toggle__line:nth-child(1){
  transform: rotate(45deg);
  translate: 0 6px;
}

.site-header.is-open .nav-toggle__line:nth-child(2){
  opacity: 0;
}

.site-header.is-open .nav-toggle__line:nth-child(3){
  transform: rotate(-45deg);
  translate: 0 -6px;
}

/* ========================= MOBILE ========================= */

/* ========================= MOBILE (até 768px) ========================= */

@media (max-width: 768px){

  .site-header{
    background: rgba(247, 243, 237, 0.35);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .header__inner{
    gap: 8px;
    max-width: 100%;     /* garante que não passe da largura da tela */
  }

  /* marca ocupa o espaço da esquerda, botão fica à direita */
  .brand{
    flex: 1 1 auto;
    min-width: 0;
  }

  .brand__title{
    font-size: 0.95rem;
    letter-spacing: 0.18em;
  }

  .brand__tag{
    font-size: 0.55rem;
    letter-spacing: 0.10em;
    opacity: 0.7;
  }

  /* botão hamburguer aparece no mobile */
  .nav-toggle{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* menu como painel dropdown abaixo do header */
  .nav{
    position: absolute;
    top: 100%;   /* logo abaixo da barra */
    left: 0;
    right: 0;
    margin-left: 0;

    display: flex;
    flex-direction: column;
    gap: 10px;

    padding: 12px 20px 16px;
    background: color-mix(in srgb, var(--sand-50) 97%, transparent);
    border-bottom: 1px solid var(--line);

    /* ESSENCIAL: pode quebrar linha, pra não alargar o header */
    white-space: normal;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  }

  .site-header.is-open .nav{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav__link{
    font-size: 0.85rem;
    padding-block: 4px;
    white-space: normal;  /* links também podem quebrar linha */
  }

  .header__contact{
    align-items: flex-start;
    margin-left: 0;
    margin-top: 4px;
  }

  .whatsapp-link{
    font-size: 0.8rem;
  }

  .creci{
    font-size: 0.65rem;
  }

  /* quando o menu está aberto, centraliza bloco de contato */
  .site-header.is-open .header__contact {
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }

  .site-header.is-open .whatsapp-link {
    justify-content: center;
    font-size: 0.82rem;
  }

  .site-header.is-open .creci {
    text-align: center;
    width: 100%;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
  }
}



/* ----------------------------------------------------------- PRE-HERO --------------------------------------------------------------------------------------------*/
.prehero{
  position: relative;
  min-height: clamp(68vh, 78vh, 84vh);
  display: block;
  isolation: isolate;
  background-image: url("praia.jpg");
  background-size: cover;
  background-position: 50% 100%; /* mostra mais areia */
  background-repeat: no-repeat;
  background-attachment: fixed;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

/* imagem de fundo (fallback se usada como <img>) */
.prehero__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 96%;
  transform: translateZ(0);
  filter: contrast(1.03) saturate(1.02);
  z-index: -1;
}

/* véu escuro de contraste — base */
.prehero::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.08) 0%,
    rgba(0,0,0,.15) 35%,
    rgba(0,0,0,.25) 100%
  );
  z-index: 0;
}

/* conteúdo principal (título + subtítulo) */
.prehero__content{
  position: absolute;
  bottom: clamp(40px, 3vh, 120px);
  right: 0;
  left: 0;
  z-index: 2; /* acima dos véus */
  max-width: var(--container);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--side-padding);
  text-align: right;
  color: var(--sand-50);
}

/* título */
.prehero__title{
font-family: "Playfair Display", serif; 
  font-size: clamp(1.8rem, 2.7vw + .28rem, 2.75rem);
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: -0.3px;
  margin: 0 0 1rem auto;
  color: var(--ink-900);
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
  max-width: 42ch;
}

/* barra dourada abaixo do título */
.prehero__title::after{
  content: "";
  display: block;
  width: clamp(70px, 10vw, 120px);
  height: 2px;
  margin: 0.8rem 0 0 auto;
  border-radius: 2px;
  background: color-mix(in srgb, var(--gold-500) 80%, var(--sand-50) 20%);
  box-shadow: 0 1px 8px rgba(0,0,0,.2);
}

/* subtítulo */
.prehero__text{
  max-width: 70ch;
  margin: 1.2rem 0 0 auto;
  font-size: clamp(.88rem, 0.9vw + .45rem, 1.05rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--sand-50) 80%, var(--taupe-600) 20%);
  text-shadow: 0 1px 8px rgba(0,0,0,.25);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: 0.3px;
}

@media (max-width: 780px){
  .prehero{
    min-height: 82vh;
    background-attachment: scroll;
    background-position: 50% 92%; /* deixa a areia bem visível */
  }

  .prehero__content{
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    padding: 0 20px;
    text-align: center; /* CENTRALIZA TUDO */
  }

  .prehero__title{
    font-size: clamp(1.4rem, 5vw, 1.9rem);
    max-width: 28ch;
    margin: 0 auto 0.8rem;
  }

  .prehero__title::after{
    margin: 0.7rem auto 0; /* traço centralizado */
  }

  .prehero__text{
    max-width: 34ch;
    margin: 0.8rem auto 0;
    font-size: 0.8rem;
    line-height: 1.55;
  }

  .prehero::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0.1) 30%,
      transparent 80%
    );
    z-index: 1;
  }
}


/* ===============================v=========== TÓPICOS DA CASA – VERSÃO 3 COLUNAS ========================================================================== */

/* seção como um todo */
.topics--house {
  background: transparent;
  padding: clamp(46px, 5vw, 64px) 24px
            clamp(24px, 4vw, 40px) !important;
}

/* reaproveita .topics__grid padrão (3 colunas no desktop),
   só ajusta o espaçamento vertical se quiser um pouco menor */
.topics--house .topics__grid {
  row-gap: clamp(34px, 4vw, 46px);
}

/* item base (a animação .topicIn você já tem) */
.topics--house .topic {
  max-width: 320px;
  margin-inline: auto;
  padding: 10px px;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  filter: blur(2px);
}

.topics--house .topic.is-visible {
  animation: topicIn .9s cubic-bezier(.25,.1,.25,1) forwards;
  animation-delay: var(--delay, 0ms);
}

/* título da casa */
.topics--house .topic__title {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-variant: small-caps;
  text-transform: none;
  letter-spacing: .06em;
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  line-height: 1.22;
  color: color-mix(in srgb, var(--ink-900) 70%, var(--gold-500) 10%);
}

/* filete dourado */
.topics--house .topic__title::after {
  content: "";
  display: block;
  width: clamp(58px, 8vw, 82px);
  height: 1.4px;
   margin: clamp(14px, 1.8vw, 18px) auto; 
  background: linear-gradient(
    to right,
    transparent,
    var(--gold-500),
    transparent
  );
  opacity: .8;
  transition: opacity .25s ease, transform .25s ease;
}

/* subtítulo */
.topics--house .topic__desc {
  margin: -18px 0 0; /* 🔹 aproxima visualmente do filete */
  text-wrap: balance;
  hyphens: none;
word-break: keep-all;
overflow-wrap: normal;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-style: normal;
  font-weight: 300;
font-size: clamp(0.84rem, 0.95vw, 0.98rem);
  line-height: 1.5;
  letter-spacing: .015em;
  color: color-mix(in srgb, var(--taupe-600) 60%, var(--ink-900) 40%);
  text-align: center;
}

/* hover */
.topics--house .topic:hover .topic__title {
  color: color-mix(in srgb, var(--ink-900) 75%, var(--gold-500) 25%);
}
.topics--house .topic:hover .topic__title::after {
  opacity: 1;
  transform: translateY(-1px);
}

/* responsivo: 2 colunas no médio, 1 no mobile já vem do .topics__grid global;
   se quiser garantir, pode reforçar: */
@media (max-width: 980px) {
  .topics--house .topic {
    max-width: 360px;
  }
}

@media (max-width: 640px) {
  .topics--house {
    padding-inline: 20px;
  }
  .house-introline {
    margin-bottom: clamp(26px, 4.4vw, 34px);
  }
}
@media (max-width: 768px) {
  .topic__desc {
    font-size: clamp(0.9rem, 2.8vw, 1.05rem); /* 🔹 leve aumento */
    line-height: 1.55; /* 🔹 mantém o respiro natural */
  }
}
@media (max-width: 768px) {
  .topics--house .topic__title {
    font-size: clamp(1.08rem, 3.6vw, 1.26rem); /* aumento mais leve */
    line-height: 1.24;
  }
}

/* ============================================================ HERO DA CASA – FOTO EM MOLDURA ====================================================================== */

.house-hero{
  padding: clamp(28px, 4vw, 40px) var(--side-padding)
           clamp(26px, 4vw, 40px);
  background: transparent;
}

.house-hero__inner{
  max-width: var(--container);
  margin-inline: auto;
  text-align: center;
}

/* título editorial (em vez de texto sobre a foto) */
.house-hero__kicker{
  margin-top: -25px;
  margin-bottom: clamp(10px, 1.4vw, 16px);
  font-family: "Playfair Display", serif; 		
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.18em;
  font-size: clamp(1.18rem, 2.1vw, 1.42rem);
  color: color-mix(in srgb,
    var(--ink-900) 50%,
    var(--taupe-600) 30%
  );
  opacity: 0;
  transform: translateY(12px);
  filter: blur(2px);
  transition: opacity .8s ease, transform .8s ease, filter .8s ease;
}

.house-hero__kicker.is-visible {
  opacity: 0.95; /* agora o valor que você já usava */
  transform: none;
  filter: blur(0);
}

/* quadro da foto: moldura dourada + passe-partout claro */
.house-hero__frame{
  position: relative;
  margin: 0 auto;
  max-width: min(1040px, 90vw);
  border-radius: 16px; /* menos arredondado */
  padding: clamp(10px, 1.4vw, 14px); /* “passe-partout” interno */
  background: color-mix(in srgb, var(--sand-50) 92%, #fff 8%);
  box-shadow: 0 16px 38px rgba(0,0,0,.12);
  overflow: hidden;
}

/* moldura dourada mais presente */
.house-hero__frame::before{
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: calc(16px - 3px);
  border: 1px solid color-mix(
    in srgb,
    var(--gold-500) 65%,
    rgba(255,255,255,.4) 35%
  );
  pointer-events: none;
}

/* foto limpa, sem overlay escuro */
.house-hero__image{
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(16px - 6px);
  object-fit: cover;
  transform-origin: center center;
  transition:
    transform .9s ease,
    filter .9s ease;
}

/* profundidade suave no hover */
.house-hero__frame:hover .house-hero__image{
  transform: scale(1.018);
  filter: brightness(1.02) contrast(1.05);
}

/* legenda poética em dourado, abaixo da foto */
.house-hero__caption{
  margin-top: clamp(10px, 1.3vw, 14px);
 font-family: "Cormorant Garamond", serif; 
  font-style: italic;
  font-size: clamp(.9rem, 1.1vw, 1rem);
  letter-spacing: .03em;
  color: color-mix(in srgb,
    var(--gold-500) 80%,
    var(--ink-900) 20%
  );
}

/* responsivo */
@media (max-width: 720px){
  .house-hero{
    padding-inline: 20px;
    padding-top: clamp(26px, 5vw, 36px);
  }

  .house-hero__frame{
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 10px 24px rgba(0,0,0,.16);
  }

  .house-hero__image{
    border-radius: 10px;
  }

  .house-hero__caption{
    font-size: .9rem;
  }
}

/* moldura dourada mais presente, mas elegante */
.house-hero__frame::before {
  border: 1.2px solid color-mix(
    in srgb,
    var(--gold-500) 75%,
    rgba(255, 255, 255, 0.35) 25%
  );
  box-shadow:
    inset 0 0 6px rgba(255, 215, 130, 0.15),
    0 2px 12px rgba(0,0,0,0.06);
}

/* raio de canto mais reto (sofisticado) */
.house-hero__frame {
  border-radius: 14px;
}
.house-hero__frame::before {
  border-radius: calc(14px - 2px);
}
.house-hero__image {
  border-radius: calc(14px - 4px);
}

/* aproxima kicker do quadro para parecer editorial */
.house-hero__kicker {
  margin-bottom: clamp(10px, 1.6vw, 16px);
}

/* legenda com mais refinamento visual */
.house-hero__caption {
  font-size: clamp(0.88rem, 1vw, 0.96rem);
  letter-spacing: 0.035em;
  color: color-mix(
    in srgb,
    var(--gold-500) 88%,
    var(--ink-900) 12%
  );
  opacity: 0.9;
}


.desktop-only { display: block; }
.mobile-only { display: none; }

@media (max-width: 780px){
  .desktop-only { display: none; }
  .mobile-only { display: block; }
}

/* -------------------------------------------------3) Ficha técnica (núcleo racional destacado) --------------------------------------------*/
.house-specs{
  padding: clamp(26px, 3.4vw, 44px) 24px
   clamp(46px, 4.6vw, 72px);
  background: color-mix(in srgb, var(--sand-100) 38%, transparent);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.house-specs__inner{
  max-width: var(--container);
  margin: 0 auto;
}

/* grid elegante em 3 colunas no desktop */
.specs-list{
  margin: clamp(10px, 1.2vw, 16px) auto 0;
  padding: 0;
  list-style: none;
  max-width: 960px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}

/* cartões mais limpos e translúcidos */
.specs-list li{
  padding: clamp(14px, 1.6vw, 18px) clamp(12px, 1.6vw, 18px);
  background: rgba(255, 255, 255, 0.32); /* translúcido */
  /*border: 0 solid rgba(0, 0, 0, 0.05);   borda bem sutil */
  border-radius: 8px;                      /* remove arredondado */
  box-shadow: 0 10px 22px rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
  gap: 4px;
  backdrop-filter: blur(2px);
}

/* label de cada item */
.specs-list strong {
 font-family: "Playfair Display", ui-serif, Georgia, serif; 
  font-weight: 900;
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.1em;
  font-size: clamp(1.05rem, 1.6vw, 1.26rem);
  line-height: 1;
  margin-bottom: 0.5em;
  text-align: center;
  color: color-mix(in srgb, var(--taupe-500) 70%, var(--ink-900) 30%);
  opacity: 0.9; /* ↓ suaviza o contraste sem perder leitura */
}

/* valor */
.specs-list span{
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 300;
font-size: clamp(0.8rem, 0.9vw, 0.92rem);
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-align: center;
  color: color-mix(in srgb,
    var(--ink-900) 72%,
    var(--taupe-700) 28%
  );                                           /* menos preto, mais suave */
  opacity: 0.6;
}

/* responsivo */
@media (max-width: 980px){
  .specs-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
  }
}

@media (max-width: 560px){
  .house-specs{
    padding-inline: 20px;
  }

  .specs-list{
    grid-template-columns: 1fr;
  }

  .specs-list li{
    padding: 12px 14px;
    box-shadow: 0 6px 14px rgba(0,0,0,.04);
  }
}










/* 2) ============================================  Manifesto & Conceito – transição hero da casa → tópicos    =================================================== */
.house-concept{
  /* menos espaço em cima pra aproximar da foto */
  padding: clamp(4px, 1vw, 12px) 24px
           clamp(40px, 4.5vw, 56px);
  background: transparent;
}

.house-concept__inner{
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
  padding-inline: var(--side-padding);
}

/* kicker discreto, em caps e suave */
.concept-kicker{
  text-align: center;
font-family: "Playfair Display", serif; 		
  font-size: clamp(0.72rem, 1.05vw, 0.82rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-900) 65%, transparent);
  margin-bottom: clamp(22px, 3vw, 32px);
}

/* dois parágrafos em 2 colunas no desktop */
.concept-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 54px);
  align-items: flex-start;
}
  

.concept-text{
  margin: 0;
  font-family: "Lora","Libre Caslon Text",serif;	
font-size: clamp(0.95rem, 1.05vw, 1.03rem);
  line-height: 1.8;
  color: color-mix(in srgb, var(--ink-900) 50%, transparent); /* 🔹 um pouco mais denso */
  text-align: justify;
  letter-spacing: 0.01em;     /* 🔹 só um respiro, sem lavar o texto */
  font-weight: 400;           /* 🔹 volta pro “normal elegante” */
  text-align: justify;
}

.concept-text strong {
  font-weight: 550;
  color: color-mix(in srgb, var(--ink-900) 70%, transparent);
}

/* responsivo – em telas menores vira uma coluna só */
@media (max-width: 840px){
  .concept-grid{
    grid-template-columns: 1fr;
    max-width: 40rem;
    margin: 0 auto;
  }

  .concept-text{
    text-align: center;
  }
}

/* ============================================================== GALERIA DA CASA DESTAQUE ======================================================================== */
.gallery-track-casa {
  display: flex;
  height: 100%;
  transition: transform 0.8s ease;
  will-change: transform;
}

.gallery-item,
.casa-gallery figure {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}


.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(0.96) contrast(1.04);
}


.gallery-item--top img {
  object-fit: cover;
  object-position: center 47%; 
}

/* ================================   LEGENDAS   ================================ */


.casa-gallery {
  position: relative;
  width: 100%;
  height: clamp(56vh, 68vh, 80vh);  /* altura maior, ainda responsiva */
  overflow: hidden;
  background: var(--sand-50);
  isolation: isolate;
  margin: 0;
  padding: 0;
}

/* fades topo+base harmônicos com o fundo do site */
.casa-gallery::before,
.casa-gallery::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 5;
  height: clamp(18px, 8vw, 44px);
}

.casa-gallery::before {
  top: -1px;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--sand-50) 92%, transparent) 0%,
    transparent 100%
  );
  mix-blend-mode: multiply;
}

.casa-gallery::after {
  bottom: -1px;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--sand-50) 92%, transparent) 0%,
    transparent 100%
  );
  mix-blend-mode: multiply;
}

/* ====================== FAIXA + LEGENDAS ====================== */

.gallery-caption {
  position: absolute;
  inset: 0;                     /* ocupa toda a área da foto */
  display: flex;
  align-items: flex-end;        /* legenda na parte de baixo */
  pointer-events: none;
  z-index: 6;
}

/* faixa sutil no rodapé da foto (sem bordas, full width) */
.gallery-caption::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(10px, 2.6vh, 22px);
  height: clamp(80px, 18vh, 140px);
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* container interno da legenda */
.gallery-caption__inner {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
  padding-inline: var(--side-padding);
  padding-bottom: clamp(26px, 5vw, 48px);
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

/* ====================== TÍTULO DA LEGENDA ====================== */

.caption-title {
  margin: 0 0 clamp(8px, 1.3vw, 10px);
  font-family: "Playfair Display", ui-serif, Georgia, serif;
  font-size: clamp(1.18rem, 2.6vw, 1.72rem);
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 3px 12px rgba(0,0,0,.75);
  letter-spacing: -0.3px;
}

/* tracinho dourado sob o título */
.caption-title::after {
  content: "";
  display: block;
  width: clamp(70px, 10vw, 120px);
  height: 2px;
  margin: clamp(0.6em, 1vw, 0.9em) 0;
  border-radius: 2px;
  background: color-mix(in srgb, var(--gold-500) 80%, var(--sand-50) 20%);
  box-shadow: 0 0 10px rgba(0,0,0,.7);
}

/* ====================== SUBTÍTULO DA LEGENDA ====================== */

.caption-subtitle {
  margin: 0;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(.88rem, 0.9vw + .45rem, 1.05rem);
  line-height: 1.4;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
  font-weight: 300;
  letter-spacing: 0.5px;
}


/* ====== SETAS DOURADAS PURAS (sem fundo, sem blur) ====== */
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;                 /* remove fundo */
  backdrop-filter: none;            /* remove blur */
  box-shadow: none;                 /* remove sombra */
  color: var(--gold-500);           /* seta dourada */
  font-size: clamp(2.2rem, 3vw, 2.8rem);  /* levemente maior, responsivo */
  cursor: pointer;
  z-index: 10;
  padding: 0;                       /* sem área circular */
  transition: transform 0.25s ease, color 0.25s ease;
}

/* posições */
.gallery-arrow.prev { left: clamp(18px, 3vw, 36px); }
.gallery-arrow.next { right: clamp(18px, 3vw, 36px); }

/* hover: seta cresce sutilmente, sem fundo */
.gallery-arrow:hover {
  transform: translateY(-50%) scale(1.18);
  color: color-mix(in srgb, var(--gold-500) 70%, white 30%);
}

/* estado ativo (clicado) com leve retorno */
.gallery-arrow:active {
  transform: translateY(-50%) scale(1.1);
}


/* ================================   INDICADORES   ================================ */

.gallery-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.gallery-dots button {
  width: 28px;
  height: 2px;
  border: 0;
  border-radius: 2px;
  background: rgba(255,255,255,0.35);
  transition: background-color 0.6s ease, transform 0.6s ease;
  cursor: pointer;
}

.gallery-dots button.active {
  background: var(--gold-500);
  transform: scaleX(1.4);
}

/* ================================   RESPONSIVO   ================================ */

@media (max-width: 900px) {
  .casa-gallery {
    height: clamp(56vh, 64vh, 72vh);
  }


  .caption-title {
    bottom: clamp(70px, 11vh, 90px);
    font-size: clamp(1rem, 4vw, 1.35rem);
  }
   .gallery-caption {
    align-items: flex-end;
  }

  .gallery-caption__inner {
    padding-bottom: 0;          /* remove padding extra */
    transform: translateY(-45%); /* sobe o bloco pra metade da faixa escura */
  }

  .caption-title::after {
    margin: 0.45rem 0;
        width: 60px;              /* um pouco menor, mais elegante no mobile */
    height: 1.5px;            /* traço mais fino, tipo gravação */
    opacity: 0.9;   
  }

  .caption-subtitle {
    font-size: 0.8rem;        /* menor que o desktop */
    line-height: 1.45;        /* mantém leitura boa */
    max-width: 88%;  
       
      }
      
}


/* ====================================================== TEXTO + FOTOS – LAYOUT DA CASA ======================================================================= */

.house-layout {
  /* espaço vertical superior e inferior equilibrado com as demais seções */
  padding: clamp(32px, 4vw, 48px) 0 clamp(20px, 3vw, 40px);
  background: transparent;
}

.house-layout__inner {
  /* segue a régua do header e do restante do site */
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
  padding-inline: var(--side-padding);
}

/* grid principal com 2 colunas – texto e imagem na mesma proporção */
.concept-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 54px);
  align-items:flex-start;
}

.concept-grid-photo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 54px);
  align-items:flex-start;
  margin-top: 2.5em;
}

.layout-photo figcaption {
  margin-top: 0.7rem;
  font-family: "Cormorant Garamond", serif; 
  font-size: clamp(.9rem, 1.1vw, 1rem);
  line-height: 1;
  letter-spacing: .03em;
  color: color-mix(in srgb, var(--taupe-600) 65%, var(--ink-900) 35%);
  text-align: center;
  opacity: 0.85;
 }



/* imagem */
.layout-photo {
  width: 100%;                     /* ocupa toda a coluna */
  margin: 0;                       /* 🔹 tira as margens padrão do <figure>  */
  overflow: hidden;
  border-radius: clamp(4px, 0.5vw, 6px); /* curvatura sutil */
isolation: isolate; 
}

/* imagem em si */
.layout-photo img {
  width: 100%;
    height: 100%;    
  height: auto;
  display: block;
   border-radius: inherit; 
  object-fit: cover;
  transition: transform .45s ease, opacity .45s ease;
}

/* hover suave (mantém coerência visual com o resto do site) */
@media (hover: hover) {
  .layout-photo:hover img {
    transform: scale(1.015);
    opacity: 0.97;
  }
}

@media (max-width: 880px) {

  .house-layout__inner {
    padding-inline: 20px;        /* só ajusta o respiro lateral */
    text-align: center;          /* centraliza títulos, etc. */
  }

  /* TEXTO EM 1 COLUNA */
  .concept-grid {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 32px);
    max-width: 40rem;
    margin: 0 auto 1.8rem;       /* centraliza o bloco de texto */
  }

  .concept-text {
    margin: 0 auto;
    text-align: center;         /* continua “texto de revista” */
  }

  /* FOTOS EMPILHADAS E CENTRALIZADAS */
  .concept-grid-photo {
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vw, 28px);
    max-width: 32rem;
    margin: 0 auto;              /* centraliza o bloco de fotos */
  }

  .layout-photo {
    width: 100%;
    max-width: 320px;
    margin-inline: auto;         /* garante que a imagem fique no meio */
  }

  .layout-photo figcaption {
    text-align: center;
  }
}


/*--------------------------------------------------------------------- 6) Materiais & execução --------------------------------------------------------------*/


.materials-card {
  background: color-mix(in srgb, var(--sand-50) 95%, white);
  border: 1px solid color-mix(in srgb, var(--gold-300) 45%, transparent);
  border-radius: clamp(6px, 1vw, 12px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);

  width: min(95%, 960px);
  margin: clamp(32px, 4.8vw, 60px) auto clamp(56px, 7vw, 88px);
   padding: clamp(24px, 3.8vw, 48px) clamp(24px, 4vw, 52px);
}

.materials-card__inner {
  width: 100%;
}

/* Cabeçalho do card */

.materials-header {
  text-align: center;
  margin-bottom: clamp(24px, 3vw, 32px);
}

.materials-kicker {
  font-family: "Libre Caslon Text", "Playfair Display", serif;
  font-weight: 400;
  letter-spacing: 0.12em;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  color: color-mix(in srgb, var(--ink-900) 65%, transparent);
  text-transform: uppercase;
  margin: 0;
}

.materials-divider {
  display: block;
  width: clamp(58px, 8vw, 82px);
  height: 1.4px;
  margin: clamp(14px, 1.8vw, 18px) auto;
  background: linear-gradient(
    to right,
    transparent,
    var(--gold-500),
    transparent
  );
  opacity: .8;
  border-radius: 999px;
}

.materials-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.4fr);
  gap: clamp(24px, 4vw, 40px);
  align-items: start;
}

/* Bloco de texto */

.materials-copy {
   margin: 0;
  font-family: "Lora","Libre Caslon Text",serif;	
font-size: clamp(0.95rem, 1.05vw, 1.03rem); 
  line-height: 1.6;
  color: color-mix(in srgb, var(--ink-900) 50%, transparent); /* 🔹 um pouco mais denso */
  text-align: justify;
  letter-spacing: 0.01em;     /* 🔹 só um respiro, sem lavar o texto */
  font-weight: 400;           /* 🔹 volta pro “normal elegante” */
  text-align: justify; 
}

.materials-copy p {
  margin: 0 0 1.5em;
}

.materials-copy p:last-child {
  margin-bottom: 0;
}

/* Foto + legenda */

.materials-media {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.materials-media img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 5; /* se quiser mais vertical, pode trocar para 3 / 4 */
  object-fit: cover;
  border-radius: clamp(6px, 0.9vw, 12px);
  transition: transform .45s ease;
}

/* Hover sutil, só em desktop */
@media (hover: hover) {
  .materials-media img:hover {
    transform: scale(1.02);
  }
}

.materials-caption {
   font-family: "Cormorant Garamond", serif; 
  font-size: clamp(.9rem, 1.1vw, 1rem);
  line-height: 1;
  letter-spacing: .03em;
   color: color-mix(in srgb, var(--taupe-600) 65%, var(--ink-900) 35%);
  text-align: center;
  opacity: 0.85;
}

/* Mobile / telas menores */

@media (max-width: 880px) {
  .materials-card {
    padding-inline: clamp(18px, 5vw, 28px);
  }

  .materials-layout {
    grid-template-columns: 1fr;
  }

  .materials-media {
    max-width: 420px;
    margin-inline: auto;
  }

  .materials-caption {
    text-align: center;
  }

  .materials-copy {
    text-align: center;
  }
}

/* -----------------------------------------------FINAL TOPICOS CASA FECHAMENTO -------------------------------------------*/

.house-essence-intro {
  text-align: center;
  padding-top: 0; /* 🔹 tira o espaço extra que estava sobrando */
  padding-bottom: clamp(28px, 4vw, 48px); 
  background: none; /* mantém fundo neutro, contínuo com a próxima seção */
}


.house-essence-outro {
  text-align: center;
  padding-top: clamp(32px, 5vw, 56px);  /* 🔹 dá respiro acima */
  padding-bottom: clamp(28px, 3vw, 40px); /* 🔹 prepara pra galeria abaixo */
  background: none;
}

.house-essence {
   padding-block: clamp(26px, 4.2vw, 44px);
  background: color-mix(in srgb, var(--sand-50) 40%, transparent);
   /* border: 1px solid color-mix(
    in srgb,
    var(--gold-500) 55%,
    rgba(255,255,255,.4) 25%
  );  */
}

.house-essence__inner {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
  text-align: center;
}

/* Cabeçalho mais leve que o card de materiais */
.essence-header {
  margin-bottom: clamp(24px, 4vw, 40px);
}


/* filete mais curto e discreto */
.essence-divider {
  display: block;
  width: clamp(46px, 6vw, 64px);
  height: 1.2px;
  margin: clamp(10px, 1.4vw, 14px) auto;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--gold-500) 70%, var(--sand-200) 30%),
    transparent
  );
  opacity: .7;
  border-radius: 999px;
}

.essence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 0.9fr)); /* 🔹 colunas ligeiramente mais estreitas */
  row-gap: clamp(38px, 5vw, 52px);               /* 🔹 mais espaço vertical entre as duas linhas */
  column-gap: clamp(16px, 2vw, 22px);                 /* 🔹 mantém o espaçamento lateral equilibrado */
  text-align: left;
  max-width: 880px;                                   /* 🔹 estreita o conjunto um pouco */
  margin-inline: auto;
}

.essence-item__title {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-variant: small-caps;
  text-transform: none;
  letter-spacing: .06em;
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  line-height: 1.22;
  color: color-mix(in srgb, var(--ink-900) 70%, var(--gold-500) 10%);
  text-align: center;
}

.essence-item__text {
    margin: 1em 0 0; /* 🔹 aproxima visualmente do filete */
  text-wrap: balance;
  hyphens: none;
word-break: keep-all;
overflow-wrap: normal;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-style: normal;
  font-weight: 300;
font-size: clamp(0.84rem, 0.95vw, 0.98rem);
  line-height: 1.5;
  letter-spacing: .015em;
  color: color-mix(in srgb, var(--taupe-600) 60%, var(--ink-900) 40%);
  text-align: center;
}

/* Mobile */
@media (max-width: 880px) {
  .essence-grid {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 40rem;
    margin-inline: auto;
    gap: clamp(18px, 3vw, 26px);
  }

  .essence-item__title {
    margin-top: 1.1em;
    font-size: clamp(1.08rem, 3.6vw, 1.26rem); /* aumento mais leve */
    line-height: 1.24;
  }
}
@media (max-width: 768px) {
  .essence-item__text {
    font-size: clamp(0.9rem, 2.8vw, 1.05rem); /* 🔹 leve aumento */
    line-height: 1.55; /* 🔹 mantém o respiro natural */
  }
}

/* -----------------------------------------------------------GALERIA CASA------------------------------------------------------------- */
.house-gallery {
   padding-block: clamp(36px, 6vw, 60px);
  margin-bottom: 0;
}

.house-gallery__header {
  text-align: center;
  margin-bottom: clamp(18px, 2.6vw, 30px); /* espaço entre o texto e as fotos */
}


.house-gallery-kicker{
   margin-top: 0;
  margin-bottom: 0;
  font-family: "Playfair Display", serif; 		
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.18em;
  font-size: clamp(1.18rem, 2.1vw, 1.42rem);
  color: color-mix(in srgb,
    var(--ink-900) 50%,
    var(--taupe-600) 30%
  );
}
.house-gallery__inner {
  max-width: 1120px;
  margin: 0 auto;
 padding: clamp(22px, 3vw, 30px) clamp(18px, 3vw, 32px);
  background: color-mix(in srgb, var(--sand-100) 30%, transparent);
  border-radius: 16px; /* se quiser 100% quadrado, pode tirar esta linha */
  border: 2px solid color-mix(in srgb, var(--ink-900) 8%, transparent);
  padding-inline: clamp(16px, 4vw, 40px);
}

/* GRID PRINCIPAL (6 fotos) */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

/* CARD */
.gallery-grid a {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,.92);
  box-shadow:
     0 8px 18px rgba(15, 23, 42, 0.10),
    0 0 0 1px color-mix(in srgb, var(--ink-900) 4%, transparent);
}

/* Todas com a mesma proporção (cara de galeria de revista) */
.gallery-grid img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transform: scale(1.03);
  opacity: 0.97;
  transition:
    transform 0.35s ease,
    opacity 0.35s ease,
    filter 0.35s ease;
}

/* Hover sofisticado */
.gallery-grid a:hover img,
.gallery-grid a:focus-visible img {
  transform: scale(1.07);
  opacity: 1;
  filter: contrast(1.06) saturate(1.05);
}

/* Fotos extras só pro lightbox (não aparecem na grade) */
.gallery-hidden {
  display: none;
}

/* RESPONSIVO */
@media (max-width: 960px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .house-gallery {
    padding-block: clamp(28px, 8vw, 40px);
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-grid a {
    border-radius: 16px;
  }
}

/*--------------------------------------TRANSIÇÃO CASA → CONDOMÍNIO--------------------------------------*/

.house-differential {
  position: relative;
  width: 100%;
  background: transparent;
  padding-top: clamp(4px, 0.6vw, 10px);   /* bem perto da galeria */
  padding-bottom: clamp(32px, 5vw, 56px); /* menos vão antes do "CONDOMÍNIO" */
  margin-top: -1.5em;
}

.house-differential__inner {
  max-width: 640px;
  margin: 0 auto;
  padding-inline: clamp(8px, 2.4vw, 20px);
  text-align: center;
}

/* Kicker — mesmo “dialeto” dos outros do site */
.house-differential__kicker {
  margin-top: 0;
  font-family: "Playfair Display", serif;
 font-size: clamp(0.82rem, 0.9vw, 0.95rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-900) 70%, transparent);
  margin-bottom: clamp(26px, 3vw, 34px);
  line-height: 2.3em;
   white-space: nowrap;  
}

.house-differential__kicker::after {
  content: "";
  display: block;
  width: 70px;
  height: 1px;
  margin: 30px auto -2px;
  background: color-mix(in srgb, var(--gold-500) 75%, var(--taupe-600) 25%);
  opacity: 0.7;
}

/* Bloco do texto (manifesto) */
.house-differential__textblock {
  max-width: 560px; /* ↓ mais estreito, leitura mais refinada */
  margin: 0 auto;
}

/* Cada frase como “bloco de pensamento” */
.house-differential__phrase {
    margin: 6px 0;  
  text-wrap: balance;
  hyphens: none;
word-break: keep-all;
overflow-wrap: normal;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-style: normal;
  font-weight: 300;
font-size: clamp(0.9rem, 1.05vw, 1.08rem);
  line-height: 1.5;
  letter-spacing: .015em;
  color: color-mix(in srgb, var(--taupe-600) 75%, var(--ink-900) 40%);
  text-align: center;
}

/* Espaço elegante entre as frases */
.house-differential__phrase + .house-differential__phrase {
  margin-top: 1.4em; /* ↑ mais respiro entre parágrafos */
}

/* Desktop: deixa o kicker em uma linha só */
@media (max-width: 780px) {
  .house-differential {
    padding-top: clamp(28px, 7vw, 40px); 
    padding-bottom: clamp(40px, 6vw, 64px);
  }

  .house-differential__inner {
    padding-inline: clamp(12px, 4vw, 28px);
  }

  /* Kicker mais leve e equilibrado no mobile */
  .house-differential__kicker {
    font-size: clamp(0.68rem, 1.6vw, 0.8rem);
    letter-spacing: 0.1em;
    line-height: 2em;
    margin-bottom: clamp(20px, 3vw, 26px);
    text-align: center;
  }

  /* linha dourada um pouco menor e mais próxima */
  .house-differential__kicker::after {
    width: 54px;
    margin: 22px auto -4px;
    opacity: 0.6;
  }

  /* texto manifesto mais suave e confortável */
  .house-differential__phrase {
    font-size: clamp(0.9rem, 2.8vw, 1.05rem);
    line-height: 1.65;
    letter-spacing: 0.02em;
    margin: 4px 0;
  }

  .house-differential__phrase + .house-differential__phrase {
    margin-top: 1.2em;
  }
}

/*=======================================================================  NOME DO CONDOMINIO inicio =====================================================*/


.transition-band {
  height: 52px;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--sand-100) 22%, transparent) 0%,
    var(--sand-50) 100%
  );
  box-shadow: none; border: 0;
}

.transition-band3 {
  height: 52px;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--sand-100) 22%, transparent) 0%,
    var(--sand-50) 100%
  );
  box-shadow: none; border: 0;
}

.transition-band2 {
   height: 52px;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--sand-100) 22%, transparent) 0%,
    var(--sand-50) 100%
  );
  box-shadow: none; border: 0; 
}

/* ========================================================= BLOCO: NOME DO CONDOMÍNIO =================================================================== */
.condo-intro{
  position: relative;
  width: 100%;
  background: var(--sand-50);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42vh; /* ↓ de 56vh ou 60vh → 48vh deixa o bloco mais compacto */
  isolation: isolate;

  /* sombra sutil inferior */
  box-shadow: inset 0 -2px 6px -4px color-mix(in srgb, var(--gold-500) 35%, transparent);

  /* topo e base bem enxutos */
  padding-block: clamp(0px, 0.4vw, 4px) clamp(16px, 2vw, 24px);
}

/* conteúdo central */
.condo-inner{
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: var(--container);
  padding: 0 24px; /* mínimo necessário para respirAR lateral */
  color: var(--ink-900);
}

/* tipografia */
.condo-subtitle{
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;	
  font-size: clamp(0.78rem, 1.7vw, 0.88rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink-900) 52%, transparent);
  margin-bottom: 10px;
}

.condo-divider{
  display: block;
  width: 64px; height: 1px;
  background: color-mix(in srgb, var(--gold-500) 82%, transparent);
  /* margem única (centralizada) — remove duplicidade */
  margin: clamp(10px, 1.2vw, 14px) auto clamp(12px, 1.6vw, 16px);
}

.condo-title{
  font-family: "Playfair Display", ui-serif, Georgia, serif; 
  font-weight: 700;
  font-size: clamp(2.6rem, 5.6vw, 4.2rem);
  letter-spacing: 0.035em;
  line-height: 1.06;
  color: var(--gold-500);
  margin: 0 0 clamp(10px, 1.2vw, 14px);
}

.condo-phrase{
  font-family: "Lora","Libre Caslon Text",serif;	
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  line-height: 1.6;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink-900) 60%, transparent);
  letter-spacing: 0;
  margin-bottom: clamp(10px, 1.4vw, 16px);
}

.condo-trustline{
  font-family: "Segoe UI", system-ui, sans-serif;
  text-transform: lowercase;
  letter-spacing: 0.075em;
  font-size: clamp(.78rem, 1.6vw, .9rem);
  color: color-mix(in srgb, var(--ink-900) 50%, transparent);
  opacity: .95;
  word-spacing: normal;
}

/* animação suave */
.condo-subtitle,
.condo-divider,
.condo-title,
.condo-phrase,
.condo-trustline{
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 700ms cubic-bezier(.25,.1,.25,1),
    transform 700ms cubic-bezier(.25,.1,.25,1);
}
.condo-intro.is-visible .condo-subtitle{ opacity:1; transform:none; transition-delay: .08s; }
.condo-intro.is-visible .condo-divider { opacity:1; transform:none; transition-delay: .16s; }
.condo-intro.is-visible .condo-title   { opacity:1; transform:none; transition-delay: .28s; }
.condo-intro.is-visible .condo-phrase  { opacity:1; transform:none; transition-delay: .44s; }
.condo-intro.is-visible .condo-trustline{opacity:1; transform:none; transition-delay: .60s; }

/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  .condo-subtitle,
  .condo-divider,
  .condo-title,
  .condo-phrase,
  .condo-trustline{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* mobile — sem sobrescrever com valores fixos */
@media (max-width: 900px){

  .transition-band {
    height: 36px; /* antes 52px – reduz a faixa de transição */
  }

  .condo-intro{
    /* deixa a altura depender do conteúdo */
    min-height: auto;

    /* menos respiro vertical */
    padding-block: clamp(10px, 3vw, 16px) clamp(16px, 4vw, 24px);
  }

  .condo-inner{
    padding-inline: 20px; /* um pouco menos que 24px nas laterais */
  }

  .condo-title{
    font-size: clamp(2.1rem, 7vw, 2.6rem); /* ligeiramente menor no bem estreito */
  }

  .condo-phrase{
    font-size: clamp(0.9rem, 2.6vw, 1.02rem);
    margin-bottom: clamp(8px, 2.4vw, 12px);
  }

  .condo-trustline{
    font-size: clamp(0.76rem, 2.6vw, 0.86rem);
  }
}

/* =================================================== GALERIA CONDOMINIO ======================================================0====================== */
.condo-gallery {
  position: relative;
  width: 100%;
  height: clamp(56vh, 68vh, 80vh);
  overflow: hidden;
  background: var(--sand-50);
  isolation: isolate; /* garante que os fades sobreponham as imagens */
}

/* Fades topo+base harmônicos com o fundo do site (funciona bem no mobile) */
.condo-gallery::before,
.condo-gallery::after{
  content:"";
  position:absolute; left:0; right:0; pointer-events:none; z-index:5;
  height: clamp(18px, 9vw, 44px);
}
.condo-gallery::before{
  top:-1px;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--sand-50) 92%, transparent) 0%,
    transparent 100%
  );
  mix-blend-mode: multiply; /* integra melhor em fotos claras/escuras */
}
.condo-gallery::after{
  bottom:-1px;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--sand-100) 30%, transparent) 0%,
    transparent 100%
  );
}

/* faixa de imagens */
.gallery-track {
  display: flex;
  transition: transform 1s ease;
  height: 100%;
  position: relative;
  z-index: 1;
}
.gallery-track img {
  flex: 0 0 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.96) contrast(1.04);
}



/* marcadores */
.gallery-dots {
  position: absolute; bottom: 18px; left: 50%;
  transform: translateX(-50%); display: flex; gap: 10px; z-index: 10;
}
.gallery-dots span {
  width: 28px; height: 2px;
  background: rgba(255,255,255,0.35);
  transition: background-color 0.6s ease, transform 0.6s ease;
  border-radius: 2px;
}
.gallery-dots span.active { background: var(--gold-500); transform: scaleX(1.4); }

/* ========================================================================= TOPICOS ========================================================================= */

.topics {
    background: transparent;
  /* bem mais compacto */
  padding: clamp(6px, 1vw, 10px) 24px
           clamp(12px, 1.4vw, 18px);
  text-align: center;
}
.topics__inner {
  max-width: 1000px;
  margin-inline: auto;
}
.topics__grid {
   display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* reduz as distâncias entre os cards */
  column-gap: clamp(2px, 0.4vw, 8px);  /* aproxima lateralmente */
  row-gap: clamp(10px, 1.2vw, 16px);  
  justify-items: center;
  align-items: start;
}

/* ITEM base */
.topic{
 position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
   gap: 6px;              /* menos espaço entre ícone, título e descrição */
  max-width: 280px;      /* cards um pouco mais estreitos → visual mais unido */
  padding: 2px 0;  
  color: var(--ink-900,#1A1A18);
  letter-spacing: .01em;
  opacity: 0;
  transform: translateY(12px);
}

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

/* Ícone (herda cor dourada; 3 grupos usam o mesmo estilo) */
.topic__icon{
  width:28px; height:28px; margin-bottom:6px;
  stroke:var(--gold-500,#C2A469); stroke-width:1.45; fill:none;
  stroke-linecap:round; stroke-linejoin:round; opacity:.95;
  transition:transform .25s ease, stroke .25s ease;
}

.topic--wellness .topic__icon {
  stroke-width: 1.6;             /* reforça a presença da onda */
}

.topic:hover .topic__icon{ transform:scale(1.04); stroke:color-mix(in srgb, var(--gold-500) 60%, var(--ink-900) 40%); }

/* Título (mais legível e maior) */
.topic__title-cond{
  margin: 0;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-variant: small-caps;
  text-transform: none;
  letter-spacing: .06em;
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  line-height: 1.22;
  color: color-mix(in srgb, var(--ink-900) 70%, var(--gold-500) 10%);
}
.topic__title:hover{ color:color-mix(in srgb, var(--ink-900) 75%, var(--gold-500) 25%); }


.topics .topic__title-cond::after {
  content: "";
  display: block;
  width: clamp(58px, 8vw, 82px);
  height: 1.4px;
 margin: clamp(8px, 1vw, 10px) auto;
  background: linear-gradient(
    to right,
    transparent,
    var(--gold-500),
    transparent
  );
  opacity: .8;
  transition: opacity .25s ease, transform .25s ease;
}

/* Descrição (um pouco menor) */
.topic__desc-cond{
  margin-top: -4px; 
  margin:  -10px 0 0; /* 🔹 aproxima visualmente do filete */
  text-wrap: balance;
  hyphens: none;
word-break: keep-all;
overflow-wrap: normal;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-style: normal;
  font-weight: 300;
font-size: clamp(0.84rem, 0.95vw, 0.98rem);
  line-height: 1.5;
  letter-spacing: .015em;
  color: color-mix(in srgb, var(--taupe-600) 60%, var(--ink-900) 40%);
  text-align: center;
}

/* Responsivo */
@media (max-width:980px){ 
  .topics__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

@media (max-width:640px){ 
  .topics__grid{ grid-template-columns:1fr; } }

/* Acessibilidade */
@media (prefers-reduced-motion:reduce){
  .topic{ opacity:1!important; transform:none!important; animation:none!important; }
}
@media (max-width: 640px) {
  .topic {
    margin-bottom: -8px; /* aproxima verticalmente sem alterar nada mais */
  }
}
@media (max-width: 768px) {
  .topic__desc-cond {
    font-size: clamp(0.9rem, 2.8vw, 1.05rem); /* 🔹 leve aumento */
    line-height: 1.55; /* 🔹 mantém o respiro natural */
  }
}
@media (max-width: 768px) {
  .topic__title-cond {
    font-size: clamp(1.08rem, 3.6vw, 1.26rem); /* aumento mais leve */
    line-height: 1.24;
  }
}



/* ========================= PRAIA INTRO ========================= */

.praia-intro {
  position: relative;
  background: var(--sand-50);
  color: color-mix(in srgb, var(--ink-900) 85%, transparent);
  text-align: center;
  isolation: isolate;

  /* encosta na seção anterior, mas ainda dá respiro */
  margin-top: -6px;
  padding: clamp(24px, 4vw, 40px) 24px clamp(24px, 4vw, 40px);
}

.praia-intro__inner {
  max-width: 660px;
  margin-inline: auto;
  text-align: left;
}

/* “Peró, Cabo Frio” */
.praia-intro__kicker {
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.05em;
  font-size: clamp(0.92rem, 1.4vw, 1.1rem);
  color: color-mix(in srgb, var(--ink-900) 60%, var(--gold-500) 10%);
  margin-bottom: clamp(4px, 0.8vw, 8px);
}

/* Título “Entorno que inspira o projeto” */
.praia-intro__title {
 text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem); /* 🔹 menor pra caber numa linha */
  line-height: 1.22;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--ink-900) 55%, var(--taupe-700) 10%); /* 🔹 cinza mais claro, mais elegante */
  text-transform: uppercase;
  text-wrap: balance;
  margin: clamp(14px, 1.6vw, 20px) 0;
  max-width: 800px; /* 🔹 evita quebra em telas grandes */
  position: relative;
  padding-top: clamp(10px, 1.2vw, 16px);

}

/* filete dourado sob o kicker, antes do título */
.praia-intro__title::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(44px, 6vw, 72px);
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    color-mix(in srgb, var(--gold-500) 88%, #fff 12%) 18%,
    color-mix(in srgb, var(--gold-500) 88%, #fff 12%) 82%,
    transparent 100%
  );
  opacity: 0.9;
}

/* lead – primeiro parágrafo (localização) */
.praia-intro__lead {
  font-family: "Lora", "Libre Caslon Text", serif;
  font-style: italic;
  font-size: clamp(1.02rem, 1.9vw, 1.18rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink-900) 60%, transparent);
  max-width: 580px;
  margin: clamp(18px, 2vw, 24px) auto 1.6em;
  text-align: center;
}

/* parágrafos seguintes */
.praia-intro p:not(.praia-intro__lead) {
  font-family: "Lora", "Libre Caslon Text", serif;
  font-size: clamp(0.98rem, 1.8vw, 1.1rem);
  line-height: 1.75;
  letter-spacing: 0.01em;
 color: color-mix(in srgb, var(--ink-900) 60%, transparent);
  margin: 0 0 1.4em;
  text-align: justify;
  text-align-last: left;
   font-weight: 400;   
}

/* bandeira azul – nunca quebra no meio e ganha leve destaque */
.sc-azul {
  white-space: nowrap;
  font-family: "Playfair Display", "Cormorant Garamond", serif;
  font-weight: 600;
  font-style: oblique 6deg;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--ink-900) 88%, var(--gold-500) 12%);
}

/* parágrafo de destaque final */
.praia-intro__highlight {
  font-style: normal;
  color: color-mix(in srgb, var(--ink-900) 80%, transparent);
}

@media (max-width: 768px) {
  .praia-intro__title {
    font-size: clamp(0.92rem, 3.4vw, 1.1rem);
  }
  .praia-intro__lead {
    line-height: 1.55; /* antes era 1.8 — fica mais compacto e elegante */
  }
    .praia-intro p:not(.praia-intro__lead) {
    text-align: center;
    text-align-last: center; /* garante que a última linha também fique centralizada */
  }
    .praia-intro__title {
    letter-spacing: 0.04em; /* menos espaçamento entre letras */
    line-height: 1.15;      /* aproxima as linhas sem colar */
  }
}


/* ===================== TRANSIÇÃO PRA FOTO ====================== */

.praia-transition {
  position: relative;
  height: 30px;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--sand-50) 90%, transparent) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

.praia-transition::after {
  content: "";
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(40px, 6vw, 72px);
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    color-mix(in srgb, var(--gold-500) 88%, #fff 12%) 50%,
    transparent 100%
  );
  opacity: 0.9;
}

/* ========================================================================= FOTO PRAIA DO PERÓ ======================================================== */

.pero-hero {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: hidden;
  isolation: isolate;
}

.pero-image {
  position: absolute;
  inset: 0;
  background-image: url("praiapero.jpg"); /* ajuste o caminho se precisar */
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  transform: scale(1.02);
  transition: transform 15s ease;
  filter: brightness(0.96) contrast(1.04) saturate(1.05);
}

.photo-credit {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  box-sizing: border-box;

  /* fundo translúcido, colado na base */
  background: color-mix(in srgb, white 25%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  /* tipografia leve */
  font-family: "Inter", "Segoe UI", sans-serif;
  font-size: clamp(0.72rem, 0.8vw, 0.82rem);
  font-weight: 300;
  color: rgba(0, 0, 0, 0.72);
  text-align: center;

  /* padding justo — mais fino pra colar no limite */
  padding: 4px 16px 6px;
  border-top: 0.4px solid rgba(255, 255, 255, 0.4);

  /* sombra e microdetalhe */
  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.04);
  letter-spacing: 0.01em;
  line-height: 1.4;

  /* garante que realmente encoste no fim da imagem */
  pointer-events: none;
}

.pero-hero:hover .pero-image {
  transform: scale(1.06);
}

/* véu leve pra dar profundidade */
.pero-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.06) 100%
  );
}

@media (max-width: 900px) {
  .pero-hero {
    height: 60vh;
  }
}
@media (max-width: 768px) {
  .photo-credit {
    font-size: clamp(0.65rem, 2.5vw, 0.74rem); /* texto mais delicado */
    padding: 2px 10px 4px;                    /* menos altura */
    background: color-mix(in srgb, white 18%, transparent); /* véu mais leve */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    line-height: 1.3;                         /* compacta o bloco */
  }
}
@media (max-width: 768px) {
  .pero-image {
    background-position: 10% 65%; /* mostra mais o lado esquerdo, como na segunda imagem */
  }
}


/* ======================= TEXTO PERÓ ============================ */

.pero-connection {
  position: relative;
  background: transparent;
  color: color-mix(in srgb, var(--ink-900) 86%, transparent);
  padding: clamp(18px, 2vw, 32px) 24px clamp(28px, 4vw, 48px);
  isolation: isolate;
}

.pero-connection__inner {
  max-width: 660px;
  margin-inline: auto;
  text-align: left;
}


/* Kicker “A energia do lugar” */
.pero-connection__kicker {
  font-family: "Playfair Display", serif; 
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.06em;
  text-align: center;
  font-size: clamp(0.95rem, 1.6vw, 1.12rem);
  color: color-mix(in srgb, var(--ink-900) 65%, var(--gold-500) 12%);
  margin-bottom: clamp(14px, 2vw, 20px);
}

/* texto corrido */
.pero-connection__inner p {
  font-family: "Lora", "Libre Caslon Text", serif;
  font-size: clamp(1.02rem, 1.9vw, 1.18rem);
   line-height: 1.75;
  letter-spacing: 0.01em;
   color: color-mix(in srgb, var(--ink-900) 60%, transparent);
  margin: 0 0 1.4em;
  text-align: justify;
  text-align-last: left;
   font-weight: 400;  
} 

/* filete de pausa */
.pero-connection__divider {
  width: clamp(44px, 6vw, 72px);
  height: 1px;
  border: none;
  margin: clamp(20px, 3vw, 30px) auto;
  background: linear-gradient(
    to right,
    transparent 0%,
    color-mix(in srgb, var(--gold-500) 88%, #fff 12%) 50%,
    transparent 100%
  );
  opacity: 0.9;
}

/* frase final destacada */
.pero-connection__highlight {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  text-align: center;
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: color-mix(in srgb, var(--ink-900) 90%, var(--gold-500) 8%);
  margin-top: clamp(18px, 3vw, 26px);
   text-align: justify;
  text-align-last: center !important;
margin-bottom: clamp(8px, 1vw, 14px);
}

@media (max-width: 768px) {
  .pero-connection {
    padding: clamp(20px, 5vw, 28px) 20px clamp(30px, 6vw, 40px);
  }

  .pero-connection__inner {
    max-width: 620px;
    text-align: center;
  }

  .pero-connection__kicker {
    font-size: clamp(0.9rem, 3.2vw, 1.02rem);
    margin-bottom: clamp(10px, 2.4vw, 16px);
  }

  /* texto corrido centralizado no mobile */
  .pero-connection__inner p {
    text-align: center;
    text-align-last: center;
    line-height: 1.7;              /* levemente mais compacto */
    margin: 0 0 1.1em;
  }

  /* filete mantém o respiro mas um pouco menor */
  .pero-connection__divider {
    margin: clamp(16px, 3vw, 24px) auto;
  }

  /* frase final já era destaque, aqui só garantimos centralização plena */
  .pero-connection__highlight {
    text-align: center;
    text-align-last: center !important;
    margin-top: clamp(16px, 3vw, 22px);
    margin-bottom: clamp(8px, 2.4vw, 14px);
    line-height: 1.35; 
  }
}

/* ===================================================   SEÇÃO MARCA AURUM (ajustada)   ============================================================ */

.aurum-brand {
  position: relative;
  background: var(--sand-50, #f7f1e8);
  padding: clamp(20px, 4vw, 48px) 24px clamp(48px, 6vw, 72px);
  color: color-mix(in srgb, var(--ink-900, #1a1a18) 65%, transparent);
  isolation: isolate;
}

/* fade suave ligando com a seção anterior */
.aurum-brand::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(18px, 3vw, 28px);
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(247,241,232,0) 0%,
    color-mix(in srgb, var(--sand-100) 55%, transparent) 100%
  );
}

.aurum-brand__inner {
  max-width: 660px;            /* 🔹 mesma largura do restante do site */
  margin-inline: auto;
}

/* kicker pequeno e leve */
.aurum-brand__kicker {
  display: block;
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.18em;
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  color: color-mix(in srgb, var(--ink-900) 55%, var(--taupe-700) 45%);
  margin-bottom: clamp(6px, 0.9vw, 10px);
  opacity: 0.9;
}

/* filete dourado discreto */
.aurum-brand__divider {
 display:block;
  width: clamp(58px, 7vw, 96px);
  height: 1px;
  margin: clamp(14px, 1.5vw, 18px) auto clamp(18px, 2vw, 22px);
  background: linear-gradient(to right, transparent, var(--gold-500), transparent);
  opacity:.7;
}

/* título – um pouco menor e mais suave */
.aurum-brand__title {
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: clamp(1.45rem, 2.5vw, 1.9rem); /* 🔹 -10% */
  line-height: 1.50;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--ink-900) 70%, var(--gold-500) 10%);
  margin: 0 0 clamp(18px, 2.2vw, 24px);
  text-wrap: balance;

}

/* lead – itálico, central */
.aurum-brand__lead {
  font-family: "Lora", "Libre Caslon Text", serif;
  font-style: italic;
  font-size: clamp(1.02rem, 1.9vw, 1.16rem);
  line-height: 1.75;
  color: color-mix(in srgb, var(--ink-900) 70%, var(--taupe-700) 30%);
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(18px, 2.2vw, 26px);
  letter-spacing: 0.06em; 
}

/* corpo editorial – alinhado à esquerda */
.aurum-brand__text {
  max-width: 640px;
  margin-inline: auto;
  text-align: left;
}

.aurum-brand__text p {
  font-family: "Lora", "Libre Caslon Text", serif;
  font-size: clamp(1.02rem, 1.9vw, 1.18rem);
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--ink-900) 72%, var(--taupe-700) 22%);
  margin: 0 0 1.3em;
  text-align: justify;
  text-align-last: left;
}

/* assinatura – fecho da seção */
.aurum-brand__signature {
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.14em;
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  color: color-mix(in srgb, var(--ink-900) 68%, var(--gold-500) 18%);
  margin-top: clamp(16px, 2vw, 22px);
}

/* cláusula / contrato */
.aurum-disclaimer {
  max-width: 660px;
  margin: clamp(22px, 2.6vw, 30px) auto 0;

  border-top: 1px solid color-mix(in srgb, var(--taupe-400) 45%, transparent);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: clamp(0.8rem, 0.9vw, 0.9rem);
  line-height: 1.6;
  color: color-mix(in srgb, var(--ink-900) 70%, var(--taupe-700) 30%);
  text-align: justify;
  text-align-last: left;
  opacity: 0.9;
}

/* ===================== AJUSTES MOBILE – MARCA AURUM ===================== */
@media (max-width: 768px) {

  .aurum-brand {
    padding: clamp(20px, 5vw, 28px) 20px clamp(30px, 6vw, 40px);
  }

  .aurum-brand__inner {
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
  }

  /* kicker – acompanha a lógica da seção anterior */
  .aurum-brand__kicker {
    font-size: clamp(0.9rem, 3.2vw, 1.02rem);
    margin-bottom: clamp(10px, 2.4vw, 16px);
    text-align: center;
  }

  .aurum-brand__divider {
    margin: clamp(16px, 3vw, 24px) auto;
  }

  .aurum-brand__title {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
    line-height: 1.45;
    margin-block: clamp(18px, 3vw, 24px);
    text-align: center;
  }

  /* lead itálico – centralizado, com respiro parecido com a seção anterior */
  .aurum-brand__lead {
    font-size: clamp(1.02rem, 2.2vw, 1.16rem);
    line-height: 1.7;
    letter-spacing: 0.05em;
    text-align: center;
    text-align-last: center;
    margin: 0 0 1.1em;
  }

  .aurum-brand__text {
    max-width: 620px;
    margin-inline: auto;
  }

  /* corpo editorial – centralizado pra seguir o bloco anterior */
  .aurum-brand__text p {
    font-size: clamp(1.02rem, 2.2vw, 1.16rem);
    line-height: 1.7;
    letter-spacing: 0.01em;
    text-align: center;
    text-align-last: center;
    margin: 0 0 1.1em;
  }

  .aurum-brand__signature {
    letter-spacing: 0.12em;
    font-size: clamp(0.9rem, 3.2vw, 1.02rem);
    margin-top: clamp(16px, 3vw, 22px);
    text-align: center;
  }

  /* cláusula – mantém leitura mais técnica/justificada */
  .aurum-disclaimer {
    max-width: 620px;
    margin: clamp(22px, 2.6vw, 30px) auto 0;
    padding-top: 0.75em;                 /* respiro depois da linha */
    font-size: clamp(0.83rem, 2.2vw, 0.93rem);
    line-height: 1.5;
    text-align: justify;                    /* sai o justify no mobile */
    text-align-last: left;
  }
}


/* ====================== PREÇO & CONDIÇÕES (VERSÃO AJUSTADA) ====================== */
.pricing{
  position: relative;
  background: var(--sand-50);
  color: color-mix(in srgb, var(--ink-900, #1a1a18) 65%, transparent);
  text-align: center;
  isolation: isolate;
  margin-top: -4px;
  /* 🔹 padding lateral zerado para alinhar com o container, como no header */
  padding-block: clamp(28px, 4.5vw, 56px);
}

/* véu sutil no topo */
.pricing::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: clamp(16px, 2.4vw, 24px);
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--sand-100) 10%, transparent) 0%,
    rgba(0,0,0,0) 100%
  );
}

/* 🔹 Mesma lógica de “container” do site/header */
.pricing__inner{
  max-width: 1120px;              /* aproxima da largura do header */
  margin-inline: auto;
  padding-inline: 24px;           /* mesmo recuo lateral que o resto do site */
}

/* Kicker */
.pricing__kicker{
  display:inline-block;
  font-family: "Cormorant Garamond", serif;
  font-variant: small-caps;
  letter-spacing: 0.18em;
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  color: color-mix(in srgb, var(--ink-900) 52%, var(--taupe-700) 48%);
  opacity:.9;
  margin-bottom: clamp(6px, 0.9vw, 10px);
}

/* Título refinado */
.pricing__title{
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: clamp(1.45rem, 2.5vw, 1.9rem);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--ink-900) 70%, var(--gold-500) 10%);
  margin: 0 0 clamp(18px, 2.2vw, 24px);
  text-wrap: balance;
}

/* filete dourado – com respiro levemente maior */
.pricing__divider{
  display:block;
  width: clamp(58px, 7vw, 96px);
  height: 1px;
  margin: clamp(14px, 1.5vw, 18px) auto clamp(22px, 2.4vw, 26px);
  background: linear-gradient(to right, transparent, var(--gold-500), transparent);
  opacity:.7;
}

/* Grid base */
.pricing__grid{
  margin: clamp(18px, 2.2vw, 26px) auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.4vw, 24px);
  max-width: 100%;                /* 🔹 usa toda a largura do container, como o header */
  text-align: left;
}

/* Layout desktop */
@media (min-width: 820px){
  .pricing__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(36px, 4vw, 52px);
    row-gap: clamp(20px, 2.6vw, 26px);
  }

  /* linha 1 */
  .pricing__item:nth-child(1){ grid-column: 1 / 2; } /* Valor */
  .pricing__item:nth-child(2){ grid-column: 2 / 3; } /* Condições */

  /* linha 2 */
  .pricing__item:nth-child(3){ grid-column: 1 / 2; } /* Documentação */
  .pricing__item:nth-child(4){ grid-column: 2 / 3; } /* Visitas */

  /* linha 3 – ocupa as duas colunas */
  .pricing__item:nth-child(5){ grid-column: 1 / 3; } /* Propostas */
}

/* Itens */
.pricing__item{
  background: transparent;
  border-radius: 16px;
  padding: clamp(6px, .8vw, 10px) 0;
}

/* 🔹 Destaque sutil para o bloco do VALOR (1º item) */
.pricing__item:nth-child(1){
  background: color-mix(in srgb, var(--sand-100) 78%, #fff 22%);
  padding: clamp(10px, 1.2vw, 14px) clamp(14px, 1.8vw, 18px);
  box-shadow:
    0 10px 26px -22px rgba(0,0,0,0.35),
    0 0 0 1px color-mix(in srgb, var(--sand-200) 60%, transparent);
}

/* Label */
.pricing__label{
  font-family: var(--sans, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  font-size: clamp(.78rem, 1vw, .9rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-900) 42%, var(--taupe-700) 40%);
  margin: 0 0 8px;
  font-weight: 500;
}

/* Valor */
.pricing__value{
  font-family: var(--serif, "Libre Caslon Text","Lora","Playfair Display",serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.3vw, 1.7rem);
  line-height: 1.25;
  margin: 0;
  color: color-mix(in srgb, var(--ink-900) 88%, transparent);
}

/* Nota do valor */
.pricing__note{
  margin: 4px 0 0;
  font-family: "Lora", "Libre Caslon Text", serif;
  font-style: italic;
  font-size: clamp(0.8rem, 0.95vw, 0.9rem);
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink-900) 58%, transparent);
}

/* Texto */
.pricing__text{
  margin: 0;
  font-family: "Lora", "Libre Caslon Text", serif;
  font-size: clamp(1.02rem, 1.9vw, 1.16rem);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--ink-900, #1a1a18) 65%, transparent);
  text-align: justify;
}

/* ajuste fino pós-Aurum */
.aurum-brand + .pricing{
  margin-top: clamp(6px, 1vw, 12px);
}
/* ====================== PREÇO & CONDIÇÕES – MOBILE ====================== */
@media (max-width: 768px) {

  .pricing {
    padding-block: clamp(24px, 6vw, 36px);
  }

  .pricing__inner {
    max-width: 620px;        /* mesma lógica das outras seções editoriais */
    padding-inline: 20px;
    text-align: center;
  }

  .pricing__grid {
    grid-template-columns: 1fr;
    gap: clamp(16px, 4vw, 22px);
    text-align: center;      /* centraliza o conteúdo dos itens */
  }

  .pricing__item {
    padding: clamp(8px, 2.4vw, 12px) 0;
  }

  /* card do valor centralizado e um tiquinho mais compacto */
  .pricing__item:nth-child(1) {
    margin-inline: auto;
    padding-inline: clamp(14px, 4vw, 18px);
  }

  .pricing__text {
    text-align: center;
    text-align-last: center;
  }

  .pricing__note {
    font-size: clamp(0.78rem, 3vw, 0.9rem);
    line-height: 1.4;
  }
}
/* Rodapé legal / aviso de canal oficial */
.pricing__legal{
    max-width: 1120px;              /* mesmo limite do header e da seção */
  margin-inline: auto;            /* centraliza dentro do container geral */
  padding-inline: 24px;  
  justify-content: center; 

  padding-top: clamp(10px, 1.6vw, 16px); /* 🔹 separa visualmente do texto acima */
}

.pricing__legal-text{
  margin: 0;
  font-family: var(--sans, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
 font-size: clamp(0.7rem, 0.85vw, 0.82rem); /* menor que o texto principal */
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  color: color-mix(in srgb, var(--ink-900) 52%, var(--taupe-700) 32%);
  opacity: .9;
  white-space: nowrap; 
 
}

/* ajuste fino mobile */
@media (max-width: 768px){
  .pricing__legal{
    margin-top: clamp(18px, 4vw, 24px);
    padding-inline: 10px;
  }

  .pricing__legal-text {
    font-size: clamp(0.72rem, 2.6vw, 0.82rem);
    line-height: 1.4;
    letter-spacing: 0.05em;
    white-space: normal; /* ✅ permite quebrar no mobile */
    overflow-wrap: break-word;
    text-wrap: balance;
  }
}


/* ====================== CORRETORA RESPONSÁVEL — VERSÃO REFINADA ====================== */

.broker {
  position: relative;
  padding-block: clamp(28px, 5vw, 60px) clamp(44px, 6vw, 70px);
  color: color-mix(in srgb, var(--ink-900, #1a1a18) 65%, transparent);
  background: color-mix(in srgb, var(--sand-100) 80%, #fff 20%);
  isolation: isolate;
}

/* véu sutil separando da seção anterior */
.broker::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(16px, 2.4vw, 24px);
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), transparent 75%);
  mix-blend-mode: multiply;
}

/* container alinhado ao padrão global */
.broker__inner {
  max-width: 1120px;
  padding-inline: 24px;
  margin-inline: auto;
  display: grid;
  gap: clamp(22px, 3vw, 36px);
  align-items: start;
}

@media (min-width: 880px) {
  .broker__inner {
    grid-template-columns: 1.2fr 0.9fr;
  }
}

/* ====================== COLUNA ESQUERDA ====================== */

.broker__copy {
  max-width: 30rem;
}

/* Kicker — agora no mesmo tom e proporção do “Preço & Condições” */
.broker-kicker {
  font-family: "Cormorant Garamond", serif;
  font-variant: small-caps;
  letter-spacing: 0.16em;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  margin: 0 0 clamp(6px, 1.2vw, 10px);
  color: color-mix(in srgb, var(--ink-900) 55%, var(--taupe-700) 45%);
  opacity: 0.9;
}

/* Título */
.broker__title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
 font-size: clamp(1.28rem, 2.2vw, 1.68rem);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--ink-900) 70%, var(--gold-500) 10%);
  margin: 0 0 clamp(14px, 2vw, 20px);
  text-wrap: balance;
  white-space: nowrap;
}

/* Lead — tom editorial e ritmo mais solto */
.broker__lead {
  font-family: "Lora", "Libre Caslon Text", serif;
  font-size: clamp(1.02rem, 1.9vw, 1.16rem);
  line-height: 1.65;
  letter-spacing: 0.01em;
 color: color-mix(in srgb, var(--ink-900, #1a1a18) 65%, transparent);
  margin: 0 0 clamp(14px, 2vw, 20px);
  text-align: left;
}

.broker__lead--small {
  font-size: 0.92rem;
  opacity: 0.9;
  margin: 0;
}

/* ====================== COLUNA DIREITA — CARTÃO ====================== */

.broker__panel {
  width: 100%;
}

.broker__card {
  background: color-mix(in srgb, #fff 82%, var(--sand-50) 18%);
  border-radius: 16px;
  padding: clamp(16px, 2.1vw, 24px) clamp(20px, 2.6vw, 30px);
  display: grid;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--gold-500) 45%, transparent);
  box-shadow:
    0 18px 40px rgba(70, 63, 58, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* Labels dentro do cartão */
.broker__label {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.21em;
  text-transform: uppercase;
  margin: 0 0 0.25rem;
  color: color-mix(in srgb, var(--taupe-600) 65%, var(--ink-800) 35%);
  text-align: center;
}

.broker__label--sub {
  margin-top: 1em;
  margin-bottom: 0;
}

/* linhas de contato */
.broker__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  font-size: 0.95rem;
  margin-block: 0;
}

.broker__field {
  font-weight: 500;
  color: color-mix(in srgb, var(--ink-800) 90%, var(--taupe-600) 10%);
}

.broker__value {
  font-weight: 400;
  text-decoration: none;
  color: color-mix(in srgb, var(--ink-800) 86%, var(--taupe-600) 14%);
  white-space: nowrap;
}

.broker__value:hover {
  text-decoration: underline;
}

/* divisor */
.broker__divider {
  border: 0;
  height: 1px;
  width: 60%;
  margin: 12px auto;
  background: linear-gradient(
    to right,
    transparent 0%,
    color-mix(in srgb, var(--gold-500) 30%, transparent) 10%,
    color-mix(in srgb, var(--gold-500) 80%, #fff 15%) 50%,
    color-mix(in srgb, var(--gold-500) 30%, transparent) 90%,
    transparent 100%
  );
  opacity: 0.9;
}

/* assinatura da corretora */
.broker__name {
  font-family: "Cormorant Garamond", serif;
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0.2rem 0 0.1rem;
  text-align: center;
}

.broker__creci {
  margin: -0.15em 0 0.3rem;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-700) 82%, var(--taupe-600) 18%);
  text-align: center;
}

.broker__tagline {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  font-style: italic;
  color: color-mix(in srgb, var(--ink-700) 78%, var(--taupe-600) 22%);
  text-align: center;
}

/* ====================== MOBILE ====================== */
@media (max-width: 879px) {
  .broker__inner {
    grid-template-columns: 1fr;
    gap: clamp(20px, 5vw, 26px);
    text-align: center;
  }

  .broker__lead {
    text-align: center;
    text-align-last: center;
  }

  .broker__row {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .broker__value {
    white-space: normal;
  }
}
/* ====================== CORRETORA RESPONSÁVEL — MOBILE ====================== */
@media (max-width: 768px) {

  .broker {
    padding-block: clamp(24px, 6vw, 36px) clamp(48px, 10vw, 64px);
  }

  .broker__inner {
    grid-template-columns: 1fr;
    max-width: 620px;
    padding-inline: 20px;          /* recuo igual dos dois lados */
    margin-inline: auto;
    gap: clamp(18px, 4.6vw, 24px);
    text-align: center;
  }

  .broker__copy {
    max-width: none;
  }

  .broker-kicker {
    text-align: center;
    margin-bottom: clamp(8px, 2.4vw, 12px);
  }

  .broker__title {
    text-align: center;
    white-space: normal;
    font-size: clamp(1.2rem, 4.6vw, 1.5rem);
    line-height: 1.4;
    margin-bottom: clamp(12px, 2.4vw, 18px);
  }

  .broker__lead {
    text-align: center;
    text-align-last: center;
    font-size: clamp(0.98rem, 3.2vw, 1.08rem);
    line-height: 1.65;
    margin-bottom: clamp(10px, 2.4vw, 16px);
  }

  .broker__lead--small {
    text-align: center;
    text-align-last: center;
    font-size: 0.9rem;
  }

  /* 🔹 garante que o card fique sempre centralizado */
  .broker__panel {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .broker__card {
    width: 100%;
    max-width: 380px;              /* menorzinho no mobile */
    margin: clamp(8px, 2.4vw, 12px) auto clamp(20px, 6vw, 32px);
    padding: clamp(12px, 3.6vw, 18px) clamp(16px, 4vw, 22px);
    border-radius: 14px;
    box-shadow:
      0 10px 28px rgba(70, 63, 58, 0.14),
      0 0 0 1px rgba(255, 255, 255, 0.6);
  }

  .broker__label {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    margin-bottom: 0.25rem;
  }

  .broker__row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 0.9rem;
  }

  .broker__field,
  .broker__value {
    text-align: center;
  }

  .broker__value {
    white-space: normal;
  }

  .broker__name {
    font-size: 0.95rem;
  }

  .broker__creci {
    font-size: 0.8rem;
  }

  .broker__tagline {
    font-size: 0.86rem;
    line-height: 1.5;
  }
}


/* ====================== RODAPÉ FIXO TRANSLÚCIDO ====================== */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  background: color-mix(in srgb, var(--sand-50) 75%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  border-top: 1px solid var(--line);
  color: color-mix(in srgb, var(--ink-900,#1a1a1a) 80%, transparent);
  font-family: "Inter", sans-serif;
  font-size: clamp(0.7rem, 0.8vw, 0.78rem);
  letter-spacing: 0.02em;
  line-height: 1.1;
  height: clamp(28px, 4vh, 38px);
  display: flex;
  align-items: center;
  padding-inline: var(--side-padding);     /* respeita o mesmo recuo lateral do header */
}

body {
  padding-bottom: clamp(32px, 5vh, 42px);  /* evita que o conteúdo seja coberto */
}

.footer__inner {
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;          /* um à esquerda, outro à direita */
  align-items: center;
}

.footer__brand, .footer__note {
  margin: 0;
  white-space: nowrap;
}

.footer__brand strong {
  font-family: var(--serif, "Libre Caslon Text", "Lora", "Playfair Display", serif);
  font-weight: 500;
  color: color-mix(in srgb, var(--ink-900,#1a1a1a) 92%, transparent);
}

.footer__note {
  opacity: 0.8;
  font-size: clamp(0.68rem, 0.8vw, 0.75rem);
  text-align: right;
}


/* utilitário de acessibilidade (caso precise) */
.visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }


/* ====================== FOOTER – AJUSTES MOBILE ====================== */
@media (max-width: 768px) {

  .footer {
    font-size: 0.66rem;
    line-height: 1.2;
    height: auto;
    padding-block: 3px 5px;     /* bem mais compacto */
    padding-inline: 14px;
    background: color-mix(in srgb, var(--sand-50) 82%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--gold-500) 22%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .footer__inner {
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 0;                     /* elimina o espaçamento entre linhas */
  }

  .footer__brand,
  .footer__note {
    text-align: center;
    white-space: normal;
    margin: 0;
    line-height: 1.2;
  }

  .footer__brand {
    font-size: 0.68rem;
    opacity: 0.92;
    letter-spacing: 0.03em;
    font-weight: 400;
  }

  .footer__note {
    font-size: 0.6rem;
    opacity: 0.75;
    margin-top: 1px;
  }

  /* reduz folga inferior global */
  body {
    padding-bottom: clamp(26px, 5vh, 38px);
  }
}






/* ---------------------------------------------------------  BOTAO CTA -------------------------------------------------------------*/


@media (max-width: 768px) {
  .wa-cta {
    display: flex;
    flex-direction: column;
    gap: 6px;

    /* mais respiro no conjunto */
    margin: 18px 22px 6px;
    padding: 18px 18px 14px;

    /* bordas mais suaves e orgânicas */
    border-radius: 18px;

    /* fundo mais “creme” e menos vidro duro */
    background: color-mix(in srgb, var(--sand-50) 90%, #ffffff 10%);
    backdrop-filter: blur(3px);

    /* borda quase sumida, só sugerida */
    border: 1px solid color-mix(in srgb, var(--taupe-200) 45%, transparent 55%);

    /* sombra bem leve, difusa */
    box-shadow: 0 10px 24px -20px rgba(0, 0, 0, 0.35);

    text-align: center;
  }

  .wa-cta__text {
    margin: 0 14px 4px;
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
    text-transform: none;
    letter-spacing: 0.01em;
    color: color-mix(in srgb, var(--ink-900) 70%, var(--taupe-700) 30%);
    opacity: 0.92;
    text-wrap: balance;
  }

  .wa-cta__btn {
    margin-top: 6px;
    align-self: center;
    padding: 6px 18px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #25d366 28%, var(--taupe-700) 72%);
    background: linear-gradient(
      135deg,
      color-mix(in srgb, #25d366 18%, var(--sand-100) 82%),
      color-mix(in srgb, #128c7e 16%, var(--sand-100) 84%)
    );
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 10px -10px rgba(0, 0, 0, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.065em;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    transition: transform 0.12s ease-out, opacity 0.12s ease-out;
  }

  .wa-cta__btn:active {
    transform: translateY(1px) scale(0.985);
    opacity: 0.88;
  }

  .wa-cta:last-of-type {
    margin-top: -30px;
    margin-bottom: 24px;
  }
}


@media (max-width: 768px) {
  .wa-cta:last-of-type {
    margin-top: -30px; /* sobe um pouco pra encaixar */
    margin-bottom: 24px; /* empurra o conteúdo abaixo */
  }
}

 /* ---------------------------------------------BLOQUEIA FOTOS E CONTEUDO -------------------------------------------------------------*/

img {
  -webkit-user-drag: none;      /* Chrome, Safari */
  -webkit-touch-callout: none;  /* bloqueia menu ao tocar no iOS */
  -moz-user-select: none;       /* Firefox */
  -webkit-user-select: none;    /* Safari / Chrome */
  user-select: none;            /* padrão */
  pointer-events: auto;         /* mantém clique normal */
}

img[draggable="false"] {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Impede arrastar imagens da galeria e do Lightbox */
img,
.lb-image {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}