/*
 * Moldura do site mevo.com.br publicada pela Vitrine (ADR-0002).
 * Reproduz o visual do Next.js + Chakra de ~/site-institucional/frontend
 * (theme/, components/Header, components/Footer, pages/posts, pages/privacy-policy).
 * Unidades: o tema usa `Npr` = N/16 rem; aqui escrito em rem. O html muda de
 * tamanho de fonte por largura (14/15/16 px em lg/xl/2xl), como o tema.
 * Pontos de quebra do Chakra: md 48em, lg 62em, xl 80em, 2xl 96em.
 */
@font-face { font-family: 'Work Sans'; src: url(work-sans-300.woff2) format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url(work-sans-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url(work-sans-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url(work-sans-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url(work-sans-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
/* O Next.js declara o Ambit com font-weight "semibold"/"bold" (valores invalidos): o navegador usa o
   SemiBold com negrito sintetico em 600/700. O arquivo Bold reproduz esse peso sem sintese. */
@font-face { font-family: 'Ambit'; src: url(ambit-semibold.woff2) format('woff2'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'Ambit'; src: url(ambit-bold.woff2) format('woff2'); font-weight: 600 700; font-display: swap; }

:root {
  --roxo: #3C0E6B;
  --roxo-claro: #6E4498;
  --rosa: #FAB6BF;
  --rosa-texto: #FBB6BF;
  --lilas: #F5F3F8;
  --lilas-submenu: #F2EEFB;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
@media (min-width: 62em) { html { font-size: 14px; } }
@media (min-width: 80em) { html { font-size: 15px; } }
@media (min-width: 96em) { html { font-size: 16px; } }
html, body { width: 100%; overflow-x: hidden; margin: 0; }
html.sem-rolagem, html.sem-rolagem body { overflow: hidden; }
body {
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem; line-height: 1.5; color: var(--roxo); background: #FFF; position: relative;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--roxo); color: #FFF; padding: .5rem 1rem; }
.pular:focus { left: 1rem; }

.container { width: 100%; max-width: 1350px; margin: 0 auto; padding: 0 1.875rem; position: relative; }
@media (min-width: 62em) { .container { padding: 0 3.125rem; } }
.pagina { display: flex; flex-direction: column; align-items: center; width: 100%; }

/* --------------------------------------------------------------- botoes */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  background: var(--roxo); color: #FFF; border-radius: 25px; height: 3.125rem; min-width: 11.875rem; padding: 0 1.75rem;
  font-weight: 600; box-shadow: 0 10px 10px #241C541C; transition: background .3s ease; border: 0; cursor: pointer;
}
.botao:hover { background: var(--roxo-claro); }
.botao--pequeno { height: 2.375rem; min-width: 0; padding: 0 1.25rem; font-size: .875rem; }
.botao--rosa { background: var(--rosa); color: var(--roxo); box-shadow: none; }
.botao--rosa:hover, .botao--rosa.ativo { background: var(--roxo); color: #FFF; }
.saiba-mais { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; margin-top: 1.5625rem; }
.saiba-mais img { width: 10px; }
@media (min-width: 62em) { .saiba-mais { margin-top: 2.1875rem; } }

/* ------------------------------------------------------------ cabecalho */
.cabecalho { position: absolute; z-index: 6; width: 100%; top: 0; left: 0; }
.cabecalho__faixa { display: none; height: 50px; background: var(--lilas); align-items: center; justify-content: center; gap: 1.3125rem; }
.cabecalho__faixa p { font-weight: 300; }
@media (min-width: 62em) { .cabecalho__faixa { display: flex; } }
.cabecalho__barra { background: #FFF; width: 100%; height: 70px; display: flex; align-items: center; transform: translate3d(0, 0, 0); }
.cabecalho__barra.fixa { position: fixed; top: 0; left: 0; box-shadow: 0 15px 10px -15px rgba(0, 0, 0, .2); }
.cabecalho__linha { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; }
.cabecalho__logo img { max-width: 9.0625rem; display: block; }
.menu { display: flex; align-items: center; gap: 3.125rem; list-style: none; padding: 0; margin: 0; }
.menu > li > a, .submenu__gatilho {
  display: inline-flex; align-items: center; border-radius: 27px; padding: .75rem 1.5625rem; font-size: 1rem; font-weight: 500;
  color: var(--roxo); transition: background .3s ease; background: none; border: 0; cursor: pointer;
}
.menu > li.ativo > a { font-weight: 700; background: var(--lilas); }
.menu > li.submenu.ativo > .submenu__gatilho { font-weight: 700; background: var(--lilas); }
@media (min-width: 62em) { .submenu__itens li.ativo a { background: #FFF; } }
.menu > li.menu__ultimo { margin-left: 6.25rem; }
.menu__botao { display: none; background: none; border: 0; padding: 0; cursor: pointer; }
.menu__botao .fechar { display: none; }
.menu__botao.aberto .abrir { display: none; }
.menu__botao.aberto .fechar { display: block; }
.submenu { position: relative; }
.submenu__seta { width: 6px; margin-left: 10px; transform: rotate(90deg); transition: transform .3s ease; }
.submenu.aberto .submenu__seta, .submenu.ativo .submenu__seta { transform: rotate(-90deg); }
.submenu__itens {
  list-style: none; margin: 0; position: absolute; left: -.75rem; top: 0; z-index: -1; background: var(--lilas-submenu);
  border-radius: 27px; padding: 3.125rem .625rem 20px; opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.submenu__itens a {
  display: inline-flex; align-items: center; width: 100%; padding: 1.125rem 1.0625rem; font-family: Ambit, 'Work Sans', sans-serif;
  font-weight: 600; white-space: nowrap; border-radius: 27px; transition: background-color .3s ease; font-size: 10px;
}
.submenu__itens a span { font-size: 10px; }
.submenu__itens a img { margin-right: 10px; }
.submenu__itens a:hover { background: #FFF; }
@media (min-width: 62em) {
  .submenu:hover .submenu__itens, .submenu.aberto .submenu__itens { opacity: 1; pointer-events: all; }
}
@media (max-width: 991px) {
  .menu__botao { display: block; }
  .menu {
    position: fixed; background: #FFF; width: 100%; height: 100vh; left: 0; top: 70px; overflow-y: auto; overflow-x: hidden;
    padding: 1.75rem 0 11.875rem .9375rem; flex-direction: column; align-items: flex-start; gap: .9375rem;
    transition: transform .3s ease, opacity .3s ease; transform: translateX(-100%); opacity: 0; z-index: 1;
  }
  .menu.visivel { transform: translateX(0); opacity: 1; }
  .menu > li > a, .submenu__gatilho { font-size: 1.4375rem; }
  .menu > li.menu__ultimo { margin-left: 0; }
  .submenu__itens { position: relative; left: 0; top: 0; z-index: 0; background: none; padding: 0 2.1875rem; display: none; opacity: 1; pointer-events: all; }
  .submenu.aberto .submenu__itens, .submenu.ativo .submenu__itens { display: block; }
  .submenu__itens a { font-size: 1rem; padding: .5rem 0; }
  .submenu__itens a span { font-size: 1rem; }
  .submenu__itens a img { display: none; }
  .submenu.ativo .submenu__itens li.ativo a { text-decoration: underline; }
}

/* --------------------------------------------------------------- rodape */
.rodape { width: 100%; background: var(--roxo); padding: 13.0625rem 0 15.625rem; position: relative; color: #FFF; overflow: hidden; }
@media (min-width: 62em) { .rodape { padding: 14.1875rem 0 4.6875rem; } }
.rodape__colunas { display: flex; flex-direction: column; margin-top: 5.5625rem; position: relative; }
@media (min-width: 62em) { .rodape__colunas { flex-direction: row; margin-top: 4.8125rem; } }
.rodape__marca { width: 100%; max-width: 45.625rem; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
@media (min-width: 62em) { .rodape__marca { margin-bottom: 5.3125rem; } }
.rodape__logo { width: 11.75rem; margin-bottom: 2.5rem; }
@media (min-width: 62em) { .rodape__logo { width: 17rem; margin-bottom: 3.5625rem; } }
.rodape__slogan { font-size: 1.5625rem; font-weight: 600; line-height: 117%; display: block; }
@media (min-width: 62em) { .rodape__slogan { font-size: 2.375rem; } }
.redes { display: flex; flex-wrap: wrap; gap: .8125rem; padding: 4.5rem 0 0; margin: 0; list-style: none; }
@media (min-width: 62em) { .redes { gap: 1.0625rem; padding-top: 6.9375rem; } }
.redes a { display: flex; align-items: center; justify-content: center; background: var(--rosa-texto); border: 2px solid var(--rosa-texto); border-radius: 50%; width: 3.6875rem; height: 3.6875rem; }
@media (min-width: 62em) { .redes a { width: 4.9375rem; height: 4.9375rem; } }
.contatos { display: flex; flex-direction: column; gap: 1.5625rem; margin-top: 7.8125rem; }
.contatos--largo { display: none; }
@media (min-width: 62em) { .contatos { margin-top: 0; } .contatos--largo { display: flex; margin-left: .5rem; } .contatos--celular { display: none; } }
.contatos h3 { color: var(--rosa-texto); font-size: 1.875rem; font-weight: 600; line-height: 1.5; }
.contatos h3.contatos__titulo { padding-top: 1.25rem; }
/* VStack do Chakra: .5rem entre slogan, contatos (celular) e redes. */
.rodape__marca .redes { margin-top: .5rem; }
.rodape__marca .contatos--celular { margin-top: 8.3125rem; }
.contatos h3 + * { padding-top: .9375rem; }
.contatos strong { font-weight: 600; color: var(--rosa-texto); display: block; }
.contatos__lista { display: flex; flex-direction: column; gap: 1.5625rem; }
.contatos__politicas a, .contatos__politicas button { font-weight: 600; text-decoration: underline; display: block; padding-top: 1.5rem; }
.contatos__politicas button { background: none; border: 0; padding-left: 0; padding-right: 0; cursor: pointer; color: #FFF; }
.investidores { margin-top: 6.0625rem; width: 100%; max-width: 55rem; }
@media (min-width: 48em) { .investidores { max-width: 37.5rem; } }
@media (min-width: 62em) { .investidores { margin-top: 3.625rem; max-width: 55rem; } }
.investidores__grade { display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 2.6875rem; margin-top: 1.6875rem; align-items: center; justify-items: center; }
@media (min-width: 62em) { .investidores__grade { grid-template-columns: repeat(5, 1fr); row-gap: 0; margin-top: 3.3125rem; } .investidores__grade img:last-child { justify-self: end; } }
/* Pilulas: o quadro parado da animacao Lottie do Next.js (components/pills), nas mesmas caixas. */
.pilula-verde { position: absolute; z-index: 1; pointer-events: none; width: 18.125rem; right: -4.375rem; top: -7.3125rem; }
@media (min-width: 62em) { .pilula-verde { width: 20rem; left: 23.125rem; right: auto; } }
.pilula-verde img, .pilula-amarela img { display: block; width: 100%; height: auto; }
.rodape > .pilula-amarela { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }
.pilula-amarela > div { position: relative; overflow: hidden; }
.pilula-amarela > div > div { position: relative; width: 25.625rem; margin-left: auto; right: -1.25rem; bottom: -5.4375rem; }
@media (min-width: 62em) { .pilula-amarela > div > div { width: 35.8125rem; right: -11.5625rem; bottom: -6.875rem; } }

/* -------------------------------------------------------- barra de cookies */
.cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000; background: var(--roxo); color: #FFF;
  box-shadow: 0 -6px 20px #241C5440; padding: 16px;
}
.cookies:focus { outline: none; }
.cookies[hidden] { display: none; }
@media (min-width: 62em) { .cookies { padding: 1.25rem 2.5rem; } }
.cookies__linha { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 12px; }
@media (min-width: 48em) { .cookies__linha { flex-direction: row; align-items: center; gap: 32px; } }
.cookies__texto { font-size: 15px; line-height: 1.45; }
@media (min-width: 62em) { .cookies__texto { font-size: 1rem; } }
.cookies__texto a { color: var(--rosa-texto); font-weight: 600; text-decoration: underline; }
.cookies__texto a:hover { color: #FFF; }
.cookies__atual { font-size: 13px; margin-top: 4px; opacity: .85; }
@media (min-width: 62em) { .cookies__atual { font-size: .875rem; } }
.cookies__botoes { display: flex; gap: 12px; flex-shrink: 0; }
.cookies__botoes button {
  background: var(--rosa); color: var(--roxo); font-weight: 600; font-size: 15px; height: 44px; padding: 0 24px; flex: 1;
  border-radius: 25px; border: 0; cursor: pointer;
}
@media (min-width: 48em) { .cookies__botoes button { flex: none; min-width: 140px; } }
.cookies__botoes button:hover, .cookies__botoes button:active { background: #FFF; color: var(--roxo); }
.cookies__botoes button:focus-visible { outline: 3px solid #FFF; outline-offset: 2px; }

/* ----------------------------------------------------------------- post */
.post { margin-top: 84px; }
@media (min-width: 62em) { .post { margin-top: 10.625rem; } }
.post__capa { position: relative; margin-bottom: 1.875rem; }
@media (min-width: 62em) { .post__capa { margin-bottom: 5.625rem; } }
.post__imagem { aspect-ratio: 1250 / 602; overflow: hidden; width: 100vw; margin-left: -1.875rem; }
.post__imagem img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 62em) { .post__imagem { width: auto; margin-left: 0; border-radius: 35px; } }
.post__titulo { font-family: Ambit, 'Work Sans', sans-serif; font-weight: 700; line-height: 110%; font-size: 2.375rem; color: var(--rosa); margin-top: 2.0625rem; max-width: 33.125rem; }
@media (min-width: 62em) { .post__titulo { position: absolute; left: 8.125rem; bottom: 4.6875rem; margin-top: 0; color: #FFF; font-size: 3.4375rem; max-width: 25rem; } }
.post__titulo--sem-capa { position: static !important; color: var(--roxo) !important; max-width: 62rem; margin: 0 auto 2rem; }
.conteudo { max-width: 62.3125rem; width: 100%; margin: 0 auto; padding-bottom: 5.625rem; color: var(--roxo); }
@media (min-width: 62em) { .conteudo { padding-bottom: 8.4375rem; } }
.conteudo p { margin-bottom: 1.875rem; }
.conteudo h2, .conteudo h3 { line-height: 100%; font-family: Ambit, 'Work Sans', sans-serif; font-weight: 600; }
.conteudo h2 { font-size: 1.875rem; margin: 1.25rem 0 .9375rem; }
.conteudo h3 { font-size: 1.5625rem; margin: .9375rem 0 .625rem; }
@media (min-width: 62em) { .conteudo h2 { font-size: 2.8125rem; } .conteudo h3 { font-size: 1.75rem; } }
.conteudo h4 { font-size: 1.25rem; margin: .9375rem 0 .625rem; }
.conteudo img { max-width: 100%; height: auto; margin: 1.25rem 0; }
.conteudo a { font-weight: 600; text-decoration: underline; }
.conteudo ul, .conteudo ol { list-style-position: inside; padding: 0; margin-bottom: 1.875rem; }
.conteudo li { margin-bottom: .5rem; }
.conteudo li > p { display: inline; }
.conteudo blockquote { margin: 0 0 1.875rem; padding: 1rem 1.5rem; border-left: 4px solid var(--rosa); background: var(--lilas); border-radius: 0 20px 20px 0; }
.conteudo blockquote p:last-child { margin-bottom: 0; }
.conteudo hr { border: 0; border-top: 1px solid #E2DCEB; margin: 2rem 0; }
.conteudo em { font-style: italic; }
.conteudo .tabela { overflow-x: auto; margin-bottom: 1.875rem; }
.conteudo table { border-collapse: collapse; width: 100%; }
.conteudo th, .conteudo td { border: 1px solid #D9D2E5; padding: .625rem; text-align: left; vertical-align: top; }
.conteudo .video { position: relative; aspect-ratio: 16 / 9; margin: 1.25rem 0 1.875rem; }
.conteudo .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 20px; }

/* ----------------------------------------------------------------- blog */
.blog { margin-top: 84px; }
@media (min-width: 62em) { .blog { margin-top: 10.625rem; } }
.destaque { display: block; position: relative; border-radius: 35px 35px 0 0; overflow: hidden; }
@media (min-width: 62em) { .destaque { border-radius: 35px; margin-bottom: 3.125rem; } }
.destaque__imagem { aspect-ratio: 800 / 654; overflow: hidden; }
@media (min-width: 62em) { .destaque__imagem { aspect-ratio: 1250 / 602; } }
.destaque__imagem img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.destaque__caixa { background: var(--rosa-texto); padding: 2.625rem; border-radius: 0 0 35px 35px; }
@media (min-width: 62em) {
  .destaque__caixa { position: absolute; bottom: 4.375rem; left: 4.375rem; max-width: 19.375rem; padding: 2.5rem 1.9375rem 3rem; border-radius: 35px; }
}
.destaque__titulo { font-family: Ambit, 'Work Sans', sans-serif; font-weight: 600; font-size: 1.5625rem; line-height: 116%; margin-bottom: 1.0625rem; display: block; }
@media (min-width: 62em) { .destaque__titulo { font-size: 1.75rem; } }
.destaque .botao { margin: 2.0625rem auto 0; display: flex; width: max-content; }
.vitrine-posts { width: 100%; background: var(--lilas); padding: 22.5rem 0 5.9375rem; margin-top: -22.25rem; display: flex; flex-direction: column; align-items: center; }
@media (min-width: 62em) { .vitrine-posts { padding: 6.25rem 0 11.5625rem; margin-top: -9.375rem; } }
.categorias { list-style: none; margin: 3.125rem 0; padding: 0 0 .9375rem; width: 100%; max-width: 1250px; display: flex; gap: 2.8125rem; overflow-x: auto; }
@media (min-width: 62em) { .categorias { flex-wrap: wrap; gap: 1.875rem; } }
.categorias li { white-space: nowrap; }
.categorias li:first-child { padding-left: 1.875rem; }
.categorias li:last-child { padding-right: 1.875rem; }
@media (min-width: 62em) { .categorias li:first-child, .categorias li:last-child { padding: 0; } }
.categorias a { height: 3.125rem; min-width: 9.375rem; padding: 0 1.25rem; }
.grade { display: grid; grid-template-columns: 1fr; row-gap: 3.75rem; }
@media (min-width: 62em) { .grade { grid-template-columns: repeat(3, 1fr); column-gap: 3.3125rem; } }
.cartao { display: block; border-radius: 30px; background: #FFF; overflow: hidden; }
.cartao__imagem { aspect-ratio: 380 / 215; overflow: hidden; }
.cartao__imagem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cartao__texto { padding: 1.875rem 2.5rem 2.5rem; }
@media (min-width: 62em) { .cartao__texto { padding: 2.8125rem 3.125rem 3.4375rem; } }
.cartao__titulo { font-family: Ambit, 'Work Sans', sans-serif; font-size: 1.5625rem; font-weight: 600; line-height: 100%; display: block; }
@media (min-width: 62em) { .cartao__titulo { font-size: 1.75rem; } }
.cartao__resumo { margin-top: 1.0625rem; }
@media (min-width: 62em) { .cartao__resumo { margin-top: 1.6875rem; } }
.paginacao { display: flex; gap: 1rem; justify-content: center; margin-top: 3.125rem; flex-wrap: wrap; }
@media (min-width: 62em) { .paginacao { margin-top: 3.75rem; } }
.vazio { text-align: center; padding: 2rem 0; }

/* -------------------------------------------------------- documento legal */
.documento { margin-top: 84px; margin-bottom: 132px; }
@media (min-width: 62em) { .documento { margin-top: 10.625rem; margin-bottom: 6.25rem; } }
.documento__topo { display: flex; flex-direction: column; gap: 30px; padding-bottom: 10px; }
.documento__titulo, .documento h2 { font-weight: 700; font-size: 18px; margin: 24px 0 4px; }
.documento__topo .documento__titulo { margin: 24px 0 4px; }
.documento__topo a, .documento__lista a { text-decoration: underline; }
.documento hr { height: 1px; border: 0; background: #E2DCEB; margin: 20px 0; }
.documento__corpo { font-size: 14px; }
.documento__corpo p { margin-bottom: 12px; }
.documento__corpo h2, .documento__corpo h3 { font-weight: 700; font-size: 18px; margin: 24px 0 4px; }
.documento__corpo h3 { font-size: 16px; }
.documento__corpo ul, .documento__corpo ol { padding-left: 1.5rem; margin-bottom: 12px; }
.documento__corpo li { font-size: 14px; line-height: 16px; margin-bottom: 6px; }
.documento__corpo a { text-decoration: underline; }
.documento__corpo .tabela { overflow-x: auto; margin-bottom: 12px; }
.documento__corpo table { border-collapse: collapse; }
.documento__corpo th { border: 2px solid #000; padding: 10px; }
.documento__corpo td { border: 2px solid #000; padding: 10px; }
.documento__lista { display: flex; flex-direction: column; gap: 10px; }
.principal { width: 100%; }