/* ==========================================================================
   Galaxy Party Pro — HOME PÚBLICA, versão CLARA/COMERCIAL (owner 2026-07-15)
   "Glovo à entrada, DICE na energia, galáxia só como assinatura de marca."
   Cliente-first: leve, humana, uma ação dominante, fotografia real grande.
   Sem nebulosa dominante, sem molduras escuras, sem glow "Nexus". Prefixo v0h-.
   ========================================================================== */

:root {
  --hl-bg: #FBF7EF;        /* marfim quente — o chão da página */
  --hl-bg-warm: #F3EADB;   /* faixa quente para separar secções */
  --hl-card: #FFFFFF;      /* cartões */
  --hl-ink: #211A12;       /* tinta quente quase-preta */
  --hl-ink-soft: #4A4235;  /* texto secundário escuro */
  --hl-mute: #776D5E;      /* apoio */
  --hl-line: #EBE2D2;      /* fio quente */
  --hl-gold: #E8B04B;      /* dourado da marca */
  --hl-gold-deep: #9A6A18; /* dourado legível sobre claro */
  --hl-ink-btn: #1B140C;   /* botão tinta (presença DICE) */
  --hl-ok: #1E7A4C;
  --hl-shadow: 0 18px 44px rgba(33, 26, 18, .10);
  --hl-shadow-sm: 0 8px 20px rgba(33, 26, 18, .07);
}

/* A home veste-se de claro, mesmo com o shell público em theme-night. */
body.v0h-page { background: var(--hl-bg) !important; color: var(--hl-ink); }
body.v0h-page .nexus-shell,
body.v0h-page main.nexus-shell { background: transparent !important; padding: 0 !important; max-width: none !important; }
body.v0h-page footer.nexus-shell { max-width: 1140px !important; margin-inline: auto; padding: 30px 20px 44px !important; }

/* Topbar Glovo: clara, discreta, colada ao topo (NÃO flutua sobre foto). */
body.v0h-page .nexus-topbar {
  position: static !important;
  background: var(--hl-bg) !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid var(--hl-line) !important; box-shadow: none !important;
}
body.v0h-page .nexus-topbar a,
body.v0h-page .nexus-topbar button { color: var(--hl-ink) !important; text-shadow: none !important; }
/* Logo nítido: fora o drop-shadow pesado que o borrava no topo claro. */
body.v0h-page .nexus-topbar img,
body.v0h-page .gpp-logo { filter: none !important; }
/* A ação dominante é o herói. O CTA do topo fica secundário (contorno),
   para não competir com "Pedir orçamento grátis". */
body.v0h-page .nexus-topbar .nexus-button--primary {
  display: inline-flex !important; background: transparent !important;
  border: 1px solid var(--hl-ink) !important; color: var(--hl-ink) !important; box-shadow: none !important;
}
body.v0h-page .nexus-topbar .nexus-button--ghost {
  background: #fff !important; border: 1px solid var(--hl-line) !important; color: var(--hl-ink) !important; backdrop-filter: none;
}

.v0h {
  background: var(--hl-bg); color: var(--hl-ink);
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow-x: hidden;
}
.v0h *, .v0h *::before, .v0h *::after { box-sizing: border-box; }
.v0h > * { min-width: 0; }
.v0h-wrap { width: min(1140px, 92vw); margin-inline: auto; }

/* Tipografia ------------------------------------------------------------- */
.v0h-kicker {
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: .78rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--hl-gold-deep); margin: 0 0 14px;
}
.v0h-h1 {
  font-family: 'Fraunces', 'Georgia', serif; font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 4.3rem); line-height: 1.02; letter-spacing: -.015em;
  color: var(--hl-ink); margin: 0; text-wrap: balance;
}
.v0h .v0h-h2 {
  font-family: 'Fraunces', 'Georgia', serif; font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; letter-spacing: -.01em;
  color: var(--hl-ink); margin: 0 0 12px; text-wrap: balance;
}
.v0h-sub { font-size: clamp(1rem, 1.6vw, 1.18rem); color: var(--hl-mute); margin: 0; max-width: 60ch; line-height: 1.5; }
.v0h-lede { font-size: 1.06rem; color: var(--hl-ink-soft); line-height: 1.6; }

/* Botões ----------------------------------------------------------------- */
.v0h-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(180deg, #F1C266, var(--hl-gold)); color: #1E1405;
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.02rem;
  padding: 16px 30px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 10px 26px rgba(232, 176, 75, .38); border: 1px solid #E3A93B;
  transition: transform .15s ease, box-shadow .15s ease;
}
.v0h-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(232, 176, 75, .5); }
.v0h-cta:focus-visible { outline: 3px solid var(--hl-ink); outline-offset: 3px; }
.v0h-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--hl-ink); font-weight: 700; font-size: 1rem; text-decoration: none; }
.v0h-link:hover { color: var(--hl-gold-deep); }
.v0h-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #fff; color: var(--hl-ink); font-weight: 800; font-size: 1rem;
  padding: 14px 26px; border-radius: 999px; text-decoration: none; border: 1px solid var(--hl-line); box-shadow: var(--hl-shadow-sm);
}
.v0h-ghost:hover { border-color: var(--hl-gold); }

/* HERO — split: promessa à esquerda, fotografia real à direita ----------- */
.v0h-hero { position: relative; padding: clamp(30px, 5vw, 64px) 0 clamp(20px, 3vw, 40px); }
.v0h-hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.v0h-hero__logo { display: none; } /* o logo assina na topbar; o herói é humano */
.v0h-hero__sub { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--hl-gold-deep); margin: 14px 0 0; letter-spacing: -.01em; }
.v0h-hero__lede { margin: 16px 0 0; max-width: 42ch; }
.v0h-hero__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; }
.v0h-hero__note { margin: 16px 0 0; font-size: .9rem; color: var(--hl-mute); }
.v0h-hero__media { position: relative; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden; box-shadow: var(--hl-shadow); background: var(--hl-bg-warm); }
.v0h-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v0h-hero__chip { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.95); color: var(--hl-ink); font-weight: 700; font-size: .86rem; padding: 9px 15px; border-radius: 999px; box-shadow: var(--hl-shadow-sm); }
.v0h-hero__chip b { color: var(--hl-gold-deep); }

/* Faixa de confiança ----------------------------------------------------- */
.v0h-trust { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; padding: 20px 0 0; margin-top: 28px; border-top: 1px solid var(--hl-line); }
.v0h-trust span { display: inline-flex; align-items: center; gap: 8px; color: var(--hl-ink-soft); font-weight: 600; font-size: .92rem; }
.v0h-trust span::before { content: "✓"; color: var(--hl-ok); font-weight: 900; }

/* Secções ---------------------------------------------------------------- */
.v0h-section { padding: clamp(48px, 7vw, 96px) 0; }
.v0h-section--tight { padding: clamp(34px, 5vw, 64px) 0; }
.v0h-section--warm { background: var(--hl-bg-warm); }

/* O caminho — 3 passos claros ------------------------------------------- */
.v0h-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.v0h-step { background: var(--hl-card); border: 1px solid var(--hl-line); border-radius: 20px; padding: 26px 24px; box-shadow: var(--hl-shadow-sm); display: flex; gap: 16px; align-items: flex-start; }
.v0h-step__num { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.3rem; background: #FBEFD6; color: var(--hl-gold-deep); border: 1px solid #F1DDB4; }
.v0h-step__title { font-weight: 800; font-size: 1.08rem; color: var(--hl-ink); }
.v0h-step__copy { margin: 6px 0 0; color: var(--hl-mute); font-size: .95rem; line-height: 1.5; }

/* Tipos de evento — mosaico Glovo de fotografia ------------------------- */
.v0h-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.v0h-kind { position: relative; display: block; aspect-ratio: 5 / 6; border-radius: 22px; overflow: hidden; text-decoration: none; box-shadow: var(--hl-shadow-sm); }
.v0h-kind__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.v0h-kind:hover .v0h-kind__img { transform: scale(1.05); }
.v0h-kind__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,15,8,0) 38%, rgba(20,15,8,.82) 100%); }
.v0h-kind__body { position: absolute; left: 20px; right: 20px; bottom: 18px; color: #fff; }
.v0h-kind__title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.4rem; color: #fff; }
.v0h-kind__copy { margin: 4px 0 0; font-size: .9rem; color: rgba(255,255,255,.9); line-height: 1.4; }

/* Profissionais em destaque --------------------------------------------- */
.v0h-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, .82fr); gap: 18px; overflow-x: auto; padding: 26px 2px 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.v0h-strip::-webkit-scrollbar { display: none; }
.v0h-pro { scroll-snap-align: start; background: var(--hl-card); border: 1px solid var(--hl-line); border-radius: 20px; overflow: hidden; text-decoration: none; box-shadow: var(--hl-shadow-sm); }
.v0h-pro:hover { border-color: var(--hl-gold); }
.v0h-pro__media { height: 150px; background: var(--hl-bg-warm) center/cover no-repeat; }
.v0h-pro__body { padding: 16px 18px; }
.v0h-pro__name { font-weight: 800; color: var(--hl-ink); }
.v0h-pro__meta { margin-top: 3px; color: var(--hl-mute); font-size: .86rem; }
.v0h-pro__rating { margin-top: 8px; color: var(--hl-gold-deep); font-weight: 700; font-size: .9rem; }
.v0h-pro__rating span { color: var(--hl-mute); font-weight: 500; }
.v0h-pro__cta { margin-top: 10px; color: var(--hl-ink); font-weight: 700; font-size: .9rem; }

/* Segunda porta — profissionais + staff --------------------------------- */
.v0h-roles { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; margin-top: 30px; }
.v0h-role { background: var(--hl-card); border: 1px solid var(--hl-line); border-radius: 22px; padding: 30px 28px; box-shadow: var(--hl-shadow-sm); }
.v0h-role__tag { display: inline-block; font-weight: 800; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hl-gold-deep); background: #FBEFD6; border: 1px solid #F1DDB4; padding: 5px 12px; border-radius: 999px; }
.v0h-role__title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.5rem; color: var(--hl-ink); margin: 14px 0 8px; }
.v0h-role__copy { color: var(--hl-ink-soft); line-height: 1.55; }
.v0h-role__list { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.v0h-role__list li { position: relative; padding-left: 24px; color: var(--hl-ink-soft); font-size: .95rem; }
.v0h-role__list li::before { content: "✓"; position: absolute; left: 0; color: var(--hl-gold-deep); font-weight: 900; }
.v0h-role__actions { display: flex; align-items: center; gap: 16px; margin-top: 22px; flex-wrap: wrap; }

/* Fecho — faixa tinta com uma ação -------------------------------------- */
.v0h-close { background: var(--hl-ink); color: #fff; padding: clamp(56px, 8vw, 104px) 0; text-align: center; }
.v0h-close .v0h-wrap { display: flex; flex-direction: column; align-items: center; }
.v0h-close__logo { width: min(230px, 60vw); height: auto; opacity: .96; margin-bottom: 26px; }
.v0h .v0h-close__title { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.12; color: #fff; margin: 0 0 26px; max-width: 20ch; text-wrap: balance; }
.v0h-close__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.v0h-close__cta { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #F1C266, var(--hl-gold)); color: #1E1405; font-weight: 800; font-size: 1.02rem; padding: 16px 32px; border-radius: 999px; text-decoration: none; box-shadow: 0 12px 30px rgba(232,176,75,.34); transition: transform .15s ease; }
.v0h-close__cta:hover { transform: translateY(-1px); }
.v0h-close__quiet { color: rgba(255,255,255,.82); font-weight: 700; text-decoration: none; }
.v0h-close__quiet:hover { color: #fff; }

/* Mobile ----------------------------------------------------------------- */
@media (max-width: 860px) {
  .v0h-hero__inner { grid-template-columns: 1fr; gap: 22px; }
  /* No primeiro ecrã, o anfitrião precisa ver a promessa e a ação antes da
     fotografia. A imagem continua grande, mas vem depois do CTA. */
  .v0h-hero__media { aspect-ratio: 16 / 9; max-height: 40vh; }
  .v0h-steps, .v0h-kinds, .v0h-roles { grid-template-columns: 1fr; }
  .v0h-hero__actions { gap: 14px; }
  .v0h-cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .v0h-kind__img, .v0h-cta, .v0h-close__cta { transition: none !important; }
}
