/* Entrada da Área privada (equipe): visual aprovado na prévia. */
  body { color: #C9D6E0; background: radial-gradient(80% 60% at 15% 0%, rgba(46,155,230,.20), transparent 60%),
                                    radial-gradient(70% 60% at 100% 100%, rgba(0,117,189,.22), transparent 60%), var(--noite); }
  body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
                background-image: linear-gradient(rgba(154,202,238,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(154,202,238,.05) 1px, transparent 1px);
                background-size: 48px 48px; -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent); mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent); }
  .topo { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; max-width: 1240px; margin: 0 auto; padding: 22px 28px; font-size: 13px; }
  .status { display: flex; align-items: center; gap: 18px; color: #8FA6B9; }
  .vivo { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #2FB37A; box-shadow: 0 0 10px #2FB37A; display: inline-block; margin-right: 8px; }
  .vivo::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid rgba(47,179,122,.6); animation: onda 2s ease-out infinite; }
  @keyframes onda { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
  .pilula { padding: 8px 14px; border-radius: 999px; text-decoration: none; color: #C9D6E0; border: 1px solid rgba(154,202,238,.2); background: rgba(255,255,255,.04);
            transition: all .25s; font-weight: 600; }
  .pilula:hover { color: #fff; border-color: rgba(154,202,238,.45); box-shadow: 0 0 24px rgba(46,155,230,.25); }

  .palco { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 10px 28px 60px; min-height: calc(100vh - 90px);
           display: grid; grid-template-columns: 1fr 460px; gap: 70px; align-items: center; }
  .marca .logo-vivo { width: 150px; --mascara: url(img/logo-branco.png); filter: drop-shadow(0 0 28px rgba(46,155,230,.55)); }
  .marca .logo-vivo img { animation: revela 1.2s .1s var(--curva) both, respira 5s 1.4s ease-in-out infinite; }
  @keyframes respira { 50% { filter: drop-shadow(0 0 18px rgba(46,155,230,.8)); } }
  .marca h1 { margin: 26px 0 14px; font-size: clamp(40px, 5vw, 66px); line-height: 1; letter-spacing: -.055em; color: #fff; font-weight: 700; }
  .marca h1 .grad { background: linear-gradient(100deg, #FFFFFF 0%, #9ACAEE 50%, #2E9BE6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .2em; margin-bottom: -.2em; }
  .marca p { max-width: 460px; margin: 0; font-size: 17px; color: #8FA6B9; }
  .numeros { display: flex; gap: 28px; margin-top: 34px; }
  .numeros div b { display: block; font-size: 30px; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
  .numeros div span { font-size: 13px; color: #6F8496; }

  .cartao { position: relative; padding: 32px; border-radius: 30px; overflow: hidden;
            background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border: 1px solid rgba(154,202,238,.18);
            box-shadow: 0 40px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); }
  .cartao::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
                    background: conic-gradient(from var(--giro, 0deg), transparent 0 70%, rgba(46,155,230,.9) 80%, rgba(154,202,238,.9) 85%, transparent 92%);
                    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: contorno 6s linear infinite; }
  @property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
  @keyframes contorno { to { --giro: 360deg; } }
  .cartao::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
                   background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(46,155,230,.14), transparent 55%); }
  .cartao:hover::after { opacity: 1; }
  .cartao h2 { margin: 0; font-size: 26px; letter-spacing: -.035em; color: #fff; }
  .cartao .sub { margin: 6px 0 22px; color: #8FA6B9; font-size: 14.5px; }
  .google { position: relative; width: 100%; height: 56px; border-radius: 16px; border: 1px solid rgba(154,202,238,.28); background: #fff; color: var(--tinta);
            display: flex; align-items: center; justify-content: center; gap: 12px; font-weight: 650; font-size: 15.5px; transition: transform .2s var(--curva), box-shadow .3s; }
  .google:hover { transform: translateY(-2px); box-shadow: 0 0 0 4px rgba(46,155,230,.25), 0 16px 40px rgba(0,0,0,.35); }
  .google .g { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #EEF5FB; color: var(--azul); font-weight: 800; }
  .dominio { margin: 12px 0 0; font-size: 13px; line-height: 1.7; color: #8FA6B9; }
  .dominio code { font: 600 12.5px var(--fonte); color: var(--ceu); background: rgba(46,155,230,.12); padding: 2px 8px; border-radius: 6px; }
  .selos { display: grid; gap: 8px; margin-top: 18px; }
  .selo { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #A9BBCB; }
  .selo svg { width: 16px; height: 16px; color: #2FB37A; flex: none; }
  .divisor { display: flex; align-items: center; gap: 12px; margin: 24px 0 14px; font-size: 12.5px; color: #6F8496; }
  .divisor::before, .divisor::after { content: ""; flex: 1; height: 1px; background: rgba(154,202,238,.14); }
  .atalhos { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .atalho { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; text-decoration: none; color: #C9D6E0;
            border: 1px solid rgba(154,202,238,.14); background: rgba(255,255,255,.03); transition: all .25s var(--curva); }
  .atalho:hover { border-color: rgba(154,202,238,.4); background: rgba(46,155,230,.10); transform: translateY(-2px); color: #fff; }
  .atalho .ic { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; color: var(--ceu); background: rgba(46,155,230,.14); }
  .atalho .ic svg { width: 18px; height: 18px; }
  .atalho b { display: block; font-size: 13.5px; }
  .atalho small { font-size: 11.5px; color: #6F8496; }

  /* conferência do acesso (sequência futurista) */
  .verificando { display: none; }
  .cartao.conferindo .entrada-google { display: none; }
  .cartao.conferindo .verificando { display: block; animation: sobe .5s var(--curva); }
  .radar { position: relative; width: 92px; height: 92px; margin: 4px auto 20px; border-radius: 50%; border: 1px solid rgba(154,202,238,.25);
           background: radial-gradient(circle, rgba(46,155,230,.18), transparent 65%); }
  .radar::before { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: gira 1.6s linear infinite;
                   background: conic-gradient(from 0deg, transparent 0 75%, rgba(46,155,230,.75) 100%); }
  .radar span { position: absolute; inset: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--noite);
                border: 1px solid rgba(154,202,238,.3); color: #fff; font-weight: 700; font-size: 20px; }
  .radar.ok::before { animation: none; background: conic-gradient(#2FB37A, #2FB37A); opacity: .35; }
  .radar.ok span { color: #2FB37A; border-color: rgba(47,179,122,.6); }
  .passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .passos li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; font-size: 14px; color: #6F8496;
               border: 1px solid rgba(154,202,238,.08); background: rgba(255,255,255,.02); transition: all .4s var(--curva); }
  .passos li i { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1.5px solid rgba(154,202,238,.3); display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; }
  .passos li.vez { color: #fff; border-color: rgba(46,155,230,.45); background: rgba(46,155,230,.10); }
  .passos li.vez i { border-color: var(--brilho); border-top-color: transparent; animation: gira .8s linear infinite; }
  .passos li.feito { color: #D7F2E5; }
  .passos li.feito i { border-color: #2FB37A; background: #2FB37A; color: var(--noite); }
  .passos li small { margin-left: auto; color: #6F8496; font-size: 12px; }

  .aviso { position: fixed; left: 50%; bottom: 28px; z-index: 20; transform: translate(-50%, 140%); opacity: 0; transition: all .45s var(--curva);
           max-width: min(520px, calc(100% - 32px)); padding: 14px 18px; border-radius: 18px; font-size: 14px; color: #fff;
           background: rgba(10,22,34,.94); border: 1px solid rgba(154,202,238,.25); box-shadow: 0 20px 50px rgba(0,0,0,.45); }
  .aviso.mostra { transform: translate(-50%, 0); opacity: 1; }

  @media (max-width: 960px) {
    .palco { grid-template-columns: 1fr; gap: 30px; }
    .numeros { display: none; }
    .marca h1 { font-size: 38px; margin-top: 18px; }
    .marca .logo-vivo { width: 110px; }
    .status .hora { display: none; }
  }
  @media (max-width: 480px) { .cartao { padding: 24px 18px; } .atalhos { grid-template-columns: 1fr; } .palco, .topo { padding-left: 16px; padding-right: 16px; } }
  .dominio-erro { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(180,50,31,.16); color: #FFD3CB; font-size: 13.5px; }