/* ============================================================================
   LAÍS NICOLA — Design System · Camada de Componentes
   Depende de tokens.css. Classes reutilizáveis (prefixo .ln-) para a LP.
   ============================================================================ */

/* ---------- Reset enxuto ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ---------- Base ---------- */
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--track-body);
  font-weight: var(--fw-reg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}

/* Pattern LN fixo, opacidade baixa — atmosfera da marca */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('../assets/ln-pattern.png');
  background-size: 340px auto;
  background-repeat: repeat;
  opacity: var(--pattern-opacity);
  z-index: var(--z-pattern);
  pointer-events: none;
  /* leve vinheta radial p/ concentrar contraste no centro */
  -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 55%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 50% 30%, #000 55%, transparent 100%);
}
body > * { position: relative; z-index: var(--z-base); }

/* ============================================================================
   LAYOUT
   ============================================================================ */
.ln-container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.ln-container--narrow { width: min(100% - 2.5rem, var(--container-narrow)); margin-inline: auto; }
.ln-section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.ln-section--alt { background: var(--bg-alt); }
.ln-section--deep { background: var(--bg-deep); }
.ln-stack > * + * { margin-top: var(--sp-4); }

/* ============================================================================
   TIPOGRAFIA
   ============================================================================ */
.ln-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.ln-eyebrow::before {
  content: "";
  width: 2.2em; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}

.ln-h1, .ln-h2, .ln-h3, .ln-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-heading);
  color: var(--text);
  text-wrap: balance;
}
.ln-h1 { font-size: var(--fs-3xl); font-weight: var(--fw-semi); }
.ln-h2 { font-size: var(--fs-2xl); font-weight: var(--fw-semi); }
.ln-h3 { font-size: var(--fs-xl); font-weight: var(--fw-med); letter-spacing: var(--track-body); }
.ln-h4 { font-size: var(--fs-lg); font-weight: var(--fw-med); letter-spacing: var(--track-body); font-family: var(--font-body); text-transform: none; }

/* palavra/linha em dourado dentro de um título */
.ln-gold {
  background: var(--accent-sheen);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.ln-lead   { font-size: var(--fs-lg); color: var(--text-muted); line-height: var(--lh-snug); max-width: var(--measure); }
.ln-body   { font-size: var(--fs-base); color: var(--text-muted); max-width: var(--measure); }
.ln-muted  { color: var(--text-muted); }
.ln-faint  { color: var(--text-faint); }
.ln-micro  { font-size: var(--fs-xs); color: var(--text-faint); letter-spacing: 0.02em; }

/* ============================================================================
   DIVISORES / LINHAS DOURADAS FINAS
   ============================================================================ */
.ln-divider {
  height: 1px; border: 0; width: 100%;
  background: linear-gradient(90deg, transparent, var(--line-gold) 20%, var(--line-gold) 80%, transparent);
}
.ln-divider--solid { background: var(--line-gold-soft); }
.ln-rule-node { /* pequeno losango dourado central */
  display: flex; align-items: center; gap: var(--sp-4); color: var(--accent);
}
.ln-rule-node::before, .ln-rule-node::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--line-gold));
}
.ln-rule-node::after { background: linear-gradient(90deg, var(--line-gold), transparent); }
.ln-rule-node span { width: 6px; height: 6px; transform: rotate(45deg); background: var(--accent); }

/* ============================================================================
   BOTÕES / CTA
   ============================================================================ */
.ln-btn {
  --_pad-y: 0.95rem; --_pad-x: 1.9rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  padding: var(--_pad-y) var(--_pad-x);
  font-family: var(--font-body); font-weight: var(--fw-semi);
  font-size: var(--fs-sm); letter-spacing: 0.03em;
  border-radius: var(--r-pill); border: 1px solid transparent;
  cursor: pointer; position: relative; isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.ln-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.ln-btn:active { transform: translateY(1px); }

/* Primário — dourado metálico */
.ln-btn--primary {
  color: var(--text-on-gold);
  background: var(--accent-grad);
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,0.45);
}
.ln-btn--primary::after { /* varredura de brilho no hover */
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform var(--dur-slow) var(--ease-out);
}
.ln-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 44px -12px rgba(201,164,76,0.5), inset 0 1px 0 rgba(255,255,255,0.5); }
.ln-btn--primary:hover::after { transform: translateX(120%); }

/* Fantasma — contorno dourado */
.ln-btn--ghost {
  color: var(--text); background: transparent;
  border-color: var(--glass-border-strong);
}
.ln-btn--ghost:hover { border-color: var(--accent); background: var(--glass-bg); transform: translateY(-2px); }

/* Bloco (full width no mobile) */
.ln-btn--block { width: 100%; }

/* Ícone whatsapp inline */
.ln-btn svg { width: 1.15em; height: 1.15em; }

/* ============================================================================
   CHIPS / TAGS DE QUALIFICAÇÃO
   ============================================================================ */
.ln-chip {
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.5rem 1rem;
  font-size: var(--fs-xs); font-weight: var(--fw-med); letter-spacing: 0.04em;
  border-radius: var(--r-pill);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  color: var(--text-muted);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
}
.ln-chip--gold { color: var(--accent-light); border-color: var(--glass-border-strong); }
.ln-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(201,164,76,0.18); }

/* ============================================================================
   CARD GLASS  (canônico: bg .04, borda 1px dourada .25, blur 12, raio 16)
   ============================================================================ */
.ln-card {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              background-color var(--dur-med) var(--ease-out);
}
/* brilho superior fino (highlight do vidro) */
.ln-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-highlight), transparent);
}
.ln-card:hover { transform: translateY(-4px); border-color: var(--glass-border-strong); background: var(--glass-bg-hover); }

.ln-card__icon {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: var(--r-md); margin-bottom: var(--sp-4);
  color: var(--accent); border: 1px solid var(--glass-border);
  background: rgba(201,164,76,0.06);
}
.ln-card__icon svg { width: 22px; height: 22px; stroke-width: 1.5; }
.ln-card__title { font-family: var(--font-body); font-weight: var(--fw-semi); font-size: var(--fs-lg); color: var(--text); margin-bottom: var(--sp-2); }
.ln-card__text  { color: var(--text-muted); font-size: var(--fs-sm); line-height: var(--lh-normal); }

/* variação callout (quadro jurídico destacado, borda dourada mais presente) */
.ln-callout {
  border-color: var(--glass-border-strong);
  background: linear-gradient(180deg, rgba(201,164,76,0.05), var(--glass-bg));
  border-left: 3px solid var(--accent);
}

/* ============================================================================
   GRID utilitário
   ============================================================================ */
.ln-grid { display: grid; gap: var(--sp-5); }
.ln-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ln-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ln-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .ln-grid--3, .ln-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ln-grid--2, .ln-grid--3, .ln-grid--4 { grid-template-columns: 1fr; } }

/* ============================================================================
   FAIXA DE AUTORIDADE (números) + FAIXA EM MOVIMENTO
   Reproduz o efeito da referência (referencia-stats-band.png)
   ============================================================================ */
.ln-authority { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
/* variante com poucos números: par centralizado, respirando mais */
.ln-authority--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 680px; gap: var(--sp-8); }
@media (max-width: 760px) { .ln-authority { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-4); } }
@media (max-width: 460px) { .ln-authority--pair { grid-template-columns: 1fr; gap: var(--sp-6); } }

.ln-stat { position: relative; padding-left: var(--sp-4); }
.ln-stat::before { content: ""; position: absolute; left: 0; top: 0.35rem; bottom: 0.35rem; width: 1px; background: var(--line-gold); }
.ln-stat__num {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-display); line-height: 0.9; color: var(--text);
  display: flex; align-items: flex-start; gap: 0.08em;
}
.ln-stat__suffix { font-size: 0.42em; color: var(--accent); font-weight: var(--fw-semi); margin-top: 0.5em; }
.ln-stat__label {
  margin-top: var(--sp-3); font-family: var(--font-display);
  font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted); line-height: 1.5;
}

/* Faixa em movimento (marquee) */
.ln-marquee {
  overflow: hidden; border-block: 1px solid var(--line-gold-soft);
  background: var(--bg-deep);
  padding-block: 0.9rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ln-marquee__track { display: flex; width: max-content; animation: ln-scroll 32s linear infinite; }
.ln-marquee:hover .ln-marquee__track { animation-play-state: paused; }
.ln-marquee__item {
  display: inline-flex; align-items: center; gap: 1.4rem; padding-inline: 1.4rem;
  font-family: var(--font-display); font-size: var(--fs-xs);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
}
.ln-marquee__item::after { content: ""; width: 5px; height: 5px; transform: rotate(45deg); background: var(--accent); opacity: 0.7; }
@keyframes ln-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ln-marquee__track { animation: none; } }

/* ============================================================================
   CHECKLIST (quadro de qualificação)
   ============================================================================ */
.ln-checklist { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.ln-checklist li { display: flex; gap: 0.9rem; align-items: flex-start; color: var(--text); font-size: var(--fs-sm); }
.ln-checklist li::before {
  content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304222E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 62% no-repeat,
    var(--accent-grad);
}

/* ============================================================================
   FAQ (accordion nativo <details>)
   ============================================================================ */
.ln-faq { border-top: 1px solid var(--hairline); }
.ln-faq__item { border-bottom: 1px solid var(--hairline); }
.ln-faq__q {
  list-style: none; cursor: pointer; padding: 1.35rem 0; display: flex;
  align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--font-body); font-weight: var(--fw-med); font-size: var(--fs-lg); color: var(--text);
}
.ln-faq__q::-webkit-details-marker { display: none; }
.ln-faq__q::after {
  content: "+"; font-family: var(--font-body); font-weight: 300; font-size: 1.6rem; color: var(--accent);
  transition: transform var(--dur-med) var(--ease-out); line-height: 1;
}
.ln-faq__item[open] .ln-faq__q::after { transform: rotate(45deg); }
.ln-faq__a { padding: 0 0 1.5rem; color: var(--text-muted); font-size: var(--fs-sm); max-width: var(--measure); }

/* ============================================================================
   SWATCHES (uso no style guide)
   ============================================================================ */
.ln-swatch { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--hairline); background: var(--glass-bg); }
.ln-swatch__chip { height: 96px; }
.ln-swatch__meta { padding: 0.8rem 0.9rem; font-size: var(--fs-xs); }
.ln-swatch__name { font-weight: var(--fw-semi); color: var(--text); }
.ln-swatch__hex  { color: var(--text-faint); font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.02em; text-transform: uppercase; }

/* ============================================================================
   MARCA — troca de variação por tema (branca no escuro, escura no claro)
   ============================================================================ */
.ln-logo-dark  { display: none; }
[data-theme="light"] .ln-logo-light { display: none; }
[data-theme="light"] .ln-logo-dark  { display: block; }

/* ============================================================================
   REVEAL on scroll — padrão VISÍVEL; só esconde quando o JS confirma suporte
   (`.js-anim` no <html>). Sem JS / em headless o conteúdo nunca fica em branco.
   ============================================================================ */
.ln-reveal { opacity: 1; transform: none; }
.js-anim .ln-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js-anim .ln-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-anim .ln-reveal { opacity: 1; transform: none; } }

/* ============================================================================
   ▓▓ EVOLUÇÃO — NOVOS EFEITOS ▓▓
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1 · SUPERFÍCIES DE VIDRO — 3 variantes (blur + saturate + brilho no topo)
   .ln-glass (neutra) · .ln-glass--gold (âmbar) · .ln-glass--deep (overlay escuro)
   ---------------------------------------------------------------------------- */
.ln-glass, .ln-glass--gold, .ln-glass--deep {
  position: relative;
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-default-top);   /* brilho fino do vidro no topo */
  border-radius: var(--r-lg);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  background: var(--glass-default-bg);
  box-shadow: var(--shadow-md);
}
.ln-glass--gold {
  background: var(--glass-gold-bg);
  border-color: var(--glass-gold-border);
  border-top-color: var(--glass-gold-top);
}
.ln-glass--deep {
  background: var(--glass-deep-bg);
  border-color: var(--hairline);
  border-top-color: var(--glass-deep-top);
}
/* Fallback: onde não há backdrop-filter, cair para sólido (sem vidro embaçado) */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .ln-glass, .ln-glass--gold, .ln-glass--deep, .ln-card, .ln-chip { background: var(--glass-fallback); }
}

/* ----------------------------------------------------------------------------
   2 · SUPERFÍCIES DE GRADIENTE CHEIO (blocos de destaque / CTA / selo)
   ---------------------------------------------------------------------------- */
.ln-surface--grad { position: relative; overflow: hidden; border-radius: var(--r-lg); color: var(--text); }
.ln-surface--petrol      { background: var(--grad-petrol); border: 1px solid var(--line-gold-soft); }
/* variante de destaque: mesmo petróleo tonal, borda dourada mais presente (o dourado é acento, não entra no gradiente) */
.ln-surface--petrol.ln-surface--edge { border-color: var(--glass-border-strong); }
.ln-surface--gold-depth  { background: var(--grad-gold-depth); color: var(--text-on-gold); border: 1px solid rgba(110,85,24,0.4); }
/* leve textura de luz no canto superior das superfícies petróleo (luminosidade, não cor) */
.ln-surface--petrol::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 15% 0%, rgba(255,255,255,0.08), transparent 55%);
  pointer-events: none;
}
.ln-surface--grad > * { position: relative; z-index: 1; }  /* conteúdo acima da textura ::before */

/* .on-dark — reafirma o contexto ESCURO dentro de superfícies que são petróleo
   nos DOIS temas (petrol / petrol-gold). Sem isto, no tema claro o texto e o
   vidro herdam tokens claros e somem sobre o fundo escuro. Reutilizável na LP. */
.on-dark {
  --text: #FFFFFF;
  --text-muted: rgba(255,255,255,0.68);
  --text-faint: rgba(255,255,255,0.42);
  --text-on-gold: #04222E;
  --accent: #C9A44C;
  --accent-light: #F1DFA6;
  --glass-border: rgba(201,164,76,0.25);
  --glass-border-strong: rgba(201,164,76,0.45);
  --glass-default-bg: rgba(255,255,255,0.05);
  --glass-default-top: rgba(255,255,255,0.12);
  --glass-gold-bg: rgba(201,164,76,0.06);
  --glass-gold-border: rgba(201,164,76,0.18);
  --glass-gold-top: rgba(241,223,166,0.22);
  --glass-deep-bg: rgba(2,21,29,0.50);
  --glass-deep-top: rgba(255,255,255,0.08);
  --glass-fallback: #063243;
  --hairline: rgba(255,255,255,0.10);
  color: #FFFFFF;
}

/* ----------------------------------------------------------------------------
   3 · BOTÃO WHATSAPP (CTA de conversão direta) + pulse sutil no hero
   ---------------------------------------------------------------------------- */
.ln-btn--whatsapp {
  color: #FFFFFF;
  background: var(--wa-grad);
  box-shadow: 0 8px 24px -10px rgba(15,124,60,0.45), inset 0 1px 0 rgba(255,255,255,0.16);
}
.ln-btn--whatsapp::after {                     /* varredura de brilho suave no hover */
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.28) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform var(--dur-slow) var(--ease-out);
}
.ln-btn--whatsapp:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(15,124,60,0.55), inset 0 1px 0 rgba(255,255,255,0.2); }
.ln-btn--whatsapp:hover::after { transform: translateX(120%); }

/* Pulse aplicado num WRAPPER (não no botão) p/ não conflitar com o translateY do hover */
.ln-pulse { display: inline-block; animation: ln-pulse 2.5s var(--ease-inout) infinite; will-change: transform; }
@keyframes ln-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.015); } }
@media (prefers-reduced-motion: reduce) { .ln-pulse { animation: none; } }

/* ----------------------------------------------------------------------------
   4 · BENTO GRID
   ---------------------------------------------------------------------------- */
.ln-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); grid-auto-rows: minmax(150px, auto); }
.ln-bento__lg   { grid-column: span 2; grid-row: span 2; }
.ln-bento__sm   { grid-column: span 1; }
.ln-bento__wide { grid-column: span 2; }
.ln-bento > * { padding: clamp(1.2rem, 2.5vw, 1.8rem); display: flex; flex-direction: column; }
.ln-bento__tag {  /* rótulo Cinzel caixa alta no canto */
  font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent); margin-bottom: auto;
}
@media (max-width: 900px) {
  .ln-bento { grid-template-columns: repeat(2, 1fr); }
  .ln-bento__lg { grid-column: span 2; grid-row: span 1; }
  .ln-bento__wide { grid-column: span 2; }
}
@media (max-width: 560px) {
  .ln-bento { grid-template-columns: 1fr; }
  .ln-bento__lg, .ln-bento__wide, .ln-bento__sm { grid-column: span 1; }
}

/* ----------------------------------------------------------------------------
   5 · HOVER UTILITIES (combináveis nos cards: lift + glow)
   ---------------------------------------------------------------------------- */
.hover-lift    { transition: transform var(--dur-med) var(--ease-out); }
.hover-lift:hover { transform: translateY(-5px); }
.hover-glow    { transition: border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.hover-glow:hover { border-color: rgba(201,164,76,0.40); box-shadow: 0 12px 40px -12px rgba(201,164,76,0.18); }
.hover-surface { transition: background-color var(--dur-med) var(--ease-out); }
.hover-surface:hover { background: var(--glass-bg-hover); }
@media (prefers-reduced-motion: reduce) {
  .hover-lift:hover { transform: none; }
}

/* ----------------------------------------------------------------------------
   6 · WAVE (transição fluida entre seções) + BRUSH (traço dourado sob títulos)
   ---------------------------------------------------------------------------- */
.ln-wave { display: block; width: 100%; line-height: 0; }
.ln-wave svg { display: block; width: 100%; height: clamp(40px, 6vw, 72px); }

/* Brush: gradiente dourado revelado por uma máscara de traço orgânico */
.ln-brush {
  width: 118px; height: 13px; opacity: 0.9; margin-top: 0.9rem;
  background: var(--accent-sheen);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 118 13'%3E%3Cpath d='M2 7C22 2 40 3.5 60 5.2c22 1.9 40-1 56 .6-14 3.4-33 2-54 2.6C42 8.6 22 11 2 7Z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 118 13'%3E%3Cpath d='M2 7C22 2 40 3.5 60 5.2c22 1.9 40-1 56 .6-14 3.4-33 2-54 2.6C42 8.6 22 11 2 7Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.ln-brush--center { margin-inline: auto; }

/* ----------------------------------------------------------------------------
   7 · PERFORMANCE
   ---------------------------------------------------------------------------- */
/* backdrop-filter é caro: no mobile reduzir o blur do vidro */
@media (max-width: 640px) {
  .ln-glass, .ln-glass--gold, .ln-glass--deep, .ln-card, .ln-chip {
    backdrop-filter: var(--glass-filter-mobile);
    -webkit-backdrop-filter: var(--glass-filter-mobile);
  }
}
/* seções abaixo da dobra: pular render/layout até chegarem perto da viewport */
.cv-auto { content-visibility: auto; contain-intrinsic-size: auto 640px; }