/* =========================================================================
   MeAuren — landing (redesign 2026-09-19 · movimento 2026-09-20)
   A arte da campanha lidera; a interface some.

   O movimento tem um dono: estilo/movimento.css (linguagem) e js/movimento.js
   (motor). O que mora AQUI é só o que é desta página e de mais nenhuma:
   o respiro da arte da abertura e a cena da sessão de exemplo — o momento
   autoral da apresentação, cujo roteiro está em js/landing.js.
   ========================================================================= */
body.na-landing .app{display:none;}
#landing{display:none;}
body.na-landing #landing{display:block;}
body.na-landing{background:var(--night);}

#landing .lwrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px);}

/* ---------- navegação ---------- */
#landing .lhead{position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);height:68px;display:flex;align-items:center;
  transition:background var(--dur-comp) var(--ease),box-shadow var(--dur-comp) var(--ease),backdrop-filter var(--dur-comp);}
#landing .lhead.solido{background:color-mix(in srgb,var(--night) 86%,transparent);backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);box-shadow:0 1px 0 var(--line);}
#landing .lnav{display:flex;align-items:center;gap:32px;}
#landing .wm{font-family:var(--fd);font-weight:800;font-size:20px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);text-decoration:none;line-height:1;}
#landing .wm em{font-style:normal;color:var(--amber);}
#landing .links{display:flex;gap:28px;margin-left:auto;}
#landing .lk{color:var(--ink-2);font-size:14px;font-weight:500;text-decoration:none;transition:color var(--dur-micro);}
#landing .lk:hover{color:var(--ink);}
@media(max-width:860px){#landing .links{display:none;}#landing .lnav>.btn{margin-left:auto;}}

/* ---------- botões da landing (a base vem de app.css) ---------- */
#landing .btn.lg{min-height:52px;padding:0 26px;font-size:15px;}
#landing .btn.ghost{background:rgba(237,235,231,.04);border-color:var(--line-2);color:var(--ink);backdrop-filter:blur(6px);}
#landing .btn.ghost:hover{background:rgba(237,235,231,.1);border-color:rgba(237,235,231,.34);}
#landing .lkbtn{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-size:inherit;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:.25em;}
#landing .lkbtn:hover{color:var(--ink);text-decoration-color:currentColor;}

/* ---------- abertura ---------- */
#landing .lhero{position:relative;isolation:isolate;min-height:min(100svh,940px);display:grid;grid-template-rows:1fr auto;overflow:hidden;background:var(--night);}
#landing .lhero-arte{position:absolute;inset:0;z-index:-2;}
#landing .lhero-arte img{width:100%;height:100%;object-fit:cover;object-position:68% 38%;transform-origin:70% 40%;animation:lh-respira 22s var(--ease-expo) both;}
@keyframes lh-respira{from{transform:scale(1.07);}to{transform:scale(1);}}
#landing .lhero-scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to right,rgba(12,13,16,.94) 0%,rgba(12,13,16,.78) 30%,rgba(12,13,16,.2) 62%,rgba(12,13,16,0) 80%),
  linear-gradient(to top,var(--night) 0%,rgba(12,13,16,.6) 22%,rgba(12,13,16,0) 48%),
  linear-gradient(to bottom,rgba(12,13,16,.55) 0%,rgba(12,13,16,0) 16%);}
#landing .lhero-corpo{align-self:end;padding-top:140px;padding-bottom:56px;}
#landing .lhero-texto{max-width:820px;}
#landing .lhero h1{font-size:clamp(34px,4.3vw,66px);font-weight:850;line-height:.98;letter-spacing:-.025em;text-transform:uppercase;max-width:16ch;}
#landing .lhero h1 em{font-style:normal;color:inherit;}
#landing .lede{font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:var(--ink-2);max-width:46ch;margin-top:24px;}
#landing .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;}
#landing .note{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:13px;color:var(--mut);margin-top:20px;}

#landing .pilares{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2);}
#landing .pilares li{display:flex;gap:14px;align-items:flex-start;padding:22px 20px 34px 0;}
#landing .pilares li+li{padding-left:20px;border-left:1px solid var(--line);}
#landing .pilares .i{color:var(--ink-2);margin-top:1px;}
#landing .pilares b{display:block;font-size:14px;font-weight:700;color:var(--ink);}
#landing .pilares span{display:block;font-size:13.5px;color:var(--mut);margin-top:3px;line-height:1.45;}
@media(max-width:900px){
  #landing .pilares{grid-template-columns:repeat(2,minmax(0,1fr));}
  #landing .pilares li:nth-child(3){padding-left:0;border-left:none;}
  #landing .pilares li:nth-child(n+3){border-top:1px solid var(--line);padding-top:18px;}
  #landing .pilares li{padding-bottom:20px;}
}
@media(max-width:520px){
  #landing .pilares{grid-template-columns:1fr;}
  #landing .pilares li,#landing .pilares li+li{padding:16px 0;border-left:none;}
  #landing .pilares li+li{border-top:1px solid var(--line);}
  #landing .lhero-corpo{padding-top:112px;padding-bottom:36px;}
}

/* ---------- seções ---------- */
#landing .lsec{padding-block:clamp(72px,9vw,128px);}
#landing .lsec-cab{max-width:720px;}
#landing .lsec-cab h2,#landing .honest h2,#landing .lfinal h2{font-size:clamp(30px,3.5vw,48px);font-weight:850;line-height:1;letter-spacing:-.02em;text-transform:uppercase;}
#landing .lsec-cab p{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:58ch;margin-top:18px;}

/* ---------- a sessão de exemplo ---------- */
#landing .demo{position:relative;isolation:isolate;margin-top:48px;display:grid;grid-template-columns:minmax(0,1fr) 330px;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);}
#landing .demo-cena{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to right,rgba(20,22,26,.97) 0%,rgba(20,22,26,.9) 55%,rgba(20,22,26,.7) 100%),
  url("../../assets/capas/torre-parada-960.webp") 80% 30%/cover no-repeat;}
#landing .demo-h{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:16px 26px;border-bottom:1px solid var(--line);}
#landing .demo-h .t{font-family:var(--fd);font-weight:800;font-size:15px;letter-spacing:.01em;text-transform:uppercase;}
#landing .demo-h .tag{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mut);margin-left:auto;}
#landing .aovivo{width:7px;height:7px;border-radius:50%;background:var(--hp);display:inline-block;}
#landing .tr{padding:30px 32px 34px;display:flex;flex-direction:column;gap:26px;min-width:0;}
#landing .t-who{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:6px;}
#landing .t-row.ora .t-who{color:var(--ink);}
#landing .t-row.pl .t-tx{font-size:15.5px;color:var(--ink-2);max-width:60ch;}
#landing .t-row.ora .t-tx{font-family:var(--fe);font-size:19px;line-height:1.6;color:var(--ink);max-width:62ch;}
#landing .fx{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
#landing .fx>span{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:4px 11px;border-radius:var(--r);font-size:13px;font-weight:500;background:var(--surf-3);color:var(--ink-2);}
#landing .fx .rolagem{background:var(--sys-soft);color:var(--sys);font-family:var(--fm);font-size:12.5px;}
#landing .fx .rolagem b{font-weight:700;color:var(--ink);min-width:2ch;display:inline-block;text-align:right;}
#landing .fx .dano{background:var(--bad-bg);color:var(--hp);font-family:var(--fm);font-size:12.5px;}
#landing .fx .canone .i{color:var(--xp);}

#landing .demo-side{border-left:1px solid var(--line);background:rgba(8,9,11,.35);padding:4px 24px;display:flex;flex-direction:column;}
#landing .ds{padding:20px 0;}
#landing .ds+.ds{border-top:1px solid var(--line);}
#landing .ds-t{font-family:var(--fb);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:14px;}
#landing .vt+.vt{margin-top:12px;}
#landing .vh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
#landing .vn{font-size:13px;color:var(--ink-2);}
#landing .vv{font-family:var(--fm);font-size:13px;color:var(--ink);}
#landing .bar{height:6px;border-radius:3px;background:var(--surf-3);overflow:hidden;}
#landing .bar i{display:block;height:100%;width:100%;border-radius:inherit;transform-origin:left center;transform:scaleX(var(--v));transition:transform 1.1s var(--ease-expo);}
#landing .bar i.vida{background:var(--hp);}
#landing .bar i.mana{background:var(--mp);}
#landing .chg{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--sys);margin-top:14px;line-height:1.45;}
#landing .cn{margin:0;padding:0;list-style:none;counter-reset:cn;display:flex;flex-direction:column;gap:10px;}
#landing .cn li{counter-increment:cn;display:grid;grid-template-columns:22px 1fr;gap:6px;font-size:13.5px;color:var(--ink-2);line-height:1.45;}
#landing .cn li::before{content:counter(cn);font-family:var(--fm);font-size:12px;color:var(--xp);padding-top:1px;}
#landing .emcena{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--ink);}
#landing .emcena .mono{color:var(--mut);font-size:12.5px;}
#landing .lsessao-acao{margin-top:28px;display:flex;justify-content:flex-start;}

/* =========================================================================
   O MOMENTO AUTORAL DA APRESENTAÇÃO — a sessão acontecendo.
   Só quando o JS assume (classe .anima) e nunca com movimento reduzido.
   A ordem é a de uma sessão de verdade: a mesa, o ambiente, o que o sistema
   guarda, a fala, a rolagem, o cânone, o golpe, a ficha, a criatura.
   O roteiro está em js/landing.js.
   ========================================================================= */

/* 1. a mesa chega */
#landing .demo.anima{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease-expo),transform .8s var(--ease-expo);}
#landing .demo.anima.pronta{opacity:1;transform:none;}

/* 2. o ambiente acende atrás */
#landing .demo.anima .demo-cena{opacity:0;transition:opacity 1.5s var(--ease-expo);}
#landing .demo.anima.cena .demo-cena{opacity:1;}
#landing .demo.anima .demo-h{opacity:0;transition:opacity .6s var(--ease) .1s;}
#landing .demo.anima.cena .demo-h{opacity:1;}

/* 3. o que o sistema guarda entra pelo lado */
#landing .demo.anima .ds{opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);}
#landing .demo.anima .ds.vis{opacity:1;transform:none;}

/* 4. as falas, uma de cada vez */
#landing .demo.anima .t-row{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease-expo),transform .6s var(--ease-expo);}
#landing .demo.anima .t-row.vis{opacity:1;transform:none;}

/* 5. o sistema fala depois da ficção: o selo chega atrás da narração */
#landing .demo.anima .fx>span{opacity:0;transform:translateY(4px);transition:opacity .4s var(--ease-expo),transform .4s var(--ease-expo);}
#landing .demo.anima .t-row.vis .fx>span{opacity:1;transform:none;}
#landing .demo.anima .t-row.vis .fx>span:nth-child(2){transition-delay:.38s;}
#landing .demo.anima .t-row.vis .fx>span:nth-child(3){transition-delay:.76s;}
#landing .demo.anima .t-row.vis .fx>span:nth-child(4){transition-delay:1.1s;}

/* 6. o dado para: o número assenta em ciano e volta ao normal */
#landing .demo .fx .rolagem b.parou{animation:dado-assenta .7s var(--ease-expo);}
@keyframes dado-assenta{
  0%{color:var(--sys);transform:translateY(-2px);}
  100%{color:var(--ink);transform:none;}
}

/* 7. o cânone registra: o fato que o Mestre Auren acabou de fixar acende */
#landing .cn li{transition:color .5s var(--ease);}
#landing .cn li.acendeu{animation:canone-fixa 1.6s var(--ease-expo);}
#landing .cn li.acendeu::before{animation:canone-marca 1.6s var(--ease-expo);}
@keyframes canone-fixa{0%,14%{color:var(--sys);}100%{color:var(--ink-2);}}
@keyframes canone-marca{0%,14%{color:var(--sys);transform:scale(1.25);}100%{color:var(--xp);transform:none;}}

/* 8. o golpe: a barra desce (scaleX, não width) e pisca uma vez */
#landing .demo .bar i.acertou{animation:dano-pisca .9s var(--ease-expo);}
@keyframes dano-pisca{0%{filter:brightness(2.2);}100%{filter:none;}}
#landing .demo.anima .chg{opacity:0;transition:opacity .5s var(--ease) .2s;}
#landing .demo.anima .chg.vis{opacity:1;}

/* 9. a criatura entra em cena — o último estado a mudar.
      A linha já ocupa o lugar dela, então nada salta de posição. */
#landing .demo.anima .emcena{opacity:0;transform:translateY(4px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);}
#landing .demo.anima .emcena.vis{opacity:1;transform:none;}

@media(max-width:900px){
  #landing .demo{grid-template-columns:1fr;}
  #landing .demo-side{border-left:none;border-top:1px solid var(--line);padding:4px 22px;}
  #landing .tr{padding:24px 22px 28px;}
  #landing .t-row.ora .t-tx{font-size:17.5px;}
}

/* ---------- não é um chat ---------- */
#landing .lcomo-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,88px);align-items:start;}
#landing .contrast{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
#landing .contrast>div{border-radius:var(--r-lg);padding:26px 24px;}
#landing .contrast .col-a{background:transparent;border:1px solid var(--line);}
#landing .contrast .col-b{background:var(--surf-2);box-shadow:var(--shadow);}
#landing .contrast h3{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.01em;margin-bottom:14px;}
#landing .contrast .col-a h3{color:var(--mut);}
#landing .contrast ul{list-style:none;margin:0;padding:0;}
#landing .contrast li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.5;}
#landing .contrast .col-a li{color:var(--mut);}
#landing .contrast .col-a .i{color:var(--mut-2);margin-top:3px;}
#landing .contrast .col-b li{color:var(--ink);}
#landing .contrast .col-b .i{color:var(--sys);margin-top:3px;}
@media(max-width:960px){#landing .lcomo-grid{grid-template-columns:1fr;}}
@media(max-width:620px){#landing .contrast{grid-template-columns:1fr;}}

/* ---------- campanhas prontas ---------- */
#landing .capas{margin-top:48px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(270px,auto));gap:16px;}
#landing .capa{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-xl);background:var(--surf);min-height:270px;display:flex;align-items:flex-end;}
#landing .capa-lg{grid-row:span 2;min-height:556px;}
#landing .capa>img,#landing .capa-duas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;}
#landing .capa>img{object-fit:cover;object-position:70% 40%;transition:transform 1.2s var(--ease-expo);}
#landing .capa-duas{display:grid;grid-template-rows:1fr 1fr;}
#landing .capa-duas img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-expo);}
#landing .capa::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(12,13,16,.96) 0%,rgba(12,13,16,.72) 38%,rgba(12,13,16,.08) 72%,rgba(12,13,16,0) 100%);}
#landing .capa:hover>img,#landing .capa:hover .capa-duas img{transform:scale(1.035);}
#landing .capa-txt{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:28px;max-width:560px;}
#landing .capa-txt h3{order:1;font-size:clamp(20px,2vw,28px);font-weight:850;text-transform:uppercase;letter-spacing:-.01em;line-height:1.02;}
#landing .capa-lg .capa-txt h3{font-size:clamp(26px,3vw,40px);}
#landing .capa-txt p{order:2;font-size:15px;color:var(--ink-2);line-height:1.5;max-width:44ch;}
#landing .capa-meta{order:3;font-size:12.5px;color:var(--mut);}
#landing .capa-txt .btn{order:4;margin-top:6px;}
@media(max-width:860px){
  #landing .capas{grid-template-columns:1fr;grid-template-rows:none;}
  #landing .capa-lg{grid-row:auto;min-height:420px;}
  #landing .capa{min-height:320px;}
}

/* ---------- a mesa: faixa sangrada sobre a arte do Ato I ---------- */
#landing .lmesa{position:relative;isolation:isolate;}
#landing .lmesa::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url("../../assets/capas/floresta-vinhas-1920.webp") 50% 42%/cover no-repeat;}
@media (prefers-reduced-motion:no-preference){#landing .lmesa::before{background-attachment:fixed;}}
#landing .lmesa::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to bottom,var(--night) 0%,rgba(12,13,16,.7) 13%,rgba(12,13,16,.76) 62%,var(--night) 100%),
  radial-gradient(130% 80% at 18% 30%,rgba(12,13,16,.2) 0%,rgba(12,13,16,.72) 72%);}

/* ---------- a mesa ---------- */
#landing .lmesa-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,88px);align-items:start;}
#landing .lmesa-cab{position:sticky;top:110px;}
#landing .recursos{list-style:none;margin:0;padding:0;}
#landing .recursos li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:20px;padding:28px 0;border-top:1px solid var(--line);}
#landing .recursos li:last-child{border-bottom:1px solid var(--line);}
#landing .recursos .i{color:var(--ink-2);margin-top:2px;}
#landing .recursos h3{font-size:17px;font-weight:800;text-transform:uppercase;letter-spacing:.005em;}
#landing .recursos p{font-size:15px;color:var(--ink-2);margin-top:8px;max-width:58ch;line-height:1.6;}
@media(max-width:960px){#landing .lmesa-grid{grid-template-columns:1fr;}#landing .lmesa-cab{position:static;}}

/* ---------- para quem ---------- */
#landing .split{margin-top:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;}
#landing .split>div{padding-top:22px;border-top:1px solid var(--line-2);}
#landing .split h3{font-size:19px;font-weight:850;text-transform:uppercase;}
#landing .split p{font-size:15px;color:var(--ink-2);margin-top:10px;line-height:1.6;}
@media(max-width:820px){#landing .split{grid-template-columns:1fr;gap:8px;}}

/* ---------- planos ---------- */
#landing .plans{margin-top:44px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1000px;}
#landing .plan{display:flex;flex-direction:column;gap:16px;padding:32px;border-radius:var(--r-xl);background:var(--surf);border:1px solid var(--line);}
#landing .plan.hi{background:var(--surf-2);box-shadow:var(--shadow-deep);}
#landing .phead{display:flex;justify-content:space-between;align-items:center;gap:10px;}
#landing .pn{font-family:var(--fd);font-size:22px;font-weight:850;text-transform:uppercase;}
#landing .plan .n{font-size:12.5px;font-weight:600;color:var(--amber);background:var(--amber-soft);padding:4px 10px;border-radius:999px;}
#landing .pp{font-family:var(--fd);font-size:42px;font-weight:850;line-height:1;}
#landing .pp small{font-family:var(--fb);font-size:15px;font-weight:500;color:var(--mut);}
#landing .pd{font-size:15px;color:var(--ink-2);}
#landing .plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;flex:1;}
#landing .plan li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);}
#landing .plan li .i{color:var(--ink);margin-top:2px;}
#landing .plan>.btn{align-self:flex-start;}
#landing .cycs{display:flex;flex-direction:column;gap:8px;}
#landing .cyc{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;width:100%;padding:12px 14px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surf);transition:border-color var(--dur-micro),background var(--dur-micro);}
#landing .cyc:hover{border-color:var(--line-2);}
#landing .cyc.on{border-color:var(--amber);background:var(--amber-soft);}
#landing .cyc .radio{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line-2);flex:none;display:grid;place-items:center;}
#landing .cyc.on .radio{border-color:var(--amber);}
#landing .cyc.on .radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber);}
#landing .cnome{font-size:14px;font-weight:700;color:var(--ink);}
#landing .csub{font-size:12.5px;color:var(--mut);}
#landing .cmes{font-family:var(--fm);font-size:13.5px;color:var(--ink);text-align:right;}
#landing .ceco{font-size:12px;color:var(--good);text-align:right;}
#landing .ceco.ref{color:var(--mut);}
#landing .cnota{font-size:12.5px;color:var(--mut);margin-top:-6px;}
#landing .plnota{font-size:13px;color:var(--mut);margin-top:20px;max-width:64ch;line-height:1.6;}
@media(max-width:820px){#landing .plans{grid-template-columns:1fr;}#landing .plan{padding:26px 22px;}}

/* ---------- o que não é ---------- */
#landing .honest{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,88px);align-items:start;}
#landing .honest-lista p{font-size:15.5px;color:var(--ink-2);line-height:1.65;padding:22px 0;border-top:1px solid var(--line);}
#landing .honest-lista p:last-child{border-bottom:1px solid var(--line);}
#landing .honest-lista b{display:block;color:var(--ink);font-weight:700;margin-bottom:4px;}
@media(max-width:960px){#landing .honest{grid-template-columns:1fr;}}

/* ---------- chamada final ---------- */
#landing .lfinal{position:relative;isolation:isolate;min-height:clamp(440px,52vw,600px);display:flex;align-items:center;overflow:hidden;}
#landing .lfinal-arte{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;z-index:-2;}
#landing .lfinal-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(to right,rgba(12,13,16,.95) 0%,rgba(12,13,16,.7) 42%,rgba(12,13,16,.15) 80%),linear-gradient(to bottom,var(--night) 0%,rgba(12,13,16,0) 22%,rgba(12,13,16,0) 78%,var(--night) 100%);}
#landing .lfinal-corpo{padding-block:80px;}
#landing .lfinal h2{max-width:14ch;}
#landing .lfinal p{font-size:17px;color:var(--ink-2);margin:18px 0 30px;max-width:46ch;}

/* ---------- rodapé ---------- */
#landing .lfoot{border-top:1px solid var(--line);padding:56px 0 32px;}
#landing .fw{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;}
#landing .fw-marca{max-width:420px;}
#landing .fw-marca p{font-size:14px;color:var(--mut);margin-top:14px;line-height:1.6;}
#landing .fw-cols{display:flex;gap:56px;flex-wrap:wrap;}
#landing .fw-cols>div{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
#landing .fw-cols b{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:2px;}
#landing .fw-cols a,#landing .fw-cols .lkbtn{font-size:14px;color:var(--mut);text-decoration:none;}
#landing .fw-cols a:hover,#landing .fw-cols .lkbtn:hover{color:var(--ink);}
#landing .fw-base{margin-top:44px;font-size:12.5px;color:var(--mut-2);}

/* ---------- barra de narração da apresentação ---------- */
.narr-dock{position:fixed;bottom:20px;right:20px;z-index:var(--z-toast);display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:999px;background:color-mix(in srgb,var(--surf-2) 94%,transparent);border:1px solid var(--line-2);box-shadow:var(--shadow-deep);backdrop-filter:blur(10px);}
.narr-dock[hidden]{display:none;}
.narr-play{width:36px;height:36px;border-radius:50%;background:var(--amber);color:var(--night);display:grid;place-items:center;font-size:12px;flex:none;transition:background var(--dur-micro);}
.narr-play:hover{background:var(--amber-2);}
.narr-info{display:flex;flex-direction:column;gap:1px;min-width:0;max-width:200px;}
.narr-t{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.narr-hint{font-size:12px;color:var(--mut);}
.narr-x{color:var(--mut);flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;transition:color var(--dur-micro),background var(--dur-micro);}
.narr-x:hover{color:var(--ink);background:var(--surf-3);}
@media(max-width:640px){.narr-dock{left:14px;right:14px;bottom:14px;}.narr-info{max-width:none;flex:1;}}
.narr-tbl{width:100%;font-size:13px;border-collapse:collapse;}
.narr-tbl th{text-align:left;padding:6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--line);}
.narr-tbl td{padding:7px 6px;vertical-align:top;border-bottom:1px solid var(--line);}
.narr-tbl select{width:auto;padding:4px 6px;font-size:13px;}

/* ---------- movimento reduzido: a arte fica parada ---------- */
@media (prefers-reduced-motion:reduce){
  #landing .lhero-arte img{animation:none;}
  #landing .capa>img,#landing .capa-duas img{transition:none;}
}