/* GERADO por tools/build_css_bundles.php — NÃO editar à mão.
   fontes-hash: d27716ba23bf
   fontes: assets/css/_typography.css, assets/css/_spacing.css, assets/css/_base.css, assets/css/_card-grid.css */

/* === assets/css/_typography.css === */
/* _typography.css — Foundations V4.11.
 *
 * Type scale modular 1.250 (perfect fourth), base 16px.
 * Weights, line heights, letter spacings tokenizados.
 * Classes utilitárias .text-* pra uso em blocks novos e skin soft-editorial.
 *
 * Aditivo: carregado ANTES de _base.css. Sites V2 que não consomem .text-*
 * ficam intactos. Skin soft-editorial e blocks V4.11 consomem.
 *
 * Spec: docs/specs/v4-fase11-ana-hardcore-blocks-premium.md §3.1.
 */

:root {
    /* Modular scale 1.250 (perfect fourth), base 16px */
    --fs-xs:   0.8rem;     /* 12.8px - captions, eyebrows */
    --fs-sm:   1rem;       /* 16px - body small */
    --fs-base: 1.125rem;   /* 18px - body */
    --fs-md:   1.25rem;    /* 20px - lead */
    --fs-lg:   1.563rem;   /* 25px - h4 */
    --fs-xl:   1.953rem;   /* 31.25px - h3 */
    --fs-2xl:  2.441rem;   /* 39px - h2 */
    --fs-3xl:  3.052rem;   /* 49px - h1 */
    --fs-4xl:  3.815rem;   /* 61px - hero heading */
    --fs-5xl:  4.768rem;   /* 76px - display giant */

    /* Fluid versions (clamp) — usar em headings pra respiração mobile→desktop */
    --fs-h1-fluid: clamp(2rem,    5vw + 1rem, 3.815rem);
    --fs-h2-fluid: clamp(1.75rem, 3.5vw + 1rem, 3.052rem);
    --fs-h3-fluid: clamp(1.5rem,  2.5vw + 1rem, 2.441rem);

    /* Weights — variable font friendly */
    --fw-light:    300;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* Line heights */
    --lh-display: 1.1;
    --lh-tight:   1.25;
    --lh-normal:  1.5;
    --lh-body:    1.7;
    --lh-loose:   1.85;

    /* Letter spacings */
    --ls-display: -0.025em;
    --ls-tight:   -0.015em;
    --ls-normal:  0;
    --ls-body:    0.005em;
    --ls-wide:    0.1em;
    --ls-eyebrow: 0.12em;
}

/* Classes utilitárias — opt-in. Blocks V4.11 e skin soft-editorial consomem. */
.text-h1 {
    font-size: var(--fs-h1-fluid);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    font-weight: var(--fw-semibold);
}

.text-h2 {
    font-size: var(--fs-h2-fluid);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    font-weight: var(--fw-semibold);
}

.text-h3 {
    font-size: var(--fs-h3-fluid);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    font-weight: var(--fw-semibold);
}

.text-h4 {
    font-size: var(--fs-lg);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    font-weight: var(--fw-semibold);
}

.text-lead {
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: var(--lp-on-surface-muted, inherit);
}

.text-body {
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
}

.text-body-sm {
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}

.text-eyebrow {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    font-weight: var(--fw-semibold);
}

.text-caption {
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--lp-on-surface-subtle, inherit);
}


/* === assets/css/_spacing.css === */
/* _spacing.css — Foundations V4.11.
 *
 * Baseline 8px grid + fluid clamps pra section/container padding.
 * Aditivo: carregado depois de _typography.css e antes de _base.css.
 * Sites V2 que não consomem --sp-* ficam intactos. Skin soft-editorial e
 * blocks V4.11 consomem.
 *
 * Spec: docs/specs/v4-fase11-ana-hardcore-blocks-premium.md §3.2.
 */

:root {
    /* Baseline 8px grid */
    --sp-0:  0;
    --sp-1:    0.5rem;   /* 8px */
    --sp-2-5:  0.75rem;  /* 12px — half-step (eyebrow/actions gap; piloto hero-lp bug#3) */
    --sp-2:    1rem;     /* 16px */
    --sp-3:    1.5rem;   /* 24px */
    --sp-4:    2rem;     /* 32px */
    --sp-4-5:  2.5rem;   /* 40px — half-step (inner gap editorial; piloto hero-lp bug#3) */
    --sp-5:    3rem;     /* 48px */
    --sp-6:  4rem;     /* 64px */
    --sp-7:  6rem;     /* 96px */
    --sp-8:  8rem;     /* 128px */
    --sp-9:  10rem;    /* 160px */

    /* Fluid section padding — usar em <section> de block.
     * --sp-section: editorial premium breathing (institutional, hero pages).
     * --sp-section-tight: blocos densos (testimonials, faq, stats inline).
     */
    --sp-section:       clamp(80px, 12vw, 180px);
    --sp-section-tight: clamp(48px, 8vw, 120px);

    /* Fluid container padding — left/right do .container.
     * Não substitui --lp-container-w (max-width) — esse continua vindo da skin.
     */
    --sp-container: clamp(20px, 5vw, 48px);

    /* Espaço entre blocks dentro de uma section editorial.
     * Default = --sp-5 (48px). Skin/block pode sobrescrever.
     */
    --sp-inter-block: var(--sp-5);

    /* ── V11 Design System v2 — Radius escalar (público) ──────────────────
     * Escala nomeada universal. Skins mapeiam --lp-radius-card/btn pra um destes.
     * Spec: docs/specs/v11-design-system-v2.md §4.
     */
    --radius-xs:   2px;    /* V12: canto editorial quase-reto (heroes salon/boutique/medical) */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;   /* V12: media/painel/band — radius "grande" fixo (não encolhe por skin) */
    --radius-full: 9999px;

    /* ── V12 Design System v2 — Shadow escalar NEUTRO (UI não-card) ───────
     * Pra sombras de UI genérica: botão, quote, caption. Cards usam o
     * semântico --lp-shadow-card/-strong (tintado por skin, def. nas skins).
     * --lp-shadow-md casa o fallback histórico (blog-public/_base) = delta 0.
     */
    --lp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --lp-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --lp-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);

    /* ── V12 — Cores utilitárias/marca tokenizadas (decisão Fábio: tokenizar tudo) ──
     * --lp-whatsapp: cor de marca fixa (verde WhatsApp universal).
     * --lp-overlay-scrim: véu escuro neutro sobre FOTO p/ legibilidade. Fixo no
     *   :root — NÃO depende de --lp-on-surface (que só existe no escopo da skin;
     *   no :root o color-mix computaria inválido → herdava transparent. bug V12).
     *   Escurece foto, não superfície → neutro é correto (não tinta por skin).
     * --lp-on-scrim: texto branco sobre foto escura/scrim (overlay de banner,
     *   legenda de mosaico). Fixo — independe da skin (sempre sobre véu escuro).
     */
    --lp-whatsapp: #25D366;
    --lp-overlay-scrim: rgba(0, 0, 0, 0.55);
    --lp-on-scrim: #fff;

    /* ── V11 Design System v2 — Motion ───────────────────────────────────
     * Durations + easings cravados. Animações/transições consomem.
     */
    --duration-fast:    120ms;
    --duration-default: 200ms;
    --duration-slow:    360ms;
    --ease-out:    cubic-bezier(0.16, 1, 0.30, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Respiro vertical dos blocos V5 (knob global) ─────────────────────────
 * --lp-block-section-y: padding-y que TODOS os blocos V5 leem (hero-lp, quote,
 *   diferenciais-icons, unit-strip, gallery, cta-final, contato-mapa). Um único
 *   valor uniformiza o ritmo entre blocos em todos os sites. Mudou aqui = mudou
 *   em todos. Cada bloco ainda traz seu fallback cravado (segurança se o token
 *   sumir). Um site/skin pode sobrescrever no seu escopo se precisar destoar.
 */
:root {
    --lp-block-section-y: clamp(5rem, 8vw, 7rem);
}


/* === assets/css/_base.css === */
/* lp_local.css — Template "LP Local Business".
 *
 * V2 Fase 2.5: consome APENAS o conjunto canônico semântico de tokens
 * definido em assets/css/skins/_README.md (38 tokens). Zero hex/rgba literal,
 * zero token nominal (sem accent-deep, sem white-a78, etc.). Tints contextuais
 * usam color-mix(in srgb, var(--lp-surface|accent) X%, transparent).
 *
 * Header carrega skin antes deste CSS, garantindo que os tokens existam.
 */

/* V4.18 — Tokens canônicos pra block legal-section (cross-template, cross-skin).
 * Skins NÃO devem override estes tokens — afetam legibilidade. Override só pode
 * mudar font-family / color / font-weight do heading.
 */
:root {
    --legal-section-spacing: 1.5rem;
    --legal-content-width:   42rem;
}

/* --- Reset / base --- */
* {
    box-sizing: border-box;
}

/* V-bug2-5 — token global de largura de conteudo. Padroniza __inner
 * dos blocos pra alinhar visualmente. Bloco pode override individual via
 * --{block}-content-width quando necessario. 72rem = referencia escolhida
 * (diferenciais-icons + unit-strip ja usavam). */
:root {
    --lp-content-w: 72rem;

    /* V17 — Eixo de forma (design system). A skin declara só 3 knobs:
     *   --lp-radius-base    → campos (input)
     *   --lp-radius-control → controles (btn, chip)  [pill = 999px]
     *   --lp-radius-surface → superfícies (card, mídia/foto)
     * Os tokens por elemento DERIVAM disto — skin não pode sair incoerente.
     * Default = suave/coerente; cada skin sobrescreve os 3 knobs. */
    --lp-radius-base    : 12px;
    --lp-radius-control : var(--lp-radius-base);
    --lp-radius-surface : calc(var(--lp-radius-base) * 1.35);

    --lp-radius-btn   : var(--lp-radius-control);
    --lp-radius-chip  : var(--lp-radius-control);
    --lp-radius-input : var(--lp-radius-base);
    --lp-radius-card  : var(--lp-radius-surface);
    --lp-radius-media : var(--lp-radius-surface);
    --lp-radius-dot   : 999px;

    /* V17 Fase D — Sombra/Borda com default coerente. Skin sobrescreve; aqui
     * garante que nenhum token fique órfão (ex: --lp-border-strong não era
     * definido por skin nenhuma) e que skins bespoke herdem algo sensato. */
    --lp-shadow-card    : 0 12px 28px rgba(15, 23, 42, 0.07);
    --lp-shadow-strong  : 0 24px 54px rgba(15, 23, 42, 0.16);
    --lp-shadow-soft    : 0 16px 40px rgba(15, 23, 42, 0.10);
    --lp-border         : rgba(15, 23, 42, 0.10);
    --lp-border-card    : 1px solid var(--lp-border);
    --lp-border-strong  : 1px solid rgba(15, 23, 42, 0.18);
}

body{
    margin: 0;
    font-family: var(--lp-font-body);
    font-weight: var(--lp-fw-body);
    font-size: var(--lp-fs-body);
    color: var(--lp-on-surface);
    /* V-paletas-fase1.4 — wire de --lp-canvas (bg de pagina). Fallback
     * --lp-surface mantem render current-equivalent quando palette nao
     * define canvas explicito (raro pos-Fase 1.2). */
    background: linear-gradient(180deg, var(--lp-canvas, var(--lp-surface)) 0%, var(--lp-surface-2) 34%, var(--lp-canvas, var(--lp-surface)) 100%);
}

/* Background variants do bloco — aplicado via classe `.bg--{variant}` em
 * `.block` (gerada em templates/page.php a partir de content.bg_variant).
 * Cores vêm dos tokens da skin ativa — consistência com identidade visual.
 * Cascateia pro `<section>` interno (cada bloco renderiza um section como
 * primeiro filho, geralmente com bg próprio que precisa ser sobrescrito
 * quando o cliente explicitamente escolhe um bg variant).
 * !important é cirúrgico — só nessas 3 classes, ativo apenas quando o cliente
 * trocou o fundo via toolbar. Sections normais (sem .bg--*) ficam intactas.
 * Spec: docs/specs/v3-fase4-2-block-bg-variant.md */
/* V8.7+ — 12 slots de fundo. Todos via token --lp-* da paleta, zero hex.
 * Slots "escuros" e "accent cheio/strong" forcam color pra preservar
 * contraste do texto (texto inverso). Trocar paleta move todos juntos. */
/* background-COLOR (não shorthand) preserva background-image de quem usa imagem
 * (hero-lp fullbleed). Mas blocos com gradiente DECORATIVO (ex: .block-hero-lp
 * ganha linear-gradient da skin em _v5-card-shared) escondiam a cor do bg-variant
 * atrás do gradiente → background-image:none limpa o gradiente pra cor sólida
 * aparecer. EXCETO fullbleed (:not): lá a imagem de fundo sobrevive e a cor vira
 * TINT do overlay (--hero-fb-tint, consumido em blocks/hero-lp/styles.css). */
.block.bg--canvas                    { --hero-fb-tint: var(--lp-canvas); }
.block.bg--canvas,
.block.bg--canvas > section:not(.block-hero-lp--fullbleed):not(.block-hero-lp--default-bg)          { background-color: var(--lp-canvas) !important; background-image: none !important; }
.block.bg--surface                   { --hero-fb-tint: var(--lp-surface); }
.block.bg--surface,
.block.bg--surface > section:not(.block-hero-lp--fullbleed):not(.block-hero-lp--default-bg)         { background-color: var(--lp-surface) !important; background-image: none !important; }
.block.bg--surface-2                 { --hero-fb-tint: var(--lp-surface-2); }
.block.bg--surface-2,
.block.bg--surface-2 > section:not(.block-hero-lp--fullbleed):not(.block-hero-lp--default-bg)       { background-color: var(--lp-surface-2) !important; background-image: none !important; }
.block.bg--surface-3                 { --hero-fb-tint: var(--lp-surface-3); }
.block.bg--surface-3,
.block.bg--surface-3 > section:not(.block-hero-lp--fullbleed):not(.block-hero-lp--default-bg)       { background-color: var(--lp-surface-3) !important; background-image: none !important; }
.block.bg--sunken                    { --hero-fb-tint: var(--lp-sunken); }
.block.bg--sunken,
.block.bg--sunken > section:not(.block-hero-lp--fullbleed):not(.block-hero-lp--default-bg)          { background-color: var(--lp-sunken) !important; background-image: none !important; }
.block.bg--on-surface-muted          { --hero-fb-tint: var(--lp-on-surface-muted); }
.block.bg--on-surface-muted,
.block.bg--on-surface-muted > section:not(.block-hero-lp--fullbleed):not(.block-hero-lp--default-bg){ background-color: var(--lp-on-surface-muted) !important; background-image: none !important; color: var(--lp-surface) !important; }
.block.bg--on-surface                { --hero-fb-tint: var(--lp-on-surface); }
.block.bg--on-surface,
.block.bg--on-surface > section:not(.block-hero-lp--fullbleed):not(.block-hero-lp--default-bg)      { background-color: var(--lp-on-surface) !important; background-image: none !important; color: var(--lp-surface) !important; }
.block.bg--accent-soft               { --hero-fb-tint: var(--lp-accent-soft); }
.block.bg--accent-soft,
.block.bg--accent-soft > section:not(.block-hero-lp--fullbleed):not(.block-hero-lp--default-bg)     { background-color: var(--lp-accent-soft) !important; background-image: none !important; }
.block.bg--accent-weak               { --hero-fb-tint: var(--lp-accent-weak); }
.block.bg--accent-weak,
.block.bg--accent-weak > section:not(.block-hero-lp--fullbleed):not(.block-hero-lp--default-bg)     { background-color: var(--lp-accent-weak) !important; background-image: none !important; }
.block.bg--accent                    { --hero-fb-tint: var(--lp-accent); }
.block.bg--accent,
.block.bg--accent > section:not(.block-hero-lp--fullbleed):not(.block-hero-lp--default-bg)          { background-color: var(--lp-accent) !important; background-image: none !important; color: var(--lp-accent-on) !important; }
.block.bg--accent-strong             { --hero-fb-tint: var(--lp-accent-strong); }
.block.bg--accent-strong,
.block.bg--accent-strong > section:not(.block-hero-lp--fullbleed):not(.block-hero-lp--default-bg)   { background-color: var(--lp-accent-strong) !important; background-image: none !important; color: var(--lp-accent-on) !important; }

/* V-bg-contrast — Contraste automatico: bg-contrast.js calcula luminancia
 * WCAG do background renderizado e marca data-bg-luminance="dark"|"light"
 * no wrapper .block[data-block-id]. CSS aplica texto claro quando dark.
 *
 * Pega TODOS casos automaticos:
 *   - 4 fundos escuros conhecidos (on-surface, on-surface-muted, accent-strong,
 *     e accent quando hue da paleta é escuro)
 *   - accent_color custom do site setado dark
 *   - paletas futuras que mudam tokens
 *
 * Aplica color cascade no .block; herdeiros consomem currentColor. Texto
 * com cor explicita (.vibe-eyebrow color:accent-deep, .text-accent gradient,
 * btn--primary) NAO sao tocados — mantem identidade visual. */
.block[data-bg-luminance="dark"] {
    color: #fff !important;
    /* Tokens de TEMPLATE (--ink etc) podem flippar no wrapper sem
     * efeito colateral — nao sao usados como background em lugar nenhum. */
    --ink: #fff !important;
    --ink-soft: rgba(255, 255, 255, .82) !important;
    --ink-faint: rgba(255, 255, 255, .65) !important;
    --rule: rgba(255, 255, 255, .18) !important;
}
/* CRITICO: --lp-on-surface NAO pode ser sobrescrito no WRAPPER (.block)
 * porque a regra .block.bg--on-surface usa esse MESMO token como background:
 *   .block.bg--on-surface { background: var(--lp-on-surface) !important; }
 * Sobrescrever no wrapper -> bg flippa pra branco junto com o texto (ciclo
 * auto-destrutivo: bloco escuro fica branco).
 * Solucao: sobrescrever SO NOS FILHOS (descendentes). Wrapper mantem valor
 * original da paleta -> bg preto/escuro permanece. Filhos resolvem
 * var(--lp-on-surface) como branco pra texto. */
.block[data-bg-luminance="dark"] * {
    --lp-on-surface: #fff;
    --lp-on-surface-muted: rgba(255, 255, 255, .82);
    --lp-on-surface-subtle: rgba(255, 255, 255, .65);
}
/* V18-fix — bug clássico: bg escuro "preso" no wrapper, section branca.
 * Causa: nos variants bg--on-surface/-muted o background usa var(--lp-on-surface),
 * MAS a regra acima flipa esse token pra #fff nos descendentes (pra texto) —
 * a section (descendente) usava o token como BACKGROUND → virava branca.
 * Fix: a section direta do bloco escuro fica TRANSPARENTE e mostra o bg (correto,
 * não-flipado) do wrapper. bg-contrast.js lê a luminância do wrapper (não da
 * section), então a transparência não desmarca o "dark". Texto segue branco. */
.block[data-bg-luminance="dark"] > section:not(.block-hero-lp--fullbleed):not(.block-hero-lp--default-bg) {
    background-color: transparent !important;
    background-image: none !important;
}
.block[data-bg-luminance="dark"] h1,
.block[data-bg-luminance="dark"] h2,
.block[data-bg-luminance="dark"] h3,
.block[data-bg-luminance="dark"] h4,
.block[data-bg-luminance="dark"] h5,
.block[data-bg-luminance="dark"] h6,
.block[data-bg-luminance="dark"] p,
.block[data-bg-luminance="dark"] li,
.block[data-bg-luminance="dark"] span:not([class*="accent"]):not([class*="gradient"]) {
    color: inherit;
}
/* Eyebrow ja consome via --ink-soft no template (re-mapeado acima);
 * mas alguns blocos hardcoda accent-deep no eyebrow — fallback explicito. */
.block[data-bg-luminance="dark"] .vibe-eyebrow,
.block[data-bg-luminance="dark"] [class*="__eyebrow"] {
    color: rgba(255, 255, 255, .82) !important;
}

/* V-bg-contrast 2 — Cards com bg proprio claro DENTRO de bloco dark
 * (feature-grid-rich .vibe-card etc): JS marca data-bg-luminance="light"
 * no card. Restaura tokens dark-on-light hardcoded — nao da pra resgatar
 * via var() porque o escopo parent ja sobrescreveu. Hex defensivos
 * (#1f1d18 = ink Ana, #4a463e = ink-soft Ana). Cobre suficientemente
 * outras paletas pq sao tons neutros escuros standard. */
/* Card light dentro de bloco dark + TODOS seus descendentes. Sem o
 * "*" no segundo seletor, o --lp-on-surface:#fff cascateado pelo
 * .block[d-b-l=dark] * ainda pega o h3/p dentro do card -> texto branco
 * em card branco = ilegivel. Replicar tokens pro escopo do card+filhos. */
.block[data-bg-luminance="dark"] [data-bg-luminance="light"],
.block[data-bg-luminance="dark"] [data-bg-luminance="light"] * {
    --ink: #1f1d18;
    --ink-soft: #4a463e;
    --ink-faint: #867f72;
    --rule: #e8e1cf;
    --lp-on-surface: #1f1d18;
    --lp-on-surface-muted: #4a463e;
    --lp-on-surface-subtle: #867f72;
}
.block[data-bg-luminance="dark"] [data-bg-luminance="light"],
.block[data-bg-luminance="dark"] [data-bg-luminance="light"] h1,
.block[data-bg-luminance="dark"] [data-bg-luminance="light"] h2,
.block[data-bg-luminance="dark"] [data-bg-luminance="light"] h3,
.block[data-bg-luminance="dark"] [data-bg-luminance="light"] h4,
.block[data-bg-luminance="dark"] [data-bg-luminance="light"] h5,
.block[data-bg-luminance="dark"] [data-bg-luminance="light"] h6,
.block[data-bg-luminance="dark"] [data-bg-luminance="light"] p,
.block[data-bg-luminance="dark"] [data-bg-luminance="light"] li,
.block[data-bg-luminance="dark"] [data-bg-luminance="light"] span {
    color: #1f1d18 !important;
}
.block[data-bg-luminance="dark"] [data-bg-luminance="light"] .vibe-eyebrow,
.block[data-bg-luminance="dark"] [data-bg-luminance="light"] [class*="__eyebrow"] {
    color: var(--accent-deep, #2d7019) !important;
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--lp-font-display);
    letter-spacing: var(--lp-tracking);
}

h1 {
    line-height: var(--lp-lh-display);
    font-weight: var(--lp-fw-display);
    /* 22ch acomoda palavras longas como "Neuroaprendizagem" (17 chars) +
     * frases médias sem quebrar feio, mantendo a punchiness de heros curtos
     * ("Brasa, sal grosso") que ficam abaixo do limite naturalmente. */
    max-width: 22ch;
    color: var(--lp-on-surface);
    font-size: var(--lp-fs-h1);
}

html {
    scroll-behavior: smooth;
}

section[id] {
    scroll-margin-top: 102px;
}

.container {
    width: min(var(--lp-container-w), 92vw);
    margin: 0 auto;
}

/* --- Topbar / nav --- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--lp-surface) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--lp-border);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 78px;
    gap: 24px;
}

.brand {
    font-family: var(--lp-font-display);
    font-weight: var(--lp-fw-display);
    letter-spacing: var(--lp-tracking);
}

.brand a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.brand-logo {
    height: 48px;
    width: auto;
    display: block;
}

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-left: auto;
    margin-right: 10px;
}

.nav-menu a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 var(--sp-2-5);
    border-radius: var(--lp-radius-chip, 999px);
    color: var(--lp-on-surface-muted);
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
    color: var(--lp-accent);
    /* Hover do nav: fundo (chip) só nas skins que optam via --lp-nav-hover-bg;
       default transparent. O sublinhado (_hover.css) é gated por --lp-nav-underline.
       Skin escolhe UM dos dois efeitos, não os dois. */
    background: var(--lp-nav-hover-bg, transparent);
    transform: translateY(-1px);
}

.nav-menu a:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--lp-accent) 24%, transparent);
    outline-offset: 2px;
}

/* --- Botões --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 22px;
    border-radius: var(--lp-radius-btn);
    text-decoration: none;
    color: var(--lp-accent-on);
    font-weight: var(--lp-fw-display);
    border: 1px solid transparent;
    background: linear-gradient(90deg, var(--lp-accent-strong) 0%, var(--lp-accent) 100%);
    box-shadow: var(--lp-shadow-card);
}

.btn:hover {
    filter: saturate(1.07) brightness(1.03);
}

.btn i {
    font-size: 1.18rem;
}

.btn-ghost {
    color: var(--lp-accent-strong);
    background: var(--lp-surface);
    border-color: var(--lp-border);
    box-shadow: none;
}

.btn-small {
    min-height: 44px;
    padding: 0 14px;
    font-size: 0.92rem;
}

.btn-wpp {
    color: var(--lp-accent-on);
    border: 0 !important;
    outline: none;
    background: linear-gradient(135deg, var(--lp-cta-success) 0%, var(--lp-cta-success-strong) 100%) !important;
    box-shadow: var(--lp-shadow-strong);
}

.btn-wpp:hover {
    filter: brightness(1.06) saturate(1.08);
}

/* --- Hero --- */
.hero {
    padding: 72px 0;
    background: linear-gradient(180deg, var(--lp-surface) 0%, var(--lp-surface-2) 100%);
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.72fr);
    gap: 46px;
    align-items: center;
}

.eyebrow {
    display: inline-block;
    margin: 0 0 18px;
    padding: 8px 14px;
    border-radius: var(--lp-radius-chip, 999px);
    border: 1px solid color-mix(in srgb, var(--lp-accent) 40%, transparent);
    color: var(--lp-accent-strong);
    font-weight: 800;
    background: var(--lp-accent-weak);
    font-size: 0.9rem;
}

.text-accent {
    background: linear-gradient(135deg, var(--lp-accent-strong) 0%, var(--lp-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.lead {
    margin: 20px 0 0;
    font-size: 1.18rem;
    color: var(--lp-on-surface-muted);
    line-height: var(--lp-lh-body);
    max-width: 58ch;
}

.hero-actions {
    display: flex;
    gap: var(--sp-2-5);
    margin-top: 24px;
    flex-wrap: wrap;
}

.hero-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.hero-badges > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-chip, 999px);
    color: var(--lp-on-surface-muted);
    background: color-mix(in srgb, var(--lp-surface) 78%, transparent);
    box-shadow: var(--lp-shadow-card);
    font-size: 0.94rem;
    font-weight: 700;
}

.hero-badges i {
    color: var(--lp-accent);
    font-size: 1.08rem;
}

.hero-card {
    border: var(--lp-border-card);
    border-bottom: 4px solid var(--lp-border-strong);
    border-radius: var(--lp-radius-card);
    background: linear-gradient(180deg, var(--lp-surface) 0%, var(--lp-surface-2) 100%);
    padding: 28px;
    box-shadow: var(--lp-shadow-card);
}

.hero-card h2 {
    font-size: 1.9rem;
    margin-bottom: 16px;
    line-height: 1.14;
}

.hero-card ul {
    display: grid;
    gap: var(--sp-2-5);
    padding: 0;
    list-style: none;
    line-height: 1.4;
    color: var(--lp-on-surface-muted);
}

.hero-card li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

.hero-card li i {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--lp-accent-strong);
    background: var(--lp-accent-weak);
    border: 1px solid color-mix(in srgb, var(--lp-accent) 30%, transparent);
    font-size: 1.08rem;
    flex: 0 0 auto;
}

.hero-right {
    display: grid;
    gap: 16px;
    align-self: center;
}

.hero-right .hero-card {
    display: none;
}

.hero-media {
    margin: 0;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--lp-border);
    box-shadow: var(--lp-shadow-strong);
    background: var(--lp-surface);
}

.hero-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* --- icon-pill (compartilhado) --- */
.icon-pill {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--lp-accent-strong);
    background: var(--lp-accent-weak);
    border: 1px solid color-mix(in srgb, var(--lp-accent) 30%, transparent);
    font-size: 1.35rem;
    flex: 0 0 auto;
    margin-bottom: 18px;
}

/* --- Unit strip --- */
.unit-strip {
    padding: 34px 0 36px;
    background: var(--lp-surface);
}

.unit-panel {
    display: grid;
    grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
    gap: 24px;
    align-items: center;
    margin-top: 0;
    padding: 28px;
    border: 1px solid var(--lp-border);
    border-bottom: 4px solid var(--lp-border-strong);
    border-radius: 24px;
    background: linear-gradient(90deg, var(--lp-accent-weak), var(--lp-surface));
    box-shadow: var(--lp-shadow-card);
}

.unit-kicker {
    display: inline-flex;
    margin-bottom: 10px;
    color: var(--lp-accent-strong);
    font-size: 0.82rem;
    font-weight: 800;
}

.unit-copy h2 {
    color: var(--lp-on-surface);
    font-size: 2.1rem;
    line-height: 1.1;
}

.unit-copy p {
    max-width: 34ch;
    margin: 10px 0 0;
    color: var(--lp-on-surface-muted);
    line-height: var(--lp-lh-body);
}

/* Default: auto-fit. Override por :has() pra count=4 → 2×2 (evita órfão 3+1). */
.unit-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-2-5);
}

.unit-features:has(article:nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.unit-features article {
    min-height: 118px;
    padding: 16px;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-card);
    background: color-mix(in srgb, var(--lp-surface) 76%, transparent);
    box-shadow: var(--lp-shadow-card);
}

.unit-features i {
    width: 40px;
    height: 40px;
    margin-bottom: var(--sp-2-5);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--lp-accent-strong);
    background: var(--lp-accent-weak);
    border: 1px solid color-mix(in srgb, var(--lp-accent) 30%, transparent);
    font-size: 1.22rem;
}

.unit-features span {
    display: block;
    color: var(--lp-on-surface-muted);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.35;
}

/* V-bug-A CW patch — faixas full-bleed: fundo edge-to-edge, conteudo
 * contido na coluna padrao (--lp-container-w). Atinge unit-strip + cta-band
 * + cta default. Specificity (0,0,2) trumpa .container (0,0,1) quando
 * houver conflito; alinha conteudo ao mesmo eixo dos outros blocos.
 * Escape hatch: modifier --bleed (.unit-strip--bleed / .cta-band--bleed)
 * preserva full-width quando intencional. Spec: CW resposta Bug A. */
.unit-strip > .unit-panel,
.cta-band > .cta-band__inner,
.cta-band > .cta-wrap {
    max-width: var(--lp-container-w);
    margin-inline: auto;
    padding-inline: var(--lp-gutter, clamp(1rem, 4vw, 2rem));
    box-sizing: border-box;
}
.unit-strip--bleed > .unit-panel,
.cta-band--bleed > .cta-band__inner,
.cta-band--bleed > .cta-wrap {
    max-width: none;
    padding-inline: 0;
}

/* --- Sections --- */
.section {
    padding: var(--lp-section-y) 0;
}

.unit-strip + .section {
    padding-top: 42px;
}

.section-soft {
    background: linear-gradient(180deg, var(--lp-surface) 0%, var(--lp-surface-2) 100%);
}

.section-title {
    margin-bottom: var(--sp-3, 28px);
    color: var(--lp-on-surface);
    /* V12 — heading de seção canônico (DS v2): --fs-h2-fluid + weight 600.
     * Antes: sem font-weight → herdava bold 700 do <h2> (destoava dos blocos
     * V5 que usam 600) + tamanho próprio. Agora bate com todos os headings. */
    font-size: var(--fs-h2-fluid);
    font-weight: var(--fw-semibold);
    font-family: var(--lp-font-display, inherit);
    line-height: var(--lp-lh-display, var(--lh-display, 1.1));
    letter-spacing: var(--lp-tracking, var(--ls-display, -0.02em));
}

/* --- Cards de diferenciais (flexbox + flex-grow: última linha 100%) --- */
.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.cards > .card {
    flex: 1 1 280px;
    min-width: 0;
}

.card {
    border: 1px solid var(--lp-border);
    border-bottom: 4px solid var(--lp-border-strong);
    border-radius: var(--lp-radius-card);
    padding: 26px;
    background: linear-gradient(180deg, var(--lp-surface) 0%, var(--lp-surface-2) 100%);
    box-shadow: var(--lp-shadow-card);
}

.card h3 {
    font-size: 1.18rem;
    color: var(--lp-on-surface);
}

.card p {
    margin: 10px 0 0;
    color: var(--lp-on-surface-muted);
    line-height: var(--lp-lh-body);
}

/* --- Como funciona --- */
.how-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(330px, 0.95fr);
    gap: 34px;
    align-items: center;
}

.how-grid--no-image {
    grid-template-columns: 1fr;
}

.how-media {
    margin: 0;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--lp-border);
    box-shadow: var(--lp-shadow-strong);
    background: var(--lp-surface);
}

.how-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.steps-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3, 24px);
}

.steps-grid > .step-card {
    flex: 1 1 260px;
    min-width: 0;
}

.step-card {
    position: relative;
    border: 1px solid var(--lp-border);
    border-bottom: 4px solid var(--lp-border-strong);
    border-radius: var(--lp-radius-card);
    padding: var(--sp-4, 32px);
    background: linear-gradient(180deg, var(--lp-surface) 0%, var(--lp-surface-2) 100%);
    box-shadow: var(--lp-shadow-card);
}

.step-card > i {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--lp-accent-strong);
    background: var(--lp-accent-weak);
    border: 1px solid color-mix(in srgb, var(--lp-accent) 30%, transparent);
    font-size: 1.24rem;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 32px;
    margin-bottom: 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--lp-accent) 30%, transparent);
    background: var(--lp-accent-weak);
    color: var(--lp-accent-strong);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.step-card h3 {
    margin: 0 48px 10px 0;
    font-size: 1.2rem;
    line-height: 1.2;
    color: var(--lp-on-surface);
}

.step-card p {
    margin: 0;
    color: var(--lp-on-surface-muted);
    line-height: var(--lp-lh-body);
}

/* --- CTA final --- */
.cta {
    border: 1px solid var(--lp-border);
    border-radius: 24px;
    padding: 46px 34px;
    background:
        radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--lp-accent) 10%, transparent), transparent 32%),
        linear-gradient(135deg, var(--lp-surface-2) 0%, var(--lp-surface) 100%);
    box-shadow: var(--lp-shadow-card);
    text-align: center;
}

.cta h2 {
    margin-bottom: 8px;
    font-size: 2.25rem;
    color: var(--lp-on-surface);
}

.cta p {
    margin: 0 0 18px;
    color: var(--lp-on-surface-muted);
}

/* --- Info cards (endereço / contato / horário) --- */
.info-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.info-grid > .info-card {
    flex: 1 1 280px;
    min-width: 0;
}

.info-card {
    border: 1px solid var(--lp-border);
    border-bottom: 4px solid var(--lp-border-strong);
    border-radius: var(--lp-radius-card);
    padding: 26px;
    background: linear-gradient(180deg, var(--lp-surface) 0%, var(--lp-surface-2) 100%);
    box-shadow: var(--lp-shadow-card);
    min-height: 250px;
    display: flex;
    flex-direction: column;
}

.info-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.info-card .icon-pill {
    margin-bottom: 0;
}

.info-card h3 {
    font-size: 1.18rem;
    color: var(--lp-on-surface);
}

.info-card p {
    margin: 10px 0 0;
    color: var(--lp-on-surface-muted);
    line-height: var(--lp-lh-body);
    font-size: 1rem;
}

.info-card a {
    color: var(--lp-accent);
    font-weight: 600;
    text-decoration: none;
}

.info-card a:hover {
    text-decoration: underline;
}

.info-card > a:not(.social-link) {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding-top: 16px;
}

.info-card > a.map-chip {
    height: 42px;
    padding: 0 14px;
}

.address-lines {
    display: grid;
    gap: 5px;
    margin-top: 4px;
}

.address-lines p {
    margin: 0;
    color: var(--lp-on-surface-muted);
    line-height: 1.45;
}

.map-chip {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--lp-accent) 30%, transparent);
    border-radius: var(--lp-radius-chip, 999px);
    color: var(--lp-accent-strong) !important;
    background: linear-gradient(180deg, var(--lp-surface) 0%, var(--lp-accent-weak) 100%);
    box-shadow: var(--lp-shadow-card);
    font-weight: 800 !important;
    line-height: 1;
    text-decoration: none !important;
}

.map-chip i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 1.08rem;
}

.map-chip span {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.map-chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--lp-shadow-strong);
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    width: fit-content;
    padding: 8px 11px;
    border: 1px solid var(--lp-border);
    border-radius: 999px;
    background: var(--lp-accent-weak);
    text-decoration: none;
    color: var(--lp-on-surface-muted);
}

.social-link.wpp {
    color: var(--lp-cta-success-strong);
    border-color: color-mix(in srgb, var(--lp-cta-success) 24%, transparent);
    background: color-mix(in srgb, var(--lp-cta-success) 8%, transparent);
}

.social-link.insta {
    color: var(--lp-accent-strong);
    border-color: color-mix(in srgb, var(--lp-accent) 20%, transparent);
    background: color-mix(in srgb, var(--lp-accent) 6%, transparent);
}

/* --- Footer expandido (multi-coluna, presença de empresa) --- */
.footer {
    border-top: 0;
    padding: 72px 0 28px;
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--lp-accent) 34%, transparent), transparent 38%),
        linear-gradient(135deg, var(--lp-accent-strong) 0%, var(--lp-accent) 100%);
    color: var(--lp-accent-on);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 56px;
    margin-bottom: 56px;
}

.footer-col h4 {
    margin: 0 0 18px;
    font-family: var(--lp-font-display);
    font-size: 0.9rem;
    font-weight: var(--lp-fw-display);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--lp-accent-on) 88%, transparent);
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.footer-col li {
    line-height: 1.4;
}

.footer-col a {
    color: color-mix(in srgb, var(--lp-accent-on) 92%, transparent);
    text-decoration: none;
    font-size: 0.96rem;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.footer-col a:hover {
    color: var(--lp-accent-on);
    text-decoration: underline;
}

.footer-col--brand .footer-logo {
    max-height: 64px;
    width: auto;
    display: block;
    margin-bottom: 18px;
}

.footer-col--brand .footer-brand-name {
    margin: 0 0 14px;
    font-family: var(--lp-font-display);
    font-size: 1.8rem;
    font-weight: var(--lp-fw-display);
    letter-spacing: var(--lp-tracking);
    color: var(--lp-accent-on);
}

.footer-tagline {
    margin: 0;
    max-width: 36ch;
    color: color-mix(in srgb, var(--lp-accent-on) 80%, transparent);
    line-height: 1.6;
    font-size: 0.96rem;
}

.footer-units {
    gap: 18px !important;
}

.footer-units li {
    display: grid;
    gap: 3px;
}

.footer-units strong {
    font-family: var(--lp-font-display);
    font-weight: var(--lp-fw-display);
    color: var(--lp-accent-on);
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.footer-units span {
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--lp-accent-on) 78%, transparent);
    line-height: 1.45;
}

.footer-bottom {
    border-top: 1px solid color-mix(in srgb, var(--lp-accent-on) 18%, transparent);
    padding-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    font-size: 0.88rem;
    color: color-mix(in srgb, var(--lp-accent-on) 75%, transparent);
}

/* V4.15 — legal pages: links inline com copyright no footer-bottom (V4.17.4).
 * Separador "|" antes de cada link. Classe .footer-legal mantida pra compat
 * com qualquer template que ainda use o slot div separado. */
.footer-bottom__copy {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
}
.footer-bottom__sep {
    opacity: 0.45;
    user-select: none;
}
.footer-bottom__legal-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease;
}
.footer-bottom__legal-link:hover {
    border-bottom-color: currentColor;
    color: color-mix(in srgb, var(--lp-accent-on) 90%, transparent);
}

.footer-legal {
    padding-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--lp-accent-on) 65%, transparent);
}
.footer-legal a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease;
}
.footer-legal a:hover {
    border-bottom-color: currentColor;
    color: color-mix(in srgb, var(--lp-accent-on) 90%, transparent);
}

.footer-credit a {
    color: var(--lp-accent-on);
    font-weight: 700;
    text-decoration: none;
}

.footer-credit a:hover {
    text-decoration: underline;
}

/* --- Responsivo --- */
@media (max-width: 980px) {
    .nav-menu {
        display: none;
    }
}

@media (max-width: 900px) {
    .hero-grid,
    .how-grid {
        grid-template-columns: 1fr;
    }

    .unit-panel {
        grid-template-columns: 1fr;
    }

    .unit-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nav {
        min-height: 64px;
    }

    .brand-logo {
        height: 38px;
    }

    h1 {
        max-width: none;
        font-size: 3rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .footer {
        padding: 56px 0 24px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px 32px;
        margin-bottom: var(--sp-4-5);
    }

    .footer-col--brand {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================ */
/* === Variantes V2 Fase 3 (todas consumindo tokens semânticos) === */
/* ============================================================ */

/* --- hero-lp.fullbleed-image --- */
.hero--fullbleed {
    position: relative;
    min-height: 720px;
    padding: 0;
    background: var(--lp-surface);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero--fullbleed .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--lp-surface) 40%, transparent) 0%,
        color-mix(in srgb, var(--lp-surface) 75%, transparent) 100%);
    pointer-events: none;
}

.hero--overlay-light .hero-overlay {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--lp-surface) 20%, transparent) 0%,
        color-mix(in srgb, var(--lp-surface) 55%, transparent) 100%);
}

.hero--overlay-dark .hero-overlay {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--lp-surface) 60%, transparent) 0%,
        color-mix(in srgb, var(--lp-surface) 90%, transparent) 100%);
}

.hero-fb {
    position: relative;
    z-index: 1;
    padding: 120px 0;
    max-width: 720px;
}

.hero-fb h1 {
    color: var(--lp-on-surface);
    margin-bottom: 18px;
}

.hero-fb .lead {
    color: var(--lp-on-surface-muted);
    max-width: 56ch;
}

/* CTA com botão ⚙ pra editar URL (editor mode) */
.cta-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.cta-url-edit {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 0;
    background: var(--lp-on-surface);
    color: var(--lp-surface);
    font-size: 0.78rem;
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: var(--lp-shadow-card);
    z-index: 2;
}

.cta-wrap:hover .cta-url-edit,
.cta-url-edit:focus {
    opacity: 1;
    transform: scale(1.05);
}

/* Painel editor-only pra trocar bg do hero fullbleed.
 * Mais presença visual pra ser perceptível sobre fotos coloridas. */
.hero-fb-edit {
    margin-top: 28px;
    background: var(--lp-accent);
    color: var(--lp-accent-on);
    border: 0;
    padding: 14px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: var(--lp-shadow-card);
}

.hero-fb-edit:hover {
    filter: brightness(0.95);
}

.hero-fb-edit__action {
    text-decoration: underline;
}

.hero-fb-edit small {
    opacity: 0.85;
    margin-right: 4px;
}

.hero-fb-edit {
    border-radius: var(--lp-radius-btn);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* --- showcase.photos-3col --- */
.showcase--photos-3col .section-title {
    margin-bottom: var(--sp-2-5);
}

.showcase--photos-3col .lead {
    color: var(--lp-on-surface-muted);
    margin-bottom: 36px;
    max-width: 60ch;
}

.showcase-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.showcase-grid > .showcase-card {
    flex: 1 1 280px;
    min-width: 0;
}

.showcase-card {
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-card);
    overflow: hidden;
    background: var(--lp-surface-2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.showcase-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--lp-shadow-strong);
}

.showcase-card__media {
    margin: 0;
    aspect-ratio: 4 / 5;
    background: var(--lp-surface-3);
    overflow: hidden;
}

.showcase-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.showcase-card h3 {
    margin: 22px 24px 6px;
    color: var(--lp-on-surface);
    font-size: 1.4rem;
}

.showcase-card p {
    margin: 0 24px 24px;
    color: var(--lp-on-surface-muted);
    line-height: var(--lp-lh-body);
}

/* --- quote.manifesto-display --- */
.quote-manifesto {
    padding: calc(var(--lp-section-y) * 1.4) 0;
    background: var(--lp-surface);
    text-align: center;
}

.quote-manifesto blockquote {
    margin: 0;
    padding: 0;
}

.quote-manifesto p {
    margin: 0;
    font-family: var(--lp-font-display);
    font-weight: var(--lp-fw-display);
    font-size: calc(var(--lp-fs-h1) * 0.82);
    line-height: 1.12;
    color: var(--lp-on-surface);
    letter-spacing: var(--lp-tracking);
    max-width: 24ch;
    margin: 0 auto;
}

.quote-manifesto p::before { content: "\201C"; }
.quote-manifesto p::after  { content: "\201D"; }

/* --- unit-strip.split-photo-bio --- */
.unit-bio {
    background: var(--lp-surface);
}

.unit-bio__grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
    gap: 48px;
    align-items: center;
}

.unit-bio__photo {
    margin: 0;
    aspect-ratio: 3 / 4;
    border-radius: var(--lp-radius-card);
    overflow: hidden;
    border: 1px solid var(--lp-border);
    background: var(--lp-surface-2);
}

.unit-bio__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.unit-bio__copy h2 {
    margin: 8px 0 18px;
    color: var(--lp-on-surface);
    font-size: var(--lp-fs-h2);
    line-height: var(--lp-lh-display);
}

.unit-bio__copy .lead {
    color: var(--lp-on-surface-muted);
    line-height: var(--lp-lh-body);
    margin-bottom: 24px;
    max-width: 56ch;
}

.unit-bio__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--sp-2-5);
}

.unit-bio__bullets li {
    display: flex;
    align-items: center;
    gap: var(--sp-2-5);
    color: var(--lp-on-surface);
    font-weight: 700;
}

.unit-bio__bullets li i {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--lp-accent-strong);
    background: var(--lp-accent-weak);
    border: 1px solid color-mix(in srgb, var(--lp-accent) 30%, transparent);
    font-size: 1rem;
    flex: 0 0 auto;
}

/* --- cta-final.band-fullwidth-accent --- */
.cta-band {
    background: var(--lp-accent);
    padding: var(--lp-section-y) 0;
    text-align: center;
}

.cta-band__inner h2 {
    color: var(--lp-accent-on);
    font-size: var(--lp-fs-h2);
    margin-bottom: var(--sp-2-5);
}

.cta-band__inner p {
    color: color-mix(in srgb, var(--lp-accent-on) 80%, transparent);
    max-width: 56ch;
    margin: 0 auto 24px;
    line-height: var(--lp-lh-body);
}

.btn-on-accent {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 26px;
    border-radius: var(--lp-radius-btn);
    text-decoration: none;
    color: var(--lp-accent);
    background: var(--lp-accent-on);
    font-weight: var(--lp-fw-display);
    border: 1px solid transparent;
    transition: filter 0.2s ease, transform 0.2s ease;
}

.btn-on-accent:hover {
    transform: translateY(-1px);
    filter: brightness(0.95);
}

/* --- contato-mapa.multi-unit --- */
.units-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 32px;
}

.units-grid > .unit-card {
    flex: 1 1 360px;
    min-width: 0;
}

.unit-card {
    border: 1px solid var(--lp-border);
    border-bottom: 4px solid var(--lp-border-strong);
    border-radius: var(--lp-radius-card);
    padding: 28px;
    background: linear-gradient(180deg, var(--lp-surface) 0%, var(--lp-surface-2) 100%);
    box-shadow: var(--lp-shadow-card);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.unit-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 4px;
}

.unit-card__head .icon-pill {
    margin-bottom: 0;
}

.unit-card__head h3 {
    color: var(--lp-on-surface);
    font-size: 1.6rem;
    margin: 0;
}

.unit-card .address-lines p {
    color: var(--lp-on-surface-muted);
}

.unit-card__phones {
    display: grid;
    gap: 4px;
}

.unit-card__phone {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--lp-on-surface);
    font-weight: 700;
    margin: 0;
}

.unit-card__phone i {
    color: var(--lp-accent);
}

.unit-card__hours {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--lp-border);
}

.unit-card__hours p {
    margin: 0;
    color: var(--lp-on-surface-muted);
    line-height: var(--lp-lh-body);
}

.unit-card__hours-label {
    color: var(--lp-on-surface) !important;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px !important;
}

.unit-card__hours-label i {
    color: var(--lp-accent);
}

.unit-card__hours-note {
    font-size: 0.9rem;
    margin-top: 6px !important;
}

/* Mobile ajusta variants */
@media (max-width: 900px) {
    .unit-bio__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .hero--fullbleed {
        min-height: 580px;
    }

    .hero-fb {
        padding: 80px 0;
    }

    .quote-manifesto p {
        font-size: 2.4rem;
    }
}

@media (max-width: 560px) {
    .hero {
        padding: 46px 0 54px;
    }

    .hero-actions,
    .hero-badges {
        align-items: stretch;
        flex-direction: column;
    }

    .btn,
    .hero-badges > span {
        width: 100%;
    }

    .unit-panel {
        margin-top: 0;
        padding: 20px;
    }

    .unit-features {
        grid-template-columns: 1fr;
    }

    h1 {
        font-size: 2.45rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* ============================================================ */
/* === Bloco menu-items (V2 Fase 7) ============================ */
/* Cardápio estruturado: categorias com lista de itens (nome + descrição
 * + preço + badge opcional). Reusável em restaurantes, cafés, barbearias,
 * spas, clínicas particulares (procedimentos com valor). */

.menu-items__lead {
    max-width: 60ch;
    margin-bottom: 56px;
    color: var(--lp-on-surface-muted);
}

.menu-cats {
    display: grid;
    gap: 56px;
}

.menu-cat__name {
    margin: 0 0 6px;
    font-family: var(--lp-font-display);
    font-weight: var(--lp-fw-display);
    font-size: 2rem;
    color: var(--lp-on-surface);
    border-bottom: 1px solid var(--lp-border);
    padding-bottom: var(--sp-2-5);
}

.menu-cat__desc {
    margin: 8px 0 24px;
    color: var(--lp-on-surface-muted);
    font-style: italic;
    font-size: 0.95rem;
}

.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 48px;
}

.menu-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: baseline;
    padding-bottom: 18px;
    border-bottom: 1px dashed color-mix(in srgb, var(--lp-border) 60%, transparent);
}

.menu-item:last-child {
    border-bottom: 0;
}

.menu-item__head {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2-5);
    flex-wrap: wrap;
}

.menu-item__name {
    margin: 0;
    color: var(--lp-on-surface);
    font-family: var(--lp-font-display);
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.3;
}

.menu-item__badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--lp-radius-chip, 999px);
    background: var(--lp-accent-weak);
    color: var(--lp-accent-strong);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.menu-item__desc {
    margin: 6px 0 0;
    color: var(--lp-on-surface-muted);
    font-size: 0.93rem;
    line-height: 1.5;
}

.menu-item__price {
    font-family: var(--lp-font-body);
    font-weight: 700;
    color: var(--lp-on-surface);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 1.02rem;
}

.menu-items__note {
    margin: 56px auto 0;
    text-align: center;
    color: var(--lp-on-surface-subtle);
    font-size: 0.85rem;
    font-style: italic;
    max-width: 70ch;
}

@media (max-width: 800px) {
    .menu-list {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .menu-cat__name {
        font-size: 1.6rem;
    }
}

/* ============================================================ */
/* === Gallery variant padrão (fix V5.4.8) ===================== */
/* Grid responsivo simples 3 cols → 2 → 1, aspect 4/5 nas fotos. */
/* Sem isso, items viravam blocks naturais full-width quebrando o layout. */

.block-gallery .container > .block-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding-block: var(--lp-section-y, 96px);
}
.block-gallery-grid:not(.gallery--masonry-large) .gallery-item {
    overflow: hidden;
    border-radius: var(--lp-radius-md, 8px);
    background: var(--lp-surface-2);
    aspect-ratio: 4 / 5;
}
.block-gallery-grid:not(.gallery--masonry-large) .gallery-item picture,
.block-gallery-grid:not(.gallery--masonry-large) .gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 900px) {
    .block-gallery .container > .block-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 560px) {
    .block-gallery .container > .block-gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================ */
/* === Variant gallery.masonry-large (V2 Fase 7) =============== */
/* Mosaico assimétrico com alturas variáveis e foto dominante. */

.gallery--masonry-large {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 240px;
    grid-auto-flow: dense;
    gap: 14px;
}

.gallery--masonry-large .gallery-item {
    margin: 0;
    overflow: hidden;
    border-radius: var(--lp-radius-card);
    background: var(--lp-surface-2);
    position: relative;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.gallery--masonry-large .gallery-item--large {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery--masonry-large .gallery-item:hover {
    transform: scale(1.02);
    filter: brightness(1.05);
}

.gallery--masonry-large .gallery-item img,
.gallery--masonry-large .gallery-item picture {
    width: 100%;
    height: 100%;
    display: block;
}

.gallery--masonry-large .gallery-item img {
    object-fit: cover;
}

.gallery--masonry-large .gallery-item__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px 18px;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--lp-on-surface) 75%, transparent));
    color: var(--lp-surface);
    font-size: 0.85rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery--masonry-large .gallery-item:hover .gallery-item__caption {
    opacity: 1;
}

@media (max-width: 900px) {
    .gallery--masonry-large {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
    }
}

@media (max-width: 560px) {
    .gallery--masonry-large {
        grid-template-columns: 1fr;
        grid-auto-rows: 220px;
    }

    .gallery--masonry-large .gallery-item--large {
        grid-column: span 1;
        grid-row: span 2;
    }
}

/* ============================================================ */
/* === gallery--featured (V5.4.10 — variant 'destaque') ======== */
/* 1 foto destaque 2×2 + restante grid 1×1. UI tem botão ⭐ por item
 * no overlay editor pra marcar item.size='large'. Sem item destacado,
 * fica grid uniforme 3 cols. Não compartilha com masonry-large (legado). */

.gallery--featured {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 220px;
    grid-auto-flow: dense;
    gap: 14px;
}
.gallery--featured .gallery-item {
    margin: 0;
    overflow: hidden;
    border-radius: var(--lp-radius-card, 12px);
    background: var(--lp-surface-2, #f0f0f0);
    position: relative;
    transition: transform 0.3s ease, filter 0.3s ease;
}
.gallery--featured .gallery-item--large {
    grid-column: span 2;
    grid-row: span 2;
}
.gallery--featured .gallery-item img,
.gallery--featured .gallery-item picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gallery--featured .gallery-item:hover {
    transform: translateY(-2px);
}
.gallery--featured .gallery-item[data-featured="1"]::before {
    content: '★';
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: rgba(0,0,0,0.7);
    color: #fbbf24;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    pointer-events: none;
}
.gallery--featured .gallery-item__caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: #fff;
    padding: 32px 16px 14px;
    font-size: 0.875rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.gallery--featured .gallery-item:hover .gallery-item__caption {
    opacity: 1;
}

/* Botão ⭐ feature toggle no overlay editor */
.gallery-item__feature {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0,0,0,0.1);
    color: #aaa;
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color 0.2s ease, background 0.2s ease;
}
.gallery-item__feature:hover { background: #fff; color: #f59e0b; }
.gallery-item__feature.is-active { background: #fbbf24; color: #1a1a1a; border-color: #fbbf24; }

@media (max-width: 768px) {
    .gallery--featured { grid-template-columns: repeat(2, 1fr); }
    .gallery--featured .gallery-item--large { grid-column: span 2; grid-row: span 2; }
}

/* ============================================================ */
/* === Bloco before-after-cards (V2 Fase 8) ==================== */
/* Cards de resultado com par antes/depois lado a lado. Reusável em
 * dermato, harmonização facial, ortodontia, fisio, treinador físico. */

.before-after__lead {
    max-width: 60ch;
    margin-bottom: 48px;
    color: var(--lp-on-surface-muted);
}

.before-after-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
}

.ba-card {
    display: flex;
    flex-direction: column;
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-card);
    overflow: hidden;
    box-shadow: var(--lp-shadow-card);
}

.ba-card__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--lp-border);
}

.ba-card__half {
    margin: 0;
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--lp-surface-2);
}

.ba-card__half img,
.ba-card__half picture {
    width: 100%;
    height: 100%;
    display: block;
}

.ba-card__half img {
    object-fit: cover;
    transition: transform 0.4s ease;
}

.ba-card:hover .ba-card__half img {
    transform: scale(1.02);
}

.ba-card__label {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px var(--sp-2-5);
    border-radius: var(--lp-radius-chip, 999px);
    background: color-mix(in srgb, var(--lp-on-surface) 75%, transparent);
    color: var(--lp-surface);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.ba-card__half--after .ba-card__label {
    background: var(--lp-accent);
    color: var(--lp-accent-on);
}

.ba-card__meta {
    padding: 22px 24px 24px;
}

.ba-card__treatment {
    margin: 0 0 8px;
    color: var(--lp-on-surface);
    font-family: var(--lp-font-display);
    font-weight: 600;
    font-size: 1.18rem;
    line-height: 1.3;
}

.ba-card__desc {
    margin: 0 0 14px;
    color: var(--lp-on-surface-muted);
    line-height: 1.5;
    font-size: 0.92rem;
}

.ba-card__time {
    display: inline-block;
    font-family: ui-monospace, "Geist Mono", Menlo, monospace;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--lp-accent-strong);
}

.before-after__disclaimer {
    margin: 48px auto 0;
    max-width: 72ch;
    text-align: center;
    color: var(--lp-on-surface-subtle);
    font-size: 0.82rem;
    font-style: italic;
    line-height: 1.55;
}

@media (max-width: 800px) {
    .before-after-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* ============================================================ */
/* === unit-strip.stat-row variant (V2 Fase 4, movido pro base) === */
/* 4 stats em grid horizontal: número gigante + label muted. 2-col mobile.
 * Reusável em lp_course/lp_local/qualquer template lp-family. */
.stat-row {
    background: var(--lp-surface-2);
    padding: 64px 0;
    text-align: center;
}

.stat-row__heading {
    margin-bottom: var(--sp-2-5);
}

.stat-row__lead {
    color: var(--lp-on-surface-muted);
    max-width: 60ch;
    margin: 0 auto 36px;
}

.stat-row__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin-top: var(--sp-4-5);
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

.stat__number {
    font-family: var(--lp-font-display);
    font-weight: var(--lp-fw-display);
    font-size: calc(var(--lp-fs-h1) * 0.95);
    line-height: 1;
    color: var(--lp-accent);
    letter-spacing: -0.03em;
}

.stat__label {
    color: var(--lp-on-surface-muted);
    font-size: 0.95rem;
    font-weight: 600;
}

@media (max-width: 800px) {
    .stat-row__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .stat__number {
        font-size: 3rem;
    }
}

/* ============================================================ */
/* === unit-strip.doctor-credentials modifier (V2 Fase 8) ====== */
/* CSS-only modifier do split-photo-bio. Foto quadrada, items em
 * lista vertical limpa, tom institucional. Reusável pra credentials
 * de qualquer profissional (médico, advogado, dentista, etc.) */

.unit-bio--doctor-credentials .unit-bio__photo {
    aspect-ratio: 1 / 1;
    border-radius: var(--lp-radius-btn);
    border: 1px solid var(--lp-border);
    box-shadow: none;
}

.unit-bio--doctor-credentials .unit-bio__copy .unit-kicker {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.78rem;
    color: var(--lp-accent-strong);
    font-weight: 700;
}

.unit-bio--doctor-credentials .unit-bio__copy h2 {
    font-weight: 500;
    color: var(--lp-on-surface);
}

.unit-bio--doctor-credentials .unit-bio__copy .lead {
    color: var(--lp-on-surface-muted);
}

.unit-bio--doctor-credentials .unit-bio__bullets li {
    color: var(--lp-on-surface);
    font-weight: 500;
    padding: 4px 0;
    gap: 14px;
}

.unit-bio--doctor-credentials .unit-bio__bullets li i {
    background: transparent;
    border: 0;
    color: var(--lp-accent);
    width: 22px;
    height: 22px;
    font-size: 1.1rem;
}

/* ============================================================ */
/* === Bloco pricing-plans (V2 Fase 9) ========================= */
/* Cards de planos lado-a-lado, featured plan em destaque visual.
 * Reusável: academias/yoga/crossfit/Pilates, SaaS, terapia/coaching,
 * agências B2B com pacotes definidos, consultórios. */

.pricing-plans__lead {
    max-width: 60ch;
    margin-bottom: 48px;
    color: var(--lp-on-surface-muted);
}

.pricing-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    align-items: stretch;
}

.pricing-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 36px 28px 32px;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-card);
    background: var(--lp-surface);
    box-shadow: var(--lp-shadow-card);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pricing-plan:not(.pricing-plan--featured):hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--lp-accent) 40%, var(--lp-border));
}

.pricing-plan--featured {
    border-top: 4px solid var(--lp-accent);
    transform: scale(1.04);
    box-shadow: var(--lp-shadow-strong);
    z-index: 1;
}

.pricing-plan__badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--lp-accent);
    color: var(--lp-accent-on);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: var(--lp-shadow-card);
}

.pricing-plan__head {
    margin-bottom: 22px;
}

.pricing-plan__name {
    margin: 0 0 6px;
    color: var(--lp-on-surface);
    font-family: var(--lp-font-display);
    font-weight: 600;
    font-size: 1.4rem;
}

.pricing-plan__tagline {
    margin: 0;
    color: var(--lp-on-surface-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.pricing-plan__price-wrap {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}

.pricing-plan__price {
    font-family: var(--lp-font-display);
    font-weight: var(--lp-fw-display);
    font-size: 2.6rem;
    line-height: 1;
    color: var(--lp-accent);
    letter-spacing: -0.02em;
}

.pricing-plan__period {
    color: var(--lp-on-surface-muted);
    font-size: 1rem;
    font-weight: 600;
}

.pricing-plan__price-note {
    margin: 0 0 24px;
    color: var(--lp-on-surface-subtle);
    font-size: 0.82rem;
}

.pricing-plan__features {
    list-style: none;
    padding: 24px 0 0;
    margin: 0 0 28px;
    border-top: 1px solid var(--lp-border);
    display: grid;
    gap: var(--sp-2-5);
    flex-grow: 1;
}

.pricing-plan__features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--lp-on-surface);
    font-size: 0.93rem;
    line-height: 1.5;
}

.pricing-plan__features li i {
    color: var(--lp-accent);
    font-size: 1.1rem;
    margin-top: 2px;
    flex: 0 0 auto;
}

.pricing-plan__cta {
    width: 100%;
    justify-content: center;
    min-height: 48px;
}

.pricing-plans__note {
    margin: var(--sp-4-5) auto 0;
    max-width: 70ch;
    text-align: center;
    color: var(--lp-on-surface-muted);
    font-size: 0.88rem;
    font-style: italic;
}

@media (max-width: 800px) {
    .pricing-plans-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .pricing-plan--featured {
        transform: none;
    }
    .pricing-plan__badge {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        display: inline-block;
        margin-bottom: 14px;
    }
}

/* === Bloco page-hero (V3 Fase 2) ============================== */
/* Hero interno pra pages prose-heavy. Sem fullbleed, sem foto.
 * Pattern B preditivo (Fase 8): nasce em _base.css por uso garantido
 * em V3.3 (Ana, 19 pages), V3.4 (blog), V3.5 (materials).
 * Consome só tokens semânticos — funciona em qualquer skin. */
.page-hero {
    padding-block: calc(var(--lp-section-y) * 0.7) calc(var(--lp-section-y) * 0.5);
    background: var(--lp-bg-base);
    color: var(--lp-on-surface);
}
.page-hero .container { max-width: var(--lp-container-w); }
.page-hero__eyebrow {
    font-family: var(--lp-font-mono, var(--lp-font-body));
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--lp-accent);
    margin: 0 0 var(--sp-3);
}
.page-hero__heading {
    font-family: var(--lp-font-display);
    font-size: var(--fs-h1-fluid);
    font-weight: var(--lp-heading-weight, var(--fw-semibold));
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
    margin: 0 0 var(--sp-3);
    color: var(--lp-on-surface);
}
.page-hero__heading-accent {
    color: var(--lp-accent);
    display: inline;
}
.page-hero__lead {
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: var(--lp-on-surface-muted);
    margin: 0 0 var(--sp-4);
    max-width: 60ch;
}
.page-hero__actions { margin-top: var(--sp-1); }

/* === V3 Fase 6 — materials-grid + research-list ============== */

/* ── materials-grid ─────────────────────────────────────────── */
.materials-section { padding: var(--lp-section-y) 0; background: var(--lp-surface); }

.materials-empty {
    padding: var(--space-10);
    text-align: center;
    color: var(--lp-on-surface-muted);
    border: 1px dashed var(--lp-border);
    border-radius: var(--lp-radius-card, 12px);
}

.materials-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0;
}

.materials-tab {
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--lp-surface-2);
    border: 1px solid var(--lp-border);
    color: var(--lp-on-surface-muted);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.materials-tab:hover,
.materials-tab.is-active {
    background: var(--lp-accent-weak);
    border-color: var(--lp-accent);
    color: var(--lp-accent);
}

.materials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 32px;
}

.materials-card {
    display: flex;
    flex-direction: column;
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-card, 12px);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.materials-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--lp-shadow-md, 0 8px 24px color-mix(in srgb, var(--lp-on-surface) 8%, transparent));
}

.materials-card__cover {
    aspect-ratio: 16/9;
    background: var(--lp-surface-2);
    overflow: hidden;
}

.materials-card__cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.materials-card__icon {
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lp-accent-weak);
    color: var(--lp-accent);
    font-size: 48px;
}

.materials-card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.materials-card__title {
    margin: 0;
    font-family: var(--lp-font-display);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--lp-on-surface);
}

.materials-card__desc {
    margin: 0;
    font-size: 0.9rem;
    color: var(--lp-on-surface-muted);
    line-height: 1.45;
    flex: 1;
}

.materials-card__meta {
    font-size: 0.8125rem;
    color: var(--lp-on-surface-subtle, var(--lp-on-surface-muted));
    display: flex;
    align-items: center;
    gap: 8px;
}

.materials-card__cta {
    margin-top: var(--sp-2-5);
    align-self: flex-start;
}

/* ── research-list ──────────────────────────────────────────── */
.research-section { padding: var(--lp-section-y) 0; background: var(--lp-surface); }

.research-empty {
    padding: var(--space-10);
    text-align: center;
    color: var(--lp-on-surface-muted);
    border: 1px dashed var(--lp-border);
    border-radius: var(--lp-radius-card, 12px);
}

.research-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 16px;
}

.research-tab {
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--lp-surface-2);
    border: 1px solid var(--lp-border);
    color: var(--lp-on-surface-muted);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.research-tab:hover,
.research-tab.is-active {
    background: var(--lp-accent-weak);
    border-color: var(--lp-accent);
    color: var(--lp-accent);
}

.research-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 24px;
}

.research-item {
    padding: 24px 0;
    border-bottom: 1px solid var(--lp-border);
}

.research-item:last-child { border-bottom: 0; }

.research-item__header {
    display: flex;
    align-items: center;
    gap: var(--sp-2-5);
    margin-bottom: 8px;
    font-size: 0.8125rem;
    color: var(--lp-on-surface-muted);
}

.research-item__type {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--lp-accent-weak);
    color: var(--lp-accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
}

.research-item__year { font-weight: 500; }

.research-item__title {
    margin: 0 0 8px;
    font-family: var(--lp-font-display);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.3;
}

.research-item__title a {
    color: var(--lp-on-surface);
    text-decoration: none;
}

.research-item__title a:hover { color: var(--lp-accent); }

.research-item__authors,
.research-item__venue {
    margin: 0;
    font-size: 0.9rem;
    color: var(--lp-on-surface-muted);
    font-style: italic;
}

.research-item__abstract {
    margin: var(--sp-2-5) 0 8px;
    color: var(--lp-on-surface);
    line-height: 1.6;
    max-width: 60ch;
}

.research-item__cta {
    color: var(--lp-accent);
    font-weight: 500;
    text-decoration: none;
    font-size: 0.9375rem;
}

.research-item__cta:hover { text-decoration: underline; }

/* ── research-post (article individual) ─────────────────────── */
.post-article.is-research .post-header { padding: var(--lp-section-y) 0 var(--space-6); }

.post-header__type {
    display: inline-block;
    padding: 4px var(--sp-2-5);
    border-radius: 999px;
    background: var(--lp-accent-weak);
    color: var(--lp-accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8125rem;
    margin-bottom: 16px;
}

.post-header__authors {
    margin: 4px 0 var(--sp-2-5);
    color: var(--lp-on-surface-muted);
    font-style: italic;
}

.post-abstract {
    padding: var(--space-5) 0;
    background: var(--lp-surface-2);
}

.post-abstract h2 {
    margin: 0 0 var(--sp-2-5);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--lp-on-surface-muted);
}

.post-abstract p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--lp-on-surface);
    max-width: 60ch;
}

.post-pdf-attach {
    padding: var(--space-5) 0;
    text-align: center;
    background: var(--lp-surface);
    border-top: 1px solid var(--lp-border);
}

/* V4 Fase 1.6 — site_template_badge (visitante deslogado em template) */
#site-template-badge {
    position: fixed;
    right: var(--space-3);
    bottom: var(--space-3);
    z-index: 9000;
    padding: 6px var(--sp-2-5);
    background: color-mix(in srgb, var(--lp-on-surface) 78%, transparent);
    color: var(--lp-surface);
    font-size: 12px;
    border-radius: 999px;
    font-weight: 500;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px color-mix(in srgb, black 18%, transparent);
    pointer-events: none;
}

/* Menu fixo por DEFAULT em TODO header do chrome. O dispatcher injeta a classe
   .chrome-header em qualquer header (render_header_for_site) → todo template,
   atual e futuro, tem menu grudado no topo sem CSS por header. A variante
   --overlay de cada header faz opt-out (position:absolute, vence por ordem de
   carga: headers/{X}/styles.css carrega depois deste _base). */
.chrome-header { position: sticky; top: 0; z-index: 50; }

/* Botão global "voltar ao topo" (criado por v411-blocks.js initBackToTop em todo
   template que não tenha um próprio). Escondido até rolar >400px (.is-visible). */
#adsl-to-top {
    position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
    z-index: 60; display: grid; place-items: center;
    width: 2.9rem; height: 2.9rem; border: none; border-radius: 999px; cursor: pointer;
    background: var(--lp-accent); color: var(--lp-accent-on);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--lp-accent) 35%, transparent);
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
#adsl-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
#adsl-to-top:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
    #adsl-to-top { transition: opacity .25s ease, visibility .25s; transform: none; }
    #adsl-to-top:hover { transform: none; }
}

/* Links legais do footer (helper v6_chrome_legal_html). Genérico: herda a cor
   do footer (currentColor) → legível em tema claro e escuro, qualquer modelo. */
.chrome-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.1rem; }
.chrome-legal a { color: currentColor; opacity: .7; text-decoration: none; font-size: .8rem; transition: opacity .2s ease; }
.chrome-legal a:hover { opacity: 1; }

/* Crédito do site no footer (v6_chrome_credit_html). Herda a cor do footer →
   funciona em qualquer esquema de cor do chrome. Editável em /admin. */
.chrome-credit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .8rem; color: currentColor; }
.chrome-credit a { color: currentColor; opacity: .7; text-decoration: none; transition: opacity .2s ease; }
.chrome-credit a:hover { opacity: 1; text-decoration: underline; }
.chrome-credit__sep { opacity: .4; }

/* CTA de chrome (header/footer) que aponta pro WhatsApp vira VERDE de marca
   automaticamente — paridade V5, sem configurar cor. Casa qualquer __cta cujo
   href é um link de WhatsApp. !important vence o background accent do modelo. */
a[class*="__cta"][href*="wa.me"],
a[class*="__cta"][href*="api.whatsapp.com"],
a[class*="__cta"][href*="whatsapp.com/send"] {
    background: var(--lp-whatsapp, #25D366) !important;
    color: #fff !important;
    border-color: var(--lp-whatsapp, #25D366) !important;
}
a[class*="__cta"][href*="wa.me"]:hover,
a[class*="__cta"][href*="api.whatsapp.com"]:hover,
a[class*="__cta"][href*="whatsapp.com/send"]:hover {
    background: color-mix(in srgb, var(--lp-whatsapp, #25D366) 88%, #000) !important;
    color: #fff !important;
}

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


/* === assets/css/_card-grid.css === */
/* V-card-grid — Sistema de grade balanceada de cards (nunca orfao).
 * Spec: docs/specs/sistema-grade-balanceada-cards.md
 *
 * Plataforma-wide: usado por diferenciais-icons, feature-grid-rich, services,
 * stats-numbers, credential-strip, team-grid-editorial, gallery.
 *
 * Aplicacao no renderer: <ul class="card-grid {classe-de-card_grid_layout()}">.
 * O bloco mantem seu CSS interno (cor/font/borda do card); este arquivo so
 * controla GRID. */

.card-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--card-grid-gap, 1.5rem);
}

/* Layouts simples (linhas cheias) */
.card-grid--1 { grid-template-columns: 1fr; max-width: 32rem; margin-left: auto; margin-right: auto; }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.card-grid--5 { grid-template-columns: repeat(5, 1fr); }
.card-grid--2x2 { grid-template-columns: repeat(2, 1fr); }

/* Layouts com ultima linha incompleta (12-col base, spans calculados).
 * Cards normais spanam X de 12 (= largura do base); ultimos N spanam Y de 12. */

/* 3+2 (n=5): 3 cards span 4 (12/3), 2 cards span 6 (12/2) */
.card-grid--3p2 { grid-template-columns: repeat(12, 1fr); }
.card-grid--3p2 > * { grid-column: span 4; }
.card-grid--3p2 > :nth-last-child(-n + 2) { grid-column: span 6; }

/* 4+3 (n=7): 4 cards span 3 (12/4), 3 cards span 4 (12/3) */
.card-grid--4p3 { grid-template-columns: repeat(12, 1fr); }
.card-grid--4p3 > * { grid-column: span 3; }
.card-grid--4p3 > :nth-last-child(-n + 3) { grid-column: span 4; }

/* 4+2 (n=6 alternativo, raro): 4 span 3, 2 span 6 */
.card-grid--4p2 { grid-template-columns: repeat(12, 1fr); }
.card-grid--4p2 > * { grid-column: span 3; }
.card-grid--4p2 > :nth-last-child(-n + 2) { grid-column: span 6; }

/* 3+2 generico (qualquer n com base=3 last=2) — alias = 3p2 */
.card-grid--3p3 { grid-template-columns: repeat(12, 1fr); }
.card-grid--3p3 > * { grid-column: span 4; }
.card-grid--3p3 > :nth-last-child(-n + 3) { grid-column: span 4; }

/* Responsivo: mid-screen -> reduz colunas mantendo sem-orfao */
@media (max-width: 1024px) {
    .card-grid--4,
    .card-grid--5,
    .card-grid--4p3,
    .card-grid--4p2 { grid-template-columns: repeat(2, 1fr); }
    .card-grid--4p3 > *,
    .card-grid--4p2 > *,
    .card-grid--3p2 > * { grid-column: auto; }
    .card-grid--3p2 { grid-template-columns: repeat(2, 1fr); }
    .card-grid--3p2 > :nth-last-child(-n + 2) { grid-column: auto; }
    .card-grid--3p3 { grid-template-columns: repeat(2, 1fr); }
    .card-grid--3p3 > :nth-last-child(-n + 3) { grid-column: auto; }
    .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .card-grid,
    .card-grid--2,
    .card-grid--3,
    .card-grid--4,
    .card-grid--5,
    .card-grid--2x2,
    .card-grid--3p2,
    .card-grid--4p3,
    .card-grid--3p3,
    .card-grid--4p2 {
        grid-template-columns: 1fr;
    }
    .card-grid > * { grid-column: auto !important; }
}