/* RB Vector Capital LLC — site institucional
   Tokens, keyframes, media queries e pseudo-elementos.
   Todo o resto do estilo vive inline no index.html, como no design original. */

html { scroll-behavior: smooth; scroll-padding-top: 92px; }
html, body { margin: 0; padding: 0; background: #08090a; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
::selection { background: #b9c0c9; color: #08090a; }

/* Raiz: `clip` e não `hidden`. `hidden` criaria um scroll container e quebraria
   as placas sticky da seção 02. O protótipo usava `hidden` por rodar em iframe. */
html, #rbv-root { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html, #rbv-root { overflow-x: hidden; }
}

/* Foco visível */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[data-lang-toggle]:focus-visible {
  outline: 2px solid #b9c0c9;
  outline-offset: 3px;
}

.t-pt { display: none; }
[data-lang="pt"] .t-pt { display: inline; }
[data-lang="pt"] .t-en { display: none; }
[data-lang="pt"] .ls-en { color: #5e625f !important; }
[data-lang="pt"] .ls-pt { color: #f6f5f0 !important; }

details.rbv-menu summary::-webkit-details-marker { display: none; }
details.rbv-menu[open] .rbv-bar1 { transform: translateY(3.75px) rotate(45deg); }
details.rbv-menu[open] .rbv-bar2 { transform: translateY(-3.75px) rotate(-45deg); }
.rbv-menu { display: none; }

@keyframes rbv-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes v-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes v-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes v-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes v-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes rbv-clip { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -8% 0); } }
@keyframes rbv-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pg-in { 0%, 4% { opacity: 0; } 16%, 84% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes zg-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes rbv-caret { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes tm-scan { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateY(118px); opacity: 0; } }

/* `!important` obrigatorio: o shorthand `animation` inline em #rbv-marq define
   animation-play-state:running e venceria esta regra sem ele. */
.rbv-marq-row:hover .rbv-marq-track { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rbv-marq-track { animation: none !important; }
  [data-hero-in] { animation: none !important; opacity: 1 !important; }
  .rbv-hero-fig svg * { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; transform: none !important; }
  [data-anim] [data-b] { transform: none !important; }
  [data-anim] [data-r] { opacity: 1 !important; transform: none !important; }
  [data-anim] [data-d] { opacity: 1 !important; stroke-dashoffset: 0 !important; }
  .gx-pg-in, .gx-zg-pulse, .gx-caret, .gx-tm-scan { animation: none !important; }
}

@media (max-width: 980px) {
  .rbv-nav, .rbv-actions { display: none !important; }
  .rbv-hero-grid { grid-template-columns: 1fr !important; }
  .rbv-hero-fig { display: none !important; }
  .rbv-menu { display: block !important; }
  .rbv-2col { grid-template-columns: 1fr !important; gap: 56px !important; }
  .rbv-4col { grid-template-columns: 1fr 1fr !important; }
  .rbv-ch { grid-template-columns: 1fr !important; }
  .rbv-plate { position: static !important; }
  .rbv-foot-top { grid-template-columns: 1fr !important; gap: 28px !important; }
  .rbv-foot-nav { justify-content: flex-start !important; }
  .rbv-foot-meta { grid-template-columns: 1fr !important; gap: 8px !important; }
  .rbv-foot-meta span { text-align: left !important; }
}

@media (max-width: 600px) {
  .rbv-shell { width: calc(100vw - 32px) !important; }
  .rbv-sec { padding-top: 88px !important; padding-bottom: 88px !important; }
  .rbv-4col { grid-template-columns: 1fr !important; }
  .rbv-btn { flex: 1 1 auto; justify-content: center; }
  .rbv-facts { grid-template-columns: 1fr 1fr !important; }
}

/* ---------------------------------------------------------------------------
   gx1–gx11 — o protótipo declarava hovers e pseudo-elementos em atributos
   `style-hover` / `style-before` / `style-after`. Aqui viram CSS real; o
   `!important` é necessário para vencer o style inline do próprio elemento.
   --------------------------------------------------------------------------- */

/* gx1 — links que clareiam no hover (nav, redes, footer) */
.gx1:hover { color: #f6f5f0 !important; }

/* gx2 — link de domínio: borda inferior acende em aço */
.gx2:hover { border-color: #b9c0c9 !important; }

/* gx3 — linha do e-mail de contato */
.gx3:hover { padding-left: 12px !important; padding-right: 12px !important; border-color: #b9c0c9 !important; }

/* gx4 — botão secundário do hero */
.gx4:hover { border-color: #b9c0c9 !important; background: rgba(246,245,240,0.04) !important; transform: translateY(-2px) !important; }

/* gx5 — coluna da seção 03 clareia no hover */
.gx5:hover { background: rgba(8,9,10,0.025) !important; }

/* gx6 — botão primário do hero */
.gx6:hover { background: #b9c0c9 !important; transform: translateY(-2px) !important; }

/* gx7 — marcador das listas "no que nos apoiamos" (traço 12px aço) */
.gx7::before { content: ''; position: absolute; left: 0; top: 23px; width: 12px; height: 1px; background: #b9c0c9; }

/* gx8 — marcador das listas "o que não fazemos" (traço 8px apagado) */
.gx8::before { content: ''; position: absolute; left: 0; top: 23px; width: 8px; height: 1px; background: #5e625f; }

/* gx9 — setinha da régua do hero (Direction / Force / Sense) */
.gx9::after { content: ''; position: absolute; right: -1px; top: -2px; width: 5px; height: 5px; border-top: 1px solid #b9c0c9; border-right: 1px solid #b9c0c9; transform: rotate(45deg); }

/* gx10 — traço do eyebrow em seção escura */
.gx10::after { content: ''; width: 56px; height: 1px; background: rgba(246,245,240,0.12); }

/* gx11 — traço do eyebrow em seção clara */
.gx11::after { content: ''; width: 56px; height: 1px; background: rgba(8,9,10,0.13); }