/* ============================================================
   GLP PRO — LP de vendas premium
   Sistema visual "console GLP Pro": void quase-preto contínuo (não mais
   painéis claro/escuro alternados) + verde-limão da marca (agulha/glow,
   único acento saturado) + cromado prata (o "GLP" metálico do logo, reservado
   a texto de destaque e traços finos). Tipografia: IBM Plex Sans (títulos) +
   IBM Plex Mono (todo número/preço) — mesma família, legibilidade tradicional
   em vez de um display geométrico chamativo.
   ============================================================ */

:root {
    /* Base — "void": fundo dominante da página inteira, não mais só do hero */
    --color-ink: #06090B;
    --color-ink-2: #0E1712;
    --color-ink-rgb: 6, 9, 11;

    /* Marca — verde-limão do "PRO" da logo. Único acento saturado da página;
       "pine" é a variante funcional/discreta (ícones default, texto de apoio),
       "brass" é a variante "hot"/glow (CTA, badges, hover) — mesma família de
       matiz, duas intensidades, em vez de duas cores brigando entre si. */
    --color-pine: #6FA01E;
    --color-pine-rgb: 111, 160, 30;
    --color-pine-dark: #C9F06A;
    --color-pine-light: rgba(163, 214, 43, .13);

    --color-brass: #A3D62B;
    --color-brass-rgb: 163, 214, 43;
    --color-brass-light: #D9FF6B;

    /* Cromado — prata do "GLP" da logo. Só pra texto de destaque/traços finos,
       nunca pra glow ou sombra (branco/prata não "brilha" como o verde). */
    --color-chrome: #EDEFF2;
    --color-chrome-rgb: 237, 239, 242;
    --color-steel: #838C81;

    /* Superfícies — "page"/"paper" agora são chapas escuras elevadas sobre o
       void, não mais fundo quase-branco. */
    --color-page: #0E1310;
    --color-paper: #0B0F0C;
    --color-text: #E3E6E0;
    --color-text-muted: #8B9389;
    --color-border: rgba(237, 239, 242, .10);

    /* Funcionais — mantidos por convenção de reconhecimento (WhatsApp/Pix) */
    --color-whatsapp: #25D366;
    --color-whatsapp-dark: #1DA851;
    --color-whatsapp-rgb: 37, 211, 102;

    /* Alerta — vermelho de verdade, papel próprio (ausência/erro), nunca
       confundir com o âmbar do banner de dor nem com o verde da marca. */
    --color-danger: #E5484D;
    --color-danger-rgb: 229, 72, 77;
    --color-danger-light: #FF8388;

    --shadow-soft: 0 4px 14px -2px rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.3);
    --shadow-medium: 0 14px 28px -6px rgba(0,0,0,.5), 0 4px 10px -4px rgba(0,0,0,.35);
    --shadow-strong: 0 30px 50px -12px rgba(0,0,0,.6), 0 10px 20px -8px rgba(0,0,0,.4);
    --shadow-whatsapp: 0 10px 25px -5px rgba(var(--color-whatsapp-rgb),.4), 0 4px 12px -4px rgba(var(--color-whatsapp-rgb),.3);
    --shadow-whatsapp-strong: 0 16px 32px -6px rgba(var(--color-whatsapp-rgb),.5), 0 6px 16px -4px rgba(var(--color-whatsapp-rgb),.4);
    --shadow-brass: 0 14px 30px -8px rgba(var(--color-brass-rgb),.3), 0 4px 12px -4px rgba(var(--color-brass-rgb),.18);
    --shadow-brass-strong: 0 22px 42px -10px rgba(var(--color-brass-rgb),.4), 0 8px 18px -6px rgba(var(--color-brass-rgb),.24);

    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.1rem;
    --radius-xl: 1.35rem;
    --radius-2xl: 1.6rem;
    --radius-full: 9999px;

    --transition-base: 250ms ease;
}

/* ===== Grain — textura sutil sobre o void inteiro, quebra o "chapado" do
   dark-mode genérico sem precisar de imagem (SVG de ruído em data-URI,
   custa ~200 bytes). Fixo (não rola com a página), abaixo de todo conteúdo. ===== */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--color-text);
    background: var(--color-ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ===== Reskin dark-first: o HTML foi escrito originalmente pra um site claro
   e usa utilitários Tailwind (text-gray-*) direto nas tags. Em vez de editar
   centenas de classes espalhadas pelo arquivo, sobrescrevemos aqui — seletor
   "body .classe" tem especificidade maior que a classe Tailwind sozinha
   (0,1,1 > 0,1,0), então ganha independente da ordem de carregamento. ===== */
body .text-gray-900 { color: var(--color-chrome); }
body .text-gray-700 { color: var(--color-text); }
body .text-gray-600 { color: var(--color-text-muted); }
body .text-gray-500 { color: var(--color-steel); }
body .text-gray-400 { color: var(--color-steel); }
body .border-gray-100 { border-color: var(--color-border); }

.font-mono, .mp-mono {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

/* ===== Texto "cromado" — o mesmo tratamento metálico do "GLP" da logo,
   reservado só pra o nome da marca quando citado no corpo do texto (não usar
   em headline inteira nem repetir em todo canto — é a assinatura da logo,
   não um efeito de texto genérico). ===== */
.mp-chrome-text {
    background: linear-gradient(100deg, var(--color-chrome) 0%, var(--color-brass-light) 45%, var(--color-chrome) 65%, var(--color-brass) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
}

/* ===== "...ou a do concorrente?" — contraponto direto do .mp-chrome-text no
   subtítulo do hero. Mesmo vermelho de alarme já usado no mock de busca
   ("Não localizada"), reforçando a mesma ideia: perder pro concorrente é o
   alerta vermelho, sua revenda é o brilho da marca. ===== */
.mp-hero-rival {
    color: var(--color-danger-light);
}

/* ===== Foco visível (acessibilidade) ===== */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--color-brass);
    outline-offset: 2px;
}

/* ===== Header — vidro escuro (antes era vidro claro; a marca inteira agora
   vive sobre void, não faz mais sentido ter a única faixa clara da página). ===== */
.mp-navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(6, 9, 11, .72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-border);
}
.mp-nav-link {
    position: relative;
    color: var(--color-text);
    font-weight: 500;
    transition: color var(--transition-base);
}
.mp-nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    border-radius: var(--radius-full);
    background: var(--color-brass);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}
.mp-nav-link:hover {
    color: var(--color-brass);
}
.mp-nav-link:hover::after {
    transform: scaleX(1);
}

/* ===== Botões ===== */
.mp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    padding: .875rem 1.75rem;
    min-height: 48px;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.mp-btn:hover { transform: translateY(-2px) scale(1.02); }

.mp-btn-whatsapp {
    background: linear-gradient(135deg, var(--color-whatsapp), var(--color-whatsapp-dark));
    color: #fff;
    box-shadow: var(--shadow-whatsapp);
}
.mp-btn-whatsapp:hover { box-shadow: var(--shadow-whatsapp-strong); }

.mp-btn-pix {
    background: linear-gradient(135deg, #00BEB4, #008F84);
    color: #fff;
    box-shadow: 0 10px 25px -5px rgba(0,190,180,.4), 0 4px 12px -4px rgba(0,190,180,.3);
}
.mp-btn-pix:hover {
    box-shadow: 0 16px 32px -6px rgba(0,190,180,.5), 0 6px 16px -4px rgba(0,190,180,.4);
}

.mp-btn-outline {
    background: var(--color-page);
    border: 1.5px solid var(--color-border);
    color: var(--color-text);
}
.mp-btn-outline:hover {
    border-color: var(--color-brass);
    color: var(--color-pine);
}

/* Pulso único e deliberado — reservado ao CTA mais importante da página (hero) e ao
   botão flutuante. Não usado em cards/ícones/bordas (isso vira ruído visual). */
.mp-btn-glow {
    animation: mp-btn-glow-pulse 2.6s ease-in-out infinite;
}
@keyframes mp-btn-glow-pulse {
    0%, 100% { box-shadow: var(--shadow-whatsapp); }
    50% { box-shadow: 0 0 0 8px rgba(var(--color-whatsapp-rgb),0), var(--shadow-whatsapp-strong); }
}

/* ===== Selo/etiqueta "de painel" — eyebrow das seções, numeração só onde há
   sequência real (a jornada de compra: recebe → resultados → estruturas → dúvidas) ===== */
.mp-plate {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--color-pine-dark);
    padding: .4rem .9rem .4rem .7rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-brass);
    border-radius: .35rem;
    background: var(--color-paper);
}
.mp-plate-num {
    color: var(--color-brass);
    font-weight: 700;
}
.mp-plate-light {
    background: rgba(245,239,225,.08);
    border-color: rgba(245,239,225,.2);
    color: rgba(245,239,225,.92);
}
.mp-plate-light .mp-plate-num { color: var(--color-brass-light); }

/* ===== Hero ===== */
.mp-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(90% 70% at 88% -10%, rgba(var(--color-brass-rgb),.20) 0%, transparent 55%),
        radial-gradient(70% 60% at 8% 110%, rgba(var(--color-brass-rgb),.10) 0%, transparent 60%),
        linear-gradient(165deg, var(--color-ink-2) 0%, var(--color-ink) 100%);
    padding-top: clamp(3.5rem, 7vw, 6rem);
    padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
.mp-hero-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(237,239,242,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(237,239,242,.05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(85% 85% at 30% 20%, black 0%, transparent 72%);
    mask-image: radial-gradient(85% 85% at 30% 20%, black 0%, transparent 72%);
}

/* ===== Assinatura "ascensão" — o ícone de seta+barras da logo, ampliado como
   traço ambiente no hero. Se desenha sozinho ao carregar a página (stroke-
   dashoffset animado): a única animação orquestrada de entrada da página,
   reservada pra esse momento em vez de espalhada por vários elementos. ===== */
.mp-hero-ascent {
    position: absolute;
    right: -4%;
    bottom: -6%;
    width: min(52vw, 620px);
    z-index: 0;
    opacity: .5;
    pointer-events: none;
}
.mp-hero-ascent path {
    fill: none;
    stroke: url(#mp-ascent-gradient);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: mp-ascent-draw 2.4s 0.3s cubic-bezier(.22,1,.36,1) forwards;
}
.mp-hero-ascent circle {
    fill: var(--color-brass);
    opacity: 0;
    animation: mp-ascent-dot-in .6s 2.4s ease forwards;
}
@keyframes mp-ascent-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes mp-ascent-dot-in {
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .mp-hero-ascent path { stroke-dashoffset: 0; animation: none; }
    .mp-hero-ascent circle { opacity: 1; animation: none; }
}
.mp-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 3.5rem;
}
.mp-hero-visual {
    perspective: 1400px;
}
@media (min-width: 1024px) {
    .mp-hero-inner {
        grid-template-columns: 1.08fr .92fr;
        align-items: center;
    }
}

/* ===== Camada cinematográfica (GSAP + Anime.js, ver js/motion.js e skill
   lp-premium-motion). Split-text do H1 do hero: cada palavra fica num
   "postigo" com overflow escondido, revelada de baixo pra cima. ===== */
.mp-word-wrap {
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
}
.mp-word {
    display: inline-block;
    will-change: transform;
}

/* Tilt 3D do mock de busca no hero, pilotado pelo cursor (desktop only). */
#hero-tilt {
    transform-style: preserve-3d;
    will-change: transform;
}

/* ===== Barra de progresso de scroll — traço fino no topo, cresce com o
   scroll da página (GSAP ScrollTrigger scrub). Puramente decorativo, não
   compete com a navbar (fica atrás dela via z-index). ===== */
.mp-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 49;
    pointer-events: none;
}
.mp-scroll-progress span {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--color-pine), var(--color-brass-light));
    transform: scaleX(0);
    transform-origin: left;
}

/* ===== Wipe de revelação (clip-path) — usado no frame de vídeo, abre como
   uma cortina da esquerda pra direita ao entrar na tela. Estado inicial via
   CSS pra não piscar conteúdo cheio antes do JS rodar. ===== */
.mp-clip-reveal-init {
    clip-path: inset(0 100% 0 0);
}

/* Estado inicial (via CSS, não via JS) dos elementos com entrada própria do
   hero — evita flash de conteúdo visível antes do motion.js carregar/rodar.
   js/motion.js anima a partir daqui; se a lib falhar, revealInstantly()
   remove estas classes e mostra tudo direto. */
.mp-hero-fade-init {
    opacity: 0;
    transform: translateY(18px);
}
.mp-hero-title-init {
    opacity: 0;
}
.mp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(245,239,225,.08);
    color: rgba(245,239,225,.95);
    border: 1px solid rgba(245,239,225,.2);
    border-radius: var(--radius-full);
    padding: .4rem 1rem;
    font-size: .8rem;
    font-weight: 600;
}
.mp-hero-badge-dot {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--color-brass-light);
    animation: mp-pulse 1.8s infinite;
}
@keyframes mp-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}
.mp-trust-badge-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245,239,225,.08);
    border: 1px solid rgba(245,239,225,.16);
    color: var(--color-brass-light);
    flex-shrink: 0;
}

/* ===== Mock de busca — substitui o velocímetro genérico no hero por algo que
   dói de verdade: a mesma busca descrita no resto da copy ("gás perto de
   mim"), com o concorrente presente e a revenda do visitante ausente. Estático
   (sem animação em loop) — a dor já está na composição, não precisa de
   movimento pra funcionar. ===== */
.mp-search-mock {
    background: linear-gradient(165deg, var(--color-ink-2), var(--color-ink));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-strong);
    overflow: hidden;
    max-width: 380px;
    margin: 0 auto;
}
/* Barra de status de celular (horário + sinal/wifi/bateria) no lugar da barra
   de navegador genérica — vende "alguém pesquisando no celular agora", não
   "uma janela de app qualquer". Horário fixo (9:41) é a mesma convenção usada
   em mockups de produto reais (Apple etc.), não é hora real do visitante. */
.mp-search-mock-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 1.9rem;
    padding: 0 1rem;
    background: rgba(237,239,242,.04);
    border-bottom: 1px solid var(--color-border);
}
.mp-search-mock-time {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .68rem;
    font-weight: 700;
    color: var(--color-text);
}
.mp-search-mock-statusicons {
    display: flex;
    align-items: center;
    gap: .3rem;
    color: var(--color-text);
}
.mp-search-mock-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 1.1rem 1.1rem 0;
    padding: .7rem .9rem;
    background: rgba(237,239,242,.05);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text);
    font-size: .85rem;
}
.mp-search-mock-icon {
    width: 15px;
    height: 15px;
    color: var(--color-steel);
    flex-shrink: 0;
}
.mp-search-mock-mic {
    color: var(--color-steel);
    flex-shrink: 0;
    margin-left: auto;
}
/* Cursor piscando no fim do texto digitado — sugere alguém buscando *agora*,
   em tempo real, não uma legenda estática. Única animação em loop do mock
   (o resto é estático de propósito). */
.mp-search-mock-cursor {
    display: inline-block;
    width: 1.5px;
    height: .9em;
    margin-left: 2px;
    vertical-align: -2px;
    background: var(--color-brass-light);
    animation: mp-search-mock-blink 1s step-end infinite;
}
@keyframes mp-search-mock-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mp-search-mock-cursor { animation: none; }
}
.mp-search-mock-result {
    margin: 1rem 1.1rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--color-border);
}
/* Estado inicial (via CSS) dos 2 resultados — JS revela em sequência depois
   de "digitar" a busca (ver js/motion.js, initSearchMockStory), simulando a
   pesquisa acontecendo de verdade em vez de tudo estático desde o começo. */
.mp-search-result-init {
    opacity: 0;
    transform: translateY(8px);
}
.mp-search-mock-result:last-child {
    border-bottom: none;
    padding-bottom: 1.25rem;
}
.mp-search-mock-tag {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .15rem .5rem;
    border-radius: .3rem;
    background: rgba(var(--color-brass-rgb),.16);
    color: var(--color-brass-light);
    margin-bottom: .5rem;
}
.mp-search-mock-result-rival strong {
    display: block;
    color: var(--color-chrome);
    font-size: .95rem;
    font-weight: 600;
}
.mp-search-mock-result-rival .mp-search-mock-url {
    display: block;
    margin-top: .2rem;
    font-size: .78rem;
    color: var(--color-pine-dark);
}
/* Bloco "Sua revenda" — deliberadamente alarmante (vermelho, não discreto):
   é o contraponto direto do resultado nítido do concorrente logo acima, tem
   que doer, não só "aparecer meio apagado". Mesma linguagem de chip circular
   com ícone já usada no check verde da lista de preços, só que em vermelho. */
/* Seletor composto (2 classes) de propósito: ".mp-search-mock-result:last-child"
   já tem especificidade (0,2,0) por causa da pseudo-classe — um seletor de
   1 classe só aqui perderia o empate silenciosamente pro padding-bottom
   daquela regra. Empatar em (0,2,0) e vir depois no arquivo resolve certo. */
.mp-search-mock-result.mp-search-mock-result-you {
    margin: 1rem 1.1rem 1.1rem 1.1rem;
    padding: .85rem .9rem .85rem .8rem;
    background: rgba(var(--color-danger-rgb), .1);
    border: 1px solid rgba(var(--color-danger-rgb), .3);
    border-left: 3px solid var(--color-danger);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.mp-search-mock-tag-danger {
    background: rgba(var(--color-danger-rgb), .2);
    color: var(--color-danger-light);
}
.mp-search-mock-danger-line {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--color-danger-light);
    font-size: .95rem;
    font-weight: 700;
}
.mp-search-mock-x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: rgba(var(--color-danger-rgb), .25);
    color: var(--color-danger-light);
    flex-shrink: 0;
}
.mp-search-mock-result-you .mp-search-mock-url {
    display: block;
    margin-top: .3rem;
    margin-left: 1.6rem;
    font-size: .78rem;
    font-style: italic;
    color: rgba(var(--color-danger-rgb), .9);
}

/* ===== Painéis de seção (alternância clara/marfim, como painéis de um mesmo
   equipamento — hairlines em vez do gradiente "tint" azulado anterior) ===== */
.mp-section-panel {
    background: var(--color-paper);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

/* ===== Cards genéricos ===== */
.mp-card {
    background: var(--color-page);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.mp-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
}

/* ===== Moldura de ícone — gradiente radial + glow sutil em vez de tint chapado,
   lê como ícone de produto premium em vez de bullet-point ilustrado. ===== */
.mp-icon-frame {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: radial-gradient(circle at 30% 25%, rgba(var(--color-pine-rgb),.28), rgba(var(--color-pine-rgb),.1) 70%);
    border: 1px solid rgba(var(--color-pine-rgb),.22);
    box-shadow: 0 8px 16px -8px rgba(var(--color-pine-rgb),.35);
    color: var(--color-pine-dark);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.mp-icon-frame-accent,
.mp-icon-frame-brass {
    background: radial-gradient(circle at 30% 25%, rgba(var(--color-brass-rgb),.3), rgba(var(--color-brass-rgb),.1) 70%);
    border-color: rgba(var(--color-brass-rgb),.28);
    box-shadow: 0 8px 16px -8px rgba(var(--color-brass-rgb),.4);
    color: var(--color-brass-light);
}
.mp-icon-frame-whatsapp {
    background: radial-gradient(circle at 30% 25%, rgba(var(--color-whatsapp-rgb),.28), rgba(var(--color-whatsapp-rgb),.08) 70%);
    border-color: rgba(var(--color-whatsapp-rgb),.25);
    box-shadow: 0 8px 16px -8px rgba(var(--color-whatsapp-rgb),.35);
    color: var(--color-whatsapp);
}
.mp-panel:hover .mp-icon-frame {
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 10px 22px -8px rgba(var(--color-brass-rgb),.5);
}

/* ===== Banner de dor — âmbar sobre vidro escuro, deliberadamente destoante do
   verde-limão da marca pra chamar atenção (é alerta, não deveria parecer CTA).
   Estático (sem pulso em loop): o alerta já se destaca pela cor. ===== */
.mp-pain-banner {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    background: rgba(217, 162, 62, .09);
    border: 1px solid rgba(217, 162, 62, .28);
    border-left: 4px solid #D9A23E;
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    color: #EACB8F;
    font-size: .95rem;
    text-align: left;
}
/* ===== Callout de investimento fora da faixa dos planos — mesma paleta âmbar
   do pain-banner (this é a mesma família de alerta: "isso pode não se encaixar
   no que você vê acima"), mas com CTA próprio pra não deixar o visitante sem
   saída caso o investimento em anúncios seja menor que o do Plano Start. ===== */
.mp-invest-callout {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
    background: rgba(217, 162, 62, .09);
    border: 1px solid rgba(217, 162, 62, .28);
    border-left: 4px solid #D9A23E;
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
}
.mp-invest-callout-content {
    flex: 1;
    min-width: 220px;
    color: #EACB8F;
    font-size: .95rem;
    text-align: left;
}
.mp-invest-callout-cta {
    flex-shrink: 0;
    margin-left: auto;
}

/* ===== Card de dor em destaque — versão ampliada do pain-banner, com manchete
   própria. Usado uma única vez por página, no ponto de maior tensão do argumento
   (o leitor já gasta dinheiro em algo que não funciona e precisa sentir isso). ===== */
.mp-pain-feature {
    background: rgba(217, 162, 62, .07);
    border: 1px solid rgba(217, 162, 62, .25);
    border-left: 6px solid #D9A23E;
    border-radius: var(--radius-xl);
    padding: 2rem 2.25rem;
    box-shadow: var(--shadow-medium);
}
.mp-pain-feature-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #E8B860;
}
.mp-pain-feature-headline {
    margin-top: .85rem;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--color-chrome);
}
.mp-pain-feature p {
    margin-top: .85rem;
    color: #D8BE94;
    font-size: .975rem;
    line-height: 1.65;
}
.mp-pain-feature-main > p:first-of-type {
    margin-top: 1.1rem;
}
.mp-pain-feature-punch {
    font-weight: 700;
    color: var(--color-chrome) !important;
}

/* ===== Grid editorial do card de dor — argumento (esquerda) + citação de
   destaque (direita), em vez de um bloco único de texto corrido. Separa
   "o contexto" da "conclusão que dói", como uma reportagem com pull-quote,
   não um parágrafo amarelo genérico. ===== */
.mp-pain-feature-grid {
    display: grid;
    gap: 1.75rem;
}
@media (min-width: 1024px) {
    .mp-pain-feature-grid {
        grid-template-columns: 1.35fr 1fr;
        gap: 2.5rem;
        align-items: center;
    }
}
.mp-pain-feature-pull {
    position: relative;
    padding-left: 1.5rem;
    border-left: 2px solid rgba(var(--color-brass-rgb), .4);
}
.mp-pain-feature-quotemark {
    display: block;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 3.25rem;
    line-height: .6;
    color: rgba(var(--color-brass-rgb), .4);
}
.mp-pain-feature-pull .mp-pain-feature-punch {
    margin-top: .9rem;
    font-size: 1.1rem;
    line-height: 1.45;
}
.mp-pain-feature-pull .mp-pain-feature-punch + .mp-pain-feature-punch {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed rgba(var(--color-brass-rgb), .25);
    font-size: .95rem;
    font-weight: 500;
    color: #D8BE94 !important;
}

.mp-pain-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(217, 162, 62, .18);
    color: #D9A23E;
    flex-shrink: 0;
}

/* ===== Painel padrão (substitui os antigos cards de borda em degradê animado) —
   contorno fino + elevação e borda em latão só no hover, um "rebite" discreto
   no canto pra sugerir chapa/equipamento sem virar decoração. ===== */
.mp-panel {
    position: relative;
    background: var(--color-page);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 2.25rem;
    height: 100%;
    box-shadow: var(--shadow-soft);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.mp-panel::before {
    content: '';
    position: absolute;
    top: 1.15rem;
    right: 1.15rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(var(--color-brass-rgb),.45);
}
.mp-panel:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--color-brass-rgb),.55);
    box-shadow: var(--shadow-brass);
}
/* ===== Variante "lead" — o item de destaque do bento de "O que você recebe",
   maior e com leve wash da cor da marca, pra não deixar os 5 itens todos do
   mesmo peso visual (assimetria = menos "grid de template"). ===== */
.mp-panel-lead {
    background:
        radial-gradient(60% 90% at 100% 0%, rgba(var(--color-brass-rgb),.1), transparent 70%),
        linear-gradient(150deg, rgba(var(--color-brass-rgb),.07), var(--color-page) 55%);
}
.mp-panel-lead .mp-icon-frame {
    width: 4rem;
    height: 4rem;
}

/* ===== "Capinha" dos artigos/categorias do blog — sem foto real disponível,
   então a capa é o próprio ícone do tema sobre a mesma grade radial usada no
   hero (.mp-hero-grid), em vez de imagem. Card com .mp-panel vira "block" com
   isso no topo e o padding do conteúdo abaixo. ===== */
.mp-article-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: -2.25rem -2.25rem 1.5rem;
    width: calc(100% + 4.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(155deg, var(--color-ink-2), var(--color-ink));
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.mp-article-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(237,239,242,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(237,239,242,.06) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(65% 90% at 50% 50%, black 0%, transparent 75%);
    mask-image: radial-gradient(65% 90% at 50% 50%, black 0%, transparent 75%);
}
.mp-article-cover i {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--color-brass-light);
    opacity: .9;
}
.mp-article-cover.is-pine i { color: var(--color-pine-dark); }
.mp-article-cover-sm {
    aspect-ratio: 21 / 9;
}
.mp-article-cover-sm i {
    width: 2.25rem;
    height: 2.25rem;
}
.mp-panel-tag {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: .3rem .65rem;
    border-radius: var(--radius-full);
    background: var(--color-pine-light);
    color: var(--color-pine-dark);
    margin-bottom: .9rem;
}

/* ===== Passos "Como Funciona" — numeração em plate mono, ecoa o resto do
   sistema de "console" (plate/rivet) em vez de um ícone genérico de check. ===== */
.mp-step {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
}
.mp-step-num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    background: var(--color-page);
    border: 1px solid var(--color-border);
    color: var(--color-brass-light);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    font-size: .85rem;
}

/* ===== Vídeo ===== */
.mp-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-strong);
    background: linear-gradient(165deg, var(--color-ink-2), var(--color-ink));
    border: 1px solid var(--color-border);
}
.mp-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ===== Imagem de apoio (print real do anúncio) — moldura discreta, não
   compete com o sistema tipográfico novo. ===== */
.mp-proof-frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-medium);
}
.mp-proof-frame img {
    display: block;
    width: 100%;
    height: auto;
}

/* ===== Quiz de qualificação comercial (wizard multi-etapas) — substitui a
   grade de planos: em vez de mostrar preço, coleta contexto real da revenda
   e entrega isso pronto pro William no WhatsApp, num único CTA final. ===== */
.mp-quiz {
    position: relative;
    overflow: hidden;
}
.mp-quiz-progress {
    position: relative;
    height: 6px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,.08);
    overflow: hidden;
}
.mp-quiz-progress-bar {
    height: 100%;
    width: 12.5%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--color-pine), var(--color-brass-light));
    transition: width .45s ease;
}
.mp-quiz-step-label {
    margin-top: .85rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-steel);
}
.mp-quiz-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.mp-quiz-back {
    display: none;
    align-items: center;
    gap: .35rem;
    margin-top: .85rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .75rem;
    letter-spacing: .04em;
    color: var(--color-steel);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color var(--transition-base);
}
.mp-quiz-back:hover { color: var(--color-brass-light); }

.mp-quiz-stage { margin-top: 1.75rem; min-height: 220px; }
.mp-quiz-panel { display: none; }
.mp-quiz-panel.is-active { display: block; }

.mp-quiz-question {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.3;
    color: var(--color-chrome);
}

.mp-quiz-options {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1.5rem;
}
.mp-quiz-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-size: .98rem;
    font-weight: 500;
    color: var(--color-text);
    background: rgba(255,255,255,.02);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    min-height: 56px;
    cursor: pointer;
    transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-base);
}
.mp-quiz-option::after {
    content: '';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}
.mp-quiz-option:hover {
    border-color: rgba(var(--color-brass-rgb), .4);
    background: rgba(var(--color-brass-rgb), .05);
}
.mp-quiz-option.is-selected {
    border-color: var(--color-brass);
    background: rgba(var(--color-brass-rgb), .12);
}
.mp-quiz-option.is-selected::after {
    border-color: var(--color-brass);
    background: var(--color-brass);
    box-shadow: inset 0 0 0 3px var(--color-page);
}

.mp-quiz-input {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--color-chrome);
    background: rgba(255,255,255,.03);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.15rem;
    min-height: 56px;
    transition: border-color var(--transition-base), background var(--transition-base);
}
.mp-quiz-input::placeholder { color: var(--color-steel); }
.mp-quiz-input:focus {
    outline: none;
    border-color: var(--color-brass);
    background: rgba(var(--color-brass-rgb), .06);
}

.mp-btn-quiz {
    margin-top: 1.25rem;
    width: 100%;
    background: transparent;
    border: 1.5px solid var(--color-brass);
    color: var(--color-brass-light);
}
.mp-btn-quiz:hover:not(:disabled) {
    background: rgba(var(--color-brass-rgb), .1);
}
.mp-btn-quiz:disabled {
    opacity: .35;
    cursor: not-allowed;
    transform: none !important;
}

.mp-quiz-result { text-align: center; }
.mp-quiz-result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--color-brass-rgb),.22), rgba(var(--color-brass-rgb),.05));
    color: var(--color-brass-light);
    box-shadow: var(--shadow-brass);
}
.mp-quiz-result .mp-quiz-question { margin-top: 1.25rem; }
.mp-quiz-result-text {
    margin-top: .85rem;
    color: var(--color-text);
    font-size: .98rem;
    line-height: 1.55;
}
.mp-quiz-cta {
    margin-top: 1.75rem;
    width: 100%;
    font-size: 1rem;
    padding: 1.1rem 1.75rem;
}

@media (max-width: 640px) {
    .mp-quiz-question { font-size: 1.15rem; }
    .mp-quiz-option { padding: .9rem 1rem; font-size: .92rem; }
}

/* ===== Placas de investimento (preço) ===== */
.mp-price-plate {
    position: relative;
    background: var(--color-page);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-medium);
    transition: transform .3s ease, box-shadow .3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.mp-price-plate:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-strong);
}
.mp-price-plate.is-featured {
    border: 2px solid var(--color-brass);
    box-shadow: var(--shadow-brass-strong);
}
.mp-price-plate-badge {
    position: absolute;
    top: -.85rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    background: var(--color-brass);
    color: var(--color-ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .4rem 1rem;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-soft);
    white-space: nowrap;
}
.mp-price-plate-header {
    background: linear-gradient(165deg, var(--color-ink-2), var(--color-ink));
    color: #F5EFE1;
    padding: 2.1rem 1.75rem 1.75rem;
    text-align: center;
    border-radius: calc(var(--radius-2xl) - 1px) calc(var(--radius-2xl) - 1px) 0 0;
}
.mp-price-plate-tag {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(245,239,225,.72);
}
.mp-price-plate-value {
    margin-top: .6rem;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    line-height: 1;
    font-size: 2.6rem;
    color: #F5EFE1;
}
.mp-price-plate-value small {
    font-size: 1.1rem;
    font-weight: 600;
    vertical-align: top;
    color: var(--color-brass-light);
}
.mp-price-plate-sub {
    margin-top: .5rem;
    font-size: .75rem;
    color: rgba(245,239,225,.65);
}
.mp-price-plate-body {
    padding: 1.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.mp-price-list li {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
}
.mp-price-list li .mp-check {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--color-pine-light);
    color: var(--color-pine);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: .1rem;
}

/* ===== Rebites na placa de preço — mesmo "parafuso de chapa" do .mp-panel,
   só que fixado no cabeçalho escuro (canto superior), reforça a leitura de
   "placa de identificação da máquina" rebitada, não um card de SaaS genérico. ===== */
.mp-price-plate-header {
    position: relative;
}
.mp-price-plate-header::before,
.mp-price-plate-header::after {
    content: '';
    position: absolute;
    top: .95rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(245,239,225,.3);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.3);
}
.mp-price-plate-header::before { left: .95rem; }
.mp-price-plate-header::after { right: .95rem; }

/* Selo "recomendado" — substitui o pill flutuante genérico por uma tarja
   soldada dentro do próprio cabeçalho, como a etiqueta de homologação de um
   equipamento (não decora por cima, faz parte da chapa). */
.mp-price-plate-recommended {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-ink);
    background: var(--color-brass-light);
    padding: .25rem .6rem;
    border-radius: var(--radius-full);
    margin-bottom: .65rem;
}

/* ===== Tira "de série" — o que vem em qualquer um dos 2 modos, mostrado uma
   única vez pra não repetir os mesmos itens dentro dos 2 cards. ===== */
.mp-standard-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-page);
    padding: .75rem 1.5rem;
}
.mp-standard-strip-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.mp-standard-strip-items {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.75rem;
}
.mp-standard-strip-items span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 500;
    color: var(--color-text);
}
.mp-standard-strip-items i {
    color: var(--color-pine);
    flex-shrink: 0;
}

/* ===== Divisor "OU" entre os 2 modos — um seletor de painel, não um <hr>.
   Empilhado (linha horizontal) no mobile, vertical lado a lado no desktop. ===== */
.mp-plan-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
}
.mp-plan-divider::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    background: var(--color-border);
    width: 100%;
    height: 1px;
}
.mp-plan-divider span {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--color-page);
    border: 2px solid var(--color-brass);
    color: var(--color-brass);
    font-family: 'IBM Plex Mono', monospace;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    box-shadow: var(--shadow-soft);
}
@media (min-width: 1024px) {
    .mp-plan-divider::before { width: 1px; height: 100%; }
}

/* ===== Lista "ficha técnica" — linhas de especificação com regra pontilhada
   e valor alinhado à direita, no lugar do checklist genérico de SaaS. Rótulos
   iguais nos 2 cards (Domínio, Gestão dos anúncios...) pra comparação rápida;
   só o valor muda — é isso que acelera a decisão entre alugar e comprar. ===== */
.mp-spec-list li {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px dotted var(--color-border);
}
.mp-spec-list li:last-child {
    border-bottom: none;
}
.mp-spec-label {
    font-size: .85rem;
    color: var(--color-text);
    font-weight: 500;
}
.mp-spec-value {
    margin-left: auto;
    text-align: right;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--color-pine);
    white-space: nowrap;
}
.mp-spec-list li.is-muted .mp-spec-label,
.mp-spec-list li.is-muted .mp-spec-value {
    color: var(--color-text-muted);
}

/* ===== Nota de ancoragem de preço (embaixo do valor da Compra) ===== */
.mp-price-plate-anchor {
    margin-top: .35rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .68rem;
    color: rgba(245,239,225,.55);
}

/* ===== Chip de herança — substitui a frase solta "Tudo do Plano X, mais:"
   que antes ficava no corpo, repetindo em texto o que já é óbvio pela ordem
   dos cards. Fica no próprio cabeçalho (junto do nome/preço), no primeiro
   golpe de vista, e some do corpo — não duplica a mesma informação 2x. ===== */
.mp-price-plate-inherits {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .7rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: rgba(245,239,225,.62);
}
.mp-price-plate-inherits i {
    color: var(--color-brass-light);
    flex-shrink: 0;
}

/* ===== Chip de investimento em anúncios — indica pra que faixa de orçamento
   (fora da mensalidade da Máquina de Pedidos) cada plano foi pensado, ajudando
   o cliente a se auto-selecionar antes de clicar no CTA. ===== */
.mp-price-plate-invest {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .7rem;
    padding: .35rem .75rem;
    border-radius: var(--radius-full);
    background: rgba(var(--color-brass-rgb),.14);
    border: 1px solid rgba(var(--color-brass-rgb),.32);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.3;
    color: var(--color-brass-light);
    text-align: left;
}
.mp-price-plate-invest i {
    color: var(--color-brass-light);
    flex-shrink: 0;
}

/* ===== Placa "console" — variante escura reservada ao plano com atendimento
   humano ao vivo (Performance). Os planos abaixo são o painel self-service
   (chapa clara); este é o console operado por um especialista — a mudança de
   chapa é o próprio argumento de venda do plano, não decoração. ===== */
.mp-price-plate.is-console {
    background: var(--color-ink);
}
.mp-price-plate.is-console .mp-price-plate-body {
    background: transparent;
}
.mp-price-plate.is-console .mp-price-plate-body .text-gray-600,
.mp-price-plate.is-console .mp-price-plate-body .text-gray-700,
.mp-price-plate.is-console .mp-price-plate-body .text-gray-400 {
    color: rgba(245,239,225,.82);
}
.mp-price-plate.is-console .mp-check {
    background: rgba(var(--color-brass-rgb),.18);
    color: var(--color-brass-light);
}

/* ===== Par de CTAs (contato + pagamento) — espaçamento consistente entre os
   2 botões de cada placa, no lugar de margens soltas por botão. ===== */
.mp-price-plate-ctas {
    /* margin-top: auto ancora os CTAs no rodapé do card, absorvendo a
       diferença de altura entre planos com mais ou menos itens/nota de
       rodapé — sem isso, o card com menos conteúdo ficava com um vazio
       solto entre a lista e os botões em vez dos 3 alinharem no mesmo Y. */
    margin-top: auto;
    padding-top: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

/* ===== Relatório Google Ads — painel único ocupando a seção inteira; navega
   trocando os dados no lugar (ver js/motion.js initReportNavigator), nunca
   deslizando pro lado feito galeria de imagem. ===== */
.mp-report-shell {
    position: relative;
}

/* ===== Relatório Google Ads — dados reais direto no layout, no mesmo idioma
   visual do resto da página (mono pra número, pine/brass de acento, painéis
   com hairline) — nunca um cartão claro imitando screenshot de outro app.
   Reaproveita .mp-spec-list (já usada nas placas de preço) pro breakdown de
   Ligações/WhatsApp em vez de inventar componente novo. ===== */
.mp-report-native {
    background: linear-gradient(165deg, var(--color-ink-2), var(--color-ink));
    border: 1px solid rgba(237,239,242,.16);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-medium);
    padding: 1.75rem 1.75rem 2rem;
}
.mp-report-native-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}
.mp-report-native-month {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-brass-light);
}
.mp-report-native-main {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .85rem;
}
@media (min-width: 640px) {
    .mp-report-native-main { grid-template-columns: repeat(4, 1fr); }
}
.mp-report-native-stat {
    padding: 1rem 1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(237,239,242,.02);
}
.mp-report-native-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
    margin-bottom: .65rem;
}
.mp-report-native-stat-icon.is-down { background: rgba(var(--color-danger-rgb),.14); color: var(--color-danger-light); }
.mp-report-native-stat-icon.is-up { background: var(--color-pine-light); color: var(--color-pine); }
.mp-report-native-stat-icon.is-info,
.mp-report-native-stat-icon.is-accent { background: rgba(var(--color-brass-rgb),.14); color: var(--color-brass); }
.mp-report-native-value {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--color-chrome);
    line-height: 1.15;
}
.mp-report-native-value.is-up { color: var(--color-pine-dark); }
.mp-report-native-value.is-accent { color: var(--color-brass-light); }
.mp-report-native-label {
    margin-top: .4rem;
    font-size: .74rem;
    color: var(--color-text-muted);
}
.mp-report-native-sub {
    margin-top: .15rem;
    font-size: .66rem;
    color: var(--color-steel);
}

.mp-report-native-secondary {
    margin-top: .85rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
}
@media (min-width: 640px) { .mp-report-native-secondary { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .mp-report-native-secondary { grid-template-columns: repeat(6, 1fr); } }
.mp-report-native-secondary li {
    text-align: center;
    padding: .75rem .5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.mp-report-native-secondary li span {
    display: block;
    font-size: .68rem;
    color: var(--color-text-muted);
}
.mp-report-native-secondary li strong {
    display: block;
    margin-top: .3rem;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    font-size: .92rem;
    color: var(--color-chrome);
}

.mp-report-native-breakdown {
    margin-top: .85rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: .85rem;
}
@media (min-width: 640px) { .mp-report-native-breakdown { grid-template-columns: repeat(2, 1fr); } }
.mp-report-native-breakdown > div {
    padding: 1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.mp-report-native-breakdown h5 {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
    font-size: .92rem;
    color: var(--color-chrome);
}
.mp-report-native-breakdown h5 i {
    color: var(--color-brass);
}
.mp-report-native-breakdown .mp-spec-list {
    margin-top: .5rem;
}

/* ===== Toast de busca perdida — canto oposto ao botão de WhatsApp pra não
   colidir. Aparece/some em ciclo (JS controla o timing) reforçando a mesma
   ideia visual do resultado "Sua revenda" ausente no mock do hero: vermelho
   de alarme = oportunidade perdida. Conteúdo é ilustrativo/simulado. ===== */
.mp-pain-toast {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 55;
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: 300px;
    padding: .85rem 1.1rem .85rem .85rem;
    background: linear-gradient(165deg, var(--color-ink-2), var(--color-ink));
    border: 1px solid rgba(var(--color-danger-rgb),.35);
    border-left: 3px solid var(--color-danger);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-strong);
    transform: translateY(calc(100% + 1.25rem));
    opacity: 0;
    transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .4s ease;
    pointer-events: none;
}
.mp-pain-toast.is-visible {
    transform: translateY(0);
    opacity: 1;
}
.mp-pain-toast-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(var(--color-danger-rgb),.18);
    color: var(--color-danger-light);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    font-size: .8rem;
    flex-shrink: 0;
}
.mp-pain-toast-body {
    font-size: .82rem;
    line-height: 1.35;
    color: var(--color-text-muted);
}
.mp-pain-toast-body strong {
    display: block;
    color: var(--color-chrome);
    font-size: .88rem;
    font-weight: 700;
}
@media (max-width: 640px) {
    .mp-pain-toast {
        left: .75rem;
        right: .75rem;
        max-width: none;
        bottom: 5.5rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .mp-pain-toast { transition: opacity .3s ease; }
    .mp-pain-toast:not(.is-visible) { transform: none; }
}
/* ===== Barra de navegação do relatório — mês anterior/próximo + indicador,
   tudo inline numa barra só (nunca setas circulares flutuando em cima do
   conteúdo, isso é que dava a cara de "galeria de imagem"). ===== */
.mp-report-nav {
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.mp-report-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--color-text);
    padding: .6rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-page);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.mp-report-nav-btn:hover {
    border-color: var(--color-brass);
    color: var(--color-brass-light);
    box-shadow: var(--shadow-brass);
    transform: translateY(-1px);
}
.mp-report-nav-dots {
    display: flex;
    justify-content: center;
    gap: .5rem;
    order: 3;
    width: 100%;
}
@media (min-width: 640px) {
    .mp-report-nav-dots { order: 0; width: auto; }
}
.mp-report-nav-dots button {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--color-border);
    transition: background var(--transition-base), transform var(--transition-base);
}
.mp-report-nav-dots button.is-active {
    background: var(--color-brass);
    transform: scale(1.3);
}

/* ===== Faixa de estatísticas — reforço visual dos números já citados no
   texto acima (nunca um dado novo), contados via GSAP quando entram na tela.
   Lede (frase) + grid de números juntos no mesmo painel, em vez de repetir
   os 3 números em prosa E em número separadamente. ===== */
.mp-stat-band {
    padding: 1.75rem 1.75rem 2rem;
    border: 1px solid rgba(var(--color-brass-rgb),.28);
    border-radius: var(--radius-xl);
    background: linear-gradient(150deg, rgba(var(--color-brass-rgb),.09), var(--color-page) 60%);
}
.mp-stat-band-lede {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    color: var(--color-pine-dark);
    font-size: .95rem;
    line-height: 1.55;
}
.mp-stat-band-lede i {
    flex-shrink: 0;
    margin-top: .2rem;
    color: var(--color-brass);
}
/* min-width:0 é o que permite esse item flexível quebrar linha de verdade —
   sem isso (texto era nó solto, não um elemento próprio) o item flex não
   encolhia e o texto ficava espremido/cortado feio no mobile. */
.mp-stat-band-lede p {
    flex: 1;
    min-width: 0;
}
.mp-stat-band-lede strong {
    color: var(--color-chrome);
}
.mp-stat-band-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px dashed rgba(var(--color-brass-rgb),.25);
}
.mp-stat-tile {
    text-align: center;
    padding: 0 .5rem;
    position: relative;
}
.mp-stat-tile + .mp-stat-tile::before {
    content: '';
    position: absolute;
    left: -.75rem;
    top: .35rem;
    bottom: .35rem;
    width: 1px;
    background: var(--color-border);
}
.mp-stat-value {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    font-size: clamp(1.75rem, 4vw, 2.4rem);
    line-height: 1;
    color: var(--color-brass-light);
}
.mp-stat-label {
    margin-top: .6rem;
    font-size: .78rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}
@media (max-width: 640px) {
    .mp-stat-band-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .mp-stat-tile + .mp-stat-tile::before { left: 0; right: 0; top: -.65rem; bottom: auto; width: auto; height: 1px; }
}

/* ===== Reveal on scroll — estado inicial só; a animação em si é pilotada
   pelo GSAP (js/motion.js), nunca por transition CSS (as duas competindo no
   mesmo frame gera jank). Sem JS/GSAP carregado, motion.js aplica o estado
   final direto — nunca depende só desta classe. ===== */
[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
}
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; }
}

/* ===== FAQ (usa <details>/<summary> nativo, sem JS) ===== */
.mp-faq-item {
    background: var(--color-page);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition-base);
}
.mp-faq-item:hover,
.mp-faq-item[open] {
    border-color: rgba(var(--color-brass-rgb),.5);
}
.mp-faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 1.25rem 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    gap: 1rem;
}
.mp-faq-item summary::-webkit-details-marker { display: none; }
.mp-faq-item summary .mp-faq-icon {
    transition: transform var(--transition-base);
    flex-shrink: 0;
    color: var(--color-brass);
}
.mp-faq-item[open] summary .mp-faq-icon {
    transform: rotate(180deg);
}
.mp-faq-item .mp-faq-body {
    box-sizing: border-box;
    padding: 0 1.5rem 1.25rem;
    color: var(--color-text-muted);
}

/* ===== WhatsApp flutuante ===== */
.mp-whatsapp-float {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 60;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-whatsapp), var(--color-whatsapp-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-whatsapp-strong);
    transition: transform var(--transition-base);
    animation: mp-float-pulse 2.6s infinite;
}
.mp-whatsapp-float:hover { transform: scale(1.08); }

@keyframes mp-float-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-whatsapp-rgb),.4), var(--shadow-whatsapp-strong); }
    50% { box-shadow: 0 0 0 12px rgba(var(--color-whatsapp-rgb),0), var(--shadow-whatsapp-strong); }
}

@media (prefers-reduced-motion: reduce) {
    .mp-whatsapp-float { animation: none; }
    .mp-btn-glow { animation: none; }
    .mp-hero-badge-dot { animation: none; }
}

/* ===== Logo ===== */
/* Wordmark GLP Pro é clara (branco + verde-limão) sobre fundo transparente —
   lê bem em qualquer lugar agora que a página inteira é escura (o navbar
   deixou de ser a única faixa clara, não precisa mais de placa própria por
   trás da logo). */
.mp-logo-mark {
    display: inline-flex;
    align-items: center;
}

/* ===== Mobile menu ===== */
#mp-mobile-menu {
    display: none;
}
#mp-mobile-menu.is-open {
    display: block;
}