/* =============================================================
   Green Place — Home · "Esmeralda ao Entardecer"
   Estilos de layout e componentes (usam os tokens de tokens.css)
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-texto);
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
/* o atributo hidden deve vencer o display de componentes (.btn/.chip usam inline-flex) */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 2px; }

/* ---------- Tipografia ---------- */
.display, h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: var(--lh-title); letter-spacing: var(--ls-title); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); font-weight: 500; }
h3 { font-size: var(--fs-h3); font-weight: 500; }
em { font-style: italic; }
.serif-i { font-family: var(--font-display); font-style: italic; font-weight: 500; }
.eyebrow {
  font-family: var(--font-texto); font-weight: 700; font-size: var(--fs-eyebrow);
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
  color: var(--marca); display: inline-flex; align-items: center; gap: var(--space-sm);
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--ouro); display: inline-block; }
[data-face="escura"] .eyebrow { color: var(--ouro); }
.lead { font-family: var(--font-display); font-size: var(--fs-corpo-grande); line-height: 1.55; color: var(--texto); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-lg); }
@media (min-width: 768px) { .wrap { padding-inline: var(--space-2xl); } }
.section { padding-block: var(--space-3xl); position: relative; }
@media (min-width: 1024px) { .section { padding-block: var(--space-4xl); } }
.face-escura { background: var(--fundo); color: var(--texto); }
.face-clara  { background: var(--fundo); color: var(--texto); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  font-family: var(--font-texto); font-weight: 600; font-size: var(--fs-botao); letter-spacing: .02em;
  padding: 14px 26px; border-radius: var(--radius-sutil);
  transition: transform var(--dur-rapido) var(--ease-padrao), background var(--dur-rapido) var(--ease-padrao), box-shadow var(--dur-rapido) var(--ease-padrao), border-color var(--dur-rapido) var(--ease-padrao);
}
.btn--primary { background: var(--cta); color: var(--cta-texto); box-shadow: var(--shadow-cta); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-cta-hover); }
.btn--gold { background: var(--cta-assinatura); color: var(--cta-assin-texto); box-shadow: var(--shadow-ouro); }
.btn--gold:hover { transform: translateY(-2px); box-shadow: var(--glow-ouro); }
.btn--ghost { background: transparent; color: var(--marca); border: 1px solid var(--borda-forte); }
[data-face="escura"] .btn--ghost { color: var(--texto); }
.btn--ghost:hover { background: var(--marca-veu); border-color: var(--marca); color: var(--marca-alt); }
[data-face="escura"] .btn--ghost:hover { color: var(--ouro); border-color: var(--ouro); }
/* WhatsApp = ação secundária on-palette: esmeralda + fio de ouro, verde só no ponto */
.btn--wa { background: var(--wa-superficie); color: var(--c-marfim); border: 1px solid var(--ouro-fio); }
.btn--wa:hover { transform: translateY(-2px); border-color: var(--ouro); }
.btn--wa .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wa-glifo); box-shadow: 0 0 0 3px rgba(37,211,102,.18); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  transition: background var(--dur-medio) var(--ease-padrao), box-shadow var(--dur-medio) var(--ease-padrao), padding var(--dur-medio) var(--ease-padrao);
  color: var(--c-marfim);
}
@media (min-width: 768px) { .header { padding-inline: var(--space-2xl); } }
.header.solid {
  background: var(--header-fundo); color: var(--texto);
  backdrop-filter: blur(10px); box-shadow: var(--shadow-2); border-bottom: 1px solid var(--borda);
  padding-block: var(--space-sm);
}
/* Logo do header = símbolo (muda) SVG + wordmark por máscara; cor por TOKEN. Ver seção "MARCA" no fim. */
.header__logo { display: inline-flex; align-items: center; text-decoration: none; }
.nav { display: none; align-items: center; gap: var(--space-xl); }
@media (min-width: 1200px) { .nav { display: flex; } }
.nav a { font-size: var(--fs-corpo-peq); font-weight: 500; letter-spacing: .01em; position: relative; padding-block: 4px; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--ouro); transition: width var(--dur-rapido) var(--ease-padrao); }
.nav a:hover::after { width: 100%; }
.header__actions { display: flex; align-items: center; gap: var(--space-md); }
.pill {
  display: none; align-items: center; gap: 8px; font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; padding: 7px 14px;
  border: 1px solid var(--ouro-fio); border-radius: var(--radius-pill);
}
.pill .star { color: var(--ouro); }
@media (min-width: 1200px) { .pill { display: inline-flex; } }
.header .btn { padding: 10px 20px; }
.burger { display: grid; gap: 5px; padding: 8px; }
.burger span { width: 24px; height: 2px; background: currentColor; display: block; }
@media (min-width: 1200px) { .burger { display: none; } }

/* ---------- Hero / cenas full-bleed ---------- */
.scene {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  color: var(--c-marfim); overflow: hidden; isolation: isolate;
}
.scene--center { align-items: center; }
.scene__media { position: absolute; inset: 0; z-index: -2; }
.scene__media img, .scene__media video { width: 100%; height: 100%; object-fit: cover; }
.scene__media img { animation: kenburns var(--dur-kenburns) var(--ease-padrao) infinite alternate; }
.scene::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim-hero); }
/* scrim lateral: dá cama escura ao texto (esq.) preservando a foto vibrante à direita — só nos heros de texto alinhado */
.scene:not(.scene--center)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--scrim-lateral); }
.scene__inner { padding-block: var(--space-4xl) var(--space-3xl); width: 100%; }
.hero__title { font-size: var(--fs-display-hero); line-height: var(--lh-tight); max-width: 15ch; margin-top: var(--space-md); }
.hero__title em { color: var(--ouro); }
.hero__sub { font-family: var(--font-display); font-size: var(--fs-corpo-grande); font-style: italic; color: var(--texto); margin-top: var(--space-lg); max-width: 42ch; }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1; font-size: 26px; color: var(--c-marfim); opacity: .8; animation: bob 2.4s var(--ease-suave) infinite; }
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }

/* Barra de capacidade */
.capbar {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-md);
  margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid rgba(247,243,234,.24);
  max-width: 720px;
}
@media (min-width: 720px) { .capbar { grid-template-columns: repeat(4, 1fr); } }
.capbar__n { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-dado-heroi); line-height: 1.1; }
.capbar__n span { font-size: .5em; font-weight: 600; opacity: .9; }
.capbar__l { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .12em; color: var(--texto-suave); margin-top: 4px; }

/* ---------- Blocos editoriais ---------- */
.split { display: grid; gap: var(--space-2xl); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--space-4xl); } .split--media-first .split__media { order: -1; } }
.split__media { position: relative; }
.split__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sutil); box-shadow: var(--shadow-2); }
.split__media .frame { position: absolute; inset: -10px -10px auto auto; width: 60%; height: 60%; border: 1px solid var(--ouro-fio); border-radius: var(--radius-sutil); z-index: -1; }
.block-title { margin-top: var(--space-md); }
.block-title + .lead, h2 + .lead, h2 + p { margin-top: var(--space-lg); }
.prose { color: var(--texto-suave); max-width: 60ch; }
.prose strong { color: var(--texto); font-weight: 600; }

/* Manifesto */
.manifesto { max-width: var(--container-editorial); margin-inline: auto; text-align: center; }
.manifesto p { font-family: var(--font-display); font-size: clamp(1.375rem, 2.2vw + 1rem, 2rem); line-height: 1.5; color: var(--c-marfim); }
.manifesto p + p { margin-top: var(--space-xl); color: var(--texto-suave); }
.manifesto .cta-row { justify-content: center; }

/* ---------- Cards de segmento ---------- */
.seg-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-top: var(--space-2xl); }
@media (min-width: 560px) { .seg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .seg-grid { grid-template-columns: repeat(4, 1fr); } }
.seg-card {
  position: relative; display: block; aspect-ratio: 3/4; border-radius: var(--radius-sutil); overflow: hidden;
  color: var(--c-marfim); isolation: isolate;
}
.seg-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-cinema) var(--ease-suave); z-index: -2; }
.seg-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(6,35,27,.82), rgba(6,35,27,.05)); }
.seg-card:hover img { transform: scale(1.06); }
.seg-card__body { position: absolute; inset: auto 0 0 0; padding: var(--space-lg); }
.seg-card h3 { font-size: var(--fs-h3); }
.seg-card .go { font-size: var(--fs-corpo-peq); font-weight: 600; letter-spacing: .04em; color: var(--ouro-claro); margin-top: 6px; display: inline-flex; gap: 6px; }

/* ---------- Prova social (reels) ---------- */
.reels { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); margin-top: var(--space-2xl); }
@media (min-width: 700px) { .reels { grid-template-columns: repeat(4, 1fr); } }
.reel {
  position: relative; aspect-ratio: 9/16; border-radius: var(--radius-medio); overflow: hidden;
  background: var(--c-esmeralda-salao); box-shadow: var(--shadow-1); border: 1px solid var(--borda);
}
.reel img, .reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel__play { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; background: linear-gradient(to top, rgba(6,35,27,.5), transparent 55%); }
.reel__play .ico { width: 52px; height: 52px; border-radius: 50%; background: rgba(247,243,234,.9); color: var(--marca); display: grid; place-items: center; transition: transform var(--dur-rapido) var(--ease-padrao); }
.reel:hover .reel__play .ico { transform: scale(1.08); }
.reel__views { position: absolute; left: 10px; bottom: 10px; z-index: 3; font-size: var(--fs-legenda); font-weight: 600; color: var(--c-marfim); text-shadow: 0 1px 4px rgba(0,0,0,.5); display: flex; align-items: center; gap: 5px; }
.reel__views .badge { background: var(--ouro); color: var(--c-cta-escuro); padding: 1px 7px; border-radius: var(--radius-pill); font-size: .7rem; }
.reel.playing .reel__play, .reel.playing .reel__views { opacity: 0; pointer-events: none; }

/* ---------- Isca de download ---------- */
.guia { display: grid; gap: var(--space-2xl); align-items: center; }
@media (min-width: 900px) { .guia { grid-template-columns: 1.1fr .9fr; } }
.card {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--radius-medio);
  padding: var(--space-2xl); box-shadow: var(--shadow-1);
}
/* evita overflow silencioso no mobile: min-content do grid não pode estourar o track */
.split > *, .guia > *, .card { min-width: 0; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-md); }
.field label { font-size: var(--fs-corpo-peq); font-weight: 500; color: var(--texto); }
.field input, .field select {
  font-family: var(--font-texto); font-size: var(--fs-corpo); color: var(--texto);
  padding: 12px 14px; border: 1px solid var(--borda-forte); border-radius: var(--radius-sutil);
  background: var(--fundo); transition: border-color var(--dur-rapido) var(--ease-padrao), box-shadow var(--dur-rapido) var(--ease-padrao);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 3px var(--foco-halo); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-md); }
.form-grid .full { grid-column: 1 / -1; }
.form-hint { font-size: var(--fs-legenda); color: var(--texto-suave); margin-top: var(--space-sm); }

/* ---------- FAQ ---------- */
.faq { max-width: var(--container-editorial); margin-inline: auto; margin-top: var(--space-2xl); }
.faq details { border-bottom: 1px solid var(--borda); padding: var(--space-lg) 0; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); cursor: pointer; list-style: none; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { color: var(--ouro); font-size: 1.4rem; transition: transform var(--dur-rapido) var(--ease-padrao); flex: none; }
.faq details[open] summary .plus { transform: rotate(45deg); }
.faq p { color: var(--texto-suave); margin-top: var(--space-md); max-width: 62ch; }

/* ---------- Footer ---------- */
.footer { background: var(--fundo); color: var(--texto); padding-block: var(--space-3xl) var(--space-2xl); }
.footer__grid { display: grid; gap: var(--space-2xl); }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
/* Lockup do rodapé = máscara + cor por token (ver seção "MARCA"). */
.footer__logo { margin-bottom: var(--space-md); }
.footer a:hover { color: var(--ouro); }
.footer ul { list-style: none; padding: 0; display: grid; gap: 10px; font-size: var(--fs-corpo-peq); color: var(--texto-suave); }
.footer__nap { font-size: var(--fs-corpo-peq); color: var(--texto-suave); line-height: 1.9; }
.footer__bottom { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--borda); display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: space-between; font-size: var(--fs-legenda); color: var(--texto-suave); }

/* ---------- WhatsApp flutuante + barra fixa mobile ---------- */
/* WhatsApp flutuante = dock concierge on-palette (esmeralda + fio de ouro, glifo verde) */
.wa-float {
  position: fixed; right: 20px; bottom: 24px; z-index: var(--z-sticky);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px; border-radius: var(--radius-pill);
  background: var(--wa-superficie); color: var(--c-marfim); border: 1px solid var(--ouro-fio);
  font-family: var(--font-texto); font-weight: 600; font-size: var(--fs-corpo-peq);
  box-shadow: 0 12px 30px -12px rgba(6,35,27,.55), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform var(--dur-rapido) var(--ease-padrao), border-color var(--dur-rapido) var(--ease-padrao);
}
.wa-float:hover { transform: translateY(-2px); border-color: var(--ouro); }
.wa-float svg { width: 20px; height: 20px; color: var(--wa-glifo); flex: none; }
.wa-float__label { white-space: nowrap; }
@media (max-width: 1199px) { .wa-float { display: none; } }
.mobilebar {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky); display: flex;
  background: var(--c-esmeralda-noite); box-shadow: 0 -4px 20px rgba(0,0,0,.25);
}
.mobilebar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 8px; font-size: var(--fs-corpo-peq); font-weight: 600; color: var(--c-marfim); }
.mobilebar a.wa { background: var(--wa-superficie); }
.mobilebar a.wa::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wa-glifo); flex: none; }
.mobilebar a:not(.wa) { color: var(--ouro-claro); }
@media (min-width: 1200px) { .mobilebar { display: none; } }
body { padding-bottom: 0; }
@media (max-width: 1199px) { body { padding-bottom: 60px; } }

/* ---------- Menu mobile ---------- */
.mobilemenu {
  position: fixed; inset: 0; z-index: var(--z-modal); background: var(--fundo, var(--c-esmeralda-noite));
  background: var(--c-esmeralda-noite); color: var(--c-marfim); display: flex; flex-direction: column; padding: var(--space-2xl) var(--space-lg);
  transform: translateY(-100%); transition: transform var(--dur-lento) var(--ease-saida); visibility: hidden;
}
.mobilemenu.open { transform: translateY(0); visibility: visible; }
.mobilemenu__close { align-self: flex-end; font-size: 2rem; line-height: 1; padding: 8px; }
.mobilemenu nav { display: flex; flex-direction: column; gap: var(--space-lg); margin-top: var(--space-2xl); }
.mobilemenu nav a { font-family: var(--font-display); font-size: 2rem; }

/* ---------- Reveal — progressive enhancement: só esconde com JS ativo ---------- */
html.js .reveal { opacity: 0; transform: translateY(20px); }
html.js .reveal.in { opacity: 1; transform: none; transition: opacity var(--dur-lento) var(--ease-saida), transform var(--dur-lento) var(--ease-saida); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scene__media img { animation: none; }
  .scroll-cue { animation: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* =============================================================
   Correções pós-revisão adversarial
   ============================================================= */

/* skip link + utilitários */
.skip-link { position: fixed; top: -60px; left: 12px; z-index: var(--z-tooltip); background: var(--marca); color: var(--c-marfim); padding: 10px 16px; border-radius: var(--radius-sutil); transition: top var(--dur-rapido) var(--ease-padrao); }
.skip-link:focus { top: 12px; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.opt { color: var(--texto-suave); font-weight: 400; }

/* âncoras não somem sob o header fixo */
html { scroll-padding-top: 84px; }

/* capbar como <dl> — zera margem padrão do dd */
.capbar dd { margin: 0; }

/* Ken-Burns mais suave + desligado no mobile (RNF-03/04) */
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (max-width: 1023px) { .scene__media img { animation: none; } }

/* min-height com fallback + scrim reforçado no centro + legibilidade sobre foto */
.scene { min-height: 100vh; min-height: 100svh; }
.scene--center::after { background: var(--scrim-centro); }
.scene .eyebrow, .scene h1, .scene .hero__sub, .scene__inner p, .manifesto p { text-shadow: var(--text-shadow-foto); }

/* foco visível quando o header está transparente sobre a foto escura */
.header:not(.solid) :focus-visible { outline-color: var(--ouro-claro); }
/* legibilidade da nav/selo sobre foto clara (sombra de texto + scrim reforçado no ::before) */
.header:not(.solid) .nav a, .header:not(.solid) .pill { text-shadow: var(--text-shadow-foto); }

/* header enxuto no mobile/tablet (conversão fica na barra fixa inferior) */
@media (max-width: 1199px) { .header .btn { display: none; } }

/* form mobile-first (1 col → 2 a partir de 480px) */
.form-grid { grid-template-columns: 1fr; }
@media (min-width: 480px) { .form-grid { grid-template-columns: 1fr 1fr; } }

/* FAQ: o "+" em marca (ouro sobre marfim reprova contraste) */
.faq summary .plus { color: var(--marca); }

/* reel: <video> que substitui o botão ao tocar */
video.reel--playing { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--superficie); aspect-ratio: 9/16; border-radius: var(--radius-medio); }

/* estados de formulário (o halo de erro definitivo, por token, vive mais abaixo) */
.form-status { margin-top: var(--space-sm); font-size: var(--fs-legenda); color: var(--texto); }

/* =============================================================
   Componentes das páginas internas (segmentos, galeria, espaço, contato)
   ============================================================= */

/* hero curto para páginas internas */
.scene--short { min-height: 58vh; min-height: 58svh; }
@media (min-width: 1024px) { .scene--short { min-height: 66vh; min-height: 66svh; } }

/* breadcrumb */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--fs-legenda); color: var(--texto-suave); margin-bottom: var(--space-lg); }
.breadcrumb a:hover { color: var(--marca); }
.breadcrumb .sep { color: var(--ouro); }
.breadcrumb [aria-current] { color: var(--texto); }

/* pilares / diferenciais / MVV */
.pillars { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-top: var(--space-2xl); }
@media (min-width: 600px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .pillars--4 { grid-template-columns: repeat(4, 1fr); } .pillars--3 { grid-template-columns: repeat(3, 1fr); } }
.pillar { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--radius-medio); padding: var(--space-xl); box-shadow: var(--shadow-1); }
.pillar .num { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--marca); display: block; margin-bottom: var(--space-sm); }
.pillar h3 { font-size: var(--fs-h3); margin-bottom: var(--space-xs); }
.pillar p { color: var(--texto-suave); font-size: var(--fs-corpo-peq); }

/* galeria filtrável + lightbox */
.gallery-filters { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.chip { font-family: var(--font-texto); font-size: var(--fs-chip); font-weight: 500; letter-spacing: .01em; padding: 9px 18px; border: 1px solid var(--borda-forte); border-radius: var(--radius-pill); background: transparent; color: var(--texto); transition: background var(--dur-rapido) var(--ease-padrao), color var(--dur-rapido) var(--ease-padrao), border-color var(--dur-rapido) var(--ease-padrao); }
.chip[aria-pressed="true"] { background: var(--marca); color: var(--cta-texto); border-color: var(--marca); }
.chip:hover { border-color: var(--marca); }
.gallery { columns: 2; column-gap: var(--space-md); margin-top: var(--space-2xl); }
@media (min-width: 700px) { .gallery { columns: 3; } }
@media (min-width: 1100px) { .gallery { columns: 4; } }
.gallery figure { break-inside: avoid; margin: 0 0 var(--space-md); border-radius: var(--radius-sutil); overflow: hidden; position: relative; }
.gallery button.tile { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius-sutil); overflow: hidden; }
.gallery img { width: 100%; height: auto; display: block; transition: transform var(--dur-cinema) var(--ease-suave); }
.gallery button.tile:hover img { transform: scale(1.04); }
.gallery figure[hidden] { display: none; }
.lightbox { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--scrim-lightbox); display: none; place-items: center; padding: var(--space-lg); }
.lightbox.open { display: grid; }
.lightbox img { max-width: 92vw; max-height: 84vh; border-radius: var(--radius-sutil); box-shadow: var(--glow-escuro-2); }
.lightbox__close, .lightbox__nav { position: absolute; background: rgba(247,243,234,.14); color: var(--c-marfim); border-radius: 50%; width: 48px; height: 48px; display: grid; place-items: center; font-size: 1.5rem; transition: background var(--dur-rapido) var(--ease-padrao); }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__nav.prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__nav.next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__nav:hover, .lightbox__close:hover { background: var(--ouro); color: var(--c-cta-escuro); }
.lightbox__cap { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: var(--texto-suave); font-size: var(--fs-legenda); }

/* ---------- Popup de conversão (wizard em modal · reusa foco-trap/inert do lightbox) ---------- */
.popup { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--scrim-lightbox); display: none; place-items: start center; padding: var(--space-lg); overflow-y: auto; }
.popup.open { display: grid; }
.popup__panel { position: relative; width: 100%; max-width: 540px; margin: auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--radius-medio); box-shadow: var(--shadow-2); padding: var(--space-xl); }
.popup__close { position: absolute; top: 12px; right: 12px; z-index: 1; background: rgba(6,35,27,.06); color: var(--texto); border-radius: 50%; width: 40px; height: 40px; display: grid; place-items: center; font-size: 1.5rem; line-height: 1; transition: background var(--dur-rapido) var(--ease-padrao), color var(--dur-rapido) var(--ease-padrao); }
.popup__close:hover { background: var(--marca); color: var(--c-marfim); }
.popup .wz__q { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) { .popup.open .popup__panel { animation: popupIn var(--dur-medio) var(--ease-saida); } }
@keyframes popupIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* vídeo institucional (o tour 360° virou facade interativa — ver seção "Tour 360°" no fim) */
.video-embed { position: relative; margin-top: var(--space-2xl); border-radius: var(--radius-medio); overflow: hidden; box-shadow: var(--shadow-2); aspect-ratio: 16/9; background: var(--c-esmeralda-noite); }
.video-embed video { width: 100%; height: 100%; object-fit: cover; }

/* faixa de âncora / CTA em bloco */
.anchor-cta { text-align: center; max-width: var(--container-editorial); margin-inline: auto; }
.anchor-cta .cta-row { justify-content: center; }

/* =============================================================
   Design-taste pass (dials 8/6/4) — materialidade, assimetria, anti-slop
   ============================================================= */

/* [1] rodapé: títulos de coluna como label em ouro (corrige seletor h4→h3) */
.footer h3 { font-family: var(--font-texto); font-weight: 700; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .14em; color: var(--ouro); margin-bottom: var(--space-md); }

/* [4] header como vidro fosco de verdade (rim interno + mais translucidez) */
.header.solid { background: var(--header-fundo); box-shadow: var(--shadow-2), var(--header-rim); }

/* [3] pilares de-boxados: fio superior + numeral editorial (arejado, VARIANCE 8 / DENSITY 4) */
.pillars { gap: var(--space-2xl) var(--space-xl); }
.pillar { background: transparent; box-shadow: none; border: 0; border-top: 1px solid var(--borda); border-radius: 0; padding: var(--space-lg) 0 0; }
.pillar .num { font-size: 2.5rem; }
/* numeral em ouro só reprova contraste na face clara (2.19:1); na escura o ouro-claro passa */
[data-face="escura"] .pillar .num, .face-escura .pillar .num { color: var(--ouro); }

/* [2] cards de segmento: bento assimétrico (Casamentos = âncora panorâmica; 15 Anos = coluna alta) */
@media (min-width: 1100px) {
  .seg-grid { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "cas cas ani" "cor for ani"; }
  .seg-card { aspect-ratio: auto; height: 100%; min-height: 260px; }
  .seg-grid > .seg-card:nth-child(1) { grid-area: cas; }
  .seg-grid > .seg-card:nth-child(2) { grid-area: ani; }
  .seg-grid > .seg-card:nth-child(3) { grid-area: cor; }
  .seg-grid > .seg-card:nth-child(4) { grid-area: for; }
  .seg-grid > .seg-card:nth-child(1) h3 { font-size: var(--fs-h2); }
}

/* [12] capbar como ficha técnica com fios verticais + ritmo assimétrico */
@media (min-width: 720px) {
  .capbar { grid-template-columns: .9fr .9fr .9fr 1.1fr; }
  .capbar > div + div { border-left: 1px solid rgba(247,243,234,.18); padding-left: var(--space-lg); }
}

/* [10] splits levemente assimétricos + mais respiro entre mídia e texto */
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr .95fr; column-gap: var(--space-4xl); }
  .split--media-first { grid-template-columns: .95fr 1.05fr; }
}

/* [11] materialidade: sombras tintadas + highlight interno (anti-glow) */
.btn--gold:hover { box-shadow: 0 10px 24px -6px rgba(198,161,91,.45), inset 0 1px 0 rgba(255,255,255,.18); }
.card { box-shadow: var(--shadow-1); }

/* [6] folga p/ parallax das cenas (o JS translada .scene__media; sem JS, só sangra e é cortado) */
.scene__media { inset: -10% 0; }

/* [7] máscara do reveal do H1 herói (aplicado via JS; com folga p/ acentos/descendentes) */
.hero__title .lmask { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em 0; margin: -.14em 0; }
.hero__title .lin { display: inline-block; will-change: transform; }

/* [14] barra de progresso de scroll (fio de ouro; injetada via JS) */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--ouro); transform: scaleX(0); transform-origin: 0 50%; z-index: var(--z-header); }
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }

/* ícone SVG nos .num de ícone (contato) + tamanhos de glifos SVG */
.pillar .num svg { width: 34px; height: 34px; display: block; }
.pill .star svg { display: inline-block; vertical-align: -1px; }
.reel__play .ico svg { display: block; }

/* =============================================================
   Remediação de auditoria — estados, elevação por face, a11y
   ============================================================= */

/* estados de botão faltantes (spec §2.1) */
.btn:active { transform: translateY(0) scale(.985); box-shadow: var(--shadow-1); }
.btn:disabled, .btn[disabled] { opacity: .55; box-shadow: none; cursor: not-allowed; transform: none; }
.chip:active { transform: scale(.97); }

/* estado hover de campo + repouso correto (spec §6.1) */
.field input, .field select { border-color: var(--borda); }
.field input:hover, .field select:hover { border-color: var(--borda-forte); }
/* placeholder legível (WCAG 1.4.3): sabiá = 5.1:1 sobre marfim, não o cinza-fantasma do browser */
.field input::placeholder, .field select::placeholder, .field textarea::placeholder { color: var(--texto-suave); opacity: 1; }

/* halo de erro por FACE (token) */
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--erro); box-shadow: 0 0 0 3px var(--erro-halo); }

/* elevação da FACE ESCURA: anel/glow em vez de sombra clara (invisível no escuro) */
[data-face="escura"] .card, .face-escura .card,
[data-face="escura"] .reel, .face-escura .reel { box-shadow: var(--glow-escuro-1); }
.video-embed { box-shadow: var(--glow-escuro-1); }

/* breadcrumb: hover coerente nas duas faces */
.breadcrumb a:hover { color: var(--marca-alt); }

/* links de contato (NAP/endereço): sublinhado (indicador não-cromático) */
.footer__nap a, address a { text-decoration: underline; text-underline-offset: 2px; }
.footer__nap a:hover, address a:hover { color: var(--ouro); }

/* reveal nunca esconde conteúdo focado (a11y) */
.reveal:focus-within { opacity: 1 !important; transform: none !important; }

/* área de toque mínima da nav (WCAG 2.2 target-size) */
.nav a { padding-block: 8px; }

/* checkbox LGPD + mensagem de erro por campo */
.field--check { margin: var(--space-sm) 0 var(--space-md); }
.field--check label { display: flex; gap: var(--space-xs); align-items: flex-start; font-size: var(--fs-corpo-peq); color: var(--texto-suave); line-height: 1.45; cursor: pointer; }
.field--check input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--marca); }
.field--check input[type="checkbox"][aria-invalid="true"] { outline: 2px solid var(--erro); outline-offset: 2px; }
.field--check a { color: var(--marca); text-decoration: underline; text-underline-offset: 2px; }
.field-err { color: var(--erro); font-size: var(--fs-legenda); margin-top: 4px; font-weight: 500; }

/* =============================================================
   Seletor de agendamento (RF-16) — dia + horário
   ============================================================= */
.scheduler { margin-top: var(--space-2xl); display: grid; gap: var(--space-xl); }
.scheduler__label { font-family: var(--font-texto); font-weight: 600; font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .1em; color: var(--texto-suave); margin-bottom: var(--space-md); }
.daychips, .timechips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.daychip, .timechip {
  font-family: var(--font-texto); font-size: var(--fs-corpo-peq); font-weight: 500;
  border: 1px solid var(--borda-forte); border-radius: var(--radius-sutil);
  background: var(--superficie); color: var(--texto); padding: 10px 16px; cursor: pointer; text-align: center; line-height: 1.15;
  transition: border-color var(--dur-rapido) var(--ease-padrao), background var(--dur-rapido) var(--ease-padrao), color var(--dur-rapido) var(--ease-padrao), transform var(--dur-rapido) var(--ease-padrao);
}
.daychip { min-width: 66px; display: grid; gap: 1px; padding: 8px 12px; }
.daychip .dow { font-size: var(--fs-legenda); color: var(--texto-suave); text-transform: uppercase; letter-spacing: .06em; }
.daychip .dnum { font-family: var(--font-display); font-size: 1.4rem; line-height: 1; }
.daychip .mon { font-size: .68rem; color: var(--texto-suave); text-transform: lowercase; }
.daychip:hover, .timechip:hover { border-color: var(--marca); }
.daychip[aria-checked="true"], .timechip[aria-checked="true"] { background: var(--marca); color: var(--cta-texto); border-color: var(--marca); }
.daychip[aria-checked="true"] .dow, .daychip[aria-checked="true"] .mon { color: var(--cta-texto); opacity: .82; }
.daychip:active, .timechip:active { transform: scale(.96); }
.scheduler__foot { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; justify-content: space-between; border-top: 1px solid var(--borda); padding-top: var(--space-lg); }
.scheduler__summary { color: var(--texto-suave); font-size: var(--fs-corpo-peq); margin: 0; }
.scheduler__summary strong { color: var(--texto); font-weight: 600; }

/* galeria: contador + estado vazio */
.gallery-count { margin-top: var(--space-md); font-size: var(--fs-legenda); color: var(--texto-suave); }
.gallery-empty { text-align: center; padding: var(--space-3xl) var(--space-lg); }
.gallery-empty .btn { margin-top: var(--space-md); }
/* fade de imagem ao carregar (skeleton leve) */
.gallery img, .reel img { background: linear-gradient(100deg, var(--superficie) 30%, color-mix(in srgb, var(--superficie), var(--texto) 6%) 50%, var(--superficie) 70%); }
img[data-loaded] { animation: img-in var(--dur-lento) var(--ease-saida); }
@keyframes img-in { from { opacity: .3; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { img[data-loaded] { animation: none; } }

/* --- correções da revisão final --- */
/* botão aria-disabled (ex.: Confirmar do agendador) — affordance de inativo */
.btn[aria-disabled="true"] { opacity: .5; box-shadow: none; cursor: not-allowed; }
.btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; filter: none; }
/* header transparente: scrim próprio p/ legibilidade da nav sobre foto clara */
.header:not(.solid)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(6,35,27,.72), rgba(6,35,27,.15) 62%, rgba(6,35,27,0)); }
/* lightbox como diálogo ESCURO (legenda + anel de foco com contraste) */
.lightbox.face-escura .lightbox__cap { color: var(--texto-suave); }
.lightbox.face-escura :focus-visible { outline-color: var(--foco); }
/* skeleton: fallback quando color-mix não é suportado */
@supports not (background: color-mix(in srgb, white, black)) {
  .gallery img, .reel img { background: var(--superficie); }
}
html:not(.js) .scheduler { display: none; }

/* =========================================================================
   MARCA — símbolo (muda) inline + lockup por máscara, recolorido por TOKEN.
   Aposenta os filter-hacks. Face-aware nas 2 faces e nos 2 estados do header.
   ========================================================================= */
:root { --logo-h: 34px; }                                   /* base mobile */
@media (min-width: 768px)  { :root { --logo-h: 40px; } }
@media (min-width: 1024px) { :root { --logo-h: 44px; } }

/* ---- Lockup do header: [ muda SVG ] + [ GREEN PLACE máscara ] ---- */
.logo { display: inline-flex; align-items: center; gap: .45rem; height: var(--logo-h); line-height: 0; }
/* símbolo = máscara do simbolo.svg FIEL (traço do original), recolorido por token — igual ao rodapé */
.logo__mark {
  height: 100%; aspect-ratio: 220 / 457; width: auto; display: block; flex: none;
  background: currentColor; color: var(--c-marfim);
  -webkit-mask: url(/assets/img/simbolo.svg) center / contain no-repeat;
          mask: url(/assets/img/simbolo.svg) center / contain no-repeat;
}
.logo__word {
  display: block; height: 78%; aspect-ratio: 422 / 127;     /* recorte GREEN PLACE (2 linhas) */
  background: currentColor;                                  /* segue a cor do header: marfim / --texto */
  -webkit-mask: url(/assets/img/wordmark.webp) left center / contain no-repeat;
          mask: url(/assets/img/wordmark.webp) left center / contain no-repeat;
}
/* cor do símbolo por estado do header (marfim sobre hero escuro; verde no vidro claro) */
.header.solid .logo__mark { color: var(--marca); }

/* encolhe suave no estado sólido (só desktop, só transform) */
@media (min-width: 768px) {
  .header .logo { transition: transform var(--dur-medio) var(--ease-padrao); transform-origin: left center; }
  .header.solid .logo { transform: scale(.9); }
}
/* telas muito estreitas → brasão só-muda */
@media (max-width: 360px) { .logo__word { display: none; } }

/* ---- Lockup completo do rodapé (assinatura original, maior) ---- */
.footer__lockup {
  display: block; height: 48px; aspect-ratio: 550 / 274;
  background: currentColor;                                  /* = --texto (marfim na face escura) */
  -webkit-mask: url(/assets/img/lockup.webp) left center / contain no-repeat;
          mask: url(/assets/img/lockup.webp) left center / contain no-repeat;
}
@media (min-width: 800px) { .footer__lockup { height: 56px; } }

/* fallback p/ navegadores sem mask (raro): mostra o raster branco */
@supports not ((-webkit-mask: url(#a)) or (mask: url(#a))) {
  .logo__word   { background: url(/assets/img/wordmark.webp) left center / contain no-repeat; }
  .footer__lockup { background: url(/assets/img/lockup.webp) left center / contain no-repeat; }
  .logo__mark, .gp-selo { background: none; }
}

/* ---- Motion do símbolo: "brota" ao carregar. Default = visível; a animação só refina
   (sem fill-mode, para nunca esconder o logo se não rodar — ex.: aba em segundo plano) ---- */
@media (prefers-reduced-motion: no-preference) {
  .logo__mark, .gp-selo { animation: gp-brota .8s var(--ease-saida); }
}
@keyframes gp-brota { from { opacity: .25; transform: translateY(7px) scale(.96); } to { opacity: 1; transform: none; } }

/* hover no logo do header: a folha-assinatura "respira" (sem mexer na posição) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .logo__mark { transition: transform .25s var(--ease-saida); transform-origin: bottom center; }
  .header__logo:hover .logo__mark { transform: scale(1.06) rotate(-2deg); }
}

/* ---- Selo do símbolo (página /obrigado + sucesso) ---- */
.gp-selo {
  display: block; height: clamp(64px, 12vw, 92px); aspect-ratio: 220 / 457; width: auto; margin: 0 auto var(--space-lg);
  background: currentColor; color: var(--c-marfim);
  -webkit-mask: url(/assets/img/simbolo.svg) center / contain no-repeat;
          mask: url(/assets/img/simbolo.svg) center / contain no-repeat;
}

/* ---- Marca-d'água (uso único, cena quieta) ---- */
.gp-marca-agua {
  position: absolute; z-index: 0; pointer-events: none; width: min(58vw, 480px); height: auto;
  color: var(--marca); opacity: .05;
}
.gp-marca-agua .gp-sym__leaf-hi { fill: currentColor; }     /* watermark = tom único */

/* marca-d'água única no rodapé — muda-fantasma, textura de fecho (não compete) */
.footer { position: relative; overflow: hidden; }
.footer::after {
  content: ""; position: absolute; z-index: 0; right: -3%; bottom: -12%;
  width: min(42vw, 380px); aspect-ratio: 1;
  background: url(/assets/img/simbolo-mono.svg) right bottom / contain no-repeat;
  opacity: .05; pointer-events: none;
}
.footer > * { position: relative; z-index: 1; }
@media (max-width: 640px) { .footer::after { width: 60vw; opacity: .04; } }

/* =========================================================================
   CALENDÁRIO custom acessível (realça input[type=date][data-calendar])
   ========================================================================= */
.cal__native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; pointer-events: none; }
.cal { margin-top: var(--space-xs); max-width: 340px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--radius-medio); padding: var(--space-sm) var(--space-md) var(--space-md); box-shadow: var(--shadow-1); }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); margin-bottom: var(--space-xs); }
.cal__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: var(--texto); margin: 0; }
.cal__nav { flex: none; width: 34px; height: 34px; border-radius: var(--radius-pill); border: 1px solid var(--borda-forte); background: var(--fundo); color: var(--texto); font-size: 1.25rem; line-height: 1; cursor: pointer; transition: background var(--dur-rapido) var(--ease-padrao), border-color var(--dur-rapido) var(--ease-padrao); }
.cal__nav:hover { border-color: var(--marca); background: var(--marca-veu); }
.cal__row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__dow { margin-bottom: 4px; }
.cal__dow span { text-align: center; font-size: var(--fs-legenda); font-weight: 600; color: var(--texto-suave); padding: 4px 0; }
.cal__dow abbr { text-decoration: none; cursor: default; }
.cal__day { aspect-ratio: 1; min-height: var(--cal-cel); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-texto); font-size: var(--fs-corpo-peq); color: var(--texto); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sutil); cursor: pointer; transition: background var(--dur-rapido) var(--ease-padrao), color var(--dur-rapido) var(--ease-padrao); }
.cal__day--pad { cursor: default; }
.cal__day:not([disabled]):hover { background: var(--marca-veu); border-color: var(--marca); }
.cal__day.is-today { box-shadow: inset 0 0 0 1.5px var(--cal-hoje-anel); font-weight: 600; }
.cal__day.is-sel { background: var(--cal-sel-bg); color: var(--cal-sel-texto); border-color: var(--cal-sel-bg); font-weight: 700; box-shadow: var(--shadow-ouro); }
.cal__day[disabled] { color: var(--texto-suave); opacity: .38; cursor: not-allowed; text-decoration: line-through; }
.cal__day:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.cal__hint { margin-top: var(--space-xs); font-size: var(--fs-legenda); color: var(--texto-suave); min-height: 1.2em; }
/* na face escura (scheduler sobre fundo escuro) segue os tokens remapeados */
[data-face="escura"] .cal, .face-escura .cal { background: var(--superficie); border-color: var(--borda); }

/* =========================================================================
   WIZARD multi-step (form em etapas)
   ========================================================================= */
.wz { position: relative; }
.wz__hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }
.wz__progress { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* sr-only: o stepper visual já informa */
.wz__steps { display: flex; align-items: center; gap: var(--space-xs); list-style: none; padding: 0; margin: 0 0 var(--space-lg); counter-reset: wz; }
.wz__steps [data-dot] { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-legenda); color: var(--texto-suave); font-weight: 600; }
.wz__steps [data-dot]::before { counter-increment: wz; content: counter(wz); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--fundo); border: 1px solid var(--borda-forte); color: var(--texto-suave); font-size: .75rem; transition: background var(--dur-rapido) var(--ease-padrao), color var(--dur-rapido) var(--ease-padrao); }
.wz__steps [data-dot]:not(:last-child)::after { content: ""; width: 20px; height: 1px; background: var(--borda-forte); margin-left: 4px; }
.wz__steps [data-dot].is-cur { color: var(--texto); }
.wz__steps [data-dot].is-cur::before { background: var(--cta-assinatura); border-color: var(--cta-assinatura); color: var(--cta-assin-texto); }
.wz__steps [data-dot].is-done::before { content: "✓"; background: var(--marca); border-color: var(--marca); color: var(--cta-texto); }
.wz__step { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.wz__step[hidden] { display: none; }
.wz__q { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-h3); color: var(--texto); padding: 0; margin: 0 0 var(--space-md); }
@media (prefers-reduced-motion: no-preference) { .wz__step:not([hidden]) { animation: wz-in var(--dur-medio) var(--ease-saida); } }
@keyframes wz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wz__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--space-sm); }
.wz__card { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--space-md); border: 1px solid var(--borda-forte); border-radius: var(--radius-medio); cursor: pointer; background: var(--superficie); transition: border-color var(--dur-rapido) var(--ease-padrao), background var(--dur-rapido) var(--ease-padrao), box-shadow var(--dur-rapido) var(--ease-padrao); }
.wz__card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wz__card-t { font-family: var(--font-display); font-size: 1.125rem; color: var(--texto); font-weight: 600; }
.wz__card-d { font-size: var(--fs-legenda); color: var(--texto-suave); }
.wz__card:hover { border-color: var(--marca); }
.wz__card:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
.wz__card:has(input:checked) { border-color: var(--cta-assinatura); background: var(--marca-veu); box-shadow: var(--shadow-ouro); }
.wz__nodate { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--fs-corpo-peq); color: var(--texto-suave); margin: var(--space-sm) 0 var(--space-md); cursor: pointer; }
.wz__nodate input { flex: none; width: 18px; height: 18px; accent-color: var(--marca); }
.wz__nav { display: flex; gap: var(--space-md); margin-top: var(--space-lg); }
.wz__nav [data-wz-next], .wz__nav [data-wz-submit] { flex: 1; }
.wz__alt { text-align: center; margin-top: var(--space-sm); }
.wz__alt button { background: none; border: 0; color: var(--marca); font: inherit; font-size: var(--fs-corpo-peq); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: var(--space-2xs); }
.wz__alt button:hover { color: var(--marca-alt); }

/* =========================================================================
   MAPA (facade → iframe sob clique)
   ========================================================================= */
.mapa { position: relative; border-radius: var(--radius-medio); overflow: hidden; box-shadow: var(--shadow-2); aspect-ratio: 16 / 10; background: var(--superficie-2); }
.mapa__facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; background: none; display: block; }
.mapa__facade img { width: 100%; height: 100%; object-fit: cover; }
.mapa__facade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(6,35,27,.12), rgba(6,35,27,.5)); }
.mapa__play { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: var(--radius-pill); background: var(--cta-assinatura); color: var(--cta-assin-texto); font-family: var(--font-texto); font-weight: 600; font-size: var(--fs-botao); box-shadow: var(--shadow-ouro); transition: transform var(--dur-rapido) var(--ease-saida); }
.mapa__facade:hover .mapa__play { transform: translate(-50%, -50%) scale(1.04); }
.mapa__facade:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ===== Facade de vídeo institucional (click-to-load Vimeo) ===== */
.video-facade { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: var(--radius-medio); cursor: pointer; background: var(--c-esmeralda-noite); }
.video-facade__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-facade__btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 76px; height: 76px; border: 0; border-radius: 50%; background: var(--cta-assinatura); color: var(--cta-assin-texto); font-size: 26px; cursor: pointer; transition: transform var(--dur-rapido) var(--ease-padrao), background var(--dur-rapido) var(--ease-padrao); box-shadow: var(--glow-escuro-2); }
.video-facade:hover .video-facade__btn { transform: translate(-50%, -50%) scale(1.06); }
.video-facade__btn:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.video-facade.is-playing { cursor: default; }
.video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ===== Tour 360° — facade → Street View interativo (click-to-load, igual ao original) ===== */
.tour-embed { margin-top: var(--space-2xl); }
.tour-facade { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: var(--radius-medio); cursor: pointer; background: var(--c-esmeralda-noite); box-shadow: var(--glow-escuro-1); }
.tour-facade__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-cinema) var(--ease-suave); }
.tour-facade:hover .tour-facade__poster { transform: scale(1.03); }
.tour-facade::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(6,35,27,.58), rgba(6,35,27,.04) 55%); }
.tour-facade__btn { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border: 1px solid var(--ouro-fio); border-radius: var(--radius-pill); background: var(--cta-assinatura); color: var(--cta-assin-texto); font-family: var(--font-texto); font-weight: 600; font-size: var(--fs-botao); box-shadow: var(--shadow-ouro); cursor: pointer; transition: transform var(--dur-rapido) var(--ease-saida); }
.tour-facade:hover .tour-facade__btn { transform: translate(-50%, -50%) scale(1.04); }
.tour-facade__btn svg { width: 20px; height: 20px; flex: none; }
.tour-facade__btn:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.tour-facade__hint { position: absolute; z-index: 1; left: 0; right: 0; bottom: var(--space-md); text-align: center; color: var(--texto-sobre-foto); font-size: var(--fs-legenda); letter-spacing: .02em; text-shadow: var(--text-shadow-foto); pointer-events: none; }
.tour-facade.is-playing { cursor: default; }
.tour-facade.is-playing::after, .tour-facade.is-playing .tour-facade__btn, .tour-facade.is-playing .tour-facade__hint, .tour-facade.is-playing .tour-facade__poster { display: none; }
.tour-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ===== Blog · "Diário do Green Place" — cards + corpo editorial (só tokens da marca) ===== */
.post-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); margin-top: var(--space-2xl); }
@media (min-width: 640px)  { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card { display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--radius-grande); overflow: hidden; box-shadow: var(--shadow-1); text-decoration: none; color: var(--texto); transition: box-shadow var(--dur-medio) var(--ease-padrao), transform var(--dur-medio) var(--ease-saida), border-color var(--dur-medio) var(--ease-padrao); }
.post-card:hover { box-shadow: var(--shadow-3); transform: translateY(-4px); border-color: var(--ouro-fio); }
.post-card:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.post-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-esmeralda-noite); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-cinema) var(--ease-suave); }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__tag { position: absolute; top: var(--space-md); left: var(--space-md); background: var(--header-fundo); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--marca); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--ouro-fio); }
.post-card__body { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); flex: 1; }
.post-card__meta { font-size: var(--fs-legenda); color: var(--texto-suave); letter-spacing: .04em; }
.post-card h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--texto); }
.post-card__excerpt { font-size: var(--fs-corpo); color: var(--texto-suave); line-height: var(--lh-corpo); }
.post-card__go { margin-top: auto; padding-top: var(--space-xs); font-size: var(--fs-corpo-peq); font-weight: 600; letter-spacing: .04em; color: var(--marca); display: inline-flex; align-items: center; gap: 6px; }
.post-card:hover .post-card__go { color: var(--marca-alt); }

/* Meta no topo do post (data · categoria · tempo de leitura) */
.post-meta { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: center; margin-top: var(--space-md); font-size: var(--fs-legenda); color: var(--texto-suave); letter-spacing: .04em; }
.post-meta .sep { color: var(--ouro); }

/* Corpo editorial do post */
.post-article { max-width: var(--container-editorial); margin-inline: auto; }
.post-article > * + * { margin-top: var(--space-lg); }
.post-article p { color: var(--texto-suave); line-height: var(--lh-corpo); font-size: var(--fs-corpo-grande); max-width: 68ch; }
.post-article p strong { color: var(--texto); font-weight: 600; }
.post-article h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--texto); margin-top: var(--space-2xl); }
.post-article h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--texto); margin-top: var(--space-xl); }
.post-article ul { color: var(--texto-suave); line-height: var(--lh-corpo); font-size: var(--fs-corpo-grande); padding-left: 1.4em; max-width: 68ch; }
.post-article li { list-style: disc; margin-top: var(--space-2xs); }
.post-article li::marker { color: var(--ouro); }
.post-article figure { margin-top: var(--space-2xl); margin-inline: auto; }
.post-article figure img { width: 100%; height: auto; border-radius: var(--radius-grande); box-shadow: var(--shadow-2); }
.post-article figcaption { font-size: var(--fs-legenda); color: var(--texto-suave); text-align: center; margin-top: var(--space-sm); font-style: italic; }
.post-article blockquote { border-left: 3px solid var(--ouro); padding-left: var(--space-lg); margin-top: var(--space-xl); font-family: var(--font-display); font-style: italic; font-size: var(--fs-corpo-grande); color: var(--texto); }

/* Bloco CTA editorial no fim do post */
.post-cta { max-width: var(--container-editorial); margin: var(--space-3xl) auto 0; padding: var(--space-2xl); border: 1px solid var(--ouro-fio); border-radius: var(--radius-grande); background: var(--marca-veu); text-align: center; }
.post-cta .cta-row { justify-content: center; }

/* ===== Consentimento LGPD — banner (montado por assets/js/analytics.js) ===== */
.consent { position: fixed; z-index: var(--z-toast); left: var(--space-md); right: var(--space-md); bottom: var(--space-md); max-width: 640px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg); background: var(--superficie); border: 1px solid var(--ouro-fio); border-radius: var(--radius-grande); box-shadow: var(--shadow-3); animation: consent-sobe var(--dur-medio) var(--ease-saida) both; }
@media (min-width: 760px) { .consent { flex-direction: row; align-items: center; gap: var(--space-xl); } }
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }
@keyframes consent-sobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.consent__txt { margin: 0; font-size: var(--fs-corpo-peq); line-height: var(--lh-corpo); color: var(--texto-suave); }
.consent__txt a { color: var(--marca); text-decoration: underline; text-underline-offset: 2px; }
.consent__txt a:hover { color: var(--marca-alt); }
.consent__acoes { display: flex; gap: var(--space-sm); flex-shrink: 0; }
.consent__acoes .btn { white-space: nowrap; }

/* O botão flutuante do WhatsApp não pode ficar por baixo do banner. */
.consent ~ .wa-float, .wa-float:has(~ .consent) { bottom: calc(var(--space-md) + 132px); }
@media (min-width: 760px) { .consent ~ .wa-float, .wa-float:has(~ .consent) { bottom: calc(var(--space-md) + 96px); } }

/* ===== Página 404 — lista de caminhos ===== */
.lista-404 { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); margin-top: var(--space-xl); }
@media (min-width: 720px) { .lista-404 { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } }
.lista-404 li { list-style: none; }
.lista-404 a { display: flex; flex-direction: column; gap: 2px; padding: var(--space-md) var(--space-lg); border: 1px solid var(--borda); border-left: 3px solid var(--ouro-fio); border-radius: var(--radius-medio); text-decoration: none; background: var(--superficie); transition: border-color var(--dur-medio) var(--ease-padrao), transform var(--dur-medio) var(--ease-saida), box-shadow var(--dur-medio) var(--ease-padrao); }
.lista-404 a:hover { border-left-color: var(--ouro); box-shadow: var(--shadow-2); transform: translateX(3px); }
.lista-404 a:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }
.lista-404 strong { font-family: var(--font-display); font-size: var(--fs-corpo-grande); color: var(--texto); font-weight: 500; }
.lista-404 span { font-size: var(--fs-corpo-peq); color: var(--texto-suave); }