/* ============================================================================
   MARCUSMUZI.COM — assets/css/site.css

   Folha de estilo do site público. MOBILE-FIRST: o consumidor chega do
   Instagram pelo celular; o desktop é a expansão (media query no fim).

   Divisão de responsabilidade:
     · CORES  -> vêm de theme.css (gerado pelo painel > Marca). Aqui, só var().
     · DESIGN -> tudo o mais (tipos, espaços, movimento) vive aqui, no código.

   Movimento editorial ("assentar na mesa", nunca "compre agora"):
     · [data-r] some/entra suave quando aparece na rolagem (site.js)
     · polaroids caem com uma rotação a mais e endireitam no lugar
     · sublinhado dourado se desenha na última linha da tese
     · balanço sutil de papel na parede (desligado em reduced-motion)
   ========================================================================== */

/* ---------- tokens de design (as cores estão no theme.css) ---------- */
:root{
  --f-d:'Archivo',sans-serif;                       /* display/corpo          */
  --f-h:'Caveat',cursive;                           /* manuscrita             */
  --f-m:ui-monospace,'SFMono-Regular',Menlo,monospace; /* utilitária/etiquetas */
  --sbw:220px;                                      /* largura da bússola     */
  --pad:1.15rem;                                    /* respiro lateral mobile */
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--f-d);
     font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* luz ambiente quente + grão de filme (data-URI liberado na CSP: img-src data:) */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120vw 70vh at 75% -10%, rgba(201,168,106,.07), transparent 60%),
             radial-gradient(90vw 60vh at 5% 110%, rgba(201,168,106,.05), transparent 60%)}
body::after{content:'';position:fixed;inset:-50%;pointer-events:none;z-index:60;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;line-height:1.06}
section{scroll-margin-top:64px}
main{position:relative;z-index:1;padding-top:56px}

/* ---------- utilitários ---------- */
.eyebrow{font-family:var(--f-m);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 .8rem}
.hand{font-family:var(--f-h);color:var(--kraft);font-size:1.15rem;line-height:1.25}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--f-m);font-size:.7rem;
     letter-spacing:.12em;text-transform:uppercase;padding:.85rem 1.3rem;border:1px solid var(--line);border-radius:3px;
     transition:all .18s ease;cursor:pointer;min-height:44px}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:600}
.btn-gold:hover{background:var(--bone);border-color:var(--bone)}
.btn-ghost{color:var(--bone)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.sec{position:relative;z-index:1;padding:2.6rem var(--pad);border-bottom:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin-bottom:.3rem}
.head-note{font-family:var(--f-m);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke)}
.head-hand{font-size:1.1rem}
.sec-sub{color:var(--smoke);max-width:52ch}
h2{font-family:var(--f-d);font-size:clamp(1.2rem,4.6vw,1.7rem);font-weight:800;letter-spacing:-.01em;font-variation-settings:'wdth' 110}

/* avisos (lista de e-mails: ok / erro) */
.alert{border:1px solid var(--line);border-radius:3px;padding:.75rem 1rem;font-size:.86rem;margin:0 0 1rem;max-width:440px}
.alert-ok{border-color:#5A6B45;background:rgba(90,107,69,.12)}
.alert-err{border-color:#6B4545;background:rgba(107,69,69,.12)}

/* ---------- reveal: assentar na mesa (site.js liga a classe .in) ---------- */
[data-r]{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.25,1);transition-delay:var(--d,0s)}
[data-r].in{opacity:1;transform:none}
.pol[data-r]{transform:translateY(14px) rotate(calc(var(--rot,0deg) + 2deg)) scale(.97)}
.pol[data-r].in{transform:rotate(var(--rot,0deg))}

/* ---------- slots de foto (enquanto o painel não recebe a real) ---------- */
.ph{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;
    background:linear-gradient(155deg,color-mix(in srgb,var(--ink) 70%,var(--gold) 6%),var(--ink));
    border:1px dashed color-mix(in srgb,var(--gold) 40%,transparent);border-radius:3px;
    color:var(--smoke);text-align:center;padding:.9rem}
.ph svg{width:20px;height:20px;stroke:var(--gold);opacity:.8}
.ph small{font-family:var(--f-m);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.5}
.ph-img{width:100%;height:100%;object-fit:cover;border-radius:2px}

/* ---------- polaroid ---------- */
.pol{background:var(--kraft);padding:.45rem .45rem 1.8rem;border-radius:2px;box-shadow:0 8px 22px rgba(0,0,0,.5);
     position:relative;transform:rotate(var(--rot,0deg))}
.pol::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:9px;height:9px;border-radius:50%;
     background:radial-gradient(circle at 35% 30%,#E8CE9A,#8A6B33);box-shadow:0 2px 3px rgba(0,0,0,.55)}
.pol .ph{aspect-ratio:1/.88;width:100%;overflow:hidden;
     border-color:color-mix(in srgb,var(--kraft2) 60%,#000 20%)}
.pol figcaption{position:absolute;left:0;right:0;bottom:.3rem;text-align:center;font-family:var(--f-h);
     color:color-mix(in srgb,var(--kraft2) 40%,#000 60%);font-size:.98rem;line-height:1}
@media (hover:hover){.pol{transition:transform .3s ease}.pol:hover{transform:rotate(0deg) translateY(-4px)}}
@keyframes sway{0%,100%{transform:rotate(calc(var(--rot,0deg) - .5deg))}50%{transform:rotate(calc(var(--rot,0deg) + .5deg))}}
.sway .pol.in{animation:sway 7s ease-in-out infinite;animation-delay:var(--sd,0s)}

/* ---------- nota kraft ---------- */
.note{background:linear-gradient(170deg,var(--kraft),var(--kraft2));color:color-mix(in srgb,var(--kraft2) 30%,#000 70%);
      border-radius:2px;padding:.95rem 1.05rem;box-shadow:0 8px 20px rgba(0,0,0,.45);position:relative;transform:rotate(var(--rot,0deg))}
.note::before{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(-2deg);width:60px;height:17px;
      background:rgba(239,232,219,.28);border-left:1px solid rgba(255,255,255,.12);border-right:1px solid rgba(255,255,255,.12)}
.note .hand{color:inherit;font-size:1.25rem}

/* ============================================================
   TOPO MOBILE (padrão) + gaveta
============================================================ */
.topbar{position:fixed;z-index:50;top:0;left:0;right:0;height:56px;display:flex;align-items:center;justify-content:space-between;
        padding:0 var(--pad);background:color-mix(in srgb,var(--panel) 85%,transparent);backdrop-filter:blur(10px);
        border-bottom:1px solid var(--line)}
.topbar strong{font-size:.95rem;letter-spacing:.06em;font-variation-settings:'wdth' 120}
.topbar button{background:none;border:1px solid var(--line);border-radius:3px;color:var(--bone);padding:.5rem .8rem;
        font-family:var(--f-m);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;min-height:40px}
.drawer{position:fixed;z-index:49;inset:0;background:color-mix(in srgb,var(--ink) 97%,transparent);display:flex;
        flex-direction:column;justify-content:center;padding:4.5rem var(--pad) 2rem;gap:.1rem;opacity:0;pointer-events:none;
        transition:opacity .25s ease}
.drawer.open{opacity:1;pointer-events:auto}
.drawer a{font-family:var(--f-d);font-weight:800;font-variation-settings:'wdth' 115;text-transform:uppercase;letter-spacing:.02em;
        font-size:1.5rem;color:var(--bone);padding:.55rem 0;border-bottom:1px solid var(--line);
        opacity:0;transform:translateY(10px);transition:all .35s ease;transition-delay:var(--d,0s)}
.drawer.open a{opacity:1;transform:none}
.drawer a small{font-family:var(--f-m);font-size:.58rem;letter-spacing:.16em;color:var(--gold);display:block;font-weight:400}
.drawer .hand{margin-top:1.6rem;font-size:1.35rem;opacity:0;transition:opacity .4s ease .3s}
.drawer.open .hand{opacity:1}
.sb{display:none}

/* ============================================================
   HERO
============================================================ */
.hero{padding:2.2rem var(--pad) 2.6rem;border-bottom:1px solid var(--line);position:relative;z-index:1}
.hero h1{font-size:clamp(1.85rem,8.4vw,3.1rem);font-weight:800;font-variation-settings:'wdth' 118;
         text-transform:uppercase;letter-spacing:-.005em}
.hero h1 span{display:block}
.hero h1 .g{color:var(--gold);position:relative;display:inline-block;font-style:normal}
.hero h1 .g::after{content:'';position:absolute;left:0;bottom:.02em;height:2px;background:var(--gold);width:0;transition:width 1s ease .9s}
.hero.in h1 .g::after{width:100%}
.hero-sub{color:var(--smoke);max-width:46ch;margin:1rem 0 0;font-size:.93rem}
.hero-key{color:var(--gold);font-size:.93rem;margin:.7rem 0 1.3rem;max-width:44ch}
.hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.hero-cta .btn{flex:1 1 auto}
.hero-right{position:relative;margin-top:2rem}
.hero-photo{--rot:-.6deg}
.hero-photo .ph{aspect-ratio:4/4.2;border-radius:4px;overflow:hidden}
.hero-pols{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem 1rem;margin-top:1.4rem}
.hero-pols .pol{padding:.3rem .3rem 1.2rem}
.hero-pols .pol figcaption{font-size:.74rem;bottom:.18rem}
.hero-note{margin:1.3rem auto 0;max-width:220px;--rot:2deg}

/* ============================================================
   A MEMBRANA — caminho vertical no celular
============================================================ */
.memb{position:relative;margin-top:1.4rem;display:flex;flex-direction:column;gap:1.4rem;padding-left:1.4rem}
.memb::before{content:'';position:absolute;left:.35rem;top:.5rem;bottom:.5rem;width:0;
  border-left:2px dashed color-mix(in srgb,var(--gold) 40%,transparent)}
.memb-step{position:relative}
.memb-step::before{content:'';position:absolute;left:-1.28rem;top:.45rem;width:8px;height:8px;border-radius:50%;
  background:var(--ink);border:2px solid var(--gold)}
.memb-step svg{width:26px;height:26px;stroke:var(--gold);margin-bottom:.45rem;display:block}
.memb-step p{margin:0;font-size:.86rem;color:var(--smoke);max-width:34ch}
.memb-step p strong{color:var(--bone)}
.memb-step.key p{color:var(--gold)}
.memb-close{margin-top:1.6rem;border-top:1px solid var(--line);padding-top:1.1rem;display:flex;flex-direction:column;gap:.6rem}
.memb-close p{margin:0;font-weight:700;font-size:1rem;max-width:38ch}
.memb-sign{font-family:var(--f-h);color:var(--kraft);font-size:1.3rem;align-self:flex-end}

/* ============================================================
   TRÊS GRAUS DE ACESSO
============================================================ */
.acessos{display:flex;flex-direction:column;gap:1rem;margin-top:1.4rem}
.ac{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:1.25rem;display:flex;flex-direction:column;gap:.75rem}
@media (hover:hover){.ac{transition:border-color .18s ease,transform .18s ease}
  .ac:hover{border-color:color-mix(in srgb,var(--gold) 55%,transparent);transform:translateY(-3px)}}
.ac-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.ac-num{font-weight:800;font-size:1.4rem;color:var(--gold);font-variation-settings:'wdth' 120}
.ac-tag{font-family:var(--f-m);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;color:var(--smoke);text-align:right}
.ac h3{font-family:var(--f-d);font-size:1.15rem;font-weight:800;font-variation-settings:'wdth' 112}
.ac .ph{aspect-ratio:16/8;overflow:hidden}
.ac p{margin:0;font-size:.86rem;color:var(--smoke)}
.ac .hand{font-size:1.05rem}
.ac-foot{margin-top:.3rem;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);
         padding-top:.85rem;gap:.6rem}
.ac-price{font-family:var(--f-m);font-size:.76rem;color:var(--bone)}
.ac-go{font-family:var(--f-m);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.ac-lock{font-family:var(--f-m);font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);
         border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);border-radius:2px;padding:.2rem .45rem;text-align:right}
.ac.dest{border-color:color-mix(in srgb,var(--gold) 45%,transparent);
         background:linear-gradient(170deg,color-mix(in srgb,var(--panel) 85%,var(--gold) 7%),var(--panel))}

/* ============================================================
   A LINHA DA TRAVESSIA — arrastar com o dedo no celular
============================================================ */
.linha-wrap{position:relative;margin-top:1.6rem;padding-top:.7rem}
.linha-wrap::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 7px,transparent 7px 13px);opacity:.45}
.linha{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.3rem .2rem 1rem;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.linha::-webkit-scrollbar{display:none}
.linha .pol{flex:0 0 46%;max-width:200px;scroll-snap-align:center;padding:.3rem .3rem 1.45rem}
.linha .pol .ph{aspect-ratio:1/.92;overflow:hidden}
.linha .pol figcaption{font-size:.84rem;bottom:.22rem}
/* a última etapa ("Hoje...") ganha o kraft dourado */
.linha .pol:last-child{background:linear-gradient(170deg,color-mix(in srgb,var(--kraft) 80%,var(--gold) 25%),
                       color-mix(in srgb,var(--kraft2) 75%,var(--gold) 25%))}
.linha-hint{display:flex;align-items:center;gap:.5rem;font-family:var(--f-m);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--smoke);margin-top:.2rem;transition:opacity .5s ease}
.linha-hint::after{content:'⟶';color:var(--gold);animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.linha-hint.off{opacity:0}

/* ============================================================
   CASOS DE TRAVESSIA — mural (vazio digno; cheio, relatórios de gente)
============================================================ */
.mural{display:flex;flex-direction:column;gap:1rem;margin-top:1.4rem}
.mural .note{--rot:-1.2deg;max-width:420px}
.mural .note p{margin:.4rem 0 0;font-family:var(--f-d);font-size:.82rem;line-height:1.55;color:inherit}
.ghosts{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.ghost{border:1px dashed color-mix(in srgb,var(--gold) 30%,transparent);border-radius:3px;min-height:130px;display:flex;
  align-items:center;justify-content:center;font-family:var(--f-m);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:color-mix(in srgb,var(--smoke) 60%,transparent);text-align:center;padding:1rem}
.casos-grid{display:flex;flex-direction:column;gap:1rem}
.caso{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:1.2rem;display:flex;flex-direction:column;gap:.6rem}
.caso-cat{font-family:var(--f-m);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.caso h3{font-size:1.05rem;font-weight:800}
.caso .ph{aspect-ratio:16/9;overflow:hidden}
.caso p{margin:0;color:var(--smoke);font-size:.86rem}
.caso-ba{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;border-top:1px solid var(--line);padding-top:.7rem}
.caso-k{font-family:var(--f-m);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;color:var(--smoke);display:block}
.caso-v{font-size:.85rem;color:var(--bone)}
.caso .hand{font-size:1rem}

/* ============================================================
   INSIGHTS — notas + captura semanal
============================================================ */
.insights{display:flex;flex-direction:column;gap:1.8rem;margin-top:1.2rem}
.ins-notes{display:grid;gap:1rem;max-width:430px}
.ins-notes .note:nth-child(3n+1){--rot:-1.2deg}
.ins-notes .note:nth-child(3n+2){--rot:1.4deg}
.ins-notes .note:nth-child(3n){--rot:-.6deg}
.ins-notes time{display:block;margin-top:.3rem;font-family:var(--f-m);font-size:.56rem;letter-spacing:.12em;
  text-transform:uppercase;color:color-mix(in srgb,var(--kraft2) 45%,#000 45%)}
.ins-cap h3{font-family:var(--f-d);font-size:1.2rem;font-weight:800;font-variation-settings:'wdth' 110}
.ins-cap p{color:var(--smoke);max-width:46ch;margin:.5rem 0 1.1rem;font-size:.9rem}
.ins-cap p a{color:var(--gold)}
.ins-form{display:flex;gap:.7rem;flex-wrap:wrap}
.ins-form input{flex:1 1 200px;background:var(--panel);border:1px solid var(--line);border-radius:3px;color:var(--bone);
  font:inherit;padding:.85rem 1rem;min-height:44px}
.ins-form input:focus{border-color:var(--gold);outline:none}
.ins-form .hp{position:absolute;left:-5000px;width:1px;height:1px;opacity:0} /* honeypot */
.ins-small{font-family:var(--f-m);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--smoke);margin-top:.7rem}

/* ============================================================
   FOOTER vivo
============================================================ */
.foot{position:relative;z-index:1;padding:2rem var(--pad);display:flex;flex-direction:column;gap:1.6rem;
      font-size:.82rem;color:var(--smoke)}
.foot h4{margin:0 0 .55rem;font-family:var(--f-m);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.foot a{display:block;padding:.2rem 0;min-height:32px}
.foot a:hover{color:var(--gold)}
.foot-brand strong{display:block;font-size:1rem;color:var(--bone);font-variation-settings:'wdth' 120;letter-spacing:.05em}
.foot-brand .hand{font-size:1.3rem;margin-top:.3rem}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.foot-live{border-top:1px solid var(--line);padding-top:1.3rem}
.foot-live .hand{font-size:1.45rem;color:var(--gold);min-height:3.2rem;display:block;transition:opacity .35s ease}
.foot-live small{font-family:var(--f-m);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}
.foot-base{border-top:1px solid var(--line);padding:1rem var(--pad) 1.4rem;display:flex;flex-direction:column;gap:.3rem;
  font-family:var(--f-m);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--smoke)}
.foot-base a:hover{color:var(--gold)}

/* ---------- acessibilidade ---------- */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  [data-r]{opacity:1;transform:none}
}

/* ============================================================
   DESKTOP (≥ 981px): a bússola entra; grades abrem
============================================================ */
@media (min-width:981px){
  :root{--pad:2.4rem}
  .topbar,.drawer{display:none}
  main{padding-top:0;margin-left:var(--sbw)}
  section{scroll-margin-top:0}

  /* --- sidebar bússola --- */
  .sb{position:fixed;z-index:40;top:0;bottom:0;left:0;width:var(--sbw);background:var(--panel);
      border-right:1px solid var(--line);display:flex;flex-direction:column;padding:1.6rem 1.2rem 1.2rem;gap:1.5rem}
  .sb-brand{font-weight:800;font-size:1.05rem;letter-spacing:.06em;line-height:1.15;font-variation-settings:'wdth' 120}
  .sb-nav{display:flex;flex-direction:column;gap:.15rem}
  .sb-nav a{display:flex;align-items:center;gap:.65rem;padding:.55rem .6rem;border-radius:3px;border-left:2px solid transparent;
      font-family:var(--f-m);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);transition:all .18s ease}
  .sb-nav a svg{width:15px;height:15px;stroke:currentColor;transition:transform .18s ease}
  .sb-nav a:hover{color:var(--bone);transform:translateX(2px)}
  .sb-nav a:hover svg{transform:rotate(-8deg)}
  .sb-nav a.on{color:var(--gold);border-left-color:var(--gold);
      background:color-mix(in srgb,var(--gold) 6%,transparent)}
  .sb-foot{margin-top:auto;display:flex;flex-direction:column;gap:1rem}
  .sb-enter{justify-content:space-between}
  .sb-social{display:flex;gap:.9rem;color:var(--smoke);font-family:var(--f-m);font-size:.6rem;letter-spacing:.1em}
  .sb-social a:hover{color:var(--gold)}
  .sb-note{--rot:-2.5deg}
  .sb-note span{display:block;text-align:right;font-family:var(--f-h);font-size:1rem;
      color:color-mix(in srgb,var(--kraft2) 55%,#000 40%)}

  /* --- seções --- */
  .hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:2.6rem;align-items:center;
        padding:3.2rem var(--pad) 3rem}
  .hero h1{font-size:clamp(1.9rem,3.9vw,3.2rem)}
  .hero-right{margin-top:0}
  .hero-pols{position:absolute;top:-1.1rem;right:-.5rem;grid-template-columns:repeat(2,88px);margin-top:0}
  .hero-pols .pol{width:88px}
  .hero-note{position:absolute;bottom:-1rem;right:1.2rem;margin:0;max-width:175px}
  .hero-cta .btn{flex:0 0 auto}

  .sec{padding:3.2rem var(--pad)}
  .memb{flex-direction:row;gap:1.2rem;padding-left:0}
  .memb::before{content:none}
  .memb-step{flex:1;padding-right:1.2rem}
  .memb-step::before{content:none}
  .memb-step:not(:last-child)::after{content:'⟶';position:absolute;right:-.2rem;top:.35rem;color:var(--gold);opacity:.7}
  .memb-step p{max-width:22ch}
  .memb-close{flex-direction:row;justify-content:space-between;align-items:end}

  .acessos{display:grid;grid-template-columns:repeat(3,1fr)}
  .linha{display:grid;grid-template-columns:repeat(9,1fr);gap:.8rem;overflow:visible;padding-bottom:0}
  .linha .pol{flex:none;max-width:none}
  .linha-hint{display:none}
  .mural{display:grid;grid-template-columns:1.15fr 1fr;align-items:start}
  .ghosts{grid-template-columns:1fr 1fr}
  .ghost{min-height:190px}
  .casos-grid{display:grid;grid-template-columns:repeat(3,1fr)}
  .insights{display:grid;grid-template-columns:1.05fr .95fr;gap:2.4rem;align-items:center}
  .foot{margin-left:var(--sbw);display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:2rem;align-items:start}
  .foot-cols{display:contents}
  .foot-live{border-top:0;border-left:1px solid var(--line);padding:0 0 0 1.6rem}
  .foot-base{margin-left:var(--sbw);flex-direction:row;justify-content:space-between;gap:1rem;flex-wrap:wrap}
}