/* ==========================================================================
   10 · BASE
   ========================================================================== */

html{ -webkit-text-size-adjust: 100%; }

body,
body.et_pb_pagebuilder_layout{
  background: var(--mf-bg);
  color: var(--mf-ink);
  font-family: var(--mf-font-body);
  font-size: var(--mf-t-corpo);
  line-height: var(--mf-lh-corpo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--mf-transicao), color var(--mf-transicao);
}

/* Divi pinta o container de branco por conta propria */
#page-container,
#et-main-area,
#main-content,
.et_pb_section{ background-color: transparent; }

#main-content{ background: var(--mf-bg); }

/* --- TITULOS -------------------------------------------------------------
   Display com peso 800 e tracking negativo. A grotesca tem largura variavel
   e formas levemente irregulares: e o sotaque da marca. */
h1, h2, h3, h4, h5, h6,
.et_pb_module_header,
.et_pb_slide_title,
.entry-title{
  font-family: var(--mf-font-display);
  font-weight: var(--mf-peso-display);
  letter-spacing: var(--mf-track-display);
  line-height: var(--mf-lh-display);
  color: var(--mf-ink);
  text-wrap: balance;
}

h1{ font-size: var(--mf-t-h1); }
h2{ font-size: var(--mf-t-h2); }
h3{ font-size: var(--mf-t-h3); line-height: 1.06; }
h4{ font-size: var(--mf-t-h4); line-height: 1.12; }
h5, h6{
  font-family: var(--mf-font-mono);
  font-weight: 500;
  font-size: var(--mf-t-mono);
  letter-spacing: var(--mf-track-mono);
  text-transform: uppercase;
  color: var(--mf-muted);
}

/* --- TEXTO --------------------------------------------------------------- */
p{ max-width: var(--mf-medida); }
.et_pb_text p:last-of-type{ margin-bottom: 0; }

strong, b{ font-weight: 600; }

/* --- LINKS ---------------------------------------------------------------
   Sublinhado com offset, nao border-bottom: o descendente respira. */
a{
  color: var(--mf-link);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--mf-link) 40%, transparent);
  transition: color .18s ease, text-decoration-color .18s ease;
}
a:hover{
  color: var(--mf-rosa);
  text-decoration-color: var(--mf-rosa);
}
html[data-mf-modo="cidade"] a:hover{ text-shadow: var(--mf-glow) rgba(255, 46, 136, .55); }

/* --- FOCO VISIVEL --------------------------------------------------------
   Agua, nunca rosa: precisa se distinguir do estado de hover. */
:focus-visible{
  outline: 2px solid var(--mf-agua);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection{ background: var(--mf-rosa); color: #fff; }

/* --- CODIGO E DADOS ------------------------------------------------------ */
code, kbd, samp, pre, time, .mf-dado{
  font-family: var(--mf-font-mono);
  font-size: .88em;
  letter-spacing: .01em;
}
code:not(pre code){
  background: var(--mf-surface);
  color: var(--mf-meta);
  padding: .12em .4em;
  border-radius: 4px;
  border: 1px solid var(--mf-line);
}
pre{
  background: var(--mf-surface);
  border: 1px solid var(--mf-line);
  border-left: 3px solid var(--mf-agua);
  border-radius: var(--mf-raio-p);
  padding: 20px 22px;
  overflow-x: auto;
  line-height: 1.6;
  font-size: .85rem;
}
pre code{ background: none; border: 0; padding: 0; color: inherit; }

blockquote{
  border-left: 3px solid var(--mf-rosa);
  padding-left: 22px;
  margin-left: 0;
  font-family: var(--mf-font-display);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -.02em;
}

hr{
  border: 0;
  height: 1px;
  background: var(--mf-line);
  margin: 44px 0;
}

table{ width: 100%; border-collapse: collapse; font-size: .95rem; }
th{
  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);
  text-align: left;
  font-weight: 500;
  border-bottom: 2px solid var(--mf-ink);
  padding: 10px 12px;
}
td{ padding: 12px; border-bottom: 1px solid var(--mf-line); }

img{ max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}