/* MGS Business & Tech — a base do site (igual à da página inicial) */
  :root{
    color-scheme: light;
    --canvas:#F5F5F7;
    --card:#FFFFFF;
    --ink:#101114;
    --ink-2:#4B4F58;
    --ink-3:#8A8F99;
    --hair:rgba(0,0,0,.045);
    --klein:#002FA7;
    --tanger:#FF6B35;
    --r:24px;
    --r-sm:16px;
    --gap:20px;
    --pad:32px;
    --shadow:0 12px 32px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.02);
    --shadow-hi:0 22px 48px rgba(0,0,0,.09), 0 4px 12px rgba(0,0,0,.04);
    --ease:cubic-bezier(.25,1,.5,1);
    --maxw:1180px;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
  body{
    margin:0; background:var(--canvas); color:var(--ink);
    font:400 16.5px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
  a{color:inherit}
  h1,h2,h3,.display{font-family:Inter,sans-serif; font-weight:900; letter-spacing:-.032em; line-height:1.05; margin:0}

  /* ---------- bento primitives ---------- */
  .bento{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap)}
  .block{
    background:var(--card);
    border:1px solid var(--hair);
    border-radius:var(--r);
    box-shadow:var(--shadow);
    padding:var(--pad);
    transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease);
  }
  .block:hover{transform:translateY(-6px); box-shadow:var(--shadow-hi)}
  .c3{grid-column:span 3} .c4{grid-column:span 4} .c5{grid-column:span 5}
  .c6{grid-column:span 6} .c7{grid-column:span 7} .c8{grid-column:span 8} .c12{grid-column:span 12}
  @media (max-width:940px){ .c3,.c4,.c5,.c7,.c8{grid-column:span 6} }
  @media (max-width:620px){ .bento>*{grid-column:span 12 !important} :root{--pad:26px} }

  /* ---------- header ---------- */
  header{position:sticky; top:0; z-index:60; background:rgba(245,245,247,.82); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--hair)}
  .bar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
  .brand{display:flex; align-items:center; gap:11px; text-decoration:none; font-family:Inter,sans-serif; font-weight:900; font-size:16.5px; letter-spacing:-.02em}
  .mark{width:34px;height:34px;flex:none;display:grid;place-items:center;background:var(--klein);color:#fff;border-radius:11px;font:700 17px/1 Inter,sans-serif;transition:transform .4s var(--ease)}
  .brand:hover .mark{transform:scale(1.08) rotate(-6deg)}
  nav ul{display:flex; gap:4px; list-style:none; margin:0; padding:0}
  nav a{display:block; text-decoration:none; font-size:14.5px; font-weight:500; color:var(--ink-2); padding:9px 15px; border-radius:999px; transition:all .4s var(--ease)}
  nav a:hover{color:var(--ink); background:#fff; box-shadow:var(--shadow)}
  @media (max-width:760px){nav{display:none}}

  /* ---------- sections ---------- */
  section{padding:22px 0}
  section:first-of-type{padding-top:28px}
  @media (max-width:620px){section{padding:36px 0} :root{--gap:24px}}
  .sec-head{margin:0 0 var(--gap); position:relative; z-index:2}
  .kicker{
    display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase; color:var(--klein);
    background:rgba(0,47,167,.07); padding:7px 14px; border-radius:999px; margin-bottom:16px;
  }
  .kicker.orange{color:#C1420F; background:rgba(255,107,53,.12)}
  /* desalinhamento: o título vaza para fora do bloco e invade a linha de baixo */
  h2{font-size:clamp(28px,3.6vw,42px); margin-left:-.03em}
  .sec-head.overlap{margin-bottom:-26px; padding-bottom:26px; pointer-events:none}
  .sec-head.overlap .kicker, .sec-head.overlap h2{pointer-events:auto}
  .block p.dek, .dek{color:var(--ink-2); font-size:clamp(19px,1.9vw,23px); font-weight:600; letter-spacing:-.012em; line-height:1.35; margin:14px 0 0; max-width:34ch}
  .sub{color:var(--ink-2); max-width:60ch; margin:18px 0 0; font-size:17px; line-height:1.6}

  /* ---------- hero ---------- */
  .hero h1{font-size:clamp(36px,5.1vw,58px); margin-left:-.035em; margin-bottom:20px; max-width:16ch}
  .hero h1 em{font-style:normal; color:var(--klein)}
  .hero .lead{color:var(--ink-2); font-size:18px; max-width:50ch; margin:0 0 30px}
  .cta-row{display:flex; flex-wrap:wrap; gap:12px}
  .btn{
    display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:600; font-size:15.5px;
    padding:14px 24px; border-radius:999px; border:1px solid transparent;
    transition:all .4s var(--ease);
  }
  .btn-primary{background:var(--klein); color:#fff; box-shadow:0 8px 22px rgba(0,47,167,.22)}
  .btn-primary:hover{transform:translateY(-3px); box-shadow:0 16px 34px rgba(0,47,167,.3)}
  .btn-ghost{background:#fff; color:var(--ink); border-color:var(--hair); box-shadow:var(--shadow)}
  .btn-ghost:hover{transform:translateY(-3px); box-shadow:var(--shadow-hi)}
  .btn .arw{transition:transform .4s var(--ease)}
  .btn:hover .arw{transform:translateX(4px)}

  /* hero side block */
  .side{display:flex; flex-direction:column; justify-content:flex-start; gap:24px; background:var(--klein); color:#fff; border-color:transparent}
  .side .big{font-family:Inter,sans-serif; font-weight:900; font-size:clamp(30px,3.2vw,40px); line-height:1; letter-spacing:-.03em}
  .side .lbl{font-size:13.5px; color:rgba(255,255,255,.72); line-height:1.55}
  .chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto}
  .chip{font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:999px; background:rgba(255,255,255,.14); color:#fff}
  .chip.t{background:var(--tanger); color:#fff}
  .minilist{list-style:none; margin:0; padding:20px 0; display:grid; gap:13px; border-top:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18)}
  .minilist li{display:flex; align-items:baseline; gap:12px; font-size:14.5px; color:rgba(255,255,255,.9)}
  .minilist span{font-family:Inter,sans-serif; font-weight:800; font-size:12px; color:rgba(255,255,255,.5); letter-spacing:.06em}

  /* ---------- feature blocks ---------- */
  .ico{
    width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:22px;
    transition:transform .4s var(--ease);
  }
  .block:hover .ico{transform:scale(1.07) rotate(-5deg)}
  .ico svg{width:25px;height:25px;stroke-width:2.1}
  .ico.b{background:rgba(0,47,167,.09); color:var(--klein)}
  .ico.o{background:rgba(255,107,53,.14); color:#D9531F}
  .ico.d{background:var(--ink); color:#fff}
  .block h3{font-size:20px; margin-bottom:11px; letter-spacing:-.02em}
  .block p{color:var(--ink-2); margin:0; font-size:16px}
  .block p + p{margin-top:12px}

  /* ---------- dark / accent blocks ---------- */
  .dark{background:var(--ink); color:#fff; border-color:transparent}
  .dark h3,.dark h2{color:#fff}
  .dark p{color:rgba(255,255,255,.72)}
  .quote{display:flex; flex-direction:column; justify-content:center; background:var(--tanger); color:#fff; border-color:transparent}
  .quote .q{color:#fff; font-family:Inter,sans-serif; font-weight:900; font-size:clamp(21px,2.1vw,26px); line-height:1.15; letter-spacing:-.025em}
  .quote .qs{margin-top:16px; font-size:14.5px; color:rgba(255,255,255,.85)}

  /* ---------- facts ---------- */
  .facts{display:grid; gap:0}
  .frow{display:grid; grid-template-columns:minmax(150px,220px) 1fr; gap:20px; padding:16px 0; border-bottom:1px solid var(--hair)}
  .frow:first-child{padding-top:0}
  .frow:last-child{border-bottom:0; padding-bottom:0}
  .frow dt{color:var(--ink-3); font-size:13px; font-weight:600; letter-spacing:.055em; text-transform:uppercase; margin:0}
  .frow dd{margin:0; font-size:16.5px; font-weight:500}
  @media (max-width:560px){ .frow{grid-template-columns:1fr; gap:5px} }
  .badge{
    display:inline-flex; align-items:center; gap:9px; background:rgba(0,47,167,.07); color:var(--klein);
    font-weight:600; font-size:14px; padding:10px 16px; border-radius:999px;
  }
  .dot{width:8px;height:8px;border-radius:50%;background:#16A34A; box-shadow:0 0 0 4px rgba(22,163,74,.18)}

  /* ---------- contato ---------- */
  .cc .k{font-size:12.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin:0 0 10px}
  .cc p.v{font-size:15px; font-weight:500; margin:0; word-break:break-word; color:var(--ink); line-height:1.55}
  .cc a{text-decoration:none; border-bottom:1.5px solid rgba(0,47,167,.3); transition:border-color .4s var(--ease)}
  .cc a:hover{border-bottom-color:var(--klein)}

  /* ---------- footer ---------- */
  footer{margin-top:20px; padding:44px 0 56px; border-top:1px solid var(--hair)}
  .fbrand{font-family:Inter,sans-serif; font-weight:900; font-size:18px; margin:0 0 10px}
  footer p{margin:0 0 6px; color:var(--ink-2); font-size:14.5px; line-height:1.65}
  .legal{margin-top:22px; padding-top:20px; border-top:1px solid var(--hair); color:var(--ink-3); font-size:13.5px}
  .legal p{color:var(--ink-3); font-size:13.5px}

  /* ---------- reveal ---------- */
  .rv{opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
  .rv.in{opacity:1; transform:none}
  @media (prefers-reduced-motion:reduce){
    .rv{opacity:1; transform:none; transition:none}
    .block,.btn,.ico{transition:none}
    .block:hover,.btn:hover{transform:none}
  }
  :focus-visible{outline:3px solid var(--klein); outline-offset:3px; border-radius:6px}

/* =====================================================================
   A VERA — os blocos de vitrine seguem o desenho do app (a chegada e os
   cartões que explicam, aprovados em 01/10/2026). O resto segue o site.
   ===================================================================== */
.vera{
  --cartaoS:#FAF9F7;--bg:#F1EFEA;--t1:#111111;--t2:#4A4A48;--t3:#5F5E5B;--borda:#858582;
  --ac:#0F766E;--acTx:#0B5F58;--acSoft:#DDF1EE;--ven:#C44B0A;--falha:#A8321C;--lav:#6447D6;
  --sfG:rgba(255,255,255,.72);--solida:#FBFAF8;--segT:rgba(255,255,255,.4);--fio:rgba(30,30,60,.10);
  --vidro:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 .5px rgba(30,30,60,.08),0 1px 2px rgba(30,30,60,.05),0 10px 28px rgba(40,40,90,.08);
  --c1:rgba(15,118,110,.14);--c2:rgba(124,104,214,.14);--c3:rgba(232,150,92,.12);--cs:62%;
  --b0:#14918A;--b1:#0F8178;--b2:#0B6E66;--b3:#095F58;
  --vf0:#F3EEFF;--vf1:#E9E1FF;--vfB:rgba(124,92,236,.35);
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--bg);color:var(--t1);border-radius:var(--r);
  box-shadow:var(--shadow);border:1px solid var(--hair);
}
.vera .ceu{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.vera .ceu i{position:absolute;inset:-6%}
.vera .ceu .l1{background:radial-gradient(120% 55% at 0% 0%,var(--c1),transparent var(--cs))}
.vera .ceu .l2{background:radial-gradient(90% 50% at 100% 8%,var(--c2),transparent var(--cs))}
.vera .ceu .l3{background:radial-gradient(110% 50% at 25% 100%,var(--c3),transparent var(--cs))}
.vera.amanhece .ceu i{animation:acende 1.6s cubic-bezier(.2,.7,.2,1) both,deriva 22s ease-in-out 1.6s infinite alternate}
.vera.amanhece .ceu .l2{animation-delay:.25s,1.85s}.vera.amanhece .ceu .l3{animation-delay:.5s,2.1s}
@keyframes acende{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}
@keyframes deriva{from{transform:translate(0,0)}to{transform:translate(2.5%,1.8%)}}
.vera .sinal{display:block;color:var(--lav)}

/* o bloco de abertura da Vera */
.vhero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center;padding:48px}
.vhero .esf{width:84px;height:84px;margin:0 0 14px -10px}
.vtit{font:700 clamp(28px,3.4vw,40px)/1.15 Inter,sans-serif;letter-spacing:-.025em;margin:0}
.vtit span{display:block}
.vtit .l2{color:var(--acTx)}
.vsub{font:400 18px/1.5 Inter,sans-serif;color:var(--t2);margin:14px 0 0}
.vstatus{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font:600 14px/1 Inter,sans-serif;color:var(--acTx);background:var(--acSoft);padding:10px 14px;border-radius:999px}
.vstatus i{width:8px;height:8px;border-radius:50%;background:var(--ven);box-shadow:0 0 0 4px rgba(196,75,10,.16)}
.vacoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.vbtn{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 20px;border-radius:16px;font:600 16px/1 Inter,sans-serif;text-decoration:none;transition:transform .4s var(--ease)}
.vbtn:hover{transform:translateY(-2px)}
.vbtn.pri{color:#fff;background:linear-gradient(180deg,var(--b0) 0%,var(--b1) 35%,var(--b2) 75%,var(--b3) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.12)}
.vbtn.vid{color:var(--t1);background:var(--sfG);box-shadow:inset 0 0 0 1px var(--borda),var(--vidro)}
@media (max-width:860px){.vhero{grid-template-columns:1fr;gap:28px;padding:30px 24px 26px}}

/* a pilha de cartões que explicam (os "filmes" da chegada) */
.deckW{width:100%;max-width:360px;margin:0 auto}
.deck{position:relative;touch-action:pan-y}
.cartaoP{position:absolute;left:0;right:0;top:0;border-radius:22px;background:var(--cartaoS);box-shadow:var(--vidro);padding:14px;
 transition:transform .55s cubic-bezier(.3,.7,.2,1),opacity .45s;will-change:transform;container-type:inline-size;cursor:grab}
.cartaoP.espera{transform:translateY(26px) scale(.94);opacity:0;pointer-events:none}
.cartaoP.atras{transform:translateY(10px) scale(.95);opacity:.55;pointer-events:none;z-index:0}
.cartaoP.frente{transform:none;opacity:1;z-index:2}
.cartaoP.sai{transform:translateX(-128%) translateY(-6px) rotate(-10deg);opacity:0;z-index:3;transition:transform .5s cubic-bezier(.5,0,.75,0),opacity .5s ease-in}
.cartaoP.arrasta{transition:none;cursor:grabbing}
.pvTopo{font:600 15px/20px Inter,sans-serif;color:var(--t2);margin:0 2px 10px;min-height:20px}
.cena{position:relative;height:124px}
@container (max-width:262px){.c4 .pag .pt{display:none}.c4 .pag{padding:0 8px}}
.cena *{transition:transform .55s cubic-bezier(.2,.9,.25,1),opacity .45s,background-color .35s,color .35s,width 1.4s cubic-bezier(.3,.8,.3,1),height .4s,top .5s}
.pontos{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px}
.dots{display:flex;gap:6px;align-items:center}
.dots i{width:7px;height:7px;border-radius:4px;background:var(--t3);opacity:.35;transition:width .3s,opacity .3s,background .3s}
.dots i.on{width:20px;opacity:1;background:var(--ac)}
.pausa{width:44px;height:44px;border-radius:22px;display:grid;place-items:center;border:0;cursor:pointer;background:var(--sfG);box-shadow:inset 0 0 0 1px var(--borda),var(--vidro);color:var(--t2)}

.lnS{position:absolute;left:0;right:0;display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:16px;background:var(--solida);box-shadow:0 0 0 .5px var(--fio),0 6px 16px rgba(30,30,60,.10)}
.tile{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;flex:none;background-image:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 60%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.12)}
.tile.p{width:34px;height:34px;border-radius:10px}
.lnTx{flex:1;min-width:0}
.lnN{font:600 16px/21px Inter,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lnQ{font:400 15px/20px Inter,sans-serif;color:var(--t2)}
.lnV{font:600 16px/21px Inter,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.lnQ2{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 8px;align-items:baseline}.lnQ2 .lnV{margin-left:auto}
.c1 .lnN{white-space:normal}
.selo{position:absolute;right:-6px;top:-6px;width:24px;height:24px;border-radius:12px;background:var(--ac);color:#fff;display:grid;place-items:center;box-shadow:0 2px 6px rgba(15,118,110,.4);transform:scale(0)}
.papel{position:absolute;border-radius:8px;background:#fff;box-shadow:0 0 0 .5px rgba(30,30,60,.15),0 6px 14px rgba(30,30,60,.14);overflow:hidden;color:#2b2b2b;font:500 11px/14px Inter,sans-serif}
.papel b{position:absolute;left:9px;height:4px;border-radius:2px;background:#C9C7C0}
.papel .cb{position:absolute;left:9px;right:9px;bottom:8px;height:12px;background:repeating-linear-gradient(90deg,#3a3a3a 0 1.5px,transparent 1.5px 3px,#3a3a3a 3px 4px,transparent 4px 6.5px)}
.c1 .papel{left:50%;top:4px;width:72px;height:96px;margin-left:-36px;opacity:0;transform:translateX(60px) rotate(6deg)}
.c1 .scan{position:absolute;left:0;right:0;height:18px;top:-18px;background:linear-gradient(180deg,rgba(15,118,110,0),rgba(15,118,110,.5),rgba(15,118,110,0));transition:top 1.4s linear!important}
.c1 .lnS{top:24px;opacity:0;transform:translateY(18px) scale(.92)}
.e1 .c1 .papel{opacity:1;transform:rotate(-4deg)}
.e2 .c1 .scan{top:100px}
.e3 .c1 .papel{opacity:0;transform:translateY(16px) scale(.6)}
.e3 .c1 .lnS{opacity:1;transform:none}
.e4 .c1 .selo{transform:scale(1);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.c2 .papel{top:0;width:47%;height:84px;padding:8px 9px;opacity:0}
.c2 .pA{left:0;transform:translateX(-30px)}.c2 .pB{right:0;transform:translateX(30px)}
.c2 .papel div{display:flex;justify-content:space-between;align-items:center;height:20px;border-radius:5px;padding:0 4px;margin:0 -4px}
.c2 .papel .k{color:#8a8a86}
.c2 .papel .ok{color:#0F766E;font-weight:700;opacity:0}
.c2 .rot{position:absolute;top:90px;font:500 15px/20px Inter,sans-serif;color:var(--t2);opacity:0}
.c2 .rA{left:2px}.c2 .rB{right:2px}
.e1 .c2 .papel,.e1 .c2 .rot{opacity:1;transform:none}
.e2 .c2 .ok{opacity:1}
.e3 .c2 .pB .troca{background:rgba(196,75,10,.16);box-shadow:inset 0 0 0 1.5px #C44B0A;color:#8A3307}
.e3 .c2 .pB .troca .ok{opacity:0}
.e3 .c2 .pB{transform:translateX(0) rotate(1.5deg)}
.c2 .lnS{top:26px;opacity:0;transform:translateY(18px) scale(.92)}
.c2 .barrado{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;background:#FBEAE3;color:#A8321C}
.e4 .c2 .papel,.e4 .c2 .rot{opacity:0;transform:scale(.85)}
.e4 .c2 .lnS{opacity:1;transform:none}
.c4 .tot{position:absolute;top:0;left:2px;right:2px;display:flex;justify-content:space-between;font:500 15px/20px Inter,sans-serif;color:var(--t2)}
.c4 .tot b{font:700 17px/20px Inter,sans-serif;color:var(--t1);font-variant-numeric:tabular-nums}
.c4 .lnS{padding:6px 10px;height:44px;opacity:0;transform:translateY(14px)}
.c4 .r1{top:28px}.c4 .r2{top:78px;transition-delay:.1s}
.c4 .pag{display:flex;align-items:center;gap:4px;height:30px;padding:0 10px;border-radius:10px;font:600 15px/20px Inter,sans-serif;color:var(--acTx);background:var(--acSoft);flex:none}
.c4 .pag svg{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .4s}
.e1 .c4 .lnS{opacity:1;transform:none}
.e2 .c4 .r1 .pag{background:var(--ac);color:#fff}
.e2 .c4 .r1 .pag svg{stroke-dashoffset:0}
.e3 .c4 .r1{opacity:0;transform:translateX(40px) scale(.96)}
.e3 .c4 .r2{top:28px;transition-delay:.15s}
.c5 .k{position:absolute;top:0;left:2px;font:500 15px/20px Inter,sans-serif;color:var(--t2)}
.c5 .v{position:absolute;top:22px;left:2px;font:700 30px/36px Inter,sans-serif;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.c5 .barraM{position:absolute;left:2px;right:2px;top:70px}
.c5 .fx2{position:absolute;left:2px;right:2px;top:88px;display:flex;justify-content:space-between;font:400 15px/21px Inter,sans-serif;color:var(--t2);opacity:0}
.c5 .fx2 b{font-weight:600;color:var(--t1);font-variant-numeric:tabular-nums}
.e2 .c5 .fx2{opacity:1}
.e1 .c5 .barraM i{width:88.6%}
.barraM{height:8px;border-radius:4px;background:var(--segT);box-shadow:inset 0 0 0 .5px var(--fio);overflow:hidden}
.barraM i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--b0),var(--b1))}
.c6 .sem{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;opacity:0;transform:translateY(-10px)}
.c6 .sem div{display:flex;flex-direction:column;align-items:center;gap:1px;width:36px;font:400 15px/19px Inter,sans-serif;color:var(--t2)}
.c6 .sem b{font:600 15px/19px Inter,sans-serif;color:var(--t1);width:28px;height:28px;border-radius:14px;display:grid;place-items:center}
.c6 .sem .hj b{background:var(--ac);color:#fff}
.c6 .ev{position:absolute;left:0;right:0;height:34px;display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:12px;font:500 15px/20px Inter,sans-serif;background:var(--solida);box-shadow:0 0 0 .5px var(--fio),0 4px 12px rgba(30,30,60,.08);opacity:0;transform:translateX(40px)}
.c6 .ev span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c6 .ev .h{color:var(--acTx);font-weight:600;flex:none}
.c6 .e{top:50px}.c6 .t{top:90px}
.c6 .circ{position:relative;width:20px;height:20px;border-radius:10px;box-shadow:inset 0 0 0 2px var(--borda);flex:none;display:grid;place-items:center;color:#fff}
.c6 .circ::after{content:"";position:absolute;inset:-2px;border-radius:50%;box-shadow:0 0 0 2px var(--ac);opacity:0;transform:scale(1);transition:transform .6s,opacity .6s}
.c6 .tx{position:relative}
.c6 .tx::after{content:"";position:absolute;left:0;top:50%;height:1.5px;width:0;background:var(--t2);transition:width .5s}
.e1 .c6 .sem{opacity:1;transform:none}
.e2 .c6 .e{opacity:1;transform:none}
.e3 .c6 .t{opacity:1;transform:none}
.e4 .c6 .circ{background:var(--ac);box-shadow:none}
.e4 .c6 .circ::after{opacity:0;transform:scale(2.2)}
.e4 .c6 .t .tx{color:var(--t3)}
.e4 .c6 .tx::after{width:100%}
.c6 .circ svg{opacity:0}.e4 .c6 .circ svg{opacity:1}
.c7 .pg{position:absolute;inset:0;border-radius:14px;background:var(--solida);box-shadow:0 0 0 .5px var(--fio);padding:10px 12px}
.c7 .tt{font:700 17px/22px Inter,sans-serif;min-height:22px;white-space:nowrap;overflow:hidden}
.c7 .tt i{display:inline-block;width:2px;height:18px;background:var(--ac);vertical-align:-3px;margin-left:1px;animation:pisca 1s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}
.c7 .it{display:flex;align-items:center;gap:10px;height:28px;font:400 15px/20px Inter,sans-serif;opacity:0;transform:translateY(8px);margin-right:66px}
.c7 .it span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c7 .it2{transition-delay:.12s}
.c7 .circ{position:relative;width:18px;height:18px;border-radius:5px;box-shadow:inset 0 0 0 2px var(--borda);flex:none;display:grid;place-items:center;color:#fff}
.c7 .circ svg{opacity:0}
.c7 .foto{position:absolute;right:12px;top:42px;width:56px;height:56px;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,#F6C89F,#E8965C 55%,#B95E2A);opacity:0;transform:scale(.6) rotate(-6deg);box-shadow:0 6px 14px rgba(120,60,20,.25)}
.c7 .foto::before{content:"";position:absolute;left:10px;bottom:11px;width:36px;height:22px;border-radius:6px 6px 4px 4px;background:#FFF7EE;box-shadow:inset 0 -6px 0 #F1D9C0}
.c7 .foto::after{content:"";position:absolute;left:25px;bottom:33px;width:6px;height:12px;border-radius:2px;background:#fff;box-shadow:0 -6px 0 -1px #FFB347}
.e2 .c7 .it{opacity:1;transform:none}
.e3 .c7 .it1 .circ{background:var(--ac);box-shadow:none}.e3 .c7 .it1 .circ svg{opacity:1}
.e3 .c7 .it1 span{color:var(--t3);text-decoration:line-through}
.e4 .c7 .foto{opacity:1;transform:rotate(3deg);transition:transform .6s cubic-bezier(.3,1.5,.5,1),opacity .3s}

/* as funções, como cartões de vidro do app — refeito em 05/10: duas colunas, mais ar, ícone que reage */
.vfun{padding:48px 52px 44px}
.vtopo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 40px;align-items:end;margin-bottom:30px}
.vfun .vk{display:inline-flex;font:600 12.5px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--acTx);background:var(--acSoft);padding:8px 14px;border-radius:999px;margin-bottom:14px}
.vfun h2{font:700 clamp(26px,3vw,34px)/1.15 Inter,sans-serif;letter-spacing:-.025em;margin:0;color:var(--t1)}
.vtopo p{font:400 17px/1.55 Inter,sans-serif;color:var(--t2);margin:0}
.vgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.vcard{position:relative;background:var(--sfG);box-shadow:var(--vidro);border-radius:22px;padding:24px;display:flex;gap:18px;align-items:flex-start;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.vcard .tile{width:48px;height:48px;border-radius:14px;transition:transform .5s cubic-bezier(.3,1.6,.5,1),box-shadow .45s var(--ease)}
.vcard .tile svg{width:24px;height:24px}
.vcard:hover{transform:translateY(-4px);box-shadow:var(--vidro),0 18px 36px rgba(40,40,90,.10)}
.vcard:hover .tile{transform:scale(1.12) rotate(-7deg);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 18px rgba(30,30,60,.18)}
.vcard:active{transform:scale(.985)}
.vcard:active .tile,.vcard.toque .tile{transform:scale(.9) rotate(4deg)}
.vcard h3{font:600 18px/1.3 Inter,sans-serif;letter-spacing:-.012em;margin:2px 0 6px;color:var(--t1)}
.vcard p{font:400 15.5px/1.5 Inter,sans-serif;color:var(--t2);margin:0}
.vcard.larga{grid-column:1/-1;align-items:center;padding:26px 28px;background:linear-gradient(120deg,rgba(255,255,255,.82),rgba(255,255,255,.6))}
.vcard.larga .tile{width:60px;height:60px;border-radius:17px}.vcard.larga .tile svg{width:28px;height:28px}
.vcard.larga h3{font-size:21px}
.vcard.larga p{max-width:64ch}
.vsep{display:flex;align-items:center;gap:12px;margin:34px 0 18px;font:600 12.5px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#8A3307}
.vsep::after{content:"";flex:1;height:1px;background:rgba(196,75,10,.22)}
.vcard.breve{background:rgba(255,255,255,.42);box-shadow:inset 0 0 0 1px rgba(196,75,10,.22)}
.vcard.breve .tile{filter:saturate(.55)}
.vcard.breve:hover .tile{filter:none}
.vnota{font:400 15px/1.5 Inter,sans-serif;color:var(--t2);margin:28px 0 0}
@media (prefers-reduced-motion:reduce){.vcard,.vcard .tile{transition:none}.vcard:hover,.vcard:active{transform:none}.vcard:hover .tile,.vcard:active .tile,.vcard.toque .tile{transform:none}}
@media (max-width:940px){.vtopo{grid-template-columns:1fr}}
@media (max-width:620px){.vgrid{grid-template-columns:1fr;gap:12px}.vfun{padding:30px 20px}.vcard{flex-direction:column;gap:12px;padding:20px}.vcard.larga{padding:20px;align-items:flex-start}.vcard.larga .tile{width:52px;height:52px}.vcard h3,.vcard.larga h3{margin-top:0}}


/* os ícones entram com um pulo, em sequência, quando o bloco aparece (uma vez) */
.vgrid .tile{opacity:0;transform:scale(.55) rotate(-14deg)}
.vgrid.viu .tile{animation:pulaIco .7s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i,0) * 90ms)}
@keyframes pulaIco{from{opacity:0;transform:scale(.55) rotate(-14deg)}to{opacity:1;transform:none}}
.vgrid.viu .vcard:hover .tile{animation:none;opacity:1;transform:scale(1.12) rotate(-7deg)}
.vgrid.viu .vcard:active .tile,.vgrid.viu .vcard.toque .tile{animation:none;opacity:1;transform:scale(.9) rotate(4deg)}
@media (prefers-reduced-motion:reduce){.vgrid .tile{opacity:1;transform:none}.vgrid.viu .tile{animation:esmaece .8s ease both}}

/* lista sem ordem (não são passos) */
.lista{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px}
.lista li{position:relative;padding-left:22px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.lista li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--tanger)}
.dark .lista li{color:rgba(255,255,255,.8)}.dark .lista li b{color:#fff}

/* páginas de apoio (site) */
.dados .frow dd{font-weight:400;color:var(--ink-2);font-size:16px;line-height:1.6}
.dados .frow dd b{color:var(--ink);font-weight:600}
.lnk{color:var(--klein);font-weight:600;text-decoration:none;border-bottom:1.5px solid rgba(0,47,167,.3)}
.lnk:hover{border-bottom-color:var(--klein)}
.passos{counter-reset:p;list-style:none;margin:6px 0 0;padding:0;display:grid;gap:14px}
.passos li{counter-increment:p;position:relative;padding-left:46px;color:var(--ink-2);font-size:16.5px;line-height:1.6}
.passos li::before{content:counter(p);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(0,47,167,.08);color:var(--klein);font:800 14px/1 Inter,sans-serif}
.passos li b{color:var(--ink)}
.passos li{overflow-wrap:anywhere}
.dark .passos li::before{background:rgba(255,255,255,.14);color:#fff}
.aviso{background:rgba(255,107,53,.10);border-radius:var(--r-sm);padding:16px 18px;color:#7A2E0E;font-size:15.5px;line-height:1.55;margin-top:18px}
.copia{font:600 15px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--canvas);border:1px solid var(--hair);border-radius:12px;padding:12px 14px;margin-top:10px;color:var(--ink);word-break:break-word}
.migalha{font-size:14px;color:var(--ink-3);margin:0 0 14px}
.migalha a{color:var(--ink-2);text-decoration:none}
.migalha a:hover{color:var(--klein)}

/* movimento reduzido: devagar e esmaecendo, sem deslocar (a regra do app) */
.reduz .cena *{transform:none!important;transition:opacity 1.1s ease,background-color .8s,color .8s,width 2.2s ease,top 0s!important}
.reduz .cartaoP{transition:opacity 1.2s ease!important;transform:none!important}
.reduz .cartaoP.espera,.reduz .cartaoP.atras{opacity:0}
.reduz .vera.amanhece .ceu i{animation:esmaece 2.4s ease both}
@keyframes esmaece{from{opacity:0}to{opacity:1}}