/* ==========================================================================
   Voraxus - Design System
   Tema claro por padrao, escuro via [data-theme="dark"].
   Todas as classes que o script.js injeta em runtime (vrs-card, vrs-thumb,
   vrs-logo, vrs-carousel, vrs-reveal, vrs-hidden...) estao contempladas.
   ========================================================================== */

/* ===== 1. TOKENS ========================================================= */

:root{
  /* Marca */
  --brand:        #ff6a00;
  --brand-2:      #ff9a3d;
  --brand-ink:    #ffffff;
  --navy:         #0a0e2a;
  --navy-2:       #121838;

  /* Superficies - tema claro */
  --bg:           #ffffff;
  --bg-soft:      #f4f6fb;
  --surface:      #ffffff;
  --surface-2:    #f8fafc;
  --surface-3:    #eef1f7;

  /* Texto - tema claro */
  --fg:           #0d1220;
  --fg-soft:      #333c50;
  --muted:        #5f6a80;
  --on-deep:      #eef1fa;
  --on-deep-mut:  #9aa4c2;

  /* Linhas e sombras */
  --line:         rgba(13,18,32,.10);
  --line-2:       rgba(13,18,32,.18);
  --ring:         rgba(255,106,0,.35);
  --shadow-1:     0 1px 2px rgba(13,18,32,.06), 0 4px 16px rgba(13,18,32,.06);
  --shadow-2:     0 8px 20px rgba(13,18,32,.08), 0 24px 48px rgba(13,18,32,.10);
  --shadow-brand: 0 10px 30px rgba(255,106,0,.28);

  /* Forma */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Ritmo */
  --pad-sec: clamp(56px, 8vw, 104px);
  --gap:     clamp(16px, 2.2vw, 26px);
  --maxw:    1180px;

  color-scheme: light;
}

:root[data-theme="dark"]{
  --bg:           #070914;
  --bg-soft:      #0b0f1f;
  --surface:      #111629;
  --surface-2:    #151b31;
  --surface-3:    #1b2240;

  --fg:           #eef1f8;
  --fg-soft:      #ccd3e2;
  --muted:        #97a1b8;

  --line:         rgba(255,255,255,.12);
  --line-2:       rgba(255,255,255,.20);
  --shadow-1:     0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.32);
  --shadow-2:     0 10px 26px rgba(0,0,0,.45), 0 28px 56px rgba(0,0,0,.40);

  color-scheme: dark;
}

/* O tema CLARO é o padrão do site, independente da configuração do sistema
   operacional. O escuro é uma escolha deliberada: só entra quando a pessoa
   clica no alternador, que grava [data-theme="dark"] e salva a preferência. */

/* ===== 2. BASE =========================================================== */

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }
html:focus-within{ scroll-behavior:smooth }

body.vrs-body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,svg,video{ max-width:100%; height:auto; display:block }

h1,h2,h3,h4{
  margin:0;
  line-height:1.15;
  letter-spacing:-.022em;
  font-weight:800;
  color: var(--fg);
  text-wrap: balance;
}
p{ margin:0 }

a{ color: inherit; text-decoration:none }

:where(a,button,select,input,textarea,summary):focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ===== 3. LAYOUT ========================================================= */

.vrs-container{
  width:100%;
  max-width: var(--maxw);
  margin-inline:auto;
  padding-inline: clamp(18px, 4vw, 32px);
}

.vrs-section{ padding-block: var(--pad-sec) }
.vrs-section--soft{ background: var(--bg-soft) }
.vrs-section--tight{ padding-block: clamp(36px,5vw,60px) }

/* Seccoes ancora: escuras nos dois temas, criam hierarquia. */
.vrs-section--deep{
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(255,106,0,.16), transparent 62%),
    radial-gradient(760px 380px at 92% 108%, rgba(90,120,255,.16), transparent 60%),
    linear-gradient(170deg, var(--navy), var(--navy-2));
  color: var(--on-deep);
}
.vrs-section--deep h2,
.vrs-section--deep h3{ color:#fff }
.vrs-section--deep .vrs-muted{ color: var(--on-deep-mut) }

.row{ display:flex; align-items:center }
.vrs-muted{ color: var(--muted) }
.vrs-hidden{ display:none !important }
.vrs-error{ color:#e5484d }
:root[data-theme="dark"] .vrs-error{ color:#ff8a8a }

/* ===== 4. TIPOGRAFIA DE SECAO ============================================ */

.vrs-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  color: var(--brand);
  margin-bottom:.85rem;
}
.vrs-eyebrow::before{
  content:""; width:22px; height:2px; border-radius:2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}
.vrs-section--deep .vrs-eyebrow{ color: var(--brand-2) }

.vrs-sec__head{ max-width: 62ch; margin-bottom: clamp(28px,4vw,44px) }
.vrs-sec__head--center{ margin-inline:auto; text-align:center }
.vrs-sec__head--center .vrs-eyebrow{ justify-content:center }

.vrs-sec__title{
  font-size: clamp(1.7rem, 3.1vw, 2.5rem);
  margin-bottom:.7rem;
}
.vrs-sec__lead{
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.09rem);
  max-width: 64ch;
}
.vrs-sec__head--center .vrs-sec__lead{ margin-inline:auto }

/* ===== 5. BOTOES ========================================================= */

.vrs-btn{
  --bt-bg: var(--surface);
  --bt-fg: var(--fg);
  --bt-bd: var(--line-2);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font: inherit; font-weight:650;
  padding:.78rem 1.3rem;
  border-radius: var(--r);
  border:1px solid var(--bt-bd);
  background: var(--bt-bg);
  color: var(--bt-fg);
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
  transition: transform .14s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.vrs-btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-1) }
.vrs-btn:active{ transform: translateY(0) }

.vrs-btn--primary{
  --bt-bg: linear-gradient(135deg, var(--brand), #ff8524);
  --bt-fg: var(--brand-ink);
  --bt-bd: transparent;
  box-shadow: var(--shadow-brand);
}
.vrs-btn--primary:hover{ box-shadow: 0 14px 38px rgba(255,106,0,.38) }

.vrs-btn--ghost{ --bt-bg: transparent }

.vrs-btn--onDeep{
  --bt-bg: rgba(255,255,255,.08);
  --bt-fg:#fff;
  --bt-bd: rgba(255,255,255,.22);
}
.vrs-btn--sm{ padding:.55rem .9rem; font-size:.9rem }

.vrs-link{
  color: var(--brand);
  font-weight:600;
  display:inline-flex; align-items:center; gap:.4rem;
}
.vrs-link:hover{ text-decoration:underline; text-underline-offset:3px }

/* ===== 6. NAVEGACAO ====================================================== */

.vrs-nav{
  position: sticky; top:0; z-index:900;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);
}
.vrs-nav__in{
  display:flex; align-items:center; gap:1rem;
  min-height:70px;
}

.vrs-brand{
  display:flex; align-items:center; gap:.6rem;
  margin-right:auto; min-width:0;   /* min-width:0 deixa o bloco encolher */
}
.vrs-logo-main{ width:36px; height:36px; object-fit:contain; border-radius:9px; flex:none }

/* min-content faz o nome ser o piso: a coluna nunca encolhe a ponto de
   cortá-lo. Quem cede espaço é o letreiro, que tem min-width:0. */
.vrs-brand__txt{ display:flex; flex-direction:column; min-width:min-content }
.vrs-brand__name{
  font-weight:800; font-size:1.16rem; letter-spacing:-.02em;
  line-height:1.15; white-space:nowrap;
}

/* Letreiro sob o nome: corre para a esquerda e reinicia sem emenda.
   A lista é duplicada no HTML; deslocar 50% devolve ao ponto de partida. */
.vrs-brand__ticker{
  display:block; overflow:hidden;
  /* largura definida (não max-content), senão a trilha duplicada de ~1500px
     viraria a largura desejada da marca e espremeria o menu */
  width: min(250px, 26vw); min-width:0;
  height:1.3em; line-height:1.3;
  font-size:.71rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 85%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 85%, transparent);
}
.vrs-brand__track{
  display:flex; width:max-content;
  animation: vrs-ticker 24s linear infinite;
}
.vrs-brand__track b{
  font-weight:650; letter-spacing:.01em;
  color: var(--brand);
  white-space:nowrap;
  padding-right:1.7rem;
}
@keyframes vrs-ticker{ from{ transform:none } to{ transform: translateX(-50%) } }

/* Para de correr quando o ponteiro está sobre a marca, para dar tempo de ler */
.vrs-brand:hover .vrs-brand__track,
.vrs-brand:focus-within .vrs-brand__track{ animation-play-state: paused }

.vrs-links{ display:none; gap:.15rem }
.vrs-links button{
  font: inherit; font-weight:550; font-size:.94rem;
  background:none; border:0; cursor:pointer;
  color: var(--fg-soft);
  padding:.5rem .7rem; border-radius: var(--r-sm);
  transition: color .16s ease, background .16s ease;
}
.vrs-links button:hover{ color: var(--brand); background: var(--surface-2) }
@media (min-width:1024px){ .vrs-links{ display:flex } }

.vrs-nav__actions{ display:flex; align-items:center; gap:.5rem; flex:none }

/* Rótulo curto do CTA em telas estreitas */
.so-largo{ display:inline }
.so-estreito{ display:none }

@media (max-width: 639px){
  .vrs-nav__in{ gap:.5rem; min-height:64px }
  .vrs-nav__actions{ gap:.35rem }
  .vrs-nav__actions .vrs-btn--primary{ padding:.52rem .8rem; font-size:.85rem }
  .so-largo{ display:none }
  .so-estreito{ display:inline }

  /* O alternador de tema sai da barra e vai para dentro do menu:
     libera ~44px, que é o que faltava para a marca respirar. */
  .vrs-nav__actions .vrs-theme{ display:none }

  .vrs-mobile{ inset-block-start:64px; max-height: calc(100dvh - 64px) }
  .vrs-veil{ inset-block-start:64px }
}

/* Alternador de tema */
.vrs-theme{
  width:42px; height:42px;
  display:inline-grid; place-items:center;
  border:1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--fg);
  cursor:pointer;
  transition: background .2s ease, border-color .2s ease, transform .14s ease;
}
.vrs-theme:hover{ background: var(--surface-2); transform: translateY(-1px) }
.vrs-theme svg{ width:19px; height:19px }
.vrs-theme .ic-moon{ display:none }
:root[data-theme="dark"] .vrs-theme .ic-sun{ display:none }
:root[data-theme="dark"] .vrs-theme .ic-moon{ display:block }

/* Botao de menu -> X.
   As barras sao posicionadas em absoluto sobre o MESMO centro e afastadas por
   translateY. Assim o X fecha exatamente, sem depender da altura do botao
   (foi esse o erro anterior: o grid espacava as barras em 14px, nao 6px).

   Sem caixa e sem borda: o contorno quadrado é o que mais envelhece o
   cabeçalho. Duas barras em vez de três — continua sendo lido como menu,
   com menos ruído ao lado do CTA laranja. O alvo de toque segue com 44px. */
.vrs-burger{
  position:relative;
  width:44px; height:44px;
  display:inline-block;
  border:0; border-radius:50%;
  background: transparent; color: var(--fg);
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease;
}
.vrs-burger:hover{ background: var(--surface-2) }
.vrs-burger:active{ background: var(--surface-3) }
@media (min-width:1024px){ .vrs-burger{ display:none } }

.vrs-burger span{
  position:absolute; left:50%; top:50%;
  width:20px; height:2px; margin-left:-10px; margin-top:-1px;
  border-radius:2px; background: currentColor;
  transition: transform .32s cubic-bezier(.2,.8,.25,1);
}
.vrs-burger span:nth-child(1){ transform: translateY(-4px) }
.vrs-burger span:nth-child(2){ transform: translateY(4px) }

.vrs-burger[aria-expanded="true"] span:nth-child(1){ transform: rotate(45deg) }
.vrs-burger[aria-expanded="true"] span:nth-child(2){ transform: rotate(-45deg) }

/* Véu por trás do painel */
.vrs-veil{
  position:fixed; inset:0; z-index:898;
  background: color-mix(in srgb, var(--navy) 55%, transparent);
  backdrop-filter: blur(2px);
  opacity:0; visibility:hidden;
  transition: opacity .26s ease, visibility .26s;
}
.vrs-veil.is-open{ opacity:1; visibility:visible }
@media (min-width:1024px){ .vrs-veil{ display:none } }

/* Painel mobile */
.vrs-mobile{
  position: fixed; inset:70px 0 auto 0; z-index:899;
  max-height: calc(100dvh - 70px);
  overflow-y:auto; overscroll-behavior:contain;
  background: var(--bg);
  border-bottom:1px solid var(--line);
  border-radius:0 0 var(--r-xl) var(--r-xl);
  box-shadow: var(--shadow-2);
  padding: .9rem clamp(16px,4vw,28px) 1.4rem;
  transform: translateY(-14px); opacity:0; visibility:hidden;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .2s ease, visibility .28s;
}
.vrs-mobile.is-open{ transform:none; opacity:1; visibility:visible }
@media (min-width:1024px){ .vrs-mobile{ display:none } }

.vrs-mobile__nav{ display:grid; gap:2px; margin-bottom:1.1rem }

.vrs-mobile__item{
  display:flex; align-items:center; gap:.85rem; width:100%;
  font: inherit; font-size:1rem; font-weight:600; text-align:left;
  background:none; border:0; cursor:pointer; color: var(--fg);
  padding:.72rem .6rem;
  border-radius: var(--r-sm);
  transition: background .16s ease, color .16s ease;
}
.vrs-mobile__item:hover,
.vrs-mobile__item:active{ background: var(--surface-2); color: var(--brand) }

/* Quadradinho do ícone, na cor do item */
.vrs-mobile__ico{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  border-radius:10px;
  background: color-mix(in srgb, var(--c1, var(--brand)) 13%, transparent);
  color: var(--c1, var(--brand));
  transition: background .16s ease;
}
.vrs-mobile__ico svg{ width:18px; height:18px }
.vrs-mobile__item:hover .vrs-mobile__ico{
  background: color-mix(in srgb, var(--c1, var(--brand)) 22%, transparent);
}

.vrs-mobile__chev{
  margin-left:auto; width:17px; height:17px; flex:none;
  color: var(--muted); opacity:.55;
  transition: transform .18s ease, opacity .18s ease;
}
.vrs-mobile__item:hover .vrs-mobile__chev{ transform: translateX(3px); opacity:1 }

.vrs-mobile__sep{
  height:1px; background: var(--line);
  margin:.5rem .6rem;
}

.vrs-mobile .vrs-btn--primary{ width:100%; padding-block:.85rem; font-size:1rem }

/* Linha do tema, dentro do painel */
.vrs-mobile__tema{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-top:1rem; padding:.7rem .6rem .2rem;
}
.vrs-mobile__tema span{ font-size:.94rem; font-weight:600; color: var(--fg-soft) }

/* ===== 7. HERO =========================================================== */

.vrs-hero{
  position:relative; overflow:hidden;
  padding-block: clamp(48px,6.5vw,88px) clamp(56px,7vw,96px);
  background:
    radial-gradient(760px 460px at 88% 4%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%),
    radial-gradient(680px 420px at 2% 96%, color-mix(in srgb, #4f7cff 12%, transparent), transparent 62%);
}

.vrs-hero__in{
  display:grid; gap: clamp(38px,5vw,60px);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:1024px){
  .vrs-hero__in{ grid-template-columns: 1.02fr .98fr }
}

.vrs-hero__title{
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  letter-spacing:-.032em;
  margin-bottom:1.1rem;
}
.vrs-hero__title em{
  font-style:normal;
  background: linear-gradient(100deg, var(--brand), #ff9d3f 55%, #ffb765);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.vrs-hero__lead{
  color: var(--muted);
  font-size: clamp(1.03rem, 1.35vw, 1.16rem);
  max-width: 54ch;
  margin-bottom:1.7rem;
}
.vrs-hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:2rem }

/* Faixa de credibilidade */
.vrs-trust{
  display:flex; flex-wrap:wrap; gap:.55rem 1.5rem;
  padding-top:1.4rem; border-top:1px solid var(--line);
}
.vrs-trust li{
  list-style:none;
  display:flex; align-items:center; gap:.45rem;
  font-size:.9rem; font-weight:550; color: var(--fg-soft);
}
.vrs-trust svg{ width:16px; height:16px; color: var(--brand); flex:none }

/* --- Mockup de painel em HTML/CSS (sem imagem) --- */
.vrs-mock{
  position:relative;
  border-radius: var(--r-xl);
  border:1px solid var(--line);
  background: linear-gradient(168deg, var(--navy), var(--navy-2));
  box-shadow: 0 30px 70px rgba(10,14,42,.30), 0 4px 12px rgba(10,14,42,.16);
  padding:.9rem;
  overflow:hidden;
}
.vrs-mock::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(420px 200px at 88% -6%, rgba(255,106,0,.22), transparent 62%);
}
.vrs-mock__bar{ display:flex; align-items:center; gap:.4rem; padding:.15rem .3rem .75rem }
.vrs-mock__bar i{ width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,.22) }
.vrs-mock__bar i:first-child{ background:#ff5f57 }
.vrs-mock__bar i:nth-child(2){ background:#febc2e }
.vrs-mock__bar i:nth-child(3){ background:#28c840 }
.vrs-mock__bar span{
  margin-left:auto; font-size:.72rem; letter-spacing:.02em;
  color: rgba(255,255,255,.5);
}

.vrs-mock__body{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-radius: var(--r-lg);
  padding: clamp(12px,2vw,18px);
  display:grid; gap:.8rem;
}

.vrs-mock__kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem }
.vrs-mock__kpi{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  border-radius: var(--r-sm);
  padding:.65rem .7rem;
}
.vrs-mock__kpi small{
  display:block; font-size:.68rem; letter-spacing:.03em;
  color: rgba(255,255,255,.55); margin-bottom:.2rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vrs-mock__kpi b{ font-size: clamp(.98rem,1.7vw,1.2rem); color:#fff; letter-spacing:-.02em }
.vrs-mock__kpi b.up{ color:#4ade80 }

/* Grafico de barras puramente CSS */
.vrs-mock__chart{
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  border-radius: var(--r-sm);
  padding:.75rem .8rem .6rem;
}
.vrs-mock__chart header{
  display:flex; align-items:center; justify-content:space-between;
  font-size:.72rem; color: rgba(255,255,255,.55); margin-bottom:.6rem;
}
.vrs-mock__chart header b{ color:#fff; font-size:.78rem; font-weight:650 }
.vrs-mock__bars{ display:flex; align-items:flex-end; gap:.34rem; height:82px }
.vrs-mock__bars i{
  flex:1; border-radius:4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--brand), #ff9a3d);
  opacity:.55;
  transform-origin: bottom;
  animation: mock-grow .7s cubic-bezier(.2,.7,.3,1) backwards;
}
.vrs-mock__bars i:nth-last-child(-n+3){ opacity:1 }
@keyframes mock-grow{ from{ transform: scaleY(.15); opacity:0 } }

/* Lista de eventos (mostra a IA trabalhando) */
.vrs-mock__feed{ display:grid; gap:.4rem }
.vrs-mock__ev{
  display:flex; align-items:center; gap:.55rem;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius: var(--r-sm);
  padding:.5rem .65rem;
  font-size:.78rem; color: rgba(255,255,255,.82);
}
.vrs-mock__ev i{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:#4ade80;
  box-shadow:0 0 0 3px rgba(74,222,128,.16);
}
.vrs-mock__ev i.ai{ background: var(--brand); box-shadow:0 0 0 3px rgba(255,106,0,.18) }
.vrs-mock__ev b{ color:#fff; font-weight:600 }
.vrs-mock__ev span{ margin-left:auto; color: rgba(255,255,255,.42); font-size:.7rem; flex:none }

/* Selo flutuante */
.vrs-mock__badge{
  position:absolute; right: clamp(-6px,1vw,10px); bottom: clamp(14px,3vw,26px);
  display:flex; align-items:center; gap:.5rem;
  background: var(--surface);
  border:1px solid var(--line-2);
  border-radius: var(--r);
  padding:.6rem .85rem;
  box-shadow: var(--shadow-2);
  font-size:.82rem; font-weight:650; color: var(--fg);
}
.vrs-mock__badge svg{ width:18px; height:18px; flex:none }

/* ===== 8. CARDS ========================================================== */

.vrs-card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px,2.4vw,26px);
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.vrs-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-2);
}
.vrs-card h3{ font-size:1.12rem; margin-bottom:.5rem }
.vrs-card p{ color: var(--muted) }

.vrs-section--deep .vrs-card{
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.11);
  box-shadow:none;
}
.vrs-section--deep .vrs-card:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
}
.vrs-section--deep .vrs-card p{ color: var(--on-deep-mut) }

.vrs-grid{
  display:grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

/* ===== 9. SEGMENTOS (verticais) ========================================== */

.vrs-verticals{
  display:grid; gap: var(--gap);
  grid-template-columns:1fr;
}
@media (min-width:700px){ .vrs-verticals{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .vrs-verticals{ grid-template-columns:repeat(3,1fr) } }

.vrs-vert{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  isolation:isolate;
}
/* Halo na cor do segmento, definida por --c1/--c2 no HTML */
.vrs-vert::before{
  content:""; position:absolute; z-index:-1;
  inset:-40% 40% 55% -25%;
  background: radial-gradient(circle at 40% 45%, var(--c1), transparent 62%);
  opacity:.13;
  transition: opacity .3s ease;
}
.vrs-vert:hover::before{ opacity:.24 }

.vrs-vert__ico{
  width:54px; height:54px; flex:none;
  display:grid; place-items:center;
  border-radius:15px;
  background: linear-gradient(140deg, var(--c1), var(--c2));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--c1) 38%, transparent);
  margin-bottom:1rem;
}
.vrs-vert__ico svg{ width:27px; height:27px; color:#fff }

.vrs-vert h3{ font-size:1.18rem; margin-bottom:.45rem }
.vrs-vert__desc{ color: var(--muted); font-size:.96rem; margin-bottom:1rem }

.vrs-vert__list{ list-style:none; margin:0 0 1.2rem; padding:0; display:grid; gap:.5rem }
.vrs-vert__list li{
  display:flex; gap:.55rem; align-items:flex-start;
  font-size:.91rem; color: var(--fg-soft); line-height:1.5;
}
.vrs-vert__list li::before{
  content:""; flex:none; margin-top:.42rem;
  width:7px; height:7px; border-radius:50%;
  background: linear-gradient(140deg, var(--c1), var(--c2));
}
.vrs-vert__foot{ margin-top:auto }
.vrs-vert__tag{
  display:inline-block;
  font-size:.76rem; font-weight:700; letter-spacing:.02em;
  color: var(--c1);
  background: color-mix(in srgb, var(--c1) 11%, transparent);
  border:1px solid color-mix(in srgb, var(--c1) 26%, transparent);
  padding:.3rem .65rem; border-radius:999px;
}
:root[data-theme="dark"] .vrs-vert__tag{ color: var(--c2) }

/* ===== 10. BLOCO DE IA =================================================== */

.vrs-ai{
  display:grid; gap: clamp(30px,4vw,54px);
  grid-template-columns:1fr; align-items:start;
}
@media (min-width:1024px){ .vrs-ai{ grid-template-columns:.92fr 1.08fr } }

.vrs-ai__grid{ display:grid; gap:.9rem; grid-template-columns:1fr }
@media (min-width:620px){ .vrs-ai__grid{ grid-template-columns:repeat(2,1fr) } }

.vrs-ai__card{
  background: rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.11);
  border-radius: var(--r-lg);
  padding:1.3rem;
  transition: background .22s ease, border-color .22s ease, transform .2s ease;
}
.vrs-ai__card:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-3px);
}
.vrs-ai__ico{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background: linear-gradient(140deg, var(--c1), var(--c2));
  margin-bottom:.85rem;
}
.vrs-ai__ico svg{ width:23px; height:23px; color:#fff }
.vrs-ai__card h3{ font-size:1.03rem; margin-bottom:.4rem; color:#fff }
.vrs-ai__card p{ font-size:.9rem; color: var(--on-deep-mut); line-height:1.55 }

/* ===== 11. SERVICOS / PASSOS ============================================= */

.vrs-steps{ counter-reset: step; display:grid; gap: var(--gap) }
@media (min-width:640px){ .vrs-steps{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1100px){ .vrs-steps{ grid-template-columns:repeat(4,1fr) } }

.vrs-step{ position:relative; counter-increment: step }
.vrs-step::before{
  content: counter(step, decimal-leading-zero);
  display:block;
  font-size:1.85rem; font-weight:800; letter-spacing:-.03em;
  line-height:1;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:.7rem;
}

/* ===== 12. METODOLOGIA (linha do tempo) ================================== */

.vrs-timeline{ display:grid; gap: clamp(20px,3vw,30px); grid-template-columns:1fr; position:relative }
@media (min-width:900px){
  .vrs-timeline{ grid-template-columns:repeat(4,1fr) }
  .vrs-timeline::before{
    content:""; position:absolute; top:19px; left:6%; right:6%; height:2px;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--brand) 55%, transparent),
      color-mix(in srgb, var(--brand) 18%, transparent));
  }
}
.vrs-tl{ position:relative; padding-top:0 }
.vrs-tl__dot{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background: var(--bg);
  border:2px solid var(--brand);
  color: var(--brand);
  font-weight:800; font-size:.95rem;
  margin-bottom:1rem;
  position:relative; z-index:1;
}
.vrs-section--soft .vrs-tl__dot{ background: var(--bg-soft) }
.vrs-tl h3{ font-size:1.05rem; margin-bottom:.4rem }
.vrs-tl p{ color: var(--muted); font-size:.94rem }

/* ===== 13. TECNOLOGIAS =================================================== */

.tech-grid{ display:grid; gap: var(--gap); grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)) }
.tech-card h3{ font-size:1.02rem; margin-bottom:.9rem }
.tech-icons{ display:flex; flex-wrap:wrap; gap:1.1rem; align-items:center; margin-bottom:.9rem }
.tech-icon{
  width:34px; height:34px; object-fit:contain;
  transition: transform .25s ease;
}
.tech-icon:hover{ transform: translateY(-3px) scale(1.08) }
.tech-card p{ font-size:.9rem }

/* Icones monocromaticos: no tema claro escurecem, no escuro clareiam. */
.tech-icon{ filter: brightness(0) saturate(100%) opacity(.72) }
.tech-icon:hover{ filter:none }
:root[data-theme="dark"] .tech-icon{ filter: brightness(0) invert(1) opacity(.72) }
:root[data-theme="dark"] .tech-icon:hover{ filter:none }

/* ===== 14. SEGURANCA ===================================================== */

.vrs-cols{ display:grid; gap: clamp(10px,2vw,20px) clamp(20px,4vw,48px); grid-template-columns:1fr }
@media (min-width:760px){ .vrs-cols{ grid-template-columns:repeat(2,1fr) } }

.vrs-list{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem }
.vrs-list li{
  display:flex; gap:.65rem; align-items:flex-start;
  font-size:.95rem; line-height:1.5;
}
.vrs-list li svg{ width:18px; height:18px; flex:none; margin-top:.18rem; color: var(--brand) }
.vrs-section--deep .vrs-list li{ color: var(--on-deep) }
.vrs-section--deep .vrs-list li svg{ color: var(--brand-2) }

/* ===== 15. NUMEROS + DADOS LEGAIS ======================================== */

.vrs-about{ display:grid; gap: clamp(26px,4vw,48px); grid-template-columns:1fr }
@media (min-width:1024px){ .vrs-about{ grid-template-columns:1.15fr .85fr } }

.vrs-stats{ display:grid; gap:.9rem; grid-template-columns:repeat(2,1fr); margin-top:1.6rem }
@media (min-width:560px){ .vrs-stats{ grid-template-columns:repeat(4,1fr) } }
.vrs-stat{ padding:1.1rem }
.vrs-stat__n{
  font-size: clamp(1.5rem,2.6vw,1.95rem);
  letter-spacing:-.03em;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:.15rem;
}
.vrs-stat p{ font-size:.86rem; line-height:1.4 }

.vrs-legal{ display:grid; gap:.9rem }
.kv{ display:grid; gap:.1rem; padding-bottom:.75rem; border-bottom:1px solid var(--line) }
.kv:last-child{ border-bottom:0; padding-bottom:0 }
.kv span{ font-size:.78rem; text-transform:uppercase; letter-spacing:.07em; color: var(--muted) }
.kv strong{ font-weight:650; font-size:.97rem; word-break:break-word }
.vrs-micro{ font-size:.8rem; color: var(--muted); margin-top:1rem }

/* ===== 16. FAQ (acordeao) ================================================ */

.vrs-faq__list{ display:grid; gap:.8rem; max-width:900px; margin-inline:auto }

.vrs-faq__item{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--r);
  overflow:hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.vrs-faq__item[open]{ border-color: color-mix(in srgb, var(--brand) 40%, transparent); box-shadow: var(--shadow-1) }

.vrs-faq__q{
  display:flex; align-items:center; gap:1rem;
  padding:1.05rem 1.25rem;
  cursor:pointer; list-style:none;
  font-weight:650; font-size:1.02rem; line-height:1.4;
}
.vrs-faq__q::-webkit-details-marker{ display:none }
.vrs-faq__q:hover{ color: var(--brand) }
.vrs-faq__q svg{
  width:20px; height:20px; flex:none; margin-left:auto;
  color: var(--brand);
  transition: transform .25s ease;
}
.vrs-faq__item[open] .vrs-faq__q svg{ transform: rotate(45deg) }

.vrs-faq__a{
  padding:0 1.25rem 1.25rem;
  color: var(--muted);
  font-size:.96rem; line-height:1.65;
  max-width: 78ch;
}

/* ===== 17. CONTATO ======================================================= */

.vrs-contact{ display:grid; gap: clamp(26px,4vw,48px); grid-template-columns:1fr; align-items:start }
@media (min-width:1024px){ .vrs-contact{ grid-template-columns:.92fr 1.08fr } }

.vrs-contact__lines{ display:grid; gap:.85rem; margin-top:1.6rem }
.vrs-contact__lines a,
.vrs-contact__lines p{
  display:flex; align-items:center; gap:.7rem;
  font-size:1rem; color: var(--fg-soft);
}
.vrs-contact__lines svg{ width:19px; height:19px; color: var(--brand); flex:none }
.vrs-contact__lines a:hover{ color: var(--brand) }

.vrs-form{ display:grid; gap:.85rem }
.vrs-field{ display:grid; gap:.35rem }
.vrs-field > label{
  font-size:.83rem; font-weight:650; letter-spacing:.01em; color: var(--fg-soft);
}
.vrs-phone{ display:grid; grid-template-columns:minmax(0,150px) 1fr; gap:.5rem }

.vrs-input,
select.vrs-input,
textarea.vrs-input{
  width:100%;
  font: inherit; font-size:.97rem;
  color: var(--fg);
  background: var(--surface-2);
  border:1px solid var(--line-2);
  border-radius: var(--r);
  padding:.8rem .95rem;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
  appearance:none;
}
.vrs-input::placeholder{ color: color-mix(in srgb, var(--muted) 80%, transparent) }
.vrs-input:hover{ border-color: color-mix(in srgb, var(--brand) 34%, var(--line-2)) }
.vrs-input:focus{
  outline:none;
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring);
}
textarea.vrs-input{ resize:vertical; min-height:120px }

select.vrs-input{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6a80' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;
  background-position: right .75rem center;
  background-size:15px;
  padding-right:2.2rem;
}
:root[data-theme="dark"] select.vrs-input{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397a1b8' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
}

.vrs-form__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:.3rem }
.vrs-form__note{ font-size:.83rem; color: var(--muted) }

/* Retorno do envio, no lugar do alert() */
.vrs-form__msg{
  display:none;
  border-radius: var(--r);
  padding:.85rem 1rem;
  font-size:.93rem; font-weight:550;
  border:1px solid transparent;
}
.vrs-form__msg.is-on{ display:block }
.vrs-form__msg.is-ok{
  color:#166534; background:#dcfce7; border-color:#86efac;
}
.vrs-form__msg.is-err{
  color:#991b1b; background:#fee2e2; border-color:#fca5a5;
}
:root[data-theme="dark"] .vrs-form__msg.is-ok{ color:#86efac; background:rgba(34,197,94,.12); border-color:rgba(134,239,172,.35) }
:root[data-theme="dark"] .vrs-form__msg.is-err{ color:#fca5a5; background:rgba(239,68,68,.12); border-color:rgba(252,165,165,.35) }

.vrs-btn.is-loading{ pointer-events:none; opacity:.75 }

/* ===== 18. CONTEUDO INJETADO PELO script.js ============================== */
/* Mantem as mesmas classes que loadSites()/loadProofs()/makeCarousel() usam. */

.vrs-carousel{
  --card-w: clamp(268px, 30vw, 340px);
  display:flex; gap: var(--gap);
  overflow-x:auto; padding-bottom:.5rem;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.vrs-carousel::-webkit-scrollbar{ display:none }
.vrs-carousel > *{ flex:0 0 var(--card-w); scroll-snap-align:start }

.vrs-card--site{ display:flex; flex-direction:column; gap:.75rem; padding:1rem }
.vrs-card__title{ font-size:1.02rem; margin:0 }

.vrs-thumb{
  width:100%; height: clamp(150px,20vw,190px);
  object-fit:contain;
  background: var(--surface-2);
  border:1px solid var(--line);
  border-radius: var(--r);
  padding:8px;
}
.vrs-thumb--ph{
  display:grid; place-items:center;
  color: var(--muted); font-weight:650; padding:1rem; text-align:center;
}

.vrs-logo{
  width:44px; height:44px; flex:none;
  object-fit:contain; border-radius:11px;
  background: var(--surface-2); border:1px solid var(--line); padding:5px;
}
.vrs-logo--placeholder{ display:grid; place-items:center }
.row.gap{ gap:.8rem; margin-bottom:.7rem }

.vrs-reveal{
  opacity:0; transform: translateY(14px);
  animation: vrs-show .5s cubic-bezier(.2,.6,.2,1) var(--d,0ms) forwards;
}
@keyframes vrs-show{ to{ opacity:1; transform:none } }

/* Elementos que so aparecem ao entrar na tela. A classe .js e adicionada
   pelo script inline do <head>: sem JS o conteudo permanece visivel. */
.js [data-reveal]:not(.vrs-reveal){ opacity:0; transform: translateY(18px) }

/* ===== 19. RODAPE ======================================================== */

.vrs-footer{
  background: var(--navy);
  color: var(--on-deep);
  padding-block: clamp(40px,5vw,60px) 1.6rem;
}
.vrs-footer__top{
  display:grid; gap:2rem; grid-template-columns:1fr;
  padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.12);
}
@media (min-width:820px){ .vrs-footer__top{ grid-template-columns:1.4fr 1fr 1fr } }

.vrs-footer__brand{ display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem }
.vrs-footer__brand span{ font-weight:800; font-size:1.15rem; color:#fff }
.vrs-footer__about{ color: var(--on-deep-mut); font-size:.92rem; max-width:42ch }

.vrs-footer h4{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.08em;
  color:#fff; margin-bottom:.9rem;
}
.vrs-footer__links{ display:grid; gap:.55rem }
.vrs-footer__links a,
.vrs-footer__links button{
  font: inherit; font-size:.92rem; text-align:left;
  background:none; border:0; padding:0; cursor:pointer;
  color: var(--on-deep-mut);
  transition: color .16s ease;
}
.vrs-footer__links a:hover,
.vrs-footer__links button:hover{ color: var(--brand-2) }

.vrs-footer__bottom{
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem;
  align-items:center; justify-content:space-between;
  padding-top:1.6rem;
  font-size:.86rem; color: var(--on-deep-mut);
}
.vrs-footer__bottom a{ color: var(--on-deep-mut) }
.vrs-footer__bottom a:hover{ color: var(--brand-2) }

/* ===== 20. BANNER DE CONSENTIMENTO ======================================= */

#vrs-consent.vrc-consent{
  position:fixed; inset:auto 16px 16px 16px; z-index:9999;
  display:none;
  align-items:center; gap:1.1rem;
  max-width:940px; margin-inline:auto;
  padding:1.1rem 1.25rem;
  background: var(--surface);
  color: var(--fg);
  border:1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  font-size:.92rem; line-height:1.55;
  animation: vrc-in .4s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes vrc-in{ from{ transform: translateY(14px); opacity:0 } }
#vrs-consent .vrc-txt{ flex:1; min-width:230px; color: var(--fg-soft) }
/* Dois caminhos lado a lado: Configurar de um lado, Aceitar do outro. */
#vrs-consent .vrc-actions{ display:flex; align-items:center; gap:.6rem; flex:none }
#vrs-consent .vrc-btn{
  font: inherit; font-weight:650; font-size:.9rem;
  padding:.65rem 1.1rem;
  border-radius: var(--r-sm);
  border:1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--fg);
  cursor:pointer; white-space:nowrap;
  transition: background .18s ease, transform .14s ease;
}
#vrs-consent .vrc-btn:hover{ transform: translateY(-1px); background: var(--surface-3) }
#vrs-consent .vrc-btn-primary{
  background: linear-gradient(135deg, var(--brand), #ff8524);
  border-color:transparent; color: var(--brand-ink);
  box-shadow: var(--shadow-brand);
}
@media (max-width:700px){
  #vrs-consent.vrc-consent{ flex-direction:column; align-items:stretch; inset:auto 12px 12px 12px }
  #vrs-consent .vrc-actions{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem }
  #vrs-consent .vrc-btn{ width:100%; min-width:0 }
}

/* ===== 20b. BOTAO FLUTUANTE DE CONTATO =================================== */

.vrs-fab{
  position:fixed; right:16px; bottom:16px; z-index:9990;
  display:inline-flex; align-items:center; gap:.6rem;
  height:56px; padding:0 18px 0 16px;
  border-radius:999px; border:0;
  background:#25d366; color:#0b3d20;
  font: inherit; font-weight:700; font-size:.95rem;
  box-shadow: 0 10px 30px rgba(37,211,102,.35), 0 2px 8px rgba(0,0,0,.18);
  cursor:pointer; text-decoration:none;
  transform: translateY(16px) scale(.9); opacity:0; visibility:hidden;
  transition: transform .3s cubic-bezier(.2,.8,.25,1), opacity .25s ease,
              visibility .3s, bottom .3s ease, box-shadow .2s ease;
}
.vrs-fab.is-on{ transform:none; opacity:1; visibility:visible }
.vrs-fab:hover{ box-shadow: 0 14px 38px rgba(37,211,102,.45), 0 2px 8px rgba(0,0,0,.2) }
.vrs-fab svg{ width:26px; height:26px; flex:none }

/* Em telas estreitas vira só o círculo, para não tapar conteúdo */
@media (max-width: 520px){
  .vrs-fab{ width:56px; padding:0; justify-content:center }
  .vrs-fab .vrs-fab__txt{ display:none }
}

/* Sobe enquanto o banner de cookies estiver na tela */
body.tem-consentimento .vrs-fab{ bottom: 172px }
@media (max-width: 700px){ body.tem-consentimento .vrs-fab{ bottom: 232px } }

/* ===== 20c. PREFERENCIAS DE COOKIES ====================================== */

.vrc-prefs{
  position:fixed; inset:0; z-index:10000;
  display:grid; place-items:center;
  padding:16px;
  background: color-mix(in srgb, var(--navy) 62%, transparent);
  backdrop-filter: blur(3px);
  opacity:0; visibility:hidden;
  transition: opacity .24s ease, visibility .24s;
}
.vrc-prefs.is-open{ opacity:1; visibility:visible }

.vrc-prefs__card{
  width:100%; max-width:560px;
  max-height: min(88dvh, 720px); overflow-y:auto; overscroll-behavior:contain;
  background: var(--surface);
  border:1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: clamp(20px,4vw,28px);
  transform: translateY(14px) scale(.98);
  transition: transform .28s cubic-bezier(.2,.8,.25,1);
}
.vrc-prefs.is-open .vrc-prefs__card{ transform:none }

.vrc-prefs__card h2{ font-size:1.25rem; margin-bottom:.5rem }
.vrc-prefs__intro{ color: var(--muted); font-size:.93rem; margin-bottom:1.3rem }

.vrc-cat{
  display:flex; align-items:flex-start; gap:1rem;
  padding:1rem 0; border-top:1px solid var(--line);
}
.vrc-cat__txt{ flex:1; min-width:0 }
.vrc-cat__txt strong{ display:block; font-size:.99rem; margin-bottom:.2rem }
.vrc-cat__txt span{ font-size:.87rem; color: var(--muted); line-height:1.5 }
.vrc-cat__fixo{
  font-size:.78rem; font-weight:700; color: var(--muted);
  white-space:nowrap; padding-top:.35rem;
}

/* Interruptor */
.vrc-switch{ position:relative; flex:none; width:48px; height:28px; margin-top:.15rem }
.vrc-switch input{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; opacity:0; cursor:pointer; z-index:1;
}
.vrc-switch i{
  position:absolute; inset:0; border-radius:999px;
  background: var(--surface-3);
  border:1px solid var(--line-2);
  transition: background .2s ease, border-color .2s ease;
}
.vrc-switch i::after{
  content:""; position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition: transform .22s cubic-bezier(.2,.8,.25,1);
}
.vrc-switch input:checked + i{
  background: var(--brand); border-color: var(--brand);
}
.vrc-switch input:checked + i::after{ transform: translateX(20px) }
.vrc-switch input:focus-visible + i{ box-shadow:0 0 0 4px var(--ring) }

.vrc-prefs__foot{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-top:1.4rem; padding-top:1.2rem;
  border-top:1px solid var(--line);
}
.vrc-prefs__foot .vrs-btn{ flex:1 1 auto; justify-content:center }

/* ===== 21. PAGINAS DE ERRO =============================================== */

.vrs-err{
  min-height:76vh;
  display:grid; place-items:center; text-align:center;
  padding-block: clamp(50px,8vw,90px);
}
.vrs-err__code{
  font-size: clamp(4.5rem,15vw,9rem); font-weight:800; line-height:.9;
  letter-spacing:-.05em;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:1rem;
}
.vrs-err h1{ font-size: clamp(1.5rem,3vw,2.1rem); margin-bottom:.8rem }
.vrs-err p{ color: var(--muted); max-width:52ch; margin-inline:auto; margin-bottom:2rem }
.vrs-err__actions{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center }

/* ===== 22. PREFERENCIAS DO USUARIO ====================================== */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  /* O letreiro simplesmente para na primeira frase, sem saltar */
  .vrs-brand__track{ animation:none; transform:none }
}

/* Barra de rolagem discreta */
*::-webkit-scrollbar{ width:11px; height:11px }
*::-webkit-scrollbar-track{ background:transparent }
*::-webkit-scrollbar-thumb{
  background: var(--line-2);
  border-radius:999px;
  border:3px solid transparent;
  background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{ background: var(--muted); background-clip:content-box }

/* Impressao: forca claro e remove cromo desnecessario */
@media print{
  .vrs-nav,.vrs-mobile,#vrs-consent,.vrs-mock__badge{ display:none !important }
  body.vrs-body{ background:#fff; color:#000 }
}

/* Campo isca do anti-spam: precisa existir no HTML e ser inalcancavel
   para quem enxerga. display:none seria ignorado por alguns bots. */
.vrs-hp{
  position:absolute !important;
  left:-9999px !important; top:auto !important;
  width:1px !important; height:1px !important;
  overflow:hidden !important;
}

/* Widget do Turnstile: respira junto com os campos do formulario */
.cf-turnstile{ margin-block:.2rem }