/* =====================================================================
   Ulisses Imóveis · página do imóvel (v2)
   Identidade do Instagram dele: PRETO, DOURADO envelhecido e branco.
   Letras: Lato (títulos e texto) + Playfair Display itálico (palavra de destaque).
   Nada de verde, laranja ou azul: só preto, dourado e cinzas neutros.
   ===================================================================== */

@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/lato-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/lato-700.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/lato-900.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 500 800; font-display: swap; src: url("fonts/playfair-italic.woff2") format("woff2"); }

:root {
  --bg: #000;
  --bg-2: #0a0a0a;
  --card: #121212;
  --card-2: #1b1b1b;
  --gold: #b8955a;
  --gold-l: #e3c98f;
  --gold-d: #8d6f3c;
  --line: rgba(184, 149, 90, .34);
  --line-soft: rgba(255, 255, 255, .11);
  --white: #fff;
  --txt: #f4f2ee;
  --txt-2: #b6b2a9;
  --f-display: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-body: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; scroll-behavior: smooth; background: var(--bg); }
html.lock { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: 400 1.125rem/1.55 var(--f-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
picture { display: contents; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
svg { width: 1em; height: 1em; flex: none; }
:focus-visible { outline: 3px solid var(--gold-l); outline-offset: 3px; }
::selection { background: var(--gold); color: #000; }

.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--gold-l); color: #120c00; padding: 12px 18px; border-radius: 12px; font-weight: 700; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }

/* palavra de destaque: serifa itálica dourada, como nos cartões dele ("eu tomei.") */
.serif, .h2 em, .grp-title em, .who-name em, .sheet-h em {
  font-family: var(--f-serif); font-style: italic; font-weight: 600; letter-spacing: 0; color: var(--gold-l);
}

/* ---------- marca ---------- */
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { width: 132px; height: auto; }

/* =====================================================================
   1 · TOPO
   ===================================================================== */
.stage { position: relative; overflow: hidden; isolation: isolate; background: var(--bg); }

/* quadriculado dourado: some para baixo e fica mais fraco atrás do texto */
.tiles {
  position: absolute; inset: 0 0 auto 0; height: 760px; z-index: -2;
  background-image:
    linear-gradient(rgba(184, 149, 90, .26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184, 149, 90, .26) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(48% 31% at 50% 26%, rgba(0, 0, 0, .24), #000 100%), linear-gradient(#000 0%, transparent 88%);
  -webkit-mask-composite: source-in;
          mask-image: radial-gradient(48% 31% at 50% 26%, rgba(0, 0, 0, .24), #000 100%), linear-gradient(#000 0%, transparent 88%);
          mask-composite: intersect;
}
/* luz dourada, movendo bem devagar */
.aurora {
  position: absolute; inset: -10% -20% auto -20%; height: 620px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 46% at 22% 30%, rgba(184, 149, 90, .22), transparent 70%),
    radial-gradient(34% 44% at 82% 18%, rgba(227, 201, 143, .12), transparent 70%);
  animation: drift 20s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes drift { from { transform: translate3d(-3%, 0, 0) scale(1); } to { transform: translate3d(4%, 6%, 0) scale(1.12); } }

.hero { padding-top: calc(18px + env(safe-area-inset-top)); text-align: center; }
.hero .logo { margin-bottom: 10px; }

.h1 {
  margin: 0;
  max-width: 19ch; margin-inline: auto;
  font: 900 clamp(2rem, 8.2vw, 4.1rem)/1.04 var(--f-display);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hl {
  font-family: var(--f-serif); font-style: italic; font-weight: 600; letter-spacing: -0.01em;
  color: var(--gold-l);
  background: linear-gradient(100deg, var(--gold-l) 0 40%, #fffaf0 50%, var(--gold-l) 60% 100%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: glint 5.5s ease-in-out 1.2s infinite;
  /* as pontas da letra itálica passam da caixa do texto; sem isso o recorte do brilho as corta */
  padding-inline: .07em; margin-inline: -.07em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* o brilho atravessa a palavra; fora do trecho central a cor é o dourado liso */
@keyframes glint { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0% 0; } }

.sub { margin: 14px auto 0; max-width: 38ch; font-size: clamp(1.05rem, 4.2vw, 1.3rem); line-height: 1.45; color: #dcd9d2; text-wrap: balance; }
.sub b { color: var(--white); font-weight: 700; }

/* =====================================================================
   CARROSSEL
   ===================================================================== */
.gal { position: relative; margin-top: 22px; --sw: min(calc(76vw - 16px), 324px); --gap: 14px; --ratio: 4 / 5; --rh: 1.25; }

.gal-bg { position: absolute; inset: -40px 0 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(70% 52% at 50% 44%, rgba(184, 149, 90, .17) 0%, transparent 72%),
    radial-gradient(90% 50% at 50% 100%, rgba(184, 149, 90, .10) 0%, transparent 72%);
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }

.rail {
  position: relative; z-index: 1; display: flex; gap: var(--gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  /* o respiro de baixo deixa a sombra das fotos terminar sem ser cortada pela rolagem */
  padding: 16px calc(50% - var(--sw) / 2) 56px;
  margin-bottom: -26px;
  cursor: grab; -webkit-user-select: none; user-select: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
.rail:focus-visible { outline-offset: -6px; }
/* modo sem fim: sem rolagem nativa; o JavaScript move as fotos num círculo */
.js .rail { display: block; overflow: hidden; touch-action: pan-y; scroll-snap-type: none; padding: 0; height: calc(var(--sw) * var(--rh) + 70px); }
.js .slide { position: absolute; top: 14px; left: 50%; width: var(--sw); height: calc(var(--sw) * var(--rh)); margin-left: calc(var(--sw) / -2); flex: none; aspect-ratio: auto; }

.slide {
  position: relative; flex: 0 0 var(--sw); aspect-ratio: var(--ratio); margin: 0;
  scroll-snap-align: center; overflow: hidden; border-radius: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 26px 38px -22px rgba(0, 0, 0, .9);
  transform-origin: 50% 100%;
}
/* os efeitos de distância só existem com JavaScript (ele calcula --d, --a e --p no scroll) */
.js .slide {
  --d: 1; --a: 1; --p: 1;
  transform: translate3d(calc(var(--d) * (var(--sw) + var(--gap))), calc(var(--a) * 22px), 0) scale(calc(1 - var(--a) * .1)) rotate(calc(var(--p) * 2.2deg));
  opacity: calc(1 - var(--a) * .52);
}
.js .slide:first-child { --d: 0; --a: 0; --p: 0; }
.js .slide:last-child { --d: -1; --p: -1; }
.js .slide:nth-child(n+3):not(:last-child) { visibility: hidden; }
/* até a página sossegar, as fotos longe do centro nem entram no layout: assim só a primeira tela baixa (o JavaScript tira isto depois) */
.js .rail:not(.is-warm) .slide:nth-child(n+3):not(:last-child) { display: none; }

.ph { position: absolute; top: 0; bottom: 0; left: -7%; width: 114%; }
.js .ph { transform: translate3d(calc(var(--p, 0) * -6%), 0, 0); }
.ph img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); -webkit-user-drag: none; }
.slide.is-active .ph img { animation: kb 9s ease-out forwards; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.07); } }

.zoom {
  position: absolute; right: 12px; bottom: 12px; width: 46px; height: 46px; padding: 0; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .34); background: rgba(0, 0, 0, .66);
  color: #fff; font-size: 1.25rem;
}

.gal-foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gal-cap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gal-count { font: 700 .82rem/1.2 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.gal-count b { font-size: 1.05rem; color: var(--white); font-variant-numeric: tabular-nums; }
.gal-title { font: 900 1.35rem/1.15 var(--f-display); letter-spacing: -0.015em; min-height: 2.3em; }
.gal-cap.swap .gal-title, .gal-cap.swap .gal-count b { animation: swap .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes swap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.gal-arrows { display: flex; gap: 10px; flex: none; }
.arrow {
  width: 54px; height: 54px; padding: 0; display: grid; place-items: center; font-size: 1.4rem;
  border-radius: 50%; border: 1px solid var(--line); background: rgba(0, 0, 0, .55); color: var(--gold-l);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .2s, opacity .2s, transform .15s;
}
.arrow:not(:disabled):active { transform: scale(.92); background: var(--gold-l); color: #000; }
.arrow:disabled { opacity: .3; cursor: default; }

.progress { position: relative; z-index: 2; display: flex; gap: 4px; margin-top: 14px; }
.seg { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .18); position: relative; overflow: hidden; }
.seg::after { content: ""; position: absolute; inset: 0; background: var(--gold-l); transform: scaleX(0); transform-origin: left; }
.seg.done::after, .seg.cur::after { transform: scaleX(1); }
.progress.run .seg.cur::after { animation: fill var(--dur, 4.2s) linear forwards; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* =====================================================================
   BOTÃO (CTA)
   ===================================================================== */
.cta { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 30px; padding-bottom: 84px; text-align: center; }
.cta-price { margin: 0; font: 900 clamp(2rem, 9vw, 3rem)/1 var(--f-display); letter-spacing: -0.03em; color: var(--gold-l); }
.cta-note { margin: 0; color: var(--txt-2); font-size: 1rem; }

.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; max-width: 520px; min-height: 70px; padding: 12px 28px;
  border: 0; border-radius: 999px; text-decoration: none;
  font: 900 1.15rem/1.15 var(--f-display); letter-spacing: .01em;
  color: #120c00;
  background: linear-gradient(180deg, #ecd6a0 0%, var(--gold) 100%);
  box-shadow: 0 14px 34px -12px rgba(184, 149, 90, .6), inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn span { text-align: center; text-wrap: balance; }
.btn svg { font-size: 1.4rem; transition: transform .25s ease; }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: scale(.97); }
.btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  transform: translateX(-130%); animation: sheen 4s ease-in-out 1.5s infinite;
}
@keyframes sheen { 0% { transform: translateX(-130%); } 38%, 100% { transform: translateX(130%); } }
/* WhatsApp: contorno dourado (a página só usa preto, dourado e branco) */
.btn-ghost { display: block; width: 100%; min-height: 56px; margin-top: 12px; border: 0; background: none; font: 700 1.1rem var(--f-body); color: var(--txt-2); text-decoration: underline; text-underline-offset: 4px; }

/* onda na passagem para a seção de baixo (a mesma de antes, agora em dourado):
   a de trás é dourada e translúcida, a da frente tem a cor da seção de baixo e uma linha dourada na crista */
.wave { position: absolute; left: 0; right: 0; bottom: -1px; height: 52px; z-index: 3; pointer-events: none; }
.wave::before, .wave::after { content: ""; position: absolute; left: 0; bottom: 0; background-repeat: repeat-x; will-change: transform; }
.wave::before {
  width: calc(100% + 900px); height: 52px; background-size: 900px 52px; opacity: .34;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 52' preserveAspectRatio='none'%3E%3Cpath d='M0 26C112 2 338 2 450 26S788 50 900 26V52H0Z' fill='%23b8955a'/%3E%3C/svg%3E");
  animation: wave-b 26s linear infinite reverse;
}
.wave::after {
  width: calc(100% + 720px); height: 40px; background-size: 720px 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20C90 2 270 2 360 20S630 38 720 20V40H0Z' fill='%230a0a0a'/%3E%3Cpath d='M0 20C90 2 270 2 360 20S630 38 720 20' fill='none' stroke='%23e3c98f' stroke-opacity='.6' stroke-width='1.4'/%3E%3C/svg%3E");
  animation: wave-a 15s linear infinite;
}
@keyframes wave-a { to { transform: translate3d(-720px, 0, 0); } }
@keyframes wave-b { to { transform: translate3d(-900px, 0, 0); } }

/* =====================================================================
   2 · SOBRE O IMÓVEL
   ===================================================================== */
.about { position: relative; background: var(--bg-2); color: var(--txt); padding: 56px 0 88px; }

/* Desempenho: o que está abaixo da primeira tela só é calculado quando chega perto (nada muda na aparência).
   O botão final fica de fora porque o brilho dele passa da própria caixa. */
.about .sec-head, .about .facts, .about .grp, .about .who, .foot { content-visibility: auto; }
/* altura aproximada de cada bloco enquanto ele não foi mostrado (assim 'ir ao fim da página' cai no lugar certo; depois o navegador guarda a altura real) */
.about .sec-head { contain-intrinsic-size: auto 230px; }
.about .facts { contain-intrinsic-size: auto 366px; }
.about .grp--list { contain-intrinsic-size: auto 520px; }
.about section.grp:nth-of-type(2) { contain-intrinsic-size: auto 740px; }
.about section.grp:nth-of-type(3) { contain-intrinsic-size: auto 260px; }
.about .who { contain-intrinsic-size: auto 640px; }
.foot { contain-intrinsic-size: auto 410px; }
@media (min-width: 760px) {
  .about .sec-head { contain-intrinsic-size: auto 234px; } .about .facts { contain-intrinsic-size: auto 352px; } .about .grp--list { contain-intrinsic-size: auto 420px; }
  .about section.grp:nth-of-type(2) { contain-intrinsic-size: auto 543px; } .about section.grp:nth-of-type(3) { contain-intrinsic-size: auto 220px; } .about .who { contain-intrinsic-size: auto 507px; } .foot { contain-intrinsic-size: auto 357px; }
}
@media (min-width: 1000px) {
  .about .sec-head { contain-intrinsic-size: auto 178px; } .about .facts { contain-intrinsic-size: auto 190px; } .about .grp--list { contain-intrinsic-size: auto 240px; }
  .about section.grp:nth-of-type(3) { contain-intrinsic-size: auto 190px; } .about .who { contain-intrinsic-size: auto 330px; }
}

/* tracinho dourado + texto, como a assinatura "— Ulisses imóveis" dos cartões dele */
.chip { display: inline-flex; align-items: center; gap: 12px; color: var(--gold); font: 700 .8rem/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; }
.chip::before { content: ""; width: 30px; height: 1px; background: var(--gold); }
.h2 { margin: 18px 0 14px; font: 900 clamp(1.9rem, 7.4vw, 3.3rem)/1.06 var(--f-display); letter-spacing: -0.03em; text-wrap: balance; }
.h3 { margin: 0 0 8px; font: 900 1.45rem/1.15 var(--f-display); letter-spacing: -0.015em; }
.lead { margin: 0; font-size: 1.2rem; line-height: 1.55; color: var(--txt-2); max-width: 46ch; }
.lead b { color: var(--white); }

.sec-head { text-align: center; }
.sec-head .lead { margin-inline: auto; text-wrap: balance; }

/* números: uma faixa só, quatro células iguais (2x2 no celular), divisórias finas entre elas */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 36px 0 0; background: var(--line); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.fact { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 28px 22px 26px; background: var(--card); }
.fact::before { content: ""; position: absolute; left: 22px; top: 0; width: 38px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); }
.fact b { display: block; font: 900 clamp(2.8rem, 11vw, 3.8rem)/1 var(--f-display); letter-spacing: -0.04em; color: var(--white); }
.fact small { font-size: .38em; font-weight: 700; letter-spacing: 0; margin-left: 3px; color: var(--gold); }
.fact strong { margin-top: 14px; font: 900 .88rem/1.2 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-l); }
.fact > span { margin-top: 6px; font-size: 1.02rem; line-height: 1.4; color: var(--txt-2); text-wrap: balance; }
.nb { white-space: nowrap; }
.fact .long { display: none; }
@media (min-width: 480px) { .fact .long { display: inline; } }

/* Cada tipo de conteúdo é um GRUPO, com respiro entre eles, um rótulo dourado e um título:
   números (cartões) · destaques (lista com ✓) · diferenciais (cartão com foto) · localização (faixa) · quem vende (cartão com foto dele) */
.grp { margin-top: clamp(64px, 9vw, 104px); }
.grp-head { margin-bottom: 26px; }
.grp-title { margin: 14px 0 0; font: 900 clamp(1.7rem, 6vw, 2.5rem)/1.1 var(--f-display); letter-spacing: -0.03em; text-wrap: balance; }

/* destaques: lista simples, sem cartão e sem ícone grande */
.checks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.checks li { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); font-size: 1.12rem; line-height: 1.4; color: var(--txt-2); }
.checks svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; border: 1px solid var(--line); color: var(--gold-l); }
.checks b { font-weight: 700; color: var(--white); }

/* diferenciais: cartão com foto (no celular a foto vem em cima) */
.secure { display: grid; border-radius: 26px; overflow: hidden; background: var(--card); border: 1px solid var(--line); }
.secure-ph { order: -1; height: 280px; }
.secure-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.pillars { list-style: none; margin: 0; padding: 24px 22px 28px; display: grid; gap: 22px; align-content: center; }
.pillars li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
.pillars li + li { padding-top: 22px; border-top: 1px solid var(--line-soft); }
.pillars svg { width: 52px; height: 52px; padding: 12px; border-radius: 16px; background: rgba(184, 149, 90, .12); border: 1px solid var(--line); color: var(--gold-l); }
.pillars .h3 { margin: 2px 0 6px; font-size: 1.3rem; }
.pillars p { margin: 0; color: var(--txt-2); }
.pillars b { color: var(--white); }

/* localização: faixa com linha dourada na lateral, sem cartão */
.place { display: grid; gap: 20px; padding: 4px 0 4px 22px; border-left: 2px solid var(--gold); }
.place p { margin: 0; color: var(--txt-2); max-width: 52ch; }
/* sem lista de lugares por perto (não há dado): o texto ocupa a faixa toda */
.place.place--solo { grid-template-columns: 1fr; }
.near { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.near li { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 13px; border-radius: 999px; border: 1px solid var(--line); font-size: 1rem; font-weight: 700; color: var(--txt); }
.near li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* Quem vende: foto à esquerda, texto à direita (no celular, foto em cima) */
.who {
  position: relative; overflow: hidden; margin-top: clamp(64px, 9vw, 104px); padding: 26px 22px 28px; border-radius: 28px;
  display: grid; gap: 22px; justify-items: start;
  background: radial-gradient(60% 80% at 100% 0%, rgba(184, 149, 90, .16), transparent 70%), var(--card);
  border: 1px solid var(--line);
}
/* foto redonda (a do perfil do Instagram, pequena: não esticar). Anel dourado como o do Instagram dele. */
.who-photo { width: 140px; height: 140px; flex: none; padding: 4px; border-radius: 50%; background: linear-gradient(140deg, var(--gold-l), var(--gold-d)); }
.who-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #000; }
.who-body { align-self: center; }
.who-name { margin: 16px 0 12px; font: 900 clamp(1.9rem, 7vw, 2.8rem)/1.05 var(--f-display); letter-spacing: -0.03em; }
.who p { margin: 0 0 18px; color: var(--txt-2); max-width: 52ch; }
.values { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.values li { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); color: var(--gold-l); font-weight: 700; font-size: .95rem; }
/* frase dele, no jeito dos cartões do Instagram: caixa alta, palavra de destaque em dourado, aspas douradas */
.who-quote { grid-column: 1 / -1; width: 100%; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--line); }
.who-quote::before { content: "\201C"; display: block; height: 34px; font: 900 4.2rem/.9 var(--f-display); color: var(--gold); }
.who .who-quote p { margin: 0 0 14px; max-width: none; font: 900 clamp(1.4rem, 5.6vw, 1.9rem)/1.2 var(--f-display); text-transform: uppercase; letter-spacing: -0.01em; color: var(--white); text-wrap: balance; }
.who-quote p span { color: var(--gold-l); }
.who-quote cite { display: flex; align-items: center; gap: 10px; font-style: normal; font-size: .95rem; color: var(--txt-2); }
.who-quote cite::before { content: ""; width: 24px; height: 1px; background: var(--gold); }

.cta--end { padding: clamp(48px, 7vw, 72px) 0 0; gap: 14px; }

/* =====================================================================
   RODAPÉ
   ===================================================================== */
.foot { background: var(--bg); border-top: 1px solid var(--line); color: var(--txt-2); padding: 44px 0 calc(40px + env(safe-area-inset-bottom)); font-size: 1rem; text-align: center; }
.foot-brand { display: flex; justify-content: center; margin-bottom: 8px; }
.foot-brand img { width: 150px; height: auto; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; margin: 6px 0 20px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--txt); font-weight: 700; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px; }
.foot-small { margin: 0 auto 10px; max-width: 62ch; font-size: .92rem; line-height: 1.5; }
.foot-small[hidden] { display: none; }

/* =====================================================================
   FORMULÁRIO
   Janela sóbria, SEMPRE centralizada, que cabe na tela e rola por dentro.
   O botão e a caixinha de concordância ficam num rodapé fixo (sempre à vista).
   Cantos quase retos, borda fina dourada, sem brilho e sem formas redondas.
   ===================================================================== */
dialog { color: var(--txt); }
dialog::backdrop { background: rgba(0, 0, 0, .84); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; } }

/* o <dialog> cobre a tela inteira (transparente) e o .panel é a janela de verdade */
.sheet {
  position: fixed; inset: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  border: 0; background: transparent; overflow: hidden;
}
.sheet[open] { display: flex; align-items: center; justify-content: center; }
.panel {
  position: relative; display: flex; flex-direction: column; min-height: 0;
  width: 100%; max-width: 460px; max-height: 100%;
  background: #0b0b0b; border: 1px solid var(--line); border-top: 2px solid var(--gold); border-radius: 4px;
  box-shadow: 0 28px 80px -24px rgba(0, 0, 0, .95);
  animation: panel-in .26s ease-out;
}
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } }
.panel:focus { outline: none; }

.view { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.view[hidden] { display: none; }
#lead-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 24px 20px 8px; }
/* aviso de que tem mais embaixo: o fim da área rolável some aos poucos, até chegar no final */
.sheet-body.has-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent); }
.sheet-foot { flex: none; padding: 14px 20px 16px; border-top: 1px solid var(--line-soft); background: #0b0b0b; border-radius: 0 0 3px 3px; }

.sheet-x { position: absolute; top: 6px; right: 6px; z-index: 3; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 2px; background: transparent; color: var(--txt-2); font-size: 1.25rem; transition: color .15s; }
.sheet-x:hover { color: var(--gold-l); }

.sheet-tag { margin: 0 0 8px; padding-right: 40px; font: 700 .74rem/1.3 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.sheet-h { margin: 0 0 8px; padding-right: 36px; font: 900 1.65rem/1.1 var(--f-display); letter-spacing: -0.02em; }
.sheet-p { margin: 0 0 22px; color: var(--txt-2); font-size: 1rem; line-height: 1.5; }
@media (max-height: 700px) { .sheet-body { padding-top: 20px; } .sheet-h { font-size: 1.5rem; } .sheet-p { margin-bottom: 16px; } }

/* campos de texto */
.field { margin: 0 0 16px; }
.lab { display: block; margin: 0 0 6px; font: 700 .92rem/1.3 var(--f-body); color: var(--txt); }
.field input[type="text"], .field input[type="email"] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 50px; padding: 0 14px; border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, .22); background: #111;
  font: 400 1.0625rem var(--f-body); color: var(--white);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.field input[aria-invalid="true"] { border-color: var(--gold-l); box-shadow: 0 0 0 1px var(--gold-l); }

/* mensagem de erro: texto com uma linha dourada ao lado (nada de vermelho nem de bolinha) */
.err { margin: 8px 0 0; padding-left: 10px; border-left: 2px solid var(--gold-l); color: var(--white); font: 700 .9rem/1.35 var(--f-body); }
.err:empty { display: none; }
.err--form { margin: 0 0 12px; }

/* perguntas de sim ou não: lista com filetes, pergunta à esquerda e Sim/Não à direita */
.qs { margin: 6px 0 4px; border-top: 1px solid var(--line-soft); }
.q { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.q-t { margin: 0; font-size: .98rem; line-height: 1.35; color: var(--txt); }
.q .err { grid-column: 1 / -1; margin-top: 2px; }
.q[aria-invalid="true"] .q-t { color: var(--gold-l); }
.yn { display: flex; }
.yn label { position: relative; display: block; margin: 0; }
.yn input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.yn span { position: relative; display: flex; align-items: center; justify-content: center; width: 58px; height: 44px; border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: var(--txt-2); font: 700 .95rem var(--f-body); transition: background .15s, color .15s, border-color .15s; }
.yn label:first-child span { border-radius: 2px 0 0 2px; }
.yn label + label span { margin-left: -1px; border-radius: 0 2px 2px 0; }
.yn input:checked + span { z-index: 1; border-color: var(--gold); background: rgba(184, 149, 90, .16); color: var(--gold-l); }
.yn input:focus-visible + span { z-index: 2; outline: 2px solid var(--gold-l); outline-offset: 2px; }

.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* concordância (fica no rodapé fixo, junto do botão) */
.consent { margin: 0 0 12px; }
.check { position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: .84rem; line-height: 1.4; color: var(--txt-2); cursor: pointer; }
.check input { position: absolute; opacity: 0; left: 0; top: 0; width: 22px; height: 22px; margin: 0; }
.check .box { flex: none; width: 22px; height: 22px; margin-top: 1px; display: grid; place-items: center; border-radius: 2px; border: 1px solid rgba(255, 255, 255, .4); background: #111; color: transparent; font-size: .85rem; transition: background .15s, color .15s, border-color .15s; }
.check input:checked + .box { background: var(--gold); border-color: var(--gold); color: #0a0700; }
.check input:focus-visible + .box { outline: 2px solid var(--gold-l); outline-offset: 2px; }
.check a { color: var(--gold-l); font-weight: 700; }

/* botões dentro da janela: retos, dourado liso, sem brilho */
.sheet .btn { max-width: none; min-height: 54px; padding: 10px 18px; border-radius: 3px; background: var(--gold); box-shadow: none; font: 900 1rem/1.2 var(--f-display); letter-spacing: .01em; transition: background .15s, transform .12s; }
.sheet .btn::after { display: none; }
.sheet .btn svg { font-size: 1.15rem; }
.sheet .btn:hover { background: var(--gold-l); }
.sheet .btn:active { transform: scale(.985); }
.sheet .btn[disabled] { opacity: .6; pointer-events: none; }
.sheet .btn[hidden] { display: none; }
.sheet .btn-ghost { min-height: 48px; margin-top: 6px; font-size: 1rem; }
#done-view .sheet-foot .btn + .btn-ghost { margin-top: 8px; }

.test-note { margin: 0 0 8px; padding: 12px 14px; border-radius: 2px; border-left: 2px solid var(--gold); background: rgba(184, 149, 90, .08); color: var(--txt); font-size: .94rem; line-height: 1.45; }
.test-note p { margin: 0 0 8px; }
.test-note code { font-size: .92em; background: rgba(255, 255, 255, .1); padding: 1px 6px; border-radius: 2px; }
.test-note .msg { margin: 0; white-space: pre-wrap; word-break: break-word; font: 400 .88rem/1.5 var(--f-body); color: var(--gold-l); }
#done-title:focus { outline: none; }

/* celular deitado ou tela muito baixa: tira o texto de apoio para sobrar espaço aos campos */
@media (max-height: 520px) {
  .sheet-p, .sheet-tag { display: none; }
  .sheet-body { padding-top: 18px; }
  .sheet-foot { padding: 10px 20px 12px; }
  .consent { margin-bottom: 8px; }
  .sheet .btn { min-height: 48px; }
}
/* celular deitado: janela mais larga e rodapé em uma linha só (concordância à esquerda, botão à direita) */
@media (max-height: 520px) and (min-width: 640px) {
  .sheet .panel { max-width: 660px; }
  #form-view .sheet-foot { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 0 20px; align-items: center; }
  #form-view .consent { grid-area: 1 / 1; margin: 0; }
  #form-view .sheet-foot > .btn { grid-area: 1 / 2; }
  #form-view .err--form { grid-area: 2 / 1 / 3 / 3; margin: 10px 0 0; }
}

/* =====================================================================
   FOTO INTEIRA
   ===================================================================== */
.lb { position: fixed; inset: 0; margin: 0; padding: 0; border: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: rgba(0, 0, 0, .97); color: #fff; }
.lb[open] { display: grid; grid-template-rows: 1fr auto; animation: fade .25s ease; }
.lb-stage { display: grid; place-items: center; padding: 70px 10px 8px; min-height: 0; touch-action: pan-y; }
.lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; animation: swap .35s cubic-bezier(.2, .8, .2, 1); -webkit-user-drag: none; }
.lb-cap { margin: 0; padding: 10px 20px calc(22px + env(safe-area-inset-bottom)); text-align: center; font-size: 1.1rem; }
.lb-cap b { color: var(--gold-l); font-variant-numeric: tabular-nums; margin-right: 8px; }
.lb-x, .lb-nav { position: absolute; z-index: 2; width: 52px; height: 52px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); color: #fff; font-size: 1.4rem; }
.lb-x { right: 14px; top: calc(14px + env(safe-area-inset-top)); }
.lb-nav { top: 50%; margin-top: -26px; }
.lb-nav[hidden] { display: none; }
.lb-prev { left: 10px; }
.lb-next { right: 10px; }

/* =====================================================================
   REVELAR AO ROLAR
   ===================================================================== */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .rv.in { opacity: 1; transform: none; }

/* =====================================================================
   TELAS MAIORES
   ===================================================================== */
@media (min-width: 760px) {
  body { font-size: 1.2rem; }
  .hero { padding-top: calc(24px + env(safe-area-inset-top)); }
  .hero .logo { margin-bottom: 14px; }
  .logo img { width: 168px; }
  .gal { margin-top: 26px; --sw: min(calc(66vw - 60px), 760px); --ratio: 3 / 2; --rh: .6667; --gap: 22px; }
  .rail { padding-block: 22px 56px; }
  .gal-title { min-height: 0; font-size: 1.65rem; }
  .sec-head .lead { max-width: 70ch; }
  .grp-head { margin-bottom: 32px; }
  .grp--list { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 0 clamp(32px, 5vw, 72px); align-items: start; }
  .grp--list .grp-head { margin: 0; }
  .checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 4vw, 56px); }
  .checks li { padding: 20px 0; }
  .secure { grid-template-columns: 1.15fr .85fr; }
  .place { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px clamp(28px, 4vw, 56px); align-items: center; padding-left: 32px; }
  .secure-ph { order: 0; position: relative; height: auto; min-height: 420px; }
  .secure-ph img { position: absolute; inset: 0; }
  .pillars { padding: 40px 44px; gap: 26px; }
  .pillars li + li { padding-top: 26px; }
  .who { grid-template-columns: auto 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; justify-items: start; padding: 40px clamp(28px, 4vw, 56px); }
  .who-photo { width: 164px; height: 164px; }
  .who-name { margin-top: 18px; }
  .who-quote { padding-top: 26px; }
  .near li { font-size: 1.05rem; }
  .panel { max-width: 480px; }
  .sheet-body { padding: 30px 30px 10px; }
  .sheet-foot { padding: 16px 30px 22px; }
  .sheet-h { font-size: 1.9rem; }
  .lb-stage { padding: 40px 90px 8px; }
  .lb-nav { width: 60px; height: 60px; }
  .lb-prev { left: 24px; }
  .lb-next { right: 24px; }
}

@media (min-width: 1000px) {
  .facts { grid-template-columns: repeat(4, 1fr); }
  .fact { padding: 32px 26px 30px; }
}
@media (min-width: 1100px) {
  .who { grid-template-columns: auto minmax(0, 1fr) minmax(260px, 330px); }
  .who-quote { grid-column: auto; padding: 0 0 0 clamp(24px, 3vw, 44px); border-top: 0; border-left: 1px solid var(--line); }
}

/* =====================================================================
   PÁGINAS DE TEXTO (privacidade e termos)
   ===================================================================== */
.doc-top { background: var(--bg); border-bottom: 1px solid var(--line); padding: calc(10px + env(safe-area-inset-top)) 0 12px; }
.doc-top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.doc-top .logo img { width: 104px; }
.doc-back { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 1rem; color: var(--gold-l); text-decoration: none; }
.doc { background: var(--bg-2); color: var(--txt); padding: 44px 0 72px; }
.doc-in { max-width: 760px; margin: 0 auto; padding-inline: var(--gutter); }
.doc h1 { margin: 14px 0 8px; font: 900 clamp(2.1rem, 8.4vw, 3.3rem)/1.04 var(--f-display); letter-spacing: -0.03em; }
.doc .upd { margin: 0 0 28px; color: var(--txt-2); font-size: 1rem; }
.doc h2 { margin: 38px 0 10px; font: 900 1.5rem/1.15 var(--f-display); letter-spacing: -0.015em; }
.doc p, .doc li { font-size: 1.08rem; line-height: 1.7; color: #dedbd4; }
.doc p { margin: 0 0 14px; }
.doc ul { margin: 0 0 14px; padding-left: 1.3em; }
.doc li { margin-bottom: 6px; }
.doc b { color: var(--white); }
.doc a { color: var(--gold-l); font-weight: 700; text-underline-offset: 4px; }
.tbd { display: inline-block; padding: 1px 9px; border-radius: 7px; background: rgba(184, 149, 90, .2); border: 1px solid var(--line); color: var(--gold-l); font-weight: 900; font-size: .82em; letter-spacing: .05em; }
.doc .box { padding: 18px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line-soft); margin: 0 0 14px; }
.doc .box p:last-child { margin-bottom: 0; }

/* =====================================================================
   MOVIMENTO REDUZIDO
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
  .hl { background: none; -webkit-text-fill-color: var(--gold-l); }
}