/**
 * Fonte Preferida Google — CTAs (conteúdo, sidebar, rodapé e modal).
 *
 * Conteúdo e sidebar usam o mesmo desenho: card branco, borda 1px
 * #EC0074, radius 16px, logo do Google à esquerda e texto magenta #B5005C ao lado,
 * SEM botão — o card inteiro é o <a>. O gradiente 302deg #B5005C → #EC0074 e o botão
 * pill saíram daqui quando o card virou o padrão; o modal manteve desenho próprio
 * (card #FFEEF5 e botão retângulo 10px sólido #EC0074).
 *
 * O BOX INTEIRO é um <a> — banner clicável por completo. O feedback de hover fica no
 * próprio box (`.mt-fpg-box:hover`).
 *
 * Seletores de título/texto/botão usam DUAS classes de propósito: dentro de
 * .conteudo-wysiwyg o tema aplica `.conteudo-wysiwyg p { font-size: 22px }` e
 * `.conteudo-wysiwyg a { color: #d22688 }` (especificidade 0,1,1). Uma classe só
 * (0,1,0) perderia. O `text-decoration: none` do box só precisa vencer o sublinhado
 * padrão do navegador (0,0,1), então uma classe basta ali.
 *
 * O box de conteúdo é uma versão maior do card (logo 44/48px, texto 17/18px) por
 * viver ao lado de parágrafos de 18-22px; a sidebar fica no tamanho compacto.
 *
 * O rodapé é a exceção: mesmo markup, pele do site (gradiente magenta, logo em círculo
 * branco, texto branco e seta) — ver a variante --rodape no fim do arquivo.
 */

/* ---------- Box (conteúdo e sidebar) ----------
 *
 * Um só desenho para os dois: card branco, borda magenta, logo do Google à esquerda
 * e texto ao lado. Não há botão — o card inteiro é o <a>. As variantes abaixo só
 * ajustam tamanho e margem.
 */

.mt-fpg-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: #fff;
  border: 1px solid #ec0074;
  border-radius: 16px;
  color: #b5005c;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.2s ease;
}

.mt-fpg-box:hover,
.mt-fpg-box:focus {
  color: #b5005c;
  background: #fff5f9;
  text-decoration: none;
}

.mt-fpg-box:focus-visible {
  outline: 2px solid #ec0074;
  outline-offset: 3px;
}

.mt-fpg-box .mt-fpg-box__logo {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
}

.mt-fpg-box .mt-fpg-box__corpo {
  display: block;
  min-width: 0;
}

.mt-fpg-box .mt-fpg-box__titulo {
  display: block;
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: #b5005c;
}

/* O "meutudo" em negrito vem do <strong> que o editor escreve no campo ACF. */
.mt-fpg-box .mt-fpg-box__titulo strong,
.mt-fpg-box .mt-fpg-box__titulo b {
  font-weight: 700;
}

.mt-fpg-box .mt-fpg-box__texto {
  display: block;
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: #b5005c;
}

/* ---------- Variante: dentro do conteúdo ---------- */

.mt-fpg-box--conteudo {
  gap: 16px;
  margin: 32px 0;
  padding: 20px;
}

.mt-fpg-box--conteudo .mt-fpg-box__logo {
  width: 44px;
  height: 44px;
}

.mt-fpg-box--conteudo .mt-fpg-box__titulo {
  font-size: 17px;
}

.mt-fpg-box--conteudo .mt-fpg-box__texto {
  font-size: 15px;
}

@media (min-width: 768px) {
  .mt-fpg-box--conteudo {
    gap: 18px;
    padding: 22px 24px;
  }

  .mt-fpg-box--conteudo .mt-fpg-box__logo {
    width: 48px;
    height: 48px;
  }

  .mt-fpg-box--conteudo .mt-fpg-box__titulo {
    font-size: 18px;
  }

  .mt-fpg-box--conteudo .mt-fpg-box__texto {
    font-size: 16px;
  }
}

/* ---------- Variante: sidebar ---------- */

.mt-fpg-box--sidebar {
  margin: 0 0 40px;
}

/* ---------- Variante: rodapé ----------
 *
 * Desenho do rodapé do site (meutudo.com.br): faixa com gradiente magenta, logo do
 * Google em círculo branco, texto branco e seta à direita. Sobrescreve o card branco do
 * padrão — mesmo markup, outra pele.
 */

.mt-fpg-box--rodape {
  gap: 12px;
  margin: 25px 0 15px;
  padding: 12px;
  background: linear-gradient(302deg, #b5005c 17.27%, #ec0074 85.36%);
  border: 0;
  border-radius: 12px;
  color: #fff;
  transition: filter 0.2s ease;
}

/* Gradiente não anima em `transition: background`, então o feedback é por filtro. */
.mt-fpg-box--rodape:hover,
.mt-fpg-box--rodape:focus {
  background: linear-gradient(302deg, #b5005c 17.27%, #ec0074 85.36%);
  color: #fff;
  filter: brightness(1.08);
}

.mt-fpg-box--rodape:focus-visible {
  outline: 2px solid #b5005c;
  outline-offset: 3px;
}

/* O "G" do Google tem os vazios transparentes: sobre o gradiente ele ficaria rosado.
 * O círculo branco é o mesmo do site e resolve os dois problemas (contraste e recorte).
 */
.mt-fpg-box--rodape .mt-fpg-box__logo {
  width: 36px;
  height: 36px;
  padding: 7px;
  background: #fff;
  border-radius: 50%;
  box-sizing: border-box;
}

/* TRÊS classes (0,3,0) de propósito: no rodapé o box vive dentro de `.footer-menu`, que
 * tem `.section-partial-footer-padrao .footer-menu span { font-size: 21px; color: #000;
 * margin-bottom: 20px }` — e, no mobile, `display: none`. Aquele seletor é 0,2,1 e
 * venceria os nossos de duas classes: o card sairia com o texto preto e grande no
 * desktop e SEM TEXTO no mobile. `__corpo` também é <span> e precisa do mesmo tratamento.
 */
.mt-fpg-box.mt-fpg-box--rodape .mt-fpg-box__corpo,
.mt-fpg-box.mt-fpg-box--rodape .mt-fpg-box__titulo,
.mt-fpg-box.mt-fpg-box--rodape .mt-fpg-box__texto {
  display: block;
  margin-bottom: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}

.mt-fpg-box--rodape .mt-fpg-box__seta {
  flex: 0 0 auto;
  margin-left: auto;
}

/* ---------- Modal ---------- */

.mt-fpg-modal[hidden] {
  display: none !important;
}

.mt-fpg-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.mt-fpg-modal.is-open {
  display: flex;
}

.mt-fpg-modal .mt-fpg-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.mt-fpg-modal .mt-fpg-modal__card {
  position: relative;
  width: 100%;
  max-width: 360px;
  padding: 48px 20px 20px;
  border-radius: 18px;
  background: #ffeef5;
  text-align: center;
  box-sizing: border-box;
}

.mt-fpg-modal .mt-fpg-modal__fechar {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1.5px solid #ec0074;
  border-radius: 50%;
  background: transparent;
  color: #ec0074;
  cursor: pointer;
  line-height: 0;
}

.mt-fpg-modal .mt-fpg-modal__fechar svg {
  width: 12px;
  height: 12px;
}

.mt-fpg-modal .mt-fpg-modal__fechar:hover,
.mt-fpg-modal .mt-fpg-modal__fechar:focus {
  background: #ec0074;
  color: #fff;
}

.mt-fpg-modal .mt-fpg-modal__titulo {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  color: #1a1a1a;
}

.mt-fpg-modal .mt-fpg-modal__texto {
  margin: 10px 0 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #333;
}

.mt-fpg-modal .mt-fpg-modal__botao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 24px 0 0;
  padding: 13px 20px;
  border-radius: 10px;
  background: #ec0074;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.2s ease;
}

.mt-fpg-modal .mt-fpg-modal__botao svg {
  width: 16px;
  height: 16px;
}

.mt-fpg-modal .mt-fpg-modal__botao:hover,
.mt-fpg-modal .mt-fpg-modal__botao:focus {
  background: #b5005c;
  color: #fff;
  text-decoration: none;
}

body.mt-fpg-sem-scroll {
  overflow: hidden;
}