/* ═══════════════════════════════════════════════════════════════
   MOONFLAG STUDIO · sistema de design + dobras
   Cores e fontes da marca chegam em :root pela identidade do cliente.
   ═══════════════════════════════════════════════════════════════ */
/* 01 · TOKENS ───────────────────────────────────────────────── */
:root {
  --mf-primary: #6f33ff; --mf-accent: #4b1fc2; --mf-dark: #140b2e; --mf-light: #f5f3fb;
  --mf-font-head: 'Montserrat', system-ui, sans-serif; --mf-font-body: 'Montserrat', system-ui, sans-serif;
  --mf-radius: 16px;

  --mf-white: #fff;
  --mf-text: color-mix(in srgb, var(--mf-dark) 88%, #000);
  --mf-text-2: color-mix(in srgb, var(--mf-dark) 62%, #fff);
  --mf-muted: color-mix(in srgb, var(--mf-dark) 45%, #fff);
  --mf-line: color-mix(in srgb, var(--mf-dark) 10%, #fff);
  --mf-soft: color-mix(in srgb, var(--mf-primary) 6%, var(--mf-light));
  --mf-primary-10: color-mix(in srgb, var(--mf-primary) 10%, transparent);
  --mf-primary-20: color-mix(in srgb, var(--mf-primary) 20%, transparent);
  --mf-primary-strong: color-mix(in srgb, var(--mf-primary) 82%, #000);
  --mf-deep: color-mix(in srgb, var(--mf-dark) 92%, var(--mf-primary));
  --mf-deep-2: color-mix(in srgb, var(--mf-dark) 78%, var(--mf-primary));
  --mf-grad-brand: linear-gradient(135deg, var(--mf-primary) 0%, var(--mf-accent) 100%);
  --mf-grad-deep: linear-gradient(160deg, var(--mf-deep) 0%, var(--mf-deep-2) 100%);

  --mf-fs-banner: clamp(32px, 4.6vw, 56px);
  --mf-fs-section: clamp(26px, 3vw, 38px);
  --mf-fs-h3: clamp(18px, 1.6vw, 21px);
  --mf-fs-body: 16px;
  --mf-fs-lead: clamp(16px, 1.3vw, 18px);
  --mf-fs-small: 14px;

  --mf-s-xs: 8px; --mf-s-sm: 16px; --mf-s-md: 24px; --mf-s-lg: 48px; --mf-s-xl: clamp(64px, 8vw, 112px);
  --mf-r-sm: calc(var(--mf-radius) * .6); --mf-r: var(--mf-radius); --mf-r-lg: calc(var(--mf-radius) * 1.5); --mf-r-pill: 100px;
  --mf-shadow-sm: 0 4px 16px color-mix(in srgb, var(--mf-dark) 7%, transparent);
  --mf-shadow-md: 0 14px 36px color-mix(in srgb, var(--mf-dark) 12%, transparent);
  --mf-shadow-lg: 0 28px 64px color-mix(in srgb, var(--mf-dark) 22%, transparent);
  --mf-shadow-glow: 0 14px 40px color-mix(in srgb, var(--mf-primary) 30%, transparent);
  --mf-glass: color-mix(in srgb, #fff 8%, transparent);
  --mf-glass-line: color-mix(in srgb, #fff 18%, transparent);
  --mf-ease: cubic-bezier(.23, 1, .32, 1);
  --mf-t: 280ms;
  --mf-wrap: 1200px;
}

/* 02 · BASE ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--mf-font-body); font-size: var(--mf-fs-body); line-height: 1.6; color: var(--mf-text); background: var(--mf-white); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--mf-primary); text-decoration: none; }
a:hover { color: var(--mf-accent); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--mf-primary) 55%, #fff); outline-offset: 3px; border-radius: 6px; }
p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--mf-font-head); line-height: 1.15; letter-spacing: -.01em; }
ul, ol { margin: 0; padding: 0; }
.mf-skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--mf-white); padding: 10px 14px; border-radius: 8px; }
.mf-skip:focus { left: 8px; }
[hidden] { display: none !important; }
.mf-muted { color: var(--mf-muted); }
.mf-center { text-align: center; margin-top: var(--mf-s-lg); }
.mf-empty-note { padding: 24px; border: 2px dashed var(--mf-line); border-radius: 12px; color: var(--mf-muted); font: 500 14px/1.4 system-ui; text-align: center; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* 03 · LAYOUT ───────────────────────────────────────────────── */
.mf-wrap { width: min(var(--mf-wrap), 100% - 40px); margin-inline: auto; position: relative; z-index: 2; }
.mf-narrow { max-width: 820px; }
.mf-sec { position: relative; padding-block: var(--mf-s-xl); overflow: hidden; isolation: isolate; }
.mf-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.mf-split--solo { grid-template-columns: 1fr 1.25fr; align-items: start; }
.mf-split--esquerda > :first-child { order: 2; }
.mf-split--faq { grid-template-columns: .8fr 1.2fr; align-items: start; }
.mf-head { max-width: 760px; margin-bottom: var(--mf-s-lg); }
.mf-split .mf-head, .mf-head-row .mf-head { margin-bottom: 0; }
.mf-head-row { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: var(--mf-s-lg); flex-wrap: wrap; }
.mf-split-head { display: flex; flex-direction: column; gap: var(--mf-s-md); align-items: flex-start; position: sticky; top: 110px; }
@media (max-width: 900px) {
  .mf-split, .mf-split--solo, .mf-split--faq { grid-template-columns: 1fr; }
  .mf-split--esquerda > :first-child { order: 0; }
  .mf-split-head { position: static; }
}

/* 04 · TIPOGRAFIA ───────────────────────────────────────────── */
.mf-h-banner { font-size: var(--mf-fs-banner); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
.mf-h2 { font-size: var(--mf-fs-section); font-weight: 800; }
.mf-h3 { font-size: calc(var(--mf-fs-h3) + 3px); font-weight: 700; }
.mf-head .mf-h2 + .mf-lead, .mf-head .mf-h2 + .mf-checks { margin-top: 16px; }
.mf-lead { font-size: var(--mf-fs-lead); color: var(--mf-text-2); max-width: 680px; }
.mf-text { color: var(--mf-text-2); }
.mf-hl { color: var(--mf-primary); }
.mf-on-dark .mf-hl { color: color-mix(in srgb, var(--mf-primary) 55%, #fff); }
.mf-prose .mf-h2 { margin-bottom: 20px; }
.mf-prose p { color: var(--mf-text-2); font-size: 17px; }
.mf-prose .mf-btn { margin-top: 28px; }
.mf-checks { list-style: none; display: grid; gap: 12px; margin: 20px 0 0; }
.mf-checks li { position: relative; padding-left: 32px; font-weight: 500; }
.mf-checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--mf-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }

/* Cores do texto sobre fundo escuro */
.mf-on-dark { color: #fff; }
.mf-on-dark .mf-lead, .mf-on-dark .mf-text, .mf-on-dark .mf-card-text, .mf-on-dark p { color: color-mix(in srgb, #fff 78%, transparent); }

/* 05 · BOTÕES ───────────────────────────────────────────────── */
.mf-btn { --bg: var(--mf-primary); --fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: var(--mf-r-pill); border: 1.5px solid transparent; background: var(--bg); color: var(--fg); font: 700 15px/1 var(--mf-font-head); letter-spacing: .01em; cursor: pointer; transition: transform var(--mf-t) var(--mf-ease), box-shadow var(--mf-t) var(--mf-ease), background var(--mf-t); text-align: center; }
.mf-btn:hover { color: var(--fg); transform: translateY(-2px); box-shadow: var(--mf-shadow-glow); }
.mf-btn-primary { --bg: var(--mf-primary); }
.mf-btn-primary:hover { --bg: var(--mf-primary-strong); }
.mf-btn-accent { --bg: var(--mf-grad-brand); background: var(--mf-grad-brand); }
.mf-btn-ghost { --bg: var(--mf-glass); --fg: #fff; border-color: var(--mf-glass-line); backdrop-filter: blur(12px); }
.mf-btn-ghost:hover { --bg: color-mix(in srgb, #fff 16%, transparent); box-shadow: none; }
.mf-btn-outline { --bg: transparent; --fg: var(--mf-primary); border-color: var(--mf-primary-20); }
.mf-btn-outline:hover { --bg: var(--mf-primary-10); box-shadow: none; }
.mf-btn-wa { --bg: #1faa59; width: 100%; margin-top: 12px; }
.mf-btn-wa .mf-ico { width: 20px; height: 20px; }
.mf-btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.mf-btn-row--center { justify-content: center; }
.mf-arrow { width: 16px; height: 16px; display: inline-block; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform var(--mf-t) var(--mf-ease); }
a:hover .mf-arrow, .mf-btn:hover .mf-arrow { transform: translateX(4px); }
.mf-btn-link { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1.2 var(--mf-font-head); color: var(--mf-primary); }
.mf-on-dark .mf-btn-link { color: #fff; }
.mf-round { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--mf-line); background: var(--mf-white); color: var(--mf-text); font-size: 24px; line-height: 1; cursor: pointer; transition: all var(--mf-t); }
.mf-round:hover:not(:disabled) { background: var(--mf-primary); color: #fff; border-color: var(--mf-primary); }
.mf-round:disabled { opacity: .35; cursor: default; }
.mf-store { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 20px; border-radius: 14px; background: #000; color: #fff; font: 700 16px/1.1 var(--mf-font-head); border: 1px solid var(--mf-glass-line); }
.mf-store:hover { color: #fff; transform: translateY(-2px); }
.mf-store small { display: block; font-size: 11px; font-weight: 500; opacity: .75; }
.mf-store .mf-ico { width: 26px; height: 26px; }

/* 06 · SELOS, TILES E ÍCONES ────────────────────────────────── */
.mf-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 7px 16px; border-radius: var(--mf-r-pill); background: var(--mf-primary-10); color: var(--mf-primary); font: 700 13px/1.2 var(--mf-font-head); letter-spacing: .06em; text-transform: uppercase; }
.mf-badge--glass, .mf-on-dark .mf-badge { background: var(--mf-glass); color: #fff; border: 1px solid var(--mf-glass-line); backdrop-filter: blur(12px); }
h1.mf-badge { font-size: 13px; }
.mf-ico { width: 24px; height: 24px; flex: none; }
.mf-ico { --ia: var(--mf-primary); --ib: color-mix(in srgb, var(--mf-primary) 45%, #fff); --ic: #fff; }
.mf-tile { display: grid; place-items: center; width: 58px; height: 58px; border-radius: var(--mf-r); background: var(--mf-primary-10); flex: none; }
.mf-tile .mf-ico { width: 30px; height: 30px; }
.mf-tile--sm { width: 46px; height: 46px; border-radius: var(--mf-r-sm); }
.mf-tile--sm .mf-ico { width: 24px; height: 24px; }
.mf-on-dark .mf-tile { background: var(--mf-glass); border: 1px solid var(--mf-glass-line); }
.mf-on-dark .mf-ico { --ia: #fff; --ib: color-mix(in srgb, var(--mf-primary) 55%, #fff); --ic: var(--mf-primary); }

/* 07 · FUNDOS E EFEITOS ─────────────────────────────────────── */
.mf-bg-claro { background: var(--mf-white); }
.mf-bg-suave { background: var(--mf-soft); }
.mf-bg-escuro { background: var(--mf-grad-deep); }
.mf-bg-marca { background: var(--mf-grad-brand); }
.mf-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.mf-glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; }
.mf-glow--a { width: 520px; height: 520px; right: -140px; top: -180px; background: var(--mf-primary); }
.mf-glow--b { width: 420px; height: 420px; left: -160px; bottom: -200px; background: var(--mf-accent); opacity: .35; }
.mf-dots { position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, #fff 16%, transparent) 1.2px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 65%); mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 65%); }
.mf-on-light .mf-dots { background-image: radial-gradient(var(--mf-primary-20) 1.2px, transparent 1.2px); }
.mf-bg-suave::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(800px 400px at 100% 0%, var(--mf-primary-10), transparent 70%); }
.mf-bg-marca .mf-stat-label, .mf-bg-marca p { color: color-mix(in srgb, #fff 85%, transparent); }

/* 09 · DOBRAS ───────────────────────────────────────────────── */
/* Banner */
.mf-banner { padding-block: calc(var(--mf-s-xl) + 90px) var(--mf-s-xl); }
.mf-banner-grid { display: grid; gap: 48px; align-items: center; }
.mf-banner-grid.has-media { grid-template-columns: 1.1fr .9fr; }
.mf-banner--home { min-height: min(88vh, 860px); align-content: center; }
.mf-banner--home .mf-banner-content { max-width: 760px; }
.mf-banner--interna .mf-banner-content { max-width: 820px; }
.mf-banner--interna .mf-h-banner { font-size: clamp(30px, 3.8vw, 48px); }
.mf-banner .mf-lead { margin-top: 22px; }
.mf-banner-media { border-radius: var(--mf-r-lg); overflow: hidden; box-shadow: var(--mf-shadow-lg); }
.mf-banner-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.mf-banner--home::after { content: ""; position: absolute; right: -2%; top: 50%; translate: 0 -50%; width: clamp(240px, 32vw, 460px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--mf-glass-line); box-shadow: 0 0 0 60px color-mix(in srgb, #fff 3%, transparent), 0 0 0 120px color-mix(in srgb, #fff 2%, transparent); z-index: -1; }
.mf-banner--home.has-media::after { display: none; }
@media (max-width: 900px) { .mf-banner-grid.has-media { grid-template-columns: 1fr; } .mf-banner--home { min-height: 0; } .mf-banner--home::after { display: none; } }

/* Big numbers */
.mf-stats { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 24px; }
.mf-stat { padding: 28px; border-radius: var(--mf-r-lg); background: var(--mf-glass); border: 1px solid var(--mf-glass-line); backdrop-filter: blur(14px); }
.mf-on-light .mf-stat { background: #fff; border-color: var(--mf-line); box-shadow: var(--mf-shadow-sm); }
.mf-stat-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font: 800 clamp(36px, 4.5vw, 56px)/1 var(--mf-font-head); letter-spacing: -.02em; }
.mf-stat-pre, .mf-stat-num small { font-size: .42em; font-weight: 700; letter-spacing: 0; }
.mf-stat-label { margin-top: 10px; font-weight: 500; }
@media (max-width: 760px) { .mf-stats { grid-template-columns: 1fr; } }

/* Cards (dores, cases, posts, contatos) */
.mf-cards { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 24px; }
.mf-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: var(--mf-r-lg); background: #fff; border: 1px solid var(--mf-line); box-shadow: var(--mf-shadow-sm); color: var(--mf-text); transition: transform var(--mf-t) var(--mf-ease), box-shadow var(--mf-t) var(--mf-ease), border-color var(--mf-t); }
a.mf-card:hover, .mf-card:hover { transform: translateY(-4px); box-shadow: var(--mf-shadow-md); border-color: var(--mf-primary-20); color: var(--mf-text); }
.mf-card-title { font-size: var(--mf-fs-h3); font-weight: 700; line-height: 1.3; }
.mf-card-text { color: var(--mf-text-2); font-size: 15px; }
.mf-on-dark .mf-card { background: var(--mf-glass); border-color: var(--mf-glass-line); color: #fff; box-shadow: none; }
.mf-dores .mf-card::before { content: ""; position: absolute; left: 30px; right: 30px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--mf-grad-brand); opacity: 0; transition: opacity var(--mf-t); }
.mf-dores .mf-card:hover::before { opacity: 1; }
@media (max-width: 1000px) { .mf-cards { grid-template-columns: repeat(min(var(--n, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 640px) { .mf-cards { grid-template-columns: 1fr; } }

/* Soluções: passos numerados */
.mf-steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; counter-reset: s; }
.mf-step { display: flex; gap: 18px; padding: 28px; border-radius: var(--mf-r-lg); background: #fff; border: 1px solid var(--mf-line); }
.mf-step-num { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--mf-grad-brand); color: #fff; font: 800 16px/1 var(--mf-font-head); box-shadow: var(--mf-shadow-glow); }
.mf-step .mf-card-title { margin-bottom: 8px; }

/* Diferenciais */
.mf-feature-list { display: grid; gap: 14px; }
.mf-feature { display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; border-radius: var(--mf-r); background: #fff; border: 1px solid var(--mf-line); transition: border-color var(--mf-t), box-shadow var(--mf-t); }
.mf-feature:hover { border-color: var(--mf-primary-20); box-shadow: var(--mf-shadow-sm); }
.mf-feature-title { font-size: 17px; font-weight: 700; line-height: 1.35; margin-bottom: 4px; }
.mf-media-frame { border-radius: var(--mf-r-lg); overflow: hidden; box-shadow: var(--mf-shadow-md); }
.mf-media-frame img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* App */
.mf-app-media { display: grid; place-items: center; }
.mf-phone { width: 270px; aspect-ratio: 9/18.5; border-radius: 42px; padding: 12px; background: #0b0b10; box-shadow: var(--mf-shadow-lg), 0 0 0 1px var(--mf-glass-line); rotate: 6deg; }
.mf-phone-screen { height: 100%; border-radius: 32px; background: linear-gradient(180deg, #fff, var(--mf-soft)); padding: 26px 18px; display: flex; flex-direction: column; gap: 12px; }
.mf-phone-logo { display: flex; justify-content: center; margin-bottom: 8px; }
.mf-phone-logo .mf-logo-img { height: 44px; filter: none !important; }
.mf-phone-logo .mf-logo-text { color: var(--mf-text); font-size: 16px; }
.mf-phone-row { height: 46px; border-radius: 12px; background: #fff; box-shadow: var(--mf-shadow-sm); }
.mf-phone-row--short { width: 70%; }
.mf-phone-chart { margin-top: auto; display: flex; align-items: end; gap: 10px; height: 110px; padding: 14px; border-radius: 14px; background: #fff; box-shadow: var(--mf-shadow-sm); }
.mf-phone-chart i { flex: 1; border-radius: 6px; background: var(--mf-grad-brand); }
.mf-phone-chart i:nth-child(1) { height: 40%; } .mf-phone-chart i:nth-child(2) { height: 65%; } .mf-phone-chart i:nth-child(3) { height: 52%; } .mf-phone-chart i:nth-child(4) { height: 92%; }

/* Serviços: carrossel */
.mf-carousel { position: relative; }
.mf-carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 2px 20px; }
.mf-carousel-track::-webkit-scrollbar { display: none; }
.mf-carousel-track > * { scroll-snap-align: start; }
.mf-carousel-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.mf-card--service .mf-card-top { display: flex; justify-content: space-between; align-items: center; }
.mf-card-num { font: 800 15px/1 var(--mf-font-head); color: var(--mf-muted); }
.mf-card--service .mf-btn-link { margin-top: auto; padding-top: 8px; }
@media (max-width: 1000px) { .mf-carousel-track { grid-auto-columns: calc((100% - 24px) / 2); } }
@media (max-width: 640px) { .mf-carousel-track { grid-auto-columns: 86%; } }

/* Serviços: abas */
.mf-tabs { display: grid; grid-template-columns: 340px 1fr; gap: 32px; align-items: start; }
.mf-tabs-list { display: grid; gap: 8px; }
.mf-tab { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 18px; border-radius: var(--mf-r); border: 1px solid var(--mf-line); background: #fff; color: var(--mf-text); font: 600 15px/1.3 var(--mf-font-head); text-align: left; cursor: pointer; transition: all var(--mf-t); }
.mf-tab:hover { border-color: var(--mf-primary-20); }
.mf-tab[aria-selected="true"] { background: var(--mf-grad-brand); color: #fff; border-color: transparent; box-shadow: var(--mf-shadow-glow); }
.mf-tab[aria-selected="true"] .mf-ico { --ia: #fff; --ib: color-mix(in srgb, #fff 60%, var(--mf-primary)); --ic: var(--mf-primary); }
.mf-tab-panel { padding: clamp(28px, 4vw, 48px); border-radius: var(--mf-r-lg); background: #fff; border: 1px solid var(--mf-line); box-shadow: var(--mf-shadow-md); display: flex; flex-direction: column; gap: 18px; align-items: flex-start; min-height: 100%; }
.mf-tab-panel p { color: var(--mf-text-2); font-size: 17px; }
@media (max-width: 900px) { .mf-tabs { grid-template-columns: 1fr; } .mf-tabs-list { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-bottom: 6px; } }

/* Especialidades */
.mf-panels { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 20px; }
.mf-panel { position: relative; display: flex; flex-direction: column; min-height: 380px; padding: 28px; border-radius: var(--mf-r-lg); overflow: hidden; background: var(--mf-grad-deep); color: #fff; isolation: isolate; transition: transform var(--mf-t) var(--mf-ease), box-shadow var(--mf-t); }
.mf-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px 300px at 100% 0%, color-mix(in srgb, var(--mf-primary) 60%, transparent), transparent 70%); transition: opacity var(--mf-t); }
.mf-panel.has-img::before { background: linear-gradient(180deg, transparent 20%, color-mix(in srgb, var(--mf-dark) 92%, transparent) 85%); }
.mf-panel-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--mf-ease); }
a.mf-panel:hover { color: #fff; transform: translateY(-4px); box-shadow: var(--mf-shadow-lg); }
a.mf-panel:hover .mf-panel-img { transform: scale(1.05); }
.mf-panel-index { margin-bottom: auto; padding-bottom: 24px; font: 800 15px/1 var(--mf-font-head); opacity: .7; }
.mf-panel-title { font-size: 22px; font-weight: 800; }
.mf-panel-text { margin: 10px 0 16px; color: color-mix(in srgb, #fff 80%, transparent); font-size: 15px; }
.mf-panel .mf-btn-link { color: #fff; }
@media (max-width: 1100px) { .mf-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mf-panels { grid-template-columns: 1fr; } .mf-panel { min-height: 300px; } }

/* Missão, visão e valores */
.mf-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mf-values-title { margin: 48px 0 20px; }
.mf-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 28px; }
.mf-value { display: flex; gap: 14px; padding: 18px 0; border-top: 1px solid var(--mf-line); }
.mf-value strong { font-family: var(--mf-font-head); font-size: 16px; }
.mf-value p { margin-top: 4px; color: var(--mf-text-2); font-size: 15px; }
@media (max-width: 760px) { .mf-mv { grid-template-columns: 1fr; } }

/* Equipe */
.mf-team { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 24px; }
.mf-person { flex-direction: row; align-items: flex-start; gap: 22px; }
.mf-team[style*="--n:1"] .mf-person { max-width: 880px; }
.mf-person-photo { flex: none; width: 120px; aspect-ratio: 1; border-radius: var(--mf-r); overflow: hidden; background: var(--mf-primary-10); display: grid; place-items: center; }
.mf-person-photo img { width: 100%; height: 100%; object-fit: cover; }
.mf-person-photo .mf-ico { width: 52px; height: 52px; }
.mf-person-role { color: var(--mf-primary); font-weight: 600; margin: 4px 0 10px; }
@media (max-width: 900px) { .mf-team { grid-template-columns: 1fr; } .mf-person { flex-direction: column; } }

/* Depoimentos */
.mf-quote { margin: 0; }
.mf-quote blockquote { margin: 0; }
.mf-stars { color: #f5b301; letter-spacing: 2px; }
.mf-quote figcaption { margin-top: auto; display: flex; flex-direction: column; font-size: 14px; }
.mf-quote figcaption span { color: var(--mf-muted); }

/* Cases */
.mf-case-seg { display: inline-flex; align-items: center; gap: 8px; color: var(--mf-primary); font: 700 13px/1.2 var(--mf-font-head); text-transform: uppercase; letter-spacing: .05em; }
.mf-case-seg .mf-ico { width: 20px; height: 20px; }

/* Parceiros */
.mf-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.mf-marquee-track { display: flex; gap: 56px; width: max-content; animation: mf-marquee 32s linear infinite; }
.mf-marquee:hover .mf-marquee-track { animation-play-state: paused; }
.mf-logo-item { display: grid; place-items: center; height: 64px; min-width: 140px; font: 700 18px/1 var(--mf-font-head); color: var(--mf-muted); }
.mf-logo-item img { max-height: 56px; width: auto; filter: grayscale(1); opacity: .7; transition: all var(--mf-t); }
.mf-logo-item img:hover { filter: none; opacity: 1; }
@keyframes mf-marquee { to { transform: translateX(-50%); } }

/* FAQ */
.mf-faq { display: grid; gap: 12px; }
.mf-faq-item { border-radius: var(--mf-r); background: #fff; border: 1px solid var(--mf-line); transition: border-color var(--mf-t), box-shadow var(--mf-t); }
.mf-faq-item[open] { border-color: var(--mf-primary-20); box-shadow: var(--mf-shadow-sm); }
.mf-faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; cursor: pointer; list-style: none; font: 700 16px/1.4 var(--mf-font-head); }
.mf-faq-item summary::-webkit-details-marker { display: none; }
.mf-faq-plus { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--mf-primary-10); }
.mf-faq-plus::before, .mf-faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--mf-primary); translate: -50% -50%; transition: rotate var(--mf-t); }
.mf-faq-plus::after { rotate: 90deg; }
.mf-faq-item[open] .mf-faq-plus::after { rotate: 0deg; }
.mf-faq-a { padding: 0 24px 22px; color: var(--mf-text-2); }

/* Blog (dobra e listagem) */
.mf-post { padding: 0; overflow: hidden; gap: 10px; }
.mf-post > :not(.mf-post-thumb) { margin-inline: 26px; }
.mf-post > :last-child { margin-bottom: 26px; }
.mf-post-thumb { aspect-ratio: 16/9; background: var(--mf-soft); display: grid; place-items: center; overflow: hidden; }
.mf-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mf-post-thumb .mf-ico { width: 48px; height: 48px; opacity: .6; }
.mf-post-date { margin-top: 12px !important; color: var(--mf-muted); font-size: 13px; font-weight: 600; }
.mf-pagination { margin-top: 40px; display: flex; justify-content: center; }
.mf-pagination .nav-links { display: flex; gap: 8px; }
.mf-pagination .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--mf-line); color: var(--mf-text); font-weight: 600; }
.mf-pagination .current { background: var(--mf-primary); color: #fff; border-color: var(--mf-primary); }

/* Contatos e mapa */
.mf-contact { align-items: flex-start; gap: 10px; }
.mf-contact-label { color: var(--mf-muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.mf-contact-val { font: 700 16px/1.4 var(--mf-font-head); overflow-wrap: anywhere; }
.mf-socials { display: flex; gap: 10px; margin-top: 22px; }
.mf-socials--center { justify-content: center; margin-top: 36px; }
.mf-socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mf-primary-10); color: var(--mf-primary); transition: all var(--mf-t); }
.mf-socials a:hover { background: var(--mf-primary); color: #fff; }
.mf-socials .mf-ico { width: 20px; height: 20px; }
.mf-on-dark .mf-socials a { background: var(--mf-glass); color: #fff; }
.mf-map { position: relative; border-radius: var(--mf-r-lg); overflow: hidden; box-shadow: var(--mf-shadow-md); }
.mf-map iframe { width: 100%; height: 440px; border: 0; }
.mf-map-card { position: absolute; left: 24px; bottom: 24px; max-width: 340px; padding: 22px; border-radius: var(--mf-r); background: #fff; box-shadow: var(--mf-shadow-lg); display: grid; gap: 10px; }
@media (max-width: 640px) { .mf-map-card { position: static; max-width: none; border-radius: 0; } }

/* 10 · FORMULÁRIO ───────────────────────────────────────────── */
.mf-form-grid { display: grid; grid-template-columns: 1fr 460px; gap: clamp(32px, 5vw, 72px); align-items: center; }
.mf-form-grid--hero { padding-top: 70px; }
.mf-form-copy .mf-h-banner { font-size: clamp(30px, 3.8vw, 48px); }
.mf-form-copy .mf-lead { margin-top: 18px; }
.mf-contact-mini { list-style: none; display: grid; gap: 10px; margin-top: 28px; }
.mf-contact-mini li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.mf-contact-mini .mf-ico { width: 22px; height: 22px; }
.mf-form-card { padding: clamp(24px, 3vw, 36px); border-radius: var(--mf-r-lg); background: #fff; color: var(--mf-text); box-shadow: var(--mf-shadow-lg); }
.mf-form-card p { color: var(--mf-text-2); }
.mf-field { margin-bottom: 14px; }
.mf-form input[type="text"], .mf-form input[type="tel"], .mf-form input[type="email"], .mf-form select, .mf-form textarea,
.wpcf7 input[type="text"], .wpcf7 input[type="tel"], .wpcf7 input[type="email"], .wpcf7 textarea {
  width: 100%; min-height: 52px; padding: 14px 18px; border-radius: 14px; border: 1.5px solid var(--mf-line); background: var(--mf-soft); color: var(--mf-text); font: 500 15px/1.3 var(--mf-font-body); transition: border-color var(--mf-t), background var(--mf-t), box-shadow var(--mf-t); }
.wpcf7 input:focus, .wpcf7 textarea:focus { outline: none; border-color: var(--mf-primary); background: #fff; box-shadow: 0 0 0 4px var(--mf-primary-10); }
.mf-lgpd { margin: 6px 0 18px; font-size: 13px; line-height: 1.45; color: var(--mf-text-2); }
.mf-lgpd .wpcf7-list-item { margin: 0; }
.mf-lgpd label { display: flex; gap: 10px; align-items: flex-start; }
.mf-lgpd input { margin-top: 3px; accent-color: var(--mf-primary); width: 16px; height: 16px; flex: none; }
.wpcf7 input[type="submit"], .wpcf7 .mf-btn { width: 100%; border: 0; background: var(--mf-grad-brand); color: #fff; }
.wpcf7-spinner { display: none !important; }
.wpcf7 form.submitting input[type="submit"] { opacity: .7; }
.wpcf7-not-valid-tip { font-size: 12px; margin-top: 4px; color: #d93a3a; }
.wpcf7 form .wpcf7-response-output { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; border-width: 1px; }
.wpcf7-form-control-wrap { display: block; }
@media (max-width: 960px) { .mf-form-grid { grid-template-columns: 1fr; } }

/* Revelação suave ao rolar (o JS adiciona .is-in) */
.mf-js .mf-sec .mf-wrap > * { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--mf-ease), transform 700ms var(--mf-ease); }
.mf-js .mf-sec.is-in .mf-wrap > * { opacity: 1; transform: none; }
.mf-js .mf-sec.is-in .mf-wrap > *:nth-child(2) { transition-delay: 90ms; }
.mf-js .mf-sec.is-in .mf-wrap > *:nth-child(3) { transition-delay: 180ms; }
.editor-styles-wrapper .mf-sec .mf-wrap > * { opacity: 1 !important; transform: none !important; }
.editor-styles-wrapper .mf-banner { padding-top: var(--mf-s-xl); }


/* ── ESTILOS VISUAIS (Moonflag → Identidade do cliente → Estilo) ──────────
   Mesmas dobras, caras diferentes. O HTML não muda: só tokens e efeitos. */
/* Minimalista: sem brilhos/pontilhado, fundos chapados, sombras leves */
.mf-estilo-minimalista { --mf-shadow-md: 0 6px 18px color-mix(in srgb, var(--mf-dark) 6%, transparent); --mf-shadow-lg: 0 12px 30px color-mix(in srgb, var(--mf-dark) 10%, transparent); --mf-shadow-glow: none; --mf-grad-brand: var(--mf-primary); --mf-grad-deep: var(--mf-dark); }
.mf-estilo-minimalista .mf-glow, .mf-estilo-minimalista .mf-dots, .mf-estilo-minimalista .mf-bg-suave::before, .mf-estilo-minimalista .mf-banner--home::after { display: none; }
.mf-estilo-minimalista .mf-card, .mf-estilo-minimalista .mf-step, .mf-estilo-minimalista .mf-feature { box-shadow: none; }
.mf-estilo-minimalista .mf-badge { background: none; padding: 0; border: 0; backdrop-filter: none; }
.mf-estilo-minimalista .mf-on-dark .mf-badge, .mf-estilo-minimalista .mf-badge--glass { color: color-mix(in srgb, #fff 75%, transparent); }
.mf-estilo-minimalista .mf-h-banner, .mf-estilo-minimalista .mf-h2 { font-weight: 700; letter-spacing: -.03em; }
/* Corporativo: cantos retos, bordas, nada de vidro, faixa de cor no topo das seções */
.mf-estilo-corporativo { --mf-radius: 4px; --mf-r-sm: 3px; --mf-r: 4px; --mf-r-lg: 6px; --mf-glass: color-mix(in srgb, #fff 6%, transparent); --mf-shadow-glow: none; --mf-grad-brand: linear-gradient(90deg, var(--mf-primary), var(--mf-accent)); }
.mf-estilo-corporativo .mf-glow, .mf-estilo-corporativo .mf-banner--home::after { display: none; }
.mf-estilo-corporativo .mf-card, .mf-estilo-corporativo .mf-step, .mf-estilo-corporativo .mf-feature, .mf-estilo-corporativo .mf-tab-panel { box-shadow: none; border-width: 1px; }
.mf-estilo-corporativo .mf-h2::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 18px; background: var(--mf-primary); }
.mf-estilo-corporativo .mf-center .mf-h2::after, .mf-estilo-corporativo .mf-404 .mf-h2::after { margin-inline: auto; }
.mf-estilo-corporativo .mf-badge { border-radius: 2px; }
/* Arrojado: títulos maiores e mais pesados, degradês fortes, cards com borda em degradê */
.mf-estilo-arrojado { --mf-fs-banner: clamp(38px, 6vw, 76px); --mf-fs-section: clamp(30px, 3.8vw, 48px); --mf-grad-brand: linear-gradient(120deg, var(--mf-accent) 0%, var(--mf-primary) 55%, color-mix(in srgb, var(--mf-primary) 60%, #fff) 100%); }
.mf-estilo-arrojado .mf-h-banner, .mf-estilo-arrojado .mf-h2 { font-weight: 900; letter-spacing: -.035em; }
.mf-estilo-arrojado .mf-glow { opacity: .8; filter: blur(60px); }
.mf-estilo-arrojado .mf-on-dark .mf-hl, .mf-estilo-arrojado .mf-hl { background: var(--mf-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mf-estilo-arrojado .mf-card:hover { border-color: transparent; box-shadow: 0 0 0 2px var(--mf-primary), var(--mf-shadow-md); }

/* Formato dos botões */
.mf-botao-arredondado .mf-btn, .mf-botao-arredondado .mf-badge { border-radius: 12px; }
.mf-botao-reto .mf-btn, .mf-botao-reto .mf-badge { border-radius: 2px; }
.mf-code--pad { padding-block: var(--mf-s-xl); }
.mf-code { position: relative; }