/* ===== fonts.css ===== */
/* =============================================================================
   TIPOGRAFIA DA MARCA — auto-hospedada
   Fontes variáveis, subset latino. Auto-hospedar em vez de usar CDN evita
   requisição a terceiro, elimina o salto de layout do fallback e mantém a
   tipografia sob controle do projeto (Fase 01, cap. 03).
   `swap` garante texto visível durante o carregamento; a métrica do fallback
   é ajustada abaixo para reduzir o deslocamento na troca.
   ========================================================================== */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/montserrat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* As pilhas de fallback (Georgia / EB Garamond para a display, Helvetica Neue /
   Segoe UI para a de interface) já estão declaradas em --font-display e
   --font-ui, dentro de tokens.css. Não são redefinidas aqui: tokens.css é
   intocável nesta fase, e duplicar a pilha criaria uma segunda fonte de verdade.

   Ajuste de métrica do fallback (size-adjust / ascent-override) fica como
   melhoria opcional — exige alterar as pilhas no token, o que depende de
   reabrir a Fase 01. */

/* ===== tokens.css ===== */
/* ============================================================================
   MELANIA — DESIGN TOKENS v1.0
   Arquivo canônico. Nenhum valor de cor, tamanho, espaço, raio, sombra ou
   duração pode existir no projeto fora deste arquivo.

   Arquitetura em 3 camadas:
     1. PRIMITIVOS  — valores brutos. Nunca usados diretamente em componentes.
     2. SEMÂNTICOS  — significado de uso. É o que os componentes consomem.
     3. COMPONENTE  — ajustes locais, derivados dos semânticos.

   As camadas 2 e 3 são redefinidas por superfície (Noir / Champanhe).
   ========================================================================= */

/* ==========================================================================
   1. PRIMITIVOS
   ========================================================================== */
:root {
  /* --- Neutros Noir -------------------------------------------------------
     Neutros com viés quente (matiz ~30–35°), não cinzas puros. Um cinza
     neutro ao lado do dourado lê como "azulado/sujo"; o viés quente faz o
     preto e o ouro parecerem da mesma família de luz. */
  --noir-950: #070707; /* vinhetas, overlays, sombra de fundo */
  --noir-900: #0d0d0d; /* ★ PRETO PREMIUM — oficial da identidade */
  --noir-800: #1e1e1e; /* ★ PRETO GRAFITE — oficial da identidade */
  --noir-700: #2a2825; /* superfície elevada sobre Noir (cards) */
  --noir-600: #3a3733; /* bordas fortes sobre Noir */
  --noir-500: #55504a; /* estados desabilitados sobre Noir */

  /* --- Neutros Champanhe --------------------------------------------------
     Derivados do #E6DAC6 oficial: mesma matiz (36°), saturação e luminosidade
     escalonadas. Garante que claro e escuro sejam o mesmo pigmento. */
  --champagne-50:  #fbf8f3; /* ★ BRANCO da paleta — fundo do modo Champanhe */
  --champagne-100: #f3ede4; /* superfície elevada no modo Champanhe */
  --champagne-200: #e6dac6; /* ★ CHAMPAGNE — oficial da identidade */
  --champagne-300: #d6c7af; /* bordas / divisores no modo Champanhe */
  --champagne-400: #b9ad9a; /* ★ BEGE — oficial da identidade */
  --champagne-500: #8e8477; /* texto terciário sobre Champanhe */
  --champagne-600: #6b6358; /* texto secundário sobre Champanhe (AA 5.58) */

  /* --- Ouro ---------------------------------------------------------------
     Uma única matiz (38°) em cinco luminosidades. Gold-500 é o oficial.
     Gold-600/700 existem exclusivamente para uso sobre fundo claro, onde o
     500 reprova em contraste (ver tokens semânticos). */
  --gold-300: #e3c88c; /* brilho / topo do gradiente metálico */
  --gold-400: #d4b172; /* hover sobre Noir */
  --gold-500: #cba15a; /* ★ DOURADO METÁLICO — oficial da identidade */
  --gold-600: #a8813f; /* grafismo sobre fundo claro (AA não-textual 3.37) */
  --gold-700: #7e6130; /* texto/link sobre fundo claro (AA 5.45) */

  /* --- Branco puro --------------------------------------------------------
     Restrito a altas-luzes fotográficas e ao brilho do gradiente metálico.
     Nunca é cor de texto nem de fundo: #FFF ao lado de #E6DAC6 denuncia o
     champanhe como "sujo". O branco da interface é o --champagne-50. */
  --pure-white: #ffffff;

  /* --- Folha de ouro ------------------------------------------------------
     Gradiente de 6 paradas que simula reflexo metálico anisotrópico.
     Uso exclusivo: monograma, wordmark, filetes de destaque, numerais de
     estatística. NUNCA em áreas grandes nem atrás de texto. */
  --leaf-gold: linear-gradient(
    135deg,
    #7e6130 0%, #cba15a 22%, #f0ddb0 45%,
    #cba15a 62%, #9a7737 84%, #e3c88c 100%
  );
  --leaf-gold-soft: linear-gradient(135deg, #a8813f 0%, #cba15a 50%, #e3c88c 100%);

  /* --- Filetes ------------------------------------------------------------ */
  --hairline: 1px;
  --hairline-thick: 2px;

  /* --- Escala de espaçamento (base 4px) -----------------------------------
     Progressão quase-Fibonacci. Os passos grandes (14–18) são deliberadamente
     esparsos: em layout de luxo o espaço é o material, não o resto. */
  --space-0: 0;
  --space-1: 0.25rem;  /*   4px */
  --space-2: 0.5rem;   /*   8px */
  --space-3: 0.75rem;  /*  12px */
  --space-4: 1rem;     /*  16px */
  --space-5: 1.5rem;   /*  24px */
  --space-6: 2rem;     /*  32px */
  --space-7: 2.5rem;   /*  40px */
  --space-8: 3.5rem;   /*  56px */
  --space-9: 4.5rem;   /*  72px */
  --space-10: 6rem;    /*  96px */
  --space-11: 8rem;    /* 128px */
  --space-12: 11rem;   /* 176px */
  --space-13: 15rem;   /* 240px */

  /* --- Ritmo de seção -----------------------------------------------------
     Respiro vertical fluido. O piso de 88px garante que mesmo no mobile a
     seção nunca "aperte"; o teto de 200px evita vazio gratuito em 4K. */
  --section-y: clamp(5.5rem, 3rem + 9vw, 12.5rem);
  --section-y-tight: clamp(3.5rem, 2rem + 6vw, 8rem);
  --block-gap: clamp(2.5rem, 1.5rem + 3vw, 5rem);

  /* --- Grid --------------------------------------------------------------- */
  --grid-columns: 12;
  --grid-gutter: clamp(1rem, 0.4rem + 1.6vw, 2rem);   /* 16 → 32 */
  --page-margin: clamp(1.25rem, 0.4rem + 4vw, 4.5rem); /* 20 → 72 */
  --page-max: 90rem;    /* 1440 — limite do canvas */
  --content-max: 77.5rem; /* 1240 — limite do conteúdo */
  --measure: 62ch;      /* linha de leitura confortável */
  --measure-tight: 46ch; /* subtítulos e lead */

  /* --- Tipografia: famílias ----------------------------------------------- */
  --font-display: "Cormorant Garamond", "EB Garamond", Cormorant, Didot,
    "Bodoni MT", Garamond, "Times New Roman", serif;
  --font-ui: "Montserrat", "Helvetica Neue", Inter, system-ui, -apple-system,
    "Segoe UI", Arial, sans-serif;

  /* --- Tipografia: pesos --------------------------------------------------
     A serifa vive em 300. Cormorant em 300 num corpo grande é o gesto de
     luxo — traço fino, contraste alto, muito ar dentro da própria letra.
     A sans nunca passa de 500: bold em Montserrat é linguagem de varejo. */
  --weight-display: 300;
  --weight-display-em: 400;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  /* --- Tipografia: escala fluida (razão ~1,26 — terça maior temperada) -----
     Cada nível tem min e max explícitos. Nada de "font-size: 3vw" solto:
     a escala precisa ser previsível em qualquer viewport. */
  --text-d1: clamp(3.25rem, 1.5rem + 7.2vw, 7.5rem);   /*  52 → 120 */
  --text-d2: clamp(2.5rem, 1.4rem + 4.6vw, 5.25rem);   /*  40 →  84 */
  --text-h1: clamp(2.125rem, 1.3rem + 3.4vw, 4rem);    /*  34 →  64 */
  --text-h2: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);     /*  28 →  48 */
  --text-h3: clamp(1.4375rem, 1.15rem + 1.2vw, 2.125rem); /* 23 → 34 */
  --text-h4: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); /*  20 →  26 */
  --text-h5: 1.125rem;                                  /*  18 */
  --text-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); /* 17 → 21 */
  --text-body: 1rem;                                    /*  16 */
  --text-sm: 0.875rem;                                  /*  14 */
  --text-xs: 0.8125rem;                                 /*  13 */
  --text-label: 0.6875rem;                              /*  11 — caixa alta */
  --text-micro: 0.625rem;                               /*  10 — caixa alta */

  /* --- Tipografia: entrelinha --------------------------------------------- */
  --leading-display: 1.04;
  --leading-title: 1.14;
  --leading-snug: 1.4;
  --leading-body: 1.75;  /* generoso: texto claro sobre preto exige mais ar */
  --leading-label: 1.2;

  /* --- Tipografia: escada de tracking -------------------------------------
     O DNA da marca é o espacejamento. A logo trava em 0.38em; a escada
     abaixo replica essa lógica em cada nível de hierarquia. */
  --track-display: -0.012em; /* serifa ≥ 64px: fecha para não esgarçar */
  --track-title: -0.004em;
  --track-normal: 0;
  --track-body: 0.005em;
  --track-wide: 0.06em;   /* subtítulo sans, lead */
  --track-label: 0.24em;  /* eyebrow, botão, nav, badge */
  --track-brand: 0.38em;  /* wordmark MELANIA — travado, não reajustar */

  /* --- Raios --------------------------------------------------------------
     Quase zero. Canto reto = alfaiataria; canto redondo = software.
     O raio 999px existe apenas para o pill de badge/switch. */
  --radius-none: 0;
  --radius-xs: 1px;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* --- Elevação -----------------------------------------------------------
     Sombras longas, baixa opacidade, sem desfoque colorido. Em fundo preto
     a sombra não separa: a separação vem de --border-*. Por isso as sombras
     Noir são quase inexistentes e as Champanhe fazem o trabalho. */
  --shadow-none: none;
  --shadow-1: 0 1px 2px rgba(7, 7, 7, 0.06), 0 2px 8px rgba(7, 7, 7, 0.04);
  --shadow-2: 0 2px 4px rgba(7, 7, 7, 0.05), 0 12px 28px rgba(7, 7, 7, 0.07);
  --shadow-3: 0 4px 8px rgba(7, 7, 7, 0.06), 0 28px 56px rgba(7, 7, 7, 0.10);
  --shadow-gold: 0 0 0 1px rgba(203, 161, 90, 0.28),
                 0 10px 40px rgba(203, 161, 90, 0.12);

  /* --- Movimento ----------------------------------------------------------
     Quatro durações, três curvas. Mais que isso vira inconsistência.
     A curva "aurum" (expo-out) é a assinatura: entrada rápida, parada
     longa e macia — a sensação de peso caro assentando. */
  --dur-instant: 120ms;
  --dur-fast: 220ms;
  --dur-base: 420ms;
  --dur-slow: 720ms;
  --dur-reveal: 1100ms;
  --ease-aurum: cubic-bezier(0.16, 1, 0.30, 1);   /* revelações, parallax */
  --ease-ui: cubic-bezier(0.40, 0.00, 0.20, 1);   /* hover, foco, toggle */
  --ease-exit: cubic-bezier(0.55, 0.00, 1.00, 0.45);
  --stagger: 90ms;

  /* --- Camadas ------------------------------------------------------------ */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-navbar: 200;
  --z-dropdown: 300;
  --z-drawer: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* --- Grafismos ---------------------------------------------------------- */
  --watermark-opacity: 0.045;  /* monograma M de fundo */
  --texture-opacity: 0.035;    /* grão fotográfico */
  --overlay-scrim: linear-gradient(
    180deg, rgba(7,7,7,0.72) 0%, rgba(7,7,7,0.28) 42%,
    rgba(7,7,7,0.55) 78%, rgba(7,7,7,0.88) 100%
  );

  /* --- Alvos de toque ----------------------------------------------------- */
  --tap-min: 44px;
  --control-h-sm: 40px;
  --control-h: 52px;   /* input / select padrão */
  --control-h-lg: 60px; /* botão primário — "altura premium" */
}

/* ==========================================================================
   2. SEMÂNTICOS — SUPERFÍCIE NOIR (padrão)
   Ground preto. É o modo padrão da marca: hero, serviços, resultados,
   depoimentos, CTA final e rodapé.
   ========================================================================== */
:root,
[data-surface="noir"] {
  color-scheme: dark;

  --bg-page: var(--noir-900);
  --bg-sunken: var(--noir-950);
  --bg-surface: var(--noir-800);
  --bg-raised: var(--noir-700);
  --bg-inset: rgba(255, 255, 255, 0.024);
  --bg-scrim: rgba(7, 7, 7, 0.82);

  --text-primary: var(--champagne-200);   /* 14.08:1 — AAA */
  --text-strong: var(--champagne-100);    /* 16.70:1 — AAA */
  --text-secondary: var(--champagne-400); /*  8.80:1 — AAA */
  --text-muted: var(--champagne-500);     /*  5.29:1 — AA  */
  --text-disabled: var(--noir-500);
  --text-inverse: var(--noir-900);

  --accent: var(--gold-500);              /*  8.13:1 — AAA sobre Noir */
  --accent-hover: var(--gold-400);
  --accent-quiet: rgba(203, 161, 90, 0.42);
  --accent-ghost: rgba(203, 161, 90, 0.12);
  --accent-text: var(--gold-500);

  --border-subtle: rgba(230, 218, 198, 0.09);
  --border-default: rgba(230, 218, 198, 0.16);
  --border-strong: rgba(230, 218, 198, 0.30);
  --border-accent: rgba(203, 161, 90, 0.38);

  --rule: var(--border-subtle);
  --shadow-card: var(--shadow-none);
  --card-bg: rgba(255, 255, 255, 0.028);
  --card-border: var(--border-subtle);
  --card-border-hover: var(--border-accent);

  --focus-ring: var(--gold-500);
  --focus-offset: var(--noir-900);

  --btn-primary-bg: var(--gold-500);
  --btn-primary-fg: var(--noir-900);        /* 8.13:1 */
  --btn-primary-bg-hover: var(--gold-400);
  --btn-secondary-fg: var(--champagne-200);
  --btn-secondary-border: var(--border-strong);
  --btn-ghost-fg: var(--champagne-200);

  --field-bg: rgba(255, 255, 255, 0.03);
  --field-border: var(--border-default);
  --field-border-focus: var(--gold-500);
  --field-placeholder: var(--champagne-500);
}

/* ==========================================================================
   2b. SEMÂNTICOS — SUPERFÍCIE CHAMPANHE
   Ground claro. Usado em: sobre, processo, FAQ, tabelas comparativas e
   qualquer bloco de leitura longa. A alternância Noir↔Champanhe é o ritmo
   editorial do site (ver docs/DESIGN-SYSTEM.md §7).

   CORREÇÃO DE ACESSIBILIDADE DELIBERADA: sobre fundo claro o Dourado
   oficial (#CBA15A) atinge apenas 2.26:1 — reprova para texto (4.5:1) e
   também para grafismo (3:1). Neste modo o papel do ouro passa para
   Gold-600 (grafismo, 3.37:1) e Gold-700 (texto e link, 5.45:1). Mesma
   matiz, mesma família — apenas escurecida o suficiente para ser legível.
   ========================================================================== */
[data-surface="champagne"] {
  color-scheme: light;

  --bg-page: var(--champagne-50);
  --bg-sunken: var(--champagne-100);
  --bg-surface: var(--pure-white);
  --bg-raised: var(--pure-white);
  --bg-inset: rgba(13, 13, 13, 0.022);
  --bg-scrim: rgba(251, 248, 243, 0.86);

  --text-primary: var(--noir-900);         /* 18.35:1 — AAA */
  --text-strong: var(--noir-950);
  --text-secondary: var(--champagne-600);  /*  5.58:1 — AA  */
  --text-muted: var(--champagne-500);      /*  3.47:1 — texto grande apenas */
  --text-disabled: var(--champagne-400);
  --text-inverse: var(--champagne-50);

  --accent: var(--gold-600);               /* grafismo — 3.37:1 */
  --accent-hover: var(--gold-700);
  --accent-quiet: rgba(168, 129, 63, 0.45);
  --accent-ghost: rgba(168, 129, 63, 0.10);
  --accent-text: var(--gold-700);          /* texto/link — 5.45:1 */

  --border-subtle: rgba(13, 13, 13, 0.08);
  --border-default: rgba(13, 13, 13, 0.14);
  --border-strong: rgba(13, 13, 13, 0.26);
  --border-accent: rgba(168, 129, 63, 0.42);

  --rule: var(--border-subtle);
  --shadow-card: var(--shadow-1);
  --card-bg: var(--pure-white);
  --card-border: var(--border-subtle);
  --card-border-hover: var(--border-accent);

  --focus-ring: var(--gold-700);
  --focus-offset: var(--champagne-50);

  --btn-primary-bg: var(--noir-900);
  --btn-primary-fg: var(--champagne-200);   /* 14.08:1 */
  --btn-primary-bg-hover: var(--noir-800);
  --btn-secondary-fg: var(--noir-900);
  --btn-secondary-border: var(--border-strong);
  --btn-ghost-fg: var(--noir-900);

  --field-bg: var(--pure-white);
  --field-border: var(--border-default);
  --field-border-focus: var(--gold-700);
  --field-placeholder: var(--champagne-500);
}

/* ==========================================================================
   3. FEEDBACK — estados de sistema
   Nunca são "cor da marca". São sinais funcionais, dessaturados até caberem
   no território champanhe/ouro. Verde, vermelho e azul saturados estão
   proibidos pelo briefing: usamos versões terrosas de baixa croma, e o
   significado é reforçado por ÍCONE + TEXTO, nunca só por cor.
   ========================================================================== */
:root {
  --state-success: #7d8a63;  /* oliva desaturado */
  --state-success-bg: rgba(125, 138, 99, 0.12);
  --state-warning: #c08a3e;  /* âmbar — vizinho do ouro */
  --state-warning-bg: rgba(192, 138, 62, 0.12);
  --state-danger: #a8564a;   /* terracota queimado */
  --state-danger-bg: rgba(168, 86, 74, 0.12);
  --state-info: var(--champagne-400);
  --state-info-bg: rgba(185, 173, 154, 0.12);
}

/* ==========================================================================
   4. PREFERÊNCIAS DO USUÁRIO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-reveal: 1ms;
    --stagger: 0ms;
  }
}

@media (prefers-contrast: more) {
  :root,
  [data-surface="noir"] {
    --border-subtle: rgba(230, 218, 198, 0.24);
    --border-default: rgba(230, 218, 198, 0.38);
    --text-muted: var(--champagne-400);
  }
  [data-surface="champagne"] {
    --border-subtle: rgba(13, 13, 13, 0.20);
    --border-default: rgba(13, 13, 13, 0.32);
    --text-muted: var(--champagne-600);
  }
}

/* ===== reset.css ===== */
/* =============================================================================
   MELANIA — RESET DO DOCUMENTO
   Exclusivo do site. O brand book tem o seu proprio reset, escopado em `.bk`.
   Nao espelha nenhum arquivo da Fase 01 — pode ser editado livremente.
   ========================================================================== */

/* ==========================================================================
   RESET DE DOCUMENTO
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-weight: var(--weight-light);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

:where(h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote,table,fieldset) { margin: 0; }
:where(ul,ol) { padding: 0; list-style: none; }
:where(fieldset) { padding: 0; border: 0; }
a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: var(--hairline) solid var(--focus-ring);
  outline-offset: 3px;
}

::selection { background: var(--accent); color: var(--btn-primary-fg); }

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

.u-skip-link {
  position: absolute; top: var(--space-3); left: var(--space-3);
  z-index: var(--z-toast); transform: translateY(-200%);
  background: var(--accent); color: var(--btn-primary-fg);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-micro); letter-spacing: var(--track-label);
  text-transform: uppercase;
  transition: transform var(--dur-fast) var(--ease-ui);
}
.u-skip-link:focus { transform: none; }

/* Grao — impede o preto chapado de parecer render digital (Fase 01, cap. 13) */
.u-grain::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  z-index: var(--z-tooltip); opacity: var(--texture-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== base.css ===== */
/* =============================================================================
   MELANIA — PRIMITIVAS DO DESIGN SYSTEM
   Tipografia, lockup e containers da Fase 01, capitulos 03/05/07.
   ESPELHO EXATO de design-system/parts/01-css-base.html. `site/build.py` compara
   os dois a cada build e avisa se divergirem. Nao editar de um lado so.
   ========================================================================== */
/* ==========================================================================
   PRIMITIVAS TIPOGRÁFICAS DA MARCA
   ========================================================================== */
.mp-display, .mp-title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.mp-title { line-height: var(--leading-title); letter-spacing: var(--track-title); }

.mp-d1 { font-size: var(--text-d1); }
.mp-d2 { font-size: var(--text-d2); }
.mp-h1 { font-size: var(--text-h1); }
.mp-h2 { font-size: var(--text-h2); }
.mp-h3 { font-size: var(--text-h3); }
.mp-h4 { font-size: var(--text-h4); }

/* Assinatura tipográfica nº2 — Título Bicolor. Uma linha champanhe,
   uma linha ouro. Máximo uma ocorrência por seção. */
.mp-accent-line { color: var(--accent-text); display: block; }

.mp-lead {
  font-size: var(--text-lead);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-wide);
  max-width: var(--measure-tight);
  font-weight: var(--weight-light);
}
.mp-body { max-width: var(--measure); color: var(--text-secondary); }

/* Assinatura tipográfica nº1 — Filete Aurum.
   Extraída do lockup da logo (─ PERFORMANCE ─). É o único eyebrow do sistema. */
.mp-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent-text);
  line-height: var(--leading-label);
}
.mp-eyebrow::before,
.mp-eyebrow::after {
  content: "";
  height: var(--hairline);
  background: var(--accent-quiet);
  flex: 0 0 var(--space-8);
}
.mp-eyebrow--start::before { flex-basis: var(--space-5); }
.mp-eyebrow--start::after { display: none; }
.mp-eyebrow--bare::before, .mp-eyebrow--bare::after { display: none; }

.mp-kicker {
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Wordmark e monograma — tipográficos, não vetorizados: a logo É Cormorant. */
.mp-wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--track-brand);
  text-indent: var(--track-brand); /* compensa o tracking à direita */
  line-height: 1;
}
.mp-monogram {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: 0.82;
  background: var(--leaf-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mp-lockup { display: grid; justify-items: center; gap: var(--space-3); }
.mp-lockup__rule {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  letter-spacing: var(--track-label);
  color: var(--accent-text);
}
.mp-lockup__rule::before, .mp-lockup__rule::after {
  content: ""; height: var(--hairline); width: var(--space-6);
  background: var(--accent-quiet);
}

/* ==========================================================================
   LAYOUT — containers e grid
   ========================================================================== */
.mp-container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}
.mp-container--wide { max-width: var(--page-max); }
.mp-container--reading { max-width: 58rem; }

.mp-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gutter);
}
.mp-cols-2 { display: grid; gap: var(--grid-gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.mp-cols-3 { display: grid; gap: var(--grid-gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.mp-cols-4 { display: grid; gap: var(--grid-gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }

/* ===== components.css ===== */
/* =============================================================================
   MELANIA — BIBLIOTECA DE COMPONENTES
   Fase 01, capitulo 08. Nenhum valor literal: apenas tokens semanticos.
   Nao alterar sem revisar o brand book — este arquivo alimenta os dois.
   ========================================================================== */
/* ==========================================================================
   BIBLIOTECA DE COMPONENTES — prefixo mp-
   Todo componente consome APENAS tokens semânticos. Nenhum hex literal.
   Por isso todos funcionam nas duas superfícies sem uma linha extra de CSS.
   ========================================================================== */

/* ---- BOTÕES -------------------------------------------------------------
   Três níveis apenas. Altura 60px no primário ("altura premium"), canto de
   2px, tracking de label. O hover nunca escala nem brilha: uma varredura
   metálica atravessa o botão e a seta avança 4px. */
.mp-btn {
  --btn-h: var(--control-h-lg);
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  min-height: var(--btn-h); padding-inline: var(--space-7);
  font-family: var(--font-ui); font-size: var(--text-label);
  font-weight: var(--weight-medium); letter-spacing: var(--track-label);
  text-transform: uppercase; line-height: 1;
  border: var(--hairline) solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; background: transparent; color: inherit;
  transition: background-color var(--dur-fast) var(--ease-ui),
              border-color var(--dur-fast) var(--ease-ui),
              color var(--dur-fast) var(--ease-ui);
}
.mp-btn__arrow { transition: transform var(--dur-base) var(--ease-aurum); }
.mp-btn:hover .mp-btn__arrow { transform: translateX(4px); }
.mp-btn::after { /* varredura metálica */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.22) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform var(--dur-slow) var(--ease-aurum);
}
.mp-btn:hover::after { transform: translateX(120%); }

.mp-btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.mp-btn--primary:hover { background: var(--btn-primary-bg-hover); }

.mp-btn--secondary { color: var(--btn-secondary-fg); border-color: var(--btn-secondary-border); }
.mp-btn--secondary:hover { border-color: var(--accent); color: var(--accent-text); }

.mp-btn--ghost {
  color: var(--btn-ghost-fg); padding-inline: 0; min-height: var(--control-h-sm);
  border-radius: 0;
}
.mp-btn--ghost::after { display: none; }
.mp-btn--ghost .mp-btn__label { position: relative; padding-bottom: var(--space-2); }
.mp-btn--ghost .mp-btn__label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--hairline); background: var(--accent);
  transform: scaleX(1); transform-origin: right; /* varre da direita p/ esquerda e volta */
  transition: transform var(--dur-base) var(--ease-aurum);
}
.mp-btn--ghost:hover .mp-btn__label::after { transform: scaleX(0); }

.mp-btn--sm { --btn-h: var(--control-h-sm); padding-inline: var(--space-5); font-size: var(--text-micro); }
.mp-btn[disabled], .mp-btn[aria-disabled="true"] {
  opacity: 0.4; pointer-events: none;
}
.mp-btn--block { width: 100%; }

/* ---- CARDS --------------------------------------------------------------
   Muito ar interno (56px), borda de 1px quase invisível, sem sombra no Noir.
   O hover eleva 4px e acende a borda em ouro — nada de escala. */
.mp-card {
  position: relative;
  background: var(--card-bg);
  border: var(--hairline) solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: var(--space-8) var(--space-7);
  display: grid; gap: var(--space-4); align-content: start;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease-aurum),
              border-color var(--dur-base) var(--ease-ui),
              box-shadow var(--dur-base) var(--ease-ui);
}
.mp-card--interactive:hover {
  transform: translateY(-4px);
  border-color: var(--card-border-hover);
}
.mp-card__index {
  font-variant-numeric: tabular-nums; font-size: var(--text-label);
  letter-spacing: var(--track-label); color: var(--accent-text);
}
.mp-card__title { font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--weight-display-em); line-height: var(--leading-title); }
.mp-card__text { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.75; }
.mp-card__foot { margin-top: var(--space-3); }

/* Card de mídia (serviço / resultado) */
.mp-mediacard { display: grid; gap: var(--space-5); }
.mp-mediacard__frame {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border: var(--hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.mp-mediacard__frame > .mp-photo { transition: transform var(--dur-reveal) var(--ease-aurum); }
.mp-mediacard:hover .mp-photo { transform: scale(1.03); }
.mp-mediacard__meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }

/* ---- NAVBAR -------------------------------------------------------------
   Transparente sobre o hero, opaca após 80px de rolagem. Altura 88px.
   Um único CTA emoldurado à direita — hierarquia de conversão limpa. */
.mp-navbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6);
  min-height: 5.5rem; padding-inline: var(--space-7);
  border-bottom: var(--hairline) solid var(--border-subtle);
  background: var(--bg-scrim);
  backdrop-filter: blur(14px) saturate(120%);
}
.mp-navbar__brand { display: grid; gap: 0.35rem; }
.mp-navbar__brand .mp-wordmark { font-size: 1.25rem; }
.mp-navbar__brand .mp-lockup__rule { font-size: var(--text-micro); letter-spacing: 0.3em; }
.mp-navbar__links { display: flex; align-items: center; gap: var(--space-6); }
@media (max-width: 60rem) { .mp-navbar__links { display: none; } }
.mp-navlink {
  position: relative; padding-block: var(--space-2);
  font-size: var(--text-label); font-weight: var(--weight-regular);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-ui);
}
.mp-navlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%;
  height: var(--hairline); background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-aurum);
}
.mp-navlink:hover, .mp-navlink[aria-current="page"] { color: var(--text-primary); }
.mp-navlink:hover::after, .mp-navlink[aria-current="page"]::after { transform: scaleX(1); }
.mp-burger {
  display: none; width: var(--tap-min); height: var(--tap-min);
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 6px; align-items: flex-end;
}
@media (max-width: 60rem) { .mp-burger { display: flex; } }
.mp-burger span { display: block; height: var(--hairline); background: var(--text-primary); transition: width var(--dur-fast) var(--ease-ui); }
.mp-burger span:nth-child(1) { width: 26px; }
.mp-burger span:nth-child(2) { width: 18px; }
.mp-burger:hover span:nth-child(2) { width: 26px; }

/* ---- HERO ---------------------------------------------------------------- */
.mp-hero {
  position: relative; min-height: 32rem; display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center; overflow: hidden;
  padding: var(--space-11) var(--space-7);
}
.mp-hero__content { position: relative; z-index: var(--z-raised); display: grid; gap: var(--space-6); max-width: 34rem; }
.mp-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-top: var(--space-2); }
.mp-hero__rail {
  position: absolute; left: var(--space-6); top: 50%; transform: translateY(-50%);
  display: grid; gap: var(--space-4); justify-items: center;
  font-variant-numeric: tabular-nums; font-size: var(--text-label);
  letter-spacing: var(--track-wide); color: var(--text-muted);
  z-index: var(--z-raised);
}
@media (max-width: 60rem) { .mp-hero__rail { display: none; } }
.mp-hero__rail-line { width: var(--hairline); height: 5rem; background: linear-gradient(var(--accent-quiet), transparent); }
.mp-hero__glow { /* filete de luz no rodapé do hero — assinatura */
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 22%, var(--gold-300) 50%, var(--accent) 78%, transparent);
  opacity: 0.85;
}

/* ---- BARRA DE ESTATÍSTICAS ---------------------------------------------- */
.mp-stats { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.mp-stat { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; }
.mp-stat__value {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-h2); line-height: 1; letter-spacing: var(--track-title);
  font-variant-numeric: tabular-nums;
  background: var(--leaf-gold-soft); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mp-stat__label { font-size: var(--text-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted); line-height: 1.6; }

/* ---- FORMULÁRIOS -------------------------------------------------------- */
.mp-field { display: grid; gap: var(--space-2); }
.mp-label {
  font-size: var(--text-micro); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-muted);
}
.mp-input, .mp-select, .mp-textarea {
  width: 100%; min-height: var(--control-h);
  padding: var(--space-3) var(--space-4);
  background: var(--field-bg); color: var(--text-primary);
  border: 0; border-bottom: var(--hairline) solid var(--field-border);
  border-radius: 0;
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-light);
  letter-spacing: var(--track-body);
  transition: border-color var(--dur-fast) var(--ease-ui), background-color var(--dur-fast) var(--ease-ui);
}
.mp-textarea { min-height: 8rem; resize: vertical; line-height: 1.7; }
.mp-input::placeholder, .mp-textarea::placeholder { color: var(--field-placeholder); }
.mp-input:focus, .mp-select:focus, .mp-textarea:focus {
  outline: none; border-bottom-color: var(--field-border-focus);
}
.mp-select {
  appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.15rem center, right 0.85rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--space-9);
}
.mp-help { font-size: var(--text-xs); color: var(--text-muted); }
.mp-error { font-size: var(--text-xs); color: var(--state-danger); display: flex; gap: var(--space-2); align-items: center; }
.mp-field--invalid .mp-input { border-bottom-color: var(--state-danger); }

/* Checkbox / Radio — quadrado reto e círculo, marca em ouro */
.mp-check { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; cursor: pointer; font-size: var(--text-sm); color: var(--text-secondary); }
.mp-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.mp-check__box {
  width: 18px; height: 18px; margin-top: 3px; flex: none;
  border: var(--hairline) solid var(--border-strong);
  display: grid; place-items: center;
  transition: border-color var(--dur-fast) var(--ease-ui), background-color var(--dur-fast) var(--ease-ui);
}
.mp-check__box--radio { border-radius: var(--radius-circle); }
.mp-check__box::after {
  content: ""; opacity: 0; transform: scale(0.6);
  transition: opacity var(--dur-fast) var(--ease-ui), transform var(--dur-fast) var(--ease-aurum);
}
.mp-check__box:not(.mp-check__box--radio)::after {
  width: 9px; height: 5px; margin-top: -2px;
  border-left: var(--hairline-thick) solid var(--btn-primary-fg);
  border-bottom: var(--hairline-thick) solid var(--btn-primary-fg);
  transform: rotate(-45deg) scale(0.6);
}
.mp-check__box--radio::after { width: 7px; height: 7px; border-radius: var(--radius-circle); background: var(--accent); }
.mp-check input:checked + .mp-check__box { border-color: var(--accent); }
.mp-check input:checked + .mp-check__box:not(.mp-check__box--radio) { background: var(--accent); }
.mp-check input:checked + .mp-check__box::after { opacity: 1; transform: scale(1); }
.mp-check input:checked + .mp-check__box:not(.mp-check__box--radio)::after { transform: rotate(-45deg) scale(1); }
.mp-check input:focus-visible + .mp-check__box { outline: var(--hairline) solid var(--focus-ring); outline-offset: 3px; }

/* Switch */
.mp-switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: var(--text-sm); color: var(--text-secondary); }
.mp-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.mp-switch__track {
  width: 46px; height: 24px; border-radius: var(--radius-pill);
  border: var(--hairline) solid var(--border-strong);
  padding: 3px; display: flex;
  transition: background-color var(--dur-base) var(--ease-ui), border-color var(--dur-base) var(--ease-ui);
}
.mp-switch__thumb {
  width: 16px; height: 16px; border-radius: var(--radius-circle);
  background: var(--text-secondary);
  transition: transform var(--dur-base) var(--ease-aurum), background-color var(--dur-base) var(--ease-ui);
}
.mp-switch input:checked + .mp-switch__track { border-color: var(--accent); background: var(--accent-ghost); }
.mp-switch input:checked + .mp-switch__track .mp-switch__thumb { transform: translateX(22px); background: var(--accent); }
.mp-switch input:focus-visible + .mp-switch__track { outline: var(--hairline) solid var(--focus-ring); outline-offset: 3px; }

/* ---- TABS ---------------------------------------------------------------- */
.mp-tabs__list { display: flex; gap: var(--space-7); border-bottom: var(--hairline) solid var(--rule); flex-wrap: wrap; }
.mp-tab {
  position: relative; background: none; border: 0; cursor: pointer;
  padding: 0 0 var(--space-4); font-family: var(--font-ui);
  font-size: var(--text-label); font-weight: var(--weight-regular);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text-muted); transition: color var(--dur-fast) var(--ease-ui);
}
.mp-tab::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: var(--hairline-thick);
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-aurum);
}
.mp-tab[aria-selected="true"] { color: var(--text-primary); }
.mp-tab[aria-selected="true"]::after { transform: scaleX(1); }
.mp-tabs__panel { padding-top: var(--space-6); }
.mp-tabs__panel[hidden] { display: none; }

/* ---- ACCORDION / FAQ ----------------------------------------------------- */
.mp-accordion { display: grid; }
.mp-acc { border-bottom: var(--hairline) solid var(--rule); }
.mp-acc__trigger {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-5);
  align-items: center; text-align: left; cursor: pointer;
  background: none; border: 0; color: inherit;
  padding: var(--space-6) 0; font-family: var(--font-display);
  font-size: var(--text-h4); font-weight: var(--weight-display-em);
  line-height: var(--leading-title);
  transition: color var(--dur-fast) var(--ease-ui);
}
.mp-acc__trigger:hover { color: var(--accent-text); }
.mp-acc__num { font-family: var(--font-ui); font-size: var(--text-label); letter-spacing: var(--track-label); color: var(--accent-text); font-variant-numeric: tabular-nums; }
.mp-acc__sign { position: relative; width: 14px; height: 14px; flex: none; }
.mp-acc__sign::before, .mp-acc__sign::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: currentColor; transition: transform var(--dur-base) var(--ease-aurum), opacity var(--dur-base) var(--ease-ui);
}
.mp-acc__sign::before { width: 14px; height: var(--hairline); }
.mp-acc__sign::after { width: var(--hairline); height: 14px; }
.mp-acc__trigger[aria-expanded="true"] .mp-acc__sign::after { transform: rotate(90deg); opacity: 0; }
.mp-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-aurum); }
.mp-acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.mp-acc__inner { overflow: hidden; }
.mp-acc__inner > div { padding: 0 0 var(--space-6) calc(var(--space-5) + 1.5rem); max-width: var(--measure); color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.8; }

/* ---- BADGE --------------------------------------------------------------- */
.mp-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.4rem var(--space-3);
  font-size: var(--text-micro); letter-spacing: var(--track-label);
  text-transform: uppercase; line-height: 1;
  border: var(--hairline) solid var(--border-default); color: var(--text-secondary);
  border-radius: var(--radius-sm);
}
.mp-badge--accent { border-color: var(--border-accent); color: var(--accent-text); }
.mp-badge--solid { background: var(--accent); color: var(--btn-primary-fg); border-color: transparent; }
.mp-badge--pill { border-radius: var(--radius-pill); padding-inline: var(--space-4); }

/* ---- ALERTAS / TOAST ----------------------------------------------------- */
.mp-alert {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4);
  padding: var(--space-5); border-radius: var(--radius-sm);
  border: var(--hairline) solid var(--border-subtle);
  border-left-width: var(--hairline-thick);
  font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.7;
}
.mp-alert__title { color: var(--text-primary); font-weight: var(--weight-medium); font-size: var(--text-sm); letter-spacing: var(--track-wide); }
.mp-alert--success { border-left-color: var(--state-success); background: var(--state-success-bg); }
.mp-alert--warning { border-left-color: var(--state-warning); background: var(--state-warning-bg); }
.mp-alert--danger  { border-left-color: var(--state-danger);  background: var(--state-danger-bg); }
.mp-alert--info    { border-left-color: var(--state-info);    background: var(--state-info-bg); }
.mp-alert svg { margin-top: 0.15rem; }

.mp-toast {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center;
  background: var(--bg-raised); border: var(--hairline) solid var(--border-default);
  border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-3); font-size: var(--text-sm); color: var(--text-primary);
  min-width: min(22rem, 100%);
}
.mp-toast__close { background: none; border: 0; color: var(--text-muted); cursor: pointer; line-height: 1; padding: var(--space-1); }
.mp-toast__close:hover { color: var(--text-primary); }

/* ---- TOOLTIP ------------------------------------------------------------- */
.mp-tip { position: relative; display: inline-flex; border-bottom: var(--hairline) dotted var(--border-strong); cursor: help; }
.mp-tip__bubble {
  position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 4px;
  background: var(--bg-raised); border: var(--hairline) solid var(--border-default);
  color: var(--text-primary); padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs); line-height: 1.6; width: max-content; max-width: 16rem;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-2);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-ui), translate var(--dur-fast) var(--ease-aurum);
  z-index: var(--z-tooltip);
}
.mp-tip:hover .mp-tip__bubble, .mp-tip:focus-within .mp-tip__bubble { opacity: 1; translate: -50% 0; }

/* ---- DROPDOWN ------------------------------------------------------------ */
.mp-dropdown { border: var(--hairline) solid var(--border-default); background: var(--bg-raised); border-radius: var(--radius-sm); padding: var(--space-2); min-width: 14rem; box-shadow: var(--shadow-2); }
.mp-dropdown__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-ui), color var(--dur-fast) var(--ease-ui); }
.mp-dropdown__item:hover { background: var(--accent-ghost); color: var(--text-primary); }
.mp-dropdown__sep { height: var(--hairline); background: var(--rule); margin: var(--space-2) var(--space-4); }

/* ---- MODAL / DRAWER (mostrados inline para inspeção) --------------------- */
.mp-modal {
  background: var(--bg-surface); border: var(--hairline) solid var(--border-default);
  border-radius: var(--radius-sm); padding: var(--space-8);
  display: grid; gap: var(--space-5); max-width: 30rem; box-shadow: var(--shadow-3);
}
.mp-modal__head { display: grid; gap: var(--space-3); }
.mp-modal__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); }
.mp-drawer {
  background: var(--bg-surface); border-left: var(--hairline) solid var(--border-default);
  padding: var(--space-7); display: grid; gap: var(--space-6); align-content: start;
  width: min(20rem, 100%); min-height: 20rem;
}
.mp-drawer__nav { display: grid; gap: var(--space-1); }
.mp-drawer__link { padding: var(--space-4) 0; border-bottom: var(--hairline) solid var(--rule); font-family: var(--font-display); font-size: var(--text-h4); }

/* ---- TABELA -------------------------------------------------------------- */
.mp-tablewrap { overflow-x: auto; border: var(--hairline) solid var(--border-subtle); border-radius: var(--radius-sm); }
.mp-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 34rem; }
.mp-table th, .mp-table td { text-align: left; padding: var(--space-4) var(--space-5); border-bottom: var(--hairline) solid var(--rule); }
.mp-table th { font-size: var(--text-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted); font-weight: var(--weight-medium); }
.mp-table td { color: var(--text-secondary); }
.mp-table tbody tr:last-child td { border-bottom: 0; }
.mp-table tbody tr { transition: background-color var(--dur-fast) var(--ease-ui); }
.mp-table tbody tr:hover { background: var(--bg-inset); }
.mp-table .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-primary); }

/* ---- PAGINAÇÃO / BREADCRUMB --------------------------------------------- */
.mp-pagination { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.mp-page {
  min-width: var(--tap-min); height: var(--tap-min);
  display: inline-grid; place-items: center; padding-inline: var(--space-2);
  font-size: var(--text-xs); font-variant-numeric: tabular-nums;
  color: var(--text-muted); border: var(--hairline) solid transparent;
  background: none; cursor: pointer; font-family: var(--font-ui);
  transition: color var(--dur-fast) var(--ease-ui), border-color var(--dur-fast) var(--ease-ui);
}
.mp-page:hover { color: var(--text-primary); border-color: var(--border-default); }
.mp-page[aria-current="page"] { color: var(--accent-text); border-color: var(--border-accent); }
.mp-breadcrumb { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted); }
.mp-breadcrumb li:not(:last-child)::after { content: "/"; margin-left: var(--space-3); color: var(--text-disabled); }
.mp-breadcrumb li { display: flex; align-items: center; }
.mp-breadcrumb a:hover { color: var(--accent-text); }
.mp-breadcrumb [aria-current="page"] { color: var(--text-secondary); }

/* ---- LOADING / SKELETON -------------------------------------------------- */
.mp-spinner { width: 30px; height: 30px; border-radius: var(--radius-circle); border: var(--hairline) solid var(--border-default); border-top-color: var(--accent); animation: mp-spin 900ms linear infinite; }
@keyframes mp-spin { to { transform: rotate(360deg); } }
.mp-progress { height: var(--hairline-thick); background: var(--border-subtle); overflow: hidden; }
.mp-progress__bar { height: 100%; background: var(--leaf-gold-soft); width: 62%; transition: width var(--dur-slow) var(--ease-aurum); }
.mp-skeleton { position: relative; overflow: hidden; background: var(--bg-inset); border-radius: var(--radius-xs); }
.mp-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--accent-ghost), transparent);
  transform: translateX(-100%); animation: mp-shimmer 1.6s ease-in-out infinite;
}
@keyframes mp-shimmer { to { transform: translateX(100%); } }
.mp-skeleton--line { height: 0.75rem; }
.mp-skeleton--title { height: 1.75rem; width: 65%; }
.mp-skeleton--media { aspect-ratio: 4 / 5; }
@media (prefers-reduced-motion: reduce) {
  .mp-spinner { animation-duration: 2.4s; }
  .mp-skeleton::after { animation: none; opacity: 0.5; transform: none; }
}

/* ---- TIMELINE / PROCESSO ------------------------------------------------- */
.mp-timeline { display: grid; gap: 0; }
.mp-tl {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--space-6);
  padding-block: var(--space-7); border-top: var(--hairline) solid var(--rule);
}
.mp-tl:last-child { border-bottom: var(--hairline) solid var(--rule); }
.mp-tl__num { font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--weight-display); color: var(--accent-text); font-variant-numeric: tabular-nums; line-height: 1; }
.mp-tl__body { display: grid; gap: var(--space-3); }
.mp-tl__title { font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--weight-display-em); line-height: var(--leading-title); }

/* ---- CALENDÁRIO ---------------------------------------------------------- */
.mp-cal { display: grid; gap: var(--space-5); max-width: 22rem; }
.mp-cal__head { display: flex; align-items: center; justify-content: space-between; }
.mp-cal__month { font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--weight-display-em); }
.mp-cal__nav { display: flex; gap: var(--space-2); }
.mp-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mp-cal__dow { text-align: center; font-size: var(--text-micro); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--text-muted); padding-bottom: var(--space-2); }
.mp-cal__day {
  aspect-ratio: 1; display: grid; place-items: center;
  font-size: var(--text-xs); font-variant-numeric: tabular-nums;
  color: var(--text-secondary); background: none; border: var(--hairline) solid transparent;
  cursor: pointer; font-family: var(--font-ui);
  transition: border-color var(--dur-fast) var(--ease-ui), color var(--dur-fast) var(--ease-ui);
}
.mp-cal__day:hover:not([disabled]) { border-color: var(--border-accent); color: var(--text-primary); }
.mp-cal__day[disabled] { color: var(--text-disabled); cursor: not-allowed; }
.mp-cal__day[aria-pressed="true"] { background: var(--accent); color: var(--btn-primary-fg); }
.mp-cal__day[data-today="true"] { color: var(--accent-text); }
.mp-slots { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---- SEÇÃO / CTA --------------------------------------------------------- */
.mp-section { padding-block: var(--section-y); background: var(--bg-page); color: var(--text-primary); position: relative; }
.mp-section__head { display: grid; gap: var(--space-5); margin-bottom: var(--block-gap); max-width: 46rem; }
.mp-cta { position: relative; overflow: hidden; text-align: center; display: grid; gap: var(--space-6); justify-items: center; padding: var(--space-11) var(--space-7); }
.mp-cta__watermark {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 34rem; line-height: 0.7;
  color: var(--text-primary); opacity: var(--watermark-opacity);
  pointer-events: none; user-select: none;
}
.mp-cta > * { position: relative; z-index: var(--z-raised); }

/* ---- RODAPÉ -------------------------------------------------------------- */
.mp-footer { padding: var(--space-10) var(--space-7) var(--space-6); display: grid; gap: var(--space-9); background: var(--bg-page); }
.mp-footer__top { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.mp-footer__col { display: grid; gap: var(--space-4); align-content: start; }
.mp-footer__col a { font-size: var(--text-sm); color: var(--text-secondary); transition: color var(--dur-fast) var(--ease-ui); }
.mp-footer__col a:hover { color: var(--accent-text); }
.mp-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center; padding-top: var(--space-5); border-top: var(--hairline) solid var(--rule); font-size: var(--text-micro); letter-spacing: var(--track-wide); color: var(--text-muted); }
.mp-social { display: flex; gap: var(--space-3); }
.mp-social a { width: var(--tap-min); height: var(--tap-min); display: grid; place-items: center; border: var(--hairline) solid var(--border-default); border-radius: var(--radius-circle); color: var(--text-secondary); transition: border-color var(--dur-fast) var(--ease-ui), color var(--dur-fast) var(--ease-ui); }
.mp-social a:hover { border-color: var(--accent); color: var(--accent-text); }

/* ---- FOTOGRAFIA SIMULADA ------------------------------------------------
   Não há imagens externas neste documento (CSP). Cada "foto" é uma
   composição CSS que reproduz a GRADAÇÃO especificada no guia: sombra
   fechada, uma única fonte de luz quente rasante, alta-luz champanhe. */
.mp-photo { position: absolute; inset: 0; }
.mp-photo--rim {
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(230,218,198,0.30) 0%, rgba(203,161,90,0.12) 26%, transparent 58%),
    radial-gradient(90% 70% at 22% 88%, rgba(203,161,90,0.10) 0%, transparent 60%),
    linear-gradient(160deg, #1a1815 0%, #0d0d0d 46%, #070707 100%);
}
.mp-photo--studio {
  background:
    radial-gradient(85% 65% at 50% 24%, rgba(243,237,228,0.22) 0%, transparent 62%),
    linear-gradient(180deg, #201d19 0%, #0d0d0d 72%);
}
.mp-photo--skin {
  background:
    radial-gradient(100% 80% at 62% 32%, rgba(230,218,198,0.42) 0%, rgba(185,173,154,0.16) 34%, transparent 66%),
    linear-gradient(200deg, #2a2520 0%, #14120f 58%, #070707 100%);
}
.mp-photo--linen {
  background:
    radial-gradient(90% 70% at 30% 22%, rgba(255,255,255,0.55) 0%, transparent 58%),
    linear-gradient(165deg, #f3ede4 0%, #e6dac6 52%, #b9ad9a 100%);
}
.mp-photo--metal { background: var(--leaf-gold); }
.mp-photo__scrim { position: absolute; inset: 0; background: var(--overlay-scrim); }
.mp-photo__grain {
  position: absolute; inset: 0; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
}
.mp-frame { position: relative; overflow: hidden; border: var(--hairline) solid var(--border-subtle); border-radius: var(--radius-sm); }
.mp-frame--45 { aspect-ratio: 4 / 5; }
.mp-frame--11 { aspect-ratio: 1; }
.mp-frame--169 { aspect-ratio: 16 / 9; }
.mp-frame--32 { aspect-ratio: 3 / 2; }
.mp-frame--23 { aspect-ratio: 2 / 3; }
.mp-frame__caption {
  position: absolute; left: var(--space-4); bottom: var(--space-4); z-index: 2;
  font-size: var(--text-micro); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--champagne-200);
}

/* ---- REVELAÇÃO POR SCROLL ------------------------------------------------ */
.mp-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-reveal) var(--ease-aurum), transform var(--dur-reveal) var(--ease-aurum); }
.mp-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mp-reveal { opacity: 1; transform: none; } }

/* ===== layout.css ===== */
/* =============================================================================
   MELANIA — PADRÕES DE LAYOUT
   Composições estruturais reutilizadas entre páginas. Constrói apenas sobre
   os tokens e as primitivas da Fase 01 — nenhum valor literal, nenhum token novo.
   ========================================================================== */

/* ==========================================================================
   CARREGAMENTO — cortina que revela o lockup e sai
   ========================================================================== */
/* Sem JS a cortina nunca sairia: ela só existe quando há script para removê-la. */
.mp-loader { display: none; }
.js .mp-loader {
  position: fixed; inset: 0; z-index: var(--z-toast);
  display: grid; place-items: center;
  background: var(--bg-page);
  transition: opacity var(--dur-slow) var(--ease-ui),
              visibility var(--dur-slow) var(--ease-ui);
}

.mp-loader[data-done="true"] { opacity: 0; visibility: hidden; }
.mp-loader__mark {
  display: grid; justify-items: center; gap: var(--space-4);
  animation: mp-loader-in var(--dur-slow) var(--ease-aurum) both;
}
.mp-loader__bar {
  width: clamp(6rem, 18vw, 11rem); height: var(--hairline);
  background: var(--border-default); overflow: hidden;
}
.mp-loader__bar span {
  display: block; height: 100%; width: 100%;
  background: var(--leaf-gold-soft);
  transform-origin: left; transform: scaleX(0);
  animation: mp-loader-bar 900ms var(--ease-aurum) forwards;
}
@keyframes mp-loader-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes mp-loader-bar { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .mp-loader__mark, .mp-loader__bar span { animation-duration: 1ms; }
}

/* ==========================================================================
   NAVBAR — comportamento de página (o componente base vem de components.css)
   ========================================================================== */
.mp-navbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-navbar);
  background: transparent; backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background-color var(--dur-base) var(--ease-ui),
              border-color var(--dur-base) var(--ease-ui),
              min-height var(--dur-base) var(--ease-ui);
}
.mp-navbar[data-stuck="true"] {
  min-height: 4.5rem;
  background: var(--bg-scrim);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--border-subtle);
}
.mp-navbar[data-hidden="true"] { transform: translateY(-100%); }
.mp-navbar { transition-property: background-color, border-color, min-height, transform; }

/* O topo de cada página compensa a navbar fixa.
   NOME: `mp-shell`, não `mp-page` — `.mp-page` já é o botão de paginação da
   Fase 01 (cap. 08, §17) e a colisão achatava o <main> em 44px. */
.mp-shell { padding-top: 5.5rem; }
.mp-shell--hero { padding-top: 0; }

/* ==========================================================================
   MENU MOBILE — drawer em tela cheia
   ========================================================================== */
.mp-menu {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: var(--bg-page);
  display: grid; grid-template-rows: auto 1fr auto;
  padding: var(--space-5) var(--page-margin) var(--space-8);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-ui), visibility var(--dur-base) var(--ease-ui);
}
.mp-menu[data-open="true"] { opacity: 1; visibility: visible; }
.mp-menu__head { display: flex; align-items: center; justify-content: space-between; min-height: 4.5rem; }
.mp-menu__close {
  width: var(--tap-min); height: var(--tap-min);
  background: none; border: 0; cursor: pointer;
  color: var(--text-primary); font-size: 1.25rem; line-height: 1;
}
.mp-menu__nav { align-self: center; display: grid; gap: var(--space-2); }
.mp-menu__link {
  display: block; padding: var(--space-4) 0;
  border-bottom: var(--hairline) solid var(--border-subtle);
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-h2); line-height: var(--leading-title);
  color: var(--text-primary);
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--dur-base) var(--ease-aurum),
              transform var(--dur-base) var(--ease-aurum),
              color var(--dur-fast) var(--ease-ui);
}
.mp-menu[data-open="true"] .mp-menu__link { opacity: 1; transform: none; }
.mp-menu__link:hover, .mp-menu__link[aria-current="page"] { color: var(--accent-text); }
.mp-menu__foot { display: grid; gap: var(--space-4); }

/* ==========================================================================
   HERO FULL SCREEN
   ========================================================================== */
.mp-hero--full {
  min-height: 100svh;
  align-content: center;
  /* O rodapé do hero é ancorado ao fim da dobra (abaixo), então o padding
     inferior precisa abrir espaço para ele em vez de empurrá-lo para fora. */
  padding: var(--space-10) var(--page-margin) var(--space-13);
}
.mp-hero__media { position: absolute; inset: 0; overflow: hidden; }
.mp-hero__layer {
  position: absolute; inset: -8% 0 -8% 0;
  will-change: transform;
}
/* Largura suficiente para "ESTÁ POR VIR." caber em UMA linha no corpo D1.
   Com 46rem a segunda linha quebrava e sobrava a órfã "ESTÁ" — o pior
   defeito tipográfico possível logo na primeira dobra. */
.mp-hero__content--wide { max-width: min(60rem, 100%); }
.mp-hero__content--wide .mp-lead { max-width: 34rem; }
/* Ancorado ao fim da dobra: o indicador de rolagem só cumpre a função se
   estiver visível SEM rolar. Antes ele ficava ~180px abaixo do fold. */
.mp-hero__foot {
  position: absolute; z-index: var(--z-raised);
  /* Ancorado à <section> do hero (que é `position: relative`), nunca ao
     container interno — ancorado ao container ele cai sobre o texto. */
  left: var(--page-margin); right: var(--page-margin); bottom: var(--space-7);
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  align-items: center; justify-content: space-between;
  padding-top: var(--space-5);
  border-top: var(--hairline) solid var(--border-subtle);
}
@media (max-width: 47.99rem) {
  .mp-hero__foot { position: static; margin-top: var(--space-8); }
}
.mp-scrollcue {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-micro); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-muted);
}
.mp-scrollcue__dot {
  width: 34px; height: 34px; border-radius: var(--radius-circle);
  border: var(--hairline) solid var(--border-default);
  display: grid; place-items: center;
  animation: mp-cue 2.6s var(--ease-ui) infinite;
}
@keyframes mp-cue { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .mp-scrollcue__dot { animation: none; } }

/* Revelação do título do hero por máscara vertical (Fase 01, cap. 10) */
.mp-maskline { display: block; overflow: hidden; }
.js .mp-maskline > span {
  transform: translateY(105%);
}
.mp-maskline > span {
  display: block;
  transition: transform var(--dur-reveal) var(--ease-aurum);
}
.is-ready .mp-maskline > span { transform: none; }
.mp-maskline:nth-of-type(2) > span { transition-delay: 110ms; }
@media (prefers-reduced-motion: reduce) { .mp-maskline > span { transform: none; } }

/* Trilho de índice do hero: alinhado à margem de página, não a um valor solto.
   Solto ele lia como detrito; alinhado, lê como marcação de margem editorial.
   O quadro corrente recebe o ouro; o total fica em texto apagado. */
.mp-hero__rail { left: var(--page-margin); gap: var(--space-3); }
.mp-hero__rail [data-hero-index] { color: var(--accent-text); }
.mp-hero__rail-line {
  height: 4rem;
  background: linear-gradient(var(--accent), var(--border-subtle));
}

/* ==========================================================================
   CABEÇALHO DE PÁGINA INTERNA
   ========================================================================== */
.mp-pagehead {
  position: relative; overflow: hidden;
  padding: calc(5.5rem + var(--space-10)) var(--page-margin) var(--section-y-tight);
}
.mp-pagehead__inner {
  position: relative; z-index: var(--z-raised);
  max-width: var(--content-max); margin-inline: auto;
  display: grid; gap: var(--space-5);
}
.mp-pagehead__title { max-width: 18ch; }

/* ==========================================================================
   FAIXA EDITORIAL — 5/7 assimétrica, lado alternado
   ========================================================================== */
.mp-editorial {
  display: grid;
  gap: var(--block-gap);
  align-items: center;
}
/* Abaixo de 60rem é uma coluna só — não existe grid de 12 colunas aqui.
   ATENÇÃO: um `column-gap` grande somado a `repeat(12, ...)` impõe uma largura
   mínima de 11 × gap ao contêiner inteiro e estoura a página na horizontal,
   mesmo com os filhos ocupando as 12 colunas. Por isso as 12 colunas só
   existem a partir do breakpoint em que a divisão 5/7 realmente acontece. */
@media (min-width: 60rem) {
  .mp-editorial {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gutter);
    row-gap: var(--block-gap);
  }
  .mp-editorial__media { grid-column: span 5; }
  .mp-editorial__body { grid-column: 7 / span 6; }
  .mp-editorial--flip .mp-editorial__media { grid-column: 8 / span 5; grid-row: 1; }
  .mp-editorial--flip .mp-editorial__body { grid-column: 1 / span 6; grid-row: 1; }
}
.mp-editorial__body { display: grid; gap: var(--space-5); }

/* Moldura com filete deslocado — assinatura de enquadramento */
.mp-offsetframe { position: relative; }
.mp-offsetframe::after {
  content: ""; position: absolute; inset: 0;
  border: var(--hairline) solid var(--border-accent);
  translate: var(--space-4) var(--space-4);
  pointer-events: none;
  transition: translate var(--dur-slow) var(--ease-aurum);
}
.mp-offsetframe:hover::after { translate: var(--space-3) var(--space-3); }
@media (max-width: 47.99rem) { .mp-offsetframe::after { translate: var(--space-3) var(--space-3); } }

/* ==========================================================================
   MANIFESTO — bloco de filosofia, texto grande centrado
   ========================================================================== */
.mp-manifesto {
  position: relative;
  display: grid; gap: var(--space-7); justify-items: center;
  text-align: center; max-width: 52rem; margin-inline: auto;
}
.mp-manifesto__text {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-h2); line-height: 1.32;
  letter-spacing: var(--track-title); text-wrap: balance;
}
.mp-manifesto__text em { font-style: normal; color: var(--accent-text); }
.mp-manifesto__sign {
  display: grid; gap: var(--space-2); justify-items: center;
  font-size: var(--text-micro); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-muted);
}

/* Pilares em linha, separados por filete */
.mp-pillars {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  border-top: var(--hairline) solid var(--rule);
}
.mp-pillar {
  display: grid; gap: var(--space-4); justify-items: center; text-align: center;
  padding: var(--space-8) var(--space-5);
  border-bottom: var(--hairline) solid var(--rule);
  color: var(--accent-text);
}
@media (min-width: 48rem) {
  .mp-pillar + .mp-pillar { border-left: var(--hairline) solid var(--rule); }
}
.mp-pillar__name {
  font-family: var(--font-display); font-size: var(--text-h4);
  font-weight: var(--weight-display-em); color: var(--text-primary);
  line-height: var(--leading-title);
}
.mp-pillar__text { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.75; }

/* ==========================================================================
   BENEFÍCIOS — lista de dois níveis
   ========================================================================== */
.mp-benefits {
  display: grid;
  column-gap: var(--space-9);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.mp-benefit {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-5);
  padding-block: var(--space-6);
  border-bottom: var(--hairline) solid var(--rule);
  align-items: start;
}
.mp-benefit__icon { color: var(--accent-text); padding-top: 0.2rem; }
.mp-benefit__body { display: grid; gap: var(--space-2); }
.mp-benefit__title { font-size: var(--text-h5); color: var(--text-primary); letter-spacing: var(--track-wide); }
.mp-benefit__text { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.75; }

/* ==========================================================================
   CITAÇÃO DESTACADA
   ========================================================================== */
.mp-pullquote {
  display: grid; gap: var(--space-6); justify-items: center;
  text-align: center; max-width: 44rem; margin-inline: auto;
}
.mp-pullquote__text {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-h2); line-height: 1.34;
  letter-spacing: var(--track-title); text-wrap: balance;
}
.mp-pullquote__who {
  font-size: var(--text-micro); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-muted);
}

/* ==========================================================================
   CASO DE RESULTADO — imagem única, dado medido, frase
   ========================================================================== */
.mp-result__metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-block: var(--hairline) solid var(--rule);
}
.mp-metric { display: grid; gap: var(--space-1); }
.mp-metric__value {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-h3); line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--accent-text);
}
.mp-metric__label {
  font-size: var(--text-micro); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-muted); line-height: 1.6;
}

/* ==========================================================================
   EQUIPE
   ========================================================================== */
.mp-member { display: grid; gap: var(--space-5); }
.mp-member__frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border: var(--hairline) solid var(--border-subtle); }
.mp-member__frame .mp-photo { transition: transform var(--dur-reveal) var(--ease-aurum); }
.mp-member:hover .mp-photo { transform: scale(1.03); }
.mp-member__body { display: grid; gap: var(--space-2); }
.mp-member__name { font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--weight-display-em); line-height: var(--leading-title); }
.mp-member__role { font-size: var(--text-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-text); }
.mp-member__bio { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.75; }
/* Credencial é legenda, não etiqueta: uma "badge" com setenta caracteres
   atravessando a coluna inteira lê como campo de formulário. Filete acima e
   caixa alta pequena dão a mesma leitura sem a caixa. */
.mp-member__creds {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--hairline) solid var(--rule);
  font-size: var(--text-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.9;
}
.mp-member__body { gap: var(--space-3); }
.mp-member { gap: var(--space-6); }

/* ==========================================================================
   BLOG
   ========================================================================== */
.mp-post { display: grid; gap: var(--space-5); align-content: start; }
.mp-post__frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: var(--hairline) solid var(--border-subtle); }
.mp-post__frame .mp-photo { transition: transform var(--dur-reveal) var(--ease-aurum); }
.mp-post:hover .mp-photo { transform: scale(1.03); }
.mp-post__meta { display: flex; gap: var(--space-4); font-size: var(--text-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted); }
.mp-post__title {
  font-family: var(--font-display); font-size: var(--text-h3);
  font-weight: var(--weight-display-em); line-height: var(--leading-title);
  transition: color var(--dur-fast) var(--ease-ui);
}
.mp-post:hover .mp-post__title { color: var(--accent-text); }
.mp-post__excerpt { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.75; }

.mp-post--featured { gap: var(--space-7); }
@media (min-width: 60rem) {
  .mp-post--featured { grid-template-columns: 7fr 5fr; align-items: center; }
  .mp-post--featured .mp-post__frame { aspect-ratio: 4 / 3; }
}

.mp-article { display: grid; gap: var(--space-6); max-width: var(--measure); margin-inline: auto; }
.mp-article p { color: var(--text-secondary); }
.mp-article h2 {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-h2); line-height: var(--leading-title);
  letter-spacing: var(--track-title); color: var(--text-primary);
  margin-top: var(--space-5);
}
.mp-article blockquote {
  padding-left: var(--space-6);
  border-left: var(--hairline-thick) solid var(--accent-quiet);
  font-family: var(--font-display); font-size: var(--text-h4);
  line-height: 1.5; color: var(--text-primary);
}
.mp-article ul { display: grid; gap: var(--space-3); }
.mp-article li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4);
  color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.75;
}
.mp-article li::before { content: ""; width: 14px; height: var(--hairline); background: var(--accent); margin-top: 0.85em; }

/* ==========================================================================
   ÁREA DO CLIENTE
   ========================================================================== */
.mp-auth {
  min-height: 100svh; display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 60rem) { .mp-auth { grid-template-columns: 1fr 1fr; } }
.mp-auth__aside { position: relative; overflow: hidden; display: none; }
@media (min-width: 60rem) { .mp-auth__aside { display: block; } }
.mp-auth__asideBody {
  position: absolute; inset: auto var(--space-9) var(--space-9) var(--space-9);
  z-index: var(--z-raised); display: grid; gap: var(--space-4);
}
.mp-auth__panel {
  display: grid; align-content: center; gap: var(--space-6);
  padding: var(--space-9) var(--page-margin);
  max-width: 30rem; width: 100%; margin-inline: auto;
}

.mp-dash { display: grid; gap: var(--grid-gutter); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 62rem) { .mp-dash { grid-template-columns: 17rem minmax(0, 1fr); } }
.mp-dash__aside {
  display: grid; gap: var(--space-6); align-content: start;
  padding: var(--space-7); border: var(--hairline) solid var(--border-subtle);
}
.mp-dash__nav { display: grid; gap: var(--space-1); }
.mp-dash__link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm); color: var(--text-secondary);
  border-left: var(--hairline-thick) solid transparent;
  transition: color var(--dur-fast) var(--ease-ui), border-color var(--dur-fast) var(--ease-ui), background-color var(--dur-fast) var(--ease-ui);
}
.mp-dash__link:hover { color: var(--text-primary); background: var(--bg-inset); }
.mp-dash__link[aria-current="page"] { color: var(--accent-text); border-left-color: var(--accent); }
.mp-dash__main { display: grid; gap: var(--grid-gutter); align-content: start; }
.mp-dash__row { display: grid; gap: var(--grid-gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* ==========================================================================
   BARRA DE FILTROS
   ========================================================================== */
.mp-filters {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  padding-bottom: var(--space-6);
  border-bottom: var(--hairline) solid var(--rule);
}
.mp-filter {
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-ui); font-size: var(--text-micro);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text-muted); background: none;
  border: var(--hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm); cursor: pointer; min-height: var(--tap-min);
  transition: color var(--dur-fast) var(--ease-ui), border-color var(--dur-fast) var(--ease-ui);
}
.mp-filter:hover { color: var(--text-primary); border-color: var(--border-default); }
.mp-filter[aria-pressed="true"] { color: var(--accent-text); border-color: var(--border-accent); }

/* ==========================================================================
   BLOCO DE CONTATO
   ========================================================================== */
.mp-contact { display: grid; gap: var(--block-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .mp-contact { grid-template-columns: 5fr 7fr; column-gap: var(--space-9); } }
/* A coluna de canais é mais curta que a do formulário. Sem um bloco de
   fechamento, sobravam ~300px de vazio ao lado do formulário — vazio que lê
   como erro, não como respiro. */
.mp-contact__list { display: grid; gap: var(--space-6); align-content: start; }
.mp-contact__item { display: grid; gap: var(--space-2); padding-bottom: var(--space-5); border-bottom: var(--hairline) solid var(--rule); }
.mp-contact__value { font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--weight-display-em); line-height: var(--leading-title); }
.mp-contact__value a { transition: color var(--dur-fast) var(--ease-ui); }
.mp-contact__value a:hover { color: var(--accent-text); }
.mp-formgrid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* ==========================================================================
   MARCA D'ÁGUA DE SEÇÃO
   ========================================================================== */
.mp-watermark {
  position: absolute; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: var(--weight-display);
  line-height: 0.7; color: var(--text-primary);
  opacity: var(--watermark-opacity);
  font-size: clamp(18rem, 40vw, 34rem);
  right: -0.12em; bottom: -0.22em;
}

/* ==========================================================================
   GRADES DE COMPOSIÇÃO — contagem de colunas declarada
   `.mp-cols-*` da Fase 01 é `auto-fit`: com 6 itens ele produzia 4 + 2 órfãs,
   que é exatamente a assinatura de template. Aqui a contagem é explícita, então
   6 itens sempre fecham 3 × 2 e 4 itens fecham 2 × 2.
   ========================================================================== */
.mp-tiles { display: grid; gap: var(--grid-gutter); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .mp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) {
  .mp-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   EXTENSÕES DE CARD — variantes usadas pelas páginas
   ========================================================================== */
.mp-speclist { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.mp-speclist > div {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--hairline) solid var(--rule);
}
.mp-speclist dt {
  font-size: var(--text-micro); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-muted);
}
.mp-speclist dd { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }

.mp-quotemark {
  font-family: var(--font-display); font-size: var(--text-h2);
  line-height: 0.6; color: var(--accent-text); height: 0.5em;
}
.mp-card__name { font-size: var(--text-sm); color: var(--text-primary); }
.mp-card__meta { font-size: var(--text-micro); letter-spacing: var(--track-wide); color: var(--text-muted); }
.mp-avatar {
  flex: none; width: 38px; height: 38px; border-radius: var(--radius-circle);
  display: grid; place-items: center;
  background: var(--leaf-gold-soft); color: var(--noir-900);
  font-size: var(--text-micro); letter-spacing: var(--track-wide);
}

/* Mensagem de erro dentro de um controle de marcação (checkbox de consentimento):
   o .mp-check é grid de 2 colunas, então a nota ocupa a segunda. */
.mp-check .mp-error { grid-column: 2; margin-top: var(--space-2); }
.mp-check.mp-field--invalid .mp-check__box { border-color: var(--state-danger); }

/* ==========================================================================
   CARD DE PROTOCOLO — alinhamento entre irmãos
   Os cards são esticados pela grade, mas o conteúdo interno não se alinhava:
   título, tabela de escopo e CTA caíam em alturas diferentes em cada coluna.
   A linha `1fr` na lista de escopo empurra o CTA para a base em todos.
   ========================================================================== */
.mp-protocol { grid-template-rows: auto auto auto 1fr auto; height: 100%; }
.mp-protocol .mp-speclist { align-content: start; }
.mp-protocol__meta {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: var(--hairline) solid var(--rule);
}

/* ==========================================================================
   CARD DE DIFERENCIAL — hierarquia
   Ícone e ordinal dividem a mesma linha, separados: o ordinal deixa de flutuar
   entre o ícone e o título parecendo sobra de gabarito.
   ========================================================================== */
.mp-tile__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: var(--hairline) solid var(--rule);
  color: var(--accent-text);
}
.mp-tile__n {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-micro); letter-spacing: var(--track-label);
  color: var(--text-muted);
}

/* ==========================================================================
   DEPOIMENTO — sem caixa
   A versão em card branco com sombra sobre o champanhe lia como componente de
   biblioteca. Aqui a citação é sustentada por um filete e pelo espaço, que é o
   que o resto do sistema faz.
   ========================================================================== */
.mp-testimonial {
  /* A citação ocupa `1fr` para que as assinaturas fiquem alinhadas entre as
     colunas mesmo com citações de comprimentos diferentes. */
  display: grid; grid-template-rows: 1fr auto; gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: var(--hairline-thick) solid var(--accent-quiet);
}
.mp-testimonial__text {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-h3); line-height: 1.42;
  letter-spacing: var(--track-title); color: var(--text-primary);
  text-wrap: pretty;
}
.mp-testimonial__who { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-2); }
.mp-testimonial__who > span:last-child { display: grid; }

/* ==========================================================================
   MOLDURA DE MÍDIA — placeholder declarado
   Enquanto não há fotografia definitiva, o monograma marca o quadro como
   reserva intencional. Um retângulo cinza vazio lê como imagem quebrada.
   Ao receber a foto real, troque `.mp-photo` por <picture> e remova o
   modificador `--reserva`.
   ========================================================================== */
.mp-frame:has(> .mp-photo)::after,
.mp-mediacard__frame:has(> .mp-photo)::after,
.mp-member__frame:has(> .mp-photo)::after,
.mp-post__frame:has(> .mp-photo)::after,
.mp-auth__aside:has(> .mp-hero__layer > .mp-photo)::after {
  content: "M";
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(2.5rem, 10vw, 5.5rem); line-height: 1;
  /* Meio-tom: precisa aparecer tanto sobre a reserva escura (rim, studio, skin)
     quanto sobre a clara (linen). Champanhe puro some no fundo claro. */
  color: var(--champagne-500); opacity: 0.22;
  pointer-events: none; user-select: none; z-index: 1;
}
/* A marca só existe enquanto houver `.mp-photo`. Assim que a moldura receber um
   <picture> real, o seletor deixa de casar e o monograma some — sem editar
   marcação, sem classe para lembrar de remover. */
/* Imagem real: preenche a moldura sem distorcer, e entra com um fade curto
   quando decodifica — evita o "flash" de troca. */
.mp-frame > picture, .mp-mediacard__frame > picture,
.mp-member__frame > picture, .mp-post__frame > picture { display: contents; }
.mp-frame img, .mp-mediacard__frame img,
.mp-member__frame img, .mp-post__frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-reveal) var(--ease-aurum);
}
.mp-frame figcaption { z-index: 2; }


/* ==========================================================================
   CTA FINAL — medida de leitura
   O lead centralizado quebrava em três linhas com rag ruim. Medida maior e
   `balance` fecham em duas linhas equilibradas.
   ========================================================================== */
.mp-cta .mp-lead { max-width: 46rem; text-wrap: balance; }

/* ==========================================================================
   BARRA DE ESTATÍSTICAS — composição vertical
   A versão horizontal (`auto 1fr`) da Fase 01 comprime número e rótulo lado a
   lado. Aqui cada dado vira uma coluna editorial: filete, ícone, numeral e
   rótulo empilhados. Extensão por modificador — o componente base é intocado.
   ========================================================================== */
.mp-stat--mark {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: var(--hairline) solid var(--border-default);
  align-content: start;
}
.mp-stat__icon { color: var(--accent-text); }
.mp-stat--mark .mp-stat__value { font-size: var(--text-h1); }
.mp-stat--mark .mp-stat__label { margin-top: calc(var(--space-1) * -1); }

/* ==========================================================================
   PROTOCOLO EM FAIXA EDITORIAL — página de Serviços
   Cinco protocolos numa grade de três colunas deixavam uma linha órfã de dois
   cards, que é a assinatura de template. Em faixa alternada não existe órfã, e
   cada protocolo ganha a área que o preço dele justifica.
   ========================================================================== */
.mp-protocolrow { padding-block: var(--block-gap); border-top: var(--hairline) solid var(--rule); }
.mp-protocolrow:last-child { border-bottom: var(--hairline) solid var(--rule); }
.mp-protocolrow .mp-speclist > div { grid-template-columns: 9.5rem 1fr; }
.mp-protocolrow__head {
  display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap;
}
.mp-protocolrow__n {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--text-h3); line-height: 1; color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   PILHA DE TOASTS
   ========================================================================== */
.mp-toasts {
  position: fixed; right: var(--space-5); bottom: var(--space-5);
  z-index: var(--z-toast);
  display: grid; gap: var(--space-3); justify-items: end;
  max-width: min(24rem, calc(100vw - var(--space-9)));
  pointer-events: none;
}
.mp-toasts .mp-toast {
  pointer-events: auto;
  animation: mp-toast-in var(--dur-base) var(--ease-aurum) both;
  transition: opacity var(--dur-fast) var(--ease-exit);
}
@keyframes mp-toast-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .mp-toasts .mp-toast { animation-duration: 1ms; } }

/* ==========================================================================
   REVELAÇÃO POR SCROLL — o gesto único do sistema (Fase 01, cap. 10)
   opacidade 0→1 + translateY 24px, 1100ms, curva aurum
   ========================================================================== */
/* Só esconde quando há JS para revelar. Sem JS o conteúdo nasce visível —
   caso contrário a página inteira ficaria em branco para leitores sem script,
   para crawlers que não executam JS e sempre que o bundle falhar. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--space-5)); /* 24px — Fase 01, cap. 10 */
  transition: opacity var(--dur-reveal) var(--ease-aurum),
              transform var(--dur-reveal) var(--ease-aurum);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   QUADROS DO HERO — troca manual por fade
   ========================================================================== */
.mp-hero__slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-reveal) var(--ease-ui), visibility var(--dur-reveal) var(--ease-ui);
}
.mp-hero__slide[data-active="true"] { opacity: 1; visibility: visible; }
.mp-hero__dots { display: flex; align-items: center; gap: var(--space-3); }
.mp-hero__dot {
  width: var(--tap-min); height: var(--tap-min);
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.mp-hero__dot::after {
  content: ""; width: 26px; height: var(--hairline);
  background: var(--border-strong);
  transition: background-color var(--dur-fast) var(--ease-ui), width var(--dur-base) var(--ease-aurum);
}
.mp-hero__dot:hover::after { background: var(--accent-quiet); }
.mp-hero__dot[aria-current="true"]::after { background: var(--accent); width: 40px; }

/* ==========================================================================
   UTILITÁRIOS DE COMPOSIÇÃO
   ========================================================================== */
.u-stack { display: grid; gap: var(--space-5); }
.u-stack-lg { display: grid; gap: var(--block-gap); }
.u-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.u-center { text-align: center; justify-items: center; }
.u-relative { position: relative; }
.u-clip { overflow: hidden; }
.u-divider { height: var(--hairline); background: var(--rule); border: 0; }

/* =============================================================================
   FASE 04 — ACABAMENTO
   Só refinamento: nenhum token novo, nenhum componente da Fase 01 alterado.
   ========================================================================== */

/* ==========================================================================
   TIPOGRAFIA — quebra e numerais
   ========================================================================== */

/* Título nunca com órfã: `balance` distribui as linhas em vez de empurrar uma
   palavra sozinha para a última. Parágrafo usa `pretty`, que só corrige a
   última linha — `balance` em texto longo custa caro e muda pouco. */
:where(.mp-display, .mp-title, .mp-manifesto__text, .mp-pullquote__text,
       .mp-testimonial__text, .mp-acc__trigger) { text-wrap: balance; }
:where(.mp-body, .mp-lead, .mp-card__text, .mp-benefit__text, .mp-post__excerpt,
       .mp-member__bio, .mp-acc__inner > div) { text-wrap: pretty; }

/* Colunas estreitas (card, benefício) podem hifenizar: sem isso, uma palavra
   longa em português abre um rio de espaço no texto justificado à esquerda. */
:where(.mp-card__text, .mp-benefit__text, .mp-post__excerpt, .mp-speclist dd) {
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Dado de contato precisa de numeral de caixa alta. O Cormorant usa numerais
   old-style por padrão, e "(11) 99999-9999" com o 1 e o 9 descendo abaixo da
   linha de base fica difícil de ler e de copiar. */
.mp-contact__value,
.mp-cal__month,
:where(.mp-table) td, :where(.mp-table) th { font-variant-numeric: lining-nums; }
.mp-contact__value { font-variant-numeric: lining-nums tabular-nums; }

/* Título de benefício alinhado ao resto do sistema: os demais títulos de bloco
   (card, timeline, protocolo) são serifados; este era o único em sans. */
.mp-benefit__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display-em);
  font-size: var(--text-h4);
  line-height: var(--leading-title);
  letter-spacing: var(--track-title);
}

/* ==========================================================================
   ÍCONES — mesmo peso óptico em qualquer tamanho
   Grade de 24 com traço 1,25 (Fase 01, cap. 09). Abaixo de 24 o traço precisa
   engrossar em unidades de viewBox para manter a mesma espessura na tela.
   ========================================================================== */
:where(.mp-stat__icon, .mp-benefit__icon, .mp-pillar, .mp-tile__top,
       .mp-card__foot, .mp-dash__link, .mp-alert, .mp-scrollcue__dot) > svg,
:where(.mp-dash__link, .mp-alert) svg { width: 24px; height: 24px; flex: none; }
.mp-scrollcue__dot > svg { width: 16px; height: 16px; stroke-width: 1.6; }
.mp-social svg { width: 18px; height: 18px; stroke-width: 1.6; }

/* ==========================================================================
   ESTADOS — feedback tátil e foco
   ========================================================================== */

/* O botão afunda 1px ao ser pressionado. É o menor gesto capaz de confirmar
   o toque; qualquer coisa maior vira efeito. */
.mp-btn:active:not([disabled]) { transform: translateY(1px); }
.mp-btn { transition-property: background-color, border-color, color, transform; }
.mp-btn--ghost:active { transform: none; }

.mp-page:active, .mp-filter:active, .mp-cal__day:active:not([disabled]),
.mp-hero__dot:active { transform: translateY(1px); }
:where(.mp-page, .mp-filter, .mp-cal__day, .mp-hero__dot) {
  transition: transform var(--dur-instant) var(--ease-ui),
              color var(--dur-fast) var(--ease-ui),
              border-color var(--dur-fast) var(--ease-ui);
}

/* Anel de foco: o contorno do sistema mais um halo de baixa opacidade. O
   contorno sozinho some sobre a fotografia; o halo garante o contraste. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  box-shadow: 0 0 0 4px var(--accent-ghost);
  border-radius: var(--radius-sm);
}

/* Cursor de espera enquanto um formulário processa — estado previsto, sem JS
   novo: a classe é aplicada pelo próprio envio. */
.mp-btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }

/* ==========================================================================
   HOVER — links de leitura
   O filete cresce da esquerda, no mesmo gesto da navegação e das tabs.
   ========================================================================== */
:where(.mp-footer__col, .mp-contact__value, .mp-article) a:not(.mp-btn) {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% var(--hairline);
  transition: background-size var(--dur-base) var(--ease-aurum),
              color var(--dur-fast) var(--ease-ui);
  padding-bottom: 2px;
}
:where(.mp-footer__col, .mp-contact__value, .mp-article) a:not(.mp-btn):hover {
  background-size: 100% var(--hairline);
}

/* ==========================================================================
   ROLAGEM
   ========================================================================== */

/* Barra de rolagem discreta, na paleta. Fora isso ela devolve o cinza do
   sistema operacional bem ao lado do champanhe. */
@supports (scrollbar-color: auto) {
  .js { scrollbar-color: var(--noir-600) var(--noir-900); scrollbar-width: thin; }
}

/* Âncora de rolagem respeita a navbar fixa: sem isso o título de destino
   fica escondido atrás dela. */
:where([id]) { scroll-margin-top: 7rem; }

/* Seções fora da tela não são pintadas até se aproximarem. Reduz o custo de
   renderização de páginas longas sem alterar nada visual — o `contain-intrinsic-size`
   evita que a barra de rolagem mude de tamanho enquanto se aproxima. */
/* `content-visibility: auto` mantém *paint containment* mesmo quando a seção
   entra na tela: qualquer elemento que sangre para fora dela seria recortado.
   Por isso ficam de fora as seções com marca d'água — que sangram de propósito
   — e a primeira seção, que precisa pintar imediatamente para não atrasar o LCP. */
@supports (content-visibility: auto) {
  .js .mp-section:not(:first-of-type):not(:has(.mp-watermark)):not(:has(.mp-cta)) {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
  }
}

/* Documentos legais no rodapé: presentes e discretos. Esconder política de
   privacidade é problema de conformidade, não decisão de design. */
.mp-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.mp-footer__legal a {
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-ui);
}
.mp-footer__legal a:hover { color: var(--accent-text); }

/* ==========================================================================
   COMPARTILHAMENTO
   Quatro destinos, nenhum script de terceiro. Widget de rede social carrega
   rastreador junto — aqui são apenas links e a API nativa do navegador.
   ========================================================================== */
.mp-share {
  display: grid; gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: var(--hairline) solid var(--rule);
}
.mp-share__acoes { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.mp-share__btn {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap-min); padding: 0 var(--space-5);
  border: var(--hairline) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: none; cursor: pointer; color: var(--text-secondary);
  font-family: var(--font-ui); font-size: var(--text-micro);
  letter-spacing: var(--track-label); text-transform: uppercase;
  transition: border-color var(--dur-fast) var(--ease-ui),
              color var(--dur-fast) var(--ease-ui),
              transform var(--dur-instant) var(--ease-ui);
}
.mp-share__btn:hover { border-color: var(--border-accent); color: var(--accent-text); }
.mp-share__btn:active { transform: translateY(1px); }
.mp-share__btn svg { width: 18px; height: 18px; stroke-width: 1.5; flex: none; }