/* =====================================================================
   Paginas de conteudo: Regulamento, Politica de Privacidade, Termo de Uso e FAQ
   Figma: "Regulamento", "Política de privacidade", "Termos de uso", "FAQ" (desktop, 1:1 com --u)
          e as versoes "– Mobile" (414px, 1:1 com --m).
   Complementa as regras-base de global.css (.mc-texto-pagina / .mc-faq); os seletores usam
   .mc-conteudo para ganhar do global.css, que e carregado depois deste arquivo.
   ===================================================================== */

/* ---------- Titulo de pagina ----------
   No Figma a barra branca acompanha a largura do texto (componente "Titulo de pagina":
   barra = largura do titulo - 2 x 53px, 8px de altura). No mobile e fixa: 176 x 6px. */
.mc-conteudo .mc-pagetitulo {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.mc-conteudo .mc-pagetitulo::after {
  width: calc(176 * var(--u)); /* XD desktop: barra fixa 176 x 6px (o Figma a deixou com a largura do texto) */
  height: calc(6 * var(--u));
  margin: calc(3 * var(--u)) auto 0;
  position: relative;
  top: calc(-1 * var(--u));
}

/* ---------- FAQ (desktop) ---------- */
.mc-faq.mc-conteudo .mc-faq__pergunta button {
  position: relative;
  min-height: calc(81 * var(--u));
  padding: calc(26 * var(--u)) calc(44 * var(--u)) calc(26 * var(--u)) calc(30 * var(--u));
  line-height: calc(28.8 * var(--u));
}
/* A base (style-default.min.css) aplica "* { font-weight: 400 }": o span herda o SemiBold do botao */
.mc-faq.mc-conteudo .mc-faq__pergunta span {
  font-weight: inherit;
}
/* Mesmo motivo: negrito do conteudo cadastrado no admin (FAQ, politica, termos, regulamento em HTML) */
.mc-conteudo .mc-faq__resposta :is(strong, b),
.mc-conteudo .mc-texto-pagina__conteudo :is(strong, b) {
  font-weight: 700;
}
/* Resposta: Poppins Regular #45494c (Figma); a base pinta os <p> do admin de preto */
.mc-faq.mc-conteudo .mc-faq__resposta :is(p, li, span, div) {
  color: inherit;
  font-family: inherit;
}
/* Seta no canto inferior direito do cabecalho do card (Figma: 20 x 10px, ~56px do topo);
   o img tem 10 x 20 e e girado, por isso right/bottom compensam a rotacao. */
.mc-faq.mc-conteudo .mc-faq__pergunta img {
  position: absolute;
  right: calc(15 * var(--u));
  bottom: calc(10 * var(--u));
}
.mc-faq.mc-conteudo .mc-faq__resposta {
  padding: calc(15 * var(--u)) calc(28 * var(--u)) calc(35 * var(--u)) calc(30 * var(--u));
}

@media (max-width: 991.98px) {
  .mc-conteudo .mc-pagetitulo {
    width: auto;
    margin-left: calc(11 * var(--m));
    margin-right: calc(11 * var(--m));
  }
  .mc-conteudo .mc-pagetitulo::after {
    width: calc(176 * var(--m));
    height: calc(6 * var(--m));
    margin: calc(2 * var(--m)) auto 0;
  }

  /* ---------- Regulamento / Politica / Termo (mobile) ----------
     Texto: x 22 a 403 (margens 22 / 11), comeca em y 141 como no Figma. */
  .mc-texto-pagina.mc-conteudo {
    padding: calc(24 * var(--m)) 0 calc(50 * var(--m));
  }
  .mc-texto-pagina.mc-conteudo .mc-texto-pagina__coluna {
    max-width: none;
  }
  .mc-texto-pagina.mc-conteudo .mc-texto-pagina__conteudo {
    margin: calc(24 * var(--m)) calc(11 * var(--m)) 0 calc(22 * var(--m));
  }
  .mc-texto-pagina.mc-conteudo .mc-texto-pagina__abas,
  .mc-texto-pagina.mc-conteudo .mc-texto-pagina__pdf {
    margin: calc(24 * var(--m)) calc(11 * var(--m)) 0;
  }

  /* ---------- FAQ (mobile) ----------
     Cards: x 20 a 399, 81px de altura minima, 12px entre eles; pergunta Poppins SemiBold 14px
     alinhada no topo (12px), como no Figma. No Figma a pergunta e cortada em 1 linha com
     reticencias; aqui ela quebra linha para nao esconder o texto real. */
  .mc-faq.mc-conteudo {
    padding: calc(24 * var(--m)) 0 calc(50 * var(--m));
  }
  .mc-faq.mc-conteudo .mc-faq__lista {
    max-width: none;
    margin: calc(32 * var(--m)) calc(15 * var(--m)) 0 calc(20 * var(--m));
  }
  .mc-faq.mc-conteudo .mc-faq__item {
    margin-bottom: calc(12 * var(--m));
  }
  .mc-faq.mc-conteudo .mc-faq__pergunta button {
    align-items: flex-start;
    min-height: calc(81 * var(--m));
    padding: calc(12 * var(--m)) calc(40 * var(--m)) calc(12 * var(--m)) calc(12 * var(--m));
    font-size: calc(14 * var(--m));
    line-height: calc(28.8 * var(--m));
  }
  /* XD: seta centralizada na vertical do card; aberto, o cabecalho vira uma barra preta com seta branca */
  .mc-faq.mc-conteudo .mc-faq__pergunta img {
    top: 50%;
    right: calc(20 * var(--m));
    bottom: auto;
    width: calc(10 * var(--m));
    height: calc(20 * var(--m));
    margin-top: calc(-10 * var(--m));
  }
  .mc-faq.mc-conteudo .mc-faq__pergunta button:not(.collapsed) {
    border-radius: calc(12 * var(--m));
    background: #000;
    color: #fff;
    font-size: calc(16 * var(--m));
  }
  .mc-faq.mc-conteudo .mc-faq__pergunta button:not(.collapsed) span {
    color: #fff;
  }
  .mc-faq.mc-conteudo .mc-faq__pergunta button:not(.collapsed) img {
    filter: brightness(0) invert(1);
  }
  .mc-faq.mc-conteudo .mc-faq__resposta {
    padding: calc(4 * var(--m)) calc(16 * var(--m)) calc(20 * var(--m)) calc(12 * var(--m));
    font-size: calc(14 * var(--m));
    line-height: calc(18 * var(--m));
  }
}