/* Gerado no build por scripts/webflow-fixes.mjs a partir de webflow-fixes/. Não editar. */
/* academy-arte-stripe-privy (https://app.clickup.com/t/86e3ebwhb) */
/* Carrossel "Caminhos do Produto" (rivool-academy), card "Autocustódia sem complicação".
   A arte é 952x400 (2,4:1) e o card no mobile é retrato (~310x420). Com object-fit: cover
   só o miolo de ~30% da largura aparece ("pe x pr") e a imagem fica ampliada ~3x numa
   tela @3x, daí os logos borrados. Aqui a arte entra inteira, na largura do card (densidade
   ~3 px por px de CSS, nítida até @3x), na parte de cima, com as bordas de cima e de baixo
   esmaecidas no fundo da própria arte (#520029), e o texto continua embaixo.
   O seletor é pelo id do asset no CDN do Webflow: se o designer subir outra arte (por
   exemplo, uma versão própria pro mobile), esta regra deixa de valer sozinha. */
@media screen and (max-width: 849px) {
  html[data-rv-page="rivool-academy"] .rvl3-media:has(> .rvl3-media-img[src*="6a9c65279e715ca773271cd7"]) {
    background-color: #520029;
  }
  html[data-rv-page="rivool-academy"] .rvl3-media-img[src*="6a9c65279e715ca773271cd7"] {
    top: 14%;
    bottom: auto;
    height: auto;
    aspect-ratio: 952 / 400;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%);
  }
}
/* Tablet estreito (768-849): o card já é paisagem (~480x360), mas o cover ainda corta as
   pontas de "stripe" e "privy". A arte inteira cabe no topo, acima do texto. Acima de
   850px o cover mostra os dois logos inteiros e fica como está. */
@media screen and (min-width: 768px) and (max-width: 849px) {
  html[data-rv-page="rivool-academy"] .rvl3-media-img[src*="6a9c65279e715ca773271cd7"] {
    top: 0;
  }
}

/* acordeao-scroll (https://app.clickup.com/t/86e3ebw15) */
/* Acordeão com scroll: o estado inicial (já no primeiro paint, antes do JS) e as transições.
   Posição travada, altura da faixa e item ativo ficam no acordeao-scroll.js. */

/* O bloco tem a altura do conteúdo (.faq3_component.assessor tinha min-height: 85rem). */
[data-rv-acc].faq3_component {
  min-height: 0;
}

/* Linhas começam apagadas e acendem quando são o item ativo. */
[data-rv-acc] [id^="faq-"]:not([id^="faq-a-"]):not([id^="faq-i-"]) {
  opacity: 0.4;
  transition: opacity 0.4s ease;
}
[data-rv-acc] [id^="faq-"]:not([id^="faq-a-"]):not([id^="faq-i-"]).is-open {
  opacity: 1;
}
/* Em /solucoes/escritorios o id está na pergunta e a resposta é irmã dela: acende junto. */
[data-rv-acc] [id^="faq-"]:not([id^="faq-a-"]):not([id^="faq-i-"]) + [id^="faq-a-"] {
  opacity: 0.4;
  transition: opacity 0.4s ease;
}
[data-rv-acc] [id^="faq-"]:not([id^="faq-a-"]):not([id^="faq-i-"]).is-open + [id^="faq-a-"] {
  opacity: 1;
}

/* Acordeão: só a resposta do item ativo fica aberta. Na "lista" todas ficam abertas, sem cortar
   (overflow visível, como o embed deixava: a margem do texto não soma na altura). */
[data-rv-acc="acordeao"] [id^="faq-a-"] {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}
[data-rv-acc="lista"] [id^="faq-a-"] {
  overflow: visible;
}

/* Imagens de cada item empilhadas no mesmo quadro; a do item ativo aparece. O quadro precisa
   ser posicionado: abaixo de 992px o Webflow deixa o wrapper static e a imagem cobria a seção. */
[data-rv-acc] .layout493_image-wrapper.video {
  position: relative;
}
[data-rv-acc] [id^="faq-i-"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
[data-rv-acc] [id^="faq-i-"].is-open {
  opacity: 1;
  z-index: 1;
}

/* Imagem do item dentro dele, logo abaixo do texto aberto (cópia que o JS põe na resposta).
   Só em coluna única; a altura (--rv-acc-imagem-h) o JS calcula pra o bloco travado caber. */
[data-rv-acc] .rv-acc-imagem {
  display: none;
}
@media screen and (max-width: 991px) {
  [data-rv-acc] .layout493_image-wrapper:has([id^="faq-i-"]),
  [data-rv-acc-imagem="unica"] .layout493_image-wrapper {
    display: none;
  }
  [data-rv-acc] .rv-acc-imagem {
    display: block;
    height: var(--rv-acc-imagem-h, 45vh);
    margin-bottom: 20px;
    overflow: hidden;
  }
  [data-rv-acc] .rv-acc-imagem img,
  [data-rv-acc] .rv-acc-imagem video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* .faq3_answer tem opacity .6 (o cinza do texto): passa pro texto, a imagem fica inteira. */
  [data-rv-acc] .faq3_answer:has(> .rv-acc-imagem) {
    opacity: 1;
  }
  [data-rv-acc] .faq3_answer:has(> .rv-acc-imagem) > :not(.rv-acc-imagem) {
    opacity: 0.6;
  }
  /* Rivool Academy: a coluna tem min-height de 85vh e space-between, o que abria um vão entre o
     título e o item 1 quando a imagem desce pra baixo da lista. */
  [data-rv-acc] .hover_content._100 {
    min-height: 0;
  }
  [data-rv-acc] .faq3_list._100 {
    justify-content: flex-start;
  }
  /* Assessor: o grid tem min-height de 85vh (a altura da coluna do mockup no desktop); com o
     mockup dentro do item, sobrava um vazio grande embaixo da lista. */
  [data-rv-acc] .grid.assessor {
    min-height: 0;
  }
}

/* Mockups de tela (/solucoes/assessor): a imagem aparece inteira. No desktop o quadro tinha
   85vh de altura e a imagem (quase quadrada) era cortada nas laterais pelo object-fit: cover;
   agora o quadro tem a proporção da imagem (--rv-acc-proporcao, do JS), até caber na tela
   abaixo do header (72px + 48px de respiro + 16px). contain garante que nada é cortado. */
[data-rv-acc-encaixe="inteira"] [id^="faq-i-"],
[data-rv-acc-encaixe="inteira"] .rv-acc-imagem img {
  object-fit: contain;
}
@media screen and (min-width: 992px) {
  [data-rv-acc-encaixe="inteira"] .w-layout-grid {
    min-height: 0;
  }
  [data-rv-acc-encaixe="inteira"] .layout493_image-wrapper {
    height: auto;
    align-self: start;
  }
  [data-rv-acc-encaixe="inteira"] .layout493_image-wrapper.video {
    aspect-ratio: var(--rv-acc-proporcao, 1);
    max-height: calc(100vh - 136px);
  }
}

@media screen and (max-width: 767px) {
  [data-rv-acc-mobile="toque"] [id^="faq-"]:not([id^="faq-a-"]):not([id^="faq-i-"]) {
    cursor: pointer;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-rv-acc] [id^="faq-"] {
    transition: none !important;
  }
}

/* cambio-botoes (https://app.clickup.com/t/86e3ebw9w) */
/* "Envie dinheiro" agora é <a> (cambio-botoes.mjs): tira o sublinhado de link e mantém o branco do
   botão, que o CSS do embed definia pensando num <button>. */
html[data-rv-page="produtos/renda-em-dolares"] #cambio a.btn-primario {
  display: block;
  color: #fff;
  text-decoration: none;
}

/* cambio-numeros-mobile (https://app.clickup.com/t/86e3ebw99) */
/* Calculadora de câmbio (#cambio em /produtos/renda-em-dolares). No mobile, três paddings empilhados
   (card cinza 32px, .container do embed 24px, caixa do valor 24px) sobravam ~90px pro número ao lado
   do seletor de moeda: "1.000,00" já cortava. O <style> do embed vem depois deste CSS no documento,
   por isso o data-rv-page e o #cambio na frente de cada seletor. */

/* O campo fica com exatamente o que sobra ao lado do seletor. O width: 100% do embed continua: com
   largura automática o input (20 caracteres) empurraria o card cinza pra fora da tela. */
html[data-rv-page="produtos/renda-em-dolares"] #cambio .caixa-moeda input {
  flex: 1 1 0;
  min-width: 0;
}

@media screen and (max-width: 767px) {
  html[data-rv-page="produtos/renda-em-dolares"] #cambio .flex-block-16 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* O card cinza já dá a margem lateral; o padding do .container do embed só roubava largura. */
  html[data-rv-page="produtos/renda-em-dolares"] #cambio .code-embed .container {
    padding-left: 0;
    padding-right: 0;
  }

  html[data-rv-page="produtos/renda-em-dolares"] #cambio .caixa-moeda {
    gap: 8px;
    padding: 20px 16px;
  }

  /* Seletor de moeda mais compacto: "🇧🇷 BRL ▾" cai de ~85px pra ~70px. */
  html[data-rv-page="produtos/renda-em-dolares"] #cambio .chip-moeda {
    gap: 4px;
    font-size: 1.05rem;
  }

  html[data-rv-page="produtos/renda-em-dolares"] #cambio .chip-moeda .bandeira {
    font-size: 1.2rem;
  }
}

/* Data da cotação abaixo de "1 BRL = 0,19 USD" (texto posto pelo cambio-numeros-mobile.js). A altura
   fica reservada desde o início pra linha não empurrar a calculadora quando a cotação chega. */
html[data-rv-page="produtos/renda-em-dolares"] #cambio .rv-cambio-data {
  min-height: 1.4em;
  margin-top: 4px;
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
  color: var(--muted, #9da2aa);
}

/* carrossel-sem-flash (https://app.clickup.com/t/86e3ebwar) */
/* Carrosséis de cards com foto (rvl-, rvl2-, rvl3-). No mobile só o card ativo aparece,
   então a cor dele (azul/vinho, a mesma dos cards fechados no desktop) só aparece por trás
   da foto enquanto ela carrega ou decodifica. Ali ela vira um tom escuro neutro, perto
   das fotos, e a foto entra com um fade curto em vez de surgir de uma vez. No desktop os
   cards fechados continuam na cor do carrossel. */
@media screen and (max-width: 767px) {
  .rvl-card.is-active,
  .rvl2-card.is-active,
  .rvl3-card.is-active {
    background-color: #231f1c;
  }
}
@media screen and (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .rvl-card.is-active .rvl-media,
  .rvl2-card.is-active .rvl2-media,
  .rvl3-card.is-active .rvl3-media {
    animation: rv-carrossel-foto-entra 0.35s ease-out both;
  }
}
@keyframes rv-carrossel-foto-entra {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* cartao-calculadora-compacta (https://app.clickup.com/t/86e3etf7k) */
/* The embed ships its own <style> inside <body>, which loads after this file, so every
   selector is prefixed with the page + .code-embed-3 to win on specificity. */

/* #6c6f75 is the landing grey (#9da2aa) darkened in the same hue: 5.0:1 on white and
   4.5:1 on the savings tint. */
html[data-rv-page="produtos/cartao-global"] .code-embed-3 {
  --rv-ink: #18171c;
  --rv-grey: #6c6f75;
  --rv-border: #e2e2e2;
  --rv-blue: #3d2eeb;
  --rv-blue-tint: #f3f2fe;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .pagina {
  padding: 0;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .widget {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 12px;
  padding: 24px;
  border-radius: 8px;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .titulo,
html[data-rv-page="produtos/cartao-global"] .code-embed-3 .linha-quantia,
html[data-rv-page="produtos/cartao-global"] .code-embed-3 .rodape {
  grid-column: 1 / -1;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .titulo {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--rv-ink);
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .linha-quantia {
  justify-content: flex-start;
  gap: 12px;
  margin: 4px 0 12px;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .caixa-quantia {
  flex: 0 1 280px;
  min-width: 220px;
  padding: 10px 16px;
  border-radius: 4px;
  transition: border-color 160ms ease;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .caixa-quantia:focus-within {
  border-color: var(--rv-blue);
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .caixa-quantia .prefixo {
  font-size: 1rem;
  color: var(--rv-grey);
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .caixa-quantia input {
  font-size: 1.15rem;
  color: var(--rv-ink);
  font-variant-numeric: tabular-nums;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .atalhos {
  gap: 8px;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .atalho {
  padding: 10px 14px;
  border-radius: 4px;
  font-size: .95rem;
  font-weight: 400;
  color: var(--rv-ink);
  font-variant-numeric: tabular-nums;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .atalho:not(.ativo):hover {
  border-color: var(--rv-ink);
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .atalho.ativo {
  color: #fff;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .divisor {
  display: none;
}

/* Releases the two cost cards into the widget grid, next to the savings card. */
html[data-rv-page="produtos/cartao-global"] .code-embed-3 .linha-comparativo {
  display: contents;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .card-economia,
html[data-rv-page="produtos/cartao-global"] .code-embed-3 .card-comparativo {
  margin: 0;
  padding: 16px 20px 18px;
  border-radius: 4px;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .card-economia {
  background: var(--rv-blue-tint);
  border-color: var(--rv-blue-tint);
}

/* One label wraps to two lines; reserving two lines keeps the numbers aligned. */
html[data-rv-page="produtos/cartao-global"] .code-embed-3 .rot {
  display: block;
  min-height: 2.8em;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--rv-ink);
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .num-grande,
html[data-rv-page="produtos/cartao-global"] .code-embed-3 .num-medio {
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .num-grande {
  font-size: clamp(2rem, 3.2vw, 2.5rem);
  font-weight: 700;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .num-medio {
  font-size: clamp(1.35rem, 2vw, 1.625rem);
  font-weight: 600;
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .desc {
  margin-top: 8px;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--rv-grey);
}

html[data-rv-page="produtos/cartao-global"] .code-embed-3 .rodape {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--rv-border);
  font-size: .72rem;
  line-height: 1.5;
  color: var(--rv-grey);
}

@media (max-width: 900px) {
  html[data-rv-page="produtos/cartao-global"] .code-embed-3 .widget {
    grid-template-columns: 1fr 1fr;
  }

  html[data-rv-page="produtos/cartao-global"] .code-embed-3 .card-economia {
    grid-column: 1 / -1;
  }

    html[data-rv-page="produtos/cartao-global"] .code-embed-3 .card-economia .rot {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  html[data-rv-page="produtos/cartao-global"] .code-embed-3 .widget {
    gap: 8px;
    padding: 16px;
  }

  html[data-rv-page="produtos/cartao-global"] .code-embed-3 .linha-quantia {
    gap: 8px;
    margin-bottom: 8px;
  }

  html[data-rv-page="produtos/cartao-global"] .code-embed-3 .caixa-quantia {
    flex: none;
    min-width: 0;
  }

  html[data-rv-page="produtos/cartao-global"] .code-embed-3 .atalhos {
    flex-wrap: nowrap;
    gap: 6px;
  }

  html[data-rv-page="produtos/cartao-global"] .code-embed-3 .atalho {
    flex: 1 1 0;
    padding: 8px 0;
    text-align: center;
  }

  html[data-rv-page="produtos/cartao-global"] .code-embed-3 .card-economia,
  html[data-rv-page="produtos/cartao-global"] .code-embed-3 .card-comparativo {
    padding: 14px;
  }

  html[data-rv-page="produtos/cartao-global"] .code-embed-3 .num-grande {
    font-size: 2rem;
  }

  html[data-rv-page="produtos/cartao-global"] .code-embed-3 .num-medio {
    font-size: 1.3rem;
  }
}

/* cartao-cards-resolucao (https://app.clickup.com/t/86e3ebw7h) */
/* No mobile o Webflow dá 1,5rem de padding lateral ao texto do card, mas a foto ocupa a
   largura toda: o título ("Fim do IOF...") fica recuado em relação à imagem. No desktop o
   texto já é alinhado à foto (padding só no topo). */
@media screen and (max-width: 767px) {
  html[data-rv-page="produtos/cartao-global"] .sobre_card-content {
    padding-left: 0;
    padding-right: 0;
  }
}

/* cartao-cta-calculadora (https://app.clickup.com/t/86e3ebw26) */
/* CTA "Simular economia no cartão" no card "O dinheiro rende até a hora de gastar" (Cartão Global).
   Cor da classe .link do export; seta com o mesmo desenho da images/Vector-21.svg das setas da home,
   em currentColor pra acompanhar a cor do link. */
html[data-rv-page="produtos/cartao-global"] .rv-link-seta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-family: Figtree, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
}

html[data-rv-page="produtos/cartao-global"] .rv-link-seta:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

html[data-rv-page="produtos/cartao-global"] .rv-link-seta-icone {
  flex: none;
  transition: transform 0.2s ease;
}

html[data-rv-page="produtos/cartao-global"] .rv-link-seta:hover .rv-link-seta-icone {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  html[data-rv-page="produtos/cartao-global"] .rv-link-seta-icone {
    transition: none;
  }
}

/* home-hero-escurecer (https://app.clickup.com/t/86e3ebvy3) */
/* O vídeo da ponte no hero da home deixa pouco contraste com título, subtítulo e botões (no mobile o
   subtítulo passa sobre as luzes da ponte). O embed do vídeo já traz um .content-overlay vazio, sem
   estilo: ele vira um gradiente escuro, mais forte embaixo, onde fica o texto. Fica entre o vídeo e o
   header (z-index 11), e pointer-events: none não deixa ele pegar clique dos botões.
   O vídeo é um loop de 5s que vai do céu cinza (0s) ao pôr do sol laranja (~3,5s), quase 3x mais claro
   na faixa do texto. A força do gradiente é calibrada pelo pôr do sol, a fase mais clara, pra o hero
   manter o mesmo tom escuro durante o loop inteiro e não só no começo. */
html[data-rv-page="index"] .video-background .content-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.7));
}

/* No mobile o texto começa na metade do hero (no desktop fica só no rodapé): o gradiente escurece antes. */
@media screen and (max-width: 767px) {
  html[data-rv-page="index"] .video-background .content-overlay {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.63) 50%, rgba(0, 0, 0, 0.73));
  }
}

/* Enquanto o vídeo carrega (ou se ele falhar) o fundo do hero é o branco do body e o texto branco some.
   Um tom escuro próximo da média do vídeo já escurecido deixa o texto legível desde o primeiro frame. */
html[data-rv-page="index"] .video-background {
  background-color: #3b2c2b;
}

/* investidores-bloco-cliente (https://app.clickup.com/t/86e3ebwdg) */
/* Investidores: bloco roxo (#cta) reescrito pro investidor, sem os cards do painel do escritório
   (investidores-bloco-cliente.mjs). No desktop o texto fica com as listras do fundo à direita. */
@media screen and (max-width: 991px) {
  /* O min-height: 80vh do card só existia pra caber os cards empilhados; sem eles sobrava meia tela roxa vazia. */
  html[data-rv-page="solucoes/investidores"] #cta .cta_card {
    min-height: 0;
  }

  /* Botões empilhados com a mesma largura: o texto mais curto ("Abrir Conta") ficava encostado à esquerda. */
  html[data-rv-page="solucoes/investidores"] #cta .buttons-wrapper a {
    text-align: center;
  }
}

/* investidores-hero-mobile (https://app.clickup.com/t/86e3ebwbm) */
/* Hero de /solucoes/investidores. A imagem 3D é background do .header-wrapper (100% 50%, contain).
   No desktop ela fica à direita do texto; do tablet pra baixo o texto ocupa a largura toda e a
   imagem fica por baixo do título, do subtítulo e dos botões, com as bordas retas do PNG (topo e
   base) soltas no meio do hero. Aqui ela vai pra uma faixa própria abaixo dos botões, ancorada na
   borda direita e no pé do hero (a base vira o limite da seção, como no desktop), com o topo
   dissolvido na cor do fundo. A altura do hero segue o texto, então não depende do subtítulo. */
@media screen and (max-width: 991px) {
  html[data-rv-page="solucoes/investidores"] .header-wrapper.investidores {
    --rv-inv-img-h: min(60vw, 24rem);
    padding-bottom: var(--rv-inv-img-h);
    /* O ::after herda a imagem do designer (background-image: inherit), sem repetir o arquivo aqui;
       no wrapper ela deixa de ser desenhada. */
    background-size: 0 0;
  }

  html[data-rv-page="solucoes/investidores"] .section_header.investidores.left {
    min-height: 0;
  }

  html[data-rv-page="solucoes/investidores"] .header-wrapper.investidores::after,
  html[data-rv-page="solucoes/investidores"] .header-wrapper.investidores::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--rv-inv-img-h);
    pointer-events: none;
  }

  /* 70% da largura, à direita, mostrando a parte de cima da imagem: a borda esquerda do PNG (que
     corta as peças de baixo) fica fora da faixa, e a da direita sai pela lateral da tela. */
  html[data-rv-page="solucoes/investidores"] .header-wrapper.investidores::after {
    z-index: 0;
    background-image: inherit;
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: 70% auto;
  }

  html[data-rv-page="solucoes/investidores"] .header-wrapper.investidores::before {
    z-index: 1;
    background-image: linear-gradient(to bottom, #fafafa, rgba(250, 250, 250, 0) 30%);
  }
}

/* Celular em pé: a imagem ocupa a largura toda. */
@media screen and (max-width: 479px) {
  html[data-rv-page="solucoes/investidores"] .header-wrapper.investidores {
    --rv-inv-img-h: min(90vw, 24rem);
  }

  html[data-rv-page="solucoes/investidores"] .header-wrapper.investidores::after {
    background-size: cover;
  }
}

/* menu-mobile-item-atual (https://app.clickup.com/t/86e3ebwkj) */
/*
 * Só no menu colapsado (≤991px). No desktop a cor dos links vem da interação de
 * scroll do Webflow (inline) e nada muda.
 */
@media screen and (max-width: 991px) {
  /*
   * Item da página atual. O export pinta .navbar2_link.w--current com uma variável
   * do Relume que não existe (--<unknown|relume-variable-neutral-shade-7>): cor com
   * var() inválida vira herança, e o pai (.navbar25_menu-left) é branco. No menu,
   * que é branco, o item some. Aqui ele ganha a cor da marca e peso 600.
   * Também por aria-current: com URL limpa (/rivool-academy) o JS do Webflow tira o
   * w--current, porque o href é rivool-academy.html; o aria-current="page" fica.
   */
  .navbar2_link:is(.w--current, [aria-current="page"]) {
    color: var(--main-purple);
    font-weight: 600;
  }

  /* Nos dropdowns (Produtos/Soluções) o item atual não some: tem o fundo cinza do
     export, mas só com w--current. Com URL limpa ele perdia o destaque. */
  .link-nav[aria-current="page"] {
    background-color: #87878717;
  }

  /*
   * Menu aberto: header branco sólido, logo e ícone escuros. O Webflow só marca o
   * botão (.w-nav-button.w--open). O !important vence os estilos inline da interação
   * de scroll (fundo, filter do logo e do ícone) na home, Sobre nós e Escola Rivool;
   * ao fechar o menu, esses inline voltam a valer e o header volta ao que era.
   * O logo escuro é o mesmo invert() que o export usa nas páginas de header claro.
   */
  .navbar2_component:has(.w-nav-button.w--open) {
    background-color: var(--base-color-neutral--white) !important;
  }

  .navbar2_component:has(.w-nav-button.w--open) .navbar2_logo {
    filter: invert(1) !important;
  }

  .navbar2_component:has(.w-nav-button.w--open) .menu-icon2 {
    filter: none !important;
  }

  .navbar2_component:has(.w-nav-button.w--open) :is(.menu-icon2_line-top-2, .menu-icon2_line-middle-2, .menu-icon2_line-bottom-2) {
    background-color: var(--base-color-neutral--black);
  }

  /* O menu tinha 90dvh abaixo do header: sobrava uma faixa no pé da tela com a
     página aparecendo. Ocupa o resto da tela (header de 4.5rem até 991px). */
  .navbar2_menu {
    height: calc(100dvh - 4.5rem);
  }
}

@media screen and (max-width: 767px) {
  /* Header de 4rem a partir daqui. */
  .navbar2_menu {
    height: calc(100dvh - 4rem);
  }
}

/* renda-dolares-hero-imagem (https://app.clickup.com/t/86e3ebw6p) */
/* Hero de /produtos/renda-em-dolares. A imagem 3D é background do .header-wrapper, ancorada no pé
   (50% 100%, contain), e o header tem min-height de 100vh (70vh/65vh no tablet/mobile): a imagem
   fica no fundo da tela e sobra um vão grande entre o subtítulo e ela. Aqui o header passa a ter a
   altura do texto e o wrapper reserva embaixo só a altura da imagem, então ela sobe pra logo abaixo
   do subtítulo. --rv-hero-ratio é altura/largura da imagem (Group-1261153026.png, 2159×522); o .js
   corrige o valor se o designer trocar a imagem por uma de outra proporção. */
html[data-rv-page="produtos/renda-em-dolares"] .header-wrapper.renda-dolares {
  --rv-hero-ratio: 0.24178;
  padding-bottom: calc(100% * var(--rv-hero-ratio) - 3rem);
}

html[data-rv-page="produtos/renda-em-dolares"] .section_header.dolares {
  min-height: 0;
}

/* O PNG exportado já vem cortado no topo: as peças do meio encostam na borda de cima do arquivo e
   aparecem com um corte reto. Enquanto não chega a imagem inteira, um degradê da cor do fundo do
   hero por cima do topo da imagem dissolve o corte. Fica abaixo do header (z-index 11). */
html[data-rv-page="produtos/renda-em-dolares"] .header-wrapper.renda-dolares::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  padding-bottom: calc(100% * var(--rv-hero-ratio));
  background-image: linear-gradient(to bottom, #fafafa, rgba(250, 250, 250, 0) 16%);
  pointer-events: none;
}