/* ═══════════════════════════════════════════════════════════════════
   applmspa.com — DIREÇÃO "OURO LÍQUIDO" (2026-08-28)
   Preto veludo de joalheiro; o ouro é LUZ, nunca tinta.
   · Monograma LM oficial extrudado em ouro físico (Three.js) no hero
   · Ouro só em: reflexo 3D, gradiente metálico de texto, hairlines, poeira
   · Tipografia: Cormorant Garamond display · Satoshi corpo · Azeret Mono meta
   · Mockups do app tratados como joias em vitrine (spotlight + reflexo)
   · PROIBIDO: dourado chapado em superfícies, botões amarelos, cards iguais
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --preto-0: #0A0806;          /* fundo base — preto quente */
  --preto-1: #12100B;          /* painéis / vitrine */
  --creme: #EFE7D8;
  --creme-60: rgba(239, 231, 216, 0.62);
  --creme-40: rgba(239, 231, 216, 0.4);
  --ouro: #C9A24D;
  --ouro-claro: #F2D68C;
  --ouro-escuro: #8A6A2F;
  --ouro-h35: rgba(201, 162, 77, 0.35);
  --ouro-h18: rgba(201, 162, 77, 0.18);
  --grad-metal: linear-gradient(105deg, #8A6A2F 0%, #C9A24D 32%, #F7E3A6 50%, #C9A24D 68%, #8A6A2F 100%);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Satoshi", system-ui, -apple-system, sans-serif;
  --mono: "Azeret Mono", ui-monospace, monospace;
  --pad-x: clamp(1.25rem, 5vw, 6rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.lenis { scroll-behavior: auto; }

body {
  background: var(--preto-0);
  color: var(--creme);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ouro); color: var(--preto-0); }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* texto em ouro metálico — o único "dourado sólido" permitido é gradiente */
.ouro-texto, .hero__title em, .section__head em {
  background: var(--grad-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── grain ─────────────────────────────────────────────── */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 60;
  opacity: 0.11;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 100;
  background: var(--preto-1); color: var(--creme);
  border: 1px solid var(--ouro-h35);
  padding: 0.6rem 1.2rem; font-size: 0.85rem;
  transition: top 150ms ease-out;
}
.skip-link:focus-visible { top: 1rem; }

:focus-visible { outline: 1px solid var(--ouro); outline-offset: 3px; }

/* ── nav ───────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--pad-x);
  transition: padding 250ms ease-out, background-color 250ms ease-out;
}
.nav::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ouro-h35), transparent);
  opacity: 0; transition: opacity 250ms ease-out;
}
.nav.is-scrolled {
  padding-block: 0.65rem;
  background: rgba(10, 8, 6, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav.is-scrolled::after { opacity: 1; }

.nav__brand { display: flex; align-items: center; }
.nav__logo { height: 64px; width: auto; transition: height 250ms ease-out; }
.nav.is-scrolled .nav__logo { height: 48px; }

.nav__links { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.6rem); }
.nav__links a {
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--creme-60);
  transition: color 150ms ease-out;
}
.nav__links a:hover { color: var(--ouro-claro); }
.nav__cta {
  border: 1px solid var(--ouro-h35);
  padding: 0.55rem 1.3rem;
  color: var(--creme) !important;
  transition: border-color 150ms ease-out, color 150ms ease-out !important;
}
.nav__cta:hover { border-color: var(--ouro); color: var(--ouro-claro) !important; }

@media (max-width: 700px) {
  .nav__links a:not(.nav__cta) { display: none; }
  .nav__logo { height: 52px; }
  .nav.is-scrolled .nav__logo { height: 42px; }
}

/* ── botões: hairline, nunca bloco ─────────────────────── */
.btn {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 0.95rem 2.1rem;
  border: 1px solid var(--ouro-h35);
  font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--creme);
  overflow: hidden;
  transition: border-color 200ms ease-out;
}
.btn span { position: relative; z-index: 1; }
.btn::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(242, 214, 140, 0.16) 50%, transparent 70%);
  transform: translateX(-101%);
  transition: transform 500ms ease-out;
}
.btn:hover { border-color: var(--ouro); }
.btn:hover::before { transform: translateX(101%); }
.btn--primario {
  border-image: linear-gradient(105deg, var(--ouro-escuro), var(--ouro-claro), var(--ouro-escuro)) 1;
}
.btn--primario span {
  background: var(--grad-metal);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── kicker / índices ──────────────────────────────────── */
.kicker, .idx {
  font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ouro);
}

/* ── hero ──────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 7rem var(--pad-x) 0;
}

.hero__aurora {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(52% 44% at 68% 38%, rgba(201, 162, 77, 0.13), transparent 70%),
    radial-gradient(38% 34% at 24% 72%, rgba(138, 106, 47, 0.08), transparent 70%);
  animation: aurora 46s ease-in-out infinite alternate;
}
@keyframes aurora {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, 2%, 0) scale(1.07); }
}

.hero__stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 900ms ease; }
.hero__canvas.is-on { opacity: 1; }
.hero__fallback {
  position: absolute; top: 50%; left: 68%;
  width: min(34vw, 480px);
  transform: translate(-50%, -54%);
  opacity: 0.9;
  filter: drop-shadow(0 0 60px rgba(201, 162, 77, 0.25));
  transition: opacity 900ms ease;
}
.hero__fallback.is-off { opacity: 0; }

.hero__inner { position: relative; z-index: 2; max-width: 780px; }

.hero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.7rem, 1.8rem + 4.6vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 1.4rem 0 1.8rem;
  text-wrap: balance;
}

.hero__sub {
  max-width: 34em;
  color: var(--creme-60);
  font-weight: 300;
  margin-bottom: 2.6rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero__stats {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: auto;
  padding: 2rem 0 2.2rem;
  border-top: 1px solid rgba(239, 231, 216, 0.08);
}
.hero__stats .num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.7rem);
  line-height: 1.1;
  background: var(--grad-metal);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__stats .num--txt { font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem); padding-top: 0.35em; }
.hero__stats .lbl {
  font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--creme-40);
}

@media (max-width: 899px) {
  .hero { padding-top: 6rem; }
  .hero__fallback { left: 50%; top: 34%; width: min(64vw, 340px); opacity: 0.34; }
  .hero__canvas.is-on { opacity: 0.36; }   /* 3D vira atmosfera; o texto manda */
  .hero__stats { grid-template-columns: repeat(2, 1fr); row-gap: 1.6rem; }
}

/* ── secções ───────────────────────────────────────────── */
.section { position: relative; padding: clamp(5rem, 10vw, 9rem) var(--pad-x); }

.section__head { max-width: 780px; margin-bottom: clamp(2.6rem, 6vw, 4.5rem); }
.section__head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 1.5rem + 3.6vw, 4.6rem);
  line-height: 1.06;
  margin-top: 1.1rem;
  text-wrap: balance;
}
.section__head .lead {
  margin-top: 1.4rem;
  max-width: 36em;
  color: var(--creme-60);
  font-weight: 300;
}

/* ── 01 aplicações: colunas editoriais com hairlines ───── */
.apps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
}
.app {
  padding: 2.2rem clamp(1.4rem, 2.5vw, 2.6rem);
  border-left: 1px solid rgba(239, 231, 216, 0.09);
}
.app:first-child { border-left: none; padding-left: 0; }
.app__idx {
  font-family: var(--serif); font-style: italic;
  font-size: 1.5rem;
  background: var(--grad-metal);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.app h3 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  margin: 0.7rem 0 0.9rem;
}
.app p { color: var(--creme-60); font-size: 0.98rem; font-weight: 300; }
.app ul { list-style: none; margin-top: 1.3rem; }
.app li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.4rem;
  font-size: 0.9rem;
  color: var(--creme-60);
  border-top: 1px solid rgba(239, 231, 216, 0.07);
}
.app li::before {
  content: "·";
  position: absolute; left: 0.2rem;
  color: var(--ouro);
}

@media (max-width: 899px) {
  .apps { grid-template-columns: 1fr; }
  .app { border-left: none; padding-inline: 0; border-top: 1px solid rgba(239, 231, 216, 0.09); }
  .app:first-child { border-top: none; }
}

/* ── vitrine: o mockup como joia ───────────────────────── */
.vitrine {
  position: relative;
  margin-inline: auto;
  max-width: 1080px;
  padding: clamp(2.6rem, 6vw, 4.6rem) clamp(1.2rem, 4vw, 4rem) 1.6rem;
  background: linear-gradient(180deg, var(--preto-1), rgba(18, 16, 11, 0));
}
.vitrine__luz {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 46% at 50% 0%, rgba(242, 214, 140, 0.2), transparent 74%);
}
.vitrine__luz::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent 8%, var(--ouro-h35) 50%, transparent 92%);
}
.vitrine__obj {
  position: relative;
  border: 1px solid var(--ouro-h35);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.vitrine__obj img { width: 100%; filter: brightness(1.08); }
.vitrine__refl {                 /* reflexo no "chão" */
  position: absolute; top: calc(100% + 2px); left: 0; width: 100%;
  transform: scaleY(-1);
  opacity: 0.35;
  -webkit-mask-image: linear-gradient(0deg, transparent 62%, rgba(0, 0, 0, 0.5));
  mask-image: linear-gradient(0deg, transparent 62%, rgba(0, 0, 0, 0.5));
  pointer-events: none;
}
.vitrine figcaption {
  position: relative; z-index: 1;
  margin-top: 1.6rem;
  font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--creme-40);
  text-align: center;
}
.vitrine--retrato .vitrine__obj--fone {
  width: min(320px, 74vw);
  margin-inline: auto;
  border-radius: 2.4rem;
  border: 1px solid var(--ouro-h35);
  padding: 0.55rem;
  background: linear-gradient(160deg, #1A160E, #0C0A07);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.8);
}
.vitrine--retrato .vitrine__obj--fone::after { display: none; }
@media (max-width: 799px) { .vitrine__refl { display: none; } }
.vitrine--retrato .vitrine__obj--fone img { border-radius: 1.9rem; }

/* ── 02 funcionalidades: lista editorial 2 col ─────────── */
.feats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem, 5vw, 5rem);
  max-width: 1080px;
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
}
.feat {
  padding: 1.7rem 0;
  border-top: 1px solid rgba(239, 231, 216, 0.09);
}
.feat dt {
  display: flex; align-items: baseline; gap: 1rem;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
}
.feat dt span {
  font-family: var(--mono); font-size: 0.7rem;
  color: var(--ouro);
}
.feat dd { margin: 0.6rem 0 0 2.4rem; color: var(--creme-60); font-weight: 300; font-size: 0.98rem; }

@media (max-width: 799px) { .feats { grid-template-columns: 1fr; } }

/* ── 03 fluxo: linha do tempo com fio de ouro ──────────── */
.flow {
  list-style: none;
  position: relative;
  max-width: 680px;
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
  padding-left: 0;
}
.flow::before {
  content: ""; position: absolute; left: 1.45rem; top: 0.4rem; bottom: 0.4rem;
  width: 1px;
  background: rgba(239, 231, 216, 0.1);
}
.flow__linha {                     /* fio dourado desenhado no scroll */
  position: absolute; left: 1.45rem; top: 0.4rem;
  width: 1px; height: 0;
  background: linear-gradient(180deg, var(--ouro-escuro), var(--ouro-claro));
}
.flow li {
  position: relative;
  display: flex; gap: 1.9rem;
  padding: 1.5rem 0;
}
.flow__n {
  flex: 0 0 auto;
  width: 2.9rem; height: 2.9rem;
  display: grid; place-items: center;
  border: 1px solid var(--ouro-h35);
  border-radius: 50%;
  background: var(--preto-0);
  font-family: var(--mono); font-size: 0.72rem;
  color: var(--ouro);
  z-index: 1;
}
.flow h3 { font-family: var(--serif); font-weight: 600; font-size: 1.45rem; }
.flow p { color: var(--creme-60); font-weight: 300; font-size: 0.98rem; margin-top: 0.25rem; }

/* ── 04 tecnologia ─────────────────────────────────────── */
.tech {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(2rem, 5vw, 5rem);
  max-width: 1080px;
}
.tech > div { padding: 1.7rem 0; border-top: 1px solid rgba(239, 231, 216, 0.09); }
.tech dt {
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ouro);
}
.tech dd { margin: 0.6rem 0 0; color: var(--creme-60); font-weight: 300; }

@media (max-width: 799px) { .tech { grid-template-columns: 1fr; } }

/* ── transferir ────────────────────────────────────────── */
.cta {
  position: relative;
  text-align: center;
  padding: clamp(6rem, 12vw, 10rem) var(--pad-x);
  overflow: clip;
}
.cta__aurora {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 42% at 50% 30%, rgba(201, 162, 77, 0.12), transparent 72%);
}
.cta__mono {
  width: clamp(84px, 12vw, 130px); height: auto;
  margin: 0 auto 2rem;
  filter: drop-shadow(0 0 44px rgba(201, 162, 77, 0.3));
}
.cta h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.2rem, 1.5rem + 3.6vw, 4.4rem);
  line-height: 1.06;
}
.cta > p { max-width: 34em; margin: 1.4rem auto 0; color: var(--creme-60); font-weight: 300; }

.cta__stores {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem;
  margin-top: 3rem;
}
.store {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0.2rem;
  min-width: 220px;
  padding: 1.15rem 1.6rem;
  border: 1px solid var(--ouro-h18);
  text-align: left;
  overflow: hidden;
  transition: border-color 200ms ease-out, background-color 200ms ease-out;
}
.store:hover { border-color: var(--ouro); background: rgba(201, 162, 77, 0.05); }
.store--breve { border-style: dashed; cursor: default; }
.store--breve:hover { border-color: var(--ouro-h18); background: none; }
.store--breve .store__v { color: var(--creme-60); }
.store__k {
  font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ouro);
}
.store__v { font-size: 0.95rem; }
.cta__note {
  margin-top: 2.2rem;
  font-size: 0.85rem;
  color: var(--creme-40);
  font-weight: 300;
}

/* ── rodapé gigante ────────────────────────────────────── */
.footer {
  position: relative;
  padding: clamp(4.5rem, 9vw, 7.5rem) var(--pad-x) 2.2rem;
  border-top: 1px solid rgba(239, 231, 216, 0.08);
  background: linear-gradient(180deg, var(--preto-0), #070502);
}
.footer__marca { margin-bottom: clamp(3rem, 6vw, 5rem); }
.footer__word {
  width: min(100%, 1080px);
  margin-inline: auto;
  height: auto;
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1080px;
  margin: 0 auto;
  padding-top: 2.4rem;
  border-top: 1px solid rgba(239, 231, 216, 0.08);
}
.footer__grid .k {
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: 0.7rem;
}
.footer__grid p, .footer__grid a { font-size: 0.92rem; color: var(--creme-60); font-weight: 300; }
.footer__grid a:hover { color: var(--ouro-claro); }
.footer__bottom {
  max-width: 1080px;
  margin: 3.2rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(239, 231, 216, 0.06);
  font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--creme-40);
}

@media (max-width: 699px) { .footer__grid { grid-template-columns: 1fr; } }

/* ── estados iniciais de animação (JS liga; sem JS fica visível) ── */
html.has-js [data-reveal] { opacity: 0; transform: translateY(28px); }
html.has-js [data-split] .split-line { overflow: clip; }

/* ── reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero__aurora { animation: none; }
  html.has-js [data-reveal] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}