/* ==========================================================================
   40 · COMPONENTES
   Classes .mf-* para usar em qualquer modulo Divi (campo "Classe CSS")
   ou dentro de um modulo de Codigo. Ver docs/blocos-divi.html.
   ========================================================================== */

/* --- FAIXA DE QUATRO CORES ----------------------------------------------
   Assinatura visual mais barata e mais reconhecivel do sistema.
   Usar no topo de secao, abaixo de titulo, ou como rodape de card. */
.mf-faixa{
  display: flex;
  height: var(--mf-faixa);
  width: 100%;
  max-width: 520px;
  overflow: hidden;
}
.mf-faixa i{ flex: 1; display: block; }
.mf-faixa i:nth-child(1){ background: var(--mf-rosa); }
.mf-faixa i:nth-child(2){ background: var(--mf-sol); }
.mf-faixa i:nth-child(3){ background: var(--mf-agua); }
.mf-faixa i:nth-child(4){ background: var(--mf-violeta); }
.mf-faixa--fina{ height: 4px; }
.mf-faixa--larga{ max-width: none; }

/* --- SOBRANCELHA (eyebrow) ----------------------------------------------- */
.mf-sobrancelha{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mf-font-mono);
  font-size: var(--mf-t-mono);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mf-muted);
  margin-bottom: 22px;
}
.mf-sobrancelha b{ color: var(--mf-rosa); font-weight: 500; }
.mf-sobrancelha::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--mf-line);
}

/* --- LEAD E MANIFESTO ---------------------------------------------------- */
.mf-lead{
  font-size: var(--mf-t-lead);
  line-height: 1.5;
  max-width: 54ch;
}
.mf-manifesto{
  font-family: var(--mf-font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1.28;
  letter-spacing: -.02em;
  max-width: 27ch;
  padding-top: 28px;
  border-top: 3px solid var(--mf-ink);
}

/* --- ENFASE -------------------------------------------------------------- */
.mf-rosa{ color: var(--mf-rosa); }
.mf-agua{ color: var(--mf-meta); }
.mf-sol{ color: var(--mf-sol); }
.mf-violeta{ color: var(--mf-violeta); }
.mf-grifo{
  background: linear-gradient(transparent 62%, var(--mf-sol) 62%);
  padding: 0 2px;
}
html[data-mf-modo="cidade"] .mf-neon{ text-shadow: 0 0 22px currentColor; }

/* --- DADO EM DESTAQUE ----------------------------------------------------
   Numero grande em display + rotulo em mono. Para "5M dispositivos". */
.mf-dado-grande{
  font-family: var(--mf-font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  letter-spacing: -.05em;
  line-height: .9;
  color: var(--mf-rosa);
  display: block;
}
.mf-dado-rotulo{
  font-family: var(--mf-font-mono);
  font-size: var(--mf-t-mono);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mf-muted);
  display: block;
  margin-top: 10px;
}

/* --- CARD ---------------------------------------------------------------- */
.mf-card{
  background: var(--mf-surface);
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-raio);
  padding: 24px;
}
.mf-card__tick{
  display: block;
  width: 26px; height: 4px;
  border-radius: 4px;
  background: var(--mf-rosa);
  margin-bottom: 16px;
}

/* --- LISTA COM TRAVESSAO ------------------------------------------------- */
.mf-lista{ list-style: none; padding: 0; margin: 24px 0 0; max-width: var(--mf-medida); }
.mf-lista li{
  position: relative;
  padding: 14px 0 14px 30px;
  border-top: 1px solid var(--mf-line);
}
.mf-lista li::before{
  content: "\2014";
  position: absolute;
  left: 0; top: 14px;
  color: var(--mf-rosa);
  font-family: var(--mf-font-mono);
}

/* --- ESCADA (ladder diagram) --------------------------------------------
   Divisor que vem do vocabulario de sinalizacao: duas linhas de vida,
   requisicao em rosa, resposta em agua. */
.mf-escada{
  display: block;
  width: 100%;
  height: 54px;
  margin: 44px 0;
  color: var(--mf-line);
}

/* --- MARCA --------------------------------------------------------------- */
.mf-marca{ display: inline-flex; align-items: center; gap: 13px; text-decoration: none; }
.mf-marca svg{ flex: none; }
.mf-marca__nome{
  font-family: var(--mf-font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--mf-ink);
}
.mf-marca__nome small{
  display: block;
  font-family: var(--mf-font-mono);
  font-weight: 400;
  font-size: .56rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mf-muted);
  margin-top: 7px;
}

/* --- INTERRUPTOR PRAIA / CIDADE -----------------------------------------
   Elemento assinatura. Fixo no canto, some ao imprimir. */
.mf-modo{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--mf-surface);
  border: 1px solid var(--mf-line);
  border-radius: 999px;
  box-shadow: var(--mf-shadow);
}
.mf-modo__btn{
  font-family: var(--mf-font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mf-muted);
  background: none;
  border: 0;
  padding: 9px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.mf-modo__btn[aria-pressed="true"]{
  background: var(--mf-rosa);
  color: #fff;
}
html[data-mf-modo="cidade"] .mf-modo__btn[aria-pressed="true"]{
  box-shadow: 0 0 20px rgba(255, 46, 136, .65);
}
@media (max-width: 640px){
  .mf-modo{ right: 12px; bottom: 12px; }
  .mf-modo__btn{ padding: 8px 12px; font-size: .58rem; }
}

/* --- CARTAO DE VISITAS (para a pagina "Contato") ------------------------- */
.mf-cartao{
  width: 336px;
  max-width: 100%;
  min-height: 198px;
  padding: 22px;
  border-radius: 10px;
  border-right: 9px solid var(--mf-rosa);
  box-shadow: var(--mf-shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  color: #0A0E1A;
}
.mf-cartao--verso{ background: var(--mf-asfalto); color: #EDF1FB; }
.mf-cartao__nome{
  font-family: var(--mf-font-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -.04em;
  line-height: 1;
}
.mf-cartao__papel{
  font-family: var(--mf-font-mono);
  font-size: .58rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #616C82;
  margin-top: 9px;
}
.mf-cartao__contato{
  font-family: var(--mf-font-mono);
  font-size: .68rem;
  line-height: 2;
  letter-spacing: .03em;
}
.mf-cartao__contato span{
  color: var(--mf-agua);
  display: inline-block;
  width: 42px;
}

/* --- UTILITARIOS --------------------------------------------------------- */
.mf-mono{
  font-family: var(--mf-font-mono);
  font-size: var(--mf-t-mono);
  letter-spacing: var(--mf-track-mono);
  text-transform: uppercase;
  color: var(--mf-muted);
}
.mf-medida{ max-width: var(--mf-medida); }
.mf-sem-medida p{ max-width: none; }
.mf-centro{ margin-left: auto; margin-right: auto; }

.mf-so-leitor{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- IMPRESSAO ----------------------------------------------------------- */
@media print{
  .mf-modo, #main-header, #main-footer, .et_pb_scroll_top{ display: none !important; }
  body{ background: #fff; color: #000; }
  a{ text-decoration: underline; }
}