/* =========================================================
   MFEL Imóveis — Next Link
   Navy #010426 · Dourado #D4BA78 · Branco #FAF9F5
   ========================================================= */

:root {
  --navy: #010426;
  --navy-2: #060b3e;
  --navy-3: #0b1250;
  --gold: #D4BA78;
  --gold-light: #F0D787;
  --gold-mid: #C49A55;
  --gold-dark: #A47735;
  --ivory: #FAF9F5;
  --text: rgba(250, 249, 245, .86);
  --muted: rgba(250, 249, 245, .56);
  --hair: rgba(212, 186, 120, .3);
  --metal: linear-gradient(115deg, #A47735 0%, #F0D787 28%, #D4BA78 50%, #FFF1BE 62%, #C49A55 82%, #A47735 100%);
  --serif: "Cormorant Garamond", "Didot", Georgia, serif;
  --sans: "Manrope", "Inter", system-ui, sans-serif;
  --ease: cubic-bezier(.22, .8, .2, 1);
  --w: 440px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }

body {
  min-height: 100svh;
  background: var(--navy);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-intro, body.is-about { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { overflow: visible; }

/* =========================================================
   FUNDO — céu noturno + cidade com janelas acendendo
   ========================================================= */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(130% 70% at 50% 0%, #0c1462 0%, rgba(12, 20, 98, 0) 62%),
    linear-gradient(180deg, #020533 0%, var(--navy) 55%, #02031c 100%);
}
.sky__glow {
  position: absolute; left: 50%; bottom: 8%;
  width: 160vw; height: 50vh; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(212, 186, 120, .18), rgba(212, 186, 120, 0));
  animation: breathe 8s ease-in-out infinite;
}
.sky__beam {
  position: absolute; left: 50%; bottom: 20%;
  width: 2px; height: 90vh;
  transform-origin: 50% 100%;
  background: linear-gradient(to top, rgba(240, 215, 135, .22), transparent);
  filter: blur(6px);
  animation: beam 40s ease-in-out infinite; opacity: .6;
}
.sky__beam::after {
  content: ""; position: absolute; inset: 0 -30px;
  background: linear-gradient(to top, rgba(240, 215, 135, .07), transparent 80%);
  filter: blur(14px);
}
@keyframes breathe { 50% { opacity: .55; } }
@keyframes beam { 0%, 100% { transform: translateX(-50%) rotate(-28deg); } 50% { transform: translateX(-50%) rotate(28deg); } }

.city {
  position: fixed; left: 0; bottom: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}

/* =========================================================
   LAYOUT
   ========================================================= */
.page {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--w);
  margin: 0 auto;
  padding: max(40px, env(safe-area-inset-top)) 20px calc(80px + env(safe-area-inset-bottom));
  transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease);
}
body.is-about .page { opacity: 0; transform: scale(.96); filter: blur(8px); }

/* ---------- Hero ---------- */
.hero { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Logo em destaque: flash no escudo + "retorno" + onda no MFEL */
.brand { position: relative; width: 74%; max-width: 290px; margin: 8px auto 0; --cycle: 6.5s; }

.brand__emblem { position: relative; width: 74.3%; margin: 0 auto; }
.brand__img {
  position: relative; width: 100%; height: auto;
  filter: drop-shadow(0 12px 40px rgba(212, 186, 120, .22));
}
@keyframes logoGlow {
  0%, 18%, 60%, 100% { filter: drop-shadow(0 12px 40px rgba(212, 186, 120, .22)) brightness(1); }
  30% { filter: drop-shadow(0 0 34px rgba(240, 215, 135, .65)) brightness(1.12); }
}
.brand__shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 250, 228, 0) 44%, rgba(255, 250, 228, .95) 50%, rgba(255, 250, 228, 0) 56%, transparent 58%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-mask: url("assets/emblema.png") center / 100% 100% no-repeat;
          mask: url("assets/emblema.png") center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  animation: logoShine var(--cycle) cubic-bezier(.45, .05, .25, 1) infinite;
}
@keyframes logoShine { 0%, 6% { background-position: 100% 0; } 32%, 100% { background-position: 0% 0; } }
.brand__halo {
  display: none; /* brilho pulsante desativado */
  position: absolute; left: 50%; top: 50%; width: 160%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(240, 215, 135, .28), rgba(212, 186, 120, .08) 45%, transparent 70%);
  opacity: .35;
  animation: halo var(--cycle) ease-in-out infinite;
}
@keyframes halo { 0%, 18%, 70%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(.95); } 32% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
.brand__ring {
  display: none; /* explosão do escudo desativada */
  position: absolute; left: 50.3%; top: 49.9%; width: 92.8%;
  transform: translate(-50%, -50%) scale(1);
  fill: none; stroke: #F0D787; stroke-width: 5;
  opacity: 0; pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(240, 215, 135, .9));
  animation: ring var(--cycle) var(--ease) infinite;
}
.brand__ring--2 { animation-delay: .25s; stroke-width: 3; }
@keyframes ring {
  0%, 24% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
  28% { opacity: .9; }
  52%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.32); }
}

/* Wordmark — — MFEL — — */
.brand__word { display: flex; align-items: center; justify-content: center; gap: 4.5%; margin-top: 11%; }
.brand__line {
  width: 21.6%; height: 3px;
  background: linear-gradient(90deg, #A47735, #F0D787 35%, #FFF1BE 50%, #F0D787 65%, #C49A55);
  background-size: 300% 100%;
  box-shadow: 0 0 8px rgba(240, 215, 135, .35);
  transform: scaleX(0);
}
.brand__line--l { transform-origin: right; }
.brand__line--r { transform-origin: left; }
body.is-ready .brand__line { animation: lineIn 1.1s var(--ease) .9s forwards, lineShimmer 5s linear 2s infinite; }
@keyframes lineIn { to { transform: scaleX(1); } }
@keyframes lineShimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }

.brand__letters { display: flex; width: 43.2%; }
.brand__l {
  display: block; width: var(--w);
  opacity: 0; transform: translateY(40%); filter: blur(6px);
}
body.is-ready .brand__l {
  animation: letterIn 1s cubic-bezier(.2, .9, .25, 1.25) forwards;
  animation-delay: calc(.35s + var(--n) * .13s);
}
@keyframes letterIn { to { opacity: 1; transform: none; filter: none; } }
.brand__l img {
  width: 100%;
  animation: letterWave var(--cycle) ease-in-out infinite;
  animation-delay: calc(3.4s + var(--n) * .12s);
}
/* onda de luz da esquerda para a direita (sem movimento), depois fica parado */
@keyframes letterWave {
  0%, 15%, 100% { filter: none; }
  5% { filter: brightness(1.45) drop-shadow(0 0 6px rgba(240, 215, 135, .85)); }
  10% { filter: brightness(1.1); }
}

.brand__sub { width: 33.7%; margin: 2.4% auto 0; clip-path: inset(0 100% 0 0); }
body.is-ready .brand__sub { animation: wipe 1.3s var(--ease) 1.25s forwards; }
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }

.hero__eyebrow {
  margin-top: 40px; padding: 12px 0;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  display: inline-block;
  font-size: .58rem; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--gold);
}
.hero__tagline {
  margin: 34px auto 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1rem, 4.9vw, 1.4rem); line-height: 1.3; color: var(--ivory);
  letter-spacing: .01em;
}
.hero__tagline em {
  font-style: italic; font-weight: 300;
  background: var(--metal); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: metal 6s ease-in-out infinite;
}

/* ---------- Faixa (ticker) ---------- */
.ticker {
  position: relative;
  margin: 28px -20px 0;
  padding: 13px 0;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  background: linear-gradient(90deg, rgba(1, 4, 38, .9), rgba(11, 18, 80, .55), rgba(1, 4, 38, .9));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker__track {
  display: flex; width: max-content;
  animation: marquee 32s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 0 22px;
  font-size: .6rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.ticker__item b {
  font-family: var(--serif); font-weight: 500;
  font-size: 1.05rem; letter-spacing: .12em; color: var(--gold-light);
}
.ticker__item::after {
  content: ""; align-self: center;
  width: 5px; height: 5px; margin-left: 22px;
  border: 1px solid var(--gold); transform: rotate(45deg);
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* =========================================================
   BOTÕES — retos, ícone em quadro, preenchimento dourado
   ========================================================= */
.links { display: grid; gap: 10px; margin-top: 28px; }

.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 64px;
  padding: 10px 16px 10px 10px;
  text-align: left;
  border: 1px solid var(--hair);
  border-radius: 0;
  background: rgba(4, 8, 48, .72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease), transform .3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
/* preenchimento dourado */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--metal); background-size: 200% 100%;
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease);
}
/* brilho passando de tempos em tempos */
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(240, 215, 135, .16), transparent);
  transform: skewX(-18deg);
  animation: sheen 7s var(--ease) infinite;
  animation-delay: calc(var(--i, 0) * .45s + 2s);
}
@keyframes sheen { 0% { left: -40%; } 22%, 100% { left: 130%; } }

.btn:hover, .btn:focus-visible, .btn.is-touch {
  border-color: var(--gold-light);
  box-shadow: 0 12px 34px -14px rgba(240, 215, 135, .6);
}
.btn:hover::before, .btn:focus-visible::before, .btn.is-touch::before { transform: scaleX(1); animation: metal 4s ease-in-out infinite; }
.btn:active { transform: scale(.985); }
.btn:focus-visible { outline: none; }
@keyframes metal { 50% { background-position: 100% 0; } }

.btn__icon {
  flex: 0 0 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--hair);
  color: var(--gold);
  transition: color .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}
.btn__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.btn__icon svg.fill { fill: currentColor; stroke: none; }

.btn__text { flex: 1; display: grid; gap: 3px; }
.btn__text strong {
  font-family: var(--serif); font-weight: 500;
  font-size: 1.16rem; letter-spacing: .05em; color: var(--ivory);
  transition: color .45s var(--ease);
}
.btn__text small {
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  transition: color .45s var(--ease);
}
.btn__arrow { width: 20px; color: var(--gold); transition: transform .45s var(--ease), color .45s var(--ease); }
.btn__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.btn:hover .btn__icon, .btn:focus-visible .btn__icon, .btn.is-touch .btn__icon { color: var(--navy); border-color: rgba(1, 4, 38, .3); background: rgba(1, 4, 38, .06); }
.btn:hover .btn__text strong, .btn:focus-visible .btn__text strong, .btn.is-touch .btn__text strong { color: var(--navy); }
.btn:hover .btn__text small, .btn:focus-visible .btn__text small, .btn.is-touch .btn__text small { color: rgba(1, 4, 38, .7); }
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow, .btn.is-touch .btn__arrow { color: var(--navy); transform: translateX(4px); }

/* WhatsApp: borda dourada pulsando de leve */
.links .btn:first-child { border-color: rgba(240, 215, 135, .6); animation: pulse 3.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 1px rgba(240, 215, 135, .25), 0 0 26px -6px rgba(240, 215, 135, .45); } }

/* =========================================================
   O QUE VOCÊ PROCURA
   ========================================================= */
.seek { margin-top: 48px; text-align: center; }

.eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: .62rem; font-weight: 500;
  letter-spacing: .36em; text-transform: uppercase; color: var(--gold);
}
.eyebrow::before, .eyebrow::after { content: ""; width: 26px; height: 1px; background: var(--hair); }

.seek__lead {
  margin-top: 12px;
  font-family: var(--serif); font-weight: 300; font-size: 1.12rem; line-height: 1.4;
  color: var(--text);
}
.seek__lead em { font-style: italic; color: var(--gold-light); }

.seek__grid {
  margin-top: 20px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.seek__item {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; justify-items: center; gap: 4px;
  padding: 18px 4px 14px;
  border: 1px solid rgba(212, 186, 120, .2);
  background: rgba(4, 8, 48, .6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .45s var(--ease), transform .45s var(--ease);
}
.seek__item::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--metal); background-size: 200% 200%;
  transform: translateY(101%);
  transition: transform .5s var(--ease);
}
/* destaque que percorre os cards em sequência */
.seek__item::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  border: 1px solid var(--gold-light);
  opacity: 0;
  animation: spot 9s ease-in-out infinite;
  animation-delay: calc(var(--k, 0) * 1.5s);
}
@keyframes spot { 0%, 14%, 100% { opacity: 0; } 5% { opacity: 1; box-shadow: 0 0 22px -4px rgba(240, 215, 135, .5) inset; } }

.seek__item svg {
  width: 30px; height: 30px; margin-bottom: 6px;
  fill: none; stroke: var(--gold); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .45s var(--ease), transform .45s var(--ease);
}
.seek__item svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.seek__item.is-in svg path { animation: drawIcon 1.6s var(--ease) forwards; animation-delay: calc(var(--k, 0) * .12s + .2s); }
@keyframes drawIcon { to { stroke-dashoffset: 0; } }

.seek__item strong {
  font-family: var(--serif); font-weight: 500; font-size: 1.02rem; letter-spacing: .04em;
  color: var(--ivory); transition: color .45s var(--ease);
}
.seek__item small {
  font-size: .52rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); transition: color .45s var(--ease);
}
.seek__item:hover, .seek__item:focus-visible, .seek__item.is-touch { border-color: var(--gold-light); transform: translateY(-2px); outline: none; }
.seek__item:hover::before, .seek__item:focus-visible::before, .seek__item.is-touch::before { transform: none; }
.seek__item:hover svg, .seek__item:focus-visible svg, .seek__item.is-touch svg { stroke: var(--navy); transform: scale(1.08); }
.seek__item:hover strong, .seek__item:focus-visible strong, .seek__item.is-touch strong { color: var(--navy); }
.seek__item:hover small, .seek__item:focus-visible small, .seek__item.is-touch small { color: rgba(1, 4, 38, .7); }

.seek__perks {
  list-style: none; margin-top: 18px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px;
}
.seek__perks li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.seek__perks li::before { content: ""; width: 5px; height: 5px; border: 1px solid var(--gold); transform: rotate(45deg); }

/* ---------- Rodapé ---------- */
.foot { text-shadow: 0 1px 8px #010426; margin-top: 52px; text-align: center; display: grid; gap: 8px; justify-items: center; }
.foot__mark { width: 9px; height: 9px; margin-bottom: 6px; border: 1px solid var(--gold); transform: rotate(45deg); }
.foot p { font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.foot__credit { font-size: .72rem; letter-spacing: .14em; color: rgba(250, 249, 245, .6); transition: color .3s; }
.foot__credit strong { font-weight: 600; color: var(--gold-light); letter-spacing: .16em; border-bottom: 1px solid rgba(240, 215, 135, .35); padding-bottom: 2px; transition: border-color .3s; }
.foot__credit:hover strong { border-color: var(--gold-light); }

/* ---------- Revelações ---------- */
.reveal { opacity: 0; transform: translateY(14px); }
body.is-ready .reveal {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.sr { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.sr.is-in { opacity: 1; transform: none; }

/* =========================================================
   SOBRE MIM
   ========================================================= */
.about {
  position: fixed; inset: 0; z-index: 5;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  clip-path: inset(100% 0 0 0);
  transition: clip-path .9s var(--ease), visibility 0s .9s;
  background: linear-gradient(180deg, rgba(1, 4, 38, .55), rgba(1, 4, 38, .25));
}
body.is-about .about { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .9s var(--ease), visibility 0s; }
/* linha dourada que acompanha a cortina */
.about::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 1px; z-index: 6;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
  box-shadow: 0 0 18px 2px rgba(240, 215, 135, .5);
  opacity: 0;
}
body.is-about .about::before { animation: curtainLine .9s var(--ease); }
@keyframes curtainLine { 0% { top: 100%; opacity: 1; } 85% { opacity: 1; } 100% { top: 0; opacity: 0; } }

.about__progress { position: sticky; top: 0; z-index: 4; height: 2px; background: rgba(212, 186, 120, .12); }
.about__progress span { display: block; height: 100%; width: 100%; background: var(--metal); transform-origin: left; transform: scaleX(var(--p, 0)); }

.about__inner {
  position: relative;
  max-width: var(--w); margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 22px calc(80px + env(safe-area-inset-bottom));
  text-align: center;
}

.back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
  padding: 10px 0; float: left;
}
.back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.back:hover svg { transform: translateX(-3px); }

/* Retrato editorial */
.portrait { clear: both; position: relative; width: 78%; max-width: 300px; margin: 30px auto 34px; }
.portrait__frame {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--gold);
  background: var(--navy-2);
}
.portrait__frame img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%;
  transform: scale(1.15);
  clip-path: inset(100% 0 0 0);
  transition: transform 2.4s var(--ease), clip-path 1.4s var(--ease) .2s;
}
.portrait.is-in .portrait__frame img { transform: scale(1.02); clip-path: inset(0 0 0 0); }
.portrait__frame::after { /* gradiente inferior */
  content: ""; position: absolute; inset: 55% 0 0; pointer-events: none;
  background: linear-gradient(to top, rgba(1, 4, 38, .85), transparent);
}
.portrait__shine {
  position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 241, 190, .35), transparent);
  transform: skewX(-16deg);
}
.portrait.is-in .portrait__shine { animation: shineOnce 1.6s var(--ease) 1.4s, sheenSlow 9s var(--ease) 4s infinite; }
@keyframes shineOnce { to { left: 130%; } }
@keyframes sheenSlow { 0% { left: -60%; } 18%, 100% { left: 130%; } }

.portrait__corner { position: absolute; width: 30px; height: 30px; border-color: var(--gold-light); border-style: solid; transition: transform 1.2s var(--ease) .3s, opacity 1.2s var(--ease) .3s; opacity: 0; }
.portrait__corner--tl { top: -10px; left: -10px; border-width: 1px 0 0 1px; transform: translate(14px, 14px); }
.portrait__corner--br { bottom: -10px; right: -10px; border-width: 0 1px 1px 0; transform: translate(-14px, -14px); }
.portrait.is-in .portrait__corner { opacity: 1; transform: none; }

.portrait__badge {
  position: absolute; left: 50%; bottom: -22px; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 10px;
  transform: translateX(-50%) translateY(12px);
  opacity: 0;
  background: var(--navy); border: 1px solid var(--gold);
  white-space: nowrap;
  transition: opacity 1s var(--ease) 1.1s, transform 1s var(--ease) 1.1s;
}
.portrait.is-in .portrait__badge { opacity: 1; transform: translateX(-50%); }
.portrait__badge img { width: 26px; }
.portrait__badge span { display: grid; text-align: left; font-family: var(--serif); font-size: 1.05rem; line-height: 1; color: var(--gold-light); letter-spacing: .06em; }
.portrait__badge small { font-family: var(--sans); font-size: .5rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }

.about__name {
  margin-top: 14px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.3rem, 6.6vw, 1.85rem); letter-spacing: .07em; text-transform: uppercase;
  color: var(--ivory); line-height: 1.1; white-space: nowrap;
}
.about__name .ch { display: inline-block; opacity: 0; transform: translateY(.5em); filter: blur(4px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.about__name.is-in .ch { opacity: 1; transform: none; filter: none; }
.about__name.sr { transform: none; opacity: 1; }
.about__creci { margin-top: 10px; font-size: .64rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.hero__creci { margin-top: 7px; font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.about__role { margin-top: 8px; font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }

.quote {
  position: relative;
  margin: 30px 0 0; padding: 22px 6px 0;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.24rem; line-height: 1.45; color: var(--ivory);
}
.quote::before {
  content: "“"; position: absolute; left: 50%; top: -16px; transform: translateX(-50%);
  font-size: 3.4rem; line-height: 1; color: var(--gold); font-style: normal;
}

.quote__author {
  display: block; margin-top: 10px;
  font-family: var(--sans); font-style: normal; font-weight: 400;
  font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold);
}

.about__text { margin-top: 22px; display: grid; gap: 14px; }
.about__text p { font-size: .88rem; line-height: 1.8; font-weight: 300; color: var(--text); }
.about__text strong { color: var(--gold); font-weight: 500; }

.stats {
  list-style: none; margin: 30px 0 46px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.stats li { padding: 18px 4px; display: grid; gap: 6px; }
.stats li + li { border-left: 1px solid var(--hair); }
.stats strong {
  font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1;
  background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stats span { font-size: .52rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); line-height: 1.6; }

/* Empreendimentos */
.projects { display: grid; gap: 10px; margin-top: 18px; }
.project {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  padding: 18px 16px;
  border: 1px solid var(--hair);
  background: rgba(4, 8, 48, .7);
  text-align: left;
}
.project::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--metal); transform: scaleY(0); transform-origin: top;
  transition: transform 1s var(--ease) .4s;
}
.project.is-in::before { transform: none; }
.project__num { font-family: var(--serif); font-size: 1.6rem; color: rgba(212, 186, 120, .5); line-height: 1; }
.project__body { flex: 1; }
.project h3 { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ivory); line-height: 1; }
.project p { margin-top: 5px; font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.project__tag { font-size: .5rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); border: 1px solid rgba(212, 186, 120, .2); padding: 5px 8px; }

.ornament { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 50px 0 22px; }
.ornament span { width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.ornament span:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.ornament i { width: 9px; height: 9px; border: 1px solid var(--gold); transform: rotate(45deg); }

/* Missão · Visão · Valores com trilho de rolagem */
.pillars { position: relative; margin-top: 22px; padding-left: 26px; }
.pillars__rail { position: absolute; left: 6px; top: 10px; bottom: 10px; width: 1px; background: rgba(212, 186, 120, .18); }
.pillars__fill { display: block; width: 100%; height: 100%; background: linear-gradient(var(--gold-light), var(--gold-dark)); transform-origin: top; transform: scaleY(var(--f, 0)); box-shadow: 0 0 10px rgba(240, 215, 135, .6); }

.pillar {
  position: relative;
  margin-bottom: 16px;
  padding: 28px 20px 26px;
  border: 1px solid rgba(212, 186, 120, .22);
  background: linear-gradient(180deg, rgba(11, 18, 80, .7), rgba(1, 4, 38, .6));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transform: translateX(30px);
}
.pillar.is-in { transform: none; }
.pillar__dot {
  position: absolute; left: -25px; top: 34px;
  width: 11px; height: 11px; transform: rotate(45deg);
  border: 1px solid var(--gold); background: var(--navy);
  transition: background .6s var(--ease), box-shadow .6s var(--ease);
}
.pillar.is-in .pillar__dot { background: var(--gold-light); box-shadow: 0 0 14px rgba(240, 215, 135, .8); transition-delay: .4s; }
.pillar__num { position: absolute; right: 14px; top: 10px; font-family: var(--serif); font-size: .9rem; color: rgba(212, 186, 120, .45); letter-spacing: .1em; }
.pillar h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: 1.7rem; text-transform: uppercase; color: var(--ivory);
  letter-spacing: .6em; padding-left: .6em;
  transition: letter-spacing 1.4s var(--ease) .2s, padding 1.4s var(--ease) .2s;
}
.pillar.is-in h3 { letter-spacing: .28em; padding-left: .28em; }
.glow-line { display: block; position: relative; height: 14px; margin: 6px auto 14px; width: 0; transition: width 1.4s var(--ease) .4s;
  background: radial-gradient(50% 50% at 50% 50%, rgba(240, 215, 135, .5), rgba(212, 186, 120, 0)); }
.glow-line::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-light), transparent); }
.pillar.is-in .glow-line { width: 85%; }
.pillar p { font-size: .7rem; line-height: 1.95; letter-spacing: .13em; text-transform: uppercase; color: var(--text); }

.btn--cta { margin-top: 30px; border-color: rgba(240, 215, 135, .6); }
.about__seal { width: 52px; margin: 44px auto 0; opacity: .75; }

/* =========================================================
   VINHETA
   ========================================================= */
.intro {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: radial-gradient(80% 60% at 50% 45%, #0a1150 0%, var(--navy) 70%);
  cursor: pointer;
  transition: opacity 1s var(--ease), visibility 0s 1s;
}
.intro.is-out { opacity: 0; visibility: hidden; }
.intro.is-out .intro__stage { transform: scale(1.08); filter: blur(4px); }
.intro__glow {
  position: absolute; left: 50%; top: 44%;
  width: 120vmin; height: 120vmin; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(212, 186, 120, .16), transparent 70%);
  opacity: 0; animation: fadeIn 2s ease 1.2s forwards;
}
.intro__stage { position: relative; display: grid; justify-items: center; width: min(62vw, 260px); transition: transform 1.1s var(--ease), filter 1.1s var(--ease); }
/* mesmo tamanho do emblema da home: 74% × 74.3% da coluna (máx. 290px × 74.3%) */
.intro__emblem { position: relative; width: min(calc(55vw - 22px), 215px); aspect-ratio: 750 / 907; }
.intro__hex, .intro__logo { position: absolute; inset: 0; width: 100%; height: 100%; }
.hex { fill: none; stroke: url(#gGold); stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linejoin: miter; }
.hex--outer { stroke-width: 11; animation: draw 1.5s var(--ease) .2s forwards; }
.hex--inner { stroke-width: 6; animation: draw 1.5s var(--ease) .5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.intro__hex { animation: fadeOut .6s ease 2.1s forwards; }
.intro__logo { opacity: 0; clip-path: inset(100% 0 0 0); animation: rise 1.3s var(--ease) 1.5s forwards; }
@keyframes rise { 0% { opacity: 0; clip-path: inset(70% 0 0 0); } 30% { opacity: 1; } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
.intro__flare {
  position: absolute; left: 50%; top: 70%; width: 0; height: 2px; transform: translateX(-50%);
  background: radial-gradient(closest-side, #fff, #F0D787 35%, transparent);
  box-shadow: 0 0 22px 4px rgba(240, 215, 135, .55);
  animation: flare 1.6s var(--ease) 2.3s forwards;
}
@keyframes flare { 0% { width: 0; opacity: 0; } 35% { width: 130%; opacity: 1; } 100% { width: 60%; opacity: 0; } }
.intro__word { display: flex; align-items: center; gap: 12px; width: 155%; margin-top: 8%; }
.intro__mfel { width: 52%; flex: none; opacity: 0; filter: blur(8px); transform: scale(1.12); animation: focusIn 1.3s var(--ease) 2.6s forwards; }
.intro__line {
  flex: 1; height: 3px;
  background: linear-gradient(90deg, #A47735, #F0D787 35%, #FFF1BE 50%, #F0D787 65%, #C49A55);
  box-shadow: 0 0 8px rgba(240, 215, 135, .35);
  transform: scaleX(0); transform-origin: right; animation: grow 1.1s var(--ease) 2.9s forwards;
}
.intro__line:last-child { transform-origin: left; }
.intro__imoveis { width: 44%; margin-top: 5%; opacity: 0; animation: fadeUp 1s var(--ease) 3.3s forwards; }
.intro__skip { position: absolute; bottom: calc(28px + env(safe-area-inset-bottom)); font-size: .56rem; letter-spacing: .34em; text-transform: uppercase; color: rgba(250, 249, 245, .3); opacity: 0; animation: fadeIn 1s ease 1s forwards; }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes grow { to { transform: scaleX(1); } }
@keyframes focusIn { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes fadeUp { from { transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (min-width: 720px) {
  .page { padding-top: 64px; }
  .ticker { margin-left: 0; margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .intro { display: none; }
  .reveal, .sr, .about__name .ch { opacity: 1; transform: none; filter: none; }
  .seek__item svg path { stroke-dashoffset: 0; }
  .portrait__frame img { clip-path: none; }
  .brand__l { opacity: 1; transform: none; filter: none; }
  .brand__line { transform: none; }
  .brand__sub { clip-path: none; }
}

.back:focus { outline: none; }
.back:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.portrait { margin-top: 40px; }

.foot--about { margin-top: 26px; }