/* =====================================================================================================
   MENDZ Incorporadora — página "em breve" · 2.0.0
   Uma tela só, sem rolagem, sem menu, sem formulário: suspense de lançamento.
   Logo oficial (Guia de Identidade Visual MENDZ, pág. 6–7), vetor extraído do guia sem alteração.
   Paleta do rebranding: verde #004C4C, verde suave #76A5A4, cinza #9D9D9C, dourado #D9B36A, off-white #F5F3EE.
   ===================================================================================================== */

@font-face { font-family: "Jost"; src: url(/assets/fonts/jost.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --verde: #004C4C;
  --verde-850: #003D3D;
  --verde-900: #003131;
  --verde-950: #002323;
  --ouro: #D9B36A;
  --ouro-claro: #E9D2A2;
  --off: #F5F3EE;
  --linha-clara: rgba(245, 243, 238, .14);
  --sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --gutter: clamp(16px, 5vw, 72px);
  --max: 1320px;
  --ease: cubic-bezier(.22, .7, .15, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden;
  background: var(--verde-900); color: var(--off);
  font: 350 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
svg { display: block; max-width: 100%; }
h1, p { margin: 0; }
em { font-style: normal; font-weight: 500; }
::selection { background: var(--ouro); color: var(--verde-950); }

/* Logo oficial — versão "sobre verde" do guia: MENDZ #6EA2A1 e INCORPORADORA #85888A. */
.logo { --logo-cor: #6EA2A1; --logo-sub: #85888A; width: 100%; height: auto; aspect-ratio: 374.02 / 93.35; }

/* ----------------------------------------------------------------------------------------- abertura */
.abertura {
  position: fixed; inset: 0; z-index: 50; background: var(--verde-950);
  display: grid; place-items: center; pointer-events: none;
  animation: abertura-sai .9s var(--ease-io) 1.35s forwards;
}
.abertura__logo { width: min(240px, 60vw); animation: entra 1.1s var(--ease) both; }
.abertura__linha {
  position: absolute; left: 50%; top: calc(50% + 52px); width: 120px; height: 1px; margin-left: -60px;
  background: linear-gradient(90deg, transparent, var(--ouro), transparent);
  transform: scaleX(0); animation: abre 1s var(--ease) .25s forwards;
}
@keyframes entra { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes abre { to { transform: scaleX(1); } }
@keyframes abertura-sai { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@keyframes sobe { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------------------------------- tela */
.tela {
  position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; isolation: isolate;
  display: grid; grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(120% 90% at 85% 70%, rgba(0, 76, 76, 0) 0%, rgba(0, 35, 35, .55) 70%),
    linear-gradient(160deg, var(--verde) 0%, var(--verde-850) 45%, var(--verde-950) 100%);
}
.fundo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fundo__sol {
  position: absolute; width: 62vmax; height: 62vmax; right: -12vmax; bottom: -30vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 196, 128, .26) 0%, rgba(217, 179, 106, .12) 32%, rgba(217, 179, 106, 0) 66%);
  animation: sol 2.4s var(--ease) 1.2s both, respira 9s ease-in-out 3.6s infinite;
}
@keyframes sol { from { opacity: 0; transform: translateY(8%) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes respira { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
.fundo__curvas { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ouro); }
.fundo__curvas path { opacity: .28; stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: traca 3.2s var(--ease) forwards; }
.fundo__curvas .c1 { animation-delay: 1.3s; }
.fundo__curvas .c2 { animation-delay: 1.45s; opacity: .18; }
.fundo__curvas .c3 { animation-delay: 1.6s; opacity: .1; }
.fundo__curvas .c4 { animation-delay: 1.7s; opacity: .12; }
.fundo__curvas .c5 { animation-delay: 1.85s; opacity: .07; }
.fundo__grao {
  position: absolute; inset: -50%; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@keyframes traca { to { stroke-dashoffset: 0; } }

/* topo */
.topo {
  position: relative; z-index: 2; width: 100%; max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(18px, 4vh, 34px) var(--gutter) 0;
  animation: sobe 1s var(--ease) 1.5s both;
}
.topo__logo { width: clamp(150px, 15vw, 210px); }
.selo {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px;
  border: 1px solid rgba(217, 179, 106, .45);
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--ouro-claro); line-height: 1;
}
.selo__ponto { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--ouro); }
.selo__ponto::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--ouro);
  animation: pulso 2.4s var(--ease) 2.5s infinite;
}
@keyframes pulso { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(1.6); } }

/* chamada */
.chamada {
  position: relative; z-index: 2; align-self: center;
  width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(40px, 10vh, 120px);
}
.chamada__antes {
  font-size: 12px; letter-spacing: .38em; text-transform: uppercase; color: rgba(245, 243, 238, .7);
  margin-bottom: clamp(14px, 3vh, 28px); animation: sobe 1s var(--ease) 1.55s both;
}
.chamada__titulo {
  font-weight: 300; line-height: 1.02; letter-spacing: -.025em;
  font-size: clamp(2.6rem, min(8.2vw, 13vh), 8.4rem);
}
.chamada__titulo .linha { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.chamada__titulo .linha > span { display: inline-block; animation: linha-sobe 1.3s var(--ease) both; }
.chamada__titulo .linha:nth-child(1) > span { animation-delay: 1.45s; }
.chamada__titulo .linha:nth-child(2) > span { animation-delay: 1.6s; }
.chamada__titulo em { color: var(--ouro); }
@keyframes linha-sobe { from { transform: translateY(105%); } to { transform: none; } }
.chamada__texto {
  max-width: 30em; margin-top: clamp(14px, 3.4vh, 30px);
  font-size: clamp(15px, min(1.3vw, 2.5vh), 19px); color: rgba(245, 243, 238, .78);
  animation: sobe 1.1s var(--ease) 1.9s both;
}

/* "em construção": uma linha dourada que corre sem parar */
.construindo {
  position: relative; width: 180px; height: 1px; margin-top: clamp(20px, 4.4vh, 44px); overflow: hidden;
  background: rgba(245, 243, 238, .16); animation: sobe 1s var(--ease) 2.1s both;
}
.construindo span {
  position: absolute; inset: 0 auto 0 0; width: 40%;
  background: linear-gradient(90deg, transparent, var(--ouro), transparent);
  animation: corre 2.6s var(--ease-io) 2.6s infinite both;
}
@keyframes corre { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* casa em traço (se desenha e acende) */
.casa {
  position: absolute; z-index: 1; right: 0; bottom: clamp(52px, 9vh, 80px); margin: 0;
  width: min(56vw, 1000px); color: var(--ouro-claro); pointer-events: none;
}
.casa svg { width: 100%; height: auto; overflow: visible; }
.casa__traco path { stroke-width: 1.15; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .85; vector-effect: non-scaling-stroke;
  animation: traca 2.2s var(--ease-io) calc(1.6s + var(--d, 0s)) forwards; }
.casa__traco path.fino { stroke-width: .8; opacity: .5; }
.casa__luz { opacity: 0; animation: acende 2.6s var(--ease) 3.6s forwards; }
.casa__agua { opacity: 0; animation: acende 2s var(--ease) 3.9s forwards; }
@keyframes acende { 0% { opacity: 0; } 40% { opacity: .55; } 55% { opacity: .4; } 100% { opacity: 1; } }

/* base */
.base {
  position: relative; z-index: 2; width: 100%; max-width: var(--max); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px;
  padding: clamp(12px, 2.6vh, 22px) var(--gutter) clamp(14px, 3vh, 26px); border-top: 1px solid var(--linha-clara);
  animation: sobe 1s var(--ease) 2.3s both;
}
.descritor { font-size: 12px; letter-spacing: .38em; text-transform: uppercase; color: rgba(245, 243, 238, .72); }
.descritor i { font-style: normal; color: var(--ouro); padding: 0 .6em; }
.base__nota { font-size: 12px; color: rgba(245, 243, 238, .5); letter-spacing: .02em; }

/* ----------------------------------------------------------------------------------------- responsivo */
@media (max-width: 1100px) { .casa { width: 64vw; opacity: .6; } }
@media (max-width: 900px) {
  .chamada { align-self: start; padding-top: clamp(40px, 9vh, 90px); }
  .casa { width: 118vw; right: -14vw; opacity: .55; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .topo__logo { width: 140px; }
  .selo { padding: 8px 12px; font-size: 10.5px; letter-spacing: .26em; }
  .chamada__titulo { font-size: clamp(2.6rem, min(14vw, 8.6vh), 4.4rem); }
  .casa { width: 150vw; right: -40vw; opacity: .42; }
  .descritor { font-size: 10.5px; letter-spacing: .26em; }
  .base__nota { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .abertura { display: none; }
  .construindo span { display: none; }
}