/* ─── MEI Copiloto · Landing Institucional ─── */

:root {
  --bg:        #F2EFE8;
  --bg-soft:   #E8E3D7;
  --bg-deep:   #DAD3C4;
  --ink:       #14171C;
  --ink-soft:  #5A5F6B;
  --line:      #D2CBBC;
  --line-soft: #E2DCD0;
  --accent:    #2B4D6F;
  --accent-2:  #5A7A9E;
  --accent-3:  #8FA8C2;
  --gold:      #B89668;
  --ok:        #4F7A52;
  --error:     #A0524A;

  --font-display: "Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --font-italic:  "Instrument Serif","Times New Roman",serif;
  --font-body:    "Geist",ui-sans-serif,system-ui,sans-serif;
  --font-mono:    "JetBrains Mono",ui-monospace,monospace;
}

body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-wrap:pretty }
a { color:inherit; text-decoration:none }
em { font-style:italic; font-family:var(--font-italic); color:var(--accent); font-weight:400; letter-spacing:.005em }

.mono { font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft) }
.eyebrow { font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:10px }
.eyebrow::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block }

.wrap { width:min(1240px,75vw); margin:0 auto }

/* ─── Esfera-logo ─── */
.orb {
  display:inline-block; border-radius:50%;
  background: radial-gradient(circle at 32% 28%, #FFFFFF 0%, #C7D6E5 12%, var(--accent-2) 42%, var(--accent) 78%, #182F47 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 6px 14px -6px rgba(20,30,50,.4);
  flex-shrink:0;
}
.orb.lg  { width:84px;  height:84px;  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 18px 36px -16px rgba(20,30,50,.45) }
.orb.md  { width:42px;  height:42px }
.orb.sm  { width:28px;  height:28px }
.orb.xs  { width:22px;  height:22px }

.wm { font-family:var(--font-display); font-weight:700; letter-spacing:-.035em; line-height:.92; font-variation-settings:"opsz" 96 }
.wm i { font-family:var(--font-italic); font-style:italic; color:var(--accent); font-weight:400; letter-spacing:-.01em }

/* ─── Botões ─── */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:999px;
  background:var(--ink); color:var(--bg);
  font-family:var(--font-body); font-weight:600; font-size:14.5px;
  border:1px solid var(--ink); cursor:pointer;
  transition:background .2s ease, transform .15s ease;
  text-decoration:none;
}
.btn:hover  { background:var(--accent); transform:translateY(-1px) }
.btn .ar    { color:var(--accent-3); font-family:var(--font-italic); font-style:italic; font-size:17px; line-height:.8 }
.btn.ghost  { background:transparent; color:var(--ink) }
.btn.ghost:hover { background:var(--ink); color:var(--bg) }
.btn.lg     { padding:18px 28px; font-size:16px }
.btn.sm     { padding:10px 16px; font-size:13px }
.btn.invert { background:var(--bg); color:var(--ink); border-color:var(--bg) }
.btn.invert:hover { background:var(--accent-2); color:var(--bg); border-color:var(--accent-2) }
.btn.invert .ar { color:var(--accent) }
.btn.invert:hover .ar { color:var(--bg) }

/* ─── NAV ─── */
nav.top {
  position:sticky; top:0; z-index:40;
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
nav.top .inner { display:flex; justify-content:space-between; align-items:center; padding:16px 0; gap:24px }
nav.top .lk    { display:flex; align-items:center; gap:12px; font-size:20px }
nav.top .lk .wm { font-size:22px }
nav.top .lk .ed {
  margin-left:8px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); padding:4px 8px; border:1px solid var(--line); border-radius:99px; line-height:1
}
nav.top .links { display:flex; align-items:center; gap:28px; font-size:13.5px; color:var(--ink-soft) }
nav.top .links a { padding:6px 0; border-bottom:1px solid transparent; transition:color .15s, border-color .15s }
nav.top .links a:hover { color:var(--ink); border-bottom-color:var(--accent) }
nav.top .cta { display:flex; align-items:center; gap:10px }
nav.top .cta .quiet { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft) }
@media(max-width:900px) { nav.top .links { display:none } nav.top .cta .quiet { display:none } }

/* ─── HAMBURGER + DRAWER ─── */
.hamburger { display:none; padding:8px; width:40px; height:40px; border:none; background:transparent; cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:5px; border-radius:8px; flex-shrink:0 }
.hamburger:hover { background:var(--bg-soft) }
.hamburger span { display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease; transform-origin:center }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity:0; transform:scaleX(0) }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }
@media(max-width:900px) { .hamburger { display:flex } }

.nav-drawer { position:fixed; inset:0; z-index:50; pointer-events:none; transition:background .28s ease }
.nav-drawer.open { pointer-events:auto; background:rgba(20,23,28,.4) }
.nav-drawer-panel { position:absolute; right:0; top:0; bottom:0; width:min(320px,78vw); background:var(--bg); padding:24px 28px; display:flex; flex-direction:column; gap:8px; transform:translateX(100%); transition:transform .28s ease; box-shadow:-30px 0 60px -20px rgba(20,30,50,.3) }
.nav-drawer.open .nav-drawer-panel { transform:translateX(0) }
.nav-drawer-link { display:block; padding:16px 0; border-bottom:1px solid var(--line-soft); font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--ink); letter-spacing:-.015em }
.nav-drawer-link:hover { color:var(--accent) }
.nav-drawer-link:last-child { border-bottom:none }
body.drawer-open { overflow:hidden }

/* ─── HERO ─── */
.hero {
  padding:96px 0 84px; position:relative; overflow:hidden;
  background:
    radial-gradient(58% 70% at 92% 18%, color-mix(in oklab, var(--accent-3) 28%, transparent) 0%, transparent 65%),
    radial-gradient(70% 60% at 6% 105%, var(--bg-deep) 0%, transparent 55%),
    var(--bg);
}
.hero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(20,23,28,.08) 1px, transparent 1.6px);
  background-size:28px 28px; opacity:.4;
  mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 70%, transparent 100%);
}
.hero .inner { position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start }
.hero .hero-copy { max-width:none; width:100% }
.hero h1 {
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(48px,6.8vw,104px); letter-spacing:-.04em; line-height:.95;
  margin:18px 0 24px; font-variation-settings:"opsz" 96; max-width:none;
}
.hero h1 em { display:inline-block }
.hero .sub  { font-size:19px; color:var(--ink-soft); max-width:48ch; margin:0 0 32px; line-height:1.5 }
.hero .sub b { color:var(--ink); font-weight:600 }
.hero .ctas { display:flex; gap:14px; align-items:center; flex-wrap:wrap }
.hero .ctas .quiet { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft) }
.hero .ctas .quiet b { color:var(--ink); font-weight:500 }

.hero-meta { margin-top:48px; display:flex; gap:36px; flex-wrap:wrap; padding-top:28px; border-top:1px solid var(--line-soft) }
.hero-meta .m { display:flex; flex-direction:column; gap:4px }
.hero-meta .m b { font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:-.02em; line-height:1 }
.hero-meta .m b em { font-family:var(--font-italic); font-style:italic; font-weight:400; color:var(--accent) }
.hero-meta .m span { font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft) }

/* hero card */
.hero-card {
  position:relative;
  background:var(--bg); border:1px solid var(--line); border-radius:24px;
  padding:48px 40px; display:flex; flex-direction:column; gap:28px;
  box-shadow:0 40px 80px -40px rgba(20,30,50,.35);
}
.hero-card .corner { position:absolute; left:18px; top:18px; font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft) }
.hero-card .corner b { color:var(--accent); font-weight:500 }
.hero-card .stamp  { position:absolute; right:18px; top:18px; font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft) }
.hero-card .lockup { display:flex; align-items:center; gap:22px; margin-top:32px }
.hero-card .lockup .wm { font-size:54px }
.hero-card .editions { display:flex; flex-direction:column; gap:0; border-top:1px dashed var(--line); padding-top:18px }
.hero-card .ed-row { display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:14px; padding:11px 0; border-bottom:1px dashed var(--line) }
.hero-card .ed-row:last-child { border:0 }
.hero-card .ed-row .n  { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-soft) }
.hero-card .ed-row .nm { font-family:var(--font-display); font-weight:600; font-size:16px; letter-spacing:-.015em; display:flex; align-items:center; gap:10px }
.hero-card .ed-row .nm i { font-family:var(--font-italic); font-style:italic; color:var(--accent); font-weight:400 }
.hero-card .ed-row .dot { width:7px; height:7px; border-radius:50%; background:var(--accent-2) }
.hero-card .ed-row.active .nm  { color:var(--ink) }
.hero-card .ed-row.active .dot { background:var(--ok); box-shadow:0 0 0 4px color-mix(in oklab, var(--ok) 20%, transparent) }
.hero-card .ed-row .st { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); padding:4px 9px; border:1px solid var(--line); border-radius:99px }
.hero-card .ed-row.active .st { color:var(--ok); border-color:color-mix(in oklab, var(--ok) 40%, var(--line)) }
.hero-card .foot { display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); padding-top:14px; border-top:1px dashed var(--line) }

/* ─── SECTION CHROME ─── */
section { padding:120px 0; position:relative }
@media(max-width:800px) { section { padding:84px 0 } }
.section-head {
  display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:end;
  padding-bottom:28px; margin-bottom:56px; border-bottom:1px solid var(--line);
}
@media(max-width:800px) { .section-head { grid-template-columns:1fr; gap:14px; margin-bottom:36px } }
.section-head .num { font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft) }
.section-head h2 { font-family:var(--font-display); font-weight:700; font-size:clamp(38px,4.6vw,64px); letter-spacing:-.035em; line-height:.98; margin:0; font-variation-settings:"opsz" 96; max-width:22ch }
.section-head h2 em { font-style:italic }
.section-head .right { font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); text-align:right }
.section-head .right b { color:var(--ink); font-weight:500; display:block }

/* ─── MANIFESTO (dark) ─── */
.what { background:var(--ink); color:rgba(255,255,255,.6); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06) }
.what .section-head { grid-template-columns:1fr; border-bottom:1px solid rgba(255,255,255,.1) }
.what .section-head h2 { color:var(--bg); max-width:34ch }
.what .section-head h2 em { color:var(--accent-3) }
.what .grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start }
@media(max-width:1000px) { .what .grid { grid-template-columns:1fr; gap:48px } }
.what .lead { font-family:var(--font-display); font-weight:500; font-size:clamp(28px,3.2vw,42px); letter-spacing:-.02em; line-height:1.12; margin:0; font-variation-settings:"opsz" 96; color:var(--bg) }
.what .lead em { font-style:italic; color:var(--accent-3) }
.what .lead-sub { margin-top:20px; color:rgba(255,255,255,.6); font-size:16.5px; line-height:1.6; max-width:42ch }
.what .lead-sub b { color:var(--bg); font-weight:600 }
.pillars-wrap { display:flex; flex-direction:column; gap:18px }
.pillars-head { display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.45) }
.pillars-head b { color:var(--bg); font-weight:500 }
.pillars-head i { font-family:var(--font-italic); font-style:italic; letter-spacing:.04em; text-transform:none; font-size:13px; color:var(--accent-3) }
.pillars { display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media(max-width:600px) { .pillars { grid-template-columns:1fr } }
.pillar { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:24px 22px; display:flex; flex-direction:column; gap:8px; min-height:170px }
.pillar .n { font-family:var(--font-italic); font-style:italic; color:var(--accent-3); font-size:32px; line-height:1; font-weight:400 }
.pillar b { font-family:var(--font-display); font-weight:600; font-size:18px; letter-spacing:-.015em; line-height:1.15; color:var(--bg) }
.pillar p { font-size:13.5px; color:rgba(255,255,255,.55); line-height:1.5; margin:0 }

/* ─── PLATAFORMA ─── */
.platform { position:relative }
.platform .arch { background:var(--bg); border:1px solid var(--line); border-radius:24px; padding:64px 48px 48px; position:relative; overflow:hidden }
.platform .arch .grid-bg {
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(closest-side at 50% 30%, #000 0%, #000 50%, transparent 95%);
}
.platform .ring { display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:80px; position:relative }
.platform .ring .o {
  width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #FFFFFF 0%, #C7D6E5 14%, var(--accent-2) 44%, var(--accent) 78%, #142840 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1), 0 28px 60px -24px rgba(20,30,50,.55);
  display:grid; place-items:center;
}
.platform .ring .o .wm { font-size:22px; color:#fff; text-align:center; line-height:.92 }
.platform .ring .o .wm i { color:#fff; display:block }
.platform .ring .lab { font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft) }
.platform .ring .lab b { color:var(--ink); font-weight:500 }
.platform .arch::after { content:""; position:absolute; left:50%; top:204px; width:1px; height:54px; background:var(--line); z-index:1 }
.platform .arch .crossbar { position:absolute; left:14%; right:14%; top:258px; height:1px; background:var(--line); z-index:1 }

.verticals { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; position:relative; z-index:2 }
@media(max-width:900px) { .verticals { grid-template-columns:1fr 1fr } .platform .arch .crossbar { display:none } }
@media(max-width:560px) { .verticals { grid-template-columns:1fr } }
.vcard { background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:24px 22px; display:flex; flex-direction:column; gap:12px; min-height:230px; position:relative; transition:border-color .2s ease, transform .2s ease }
.vcard:hover { border-color:var(--accent-2); transform:translateY(-2px) }
.vcard .top { display:flex; justify-content:space-between; align-items:center }
.vcard .top .n  { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft) }
.vcard .top .st { font-family:var(--font-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); padding:3px 8px; border:1px solid var(--line); border-radius:99px }
.vcard .dot { width:38px; height:38px; border-radius:50%; background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.9) 0%, var(--v2) 42%, var(--v1) 100%); box-shadow:inset 0 0 0 1px rgba(0,0,0,.08) }
.vcard .nm { font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:-.025em; line-height:1 }
.vcard .nm i { font-family:var(--font-italic); font-style:italic; font-weight:400; color:var(--v1); letter-spacing:-.005em }
.vcard .ds { font-size:13.5px; color:var(--ink-soft); line-height:1.45 }
.vcard .ft { margin-top:auto; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft) }
.vcard.active { border-color:var(--accent); background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 5%, var(--bg)) 0%, var(--bg) 100%) }
.vcard.active .top .st { background:var(--accent); color:var(--bg); border-color:var(--accent); font-weight:600 }
.vcard.soon { opacity:.65 }
.vcard.soon .top .st { color:var(--gold); border-color:color-mix(in oklab, var(--gold) 40%, var(--line)) }
.v-este { --v1:#8E5A4E; --v2:#C68B7B }
.v-mec  { --v1:#E8862B; --v2:#FFB163 }
.v-prof { --v1:#3E6B4A; --v2:#7AAA72 }
.v-mot  { --v1:#B89668; --v2:#D9BF8A }

/* ─── EDIÇÃO ESTETICISTAS ─── */
.edition { background:var(--bg); border-top:1px solid var(--line-soft) }
.edition .head-row { display:block; padding-bottom:28px; margin-bottom:56px; border-bottom:1px solid var(--line) }
.edition h2 { font-family:var(--font-display); font-weight:700; font-size:clamp(40px,5vw,76px); letter-spacing:-.04em; line-height:.96; margin:14px 0 0; max-width:none; white-space:nowrap; font-variation-settings:"opsz" 96 }
@media(max-width:900px) { .edition h2 { white-space:normal } }
.edition h2 em { font-style:italic }
.edition .right-meta { font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); display:flex; flex-direction:column; gap:6px }
.edition .right-meta b { color:var(--ink); font-weight:500 }
.edition .right-meta .pip { display:inline-flex; align-items:center; gap:8px }
.edition .right-meta .pip::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px color-mix(in oklab, var(--ok) 20%, transparent) }
.edition-layout { display:grid; grid-template-columns:1fr .95fr; gap:64px; align-items:start }
@media(max-width:1000px) { .edition-layout { grid-template-columns:1fr; gap:48px } }
.edition-copy .intro { font-family:var(--font-display); font-weight:500; font-size:clamp(24px,2.6vw,32px); letter-spacing:-.02em; line-height:1.2; max-width:24ch; margin:0 0 32px }
.edition-copy .intro em { font-style:italic }
.features { display:flex; flex-direction:column }
.feature { display:grid; grid-template-columns:48px 1fr; gap:22px; padding:24px 0; border-bottom:1px dashed var(--line) }
.feature:last-child { border:0 }
.feature .ic { width:44px; height:44px; border-radius:12px; background:var(--bg-soft); border:1px solid var(--line); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--accent); font-variation-settings:"opsz" 36 }
.feature h4 { font-family:var(--font-display); font-weight:600; font-size:20px; letter-spacing:-.015em; margin:0 0 6px; line-height:1.2; color:var(--ink) }
.feature h4 em { font-style:italic; color:var(--accent) }
.feature p { margin:0; font-size:14.5px; color:var(--ink-soft); line-height:1.55 }

/* mockup phone */
.mockup-wrap { position:sticky; top:96px }
.mockup { background:var(--bg-soft); border:1px solid var(--line); border-radius:28px; padding:18px; position:relative; overflow:hidden; box-shadow:0 50px 100px -50px rgba(20,30,50,.5) }
.mockup .stamp { position:absolute; left:24px; top:24px; z-index:2; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft) }
.mockup .phone { background:var(--bg); border-radius:18px; padding:22px; display:flex; flex-direction:column; gap:18px; border:1px solid var(--line-soft); min-height:560px; margin-top:24px }
.mockup .phone .topbar { display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft) }
.mockup .phone .topbar .who { display:flex; align-items:center; gap:8px; color:var(--ink) }
.mockup .phone .topbar .who b { font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; text-transform:none; font-size:13px }
.mockup .phone .topbar .who .o { width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 32% 28%, #fff 0%, var(--accent-2) 45%, var(--accent) 100%) }
.mockup .greet { background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 6%, var(--bg)) 0%, var(--bg) 100%); border:1px solid color-mix(in oklab, var(--accent) 18%, var(--line)); border-radius:14px; padding:18px }
.mockup .greet .h { font-family:var(--font-display); font-weight:600; font-size:18px; letter-spacing:-.015em; line-height:1.2 }
.mockup .greet .h em { font-style:italic }
.mockup .greet .p { font-size:13px; color:var(--ink-soft); margin-top:6px; line-height:1.5 }
.mockup .metric { background:var(--ink); color:var(--bg); border-radius:14px; padding:18px; display:flex; justify-content:space-between; align-items:flex-end; gap:18px }
.mockup .metric .l { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:6px }
.mockup .metric .v { font-family:var(--font-display); font-weight:700; font-size:36px; letter-spacing:-.03em; line-height:.9 }
.mockup .metric .v em { font-family:var(--font-italic); font-style:italic; color:var(--accent-3); font-weight:400 }
.mockup .metric .delta { font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ok); background:color-mix(in oklab, var(--ok) 22%, transparent); padding:5px 9px; border-radius:99px }
.mockup .metrics-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.mockup .metric-card { background:var(--ink); color:var(--bg); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:4px }
.mockup .metric-card .l { font-family:var(--font-mono); font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5) }
.mockup .metric-card .v { font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:-.02em; line-height:1.1; color:var(--bg) }
.mockup .metric-card .delta { font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ok); margin-top:2px }
.mockup .rows { display:flex; flex-direction:column; gap:8px }
.mockup .row { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:12px; padding:11px 14px; background:var(--bg-soft); border:1px solid var(--line-soft); border-radius:11px }
.mockup .row .t { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; color:var(--ink-soft) }
.mockup .row .n { font-family:var(--font-display); font-weight:600; font-size:14px; letter-spacing:-.005em; line-height:1.15 }
.mockup .row .n small { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-top:2px; font-weight:400 }
.mockup .row .pill { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; padding:4px 8px; background:var(--bg); border:1px solid var(--line); border-radius:99px; color:var(--ink-soft) }
.mockup .row.live { background:color-mix(in oklab, var(--accent) 7%, var(--bg)); border-color:color-mix(in oklab, var(--accent) 22%, var(--line)) }
.mockup .row.live .pill { background:var(--accent); color:var(--bg); border-color:var(--accent) }
.mockup .suggest { background:var(--bg); border:1px dashed var(--accent-3); border-radius:12px; padding:14px 16px; display:flex; gap:12px; align-items:flex-start }
.mockup .suggest .o { width:24px; height:24px; border-radius:50%; background:radial-gradient(circle at 32% 28%, #fff 0%, var(--accent-2) 45%, var(--accent) 100%); flex-shrink:0; margin-top:1px }
.mockup .suggest .txt { font-size:12.5px; line-height:1.45; color:var(--ink) }
.mockup .suggest .txt em { font-style:italic; color:var(--accent) }
.mockup .suggest .txt b { font-weight:600 }

/* ─── COMO FUNCIONA ─── */
.how { background:var(--bg-soft); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft) }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
@media(max-width:900px) { .steps { grid-template-columns:1fr } }
.step { background:var(--bg); border:1px solid var(--line); border-radius:18px; padding:32px 28px; display:flex; flex-direction:column; gap:14px; min-height:300px; position:relative }
.step .k { font-family:var(--font-italic); font-style:italic; color:var(--accent); font-size:54px; line-height:.9; font-weight:400 }
.step h3 { font-family:var(--font-display); font-weight:600; font-size:24px; letter-spacing:-.02em; line-height:1.1; margin:0 }
.step h3 em { font-style:italic }
.step p { margin:0; font-size:14.5px; color:var(--ink-soft); line-height:1.55 }
.step .chip { margin-top:auto; display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); padding:6px 10px; border:1px solid var(--line); border-radius:99px }

/* ─── NÚMEROS ─── */
.numbers { background:var(--ink); color:var(--bg); position:relative; overflow:hidden }
.numbers::before { content:""; position:absolute; inset:auto -10% -40% auto; width:55%; height:120%; background:radial-gradient(closest-side, color-mix(in oklab, var(--accent) 80%, transparent) 0%, transparent 70%); opacity:.6; pointer-events:none }
.numbers .head { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end; margin-bottom:64px; position:relative }
@media(max-width:900px) { .numbers .head { grid-template-columns:1fr; gap:18px; margin-bottom:40px } }
.numbers .eyebrow { color:var(--accent-3) }
.numbers .eyebrow::before { background:var(--accent-3) }
.numbers h2 { font-family:var(--font-display); font-weight:700; font-size:clamp(38px,4.6vw,68px); letter-spacing:-.035em; line-height:.98; margin:14px 0 0; color:var(--bg); max-width:18ch; font-variation-settings:"opsz" 96 }
.numbers h2 em { font-style:italic; color:var(--accent-3) }
.numbers .side { font-size:15.5px; color:rgba(255,255,255,.72); max-width:36ch; line-height:1.55 }
.numbers .side b { color:var(--bg); font-weight:600 }
.bignums { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid rgba(255,255,255,.14); position:relative }
@media(max-width:900px) { .bignums { grid-template-columns:1fr 1fr } }
@media(max-width:560px) { .bignums { grid-template-columns:1fr } }
.bignums .n { padding:36px 28px; border-right:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); display:flex; flex-direction:column; gap:12px }
.bignums .n:last-child { border-right:0 }
.bignums .n .v { font-family:var(--font-display); font-weight:700; font-size:clamp(48px,5.5vw,84px); letter-spacing:-.04em; line-height:.92; font-variation-settings:"opsz" 96 }
.bignums .n .v em { font-family:var(--font-italic); font-style:italic; color:var(--accent-3); font-weight:400 }
.bignums .n .l { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5) }
.bignums .n .l b { color:var(--bg); font-weight:500 }

/* ─── CTA FINAL / WAITLIST ─── */
.cta-final { background:var(--bg-soft); position:relative; overflow:hidden }
.cta-final::before { content:""; position:absolute; left:-10%; top:-30%; width:50%; height:140%; background:radial-gradient(closest-side, color-mix(in oklab, var(--accent-3) 50%, transparent) 0%, transparent 70%); opacity:.4; pointer-events:none }
.cta-final .inner { display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center; position:relative }
@media(max-width:1000px) { .cta-final .inner { grid-template-columns:1fr; gap:40px } }
.cta-final h2 { font-family:var(--font-display); font-weight:700; font-size:clamp(40px,5.5vw,84px); letter-spacing:-.04em; line-height:.95; margin:14px 0 0; max-width:14ch; font-variation-settings:"opsz" 96 }
.cta-final h2 em { font-style:italic }
.cta-final .body { font-size:17px; color:var(--ink-soft); max-width:42ch; margin:22px 0 32px; line-height:1.55 }
.cta-final .body b { color:var(--ink); font-weight:600 }
.waitlist { background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:36px; display:flex; flex-direction:column; gap:18px; box-shadow:0 30px 60px -30px rgba(20,30,50,.3) }
.waitlist .head { display:flex; justify-content:space-between; align-items:center; padding-bottom:14px; border-bottom:1px dashed var(--line) }
.waitlist .head .ttl { font-family:var(--font-display); font-weight:600; font-size:18px; letter-spacing:-.015em }
.waitlist .head .ttl em { font-style:italic }
.waitlist .head .seats { font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:8px }
.waitlist .head .seats b { color:var(--accent); font-weight:600 }
.waitlist .field { display:flex; flex-direction:column; gap:6px }
.waitlist .field label { font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft) }
.waitlist input, .waitlist select { font-family:inherit; font-size:15px; padding:13px 15px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--ink); outline:0; width:100%; transition:border-color .15s, box-shadow .15s }
.waitlist input:focus, .waitlist select:focus { border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 15%, transparent) }
.waitlist .row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media(max-width:560px) { .waitlist .row2 { grid-template-columns:1fr } }
.waitlist .submit { width:100%; justify-content:center; margin-top:4px; padding:16px 22px }
.waitlist .small { font-family:var(--font-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); text-align:center; margin-top:4px }
#wl-ok { display:none; padding:20px; background:color-mix(in oklab, var(--ok) 14%, var(--bg)); border:1px solid color-mix(in oklab, var(--ok) 30%, var(--line)); border-radius:12px; font-size:14px; line-height:1.5 }
#wl-ok b { color:var(--ok); font-weight:600; display:block; margin-bottom:4px; font-family:var(--font-display); font-size:16px; letter-spacing:-.015em }
.form-error { background:color-mix(in oklab, var(--error) 10%, var(--bg)); border:1px solid color-mix(in oklab, var(--error) 35%, var(--line)); color:var(--error) }

/* ─── FOOTER ─── */
footer { background:var(--ink); color:rgba(255,255,255,.6); padding:64px 0 36px }
footer .grid { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:48px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.1) }
@media(max-width:800px) { footer .grid { grid-template-columns:1fr 1fr; gap:32px } }
@media(max-width:480px) { footer .grid { grid-template-columns:1fr } }
footer .brand { display:flex; flex-direction:column; gap:18px }
footer .brand .lockup { display:flex; align-items:center; gap:14px }
footer .brand .lockup .wm { font-size:24px; color:var(--bg) }
footer .brand .lockup .wm i { color:var(--accent-3) }
footer .brand p { font-size:13.5px; color:rgba(255,255,255,.55); line-height:1.55; max-width:32ch }
footer h5 { font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.4); margin:0 0 14px; font-weight:500 }
footer ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px }
footer a { font-size:13.5px; color:rgba(255,255,255,.7) }
footer a:hover { color:var(--bg) }
footer .bot { display:flex; justify-content:center; gap:32px; align-items:center; padding-top:24px; font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.4); flex-wrap:wrap }
footer .bot b { color:rgba(255,255,255,.7); font-weight:500 }
footer .bot .v { color:var(--accent-3) }

/* vagas esgotadas */
.vagas-cheias { font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); padding:16px; background:var(--bg-deep); border:1px solid var(--line); border-radius:10px; text-align:center; line-height:1.5 }

/* ─── 404 ─── */
body.error-page { min-height:100vh; display:flex; flex-direction:column }
body.error-page main.err-main { flex:1; display:flex; align-items:center; justify-content:center }

.err {
  position:relative; overflow:hidden; padding:96px 0 120px; width:100%;
  background:
    radial-gradient(58% 70% at 92% 18%, color-mix(in oklab, var(--accent-3) 28%, transparent) 0%, transparent 65%),
    radial-gradient(70% 60% at 6% 105%, var(--bg-deep) 0%, transparent 55%),
    var(--bg);
}
.err::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(20,23,28,.08) 1px, transparent 1.6px);
  background-size:28px 28px; opacity:.4;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 70%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 70%, transparent 100%);
}
.err .inner { position:relative; z-index:1; display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center }
@media(max-width:980px) { .err .inner { grid-template-columns:1fr; gap:48px } }

.err h1 {
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(44px,5.4vw,88px); letter-spacing:-.04em; line-height:.98;
  margin:18px 0 22px; font-variation-settings:"opsz" 96; max-width:14ch;
}
.err .sub { font-size:20px; color:var(--ink-soft); max-width:48ch; margin:0 0 32px; line-height:1.5 }
.err .sub b { color:var(--ink); font-weight:600 }
.err .ctas { display:flex; gap:14px; align-items:center; flex-wrap:wrap }
.err .ctas .btn { padding:16px 26px; font-size:15px }
.err .meta {
  margin-top:48px; display:flex; gap:36px; flex-wrap:wrap; padding-top:28px; border-top:1px solid var(--line-soft);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
}
.err .meta b {
  font-family:var(--font-display); font-weight:700; font-size:15px;
  letter-spacing:-.005em; color:var(--ink); text-transform:none; font-variation-settings:"opsz" 36;
}

.err-card {
  position:relative;
  background:var(--bg); border:1px solid var(--line); border-radius:24px;
  padding:48px 40px; display:flex; flex-direction:column; gap:24px;
  box-shadow:0 40px 80px -40px rgba(20,30,50,.35);
}
.err-card .corner {
  position:absolute; left:18px; top:18px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}
.err-card .corner b { color:var(--accent); font-weight:500 }
.err-card .stamp {
  position:absolute; right:18px; top:18px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}
.err-card .stamp .live {
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--error); margin-right:6px;
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity:1;   transform:scale(1) }
  50%      { opacity:.55; transform:scale(1.35) }
}
.err-card .glyph {
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(120px,16vw,220px);
  letter-spacing:-.06em; line-height:.85;
  color:var(--ink); font-variation-settings:"opsz" 96;
  display:flex; align-items:center; gap:10px; margin-top:36px;
}
.err-card .glyph em { color:var(--accent) }
.err-card hr { border:0; border-top:1px dashed var(--line); margin:0 }
.err-card .ed-row { display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:14px; padding:11px 0; border-bottom:1px dashed var(--line) }
.err-card .ed-row:last-of-type { border-bottom:0 }
.err-card .ed-row .n  { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink-soft) }
.err-card .ed-row .nm { font-family:var(--font-display); font-weight:600; font-size:16px; letter-spacing:-.015em; display:flex; align-items:center; gap:10px }
.err-card .ed-row .nm i { font-family:var(--font-italic); font-style:italic; color:var(--accent); font-weight:400 }
.err-card .ed-row .st {
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  padding:4px 9px; border:1px solid var(--line); border-radius:99px;
}
.err-card .ed-row a { display:contents }
.err-card .ed-row a:hover .nm { color:var(--accent) }
.err-card .foot {
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  padding-top:14px; border-top:1px dashed var(--line);
}
.err-card .foot b { color:var(--ink); font-weight:500 }

@media(max-width:600px) {
  .err { padding:64px 0 80px }
  .err-card { padding:36px 24px }
  .err-card .glyph { font-size:clamp(100px,28vw,180px); margin-top:24px }
}

@media(prefers-reduced-motion: reduce) {
  .err-card .stamp .live { animation:none }
}

/* ─── MOBILE REFINEMENTS (<800px) ─── */
@media(max-width:800px) {
  body { font-size:15px }
  .wrap { width:min(1240px,calc(100vw - 32px)) }
  nav.top .inner { padding:14px 0 }
  nav.top .lk .wm { font-size:18px }
  nav.top .lk .ed { display:none }

  .hero { padding:64px 0 56px }
  .hero h1 { font-size:clamp(36px,9vw,56px); letter-spacing:-.03em; line-height:1; margin:12px 0 20px }
  .hero .sub { font-size:16.5px; margin:0 }

  .what .section-head h2 { font-size:clamp(28px,7.5vw,42px); max-width:none }
  .what .lead { font-size:clamp(24px,6.5vw,32px) }
  .what .lead-sub { font-size:15.5px; margin-top:14px; max-width:none }

  .pillars-head { flex-wrap:wrap; gap:8px }
  .pillars { gap:10px }
  .pillar { min-height:auto; padding:20px 18px }
  .pillar .n { font-size:26px }
  .pillar b { font-size:16.5px }
  .pillar p { font-size:13px }

  .edition .head-row { padding-bottom:20px; margin-bottom:36px }
  .edition h2 { font-size:clamp(34px,6vw,48px); max-width:18ch }
  .edition-copy .intro { font-size:clamp(20px,5vw,26px); max-width:none; margin:0 0 24px }

  .feature { grid-template-columns:40px 1fr; gap:16px }
  .feature .ic { width:40px; height:40px; font-size:16px }
  .feature h4 { font-size:18px }
  .feature p { font-size:14px }
  .features { gap:24px }

  .mockup-wrap { position:static }
  .mockup { padding:24px 18px; border-radius:22px }
}

@media(max-width:480px) {
  footer { padding:48px 0 28px }
  footer .grid { gap:36px }
  footer .bot { flex-direction:column; gap:10px; text-align:center }
}