/* =========================================================================
   Sistema de design — Dra. Maria Tereza (etapa 1: sistema estático)
   Registro visual: editorial/científico caloroso. Navy + teal + cremes.

   IMPORTANTE — camada de tokens em CSS puro:
   O Kadence (tema clássico) filtra a paleta de cores do theme.json do child,
   então as variáveis --wp--preset--color--* chegam VAZIAS no front. Este
   arquivo define os tokens diretamente (fonte da verdade) e re-mapeia os
   nomes de preset que o markup das páginas já usa (has-canvas-background-color
   etc.), sem depender do theme.json para cor.

   Acessibilidade: WCAG 2.2 AA — foco visível ≥3:1, alvo ≥44px, reduced-motion.
   ========================================================================= */

:root {
  /* ---- Paleta (navy + teal + cremes quentes) ---- */
  --mt-canvas:        #f3eee7; /* fundo da página */
  --mt-surface:       #fcfaf7; /* cards e seções alternadas */
  --mt-surface-sunk:  #ece5d8; /* fundos rebaixados (facades) */
  --mt-border:        #e2dbcc; /* borda hairline sobre cremes */
  --mt-border-strong: #8a8070; /* borda funcional ≥3:1 */
  --mt-ink:           #001d39; /* navy — títulos e seção escura */
  --mt-ink-2:         #0a2e55; /* navy claro — hover do primário */
  --mt-body:          #1f2937; /* corpo de texto */
  --mt-muted:         #444d5a; /* texto secundário — 7,4:1 no canvas (AAA) */
  --mt-teal:          #147b78; /* ação — só bordas/acentos não textuais (3:1) */
  --mt-teal-ink:      #0b4f4c; /* teal p/ texto e links — 8,1:1 no canvas (AAA) */
  --mt-teal-deep:     #0a4744; /* hover do link (9,1:1) e preenchimento do secundário (branco 10,6:1) */
  --mt-teal-tint:     #e7ece8; /* fundo de destaque suave */
  --mt-on-dark:       #f3eee7; /* texto sobre navy */
  --mt-on-dark-soft:  #c9d2dd; /* texto secundário sobre navy */
  --mt-accent:        #b96a3c; /* terracota — contextos pediátricos */
  --mt-accent-ink:    #713c1c; /* 7:1 sobre accent-tint (AAA) */
  --mt-accent-tint:   #f2e3d4;
  --mt-success:       #075e54; /* WhatsApp escuro — branco 7,7:1 (AAA) */
  --mt-error:         #7f2f28; /* 7,7:1 no canvas (AAA) */

  /* ---- Re-mapeamento dos presets usados no markup ---- */
  /* ---- Paleta global do Kadence (customizer/banco) ---- */
  /* O Kadence imprime kadence-global-inline-css com a paleta salva no banco
     (palette1 ainda é o teal antigo #147b78, que reprova contraste). Estas
     redeclarações mantêm os tokens AAA como fonte única — ver também o bloco
     html:root no fim desta seção, que garante a vitória por especificidade. */
  --global-palette1: var(--mt-teal-ink);
  --global-palette2: var(--mt-teal-deep);
  --global-palette5: var(--mt-muted);

  --wp--preset--color--canvas:         var(--mt-canvas);
  --wp--preset--color--surface:        var(--mt-surface);
  --wp--preset--color--surface-sunk:   var(--mt-surface-sunk);
  --wp--preset--color--border:         var(--mt-border);
  --wp--preset--color--border-strong:  var(--mt-border-strong);
  --wp--preset--color--ink:            var(--mt-ink);
  --wp--preset--color--body:           var(--mt-body);
  --wp--preset--color--muted:          var(--mt-muted);
  --wp--preset--color--primary:        var(--mt-ink);
  --wp--preset--color--primary-hover:  var(--mt-ink-2);
  --wp--preset--color--primary-active: #001428;
  --wp--preset--color--primary-tint:   var(--mt-teal-tint);
  --wp--preset--color--primary-ink:    var(--mt-teal-ink);
  --wp--preset--color--on-primary:     var(--mt-on-dark);
  --wp--preset--color--accent:         var(--mt-accent);
  --wp--preset--color--accent-ink:     var(--mt-accent-ink);
  --wp--preset--color--accent-tint:    var(--mt-accent-tint);
  --wp--preset--color--success:        var(--mt-success);
  --wp--preset--color--error:          var(--mt-error);

  /* ---- Geometria e efeitos (um raio por papel, sombra só no hover) ---- */
  --mt-radius-sm: 8px;    /* botões, inputs */
  --mt-radius-md: 10px;   /* cards */
  --mt-radius-lg: 14px;   /* fotos, modal */
  --mt-radius-pill: 999px;
  --mt-focus-w: 2px;
  --mt-focus-off: 3px;
  --mt-focus-color: var(--mt-teal-deep);
  --mt-target: 44px;
  --mt-shadow-hover: 0 8px 24px rgba(0, 29, 57, .07);
  --mt-shadow-modal: 0 24px 60px rgba(0, 29, 57, .18);
  --mt-dur: 180ms;
  --mt-ease: cubic-bezier(.2, 0, 0, 1);

  /* ---- Tipografia ---- */
  --mt-font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --mt-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* html:root (0,1,1) vence o :root (0,1,0) do kadence-global-inline-css
   independentemente da ordem de impressão — sem isso a paleta antiga do
   banco (teal #147b78, 4,4:1) volta a colorir links, botões e skip link. */
html:root {
  --global-palette1: var(--mt-teal-ink);
  --global-palette2: var(--mt-teal-deep);
  --global-palette5: var(--mt-muted);
}

/* Classes de preset que o WP deixa de emitir quando o Kadence filtra a paleta */
.has-canvas-background-color        { background-color: var(--mt-canvas) !important; }
.has-surface-background-color       { background-color: var(--mt-surface) !important; }
.has-surface-sunk-background-color  { background-color: var(--mt-surface-sunk) !important; }
.has-primary-tint-background-color  { background-color: var(--mt-teal-tint) !important; }
.has-accent-tint-background-color   { background-color: var(--mt-accent-tint) !important; }
.has-ink-color    { color: var(--mt-ink) !important; }
.has-body-color   { color: var(--mt-body) !important; }
.has-muted-color  { color: var(--mt-muted) !important; }
.has-accent-ink-color { color: var(--mt-accent-ink) !important; }

/* -------------------------------------------------------------------------
   0. Base tipográfica — sans humanista no corpo, Fraunces real nos títulos
   (peso 500 real; sem faux bold, que distorce os glifos acentuados do H1)
   ------------------------------------------------------------------------- */
body {
  font-family: var(--mt-font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--mt-body);
  background-color: var(--mt-canvas);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.wp-block-heading {
  font-family: var(--mt-font-serif);
  font-weight: 500;
  color: var(--mt-ink);
}

h1, .has-hero-font-size {
  font-size: clamp(2.125rem, 5.5vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
h2, .has-h2-font-size {
  font-size: clamp(1.625rem, 4vw, 2.125rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h3, .has-h3-font-size {
  font-size: clamp(1.1875rem, 2.5vw, 1.375rem);
  line-height: 1.3;
}

/* Links de conteúdo — teal legível, sublinhado fino. O :not(.mt-wa-float) é
   obrigatório: sem ele esta regra vence a do flutuante por especificidade e
   pinta o texto de teal escuro sobre o verde (contraste ~1:1). */
.entry-content a:not(.wp-block-button__link):not(.mt-btn):not(.mt-card--link a):not(.mt-wa-float) {
  color: var(--mt-teal-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--mt-dur) var(--mt-ease);
}
.entry-content a:not(.wp-block-button__link):not(.mt-btn):not(.mt-wa-float):hover {
  color: var(--mt-teal-deep);
}

/* Números alinhados (CRM, RQE, horários) */
.mt-cred, .mt-pill, .mt-tabular {
  font-variant-numeric: lining-nums tabular-nums;
}

/* -------------------------------------------------------------------------
   1. Foco visível global + alvo mínimo + reduced motion
   ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--mt-focus-w) solid var(--mt-focus-color);
  outline-offset: var(--mt-focus-off);
  border-radius: var(--mt-radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

.wp-block-button__link,
.mt-btn,
.mt-chip,
summary,
.wp-block-navigation-item__content {
  min-height: var(--mt-target);
  display: inline-flex;
  align-items: center;
}

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

/* -------------------------------------------------------------------------
   2. BOTÕES — hierarquia: primário sólido navy / secundário outline teal
      que PREENCHE no hover / ghost sublinhado.
   ------------------------------------------------------------------------- */
.wp-block-button__link,
.mt-btn {
  justify-content: center;
  gap: .5rem;
  padding: .875rem 1.75rem;
  border-radius: var(--mt-radius-sm);
  font-family: var(--mt-font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--mt-dur) var(--mt-ease),
    border-color var(--mt-dur) var(--mt-ease),
    color var(--mt-dur) var(--mt-ease),
    box-shadow var(--mt-dur) var(--mt-ease),
    transform var(--mt-dur) var(--mt-ease);
}

/* Primário (padrão) — sólido navy */
.wp-block-button:not(.is-style-outline):not(.is-style-ghost) > .wp-block-button__link,
.mt-btn--primary {
  background: var(--mt-ink);
  color: var(--mt-on-dark);
  border-color: var(--mt-ink);
}
.wp-block-button:not(.is-style-outline):not(.is-style-ghost) > .wp-block-button__link:hover,
.mt-btn--primary:hover {
  background: var(--mt-ink-2);
  border-color: var(--mt-ink-2);
  color: var(--mt-on-dark);
  transform: translateY(-1px);
  box-shadow: var(--mt-shadow-hover);
}
.wp-block-button:not(.is-style-outline):not(.is-style-ghost) > .wp-block-button__link:active,
.mt-btn--primary:active {
  background: #001428;
  border-color: #001428;
  transform: translateY(0);
  box-shadow: none;
}

/* Secundário — outline teal que preenche no hover */
.wp-block-button.is-style-outline > .wp-block-button__link,
.mt-btn--outline {
  background: transparent;
  color: var(--mt-teal-ink);
  border-color: var(--mt-teal);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.mt-btn--outline:hover {
  background: var(--mt-teal-deep);
  color: #ffffff;
  border-color: var(--mt-teal-deep);
}
.wp-block-button.is-style-outline > .wp-block-button__link:active,
.mt-btn--outline:active {
  background: var(--mt-teal-ink);
  border-color: var(--mt-teal-ink);
  color: #ffffff;
}

/* Ghost — link com afeto de botão */
.wp-block-button.is-style-ghost > .wp-block-button__link,
.mt-btn--ghost {
  background: transparent;
  color: var(--mt-teal-ink);
  border-color: transparent;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.wp-block-button.is-style-ghost > .wp-block-button__link:hover,
.mt-btn--ghost:hover {
  background: var(--mt-teal-tint);
  text-decoration: none;
  color: var(--mt-teal-deep);
}

/* Disabled (qualquer variante) */
.wp-block-button__link[aria-disabled="true"],
.wp-block-button__link:disabled,
.mt-btn:disabled,
.mt-btn[aria-disabled="true"] {
  background: var(--mt-surface-sunk);
  color: var(--mt-muted);
  border-color: var(--mt-border);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* -------------------------------------------------------------------------
   3. CARD — borda hairline em repouso; sombra e lift só quando clicável
   ------------------------------------------------------------------------- */
.is-style-mt-card,
.mt-card {
  background: var(--mt-surface);
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius-md);
  padding: var(--wp--preset--spacing--50, 2rem);
  box-shadow: none;
  transition:
    box-shadow var(--mt-dur) var(--mt-ease),
    border-color var(--mt-dur) var(--mt-ease),
    transform var(--mt-dur) var(--mt-ease);
}
.mt-card--link:hover,
a.mt-card:hover {
  box-shadow: var(--mt-shadow-hover);
  border-color: var(--mt-teal);
  transform: translateY(-2px);
}
.mt-card--link:focus-within {
  outline: var(--mt-focus-w) solid var(--mt-focus-color);
  outline-offset: var(--mt-focus-off);
}
.mt-card--link:active { transform: translateY(0); }

/* Título do card clicável = link sem sublinhado, teal só no hover do card */
.mt-card--link h3 a {
  color: var(--mt-ink);
  text-decoration: none;
}
.mt-card--link:hover h3 a { color: var(--mt-teal-ink); }

/* -------------------------------------------------------------------------
   4. CREDENCIAIS — linha única e quieta (CRM · RQE) + pílula legada
   ------------------------------------------------------------------------- */
.mt-cred {
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--mt-muted);
}
.mt-pill {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: 2rem;
  padding: .25rem .75rem;
  border-radius: var(--mt-radius-pill);
  background: var(--mt-surface);
  color: var(--mt-ink);
  border: 1px solid var(--mt-border);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
a.mt-pill:hover { border-color: var(--mt-teal); background: var(--mt-surface); }

/* -------------------------------------------------------------------------
   5. CHIPS e SELOS de credencial
   ------------------------------------------------------------------------- */
.mt-chip {
  justify-content: center;
  gap: .375rem;
  padding: .375rem .875rem;
  border-radius: var(--mt-radius-pill);
  background: var(--mt-surface);
  color: var(--mt-body);
  border: 1px solid var(--mt-border-strong);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--mt-dur) var(--mt-ease), color var(--mt-dur) var(--mt-ease), border-color var(--mt-dur) var(--mt-ease);
}
.mt-chip:hover { background: var(--mt-teal-tint); border-color: var(--mt-teal); }
.mt-chip[aria-pressed="true"],
.mt-chip.is-active {
  background: var(--mt-teal-deep);
  color: #fff;
  border-color: var(--mt-teal-deep);
}
.mt-chip:disabled { opacity: .5; cursor: not-allowed; }

.mt-selo {
  display: grid;
  gap: .25rem;
  align-content: start;
  flex: 1 1 220px;
  max-width: 320px;
  padding: 1.25rem 1.5rem;
  border-radius: var(--mt-radius-md);
  background: var(--mt-surface);
  border: 1px solid var(--mt-border-strong);
  border-top: 3px solid var(--mt-teal);
  color: var(--mt-ink);
}
.mt-selo--accent { border-top-color: var(--mt-accent-ink); }
.mt-selo__kicker {
  font-family: var(--mt-font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mt-teal-ink);
}
.mt-selo--accent .mt-selo__kicker { color: var(--mt-accent-ink); }
.mt-selo__title { font-weight: 600; line-height: 1.35; }
.mt-selo__detail { font-size: .875rem; color: var(--mt-muted); }

/* -------------------------------------------------------------------------
   6. FORMULÁRIO — inputs, labels, ajuda e erro (Micro-Fluxo / contato)
   ------------------------------------------------------------------------- */
.mt-field { display: grid; gap: .375rem; margin-block-end: var(--wp--preset--spacing--40, 1.5rem); }
.mt-field > label { font-weight: 600; color: var(--mt-ink); }
.mt-field__hint { font-size: .875rem; color: var(--mt-muted); }

.mt-input,
.mt-field input:where([type="text"],[type="email"],[type="tel"],[type="number"],[type="date"]),
.mt-field select,
.mt-field textarea {
  width: 100%;
  min-height: var(--mt-target);
  padding: .625rem .75rem;
  font: inherit;
  color: var(--mt-body);
  background: var(--mt-surface);
  border: 1px solid var(--mt-border-strong);
  border-radius: var(--mt-radius-sm);
  transition: border-color var(--mt-dur) var(--mt-ease), box-shadow var(--mt-dur) var(--mt-ease);
}
.mt-input:hover,
.mt-field input:hover, .mt-field select:hover, .mt-field textarea:hover {
  border-color: var(--mt-teal);
}
.mt-input:focus,
.mt-field input:focus, .mt-field select:focus, .mt-field textarea:focus {
  outline: var(--mt-focus-w) solid var(--mt-focus-color);
  outline-offset: 0;
  border-color: var(--mt-teal);
}
.mt-input:disabled,
.mt-field input:disabled, .mt-field select:disabled, .mt-field textarea:disabled {
  background: var(--mt-surface-sunk);
  color: var(--mt-muted);
  cursor: not-allowed;
}
[aria-invalid="true"],
.mt-field.is-error input,
.mt-field.is-error select,
.mt-field.is-error textarea {
  border-color: var(--mt-error);
}
.mt-field__error { color: var(--mt-error); font-size: .875rem; font-weight: 600; }

/* -------------------------------------------------------------------------
   7. ACORDEÃO — core/details (FAQ): affordance clara, chevron rotaciona
   ------------------------------------------------------------------------- */
.wp-block-details {
  border-block: 1px solid var(--mt-border);
  padding-block: var(--wp--preset--spacing--40, 1.5rem);
}
.wp-block-details + .wp-block-details { border-block-start: 0; }
.wp-block-details > summary {
  cursor: pointer;
  font-family: var(--mt-font-serif);
  font-weight: 500;
  font-size: 1.1875rem;
  color: var(--mt-ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: .25rem;
  transition: color var(--mt-dur) var(--mt-ease);
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after {
  content: "";
  flex: 0 0 auto;
  width: .625rem; height: .625rem;
  margin-right: .125rem;
  border-right: 1.5px solid var(--mt-teal-ink);
  border-bottom: 1.5px solid var(--mt-teal-ink);
  transform: rotate(45deg);
  transition: transform var(--mt-dur) var(--mt-ease);
}
.wp-block-details[open] > summary::after { transform: rotate(-135deg); }
.wp-block-details > summary:hover { color: var(--mt-teal-ink); }
.wp-block-details[open] > summary { color: var(--mt-teal-ink); }

/* -------------------------------------------------------------------------
   8. MODAL do Micro-Fluxo — <dialog class="mt-modal">
   ------------------------------------------------------------------------- */
.mt-modal {
  width: min(560px, calc(100vw - 2rem));
  max-height: min(85svh, 720px);
  padding: 0;
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius-lg);
  background: var(--mt-surface);
  color: var(--mt-body);
  box-shadow: var(--mt-shadow-modal);
  overflow: auto;
}
.mt-modal::backdrop { background: rgba(0, 29, 57, .45); }
.mt-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: var(--wp--preset--spacing--40, 1.5rem) var(--wp--preset--spacing--50, 2rem);
  border-bottom: 1px solid var(--mt-border);
}
.mt-modal__title { margin: 0; font-size: 1.1875rem; }
.mt-modal__body { padding: var(--wp--preset--spacing--50, 2rem); }
.mt-modal__close {
  min-width: var(--mt-target); min-height: var(--mt-target);
  display: inline-grid; place-items: center;
  background: transparent; border: 1px solid var(--mt-border-strong);
  border-radius: var(--mt-radius-sm);
  color: var(--mt-ink); cursor: pointer;
  font-size: 1.25rem; line-height: 1;
}
.mt-modal__close:hover { background: var(--mt-surface-sunk); }

/* -------------------------------------------------------------------------
   9. WhatsApp flutuante
   ------------------------------------------------------------------------- */
.mt-wa-float {
  position: fixed;
  right: 1rem; bottom: 1rem;
  z-index: 60;
  min-width: var(--mt-target); min-height: var(--mt-target);
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.125rem;
  background: var(--mt-success);
  color: #fff;
  border-radius: var(--mt-radius-pill);
  box-shadow: 0 6px 20px rgba(0, 29, 57, .18);
  text-decoration: none; font-weight: 600;
  transition: transform var(--mt-dur) var(--mt-ease), box-shadow var(--mt-dur) var(--mt-ease);
}
.mt-wa-float:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0, 29, 57, .22);
}

/* -------------------------------------------------------------------------
   10. Utilitários de conteúdo
   ------------------------------------------------------------------------- */
.mt-measure { max-width: 60ch; }

/* Eyebrow — rótulo editorial com traço curto */
.mt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-family: var(--mt-font-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mt-teal-ink);
  margin-bottom: .5rem;
}
.mt-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--mt-teal);
}

.mt-sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
/* Skip link: o Kadence imprime o próprio (alvo #main) — sem duplicata aqui. */

/* Moldura editorial de foto — retângulo teal deslocado atrás da imagem */
.mt-photo { position: relative; }
.mt-photo::after {
  content: "";
  position: absolute;
  top: 14px; left: 14px; right: -14px; bottom: -14px;
  border: 1px solid var(--mt-teal);
  border-radius: var(--mt-radius-lg);
  z-index: 0;
  pointer-events: none;
}
.mt-photo img {
  position: relative;
  z-index: 1;
  border-radius: var(--mt-radius-lg);
  display: block;
}
/* respiro para a moldura não colar no bloco seguinte/na borda da coluna */
.mt-photo { margin-right: 14px; margin-bottom: 14px; }

/* -------------------------------------------------------------------------
   11. SEÇÃO ESCURA — "Ciência & formação" (o gesto de gravitas da página)
   Aplicada pelo id de âncora #ciencia já existente no markup (sem tocar nos
   atributos do bloco) e disponível como classe genérica .mt-section--dark.
   ------------------------------------------------------------------------- */
section#ciencia.has-background,
section.mt-section--dark.has-background,
.mt-section--dark {
  background-color: var(--mt-ink) !important;
  color: var(--mt-on-dark-soft);
}
#ciencia h2, #ciencia h3, #ciencia h4,
.mt-section--dark h2,
.mt-section--dark h3,
.mt-section--dark h4 { color: var(--mt-on-dark); }
#ciencia p, .mt-section--dark p { color: var(--mt-on-dark-soft); }
#ciencia li, .mt-section--dark li { color: var(--mt-on-dark-soft); }
#ciencia li::marker, .mt-section--dark li::marker { color: var(--mt-teal); }
#ciencia .mt-eyebrow, .mt-section--dark .mt-eyebrow { color: #7fb5b2; }
#ciencia .mt-eyebrow::before, .mt-section--dark .mt-eyebrow::before { background: #7fb5b2; }
#ciencia a:not(.wp-block-button__link):not(.mt-btn),
.mt-section--dark a:not(.wp-block-button__link):not(.mt-btn) {
  color: #9fc8c5;
}
#ciencia a:not(.wp-block-button__link):not(.mt-btn):hover,
.mt-section--dark a:not(.wp-block-button__link):not(.mt-btn):hover { color: #c3dedc; }
#ciencia .mt-card,
#ciencia .mt-card.has-background,
.mt-section--dark .mt-card,
.mt-section--dark .mt-card.has-background {
  background: rgba(252, 250, 247, .05) !important;
  border-color: rgba(252, 250, 247, .16);
}
#ciencia .mt-card p, .mt-section--dark .mt-card p { color: var(--mt-on-dark); }
/* citação em Fraunces dentro da seção escura */
#ciencia .has-h3-font-size,
.mt-section--dark .has-h3-font-size {
  font-family: var(--mt-font-serif);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  line-height: 1.45;
  color: var(--mt-on-dark);
}

/* -------------------------------------------------------------------------
   12. HEADER — wordmark editorial + sticky "frosted" + sublinhado no menu
   (Kadence clássico: #masthead / .site-branding / .site-title)
   ------------------------------------------------------------------------- */
#masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(252, 250, 247, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0, 29, 57, .08);
}
#masthead .site-header-row,
#masthead .site-container { min-height: 72px; }

.site-branding { padding: .625rem 0; }
.site-branding .site-title {
  font-family: var(--mt-font-serif);
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--mt-ink);
  white-space: nowrap;
}
.site-branding a { text-decoration: none; }
/* Subtítulo do wordmark = tagline REAL do Kadence.
   Defina em Personalizar → Identidade do site → Descrição (tagline):
   "Endocrinologia · Adulto e Infantil" — e ative a exibição da tagline no
   cabeçalho (Personalizar → Cabeçalho → Título do site). Este bloco só
   estiliza a .site-description que o Kadence já imprime. */
.site-branding .site-description {
  display: block;
  font-family: var(--mt-font-sans);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mt-teal-ink);
  margin-top: .125rem;
  white-space: nowrap;
}

/* Menu — sublinhado que desliza (sem bold no hover: nada de layout shift) */
#masthead .main-navigation a,
#masthead .menu a {
  font-family: var(--mt-font-sans);
  font-weight: 500;
  color: var(--mt-body);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--mt-dur) var(--mt-ease), color var(--mt-dur) var(--mt-ease);
}
#masthead .main-navigation a:hover,
#masthead .menu a:hover {
  color: var(--mt-teal-ink);
  background-size: 100% 1px;
}
#masthead .main-navigation .current-menu-item > a,
#masthead .menu .current-menu-item > a {
  color: var(--mt-ink);
  background-size: 100% 1px;
}

/* -------------------------------------------------------------------------
   13. FOOTER — bloco navy completo (impresso via functions.php) + barra
   de créditos do Kadence fundida no mesmo navy
   ------------------------------------------------------------------------- */
.mt-footer {
  background: var(--mt-ink);
  color: var(--mt-on-dark-soft);
  padding: clamp(3rem, 6vw, 4.5rem) var(--wp--preset--spacing--40, 1.5rem) 2rem;
}
.mt-footer__inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 2.5rem;
}
.mt-footer__brand {
  font-family: var(--mt-font-serif);
  font-size: 1.375rem;
  color: var(--mt-on-dark);
  line-height: 1.2;
  margin: 0 0 .25rem;
}
.mt-footer__tag {
  font-family: var(--mt-font-sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7fb5b2;
  margin: 0 0 1rem;
}
.mt-footer p { margin: 0 0 .5rem; font-size: .9375rem; line-height: 1.6; }
.mt-footer__title {
  font-family: var(--mt-font-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mt-on-dark);
  margin: 0 0 1rem;
}
.mt-footer a {
  color: #9fc8c5;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--mt-dur) var(--mt-ease);
}
.mt-footer a:hover { color: #c3dedc; text-decoration: underline; }
.mt-footer ul { list-style: none; margin: 0; padding: 0; }
.mt-footer li { margin-bottom: .5rem; font-size: .9375rem; }
.mt-footer__cred { font-variant-numeric: lining-nums tabular-nums; color: var(--mt-on-dark-soft); }

@media (max-width: 781px) {
  .mt-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* Barra de créditos do Kadence — funde no navy do bloco acima */
#colophon,
#colophon .site-footer-wrap,
#colophon .site-bottom-footer-wrap {
  background: var(--mt-ink) !important;
  color: var(--mt-on-dark-soft);
}
#colophon .footer-html,
#colophon .site-footer-row-container-inner,
#colophon p { color: #8fa1b5; font-size: .8125rem; }
#colophon a { color: #9fc8c5; }
#colophon .site-bottom-footer-inner-wrap { border-top: 1px solid rgba(252, 250, 247, .12); padding-top: 1rem; }

/* -------------------------------------------------------------------------
   14. RITMO VERTICAL — respiro editorial uniforme entre seções
   (vence os paddings inline dos presets 60/70 usados no markup)
   ------------------------------------------------------------------------- */
section.wp-block-group.alignfull[style*="spacing--60"] {
  padding-top: clamp(4rem, 7vw, 6rem) !important;
  padding-bottom: clamp(4rem, 7vw, 6rem) !important;
}
section.wp-block-group.alignfull[style*="spacing--70"] {
  padding-top: clamp(4.5rem, 8vw, 6.5rem) !important;
  padding-bottom: clamp(4.5rem, 8vw, 6.5rem) !important;
}
/* faixa fina (selos) mantém-se compacta */
section.wp-block-group.alignfull[style*="spacing--50"] {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

/* Divisor hairline só entre seções de MESMO fundo (hoje: selo→reputação e
   agenda→sobre). Junções que alternam fundo não precisam de divisor.
   :not(#ciencia) porque a seção Ciência tem classe surface no markup mas é
   pintada de navy acima — sem a exclusão o FAQ ganharia um divisor inútil. */
.entry-content > section.has-canvas-background-color + section.has-canvas-background-color,
.entry-content > section.has-surface-background-color:not(#ciencia) + section.has-surface-background-color {
  border-top: 1px solid rgba(0, 29, 57, .08);
}

/* -------------------------------------------------------------------------
   15. Facade de embed sob demanda — mapa, Trustindex (perf + LGPD)
   ------------------------------------------------------------------------- */
.mt-embed-facade {
  position: relative;
  min-height: 320px;
  display: grid; place-items: center;
  gap: .75rem; padding: var(--wp--preset--spacing--50, 2rem);
  text-align: center;
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius-lg);
  background: var(--mt-surface-sunk);
  color: var(--mt-muted);
}
.mt-embed-facade iframe { width: 100%; height: 100%; min-height: 320px; border: 0; border-radius: var(--mt-radius-lg); }
.mt-embed-facade__note { font-size: .875rem; max-width: 44ch; }

/* -------------------------------------------------------------------------
   16. Mobile-first — refinos responsivos
   ------------------------------------------------------------------------- */
.has-hero-font-size { font-size: clamp(2.125rem, 5.5vw, 3.25rem); }

@media (min-width: 600px) and (max-width: 900px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: calc(50% - var(--wp--style--block-gap, 1.5rem)) !important;
  }
}

@media (max-width: 781px) {
  section.wp-block-group.alignfull[style*="spacing--60"],
  section.wp-block-group.alignfull[style*="spacing--70"] {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  .mt-photo::after { top: 10px; left: 10px; right: -10px; bottom: -10px; }
  .mt-photo { margin-right: 10px; margin-bottom: 10px; }
}

@media (max-width: 600px) {
  .site-branding .site-title { font-size: 1.1875rem; }
  .mt-header > .wp-block-group { gap: .5rem; }
  .mt-modal__body { padding: var(--wp--preset--spacing--40, 1.5rem); }
  .mt-wa-float { right: .75rem; bottom: .75rem; padding: .625rem .875rem; }
}

img, iframe { max-width: 100%; }

/* -------------------------------------------------------------------------
   17. BADGE DE AVALIAÇÃO GOOGLE — [mt_google_rating]
   Nota agregada + contagem + link. Estrelas em âmbar contido (accent).
   ------------------------------------------------------------------------- */
.mt-grating {
  display: inline-flex;
  align-items: center;
  gap: .875rem;
  padding: .625rem 1.375rem;
  background: var(--mt-surface);
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius-pill);
  text-decoration: none;
  transition: border-color var(--mt-dur) var(--mt-ease), box-shadow var(--mt-dur) var(--mt-ease), transform var(--mt-dur) var(--mt-ease);
}
.mt-grating:hover {
  border-color: var(--mt-teal);
  box-shadow: var(--mt-shadow-hover);
  transform: translateY(-1px);
}
.mt-grating__num {
  font-family: var(--mt-font-serif);
  font-size: 1.625rem;
  font-weight: 500;
  color: var(--mt-ink);
  font-variant-numeric: lining-nums;
}
.mt-grating__stars {
  position: relative;
  font-size: 1.0625rem;
  letter-spacing: 2px;
  line-height: 1;
  color: var(--mt-border);
}
.mt-grating__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #d99a2b;
}
.mt-grating__meta {
  font-family: var(--mt-font-sans);
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--mt-muted);
}
/* variação sobre navy (footer) */
.mt-footer .mt-grating {
  background: rgba(252, 250, 247, .05);
  border-color: rgba(252, 250, 247, .18);
  margin-top: .75rem;
}
.mt-footer .mt-grating:hover { border-color: #7fb5b2; }
.mt-footer .mt-grating__num { color: var(--mt-on-dark); }
.mt-footer .mt-grating__stars { color: rgba(252, 250, 247, .25); }
.mt-footer .mt-grating__meta { color: var(--mt-on-dark-soft); }

/* -------------------------------------------------------------------------
   18. VITRINE INSTAGRAM — .mt-ig-strip (3 fotos curadas, link ao perfil)
   ------------------------------------------------------------------------- */
.mt-ig-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 860px;
  margin-top: 2rem;
}
.mt-ig-strip a {
  display: block;
  border-radius: var(--mt-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--mt-dur) var(--mt-ease), transform var(--mt-dur) var(--mt-ease);
}
.mt-ig-strip img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--mt-ease);
}
.mt-ig-strip a:hover {
  box-shadow: var(--mt-shadow-hover);
  transform: translateY(-2px);
}
.mt-ig-strip a:hover img { transform: scale(1.03); }
@media (max-width: 600px) {
  .mt-ig-strip { gap: .5rem; margin-top: 1.5rem; }
}

/* =========================================================================
   ETAPA 2 — CAMADA DE MOVIMENTO
   Regra: o site respira, não performa. Reveals de 12px/600ms uma única vez,
   stagger de 70ms em grupos, um único gesto-assinatura (sublinhado do H1).
   JS (motion.js) só adiciona .mt-motion ao <html> quando o usuário NÃO
   prefere movimento reduzido — sem JS ou com reduce, tudo fica visível.
   ========================================================================= */

/* Âncoras suaves + compensação do header sticky */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }

/* Reveal de entrada (só sob .mt-motion) */
.mt-motion .mt-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 600ms cubic-bezier(.16, 1, .3, 1),
    transform 600ms cubic-bezier(.16, 1, .3, 1);
}
.mt-motion .mt-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Ênfase no H1: sem sublinhado — o traço teal imitava um link e confundia
   o leitor. A palavra fica no tom do título, só em posição normal. */
h1 em {
  font-style: normal; /* não existe Fraunces itálica — evita oblíqua sintética */
}

/* FAQ: conteúdo entra com fade/slide curto a cada abertura */
.mt-motion .wp-block-details[open] > *:not(summary) {
  animation: mt-detail-in 250ms var(--mt-ease);
}
@keyframes mt-detail-in {
  from { opacity: 0; transform: translateY(-4px); }
}

/* =========================================================================
   18. LOGOTIPO SVG INLINE — header (.mt-brand) e footer (.mt-footer__logo)
   Os SVGs usam <text> Fraunces/Inter e herdam as fontes da página.
   ========================================================================= */
.mt-brand {
  display: block;
  line-height: 0; /* remove respiro fantasma do inline-svg */
}
/* Grande no topo da página; compacta quando a página rola (html.mt-scrolled,
   aplicada pelo motion.js). O SVG dita a altura do header sticky do Kadence. */
.mt-brand svg {
  height: 128px;
  width: auto;
  display: block;
  transition: height 250ms var(--mt-ease);
}
html.mt-scrolled .mt-brand svg { height: 80px; }
@media (max-width: 767px) {
  .mt-brand svg { height: 72px; }
  html.mt-scrolled .mt-brand svg { height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .mt-brand svg { transition: none; }
}
/* sobrepõe os max-width que o Kadence aplica em .site-branding img */
.site-branding .mt-brand svg { max-width: none; }
/* se um logo PNG voltar a ser configurado no Customizer, o SVG vence */
.site-branding .mt-brand ~ img.custom-logo { display: none; }

.mt-footer__logo {
  margin-bottom: var(--wp--preset--spacing--30, 16px);
}
.mt-footer__logo svg {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
}