/* =========================================================
   STAY COWORKING — Design System 2026
   Paleta institucional: amarelo #FDBA12 · alaranjado #ED631B
   · branco #FFFFFF · cinza 50% somente em textos
   Verde #25D366 exclusivo dos CTAs diretos de WhatsApp.
   ========================================================= */

:root{
  /* Marca — apenas as duas cores originais, sem variações escurecidas */
  --brand:        #ED631B;   /* alaranjado institucional */
  --brand-mid:    #ED631B;
  --brand-deep:   #ED631B;
  --brand-ink:    #ED631B;
  --brand-light:  #FF8442;
  --brand-soft:   #FDF0E7;

  --accent:       #FDBA12;   /* amarelo institucional — reservado ao header/CTAs */
  --accent-dark:  #FDBA12;
  /* Preenchimentos claros: cinza, não mais amarelo claro */
  --accent-soft:  #F1F0EE;
  --accent-tint:  #F8F8F6;

  /* Cinza — apenas texto */
  --text:         #767676;   /* corpo */
  --text-strong:  #6B6B6B;
  --muted:        #8A8A8A;   /* secundário */

  /* Superfícies */
  --surface:      #FFFFFF;
  --surface-2:    #F8F8F6;
  --surface-3:    #F1F0EE;
  --line:         #E7E5E2;
  --line-2:       #EFEDEA;

  --wa:           #25D366;   /* verde institucional do WhatsApp */
  --wa-dark:      #1EB955;

  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Sombras neutras (preto, não laranja) — um tom colorido de sombra lida
     como traçado alaranjado sutil ao redor de cards claros. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04);
  --shadow:    0 4px 12px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.08), 0 24px 64px rgba(0,0,0,.12);
  --shadow-brand: 0 8px 24px rgba(237,99,27,.28);

  --container: 1200px;
  --nav-h: 76px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 24px); }
body{
  margin:0; font-family:var(--font); color:var(--text);
  background:var(--surface); line-height:1.62; font-size:17px;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; line-height:1.14; letter-spacing:-.025em; font-weight:800; color:var(--brand-deep); }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
b,strong{ color:var(--text-strong); }
:focus-visible{ outline:3px solid var(--text-strong); outline-offset:3px; border-radius:6px; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.section{ padding:96px 0; }
.section--tight{ padding:64px 0; }
.section--alt{ background:var(--surface-2); }
/* Seção "Tudo incluso" — fundo alaranjado institucional; título e olho de
   texto precisam virar branco/amarelo aqui, senão somem no laranja. */
.section--brand{ background:var(--brand); }
.section--brand .eyebrow{ color:var(--accent); }
.section--brand .eyebrow::before{ background:var(--accent); }
.section--brand h2{ color:#fff; }

/* Fundo amarelo institucional — usado em seções de destaque específicas
   (ex.: "Vantagem exclusiva"). Texto solto no fundo troca pra laranja,
   que rende contraste melhor que o cinza padrão sobre amarelo. */
.section--accent{ background:var(--accent); }
.section--accent .lead,
.section--accent .tiny{ color:var(--brand); }
.section--accent .checklist p{ color:#fff; }
.section--accent .checklist p b{ color:#fff; }

.stack-xs>*+*{ margin-top:8px; }
.stack-sm>*+*{ margin-top:16px; }
.stack>*+*{ margin-top:24px; }
.center{ text-align:center; }
.grid{ display:grid; gap:24px; }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }

/* ---------- Tipografia ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand);
}
.eyebrow::before{ content:''; width:22px; height:2px; background:var(--brand); border-radius:2px; }

.h-display{ font-size:clamp(2.5rem,6vw,4.4rem); font-weight:800; letter-spacing:-.035em; }
.h1{ font-size:clamp(2.1rem,4.4vw,3.3rem); }
.h2{ font-size:clamp(1.85rem,3.4vw,2.7rem); text-wrap:balance; }
.h3{ font-size:clamp(1.25rem,2vw,1.6rem); }
.h4{ font-size:1.1rem; font-weight:800; }

.lead{ font-size:clamp(1.05rem,1.6vw,1.18rem); color:var(--text); }
.small{ font-size:.9rem; }
.tiny{ font-size:.8rem; color:var(--muted); }
.hl{ color:var(--accent); }
.hl-mark{ background:linear-gradient(180deg,transparent 58%,var(--accent) 58%); padding:0 .08em; }
.section-head{ max-width:720px; }
.section-head.center{ margin-inline:auto; }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:var(--r-pill); border:2px solid transparent;
  font-weight:800; font-size:.95rem; letter-spacing:-.01em; cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:19px; height:19px; flex:none; }

.btn--primary{ background:var(--brand); color:#fff; box-shadow:var(--shadow-brand); }
.btn--primary:hover{ background:var(--brand-deep); box-shadow:0 12px 30px rgba(237,99,27,.36); }

/* Verde institucional do WhatsApp — todos os CTAs de contato direto */
.btn--whats,
.btn--wa{ background:var(--wa); color:#fff; box-shadow:0 8px 24px rgba(37,211,102,.34); }
.btn--whats:hover,
.btn--wa:hover{ background:var(--wa-dark); }

.btn--ghost{ background:#fff; color:var(--brand-deep); box-shadow:var(--shadow-sm); }
.btn--ghost:hover{ box-shadow:var(--shadow-brand); background:var(--brand); color:#fff; }

.btn--light{ background:#fff; color:var(--brand-deep); }
.btn--light:hover{ background:var(--accent-soft); }

.btn--outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn--outline-light:hover{ border-color:#fff; background:rgba(255,255,255,.14); }

.btn--sm{ padding:11px 19px; font-size:.85rem; }
.btn--lg{ padding:18px 34px; font-size:1.02rem; }
.btn--block{ width:100%; }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }
.btn-row.center{ justify-content:center; }

.link-arrow{ display:inline-flex; align-items:center; gap:7px; font-weight:800; color:var(--brand); font-size:.94rem; }
.link-arrow svg{ width:16px; height:16px; transition:transform .2s var(--ease); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* ---------- Chips ---------- */
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:var(--r-pill);
  background:var(--surface-3); font-size:.82rem; font-weight:700; color:var(--brand-ink);
}
.chip--brand{ background:var(--brand-soft); color:var(--brand-deep); }
.chip--accent{ background:var(--accent-soft); color:var(--brand-ink); }
.chip svg{ width:15px; height:15px; }

.badge-pop{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--brand); color:#fff; padding:6px 18px; border-radius:var(--r-pill);
  font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
}

/* =========================================================
   TOPBAR — alaranjado
   ========================================================= */
.topbar{ background:#fff; color:var(--brand); font-size:.8rem; font-weight:600; border-bottom:1px solid var(--line); }
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:40px; }
.topbar__left{ display:flex; align-items:center; gap:22px; }
/* nowrap: sem isso o texto quebra no meio ("(62) 99148-" / "6262") quando
   a tela é estreita ou o aparelho está com fonte ampliada. */
.topbar a{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; transition:opacity .2s; }
.topbar a:hover{ opacity:.7; }
.topbar svg{ width:15px; height:15px; }
.topbar__right{ display:flex; align-items:center; gap:18px; }
.topbar__sep{ width:1px; height:16px; background:var(--line); }

/* =========================================================
   HEADER — amarelo institucional + marca original
   ========================================================= */
.header{
  position:sticky; top:0; z-index:100;
  background:var(--accent);
  transition:box-shadow .25s, background-color .25s, backdrop-filter .25s;
  /* sem overflow:hidden — recortaria o dropdown de unidades */
}
/* Ao rolar, o header ganha um leve efeito de vidro — moderniza a barra fixa
   sem perder o amarelo institucional por trás do blur. */
.header.is-stuck{
  background:rgba(253,186,18,.86); backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 4px 24px rgba(0,0,0,.14);
}
.header__in{ display:flex; align-items:center; gap:20px; min-height:var(--nav-h); }

/* Marca original — PNG exibido inteiro, sem recorte */
.brand{ display:flex; align-items:center; flex:none; }
.brand__logo{ height:46px; width:auto; display:block; }

/* Navegação — sempre em uma linha, texto branco */
.nav{ display:flex; align-items:center; gap:2px; margin-left:auto; flex-wrap:nowrap; }
.nav a{
  padding:9px 12px; border-radius:var(--r-pill);
  font-size:.82rem; font-weight:800; letter-spacing:-.01em;
  color:#fff; white-space:nowrap; transition:.2s;
}
.nav a:hover{ background:rgba(255,255,255,.3); }
.nav a.is-current{ background:var(--brand); color:#fff; }

.header__cta{ display:flex; align-items:center; gap:9px; flex:none; }

.burger{
  display:none; width:42px; height:42px; border-radius:12px;
  border:0; background:var(--brand);
  cursor:pointer; align-items:center; justify-content:center; flex:none;
}
.burger span{ display:block; width:18px; height:2px; background:#fff; border-radius:2px; position:relative; transition:.25s var(--ease); }
.burger span::before,.burger span::after{ content:''; position:absolute; left:0; width:18px; height:2px; background:#fff; border-radius:2px; transition:.25s var(--ease); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger.is-open span{ background:transparent; }
.burger.is-open span::before{ top:0; transform:rotate(45deg); }
.burger.is-open span::after{ top:0; transform:rotate(-45deg); }

/* =========================================================
   SELETOR DE UNIDADE — pílula alaranjada
   ========================================================= */
.unit{ position:relative; }
.unit__btn{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--brand-mid); border:0; color:#fff;
  padding:9px 15px; border-radius:var(--r-pill);
  font-size:.82rem; font-weight:800; cursor:pointer; transition:.2s; white-space:nowrap;
}
.unit__btn:hover{ background:var(--brand-deep); }
.unit__btn .pin{ width:14px; height:14px; color:var(--accent); flex:none; }
.unit__btn .caret{ width:12px; height:12px; transition:transform .25s var(--ease); flex:none; }
.unit__btn[aria-expanded="true"] .caret{ transform:rotate(180deg); }

.unit__menu{
  position:absolute; top:calc(100% + 10px); right:0; z-index:120;
  width:320px; background:#fff; color:var(--text);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg); border:0;
  padding:8px; opacity:0; visibility:hidden; transform:translateY(-8px);
  /* visibility comuta na hora ao abrir e só depois da saída ao fechar —
     animá-la junto pelo atalho deixava o menu preso em estado invisível */
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
}
.unit__menu.is-open{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s;
}
.unit__menu-title{
  padding:10px 12px 8px; font-size:.68rem; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
}
.unit__opt{
  display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left;
  padding:13px; border-radius:var(--r); background:transparent; border:0; cursor:pointer;
  transition:background .18s; font-family:inherit;
}
.unit__opt:hover{ background:var(--accent-tint); }
.unit__opt[aria-disabled="true"]{ opacity:.8; }
.unit__opt-ico{
  width:38px; height:38px; flex:none; border-radius:12px;
  background:var(--accent-soft); color:var(--brand); display:grid; place-items:center;
}
.unit__opt-ico svg{ width:19px; height:19px; }
.unit__opt-name{ font-weight:800; font-size:.95rem; color:var(--brand-deep); display:flex; align-items:center; gap:8px; }
.unit__opt-desc{ font-size:.8rem; color:var(--text); line-height:1.45; margin-top:2px; }
.unit__opt.is-active .unit__opt-ico{ background:var(--brand); color:#fff; }
.unit__tag{
  font-size:.6rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 8px; border-radius:var(--r-pill); background:var(--brand); color:#fff;
}
.unit__tag--soon{ background:var(--surface-3); color:var(--muted); }
.unit__check{ margin-left:auto; width:18px; height:18px; color:var(--brand); flex:none; }

/* Seletor no menu mobile */
.mobile-nav .unit{ margin:20px 0 8px; }
.mobile-nav .unit__btn{ width:100%; justify-content:center; padding:15px; font-size:.95rem; }
.mobile-nav .unit__menu{
  position:static; width:100%; opacity:1; visibility:visible; transform:none;
  box-shadow:none; margin-top:10px; display:none;
}
.mobile-nav .unit__menu.is-open{ display:block; }

/* =========================================================
   MENU MOBILE
   ========================================================= */
.mobile-nav{
  position:fixed; inset:0; z-index:99; background:#fff;
  padding:calc(var(--nav-h) + 20px) 24px 40px; overflow-y:auto;
  transform:translateX(100%); transition:transform .3s var(--ease); visibility:hidden;
}
.mobile-nav.is-open{ transform:translateX(0); visibility:visible; }
/* :not(.btn) — sem isso, esta regra (mais específica que .btn--whats)
   pintava de laranja o texto do botão de WhatsApp lá embaixo no menu. */
.mobile-nav > a:not(.btn){
  display:block; padding:16px 0; font-size:1.15rem; font-weight:800;
  color:var(--brand-deep); border-bottom:1px solid var(--line);
}
.mobile-nav .btn{ margin-top:12px; }

/* =========================================================
   HERO — alaranjado
   ========================================================= */
.hero{ position:relative; overflow:hidden; color:#fff; background:var(--brand); }
.hero__bg{
  position:absolute; inset:0;
  background-image:url('../img/fachada-hero.jpg');
  background-size:cover; background-position:center 30%;
  opacity:.48; filter:brightness(.76);
}
/* Unidade Sul: mesma hero, fachada diferente. */
.hero--sul .hero__bg{ background-image:url('../img/sul/fachada-sul.jpg'); }
/* Véu ainda mais transparente — a fachada precisa aparecer com clareza,
   o gradiente só garante contraste mínimo para o texto em cima. */
.hero__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 540px at 84% 6%, rgba(253,186,18,.28), transparent 60%),
    linear-gradient(180deg, rgba(237,99,27,.46) 0%, rgba(194,76,13,.6) 100%);
}
/* padding-block (não o shorthand padding) para não zerar o padding-inline
   herdado de .container — bug real que colava o hero na borda da tela. */
.hero__in{ position:relative; padding-block:84px 92px; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
/* Sombra sutil: com o véu mais transparente, a fachada colorida some por
   trás do texto branco sem esse reforço de legibilidade. */
.hero h1{ color:#fff; margin:20px 0 22px; }
.hero .eyebrow{ color:var(--accent); }
.hero .eyebrow::before{ background:var(--accent); }
.hero__sub{ font-size:clamp(1.05rem,1.7vw,1.2rem); color:rgba(255,255,255,.95); max-width:56ch; }
.hero .btn-row{ margin-top:34px; }

.hero__trust{ margin-top:38px; display:flex; flex-wrap:wrap; gap:12px; }
.hero__trust .chip{ background:rgba(255,255,255,.18); color:#fff; }
.hero__trust .chip svg{ color:var(--accent); }

.hero__card{ background:#fff; border-radius:var(--r-xl); padding:32px; box-shadow:var(--shadow-lg); position:relative; }
.hero__card h3{ font-size:1.3rem; }

.field{ display:block; }
.field+.field{ margin-top:13px; }
.field span{ display:block; font-size:.78rem; font-weight:800; color:var(--brand-deep); margin-bottom:6px; }
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border-radius:var(--r-sm); border:0;
  background:var(--surface-2); box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); font-size:.95rem;
  color:var(--text-strong); transition:.2s;
}
.field input::placeholder{ color:var(--muted); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; background:#fff;
  box-shadow:inset 0 0 0 1.5px var(--text-strong), 0 0 0 4px rgba(107,107,107,.14);
}
.field select{
  appearance:none; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C24C0D' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
}

/* =========================================================
   PROVA SOCIAL — amarelo
   ========================================================= */
.proof{ background:var(--brand); padding:34px 0; }
/* flex + centralização: com grid de colunas fixas, um número diferente de
   itens (4 no Sul, 5 no Oeste) sobrava coluna vazia e desalinhava o bloco —
   flex com justify-content:center se ajusta a qualquer quantidade de itens. */
.proof__in{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px 56px; text-align:center; }
.proof__n{ font-size:clamp(2.1rem,4vw,2.8rem); font-weight:800; color:#fff; letter-spacing:-.03em; line-height:1; }
.proof__l{ font-size:.86rem; color:rgba(255,255,255,.92); margin-top:9px; font-weight:700; }

/* =========================================================
   CARDS
   ========================================================= */
.card{
  background:#fff; border:0; border-radius:var(--r-lg); padding:30px; box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.card__ico{ width:52px; height:52px; border-radius:15px; display:grid; place-items:center; background:var(--accent-soft); color:var(--brand); margin-bottom:18px; }
.card__ico svg{ width:25px; height:25px; }
.card h3{ font-size:1.12rem; margin-bottom:9px; }
.card p{ color:var(--text); font-size:.95rem; }

/* ---------- Planos ---------- */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:start; }
.plan{
  position:relative; background:#fff; border:0; border-radius:var(--r-xl); box-shadow:var(--shadow-sm);
  padding:34px 30px; display:flex; flex-direction:column; gap:22px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.plan:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
/* Sem traçado: o destaque vem só de uma sombra mais forte, não de contorno. */
.plan--featured{ box-shadow:var(--shadow); }
.plan__name{ font-size:1.18rem; font-weight:800; color:var(--brand-deep); }
.plan__desc{ font-size:.88rem; color:var(--text); margin-top:5px; }
.plan__price{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; color:var(--brand-deep); }
.plan__price b{ font-size:2.4rem; font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--brand-deep); }
.plan__price .cur{ font-size:1.1rem; font-weight:800; }
.plan__price .per{ font-size:.9rem; color:var(--muted); font-weight:700; }
.plan__list{ display:grid; gap:11px; }
.plan__list li{ display:flex; gap:10px; align-items:flex-start; font-size:.92rem; color:var(--text); }
.plan__list svg{ width:18px; height:18px; flex:none; color:var(--brand); margin-top:2px; }
.plan .btn{ margin-top:auto; }
.plan__hr{ height:1px; background:var(--line); }

/* ---------- Destaques principais (Endereço Fiscal, Sala de Reunião, Sala Privativa) ----------
   Precisam pesar mais que os cards de estação: ícone maior, preço em
   destaque, CTA como botão cheio — sem nenhum traçado alaranjado, só
   sombra e o selo (preenchido, não é contorno) marcam a prioridade #1. */
.spots{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:stretch; }
.spot{
  position:relative; background:#fff; border:0; border-radius:var(--r-xl); box-shadow:var(--shadow-sm);
  padding:38px 32px; display:flex; flex-direction:column; gap:14px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.spot:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.spot--top{ box-shadow:var(--shadow); }
.spot__ico{
  width:60px; height:60px; border-radius:18px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--brand); margin-bottom:6px;
}
.spot__ico svg{ width:29px; height:29px; }
.spot__price{ display:flex; align-items:baseline; gap:5px; color:var(--brand-deep); }
.spot__price b{ font-size:2rem; font-weight:800; letter-spacing:-.03em; line-height:1; }
.spot__price .cur{ font-size:1rem; font-weight:800; }
.spot__price .per{ font-size:.85rem; color:var(--muted); font-weight:700; }
.spot h3{ font-size:1.2rem; }
.spot p{ color:var(--text); font-size:.94rem; flex:1; }
.spot .btn{ margin-top:auto; }
.spot__flag{ font-size:.86rem; font-weight:800; color:var(--brand-deep); }

/* ---------- Espaços (cards) ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:40px; }
.filter{
  padding:11px 22px; border-radius:var(--r-pill); border:0; box-shadow:var(--shadow-sm);
  background:#fff; font-weight:700; font-size:.88rem; cursor:pointer; transition:.2s; color:var(--brand-deep);
}
.filter:hover{ box-shadow:var(--shadow); }
.filter.is-active{ background:var(--brand); color:#fff; box-shadow:var(--shadow-brand); }

.spaces{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.space{
  background:#fff; border:0; border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.space:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.space__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--surface-3); }
.space__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.space:hover .space__media img{ transform:scale(1.06); }
.space__cap{
  position:absolute; top:14px; left:14px; z-index:2;
  background:var(--brand); color:#fff;
  padding:6px 13px; border-radius:var(--r-pill); font-size:.76rem; font-weight:800;
  display:inline-flex; align-items:center; gap:6px;
}
.space__cap svg{ width:14px; height:14px; }
.space__body{ padding:26px; display:flex; flex-direction:column; gap:16px; flex:1; }
.space__body h3{ font-size:1.18rem; }
.space__price{ display:flex; align-items:baseline; gap:5px; flex-wrap:wrap; }
.space__price b{ font-size:1.6rem; font-weight:800; letter-spacing:-.03em; color:var(--brand); }
.space__price span{ font-size:.85rem; color:var(--muted); font-weight:700; }
.space__feats{ display:flex; flex-wrap:wrap; gap:7px; }
.space__feats li{ font-size:.76rem; padding:5px 11px; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--text-strong); font-weight:600; }
.space .btn{ margin-top:auto; }

/* ---------- Lista de espaços ---------- */
.spaces-list{ display:grid; gap:92px; }
.is-hidden{ display:none !important; }

.pricebox{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:18px 22px; border:0; border-radius:var(--r); box-shadow:var(--shadow-sm);
  background:#fff; transition:.2s var(--ease);
}
.pricebox:hover{ box-shadow:var(--shadow); }
.pricebox b{ display:block; font-size:1rem; color:var(--brand-deep); }
.pricebox span{ display:block; font-size:.82rem; color:var(--text); margin-top:3px; line-height:1.4; }
.pricebox strong{ font-size:1.32rem; font-weight:800; letter-spacing:-.03em; white-space:nowrap; color:var(--brand-deep); }
.pricebox strong em{ font-style:normal; font-size:.8rem; color:var(--muted); font-weight:700; }
.pricebox--hi{ background:var(--brand-soft); box-shadow:var(--shadow); }

.pack{ background:var(--accent-soft); border:0; border-radius:var(--r); padding:20px 22px; }
.pack>b{ display:block; font-size:.78rem; letter-spacing:.11em; text-transform:uppercase; color:var(--brand-ink); margin-bottom:12px; }
.pack__row{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:9px 0; border-bottom:1px solid var(--line); }
.pack__row:last-of-type{ border-bottom:0; }
.pack__row span{ font-size:.92rem; color:var(--text-strong); }
.pack__row em{ font-style:normal; font-size:.78rem; color:var(--muted); display:block; }
.pack__row strong{ font-size:1.05rem; color:var(--brand-deep); white-space:nowrap; }
.pack .tiny{ margin-top:10px; }

/* ---------- Tabela de preços ---------- */
.table-wrap{ overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-sm); }
.ptable{ width:100%; border-collapse:collapse; min-width:640px; }
.ptable th{ text-align:left; padding:18px 22px; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--brand); }
.ptable td{ padding:17px 22px; border-top:1px solid var(--line-2); font-size:.94rem; color:var(--text); }
.ptable td b{ color:var(--brand-deep); }
.ptable tbody tr:hover{ background:var(--accent-tint); }
.ptable td.v{ font-weight:800; color:var(--brand-deep); white-space:nowrap; }

/* ---------- Galeria ---------- */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gallery button{ padding:0; border:0; background:var(--surface-3); cursor:zoom-in; border-radius:var(--r); overflow:hidden; aspect-ratio:1; position:relative; }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.gallery button:hover img{ transform:scale(1.07); }

.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(92,35,3,.96); display:grid; place-items:center; padding:32px; opacity:0; visibility:hidden; transition:.25s; }
.lightbox.is-open{ opacity:1; visibility:visible; }
/* 100% (não 92vw): vw ignora o padding do .lightbox, então a imagem
   ficava mais larga que a área útil e vazava para fora da tela. */
.lightbox img{ max-width:min(1100px,100%); max-height:86vh; object-fit:contain; border-radius:var(--r); }
.lightbox__close{ position:absolute; top:24px; right:24px; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.18); border:0; color:#fff; cursor:pointer; display:grid; place-items:center; }
.lightbox__close svg{ width:22px; height:22px; }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.18); border:0; color:#fff; cursor:pointer; display:grid; place-items:center; }
.lightbox__nav:hover{ background:var(--brand); }
.lightbox__nav svg{ width:24px; height:24px; }
.lightbox__nav.prev{ left:24px; } .lightbox__nav.next{ right:24px; }

/* ---------- Split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split--rev .split__media{ order:2; }
.split__media{ position:relative; }
.split__media > img{ width:100%; border-radius:var(--r-xl); box-shadow:var(--shadow-lg); }
.split__media .gallery{ grid-template-columns:repeat(2,1fr); }

.checklist{ display:grid; gap:15px; }
.checklist li{ display:flex; gap:13px; align-items:flex-start; }
.checklist svg{ width:22px; height:22px; flex:none; color:var(--brand); margin-top:2px; }
.checklist b{ display:block; margin-bottom:2px; color:var(--brand-deep); }
.checklist p{ color:var(--text); font-size:.93rem; }

/* ---------- Amenidades ---------- */
/* flex + centralização (não grid de colunas fixas): com um número de itens
   que não é múltiplo de 6, a última linha sobrava com colunas vazias à
   direita — flex-wrap com justify-content:center fecha a linha no centro. */
.amen{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.amen li{ flex:0 0 calc((100% - 80px) / 6); background:#fff; border:0; box-shadow:var(--shadow-sm); border-radius:var(--r); padding:22px 14px; text-align:center; transition:.22s var(--ease); }
.amen li:hover{ background:var(--accent-soft); box-shadow:var(--shadow); transform:translateY(-3px); }
.amen svg{ width:26px; height:26px; margin:0 auto 11px; color:var(--brand); }
.amen img{ width:26px; height:26px; margin:0 auto 11px; display:block; object-fit:contain; }
.amen span{ font-size:.83rem; font-weight:700; line-height:1.35; display:block; color:var(--brand-deep); }

/* ---------- Condição destacada ---------- */
.cond{ color:var(--muted); font-weight:600; }

.aviso{
  display:flex; align-items:flex-start; gap:18px;
  max-width:820px; margin:32px auto 0;
  background:var(--accent-soft); border:0; box-shadow:var(--shadow-sm);
  border-radius:var(--r-lg); padding:24px 28px;
}
.aviso__ico{
  width:44px; height:44px; flex:none; border-radius:14px;
  background:var(--brand); color:#fff; display:grid; place-items:center;
}
.aviso__ico svg{ width:22px; height:22px; }
.aviso p{ font-size:.93rem; color:var(--text); }
.aviso b{ display:block; margin-bottom:5px; color:var(--brand); font-size:.97rem; }

/* ---------- Callout ---------- */
.callout{
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  background:var(--accent-soft); border:0; box-shadow:var(--shadow-sm);
  border-radius:var(--r-xl); padding:34px 38px;
}
.callout p{ color:var(--text); max-width:62ch; }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin-inline:auto; display:grid; gap:12px; }
.faq__item{ background:#fff; border:0; box-shadow:var(--shadow-sm); border-radius:var(--r); overflow:hidden; transition:box-shadow .2s; }
.faq__item.is-open{ box-shadow:var(--shadow); }
.faq__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 26px; background:transparent; border:0; cursor:pointer; text-align:left; font-weight:800; font-size:1rem; color:var(--brand-deep); }
.faq__q svg{ width:20px; height:20px; flex:none; color:var(--brand); transition:transform .25s var(--ease); }
.faq__item.is-open .faq__q svg{ transform:rotate(45deg); }
.faq__a{ max-height:0; overflow:hidden; transition:max-height .32s var(--ease); }
.faq__a > div{ padding:0 26px 24px; color:var(--text); font-size:.95rem; }

/* ---------- Avaliações Google ---------- */
.rating{
  display:grid; grid-template-columns:auto 1fr; gap:44px; align-items:center;
  background:#fff; border:0; border-radius:var(--r-xl); padding:44px 48px;
  box-shadow:var(--shadow);
}
.rating__score{ text-align:center; }
.rating__n{ font-size:4.2rem; font-weight:800; line-height:1; letter-spacing:-.05em; color:var(--brand-deep); }
.rating__stars{ display:flex; gap:4px; justify-content:center; color:var(--accent); margin:12px 0 8px; }
.rating__stars svg{ width:24px; height:24px; }
.rating__count{ font-size:.85rem; color:var(--muted); font-weight:700; }
.rating__quote{ font-size:clamp(1.15rem,2vw,1.5rem); font-weight:700; color:var(--brand-deep); line-height:1.4; }
.rating__src{ margin-top:14px; font-size:.85rem; color:var(--muted); }
.rating__cta{ margin-top:24px; }
.g-logo{ display:inline-flex; align-items:center; gap:8px; font-weight:800; color:var(--brand); }

/* Badge "G" — em vez de um SVG multicolorido reproduzindo o logo do Google
   (frágil: qualquer erro de transcrição das curvas Bézier distorce o ícone),
   um círculo simples com a letra. Formato impossível de deformar. */
.g-logo__badge{
  width:22px; height:22px; border-radius:50%; flex:none;
  background:#fff; border:0; box-shadow:var(--shadow-sm);
  display:grid; place-items:center;
}
.g-logo__badge svg{ width:15px; height:15px; }

/* ---------- Carrossel de avaliações ---------- */
.revs{ position:relative; margin-top:40px; }
.revs__head{ margin-bottom:22px; }

/* Setas nas laterais dos cards: ficam dentro de .revs__viewport, que reserva
   uma faixa de cada lado para elas não sobrepor o conteúdo dos cards. */
.revs__viewport{ position:relative; padding-inline:58px; }
.revs__btn{
  position:absolute; top:50%; margin-top:-24px; z-index:5;
  width:48px; height:48px; border-radius:50%; border:0;
  background:#fff; color:var(--brand); cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--shadow-sm);
  transition:background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.revs__btn.prev{ left:0; }
.revs__btn.next{ right:0; }
.revs__btn:hover:not(:disabled){ background:var(--brand); color:#fff; box-shadow:var(--shadow); transform:translateY(-2px); }
.revs__btn:disabled{ opacity:.3; cursor:default; box-shadow:none; }
.revs__btn svg{ width:22px; height:22px; }

/* .revs__track é a "janela" (mask) — .revs__rail é o trilho que desliza
   por dentro dela via transform, com transição própria (animação de slide). */
.revs__track{ overflow:hidden; }
.revs__rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 48px) / 3); gap:24px;
  transition:transform .5s cubic-bezier(.65,0,.35,1);
  will-change:transform;
}

.rev{
  background:#fff; border:0; box-shadow:var(--shadow-sm);
  border-radius:var(--r-lg); padding:30px; display:flex; flex-direction:column; gap:16px;
  transition:box-shadow .25s var(--ease);
}
.rev:hover{ box-shadow:var(--shadow-lg); }
.rev__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rev__stars{ display:flex; gap:3px; color:var(--accent); }
.rev__stars svg{ width:17px; height:17px; }
.rev__g{
  width:22px; height:22px; flex:none; border-radius:50%;
  background:#fff; border:0; box-shadow:var(--shadow-sm);
  display:grid; place-items:center;
}
.rev__g svg{ width:15px; height:15px; }
.rev__txt{ color:var(--text); font-size:.95rem; }
.rev__who{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:6px; }
.rev__av{
  width:42px; height:42px; border-radius:50%; background:var(--brand); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:.9rem; flex:none;
}
.rev__av--img{ object-fit:cover; }
.rev__who b{ display:block; font-size:.9rem; color:var(--brand); }
.rev__who a:hover b{ text-decoration:underline; }
.rev__who span{ font-size:.78rem; color:var(--muted); }
.rev__txt{ display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; overflow:hidden; }

.revs__dots{ display:flex; gap:8px; justify-content:center; margin-top:26px; }
.revs__dot{
  width:9px; height:9px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:var(--line); transition:.2s;
}
.revs__dot.is-active{ background:var(--brand); width:26px; border-radius:var(--r-pill); }

.revs__empty{
  border:0; box-shadow:var(--shadow-sm); border-radius:var(--r-lg);
  padding:40px 32px; text-align:center; background:var(--accent-tint);
}
.revs__empty p{ color:var(--text); }
.revs__empty[hidden]{ display:none; }
.revs__viewport[hidden],.revs__dots[hidden]{ display:none; }

/* ---------- CTA ---------- */
.cta{ position:relative; overflow:hidden; background:var(--brand); color:#fff; border-radius:var(--r-xl); padding:66px 56px; }
.cta::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(720px 420px at 90% 8%, rgba(253,186,18,.6), transparent 62%);
}
.cta__in{ position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
.cta h2{ color:#fff; margin-bottom:16px; }
.cta p{ color:rgba(255,255,255,.94); }
.cta .eyebrow{ color:var(--accent); }
.cta .eyebrow::before{ background:var(--accent); }

/* ---------- Localização ---------- */
.map-wrap{ border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); }
.map-wrap iframe{ width:100%; height:420px; border:0; display:block; }
.info-list{ display:grid; gap:20px; }
.info-list li{ display:flex; gap:15px; align-items:flex-start; }
.info-list .ico{ width:46px; height:46px; border-radius:14px; background:var(--accent-soft); color:var(--brand); display:grid; place-items:center; flex:none; }
.info-list .ico svg{ width:21px; height:21px; }
.info-list b{ display:block; font-size:.95rem; color:var(--brand-deep); }
.info-list span{ color:var(--text); font-size:.93rem; }

/* ---------- Hero de página interna ---------- */
.phero{ background:var(--brand); color:#fff; position:relative; overflow:hidden; }
/* Banner da página de Endereço Fiscal e Comercial — imagem própria por
   trás de um degradê laranja translúcido, só para garantir a leitura do
   texto branco em cima. */
.phero--ef{
  background-image:linear-gradient(180deg, rgba(237,99,27,.6) 0%, rgba(194,76,13,.8) 100%), url('../img/banner-ef.jpg');
  background-size:cover; background-position:center 55%;
}
/* Banner da página de Planos & Espaços — mesmo tratamento do banner de
   Endereço Fiscal: imagem própria com degradê translúcido por cima. */
.phero--salas{
  background-image:linear-gradient(180deg, rgba(237,99,27,.6) 0%, rgba(194,76,13,.8) 100%), url('../img/banner-salas.jpg');
  background-size:cover; background-position:center 55%;
}
.phero::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(840px 460px at 86% 2%, rgba(253,186,18,.55), transparent 60%);
}
.phero__in{ position:relative; padding-block:72px 80px; max-width:760px; }
.phero .eyebrow{ color:var(--accent); }
.phero .eyebrow::before{ background:var(--accent); }
.phero h1{ color:#fff; margin:18px 0 18px; }
.phero p{ color:rgba(255,255,255,.94); font-size:1.08rem; }
.crumbs{ display:flex; gap:9px; align-items:center; font-size:.82rem; color:rgba(255,255,255,.8); margin-bottom:20px; }
.crumbs a:hover{ color:var(--accent); }

/* =========================================================
   FOOTER — alaranjado
   ========================================================= */
.footer{ background:var(--brand); color:rgba(255,255,255,.94); padding:72px 0 0; font-size:.92rem; }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:44px; padding-bottom:52px; }
.footer h4{ color:var(--accent); font-size:.8rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:20px; }
.footer a{ transition:color .2s; }
.footer a:hover{ color:var(--accent); }
.footer__links{ display:grid; gap:11px; }
/* Sobre o rodapé alaranjado, a marca é reproduzida em branco */
.footer__logo{ height:44px; width:auto; filter:brightness(0) invert(1); margin-bottom:20px; }
.footer__social{ display:flex; gap:11px; margin-top:22px; }
.footer__social a{ width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.18); display:grid; place-items:center; color:#fff; transition:.2s; }
.footer__social a:hover{ background:var(--accent); color:var(--brand-ink); transform:translateY(-2px); }
.footer__social svg{ width:18px; height:18px; }
.footer__bar{ border-top:1px solid rgba(255,255,255,.28); padding:26px 0; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.83rem; }
.footer__units{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.footer__unit{ padding:5px 12px; border-radius:var(--r-pill); background:#fff; font-size:.76rem; font-weight:800; color:var(--brand); }
.footer__unit.is-soon{ background:rgba(255,255,255,.2); color:#fff; }
.footer .btn--outline-light{ border-color:rgba(255,255,255,.6); }

/* =========================================================
   FLUTUANTES
   ========================================================= */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:60px; height:60px; border-radius:50%; background:var(--wa); color:#fff;
  display:grid; place-items:center; box-shadow:0 8px 28px rgba(37,211,102,.5);
  transition:transform .22s var(--ease), background .2s;
}
.wa-float:hover{ transform:scale(1.08); background:var(--wa-dark); }
.wa-float svg{ width:32px; height:32px; }
.wa-float::after{ content:''; position:absolute; inset:0; border-radius:50%; border:2px solid var(--wa); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%{ transform:scale(1); opacity:.7 } 100%{ transform:scale(1.5); opacity:0 } }

.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:95; display:none;
  background:rgba(255,255,255,.9); backdrop-filter:blur(14px);
  box-shadow:0 -8px 24px rgba(0,0,0,.08); padding:11px 14px calc(11px + env(safe-area-inset-bottom)); gap:10px;
}
.mobile-bar .btn{ flex:1; padding:14px 12px; font-size:.88rem; }

/* =========================================================
   COOKIES — LGPD
   ========================================================= */
.cookiebar{
  position:fixed; left:0; right:0; bottom:0; z-index:300;
  background:#fff; box-shadow:var(--shadow-lg);
  padding:20px 0 calc(20px + env(safe-area-inset-bottom));
  transform:translateY(110%); transition:transform .4s var(--ease);
}
.cookiebar.is-open{ transform:translateY(0); }
.cookiebar__in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; }
.cookiebar__in p{ flex:1 1 440px; font-size:.86rem; line-height:1.55; color:var(--text); margin:0; }
.cookiebar__in p b{ color:var(--brand-deep); }
.cookiebar__actions{ display:flex; flex-wrap:wrap; gap:10px; }
.cookiebar__actions .btn{ white-space:nowrap; }

.cookiemodal{
  position:fixed; inset:0; z-index:310; background:rgba(30,20,10,.55);
  display:grid; place-items:center; padding:24px;
  opacity:0; visibility:hidden; transition:.25s;
}
.cookiemodal.is-open{ opacity:1; visibility:visible; }
.cookiemodal__box{
  background:#fff; border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
  padding:34px; max-width:540px; width:100%; max-height:86vh; overflow-y:auto; position:relative;
}
.cookiemodal__close{
  position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%;
  border:0; background:var(--surface-2); color:var(--brand-deep); cursor:pointer; display:grid; place-items:center; transition:.2s;
}
.cookiemodal__close:hover{ background:var(--accent-soft); }
.cookiemodal__close svg{ width:18px; height:18px; }
.cookiemodal__box h3{ padding-right:40px; }
.cookiemodal__intro{ font-size:.88rem; color:var(--text); margin-top:10px; line-height:1.6; }
.cookiemodal__cat{ background:var(--surface-2); border-radius:var(--r); padding:16px 18px; margin-top:16px; }
.cookiemodal__cat-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.cookiemodal__cat-head b{ color:var(--brand-deep); font-size:.92rem; }
.cookiemodal__cat p{ font-size:.82rem; color:var(--muted); margin-top:6px; line-height:1.55; }
.cookiemodal__locked{ font-size:.72rem; font-weight:800; color:var(--muted); background:var(--surface-3); padding:4px 10px; border-radius:var(--r-pill); flex:none; }
.cookiemodal__switch{ position:relative; display:inline-block; width:42px; height:24px; flex:none; }
.cookiemodal__switch input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.cookiemodal__switch span{ position:absolute; inset:0; background:var(--surface-3); border-radius:var(--r-pill); transition:.2s; }
.cookiemodal__switch span::before{ content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:.2s; }
.cookiemodal__switch input:checked + span{ background:var(--brand); }
.cookiemodal__switch input:checked + span::before{ transform:translateX(18px); }
.cookiemodal__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.cookiemodal__actions .btn{ flex:1 1 auto; white-space:nowrap; }

.footer__cookie-link{
  background:none; border:0; padding:0; color:rgba(255,255,255,.75); font-size:.83rem;
  cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}
.footer__cookie-link:hover{ color:#fff; }

@media (max-width:760px){
  .cookiebar__in{ flex-direction:column; align-items:stretch; }
  .cookiebar__actions{ flex-direction:column; }
  .cookiebar__actions .btn{ width:100%; }
  .cookiemodal__box{ padding:26px 22px; }
}

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  *{ animation:none !important; }
  .revs__rail{ transition:none; }
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1180px){
  .nav a{ padding:8px 9px; font-size:.76rem; }
  .nav .unit__btn{ padding:8px 12px; font-size:.76rem; }
  .header__cta .btn--sm{ padding:10px 15px; font-size:.79rem; }
  .brand__logo{ height:39px; }
  .rating{ gap:32px; padding:36px 34px; }
}
@media (max-width:1080px){
  .hero__in{ grid-template-columns:1fr; gap:44px; }
  .hero__card{ max-width:560px; }
  .amen li{ flex-basis:calc((100% - 32px) / 3); }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:36px; }
  .plans,.spaces,.g-3,.spots{ grid-template-columns:repeat(2,1fr); }
  .g-4{ grid-template-columns:repeat(2,1fr); }
  .proof__in{ row-gap:26px; column-gap:40px; }
  .revs__rail{ grid-auto-columns:calc((100% - 24px) / 2); }
}
@media (max-width:960px){
  .nav{ display:none; }
  /* Header mobile só com marca + menu — o CTA de WhatsApp continua acessível
     pelo botão flutuante, pela barra inferior e dentro do próprio menu. */
  .header__cta .btn{ display:none; }
  .burger{ display:flex; }
  /* .nav sumiu do fluxo (display:none) e não empurra mais o cta pra
     direita — sem isso o botão de menu ficava preso no meio da tela. */
  .header__cta{ margin-left:auto; }
  .split{ grid-template-columns:1fr; gap:36px; }
  .split--rev .split__media{ order:0; }
  .cta__in{ grid-template-columns:1fr; gap:32px; }
  .topbar__left .topbar-hide{ display:none; }
  .brand__logo{ height:46px; }
}
@media (max-width:760px){
  body{ font-size:16px; }
  :root{ --nav-h:68px; }
  .section{ padding:66px 0; }
  .section--tight{ padding:48px 0; }
  .container{ padding-inline:18px; }
  .brand__logo{ height:37px; }
  .plans,.spaces,.g-2,.g-3,.g-4,.spots{ grid-template-columns:1fr; }
  .proof__in{ gap:22px 34px; }
  .proof__n{ font-size:1.9rem; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .amen li{ flex-basis:calc((100% - 16px) / 2); }
  .footer__grid{ grid-template-columns:1fr; gap:32px; }
  .cta{ padding:44px 26px; }
  .callout{ padding:28px 24px; }
  .rating{ grid-template-columns:1fr; gap:26px; text-align:center; padding:32px 24px; }
  .rating__cta{ display:flex; justify-content:center; }
  /* 100% (não 88%) — um card por vez, ocupando toda a largura da janela,
     sem sobra do próximo card aparecendo do lado e sem ficar descentralizado. */
  .revs__rail{ grid-auto-columns:100%; }
  .revs__head{ text-align:center; }
  .revs__viewport{ padding-inline:46px; }
  .revs__btn{ width:40px; height:40px; margin-top:-20px; }
  .revs__btn svg{ width:19px; height:19px; }
  /* Conteúdo do card de avaliação centralizado no mobile */
  .rev{ text-align:center; align-items:center; }
  .rev__top{ justify-content:center; gap:10px; }
  .rev__who{ flex-direction:column; }
  .mobile-bar{ display:flex; }
  .wa-float{ bottom:88px; right:16px; width:54px; height:54px; }
  .wa-float svg{ width:28px; height:28px; }
  .hero__in{ padding-block:52px 64px; }
  .hero__card{ padding:26px; }
  /* Topbar comprimida: dá folga para caber numa linha só mesmo em telas
     estreitas ou com a fonte do sistema ampliada. */
  .topbar{ font-size:.72rem; }
  .topbar__in{ gap:8px; min-height:36px; }
  .topbar__left{ gap:10px; }
  .topbar__right{ gap:10px; }
  .topbar svg{ width:13px; height:13px; }
  .topbar__sep{ display:none; }
  .footer{ padding-bottom:72px; }
  /* Setas embaixo, centralizadas: na lateral elas cobriam a própria foto,
     porque numa tela estreita não sobra espaço livre ao lado da imagem. */
  .lightbox{ padding:16px; }
  .lightbox img{ max-height:66vh; }
  .lightbox__nav{
    width:46px; height:46px;
    top:auto; bottom:24px; transform:none;
  }
  .lightbox__nav.prev{ left:calc(50% - 58px); }
  .lightbox__nav.next{ right:calc(50% - 58px); }
  .spaces-list{ gap:64px; }
}
@media (max-width:420px){
  .btn{ padding:14px 20px; font-size:.9rem; }
  .btn-row{ flex-direction:column; }
  .btn-row .btn{ width:100%; }
  .plans[style]{ grid-template-columns:1fr !important; }
}