/* =========================================================================
   TEMA VIVO — Rede Externa / Fibra Optica MG
   -------------------------------------------------------------------------
   Paleta e motion extraidos do site oficial da Vivo (vivo.com.br e
   vivo.com.br/para-voce/internet/vivo-fibra) em 2026-08-23, cruzados com
   os tokens do app Argos (Apps Script "Argos - Operacao de Rede").

   Regra de degrade: a Vivo NAO usa gradiente na interface de produto.
   O degrade roxo -> magenta pertence a camada de marca. Aqui ele aparece
   somente na faixa de marca (barra global / cabecalho da pagina) e em
   destaques pontuais. Cartao de dado e sempre superficie chapada.

   Este arquivo e o ULTIMO <link> do <head> de cada pagina, para vencer as
   paletas :root declaradas no <style> inline de cada uma.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Inter:wght@400;500;600;700;800;900&display=swap');

/* -------------------------------------------------------------------------
   1. TOKENS DA MARCA
   ------------------------------------------------------------------------- */
:root {
  /* roxo Vivo */
  --vivo-purple:        #660099;
  --vivo-purple-light:  #8533ad;
  --vivo-purple-dark:   #4d0073;
  --vivo-purple-tint:   rgba(102, 0, 153, 0.08);
  --vivo-purple-soft:   rgba(102, 0, 153, 0.24);
  --vivo-lavender:      #f0edfe;

  /* magenta Vivo */
  --vivo-magenta:       #cb2166;
  --vivo-magenta-dark:  #8f2052;
  --vivo-magenta-tint:  rgba(203, 33, 102, 0.10);

  /* degrade de marca (uso restrito: faixa de marca e destaques) */
  --vivo-gradient:      linear-gradient(115deg, #660099 0%, #7a1aa6 40%, #a3218c 72%, #cb2166 100%);
  --vivo-gradient-rev:  linear-gradient(115deg, #cb2166 0%, #a3218c 28%, #7a1aa6 60%, #660099 100%);
  --vivo-gradient-text: linear-gradient(100deg, #660099 0%, #cb2166 100%);
  --vivo-gradient-soft: linear-gradient(115deg, rgba(102,0,153,.10) 0%, rgba(203,33,102,.10) 100%);

  /* neutros Vivo */
  --vivo-canvas:        #f7f7f7;
  --vivo-surface:       #ffffff;
  --vivo-surface-2:     #f0f0f0;
  --vivo-surface-3:     #eeeeee;
  --vivo-line:          #e5e5e5;
  --vivo-line-strong:   #cccccc;

  /* tinta — #737373 no lugar do #888 da Vivo para passar AA (4.74:1) */
  --vivo-ink:           #000000;
  --vivo-ink-2:         #666666;
  --vivo-ink-3:         #737373;
  --vivo-on-brand:      #ffffff;

  /* semanticas legiveis sobre branco */
  --vivo-green:         #007a33;
  --vivo-red:           #d52b1e;
  --vivo-amber:         #9a6700;
  --vivo-orange:        #c2410c;
  --vivo-blue:          #0056b3;
  --vivo-cyan:          #0e7490;

  /* forma — a Vivo usa raios curtos */
  --vivo-radius:        8px;
  --vivo-radius-sm:     4px;
  --vivo-radius-pill:   999px;

  /* elevacao — sombras discretas, como no site da Vivo */
  --vivo-shadow-1:      0 2px 3px rgba(0, 0, 0, 0.10);
  --vivo-shadow-2:      0 6px 16px rgba(0, 0, 0, 0.12);
  --vivo-shadow-brand:  0 8px 24px rgba(102, 0, 153, 0.28);

  /* movimento — a Vivo transiciona em 0.5s */
  --vivo-ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --vivo-dur:           0.5s;
  --vivo-dur-fast:      0.25s;

  /* tipografia — Vivo Type nao e licenciada para uso externo;
     Roboto e o fallback do proprio site da Vivo */
  --vivo-font:          'Vivo Type', 'Roboto', 'Inter', system-ui, -apple-system, sans-serif;
  --vivo-mono:          'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* aliases mantidos para nao quebrar referencias existentes */
  --argos-purple:       var(--vivo-purple);
  --argos-purple-light: var(--vivo-purple-light);
  --argos-purple-deep:  var(--vivo-purple-dark);
  --argos-purple-soft:  var(--vivo-purple-soft);
  --argos-purple-tint:  var(--vivo-purple-tint);
  --argos-canvas:       var(--vivo-canvas);
  --argos-surface:      var(--vivo-surface);
  --argos-surface-2:    var(--vivo-surface-2);
  --argos-surface-3:    var(--vivo-surface-3);
  --argos-line:         var(--vivo-line);
  --argos-line-strong:  var(--vivo-line-strong);
  --argos-ink:          var(--vivo-ink);
  --argos-ink-2:        var(--vivo-ink-2);
  --argos-ink-3:        var(--vivo-ink-3);
  --argos-font:         var(--vivo-font);
  --argos-mono:         var(--vivo-mono);
}

/* -------------------------------------------------------------------------
   2. CAMADA DE COMPATIBILIDADE
   Remapeia os nomes de variavel das paginas legadas para a paleta Vivo.
   O !important e necessario porque cada pagina redeclara :root no seu
   proprio <style> inline.
   ------------------------------------------------------------------------- */
:root {
  /* fundo de pagina */
  --bg:        var(--vivo-canvas)   !important;
  --bg-color:  var(--vivo-canvas)   !important;
  --bg-base:   var(--vivo-canvas)   !important;
  --background-color: var(--vivo-canvas) !important;
  --text-color:       var(--vivo-ink)    !important;
  --border-color:     var(--vivo-line)   !important;
  --primary-color:    var(--vivo-purple) !important;

  /* superficies */
  --bg2:       var(--vivo-surface)   !important;
  --bg3:       var(--vivo-surface-2) !important;
  --bg4:       var(--vivo-surface-3) !important;
  --bg-surf:   var(--vivo-surface)   !important;
  --bg-card:   var(--vivo-surface)   !important;
  --bg-elev:   var(--vivo-surface-2) !important;
  --bg-glass:  rgba(255, 255, 255, 0.94) !important;
  --glass:     rgba(255, 255, 255, 0.94) !important;
  --card:      var(--vivo-surface)   !important;
  --card2:     var(--vivo-surface-2) !important;
  --card-bg:   var(--vivo-surface)   !important;
  --panel:     var(--vivo-surface)   !important;
  --panel2:    var(--vivo-surface-2) !important;
  --panel-2:   var(--vivo-surface-2) !important;
  --p2:        var(--vivo-surface-2) !important;
  --p3:        var(--vivo-surface-3) !important;
  --surf:      var(--vivo-surface)   !important;
  --ink:       var(--vivo-surface)   !important;
  --grid:      var(--vivo-line)      !important;
  --panel-bg:  var(--vivo-surface)   !important;
  --det-bg:    var(--vivo-surface)   !important;
  --popup-bg:  var(--vivo-surface)   !important;
  --popup-tip: var(--vivo-surface)   !important;
  --item-hover: var(--vivo-lavender) !important;
  --item-ativo: var(--vivo-lavender) !important;
  --cluster-bg: var(--vivo-lavender) !important;
  --btn-bg:    var(--vivo-surface-2) !important;
  --btn-hover: var(--vivo-surface-3) !important;
  --overlay:   rgba(0, 0, 0, 0.45)   !important;
  --scrollbar-track: var(--vivo-surface-3) !important;
  --scrollbar-thumb: var(--vivo-line-strong) !important;

  /* bordas */
  --border:    var(--vivo-line)        !important;
  --border-h:  var(--vivo-purple-soft) !important;
  --border2:   var(--vivo-line)        !important;
  --border3:   var(--vivo-line)        !important;
  --border4:   var(--vivo-line-strong) !important;
  --line:      var(--vivo-line)        !important;
  --bd:        var(--vivo-line)        !important;
  --bd2:       var(--vivo-line-strong) !important;
  --bord:      var(--vivo-line)        !important;

  /* texto */
  --text:      var(--vivo-ink)   !important;
  --text2:     var(--vivo-ink-2) !important;
  --text3:     var(--vivo-ink-2) !important;
  --text4:     var(--vivo-ink-2) !important;
  --text5:     var(--vivo-ink-3) !important;
  --text-white: #ffffff          !important;
  --h1-text:   var(--vivo-ink)   !important;
  --muted:     var(--vivo-ink-2) !important;
  --dim:       var(--vivo-ink-2) !important;
  --t:         var(--vivo-ink)   !important;
  --t2:        var(--vivo-ink-2) !important;
  --t3:        var(--vivo-ink-3) !important;
  --tx:        var(--vivo-ink)   !important;
  --tx1:       var(--vivo-ink)   !important;
  --tx2:       var(--vivo-ink-2) !important;
  --tx3:       var(--vivo-ink-3) !important;

  /* acento */
  --accent:    var(--vivo-purple) !important;
  --acc:       var(--vivo-purple) !important;
  --primary:   var(--vivo-purple) !important;
  --accent-d:  var(--vivo-purple-dark) !important;
  --accent-g:  var(--vivo-purple-tint) !important;
  --acc-g:     var(--vivo-purple-tint) !important;
  --blue:      var(--vivo-purple) !important;
  --bl:        var(--vivo-purple) !important;
  --vivo-purple-var: var(--vivo-purple) !important;

  /* semanticas */
  --accent2:   var(--vivo-green)  !important;
  --green:     var(--vivo-green)  !important;
  --gr:        var(--vivo-green)  !important;
  --success:   var(--vivo-green)  !important;
  --green-g:   rgba(0, 122, 51, 0.12) !important;
  --danger:    var(--vivo-red)    !important;
  --red:       var(--vivo-red)    !important;
  --rd:        var(--vivo-red)    !important;
  --red-g:     rgba(213, 43, 30, 0.12) !important;
  --warning:   var(--vivo-amber)  !important;
  --yellow:    var(--vivo-amber)  !important;
  --am:        var(--vivo-amber)  !important;
  --orange:    var(--vivo-orange) !important;
  --orange-g:  rgba(194, 65, 12, 0.12) !important;
  --purple:    var(--vivo-magenta) !important;
  --pu:        var(--vivo-magenta) !important;
  --violet:    var(--vivo-magenta) !important;
  --cyan:      var(--vivo-cyan)   !important;
  --cy:        var(--vivo-cyan)   !important;

  --font:      var(--vivo-font)   !important;
  --mono:      var(--vivo-mono)   !important;
  --shadow:    var(--vivo-shadow-1) !important;
  --sh:        var(--vivo-shadow-1) !important;
  --sh-g:      var(--vivo-shadow-2) !important;

  color-scheme: light;
}

/* -------------------------------------------------------------------------
   3. BASE
   ------------------------------------------------------------------------- */
/* 16 das 21 paginas ja declaram border-box; as 5 restantes estouravam a
   largura no mobile (padding somado a width:100%). Unifica o modelo. */
*, *::before, *::after { box-sizing: border-box; }

html { background: var(--vivo-canvas); }

body {
  font-family: var(--vivo-font);
  background-color: var(--vivo-canvas);
  color: var(--vivo-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font-family: var(--vivo-font); }
code, pre, kbd, samp { font-family: var(--vivo-mono); }

::selection { background: var(--vivo-purple); color: #fff; }

:focus-visible {
  outline: 3px solid var(--vivo-purple);
  outline-offset: 3px;
  border-radius: var(--vivo-radius-sm);
}

input, select, textarea {
  background: var(--vivo-surface);
  color: var(--vivo-ink);
  border-color: var(--vivo-line);
  transition: border-color var(--vivo-dur-fast) var(--vivo-ease),
              box-shadow var(--vivo-dur-fast) var(--vivo-ease);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--vivo-purple);
  box-shadow: 0 0 0 3px var(--vivo-purple-tint);
}

input::placeholder, textarea::placeholder { color: var(--vivo-ink-3); }

a { transition: color var(--vivo-dur-fast) var(--vivo-ease); }

/* -------------------------------------------------------------------------
   4. FAIXA DE MARCA
   Uma unica faixa com o degrade Vivo por pagina.
   Quando a barra global (#rpn-bar) existe, ela e a faixa e o cabecalho da
   pagina fica em superficie branca — evita dois blocos roxos empilhados.
   ------------------------------------------------------------------------- */
.header,
.hdr,
#hdr,
#top,
.earth-app #top,
.earth-app.geosite-pro #top,
.topbar,
.top-bar,
body > header {
  background: var(--vivo-gradient) !important;
  background-color: var(--vivo-purple) !important;
  color: var(--vivo-on-brand) !important;
  border-bottom: 0 !important;
  box-shadow: var(--vivo-shadow-1) !important;
}

/* textos e controles dentro da faixa */
.header *,
.hdr *,
#hdr *,
#top *,
.topbar *,
.top-bar *,
body > header * {
  border-color: rgba(255, 255, 255, 0.28);
}

.header h1, .header h2, .header h3, .header p, .header span, .header div, .header label, .header a,
.hdr h1, .hdr h2, .hdr span, .hdr a, .hdr div,
#hdr h1, #hdr h2, #hdr span, #hdr a, #hdr div,
#top h1, #top h2, #top span, #top a, #top div,
.topbar h1, .topbar h2, .topbar span, .topbar a, .topbar div,
.top-bar h1, .top-bar h2, .top-bar span, .top-bar a, .top-bar div,
body > header h1, body > header h2, body > header span, body > header a, body > header div {
  color: var(--vivo-on-brand);
}

/* titulos com gradiente recortado somem sobre a faixa — neutraliza */
.header h1, .header h2,
.hdr h1, .hdr h2,
#hdr h1, #hdr h2,
#top h1, #top h2,
.topbar h1, .topbar h2,
.top-bar h1, .top-bar h2,
body > header h1, body > header h2 {
  background: none !important;
  -webkit-text-fill-color: var(--vivo-on-brand) !important;
  color: var(--vivo-on-brand) !important;
  filter: none !important;
}

/* botoes dentro da faixa: ghost translucido */
.header button, .header .btn, .header a.btn,
.hdr button, .hdr .btn,
#hdr button, #hdr .btn,
#top button, #top .btn,
.topbar button, .topbar .btn,
.top-bar button, .top-bar .btn,
body > header button, body > header .btn {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: var(--vivo-on-brand);
  border-radius: var(--vivo-radius-sm);
  transition: background var(--vivo-dur-fast) var(--vivo-ease),
              border-color var(--vivo-dur-fast) var(--vivo-ease),
              transform var(--vivo-dur-fast) var(--vivo-ease);
}

.header button:hover, .header .btn:hover,
.hdr button:hover, .hdr .btn:hover,
#hdr button:hover, #hdr .btn:hover,
#top button:hover, #top .btn:hover,
.topbar button:hover, .topbar .btn:hover,
.top-bar button:hover, .top-bar .btn:hover,
body > header button:hover, body > header .btn:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.6);
}

.header input, .header select,
#top input, #top select,
.topbar input, .topbar select,
.top-bar input, .top-bar select,
body > header input, body > header select {
  background: rgba(255, 255, 255, 0.94);
  color: var(--vivo-ink);
  border-color: rgba(255, 255, 255, 0.5);
}

.header :focus-visible,
.hdr :focus-visible,
#hdr :focus-visible,
#top :focus-visible,
.topbar :focus-visible,
.top-bar :focus-visible,
body > header :focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* Quando a barra global existe, ela carrega a marca e o cabecalho da
   pagina volta a ser superficie branca. */
body:has(#rpn-bar) .header,
body:has(#rpn-bar) .hdr,
body:has(#rpn-bar) #hdr,
body:has(#rpn-bar) #top,
body:has(#rpn-bar) .earth-app #top,
body:has(#rpn-bar) .earth-app.geosite-pro #top,
body:has(#rpn-bar) .topbar,
body:has(#rpn-bar) .top-bar,
body:has(#rpn-bar) > header {
  background: var(--vivo-surface) !important;
  background-color: var(--vivo-surface) !important;
  color: var(--vivo-ink) !important;
  border-bottom: 1px solid var(--vivo-line) !important;
  box-shadow: none !important;
}

body:has(#rpn-bar) .header h1, body:has(#rpn-bar) .header h2,
body:has(#rpn-bar) .hdr h1, body:has(#rpn-bar) .hdr h2,
body:has(#rpn-bar) #hdr h1, body:has(#rpn-bar) #hdr h2,
body:has(#rpn-bar) #top h1, body:has(#rpn-bar) #top h2,
body:has(#rpn-bar) .topbar h1, body:has(#rpn-bar) .topbar h2,
body:has(#rpn-bar) .top-bar h1, body:has(#rpn-bar) .top-bar h2,
body:has(#rpn-bar) > header h1, body:has(#rpn-bar) > header h2,
body:has(#rpn-bar) .page-title, body:has(#rpn-bar) .topbar .title,
body:has(#rpn-bar) .header .title, body:has(#rpn-bar) #top .title {
  background: var(--vivo-gradient-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: var(--vivo-purple) !important;
}

body:has(#rpn-bar) .header a, body:has(#rpn-bar) .hdr a, body:has(#rpn-bar) #hdr a,
body:has(#rpn-bar) #top a, body:has(#rpn-bar) .topbar a, body:has(#rpn-bar) .top-bar a,
body:has(#rpn-bar) > header a {
  color: var(--vivo-purple);
  font-weight: 600;
}

body:has(#rpn-bar) .header span, body:has(#rpn-bar) .header div, body:has(#rpn-bar) .header p,
body:has(#rpn-bar) .hdr span, body:has(#rpn-bar) .hdr div,
body:has(#rpn-bar) #hdr span, body:has(#rpn-bar) #hdr div,
body:has(#rpn-bar) #top span, body:has(#rpn-bar) #top div,
body:has(#rpn-bar) .topbar span, body:has(#rpn-bar) .topbar div,
body:has(#rpn-bar) .top-bar span, body:has(#rpn-bar) .top-bar div,
body:has(#rpn-bar) > header span, body:has(#rpn-bar) > header div {
  color: inherit;
}

body:has(#rpn-bar) .header button, body:has(#rpn-bar) .header .btn,
body:has(#rpn-bar) .hdr button, body:has(#rpn-bar) .hdr .btn,
body:has(#rpn-bar) #hdr button, body:has(#rpn-bar) #hdr .btn,
body:has(#rpn-bar) #top button, body:has(#rpn-bar) #top .btn,
body:has(#rpn-bar) .topbar button, body:has(#rpn-bar) .topbar .btn,
body:has(#rpn-bar) .top-bar button, body:has(#rpn-bar) .top-bar .btn,
body:has(#rpn-bar) > header button, body:has(#rpn-bar) > header .btn {
  background: var(--vivo-surface);
  border: 1px solid var(--vivo-line);
  color: var(--vivo-ink);
}

body:has(#rpn-bar) .header .btn.prim, body:has(#rpn-bar) .topbar .btn.prim,
body:has(#rpn-bar) #top .btn.prim, body:has(#rpn-bar) #hdr .btn.prim,
body:has(#rpn-bar) .header .btn.primary, body:has(#rpn-bar) .topbar .btn.primary {
  background: var(--vivo-purple);
  border-color: var(--vivo-purple);
  color: #fff;
}

body:has(#rpn-bar) .header button:hover, body:has(#rpn-bar) .header .btn:hover,
body:has(#rpn-bar) .topbar button:hover, body:has(#rpn-bar) .topbar .btn:hover,
body:has(#rpn-bar) #top button:hover, body:has(#rpn-bar) #top .btn:hover,
body:has(#rpn-bar) #hdr button:hover, body:has(#rpn-bar) #hdr .btn:hover,
body:has(#rpn-bar) > header button:hover, body:has(#rpn-bar) > header .btn:hover {
  background: var(--vivo-lavender);
  border-color: var(--vivo-purple-soft);
  color: var(--vivo-purple);
}

/* Pills, badges e botoes com estilo inline dentro da faixa de marca.
   Escopo em :not(:has(#rpn-bar)) para nao vazar para o cabecalho branco. */
body:not(:has(#rpn-bar)) .header .status-pill,
body:not(:has(#rpn-bar)) .header .pill,
body:not(:has(#rpn-bar)) .header .badge,
body:not(:has(#rpn-bar)) > header .status-pill,
body:not(:has(#rpn-bar)) > header .pill,
body:not(:has(#rpn-bar)) > header .badge,
body:not(:has(#rpn-bar)) .topbar .pill,
body:not(:has(#rpn-bar)) #top .pill {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
}

body:not(:has(#rpn-bar)) .header button,
body:not(:has(#rpn-bar)) .header a,
body:not(:has(#rpn-bar)) > header button,
body:not(:has(#rpn-bar)) > header a,
body:not(:has(#rpn-bar)) .topbar button,
body:not(:has(#rpn-bar)) .topbar a,
body:not(:has(#rpn-bar)) #top button,
body:not(:has(#rpn-bar)) #top a,
body:not(:has(#rpn-bar)) #hdr button,
body:not(:has(#rpn-bar)) #hdr a,
body:not(:has(#rpn-bar)) .hdr button,
body:not(:has(#rpn-bar)) .hdr a,
body:not(:has(#rpn-bar)) .top-bar button,
body:not(:has(#rpn-bar)) .top-bar a,
body:not(:has(#rpn-bar)) .header em, body:not(:has(#rpn-bar)) .header strong, body:not(:has(#rpn-bar)) .header b, body:not(:has(#rpn-bar)) .header small,
body:not(:has(#rpn-bar)) > header em, body:not(:has(#rpn-bar)) > header strong, body:not(:has(#rpn-bar)) > header b, body:not(:has(#rpn-bar)) > header small,
body:not(:has(#rpn-bar)) #top em, body:not(:has(#rpn-bar)) #top strong, body:not(:has(#rpn-bar)) #top b, body:not(:has(#rpn-bar)) #top small,
body:not(:has(#rpn-bar)) .topbar em, body:not(:has(#rpn-bar)) .topbar strong, body:not(:has(#rpn-bar)) .topbar small,
body:not(:has(#rpn-bar)) #hdr em, body:not(:has(#rpn-bar)) #hdr strong, body:not(:has(#rpn-bar)) #hdr small,
body:not(:has(#rpn-bar)) .hdr em, body:not(:has(#rpn-bar)) .hdr strong, body:not(:has(#rpn-bar)) .hdr small,
body:not(:has(#rpn-bar)) .header p, body:not(:has(#rpn-bar)) .header .sub, body:not(:has(#rpn-bar)) .header .subtitle,
body:not(:has(#rpn-bar)) > header p, body:not(:has(#rpn-bar)) > header .sub, body:not(:has(#rpn-bar)) > header .subtitle,
body:not(:has(#rpn-bar)) .topbar p, body:not(:has(#rpn-bar)) .topbar .sub, body:not(:has(#rpn-bar)) .topbar .subtitle,
body:not(:has(#rpn-bar)) #top p, body:not(:has(#rpn-bar)) #hdr p, body:not(:has(#rpn-bar)) .hdr p,
body:not(:has(#rpn-bar)) .top-bar p {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* CTA primario dentro da faixa: superficie branca com tinta da marca */
body:not(:has(#rpn-bar)) .header .btn.primary, body:not(:has(#rpn-bar)) .header .btn.prim,
body:not(:has(#rpn-bar)) .header .btn-primary, body:not(:has(#rpn-bar)) .header button.primary,
body:not(:has(#rpn-bar)) > header .btn.primary, body:not(:has(#rpn-bar)) > header .btn-primary,
body:not(:has(#rpn-bar)) .topbar .btn.primary, body:not(:has(#rpn-bar)) .topbar .btn.prim,
body:not(:has(#rpn-bar)) #top .btn.primary, body:not(:has(#rpn-bar)) #top .btn.prim,
body:not(:has(#rpn-bar)) #hdr .btn.primary, body:not(:has(#rpn-bar)) #hdr .btn.prim,
body:not(:has(#rpn-bar)) .top-bar .btn.primary {
  background: #ffffff !important;
  border: 1px solid #ffffff !important;
  color: var(--vivo-purple) !important;
  font-weight: 700;
}

body:not(:has(#rpn-bar)) .header .btn.primary:hover, body:not(:has(#rpn-bar)) .header .btn.prim:hover,
body:not(:has(#rpn-bar)) > header .btn.primary:hover,
body:not(:has(#rpn-bar)) .topbar .btn.primary:hover, body:not(:has(#rpn-bar)) .topbar .btn.prim:hover,
body:not(:has(#rpn-bar)) #top .btn.primary:hover, body:not(:has(#rpn-bar)) #hdr .btn.primary:hover {
  background: var(--vivo-lavender) !important;
  color: var(--vivo-purple-dark) !important;
}

/* campos dentro da faixa: superficie clara com tinta escura */
body:not(:has(#rpn-bar)) .header select, body:not(:has(#rpn-bar)) .header input,
body:not(:has(#rpn-bar)) > header select, body:not(:has(#rpn-bar)) > header input,
body:not(:has(#rpn-bar)) #top select, body:not(:has(#rpn-bar)) #top input,
body:not(:has(#rpn-bar)) .topbar select, body:not(:has(#rpn-bar)) .topbar input,
body:not(:has(#rpn-bar)) #hdr select, body:not(:has(#rpn-bar)) #hdr input,
body:not(:has(#rpn-bar)) .hdr select, body:not(:has(#rpn-bar)) .hdr input,
body:not(:has(#rpn-bar)) .top-bar select, body:not(:has(#rpn-bar)) .top-bar input {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--vivo-ink) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
}

/* marca dentro da faixa: quadrado translucido, nao bloco solido */
body:not(:has(#rpn-bar)) .brand-mark,
body:not(:has(#rpn-bar)) .logo-mark,
body:not(:has(#rpn-bar)) .argos-brand-mark,
body:not(:has(#rpn-bar)) .earth-app .brand-mark,
body:not(:has(#rpn-bar)) #top .brand-mark,
body:not(:has(#rpn-bar)) .header .brand-mark {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  color: #ffffff !important;
  border-radius: var(--vivo-radius-sm);
}

/* -------------------------------------------------------------------------
   5. ELEVACAO E ESTADOS
   Cartao de dado permanece chapado — degrade so na marca.
   ------------------------------------------------------------------------- */
.card, .panel, .box, .widget, .kpi, .kpi-card, .stat-card, .chart-card, .wcard {
  border-radius: var(--vivo-radius);
  box-shadow: var(--vivo-shadow-1);
  transition: box-shadow var(--vivo-dur) var(--vivo-ease),
              transform var(--vivo-dur-fast) var(--vivo-ease),
              border-color var(--vivo-dur-fast) var(--vivo-ease);
}

a.card:hover, .card[href]:hover, .wcard:hover, .kpi-card:hover, .stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--vivo-shadow-2);
  border-color: var(--vivo-purple-soft);
}

.btn-primary, button.primary, .btn.primary, .btn.prim, button.prim, .btn-prim {
  background: var(--vivo-purple);
  color: #fff;
  border: 0;
  border-radius: var(--vivo-radius-sm);
  transition: background var(--vivo-dur-fast) var(--vivo-ease),
              box-shadow var(--vivo-dur-fast) var(--vivo-ease),
              transform var(--vivo-dur-fast) var(--vivo-ease);
}

.btn-primary:hover, button.primary:hover, .btn.primary:hover,
.btn.prim:hover, button.prim:hover, .btn-prim:hover {
  background: var(--vivo-purple-dark);
  box-shadow: var(--vivo-shadow-brand);
}

.btn-primary:active, button.primary:active, .btn.primary:active,
.btn.prim:active, button.prim:active, .btn-prim:active { transform: scale(0.98); }

/* linha de destaque com o degrade da marca (uso pontual) */
.vivo-accent-bar {
  height: 4px;
  background: var(--vivo-gradient);
  border-radius: var(--vivo-radius-pill);
}

/* numero de KPI com o degrade recortado — assinatura da marca */
.kpi-value, .kpi-number, .stat-value {
  background: var(--vivo-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* -------------------------------------------------------------------------
   6. MOVIMENTO
   Curva e duracao iguais as do site da Vivo (0.5s / ease padrao).
   ------------------------------------------------------------------------- */
@keyframes vivoFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes vivoFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes vivoBandIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes vivoShimmer {
  from { background-position: -320px 0; }
  to   { background-position: 320px 0; }
}

.header, .hdr, #hdr, #top, .topbar, .top-bar, body > header {
  animation: vivoBandIn 0.45s var(--vivo-ease) both;
}

main > .card, main > .panel,
.grid > .card, .grid > a.card,
.kpi-grid > *, .cards > .card, .wcards > .wcard {
  animation: vivoFadeUp var(--vivo-dur) var(--vivo-ease) both;
}

/* escalonamento curto — so os primeiros, para nao atrasar listas longas */
.grid > *:nth-child(1),  .kpi-grid > *:nth-child(1),  .wcards > *:nth-child(1)  { animation-delay: 0.02s; }
.grid > *:nth-child(2),  .kpi-grid > *:nth-child(2),  .wcards > *:nth-child(2)  { animation-delay: 0.06s; }
.grid > *:nth-child(3),  .kpi-grid > *:nth-child(3),  .wcards > *:nth-child(3)  { animation-delay: 0.10s; }
.grid > *:nth-child(4),  .kpi-grid > *:nth-child(4),  .wcards > *:nth-child(4)  { animation-delay: 0.14s; }
.grid > *:nth-child(5),  .kpi-grid > *:nth-child(5),  .wcards > *:nth-child(5)  { animation-delay: 0.18s; }
.grid > *:nth-child(6),  .kpi-grid > *:nth-child(6),  .wcards > *:nth-child(6)  { animation-delay: 0.22s; }
.grid > *:nth-child(n+7), .kpi-grid > *:nth-child(n+7), .wcards > *:nth-child(n+7) { animation-delay: 0.26s; }

/* estado de carregamento */
[aria-busy="true"] {
  background-image: linear-gradient(90deg,
    var(--vivo-surface-2) 0%,
    var(--vivo-lavender) 50%,
    var(--vivo-surface-2) 100%);
  background-size: 320px 100%;
  background-repeat: no-repeat;
  animation: vivoShimmer 1.2s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
   7. TIPOGRAFIA EM TELA ESTREITA
   Titulos grandes sem quebra estouravam a largura do documento e faziam a
   faixa de marca terminar antes da borda. Correcao tipografica, sem mexer
   em layout.
   ------------------------------------------------------------------------- */
@media (max-width: 520px) {
  h1, h2, .hero h2, .app-title, .page-title, .title {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .hero h2 { font-size: clamp(1.6rem, 8vw, 2.2rem); line-height: 1.15; }
  h1 { font-size: clamp(1.25rem, 6vw, 1.9rem); }
}
