/* estilo.css — Design system EstokCerto v2
   Tokens extraídos do mockup Lovable (estok-certo-pro.lovable.app) em 14/08:
   fonte Epilogue · navy oklch(23.5% .062 265) · laranja brand oklch(64.5% .185 42)
   · cards brancos raio 8px · badges pill tintados · CTA principal navy */

/* ---------- Fonte Epilogue (embutida, funciona offline) ---------- */
@font-face {
  font-family: 'Epilogue';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/epilogue-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Epilogue';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/epilogue-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --background: oklch(99.5% 0.002 250);
  --foreground: oklch(23.5% 0.062 265);
  --primary: oklch(23.5% 0.062 265);
  --primary-foreground: oklch(98.5% 0.004 250);
  --muted: oklch(96.5% 0.006 250);
  --muted-foreground: oklch(52% 0.028 262);
  --border: oklch(91.5% 0.008 255);
  --card: oklch(100% 0 0);
  --sidebar: oklch(23.5% 0.062 265);
  --sidebar-foreground: oklch(90% 0.012 255);
  --sidebar-ativo: oklch(30% 0.055 264);
  --brand: oklch(64.5% 0.185 42);
  --brand-foreground: oklch(98.5% 0.004 250);
  --destructive: oklch(55% 0.2 25);
  --raio: 8px;
  --sombra: 0 1px 2px rgba(15, 27, 45, .04), 0 1px 3px rgba(15, 27, 45, .06);
  --fonte: 'Epilogue', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--fonte);
  background: var(--background);
  color: var(--foreground);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Layout ---------- */
.layout { display: flex; min-height: 100vh; }
.conteudo { flex: 1; margin-left: 264px; display: flex; flex-direction: column; min-width: 0; }
.pagina { padding: 24px 32px 60px; max-width: 1200px; width: 100%; }

/* ---------- Sidebar (navy, estilo mockup) ---------- */
.sidebar {
  width: 264px; background: var(--sidebar); color: var(--sidebar-foreground);
  position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column;
  padding: 16px 12px; overflow-y: auto; z-index: 40;
}
.sidebar-logo { display: flex; align-items: baseline; gap: 2px; padding: 8px 10px 20px; font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: #fff; text-decoration: none; }
.sidebar-logo:hover { opacity: .88; }
.sidebar-logo .certo { color: var(--brand); }
.sidebar-logo .arq { font-size: 9.5px; color: var(--sidebar-foreground); opacity: .6; font-weight: 600; letter-spacing: .08em; margin-left: 6px; text-transform: uppercase; }
.sidebar-grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--sidebar-foreground); opacity: .65; padding: 16px 10px 6px; font-weight: 600; }
.sidebar a.item {
  display: flex; align-items: center; gap: 10px; color: var(--sidebar-foreground); text-decoration: none;
  padding: 8px 10px; border-radius: 6px; font-size: 14px; font-weight: 500; margin-bottom: 2px;
  transition: background .12s;
}
.sidebar a.item svg { flex: none; opacity: .9; }
.sidebar a.item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar a.item.ativo { background: var(--sidebar-ativo); color: var(--primary-foreground); font-weight: 500; }
.sidebar .item.off { opacity: .38; cursor: not-allowed; pointer-events: none; }
.sidebar .item.off .em-breve { margin-left: auto; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; opacity: .7; }
.sidebar-rodape { margin-top: auto; padding: 14px 10px 4px; font-size: 11.5px; color: var(--sidebar-foreground); opacity: .55; }

/* ---------- Topbar (branco 95%, estilo mockup) ---------- */
.topbar {
  background: oklab(0.995 -0.0007 -0.0019 / 0.95);
  border-bottom: 1px solid var(--border);
  padding: 10px 32px; display: flex; align-items: center; gap: 14px;
  position: sticky; top: 0; z-index: 30; backdrop-filter: blur(6px);
}
.topbar .loja { font-weight: 700; font-size: 15px; }
.topbar .loja-sub { font-size: 12.5px; color: var(--muted-foreground); }
.topbar .acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar .sino { background: none; border: 0; cursor: pointer; color: var(--muted-foreground); padding: 6px; border-radius: 6px; display: grid; place-items: center; position: relative; }
.topbar .sino:hover { color: var(--foreground); background: var(--muted); }
.topbar .sino .ponto { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.topbar .avatar { background: var(--sidebar); color: #fff; width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.trilha { font-size: 13px; color: var(--muted-foreground); margin-bottom: 4px; }
.trilha b { color: var(--foreground); font-weight: 600; }

/* ---------- Tipografia ---------- */
h1 { font-size: 30px; font-weight: 700; letter-spacing: -.6px; }
h2 { font-size: 16px; font-weight: 700; letter-spacing: -.32px; margin-bottom: 2px; }
.sub { color: var(--muted-foreground); margin: 6px 0 20px; max-width: 720px; font-size: 14px; line-height: 20px; }

/* ---------- Cards e KPIs ---------- */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 16px 20px;
}
.card + .card, .card + .bloco { margin-top: 16px; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--raio); box-shadow: var(--sombra); padding: 14px 16px; }
.kpi .rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-foreground); font-weight: 600; }
.kpi .valor { font-size: 28px; font-weight: 800; letter-spacing: -.5px; margin: 2px 0; color: var(--foreground); }
.kpi .detalhe { font-size: 12.5px; color: var(--muted-foreground); }
.kpi.destaque { border-top: 2px solid var(--brand); }

/* ---------- Badges (pill, fundo tintado — cores exatas do mockup) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.badge.ruptura { background: oklab(0.55 0.181262 0.0845237 / 0.1); color: oklch(0.55 0.2 25); }
.badge.risco { background: oklab(0.75 0.0388228 0.144889 / 0.15); color: oklch(0.75 0.15 75); }
.badge.saudavel { background: oklab(0.58 -0.11782 0.0549404 / 0.12); color: oklch(0.58 0.13 155); }
.badge.excesso { background: oklab(0.235 -0.00540365 -0.0617641 / 0.1); color: oklch(0.235 0.062 265); }

/* ---------- Botões (navy primário; brand para acentos) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
  border-radius: 6px; font-size: 14px; font-weight: 600; padding: 10px 16px;
  text-decoration: none; transition: filter .12s, transform .05s; font-family: var(--fonte);
}
.btn:active { transform: scale(.98); }
.btn.primario { background: var(--primary); color: var(--primary-foreground); }
.btn.primario:hover { filter: brightness(1.15); }
.btn.brand { background: var(--brand); color: var(--brand-foreground); }
.btn.brand:hover { filter: brightness(1.08); }
.btn.secundario { background: var(--card); color: var(--foreground); border: 1px solid var(--border); }
.btn.secundario:hover { background: var(--muted); }
.btn.ghost { background: transparent; color: var(--muted-foreground); padding: 8px 12px; font-weight: 500; }
.btn.ghost:hover { color: var(--foreground); background: var(--muted); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.whats { background: oklch(0.66 0.19 150); color: #fff; }
.btn.whats:hover { filter: brightness(1.05); }
.acoes-topo { display: flex; gap: 8px; margin: -8px 0 16px; flex-wrap: wrap; }

/* ---------- Formulários ---------- */
.input, .select, .texto-num {
  width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 14px; font-family: var(--fonte); background: var(--card); color: var(--foreground);
}
.input:focus, .select:focus { outline: 2px solid color-mix(in oklch, var(--brand) 35%, transparent); border-color: var(--brand); }
label { font-size: 13px; font-weight: 600; color: var(--muted-foreground); display: block; margin-bottom: 6px; }
.dropzone {
  border: 2px dashed var(--border); border-radius: var(--raio); background: var(--background);
  padding: 32px 20px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.arrastando { border-color: var(--brand); background: color-mix(in oklch, var(--brand) 6%, white); }
.dropzone .icone { font-size: 26px; margin-bottom: 6px; }
.slider { width: 100%; accent-color: var(--brand); }
.switch { position: relative; width: 40px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .trilho { position: absolute; inset: 0; background: var(--border); border-radius: 999px; transition: background .15s; }
.switch .trilho::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + .trilho { background: oklch(0.58 0.13 155); }
.switch input:checked + .trilho::after { transform: translateX(18px); }

/* ---------- Tabelas (mockup: th 14px/500 muted, td 14px/400) ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 14px; font-weight: 500; color: var(--muted-foreground); padding: 6px 12px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tabela td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tr:hover td { background: var(--background); }
.tabela .produto-nome { font-weight: 600; }
.tabela .produto-meta { font-size: 12px; color: var(--muted-foreground); margin-top: 1px; }
.tabela .justificativa { font-size: 12.5px; color: var(--muted-foreground); margin-top: 4px; max-width: 480px; line-height: 17px; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela th.num { text-align: right; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.filtros .input { max-width: 260px; }
.filtros .select { max-width: 220px; }

/* ---------- Listas (dashboard) ---------- */
.lista-item { display: flex; align-items: center; gap: 14px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.lista-item:last-child { border-bottom: 0; }
.lista-item .info { flex: 1; min-width: 0; }
.lista-item .nome { font-weight: 600; font-size: 14px; }
.lista-item .meta { font-size: 12px; color: var(--muted-foreground); }
.lista-item .acao { font-size: 13px; font-weight: 700; color: var(--foreground); white-space: nowrap; }

/* ---------- Gráfico de barras (laranja brand) ---------- */
.grafico { display: flex; align-items: flex-end; gap: 12px; height: 150px; padding-top: 10px; }
.grafico .barra { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.grafico .barra .v { font-size: 10.5px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.grafico .barra .t { height: 0; border-radius: 4px 4px 0 0; background: var(--brand); width: 100%; max-width: 44px; min-height: 2px; }
.grafico .barra .m { font-size: 11.5px; color: var(--muted-foreground); font-weight: 600; }

/* ---------- Alertas ---------- */
.alerta { border-radius: 8px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 12px; }
.alerta.erro { background: oklab(0.55 0.181262 0.0845237 / 0.1); color: oklch(0.55 0.2 25); }
.alerta.aviso { background: oklab(0.75 0.0388228 0.144889 / 0.15); color: oklch(0.75 0.15 75); }
.alerta.sucesso { background: oklab(0.58 -0.11782 0.0549404 / 0.12); color: oklch(0.58 0.13 155); }

/* ---------- Parâmetros ---------- */
.linha-slider { display: grid; grid-template-columns: 1fr 90px; align-items: center; gap: 18px; margin: 12px 0; }
.linha-slider .valor { text-align: right; font-weight: 800; font-size: 20px; }
.linha-config { display: flex; align-items: center; gap: 14px; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.linha-config .desc { font-size: 13px; color: var(--muted-foreground); }

/* ---------- Pedido WhatsApp ---------- */
.pedido-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.pedido-item input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--brand); }
.pedido-item .info { flex: 1; }
.msg-previa { background: oklab(0.9 -0.06 0.05 / 0.35); border: 1px solid oklch(0.85 0.09 155); border-radius: 10px; padding: 14px 16px; font-size: 13.5px; white-space: pre-wrap; font-family: var(--fonte); }

/* ---------- Reserva (página standalone) ---------- */
.reserva { min-height: 100vh; background: linear-gradient(160deg, var(--sidebar) 0%, oklch(27% 0.06 265) 55%, oklch(33% 0.07 265) 100%); color: #e2e8f0; display: flex; align-items: center; justify-content: center; padding: 32px 18px; }
.reserva-card { background: var(--card); color: var(--foreground); border-radius: 16px; max-width: 480px; width: 100%; padding: 32px 28px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.reserva .tag { display: inline-block; background: var(--brand); color: var(--brand-foreground); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; border-radius: 999px; padding: 4px 12px; margin-bottom: 14px; }
.reserva h1 { font-size: 24px; margin-bottom: 10px; }
.reserva .aviso { background: oklab(0.75 0.0388228 0.144889 / 0.15); color: oklch(0.75 0.15 75); border-radius: 8px; padding: 10px 14px; font-size: 13.5px; font-weight: 600; margin: 16px 0; }
.reserva ul { list-style: none; margin: 14px 0 20px; }
.reserva li { padding: 6px 0 6px 26px; position: relative; font-size: 14.5px; }
.reserva li::before { content: "✓"; position: absolute; left: 0; color: oklch(0.58 0.13 155); font-weight: 800; }
.reserva .btn { width: 100%; justify-content: center; font-size: 15.5px; padding: 13px; }
.reserva .btn.primario { background: var(--brand); }
.reserva .rodape { text-align: center; font-size: 12.5px; color: var(--muted-foreground); margin-top: 18px; }
.form-campo { margin-bottom: 14px; }

/* ---------- Responsivo ---------- */
@media (max-width: 920px) {
  .layout { flex-direction: column; }
  .sidebar { position: static; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 12px; gap: 4px; }
  .sidebar-logo { padding: 4px 10px; font-size: 18px; }
  .sidebar-grupo { display: none; }
  .sidebar a.item { padding: 7px 10px; font-size: 13px; }
  .sidebar .item.off { display: none; }
  .sidebar-rodape { display: none; }
  .conteudo { margin-left: 0; }
  .pagina { padding: 16px 14px 40px; }
  .topbar { padding: 10px 14px; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ============================================================
   v3 — Landing (Home) + modal de diagnóstico
   Réplica da estrutura e dos tokens do mockup Lovable (14/08)
   ============================================================ */
html { scroll-behavior: smooth; }
body.landing { background: var(--background); color: var(--foreground); }

.ln-container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- Navegação ---------- */
#ln-nav { position: sticky; top: 0; z-index: 50; background: oklab(0.995 -0.00068404 -0.00187939 / 0.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.ln-nav-inner { display: flex; align-items: center; gap: 24px; height: 64px; }
.ln-logo { font-size: 21px; font-weight: 800; letter-spacing: -.03em; color: var(--foreground); text-decoration: none; display: inline-flex; align-items: baseline; gap: 2px; }
.ln-logo .certo { color: var(--brand); }
.ln-logo .arq { font-size: 9.5px; color: var(--muted-foreground); font-weight: 600; letter-spacing: .08em; margin-left: 6px; text-transform: uppercase; }
.ln-links { display: flex; gap: 22px; margin-left: auto; }
.ln-links a { font-size: 14px; font-weight: 500; color: var(--muted-foreground); text-decoration: none; }
.ln-links a:hover { color: var(--foreground); }
.ln-nav-acoes { display: flex; align-items: center; gap: 12px; }
.ln-entrar { font-size: 14px; font-weight: 600; color: var(--foreground); text-decoration: none; }
.ln-entrar:hover { text-decoration: underline; }

/* ---------- Hero (navy) ---------- */
.ln-hero { background: linear-gradient(150deg, oklch(21% 0.06 265) 0%, var(--sidebar) 45%, oklch(29% 0.06 265) 100%); color: #fff; padding: 84px 0 96px; }
.ln-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.ln-hero-texto h1 { font-size: 60px; line-height: 63px; letter-spacing: -1.2px; font-weight: 700; color: oklch(0.985 0.004 250); margin: 14px 0 20px; }
.ln-hero-sub { font-size: 17px; line-height: 27px; color: oklch(0.92 0.01 255 / 0.88); max-width: 540px; margin-bottom: 30px; }
.ln-hero-botoes { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ln-hero-botoes.centro { justify-content: center; }
.ln-hero-nota { margin-top: 18px; font-size: 13px; color: oklch(0.92 0.01 255 / 0.6); }

.ln-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
.ln-eyebrow.claro { color: oklch(0.72 0.15 55); }
.btn.brand.grande { font-size: 15px; padding: 14px 24px; }
.btn.ghost.claro { color: #fff; border: 1px solid oklch(1 0 0 / 0.35); background: transparent; }
.btn.ghost.claro:hover { background: oklch(1 0 0 / 0.1); color: #fff; }
.btn.bloco { width: 100%; justify-content: center; }

/* ---------- Card "Sugestão da semana" ---------- */
.ln-card-sugestao { background: var(--card); color: var(--foreground); border-radius: 14px; padding: 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.ln-card-tag { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 8px; }
.ln-card-loja { font-size: 19px; font-weight: 800; letter-spacing: -.4px; }
.ln-card-meta { font-size: 13px; color: var(--muted-foreground); margin-bottom: 16px; }
.ln-card-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.ln-card-kpis > div { background: var(--muted); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; }
.ln-kpi-valor { font-size: 19px; font-weight: 800; letter-spacing: -.4px; }
.ln-kpi-rotulo { font-size: 11px; color: var(--muted-foreground); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ln-card-lista { display: flex; flex-direction: column; }
.ln-card-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 600; }
.ln-card-item:last-child { border-bottom: 0; }

/* ---------- Seções claras ---------- */
.ln-secao { padding: 84px 0; }
.ln-secao-muted { background: var(--muted); }
.ln-secao h2, .ln-cta h2 { font-size: 38px; line-height: 44px; letter-spacing: -.9px; font-weight: 700; color: var(--foreground); max-width: 680px; }
.ln-intro { font-size: 17px; line-height: 27px; color: var(--muted-foreground); max-width: 640px; margin: 12px 0 36px; }
.ln-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ln-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ln-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 26px; box-shadow: var(--sombra); }
.ln-card h3 { font-size: 17px; font-weight: 700; letter-spacing: -.3px; margin-bottom: 8px; }
.ln-card p { font-size: 14.5px; line-height: 22px; color: var(--muted-foreground); }
.ln-passo { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 22px; }
.ln-passo-num { width: 30px; height: 30px; border-radius: 8px; background: var(--sidebar); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 800; margin-bottom: 14px; }
.ln-passo h3 { font-size: 15.5px; font-weight: 700; letter-spacing: -.3px; margin-bottom: 6px; }
.ln-passo p { font-size: 13.5px; line-height: 20px; color: var(--muted-foreground); }
.ln-centro { text-align: center; margin-top: 32px; }

/* ---------- Stats ---------- */
.ln-stats .ln-stat { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 26px 22px; box-shadow: var(--sombra); display: flex; flex-direction: column; }
.ln-stat-valor { font-size: 36px; font-weight: 800; letter-spacing: -1px; color: var(--foreground); margin-bottom: 4px; }
.ln-stat-rotulo { font-size: 13.5px; font-weight: 700; color: var(--foreground); }
.ln-stat-meta { font-size: 12px; color: var(--muted-foreground); margin-top: 2px; }
.ln-nota { font-size: 12.5px; color: var(--muted-foreground); margin-top: 28px; }

/* ---------- CTA final ---------- */
.ln-cta { text-align: center; }
.ln-cta-inner h2 { color: oklch(0.985 0.004 250); margin: 0 auto 14px; }
.ln-cta-inner p { font-size: 16px; line-height: 25px; color: oklch(0.92 0.01 255 / 0.85); max-width: 620px; margin: 0 auto 30px; }

/* ---------- Footer ---------- */
#ln-footer { background: oklch(19% 0.055 265); color: oklch(0.85 0.012 255 / 0.75); padding: 60px 0 32px; }
.ln-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 44px; }
#ln-footer .ln-logo { color: #fff; font-size: 22px; }
.ln-footer-marca p { font-size: 13.5px; line-height: 21px; margin-top: 12px; max-width: 300px; }
.ln-footer-col h3 { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.ln-footer-col a { display: block; font-size: 13.5px; color: oklch(0.85 0.012 255 / 0.7); text-decoration: none; margin-bottom: 9px; }
.ln-footer-col a:hover { color: #fff; }
.ln-footer-base { border-top: 1px solid oklch(1 0 0 / 0.12); padding-top: 22px; font-size: 12.5px; color: oklch(0.85 0.012 255 / 0.5); }

/* ---------- Modal de diagnóstico ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(10, 16, 26, .55); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 100; padding: 18px; }
.modal-overlay[hidden] { display: none; }
.modal-card { background: var(--card); border-radius: 14px; max-width: 480px; width: 100%; padding: 30px 28px; position: relative; box-shadow: 0 24px 70px rgba(0, 0, 0, .4); max-height: 92vh; overflow-y: auto; }
.modal-close { position: absolute; top: 14px; right: 14px; background: none; border: 0; font-size: 15px; color: var(--muted-foreground); cursor: pointer; width: 30px; height: 30px; border-radius: 6px; }
.modal-close:hover { background: var(--muted); color: var(--foreground); }
.modal-card h2 { font-size: 21px; letter-spacing: -.5px; margin-bottom: 6px; padding-right: 28px; }
.modal-sub { font-size: 13.5px; line-height: 20px; color: var(--muted-foreground); margin-bottom: 18px; }
.modal-nota { font-size: 12px; color: var(--muted-foreground); text-align: center; margin-top: 12px; }

.diag-freq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.diag-freq button { border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 9px 6px; font-size: 13px; font-weight: 600; font-family: var(--fonte); color: var(--foreground); cursor: pointer; transition: background .12s, border-color .12s; }
.diag-freq button:hover { border-color: var(--brand); }
.diag-freq button.ativo { background: var(--primary); border-color: var(--primary); color: #fff; }

.diag-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 14px; }
.diag-kpi { background: var(--muted); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; }
.diag-kpi-valor { font-size: 20px; font-weight: 800; letter-spacing: -.5px; color: var(--foreground); }
.diag-kpi-rotulo { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-foreground); margin-top: 2px; }
.diag-frase { font-size: 14px; line-height: 21px; color: var(--foreground); background: oklab(0.75 0.0388228 0.144889 / 0.12); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.diag-proximo { border-top: 1px solid var(--border); padding-top: 14px; margin-bottom: 16px; }
.diag-proximo-titulo { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); }
.diag-proximo p { font-size: 13.5px; line-height: 20px; color: var(--muted-foreground); margin-top: 6px; }

/* ---------- Landing responsiva ---------- */
@media (max-width: 920px) {
  .ln-links { display: none; }
  .ln-nav-inner { height: 56px; }
  .ln-hero { padding: 56px 0 64px; }
  .ln-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .ln-hero-texto h1 { font-size: 38px; line-height: 42px; letter-spacing: -.8px; }
  .ln-secao { padding: 56px 0; }
  .ln-secao h2, .ln-cta h2 { font-size: 28px; line-height: 34px; }
  .ln-grid-2, .ln-grid-4 { grid-template-columns: 1fr; }
  .ln-footer-grid { grid-template-columns: 1fr 1fr; }
  .diag-kpis { grid-template-columns: 1fr; }
}

/* ============================================================
   v4 — Páginas internas públicas (planos, beneficios, como-funciona,
   resultados, sobre, blog) — réplica do mockup Lovable
   ============================================================ */
.ln-links a.ativo { color: var(--foreground); font-weight: 700; }

/* ---------- Hero de página interna (mockup: h1 48px navy, fundo claro) ---------- */
.pg-hero { padding: 80px 20px; }
.pg-hero h1 { font-size: 48px; line-height: 52px; letter-spacing: -.96px; font-weight: 700; color: var(--foreground); max-width: 760px; }
.pg-intro { font-size: 18px; line-height: 28px; color: var(--muted-foreground); max-width: 680px; margin-top: 14px; }

/* ---------- Grid 3 colunas ---------- */
.ln-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ---------- Planos ---------- */
.planos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plano-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 26px; display: flex; flex-direction: column; position: relative; box-shadow: var(--sombra); }
.plano-card.destaque { border: 2px solid var(--brand); }
.plano-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--brand); color: var(--brand-foreground); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.plano-card h2 { font-size: 19px; }
.plano-desc { font-size: 13.5px; color: var(--muted-foreground); line-height: 20px; margin: 4px 0 14px; min-height: 40px; }
.plano-preco { font-size: 30px; font-weight: 800; letter-spacing: -.8px; margin-bottom: 16px; }
.plano-preco span { font-size: 14px; font-weight: 600; color: var(--muted-foreground); }
.plano-lista { list-style: none; margin: 0 0 20px; flex: 1; }
.plano-lista li { padding: 5px 0 5px 24px; position: relative; font-size: 13.5px; line-height: 19px; }
.plano-lista li::before { content: "✓"; position: absolute; left: 0; color: oklch(0.58 0.13 155); font-weight: 800; }

/* ---------- Tabela comparativa ---------- */
.tabela-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--sombra); margin-top: 24px; }
.tabela-comp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.tabela-comp th { text-align: left; padding: 14px 18px; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--border); background: var(--muted); }
.tabela-comp th:not(:first-child) { text-align: center; }
.tabela-comp td { padding: 12px 18px; border-bottom: 1px solid var(--border); }
.tabela-comp tr:last-child td { border-bottom: 0; }
.tabela-comp td:not(:first-child) { text-align: center; font-weight: 600; }
.tabela-comp td.sim { color: oklch(0.58 0.13 155); }
.tabela-comp td.nao { color: var(--muted-foreground); opacity: .6; }

/* ---------- FAQ ---------- */
.faq { max-width: 720px; margin-top: 24px; }
.faq details { border: 1px solid var(--border); border-radius: 10px; background: var(--card); margin-bottom: 10px; box-shadow: var(--sombra); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 48px 16px 18px; font-weight: 700; font-size: 15px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 700; color: var(--brand); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 18px 16px; font-size: 14px; line-height: 21px; color: var(--muted-foreground); }

/* ---------- Perfis (benefícios) ---------- */
.perfil-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--sombra); }
.perfil-titulo h3 { font-size: 16.5px; margin-bottom: 4px; }
.perfil-tag { display: inline-block; background: var(--muted); color: var(--muted-foreground); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.perfil-bloco { border-left: 3px solid var(--border); padding-left: 12px; }
.perfil-bloco.com { border-left-color: var(--brand); }
.perfil-rotulo { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); }
.perfil-bloco p { font-size: 13.5px; line-height: 20px; color: var(--foreground); margin-top: 3px; }

/* ---------- Para quem não é ---------- */
.nao-e { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.nao-e-item { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; display: flex; gap: 14px; align-items: baseline; box-shadow: var(--sombra); }
.nao-e-item h3 { font-size: 14.5px; font-weight: 700; flex: none; width: 230px; }
.nao-e-item p { font-size: 14px; color: var(--muted-foreground); }

/* ---------- Etapas (como funciona) ---------- */
.etapas { display: flex; flex-direction: column; gap: 16px; }
.etapa { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 26px; box-shadow: var(--sombra); }
.etapa-num { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; }
.etapa h2 { font-size: 19px; margin-bottom: 8px; }
.etapa > p { font-size: 14.5px; line-height: 22px; color: var(--muted-foreground); max-width: 760px; }
.etapa-lista { list-style: none; margin-top: 12px; }
.etapa-lista li { padding: 4px 0 4px 22px; position: relative; font-size: 13.5px; color: var(--foreground); }
.etapa-lista li::before { content: "✓"; position: absolute; left: 0; color: oklch(0.58 0.13 155); font-weight: 800; }
.formulas { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.formula { background: var(--muted); border-radius: 8px; padding: 10px 14px; font-size: 13.5px; font-variant-numeric: tabular-nums; font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.formula span { font-weight: 800; color: var(--foreground); }

/* ---------- Cases (resultados) ---------- */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 28px; }
.case-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 14px; }
.case-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.case-titulo { font-size: 16.5px; font-weight: 800; letter-spacing: -.3px; }
.case-local { font-size: 13px; color: var(--muted-foreground); }
.case-kpi { font-size: 28px; font-weight: 800; letter-spacing: -.8px; color: var(--foreground); border-bottom: 1px solid var(--border); padding-bottom: 14px; }
.case-kpi span { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted-foreground); letter-spacing: 0; margin-top: 2px; }
.case-rotulo { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); }
.case-ant { border-left: 3px solid var(--border); padding-left: 12px; }
.case-depois { border-left: 3px solid oklch(0.58 0.13 155); padding-left: 12px; }
.case-ant p, .case-depois p { font-size: 13.5px; line-height: 20px; margin-top: 3px; }

/* ---------- Artigos (blog) ---------- */
.artigos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.artigo-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 10px; }
.artigo-meta { font-size: 12px; color: var(--muted-foreground); }
.artigo-meta span { font-weight: 800; color: var(--brand); text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.artigo-card h2 { font-size: 17px; line-height: 23px; }
.artigo-card p { font-size: 13.5px; line-height: 20px; color: var(--muted-foreground); flex: 1; }
.artigo-data { font-size: 12px; color: var(--muted-foreground); font-weight: 600; }

/* ---------- Princípios (sobre) ---------- */
.principio { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 22px; box-shadow: var(--sombra); }
.principio-num { font-size: 26px; font-weight: 800; letter-spacing: -1px; color: var(--brand); margin-bottom: 10px; }
.principio h3 { font-size: 15px; margin-bottom: 6px; }
.principio p { font-size: 13.5px; line-height: 20px; color: var(--muted-foreground); }
.sobre-foco { margin-top: 16px; background: var(--muted); border-radius: 8px; padding: 12px 14px; }
.sobre-foco p { font-size: 13.5px; line-height: 20px; margin-top: 6px; }
.sobre-citacao { border-left: 3px solid var(--brand); padding-left: 14px; font-size: 15px; font-style: italic; color: var(--foreground); line-height: 23px; margin-top: 16px; }

/* ---------- Responsivo das páginas internas ---------- */
@media (max-width: 920px) {
  .pg-hero { padding: 48px 0; }
  .pg-hero h1 { font-size: 32px; line-height: 37px; letter-spacing: -.7px; }
  .planos-grid, .ln-grid-3, .cases, .artigos { grid-template-columns: 1fr; }
  .nao-e-item { flex-direction: column; gap: 4px; }
  .nao-e-item h3 { width: auto; }
}

/* ============================================================
   v5 — Ajuste fino (régua do mockup, extraída 17/08)
   Container 1216px · h2 seção 36px · h3 card 20px · p 14px
   cards 28px/raio 8 · grids gap 24 · seções 80px · CTA esquerda
   ============================================================ */
.ln-container { max-width: 1216px; padding: 0 20px; }

/* ---------- Nav ---------- */
.ln-nav-inner { gap: 16px; }
.ln-links { gap: 4px; }
.ln-links a { padding: 8px 12px; border-radius: 6px; }
.ln-links a:hover { background: var(--muted); }
.ln-logo { font-size: 18px; font-weight: 700; }

/* ---------- Hero navy ---------- */
.ln-hero { padding: 80px 0 88px; }
.ln-hero-texto h1 { margin: 24px 0 0; }
.ln-hero-sub { font-size: 18px; line-height: 29.25px; margin-top: 20px; }
.ln-hero-nota { font-size: 14px; margin-top: 24px; }
.ln-hero-botoes .btn.brand.grande { font-size: 14px; padding: 14px 24px; }
.ln-hero-botoes .btn.ghost.claro { font-size: 14px; padding: 14px 24px; }

/* ---------- Seções ---------- */
.ln-secao { padding: 80px 0; }
.ln-secao h2, .ln-cta h2 { font-size: 36px; line-height: 45px; letter-spacing: -.72px; }
.ln-intro { font-size: 16px; line-height: 26px; }
.ln-grid-2, .ln-grid-3, .ln-grid-4 { gap: 24px; }
.ln-secao-muted { background: oklab(0.965 -0.00205212 -0.00563816 / 0.4); }
.ln-card { padding: 28px; border-radius: 8px; }
.ln-card h3 { font-size: 20px; letter-spacing: -.4px; margin: 0 0 8px; }
.ln-card p { font-size: 14px; line-height: 22.75px; }
.ln-passo { padding: 24px; border-radius: 8px; }
.ln-passo h3 { font-size: 16px; }
.ln-passo p { font-size: 14px; line-height: 22.75px; }
.ln-nota { font-size: 14px; }

/* ---------- CTA final (texto à esquerda, como o mockup) ---------- */
.ln-cta { text-align: left; }
.ln-cta-inner h2 { margin: 0 0 14px; }
.ln-cta-inner p { margin: 0 0 30px; }
.ln-cta .ln-hero-botoes { justify-content: flex-start; }
.ln-cta .btn.brand.grande { font-size: 14px; padding: 12px 20px; }
.ln-cta .btn.ghost.claro { font-size: 14px; padding: 12px 20px; }

/* ---------- Footer (navy exato do mockup) ---------- */
#ln-footer { background: oklch(0.235 0.062 265); }
#ln-footer .ln-logo { font-size: 20px; }
.ln-footer-marca p { font-size: 14px; }
.ln-footer-col h3 { font-size: 14px; font-weight: 600; letter-spacing: -.28px; text-transform: none; }
.ln-footer-col a { font-size: 14px; }

/* ---------- Hero interno ---------- */
.pg-hero h1 { font-size: 48px; line-height: 51.84px; letter-spacing: -.96px; }
.pg-intro { font-size: 18px; line-height: 29.25px; margin-top: 20px; }

/* ---------- Planos ---------- */
.planos-grid { gap: 24px; }
.plano-card { padding: 28px; }
.plano-card h2 { font-size: 24px; letter-spacing: -.48px; }
.plano-desc { font-size: 14px; line-height: 20px; }
.plano-preco { font-size: 36px; margin-top: 20px; }
.plano-lista li { font-size: 14px; line-height: 20px; }
.plano-badge { font-size: 12px; font-weight: 600; padding: 4px 12px; }
.plano-card .btn { background: transparent; color: var(--foreground); border: 1px solid var(--border); padding: 12px 16px; }
.plano-card .btn:hover { background: var(--muted); filter: none; }

/* ---------- Comparativo ---------- */
.tabela-comp th { font-size: 14px; font-weight: 600; }
.tabela-comp th, .tabela-comp td { padding: 12px 16px; }

/* ---------- FAQ ---------- */
.faq summary { font-size: 16px; font-weight: 600; }

/* ---------- Artigos e casos: mesmos cards de 28px/raio 8 ---------- */
.artigo-card, .case-card, .perfil-card, .principio { border-radius: 8px; padding: 28px; }
.cases, .artigos { gap: 24px; }
.case-kpi { font-size: 28px; }

/* ============================================================
   v6 — Responsivo mobile (verificado em viewport 390px)
   1) Menu drawer (réplica do padrão shadcn do mockup)
   2) Correção do footer: 1fr → minmax(0,1fr) para não estourar
   ============================================================ */
.ln-hamburguer { display: none; background: none; border: 0; cursor: pointer; color: var(--foreground); padding: 8px; border-radius: 6px; }
.ln-hamburguer:hover { background: var(--muted); }

.ln-drawer-overlay { position: fixed; inset: 0; background: rgba(10, 16, 26, .5); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.ln-drawer-overlay.aberto { opacity: 1; pointer-events: auto; }
.ln-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); background: var(--card); z-index: 91; transform: translateX(102%); transition: transform .22s ease; display: flex; flex-direction: column; padding: 18px 16px; box-shadow: -20px 0 60px rgba(0, 0, 0, .3); }
.ln-drawer.aberto { transform: translateX(0); }
.ln-drawer-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ln-drawer .ln-logo { font-size: 17px; }
.ln-drawer a.menu-link { display: flex; align-items: center; padding: 13px 10px; font-size: 15px; font-weight: 600; color: var(--foreground); text-decoration: none; border-radius: 8px; border-bottom: 1px solid var(--border); }
.ln-drawer a.menu-link.ativo { color: var(--brand); }
.ln-drawer a.menu-link:hover { background: var(--muted); }
.ln-drawer .menu-acoes { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border); }

@media (max-width: 920px) {
  .ln-hamburguer { display: grid; place-items: center; }
  #ln-nav .ln-entrar, #ln-nav .btn.brand { display: none; }
  #ln-nav .ln-nav-acoes { margin-left: auto; }
  .ln-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .ln-footer-col { min-width: 0; }
  .ln-footer-col a { overflow-wrap: anywhere; }
}

/* ============================================================
   v7 — Cores de fontes alinhadas ao mockup (comparação 17/08)
   ============================================================ */
:root {
  --brand-foreground: oklch(0.995 0.002 250);
}

/* Stats: números grandes em laranja brand, 30px (mockup) */
.ln-stat-valor { color: var(--brand); font-size: 30px; }

/* Hero navy: texto mais claro (branco 80% / 60% exatos do mockup) */
.ln-hero-sub { color: oklch(0.985 0.004 250 / 0.8); }
.ln-hero-nota { color: oklch(0.985 0.004 250 / 0.6); }

/* Nav: mockup não destaca o item ativo com cor — todos muted */
.ln-links a.ativo { color: var(--muted-foreground); font-weight: 500; }

/* Kicker do hero das páginas internas: 18px muted (não é eyebrow brand) */
.pg-hero .ln-eyebrow { font-size: 18px; font-weight: 400; color: var(--muted-foreground); letter-spacing: normal; text-transform: none; margin-bottom: 20px; }

/* Textos secundários: muted (mockup) em vez de navy */
.case-ant p, .case-depois p { color: var(--muted-foreground); }
.perfil-bloco p { color: var(--muted-foreground); }
.sobre-foco p { color: var(--muted-foreground); }

/* Footer: base branco puro, parágrafo da marca branco 70% */
#ln-footer { color: oklch(0.985 0.004 250); }
.ln-footer-marca p { color: oklab(0.985 -0.00136808 -0.00375877 / 0.7); }

/* Blog: título do artigo 20px (mockup) */
.artigo-card h2 { font-size: 20px; }

/* Card "Sugestão da semana": tag 12px (mockup) */
.ln-card-tag { font-size: 12px; font-weight: 600; }

/* ============================================================
   v8 — Leveza: caixa alta e molduras alinhadas ao mockup (17/08)
   Mockup usa uppercase APENAS em: eyebrows de seção (12px/600),
   tag "Sugestão da semana" (12px/400), rótulos Antes/Depois (14px/600).
   Todas as molduras do mockup são 1px.
   ============================================================ */

/* Eyebrows de seção: laranja escuro 12px/600 (não brand 800) */
.ln-eyebrow { color: oklch(0.38 0.13 42); font-weight: 600; }
.ln-eyebrow.claro { color: oklch(0.72 0.15 55); }

/* Kicker do hero das páginas internas: 14px/500 muted, sem uppercase */
.pg-hero .ln-eyebrow { font-size: 14px; font-weight: 500; color: var(--muted-foreground); letter-spacing: normal; text-transform: none; margin-bottom: 16px; }

/* Tag "Sugestão da semana": peso 400 (mockup) */
.ln-card-tag { font-weight: 400; }

/* KPI do card de sugestão: sem uppercase, 12px/400 */
.ln-kpi-rotulo { font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: normal; }

/* Rótulos Antes/Depois: 14px/600, uppercase, vermelho/verde */
.case-rotulo { font-size: 14px; font-weight: 600; }
.case-ant .case-rotulo { color: oklch(0.55 0.2 25); }
.case-depois .case-rotulo { color: oklch(0.58 0.13 155); }
.case-ant { border-left-width: 1px; border-left-color: oklch(0.55 0.2 25); }
.case-depois { border-left-width: 1px; border-left-color: oklch(0.58 0.13 155); }

/* Título do case: 16px/600 (mockup) */
.case-titulo { font-size: 16px; font-weight: 600; }

/* Perfis: rótulos Hoje/Com o EstokCerto sem uppercase, 14px/600, coloridos */
.perfil-rotulo { font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: normal; }
.perfil-bloco { border-left-width: 1px; }
.perfil-bloco .perfil-rotulo { color: oklch(0.55 0.2 25); }
.perfil-bloco.com .perfil-rotulo { color: oklch(0.58 0.13 155); }

/* Etapas: "Etapa 1" 14px/700 muted, sem uppercase, sem brand */
.etapa-num { font-size: 14px; font-weight: 700; color: var(--muted-foreground); letter-spacing: normal; }

/* Categoria do blog: 12px/600 laranja escuro, sem uppercase */
.artigo-meta span { font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: normal; color: oklch(0.38 0.13 42); }

/* Molduras: tudo 1px (mockup) */
.plano-card.destaque { border-width: 1px; }
.sobre-citacao { border-left-width: 1px; }

/* Títulos "Obrigatório"/"Recomendado": 18px (mockup) */
.dados-titulo { font-size: 18px; }

/* Badge Excesso (card da landing): texto muted (mockup) */
.badge.excesso { color: oklch(0.52 0.028 262); }

/* Plataforma: rótulos de KPI sem caixa alta (padrão mockup) */
.kpi .rotulo { font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: normal; }

/* v8b — últimas divergências encontradas na re-verificação */
.plano-badge { text-transform: none; }
.etapa-num { text-transform: none; }
.ln-card h3.dados-titulo { font-size: 18px; }
.ln-card-loja { font-size: 18px; font-weight: 700; }

/* ============================================================
   v9 — Últimos ajustes de layout (tamanhos, pesos, cores) 17/08
   ============================================================ */

/* Card "Sugestão da semana": valores 20px/800; "itens em risco" em vermelho */
.ln-kpi-valor { font-size: 20px; }
.ln-kpi-valor.risco { color: oklch(0.55 0.2 25); }

/* Stats: rótulo 14px/600 (mockup) */
.ln-stat-rotulo { font-size: 14px; font-weight: 600; }

/* Cases: KPI 36px laranja; local 14px/400; textos 14px */
.case-kpi { font-size: 36px; color: var(--brand); }
.case-local { font-size: 14px; font-weight: 400; }
.case-ant p, .case-depois p { font-size: 14px; line-height: 22.75px; }

/* Nota de transparência (resultados): 12px/400 (mockup) */
.nota-transparencia { font-size: 12px; font-weight: 400; color: var(--muted-foreground); margin-top: 28px; }

/* Blog: data 12px/400 */
.artigo-data { font-weight: 400; }

/* Perfis: tag 12px/600 */
.perfil-tag { font-size: 12px; font-weight: 600; }

/* Etapas: fórmula 14px/400; itens 14px */
.formula { font-size: 14px; font-weight: 400; }
.etapa-lista li { font-size: 14px; }

/* Princípios: número 14px/700 brand; título 20px/700 (mockup) */
.principio-num { font-size: 14px; font-weight: 700; letter-spacing: normal; }
.principio h3 { font-size: 20px; }

/* ============================================================
   v10 — Seções com o tamanho do mockup (conteúdo + padding 80)
   ============================================================ */
/* Hero interno: respiro só no topo (o inferior vem da seção) */
.pg-hero { padding: 80px 0 0; }

/* Listas dos cards "O problema real" (landing) */
.ln-lista { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.ln-lista li { padding-left: 22px; position: relative; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
.ln-lista li::before { content: "•"; position: absolute; left: 4px; color: var(--brand); font-weight: 800; font-size: 16px; }

/* Depoimentos da seção Resultados (landing) */
.ln-depoimentos { margin-top: 36px; }
.ln-depoimento { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ln-depoimento blockquote { font-size: 15.5px; line-height: 24px; color: var(--foreground); font-weight: 500; letter-spacing: -.15px; }
.ln-depoimento figcaption { font-size: 13px; color: var(--muted-foreground); }
.ln-depoimento figcaption strong { color: var(--foreground); font-weight: 600; }

/* v10b — afinação dos novos elementos (estilos exatos do mockup) */
.ln-lista { margin-top: 16px; gap: 0; }
.ln-lista li { padding: 10px 0; color: var(--foreground); }
.ln-lista li::before { color: var(--foreground); }
.ln-depoimento { gap: 0; }
.ln-depoimento blockquote { font-size: 14px; font-weight: 400; line-height: 22.75px; color: var(--foreground); margin-top: 16px; }
.ln-depoimento figcaption { font-size: 16px; font-weight: 400; color: var(--foreground); margin-top: 20px; }
.ln-depoimento figcaption strong { color: var(--foreground); font-weight: 400; }

/* v10c — depoimentos são cards (mockup: padding 24, raio 8, borda 1px) */
.ln-depoimento { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 24px; box-shadow: var(--sombra); }

/* ============================================================
   v11 — Card "Sugestão da semana" com mensagens de ação (mockup)
   "Comprar hoje" / "Ponto de pedido" / "Excesso: segurar"
   ============================================================ */
.ln-card-item .ln-acao { font-size: 12.5px; color: var(--muted-foreground); white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.ln-card-item .ln-acao b { font-weight: 700; font-size: 12.5px; }
.ln-acao.urgente b { color: oklch(0.55 0.2 25); }
.ln-acao.alerta b { color: oklch(0.75 0.15 75); }
.ln-acao.segurar { color: oklch(0.52 0.028 262); font-weight: 600; }
.ln-card-rodape { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted-foreground); }

/* CTA do hero com seta (mockup) */
.ln-hero-texto [data-abrir-diagnostico]::after { content: " →"; }

/* ============================================================
   v12 — Rodapé (fix #ln-footer) + página Sobre no padrão do mockup
   ============================================================ */
/* Rodapé: gap 40px entre colunas; itens de texto da coluna Contato */
.ln-footer-grid { gap: 40px; }
.ln-footer-col .ln-footer-item { display: block; font-size: 14px; color: oklab(0.985 -0.00136808 -0.00375877 / 0.7); margin-bottom: 9px; }
.ln-footer-base p { margin-bottom: 4px; }

/* Sobre: prosa empilhada (mockup) */
.ln-prosa h2 { font-size: 24px; letter-spacing: -.48px; margin-bottom: 4px; }
.ln-prosa h2 + p { margin-top: 8px; }
.ln-prosa p { font-size: 16px; line-height: 26px; color: var(--muted-foreground); margin-top: 12px; max-width: 720px; }
.sobre-foco { margin-top: 24px; }
.sobre-proposta { background: var(--sidebar); border: 1px solid var(--border); border-radius: 8px; padding: 24px; margin-top: 20px; max-width: 720px; }
.sobre-proposta-rotulo { display: block; font-size: 12px; font-weight: 400; letter-spacing: 1.2px; text-transform: uppercase; color: oklab(0.985 -0.00136808 -0.00375877 / 0.6); }
.sobre-proposta p { font-size: 18px; font-weight: 700; line-height: 24.75px; color: oklch(0.985 0.004 250); margin: 8px 0 0; }